/* ==========================================================================
   Sponsor Harbor — site styles ("Creator studio")
   Layer order: base -> layout -> components -> sections -> studio -> utilities
   Colors, type, space, radius, shadow, timing and easing all come from
   tokens.css. The hero illustration's drawing geometry (cqi units) lives
   with the studio, like coordinates inside an SVG.
   Mobile first. Breakpoints (media queries cannot read custom properties,
   so they are listed once here): 40rem large phone, 56rem tablet,
   64rem desktop.
   ========================================================================== */

@layer base, layout, components, sections, studio, utilities;

/* ================================ BASE ================================ */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
  }

  p,
  dl,
  dd,
  figure {
    margin: 0;
  }

  p {
    text-wrap: pretty;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    color: inherit;
  }

  svg {
    display: block;
  }

  :focus-visible {
    outline: var(--focus-ring) solid var(--color-focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
  }

  .contact :focus-visible,
  .audience--dark :focus-visible {
    outline-color: var(--color-focus-on-dark);
  }

  .contact .form :focus-visible {
    outline-color: var(--color-focus);
  }
}

/* ================================ LAYOUT ================================ */
@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--space-section);
  }

  .section--alt {
    background: var(--color-bg-alt);
  }
}

/* ================================ COMPONENTS ================================ */
@layer components {
  /* ---- Editorial accents ---- */
  .serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    color: var(--color-accent-text);
  }

  .marker {
    background: linear-gradient(
      transparent var(--marker-start),
      var(--color-highlight) var(--marker-start) var(--marker-end),
      transparent var(--marker-end)
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ---- Logo ---- */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--tap-min);
    text-decoration: none;
  }

  .logo__mark {
    inline-size: var(--logo-size);
    block-size: var(--logo-size);
    flex: none;
  }

  .logo__tile { fill: var(--color-dark); }
  .logo__play { fill: var(--color-accent); }

  .logo__wave {
    fill: none;
    stroke: var(--color-highlight);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .logo__word {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .logo__word-soft {
    font-weight: var(--weight-medium);
  }

  /* ---- Pill / eyebrow ---- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--border-thin) solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-sm);
  }

  .pill__dot {
    inline-size: var(--space-2);
    block-size: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    inline-size: var(--space-6);
    block-size: var(--border-thick);
    background: currentColor;
  }

  .eyebrow--on-dark {
    color: var(--color-highlight);
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-5);
    border: var(--border-thick) solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--dur-tap) var(--ease-ui),
      box-shadow var(--dur-ui) var(--ease-ui),
      background-color var(--dur-ui) var(--ease-ui);
  }

  .btn:active {
    transform: scale(var(--press-scale));
  }

  @media (hover: hover) {
    .btn:hover {
      transform: translateY(var(--hover-lift));
    }

    .btn:active {
      transform: scale(var(--press-scale));
    }
  }

  .btn--small {
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
  }

  .btn--large {
    min-block-size: var(--tap-large);
    padding-inline: var(--space-6);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-cta);
  }

  .btn--dark:hover {
    background: var(--color-dark-raised);
  }

  .btn--outline {
    border-color: var(--color-dark);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .btn--light {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
    box-shadow: var(--shadow-cta);
  }

  .btn[disabled] {
    cursor: progress;
    opacity: 0.7;
  }

  @media (max-width: 39.99rem) {
    .btn--block-mobile {
      inline-size: 100%;
    }
  }

  /* ---- Skip link ---- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: var(--z-menu);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    color: var(--color-on-dark);
    transform: translateY(var(--skip-hidden-shift));
  }

  .skip-link:focus {
    transform: none;
  }
}

/* ================================ SECTIONS ================================ */
@layer sections {
  /* ---- Header ---- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--color-header-bg);
    border-block-end: var(--border-thin) solid var(--color-line);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--header-height);
  }

  .site-nav {
    display: none;
    margin-inline-start: auto;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-1);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .site-nav__link:hover {
    color: var(--color-text);
    background: var(--color-bg-alt);
  }

  .site-header__cta {
    display: none;
  }

  .menu {
    margin-inline-start: auto;
  }

  .menu__toggle {
    display: grid;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border-radius: var(--radius-pill);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu__toggle::-webkit-details-marker {
    display: none;
  }

  .menu__icon,
  .menu__icon::before,
  .menu__icon::after {
    display: block;
    inline-size: var(--icon-bar-width);
    block-size: var(--border-thick);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    transition: transform var(--dur-ui) var(--ease-ui);
  }

  .menu__icon {
    position: relative;
  }

  .menu__icon::before,
  .menu__icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .menu__icon::before { transform: translateY(calc(var(--icon-bar-gap) * -1)); }
  .menu__icon::after { transform: translateY(var(--icon-bar-gap)); }
  .menu[open] .menu__icon { background: transparent; }
  .menu[open] .menu__icon::before { transform: rotate(45deg); }
  .menu[open] .menu__icon::after { transform: rotate(-45deg); }

  .menu__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--color-surface);
    border-block-end: var(--border-thin) solid var(--color-line);
    box-shadow: var(--shadow-lg);
  }

  .menu__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-large);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }

  .menu__link:active {
    background: var(--color-bg-alt);
  }

  .menu__panel .btn {
    margin-block-start: var(--space-3);
  }

  @media (min-width: 64rem) {
    .site-nav,
    .site-header__cta {
      display: flex;
    }

    .site-header__cta {
      margin-inline-start: var(--space-2);
    }

    .menu {
      display: none;
    }
  }

  /* ---- Hero ---- */
  .hero {
    position: relative;
    padding-block: var(--space-4) var(--space-section);
    overflow: clip;
    background-image: radial-gradient(var(--color-dot) var(--dot-size), transparent var(--dot-size));
    background-size: var(--dot-gap) var(--dot-gap);
  }

  .hero__inner {
    display: grid;
    gap: var(--space-5);
    align-items: center;
  }

  .hero__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-hero);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  .hero__lede {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-4);
    color: var(--color-text-soft);
    font-size: var(--text-lg);
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .hero__actions .btn {
    padding-inline: var(--space-4);
  }

  .hero__note {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  @media (min-width: 40rem) {
    .hero__actions {
      display: flex;
      flex-wrap: wrap;
    }

    .hero__actions .btn {
      padding-inline: var(--space-6);
    }
  }

  @media (min-width: 64rem) {
    .hero {
      padding-block-start: var(--space-8);
    }

    .hero__inner {
      grid-template-columns: 1fr 1.02fr;
      grid-template-areas:
        "copy studio"
        "note studio";
      column-gap: var(--space-8);
      row-gap: var(--space-4);
    }

    .hero__copy {
      grid-area: copy;
      align-self: end;
    }

    .hero__studio {
      grid-area: studio;
    }

    .hero__note {
      grid-area: note;
      align-self: start;
    }

    .hero__title {
      margin-block-start: var(--space-5);
    }
  }

  /* ---- Section heads ---- */
  .section-head {
    max-inline-size: var(--width-narrow);
    margin-block-end: var(--space-7);
  }

  .section-head__title {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .section-head__text {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-4);
    color: var(--color-text-soft);
    font-size: var(--text-lg);
  }

  /* ---- Chapters (how it works): a video timeline you scroll through ---- */
  .chapters {
    position: relative;
    padding-inline-start: calc(var(--chapter-size) + var(--space-5));
  }

  .chapters__track {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--chapter-size);
    container-type: size;
  }

  .chapters__line,
  .chapters__fill {
    position: absolute;
    inset-block: calc(var(--chapter-size) / 2);
    inset-inline-start: calc(50% - var(--border-thick));
    inline-size: calc(var(--border-thick) * 2);
    border-radius: var(--radius-pill);
  }

  .chapters__line {
    background: var(--color-line-strong);
  }

  .chapters__fill {
    background: var(--color-accent);
    transform-origin: top;
  }

  .chapters__head {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-1);
    inline-size: var(--chapter-size);
    block-size: var(--chapter-size);
    border: var(--space-1) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(calc(100cqh - 100%));
  }

  .chapters__list {
    display: grid;
    gap: var(--space-7);
  }

  .chapter {
    position: relative;
  }

  .chapter__num {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc((var(--chapter-size) + var(--space-5)) * -1);
    z-index: var(--z-2);
    display: grid;
    place-items: center;
    inline-size: var(--chapter-size);
    block-size: var(--chapter-size);
    border: var(--border-thick) solid var(--color-dark);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-black);
  }

  .chapter__title {
    padding-block-start: var(--space-2);
    font-size: var(--text-xl);
  }

  .chapter__text {
    margin-block-start: var(--space-2);
    color: var(--color-text-soft);
  }

  @media (min-width: 64rem) {
    .chapters {
      padding-inline-start: 0;
      padding-block-start: calc(var(--chapter-size) + var(--space-6));
    }

    .chapters__track {
      inset-inline: 0;
      inset-block: 0 auto;
      inline-size: auto;
      block-size: var(--chapter-size);
    }

    .chapters__line,
    .chapters__fill {
      inset-block: calc(50% - var(--border-thick)) auto;
      inset-inline: calc(var(--chapter-size) / 2);
      inline-size: auto;
      block-size: calc(var(--border-thick) * 2);
    }

    .chapters__fill {
      transform-origin: left;
    }

    .chapters__head {
      transform: translateX(calc(100cqw - 100%));
    }

    .chapters__list {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
    }

    .chapter__num {
      inset-block-start: calc((var(--chapter-size) + var(--space-6)) * -1);
      inset-inline-start: 0;
    }

    .chapter__title {
      padding-block-start: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .chapters {
        view-timeline-name: --chapters;
      }

      .chapters__head,
      .chapters__fill {
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --chapters;
        animation-range: cover var(--route-anchor) cover calc(100% - var(--route-anchor));
      }

      .chapters__head { animation-name: scrub-down; }
      .chapters__fill { animation-name: fill-down; }

      @media (min-width: 64rem) {
        .chapters__head,
        .chapters__fill {
          animation-range: contain 0% contain 80%;
        }

        .chapters__head { animation-name: scrub-across; }
        .chapters__fill { animation-name: fill-across; }
      }
    }
  }

  @keyframes scrub-down {
    from { transform: translateY(0); }
    to { transform: translateY(calc(100cqh - 100%)); }
  }

  @keyframes scrub-across {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100cqw - 100%)); }
  }

  @keyframes fill-down {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }

  @keyframes fill-across {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* ---- Audiences ---- */
  .audiences {
    display: grid;
    gap: var(--space-5);
  }

  .audience {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .audience__title {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .audience--dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
  }

  .audience--dark .serif {
    color: var(--color-highlight);
  }

  .perks {
    display: grid;
    align-self: stretch;
    margin-block: var(--space-6);
  }

  .perk {
    position: relative;
    padding-block: var(--space-4);
    padding-inline-start: calc(var(--check-size) + var(--space-4));
    border-block-start: var(--border-thin) solid var(--color-line);
  }

  .perk::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-4) + var(--check-top));
    inline-size: var(--check-size);
    block-size: calc(var(--check-size) / 2);
    border-inline-start: var(--border-thick) solid var(--color-accent);
    border-block-end: var(--border-thick) solid var(--color-accent);
    transform: rotate(-45deg);
  }

  .perk__title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
  }

  .perk__text {
    margin-block-start: var(--space-1);
    color: var(--color-text-soft);
  }

  .audience--dark .perk {
    border-color: var(--color-on-dark-line);
  }

  .audience--dark .perk::before {
    border-color: var(--color-highlight);
  }

  .audience--dark .perk__text {
    color: var(--color-on-dark-soft);
  }

  .audience .btn {
    margin-block-start: auto;
  }

  @media (min-width: 40rem) {
    .audience {
      padding: var(--space-7);
    }
  }

  @media (min-width: 56rem) {
    .audiences {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ---- Open to all niches ---- */
  .open {
    display: grid;
    gap: var(--space-7);
  }

  .open__intro .section-head__text + .section-head__text {
    margin-block-start: var(--space-3);
  }

  .open__panel {
    display: grid;
    gap: var(--space-4);
  }

  .chipbar {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .chipbar__label {
    margin-block-end: var(--space-4);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .chipbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .chip {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .chip--active {
    background: var(--color-dark);
    color: var(--color-on-dark);
  }

  .chip--more {
    background: transparent;
    color: var(--color-text-soft);
    font-style: italic;
  }

  .refuse {
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-line-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
  }

  .refuse__title {
    font-size: var(--text-lg);
  }

  .refuse__text {
    margin-block: var(--space-1) var(--space-4);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
  }

  .refuse__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .refuse__list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .refuse__list li::before {
    content: "";
    inline-size: var(--check-size);
    block-size: var(--border-thick);
    border-radius: var(--radius-pill);
    background: var(--color-accent-text);
  }

  @media (min-width: 64rem) {
    .open {
      grid-template-columns: 1fr 1.1fr;
      gap: var(--space-8);
      align-items: center;
    }
  }

  /* ---- FAQ ---- */
  .faq {
    display: grid;
    gap: var(--space-3);
  }

  .faq__item {
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .faq__q {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: var(--tap-large);
    padding: var(--space-4) calc(var(--space-5) * 2 + var(--plus-size)) var(--space-4) var(--space-5);
    font-weight: var(--weight-bold);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  .faq__q::before,
  .faq__q::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--space-5);
    inset-block-start: calc(50% - var(--border-thick) / 2);
    inline-size: var(--plus-size);
    block-size: var(--border-thick);
    border-radius: var(--radius-pill);
    background: var(--color-accent-text);
    transition: transform var(--dur-ui) var(--ease-ui);
  }

  .faq__q::after { transform: rotate(90deg); }
  .faq__item[open] .faq__q::after { transform: rotate(0deg); }

  .faq__a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-soft);
  }

  @media (min-width: 64rem) {
    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: var(--space-8);
      align-items: start;
    }

    .faq-layout .section-head {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-6));
    }
  }

  /* ---- Contact ---- */
  .contact {
    padding-block: var(--space-7);
    /* Land exactly under the sticky header, not 1rem below it */
    scroll-margin-block-start: calc(var(--space-4) * -1);
    background-color: var(--color-dark);
    background-image: radial-gradient(var(--color-on-dark-line) var(--dot-size), transparent var(--dot-size));
    background-size: var(--dot-gap) var(--dot-gap);
    color: var(--color-on-dark);
  }

  .contact__inner {
    display: grid;
    gap: var(--space-7);
    align-items: start;
  }

  .contact__title {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .contact__title .serif {
    color: var(--color-highlight);
  }

  .contact__text {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-4);
    color: var(--color-on-dark-soft);
    font-size: var(--text-lg);
  }

  .contact__direct {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-thin) solid var(--color-on-dark-line);
  }

  .contact__direct dt {
    color: var(--color-on-dark-soft);
    font-size: var(--text-sm);
  }

  .contact__email {
    display: inline-block;
    padding-block: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-decoration-color: var(--color-highlight);
    text-underline-offset: var(--space-1);
  }

  /* Phones and tablets: heading, then the form, then "Prefer email?" */
  @media (max-width: 63.99rem) {
    .contact__inner {
      gap: 0;
    }

    .contact__intro {
      display: contents;
    }

    .form {
      margin-block-start: var(--space-6);
    }

    .contact__direct {
      order: 1;
    }
  }

  @media (min-width: 64rem) {
    .contact {
      display: grid;
      align-items: center;
      min-block-size: calc(100svh - var(--header-height));
      padding-block: var(--space-4);
    }

    .contact__inner {
      grid-template-columns: 1fr 1.1fr;
      gap: var(--space-8);
      align-items: center;
    }
  }

  /* ---- Form ---- */
  .form {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
  }

  .form__label {
    display: block;
    margin-block-end: var(--space-2);
    padding: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }

  .form__optional {
    color: var(--color-text-soft);
    font-weight: var(--weight-medium);
  }

  .form__roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .form__roles legend {
    grid-column: 1 / -1;
    float: inline-start;
    inline-size: 100%;
  }

  .role {
    position: relative;
    display: block;
    cursor: pointer;
  }

  .role__input {
    position: absolute;
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    cursor: pointer;
  }

  .role__card {
    display: flex;
    flex-direction: column;
    column-gap: var(--space-2);
    min-block-size: var(--tap-large);
    padding: var(--space-3);
    border: var(--border-thick) solid var(--color-field-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui);
  }

  .role__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .role__hint {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
  }

  .role__input:checked + .role__card {
    border-color: var(--color-dark);
    background: var(--color-highlight-tint);
  }

  .role__input:focus-visible + .role__card {
    outline: var(--focus-ring) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .field__input {
    display: block;
    inline-size: 100%;
    min-block-size: var(--field-height);
    padding: var(--space-3) var(--space-4);
    border: var(--border-thick) solid var(--color-field-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--dur-ui) var(--ease-ui);
  }

  .field__input:focus {
    border-color: var(--color-dark);
    outline: none;
  }

  .field__input:focus-visible {
    outline: var(--focus-ring) solid var(--color-focus);
    outline-offset: var(--border-thin);
  }

  .field__input--area {
    min-block-size: var(--textarea-height);
    max-block-size: var(--textarea-max);
    field-sizing: content;
    resize: vertical;
  }

  .field__input[aria-invalid="true"] {
    border-color: var(--color-error);
  }

  .form__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Turnstile only shows itself when it needs the visitor to click */
  .form__captcha:empty {
    display: none;
  }

  .form__spinner {
    display: none;
    inline-size: var(--spinner-size);
    block-size: var(--spinner-size);
    border: var(--border-thick) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--radius-pill);
  }

  .form.is-sending .form__spinner {
    display: inline-block;
  }

  @media (prefers-reduced-motion: no-preference) {
    .form.is-sending .form__spinner {
      animation: spin var(--dur-spin) linear infinite;
    }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .form__status {
    min-block-size: var(--leading-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  /* Stays in the page so screen readers announce changes; takes no space while empty */
  .form__status:empty {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .form__status.is-error {
    color: var(--color-error);
  }

  .form__privacy {
    color: var(--color-text-soft);
    font-size: var(--text-xs);
  }

  .form__privacy a {
    display: inline-block;
    padding-block: var(--space-1);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  .form.is-done > :not(.form__done) {
    visibility: hidden;
  }

  /* The thank-you card covers the form in place: same size, nothing moves */
  .form__done {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: inherit;
    background: var(--color-surface);
    text-align: center;
    overflow: clip;
  }

  .form__again {
    margin-block-start: var(--space-3);
  }

  .form__done[hidden] {
    display: none;
  }

  .form__stamp {
    padding: var(--space-2) var(--space-5);
    border: var(--space-1) solid var(--color-success);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transform: rotate(var(--studio-stamp-tilt));
  }

  @media (prefers-reduced-motion: no-preference) {
    .form.is-done .form__stamp {
      animation: stamp-slam var(--dur-slam) var(--ease-slam) both;
    }
  }

  .form__done-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
  }

  .form__done-title:focus {
    outline: none;
  }

  .form__done-text {
    color: var(--color-text-soft);
  }

  @media (min-width: 40rem) {
    .role__card {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
    }

    .form {
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-4);
      padding: var(--space-6);
    }

    .form > * {
      grid-column: 1 / -1;
    }

    .form > .field--half {
      grid-column: auto;
    }
  }

  /* ---- Footer ---- */
  .site-footer {
    padding-block: var(--space-8) var(--space-5);
    background: var(--color-bg-alt);
    overflow: clip;
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-7);
  }

  .site-footer__tagline {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-3);
    color: var(--color-text-soft);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--footer-col), 1fr));
    gap: var(--space-6);
  }

  .site-footer__heading {
    margin-block-end: var(--space-2);
    color: var(--color-text-soft);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .site-footer__col a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .site-footer__col a:hover {
    text-decoration: underline;
  }

  .site-footer__mega {
    margin-block: var(--space-7) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-mega);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
  }

  .site-footer__mega .serif {
    font-weight: var(--weight-medium);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-thin) solid var(--color-line-strong);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
  }

  .site-footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  @media (min-width: 56rem) {
    .site-footer__top {
      grid-template-columns: 1.4fr 1fr;
      align-items: start;
    }
  }

  /* ---- Simple text pages (privacy, 404) ---- */
  .page {
    max-inline-size: var(--width-narrow);
    margin-inline: auto;
    padding: var(--space-section) var(--gutter);
  }

  .page h1 {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .page h2 {
    margin-block: var(--space-6) var(--space-2);
    font-size: var(--text-xl);
  }

  .page p,
  .page li {
    color: var(--color-text-soft);
  }

  .page p + p {
    margin-block-start: var(--space-3);
  }

  .page ul {
    padding-inline-start: var(--space-5);
    list-style: disc;
  }

  .page__meta {
    margin-block: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }

  .page .btn {
    margin-block-start: var(--space-6);
  }
}

/* ==========================================================================
   STUDIO — the hero film
   Story: a creator's video and a brand's brief arrive on the desk, the
   channel's numbers are checked, the brief's "Sponsor" slot is lifted into
   the video's timeline, the video plays through it, the creator approves,
   the brief is stamped, and the payment goes out. Then the desk breathes.
   The resting CSS IS the final frame, so reduced motion and no-JS get the
   finished collage. Only transform and opacity are animated.
   ========================================================================== */
@layer studio {
  .studio {
    position: relative;
    container-type: inline-size;
    aspect-ratio: var(--studio-ratio);
    border-radius: var(--radius-2xl);
    background-color: var(--studio-bg);
    background-image:
      radial-gradient(circle at 18% 22%, var(--color-accent-tint), transparent 40%),
      radial-gradient(circle at 85% 80%, var(--color-cool-tint), transparent 45%),
      radial-gradient(var(--color-dot) var(--dot-size), transparent var(--dot-size));
    background-size: auto, auto, var(--dot-gap) var(--dot-gap);
    box-shadow: inset 0 0 0 var(--border-thin) var(--color-line);
    overflow: hidden;
    isolation: isolate;
  }

  .studio__item {
    position: absolute;
  }

  .studio__item--player { z-index: var(--z-3); inset-inline-start: 4cqi; inset-block-start: 9cqi; inline-size: 62cqi; }
  .studio__item--brief  { z-index: var(--z-2); inset-inline-start: 62cqi; inset-block-start: 51cqi; inline-size: 35cqi; }
  .studio__item--stats  { z-index: var(--z-1); inset-inline-start: 69cqi; inset-block-start: 12cqi; inline-size: 27cqi; }
  .studio__item--toast  { z-index: var(--z-4); inset-inline-start: 34cqi; inset-block-start: 3.5cqi; }
  .studio__item--pay    { z-index: var(--z-4); inset-inline-start: 8cqi; inset-block-start: 62cqi; inline-size: 44cqi; }

  .studio__card {
    position: relative;
    border-radius: 2.2cqi;
    background: var(--studio-card);
    box-shadow: var(--shadow-card);
    transform: rotate(var(--tilt, 0deg));
  }

  .stats { --tilt: var(--studio-tilt-stats); }
  .toast { --tilt: var(--studio-tilt-toast); }
  .pay   { --tilt: var(--studio-tilt-pay); }

  /* ---- Video player ---- */
  .player {
    padding: 1.6cqi;
  }

  .player__thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1.4cqi;
    background: var(--studio-thumb-b);
  }

  .player__blob {
    position: absolute;
    border-radius: var(--radius-pill);
  }

  .player__blob--a { inset: -30% 35% 20% -20%; background: radial-gradient(closest-side, var(--studio-thumb-a), transparent); }
  .player__blob--b { inset: 25% -25% -40% 40%; background: radial-gradient(closest-side, var(--studio-thumb-c), transparent); }
  .player__blob--c { inset: -40% -10% 50% 55%; background: radial-gradient(closest-side, var(--studio-thumb-d), transparent); }

  .player__play {
    position: relative;
    inline-size: 11cqi;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: var(--studio-card);
    box-shadow: var(--shadow-md);
  }

  .player__play::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 3.4cqi;
    block-size: 3.8cqi;
    background: var(--studio-play);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateX(0.4cqi);
  }

  .player__time {
    position: absolute;
    inset-block-end: 1.4cqi;
    inset-inline-end: 1.4cqi;
    padding: 0.4cqi 1cqi;
    border-radius: 0.6cqi;
    background: var(--studio-play);
    color: var(--color-on-dark);
    font-size: 1.9cqi;
    font-weight: var(--weight-bold);
    line-height: 1.2;
  }

  .player__meta {
    display: flex;
    align-items: center;
    gap: 1.4cqi;
    margin-block-start: 1.8cqi;
  }

  .player__avatar {
    flex: none;
    inline-size: 4.6cqi;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--studio-thumb-a), var(--studio-thumb-b));
  }

  .player__lines {
    display: grid;
    flex: 1;
    gap: 0.8cqi;
  }

  .player__lines span {
    block-size: 1.2cqi;
    border-radius: var(--radius-pill);
    background: var(--studio-bar);
  }

  .player__lines span + span {
    inline-size: 55%;
    background: var(--studio-bar-soft);
  }

  .player__timeline {
    position: relative;
    display: flex;
    gap: 0.6cqi;
    block-size: 1.3cqi;
    margin-block: 2.6cqi 1cqi;
  }

  .player__chapter {
    flex: 1;
    border-radius: var(--radius-pill);
    background: var(--studio-bar);
  }

  .player__progress {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--studio-play);
    transform-origin: 0 50%;
    transform: scaleX(var(--studio-scrub-to));
    opacity: 0.85;
  }

  .player__sponsor,
  .brief__slot {
    display: grid;
    place-items: center;
    inline-size: 14cqi;
    block-size: 3.4cqi;
    border-radius: 0.8cqi;
    font-size: 1.9cqi;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  .player__sponsor {
    position: absolute;
    inset-block-start: -1.05cqi;
    inset-inline-start: 24%;
    z-index: var(--z-2);
    background: var(--studio-sponsor);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
  }

  /* The playhead travels across the whole timeline width */
  .player__head {
    position: absolute;
    inset: 0;
    z-index: var(--z-3);
    transform: translateX(calc(var(--studio-scrub-to) * 100%));
  }

  .player__head::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 3.2cqi;
    aspect-ratio: 1;
    border: 0.6cqi solid var(--studio-card);
    border-radius: var(--radius-pill);
    background: var(--studio-play);
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
  }

  /* ---- Brand brief ---- */
  .brief {
    display: grid;
    gap: 1.4cqi;
    padding: 2.2cqi;
  }

  .brief__head {
    display: flex;
    align-items: center;
    gap: 1.4cqi;
    margin-block-end: 0.6cqi;
  }

  .brief__logo {
    inline-size: 4.6cqi;
    aspect-ratio: 1;
    border-radius: 1.2cqi;
    background: linear-gradient(135deg, var(--studio-thumb-c), var(--studio-thumb-d));
  }

  .brief__label {
    font-family: var(--font-display);
    font-size: 2.7cqi;
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-snug);
  }

  .brief__line {
    block-size: 1.2cqi;
    border-radius: var(--radius-pill);
    background: var(--studio-bar);
  }

  .brief__line--short {
    inline-size: 70%;
  }

  /* After the hand-off only a dashed outline stays behind */
  .brief__slot {
    position: relative;
    margin-block-start: 0.6cqi;
    border: 0.3cqi dashed var(--color-line-strong);
    color: var(--color-text-soft);
  }

  .brief__slot::after {
    content: "Sponsor";
    position: absolute;
    inset: -0.3cqi;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: var(--studio-sponsor);
    color: var(--color-text);
    opacity: 0;
  }

  .brief__stamp {
    position: absolute;
    inset-block-end: 5.6cqi;
    inset-inline-end: 1.8cqi;
    padding: 0.6cqi 1.6cqi;
    border: 0.55cqi solid var(--studio-stamp);
    border-radius: 1cqi;
    color: var(--studio-stamp);
    font-family: var(--font-display);
    font-size: 2.7cqi;
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-wide);
    line-height: 1.1;
    text-transform: uppercase;
    background: var(--studio-card);
    transform: rotate(var(--studio-stamp-tilt));
  }

  /* ---- Channel stats ---- */
  .stats {
    display: grid;
    gap: 1.6cqi;
    padding: 2cqi;
  }

  .stats__label {
    font-size: 2.1cqi;
    font-weight: var(--weight-bold);
    color: var(--color-text-soft);
  }

  .stats__bars {
    display: flex;
    align-items: flex-end;
    gap: 0.8cqi;
    block-size: 10cqi;
  }

  .stats__bars span {
    flex: 1;
    block-size: var(--h);
    border-radius: 0.5cqi 0.5cqi 0.2cqi 0.2cqi;
    background: var(--studio-spark-soft);
    transform-origin: 50% 100%;
  }

  .stats__bars span:nth-child(1)  { --h: 55%; --i: 0; }
  .stats__bars span:nth-child(2)  { --h: 70%; --i: 1; }
  .stats__bars span:nth-child(3)  { --h: 48%; --i: 2; }
  .stats__bars span:nth-child(4)  { --h: 80%; --i: 3; }
  .stats__bars span:nth-child(5)  { --h: 62%; --i: 4; }
  .stats__bars span:nth-child(6)  { --h: 90%; --i: 5; }
  .stats__bars span:nth-child(7)  { --h: 66%; --i: 6; }
  .stats__bars span:nth-child(8)  { --h: 74%; --i: 7; }
  .stats__bars span:nth-child(9)  { --h: 58%; --i: 8; }
  .stats__bars span:nth-child(10) { --h: 85%; --i: 9; background: var(--studio-spark); }

  /* ---- Creator approval toast ---- */
  .toast {
    display: flex;
    align-items: center;
    gap: 1.2cqi;
    padding: 1.2cqi 1.8cqi 1.2cqi 1.2cqi;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .toast__avatar {
    inline-size: 4.4cqi;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--studio-thumb-a), var(--studio-thumb-b));
  }

  .toast__text {
    font-size: 2.4cqi;
    font-weight: var(--weight-bold);
  }

  .toast__tick,
  .pay__check {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: var(--studio-pay);
  }

  .toast__tick { inline-size: 3.2cqi; }
  .pay__check { inline-size: 7cqi; flex: none; }

  .toast__tick::after,
  .pay__check::after {
    content: "";
    inline-size: 40%;
    block-size: 20%;
    border-inline-start: 0.5cqi solid var(--studio-card);
    border-block-end: 0.5cqi solid var(--studio-card);
    transform: translateY(-15%) rotate(-45deg);
  }

  .pay__check::after {
    border-width: 0.8cqi;
  }

  /* ---- Payment ---- */
  .pay {
    display: flex;
    align-items: center;
    gap: 2cqi;
    padding: 2.2cqi;
  }

  .pay__text {
    display: grid;
    gap: 0.4cqi;
  }

  .pay__title {
    font-family: var(--font-display);
    font-size: 3.4cqi;
    font-weight: var(--weight-black);
    line-height: 1.1;
  }

  .pay__sub {
    color: var(--color-text-soft);
    font-size: 2.3cqi;
    font-weight: var(--weight-semibold);
  }

  /* ---------- The film ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .studio__item--player { animation: enter-rise var(--dur-enter) var(--ease-glide) var(--at-player) both; }
    .studio__item--brief  { animation: enter-swing var(--dur-enter) var(--ease-land) var(--at-brief) both; }
    .studio__item--stats  { animation: enter-side var(--dur-enter) var(--ease-glide) var(--at-stats) both; }
    .studio__item--toast  { animation: pop-in var(--dur-pop) var(--ease-land) var(--at-toast) both; }
    .studio__item--pay    { animation: enter-rise var(--dur-enter) var(--ease-land) var(--at-pay) both; }

    .stats__bars span {
      animation: bar-grow var(--dur-bars) var(--ease-land) calc(var(--at-bars) + var(--i) * var(--dur-stagger)) both;
    }

    .brief__slot::after {
      animation: hand-off var(--dur-instant) linear var(--at-toss) both;
    }

    .player__sponsor {
      animation:
        chip-toss var(--dur-toss) var(--ease-toss) var(--at-toss) both,
        chip-snap var(--dur-snap) var(--ease-land) calc(var(--at-toss) + var(--dur-toss));
    }

    .player__progress { animation: progress-run var(--dur-scrub) var(--ease-glide) var(--at-scrub) both; }
    .player__head     { animation: head-run var(--dur-scrub) var(--ease-glide) var(--at-scrub) both; }

    .brief__stamp { animation: stamp-slam var(--dur-slam) var(--ease-slam) var(--at-stamp) both; }

    .pay__check { animation: pop-in var(--dur-pop) var(--ease-land) var(--at-check) both; }

    /* The desk breathes once the story is told */
    .studio__card {
      animation: desk-float var(--dur-float) var(--ease-float) var(--at-float) infinite alternate;
    }

    .studio__card:is(.stats, .pay) {
      animation-duration: var(--dur-float-alt);
      animation-direction: alternate-reverse;
    }

    .brief {
      animation:
        brief-recoil var(--dur-recoil) var(--ease-land) calc(var(--at-stamp) + var(--dur-slam)),
        desk-float var(--dur-float-alt) var(--ease-float) var(--at-float) infinite alternate;
    }

    .studio.is-offscreen .studio__card {
      animation-play-state: paused;
    }

    .studio.is-offscreen .brief {
      animation-play-state: running, paused;
    }
  }

  @keyframes enter-rise {
    from {
      opacity: 0;
      transform: translateY(var(--studio-enter-rise)) scale(0.94);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes enter-swing {
    from {
      opacity: 0;
      transform: translateX(var(--studio-enter-side)) rotate(var(--studio-enter-tilt));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes enter-side {
    from {
      opacity: 0;
      transform: translateX(var(--studio-enter-side));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes pop-in {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes bar-grow {
    from { transform: scaleY(0); }
    to { transform: none; }
  }

  @keyframes hand-off {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* The chip starts exactly on the brief's slot (site.js measures it),
     arcs across the desk and lands in the timeline. */
  @keyframes chip-toss {
    0% {
      opacity: 0;
      transform: translate(var(--studio-toss-x), var(--studio-toss-y));
    }
    1% {
      opacity: 1;
      transform: translate(var(--studio-toss-x), var(--studio-toss-y));
    }
    50% {
      transform: translate(calc(var(--studio-toss-x) * 0.5), var(--studio-toss-arc)) rotate(-8deg) scale(1.18);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes chip-snap {
    from { transform: scale(1.25, 0.75); }
    to { transform: none; }
  }

  @keyframes progress-run {
    from { transform: scaleX(var(--studio-scrub-from)); }
    to { transform: scaleX(var(--studio-scrub-to)); }
  }

  @keyframes head-run {
    from { transform: translateX(calc(var(--studio-scrub-from) * 100%)); }
    to { transform: translateX(calc(var(--studio-scrub-to) * 100%)); }
  }

  @keyframes stamp-slam {
    from {
      opacity: 0;
      transform: scale(var(--studio-stamp-from)) rotate(calc(var(--studio-stamp-tilt) * 2));
    }
    to {
      opacity: 1;
      transform: rotate(var(--studio-stamp-tilt));
    }
  }

  @keyframes brief-recoil {
    0% { transform: none; }
    30% { transform: translateY(var(--studio-recoil)) scale(0.985); }
    100% { transform: none; }
  }

  @keyframes desk-float {
    from { transform: rotate(var(--tilt, 0deg)); }
    to { transform: translateY(var(--studio-float-rise)) rotate(calc(var(--tilt, 0deg) + var(--studio-float-tilt))); }
  }
}

/* ================================ UTILITIES ================================ */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  [hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: var(--dur-instant);
    }
  }
}