/* ============================================================
   Doubleslash Studio — Base reset + production class library
   The studio's real site classes, verbatim from the production
   stylesheet, referencing the design tokens. Consumers can use
   these classes directly OR the React components (which mirror
   them). Presentation only — no layout assumptions beyond the
   documented utilities.
   ============================================================ */

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--magenta); color: var(--white); }
:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; }

/* ---- Layout utilities ------------------------------------- */
.ds-container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.ds-narrow { max-width: 900px; }

/* ---- Labels ----------------------------------------------- */
.ds-eyebrow {
  font: var(--fw-medium) var(--fs-eyebrow) var(--f-body); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--magenta); margin: 0 0 24px;
}
.ds-kicker { font: var(--fw-ui) var(--fs-ui) var(--f-ui); text-transform: uppercase; letter-spacing: var(--track-kicker); margin: 0 0 18px; }
.ds-kicker--electric { color: var(--electric); }
.ds-kicker--magenta { color: var(--magenta); }
.ds-kicker--burgundy { color: var(--burgundy); }
.ds-kicker--orchid { color: var(--orchid); }
.ds-kicker--muted { color: rgba(45, 0, 69, 0.5); }
.ds-mark {
  font: var(--fw-head) 28px var(--f-head); letter-spacing: -0.04em;
  background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons ---------------------------------------------- */
.ds-btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: none;
  font: var(--fw-ui) var(--fs-btn) var(--f-ui); color: var(--white); background: var(--magenta);
  padding: 16px 32px; border-radius: var(--radius);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.ds-btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-btn); }
.ds-btn:disabled { opacity: 0.6; transform: none; box-shadow: none; cursor: default; }
.ds-btn--sm { font-size: var(--fs-btn-sm); padding: 11px 22px; border-radius: var(--radius-sm); }
.ds-btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.32); }

.ds-link {
  font: var(--fw-ui) var(--fs-ui) var(--f-ui); color: var(--electric); text-decoration: none;
  border-bottom: 2px solid rgba(85, 0, 244, 0.3); padding-bottom: 2px;
}
.ds-link--magenta { color: var(--magenta); border-bottom-color: rgba(205, 35, 108, 0.3); }

/* ---- Slash list ------------------------------------------- */
.ds-slash-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ds-slash-list li { font: var(--fw-ui) var(--fs-ui) var(--f-ui); color: var(--ink); padding-left: 24px; position: relative; }
.ds-slash-list li::before { content: "/"; position: absolute; left: 0; color: var(--electric); }
.ds-slash-list--magenta li::before { color: var(--magenta); }

/* ---- Headings --------------------------------------------- */
.ds-section-h { font: var(--fw-head) var(--fs-h2) / 1.1 var(--f-head); color: var(--ink); letter-spacing: var(--track-head); margin: 0 0 16px; }
.ds-lead { font: var(--fw-body) var(--fs-body) / 1.6 var(--f-body); color: var(--body-ink); margin: 0 0 26px; }

/* ---- Cards ------------------------------------------------ */
.ds-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ds-card--pad { padding: 36px 38px; }
.ds-service-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 30px; border-left: 3px solid var(--electric); }
.ds-service-card--magenta { border-left-color: var(--magenta); }
.ds-service-card h3 { font: var(--fw-bold) var(--fs-h3) var(--f-head); color: var(--ink); margin: 0 0 8px; }
.ds-service-card p { font: var(--fw-body) var(--fs-body-sm) / 1.62 var(--f-body); color: var(--body-ink); margin: 0; }

/* ---- Dark banner ------------------------------------------ */
.ds-banner { position: relative; overflow: hidden; background: var(--ink); }
.ds-banner__mark { position: absolute; font: var(--fw-black) 340px/1 var(--f-head); color: var(--white); opacity: 0.06; letter-spacing: -0.06em; pointer-events: none; }
.ds-banner__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 80px var(--pad); }
.ds-banner__title { font: var(--fw-head) var(--fs-banner) / 1.1 var(--f-head); color: var(--white); letter-spacing: var(--track-head); margin: 0 0 16px; }
.ds-banner__text { font: var(--fw-body) var(--fs-ui) / 1.65 var(--f-body); color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 54ch; }

/* ---- Forms ------------------------------------------------ */
.ds-field { display: flex; flex-direction: column; gap: 8px; }
.ds-field label { font: var(--fw-ui) var(--fs-ui) var(--f-ui); color: var(--ink); }
.ds-control {
  width: 100%; font: var(--fw-body) 17px var(--f-body); color: var(--ink); background: var(--white);
  border: 1.5px solid var(--border-strong); border-radius: 10px; padding: 14px 16px;
}
.ds-control:focus { border-color: var(--electric); outline: none; box-shadow: 0 0 0 3px rgba(85, 0, 244, 0.18); }

/* ---- Stat ------------------------------------------------- */
.ds-stat-value { font: var(--fw-head) var(--fs-stat) / 1 var(--f-head); letter-spacing: var(--track-display); margin: 0 0 10px; background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Reveal animation ------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}