/* ═══════════════════════════════════════════════════════════
   Digate inner pages — full-bleed agency UI
   Trends: edge-to-edge shell · monumental type · index rows ·
   editorial chapters · media-first work · opaque panels only
   where interaction needs a surface
   ═══════════════════════════════════════════════════════════ */

.page-w.is-inner {
  --in-r: 0.85em;
  --in-pad: clamp(1.25rem, 3.2vw, 3rem);
  --in-gap: clamp(0.85rem, 1.4vw, 1.35rem);
  --in-y: clamp(3rem, 7vw, 5.5rem);
  /* Glass — light darken only */
  --in-panel: color-mix(in srgb, #080808 42%, transparent);
  --in-panel-2: color-mix(in srgb, #0a0a0a 48%, transparent);
  --in-panel-accent: color-mix(in srgb, #0c0914 46%, transparent);
  --in-panel-solid: color-mix(in srgb, #080808 78%, transparent);
  --in-line: color-mix(in srgb, #ffffff 24%, transparent);
  --in-line-soft: color-mix(in srgb, #ffffff 15%, transparent);
  --in-line-accent: color-mix(in srgb, var(--violet) 50%, #ffffff 18%);
  --in-muted: #c8c8c8;
  --in-label: #f0f0f0;
  --in-ink: #ffffff;
  --in-ink-dim: #f2f2f2;
  --in-ink-soft: #e0e0e0;
  --in-ink-faint: #d0d0d0;
  --in-ink-mute2: #e8e8e8;
  --in-panel-muted: #c8c8c8;
  --in-media-bg: #0e0e0e;
  --in-read: min(42rem, 100%);
  --in-shine: color-mix(in srgb, #ffffff 12%, transparent);
}

html.light .page-w.is-inner {
  --in-panel: color-mix(in srgb, #ffffff 18%, transparent);
  --in-panel-2: color-mix(in srgb, #ffffff 20%, transparent);
  --in-panel-accent: color-mix(in srgb, #ffffff 22%, transparent);
  --in-panel-solid: color-mix(in srgb, #ffffff 38%, transparent);
  --in-line: color-mix(in srgb, #080808 32%, transparent);
  --in-line-soft: color-mix(in srgb, #080808 18%, transparent);
  --in-line-accent: color-mix(in srgb, var(--violet) 38%, #080808 22%);
  --in-muted: #2a2a2a;
  --in-label: #0a0a0a;
  --in-ink: #080808;
  --in-ink-dim: #101010;
  --in-ink-soft: #1a1a1a;
  --in-ink-faint: #2a2a2a;
  --in-ink-mute2: #161616;
  --in-media-bg: #ecece8;
  --in-panel-ink: #080808;
  --in-panel-muted: #2a2a2a;
  --in-shine: color-mix(in srgb, #ffffff 40%, transparent);
}

/* Match homepage display type — Unbounded (loaded on all pages) */
.page-w.is-inner :is(h1, h2, h3, .in-hero__title, .in-quote, .in-quote-block, .in-strip__item, .in-faq__title, .in-brief-tag, .in-story__year) {
  font-family: var(--font-display);
  font-weight: 300;
}

.in {
  position: relative;
  width: 100%;
}

/* Full viewport width — only side padding, no narrow max-width */
.in-wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--in-pad);
  box-sizing: border-box;
}

/* ── Hero ── */
.in-hero {
  min-height: auto;
  display: flex;
  align-items: flex-end;
  padding: clamp(6.5rem, 12vh, 8.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--in-line-soft);
}

.in-hero__inner {
  width: 100%;
}

.in-hero__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5em;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}

.in-hero__idx {
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.in-hero__crumb {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95em;
  font-weight: 400;
  opacity: 1;
  color: var(--in-label);
}

.in-hero__lede {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 48rem;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  font-weight: 300;
  line-height: 1.5;
  opacity: 1;
  color: var(--in-ink-dim);
}

.in-zone__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95em;
  font-weight: 400;
  opacity: 1;
  color: var(--in-label);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.in-hero__title-w {
  max-width: none;
  width: 100%;
  overflow: visible;
}

.in-hero__title-move {
  display: block;
  will-change: transform;
}

.in-hero__title {
  font-size: clamp(2.5rem, 8.5vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: none;
  width: 100%;
}

/* Long RU titles (process etc.) — keep under the HUD */
.pg-process .in-hero__title,
.pg-technologies .in-hero__title {
  font-size: clamp(2.35rem, 7.2vw, 5.5rem);
}

.in-body {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.in-zone {
  padding-block: var(--in-y);
  border-bottom: 1px solid var(--in-line-soft);
}

.in-zone:last-of-type {
  border-bottom: 0;
}

/* ── Surfaces — translucent + hairline, not flat grey cards ── */
.in-panel,
.in-mosaic__cell,
.in-board__cell,
.in-case,
.in-gain,
.in-model {
  position: relative;
  isolation: isolate;
  background: var(--in-panel);
  border: 1px solid var(--in-line);
  border-radius: var(--in-r);
  box-shadow: inset 0 1px 0 var(--in-shine);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  transition:
    border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-panel {
  padding: clamp(1.35em, 2.2vw, 2em) clamp(1.35em, 2.5vw, 2.25em);
  color: var(--in-ink);
  overflow: hidden;
}

/* Privacy — hero left like other pages; policy body centered reading column */
.page-w.pg-privacy .in-hero__title {
  /* Single-word RU titles must shrink, not wrap by letter (SplitText .char) */
  white-space: nowrap;
  max-width: 100%;
  font-size: clamp(1.65rem, 6.2vw, 5.25rem);
}
.page-w.pg-privacy .in-hero__title .word {
  white-space: nowrap;
  max-width: 100%;
}
.page-w.pg-privacy .in-hero__lede {
  max-width: min(48rem, 100%);
}
.page-w.pg-privacy .in-zone--privacy .in-wrap {
  width: 100%;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
  box-sizing: border-box;
}
.in-zone--privacy .in-prose {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  overflow: visible;
  color: #ffffff;
}
.in-zone--privacy .in-prose p,
.in-zone--privacy .in-prose li,
.in-zone--privacy .in-prose h2,
.in-zone--privacy .in-prose h3,
.in-zone--privacy .in-prose ul,
.in-zone--privacy .in-prose ol,
.in-zone--privacy .in-prose strong,
.in-zone--privacy .in-prose em {
  max-width: none;
  opacity: 1 !important;
  color: #ffffff !important;
  font-weight: 300;
}
.in-zone--privacy .in-prose a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  opacity: 1 !important;
}
html.light .page-w.pg-privacy .in-zone--privacy .in-prose,
html.light .page-w.pg-privacy .in-zone--privacy .in-prose :is(p, li, h2, h3, ul, ol, strong, em, a) {
  color: #080808 !important;
}
/* Privacy hero copy — same bright ink as body */
.page-w.pg-privacy .in-hero__crumb,
.page-w.pg-privacy .in-hero__title,
.page-w.pg-privacy .in-hero__title .char,
.page-w.pg-privacy .in-hero__lede {
  opacity: 1 !important;
  color: #ffffff !important;
}
html.light .page-w.pg-privacy .in-hero__crumb,
html.light .page-w.pg-privacy .in-hero__title,
html.light .page-w.pg-privacy .in-hero__title .char,
html.light .page-w.pg-privacy .in-hero__lede {
  color: #080808 !important;
}
.in-prose ul,
.in-prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
  list-style-position: outside;
}
.in-prose ul {
  list-style-type: disc;
}
.in-prose ol {
  list-style-type: decimal;
}
.in-prose li {
  margin: 0 0 0.45em;
  padding-left: 0.25em;
  line-height: 1.65;
  opacity: 0.9;
}
.in-prose li:last-child {
  margin-bottom: 0;
}
.in-prose li > ul,
.in-prose li > ol {
  margin-top: 0.45em;
  margin-bottom: 0;
}
.in-prose h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 1.75em 0 0.55em;
  text-transform: none;
}
.in-prose h2:first-child {
  margin-top: 0;
}
.in-prose p {
  margin: 0 0 1em;
  line-height: 1.65;
  opacity: 0.9;
  max-width: 62ch;
}
.in-prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form-wrap {
  position: relative;
}

/* Forms / CTA need denser surface for readability */
.in-panel:has(form),
.in-panel:has(.field),
.in-panel.in-cta {
  background: var(--in-panel-solid);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

/* Light theme: glass panels — thin fill + stronger backdrop blur */
html.light .page-w.is-inner :is(.in-panel, .in-mosaic__cell, .in-board__cell, .in-case, .in-gain, .in-model) {
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
}

html.light .page-w.is-inner .in-panel:has(form),
html.light .page-w.is-inner .in-panel:has(.field),
html.light .page-w.is-inner .in-panel.in-cta {
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
}

/* Light theme: opaque panels use solid dark ink (not blend white) */
html.light .page-w.is-inner .in-panel {
  color: var(--in-panel-ink);
  --in-ink: var(--in-panel-ink);
  --in-muted: var(--in-panel-muted);
}

html.light .page-w.is-inner .in-panel :is(.in-brief-tag, h2, h3, label, .field > span, .choice-chip) {
  color: var(--in-panel-ink);
}

html.light .page-w.is-inner .in-panel :is(p, li, .form-aside, .form-note) {
  color: var(--in-panel-muted);
}

html.light .page-w.is-inner .in-panel .field :is(input, textarea) {
  color: var(--in-panel-ink);
  border-bottom-color: rgba(8, 8, 8, 0.32);
}

html.light .page-w.is-inner .in-panel .choice-chip {
  border-color: #080808;
  color: #080808;
  background: transparent;
}

html.light .page-w.is-inner .in-panel .choice-chip:has(input:checked) {
  background: #080808;
  border-color: #080808;
  color: #ffffff;
}

html.light .page-w.is-inner .in-panel .btn-w {
  background: #080808;
  border-color: #080808;
  color: #ffffff;
}

html.light .page-w.is-inner .in-panel .btn-w :is(.btn-inner, .btn-txt),
html.light .page-w.is-inner .in-panel .btn-w .btn-icon-w::after {
  color: #ffffff !important;
}

html.light .page-w.is-inner .in-panel .btn-w:hover {
  border-color: #00ff9b;
}

html.light .page-w.is-inner .in-panel .btn-w:hover :is(.btn-inner, .btn-txt),
html.light .page-w.is-inner .in-panel .btn-w:hover .btn-icon-w::after {
  color: #080808 !important;
}

html.dark .page-w.is-inner .in-panel .btn-w {
  background: #ffffff;
  border-color: #ffffff;
  color: #080808;
}

html.dark .page-w.is-inner .in-panel .btn-w :is(.btn-inner, .btn-txt),
html.dark .page-w.is-inner .in-panel .btn-w .btn-icon-w::after {
  color: #080808 !important;
}

html.dark .page-w.is-inner .in-panel .btn-w:hover {
  border-color: #00ff9b;
}

html.dark .page-w.is-inner .in-panel .btn-w:hover :is(.btn-inner, .btn-txt),
html.dark .page-w.is-inner .in-panel .btn-w:hover .btn-icon-w::after {
  color: #080808 !important;
}

.in-panel--accent {
  background: var(--in-panel-accent);
  border-color: var(--in-line-accent);
}

.in-panel--alt {
  background: var(--in-panel-2);
}

.in-panel p,
.in-panel li {
  color: var(--in-muted);
  line-height: 1.55;
  font-size: 0.98em;
}

.in-panel h2,
.in-panel h3 {
  color: var(--in-ink);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.in-panel h2 {
  font-size: clamp(1.35em, 2.4vw, 1.85em);
  margin-bottom: 0.4em;
}

.in-panel h3 {
  font-size: 1.05em;
  margin-bottom: 0.35em;
}

/* ══════════════════════════════════════
   SERVICES — 2×3 mosaic board (not a list)
   ══════════════════════════════════════ */
.in-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--in-gap);
}

.in-mosaic__cell {
  display: flex;
  flex-direction: column;
  min-height: clamp(16rem, 28vw, 22rem);
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  text-decoration: none;
  color: inherit;
  /* background/border/radius from shared surface rule */
}

html.light .page-w.is-inner .in-mosaic__cell,
html.light .page-w.is-inner .in-case,
html.light .page-w.is-inner .in-board__cell {
  color: var(--in-panel-ink);
  --in-ink: var(--in-panel-ink);
  --in-muted: var(--in-panel-muted);
}

.in-mosaic__cell:nth-child(odd) {
  background: var(--in-panel-2);
}

.in-mosaic__cell:hover {
  border-color: var(--in-line-accent);
  background: var(--in-panel-accent);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--in-shine),
    0 18px 40px color-mix(in srgb, #000 28%, transparent);
}

.in-mosaic__n {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--in-label);
  margin-bottom: auto;
  opacity: 1;
}

.in-mosaic__cell:hover .in-mosaic__n {
  color: var(--in-ink);
}

.in-mosaic__cell h2 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--in-ink);
  margin: 1.25em 0 0.55em;
}

.in-mosaic__cell p {
  color: var(--in-muted);
  font-size: 0.95em;
  font-weight: 300;
  line-height: 1.45;
  margin: 0;
  flex: 1;
  opacity: 1;
}

.in-mosaic__go {
  align-self: flex-end;
  margin-top: 1.25em;
  width: 2.5em;
  height: 2.5em;
  display: grid;
  place-items: center;
  border: 1px solid var(--in-line);
  border-radius: 50%;
  background: transparent;
  color: var(--in-ink);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html.dark .in-mosaic__cell:hover .in-mosaic__go,
html.light .in-mosaic__cell:hover .in-mosaic__go {
  transform: rotate(-45deg);
  border-color: #00ff9b;
  background: #00ff9b;
  color: #080808;
}

/* Engagement models — 3 equal full-width columns */
.in-models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--in-gap);
}

.in-model__n {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.8;
  font-weight: 300;
  color: var(--in-label);
  display: block;
  margin-bottom: 0.5em;
  opacity: 1;
}

/* ══════════════════════════════════════
   SERVICE DETAIL — full-width chapter bands
   ══════════════════════════════════════ */
.in-svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.in-svc-intro__lede {
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--in-ink-dim);
    max-width: none;
}

.in-doc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}

.in-tag {
  font-size: 0.68em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.42em 0.75em;
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: 6.25em;
  }

.in-bands {
  display: flex;
  flex-direction: column;
}

.in-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 0;
  align-items: start;
  transition: border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  pointer-events: none;
}

.in-band:first-child { border-top: 0; padding-top: 0; }
.in-band:first-child::before { display: none; }

.in-band__n {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--in-label);
  opacity: 1;
}

.in-band__body h2 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
    margin-bottom: 0.55em;
}

.in-band__body p {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
    max-width: none;
  width: min(100%, 56rem);
}

.in-svc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
}

.in-svc-nav a {
  padding: 0.55em 1.1em;
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: 6.25em;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
    text-decoration: none;
  transition: border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-svc-nav a:hover {
  border-color: var(--violet);
  color: #fff;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   PROCESS — stage board (fills width)
   ══════════════════════════════════════ */
.in-zone--board {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.in-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--in-gap);
  min-height: 0;
}

.in-board__cell {
  padding: clamp(1.25rem, 2vw, 1.65rem);
  min-height: 14rem;
  display: flex;
  flex-direction: column;
}

.in-board__cell:hover {
  border-color: var(--in-line-accent);
  background: var(--in-panel-2);
  transform: translateY(-2px);
}

.in-board__cell:nth-child(n + 5) {
  /* last 3 span evenly across full width */
}

.in-board__cell:nth-child(5) { grid-column: 1 / 2; }
.in-board__cell:nth-child(6) { grid-column: 2 / 3; }
.in-board__cell:nth-child(7) {
  grid-column: 3 / 5;
  background: var(--in-panel-accent);
  border-color: var(--in-line-accent);
}

.in-board__n {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 0.85;
  font-weight: 300;
  color: var(--in-label);
  margin-bottom: auto;
  opacity: 1;
}

.in-board__cell h3 {
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--in-ink);
  margin: 1em 0 0.45em;
}

.in-board__cell p {
  color: var(--in-muted);
  font-size: 0.92em;
  font-weight: 300;
  line-height: 1.45;
  margin: 0;
  opacity: 1;
}

.in-gains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--in-gap);
}

.in-gain h3 {
  margin-bottom: 0.4em;
  }

.in-gain p {
  opacity: 1;
  color: var(--in-muted);
}

/* ══════════════════════════════════════
   TECH — full-width stack rows
   ══════════════════════════════════════ */
.in-tech-stack {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--in-line);
}

.in-tech-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--in-line);
  align-items: center;
}

.in-tech-row h3 {
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
    margin: 0;
}

.in-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.in-tech-pills span {
  font-size: clamp(0.78em, 1.1vw, 0.95em);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.55em 1em;
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: 6.25em;
    background: transparent;
}

/* KEEP OLD DOC RULES FOR TAGS ONLY — removed rail layout */

/* ══════════════════════════════════════
   ABOUT — editorial strip + story
   ══════════════════════════════════════ */
.in-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em clamp(2rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-block: 0;
}

/* Hairlines blend across orb + white canvas */
.in-strip::before,
.in-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--fg) 45%, transparent);
  pointer-events: none;
}
.in-strip::before { top: 0; }
.in-strip::after { bottom: 0; }

.in-strip__item {
  font-size: clamp(1.75rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
}

.in-story {
  display: grid;
  grid-template-columns: minmax(7rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-bottom: var(--in-gap);
  align-items: end;
}

.in-story__year {
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 300;
  max-width: 100%;
}

.in-story__since {
  display: block;
  font-family: var(--font-body, "Manrope", system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--in-label);
  margin-bottom: 0.45em;
  line-height: 1.2;
  opacity: 1;
}

.in-quote {
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  }

.in-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.in-timeline__cell {
  padding: 0 clamp(1rem, 2vw, 1.75em);
  border-right: 1px solid var(--in-line);
}

.in-timeline__cell:first-child { padding-left: 0; }
.in-timeline__cell:last-child { border-right: 0; padding-right: 0; }

.in-timeline__cell span {
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--in-label);
  display: block;
  margin-bottom: 0.5em;
  opacity: 1;
}

.in-timeline__cell h4 {
  text-transform: uppercase;
  font-size: 1.05em;
  margin-bottom: 0.35em;
  }

.in-timeline__cell p {
  font-size: 0.95em;
  line-height: 1.45;
  opacity: 1;
  color: var(--in-muted);
}

.in-values {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 0;
}

.in-values::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  pointer-events: none;
}

.in-values__row {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(10rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.2vw, 1.65rem) 0;
  border-bottom: 0;
  align-items: baseline;
}

.in-values__row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  pointer-events: none;
}

.in-values__n {
  font-size: 0.95em;
  font-weight: 400;
  color: var(--in-label);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.in-values__row h3 {
  text-transform: uppercase;
  font-size: clamp(1.05em, 1.8vw, 1.35em);
  letter-spacing: -0.02em;
  }

.in-values__row p {
  font-size: clamp(0.95em, 1.2vw, 1.05em);
  line-height: 1.5;
  max-width: none;
  opacity: 1;
  color: var(--in-ink-soft);
}

.in-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.in-marquee__track {
  display: flex;
  gap: 2.5em;
  width: max-content;
  animation: in-marquee 28s linear infinite;
  text-transform: uppercase;
  font-size: clamp(0.9em, 1.4vw, 1.15em);
  letter-spacing: 0.16em;
  color: var(--in-label);
  white-space: nowrap;
  opacity: 1;
}

.in-marquee__track span {
  color: var(--in-muted);
  opacity: 1;
}

@keyframes in-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.in-quote-block {
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.02;
    max-width: 22ch;
}

/* ══════════════════════════════════════
   WORK — full-bleed 3-col media grid
   ══════════════════════════════════════ */
.in-work-head {
  display: flex;
  flex-direction: column;
  gap: var(--in-gap);
  width: 100%;
  align-items: stretch;
}

.in-work-head__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5em;
  padding-block: 1.15em;
  padding-inline: clamp(1.25em, 2vw, 1.75em);
  min-height: 4.5em;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.in-work-head .work-count,
.in-work-head .filter-btn,
.in-work-head .filters {
  color: var(--in-ink);
}

.in-work-head .work-count {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0;
  margin: 0;
  grid-column: auto;
  line-height: 1;
}

.in-work-head .work-count .h-a {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1;
  display: block;
}

.in-work-head .work-count span:last-child {
  font-size: 0.78em;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0.55;
  padding-top: 0.1em;
}

.in-work-head .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  grid-column: auto;
}

.in-work-head .filter-btn {
  background: transparent;
  border: 1px solid var(--in-line);
  border-radius: 6.25em;
  color: var(--in-ink-faint);
  padding: 0.55em 1.05em;
  font-size: 0.72em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 1;
  transition: border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-work-head .filter-btn:hover,
.in-work-head .filter-btn.is-on {
  border-color: var(--violet);
  color: var(--in-ink);
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  opacity: 1;
}

.in-work-head .filter-btn:hover {
  transform: translateY(-1px);
}

/* Light: panel uses dark ink — do not keep white/faint chips (invisible on #f5f5f3) */
html.light .page-w.is-inner .in-work-head .filter-btn {
  border-color: rgba(8, 8, 8, 0.55);
  color: rgba(8, 8, 8, 0.62);
  background: transparent;
}

html.light .page-w.is-inner .in-work-head .filter-btn:hover,
html.light .page-w.is-inner .in-work-head .filter-btn.is-on {
  border-color: #080808;
  background: #080808;
  color: #ffffff;
  transform: none;
}

.in-work-grid,
.in-cases-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--in-gap);
  width: 100%;
  align-self: stretch;
}

.in-case {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 0.75em;
  text-decoration: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-case:hover {
  transform: translateY(-4px);
  border-color: var(--in-line-accent);
}

.in-case__fig {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--in-r) - 2px);
  overflow: hidden;
  margin: 0;
  background: var(--in-media-bg);
}

.in-case__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.in-case:hover .in-case__fig img {
  filter: brightness(1.06);
}

.in-case__meta h3 {
  font-size: clamp(0.95em, 1.2vw, 1.1em);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--in-ink);
}

.in-case__type {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--in-label);
  display: block;
  margin: 0.25em 0;
  opacity: 1;
}

.in-case__meta p {
  font-size: 0.88em;
  color: var(--in-muted);
  line-height: 1.4;
}

.in-case.is-off {
  display: none;
}
.in-case.is-filtering-out {
  pointer-events: none;
}
.in-case.is-filtering-in {
  will-change: opacity, transform;
}

.field-consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7em;
}
.field-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  max-width: 1.45rem;
  min-height: 1.45rem;
  max-height: 1.45rem;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: 0 0 1.45rem;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--fg) 65%, transparent);
  border-radius: 0.28rem;
  border-bottom-style: solid;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.08em 1.08em;
  accent-color: var(--fg);
  cursor: pointer;
  position: relative;
  vertical-align: top;
  overflow: hidden;
}
.field-consent input[type="checkbox"]::before,
.field-consent input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}
.field-consent input[type="checkbox"]:checked {
  background-color: var(--fg);
  border-color: var(--fg);
  /* SVG mark — always centered, no transform/pseudo quirks */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.2 6.4 11.4 12.8 4.6' stroke='%23080808' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field-consent input[type="checkbox"]:checked::after {
  content: none !important;
  display: none !important;
}
.field-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.field-consent label {
  font-size: 0.88em;
  line-height: 1.45;
  opacity: 0.82;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.field-consent a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.field-consent.is-invalid {
  padding: 0.65em 0.75em;
  border-radius: 0.45em;
  background: color-mix(in srgb, #e24b4b 14%, transparent);
  border: 1px solid color-mix(in srgb, #e24b4b 55%, transparent);
}
.field-consent.is-invalid label {
  color: #ff7a7a;
  opacity: 1;
}
.field-consent.is-invalid input[type="checkbox"] {
  border-color: #e24b4b;
}
.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: #e24b4b !important;
  box-shadow: 0 1px 0 #e24b4b;
}
.field.is-invalid > label,
.field.is-invalid > span {
  color: #ff7a7a;
}
.field.is-invalid {
  animation: dgt-field-attention 0.45s ease;
}
@keyframes dgt-field-attention {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.form-note {
  display: none;
  margin: 0.35em 0 1em;
  padding: 0.85em 1em;
  border-radius: 0.5em;
  border: 1px solid transparent;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.45;
  opacity: 1;
}
.form-note.is-on {
  display: block;
  animation: dgt-note-in 0.35s ease;
}
.form-note.is-err {
  color: #ffe0e0;
  background: color-mix(in srgb, #e24b4b 22%, #120808);
  border-color: color-mix(in srgb, #e24b4b 70%, transparent);
}
.form-note.is-ok {
  color: #e8ffe8;
  background: color-mix(in srgb, #3dba6e 20%, #081208);
  border-color: color-mix(in srgb, #3dba6e 65%, transparent);
}
html.light .page-w.is-inner .in-panel .form-note.is-err {
  color: #7a1212;
  background: color-mix(in srgb, #e24b4b 16%, #ffffff);
  border-color: color-mix(in srgb, #e24b4b 45%, transparent);
}
html.light .page-w.is-inner .in-panel .form-note.is-ok {
  color: #14532d;
  background: color-mix(in srgb, #3dba6e 14%, #ffffff);
  border-color: color-mix(in srgb, #3dba6e 40%, transparent);
}
@keyframes dgt-note-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.field-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ══════════════════════════════════════
   CONTACT — wide split
   ══════════════════════════════════════ */
.in-split {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.in-brief-tag {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 0.85em;
  }

.in-checklist {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  counter-reset: inck;
}

.in-checklist li {
  counter-increment: inck;
  display: grid;
  grid-template-columns: 2.25em 1fr;
  gap: 0.75em;
  padding: 0.7em 0;
  border-top: 1px solid var(--in-line);
  font-size: 0.95em;
  line-height: 1.4;
    opacity: 0.8;
}

.in-checklist li::before {
  content: counter(inck, decimal-leading-zero);
  color: #ffffff;
  font-size: 0.85em;
}

.in-panel .field label,
.in-panel .field span,
.in-panel .field input,
.in-panel .field textarea {
  color: inherit;
}

/* ══════════════════════════════════════
   FAQ / LEGAL / CTA
   ══════════════════════════════════════ */
.in-faq {
  display: grid;
  grid-template-columns: minmax(10rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.in-faq__title {
  font-size: clamp(1.65rem, 3.6vw, 3.1rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  position: sticky;
  top: 5.5em;
  max-width: 12ch;
  padding-right: 0.35em;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  z-index: 0;
}

.in-faq__list {
  border-top: 1px solid var(--in-line);
  min-width: 0;
  position: relative;
  z-index: 1;
}

.in-faq__item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--in-line);
  border-radius: 0;
  isolation: auto;
}

.in-faq__item .faq-btn {
  width: 100%;
  padding: 1.25em 0;
}

.in-faq__item .faq-q {
  font-weight: 400;
  letter-spacing: -0.03em;
  max-width: none;
}

.in-faq__item .faq-plus {
  opacity: 0.85;
}

.in-faq__item .faq-a-inner {
  opacity: 1;
  color: var(--in-ink-dim);
  font-weight: 300;
}
html.light .in-faq__item .faq-a-inner {
  color: var(--in-ink-soft);
  font-weight: 400;
}

.in-legal__clause {
  padding: clamp(1.25rem, 2.2vw, 1.65rem) 0;
  border-bottom: 1px solid var(--in-line);
}

.in-legal__clause:first-child { padding-top: 0; }
.in-legal__clause:last-child { border-bottom: 0; }

.in-legal__clause h2 {
  font-size: 0.75em;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin-bottom: 0.55em;
}

.in-legal__clause p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
    max-width: 52rem;
}

.in-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
}

.in-cta h2 {
  margin: 0;
  max-width: 16em;
  }

.in-cta p {
  margin-top: 0.4em;
  max-width: 28em;
    opacity: 0.75;
}

/* Motion */
/* Scroll reveal: hidden only while waiting below the fold — never re-hidden on enter */
.reveal-ready {
  opacity: 0;
  transform: translate3d(0, 1.35rem, 0);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

[data-in] {
}

@media (prefers-reduced-motion: reduce) {
  .in-marquee__track { animation: none; }
  [data-in] { will-change: auto; }
  .in-panel,
  .in-mosaic__cell,
  .in-board__cell,
  .in-case,
  .in-gain,
  .surface {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .in-svc-intro,
  .in-band,
  .in-split,
  .in-faq {
    grid-template-columns: 1fr;
  }
  .in-faq__title { position: static; margin-bottom: 0.75em; }
}

@media (max-width: 991px) {
  :root {
    --in-pad: clamp(1.15rem, 4.5vw, 1.75rem);
  }

  .in-mosaic,
  .in-board,
  .in-gains,
  .in-faq,
  .in-split,
  .in-story,
  .in-models,
  .in-svc-intro,
  .in-tech-row,
  .in-band,
  .in-work-grid,
  .in-cases-row,
  .in-timeline {
    grid-template-columns: 1fr;
  }

  .in-board__cell:nth-child(5),
  .in-board__cell:nth-child(6),
  .in-board__cell:nth-child(7) {
    grid-column: auto;
  }

  .in-faq__title {
    position: static;
  }

  .in-values__row {
    grid-template-columns: 2.25rem 1fr;
  }

  .in-values__row p {
    grid-column: 1 / -1;
  }

  .in-timeline__cell {
    border-right: 0;
    border-bottom: 1px solid var(--in-line);
    padding: 0 0 1.15em;
  }

  .in-timeline__cell:last-child { border-bottom: 0; }

  .in-hero {
    min-height: auto;
    padding-top: 6.25em;
    padding-bottom: 2em;
  }

  .in-hero__title {
    font-size: clamp(2.35rem, 12vw, 4rem);
    line-height: 1.02;
  }

  .page-w.pg-privacy .in-hero__title {
    font-size: clamp(1.5rem, 8vw, 3.25rem);
  }

  .in-hero__lede {
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    max-width: none;
    line-height: 1.55;
  }

  .in-zone__label {
    font-size: 0.9em;
  }

  .in-panel,
  .in-case,
  .in-gain {
    padding: 1.15em;
  }

  .in-work-head {
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
    width: 100%;
  }
  .in-work-head__bar,
  .in-work-grid {
    width: 100%;
  }

  .in-cta h2 {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }
}

@media (max-width: 640px) {
  .in-mosaic,
  .in-work-grid,
  .in-cases-row,
  .in-models,
  .in-gains {
    grid-template-columns: 1fr;
  }

  .in-hero__title {
    font-size: clamp(2.1rem, 13vw, 3.1rem);
  }

  .page-w.pg-privacy .in-hero__title {
    font-size: clamp(1.35rem, 7.5vw, 2.35rem);
  }

  .in-hero__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65em;
  }

  .in-svc-nav {
    flex-wrap: wrap;
    gap: 0.5em 0.85em;
  }

  .in-values__row h3 {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  }
}

/* Light theme: opaque panels keep dark ink (no difference) */
html.light .page-w.is-inner :is(
  .in-panel,
  .in-board__cell,
  .in-mosaic__cell,
  .in-case,
  .in-form,
  .in-brief
) {
  color: var(--in-panel-ink, #080808);
}

html.light .page-w.is-inner :is(
  .in-panel,
  .in-board__cell,
  .in-mosaic__cell,
  .in-case,
  .in-form,
  .in-brief
) :is(h2, h3, h4, p, a, span, li, label, .btn-txt, .in-mosaic__go) {
  color: var(--in-panel-ink, #080808);
}

html.light .page-w.is-inner :is(
  .in-panel,
  .in-board__cell,
  .in-mosaic__cell,
  .in-case,
  .in-form,
  .in-brief
) :is(p, .in-muted) {
  color: var(--in-panel-muted, #6a6a66);
}

html.light .page-w.is-inner :is(
  .in-hero__idx,
  .in-band__n,
  .in-values__n,
  .in-marquee__track span,
  .in-legal__clause h2
) {
  color: #080808;
}

html.light .page-w.is-inner :is(
  .in-panel,
  .in-board__cell,
  .in-mosaic__cell,
  .in-case
) :is(.in-mosaic__n, .in-board__n, .in-model__n, .in-timeline__cell span, .in-checklist li::before, .in-legal__clause h2, .in-case__type) {
  color: #080808;
}



/* SOLID TEXT — no translucent type */
.page-w.is-inner :is(
  .in-zone__label,
  .in-hero__crumb,
  .in-story__since,
  .in-timeline__cell span,
  .in-case__type,
  .in-tag,
  .in-values__n,
  .in-band__n,
  .in-mosaic__n,
  .in-board__n,
  .in-model__n,
  .in-brief-tag,
  .filter-btn
) {
  opacity: 1 !important;
  color: var(--in-label);
}

.page-w.is-inner :is(p, li, .in-hero__lede, .form-aside, .form-note) {
  opacity: 1 !important;
}

.page-w.is-inner :is(p, li, .form-aside, .form-note) {
  color: var(--in-muted);
}

.page-w.is-inner .faq-a-inner {
  opacity: 1 !important;
  color: var(--in-ink-dim) !important;
  font-weight: 300;
}
html.light .page-w.is-inner .faq-a-inner {
  color: var(--in-ink-soft) !important;
  font-weight: 400;
}

.page-w.is-inner .in-hero__lede {
  color: var(--in-ink-dim);
}

.page-w.is-inner .in-gain p,
.page-w.is-inner .in-timeline__cell p,
.page-w.is-inner .in-band__body p {
  opacity: 1 !important;
  color: var(--in-ink-soft);
}

.page-w.is-inner .in-values__row p {
  opacity: 1 !important;
  color: var(--in-ink-dim);
}

html.light .page-w.is-inner :is(
  .in-zone__label,
  .in-hero__crumb,
  .in-story__since,
  .in-timeline__cell span,
  .in-case__type,
  .in-tag,
  .in-values__n,
  .in-band__n,
  .in-mosaic__n,
  .in-board__n,
  .in-model__n,
  .in-brief-tag
) {
  color: var(--in-label);
}