/* ────────────────────────────────────────────────────────────────────
     WHY.CGI — built to the house system: monochrome, work-first, one heavy
     grotesque doing the shouting and a mono face carrying every label.

     No accent colour anywhere. On a studio page the only colour that should
     exist is the colour inside the frames, and the moment a brand pink runs
     next to a Gardinex plate or an Audemars movement, the page is competing
     with its own work.
     ──────────────────────────────────────────────────────────────────── */

  :root {
    /* Lets `block-size: auto` be a transition endpoint — the whole reason the
       service panels can slide rather than snap. */
    interpolate-size: allow-keywords;

    --black:   #060607;
    --raised:  #0E0E10;
    --lift:    #17171A;
    --hair:    rgba(255, 255, 255, 0.11);
    --hair-2:  rgba(255, 255, 255, 0.055);

    --white:   #FFFFFF;
    --dim:     #9C9C9F;   /* neutral with the faintest cool cast */
    --faint:   #6A6A6E;

    --paper:   #F2F2F0;   /* the logo strip, and only the logo strip */
    --paper-fg:#1A1A1B;

    --shell: min(1560px, 92vw);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(0.9rem, 0.4vw + 0.8rem, 1.0625rem);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection { background: var(--white); color: var(--black); }

  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

  .shell { width: var(--shell); margin-inline: auto; }

  .mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dim);
  }

  /* Manrope at its heaviest, tracked hard negative. A geometric grotesque set
     in MIXED CASE rather than all-caps: caps were shouting the same volume in
     every section, and the round bowls of this face are the reason the
     reference reads as confident instead of loud. */
  .display {
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.92;
    text-wrap: balance;
    margin: 0;
  }

  /* ── Top bar ───────────────────────────────────────────────────────── */
  header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    padding: 1.15rem 0;
    /* Over the hero it is a soft scrim; once the page moves it becomes a SOLID
       bar. The gradient was fine against footage and wrong against everything
       else — scrolled over a section title it read as a smear of black across
       the top of the page rather than a bar covering what passes under it. */
    background: linear-gradient(to bottom, rgba(6,6,7,0.72), rgba(6,6,7,0));
    transition: background 300ms ease, backdrop-filter 300ms ease;
  }
  header[data-stuck="true"] {
    background: var(--black);
    border-bottom: 1px solid var(--hair-2);
  }

  .bar {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-size: 1.15rem;
  }
  /* The studio's own mark — the chrome W in a ring — at nav size. */
  .wordmark .mark { width: 34px; height: 34px; flex: none; }
  /* The discipline line is exactly as wide as the wordmark above it: the
     lockup shrinks to the title, the line justifies across it, and the small
     inset matches the W's side bearing so the two left edges meet. */
  .hero-lockup { display: inline-block; }
  .hero-lockup .hero-title { display: block; }
  .hero-subline { display: block; margin: 1.1rem 0 0 .06em; font-size: .7rem; letter-spacing: .2em; color: var(--dim); text-align: left; white-space: nowrap; }
  @media (max-width: 720px) { .hero-subline { font-size: .5rem; margin-top: .4rem; } }
  .wordmark small {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    color: var(--dim);
    font-weight: 400;
    margin-top: 2px;
  }

  /* Centred pill nav, floating over the plate. */
  .pill-nav {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 0.25rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    border: 1px solid var(--hair);
  }
  .pill-nav a {
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
    transition: background 180ms ease, color 180ms ease;
  }
  .pill-nav a sup {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5rem;
    color: var(--dim);
    letter-spacing: 0.06em;
  }
  .pill-nav a:hover { background: var(--white); color: var(--black); }
  .pill-nav a:hover sup { color: var(--faint); }

  .meet {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    border: 1px solid var(--hair);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 180ms ease, color 180ms ease;
  }
  .meet:hover { background: var(--white); color: var(--black); }
  .meet svg { width: 14px; height: 14px; }

  @media (min-width: 1024px) { .pill-nav { display: flex; } }

  /* ── Burger + phone menu ────────────────────────────────────────────── */
  .burger {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 0.65rem;
    height: 42px;
    padding: 0 0.4rem 0 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    color: var(--white);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    flex: none;
  }
  .burger-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--white);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
  }
  .burger-icon i {
    display: block;
    width: 12px; height: 2px;
    border-radius: 2px;
    background: var(--black);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .burger[aria-expanded="true"] .burger-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  @media (max-width: 1023px) {
    .burger { display: inline-flex; }
    /* The bar holds the mark and the menu, nothing else: Meet lives in the
       menu and Contact is always in the corner. */
    .meet { display: none; }
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 6rem 0 max(1.75rem, env(safe-area-inset-bottom));
    overflow: auto;
    background: rgba(6, 6, 7, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .menu[hidden] { display: none; }
  .menu-links { display: grid; }
  .menu-links a {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hair-2);
    font-size: clamp(2.2rem, 9.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    /* The start state lives in the keyframe, not on the element: with motion
       reduced the animation is dropped, and a static opacity 0 would have
       left the menu empty. */
    animation: menu-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .menu-links a:nth-child(1) { animation-delay: 40ms; }
  .menu-links a:nth-child(2) { animation-delay: 100ms; }
  .menu-links a:nth-child(3) { animation-delay: 160ms; }
  .menu-links a:nth-child(4) { animation-delay: 220ms; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .menu-links a > .mono { font-size: 0.625rem; color: var(--faint); letter-spacing: 0.12em; }
  .menu-links a sup { font-size: 0.65rem; color: var(--dim); letter-spacing: 0.08em; vertical-align: super; }
  .menu-arrow {
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hair);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
  }
  .menu-foot {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
    animation: menu-in 520ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
  }
  .menu-foot .cta { font-size: 0.9375rem; padding: 0.9rem 1.4rem; }
  .menu-lines { display: grid; gap: 0.3rem; }
  .menu-lines a { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
  .menu-socials { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--dim); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }

  /* ── Hero ──────────────────────────────────────────────────────────── */
  .hero {
    position: relative;
    /* SHORT OF A FULL SCREEN, on purpose. At exactly 100svh the client strip
       sat one pixel below the fold on every desktop, so the first thing a
       visitor saw ended at the hero and the brands they came to check for were
       invisible until they scrolled. Giving the viewport back ~14% puts the
       top of that strip on screen, which is the whole reason it exists. */
    height: min(86svh, 900px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(4.5rem, 9vh, 6.5rem) 0 clamp(1.25rem, 3vh, 2.25rem);
    overflow: hidden;
  }

  .plate { position: absolute; inset: 0; z-index: 0; }
  .plate img,
  .plate video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.55;
    transform: scale(1.04);
  }
  /* The still kept a slow push to stop it feeling dead. The film doesn't need
     one — it already moves, and two motions fighting reads as drift, not
     direction. The poster inherits the push only until the video takes over. */
  .plate img { animation: drift 26s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
  .plate::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom, rgba(6,6,7,0.72) 0%, rgba(6,6,7,0.15) 38%, rgba(6,6,7,0.85) 92%),
      radial-gradient(90% 60% at 50% 45%, transparent 30%, rgba(6,6,7,0.7) 100%);
  }
  /* Only the CONTENT lifts above the plate. Written as `.hero > *` this rule
     had the same specificity as `.plate` and came later, so it overrode the
     plate's own `position: absolute` — the backdrop became a flex item, took
     825px of flow, and pushed the title clean off the fold. */
  .hero > .shell { position: relative; z-index: 1; }

  /* Three offices, three live clocks. The reference runs these because a
     studio that works across time zones is a fact worth stating; they tick,
     so they cannot be mistaken for decoration. */
  .clocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 0;
  }
  /* Bigger than the other utility text on the page. These are a fact about
     the studio — three cities, live — not a caption, and at 10px they read as
     fine print nobody is meant to notice. */
  .clocks .mono {
    font-size: clamp(0.6875rem, 0.55vw + 0.55rem, 0.875rem);
    letter-spacing: 0.12em;
    color: var(--dim);
  }
  .clocks span:nth-child(2) { text-align: center; }
  .clocks span:nth-child(3) { text-align: right; }
  .clocks b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--white); }
  .clocks i { font-style: normal; color: var(--faint); }
  .clocks .city-s { display: none; }
  @media (max-width: 720px) {
    /* One row of three, city abbreviated and the offset dropped — three
       stacked lines of mono was the first thing a phone showed, before the
       name of the studio. */
    .clocks { display: flex; justify-content: space-between; gap: 0.5rem; }
    .clocks .city { display: none; }
    .clocks .city-s { display: inline; }
    .clocks i { display: none; }
    .clocks .mono { font-size: 0.6875rem; }
  }

  .hero-title {
    font-size: clamp(3.3rem, 11.2vw, 11rem);
    display: flex;
    align-items: flex-start;
  }
  .hero-title sup {
    font-size: 0.16em;
    font-weight: 700;
    letter-spacing: 0;
    top: 0.55em;
    margin-left: 0.12em;
  }
  .hero-title .mask { display: block; overflow: hidden; }
  .hero-title .mask > span {
    display: block;
    transform: translateY(102%);
    animation: rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
  }
  @keyframes rise { to { transform: translateY(0); } }

  .hero-bottom {
    display: grid;
    gap: 2rem;
    align-items: end;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    /* Wide enough for the two proof badges side by side, with the film strip
       taking the rest — and `align-items: end` puts the strip on the copy's
       baseline, so it finishes where the hero finishes, directly above the
       client logos instead of floating 150px clear of them. */
    .hero-bottom { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); align-items: end; }
  }
  .hero-copy { display: grid; justify-items: start; }

  .hero-bottom .lead {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--white);
  }
  /* The second half of the claim, held back — the pause is the point. */
  .hero-bottom .lead span { color: var(--dim); }
  .hero-bottom .sub {
    margin: 0.75rem 0 1.35rem;
    max-width: 34ch;
    font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--dim);
  }

  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 1.2rem;
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Two lines, deliberately: a quiet label saying WHERE the claim comes from,
     and the claim itself in white. As one long sentence it wrapped mid-phrase
     and read like a caption that had escaped its image. */
  .proof {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.8rem;
    margin: clamp(1rem, 2vh, 1.5rem) 0 0;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background:
      linear-gradient(120deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 42%);
    backdrop-filter: blur(16px);
    color: var(--dim);
    line-height: 1;
    transition: border-color 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .proof:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
  .proof:hover .arrow { transform: translateX(3px); }

  /* The mark sits on its own light chip — Google's colours need a ground of
     their own on black, or the blue disappears into the page. */
  .g-chip {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: #fff;
  }
  .proof .g { width: 16px; height: 16px; }

  .proof-text { display: grid; gap: 0.28rem; }
  .proof-text .mono { font-size: 0.5625rem; letter-spacing: 0.16em; }
  .proof-text b {
    color: var(--white);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }
  /* Their own row under the hero, not stacked inside a 30ch column — two
     badges in a narrow column can only ever sit one above the other. */
  .proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding-top: clamp(0.75rem, 2vh, 1.25rem);
  }
  .proofs .proof { margin-top: 0; }
  .record { padding-left: 0.75rem; cursor: default; }
  .record:hover { transform: none; border-color: var(--hair); }
  .laurel-wrap { display: grid; place-items: center; width: 30px; height: 30px; }
  .laurel { width: 26px; height: 26px; color: rgba(255, 255, 255, 0.9); }

  .proof .arrow {
    color: var(--faint);
    font-size: 0.9rem;
    padding-left: 0.15rem;
    border-left: 1px solid var(--hair);
    padding-left: 0.8rem;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (max-width: 560px) {
    .proof-text b { white-space: normal; }
  }

  .cta i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--black);
    display: block;
  }
  .cta:hover { transform: translateY(-2px); }

  /* Two stills tucked into the corner, the way the reference previews the
     reel without leaving the hero. */
  /* Six films, drifting in from the right. The hero used to hold two static
     cards; a studio reel that does not move in the one place a visitor looks
     first is a contradiction. Masked at both edges so cards arrive and leave
     rather than appearing at a hard border. */
  .peek {
    display: none;
    overflow: hidden;
    max-width: min(46vw, 620px);
    margin-left: auto;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    opacity: 0;
    animation: peek-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
    --from: 80px;
  }
  .peek-track {
    display: flex;
    gap: 0.7rem;
    width: max-content;
    animation: peek-drift 34s linear infinite;
  }
  @keyframes peek-drift { to { transform: translateX(-50%); } }
  .peek a {
    position: relative;
    flex: none;
    width: clamp(130px, 13vw, 190px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--hair);
  }
  .peek img,
  .peek video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .peek a:hover img, .peek a:hover video { transform: scale(1.06); }

  /* The two cards come in from the OUTSIDE edges — left card from the left,
     right card from the right — a beat after the title has landed, so the
     hero reads as one sequence rather than three things arriving at once. */
  @keyframes peek-in {
    from { opacity: 0; transform: translateX(var(--from, 0)); }
    to   { opacity: 1; transform: none; }
  }
  .peek a::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to top, rgba(6,6,7,0.8), transparent);
    pointer-events: none;
  }
  .peek figcaption {
    position: absolute;
    z-index: 1;
    left: 0.6rem; bottom: 0.5rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  }
  @media (min-width: 1024px) { .peek { display: block; } }

  .scroll-hint {
    position: absolute;
    right: max(1.5rem, calc((100vw - var(--shell)) / 2));
    bottom: clamp(6rem, 22vh, 12rem);
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  .scroll-hint span {
    writing-mode: vertical-rl;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .scroll-hint .line {
    width: 1px; height: 84px;
    background: linear-gradient(to bottom, var(--hair), transparent);
    position: relative;
    overflow: hidden;
  }
  .scroll-hint .line::after {
    content: "";
    position: absolute; inset: 0 auto auto 0;
    width: 1px; height: 30%;
    background: var(--white);
    animation: run 2.6s ease-in-out infinite;
  }
  @keyframes run { 0% { transform: translateY(-100%); } 100% { transform: translateY(300%); } }
  @media (min-width: 1180px) { .scroll-hint { display: flex; } }

  /* ── Logo strip ────────────────────────────────────────────────────── */
  /* A dark strip, not a white slab. The white band was borrowed from sites
     that show real client LOGOS, where a light ground is what makes a wall of
     black wordmarks legible. These are set names on our own ground, so the
     band was doing nothing but interrupting the page with a bright horizon. */
  .logos {
    border-top: 1px solid var(--hair-2);
    border-bottom: 1px solid var(--hair-2);
    color: var(--dim);
    padding: clamp(1.1rem, 2.2vw, 1.75rem) 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .logo-track {
    --logo-h: clamp(26px, 2.6vw, 40px);
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    /* PAUSED UNTIL THE MARKS HAVE LAID OUT. The jitter was not the animation:
       each logo's width is resolved from its own artwork, so every image that
       decoded mid-run changed the track's width and the -50% loop point
       jumped. Nothing moves until all of them have decoded. */
    animation: slide 46s linear infinite paused;
    /* Its own compositor layer, and whole-pixel transforms — a percentage
       translate on a subpixel-wide track shimmers on every frame. */
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }
  .logos.ready .logo-track { animation-play-state: running; }
  @keyframes slide { to { transform: translateX(-50%); } }
  /* The clients' own marks, knocked back to white. They arrive as black
     artwork on transparent — `brightness(0) invert(1)` flattens whatever
     colour each one carries and makes the row read as one set rather than
     thirteen brand palettes competing on a dark ground. */
  .logo-track img {
    margin-right: clamp(3rem, 5.5vw, 6rem);
    height: var(--logo-h);
    width: auto;
    /* A ceiling as well as a height: without it a wordmark that is ten times
       as wide as it is tall owns the row on its own. */
    max-width: clamp(110px, 12vw, 190px);
    object-fit: contain;
    flex: none;
    /* `brightness(0) invert(1)` forced EVERY pixel to white, which is right for
       a plain silhouette and destroys a knockout mark: Levi's is white
       letterforms cut out of a black batwing, and flattening both to white left
       a solid grey slab. Greyscale-then-invert keeps the relationship — the
       shape goes white, the letters cut back to black, and the mark stays
       itself. */
    filter: grayscale(1) invert(1);
    opacity: 0.62;
    transition: opacity 220ms ease;
  }
  .logo-track img:hover { opacity: 1; }

  /* ── Work ──────────────────────────────────────────────────────────── */
  section { padding: clamp(4.5rem, 11vh, 9rem) 0; }
  /* An anchored jump lands on the section TITLE, sitting just under the fixed
     bar — not on the section's top padding with the eyebrow and a third of a
     screen of black above the words. The negative margin skips the padding and
     the eyebrow row; 140px is where the title's top ends up. */
  section[id] { scroll-margin-top: calc(140px - clamp(4.5rem, 11vh, 9rem) - 3.2rem); }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Eyebrow left, title centred, supporting line and stamp on the row under
     it. The old head was a title and a label on one baseline, which gave every
     section the same flat opening; this gives the reader a label, a statement
     and a caption in that order. */
  .head {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }
  .head h2 {
    font-size: clamp(2rem, 6vw, 5rem);
    text-align: center;
    grid-row: 2;
  }
  .head h2 .count {
    font-size: 0.26em;
    font-weight: 700;
    letter-spacing: -0.01em;
    vertical-align: super;
    color: var(--faint);
    margin-left: 0.15em;
  }
  .eyebrow {
    grid-row: 1;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .eyebrow i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--white);
    display: block;
  }
  .head-foot {
    grid-row: 3;
    display: grid;
    gap: 0.75rem 2rem;
    grid-template-columns: 1fr;
    align-items: end;
  }
  .head-foot p {
    margin: 0;
    max-width: 42ch;
    color: var(--dim);
    font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.1rem);
    justify-self: center;
  }
  .head-foot .stamp { justify-self: end; }
  @media (min-width: 860px) {
    .head-foot { grid-template-columns: 1fr auto 1fr; }
    .head-foot p { grid-column: 2; }
    .head-foot .stamp { grid-column: 3; }
  }

  /* The reveal the reference is built on: a heading arrives word by word
     rather than as one block. Each word is its own overflow window, so the
     letters rise out of nothing instead of fading through the background —
     a fade would put grey type on a black ground for a moment, and grey type
     is what a heading looks like when it is disabled. */
  /* Padding below, pulled back with a negative margin, so the window has
     room for descenders — at line-height 0.92 the g in "something" was being
     cut off once the word had risen into place. */
  .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .word > span {
    display: inline-block;
    transform: translateY(125%);
    transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in .word > span { transform: none; }

  /* THE SHEET IS BUILT ON A ROW HEIGHT, not on each tile's own ratio.
     Sizing every tile by aspect meant a 9:16 film in a four-column grid came
     out 470px wide and 830px tall on a desktop — one run of six filled two and
     a half screens, and the section read as a slideshow you had to scroll
     through rather than a selection you could take in. A fixed row lets the
     composition stay put while the crop absorbs the difference. */
  .sheet {
    display: grid;
    gap: clamp(0.6rem, 1vw, 1rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 15vh, 190px);
  }
  /* Two row-bands, and every tile is two rows deep so the sheet ALIGNS. The
     three-row "tall" spans left Gardinex and Hyundai hanging below the rest,
     which is the ragged bottom edge that made the grid read as unfinished. */
  .frame.wide { grid-column: span 2; grid-row: span 2; }
  .frame.half { grid-column: span 2; grid-row: span 2; }
  .frame:not(.wide):not(.half) { grid-row: span 2; }
  @media (min-width: 900px) {
    .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .frame { height: 100%; }

  .frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: var(--raised);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .frame.in { opacity: 1; transform: none; }
  .frame img,
  .frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .frame:hover img, .frame:hover video { transform: scale(1.05); }

  .frame-meta {
    position: absolute;
    z-index: 2;
    inset: auto 0 0 0;
    padding: 1.1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(to top, rgba(6,6,7,0.9) 4%, transparent 100%);
  }
  .frame-meta h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: clamp(0.95rem, 1.15vw, 1.35rem);
    line-height: 1.05;
  }
  .tag {
    position: absolute;
    /* Above the film: the hover scale gives the video its own layer, and
       without this the chip vanished under it the moment the cursor arrived. */
    z-index: 2;
    top: 0.7rem; left: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border: 1px solid var(--hair);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* ── Capabilities ──────────────────────────────────────────────────── */
  /* Services as a numbered stack. An open row shows what the discipline
     actually covers; a closed one is still a full-width target with its number
     and name, so the list reads even when nothing is expanded. <details> does
     the work — no JS, and it keeps keyboard and screen-reader behaviour that a
     div-and-click version has to reinvent badly. */
  .svc {
    border-radius: 12px;
    background: var(--raised);
    border: 1px solid transparent;
    margin-bottom: 0.4rem;
    transition: background 260ms ease, border-color 260ms ease;
  }
  .svc[open] { background: var(--lift); border-color: var(--hair); }
  .svc summary {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0.85rem;
    /* Tighter than it was. Five rows at ~107px each pushed the list to the
       height of a screen on its own, which made a compact index read like a
       stack of banners. */
    padding: clamp(0.85rem, 1.5vw, 1.15rem) clamp(1rem, 1.8vw, 1.4rem);
    cursor: pointer;
    list-style: none;
  }
  .svc summary::-webkit-details-marker { display: none; }
  .svc h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
  }
  .svc-n { color: var(--faint); }

  /* One element, two states: the vertical stroke of the plus rotates away and
     leaves the minus behind. */
  .svc-mark {
    position: relative;
    width: 15px; height: 15px;
    justify-self: end;
  }
  .svc-mark::before, .svc-mark::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--white);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .svc-mark::after { transform: rotate(90deg); }
  .svc[open] .svc-mark::after { transform: rotate(0deg); }

  .svc-body {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0 clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.3rem, 2.4vw, 1.9rem);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 860px) {
    /* Media left, words right — an open row should SHOW the discipline, not
       just describe it. A FIXED column for the film rather than a fraction:
       at 0.85fr it grew with the viewport until a 540px-tall clip sat beside
       three lines of text and half a panel of empty ground. */
    .svc-body { grid-template-columns: clamp(180px, 22vw, 260px) minmax(0, 1fr); }
  }
  .svc-media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--black);
    /* 4:3 suits both shapes in the library — the vertical films crop to it
       without losing their subject, and the one landscape film fills it. */
    aspect-ratio: 4 / 3;
  }
  .svc-media video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .svc-words { display: grid; gap: 1rem; align-content: start; }
  .svc-words p {
    /* The copy carries the row now that the film is not shouting. */
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.2rem);
    line-height: 1.5;
    color: var(--fg-soft, #C8C6D0);
    max-width: 62ch;
  }
  /* Every discipline points at the work that proves it. */
  .svc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
    border-bottom: 1px solid var(--hair);
    padding-bottom: 0.2rem;
    justify-self: start;
    transition: border-color 200ms ease, gap 200ms ease;
  }
  .svc-link:hover { border-bottom-color: var(--white); gap: 0.7rem; }

  /* THE OPEN/CLOSE ACTUALLY ANIMATES. `<details>` snaps by default: the
     content is display:none until it isn't. `::details-content` plus
     `interpolate-size` lets the panel grow to its own height, and
     `allow-discrete` carries visibility across the transition instead of
     cutting it. Browsers without it still open and close — just instantly. */
  .svc::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 460ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms ease,
      content-visibility 460ms allow-discrete;
  }
  .svc[open]::details-content { block-size: auto; opacity: 1; }
  .svc-body p { margin: 0; color: var(--dim); max-width: 58ch; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dim);
  }

  /* The process is a STEPPER, not four static cards. One stage is active at a
     time — inverted, with its deliverables shown — and the rail above tracks
     where you are. A process is a sequence; letting the reader move through it
     is the one interaction this section can honestly offer. */
  .rail {
    display: grid;
    grid-auto-flow: column;
    gap: 0.4rem;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  .rail span {
    height: 2px;
    border-radius: 2px;
    background: var(--hair);
    overflow: hidden;
    position: relative;
  }
  .rail span::after {
    content: "";
    position: absolute; inset: 0 100% 0 0;
    background: var(--white);
    transition: inset 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rail span.on::after { inset: 0; }

  .steps {
    display: grid;
    gap: clamp(0.6rem, 1vw, 1rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1180px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .step {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--raised);
    border: 1px solid var(--hair-2);
    padding: clamp(1.25rem, 2.4vw, 1.9rem);
    min-height: clamp(240px, 30vh, 340px);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition:
      background 420ms cubic-bezier(0.16, 1, 0.3, 1),
      color 420ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 420ms ease;
  }
  .step:hover { transform: translateY(-4px); border-color: var(--hair); }
  .step[aria-current="true"] {
    background: var(--white);
    color: var(--black);
    border-color: transparent;
    transform: none;
  }
  .step[aria-current="true"] .mono,
  .step[aria-current="true"] .step-body { color: rgba(6, 6, 7, 0.62); }

  /* The deliverables only belong to the stage you are looking at. */
  .step-out {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 380ms ease 80ms, transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
  }
  .step[aria-current="true"] .step-out { opacity: 1; transform: none; }
  .step-out span {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(6, 6, 7, 0.16);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .step h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    max-width: 14ch;
  }
  .step-body { margin: 0; color: var(--dim); font-size: 0.9375rem; }
  .ghost {
    position: absolute;
    right: -0.35rem; bottom: -1.2rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    font-size: clamp(4rem, 7vw, 6.5rem);
    color: var(--white);
    opacity: 0.06;
    pointer-events: none;
  }
  .step[aria-current="true"] .ghost { color: var(--black); opacity: 0.1; }

  /* Recognition, in the hero rather than as its own band further down. Three
     names at the top of the page carry more than a strip nobody scrolls to —
     and saying it once is the difference between a credential and a boast. */
  .hero-press {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: clamp(0.9rem, 2.2vw, 2rem);
    padding-top: clamp(0.9rem, 2.2vh, 1.5rem);
  }
  .press-item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
  }
  .press-item + .press-item { padding-left: clamp(0.9rem, 2.2vw, 2rem); border-left: 1px solid var(--hair-2); }
  /* Real marks, set to one optical height and pushed to white on the dark plate. */
  .press-item img { height: 20px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.92; }
  .press-item img[src*="shark"] { height: 16px; }
  .press-name {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 0.875rem;
    color: var(--white);
  }
  .press-item .mono { font-size: 0.5rem; letter-spacing: 0.14em; }
  @media (max-width: 720px) {
    .hero-press { justify-content: flex-start; }
    .press-item + .press-item { padding-left: 0; border-left: 0; }
  }

  /* ── Projects page ─────────────────────────────────────────────────────
     Its own hero: no film, no clocks — a name set as large as the page allows
     and a rule under it, so arriving here feels like opening a catalogue
     rather than landing on the homepage again. */
  .p-hero { padding: clamp(5.5rem, 11vh, 7.5rem) 0 clamp(0.75rem, 2vh, 1.5rem); }
  .p-title {
    font-size: clamp(3.2rem, 15vw, 15rem);
    line-height: 0.82;
  }
  .p-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: clamp(0.5rem, 1vw, 0.9rem) 0 0;
    font-size: 0.6875rem;
    color: var(--dim);
  }
  .p-sub .dash { width: 34px; height: 1px; background: var(--dim); display: block; }

  .p-grid-wrap { padding-top: clamp(1.5rem, 4vh, 3rem); }
  /* The catalogue's own head is smaller than a homepage section's: the page
     title has already said what this is. */
  .p-grid-wrap .head { gap: clamp(0.75rem, 1.6vw, 1.25rem); margin-bottom: clamp(1rem, 2.2vw, 1.6rem); }
  .p-grid-wrap .head h2 { font-size: clamp(1.6rem, 4vw, 3.2rem); }

  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  }
  .filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background: transparent;
    color: var(--dim);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .filter .mono { font-size: 0.625rem; color: inherit; opacity: 0.6; }
  .filter:hover { color: var(--white); border-color: var(--white); }
  .filter.on { background: var(--white); color: var(--black); border-color: var(--white); }

  /* MASONRY, not a grid of equal cells. Every film keeps its own shape — 9:16
     next to 16:9 — and in a row-based grid the tallest card in each row set
     the row height, so a landscape card sat in a cell twice as tall as itself
     with its caption stranded at the bottom. CSS columns pack each card
     directly under the one above it, which is the whole point of a wall of
     mixed formats. Reading order goes down a column rather than across, and
     for an unranked catalogue that is the correct trade. */
  .empty-note {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--hair);
    border-radius: 14px;
    color: var(--dim);
    font-size: 0.9375rem;
  }
  .p-grid {
    column-count: 2;
    column-gap: clamp(0.6rem, 1.1vw, 1.1rem);
  }
  @media (min-width: 640px)  { .p-grid { column-count: 3; } }
  @media (min-width: 1024px) { .p-grid { column-count: 4; } }
  @media (min-width: 1440px) { .p-grid { column-count: 5; } }

  .p-card {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: clamp(0.6rem, 1.1vw, 1.1rem);
  }
  .p-card[hidden] { display: none; }
  .p-thumb {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--raised);
    /* A rim and a shadow so a card reads as an object on the page rather than
       a picture bleeding into the ground — most of these stills are dark, and
       without an edge they merged into the background. */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 10px 30px rgba(0, 0, 0, 0.45);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 500ms ease;
    /* The card takes the film's shape rather than a shape the layout imposed. */
    aspect-ratio: 9 / 16;
  }
  .p-card[data-shape="landscape"] .p-thumb { aspect-ratio: 16 / 9; }
  .p-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
  }
  .p-card:hover .p-thumb {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                0 18px 44px rgba(0, 0, 0, 0.6);
  }
  .p-card:hover .p-thumb img { transform: scale(1.05); opacity: 1; }
  /* The hover preview sits OVER the still rather than replacing it, so the
     card never flashes empty while Vimeo warms up. */
  .p-thumb iframe {
    position: absolute;
    inset: 0;
    /* UNDER the chips. The player is appended last, so without a stacking
       order it painted over the client mark, the discipline and the stamp —
       every card lost its labels the moment it started playing. */
    z-index: 0;
    width: 100%; height: 100%;
    border: 0;
    /* A background embed is letterboxed to the card unless it overfills; 
       scaling past the edges is what makes it read as the card playing. */
    transform: scale(1.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .p-thumb iframe.on { opacity: 1; }
  .p-thumb video.p-film {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .p-thumb video.p-film.on { opacity: 1; }
  .p-thumb:has(video.p-film.on:only-child) { background: var(--black); }
  .p-thumb { position: relative; }
  /* Off-screen cards are not laid out or painted until they approach the
     viewport — fifty-two cards with players is the kind of page this is for. */
  .p-card { content-visibility: auto; contain-intrinsic-size: auto 300px auto 540px; }
  /* Client mark and discipline, paired in one row — the way the studio's own
     cards read: whose work it is, then what kind of work it was. */
  .p-chips {
    position: absolute;
    z-index: 2;
    top: 0.6rem; left: 0.6rem; right: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }
  .p-logo {
    display: grid;
    place-items: center;
    height: 34px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* Three sizes, chosen by the mark's own proportions. A crest and a wordmark
     set to one height are never optically equal: the crest reads tiny and the
     wordmark hits the width cap and shrinks. */
  .p-logo.tall img { height: 24px; max-width: 62px; }   /* crests, monograms */
  .p-logo.mid  img { height: 21px; max-width: 92px; }
  .p-logo.wide img { height: 15px; max-width: 118px; }  /* long wordmarks */
  .p-logo img {
    height: 21px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    /* ALL WHITE. These are the real marks now (the earlier smear was the scrape
       grabbing cover images instead of logos), and they arrive in every colour
       and polarity — black wordmarks, coloured crests, greyscale lockups. Flat
       white makes the row read as one set on the footage behind it, which is
       what every studio's client strip does. */
    filter: brightness(0) invert(1);
  }
  .p-tag {
    position: static;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
  }
  /* A stamp, not a badge: rotated, outlined, sitting on the frame the way a
     mark gets pressed onto a print. It says what the studio wants understood
     about this work — that a human built every frame of it. Driven by a flag
     per project, so the day a film IS AI-assisted its stamp simply stops
     rendering rather than becoming a lie. */
  .stamp-noai {
    position: absolute;
    z-index: 2;
    right: 0.55rem;
    bottom: 0.55rem;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    outline: 3px solid rgba(255, 255, 255, 0.12);
    outline-offset: -6px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.5rem;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(6, 6, 7, 0.28);
    backdrop-filter: blur(6px);
    transform: rotate(-9deg);
    transition: color 240ms ease, border-color 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .p-card:hover .stamp-noai,
  .frame:hover .stamp-noai {
    color: #fff;
    border-color: #fff;
    transform: rotate(-3deg) scale(1.04);
  }
  @media (max-width: 640px) { .stamp-noai { width: 46px; height: 46px; font-size: 0.4375rem; } }

  /* Brand only. The format and runtime were true but not interesting — a wall
     of "9:16 · 0:17" reads as file metadata, and the shape of the card already
     says which format it is. */
  /* The brand name under a card is off: the mark on the card says it. */
  .p-meta { display: none; }
  .p-meta b { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em; }

  /* ── Project detail ────────────────────────────────────────────────────
     The film first, the facts beside it, and three neighbours underneath so a
     page is never a dead end. Only the fields the studio's own site actually
     carries — no invented industry or timeline rows. */
  .pd-hero { padding: clamp(5.5rem, 11vh, 7.5rem) 0 clamp(1rem, 3vh, 2rem); }
  /* A button, not a caption: the way back is the most used control on a
     project page, so it gets the same pill as every other action. */
  .pd-back {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 1.1rem 0.62rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
    transition: background 180ms ease, color 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pd-back span { display: inline-block; transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
  .pd-back:hover { background: var(--white); color: var(--black); }
  .pd-back:hover span { transform: translateX(-3px); }
  .pd-back:active { transform: scale(0.97); }

  .pd-head {
    display: grid;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    justify-items: start;
    padding-top: clamp(1.25rem, 3vh, 2.25rem);
  }
  /* No logo chip here. The brand name is already set at 6rem two lines below
     it — a mark and a wordmark saying the same thing is the page introducing
     itself twice. The chip stays where it earns its place: on the cards, where
     the name is small. */
  .pd-title { font-size: clamp(2.4rem, 7vw, 6rem); }

  .pd-body { padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(3rem, 8vh, 5rem); }
  .pd-grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
  }
  .pd-facts { justify-self: stretch; }
  @media (min-width: 1024px) {
    .pd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  }
  .pd-film {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--hair-2);
  }
  /* SIZED FROM THE WIDTH, always. Constraining a 9:16 box with `max-height`
     instead let the browser derive the width back from the height, and the
     film collapsed to a 2px sliver with the player inside it — the video was
     "missing" because its container had no size. A definite width and an
     aspect ratio cannot do that. */
  .pd-film { width: 100%; }
  .pd-film.wide { aspect-ratio: 16 / 9; }
  /* A VERTICAL FILM IS SIZED FROM THE VIEWPORT, not the column. At a fixed
     width a 9:16 player is 740px tall and runs off the bottom of the screen —
     you could never see the whole frame at once, which is the one thing a
     project page owes the work. Height first, width derived; `max-height`
     would hand the sizing back to the width and collapse the box. */
  .pd-film.tall {
    height: min(66vh, 680px);
    width: auto;
    aspect-ratio: 9 / 16;
    margin-inline: auto;
  }
  .pd-film iframe, .pd-film video, .pd-film img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .pd-film img { object-fit: cover; }
  .pd-film video { object-fit: cover; background: var(--black); }

  .pd-facts { display: grid; gap: 1.5rem; align-content: start; }
  .pd-facts dl { display: grid; gap: 0; margin: 0; }
  .pd-facts dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hair-2);
  }
  .pd-facts dt { margin: 0; }
  .pd-facts dd { margin: 0; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
  .pd-desc { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.55; }
  .pd-facts .cta { justify-self: start; }

  .pd-more { padding: 0 0 clamp(3.5rem, 9vh, 6rem); }
  .pd-next { column-count: 1; }
  @media (min-width: 700px)  { .pd-next { column-count: 3; } }

  /* ── The player, shared by any page that lists films ──────────────────── */
  .player {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(3, 3, 4, 0.94);
    backdrop-filter: blur(10px);
  }
  .player[open] { display: grid; }
  .player .stage {
    position: relative;
    width: min(430px, 92vw);
    aspect-ratio: 9 / 16;
    max-height: 78vh;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
  }
  .player.wide .stage { width: min(1180px, 94vw); aspect-ratio: 16 / 9; }
  .player iframe { width: 100%; height: 100%; border: 0; display: block; }
  .player .close {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background: rgba(255,255,255,0.08);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
  }
  .player-meta {
    position: absolute;
    left: 0; right: 0; bottom: clamp(0.9rem, 2.5vw, 1.75rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
  }
  .player-link { color: var(--white); border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
  .player-link:hover { border-bottom-color: var(--white); }

  /* ── Contact ───────────────────────────────────────────────────────── */
  /* ── The studio: numbers, then the goal ─────────────────────────────── */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--hair-2);
    border-bottom: 1px solid var(--hair-2);
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  }
  .stat {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: clamp(1.2rem, 2.4vw, 2rem) clamp(0.9rem, 2vw, 1.6rem);
    border-left: 1px solid var(--hair-2);
  }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--hair-2); }
  @media (min-width: 860px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat:nth-child(odd) { border-left: 1px solid var(--hair-2); }
    .stat:first-child { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 0; }
  }
  .stat b {
    font-size: clamp(2.6rem, 4.8vw, 4.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    color: var(--white);
  }
  .stat b small { font-size: 0.45em; font-weight: 800; letter-spacing: -0.02em; color: var(--dim); margin-left: 0.06em; }
  .stat .mono { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
  .studio-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) { .studio-grid { grid-template-columns: minmax(0, 60ch) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); } }
  .studio-copy {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.65rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }
  .goal {
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid var(--hair);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  }
  .goal .mono { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
  .goal p {
    margin: 0;
    font-size: clamp(1.25rem, 1.9vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-wrap: balance;
  }

  /* ── Under the film: the write-up and the facts ─────────────────────── */
  .pd-info { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 900px) {
    .pd-info { grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
  }
  .pd-copy .pd-desc {
    color: var(--white);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
  }
  .pd-copy .pd-desc + .pd-desc { margin-top: 1rem; }
  .pd-meta { display: grid; gap: 1.6rem; align-content: start; }
  .pd-label { display: block; margin-bottom: 0.55rem; color: var(--dim); font-size: 0.95rem; font-weight: 500; }
  .pd-meta b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
  .pd-meta .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* ── Sketches & process on a project page ───────────────────────────
     Storyboards, wireframes, BTS — shown whole, never cropped: a sketch loses
     its point the moment its edges go. Columns keep each image's own shape. */
  .pd-process { padding-top: 0; }
  .pr-grid { column-count: 2; column-gap: 12px; }
  @media (min-width: 760px)  { .pr-grid { column-count: 3; } }
  @media (min-width: 1180px) { .pr-grid { column-count: 4; } }
  .pr-item {
    break-inside: avoid;
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--raised);
    border: 1px solid var(--hair-2);
  }
  .pr-item img { display: block; width: 100%; height: auto; }
  .pr-item figcaption {
    padding: 0.6rem 0.8rem 0.7rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--dim);
  }

  /* ── Storyboard strip on a project page ────────────────────────────── */
  .pd-board { padding-top: 0; }
  .sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 760px) { .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .sb-frame { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--raised); border: 1px solid var(--hair-2); }
  .sb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; }
  .sb-frame figcaption {
    position: absolute; top: 0.6rem; left: 0.6rem;
    padding: 0.25rem 0.5rem; border-radius: 999px;
    background: rgba(6, 6, 7, 0.6); backdrop-filter: blur(8px);
    font-size: 0.5625rem; letter-spacing: 0.14em; color: var(--white);
  }

  /* ── Page-to-page: a short crossfade instead of a hard cut ──────────── */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }

  /* ── Journal ────────────────────────────────────────────────────────── */
  .blog-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
  @media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .blog-card { display: grid; gap: 0.7rem; align-content: start; }
  .blog-cover {
    display: block; overflow: hidden; border-radius: 12px;
    background: var(--raised); border: 1px solid var(--hair-2); aspect-ratio: 16 / 9;
  }
  .blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
  .blog-card:hover .blog-cover img { transform: scale(1.04); }
  .blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.2rem; }
  .blog-meta .chip { padding: 0.3rem 0.65rem; font-size: 0.6875rem; }
  .blog-meta .mono { font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
  .blog-card b { font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
  .blog-card p { margin: 0; color: var(--dim); font-size: 0.9375rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-intro { max-width: 48ch; margin-top: 1.5rem; }
  .post-head { display: grid; gap: 1rem; max-width: 60rem; }
  .post-meta { color: var(--dim); font-weight: 500; }
  .post-title { font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -0.045em; line-height: 0.95; }
  .post-lead { margin: 0; max-width: 60ch; color: var(--dim); font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
  .post-cover { margin: clamp(1.5rem, 4vw, 3rem) 0 0; }
  .post-cover .cover-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; border: 1px solid var(--hair-2); background: var(--raised); }
  .post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* The film over the still: landscape films fill the frame, portrait films
     sit centred on the blurred still the cover was cut from. */
  .blog-cover { position: relative; }
  .blog-cover video, .post-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
  .post-video video { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--raised); }
  .post-gallery .post-video video { aspect-ratio: 9 / 16; object-fit: cover; }
  .post-fig figcaption { margin-top: 0.55rem; font-size: 0.5625rem; letter-spacing: 0.14em; color: var(--faint); }
  .post-body { max-width: 46rem; padding: clamp(2.5rem, 6vw, 5rem) 0 0; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6; }
  .post-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 2.4rem 0 0.9rem; }
  .post-body h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 1.8rem 0 0.6rem; }
  .post-body p { margin: 0 0 1.1rem; color: rgba(255, 255, 255, 0.86); }
  .post-fig { margin: 1.8rem 0; }
  .post-fig img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--hair-2); }
  .post-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.8rem 0; }
  .post-gallery .post-fig { margin: 0; }
  .post-gallery .post-fig img { height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
  .post .pd-more { padding-top: clamp(3rem, 7vw, 6rem); }

  .contact { border-top: 1px solid var(--hair-2); }
  .contact h2 { font-size: clamp(2.2rem, 8vw, 8rem); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
  .contact-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
  .follow { display: grid; gap: 0.55rem; align-content: start; justify-items: start; }
  .follow .big { display: inline-flex; align-items: baseline; gap: 0.85rem; }
  .follow .big small { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--dim); margin-left: 0.75rem; }
  @media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .contact-grid a.big {
    display: inline-block;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--hair);
    transition: border-color 200ms ease, opacity 200ms ease;
  }
  .contact-grid a.big:hover { border-bottom-color: var(--white); }

  .dock {
    position: fixed;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vh, 2.5rem);
    z-index: 60;
    display: grid;
    justify-items: end;
    gap: 0.6rem;
  }
  .dock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dock-btn:hover { transform: translateY(-2px); }
  .dock-btn i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--black);
    display: block;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dock[data-open="true"] .dock-btn i { transform: scale(1.9); }

  .dock-panel {
    width: min(23.5rem, calc(100vw - 2rem));
    max-height: calc(100vh - 8rem);
    padding: 1.15rem;
    overflow: auto;
    border: 1px solid var(--hair);
    border-radius: 26px;
    background: rgba(12, 12, 14, 0.96);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform-origin: bottom right;
    animation: dock-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes dock-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
  .dock-panel[hidden], .dock-view[hidden] { display: none; }
  .dock-intro { margin: 0.1rem 0.35rem 1rem; }
  .dock-intro .mono {
    display: block; margin-bottom: 0.45rem;
    color: var(--faint); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .dock-intro strong {
    display: block; max-width: 15rem;
    font-size: 1.45rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.045em;
  }
  .dock-choices { display: grid; gap: 0.6rem; }
  .dock-choice {
    width: 100%; min-height: 5.1rem; padding: 1rem 1.15rem;
    display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) 2.1rem; align-items: center; gap: 0.75rem;
    border: 1px solid var(--hair); border-radius: 20px;
    background: rgba(255, 255, 255, 0.035); color: var(--white);
    font: inherit; text-align: left; cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  }
  .dock-choice:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }
  .dock-choice b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
  .dock-choice small { display: block; margin-top: 0.18rem; color: var(--dim); font-size: 0.85rem; }
  .dock-i { align-self: start; padding-top: 0.14rem; color: var(--faint); font-size: 9px; letter-spacing: 0.12em; }
  .dock-arrow {
    width: 2.05rem; height: 2.05rem; display: grid; place-items: center;
    border-radius: 50%; background: rgba(255, 255, 255, 0.07); font-size: 1rem;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  }
  .dock-choice:hover .dock-arrow { background: var(--white); color: var(--black); transform: rotate(-8deg); }
  .dock-back {
    border: 0; background: none; color: var(--dim); cursor: pointer;
    padding: 0.15rem 0 0.65rem; font: inherit; font-size: 0.9rem; font-weight: 500;
  }
  .dock-title { margin: 0; font-size: 1.65rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
  .dock-sub { margin: 0.45rem 0 1rem; color: var(--dim); }
  .brief { display: grid; gap: 0.65rem; }
  .brief input, .brief select, .brief textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 15px;
    background: rgba(255, 255, 255, 0.045); color: var(--white);
    padding: 0.9rem 1rem; font: inherit; font-size: 0.9rem; font-weight: 500; outline: none;
  }
  .brief input:-webkit-autofill, .brief input:-webkit-autofill:hover, .brief input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    box-shadow: 0 0 0 1000px #171719 inset;
    transition: background-color 9999s ease-out;
  }
  .brief textarea { min-height: 6rem; resize: vertical; }
  .brief input:focus, .brief select:focus, .brief textarea:focus { border-color: rgba(255, 255, 255, 0.55); }
  .brief option { color: #111; }
  .brief-submit {
    min-height: 3.35rem; border: 0; border-radius: 999px;
    background: var(--white); color: var(--black); cursor: pointer;
    font: inherit; font-size: 1rem; font-weight: 700;
  }
  .brief-submit:disabled { cursor: wait; opacity: 0.7; }
  .brief-status {
    min-height: 1.2rem; margin: 0 0.25rem; color: var(--dim);
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-align: center;
  }
  .brief-status[data-state="success"] { color: #93dda9; }
  .brief-status[data-state="error"] { color: #ff9e8e; }
  /* ── Booking: host · calendar · times ──────────────────────────────── */
  .book-layout { display: grid; gap: 1.5rem; }
  .book-main { min-width: 0; }
  .book-pick { display: grid; gap: 1.5rem; }
  .book-side-when span { color: var(--white); font-weight: 600; }
  .book-host { display: grid; gap: 0.55rem; align-content: start; justify-items: start; }
  .book-avatar { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; }
  .book-name { color: var(--dim); font-size: 0.9375rem; font-weight: 600; margin-top: 0.4rem; }
  .book-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
  .book-facts { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.55rem; color: var(--dim); font-size: 0.9375rem; font-weight: 500; }
  .book-facts li { display: flex; align-items: center; gap: 0.6rem; }
  .book-facts li[hidden] { display: none; }
  .book-facts svg { width: 16px; height: 16px; flex: none; }
  .book-facts .meet-logo { width: 18px; height: 18px; }
  /* The time-zone picker: reads as a fact, opens as a native select. */
  .book-tzsel { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--white); cursor: pointer; }
  .book-tzsel select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
  .book-tzsel > svg { width: 12px; height: 12px; color: var(--dim); }
  .book-host .dock-back { margin-top: 1rem; padding: 0; }
  .book-month { display: flex; align-items: center; justify-content: space-between; margin: 0 0.1rem 0.9rem; }
  .book-month b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
  .book-month b span { color: var(--dim); font-weight: 500; }
  .book-navs { display: flex; gap: 0.25rem; }
  .book-nav {
    width: 32px; height: 32px; border-radius: 8px;
    border: 0; background: none; color: var(--dim);
    font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
  }
  .book-nav:hover { color: var(--white); background: rgba(255,255,255,0.07); }
  .book-nav:disabled { opacity: 0.3; cursor: default; background: none; }
  .book-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .book-days .dow { text-align: center; font-size: 0.625rem; letter-spacing: 0.12em; color: var(--dim); padding-bottom: 6px; }
  .book-day {
    aspect-ratio: 1; border-radius: 10px; border: 0;
    background: none; color: var(--faint); font: inherit; font-size: 0.9375rem; font-weight: 600;
    cursor: default; position: relative;
    transition: background 140ms ease, transform 140ms ease;
  }
  .book-day.open { color: var(--white); background: rgba(255,255,255,0.12); cursor: pointer; }
  .book-day.open:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
  .book-day.on { background: var(--white); color: var(--black); }
  .book-day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
  .book-times { display: grid; gap: 0.7rem; align-content: start; }
  .book-daylabel { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
  .book-daylabel span { color: var(--dim); font-weight: 500; }
  .book-slots { display: grid; gap: 8px; max-height: 24rem; overflow: auto; padding-right: 2px; }
  .book-slot {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.8rem 1rem; border-radius: 12px;
    border: 1px solid var(--hair); background: rgba(255,255,255,0.03); color: var(--white);
    font: inherit; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
  }
  .book-slot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex: none; }
  .book-slot:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
  .book-empty { padding: 0.4rem 0; color: var(--dim); font-size: 0.9375rem; }
  .book-when { margin: 0 0.2rem 0.4rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
  .book-when small { display: block; margin-top: 2px; color: var(--dim); font-weight: 500; font-size: 0.8125rem; }
  .book-done { text-align: center; padding: 1.5rem 0.5rem 1rem; }
  .book-check {
    display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.1rem;
    border-radius: 50%; background: var(--white); color: var(--black);
    font-size: 1.6rem; font-weight: 800;
    box-shadow: 0 0 0 10px rgba(255,255,255,0.06), 0 0 0 22px rgba(255,255,255,0.025);
    animation: book-pop 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes book-pop { from { transform: scale(0.6); opacity: 0; } }
  .book-done-eyebrow { margin: 0 0 0.4rem; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
  .book-done h3 { margin: 0 0 0.6rem; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
  .book-done-when { margin: 0 0 1.4rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; }
  .book-done-when span { color: var(--dim); font-weight: 500; }
  .book-done-facts {
    list-style: none; margin: 0 auto; padding: 0.3rem 0; max-width: 26rem;
    display: grid; text-align: left;
    border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2);
  }
  .book-done-facts li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.2rem; color: var(--dim); font-size: 0.9375rem; }
  .book-done-facts li + li { border-top: 1px solid var(--hair-2); }
  .book-done-facts svg { width: 16px; height: 16px; flex: none; color: var(--white); }
  .book-done-facts b { color: var(--white); font-weight: 600; }
  .book-done-facts a { color: var(--white); font-weight: 600; border-bottom: 1px solid var(--hair); }
  .book-done-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1.4rem; }
  .book-done-actions .dock-back { padding: 0; }
  .book-step[hidden] { display: none !important; }
  .brief-done { padding: 1rem 0.3rem 0.4rem; }
  .brief-done .book-done-when { font-size: 1rem; color: var(--dim); font-weight: 500; }

  /* The booking is a centred modal, not a corner card. */
  .dock[data-view="book"]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(6, 6, 7, 0.74); backdrop-filter: blur(6px);
  }
  .dock[data-view="book"] { inset: 0; display: grid; place-items: center; justify-items: center; }
  .dock[data-view="book"] .dock-panel {
    width: min(66rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    padding: clamp(1.2rem, 2.5vw, 2.25rem);
    animation: none;
  }
  .dock[data-view="book"] .dock-btn { position: fixed; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vh, 2.5rem); }
  @media (min-width: 900px) {
    .book-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 0; }
    .book-host { padding-right: 1.75rem; border-right: 1px solid var(--hair-2); }
    .book-pick { grid-template-columns: minmax(0, 1fr) 15rem; gap: 0; }
    .book-cal { padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
    .book-times { padding-left: 1.75rem; border-left: 1px solid var(--hair-2); }
    .book-form { max-width: 34rem; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
    .book-done { max-width: 30rem; margin: 0 auto; }
  }
  /* The details form, labelled like a form should be. */
  .book-form { display: grid; gap: 0.9rem; }
  .book-field { display: grid; gap: 0.4rem; }
  .book-field > span { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
  .book-field i { font-style: normal; color: var(--dim); }
  .book-field input, .book-field textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
    background: rgba(255,255,255,0.045); color: var(--white);
    padding: 0.8rem 0.95rem; font: inherit; font-size: 0.95rem; outline: none;
  }
  .book-field input:focus, .book-field textarea:focus { border-color: rgba(255,255,255,0.55); }
  .book-field textarea { min-height: 5.5rem; resize: vertical; }
  .book-addguests {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.2rem; border: 0; background: none; color: var(--dim);
    font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  }
  .book-addguests svg { width: 16px; height: 16px; }
  .book-addguests:hover { color: var(--white); }
  .book-addguests[hidden] { display: none; }
  .book-consent { margin: 0.2rem 0 0; color: var(--faint); font-size: 0.8125rem; line-height: 1.4; }
  .book-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-top: 0.6rem; }
  .book-actions .brief-status { flex: 1; margin: 0; text-align: left; }
  .book-actions .dock-back { padding: 0; }
  .book-confirm { min-height: 2.9rem; padding: 0 1.4rem; font-size: 0.95rem; }
  @media (max-width: 899px) {
    .book-host { grid-template-columns: 44px 1fr; column-gap: 0.75rem; }
    .book-host .book-avatar { grid-row: 1 / 3; }
    .book-host .book-name { margin-top: 0; }
    .book-host .book-facts, .book-host .dock-back { grid-column: 1 / -1; }
    .book-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 14rem; }
    .book-host .dock-back { display: none; }
    /* The corner button would sit on top of the modal on a phone. */
    .dock[data-view="book"] .dock-btn { display: none; }
  }

  .brief-honey { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
  @media (max-width: 720px) {
    /* Bottom-right, under the thumb, thumb-sized. Always on screen. */
    /* Up from the very edge, where an iPhone thumb actually rests. */
    .dock { right: 0.9rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.9rem); }
    .dock-btn { min-height: 3.35rem; padding: 0.9rem 1.5rem; font-size: 1rem; }
    .dock-panel { max-height: calc(100vh - 7rem); }
  }

  footer { border-top: 1px solid var(--hair-2); padding: 1.75rem 0 2.5rem; }
  .foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    align-items: center;
  }
  .socials { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .socials a:hover { color: var(--white); }

  /* ── Phones ─────────────────────────────────────────────────────────
     Everything below is the 390px pass: what the desktop rules leave
     wrapping, overlapping, or hidden behind the contact dock. */
  @media (max-width: 720px) {
    .wordmark small { white-space: nowrap; font-size: 0.5rem; letter-spacing: 0.12em; }
    .hero-press { gap: 0.5rem 1.1rem; }
    .frame-meta { padding: 0.8rem; gap: 0.5rem; }
    .frame-meta .mono { font-size: 0.55rem; }
    /* Two 9:16 tiles share the width here; the format label collided with
       the brand, so the brand keeps the row to itself. */
    .frame:not(.wide):not(.half) .frame-meta .mono { display: none; }
    .head h2 { font-size: clamp(2.1rem, 9vw, 5rem); }
  }
  @media (max-width: 600px) { .press-item .mono { display: none; } }
  @media (max-width: 720px) {
    /* The hero: a bigger mark, and the recognition band as one quiet row of
       names with hairlines between them rather than three wrapped captions. */
    .hero-title { font-size: clamp(3.6rem, 16vw, 6rem); }
    /* Recognition as three badges across the row, evenly spread. */
    .hero-press { flex-wrap: nowrap; justify-content: space-between; gap: 0.45rem; padding-top: 0.9rem; }
    .press-item {
      flex: 1 1 0; min-width: 0;
      justify-content: center; gap: 0.35rem;
      padding: 0.5rem 0.55rem;
      border: 1px solid var(--hair); border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      white-space: nowrap;
    }
    .press-item + .press-item { padding-left: 0.55rem; border-left: 1px solid var(--hair); }
    .press-name { font-size: 0.75rem; }
    /* The marks scale to the pill, never past it. */
    .press-item { overflow: hidden; }
    .press-item img { height: 13px; max-width: 100%; }
    .press-item img[src*="shark"] { height: 10px; }
    .press-item .mono { font-size: 0.4375rem; letter-spacing: 0.1em; }
    /* The two proof pills side by side, smaller, arrow dropped. */
    .proofs { flex-wrap: nowrap; gap: 0.5rem; }
    .proof { flex: 1 1 0; min-width: 0; margin-top: 0.9rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; gap: 0.5rem; }
    .proof-text { min-width: 0; }
    .proof-text b { font-size: 0.75rem; line-height: 1.2; white-space: normal; }
    .proof-text .mono { font-size: 0.4375rem; }
    .proof .arrow { display: none; }
    /* The hero on a phone: clocks and recognition at the top, then the film
       breathes, then the mark, claim, button and badges as ONE group at the
       bottom — not three islands spaced evenly down the screen. */
    /* The hero ends exactly one logo strip short of the screen: the client
       strip is the last thing on the first screen, sitting on the fold. */
    .hero { height: auto; min-height: calc(100svh - var(--logos-h, 72px)); justify-content: flex-start; padding: 5.5rem 0 1.1rem; }
    .hero-mark { margin-top: auto; margin-bottom: 1rem; }
    .hero-bottom { gap: 0; }
    .hero-bottom .lead { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .hero-bottom .sub { margin: 0.6rem 0 1.1rem; }
    .proofs { gap: 0.5rem; }
    .scroll-hint { display: none; }
  }
  @media (max-width: 720px) {
    /* The dock is pinned over the footer's corner; give the footer room so
       the social links are never under the button. */
    footer { padding-bottom: 6.5rem; }
    .foot { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .contact .display { font-size: clamp(2.2rem, 10.5vw, 5rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .hero-title .mask > span { transform: none; }
    .frame { opacity: 1; transform: none; }
    .peek, .peek-track { opacity: 1; transform: none; animation: none; }
    .word > span { transform: none; }
  }

  /* ── Service landing pages, FAQ, footer services ───────────────────── */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .crumbs { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; color: var(--faint); }
  .crumbs a:hover { color: var(--white); }
  .sv-lead { max-width: 64ch; margin: 1.6rem 0 0; }
  .sv-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
  .cta.outline { background: rgba(255,255,255,.06); color: var(--white); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(12px); }
  .cta.outline:hover { background: var(--white); color: var(--black); }
  .cta.outline i { background: var(--white); }
  .cta.outline:hover i { background: var(--black); }
  .cta svg.cta-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .sv-points-wrap { padding-top: clamp(1.5rem, 3vw, 3rem); }
  .sv-film-wrap .shell { display: grid; gap: 0.8rem; }
  .sv-film-cap { color: var(--faint); }
  .sv-film-cap:hover { color: var(--white); }
  .sv-points-wrap, .sv-faq, .sv-others, #faq { padding: clamp(3rem, 7vw, 6rem) 0; }
  .sv-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--hair-2);
    border: 1px solid var(--hair-2);
    border-radius: 18px;
    overflow: hidden;
  }
  .sv-point { background: var(--black); padding: 1.6rem 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
  .sv-point .mono { color: var(--faint); }
  .sv-point h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
  .sv-point p { margin: 0; color: var(--dim); font-size: 0.95rem; }
  .faq { display: grid; border-top: 1px solid var(--hair-2); max-width: 900px; }
  .faq-item { border-bottom: 1px solid var(--hair-2); }
  .faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.15rem 0;
    font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -0.02em;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary i { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--hair); position: relative; }
  .faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--white); width: 10px; height: 1.5px; }
  .faq-item summary i::after { transform: rotate(90deg); transition: transform 240ms ease; }
  .faq-item[open] summary i::after { transform: rotate(0); }
  .faq-item p { margin: 0 0 1.3rem; color: var(--dim); max-width: 70ch; }
  /* One open at a time (the shared `name`), and the answer slides rather
     than snaps: block-size animates via interpolate-size on :root. */
  .faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, content-visibility 380ms allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; opacity: 1; }
  .faq-item summary { transition: color 180ms ease; }
  .faq-item summary:hover { color: var(--white); }
  .faq-item summary:hover i { border-color: var(--white); }
  .faq-item summary:focus:not(:focus-visible) { outline: none; }
  .faq-item summary:focus-visible { outline-offset: -3px; border-radius: 8px; }
  .sv-other-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
  .sv-other-links a { padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--hair); font-size: 0.875rem; font-weight: 600; }
  .sv-other-links a:hover { background: var(--white); color: var(--black); }
  .sv-contact .sv-actions { margin-top: 2rem; }
  .svc-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
  .foot-services { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--hair-2); }
  .foot-services a { color: var(--dim); }
  .foot-services a:hover { color: var(--white); }
  .foot-services .foot-label { color: var(--faint); }
  .chip[href]:hover { background: var(--white); color: var(--black); }

  /* ── Pricing packages ───────────────────────────────────────────────── */
  .packages { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 900px) { .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pk { display: grid; gap: .8rem; align-content: start; padding: 1.6rem 1.5rem 1.7rem; border-radius: 20px; border: 1px solid var(--hair-2); background: var(--raised); }
  .pk-mid { border-color: rgba(255,255,255,.22); background: var(--lift); }
  .pk h3 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
  .pk-for { margin: 0; color: var(--dim); }
  .pk-price { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; padding: .35rem 0; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
  .pk ul { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .4rem; color: rgba(255,255,255,.85); font-size: .95rem; }
  .pk-note { color: var(--faint); text-transform: none; letter-spacing: .04em; font-size: .7rem; margin: 0; }
  .pk .cta { justify-self: start; margin-top: .3rem; }
  .menu-links a:nth-child(5) { animation-delay: 280ms; }
  /* The pricing page reads as one centred column: smaller type, tighter
     cards, everything on a 1040px axis. */
  .pricing .shell { width: min(1040px, 92vw); }
  .pricing .crumbs { justify-content: center; }
  .pricing .pd-head, .pricing .sv-lead, .pricing .circle-offer { text-align: center; margin-inline: auto; }
  .pricing .pd-head { justify-items: center; }
  .pricing .pd-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
  .pricing .pd-head .eyebrow { justify-content: center; }
  .pricing .sv-lead { max-width: 58ch; font-size: clamp(1rem, 1.35vw, 1.2rem); }
  .pricing .sv-actions { justify-content: center; }
  .pricing .sv-hero .shell { padding-bottom: 0; }
  .pricing .sv-points-wrap, .pricing .sv-faq { padding: clamp(2rem, 5vw, 4rem) 0; }
  .pricing .head { text-align: center; }
  .pricing .head .eyebrow { justify-content: center; }
  .pricing .head h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
  .pricing .packages { gap: .75rem; }
  .pricing .pk { padding: 1.25rem 1.2rem 1.35rem; gap: .6rem; border-radius: 18px; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; position: relative; }
  .pricing .pk:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
  .pricing .pk h3 { font-size: 1.35rem; }
  .pricing .pk-for { font-size: .875rem; line-height: 1.4; min-height: 2.5em; }
  .pricing .pk-price { font-size: .95rem; padding: .45rem 0; }
  .pricing .pk ul { font-size: .84rem; gap: .32rem; padding-left: 1rem; color: rgba(255,255,255,.8); }
  .pricing .pk-note { font-size: .62rem; }
  .pricing .pk .cta { font-size: .875rem; padding: .7rem 1.1rem; }
  .pricing .pk-mid { background: linear-gradient(180deg, #1c1c20, #121215); border-color: rgba(255,255,255,.28); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
  .pricing .pk-mid::before { content: "Most chosen"; position: absolute; top: -.6rem; left: 1.2rem; padding: .25rem .6rem; border-radius: 999px; background: var(--white); color: var(--black); font: 700 .6rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  .pricing .sv-points { max-width: 1040px; }
  .pricing .sv-point { padding: 1.25rem 1.2rem; }
  .pricing .sv-point h3 { font-size: 1.05rem; }
  .pricing .sv-point p { font-size: .875rem; }
  .pricing .faq { margin-inline: auto; }
  .pricing .sv-contact .display { font-size: clamp(2rem, 5vw, 4rem); }
  /* How pricing works: five separate cards on a 3-column grid, styled like
     the packages; the SOS card spans two columns and carries the "Fastest"
     tag the way Campaign carries "Most chosen". */
  .pricing .how-grid { gap: .75rem; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  @media (min-width: 900px) { .pricing .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing .how-grid .sos { grid-column: span 2; } }
  .pricing .how-grid .sv-point { border: 1px solid var(--hair-2); border-radius: 18px; background: var(--raised); padding: 1.4rem 1.3rem; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; }
  .pricing .how-grid .sv-point:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
  .pricing .how-grid .sos { position: relative; overflow: visible; background: linear-gradient(180deg, #1c1c20, #121215); border-color: rgba(255,255,255,.28); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.5rem; }
  .pricing .how-grid .sos::before { content: "Fastest"; position: absolute; top: -.6rem; left: 1.2rem; padding: .25rem .6rem; border-radius: 999px; background: #ff7a1a; color: #1a0c03; font: 700 .6rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  .pricing .how-grid .sos > .mono { grid-column: 1; color: #ff7a1a; font-weight: 500; }
  .pricing .how-grid .sos h3 { grid-column: 1; font-size: 1.45rem; }
  .pricing .how-grid .sos p { grid-column: 1; color: rgba(255,255,255,.85); max-width: 46ch; }
  .sos-tag { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid rgba(255,122,26,.5); background: rgba(255,122,26,.12); color: #ffb070; font: 800 1.1rem/1 Manrope, sans-serif; letter-spacing: -.02em; text-align: center; white-space: nowrap; }
  @media (max-width: 720px) { .pricing .how-grid .sos { grid-template-columns: 1fr; } .sos-tag { grid-column: 1; grid-row: auto; justify-self: start; } }
  /* Studio page: pricing layout plus stat cards, the client strip, logos. */
  .stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  @media (min-width: 900px) { .stat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .stat-card { border: 1px solid var(--hair-2); border-radius: 18px; background: var(--raised); padding: 1.4rem 1.3rem 1.2rem; display: grid; gap: .5rem; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; }
  .stat-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
  .stat-card b { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
  .stat-card b small { font-size: .45em; color: var(--dim); margin-left: .1em; }
  .studio-stats { padding-top: 0 !important; }
  .studio-logos { margin: 0 0 clamp(1rem, 3vw, 2rem); }
  .studio-disc { gap: .75rem; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  @media (min-width: 900px) { .studio-disc { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .studio-disc .sv-point { border: 1px solid var(--hair-2); border-radius: 18px; background: var(--raised); transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s, background .2s; }
  .studio-disc .sv-point:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); background: var(--lift); }
  .studio-disc .sv-point h3 { font-size: 1rem; }
  .studio-disc .sv-point p { font-size: .8rem; }
  .recog { gap: .75rem; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  @media (min-width: 900px) { .recog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .recog .sv-point { border: 1px solid var(--hair-2); border-radius: 18px; background: var(--raised); }
  .recog .sv-point a { color: var(--white); border-bottom: 1px solid var(--hair); }
  .recog-logo { height: 20px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .95; margin-bottom: .4rem; justify-self: start; }
  .recog-sm { height: 14px; }
  .recog .g-chip { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: .4rem; }
  .recog .g-chip svg { width: 16px; height: 16px; }
  /* Process: four stages on one line, numbered, joined by a rail. */
  .process-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; position: relative; }
  @media (min-width: 900px) { .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .process-grid .sv-point { position: relative; border: 1px solid var(--hair-2); border-radius: 18px; background: var(--raised); padding: 1.5rem 1.3rem 1.4rem; overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; }
  .process-grid .sv-point:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
  .process-grid .sv-point .mono { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--hair); background: var(--black); color: var(--white); font-size: .7rem; letter-spacing: .05em; }
  .process-grid .sv-point::before { content: attr(data-n); position: absolute; right: -.2rem; top: -.9rem; font: 800 6.5rem/1 Manrope, sans-serif; letter-spacing: -.06em; color: rgba(255,255,255,.045); pointer-events: none; }
  .process-grid .sv-point h3 { font-size: 1.15rem; margin-top: .4rem; }
  .process-grid .sv-point p { font-size: .875rem; }
  @media (min-width: 900px) { .process-grid::before { content: ""; position: absolute; left: 2.4rem; right: 2.4rem; top: 2.55rem; height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 15%, var(--hair) 85%, transparent); z-index: 0; } .process-grid .sv-point { z-index: 1; } }
  .studio-goal { margin-top: 1.5rem; max-width: 60ch; margin-inline: auto; text-align: center; }
  .pricing-hero { position: relative; overflow: hidden; padding-bottom: clamp(2rem, 5vw, 4rem); }
  .pricing-hero .plate video { opacity: .38; }
  .pricing-hero .plate::after { background: linear-gradient(to bottom, rgba(6,6,7,.7) 0%, rgba(6,6,7,.35) 45%, #060607 100%); }
  .pricing-hero .shell { position: relative; z-index: 1; }

  /* ── circle.whycgi.media ────────────────────────────────────────────── */
  .circle-hero .shell { position: relative; }
  .circle-glow { position: absolute; left: -10%; top: -30%; width: 60vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,26,.22) 0%, rgba(255,122,26,.06) 40%, transparent 70%); filter: blur(40px); pointer-events: none; animation: breathe 7s ease-in-out infinite alternate; }
  @keyframes breathe { from { transform: scale(1); opacity: .75; } to { transform: scale(1.12) translate(4%, -3%); opacity: 1; } }
  .circle-lockup { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
  .circle-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 12px 40px rgba(255,122,26,.35), inset 0 0 0 1px rgba(255,255,255,.15); }
  .circle-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
  .proof-chip { display: inline-flex; align-items: center; gap: .65rem; padding: .5rem .95rem .5rem .6rem; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); backdrop-filter: blur(12px); text-align: left; }
  .proof-chip small { display: block; font-family: "IBM Plex Mono", monospace; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  .proof-chip b { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
  .proof-chip .g-chip { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
  .proof-chip .g-chip svg { width: 15px; height: 15px; }
  .proof-logo { height: 18px; width: auto; max-width: 90px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .95; flex: none; }
  .proof-logo-sm { height: 13px; }
  .proof-num { font-size: 1.15rem; font-weight: 800; letter-spacing: -.04em; color: #ffb070; flex: none; padding-left: .2rem; }
  .cta.circle-cta { background: #ff7a1a; color: #1a0c03; border-color: #ff7a1a; box-shadow: 0 14px 40px -12px rgba(255,122,26,.8); }
  .cta.circle-cta:hover { background: #ff9447; }
  .circle-offer { margin: 1rem 0 0; color: var(--dim); text-transform: none; letter-spacing: .04em; font-size: .7rem; }
  .circle-films .shell { display: block; }
  .circle-grid { margin-top: 0; }
  .circle-pain .sv-point .mono { color: #ff7a1a; font-size: .9rem; }
  .circle-soon-card { position: relative; overflow: hidden; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: #100c0a; display: grid; gap: .8rem; }
  .circle-soon-card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(50% 50% at 15% 50%, rgba(255,122,26,.35) 0%, rgba(255,122,26,.1) 35%, transparent 70%); filter: blur(34px); opacity: .7; }
  .circle-soon-card > * { position: relative; margin: 0; }
  .circle-soon-card h2 { font-size: clamp(2rem, 5vw, 4rem); }
  .circle-soon-card p { max-width: 60ch; color: rgba(255,255,255,.85); }
  /* A warm wash over the whole Circle page: orange light from the top,
     two softer pools further down, never flat black between sections. */
  main.circle { position: relative; isolation: isolate;
    background:
      radial-gradient(50% 28% at 50% 0%, rgba(255, 122, 26, .12) 0%, rgba(255, 122, 26, .03) 45%, transparent 70%),
      radial-gradient(38% 26% at 100% 38%, rgba(255, 140, 60, .05) 0%, transparent 65%),
      radial-gradient(42% 28% at 0% 72%, rgba(255, 96, 20, .05) 0%, transparent 65%),
      radial-gradient(60% 30% at 50% 100%, rgba(255, 122, 26, .06) 0%, transparent 65%),
      linear-gradient(180deg, #0a0706 0%, #070606 30%, #080606 60%, #060607 100%); }
  .circle .sv-point, .circle .pain-col, .circle .in-card, .circle .proof-chip, .circle .faq { border-color: rgba(255, 150, 80, .10); }
  .circle .sv-point, .circle .pain-col { background: rgba(14, 12, 11, .6); backdrop-filter: blur(10px); }
  .circle .eyebrow i { background: #ff7a1a; }
  .circle .faq-item { border-color: rgba(255, 150, 80, .16); }
  .circle .faq-item summary i { border-color: rgba(255, 150, 80, .35); }
  .circle .sv-contact { background: transparent; }
  .circle .cta.outline { border-color: rgba(255, 150, 80, .35); }
  /* The reel under the Circle hero: a poster with one play button, then a
     normal player with sound and controls once it is started. */
  .reel-wrap { padding: 0 0 clamp(1.5rem, 4vw, 3rem); }
  /* The first screen holds logo, title, lead and the player: the player's
     width is derived from the viewport height so nothing needs a scroll. */
  .hero-reel { width: min(100%, 860px, calc((100svh - 400px) * 16 / 9)); min-width: min(100%, 420px); margin: 1.4rem auto 0; }
  .circle-hero { padding-top: clamp(4.6rem, 8vh, 5.6rem) !important; }
  .circle-hero .circle-lockup { gap: .55rem; margin-bottom: .8rem; }
  .circle-hero .circle-logo { width: 56px; height: 56px; border-radius: 16px; }
  .circle-hero .pd-title { font-size: clamp(2rem, 4.6vw, 3.6rem); }
  .circle-hero .sv-lead { margin-top: 1.1rem; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
  .circle-hero .circle-proof { margin-top: .9rem; }
  .circle-hero .sv-actions { margin-top: 1.1rem; }
  .reel-card { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #000; box-shadow: 0 40px 100px -40px rgba(0,0,0,.95), 0 30px 80px -50px rgba(255,122,26,.35); aspect-ratio: 16 / 9; }
  .reel-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .reel-play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(to top, rgba(6,6,7,.75), rgba(6,6,7,.15) 50%, rgba(6,6,7,.2)); color: var(--white); cursor: pointer; display: grid; place-items: center; align-content: center; gap: .9rem; font: inherit; transition: opacity .3s; }
  .reel-card.playing .reel-play { opacity: 0; pointer-events: none; }
  .reel-btn { width: 84px; height: 84px; border-radius: 50%; background: var(--white); color: var(--black); display: grid; place-items: center; box-shadow: 0 20px 50px -15px rgba(0,0,0,.9), 0 0 0 10px rgba(255,255,255,.12); transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .reel-play:hover .reel-btn { transform: scale(1.08); }
  .reel-btn svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
  .reel-label { display: grid; text-align: center; gap: .2rem; }
  .reel-label b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
  .reel-label small { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  @media (max-width: 720px) { .reel-btn { width: 64px; height: 64px; } .reel-btn svg { width: 24px; height: 24px; } }
  button.cta { font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer; border: 0; }
  /* Always-on join button, centred at the bottom of the Circle page. */
  .circle-sticky { position: fixed; left: max(1rem, env(safe-area-inset-left)); right: auto; bottom: max(.9rem, env(safe-area-inset-bottom)); margin: 0; width: max-content; max-width: calc(100% - 7rem); z-index: 60; display: inline-flex; align-items: center; gap: .7rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px; background: #ff7a1a; color: #1a0c03; box-shadow: 0 18px 50px -14px rgba(255,122,26,.9), 0 0 0 1px rgba(255,255,255,.15) inset; font-weight: 800; font-size: .9rem; letter-spacing: -.01em; transition: transform .25s cubic-bezier(.16,1,.3,1); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.16,1,.3,1); }
  .circle-sticky.show { opacity: 1; transform: none; pointer-events: auto; }
  .circle-sticky:hover { transform: translateY(-2px) scale(1.02); }
  .circle-sticky img { width: 28px; height: 28px; border-radius: 50%; }
  .circle-sticky span { display: grid; line-height: 1.05; }
  .circle-sticky small { font-size: .62rem; font-weight: 600; opacity: .75; letter-spacing: 0; }
  .circle-sticky i { font-style: normal; }
  @keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
  @media (max-width: 720px) { .circle-sticky { left: .75rem; right: auto; max-width: calc(100% - 9rem); } .circle-sticky small { display: none; } }
  .circle .sv-contact { padding-bottom: 6rem; }
  /* The certificate: a 3D card that tilts with the pointer. */
  .cert-wrap { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
  @media (min-width: 900px) { .cert-wrap { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
  .cert-copy h2 { margin: .3rem 0 .8rem; }
  .cert-copy p { color: var(--dim); max-width: 46ch; margin: 0 0 1rem; }
  .cert-copy ul { margin: 0 0 1.3rem; padding: 0; list-style: none; display: grid; gap: .45rem; color: rgba(255,255,255,.85); font-size: .9rem; }
  .cert-copy li::before { content: "✓"; color: #ffb070; margin-right: .5rem; font-weight: 800; }
  .cert-stage { perspective: 2600px; display: grid; place-items: center; padding: 1.5rem 0 1.5rem clamp(0rem, 3vw, 2.5rem); }
  .cert-spin { position: relative; width: min(100%, 480px); aspect-ratio: 1.586; transform-style: preserve-3d; will-change: transform; }
  .cert-stage { cursor: grab; user-select: none; touch-action: pan-y; }
  .cert-stage.grab { cursor: grabbing; }
  @keyframes cert-turn { 0% { transform: rotateY(-14deg) rotateX(6deg); } 35% { transform: rotateY(14deg) rotateX(-6deg); } 50% { transform: rotateY(180deg) rotateX(0deg); } 65% { transform: rotateY(346deg) rotateX(6deg); } 100% { transform: rotateY(346deg) rotateX(6deg); } }
  .cert { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(135deg, #1a1a1e 0%, #0b0b0d 55%, #151518 100%); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 70px -40px rgba(255,122,26,.45); overflow: hidden; padding: clamp(1.1rem, 3vw, 1.8rem); display: grid; grid-template-rows: auto 1fr auto; color: var(--white); }
  .cert-back { transform: rotateY(180deg); grid-template-rows: auto 1fr auto; background:
      radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.07), transparent 60%),
      linear-gradient(160deg, #1a1a1e 0%, #0b0b0d 50%, #17120e 100%); }
  .cert > .cert-wm, .cert > .cert-shine, .cert > .cert-grid { position: absolute; }
  .cert-wm { inset: 0; display: grid; place-items: center; pointer-events: none; }
  .cert-wm img { width: 34%; opacity: .045; filter: grayscale(1); }
  .cert-back-top { display: flex; justify-content: space-between; align-items: center; }
  .cert-holo { width: 40px; height: 28px; border-radius: 6px; background: conic-gradient(from 200deg, #d9a066, #f5e6c8, #8fc7ff, #f7b1d6, #d9a066); opacity: .85; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.4); filter: saturate(.7); }
  .cert-back-mid { display: grid; justify-items: center; align-content: center; gap: .45rem; text-align: center; }
  .cert-back-logo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 24px rgba(255,122,26,.25); }
  .cert-back-title { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; }
  .cert-back-mid .mono { font-size: .48rem; color: var(--dim); }
  .cert-back-bot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.1); }
  .cert-back-bot .mono { font-size: .48rem; color: var(--dim); }
  .cert::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 0%, rgba(255,255,255,.10), transparent 60%), radial-gradient(40% 40% at 90% 100%, rgba(255,122,26,.18), transparent 60%); pointer-events: none; }
  .cert-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 45%, rgba(255,190,120,.18) 50%, rgba(255,255,255,.10) 55%, transparent 70%); background-size: 250% 100%; animation: cert-sheen 5s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; }
  @keyframes cert-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
  .cert-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%); pointer-events: none; }
  .cert > * { position: relative; }
  .cert-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .cert-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; }
  .cert-brand img { width: 30px; height: 30px; }
  .cert-brand small { display: block; font: 500 .5rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
  .cert-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255,122,26,.16); border: 1px solid rgba(255,122,26,.45); color: #ffb070; font: 700 .58rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
  .cert-badge i { width: 14px; height: 14px; border-radius: 50%; background: #ff7a1a; color: #1a0c03; display: grid; place-items: center; font-style: normal; font-size: .55rem; font-weight: 900; }
  .cert-mid { display: grid; align-content: center; gap: .35rem; padding: .6rem 0; }
  .cert-mid .mono { color: var(--dim); font-size: .55rem; }
  .cert-name { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
  .cert-course { font-size: .9rem; color: rgba(255,255,255,.85); }
  .cert-bot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; font: 500 .55rem/1.5 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .cert-sig { font-family: Manrope, sans-serif; font-weight: 800; font-size: .9rem; letter-spacing: -.02em; color: var(--white); text-transform: none; }
  .cert-sig small { display: block; font: 500 .5rem/1.6 "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
  .cert-seal { width: 54px; height: 54px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.35); display: grid; place-items: center; font: 700 .42rem/1.1 "IBM Plex Mono", monospace; text-align: center; letter-spacing: .1em; color: rgba(255,255,255,.8); background: radial-gradient(circle, rgba(255,122,26,.2), transparent 70%); }
  /* Members' voices and the look-inside gallery. */
  .voices { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  @media (min-width: 720px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .voice { position: relative; margin: 0; padding: 1.5rem 1.4rem 1.4rem; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 45%, rgba(255,255,255,.05)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -35px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14); display: grid; gap: 1.1rem; align-content: space-between; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; overflow: hidden; }
  .voice::after { content: "”"; position: absolute; right: 1rem; top: -.6rem; font: 800 6rem/1 Manrope, sans-serif; color: rgba(255,255,255,.06); pointer-events: none; }
  .voice:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
  .voice blockquote { margin: 0; font-size: 1.02rem; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; position: relative; }
  .voice figcaption { display: flex; align-items: center; gap: .7rem; font-size: .8rem; color: var(--dim); padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); }
  .voice-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ff7a1a; color: #1a0c03; font-weight: 800; font-size: .75rem; object-fit: cover; object-position: center; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
  .voice figcaption span { display: grid; line-height: 1.2; }
  .voice figcaption b { color: var(--white); font-size: .85rem; }
  .voice figcaption small { font-size: .65rem; color: var(--faint); }
  .voice blockquote::before { content: "★★★★★"; display: block; color: #ffb070; font-size: .7rem; letter-spacing: .15em; margin-bottom: .5rem; }
  .voices-note { text-align: center; margin: 1.4rem 0 0; color: #ffb070; text-transform: none; letter-spacing: .04em; font-size: .72rem; }
  .cgal { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  @media (min-width: 720px) { .cgal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cgal-item { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,150,80,.16); background: #0e0906; transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .cgal-item:hover { transform: translateY(-3px); }
  .cgal-item img { width: 100%; display: block; aspect-ratio: 1.94; object-fit: cover; }
  .cgal-item figcaption { padding: .6rem .9rem .7rem; color: var(--dim); }
  /* Compact, centred: the whole page on a 1040px axis, hero stacked on the
     centre line with the glow sitting behind the logo. */
  .circle .shell { width: min(1040px, 92vw); }
  .circle-hero .shell { display: grid; justify-items: center; text-align: center; }
  .circle-glow { left: 50%; top: -22%; transform: translateX(-50%); width: min(70vw, 640px); animation: breathe-c 7s ease-in-out infinite alternate; }
  @keyframes breathe-c { from { transform: translateX(-50%) scale(1); opacity: .7; } to { transform: translateX(-50%) scale(1.1); opacity: 1; } }
  .circle-lockup { flex-direction: column; gap: .9rem; margin-bottom: 1.2rem; }
  .circle-logo { width: 84px; height: 84px; border-radius: 24px; }
  .circle .pd-head { justify-items: center; }
  .circle .pd-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
  .circle .sv-lead { max-width: 60ch; margin-inline: auto; font-size: clamp(1rem, 1.35vw, 1.2rem); margin-top: 1.2rem; }
  .circle-proof { justify-content: center; margin-top: 1.2rem; }
  .circle .sv-actions { justify-content: center; }
  .circle-offer { text-align: center; }
  .circle .sv-hero { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
  .circle .sv-points-wrap, .circle .sv-faq, .circle .circle-films { padding: clamp(2rem, 5vw, 4rem) 0; }
  .circle .head { text-align: center; }
  .circle .head .eyebrow { justify-content: center; }
  .circle .head h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
  .circle .sv-points { max-width: 1040px; margin-inline: auto; }
  .circle .sv-point { padding: 1.2rem 1.15rem; }
  .circle .sv-point h3 { font-size: 1.05rem; }
  .circle .sv-point p { font-size: .875rem; }
  .circle .faq { margin-inline: auto; }
  .circle-soon-card { text-align: center; justify-items: center; }
  .circle .sv-contact .display { font-size: clamp(2rem, 5vw, 4rem); }
  /* The film strip is a column layout like the Projects grid: five across on
     desktop, three on tablets, two on phones. */
  .circle .circle-grid { column-count: 2; column-gap: .6rem; }
  @media (min-width: 640px)  { .circle .circle-grid { column-count: 3; } }
  @media (min-width: 1024px) { .circle .circle-grid { column-count: 5; } }
  .circle .circle-grid .p-chips { transform: scale(.85); transform-origin: top left; }
  .circle .circle-grid .stamp-noai { transform: scale(.7); transform-origin: bottom right; }
  /* What's inside: eight media cards, the film behind each point. */
  .in-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  @media (min-width: 900px) { .in-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .in-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--hair-2); background: var(--raised); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .2s; }
  .in-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.25); }
  .in-media { position: absolute; inset: 0; }
  .in-media img, .in-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .in-media video { opacity: 0; transition: opacity .4s; }
  .in-card:hover .in-media video { opacity: 1; }
  .in-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,7,.96) 0%, rgba(6,6,7,.72) 42%, rgba(6,6,7,.15) 75%, rgba(6,6,7,.1) 100%); }
  .in-body { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.1rem 1.2rem; display: grid; gap: .35rem; }
  .in-body .mono { color: #ffb070; font-size: .55rem; }
  .in-body h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; min-height: 2.1em; display: flex; align-items: end; }
  .in-body { min-height: 5.2rem; align-content: end; }
  .in-body .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .in-body p { margin: 0; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.75); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
  .in-card:hover .in-body p, .in-card:focus-visible .in-body p { max-height: 4rem; opacity: 1; }
  @media (hover: none) { .in-body p { max-height: none; opacity: 1; } }
  .in-card::after { content: "→"; position: absolute; top: .8rem; right: .9rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); color: #fff; font-size: .9rem; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s; }
  .in-card:hover::after { opacity: 1; transform: none; }
  .in-card:hover { box-shadow: 0 30px 60px -30px rgba(255,122,26,.6); }
  /* Tired of guessing: without / inside, and the proof beside it. */
  .pain-compare { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  @media (min-width: 900px) { .pain-compare { grid-template-columns: 1fr 1fr .8fr; } }
  .pain-col { border: 1px solid var(--hair-2); border-radius: 18px; padding: 1.2rem 1.2rem 1rem; background: var(--raised); display: grid; gap: .8rem; align-content: start; }
  .pain-col > .mono { margin: 0 0 .2rem; }
  .pain-without { opacity: .82; }
  .pain-with { background: linear-gradient(180deg, #1c1a18, #111110) !important; border-color: rgba(255,255,255,.22) !important; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); position: relative; }
  .pain-with::before { content: "What you get"; position: absolute; top: -.6rem; left: 1.2rem; padding: .25rem .6rem; border-radius: 999px; background: #ff7a1a; color: #1a0c03; font: 700 .6rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
  .pain-with .pain-item b { color: #fff; }
  .pain-with .pain-item p { color: rgba(255,255,255,.82); }
  .pain-with > .mono { color: var(--dim); }
  .pain-item { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; }
  .pain-item b { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
  .pain-item p { margin: .15rem 0 0; font-size: .82rem; color: var(--dim); line-height: 1.4; }
  .pain-x, .pain-ok { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
  .pain-x { background: rgba(255,80,80,.15); color: #ff7a7a; }
  .pain-ok { background: rgba(255,122,26,.16); color: #ffb070; border: 1px solid rgba(255,122,26,.4); }
  .pain-media { position: relative; display: block; min-height: 320px; border-radius: 18px; overflow: hidden; border: 1px solid var(--hair-2); background: #111; }
  .pain-media img, .pain-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pain-media { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .pain-media:hover { transform: translateY(-3px); }
  .pain-cap { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.1rem 1.2rem; background: linear-gradient(to top, rgba(6,6,7,.96) 20%, transparent); display: grid; gap: .6rem; justify-items: start; }
  .pain-cap small { color: rgba(255,255,255,.7); }
  .pain-cap b { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.05rem; border-radius: 999px; background: #ff7a1a; color: #1a0c03; font-size: .875rem; font-weight: 800; box-shadow: 0 12px 30px -10px rgba(255,122,26,.9); }
  .language-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem 1.4rem; width: var(--shell); margin: 2rem auto; font-size: .9rem; }
  .language-links a { padding: .4rem; color: #c6c6ca; }
  .language-links a:hover, .language-links a[aria-current="page"] { color: white; text-decoration: underline; text-underline-offset: .3em; }

  /* Shared interaction finish: calm motion, clear affordances. */
  details.motion-details::details-content { block-size: auto; opacity: 1; transition: none; }
  details.motion-details { interpolate-size: numeric-only; }
  .svc.motion-details[data-expanded="false"] .svc-mark::after { transform: rotate(90deg); }
  .svc.motion-details[data-expanded="true"] .svc-mark::after { transform: rotate(0); }
  .faq-item.motion-details[data-expanded="false"] summary i::after { transform: rotate(90deg); }
  .faq-item.motion-details[data-expanded="true"] summary i::after { transform: rotate(0); }
  .cta, .meet, .dock-btn, .filter, .sv-other-links a {
    transition: transform 220ms cubic-bezier(.22,1,.36,1), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }
  .cta:active, .meet:active, .dock-btn:active, .filter:active { transform: scale(.97); }
  .pill-nav a { position: relative; }
  .pill-nav a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 240ms cubic-bezier(.22,1,.36,1); }
  .pill-nav a:hover::after, .pill-nav a:focus-visible::after { transform: scaleX(1); }
  .svc summary, .faq-item summary, .international summary { transition: color 220ms ease, background-color 220ms ease; }
  .international summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
  .international summary::-webkit-details-marker { display: none; }
  .international summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; flex: none; transition: transform 280ms cubic-bezier(.22,1,.36,1); }
  .international details[data-expanded="true"] summary::after, .international details:not(.motion-details)[open] summary::after { transform: rotate(45deg); }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover, .meet:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
    .filter:hover, .sv-other-links a:hover { border-color: rgba(255,255,255,.4); }
    .svc summary:hover, .faq-item summary:hover, .international summary:hover { color: #fff; background-color: rgba(255,255,255,.025); }
  }
  @media(prefers-reduced-motion: reduce) {
    .cta, .meet, .dock-btn, .filter, .sv-other-links a, .pill-nav a::after, summary, summary::after { transition: none !important; }
    .cta:hover, .meet:hover, .cta:active, .meet:active, .dock-btn:active, .filter:active { transform: none; }
  }