/* ==========================================================================
   Modular Agency — design tokens & globals
   ========================================================================== */

@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/PP Neue Montreal/NeueMontreal-Light.woff2') format('woff2'),
       url('fonts/PP Neue Montreal/NeueMontreal-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/PP Neue Montreal/NeueMontreal-Regular.woff2') format('woff2'),
       url('fonts/PP Neue Montreal/NeueMontreal-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/PP Neue Montreal/NeueMontreal-Medium.woff2') format('woff2'),
       url('fonts/PP Neue Montreal/NeueMontreal-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/PP Neue Montreal/NeueMontreal-Bold.woff2') format('woff2'),
       url('fonts/PP Neue Montreal/NeueMontreal-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Reckless Neue — title face (serif) */
@font-face {
  font-family: 'Reckless Neue';
  src: url('fonts/Reckless Neue/RecklessNeue-SemiBold.woff2') format('woff2'),
       url('fonts/Reckless Neue/RecklessNeue-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #5a5a5a;
  --line: #e8e8e8;
  --line-strong: #cfcfcf;
  --blue: #0029f5;
  --pink: #fd007a;
  --canvas: #fafafa;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: 20px;
  --margin: clamp(20px, 3.5vw, 56px);

  --font-sans: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Reckless Neue', 'Times New Roman', Georgia, serif;

  --t-display: clamp(38px, 6vw, 96px);
  --t-display-2: clamp(28px, 3.8vw, 56px);
  --t-h2: clamp(24px, 2.6vw, 42px);
  --t-h3: clamp(16px, 1.2vw, 20px);
  --t-body: 15px;
  --t-small: 12px;
  --t-eyebrow: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 240ms var(--ease);
}

a:hover { color: var(--blue); }

img, video, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  padding-inline: var(--margin);
}

.section {
  padding-block: clamp(60px, 9vh, 120px);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--blue);
  border-radius: 0;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.display, h1, h2, .h2, .display-2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0;
}

.display, h1 {
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.028em;
}

.display-2 {
  font-size: var(--t-display-2);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

h2, .h2 {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.018em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

p { margin: 0; }

.lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
}

.accent-blue { color: var(--blue); }
.accent-pink { color: var(--pink); }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--margin);
  background: transparent;
  color: var(--ink);
  transition: padding 0.4s var(--ease), color 0.32s var(--ease);
}

.site-header:not(.in-hero) {
  padding-block: 14px;
}

/* When the menu is over a dark section (showreel full-bleed), flip text to white.
   Brand accent triangles use explicit pink/blue fills so they stay correct;
   only the currentColor paths in the wordmark flip. */
.site-header.over-dark {
  color: var(--white);
}

.site-header a { color: inherit; }

.site-header .brand {
  display: inline-flex;
  align-items: center;
  width: 96px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 240ms var(--ease);
}

.site-header .brand:hover {
  color: var(--blue);
}

.site-header.in-hero .brand {
  width: clamp(110px, 13vw, 170px);
}

.site-header .brand__svg,
.site-header .brand svg {
  width: 100%;
  height: auto;
  display: block;
}

.site-header nav {
  display: flex;
  gap: 28px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.site-header nav a {
  position: relative;
  padding-block: 6px;
}

.site-header nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}

.site-header nav a:hover::after { transform: scaleX(1); }

/* Nav CTA pill — outlined, uses currentColor so mix-blend-mode handles inversion */
.site-header nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 240ms var(--ease), gap 280ms var(--ease);
  margin-left: 6px;
}

.site-header nav .nav-cta::after { display: none; }

.site-header nav .nav-cta:hover {
  background: var(--ink);
  color: var(--white);
  gap: 9px;
}

.site-header nav .nav-cta .arrow {
  font-size: 12px;
  display: inline-block;
}

@media (max-width: 720px) {
  .site-header nav { gap: 14px; font-size: 11px; }
  .site-header nav a:not(.nav-cta):nth-of-type(n+3) { display: none; }
  .site-header nav .nav-cta { padding: 5px 11px; font-size: 10px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: 72vh;
  padding: clamp(40px, 5vh, 64px) var(--margin) clamp(28px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  isolation: isolate; /* keeps the gradient blend contained */
}

/* Brand-color gradient bloom — soft blue + pink at the top of the hero */
.brand-gradient {
  position: absolute;
  inset: 0 0 auto 0;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 75% at 18% -10%, rgba(0, 41, 245, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 90% 75% at 82% -10%, rgba(253, 0, 122, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% -20%, rgba(255, 220, 230, 0.25) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
}

.hero > *:not(.brand-gradient) { position: relative; z-index: 1; }

/* Same gradient on inner-page heros for brand consistency */
.page-hero {
  position: relative;
  isolation: isolate;
}
.page-hero > *:not(.brand-gradient) { position: relative; z-index: 1; }
.case-hero { position: relative; isolation: isolate; }
.case-hero > *:not(.brand-gradient) { position: relative; z-index: 1; }

/* Big "M/" mark anchored top-left */
.hero__mark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(80px, 13vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
}

.hero__mark .slash { color: var(--blue); }

/* Headline */
.hero__main {
  align-self: flex-start;
  width: 100%;
  margin-top: auto;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  max-width: 24ch;
}

.hero__title .amp {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-family: 'Times New Roman', Georgia, serif;
  padding: 0 0.04em;
}

/* Footnote strip — small status + Taipei time, single row */
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__foot span { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* (legacy) hero__mark — replaced by the scrollable site-header logo. CSS kept to avoid layout shifts in case re-added. */

/* ==========================================================================
   Showreel — sticky scaling
   ========================================================================== */

.showreel {
  position: relative;
  height: 480vh; /* extra height = scroll room for partner reveal phase */
}

.showreel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.showreel__frame {
  position: relative;
  --start-width: 56;                            /* read by script.js */
  width: 56vw;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  border-radius: 0;
  overflow: hidden;
  will-change: transform, width, border-radius;
  transform-origin: center center;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.4);
  /* Smooth out the per-scroll-event width updates so the grow feels glassy */
  transition: width 90ms ease-out, border-radius 90ms ease-out;
}

.showreel__frame video,
.showreel__frame .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dark overlay over video so partner logos read clearly */
.showreel__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background 700ms var(--ease);
  z-index: 2;
}

.showreel.is-full .showreel__frame::after {
  background: rgba(0, 0, 0, 0.62);
}

.showreel__frame .placeholder {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0, 41, 245, 0.4), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(253, 0, 122, 0.25), transparent 60%),
    #0a0a0a;
  display: grid;
  place-items: center;
}

.showreel__frame .placeholder span {
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.showreel__caption {
  position: absolute;
  inset: 24px 0 auto 0;
  display: flex;
  justify-content: space-between;
  padding-inline: var(--margin);
  color: var(--white);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.showreel.is-full .showreel__caption { opacity: 0.85; }

/* ---------- Partners overlay: static prefix + logo carousel ---------- */
.showreel__partners {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--margin);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease) 300ms;
}

.showreel.is-full .showreel__partners { opacity: 1; }

.partners-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 48px);
  text-align: center;
}

.partners-label {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.partners-label em {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.partners-list {
  position: relative;
  width: clamp(180px, 24vw, 320px);
  height: clamp(62px, 8vw, 112px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners-list .partner {
  position: absolute;
  inset: 0;
  /* logo as a mask, painted with pure white background — guarantees every logo
     renders as a clean white silhouette on the dark overlay regardless of source */
  background-color: #ffffff;
  -webkit-mask-image: var(--logo);
          mask-image: var(--logo);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease),
    transform 700ms var(--ease);
}

.partners-list .partner.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .partners-list { width: 60vw; }
}

.showreel__clients {
  position: absolute;
  inset: auto 0 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding-inline: var(--margin);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease) 300ms;
}

.showreel.is-full .showreel__clients { opacity: 1; }

.showreel__clients span {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}

.showreel__clients span::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 0;
  background: rgba(255,255,255,0.5);
}

.showreel__clients span:last-child::after { display: none; }

@media (max-width: 720px) {
  .showreel__clients { gap: 24px; }
  .showreel__clients span { gap: 24px; }
}

/* ==========================================================================
   Clients — infinite logo marquee
   ========================================================================== */

.clients {
  padding-block: clamp(60px, 8vh, 100px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.clients__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 12px;
}

.clients__count {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.clients__marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.clients__track {
  display: flex;
  width: max-content;
  animation: clients-marquee 60s linear infinite;
}

.clients__group {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
  flex-shrink: 0;
}

.clients__group img {
  height: clamp(28px, 3vh, 40px);
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0);
  opacity: 0.45;
  transition: opacity 320ms var(--ease), filter 320ms var(--ease);
}

.clients__group img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

.clients__marquee:hover .clients__track {
  animation-play-state: paused;
}

@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Intersection — interactive circles
   ========================================================================== */

.intersection {
  position: relative;
  padding-top: clamp(100px, 13vh, 160px);
  padding-bottom: clamp(48px, 6vh, 80px);
  text-align: center;
  overflow: hidden; /* keyword cloud bursts may extend wide; clip to section */
}

.intersection__head {
  max-width: 640px;
  margin: 0 auto 72px;
}

.intersection__head h2 { margin-bottom: 14px; }

.intersection__stage {
  position: relative;
  margin: 0 auto;
  width: min(840px, 86vw);
  aspect-ratio: 1.4 / 1;
}

.circle {
  position: absolute;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.4px solid;
  background-color: rgba(255, 255, 255, 0);
  background-image: radial-gradient(circle at center, transparent 55%, transparent);
  transition:
    background-image 600ms var(--ease),
    transform 600ms var(--ease),
    border-color 320ms var(--ease);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8%;
  cursor: pointer;
  z-index: 1;
}

.circle__label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 22px);
  letter-spacing: -0.018em;
  color: var(--ink);
  transition: color 240ms var(--ease), transform 480ms var(--ease);
}

.circle--left  {
  left: 0;
  transform: translate(0, -50%);
  border-color: rgba(0, 41, 245, 0.5);
}
.circle--right {
  right: 0;
  transform: translate(0, -50%);
  border-color: rgba(253, 0, 122, 0.45);
}

.circle--left.is-active  {
  background-image: radial-gradient(circle at center, rgba(0, 41, 245, 0.10), transparent 70%);
  border-color: var(--blue);
}
.circle--right.is-active {
  background-image: radial-gradient(circle at center, rgba(253, 0, 122, 0.08), transparent 70%);
  border-color: var(--pink);
}

.circle--left.is-active  .circle__label { color: var(--blue); }
.circle--right.is-active .circle__label { color: var(--pink); }

.intersection__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(54px, 6vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: grid;
  place-items: center;
  z-index: 3;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  transition: transform 480ms var(--ease), box-shadow 320ms var(--ease);
}

.intersection__center .amp {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  font-weight: 400;
  transform: translateY(-2px);
}

.intersection__center:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 36px rgba(0,41,245,0.2);
}

/* keyword cloud — JS-positioned spans burst out from each circle */
.cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.cloud .keyword {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 6px 12px;
  border-radius: 0;
  background: var(--white);
  border: 1px solid var(--line);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    opacity 520ms var(--ease),
    transform 700ms var(--ease);
  will-change: transform, opacity;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cloud .keyword.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg));
}

.cloud--left .keyword  { color: var(--blue); border-color: rgba(0,41,245,0.22); }
.cloud--right .keyword { color: var(--pink); border-color: rgba(253,0,122,0.2); }

.cloud .keyword.size-lg { font-size: 14px; padding: 7px 14px; font-weight: 500; }
.cloud .keyword.size-sm { font-size: 11px; padding: 5px 10px; opacity: 0; }
.cloud .keyword.size-sm.is-on { opacity: 0.8; }

.intersection__hint {
  margin-top: 40px;
  font-size: var(--t-small);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.intersection__hint a { color: var(--blue); }

/* ============ Venn diagram ============ */
.venn {
  position: relative;
  width: min(620px, 88vw);
  margin: 56px auto 0;
  /* room for the revealed story opens up only when the icon is tapped */
  padding-bottom: 0;
  color: var(--ink);
  isolation: isolate;
  transition: padding-bottom 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.venn.is-active {
  padding-bottom: 220px;
}

.venn__core {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 360;
  transform-origin: 50% 25%;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}

.venn.is-active .venn__core {
  transform: scale(0.58) translateY(-12%);
}

.venn__diagram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.venn__lens {
  transition: fill 480ms var(--ease);
}

.venn:hover .venn__lens,
.venn.is-active .venn__lens {
  fill: rgba(0, 41, 245, 0.26);
}

/* Labels (in the non-overlapping parts of each circle) */
.venn__label {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
  transition: transform 720ms var(--ease), left 720ms var(--ease);
}

.venn__label--left  { left: 18%; }
.venn__label--right { left: 82%; }

.venn__market {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 24px);
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ink);
}

.venn__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Modular icon at the centre — the clickable trigger */
.venn__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 6vw, 84px);
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  transition: transform 720ms var(--ease);
}

.venn__icon:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.venn__icon:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.venn__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sparks — burst out from the icon on activation */
.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  z-index: 2;
}

.spark--2, .spark--5, .spark--8 { background: var(--pink); }
.spark--3, .spark--6 { width: 4px; height: 4px; }

.venn.is-active .spark {
  animation: spark-burst 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.venn.is-active .spark--2 { animation-delay: 40ms; }
.venn.is-active .spark--3 { animation-delay: 80ms; }
.venn.is-active .spark--4 { animation-delay: 120ms; }
.venn.is-active .spark--5 { animation-delay: 60ms; }
.venn.is-active .spark--6 { animation-delay: 140ms; }
.venn.is-active .spark--7 { animation-delay: 100ms; }
.venn.is-active .spark--8 { animation-delay: 160ms; }

@keyframes spark-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1);
  }
}

/* Story text — revealed on icon click, sits in the space the diagram vacates */
.venn__story {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 18px);
  width: min(620px, 96%);
  text-align: center;
  font-family: var(--font-sans);
  color: var(--ink);
  margin: 0;
  opacity: 0;
  /* closing: snap out fast so the diagram never paints over the text */
  transition:
    opacity 200ms var(--ease),
    transform 280ms var(--ease);
  pointer-events: none;
  z-index: 4;
}

.venn__story p { margin: 0; }

.venn__story-lead {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.venn__story-tag {
  position: relative;
  margin-top: 22px !important;
  padding-top: 22px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.003em;
  color: var(--ink-soft);
}

.venn__story-tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 56px;
  height: 2px;
  background: var(--blue);
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  /* closing: collapse fast */
  transition: transform 200ms var(--ease);
}

.venn.is-active .venn__story-tag::before {
  transition: transform 760ms var(--ease) 820ms;
}

.venn__story em {
  font-style: normal;
  font-weight: 500;
  color: var(--blue);
}

.venn.is-active .venn__story {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  /* opening: wait for the diagram to settle, then ease in */
  transition:
    opacity 560ms var(--ease) 560ms,
    transform 760ms var(--ease) 520ms;
}

.venn.is-active .venn__story-tag::before {
  transform: translateX(-50%) scaleX(1);
}

/* Hide the "Tap the mark to reveal" hint while the story is open */
.intersection__hint {
  transition: opacity 320ms var(--ease), transform 480ms var(--ease);
}

.intersection:has(.venn.is-active) .intersection__hint {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (max-width: 720px) {
  /* Intersection block — clearly separated from neighbours on mobile */
  .intersection {
    padding-top: clamp(48px, 7vh, 80px);        /* more breathing from client logos */
    padding-bottom: clamp(40px, 6vh, 72px);     /* more breathing before statement */
  }
  /* +20% breathing room above and below the diagram */
  .intersection__head { margin: 0 auto clamp(28px, 7.2vh, 58px); }
  .venn,
  .venn-stage .venn { margin: clamp(10px, 2.4vh, 24px) auto 0; }

  .venn { padding-bottom: 0; }
  /* Reserve enough room below the diagram for the full story (lead + tag
     with their dividers and margins) so the absolutely-positioned story
     never extends UP into the circles. */
  .venn.is-active { padding-bottom: clamp(280px, 46vh, 380px); }
  .venn__label--left  { left: 18%; }
  .venn__label--right { left: 82%; }
  /* Shrink the diagram a bit more on mobile and lift it so the story
     has clear breathing room below. */
  .venn.is-active .venn__core { transform: scale(0.55) translateY(-18%); }

  .intersection__hint { margin-top: clamp(24px, 6vh, 48px); }
}

@media (max-width: 720px) {
  .intersection__stage { aspect-ratio: 1 / 1; }
  .circle { width: 75%; }
}

/* ==========================================================================
   Statement / second positioning
   ========================================================================== */

.statement {
  padding-block: clamp(80px, 12vh, 140px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.statement__inner {
  max-width: 880px;
}

.statement p {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 600;
}

.statement p .blue { color: var(--blue); }
.statement p .dim { color: var(--ink-soft); }

/* ==========================================================================
   Portfolio — single rail with filter pills
   ========================================================================== */

.portfolio {
  padding-block: clamp(60px, 9vh, 110px) clamp(40px, 6vh, 80px);
}

.portfolio__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.portfolio__head h2 { max-width: 16ch; }
.portfolio__head .eyebrow { display: block; margin-bottom: 12px; }

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background 280ms var(--ease);
}

.view-all:hover { background: var(--blue); color: var(--white); }
.view-all .arrow { font-size: 14px; }

/* category tiles — replaces simple filter pills */
.categories {
  display: grid;
  /* Featured E-mobility is first and wider */
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 0 var(--margin) 32px;
}

.category {
  position: relative;
  text-align: left;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  transition: transform 320ms var(--ease), border-color 280ms var(--ease), background 280ms var(--ease), box-shadow 320ms var(--ease), color 280ms var(--ease);
  overflow: hidden;
}

.category:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.category.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.category__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0;
}

.category__count {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.6;
}

.category__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.018em;
  line-height: 1;
}

.category__tagline {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.7;
  max-width: 32ch;
}

.category__badge {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  padding: 4px 9px;
  border-radius: 0;
  color: #ffffff;
}

/* Featured — E-mobility growth focus */
.category--featured {
  background: linear-gradient(155deg, #0029f5 0%, #1e44ff 55%, #4661ff 100%);
  color: #ffffff;
  border-color: transparent;
}

.category--featured .category__count { opacity: 0.85; }
.category--featured .category__tagline { opacity: 0.92; }

.category--featured:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(0, 41, 245, 0.45);
}

.category--featured.is-active {
  background: linear-gradient(155deg, #001fc4 0%, #0029f5 100%);
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

/* tablet collapse */
@media (max-width: 900px) {
  .categories { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .category--featured { grid-column: 1 / -1; }   /* E-mobility full-width on top */
  .category { min-height: 56px; }
}

/* mobile stack */
@media (max-width: 540px) {
  .categories { grid-template-columns: 1fr 1fr; }
  .category--featured { grid-column: 1 / -1; }
}

/* ============ Frontier billboard ============ */
.frontier {
  position: relative;
  margin: 0 var(--margin) 60px;
  padding: clamp(40px, 6vh, 72px) clamp(28px, 4vw, 64px);
  border-radius: 0;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(140deg, #001fc4 0%, #0029f5 45%, #1f44ff 100%);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas:
    "head head"
    "body capabilities"
    "foot foot";
  gap: clamp(28px, 4vh, 56px) clamp(32px, 5vw, 80px);
  isolation: isolate;
}

/* soft glowing orbs in the bg for visual depth */
.frontier__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.frontier__bg .orb {
  position: absolute;
  border-radius: 0;
  filter: blur(80px);
  opacity: 0.55;
}

.frontier__bg .orb--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle at center, #fd007a 0%, transparent 70%);
}

.frontier__bg .orb--2 {
  width: 360px;
  height: 360px;
  bottom: -120px;
  left: -100px;
  background: radial-gradient(circle at center, #4d7bff 0%, transparent 70%);
}

.frontier > *:not(.frontier__bg) { position: relative; z-index: 1; }

.frontier__head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.frontier__pin {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #ffffff;
  position: relative;
  display: inline-block;
}

.frontier__pin::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 0;
  animation: pulse-ring 2.4s ease-out infinite;
}

.frontier__body { grid-area: body; }

.frontier__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
}

.frontier__title .line { display: block; }

.frontier__title em {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  padding-right: 0.04em;
}

.frontier__pitch {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}

.frontier__capabilities {
  grid-area: capabilities;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  align-self: end;
}

.frontier__capabilities li {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}

.frontier__capabilities li:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

.frontier__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.frontier__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #ffffff;
  color: var(--blue);
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: gap 320ms var(--ease), background 280ms var(--ease), color 280ms var(--ease);
}

.frontier__cta:hover {
  gap: 18px;
  background: #0a0a0a;
  color: #ffffff;
}

.frontier__cta .arrow {
  display: inline-block;
  transition: transform 320ms var(--ease);
}

.frontier__cta:hover .arrow { transform: translateX(3px); }

.frontier__contact {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}

.frontier__contact:hover {
  color: #ffffff;
  border-color: #ffffff;
}

@media (max-width: 900px) {
  .frontier {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "capabilities"
      "foot";
  }
  .frontier__capabilities { align-self: start; }
}

/* ============ Rail head — small intro above the rail ============ */
.rail__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 var(--margin) 20px;
}

.rail__hint {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rail__track {
  display: flex;
  gap: 16px;
  padding: 0 var(--margin) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

/* While actively dragging, disable smooth scroll so the rail tracks the cursor 1:1 */
.rail__track.is-dragging { scroll-behavior: auto; }

.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { cursor: grabbing; }

.card {
  flex: 0 0 auto;
  width: clamp(280px, 34vw, 480px);
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.card.is-hidden {
  display: none;
}

.card__media {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 0;
  overflow: hidden;
  background: var(--canvas);
  transition: transform 480ms var(--ease);
}

.card:hover .card__media { transform: translateY(-4px); }

.card__media .swatch {
  position: absolute;
  inset: 0;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}

.card:hover .card__media img { transform: scale(1.04); }

.card__media .label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.85);
  padding: 4px 9px;
  border-radius: 0;
  backdrop-filter: blur(8px);
}

.card__media .label--blue { color: var(--blue); }
.card__media .label--ink  { color: var(--ink); }

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  gap: 12px;
}

.card__meta .title { font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
.card__meta .year { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }

.card__line {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
  max-width: 36ch;
  line-height: 1.4;
}

/* portfolio empty-state — frontier opportunity, not deficit */
.rail__empty {
  margin: 24px var(--margin) 0;
  padding: clamp(48px, 7vh, 80px) 32px;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rail__empty-headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 18ch;
  margin: 0;
}

.rail__empty-sub {
  max-width: 46ch;
  margin: 0 0 12px;
  line-height: 1.55;
}

.rail__empty[hidden] { display: none; }

/* ============ Portfolio grid (full /portfolio page) ============ */
.portfolio--page {
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(80px, 10vh, 140px);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(16px, 1.8vw, 28px);
  margin: 0 var(--margin);
}

.portfolio-grid .card {
  width: 100%;
  flex: initial;
  scroll-snap-align: none;
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background 280ms var(--ease);
}

.empty-cta:hover { background: var(--ink); color: var(--white); }

/* swatch demo backgrounds (placeholder imagery) */
.sw-1 { background: linear-gradient(135deg, #0029f5, #4d63ff); }
.sw-2 { background: linear-gradient(135deg, #1a1a1a, #2d2d2d); }
.sw-3 { background: linear-gradient(135deg, #f5f1ec, #d6cfc4); }
.sw-4 { background: linear-gradient(135deg, #fd007a, #ff5fa3); }
.sw-5 { background: linear-gradient(135deg, #0a0a0a, #0029f5); }
.sw-6 { background: linear-gradient(135deg, #ddd, #888); }
.sw-7 { background: linear-gradient(135deg, #002d2d, #045454); }
.sw-8 { background: linear-gradient(135deg, #ffe4d6, #f7a37b); }
.sw-9 { background: linear-gradient(135deg, #0029f5, #0a0a0a); }

/* ==========================================================================
   Team — group photo with tags
   ========================================================================== */

.team {
  padding-block: clamp(60px, 9vh, 120px);
  background: var(--canvas);
}

.team__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.team__head h2 { max-width: 18ch; }
.team__head p  { max-width: 40ch; color: var(--ink-soft); font-size: 14px; }

.team__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--canvas);
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Instagram-style face tag */
.tag {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 16px rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease),
    left 600ms var(--ease),
    top 600ms var(--ease);
}

.tag.is-detected {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tag:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.tag__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 6px);
  background: rgba(10, 10, 10, 0.94);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: opacity 240ms var(--ease), transform 320ms var(--ease);
}

.tag__tip::after {
  /* triangle pointing down to dot */
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(10, 10, 10, 0.94);
}

.tag__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.tag__role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.78;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.tag__handle {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: #7da3ff;
  letter-spacing: 0.02em;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.15);
  width: 100%;
  text-align: center;
}

.tag:hover .tag__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.team__list {
  margin-top: 32px;
  display: flex;
  gap: 6px 22px;
  flex-wrap: wrap;
  font-size: 12px;
}

.team__list a {
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
}

.team__list a:hover { color: var(--blue); }

/* ==========================================================================
   Contact block — pre-footer CTA
   ========================================================================== */

.contact-block {
  padding: clamp(100px, 14vh, 180px) var(--margin) clamp(80px, 10vh, 140px);
  border-top: 1px solid var(--line);
  background: var(--white);
  text-align: left;
}

.contact-block__inner {
  /* sits at the page's left margin (the section's own padding handles the gutter) */
  margin: 0;
  padding: 0;
}

.contact-block__title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 22px 0 56px;
  max-width: 18ch;
}

.contact-block__title .line { display: block; }
.contact-block__title .line:nth-child(2) {
  font-style: italic;
  color: var(--blue);
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 400;
}

.contact-block__email {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color 280ms var(--ease), border-color 280ms var(--ease), gap 320ms var(--ease);
}

.contact-block__email:hover {
  color: var(--blue);
  border-color: var(--blue);
  gap: 24px;
}

.contact-block__arrow {
  font-size: 1em;
  display: inline-block;
  transition: transform 320ms var(--ease);
}

.contact-block__email:hover .contact-block__arrow {
  transform: translateX(4px);
}

.contact-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 56px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.contact-block__meta span {
  display: inline-flex;
  align-items: center;
}

.contact-block__meta span + span::before {
  content: '·';
  margin-right: 32px;
  margin-left: -16px;
  color: var(--line-strong);
}

@media (max-width: 720px) {
  .contact-block__meta span + span::before { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: clamp(40px, 6vh, 80px) var(--margin) 0;
  background: var(--white);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

.footer__cta h2 { max-width: 14ch; margin-bottom: 18px; font-size: clamp(20px, 2.2vw, 32px); }

.footer__cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background 280ms var(--ease), color 280ms var(--ease);
}

.footer__cta a:hover { background: var(--ink); color: var(--white); }

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__brand {
  display: inline-block;
  width: 96px;
  height: auto;
  color: var(--ink);
  text-decoration: none;
}

.footer__brand svg {
  width: 100%;
  height: auto;
  display: block;
}

.footer__pitch {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 30ch;
}

.footer__col h4 {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
  font-weight: 400;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 18px 0 28px;
  flex-wrap: wrap;
  gap: 14px;
  letter-spacing: 0.02em;
}

.footer__wordmark { display: none; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.is-on {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   About / team-member / case-study page extras
   ========================================================================== */

.page-hero {
  padding: clamp(110px, 14vh, 180px) var(--margin) clamp(48px, 6vh, 80px);
  border-bottom: 1px solid var(--line);
}

.page-hero .eyebrow { display: block; margin-bottom: 20px; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 20px; }

.about-grid {
  padding: clamp(60px, 8vh, 120px) var(--margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
}

.about-grid .col-text  { grid-column: 1 / span 5; }
.about-grid .col-image { grid-column: 7 / span 6; aspect-ratio: 1 / 1; border-radius: 0; overflow:hidden; }

@media (max-width: 900px) {
  .about-grid .col-text, .about-grid .col-image { grid-column: 1 / -1; }
}

.about-grid .col-image .swatch { width: 100%; height: 100%; }

.values {
  padding: clamp(60px, 9vh, 120px) var(--margin);
  border-top: 1px solid var(--line);
}

.values__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vh, 64px);
  text-align: center;
}

.values__head h2 { margin-top: 14px; }

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}

/* When there are exactly three pillars, give each card more width and air */
.values__grid--three .value p { font-size: 14.5px; max-width: 42ch; }
.values__grid--three .value h3 { font-size: clamp(20px, 1.8vw, 26px); }

@media (max-width: 900px) { .values__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .values__grid { grid-template-columns: 1fr; } }

.value {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.value__num {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--blue);
  margin-bottom: 12px;
}

.value h3 {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.018em;
  line-height: 1.15;
}

.value p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  max-width: 38ch;
}

/* ============ Page-hero meta strip (about, etc.) ============ */
.page-hero__meta {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-hero__meta li {
  position: relative;
  padding-left: 16px;
}

.page-hero__meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--blue);
  transform: translateY(-50%);
}

/* ============ Pullquote (about-grid figure) ============ */
.col-image.pullquote {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
  isolation: isolate;
}

.pullquote__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.pullquote__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0.88) 100%
  );
  pointer-events: none;
}

.pullquote__text {
  position: absolute;
  left: clamp(28px, 4vw, 56px);
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 3;
  color: #fff;
}

.pullquote__mark {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(64px, 7vw, 110px);
  line-height: 0.6;
  color: #fff;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}

.pullquote__body {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0;
  max-width: 22ch;
}

.pullquote__caption {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 16px;
}

/* ============ Team-member: page hero ============ */
.member-page-hero { position: relative; }

.member-page-hero__back {
  display: inline-block;
  margin-bottom: clamp(28px, 3vh, 48px);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 240ms var(--ease);
}

.member-page-hero__back:hover { color: var(--blue); }

.member-page-hero h1 { max-width: 14ch; margin-bottom: 18px; }

.member-page-hero__role { display: inline-block; }

/* ============ Team-member: modular grid ============ */
.member-modules {
  padding: clamp(40px, 6vh, 80px) var(--margin) clamp(100px, 14vh, 180px);
}

.member-modules__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(180px, 19vw, 240px);
  gap: clamp(16px, 1.6vw, 28px);
}

/* Tile spans — asymmetric "modular" composition */
.m-mod--identity    { grid-column: span 4; grid-row: span 2; } /* big square */
.m-mod--bio         { grid-column: span 4; }
.m-mod--listen      { grid-column: span 4; grid-row: span 2; } /* square + player */
.m-mod--reading     { grid-column: span 4; }
.m-mod--work        { grid-column: span 12; min-height: clamp(300px, 32vw, 400px); } /* taller hero block */
.m-mod--movie       { grid-column: span 3; }
.m-mod--quote       { grid-column: span 5; }
.m-mod--locale-tile { grid-column: span 4; }

@media (max-width: 1000px) {
  .member-modules__grid { grid-template-columns: repeat(6, 1fr); }
  .m-mod--identity, .m-mod--listen { grid-column: span 6; grid-row: auto; aspect-ratio: 1 / 1; }
  .m-mod--bio, .m-mod--reading, .m-mod--locale-tile { grid-column: span 6; }
  .m-mod--work { grid-column: span 6; }
  .m-mod--movie { grid-column: span 3; }
  .m-mod--quote { grid-column: span 6; }
}

@media (max-width: 540px) {
  .member-modules__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .m-mod { aspect-ratio: auto; min-height: 220px; }
  .m-mod--identity, .m-mod--listen { aspect-ratio: 1 / 1; }
  .m-mod--identity, .m-mod--bio, .m-mod--listen, .m-mod--reading,
  .m-mod--work, .m-mod--movie, .m-mod--quote, .m-mod--locale-tile {
    grid-column: 1; grid-row: auto;
  }
}

/* ─── Base tile ─────────────────────────────────────────── */
.m-mod {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(22px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 280ms var(--ease), transform 320ms var(--ease);
}

a.m-mod:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.m-mod .eyebrow { margin-bottom: clamp(20px, 2vw, 32px); }

/* ─── Cover-style tiles (full-bleed photo with bottom meta) ── */
.m-mod--cover {
  border: 0;
  padding: 0;
  background: #1a1a1a;
}

.m-mod--cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1200ms var(--ease);
}

a.m-mod--cover:hover img { transform: scale(1.04); }

/* ─── Work tile — full-bleed photo, text overlaid on a gradient ── */
.m-mod--work {
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  isolation: auto;
  overflow: hidden;
}

.m-mod--work:hover { transform: translateY(-3px); }

.m-mod__work-media {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--canvas);
  overflow: hidden;
}

.m-mod__work-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 800ms var(--ease);
  z-index: 0;
}

.m-mod--work:hover .m-mod__work-media img { transform: scale(1.04); }

.m-mod__work-label {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  padding: 4px 9px;
}

.m-mod__work-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
}

.m-mod__work-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(20px, 2vw, 32px);
}

.m-mod__work-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
}

.m-mod__work-year {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.m-mod__cover-meta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(22px, 2vw, 32px);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-mod__cover-tag {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.m-mod__cover-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--white);
}

.m-mod__cover-link {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 240ms var(--ease);
}

a.m-mod--cover:hover .m-mod__cover-link { gap: 14px; color: var(--white); }

/* ─── Pair (thumb + meta) used by reading / listening / movie ── */
.m-mod__pair {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
}

/* Real cover art (book / album / movie) — sized by height so it
   never bleeds into the tile padding regardless of column width */
.m-mod__cover-art {
  flex-shrink: 0;
  height: clamp(82px, 9vw, 110px);
  width: auto;
  aspect-ratio: 1 / 1;          /* default: square (album) */
  display: block;
  object-fit: cover;
  background: var(--canvas);
}

/* Books and movie posters are portrait (2:3) */
.m-mod--reading .m-mod__cover-art,
.m-mod__cover-art--poster {
  aspect-ratio: 2 / 3;
}

/* Listening tile is a square (4×2) — give the album cover more presence */
.m-mod--listen .m-mod__cover-art {
  height: clamp(110px, 13vw, 156px);
}

/* Pair stretches to fill the remaining tile height under the eyebrow */
.m-mod__pair { flex: 1; min-height: 0; }
.m-mod__pair > div { min-width: 0; }

.m-mod__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 4px;
}

.m-mod__title em {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.m-mod__sub {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* ─── Listen player (waveform + play button + duration) ─── */
.m-mod--listen { justify-content: space-between; }

.m-player {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--line);
}

.m-player__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 240ms var(--ease);
}

.m-player__btn:hover { background: var(--ink); }

.m-player__btn svg { width: 10px; height: 12px; }

.m-player__bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}

.m-player__bars span {
  flex: 1;
  height: var(--h, 50%);
  background: var(--ink);
  opacity: 0.5;
  transition: opacity 240ms var(--ease);
}

.m-player__bars span:nth-child(-n+5) { opacity: 1; background: var(--blue); }

.m-player__time {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ─── Bio (PP Neue Montreal body) ───────────────────────── */
.m-mod__serif {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--ink);
  margin: 0;
  max-width: 38ch;
}

/* ─── Fun fact (pull quote) ─────────────────────────────── */
.m-mod--quote { background: var(--canvas); }

.m-mod__pull {
  margin: auto 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.m-mod__pull em {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
}

/* ─── Locale (Taipei big text) ───────────────────────────── */
.m-mod__locale {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-mod__city {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.m-mod__locale .m-mod__sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============ Stats strip (about page) ============ */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 var(--margin) clamp(20px, 3vh, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-strip .stat {
  padding: clamp(28px, 4vh, 56px) clamp(16px, 2vw, 32px);
  text-align: left;
  border-right: 1px solid var(--line);
}

.stats-strip .stat:last-child { border-right: 0; }

.stat__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}

.stat__plus {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.55em;
  color: var(--blue);
  vertical-align: top;
  margin-left: 2px;
}

.stat__label {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .stats-strip .stat:last-child { border-bottom: 0; }
}

/* ============ Team cards (about page) ============ */
.team-cards {
  padding: clamp(80px, 12vh, 160px) var(--margin);
  border-top: 1px solid var(--line);
}

.team-cards__head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vh, 80px);
  text-align: center;
}

.team-cards__head h2 { margin-top: 14px; }

.team-cards__head .lead {
  margin: 18px auto 0;
  max-width: 56ch;
}

.team-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 900px) { .team-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .team-cards__grid { grid-template-columns: 1fr; } }

.team-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 14px;
  transition: transform 320ms var(--ease), border-color 280ms var(--ease), box-shadow 320ms var(--ease);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.18);
}

.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--canvas);
  margin-bottom: 18px;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease);
}

.team-card:hover .team-card__photo img { transform: scale(1.05); }

.team-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.team-card__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.018em;
  line-height: 1.1;
}

.team-card__role {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.team-card__fact {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.team-card__fact-label {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

/* "Join us" tile — same shape, dashed border, plus icon instead of photo */
.team-card--join {
  background: var(--canvas);
  border-style: dashed;
}

.team-card--join:hover {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 24px 48px -20px rgba(0, 41, 245, 0.25);
}

.team-card__photo--join {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed var(--line-strong);
}

.team-card__plus {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  color: var(--blue);
  transition: transform 480ms var(--ease);
}

.team-card--join:hover .team-card__plus { transform: rotate(90deg); }

.team-card--join .team-card__fact-label { color: var(--ink-soft); }

/* ============ About page — Venn cloud (keyword bloom on click) ============ */
.intersection--about {
  background: var(--canvas);
  padding-bottom: clamp(128px, 16vh, 180px);
}

.venn-stage {
  position: relative;
  width: min(1100px, 96vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.venn-stage .venn { margin: 56px auto 0; }

/* Cloud is anchored to the diagram area at the top of the stage,
   so keywords stay locked to the diagram center even when the venn
   expands to make room for the story below. */
.venn-cloud {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  height: calc(min(620px, 88vw) * 0.6);
  pointer-events: none;
  z-index: 1;
}

.venn-cloud .keyword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.005em;
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  /* close: snap back fast so it doesn't linger over the diagram */
  transition:
    opacity 220ms var(--ease),
    transform 320ms var(--ease);
}

.venn-cloud .keyword--left  { color: var(--blue); border-color: rgba(0,41,245,0.22); }
.venn-cloud .keyword--right { color: var(--pink); border-color: rgba(253,0,122,0.2); }

.venn.is-active ~ .venn-cloud .keyword {
  opacity: 1;
  transform:
    translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)))
    scale(1)
    rotate(var(--rot, 0deg));
  /* open: staggered bloom — each keyword carries its own --d (ms) */
  transition:
    opacity 540ms var(--ease) calc(var(--d, 0) * 1ms + 280ms),
    transform 760ms var(--ease) calc(var(--d, 0) * 1ms + 240ms);
}

@media (max-width: 900px) {
  /* tighten the cloud so keywords don't fly off-canvas on narrow screens */
  .venn-cloud .keyword { font-size: 11px; padding: 5px 10px; }
  .venn.is-active ~ .venn-cloud .keyword {
    transform:
      translate(calc(-50% + (var(--x, 0px) * 0.55)), calc(-50% + (var(--y, 0px) * 0.7)))
      scale(1)
      rotate(var(--rot, 0deg));
  }
}

@media (max-width: 600px) {
  /* keep only a curated subset on phones; hide the outer ring */
  .venn-cloud .keyword:nth-child(n+5):nth-child(-n+6),
  .venn-cloud .keyword:nth-child(n+11) { display: none; }
}

/* ==========================================================================
   Team member playroom v2 — feed of typed cards
   ========================================================================== */

/* Top strip: "You are viewing X's playroom" — sits inside the hero so the
   gradient washes behind it. Padding handled by .member-hero now. */
.playroom-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(40px, 6vh, 72px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 16px;
}

.playroom-strip__back { color: var(--ink-soft); }
.playroom-strip__back:hover { color: var(--blue); }

.playroom-strip__viewing strong {
  color: var(--ink);
  font-weight: 500;
}

.playroom-strip__visitors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dot--live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: #2ed27e;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* ----- Member hero — modul.so style with homepage typography ----- */
.member-hero {
  --accent: var(--blue);
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 13vh, 140px) var(--margin) clamp(48px, 7vh, 80px);
}

/* Per-member accent overrides */
.member-hero[data-member="kai"]      { --accent: #ff7a3d; }
.member-hero[data-member="vicky"]    { --accent: #6b8e23; }
.member-hero[data-member="michael"]  { --accent: #0029f5; }
.member-hero[data-member="anya"]     { --accent: #c43a64; }
.member-hero[data-member="bouch"]    { --accent: #2a8a8a; }

.member-hero__inner {
  max-width: 920px;
}

.member-avatar {
  display: block;
  width: clamp(72px, 7vw, 92px);
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--accent);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.18);
  transition: transform 480ms var(--ease);
  margin-bottom: 28px;
}

.member-avatar:hover { transform: translateY(-2px); }

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-role {
  margin: 0 0 16px;
}

.member-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 1;
  letter-spacing: -0.032em;
  margin: 0 0 28px;
  max-width: 14ch;
  color: var(--ink);
}

.member-name .dim {
  color: rgba(10, 10, 10, 0.32);
  font-weight: 400;
}

.member-bio {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 28px;
}

.member-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.status-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: #2ed27e;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.member-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: background 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}

.btn-primary {
  background: var(--ink);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--blue);
  transform: translateY(-1px);
}

.btn-icon {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Audio voice intro */
.audio-intro {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  margin-left: 4px;
}

.audio-play {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: #ff7a3d;
  color: var(--white);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11px;
  padding-left: 2px;
  flex-shrink: 0;
  transition: transform 240ms var(--ease);
}

.audio-play:hover { transform: scale(1.08); }

.waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.waveform span {
  width: 2px;
  height: var(--h, 50%);
  background: var(--ink-soft);
  border-radius: 0;
  opacity: 0.5;
  transition: opacity 240ms var(--ease);
}

.waveform span:nth-child(-n+10) { opacity: 1; background: var(--ink); }

.audio-duration {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ----- Modules section + grid ----- */
.modules {
  padding: 0 var(--margin) clamp(48px, 7vh, 80px);
}

.modules__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(220px, auto);
}

@media (max-width: 980px)  { .modules__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .modules__grid { grid-template-columns: 1fr; } }

/* common module chrome */
.module {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 240ms var(--ease);
}

.module:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.10);
  border-color: var(--line-strong);
}

/* size modifiers */
.module--wide   { grid-column: span 2; }
.module--tall   { grid-row: span 2; }
.module--feature { grid-column: span 2; grid-row: span 2; }

@media (max-width: 980px) {
  .module--wide, .module--feature { grid-column: span 2; }
}
@media (max-width: 600px) {
  .module--wide, .module--feature, .module--tall { grid-column: span 1; grid-row: auto; }
}

/* Chip-style module header — small pill with icon + label */
.module__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  align-self: flex-start;
  margin-bottom: 16px;
}

.module__icon { font-size: 11px; line-height: 1; }
.module__label { line-height: 1; }

.module__label--inverse {
  color: rgba(255, 255, 255, 0.55);
}

/* Dark card variant — high-contrast feature card */
.module--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.module--dark .stat__number,
.module--dark h3,
.module--dark p { color: var(--white); }

.module--dark .stat__label,
.module--dark p { color: rgba(255, 255, 255, 0.65); }

.module--dark:hover { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35); }

.module h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}

.module p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* --- Experience timeline --- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}

.timeline li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: 18px;
  position: relative;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--white);
  border: 1.5px solid var(--ink);
}

.timeline__year {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  flex-shrink: 0;
  width: 36px;
}

.timeline__role {
  color: var(--ink);
  font-weight: 400;
}

/* --- Listening (music) --- */
.listening__cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.listening__title {
  font-family: var(--font-serif);
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

.listening__meta { margin-bottom: 12px; }
.listening__meta h3 { margin-bottom: 2px; }

.listening__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-soft);
}

.listening__bar {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}

.listening__progress {
  width: 38%;
  height: 100%;
  background: var(--ink);
}

.listening__icon { font-size: 14px; opacity: 0.6; }

/* --- Reading (book) --- */
.reading__row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex: 1;
}

.reading__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
}

.reading__cover {
  width: 70px;
  border-radius: 0;
  background: linear-gradient(160deg, #d4302e 0%, #8b1815 60%, #5e0a0a 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 110px;
  box-shadow: 0 4px 12px rgba(139, 24, 21, 0.35);
}

.reading__cover span {
  font-family: var(--font-serif);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* --- Map --- */
.module--map { padding: 0; overflow: hidden; }

.module--map .module__head {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin-bottom: 0;
  background: var(--white);
}

.map__bg {
  flex: 1;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(0,0,0,0.03) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(0,0,0,0.03) 30px 31px),
    radial-gradient(circle at 50% 50%, rgba(0,41,245,0.06) 0%, transparent 60%),
    linear-gradient(135deg, #f3efea 0%, #e8e2d8 100%);
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}

.map__city {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 32px);
  color: var(--ink);
  letter-spacing: -0.022em;
  display: block;
}

.map__sub {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
  display: block;
}

/* --- Love (image with badge) --- */
.module--love {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.love__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.love__badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--white);
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

/* --- Process (with tabs) --- */
.module--process .process__content {
  margin: 8px 0 24px;
  flex: 1;
}

.process__content h3 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.018em;
}

.process__content p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 56ch;
}

.process__tabs {
  display: flex;
  gap: 4px;
  background: #f3f3f3;
  padding: 4px;
  border-radius: 0;
  align-self: flex-start;
}

.process__tab {
  padding: 7px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease);
  letter-spacing: -0.005em;
}

.process__tab:hover { color: var(--ink); }

.process__tab.is-active {
  background: var(--ink);
  color: var(--white);
}

/* --- Quote --- */
.module--quote .quote {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 8px 0 14px;
  color: var(--ink);
  flex: 1;
}

.quote__source {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* --- Stat --- */
.module--stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat__number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(80px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: auto;
}

.stat__label {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 28ch;
}

/* --- Now / Working on (accent card uses member's color) --- */
.module--accent {
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, white);
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 22%, white);
}

.now__title {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin: 8px 0 16px;
  flex: 1;
}

.now__updated {
  font-size: 11px;
  color: rgba(10, 10, 10, 0.5);
  letter-spacing: 0.04em;
}

/* --- List (bullets) --- */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.bullet-list li {
  padding-left: 14px;
  position: relative;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: var(--blue);
}

/* ----- Stack section: free-form scrapbook of objects on a cream canvas ----- */
.stack {
  background: #f3efea;
  padding: clamp(56px, 8vh, 96px) var(--margin) clamp(48px, 7vh, 80px);
  margin-top: clamp(32px, 5vh, 56px);
}

.section-head--on-cream { border-bottom-color: rgba(10,10,10,0.08); }

.stack__canvas {
  position: relative;
  width: 100%;
  height: clamp(540px, 78vh, 760px);
  margin-top: 36px;
}

.stack-item {
  position: absolute;
  width: clamp(80px, 7.5vw, 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 480ms var(--ease), z-index 0s linear 0s;
}

.stack-item img {
  width: 100%;
  height: auto;
  display: block;
  /* Stock product photos usually have white backgrounds; multiply blends them
     into the cream canvas so the objects appear cut-out without needing PNGs */
  mix-blend-mode: multiply;
  filter: drop-shadow(0 14px 22px rgba(40, 30, 20, 0.12));
  transition: filter 480ms var(--ease);
}

.stack-item:hover {
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 5;
}

.stack-item:hover img {
  filter: drop-shadow(0 22px 32px rgba(40, 30, 20, 0.22));
}

.stack-label {
  display: inline-block;
  background: #1a1a1a;
  color: #ffffff;
  padding: 4px 11px;
  border-radius: 0;
  font-family: 'Courier New', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-weight: 400;
}

.stack-item--center {
  width: clamp(140px, 13vw, 200px);
  z-index: 2;
}

.stack-item--center img {
  border-radius: 0;
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: normal;
  box-shadow: 0 18px 36px -10px rgba(40, 30, 20, 0.28);
}

.stack-label--cta {
  background: #1a1a1a;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: -0.005em;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stack-label__plus {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: var(--accent, var(--blue));
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.stack__hint {
  margin: 36px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

@media (max-width: 760px) {
  .stack__canvas { height: 1000px; }
  .stack-item { width: 80px; }
  .stack-item--center { width: 120px; }
}

/* ----- Member CTA (pre-footer) ----- */
.member-cta {
  padding: clamp(80px, 12vh, 140px) var(--margin) clamp(60px, 9vh, 100px);
  border-top: 1px solid var(--line);
}

.member-cta__inner { max-width: none; }

.member-cta__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  margin: 18px 0 32px;
  color: var(--ink);
}

.member-cta__title em {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent, var(--blue));
}

.member-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  letter-spacing: -0.018em;
  transition: color 280ms var(--ease), border-color 280ms var(--ease), gap 320ms var(--ease);
}

.member-cta__link:hover {
  color: var(--accent, var(--blue));
  border-color: var(--accent, var(--blue));
  gap: 22px;
}

.member-cta__link .arrow {
  display: inline-block;
  transition: transform 320ms var(--ease);
}

.member-cta__link:hover .arrow { transform: translateX(4px); }

/* ============ Team member room — grid-based, Webflow-friendly ============ */

.room--grid {
  padding: clamp(40px, 5vh, 64px) var(--margin) clamp(80px, 10vh, 140px);
  max-width: 1400px;
  margin: 0 auto;
}

.room__eyebrow {
  display: inline-block;
  margin-bottom: 24px;
}

.room__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
  grid-auto-flow: dense;
}

@media (max-width: 1100px) { .room__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .room__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .room__grid { grid-template-columns: 1fr; } }

/* Common card chrome */
.object {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
  padding: 16px;
  font-size: 14px;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease);
  will-change: transform;
}

/* Subtle scrapbook tilt — different per item without absolute positioning */
.room__grid .object:nth-child(4n+1) { transform: rotate(-1.4deg); }
.room__grid .object:nth-child(4n+2) { transform: rotate(1.2deg); }
.room__grid .object:nth-child(4n+3) { transform: rotate(-0.6deg); }
.room__grid .object:nth-child(4n+4) { transform: rotate(2deg); }

/* Hover: straighten + lift */
.room__grid .object:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  z-index: 5;
}

/* Polaroid */
.object--polaroid { padding: 14px 14px 28px; }
.object--polaroid .swatch { width: 100%; aspect-ratio: 1; border-radius: 0; overflow: hidden; }
.object--polaroid .caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.3;
}

/* Sketch (variant of polaroid) */
.object--sketch .sketch-bg {
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
  aspect-ratio: 4/3;
}
.object--sketch .sketch-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Quote */
.object--quote {
  padding: 20px 22px 22px;
  border-left: 3px solid var(--blue);
}
.object--quote .text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.object--quote .source {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Wider quote that spans 2 columns for emphasis */
.object--quote-wide { grid-column: span 2; }
.object--quote-wide .text { font-size: 17px; }
@media (max-width: 760px) { .object--quote-wide { grid-column: span 1; } }

/* List */
.object--list h4 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.object--list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

/* Sticky note */
.object--note {
  background: #fff8c5;
  border-color: #f0e08a;
  font-family: 'Caveat', 'Neue Montreal', cursive;
  font-size: 18px;
  line-height: 1.3;
  min-height: 110px;
  display: flex;
  align-items: center;
}

/* Music card */
.object--music h4 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.object--music .music-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.object--music .music-art {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fd007a, #0029f5);
  border-radius: 0;
}
.object--music .music-title {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.object--music .music-artist {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
}
.object--music .music-bar {
  height: 3px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
  margin-top: 12px;
}
.object--music .music-progress {
  width: 38%;
  height: 100%;
  background: var(--blue);
}

.room__hint {
  text-align: center;
  margin-top: 64px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* Case study */

.case-hero {
  padding: clamp(140px, 18vh, 220px) var(--margin) clamp(60px, 8vh, 100px);
}

.case-hero__title { max-width: 18ch; margin: 28px 0 36px; }

.case-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink-soft);
}

.case-cover {
  height: 80vh;
  margin: 0 var(--margin);
  border-radius: 0;
  overflow: hidden;
}

.case-cover img,
.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-body {
  padding: clamp(60px, 8vh, 120px) var(--margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  max-width: 1400px;
  margin: 0 auto;
}

.case-body .prose { grid-column: 3 / span 7; font-size: 15px; line-height: 1.6; }
.case-body .prose p { margin-bottom: 1.2em; }
.case-body .prose h2 { font-size: clamp(20px, 1.9vw, 28px); }
.case-body .prose .pull {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.18;
  color: var(--blue);
  margin: 1.8em 0;
  letter-spacing: -0.018em;
}

.case-stats {
  padding: clamp(60px, 8vh, 120px) var(--margin);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 800px) { .case-stats { grid-template-columns: 1fr; } }

.stat .number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat .label { color: var(--ink-soft); margin-top: 12px; font-size: 13px; max-width: 32ch; }

.case-image {
  margin: clamp(32px, 4vh, 60px) var(--margin);
  height: 80vh;
  border-radius: 0;
  overflow: hidden;
}

/* image-forward case study additions */
.case-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 28px);
  padding: clamp(24px, 3vh, 48px) var(--margin);
}

.case-gallery .gallery-item {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--canvas);
}

.case-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease);
}

.case-gallery .gallery-item:hover img { transform: scale(1.03); }

@media (max-width: 720px) {
  .case-gallery { grid-template-columns: 1fr; gap: 16px; }
  .case-gallery .gallery-item { aspect-ratio: 4 / 3; }
}

/* short, image-paired intro paragraph */
.case-intro {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 28ch;
  margin: 0;
}

.case-body--quote { padding-block: clamp(40px, 5vh, 80px); }
.case-body--credits { padding-block: clamp(40px, 5vh, 80px); }

/* ============ Client logos strip (phone-only) ============ */
/* Hidden by default on every viewport, including !important so no
   later rule (or default user-agent list rendering) can show it. */
.client-strip { display: none !important; }

/* Phones only — tablets and desktop never see this. */
@media (max-width: 600px) {
  .client-strip {
    display: block !important;
    padding: clamp(28px, 5vh, 56px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }

  .client-strip__label {
    margin: 0 var(--margin) 18px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--ink-soft);
  }

  .client-strip__row {
    list-style: none;
    margin: 0;
    padding: 0 var(--margin);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(20px, 5vw, 32px);
  }

  .client-strip__logo {
    flex: 0 1 auto;
    width: clamp(72px, 28vw, 104px);
    height: 32px;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: grayscale(1) opacity(0.78);
    list-style: none;
  }

  /* The desktop scroll-driven partners overlay doesn't fire on the static
     mobile showreel — hide it so this strip is the single client section. */
  .showreel__partners { display: none; }
}

/* ==========================================================================
   Mobile-only refinements requested in review
   ========================================================================== */
@media (max-width: 720px) {
  /* Tighten the vertical rhythm between sections on mobile —
     the desktop padding mins (60-110px) feel airy on small screens. */
  .statement      { padding-block: clamp(40px, 7vh, 64px); }
  .portfolio      { padding-block: clamp(40px, 6vh, 64px) clamp(24px, 4vh, 40px); }
  .team           { padding-block: clamp(40px, 6vh, 72px); }
  .contact-block  { padding: clamp(56px, 10vh, 96px) var(--margin) clamp(48px, 7vh, 72px); }
  .about-grid     { padding: clamp(40px, 6vh, 72px) var(--margin); }
  .values         { padding: clamp(40px, 6vh, 72px) var(--margin); }
  .team-cards     { padding: clamp(48px, 7vh, 80px) var(--margin); }
  .stats-strip    { margin-block: clamp(8px, 2vh, 16px); }
  .member-modules { padding: clamp(24px, 4vh, 48px) var(--margin) clamp(56px, 9vh, 100px); }
  .page-hero      { padding: clamp(80px, 11vh, 120px) var(--margin) clamp(28px, 4vh, 48px); }
  .portfolio--page { padding-top: clamp(80px, 11vh, 120px); padding-bottom: clamp(40px, 6vh, 64px); }

  /* Section heads inside these blocks also get a touch less margin */
  .portfolio__head     { margin-bottom: clamp(20px, 3vh, 32px); }
  .team__head          { margin-bottom: clamp(20px, 3vh, 32px); }
  .values__head        { margin-bottom: clamp(28px, 4vh, 48px); }
  .team-cards__head    { margin-bottom: clamp(28px, 4vh, 48px); }

  /* Showreel on mobile — STATIC. No sticky, no scroll-grow.
     Just the video at content width, with breathing room above and a
     tight handoff to the client logos below. */
  .showreel {
    height: auto;
    padding-top: 10vh;                          /* breathing room above */
    padding-bottom: 14vh;                       /* tighter to client logos */
  }
  .showreel__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    place-items: center;
    padding: 0;
  }
  .showreel__frame {
    width: 88vw !important;                     /* override JS-set width */
    box-shadow: 0 12px 40px -16px rgba(0,0,0,0.35);
    border-radius: 0 !important;
  }
  /* No dark overlay over the video on mobile (no partner-overlay UX here) */
  .showreel.is-full .showreel__frame::after,
  .showreel__frame::after { background: rgba(0,0,0,0) !important; }
  /* Client logos sit closer to the video, with a clear gap before the intersection */
  .client-strip {
    margin-top: 0;
    padding-top: clamp(14px, 2vh, 22px);        /* tighter to video */
    padding-bottom: clamp(48px, 8vh, 80px);     /* more space before "Two worlds, one agency" */
  }

  /* Hero — much smaller title and minimal padding so a slice of the showreel
     peeks under the fold of the first viewport. */
  .hero {
    min-height: 52vh;
    /* 60% tighter bottom padding pulls the showreel up to the hero */
    padding: clamp(20px, 3vh, 36px) var(--margin) clamp(6px, 1vh, 12px);
  }
  .hero__main { padding-bottom: clamp(4px, 1vh, 10px); }
  .hero__title {
    font-size: clamp(26px, 6.4vw, 38px);
    line-height: 1.05;
    max-width: 18ch;
  }
  .hero__foot { padding-top: 6px; margin-top: 4px; }

  /* Intersection — give the heading/graphic/hint trio breathing room.
     +20% over the previous mobile values so each gap is clearly visible. */
  .intersection__head { max-width: none; margin: 0 auto clamp(40px, 9vh, 72px) !important; }
  .intersection__head h2 { margin-top: 8px !important; }
  .intersection__head .eyebrow { margin-bottom: 0 !important; }
  .venn,
  .venn-stage .venn { margin: clamp(16px, 3.6vh, 32px) auto 0 !important; }
  .intersection__hint { margin-top: clamp(36px, 8vh, 64px) !important; font-size: 11px; }

  /* About page Venn cloud — stage mostly hidden on phones */
  .venn-stage { width: 100%; }

  /* Values 3-pillar grid → stack to single column on phones */
  .values__grid--three { grid-template-columns: 1fr !important; }

  /* Portfolio rail: stack the cards vertically rather than horizontal-scroll */
  .rail__track {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    gap: 20px;
    cursor: default;
    scroll-snap-type: none;
  }
  .rail__track .card {
    width: 100%;
    flex: 1 1 auto;
    scroll-snap-align: none;
  }

  /* Portfolio page grid — single column on phones (was 2-col at <900) */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Case study credits + next-case sit flush-left like the rest of the page */
  .case-body { padding-inline: var(--margin); }
  .case-body .prose { margin: 0; max-width: none; }
}