/* ============================================================
   cre(art)e — Global Stylesheet
   Editorial system · offwhite paper · offblack ink · metallic silver system
   PP Neue Montreal + Playfair Display italic · film grain
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Core surface — DEEP-SPACE DARK. Starfield cosmos base, elevated dark panels.
     (Promoted site-wide from the former home-page-only dark override so every
     page matches the space-dark hero + global starfield backdrop.) */
  --ink:      #07080b;     /* page base — deep space black */
  --ink-2:    #121419;     /* card surfaces */
  --ink-3:    #1a1d23;     /* elevated / hover */
  --chalk:    #ece9e1;     /* primary text — light on dark */
  --mist:     #a6a59d;     /* muted warm grey — secondary text */
  --warm-mid: #121419;     /* card surfaces */

  /* Metallic system — no color. Hierarchy via steel/silver/charcoal + sheen.
     Legible steel for text/lines; bright silver reserved for fills & metallic sheen. */
  --scarlet:  #d42b12;     /* bold red — accent across all surfaces */
  --electric: #d42b12;     /* red alias */
  --violet:   #14161b;     /* neutral recessed surface — dark */
  --neon:     #8b9097;     /* steel alias */
  --leaf:     #14161b;     /* neutral recessed surface — dark */
  --forest:   #e4e1d8;     /* was dark-on-light text → now light on dark */
  --olive:    #9a988f;     /* neutral grey */

  /* Metallic fill tokens — sheen, not legibility */
  --silver:    #c7cbd0;    /* bright silver — fills, badges, sheen highlights */
  --silver-2:  #aeb3b9;    /* mid silver — gradient shadow side */
  --silver-3:  #e9ebee;    /* near-white silver — top sheen */
  --steel-grad: linear-gradient(135deg, #e9ebee 0%, #c7cbd0 38%, #9aa0a7 72%, #c2c7cd 100%);

  /* Hairlines — light on dark */
  --hairline:   rgba(236,233,225,0.14);
  --hairline-2: rgba(236,233,225,0.20);
  --muted:      rgba(236,233,225,0.66);
  --muted-2:    rgba(236,233,225,0.40);

  /* ── Glassmorphism ── */
  --glass-bg:      rgba(255, 255, 255, 0.042);
  --glass-border:  rgba(255, 255, 255, 0.09);
  --glass-blur:    blur(22px) saturate(1.2);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;

  /* ── Gradient accents ── */
  --grad-scarlet:  linear-gradient(135deg, #d42b12 0%, #ff5a3c 60%, #ff4d6d 100%);
  --grad-glow-sm:  0 0 18px rgba(212,43,18,0.38), 0 4px 16px rgba(0,0,0,0.35);
  --grad-glow-lg:  0 0 36px rgba(212,43,18,0.28), 0 12px 40px rgba(0,0,0,0.55);

  /* ── Border radii ── */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-pill: 100px;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--scarlet) transparent;
  scrollbar-width: thin;
  overflow-x: clip;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--scarlet); border-radius: 4px; }

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: 'PP Neue Montreal', 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  cursor: auto;
  min-height: 100vh;
}

/* Film grain — the texture carried through from the entry gate */
body::after {
  content: "";
  position: fixed; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat 0 0;
  background-size: 300px 300px;
  animation: grainshift 0.32s steps(5) infinite;
  opacity: 0.045; z-index: 2000; pointer-events: none; will-change: transform;
  mix-blend-mode: multiply;
}
@keyframes grainshift {
  0%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)}
  20%{transform:translate(-4%,2%)} 30%{transform:translate(2%,-4%)}
  40%{transform:translate(-2%,5%)} 50%{transform:translate(-4%,2%)}
  60%{transform:translate(3%,0)} 70%{transform:translate(0,3%)}
  80%{transform:translate(-3%,0)} 90%{transform:translate(2%,2%)} 100%{transform:translate(1%,0)}
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: auto; }
img { display: block; max-width: 100%; }

/* ============== CUSTOM CURSOR ============== */
#cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--neon); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
}
#cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(199,203,208,0.55);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s;
}
body.hovering #cursor { width: 6px; height: 6px; background: var(--electric); }
body.hovering #cursor-ring { width: 56px; height: 56px; border-color: var(--electric); }
body.text-cursor #cursor { width: 2px; height: 20px; border-radius: 0; }
body.text-cursor #cursor-ring { width: 12px; height: 28px; border-radius: 0; }

/* ============== IMAGE TRAIL ============== */
.trail-img {
  position: fixed; width: 80px; height: 100px;
  pointer-events: none; z-index: 9990;
  transform: translate(-50%, -50%) rotate(var(--rot));
  object-fit: cover; opacity: 0;
  transition: opacity 0.1s;
  border: 1px solid var(--hairline-2);
}

/* ============== NAV ============== */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 40px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.45s ease, border-color 0.45s ease,
              padding 0.4s ease, backdrop-filter 0.45s ease,
              box-shadow 0.45s ease;
}
/* Frosted dark glass on scroll — works on both dark and light page variants */
nav.site-nav.scrolled {
  padding: 14px 40px;
  background: rgba(7, 8, 11, 0.62);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
          backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4);
}
.nav-logo { font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 22px; letter-spacing: 0.12em; color: var(--chalk); }
.nav-logo span { color: var(--scarlet); }
.nav-links { display: flex; gap: 32px; }
.nav-link {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mist); cursor: auto; transition: color 0.25s, background 0.25s;
  position: relative; padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.nav-link:hover { background: rgba(255,255,255,0.055); }
.nav-link::after {
  display: none; /* replaced by pill hover bg */
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--scarlet);
  transition: width 0.3s;
}
.nav-link:hover { color: var(--chalk); }
.nav-link:hover::after { width: 100%; }
.nav-link.is-active { color: var(--chalk); }
.nav-link.is-active::after { width: 100%; background: var(--scarlet); }

/* Dark-hero pages (home video reel): lift nav chrome to light until the user
   scrolls past the hero, where the metallic veil takes over and dark text reads. */
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-logo { color: #f2f3f4; }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-logo span { color: var(--silver); }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-link { color: rgba(242,243,244,0.78); }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-link:hover,
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-link.is-active { color: #ffffff; }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-toggle span { background: #f2f3f4; }

/* ============== SHARED TYPE ============== */
.eyebrow {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase;
}
.label-mist {
  font-size: 9px; letter-spacing: 0.3em; color: var(--mist);
  text-transform: uppercase;
}
.label-muted {
  font-size: 9px; letter-spacing: 0.2em; color: var(--muted);
  text-transform: uppercase;
}
.section-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.04em; line-height: 0.95;
}
.section-title em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; color: var(--scarlet); }
.section-subtitle {
  font-size: 10px; letter-spacing: 0.2em; color: var(--muted);
  text-transform: uppercase; margin-top: 12px;
}
.editorial {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--mist); line-height: 1.5;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 14px 30px; font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; cursor: auto; background: transparent;
  border-radius: var(--radius-pill);
  transition: background 0.3s, color 0.3s, border-color 0.3s,
              box-shadow 0.3s, transform 0.25s;
}
.btn-scarlet {
  border: 1px solid transparent;
  background: var(--grad-scarlet);
  color: #fff;
  box-shadow: var(--grad-glow-sm);
}
.btn-scarlet:hover {
  box-shadow: var(--grad-glow-lg);
  transform: translateY(-2px) scale(1.02);
}
.btn-ghost {
  border: 1px solid var(--glass-border);
  color: var(--chalk);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
  transform: translateY(-1px);
}
.btn-electric { border: 1px solid var(--glass-border); color: var(--chalk); border-radius: var(--radius-pill); }
.btn-electric:hover { background: rgba(255,255,255,0.06); color: var(--chalk); }

/* ============== SECTIONS / LAYOUT ============== */
.section { padding: 100px 40px; border-top: none; position: relative; }
.section-tight { padding: 60px 40px; }
.section-tag {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 32px;
}
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }

/* ============== HERO BASE ============== */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 60px 40px;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(199,203,208,0.20) 0%, transparent 58%),
              linear-gradient(180deg, #f7f7f2 0%, #ecebe3 100%);
}
.hero-grain {
  position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(2) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-2px,1px); }
  50% { transform: translate(1px,-1px); }
  75% { transform: translate(-1px,2px); }
}
.hero-eyebrow {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 20px; position: relative; z-index: 1;
  opacity: 0; animation: fadeUp 0.8s 0.3s forwards;
}
.hero-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: clamp(80px, 14vw, 200px);
  line-height: 0.9; letter-spacing: 0.01em; position: relative; z-index: 1;
  opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
}
.hero-title .line2 {
  color: transparent; -webkit-text-stroke: 1px rgba(58,58,56,0.38);
  margin-left: 60px; display: block;
}
.hero-sub-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 32px; position: relative; z-index: 1;
  opacity: 0; animation: fadeUp 0.8s 0.7s forwards;
  flex-wrap: wrap; gap: 24px;
}
.hero-descriptor {
  font-family: 'Playfair Display', serif; font-size: 20px;
  font-style: italic; color: var(--mist); max-width: 380px; line-height: 1.45;
}
.scroll-hint {
  font-size: 9px; letter-spacing: 0.25em; color: var(--muted);
  text-transform: uppercase; display: flex; align-items: center; gap: 12px;
}
.scroll-line {
  width: 40px; height: 1px; background: var(--hairline-2);
  animation: expandLine 1.5s 1.2s forwards;
  transform-origin: left; transform: scaleX(0);
}
@keyframes expandLine { to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Background watermark word */
.watermark {
  position: absolute; font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: 22vw; color: rgba(58,58,56,0.055);
  letter-spacing: -0.02em; line-height: 0.8;
  pointer-events: none; user-select: none;
  bottom: -20px; left: -20px; white-space: nowrap;
}

/* ============== VIDEO CENTERPIECE ============== */
.video-section {
  position: relative; padding: 120px 40px;
  display: flex; flex-direction: column; align-items: center;
  border-top: none;
}
.video-label {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 32px; align-self: flex-start;
}
.video-wrapper {
  width: 60%; max-width: 800px; position: relative;
  transition: width 1s cubic-bezier(0.76, 0, 0.24, 1), max-width 1s cubic-bezier(0.76, 0, 0.24, 1);
  cursor: auto;
}
.video-wrapper.expanded { width: 100%; max-width: 100vw; margin: 0 -40px; }
.video-frame {
  width: 100%; aspect-ratio: 16/9; background: var(--warm-mid);
  position: relative; overflow: hidden; border: 1px solid var(--hairline-2);
  transition: border-color 0.5s;
}
.video-wrapper.expanded .video-frame { border-color: transparent; }
.video-inner {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #efeee6 0%, #e2e1d8 30%, #ecebe3 60%, #e6e5dc 100%);
  animation: videoShift 8s ease-in-out infinite alternate;
}
@keyframes videoShift {
  0% { background: linear-gradient(135deg, #efeee6 0%, #e2e1d8 30%, #ecebe3 60%, #e6e5dc 100%); }
  50% { background: linear-gradient(200deg, #e2e1d8 0%, #ecebe3 30%, #efeee6 60%, #e4e3da 100%); }
  100% { background: linear-gradient(90deg, #e6e5dc 0%, #e2e1d8 40%, #efeee6 70%, #ecebe3 100%); }
}
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border: 1px solid rgba(240,237,230,0.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #f5f5f0; cursor: auto;
  transition: all 0.4s; background: rgba(10,10,10,0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.video-wrapper:hover .video-play { border-color: var(--scarlet); color: var(--scarlet); transform: translate(-50%, -50%) scale(1.1); }
.video-title-overlay {
  position: absolute; bottom: 24px; left: 24px;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 36px;
  color: rgba(240,237,230,0.15); letter-spacing: 0.05em;
  transition: color 0.5s, font-size 0.5s;
}
.video-wrapper.expanded .video-title-overlay { color: rgba(240,237,230,0.08); font-size: 64px; }
.video-meta {
  display: flex; justify-content: space-between; width: 100%;
  margin-top: 24px; font-size: 9px; letter-spacing: 0.25em;
  color: var(--muted); text-transform: uppercase;
}
.expand-btn {
  margin-top: 16px; border: 1px solid var(--hairline-2); padding: 12px 26px;
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--mist); cursor: auto; transition: all 0.3s; background: transparent;
}
.expand-btn:hover { border-color: var(--scarlet); color: var(--scarlet); }

/* ============== CASE GRID ============== */
.case-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2px; margin-top: 40px;
}
.case-grid.alt { grid-template-columns: 1fr 1fr 2fr; }
.case-grid.uniform { grid-template-columns: repeat(3, 1fr); }
.case-grid.quad { grid-template-columns: repeat(4, 1fr); }
.case-card {
  position: relative; overflow: hidden; cursor: auto;
  background: var(--ink-2); border: 1px solid var(--hairline-2);
  transition: border-color 0.3s;
  display: flex; flex-direction: column;
}
.case-card:hover { border-color: #333; }
.case-card-inner { aspect-ratio: 4/3; flex: 1 1 auto; position: relative; overflow: hidden; }
.case-bg {
  position: absolute; inset: 0;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.case-card:hover .case-bg { transform: scale(1.05); }
.case-bg.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.case-num {
  position: absolute; top: 16px; left: 16px;
  font-size: 9px; letter-spacing: 0.3em; color: var(--scarlet);
}
.case-tag-overlay {
  position: absolute; top: 16px; right: 16px;
  font-size: 8px; letter-spacing: 0.3em; color: rgba(240,237,230,0.5);
  text-transform: uppercase;
}
.case-info { padding: 20px; }
.case-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 22px;
  letter-spacing: 0.06em; margin-bottom: 8px;
}
.case-meta {
  font-size: 9px; letter-spacing: 0.2em; color: var(--muted);
  text-transform: uppercase;
}
.case-arrow {
  position: absolute; bottom: 20px; right: 20px;
  font-size: 14px; color: var(--scarlet); opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(-6px);
}
.case-card:hover .case-arrow { opacity: 1; transform: translateX(0); }

/* ===== Fluid case grid — bento layout, FLIP-repositioned on filter ===== */
.case-grid--fluid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
/* Soft rounded cards with breathing room + per-card accent */
.case-grid--fluid .case-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  background: var(--ink-2);
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s ease;
}
.case-grid--fluid .case-card-inner {
  aspect-ratio: auto;
  min-height: 240px;
  flex: 1 1 auto;
  border-radius: 18px 18px 0 0;
}
.case-grid--fluid .case-card:hover {
  transform: translateY(-8px);
  border-color: var(--cat, var(--scarlet));
  box-shadow: 0 22px 50px -20px var(--cat-glow, rgba(58,58,56,0.30));
}
/* Per-category accent — drives overlay chips, num, arrow, glow */
/* One cinematic treatment for every card — neutral lift, single accent edge.
   The photography is the only color; the chrome stays monochrome. */
.case-grid--fluid .case-card,
.case-grid--fluid .case-card[data-tags*="brand"],
.case-grid--fluid .case-card[data-tags*="motion"],
.case-grid--fluid .case-card[data-tags*="social-media"],
.case-grid--fluid .case-card[data-tags*="studio"],
.case-grid--fluid .case-card[data-tags*="graphic-design"],
.case-grid--fluid .case-card[data-tags*="cannabis"] { --cat: var(--scarlet); --cat-glow: rgba(0,0,0,0.6); }
.case-grid--fluid .case-tag-overlay {
  background: var(--cat);
  color: var(--ink);
  border: none;
  border-radius: 100px;
  padding: 6px 12px;
  font-weight: 700;
}
.case-grid--fluid .case-num { color: var(--cat); }
.case-grid--fluid .case-arrow { color: var(--cat); }
.case-grid--fluid .case-card:hover .case-title { color: var(--cat); }
.case-grid--fluid .case-info { padding: 18px 20px 20px; }
.case-grid--fluid .case-play-badge { background: var(--cat); color: #1a1a18; border-radius: 100px; }

/* Desktop bento — 6-col flow with varied spans */
@media (min-width: 901px) {
  .case-grid--fluid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: dense;
    gap: 20px;
  }
  .case-grid--fluid .case-card { grid-column: span 2; }
  .case-grid--fluid .case-card:nth-child(2)  { grid-column: span 4; }  /* Laguna reel */
  .case-grid--fluid .case-card:nth-child(3)  { grid-column: span 3; }  /* Brand */
  .case-grid--fluid .case-card:nth-child(4)  { grid-column: span 3; }  /* Motion */
  .case-grid--fluid .case-card:nth-child(5)  { grid-column: span 4; }  /* Costa Rica */
  .case-grid--fluid .case-card:nth-child(10) { grid-column: span 3; }  /* Graphic Design */
  .case-grid--fluid .case-card:nth-child(11) { grid-column: span 3; }  /* Cannabis */
  .case-grid--fluid .case-card:nth-child(12) { grid-column: span 6; }  /* Hashco finale */
  .case-grid--fluid .case-card:nth-child(2) .case-card-inner,
  .case-grid--fluid .case-card:nth-child(5) .case-card-inner,
  .case-grid--fluid .case-card:nth-child(12) .case-card-inner { min-height: 340px; }
}

/* ===== Video work cards (poster at rest, hover/focus to play) ===== */
.case-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.case-card--video:hover .case-video,
.case-card--video:focus-within .case-video { opacity: 1; }
.case-card--video:hover .case-bg { transform: scale(1.05); }
.case-card--video .case-num,
.case-card--video .case-tag-overlay { z-index: 2; }
.case-play-badge {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #1a1a18;
  background: var(--silver);
  padding: 5px 9px;
  transition: opacity 0.3s;
}
.case-card--video:hover .case-play-badge,
.case-card--video:focus-within .case-play-badge { opacity: 0; }

/* Background variants for cards — monochrome surfaces, lone accent */
.bg-warm-1 { background: linear-gradient(135deg, #efeee6 0%, #e2e1d8 100%); }
.bg-violet { background: linear-gradient(200deg, #ecebe3 0%, #e2e1d8 100%); }
.bg-scarlet { background: linear-gradient(170deg, #eceef1 0%, #c7cbd0 100%); }
.bg-electric { background: linear-gradient(135deg, #efeee6 0%, #e2e1d8 100%); }
.bg-mist { background: linear-gradient(160deg, #efeee6 0%, #e2e1d8 100%); }
.bg-chalk { background: linear-gradient(135deg, #f5f5f0 0%, #e6e5dc 100%); }
.bg-ember { background: linear-gradient(160deg, #dfe2e6 0%, #aeb3b9 100%); }

/* ============== SERVICES / COLOR HOVER ROW ============== */
.hover-expand-row { display: flex; gap: 2px; margin-top: 2px; }
.hex-block {
  height: 72px; flex: 1; cursor: auto;
  transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex; align-items: center; justify-content: center;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
}
.hex-block:hover { flex: 5; }
/* Neutral surfaces — the row reads as one quiet system; accent only on hover */
.hb-scarlet, .hb-electric, .hb-violet, .hb-neon, .hb-teal, .hb-surface {
  background: var(--ink-2); color: var(--mist);
  border: 1px solid var(--hairline);
  transition: flex 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.hex-block:hover {
  background: var(--ink-3); color: var(--chalk);
  border-color: var(--scarlet);
}

/* ============== FOOTER ============== */
footer.site-footer {
  padding: 60px 40px 32px;
  border-top: none;
  display: grid; grid-template-columns: 2.4fr 1fr 1.2fr; gap: 56px;
  position: relative;
}
.footer-brand-block .nav-logo { font-size: 44px; letter-spacing: 0.06em; }
.footer-brand-tag {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 16px; color: var(--mist); max-width: 280px;
  margin-top: 16px; line-height: 1.4;
}
.footer-col-title {
  font-size: 9px; letter-spacing: 0.3em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 20px;
}
.footer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-list li {
  font-size: 11px; color: var(--mist); cursor: auto;
  transition: color 0.3s;
}
.footer-list li:hover { color: var(--chalk); }
.footer-list a { color: var(--mist); transition: color 0.3s; }
.footer-list a:hover { color: var(--electric); }
.footer-contact-line {
  display: block; font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.05em; color: var(--mist);
  transition: color 0.3s;
}
.footer-contact-line:hover { color: var(--electric); }
.footer-contact-label {
  display: block; font-size: 8px; letter-spacing: 0.35em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
}
.footer-bottom {
  grid-column: 1/-1; display: flex; justify-content: space-between;
  align-items: center; padding-top: 28px; margin-top: 28px;
  border-top: none;
  font-size: 9px; letter-spacing: 0.3em; color: var(--muted);
  text-transform: uppercase;
}

/* ============== PAGE HEADER (sub-pages) ============== */
.page-header {
  min-height: 60vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 140px 40px 60px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
/* WHY: the .page-header on Contact had no stacking protection for its title,
   so the big background watermark sat in the same paint layer and visually
   competed with the H1. Lift the title chrome above the watermark. */
.page-header > .page-header-eyebrow,
.page-header > .page-header-title,
.page-header > .page-header-sub { position: relative; z-index: 2; }
.page-header > .page-header-title { text-shadow: 0 2px 18px rgba(245,245,240,0.6); }
.page-header > .page-header-sub {
  color: var(--chalk);
  text-shadow: 0 1px 14px rgba(245,245,240,0.7);
}

/* Aurora heroes (Work + Contact) — shared structure */
.page-header--aurora {
  min-height: 52vh; padding: 140px 40px 64px;
}
.page-header--aurora .watermark { color: rgba(58,58,56,0.055); z-index: 1; }
.page-header--aurora .page-header-eyebrow,
.page-header--aurora .page-header-title,
.page-header--aurora .page-header-sub { position: relative; z-index: 2; }
.page-header--aurora .page-header-title { text-shadow: 0 2px 20px rgba(245,245,240,0.6); }
.page-header--aurora .page-header-sub { max-width: 560px; }
.contact-header .aurora-blob--neon {
  background: radial-gradient(circle, rgba(199,203,208,0.30) 0%, transparent 64%);
}

/* ============== AURORA HEADER (work page) ============== */
.work-header { min-height: 42vh; padding-top: 120px; }
.aurora-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #f7f7f2 0%, #efeee6 100%);
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.55;
  mix-blend-mode: multiply; will-change: transform;
}
/* Light editorial wash — one restrained silver sheen in a field of warm paper,
   not a rainbow. Lets the title and watermark lead. */
.aurora-blob--scarlet {
  width: 58vw; height: 58vw; left: -12vw; top: -22vw;
  background: radial-gradient(circle, rgba(199,203,208,0.50) 0%, transparent 64%);
  animation: auroraDriftA 19s ease-in-out infinite;
}
.aurora-blob--violet {
  width: 62vw; height: 62vw; right: -16vw; top: -12vw;
  background: radial-gradient(circle, rgba(58,58,56,0.10) 0%, transparent 64%);
  animation: auroraDriftB 23s ease-in-out infinite;
}
.aurora-blob--neon {
  width: 42vw; height: 42vw; left: 26vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(154,160,167,0.22) 0%, transparent 64%);
  animation: auroraDriftC 27s ease-in-out infinite;
}
@keyframes auroraDriftA {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(13vw, 9vw) scale(1.16); }
  66% { transform: translate(6vw, -5vw) scale(0.94); }
}
@keyframes auroraDriftB {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-11vw, 7vw) scale(0.9); }
  66% { transform: translate(-5vw, 13vw) scale(1.2); }
}
@keyframes auroraDriftC {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-9vw, -11vw) scale(1.26); }
}
/* legibility overlay over the bright aurora */
.aurora-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(245,245,240,0.30) 0%, rgba(245,245,240,0.05) 45%, rgba(245,245,240,0.78) 100%);
}
/* cursor-following spotlight (set in script.js) */
.aurora-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    320px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(199,203,208,0.22) 0%,
    rgba(199,203,208,0.10) 42%,
    transparent 72%);
  mix-blend-mode: multiply;
}
.work-header .watermark { color: rgba(58,58,56,0.055); z-index: 1; }
.work-header .page-header-eyebrow,
.work-header .page-header-title,
.work-header .page-header-sub { position: relative; z-index: 2; }
.work-header .page-header-title { text-shadow: 0 2px 20px rgba(245,245,240,0.6); }
.work-header .page-header-sub { color: var(--chalk); text-shadow: 0 1px 14px rgba(245,245,240,0.7); }

/* ============== VIDEO-DRIVEN HEADER (homepage) ============== */
.page-header.has-video { min-height: 92vh; padding: 160px 40px 80px; }
.hero-video-stage {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0; pointer-events: none;
  will-change: transform, filter;
}
.hero-video-stage video {
  position: absolute; top: 50%; left: 50%;
  min-width: 110%; min-height: 110%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  will-change: transform, filter;
  transition: filter 0.35s ease-out;
}
.hero-video-noise {
  position: absolute; inset: -10%;
  pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(2) infinite;
}

/* Mouse-tracking spotlight that lives over the video */
.hero-video-spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(220,224,229,0.16) 0%,
    rgba(199,203,208,0.06) 35%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transition: background-position 0.15s linear;
}

/* Soft edge vignette — keeps the reel visible, protects the text corners */
.hero-video-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 110%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.65) 100%);
}

/* Hide the redundant STUDIO watermark on the video header */
.page-header.has-video .watermark { display: none; }

/* Header chrome sits above the video */
.page-header.has-video .page-header-eyebrow,
.page-header.has-video .page-header-title,
.page-header.has-video .page-header-sub { position: relative; z-index: 2; }
.page-header.has-video .page-header-title {
  animation: fadeUp 0.9s 0.4s both;
  text-shadow: 0 4px 36px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
}
/* The video header keeps a dark context — text stays light over the reel,
   even though the rest of the site is light. */
.page-header.has-video .page-header-title,
.page-header.has-video .hw-main { color: #f5f5f0; }
.page-header.has-video .hw-lead { color: rgba(245,245,240,0.72); }
.page-header.has-video .page-header-sub {
  color: #f5f5f0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
}
.page-header.has-video .page-header-eyebrow {
  color: var(--neon);
  text-shadow: 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: 0.03em;
  text-transform: none;
  animation: fadeUp 0.9s 0.4s both;
}
.page-header.has-video .page-header-sub {
  animation: fadeUp 0.9s 0.65s both;
}

/* Semi-transparent "studio" treatment — video visible through the letterforms,
   but always legible across bright AND dark frames                            */
.page-header-title .ghost-em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: rgba(240, 237, 230, 0.10);
  -webkit-text-stroke: 2px rgba(240, 237, 230, 1);
  text-shadow:
    0 4px 36px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 1px rgba(199, 203, 208, 0.5);
  letter-spacing: 0.005em;
  paint-order: stroke fill;
}
.page-header-eyebrow {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 24px;
}
.page-header-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(64px, 10vw, 160px); line-height: 0.95;
  letter-spacing: 0.01em;
}
.page-header-title em {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-weight: 900; color: var(--scarlet);
}

/* ── Homepage hero wordmark: stacked, mixed-type, scaled down ── */
.hero-wordmark {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 0.8; gap: 0.04em;
}
.hero-wordmark .hw-lead {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(22px, 3.4vw, 52px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist); margin-left: 0.55em;
}
.hero-wordmark .hw-main {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(52px, 8vw, 124px);
  letter-spacing: 0.005em; color: var(--chalk);
}
.hero-wordmark .hw-main em {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  color: var(--scarlet); font-size: 1.08em;
  margin: 0 -0.02em;
}
/* Single-line lowercase hero: "born to cre(art)e" on one row, (art) red & a touch larger */
.hero-wordmark .hw-single {
  font-size: clamp(38px, 6.2vw, 96px);
  text-transform: lowercase;
  line-height: 0.9;
  white-space: normal;
}
.hero-wordmark .hw-single em { font-size: 1.18em; }
.page-header-sub {
  margin-top: 28px; font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 22px; color: var(--mist);
  max-width: 540px; line-height: 1.45;
}

/* ============== KINETIC TYPOGRAPHIC HERO (home) ============== */
.page-header--kinetic {
  min-height: 92vh; padding: 160px 48px 88px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  position: relative; overflow: hidden;
  /* deep charcoal field shows through if the reel fails to load */
  background:
    radial-gradient(120% 90% at 50% 32%, #1e2225 0%, #14171a 46%, #0d0f11 100%);
}
/* Reel plays in full colour — no desaturation */
.page-header--kinetic .hero-video-stage video {
  filter: brightness(0.88) contrast(1.04);
}
.kinetic-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kinetic-field::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 40%, rgba(199,203,208,0.12) 0%, transparent 72%);
}
.kinetic-field::after {
  content: ''; position: absolute; inset: -10%;
  opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(2) infinite;
}
.page-header--kinetic .hero-wordmark {
  position: relative; z-index: 2;
  align-items: center; text-align: center;
}
/* lower-left corner placement */
.page-header--kinetic .hero-wordmark--corner {
  align-items: flex-start; text-align: left;
  max-width: min(600px, 80vw); margin-right: auto;
}
.page-header--kinetic .hero-wordmark--corner .hw-single {
  font-size: clamp(22px, 3.4vw, 52px);
  white-space: nowrap;
}
.page-header--kinetic .hw-single {
  color: #eef0f2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 4px 40px rgba(0,0,0,0.65);
}
.page-header--kinetic .hw-single em {
  /* bright silver accent on the (art) core */
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900;
  color: var(--silver);
}
/* when the canvas warp is live, the DOM text stays in the a11y tree but goes
   transparent so the rasterised letters lead; canvas sits on top */
.hero-wordmark.is-kinetic .hw-single { color: transparent; text-shadow: none; }
/* general: any kinetic-live headline hands its fill to the canvas while the
   DOM text stays in the accessibility tree (transparent, no ghost shadow) */
[data-kinetic].is-kinetic,
[data-kinetic].is-kinetic * { color: transparent !important; text-shadow: none !important; }
.kinetic-canvas {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  width: 100%; height: 100%;
}

/* ============== STUDIO / PROCESS ============== */
/* Containerless and alive: hollow metallic numerals that FILL with a
   cursor-tracked silver sheen on hover, a hairline that draws in on scroll,
   a growing vertical tick, and copy that leans toward the reader. */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 20px; row-gap: 28px;
}
.process-step {
  background: var(--ink-3); border: 0; padding: 32px 20px 28px;
  border-radius: 3px;
  position: relative; min-height: 0;
  display: flex; flex-direction: column;
  --sheen-x: 50%; --sheen-y: 28%;
}
/* top hairline — drawn left → right as the step scrolls into view */
.process-step::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--hairline);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), background-color 0.4s ease;
  border-radius: 3px 3px 0 0;
}
.process-step.is-in::before { transform: scaleX(1); }
.process-step:hover::before { background: var(--silver-2); }
/* vertical silver tick that grows down the left edge on hover */
.process-step::after {
  content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--silver-3), var(--silver-2));
  transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.process-step:hover::after { height: 52px; }

.process-num {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(56px, 6vw, 84px); font-weight: 400;
  line-height: 0.9; letter-spacing: -0.02em;
  position: relative; display: inline-block; width: max-content;
  /* rest state: hollow outline so the phase title leads */
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(180,170,160,0.28);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* hover: the numeral fills with a metallic sheen that tracks the cursor */
.process-num::before {
  content: attr(data-n); position: absolute; inset: 0;
  -webkit-text-stroke: 0;
  background: radial-gradient(150px circle at var(--sheen-x) var(--sheen-y),
    #ffffff 0%, #eef0f2 18%, #c7cbd0 48%, #9aa0a7 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transition: opacity 0.5s ease;
}
.process-step:hover .process-num { transform: translateY(-3px) scale(1.05); }
.process-step:hover .process-num::before { opacity: 1; }

.process-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 21px;
  font-weight: 600; letter-spacing: 0.04em; margin-top: 28px; margin-bottom: 14px;
  color: var(--chalk);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.process-step:hover .process-title { transform: translateX(7px); }
.process-desc {
  font-size: 13px; color: var(--muted); line-height: 1.7;
  transition: color 0.4s ease;
}
.process-step:hover .process-desc { color: var(--mist); }
/* discipline tag pinned to the base, with a sweep underline on hover */
.process-step > .label-muted {
  margin-top: auto; padding-top: 18px; align-self: flex-start;
  position: relative;
}
.process-step > .label-muted::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--silver-2); transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.process-step:hover > .label-muted::after { width: 100%; }

/* ── Process — colour evolution: seed → concept → build → release ── */
.process-step:nth-child(1)::before { background: rgba(196,155,88,1); }
.process-step:nth-child(2)::before { background: rgba(210,120,68,1); }
.process-step:nth-child(3)::before { background: rgba(210,78,44,1); }
.process-step:nth-child(4)::before { background: rgba(212,43,18,1); }
.process-step:nth-child(1):hover::before { background: rgba(220,180,100,1); }
.process-step:nth-child(2):hover::before { background: rgba(230,140,80,1); }
.process-step:nth-child(3):hover::before { background: rgba(230,100,60,1); }
.process-step:nth-child(4):hover::before { background: rgba(240,60,20,1); }
.process-step:nth-child(1)::after { background: linear-gradient(180deg, rgba(196,155,88,0.9), transparent); }
.process-step:nth-child(2)::after { background: linear-gradient(180deg, rgba(210,120,68,0.9), transparent); }
.process-step:nth-child(3)::after { background: linear-gradient(180deg, rgba(210,78,44,0.9), transparent); }
.process-step:nth-child(4)::after { background: linear-gradient(180deg, rgba(212,43,18,0.95), transparent); }
.process-step:nth-child(1):hover > .label-muted::after { background: rgba(196,155,88,0.9); }
.process-step:nth-child(2):hover > .label-muted::after { background: rgba(210,120,68,0.9); }
.process-step:nth-child(3):hover > .label-muted::after { background: rgba(210,78,44,0.9); }
.process-step:nth-child(4):hover > .label-muted::after { background: rgba(212,43,18,0.95); }

/* ── Process — interactive per-step effects ── */
.process-fx {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

/* DISCOVER — magnifying lens ring that zooms out from the numeral */
.process-fx-lens {
  position: absolute; top: 24px; left: 0;
  width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid rgba(196,155,88,0);
  box-shadow: 0 0 0 0 rgba(196,155,88,0), inset 0 0 0 0 rgba(196,155,88,0);
  transform: scale(0.6);
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s ease,
              box-shadow 0.6s ease;
}
.process-step[data-effect="discover"]:hover .process-fx-lens,
.process-step[data-effect="discover"].is-open .process-fx-lens {
  transform: scale(1.9);
  border-color: rgba(196,155,88,0.45);
  box-shadow: 0 0 28px rgba(196,155,88,0.18), inset 0 0 16px rgba(196,155,88,0.08);
}

/* SKETCH — pencil stroke sweeps top, then hand-drawn underline grows in */
.process-step[data-effect="sketch"] .process-fx::before {
  content: '';
  position: absolute; top: 0; left: -110%; width: 110%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(210,120,68,0.55), rgba(210,120,68,0.3), transparent);
  transition: left 0.75s cubic-bezier(0.22,1,0.36,1);
}
.process-step[data-effect="sketch"]:hover .process-fx::before,
.process-step[data-effect="sketch"].is-open .process-fx::before { left: 10%; }

.process-step[data-effect="sketch"] .process-fx::after {
  content: '';
  position: absolute; bottom: 56px; left: 0; width: 0; height: 1.5px;
  background: linear-gradient(90deg, rgba(210,120,68,0.7), rgba(210,120,68,0.15));
  border-radius: 2px;
  transition: width 0.6s 0.25s cubic-bezier(0.22,1,0.36,1);
}
.process-step[data-effect="sketch"]:hover .process-fx::after,
.process-step[data-effect="sketch"].is-open .process-fx::after { width: 72%; }

/* SKETCH — title gets a slight pencil texture on hover */
.process-step[data-effect="sketch"]:hover .process-title,
.process-step[data-effect="sketch"].is-open .process-title {
  letter-spacing: 0.055em;
}

/* BUILD — stacking bars rise from the bottom */
.process-fx .pfx-bar {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: rgba(210,78,44,0.5);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
              height 0.4s cubic-bezier(0.22,1,0.36,1),
              bottom 0.4s cubic-bezier(0.22,1,0.36,1);
}
.process-fx .pfx-bar:nth-child(2) {
  transition-delay: 0.1s;
  background: rgba(210,78,44,0.35);
}
.process-fx .pfx-bar:nth-child(3) {
  transition-delay: 0.2s;
  background: rgba(210,78,44,0.2);
}
.process-step[data-effect="build"]:hover .pfx-bar:nth-child(1),
.process-step[data-effect="build"].is-open .pfx-bar:nth-child(1) {
  transform: scaleX(1); height: 6px;
}
.process-step[data-effect="build"]:hover .pfx-bar:nth-child(2),
.process-step[data-effect="build"].is-open .pfx-bar:nth-child(2) {
  transform: scaleX(0.7); height: 5px; bottom: 9px;
}
.process-step[data-effect="build"]:hover .pfx-bar:nth-child(3),
.process-step[data-effect="build"].is-open .pfx-bar:nth-child(3) {
  transform: scaleX(0.42); height: 4px; bottom: 17px;
}

/* RELEASE — electric glow pulsing on the card boundary */
@keyframes elecPulse {
  0%   { box-shadow: 0 0 0 1px rgba(212,43,18,0.15), 0 0 16px rgba(212,43,18,0.15); }
  30%  { box-shadow: 0 0 0 2px rgba(255,80,20,0.3),  0 0 36px rgba(212,43,18,0.28); }
  60%  { box-shadow: 0 0 0 1px rgba(212,43,18,0.2),  0 0 22px rgba(255,60,0,0.2);  }
  100% { box-shadow: 0 0 0 1px rgba(212,43,18,0.15), 0 0 16px rgba(212,43,18,0.15); }
}
@keyframes elecSpark {
  0%   { opacity: 0; transform: translateY(0)   scaleY(0); }
  20%  { opacity: 1; transform: translateY(-4px) scaleY(1); }
  80%  { opacity: 1; transform: translateY(-4px) scaleY(1); }
  100% { opacity: 0; transform: translateY(-8px) scaleY(0.3); }
}
.process-step[data-effect="release"] .process-fx {
  border-radius: 2px;
  transition: box-shadow 0.3s ease;
}
.process-step[data-effect="release"]:hover .process-fx,
.process-step[data-effect="release"].is-open .process-fx {
  animation: elecPulse 1.4s ease-in-out infinite;
}
.process-step[data-effect="release"] .process-fx::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,80,20,0.8) 35%, rgba(212,43,18,1) 50%,
    rgba(255,80,20,0.8) 65%, transparent 100%);
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.process-step[data-effect="release"]:hover .process-fx::before,
.process-step[data-effect="release"].is-open .process-fx::before {
  transform: scaleX(1);
}
.process-step[data-effect="release"] .process-fx::after {
  content: '';
  position: absolute; top: -6px; left: 50%; width: 1px; height: 6px;
  background: rgba(255,80,20,0.9);
  transform: translateX(-50%) scaleY(0); opacity: 0;
  transition: none;
}
.process-step[data-effect="release"]:hover .process-fx::after,
.process-step[data-effect="release"].is-open .process-fx::after {
  animation: elecSpark 0.8s 0.3s ease-in-out both;
}
/* Electric: num takes on a red glow */
.process-step[data-effect="release"]:hover .process-num,
.process-step[data-effect="release"].is-open .process-num {
  text-shadow: 0 0 20px rgba(212,43,18,0.6), 0 0 40px rgba(212,43,18,0.3);
}

/* Editorial body copy */
.copy-quote {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(22px, 2.8vw, 28px); line-height: 1.45;
  color: var(--chalk); margin-bottom: 32px;
}
.copy-body {
  font-size: 15px; color: var(--mist); line-height: 1.75; max-width: 680px;
}
.section-head--compact { margin-bottom: 32px; }

.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}

/* ===== Meet Reece — featured editorial layout ===== */
.meet-reece {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px;
  align-items: stretch;
  border-top: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
.meet-reece-photo {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #ecebe3 0%, #e0dfd5 100%);
  border-right: 1px solid var(--hairline);
  min-height: 520px;
}
.meet-reece-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Lock focal point to the upper portion so the subject's head/face is
     never cropped off when the viewport narrows or the container resizes. */
  object-position: center top;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
  filter: saturate(0.95) contrast(1.05);
}
.meet-reece-photo:hover img { transform: scale(1.04); filter: saturate(1.05) contrast(1.1); }
.meet-reece-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.meet-reece-photo-caption {
  position: absolute; left: 20px; bottom: 18px; z-index: 1;
  font-size: 9px; letter-spacing: 0.3em; color: var(--neon);
  text-transform: uppercase;
}

.meet-reece-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 8px 32px 48px;
}
.meet-reece-greeting {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  letter-spacing: 0.04em; line-height: 1;
  color: var(--chalk);
}
.meet-reece-greeting em {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-weight: 900; color: var(--electric);
}
.meet-reece-role {
  margin-top: 14px; font-size: 10px; letter-spacing: 0.32em;
  color: var(--scarlet); text-transform: uppercase;
}
.meet-reece-quote {
  margin-top: 28px;
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 22px; line-height: 1.5; color: var(--chalk);
  border-left: 2px solid var(--scarlet); padding-left: 22px; max-width: 560px;
}
.meet-reece-bio {
  margin-top: 22px; font-size: 15px; line-height: 1.75;
  color: var(--mist); max-width: 580px;
}

.disciplines-block {
  margin-top: 36px; padding-top: 28px;
  border-top: none;
  display: grid; grid-template-columns: 200px 1fr; gap: 28px;
  align-items: start;
}
.disciplines-label {
  font-size: 9px; letter-spacing: 0.4em; color: var(--electric);
  text-transform: uppercase;
}
.disciplines-list {
  list-style: none; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 14px 32px;
}
.disciplines-list li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: 'Space Mono', monospace; font-size: 12px;
  color: var(--chalk); letter-spacing: 0.04em;
  border-bottom: 1px dashed var(--hairline-2);
  padding-bottom: 10px;
  transition: color 0.3s, border-color 0.3s;
}
.disciplines-list li:hover { color: var(--electric); border-color: var(--electric); }
.disciplines-list li .d-num {
  font-size: 10px; color: var(--scarlet); letter-spacing: 0.2em;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
}
.team-card {
  background: var(--ink-2); padding: 0;
  border: 1px solid var(--hairline-2);
}
.team-photo {
  aspect-ratio: 3/4; position: relative;
  background: linear-gradient(160deg, #ecebe3 0%, #e0dfd5 100%);
  overflow: hidden;
}
.team-photo::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 40%, rgba(199,203,208,0.18) 0%, transparent 50%);
}
.team-photo-initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 88px;
  color: rgba(58,58,56,0.12); letter-spacing: 0.06em;
}
.team-info { padding: 20px; }
.team-name {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 20px;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.team-role {
  font-size: 9px; letter-spacing: 0.25em; color: var(--scarlet);
  text-transform: uppercase;
}
.team-bio {
  margin-top: 12px; font-size: 11px; color: var(--mist); line-height: 1.6;
}

/* Trusted-by logo rail — monochrome marks on dark, hairline grid */
.clients-intro { margin-bottom: 28px; }
.clients-lead {
  font-size: 11px; letter-spacing: 0.2em; color: var(--muted);
  text-transform: uppercase; margin-top: 12px; max-width: 420px;
}
.clients-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
  background: var(--ink-2);
}
.client-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 28px 20px;
  border-right: 1px solid var(--hairline);
  transition: background 0.35s ease;
}
.client-cell:last-child { border-right: none; }
/* Per-cell accent — industry colour */
.client-cell:nth-child(1) { --cc: #e8861a; }  /* Startups — orange */
.client-cell:nth-child(2) { --cc: #2d9455; }  /* Cannabis — green */
.client-cell:nth-child(3) { --cc: #2563eb; }  /* Healthcare — blue */
.client-cell:nth-child(4) { --cc: #d42b12; }  /* Creative Direction — red */
.client-cell:hover { background: color-mix(in srgb, var(--cc) 12%, transparent); }
.client-cell-name {
  position: relative;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.14em; text-align: center;
  color: var(--cc);
  transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease;
  line-height: 1.1;
}
.client-cell-name::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--cc);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.clients-rail.is-in .client-cell-name::after { transform: scaleX(0.6); }
.client-cell:hover .client-cell-name {
  transform: translateY(-2px);
  text-shadow: 0 0 22px color-mix(in srgb, var(--cc) 60%, transparent);
}
.client-cell:hover .client-cell-name::after { transform: scaleX(1); }

/* ── Trusted By v2 — vibrant, hover-reveal company names ── */
.clients-rail--v2 {
  grid-template-columns: repeat(4, 1fr);
  border: none; background: none;
  gap: 2px;
}
.client-cell--v2 {
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: 180px; padding: 24px;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-right: none; overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.client-cell--v2:last-child { border-right: 1px solid var(--hairline); }
.client-cell--v2:hover {
  background: color-mix(in srgb, var(--cc) 10%, var(--ink-2));
  border-color: color-mix(in srgb, var(--cc) 40%, transparent);
  z-index: 2;
}
/* accent bar at top of each cell */
.client-cell--v2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cc);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.client-cell--v2:hover::before { transform: scaleX(1); }

.client-cell-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.client-cell--v2:hover .client-cell-inner { transform: translateY(-4px); }

.cc-num {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: 10px; letter-spacing: 0.22em; color: var(--muted);
  margin-bottom: 6px;
}
.client-cell--v2 .client-cell-name {
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.06em; text-align: left;
  color: var(--cc);
  transition: text-shadow 0.35s ease, transform 0.35s ease;
}
.client-cell--v2 .client-cell-name::after { display: none; }
.client-cell--v2:hover .client-cell-name {
  text-shadow: 0 0 18px color-mix(in srgb, var(--cc) 55%, transparent);
  transform: none;
}
.cc-tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
  opacity: 0.7;
}

/* company list — hidden until hover */
.client-companies {
  list-style: none; margin: 0; padding: 12px 0 0;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 5px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1),
              opacity 0.35s ease,
              transform 0.4s ease;
}
.client-cell--v2:hover .client-companies {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}
.client-companies li {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cc) 75%, var(--muted));
  padding: 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--cc) 20%, transparent);
  transition: color 0.25s ease;
}
.client-companies li:hover { color: var(--cc); }
/* When you add logos: hide the text fallback and show the mark */
.client-mark {
  display: block; max-width: 72%; max-height: 32px;
  width: auto; height: auto; object-fit: contain;
  opacity: 0.42; filter: grayscale(1) brightness(1.15);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.client-cell:hover .client-mark {
  opacity: 0.92; filter: grayscale(1) brightness(1.35);
}
.client-cell:has(.client-mark) .client-cell-name { display: none; }

/* Legacy strip (unused) */
.clients-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; padding: 40px 0; border-top: none;
  border-bottom: 1px solid var(--hairline);
}
.client-logo {
  padding: 24px 12px; text-align: center;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 18px;
  letter-spacing: 0.1em; color: var(--mist);
  transition: color 0.3s;
}
.client-logo:hover { color: var(--chalk); }

/* ============== CONTACT ============== */
.contact-layout {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px;
}
.contact-form { display: flex; flex-direction: column; gap: 32px; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 9px; letter-spacing: 0.3em; color: var(--scarlet);
  text-transform: uppercase;
}
.field-input, .field-textarea, .field-select {
  background: transparent; border: none; border-bottom: 1px solid var(--hairline-2);
  padding: 12px 0; font-family: 'Space Mono', monospace; font-size: 14px;
  color: var(--chalk); cursor: auto;
  transition: border-color 0.3s;
}
.field-input:focus, .field-textarea:focus, .field-select:focus {
  outline: none; border-bottom-color: var(--scarlet);
}
.field-textarea { resize: vertical; min-height: 100px; }
.field-input::placeholder, .field-textarea::placeholder { color: var(--muted-2); }
.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-chip {
  padding: 10px 18px; border: 1px solid var(--hairline-2);
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--mist); cursor: auto; transition: all 0.25s;
}
.radio-chip:hover { color: var(--chalk); border-color: var(--mist); }
.radio-chip.is-active {
  background: var(--silver); color: #1a1a18; border-color: var(--silver-2);
  position: relative; padding-right: 28px;
}
.radio-chip.is-active::after {
  content: '\2713';
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; line-height: 1; opacity: 0.85;
}

.contact-info { display: flex; flex-direction: column; gap: 40px; }
.contact-block-title {
  font-size: 9px; letter-spacing: 0.3em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 12px;
}
.contact-detail {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 22px; color: var(--chalk); line-height: 1.4;
  display: block; transition: color 0.3s;
}
a.contact-detail { color: var(--chalk); }
a.contact-detail:hover { color: var(--neon); }
.contact-detail-sub { font-family: 'Space Mono', monospace; font-style: normal;
  font-size: 11px; color: var(--mist); margin-top: 6px; letter-spacing: 0.1em;
  display: block; }

.success-msg {
  display: none; padding: 28px; border: 1px solid var(--scarlet);
  background: rgba(199,203,208,0.14);
}
.success-msg.is-visible { display: block; animation: fadeUp 0.6s forwards; }
.success-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 28px;
  color: var(--electric); letter-spacing: 0.06em; margin-bottom: 8px;
}
.success-text { font-size: 11px; color: var(--mist); line-height: 1.6; }

/* ============== SERVICES ============== */
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
}
.service-card {
  background: var(--ink-2); padding: 40px 32px;
  border: 1px solid var(--hairline-2);
  display: flex; flex-direction: column;
  min-height: 240px; transition: background 0.4s;
}
.service-card:hover { background: #eef0f3; }
.service-icon {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 40px;
  color: var(--scarlet); letter-spacing: 0.04em; margin-bottom: 24px;
  line-height: 1;
}
.service-name {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 24px;
  letter-spacing: 0.05em; margin-bottom: 12px;
}
.service-desc {
  font-size: 11px; color: var(--mist); line-height: 1.7; flex: 1;
}
.service-tags {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}
.service-tag {
  font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--hairline-2); color: var(--mist);
}

/* ============== STATS STRIP ============== */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.stats-strip--three {
  grid-template-columns: repeat(3, 1fr);
}
.stat-card {
  background: linear-gradient(150deg, #fffcef 0%, #fff8d6 50%, #fffcef 100%);
  padding: 36px 28px 32px;
  border: 1px solid rgba(196,145,26,0.28);
  border-top: 3px solid;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(196,145,26,0.18), 0 4px 12px rgba(196,145,26,0.12);
  border-color: rgba(212,175,55,0.55);
}
/* Gold shimmer top bar per card — all gold, slight variation */
.stat-card:nth-child(1) { border-top-color: #b8860b; }
.stat-card:nth-child(2) { border-top-color: #c9a227; }
.stat-card:nth-child(3) { border-top-color: #d4af37; }
/* Background noise texture on hover */
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.1), transparent);
  animation: goldSheen 3.5s ease-in-out infinite;
}
.stat-card:nth-child(2)::before { animation-delay: -1.2s; }
.stat-card:nth-child(3)::before { animation-delay: -2.4s; }
/* Radial gold glow on hover */
.stat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(212,175,55,0.14) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.stat-card:hover::after { opacity: 1; }
@keyframes goldSheen {
  0%   { left: -60%; }
  100% { left: 120%; }
}
.stat-num {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 64px;
  line-height: 1;
  background: linear-gradient(135deg, #8b6914 0%, #c4911a 35%, #d4af37 60%, #f5d060 80%, #c4911a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transition: background-position 0.5s ease;
}
.stat-card:hover .stat-num {
  background-position: right center;
}
.stat-num--headline {
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1.02;
}
.stat-num em {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #f5d060 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-label {
  font-size: 9px; letter-spacing: 0.3em; color: var(--mist);
  text-transform: uppercase; margin-top: 12px;
  transition: color 0.3s ease;
}
.stat-card:hover .stat-label { color: rgba(196,145,26,0.8); }
.stat-sub {
  font-size: 11px; color: var(--mist); line-height: 1.65;
  margin-top: 14px; border-top: none;
  padding-top: 14px; flex: 1;
}

/* ============== TICKER ============== */
.ticker {
  border-top: none; border-bottom: 1px solid var(--hairline);
  overflow: hidden; padding: 24px 0;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: 32px;
  letter-spacing: 0.06em; white-space: nowrap;
}
.ticker-track {
  display: inline-block; animation: ticker 30s linear infinite;
}
.ticker-track span { padding: 0 32px; color: var(--chalk); }
.ticker-track span em { font-family: 'Playfair Display', serif; font-style: italic; color: var(--scarlet); font-weight: 900; }
.ticker-track span.dot { color: var(--scarlet); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============== FILTER BAR ============== */
.filter-bar {
  display: flex; gap: 30px; flex-wrap: wrap; align-items: baseline;
  margin-top: 28px; margin-bottom: 48px;
}
/* borderless silver typography — minimalist underline transition, no boxes */
.filter-chip {
  position: relative; padding: 6px 0; border: 0; background: none;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mist); cursor: auto;
  transition: color 0.3s var(--ease, ease);
}
.filter-chip::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--scarlet);
  transition: width 0.32s var(--ease, ease);
}
.filter-chip:hover { color: var(--chalk); }
.filter-chip:hover::after { width: 100%; }
.filter-chip.is-active { color: var(--forest); }
.filter-chip.is-active::after { width: 100%; background: var(--forest); }

/* ============== PORTFOLIO · MASONRY MOSAIC ==============
   Flat, data-driven gallery. CSS multi-column masonry preserves each piece's
   native aspect ratio and packs varied heights Pinterest-style. Tiles are
   rendered from window.WORKS by script.js (PORTFOLIO module). Filtering uses
   GSAP Flip for a fluid reflow; clicking any tile opens the unified lightbox. */
.portfolio-grid {
  columns: 4;
  column-gap: 14px;
  margin-top: 8px;
}
.pf-tile {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  /* solid metallic-silver block — what the aperture opens out of */
  background: var(--steel-grad);
  border: 1px solid var(--hairline);
  /* fade/scale-in as tiles mount */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.pf-tile.is-mounted { opacity: 1; transform: none; }
/* --rv = reveal value 0→1, driven by scroll depth in script.js.
   Default 1 so the grid is full-colour without JS (graceful degradation). */
.pf-tile img,
.pf-tile video {
  display: block;
  width: 100%;
  height: auto;
  --rv: 1;
  filter: none;
  /* horizontal-shutter aperture: closed (rv=0) -> open (rv=1) */
  clip-path: inset(calc((1 - var(--rv)) * 50%) 0%);
  opacity: calc(0.06 + 0.94 * var(--rv));
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
              clip-path 0.6s cubic-bezier(0.22,1,0.36,1),
              opacity 0.6s ease;
  will-change: clip-path, opacity, transform;
}
.pf-tile:hover img,
.pf-tile:focus-visible img { transform: scale(1.045); }
.pf-tile:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
/* thin scrim + hover label */
.pf-tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(20,20,18,0) 0%, rgba(20,20,18,0.78) 100%);
  color: #f5f5f0;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.pf-tile:hover .pf-tile-meta,
.pf-tile:focus-visible .pf-tile-meta { opacity: 1; transform: none; }
.pf-tile-title {
  font-size: 11px; letter-spacing: 0.06em;
  font-weight: 500; line-height: 1.3;
}
.pf-tile-cat {
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--scarlet); margin-bottom: 4px;
}
/* play badge for video tiles */
.pf-tile--video .pf-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--silver); color: #1a1a18;
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 100px; z-index: 2;
}
.pf-tile--video::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: rgba(20,20,18,0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1; pointer-events: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.pf-tile--video::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-44%,-50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #f5f5f0;
  z-index: 2; pointer-events: none;
}
.pf-tile--video:hover::after { background: var(--silver); transform: translate(-50%,-50%) scale(1.08); }
.pf-tile--video:hover::before { border-left-color: #1a1a18; }
/* video tile with no poster image — show dark bg so it looks intentional */
.pf-tile--video:not(:has(img)) {
  background: #1a1a18;
  min-height: 200px;
}
.pf-tile--video:not(:has(img)) .pf-badge {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(-40px);
  background: rgba(245,245,240,0.12);
  color: var(--silver);
  border: 1px solid rgba(245,245,240,0.2);
}

.pf-empty {
  grid-column: 1 / -1;
  padding: 60px 0; text-align: center;
  color: var(--mist);
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}

@media (max-width: 1024px) { .portfolio-grid { columns: 3; } }
@media (max-width: 720px)  { .portfolio-grid { columns: 2; column-gap: 10px; } .pf-tile { margin-bottom: 10px; } }
@media (max-width: 460px)  { .portfolio-grid { columns: 2; column-gap: 6px; } .pf-tile { margin-bottom: 6px; } }

/* ============== PORTFOLIO · UNIFIED LIGHTBOX ============== */
.pf-lightbox {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vw;
  background: rgba(10,10,9,0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.pf-lightbox.is-open { opacity: 1; visibility: visible; }
.pf-lb-stage {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}
.pf-lb-media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-height: 78vh;
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.pf-lightbox.media-in .pf-lb-media { opacity: 1; transform: none; }
.pf-lb-media img,
.pf-lb-media video {
  display: block;
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #0a0a09;
}
/* caption: slides up + fades on open and on every nav change */
.pf-lb-caption {
  width: 100%;
  margin-top: 22px;
  text-align: center;
  color: #f5f5f0;
  opacity: 0; transform: translateY(22px);
}
.pf-lb-caption.caption-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s,
              transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.pf-lb-cat {
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--scarlet); margin-bottom: 10px;
  opacity: 0; transform: translateY(22px);
}
.pf-lb-caption.caption-in .pf-lb-cat {
  opacity: 1; transform: none;
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1) 0.04s,
              transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.04s;
}
.pf-lb-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3.4vw, 38px);
  font-weight: 400; line-height: 1.1;
  margin-bottom: 8px;
}
.pf-lb-title em { font-style: italic; }
.pf-lb-blurb {
  font-size: 13px; line-height: 1.6;
  color: rgba(245,245,240,0.72);
  max-width: 560px; margin: 0 auto;
}
.pf-lb-index {
  margin-top: 16px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.24em;
  color: rgba(245,245,240,0.5);
}
/* controls */
.pf-lb-btn {
  position: absolute; z-index: 3;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,245,240,0.08);
  border: 1px solid rgba(245,245,240,0.22);
  color: #f5f5f0; font-size: 20px; line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.pf-lb-btn:hover { background: var(--silver); border-color: var(--silver-2); color: #1a1a18; }
.pf-lb-close { top: -2px; right: -2px; width: 46px; height: 46px; font-size: 18px; }
.pf-lb-prev { left: -76px; top: 39vh; }
.pf-lb-next { right: -76px; top: 39vh; }
@media (max-width: 900px) {
  .pf-lb-prev { left: 4px; }
  .pf-lb-next { right: 4px; }
  .pf-lb-prev, .pf-lb-next { top: auto; bottom: -2px; }
  .pf-lb-close { top: -44px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tile, .pf-tile img, .pf-lb-media, .pf-lb-caption, .pf-lb-cat { transition: none !important; }
  .pf-lb-caption, .pf-lb-cat, .pf-lb-media { opacity: 1 !important; transform: none !important; }
  /* never leave the aperture closed when motion is reduced */
  .pf-tile img, .pf-tile video { --rv: 1 !important; clip-path: none !important; opacity: 1 !important; }
}

/* ============== CTA SECTION ============== */
.cta-section {
  padding: 150px 40px 140px; text-align: center; position: relative;
  overflow: hidden; border-top: none;
}
.cta-tag {
  font-size: 9px; letter-spacing: 0.4em; color: var(--scarlet);
  text-transform: uppercase; margin-bottom: 24px;
}
.cta-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif; font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95; letter-spacing: 0.01em;
}
.cta-title em {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-weight: 900; color: var(--scarlet);
}
.cta-actions {
  margin-top: 48px; display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap;
}

/* ============== RESPONSIVE ============== */
/* Touch devices: restore system cursor when custom cursor is hidden */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
  a, button, .nav-link, .case-card, .hex-block, .filter-chip, .radio-chip,
  .field-input, .field-textarea, .video-wrapper, .footer-list li, .btn,
  .expand-btn, .client-cell, .client-logo, .nav-toggle { cursor: pointer; }
}

@media (max-width: 900px) {
  nav.site-nav { padding: 20px 24px; }
  .nav-links { gap: 18px; }
  .section { padding: 56px 24px; }
  .hero { padding: 60px 24px; }
  .page-header { padding: 120px 24px 50px; }
  .hero-title .line2 { margin-left: 24px; }
  .hero-sub-row { flex-direction: column; align-items: flex-start; }
  .case-grid, .case-grid.alt, .case-grid.uniform, .case-grid.quad { grid-template-columns: 1fr; }
  .case-grid--fluid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .clients-strip, .clients-rail { grid-template-columns: repeat(2, 1fr); }
  .client-cell:nth-child(2n) { border-right: none; }
  .client-cell { border-bottom: 1px solid var(--hairline); min-height: 80px; }
  .client-cell:nth-last-child(-n+2) { border-bottom: none; }
  .page-header--aurora { min-height: 46vh; padding: 120px 24px 52px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  /* 3-card variant always stays in one row — compress to fit */
  .stats-strip--three {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px;
  }
  .stats-strip--three .stat-card {
    padding: 16px 10px 14px;
  }
  .stats-strip--three .stat-num {
    font-size: 22px;
  }
  .stats-strip--three .stat-num--headline {
    font-size: 28px !important;
    line-height: 1.15;
  }
  .stats-strip--three .stat-sub {
    font-size: 9px;
    line-height: 1.4;
    margin-top: 8px;
  }
  .contact-layout { grid-template-columns: 1fr; gap: 50px; }
  footer.site-footer { grid-template-columns: 1fr 1fr; padding: 40px 24px 24px; }
  .footer-brand-block { grid-column: 1/-1; }
  .video-wrapper { width: 100%; }
  .video-section { padding: 80px 24px; }

  /* Meet Reece responsive */
  .meet-reece { grid-template-columns: 1fr; gap: 0; }
  .meet-reece-photo { min-height: 380px; border-right: none; border-bottom: 1px solid var(--hairline); }
  /* No extra left padding here — the outer section already provides the
     page gutter, so an added 24px was pushing this text noticeably further
     right than the other section tags/titles on the page. */
  .meet-reece-content { padding: 32px 0; }
  .disciplines-block { grid-template-columns: 1fr; gap: 18px; }
  .disciplines-list { grid-template-columns: 1fr; }

  /* Video header on mobile */
  .page-header.has-video { min-height: 70vh; padding: 130px 24px 60px; }
}
@media (max-width: 560px) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
  .section { padding: 48px 24px; }
  .case-grid--fluid { grid-template-columns: 1fr; }
  a, button, .nav-link, .case-card, .hex-block, .filter-chip, .radio-chip,
  .field-input, .field-textarea, .video-wrapper, .footer-list li, .btn, .expand-btn,
  .client-logo { cursor: pointer; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .clients-strip, .clients-rail { grid-template-columns: 1fr; }
  .client-cell { border-right: none; border-bottom: 1px solid var(--hairline); }
  .client-cell:last-child { border-bottom: none; }
  .nav-link { font-size: 8px; letter-spacing: 0.2em; }
  .hero-title { font-size: 22vw; }
  /* Stats: single horizontal row — all cards visible, no scrollbar needed */
  .stats-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }
  .stats-strip--three {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .stat-card {
    padding: 16px 10px 14px;
  }
  .stat-num { font-size: 24px; }
  .stat-num--headline { font-size: 30px !important; line-height: 1.1; }
  .stat-sub { font-size: 9px !important; line-height: 1.4; }
  /* Reduce work page header height on phones */
  .page-header--aurora { min-height: auto; padding: 40px 20px 16px; }
  .page-header.has-video { min-height: 44vh; padding: 100px 20px 40px; }
  /* Header text: clamp min is 64px which is too big on a 393px phone */
  .page-header-title { font-size: 38px !important; line-height: 1; }
  .page-header-sub { font-size: 15px !important; margin-top: 12px; line-height: 1.5; }
  .page-header-eyebrow { font-size: 8px; margin-bottom: 12px; }
}

@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
  .section { padding: 48px 20px; }
  .section-tight { padding: 40px 20px; }
}

/* ============================================================
   ANIMATIONS & LIVELINESS
   Ink drops · Scroll reveal · Hover lift · Micro-interactions
   ============================================================ */

/* ── Scroll-reveal base ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays via data-delay attribute */
[data-reveal][data-delay="0"]  { transition-delay: 0s; }
[data-reveal][data-delay="1"]  { transition-delay: 0.12s; }
[data-reveal][data-delay="2"]  { transition-delay: 0.24s; }
[data-reveal][data-delay="3"]  { transition-delay: 0.36s; }
[data-reveal][data-delay="4"]  { transition-delay: 0.48s; }

/* Photo reveal — slides in from the left */
.meet-reece-photo[data-reveal] {
  transform: translateX(-24px);
}
.meet-reece-photo[data-reveal].is-in {
  transform: translateX(0);
}

/* ── Section divider line draw ── */
.section::before {
  content: '';
  position: absolute; top: 0; left: 0;
  height: 1px;
  background: var(--scarlet);
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.section.is-in::before { width: 80px; }

/* (Process hover treatment now lives in the STUDIO / PROCESS block above —
   containerless, with the hollow→metallic numeral fill. No card box here.) */

.hex-block {
  transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.35s;
}
.hex-block:hover {
  flex: 5;
  transform: scaleY(1.06);
  filter: brightness(1.08);
}

/* ── Animated section tags ── */
.section-tag {
  position: relative; display: inline-block;
  overflow: hidden;
}
.section-tag::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: var(--scarlet);
  transition: width 0.7s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-in .section-tag::after,
.section-tag.is-in::after { width: 100%; }

/* ── Meet Reece quote border grow ── */
.meet-reece-quote {
  position: relative;
  border-left: 2px solid transparent;
  transition: border-color 0.6s 0.5s ease;
}
.is-in .meet-reece-quote { border-color: var(--scarlet); }

/* ── Disciplines list stagger ── */
.disciplines-list li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s, transform 0.5s, color 0.3s, border-color 0.3s;
}
.is-in .disciplines-list li:nth-child(1) { opacity:1; transform:none; transition-delay: 0.05s; }
.is-in .disciplines-list li:nth-child(2) { opacity:1; transform:none; transition-delay: 0.12s; }
.is-in .disciplines-list li:nth-child(3) { opacity:1; transform:none; transition-delay: 0.19s; }
.is-in .disciplines-list li:nth-child(4) { opacity:1; transform:none; transition-delay: 0.26s; }
.is-in .disciplines-list li:nth-child(5) { opacity:1; transform:none; transition-delay: 0.33s; }
.is-in .disciplines-list li:nth-child(6) { opacity:1; transform:none; transition-delay: 0.40s; }

/* ============== DISCIPLINES · KINETIC HOVER ==============
   Sleek interactive response on Core Disciplines list.
   On hover/focus: subtle horizontal kinetic slide, the discipline
   name receives a shimmer wipe, the d-num pulses to electric, and
   a contextual micro-tag glides in from the right.
   ============================================================ */
.disciplines-list--kinetic li {
  position: relative;
  cursor: auto;
  padding-left: 12px;
  overflow: visible;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
}
.disciplines-list--kinetic li::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--scarlet);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.disciplines-list--kinetic li:hover,
.disciplines-list--kinetic li:focus-visible,
.disciplines-list--kinetic li.is-lit {
  color: var(--chalk);
  border-color: var(--electric);
  transform: translateX(6px);
  outline: none;
}
.disciplines-list--kinetic li:hover::before,
.disciplines-list--kinetic li:focus-visible::before,
.disciplines-list--kinetic li.is-lit::before {
  transform: scaleY(1);
  transform-origin: top center;
}
.disciplines-list--kinetic li .d-num {
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.disciplines-list--kinetic li:hover .d-num,
.disciplines-list--kinetic li:focus-visible .d-num,
.disciplines-list--kinetic li.is-lit .d-num {
  color: var(--electric);
  transform: translateY(-1px) scale(1.08);
}

/* Discipline name — shimmer sweep on hover */
.disciplines-list--kinetic .d-name {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    100deg,
    var(--chalk) 0%,
    var(--chalk) 38%,
    var(--electric) 50%,
    var(--chalk) 62%,
    var(--chalk) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.disciplines-list--kinetic li:hover .d-name,
.disciplines-list--kinetic li:focus-visible .d-name,
.disciplines-list--kinetic li.is-lit .d-name {
  background-position: 0 0;
}

/* Contextual micro-tag — own row, glides up on hover (no overlap) */
.disciplines-list--kinetic .d-tag {
  grid-column: 1 / -1;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--electric);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.disciplines-list--kinetic li:hover .d-tag,
.disciplines-list--kinetic li:focus-visible .d-tag,
.disciplines-list--kinetic li.is-lit .d-tag {
  opacity: 0.95;
  transform: translateY(0);
}

@media (max-width: 720px) {
  /* On mobile, keep the tag visible but tucked, drop the slide effect */
  .disciplines-list--kinetic li { padding-right: 0; }
  .disciplines-list--kinetic .d-tag {
    position: static;
    transform: none;
    opacity: 0.7;
    display: block;
    margin-top: 4px;
  }
  .disciplines-list--kinetic li:hover { transform: none; }
  /* tap-lit state: keep the glow, soften the slide */
  .disciplines-list--kinetic li.is-lit { transform: translateX(4px); }
  .disciplines-list--kinetic li.is-lit .d-tag { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .disciplines-list--kinetic li,
  .disciplines-list--kinetic li .d-num,
  .disciplines-list--kinetic .d-name,
  .disciplines-list--kinetic .d-tag,
  .hex-block--rich,
  .hex-block--rich .hb-label,
  .hex-block--rich .hb-blurb,
  .hex-block--rich::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Clients rail item stagger ── */
.clients-rail .client-cell {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s, transform 0.5s, background 0.35s, color 0.35s;
}
.clients-rail.is-in .client-cell:nth-child(1) { opacity:1; transform:none; transition-delay: 0.05s; }
.clients-rail.is-in .client-cell:nth-child(2) { opacity:1; transform:none; transition-delay: 0.13s; }
.clients-rail.is-in .client-cell:nth-child(3) { opacity:1; transform:none; transition-delay: 0.21s; }
.clients-rail.is-in .client-cell:nth-child(4) { opacity:1; transform:none; transition-delay: 0.29s; }

/* ── Hover glow on service blocks — one restrained accent lift ── */
.hb-scarlet:hover, .hb-electric:hover, .hb-violet:hover,
.hb-neon:hover, .hb-teal:hover, .hb-surface:hover {
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.7), 0 0 0 1px var(--scarlet) inset;
}

/* ============== HEX BLOCK · RICH HOVER REVEAL ==============
   Premium micro-interaction for the "What I Offer" banner.
   Each block holds a label + a hidden blurb. On hover the block
   expands (existing flex:5) AND a high-impact description glides
   into view from below with an expensive easing curve.
   ============================================================ */
.hover-expand-row--rich {
  align-items: stretch;
}
.hex-block--rich {
  position: relative;
  height: 96px;
  padding: 0 22px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  white-space: normal;
  transition:
    flex 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s,
    box-shadow 0.45s;
}
.hex-block--rich .hb-label {
  position: relative; z-index: 2;
  display: block;
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hex-block--rich .hb-blurb {
  position: relative; z-index: 2;
  display: block;
  margin-top: 10px;
  max-width: 0;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    max-width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hex-block--rich:hover {
  flex: 7;
  transform: scaleY(1.04);
  filter: brightness(1.06);
}
.hex-block--rich:hover .hb-label {
  transform: translateY(-2px);
}
.hex-block--rich:hover .hb-blurb {
  opacity: 0.92;
  transform: translateY(0);
  max-width: 520px;
}
/* Subtle sheen sweep on hover — adds the "expensive" feel */
.hex-block--rich::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.18) 48%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.hex-block--rich:hover::before {
  transform: translateX(120%);
}
/* Keyboard parity for accessibility */
.hex-block--rich:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
}
.hex-block--rich:focus-visible .hb-blurb {
  opacity: 0.92;
  transform: translateY(0);
  max-width: 520px;
}
/* Mobile — let blurbs sit visible underneath; no flex expansion */
@media (max-width: 720px) {
  .hover-expand-row--rich { flex-direction: column; }
  .hex-block--rich {
    height: auto;
    padding: 18px 22px;
    flex: 1 1 auto !important;
  }
  .hex-block--rich .hb-blurb {
    opacity: 0.85;
    transform: none;
    max-width: 100%;
    margin-top: 8px;
  }
  .hex-block--rich:hover { transform: none; }
}

/* ── "next world" earth gradient — shifts like a living globe ── */
.earth-text {
  background: linear-gradient(
    90deg,
    #1a5f9e 0%,
    #0d8c6e 22%,
    #2d8640 44%,
    #5a7c36 60%,
    #0d8c6e 78%,
    #1a5f9e 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 220% auto;
  animation: earthShift 7s ease-in-out infinite;
  font-style: italic;
}
@keyframes earthShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ── Philosophy title — more dramatic scale + "first" pop ── */
.section-title--philosophy {
  font-size: clamp(54px, 8.5vw, 108px);
  line-height: 0.88;
  letter-spacing: 0.01em;
}
.section-title--philosophy em {
  display: inline;
  font-size: 1.18em;
  letter-spacing: -0.02em;
  font-style: italic;
}

/* ── CTA watermark float ── */
.cta-section .watermark {
  animation: floatWatermark 8s ease-in-out infinite;
}
@keyframes floatWatermark {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(0.4deg); }
}

/* ── Pulsing scarlet dot on section tags ── */
.section-tag::before {
  content: '●';
  display: inline-block;
  margin-right: 6px;
  font-size: 5px;
  vertical-align: middle;
  color: var(--scarlet);
  animation: pulseTag 2.4s ease-in-out infinite;
}
@keyframes pulseTag {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.6); }
}

/* ── Button ripple feel ── */
.btn {
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  border-radius: inherit;
  transition: transform 0.5s, opacity 0.5s;
}
.btn:active::after {
  transform: scale(2.5);
  opacity: 0.08;
  transition: 0s;
}

/* (Process numeral transform + fill now owned by the STUDIO / PROCESS block.) */

/* ── Section enter for section.section (fires is-in on the section itself) ── */
section.section[data-reveal-section].is-in::before { width: 80px; }

/* ===========================================================
   GALLERY OVERLAY · expandable case galleries + video player
   =========================================================== */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
}
.gallery-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.gallery-locked { overflow: hidden; }

.gallery-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 38px 40px 22px;
  background: linear-gradient(to bottom, rgba(6,6,6,0.96) 60%, rgba(6,6,6,0));
}
.gallery-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: 10px;
}
.gallery-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--chalk);
}
.gallery-count {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mist);
  margin-top: 8px;
}
.gallery-close {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--chalk);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: auto;
  transition: all 0.3s;
}
.gallery-close:hover {
  border-color: var(--scarlet);
  color: var(--scarlet);
  transform: rotate(90deg) scale(1.08);
}

.gallery-grid {
  column-count: 3;
  column-gap: 14px;
  padding: 6px 40px 100px;
}
@media (max-width: 900px) { .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .gallery-grid { column-count: 1; } }

.g-tile {
  position: relative;
  break-inside: avoid;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  cursor: auto;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1), border-color 0.3s;
}
.gallery-overlay.is-open .g-tile { opacity: 1; transform: translateY(0); }
.g-tile:hover { border-color: var(--scarlet); }
.g-tile img,
.g-tile video {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) brightness(0.98);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.5s ease;
}
.g-tile:hover img,
.g-tile:hover video { transform: scale(1.04); filter: grayscale(0) brightness(1.04); }

/* video tile */
.g-tile-video .g-poster { position: relative; }
.g-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(245,245,240,0.85);
  background: rgba(10,10,10,0.42);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  pointer-events: none;
}
.g-play::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #f5f5f0;
  margin-left: 4px;
}
.g-tile-video:hover .g-play {
  border-color: var(--scarlet);
  background: rgba(199,203,208,0.30);
  transform: translate(-50%, -50%) scale(1.1);
}
.g-tile-video:hover .g-play::after { border-left-color: var(--scarlet); }
.g-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #f5f5f0;
  background: rgba(10,10,10,0.55);
  padding: 5px 9px;
  border: 1px solid rgba(245,245,240,0.24);
}
.g-tile-video.is-playing .g-play,
.g-tile-video.is-playing .g-badge { display: none; }
.g-tile-video.is-playing .g-poster img { display: none; }

/* ── Lightbox (single photo zoom) ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(4,4,4,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border: 1px solid var(--hairline-2);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 28px; right: 32px;
  width: 48px; height: 48px;
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--chalk);
  font-size: 20px;
  border-radius: 50%;
  cursor: auto;
  transition: all 0.3s;
}
.lightbox-close:hover { border-color: var(--scarlet); color: var(--scarlet); transform: rotate(90deg); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border: 1px solid var(--hairline-2);
  background: rgba(10,10,10,0.4);
  color: var(--chalk);
  font-size: 24px;
  border-radius: 50%;
  cursor: auto;
  transition: all 0.3s;
}
.lightbox-nav:hover { border-color: var(--scarlet); color: var(--scarlet); }
.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }
@media (max-width: 560px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 20px; }
  .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
}

/* ============================================================
   ENHANCEMENTS (v.02) — review additions
   Mobile nav · keyboard focus · reduced-motion · legibility
   Each block notes WHAT changed and WHY.
   ============================================================ */

/* ---- WHY: cursor:none hides the system pointer site-wide, which ALSO
   meant keyboard users had zero visible focus indicator. This restores a
   branded, on-brand scarlet focus ring — only for keyboard nav, so mouse
   clicks stay clean. Critical accessibility fix. ---- */
:focus-visible {
  outline: 2px solid var(--scarlet);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- WHY: gives keyboard / screen-reader users a way to jump past the
   fixed nav straight to the page content. Visually hidden until focused. ---- */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--forest); color: #f5f5f0;
  padding: 10px 16px; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; font-family: 'Space Mono', monospace;
  transition: top 0.25s ease;
}
.skip-link:focus { top: 12px; }
/* keep the skip target from hiding under the fixed nav on jump */
main { scroll-margin-top: 90px; }

/* ---- WHY: the smallest 8px labels sat below comfortable reading size,
   especially at 0.3–0.4em tracking. Nudge to ~9.5px for legibility while
   keeping the editorial micro-type look. ---- */
.case-tag-overlay, .service-tag, .footer-contact-label, .g-badge,
.team-photo + .team-info .team-role { font-size: 9.5px; }

/* ============== MOBILE NAV — hamburger + slide-in panel ============== */
/* WHY: previously the three nav links just shrank to 8px in the corner on
   phones (no real mobile menu). This adds an accessible toggle + full
   overlay menu with comfortable tap targets. */
.nav-toggle {
  display: none;               /* hidden on desktop */
  width: 44px; height: 44px;
  position: relative; z-index: 130;
  background: transparent; border: none; cursor: auto;
}
.nav-toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--chalk); border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.2s, top 0.35s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.site-nav.is-open .nav-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-toggle span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }

  /* difference-blend would invert the solid menu panel — switch it off while open */
  .site-nav.is-open { mix-blend-mode: normal; }
  .nav-logo { position: relative; z-index: 130; }   /* stays above the panel */

  .nav-links {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 36px;
    background: rgba(8,9,12,0.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.76,0,0.24,1), opacity 0.4s, visibility 0s 0.5s;
  }
  .site-nav.is-open .nav-links {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform 0.5s cubic-bezier(0.76,0,0.24,1), opacity 0.4s;
  }
  /* comfortable, readable links inside the dark overlay */
  .nav-links .nav-link { font-size: 18px; letter-spacing: 0.25em; padding: 14px 0; min-height: 44px; display: flex; align-items: center; justify-content: center; color: #ece9e1; }
  /* lock background scroll while menu is open */
  body.nav-locked { overflow: hidden; }
}

/* ============== REDUCED MOTION ============== */
/* WHY: this site is animation-heavy (autoplay video, film grain, ticker,
   reveals, custom cursor). Users who set "reduce motion" should get a calm,
   static experience instead of motion that can trigger discomfort. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* force reveal-on-scroll elements to their final visible state */
  [data-reveal], .disciplines-list li, .clients-rail .client-cell, .g-tile {
    opacity: 1 !important; transform: none !important;
  }
  .ticker-track { animation: none !important; transform: none !important; }
  .hero-grain, .hero-video-noise { animation: none !important; display: none !important; }
  .aurora-blob { animation: none !important; }
  .cta-section .watermark { animation: none !important; }
  #cursor, #cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  a, button, .nav-link, .case-card, .hex-block, .filter-chip, .radio-chip,
  .field-input, .field-textarea, .video-wrapper, .footer-list li, .btn,
  .expand-btn, .client-logo, .nav-toggle { cursor: pointer !important; }
}

/* ============================================================
   REDESIGN v.02 — DARK CINEMATIC OVERRIDES
   Layered last so they win the cascade. Restores native cursor,
   correct pointer affordances, and a readable editorial type scale.
   ============================================================ */

/* Custom cursor + image trail are retired — keep any leftover nodes hidden */
#cursor, #cursor-ring, .trail-img { display: none !important; }

/* Native cursor everywhere; pointer on the things you can actually click */
html, body { cursor: auto; }
a[href], button, .nav-link, .nav-toggle, .case-card, .case-card *,
.hex-block, .filter-chip, .radio-chip, .btn, .disciplines-list li,
.footer-list a, .contact-detail, .video-wrapper, summary, [role="button"] {
  cursor: pointer;
}
input, textarea, .field-input, .field-textarea, [contenteditable] { cursor: text; }

/* Editorial type scale — the old mono body read as a caption on big screens.
   Bring reading copy up to a humane size; keep micro-labels as accents. */
.copy-body        { font-size: 15px !important; line-height: 1.75 !important; }
.copy-quote       { font-size: clamp(20px, 2.4vw, 30px) !important; line-height: 1.35 !important; }
.meet-reece-bio   { font-size: 15px !important; line-height: 1.75 !important; }
.process-desc     { font-size: 13px !important; line-height: 1.7 !important; }
.section-subtitle { font-size: 12px !important; letter-spacing: 0.16em !important; }
.case-meta        { font-size: 11px !important; letter-spacing: 0.06em !important; }
.stat-sub, .success-text, .footer-list a { font-size: 13px !important; line-height: 1.65 !important; }
.disciplines-list li { font-size: 13px !important; }

/* Process numeral styling consolidated into the STUDIO / PROCESS block above
   (hollow stroke at rest → cursor-tracked metallic fill on hover). */

/* Tag chips on case cards: quiet dark glass, not a solid accent fill */
.case-tag-overlay { background: rgba(245,245,240,0.82) !important; color: var(--chalk) !important;
  border: 1px solid var(--hairline-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ============================================================
   DARK COSMOS — SITE-WIDE STARFIELD BACKDROP + DARK SURFACES
   Promotes the home-hero deep-space look to every page. A single fixed
   #cosmos layer (nebula gradient + twinkling star canvas, injected by
   script.js) sits behind all content; the rules below convert the
   remaining hardcoded light surfaces to dark so text stays legible and
   the stars read through the gaps between panels.
   ============================================================ */

/* ---- the global backdrop (behind everything, never intercepts clicks) ---- */
#cosmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* faint nebula glows over near-black — same recipe as the filmstrip hero */
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(86,72,140,0.20), transparent 60%),
    radial-gradient(55% 45% at 18% 78%, rgba(40,86,120,0.18), transparent 62%),
    radial-gradient(120% 90% at 50% 40%, #0a0b12 0%, #050609 70%, #030305 100%);
}
#cosmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* page base sits transparent so the fixed cosmos shows through every section */
body { background: transparent; }
/* freeze the full-screen grain repaint (texture stays, constant repaint dropped) */
body::after { animation: none !important; }

/* ---- nav: dark frosted veil on scroll (was light paper) ---- */
nav.site-nav.scrolled {
  background: rgba(14,16,20,0.62);
  border-bottom-color: rgba(236,233,225,0.14);
}

/* ---- hero / header washes → transparent so the starfield leads ---- */
.hero-bg { background: transparent !important; }
.aurora-bg { background: transparent !important; }
/* the aurora legibility overlay was a light wash → make it a soft dark vignette */
.aurora-bg::after {
  background: linear-gradient(180deg,
    rgba(3,3,5,0.10) 0%, rgba(3,3,5,0.02) 45%, rgba(3,3,5,0.55) 100%) !important;
}
/* aurora blobs used multiply (turns black on dark) → screen-blended nebula glow */
.aurora-blob { mix-blend-mode: screen !important; opacity: 0.5; }
.aurora-blob--scarlet { background: radial-gradient(circle, rgba(120,96,176,0.40) 0%, transparent 64%) !important; }
.aurora-blob--violet  { background: radial-gradient(circle, rgba(54,104,150,0.34) 0%, transparent 64%) !important; }
.aurora-blob--neon    { background: radial-gradient(circle, rgba(150,156,164,0.22) 0%, transparent 64%) !important; }
.contact-header .aurora-blob--neon { background: radial-gradient(circle, rgba(150,156,164,0.26) 0%, transparent 64%) !important; }
/* title halos were light — keep a faint dark-friendly glow */
.page-header--aurora .page-header-eyebrow,
.page-header--aurora .page-header-title,
.page-header--aurora .page-header-sub,
.contact-header .page-header-eyebrow,
.contact-header .page-header-title,
.contact-header .page-header-sub { position: relative; z-index: 2; }
.page-header--aurora .page-header-title,
.contact-header .page-header-title,
.work-header .page-header-title { text-shadow: 0 2px 24px rgba(0,0,0,0.55) !important; }
.page-header--aurora .page-header-sub,
.contact-header .page-header-sub,
.work-header .page-header-sub { text-shadow: 0 1px 14px rgba(0,0,0,0.5) !important; }
.work-header .watermark { color: rgba(236,233,225,0.05) !important; }

/* ---- giant background wordmarks → faint light ghost on dark ---- */
.watermark, .cta-section .watermark { color: rgba(236,233,225,0.07); }

/* ---- decorative tile / placeholder gradients → dark panels ---- */
.bg-warm-1, .bg-violet, .bg-electric, .bg-mist, .bg-ember {
  background: linear-gradient(135deg, #15171d 0%, #0d0f13 100%) !important;
}
.bg-scarlet { background: linear-gradient(170deg, #1c1f25 0%, #101216 100%) !important; }
.bg-chalk   { background: linear-gradient(135deg, #1a1d23 0%, #0e0f13 100%) !important; }
/* image placeholders (covered once the photo loads; dark avoids a bright flash) */
.meet-reece-photo, .team-photo {
  background: linear-gradient(160deg, #1a1c22 0%, #0e0f13 100%) !important;
}
/* animated video placeholder shimmer */
.video-inner {
  background: linear-gradient(135deg, #15171d 0%, #0e1014 30%, #121419 60%, #0d0f13 100%) !important;
  animation: none !important;
}

/* ---- services hover (was near-white) → elevated dark ---- */
.service-card:hover { background: var(--ink-3); }

/* ---- stat cards: cream gold panel → dark panel, gold text kept ---- */
.stat-card {
  background: linear-gradient(150deg, #1b1812 0%, #221d12 50%, #1b1812 100%) !important;
  border-color: rgba(196,145,26,0.32) !important;
}

/* ---- ghost buttons read on dark ---- */
.btn-ghost { border-color: var(--hairline-2); color: var(--chalk); }
.btn-ghost:hover { border-color: var(--chalk); color: var(--ink); background: var(--chalk); }

/* ---- case tag chips: dark glass instead of light paper ---- */
.case-tag-overlay {
  background: rgba(18,20,25,0.72) !important; color: var(--chalk) !important;
}

/* respect reduced motion: no nebula shimmer either (handled in JS for stars) */
@media (prefers-reduced-motion: reduce) {
  #cosmos { background-attachment: scroll; }
}

/* ---- Philosophy section: collapse the 1fr/2fr split on small screens ----
   The inline two-column grid leaves the title in a cramped third and the
   copy stretched into a narrow column on phones. Stack to one column and
   left-align so it reads as a normal block. */
@media (max-width: 760px) {
  .philosophy-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .philosophy-grid .section-title--philosophy { margin: 0 !important; }
  .philosophy-grid .copy-quote { margin-top: 0 !important; }
}

/* ===================================================================
   FLOATING 3D RETRO CRT TV — hero (home.html)
   Layout + starry-space backdrop. The model, the 3D starfield and the
   animated CRT screen are all drawn by Three.js into #tvCanvas (see
   script.js). The canvas is transparent, so this nebula gradient shows
   through behind the set. All rules are scoped to .tv-hero so nothing
   here can leak into the other pages that share styles.css.
   =================================================================== */
/* tv-stage: a tall scroll track. While scrolling through it, the inner
   .tv-sticky stays pinned so the set can rotate to reveal its back, then it
   releases into the Philosophy section below. */
.tv-stage {
  position: relative;
  width: 100%;
  height: 220vh;            /* ~1.2 screens of scroll drives the turn */
}
.tv-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

/* After the normal TV turn, keep the same WebGL scene pinned just long enough
   for its real remote to meet Selected Work. It then becomes document-bound
   again, so the landed remote scrolls naturally with that section. */
.tv-sticky.is-remote-handoff {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.tv-sticky.is-remote-landed {
  position: absolute;
  top: calc(100% - min(350px, 49vh));
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
/* The canvas still needs to receive clicks so the Launch Idea button
   remains clickable after the remote lands in the Selected Work section. */
.tv-sticky.is-remote-landed .tv-canvas {
  pointer-events: auto;
}
.tv-sticky.is-remote-handoff .tv-hint,
.tv-sticky.is-remote-landed .tv-hint {
  opacity: 0 !important;
}

.tv-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;            /* avoids the mobile URL-bar jump */
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  /* TRANSPARENT — no opaque backdrop here. The page-wide #cosmos starfield
     (fixed, z-index:0, behind #main) shows straight through the transparent
     WebGL canvas, so the exact same moving star field runs from the top of the
     hero down through every section with no seam and no darker band on top. */
  background: transparent;
  /* lets the page scroll normally on touch even while the set tracks the finger */
  touch-action: pan-y;
}

/* vignette removed — any edge darkening would read as a band against the
   uniform #07080b starfield. The hero now shares the exact page base colour. */
.tv-hero::after { content: none; }

/* the WebGL surface — fills the hero, transparent so the gradient shows through */
.tv-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  /* the canvas captures pointer moves for the parallax tilt */
  cursor: grab;
}
.tv-hero.is-grabbing .tv-canvas { cursor: grabbing; }

/* loading state — pulsing dot + label, centred; JS removes .is-loading when ready */
.tv-loading {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.62);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tv-hero.is-loading .tv-loading { opacity: 1; }
.tv-loading-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #46f08a;
  box-shadow: 0 0 12px rgba(70,240,138,0.9);
  animation: tvPulse 1.1s ease-in-out infinite;
}
@keyframes tvPulse { 0%,100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* interaction hint — bottom centre, gentle pulse */
.tv-hint {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
  pointer-events: none;
  animation: tvHintPulse 3.4s ease-in-out infinite;
}
@keyframes tvHintPulse { 0%,100% { opacity: 0.32; } 50% { opacity: 0.7; } }

/* second line of the hint — the scroll cue */
.tv-hint-scroll {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(226,59,46,0.8);
}

/* the drawn power-cord that leads into the next section (script.js animates
   its opacity + stroke-dashoffset from scroll progress) */
.tv-cord {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translateX(-50%);
  width: min(44vh, 340px);
  height: 46vh;
  z-index: 4;                /* above the vignette, in front of the set */
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.35s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
}
.tv-cord #tvCordArrow { opacity: 0; transition: opacity 0.3s ease; }

@media (max-width: 760px) {
  .tv-hero { height: 100vh; height: 100svh; }
  /* Shorten scroll-track on mobile — still shows the flip, just less scrolling */
  .tv-stage { height: 150vh; }
  /* keep sticky so the flip animation works on mobile */
  .tv-cord { display: none; }
  .tv-hint { letter-spacing: 0.18em; font-size: 10px; }
  /* Philosophy grid: drop to single column on small screens (home.html centers portal) */
  .philosophy-grid { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-hint, .tv-loading-dot { animation: none; }
  /* no pin/turn when motion is reduced — collapse the track, hide the cord */
  .tv-stage  { height: 100vh; height: 100svh; }
  .tv-sticky { position: relative; }
  .tv-cord   { display: none; }
}


/* ── Per-step card colour wash (top glow bleeds down) ── */


/* ── Per-step numeral accent stroke ── */
.process-step:nth-child(1) .process-num { -webkit-text-stroke: 1.5px rgba(196,155,88,0.60); }
.process-step:nth-child(2) .process-num { -webkit-text-stroke: 1.5px rgba(210,120,68,0.60); }
.process-step:nth-child(3) .process-num { -webkit-text-stroke: 1.5px rgba(210,78,44,0.60); }
.process-step:nth-child(4) .process-num { -webkit-text-stroke: 1.5px rgba(212,43,18,0.65); }

/* ── Per-step label accent on hover ── */
.process-step:nth-child(1) > .label-muted { color: rgba(196,155,88,0.60); }
.process-step:nth-child(2) > .label-muted { color: rgba(210,120,68,0.60); }
.process-step:nth-child(3) > .label-muted { color: rgba(210,78,44,0.60); }
.process-step:nth-child(4) > .label-muted { color: rgba(212,43,18,0.65); }




/* ================================================================
   TRUSTED BY — Full-Width Editorial Rows
   ================================================================ */
.clients-rows { margin-top: 8px; }

.client-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 48px;
  padding: 28px 0 28px 16px;
  border-top: none;
  position: relative;
  cursor: default;
  overflow: hidden;
}
.client-row:last-child { border-bottom: 1px solid var(--hairline); }

/* coloured left bar slides down on hover */
.client-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.client-row:nth-child(1)::before { background: rgba(196,155,88,1); }
.client-row:nth-child(2)::before { background: rgba(210,120,68,1); }
.client-row:nth-child(3)::before { background: rgba(210,78,44,1); }
.client-row:nth-child(4)::before { background: rgba(212,43,18,1); }
.client-row:hover::before { transform: scaleY(1); }

.cr-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  grid-row: 1 / 3;
  align-self: center;
}

.cr-name {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 500;
  color: var(--chalk);
  line-height: 1;
  letter-spacing: -0.01em;
  grid-column: 2; grid-row: 1;
  transition: color 0.35s ease;
}
.client-row:nth-child(1):hover .cr-name { color: rgba(196,155,88,1); }
.client-row:nth-child(2):hover .cr-name { color: rgba(210,120,68,1); }
.client-row:nth-child(3):hover .cr-name { color: rgba(210,78,44,1); }
.client-row:nth-child(4):hover .cr-name { color: rgba(212,43,18,1); }

.cr-tag {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  grid-column: 3; grid-row: 1;
  align-self: center;
  text-align: right;
  white-space: nowrap;
}

.cr-companies {
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0.04em;
  grid-column: 2 / -1;
  grid-row: 2;
  margin-top: 10px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .client-row {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto auto;
  }
  .cr-tag {
    grid-column: 2; grid-row: 2;
    text-align: left; margin-top: 4px;
  }
  .cr-companies { grid-column: 2; grid-row: 3; }
  .cr-num { grid-row: 1; align-self: start; padding-top: 6px; }
}




/* ================================================================
   SELECTED WORK — Full-width horizontal rows (photo | video)
   title + type above · description below
   ================================================================ */
.work-grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 48px;
}

.wp-project { display: flex; flex-direction: column; gap: 0; }

/* ── Header row: num · title · artist · type pill ── */
.wp-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;
}
.wp-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.wp-title-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: 1;
}
.wp-title {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--chalk);
  letter-spacing: -0.01em;
  line-height: 1;
}
.wp-project--2 .wp-title { color: var(--chalk); }

.wp-artist {
  font-size: 13px;
  color: var(--mist);
  font-weight: 400;
  letter-spacing: 0.03em;
}
/* mobile-only caption duplicate — hidden on desktop, shown inline next to
   the title at <=768px (see mobile pass below). Lets the mobile caption
   text differ from the desktop artist line without touching desktop. */
.wp-artist-mobile { display: none; }
.wp-type {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline-2);
  padding: 6px 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Media row: photo | video side by side ── */
.wp-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}
.wp-photo {
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.wp-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  aspect-ratio: 16 / 9;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.wp-project:hover .wp-img { transform: scale(1.03); }

/* hover overlay — "view full" hint */
.wp-photo::after {
  content: '↗ VIEW FULL';
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  background: rgba(10,11,20,0.72);
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.wp-photo:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* "Process" badge for secondary B612 image */
.wp-photo--secondary {
  position: relative;
}
.wp-photo--secondary::before {
  content: 'PROCESS';
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  background: rgba(212,43,18,0.82);
  padding: 3px 7px;
  border-radius: 2px;
  pointer-events: none;
}

/* ── Lightbox modal ── */
.wp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4,5,14,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lbFadeIn 0.22s ease;
}
.wp-lightbox.is-open { display: flex; }
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wp-lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.70);
  animation: lbSlideUp 0.28s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
@keyframes lbSlideUp {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.wp-lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  background: none; border: none;
  cursor: pointer;
  padding: 6px 10px;
}
.wp-lightbox-close:hover { color: #fff; }

.wp-video { position: relative; background: #000; }
.wp-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
}
/* maintain 16:9 on video cell */
.wp-video::before {
  content: ''; display: block; padding-bottom: 56.25%;
}

/* coloured bottom line per project */
.wp-project::after {
  content: ''; display: block; height: 3px; width: 0;
  background: rgba(196,155,88,1);
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
}
.wp-project--2::after { background: rgba(212,43,18,1); }
.wp-project.is-in::after,
.wp-project:hover::after { width: 100%; }

/* ── Footer: description ── */
.wp-footer {
  padding: 16px 0 0;
  border-top: none;
}
.wp-desc {
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(220, 217, 210, 0.88);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 680px;
}

@media (max-width: 768px) {
  .wp-media { grid-template-columns: 1fr; }
  .wp-video::before { padding-bottom: 56.25%; }
  .wp-video { position: relative; }

  /* Selected Work header — decluttered mobile pass. Title leads, the
     client/medium line drops to a quiet caption, and the category pill
     loses its box so the row reads as one clean stack instead of a
     crowded baseline row fighting for space. Desktop is untouched —
     still num · title · artist · boxed pill on one line (see base rules
     above). This also fixes the "+ READ MORE" hint overflowing past the
     screen edge, since it now stacks under a simple flex column instead
     of getting squeezed into the old 3-column grid below. */
  .wp-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 14px;
  }
  .wp-title-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }
  .wp-title {
    font-size: clamp(24px, 7.5vw, 30px);
    line-height: 1.08;
  }
  /* desktop caption hidden on mobile — the mobile-only duplicate
     (.wp-artist-mobile) sits inline next to the title instead */
  .wp-artist {
    display: none;
  }
  .wp-artist-mobile {
    display: inline;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--mist);
    opacity: 0.7;
  }
  .wp-type {
    margin-left: 0;
    border: none;
    padding: 0;
    font-size: 9px;
    letter-spacing: 0.2em;
    opacity: 0.65;
  }
  .wp-header::after {
    margin-top: 10px;
  }
}

/* ── Portfolio Portal ── */
.work-portal {
  margin-top: 48px;
  border-top: none;
}
.work-portal-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 0;
  text-decoration: none;
  border-bottom: none;
  transition: border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.work-portal-link::before {
  content: '';
  position: absolute;
  inset: 0;
  /* radial light globe — no boxy outline */
  background: radial-gradient(ellipse 55% 200% at 34% 50%, rgba(196,155,88,0.11) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.work-portal-link:hover::before { opacity: 1; }
/* keep border unchanged on hover — no box outline */
.work-portal-link:hover { border-color: transparent; }

.work-portal-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.work-portal-heading {
  font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
  font-size: clamp(26px, 3.2vw, 52px);
  font-weight: 600;
  color: var(--chalk);
  letter-spacing: -0.02em;
  line-height: 1;
  flex: 1;
}
.work-portal-heading em {
  font-style: italic;
  background: linear-gradient(90deg, #FF6B6B, #C061D4, #5B9BFF, #FF8E53, #FF6B6B);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: builtShimmer 4s linear infinite;
}
@keyframes builtShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.work-portal-arrow {
  font-size: clamp(24px, 2.5vw, 40px);
  color: rgba(196,155,88,0.7);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
  flex-shrink: 0;
}
.work-portal-link:hover .work-portal-arrow {
  transform: translateX(10px);
  color: rgba(196,155,88,1);
}

@media (max-width: 600px) {
  .work-portal-link { flex-direction: column; align-items: flex-start; gap: 12px; }
  .work-portal-arrow { display: none; }
}

#selected-work { padding-bottom: 40px; }

/* ── Nav logo "Studio" prefix ── */
.nav-logo-studio {
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.55;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.35em;
}

/* ================================================================
   WORK PORTAL — arrow inline with "built"
   ================================================================ */
.work-portal-heading {
  flex: 1;
}
.work-portal-heading .work-portal-arrow {
  display: inline-block;
  font-size: 0.85em;
  margin-left: 0.2em;
  vertical-align: middle;
  color: #FF6B6B;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
}
.work-portal-link:hover .work-portal-heading .work-portal-arrow {
  transform: translateX(8px);
  color: rgba(196,155,88,1);
}
/* hide the old standalone arrow (now inside heading) */
.work-portal-arrow:not(.work-portal-heading .work-portal-arrow) {
  display: none;
}

/* ================================================================
   TRUSTED BY — bold color fills, always-on
   ================================================================ */

/* Left bar: always visible, not just on hover */
.client-row::before {
  transform: scaleY(1) !important;
  width: 3px;
  opacity: 1;
}

/* Names: always colored */
.client-row:nth-child(1) .cr-name { color: #f5c842; }
.client-row:nth-child(2) .cr-name { color: #4ac56c; }
.client-row:nth-child(3) .cr-name { color: #60a5fa; }
.client-row:nth-child(4) .cr-name { color: #d42b12; }

/* Left bar colors updated to match */
.client-row:nth-child(1)::before { background: #f5c842; }
.client-row:nth-child(2)::before { background: #4ac56c; }
.client-row:nth-child(3)::before { background: #60a5fa; }
.client-row:nth-child(4)::before { background: #d42b12; }

/* Subtle glassy colored fill per row */
.client-row:nth-child(1) { background: rgba(245,200,66, 0.05); }
.client-row:nth-child(2) { background: rgba(74,197,108, 0.05); }
.client-row:nth-child(3) { background: rgba(96,165,250, 0.05); }
.client-row:nth-child(4) { background: rgba(212,43,18,  0.05); }

/* Soft name glow on hover for extra punch */
.client-row:nth-child(1):hover .cr-name { color: #f5c842; text-shadow: 0 0 24px rgba(245,200,66,0.55); }
.client-row:nth-child(2):hover .cr-name { color: #4ac56c; text-shadow: 0 0 24px rgba(74,197,108,0.55); }
.client-row:nth-child(3):hover .cr-name { color: #60a5fa; text-shadow: 0 0 24px rgba(96,165,250,0.55); }
.client-row:nth-child(4):hover .cr-name { color: #d42b12; text-shadow: 0 0 24px rgba(212,43,18,0.55); }

/* Deepen fill on hover */
.client-row:nth-child(1):hover { background: rgba(245,200,66, 0.09); }
.client-row:nth-child(2):hover { background: rgba(74,197,108, 0.09); }
.client-row:nth-child(3):hover { background: rgba(96,165,250, 0.09); }
.client-row:nth-child(4):hover { background: rgba(212,43,18,  0.09); }

/* ================================================================
   STUDIO TICKER — replaces "always building" canvas
   ================================================================ */
.studio-ticker {
  display: none; /* desktop only — shown in min-width query */
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(236,233,225,0.55);
}
.ticker-label {
  color: var(--scarlet);
}
.ticker-separator {
  opacity: 0.35;
}
.ticker-word {
  color: rgba(236,233,225,0.85);
  min-width: 7ch;
  transition: opacity 0.3s ease;
}
.ticker-cursor {
  animation: tickerBlink 1s step-end infinite;
  color: var(--scarlet);
}
@keyframes tickerBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

@media (min-width: 1024px) {
  .studio-ticker { display: flex; }
}

/* ================================================================
   TRUSTED BY — mobile layout fixes
   ================================================================ */
@media (max-width: 768px) {
  .clients-rows { margin-top: 4px; }

  .client-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    padding: 20px 16px 20px 14px;
  }

  .cr-num {
    grid-row: 1;
    align-self: start;
    padding-top: 5px;
    font-size: 9px;
  }

  .cr-name {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(22px, 7vw, 32px);
  }

  .cr-tag {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    margin-top: 5px;
    white-space: normal;       /* was nowrap — caused overflow */
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .cr-companies {
    grid-column: 2;
    grid-row: 3;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.65;
  }
}

/* Nav logo — nudge left */
.nav-logo { margin-left: -12px; }

/* ================================================================
   PROCESS — mobile accordion (collapsed by default, tap to expand)
   ================================================================ */
@media (max-width: 768px) {
  .process-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .process-step {
    border-top: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .process-step:last-child { border-bottom: 1px solid var(--hairline); }

  /* Header row — always visible */
  .process-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
  }

  .process-num {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 22px;
  }

  .process-title {
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    color: var(--chalk);
  }

  /* +/− chevron */
  .process-step::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--scarlet);
    margin-right: 16px;
    margin-left: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .process-step { position: relative; }

  .process-step.is-open::after {
    content: '−';
  }

  /* Collapsible body */
  .process-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
  }
  .process-body-inner {
    overflow: hidden;
    padding: 0 16px;
  }
  .process-step.is-open .process-body {
    grid-template-rows: 1fr;
  }
  .process-step.is-open .process-body-inner {
    padding-bottom: 20px;
  }

  .process-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--mist);
    margin-bottom: 10px;
  }

  .label-muted {
    font-size: 8px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* decorative fx restored on mobile — scaled down, fired by .is-open */
  .process-fx { display: block; }
  .process-fx-lens {
    top: 14px; left: 6px;
    width: 48px; height: 48px;
  }
  .process-step[data-effect="discover"].is-open .process-fx-lens {
    transform: scale(1.4);
  }
  .process-step[data-effect="sketch"] .process-fx::after { bottom: 12px; }
  .process-step[data-effect="release"].is-open .process-fx {
    border-radius: 8px;
  }
}





/* ================================================================
   PROCESS ACCORDION — mobile color accents (legible + glassy)
   Dark glass base, color used only on left border + title + number
   ================================================================ */
@media (max-width: 768px) {

  /* Glass base for all steps */
  .process-step {
    background: rgba(18, 20, 25, 0.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
            backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-top: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important;
    overflow: hidden;
  }

  /* Colored top border per step — the main color signal */
  .process-step:nth-child(1) { border-top: 2px solid #f5c842 !important; }
  .process-step:nth-child(2) { border-top: 2px solid #e8922a !important; }
  .process-step:nth-child(3) { border-top: 2px solid #d44820 !important; }
  .process-step:nth-child(4) { border-top: 2px solid #50a0dc !important; }

  /* Override the desktop ::before (top bar animation) — not needed on mobile */
  .process-step::before {
    display: none !important;
  }

  /* Override the desktop ::after (left silver tick) */
  .process-step::after {
    display: block !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    background: none !important;
    transition: none !important;
  }

  /* Numbered accent colors */
  .process-step:nth-child(1) .process-num { color: #f5c842; }
  .process-step:nth-child(2) .process-num { color: #e8922a; }
  .process-step:nth-child(3) .process-num { color: #d44820; }
  .process-step:nth-child(4) .process-num { color: #50a0dc; }

  /* Title colors — solid, fully legible */
  .process-step:nth-child(1) .process-title { color: #f5c842; -webkit-text-fill-color: #f5c842; }
  .process-step:nth-child(2) .process-title { color: #e8922a; -webkit-text-fill-color: #e8922a; }
  .process-step:nth-child(3) .process-title { color: #d44820; -webkit-text-fill-color: #d44820; }
  .process-step:nth-child(4) .process-title { color: #50a0dc; -webkit-text-fill-color: #50a0dc; }

  /* + / − accent */
  .process-step:nth-child(1)::after { color: #f5c842 !important; content: '+' !important; }
  .process-step:nth-child(2)::after { color: #e8922a !important; content: '+' !important; }
  .process-step:nth-child(3)::after { color: #d44820 !important; content: '+' !important; }
  .process-step:nth-child(4)::after { color: #50a0dc !important; content: '+' !important; }

  .process-step.is-open:nth-child(1)::after { content: '−' !important; }
  .process-step.is-open:nth-child(2)::after { content: '−' !important; }
  .process-step.is-open:nth-child(3)::after { content: '−' !important; }
  .process-step.is-open:nth-child(4)::after { content: '−' !important; }

  /* Body text — always white/chalk for legibility */
  .process-step .process-desc {
    color: var(--chalk) !important;
    opacity: 0.88;
  }

  .process-step .label-muted {
    color: rgba(236,233,225,0.45) !important;
  }
}

/* ================================================================
   WORK DESCRIPTIONS — glassy dark pill for legibility (all sizes)
   ================================================================ */
.wp-desc {
  background: rgba(7, 8, 11, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 20px;
  color: var(--chalk);
  line-height: 1.75;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ================================================================
   WORK TITLES — coloured underline per project
   ================================================================ */

/* Project 01 — Loving Takes Time: teal */
.wp-project:nth-child(1) .wp-title {
  display: inline;
  border-bottom: 2.5px solid #2ab8c8;
  padding-bottom: 3px;
}

/* Project 02 — Data Gnome: whitish grey */
.wp-project:nth-child(2) .wp-title {
  display: inline;
  border-bottom: 2.5px solid rgba(210, 215, 220, 0.65);
  padding-bottom: 3px;
}

/* Project 03 — B612: reddish-purple underline */
.wp-project:nth-child(3) .wp-title {
  display: inline;
  border-bottom: 2.5px solid #9B2E96;
  padding-bottom: 3px;
}

/* ================================================================
   WORK PROJECT LINES — match project colours
   ================================================================ */

/* Project 01 — Loving Takes Time: teal */
.wp-project:nth-child(1)::after { background: #2ab8c8; }

/* Project 02 — Data Gnome: whitish grey */
.wp-project:nth-child(2)::after { background: rgba(210, 215, 220, 0.65); }

/* Project 03 — B612: reddish-purple */
.wp-project:nth-child(3)::after { background: #9B2E96; }

/* ================================================================
   PRODUCTION POLISH — unified rhythm, interaction, and responsiveness
   ================================================================ */
:root {
  --page-gutter: clamp(20px, 3.2vw, 48px);
  --section-space: clamp(72px, 8.5vw, 132px);
  --content-max: 1440px;
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --control-height: 48px;
  --radius-control: 999px;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

/* One dependable page gutter and one content width across every page. */
nav.site-nav {
  min-height: 76px;
  padding-inline: var(--page-gutter);
}
nav.site-nav.scrolled {
  min-height: 64px;
  padding-inline: var(--page-gutter);
}
.nav-logo {
  margin-left: 0;
  white-space: nowrap;
  line-height: 1;
}
.section {
  padding: var(--section-space) var(--page-gutter);
}
.section-tight {
  padding: clamp(52px, 6vw, 84px) var(--page-gutter);
}
.section > * {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}
.section-head {
  margin-bottom: clamp(36px, 5vw, 72px);
}

/* Tighter display typography and calmer reading measures. */
.section-title {
  max-width: 15ch;
  font-size: clamp(42px, 6.5vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.page-header-title,
.cta-title {
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.page-header-sub,
.copy-body,
.copy-quote,
.meet-reece-bio,
.meet-reece-quote {
  max-width: 64ch;
  text-wrap: pretty;
}
.section-tag,
.page-header-eyebrow,
.field-label,
.contact-block-title,
.footer-col-title,
.cta-tag {
  line-height: 1.45;
}

/* A single interaction grammar: lift, light sweep, press, focus. */
.btn {
  min-height: var(--control-height);
  padding-inline: clamp(22px, 2.4vw, 34px);
  border-radius: var(--radius-control);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 220ms var(--ease-snap),
              color 220ms ease,
              background-color 220ms ease,
              border-color 220ms ease,
              box-shadow 220ms ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.24) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform 560ms var(--ease-snap);
  pointer-events: none;
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}

.nav-link,
.radio-chip,
.filter-chip,
.tnl-filter {
  transition: transform 200ms var(--ease-snap),
              color 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}
.nav-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.radio-chip,
.filter-chip,
.tnl-filter {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateX(130%); }
  .btn:hover { transform: translateY(-3px); }
  .btn-scarlet:hover { transform: translateY(-3px) scale(1.015); }
  .nav-link:hover,
  .radio-chip:hover,
  .filter-chip:hover,
  .tnl-filter:hover { transform: translateY(-2px); }
  .contact-detail:hover { transform: translateX(5px); }
}

.btn:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible,
.radio-chip:focus-visible,
.filter-chip:focus-visible,
.tnl-filter:focus-visible,
.contact-detail:focus-visible {
  outline: 2px solid #ff5a3c;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(212,43,18,0.16);
}

/* Forms remain quiet at rest and unmistakably interactive on focus. */
.field-input,
.field-textarea,
.field-select {
  min-height: 48px;
  padding: 14px 2px;
  font-size: 16px;
  border-bottom-color: rgba(236,233,225,0.26);
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.field-input:hover,
.field-textarea:hover,
.field-select:hover {
  border-bottom-color: rgba(236,233,225,0.52);
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-bottom-color: #ff5a3c;
  background: linear-gradient(180deg, transparent, rgba(212,43,18,0.045));
  box-shadow: 0 2px 0 -1px #ff5a3c;
}
.radio-chip.is-active,
.tnl-filter.is-active {
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 0 22px rgba(212,43,18,0.12);
}
.contact-detail {
  transition: color 220ms ease, transform 280ms var(--ease-snap);
}

/* Media and panels share the same restrained corner language. */
.wp-media,
.wp-desc,
.meet-reece-photo,
.stat-card,
.success-msg,
.lb-inner,
.tnl-lb-media img,
.tnl-lb-media iframe {
  border-radius: var(--radius-sm);
}
.wp-media {
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 22px 70px rgba(0,0,0,0.3);
}
.wp-type {
  border-radius: var(--radius-control);
}
.contact-info {
  align-self: start;
}

@media (min-width: 901px) {
  .contact-info {
    position: sticky;
    top: 112px;
  }
}

@media (max-width: 720px) {
  nav.site-nav,
  nav.site-nav.scrolled {
    min-height: 72px;
    padding: 14px 20px;
  }
  /* Drop the frosted glass bar behind the logo/menu on mobile — the fixed
     nav just floats over the page with no backing panel once scrolled.
     Scoped to the home page only (has-dark-hero): work.html/contact.html
     also match nav.site-nav.scrolled but their dark capsule-nav fill
     (see body.work-page rules elsewhere) is an intentional, separate
     design and shouldn't be stripped by this. */
  body.has-dark-hero nav.site-nav.scrolled {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .nav-logo {
    margin-left: 0;
    font-size: 20px;
    letter-spacing: 0.08em;
  }
  .nav-logo-studio {
    margin-left: 0.45em;
    font-size: 0.52em;
    letter-spacing: 0.12em;
  }
  .nav-toggle {
    flex: 0 0 44px;
  }
  .nav-links {
    gap: 24px;
  }
  .nav-links .nav-link {
    width: min(280px, 78vw);
    min-height: 56px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
  }

  /* Keep sub-page stories below the fixed navigation; this removes the
     header/brand collision seen on small screens. */
  .page-header--aurora,
  .work-header {
    min-height: auto;
    padding: 112px 20px 36px;
  }
  .page-header-title {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 0.92;
  }
  .page-header-sub {
    font-size: 16px !important;
    line-height: 1.48;
    margin-top: 18px;
  }
  .page-header-eyebrow {
    margin-bottom: 14px;
  }

  .section-title {
    max-width: 12ch;
    font-size: clamp(42px, 13vw, 64px);
  }
  .section-head {
    margin-bottom: 36px;
  }
  .copy-body,
  .meet-reece-bio,
  .process-desc {
    font-size: 15px !important;
  }

  .radio-row {
    gap: 8px;
  }
  .radio-chip {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .contact-form {
    gap: 30px;
  }

  /* The gallery controls become a real touch surface instead of tiny tags. */
  .tnl-corner {
    top: 18px;
    left: 20px;
    right: 20px;
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .tnl-tagline {
    font-size: 16px;
    line-height: 1.35;
  }
  .tnl-filters {
    max-width: 100%;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }
  .tnl-filter {
    min-height: 44px;
    padding: 8px 11px;
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }

  footer.site-footer {
    gap: 32px;
    padding: 48px 20px 24px;
  }
  .footer-brand-block .nav-logo {
    font-size: 36px;
  }
}

@media (max-width: 420px) {
  .nav-logo-studio { display: none; }
  /* Selected Work header on the smallest phones — same flex-column stack
     as the 768px pass above (that's what fixed the "Seattle / Release /
     Poster" one-word-per-line wrap and the "+ READ MORE" hint running off
     the right edge). Just tighten sizing further for narrow screens. */
  .wp-title {
    font-size: clamp(20px, 8vw, 26px);
  }
  .wp-type {
    padding: 0;
    font-size: 8px;
    letter-spacing: 0.16em;
  }
  .cta-section {
    padding: 40px 20px 96px;
  }
  .cta-actions .btn {
    width: min(100%, 320px);
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn:hover,
  .btn-scarlet:hover,
  .nav-link:hover,
  .radio-chip:hover,
  .filter-chip:hover,
  .tnl-filter:hover,
  .contact-detail:hover { transform: none !important; }
}

/* ================================================================
   EDITORIAL CONTENT BALANCE — ethos, proof, clients, descriptions
   ================================================================ */

/* Work ethos: a fuller magazine-like composition using the existing copy. */
.ethos-section {
  min-height: min(760px, 82vh);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.ethos-section::after {
  content: '';
  position: absolute;
  width: min(760px, 58vw);
  aspect-ratio: 1;
  right: -18%;
  top: 50%;
  z-index: -1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,43,18,0.10), rgba(86,72,140,0.05) 40%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.ethos-section .ethos-grid {
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.55fr);
  gap: clamp(56px, 7vw, 128px);
  align-items: stretch;
  padding-block: clamp(28px, 4vw, 56px);
  border-top: 1px solid rgba(236,233,225,0.15);
  border-bottom: 1px solid rgba(236,233,225,0.15);
  position: relative;
}
.ethos-section .ethos-grid::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: clamp(72px, 9vw, 140px);
  height: 2px;
  background: linear-gradient(90deg, var(--scarlet), transparent);
  box-shadow: 0 0 20px rgba(212,43,18,0.35);
}
.ethos-heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.ethos-section .section-title {
  max-width: 6.5ch;
  font-size: clamp(68px, 8.2vw, 126px);
  line-height: 0.82;
  letter-spacing: -0.065em;
  margin-top: clamp(42px, 6vw, 90px);
}
.ethos-section .section-title em {
  display: block;
  width: max-content;
  max-width: 100%;
  transform: translateX(clamp(10px, 2vw, 32px));
  text-shadow: 0 0 42px rgba(212,43,18,0.18);
}
.ethos-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-content: center;
}
.ethos-copy .copy-quote {
  grid-column: 1 / -1;
  max-width: 22ch;
  margin: 0 0 clamp(20px, 2vw, 34px);
  padding: 0 0 clamp(22px, 2.4vw, 38px);
  border-bottom: 1px solid rgba(236,233,225,0.16);
  font-size: clamp(30px, 3vw, 48px) !important;
  line-height: 1.18 !important;
  color: var(--chalk);
}
.ethos-copy .copy-body {
  margin: 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(212,43,18,0.42);
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.8 !important;
  color: rgba(236,233,225,0.72);
}

/* Three proof cards: identical footprint, title zone, and copy baseline. */
.stats-section .stats-strip--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.5vw, 24px);
}
.stats-section .stat-card {
  min-height: clamp(300px, 27vw, 390px);
  padding: clamp(26px, 2.4vw, 38px);
}
.stats-section .stat-num,
.stats-section .stat-num--headline {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(132px, 12vw, 176px);
  font-size: clamp(38px, 3.35vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.stats-section .stat-num em {
  margin-left: 0.11em;
}
.stats-section .stat-sub {
  margin-top: auto;
  padding-top: clamp(18px, 1.6vw, 26px);
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.65 !important;
}

/* Trusted-by accordion: concise at rest, spacious project tiles when open. */
.clients-rows {
  border-bottom: 1px solid var(--hairline);
}
.client-row {
  grid-template-columns: 52px minmax(0, 1fr) minmax(220px, auto) 48px;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3vw, 42px) 18px clamp(28px, 3vw, 42px) 16px;
  cursor: pointer;
  transition: padding 420ms var(--ease-snap), background-color 300ms ease;
}
.client-row .cr-num {
  grid-row: 1;
  align-self: center;
}
.client-row .cr-name {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(34px, 4vw, 62px);
}
.client-row .cr-tag {
  grid-column: 3;
  grid-row: 1;
}
.cr-toggle {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(236,233,225,0.18);
  border-radius: 50%;
  position: relative;
  background: rgba(255,255,255,0.025);
  transition: transform 350ms var(--ease-snap), border-color 220ms ease, background-color 220ms ease;
}
.cr-toggle::before,
.cr-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 350ms var(--ease-snap), opacity 220ms ease;
}
.cr-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.client-row.is-open .cr-toggle {
  transform: rotate(180deg);
  border-color: currentColor;
  background: rgba(255,255,255,0.06);
}
.client-row.is-open .cr-toggle::after {
  opacity: 0;
}
.client-row .cr-companies {
  grid-column: 2 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  border-top: 1px solid transparent;
  transition: max-height 520ms var(--ease-snap),
              opacity 300ms ease,
              transform 420ms var(--ease-snap),
              margin-top 420ms var(--ease-snap),
              padding-top 420ms var(--ease-snap),
              border-color 300ms ease;
}
.client-row.is-open {
  padding-bottom: clamp(34px, 3.5vw, 52px);
}
.client-row.is-open .cr-companies {
  max-height: 320px;
  margin-top: clamp(24px, 2.5vw, 38px);
  padding-top: clamp(20px, 2vw, 30px);
  opacity: 1;
  transform: none;
  border-top-color: rgba(236,233,225,0.13);
}
.cr-company {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(236,233,225,0.10);
  border-radius: var(--radius-sm);
  background: rgba(7,8,11,0.38);
  line-height: 1.5;
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms var(--ease-snap);
}
.cr-company:hover {
  transform: translateY(-2px);
  border-color: rgba(236,233,225,0.20);
  background: rgba(7,8,11,0.55);
}
/* Tier 1 — the brand, its own block in the row's accent colour */
.cr-company-brand {
  font-weight: 600;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: 0.005em;
  color: rgba(236,233,225,0.95);
  padding-bottom: 10px;
  width: 100%;
  border-bottom: 1px solid rgba(236,233,225,0.10);
}
.cr-company-brand::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  transform: translateY(-1px);
  background: var(--cr-accent, #ece9e1);
  box-shadow: 0 0 10px 0 var(--cr-accent, transparent);
}
/* Tier 2 — the accomplishment, quieter, sits beneath the divider */
.cr-company-work {
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,233,225,0.55);
}
/* Brand accent + card wash per category row */
.client-row:nth-child(1) { --cr-accent: #f5c842; }
.client-row:nth-child(2) { --cr-accent: #4ac56c; }
.client-row:nth-child(3) { --cr-accent: #60a5fa; }
.client-row:nth-child(4) { --cr-accent: #d42b12; }
.client-row:nth-child(1) .cr-company:hover { border-color: rgba(245,200,66,0.40); }
.client-row:nth-child(2) .cr-company:hover { border-color: rgba(74,197,108,0.40); }
.client-row:nth-child(3) .cr-company:hover { border-color: rgba(96,165,250,0.40); }
.client-row:nth-child(4) .cr-company:hover { border-color: rgba(212,43,18,0.45); }
.client-row:nth-child(1) .cr-toggle { color: #f5c842; }
.client-row:nth-child(2) .cr-toggle { color: #4ac56c; }
.client-row:nth-child(3) .cr-toggle { color: #60a5fa; }
.client-row:nth-child(4) .cr-toggle { color: #d42b12; }

/* Full-width description bands below both highlighted projects. */
.wp-footer,
.wp-desc {
  width: 100%;
}
.wp-desc {
  max-width: none;
  min-height: 94px;
  display: flex;
  align-items: center;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 34px);
  font-size: clamp(15px, 1.25vw, 18px);
}

@media (max-width: 900px) {
  .ethos-section {
    min-height: auto;
  }
  .ethos-section .ethos-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ethos-heading {
    min-height: auto;
  }
  .ethos-section .section-title {
    margin-top: 36px;
  }
  .client-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px;
    grid-template-rows: auto auto auto;
  }
  .client-row .cr-num { grid-column: 1; grid-row: 1; }
  .client-row .cr-name { grid-column: 2; grid-row: 1; }
  .client-row .cr-tag {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    margin-top: 8px;
    white-space: normal;
  }
  .cr-toggle { grid-column: 3; grid-row: 1 / 3; }
  .client-row .cr-companies { grid-column: 2 / -1; grid-row: 3; }
}

@media (max-width: 720px) {
  .ethos-section .ethos-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-block: 28px;
  }
  .ethos-section .section-title {
    max-width: 7ch;
    margin-top: 34px;
    font-size: clamp(54px, 18vw, 78px);
  }
  .ethos-section .section-title em {
    transform: translateX(8px);
  }
  .ethos-copy {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ethos-copy .copy-quote {
    grid-column: 1;
    font-size: 28px !important;
  }
  .ethos-copy .copy-body {
    font-size: 15px !important;
  }

  .stats-section .stats-strip--three {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .stats-section .stat-card {
    min-height: 250px;
  }
  .stats-section .stat-num,
  .stats-section .stat-num--headline {
    min-height: 112px;
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .client-row {
    grid-template-columns: 26px minmax(0, 1fr) 44px !important;
    padding: 24px 12px 24px 12px;
    column-gap: 12px;
  }
  .client-row .cr-name {
    font-size: clamp(27px, 8vw, 38px);
  }
  .client-row .cr-tag {
    font-size: 8px;
    line-height: 1.5;
  }
  .client-row .cr-companies {
    grid-template-columns: 1fr;
  }
  .client-row.is-open .cr-companies {
    max-height: 640px;
  }
  .cr-company {
    min-height: 72px;
  }
  .wp-desc {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-row,
  .client-row .cr-companies,
  .cr-toggle,
  .cr-toggle::before,
  .cr-toggle::after { transition: none !important; }
}

/* ================================================================
   FLOATING JUMP REMOTE — matches the glossy hero remote
   ================================================================ */
.studio-section {
  isolation: isolate;
  overflow: visible;
}

.studio-section .section-head {
  position: relative;
  z-index: 4;
}

.studio-section .section-title {
  display: inline-block;
  position: relative;
  z-index: 5;
  transform: none !important;
}

.studio-section > .jump-remote {
  position: absolute;
  top: clamp(-128px, -6.8vw, -82px);
  right: clamp(60px, 7vw, 120px);
  z-index: 8;
  width: clamp(200px, 15vw, 250px);
  margin: 0;
  perspective: 900px;
  animation: jumpRemoteFloat 7.2s ease-in-out infinite;
}

.jump-remote-body {
  position: relative;
  aspect-ratio: 0.38;
  overflow: hidden;
  border: 1px solid rgba(154, 164, 187, 0.28);
  border-radius: 29% 17% 22% 18% / 9% 7% 7% 8%;
  background:
    radial-gradient(ellipse at 24% 6%, rgba(72, 79, 97, 0.5), transparent 20%),
    linear-gradient(103deg, #161922 0%, #030408 31%, #05060a 68%, #171a21 88%, #020307 100%);
  box-shadow:
    31px 22px 0 -21px #010205,
    32px 30px 38px rgba(0, 0, 0, 0.72),
    inset 4px 0 5px rgba(255, 255, 255, 0.12),
    inset -10px 0 13px rgba(0, 0, 0, 0.92),
    inset 0 -14px 20px rgba(0, 0, 0, 0.7);
  transform: rotate(7deg) rotateY(-8deg) translateZ(0);
  transform-origin: 50% 46%;
  transition: transform 460ms var(--ease-snap), box-shadow 460ms var(--ease-snap);
}

.jump-remote:hover .jump-remote-body,
.jump-remote:focus-within .jump-remote-body {
  transform: rotate(3deg) rotateY(-3deg) translateY(-9px) translateZ(0);
  box-shadow:
    24px 18px 0 -18px #010205,
    32px 42px 54px rgba(0, 0, 0, 0.78),
    0 0 34px rgba(233, 48, 31, 0.1),
    inset 4px 0 5px rgba(255, 255, 255, 0.14),
    inset -10px 0 13px rgba(0, 0, 0, 0.92);
}

.jump-remote-gloss {
  position: absolute;
  top: 1.5%;
  left: 3.5%;
  width: 40%;
  height: 94%;
  border-radius: 45% 0 0 30%;
  background: linear-gradient(92deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.015) 46%, transparent 72%);
  opacity: 0.52;
  mix-blend-mode: screen;
  pointer-events: none;
}

.jump-remote-cap {
  position: absolute;
  top: 5.7%;
  left: 12%;
  width: 42%;
  height: 6.4%;
  border: 1px solid rgba(255, 116, 101, 0.48);
  border-radius: 22% 10% 12% 20%;
  background:
    linear-gradient(92deg, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(180deg, #481013, #1c080b 76%);
  box-shadow: inset 0 2px 2px rgba(255, 164, 148, 0.22), 0 4px 8px rgba(0, 0, 0, 0.65);
  transform: rotate(-3deg);
  pointer-events: none;
}

.jump-remote-rail {
  position: absolute;
  z-index: 3;
  top: 4%;
  bottom: 6%;
  width: 3.4%;
  border-radius: 999px;
  pointer-events: none;
}

.jump-remote-rail--right {
  right: 4.6%;
  background: linear-gradient(90deg, #05060a 0%, #c6cad1 29%, #f4f4f2 43%, #383b43 63%, #030409 100%);
  box-shadow: 3px 0 3px #000, -2px 0 3px rgba(255, 255, 255, 0.11);
}

.jump-remote-rail--left {
  left: 2.2%;
  width: 1.8%;
  background: linear-gradient(90deg, #020205, #979ca5 56%, #08090d);
  opacity: 0.72;
}

.jump-remote-power {
  position: absolute;
  z-index: 5;
  top: 17.5%;
  left: 17.5%;
  width: 28%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #f2d559;
  box-shadow:
    inset 7px 6px 8px rgba(255, 255, 255, 0.64),
    inset -8px -7px 10px rgba(129, 86, 0, 0.32),
    0 9px 0 #9b7614,
    0 13px 16px rgba(0, 0, 0, 0.62);
  transition: transform 170ms var(--ease-snap), box-shadow 170ms ease, filter 170ms ease;
}

.jump-remote-power:hover,
.jump-remote-power:focus-visible {
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(5px);
  box-shadow:
    inset 5px 5px 7px rgba(96, 58, 0, 0.18),
    inset -4px -4px 7px rgba(255, 255, 255, 0.34),
    0 4px 0 #9b7614,
    0 7px 10px rgba(0, 0, 0, 0.58);
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 5px;
}

.jump-remote-keys {
  position: absolute;
  z-index: 5;
  top: 31%;
  left: 13%;
  width: 59%;
  height: 31%;
}

.jump-remote-key {
  --key-color: #68d7d1;
  position: absolute;
  width: 44px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: transform 160ms var(--ease-snap), filter 160ms ease;
}

.jump-remote-key::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--key-color);
  box-shadow:
    inset 4px 4px 5px rgba(255, 255, 255, 0.52),
    inset -5px -4px 6px rgba(0, 20, 34, 0.26),
    0 6px 0 color-mix(in srgb, var(--key-color) 48%, #07101d),
    0 9px 11px rgba(0, 0, 0, 0.54);
  transition: transform 160ms var(--ease-snap), box-shadow 160ms ease;
}

.jump-remote-key:nth-child(1) { left: 13%; top: 0; --key-color: #69d7d1; }
.jump-remote-key:nth-child(2) { left: 55%; top: -8%; --key-color: #3c83df; }
.jump-remote-key:nth-child(3) { left: -8%; top: 27%; --key-color: #f0d052; }
.jump-remote-key:nth-child(4) { left: 72%; top: 23%; --key-color: #efd35c; }
.jump-remote-key:nth-child(5) { left: 34%; top: 43%; --key-color: #ef4a36; }
.jump-remote-key:nth-child(6) { left: -1%; top: 58%; --key-color: #66d4cf; }
.jump-remote-key:nth-child(7) { left: 72%; top: 61%; --key-color: #68d7d1; }
.jump-remote-key:nth-child(8) { left: 6%; top: 87%; --key-color: #3c83df; }
.jump-remote-key:nth-child(9) { left: 47%; top: 82%; --key-color: #f1d35a; }
.jump-remote-key[aria-hidden='true'] { pointer-events: none; }

a.jump-remote-key:hover,
a.jump-remote-key:focus-visible {
  filter: brightness(1.12) saturate(1.12);
  transform: translateY(4px);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -2px;
}

a.jump-remote-key:hover::before,
a.jump-remote-key:focus-visible::before {
  transform: translateY(3px) scale(0.96);
  box-shadow:
    inset 4px 4px 6px rgba(0, 0, 0, 0.18),
    inset -2px -2px 4px rgba(255, 255, 255, 0.4),
    0 2px 0 color-mix(in srgb, var(--key-color) 48%, #07101d),
    0 5px 7px rgba(0, 0, 0, 0.5);
}

.jump-remote-launch {
  position: absolute;
  z-index: 6;
  left: 14.5%;
  bottom: 10.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68%;
  height: 18.5%;
  border: 1px solid rgba(255, 141, 119, 0.72);
  border-radius: 16% 12% 16% 14%;
  color: #fff7f2;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.28), transparent 29%),
    linear-gradient(180deg, #ff5c43 0%, #ed3f2d 56%, #c61c15 100%);
  box-shadow:
    inset 3px 3px 3px rgba(255, 255, 255, 0.46),
    inset -5px -7px 8px rgba(118, 3, 0, 0.38),
    0 10px 0 #8e100d,
    0 15px 18px rgba(0, 0, 0, 0.62);
  font-family: 'Space Mono', 'DM Mono', monospace;
  font-size: clamp(13px, 1.22vw, 19px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transition: transform 170ms var(--ease-snap), box-shadow 170ms ease, filter 170ms ease;
}

.jump-remote-launch:hover,
.jump-remote-launch:focus-visible {
  filter: saturate(1.16) brightness(1.08);
  transform: rotate(-2deg) translateY(6px);
  box-shadow:
    inset 3px 3px 4px rgba(255, 255, 255, 0.35),
    inset -4px -5px 7px rgba(118, 3, 0, 0.34),
    0 4px 0 #8e100d,
    0 9px 12px rgba(0, 0, 0, 0.56);
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 6px;
}

@keyframes jumpRemoteFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}

@media (max-width: 1024px) {
  .studio-section > .jump-remote {
    position: relative;
    top: auto;
    right: auto;
    width: 190px;
    margin: -32px auto 80px;
  }
  .jump-remote-key { width: 42px; }
  .jump-remote-launch { font-size: 14px; }
}

@media (max-width: 560px) {
  .studio-section > .jump-remote {
    width: 164px;
    margin-top: 14px;
    margin-bottom: 68px;
  }
  .jump-remote-key { width: 38px; }
  .jump-remote-key::before { inset: 7px; }
  .jump-remote-launch { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-section > .jump-remote { animation: none; }
  .jump-remote-body,
  .jump-remote-power,
  .jump-remote-key,
  .jump-remote-key::before,
  .jump-remote-launch { transition: none !important; }
}

/* Exact 3D duplicate of the hero remote. The older CSS-built face above is
   retained only as historical fallback styling; this canvas is the live prop. */
.studio-section > .jump-remote {
  top: clamp(-190px, -9.2vw, -126px);
  right: clamp(48px, 5vw, 100px);
  width: clamp(230px, 18vw, 340px);
  aspect-ratio: 0.38;
  overflow: visible;
  contain: layout style;
}

.jump-remote-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.42));
  transition: filter 300ms ease, transform 420ms var(--ease-snap);
}

.jump-remote:hover .jump-remote-canvas,
.jump-remote:focus-within .jump-remote-canvas {
  filter: drop-shadow(0 38px 30px rgba(0, 0, 0, 0.58));
  transform: translateY(-5px) scale(1.015);
}

.jump-remote-hit {
  position: absolute;
  z-index: 3;
  inset: 0;
  cursor: pointer;
}

.jump-remote-hit:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 6px;
}

@media (max-width: 1024px) {
  .studio-section > .jump-remote {
    width: 220px;
    margin: -18px auto 86px;
  }
}

@media (max-width: 560px) {
  .studio-section > .jump-remote {
    width: 190px;
    margin-top: 18px;
    margin-bottom: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jump-remote-canvas { transition: none !important; }
}

/* Mobile-only relocation: home.html's companion script moves .jump-remote
   into an anchor placed above .process-grid (inside #process) on phones,
   so it reads before the process steps instead of after them. Scoped to
   mobile widths only — desktop keeps the remote inside .studio-section in
   its original position, completely untouched. */
@media (max-width: 760px) {
  .jump-remote-anchor {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 32px;
  }
  .jump-remote--relocated.jump-remote {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    width: 190px;
    animation: jumpRemoteFloat 7.2s ease-in-out infinite;
  }
}

/* ================================================================
   TRUSTED BY — COSMIC FLOWER (desktop showcase)
   A stem rises from the bottom, four coloured petals unfurl from a
   bud, and clicking a petal unravels its projects panel. Below 900px
   the flower is hidden and the accordion list above is used instead.
   ================================================================ */
.flower-stage {
  --stem-bridge: 150px;      /* how far the stem reaches down toward "create" */
  --flower-rise: 150px;      /* pulls the whole flower up into the empty space above */
  display: none;
  position: relative;
  margin-top: calc(24px - var(--flower-rise));
  margin-bottom: calc(-1 * var(--stem-bridge));
  z-index: 1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms var(--ease-snap);
}
.flower-stage.is-visible { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .flower-stage { display: block; }
  .clients-rows { display: none; }
}

.flower-bloom {
  position: relative;
  width: 100%;
  height: 640px;
  transform-origin: 50% 100%;
  animation: plantSway 7s ease-in-out infinite;
}

/* ---- stem + leaves ---------------------------------------------------- */
.flower-stem {
  position: absolute;
  left: 50%;
  bottom: var(--stem-root, -70px);
  width: 5px;
  height: calc(var(--stem-top, 353px) - var(--stem-root, -70px));
  transform: translateX(-50%);
  background: linear-gradient(180deg, #58cf7a 0%, #3a9a57 55%, #2c7a44 100%);
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(74, 197, 108, 0.4);
  z-index: 1;
  transform-origin: bottom center;
}
.flower-leaf {
  position: absolute;
  width: 66px;
  height: 32px;
  background: linear-gradient(120deg, #58cf7a, #2c7a44);
  box-shadow: 0 0 16px rgba(74, 197, 108, 0.32);
}
.flower-leaf--l {
  left: -60px;
  top: 54%;
  border-radius: 0 100% 0 100%;
  transform-origin: right center;
  transform: rotate(16deg);
}
.flower-leaf--r {
  right: -60px;
  top: 38%;
  border-radius: 100% 0 100% 0;
  transform-origin: left center;
  transform: rotate(-16deg);
}

/* ---- flower head ------------------------------------------------------ */
.flower {
  position: absolute;
  top: 72px;
  left: 50%;
  width: 430px;
  height: 430px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: 2;
}
.flower-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  padding: 0;
  border: 1px solid rgba(245, 235, 200, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff6dc, #e8c65a 55%, #b6862a);
  box-shadow: 0 0 26px rgba(245, 210, 110, 0.45), inset 0 0 14px rgba(120, 80, 10, 0.35);
  cursor: pointer;
  z-index: 4;
  animation: corePulse 4.5s ease-in-out infinite;
  transition: transform 400ms var(--ease-snap), box-shadow 400ms ease;
}
.flower-core:hover { box-shadow: 0 0 38px rgba(245, 210, 110, 0.7), inset 0 0 14px rgba(120, 80, 10, 0.35); }
.flower-core-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(150,100,20,0.25) 1px, transparent 2px);
  background-size: cover, 9px 9px;
}

/* ---- petals ----------------------------------------------------------- */
.flower-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 186px;
  height: 272px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  /* bud: folded toward the centre, faded */
  transform: translate(-50%, -50%) rotate(calc(var(--angle) * 0.12)) translateY(-8px) scale(0.28);
  opacity: 0;
  transition: transform 950ms var(--ease-snap), opacity 800ms ease, filter 400ms ease;
  transition-delay: calc(var(--i) * 100ms);
}
.flower.is-bloomed .flower-petal {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-168px);
  opacity: 1;
}
.flower-petal-shape {
  position: absolute;
  inset: 0;
  border-radius: 48% 48% 48% 48% / 66% 66% 36% 36%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 46%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: box-shadow 400ms ease, background 400ms ease, border-color 400ms ease, opacity 300ms ease;
}
.flower-petal:hover .flower-petal-shape,
.flower-petal:focus-visible .flower-petal-shape {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 62%, transparent),
    color-mix(in srgb, var(--accent) 20%, transparent));
  box-shadow: 0 0 48px color-mix(in srgb, var(--accent) 42%, transparent),
              inset 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent);
}
.flower-petal-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  text-align: center;
  pointer-events: none;
  transform: rotate(calc(-1 * var(--angle)));
}
.flower-petal-num {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0.85;
}
.flower-petal-name {
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 600;
  line-height: 1.1;
  color: rgba(245, 244, 238, 0.96);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.flower-petal-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(236, 233, 225, 0.6);
}

/* active petal lifts + others recede */
.flower.is-bloomed .flower-petal.is-active {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-184px) scale(1.12);
  z-index: 5;
}
.flower-petal.is-active .flower-petal-shape {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent) 26%, transparent));
  box-shadow: 0 0 58px color-mix(in srgb, var(--accent) 50%, transparent),
              inset 0 0 36px color-mix(in srgb, var(--accent) 30%, transparent);
}
.flower-stage.is-active .flower-petal:not(.is-active) .flower-petal-shape { opacity: 0.42; }

/* ---- unravelled content panel ---------------------------------------- */
.flower-panels {
  position: relative;
  max-width: 1000px;
  margin: -8px auto 0;
}
.flower-panel {
  display: none;
  --cr-accent: var(--accent);
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, rgba(7, 8, 11, 0.68));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45),
              0 0 34px color-mix(in srgb, var(--accent) 14%, transparent);
}
.flower-panel.is-active {
  display: block;
  animation: petalUnfurl 620ms var(--ease-snap);
}
.flower-panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.flower-panel-name {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  color: var(--accent);
}
.flower-panel-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flower-panel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

@keyframes petalUnfurl {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.97); clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes flowerSway {
  0%, 100% { transform: translateX(-50%) rotate(-1.4deg); }
  50%      { transform: translateX(-50%) rotate(1.4deg); }
}
@keyframes plantSway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
@keyframes flowerBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-0.8deg); }
  50%      { transform: translateX(-50%) translateY(-10px) rotate(0.8deg); }
}
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 26px rgba(245, 210, 110, 0.45), inset 0 0 14px rgba(120, 80, 10, 0.35); }
  50%      { box-shadow: 0 0 44px rgba(245, 210, 110, 0.75), inset 0 0 16px rgba(120, 80, 10, 0.4); }
}
@keyframes petalBreathe {
  0%, 100% { transform: rotate(-1deg) scale(1); }
  50%      { transform: rotate(1deg) scale(1.02); }
}
@keyframes leafFlutterL {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(9deg); }
}
@keyframes leafFlutterR {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flower-stage,
  .flower-bloom,
  .flower-aura,
  .flower-pollen span,
  .flower-petal,
  .flower,
  .flower-core,
  .flower-petal-shape,
  .flower-leaf,
  .flower-stem { transition: none !important; animation: none !important; }
  .flower-panel.is-active { animation: none; }
}


/* ================================================================
   CTA — the flower's stem continues behind "let's create" down to
   the bottom of the section. A frosted glass "planter" sits between
   the stem and the text, blurring the stem so the copy stays crisp.
   ================================================================ */
.cta-stem {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #58cf7a 0%, #3a9a57 45%, #2c7a44 100%);
  box-shadow: 0 0 20px rgba(74, 197, 108, 0.35);
  border-radius: 5px 5px 0 0;
  z-index: 1;
  pointer-events: none;
}
.cta-planter {
  position: absolute;
  left: 50%;
  top: var(--planter-top, 84px);
  transform: translateX(-50%);
  width: min(860px, 88%);
  height: var(--planter-height, 470px);
  z-index: 2;
  pointer-events: none;
  border-radius: 22px 22px 30px 30px;
  background:
    linear-gradient(180deg,
      rgba(236, 233, 225, 0.09) 0%,
      rgba(236, 233, 225, 0.045) 30%,
      rgba(20, 22, 28, 0.28) 100%);
  border: 1px solid rgba(236, 233, 225, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -30px 60px rgba(0, 0, 0, 0.35),
    0 40px 90px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}
/* the planter rim — a slightly wider, brighter frosted lip at the top */
.cta-planter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: calc(100% + 40px);
  height: 30px;
  border-radius: 16px;
  background: linear-gradient(180deg,
    rgba(236, 233, 225, 0.14),
    rgba(236, 233, 225, 0.05));
  border: 1px solid rgba(236, 233, 225, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}
/* faint "soil" band just under the rim where the stem enters */
.cta-planter-soil {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 22px;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(60, 40, 18, 0.5), rgba(30, 20, 10, 0.15) 70%, transparent);
}
@media (max-width: 899px) {
  /* restored on mobile — slimmer stem, shorter lighter planter */
  .cta-stem {
    width: 3px;
    box-shadow: 0 0 12px rgba(74, 197, 108, 0.28);
  }
  /* glass planter removed on mobile per request — desktop keeps it */
  .cta-planter {
    display: none;
  }
}


/* ---- atmosphere: nebula aura + drifting pollen ------------------------ */
.flower-aura {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 165%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 42% 36%, rgba(245, 200, 66, 0.12), transparent 70%),
    radial-gradient(36% 42% at 60% 38%, rgba(74, 197, 108, 0.12), transparent 70%),
    radial-gradient(40% 46% at 60% 62%, rgba(96, 165, 250, 0.12), transparent 72%),
    radial-gradient(38% 44% at 40% 62%, rgba(212, 43, 18, 0.10), transparent 72%),
    radial-gradient(62% 60% at 50% 50%, rgba(126, 96, 190, 0.07), transparent 76%);
  filter: blur(26px);
  animation: auraBreath 11s ease-in-out infinite;
}
.flower-pollen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.flower-pollen span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: pollenDrift var(--dur, 14s) ease-in-out infinite;
}
@keyframes auraBreath {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes pollenDrift {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.5); }
  15%  { opacity: 0.75; }
  50%  { transform: translate(var(--drift, 24px), -46px) scale(1); }
  85%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translate(calc(var(--drift, 24px) * 0.4), -92px) scale(0.6); }
}


/* ================================================================
   STUDIO — a floating 3D moon fills the empty band above the
   "Studio direction" heading, balancing the "Next Channel" remote.
   ================================================================ */
.studio-moon {
  position: absolute;
  top: clamp(-10px, 2.4vw, 46px);
  left: clamp(22%, 37%, 40%);
  width: clamp(190px, 20vw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(14% 14% at 60% 38%, rgba(255,255,255,0.10), transparent 42%),
    radial-gradient(13% 13% at 61% 39%, rgba(58, 62, 80, 0.60), transparent 60%),
    radial-gradient(10% 10% at 39% 60%, rgba(255,255,255,0.09), transparent 42%),
    radial-gradient(9%  9%  at 40% 61%, rgba(58, 62, 80, 0.55), transparent 60%),
    radial-gradient(8%  8%  at 70% 66%, rgba(255,255,255,0.08), transparent 42%),
    radial-gradient(7%  7%  at 71% 67%, rgba(58, 62, 80, 0.50), transparent 60%),
    radial-gradient(6%  6%  at 31% 45%, rgba(58, 62, 80, 0.46), transparent 60%),
    radial-gradient(5%  5%  at 53% 24%, rgba(58, 62, 80, 0.44), transparent 60%),
    radial-gradient(4.5% 4.5% at 47% 78%, rgba(58, 62, 80, 0.40), transparent 60%),
    radial-gradient(3.5% 3.5% at 25% 33%, rgba(58, 62, 80, 0.42), transparent 60%),
    radial-gradient(3% 3% at 66% 52%, rgba(58, 62, 80, 0.38), transparent 60%),
    radial-gradient(2.5% 2.5% at 44% 46%, rgba(58, 62, 80, 0.36), transparent 60%),
    radial-gradient(2.5% 2.5% at 57% 71%, rgba(58, 62, 80, 0.34), transparent 60%),
    radial-gradient(2% 2% at 36% 74%, rgba(58, 62, 80, 0.32), transparent 60%),
    radial-gradient(26% 22% at 44% 55%, rgba(70, 74, 92, 0.30), transparent 70%),
    radial-gradient(20% 24% at 63% 48%, rgba(66, 70, 88, 0.26), transparent 72%),
    radial-gradient(18% 16% at 34% 40%, rgba(74, 78, 96, 0.22), transparent 72%),
    radial-gradient(circle at 34% 30%,
      #eeedf3 0%, #c8c9d4 32%, #9295a6 60%, #4d4f60 82%, #26283a 100%);
  box-shadow:
    inset -24px -20px 46px rgba(8, 9, 18, 0.88),
    inset 16px 14px 30px rgba(255, 255, 255, 0.16),
    0 0 66px 6px rgba(150, 168, 224, 0.18),
    0 0 130px 26px rgba(120, 140, 214, 0.10);
  transition: box-shadow 450ms ease, filter 450ms ease;
  will-change: transform;
  cursor: default;
}
/* soft atmospheric halo around the moon */
.studio-moon::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(140, 162, 224, 0.16), transparent 62%);
  filter: blur(14px);
  animation: moonHalo 13s ease-in-out infinite;
}
/* faint crescent of extra shadow to deepen the terminator */
.studio-moon-crescent {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 26%, transparent 52%, rgba(10, 11, 22, 0.5) 88%);
  mix-blend-mode: multiply;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes moonHalo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.09); }
}
@media (max-width: 760px) {
  /* restored on mobile — smaller, tucked to the upper right, behind content */
  .studio-moon {
    top: -8px;
    left: auto;
    right: 4%;
    width: clamp(110px, 32vw, 150px);
    opacity: 0.85;
  }
  .studio-moon::before { filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-moon, .studio-moon::before { animation: none !important; }
}


/* moon surface fine-grain regolith texture */
.studio-moon-texture {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.55) 0.5px, transparent 1.2px),
    radial-gradient(rgba(0, 0, 0, 0.45) 0.5px, transparent 1.2px),
    radial-gradient(rgba(255, 255, 255, 0.28) 0.5px, transparent 1.4px);
  background-size: 6px 6px, 9px 9px, 13px 13px;
  background-position: 0 0, 3px 4px, 6px 2px;
  -webkit-mask-image: radial-gradient(circle at 34% 30%, #000 60%, transparent 92%);
          mask-image: radial-gradient(circle at 34% 30%, #000 60%, transparent 92%);
}

/* clicking the big yellow button on the remote flips the moon's light red */
.studio-moon.is-red {
  filter: saturate(1.05);
  box-shadow:
    inset -24px -20px 46px rgba(34, 4, 4, 0.90),
    inset 16px 14px 30px rgba(255, 176, 166, 0.20),
    0 0 74px 8px rgba(233, 48, 31, 0.42),
    0 0 160px 32px rgba(233, 48, 31, 0.22);
}
.studio-moon.is-red::before {
  background: radial-gradient(circle, rgba(233, 48, 31, 0.30), transparent 62%);
}
.studio-moon.is-red .studio-moon-crescent {
  background: radial-gradient(circle at 30% 26%, rgba(233, 48, 31, 0.10) 40%, rgba(28, 4, 6, 0.55) 88%);
}


/* ================================================================
   SELECTED WORK — a floating pencil drifts (parallax) to the right of
   the "how I see the world" headline. JS drives the vertical parallax
   on .work-pencil; the inner element owns the tilt + idle float.
   ================================================================ */
.work-pencil {
  position: absolute;
  top: 0;
  right: clamp(40px, 6vw, 150px);
  width: max-content;
  margin-inline: 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.work-pencil-inner {
  position: relative;
  width: 232px;
  height: 30px;
  transform: rotate(38deg);
  transform-origin: center;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.5));
  animation: pencilFloat 6s ease-in-out infinite;
}
.work-pencil-inner span { position: absolute; top: 0; height: 30px; }

/* pink eraser */
.pencil-eraser {
  left: 0; width: 24px;
  border-radius: 15px 5px 5px 15px;
  background: linear-gradient(180deg, #ffb9c8 0%, #f77e97 46%, #d65b74 100%);
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.5),
              inset 0 -5px 7px rgba(0, 0, 0, 0.28);
}
/* metal ferrule with crimp lines */
.pencil-ferrule {
  left: 22px; width: 22px;
  background: linear-gradient(180deg, #eef1f5 0%, #c1c6cf 30%, #8e94a0 55%, #cbd0d9 80%, #979da8 100%);
  box-shadow: inset 4px 0 0 -2px rgba(0, 0, 0, 0.18),
              inset -4px 0 0 -2px rgba(0, 0, 0, 0.18),
              inset 0 2px 2px rgba(255, 255, 255, 0.4);
}
/* yellow painted barrel (cylindrical shading) */
.pencil-body {
  left: 42px; width: 156px;
  background: linear-gradient(180deg,
    #e2a11d 0%, #ffd451 15%, #ffe07a 33%, #f8c833 52%, #e0a91d 74%, #b17d0e 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.38),
              inset 0 -4px 6px rgba(0, 0, 0, 0.3);
}

/* cre(art)e #2 stamp on the pencil barrel */
.pencil-body::after {
  content: 'cre(art)e  #2';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* sharpened wood cone */
.pencil-tip {
  left: 197px; width: 35px;
  background: linear-gradient(180deg, #d7b076 0%, #f1d9ac 44%, #c39a5f 100%);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
          clip-path: polygon(0 0, 0 100%, 100% 50%);
}
/* exposed graphite point */
.pencil-lead {
  right: 0; width: 12px; height: 30px;
  background: linear-gradient(180deg, #55565e 0%, #2a2a30 50%, #55565e 100%);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
          clip-path: polygon(0 0, 0 100%, 100% 50%);
}
@keyframes pencilFloat {
  0%, 100% { transform: rotate(38deg) translateY(0); }
  50%      { transform: rotate(38deg) translateY(-12px); }
}
@keyframes pencilFloatSm {
  0%, 100% { transform: rotate(38deg) scale(0.55) translateY(0); }
  50%      { transform: rotate(38deg) scale(0.55) translateY(-12px); }
}
@media (max-width: 760px) {
  /* removed on mobile — the "cre(art)e #2" pencil was crowding the section
     alongside the landed remote, so it's hidden on phones only. */
  .work-pencil {
    display: none;
    right: -26px;
    overflow: visible;
  }
  .work-pencil-inner {
    transform: rotate(38deg) scale(0.55);
    animation: pencilFloatSm 6s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-pencil-inner { animation: none !important; }
  .work-pencil { top: clamp(320px, 30vw, 440px); }
}

/* ================================================================
   ARCH MOTIF — portrait + process phases
   A broad curved crown and straight lower sides give these surfaces
   the silhouette of a doorway without turning them into pills.
   ================================================================ */
.meet-reece-photo {
  isolation: isolate;
  overflow: hidden;
  margin: 24px 0;
  border: 1px solid rgba(236, 233, 225, 0.24);
  border-right: 1px solid rgba(236, 233, 225, 0.24);
  border-radius: 50% 50% 8px 8px / 22% 22% 8px 8px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    0 0 0 5px rgba(236, 233, 225, 0.025);
}

/* Keep the atmospheric image wash and caption inside the arch. */
.meet-reece-photo::after {
  border-radius: inherit;
}

@media (min-width: 769px) {
  .process-step {
    --door-accent: rgba(236, 233, 225, 0.18);
    overflow: hidden;
    padding-top: clamp(58px, 4.5vw, 78px);
    border-radius: 50% 50% 5px 5px / 17% 17% 5px 5px;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  .process-step:nth-child(1) { --door-accent: rgba(196, 155, 88, 0.78); }
  .process-step:nth-child(2) { --door-accent: rgba(210, 120, 68, 0.78); }
  .process-step:nth-child(3) { --door-accent: rgba(210, 78, 44, 0.82); }
  .process-step:nth-child(4) { --door-accent: rgba(212, 43, 18, 0.88); }

  /* The former straight top rule now follows the complete arch. */
  .process-step::before {
    inset: 0;
    width: auto;
    height: auto;
    box-sizing: border-box;
    border: 1px solid var(--door-accent);
    border-top-width: 2px;
    border-radius: inherit;
    background: transparent !important;
    transform: none;
    opacity: 0.72;
    transition: opacity 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
  }

  .process-step:hover::before { opacity: 1; }

  /* A short glowing jamb replaces the old square-corner tick. */
  .process-step::after {
    top: 42%;
    height: 0;
    border-radius: 0 2px 2px 0;
  }
  .process-step:hover::after { height: 56px; }
}

@media (max-width: 900px) {
  .meet-reece-photo {
    margin: 18px 0 26px;
    border-bottom: 1px solid rgba(236, 233, 225, 0.24);
    border-radius: 50% 50% 8px 8px / 20% 20% 8px 8px;
  }
}

@media (max-width: 768px) {
  /* Accordion rows stay compact, but retain the same rounded-door language. */
  .process-step {
    border-radius: 30px 30px 8px 8px !important;
  }
}

/* The Studio jump remote is restored on phones as a compact floating prop:
   small footprint, tight margins, so it reads as a playful accent instead of
   consuming a full screen. Sizing continues from the 1024/560 rules above. */
@media (max-width: 560px) {
  .studio-section > .jump-remote {
    width: 150px;
    margin-top: 4px;
    margin-bottom: 46px;
  }
}

/* ================================================================
   WORK PAGE — MOBILE EDITORIAL NAV
   A compact, asymmetric control bar replaces the loose logo/hamburger.
   The open menu becomes a numbered channel index: still playful, but
   deliberate and easy to scan with one thumb.
   ================================================================ */
@media (max-width: 720px) {
  body.work-page nav.site-nav,
  body.work-page nav.site-nav.scrolled {
    top: 12px;
    left: 14px;
    right: 14px;
    min-height: 60px;
    padding: 7px 8px 7px 17px;
    border: 1px solid rgba(236, 233, 225, 0.16);
    border-radius: 7px 25px 7px 25px;
    background: rgba(7, 8, 11, 0.92);
    /* backdrop-filter makes fixed descendants use this small capsule as
       their containing block; keep it off so the menu panel can fill screen. */
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition: background 300ms ease, border-color 300ms ease,
                border-radius 400ms var(--ease-snap), box-shadow 300ms ease;
  }

  body.work-page nav.site-nav::before {
    content: '';
    position: absolute;
    left: 18px;
    bottom: -2px;
    width: 58px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e9301f, #ff6b48 72%, transparent);
    transform: rotate(-1.5deg);
    box-shadow: 0 0 14px rgba(233, 48, 31, 0.55);
  }

  body.work-page nav.site-nav.is-open {
    border-color: rgba(233, 48, 31, 0.58);
    border-radius: 25px 7px 25px 7px;
    background: rgba(13, 10, 12, 0.94);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.48), 0 0 30px rgba(233, 48, 31, 0.09);
  }

  body.work-page .nav-logo {
    font-size: 20px;
    letter-spacing: 0.035em;
  }

  body.work-page .nav-logo-studio {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 7px;
    padding: 2px 7px 1px;
    border: 1px solid rgba(233, 48, 31, 0.46);
    border-radius: 3px 10px 3px 10px;
    color: #ff6044 !important;
    background: rgba(233, 48, 31, 0.08);
    opacity: 1;
    font-family: 'Space Mono', monospace;
    font-size: 7px;
    letter-spacing: 0.16em;
    transform: rotate(-2deg);
  }

  body.work-page .nav-toggle {
    display: block;
    flex: 0 0 88px;
    width: 88px;
    height: 44px;
    border: 1px solid rgba(236, 233, 225, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: #ece9e1;
    transition: border-color 250ms ease, background 250ms ease, transform 250ms var(--ease-snap);
  }

  body.work-page .nav-toggle::before {
    content: 'MENU';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.16em;
    color: rgba(236, 233, 225, 0.72);
  }

  body.work-page .nav-toggle span {
    left: auto;
    right: 12px;
    width: 18px;
    height: 1.5px;
  }
  body.work-page .nav-toggle span:nth-child(1) { top: 15px; }
  body.work-page .nav-toggle span:nth-child(2) { display: none; }
  body.work-page .nav-toggle span:nth-child(3) { top: 27px; }

  body.work-page .site-nav.is-open .nav-toggle {
    border-color: rgba(233, 48, 31, 0.62);
    background: rgba(233, 48, 31, 0.11);
  }
  body.work-page .site-nav.is-open .nav-toggle::before {
    content: 'CLOSE';
    color: #ff6044;
  }
  body.work-page .site-nav.is-open .nav-toggle span:nth-child(1),
  body.work-page .site-nav.is-open .nav-toggle span:nth-child(3) { top: 21px; }

  body.work-page .nav-links {
    inset: 0;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    padding: 132px 22px 64px;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 18%, rgba(233, 48, 31, 0.14), transparent 26%),
      radial-gradient(circle at 12% 84%, rgba(84, 91, 140, 0.13), transparent 32%),
      rgba(6, 7, 10, 0.975);
  }

  body.work-page .nav-links::before {
    content: 'CHANNEL SELECT  /  2026';
    position: absolute;
    top: 102px;
    left: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.24em;
    color: rgba(233, 48, 31, 0.78);
  }

  body.work-page .nav-links::after {
    content: 'LOST?';
    position: absolute;
    right: -0.04em;
    bottom: -0.18em;
    font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
    font-size: clamp(116px, 36vw, 168px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.08em;
    color: rgba(236, 233, 225, 0.035);
    pointer-events: none;
  }

  body.work-page .nav-links .nav-link {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 78px;
    padding: 0 72px 0 62px;
    justify-content: flex-start;
    border: 1px solid rgba(236, 233, 225, 0.13);
    border-radius: 5px 25px 5px 25px;
    background: rgba(255, 255, 255, 0.025);
    font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
    font-size: clamp(24px, 8vw, 34px);
    font-weight: 500;
    letter-spacing: -0.025em;
    text-transform: none;
    color: #ece9e1;
  }

  body.work-page .nav-links .nav-link::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(236, 233, 225, 0.36);
  }
  body.work-page .nav-links .nav-link:nth-child(1)::before { content: '01'; }
  body.work-page .nav-links .nav-link:nth-child(2)::before { content: '02'; }
  body.work-page .nav-links .nav-link:nth-child(3)::before { content: '03'; }

  body.work-page .nav-links .nav-link:nth-child(1) { transform: rotate(-0.6deg); }
  body.work-page .nav-links .nav-link:nth-child(2) {
    transform: translateX(6px) rotate(0.45deg);
    border-radius: 25px 5px 25px 5px;
  }
  body.work-page .nav-links .nav-link:nth-child(3) { transform: translateX(-3px) rotate(-0.35deg); }

  body.work-page .nav-links .nav-link.is-active {
    border-color: rgba(233, 48, 31, 0.72);
    background: linear-gradient(105deg, rgba(233, 48, 31, 0.22), rgba(233, 48, 31, 0.055));
    color: #fff5ef;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), inset 3px 0 0 #e9301f;
  }
  body.work-page .nav-links .nav-link.is-active::before { color: #ff6044; }
  body.work-page .nav-links .nav-link.is-active::after {
    content: 'CURRENT';
    display: block;
    position: absolute;
    left: auto;
    right: 18px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: none;
    font-family: 'Space Mono', monospace;
    font-size: 7px;
    letter-spacing: 0.16em;
    color: rgba(255, 96, 68, 0.78);
  }
}

/* Home page carries .work-page too (for other shared section styles),
   but the rounded rectangle "editorial capsule" nav above — inset card,
   full border, red glow underline — was only ever meant for the actual
   work.html gallery. Reset it back to the plain full-width nav bar on
   the home page specifically (has-dark-hero is unique to home.html). */
@media (max-width: 720px) {
  body.has-dark-hero.work-page nav.site-nav,
  body.has-dark-hero.work-page nav.site-nav.scrolled {
    top: 0;
    left: 0;
    right: 0;
    padding: 14px 20px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  body.has-dark-hero.work-page nav.site-nav::before {
    display: none;
  }
  body.has-dark-hero.work-page nav.site-nav.is-open {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}




@keyframes glassFloat {
  0%, 100% { transform: translateY(0px)   rotate(-12deg); }
  50%       { transform: translateY(-20px) rotate(-10deg); }
}

/* ── lens sphere — mirrors the moon technique ── */

/* atmospheric halo (same trick as the moon) */

/* specular glint — bright spot upper-left */

/* ── handle ── */

/* handle end cap */

/* B612 poster layout — main image large, secondary beside it */
.wp-media--poster {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  align-items: stretch;   /* both columns same height */
}
.wp-media--poster .wp-photo { width: 100%; }
/* secondary image: no cropping — show the whole thing */
.wp-media--poster .wp-photo--secondary {
  display: flex;
  align-items: stretch;
  background: #08090f;   /* dark matte for any letterbox edges */
}
.wp-media--poster .wp-photo--secondary .wp-img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;    /* let the grid row set the height */
  object-fit: contain;    /* full image visible, no cropping */
  object-position: center;
}
@media (max-width: 600px) {
  /* The process shot didn't read well as a second image on mobile —
     dropped entirely so the main poster is the whole story here. */
  .wp-media--poster .wp-photo--secondary {
    display: none;
  }
  .wp-media--poster {
    display: block;
  }
  .wp-media--poster .wp-photo--main {
    width: 100%;
  }
  .wp-media--poster .wp-photo--main .wp-img {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    object-fit: contain;
  }
}

/* ── alive-copy font-size guard — beats .copy-body 15px !important override ── */
.philosophy-copy .alive-copy,
.alive-copy.copy-body {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  line-height: 1.65 !important;
}

/* ── Work page section dividers restored ── */
.work-page .section { border-top: 1px solid var(--hairline); }
.work-page .section:first-of-type { border-top: none; }


/* =================================================================
   MOBILE OPTIMIZATION — Full audit fixes (all three pages)
   July 2026
   ================================================================= */

/* Global overflow guard — clip on the wrapper, NOT html/body (would break sticky) */
#main { overflow-x: clip; }

/* CTA section — tighten the huge vertical padding on mid-size phones */
@media (max-width: 720px) {
  .cta-section { padding-top: 96px; padding-bottom: 110px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 560px) {
  .cta-section { padding-top: 72px; padding-bottom: 88px; padding-left: 20px; padding-right: 20px; }
  /* CTA title — tighten the minimum so it doesn't clip on 360px phones */
  .cta-title { font-size: clamp(40px, 12vw, 140px); }
}

/* alive-copy philosophy text — loosen slightly on very small phones */
@media (max-width: 480px) {
  .philosophy-copy .alive-copy,
  .alive-copy.copy-body {
    font-size: clamp(16px, 4.8vw, 22px) !important;
    line-height: 1.65 !important;
  }
}

/* Contact form — radio chips can overflow on narrow phones */
@media (max-width: 420px) {
  .radio-chip {
    font-size: 9px !important;
    padding: 6px 10px !important;
    letter-spacing: 0.08em;
  }
  .radio-row { gap: 6px !important; }
}

/* Philosophy section — give the portal some breathing room on narrow phones */
@media (max-width: 380px) {
  .philosophy-section .portal {
    width: clamp(150px, 70vw, 200px) !important;
  }
}

/* Work page — portfolio gallery section spacing */
@media (max-width: 560px) {
  .wp-project { gap: 0; }
  .wp-title { font-size: clamp(18px, 5.5vw, 26px); }
  .wp-tag { font-size: 8px; }
}

/* Section tag / eyebrow — prevent overflow from long letter-spacing */
@media (max-width: 420px) {
  .section-tag { letter-spacing: 0.18em; font-size: 8.5px; }
}

/* Footer — collapse fully to 1 column on very small phones */
@media (max-width: 480px) {
  footer.site-footer {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

/* Contact page header watermark — ensure it stays in-bounds */
@media (max-width: 560px) {
  .page-header .watermark { font-size: 28vw !important; }
}

/* Work page CTA + header adjustments on phones */
@media (max-width: 560px) {
  body.work-page .page-header--aurora { padding-top: 80px !important; padding-bottom: 24px !important; }
}


/* =================================================================
   TARGETED MOBILE FIXES — July 2026 (pass 2)
   ================================================================= */

/* 1. Trusted-by client rows: collapse companies on mobile, expand on tap */
@media (max-width: 768px) {
  .cr-companies {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, margin-top 0.3s ease;
  }
  .client-row.is-open .cr-companies {
    max-height: 120px;
    opacity: 1;
    margin-top: 8px;
  }
  /* Chevron indicator */
  .cr-tag::after {
    content: ' +';
    font-size: 12px;
    color: var(--muted);
    opacity: 0.7;
  }
  .client-row.is-open .cr-tag::after { content: ' −'; }
  .client-row { cursor: pointer; }
}

/* 2. Core Disciplines removed on mobile per request — desktop keeps the
      compact single-column list untouched (see base rules above). */
@media (max-width: 768px) {
  .disciplines-block {
    display: none;
  }
}

/* 3. Portal/galaxy alignment on mobile — close the gap */
@media (max-width: 860px) {
  .philosophy-section {
    padding-bottom: 60px !important;
  }
  .portal-col {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  .philosophy-section .portal {
    margin-top: 0 !important;
  }
}

/* 4. B612 secondary image — remove black background */
.wp-photo--secondary,
.wp-photo--secondary .wp-img {
  background: transparent !important;
}

/* 5. Work page nav overlay — ensure full-screen coverage and solid bg */
@media (max-width: 720px) {
  body.work-page .site-nav.is-open .nav-links {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    background:
      radial-gradient(circle at 82% 18%, rgba(233, 48, 31, 0.14), transparent 26%),
      radial-gradient(circle at 12% 84%, rgba(84, 91, 140, 0.13), transparent 32%),
      rgba(6, 7, 10, 0.98) !important;
  }
}

/* 6. Contact page "what cre(art)e is open to" — fix dead space on mobile */
@media (max-width: 720px) {
  .hover-expand-row {
    flex-direction: column;
    gap: 2px;
  }
  .hex-block {
    flex: none !important;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding-left: 18px;
  }
}

/* 7. Work page header — remove excess top dead space on mobile */
@media (max-width: 760px) {
  body.work-page .page-header--aurora {
    min-height: 0 !important;
    padding-top: 90px !important;
    padding-bottom: 20px !important;
  }
  /* Reduce tunnel section height so it doesn't swallow the screen */
  .tnl-section { height: 600vh !important; }
}
@media (max-width: 560px) {
  body.work-page .page-header--aurora {
    padding-top: 80px !important;
    padding-bottom: 14px !important;
  }
  .tnl-section { height: 500vh !important; }
}

/* 8. Home page TV hero — reduce dead space on very small phones */
@media (max-width: 480px) {
  .tv-stage { height: 120vh !important; }
}

/* ── Work page nav: beat all tnl/lightbox z-indexes when menu is open ── */
.site-nav.is-open { z-index: 999999 !important; }
.site-nav.is-open .nav-links {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}
/* Lock body scroll and push work canvas behind the overlay */
body.nav-locked .tnl-section,
body.nav-locked .tnl-stage,
body.nav-locked .tnl-item {
  z-index: 0 !important;
}

/* ── Trusted-by: guarantee all rows start collapsed on mobile ── */
@media (max-width: 768px) {
  .cr-companies {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1),
                opacity 0.3s ease, margin-top 0.3s ease;
  }
  .client-row.is-open .cr-companies {
    max-height: 200px !important;
    opacity: 1 !important;
    margin-top: 10px !important;
  }
}

/* ── Home portfolio: collapse description on mobile, tap to expand ── */
@media (max-width: 768px) {
  .wp-desc {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1),
                opacity 0.3s ease, margin-top 0.3s ease;
  }
  .wp-project.desc-open .wp-desc {
    max-height: 300px !important;
    opacity: 1 !important;
    margin-top: 14px !important;
  }
  /* Header still toggles, but the tap hint itself moves to the bottom of
     the card — right above where the description folds out — and is
     colour-matched to each project's own accent (teal / grey / purple). */
  .wp-header {
    cursor: pointer;
  }
  .wp-footer {
    cursor: pointer;
  }
  .wp-footer::before {
    content: '+ READ MORE';
    display: block;
    margin-bottom: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.18em;
    color: rgba(212,43,18,0.75);
  }
  .wp-project.desc-open .wp-footer::before {
    content: '− CLOSE';
  }
  .wp-project:nth-child(1) .wp-footer::before { color: #2ab8c8; }
  .wp-project:nth-child(2) .wp-footer::before { color: rgba(210,215,220,0.8); }
  .wp-project:nth-child(3) .wp-footer::before { color: #9B2E96; }
}


/* ================================================================
   PROCESS CARDS — GLASS ARCHES (desktop)
   Translucent, reflective surfaces that let the cosmos move behind them.
   ================================================================ */
@media (min-width: 769px) {
  .process-step:nth-child(1) { --glass-tint: rgba(196,155,88,0.15); }
  .process-step:nth-child(2) { --glass-tint: rgba(210,120,68,0.14); }
  .process-step:nth-child(3) { --glass-tint: rgba(210,78,44,0.13); }
  .process-step:nth-child(4) { --glass-tint: rgba(212,43,18,0.14); }

  .process-step {
    background:
      linear-gradient(118deg,
        transparent 0%,
        rgba(255,255,255,0.075) 18%,
        rgba(255,255,255,0.018) 31%,
        transparent 46%),
      radial-gradient(120% 72% at 18% 0%,
        rgba(255,255,255,0.13) 0%,
        var(--glass-tint) 28%,
        transparent 62%),
      linear-gradient(165deg,
        rgba(30,32,42,0.50) 0%,
        rgba(18,20,29,0.38) 52%,
        rgba(8,10,16,0.30) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.28) brightness(1.04);
            backdrop-filter: blur(20px) saturate(1.28) brightness(1.04);
    box-shadow:
      0 26px 64px rgba(0,0,0,0.28),
      0 8px 24px rgba(0,0,0,0.14),
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 1px 0 0 rgba(255,255,255,0.07),
      inset 0 -1px 0 rgba(255,255,255,0.035) !important;
    transition: box-shadow 0.45s ease, background 0.45s ease;
  }

  .process-step:hover {
    box-shadow:
      0 32px 76px rgba(0,0,0,0.34),
      0 10px 30px rgba(0,0,0,0.16),
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 1px 0 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(255,255,255,0.05) !important;
  }

  /* Number: ghost watermark — big, transparent, in place */
  .process-num {
    font-size: clamp(68px, 9vw, 116px) !important;
    opacity: 0.065 !important;
    color: #ece9e1 !important;
    -webkit-text-fill-color: #ece9e1 !important;
    -webkit-text-stroke: 0 !important;
    line-height: 0.9 !important;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1) !important;
  }
  .process-step:hover .process-num {
    opacity: 0.13 !important;
    transform: scale(1.07) !important;
  }
  /* hide the old metallic sheen pseudo */
  .process-num::before { display: none !important; }

  /* Title: Playfair italic — editorial, warm */
  .process-title {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: clamp(20px, 1.9vw, 27px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #ece9e1 !important;
  }

  /* Decorative rule that grows below the title on hover */
  .process-title::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 12px;
    background: var(--door-accent, rgba(196,155,88,0.55));
    border-radius: 1px;
    transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
  }
  .process-step:hover .process-title::after { width: 58px; }

  /* Description: slightly warmer, breathes more */
  .process-desc {
    font-size: 13.5px !important;
    color: rgba(200,195,190,0.82) !important;
    line-height: 1.72 !important;
    margin-top: 14px;
  }

  /* Category label: styled as elegant pill tag */
  .process-body-inner > .label-muted {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 22px !important;
    padding: 5px 14px 5px 10px !important;
    border: 1px solid var(--door-accent, rgba(196,155,88,0.32)) !important;
    border-radius: 20px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--door-accent, rgba(196,155,88,0.75)) !important;
    background: transparent !important;
    transition: border-color 0.3s ease, color 0.3s ease !important;
  }
  .process-step:hover .process-body-inner > .label-muted {
    border-color: var(--door-accent, rgba(196,155,88,0.60)) !important;
    color: var(--door-accent, rgba(196,155,88,1)) !important;
  }
  /* small dot accent before label text */
  .process-body-inner > .label-muted::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important; height: 5px !important;
    border-radius: 50% !important;
    background: var(--door-accent, rgba(196,155,88,0.75)) !important;
    flex-shrink: 0 !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
  }
  .process-step:hover .process-body-inner > .label-muted::before { opacity: 1 !important; }
}


/* ================================================================
   STUDIO DIRECTION — PHOTO RISES TO TITLE
   ================================================================ */
@media (min-width: 769px) {
  /* Collapse gap between section head and the meet-reece grid */
  .studio-section .section-head {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Keep the portrait below the heading so neither layer masks the type. */
  .studio-section .meet-reece-photo {
    margin-top: 24px !important;
  }
  /* Compensate content column so text starts below the title naturally */
  .studio-section .meet-reece-content {
    padding-top: 12px !important;
  }
}

/* Bold accent spans inside meet-reece bio */
.meet-reece-bio strong {
  color: #ece9e1;
  font-weight: 700;
}

/* The shared "max-width: 64ch" editorial rule let the quote line run wide
   enough to duck under the jump-remote graphic in the top-right of the
   section (desktop). Pull it back in so it wraps clear of the remote. */
@media (min-width: 901px) {
  .studio-section .meet-reece-quote {
    max-width: 440px;
  }
}

/* ================================================================
   TRUSTED-BY ACCORDION — condensed redesign (mobile only)
   The accordion (.clients-rows) only ever renders <=899px — desktop
   shows the cosmic-flower bloom instead (see the `min-width:900px`
   rule that hides .clients-rows) — so everything below is effectively
   mobile-scoped even where a selector isn't wrapped in its own query.
   .cr-company/-brand/-work ARE shared with the desktop flower panels,
   so those three stay wrapped in the media query to leave the bloom
   untouched.

   Problem this fixes: an open row was capped at max-height:200px
   (see the "guarantee all rows start collapsed" rule above), which
   clipped the 3rd/4th client off entirely — real content, no way to
   reach it. Fix leans the other way: shrink each row so the whole
   list fits comfortably, rather than growing the cap indefinitely. */
@media (max-width: 899px) {
  .clients-rows { margin-top: 4px; }

  /* "Teams and brands cre(art)e has built worlds for" reads like a real
     section title on mobile instead of a small muted caption line. */
  .clients-lead {
    font-family: 'PP Neue Montreal', 'Neue Montreal', sans-serif;
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--chalk);
    line-height: 1.15;
    max-width: 100%;
    margin-top: 10px;
    text-align: center;
  }

  .client-row {
    grid-template-columns: 24px minmax(0, 1fr) 30px !important;
    grid-template-rows: auto auto auto;
    column-gap: 10px !important;
    padding: 16px 8px 16px 4px !important;
  }
  .client-row .cr-num {
    grid-column: 1; grid-row: 1;
    align-self: start;
    padding-top: 3px;
    font-size: 9px;
  }
  .client-row .cr-name {
    grid-column: 2; grid-row: 1;
    font-size: clamp(18px, 5.2vw, 23px) !important;
    line-height: 1.15;
  }
  .client-row .cr-tag {
    grid-column: 2; grid-row: 2;
    text-align: left !important;
    margin-top: 3px !important;
    font-size: 8px !important;
    white-space: normal !important;
    line-height: 1.4;
  }
  .client-row .cr-companies { grid-column: 2 / -1; grid-row: 3; }
  .cr-toggle {
    grid-column: 3; grid-row: 1;
    width: 26px; height: 26px;
  }
  .cr-toggle::before, .cr-toggle::after { width: 9px; }

  /* Expanded panel — generous enough that nothing ever clips again,
     while each card below is condensed enough that it rarely needs it */
  .cr-companies {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .client-row.is-open .cr-companies {
    max-height: 340px !important;
    margin-top: 8px !important;
  }

  /* Each client — one condensed line (brand left, work right) instead
     of a tall bordered tile, separated by a hairline instead of a box.
     Grid (not flex-wrap) so the work tag always stays pinned to the
     right column even when its text is long enough to wrap onto two
     lines — flex-wrap would drop a lone wrapped item to flex-start on
     its own line, which is what pushed "International Social Media
     Campaign" out of alignment with the single-line tags above it. */
  .cr-company {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%) !important;
    align-items: baseline !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    padding: 9px 4px !important;
    border: none !important;
    border-bottom: 1px solid rgba(236,233,225,0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .cr-company:last-child { border-bottom: none !important; }
  .cr-company-brand {
    padding-bottom: 0 !important;
    border-bottom: none !important;
    width: auto !important;
    font-size: 12px !important;
    min-width: 0;
  }
  .cr-company-work {
    font-size: 8.5px !important;
    text-align: right;
    line-height: 1.4;
  }
}