/* ============================================================
   Agency689 motion layer
   Scroll choreography, reveals, WebGL surface, menu, transitions.
   Everything here degrades to a static, fully readable page.
   ============================================================ */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-cyan: #00aeef;
}

/* ---------- tight-leading guard -------------------------------------
   Display type is set between .78 and .96 leading site-wide, so the glyph
   box is taller than the line box and the ink spills past the element on
   both edges. Wherever an ancestor clips overflow that sheared the tops off
   titles, and elsewhere it left them touching the rule above. Every display
   element reserves that overshoot plus real breathing room. */
.work-hero h1,
.work-entry-title,
.mw-hero__title,
.mw-field h2,
.mw-overview h1,
.client-slide-copy h2,
.artboard-opening h1,
.artboard-page h1,
.artboard-page h2,
.agency-hero h1,
.page-intro h1,
.agency-section__intro h2,
.agency-closing h2,
.philosophy-copy h2,
.service-row-copy h2,
.services-copy h2,
.closing-copy h2,
.home-about-teaser h2,
.brand-list-copy h2,
.featured-works-panel h2,
.ai-hero h1,
.ai-section__intro h2,
.mw-section-title,
.work-example-card strong {
  padding-block: .26em .3em;
}

/* ---------- reveal primitives --------------------------------------- */
.m-line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.m-line {
  display: block;
  will-change: transform;
}

[data-m-fade] {
  will-change: transform, opacity;
}

/* image reveal frame */
[data-m-img] {
  overflow: hidden;
}

[data-m-img] > img,
[data-m-img] > video {
  will-change: transform;
}

/* velocity skew wrapper never affects layout */
[data-m-skew] {
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- WebGL hero surface --------------------------------------- */
.m-gl {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}

.m-gl.is-live {
  opacity: 1;
}

/* when the shader is driving, hide the raw video but keep it decoding */
.artboard-video-section.is-gl video {
  opacity: 0;
}

/* ---------- page transition veil ------------------------------------- */
/* Page transitions.

   These used to be a black slab, built in JavaScript, that covered the screen
   on the way out and uncovered on the way in. Because the slab was created by
   a deferred script, the incoming page painted first and the slab then appeared
   over it and animated away, so every navigation ended in a black flash. It also
   carried a full-width wordmark, which was louder than anything else on the site.

   The browser can do this properly. A cross-document view transition crossfades
   the real pages with no flash and no script. Browsers without it navigate
   normally, and a short scripted fade covers the way out there. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: a689-leave .26s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: a689-enter .42s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes a689-leave {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes a689-enter {
  from { opacity: 0; transform: translateY(8px); }
}

/* the scripted fallback, used only where view transitions are unavailable */
.m-leaving {
  opacity: 0;
  transition: opacity .18s linear;
}

/* ============================================================
   Menu
   ============================================================ */
.site-menu-panel {
  --menu-pad: clamp(26px, 4.4vw, 74px);
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  z-index: 9002;
  width: 100vw;
  height: 100svh;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: 1fr auto;
  align-content: stretch;
  gap: 0;
  padding: clamp(96px, 12vh, 150px) var(--menu-pad) var(--menu-pad);
  border-radius: 0;
  background: #070707;
  color: #fff;
  box-shadow: none;
  overflow: hidden auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: none;
}

:root.is-menu-open .site-menu-panel {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

/* ambient cyan wash that tracks the pointer */
.site-menu-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38vw 38vw at var(--mx, 70%) var(--my, 22%),
      rgba(0, 174, 239, .20), transparent 62%);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}

:root.is-menu-open .site-menu-panel::before {
  opacity: 1;
}

/* fine grid so the black never reads as flat */
.site-menu-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 5.2rem,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 5.2rem 100%;
  mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent 78%);
  pointer-events: none;
}

.site-menu-links {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2px, .5vh, 10px);
  align-content: center;
}

.site-menu-links > a {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: .04em 0;
  color: #fff;
  font-family: var(--font-primary);
  /* sized so all seven fit one column without wrapping at any width */
  font-size: clamp(26px, 3.9vw, 58px);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -.045em;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: none;
}

.site-menu-links > a .nav-letter {
  display: inline-block;
  will-change: transform, opacity;
}

/* hairline that draws in on hover */
.site-menu-links > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .12em;
  width: 100%;
  height: 1px;
  background: var(--m-cyan);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .62s var(--m-ease);
}

.site-menu-links > a:hover::after,
.site-menu-links > a:focus-visible::after,
.site-menu-links > a.is-active::after {
  transform: scaleX(1);
}

.site-menu-links > a:hover {
  color: #fff;
}

.site-menu-links > a.is-active,
.site-menu-projects a.is-active {
  color: var(--m-cyan);
}

.site-menu-links > a:focus-visible,
.site-menu-projects a:focus-visible {
  outline: none;
  color: var(--m-cyan);
}

/* dim the siblings of whatever is hovered */
.site-menu-links.is-hovering > a:not(:hover) {
  color: rgba(255, 255, 255, .32);
}

.site-menu-links.is-hovering > a.is-active:not(:hover) {
  color: var(--m-cyan);
}

.site-menu-links > a,
.site-menu-links.is-hovering > a:not(:hover) {
  transition: color .45s ease;
}

/* ---------- project column ---------- */
.site-menu-projects {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 30px);
  width: 100%;
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, .14);
  opacity: 1;
  transform: none;
  transition: none;
  align-content: center;
}

.site-menu-project-group {
  display: grid;
  gap: 2px;
  align-content: start;
}

.site-menu-project-label {
  margin: 0 0 clamp(6px, .7vw, 10px);
  color: rgba(255, 255, 255, .34);
  font-family: var(--font-primary);
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.site-menu-projects a {
  position: relative;
  padding: .3em 0;
  color: rgba(255, 255, 255, .52);
  font-family: var(--font-primary);
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .32s ease, transform .45s var(--m-ease);
}

.site-menu-projects a:hover,
.site-menu-projects a:focus-visible {
  color: #fff;
  transform: translateX(6px);
  outline: none;
}

.site-menu-projects a.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

/* hover preview thumbnail */
.m-menu-preview {
  position: fixed;
  z-index: 4;
  width: clamp(200px, 20vw, 320px);
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.94);
  will-change: transform, opacity;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}

.m-menu-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- meta row ---------- */
.site-menu-meta {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px clamp(24px, 4vw, 80px);
  padding-top: clamp(20px, 3vh, 40px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.site-menu-meta > div {
  opacity: 1;
  transform: none;
  transition: none;
}

.site-menu-meta h2 {
  margin: 0 0 .5em;
  color: rgba(255, 255, 255, .42);
  font: 600 11px/1 var(--font-primary);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-menu-meta a {
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 300;
  letter-spacing: -.01em;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 3px;
  transition: border-color .35s ease, color .35s ease;
}

.site-menu-meta a:hover,
.site-menu-meta a:focus-visible {
  color: var(--m-cyan);
  border-bottom-color: var(--m-cyan);
  outline: none;
}

@media (max-width: 900px) {
  .site-menu-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow-y: auto;
    padding-top: clamp(88px, 14vh, 120px);
  }

  .site-menu-links { align-self: start; }

  .site-menu-projects {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: clamp(22px, 4vh, 40px);
    padding-left: 0;
    padding-top: clamp(18px, 3vh, 28px);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .site-menu-meta { grid-row: 3; }
  .m-menu-preview { display: none; }
}

/* ============================================================
   Reduced motion: everything resolves to its final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .m-gl { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }

  .m-leaving { transition: none; }

  .m-line,
  [data-m-fade],
  [data-m-img] > img,
  [data-m-img] > video {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }

  .site-menu-panel {
    transition: opacity .2s linear;
  }
}

/* ============================================================
   Case-study hero: credits move below the image
   The hud and services line were absolutely positioned over the
   artwork. They now sit in their own rows underneath it, in page ink.
   ============================================================ */
.mw-hero {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: end;
  padding: 0;
  overflow: visible;
}

/* row 1 stacks artwork, title and statement */
.mw-hero__media,
.mw-hero__title,
.mw-hero__statement {
  grid-area: 1 / 1;
}

.mw-hero__media {
  position: relative;
  inset: auto;
  z-index: 0;
  height: min(78svh, 840px);
  min-height: 340px;
}

.mw-hero__title {
  z-index: 2;
  align-self: end;
  margin: 0;
  padding: 0 clamp(20px, 3vw, 52px) clamp(16px, 2.2vw, 38px);
}

.mw-hero__statement {
  /* the page CSS positions this absolutely; it has to join the grid or it
     lands past the artwork now that the hero has rows beneath it */
  position: relative;
  inset: auto;
  z-index: 2;
  align-self: end;
  justify-self: end;
  margin: 0;
  padding: 0 clamp(20px, 3vw, 52px) clamp(20px, 2.4vw, 44px);
}

.mw-back {
  z-index: 3;
}

/* rows 2 and 3: the credits, now readable against the page */
.mw-meta {
  position: static;
  grid-area: 2 / 1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2vw, 26px) clamp(20px, 3vw, 52px) 0;
  color: var(--mw-ink, #050505);
  text-align: left;
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.45;
}

.mw-hero__hud {
  position: static;
  inset: auto;
  grid-area: 3 / 1;
  padding: clamp(10px, 1.2vw, 16px) clamp(20px, 3vw, 52px) clamp(20px, 2.4vw, 34px);
  color: var(--mw-soft, rgba(5, 5, 5, .56));
}

.mw-hero__hud span {
  border-top-color: var(--mw-line, rgba(5, 5, 5, .18));
}

@media (max-width: 900px) {
  /* there is not enough room for the title and the statement to share the
     artwork, so the statement drops below it with the rest of the credits */
  .mw-hero {
    grid-template-rows: auto auto auto auto;
  }

  .mw-hero__media { height: min(62svh, 560px); }

  .mw-hero__statement {
    grid-area: 2 / 1;
    justify-self: start;
    align-self: start;
    width: auto;
    max-width: none;
    padding: clamp(18px, 4vw, 26px) clamp(20px, 5vw, 32px) 0;
    color: var(--mw-ink, #050505);
    text-shadow: none;
  }

  .mw-hero__statement p {
    color: inherit;
  }

  .mw-meta { grid-area: 3 / 1; padding-top: clamp(14px, 3vw, 20px); }
  .mw-hero__hud {
    grid-area: 4 / 1;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mw-hero__hud span:nth-child(2),
  .mw-hero__hud span:nth-child(3) { text-align: left; }
}

/* ============================================================
   Responsive display type
   The site sets large clamp() floors, which overflow narrow
   viewports. These floors scale with the viewport instead.
   ============================================================ */
body[data-page="artboard"] .artboard-page h1 {
  font-size: clamp(44px, 12vw, 168px);
}

.artboard-opening .work-tags {
  padding-block: .12em .22em;
  max-width: min(100%, 34ch);
}

/* case-study display titles */
.mw-hero__title {
  font-size: clamp(48px, 12.5vw, 238px);
}

/* work index entry titles */
.work-entry-title {
  font-size: clamp(40px, 7vw, 132px);
}

.work-hero h1 {
  font-size: clamp(40px, 8.5vw, 156px);
}

@media (max-width: 560px) {
  body[data-page="artboard"] .artboard-page h2,
  .agency-hero h1,
  .page-intro h1 {
    font-size: clamp(34px, 10.5vw, 132px);
  }

  .closing-copy h2,
  .philosophy-copy h2,
  .service-row-copy h2 {
    font-size: clamp(32px, 10vw, 138px);
  }
}


/* ---------- work index rows: air under the divider ------------------- */
.work-entry:not(.work-entry--grid) {
  padding-top: clamp(26px, 2.6vw, 52px);
}

.work-entry-title {
  /* The copy column is bottom-anchored, so bottom padding pushes the whole
     block up and steals the clearance under the divider. There is ample room
     below the title, so the reserve goes on top where the ink actually spills. */
  padding-block: .3em .04em;
  margin-top: 0;
}

/* The copy column is bottom-aligned, so its large top padding ate the space
   a three-line title needs and pushed the ink out through the top of the
   row. Trim it and let the column keep its own breathing room instead. */
.work-entry-copy {
  padding-top: clamp(18px, 2vw, 40px);
  align-content: end;
  row-gap: clamp(10px, 1.2vw, 20px);
}

/* ---------- section marker rule -------------------------------------- */
.m-marker {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
}

.m-marker__rule {
  flex: 1 1 auto;
  height: 1px;
  max-width: clamp(60px, 14vw, 240px);
  background: currentColor;
  opacity: .28;
  transform-origin: 0 50%;
}

/* counters must not reflow while the digits change */
.pc-proof-band strong,
.proof-figure,
.ai-proof-band strong,
.pc-feature__proof strong {
  font-variant-numeric: tabular-nums;
}

/* parallax frames need to clip their drifting image */
.pc-feature__image,
.ai-system-visual {
  overflow: hidden;
}

/* these section labels were <h5> purely for their size, which put an h5
   between the h1 and the h2s and broke the heading outline. They are now
   <p> and inherit the same treatment. */
p.philosophy-label,
p.more-work-label,
p.what-we-do-label,
p.closing-label {
  font: var(--type-h5);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- background video pause control (WCAG 2.2.2) -------------- */
.m-video-toggle {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 6;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s ease, border-color .3s ease, background-color .3s ease;
}

.m-video-toggle:hover,
.m-video-toggle:focus-visible {
  opacity: 1;
  border-color: #fff;
  background: rgba(0, 0, 0, .62);
  outline: none;
}

.m-video-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 174, 239, .7);
}

/* two bars = pause; swaps to a triangle when the video is stopped */
.m-video-toggle__icon,
.m-video-toggle__icon::after {
  display: block;
  width: 3px;
  height: 13px;
  background: #fff;
}

.m-video-toggle__icon {
  position: relative;
  margin-left: -4px;
}

.m-video-toggle__icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
}

.m-video-toggle.is-paused .m-video-toggle__icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  background: transparent;
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.m-video-toggle.is-paused .m-video-toggle__icon::after { display: none; }

/* ---------- persistent header ---------------------------------------
   The header no longer hides on scroll down, so it needs to hold its own
   against whatever passes beneath it. */
.site-header {
  transform: none !important;
  transition: background-color .35s ease, backdrop-filter .35s ease,
              box-shadow .35s ease, border-color .35s ease;
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, .82);
  backdrop-filter: saturate(1.1) blur(14px);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -30px rgba(0, 0, 0, .9);
}

/* ---------- contact form ---------------------------------------------
   Honeypot: off-screen rather than display:none, since some bots skip
   hidden inputs but will happily fill this one. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status[data-state="sending"] { opacity: .7; }

.form-status[data-state="ok"] {
  border-left: 3px solid #1c7a45;
  padding-left: 14px;
}

.form-status[data-state="error"] {
  border-left: 3px solid #b3261e;
  padding-left: 14px;
}