/* ═══════════════════════════════════════════════════════════════════════
   SPARSHATECH — living ink (user-pinned 2026-08-17c)
   Gallery-white paper, book-ink type, SparshaTech indigo.
   A persistent WebGL ink field performs on transparent stage bands
   between solid paper content sections. See webgl.js and the contract
   in index.html.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hankengrotesk.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hankengrotesk-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("assets/fonts/fragmentmono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #faf9f5;
  --paper-band: #f4f2ec;   /* solid content bands */
  --ink: #141310;
  --muted: #575244;        /* secondary text */
  --faint: #6f6a58;        /* metadata, ≥4.5:1 on both papers */
  --line: rgba(20, 19, 16, 0.16);
  --brand: #5865e0;        /* SparshaTech indigo (from the official logo) */
  --brand-deep: #3f4cc4;   /* indigo tuned for small text, ≥4.5:1 on paper */
  --peri: #aeb6f0;         /* periwinkle, emblem/decoration only */
  --peri-text: #7a84e4;    /* periwinkle tuned for the lockup text, ≥3:1 large-bold */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", "Courier New", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 2px 4px rgba(20, 19, 16, 0.07), 0 16px 40px rgba(20, 19, 16, 0.12);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
b, strong { font-weight: 700; }

::selection { background: var(--brand); color: #fff; }

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

.mono {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
}

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.wrap-narrow { max-width: 780px; }

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
}

/* ── the ink field ── */
#ink {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* everything above the ink */
.nav, main, .footer { position: relative; z-index: 1; }

/* ── nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  background: rgba(250, 249, 245, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 0.85rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}
.nav-word {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 1.04rem;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.nav-word b { color: var(--peri-text); font-weight: 700; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}
.nav-links a {
  font-weight: 560;
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--brand); }
.nav-meta { color: var(--faint); white-space: nowrap; }
.nav-cta {
  white-space: nowrap;
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.6rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: #000; transform: translateY(-1px); }

/* ── stages: transparent windows where the ink performs ── */
.stage { position: relative; }
.stage-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  color: var(--faint);
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
  width: 100%;
}
.stage-caption b { font-weight: 400; letter-spacing: 0; }
.stage-caption .hint { color: var(--brand-deep); }
.hint-coarse { display: none; }
@media (pointer: coarse) {
  .hint-fine { display: none; }
  .hint-coarse { display: inline; }
}

/* ── hero ── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-inner {
  width: 100%;
  padding-bottom: 2.4rem;
  /* readability veil over the ink, bottom-anchored */
  position: relative;
}
.hero-h {
  font-family: var(--display);
  font-weight: 830;
  font-stretch: 116%;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 12ch;
}
.hero-sub {
  margin-top: 1.4rem;
  max-width: 44ch;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--muted);
}
.hero-ctas {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.link-quiet {
  font-weight: 620;
  font-size: 1rem;
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.link-quiet:hover { border-bottom-color: var(--brand-deep); color: var(--brand-deep); }

/* ── buttons ── */
.btn {
  display: inline-block;
  font-weight: 650;
  font-size: 1.02rem;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 8px;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ink:active { transform: translateY(0); }
.btn-lg { font-size: 1.1rem; padding: 1rem 1.9rem; }

/* ── solid content bands ── */
.band {
  position: relative;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.hero-stats {
  margin-top: 1.6rem;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--faint);
  max-width: 52ch;
}

section.band { padding-block: clamp(4rem, 8vw, 6.5rem); }
.sec-h {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.sec-lede {
  margin-top: 1rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
  max-width: 58ch;
  font-size: 1.12rem;
  color: var(--muted);
}

/* ── work ── */
.case {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
}
.case + .case { border-top: 1px solid var(--line); }
.case-flip .case-visual { order: 2; }
.case-visual {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.case-body h3 {
  font-family: var(--display);
  font-weight: 790;
  font-stretch: 112%;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.case-kind {
  margin-top: 0.3rem;
  color: var(--brand-deep);
}
.case-body > p:not(.case-kind):not(.case-tech) {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--muted);
}
.case-stats {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.case-stats b { color: var(--ink); font-weight: 700; }
.case-tech { margin-top: 1rem; color: var(--faint); }

/* device frames */
.frame-phone {
  width: min(230px, 74%);
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 0 0 6px #1d1b17, var(--shadow);
  overflow: hidden;
  color: #24211b;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.case:hover .frame-phone { transform: translateY(-5px) rotate(-0.5deg); }
.ph-notch { height: 22px; display: flex; justify-content: center; align-items: center; }
.ph-notch::after {
  content: "";
  width: 64px; height: 7px;
  border-radius: 999px;
  background: rgba(36, 33, 27, 0.14);
}
.ph-body { padding: 0.55rem 0.7rem 0.9rem; }
.ph-video {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(160deg, #e7eef4, #ccdbe7);
  height: 148px;
  padding: 0.6rem;
}
.ph-avatar {
  position: absolute;
  top: 42%; left: 50%;
  translate: -50% -50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #34718f;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.ph-name {
  position: absolute;
  left: 0.6rem; bottom: 0.55rem;
  max-width: 58%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.66rem;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.ph-timer {
  position: absolute;
  right: 0.6rem; top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  background: rgba(36, 33, 27, 0.72);
  color: #fff;
  border-radius: 999px;
  padding: 0.14rem 0.45rem;
}
.ph-self {
  position: absolute;
  right: 0.6rem; bottom: 0.55rem;
  width: 34px; height: 44px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, #b9ccd9, #93aebf);
}
.ph-chips { display: flex; gap: 0.35rem; margin-top: 0.55rem; flex-wrap: wrap; }
.chip {
  font-size: 0.62rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  background: #edf0f2;
  color: #52616d;
}
.chip-ok { background: #e2efe4; color: #3d6b48; }
.ph-controls { margin-top: 0.7rem; display: flex; justify-content: center; gap: 0.7rem; }
.ph-controls i { width: 30px; height: 30px; border-radius: 50%; background: #edf0f2; }
.ph-controls i.end { background: #d9604a; }

.frame-browser {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(35, 40, 50, 0.14);
  color: #2b3038;
  transition: transform 0.4s var(--ease);
}
.case:hover .frame-browser { transform: translateY(-5px); }
.br-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid rgba(35, 40, 50, 0.1);
  background: #f1f2f5;
}
.br-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(35, 40, 50, 0.12); }
.br-bar i:first-child { background: #e08e82; }
.br-bar i:nth-child(2) { background: #e8c987; }
.br-bar i:nth-child(3) { background: #a4c9a0; }
.br-url {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: #5b6472;
  background: #e9ebef;
  border-radius: 6px;
  padding: 0.18rem 0.6rem;
}
.br-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0.8rem;
  padding: 0.9rem;
}
.br-doc {
  border: 1px dashed rgba(35, 40, 50, 0.18);
  border-radius: 8px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #f5f6f8;
}
.doc-line { height: 7px; border-radius: 4px; background: rgba(35, 40, 50, 0.15); }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; }
.w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.br-fields { display: flex; flex-direction: column; gap: 0.4rem; }
.field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(35, 40, 50, 0.13);
  border-radius: 8px;
  padding: 0.38rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5b6472;
  background: #fff;
}
.f-ok {
  width: 11px; height: 6px;
  border-left: 2px solid #3e7a4e;
  border-bottom: 2px solid #3e7a4e;
  rotate: -45deg;
  translate: 0 -2px;
  flex-shrink: 0;
}
.f-review { border-color: #e0a33c; background: #fdf4e4; }
.f-flag {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a34715;
  background: #f7dfc0;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}
.ph-body.kb { padding: 0.7rem 0.75rem 0.95rem; }
.kb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.65rem; }
.kb-title { font-size: 0.72rem; font-weight: 650; color: #6b5d4f; }
.kb-total { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.kb-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.45rem; border-radius: 8px; }
.kb-row:nth-child(odd) { background: #f6f3ec; }
.kb-dot { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.kb-dot.c1 { background: #f7dfc0; }
.kb-dot.c2 { background: #e4eeda; }
.kb-dot.c3 { background: #fbe8d3; }
.kb-dot.c4 { background: #f3d9d3; }
.kb-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #24211b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kb-qty { margin-left: auto; font-family: var(--mono); font-size: 0.6rem; color: #6b5d4f; }
.kb-row.low .kb-qty { color: #c2561f; font-weight: 700; }
.kb-btn {
  margin-top: 0.7rem;
  background: #c2561f;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 650;
  border-radius: 9px;
  padding: 0.5rem;
}

/* ── services: an index, not cards ── */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.svc h3 {
  font-family: var(--display);
  font-weight: 780;
  font-stretch: 110%;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), translate 0.25s var(--ease);
}
.svc:hover h3 { translate: 6px 0; }
.svc-copy p:first-child { color: var(--muted); font-size: 1.02rem; max-width: 56ch; }
.svc-tech { margin-top: 0.7rem; color: var(--faint); }

.process { margin-top: clamp(2.5rem, 5vw, 4rem); }
.process-h {
  font-family: var(--display);
  font-weight: 780;
  font-stretch: 112%;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
}
.steps {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  list-style: none;
}
.steps li {
  break-inside: avoid;
  padding-block: 0.55rem;
  color: var(--muted);
  font-size: 1rem;
  max-width: 56ch;
}
.steps b { color: var(--ink); }

/* ── studio: copy on paper, the globe floating beside it ── */
.studio { border-block: 1px solid var(--line); padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.studio-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.92fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 68vh;
}
.studio-field { min-height: 100%; }
.studio-copy {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
}
.studio-copy p { margin-top: 1.1rem; max-width: 56ch; color: var(--muted); }
.studio-lead { margin-top: 1.7rem; font-size: 1.15rem; color: var(--ink); }
.studio-copy .studio-lead { color: var(--ink); }
.dfn { color: var(--brand-deep); font-style: italic; font-weight: 620; }
.studio-meta { margin-top: 1.6rem; color: var(--faint); }
.quotes-band { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.quote { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.quote blockquote p {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote figcaption { margin-top: 0.9rem; color: var(--faint); }

/* ── faq ── */
.faq .sec-h { margin-bottom: 2rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  font-size: 1.08rem;
  font-weight: 620;
  line-height: 1.4;
  transition: color 0.2s var(--ease);
}
.faq-item summary:hover h3 { color: var(--brand); }
.faq-x {
  position: relative;
  width: 26px; height: 26px;
  flex-shrink: 0;
  transition: rotate 0.3s var(--ease);
}
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--ink);
  border-radius: 2px;
}
.faq-x::before { width: 15px; height: 2.2px; }
.faq-x::after { width: 2.2px; height: 15px; transition: opacity 0.2s var(--ease); }
.faq-item[open] .faq-x { rotate: 90deg; }
.faq-item[open] .faq-x::after { opacity: 0; }
.faq-a { overflow: hidden; }
.faq-item[open] .faq-a { animation: faq-open 0.35s var(--ease); }
@keyframes faq-open {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.faq-a p {
  padding-bottom: 1.4rem;
  max-width: 62ch;
  color: var(--muted);
}

/* ── cta: on the final stage ── */
.cta {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cta-inner {
  width: 100%;
  text-align: center;
  padding-bottom: 3rem;
}
.cta-h {
  font-family: var(--display);
  font-weight: 830;
  font-stretch: 116%;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.cta-p {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.12rem;
}
.cta-actions {
  margin-top: 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── footer ── */
.footer { border-bottom: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: clamp(2.8rem, 5vw, 4rem) 2rem;
}
.f-about .nav-brand { display: inline-flex; }
.f-about p { margin-top: 1rem; max-width: 28ch; color: var(--muted); font-size: 0.98rem; }
.f-head { color: var(--faint); margin-bottom: 0.9rem; }
.f-col a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.24rem;
  font-size: 0.97rem;
  transition: color 0.2s var(--ease);
}
.f-col a:hover { color: var(--brand); }
.f-addr { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; }
.f-social { margin-top: 0.9rem; display: flex; gap: 1.2rem; }
.f-social a { display: inline; }
.f-live { display: none; }
.ink-live .f-live { display: inline; }
.f-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
}

/* ── the sweep: an indigo light passes through headings on hover ── */
@media (hover: hover) {
  .hero-h, .sec-h, .case-body h3, .svc h3, .cta-h {
    background-image: linear-gradient(105deg,
      var(--ink) 0%, var(--ink) 30%,
      var(--brand) 50%,
      var(--ink) 70%, var(--ink) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.9s var(--ease);
  }
  .hero-h:hover, .sec-h:hover, .case-body h3:hover, .svc:hover h3, .cta-h:hover {
    background-position: 33% 0;
  }
}

/* ── reveals ── */
.js .reveal {
  opacity: 0;
  translate: 0 16px;
}
.js .reveal.in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.65s var(--ease), translate 0.65s var(--ease),
              background-position 0.9s var(--ease);
  transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}

/* ── responsive ── */
@media (max-width: 1080px) {
  .nav-meta { display: none; }
}
@media (max-width: 920px) {
  .case, .case-flip { grid-template-columns: 1fr; }
  .case-flip .case-visual { order: 0; }
  .svc { grid-template-columns: 1fr; gap: 0.6rem; }
  .steps { columns: 1; }
  .studio-grid { grid-template-columns: 1fr; min-height: 0; }
  .studio-field { min-height: 46vh; }
  .quotes { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
    }
@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .nav-row { gap: 1rem; padding-block: 0.7rem; }
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: 0.88rem; }
  .nav-cta { padding: 0.55rem 0.9rem; font-size: 0.88rem; }
  .hero-sub { font-size: 1.06rem; }
  .stage-caption { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    }
@media (max-width: 480px) {
  .nav-word { display: none; }
  .nav-links { gap: 0.7rem; }
  .nav-links a { font-size: 0.82rem; }
  .nav-cta { padding: 0.5rem 0.75rem; font-size: 0.82rem; }
  .cta-actions .btn-lg { font-size: 0.98rem; padding: 0.9rem 1.2rem; max-width: 100%; overflow-wrap: anywhere; }
}

/* ── reduced motion: no field, no drift — the page simply reads ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  #ink { display: none; }
  .js .reveal { opacity: 1; translate: 0 0; }
  }

/* print */
@media print {
  .progress, #ink,   .nav { position: static; }
}