@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap');

:root {
  --paper: #ededed;
  --ink: #202020;
  --pink: #fb0155;
  --viewport-h: 100svh;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: fixed;
  z-index: 30;
  top: clamp(1.25rem, 2.2vw, 2.4rem);
  left: clamp(1.4rem, 3.2vw, 4rem);
  right: clamp(1.4rem, 3.2vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease, color .35s ease;
}
.site-header.header-hidden { transform: translateY(calc(-100% - 3rem)); opacity: 0; }
.site-header a, .site-header button { pointer-events: auto; }
.site-logo { display: block; width: clamp(120px, 9vw, 175px); aspect-ratio: 2172 / 872; overflow: hidden; }
.site-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.header-shell {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem;
  border: 1px solid rgba(20, 20, 20, .9);
  border-radius: 2.7rem;
  color: #171717;
  background: transparent;
  box-shadow: none;
}
.desktop-nav { display: flex; align-items: center; gap: .15rem; }
.desktop-nav a, .schedule-call { color: inherit; text-decoration: none; }
.desktop-nav a { padding: .78rem 1rem; border-radius: 1.25rem; font-size: clamp(.82rem, .95vw, 1.05rem); font-weight: 500; transition: background .25s ease, color .25s ease; }
.desktop-nav a:hover { background: rgba(0,0,0,.06); }
.desktop-nav .nav-contact { margin-left: .15rem; padding-inline: 1.25rem; border: 1px solid rgba(20,20,20,.9); }
.schedule-call {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  padding: .58rem .9rem .58rem 1.2rem;
  border: 1px solid rgba(20,20,20,.9);
  border-radius: 1.65rem;
  color: #16151a;
  background: transparent;
  box-shadow: none;
  font-size: clamp(.88rem, 1vw, 1.08rem);
  white-space: nowrap;
}
.schedule-arrow { color: #6b43ff; font-size: 1.6rem; line-height: .7; transform: translateY(-1px); }
.schedule-label--mobile { display: none; }
.mobile-menu-button { display: none; }
.mobile-menu { display: none; }
body.menu-open { overflow: hidden; }

.faq-section {
  position: relative;
  z-index: 5;
  scroll-margin-top: 7rem;
  padding: clamp(7.5rem, 12vh, 10rem) 6vw clamp(6rem, 10vh, 8rem);
  overflow: hidden;
  color: #f7f7f5;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.045), transparent 27%),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.028), transparent 34%),
    #000000;
}
.faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  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: 5rem 5rem;
  mask-image: radial-gradient(circle at center, #000, transparent 75%);
}
.faq-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin: 0 auto;
  text-align: center;
}
.faq-kicker {
  display: inline-flex;
  margin: 0;
  padding: .5rem 1.15rem;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.018);
  box-shadow: 0 0 2rem rgba(255,255,255,.025);
  font-size: clamp(.72rem, .85vw, .9rem);
}
.faq-inner h2 {
  margin: clamp(1.15rem, 2.2vh, 1.8rem) auto .75rem;
  font-size: clamp(2.3rem, 3.05vw, 3.9rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}
.faq-intro {
  margin: 0 auto;
  color: rgba(255,255,255,.78);
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  line-height: 1.45;
}
.faq-list {
  display: grid;
  gap: .8rem;
  margin-top: clamp(3rem, 6vh, 5rem);
  text-align: left;
}
.faq-item {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 1.55rem;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 2.6rem rgba(255,255,255,.012), 0 .8rem 2.5rem rgba(0,0,0,.12);
  transition: border-color .3s ease, background-color .3s ease;
}
.faq-item:hover,
.faq-item.is-open {
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.035);
}
.faq-question {
  width: 100%;
  min-height: 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem 1rem .9rem 1.55rem;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.faq-question:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: -4px;
  border-radius: inherit;
}
.faq-toggle {
  position: relative;
  width: 3.1rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: #000;
  background: #fff;
  box-shadow: 0 .35rem 1.4rem rgba(255,255,255,.16);
}
.faq-toggle i {
  position: absolute;
  width: 1.05rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.faq-toggle i:last-child { transform: rotate(90deg); }
.faq-item.is-open .faq-toggle i:first-child { transform: rotate(45deg); }
.faq-item.is-open .faq-toggle i:last-child { transform: rotate(135deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility .55s;
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}
.faq-answer-inner { overflow: hidden; }
.faq-answer p {
  max-width: 76ch;
  margin: 0;
  padding: 0 6rem 1.55rem 1.55rem;
  color: rgba(255,255,255,.72);
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.55;
}

/* Laptop: keep the complete FAQ comfortably inside a normal viewport. */
@media (min-width: 701px) and (max-width: 1600px) {
  .faq-section {
    padding: clamp(5.25rem, 8.4vh, 7rem) 6vw clamp(4.2rem, 7vh, 5.6rem);
  }
  .faq-inner { width: min(78vw, 880px); }
  .faq-kicker { padding: .38rem .9rem; font-size: .72rem; }
  .faq-inner h2 {
    margin: .85rem auto .55rem;
    font-size: clamp(1.85rem, 2.55vw, 3rem);
  }
  .faq-intro { font-size: clamp(.8rem, .82vw, .95rem); }
  .faq-list { gap: .56rem; margin-top: clamp(2rem, 4.2vh, 3.5rem); }
  .faq-item { border-radius: 1.1rem; }
  .faq-question {
    min-height: 3.5rem;
    gap: 1rem;
    padding: .62rem .7rem .62rem 1.1rem;
    font-size: clamp(.82rem, .86vw, 1rem);
  }
  .faq-toggle { width: 2.35rem; }
  .faq-toggle i { width: .8rem; }
  .faq-answer p {
    padding: 0 4.2rem 1.05rem 1.1rem;
    font-size: clamp(.78rem, .72vw, .9rem);
  }
}

/* FAQ — desktop/laptop two-column layout: laptop gallery (left) + accordion (right).
   Gallery hidden by default; mobile/tablet below 1024px is untouched. */
.faq-gallery { display: none; }

@media (min-width: 1024px) {
  .faq-inner { width: min(90vw, 1240px); }

  .faq-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    margin-top: clamp(4.5rem, 9vh, 7rem);
  }

  .faq-gallery {
    display: flex;
    flex: 0 0 auto;
    width: 37%;
    max-width: 430px;
    height: clamp(460px, 52vh, 660px);
    gap: .7rem;
    overflow: hidden;
    border-radius: 1.5rem;
  }
  .faq-gallery-col {
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  }
  .faq-gallery-track {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    animation: faqGalleryUp 20s linear infinite;
  }
  .faq-gallery-track--reverse {
    animation-name: faqGalleryDown;
  }
  .faq-gallery-shot {
    flex-shrink: 0;
    aspect-ratio: 4 / 5;
    border-radius: 1rem;
    overflow: hidden;
  }
  .faq-gallery-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @keyframes faqGalleryUp {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
  }
  @keyframes faqGalleryDown {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
  }

  .faq-content .faq-list {
    flex: 1 1 48%;
    max-width: 620px;
    margin-top: 0;
  }
}

.contact-section {
  position: relative;
  min-height: 70svh;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 6vh, 5rem) 6vw;
  overflow: hidden;
  color: #f7f7f5;
  background:
    radial-gradient(circle at 50% 115%, rgba(255,255,255,.055), transparent 42%),
    #000000;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
}
.contact-card {
  position: relative;
  z-index: 1;
  width: min(70vw, 1120px);
  padding: clamp(2.5rem, 4.5vh, 3.4rem) clamp(2.5rem, 5vw, 5rem);
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 1.6rem;
  background: rgba(255,255,255,.018);
  box-shadow: inset 0 0 3rem rgba(255,255,255,.012);
  text-align: center;
}
.contact-kicker {
  display: inline-flex;
  margin: 0;
  padding: .55rem 1.35rem;
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.015);
  box-shadow: 0 0 2rem rgba(255,255,255,.035);
  font-size: clamp(.72rem, .9vw, .95rem);
}
.contact-card h2 {
  max-width: none;
  margin: clamp(1.15rem, 2vh, 1.7rem) auto .75rem;
  font-size: clamp(2.6rem, 3.15vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 500;
}
.contact-card h2 span { display: block; white-space: nowrap; }
.contact-copy {
  max-width: 37ch;
  margin: 0 auto clamp(1.1rem, 2vh, 1.65rem);
  color: rgba(255,255,255,.92);
  font-size: clamp(.86rem, 1vw, 1.05rem);
  line-height: 1.35;
}
.contact-form {
  width: min(100%, 520px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem;
  border: 1px solid rgba(255,255,255,.025);
  border-radius: 2.2rem;
  background: rgba(255,255,255,.012);
  box-shadow: inset 0 0 2.5rem rgba(255,255,255,.018);
}
.contact-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.85rem;
  padding: .75rem 1.2rem;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: clamp(.85rem, 1vw, 1rem);
}
.contact-form input::placeholder { color: rgba(255,255,255,.26); opacity: 1; }
.contact-form button {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.85rem;
  padding: .75rem 1.6rem;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: #fff;
  box-shadow: 0 .4rem 1.6rem rgba(255,255,255,.14);
  font: inherit;
  font-size: clamp(.82rem, 1vw, 1rem);
  cursor: pointer;
}

/* The visible hero is a canvas frame sequence, never a playing <video>. */
#gwHeroSection { position: relative; height: calc(var(--viewport-h) + var(--hero-scroll-distance, 3400px)); background: #eaeaea; }
#gwHeroPin { position: sticky; top: 0; width: 100%; height: var(--viewport-h); overflow: hidden; background: #eaeaea; }
#gwHeroTrack { display: flex; width: max-content; height: 100%; will-change: transform; }
.gw-hero-panel { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; background: #eaeaea; will-change: width; isolation: isolate; }
.gw-hero-panel::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: var(--newspaper-wash, 0);
  background: #f5f5f3;
  -webkit-backdrop-filter: blur(var(--newspaper-blur, 0px));
  backdrop-filter: blur(var(--newspaper-blur, 0px));
  transition: opacity .06s linear;
}
#gwHeroCanvas { display: block; width: 100vw; height: 100%; will-change: transform; }
#gwHeroLoader { position: absolute; inset: 0; background: #eaeaea; opacity: 1; transition: opacity .35s ease; pointer-events: none; }
#gwHeroLoader.is-hidden { opacity: 0; }

.desktop-work-panel { position: relative; flex: none; width: max(150vw, 2450px); height: 100%; overflow: hidden; background: var(--paper); }
.desktop-work-panel .work-content { padding-left: 5.5vw; }
.desktop-work-panel .work-content h1 { font-size: clamp(2.6rem, 3.6vw, 4.6rem); line-height: .96; }
.desktop-work-grid { gap: clamp(.85rem, 1.2vw, 1.5rem); }
.desktop-work-grid .project-card { width: clamp(230px, 16vw, 330px); height: auto; aspect-ratio: 2 / 3; }

.work-story { display: none; position: relative; height: calc(var(--viewport-h) + var(--work-distance, 2200px)); background: var(--paper); }
.work-story__sticky { position: sticky; top: 0; height: var(--viewport-h); overflow: hidden; }
.work-art { display: none; }
.work-art span { position: absolute; width: 36vw; aspect-ratio: 1; border: clamp(4rem, 8vw, 9rem) solid rgba(255,255,255,.75); border-radius: 50%; }
.work-art span:nth-child(1) { left: 4%; top: -24%; }
.work-art span:nth-child(2) { left: 38%; bottom: -42%; border-color: rgba(255,7,95,.07); }
.work-art span:nth-child(3) { right: 0; top: -20%; }

.work-content { position: relative; z-index: 1; height: 100%; padding: clamp(6.5rem, 12vh, 9rem) 5.5vw 3rem; will-change: transform; }
.work-content h1 { margin: 0 0 clamp(2rem, 4.5vh, 4rem); max-width: 15ch; font-size: clamp(3.5rem, 5.3vw, 6.7rem); line-height: .94; letter-spacing: -.065em; font-weight: 700; }
.work-content h1 em { color: var(--pink); font-style: normal; }
.work-grid { display: flex; width: max-content; gap: clamp(1rem, 1.8vw, 2.2rem); margin: 0; padding: 0; list-style: none; will-change: transform; }
.project-card { flex: none; width: clamp(330px, 23.5vw, 470px); height: clamp(390px, 51vh, 570px); overflow: hidden; border-radius: clamp(1rem, 1.8vw, 2.2rem); background: #d8d8d5; }
.project-card--video { background:#000000; }
.project-card img,
.project-card video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1); transition: transform .55s cubic-bezier(.2,.75,.25,1); will-change: transform; }

@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .project-card:hover img,
  .project-card:hover video { transform: scale(1.055) !important; }
}

.results-story { position: relative; height: calc(100svh + 1100px); color: #fff; background: #000000; }
.results-pin { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; background: #000000; }
.results-heading { position: absolute; z-index: 1; top: 18vh; left: 8vw; width: 7ch; font-size: clamp(5rem, 10vw, 12rem); line-height: .78; text-transform: uppercase; transform-origin: left top; will-change: transform, opacity; }
.results-heading span, .results-heading strong { display: block; font-weight: 500; }
.results-heading strong { margin-left: 1.4em; }
.results-deck { position: absolute; z-index: 3; inset: 34vh 5vw 5vh 8vw; display: grid; place-items: center; perspective: 1600px; }
.result-card {
  position: absolute;
  width: min(76vw, 980px);
  height: min(75vh, 720px);
  min-height: 540px;
  padding: clamp(1.4rem, 2.5vw, 2.8rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 0 clamp(3rem, 7vw, 8rem) 0 0;
  color: #fff;
  background:
    radial-gradient(circle at 105% 100%, rgba(255,0,155,.8), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(0,188,255,.48), transparent 35%),
    linear-gradient(120deg, #000000 15%, #252126 72%, #000000);
  box-shadow: -1rem .6rem 2rem rgba(0,0,0,.45);
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .45s ease;
  will-change: transform, opacity;
}
.result-brand { margin: 0 0 1.5rem; font-size: clamp(1.1rem, 2vw, 2rem); font-weight: 700; letter-spacing: .05em; }
.result-card img { display: block; width: min(52%, 520px); height: 35%; margin: 0 auto 1.2rem; border-radius: .5rem; object-fit: cover; }
.result-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.result-copy strong { font-size: clamp(4rem, 8vw, 9rem); line-height: .82; letter-spacing: -.07em; font-weight: 500; color: #6e5cff; }
.result-copy span { max-width: 19ch; padding-bottom: .4rem; font-size: clamp(1.15rem, 2vw, 2rem); line-height: 1.05; }
.result-card > a { position: absolute; left: clamp(1.4rem, 2.5vw, 2.8rem); bottom: clamp(1.4rem, 2.5vw, 2.8rem); display: flex; justify-content: space-between; width: min(16rem, 42%); padding: .8rem 1.2rem; border: 1px solid #fff; border-radius: 999px; color: #fff; text-decoration: none; }
.results-next { position: absolute; z-index: 10; right: 9vw; bottom: 9vh; width: 4rem; aspect-ratio: 1; border: 1px solid #fff; border-radius: 50%; color: #fff; background: transparent; font-size: 1.8rem; cursor: pointer; }
.partners-section { min-height: 100svh; padding: 12vh 8vw; color: #fff; background: #000000; }
.partners-section > p { margin: 0 0 10vh; font-size: clamp(3.2rem, 8vw, 9rem); line-height: .82; text-transform: uppercase; }
.partners-section strong { margin-left: .8em; font-weight: 500; }
.partner-cloud { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; text-align: center; }
.partner-cloud span { font-size: clamp(.8rem, 1.7vw, 1.8rem); font-weight: 700; }
.site-header.is-on-dark .header-shell { border-color: rgba(255,255,255,.9); color: #fff; }
.site-header.is-on-dark .desktop-nav .nav-contact, .site-header.is-on-dark .schedule-call { border-color: rgba(255,255,255,.9); color: #fff; }
.site-header.is-on-dark .mobile-menu-button span { background: #fff; }

@media (max-width: 700px) {
  .site-header { top: max(1rem, env(safe-area-inset-top)); left: 5vw; right: 5vw; }
  .site-logo { width: 31vw; max-width: 138px; height: auto; }
  .header-shell { gap: .35rem; padding: .42rem; border: 1px solid rgba(20,20,20,.9); border-radius: 1.65rem; color: var(--ink); background: transparent; box-shadow: none; }
  .desktop-nav { display: none; }
  .schedule-label--desktop { display: none; }
  .schedule-label--mobile { display: inline; }
  .schedule-call { min-height: 2.85rem; padding: .55rem .8rem; border: 1px solid #c7c7c5; border-radius: 1.35rem; background: transparent; box-shadow: none; font-size: clamp(.72rem, 3.2vw, .9rem); }
  .schedule-arrow { display: none; }
  .mobile-menu-button { display: grid; width: 3.05rem; height: 2.85rem; padding: .7rem .55rem; border: 0; background: transparent; place-content: center; gap: .45rem; }
  .mobile-menu-button span { display: block; width: 1.9rem; height: 3px; border-radius: 999px; background: #1d1d1d; }
  .mobile-menu-button span { transition: transform .35s ease; }
  .mobile-menu-button.is-open span:first-child { transform: translateY(5px) rotate(45deg); }
  .mobile-menu-button.is-open span:last-child { transform: translateY(-5px) rotate(-45deg); }
  .mobile-menu {
    position: fixed; z-index: 29; top: max(5.8rem, calc(env(safe-area-inset-top) + 4.8rem)); left: 28vw; right: 5vw;
    display: flex; flex-direction: column; padding: 1rem 1.25rem;
    border: 1px solid rgba(20,20,20,.1); border-radius: 2rem; color: #171717;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    box-shadow: 0 1.2rem 3rem rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(-1rem) scale(.98); transform-origin: top right;
    transition: opacity .3s ease, visibility .3s ease, transform .5s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.4rem;
    padding: .35rem 2rem .35rem .15rem;
    border-bottom: 1px solid #cececc;
    color: inherit;
    text-decoration: none;
    font-size: clamp(1.05rem, 4.8vw, 1.4rem);
    line-height: 1;
    letter-spacing: -.025em;
  }
  .mobile-menu nav a:last-child { border-bottom: 0; }
  .mobile-menu nav a::after { content: '\2197'; position: absolute; right: .25rem; top: 50%; transform: translateY(-55%); font-size: 1.25rem; }
  #gwHeroSection { height: calc(var(--viewport-h) + var(--hero-mobile-distance, 120vh)); }
  #gwHeroTrack { width: 100%; transform: none !important; }
  .desktop-work-panel { display: none; }
  .work-story { z-index: 4; display: block; margin-top: calc(var(--viewport-h) * -1); background: transparent; }
  .work-story__sticky {
    border-radius: 2rem 2rem 0 0;
    background: rgba(239,239,237,var(--mobile-panel-wash,0));
    -webkit-backdrop-filter: blur(var(--mobile-panel-blur,0px));
    backdrop-filter: blur(var(--mobile-panel-blur,0px));
    transform: translate3d(0,var(--mobile-panel-y,100%),0);
    will-change: transform, backdrop-filter, background-color;
  }
  .work-content { padding: max(4.5rem, 9svh) 7vw max(1.3rem, env(safe-area-inset-bottom)); }
  .work-content h1 { margin-bottom: 7svh; max-width: 11ch; font-size: clamp(2.65rem, 11.5vw, 4.4rem); line-height: 1.07; letter-spacing: -.055em; }
  .mobile-work-title { max-width: none !important; font-size: clamp(2.15rem, 9.2vw, 3.3rem) !important; line-height: 1.12 !important; letter-spacing: -.045em !important; }
  .mobile-work-title span, .mobile-work-title em { display: block; white-space: nowrap; }
  .work-grid { gap: 4vw; }
  .project-card { width: 76vw; height: 47svh; border-radius: 1.5rem; }
  .project-card img,
  .project-card video { transform: scale(1.1); transition: none; }
  .results-story { height: 100svh; min-height: 760px; }
  .results-pin { min-height: 0; }
  .results-heading { display: none; }
  .results-deck { inset: 5.5svh 7vw 8svh; place-items: end center; }
  .result-card { width: 84vw; height: 76svh; min-height: 0; padding: 1.25rem; border-radius: 0 4rem 0 0; }
  .result-brand { margin-bottom: 1rem; font-size: 1.25rem; }
  .result-card img { width: 88%; height: 30%; margin-bottom: 1rem; }
  .result-copy { display: block; }
  .result-copy strong { display: block; font-size: clamp(4rem, 18vw, 6.3rem); }
  .result-copy span { display: block; margin-top: .6rem; font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .result-card > a { width: 47%; padding: .65rem .9rem; font-size: .82rem; }
  .results-next { right: 9vw; bottom: 10svh; width: 3.2rem; }
  .partners-section { padding: 12svh 8vw; }
  .partners-section > p { font-size: 12vw; }
  .partner-cloud { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.2rem; }
  .site-header.is-on-dark .header-shell { background: rgba(5,5,5,.3); }
  .faq-section {
    scroll-margin-top: 6rem;
    padding: max(4.5rem, 8svh) clamp(.9rem, 4vw, 1.15rem) max(2rem, env(safe-area-inset-bottom));
  }
  .faq-kicker {
    padding: .38rem .95rem;
    font-size: .7rem;
  }
  .faq-inner h2 {
    max-width: none;
    margin: .9rem auto .6rem;
    font-size: clamp(2rem, 8.6vw, 2.7rem);
    line-height: .96;
    letter-spacing: -.05em;
  }
  .faq-inner h2 .faq-title-line2 { display: block; }
  .faq-intro { max-width: 27ch; font-size: clamp(.82rem, 3.7vw, .98rem); line-height: 1.35; }
  .faq-list { gap: .55rem; margin-top: 2rem; }
  .faq-item { border-radius: 1.25rem; }
  .faq-question {
    min-height: 4rem;
    gap: .75rem;
    padding: .7rem .7rem .7rem 1rem;
    font-size: clamp(.88rem, 3.9vw, 1.05rem);
    line-height: 1.18;
  }
  .faq-toggle { width: clamp(2.45rem, 10.5vw, 2.8rem); }
  .faq-toggle i { width: .9rem; }
  .faq-answer p {
    max-width: none;
    padding: 0 1rem 1rem;
    font-size: clamp(.82rem, 3.6vw, .95rem);
    line-height: 1.42;
  }
  .contact-section {
    min-height: auto;
    padding: max(6.5rem, 9svh) 5vw max(2.4rem, env(safe-area-inset-bottom));
    background: #000000;
  }
  .contact-card {
    width: 100%;
    padding: clamp(2.6rem, 6.5svh, 3.6rem) 1.2rem 1.2rem;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 2rem;
    background: rgba(255,255,255,.018);
    box-shadow: inset 0 0 3rem rgba(255,255,255,.012);
  }
  .contact-kicker { padding: .5rem 1.1rem; font-size: .76rem; }
  .contact-card h2 { max-width: none; margin: 1.2rem auto .85rem; font-size: clamp(1.5rem, 7vw, 2.05rem); line-height: 1.1; letter-spacing: -.03em; }
  .contact-card h2 span { display: block; white-space: nowrap; }
  .contact-copy { max-width: 26ch; margin-bottom: 1.3rem; font-size: clamp(.78rem, 3.4vw, .9rem); line-height: 1.35; }
  .contact-form { padding: .6rem; border-radius: 1.4rem; }
  .contact-form { display: block; width: 100%; }
  .contact-form input { width: 100%; min-height: 3.3rem; font-size: .82rem; }
  .contact-form button { width: 100%; min-height: 2.9rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .mobile-menu, .faq-item, .faq-answer, .faq-toggle i { transition: none !important; }
  .faq-gallery-track { animation: none !important; }
  #gwHeroSection { height: var(--viewport-h); }
  .work-story { height: auto; }
  .work-story__sticky { position: relative; height: auto; min-height: var(--viewport-h); overflow-x: auto; }
  .work-grid { transform: none !important; }
  .project-card img,
  .project-card video { transform: none !important; }
}

/* =====================================================================
   META BAR — "NYC HH:MM" / "BORN CREATIVE", first element of the first
   section on every page.
   ===================================================================== */
.meta-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:34px 22px 14px;
  border-bottom:2px solid #000;
  font-family: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight:400;
  font-size:clamp(13px,3.4vw,22px);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.meta-bar span{ white-space:nowrap }

/* the site header is position:fixed, so the bar needs to start below it */
main > .meta-bar:first-child{
  padding-top:clamp(96px, 11vw, 124px);
}

/* page transitions live in goat-bar.css (shared by every page) */

/* the bar already clears the fixed header, so the first section below it
   no longer needs its own header offset */
.meta-bar + .team-hero{ padding-top:clamp(1.8rem, 3.4vw, 3.4rem) }

/* inside the gradient hero panel the bar sits at the foot of the panel and
   spans it edge to edge. No rule under it on desktop; the phone keeps one. */
.nh-panel > .meta-bar:last-child{
  max-width:none;
  padding:0;
  margin:clamp(34px, 5.5vh, 62px) 0 0;
  border-bottom:0;
}
@media (max-width:700px){
  .nh-panel > .meta-bar:last-child{
    padding:0 0 14px;
    border-bottom:2px solid #000;
  }
}

/* the team view is the site's second page, rendered from the same document */
.team-view[hidden]{ display:none }
body.team-page{ background:var(--paper) }

/* On a phone the frame is 16:9 and the pin is portrait, so "cover" blew the
   newspaper up about four times. The canvas keeps the frame's own shape and
   sits centred in the pin instead — the whole shot, at its real scale. */
@media (max-width: 700px){
  /* The pin is now only as tall as the shot it holds, so the newspaper has no
     dead grey band above or below it; the canvas fills that box edge to edge
     (drawFrame already draws "cover", so the frame is cropped, never stretched). */
  /* Phones: the newspaper is no longer pinned inside a full-screen box — it is
     a strip in normal flow that scrubs its frames while it travels up the
     screen, and the work panel follows straight after it. The strip is taller
     than the 16:9 frame because the frames carry a wide grey border of their
     own; the canvas crops that border, never the headline. */
  #gwHeroSection{ height: auto; }
  #gwHeroPin{ position: relative; height: auto; }
  #gwHeroTrack{ height: auto; }
  .gw-hero-panel{ display: block; height: auto; }
  #gwHeroCanvas{ width: 100vw; height: clamp(300px, 40svh, 380px); aspect-ratio: auto; }
  .work-story{ margin-top: 0; }
  .work-story__sticky{
    transform: none;
    background: #eaeaea;   /* the newspaper frames' grey — no seam under the strip */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .work-content{ padding-top: 2.4rem; }
  .work-content h1{ margin-bottom: 4.5svh; }

  /* the testimonial row and the FAQ used to sit ~150px apart */
  .faq-section{ padding-top: max(2.6rem, 5svh); }
  /* "Let's talk" ran into a screen and a half of empty black before the story */
  .contact-section{ padding-top: max(3rem, 5svh); }
}


/* =====================================================================
   MOBILE "We create brands that are impossible to ignore" — swipeable,
   not scroll-jacked. iPhone QA flagged the pinned/scroll-driven version
   (position:sticky + JS translating .work-grid off vertical scroll
   progress) as unreliable and not optional to skip. This replaces it,
   phones only, with the section in normal document flow and the card
   row as an ordinary native horizontal-swipe list — no vertical scroll
   is consumed getting through it, and every card is visible immediately
   rather than gated behind a reveal animation. A pink bar under the row
   (filled by extra-sections.js as .work-grid's own scrollLeft moves)
   shows how far through the row a swipe has gone.
   Placed last so it wins over the two earlier max-width:700px blocks
   without having to touch their unrelated rules. ===================== */
@media (max-width: 700px) {
  .work-story { height: auto; margin-top: 0; }
  .work-story__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .work-content { height: auto; }

  .work-grid {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    transform: none !important;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid .project-card { scroll-snap-align: start; }
  /* portrait stills, like the reference: ~62% of the screen wide, 3:4 tall,
     so the next card peeks in from the right and the row reads as a strip */
  .project-card { width: 62vw; height: auto; aspect-ratio: 3 / 4; }
  .project-card img,
  .project-card video { transform: none !important; }

  /* the bar itself is the shared .swipe-progress (goat-bar.css); .work-content
     already carries the 7vw side padding the title uses, so no extra
     horizontal margin — it lines up flush with the heading. */
  .work-story .work-progress { display: block; margin: 18px 0 0; }
  /* a little air between the bar and the portfolio folder section below */
  .work-content { padding-bottom: calc(max(1.3rem, env(safe-area-inset-bottom)) + 22px); }
}