/* ============================================================
   INKCREDIBLE STUDIOS — COMPONENT STYLES
   Direction: editorial creative studio, not SaaS dashboard.
   Full-width sections, restrained rounding, minimal shadow,
   asymmetric composition, typography and real artwork carry the
   visual weight — not card chrome.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

section { padding-block: var(--sp-9); }

/* ---------- Minimal eyebrow label — dot + tracked text, no pill
   chrome. Used everywhere a section label is needed. ---------- */
.eyebrow-plain {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.eyebrow-plain::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.eyebrow-plain--dark { color: rgba(255, 255, 255, 0.72); }
.eyebrow-plain--dark::before { background: var(--orange); }

.section-editorial-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.section-editorial-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-navy);
}

/* ---------- Buttons — the only place pill shapes remain, because
   they're functional controls, not decoration. ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-dark); }

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--outline-light:hover { border-color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--ink-navy);
  border-color: var(--line);
}
.btn--outline:hover { border-color: var(--ink-navy); }

.btn--sm { padding: 10px 20px; font-size: var(--fs-micro); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink-navy);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.link-arrow:hover { border-color: var(--orange); color: var(--orange-dark); }

/* ============================================================
   NAV — plain text throughout except the primary CTA button.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 245, 247, 0.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.nav.is-scrolled { border-color: var(--line); background: rgba(244, 245, 247, 0.96); }

/* Slim utility bar — PPAI/ASI trust signal, deliberately quiet so it
   never competes with the logo, nav links, or primary CTA below it. */
.nav__utility { border-bottom: 1px solid var(--line-soft); }
.nav__utility-inner { display: flex; justify-content: flex-end; padding-block: 7px; }
.nav__utility-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--slate-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: 18px;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink-navy);
}
.nav__logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink-navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nav__logo-mark span { color: var(--orange); font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; }
.nav__links { display: flex; align-items: center; gap: var(--sp-6); }
.nav__links a { font-size: var(--fs-small); font-weight: 500; color: var(--slate); position: relative; padding-block: 4px; transition: color var(--dur-fast); }
.nav__links a:hover { color: var(--ink-navy); }
.nav__links a.is-active { color: var(--ink-navy); }
.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--orange);
}
.nav__actions { display: flex; align-items: center; gap: var(--sp-5); }
.nav__quick-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--slate-soft);
}
.nav__quick-links a { color: var(--slate); transition: color var(--dur-fast); }
.nav__quick-links a:hover { color: var(--ink-navy); }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink-navy); }

.nav__mobile { display: none; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--container-pad) var(--sp-6); border-top: 1px solid var(--line); }
.nav__mobile a { padding: var(--sp-3) 0; font-size: var(--fs-body-lg); font-weight: 500; color: var(--ink-navy); border-bottom: 1px solid var(--line-soft); }
.nav__mobile .btn { margin-top: var(--sp-4); }

/* ============================================================
   HERO — editorial, asymmetric, typography-led
   ============================================================ */
.hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

.hero-editorial {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}

.hero-editorial__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-self: start;
}
.hero-editorial__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink-navy);
}
.hero-editorial__headline .accent { color: var(--orange); }

.hero-editorial__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
}
.hero-editorial__sub { font-size: var(--fs-body-lg); color: var(--slate); max-width: 40ch; }

/* Lower-left proof/stat block — three prominent stats with a subtle
   secondary line beneath. Orange stays confined to the numerals only,
   used as an accent rather than a block of color. */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hero-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
.hero-stats__item { display: flex; flex-direction: column; gap: 4px; }
.hero-stats__num {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-navy);
}
.hero-stats__num .accent { color: var(--orange); }
.hero-stats__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--slate);
}
.hero-stats__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

/* ---------- Hero mode selector — the one retained pill control ---------- */
.hero__mode { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); width: 100%; }
.hero__mode-question { font-size: var(--fs-small); font-weight: 600; color: var(--ink-navy); }

.mode-switch {
  position: relative;
  display: inline-flex;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.mode-switch__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 50%;
  background: var(--orange);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
  z-index: 0;
}
.mode-switch__btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--slate);
  transition: color var(--dur-base) var(--ease-out);
}
.mode-switch__btn.is-active { color: var(--white); }
.mode-switch__btn:hover:not(.is-active) { color: var(--ink-navy); }

.hero__mode-desc { font-size: var(--fs-small); color: var(--slate); min-height: 1.4em; transition: opacity 150ms var(--ease-out); }
.hero__mode-cta { transition: opacity 150ms var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast); }

/* ---------- Hero artwork reel — real production pieces, continuous
   auto-playing vertical marquee (not scroll-linked). A tall,
   overflow-hidden column with a track twice the content's height (two
   identical sets) animated via CSS keyframes so it loops seamlessly.
   Edges fade via mask so pieces drift in and out rather than getting
   clipped. Images form one continuous column — no per-image card
   chrome. See js/main.js for the animation timing/setup. ---------- */
.hero-reel {
  position: relative;
  height: 480px;
  height: clamp(440px, 42vw, 640px);
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--paper-raised);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 90%, transparent 100%);
}
.hero-reel__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  will-change: transform;
}
.hero-reel__set { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-reel__item {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--paper-raised);
}
.hero-reel__item img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* Reduced-motion fallback: animation simply never starts (see
   js/main.js) — images already render at full opacity by default. */
.hero-reel--static .hero-reel__item { opacity: 1; transform: none; }

@keyframes hero-reel-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(var(--reel-distance, 0px)); }
}

/* ---------- Placeholder artwork block — used elsewhere on the page
   (What We Do, Selected Work) for assets not yet supplied ---------- */
.placeholder-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: repeating-linear-gradient(135deg, var(--paper-raised) 0 2px, var(--white) 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4);
}
.placeholder-art__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--white);
  border: 1px dashed var(--line);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
/* Alt tone for the "second" image in a crossfade pair (production
   artwork side) — same restrained treatment, just visually distinct
   enough that the two placeholder slots don't read as duplicates. */
.placeholder-art--alt {
  background: repeating-linear-gradient(135deg, var(--orange-soft) 0 2px, var(--white) 2px 14px);
}

/* ============================================================
   TRUST STRIP — a single hairline row, no boxed logo tiles
   ============================================================ */
.trust { padding-block: var(--sp-7); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
}
.trust__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.trust__logos { display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.trust__logo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--slate-soft); }

/* ============================================================
   WHAT WE DO — editorial numbered list, not a card grid
   ============================================================ */
.service-list { border-top: 1px solid var(--line); }
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1.4fr 1fr;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.service-row__index {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--slate-soft);
}
.service-row__main h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-navy);
}
.service-row__main p { margin-top: var(--sp-2); font-size: var(--fs-body-lg); color: var(--slate); max-width: 46ch; }
.service-row__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-dark);
  text-align: right;
  justify-self: end;
}

/* Rows with an attached image swatch — the break from a plain
   text row, used sparingly so the list isn't five identical
   units. */
.service-row--visual { padding-right: 180px; }
.service-row__image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  width: 160px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}
.service-row__image img { width: 100%; height: 100%; object-fit: contain; }
.service-row__image--alt { transform: translateY(-50%) rotate(2deg); }

/* ============================================================
   WHY INKCREDIBLE — full-bleed navy, editorial, no stat cards
   ============================================================ */
.why-us { background: var(--ink-navy-deep); padding-block: var(--sp-9); }

.why-us__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-7);
  align-items: end;
}
.why-us__lead { display: flex; flex-direction: column; gap: var(--sp-4); }
.why-us__lead h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--white);
}
.why-us__copy { font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.64); max-width: 52ch; }

.why-us__strengths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.why-us__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: var(--sp-6) var(--sp-5);
}
.why-us__card-index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.why-us__card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white); }
.why-us__card p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.58); }

.why-us__foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
}
.why-us__proof-line {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.why-us__credibility {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
}

/* ============================================================
   SELECTED WORK — uniform grid. Every item shares the same aspect
   ratio and the same grid track, so the section's total height is
   always predictable — no item can balloon and push into the
   section below it.
   ============================================================ */
.work-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.work-head-row .section-editorial-head { margin-bottom: 0; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.work-grid__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.work-grid__item .placeholder-art { aspect-ratio: 4 / 3; border-radius: var(--radius-image); }
.work-grid__item figcaption { font-size: var(--fs-small); color: var(--slate); }

/* ============================================================
   FINAL CTA — full-bleed, no floating panel, no glow
   ============================================================ */
.final-cta {
  background: var(--ink-navy-deep);
  padding-block: var(--sp-9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.final-cta__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
}
.final-cta__inner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--white);
  max-width: 16ch;
}
.final-cta__text { display: flex; flex-direction: column; gap: var(--sp-3); }
.final-cta__sub { font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.68); max-width: 48ch; }
.final-cta__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============================================================
   ABOUT PAGE — company hero, stats/credentials strip, production-
   knowledge statement, director profiles, compact closing. Reuses
   .page-hero__inner, .section-editorial-head, .eyebrow-plain,
   .link-arrow, and .placeholder-art from elsewhere in the file.

   Two headlines on this page use the same navy-then-orange,
   two-line treatment as Home's hero (.hero-editorial__headline),
   sized to match it exactly (--fs-h1, not the larger --fs-hero
   every other .page-hero on the site uses) — scoped to .about-hero
   and .production-knowledge specifically so Pay Per Job/
   Subscription/Portfolio's hero size is untouched.
   ============================================================ */

/* ---------- Hero — text + a few company photos ---------- */
.about-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; }
.about-hero__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.about-hero__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-image); overflow: hidden; }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero .page-hero__inner h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink-navy);
}
.about-hero .page-hero__inner h1 .accent { color: var(--orange); }

/* ---------- Stats + credentials strip ---------- */
.about-stats__intro { font-size: var(--fs-body-lg); color: var(--slate); margin-bottom: var(--sp-6); }
.about-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.about-stats__item { display: flex; flex-direction: column; gap: 4px; }
.about-stats__value { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink-navy); }
.about-stats__label { font-size: var(--fs-small); color: var(--slate); }

/* ---------- Production knowledge — a few short paragraphs.
   Headline split into the navy-then-orange two-line treatment,
   matching Home's hero exactly (color and size). ---------- */
.production-knowledge__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.production-knowledge__inner { max-width: 680px; display: flex; flex-direction: column; gap: var(--sp-4); }
.production-knowledge__visual .placeholder-art { aspect-ratio: 4 / 5; border-radius: var(--radius-image); }
.production-knowledge__frame {
  aspect-ratio: 805 / 671;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--paper-raised);
}
.production-knowledge__frame img { width: 100%; height: 100%; object-fit: contain; }

.production-knowledge__inner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink-navy);
  margin-bottom: var(--sp-2);
}
.production-knowledge__inner h2 .accent { color: var(--orange); }
.production-knowledge__inner p { font-size: var(--fs-body-lg); color: var(--slate); line-height: 1.7; }

/* ---------- Directors — one row per person: photo left, bio right ---------- */
.directors__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.director-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.director-card__photo {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
  overflow: hidden;
}
.director-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.director-card__content { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: 2px; }
.director-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink-navy); }
.director-card__role { font-size: var(--fs-small); color: var(--orange-dark); }
.director-card__bio-note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.director-card__bio {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--slate);
}
@media (max-width: 640px) {
  .director-card { flex-direction: column; }
  .director-card__photo { width: 96px; aspect-ratio: 1 / 1; }
}

/* ---------- Closing — compact snapshot + understated CTA ---------- */
.about-closing { padding-top: var(--sp-6); }
.about-closing__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.about-closing__inner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-navy);
  margin: 0;
}
@media (max-width: 640px) {
  .about-closing__inner { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   PAY PER JOB PAGE — subpage hero, job-type cards, trial section,
   next-job recap, pricing callout, FAQ accordion. Built on the same
   tokens/eyebrow/button/service-list/why-us/final-cta primitives
   used on Home — see those blocks above for the shared language.
   ============================================================ */

/* ---------- Subpage hero — lighter single-column hero used on
   interior pages that don't carry the Home hero's artwork reel. ---------- */
.page-hero { padding-top: var(--sp-9); padding-bottom: var(--sp-8); }
.page-hero__inner { max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-navy);
}
.page-hero h1 .accent { color: var(--orange); }
.page-hero__sub { font-size: var(--fs-body-lg); color: var(--slate); max-width: 56ch; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-1); }
.page-hero__trust {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  width: 100%;
}

/* ---------- Job type blocks (Simple / Complex) — plain editorial
   split, not pricing-style cards: a shared top hairline, generous
   whitespace, no per-item border/box. ---------- */
.job-types-section { padding-top: 0; }
.job-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.job-type-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.job-type-block__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--ink-navy); }
.job-type-block > p { font-size: var(--fs-body-lg); color: var(--slate); }
.job-type-block ul { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.job-type-block li { font-size: var(--fs-small); color: var(--ink-navy); padding-left: var(--sp-4); position: relative; }
.job-type-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.job-type-note {
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--orange-line);
  font-size: var(--fs-body);
  color: var(--slate);
}
.job-type-note strong { color: var(--ink-navy); display: block; margin-bottom: 4px; }

/* ---------- Process section — horizontal tab/stepper flow, replacing
   the old 4-stacked-row layout to cut vertical height. Default state
   (no JS) shows tab 1's explanation only, matching how the Hero's
   Pay Per Job / Subscription switch already degrades. ---------- */
.process-section { padding-top: 0; }

.job-tabs__track {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.job-tabs__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out);
}
.job-tabs__tab.is-active { border-bottom-color: var(--orange); }
.job-tabs__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
  transition: color var(--dur-base) var(--ease-out);
}
.job-tabs__tab.is-active .job-tabs__num { color: var(--orange-dark); }
.job-tabs__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate);
  transition: color var(--dur-base) var(--ease-out);
}
.job-tabs__tab.is-active .job-tabs__label { color: var(--ink-navy); }
.job-tabs__tab:hover:not(.is-active) .job-tabs__label { color: var(--ink-navy); }

.job-tabs__panel { display: none; font-size: var(--fs-body-lg); color: var(--slate); max-width: 60ch; }
.job-tabs__panel.is-active { display: block; padding-top: var(--sp-6); }

/* ---------- Trial section (dark) — full-bleed, no card/box treatment;
   a top hairline (matching the final-cta convention) signals this is
   a continuation of the page, not a separate terminal block. ---------- */
.trial { background: var(--ink-navy-deep); padding-block: var(--sp-9); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.trial__intro { max-width: 640px; display: flex; flex-direction: column; gap: var(--sp-4); }
.trial__intro h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.015em;
}
.trial__intro p { font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.64); }

.trial__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.trial__col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-4);
}
.trial__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.trial__col li { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); padding-left: var(--sp-4); position: relative; }
.trial__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.trial__turnaround {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.trial__turnaround-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.trial__turnaround-value { font-size: var(--fs-body-lg); font-weight: 600; color: var(--white); }
.trial__turnaround-value .accent { color: var(--orange); }

/* ---------- Next job recap (light) ---------- */
.next-job__inner { max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.next-job__inner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--ink-navy);
  letter-spacing: -0.015em;
  margin-top: var(--sp-3);
}
.next-job__inner > p { font-size: var(--fs-body-lg); color: var(--slate); margin-top: var(--sp-2); }
.next-job__flow {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--orange-dark);
  margin-top: var(--sp-5);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.next-job__note { font-size: var(--fs-small); color: var(--slate); margin-top: var(--sp-4); max-width: 60ch; }
.next-job .btn { margin-top: var(--sp-6); }

/* ---------- Pricing callout (dedicated FAQ item) ---------- */
.pricing-note-section { padding-top: 0; }
.pricing-note { background: var(--paper-raised); border-radius: var(--radius-image); padding: var(--sp-7); }
.pricing-note__q { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink-navy); margin-bottom: var(--sp-3); max-width: 30ch; }
.pricing-note__a { font-size: var(--fs-body-lg); color: var(--slate); max-width: 70ch; }

/* ---------- FAQ accordion — native <details>/<summary>, no JS ---------- */
/* FAQ heading is intentionally larger than other section heads on this
   page, with explicit top/bottom padding (rather than relying on the
   generic `section { padding-block }` rule) so spacing here isn't at
   the mercy of that property's support — this section was reported as
   feeling cramped against the section above it. */
.faq-section { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.faq-section .section-editorial-head { gap: var(--sp-4); }
.faq-section .section-editorial-head h2 {
  font-size: 2.6rem;
  font-size: clamp(2.4rem, 4vw + 1rem, 4.25rem);
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--slate-soft);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-size: var(--fs-body); color: var(--slate); max-width: 68ch; padding-bottom: var(--sp-5); }

/* ============================================================
   SUBSCRIPTION PAGE — service selector, dynamic pricing cards,
   trial banner, comparison table, workflow grid, value section.
   Built on the same primitives as Home/Pay Per Job — see those
   blocks above for the shared eyebrow/button/section language.
   ============================================================ */

/* ---------- Service category tabs — bordered buttons, not a
   sliding-thumb switch (three items, content-driven width). Two
   instances exist on the page (pricing + comparison) and share
   state via js/main.js. ---------- */
.service-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.service-tabs--compact { justify-content: center; margin-top: var(--sp-6); margin-bottom: var(--sp-6); }
.service-tab {
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-navy);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.service-tab:hover:not(.is-active) { border-color: var(--ink-navy); }
.service-tab.is-active { background: var(--orange); border-color: var(--orange); color: var(--white); }

.service-panel { display: none; }
.service-panel.is-active { display: block; }
.service-panel__desc { font-size: var(--fs-body-lg); color: var(--slate); max-width: 64ch; margin-bottom: var(--sp-7); }

/* ---------- Pricing cards ---------- */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-6);
  background: var(--white);
}
.pricing-card--popular { border-color: var(--orange); border-width: 2px; padding-top: calc(var(--sp-6) - 1px); }
.pricing-card__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--orange);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}
.pricing-card__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink-navy); }
.pricing-card__price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--sp-3); }
.pricing-card__amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink-navy); line-height: 1; }
.pricing-card__period { font-size: var(--fs-small); color: var(--slate); }
.pricing-card__ref { font-size: var(--fs-small); color: var(--slate-soft); text-decoration: line-through; margin-top: 2px; }
.pricing-card__desc { font-size: var(--fs-small); color: var(--slate); margin-top: var(--sp-3); }
.pricing-card__features { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0; flex-grow: 1; }
.pricing-card__features li {
  font-size: var(--fs-small);
  color: var(--ink-navy);
  padding-left: var(--sp-4);
  position: relative;
}
.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.pricing-card .btn { width: 100%; margin-top: auto; }

/* ---------- Trial banner — black + orange, deliberately not a
   card and not styled like the page's terminal section. ---------- */
.trial-banner { background: #0a0a0a; padding-block: var(--sp-7); }
.trial-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.trial-banner__headline { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--white); }
.trial-banner__sub { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.56); margin-top: 4px; }

/* ---------- Comparison table ---------- */
.compare-panel { display: none; }
.compare-panel.is-active { display: block; }
.compare-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-navy);
  background: var(--paper-raised);
  border-bottom: 2px solid var(--ink-navy);
}
.compare-table td:first-child, .compare-table th:first-child { color: var(--ink-navy); font-weight: 600; white-space: normal; }
.compare-table th.is-emphasized, .compare-table td.is-emphasized { background: var(--orange-soft); }
.compare-table td.check { color: var(--orange-dark); font-weight: 600; }

/* ---------- Workflow grid — all 4 steps visible at once (not an
   interactive tab-per-step like Pay Per Job's process section). ---------- */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.workflow-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-5);
  background: var(--white);
}
.workflow-step__index { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--orange-dark); }
.workflow-step h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink-navy); }
.workflow-step p { font-size: var(--fs-small); color: var(--slate); }

/* ---------- Subscription value (dark) ---------- */
.sub-value { background: var(--ink-navy-deep); padding-block: var(--sp-9); }
.sub-value__intro { max-width: 640px; display: flex; flex-direction: column; gap: var(--sp-4); }
.sub-value__intro h2 { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 700; color: var(--white); letter-spacing: -0.015em; }
.sub-value__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sub-value__col h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--white); }
.sub-value__col p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-2); }

/* ============================================================
   PORTFOLIO PAGE — category filter, asymmetric gallery, crossfade
   hover interaction, case study, work-type rows. Built on the same
   primitives as the rest of the site (`.service-tabs`, `.why-us`,
   `.section-editorial-head`, `.final-cta`, `.placeholder-art`).
   ============================================================ */
.port-filter-section { padding-bottom: 0; }

/* ---------- Gallery — asymmetric editorial grid. Hiding an item
   (category filter) just removes it from the grid flow; the
   remaining items reflow naturally via grid auto-placement. ---------- */
.port-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.port-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  opacity: 1;
  transform: scale(1);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.port-item.is-hidden { display: none; }
.port-item.is-entering { opacity: 0; transform: scale(0.97); }

.port-item--feature { grid-column: span 7; }
.port-item__stack { grid-column: span 5; display: flex; flex-direction: column; gap: var(--sp-5); }
.port-item__stack .port-item--stacked { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.port-item--wide { grid-column: span 12; }
.port-item--standard { grid-column: span 4; }

.port-item__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  aspect-ratio: 4 / 3;
}
.port-item--feature .port-item__frame { aspect-ratio: 4 / 3.3; }
.port-item--wide .port-item__frame { aspect-ratio: 21 / 8; }
.port-item__stack .port-item__frame { aspect-ratio: 16 / 8; }
/* Challenge Coin sits alone beside the second feature item (Sculpted
   Medal) rather than in a stacked pair — without this, the single
   standard-size frame left a large empty gap under its caption since
   the feature column is much taller. Scoped to this one item only
   (not the shared .port-item__frame default) so the other standalone
   standard items (PVC Patch, Vector Redraw, Keychain) keep their
   normal 4:3 proportions. */
/* Challenge Coin sits alone beside the second feature item (Sculpted
   Medal) rather than in a stacked pair — a fixed aspect-ratio guess
   left it a few pixels short of matching. Instead, stretch this one
   item to the row's actual height and let its frame grow to fill
   whatever space that leaves — exact regardless of caption text
   height or viewport width, no ratio math needed. Scoped to this
   item only (align-items:start stays the gallery-wide default) so
   nothing else regains the old invisible-stretch-gap bug. */
.port-item--tall { align-self: stretch; }
.port-item--tall .port-item__frame { aspect-ratio: unset; flex: 1; }

.port-item__frame > .placeholder-art { transition: transform var(--dur-base) var(--ease-out); }
.port-item__frame:hover > .placeholder-art:not(.port-item__img) { transform: scale(1.015); }

.port-item__meta { display: flex; flex-direction: column; gap: 2px; }
.port-item__type { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink-navy); }
.port-item__desc { font-size: var(--fs-small); color: var(--slate); }

/* ---------- Finished-product ↔ production-artwork hover crossfade.
   Both images occupy the same frame; opacity crossfades with a very
   slight scale change on the incoming layer. Only applied where a
   real second asset will exist — never invented for items that only
   have one image. ---------- */
.port-item__img { position: absolute; inset: 0; }
.port-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.port-item__img--front { position: relative; z-index: 2; opacity: 1; transform: scale(1); }
.port-item__img--back { z-index: 1; opacity: 0; transform: scale(1.018); }
.port-item__frame:hover .port-item__img--front { opacity: 0; }
.port-item__frame:hover .port-item__img--back { opacity: 1; }
.port-item__img--front, .port-item__img--back {
  transition: opacity 500ms ease, transform 500ms ease;
}
.port-item__hint {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(11, 18, 32, 0.65);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: opacity 250ms ease;
}
.port-item__frame:hover .port-item__hint { opacity: 0; }



/* ---------- Focus overlay — a clone of the tapped image animates
   from its source rect to a large centered view (FLIP, driven by
   JS). Lives at the body level, independent of whichever gallery
   mode is currently showing underneath. ---------- */
.port-focus-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.72);
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 200;
}
.port-focus-backdrop.is-visible { opacity: 1; }
.port-focus__image {
  position: fixed;
  z-index: 201;
  overflow: hidden;
  border-radius: var(--radius-image);
  transition: top 420ms cubic-bezier(0.2, 0.7, 0.2, 1), left 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    width 420ms cubic-bezier(0.2, 0.7, 0.2, 1), height 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.port-focus__caption {
  position: fixed;
  z-index: 201;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.port-focus__caption.is-visible { opacity: 1; }
.port-focus__type { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); }
.port-focus__desc { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.port-focus__close {
  position: fixed;
  z-index: 202;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 250ms ease, background var(--dur-fast);
}
.port-focus__close:hover { background: rgba(255, 255, 255, 0.22); }
.port-focus__close.is-visible { opacity: 1; }

/* ---------- Case study — reference → artwork → production ---------- */
.case-study__row { display: flex; align-items: center; gap: var(--sp-5); }
.case-study__step { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.case-study__step .placeholder-art {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  padding: 0;
}
.case-study__step .placeholder-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-study__step figcaption { display: flex; flex-direction: column; gap: 2px; }
.case-study__step-index { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--orange-dark); }
.case-study__step-label { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink-navy); }
.case-study__step-note { font-size: var(--fs-small); color: var(--slate); }
.case-study__arrow { font-size: 1.3rem; color: var(--slate-soft); flex-shrink: 0; }

/* ---------- Work type rows — editorial list, small image + arrow ---------- */
.work-type-list { border-top: 1px solid var(--line); }
.work-type-row {
  display: grid;
  grid-template-columns: 56px 1.4fr 140px 24px;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.work-type-row:hover { background: var(--paper-raised); }
.work-type-row:hover .work-type-row__arrow { transform: translateX(4px); }
.work-type-row__index { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--slate-soft); }
.work-type-row__main h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink-navy); }
.work-type-row__main p { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--slate); max-width: 52ch; }
.work-type-row__img { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.work-type-row__arrow { font-size: 1.1rem; color: var(--orange-dark); transition: transform var(--dur-base) var(--ease-out); justify-self: end; }

/* ============================================================
   CONTACT PAGE — compact two-column hero (text + a small line-art
   production motif, not a photo — see .contact-hero__visual),
   info/form two-column section, and a final CTA. Reuses
   .page-hero (single-column base, extended below), .eyebrow-plain,
   .btn, .final-cta from elsewhere in the file. All new components
   are scoped with a `.contact-` / `.form-` prefix so nothing here
   touches other pages.

   No backend exists yet for the enquiry form — see README for what
   still needs wiring (submit endpoint, and the still-placeholder
   email/phone in the left column, left honestly marked rather than
   invented).
   ============================================================ */

/* ---- Hero: page-hero's single column, extended to two columns on
   larger screens with a small abstract "production drawing" motif
   on the right — thin-stroke shapes, not decoration or stock art. */
.contact-hero { padding-top: var(--sp-8); padding-bottom: var(--sp-7); }
.contact-hero .page-hero__inner { gap: var(--sp-4); }
.contact-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-navy);
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-7);
}
.contact-hero__visual { flex-shrink: 0; }
.contact-hero__visual svg { display: block; }
@media (max-width: 900px) {
  .contact-hero__grid { grid-template-columns: 1fr; }
  .contact-hero__visual { display: none; }
}

/* ---- Two-column contact section: info left, form card right ---- */
.contact-section { padding-top: var(--sp-7); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-navy);
}
.contact-info__head p { margin-top: var(--sp-3); color: var(--slate); font-size: var(--fs-body); max-width: 42ch; }

.contact-info__list { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-7); }
.contact-info__item { display: flex; align-items: flex-start; gap: var(--sp-4); }
.contact-info__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--orange-dark);
}
.contact-info__icon svg { width: 18px; height: 18px; }
.contact-info__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 2px;
}
.contact-info__value { font-size: var(--fs-body); font-weight: 600; color: var(--ink-navy); }
.contact-info__value--pending { font-weight: 500; color: var(--slate-soft); font-style: italic; }

.contact-info__note {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--slate);
  max-width: 40ch;
}

/* ---- Form card — the one intentionally boxed/shadowed element on
   this page, since the form is the page's main visual focus. ---- */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-7);
}
.contact-form-card__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink-navy);
}

.contact-form { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-navy);
}
.form-field label .req { color: var(--orange-dark); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink-navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  width: 100%;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--slate-soft); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* File upload — a dashed drop-zone-styled control, matching the
   site's dashed placeholder language elsewhere without claiming to
   be a real drag-and-drop widget (it's a plain file input). */
.form-field--file .file-drop {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  background: var(--paper);
  position: relative;
}
.file-drop__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; color: var(--slate); }
.file-drop__icon svg { width: 16px; height: 16px; }
.file-drop__text { font-size: var(--fs-small); color: var(--ink-navy); font-weight: 600; }
.file-drop__hint { font-size: var(--fs-micro); color: var(--slate-soft); margin-top: 2px; }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.btn--block { width: 100%; }
.contact-form__submit-note { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--slate-soft); text-align: center; }

/* ---- Careers — a deliberately smaller, plainer form than the main
   enquiry card, centered in a narrow column so it reads as a
   secondary, bottom-of-page utility rather than competing with the
   page's main contact section. ---- */
.careers-section { background: var(--paper-raised); }
.careers__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.careers__head { align-items: center; margin-bottom: var(--sp-4); }
.careers__sub { color: var(--slate); font-size: var(--fs-body); max-width: 46ch; margin: 0 auto; }
.careers__card { margin-top: var(--sp-7); text-align: left; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink-navy-deep); color: rgba(255, 255, 255, 0.6); padding-top: var(--sp-9); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 320px; }
.footer__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--white); }
.footer__logo-mark { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; }
.footer__logo-mark span { color: var(--orange); font-family: var(--font-mono); font-size: 0.85rem; }
.footer__tagline { font-size: var(--fs-small); line-height: 1.6; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: var(--sp-4); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { font-size: var(--fs-small); transition: color var(--dur-fast); }
.footer__col a:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-block: var(--sp-5); font-size: var(--fs-micro); flex-wrap: wrap; gap: var(--sp-3); }
.footer__socials { display: flex; gap: var(--sp-4); }
.footer__socials a:hover { color: var(--white); }

/* ============================================================
   SCROLL REVEAL — fail-safe: visible by default, only hidden
   once JS confirms it can run the animation.
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero-editorial { grid-template-columns: 1fr; align-items: start; gap: var(--sp-6); }
  .hero-editorial__side { padding-bottom: 0; }
  .hero-reel { height: clamp(320px, 52vw, 440px); }
  .why-us__grid { grid-template-columns: 1fr; }
  .port-item--feature, .port-item__stack, .port-item--wide, .port-item--standard { grid-column: span 12; }
  .port-item__stack { flex-direction: row; }
  .case-study__row { flex-direction: column; }
  .case-study__arrow { transform: rotate(90deg); }
  .work-type-row { grid-template-columns: 40px 1fr 24px; }
  .work-type-row__img { display: none; }
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-hero__visual { order: -1; }
  .production-knowledge__grid { grid-template-columns: 1fr; }
  .production-knowledge__visual { order: -1; }
}

@media (max-width: 900px) {
  .nav__utility { display: none; }
  .nav__links, .nav__quick-links { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile.is-open { display: flex; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-row__tag { display: none; }
  .service-row--visual { padding-right: 0; padding-bottom: 140px; }
  .service-row__image { position: static; transform: none; width: 100%; max-width: 220px; margin-top: var(--sp-4); }
  .service-row__image--alt { transform: none; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .job-tabs__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .job-tabs__tab { flex: 0 0 auto; min-width: 168px; }
  .service-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .service-tab { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  section { padding-block: var(--sp-7); }
  .hero { padding-top: var(--sp-6); }
  .hero-stats__row { gap: var(--sp-5); row-gap: var(--sp-4); }
  .hero-stats__num { font-size: 1.2rem; }
  .hero-reel { height: clamp(240px, 62vw, 320px); }
  .port-item__stack { flex-direction: column; }
  .final-cta__inner { flex-direction: column; align-items: flex-start; }
  .footer__top { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .final-cta__ctas { width: 100%; flex-direction: column; }
  .final-cta__ctas .btn { width: 100%; }
}