/* =====================================================================
   BAKRADZE STUDIO - styles.css
   Shared design system across Home, Work, Contact.
   Paper-led editorial. paper #F5F5F3 · ink #050506 · red #D20001
   Type: Helvetica Neue stack, no serif. Red = precision mark only.
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  --paper:   #F5F5F3;
  --ink:     #050506;
  --red:     #D20001;

  --ink-80:  rgba(5, 5, 6, 0.82);
  --ink-70:  rgba(5, 5, 6, 0.70);
  --ink-60:  rgba(5, 5, 6, 0.60);
  --ink-40:  rgba(5, 5, 6, 0.40);
  --hairline: rgba(5, 5, 6, 0.14);
  --hairline-strong: rgba(5, 5, 6, 0.30);

  --paper-on-ink:    rgba(245, 245, 243, 0.92);
  --paper-on-ink-60: rgba(245, 245, 243, 0.58);
  --hairline-light:  rgba(245, 245, 243, 0.20);

  --font: "Helvetica Neue", Helvetica, Arial, -apple-system, "Segoe UI", sans-serif;

  --max-w: 90rem;                      /* wider column; fixes zoomed-out feel on large screens */
  --gutter: clamp(1.5rem, 5vw, 5rem);  /* more breathing room */
  --label-col: minmax(0, 17rem);
  --space-section: clamp(5rem, 10vh, 8rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-reveal: 0.9s;
}

/* ---------- 2. Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
::selection { background: var(--red); color: var(--paper); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); }
[id] { scroll-margin-top: 6rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 3. Page-load sequence ----------------------------------- */
.js .seq {
  opacity: 0;
  transform: translateY(0.9rem);
  animation: seq-in 0.55s var(--ease-out) forwards;
}
.js .seq-1 { animation-delay: 0.05s; }
.js .seq-2 { animation-delay: 0.18s; }
.js .seq-3 { animation-delay: 0.28s; }
.js .seq-4 { animation-delay: 0.38s; }
@keyframes seq-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- 4. Shared editorial pieces ------------------------------ */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 0.375rem; height: 0.375rem;
  background: var(--red);
  border-radius: 50%;
  flex: none;
}
.eyebrow-light { color: var(--paper-on-ink-60); }

.h-display {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.07;
  max-width: 20ch;
  text-wrap: balance;
}
.h-display-wide { max-width: 26ch; }
/* Formats headline sits on one line */
.formats-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
@media (max-width: 48rem) {
  .formats-heading { white-space: normal; }
}

.lede {
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.62;
  color: var(--ink-60);
  max-width: 40rem;
}

/* asymmetric label/body grid, now with more air */
.split {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.split-label { padding-top: 0.6rem; }

.red-period { color: var(--red); }
.u-red {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* crop marks */
.crop { position: absolute; width: 1.25rem; height: 1.25rem; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--red); }
.crop::before { width: 100%; height: 1px; }
.crop::after  { width: 1px; height: 100%; }
.crop-tl { top: 0; left: 0; } .crop-tl::before, .crop-tl::after { top: 0; left: 0; }
.crop-br { bottom: 0; right: 0; }
.crop-br::before { bottom: 0; right: 0; } .crop-br::after { bottom: 0; right: 0; }

/* editorial link CTA */
.link-cta {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-bottom: 0.4rem;
}
.link-cta::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.link-cta:hover::before, .link-cta:focus-visible::before { transform: scaleX(1); }
.link-cta-quiet { color: var(--ink-60); }
.link-cta-quiet:hover { color: var(--ink); }

/* arrow link */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.02em;
}
.arrow-link .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.arrow-link:hover .arrow { transform: translateX(0.35rem); }

/* solid editorial button (used sparingly) */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--ink);
  overflow: hidden;
  transition: color 0.4s var(--ease-out);
  color: var(--ink);
}
.btn .btn-label { position: relative; z-index: 1; }
.btn .arrow { position: relative; z-index: 1; transition: transform 0.4s var(--ease-out); }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: translateY(0); }
.btn:hover .arrow { transform: translateX(0.3rem); }
.btn-red { border-color: var(--ink); }
.btn-red::before { background: var(--red); }
.btn-red:hover { color: var(--paper); }

/* ---------- 5. Header ----------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,245,243,0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

.header-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: 1.3rem;
}
.wordmark {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.wordmark-sub { font-weight: 400; color: var(--ink-60); }
.wordmark-dot { width: 0.3125rem; height: 0.3125rem; background: var(--red); align-self: center; }

.site-nav {
  display: flex; gap: clamp(1.5rem, 3vw, 2.75rem);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.site-nav a {
  position: relative; color: var(--ink-60);
  transition: color 0.3s var(--ease-out);
  padding-bottom: 0.25rem;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--ink); }

/* ---------- 6. Hero -------------------------------------------------- */
.hero { padding-block: clamp(5rem, 12vh, 9rem) 0; position: relative; overflow: hidden; }
.hero-grid { position: relative; padding-block: clamp(2.5rem, 6vh, 4rem); }

.hero-meta {
  display: flex; align-items: center; gap: 0.95rem;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  position: relative; z-index: 1;
}
.meta-sep { width: 0.25rem; height: 0.25rem; background: var(--red); border-radius: 50%; }

.hero-headline {
  font-size: clamp(2.85rem, 8.4vw, 6.75rem);
  font-weight: 600; letter-spacing: -0.035em;
  line-height: 1.02; max-width: 15ch;
  position: relative; z-index: 1;
}
.hero-headline em {
  font-style: normal; font-weight: 300; letter-spacing: -0.025em;
  position: relative; display: inline-block;
}
/* Red underline removed per brief */
.hero-emph { position: relative; display: inline-block; }

.hero-headline .line,
.contact-title .line {
  display: block; overflow: hidden;
  padding-bottom: 0.06em; margin-bottom: -0.06em;
}
.line-inner { display: block; transform: translateY(110%); }
.js .line-inner { animation: line-up 0.7s var(--ease-out) forwards; }
.js .line:nth-child(1) .line-inner { animation-delay: 0.08s; }
.js .line:nth-child(2) .line-inner { animation-delay: 0.16s; }
.js .line:nth-child(3) .line-inner { animation-delay: 0.24s; }
.no-js .line-inner { transform: none; }
@keyframes line-up { to { transform: translateY(0); } }

.hero-subline {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.6; color: var(--ink-60); max-width: 38rem;
  position: relative; z-index: 1;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2.25rem;
  margin-top: clamp(2.25rem, 5vh, 3rem);
  position: relative; z-index: 1;
}
/* Primary action: solid, unmistakable */
.cta-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.75rem;
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}
.cta-primary .cta-primary-text,
.cta-primary .cta-primary-arrow { position: relative; z-index: 1; }
.cta-primary .cta-primary-arrow {
  transition: transform 0.4s var(--ease-out);
}
.cta-primary::before {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.cta-primary:hover::before, .cta-primary:focus-visible::before { transform: translateY(0); }
.cta-primary:hover .cta-primary-arrow { transform: translateX(0.35rem); }

/* Right-side vertical anchor: balances the hero composition */
.hero-index {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  pointer-events: none; z-index: 1;
}
.hero-index-line {
  width: 1px; height: clamp(4rem, 10vh, 7rem);
  background: var(--hairline-strong);
  position: relative; overflow: hidden;
}
/* A faint red glint travels down the rule, slowly, on a long loop */
.hero-index-line::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 28%; top: -28%;
  background: linear-gradient(to bottom, transparent, var(--red), transparent);
}
.js .hero-index-line::after { animation: glint-fall 5.5s var(--ease-io) 2s infinite; }
@keyframes glint-fall {
  0%   { top: -28%; opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}
.hero-index-label {
  writing-mode: vertical-rl;
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-40);
}
@media (max-width: 60rem) { .hero-index { display: none; } }

@keyframes rule-grow { to { transform: scaleX(1); } }

/* ---------- 7. Problem ---------------------------------------------- */
.problem {
  padding-top: clamp(3.5rem, 7vh, 5rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
/* Headline spans full width; body indents right with red vertical rule */
.problem-headline {
  font-size: clamp(2.6rem, 5.6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.055;
  max-width: none;
}
.problem-body-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  margin-top: clamp(2rem, 4vh, 3rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
  margin-left: clamp(0rem, 35%, 42rem); /* push body right to roughly mid-page */
}
.problem-rule {
  flex: none;
  width: 1px;
  height: 3.5rem;
  background: var(--red);
  margin-top: 0.2rem;
}
.problem-body {
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 36rem;
}
@media (max-width: 44rem) {
  .problem-headline {
    font-size: clamp(2.1rem, 8vw, 3rem);
  }
  .problem-body-wrap {
    margin-left: 0;
    gap: 1.25rem;
  }
  .problem-rule { height: 2.5rem; }
}

/* ---------- 8. Services (full-bleed black) -------------------------- */
.services {
  background: var(--ink); color: var(--paper-on-ink);
  padding-block: var(--space-section);
  position: relative;
}
/* Threshold rule: a red line draws across the top edge as the band enters */
.services::before {
  content: ""; position: absolute; top: 0; left: 0;
  height: 2px; width: 100%; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out);
  z-index: 2;
}
.services.is-entered::before { transform: scaleX(1); }
.no-js .services::before { transform: scaleX(1); }
.services-head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.services .h-display { color: var(--paper-on-ink); }
.service-rows { border-top: 1px solid var(--hairline-light); }

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(2rem, 5vh, 3.25rem);
  border-bottom: 1px solid var(--hairline-light);
}
.service-row:last-child { border-bottom: none; }
/* red progress line that fills along the top of the row */
.service-row::before {
  content: ""; position: absolute; top: -1px; left: 0;
  height: 1px; width: 100%; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.service-row:hover::before,
.service-row.is-active::before { transform: scaleX(1); }

.service-index {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em;
  color: var(--paper-on-ink-60);
  transition: color 0.35s var(--ease-out);
}
.service-row:hover .service-index,
.service-row.is-active .service-index { color: var(--red); }

.service-title {
  font-size: clamp(1.75rem, 3.9vw, 2.9rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;
  transition: transform 0.45s var(--ease-out);
  will-change: transform;
}
.service-row:hover .service-title { transform: translateX(0.6rem); }

.service-desc {
  grid-column: 2; margin-top: 0.7rem;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--paper-on-ink-60); max-width: 38rem;
  transition: color 0.4s var(--ease-out);
}
.service-row:hover .service-desc { color: var(--paper-on-ink); }

.services-callout {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
  display: flex; align-items: center; gap: 1.4rem;
  font-size: 1rem; color: var(--paper-on-ink-60); letter-spacing: 0.01em;
}
.callout-rule { flex: none; width: 2.75rem; height: 1px; background: var(--red); }

/* ---------- 9. Method ----------------------------------------------- */
.method.section { padding-top: clamp(3.5rem, 7vh, 5rem); padding-bottom: clamp(3.5rem, 7vh, 5rem); }
.method-head { margin-bottom: clamp(1.25rem, 2.5vh, 1.75rem); }
/* method-words removed per brief */

.method-stack {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  display: grid; gap: clamp(1.25rem, 3vh, 2rem);
}
.method-card {
  position: sticky; top: clamp(6rem, 13vh, 8.5rem);
  background: #FAFAF9;
  border: 1px solid var(--hairline);
  padding: clamp(2.5rem, 4.5vw, 3.75rem);
  overflow: hidden;
  min-height: clamp(14rem, 32vh, 18rem);
  display: flex; align-items: center;
  will-change: transform; transform-origin: 50% 0;
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 2px 30px rgba(5,5,6,0.04);
}
.method-card.is-front {
  border-color: var(--hairline-strong);
  box-shadow: 0 6px 44px rgba(5,5,6,0.07);
}
.method-card:nth-child(2) { top: calc(clamp(6rem,13vh,8.5rem) + 1.25rem); }
.method-card:nth-child(3) { top: calc(clamp(6rem,13vh,8.5rem) + 2.5rem); }
.method-card:nth-child(4) { top: calc(clamp(6rem,13vh,8.5rem) + 3.75rem); }

.ghost-num {
  position: absolute; top: 50%; right: clamp(1rem, 4vw, 3rem);
  transform: translateY(-50%);
  font-size: clamp(11rem, 30vw, 23rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(5,5,6,0.24);
  user-select: none; pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .ghost-num { color: rgba(5,5,6,0.07); }
}
.card-crop { position: absolute; width: 1rem; height: 1rem; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease-out); }
.card-crop::before, .card-crop::after { content: ""; position: absolute; background: var(--red); }
.card-crop::before { width: 100%; height: 1px; } .card-crop::after { width: 1px; height: 100%; }
.card-crop-tl { top: 0.7rem; left: 0.7rem; } .card-crop-tl::before, .card-crop-tl::after { top: 0; left: 0; }
.card-crop-br { bottom: 0.7rem; right: 0.7rem; }
.card-crop-br::before { bottom: 0; right: 0; } .card-crop-br::after { bottom: 0; right: 0; }
.method-card:hover .card-crop, .method-card.is-front .card-crop { opacity: 1; }

.method-card-body { position: relative; max-width: 34rem; }
.method-step {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red); margin-bottom: 1.1rem;
}
.method-title {
  font-size: clamp(1.7rem, 3.8vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.07;
}
.method-desc { margin-top: 1.1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-60); }
.method-tags {
  margin-top: 1.6rem; font-size: 0.8125rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-40);
}

/* ---------- 10. Formats --------------------------------------------- */
.formats-head { margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.format-grid {
  margin-top: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}

.format {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(2rem, 4.5vh, 3rem) clamp(1.5rem, 3vw, 2.5rem)
           clamp(2rem, 4.5vh, 3rem) 0;
}
.formats.section { padding-block: clamp(3.5rem, 7vh, 5rem); }
.format.reveal:nth-child(2) { transition-delay: 0.18s; }
.format.reveal:nth-child(3) { transition-delay: 0.36s; }
.format + .format { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 3vw, 2.5rem); }

.format-title {
  margin-top: 1.3rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600; letter-spacing: -0.015em;
}
.format-desc { margin-top: 0.95rem; font-size: 0.9875rem; line-height: 1.6; color: var(--ink-60); }
.format-best { margin-top: auto; padding-top: 1.6rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-60); }
.best-label {
  display: block; font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem;
}

/* ---------- 11. Proof strip / proof section -------------------------  */

/* Proof section: borderless editorial, hairline-ruled (matches page language) */
.proof { padding-block: clamp(1.5rem, 3vh, 2.5rem) clamp(3.5rem, 7vh, 5rem); }

.proof-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}
.proof-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.proof-label {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: 24ch;
  color: var(--ink);
}
/* CTA as editorial link with sweep underline, not a boxed button */
.proof-cta-link {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  flex: none;
  padding-bottom: 0.45rem;
}
.proof-cta-text {
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.proof-cta-line {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--hairline-strong);
}
.proof-cta-text::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.proof-cta-link:hover .proof-cta-text::after,
.proof-cta-link:focus-visible .proof-cta-text::after { transform: scaleX(1); }
.proof-cta-arrow {
  font-size: 0.9375rem; color: var(--ink-40);
  transition: transform 0.4s var(--ease-out), color 0.3s var(--ease-out);
  align-self: center;
}
.proof-cta-link:hover .proof-cta-arrow { transform: translateX(0.35rem); color: var(--red); }

.proof-marquee {
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  padding-block: clamp(0.5rem, 1.5vh, 1rem);
}
.marquee-track {
  display: flex; align-items: center;
  gap: clamp(3.5rem, 7vw, 6.5rem);
  width: max-content; padding-inline: clamp(1.75rem, 3.5vw, 3.25rem);
}
.js .marquee-track { animation: marquee 48s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.no-js .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

.client { flex: none; }
.client-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(5.5rem, 8vw, 8rem);
  height: clamp(1.5rem, 2.5vw, 2.2rem);
}
.client-img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0.7; transition: opacity 0.3s var(--ease-out);
}
.client-img img:hover { opacity: 1; }
.client-type {
  flex: none; font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); opacity: 0.66;
  transition: opacity 0.3s var(--ease-out); white-space: nowrap;
}
.client-type:hover { opacity: 1; }
.client-mark { flex: none; width: 0.25rem; height: 0.25rem; background: var(--red); border-radius: 50%; opacity: 0.8; }

.proof-cta { margin-top: clamp(2.5rem, 6vh, 4rem); }

/* ---------- 12. Final CTA ------------------------------------------- */
.cta-final {
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: var(--space-section);
}

/* Red animated rule that draws in on scroll */
.cta-rule-wrap {
  overflow: hidden;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}
.cta-rule {
  display: block;
  height: 1px;
  background: var(--red);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.cta-rule.is-drawn { transform: scaleX(1); }

/* Desktop: 60/40 split — headline left, action right */
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: end;
  margin-bottom: clamp(4.5rem, 8vh, 6rem);
}

/* Headline: large, left-aligned, line-masked entrance */
.cta-headline {
  font-size: clamp(3rem, 6.2vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.02;
  display: flex;
  flex-direction: column;
}
.cta-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.cta-line-inner {
  display: block;
  transform: translateY(110%);
}
.js .cta-line-inner { animation: line-up 0.95s var(--ease-out) forwards; }
.js .cta-line:nth-child(1) .cta-line-inner { animation-delay: 0.1s; }
.js .cta-line:nth-child(2) .cta-line-inner { animation-delay: 0.22s; }
.no-js .cta-line-inner { transform: none; }

/* Right column */
.cta-right {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vh, 3rem);
  padding-bottom: 0.5rem; /* align to headline baseline */
}

.cta-body {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 34rem;
}

/* Email: oversized, sweep-fill hover */
.cta-email {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  position: relative;
  text-decoration: none;
}
.cta-email-text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  position: relative;
  padding-bottom: 0.45rem;
}
/* Static underline */
.cta-email-line {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--hairline-strong);
  display: block;
}
/* Red sweep on hover */
.cta-email-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.cta-email:hover .cta-email-text::after,
.cta-email:focus-visible .cta-email-text::after { transform: scaleX(1); }

.cta-email-arrow {
  font-size: 1rem;
  color: var(--ink-40);
  transition: transform 0.4s var(--ease-out), color 0.3s var(--ease-out);
  display: inline-block;
  line-height: 1;
  align-self: center;
}
.cta-email:hover .cta-email-arrow,
.cta-email:focus-visible .cta-email-arrow {
  transform: translateX(0.35rem);
  color: var(--red);
}

/* Mobile: stack */
@media (max-width: 52rem) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vh, 3.5rem);
    align-items: start;
  }
  .cta-headline {
    font-size: clamp(2.5rem, 9vw, 3.75rem);
  }
  .cta-right { padding-bottom: 0; }
}

/* ---------- 13. Footer ---------------------------------------------- */
.site-footer { }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: 1.85rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60);
}
.footer-nav { display: flex; gap: 1.5rem; }
.footer-nav a, .footer-top { position: relative; padding-bottom: 0.25rem; transition: color 0.3s var(--ease-out); }
.footer-nav a:hover, .footer-top:hover { color: var(--ink); }
.footer-nav a::after, .footer-top::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.footer-nav a:hover::after, .footer-top:hover::after { transform: scaleX(1); }

/* ===================================================================
   WORK PAGE
   =================================================================== */
.work-intro { padding-block: clamp(4.5rem, 11vh, 8rem) clamp(1rem, 3vh, 2rem); }
.work-intro .eyebrow { margin-bottom: 1.5rem; }
.work-intro-title {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.02;
}
.work-intro-sub {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.6; color: var(--ink-60); max-width: 44rem;
}
.work-intro-rule {
  margin-top: clamp(2.5rem, 6vh, 4rem); height: 1px; background: var(--hairline);
  position: relative; overflow: hidden;
}
.work-intro-rule::after { content: ""; position: absolute; inset: 0; background: var(--red);
  transform: scaleX(0); transform-origin: left; }
.js .work-intro-rule::after { animation: rule-grow 1.3s var(--ease-out) 0.5s forwards; }
.no-js .work-intro-rule::after { transform: scaleX(1); }

/* ---------- Founder note (editorial) -------------------------------- */
.founder { padding-block: clamp(1.5rem, 4vh, 3rem) clamp(3.5rem, 8vh, 6rem); }
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.founder-figure { position: relative; max-width: 30rem; }
.founder-figure img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
  filter: grayscale(100%) contrast(1.03);
  display: block;
}
.founder-figure .crop { width: 1.5rem; height: 1.5rem; z-index: 2; }
.founder-figure .crop-tl { top: -0.6rem; left: -0.6rem; }
.founder-figure .crop-br { bottom: -0.6rem; right: -0.6rem; }
.founder-cap {
  margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-40);
}
.founder-body .eyebrow { margin-bottom: 1.5rem; }
.founder-lead {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.14;
  max-width: 24ch;
}
.founder-text { margin-top: 1.6rem; display: grid; gap: 1.05rem;
  font-size: 1.0625rem; line-height: 1.62; color: var(--ink-60); max-width: 40rem; }
.founder-link { margin-top: 1.9rem; }

/* ===================================================================
/* ===================================================================
   WORK SECTIONS  — editorial section heads
   =================================================================== */
.work-section { padding-top: clamp(3.5rem, 8vh, 5.5rem); padding-bottom: clamp(3.5rem, 8vh, 5.5rem); }
.work-self-section { padding-bottom: clamp(1rem, 2.5vh, 2rem); }
.work-lead-section { padding-top: clamp(2.5rem, 6vh, 4.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.work-section + .work-section { padding-top: 0; }
.work-section-head {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}
.work-section-title {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 600; letter-spacing: -0.018em;
}
.work-section-meta {
  margin-left: auto; font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-40);
}

/* ===================================================================
   PLACEHOLDER VISUAL  — labeled, intentional, B&W baseline
   Shared across leads, rows, inline features.
   =================================================================== */
.placeholder {
  position: relative; width: 100%; height: 100%;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  transition: border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out);
  overflow: hidden;
}
/* The grayscale-able image layer sits as a pseudo-element so we can
   color-shift it on hover without affecting the red registration mark.
   It also scales a hair on hover so the visual feels alive when engaged. */
.placeholder::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(120deg, transparent 45%, rgba(5,5,6,0.05) 100%),
    repeating-linear-gradient(45deg, rgba(5,5,6,0.025) 0 2px, transparent 2px 12px),
    var(--paper);
  filter: grayscale(100%);
  transform: scale(1.001);
  transform-origin: center;
  transition: filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.placeholder-mark {
  position: absolute; z-index: 2;
  top: 1rem; left: 1rem;
  width: 0.5rem; height: 0.5rem; background: var(--red);
}
.placeholder-label {
  position: absolute; z-index: 2;
  bottom: 1rem; left: 1rem;
  font-size: 0.6875rem; letter-spacing: 0.18em;
  color: var(--ink-40);
  transition: color 0.5s var(--ease-out);
}

/* Hover state: color comes in fast, leaves slow; visual lifts and breathes.
   Lives on the parent module so it triggers from the type side too. */
.lead:hover .placeholder,
.inline-feature:hover .placeholder,
.row-trigger:hover .placeholder {
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 30px rgba(5,5,6,0.07);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.lead:hover .placeholder::before,
.inline-feature:hover .placeholder::before,
.row-trigger:hover .placeholder::before {
  filter: grayscale(0%);
  transform: scale(1.018);
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
.lead:hover .placeholder-label,
.inline-feature:hover .placeholder-label {
  color: var(--ink-60);
}

/* ===================================================================
   PROJECT IMAGE  — real photo, same frame language as the placeholder
   so the swap from placeholder -> image keeps motion + depth consistent.
   =================================================================== */
.project-image {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.001);
  transform-origin: center;
  transition:
    filter 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    border-color 0.45s var(--ease-out);
}
.lead:hover .project-image,
.inline-feature:hover .project-image,
.row-trigger:hover .project-image,
.row-panel-visual:hover .project-image {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.018);
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 30px rgba(5,5,6,0.07);
  transition:
    filter 0.6s var(--ease-out),
    transform 0.7s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    border-color 0.4s var(--ease-out);
}
/* The visual container must clip the scaled image */
.lead-visual, .row-panel-visual, .inline-feature-visual { overflow: hidden; }

/* Touch devices have no hover, so the black-and-white-by-default rule
   would leave mobile users seeing only desaturated project imagery.
   On hover-less devices, show project imagery in color by default and
   skip the hover-related scale/border-shift entirely. Also applies to
   the case-study images inside expanded lead panels. */
@media (hover: none) {
  .project-image,
  .case-dominant img,
  .case-detail img {
    filter: none;
    transform: none;
  }
  .lead:hover .project-image,
  .inline-feature:hover .project-image,
  .row-trigger:hover .project-image,
  .row-panel-visual:hover .project-image,
  .case-dominant:hover img,
  .case-detail:hover img {
    filter: none;
    transform: none;
  }
  /* Preserve per-project scoped filters if they carry meaning
     (New Theatre uses a lighter-contrast grayscale to make its
     black silhouette logo readable). On touch, still show in color. */
  [data-id="new-theatre"] .project-image { filter: none; }
}

/* Sousa Silva: show top of homepage screenshot (wordmark + nav bar) */
[data-id="sousa-silva"] .project-image { object-position: top; }

/* Flip Banfana closed-state: visual RIGHT, body LEFT
   (Sousa Silva override placed after nth-child rules below) */
[data-id="banfana"].lead .lead-visual { order: 2; }
[data-id="banfana"].lead .lead-body   { order: 1; }

/* Banfana: restore same 16/10 frame as all leads; use contain so the
   full 16:9 thumbnail shows without cropping — dark fill for letterbox */
[data-id="banfana"] .lead-visual {
  aspect-ratio: 16 / 10;
}
[data-id="banfana"] .lead-visual .project-image {
  object-fit: contain;
  object-position: center;
  background: #111;
}

/* Vaso Abashidze: square logo on black — contain so it is not cropped */
[data-id="new-theatre"] .project-image {
  object-fit: contain;
  object-position: center;
  background: #000;
  padding: clamp(1rem, 3vw, 2rem);
  filter: grayscale(100%) contrast(0.7) brightness(1.2);
}
[data-id="new-theatre"] .row-panel-visual:hover .project-image {
  filter: grayscale(0%) contrast(1) brightness(1);
}

/* ===================================================================
   LEAD  — three large editorial bands at the top
   Asymmetric, alternating left/right rhythm.
   =================================================================== */
.lead-list { display: grid; gap: clamp(4rem, 9vh, 7rem); }
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.lead:nth-child(even) .lead-visual { order: 2; }
.lead:nth-child(even) .lead-body { order: 1; }

/* Flip Sousa Silva closed-state: visual LEFT, body RIGHT
   Must come after nth-child(even) rules to win the cascade. */
[data-id="sousa-silva"].lead .lead-visual { order: 1; }
[data-id="sousa-silva"].lead .lead-body   { order: 2; }

.lead-visual { aspect-ratio: 16 / 10; }
.lead-body { position: relative; min-width: 0; }

/* The expand panel must always sit below both the visual and body, regardless
   of the alternating order rules above. order: 3 places it last in flow,
   grid-column 1/-1 makes it span the full lead width. */
.lead > .expand-panel { grid-column: 1 / -1; order: 3; }
.lead-name {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.026em; line-height: 1.06;
}
.lead-label {
  margin-top: 0.85rem;
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40);
}
.lead-line {
  margin-top: 1.1rem;
  font-size: clamp(0.9875rem, 1.25vw, 1.0625rem); line-height: 1.6;
  color: var(--ink-60); max-width: 32rem;
}
.lead-tags {
  margin-top: 1.2rem;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40);
}
.lead-actions {
  margin-top: 1.6rem;
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap;
}

/* Live link — primary action, magazine-credit treatment */
.lead-live {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding-bottom: 0.35rem;
  color: var(--ink);
}
.lead-live::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ink); }
.lead-live::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out); }
.lead-live:hover::before, .lead-live:focus-visible::before { transform: scaleX(1); }
.lead-live .arrow { transition: transform 0.4s var(--ease-out); }
.lead-live:hover .arrow { transform: translateX(0.35rem); }

/* Expand toggle button (More / Less) — quieter than the live link */
.expand-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: none; padding: 0.2rem 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--ink-60);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s var(--ease-out);
}
.expand-toggle:hover, .expand-toggle:focus-visible { color: var(--ink); }
.expand-label-less { display: none; }
.is-expanded .expand-label-more { display: none; }
.is-expanded .expand-label-less { display: inline; }
.expand-icon {
  position: relative; width: 0.7rem; height: 0.7rem; display: inline-block;
}
.expand-icon::before, .expand-icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.expand-icon::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.expand-icon::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.is-expanded .expand-icon::before { transform: translateX(-50%) rotate(90deg); }

/* Expandable panel (shared across lead, row, inline) */
.expand-panel {
  height: 0; overflow: hidden;
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.expand-panel[hidden] { display: none; }
.expand-panel-inner {
  padding-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
  font-size: 1rem; line-height: 1.65; color: var(--ink-60);
  opacity: 0; transform: translateY(0.6rem);
  transition: opacity 0.5s var(--ease-out) 0.12s, transform 0.5s var(--ease-out) 0.12s;
}
/* Lead case-study panels span the full lead width so their two columns
   align exactly under the closed lead's two columns. The sectioned
   text-only layout (no case-study) still reads better contained, so the
   cap applies only when there is no case-study grid inside. */
.lead .expand-panel-inner:not(:has(.case-study)) {
  max-width: 56rem;
}
.is-expanded .expand-panel-inner { opacity: 1; transform: translateY(0); }
.expand-panel-inner p { margin: 0; }
.expand-panel-inner p + p { margin-top: 0.9rem; }

/* Supporting thumbnail inside an expanded panel (e.g. Banfana YouTube still).
   Non-clickable, B&W default, color on hover, 16:9 aspect ratio. */
.expand-thumb {
  margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem) 0;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  transition: border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.expand-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.001);
  transition:
    filter 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.expand-thumb:hover {
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 30px rgba(5,5,6,0.07);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.expand-thumb:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.018);
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

/* ===================================================================
   EXPAND SECTIONS  — editorial blocks inside the expanded panel
   (About / What we did / Output / Links)
   Text sections constrain to a comfortable reading measure while
   any gallery above them is allowed to use full container width.
   =================================================================== */
.expand-section + .expand-section { margin-top: clamp(1.75rem, 3.5vh, 2.25rem); }
.expand-section { max-width: 46rem; }
.expand-section-title {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.85rem 0;
}
/* Spacing between sections (no divider line, per design direction). */
.case-text .expand-section + .expand-section,
.expand-panel-inner > .expand-section + .expand-section {
  padding-top: clamp(1.5rem, 3vh, 2rem);
}
.expand-section p {
  font-size: 1rem; line-height: 1.65; color: var(--ink-60);
}

/* ===================================================================
   PROJECT GALLERY  — supporting visuals inside the expanded panel
   Layout: one optional "wide" hero item above a row of supporting items.
   Each item follows the same B&W -> color treatment as the lead image
   so the page reads as one consistent system.
   =================================================================== */
.project-gallery {
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  transition: border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out);
  background: var(--paper);
}
.gallery-item img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.001);
  transform-origin: center;
  transition:
    filter 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.gallery-item:hover {
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 30px rgba(5,5,6,0.07);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.gallery-item:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.018);
  transition:
    filter 0.6s var(--ease-out),
    transform 0.7s var(--ease-out);
}

/* Wide hero item: full width of panel, 16:10 aspect */
.gallery-item-wide { aspect-ratio: 16 / 10; }

/* Row of supporting items: layout adapts to item count.
   All items in a row share aspect ratio so they line up cleanly,
   but each kind's img uses object-fit to show its content naturally. */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.gallery-row .gallery-item { aspect-ratio: 4 / 3; }

/* Logo: contain (no crop) and paper background */
.gallery-item-logo img {
  object-fit: contain;
  object-position: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper);
}
/* Mobile screenshot: contain (no crop), centered */
.gallery-item-mobile img {
  object-fit: contain;
  object-position: center;
  background: var(--paper);
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

/* ===================================================================
   CASE-STUDY LAYOUT  — used when project.expandLayout === "case-study"
   Grid proportions and gap mirror the closed .lead grid above
   (1fr / 0.92fr, same gap) so the expanded columns sit flush under
   the closed columns: image-column under image-column, text under text.
   Default variant: image left, text right.
   "--right" variant: text left, image right. */
.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.case-study--right {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
}
/* Default: image moves to the left column */
.case-visual { min-width: 0; order: -1; }
/* Right variant: image stays in natural order, lands in the right column */
.case-study--right .case-visual { order: 0; }
.case-text { min-width: 0; }
.case-text .expand-section { max-width: none; }
.case-text .expand-section + .expand-section { margin-top: clamp(1.5rem, 3vh, 2rem); }
.case-text .expand-section p { font-size: 0.9375rem; line-height: 1.6; }

/* Dominant image: locked, compact size. Both projects share this exact
   rule, so whatever asset is dropped in renders at identical scale. */
.case-dominant {
  margin: 0;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.case-dominant img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.001);
  transform-origin: center top;
  transition:
    filter 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.case-dominant:hover {
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 30px rgba(5,5,6,0.07);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.case-dominant:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.018);
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

/* Secondary detail slot: a clearly subordinate supporting frame beneath
   the dominant image, roughly half its height, same width. Reads as a
   tear sheet, not a second equal image. Reuses the page's standard
   placeholder treatment when no asset has been provided yet. */
.case-detail-strip {
  margin-top: clamp(0.75rem, 2vh, 1rem);
}
.case-detail {
  margin: 0;
  height: 6.5rem;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(5,5,6,0.03);
  overflow: hidden;
  transition: border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.case-detail img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.001);
  transition: filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.case-detail:hover {
  border-color: var(--hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 6px 22px rgba(5,5,6,0.06);
}
.case-detail:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.015);
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Placeholder reused inside the compact detail slot needs an explicit
   sized box, since the shared .placeholder rule expects a sized parent. */
.case-detail .placeholder {
  position: relative; width: 100%; height: 100%;
}
.case-detail .placeholder-mark { top: 0.6rem; left: 0.6rem; }
.case-detail .placeholder-label {
  bottom: 0.6rem; left: 0.6rem; font-size: 0.6rem;
}

/* Sousa Silva: single portrait fills the right column edge-to-edge,
   mirroring the closed-state image which fills the same right column. */
[data-id="sousa-silva"] .case-dominant {
  width: 100%;
  aspect-ratio: 3 / 4;
}
/* Sousa Silva's portrait reads heavier than the text block, so it gets
   a narrower track: text takes the bulk of the panel, the image shrinks
   to sit roughly level with the text block. */
[data-id="sousa-silva"] .case-study--right {
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.55fr);
}

/* Banfana: two YouTube thumbnails fill the left column edge-to-edge,
   mirroring the closed-state image which fills the same left column. */
[data-id="banfana"] .case-dominant,
[data-id="banfana"] .case-detail {
  width: 100%;
  aspect-ratio: 7 / 5;
  height: auto;
}
[data-id="banfana"] .case-detail-strip {
  width: 100%;
  margin-top: clamp(0.85rem, 2vh, 1.1rem);
}
/* Banfana's two-image column reads heavier than a single portrait, so
   it gets a narrower track: text takes the bulk of the panel, the
   thumbnails shrink to sit roughly level with the text block. */
[data-id="banfana"] .case-study {
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.65fr);
}

/* ===================================================================
   PROJECT LINKS  — icon row inside the Links section
   =================================================================== */
.project-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.project-link {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
  position: relative;
  transition: color 0.35s var(--ease-out);
}
.project-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.project-link:hover, .project-link:focus-visible { color: var(--red); }
.project-link:hover::after, .project-link:focus-visible::after {
  transform: scaleX(1); background: var(--red);
}
.project-link-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; flex: none;
}
.project-link-icon svg { width: 100%; height: 100%; display: block; }
.project-link-label { line-height: 1; }

/* ===================================================================
   ARCHIVE ROW  — compact, expandable
   =================================================================== */
.row-list {
  border-top: 1px solid var(--hairline-strong);
}
/* Remove the top line above the client archive (between Sousa Silva and Sur Jamor) */
[data-work="client-archive"] {
  border-top: none;
}
/* Remove the bottom line after the last project in the self-started archive */
[data-work="self-archive"] .row:last-child {
  border-bottom: none;
}
.row {
  border-bottom: 1px solid var(--hairline);
}
.row.is-expanded {
  border-bottom: none;
}
.row-trigger {
  width: 100%; background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 1.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.35rem, 3vh, 1.85rem) 0;
  transition: padding-left 0.28s var(--ease-out);
  position: relative;
}
.row-trigger::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--red);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s var(--ease-out);
}
.row-trigger:hover, .row-trigger:focus-visible { padding-left: 1rem; }
.row-trigger:hover::before, .row-trigger:focus-visible::before { transform: scaleY(1); }

.row-main { min-width: 0; }
.row-name {
  font-size: clamp(1.0625rem, 1.55vw, 1.25rem);
  font-weight: 600; letter-spacing: -0.012em; line-height: 1.18;
  transition: color 0.3s var(--ease-out);
}
.row-label {
  margin-top: 0.4rem;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40);
}
.row-trigger:hover .row-name { color: var(--red); }

.row-role {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-40); text-align: right; justify-self: end;
}
.row-tag {
  display: inline-block; padding: 0.32rem 0.6rem;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  letter-spacing: 0.14em;
}
.row-tag-quiet { color: var(--ink-40); border-color: var(--hairline); }

.row-icon {
  position: relative; width: 0.8rem; height: 0.8rem; display: inline-block;
  justify-self: end; color: var(--ink-40);
  transition: color 0.3s var(--ease-out);
}
.row-icon::before, .row-icon::after {
  content: ""; position: absolute; background: currentColor;
}
.row-icon::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
  transition: transform 0.35s var(--ease-out); }
.row-icon::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.row-trigger:hover .row-icon { color: var(--red); }
.row.is-expanded .row-icon::before { transform: translateX(-50%) rotate(90deg); }

/* Archive row expanded panel — visual on left, text on right */
.row-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: clamp(1.75rem, 4vh, 2.5rem);
  max-width: none;
}
.row-panel-visual { aspect-ratio: 4 / 3; }
.row-panel-text { min-width: 0; }
.row-panel-line {
  margin-top: 0.9rem; padding-top: 0;
  font-size: 0.875rem; color: var(--ink-40);
}
/* Text-only expand panel: no image column, text spans full width */
.row-panel-inner--text-only {
  padding-top: clamp(0.5rem, 1.2vh, 0.75rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.row-panel-links {
  margin-top: 1.25rem; padding-top: 0;
}

/* ===================================================================
   INLINE FEATURE  — Assisto-style, between leads and rows in scale
   =================================================================== */
.inline-feature { padding-block: clamp(1rem, 3vh, 2rem) 0; }
.inline-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vh, 2rem);
  border-bottom: 1px solid var(--hairline);
}
.inline-feature-visual { aspect-ratio: 4 / 3; }
/* Assisto: compact visual, reads as an archive project not a lead */
[data-id="assisto"] .inline-feature-visual {
  aspect-ratio: 4 / 3;
  width: 80%;
}
.inline-feature-body { min-width: 0; }
.inline-feature-name {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;
}
.inline-feature-body .row-label { margin-top: 0.7rem; }
.inline-feature-line {
  margin-top: 1.1rem;
  font-size: 1rem; line-height: 1.6; color: var(--ink-60);
  max-width: 32rem;
}
.inline-feature-actions { margin-top: 1.4rem; }

/* Self-started section: tighter gap between inline feature and the rows below */
.work-self-section [data-work="self-archive"] { margin-top: 0; }



/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact { padding-block: clamp(3.5rem, 8vh, 6rem) clamp(4rem, 10vh, 7rem); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.contact-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.03;
}
.contact-body {
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55; color: var(--ink-60); max-width: 34rem;
}

/* Primary contact method: email. Sized to be the visual anchor within
   the fold, sitting close enough to the body to read as its resolution. */
.contact-primary { margin-top: clamp(2rem, 4.5vh, 3rem); }
.email-link {
  position: relative;
  display: inline-block;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  padding-bottom: 0.4rem;
  color: var(--ink);
}
.email-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.email-link:hover::after, .email-link:focus-visible::after { transform: scaleX(1); }

/* Secondary: quiet WhatsApp footnote below the email. */
.contact-secondary {
  margin-top: clamp(1rem, 2vh, 1.35rem);
  font-size: 0.9375rem;
  color: var(--ink-70);
}
.contact-secondary .link-cta {
  color: var(--ink-70);
  font-size: inherit;
  font-weight: 500;
  padding-bottom: 0.15rem;
}
.contact-secondary .link-cta:hover,
.contact-secondary .link-cta:focus-visible { color: var(--ink); }

/* Right column: three-stage process anchor. Serves as the funnel's
   trust layer: what to expect, when to expect it, and what happens
   after. Compact enough to sit inside the fold beside the email. */
.contact-aside { padding-top: clamp(0.25rem, 1vh, 0.75rem); }
.contact-aside-heading {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 clamp(1.25rem, 3vh, 1.75rem) 0;
}
.contact-stages {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1.25rem, 2.75vh, 1.75rem);
  max-width: 26rem;
  position: relative;
}
/* When .contact-stages carries .reveal, we want its is-visible state to
   trigger the per-stage motion below — not fade the whole block in as
   a single unit. Override the shared .reveal defaults on this element
   so the internal choreography is what the eye follows. */
.js .contact-stages.reveal { opacity: 1; transform: none; transition: none; }

.contact-stage {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  align-items: start;
  position: relative;
}
/* Each stage lifts and fades in, staggered by --stage index. */
.js .contact-stage {
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 0.7s var(--ease-out) calc(0.35s + var(--stage, 0) * 0.14s),
    transform 0.7s var(--ease-out) calc(0.35s + var(--stage, 0) * 0.14s);
}
.js .contact-stages.is-visible .contact-stage {
  opacity: 1;
  transform: translateY(0);
}
.contact-stage-num {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--red);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
  position: relative;
  z-index: 1;
  padding-right: 0.25rem;
}
.contact-stage-body { min-width: 0; }
.contact-stage-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.contact-stage-text {
  margin: 0.4rem 0 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-60);
}

/* ---------- 14. Scroll reveals -------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .service-rows .reveal:nth-child(2) { transition-delay: 0.1s; }
.js .service-rows .reveal:nth-child(3) { transition-delay: 0.2s; }
.js .format-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.js .format-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.js .lead-list .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .lead-list .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .row-list .reveal:nth-child(2) { transition-delay: 0.05s; }
.js .row-list .reveal:nth-child(3) { transition-delay: 0.1s; }
.js .row-list .reveal:nth-child(4) { transition-delay: 0.15s; }
.js .row-list .reveal:nth-child(5) { transition-delay: 0.2s; }

/* ---------- 15. Responsive ------------------------------------------ */
@media (max-width: 60rem) {
  .founder-grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
  .founder-figure { max-width: 26rem; }
  .contact-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vh, 3.5rem); }
  .gallery-3 { grid-template-columns: 1fr 1fr; }
  .proof-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .proof-label { white-space: normal; }
}
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; gap: 1.25rem; }
  .split-label { padding-top: 0; }
  .service-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .service-desc { grid-column: 1; }
  .formats-head { margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.format-grid { grid-template-columns: 1fr; }
  .format { padding-right: 0; }
  .format + .format { border-left: none; padding-left: 0; }
  .lead { grid-template-columns: 1fr; gap: 1.5rem; }
  .lead:nth-child(even) .lead-visual { order: 0; }
  .lead:nth-child(even) .lead-body { order: 0; }
  /* Ensure the flipped Sousa Silva also resets to natural order on mobile,
     so both leads stack image-then-text without competing order rules. */
  [data-id="sousa-silva"].lead .lead-visual { order: 0; }
  [data-id="sousa-silva"].lead .lead-body   { order: 0; }
  [data-id="banfana"].lead .lead-visual { order: 0; }
  [data-id="banfana"].lead .lead-body   { order: 0; }

  .inline-feature-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Assisto reset: 80% cap on desktop looks awkward stacked full-width */
  [data-id="assisto"] .inline-feature-visual { width: 100%; }

  .row-trigger {
    grid-template-columns: 1fr 1rem;
    grid-template-areas:
      "main icon"
      "role role";
    row-gap: 0.5rem;
    column-gap: 1rem;
    min-height: 3rem;
    padding-block: 0.35rem;
  }
  .row-main { grid-area: main; }
  .row-role { grid-area: role; text-align: left; justify-self: start; }
  .row-icon { grid-area: icon; }

  .row-panel-inner { grid-template-columns: 1fr; }
  /* Text-only expanded panels need more separation on mobile from the
     closed row above, so the expanded content reads as an intentional
     step rather than an abrupt continuation. */
  .row-panel-inner--text-only {
    padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
    padding-bottom: clamp(2rem, 4.5vh, 2.75rem);
    font-size: 1rem; line-height: 1.65;
  }
  /* Links block inside expanded panels: more breathing room and easier
     tap targets on mobile. */
  .row-panel-links {
    margin-top: 1.75rem;
    gap: 1.25rem;
  }
  .row-panel-links .project-link { padding-block: 0.35rem; }

  .gallery-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Expanded case-study panels on mobile: images fill the available
     content width like the closed lead visual does. Image always comes
     first (above text), text sits below with clean spacing. */
  .case-study { grid-template-columns: 1fr; gap: 0; }
  .case-study--right { grid-template-columns: 1fr; }
  .case-visual { order: -1; max-width: none; width: 100%; margin-bottom: clamp(1.5rem, 3.5vh, 2rem); }
  .case-study--right .case-visual { order: -1; max-width: none; width: 100%; }
  .case-text { max-width: none; }
  .case-text .expand-section { max-width: none; }
  /* Give section headings and paragraphs inside case-text more air on mobile */
  .case-text .expand-section p { font-size: 0.9375rem; line-height: 1.7; }
  .case-text .expand-section + .expand-section {
    margin-top: clamp(1.5rem, 3.5vh, 2rem);
    padding-top: 0;
  }

  /* Per-project mobile scoping: reset desktop grid proportions */
  [data-id="sousa-silva"] .case-study,
  [data-id="sousa-silva"] .case-study--right { grid-template-columns: 1fr; }
  /* Sousa Silva portrait: fill the full content width on mobile, no centering.
     Portrait at 3:4 will read tall and editorial at full mobile width. */
  [data-id="sousa-silva"] .case-dominant {
    aspect-ratio: 3 / 4;
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }
  [data-id="banfana"] .case-study,
  [data-id="banfana"] .case-study--right { grid-template-columns: 1fr; }
  /* Banfana thumbnails: both fill full width, 7:5, clean and even */
  [data-id="banfana"] .case-dominant,
  [data-id="banfana"] .case-detail {
    aspect-ratio: 7 / 5;
    width: 100%;
    height: auto;
  }

  /* Make case-dominant and case-detail explicit widths so they don't
     collapse inside the now-single-column visual column. */
  .case-dominant { width: 100%; }
  .case-detail { width: 100%; height: auto; }
  .case-detail-strip { width: 100%; margin-top: clamp(0.75rem, 1.5vh, 1rem); }

  /* Expand panel vertical rhythm on mobile: tighter to the closed row
     above so the panel feels continuous, not appended. */
  .expand-panel-inner {
    padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
    padding-bottom: clamp(2rem, 4vh, 2.75rem);
  }
  /* Expand sections: full reading measure, comfortable paragraph size */
  .expand-section { max-width: none; }
  .expand-section p { font-size: 0.9375rem; line-height: 1.7; }
  .expand-section + .expand-section { margin-top: clamp(1.5rem, 3vh, 2rem); }
  .expand-section-title {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.7rem;
  }

  .ghost-num { right: 0.5rem; font-size: clamp(9rem, 38vw, 14rem); }
  .method-card { min-height: 0; }
  .proof-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 40rem) {
  .site-nav { gap: 1.1rem; font-size: 0.75rem; }
  /* Fix red dot crowding nav — reduce header padding and wordmark gap */
  .header-inner { padding-block: 1rem; }
  .wordmark { gap: 0.35rem; font-size: 0.75rem; }
  .wordmark-dot { width: 0.25rem; height: 0.25rem; }

  /* Hide the proof/carousel section entirely on mobile. */
  .proof { display: none; }

  /* Hide the How support works / formats section on mobile.
     Audit / Project / Retainer cards don't translate well at narrow
     widths and removing them tightens the page's conversion flow. */
  .formats { display: none; }

  /* Method cards: ghost number is huge relative to card width on mobile
     and bleeds directly over the body text. Scale it down, push it
     further right and reduce its opacity so it reads as atmosphere,
     not interference. The card overflow: hidden clips the excess. */
  .ghost-num {
    font-size: clamp(7rem, 28vw, 10rem);
    right: -0.5rem;
    opacity: 0.6;
  }
  /* Give the method card body a right margin so text never collides
     with the ghost number at any realistic card width. */
  .method-card-body { max-width: calc(100% - clamp(5rem, 22vw, 8rem)); }

  /* Tighten method section bottom padding since formats is now hidden —
     the gap between method and the proof strip (also hidden) or CTA
     needs to feel intentional, not cavernous. */
  .method.section {
    padding-top: clamp(2.5rem, 6vh, 4rem);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
  }

  /* Tighten the gap between method and the next visible section
     (the final CTA, since proof and formats are hidden). */
  .cta-final {
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-bottom: clamp(3rem, 7vh, 5rem);
  }

  /* Homepage section spacing */
  :root { --space-section: clamp(3.5rem, 8vh, 5.5rem); }
  .problem {
    padding-top: clamp(2.5rem, 6vh, 4rem);
    padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
  }

  .hero-ctas { gap: 1.75rem; }
  .hero-meta { flex-wrap: wrap; row-gap: 0.5rem; }
  .gallery-2, .gallery-3 { grid-template-columns: 1fr; }
  .gallery-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-nav { justify-content: center; }
  .work-section-meta { display: none; }
}

/* ---------- 16. Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .line-inner, .js .work-intro-rule::after,
  .js .marquee-track, .js .seq { animation: none; }
  .js .seq { opacity: 1; transform: none; }
  .line-inner { transform: none; }
  .work-intro-rule::after { transform: scaleX(0.18); }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .contact-stage { opacity: 1; transform: none; transition: none; }
  .js .method-words .mword { opacity: 1; transform: none; transition: none; }
  .method-card { position: static; }
  .method-card[data-drift] { transform: none !important; }
  .method-card .ghost-num { transform: translateY(-50%) !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

  /* New ambient motion: settle to a calm static state */
  .js .hero-index-line::after { animation: none; opacity: 0; }
  .services::before { transform: scaleX(1); }
  .format.reveal { transition-delay: 0s !important; }

  /* Work page: keep color shift (not motion) but kill scale/lift movement */
  .placeholder::before { transform: none !important; }
  .lead:hover .placeholder::before,
  .inline-feature:hover .placeholder::before,
  .row-trigger:hover .placeholder::before { transform: none !important; }
  .expand-panel-inner { transform: none !important; }
  .project-image, .gallery-item img, .case-dominant img, .case-detail img, .expand-thumb img { transform: none !important; }
  .lead:hover .project-image,
  .inline-feature:hover .project-image,
  .row-trigger:hover .project-image,
  .row-panel-visual:hover .project-image,
  .gallery-item:hover img,
  .case-dominant:hover img,
  .case-detail:hover img,
  .expand-thumb:hover img { transform: none !important; }
}

/* ===================================================================
   WHATSAPP FLOATING BUTTON
   =================================================================== */
.wa-float {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  box-shadow: 0 2px 12px rgba(5,5,6,0.18), 0 1px 3px rgba(5,5,6,0.1);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s cubic-bezier(0.22,1,0.36,1);
  animation: wa-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.8s both;
}
@media (min-width: 57rem) {
  .wa-float { width: 3.75rem; height: 3.75rem; }
  .wa-float-icon { width: 1.75rem; height: 1.75rem; }
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.07);
  background: #111;
  box-shadow: 0 6px 22px rgba(5,5,6,0.22), 0 2px 6px rgba(5,5,6,0.1);
}
.wa-float:active { transform: scale(0.95); }
.wa-float-icon {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  flex-shrink: 0;
}
@keyframes wa-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .wa-float:hover { transform: none; }
}