/* Digate home — Off+Brand layout, HUD, type, orb, motion */

:root {
  --main-dark: #080808;
  --main-dark-alt: #111111;
  --main-light: #a8a7a2;
  --main-light-alt: #b5b4af;
  --violet: #7740F8;
  --black: #080808;
  --white: #ffffff;
  --dark-grey: rgba(218, 218, 218, 0.22);
  --light-grey: rgba(40, 40, 40, 0.18);
  --grey-rotate: #a8a7a3;
  --small-radius: 0.625em;
  --perspective: 4000px;
  --bg: #ffffff;
  --fg: var(--main-dark);
  --line: var(--light-grey);
  --font-body: "Manrope", "Geologica", system-ui, sans-serif;
  --font-display: "Unbounded", "Geologica", system-ui, sans-serif;
}

html.light {
  --bg: #ffffff;
  --fg: var(--main-dark);
  --white: #ffffff;
  --black: #080808;
  --line: rgba(8, 8, 8, 0.32);
}

html.dark {
  --bg: var(--main-dark);
  --fg: #ffffff;
  --main-light: #ffffff;
  --line: var(--dark-grey);
  --white: #080808;
  --black: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  overflow-x: clip;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body, "Manrope", system-ui, sans-serif);
  font-weight: 300;
  font-size: clamp(15px, 1.0582010582010584vw, 20px);
  line-height: 1.4;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: clip;
  max-width: 100%;
}

html.dark body { background: var(--main-dark); color: #ffffff; }
html.light,
html.light body { background: #ffffff; color: var(--main-dark); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--main-dark); color: var(--main-light); }
html.dark ::selection { background: var(--main-light); color: var(--main-dark); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 4000;
  background: var(--violet); color: #fff; padding: 0.5rem 0.8rem;
}
.skip:focus { top: 1rem; }

.o-hidden { overflow: hidden; }

/* Type */
.h-a,
.h-b,
.h-c {
  font-family: var(--font-display);
}
.h-a {
  text-transform: uppercase;
  font-size: 5.35em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
}
.is-home-hero .h-a {
  font-size: 6.35em;
  white-space: nowrap;
  font-weight: 300;
  word-spacing: 0.42em;
}
.is-home-hero .hh-text-ovf { white-space: nowrap; }
.is-home-hero .word-gap {
  display: inline-block;
  width: 0.55em;
}
.type-word {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: visible;
  line-height: 1;
  padding: 0;
  /* Height comes from parent .h-a — shrinking fontSize must not collapse the row */
  height: 100%;
  max-height: 100%;
}
.type-ch {
  display: inline-block;
  will-change: transform, filter, opacity;
  line-height: 1;
  padding-bottom: 0;
}
.type-caret {
  display: none;
}
.h-a.is-sub { white-space: nowrap; }
.h-a.is-outline {
  border: 1px solid var(--fg);
  border-radius: 0.12em;
  padding: 0.02em 0.12em;
}
.h-b {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3.85em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
}
.h-c {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2.35em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}
.h-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  color: var(--fg);
}
.h-eyebrow.is-outline {
  border: 1px solid currentColor;
  border-radius: 0.425em;
  padding: 0.2em 0.4em;
  display: inline-block;
  width: fit-content;
  color: var(--fg);
}
html.light .h-eyebrow.is-outline {
  color: #080808;
  border-color: #080808;
}
html.dark .h-eyebrow.is-outline {
  color: #ffffff;
  border-color: #ffffff;
}
.text-small { font-size: 1em; font-weight: 300; line-height: 1.45; }
.text-mini { text-transform: uppercase; font-size: 0.75em; font-weight: 300; line-height: 1; }
.text-regular { font-size: 1em; font-weight: 300; }

/* Body / descriptions — Manrope ExtraLight, soft on dark */
p,
.faq-a-inner,
.intro-body,
.intro-kicker p,
.intro-lead p,
.prose-lg p,
.home-client-grid p,
.in-hero__lede,
.in-band__body p,
.in-svc-intro__lede,
.in-cta p,
.ft-bar {
  font-weight: 200;
}
html.dark :is(p, .intro-body, .prose-lg p, .in-hero__lede, .in-band__body p, .in-svc-intro__lede) {
  color: #c8c8c8;
}
/* Home intro copy — bright on every screen (was soft grey + ExtraLight) */
html.dark .s.is-intro :is(.intro-kicker, .intro-kicker p, .intro-body, .intro-body p) {
  color: #f5f5f5;
  font-weight: 300;
}
html.dark .s.is-intro .page-link-w,
html.dark .s.is-intro .page-link-inner,
html.dark .s.is-intro .page-link-inner .text-small,
html.dark .s.is-intro .link-track {
  color: #ffffff;
}
html.dark .s.is-intro .link-track-fill {
  background: #ffffff;
}
html.light .s.is-intro :is(.intro-kicker, .intro-kicker p, .intro-body, .intro-body p) {
  color: #111111;
  font-weight: 400;
}
html.light .s.is-intro .page-link-w,
html.light .s.is-intro .page-link-inner,
html.light .s.is-intro .page-link-inner .text-small {
  color: #0a0a0a;
}
html.dark .faq-a-inner {
  color: #f2f2f2;
  font-weight: 300;
}
html.light :is(p, .faq-a-inner, .intro-body, .prose-lg p, .in-hero__lede, .in-band__body p, .in-svc-intro__lede) {
  color: #1f1f1f;
  font-weight: 300;
}
html.light :is(
  .text-small, .intro-body, .prose-lg p, .in-hero__lede, .in-band__body p,
  .in-svc-intro__lede, .in-cta p, .faq-a-inner, .ft-bar
) {
  font-weight: 300;
}
.text-brand { font-size: 2em; font-weight: 400; text-transform: none; letter-spacing: -0.04em; }
.caps { text-transform: uppercase; }

/* Theme ink — no mix-blend. Dark = white text, light = black text. */
html.dark .page-w { color: #ffffff; }
html.light .page-w { color: #080808; }

.mbm,
.mbm-diff,
.hh-text-block,
.btn-w,
.in-hero__crumb,
.in-hero__title-w,
.in-hero__lede,
.in-zone__label,
.in-svc-intro__lede,
.in-tag,
.in-band__body,
.in-svc-nav a,
.in-tech-row h3,
.in-tech-pills span,
.in-strip__item,
.in-story__year,
.in-story__since,
.in-quote,
.in-quote-block,
.in-timeline__cell h4,
.in-timeline__cell p,
.in-values__row h3,
.in-values__row p,
.in-gain h3,
.in-gain p,
.in-brief-tag,
.in-checklist li,
.in-faq__title,
.in-faq__list,
.in-legal__clause p,
.in-cta h2,
.in-cta p,
.ft-nav,
.ft-bar,
.eb-wrap,
.hcs-content-w,
.filter-btn,
.work-count,
.home-client-grid {
  color: inherit;
}

.mbm *,
.mbm-diff *,
.hh-text-block *,
.btn-w *:not(.btn-bg-fill),
.in-hero__title-w *,
.in-hero__lede *,
.in-band__body *,
.in-faq__list *,
.in-cta h2 *,
.ft-nav *,
.ft-bar *,
.eb-wrap *,
.hcs-content-w *,
.home-client-grid * {
  color: inherit;
}

/* Opaque surfaces keep their own ink */
.surface { color: var(--fg); }
html.dark .surface,
html.dark .surface * { color: #ffffff; }
html.light .surface,
html.light .surface * { color: #080808; }

.in-panel,
.in-board__cell,
.in-mosaic__cell,
.in-case {
  color: var(--in-ink, #fff);
}

/* Inner pages — transparent over orb; cards are solid opaque blocks */
:root {
  --frame: color-mix(in srgb, var(--fg) 22%, transparent);
  --frame-soft: color-mix(in srgb, var(--fg) 12%, transparent);
  --ink-soft: color-mix(in srgb, var(--fg) 72%, transparent);
  --card-bg: #f3f3f0;
  --card-border: #d8d7d2;
  --inner-pad-x: 1.35em;
  --inner-pad-y: 1.25em;
}
html.dark {
  --card-bg: color-mix(in srgb, #080808 44%, transparent);
  --card-border: color-mix(in srgb, #ffffff 18%, transparent);
}
html.light {
  --card-bg: color-mix(in srgb, #ffffff 20%, transparent);
  --card-border: color-mix(in srgb, #080808 20%, transparent);
  --frame: color-mix(in srgb, var(--fg) 40%, transparent);
  --frame-soft: color-mix(in srgb, var(--fg) 24%, transparent);
}

.surface,
a.surface,
article.surface,
form.surface,
nav.surface,
blockquote.surface,
div.surface {
  isolation: isolate;
  background-color: var(--card-bg);
  background-image: none;
  border: 1px solid var(--card-border);
  border-radius: var(--small-radius);
  padding: var(--inner-pad-y) var(--inner-pad-x);
  color: var(--fg);
  opacity: 1;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
html.light .surface,
html.light a.surface,
html.light article.surface,
html.light form.surface,
html.light nav.surface,
html.light blockquote.surface,
html.light div.surface {
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
}
html.dark .surface {
  color: #ffffff;
}
.surface,
.surface * {
}
html.dark .surface,
html.dark .surface * {
  color: #ffffff;
}

/* Layout shells around cards — never blend (cards stay solid) */
html.dark .page-w :is(
  .svc-mosaic, .svc-models, .cta-rail, .about-mosaic, .about-pillars, .about-marquee,
  .proc-track, .proc-compare, .proc-future, .tech-layers, .tech-ring-wrap,
  .contact-ticket, .legal-sheet, .svc-mag, .svc-ladder, .svc-orbit, .svc-narrow,
  .svc-window-wrap, .svc-specimen, .work-grid-3, .work-trio, .about-work-duo,
  .work-strip, .is-inner-block
),
html.light .page-w :is(
  .svc-mosaic, .svc-models, .cta-rail, .about-mosaic, .about-pillars, .about-marquee,
  .proc-track, .proc-compare, .proc-future, .tech-layers, .tech-ring-wrap,
  .contact-ticket, .legal-sheet, .svc-mag, .svc-ladder, .svc-orbit, .svc-narrow,
  .svc-window-wrap, .svc-specimen, .work-grid-3, .work-trio, .about-work-duo,
  .work-strip, .is-inner-block
) {
}

.surface .hcs-img-w {
  background-color: var(--card-bg);
}
.surface.is-flush,
.hcs-img-w.is-flush {
  padding: 0;
  overflow: hidden;
}

.page-w.is-inner .grid-main > .sec-kicker {
  padding-left: var(--inner-pad-x);
  padding-right: var(--inner-pad-x);
}

.page-w.is-inner .mantra {
  grid-column: 2 / 12;
}

.hcs-img-w.is-flush {
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(var(--small-radius) - 3px);
}

.svc-orbit.surface .svc-orbit-band {
  padding: 1.1em 0;
  border-top: 1px solid var(--card-border);
}
.svc-orbit.surface .svc-orbit-band:first-child {
  border-top: 0;
  padding-top: 0;
}

.svc-specimen .svc-spec-head {
  grid-column: 1 / -1;
  padding: 0 0 1em;
  margin-bottom: 0.25em;
}

.svc-cta-band.surface {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25em;
}

.surface .filters,
.surface .filter-btn,
.surface .work-count,
.surface .work-count .h-a {
  color: inherit;
}

.svc-mag.surface,
.svc-ladder.surface,
.svc-orbit.surface,
.svc-narrow.surface,
.svc-specimen.surface,
.contact-meta.surface {
  grid-column: 2 / 12;
}

.svc-spec-cell.surface {
  min-height: 9em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--card-border);
}

.svc-orbit-band.surface {
  padding: var(--inner-pad-y) var(--inner-pad-x);
}

.legal-sheet.surface .legal-clause {
  padding: 1.15em 0;
  border-bottom: 1px solid var(--card-border);
}
.legal-sheet.surface .legal-clause:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.legal-sheet.surface .legal-clause:first-child {
  padding-top: 0;
}

.proc-future h2 { text-transform: uppercase; font-size: 1.15em; margin-bottom: 0.45em; letter-spacing: -0.02em; }
.proc-future p { opacity: 0.68; font-size: 0.92em; line-height: 1.45; max-width: 36em; }

.svc-chips.surface {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}

.is-inner .faq-item.surface {
  padding: 0 var(--inner-pad-x);
  margin-bottom: 0.55em;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--small-radius);
}

.page-w.is-inner {
  position: relative;
  z-index: 1;
  background: transparent;
  min-height: 100vh;
}

.frame {
  border: 1px solid var(--fg);
  border-radius: var(--small-radius);
  background: transparent;
}
.frame.is-dashed {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.frame.is-invert {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.rule-y {
  border-top: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
}
.rule-x {
  border-left: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
}

.sec-kicker {
  grid-column: 2 / 12;
  opacity: 0.55;
  margin-bottom: 0.75em;
}

/* —— Work: uniform 3-col, never full-width —— */
.is-inner-work .work-toolbar {
  grid-column: 2 / 12;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.25em;
}
.is-inner-work .work-toolbar.surface {
  padding: var(--inner-pad-y) var(--inner-pad-x);
}
.is-inner-work .filters { grid-column: auto; margin: 0; }
.is-inner-work .work-count { grid-column: auto; padding: 0; }

.work-grid-3 .hcs-item-w.surface {
  padding: 0.65em;
  gap: 0.55em;
  background-color: var(--card-bg);
}
.work-grid-3 .hcs-item-w.surface .hcs-content-w {
  padding: 0 0.15em 0.1em;
  color: inherit;
}

.work-grid-3 {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35em 1em;
}
.work-grid-3 .hcs-item-w {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  grid-area: unset;
  grid-column: auto;
  grid-row: auto;
}
.work-trio .hcs-item-w,
.about-work-duo .hcs-item-w,
.work-strip .hcs-item-w {
  grid-area: unset;
  grid-column: auto;
  grid-row: auto;
}
.work-trio .hcs-item-w.surface,
.about-work-duo .hcs-item-w.surface,
.work-strip .hcs-item-w.surface {
  padding: 0.65em;
  background-color: var(--card-bg);
}
.work-trio .hcs-item-w.surface .hcs-content-w,
.about-work-duo .hcs-item-w.surface .hcs-content-w,
.work-strip .hcs-item-w.surface .hcs-content-w {
  color: inherit;
  padding: 0 0.15em;
}
.work-grid-3 .hcs-img-w {
  aspect-ratio: 4 / 3;
  border-radius: var(--small-radius);
  overflow: hidden;
  padding: 0;
}
.work-grid-3 .hcs-item-w.is-tall .hcs-img-w { aspect-ratio: 4 / 3; }
.work-grid-3 .hcs-img-inner {
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-grid-3 .hcs-item-w:hover .hcs-img-inner { transform: scale(1.02); filter: brightness(1.04); }

.work-strip {
  grid-column: 2 / 12;
  display: flex;
  gap: 1em;
  overflow-x: auto;
  padding-bottom: 0.5em;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.work-strip .hcs-item-w {
  flex: 0 0 min(22em, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.work-strip .hcs-item-w:not(.surface) {
  background: transparent;
  border: 0;
  padding: 0;
}
.work-strip .hcs-img-w {
  border-radius: var(--small-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* —— Services index: full-bleed numbered rows —— */
.svc-rows {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--frame);
}
.svc-row {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25em;
  padding: 1.35em 0;
  border-bottom: 1px solid var(--frame);
  text-transform: uppercase;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-row:hover { padding-left: 0.65em; }
.svc-row-n { opacity: 0.4; font-size: 0.85em; }
.svc-row h3 { font-size: clamp(1.4em, 3vw, 2.4em); letter-spacing: -0.03em; margin-bottom: 0.2em; line-height: 1; }
.svc-row p { opacity: 0.7; font-size: 0.9em; text-transform: none; line-height: 1.4; max-width: 36em; }
.svc-row-go {
  width: 2.4em; height: 2.4em;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--main-light) 35%, transparent);
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity 0.25s, transform 0.35s;
}
.svc-row:hover .svc-row-go { opacity: 1; transform: rotate(-45deg); }

.engage-band {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px dashed var(--frame);
  border-bottom: 1px dashed var(--frame);
  padding: 1.5em 0;
}
.engage-band div { padding: 0 1.25em; border-left: 1px solid color-mix(in srgb, var(--main-light) 25%, transparent); }
.engage-band div:first-child { border-left: 0; padding-left: 0; }
.engage-band h3 { text-transform: uppercase; font-size: 1em; margin-bottom: 0.4em; letter-spacing: -0.02em; }
.engage-band p { opacity: 0.7; font-size: 0.9em; line-height: 1.4; }

.proc-banner, .svc-cta-band {
  grid-column: 2 / 12;
  padding: 1.5em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25em;
  border-top: 1px solid var(--frame);
}
.proc-banner h2, .svc-cta-band h2 { font-size: 1.6em; text-transform: uppercase; letter-spacing: -0.03em; }
.proc-banner p, .svc-cta-band p { opacity: 0.72; max-width: 32em; line-height: 1.45; }

/* —— About —— */
.about-split {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2em;
  align-items: start;
}
.about-quote { padding: 0; border: 0; background: transparent; }
.about-quote .h-b { font-size: clamp(1.8em, 3.5vw, 2.8em); line-height: 1.05; margin-bottom: 0.9em; }
.about-quote p { opacity: 0.72; line-height: 1.5; max-width: 28em; }
.about-quote p + p { margin-top: 0.85em; }
.about-timeline {
  padding: 0;
  border-left: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
  padding-left: 1.25em;
  background: transparent;
}
.about-timeline h3 { text-transform: uppercase; font-size: 0.8em; opacity: 0.45; margin-bottom: 1em; letter-spacing: 0.06em; }
.tl-item {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 0.85em;
  padding: 0.85em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 22%, transparent);
}
.tl-item:first-of-type { border-top: 0; padding-top: 0; }
.tl-y { opacity: 0.4; font-size: 0.8em; }
.tl-item h4 { text-transform: uppercase; font-size: 0.95em; margin-bottom: 0.25em; }
.tl-item p { opacity: 0.7; font-size: 0.88em; line-height: 1.4; }

.why-rows-glass {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--frame);
}
.why-row-g {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 1.25em;
  padding: 1.15em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 22%, transparent);
  align-items: start;
  background: transparent;
}
.why-row-g .why-n { opacity: 0.4; font-size: 0.8em; padding-top: 0.2em; }
.why-row-g h3 { text-transform: uppercase; font-size: 1.15em; margin-bottom: 0.35em; letter-spacing: -0.02em; }
.why-row-g p { opacity: 0.7; font-size: 0.92em; line-height: 1.45; max-width: 40em; }

.path-band {
  grid-column: 2 / 12;
  padding: 1.1em 0;
  text-transform: uppercase;
  font-size: 0.95em;
  letter-spacing: 0.06em;
  border-top: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
  background: transparent;
}
.path-band .slash { opacity: 0.35; margin: 0 0.4em; }

/* —— Process timeline —— */
.proc-timeline {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 0.25em;
  background: transparent;
  border: 0;
}
.proc-timeline::before {
  content: "";
  position: absolute;
  left: 1.45em;
  top: 1.1em;
  bottom: 1.1em;
  width: 1px;
  background: color-mix(in srgb, var(--main-light) 28%, transparent);
}
.proc-step {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 1.4em;
  padding: 1.35em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent);
  border-radius: 0;
  box-shadow: none;
}
.proc-step:last-child { border-bottom: 0; }
.proc-step .step-n {
  width: 2.5em;
  height: 2.5em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--main-light) 45%, transparent);
  background: transparent;
  font-size: 0.72em;
  position: relative;
  z-index: 1;
}
.proc-step h3 { text-transform: uppercase; font-size: 1.35em; margin-bottom: 0.4em; letter-spacing: -0.02em; }
.proc-step p { opacity: 0.72; font-size: 0.95em; line-height: 1.45; max-width: 38em; }

.see-glass {
  grid-column: 2 / 12;
  padding: 0;
  background: transparent;
  border: 0;
}
.see-glass-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  padding: 0 0 0.85em;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  opacity: 0.5;
}
.see-glass-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  padding: 0.85em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
  font-size: 0.95em;
}
.see-glass-row p:first-child { text-transform: uppercase; letter-spacing: -0.01em; }
.see-glass-row p:last-child { opacity: 0.7; line-height: 1.4; }

/* —— Tech —— */
.tech-cols {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.9fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.tech-col {
  padding: 1.5em 1.35em 1.5em 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-right: 1px dashed color-mix(in srgb, var(--main-light) 30%, transparent);
}
.tech-col:last-child { border-right: 0; padding-right: 0; }
.tech-col:first-child { padding-left: 0; }
.tech-col.is-tall { min-height: 14em; }
.tech-col h3 { text-transform: uppercase; font-size: 1em; margin-bottom: 1em; opacity: 0.55; letter-spacing: 0.04em; }
.tech-col ul { list-style: none; padding: 0; margin: 0; }
.tech-col li {
  padding: 0.5em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
  font-size: 1.05em;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.tech-col li:first-child { border-top: 0; padding-top: 0; }

.tech-pill-wrap {
  grid-column: 2 / 12;
  padding: 0;
  background: transparent;
  border: 0;
}
.tech-pill-wrap h3 { text-transform: uppercase; font-size: 0.8em; opacity: 0.45; margin-bottom: 0.9em; letter-spacing: 0.06em; }
.tech-pills { display: flex; flex-wrap: wrap; gap: 0.5em; }
.tech-pill {
  padding: 0.5em 0.9em;
  border: 1px dashed color-mix(in srgb, var(--main-light) 40%, transparent);
  border-radius: 6.25em;
  font-size: 0.82em;
  text-transform: uppercase;
  background: transparent;
}

.tech-quote {
  grid-column: 2 / 12;
  padding: 1.5em 0;
  font-size: clamp(1.4em, 3vw, 2.2em);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}

/* —— Service detail —— */
.svc-editorial {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2em;
}
.svc-rail {
  padding: 0;
  position: sticky;
  top: 6em;
  align-self: start;
  background: transparent;
  border: 0;
  border-right: 1px dashed color-mix(in srgb, var(--main-light) 30%, transparent);
  padding-right: 1.5em;
}
.svc-rail .svc-num { font-size: 5em; line-height: 0.85; opacity: 0.22; display: block; margin-bottom: 0.15em; }
.svc-rail h2 { text-transform: uppercase; font-size: 1.5em; margin-bottom: 0.65em; letter-spacing: -0.03em; }
.svc-rail p { opacity: 0.72; line-height: 1.45; font-size: 0.95em; }
.svc-rail ul { list-style: none; margin: 1.25em 0 0; padding: 0; }
.svc-rail li {
  padding: 0.45em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent);
  font-size: 0.88em;
  opacity: 0.8;
  text-transform: uppercase;
}
.svc-prose { display: flex; flex-direction: column; gap: 0; }
.svc-prose-block {
  padding: 1.25em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent);
  background: transparent;
}
.svc-prose-block:first-child { padding-top: 0; }
.svc-prose-block h3 { text-transform: uppercase; font-size: 1.05em; margin-bottom: 0.5em; letter-spacing: -0.02em; }
.svc-prose-block p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; }

.svc-split {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 1.5em;
}
.svc-split-num {
  font-size: 4em;
  line-height: 1;
  opacity: 0.22;
  padding-top: 0.1em;
  position: sticky;
  top: 6em;
}
.svc-split-body { display: flex; flex-direction: column; gap: 0; border-left: 1px solid color-mix(in srgb, var(--main-light) 25%, transparent); padding-left: 1.5em; }
.svc-split-lede { padding: 0 0 1.35em; border-bottom: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent); background: transparent; }
.svc-split-lede h2 { text-transform: uppercase; font-size: 1.8em; margin-bottom: 0.55em; letter-spacing: -0.03em; }
.svc-split-lede p { opacity: 0.72; line-height: 1.5; }

.svc-modules {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.svc-modules-head { padding: 0; background: transparent; border: 0; }
.svc-modules-head .svc-num { opacity: 0.3; font-size: 0.85em; margin-bottom: 0.4em; display: block; letter-spacing: 0.06em; }
.svc-modules-head h2 { text-transform: uppercase; font-size: 2em; margin-bottom: 0.5em; letter-spacing: -0.03em; }
.svc-modules-head p { opacity: 0.72; line-height: 1.5; max-width: 36em; }
.svc-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55em;
}
.svc-module {
  padding: 0.95em 0.85em;
  font-size: 0.82em;
  text-transform: uppercase;
  line-height: 1.3;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
  border-radius: var(--small-radius);
}
.svc-band {
  padding: 1.25em 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 22%, transparent);
}
.svc-band h3 { text-transform: uppercase; font-size: 1.05em; margin-bottom: 0.45em; }
.svc-band p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; max-width: 42em; }

.svc-stack {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-stack-hero {
  padding: 0 0 1.5em;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
}
.svc-stack-hero .svc-num { opacity: 0.3; font-size: 0.85em; display: block; margin-bottom: 0.35em; }
.svc-stack-hero h2 { text-transform: uppercase; font-size: 2em; margin-bottom: 0.5em; letter-spacing: -0.03em; }
.svc-stack-hero p { opacity: 0.72; line-height: 1.5; max-width: 36em; }

.svc-nav-row {
  grid-column: 2 / 12;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.svc-nav-row a {
  padding: 0.55em 0.95em;
  border: 1px solid color-mix(in srgb, var(--main-light) 30%, transparent);
  border-radius: 6.25em;
  font-size: 0.78em;
  text-transform: uppercase;
  opacity: 0.7;
  background: transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
.svc-nav-row a:hover { opacity: 1; border-color: var(--main-light); }

.svc-note-band {
  grid-column: 2 / 12;
  padding: 0.9em 0;
  font-size: 0.9em;
  opacity: 0.7;
  line-height: 1.45;
  background: transparent;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--main-light) 40%, transparent);
  padding-left: 1em;
}

/* —— Contact —— */
.is-contact-split {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2em;
  align-items: start;
}
.contact-rail {
  padding: 0;
  background: transparent;
  border: 0;
}
.contact-rail .h-eyebrow { opacity: 0.5; margin-bottom: 0.85em; }
.contact-rail p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; }
.contact-rail p + p { margin-top: 0.85em; }
.contact-rail ol {
  margin: 1.25em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: c;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 25%, transparent);
}
.contact-rail li {
  counter-increment: c;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 0.75em;
  padding: 0.75em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
  opacity: 0.75;
  font-size: 0.9em;
  line-height: 1.4;
}
.contact-rail li::before {
  content: counter(c, decimal-leading-zero);
  opacity: 0.4;
  font-size: 0.8em;
}
.contact-form-wrap {
  padding: 1.5em;
}

/* —— Privacy —— */
.rule-stack {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.rule-item {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  gap: 1.25em;
  padding: 1.35em 0;
  align-items: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent);
  border-radius: 0;
}
.rule-item .rule-n { opacity: 0.35; font-size: 0.85em; }
.rule-item p { opacity: 0.78; line-height: 1.5; font-size: 1.05em; max-width: 40em; }

/* ═══ Inner pages — unique 2026 blocks (each page type differs) ═══ */

/* Services index — asymmetric mosaic catalog */
.svc-mosaic {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.55em;
}
.svc-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
  min-height: 8.5em;
  text-decoration: none;
  transition: border-color 0.35s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-tile:hover { border-color: #4a4a4a; transform: translateY(-3px); }
html.light .svc-tile:hover { border-color: #6a6964; }
.svc-tile.is-f1 { grid-column: span 7; grid-row: span 2; min-height: 17em; }
.svc-tile.is-s1, .svc-tile.is-s2 { grid-column: span 5; }
.svc-tile.is-s3, .svc-tile.is-s4, .svc-tile.is-s5 { grid-column: span 4; }
.svc-tile-n { font-size: 0.78em; opacity: 0.38; letter-spacing: 0.08em; }
.svc-tile.is-f1 .svc-tile-n { font-size: 1em; }
.svc-tile h3 { text-transform: uppercase; font-size: clamp(1.25em, 2.5vw, 2em); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.35em; }
.svc-tile.is-f1 h3 { font-size: clamp(2em, 4.5vw, 3.5em); }
.svc-tile p { opacity: 0.68; font-size: 0.88em; line-height: 1.4; text-transform: none; max-width: 28em; }
.svc-tile-go { align-self: flex-end; width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--main-light) 40%, transparent); border-radius: 50%; opacity: 0.5; transition: opacity 0.25s, transform 0.35s, background 0.35s, border-color 0.35s, color 0.35s; }
.svc-tile:hover .svc-tile-go { opacity: 1; transform: rotate(-45deg); border-color: #00ff9b; background: #00ff9b; color: #080808; }

.svc-models {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px dashed var(--frame);
}
.svc-models.surface {
  gap: 0;
}
.svc-model {
  padding: 0 1.15em;
  border-right: 1px solid color-mix(in srgb, var(--main-light) 14%, transparent);
}
.svc-model:first-child { padding-left: 0; }
.svc-model:last-child { border-right: 0; padding-right: 0; }
.svc-model-n { font-size: clamp(2.5em, 5vw, 4em); line-height: 0.85; opacity: 0.14; display: block; margin-bottom: 0.25em; }
.svc-model h3 { text-transform: uppercase; font-size: 1em; margin-bottom: 0.45em; letter-spacing: -0.02em; }
.svc-model p { opacity: 0.68; font-size: 0.88em; line-height: 1.4; }

.cta-rail {
  grid-column: 2 / 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25em;
}
.cta-rail.surface,
.svc-cta-band.surface,
.proc-future.surface,
.legal-sheet.surface,
.tech-statement.surface,
.svc-note-band.surface {
  padding: var(--inner-pad-y) var(--inner-pad-x);
}
.cta-rail h2 { text-transform: uppercase; font-size: clamp(1.4em, 3vw, 2em); letter-spacing: -0.03em; max-width: 14em; line-height: 1.05; }
.cta-rail p { opacity: 0.68; font-size: 0.92em; max-width: 22em; line-height: 1.4; margin-top: 0.35em; }

/* About — editorial mosaic + pillars */
.about-mosaic {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.55em;
}
.about-stat.surface {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 8em;
}
.about-y { font-size: clamp(3em, 8vw, 6em); line-height: 0.85; letter-spacing: -0.04em; }
.about-y-l { opacity: 0.45; text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.1em; margin-top: 0.35em; }
.about-pull.surface {
  grid-column: span 9;
  margin: 0;
  font-size: clamp(1.5em, 3.2vw, 2.6em);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.about-studio {
  grid-column: span 5;
  align-self: start;
}
.about-studio p { opacity: 0.78; line-height: 1.5; font-size: 0.92em; }
.about-studio p + p { margin-top: 0.85em; }
.about-tl-row.surface {
  grid-column: span 7;
  display: flex;
  gap: 0;
}
.about-tl-cell {
  flex: 1;
  padding: 0 1em;
  border-right: 1px solid color-mix(in srgb, var(--main-light) 14%, transparent);
}
.about-tl-cell:first-child { padding-left: 0; }
.about-tl-cell:last-child { border-right: 0; padding-right: 0; }
.about-tl-cell span { opacity: 0.38; font-size: 0.75em; letter-spacing: 0.06em; display: block; margin-bottom: 0.35em; }
.about-tl-cell h4 { text-transform: uppercase; font-size: 0.92em; margin-bottom: 0.25em; }
.about-tl-cell p { opacity: 0.65; font-size: 0.82em; line-height: 1.35; }

.about-pillars {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--frame);
}
.about-pillars.surface {
  gap: 0;
}
.about-pillar {
  padding: 0 1.15em;
  border-right: 1px dashed color-mix(in srgb, var(--main-light) 20%, transparent);
}
.about-pillar:first-child { padding-left: 0; }
.about-pillar:last-child { border-right: 0; padding-right: 0; }
.about-pillar-n {
  font-size: clamp(3em, 6vw, 5em);
  line-height: 0.85;
  opacity: 0.12;
  display: block;
  margin-bottom: 0.15em;
}
.about-pillar h3 { text-transform: uppercase; font-size: 1.05em; margin-bottom: 0.45em; letter-spacing: -0.02em; }
.about-pillar p { opacity: 0.68; font-size: 0.88em; line-height: 1.45; }

.about-marquee.surface {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.about-marquee-track {
  display: flex;
  gap: 2.5em;
  width: max-content;
  animation: marquee 28s linear infinite;
  text-transform: uppercase;
  font-size: 0.88em;
  letter-spacing: 0.12em;
  opacity: 0.55;
  white-space: nowrap;
}
.about-marquee-track span { opacity: 0.35; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.about-marquee {
  grid-column: 2 / 12;
}

.about-work-duo {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}

/* Process — horizontal track + offset compare */
.proc-track {
  grid-column: 2 / 12;
  display: flex;
  gap: 0.55em;
  overflow-x: auto;
  padding: 0.25em 0 1em;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.proc-card.surface {
  flex: 0 0 min(20em, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  min-height: 13em;
}
.proc-card-n { font-size: clamp(2.5em, 5vw, 3.5em); line-height: 0.85; opacity: 0.16; }
.proc-card h3 { text-transform: uppercase; font-size: 1.15em; letter-spacing: -0.02em; }
.proc-card p { opacity: 0.68; font-size: 0.88em; line-height: 1.45; flex: 1; }

.proc-compare.surface .proc-compare-row {
  padding: 1.1em 0;
}
.proc-compare {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
}
.proc-compare-row {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: 2em;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 14%, transparent);
  align-items: baseline;
}
.proc-compare-row:last-child { border-bottom: 0; }
.proc-compare-row p:first-child {
  text-transform: uppercase;
  font-size: clamp(1.1em, 2.2vw, 1.65em);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.proc-compare-row p:last-child { opacity: 0.65; font-size: 0.92em; line-height: 1.45; }

.proc-future {
  grid-column: 2 / 12;
}

.tech-layers.surface .tech-layer {
  padding: 1em 0;
}
.tech-layers {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
}
.tech-layer {
  display: grid;
  grid-template-columns: 4em minmax(0, 0.35fr) minmax(0, 1fr);
  gap: 1.25em;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 14%, transparent);
}
.tech-layer:last-child { border-bottom: 0; }
.tech-layer-n { font-size: 0.78em; opacity: 0.35; letter-spacing: 0.06em; }
.tech-layer h3 { text-transform: uppercase; font-size: 1.05em; letter-spacing: -0.02em; }
.tech-stream { display: flex; flex-wrap: wrap; gap: 0.45em 0.65em; }
.tech-stream span {
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0.35em 0.65em;
  border: 1px dashed color-mix(in srgb, var(--main-light) 32%, transparent);
  border-radius: 6.25em;
}

.tech-ring-wrap.surface {
  padding: 2.5em var(--inner-pad-x);
}
.tech-ring-wrap {
  grid-column: 2 / 12;
  display: grid;
  place-items: center;
  position: relative;
}
.tech-ring-wrap::before {
  content: "";
  position: absolute;
  width: min(28em, 72vw);
  height: min(28em, 72vw);
  border: 1px dashed color-mix(in srgb, var(--main-light) 28%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.tech-ring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  max-width: 22em;
  text-align: center;
}
.tech-ring .tech-stream span { font-size: 0.75em; }

.tech-statement {
  grid-column: 2 / 12;
  font-size: clamp(1.5em, 3.5vw, 2.8em);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1.05;
  max-width: none;
}

/* Contact — ticket layout */
.contact-ticket {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 2em;
  align-items: start;
}
.contact-tag {
  text-transform: uppercase;
  font-size: clamp(2.5em, 6vw, 4.5em);
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin-bottom: 1em;
  opacity: 0.9;
}
.contact-checklist {
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  counter-reset: ck;
}
.contact-checklist li {
  counter-increment: ck;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 0.75em;
  padding: 0.65em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 20%, transparent);
  font-size: 0.88em;
  line-height: 1.4;
  opacity: 0.75;
}
.contact-checklist li::before {
  content: counter(ck, decimal-leading-zero);
  opacity: 0.35;
  font-size: 0.85em;
}
.contact-aside { opacity: 0.6; font-size: 0.85em; line-height: 1.45; max-width: 20em; }

/* Privacy — legal sheet */
.legal-sheet {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--main-light);
}
.legal-clause {
  padding: 1.5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
}
.legal-clause h2 {
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  opacity: 0.4;
  margin-bottom: 0.65em;
}
.legal-clause p {
  font-size: clamp(1.05em, 2vw, 1.35em);
  line-height: 1.45;
  letter-spacing: -0.01em;
  opacity: 0.82;
  max-width: 38em;
}

/* Service detail — 6 distinct layouts */
.svc-mag {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 2em;
}
.svc-mag-num {
  font-size: clamp(4em, 8vw, 7em);
  line-height: 0.85;
  opacity: 0.14;
  position: sticky;
  top: 6em;
  align-self: start;
}
.svc-mag-body { display: flex; flex-direction: column; gap: 0; }
.svc-mag-lede {
  padding: 0 0 1.5em;
  border-bottom: 1px dashed var(--frame);
  margin-bottom: 0.25em;
}
.svc-mag-lede h2 { text-transform: uppercase; font-size: clamp(1.6em, 3.5vw, 2.4em); letter-spacing: -0.03em; margin-bottom: 0.55em; }
.svc-mag-lede p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; max-width: 36em; }
.svc-mag-block {
  padding: 1.25em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
}
.svc-mag-block h3 { text-transform: uppercase; font-size: 0.95em; margin-bottom: 0.45em; opacity: 0.55; letter-spacing: 0.04em; }
.svc-mag-block p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; max-width: 40em; }
.svc-mag-tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1.25em; }
.svc-mag-tags span {
  font-size: 0.72em;
  text-transform: uppercase;
  padding: 0.4em 0.7em;
  border: 1px dashed color-mix(in srgb, var(--main-light) 35%, transparent);
  border-radius: 6.25em;
}

.svc-ladder {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1.5em;
}
.svc-ladder::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0.5em;
  width: 1px;
  background: color-mix(in srgb, var(--main-light) 25%, transparent);
}
.svc-ladder-step {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  gap: 1.25em;
  padding: 1.15em 0 1.15em 1em;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 15%, transparent);
}
.svc-ladder-step:last-child { border-bottom: 0; }
.svc-ladder-n { font-size: 0.78em; opacity: 0.35; padding-top: 0.25em; }
.svc-ladder-step h3 { text-transform: uppercase; font-size: 1.2em; margin-bottom: 0.4em; letter-spacing: -0.02em; }
.svc-ladder-step p { opacity: 0.7; line-height: 1.45; font-size: 0.92em; max-width: 38em; }
.svc-ladder-head { padding: 0 0 1.25em 1em; margin-bottom: 0.25em; }
.svc-ladder-head .svc-num { opacity: 0.25; font-size: 0.85em; display: block; margin-bottom: 0.35em; }
.svc-ladder-head h2 { text-transform: uppercase; font-size: clamp(1.8em, 4vw, 2.8em); letter-spacing: -0.03em; margin-bottom: 0.5em; }
.svc-ladder-head p { opacity: 0.72; line-height: 1.5; max-width: 34em; }

.svc-orbit {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
}
.svc-orbit-core { padding: 0 0 1em; }
.svc-orbit-core .svc-num { opacity: 0.25; font-size: 0.85em; display: block; margin-bottom: 0.35em; }
.svc-orbit-core h2 { text-transform: uppercase; font-size: clamp(1.6em, 3.5vw, 2.4em); letter-spacing: -0.03em; margin-bottom: 0.55em; }
.svc-orbit-core p { opacity: 0.72; line-height: 1.5; font-size: 0.95em; }
.svc-orbit-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  padding: 1.25em;
  border: 1px dashed color-mix(in srgb, var(--main-light) 30%, transparent);
  border-radius: 50%;
  aspect-ratio: 1;
  align-content: center;
  justify-content: center;
  max-width: 20em;
  margin-left: auto;
}
.svc-orbit-scope span {
  font-size: 0.72em;
  text-transform: uppercase;
  padding: 0.45em 0.75em;
  border: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  border-radius: 6.25em;
}
.svc-orbit-bands { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--frame); }
.svc-orbit-band { padding: 1.15em 1.15em 1.15em 0; border-right: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent); }
.svc-orbit-band:nth-child(even) { padding-left: 1.15em; padding-right: 0; border-right: 0; }
.svc-orbit-band h3 { text-transform: uppercase; font-size: 0.92em; margin-bottom: 0.35em; }
.svc-orbit-band p { opacity: 0.68; font-size: 0.88em; line-height: 1.4; }

.svc-narrow {
  grid-column: 4 / 10;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-narrow-hero {
  padding: 0 0 1.5em;
  text-align: center;
  border-bottom: 1px dashed var(--frame);
}
.svc-narrow-hero .svc-num { opacity: 0.3; font-size: 0.85em; display: block; margin-bottom: 0.35em; }
.svc-narrow-hero h2 { text-transform: uppercase; font-size: clamp(1.8em, 4vw, 2.6em); letter-spacing: -0.03em; margin-bottom: 0.5em; }
.svc-narrow-hero p { opacity: 0.72; line-height: 1.5; font-size: 0.92em; }
.svc-narrow-block {
  padding: 1.15em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 16%, transparent);
  text-align: left;
}
.svc-narrow-block h3 { text-transform: uppercase; font-size: 1em; margin-bottom: 0.35em; letter-spacing: -0.02em; }
.svc-narrow-block p { opacity: 0.68; line-height: 1.45; font-size: 0.9em; }

.svc-window-wrap {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
}
.svc-window {
  padding: 0;
  overflow: hidden;
}
.svc-window-bar {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.65em 0.85em;
  border-bottom: 1px solid var(--frame);
}
.svc-window-bar i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--main-light) 35%, transparent);
  font-style: normal;
}
.svc-window-body { padding: 1.25em; }
.svc-window-body .svc-num { opacity: 0.25; font-size: 0.78em; display: block; margin-bottom: 0.35em; }
.svc-window-body h2 { text-transform: uppercase; font-size: 1.5em; margin-bottom: 0.5em; letter-spacing: -0.03em; }
.svc-window-body p { opacity: 0.72; line-height: 1.45; font-size: 0.92em; margin-bottom: 0.85em; }
.svc-window-list { list-style: none; margin: 0; padding: 0; }
.svc-window-list li {
  padding: 0.45em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
  font-size: 0.82em;
  text-transform: uppercase;
  opacity: 0.75;
}
.svc-window-prose { display: flex; flex-direction: column; gap: 0; padding-top: 2em; }
.svc-window-prose article { padding: 1em 0; border-bottom: 1px solid color-mix(in srgb, var(--main-light) 16%, transparent); }
.svc-window-prose h3 { text-transform: uppercase; font-size: 0.95em; margin-bottom: 0.35em; }
.svc-window-prose p { opacity: 0.68; font-size: 0.88em; line-height: 1.4; }

.svc-specimen {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55em;
}
.svc-spec-head {
  grid-column: 1 / -1;
  padding: 0 0 1.25em;
  border-bottom: 1px dashed var(--frame);
  margin-bottom: 0.25em;
}
.svc-spec-head .svc-num { opacity: 0.25; font-size: 0.85em; display: block; margin-bottom: 0.35em; }
.svc-spec-head h2 { text-transform: uppercase; font-size: clamp(1.6em, 3.5vw, 2.4em); letter-spacing: -0.03em; margin-bottom: 0.45em; }
.svc-spec-head p { opacity: 0.72; line-height: 1.5; max-width: 32em; font-size: 0.92em; }
.svc-spec-cell {
  padding: 1em 0.85em;
  border: 1px solid color-mix(in srgb, var(--main-light) 22%, transparent);
  border-radius: var(--small-radius);
  min-height: 9em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.svc-spec-cell h3 { text-transform: uppercase; font-size: 0.78em; opacity: 0.45; letter-spacing: 0.05em; margin-bottom: 0.65em; }
.svc-spec-cell p { opacity: 0.72; font-size: 0.82em; line-height: 1.35; flex: 1; }

.work-trio {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
}

.svc-chips {
  grid-column: 2 / 12;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}
.svc-chips a {
  padding: 0.5em 0.95em;
  border: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  border-radius: 6.25em;
  font-size: 0.75em;
  text-transform: uppercase;
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}
.svc-chips a:hover { opacity: 1; border-color: var(--main-light); }

.is-inner .faq-item.in-panel,
.is-inner .in-faq__item.in-panel {
  isolation: isolate;
  background: var(--in-panel, #1a1a1a);
  border-bottom: 0;
  border-radius: var(--in-r, 0.625em);
  padding: 0;
  margin: 0 0 0.65em;
}

/* Inner FAQ: list rows, not cards — blend lives on .in-faq__list */
.page-w.is-inner .in-faq__item.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--in-line);
  border-radius: 0;
  margin: 0;
  padding: 0;
  isolation: auto;
}
.page-w.is-inner .in-faq__item.faq-item:last-child {
  border-bottom: 1px solid var(--in-line);
}
.is-inner .sec-kicker { grid-column: 2 / 12; }

.form-rail.panel, .form-stage.panel {
  color: var(--fg);
}
.form-stage.panel { grid-column: 5 / 13; }
.form-rail.panel { grid-column: 1 / 5; }

/* Buttons: dark = white fill; light = black fill */
html.dark .page-w .btn-w,
html.dark .eb-wrap .btn-w,
html.dark .mbm-diff .btn-w,
html.dark .form-stage .btn-w,
html.dark .cta-mid .btn-w {
  border-color: #ffffff;
  background: #ffffff;
  color: #080808;
}
html.dark .page-w .btn-w :is(.btn-inner, .btn-txt),
html.dark .page-w .btn-w .btn-icon-w::after,
html.dark .eb-wrap .btn-w :is(.btn-inner, .btn-txt),
html.dark .eb-wrap .btn-w .btn-icon-w::after {
  color: #080808;
}
html.light .page-w .btn-w,
html.light .eb-wrap .btn-w,
html.light .mbm-diff .btn-w,
html.light .form-stage .btn-w,
html.light .cta-mid .btn-w {
  border-color: #080808;
  background: #080808;
  color: #ffffff;
}
html.light .page-w .btn-w :is(.btn-inner, .btn-txt),
html.light .page-w .btn-w .btn-icon-w::after,
html.light .eb-wrap .btn-w :is(.btn-inner, .btn-txt),
html.light .eb-wrap .btn-w .btn-icon-w::after {
  color: #ffffff;
}
.surface .btn-w,
.surface .btn-w .btn-inner,
.surface .btn-w .btn-txt {
  color: inherit;
  border-color: currentColor;
}

.hcs-img-w,
.hcs-img-w.surface,
.hcs-img-inner {
  isolation: isolate;
}
.orb canvas {
}

.char {
  display: inline-block;
  will-change: transform;
}
.word {
  display: inline-block;
  white-space: nowrap;
  perspective: 600px;
}

html.dark .page-w .hcs-item-w,
html.dark .page-w .hcs-item-w .hcs-img-w,
html.dark .page-w .hcs-item-w .hcs-img-inner,
html.dark .page-w .hcs-item-w img,
html.dark .page-w .ip-work-card .ip-work-img,
html.dark .page-w .ip-work-card img,
html.light .page-w .hcs-item-w,
html.light .page-w .hcs-item-w .hcs-img-w,
html.light .page-w .hcs-item-w .hcs-img-inner,
html.light .page-w .hcs-item-w img,
html.light .page-w .ip-work-card .ip-work-img,
html.light .page-w .ip-work-card img {
}

/* Cursor disabled */
.cursor-w {
  display: none !important;
}

/* Loader — Digate wordmark fill (white on dark / black on light) */
.pre-w {
  position: fixed; inset: 0; z-index: 2500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.pre-w.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.65s;
}
.pre-logo {
  width: min(14rem, 58vw);
  color: var(--fg);
}
.pre-logo-stack {
  position: relative;
  width: 100%;
  line-height: 0;
}
.pre-logo-stack img {
  width: 100%;
  height: auto;
  display: block;
}
html.light .pre-logo-stack img {
  filter: invert(1);
}
.pre-logo-ghost {
  opacity: 0.16;
}
.pre-logo-fill-mask {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.pre-logo-fill {
  opacity: 1;
}

/* Home: hold below-fold until hero intro finishes.
   Do NOT toggle overflow — hiding the scrollbar and bringing it back jerks the layout. */
body.is-home-holding .page-w > main > .s:not(.is-home-hero) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.is-home-holding .hud-w .hud-brand-w,
body.is-home-holding .hud-w .hud-nav-w,
body.is-home-holding .hud-w .hud-scroll-w {
  opacity: 0;
  visibility: hidden;
}

.ob-mask-wrap { position: relative; }
.plus-mark { position: relative; width: 5.5em; height: 5.5em; }
.plus-h, .plus-v {
  position: absolute; background: var(--line); border-radius: 1.2em; overflow: hidden;
}
.plus-h { width: 5.5em; height: 1.35em; left: 0; top: 2.075em; }
.plus-v { width: 1.35em; height: 5.5em; left: 2.075em; top: 0; }
.plus-h i, .plus-v i { display: block; background: var(--fg); width: 0; height: 0; }
.plus-h i { height: 100%; }
.plus-v i { width: 100%; }
.plus-dot {
  position: absolute; right: -0.45em; bottom: 0.35em;
  width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--fg);
}
.pre-info {
  margin-top: 0.85em; width: 5.5em;
  display: flex; justify-content: space-between;
}

/* HUD — solid theme ink, no blend */
.hud-w {
  z-index: 1000;
  position: fixed;
  inset: 0;
  pointer-events: none;
  color: var(--fg);
}
.hud-w a, .hud-w button { pointer-events: auto; }
.hud-w * {
  color: inherit;
}
.hud-nav-flex {
  --toggle-h: 1.65em;
  --toggle-pad: 0.15em;
  display: flex;
  align-items: center;
  gap: 1.35em;
  position: relative;
  height: 100%;
}
.hud-nav-flex > .page-link-w {
  flex: 0 0 auto;
  align-items: center;
  height: auto;
  padding-bottom: 0;
  padding-top: 0;
}
.hud-nav-flex > .page-link-w .page-link-inner { width: auto; }
.hud-nav-flex > .page-link-w .link-track {
  bottom: -0.35em;
}

.hud-lang {
  --toggle-h: 1.65em;
  --toggle-pad: 0.15em;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  width: calc(var(--toggle-h) * 2);
  height: var(--toggle-h);
  padding: var(--toggle-pad);
  border: 1px solid currentColor;
  border-radius: 6.25em;
  box-sizing: border-box;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 0.08em;
  line-height: 1;
  flex: none;
  overflow: hidden;
  color: inherit;
  z-index: 30;
}
.hud-lang > span[aria-hidden="true"] {
  display: none;
}
.hud-lang::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--toggle-pad);
  left: var(--toggle-pad);
  width: calc(50% - var(--toggle-pad));
  height: calc(100% - (var(--toggle-pad) * 2));
  border-radius: 6.25em;
  background: #ffffff;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html.light .hud-lang::before {
  background: #080808;
}
.hud-lang:has(a[aria-current="page"]:last-child)::before {
  transform: translateX(100%);
}
.hud-lang a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 6.25em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0.72;
  background: transparent;
  color: inherit;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hud-lang a:hover {
  opacity: 0.92;
}
.hud-lang a[aria-current="page"] {
  opacity: 1;
  background: transparent;
  color: #080808;
  font-weight: 700;
}
html.light .hud-lang a[aria-current="page"] {
  background: transparent;
  color: #ffffff;
}
.c { width: 100%; padding-left: clamp(1rem, 3.2vw, 1.75em); padding-right: clamp(1rem, 3.2vw, 1.75em); }
.c.is-hud {
  height: auto;
  min-height: 0;
  padding-top: 1.05em;
  padding-bottom: 1.05em;
}
.hud-content {
  width: 100%;
  height: auto;
  min-height: 3.25em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.hud-brand-w {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  overflow: visible;
  flex: 0 0 auto;
  height: 3.25em;
}
.hud-brand-link {
  display: flex;
  align-items: center;
  flex: none;
  height: 100%;
}

.hud-nav-w {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  height: 3.25em;
  display: flex;
  align-items: center;
}
/* Scroll progress sits at viewport bottom-left — never in the logo row */
.hud-scroll-w {
  display: none !important;
}
.hud-scroll-w[pointer-auto],
.hud-scroll-w [pointer-auto] {
  pointer-events: auto;
}
.hud-brand-w { order: 1; }
.hud-nav-w { order: 2; margin-left: auto; }
.hud-scroll-inner { position: relative; height: 0.7em; }

.hud-logo {
  height: 2.35em;
  width: auto;
  display: block;
  filter: none;
}
html.light .hud-logo {
  filter: brightness(0);
}

/* Scroll: soft frosted bar — lighter fill than before */
.hud-w::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(3.25em + 2.1em);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8%);
  background: color-mix(in srgb, var(--bg) 38%, transparent);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
html.dark .hud-w::before {
  background: color-mix(in srgb, #080808 42%, transparent);
}
html.light .hud-w::before {
  background: color-mix(in srgb, #ffffff 55%, transparent);
}
.hud-w.is-scrolled::before {
  opacity: 1;
  transform: translateY(0);
}

.hud-scroll-dot {
  background: currentColor;
  border-radius: 100%;
  width: 0.7em; height: 0.7em;
  position: relative; left: -0.3em;
}

.hud-w .mode-track { border-color: currentColor; }
.hud-w .mode-knob {
  background: #ffffff;
  border: 0;
}
html.light .hud-w .mode-knob {
  background: #080808;
}
.hud-w .link-track {
  background: color-mix(in srgb, var(--fg) 28%, transparent);
}
.hud-w .link-track-fill {
  background: var(--fg);
}

.hud-menu-c { color: inherit; }
.hud-menu-line { background: currentColor; }

/* Open mobile menu: solid panel */
.hud-w:has(.hud-menu-w.is-open) {
  color: var(--fg);
}
.hud-w:has(.hud-menu-w.is-open) .link-track {
  background: color-mix(in srgb, var(--fg) 22%, transparent);
}
.hud-w:has(.hud-menu-w.is-open) .link-track-fill { background: var(--fg); }
.hud-w:has(.hud-menu-w.is-open) .mode-track { border-color: var(--fg); }
.hud-w:has(.hud-menu-w.is-open) .mode-knob {
  background: var(--fg);
}

.hud-w .hud-brand-link,
.hud-w .nav-desk,
.hud-w .hud-scroll-w,
.hud-w .hud-menu-w {
  opacity: 1 !important;
  visibility: visible !important;
}
.hud-scroll-line-top, .hud-scroll-line-btm { display: none; }

/* Links + buttons */
.page-link-w {
  position: relative;
  display: flex;
  padding-bottom: 0.55em;
  line-height: 1;
}
.page-link-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  width: 100%;
  text-transform: uppercase;
}
.page-link-inner > span:first-child,
.page-link-inner > .text-small {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 1em;
  height: 1cap;
}
/* Arrow: same cap-height box as label text → true vertical center on letters */
.page-link-inner > span:last-child:not(.btn-icon-w),
.hud-menu-link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  height: 1cap;
  line-height: 1;
  flex: none;
  align-self: center;
}
.btn-icon-w {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 1.1em;
  height: 1em;
  height: 1cap;
  flex: none;
  line-height: 1;
  align-self: center;
}
.btn-icon-w .btn-txt {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-icon-w::after {
  content: "→";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  transform: translate3d(-115%, 0, 0);
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-link-w:hover .btn-icon-w .btn-txt,
.btn-w:hover .btn-icon-w .btn-txt {
  transform: translate3d(115%, 0, 0);
}
.page-link-w:hover .btn-icon-w::after,
.btn-w:hover .btn-icon-w::after {
  transform: translate3d(0, 0, 0);
}
.link-track {
  position: absolute; inset: auto 0 0 0;
  height: 1px; background: var(--line);
}
.link-track-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 100%; height: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0%;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-link-w:hover .link-track-fill { transform: scaleX(1); }

.btn-w {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff;
  background: #ffffff;
  border-radius: 6.25em;
  display: inline-flex;
  color: #080808;
  transition: border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-inner {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 1em;
  padding: 1em 2em;
  text-transform: uppercase;
  line-height: 1;
}
.btn-w.is-large { font-size: 1.2em; }
.btn-bg-w { position: absolute; inset: 0; overflow: hidden; }
.btn-bg-fill {
  position: absolute; inset: 0;
  background: #00ff9b;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-w .btn-inner,
.btn-w .btn-inner .o-hidden .btn-txt {
  transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-w .btn-icon-w .btn-txt,
.btn-w .btn-icon-w::after {
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: #00ff9b wipe up via .btn-bg-fill (keep base bg so scaleY is visible) */
html.dark .btn-w:hover,
html.light .btn-w:hover,
.btn-w:hover {
  isolation: isolate;
  border-color: #00ff9b;
}
html.dark .btn-w:hover .btn-bg-fill,
html.light .btn-w:hover .btn-bg-fill,
.btn-w:hover .btn-bg-fill {
  transform: scaleY(1);
}
html.dark .btn-w:hover .btn-inner,
html.dark .btn-w:hover .btn-inner .btn-txt,
html.dark .btn-w:hover .btn-icon-w .btn-txt,
html.dark .btn-w:hover .btn-icon-w::after,
html.light .btn-w:hover .btn-inner,
html.light .btn-w:hover .btn-inner .btn-txt,
html.light .btn-w:hover .btn-icon-w .btn-txt,
html.light .btn-w:hover .btn-icon-w::after,
.btn-w:hover .btn-inner,
.btn-w:hover .btn-inner .btn-txt,
.btn-w:hover .btn-icon-w .btn-txt,
.btn-w:hover .btn-icon-w::after {
  color: #080808;
}

html.light .btn-w {
  border-color: #080808;
  background: #080808;
  color: #ffffff;
}
html.light .btn-bg-fill {
  background: #00ff9b;
}

.surface .btn-w {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.surface .btn-w .btn-bg-fill {
  background: #00ff9b;
}
.surface .btn-w:hover {
  border-color: #00ff9b;
}
.surface .btn-w:hover .btn-bg-fill {
  transform: scaleY(1);
}
.surface .btn-w:hover .btn-inner,
.surface .btn-w:hover .btn-txt,
.surface .btn-w:hover .btn-icon-w::after {
  color: #080808;
}
.btn-w.is-block {
  width: 100%;
  display: flex;
}
.btn-w.is-block .btn-inner {
  width: 100%;
  justify-content: center;
}

/* Menu — desktop hidden; tablet+ in HEADER top-right */
.hud-menu-o {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 3em;
  height: 3em;
  padding: 0;
  overflow: hidden;
  z-index: 20;
}
.hud-menu-o.is-open {
  width: min(19.5em, 88vw);
  height: auto;
  min-height: 18em;
  padding: 4.2em 1.6em 1.4em;
}
.hud-menu-content {
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  pointer-events: none;
}
/* Closed menu must not steal clicks — beats `.hud-w a { pointer-events: auto }` */
.hud-w .hud-menu-o:not(.is-open) .hud-menu-content,
.hud-w .hud-menu-o:not(.is-open) .hud-menu-content a,
.hud-w .hud-menu-o:not(.is-open) .hud-menu-content button {
  pointer-events: none !important;
}
.hud-menu-o.is-open .hud-menu-content {
  pointer-events: auto;
  visibility: visible;
  isolation: isolate;
  color: var(--fg);
}
.hud-menu-o.is-open .hud-menu-content :is(a, button, span) {
  color: inherit;
}
.hud-w .hud-menu-o.is-open .hud-menu-content a,
.hud-w .hud-menu-o.is-open .hud-menu-content button {
  pointer-events: auto;
}
.hud-menu-o.is-open .mode {
  color: var(--fg);
}
.hud-menu-o.is-open .mode-track { border-color: var(--fg); }
.hud-menu-o.is-open .mode-knob {
  background: var(--fg);
}
/* Open menu has no page-blend — active icon must contrast with solid knob */
.hud-w:has(.hud-menu-w.is-open) .mode-ico.is-sun,
.hud-w:has(.hud-menu-w.is-open) .mode-ico.is-moon,
.hud-menu-o.is-open .mode-ico.is-sun,
.hud-menu-o.is-open .mode-ico.is-moon {
  color: inherit;
}
html.light .hud-w:has(.hud-menu-w.is-open) .mode-ico.is-sun,
html.dark .hud-w:has(.hud-menu-w.is-open) .mode-ico.is-moon,
html.light .hud-menu-o.is-open .mode-ico.is-sun,
html.dark .hud-menu-o.is-open .mode-ico.is-moon {
  color: var(--bg);
  opacity: 1;
}
.hud-menu-link-w { display: flex; flex-direction: column; gap: 0.35em; width: 100%; }
.hud-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-transform: uppercase;
  font-size: 1em;
  padding: 0.15em 0;
  border-bottom: 1px solid var(--line);
  line-height: 1;
}
.hud-menu-sub { display: flex; flex-wrap: wrap; gap: 1em; margin: 0.8em 0; font-size: 0.75em; text-transform: uppercase; opacity: 0.6; }
.hud-menu-w {
  z-index: 10;
  position: absolute; inset: 0 0 auto auto;
  padding: 0.76em 0.48em;
}
.hud-menu-c {
  width: 2em; height: 1.5em;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.hud-menu-line {
  position: absolute;
  background: currentColor;
  width: 1.5em; height: 2px;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hud-menu-line.is-1 { transform: translateY(-0.5em); }
.hud-menu-line.is-3 { transform: translateY(0.5em); }
.hud-menu-w.is-open .hud-menu-line.is-1 { transform: rotate(45deg); }
.hud-menu-w.is-open .hud-menu-line.is-2 { transform: scaleX(0); }
.hud-menu-w.is-open .hud-menu-line.is-3 { transform: rotate(-45deg); }
.hud-menu-bg {
  z-index: -1;
  position: absolute; inset: 0 0 auto auto;
  width: 3em; height: 3em;
  background: transparent;
  border: 0;
  border-radius: var(--small-radius);
}
.hud-menu-o.is-open .hud-menu-bg {
  background: var(--bg);
  border: 1px solid var(--line);
}

.mode {
  --toggle-h: 1.65em;
  --toggle-pad: 0.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--toggle-h);
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 1em;
  color: inherit;
  flex: none;
  vertical-align: middle;
}
.hud-menu-content .mode { margin-top: 0.6em; }
.mode-txt { display: none; }
.mode-track {
  --mode-pad: var(--toggle-pad);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: calc(var(--toggle-h) * 2);
  height: 100%;
  padding: var(--mode-pad);
  border: 1px solid currentColor;
  border-radius: 6.25em;
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
}
.mode-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0.72;
  pointer-events: none;
  color: inherit;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-ico.is-sun,
.mode-ico.is-moon {
  left: auto;
  right: auto;
  top: auto;
  transform: none;
}
.mode-ico svg {
  display: block;
  width: 0.88em;
  height: 0.88em;
}
.mode-ico.is-sun svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mode-ico.is-moon svg {
  display: block;
  fill: currentColor;
  stroke: none;
}
.mode-ico.is-moon::after { display: none; content: none; }
/* Sliding solid pill behind active icon */
.mode-knob {
  position: absolute;
  z-index: 0;
  top: var(--mode-pad);
  left: var(--mode-pad);
  width: calc(50% - var(--mode-pad));
  height: calc(100% - (var(--mode-pad) * 2));
  border: 0;
  border-radius: 6.25em;
  background: #ffffff;
  box-sizing: border-box;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html.light .mode-knob { background: #080808; }
html.dark .mode-knob { transform: translateX(100%); background: #ffffff; }

/* Active icon contrasts against the filled knob */
html.dark .mode-ico.is-moon {
  opacity: 1;
  color: #080808;
}
html.dark .mode-ico.is-sun {
  opacity: 0.75;
  color: #ffffff;
}
html.light .mode-ico.is-sun {
  opacity: 1;
  color: #ffffff;
}
html.light .mode-ico.is-moon {
  opacity: 0.75;
  color: #080808;
}

/* Orb — 80vh, no 720 cap. Rings 80vh / 100vh, stay as wrappers that GSAP moves */
.orb-w {
  z-index: 0;
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  overflow: visible;
}
.orb-w:has([data-pixel-d]) {
  overflow: visible;
}
.orb {
  position: absolute;
  z-index: 0;
  border-radius: 100%;
  width: 80vh;
  height: 80vh;
  min-width: 45em;
  min-height: 45em;
  will-change: transform;
  background:
    radial-gradient(circle at 32% 28%, #ffb38c 0 16%, transparent 44%),
    radial-gradient(circle at 70% 38%, #9b74ff 0 20%, transparent 50%),
    radial-gradient(circle at 48% 72%, #3ec7c7 0 16%, transparent 48%),
    radial-gradient(circle at 50% 50%, #c47cff 0%, var(--violet) 38%, #1d1d1d 78%);
}
/* Invisible GSAP proxy — carries wander/scale; WebGL stage is fullscreen */
.orb.orb-proxy:has(+ .orb-pixel-stage),
.orb-w:has([data-pixel-d]) .orb.orb-proxy {
  background: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.orb-pixel-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}
/* Frost sheet over Hex Armor D on inner pages — softens letter under copy.
   Avoid live backdrop-filter (kills scroll/GSAP). Soften the canvas instead. */
.orb-frost {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 28%, transparent);
}
body:has(.page-w.is-inner) .orb-w:has([data-pixel-d]) .orb-frost {
  display: block;
}
html.light .orb-frost {
  background: color-mix(in srgb, #ffffff 62%, transparent);
}
html.light body:has(.page-w.is-inner) .orb-w:has([data-pixel-d]) .orb-frost {
  background: color-mix(in srgb, #ffffff 68%, transparent);
}
html.dark .orb-frost {
  background: color-mix(in srgb, #080808 42%, transparent);
}
body:has(.page-w.is-inner) .orb-w:has([data-pixel-d]) .orb-pixel-stage canvas {
  filter: blur(22px) saturate(1.05);
  opacity: 0.92;
  transform: translateZ(0);
}
.orb-backglow {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 70vh;
  height: 70vh;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 40, 130, 0.55) 0%,
      rgba(140, 60, 255, 0.28) 34%,
      rgba(60, 100, 255, 0.1) 58%,
      transparent 72%);
  filter: blur(36px);
  /* Position via transform only — left/top thrashing flickers on iOS */
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
@media (pointer: coarse) {
  .orb,
  .orb-outline-w,
  .hh-text-move {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .orb-outline {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .orb-outline-w {
    /* Keep rings composited; GSAP still sets xPercent/yPercent */
    transform: translate3d(-50%, -50%, 0);
  }
  .orb-backglow {
    will-change: transform;
    filter: blur(32px);
    opacity: 1;
    width: 96vh;
    height: 96vh;
    background:
      radial-gradient(circle at 50% 50%,
        rgba(255, 40, 130, 0.74) 0%,
        rgba(140, 60, 255, 0.42) 34%,
        rgba(60, 100, 255, 0.16) 56%,
        transparent 76%);
  }
  .orb-pixel-stage canvas {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
html.light .orb-backglow {
  /* No page wash on light — any large tint on white reads as dirt */
  display: none;
}
.orb.is-pixel::before { display: none; }
.orb-pixel-stage canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  background: transparent !important;
}
.orb canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 100%; }
.orb.is-webgl { background: none; }
.orb-outline-w {
  position: absolute;
  z-index: 1; /* behind WebGL letter (stage is z-index 2) */
  left: 50%;
  top: 50%;
  width: 80vh; height: 80vh;
  min-width: 45em; min-height: 45em;
  pointer-events: none;
  will-change: transform;
  /* GSAP keeps xPercent/yPercent -50 so scale/x/y stay centered on the letter */
  transform: translate(-50%, -50%);
}
.orb-outline-w.is-2 { width: 100vh; height: 100vh; min-width: 56em; min-height: 56em; }
/* Theme colors only — no mix-blend (was breaking). Dark keeps light rings; light uses dark rings. */
.orb-outline {
  width: 100%; height: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: 100%;
  box-sizing: border-box;
  will-change: transform;
}
html.dark .orb-outline {
  border-color: rgba(255, 255, 255, 0.42);
}
html.light .orb-outline {
  border-color: rgba(8, 8, 8, 0.42) !important;
}

/* Scroll reveal wait-state — opacity only; GSAP owns the y travel */
.reveal-ready {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready {
    opacity: 1;
    pointer-events: auto;
  }
}

/*
  Pre-JS FOUC guard: keep reveal targets invisible until main.js arms them.
  Without this, content paints fully, then JS hides + re-animates (flash).
*/
html.dgt-js:not(.dgt-reveals-on):not(.dgt-reduce) :is(
  .intro-kicker,
  .intro-body,
  .is-clients .h-eyebrow,
  .home-client-cell,
  .hcs-item-w,
  .home-case,
  .is-intro [split-text],
  .is-footer .ft-cta-grid .h-a.is-sub,
  .is-footer .ft-cta-grid .btn-w,
  [split-hero],
  [split-text],
  .in-hero__crumb,
  .in-hero__idx,
  .in-hero__lede,
  .in-svc-intro[data-in],
  .in-panel[data-in],
  .in-values__row,
  .in-tech-row,
  .in-band,
  .in-zone__label,
  .in-story__year,
  .in-strip,
  .in-marquee,
  .in-quote,
  .in-mosaic__cell,
  .in-board__cell,
  .in-gain,
  .in-cases-row .in-case,
  .in-timeline,
  .in-svc-nav
) {
  opacity: 0 !important;
}
.grid-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25em;
  row-gap: 1.25em;
  width: 100%;
}
.s { position: relative; }
.spacer-10 { height: 10em; }
.spacer-10.is-sm { height: 4em; }
.spacer-5 { height: 5em; }

/* Hero */
.c.is-home-hero { height: 100vh; }
.grid-main.is-home-hero {
  height: 100%;
  grid-template-rows: 1fr min-content 1fr min-content 1fr min-content 1fr;
}
.hh-text-ovf { overflow: hidden; }
.hh-text-move { display: block; will-change: transform; }
/* Cycling word: fixed line box so long-word font shrink never shifts hero */
.is-home-hero .hh-text-block[hh-tb="3"] .hh-text-ovf {
  overflow: visible;
  padding: 0;
  min-height: 1.2em;
}
.is-home-hero .hh-text-block[hh-tb="3"] .h-a {
  overflow: visible;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: 1.15em;
  min-height: 1.15em;
  max-height: 1.15em;
  line-height: 1;
  padding: 0;
}
.is-home-hero .hh-text-block .h-a {
  display: block;
}
.hh-text-block[hh-tb="1"] { grid-area: 2 / 2 / 3 / 12; justify-self: start; }
.hh-text-block[hh-tb="2"] { grid-area: 4 / 6 / 5 / 12; justify-self: end; text-align: right; }
.hh-text-block[hh-tb="3"] { grid-area: 6 / 2 / 7 / 13; justify-self: start; }
.hh-text-block[hh-tb="4"] {
  grid-area: 7 / 2 / 8 / 5;
  place-self: end start;
  padding-bottom: 1.5em;
  opacity: 0.72;
}

/* Manifesto */
.intro-lead { grid-area: 1 / 3 / 2 / 12; }
.intro-lead .h-b { max-width: 18ch; }
.intro-kicker { grid-area: 1 / 2 / 2 / 4; }
.intro-kicker .page-link-w { margin-top: 1.2em; width: fit-content; }
.intro-body { grid-area: 1 / 5 / 2 / 8; }

/* Capabilities */
.grid-main.is-home-client { align-items: start; }
.is-clients .eb-wrap { grid-area: span 1 / span 2 / span 1 / span 2; display: flex; flex-direction: column; gap: 0.5em; }
.home-client-grid {
  grid-area: 1 / 3 / 1 / 13;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.home-client-cell {
  position: relative;
  height: 6.4em;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: -0.02em;
  padding: 0.6em;
  color: inherit;
  text-decoration: none;
  z-index: 0;
  isolation: isolate;
}
a.home-client-cell {
  cursor: pointer;
  transition: color 0.28s var(--ease, ease), transform 0.28s var(--ease, ease);
}
html.light .home-client-cell,
html.light a.home-client-cell {
  color: #080808;
}
a.home-client-cell .cell-frame {
  transition: opacity 0.28s ease, background-color 0.28s ease, outline-color 0.28s ease;
}
a.home-client-cell .gplus::before,
a.home-client-cell .gplus::after {
  transition: opacity 0.28s ease, background-color 0.28s ease, transform 0.28s ease;
}
a.home-client-cell:hover,
a.home-client-cell:focus-visible {
  color: #fff;
  outline: none;
  z-index: 2;
}
a.home-client-cell:hover .cell-frame,
a.home-client-cell:focus-visible .cell-frame {
  opacity: 1;
  outline-color: color-mix(in srgb, var(--violet) 55%, #ffffff);
  background: color-mix(in srgb, var(--violet) 18%, transparent);
}
a.home-client-cell:hover .gplus::before,
a.home-client-cell:hover .gplus::after,
a.home-client-cell:focus-visible .gplus::before,
a.home-client-cell:focus-visible .gplus::after {
  opacity: 1;
  background: color-mix(in srgb, var(--violet) 70%, #ffffff);
}
html.light a.home-client-cell:hover,
html.light a.home-client-cell:focus-visible {
  color: #080808;
}
html.dark .home-client-cell .cell-frame {
  background: rgba(8, 8, 8, 0.72);
  opacity: 1;
  outline-color: rgba(255, 255, 255, 0.18);
}
html.light .home-client-cell .cell-frame {
  background: rgba(255, 255, 255, 0.78);
  opacity: 1;
  outline-color: rgba(8, 8, 8, 0.14);
}
html.light a.home-client-cell:hover .cell-frame,
html.light a.home-client-cell:focus-visible .cell-frame {
  outline-color: color-mix(in srgb, var(--violet) 45%, #080808);
  background: color-mix(in srgb, var(--violet) 10%, rgba(255, 255, 255, 0.88));
}
html.dark a.home-client-cell:hover .cell-frame,
html.dark a.home-client-cell:focus-visible .cell-frame {
  outline-color: color-mix(in srgb, var(--violet) 55%, #ffffff);
  background: color-mix(in srgb, var(--violet) 18%, rgba(8, 8, 8, 0.82));
}
.cell-frame {
  position: absolute; inset: 0;
  z-index: -1;
  outline: 1px solid currentColor;
  outline-offset: -1px;
  opacity: 0.28;
  pointer-events: none;
  color: #ffffff;
}
html.light .cell-frame {
  color: #080808;
  opacity: 0.22;
}
.gplus {
  position: absolute;
  width: 0.6em; height: 0.6em;
  pointer-events: none;
  z-index: 1;
}
.gplus::before, .gplus::after {
  content: "";
  position: absolute;
  background: currentColor;
  opacity: 0.7;
  color: inherit;
}
html.dark .gplus { color: #ffffff; }
html.light .gplus { color: #080808; }
.gplus::before { width: 100%; height: 1px; top: 50%; left: 0; }
.gplus::after { width: 1px; height: 100%; left: 50%; top: 0; }
.gplus.tl { top: -0.3em; left: -0.3em; }
.gplus.tr { top: -0.3em; right: -0.3em; }
.gplus.bl { bottom: -0.3em; left: -0.3em; }
.gplus.br { bottom: -0.3em; right: -0.3em; }

/* Work */
.grid-main.is-hw {
  align-items: start;
}
.eb-wrap.is-sticky {
  grid-area: 1 / 1 / 2 / 3;
  align-self: start;
  justify-self: start;
  position: sticky;
  /* Clear fixed HUD: pad + bar + gap */
  top: calc(1.05em + 3.25em + 1.05em + 1.15em);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  /* Keep sticky below HUD (z-index 1000), above work cards */
}
.page-btn-w { display: flex; align-items: center; gap: 0.5em; position: relative; }
.float-count { position: relative; top: -0.6em; }

/* Home featured work — same glass cards as Work page */
.s.is-work {
  --hw-r: 0.85em;
  --hw-gap: clamp(0.85rem, 1.4vw, 1.35rem);
  --hw-panel: color-mix(in srgb, #080808 42%, transparent);
  --hw-line: color-mix(in srgb, #ffffff 24%, transparent);
  --hw-line-accent: color-mix(in srgb, var(--violet) 50%, #ffffff 18%);
  --hw-shine: color-mix(in srgb, #ffffff 12%, transparent);
  --hw-ink: #ffffff;
  --hw-muted: #c8c8c8;
  --hw-label: #f0f0f0;
  --hw-media: #0e0e0e;
}
html.light .s.is-work {
  --hw-panel: color-mix(in srgb, #ffffff 18%, transparent);
  --hw-line: color-mix(in srgb, #080808 22%, transparent);
  --hw-line-accent: color-mix(in srgb, var(--violet) 38%, #080808 22%);
  --hw-shine: color-mix(in srgb, #ffffff 40%, transparent);
  --hw-ink: #080808;
  --hw-muted: #2a2a2a;
  --hw-label: #0a0a0a;
  --hw-media: #ecece8;
}
.home-work-grid {
  display: grid;
  grid-area: 1 / 5 / 2 / 13;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hw-gap);
  align-content: start;
  align-self: start;
  margin: 0;
  padding: 0;
}
.home-case {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 0.75em;
  text-decoration: none;
  color: var(--hw-ink);
  background: var(--hw-panel);
  border: 1px solid var(--hw-line);
  border-radius: var(--hw-r);
  box-shadow: inset 0 1px 0 var(--hw-shine);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  overflow: hidden;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
html.light .home-case {
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
}
.home-case:hover {
  transform: translateY(-4px);
  border-color: var(--hw-line-accent);
}
.home-case .in-case__fig {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--hw-r) - 2px);
  overflow: hidden;
  margin: 0;
  background: var(--hw-media);
}
.home-case .in-case__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-case:hover .in-case__fig img {
  filter: brightness(1.06);
}
.home-case .in-case__meta h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95em, 1.2vw, 1.1em);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--hw-ink);
}
.home-case .in-case__type {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--hw-label);
  display: block;
  margin: 0.25em 0;
}
.home-case .in-case__meta p {
  font-size: 0.88em;
  color: var(--hw-muted);
  line-height: 1.4;
}

.hcs-grid-w {
  display: grid;
  grid-area: 1 / 5 / 2 / 13;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  row-gap: 2em;
}
.hcs-item-w {
  grid-area: span 1 / span 4 / span 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  position: relative;
}
.hcs-item-w:not(.surface) {
  background: transparent;
}
.hcs-item-w.surface {
  background-color: var(--card-bg);
}
.hcs-img-w {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--small-radius);
  overflow: hidden;
  background-color: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.surface .hcs-img-w,
.hcs-img-w.is-flush,
.hcs-img-w.surface {
  background-color: var(--card-bg);
}
.hcs-img-inner {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.hcs-img-inner.is-cover,
.s.is-work .hcs-img-inner,
.work-grid-3 .hcs-img-inner,
.work-strip .hcs-img-inner {
  object-fit: cover;
  object-position: center top;
}
.hcs-img-w.surface {
  padding: 0;
  border: 1px solid var(--card-border);
  background-color: var(--card-bg);
  isolation: isolate;
}
html.dark .hcs-img-w.surface {
  background-color: var(--card-bg);
}
.hcs-content-w {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
}
.hcs-titles-w {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hcs-titles { display: flex; flex-direction: column; gap: 0.35em; max-width: 80%; }
.hcs-cross { font-size: 1.2em; transition: transform 0.6s; line-height: 1; }
.hcs-item-w:hover .hcs-cross { transform: rotate(45deg); }

/* FAQ — Off+Brand accordion after work, before footer */
.s.is-faq { position: relative; }
.grid-main.is-faq { align-items: start; }
.faq-head {
  grid-column: 1 / 5;
  position: sticky;
  /* Same HUD clearance as .eb-wrap.is-sticky — was 5em (too tight under header) */
  top: calc(1.05em + 3.25em + 1.05em + 1.15em);
  z-index: 2;
}
.faq-head .h-b { max-width: 8ch; }
.faq-list { grid-column: 5 / 13; }
.faq-item {
  border-top: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
}
.faq-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); }
.faq-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2em;
  width: 100%;
  padding: 1.15em 0;
  text-align: left;
  cursor: pointer;
}
.faq-q {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.faq-plus {
  flex: none;
  font-size: 1.35em;
  line-height: 1;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-plus { transform: rotate(45deg); }
.faq-a { overflow: hidden; height: 0; }
.faq-a-inner {
  padding: 0 2em 1.5em 0;
  max-width: 38em;
  opacity: 1;
  font-weight: 300;
  line-height: 1.55;
  color: #f2f2f2;
}
html.light .faq-a-inner {
  color: #1a1a1a;
  font-weight: 400;
}
.faq-link { display: inline-block; margin-top: 0.6em; text-transform: uppercase; }

/* Inner pages — Off+Brand compositions, not homepage leftovers */
/* Inner pages — tighter vertical rhythm */
.page-w.is-inner .is-inner-block {
  padding-bottom: 1.5em;
}
.page-w.is-inner .is-inner-block + .is-inner-block {
  padding-top: 0.25em;
}
.page-w.is-inner .is-faq.is-inner-block {
  padding-top: 1.5em;
  padding-bottom: 2.5em;
}
.page-w.is-inner .sec-kicker {
  margin-bottom: 0.65em;
}

.s.is-open-lede {
  min-height: 72vh;
  display: flex;
  align-items: end;
  padding: 8em 0 2.5em;
}
.s.is-open-lede.is-close { min-height: auto; padding: 5em 0 6em; align-items: start; }
.s.is-stack-hero + .s.is-open-lede {
  min-height: auto;
  padding: 2em 0 0.75em;
  align-items: start;
}
.page-w.is-inner .is-work.is-inner-block {
  padding-bottom: 2.5em;
}
.page-w.is-inner .s.is-mantra {
  padding: 1em 0 0.75em;
}
.about-pillars.surface {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-pillars.surface .about-pillar:nth-child(n+4) {
  border-top: 1px dashed color-mix(in srgb, var(--main-light) 16%, transparent);
  padding-top: 1em;
  margin-top: 0.85em;
}

.pg-lede { grid-column: 3 / 12; max-width: 18ch; }
.s.is-mantra { padding: 2em 0 4em; }
.mantra { grid-column: 2 / 12; display: flex; flex-direction: column; gap: 0.15em; }
.mantra .h-b { max-width: none; }
.why-list { grid-column: 3 / 13; }
.why-row {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) auto;
  column-gap: 1em;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  padding: 1.5em 0 1.8em;
  align-items: start;
}
.why-row:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.why-n { opacity: 0.4; padding-top: 0.45em; }
.why-row h3 {
  text-transform: uppercase;
  font-size: 3.15em;
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.why-row p {
  margin-top: 0.55em;
  max-width: 34em;
  opacity: 0.78;
}
.why-go { font-size: 1.5em; padding-top: 0.35em; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.why-row:hover .why-go { transform: rotate(45deg); }
.prose-lg { padding: 0 0 2.2em; border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent); }
.prose-lg:first-child { border-top: 0; padding-top: 0; }
.prose-lg h3 {
  text-transform: uppercase;
  font-size: 1.35em;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 1.4em 0 0.55em;
}
.prose-lg p { opacity: 0.78; max-width: 38em; }
.prose-lg p + p { margin-top: 1em; }
.home-client-grid.model-grid {
  grid-area: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2em;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  margin-bottom: 1.8em;
  grid-column: 1 / 13;
}
.filter-btn {
  text-transform: uppercase;
  opacity: 0.38;
  padding: 0;
  border-radius: 0;
}
.filter-btn.is-on { opacity: 1; background: none; color: inherit; }
html.dark .filter-btn.is-on { color: inherit; }
.hcs-grid-w.is-magazine {
  grid-area: auto / 1 / auto / 13;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25em;
}
.hcs-grid-w.is-magazine .hcs-item-w { grid-area: auto; }
.hcs-item-w.is-off { display: none; }
.form-stage { grid-column: 5 / 13; padding-bottom: 4em; }
.form { display: flex; flex-direction: column; gap: 2.1em; }
.field { display: flex; flex-direction: column; gap: 0.5em; }
.field > span,
.field.is-q label {
  text-transform: uppercase;
  font-size: 1.35em;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-light) 35%, transparent);
  color: inherit;
  font: inherit;
  font-size: 1.05em;
  padding: 0.7em 0;
  border-radius: 0;
}
.field textarea { min-height: 6.5em; resize: vertical; }
.choices { display: flex; flex-wrap: wrap; gap: 0.45em; }
.choice-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border: 1px solid var(--main-light);
  border-radius: 6.25em;
  padding: 0.5em 1.05em;
  text-transform: uppercase;
  font-size: 0.8em;
}
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip:has(input:checked) {
  background: var(--main-light);
  color: var(--fg);
}
html.light .choice-chip {
  border-color: #080808;
  color: #080808;
}
html.light .choice-chip:has(input:checked) {
  background: #080808;
  border-color: #080808;
  color: #ffffff;
}
html.dark .choice-chip:has(input:checked) {
  background: #ffffff;
  color: #080808;
}
html.light .field input:not([type="checkbox"]):not([type="radio"]),
html.light .field textarea {
  border-bottom-color: rgba(8, 8, 8, 0.32);
}
.form-note { display: none; }
.form-note.is-on { display: block; }
.form-aside { margin-top: 1.4em; opacity: 0.65; max-width: 28em; }
.form-rail {
  grid-column: 1 / 5;
  position: sticky;
  top: 5.5em;
  align-self: start;
  padding-bottom: 3em;
}
.form-rail p { opacity: 0.72; max-width: 18em; }
.form-rail p + p { margin-top: 1.1em; }
.form-rail .h-eyebrow { margin-bottom: 0.9em; opacity: 0.5; }

.hcs-grid-w.is-magazine .hcs-titles { max-width: 100%; }
.hcs-blurb {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8em;
  line-height: 1.35;
  opacity: 0.55;
  margin-top: 0.35em;
  max-width: 28em;
}
.hcs-grid-w.is-duo {
  grid-area: auto / 1 / auto / 13;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25em;
  row-gap: 2em;
}
.hcs-grid-w.is-duo .hcs-item-w { grid-area: auto; }
.hcs-grid-w.is-duo .hcs-item-w:nth-child(2) { padding-top: 4em; }

.slash-path {
  grid-column: 1 / 13;
  text-transform: uppercase;
  font-size: clamp(2.1em, 6.4vw, 4.6em);
  line-height: 0.95;
  letter-spacing: -0.035em;
  padding: 1em 0 2.2em;
  max-width: 22ch;
}
.slash-path .slash { opacity: 0.28; padding: 0 0.12em; }

.grid-main.is-ledger { align-items: start; }
.ledger-head {
  grid-column: 1 / 5;
  position: sticky;
  top: 5.5em;
}
.ledger-head .h-b { max-width: 8ch; }
.ledger-list { grid-column: 5 / 13; }
.ledger-row {
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
  padding: 1.35em 0 1.5em;
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 1em;
}
.ledger-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent); }
.ledger-row h3 { text-transform: uppercase; letter-spacing: -0.02em; }
.ledger-row p { opacity: 0.72; }

.see-table {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.see-head, .see-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
  gap: 1.25em;
  padding: 1.1em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.see-head { opacity: 0.45; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.06em; }
.see-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent); }
.see-row p { opacity: 0.78; }

.svc-index {
  grid-column: 1 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.4em;
  padding: 1.4em 0 0.4em;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.svc-index a { text-transform: uppercase; }
.svc-note { opacity: 0.55; margin: 1.2em 0 0; max-width: 36em; }

.stack-cols {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2em 1.5em;
  padding: 1em 0 3em;
}
.stack-cols h3 {
  text-transform: uppercase;
  opacity: 0.45;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  margin-bottom: 0.8em;
}
.stack-cols li {
  text-transform: uppercase;
  font-size: 1.65em;
  line-height: 1.15;
  letter-spacing: -0.03em;
  padding: 0.35em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 22%, transparent);
}

.rule-prose { grid-column: 4 / 12; padding-bottom: 4em; }
.rule-p {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 1em;
  padding: 1.3em 0;
  border-top: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent);
}
.rule-p:last-child { border-bottom: 1px solid color-mix(in srgb, var(--main-light) 28%, transparent); }
.rule-p p { opacity: 0.78; max-width: 36em; }

.work-count {
  grid-column: 1 / 13;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding-bottom: 1.2em;
}
.work-count .h-a { font-size: 4.2em; line-height: 0.8; }
.work-count span:last-child { text-transform: uppercase; opacity: 0.5; }

.bridge {
  grid-column: 3 / 12;
  max-width: 16ch;
  padding: 2em 0 5em;
}
.bridge a { display: inline-block; margin-top: 0.8em; text-transform: uppercase; }

.sec-kicker { grid-column: 1 / 13; margin: 2em 0 0.2em; opacity: 0.55; }

/* Footer — CTA left (7), link columns right (5), nav bottom-aligned */
.s.is-footer { min-height: auto; display: flex; align-items: start; padding-top: 4em; padding-bottom: 1.25em; }
.grid-main.is-footer { align-items: end; }
.ft-cta-grid {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  min-width: 0;
}
.ft-cta-grid .mbm-diff {
  overflow: hidden;
  padding-bottom: 0.06em;
}
.ft-cta-grid .h-a.is-sub {
  font-size: 4.35em;
}
.ft-cta-row { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.ft-nav {
  grid-column: span 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em 2em;
  margin-top: 0;
  min-width: 0;
  align-self: end;
  align-items: start;
}
.ft-nav > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.ft-nav .h-eyebrow { margin-bottom: 0.8em; opacity: 0.5; }
.ft-nav .page-link-w { display: block; margin: 0.35em 0; }
.ft-nav .page-link-w:last-child { margin-bottom: 0; }
.ft-bar {
  grid-column: 1 / 13;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4em;
  gap: 1.25em 1.5em;
  flex-wrap: nowrap;
}
.ft-bar > .text-small,
.ft-privacy {
  line-height: 1.25;
  margin: 0;
  padding: 0;
}
.ft-privacy {
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s ease;
  flex: none;
  white-space: nowrap;
}
.ft-privacy:hover,
.ft-privacy:focus-visible {
  opacity: 1;
  outline: none;
}

@media (max-width: 1280px) {
  .hud-nav-flex > .page-link-w .btn-icon-w { display: none; }
  .hud-nav-flex { gap: 1em; }
}

/* Tablet: start collapsing multi-column bands */
@media (max-width: 1100px) {
  .intro-lead {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .intro-lead .h-b { max-width: 22ch; }
  .intro-kicker {
    grid-area: auto;
    grid-column: 1 / 7;
    grid-row: auto;
  }
  .intro-body {
    grid-area: auto;
    grid-column: 7 / -1;
    grid-row: auto;
  }
  .is-clients .eb-wrap {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em 0.55em;
    margin-bottom: 0.35em;
  }
  .home-client-grid {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .faq-head {
    grid-area: auto;
    grid-column: 1 / -1;
    position: static;
  }
  .faq-list {
    grid-area: auto;
    grid-column: 1 / -1;
  }
  .eb-wrap.is-sticky {
    grid-area: auto;
    grid-column: 1 / -1;
    position: static;
  }
  .home-work-grid {
    grid-area: auto;
    grid-column: 1 / -1;
  }
  .ft-cta-grid {
    grid-area: auto;
    grid-column: 1 / 8;
  }
  .ft-nav {
    grid-area: auto;
    grid-column: 8 / -1;
  }
  .ft-cta-grid .h-a.is-sub { font-size: 3.6em; }
}

@media (max-width: 991px) {
  body { font-size: clamp(15px, 3.6vw, 17px); }

  .h-a { font-size: clamp(2.6rem, 11vw, 4.5rem); }
  .is-home-hero .h-a {
    font-size: clamp(2.65rem, 12.5vw, 4.4rem);
    white-space: nowrap;
    max-width: 100%;
  }
  .is-home-hero .hh-text-ovf {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }
  .is-home-hero .hh-text-move,
  .is-home-hero .hh-text-block {
    max-width: 100%;
    min-width: 0;
  }
  /* RU mobile: JS fitHomeHeroLines sets exact px; keep a safe fluid fallback */
  html:lang(ru) .is-home-hero .h-a,
  html[lang="ru"] .is-home-hero .h-a {
    font-size: clamp(1.35rem, 10.5cqi, 3.4rem);
    letter-spacing: -0.05em;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  html:lang(ru) .is-home-hero .hh-text-block[hh-tb="1"],
  html:lang(ru) .is-home-hero .hh-text-block[hh-tb="2"],
  html:lang(ru) .is-home-hero .hh-text-block[hh-tb="3"],
  html[lang="ru"] .is-home-hero .hh-text-block[hh-tb="1"],
  html[lang="ru"] .is-home-hero .hh-text-block[hh-tb="2"],
  html[lang="ru"] .is-home-hero .hh-text-block[hh-tb="3"] {
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
  }
  html:lang(ru) .is-home-hero .hh-text-ovf,
  html[lang="ru"] .is-home-hero .hh-text-ovf {
    overflow: visible;
    max-width: 100%;
  }
  .is-home-hero .word-gap {
    width: 0.62em;
  }
  .h-a.is-sub {
    font-size: clamp(2.2rem, 9.5vw, 3.6rem);
    white-space: normal;
  }
  .h-b { font-size: clamp(1.85rem, 7.5vw, 3rem); }
  .h-c { font-size: clamp(1.35rem, 5vw, 2rem); }
  .text-small,
  .intro-body,
  .intro-kicker p,
  .faq-a-inner { font-size: 1.05em; line-height: 1.55; }

  .nav-desk { display: none !important; }
  .hud-menu-o { display: block; }
  .hud-nav-w {
    width: auto;
    height: 3em;
    position: relative;
  }
  .hud-nav-flex {
    width: auto;
    height: 3em;
    gap: 0.75em;
    justify-content: flex-end;
    align-items: center;
    /* Reserve slot for absolute burger so lang doesn't sit under it */
    padding-right: 3.15em;
    box-sizing: border-box;
  }
  .hud-lang {
    --toggle-h: 1.85em;
    position: relative;
    z-index: 25;
  }
  .hud-menu-content .mode,
  .hud-menu-o .mode {
    --toggle-h: 1.85em;
  }
  .pre-logo {
    width: min(8.5rem, 42vw);
  }
  .hud-menu-o {
    top: 0;
    right: 0;
    width: 3em;
    height: 3em;
    padding: 0;
  }
  .hud-menu-o.is-open {
    width: min(19.5em, 88vw);
    height: auto;
    min-height: 18em;
    padding: 4.5em 1.55em 1.55em;
  }
  .hud-menu-link {
    font-size: 1.28em;
    padding: 0.48em 0;
    letter-spacing: -0.02em;
  }
  .hud-menu-link-w { gap: 0.15em; }
  .hud-menu-sub {
    font-size: 0.92em;
    margin: 1em 0 0.4em;
    opacity: 0.72;
  }
  .c { padding-left: max(1.1rem, 4.5vw); padding-right: max(1.1rem, 4.5vw); }
  .spacer-10 { height: 3.5em; }
  .spacer-10.is-sm { height: 2em; }
  .spacer-5 { height: 2.5em; }
  .grid-main { row-gap: 1.5em; column-gap: 0.85em; }

  /* Hero — stacked, readable; Explore stays in flow at bottom (no absolute) */
  .c.is-home-hero {
    height: auto;
    min-height: 100svh;
    padding-top: 5.5em;
    padding-bottom: 1.35em;
  }
  .grid-main.is-home-hero {
    height: auto;
    min-height: calc(100svh - 7em);
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 0;
  }
  .hh-text-block[hh-tb="1"],
  .hh-text-block[hh-tb="2"],
  .hh-text-block[hh-tb="3"] {
    grid-area: auto;
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: start;
    text-align: left;
    place-self: start;
    position: static;
    padding: 0;
    margin: 0;
  }
  /* Center the three title lines as a group */
  .hh-text-block[hh-tb="1"] {
    margin-top: auto;
  }
  /* Equal gap between title rows — same spacing 1→2 and 2→3 */
  .is-home-hero .hh-text-block[hh-tb="1"] .h-a,
  .is-home-hero .hh-text-block[hh-tb="2"] .h-a {
    display: block;
    padding: 0;
    padding-bottom: 0.55em;
    margin: 0;
  }
  .is-home-hero .hh-text-block[hh-tb="3"] {
    margin-top: 0;
    overflow: visible;
    /* Reserve full title-line height on mobile flex stack */
    min-height: 1.2em;
  }
  .is-home-hero .hh-text-block[hh-tb="3"] .h-a {
    display: flex;
    align-items: center;
    box-sizing: content-box;
    height: 1.15em;
    min-height: 1.15em;
    max-height: 1.15em;
    padding: 0;
    margin: 0;
    line-height: 1;
    overflow: visible;
  }
  /* Room for blur without changing layout height */
  .is-home-hero .hh-text-block[hh-tb="3"] .hh-text-ovf {
    overflow: visible;
    padding: 0;
    min-height: 1.15em;
    height: 1.15em;
  }
  .is-home-hero .type-word {
    max-width: 100%;
    overflow: visible;
    line-height: 1;
    padding: 0;
    height: 100%;
  }
  .is-home-hero .type-ch {
    line-height: 1;
    padding-bottom: 0;
  }
  /* Explore: bottom of hero on mobile only; fades out on scroll via GSAP */
  .hh-text-block[hh-tb="4"] {
    grid-area: auto;
    grid-column: auto;
    margin-top: auto;
    margin-bottom: 0;
    width: max-content;
    max-width: 100%;
    place-self: end start;
    position: static;
    padding: 0;
    opacity: 0.7;
    z-index: auto;
  }
  .is-home-hero .hh-text-ovf {
    overflow: hidden;
    max-width: 100%;
  }
  .is-home-hero .hh-text-block[hh-tb="3"] .hh-text-ovf {
    overflow: visible;
  }

  /* RU fallback when JS fit hasn't run yet — cqi = content box, not 100vw */
  html:lang(ru) .is-home-hero .h-a,
  html[lang="ru"] .is-home-hero .h-a {
    font-size: clamp(1.35rem, 10.5cqi, 3.2rem);
    letter-spacing: -0.05em;
    text-align: left;
    max-width: 100%;
  }
  html:lang(ru) .is-home-hero .hh-text-ovf,
  html[lang="ru"] .is-home-hero .hh-text-ovf {
    overflow: visible;
    max-width: 100%;
  }

  /* Full-width grid children — grid-area FIRST, then column (order matters) */
  .intro-lead,
  .intro-kicker,
  .intro-body,
  .is-clients .eb-wrap,
  .home-client-grid,
  .eb-wrap.is-sticky,
  .hcs-grid-w,
  .home-work-grid,
  .faq-head,
  .faq-list,
  .pg-lede,
  .mantra,
  .why-list,
  .form-stage,
  .form-rail,
  .slash-path,
  .ledger-head,
  .ledger-list,
  .see-table,
  .stack-cols,
  .rule-prose,
  .bridge,
  .bento,
  .bento.is-inset,
  .step-cards,
  .svc-tiles,
  .svc-hero-meta,
  .hcs-grid-w.is-bento,
  .is-inner-work .work-toolbar,
  .ft-cta-grid,
  .ft-nav,
  .bento.is-inset,
  .work-grid-3,
  .work-strip,
  .work-trio,
  .about-work-duo,
  .svc-mosaic,
  .svc-models,
  .cta-rail,
  .about-mosaic,
  .about-pillars,
  .about-marquee,
  .proc-track,
  .proc-compare,
  .proc-future,
  .tech-layers,
  .tech-ring-wrap,
  .tech-statement,
  .contact-ticket,
  .legal-sheet,
  .svc-mag,
  .svc-ladder,
  .svc-orbit,
  .svc-narrow,
  .svc-window-wrap,
  .svc-specimen,
  .svc-chips,
  .svc-rows,
  .engage-band,
  .proc-banner,
  .svc-cta-band,
  .about-split,
  .why-rows-glass,
  .path-band,
  .proc-timeline,
  .see-glass,
  .tech-cols,
  .tech-pill-wrap,
  .tech-quote,
  .svc-editorial,
  .svc-split,
  .svc-modules,
  .svc-stack,
  .svc-nav-row,
  .svc-note-band,
  .is-contact-split,
  .rule-stack,
  .is-inner-work .sec-kicker {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Intro — stacked, no narrow columns */
  .s.is-intro .grid-main { row-gap: 1.25em; }
  .intro-lead .h-b { max-width: none; }
  .intro-kicker .page-link-w { margin-top: 1em; }
  .intro-body { max-width: 40em; }

  /* Capabilities */
  .is-clients .eb-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 0.5em;
    margin-bottom: 0.25em;
  }
  .is-clients .h-eyebrow { font-size: 0.95em; }
  .home-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-client-cell {
    height: auto;
    min-height: 4.75em;
    font-size: 0.92em;
    padding: 0.85em 0.55em;
    letter-spacing: -0.01em;
  }

  .about-split,
  .tech-cols,
  .svc-editorial,
  .is-contact-split,
  .engage-band,
  .about-mosaic,
  .svc-orbit,
  .svc-window-wrap,
  .svc-models,
  .about-pillars,
  .svc-orbit-bands,
  .proc-compare-row { grid-template-columns: 1fr; }
  .svc-mosaic { grid-template-columns: 1fr; }
  .svc-tile,
  .svc-tile.is-f1,
  .svc-tile.is-s1,
  .svc-tile.is-s2,
  .svc-tile.is-s3,
  .svc-tile.is-s4,
  .svc-tile.is-s5 {
    grid-column: span 1;
    grid-row: span 1;
    min-height: auto;
  }
  .about-stat,
  .about-pull,
  .about-studio,
  .about-tl-row { grid-column: span 1; }
  .about-pull { padding-left: 0; }
  .about-tl-row { flex-direction: column; }
  .about-tl-cell {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
    padding-bottom: 0.85em;
    margin-bottom: 0.85em;
  }
  .about-tl-cell:last-child { border-bottom: 0; margin-bottom: 0; }
  .about-pillar,
  .svc-model {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
    padding-right: 0;
    padding-bottom: 1em;
  }
  .about-pillar:last-child,
  .svc-model:last-child { border-bottom: 0; }
  .svc-mag { grid-template-columns: 1fr; }
  .svc-mag-num { position: static; font-size: 3em; }
  .svc-orbit-scope {
    max-width: none;
    margin: 1em 0 0;
    border-radius: var(--small-radius);
    aspect-ratio: auto;
  }
  .svc-orbit-band {
    border-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--main-light) 18%, transparent);
  }
  .contact-ticket { grid-template-columns: 1fr; }
  .svc-specimen { grid-template-columns: 1fr 1fr; }
  .engage-band div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--main-light) 25%, transparent);
    padding-top: 0.75em;
  }
  .engage-band div:first-child { border-top: 0; padding-top: 0; }
  .svc-split { grid-template-columns: 1fr; }
  .svc-split-num { position: static; }
  .svc-module-grid { grid-template-columns: 1fr 1fr; }
  .see-glass-head,
  .see-glass-row { grid-template-columns: 1fr; }
  .work-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8,
  .span-12 { grid-column: 1 / -1; }
  .step-card.is-full { grid-column: span 1; }
  .step-cards { grid-template-columns: 1fr; }
  .svc-tiles { grid-template-columns: 1fr 1fr; }

  .hcs-grid-w { grid-template-columns: 1fr 1fr; }
  .home-work-grid { grid-template-columns: 1fr 1fr; gap: var(--hw-gap, 0.85rem); }
  .hcs-item-w { grid-area: auto; }
  .eb-wrap.is-sticky { position: static; }
  .faq-head { position: static; margin-bottom: 0.5em; }
  .faq-head .h-b { max-width: none; }
  .faq-q { font-size: 1.1em; max-width: none; }
  .faq-a-inner { padding-right: 0; max-width: none; }
  .inner-split,
  .form-row { grid-template-columns: 1fr; }
  .why-row { grid-template-columns: 2.2em minmax(0, 1fr) auto; }
  .why-row h3 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .model-grid,
  .hcs-grid-w.is-duo,
  .stack-cols,
  .see-table,
  .see-head,
  .see-row,
  .hcs-grid-w.is-bento { grid-template-columns: 1fr; }
  .hcs-grid-w.is-bento .hcs-item-w.is-wide { grid-column: span 1; }
  .ledger-row { grid-template-columns: 1fr; }
  .form-rail { position: static; }
  .hcs-grid-w.is-duo .hcs-item-w:nth-child(2) { padding-top: 0; }
  .form-stage { padding-bottom: 2em; }
  .s.is-open-lede { padding-top: 6em; min-height: 58vh; }
  .hcs-grid-w.is-magazine { grid-template-columns: 1fr 1fr; }
  /* Letter + rings share one size so they stay proportional on mobile.
     Must zero min-* on .is-2 — base .orb-outline-w.is-2 uses min-width:56em (wins on specificity). */
  .orb-w {
    --dgt-orb: 72vw;
    --dgt-ring-1: 96vw;
    --dgt-ring-2: 128vw;
    --dgt-glow: min(128vw, 42rem);
  }
  .orb {
    min-width: 0;
    min-height: 0;
    width: var(--dgt-orb);
    height: var(--dgt-orb);
  }
  .orb-outline-w,
  .orb-outline-w.is-2 {
    min-width: 0;
    min-height: 0;
  }
  .orb-outline-w {
    width: var(--dgt-ring-1);
    height: var(--dgt-ring-1);
  }
  .orb-outline-w.is-2 {
    width: var(--dgt-ring-2);
    height: var(--dgt-ring-2);
  }
  .orb-outline {
    border-width: 1.5px;
    border-color: rgba(255, 255, 255, 0.55);
  }
  html.light .orb-outline {
    border-color: rgba(8, 8, 8, 0.5) !important;
  }
  .orb-backglow {
    width: var(--dgt-glow);
    height: var(--dgt-glow);
  }

  /* Footer */
  .grid-main.is-footer { align-items: start; }
  .ft-cta-grid {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .ft-cta-grid .h-a.is-sub { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .ft-cta-grid .mbm-diff .h-a.is-sub {
    padding-bottom: 0.14em;
  }
  .ft-cta-grid .mbm-diff:has(+ .btn-w) .h-a.is-sub,
  .ft-cta-grid > .mbm-diff:last-of-type .h-a.is-sub {
    padding-bottom: 0;
  }
  /* Flatten row so the button can move under the full heading */
  .ft-cta-row {
    display: contents;
  }
  .ft-cta-grid > .btn-w.is-large,
  .ft-cta-row > .btn-w.is-large {
    order: 20;
    margin-top: 0.85em;
    width: auto;
    max-width: 100%;
  }
  .ft-nav {
    margin-top: 2.25em;
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: 1.75em 1.25em;
  }
  .ft-bar {
    margin-top: 2.75em;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 1em;
  }
  .s.is-footer { padding-top: 3em; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .c { padding-left: 1.15rem; padding-right: 1.15rem; }

  .is-home-hero .h-a { font-size: clamp(2.45rem, 13.5vw, 3.7rem); }
  html:lang(ru) .is-home-hero .h-a,
  html[lang="ru"] .is-home-hero .h-a {
    font-size: clamp(1.3rem, 10.5cqi, 3rem);
    letter-spacing: -0.05em;
    text-align: left;
    max-width: 100%;
  }
  .h-b { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .h-a.is-sub { font-size: clamp(1.9rem, 10.5vw, 2.75rem); }

  .home-client-grid { grid-template-columns: 1fr 1fr; }
  .home-client-cell {
    min-height: 4.4em;
    font-size: 0.82em;
    padding: 0.7em 0.4em;
  }

  .hcs-grid-w,
  .hcs-grid-w.is-magazine,
  .hcs-grid-w.is-duo,
  .hcs-grid-w.is-bento,
  .home-work-grid,
  .model-grid,
  .stack-cols,
  .svc-tiles,
  .work-grid-3,
  .work-trio,
  .about-work-duo,
  .svc-specimen,
  .svc-module-grid { grid-template-columns: 1fr; }

  .ft-nav { grid-template-columns: 1fr; gap: 1.75em; }
  .ft-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
  }
  .ft-privacy {
    margin-left: 0;
  }
  .btn-w.is-large { width: 100%; max-width: 18em; }
  .faq-btn { padding: 1em 0; gap: 0.85em; }
  .faq-q { font-size: 1.05em; }
}

@media (max-width: 420px) {
  .is-home-hero .h-a { font-size: clamp(2.2rem, 13vw, 3.2rem); }
  html:lang(ru) .is-home-hero .h-a,
  html[lang="ru"] .is-home-hero .h-a {
    font-size: clamp(1.25rem, 10.5cqi, 2.85rem);
    letter-spacing: -0.055em;
    text-align: left;
    max-width: 100%;
  }
  .home-client-grid { grid-template-columns: 1fr; }
  .home-client-cell {
    min-height: 3.6em;
    font-size: 0.95em;
    justify-content: flex-start;
    padding-left: 1em;
  }
}

/* Cards: fully opaque — wins over any later transparent reset */
.surface,
a.surface,
article.surface,
form.surface,
nav.surface,
blockquote.surface {
  background-color: var(--card-bg);
  background-image: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .about-marquee-track { transform: none; }
  .pre-w, .cursor-w { display: none !important; }
  html, body { cursor: auto; }
  .char { transform: none !important; opacity: 1 !important; }
}


/* SOLID TEXT ENFORCEMENT */
html.dark {
  --text-muted: #c8c8c8;
  --text-label: #f2f2f2;
}
html.light {
  --text-muted: #3a3a3a;
  --text-label: #141414;
}

.page-w :is(.h-eyebrow, .sec-kicker, .text-mini, .hud-scroll-w) {
  opacity: 1 !important;
  color: var(--text-label);
}
.page-w .h-eyebrow.is-outline {
  color: var(--text-label) !important;
  border-color: var(--text-label) !important;
}

.page-w :is(
  p, .faq-a-inner, .intro-body, .prose-lg p,
  .svc-tile p, .proc-card p, .svc-model p, .cta-rail p,
  .about-studio p, .about-tl-cell p, .about-pillar p,
  .tl-item p, .why-row-g p, .proc-step p, .ledger-row p,
  .form-aside, .form-rail p, .contact-rail p, .contact-aside
) {
  opacity: 1 !important;
}

.page-w :is(
  .svc-tile-n, .svc-model-n, .proc-card-n, .svc-row-n, .why-n,
  .tl-y, .about-y-l, .about-tl-cell span, .rule-item .rule-n,
  .tech-layer-n, .svc-ladder-n, .filter-btn
) {
  opacity: 1 !important;
  color: var(--text-label);
}

.page-w p {
  color: var(--text-muted);
}
.page-w .faq-a-inner {
  color: #f2f2f2;
  font-weight: 300;
  opacity: 1;
}
html.light .page-w .faq-a-inner {
  color: #1a1a1a;
  font-weight: 400;
}

.page-w .ft-nav .h-eyebrow,
.page-w .form-rail .h-eyebrow,
.page-w .contact-rail .h-eyebrow {
  opacity: 1 !important;
  color: var(--text-label);
}