/* ==========================================================================
   ECHO · Make noise that matters
   Black dominates, white clarifies, electric lime strikes.
   ========================================================================== */

/* ---------- fonts (self-hosted, SIL Open Font License: see assets/fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --lime: #e5f90a;
  --lime-hover: #f1ff4d;
  --glow: #9bff03;

  --surface-raised: #0f0f0f;
  --surface-high: #1c1c1c;
  --line: #2e2e2e;
  --line-strong: #6b6b6b;
  --ink-subtle: #8a8a8a;
  --ink-muted: #a8a8a8;
  --ink-soft: #cfcfcf;

  --font-display: 'Orbitron', 'Eurostile', 'Microgramma', sans-serif;
  --font-text: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1440px;
  --nav-h: 72px;
  --section-y: clamp(64px, 8vw, 120px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: var(--line) var(--black);
  scrollbar-width: thin;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100vh;
  /* no background here: the fixed terrain canvas sits behind body content */
  color: var(--white);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.625;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--lime);
}

::selection { background: var(--lime); color: var(--black); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--lime);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip:focus-visible { transform: none; }

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---------- type ---------- */

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}
.display--xl {
  font-size: clamp(2rem, 0.85rem + 5.2vw, 5.25rem);
  font-weight: 900;
  line-height: 0.98;
}
.display--l {
  font-size: clamp(1.85rem, 1rem + 3.4vw, 4rem);
  line-height: 1.02;
}
.line { display: block; overflow: hidden; padding-block: 0.02em 0.06em; margin-block: -0.02em -0.06em; }
.line > span { display: block; }
.line--pay { color: var(--lime); }

.lead {
  font-size: clamp(1.05rem, 0.95rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  text-wrap: pretty;
}

.micro {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* ---------- terrain ---------- */

.terrain,
.terrain-fallback {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
}
.terrain { opacity: 1; background: var(--black); }
.terrain-fallback {
  display: none;
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(155, 255, 3, 0.16), transparent 70%),
    radial-gradient(55% 50% at 100% 100%, rgba(229, 249, 10, 0.12), transparent 70%),
    var(--black);
}
.no-webgl .terrain { display: none; }
.no-webgl .terrain-fallback { display: block; }

/* ---------- corner-tick frame ---------- */

.ticks {
  --tick: 10px;
  --tick-c: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ticks::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--tick-c), var(--tick-c)) top left / var(--tick) 1px,
    linear-gradient(var(--tick-c), var(--tick-c)) top left / 1px var(--tick),
    linear-gradient(var(--tick-c), var(--tick-c)) top right / var(--tick) 1px,
    linear-gradient(var(--tick-c), var(--tick-c)) top right / 1px var(--tick),
    linear-gradient(var(--tick-c), var(--tick-c)) bottom left / var(--tick) 1px,
    linear-gradient(var(--tick-c), var(--tick-c)) bottom left / 1px var(--tick),
    linear-gradient(var(--tick-c), var(--tick-c)) bottom right / var(--tick) 1px,
    linear-gradient(var(--tick-c), var(--tick-c)) bottom right / 1px var(--tick);
  background-repeat: no-repeat;
}

/* ---------- buttons, tags, links ---------- */

.btn {
  --h: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--h);
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    transform 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn .icon { transition: transform 0.45s var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(4px); }

.btn--primary { background: var(--lime); color: var(--black); }
.btn--primary:hover { background: var(--lime-hover); }
.btn--primary:focus-visible { outline-color: var(--white); }

.btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.07); }

.btn--sm { --h: 44px; padding: 0 18px; font-size: 12px; gap: 10px; }
.btn--block { width: 100%; }

.tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.tag::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line-strong);
  transform: skewX(-26deg);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.tag--lime { color: var(--black); }
.tag--lime::before { background: var(--lime); border-color: var(--lime); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lime);
}
.link-arrow .icon { transition: transform 0.45s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top);
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: var(--black);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-101%); }
.nav__bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__brand { flex: none; display: block; padding: 8px 0; }
.nav__brand img { width: auto; height: 22px; }
.nav__links {
  display: flex;
  gap: 36px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav__links a:hover,
.nav__links a[aria-current='true'] { color: var(--white); }
.nav__links a:hover::after,
.nav__links a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }

.nav__menu {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 0 0 12px;
  margin-right: -4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__menu-icon { position: relative; width: 22px; height: 12px; }
.nav__menu-icon i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.nav__menu-icon i:first-child { top: 0; }
.nav__menu-icon i:last-child { top: 10px; }
.nav__menu[aria-expanded='true'] .nav__menu-icon i:first-child { top: 5px; transform: rotate(45deg); }
.nav__menu[aria-expanded='true'] .nav__menu-icon i:last-child { top: 5px; transform: rotate(-45deg); }

/* mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 24px) 0 calc(24px + env(safe-area-inset-bottom));
  background: var(--black);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(0.06s + var(--i) * 0.05s);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a:last-child { color: var(--lime); }
.menu__foot { display: grid; gap: 18px; }
.menu__foot .micro { text-align: center; }

/* ---------- sections share a scrim so type stays on calm ground ---------- */

main > section,
.footer { position: relative; isolation: isolate; }
main > section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 48px) 0 clamp(40px, 9vh, 104px);
}
.hero::before {
  background:
    radial-gradient(64% 74% at 20% 68%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 42%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%);
}
.hero__inner { position: relative; }
.hero__title { max-width: 12ch; }
.hero__lead { margin-top: clamp(20px, 2.4vw, 32px); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.2vw, 44px);
}
.hero__hint { margin-top: 28px; }
.hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hint--fine { display: none; }
  .hint--touch { display: inline; }
}

.hud {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  bottom: clamp(40px, 9vh, 104px);
  width: 268px;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background-color: rgba(0, 0, 0, 0.82);
}
.hud__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hud__row:first-child { color: var(--white); }
.hud b { font-weight: 600; color: var(--white); display: inline-block; min-width: 7ch; text-align: right; }

/* ---------- statement ---------- */

.statement { padding: var(--section-y) 0 calc(var(--section-y) * 0.8); }
.statement::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.78) 100%);
}
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 7vw, 96px);
}
.statement__text {
  font-size: clamp(1.55rem, 0.9rem + 2.5vw, 3.35rem);
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: pretty;
}
.statement__text .w { color: #4a4a4a; transition: color 0.5s var(--ease-out); }
.statement__text .w.is-lit { color: var(--white); }
.nots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.nots li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}
.nots li:last-child { color: var(--white); }
.nots .icon { margin-top: 2px; color: var(--line-strong); }
.nots__mark { width: 30px; height: auto; margin-top: 4px; flex: none; }

/* ---------- marquee ---------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-block: 1px solid var(--line);
  background: var(--black);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  width: max-content;
  padding-left: clamp(24px, 3vw, 44px);
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.9rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track img { width: auto; height: clamp(18px, 0.6rem + 1.4vw, 34px); flex: none; }
html:not(.js) .marquee__track { flex-wrap: wrap; width: auto; }

/* ---------- services ---------- */

.services { padding: var(--section-y) 0; }
.services::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.2) 100%);
}
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px 64px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.services__aside { display: grid; gap: 24px; justify-items: start; }
.services__intro { color: var(--ink-muted); max-width: 40ch; }
.readout {
  display: grid;
  gap: 6px;
  min-width: 250px;
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.82);
}
.readout__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease-out);
}
.readout.is-live .readout__name { color: var(--lime); }

.svc-list { border-bottom: 1px solid var(--line); }
.svc { position: relative; border-top: 1px solid var(--line); }
.svc::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.svc.is-active::before,
.svc.is-open::before { transform: scaleX(1); }

.svc__h { font: inherit; }
.svc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: clamp(22px, 2.8vw, 38px) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.svc__title { display: grid; gap: 8px; min-width: 0; }
.svc__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 0.7rem + 2.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
  transition: color 0.45s var(--ease-out), transform 0.7s var(--ease-out);
}
.svc__line { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.svc__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.svc__icon .icon { transition: transform 0.55s var(--ease-out); }
.svc.is-open .svc__icon { background: var(--white); border-color: var(--white); color: var(--black); }
.svc.is-open .svc__icon .icon { transform: rotate(135deg); }
.svc.is-active .tag::before,
.svc.is-open .tag::before { border-color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .svc-list.has-active .svc:not(.is-active):not(.is-open) .svc__name { color: #6f6f6f; }
  .svc.is-active .svc__name { transform: translateX(10px); }
  .svc__head:hover .svc__icon { border-color: var(--white); }
}

.svc__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.65s var(--ease-out);
}
.js .svc__body { grid-template-rows: 0fr; }
.js .svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc__body > .svc__inner { overflow: hidden; min-height: 0; }
.svc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}
.svc__inner > * { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out) 0.12s, transform 0.6s var(--ease-out) 0.12s; }
.js .svc:not(.is-open) .svc__inner > * { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.svc__desc {
  grid-column: 1;
  padding-bottom: clamp(28px, 3vw, 44px);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 44ch;
}
.svc__list { grid-column: 2; display: grid; gap: 10px; padding-bottom: 32px; }
.svc__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-muted);
}
.svc__list li::before { content: ''; width: 12px; height: 1px; background: var(--line-strong); flex: none; }
.svc__inner .link-arrow { grid-column: 3; margin-top: -10px; }

/* ---------- approach ---------- */

.approach { padding: var(--section-y) 0; }
.approach::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 100%); }
.approach__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.approach__head .lead { color: var(--ink-muted); }

.route {
  --progress: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 56px;
}
.route::before {
  content: '';
  position: absolute;
  inset: 34px calc(var(--gutter) * -0.75) -48px;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  /* feathered on all four sides so the terrain dims into the copy instead of being cut */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-composite: intersect;
}
.route__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 1px;
  background: var(--line);
}
.route__fill {
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: scaleX(var(--progress));
  transform-origin: left;
}
.route__step { position: relative; display: grid; gap: 14px; align-content: start; }
.route__mark {
  position: absolute;
  top: -56px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.route__mark i {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-strong);
  background: var(--black);
  transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.route__mark i::before,
.route__mark i::after {
  content: '';
  position: absolute;
  background: var(--line-strong);
  transition: background-color 0.5s var(--ease-out);
}
.route__mark i::before { left: 50%; top: 5px; bottom: 5px; width: 1px; margin-left: -0.5px; }
.route__mark i::after { top: 50%; left: 5px; right: 5px; height: 1px; margin-top: -0.5px; }
.route__mark .micro { padding: 0 8px; background: var(--black); transition: color 0.5s var(--ease-out); }
.route__step.is-reached .route__mark i { border-color: var(--lime); }
.route__step.is-reached .route__mark i::before,
.route__step.is-reached .route__mark i::after { background: var(--lime); }
.route__step.is-reached .route__mark .micro { color: var(--white); }
.route__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.route__step p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; max-width: 32ch; }

/* ---------- growth ---------- */

.growth { padding: var(--section-y) 0; }
.growth::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%); }
.growth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(48px, 8vw, 128px);
  align-items: start;
}
.growth__copy { display: grid; gap: clamp(24px, 3vw, 36px); }
.growth__copy .lead { color: var(--ink-muted); }
.divisions { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.divisions::before {
  content: '';
  position: absolute;
  inset: -48px calc(var(--gutter) * -0.75);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 62% at 50% 50%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0) 100%);
}
.division {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.division img { width: 32px; height: auto; flex: none; }
.division__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.division:not(.division--now) img { opacity: 0.32; }
.division--now .division__name { color: var(--white); }

/* ---------- start ---------- */

.start { padding: var(--section-y) 0 calc(var(--section-y) * 0.9); }
.start::before {
  background:
    radial-gradient(70% 80% at 0% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.25) 100%);
}
.start__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px clamp(48px, 7vw, 112px);
  align-items: center;
}
.start__copy { display: grid; gap: clamp(24px, 3vw, 36px); }

.brief {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 36px);
  background-color: var(--surface-raised);
  border: 1px solid var(--line);
  --tick-c: var(--line-strong);
}
.brief::after { inset: -1px; }
.brief__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.brief__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 10px; min-width: 0; }
.field__label {
  padding: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
legend.field__label { margin-bottom: 12px; }
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 16px;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__input--area { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field__input::placeholder { color: #7a7a7a; }
.field__input:hover { border-color: var(--line-strong); }
.field__input:focus-visible { outline: none; border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  transition: background-color 0.3s var(--ease-out);
}
.chip:hover { border-color: var(--white); color: var(--white); }
.chip[aria-pressed='true'] { background: var(--white); border-color: var(--white); color: var(--black); }
.chip[aria-pressed='true']::before { background: var(--black); }

.brief__preview {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--surface-high);
}
.brief__preview p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.brief__note { font-size: 13px; line-height: 1.5; color: var(--ink-subtle); margin-top: -8px; }
.brief__note--pending,
.brief__note--done { color: var(--white); }
.brief__note--error { color: var(--white); }
.brief__note--error::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border: 1px solid var(--white);
  transform: skewX(-26deg);
}
.brief__note--done::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--lime);
  transform: skewX(-26deg);
}
.brief__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief__note--pending::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--lime);
  transform: skewX(-26deg);
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ---------- footer ---------- */

.footer {
  padding: clamp(64px, 8vw, 112px) 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--black);
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.footer__brand img { width: clamp(220px, 26vw, 340px); height: auto; }
.footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 32px clamp(40px, 6vw, 96px); }
.footer__cols .micro { margin-bottom: 18px; }
.footer__cols ul { display: grid; gap: 4px; }
.footer__cols a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.footer__cols a:hover { color: var(--lime); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-soft);
}
.footer__base { padding-right: 76px; }
.footer__top-link .icon { width: 16px; height: 16px; transition: transform 0.45s var(--ease-out); }
.footer__top-link:hover { color: var(--white); }
.footer__top-link:hover .icon { transform: translateY(-3px); }

/* ---------- logo motion ----------
   The E's three bars travel in like sound, C and H follow,
   the lightning tile strikes, flashes once and sends out echo rings. */

.mark { display: block; overflow: visible; }
.mark path,
.mark g { transform-box: fill-box; }
.mark__bar { transform-origin: 0% 50%; }
.mark__c,
.mark__h { transform-origin: 0% 50%; }
.mark__tile { transform-origin: 50% 50%; }
.mark__badge { transform-origin: 50% 50%; }
.mark__ring {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
  opacity: 0;
}

.nav__brand .mark { width: 137px; height: 22px; }

@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover .mark__bar { animation: mark-echo 0.62s var(--ease-out) calc(var(--i) * 0.07s); }
  .nav__brand:hover .mark__tile { animation: mark-nudge 0.55s var(--ease-out) 0.14s; }
}

.intro { display: none; }
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--black);
  animation: intro-out 0.9s var(--ease-in-out) 2.45s forwards;
}
.intro.is-skipped { animation: intro-skip 0.55s var(--ease-in-out) forwards; }
.intro.is-done { display: none !important; }
.intro__stage {
  width: min(760px, 78vw);
  animation: stage-out 0.8s var(--ease-in-out) 2.4s forwards;
}
.intro.is-skipped .intro__stage { animation: stage-skip 0.45s var(--ease-in-out) forwards; }
.mark--intro { width: 100%; height: auto; }

.intro-on .mark--intro .mark__bar,
.mark--loop.is-playing .mark__bar { animation: mark-bar 0.75s var(--ease-out) calc(0.18s + var(--i) * 0.09s) both; }
.intro-on .mark--intro .mark__c,
.mark--loop.is-playing .mark__c { animation: mark-slide 0.75s var(--ease-out) 0.42s both; }
.intro-on .mark--intro .mark__h,
.mark--loop.is-playing .mark__h { animation: mark-slide 0.75s var(--ease-out) 0.52s both; }
.intro-on .mark--intro .mark__tile,
.mark--loop.is-playing .mark__tile { animation: mark-strike 0.62s cubic-bezier(0.2, 0.9, 0.2, 1) 0.72s both; }
.intro-on .mark--intro .mark__badge,
.mark--loop.is-playing .mark__badge { animation: mark-thump 0.5s var(--ease-out) 1.04s both; }
.intro-on .mark--intro .mark__ring,
.mark--loop.is-playing .mark__ring { animation: mark-ring 1.25s cubic-bezier(0.2, 0.7, 0.3, 1) calc(1.04s + var(--i) * 0.17s) forwards; }
.intro-on .mark--intro .mark__letter,
.mark--loop.is-playing .mark__letter { animation: mark-letter 0.55s var(--ease-out) calc(1.25s + var(--i) * 0.028s) both; }

@keyframes mark-bar {
  0% { transform: scaleX(0); }
  62% { transform: scaleX(1.05); }
  100% { transform: scaleX(1); }
}
@keyframes mark-slide {
  from { opacity: 0; transform: translateX(-22%); }
  to { opacity: 1; transform: none; }
}
@keyframes mark-strike {
  0% { opacity: 0; transform: translate(24%, -42%) scale(1.3); }
  55% { opacity: 1; transform: translate(-2%, 3%) scale(0.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes mark-thump {
  0% { transform: none; }
  30% { transform: scale(1.07); }
  100% { transform: none; }
}
@keyframes mark-ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.5); }
}
@keyframes mark-letter {
  from { opacity: 0; transform: translateY(45%); }
  to { opacity: 1; transform: none; }
}
@keyframes mark-echo {
  0% { transform: none; }
  40% { transform: scaleX(0.5); }
  100% { transform: none; }
}
@keyframes mark-nudge {
  0% { transform: none; }
  35% { transform: translate(5%, -9%); }
  100% { transform: none; }
}
@keyframes stage-out {
  to { opacity: 0; transform: translateY(-36px) scale(0.97); }
}
@keyframes stage-skip {
  to { opacity: 0; transform: translateY(-24px) scale(0.98); }
}
@keyframes intro-out {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@keyframes intro-skip {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* ---------- inner pages ---------- */

.nav__links { gap: 28px; }
.nav__links a[aria-current='page'] { color: var(--white); }
.nav__links a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.menu__links a[aria-current='page'] { color: var(--lime); }

.hero--page { min-height: 58vh; min-height: 58svh; padding-bottom: clamp(32px, 5vh, 64px); }
.hero--page .hero__title { max-width: 14ch; }

.scrim-left::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.35) 100%); }
.scrim-strong::before { background: rgba(0, 0, 0, 0.8); }
.scrim-soft::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 100%); }

.page-section { padding: var(--section-y) 0; }
.page-section--tight { padding: calc(var(--section-y) * 0.6) 0; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .lead { color: var(--ink-muted); }
.section-foot { margin-top: clamp(32px, 4vw, 48px); }
.prose { max-width: 64ch; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 1em; }
.prose--lead { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.55; color: var(--white); font-weight: 300; }

/* division blocks (services page) */
.division-block { padding: var(--section-y) 0; scroll-margin-top: var(--nav-h); }
.division-block__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.division-block__head .lead { color: var(--ink-soft); }
.offer-list { border-top: 1px solid var(--line); }
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px 48px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.offer__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.offer__desc { color: var(--ink-muted); font-size: 16px; max-width: 52ch; }
.division-block .link-arrow { margin-top: 28px; }
.draft-note { margin-top: 12px; }

/* home: divisions list */
.division a.division__link {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.division a.division__link .icon { margin-left: auto; color: var(--ink-subtle); transition: transform 0.45s var(--ease-out), color 0.3s var(--ease-out); }
.division a.division__link:hover .icon { transform: translateX(5px); color: var(--lime); }
.division a.division__link:hover .division__name { color: var(--white); }

/* work cards */
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 2px;
}
.work-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface-raised);
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out);
}
.work-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.work-card:hover { background: var(--surface-high); }
.work-card:hover::before,
.work-card:focus-visible::before { transform: scaleX(1); }
.work-card__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #070707;
}
.work-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.work-card:hover .work-card__cover img { transform: scale(1.03); }
.work-card__blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.work-card__blank img { width: 64px; height: auto; opacity: 0.25; }
.work-card__body { display: grid; gap: 10px; align-content: start; padding: 22px 22px 26px; }
.work-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.work-card__summary { color: var(--ink-muted); font-size: 15px; }

/* case study */
.case-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 28px; }
.case-meta div { display: grid; gap: 4px; }
.case-meta dt { font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-subtle); }
.case-meta dd { margin: 0; font-size: 17px; }
.case-cover { position: relative; margin: 0; }
.case-cover img { width: 100%; max-height: 78vh; object-fit: cover; }
.case-grid { display: grid; gap: clamp(48px, 6vw, 88px); }
.case-part { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 16px 64px; }
.case-part__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
}
.results { border-top: 1px solid var(--line); }
.results li {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 16px 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.results__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
}
.results__label { color: var(--ink-soft); }

/* clients */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 2px;
}
.logo-tile {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 24px;
  background: var(--surface-raised);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
a.logo-tile:hover { background: var(--surface-high); color: var(--white); }
.logo-tile img { max-width: 72%; max-height: 56px; object-fit: contain; filter: grayscale(1) brightness(1.35); transition: filter 0.4s var(--ease-out); }
a.logo-tile:hover img { filter: none; }
.logo-tile span { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.stories { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); }
.story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 16px 64px;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.story__client { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.story__industry { color: var(--ink-subtle); font-size: 14px; margin-top: 4px; }
.story__quote { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); font-weight: 300; line-height: 1.45; text-wrap: pretty; }
.story__by { margin-top: 14px; color: var(--ink-muted); font-size: 14px; }
.story__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.story__facts strong { color: var(--white); font-weight: 600; }

/* home strips */
.clients-strip { border-block: 1px solid var(--line); background: var(--black); padding: 28px 0; }
.clients-strip__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.clients-strip__title { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-right: 8px; }
.clients-strip__row img { height: 30px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) brightness(1.35); }
.clients-strip__row span.client-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* people */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 32px 2px;
}
.person { display: grid; gap: 10px; align-content: start; }
.person__photo { aspect-ratio: 4 / 5; background: var(--surface-raised); overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s var(--ease-out); }
.person:hover .person__photo img { filter: none; }
.person__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; margin-top: 6px; }
.person__role { color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.person__bio { color: var(--ink-muted); font-size: 15px; }

/* values */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 20px;
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--line);
}
.value__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.value p { grid-column: 2; color: var(--ink-muted); font-size: 15px; }
.value .nots__mark { width: 26px; height: auto; margin-top: 3px; grid-row: 1 / span 2; }

/* jobs */
.jobs { border-top: 1px solid var(--line); }
.job { border-bottom: 1px solid var(--line); }
.job__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 16px 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.job__title { font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.job__meta { color: var(--ink-muted); font-size: 14px; }
.job .svc__icon { transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.job.is-open .svc__icon { background: var(--white); border-color: var(--white); color: var(--black); }
.job.is-open .svc__icon .icon { transform: rotate(135deg); }
.job__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; padding: 4px 0 40px; }
.job__body[hidden] { display: none; }
.job__body h3 { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 20px 0 10px; }
.job__body h3:first-child { margin-top: 0; }
.job__list li { display: flex; gap: 12px; color: var(--ink-soft); padding: 4px 0; }
.job__list li::before { content: ''; width: 12px; height: 1px; margin-top: 12px; background: var(--line-strong); flex: none; }

.form-panel { position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); background-color: var(--surface-raised); border: 1px solid var(--line); --tick-c: var(--line-strong); }
.form-panel__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--ink-subtle); }
.form-note.is-done,
.form-note.is-error { color: var(--white); }
.form-note.is-done::before,
.form-note.is-error::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  transform: skewX(-26deg);
}
.form-note.is-done::before { background: var(--lime); }
.form-note.is-error::before { border: 1px solid var(--white); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px clamp(48px, 7vw, 112px); align-items: start; }
.channels { border-top: 1px solid var(--line); }
.channel { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.channel dt { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-subtle); padding-top: 4px; }
.channel dd { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.channel a { text-decoration: none; }
.channel a:hover { color: var(--lime); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }

.stack-actions { display: grid; gap: 28px; justify-items: start; }
.chip--link { text-decoration: none; }
.chip--link::before { display: none; }
.empty-note { display: grid; gap: 16px; justify-items: start; max-width: 60ch; padding: 32px 0; }
.empty-note p { color: var(--ink-soft); font-size: 17px; }
[data-dynamic][hidden] { display: none !important; }

/* ---------- motion: reveals ---------- */

.js [data-lines] .line > span {
  transform: translateY(108%);
  transition: transform 1.15s var(--ease-out);
}
.js [data-lines] .line:nth-child(2) > span { transition-delay: 0.08s; }
.js [data-lines] .line:nth-child(3) > span { transition-delay: 0.16s; }
.js [data-lines].is-in .line > span { transform: none; }

.js [data-reveal],
.js [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in,
.js .is-ready [data-rise],
.js [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: 0; }
  .style-switch { margin-left: auto; }
  .nav__menu { display: inline-flex; }
}

@media (max-width: 1100px) {
  .hud { width: 236px; }
  .svc__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc__inner .link-arrow { grid-column: 1; margin-top: -16px; padding-bottom: 28px; }
}

@media (max-width: 900px) {
  .section-head,
  .division-block__head,
  .offer,
  .case-part,
  .story,
  .job__body,
  .contact-grid,
  .results li { grid-template-columns: minmax(0, 1fr); }
  .values { grid-template-columns: minmax(0, 1fr); }
  .channel { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .job__head { grid-template-columns: minmax(0, 1fr) 44px; }
  .job__head .job__meta { grid-column: 1; grid-row: 2; }
  .job__head .svc__icon { grid-column: 2; grid-row: 1 / span 2; }

  :root { --nav-h: 64px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__menu { display: inline-flex; }

  .hud { display: none; }
  .hero::before {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.78) 45%, rgba(0, 0, 0, 0.1) 80%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%);
  }

  .services::before { background: rgba(0, 0, 0, 0.8); }
  .services__head,
  .approach__head,
  .growth__grid,
  .start__grid { grid-template-columns: minmax(0, 1fr); }
  .readout { display: none; }

  .svc__head { grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; }
  .svc__head .tag { display: none; }
  .svc__icon { width: 44px; height: 44px; }
  .svc__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc__desc, .svc__list, .svc__inner .link-arrow { grid-column: 1; }
  .svc__desc { padding-bottom: 20px; }
  .svc__list { padding-bottom: 20px; }
  .svc__inner .link-arrow { margin: 0; padding-bottom: 28px; }

  .nots { grid-template-columns: minmax(0, 1fr); }
  .nots li { padding: 18px 0; border-bottom: 1px solid var(--line); }

  .route { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 0 0 44px; }
  .route__rail { left: 11px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .route__fill { transform: scaleY(var(--progress)); transform-origin: top; }
  .route__mark { top: 0; left: -44px; }
  .route__mark .micro { display: none; }
  .route__step { padding-top: 2px; }
  .divisions::before { inset: -32px -16px; }
  .route::before { inset: -56px -16px -56px 26px; }

  .start::before { background: rgba(0, 0, 0, 0.75); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .nav__cta { padding: 0; width: 44px; }
  .nav__cta span,
  .nav__menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav__menu { padding-left: 8px; width: 44px; justify-content: center; }
  .nav__bar { gap: 12px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .brief__row { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__base { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .restyle-cover.is-fade { transition-duration: 0.18s !important; }
  html { scroll-behavior: auto; }
  .intro-on .intro { display: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
  .js [data-lines] .line > span,
  .js [data-reveal],
  .js [data-rise] { opacity: 1; transform: none; }
  .statement__text .w { color: var(--white); }
}

/* photos on inner pages */
.page-photo { position: relative; margin: clamp(28px, 4vw, 48px) 0 0; }
.page-photo img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; filter: grayscale(0.25) contrast(1.05); }
.page-photo figcaption { position: absolute; left: 12px; bottom: 10px; padding: 4px 8px; background: rgba(0, 0, 0, 0.6); color: var(--ink-soft); }
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: clamp(36px, 5vw, 64px); }
.photo-pair .page-photo { margin: 0; }
.photo-pair .page-photo img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .photo-pair { grid-template-columns: minmax(0, 1fr); } .page-photo img { aspect-ratio: 3 / 2; } }
html[data-style='corporate'] .page-photo img { border-radius: 18px; filter: none; }
html[data-style='corporate'] .photo-pair { gap: 16px; }
html[data-style='corporate'] .page-photo figcaption { border-radius: 8px; background: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   Corporate style (white symbol in the switch)
   Light, frosted glass, Sora headlines. The terrain sleeps; a still gradient
   sits behind the glass, so blur costs almost nothing.
   ========================================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.style-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.28); flex: none; }
.style-switch__btn {
  display: grid; place-items: center; width: 38px; height: 34px; border: 0; background: none; cursor: pointer;
  opacity: 0.55; transition: background-color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.style-switch__btn img { width: 22px; height: auto; }
.style-switch__btn { position: relative; }
.style-switch__sun { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; overflow: visible; }
.sun__rays,
.sun__core { transform-box: view-box; transform-origin: 12px 12px; }
/* hover: the rays turn and the core breathes; the ECHO symbol sends out an echo ring */
@media (hover: hover) {
  .style-switch__btn:hover .sun__rays { animation: sun-rays 1.6s linear infinite; }
  .style-switch__btn:hover .sun__core { animation: sun-core 1.6s ease-in-out infinite; }
  .style-switch__btn:hover .style-switch__mark { animation: mark-hover 0.9s var(--ease-out) infinite; }
  .style-switch__btn[data-style-set='bold']:hover::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px solid var(--lime);
    pointer-events: none;
    animation: echo-ring 0.9s var(--ease-out) infinite;
  }
}
@keyframes sun-rays { to { transform: rotate(360deg); } }
@keyframes sun-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes mark-hover { 0% { transform: none; } 30% { transform: translate(1px, -2px) scale(1.12); } 100% { transform: none; } }
@keyframes echo-ring { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
html[data-style='corporate'] .style-switch__btn[data-style-set='bold']:hover::after { border-radius: 999px; }
.style-switch__btn[aria-pressed='true'] .style-switch__sun { animation: sun-in 0.7s var(--ease-out); }
.style-switch__btn[aria-pressed='true'] .style-switch__mark { animation: mark-in 0.6s var(--ease-out); }
@keyframes sun-in { from { transform: rotate(-120deg) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-in { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }

/* style change fallback: a sweeping cover for browsers without built-in page transitions */
.restyle-cover {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 30px));
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
}
.restyle-cover.is-in { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 30px)); }
.restyle-cover.is-out { opacity: 0; }
.restyle-cover.is-fade { clip-path: none; opacity: 0; transition: opacity 0.18s ease; }
.restyle-cover.is-fade.is-in { opacity: 1; }
.restyle-cover.is-fade.is-out { opacity: 0; }
.restyle-cover--bold { background: #000; }
.restyle-cover--corporate {
  background:
    radial-gradient(42% 52% at 10% 8%, rgba(229, 249, 10, 0.34), transparent 70%),
    radial-gradient(46% 56% at 92% 88%, rgba(155, 255, 3, 0.2), transparent 70%),
    #eef1f5;
}

/* style change: the new look grows in a circle from the switch */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.is-restyling::view-transition-new(root) { animation: style-reveal 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes style-reveal {
  from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 30px)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 30px)); }
}
.style-switch__btn:hover { opacity: 1; }
.style-switch__btn[aria-pressed='true'] { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.nav__links + .style-switch { margin-left: 8px; }
.nav__bar { gap: 16px; }
.footer__brand .logo--corporate { display: none; }

html[data-style='corporate'] {
  --black: #eef1f5;
  --white: #0b0d10;
  --surface-raised: rgba(255, 255, 255, 0.62);
  --surface-high: #ffffff;
  --line: rgba(11, 13, 16, 0.12);
  --line-strong: rgba(11, 13, 16, 0.32);
  --ink-subtle: #5a626d;
  --ink-muted: #474f59;
  --ink-soft: #2b3139;
  --font-display: var(--font-text);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
  color-scheme: light;
}
html[data-style='corporate'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 10% 8%, rgba(229, 249, 10, 0.34), transparent 70%),
    radial-gradient(46% 56% at 92% 88%, rgba(155, 255, 3, 0.2), transparent 70%),
    radial-gradient(34% 40% at 88% 12%, rgba(110, 140, 255, 0.12), transparent 70%),
    #eef1f5;
}
html[data-style='corporate'] .terrain,
html[data-style='corporate'] .terrain-fallback,
html[data-style='corporate'] .hud,
html[data-style='corporate'] .readout { display: none; }
html[data-style='corporate'] main > section::before { background: none; }
html[data-style='corporate'] :is(.route, .divisions)::before { display: none; }

/* type: calm sentence case instead of wide capitals */
html[data-style='corporate'] :is(.display, .svc__name, .offer__name, .route__title, .work-card__title, .job__title,
  .division__name, .person__name, .story__client, .value__name, .case-part__title, .marquee__track span,
  .menu__links a, .form-panel__title, .offer__name) {
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 650;
}
html[data-style='corporate'] .display--xl { font-weight: 700; letter-spacing: -0.035em; }
html[data-style='corporate'] .line--pay { color: var(--white); }
html[data-style='corporate'] .line--pay > span {
  display: inline-block;
  background: linear-gradient(transparent 60%, var(--lime) 60%, var(--lime) 92%, transparent 92%);
}
html[data-style='corporate'] .statement__text .w { color: #b7bdc6; }
html[data-style='corporate'] .statement__text .w.is-lit { color: var(--white); }
html[data-style='corporate'] .mark__badge { fill: #0d0f0c; }
html[data-style='corporate'] .mark__e path,
html[data-style='corporate'] .mark__c,
html[data-style='corporate'] .mark__h { fill: #0b0d10; }
html[data-style='corporate'] .footer__brand .logo--bold { display: none; }
html[data-style='corporate'] .footer__brand .logo--corporate { display: block; }

/* controls: rounded, lime only as a fill */
html[data-style='corporate'] .btn { border-radius: 12px; }
html[data-style='corporate'] .btn--primary { color: #0b0d10; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); }
html[data-style='corporate'] .btn--ghost { border-color: rgba(11, 13, 16, 0.25); background: rgba(255, 255, 255, 0.5); }
html[data-style='corporate'] .btn--ghost:hover { background: #fff; border-color: rgba(11, 13, 16, 0.5); }
html[data-style='corporate'] .link-arrow { color: var(--white); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
html[data-style='corporate'] .chip { border-radius: 999px; }
html[data-style='corporate'] .tag::before { transform: none; border-radius: 999px; }
html[data-style='corporate'] .tag--lime { color: #0b0d10; }
html[data-style='corporate'] .svc__icon,
html[data-style='corporate'] .route__mark i { border-radius: 10px; }
html[data-style='corporate'] .field__input { background: #fff; border-radius: 10px; }
html[data-style='corporate'] .menu__links a:last-child { color: var(--white); }
html[data-style='corporate'] .nots__mark,
html[data-style='corporate'] .division img { filter: none; }
html[data-style='corporate'] .division:not(.division--now) img { opacity: 1; }

/* glass surfaces: only a few, over a still background */
html[data-style='corporate'] :is(.work-card, .logo-tile, .form-panel, .brief, .person__photo, .case-cover, .brief__preview) {
  border-radius: 18px;
  overflow: hidden;
}
html[data-style='corporate'] :is(.work-card, .logo-tile, .form-panel, .brief) {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html[data-style='corporate'] .ticks::after { display: none; }
html[data-style='corporate'] .brief__preview { background: #f4f6f9; }
html[data-style='corporate'] .work-card__cover { background: #e3e7ec; }
html[data-style='corporate'] .work-card__blank img { filter: invert(1); opacity: 0.15; }
html[data-style='corporate'] .work-grid,
html[data-style='corporate'] .logo-wall { gap: 16px; }
html[data-style='corporate'] .logo-tile img { filter: grayscale(1) contrast(1.1); }
html[data-style='corporate'] .clients-strip,
html[data-style='corporate'] .marquee { background: rgba(255, 255, 255, 0.45); }
html[data-style='corporate'] .nav.is-scrolled,
html[data-style='corporate'] .menu {
  background: rgba(238, 241, 245, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html[data-style='corporate'] .footer { background: rgba(255, 255, 255, 0.5); }
html[data-style='corporate'] .style-switch { background: #0b0d10; border-color: #0b0d10; border-radius: 999px; }
html[data-style='corporate'] .style-switch__btn { border-radius: 999px; }
html[data-style='corporate'] .style-switch__btn[aria-pressed='true'] { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 560px) {
  .style-switch__btn { width: 34px; }
}

/* ==========================================================================
   New parts (both modes): eyebrow, floating WhatsApp, page ring, branch
   screens, why cards, questions, proposal card, proposal page.
   ========================================================================== */

:root { --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace; --accent-ink: var(--lime); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow__dot,
.promise__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(229, 249, 10, 0.18);
}
.hero .eyebrow { margin-bottom: 22px; }

/* header: proposal button and page ring */
.nav__cta-short { display: none; }
.scroll-ring { display: none; }

/* floating WhatsApp */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wa-float__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.wa-float__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-ping 2.4s var(--ease-out) 1.6s 2;
  pointer-events: none;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float__bubble { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.wa-float__phone { fill: #fff; }
.wa-float__label {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface-high);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
.wa-float:hover .wa-float__btn,
.wa-float:focus-visible .wa-float__btn { transform: translateY(-2px) scale(1.04); }
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { opacity: 1; transform: none; }
.wa-float:focus-visible { outline: none; }
.wa-float:focus-visible .wa-float__btn { outline: 2px solid var(--lime); outline-offset: 3px; }
.menu-open .wa-float { opacity: 0; pointer-events: none; }
@keyframes wa-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* hero extras: bright mode shows the flow window and the promise; dark mode the terrain HUD */
.hero__promise {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-muted);
}
.flow-stage { display: none; }

/* services: numbered branches with a small screen each */
.svc__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-subtle);
  align-self: start;
  padding-top: 0.55em;
}
.svc__head { grid-template-columns: 40px minmax(0, 1fr) auto 48px; }
.svc__inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  row-gap: 0;
  padding-left: 64px;
}
.svc__desc { grid-column: 1; grid-row: 1; padding-bottom: 18px; }
.svc__inner .link-arrow { grid-column: 1; grid-row: 2; align-self: start; margin: 0 0 32px; }
.svc__list { grid-column: 2; grid-row: 1 / span 2; }
.scr { grid-column: 3; grid-row: 1 / span 2; margin-bottom: 32px; }

.scr {
  --scr-bg: #0b0b0b;
  --scr-line: rgba(255, 255, 255, 0.1);
  --scr-ink: rgba(255, 255, 255, 0.55);
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 170px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--scr-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--scr-ink);
  overflow: hidden;
}
.scr__bar { display: flex; align-items: center; gap: 6px; }
.scr__bar span { flex: 1; letter-spacing: 0.04em; }
.scr__bar b { font-weight: 500; color: var(--lime); }
.scr__bar > i { width: 7px; height: 7px; border-radius: 50%; background: var(--scr-line); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal span { text-align: center; opacity: 0.6; }
.cal i {
  height: 34px;
  border: 1px solid var(--scr-line);
  font-style: normal;
  font-size: 11px;
  display: grid;
  place-items: end center;
  padding-bottom: 3px;
  color: transparent;
}
.cal i.on { background: rgba(229, 249, 10, 0.1); border-color: rgba(229, 249, 10, 0.35); color: var(--scr-ink); }
.cal i.hot { background: var(--lime); color: #000; }

.web { display: grid; gap: 8px; }
.web__url { text-align: center; padding: 2px 8px; border: 1px solid var(--scr-line); border-radius: 99px; flex: 0 1 auto !important; margin: 0 auto; }
.web__hero { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--scr-line); justify-items: start; }
.web__hero b { height: 8px; width: 70%; background: var(--scr-line); }
.web__hero b + b { width: 45%; }
.web__hero em { margin-top: 4px; padding: 4px 9px; font-style: normal; background: var(--lime); color: #000; }
.web__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.web__cards i { height: 34px; border: 1px solid var(--scr-line); }

.chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 8px; border-bottom: 1px solid var(--scr-line); }
.chart i { flex: 1; height: calc(var(--h) * 100%); background: rgba(229, 249, 10, 0.22); transform-origin: bottom; }
.chart i.hot { background: var(--lime); }
.svc.is-open .chart i { animation: bar-up 0.9s var(--ease-out) both; }
.svc.is-open .chart i:nth-child(2) { animation-delay: 0.05s; }
.svc.is-open .chart i:nth-child(3) { animation-delay: 0.1s; }
.svc.is-open .chart i:nth-child(4) { animation-delay: 0.15s; }
.svc.is-open .chart i:nth-child(5) { animation-delay: 0.2s; }
.svc.is-open .chart i:nth-child(6) { animation-delay: 0.25s; }
@keyframes bar-up { from { transform: scaleY(0.1); } to { transform: none; } }

.deck { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--scr-line); }
.deck b { height: 8px; background: var(--scr-line); }
.deck b:first-child { width: 60%; height: 12px; background: rgba(255, 255, 255, 0.3); }
.deck b.short { width: 40%; }
.deck__bar { height: 4px; margin-top: 18px; background: var(--scr-line); }
.deck__bar i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0.5); transform-origin: left; }

.scr--rec { padding: 0; min-height: 190px; background: radial-gradient(80% 90% at 50% 40%, #2a2a2a, #090909); }
.rec { position: absolute; inset: 12px; }
.rec::before,
.rec::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  -webkit-mask: linear-gradient(#000 0 0) top left / 18px 18px no-repeat, linear-gradient(#000 0 0) top right / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom left / 18px 18px no-repeat, linear-gradient(#000 0 0) bottom right / 18px 18px no-repeat;
  mask: linear-gradient(#000 0 0) top left / 18px 18px no-repeat, linear-gradient(#000 0 0) top right / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom left / 18px 18px no-repeat, linear-gradient(#000 0 0) bottom right / 18px 18px no-repeat;
}
.rec::after { display: none; }
.rec__dot { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 6px; color: #fff; }
.rec__dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: rec-blink 1.2s steps(2) infinite; }
.rec__meta { position: absolute; top: 10px; right: 12px; color: rgba(255, 255, 255, 0.7); }
.rec__tc { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); letter-spacing: 0.06em; }
.rec__cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.rec__cross::before,
.rec__cross::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.7); }
.rec__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.rec__cross::after { top: 50%; left: 0; right: 0; height: 1px; }
@keyframes rec-blink { 50% { opacity: 0.15; } }

/* why ECHO */
.why { padding: var(--section-y) 0; }
.why::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.82) 30%, rgba(0, 0, 0, 0.82)); }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.why-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 240px;
  padding: 26px 24px 28px;
  background: var(--surface-raised);
  border-top: 2px solid var(--line);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.why-card:hover { border-top-color: var(--lime); background: var(--surface-high); }
.why-card__n { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--lime); margin-bottom: 28px; }
.why-card__t { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.why-card p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; }

/* questions */
.faq { padding: var(--section-y) 0; }
.faq::before { background: rgba(0, 0, 0, 0.82); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px clamp(48px, 7vw, 112px); align-items: start; }
.faq__copy { display: grid; gap: 22px; justify-items: start; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__copy .eyebrow { margin-bottom: -6px; }
.faq__copy .lead { color: var(--ink-muted); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; width: 18px; height: 18px; flex: none; }
.faq__item summary i::before,
.faq__item summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.45s var(--ease-out); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--lime); }
.faq__item p { padding: 0 48px 24px 0; color: var(--ink-soft); max-width: 62ch; }
.faq__item[open] p { animation: faq-in 0.5s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* proposal card (home) */
.pcard {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  --tick-c: var(--line-strong);
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.pcard:hover { border-color: var(--lime); }
.pcard__top { display: flex; justify-content: space-between; align-items: center; }
.pcard__time { font-size: 13px; color: var(--ink-muted); }
.pcard__steps { display: grid; border-top: 1px solid var(--line); }
.pcard__steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.pcard__steps b { font-family: var(--font-display); font-size: 12px; color: var(--lime); font-weight: 600; letter-spacing: 0.1em; }
.pcard__t { font-weight: 600; }
.pcard__s { color: var(--ink-muted); font-size: 14px; text-align: right; }
.pcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.pcard__foot .icon { transition: transform 0.45s var(--ease-out); }
.pcard:hover .pcard__foot .icon { transform: translateX(5px); }
.start .hero__actions { margin-top: 4px; }

/* contact: nudge towards the full proposal */
.proposal-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--lime);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.3s var(--ease-out);
}
.proposal-nudge b { font-weight: 600; }
.proposal-nudge .icon { color: var(--lime); transition: transform 0.45s var(--ease-out); }
.proposal-nudge:hover { background: rgba(229, 249, 10, 0.08); }
.proposal-nudge:hover .icon { transform: translateX(4px); }

/* ---------- proposal page ---------- */

.hero--proposal { min-height: 0; padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 96px)); padding-bottom: clamp(28px, 4vh, 48px); }
.hero--proposal .hero__title { max-width: 16ch; }
.proposal { padding: 0 0 var(--section-y); }
.proposal::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85) 20%); }
.proposal__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: start; }

.pw {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(20px, 3vw, 40px);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  min-width: 0;
}
.pw__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pw__rail li { position: relative; }
.pw__rail button {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 0 12px;
  border: 0;
  border-top: 2px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink-subtle);
  transition: color 0.3s var(--ease-out), border-color 0.4s var(--ease-out);
}
.pw__rail button:disabled { cursor: default; }
.pw__dot { grid-row: 1 / span 2; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color 0.3s var(--ease-out); }
.pw__rail b { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; }
.pw__name { grid-column: 2; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw__rail .is-done button { color: var(--ink-soft); border-top-color: var(--line-strong); }
.pw__rail .is-done .pw__dot { background: currentColor; }
.pw__rail .is-current button { color: var(--white); border-top-color: var(--lime); }
.pw__rail .is-current .pw__dot { border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 4px rgba(229, 249, 10, 0.2); }
.pw__rail button:not(:disabled):hover { color: var(--white); }

.pw__restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; background: var(--surface-high); font-size: 14px; color: var(--ink-soft); }
.pw__link { padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

.pw__form { display: grid; gap: 28px; }
.pw__step { display: grid; gap: 26px; margin: 0; padding: 0; border: 0; min-width: 0; animation: step-in 0.55s var(--ease-out); }
.pw__step.is-back { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.pw__lead { display: grid; gap: 6px; }
.pw__count { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.pw__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.pw__title:focus { outline: none; }
.pw__hint { color: var(--ink-muted); }
.pw__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pw__group { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pw__group legend { margin-bottom: 12px; display: flex; gap: 12px; align-items: baseline; width: 100%; }
.pw__note { font-size: 13px; color: var(--ink-subtle); margin-top: -12px; }
.pw__group .pw__note { margin-top: 0; }
.pw__counter { margin-left: auto; font-family: var(--font-text); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-subtle); }
.pw__other { margin-top: 4px; max-width: 420px; }
.req { margin-left: 6px; font-family: var(--font-text); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-subtle); font-weight: 500; }
.pw__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* option chips built on real radios and checkboxes */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt__face {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.opt__face::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid currentColor;
  transition: background-color 0.25s var(--ease-out);
}
.opt input[type='radio'] + .opt__face::before { border-radius: 50%; }
.opt:hover .opt__face { border-color: var(--white); color: var(--white); }
.opt:active .opt__face { transform: scale(0.98); }
.opt input:checked + .opt__face { background: var(--white); border-color: var(--white); color: var(--black); }
.opt input:checked + .opt__face::before { background: var(--lime); border-color: var(--black); }
.opt input:focus-visible + .opt__face { outline: 2px solid var(--lime); outline-offset: 2px; }
.opt.is-muted .opt__face { opacity: 0.45; }
.opt--sm .opt__face { min-height: 40px; padding: 6px 12px; font-size: 13.5px; }

/* branches */
.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; }
.branch { display: grid; align-content: start; border: 1px solid var(--line); transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.branch.is-on { border-color: var(--lime); background: rgba(229, 249, 10, 0.04); }
.branch__head { display: block; }
.branch__head .opt__face {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 14px 16px;
  border: 0;
  min-height: 72px;
  color: var(--white);
}
.branch__head .opt__face::before { display: none; }
.branch__n { grid-row: 1 / span 2; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.branch__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.branch__line { grid-column: 2; font-size: 13px; color: var(--ink-muted); font-weight: 400; }
.branch__tick { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); position: relative; transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.branch__tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--black); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.3s var(--ease-out); }
.branch__head input:checked + .opt__face { background: none; color: var(--white); }
.branch__head input:checked + .opt__face .branch__tick { background: var(--lime); border-color: var(--lime); }
.branch__head input:checked + .opt__face .branch__tick::after { transform: rotate(45deg) scale(1); }
.branch__head:hover .opt__face { color: var(--white); }
.branch__subs { display: none; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px 56px; }
.branch.is-on .branch__subs { display: flex; animation: faq-in 0.4s var(--ease-out); }
.branch--unsure { border: 1px dashed var(--line-strong); }
.branch--unsure:has(input:checked) { border-color: var(--lime); border-style: solid; }

/* suggestions */
.suggest { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); background: var(--surface-high); }
.suggest__title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.suggest__list { display: grid; gap: 12px; }
.suggest__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.suggest__item:first-child { padding-top: 0; border-top: 0; }
.suggest__copy { display: grid; gap: 2px; }
.suggest__goal { font-size: 12px; color: var(--ink-subtle); }
.suggest__why { font-size: 14px; color: var(--ink-soft); }
.suggest__adds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.suggest__add {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--lime);
  background: none;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.suggest__add:hover { background: var(--lime); color: #000; }

/* review */
.review { display: grid; gap: 12px; }
.review__block { padding: 16px 18px; border: 1px solid var(--line); }
.review__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review__title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.review__edit { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); background: none; font-size: 13px; cursor: pointer; }
.review__edit:hover { border-color: var(--white); }
.review__list { display: grid; margin: 0; }
.review__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 14px; }
.review__row dt { color: var(--ink-subtle); }
.review__row dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* step controls */
.pw__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pw__nav [data-next],
.pw__nav [data-send] { margin-left: auto; }
.pw__msg { flex: 1 1 200px; font-size: 14px; color: var(--ink-muted); min-height: 1.4em; }
.pw__msg.is-error { color: var(--white); }
.pw__msg.is-error::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border: 1.5px solid #ff6b5b; transform: skewX(-20deg); }
.pw__msg.is-pending::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--lime); animation: rec-blink 0.8s steps(2) infinite; }

/* sent */
.pw__done { display: grid; gap: 18px; justify-items: start; padding: 8px 0; }
.pw__done:focus { outline: none; }
.done__check svg { width: 64px; height: 64px; fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.done__check circle { stroke-dasharray: 140; stroke-dashoffset: 140; animation: draw 0.8s var(--ease-out) forwards; }
.done__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.5s var(--ease-out) 0.55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done__title { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.done__ref { font-size: 17px; color: var(--ink-soft); }
.done__ref b { font-family: var(--font-mono); color: var(--white); background: rgba(229, 249, 10, 0.16); padding: 2px 8px; }
.done__next { display: grid; width: 100%; border-top: 1px solid var(--line); counter-reset: next; }
.done__next li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.done__next b { font-weight: 600; }
.done__next span { color: var(--ink-muted); }

/* live draft */
.pdraft {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  --done: 0;
}
.pdraft__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pdraft__label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.pdraft__ref { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
.pdraft__for { font-size: 14px; color: var(--ink-muted); }
.pdraft__for b { color: var(--white); font-weight: 600; }
.pdraft__pack { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; margin-top: -8px; }
.pdraft__meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.pdraft__meter b { font-family: var(--font-mono); color: var(--white); font-weight: 500; }
.pdraft__meter i { grid-column: 1 / -1; height: 4px; background: var(--line); position: relative; overflow: hidden; }
.pdraft__meter i::after { content: ''; position: absolute; inset: 0; background: var(--lime); transform: scaleX(var(--done)); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.pdraft__list { display: grid; margin: 0; border-top: 1px solid var(--line); }
.pdraft__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; animation: faq-in 0.45s var(--ease-out); }
.pdraft__row dt { color: var(--ink-subtle); font-size: 13px; }
.pdraft__row dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.pdraft__scope { display: grid; gap: 10px; }
.pdraft__branch { display: grid; gap: 6px; }
.pdraft__bname { font-size: 12px; font-weight: 600; color: var(--white); }
.pdraft__chips,
.pdraft__suggest { display: flex; flex-wrap: wrap; gap: 5px; }
.pdraft__chip { padding: 3px 8px; font-size: 12px; background: var(--surface-high); border: 1px solid var(--line); }
.pdraft__chip.is-soft { color: var(--ink-subtle); border-style: dashed; background: none; }
.pdraft__chip.is-suggest { border: 1px dashed var(--lime); color: var(--accent-ink); background: none; }
.pdraft__empty { font-size: 14px; color: var(--ink-subtle); }
.pdraft__foot { display: flex; align-items: center; gap: 10px; padding-top: 4px; font-size: 12px; color: var(--ink-subtle); }
.proposal-sent .pdraft__ref { color: var(--white); background: rgba(229, 249, 10, 0.16); padding: 2px 8px; }


/* ---------- responsive (new parts) ---------- */

@media (max-width: 1100px) {
  .svc__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 64px; }
  .svc__list { grid-column: 2; grid-row: 1 / span 2; }
  .scr { grid-column: 1 / -1; grid-row: 3; max-width: 440px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proposal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}

@media (max-width: 900px) {
  .svc__head { grid-template-columns: 30px minmax(0, 1fr) 44px; }
  .svc__inner { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .svc__desc, .svc__list, .svc__inner .link-arrow, .scr { grid-column: 1; grid-row: auto; }
  .svc__inner .link-arrow { margin: 0 0 20px; padding: 0; }
  .scr { margin-bottom: 28px; max-width: 420px; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__copy { position: static; }
  .faq__item p { padding-right: 0; }
  .proposal__grid { grid-template-columns: minmax(0, 1fr); }
  .pdraft { position: static; order: 2; }
  .pw__name { font-size: 12px; }
  .why::before, .faq::before { background: rgba(0, 0, 0, 0.82); }
  body[data-page='proposal'] .wa-float { display: none; }
  .pw__nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(clamp(20px, 3vw, 40px) * -1) calc(clamp(20px, 3vw, 40px) * -1);
    padding: 14px clamp(20px, 3vw, 40px) calc(14px + env(safe-area-inset-bottom));
    background: var(--surface-raised);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 560px) {
  .nav__cta { padding: 0 14px; width: auto; }
  .nav__cta .nav__cta-short { display: inline; position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .nav__cta .icon { display: none; }
  .nav__bar { gap: 8px; }
  .nav__brand .mark { width: 112px; height: 18px; }
  .nav__cta { --h: 40px; padding: 0 12px; font-size: 11px; letter-spacing: 0.1em; }
  .style-switch__btn { width: 30px; height: 32px; }
  .style-switch__btn img { width: 19px; }
  .style-switch__sun { width: 18px; height: 18px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-card { min-height: 0; }
  .why-card__n { margin-bottom: 8px; }
  .pw__row, .branches, .opts--wide { grid-template-columns: minmax(0, 1fr); }
  .pw__rail { gap: 4px; }
  .pw__rail b { display: none; }
  .pw__rail .pw__name { font-size: 11px; }
  .pw__rail button { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 6px; }
  .pw__rail li:not(.is-current) .pw__name { display: none; }
  .pw__rail .is-current .pw__name { overflow: visible; font-size: 12.5px; font-weight: 600; }
  .pw__name { grid-column: 1; }
  .pw__dot { grid-row: auto; }
  .branch__subs { padding-left: 16px; }
  .review__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .done__next li { grid-template-columns: minmax(0, 1fr); }
  .pcard__steps li { grid-template-columns: 36px minmax(0, 1fr); }
  .pcard__s { grid-column: 2; text-align: left; }
  .suggest__item { grid-template-columns: minmax(0, 1fr); }
  .suggest__adds { justify-content: flex-start; }
  .wa-float__btn { width: 52px; height: 52px; }
  .pw__nav .btn { flex: 1 1 auto; }
  .pw__msg { order: -1; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float__btn::after, .rec__dot::before { animation: none; }
  .pw__step { animation: none; }
}

@media print {
  .nav, .menu, .footer, .wa-float, .terrain, .terrain-fallback, .thread, .hero, .pw, .skip { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }
  .proposal { padding: 0; }
  .proposal::before { display: none; }
  .proposal__grid { display: block; }
  .pdraft { position: static; border: 1px solid #000; background: #fff !important; color: #000; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .pdraft * { color: #000 !important; }
}

/* ==========================================================================
   Bright mode: "Relay Light"
   Off-white field with a faint grid, one lime thread of light running down
   the page, frosted white glass panels, tech labels in mono, and sections
   that arrive slightly out of focus and settle.
   ========================================================================== */

html[data-style='corporate'] {
  --black: #f4f5f0;
  --white: #0d0f0c;
  --surface-raised: rgba(255, 255, 255, 0.66);
  --surface-high: #ffffff;
  --line: rgba(13, 15, 12, 0.1);
  --line-strong: rgba(13, 15, 12, 0.28);
  --ink-subtle: #5d6459;
  --ink-muted: #475044;
  --ink-soft: #2a2f28;
  --accent-ink: #4a6b00;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 44px -24px rgba(32, 44, 8, 0.22), 0 2px 6px rgba(32, 44, 8, 0.05);
}
html[data-style='corporate'] body::before {
  background:
    radial-gradient(46% 38% at 86% 0%, rgba(229, 249, 10, 0.26), transparent 70%),
    radial-gradient(40% 44% at 0% 100%, rgba(42, 165, 143, 0.1), transparent 70%),
    #f4f5f0;
}
html[data-style='corporate'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(13, 15, 12, 0.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(13, 15, 12, 0.05) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
}
.thread { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: none; }
html[data-style='corporate'] .thread { display: block; }
.restyle-cover--corporate { background: radial-gradient(46% 38% at 86% 0%, rgba(229, 249, 10, 0.26), transparent 70%), #f4f5f0; }

/* tech labels in mono */
html[data-style='corporate'] :is(.micro, .eyebrow, .pw__count, .pdraft__label, .why-card__n, .svc__num, .pcard__steps b, .branch__n, .pw__rail b, .pcard__foot, .route__mark .micro) {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-weight: 500;
}
html[data-style='corporate'] .eyebrow { text-transform: none; font-size: 12.5px; color: var(--ink-muted); padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
html[data-style='corporate'] .eyebrow__dot,
html[data-style='corporate'] .promise__dot { border-radius: 50%; box-shadow: 0 0 0 3px rgba(168, 196, 0, 0.25); background: #a8c400; }
html[data-style='corporate'] :is(.pw__title, .done__title, .pdraft__pack, .why-card__t, .branch__name) { text-transform: none; letter-spacing: -0.02em; font-weight: 650; }
html[data-style='corporate'] .branch__name { letter-spacing: -0.01em; font-size: 16px; }

/* settle into focus as sections arrive */
html[data-style='corporate'].js [data-reveal] {
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html[data-style='corporate'].js [data-reveal].is-in { filter: none; }

/* nav */
html[data-style='corporate'] .nav.is-scrolled { border-bottom-color: rgba(13, 15, 12, 0.08); }
@media (min-width: 901px) and (max-width: 1280px) {
  html[data-style='corporate'] .scroll-ring { margin-left: auto; }
  html[data-style='corporate'] .scroll-ring + .style-switch { margin-left: 0; }
}
@media (min-width: 901px) {
  html[data-style='corporate'] .scroll-ring { display: grid; place-items: center; position: relative; width: 40px; height: 40px; flex: none; }
  .nav__links + .scroll-ring { margin-left: 8px; }
}
.scroll-ring svg { position: absolute; inset: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
.scroll-ring circle { fill: none; stroke-width: 2.5; }
.scroll-ring__track { stroke: rgba(13, 15, 12, 0.1); }
.scroll-ring__fill { stroke: #a8c400; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 0.2s linear; }
.scroll-ring span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
html[data-style='corporate'] .nav__cta { border-radius: 999px; }
html[data-style='corporate'] .btn { border-radius: 999px; }
html[data-style='corporate'] .btn--primary { background: var(--lime); color: #0d0f0c; box-shadow: 0 8px 22px -10px rgba(120, 150, 0, 0.6), 0 0 0 1px rgba(13, 15, 12, 0.06) inset; }
html[data-style='corporate'] .btn--primary:hover { background: #d8ee00; }
html[data-style='corporate'] .btn--ghost { background: rgba(255, 255, 255, 0.7); border-color: rgba(13, 15, 12, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-style='corporate'] .link-arrow { color: var(--white); text-decoration: none; }
html[data-style='corporate'] .link-arrow .icon { color: var(--accent-ink); }
html[data-style='corporate'] .link-arrow span { background: linear-gradient(transparent 62%, rgba(229, 249, 10, 0.75) 62%, rgba(229, 249, 10, 0.75) 90%, transparent 90%); }

/* hero: copy left, glass flow window right */
html[data-style='corporate'] .hero { align-items: center; padding-top: calc(var(--nav-h) + 40px); }
html[data-style='corporate'] .hero__hint { display: none; }
html[data-style='corporate'] .hero__promise { display: flex; }
html[data-style='corporate'] .hero__inner {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: start;
}
html[data-style='corporate'] .hero__title { max-width: 11ch; }
html[data-style='corporate'] .flow-stage {
  display: block;
  position: relative;
  padding-top: 4px;
  perspective: 1400px;
}
.flow {
  --rx: 5deg;
  --ry: -10deg;
  --flow: 0.2;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), 0 40px 80px -40px rgba(60, 90, 0, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
  font-size: 13px;
}
.flow__bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-subtle); }
.flow__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(13, 15, 12, 0.12); }
.flow__bar span { margin-left: 8px; flex: 1; }
.flow__live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(168, 196, 0, 0.16); color: var(--accent-ink); font-weight: 600; }
.flow__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7da000; animation: rec-blink 1.4s steps(2) infinite; }
.flow__steps { display: grid; gap: 4px; }
.flow__steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink-subtle);
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.flow__n { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 11px; padding-top: 2px; }
.flow__t { font-weight: 600; color: var(--ink-muted); }
.flow__s { font-size: 12px; }
.flow__steps li.is-done .flow__t { color: var(--ink-soft); }
.flow__steps li.is-done .flow__n { color: var(--accent-ink); }
.flow__steps li.is-done .flow__n::before { content: '✓ '; }
.flow__steps li.is-active { background: #fff; color: var(--ink-muted); box-shadow: 0 10px 24px -14px rgba(32, 44, 8, 0.4); transform: translateZ(18px); }
.flow__steps li.is-active .flow__t { color: var(--white); }
.flow__steps li.is-active .flow__n { color: #0d0f0c; }
.flow__steps li.is-active .flow__n::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #a8c400; vertical-align: 1px; }
.flow__meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 6px 4px; font-size: 12px; color: var(--ink-subtle); }
.flow__meter b { font-family: var(--font-mono); color: var(--white); font-weight: 500; }
.flow__meter i { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(13, 15, 12, 0.08); position: relative; overflow: hidden; }
.flow__meter i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #a8c400, #5cb81a); transform: scaleX(var(--flow)); transform-origin: left; transition: transform 0.8s var(--ease-out); }

/* sections: no dark scrims, glass where content sits */
html[data-style='corporate'] .marquee { background: rgba(255, 255, 255, 0.5); border-color: var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-style='corporate'] .marquee__track img { filter: invert(1) brightness(0.2); }
html[data-style='corporate'] .statement__text .w { color: #c3c8be; }

html[data-style='corporate'] .svc-list { display: grid; gap: 10px; border: 0; }
html[data-style='corporate'] .svc {
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  padding: 0 clamp(16px, 2.4vw, 32px);
  transition: box-shadow 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
html[data-style='corporate'] .svc::before { left: 24px; right: 24px; top: 0; border-radius: 2px; background: linear-gradient(90deg, #a8c400, #5cb81a); }
html[data-style='corporate'] .svc.is-active,
html[data-style='corporate'] .svc.is-open { box-shadow: var(--glass-shadow), 0 30px 60px -36px rgba(60, 90, 0, 0.45); }
html[data-style='corporate'] .svc__head { padding: clamp(18px, 2.2vw, 28px) 0; }
html[data-style='corporate'] .svc__name { font-size: clamp(1.25rem, 0.8rem + 1.9vw, 2.3rem); }
html[data-style='corporate'] .svc__icon { border-radius: 999px; }
html[data-style='corporate'] .svc.is-open .svc__icon { background: var(--lime); border-color: var(--lime); color: #0d0f0c; }
html[data-style='corporate'] .svc-list.has-active .svc:not(.is-active):not(.is-open) .svc__name { color: #8d9389; }
html[data-style='corporate'] .svc__num { color: var(--accent-ink); }

html[data-style='corporate'] .scr {
  --scr-bg: #fbfcf8;
  --scr-line: rgba(13, 15, 12, 0.1);
  --scr-ink: #5d6459;
  border-radius: 14px;
  border-color: rgba(13, 15, 12, 0.08);
  box-shadow: 0 1px 0 #fff inset, 0 16px 30px -22px rgba(32, 44, 8, 0.35);
}
html[data-style='corporate'] .scr__bar b { color: var(--accent-ink); }
html[data-style='corporate'] .cal i.on { background: rgba(168, 196, 0, 0.12); border-color: rgba(120, 150, 0, 0.35); border-radius: 6px; }
html[data-style='corporate'] .cal i { border-radius: 6px; }
html[data-style='corporate'] .cal i.hot { background: var(--lime); color: #0d0f0c; }
html[data-style='corporate'] .chart i { background: rgba(168, 196, 0, 0.25); border-radius: 4px 4px 0 0; }
html[data-style='corporate'] .chart i.hot { background: linear-gradient(180deg, #c8e400, #7fb300); }
html[data-style='corporate'] .deck b:first-child { background: rgba(13, 15, 12, 0.25); }
html[data-style='corporate'] .web__hero, html[data-style='corporate'] .web__cards i, html[data-style='corporate'] .deck { border-radius: 8px; }
html[data-style='corporate'] .scr--rec { background: radial-gradient(80% 90% at 50% 40%, #39402f, #111); }

html[data-style='corporate'] .route::before { display: none; }
html[data-style='corporate'] .route__step {
  padding: 26px 22px 24px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html[data-style='corporate'] .route__mark { top: -56px; }
html[data-style='corporate'] .route__mark i { border-radius: 50%; background: #fff; }
html[data-style='corporate'] .route__mark .micro { background: none; }
html[data-style='corporate'] .route__fill { background: linear-gradient(90deg, #a8c400, #5cb81a); }
html[data-style='corporate'] .route__step.is-reached .route__mark i { border-color: #a8c400; background: #a8c400; }
html[data-style='corporate'] .route__step.is-reached .route__mark i::before,
html[data-style='corporate'] .route__step.is-reached .route__mark i::after { background: #fff; }

html[data-style='corporate'] .why-grid { gap: 14px; }
html[data-style='corporate'] .why-card,
html[data-style='corporate'] .faq__item,
html[data-style='corporate'] .pcard,
html[data-style='corporate'] .pw,
html[data-style='corporate'] .pdraft {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html[data-style='corporate'] .why-card { border-top: 1px solid var(--glass-edge); }
html[data-style='corporate'] .why-card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), 0 30px 50px -30px rgba(60, 90, 0, 0.4); }
html[data-style='corporate'] .why-card { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
html[data-style='corporate'] .why-card__n { color: var(--accent-ink); }
html[data-style='corporate'] .faq__list { border: 0; display: grid; gap: 10px; }
html[data-style='corporate'] .faq__item { padding: 0 22px; border-radius: 16px; }
html[data-style='corporate'] .faq__item summary:hover { color: var(--accent-ink); }
html[data-style='corporate'] .ticks::after { display: none; }
html[data-style='corporate'] .pcard:hover { transform: translateY(-4px); }
html[data-style='corporate'] .pcard__steps b,
html[data-style='corporate'] .pcard__foot { color: var(--accent-ink); }
html[data-style='corporate'] .proposal-nudge { border-radius: 14px; border-color: rgba(120, 150, 0, 0.5); background: rgba(229, 249, 10, 0.12); }
html[data-style='corporate'] .proposal-nudge .icon { color: var(--accent-ink); }

/* proposal page in bright mode */
html[data-style='corporate'] .proposal::before { background: none; }
html[data-style='corporate'] .opt__face { border-radius: 999px; background: rgba(255, 255, 255, 0.7); border-color: rgba(13, 15, 12, 0.14); }
html[data-style='corporate'] .opt:hover .opt__face { border-color: rgba(13, 15, 12, 0.45); color: var(--white); }
html[data-style='corporate'] .opt input:checked + .opt__face { background: #0d0f0c; border-color: #0d0f0c; color: #fff; }
html[data-style='corporate'] .opt input:checked + .opt__face::before { background: var(--lime); border-color: var(--lime); }
html[data-style='corporate'] .branch { border-radius: 16px; background: rgba(255, 255, 255, 0.6); border-color: rgba(13, 15, 12, 0.1); }
html[data-style='corporate'] .branch.is-on { border-color: #a8c400; background: rgba(240, 250, 200, 0.55); box-shadow: 0 0 0 3px rgba(168, 196, 0, 0.14); }
html[data-style='corporate'] .branch__head input:checked + .opt__face { background: none; color: var(--white); }
html[data-style='corporate'] .branch__head .opt__face { background: none; border: 0; border-radius: 16px; }
html[data-style='corporate'] .branch__tick { border-radius: 7px; }
html[data-style='corporate'] .branch__head input:checked + .opt__face .branch__tick { background: #a8c400; border-color: #a8c400; }
html[data-style='corporate'] .branch__tick::after { border-color: #fff; }
html[data-style='corporate'] .branch--unsure { background: rgba(255, 255, 255, 0.35); }
html[data-style='corporate'] .pw__rail button { border-top-width: 3px; }
html[data-style='corporate'] .pw__rail .is-current button { border-top-color: #a8c400; }
html[data-style='corporate'] .pw__rail .is-current .pw__dot { border-color: #a8c400; background: #a8c400; box-shadow: 0 0 0 4px rgba(168, 196, 0, 0.2); }
html[data-style='corporate'] :is(.suggest, .review__block, .pw__restore) { border-radius: 14px; }
html[data-style='corporate'] .suggest { background: linear-gradient(135deg, rgba(240, 250, 200, 0.75), rgba(255, 255, 255, 0.8)); border-color: rgba(168, 196, 0, 0.4); }
html[data-style='corporate'] .suggest__add { border-radius: 999px; border-color: rgba(120, 150, 0, 0.55); }
html[data-style='corporate'] .suggest__add:hover { background: #a8c400; color: #fff; }
html[data-style='corporate'] .review__block { background: rgba(255, 255, 255, 0.55); }
html[data-style='corporate'] .review__edit { border-radius: 999px; }
html[data-style='corporate'] .pdraft__chip { border-radius: 99px; background: #fff; }
html[data-style='corporate'] .pdraft__chip.is-suggest { border-color: rgba(120, 150, 0, 0.6); background: rgba(240, 250, 200, 0.5); }
html[data-style='corporate'] .pdraft__meter i,
html[data-style='corporate'] .pdraft__meter i::after { border-radius: 99px; }
html[data-style='corporate'] .pdraft__meter i::after { background: linear-gradient(90deg, #a8c400, #5cb81a); }
html[data-style='corporate'] .done__check svg { stroke: #7da000; }
html[data-style='corporate'] .done__ref b,
html[data-style='corporate'].proposal-sent .pdraft__ref { background: rgba(229, 249, 10, 0.5); border-radius: 6px; }
html[data-style='corporate'] .pw__msg.is-error { color: #a12a1c; }

/* floating WhatsApp in bright mode */
html[data-style='corporate'] .wa-float__btn { box-shadow: 0 14px 30px -12px rgba(18, 140, 70, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }
html[data-style='corporate'] .wa-float__label { background: #fff; color: #0d0f0c; box-shadow: 0 12px 28px -14px rgba(32, 44, 8, 0.4); border: 1px solid rgba(13, 15, 12, 0.08); }

@media (max-width: 1100px) {
  html[data-style='corporate'] .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
@media (max-width: 900px) {
  html[data-style='corporate'] .hero { padding-bottom: 48px; }
  html[data-style='corporate'] .hero__inner { grid-template-columns: minmax(0, 1fr); }
  html[data-style='corporate'] .flow-stage { max-width: 440px; }
  html[data-style='corporate'] .flow { --rx: 0deg; --ry: 0deg; }
  html[data-style='corporate'] .hero--page .flow-stage { display: none; }
  html[data-style='corporate'] .svc { padding: 0 16px; border-radius: 16px; }
  html[data-style='corporate'] .route__step { padding: 18px 18px 20px; }
  html[data-style='corporate'] .route__mark { top: 18px; }
  html[data-style='corporate'] .pw__nav { background: rgba(255, 255, 255, 0.85); border-radius: 0 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style='corporate'].js [data-reveal] { filter: none; }
  .flow { transition: none; }
}

/* ---------- branch screens come alive while their branch is open ---------- */

/* marketing: posts drop into the calendar, the ad slot pulses, a scan line reads the week */
.cal { position: relative; }
.svc.is-open .cal i.on { animation: cal-pop 0.5s var(--ease-out) both; }
.svc.is-open .cal i:nth-of-type(1) { animation-delay: 0.1s; }
.svc.is-open .cal i:nth-of-type(3) { animation-delay: 0.2s; }
.svc.is-open .cal i:nth-of-type(5) { animation-delay: 0.3s; }
.svc.is-open .cal i:nth-of-type(7) { animation-delay: 0.4s; }
.svc.is-open .cal i:nth-of-type(9) { animation-delay: 0.5s; }
.svc.is-open .cal i:nth-of-type(11) { animation-delay: 0.6s; }
.svc.is-open .cal i:nth-of-type(13) { animation-delay: 0.7s; }
.svc.is-open .cal i.hot { animation: cal-pop 0.5s var(--ease-out) 0.3s both, cal-hot 1.8s ease-in-out 1s infinite; }
.cal::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  opacity: 0;
}
.svc.is-open .cal::after { animation: cal-scan 3.6s linear 0.9s infinite; }
@keyframes cal-pop { from { opacity: 0; transform: translateY(-8px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes cal-hot { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 249, 10, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(229, 249, 10, 0); } }
@keyframes cal-scan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* digital: the page loads in, a cursor travels to the button and clicks */
.web { position: relative; }
.web__hero b { background-size: 200% 100%; background-image: linear-gradient(90deg, var(--scr-line) 0%, rgba(229, 249, 10, 0.35) 50%, var(--scr-line) 100%); }
.svc.is-open .web__hero b { animation: shimmer 2.4s linear infinite; }
.svc.is-open .web__cards i { animation: cal-pop 0.5s var(--ease-out) both; }
.svc.is-open .web__cards i:nth-child(2) { animation-delay: 0.12s; }
.svc.is-open .web__cards i:nth-child(3) { animation-delay: 0.24s; }
.web__hero em { position: relative; }
.svc.is-open .web__hero em { animation: btn-press 3s var(--ease-out) 0.6s infinite; }
.web::after {
  content: '';
  position: absolute;
  left: 70%;
  top: 80%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 13px 9px;
  border-color: transparent transparent transparent var(--white);
  transform: rotate(-20deg);
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.svc.is-open .web::after { animation: cursor-go 3s var(--ease-out) 0.6s infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes cursor-go {
  0% { left: 78%; top: 88%; opacity: 0; }
  12% { opacity: 1; }
  45%, 62% { left: 16%; top: 54%; opacity: 1; }
  80%, 100% { left: 16%; top: 54%; opacity: 0; }
}
@keyframes btn-press {
  0%, 44% { transform: none; box-shadow: 0 0 0 0 rgba(229, 249, 10, 0.6); }
  50% { transform: scale(0.92); }
  60% { transform: none; box-shadow: 0 0 0 8px rgba(229, 249, 10, 0); }
  100% { transform: none; }
}

/* consulting: bars grow, then keep breathing upward; the best quarter glows */
.svc.is-open .chart i { animation: bar-up 0.9s var(--ease-out) both, bar-breathe 2.8s ease-in-out 1.2s infinite; }
.svc.is-open .chart i:nth-child(2) { animation-delay: 0.05s, 1.35s; }
.svc.is-open .chart i:nth-child(3) { animation-delay: 0.1s, 1.5s; }
.svc.is-open .chart i:nth-child(4) { animation-delay: 0.15s, 1.65s; }
.svc.is-open .chart i:nth-child(5) { animation-delay: 0.2s, 1.8s; }
.svc.is-open .chart i:nth-child(6) { animation-delay: 0.25s, 1.95s; }
.chart { position: relative; }
.chart::after {
  content: '';
  position: absolute;
  inset: 8px 0 0;
  background: linear-gradient(transparent calc(100% - 1px), var(--scr-line) 0) 0 0 / 100% 25%;
  pointer-events: none;
}
@keyframes bar-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }

/* training: lines write onto the slide, the module bar fills, module after module */
.svc.is-open .deck b { animation: write-in 0.6s var(--ease-out) both; transform-origin: left; }
.svc.is-open .deck b:nth-child(2) { animation-delay: 0.15s; }
.svc.is-open .deck b:nth-child(3) { animation-delay: 0.3s; }
.svc.is-open .deck__bar i { animation: module-fill 4s var(--ease-in-out) 0.4s infinite; }
@keyframes write-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes module-fill { 0% { transform: scaleX(0.08); } 70%, 100% { transform: scaleX(1); } }

/* studio: the frame breathes into focus while the timecode runs (main.js ticks it) */
.svc.is-open .rec__cross { animation: focus-pull 2.6s ease-in-out infinite; }
.svc.is-open .rec::before { animation: frame-breathe 2.6s ease-in-out infinite; }
@keyframes focus-pull { 0%, 100% { transform: scale(1.6); opacity: 0.4; } 45%, 70% { transform: scale(1); opacity: 1; } }
@keyframes frame-breathe { 0%, 100% { transform: none; } 50% { transform: scale(0.95); } }
html[data-style='corporate'] .web::after { border-color: transparent transparent transparent #0d0f0c; }

/* ---------- about: founder profile and team ---------- */

.founder-sec::before,
.team-sec::before { background: rgba(0, 0, 0, 0.84); }
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.founder__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-high); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.founder__body { display: grid; gap: 14px; align-content: center; }
.founder__name { font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); font-weight: 800; line-height: 1; text-transform: uppercase; }
.founder__quals { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; color: var(--accent-ink); }
.founder__role { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-soft); }
.founder__honours { display: grid; margin-top: 6px; border-top: 1px solid var(--line); }
.founder__honours li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.founder__honours li > span:only-child { grid-column: 1 / -1; }
.founder__honour-k { font-size: 12.5px; color: var(--ink-subtle); padding-top: 2px; }
.founder__bio { color: var(--ink-muted); max-width: 58ch; }

.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.member {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.member:hover { border-color: var(--lime); }
.member__photo { width: 96px; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; background: var(--surface-high); border: 1px solid var(--line); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__initials { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent-ink); }
.member__body { display: grid; gap: 4px; min-width: 0; }
.member__dept { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--accent-ink); }
.member__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.member__role { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.member__quals { font-size: 13px; color: var(--ink-muted); }
.member__skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.member__skills li { padding: 3px 9px; font-size: 12px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.member__bio { margin-top: 6px; font-size: 13.5px; color: var(--ink-muted); }
.member__sample { position: absolute; top: 12px; right: 12px; font-size: 11px; padding: 2px 8px; border: 1px dashed var(--line-strong); color: var(--ink-subtle); border-radius: 99px; }

html[data-style='corporate'] .founder-sec::before,
html[data-style='corporate'] .team-sec::before { background: none; }
html[data-style='corporate'] :is(.founder, .member) {
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html[data-style='corporate'] .member { border-radius: 18px; }
html[data-style='corporate'] .member:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), 0 30px 50px -30px rgba(60, 90, 0, 0.4); }
html[data-style='corporate'] .founder__photo { border-radius: 16px; }
html[data-style='corporate'] .member__photo { border-radius: 12px; background: linear-gradient(135deg, #eef3df, #d9e4bf); border: 0; }
html[data-style='corporate'] .member__skills li { border-radius: 99px; background: rgba(255, 255, 255, 0.7); border-color: rgba(13, 15, 12, 0.12); }
html[data-style='corporate'] :is(.founder__name, .member__name) { text-transform: none; letter-spacing: -0.02em; font-weight: 650; }
html[data-style='corporate'] .founder__badge { border-radius: 99px; background: rgba(255, 255, 255, 0.9); color: #0d0f0c; }

@media (max-width: 900px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__photo { max-width: 420px; }
}
@media (max-width: 560px) {
  .founder__honours li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .member { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .member__photo { width: 76px; }
}

/* ---------- studio: blueprint ---------- */

.bp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 8px; }
.bp__sheet {
  --ink-bp: #d6ecff;
  position: relative;
  padding: 16px 16px 10px;
  background:
    linear-gradient(rgba(214, 236, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(214, 236, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(214, 236, 255, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(214, 236, 255, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    radial-gradient(120% 100% at 30% 0%, #15406e, #0b2545 70%);
  border: 1px solid rgba(214, 236, 255, 0.25);
  color: var(--ink-bp);
  overflow: hidden;
}
.bp__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(214, 236, 255, 0.25); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; opacity: 0.85; }
.bp__svg { width: 100%; height: auto; overflow: visible; }
.bp__zone { fill: transparent; transition: fill 0.35s var(--ease-out); cursor: pointer; }
.bp__zone.is-hot { fill: rgba(229, 249, 10, 0.12); }
.bp__walls path { fill: none; stroke: var(--ink-bp); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp.is-drawn .bp__walls path { animation: draw 1.6s var(--ease-in-out) forwards; }
.bp.is-drawn .bp__walls path:nth-child(2) { animation-delay: 0.35s; }
.bp.is-drawn .bp__walls path:nth-child(3) { animation-delay: 0.5s; }
.bp.is-drawn .bp__walls path:nth-child(4) { animation-delay: 0.65s; }
.bp.is-drawn .bp__walls path:nth-child(5) { animation-delay: 0.8s; }
.bp__doors path,
.bp__cove path,
.bp__furn > *,
.bp__subject > *,
.bp__dims path { fill: none; stroke: var(--ink-bp); stroke-width: 1.3; }
.bp__thin { stroke-dasharray: 6 5; opacity: 0.6; }
.bp__cove path:first-child { stroke-width: 2; }
.bp__doors path { stroke-dasharray: 3 4; opacity: 0.8; }
.bp__light { fill: var(--lime); }
.bp__cone polygon { fill: var(--lime); opacity: 0.16; }
.bp__camera rect { fill: #0b2545; stroke: var(--lime); stroke-width: 1.6; }
.bp__fov { fill: rgba(229, 249, 10, 0.1); stroke: var(--lime); stroke-width: 1; stroke-dasharray: 4 4; }
.bp__camera { transform-box: view-box; transform-origin: 300px 340px; }
.bp__subject path { stroke: var(--lime); stroke-width: 2; }
.bp__subject circle { stroke-dasharray: 3 4; }
.bp__route { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0.9; }
.bp__labels text { fill: var(--ink-bp); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.12em; }
.bp__labels .bp__sub { font-size: 12px; letter-spacing: 0.04em; opacity: 0.7; }
.bp__dims text { fill: var(--ink-bp); font-family: var(--font-mono); font-size: 13px; opacity: 0.8; }
.bp__dims path { opacity: 0.7; }

/* what moves: layers fade in once the walls are up, then the set keeps working */
.bp__doors, .bp__cove, .bp__furn, .bp__labels, .bp__dims, .bp__light, .bp__cone, .bp__camera, .bp__subject, .bp__route { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.bp.is-drawn :is(.bp__doors, .bp__cove, .bp__furn, .bp__labels, .bp__dims, .bp__light, .bp__subject) { opacity: 1; transition-delay: 1.2s; }
.bp.is-drawn :is(.bp__camera, .bp__route) { opacity: 1; transition-delay: 1.6s; }
.bp.is-drawn .bp__cone { opacity: 1; transition-delay: 1.6s; }
.bp.is-drawn .bp__cone polygon { animation: cone 2.8s ease-in-out 2s infinite; }
.bp.is-drawn .bp__cone--b polygon { animation-delay: 3.4s; }
.bp.is-drawn .bp__camera { animation: cam-sweep 7s ease-in-out 2.2s infinite; }
.bp.is-drawn .bp__route { animation: march 1.4s linear infinite; }
.bp.is-drawn .bp__subject circle { animation: spin-slow 16s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cone { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.34; } }
@keyframes cam-sweep { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(9deg); } }
@keyframes march { to { stroke-dashoffset: -24; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.bp__legend { display: grid; gap: 8px; align-content: start; }
.bp__legend button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.bp__legend b { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent-ink); padding-top: 2px; }
.bp__name { font-weight: 600; }
.bp__desc { grid-column: 2; margin-top: 4px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; opacity: 0.6; transition: opacity 0.35s var(--ease-out); }
.bp__legend li.is-hot button { border-color: var(--lime); transform: translateX(4px); }
.bp__legend li.is-hot .bp__desc { opacity: 1; }

/* ---------- studio: booking calendar ---------- */

.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px; align-items: start; }
.calx { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 28px); background: var(--surface-raised); border: 1px solid var(--line); }
.calx__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calx__month { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.calx__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.calx__nav:disabled { opacity: 0.3; cursor: default; }
.calx__nav:not(:disabled):hover { border-color: var(--white); }
.calx__week,
.calx__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calx__week span { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.calx__day {
  position: relative;
  height: clamp(42px, 4.6vw, 58px);
  border: 1px solid var(--line);
  background: none;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: day-in 0.4s var(--ease-out) both;
  animation-delay: calc(var(--i) * 12ms);
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.calx__day::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
.calx__day.is-free::after { background: #3ecf6e; }
.calx__day.is-part::after { background: #f5b83d; }
.calx__day.is-full { color: var(--ink-subtle); text-decoration: line-through; }
.calx__day.is-full::after { background: #ff6b5b; }
.calx__day.is-closed,
.calx__day.is-off { color: var(--ink-subtle); opacity: 0.45; cursor: default; }
.calx__day.is-closed { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); }
.calx__day:not(:disabled):hover { border-color: var(--white); }
.calx__day.is-today { border-color: var(--line-strong); }
.calx__day.is-picked { background: var(--lime); border-color: var(--lime); color: #0d0f0c; }
.calx__day.is-picked::after { background: #0d0f0c; }
@keyframes day-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.calx__day:disabled { animation-name: day-in; }
.calx__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-muted); }
.calx__legend li { display: inline-flex; align-items: center; gap: 7px; }
.calx__legend i { width: 9px; height: 9px; border-radius: 50%; }
.calx__legend .is-free { background: #3ecf6e; }
.calx__legend .is-part { background: #f5b83d; }
.calx__legend .is-full { background: #ff6b5b; }
.calx__legend .is-closed { border-radius: 2px; background: repeating-linear-gradient(135deg, transparent 0 2px, var(--line-strong) 2px 3px); border: 1px solid var(--line-strong); }
.slots { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); animation: faq-in 0.4s var(--ease-out); }
.slots__day { font-weight: 600; }
.slots__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line-strong); background: none; text-align: left; cursor: pointer; transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.slot b { font-size: 14px; }
.slot span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.slot:not(:disabled):hover { border-color: var(--white); }
.slot:disabled { opacity: 0.45; cursor: default; text-decoration: line-through; }
.slot.is-picked { background: var(--white); border-color: var(--white); color: var(--black); }
.slot.is-picked span { color: inherit; opacity: 0.75; }
.book__pick { display: grid; gap: 4px; padding: 14px 16px; border: 1px dashed var(--line-strong); transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.book__pick-k { font-size: 12px; color: var(--ink-subtle); }
.book__pick b { font-weight: 600; }
.book__pick.is-set { border-style: solid; border-color: var(--lime); background: rgba(229, 249, 10, 0.08); }

html[data-style='corporate'] .bp__sheet { border-radius: 20px; box-shadow: 0 40px 70px -40px rgba(11, 37, 69, 0.6); }
html[data-style='corporate'] .bp__legend button { border-radius: 14px; background: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
html[data-style='corporate'] .bp__legend li.is-hot button { border-color: #a8c400; }
html[data-style='corporate'] .calx { border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
html[data-style='corporate'] :is(.calx__day, .calx__nav) { border-radius: 12px; background: rgba(255, 255, 255, 0.6); }
html[data-style='corporate'] .calx__day.is-closed { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 5px, rgba(13, 15, 12, 0.07) 5px 6px); }
html[data-style='corporate'] .calx__day.is-picked { background: #0d0f0c; border-color: #0d0f0c; color: #fff; }
html[data-style='corporate'] .calx__day.is-picked::after { background: var(--lime); }
html[data-style='corporate'] :is(.calx__month) { text-transform: none; letter-spacing: -0.01em; }
html[data-style='corporate'] .slot { border-radius: 14px; background: rgba(255, 255, 255, 0.6); border-color: rgba(13, 15, 12, 0.14); }
html[data-style='corporate'] .slot.is-picked { background: #0d0f0c; color: #fff; }
html[data-style='corporate'] .book__pick { border-radius: 14px; }
html[data-style='corporate'] .book__pick.is-set { border-color: #a8c400; background: rgba(240, 250, 200, 0.6); }

@media (max-width: 1100px) {
  .bp { grid-template-columns: minmax(0, 1fr); }
  .bp__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp__desc { opacity: 1; }
  .book__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bp__legend { grid-template-columns: minmax(0, 1fr); }
  .bp__sheet { padding: 10px 8px 6px; }
  .calx__week, .calx__grid { gap: 4px; }
  .calx__day { height: 44px; font-size: 13px; }
  .slots__list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bp__walls path { stroke-dashoffset: 0; }
  .bp :is(.bp__doors, .bp__cove, .bp__furn, .bp__labels, .bp__dims, .bp__light, .bp__cone, .bp__camera, .bp__subject, .bp__route) { opacity: 1; }
}

/* ---------- hero window: stronger lean, two views (steps, then the automation builder) ---------- */

.flow {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.flow__views { display: grid; }
.flow__view { grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.6s; }
.flow__view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.7s var(--ease-out) 0.15s, visibility 0s; }

.bld { display: grid; gap: 10px; }
.bld__head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--white); }
.bld__meta { padding-left: 10px; border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-subtle); }
.bld__pct { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.bld__canvas {
  position: relative;
  aspect-ratio: 400 / 220;
  background: radial-gradient(rgba(13, 15, 12, 0.12) 1px, transparent 1.4px) 0 0 / 16px 16px;
  border-radius: 12px;
}
.bld__tools { position: absolute; left: 0; top: 4px; display: grid; gap: 4px; z-index: 2; }
.bld__tools i { width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 1px solid var(--line); }
.bld__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bld__edge { fill: none; stroke: rgba(13, 15, 12, 0.22); stroke-width: 1.6; stroke-dasharray: 220; stroke-dashoffset: 220; }
.bld__edge--hot { stroke: #8fb800; stroke-width: 2; }
.flow__view.is-on .bld__edge { animation: edge-draw 0.9s var(--ease-out) forwards; }
.flow__view.is-on .bld__edge:nth-child(2) { animation-delay: 0.15s; }
.flow__view.is-on .bld__edge:nth-child(3) { animation-delay: 0.55s; }
.flow__view.is-on .bld__edge:nth-child(4) { animation-delay: 0.7s; }
@keyframes edge-draw { to { stroke-dashoffset: 0; } }
.bld__pulse { fill: #7fb300; opacity: 0; }
.bld__pulse--soft { fill: rgba(13, 15, 12, 0.35); }
.flow__view.is-on .bld__pulse { opacity: 1; transition: opacity 0.4s 1.2s; }
.bld__node {
  position: absolute;
  transform: translateY(-50%) scale(0.9);
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(13, 15, 12, 0.1);
  box-shadow: 0 10px 22px -14px rgba(32, 44, 8, 0.5);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.4s;
}
.bld__node b { font-size: 11.5px; font-weight: 600; color: #0d0f0c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld__node span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.bld__node::before,
.bld__node::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(13, 15, 12, 0.35); }
.bld__node::before { left: -4px; }
.bld__node::after { right: -4px; }
.bld__node--a { left: 2%; top: 50%; width: 24%; }
.bld__node--a::before { display: none; }
.bld__node--b { left: 40%; top: 23.6%; width: 23.5%; }
.bld__node--c { left: 40%; top: 76.4%; width: 23.5%; }
.bld__node--d { left: 75%; top: 50%; width: 23%; }
.bld__node--d::after { display: none; }
.flow__view.is-on .bld__node { opacity: 1; transform: translateY(-50%); }
.flow__view.is-on .bld__node--b, .flow__view.is-on .bld__node--c { transition-delay: 0.3s; }
.flow__view.is-on .bld__node--d { transition-delay: 0.7s; }
.flow__view.is-on .bld__node--b,
.flow__view.is-on .bld__node--d { animation: node-live 2.4s ease-in-out 1.4s infinite; }
@keyframes node-live { 0%, 100% { box-shadow: 0 10px 22px -14px rgba(32, 44, 8, 0.5); } 50% { box-shadow: 0 0 0 3px rgba(168, 196, 0, 0.35), 0 10px 22px -14px rgba(32, 44, 8, 0.5); } }
.bld__tag { position: absolute; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.85); font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s 0.5s; }
.bld__tag--true { left: 32%; top: 28%; }
.bld__tag--else { left: 32%; top: 72%; }
.bld__wait { position: absolute; left: 77%; top: 72%; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.85); font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); opacity: 0; transition: opacity 0.4s 1s; }
.flow__view.is-on :is(.bld__tag, .bld__wait) { opacity: 1; }
.bld__runs { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.bld__runs li { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.bld__runs li span:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld__runs i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 15, 12, 0.25); }
.bld__runs li:first-child i { background: #7fb300; animation: rec-blink 1.2s steps(2) infinite; }
.bld__runs b { font-weight: 400; color: var(--ink-subtle); }
.bld__time { color: var(--ink-subtle); }
.flow__view.is-on .bld__runs li { opacity: 1; transform: none; }
.flow__view.is-on .bld__runs li:nth-child(1) { transition-delay: 1.1s; }
.flow__view.is-on .bld__runs li:nth-child(2) { transition-delay: 1.25s; }
.flow__view.is-on .bld__runs li:nth-child(3) { transition-delay: 1.4s; }

/* ---------- route: numbers clear of the line, and a line you can see filling ---------- */

html[data-style='corporate'] .route__rail { height: 2px; top: 10.5px; background: rgba(13, 15, 12, 0.12); }
html[data-style='corporate'] .route__fill { background: linear-gradient(90deg, #8fb800, #4f8f00); }
html[data-style='corporate'] .route__mark .micro {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}
html[data-style='corporate'] .route__step.is-reached .route__mark .micro { color: #0d0f0c; border-color: rgba(127, 179, 0, 0.6); background: #f2f8d8; }
html[data-style='corporate'] .route__mark i { border-color: rgba(13, 15, 12, 0.3); }
@media (max-width: 900px) {
  html[data-style='corporate'] .route__rail { width: 2px; height: auto; top: 0; }
}

/* the builder frame lives inside the same window: the steps view sets the size,
   and a few builder pieces float out past the window's edges */
.flow__views { position: relative; display: block; }
.flow__view[data-flow-view='builder'] { position: absolute; inset: 0; }
.bld { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.bld__canvas { aspect-ratio: auto; height: 100%; min-height: 0; margin-bottom: 64px; }
.bld__node--a { left: -16%; width: 27%; box-shadow: 0 24px 40px -18px rgba(32, 44, 8, 0.55); }
.bld__node--a::before { display: none; }
.bld__wait { left: auto; right: -12%; top: 74%; box-shadow: 0 14px 26px -14px rgba(32, 44, 8, 0.5); background: #fff; }
.bld__runs {
  position: absolute;
  left: -10%;
  right: 22%;
  bottom: -30px;
  padding: 10px 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 50px -24px rgba(32, 44, 8, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out) 0.9s, transform 0.6s var(--ease-out) 0.9s;
}
.bld__runs::before { content: 'last runs'; display: block; padding: 0 4px 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.flow__view.is-on .bld__runs { opacity: 1; transform: none; }
.flow__view:not(.is-on) .bld__runs { transition-delay: 0s; }
@media (max-width: 900px) {
  .bld__node--a { left: -4%; }
  .bld__wait { right: -2%; }
  .bld__runs { left: -2%; right: 8%; }
}

/* ---------- inner-page hero windows (bright mode) ---------- */

/* copy and window side by side only where there is a window; other heroes stay stacked */
html[data-style='corporate'] .hero__inner { display: block; }
html[data-style='corporate'] .hero__inner:has(> .flow-stage) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: start;
}
html[data-style='corporate'] .hero--page .hero__inner:has(> .flow-stage) { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; }
html[data-style='corporate'] .hero--page { align-items: center; }
html[data-style='corporate'] .hero--page .hero__lead { max-width: 44ch; }
@media (max-width: 1100px) {
  html[data-style='corporate'] .hero__inner:has(> .flow-stage),
  html[data-style='corporate'] .hero--page .hero__inner:has(> .flow-stage) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
@media (max-width: 900px) {
  html[data-style='corporate'] .hero__inner:has(> .flow-stage),
  html[data-style='corporate'] .hero--page .hero__inner:has(> .flow-stage) { grid-template-columns: minmax(0, 1fr); }
}

.art { gap: 10px; }
.art__foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 2px; border-top: 1px solid var(--line); }
.art__foot span { padding: 3px 9px; border-radius: 99px; background: rgba(13, 15, 12, 0.05); font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.art [data-cycle-item] { transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out), opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.45s var(--ease-out), fill 0.45s, stroke 0.45s; }

/* services: five branches around one hub */
.orb svg { width: 100%; height: auto; overflow: visible; }
.orb__ring ellipse { fill: none; stroke: rgba(13, 15, 12, 0.14); stroke-dasharray: 3 6; }
.orb__ring { transform-box: fill-box; transform-origin: center; animation: spin-slow 40s linear infinite; }
.orb__spokes path { stroke: rgba(13, 15, 12, 0.14); stroke-width: 1.4; }
.orb__pulses circle { fill: #7fb300; }
.orb__hub { fill: #0d0f0c; }
.orb__hubt { fill: var(--lime); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.orb__node rect { fill: #fff; stroke: rgba(13, 15, 12, 0.12); }
.orb__node text { fill: #2a2f28; font-size: 11.5px; font-weight: 600; }
.orb__node.is-on rect { fill: var(--lime); stroke: #a8c400; }
.orb__node.is-on text { fill: #0d0f0c; }

/* work: a case file stepping through challenge, approach, result */
.case { display: grid; gap: 10px; padding: 2px 4px; }
.case__title { display: grid; font-weight: 600; font-size: 15px; }
.case__title span { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-subtle); }
.case__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.case__tabs li { display: grid; gap: 1px; padding: 7px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-subtle); background: rgba(13, 15, 12, 0.04); }
.case__tabs b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.case__tabs li.is-past { color: var(--ink-muted); }
.case__tabs li.is-on { background: #0d0f0c; color: #fff; }
.case__tabs li.is-on b { color: var(--lime); }
.case__panes { display: grid; min-height: 48px; }
.case__panes p { grid-area: 1 / 1; font-size: 14px; color: var(--ink-soft); opacity: 0; transform: translateY(6px); }
.case__panes p.is-on { opacity: 1; transform: none; }
.case__chart { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding: 8px; border-radius: 12px; background: rgba(13, 15, 12, 0.03); }
.case__chart i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #c8e400, #7fb300); transform-origin: bottom; animation: bar-breathe 2.6s ease-in-out infinite; }
.case__chart i:nth-child(even) { animation-delay: 0.6s; }

/* clients: a wall of local industries, with a slot waiting for you */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wall__tile { display: grid; place-items: center; min-height: 58px; padding: 6px; border-radius: 12px; border: 1px solid rgba(13, 15, 12, 0.08); background: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 600; color: var(--ink-muted); text-align: center; }
.wall__tile.is-on { background: #0d0f0c; color: #fff; transform: translateY(-3px); box-shadow: 0 12px 20px -12px rgba(13, 15, 12, 0.6); }
.wall__tile--you { border: 1.5px dashed #a8c400; color: var(--accent-ink); background: rgba(240, 250, 200, 0.6); animation: cal-hot 2s ease-in-out infinite; }

/* studio: the day's call sheet with a playhead */
.sheet { display: grid; gap: 8px; padding: 2px 4px; }
.sheet__day { display: grid; font-weight: 600; font-size: 15px; }
.sheet__day span { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-subtle); }
.sheet__list { display: grid; gap: 3px; }
.sheet__list li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13px; color: var(--ink-muted); }
.sheet__list span { font-family: var(--font-mono); font-size: 11.5px; }
.sheet__list b { font-weight: 500; }
.sheet__list li.is-past { color: var(--ink-subtle); text-decoration: line-through; text-decoration-color: rgba(13, 15, 12, 0.25); }
.sheet__list li.is-on { background: #fff; color: #0d0f0c; box-shadow: 0 10px 20px -14px rgba(32, 44, 8, 0.5); }
.sheet__list li.is-on::after { content: 'REC'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 4px; background: #ff3b30; color: #fff; font-family: var(--font-mono); font-size: 11px; animation: rec-blink 1.2s steps(2) infinite; }

/* about: the founder and one lead per branch */
.tree svg { width: 100%; height: auto; overflow: visible; }
.tree__lines path { fill: none; stroke: rgba(13, 15, 12, 0.18); stroke-width: 1.4; }
.tree__pulses circle { fill: #7fb300; }
.tree__root rect { fill: #0d0f0c; }
.tree__root text { fill: #fff; font-size: 12px; font-weight: 600; }
.tree__root .tree__sub { fill: var(--lime); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.tree__node rect { fill: #fff; stroke: rgba(13, 15, 12, 0.12); }
.tree__node text { fill: #2a2f28; font-size: 11px; font-weight: 600; }
.tree__node.is-on rect { fill: var(--lime); stroke: #a8c400; }

/* careers: open roles in a terminal */
.term { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #0f120d; color: #cfd6c8; font-family: var(--font-mono); font-size: 12px; }
.term__cmd { color: var(--lime); }
.term__cmd i { display: inline-block; width: 7px; height: 13px; margin-left: 4px; vertical-align: -2px; background: var(--lime); animation: rec-blink 1s steps(2) infinite; }
.term__list { display: grid; gap: 4px; }
.term__list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; opacity: 0.6; }
.term__list b { font-weight: 400; color: #8fa087; }
.term__list li.is-on { opacity: 1; background: rgba(229, 249, 10, 0.1); }
.term__list li.is-on b { color: var(--lime); }
.term__note { color: #7d8a76; font-size: 11px; }

/* contact: requests arriving and being answered */
.inbox { display: grid; gap: 6px; min-height: 248px; align-content: start; }
.inbox li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(13, 15, 12, 0.06); box-shadow: 0 10px 20px -16px rgba(32, 44, 8, 0.45); opacity: 0; transform: translateY(-8px) scale(0.98); }
.inbox li.is-on { opacity: 1; transform: none; }
.inbox__ic { width: 26px; height: 26px; border-radius: 8px; }
.inbox__ic--wa { background: #25d366; }
.inbox__ic--p { background: var(--lime); }
.inbox__ic--s { background: #0d0f0c; }
.inbox__ic--m { background: #2f86d6; }
.inbox__msg { display: grid; font-size: 12px; color: var(--ink-muted); min-width: 0; }
.inbox__msg b { font-size: 12.5px; color: #0d0f0c; }
.inbox__st { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(168, 196, 0, 0.18); color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 560px) { .inbox__st { display: none; } .inbox li { grid-template-columns: 26px minmax(0, 1fr); } }

/* ---------- studio plan: a neutral architectural drawing (charcoal in dark mode, paper in bright) ---------- */

.bp__sheet {
  --ink-bp: #e4e7df;
  --bp-acc: var(--lime);
  --bp-grid: rgba(228, 231, 223, 0.06);
  --bp-grid-strong: rgba(228, 231, 223, 0.1);
  --bp-bg: #121411;
  background:
    linear-gradient(var(--bp-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--bp-grid-strong) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--bp-grid-strong) 1px, transparent 1px) 0 0 / 120px 120px,
    var(--bp-bg);
  border-color: rgba(228, 231, 223, 0.18);
}
html[data-style='corporate'] .bp__sheet {
  --ink-bp: #23271f;
  --bp-acc: #7fb300;
  --bp-grid: rgba(13, 15, 12, 0.045);
  --bp-grid-strong: rgba(13, 15, 12, 0.08);
  --bp-bg: #fbfcf8;
  border: 1px solid rgba(13, 15, 12, 0.1);
  box-shadow: var(--glass-shadow), 0 40px 70px -46px rgba(32, 44, 8, 0.45);
}
.bp__title { border-bottom-color: var(--bp-grid-strong); }
.bp__walls path { stroke-width: 2.2; }
.bp__walls .bp__outer { stroke-width: 5; }
.bp__zone.is-hot { fill: rgba(168, 196, 0, 0.14); }
.bp__glass path { fill: none; stroke: var(--ink-bp); stroke-width: 1.2; opacity: 0.8; }
.bp__roller { fill: none; stroke: var(--bp-acc); stroke-width: 4; stroke-dasharray: 6 5; }
.bp__arrows { fill: none; stroke: var(--ink-bp); stroke-width: 1.2; opacity: 0.6; }
.bp__grid-rig path { fill: none; stroke: var(--ink-bp); stroke-width: 0.8; stroke-dasharray: 2 6; opacity: 0.4; }
.bp__acoustic rect { stroke: var(--ink-bp); stroke-width: 1; }
.bp__hatch { stroke: var(--ink-bp); stroke-width: 1.2; opacity: 0.6; }
.bp__rolls rect, .bp__stands path, .bp__track path, .bp__pod circle, .bp__power rect, .bp__north circle, .bp__scale path, .bp__furn > * { fill: none; stroke: var(--ink-bp); stroke-width: 1.2; }
.bp__sleepers { opacity: 0.55; }
.bp__light { fill: var(--bp-acc); }
.bp__cone polygon { fill: var(--bp-acc); }
.bp__camera rect { fill: var(--bp-bg); stroke: var(--bp-acc); }
.bp__fov { fill: color-mix(in srgb, var(--bp-acc) 12%, transparent); stroke: var(--bp-acc); }
.bp__subject path { stroke: var(--bp-acc); }
.bp__route { stroke: var(--bp-acc); }
.bp__screen { fill: var(--bp-acc) !important; stroke: none !important; opacity: 0.7; }
.bp__mic { fill: var(--bp-acc) !important; stroke: none !important; }
.bp__live { stroke: var(--bp-acc) !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bp__power rect { stroke: var(--bp-acc); }
.bp__north path { fill: var(--ink-bp); }
.bp__north text, .bp__scale text { fill: var(--ink-bp); font-family: var(--font-mono); font-size: 12px; }
.bp__curtain { stroke-dasharray: none; }

/* layers fade in after the walls */
.bp :is(.bp__glass, .bp__loading, .bp__grid-rig, .bp__acoustic, .bp__rolls, .bp__stands, .bp__track, .bp__pod, .bp__power, .bp__north, .bp__scale) { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.bp.is-drawn :is(.bp__glass, .bp__loading, .bp__grid-rig, .bp__acoustic, .bp__rolls, .bp__stands, .bp__track, .bp__pod, .bp__power, .bp__north, .bp__scale) { opacity: 1; transition-delay: 1.2s; }
.bp.is-drawn .bp__grid-rig { opacity: 0.4; }
/* the set keeps working: camera glides on its track, the podcast set goes live, screens flicker */
.bp.is-drawn .bp__camera { animation: dolly 8s ease-in-out 2.2s infinite; }
@keyframes dolly { 0%, 100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-70px) rotate(-12deg); } 70% { transform: translateX(80px) rotate(12deg); } }
.bp.is-drawn .bp__live { animation: pod-live 2.4s ease-out 2.4s infinite; }
@keyframes pod-live { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.bp.is-drawn .bp__cone--c polygon { animation: cone 2.8s ease-in-out 2.6s infinite; }
.bp.is-drawn .bp__screen { animation: flicker 3s steps(3) 2s infinite; }
@keyframes flicker { 0%, 100% { opacity: 0.7; } 33% { opacity: 0.35; } 66% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .bp :is(.bp__glass, .bp__loading, .bp__grid-rig, .bp__acoustic, .bp__rolls, .bp__stands, .bp__track, .bp__pod, .bp__power, .bp__north, .bp__scale) { opacity: 1; }
}
.flow__view[data-flow-view='builder'] { display: block; }
.flow__bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bld__head { white-space: nowrap; font-size: 12.5px; }
.bld__head > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.bld__canvas { margin-bottom: 104px; }
.bld__runs { bottom: -40px; }
.bld__node { padding: 6px 8px; }
.bld__node b { white-space: normal; line-height: 1.2; font-size: 11px; }
.bld__node--b { top: 21%; }
.bld__node--c { top: 68%; }
.bld__tag--true { top: 27%; }
.bld__tag--else { top: 64%; }
.bld__canvas { margin-bottom: 112px; }

/* builder pieces stay inside the window; the window sits centred in the right half, not on the edge */
.bld { grid-template-rows: auto minmax(0, 1fr) auto; }
.bld__canvas { margin-bottom: 0; }
.bld__node--a { left: 2%; width: 24%; box-shadow: 0 10px 22px -14px rgba(32, 44, 8, 0.5); }
.bld__wait { right: 2%; top: 74%; box-shadow: none; }
.bld__runs {
  position: static;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bld__runs::before { padding: 0 4px 2px; }
html[data-style='corporate'] .hero__inner:has(> .flow-stage),
html[data-style='corporate'] .hero--page .hero__inner:has(> .flow-stage) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
html[data-style='corporate'] .hero__inner > .flow-stage { justify-self: center; width: 100%; max-width: 430px; }
@media (max-width: 900px) {
  html[data-style='corporate'] .hero__inner:has(> .flow-stage),
  html[data-style='corporate'] .hero--page .hero__inner:has(> .flow-stage) { grid-template-columns: minmax(0, 1fr); }
  html[data-style='corporate'] .hero__inner > .flow-stage { justify-self: start; }
  .bld__node--a { left: 2%; }
  .bld__wait { right: 2%; }
}

/* ---------- campaign flow (home, "Results you can see") ---------- */

.proof { padding: var(--section-y) 0; }
.proof::before { background: rgba(0, 0, 0, 0.84); }

.rflow {
  --acc: var(--lime);
  --acc-ink: var(--lime);
  --card: var(--surface-high);
  --card-edge: var(--line);
  position: relative;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--line);
  background: var(--surface-raised);
}
.rflow__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
.rflow__bar > i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); opacity: 0.6; }
.rflow__path { margin-left: 8px; }
.rflow__note { margin-left: auto; padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: 99px; }

.rflow__canvas {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 14px;
  background: radial-gradient(rgba(127, 127, 127, 0.22) 1px, transparent 1.4px) 0 0 / 18px 18px;
}
.rflow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rflow__line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 6; }
.rflow__lit { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease-out); }
.rflow__pulse { fill: var(--acc); opacity: 0; }
.rflow__halo { fill: var(--acc); opacity: 0; filter: blur(5px); }

.rflow__stages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rstage {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.5s var(--ease-out);
}
.rstage:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); }
.rstage:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -24px rgba(0, 0, 0, 0.55); z-index: 2; }
.rstage__glow {
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 30px;
  background: radial-gradient(closest-side, rgba(200, 235, 20, 0.45), rgba(200, 235, 20, 0));
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.rstage.is-active .rstage__glow { opacity: 1; }
.rstage.is-active { border-color: var(--acc); }
.rstage__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--surface-raised);
  border: 1px solid var(--card-edge);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.rstage__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rstage.is-active .rstage__icon,
.rstage.is-done .rstage__icon { background: var(--acc); border-color: var(--acc); }
.rstage.is-active .rstage__icon svg,
.rstage.is-done .rstage__icon svg { stroke: #0d0f0c; }
.rstage__n { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.rstage.is-done .rstage__n::before { content: '✓ '; color: var(--acc-ink); }
.rstage__t { margin-top: 6px; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.rstage__s { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.rstage__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rstage__tags b { padding: 2px 7px; border-radius: 99px; border: 1px solid var(--card-edge); font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-subtle); transition: color 0.5s, border-color 0.5s; }
.rstage.is-active .rstage__tags b,
.rstage.is-done .rstage__tags b { color: var(--ink-soft); border-color: var(--line-strong); }
.rstage__dot { position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line-strong); opacity: 0; }

.rpanel {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  margin: clamp(26px, 3.4vw, 44px) 0 0 auto;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
  opacity: 0.35;
  transform: translateY(12px);
  filter: saturate(0.4);
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out), filter 0.7s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.rpanel.is-on { opacity: 1; transform: none; filter: none; }
.rpanel.is-on:hover { transform: translateY(-5px); }
.rpanel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rpanel__title { font-size: 14px; font-weight: 600; }
.rpanel__tag { padding: 2px 9px; border-radius: 99px; border: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.rpanel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.rpanel__list li { display: grid; gap: 4px; }
.rpanel__k { font-size: 12.5px; color: var(--ink-muted); }
.rpanel__v { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--white); }
.rpanel__bar { height: 6px; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.rpanel__bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.rpanel.is-on .rpanel__bar::after { transform: scaleX(var(--v)); }
.rpanel.is-on li:nth-child(2) .rpanel__bar::after { transition-delay: 0.12s; }
.rpanel.is-on li:nth-child(3) .rpanel__bar::after { transition-delay: 0.24s; }
.rpanel.is-on li:nth-child(4) .rpanel__bar::after { transition-delay: 0.36s; }
.rpanel__foot { font-size: 12.5px; color: var(--ink-subtle); padding-top: 10px; border-top: 1px solid var(--line); }
.rflow.is-resetting .rstage,
.rflow.is-resetting .rflow__lit { transition-duration: 0.6s; }

/* bright mode: warm paper canvas, glass cards */
html[data-style='corporate'] .proof::before { background: none; }
html[data-style='corporate'] .rflow {
  --acc: #a8c400;
  --acc-ink: #4a6b00;
  --card: rgba(255, 255, 255, 0.92);
  --card-edge: rgba(13, 15, 12, 0.08);
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), 0 50px 90px -56px rgba(60, 90, 0, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html[data-style='corporate'] .rflow__canvas { background: radial-gradient(rgba(13, 15, 12, 0.13) 1px, transparent 1.4px) 0 0 / 18px 18px, #fbfcf8; border: 1px solid rgba(13, 15, 12, 0.05); }
html[data-style='corporate'] .rflow__lit { stroke: #8fb800; }
html[data-style='corporate'] .rflow__pulse,
html[data-style='corporate'] .rflow__halo { fill: #9cc800; }
html[data-style='corporate'] .rstage { box-shadow: 0 1px 0 #fff inset, 0 16px 32px -22px rgba(32, 44, 8, 0.4); }
html[data-style='corporate'] .rstage:hover { box-shadow: 0 1px 0 #fff inset, 0 30px 50px -26px rgba(32, 44, 8, 0.45); }
html[data-style='corporate'] .rstage.is-active { border-color: rgba(168, 196, 0, 0.8); }
html[data-style='corporate'] .rstage__icon { background: #f4f6ef; }
html[data-style='corporate'] .rstage__icon svg { stroke: #0d0f0c; }
html[data-style='corporate'] .rstage.is-active .rstage__icon,
html[data-style='corporate'] .rstage.is-done .rstage__icon { background: var(--lime); border-color: #c8e400; }
html[data-style='corporate'] .rstage__t { text-transform: none; letter-spacing: -0.01em; font-weight: 650; font-size: 15.5px; }
html[data-style='corporate'] .rpanel__bar::after { background: linear-gradient(90deg, #b5d400, #6fae16); }
html[data-style='corporate'] .rpanel { box-shadow: 0 1px 0 #fff inset, 0 30px 60px -34px rgba(32, 44, 8, 0.45); }

@media (max-width: 1100px) {
  .rflow__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .rstage:nth-child(even) { margin-top: 36px; }
  .rpanel { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .rflow__note { margin-left: 0; order: 9; }
  .rflow__stages { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .rstage { width: 88%; }
  .rstage:nth-child(even) { margin: 0 0 0 auto; }
  .rpanel__list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rstage, .rpanel, .rflow__lit, .rstage__glow { transition: none; }
  .rstage:hover, .rpanel.is-on:hover { transform: none; }
}

/* campaign flow: timeline beside the results panel, so the lower row is full */
.rflow__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(26px, 3.4vw, 44px); align-items: stretch; }
.rflow__bottom .rpanel { margin: 0; width: 100%; }
.rfeed {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.rfeed:hover { transform: translateY(-5px); }
.rfeed__list { position: relative; display: grid; gap: 4px; }
.rfeed__list::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); opacity: 0.6; }
.rfeed__list li {
  position: relative;
  display: grid;
  grid-template-columns: 10px 76px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  opacity: 0.32;
  transform: translateX(-6px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.rfeed__list li.is-on { opacity: 1; transform: none; }
.rfeed__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line-strong); transform: translateY(1px); transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
.rfeed__list li.is-on .rfeed__dot { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 4px rgba(200, 235, 20, 0.22); }
.rfeed__when { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-subtle); }
.rfeed__what { display: grid; gap: 2px; font-size: 13px; color: var(--ink-muted); }
.rfeed__what b { font-size: 14px; font-weight: 600; color: var(--white); }
html[data-style='corporate'] .rfeed { box-shadow: 0 1px 0 #fff inset, 0 30px 60px -34px rgba(32, 44, 8, 0.45); }
@media (max-width: 1100px) { .rflow__bottom { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rfeed__list li { grid-template-columns: 10px minmax(0, 1fr); } .rfeed__when { grid-column: 2; } .rfeed__what { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .rfeed__list li { transition: none; } .rfeed:hover { transform: none; } }

/* ---------- footer: brand, services, explore, talk ---------- */
.footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 48px clamp(40px, 6vw, 112px); }
.footer__brandcol { display: grid; gap: 18px; align-content: start; max-width: 400px; }
.footer__claim { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; line-height: 1.25; text-transform: uppercase; margin-top: 10px; }
.footer__about { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 64px); }
.footer__cta { display: inline-flex !important; align-items: center; gap: 6px; color: var(--white) !important; font-weight: 600; }
.footer__ext { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.footer__cta:hover .footer__ext { transform: translate(2px, -2px); }
.footer__follow { margin-top: 26px; }
.footer__follow .micro { margin-bottom: 10px; }
.footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.footer__social a { padding: 4px 0; border: 0; min-height: 0; background: none; font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.footer__social a + a::before { content: '·'; margin: 0 10px; color: var(--ink-subtle); }
.footer__social a:hover { color: var(--lime); background: none; }
.footer__legal { display: inline-flex; gap: 22px; margin-left: auto; margin-right: 32px; }
.footer__legal a { text-decoration: none; color: var(--ink-subtle); min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal a:hover { color: var(--white); }
html[data-style='corporate'] .footer { background: rgba(250, 251, 247, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-style='corporate'] .footer__claim { text-transform: none; letter-spacing: -0.02em; font-weight: 650; }
html[data-style='corporate'] .footer__cols a:hover,
html[data-style='corporate'] .footer__social a:hover { color: var(--accent-ink); }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__legal { margin: 0; }
}
@media (max-width: 560px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols > div:last-child { grid-column: 1 / -1; }
}
.hero--legal { min-height: 0; padding-top: calc(var(--nav-h) + clamp(56px, 10vh, 112px)); padding-bottom: 8px; }
.legal { max-width: 70ch; }
.legal__draft { display: inline-block; padding: 4px 12px; border: 1px dashed var(--line-strong); border-radius: 99px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
.legal__h { margin: 2em 0 0.6em; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white); text-transform: uppercase; }
html[data-style='corporate'] .legal__h { text-transform: none; letter-spacing: -0.01em; font-weight: 650; }
.footer__social { gap: 8px; }
.footer__soc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink-subtle); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.footer__soc + .footer__soc::before { content: none; }
.footer__soc svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer__soc:not(.is-live) { cursor: default; opacity: 0.7; }
.footer__soc.is-live { color: var(--ink-soft); cursor: pointer; }
.footer__soc.is-live:hover { color: #0d0f0c; background: var(--lime); border-color: var(--lime); transform: translateY(-2px); }
html[data-style='corporate'] .footer__soc { background: rgba(255, 255, 255, 0.7); border-color: rgba(13, 15, 12, 0.1); }
.footer__social { gap: 6px; flex-wrap: nowrap; }
.footer__soc { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.footer__soc svg { width: 17px; height: 17px; }
@media (max-width: 380px) { .footer__social { flex-wrap: wrap; } }
.footer__claim { text-transform: none; letter-spacing: -0.01em; }
.footer__soc:not(.is-live) { opacity: 1; }

/* ---------- audit fixes: contrast and small screens (no visual redesign) ---------- */

/* studio floor-plan descriptions and careers terminal rows: readable without fading the text */
.bp__desc { opacity: 1; color: var(--ink-subtle); }
.bp__legend li.is-hot .bp__desc { color: var(--ink-muted); }
.term__list li { opacity: 1; color: #a7b2a0; }
.term__list b { color: #a7b2a0; }
.term__list li.is-on { color: #e6ebe2; }

/* the floating WhatsApp region takes no space of its own */
.wa-dock { display: contents; }

/* footer social icons wrap rather than push past the edge on tablet widths */
.footer__social { flex-wrap: wrap; }

/* hero automation frame stays inside its window on narrow phones */
.bld, .bld > *, .bld__runs li { min-width: 0; max-width: 100%; }
.bld__head, .bld__runs li { overflow: hidden; }

@media (max-width: 400px) {
  /* proposal step buttons fit a 320px screen */
  .pw__nav .btn { padding: 0 16px; letter-spacing: 0.06em; min-width: 0; }
  .pw__nav .btn span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 359px) {
  /* the smallest phones: the header proposal button gives way (it is first in the menu and on every page) */
  .nav__cta { display: none; }
}
.form-note--privacy a, .pw__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-note--privacy { margin-top: -6px; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tree__who { fill: var(--ink-subtle); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.tree__node.is-on .tree__who { fill: #0d0f0c; }
.prose strong { color: var(--white); font-weight: 600; }
.kit { margin-top: clamp(36px, 5vw, 64px); }
.kit .eyebrow { margin-bottom: 14px; }