/* =====================================================================
   Studio XD — Site & component styles
   Translated from the Studio XD.dc.html design and the core component
   library (Button, Eyebrow). Structure comes from hairline borders and
   whitespace, not heavy shadows.
   ===================================================================== */

body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Full-bleed bands keep their background edge-to-edge with an inner container */
.band--inverse {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.band--alt {
  background: var(--bg-page-alt);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* Section anchors clear the sticky header when navigated to */
[id] { scroll-margin-top: 84px; }
#top { scroll-margin-top: 0; }

/* A two-column editorial split that collapses gracefully */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(44px, 6vw, 100px);
  align-items: start;
}

/* ---------------------------------------------------------------------
   Eyebrow — small uppercase mono kicker above headlines
   --------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--inverse { color: rgba(255, 255, 255, 0.55); }

/* ---------------------------------------------------------------------
   Button — editorial, restrained. Black leads (primary);
   purple is the rare accent.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

/* Sizes */
.btn--sm { gap: 6px; padding: 8px 14px;  font-size: var(--text-sm); }
.btn--lg { gap: 10px; padding: 15px 28px; font-size: var(--text-md); }

/* Icon slot scales with size */
.btn__icon { display: inline-flex; width: 17px; height: 17px; }
.btn--sm .btn__icon { width: 15px; height: 15px; }
.btn--lg .btn__icon { width: 19px; height: 19px; }
.btn__icon svg { width: 100%; height: 100%; display: block; }

/* Variants */
.btn--primary { background: var(--black); color: var(--white); }
.btn--primary:hover { background: var(--warm-800); }

.btn--accent { background: var(--accent); color: var(--text-on-accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn--secondary {
  background: var(--white);
  color: var(--text-strong);
  border-color: var(--border-default);
}
.btn--secondary:hover { background: var(--warm-50); border-color: var(--warm-900); }

.btn--ghost { background: transparent; color: var(--text-strong); }
.btn--ghost:hover { background: var(--warm-100); }

/* ---------------------------------------------------------------------
   Header — sticky, transparent at rest, translucent + blurred on scroll
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled {
  background: rgba(250, 249, 247, 0.72);
  border-bottom-color: var(--border-subtle);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.nav-links {
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
}
.nav-link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-standard);
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { width: 100%; }

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

/* ---------------------------------------------------------------------
   Brand lockup — the "Studio✕" wordmark (black on light surfaces)
   --------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
}
.brand picture { display: inline-flex; }
.brand__logo { display: block; height: 22px; width: auto; }
.site-footer .brand__logo { height: 20px; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  padding-block: clamp(90px, 15vh, 180px) clamp(80px, 11vw, 150px);
}
.hero__title {
  margin-top: 30px;
  font-size: var(--display-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-display);
  color: var(--text-strong);
  max-width: 17ch;
  text-wrap: balance;
}
.hero__accent { color: var(--accent); }
.hero__lede {
  margin-top: 36px;
  max-width: 54ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: 44px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   The shift — inverse manifesto
   --------------------------------------------------------------------- */
.shift__eyebrow { margin-bottom: clamp(48px, 6vw, 84px); }
.shift__lead {
  max-width: 20ch;
  font-size: var(--display-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
}
.shift__body {
  max-width: 48ch;
  margin-top: clamp(44px, 5.5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.shift__body p {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.74);
  text-wrap: pretty;
}
.shift__kicker {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(44px, 4.5vw, 60px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  /* Measure for the large display statement. Use a fixed width, not `ch`:
     the font-size lives on the child <p>, so `ch` here would resolve against
     this wrapper's inherited 16px and collapse the column to ~240px. */
  max-width: 40rem;
}
.shift__kicker p {
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   Section headers (shared)
   --------------------------------------------------------------------- */
.section-head { max-width: 44ch; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head h2 {
  margin-top: 22px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.band--inverse .section-head h2 { color: var(--white); }

/* ---------------------------------------------------------------------
   How we partner — numbered editorial rows
   --------------------------------------------------------------------- */
.partner-list { --row-x: clamp(14px, 1.8vw, 24px); }
.partner-row {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: baseline;
  padding: clamp(30px, 3.2vw, 48px) var(--row-x);
  margin-inline: calc(-1 * var(--row-x));
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background var(--dur-slow) var(--ease-standard);
}
.partner-row:hover { background: var(--surface-sunken); }
.partner-row__head { display: flex; gap: 18px; align-items: baseline; }
.partner-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
}
.partner-row__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.partner-row__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.partner-list__end {
  border-top: 1px solid var(--border-subtle);
  margin-inline: calc(-1 * var(--row-x));
}

@media (max-width: 640px) {
  .partner-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------------------------------------------------------------
   Built by operators — inverse split
   --------------------------------------------------------------------- */
.team__title {
  margin-top: 26px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--white);
  max-width: 12ch;
  text-wrap: balance;
}
.team__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 52ch;
}
.team__copy p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   What we bring — capability rows
   --------------------------------------------------------------------- */
.cap-list { border-top: 1px solid var(--border-subtle); }
.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 72px);
  align-items: baseline;
  padding-block: clamp(26px, 2.8vw, 40px);
  border-bottom: 1px solid var(--border-subtle);
}
.cap-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
}
.cap-row__desc {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 44ch;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .cap-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------------
   Qualification — "Not every idea is the right fit."
   --------------------------------------------------------------------- */
.qualify__title {
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--text-strong);
  max-width: 13ch;
  text-wrap: balance;
}
.qualify__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 50ch;
}
.qualify__copy p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Contact — inverse band with form + success state
   --------------------------------------------------------------------- */
.contact__title {
  margin-top: 22px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--white);
  max-width: 15ch;
  text-wrap: balance;
}
.contact__lede {
  margin-top: 22px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.66);
  max-width: 44ch;
  text-wrap: pretty;
}
.contact__email {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--purple-400);
  border-bottom: 1px solid rgba(173, 85, 249, 0.4);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.contact__email:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

.contact__formlabel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-error {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #ff9b9b;
}

/* Dark-surface fields (tuned for the inverse contact band) */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.field__control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
textarea.field__control { resize: vertical; min-height: 116px; }
.field__control::placeholder { color: rgba(255, 255, 255, 0.34); }
.field__control:focus {
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px rgba(149, 28, 247, 0.35);
}

.contact-success {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 48px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-success__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--white);
}
.contact-success__body {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-md);
  line-height: 1.6;
}

.is-hidden { display: none !important; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-subtle); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(40px, 5vw, 64px);
}
.site-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------
   Scroll reveal — fade + small upward translate. Subtle, purposeful.
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-entrance),
              transform var(--dur-reveal) var(--ease-entrance);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { transform: none; }
}