/* BSP concept page — /projects/bspny. Spec: website/bspny/SPEC.md §E, §G.
   Six colour tokens only (§E.1); hovers are color-mix of a token, not a new hex.
   System font stack, nothing downloaded. All motion lives in the single
   no-preference block at the end, so reduced motion means none at all. */

:root {
  --bsp-ink: #212121;
  --bsp-teal: #0b373f;
  --bsp-gold: #efc32e;
  --bsp-paper: #f9f9f9;
  --bsp-cyan: #0092b0;
  --bsp-grey: #888888;
  --bsp-gold-hover: color-mix(in srgb, var(--bsp-gold) 88%, #000);
  --bsp-rule-light: color-mix(in srgb, var(--bsp-teal) 15%, transparent);
  --bsp-rule-dark: color-mix(in srgb, var(--bsp-paper) 18%, transparent);
  --bsp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bsp-pad: 96px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bsp-ink);
  color: var(--bsp-paper);
  font: 400 18px/1.55 var(--bsp-font);
}
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bsp-cyan); outline-offset: 2px; }

.bsp-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- concept strip (UC's voice, §H) ---------- */
.uc-note { background: #0c0c0e; color: #f2f2ef; font-size: 14px; line-height: 1.5; }
.uc-note p { max-width: 1392px; }   /* wider than the page so the line fits at 1440 */
.uc-note__links { display: inline-flex; flex-wrap: wrap; column-gap: 16px; margin-left: 12px; }
.uc-note__link {
  display: inline-flex; align-items: center; min-height: 40px;
  color: #f2f2ef; text-underline-offset: 3px;
}
.uc-note__link--uc { text-decoration-color: #e23222; text-decoration-thickness: 2px; }

/* ---------- header ---------- */
.bsp-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bsp-ink);
  border-bottom: 1px solid var(--bsp-rule-dark);
}
.bsp-header__in { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.bsp-mark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.bsp-mark__svg { display: block; height: 22px; width: auto; overflow: visible; }
.bsp-mark__svg text { font: 800 26px var(--bsp-font); fill: var(--bsp-paper); letter-spacing: -0.01em; }
.bsp-mark__gold { fill: var(--bsp-gold); }
.bsp-nav { display: flex; gap: 24px; margin-left: auto; }
.bsp-nav a {
  display: inline-flex; white-space: nowrap; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--bsp-paper); text-decoration: none;
}
.bsp-nav a:hover { text-decoration: underline; text-decoration-color: var(--bsp-gold); text-underline-offset: 6px; }

/* ---------- buttons (§E.4) ---------- */
.bsp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 24px; border: 0; border-radius: 6px;
  background: var(--bsp-gold); color: var(--bsp-ink);
  font: 600 15px/1.2 var(--bsp-font); letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.bsp-btn:hover { background: var(--bsp-gold-hover); }
.bsp-btn--block { width: 100%; }
.bsp-btn--header { white-space: nowrap; }

/* ---------- type ---------- */
.bsp-eyebrow {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bsp-teal);
}
.bsp-hero .bsp-eyebrow, .bsp-eyebrow--gold { color: var(--bsp-gold); }
.bsp-h1 {
  margin-top: 16px;
  font-size: clamp(38px, 4.5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
}
.bsp-h2 {
  margin-top: 12px;
  font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
}

/* ---------- hero ---------- */
.bsp-hero { padding: 40px 0 72px; }
.bsp-hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px; align-items: start;
}
.bsp-hero__text { grid-column: 1 / 8; padding-top: 24px; }
.bsp-lead { grid-column: 8 / 13; }
.bsp-lede { margin-top: 20px; max-width: 34em; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.55; }
.bsp-facts {
  margin-top: 32px; padding-left: 20px;
  border-left: 3px solid var(--bsp-gold);
  display: grid; gap: 8px;
}
.bsp-facts li { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; }
.bsp-hero__small { margin-top: 28px; font-size: 14px; line-height: 1.5; }

/* ---------- lead box (§E.5, §F) ---------- */
.bsp-lead {
  background: var(--bsp-paper); color: var(--bsp-ink);
  border-radius: 12px; padding: 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.bsp-lead__title { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--bsp-teal); }
.bsp-lead__sub { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--bsp-teal); }
.bsp-form { margin-top: 20px; display: grid; gap: 16px; }
.bsp-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bsp-field { display: grid; gap: 8px; min-width: 0; }
.bsp-field label { font-size: 15px; font-weight: 600; line-height: 1.2; }
.bsp-hint { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--bsp-teal); }
.bsp-field input, .bsp-field select, .bsp-field textarea, .bsp-done__copy {
  width: 100%; min-width: 0; height: 48px; padding: 0 14px;
  font: 400 16px/1.4 var(--bsp-font); color: var(--bsp-ink);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--bsp-teal) 30%, transparent);
  border-radius: 6px;
}
.bsp-field textarea, .bsp-done__copy { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.bsp-field input::placeholder, .bsp-field textarea::placeholder { color: var(--bsp-grey); }
.bsp-field input:focus, .bsp-field select:focus, .bsp-field textarea:focus {
  border: 2px solid var(--bsp-teal); padding-left: 13px;
}
.bsp-field textarea:focus { padding-top: 11px; }
.bsp-field.is-invalid input, .bsp-field.is-invalid select {
  border-left: 2px solid var(--bsp-gold); box-shadow: inset 2px 0 0 var(--bsp-gold);
}
.bsp-err { font-size: 14px; line-height: 1.4; color: var(--bsp-ink); }
.bsp-err:empty { display: none; }
.bsp-form .bsp-btn { margin-top: 4px; }
.bsp-lead__note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--bsp-teal); }
.bsp-lead__call { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--bsp-teal); font-weight: 600; }

.bsp-done { margin-top: 20px; display: grid; gap: 12px; }
.bsp-done[hidden], .bsp-form[hidden] { display: none; }
.bsp-done__title { font-size: 19px; line-height: 1.3; color: var(--bsp-teal); }
.bsp-done p { font-size: 15px; line-height: 1.45; }
.bsp-done__copy { min-height: 168px; font-size: 14px; }
.bsp-done__restart {
  display: inline-flex; align-items: center; justify-self: start; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--bsp-teal);
}

/* ---------- bands ---------- */
.bsp-band { padding: var(--bsp-pad) 0; }
.bsp-band--light { background: var(--bsp-paper); color: var(--bsp-ink); }
.bsp-band--dark { background: var(--bsp-ink); color: var(--bsp-paper); }
.bsp-band--light .bsp-h2 { color: var(--bsp-teal); }
.bsp-band--teal { background: var(--bsp-teal); color: var(--bsp-paper); }

/* ---------- mascot band (§L) ----------
   Two columns at desktop, text first. The stage holds a still SVG and a canvas
   in the same box; mascot.js shows the canvas and hides the SVG only when it
   has actually built a scene, so the default markup is the content. */
.bsp-mascot__in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; column-gap: 48px;
}
.bsp-mascot__h2 { color: var(--bsp-paper); }
.bsp-mascot__sub {
  margin-top: 16px; max-width: 46ch;
  font-size: clamp(17px, 1.3vw, 18px); line-height: 1.55;
  color: color-mix(in srgb, var(--bsp-paper) 82%, var(--bsp-teal));
}
.bsp-mascot__stage { display: grid; }
/* The still and the canvas occupy the same cell, so swapping them cannot
   reflow the page or change the band's height mid-load. */
.bsp-mascot__art, .bsp-mascot__canvas {
  grid-area: 1 / 1;
  width: 100%; aspect-ratio: 640 / 260;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bsp-teal) 88%, #000);
}
.bsp-mascot__art[hidden], .bsp-mascot__canvas[hidden] { display: none; }
.bsp-mascot__svg { display: block; width: 100%; height: 100%; }
.bsp-mascot__canvas { display: block; }
.bsp-mascot__cap {
  grid-area: 2 / 1; margin-top: 14px;
  font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--bsp-paper) 62%, var(--bsp-teal));
}

/* ---------- services ---------- */
.bsp-services { margin-top: 40px; border-top: 1px solid var(--bsp-rule-light); }
.bsp-service {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px;
  padding: 24px 0; border-bottom: 1px solid var(--bsp-rule-light);
}
.bsp-service__label {
  grid-column: 1 / 5; align-self: start; justify-self: start;
  padding: 10px 0;
  font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--bsp-teal);
  text-decoration: underline; text-decoration-color: var(--bsp-gold);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.bsp-service__label::after { content: "\2192" / ""; display: inline-block; margin-left: 10px; color: var(--bsp-teal); }
.bsp-service__text { grid-column: 5 / 13; align-self: center; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.55; }
.bsp-caption { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--bsp-teal); }

/* ---------- proof ---------- */
.bsp-award { color: var(--bsp-paper); }
.bsp-award__sub {
  margin-top: 10px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.3;
  color: var(--bsp-gold);
}
.bsp-proof {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.bsp-proof > * { padding-top: 20px; border-top: 1px solid var(--bsp-rule-dark); }
.bsp-proof__list { display: grid; gap: 16px; font-size: 16px; line-height: 1.5; }
.bsp-quote__text { font-size: 18px; line-height: 1.55; }
.bsp-quote__text::before { content: "\201C" / ""; }
.bsp-quote__text::after { content: "\201D" / ""; }
.bsp-quote__who { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.bsp-cases__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 600;
  text-decoration-color: var(--bsp-gold); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.bsp-cases__names { margin-top: 8px; font-size: 16px; line-height: 1.6; }

/* ---------- closing line ---------- */
.bsp-again { padding: 64px 0; }
.bsp-again__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.bsp-again__line { max-width: 40em; font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--bsp-teal); }

/* ---------- footer ---------- */
.bsp-foot { padding: 72px 0 32px; background: var(--bsp-ink); color: var(--bsp-paper); }
.bsp-foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bsp-foot__email {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; text-decoration: none;
}
.bsp-foot__email:hover { text-decoration: underline; text-decoration-color: var(--bsp-gold); }
.bsp-foot__phones { display: grid; justify-items: end; font-size: 16px; font-weight: 700; line-height: 1.5; }
.bsp-foot__mark { margin-top: 64px; display: grid; justify-items: center; }
.bsp-mark--big { display: block; width: 100%; max-width: 808px; }
.bsp-mark--big .bsp-mark__svg { width: 100%; height: auto; }
.bsp-foot__tagline {
  justify-self: center; width: 100%; max-width: 808px; text-align: right;
  margin-top: 6px; padding-right: 9%;
  font-size: clamp(18px, 2.4vw, 32px); font-style: italic; font-weight: 300; line-height: 1.2;
}
.bsp-foot__links { margin-top: 56px; display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 14px; }
.bsp-foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.bsp-foot__copy { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.uc-byline {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bsp-rule-dark);
  font-size: 14px; line-height: 1.5; color: #f2f2ef;
}
.uc-byline a {
  display: inline-flex; align-items: center; min-height: 40px; margin-left: 4px;
  text-decoration-color: #e23222; text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* ---------- 768 and below (§E.8) ---------- */
@media (max-width: 1023px) {
  :root { --bsp-pad: 72px; }
  .bsp-header__in { gap: 18px; }
  .bsp-mark__svg { height: 18px; }
  .bsp-nav { gap: 16px; }
  .bsp-hero__grid { display: block; }
  .bsp-mascot__in { grid-template-columns: 1fr; row-gap: 32px; }
  .bsp-mascot__sub { max-width: none; }
  /* A one-column canvas is a third of the desktop width, and at 640:260 that
     leaves the mascot about 70px tall. Give the canvas more height and let
     mascot.js shorten the walk to suit; the still SVG keeps its own ratio. */
  .bsp-mascot__canvas { aspect-ratio: 20 / 13; }
  .bsp-hero__text { padding-top: 8px; }
  .bsp-lead { max-width: 560px; margin: 48px auto 0; }
  .bsp-proof { grid-template-columns: 1fr 1fr; }
  .bsp-quote { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .bsp-nav { display: none; }
  .bsp-header__in { justify-content: space-between; min-height: 56px; gap: 12px; }
  .bsp-mark__svg { height: 16px; }
  .bsp-btn--header { padding: 12px 14px; }
  .bsp-again__in { display: grid; justify-items: stretch; }
  .bsp-again .bsp-btn { width: 100%; }
  .bsp-service { display: block; }
  .bsp-service__text { margin-top: 4px; }
  .bsp-proof { grid-template-columns: 1fr; }
  .bsp-quote { grid-row: auto; }
  .bsp-foot__phones { justify-items: start; }
  .bsp-foot__tagline { padding-right: 0; }
}
@media (max-width: 480px) {
  .uc-note__links { display: flex; margin-left: 0; }
  :root { --bsp-pad: 56px; }
  .bsp-container { padding: 0 16px; }
  .bsp-lead { padding: 24px; margin-top: 40px; }
  .bsp-form__pair { grid-template-columns: 1fr; }
}

/* ---------- motion (§G): the ONLY place anything moves ----------
   Outside this query nothing is declared, so the default state is static
   and fully visible without JS: reduced motion = no motion, full content. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .bsp-btn { transition: background-color 120ms ease; }
  .bsp-header, .bsp-hero__text, .bsp-lead {
    animation: bsp-rise 400ms cubic-bezier(.2, .7, .2, 1) both;
  }
  .bsp-hero__text { animation-delay: 0ms; }
  .bsp-lead { animation-delay: 80ms; }
  .bsp-header { animation-delay: 160ms; }
  @keyframes bsp-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}