/* =========================================================
   LA PAIX QUIET MOTION SYSTEM — v0.2.174
   High-sense motion without scroll hijacking.
   Layout and content remain usable when motion is unavailable.
========================================================= */
:root {
  --qm-ease: cubic-bezier(.16, 1, .3, 1);
  --qm-ease-soft: cubic-bezier(.22, .78, .24, 1);
  --qm-fast: 360ms;
  --qm-medium: 720ms;
  --qm-slow: 980ms;
  --qm-depth-x: 0px;
  --qm-depth-y: 0px;
  --qm-parallax: 0px;
}

/* Cross-document transition: the header identity feels continuous while the
   page itself changes quietly. Unsupported browsers simply navigate normally. */
@view-transition { navigation: auto; }
.site-brand { view-transition-name: lapaix-brand; }
.site-menu-button { view-transition-name: lapaix-menu; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: qm-page-out 190ms ease-out both;
  }
  ::view-transition-new(root) {
    animation: qm-page-in 420ms var(--qm-ease) both;
  }
  ::view-transition-group(lapaix-brand),
  ::view-transition-group(lapaix-menu) {
    animation-duration: 420ms;
    animation-timing-function: var(--qm-ease);
  }
}
@keyframes qm-page-out {
  to { opacity: .22; filter: blur(.6px); }
}
@keyframes qm-page-in {
  from { opacity: .12; transform: translate3d(0, 7px, 0); filter: blur(.8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* Headline reveal — v0.2.148 desktop-safe.
   Text is never clipped. The existing .js-reveal opacity/Y motion provides the
   editorial entrance, while this layer only softens focus very slightly. */
html.qm-enabled .qm-title {
  clip-path: none !important;
  overflow: visible;
  transition: filter 420ms ease;
}
html.qm-enabled .qm-title:not(.qm-in) {
  clip-path: none !important;
  filter: blur(.12px);
}
html.qm-enabled .qm-title.qm-in {
  clip-path: none !important;
  filter: blur(0);
}

/* Image mask reveal. We animate individual transform properties so the system
   can coexist with legacy transform rules without changing photo framing. */
html.qm-enabled .qm-media {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 7% 0);
  opacity: .78;
  translate: 0 10px;
  transition:
    clip-path var(--qm-slow) var(--qm-ease),
    opacity 620ms ease,
    translate var(--qm-slow) var(--qm-ease);
  will-change: clip-path, opacity, translate;
}
html.qm-enabled .qm-media.qm-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  translate: 0 0;
}
html.qm-enabled .qm-media > img,
html.qm-enabled .qm-media > picture > img {
  translate: var(--qm-depth-x) calc(var(--qm-depth-y) + var(--qm-parallax));
  scale: 1.024;
  transition:
    translate 520ms var(--qm-ease-soft),
    scale 1050ms var(--qm-ease),
    filter 520ms ease;
  will-change: translate, scale;
}
html.qm-enabled .qm-media.qm-in > img,
html.qm-enabled .qm-media.qm-in > picture > img {
  scale: 1.006;
}

/* Preserve full-frame / contain imagery. The reveal remains, but the photo is
   never enlarged enough to lose important edges. */
html.qm-enabled :is(
  .transformation-editorial__before,
  .business-service__image--contain,
  .selected-visuals__item--static,
  .personal-hero__media,
  .business-hero__media,
  .works-hero__media,
  .single-menu-hero__media,
  .labo-hero__media,
  .brand-visual-hero__media,
  .update-hero__media,
  .about-hero__media
).qm-media > img {
  scale: 1;
}

/* The yellow cake image is intentionally a visual punctuation mark. It opens
   from both sides instead of behaving like another thumbnail. */
html.qm-enabled .selected-visuals__item--cake-feature.qm-media:not(.qm-in) {
  clip-path: inset(0 8% 0 8%);
  opacity: .68;
  translate: 0 14px;
}
html.qm-enabled .selected-visuals__item--cake-feature.qm-media.qm-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  translate: 0 0;
  transition-duration: 1120ms, 720ms, 1120ms;
}

/* Photography portfolio: each item arrives in a short cadence. The delay is
   capped and reset by row in JS, so the user never waits for late content. */
html.qm-enabled .brand-visual-photo-works .selected-visuals__item--static.qm-media {
  transition-delay: var(--qm-stagger, 0ms);
}
html.qm-enabled .brand-visual-photo-works .selected-visuals__item--static.qm-media > img {
  transition-delay: var(--qm-stagger, 0ms);
}

/* Numbered systems. Existing short rules now draw themselves when a stage
   enters the viewport; numbers rise very slightly, preserving the quiet rail. */
html.qm-enabled .qm-step > :is(span, .personal-labo-map__index) {
  transition: opacity 520ms ease, translate 680ms var(--qm-ease);
}
html.qm-enabled .qm-step:not(.qm-in) > :is(span, .personal-labo-map__index) {
  opacity: .35;
  translate: 0 7px;
}
html.qm-enabled .qm-step.qm-in > :is(span, .personal-labo-map__index) {
  opacity: 1;
  translate: 0 0;
}
html.qm-enabled .business-process__grid .qm-step > span::after,
html.qm-enabled .single-menu-flow__grid .qm-step > span::after,
html.qm-enabled .personal-labo-map--editorial .qm-step .personal-labo-map__index::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--qm-ease) 90ms;
}
html.qm-enabled .business-process__grid .qm-step.qm-in > span::after,
html.qm-enabled .single-menu-flow__grid .qm-step.qm-in > span::after,
html.qm-enabled .personal-labo-map--editorial .qm-step.qm-in .personal-labo-map__index::after {
  transform: scaleX(1);
}

/* Brand Site / Journey rails don't all use a number-rule pseudo element, so a
   subtle content cadence gives them the same family feeling without adding UI. */
html.qm-enabled .qm-step > :is(h3, div, p) {
  transition: opacity 600ms ease, translate 760ms var(--qm-ease);
}
html.qm-enabled .qm-step:not(.qm-in) > :is(h3, div) {
  opacity: .72;
  translate: 0 5px;
}
html.qm-enabled .qm-step.qm-in > :is(h3, div) {
  opacity: 1;
  translate: 0 0;
}

/* Desktop-only tactile depth. It never changes layout and stays deliberately
   below the threshold where it reads as a gimmick. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  html.qm-enabled .qm-depth {
    --qm-depth-x: 0px;
    --qm-depth-y: 0px;
  }
  html.qm-enabled .qm-depth:hover > img,
  html.qm-enabled .qm-depth:hover > picture > img {
    filter: saturate(1.018) contrast(1.012);
  }

  /* The main.js magnetic CTA remains the source of button movement. This
     layer gives text links an equally refined but smaller tactile response. */
  html.qm-enabled .text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: opacity 240ms ease, translate 360ms var(--qm-ease);
  }
  html.qm-enabled .text-link:hover,
  html.qm-enabled .text-link:focus-visible {
    translate: 5px 0;
  }
}

/* Mobile is scroll-led, not hover-led. Movement is shorter and faster so the
   page never feels like it is waiting for animation to finish. */
@media (max-width: 900px) {
  :root {
    --qm-medium: 600ms;
    --qm-slow: 780ms;
  }
  html.qm-enabled .qm-media {
    clip-path: inset(0 0 5% 0);
    translate: 0 7px;
  }
  html.qm-enabled .qm-media > img,
  html.qm-enabled .qm-media > picture > img {
    scale: 1.022;
  }
  html.qm-enabled .qm-media.qm-in > img,
  html.qm-enabled .qm-media.qm-in > picture > img {
    scale: 1.006;
  }
  html.qm-enabled :is(
    .transformation-editorial__before,
    .business-service__image--contain,
    .selected-visuals__item--static,
    .personal-hero__media,
    .business-hero__media,
    .works-hero__media,
    .single-menu-hero__media,
    .labo-hero__media,
    .brand-visual-hero__media,
    .update-hero__media,
    .about-hero__media
  ).qm-media > img {
    scale: 1;
  }
}

/* Progressive scroll-timeline enhancement. This supplements the JS fallback
   only in browsers that implement view timelines; no content depends on it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.qm-enabled .qm-scroll-accent {
      animation: qm-scroll-accent linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 48%;
    }
    @keyframes qm-scroll-accent {
      from { opacity: .72; translate: 0 9px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* Accessibility and low-power safety. */
@media (prefers-reduced-motion: reduce) {
  html.qm-enabled .qm-title,
  html.qm-enabled .qm-media,
  html.qm-enabled .qm-step,
  html.qm-enabled .qm-step > *,
  html.qm-enabled .qm-media > img,
  html.qm-enabled .qm-media > picture > img,
  html.qm-enabled .text-link {
    clip-path: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(lapaix-brand),
  ::view-transition-group(lapaix-menu) {
    animation-duration: .001ms !important;
  }
}


/* =========================================================
   v0.2.147 — mobile smoothness + fail-safe editorial media
   Touch scrolling must stay native and continuous. Entry motion remains on
   text/steps, but images no longer participate in continuous scroll effects.
========================================================= */
@media (max-width: 900px) {
  /* Disable both the legacy view-timeline drift and QUIET MOTION image depth. */
  .js-image-drift > img {
    animation: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }

  html.qm-enabled .qm-media,
  html.qm-enabled .qm-media.qm-in,
  html.qm-enabled .selected-visuals__item--cake-feature.qm-media,
  html.qm-enabled .selected-visuals__item--cake-feature.qm-media.qm-in {
    clip-path: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
    will-change: auto !important;
  }

  html.qm-enabled .qm-media > img,
  html.qm-enabled .qm-media > picture > img,
  html.qm-enabled .qm-media.qm-in > img,
  html.qm-enabled .qm-media.qm-in > picture > img {
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }

  html.qm-enabled .brand-visual-photo-works .selected-visuals__item--static.qm-media,
  html.qm-enabled .brand-visual-photo-works .selected-visuals__item--static.qm-media > img {
    transition-delay: 0ms !important;
  }

  html.qm-enabled .qm-scroll-accent {
    animation: none !important;
  }

  html.qm-enabled .qm-title {
    filter: none !important;
  }
}

/* TOP VISUAL DIRECTION must never become an empty black field. These two
   authored photographs are intentionally excluded from motion/reveal logic. */
.visual-rhythm__item--large,
.visual-rhythm__item--small,
.visual-rhythm__item--large img,
.visual-rhythm__item--small img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* CONTACT: give project-outline placeholders enough real width on desktop.
   The class already exists in markup; make its intended full-row behavior real. */
.lp-contact-form__field--full {
  grid-column: 1 / -1;
}
@media (min-width: 901px) {
  .visual-request-check .lp-contact-form__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr);
    column-gap: 30px;
  }
  .visual-request-check .lp-contact-form input[type="text"] {
    min-height: 52px;
    line-height: 1.55;
  }
}

/* =========================================================
   v0.2.150 — MOBILE SIGNATURE MOTION / SMOOTH SCROLL
   The screen recording showed real 80–110ms stalls while touch-scrolling.
   Mobile therefore never moves large image layers during scroll. Surprise is
   created with text choreography, number rails and a 1px editorial scan line.
========================================================= */
@media (max-width: 900px) {
  /* Legacy reveal transforms on photography were still moving the entire
     image wrapper even after parallax was disabled. Keep photography locked
     to the document while the user scrolls. */
  html.has-js main .qm-media.js-reveal,
  html.has-js main .qm-media.js-reveal.is-visible,
  html.has-js main figure.qm-media.js-reveal,
  html.has-js main figure.qm-media.js-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* The fixed conversion bar used backdrop blur. On iOS this forces the page
     behind it to be re-filtered during every scroll frame. A near-solid panel
     looks the same in practice and is much cheaper to composite. */
  .mobile-sticky-cta a {
    background: rgba(20,18,16,.985) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 20px rgba(15,13,11,.16), 0 0 0 1px rgba(244,241,235,.34) !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Parent titles no longer perform the legacy 11px reveal. Authored mobile
     lines animate independently, which feels richer without moving a large
     block against the user's finger. */
  html.has-js .qm-title.js-reveal,
  html.has-js .qm-title.js-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.qm-enabled .qm-mobile-title-line {
    opacity: .01;
    translate: 0 14px;
    transition:
      opacity 430ms ease,
      translate 650ms cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--qm-line-index, 0) * 72ms + 24ms);
  }
  html.qm-enabled .qm-title.qm-in .qm-mobile-title-line {
    opacity: 1;
    translate: 0 0;
  }

  /* Titles without responsive line spans still receive one clean entrance. */
  html.qm-enabled .qm-title--single {
    opacity: .01 !important;
    translate: 0 12px;
    transition: opacity 430ms ease, translate 650ms cubic-bezier(.16,1,.3,1) !important;
  }
  html.qm-enabled .qm-title--single.qm-in {
    opacity: 1 !important;
    translate: 0 0;
  }

  /* Signature photography stays perfectly still. A one-pixel warm scan moves
     across selected images instead of covering or translating the photo. The
     repaint area is tiny and paint is contained to the image box. */
  html.qm-enabled .qm-mobile-curtain {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
  }
  html.qm-enabled .qm-mobile-curtain::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(206,177,143,.94);
    box-shadow: 0 0 9px rgba(206,177,143,.26);
    opacity: 0;
    pointer-events: none;
  }
  html.qm-enabled .qm-mobile-curtain.qm-in::after {
    animation: qm-mobile-scanline 720ms cubic-bezier(.22,.78,.24,1) 70ms both;
  }
  @keyframes qm-mobile-scanline {
    0%   { left: 0; opacity: 0; transform: scaleY(.22); }
    15%  { opacity: .92; transform: scaleY(1); }
    82%  { opacity: .62; transform: scaleY(.84); }
    100% { left: calc(100% - 1px); opacity: 0; transform: scaleY(.48); }
  }

  /* Numbered systems deliver the editorial drama: number first, then content.
     Only small text layers move; no full-width image or section is translated. */
  html.qm-enabled .qm-step > :is(span, .personal-labo-map__index) {
    opacity: .24;
    translate: 0 8px;
    transition: opacity 390ms ease, translate 600ms cubic-bezier(.16,1,.3,1);
  }
  html.qm-enabled .qm-step.qm-in > :is(span, .personal-labo-map__index) {
    opacity: 1;
    translate: 0 0;
  }
  html.qm-enabled .qm-step > :is(h3, div) {
    opacity: .52;
    translate: 0 7px;
    transition: opacity 440ms ease 90ms, translate 640ms cubic-bezier(.16,1,.3,1) 90ms;
  }
  html.qm-enabled .qm-step.qm-in > :is(h3, div) {
    opacity: 1;
    translate: 0 0;
  }

  /* Section labels are small enough to move safely and give each chapter a
     recognisable beat before the larger Japanese copy arrives. */
  html.has-js main .section-label.js-reveal {
    transform: translate3d(-9px,0,0);
    transition-duration: 430ms, 560ms;
  }
  html.has-js main .section-label.js-reveal.is-visible {
    transform: translate3d(0,0,0);
  }

  /* Photo grids remain static on touch devices. The previous per-tile scale /
     rise created too many simultaneous compositor layers in long portfolios. */
  html.qm-enabled .brand-visual-photo-works .qm-mobile-portfolio,
  html.qm-enabled .brand-visual-photo-works .qm-mobile-portfolio.qm-in {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }

  .button:active,
  .mobile-sticky-cta a:active {
    scale: .986;
    transition-duration: 110ms !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.qm-enabled .qm-mobile-curtain::after { display: none !important; }
  html.qm-enabled .qm-mobile-title-line,
  html.qm-enabled .qm-title--single,
  html.qm-enabled .brand-visual-photo-works .qm-mobile-portfolio {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   v0.2.172 — MOBILE HOME / CONTINUOUS FILM + NATIVE SCROLL
   The page keeps one continuous film plane only. No scroll-direction JS, video
   hand-off, seek, play/pause boundary logic or animated WebP panes are active.
   Slow-scroll stability is handled by removing runtime layout work and full-size
   image decoding from the scroll path, while the liked symmetric film windows
   and immersive full-film beats remain visible through the whole TOP.
========================================================= */

/* Desktop keeps the v146 quiet-motion system. These labels are shared by the
   v164 mobile entrance treatment and are harmless outside HOME. */
.entrance-card__audience-mobile,
.entrance-card__link-mobile { display: none; }

@media (max-width: 767px) {
  html { scroll-behavior: auto !important; }

  body.home {
    --home-film-edge-base: clamp(18px, 5.6vw, 24px);
    --home-film-edge-wide: clamp(26px, 7.8vw, 34px);
    --home-mobile-copy-gutter: clamp(23px, 6.4vw, 28px);
    background: #11100f !important;
  }

  /* Critical iOS stability rule: nothing viewport-fixed remains active on the
     closed HOME page. The header lives in the HERO flow; the fullscreen nav is
     instantiated only while it is actually open. */
  body.home .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 64 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  body.home .site-nav:not(.is-open) {
    display: none !important;
  }
  body.home .site-nav.is-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
  }

  /* The global conversion bar is intentionally disabled only on mobile HOME.
     HERO and final CONTACT retain explicit consultation paths. This removes the
     second always-on fixed layer while we keep the landing page scroll native. */
  body.home .mobile-sticky-cta { display: none !important; }

  /* v0.2.172 — one continuous film plane for the full mobile TOP.
     This restores the v161 visual language the user preferred: the same live
     film is visible through the symmetric side windows and immersive beats all
     the way to CONTACT. There is no scroll listener, no hand-off, no seek and
     no class switching; the single video simply stays behind the document. */
  body.home .home-film-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    contain: none !important;
    transform: none !important;
  }
  body.home .home-film-backdrop__viewport,
  body.home .home-film-backdrop__video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
  }
  body.home .home-film-backdrop__still { display: none !important; }
  body.home .site-main {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }
  body.home .hero.hero--video {
    position: relative !important;
    z-index: 2 !important;
    height: var(--top-hero-mobile-h, 100svh) !important;
    min-height: 560px !important;
    overflow: hidden !important;
    background: transparent !important;
    contain: none !important;
  }

  /* Mobile HOME after HERO: keep the liked bilateral film-frame composition,
     but render one static frame only. This is intentionally not an animated
     WebP/video while stability is being locked. */
  /* v0.2.199: the three purpose paths are a required static part of the
     mobile HOME flow. Keep the film stages below untouched and do not make
     this navigation sticky, fixed, or motion-owned. */
  body.home .top-paths { display: grid !important; }
  body.home .home-film-stage {
    --home-local-edge: var(--home-film-edge-base);
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--home-local-edge) !important;
    padding-right: var(--home-local-edge) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
  }
  body.home .home-film-stage--offset { --home-local-edge: var(--home-film-edge-wide); }
  body.home .home-film-stage--immersive {
    --home-local-edge: 0px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* The local placeholder planes are no longer painted. Their transparent
     slots reveal the single fixed live film underneath instead. */
  body.home .home-local-film,
  body.home .home-local-film--ambient,
  body.home .home-local-film__video,
  body.home [data-home-stage-video] {
    display: none !important;
  }

  /* Reading surface. The two edge windows remain symmetric; immersive beats
     deliberately reveal the entire still. */
  body.home .home-film-stage:not(.home-film-stage--immersive)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--home-local-edge);
    right: var(--home-local-edge);
    z-index: 1;
    pointer-events: none;
    background: var(--home-local-surface, var(--color-paper));
  }
  body.home .visual-rhythm.home-film-stage--frame { --home-local-surface: #0f0e0c; }
  body.home .role.home-film-stage--frame { --home-local-surface: var(--color-deep); }
  body.home .works-preview.home-film-stage--offset,
  body.home .about-preview.home-film-stage--gallery { --home-local-surface: var(--color-paper); }
  body.home .entrances.home-film-stage--gallery::before { content: none !important; }

  body.home .home-film-stage--immersive::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(17,16,15,.24), rgba(17,16,15,.56)),
      linear-gradient(90deg, rgba(17,16,15,.30), rgba(17,16,15,.08) 52%, rgba(17,16,15,.34)) !important;
  }
  body.home .cta.home-film-stage--closing::before {
    background:
      linear-gradient(180deg, rgba(10,9,8,.50), rgba(10,9,8,.76)),
      linear-gradient(90deg, rgba(10,9,8,.38), rgba(10,9,8,.14) 50%, rgba(10,9,8,.42)) !important;
  }
  body.home .home-film-stage > :not(.home-local-film) {
    position: relative;
    z-index: 2;
  }
  body.home .visual-rhythm,
  body.home .statement,
  body.home .entrances,
  body.home .works-preview,
  body.home .role,
  body.home .about-preview,
  body.home .cta { background: transparent !important; }
  body.home .statement.home-film-stage--immersive,
  body.home .cta.home-film-stage--immersive { color: #f5f1e9 !important; }

  /* v0.2.178 — the generic .section-text rule carries a dark ink color.
     On the mobile immersive BRAND STATEMENT that dark ink sits over the live
     film and loses contrast, so the lead explicitly follows the warm-light
     section foreground. Typography, spacing and scroll geometry are untouched. */
  body.home .statement.home-film-stage--immersive .statement__lead {
    color: #f5f1e9 !important;
  }

  /* No scroll-triggered transforms on mobile HOME. The HERO can still play its
     authored load-in; every later section is immediately paint-stable. */
  body.home main .js-reveal,
  body.home main .js-reveal.is-visible,
  body.home main .qm-mobile-title-line,
  body.home main .qm-title--single,
  body.home main .qm-step,
  body.home main .qm-step > *,
  body.home main .qm-media,
  body.home main .qm-mobile-portfolio,
  body.home main .js-image-drift > img {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  body.home main .qm-mobile-curtain::after { display: none !important; }

  /* v162–v164 typography and clearer entry language, rebuilt without the old
     experimental compositor rules. */
  body.home .entrance-card__audience-desktop,
  body.home .entrance-card__link-desktop { display: none !important; }
  body.home .entrance-card__audience-mobile {
    display: flex !important;
    align-items: baseline;
    gap: 12px;
    margin: 0;
  }
  body.home .entrance-card__audience-mobile > span {
    color: var(--color-accent);
    font: 400 12px/1.2 Arial, sans-serif;
    letter-spacing: .2em;
  }
  body.home .entrance-card__audience-mobile small {
    color: rgba(255,255,255,.62);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .08em;
  }
  body.home .entrance-card__link-mobile { display: inline !important; white-space: nowrap; }
  body.home .entrance-card__body {
    padding-left: clamp(24px, 7.2vw, 30px) !important;
    padding-right: clamp(24px, 7.2vw, 30px) !important;
  }
  body.home .entrance-card .mobile-copy-precise {
    font-size: clamp(14px, 3.72vw, 15px) !important;
    line-height: 1.88 !important;
    letter-spacing: .01em;
  }
  body.home .entrance-card .mobile-copy-precise .responsive-copy--mobile .responsive-copy__line,
  body.home .role-card h3 .responsive-copy--mobile .responsive-copy__line,
  body.home .role-card .mobile-copy-precise .responsive-copy--mobile .responsive-copy__line,
  body.home .visual-rhythm__quote .responsive-copy--mobile .responsive-copy__line {
    white-space: nowrap !important;
  }
  body.home .role-card h3 {
    font-size: clamp(22px, 6.15vw, 25px) !important;
    line-height: 1.46 !important;
    letter-spacing: 0 !important;
    max-width: 100%;
  }
  body.home .role-card .mobile-copy-precise {
    font-size: clamp(13.5px, 3.65vw, 14.5px) !important;
    line-height: 1.88 !important;
  }
  body.home .visual-rhythm__quote,
  body.home .visual-rhythm__copy .visual-rhythm__quote {
    font-size: clamp(21px, 5.85vw, 24px) !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
  }

  /* Restore the internal copy gutter independent of the outside film frame. */
  body.home .works-preview > .section__inner,
  body.home .role > .section__inner,
  body.home .journal-preview > .section__inner,
  body.home .statement > .section__inner,
  body.home .cta > .section__inner,
  body.home .about-preview__copy {
    box-sizing: border-box;
    padding-left: var(--home-mobile-copy-gutter) !important;
    padding-right: var(--home-mobile-copy-gutter) !important;
  }
  body.home .about-preview__image { margin-left: 0 !important; margin-right: 0 !important; }

  body.home .site-footer {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    background: #0f0e0c !important;
  }
}

@media (max-width: 374px) {
  body.home .entrance-card .mobile-copy-precise { font-size: 13.2px !important; }
  body.home .entrance-card__link-mobile { font-size: 13px; letter-spacing: .04em; }
}

/* =========================================================
   v0.2.203 — MOBILE HOME / FIXED FILM VIEWPORT STABILITY
   The remaining hitch was not video decoding. iOS/Chrome emits height-only
   resize events when its browser UI returns on a fast upward swipe. The Hero
   keeps its one-time, width-gated height lock so the foreground document does
   not reflow during that transition. The fixed film must instead use `inset`
   as its only viewport constraint: combining top/bottom insets with that same
   explicit height can make WebKit resolve the fixed and document planes on
   different visual-viewport frames.
========================================================= */
@media (max-width: 767px) {
  body.home .hero.hero--video {
    height: var(--top-hero-mobile-h, 100svh) !important;
  }

  /* `vh` can track the visual viewport on iOS Chromium/WebKit. `svh` is the
     stable small viewport and does not change as the top/bottom browser bars
     animate back in. These cards sit above much of the document, so a height
     change here used to shift everything below them during reverse scrolling. */
  body.home .entrance-card {
    min-height: 76svh !important;
  }

  /* Avoid an extra blend-compositing pass as the header re-enters over HERO. */
  body.home .site-header {
    mix-blend-mode: normal !important;
  }
}


/* =========================================================
   v0.2.179 — DESKTOP HOME / RESTORE FULL-BLEED TOP FILM
   The continuous-film refactor intentionally moved the shared <video> before
   HERO so mobile could keep one decoder alive through the page. On desktop,
   however, that shared wrapper had no non-mobile positioning rule and remained
   an ordinary flex child of .site-main. The result was the recording-visible
   horizontal film strip above an otherwise black HERO.

   Desktop/tablet now treats that same wrapper as the HERO background plane:
   it is removed from flex flow, sized exactly to HERO, and the HERO itself is
   transparent so the original 1920x1080 / 24fps film can fill the viewport.
   No playback, source, crop, typography, or mobile scroll code is changed.
========================================================= */
@media (min-width: 768px) {
  body.home .site-main {
    position: relative;
  }

  body.home .home-film-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100svh;
    min-height: 650px;
    margin: 0;
    overflow: hidden;
    background: #000;
    pointer-events: none;
  }

  body.home .home-film-backdrop__viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body.home .home-film-backdrop__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    background: #000;
  }

  body.home .home-film-backdrop__still {
    display: none;
  }

  body.home .hero.hero--video {
    position: relative;
    z-index: 1;
    background: transparent;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  body.home .home-film-backdrop__video {
    display: none;
  }
  body.home .home-film-backdrop__still,
  body.home .home-film-backdrop__still img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  body.home .home-film-backdrop__still img {
    object-fit: cover;
    object-position: 50% 50%;
  }
}