/* ============================================================
   CPG VELOCITY — Muse-style identity
   Black rail sidebar · cream canvas · condensed display type
   rust accents · editorial sections
   Fonts: Anton (display) + Satoshi (body)
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Surfaces */
  --color-bg: #f5f2ec;
  --color-surface: #faf8f3;
  --color-surface-offset: #eae7df;
  --color-ink: #151514;
  --color-ink-2: #1e1e1b;

  /* Text on cream */
  --color-text: #1d1d1a;
  --color-text-muted: #69675f;
  --color-text-faint: #766c5e;

  /* Text on ink */
  --on-ink: #f3ede2;
  --on-ink-muted: #b8ae9f;

  /* Neutral editorial accents */
  --accent: #292824;
  --accent-hover: #0d0d0b;
  --accent-bright: #e6e3da;
  --accent-wash: #e9e6df;

  /* Borders */
  --color-border: #d9d5cd;
  --border-ink: oklch(from #f3ede2 l c h / 0.16);

  /* Radius */
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1.25rem; --radius-full: 9999px;

  /* Motion */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.06);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 60 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.2 0.02 60 / 0.16);

  /* Fonts */
  --font-display: 'Anton', 'Satoshi', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;

  --content-default: 1120px;
  --rail-width: 184px;
}

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

.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.section--ink { background: var(--color-ink); color: var(--on-ink); }
.section--offset { background: var(--color-surface-offset); }

.on-ink { color: var(--on-ink); }
.on-ink-muted { color: var(--on-ink-muted); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #fff;
  padding: var(--space-3) var(--space-5); z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============ Rail (sidebar / mobile top bar) ============ */

.rail {
  position: fixed; inset: 0 auto 0 0; width: 76px;
  background: var(--color-ink); color: var(--on-ink);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: var(--space-5) 0;
  z-index: 60;
}
.rail__logo { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--on-ink); }
.rail__mark { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.02em; line-height: 1; }
.rail__co { font-size: var(--text-xs); color: var(--on-ink-muted); letter-spacing: 0.18em; }
.rail__menu {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  padding: var(--space-3); cursor: pointer;
}
.rail__menu span { display: block; width: 20px; height: 2px; background: var(--on-ink); transition: transform var(--transition-interactive), opacity var(--transition-interactive); }
.rail__menu:hover span { background: var(--accent-bright); }
.rail__menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rail__menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.rail__menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rail__brand {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--text-xs); letter-spacing: 0.32em; color: var(--on-ink-muted);
  font-weight: 500;
}

/* Content offset for rail on desktop */
@media (min-width: 900px) {
  main, .footer { margin-left: 76px; }
}

/* Mobile: rail becomes top bar */
@media (max-width: 899px) {
  .rail {
    inset: 0 0 auto 0; width: 100%; flex-direction: row;
    justify-content: space-between; padding: var(--space-3) var(--space-4);
    height: 64px;
  }
  .rail__logo { flex-direction: row; gap: var(--space-2); align-items: baseline; }
  .rail__co { font-size: var(--text-xs); }
  .rail__menu { flex-direction: row; gap: 4px; }
  .rail__menu span { width: 18px; }
  .rail__brand { display: none; }
  main { padding-top: 64px; }
}

/* ============ Nav overlay ============ */

.overlay {
  position: fixed; inset: 0; z-index: 55;
  background: var(--color-ink); color: var(--on-ink);
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--space-16);
  align-items: center; padding: var(--space-16) clamp(var(--space-8), 8vw, var(--space-24));
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.overlay--open { opacity: 1; pointer-events: auto; }
.overlay__nav ul { display: grid; gap: var(--space-4); }
.overlay__nav a {
  font-family: var(--font-display); font-size: var(--text-xl);
  text-decoration: none; color: var(--on-ink); text-transform: uppercase;
  letter-spacing: 0.01em;
  display: inline-block; transition: color var(--transition-interactive), transform var(--transition-interactive);
}
.overlay__nav a:hover { color: var(--accent-bright); transform: translateX(6px); }
.overlay__side { display: grid; gap: var(--space-3); align-content: center; }
.overlay__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-ink-muted); margin-bottom: var(--space-2);
}
.overlay__side a { color: var(--on-ink-muted); text-decoration: none; font-size: var(--text-sm); }
.overlay__side a:hover { color: var(--accent-bright); }
.overlay__book {
  margin-top: var(--space-4);
  color: var(--accent-bright); font-weight: 700;
}
@media (max-width: 899px) {
  .overlay { grid-template-columns: 1fr; align-content: center; padding-top: 96px; }
  .overlay__side { gap: var(--space-2); }
}

/* ============ Buttons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; border: 1px solid transparent;
  min-height: 44px; cursor: pointer; text-transform: uppercase;
}
.btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--text-xs); }
.btn--rust { background: var(--accent); color: #fdf6ef; }
.btn--rust:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--rust:active { transform: translateY(0); }
.btn--ink { background: var(--color-ink); color: var(--color-bg); }
.btn--ink:hover { background: var(--color-ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline { border-color: oklch(0.35 0.02 80 / 0.4); color: var(--color-text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost-light { border-color: var(--border-ink); color: var(--on-ink); }
.btn--ghost-light:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

/* ============ Kickers & section heads ============ */

.kicker {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
}
.kicker--light { color: var(--accent-bright); }

.section__head { max-width: 760px; margin-bottom: clamp(var(--space-10), 6vw, var(--space-16)); }
.section__head--left { margin-bottom: var(--space-8); }
.section__head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  line-height: 0.98; margin-bottom: var(--space-4);
}
.section__lede {
  color: var(--color-text-muted);
  font-size: var(--text-lg); line-height: 1.5; max-width: 62ch;
}
.section--ink .section__lede, .section__lede.on-ink-muted { color: var(--on-ink-muted); }
.section--ink .section__head h2 { color: var(--on-ink); }

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

.hero {
  background: var(--color-bg);
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-16), 8vw, var(--space-24));
}
.hero__grid {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 1rem + 9vw, 8.5rem);
  font-weight: 400; text-transform: uppercase;
  line-height: 0.92; letter-spacing: 0.005em;
  margin-bottom: var(--space-6);
}
.hero__accent { color: var(--accent); }
.hero__sub {
  font-size: var(--text-lg); line-height: 1.55;
  color: var(--color-text-muted); max-width: 54ch;
  margin-bottom: var(--space-8);
}
.hero__services {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-4); margin-bottom: var(--space-8);
}
.hero__services p {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.hero__services p:not(:last-child)::after { content: '·'; margin-left: var(--space-4); color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.hero__stats dt {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted); margin-bottom: var(--space-1);
}
.hero__stats dd {
  font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__media figcaption {
  display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__media .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero__media { max-width: 560px; }
}

/* ============ Marquee ============ */

.marquee {
  background: var(--accent); color: #fdf6ef;
  padding-block: var(--space-4); overflow: hidden;
}
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 42s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__track ul {
  display: flex; align-items: center; gap: var(--space-10);
  padding-inline: var(--space-5); flex: none;
}
.marquee__track li {
  font-weight: 500; font-size: var(--text-sm); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.marquee__track li::after { content: '·'; margin-left: var(--space-10); color: oklch(from #fdf6ef l c h / 0.55); }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ============ Track record ============ */

.traction {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4);
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
}
.traction__tile {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4); background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.traction__tile--feature {
  grid-column: span 2; background: var(--color-ink);
  border-color: var(--color-ink); color: var(--on-ink);
}
.traction__tile--feature .traction__label { color: var(--on-ink-muted); }
.traction__num {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.traction__tile--feature .traction__num { color: var(--accent-bright); font-size: var(--text-2xl); }
.traction__label {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
@media (max-width: 860px) {
  .traction { grid-template-columns: repeat(2, 1fr); }
  .traction__tile--feature { grid-column: span 2; }
}

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
.pillar h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: var(--space-3);
}
.pillar p { color: var(--color-text-muted); font-size: var(--text-base); }
.pillar__num { font-size: var(--text-xs); font-weight: 700; color: var(--accent); margin-bottom: var(--space-4); letter-spacing: 0.1em; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Book of work strip */
.book-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--color-ink); color: var(--on-ink);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.book-strip__copy h3 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-3);
}
.book-strip__copy p { color: var(--on-ink-muted); font-size: var(--text-base); max-width: 52ch; }
.book-strip .kicker { margin-bottom: var(--space-2); }

/* ============ Case study ============ */

.case {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start;
}
.case__media img {
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px oklch(0.08 0.02 60 / 0.5);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.case__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-5); }
.case__facts li { font-size: var(--text-sm); color: var(--on-ink-muted); }
.case__facts strong {
  display: block; font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--on-ink); font-variant-numeric: tabular-nums; font-weight: 400;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chips li {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-ink); border-radius: var(--radius-full);
  color: var(--on-ink-muted);
}
.case__note { color: var(--on-ink-muted); margin-bottom: var(--space-8); max-width: 60ch; }

.compare__title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-5); color: var(--on-ink); }
.bar { margin-bottom: var(--space-5); }
.bar__meta {
  display: flex; justify-content: space-between; font-size: var(--text-sm);
  color: var(--on-ink-muted); margin-bottom: var(--space-2);
}
.bar__val { font-variant-numeric: tabular-nums; }
.bar__val--rust { color: var(--accent-bright); font-weight: 700; }
.bar__track {
  height: 10px; border-radius: var(--radius-full);
  background: oklch(from #f3ede2 l c h / 0.1); overflow: hidden;
}
.bar__fill {
  height: 100%; width: 0; border-radius: var(--radius-full);
  background: oklch(from #f3ede2 l c h / 0.35);
  transition: width 1.1s var(--ease-out);
}
.bar__fill--rust { background: var(--accent-bright); }
.compare__foot { font-size: var(--text-xs); color: var(--on-ink-muted); margin-top: var(--space-4); max-width: 60ch; }

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

/* ============ Services ============ */

.services__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start;
}
.services__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.services__media figcaption {
  margin-top: var(--space-3); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint);
}
.services { display: grid; }
.services li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.services li:first-child { border-top: 1px solid var(--color-border); }
.services li::before {
  content: ''; width: 8px; height: 8px; margin-top: var(--space-2);
  border-radius: 50%; background: var(--accent);
}
.services h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-2);
}
.services p { color: var(--color-text-muted); font-size: var(--text-base); }
@media (max-width: 900px) { .services__grid { grid-template-columns: 1fr; } }

/* ============ Studio / team ============ */

.team { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.person {
  background: var(--color-ink-2); border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl); padding: clamp(var(--space-6), 3vw, var(--space-10));
}
.person__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.person h3 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  text-transform: uppercase; color: var(--on-ink);
}
.person__role {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-bright); font-weight: 700;
}
.person__bio { color: var(--on-ink-muted); font-size: var(--text-base); margin-bottom: var(--space-5); }
.person__skills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.person__skills li {
  font-size: var(--text-xs); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-ink); border-radius: var(--radius-full);
  color: var(--on-ink-muted);
}
.person__credits { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-ink); }
.person__credits-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--on-ink-muted); margin-bottom: var(--space-3);
}
.person__credits ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.person__credits li { font-size: var(--text-xs); color: var(--on-ink-muted); }
.person__credits li:not(:last-child)::after { content: '·'; margin-left: var(--space-2); color: var(--accent-bright); }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

/* ============ Process ============ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.step__num { font-size: var(--text-xs); font-weight: 700; color: var(--accent); margin-bottom: var(--space-4); letter-spacing: 0.1em; }
.steps h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-3);
}
.steps p { color: var(--color-text-muted); font-size: var(--text-base); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ============ Pricing ============ */

.pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: stretch; margin-bottom: var(--space-10);
}
.price-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--color-surface); display: flex; flex-direction: column;
}
.price-card--feature { background: var(--color-ink); border-color: var(--color-ink); color: var(--on-ink); }
.price-card__tag {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4);
}
.price-card--feature .price-card__tag { color: var(--accent-bright); }
.price-card__amount {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400;
  letter-spacing: 0.01em;
}
.price-card__amount span { font-size: var(--text-lg); color: var(--color-text-muted); }
.price-card--feature .price-card__amount span { color: var(--on-ink-muted); }
.price-card__unit { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.price-card--feature .price-card__unit { color: var(--on-ink-muted); }
.price-card ul { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); flex: 1; }
.price-card li {
  font-size: var(--text-sm); padding-left: var(--space-5);
  position: relative; color: var(--color-text-muted);
}
.price-card--feature li { color: var(--on-ink-muted); }
.price-card li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.price-card--feature li::before { background: var(--accent-bright); }
.price-card__btn { align-self: flex-start; }
@media (max-width: 820px) { .pricing { grid-template-columns: 1fr; } }

/* Calculator */
.calculator {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
}
.calculator__head h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-2);
}
.calculator__head p { color: var(--color-text-muted); font-size: var(--text-sm); }
.calculator__controls { display: grid; gap: var(--space-6); align-content: center; }
.calc-field label {
  display: flex; justify-content: space-between; font-size: var(--text-sm);
  font-weight: 700; margin-bottom: var(--space-3);
}
.calc-field output { font-family: var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-field input[type='range'] { width: 100%; accent-color: var(--accent); height: 32px; }
.calc-field__range {
  display: flex; justify-content: space-between; font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.calculator__results {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-4);
  align-content: center;
}
.calc-result { display: flex; flex-direction: column; gap: var(--space-1); }
.calc-result--feature {
  background: var(--color-ink); color: var(--on-ink);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.calc-result__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.calc-result--feature .calc-result__label { color: var(--on-ink-muted); }
.calc-result__value {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}
.calc-result--feature .calc-result__value { color: var(--accent-bright); font-size: var(--text-2xl); }
@media (max-width: 860px) {
  .calculator { grid-template-columns: 1fr; }
  .calculator__results { grid-template-columns: 1fr; }
}

/* ============ Brand identity wizard ============ */

.wizard {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.wizard__progress {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.wizard__progress li {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 700;
  padding-top: var(--space-3); border-top: 2px solid var(--color-border);
}
.wizard__progress li span { display: block; color: var(--color-text-faint); margin-bottom: var(--space-1); }
.wizard__progress li.is-current { color: var(--color-text); border-top-color: var(--accent); }
.wizard__progress li.is-current span { color: var(--accent); }
.wizard__progress li.is-done { color: var(--color-text-muted); border-top-color: var(--accent); }
@media (max-width: 640px) { .wizard__progress { grid-template-columns: repeat(2, 1fr); } }

.wizard__panel { display: grid; gap: var(--space-5); }
.wizard__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.wizard__nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-4); margin-top: var(--space-8);
}
.wizard__err { font-size: var(--text-sm); color: var(--accent); margin-right: auto; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-faint); }
.req { color: var(--accent); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.wizard .field label, .wizard .field legend {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
}
.wizard .field input, .wizard .field select, .wizard .field textarea {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text);
  padding: var(--space-3) var(--space-4); min-height: 44px; width: 100%;
}
.wizard .field textarea { resize: vertical; min-height: 72px; }
.wizard .field input:focus-visible, .wizard .field select:focus-visible, .wizard .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.wizard .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .wizard .field-row { grid-template-columns: 1fr; } }

.chips--light .chip { color: var(--color-text-muted); border-color: var(--color-border); }
.chips--light .chip[aria-pressed='true'] {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg);
}

/* Style cards */
.styles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
@media (max-width: 980px) { .styles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .styles { grid-template-columns: 1fr; } }

.style-card {
  text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.style-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.style-card[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.style-card__preview {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--space-2); aspect-ratio: 4 / 3; padding: var(--space-4);
}
.sp__kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.sp__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; text-transform: uppercase; }
.sp__palette { display: flex; gap: 4px; margin-top: var(--space-2); }
.sp__palette i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.style-card__name {
  font-weight: 700; font-size: var(--text-sm); padding: var(--space-4) var(--space-4) 0;
}
.style-card__desc { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2) var(--space-4) var(--space-4); }

/* Style preview themes */
.style-prev--editorial { background: #f2ead9; color: #2a2118; }
.style-prev--editorial .sp__kicker { color: #8a7355; }
.style-prev--editorial .sp__title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.style-prev--editorial .sp__palette i:nth-child(1) { background: #f2ead9; border: 1px solid #d8cbb2; }
.style-prev--editorial .sp__palette i:nth-child(2) { background: #d9c7a7; }
.style-prev--editorial .sp__palette i:nth-child(3) { background: #6b4f3a; }
.style-prev--editorial .sp__palette i:nth-child(4) { background: #2a2118; }

.style-prev--bold { background: #111; color: #f5f30f; }
.style-prev--bold .sp__kicker { color: #fff; }
.style-prev--bold .sp__title { font-size: var(--text-xl); }
.style-prev--bold .sp__palette i:nth-child(1) { background: #111; border: 1px solid #444; }
.style-prev--bold .sp__palette i:nth-child(2) { background: #f5f30f; }
.style-prev--bold .sp__palette i:nth-child(3) { background: #ff3b1f; }
.style-prev--bold .sp__palette i:nth-child(4) { background: #fff; }

.style-prev--minimal { background: #fff; color: #1a1a1a; }
.style-prev--minimal .sp__kicker { color: #999; }
.style-prev--minimal .sp__title { font-size: var(--text-base); letter-spacing: 0.22em; }
.style-prev--minimal .sp__palette i:nth-child(1) { background: #fff; border: 1px solid #ddd; }
.style-prev--minimal .sp__palette i:nth-child(2) { background: #e8e8e8; }
.style-prev--minimal .sp__palette i:nth-child(3) { background: #b9b9b9; }
.style-prev--minimal .sp__palette i:nth-child(4) { background: #1a1a1a; }

.style-prev--playful { background: #ffd23f; color: #1f41bb; }
.style-prev--playful .sp__kicker { color: #1f41bb; }
.style-prev--playful .sp__title { font-size: var(--text-xl); }
.style-prev--playful .sp__palette i:nth-child(1) { background: #ffd23f; }
.style-prev--playful .sp__palette i:nth-child(2) { background: #ff6b5e; }
.style-prev--playful .sp__palette i:nth-child(3) { background: #1f41bb; }
.style-prev--playful .sp__palette i:nth-child(4) { background: #fff; }

.style-prev--dark { background: #120d0a; color: #f3e2c7; }
.style-prev--dark .sp__kicker { color: #a8845a; }
.style-prev--dark .sp__title { letter-spacing: 0.04em; }
.style-prev--dark .sp__palette i:nth-child(1) { background: #120d0a; border: 1px solid #3a2c1e; }
.style-prev--dark .sp__palette i:nth-child(2) { background: #8a5a2e; }
.style-prev--dark .sp__palette i:nth-child(3) { background: #d99a4e; }
.style-prev--dark .sp__palette i:nth-child(4) { background: #f3e2c7; }

.style-prev--clean { background: #eef1f4; color: #1c2733; }
.style-prev--clean .sp__kicker { color: #5d7185; }
.style-prev--clean .sp__title { font-size: var(--text-base); letter-spacing: 0.18em; }
.style-prev--clean .sp__palette i:nth-child(1) { background: #eef1f4; border: 1px solid #c6cf d8; border-color: #c6cfd8; }
.style-prev--clean .sp__palette i:nth-child(2) { background: #c6cfd8; }
.style-prev--clean .sp__palette i:nth-child(3) { background: #5d7185; }
.style-prev--clean .sp__palette i:nth-child(4) { background: #1c2733; }

/* Brand kit result */
.kit {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: stretch;
}
@media (max-width: 860px) { .kit { grid-template-columns: 1fr; } }
.kit__preview {
  border-radius: var(--radius-lg); padding: var(--space-8);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
}
.kit__preview.kit--editorial { background: #f2ead9; color: #2a2118; }
.kit__preview.kit--bold { background: #111; color: #f5f30f; }
.kit__preview.kit--minimal { background: #fff; color: #1a1a1a; border: 1px solid var(--color-border); }
.kit__preview.kit--playful { background: #ffd23f; color: #1f41bb; }
.kit__preview.kit--dark { background: #120d0a; color: #f3e2c7; }
.kit__preview.kit--clean { background: #eef1f4; color: #1c2733; }
.kit__brand {
  font-family: var(--font-display); font-size: var(--text-2xl);
  text-transform: uppercase; line-height: 0.95; margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}
.kit--minimal .kit__brand { letter-spacing: 0.18em; font-size: var(--text-xl); }
.kit--clean .kit__brand { letter-spacing: 0.14em; font-size: var(--text-xl); }
.kit--editorial .kit__brand { font-family: Georgia, 'Times New Roman', serif; font-style: italic; text-transform: none; }
.kit__tag { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-4); opacity: 0.75; }
.kit__palette { display: flex; gap: 6px; }
.kit__palette i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.kit__meta { display: flex; flex-direction: column; min-width:0; }
.kit__meta dl { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.kit__meta dt {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted); margin-bottom: var(--space-1);
}
.kit__meta dd { font-size: var(--text-sm); color: var(--color-text); overflow-wrap:anywhere; white-space:pre-line; }
.kit__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.kit__hint { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--accent); min-height: 1.5em; }
.kit__brief {
  margin-top: var(--space-5);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7;
  color: var(--color-text-muted); white-space: pre-wrap;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}

/* Upload preview */
.upload-preview {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-2);
}
.upload-preview img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.upload-preview__remove {
  font-size: var(--text-sm); font-weight: 700; color: var(--accent);
  padding: var(--space-2); min-height: 40px;
}
.upload-preview__remove:hover { color: var(--accent-hover); }

/* ============ Intake ============ */

.intake__grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start;
}
.intake__copy h2 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-4); color: var(--on-ink);
}
.intake__copy > p { color: var(--on-ink-muted); margin-bottom: var(--space-6); }
.intake__points { display: grid; gap: var(--space-3); }
.intake__points li {
  font-size: var(--text-sm); color: var(--on-ink-muted);
  padding-left: var(--space-5); position: relative;
}
.intake__points li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright);
}

.intake {
  display: grid; gap: var(--space-5);
  background: var(--color-ink-2); border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.field { display: grid; gap: var(--space-2); }
.field label, .field legend { font-size: var(--text-sm); font-weight: 700; color: var(--on-ink); }
.field .opt { font-weight: 400; color: var(--on-ink-muted); }
.intake .field input, .intake .field select, .intake .field textarea {
  background: oklch(from var(--color-ink) l c h / 0.6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-md);
  color: var(--on-ink); padding: var(--space-3) var(--space-4); min-height: 44px; width: 100%;
}
.intake .field textarea { resize: vertical; min-height: 88px; }
.intake .field input:focus-visible, .intake .field select:focus-visible, .intake .field textarea:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 1px; border-color: var(--accent-bright);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .intake__grid { grid-template-columns: 1fr; }
}

.field--chips { border: none; }
.chips--select { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip {
  font-size: var(--text-sm); font-weight: 500; color: var(--on-ink-muted);
  border: 1px solid var(--border-ink); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4); min-height: 40px; cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--accent-bright); border-color: var(--accent-bright);
  color: var(--color-ink); font-weight: 700;
}

.intake__error {
  font-size: var(--text-sm); color: #ffb4a0;
  background: oklch(from var(--accent) l c h / 0.25);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.intake__submit { justify-self: start; }

.intake-result {
  grid-column: 2;
  background: var(--color-ink-2); border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.intake-result h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  text-transform: uppercase; margin-bottom: var(--space-5); color: var(--on-ink);
}
.intake-result pre {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7;
  color: var(--on-ink-muted); white-space: pre-wrap; max-width: none;
  margin-bottom: var(--space-6);
}
.intake-result__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.intake-result__hint { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--accent-bright); min-height: 1.5em; }
.kit-nextsteps { padding:var(--space-6); margin-bottom:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-sm); }
.kit-nextsteps h3 { font-family:var(--font-body); font-size:var(--text-lg); margin-bottom:var(--space-2); }
.kit-nextsteps p { font-size:var(--text-sm); color:var(--color-text-muted); }
.intake__followup { margin-top:var(--space-6); }
.intake-result #briefReadyTitle { font-size:var(--text-2xl); line-height:1.05; margin-block:var(--space-4); }
.intake-result__lead { color:var(--on-ink-muted); font-size:var(--text-base); }
.brief-nextsteps { display:grid; gap:var(--space-5); padding-block:var(--space-6); margin-block:var(--space-6); border-block:1px solid var(--border-ink); }
.brief-nextsteps h4 { font-family:var(--font-body); font-size:var(--text-base); color:var(--on-ink); margin-bottom:var(--space-2); }
.brief-nextsteps p { color:var(--on-ink-muted); font-size:var(--text-sm); overflow-wrap:anywhere; }
.brief-review { margin-bottom:var(--space-6); }
.brief-review summary { cursor:pointer; color:var(--on-ink); font-size:var(--text-sm); padding-block:var(--space-3); }
.brief-review pre { margin-top:var(--space-4); overflow-wrap:anywhere; white-space:pre-wrap; }
.intake-result__delivery { font-size:var(--text-xs); color:var(--on-ink-muted); margin-top:var(--space-5); overflow-wrap:anywhere; }
@media (max-width: 860px) { .intake-result { grid-column: 1; } }

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

.footer {
  background: var(--color-ink); color: var(--on-ink-muted);
  border-top: 1px solid var(--border-ink);
  padding-block: var(--space-16) var(--space-6);
}
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 0.8fr 1.2fr 1.1fr;
  gap: var(--space-10); margin-bottom: var(--space-12);
}
.footer__logo {
  display: flex; align-items: baseline; gap: var(--space-2);
  text-decoration: none; color: var(--on-ink);
}
.footer__name { font-weight: 700; margin-left: var(--space-2); }
.footer__tagline {
  margin-top: var(--space-4); font-family: var(--font-display);
  font-size: var(--text-lg); color: var(--on-ink); max-width: 24ch;
  text-transform: uppercase; line-height: 1.1;
}
.footer__book { margin-top: var(--space-5); }
.footer__nav ul, .footer__social { display: grid; gap: var(--space-3); }
.footer__nav a, .footer__social a {
  text-decoration: none; color: var(--on-ink-muted); font-size: var(--text-sm);
}
.footer__nav a:hover, .footer__social a:hover { color: var(--accent-bright); }
.footer__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: var(--space-4); color: var(--on-ink);
}
.footer__note { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.footer__form { display: flex; gap: var(--space-2); }
.footer__form input {
  flex: 1; min-width: 0; min-height: 44px;
  background: oklch(from var(--color-ink) l c h / 0.6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-full);
  color: var(--on-ink); padding: var(--space-2) var(--space-4);
}
.footer__form input:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.footer__hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--on-ink-muted); }
.footer__small { border-top: 1px solid var(--border-ink); padding-top: var(--space-5); }
.footer__small p { font-size: var(--text-xs); color: var(--on-ink-muted); max-width: 90ch; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============ Scroll reveals ============ */

.fade-in { opacity: 1; }
@supports (animation-timeline: view()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
  @keyframes reveal-fade { to { opacity: 1; } }
}

/* Restrained agency-level composition */
.hero { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.hero__grid { grid-template-columns:minmax(0,1fr); align-items:start; gap:var(--space-10); }
.hero__title { font-family:var(--font-body); font-weight:500; text-transform:none; font-size:clamp(3rem,6.2vw,6rem); line-height:1.08; letter-spacing:-.055em; margin-bottom:0; }
.hero__title>span { display:block; }
.hero__title .hero__editorial { font-family:'Instrument Serif',serif; font-size:1.22em; line-height:1.08; letter-spacing:-.035em; margin-top:var(--space-2); }
.hero__sub { font-size:var(--text-lg); line-height:1.6; max-width:49ch; margin-bottom:0; }
.hero__intro { padding-bottom:var(--space-2); min-width:0; }
.hero__actions { align-items: center; margin-bottom: 0; }
.hero__media img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); box-shadow: none; }
.text-link { font-size: var(--text-sm); color: inherit; text-decoration: none; padding-block: var(--space-3); display: inline-block; border-bottom: 1px solid currentColor; }
.text-link:hover { color: var(--accent); }
.expertise { border-top: 1px solid var(--color-border); }
.expertise-list article { display: grid; grid-template-columns: 40px 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--color-border); align-items: baseline; }
.expertise-list h3, .engagements h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 500; }
.expertise-list p, .engagements p { color: var(--color-text-muted); font-size: var(--text-base); }
.expertise-index { font-size: var(--text-xs); color: var(--accent); }
.studio-clean__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-10); }
.studio-clean h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: 1.1; text-transform: uppercase; }
.studio-clean p:not(.kicker) { color: var(--on-ink-muted); margin-block: var(--space-6); max-width: 50ch; }
.studio-clean .text-link:hover { color: var(--accent-bright); }
.engagements { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-8); }
.engagements article { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.engagements h3 { margin-bottom: var(--space-3); }
.section__head h2 { font-size: var(--text-xl); line-height: 1.12; }
.section__lede { font-size: var(--text-base); max-width: 52ch; }
.wizard { border-radius: var(--radius-sm); }
.wizard__panel { max-width: 100%; }
.import-actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.import-actions .btn { flex-shrink: 0; }
.import-colors { display: grid; gap: var(--space-3); padding-block: var(--space-4); }
.palette-choice { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.palette-choice input { width: 18px; height: 18px; accent-color: var(--accent); }
#importStatus[data-state="error"] { color: var(--accent); }
.btn:disabled { opacity: .6; cursor: wait; }
.intake__grid { grid-template-columns: .8fr 1.2fr; }
.intake { border-radius: var(--radius-sm); }
.footer-clean { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-12); padding-bottom: var(--space-16); }
.footer-clean h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; color: var(--on-ink); margin-bottom: var(--space-6); }
.footer-clean .text-link { overflow-wrap: anywhere; color: var(--on-ink); }
.sp__kicker { font-size: var(--text-xs); }
.style-prev--editorial .sp__title, .kit--editorial .kit__brand { font-family: 'Instrument Serif', serif; }
@media(max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__intro { max-width:52ch; }
  .hero__media { max-width: none; }
  .hero__media img { width: 100%; aspect-ratio: 16 / 9; }
}
@media(max-width: 640px) {
  .expertise-list article { grid-template-columns: 24px 1fr; gap: var(--space-3); }
  .expertise-list article p { grid-column: 2; }
  .studio-clean__grid, .engagements, .footer-clean, .intake__grid { grid-template-columns: 1fr; }
  .hero__title { font-size:clamp(1.85rem,8.3vw,3.3rem); letter-spacing:-.05em; }
  .hero__title .hero__editorial { font-size:1.45em; }
  .hero__grid { gap:var(--space-8); }
  .hero__sub { font-size:var(--text-base); }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .kit__brand { font-size: var(--text-xl); }
}

/* Comparable, content-led creative templates */
.style-card__preview { position: relative; aspect-ratio: 4 / 5; overflow: hidden; gap: var(--space-2); }
.template-brand { position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); font-size: var(--text-xs); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; z-index: 2; overflow-wrap: anywhere; }
.template-image { position: absolute; object-fit: cover; inset: 0; width: 100%; height: 100%; }
.sp__kicker, .sp__title, .sp__palette, .template-footer { position: relative; z-index: 1; }
.template-footer { font-size: var(--text-xs); font-family: var(--font-body); margin-top: var(--space-2); line-height: 1.4; }
.style-prev--editorial { justify-content: flex-end; }
.style-prev--editorial .template-image { top: 18%; left: 20%; width: 72%; height: 42%; border-radius: 50% 50% 0 0; }
.style-prev--editorial .sp__title { font-size: var(--text-xl); text-transform: none; font-weight: 400; }
.style-prev--bold { justify-content: flex-end; }
.style-prev--bold .template-image { top: 16%; height: 48%; filter: saturate(.7); }
.style-prev--bold .sp__title { font-size: var(--text-2xl); letter-spacing: -.02em; }
.style-prev--minimal { align-items: center; text-align: center; }
.style-prev--minimal .template-brand { text-align: center; font-weight: 400; letter-spacing: .12em; }
.style-prev--minimal .template-image { inset: 22% 25% auto; width: 50%; height: 32%; }
.style-prev--minimal .sp__title { font-family: var(--font-body); font-weight: 400; letter-spacing: .03em; }
.style-prev--playful { justify-content: flex-end; }
.style-prev--playful .template-image { inset: 18% 8% auto auto; width: 63%; height: 41%; border-radius: var(--radius-xl); transform: rotate(5deg); }
.style-prev--playful .sp__title { font-size: var(--text-2xl); }
.style-prev--dark { justify-content: flex-end; }
.style-prev--dark .template-image { opacity: .65; }
.style-prev--dark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 20%, #120d0a); }
.style-prev--dark .template-brand { z-index: 3; }
.style-prev--dark .sp__kicker, .style-prev--dark .sp__title, .style-prev--dark .sp__palette, .style-prev--dark .template-footer { z-index: 2; }
.style-prev--dark .sp__title { font-family: 'Instrument Serif', serif; text-transform: none; font-size: var(--text-xl); }
.style-prev--clean .template-image { inset: 18% var(--space-4) auto; width: calc(100% - var(--space-8)); height: 36%; filter: saturate(.35); }
.style-prev--clean .sp__title { font-family: var(--font-body); letter-spacing: -.02em; font-size: var(--text-xl); font-weight: 500; }
.style-prev--clean { background-image: linear-gradient(#c6cfd844 1px, transparent 1px), linear-gradient(90deg, #c6cfd844 1px, transparent 1px); background-size: 24px 24px; }
.template-detail { margin-top: var(--space-8); border-top: 1px solid var(--color-border); padding-top: var(--space-6); display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-6); align-items: start; }
.template-detail h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; }
.template-detail__canvas { grid-row: span 2; }
.template-detail__canvas .style-card__preview { width: 100%; }
.template-detail__note { grid-column: 1; grid-row: 2; font-size: var(--text-sm); color: var(--color-text-muted); }
@media(max-width: 640px) {
  .template-detail { grid-template-columns: 1fr; }
  .template-detail__note { grid-row: auto; grid-column: auto; }
  .template-detail__canvas { grid-row: auto; }
}
.website-product { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4); background: var(--color-bg); }
.website-product img { width: 100px; height: 112px; object-fit: contain; flex-shrink: 0; }
.website-product figcaption { font-size: var(--text-sm); }
.website-product figcaption p { margin-block: var(--space-2); color: var(--color-text-muted); }
.website-product a { color: inherit; }
.direction-controls, .sequence-wrap { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
.template-detail, .wizard, .wizard__panel, .direction-controls .field { min-width: 0; }
.aesthetic-sequence { min-width: 0; max-width: 100%; }
.direction-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.direction-controls select { width: 100%; min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); }
.direction-controls label { color: var(--color-text); }
.aesthetic-sequence { display:grid; grid-template-columns:minmax(0,1fr); margin-block:var(--space-4); }
.sequence-frame { position: relative; aspect-ratio: 9 / 16; padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--color-border); }
.sequence-label, .sequence-footer { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; z-index: 1; }
.sequence-image { width: 100%; height: 44%; object-fit: contain; z-index: 1; }
.sequence-frame h4 { font-size: var(--text-xl); line-height: 1.08; overflow-wrap: anywhere; font-weight: 400; z-index: 1; }
.sequence-frame[data-type="serif"] h4 { font-family: 'Instrument Serif',serif; }
.sequence-frame[data-type="sans"] h4 { font-family: var(--font-body); font-weight: 500; }
.sequence-frame[data-type="display"] h4 { font-family: var(--font-display); text-transform: uppercase; }
.sequence-frame[data-light="bright"] .sequence-image { filter: brightness(1.12) saturate(.85); }
.sequence-frame[data-light="moody"] .sequence-image { filter: brightness(.7) saturate(.65); }
.sequence-frame[data-texture="paper"]::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,#77777710 4px); pointer-events:none; }
.sequence-frame[data-texture="grain"]::after { content:''; position:absolute; inset:0; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); pointer-events:none; }
.sequence-frame[data-composition="minimal"] { text-align:center; align-items:center; }
.sequence-frame[data-composition="minimal"] .sequence-image { width:72%; height:36%; }
.sequence-frame[data-composition="editorial"] .sequence-image { width:88%; align-self:flex-end; object-fit:contain; }
.sequence-frame--1 .sequence-image { object-fit:cover; }
.sequence-wrap>.field__hint { max-width:65ch; }
.template-detail__canvas { display:none; }
.template-detail__note { grid-row:auto; grid-column:auto; }
@media(max-width:740px) {
  .direction-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .direction-controls select { min-width:0; padding-inline:var(--space-2); font-size:var(--text-sm); }
  .aesthetic-sequence { display:grid; overflow:visible; padding-bottom:var(--space-3); }
  .sequence-frame { width:100%; max-width:none; margin-inline:0; }
}
.product-look { aspect-ratio:4/3; min-height:360px; padding:var(--space-6); }
.product-look .sequence-image { height:58%; width:100%; object-fit:contain; }
.product-look h4 { font-size:var(--text-xl); }
@media(max-width:640px) {
  .product-look { aspect-ratio:4/5; min-height:330px; padding:var(--space-4); }
}
.detected-products { min-width:0; }
.social-proof { padding-block:64px 40px; border-bottom:1px solid var(--color-border); }
.social-proof__grid { display:grid; grid-template-columns:1fr 1.8fr; gap:32px 56px; align-items:center; }
.social-proof__intro h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,42px); line-height:1.05; text-transform:uppercase; margin-block:16px 24px; }
.social-proof__numbers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:0; }
.social-proof__numbers>div { display:flex; flex-direction:column-reverse; gap:10px; }
.social-proof__numbers dt { font-size:13px; color:var(--color-text-muted); }
.social-proof__numbers dd { font-family:var(--font-display); font-size:clamp(44px,4.6vw,66px); font-variant-numeric:tabular-nums; line-height:1; margin:0; }
.social-proof__note { grid-column:1/-1; font-size:11px; color:var(--color-text-muted); line-height:1.6; max-width:none; }
.social-proof__note a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:740px) {
  .social-proof { padding-block:40px 28px; }
  .social-proof__grid { grid-template-columns:1fr; gap:28px; }
  .social-proof__numbers { gap:12px; }
  .social-proof__numbers dd { font-size:40px; }
  .social-proof__numbers dt { font-size:11px; min-height:34px; }
}
.brand-reel { padding-block:36px 40px; border-block:1px solid var(--color-border); overflow:hidden; }
.brand-reel__head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.brand-reel__head h2 { font-family:var(--font-body); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; }
.brand-reel__toggle { font-size:12px; padding:8px 0 8px 12px; color:var(--color-text-muted); text-decoration:underline; text-underline-offset:4px; }
.brand-reel__viewport { overflow-x:auto; scrollbar-width:none; }
.brand-reel__viewport::-webkit-scrollbar { display:none; }
.brand-reel__track { display:flex; width:max-content; animation:client-reel 90s linear infinite; }
.brand-reel__list { display:flex; align-items:center; gap:64px; padding:0 64px 0 0; margin:0; list-style:none; flex-shrink:0; }
.brand-reel__list li { display:flex; flex-shrink:0; }
.brand-reel__list a { display:flex; align-items:center; justify-content:center; min-width:140px; height:86px; padding:7px; }
.brand-reel__list img { object-fit:contain; height:64px; max-width:180px; filter:grayscale(1); }
.brand-reel__list img.brand-reel__ink { filter:brightness(0); }
.brand-reel__list img.brand-reel__invert { filter:grayscale(1) invert(1); }
.brand-reel:hover .brand-reel__track,
.brand-reel:focus-within .brand-reel__track,
.brand-reel.is-paused .brand-reel__track { animation-play-state:paused; }
.brand-reel:focus-within .brand-reel__track { transform:none; animation:none; }
@keyframes client-reel { to { transform:translateX(-50%); } }
@media(max-width:640px) {
  .brand-reel { padding-block:28px; }
  .brand-reel__list { gap:36px; padding-right:36px; }
  .brand-reel__list a { min-width:120px; }
  .brand-reel__list img { max-width:145px; height:56px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-reel__track { animation:none; }
  .brand-reel__list[aria-hidden="true"], .brand-reel__toggle { display:none; }
}

/* Editorial navigation and page hierarchy */
.rail { width:var(--rail-width); align-items:stretch; justify-content:flex-start; padding:var(--space-6) var(--space-4); gap:var(--space-5); overflow-y:auto; border-right:1px solid var(--border-ink); }
.rail__logo { align-items:flex-start; gap:var(--space-1); padding-inline:var(--space-3); }
.rail__mark { font-size:var(--text-xl); }
.rail__co { letter-spacing:.2em; font-size:var(--text-xs); }
.rail__nav { display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-6); }
.rail__link { display:flex; align-items:center; min-height:42px; padding:var(--space-2) var(--space-3); text-decoration:none; color:var(--on-ink-muted); font-size:var(--text-sm); border-radius:var(--radius-sm); }
.rail__link:hover { color:var(--on-ink); background:rgba(255,255,255,.05); }
.rail__link[aria-current="location"] { color:var(--on-ink); background:rgba(255,255,255,.1); }
.rail__tool { margin-top:auto; padding:var(--space-4) var(--space-3); border-top:1px solid var(--border-ink); }
.rail__tool p { font-size:var(--text-xs); color:var(--on-ink-muted); margin-bottom:var(--space-3); line-height:1.5; }
.rail__tool a { display:flex; justify-content:space-between; gap:var(--space-2); color:var(--on-ink); text-decoration:none; font-size:var(--text-sm); line-height:1.4; }
.rail__tool a:hover { text-decoration:underline; text-underline-offset:4px; }
.rail__email { padding-inline:var(--space-3); font-size:var(--text-xs); color:var(--on-ink-muted); text-decoration:none; }
.rail__email:hover { color:var(--on-ink); }
.rail__menu { display:none; }
.section__head h2, .studio-clean h2, .intake__copy h2, .footer-clean h2 { font-family:var(--font-body); font-weight:500; font-size:var(--text-2xl); line-height:1.15; letter-spacing:-.035em; text-transform:none; }
.section__head { max-width:760px; }
.expertise-list article { padding-block:var(--space-8); }
.studio-clean__grid { grid-template-columns:1fr 2.4fr; }
.brand-reel__head h2 { font-size:var(--text-xs); }
@media(min-width:900px) { main,.footer { margin-left:var(--rail-width); } }
@media(max-width:899px) {
  html { scroll-padding-top:128px; }
  .rail { width:100%; height:112px; display:grid; grid-template-columns:1fr auto; gap:var(--space-2) var(--space-4); align-content:space-between; padding:var(--space-3) var(--space-5) 0; overflow:visible; }
  .rail__logo { align-items:baseline; gap:var(--space-2); padding:0; }
  .rail__mark { font-size:var(--text-lg); }
  .rail__nav { grid-column:1/-1; grid-row:2; flex-direction:row; gap:var(--space-1); margin:0; overflow-x:auto; padding-bottom:var(--space-2); scrollbar-width:none; }
  .rail__nav::-webkit-scrollbar { display:none; }
  .rail__link { white-space:nowrap; min-height:40px; font-size:var(--text-xs); padding-inline:var(--space-3); flex-shrink:0; }
  .rail__tool,.rail__email { display:none; }
  .rail__menu { display:flex; padding:0; }
  .rail__menu span { display:none; }
  .rail__menu-label { font-family:var(--font-body); font-size:var(--text-xs); font-weight:500; color:var(--on-ink); }
  .rail__menu-label::after { content:' +'; }
  .rail__menu[aria-expanded="true"] .rail__menu-label::after { content:' ×'; }
  main { padding-top:112px; }
  .overlay { padding-top:144px; }
  .hero { padding-block:var(--space-12) var(--space-16); }
}
@media(max-width:640px) { .studio-clean__grid { grid-template-columns:1fr; } }

/* Compact agency header: clear controls instead of a rail/hamburger */
html { scroll-padding-top:116px; }
main { margin-left:0; padding-top:96px; }
.footer { margin-left:0; }
.site-header { position:fixed; inset:0 0 auto; z-index:60; height:96px; display:flex; align-items:center; gap:var(--space-8); padding-inline:clamp(var(--space-6),4vw,var(--space-16)); background:var(--color-bg); border-bottom:1px solid var(--color-border); }
.site-wordmark { display:flex; align-items:baseline; gap:var(--space-2); color:var(--color-text); text-decoration:none; flex-shrink:0; }
.site-wordmark__mark { font-family:var(--font-display); font-size:var(--text-xl); line-height:1; }
.site-wordmark__name { font-size:var(--text-xs); font-weight:700; letter-spacing:.14em; }
.site-header__nav { display:flex; align-items:center; gap:var(--space-5); margin-left:auto; }
.site-header .rail__link { color:var(--color-text-muted); background:none; font-size:var(--text-sm); padding:var(--space-2) 0; border-radius:0; border-bottom:1px solid transparent; }
.site-header .rail__link:hover, .site-header .rail__link[aria-current="location"] { color:var(--color-text); background:none; border-bottom-color:currentColor; }
.site-header__actions { display:flex; align-items:center; gap:var(--space-3); }
.site-header .site-header__tool { display:flex; gap:var(--space-3); align-items:center; min-height:44px; border:1px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); color:var(--color-text); white-space:nowrap; }
.site-header .site-header__tool:hover, .site-header .site-header__tool[aria-current="location"] { border-color:var(--color-text); background:var(--color-surface); }
.site-menu { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:44px; padding:var(--space-2) var(--space-5); color:var(--on-ink); background:var(--color-ink); border:1px solid var(--color-ink); border-radius:var(--radius-full); font-family:var(--font-body); font-size:var(--text-sm); }
.site-menu:hover { background:var(--color-ink-2); }
.overlay { z-index:55; padding-top:144px; }
.overlay__nav a[aria-current="location"] { text-decoration:underline; text-underline-offset:8px; }
@media(max-width:999px) {
  .site-header { height:80px; gap:var(--space-4); }
  .site-header__nav { display:none; }
  .site-header__actions { margin-left:auto; }
  main { padding-top:80px; }
  html { scroll-padding-top:100px; }
}
@media(max-width:640px) {
  .site-header { height:76px; padding-inline:var(--space-4); gap:var(--space-2); }
  .site-wordmark { gap:var(--space-1); }
  .site-wordmark__mark { font-size:var(--text-lg); }
  .site-wordmark__name { font-size:12px; letter-spacing:.08em; }
  .site-header__actions { gap:var(--space-2); }
  .site-header .site-header__tool, .site-menu { font-size:12px; padding-inline:var(--space-3); gap:var(--space-2); }
  main { padding-top:76px; }
  .overlay { padding:112px var(--space-6) var(--space-8); gap:var(--space-8); }
  .overlay__nav ul { gap:var(--space-3); }
  .overlay__nav a { font-family:var(--font-body); font-size:var(--text-lg); font-weight:500; text-transform:none; }
}
.overlay { inset:96px 0 0; display:block; padding:0; background:rgba(21,21,20,.16); }
.menu-panel { position:absolute; top:var(--space-4); right:clamp(var(--space-6),4vw,var(--space-16)); width:min(420px,calc(100% - 48px)); max-height:calc(100dvh - 128px); overflow-y:auto; display:grid; gap:var(--space-8); padding:var(--space-8); background:var(--color-ink); color:var(--on-ink); border:1px solid var(--border-ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.menu-panel .overlay__nav ul { gap:var(--space-3); }
.menu-panel .overlay__nav a { font-family:var(--font-body); font-size:var(--text-lg); font-weight:500; line-height:1.4; text-transform:none; letter-spacing:0; }
.menu-panel .overlay__side { padding-top:var(--space-5); border-top:1px solid var(--border-ink); gap:var(--space-2); }
.menu-panel .overlay__side a { font-size:var(--text-xs); overflow-wrap:anywhere; }
.menu-panel .overlay__label { font-size:var(--text-xs); margin:0; }
@media(max-width:999px) { .overlay { inset-block-start:80px; } .menu-panel { max-height:calc(100dvh - 112px); } }
@media(max-width:640px) {
  .overlay { inset-block-start:76px; padding:0; }
  .menu-panel { top:var(--space-3); right:var(--space-4); width:calc(100% - 32px); padding:var(--space-6); gap:var(--space-6); max-height:calc(100dvh - 100px); }
}
@media(max-width:360px) {
  .site-wordmark { flex-direction:column; align-items:flex-start; gap:2px; }
  .site-wordmark__mark { font-size:22px; }
}

/* Expressive section rhythm, balanced by quiet working surfaces. */
:root {
  --color-cobalt: #3547d9;
  --color-cobalt-hover: #2838b6;
  --color-lilac: #eae8f7;
  --color-logo-band: #e2e8f2;
  --color-on-cobalt: #ffffff;
  --color-on-cobalt-muted: #e0e4ff;
}
.hero__title .hero__editorial { color:var(--color-cobalt); }
#services { background:var(--color-lilac); }
.expertise-index { color:var(--color-cobalt); }
#brands { background:var(--color-logo-band); border-color:transparent; }
.brand-reel__toggle { color:var(--color-text); }
#identity { background:var(--color-lilac); }
#identity .section__head .kicker { color:var(--color-cobalt); }
#partnerships { background:var(--color-cobalt); color:var(--color-on-cobalt); }
#partnerships .kicker,
#partnerships .section__lede,
#partnerships .engagements p { color:var(--color-on-cobalt-muted); }
#partnerships .engagements article { border-color:rgb(255 255 255 / .3); }
.site-header .site-header__tool { border-color:var(--color-cobalt); color:var(--color-cobalt); }
.site-header .site-header__tool:hover,
.site-header .site-header__tool[aria-current="location"] { background:var(--color-lilac); border-color:var(--color-cobalt); color:var(--color-cobalt); }

/* A shorter, quieter enquiry: no nested dark card or repeated introduction. */
#intake {
  --on-ink:var(--color-text);
  --on-ink-muted:var(--color-text-muted);
  --border-ink:var(--color-border);
  background:var(--color-bg);
  color:var(--color-text);
  border-top:1px solid var(--color-border);
}
.contact-clean .intake__grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(var(--space-10),7vw,var(--space-24)); }
.contact-clean .intake__copy .kicker { color:var(--color-cobalt); margin-bottom:var(--space-5); }
.contact-clean .intake__copy h2 { margin-bottom:var(--space-6); }
.contact-clean .intake__copy > p:not(.kicker) { max-width:34ch; font-size:var(--text-base); line-height:1.7; }
.contact-clean__email { display:inline-block; color:var(--color-text); font-size:var(--text-sm); padding-block:var(--space-2); text-decoration:underline; text-underline-offset:var(--space-1); overflow-wrap:anywhere; }
.contact-clean .intake,
.contact-clean .intake-result { background:transparent; border:0; border-top:1px solid var(--color-text); border-radius:0; padding:var(--space-8) 0 0; min-width:0; gap:var(--space-6); }
.contact-clean .field label,
.contact-clean .field legend { font-weight:500; font-size:var(--text-sm); }
.contact-clean .field input,
.contact-clean .field select,
.contact-clean .field textarea { background:var(--color-surface); border-color:var(--color-border); border-radius:var(--radius-sm); color:var(--color-text); font-size:var(--text-base); }
.contact-clean .field input:focus-visible,
.contact-clean .field select:focus-visible,
.contact-clean .field textarea:focus-visible { outline-color:var(--color-cobalt); border-color:var(--color-cobalt); }
.contact-clean .chip { color:var(--color-text-muted); background:transparent; border-color:var(--color-border); font-weight:400; }
.contact-clean .chip:hover { border-color:var(--color-cobalt); color:var(--color-cobalt); }
.contact-clean .chip[aria-pressed="true"] { color:var(--color-cobalt); background:var(--color-lilac); border-color:var(--color-cobalt); }
.contact-clean__optional { border-block:1px solid var(--color-border); }
.contact-clean__optional summary { cursor:pointer; padding-block:var(--space-4); font-size:var(--text-sm); }
.contact-clean__optional summary span { color:var(--color-text-muted); margin-left:var(--space-1); }
.contact-clean__optional-fields { display:grid; gap:var(--space-6); padding-block:var(--space-3) var(--space-6); }
.contact-clean__submit { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4); }
.contact-clean__submit .field__hint { margin:0; max-width:24ch; font-size:var(--text-xs); }
.contact-clean .btn--rust { background:var(--color-cobalt); border-color:var(--color-cobalt); color:var(--color-on-cobalt); }
.contact-clean .btn--rust:hover { background:var(--color-cobalt-hover); border-color:var(--color-cobalt-hover); }
.contact-clean .btn--ghost-light { color:var(--color-text); border-color:var(--color-border); }
.contact-clean .intake-result h3 { font-family:var(--font-body); text-transform:none; letter-spacing:-.03em; }
.contact-clean .intake__error { background:var(--color-surface-offset); color:var(--color-text); }
.contact-clean .intake-result__hint { color:var(--color-cobalt); }
@media(max-width:860px) {
  .contact-clean .intake__grid { grid-template-columns:1fr; gap:var(--space-10); }
  .contact-clean .intake__copy > p:not(.kicker) { max-width:48ch; }
}

/* Category-led services and larger, more readable studio copy. */
.expertise-list article { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--space-12); }
.expertise-list article p { grid-column:auto; font-size:clamp(1.0625rem,1.25vw,1.25rem); line-height:1.65; max-width:48ch; }
.expertise-list h3 { font-size:clamp(1.375rem,2vw,1.75rem); letter-spacing:-.025em; }
.studio-clean__grid { grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:var(--space-12); }
.studio-clean__grid > .kicker { font-size:var(--text-base); letter-spacing:.04em; }
.studio-clean p:not(.kicker) { font-size:clamp(1.125rem,1.65vw,1.5rem); line-height:1.65; max-width:48ch; color:#dddcd6; margin-bottom:0; }
.wizard__progress li { font-size:var(--text-sm); text-transform:none; letter-spacing:0; font-weight:500; padding-top:var(--space-4); }
@media(max-width:700px) {
  .expertise-list article { grid-template-columns:1fr; gap:var(--space-3); }
  .studio-clean__grid { grid-template-columns:1fr; gap:var(--space-6); }
  .studio-clean p:not(.kicker) { font-size:1.125rem; }
}

/* Project and contact details are the final panel, not a second enquiry. */
.onboarding-finish h3 { font-family:var(--font-body); font-size:var(--text-lg); font-weight:500; letter-spacing:-.025em; margin-bottom:var(--space-3); }
.onboarding-finish p { color:var(--color-text-muted); max-width:62ch; line-height:1.65; }
.onboarding-look { border-block:1px solid var(--color-border); }
.onboarding-look > summary { cursor:pointer; font-size:var(--text-sm); padding-block:var(--space-4); font-weight:500; }
.onboarding-look .kit { margin-block:var(--space-4); }
#wizard #intake { background:transparent; border:0; padding:0; }
#wizard #intake .container { width:100%; max-width:none; padding:0; margin:0; }
#wizard #intake .intake__grid { display:block; }
#wizard #intake .intake,
#wizard #intake .intake-result { border:0; padding:var(--space-3) 0 0; }
#wizard #intake .kicker--light { color:var(--color-cobalt); }
#wizard .contact-clean__optional-fields { padding:0; }
#wizard .contact-clean__optional-fields > .field-row { grid-template-columns:1fr; }
#wizard .onboarding-contact-fields { border-top:1px solid var(--color-border); padding-top:var(--space-6); }
.detected-products__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.product-choice { display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:var(--space-3); gap:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); }
.product-choice img { width:100%; aspect-ratio:1; object-fit:contain; background:var(--color-surface); }
.product-choice span { font-size:var(--text-sm); font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.product-choice small { font-size:var(--text-xs); color:var(--color-text-muted); }
.product-search { margin-bottom:var(--space-4); }
.detected-images { margin-block:var(--space-6); padding-block:var(--space-6); border-block:1px solid var(--color-border); }
.detected-images__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); margin-block:var(--space-4); }
.image-choice { min-width:0; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; }
.image-choice.is-selected { outline:2px solid var(--accent); outline-offset:1px; }
.image-choice__select { display:flex; flex-direction:column; align-items:stretch; width:100%; text-align:left; }
.image-choice__select img { width:100%; aspect-ratio:1; object-fit:contain; background:var(--color-surface); }
.image-choice__state { padding:var(--space-2) var(--space-3); font-size:var(--text-xs); }
.image-choice__hero { display:block; padding:var(--space-2) var(--space-3); width:100%; min-height:44px; text-align:left; border-top:1px solid var(--color-border); font-size:var(--text-xs); text-decoration:underline; text-underline-offset:3px; }
.image-choice__hero:disabled { text-decoration:none; color:var(--color-text-muted); cursor:default; }
.image-choice__select:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:640px) { .detected-images__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.product-choice[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:1px; }
.product-choice:hover { border-color:var(--accent); }
@media(max-width:640px) { .detected-products__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }