/* Higgsfield plates (16 Oct 2026). Hero now; section plates are wired after the signature modules land. */
.plane-deep { background-image: url("../../shared/plates/plate-01-2400.webp"); background-position: right center; opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 52%); mask-image: linear-gradient(90deg, transparent 18%, #000 52%); }
.plane-mid, .plane-near { display: none; }
@media (max-width: 767px) {
  .plane-deep { background-image: url("../../shared/plates/plate-02-1280.webp"); background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 78%); mask-image: linear-gradient(180deg, transparent 52%, #000 78%); }
}

/* Section plates: one magenta object per room, sitting behind the content at low weight. */
.services { background: linear-gradient(180deg, var(--ink-0) 0%, transparent 18%, transparent 82%, var(--ink-0) 100%), url("../../shared/plates/plate-04-2400.webp") center / cover no-repeat; }
.band-toni { background: linear-gradient(90deg, var(--ink-1) 34%, oklch(0.16 0.006 358 / .55) 62%, transparent), url("../../shared/plates/plate-05-2400.webp") right center / cover no-repeat; }
.cities { background: linear-gradient(90deg, var(--ink-0) 30%, oklch(0.135 0.006 358 / .7) 55%, oklch(0.135 0.006 358 / .85)), url("../../shared/plates/plate-08-2400.webp") center bottom / cover no-repeat; }
.plane-close { background-image: url("../../shared/plates/plate-09-2400.webp"); opacity: .9; }
@media (max-width: 767px) {
  .services, .band-toni, .cities { background-size: auto 100%; }
}

/* Hero film: the real artwork with its sky filling on scroll. No data drawn over client work. */
.gl .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gl .hero-photo { clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.gl .hero-frame .seam, .gl .hero-frame .seam-tag { display: none; }
.hero-film { display: none; }
.gl .hero-film { display: block; }
/* The Idea: show the artwork as itself, no halftone half */
.idea-still .idea-dots, .idea-still .seam, .idea-still .seam-tag { display: none !important; }
.idea-still .idea-photo { clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; }

/* Everything below the sky (headline, road, logos) is always the client's own pixels: only the sky is generated. */
.hero-ground { display: none; }
.gl .hero-ground { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 70%); mask-image: linear-gradient(180deg, transparent 58%, #000 70%); }

/* How We Think: light gallery interlude */
.think { background: oklch(0.965 0.004 80); color: oklch(0.17 0.006 358); padding-block: clamp(88px, 13vh, 150px); }
.think .eyebrow { color: oklch(0.42 0.008 358); }
.think-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(32px, 5vh, 56px); }
.think figure { margin: 0; }
.think img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.think figcaption { margin-top: 16px; font: 700 clamp(1.2rem, 1.6vw, 1.6rem)/1.15 var(--f-display); letter-spacing: -0.01em; }
@media (max-width: 767px) {
  .think-row { grid-template-columns: 82%; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .think figure { scroll-snap-align: start; }
}
/* team room gets its monolith plate */
.team { background: linear-gradient(90deg, var(--ink-0) 38%, oklch(0.135 0.006 358 / .6) 70%, oklch(0.135 0.006 358 / .85)), url("../../shared/plates/plate-03-2400.webp") right center / cover no-repeat; }
/* phones: the idea figure plays the sky film on scroll */
.idea-still .idea-film { display: none; }
.no-gl .idea-still.has-film .idea-film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.no-gl .idea-still.has-film .idea-ground { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 70%); mask-image: linear-gradient(180deg, transparent 58%, #000 70%); }
.idea-still .idea-ground { display: none; }
.no-gl .idea-still.has-film .idea-photo { opacity: 0 !important; }

/* Brand kit: 'When Data Meets Art.' with Data and the full stop in Accent Pink #FF0A7A */
.hero-h .pk { font-style: normal; color: #FF0A7A; }

/* White space (Ramy, 16 Oct): paper sections flip the role tokens to the brand kit's light ground.
   Black #0D0D0D ink on Mist/white; the concrete rooms stay dark between them. */
.paper {
  --ink-0: oklch(0.975 0.003 358); --ink-1: oklch(0.945 0.004 358); --ink-2: oklch(0.915 0.005 358);
  --rule: oklch(0.84 0.006 358); --rule-soft: oklch(0.9 0.005 358);
  --fg: oklch(0.17 0.006 358); --fg-2: oklch(0.38 0.01 358); --fg-3: oklch(0.5 0.012 358);
  background: var(--ink-0); color: var(--fg);
}
.paper .eyebrow { color: var(--fg-2); }
.paper.services { background: var(--ink-0); }
/* the campaign agent stage stays a dark "screen" on the paper section */
.paper .sig-campaign-stage {
  --ink-0: oklch(0.135 0.006 358); --ink-1: oklch(0.165 0.008 358); --ink-2: oklch(0.21 0.01 358);
  --rule: oklch(0.34 0.012 358); --rule-soft: oklch(0.27 0.01 358);
  --fg: oklch(0.965 0.005 358); --fg-2: oklch(0.78 0.01 358); --fg-3: oklch(0.62 0.012 358);
  color: var(--fg);
}

/* Hero, 17 Oct (Ramy): solid headline, no point field; the Jeep film is a full-bleed banner, not a framed window. */
.gl .hero { height: auto; }
.gl .hero-plate, .gl [data-hero-canvas] { display: none; }
.gl .hero-h { color: oklch(0.965 0.005 358); -webkit-text-stroke: 0; }
.gl .hero-frame { left: 0; top: 0; width: 100%; height: 100%; transform: translate3d(0, 100%, 0); will-change: transform; background: var(--ink-0); }
.gl .hero-film, .gl .hero-ground { opacity: 1; }
.gl .idea { margin-top: 210vh; min-height: 0; padding-block: clamp(96px, 14vh, 168px); background: var(--ink-0); }
.gl .idea-copy { background: none; padding: 0; max-width: 560px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-h [data-line] { animation: hero-line 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-h [data-line]:nth-child(2) { animation-delay: .12s; }
  .hero .eyebrow, .hero-foot { animation: hero-line 1.4s cubic-bezier(.16, 1, .3, 1) .28s both; }
}
@keyframes hero-line { from { transform: translate3d(0, 0.5em, 0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Services, 17 Oct (Ramy): one photograph per service on a card that follows the pointer. Replaces the pixel field. */
.svc { position: relative; }
.svc-media { position: absolute; z-index: 3; left: 0; top: 0; right: auto; width: clamp(280px, 27vw, 440px); aspect-ratio: 4 / 3;
  overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); background: var(--ink-0);
  box-shadow: 0 30px 60px -28px oklch(0.17 0.006 358 / .45); }
.svc-media.show { opacity: 1; }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  opacity: 1; transform: scale(1.12); clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.svc-media img.on { clip-path: inset(0 0 0 0); transform: scale(1); }
.svc-media img.was { clip-path: inset(0 0 0 0); transform: scale(1); }
.svc-media.show img.on, .svc-media img.on { opacity: 1; }
@media (hover: none), (max-width: 1023px), (prefers-reduced-motion: reduce) { .svc-media { display: none; } }

/* Closing, 17 Oct (Ramy): no points or pixel field. The concrete plate fills the stage; the camera pushes in on scroll. */
.closing [data-close-canvas], .closing .close-plate, .closing .const-still { display: none; }
.closing .planes { inset: 0; }
.plane-close { inset: 0; left: 0; background-size: cover; background-position: 62% 50%; opacity: 1; -webkit-mask-image: none; mask-image: none; transform-origin: 70% 60%; will-change: transform; mix-blend-mode: normal; }
.closing-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, oklch(0.135 0.006 358 / .78) 0%, oklch(0.135 0.006 358 / .35) 42%, transparent 70%),
              linear-gradient(0deg, oklch(0.135 0.006 358 / .7) 0%, transparent 45%); }
.closing-inner { z-index: 1; }
/* the giant link: each line rolls up to its magenta twin on hover or focus */
.giant { background: none; padding-bottom: 0; }
.giant span { position: relative; overflow: hidden; width: max-content; }
.giant span b { display: block; font-weight: inherit; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.giant span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--accent); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.giant span:last-child::after { color: var(--fg); }
.giant span:nth-child(2) b, .giant span:nth-child(2)::after { transition-delay: .06s; }
.giant:hover span b, .giant:focus-visible span b, .giant:hover span::after, .giant:focus-visible span::after { transform: translate3d(0, -100%, 0); }
@media (prefers-reduced-motion: reduce) { .giant span b, .giant span::after { transition: none; } }

/* Hero, 17 Oct (Ramy): the Constellation writes the headline on clean black; the concrete plate steps back. */
.hero .planes, .hero .const-still { display: none; }
.hero-stage { background: #0d0c0d; }
.hero [data-hero-canvas] { display: block; }
.gl .hero-pin { height: 400vh; }
.gl .hero-intro { position: sticky; top: 0; }
.gl .hero-h [data-line] { animation: none; }   /* the Constellation reveals the line; sampling needs it at rest */

/* Phones (Ramy, 7 Nov): one more screen of hero so the painting holds longer and reads clearly; the intro copy
   steps aside while the painting is on screen (constellation.js toggles .art-on) and returns with the headline. */
@media (max-width: 767px) {
  .gl .hero-pin { height: 500vh; }
  .gl .idea { margin-top: 310vh; }
  .gl .hero-intro .eyebrow, .gl .hero-intro .hero-foot { transition: opacity .25s ease-out, visibility .25s; }
  .gl .hero-intro.art-on .eyebrow, .gl .hero-intro.art-on .hero-foot { animation: none; opacity: 0; visibility: hidden; }
  /* nothing of the copy shows before the Constellation is running (it was flashing the solid headline on slow phones) */
  .motion.gl .hero-intro:not(.cs-ready) .hero-h { clip-path: inset(0 100% 0 0); }
  .motion.gl .hero-intro:not(.cs-ready) .eyebrow, .motion.gl .hero-intro:not(.cs-ready) .hero-foot { opacity: 0; visibility: hidden; animation: none; }
  /* the Jeep film (Ramy, 7 Nov): a smaller widescreen box across the screen so the whole shot reads, not a cropped full-bleed */
  .gl .hero-frame { top: calc(50% - 28.125vw); height: 56.25vw; }
}