@font-face {
      font-family: "Onest";
      src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    @font-face {
      font-family: "Onest";
      src: url("assets/fonts/onest-latin.woff2") format("woff2");
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      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;
    }

    :root {
      color-scheme: dark;
      --accent: #f94137;
      --ink: #f4f2ed;
      --muted: rgba(244, 242, 237, .55);
      --line: rgba(255, 255, 255, .095);
      --panel: rgba(27, 27, 27, .76);
      --radius: clamp(20px, 1.8vw, 30px);
      --gap: clamp(10px, 1vw, 20px);
    }

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

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      overscroll-behavior: none;
      background: #080808;
    }

    body {
      color: var(--ink);
      font-family: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(64rem 38rem at 58% 8%, rgba(249, 65, 55, .065), transparent 66%),
        #070707;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    button,
    a { font: inherit; }

    button { color: inherit; }

    button:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }

    button.card:focus-visible {
      outline: 1px solid rgba(249,65,55,.72);
      outline-offset: -1px;
    }

    .about-main:focus-visible {
      outline: 1px solid rgba(249,65,55,.72);
      outline-offset: -1px;
    }

    .noise-layer {
      position: fixed;
      inset: 0;
      z-index: 50;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.32) 0 .35px, transparent .55px),
        radial-gradient(circle at 70% 65%, rgba(255,255,255,.22) 0 .3px, transparent .5px);
      background-position: 0 0, 1px 1px;
      background-size: 3px 3px, 4px 4px;
      opacity: .055;
      mix-blend-mode: soft-light;
    }

    .app {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: clamp(36px, 4.5vh, 52px) minmax(0, 1fr);
      width: 100%;
      height: 100svh;
      height: 100dvh;
      min-height: 100%;
      padding: clamp(10px, 1.35vw, 28px);
      padding-top: max(clamp(10px, 1.35vw, 28px), env(safe-area-inset-top));
      padding-bottom: max(clamp(10px, 1.35vw, 28px), env(safe-area-inset-bottom));
      transition: filter .45s ease, transform .55s cubic-bezier(.08,.74,.56,1);
    }

    html.modal-open .app {
      filter: saturate(.78) brightness(.5);
      transform: none;
    }

    .topbar {
      z-index: 5;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: start;
      gap: 24px;
      font-size: clamp(11px, .9vw, 18px);
      font-weight: 650;
      line-height: 1;
      letter-spacing: -.025em;
      animation: fade-down .8s cubic-bezier(.2,.8,.2,1) both;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.2vw, 24px);
      min-width: 0;
    }

    .brand-caption,
    .role,
    .clock { white-space: nowrap; }

    .brand-caption {
      appearance: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .72em;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(244,242,237,.62);
      cursor: pointer;
      font-family: inherit;
      font-size: .75em;
      font-weight: 620;
      line-height: 1;
      letter-spacing: .115em;
      text-align: left;
      text-transform: uppercase;
      transition: color .2s ease;
    }

    .brand-caption:hover { color: rgba(244,242,237,.9); }

    .brand-caption:focus-visible {
      outline: 1px solid rgba(255,81,73,.72);
      outline-offset: 5px;
      border-radius: 1px;
    }

    .brand-caption-text {
      display: inline-block;
      min-width: 1ch;
      will-change: contents, color, text-shadow;
    }

    .brand-caption[data-decoding="true"] .brand-caption-text {
      color: rgba(255,255,255,.92);
      text-shadow: 0 0 9px rgba(255,81,73,.24);
    }

    .role {
      position: relative;
      display: grid;
      width: clamp(280px, 42vw, 620px);
      height: 1.25em;
      align-items: center;
      justify-self: center;
      overflow: hidden;
      text-align: center;
    }

    .role-text {
      display: block;
      transform: translateY(0);
      opacity: 1;
      white-space: nowrap;
      will-change: transform, opacity;
    }

    .role[data-timed="true"] .role-text::before {
      content: attr(data-time-label);
      display: inline-block;
      margin-right: .9em;
      padding-right: .9em;
      border-right: 1px solid rgba(255,81,73,.46);
      color: #ff5149;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: .72em;
      font-weight: 760;
      letter-spacing: .065em;
      line-height: 1.35;
      transform: translateY(-.06em);
    }

    .role[data-timed="true"] .role-text {
      font-weight: 620;
      letter-spacing: -.03em;
    }

    .role-brand {
      color: var(--ink);
      font-weight: 820;
      letter-spacing: .012em;
    }

    .clock-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(8px, 1vw, 18px);
      justify-self: end;
    }

    .interface-controls {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: none;
    }

    .header-control {
      position: relative;
      display: grid;
      min-width: 32px;
      height: 27px;
      place-items: center;
      padding: 0 9px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: rgba(244,242,237,.72);
      cursor: pointer;
      font: 650 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .06em;
      transition: border-color .2s ease, background-color .2s ease, color .2s ease;
    }

    .header-control:hover {
      border-color: rgba(255,255,255,.28);
      background: rgba(255,255,255,.075);
      color: var(--ink);
    }

    .header-control:focus-visible { outline-offset: 2px; }
    .header-control--theme { width: 32px; padding: 0; }
    .theme-icon { display: block; width: 12px; height: 12px; }
    .theme-icon svg { display: block; width: 100%; height: 100%; }
    .theme-icon--moon { display: none; }

    html[data-theme="light"] .theme-icon--sun { display: none; }
    html[data-theme="light"] .theme-icon--moon { display: block; }

    .logo-word {
      display: inline-flex;
      align-items: center;
      gap: .015em;
      color: currentColor;
      font-weight: 760;
      font-feature-settings: "kern", "calt" 0;
      font-variation-settings: "wght" 760;
      letter-spacing: -.085em;
      line-height: .72;
      text-transform: uppercase;
    }

    .logo-word > span:not(.logo-e) { display: block; }

    .logo-e {
      display: grid;
      align-content: space-between;
      width: .72em;
      height: .67em;
      margin-inline: .035em .03em;
      transform: translateY(.015em);
    }

    .logo-e i {
      display: block;
      width: 100%;
      height: .105em;
      background: currentColor;
    }

    .top-logo {
      display: block;
      width: clamp(76px, 6.6vw, 118px);
      height: auto;
      flex: none;
      filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(2690%) hue-rotate(342deg) brightness(104%) contrast(96%);
    }

    .stage {
      position: relative;
      min-width: 0;
      min-height: 0;
      padding-top: clamp(94px, 15.5vh, 172px);
    }

    .hero-logo {
      position: absolute;
      top: clamp(22px, 3vh, 38px);
      left: 50%;
      z-index: 1;
      width: min(58vw, 1120px);
      max-width: none;
      transform: translateX(-50%);
      opacity: .98;
      pointer-events: none;
      user-select: none;
      animation: logo-rise 1s cubic-bezier(.08,.74,.56,1) .08s both;
    }

    .hero-logo img {
      display: block;
      width: 100%;
      height: auto;
      filter: brightness(0) invert(1) drop-shadow(0 0 44px rgba(255,255,255,.04));
    }

    .hero-index {
      position: absolute;
      top: clamp(12px, 2vh, 24px);
      right: 0;
      z-index: 1;
      color: rgba(255,255,255,.28);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8px, .58vw, 12px);
      line-height: 1.4;
      letter-spacing: .08em;
      text-align: right;
      text-transform: uppercase;
    }

    .bento {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .card {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(23,23,23,.95), rgba(10,10,10,.94));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 0 0 1px rgba(255,255,255,.008);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    button.card {
      width: 100%;
      padding: 0;
      border-color: var(--line);
      text-align: left;
      cursor: pointer;
      transition: border-color .25s ease, background-color .25s ease;
    }

    button.card::after { content: none; }

    .about-main {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .about-main .card-inner { pointer-events: none; }

    .about-legal-links {
      position: absolute;
      right: clamp(18px, 2.25vw, 42px);
      bottom: clamp(55px, 4.25vw, 76px);
      left: clamp(18px, 2.25vw, 42px);
      z-index: 6;
      display: flex;
      flex-wrap: wrap;
      gap: 5px 13px;
      width: fit-content;
      max-width: calc(100% - clamp(36px, 4.5vw, 84px));
    }

    .about-legal-links a {
      position: relative;
      color: rgba(255,255,255,.46);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8.5px, .6vw, 10px);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: .045em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .about-legal-links a:hover,
    .about-legal-links a:focus-visible { color: var(--ink); }

    .card-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: clamp(18px, 2.25vw, 42px);
    }

    .card-kicker {
      display: block;
      color: rgba(255,255,255,.5);
      font-family: "Onest", Arial, sans-serif;
      font-size: clamp(11px, .72vw, 14px);
      font-weight: 580;
      line-height: 1.2;
      letter-spacing: .01em;
      text-transform: none;
    }

    .card-kicker--sentence {
      letter-spacing: .01em;
      text-transform: none;
    }

    .card-title-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
    }

    .card-label {
      font-size: clamp(18px, 1.55vw, 30px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -.03em;
    }

    .arrow {
      display: inline-flex;
      width: auto;
      height: 16px;
      flex: none;
      align-items: center;
      justify-content: flex-end;
      border: 0;
      border-radius: 0;
      color: rgba(255,255,255,.68);
      font-size: clamp(15px, 1.45vw, 28px);
      font-weight: 400;
      transition: color .3s ease, transform .4s cubic-bezier(.08,.74,.56,1);
    }

    button.card:hover .arrow,
    .about-main:hover .arrow { color: rgba(255,255,255,.68); transform: none; }

    .about { grid-column: 1; grid-row: 1; animation: card-in .72s cubic-bezier(.08,.74,.56,1) .06s both; }
    .services { grid-column: 2 / 5; grid-row: 1; animation: card-in .72s cubic-bezier(.08,.74,.56,1) .1s both; }
    .showcase { grid-column: 1 / 3; grid-row: 2; animation: card-in .72s cubic-bezier(.08,.74,.56,1) .14s both; }
    .contact { grid-column: 3; grid-row: 2; animation: card-in .72s cubic-bezier(.08,.74,.56,1) .18s both; }
    .rail { grid-column: 4; grid-row: 2; animation: card-in .72s cubic-bezier(.08,.74,.56,1) .22s both; }

    .services .card-inner { padding-inline: clamp(24px, 2.8vw, 54px); }

    /* Match the projects tile: the service action stays in the editorial
       text column instead of being stranded at the far edge of a wide card. */
    @media (min-width: 701px) {
      .services .card-title-row { width: min(43%, 410px); }
    }

    .showcase .card-inner { padding-inline: clamp(24px, 2.8vw, 54px); }

    .contact .card-inner { padding: clamp(18px, 2.25vw, 42px); }

    .contact .card-label {
      font-size: clamp(16px, 1.55vw, 28px);
      white-space: nowrap;
    }

    .contact .card-title-row { gap: clamp(8px, 1vw, 16px); }

    .services-copy,
    .contact-copy {
      max-width: 570px;
      color: rgba(255,255,255,.64);
      font-size: clamp(11px, .95vw, 18px);
      font-weight: 540;
      line-height: 1.25;
    }

    .services-copy strong,
    .contact-copy strong { color: var(--ink); font-weight: 650; }

    .contact-copy {
      max-width: 86%;
      font-size: clamp(10px, .72vw, 14px);
    }

    .service-orbit {
      position: absolute;
      top: 50%;
      right: 7%;
      width: clamp(110px, 11vw, 215px);
      aspect-ratio: 1;
      transform: translateY(-50%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 50%;
      opacity: .7;
    }

    .service-orbit::before,
    .service-orbit::after {
      content: "";
      position: absolute;
      border-radius: inherit;
    }

    .service-orbit::before {
      inset: 16%;
      border: 1px solid rgba(255,255,255,.1);
    }

    .service-orbit::after {
      top: -4px;
      left: 50%;
      width: 8px;
      aspect-ratio: 1;
      background: var(--accent);
      box-shadow: 0 0 24px rgba(249,65,55,.9);
    }

    .contact-mail {
      position: absolute;
      top: clamp(18px, 2.25vw, 42px);
      right: clamp(18px, 2.25vw, 42px);
      color: rgba(255,255,255,.33);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8px, .58vw, 11px);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .showcase {
      background:
        radial-gradient(circle at 73% 36%, rgba(249,65,55,.25), transparent 28%),
        linear-gradient(145deg, rgba(65,65,65,.2), rgba(13,13,13,.82));
    }

    .showcase-art {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .showcase-art::before {
      content: "";
      position: absolute;
      inset: 12% 16% 19%;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 48% 48% 44% 44%;
      background:
        radial-gradient(circle at 36% 29%, rgba(255,255,255,.23), transparent 5%),
        radial-gradient(circle at 50% 46%, #fa645b 0 2%, #ba2721 3% 17%, #37110f 18% 34%, #0b0b0b 35% 48%, transparent 49%),
        linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.01) 42%);
      box-shadow: inset -24px -32px 60px rgba(0,0,0,.62), 0 40px 70px rgba(0,0,0,.4);
      transform: rotate(-5deg);
    }

    .showcase-art::after {
      content: "";
      position: absolute;
      top: 17%;
      left: 29%;
      width: 44%;
      height: 65%;
      border: 1px solid rgba(249,65,55,.42);
      border-radius: 50%;
      transform: rotate(31deg);
      box-shadow: 0 0 50px rgba(249,65,55,.1);
    }

    .showcase .card-inner { justify-content: flex-end; }

    .showcase .card-kicker {
      position: absolute;
      top: clamp(18px, 2.25vw, 42px);
      left: clamp(18px, 2.25vw, 42px);
    }

    .rail {
      display: grid;
      grid-template-rows: .54fr .46fr;
      gap: var(--gap);
      min-width: 0;
      min-height: 0;
    }

    .tools {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: clamp(6px, .75vw, 14px);
      padding: clamp(14px, 1.45vw, 28px);
    }

    .tool-mark {
      position: relative;
      display: grid;
      aspect-ratio: 1;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.045);
      border-radius: clamp(12px, 1.1vw, 22px);
      background: rgba(255,255,255,.055);
    }

    .tool-mark span { display: block; }

    .mark-one span {
      width: 44%;
      aspect-ratio: 1;
      border-radius: 50% 50% 12% 50%;
      background: linear-gradient(135deg, #ff766e 0 48%, #5865ff 50%);
      transform: rotate(45deg);
    }

    .mark-two span {
      width: 48%;
      aspect-ratio: 1;
      border: 4px solid #6b75ff;
      border-width: 0 0 4px 4px;
      border-radius: 50%;
      transform: rotate(45deg);
    }

    .mark-three span {
      width: 48%;
      aspect-ratio: 1;
      border: clamp(4px, .4vw, 8px) solid #943cf2;
      border-radius: 50%;
      box-shadow: 0 0 18px rgba(148,60,242,.25);
    }

    .mark-four span {
      width: 54%;
      height: 2px;
      background: #f47755;
      box-shadow: 0 0 12px rgba(244,119,85,.35);
    }

    .mark-four span::before,
    .mark-four span::after {
      content: "";
      position: absolute;
      left: 23%;
      width: 54%;
      height: 2px;
      background: #f47755;
    }

    .mark-four span::before { transform: rotate(60deg); }
    .mark-four span::after { transform: rotate(-60deg); }

    .process-card .card-inner { padding: clamp(17px, 1.8vw, 34px); }

    .process-card .card-label { font-size: clamp(16px, 1.35vw, 26px); }

    .projects-count {
      align-self: flex-start;
      color: var(--accent);
      font-size: clamp(28px, 3.4vw, 66px);
      font-weight: 700;
      line-height: .88;
      letter-spacing: -.045em;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: clamp(12px, 3vw, 54px);
      background:
        radial-gradient(50rem 36rem at 78% 8%, rgba(249,65,55,.09), transparent 68%),
        rgba(0,0,0,.78);
      backdrop-filter: blur(18px) saturate(.82);
      -webkit-backdrop-filter: blur(18px) saturate(.82);
      opacity: 0;
      visibility: visible;
      pointer-events: none;
      transition: opacity .35s ease;
    }

    .modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .modal-panel {
      position: relative;
      width: min(1120px, 100%);
      max-height: calc(100svh - clamp(24px, 6vw, 108px));
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: clamp(24px, 3vw, 48px);
      background:
        radial-gradient(48rem 30rem at 100% 0%, rgba(249,65,55,.14), transparent 62%),
        radial-gradient(38rem 24rem at 0% 100%, rgba(255,255,255,.025), transparent 70%),
        #121212;
      box-shadow: 0 36px 120px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.035);
      opacity: .5;
      transform: translateY(28px) scale(.94);
      transform-origin: var(--modal-origin-x, 50%) var(--modal-origin-y, 50%);
      clip-path: inset(4% 3% round clamp(24px, 3vw, 48px));
      transition: transform .52s cubic-bezier(.08,.74,.56,1), opacity .3s ease, clip-path .52s cubic-bezier(.08,.74,.56,1);
    }

    .modal.is-open .modal-panel {
      opacity: 1;
      transform: translateY(0) scale(1);
      clip-path: inset(0 round clamp(24px, 3vw, 48px));
    }

    .modal[data-kind="services"] .modal-panel {
      height: min(820px, calc(100dvh - clamp(12px,4vw,48px)));
      background:
        radial-gradient(52rem 30rem at 78% 0%, rgba(249,65,55,.18), transparent 65%),
        linear-gradient(145deg, rgba(255,255,255,.018), transparent 45%),
        #121212;
    }

    .modal[data-kind="projects"] .modal-panel {
      background:
        radial-gradient(48rem 28rem at 100% 0%, rgba(105,83,255,.11), transparent 66%),
        radial-gradient(40rem 24rem at 0% 100%, rgba(249,65,55,.07), transparent 72%),
        #121212;
    }

    .modal[data-kind="contact"] .modal-panel {
      background:
        radial-gradient(44rem 26rem at 85% 12%, rgba(249,65,55,.16), transparent 68%),
        #121212;
    }

    .modal-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: clamp(18px, 2vw, 32px) clamp(20px, 3vw, 48px);
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
    }

    .modal-head::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: clamp(20px, 3vw, 48px);
      width: clamp(44px, 4.5vw, 72px);
      height: 1px;
      background: var(--accent);
    }

    .modal-identity {
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.4vw, 22px);
    }

    .modal-identity img {
      display: block;
      width: clamp(62px, 6.2vw, 92px);
      height: auto;
      padding-right: clamp(12px, 1.4vw, 22px);
      border-right: 1px solid rgba(255,255,255,.1);
      filter: brightness(0) invert(1);
      opacity: .88;
    }

    .modal-eyebrow {
      color: rgba(255,255,255,.48);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .modal-close {
      display: grid;
      width: 42px;
      aspect-ratio: 1;
      place-items: center;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
      background: rgba(255,255,255,.04);
      cursor: pointer;
      color: rgba(255,255,255,.82);
      transition: border-color .2s ease, background .2s ease, transform .3s ease;
    }

    .modal-close:hover { border-color: var(--accent); background: var(--accent); transform: scale(1.04); }

    .modal-body {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
      gap: clamp(26px, 5vw, 80px);
      padding: clamp(26px, 3.6vw, 58px) clamp(20px, 4.2vw, 68px) clamp(28px, 4vw, 64px);
    }

    .modal-title {
      max-width: 720px;
      margin: 0;
      font-size: clamp(34px, 5.3vw, 84px);
      font-weight: 650;
      line-height: .93;
      letter-spacing: -.062em;
    }

    .modal-title em { color: var(--accent); font-style: normal; }

    .modal-description {
      align-self: end;
      margin: 0;
      color: rgba(255,255,255,.66);
      font-size: clamp(14px, 1.25vw, 20px);
      font-weight: 500;
      line-height: 1.45;
    }

    .modal-list {
      display: grid;
      align-content: end;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .modal-list li,
    .modal-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: clamp(44px, 4.4vw, 68px);
      border-bottom: 1px solid rgba(255,255,255,.1);
      color: var(--ink);
      font-size: clamp(13px, 1.05vw, 18px);
      font-weight: 620;
      text-decoration: none;
    }

    .modal-list li:first-child,
    .modal-list a:first-child { border-top: 1px solid rgba(255,255,255,.1); }

    .modal-list span { color: rgba(255,255,255,.35); font-size: .75em; }

    .modal-list a:hover { color: var(--accent); }

    @keyframes fade-down {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes logo-rise {
      from { opacity: 0; transform: translate(-50%, 34px); filter: blur(10px); }
      to { opacity: .98; transform: translate(-50%, 0); filter: blur(0); }
    }

    @keyframes card-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse {
      0%, 100% { background: var(--ink); box-shadow: 0 0 0 0 rgba(249,65,55,0); }
      50% { background: var(--accent); box-shadow: 0 0 0 7px rgba(249,65,55,0); }
    }

    /* Editorial details and live previews */
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, transparent 82%, rgba(255,255,255,.012));
      pointer-events: none;
    }

    button.card::after {
      z-index: 1;
      background: radial-gradient(34rem 25rem at 82% 0%, rgba(255,255,255,.052), transparent 62%);
    }

    .card-topline {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
    }

    .about-inside {
      position: absolute;
      inset: 18% 10% 18% 14%;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .78;
      transition: transform .55s cubic-bezier(.08,.74,.56,1), opacity .35s ease;
    }

    .about-letter {
      color: rgba(255,255,255,.025);
      font-size: clamp(105px, 12vw, 230px);
      font-weight: 780;
      line-height: .7;
      letter-spacing: -.12em;
      -webkit-text-stroke: 1px rgba(255,255,255,.13);
    }

    .about-caption {
      margin-left: -8%;
      color: rgba(255,255,255,.58);
      font-size: clamp(9px, .7vw, 13px);
      font-weight: 540;
      line-height: 1.38;
      letter-spacing: -.02em;
    }

    .about-inside img {
      position: absolute;
      left: -15%;
      width: 132%;
      max-width: none;
      height: auto;
      opacity: .075;
      filter: brightness(0) invert(1);
      transform: rotate(-8deg);
      transition: opacity .45s ease, transform .7s cubic-bezier(.08,.74,.56,1);
    }

    .about-caption {
      position: relative;
      z-index: 2;
      margin-left: 38%;
    }

    .about:hover .about-inside { opacity: inherit; }
    .about:hover .about-inside img { opacity: .075; }

    .services-visual {
      position: absolute;
      top: 49%;
      right: 5%;
      z-index: 0;
      display: grid;
      transform: translateY(-50%) rotate(-3deg);
      opacity: .66;
      transition: transform .7s cubic-bezier(.08,.74,.56,1), opacity .35s ease;
      pointer-events: none;
    }

    .services-visual span {
      color: rgba(255,255,255,.018);
      font-size: clamp(30px, 4.15vw, 82px);
      font-weight: 780;
      line-height: .72;
      letter-spacing: -.075em;
      -webkit-text-stroke: 1px rgba(255,255,255,.13);
      transition: color .5s ease, transform .6s cubic-bezier(.08,.74,.56,1), -webkit-text-stroke .5s ease;
    }

    .services-visual span:nth-child(2) { margin-left: -12%; }
    .services-visual span:nth-child(3) { margin-left: -28%; }
    .services-visual span.is-active {
      color: rgba(255,255,255,.82);
      -webkit-text-stroke: 0 transparent;
      transform: translateX(-10px);
    }
    .services:hover .services-visual { opacity: .66; }

    .services-copy,
    .contact-copy {
      position: relative;
      z-index: 4;
      font-size: clamp(10px, .88vw, 17px);
      line-height: 1.28;
    }

    .contact-signal {
      position: absolute;
      top: 50%;
      left: 57%;
      z-index: 2;
      width: clamp(88px, 8vw, 145px);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .contact-mail {
      top: 50%;
      right: clamp(18px, 1.7vw, 32px);
      writing-mode: vertical-rl;
      transform: translateY(-50%) rotate(180deg);
      display: none;
    }

    .contact-signal i {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(249,65,55,.12);
      border-radius: 50%;
      animation: signal 4.6s ease-out infinite;
    }

    .contact-signal i:nth-child(2) { animation-delay: -1.5s; }
    .contact-signal i:nth-child(3) { animation-delay: -3s; }

    .contact-signal::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 7px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 26px rgba(249,65,55,.8);
      transform: translate(-50%, -50%);
    }

    @keyframes signal {
      0% { opacity: 0; transform: scale(.2); }
      22% { opacity: .9; }
      100% { opacity: 0; transform: scale(1); }
    }

    .project-window {
      position: absolute;
      top: 12%;
      right: 6%;
      bottom: 13%;
      left: 48%;
      z-index: 2;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: clamp(10px, 1.1vw, 18px);
      background: #0b0d0d;
      box-shadow: none;
      transform: none;
      transition: none;
    }

    .project-window-bar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 4px;
      height: clamp(18px, 1.8vw, 28px);
      padding-inline: 8px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(16,16,16,.9);
    }

    .project-window-bar i {
      width: 3px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.24);
    }

    .project-window-bar i:first-child { background: var(--accent); }

    .project-window-bar b {
      margin-left: auto;
      color: rgba(255,255,255,.26);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8px, .55vw, 11px);
      font-weight: 680;
      letter-spacing: .08em;
    }

    .project-window-screen {
      position: absolute;
      inset: clamp(18px, 1.8vw, 28px) 0 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: linear-gradient(145deg, #151515, #1b1110);
    }

    .project-window-screen::after { content: none; }

    .project-window-screen strong {
      position: relative;
      z-index: 2;
      color: #f2e9dd;
      font-size: clamp(36px, 5.3vw, 94px);
      font-weight: 740;
      line-height: .8;
      letter-spacing: -.09em;
      text-shadow: 0 16px 40px rgba(0,0,0,.45);
      transition: opacity .2s ease, transform .28s cubic-bezier(.08,.74,.56,1);
    }

    .project-window-screen small {
      position: absolute;
      right: 10px;
      bottom: 8px;
      z-index: 3;
      color: rgba(255,255,255,.5);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(5px, .4vw, 8px);
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: opacity .2s ease;
    }

    .project-window::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      height: 2px;
      background: var(--accent);
      transform-origin: left;
      animation: case-progress 4.6s linear infinite;
    }

    .project-window.is-changing .project-window-screen strong,
    .project-window.is-changing .project-window-screen small { opacity: 0; }

    .project-window.is-changing .project-window-screen strong { transform: translateY(12px); }

    @keyframes case-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .showcase:hover .project-window { box-shadow: none; }

    .showcase .card-inner { justify-content: space-between; }

    .showcase .card-title-row {
      width: 38%;
      min-width: 180px;
    }

    .project-copy {
      position: relative;
      z-index: 4;
      width: 38%;
      max-width: 300px;
      color: rgba(255,255,255,.54);
      font-size: clamp(9px, .72vw, 13px);
      font-weight: 520;
      line-height: 1.38;
      letter-spacing: -.015em;
      transition: opacity .2s ease, transform .28s cubic-bezier(.08,.74,.56,1);
    }

    .project-copy::before {
      content: none;
      display: block;
      margin-bottom: clamp(5px, .55vw, 9px);
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8px, .48vw, 9px);
      font-weight: 700;
      letter-spacing: .12em;
    }

    .project-copy.is-changing { opacity: 0; transform: translateY(6px); }

    .showcase .card-kicker {
      position: static;
      top: auto;
      left: auto;
    }

    .tools {
      position: relative;
      gap: 0;
      padding: clamp(24px, 2vw, 36px) clamp(9px, 1vw, 18px) clamp(8px, .85vw, 16px);
    }

    .tools-caption {
      position: absolute;
      top: 10px;
      left: clamp(14px, 1.45vw, 28px);
      color: rgba(255,255,255,.34);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(9px, .48vw, 10px);
      letter-spacing: .1em;
    }

    .tool-mark { overflow: visible; transition: transform .35s cubic-bezier(.08,.74,.56,1), background .25s ease; }
    .tool-mark:hover { z-index: 4; background: rgba(255,255,255,.1); transform: translateY(-4px); }

    .tool-mark::after {
      content: attr(data-label);
      position: absolute;
      bottom: -17px;
      left: 50%;
      color: rgba(255,255,255,.45);
      font-size: 7px;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      transform: translate(-50%, 4px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .tool-mark:hover::after { opacity: 1; transform: translate(-50%, 0); }

    .social-link {
      position: relative;
      z-index: 2;
      display: flex;
      height: 100%;
      min-width: 0;
      flex-direction: column;
      justify-content: center;
      border-left: 1px solid rgba(255,255,255,.07);
      padding: 0 clamp(5px, .55vw, 10px) 0 clamp(8px, .8vw, 14px);
      color: inherit;
      text-align: left;
      text-decoration: none;
      transition: background .3s ease, border-color .3s ease;
    }

    .tools-caption + .social-link { border-left-color: transparent; }

    .social-icon {
      display: grid;
      width: clamp(22px, 1.75vw, 29px);
      aspect-ratio: 1;
      place-items: center;
      margin-bottom: clamp(4px, .4vw, 7px);
      color: rgba(255,255,255,.78);
      transition: color .25s ease, transform .35s cubic-bezier(.08,.74,.56,1);
    }

    .social-icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .social-link small {
      margin-top: 1px;
      overflow: hidden;
      color: rgba(255,255,255,.62);
      font-size: clamp(9px, .55vw, 10px);
      font-weight: 600;
      letter-spacing: -.01em;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: color .25s ease, transform .35s cubic-bezier(.08,.74,.56,1);
    }

    .social-link::after {
      content: "↗";
      position: absolute;
      top: 50%;
      right: clamp(4px, .45vw, 8px);
      color: var(--accent);
      font-size: clamp(8px, .7vw, 12px);
      opacity: 0;
      transform: translate(-3px, -35%);
      transition: opacity .25s ease, transform .35s cubic-bezier(.08,.74,.56,1);
    }

    .social-link:hover,
    .social-link:focus-visible { border-left-color: rgba(249,65,55,.34); }

    .social-link:hover small,
    .social-link:focus-visible small { color: white; }

    .social-link:hover .social-icon,
    .social-link:focus-visible .social-icon { color: var(--accent); }

    .social-link:hover::after,
    .social-link:focus-visible::after { opacity: 1; }

    .social-link:focus-visible { outline: 1px solid rgba(249,65,55,.45); outline-offset: -1px; }
    .social-link.is-disabled { cursor: default; opacity: .62; }
    .social-link.is-disabled::after { display: none; }
    .social-link.is-disabled:hover { border-left-color: rgba(255,255,255,.07); }
    .social-link.is-disabled:hover .social-icon { color: rgba(255,255,255,.78); }
    .social-link.is-disabled:hover small { color: rgba(255,255,255,.62); }

    .projects-count { position: relative; z-index: 3; }
    .projects-count span { margin-left: 5px; color: rgba(255,255,255,.28); font-size: .22em; letter-spacing: .02em; }

    .process-visual {
      position: absolute;
      top: clamp(20px, 2vw, 36px);
      right: clamp(18px, 1.8vw, 34px);
      z-index: 2;
      display: flex;
      align-items: center;
      width: 45%;
    }

    .process-visual::before {
      content: "";
      position: absolute;
      right: 0;
      left: 0;
      height: 1px;
      background: rgba(255,255,255,.13);
    }

    .process-visual i {
      position: relative;
      z-index: 1;
      width: 4px;
      aspect-ratio: 1;
      margin-right: auto;
      border-radius: 50%;
      background: #575757;
    }

    .process-visual i:first-child,
    .process-visual i:last-child { background: #575757; box-shadow: none; }
    .process-visual i:last-child { margin-right: 0; }

    .process-visual::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 3;
      width: 5px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px rgba(249,65,55,.8);
      animation: process-run 4.6s cubic-bezier(.44,0,.13,.96) infinite;
    }

    @keyframes process-run {
      0%, 8% { left: 0; }
      92%, 100% { left: calc(100% - 5px); }
    }

    /* Distinct modal compositions */
    .modal-body {
      max-height: calc(100svh - clamp(88px, 12vw, 190px));
      overflow-y: auto;
      scrollbar-width: none;
    }

    .modal-body::-webkit-scrollbar { display: none; }

    .modal-body--about,
    .modal-body--services,
    .modal-body--contact,
    .modal-body--projects,
    .modal-body--process {
      grid-template-columns: 1fr;
      gap: clamp(24px, 3vw, 46px);
    }

    .modal-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
      align-items: end;
      gap: clamp(28px, 5vw, 80px);
    }

    .modal-intro .modal-title { font-size: clamp(38px, 4.65vw, 74px); }
    .modal-intro .modal-description { align-self: end; padding-bottom: .18em; }

    .modal-body--services {
      gap: clamp(12px, 1.35vw, 20px);
      padding-top: clamp(24px, 2.7vw, 42px);
      padding-bottom: clamp(24px, 2.7vw, 42px);
    }

    .modal-intro--services { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); }

    .service-promise {
      display: grid;
      align-content: end;
      gap: clamp(12px, 1.4vw, 20px);
    }

    .service-promise .modal-description { max-width: 460px; }

    .modal-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }

    .modal-trust span {
      padding: 2px 12px;
      border-left: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.58);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6px, .48vw, 8px);
      font-weight: 650;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .modal-trust span:first-child { padding-left: 0; border-left: 0; }

    .service-value-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      overflow: hidden;
      border-block: 1px solid rgba(255,255,255,.13);
      background: transparent;
    }

    .service-value-strip span {
      min-width: 0;
      padding: clamp(10px, 1vw, 15px) clamp(11px, 1.2vw, 18px);
      border-left: 1px solid rgba(255,255,255,.08);
    }

    .service-value-strip span:first-child { border-left: 0; }

    .service-value-strip small {
      display: block;
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6px, .45vw, 8px);
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .service-value-strip strong {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,.78);
      font-size: clamp(10px, .82vw, 13px);
      font-weight: 580;
      line-height: 1.2;
    }

    .manifesto-grid,
    .service-deck,
    .project-deck,
    .contact-deck,
    .process-deck { display: grid; gap: 10px; }

    .manifesto-grid {
      grid-template-columns: 1.12fr .88fr 1fr;
      gap: 0;
      border-block: 1px solid rgba(255,255,255,.12);
    }

    .manifesto-grid article {
      min-height: clamp(126px, 12vw, 190px);
      padding: clamp(16px, 1.6vw, 26px);
      border-left: 1px solid rgba(255,255,255,.1);
      background: transparent;
    }

    .manifesto-grid article:first-child { padding-left: 0; border-left: 0; }
    .manifesto-grid article:last-child { padding-right: 0; }

    .manifesto-grid article span,
    .service-deck article > span,
    .process-deck article > span,
    .project-deck article > span,
    .contact-deck > * > span {
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .manifesto-grid article strong {
      display: block;
      margin-top: clamp(22px, 3vw, 48px);
      font-size: clamp(16px, 1.35vw, 22px);
      letter-spacing: -.035em;
    }

    .manifesto-grid article p,
    .service-deck article p,
    .process-deck article p {
      margin: 7px 0 0;
      color: rgba(255,255,255,.45);
      font-size: clamp(11px, .82vw, 14px);
      line-height: 1.25;
    }

    .service-deck {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid rgba(255,255,255,.12);
    }

    .service-deck article {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: center;
      min-height: clamp(78px, 7vw, 108px);
      padding: 14px clamp(15px, 1.5vw, 24px);
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: transparent;
    }

    .service-deck article:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
    .service-deck article:nth-child(odd) { padding-left: 0; }
    .service-deck article:nth-child(even) { padding-right: 0; }
    .service-deck article strong { font-size: clamp(14px, 1.1vw, 18px); letter-spacing: -.025em; }
    .service-deck article b { color: rgba(255,255,255,.32); font-size: 20px; font-weight: 400; }

    .service-deck--selling article {
      min-height: clamp(68px, 5.7vw, 88px);
      grid-template-columns: 32px 1fr auto;
      padding-block: 10px;
      background: transparent;
    }

    .service-deck--selling article > span { align-self: start; padding-top: 3px; }
    .service-deck--selling article b {
      align-self: start;
      padding: 4px 0 4px 12px;
      border-left: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.42);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .service-deck--selling article p { margin-top: 4px; }

    .service-deck--selling article small {
      display: block;
      margin-top: 5px;
      color: rgba(255,255,255,.3);
      font-size: clamp(7px, .58vw, 10px);
      line-height: 1.2;
    }

    .modal-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      min-height: clamp(64px, 5.5vw, 82px);
      padding: 12px 0;
      border-block: 1px solid rgba(249,65,55,.38);
      background: transparent;
    }

    .modal-cta > span { min-width: 0; }

    .modal-cta small {
      display: block;
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6px, .45vw, 8px);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .modal-cta strong {
      display: block;
      margin-top: 4px;
      font-size: clamp(11px, .92vw, 15px);
      font-weight: 580;
      line-height: 1.25;
    }

    .modal-cta a {
      display: inline-flex;
      min-height: 42px;
      flex: none;
      align-items: center;
      gap: 18px;
      padding: 0 clamp(15px, 1.5vw, 24px);
      border-radius: 3px;
      background: var(--accent);
      color: white;
      font-size: clamp(10px, .82vw, 14px);
      font-weight: 700;
      text-decoration: none;
      transition: background .25s ease, transform .3s cubic-bezier(.08,.74,.56,1);
    }

    .modal-cta a:hover { background: #ff5148; transform: translateY(-2px); }
    .modal-cta a b { font-size: 15px; font-weight: 400; }

    .modal-detail-bar {
      display: grid;
      grid-template-columns: auto minmax(220px, .9fr) minmax(260px, 1.1fr);
      align-items: center;
      gap: clamp(14px, 2vw, 32px);
      min-height: clamp(60px, 5.6vw, 82px);
      padding: 12px 0;
      border-block: 1px solid rgba(255,255,255,.12);
      background: transparent;
    }

    .modal-detail-bar > span {
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6px, .46vw, 8px);
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .modal-detail-bar strong {
      font-size: clamp(11px, .92vw, 15px);
      font-weight: 620;
      line-height: 1.25;
    }

    .modal-detail-bar p {
      margin: 0;
      color: rgba(255,255,255,.43);
      font-size: clamp(9px, .7vw, 12px);
      line-height: 1.35;
    }

    .process-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      overflow: hidden;
      border-block: 1px solid rgba(255,255,255,.12);
      background: transparent;
    }

    .process-summary > span {
      padding: 12px clamp(12px, 1.25vw, 20px);
      border-right: 1px solid rgba(255,255,255,.08);
    }

    .process-summary small {
      display: block;
      color: rgba(255,255,255,.35);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(5px, .4vw, 7px);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-summary strong {
      display: block;
      margin-top: 4px;
      font-size: clamp(10px, .82vw, 13px);
      font-weight: 620;
    }

    .process-summary a {
      display: inline-flex;
      min-width: clamp(150px, 13vw, 200px);
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 clamp(15px, 1.5vw, 24px);
      background: var(--accent);
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
      color: white;
      font-size: clamp(9px, .72vw, 12px);
      font-weight: 700;
      text-decoration: none;
      transition: background .25s ease;
    }

    .process-summary a:hover { background: #ff5148; }

    .project-deck {
      grid-template-columns: 1.22fr .82fr .96fr;
      align-items: end;
      gap: clamp(10px, 1.2vw, 18px);
    }

    .project-deck article {
      position: relative;
      height: clamp(145px, 15vw, 230px);
      overflow: hidden;
      border: 0;
      border-radius: 2px;
      background: #0b0b0b;
    }

    .project-deck article:nth-child(2) { height: clamp(124px, 12.8vw, 198px); }
    .project-deck article:nth-child(3) { height: clamp(136px, 14vw, 216px); }

    .project-deck article::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.05) 70%);
    }

    .project-deck img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .9;
      transition: transform .65s cubic-bezier(.08,.74,.56,1);
    }

    .project-deck article:hover img { transform: scale(1.055); }
    .project-deck article > span { position: absolute; right: 16px; top: 14px; z-index: 2; color: rgba(255,255,255,.5); }
    .project-deck article strong { position: absolute; bottom: 18px; left: 18px; z-index: 2; font-size: clamp(18px, 1.7vw, 28px); letter-spacing: -.045em; }
    .project-deck article b { position: absolute; right: 18px; bottom: 18px; z-index: 2; color: var(--accent); font-size: 20px; font-weight: 400; }
    .project-deck article small {
      position: absolute;
      bottom: 51px;
      left: 18px;
      z-index: 2;
      color: rgba(255,255,255,.48);
      font-size: clamp(7px, .58vw, 10px);
      font-weight: 580;
      letter-spacing: .02em;
    }

    .contact-deck {
      grid-template-columns: 1.1fr 1fr .9fr;
      gap: 0;
      border-block: 1px solid rgba(255,255,255,.12);
    }

    .contact-deck > * {
      position: relative;
      display: flex;
      min-height: clamp(120px, 12vw, 178px);
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(17px, 1.7vw, 28px);
      border-left: 1px solid rgba(255,255,255,.1);
      background: transparent;
      color: var(--ink);
      text-decoration: none;
      transition: color .2s ease;
    }

    .contact-deck > *:first-child { padding-left: 0; border-left: 0; }
    .contact-deck > *:last-child { padding-right: 0; }
    .contact-deck a:hover strong { color: var(--accent); }
    .contact-deck strong { font-size: clamp(14px, 1.2vw, 19px); letter-spacing: -.03em; }
    .contact-deck b { align-self: flex-end; color: var(--accent); font-size: 24px; font-weight: 400; }
    .contact-deck small { color: rgba(255,255,255,.36); font-size: 10px; }
    .contact-deck strong i { display: inline-block; width: 7px; aspect-ratio: 1; margin-right: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(249,65,55,.7); }

    .process-deck { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }

    .process-deck::before {
      content: "";
      position: absolute;
      top: 26px;
      right: 7%;
      left: 7%;
      height: 1px;
      background: rgba(255,255,255,.12);
    }

    .process-deck article {
      position: relative;
      min-height: clamp(120px, 12vw, 170px);
      padding: 0 clamp(10px, 1.1vw, 18px);
      text-align: center;
    }

    .process-deck article > span {
      position: relative;
      z-index: 2;
      display: grid;
      width: 52px;
      aspect-ratio: 1;
      margin: 0 auto clamp(18px, 2vw, 30px);
      place-items: center;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      background: #151515;
    }

    .process-deck article:last-child > span { color: white; border-color: var(--accent); background: var(--accent); }
    .process-deck article strong { font-size: clamp(13px, 1vw, 17px); letter-spacing: -.02em; }

    /* Role-driven modal scenes */
    .modal {
      background: rgba(0,0,0,.84);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }

    .modal-panel,
    .modal[data-kind="services"] .modal-panel,
    .modal[data-kind="projects"] .modal-panel,
    .modal[data-kind="contact"] .modal-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(1160px, 100%);
      height: min(660px, calc(100dvh - clamp(24px, 6vw, 108px)));
      border-radius: clamp(22px, 2vw, 30px);
      background: #111;
      box-shadow: 0 32px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.025);
      clip-path: none;
      opacity: 0;
      transform: translateY(10px) scale(.985);
      transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
    }

    .modal[data-kind="services"] .modal-panel {
      height: min(720px, calc(100dvh - clamp(24px, 5vw, 80px)));
    }

    .modal.is-open .modal-panel {
      clip-path: none;
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .modal-head {
      min-height: 64px;
      padding: 14px clamp(22px, 2.4vw, 38px);
      background: transparent;
    }

    .modal-head::after { display: none; }

    .modal-identity { gap: 0; }

    .modal-identity img {
      width: clamp(62px, 5.8vw, 82px);
      padding-right: 0;
      border-right: 0;
      opacity: .82;
    }

    .modal-eyebrow {
      color: rgba(255,255,255,.62);
      font-size: 10px;
      letter-spacing: .12em;
    }

    .modal-close {
      width: 34px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;
      background: transparent;
      color: rgba(255,255,255,.66);
      font-size: 22px;
      transition: color .2s ease;
    }

    .modal-close:hover { color: var(--accent); background: transparent; transform: none; }
    .modal-close:focus-visible { outline: none; border-color: var(--accent); }

    #modal-content { min-height: 0; overflow: hidden; }

    .modal-body,
    .modal-body--about,
    .modal-body--services,
    .modal-body--contact,
    .modal-body--projects,
    .modal-body--process {
      min-height: 0;
      height: 100%;
      max-height: none;
      overflow: hidden;
      padding: clamp(24px, 3.1vw, 46px) clamp(28px, 4vw, 64px) clamp(26px, 3.3vw, 50px);
    }

    .modal-title {
      max-width: none;
      font-size: clamp(42px, 4.5vw, 66px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.035em;
    }

    .modal-title .title-line { display: block; }
    .mobile-break { display: none; }

    .modal-description {
      color: rgba(255,255,255,.68);
      font-size: clamp(13px, 1.05vw, 17px);
      line-height: 1.42;
    }

    .scene-label {
      display: block;
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .about-scene-head,
    .services-scene-head,
    .contact-scene-head,
    .projects-scene-head,
    .process-scene-head {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
      align-items: end;
      gap: 10px clamp(32px, 5vw, 76px);
    }

    .about-scene-head .scene-label,
    .services-scene-head .scene-label,
    .contact-scene-head .scene-label,
    .projects-scene-head .scene-label,
    .process-scene-head .scene-label { grid-column: 1 / -1; }

    .modal-body--about { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(26px, 3vw, 42px); }

    .about-editorial {
      display: grid;
      grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
      border-block: 1px solid rgba(255,255,255,.13);
    }

    .about-editorial blockquote {
      display: flex;
      min-width: 0;
      min-height: clamp(190px, 18vw, 250px);
      flex-direction: column;
      justify-content: space-between;
      margin: 0;
      padding: clamp(22px, 2.4vw, 36px) clamp(24px, 3vw, 48px) clamp(22px, 2.4vw, 36px) 0;
      border-right: 1px solid rgba(255,255,255,.11);
    }

    .about-editorial blockquote p {
      max-width: 520px;
      margin: 0;
      font-size: clamp(19px, 1.7vw, 27px);
      font-weight: 620;
      line-height: 1.16;
      letter-spacing: -.035em;
    }

    .about-editorial blockquote footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: rgba(255,255,255,.48);
      font-size: 11px;
    }

    .about-editorial blockquote footer button {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 12px;
      font-weight: 650;
    }

    .about-editorial blockquote footer button:hover { color: var(--accent); }

    .about-commitments { margin: 0; padding-left: clamp(24px, 3vw, 48px); }

    .about-commitments div {
      display: grid;
      grid-template-columns: minmax(118px, .55fr) minmax(0, 1.45fr);
      align-items: center;
      min-height: 33.333%;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .about-commitments div:last-child { border-bottom: 0; }
    .about-commitments dt { color: var(--ink); font-size: 13px; font-weight: 650; }
    .about-commitments dd { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.35; }

    .about-legal-footer {
      display: flex;
      justify-content: flex-end;
      padding-top: clamp(14px, 1.5vw, 22px);
    }

    .about-legal-footer a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-bottom: 1px solid rgba(255,255,255,.28);
      color: rgba(255,255,255,.7);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      text-decoration: none;
      transition: border-color .2s ease, color .2s ease;
    }

    .about-legal-footer a:hover,
    .about-legal-footer a:focus-visible {
      border-color: var(--accent);
      color: var(--ink);
      outline: none;
    }

    .modal-body--services { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(18px, 2vw, 28px); }

    .service-menu { border-top: 1px solid rgba(255,255,255,.14); }

    .service-menu article {
      position: relative;
      display: grid;
      grid-template-columns: minmax(190px, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(18px, 2.4vw, 38px);
      min-height: clamp(66px, 6.5vw, 88px);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .service-menu article.is-primary::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 0;
      width: 22px;
      height: 2px;
      background: var(--accent);
      box-shadow: 0 5px 0 var(--accent), 0 10px 0 var(--accent);
    }

    .service-menu h3 { margin: 0; font-size: clamp(16px, 1.35vw, 21px); letter-spacing: -.035em; }

    .service-menu p {
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: clamp(11px, .86vw, 14px);
      line-height: 1.35;
    }

    .service-menu p span {
      display: block;
      margin-bottom: 3px;
      color: rgba(255,255,255,.36);
      font-size: 10px;
      font-weight: 650;
    }

    .services-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .services-footer p { margin: 0; color: rgba(255,255,255,.56); font-size: 13px; }
    .services-footer p strong { color: var(--ink); }

    .services-footer a,
    .services-footer button,
    .contact-primary,
    .process-assurance a,
    .process-assurance button {
      display: inline-flex;
      min-height: 46px;
      flex: none;
      align-items: center;
      justify-content: center;
      padding: 0 clamp(18px, 2vw, 28px);
      border: 0;
      border-radius: 2px;
      background: var(--accent);
      color: white;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease;
    }

    .services-footer a:hover,
    .services-footer button:hover,
    .contact-primary:hover,
    .process-assurance a:hover,
    .process-assurance button:hover { background: #ff5148; }

    .contact-change {
      margin-left: .5em;
      padding: 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.34);
      background: transparent;
      color: rgba(255,255,255,.72);
      cursor: pointer;
      font: inherit;
      font-weight: 650;
    }

    .contact-change:hover,
    .contact-change:focus-visible { color: white; border-bottom-color: var(--accent); }

    .contact-policy {
      margin-left: .35em;
      color: inherit;
      font-size: .78em;
      font-weight: 620;
      text-decoration-color: rgba(249,65,55,.7);
      text-underline-offset: 3px;
      white-space: nowrap;
    }

    .contact-policy:hover { color: var(--ink); }

    .modal-body--contact { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(20px, 2.5vw, 36px); }

    .contact-email-action {
      display: flex;
      min-height: clamp(96px, 10vw, 142px);
      align-items: center;
      border-block: 1px solid rgba(255,255,255,.14);
      color: var(--ink);
      font-size: clamp(38px, 5.1vw, 74px);
      font-weight: 700;
      line-height: .96;
      letter-spacing: -.035em;
      text-decoration: none;
      transition: color .2s ease;
    }

    .contact-email-action:hover { color: var(--accent); }

    .contact-actions {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: stretch;
      gap: clamp(24px, 3.5vw, 54px);
    }

    .contact-primary { min-width: clamp(210px, 20vw, 290px); }

    .contact-brief {
      display: grid;
      grid-template-columns: 1fr repeat(3, minmax(120px, .7fr));
      align-items: center;
      border-block: 1px solid rgba(255,255,255,.11);
    }

    .contact-brief span {
      color: rgba(255,255,255,.4);
      font-size: 10px;
      font-weight: 650;
      text-transform: uppercase;
    }

    .contact-brief p {
      margin: 0;
      padding-left: clamp(14px, 1.5vw, 22px);
      border-left: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.72);
      font-size: 12px;
    }

    .modal-body--projects { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(20px, 2.3vw, 34px); }
    .projects-scene-head { grid-template-columns: 1fr; }
    .projects-scene-head .modal-title { max-width: 900px; }

    .projects-editorial {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr);
      gap: clamp(18px, 2vw, 30px);
      min-height: clamp(250px, 25vw, 330px);
    }

    .project-feature {
      position: relative;
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      overflow: hidden;
      background: #090909;
    }

    .project-feature::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.28) 65%, transparent);
    }

    .project-feature-mark {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      overflow: hidden;
      padding: clamp(18px, 2vw, 30px);
    }

    .project-feature-mark strong {
      color: rgba(255,255,255,.08);
      font-size: clamp(120px, 15vw, 220px);
      font-weight: 760;
      line-height: .68;
      letter-spacing: -.09em;
    }

    .project-feature-mark span {
      position: absolute;
      top: clamp(18px, 2vw, 30px);
      right: clamp(18px, 2vw, 30px);
      color: rgba(255,255,255,.34);
      font-size: 10px;
      letter-spacing: .08em;
    }

    .project-feature-copy {
      position: absolute;
      inset: auto auto clamp(20px, 2vw, 32px) clamp(20px, 2.4vw, 38px);
      z-index: 2;
      width: min(500px, 68%);
    }

    .project-feature-copy > span,
    .project-index span {
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .project-feature-copy h3 { margin: 8px 0 16px; font-size: clamp(30px, 3vw, 46px); letter-spacing: -.035em; }
    .project-feature-copy p { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; }
    .project-feature-copy p b { color: white; }

    .project-index { display: grid; grid-column: 2; grid-row: 1; grid-template-rows: repeat(2, minmax(0, 1fr)); border-block: 1px solid rgba(255,255,255,.13); }
    .project-index article { display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.11); }
    .project-index article:last-child { border-bottom: 0; }
    .project-index h3 { margin: 8px 0 10px; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.04em; }
    .project-index p { max-width: 300px; margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.35; }

    .modal-body--process { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(22px, 2.7vw, 38px); }

    .process-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
      gap: clamp(30px, 4vw, 64px);
      min-height: 0;
    }

    .process-route { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); list-style: none; }

    .process-route li {
      display: grid;
      grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
      align-items: center;
      min-height: clamp(46px, 4.5vw, 62px);
      border-bottom: 1px solid rgba(255,255,255,.11);
    }

    .process-route span { font-size: 14px; font-weight: 650; }
    .process-route strong { color: rgba(255,255,255,.57); font-size: 12px; font-weight: 540; }

    .process-assurance {
      display: flex;
      min-height: 0;
      flex-direction: column;
      justify-content: space-between;
      padding-left: clamp(24px, 3vw, 44px);
      border-left: 1px solid rgba(255,255,255,.12);
    }

    .process-assurance > span { color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; }
    .process-assurance p { margin: 10px 0 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.4; }
    .process-assurance a,
    .process-assurance button { align-self: flex-start; margin-top: auto; }

    .project-window::after { animation: none; transform: scaleX(1); }
    .process-visual::after { animation: none; left: 0; }
    .contact-signal i { animation: none; opacity: .32; }

    /* Main-screen art direction: quieter, brand-led, less template-like */
    .topbar,
    .hero-logo,
    .about,
    .services,
    .showcase,
    .contact,
    .rail { animation: none; }

    .hero-index { display: none; }

    .card-kicker { color: rgba(255,255,255,.42); }

    .about-inside {
      inset: 31% 11% 28%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    .about-inside img {
      position: relative;
      left: 0;
      width: 100%;
      opacity: .09;
      transform: none;
    }

    .about-caption {
      align-self: flex-end;
      margin: 0;
      color: rgba(255,255,255,.44);
      font-size: clamp(9px, .58vw, 11px);
      line-height: 1.3;
      text-align: right;
    }

    .about:hover .about-inside img { opacity: .09; }

    .services-visual {
      top: 50%;
      right: clamp(20px, 2.8vw, 46px);
      display: grid;
      width: min(43%, 430px);
      gap: 5px;
      transform: translateY(-50%);
      opacity: .92;
      transition: none;
    }

    .services-visual::before { content: none; }

    .services-visual-caption,
    .services-visual-output {
      margin: 0;
      padding: 0;
      border: 0;
      color: rgba(255,255,255,.38);
      font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
      -webkit-text-stroke: 0 transparent;
      transform: none;
    }

    .services-visual-output {
      justify-self: end;
      color: rgba(255,255,255,.56);
      transition: color .2s ease;
    }

    .services:hover .services-visual { opacity: .92; }

    .services-flow {
      display: block;
      width: 100%;
      overflow: visible;
    }

    .service-flow-path {
      fill: none;
      stroke: rgba(255,255,255,.22);
      stroke-width: 1;
      stroke-dasharray: 3 7;
      vector-effect: non-scaling-stroke;
      animation: service-route 7s linear infinite;
      transition: stroke .2s ease;
    }

    .service-flow-path--two { stroke: rgba(249,65,55,.58); }
    .service-flow-path--three { animation-direction: reverse; }

    .service-flow-node circle {
      fill: #151515;
      stroke: rgba(255,255,255,.42);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      transition: fill .2s ease, stroke .2s ease;
    }

    .service-flow-node text {
      fill: rgba(255,255,255,.56);
      font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .06em;
      transition: fill .2s ease;
    }

    .service-flow-output rect {
      fill: rgba(255,255,255,.035);
      stroke: rgba(255,255,255,.24);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      transition: fill .2s ease, stroke .2s ease;
    }

    .service-flow-output text {
      fill: rgba(255,255,255,.82);
      font: 700 10px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .07em;
      text-anchor: middle;
      transition: fill .2s ease;
    }

    .service-flow-output .service-flow-output-note {
      fill: rgba(255,255,255,.38);
      font-size: 7px;
      letter-spacing: .12em;
    }

    @keyframes service-route { to { stroke-dashoffset: -40; } }

    @media (hover: hover) and (pointer: fine) {
      .services:hover .service-flow-path { stroke: rgba(255,255,255,.52); animation-duration: 1.6s; }
      .services:hover .service-flow-path--two { stroke: var(--accent); }
      .services:hover .service-flow-node circle { fill: var(--accent); stroke: var(--accent); }
      .services:hover .service-flow-node text { fill: rgba(255,255,255,.9); }
      .services:hover .service-flow-output rect { fill: rgba(249,65,55,.1); stroke: var(--accent); }
      .services:hover .services-visual-output { color: var(--accent); }
    }

    .services:focus-visible .service-flow-path { stroke: rgba(255,255,255,.52); }
    .services:focus-visible .service-flow-path--two,
    .services:focus-visible .service-flow-output rect { stroke: var(--accent); }
    .services:focus-visible .service-flow-node circle { fill: var(--accent); stroke: var(--accent); }
    .services:focus-visible .services-visual-output { color: var(--accent); }

    .contact-signal {
      top: 35%;
      left: 50%;
      display: grid;
      width: clamp(54px, 5.2vw, 78px);
      height: auto;
      aspect-ratio: auto;
      gap: clamp(6px, .55vw, 9px);
      transform: translate(-50%, -50%);
      opacity: .82;
    }

    .contact-signal i,
    .contact-signal i:nth-child(2),
    .contact-signal i:nth-child(3) {
      position: static;
      display: block;
      width: 100%;
      height: 4px;
      border: 0;
      border-radius: 0;
      background: var(--accent);
      opacity: 1;
      transform: none;
    }

    .contact-signal::after { content: none; }

    .projects-count {
      display: flex;
      align-items: baseline;
      gap: 5px;
      color: var(--ink);
      font-size: clamp(24px, 2.4vw, 38px);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.05em;
    }

    .projects-count b { font-weight: 700; }
    .projects-count b:first-child { color: var(--accent); }
    .projects-count span {
      display: inline-block;
      margin: 0;
      color: rgba(255,255,255,.5);
      font-size: .44em;
      letter-spacing: 0;
      transform: translateY(-.08em);
    }

    .process-visual {
      top: clamp(20px, 2vw, 32px);
      right: clamp(18px, 1.8vw, 28px);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
      width: 52%;
    }

    .process-visual::before,
    .process-visual::after { content: none; }

    .process-visual i,
    .process-visual i:first-child,
    .process-visual i:last-child {
      width: 100%;
      height: 2px;
      margin: 0;
      border-radius: 0;
      background: rgba(255,255,255,.2);
      box-shadow: none;
    }

    .process-visual i:first-child { background: var(--accent); }

    /* Each project has its own visual grammar instead of a shared placeholder */
    .project-window-screen {
      isolation: isolate;
      background: #111;
      transition: background .35s ease;
    }

    .project-window-screen::before,
    .project-window-screen::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .project-window-screen strong {
      color: var(--screen-ink, #f2e9dd);
      text-shadow: none;
    }

    .project-window-screen small { color: var(--screen-muted, rgba(255,255,255,.48)); }

    .project-window[data-visual="platform"] .project-window-screen {
      --screen-ink: #f1e9de;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 70% 50%, rgba(249,65,55,.16), transparent 38%),
        #101212;
      background-size: 22px 22px, 22px 22px, auto, auto;
    }

    .project-window[data-visual="platform"] .project-window-screen::before {
      top: 50%;
      right: -13%;
      width: 47%;
      aspect-ratio: 1;
      border: 1px solid rgba(249,65,55,.3);
      border-radius: 50%;
      box-shadow: 0 0 0 18px rgba(249,65,55,.055), 0 0 0 38px rgba(255,255,255,.025);
      transform: translateY(-50%);
    }

    .project-window[data-visual="platform"] .project-window-screen::after {
      top: 18%;
      bottom: 18%;
      left: 24%;
      width: 1px;
      background: rgba(255,255,255,.09);
    }

    .project-window[data-visual="art"] .project-window-screen {
      --screen-ink: #171717;
      --screen-muted: rgba(20,20,20,.55);
      background:
        repeating-linear-gradient(0deg, rgba(20,20,20,.045) 0 1px, transparent 1px 23px),
        linear-gradient(105deg, #e4ddd1, #c9bca9);
    }

    .project-window[data-visual="art"] .project-window-screen::before {
      top: 22%;
      right: 10%;
      left: 10%;
      height: 1px;
      background: rgba(20,20,20,.25);
      box-shadow: 0 44px 0 rgba(20,20,20,.16), 0 88px 0 rgba(20,20,20,.1);
    }

    .project-window[data-visual="art"] .project-window-screen::after {
      top: calc(22% - 3px);
      left: 24%;
      width: 7px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 72px 44px 0 rgba(20,20,20,.8), 142px 88px 0 var(--accent);
    }

    .project-window[data-visual="industrial"] .project-window-screen {
      --screen-ink: #e9ece9;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px),
        linear-gradient(145deg, #172025, #0b0e10 72%);
    }

    .project-window[data-visual="industrial"] .project-window-screen::before {
      inset: 18% 10%;
      border: 1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(135deg, transparent 49.4%, rgba(249,65,55,.3) 50%, transparent 50.6%),
        linear-gradient(45deg, transparent 49.4%, rgba(255,255,255,.08) 50%, transparent 50.6%);
      background-size: 42px 42px;
    }

    .project-window[data-visual="industrial"] .project-window-screen::after {
      right: 11%;
      bottom: 18%;
      width: 34%;
      height: 3px;
      background: var(--accent);
    }

    .project-feature {
      border: 1px solid rgba(255,255,255,.07);
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 82% 68%, rgba(249,65,55,.13), transparent 34%),
        #0a0c0c;
      background-size: 28px 28px, 28px 28px, auto, auto;
    }

    .project-feature-mark::before {
      content: "";
      position: absolute;
      right: -8%;
      bottom: -33%;
      width: 48%;
      aspect-ratio: 1;
      border: 1px solid rgba(249,65,55,.22);
      border-radius: 50%;
      box-shadow: 0 0 0 26px rgba(249,65,55,.035), 0 0 0 54px rgba(255,255,255,.018);
    }

    .project-index article {
      position: relative;
      overflow: hidden;
      padding-inline: 18px;
    }

    .project-index article:first-child {
      color: #181818;
      background:
        repeating-linear-gradient(0deg, rgba(20,20,20,.05) 0 1px, transparent 1px 20px),
        linear-gradient(115deg, #e2dbcf, #c9bead);
    }

    .project-index article:first-child::after {
      content: "";
      position: absolute;
      top: 24%;
      right: 10%;
      width: 7px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 38px 32px 0 rgba(20,20,20,.65);
    }

    .project-index article:first-child h3 { color: #181818; }
    .project-index article:first-child p { color: rgba(20,20,20,.62); }

    .project-index article:last-child {
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px),
        linear-gradient(145deg, #172025, #0b0e10 72%);
    }

    .project-index article:last-child::after {
      content: "";
      position: absolute;
      right: 9%;
      bottom: 14%;
      width: 32%;
      height: 2px;
      background: var(--accent);
    }

    @media (max-width: 920px) {
      .hero-index { display: none; }
      .card-kicker { font-size: 11px; }
      .service-orbit { right: 5%; }
      .brand-caption {
        gap: 0;
        padding-bottom: 2px;
        border-bottom: 1px dotted rgba(255,81,73,.38);
      }
    }

    @media (max-width: 700px) {
      :root { --radius: clamp(16px, 5vw, 26px); --gap: 8px; }

      .app {
        grid-template-rows: 38px minmax(0, 1fr);
        padding-inline: 10px;
      }

      .topbar {
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: start;
        font-size: 10px;
      }

      .role { display: none; }
      .brand-caption { font-size: 9px; }
      .clock-wrap { gap: 11px; }
      .clock { font-size: 9px; }

      .stage { padding-top: clamp(65px, 11.5vh, 84px); }

      .hero-logo {
        top: 8px;
        width: 91vw;
        max-width: none;
      }

      .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
      }

      .about { grid-column: 1; grid-row: 1; }
      .services { grid-column: 2; grid-row: 1; }
      .showcase { grid-column: 1 / 3; grid-row: 2; }
      .contact { grid-column: 1; grid-row: 3; }
      .rail { grid-column: 2; grid-row: 3; }

      .card-inner,
      .services .card-inner,
      .contact .card-inner,
      .process-card .card-inner { padding: 14px; }

      .card-label { font-size: clamp(15px, 4.7vw, 21px); }
      .card-kicker { font-size: clamp(10px, 2.5vw, 12px); letter-spacing: .01em; }
      .services-copy { display: none; }
      .contact-copy { display: none; }
      .contact-mail { display: none; }
      .service-orbit { right: 10%; width: 46%; opacity: .4; }
      .arrow { width: auto; font-size: 15px; }
      .rail { grid-template-rows: .56fr .44fr; }
      .tools { gap: 5px; padding: 10px; }
      .tool-mark { border-radius: 10px; }
      .projects-count { font-size: clamp(24px, 9vw, 38px); }
      .process-card .card-label { font-size: 14px; }
      .showcase-art::before { inset: 13% 14% 20%; }
      .about-inside { inset: 20% 8% 22%; }
      .about-letter { font-size: clamp(76px, 26vw, 105px); }
      .about-caption { display: none; }
      .about-legal-links {
        right: 14px;
        bottom: 43px;
        left: 14px;
        gap: 3px 9px;
        max-width: calc(100% - 28px);
      }
      .about-legal-links a { font-size: 7.5px; letter-spacing: .015em; }
      .services-visual { top: 49%; right: 10px; width: 55%; gap: 2px; opacity: .82; }
      .services-visual-caption { display: none; }
      .services-visual-output { font-size: 6px; }
      .service-flow-node text { font-size: 7px; }
      .service-flow-output text { font-size: 8px; }
      .service-flow-output .service-flow-output-note { font-size: 6px; }
      .contact-signal { left: 50%; width: 46px; gap: 5px; opacity: .78; }
      .contact-signal i,
      .contact-signal i:nth-child(2),
      .contact-signal i:nth-child(3) { height: 3px; }
      .project-window { inset: 28px 13px 28px 44%; border-radius: 10px; transform: none; }
      .showcase .card-title-row { width: 40%; min-width: 0; }
      .project-copy { width: 40%; max-width: none; font-size: 9px; line-height: 1.3; }
      .project-copy::before { margin-bottom: 4px; font-size: 8px; }
      .project-window-screen strong { font-size: 40px; }
      .project-window-screen small { display: none; }
      .tools-caption,
      .tool-mark::after { display: none; }
      .social-link { padding-inline: 5px 2px; }
      .social-icon { width: 18px; margin-bottom: 4px; }
      .social-link small { margin-top: 2px; font-size: 9px; }
      .social-link::after { display: none; }
      .process-visual { display: none; }

      .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); padding: 4px 8px; }
      .social-link { padding-inline: 6px; }
      .social-icon { width: 15px; margin-bottom: 2px; }
      .social-link small { max-width: 100%; overflow: visible; white-space: nowrap; text-overflow: clip; }
      .service-menu article.is-primary::before { top: -12px; right: auto; left: 0; }

      .modal { padding: 10px; }
      .modal-panel { max-height: calc(100svh - 20px); border-radius: 24px; }
      .modal-head { padding: 14px 16px; }
      .modal-close { width: 36px; }
      .modal-identity { gap: 10px; }
      .modal-identity img { width: 55px; padding-right: 10px; }
      .modal-body {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 18px 24px;
      }
      .modal-title { font-size: clamp(34px, 11.5vw, 56px); }
      .modal-description { max-width: 92%; font-size: 13px; }
      .modal-list li,
      .modal-list a { min-height: 42px; font-size: 12px; }
      .modal-intro { grid-template-columns: 1fr; gap: 10px; }
      .modal-intro .modal-title { font-size: clamp(34px, 10.8vw, 49px); }
      .modal-intro .modal-description { max-width: 100%; padding: 0; font-size: 12px; }
      .modal-body--services { gap: 12px; padding: 22px 15px 18px; }
      .modal-intro--services { grid-template-columns: 1fr; }
      .service-promise { gap: 8px; }
      .modal-trust { gap: 0; }
      .modal-trust span { padding: 2px 7px; font-size: 5px; }
      .modal-trust span:first-child { padding-left: 0; }
      .service-value-strip span { padding: 8px 7px; }
      .service-value-strip small { font-size: 5px; }
      .service-value-strip strong { margin-top: 3px; font-size: 8px; }
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process { gap: 18px; }
      .manifesto-grid,
      .service-deck,
      .project-deck,
      .contact-deck,
      .process-deck { grid-template-columns: 1fr; gap: 7px; }
      .manifesto-grid article {
        display: grid;
        grid-template-columns: 28px 1fr;
        min-height: 68px;
        padding: 11px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255,255,255,.09);
        column-gap: 8px;
      }
      .manifesto-grid article:last-child { border-bottom: 0; }
      .manifesto-grid article strong { margin: 0; font-size: 14px; }
      .manifesto-grid article p { grid-column: 2; margin: 3px 0 0; font-size: 10px; }
      .service-deck { gap: 0; }
      .service-deck article {
        min-height: 61px;
        grid-template-columns: 28px 1fr auto;
        padding: 9px 0;
        border-left: 0;
      }
      .service-deck article strong { font-size: 13px; }
      .service-deck article p { margin-top: 3px; font-size: 9px; }
      .service-deck--selling article small { margin-top: 3px; font-size: 7px; }
      .service-deck--selling article b { padding: 4px 6px; font-size: 6px; }
      .modal-cta { min-height: 70px; gap: 10px; padding: 10px 0; }
      .modal-cta strong { font-size: 10px; }
      .modal-cta a { min-height: 38px; gap: 9px; padding-inline: 12px; font-size: 9px; }
      .modal-detail-bar {
        grid-template-columns: 64px 1fr;
        gap: 4px 10px;
        min-height: 66px;
        padding: 10px 0;
      }
      .modal-detail-bar > span { grid-row: 1 / 3; font-size: 5px; }
      .modal-detail-bar strong { font-size: 10px; }
      .modal-detail-bar p { font-size: 8px; }
      .process-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .process-summary > span { padding: 8px 6px; }
      .process-summary small { font-size: 4.5px; }
      .process-summary strong { margin-top: 3px; font-size: 8px; }
      .process-summary a { grid-column: 1 / 4; min-width: 0; min-height: 38px; padding-inline: 12px; font-size: 9px; }
      .project-deck { gap: 7px; }
      .project-deck article,
      .project-deck article:nth-child(2),
      .project-deck article:nth-child(3) { height: 82px; border-radius: 1px; }
      .project-deck article:nth-child(2) { width: calc(100% - 30px); margin-left: 30px; }
      .project-deck article:nth-child(3) { width: calc(100% - 18px); margin-right: 18px; }
      .project-deck article > span { top: 10px; right: 12px; font-size: 7px; }
      .project-deck article strong { bottom: 12px; left: 13px; font-size: 17px; }
      .project-deck article b { right: 13px; bottom: 10px; }
      .project-deck article small { bottom: 34px; left: 13px; font-size: 7px; }
      .contact-deck { gap: 0; }
      .contact-deck > * {
        min-height: 76px;
        padding: 12px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255,255,255,.09);
      }
      .contact-deck > *:last-child { border-bottom: 0; }
      .contact-deck strong { font-size: 14px; }
      .contact-deck b { position: absolute; top: 50%; right: 16px; align-self: auto; transform: translateY(-50%); }
      .process-deck::before { display: none; }
      .process-deck article {
        display: grid;
        grid-template-columns: 38px 1fr;
        min-height: 48px;
        padding: 0;
        align-items: center;
        column-gap: 10px;
        text-align: left;
      }
      .process-deck article > span { width: 34px; margin: 0; grid-row: 1 / 3; }
      .process-deck article strong { align-self: end; font-size: 13px; }
      .process-deck article p { align-self: start; margin: 2px 0 0; font-size: 9px; }

      .noise-layer { opacity: .06; mix-blend-mode: normal; }
      .card,
      .modal { backdrop-filter: none; -webkit-backdrop-filter: none; }

      .modal { padding: 8px; }
      .modal-panel,
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel,
      .modal[data-kind="contact"] .modal-panel {
        max-height: calc(100dvh - 16px);
        height: calc(100dvh - 16px);
        border-radius: 20px;
      }

      .modal-head { min-height: 48px; padding: 9px 16px; }
      .modal-identity { gap: 10px; }
      .modal-identity img { width: 54px; padding-right: 10px; }
      .modal-eyebrow { font-size: 10px; }
      .modal-close { width: 30px; font-size: 20px; }

      .modal-body,
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process {
        gap: 16px;
        padding: 18px 16px 20px;
        overflow: hidden;
      }

      .modal-title,
      .modal-intro .modal-title { font-size: clamp(31px, 9.7vw, 42px); }
      .mobile-break { display: inline; }
      .modal-description,
      .modal-intro .modal-description { max-width: 100%; font-size: 12px; line-height: 1.35; }
      .scene-label { font-size: 10px; }

      .about-scene-head,
      .services-scene-head,
      .contact-scene-head,
      .projects-scene-head,
      .process-scene-head { grid-template-columns: 1fr; gap: 7px; }

      .about-editorial { grid-template-columns: 1fr; }
      .about-editorial blockquote {
        min-height: 0;
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
      }
      .about-editorial blockquote p { font-size: 16px; line-height: 1.2; }
      .about-editorial blockquote footer { margin-top: 12px; font-size: 10px; }
      .about-commitments { padding-left: 0; }
      .about-commitments div { grid-template-columns: 104px 1fr; min-height: 54px; }
      .about-commitments dt { font-size: 12px; }
      .about-commitments dd { font-size: 12px; }
      .about-legal-footer { justify-content: flex-start; }

      .service-menu article {
        grid-template-columns: 1fr 1fr;
        gap: 5px 12px;
        min-height: 0;
        padding: 10px 0;
      }
      .service-menu h3 { grid-column: 1 / -1; font-size: 15px; }
      .service-menu p { font-size: 12px; line-height: 1.28; }
      .service-menu p span { font-size: 10px; }
      .services-footer { gap: 12px; }
      .services-footer p { max-width: 52%; font-size: 12px; line-height: 1.25; }
      .services-footer a,
      .services-footer button,
      .contact-primary,
      .process-assurance a,
      .process-assurance button { min-height: 42px; padding-inline: 14px; font-size: 12px; }

      .contact-email-action { min-height: 74px; font-size: clamp(26px, 8.2vw, 34px); }
      .contact-actions { grid-template-columns: 1fr; gap: 12px; }
      .contact-primary { min-width: 0; }
      .contact-brief { grid-template-columns: repeat(3, 1fr); padding-top: 10px; }
      .contact-brief span { grid-column: 1 / -1; margin-bottom: 10px; font-size: 10px; }
      .contact-brief p { padding: 0 8px; font-size: 12px; text-align: center; }
      .contact-brief p:nth-of-type(1) { padding-left: 0; border-left: 0; text-align: left; }

      .projects-editorial { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
      .project-feature { height: 228px; }
      .project-feature-copy { bottom: 15px; left: 15px; width: 78%; }
      .project-feature-copy > span,
      .project-index span { font-size: 10px; }
      .project-feature-copy h3 { margin: 5px 0 9px; font-size: 27px; }
      .project-feature-copy p { margin-top: 4px; font-size: 12px; }
      .project-feature-copy p:nth-of-type(2) { display: none; }
      .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
      .project-index article { min-height: 86px; padding: 10px 8px 8px 0; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
      .project-index article:last-child { padding-left: 10px; border-right: 0; }
      .project-index h3 { margin: 5px 0 6px; font-size: 15px; }
      .project-index p { font-size: 11.5px; line-height: 1.25; }

      .process-layout { grid-template-columns: 1fr; gap: 14px; }
      .process-route li { grid-template-columns: 112px 1fr; min-height: 42px; }
      .process-route span { font-size: 12px; }
      .process-route strong { font-size: 12px; }
      .process-assurance {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 12px;
        padding: 12px 0 0;
        border-top: 1px solid rgba(255,255,255,.12);
        border-left: 0;
      }
      .process-assurance > span { grid-column: 1 / -1; font-size: 10px; }
      .process-assurance p { margin: 0; font-size: 12px; }
      .process-assurance a,
      .process-assurance button { grid-column: 1 / -1; width: 100%; align-self: start; margin-top: 3px; }
    }

    @media (max-width: 360px) and (orientation: portrait) {
      .topbar { gap: 6px; }
      .brand-lockup { gap: 7px; }
      .top-logo { width: 62px; }
      .brand-caption,
      .clock { font-size: 7px; }
      .clock-wrap { gap: 6px; }
      .card-title-row { gap: 5px; }
      .card-label { font-size: 14px; }
      .contact .card-label,
      .process-card .card-label { font-size: 13px; }
      .arrow { font-size: 13px; }
      .project-copy {
        display: -webkit-box;
        width: 39%;
        overflow: hidden;
        font-size: 8px;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
      }
      .project-copy::before { font-size: 7px; }
      .showcase .card-title-row { width: 42%; }
      .social-link { padding-inline: 3px; }
      .social-icon { width: 13px; }
      .social-link small { font-size: 8px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .modal { padding: 4px; }
      .modal-panel,
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel,
      .modal[data-kind="contact"] .modal-panel { height: calc(100dvh - 8px); border-radius: 16px; }
      .modal-head { min-height: 40px; padding: 6px 14px; }
      .modal-identity img { width: 50px; }
      .modal-close { width: 28px; font-size: 17px; }
      .modal-body,
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process { gap: 8px; padding: 10px 14px 12px; }
      .modal-title,
      .modal-intro .modal-title { font-size: 27px; line-height: .98; }
      .scene-label { font-size: 8px; }
      .modal-description,
      .modal-intro .modal-description { font-size: 10px; line-height: 1.25; }

      .about-editorial blockquote { padding-block: 10px; }
      .about-editorial blockquote p { font-size: 13px; }
      .about-editorial blockquote footer { margin-top: 6px; font-size: 8px; }
      .about-editorial blockquote footer button { font-size: 9px; }
      .about-commitments div { grid-template-columns: 92px 1fr; min-height: 43px; }
      .about-commitments dt,
      .about-commitments dd { font-size: 9px; }
      .about-legal-footer { padding-top: 10px; }
      .about-legal-footer a { font-size: 9px; }

      .modal-body--services { grid-template-rows: auto minmax(0,1fr) auto; }
      .service-menu article { min-height: 0; padding: 6px 0; gap: 3px 8px; }
      .service-menu h3 { font-size: 13px; }
      .service-menu p { font-size: 9px; line-height: 1.18; }
      .service-menu p span { font-size: 8px; }
      .services-footer p { display: none; }
      .services-footer a,
      .services-footer button { width: 100%; min-height: 38px; }

      .contact-email-action { min-height: 54px; font-size: 25px; }
      .contact-actions { gap: 8px; }
      .contact-primary { min-height: 38px; }
      .contact-brief { padding-top: 7px; }
      .contact-brief span { margin-bottom: 6px; font-size: 8px; }
      .contact-brief p { font-size: 9px; }

      .project-feature { height: 180px; }
      .project-feature-copy { bottom: 11px; left: 11px; width: 82%; }
      .project-feature-copy h3 { margin: 3px 0 6px; font-size: 22px; }
      .project-feature-copy p { font-size: 9px; }
      .project-index article { min-height: 66px; }
      .project-index h3 { font-size: 12px; }
      .project-index p { font-size: 9px; }

      .process-route li { grid-template-columns: 94px 1fr; min-height: 31px; }
      .process-route span,
      .process-route strong { font-size: 9px; }
      .process-assurance { gap: 5px 8px; padding-top: 8px; }
      .process-assurance > span { font-size: 8px; }
      .process-assurance p { font-size: 9px; }
      .process-assurance a,
      .process-assurance button { min-height: 36px; font-size: 10px; }
    }

    @media (max-height: 700px) and (min-width: 701px) {
      .app { grid-template-rows: 34px minmax(0, 1fr); }
      .stage { padding-top: 84px; }
      .hero-logo { top: 12px; width: min(56vw, 760px); }
      .card-inner { padding: 20px; }
      .services .card-inner,
      .contact .card-inner { padding-inline: 26px; }
      .card-kicker { font-size: 10px; }

      .modal { padding: 10px; }
      .modal-panel,
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel,
      .modal[data-kind="contact"] .modal-panel { height: calc(100dvh - 20px); }
      .modal-head { min-height: 50px; padding-block: 8px; }
      .modal-body,
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process { gap: 14px; padding-top: 16px; padding-bottom: 18px; }
      .modal-title { font-size: clamp(32px, 4vw, 48px); }
      .modal-description { font-size: 12px; }
      .about-editorial blockquote { min-height: 0; padding-block: 18px; }
      .about-editorial blockquote p { font-size: 18px; }
      .service-menu article { min-height: 54px; }
      .service-menu h3 { font-size: 15px; }
      .service-menu p { font-size: 11px; }
      .projects-editorial { min-height: 0; }
      .project-feature-copy h3 { margin-block: 5px 10px; }
      .contact-email-action { min-height: 70px; }
      .process-route li { min-height: 38px; }
    }

    @media (max-height: 500px) and (min-width: 701px) {
      .modal { padding: 6px; }
      .modal-panel,
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel,
      .modal[data-kind="contact"] .modal-panel { height: calc(100dvh - 12px); }
      .modal-head { min-height: 40px; padding: 5px 18px; }
      .modal-identity img { width: 52px; }
      .modal-body,
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process { gap: 9px; padding: 9px 24px 12px; }
      .modal-title { font-size: clamp(27px, 3.4vw, 38px); }
      .scene-label { font-size: 9px; }
      .about-editorial blockquote { padding-block: 10px; }
      .about-editorial blockquote p { font-size: 15px; }
      .about-commitments div { min-height: 0; }
      .about-commitments dt,
      .about-commitments dd { font-size: 11px; }
      .service-menu article { min-height: 43px; }
      .service-menu h3 { font-size: 14px; }
      .service-menu p { font-size: 10px; }
      .services-footer a,
      .services-footer button,
      .contact-primary,
      .process-assurance a,
      .process-assurance button { min-height: 36px; }
      .project-feature-copy p { font-size: 10px; }
      .project-feature-mark strong { font-size: 110px; }
      .project-index p { font-size: 10px; }
      .contact-email-action { min-height: 54px; font-size: 38px; }
      .contact-actions { gap: 16px; }
      .process-route li { min-height: 31px; }
      .process-assurance p { font-size: 11px; }
    }

    @media (max-height: 590px) {
      .card-kicker,
      .services-copy,
      .contact-copy { display: none; }
    }

    @media (max-width: 700px) and (max-height: 590px) and (orientation: landscape) {
      .app { grid-template-rows: 28px minmax(0, 1fr); padding: 6px; }
      .topbar { grid-template-columns: 1fr auto; font-size: 9px; }
      .top-logo { width: 64px; }
      .brand-caption { font-size: 8px; }
      .clock { font-size: 8px; }
      .stage { padding-top: 43px; }
      .hero-logo { top: 2px; width: min(68vw, 500px); }
      .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; }
      .about { grid-column: 1; grid-row: 1; }
      .services { grid-column: 2 / 5; grid-row: 1; }
      .showcase { grid-column: 1 / 3; grid-row: 2; }
      .contact { grid-column: 3; grid-row: 2; }
      .rail { grid-column: 4; grid-row: 2; }
      .card-inner,
      .services .card-inner,
      .contact .card-inner,
      .process-card .card-inner { padding: 10px; }
      .card-label,
      .process-card .card-label { font-size: 13px; }
      .project-window { inset: 18px 8px 17px 45%; }
      .project-window-screen strong { font-size: 31px; }
      .project-copy { width: 41%; font-size: 8px; }
      .project-copy::before { font-size: 7px; }
      .projects-count { font-size: 24px; }
      .process-visual { top: 10px; right: 8px; }
      .tools { padding: 2px 4px; }
      .social-icon { width: 12px; }
      .social-link small { font-size: 7px; }

      .modal { padding: 4px; }
      .modal-panel,
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel,
      .modal[data-kind="contact"] .modal-panel { height: calc(100dvh - 8px); border-radius: 16px; }
      .modal-head { min-height: 38px; padding: 4px 15px; }
      .modal-identity img { width: 50px; }
      .modal-close { width: 28px; font-size: 17px; }
      .modal-body,
      .modal-body--about,
      .modal-body--services,
      .modal-body--contact,
      .modal-body--projects,
      .modal-body--process { gap: 8px; padding: 8px 20px 10px; }
      .modal-title,
      .modal-intro .modal-title { font-size: clamp(24px, 4.2vw, 30px); }
      .mobile-break { display: none; }
      .scene-label { font-size: 8px; }
      .modal-description,
      .modal-intro .modal-description { font-size: 10px; line-height: 1.25; }
      .about-scene-head,
      .services-scene-head,
      .contact-scene-head,
      .process-scene-head { grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr); gap: 5px 22px; }
      .projects-scene-head { grid-template-columns: 1fr; }

      .about-editorial { grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); }
      .about-editorial blockquote { min-height: 0; padding: 12px 18px 12px 0; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
      .about-editorial blockquote p { font-size: 13px; }
      .about-editorial blockquote footer { margin-top: 6px; font-size: 8px; }
      .about-editorial blockquote footer button { font-size: 9px; }
      .about-commitments { padding-left: 18px; }
      .about-commitments div { grid-template-columns: 88px 1fr; min-height: 33.333%; }
      .about-commitments dt,
      .about-commitments dd { font-size: 9px; }

      .service-menu article { grid-template-columns: minmax(140px,.75fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; min-height: 42px; padding: 0; }
      .service-menu article.is-primary::before { top: -12px; right: auto; left: 0; }
      .service-menu h3 { grid-column: auto; font-size: 12px; }
      .service-menu p { font-size: 8px; line-height: 1.2; }
      .service-menu p span { margin-bottom: 1px; font-size: 7px; }
      .services-footer p { max-width: none; font-size: 9px; }
      .services-footer a,
      .services-footer button,
      .contact-primary,
      .process-assurance a,
      .process-assurance button { min-height: 34px; padding-inline: 12px; font-size: 9px; }

      .contact-email-action { min-height: 46px; font-size: clamp(25px, 5vw, 34px); }
      .contact-actions { grid-template-columns: auto minmax(0,1fr); gap: 16px; }
      .contact-primary { min-width: 160px; }
      .contact-brief { grid-template-columns: .8fr repeat(3,1fr); padding-top: 0; }
      .contact-brief span { grid-column: auto; margin-bottom: 0; font-size: 7px; }
      .contact-brief p { padding-left: 8px; font-size: 8px; text-align: left; }

      .projects-editorial { grid-template-columns: minmax(0,1.55fr) minmax(180px,.45fr); gap: 12px; }
      .project-feature { height: auto; }
      .project-feature-copy { bottom: 11px; left: 13px; width: 76%; }
      .project-feature-copy > span,
      .project-index span { font-size: 7px; }
      .project-feature-copy h3 { margin: 3px 0 5px; font-size: 21px; }
      .project-feature-copy p { margin-top: 2px; font-size: 8px; }
      .project-index { grid-template-columns: 1fr; grid-template-rows: repeat(2,1fr); }
      .project-index article { min-height: 0; padding: 7px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
      .project-index article:last-child { padding-left: 0; border-bottom: 0; }
      .project-index h3 { margin: 3px 0 4px; font-size: 12px; }
      .project-index p { font-size: 8px; }

      .process-layout { grid-template-columns: minmax(0,1.45fr) minmax(170px,.55fr); gap: 20px; }
      .process-route li { grid-template-columns: 98px 1fr; min-height: 30px; }
      .process-route span,
      .process-route strong { font-size: 9px; }
      .process-assurance { display: flex; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
      .process-assurance > span { font-size: 8px; }
      .process-assurance p { font-size: 8px; }
      .process-assurance a,
      .process-assurance button { width: auto; align-self: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

    /* The compact cards work as editorial signs instead of generic UI widgets. */
    .contact-signal {
      top: 34%;
      left: 50%;
      display: flex;
      width: auto;
      height: auto;
      gap: 0;
      align-items: baseline;
      justify-content: center;
      opacity: 1;
      transform: translate(-50%, -50%);
    }

    .contact-signal i,
    .contact-signal i:nth-child(2),
    .contact-signal i:nth-child(3) { display: none; }

    .contact-signal::before {
      content: "HELLO@";
      color: rgba(255,255,255,.12);
      font-size: clamp(34px, 3.35vw, 54px);
      font-weight: 700;
      line-height: .84;
      letter-spacing: -.075em;
      white-space: nowrap;
    }

    .contact-signal::after {
      content: "";
      position: absolute;
      top: auto;
      right: -12px;
      bottom: -1px;
      left: auto;
      width: 6px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: none;
      transform: none;
    }

    .process-visual { display: none; }

    .service-menu article.is-primary::before {
      top: 50%;
      left: -18px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: none;
      transform: translateY(-50%);
    }

    .projects-count {
      width: 100%;
      padding-right: 2px;
    }

    .projects-count .process-note {
      display: block;
      margin: 0 0 1px auto;
      color: rgba(255,255,255,.35);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(10px, .62vw, 12px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: .02em;
      text-transform: none;
      transform: none;
      white-space: nowrap;
    }

    @media (max-width: 900px) {
      .modal[data-kind="services"] .modal-panel {
        height: min(740px, calc(100dvh - 12px));
      }
      .contact-signal {
        top: 38%;
        left: 50%;
        width: auto;
        gap: 0;
        opacity: 1;
      }

      .contact-signal::before { font-size: clamp(27px, 8.4vw, 36px); }
      .contact-signal::after { right: -9px; width: 5px; }
      .projects-count .process-note { display: none; }
      .service-menu article.is-primary::before {
        top: -9px;
        left: 0;
        width: 5px;
        height: 5px;
        transform: none;
      }
    }

    /* Cross-role audit: calmer modal geometry, clearer hierarchy and compact legibility. */
    .modal {
      visibility: hidden;
      transition: opacity .34s ease, visibility 0s linear .34s;
    }

    .modal.is-open {
      visibility: visible;
      transition-delay: 0s;
    }

    .modal-panel,
    .modal[data-kind="services"] .modal-panel,
    .modal[data-kind="projects"] .modal-panel,
    .modal[data-kind="contact"] .modal-panel {
      border-radius: 18px;
      box-shadow: 0 24px 64px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.025);
    }

    .modal-close { position: relative; }
    .modal-close::before {
      content: "";
      position: absolute;
      inset: -7px;
    }

    .scene-label {
      font-family: "Onest", Arial, sans-serif;
      font-weight: 650;
      letter-spacing: .08em;
    }

    .modal[data-kind="about"] .modal-title em,
    .modal[data-kind="projects"] .modal-title em,
    .modal[data-kind="contact"] .modal-title em,
    .modal[data-kind="process"] .modal-title em { color: inherit; }

    .modal[data-kind="process"] .modal-title .accent-word { color: var(--accent); }
    .modal[data-kind="contact"] .contact-email-action { color: var(--accent); }

    .services-footer a,
    .services-footer button,
    .contact-primary,
    .process-assurance a,
    .process-assurance button,
    .services-footer a:hover,
    .services-footer button:hover,
    .contact-primary:hover,
    .process-assurance a:hover,
    .process-assurance button:hover {
      background: #efefec;
      color: #111;
    }

    .contact-email-action:hover { color: var(--accent); }

    .social-link.is-disabled { opacity: .52; }

    .social-link.is-disabled .social-icon { color: rgba(255,255,255,.72); }
    .social-link.is-disabled small { color: rgba(255,255,255,.54); }

    .about-inside {
      inset: 28% 12% 24%;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .about-inside img { display: none; }

    .about-manifesto {
      color: rgba(255,255,255,.13);
      font-size: clamp(22px, 2.75vw, 44px);
      font-weight: 680;
      line-height: .9;
      letter-spacing: -.06em;
      text-align: left;
    }

    .contact-signal::before {
      content: "НА СВЯЗИ";
      font-size: clamp(25px, 2.35vw, 38px);
      letter-spacing: -.055em;
    }

    /* The project card now reads as a real interface crop, while remaining an honest concept. */
    .project-ui {
      position: absolute;
      inset: 8% 7% 13%;
      z-index: 1;
      display: grid;
      grid-template-rows: 17% minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(8,10,10,.78);
      box-shadow: 0 16px 42px rgba(0,0,0,.34);
    }

    .project-ui-head {
      display: flex;
      align-items: center;
      gap: 3px;
      padding-inline: 6px;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .project-ui-head i {
      width: 3px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
    }

    .project-ui-head i:first-child { background: var(--accent); }
    .project-ui-head b {
      margin-left: auto;
      color: rgba(255,255,255,.36);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(4px, .32vw, 6px);
      font-weight: 600;
      letter-spacing: .08em;
    }

    .project-ui-layout {
      display: grid;
      grid-template-columns: 19% minmax(0, 1fr);
      min-height: 0;
    }

    .project-ui-side {
      display: grid;
      align-content: start;
      gap: 7px;
      padding: 9px 6px;
      border-right: 1px solid rgba(255,255,255,.08);
    }

    .project-ui-side i {
      height: 2px;
      background: rgba(255,255,255,.16);
    }

    .project-ui-side i:first-child { width: 58%; background: var(--accent); }

    .project-ui-board {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      grid-template-rows: 1fr .62fr;
      gap: 5px;
      padding: 8px;
    }

    .project-ui-board b,
    .project-ui-board em {
      min-width: 0;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
    }

    .project-ui-board b:first-child {
      grid-row: 1 / 3;
      background:
        linear-gradient(90deg, transparent 0 18%, rgba(249,65,55,.56) 18% 21%, transparent 21% 46%, rgba(255,255,255,.16) 46% 49%, transparent 49% 72%, rgba(255,255,255,.09) 72% 75%, transparent 75%),
        linear-gradient(0deg, rgba(255,255,255,.025), transparent);
    }

    .project-ui-board em {
      background: linear-gradient(145deg, rgba(249,65,55,.13), rgba(255,255,255,.025));
    }

    .project-window-screen > strong {
      position: absolute;
      z-index: 3;
      left: 11%;
      bottom: 16%;
      font-size: clamp(31px, 4.7vw, 76px);
    }

    .project-window[data-visual="art"] .project-ui {
      border-color: rgba(20,20,20,.2);
      background: rgba(226,219,207,.7);
    }

    .project-window[data-visual="art"] .project-ui-head,
    .project-window[data-visual="art"] .project-ui-side { border-color: rgba(20,20,20,.16); }
    .project-window[data-visual="art"] .project-ui-head i,
    .project-window[data-visual="art"] .project-ui-side i { background: rgba(20,20,20,.24); }
    .project-window[data-visual="art"] .project-ui-head i:first-child,
    .project-window[data-visual="art"] .project-ui-side i:first-child { background: var(--accent); }
    .project-window[data-visual="art"] .project-ui-head b { color: rgba(20,20,20,.45); }
    .project-window[data-visual="art"] .project-ui-board b,
    .project-window[data-visual="art"] .project-ui-board em { border-color: rgba(20,20,20,.15); background-color: rgba(20,20,20,.035); }

    .project-interface {
      position: absolute;
      top: 11%;
      right: 4%;
      bottom: 11%;
      z-index: 1;
      display: grid;
      width: 54%;
      grid-template-rows: 15% minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,10,10,.84);
      box-shadow: 0 18px 48px rgba(0,0,0,.38);
    }

    .project-interface-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 10px;
      border-bottom: 1px solid rgba(255,255,255,.09);
      color: rgba(255,255,255,.4);
      font-size: 7px;
      font-weight: 650;
      letter-spacing: .08em;
    }

    .project-interface-body {
      display: grid;
      grid-template-columns: 21% minmax(0, 1fr);
      min-height: 0;
    }

    .project-interface-nav {
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 18px 10px;
      border-right: 1px solid rgba(255,255,255,.08);
    }

    .project-interface-nav i { height: 3px; background: rgba(255,255,255,.14); }
    .project-interface-nav i:first-child { width: 62%; background: var(--accent); }

    .project-interface-content {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      grid-template-rows: .72fr 1fr;
      gap: 9px;
      padding: 15px;
    }

    .project-interface-content i {
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
    }

    .project-interface-content i:first-child {
      grid-column: 1 / 3;
      background:
        linear-gradient(90deg, rgba(249,65,55,.62) 0 18%, rgba(255,255,255,.13) 18% 44%, rgba(255,255,255,.055) 44% 100%);
      background-size: 100% 4px;
      background-repeat: no-repeat;
      background-position: 0 70%;
    }

    .project-feature-mark > strong { z-index: 0; }
    .project-feature-mark > span { z-index: 2; }

    @media (max-width: 760px) {
      .about-inside { inset: 22% 9% 23%; }
      .about-manifesto { font-size: clamp(18px, 6.6vw, 27px); }
      .contact-signal::before { font-size: clamp(22px, 6.8vw, 29px); }
      .project-ui { inset: 7% 6% 11%; }
      .project-ui-board { gap: 3px; padding: 5px; }
      .project-interface { width: 58%; }
      .service-menu article.is-primary::before { display: none; }
      .concept-prefix { display: none; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .brand-caption,
      .clock { font-size: 8px; }
      .project-copy { font-size: 9.5px; -webkit-line-clamp: 4; }
      .social-link small { font-size: 9px; }

      .scene-label { font-size: 9.5px; }
      .modal-description,
      .modal-intro .modal-description { font-size: 10.5px; }
      .about-editorial blockquote footer,
      .about-editorial blockquote footer button,
      .about-commitments dt,
      .about-commitments dd { font-size: 10px; }

      .service-menu article {
        grid-template-columns: 1fr;
        padding: 7px 0;
      }
      .service-menu h3 { grid-column: 1; font-size: 13.5px; }
      .service-menu p:first-of-type { display: none; }
      .service-menu p { font-size: 10.5px; line-height: 1.22; }
      .service-menu p span { display: inline; margin: 0 4px 0 0; font-size: 9.5px; }

      .contact-brief span,
      .contact-brief p { font-size: 10px; }
      .project-feature-copy p { font-size: 10.5px; }
      .project-index p { display: none; }
      .project-index span { font-size: 9px; }
      .process-route span,
      .process-route strong,
      .process-assurance p { font-size: 10.5px; }
      .process-assurance p:last-of-type { display: none; }
      .process-assurance > span { font-size: 9.5px; }
      .process-assurance a,
      .process-assurance button { min-height: 38px; font-size: 10.5px; }
    }

    @media (max-width: 700px) and (max-height: 590px) and (orientation: landscape) {
      .brand-caption,
      .clock { font-size: 8.5px; }
      .project-copy { font-size: 9px; }
      .social-link small { font-size: 8.5px; }
      .scene-label { font-size: 9px; }
      .service-menu p:first-of-type { display: none; }
      .service-menu p { font-size: 10px; }
      .service-menu p span { display: inline; margin-right: 3px; font-size: 9px; }
      .services-footer a,
      .services-footer button,
      .contact-primary,
      .process-assurance a,
      .process-assurance button { font-size: 10px; }
      .project-index p { display: none; }
      .project-feature-copy p { font-size: 10px; }
      .about-commitments dt,
      .about-commitments dd,
      .process-route span,
      .process-route strong,
      .process-assurance p { font-size: 10px; }
      .process-assurance p:last-of-type { display: none; }
    }

    /* Intentional interactions: selection changes content, never the card geometry. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .service-option {
      position: relative;
      display: grid;
      width: 100%;
      min-height: clamp(66px, 6.5vw, 88px);
      grid-template-columns: minmax(190px, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(18px, 2.4vw, 38px);
      padding: 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .service-option::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -18px;
      width: 6px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      opacity: 0;
      transform: translateY(-50%);
    }

    .service-option h3 { color: rgba(255,255,255,.76); }
    .service-option[aria-pressed="true"]::before { opacity: 1; }
    .service-option[aria-pressed="true"] h3 { color: white; }
    .service-option:focus-visible {
      outline: none;
    }
    .service-option:focus-visible h3 { text-decoration: underline 1px rgba(255,255,255,.55); text-underline-offset: 4px; }

    .project-index {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .project-index-item {
      position: relative;
      display: flex;
      width: 100%;
      min-width: 0;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding: 10px 18px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.11);
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        #0b0d0d;
      background-size: 24px 24px, 24px 24px, auto;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      opacity: .72;
      transition: opacity .18s ease;
    }

    .project-index-item:nth-child(2) {
      color: #181818;
      background:
        repeating-linear-gradient(0deg, rgba(20,20,20,.05) 0 1px, transparent 1px 20px),
        linear-gradient(115deg, #e2dbcf, #c9bead);
    }

    .project-index-item:nth-child(3) {
      color: white;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px),
        linear-gradient(145deg, #172025, #0b0e10 72%);
    }

    .project-index-item:last-child { border-bottom: 0; }
    .project-index-item > span {
      color: rgba(255,255,255,.42);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .project-index-item .concept-prefix { color: inherit; }
    .project-index-item:nth-child(2) > span { color: rgba(20,20,20,.5); }
    .project-index-item h3 { margin: 7px 0 8px; font-size: clamp(17px, 1.42vw, 23px); letter-spacing: -.04em; }
    .project-index-item p { max-width: 300px; margin: 0; color: rgba(255,255,255,.54); font-size: 11px; line-height: 1.3; }
    .project-index-item:nth-child(2) p { color: rgba(20,20,20,.62); }

    .project-index-item::before {
      content: "";
      position: absolute;
      top: 14px;
      right: 14px;
      width: 14px;
      height: 1px;
      background: var(--accent);
      opacity: 0;
    }

    .project-index-item[aria-selected="true"] { opacity: 1; }
    .project-index-item[aria-selected="true"]::before { opacity: 1; }
    .project-index-item[aria-selected="true"] > span { color: var(--accent); }
    .project-index-item:focus-visible {
      outline: none;
      opacity: 1;
    }
    .project-index-item:focus-visible h3 { text-decoration: underline 1px currentColor; text-underline-offset: 4px; }

    .project-feature-mark,
    .project-feature-copy,
    .process-assurance > span,
    .process-assurance > p { transition: opacity .18s ease; }

    .project-feature.is-switching .project-feature-mark,
    .project-feature.is-switching .project-feature-copy,
    .process-assurance.is-switching > span,
    .process-assurance.is-switching > p { opacity: 0; }

    .project-feature[data-project-visual="art"] {
      background:
        repeating-linear-gradient(0deg, rgba(20,20,20,.05) 0 1px, transparent 1px 22px),
        linear-gradient(115deg, #e3dccf, #c8bcaa);
    }
    .project-feature[data-project-visual="art"]::after {
      background: linear-gradient(90deg, rgba(20,20,20,.88), rgba(20,20,20,.58) 72%, rgba(20,20,20,.12));
    }

    .project-feature[data-project-visual="art"] .project-interface {
      border-color: rgba(20,20,20,.18);
      background: rgba(226,219,207,.86);
      box-shadow: 0 18px 48px rgba(50,42,32,.18);
    }

    .project-feature[data-project-visual="art"] .project-interface-head,
    .project-feature[data-project-visual="art"] .project-interface-nav { border-color: rgba(20,20,20,.14); color: rgba(20,20,20,.48); }
    .project-feature[data-project-visual="art"] .project-interface-nav i { background: rgba(20,20,20,.2); }
    .project-feature[data-project-visual="art"] .project-interface-nav i:first-child { background: var(--accent); }
    .project-feature[data-project-visual="art"] .project-interface-content i { border-color: rgba(20,20,20,.14); background-color: rgba(20,20,20,.045); }
    .project-feature[data-project-visual="art"] .project-feature-mark > strong { color: rgba(20,20,20,.12); }

    .project-feature[data-project-visual="industrial"] {
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 38px),
        linear-gradient(145deg, #172025, #0b0e10 72%);
    }

    .project-feature[data-project-visual="industrial"] .project-interface {
      background: rgba(11,15,17,.88);
    }

    .project-feature[data-project-visual="learning"] {
      background:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
        radial-gradient(circle at 76% 34%, rgba(178,145,255,.25), transparent 38%),
        linear-gradient(145deg, #191522, #0b0c11 72%);
      background-size: 28px 28px, 28px 28px, auto, auto;
    }

    .project-feature[data-project-visual="learning"] .project-architecture {
      border-color: rgba(205,186,255,.3);
      color: rgba(224,214,255,.78);
    }

    .project-feature[data-project-visual="learning"] .project-architecture-flow i {
      background: rgba(178,145,255,.06);
    }

    .project-feature[data-project-visual="learning"] .project-feature-mark > strong {
      color: rgba(178,145,255,.15);
    }

    .process-route li { display: block; position: relative; }

    .process-tab {
      position: relative;
      display: grid;
      width: 100%;
      min-height: inherit;
      grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
      align-items: center;
      padding: 0 8px 0 16px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .process-tab::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 9px;
      height: 6px;
      background: repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 3px);
      opacity: 0;
      transform: translateY(-50%);
    }

    .process-tab span { color: rgba(255,255,255,.64); }
    .process-tab[aria-selected="true"]::before { opacity: 1; }
    .process-tab[aria-selected="true"] span { color: white; }
    .process-tab[aria-selected="true"] strong { color: rgba(255,255,255,.8); }
    .process-tab:focus-visible {
      outline: none;
    }
    .process-tab:focus-visible span { text-decoration: underline 1px rgba(255,255,255,.55); text-underline-offset: 4px; }

    .process-assurance p b {
      display: block;
      margin-bottom: 4px;
      color: rgba(255,255,255,.36);
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .contact-email-row {
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      border-block: 1px solid rgba(255,255,255,.14);
    }

    .contact-email-row .contact-email-action {
      min-width: 0;
      border: 0;
      white-space: nowrap;
    }

    .contact-copy-button {
      min-width: 112px;
      min-height: 44px;
      padding: 0 14px;
      border: 0;
      border-left: 1px solid rgba(255,255,255,.13);
      background: transparent;
      color: rgba(255,255,255,.58);
      font: 650 10px/1 "Onest", Arial, sans-serif;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .contact-copy-button[data-state="copied"] { color: white; }
    .contact-copy-button:focus-visible {
      outline: 1px solid rgba(255,255,255,.42);
      outline-offset: -2px;
    }

    @media (max-width: 760px) {
      .service-option {
        min-height: 0;
        grid-template-columns: 1fr 1fr;
        gap: 5px 12px;
        padding: 10px 0;
      }
      .service-option h3 { grid-column: 1 / -1; }
      .service-option::before { top: 14px; right: 0; left: auto; width: 5px; transform: none; }

      .project-index {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1fr;
      }
      .project-feature { grid-column: 1; grid-row: 2; }
      .project-index-item {
        min-height: 82px;
        padding: 10px 8px;
        border-right: 1px solid rgba(255,255,255,.1);
        border-bottom: 0;
      }
      .project-index-item:last-child { border-right: 0; }
      .project-index-item > span { font-size: 8.5px; }
      .project-index-item h3 { margin: 5px 0 0; font-size: 13px; }
      .project-index-item p { display: none; }
      .project-index-item::before { top: 9px; right: 8px; width: 12px; }

      .process-tab { grid-template-columns: 112px minmax(0, 1fr); }
      .contact-email-row .contact-email-action { font-size: clamp(20px, 5.8vw, 24px); }
      .contact-copy-button { min-width: 80px; padding-inline: 8px; font-size: 10px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .service-option { grid-template-columns: 1fr; padding: 7px 0; }
      .service-option h3 { grid-column: 1; }
      .project-index-item { min-height: 64px; padding: 8px 5px; }
      .project-index-item > span { display: none; }
      .project-index-item h3 { margin: 0; font-size: 11px; line-height: 1.05; }
      .process-route li { min-height: 40px; }
      .process-tab { grid-template-columns: 94px minmax(0, 1fr); padding-left: 12px; }
      .process-assurance p b { font-size: 10px; }
      .contact-email-row .contact-email-action { min-height: 54px; font-size: 20px; }
      .contact-copy-button { min-width: 80px; padding-inline: 5px; font-size: 10px; }
    }

    @media (max-height: 700px) and (min-width: 701px) {
      .service-option { min-height: 54px; }
    }

    @media (max-height: 500px) and (min-width: 701px) {
      .service-option { min-height: 43px; }
      .project-index-item { min-height: 0; padding: 4px 12px; }
      .project-index-item > span { display: none; }
      .project-index-item h3 { margin: 3px 0 0; font-size: 13px; }
      .project-index-item p { display: none; }
      .project-index-item::before { top: 8px; right: 9px; width: 12px; }
      .process-route li { min-height: 40px; }
    }

    @media (max-width: 700px) and (max-height: 590px) and (orientation: landscape) {
      .service-option {
        min-height: 42px;
        grid-template-columns: minmax(140px,.75fr) minmax(0,1fr) minmax(0,1fr);
        gap: 14px;
        padding: 0;
      }
      .service-option h3 { grid-column: auto; }
      .service-option::before { top: 50%; right: auto; left: -10px; transform: translateY(-50%); }

      .project-index {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
      }
      .project-index-item {
        min-height: 0;
        padding: 5px 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
      }
      .project-index-item:last-child { border-bottom: 0; }
      .project-index-item > span,
      .project-index-item p { display: none; }
      .project-index-item h3 { margin: 0; font-size: 10px; }
      .process-route li { min-height: 40px; }
      .process-tab { grid-template-columns: 98px minmax(0, 1fr); padding-left: 12px; }
      .contact-copy-button { min-width: 82px; }
    }

    /* Tariff configurator: editorial controls, one flat visual axis. */
    .service-pricing {
      display: grid;
      min-height: 0;
      grid-template-rows: auto minmax(0, 1fr);
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .tariff-selector {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(14px, 2.4vw, 38px);
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .tariff-option {
      position: relative;
      display: grid;
      min-width: 0;
      min-height: 76px;
      align-content: center;
      gap: 4px;
      padding: 10px 0 12px;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      text-align: left;
    }

    .tariff-option::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      transition: transform .2s ease;
    }

    .tariff-option > span {
      color: rgba(255,255,255,.42);
      font: 650 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .tariff-option strong { overflow: hidden; font-size: clamp(14px, 1.25vw, 19px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
    .tariff-option small { color: rgba(255,255,255,.5); font-size: 10px; }
    .tariff-option[aria-checked="true"]::before { transform: scaleX(1); }
    .tariff-option[aria-checked="true"] > span { color: var(--accent); }
    .tariff-option[aria-checked="true"] strong { color: white; }
    .tariff-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

    .tariff-calculator {
      display: grid;
      min-height: 0;
      grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr);
      gap: clamp(22px, 3vw, 48px);
    }

    .calc-controls {
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(190px, 1.1fr) minmax(145px, .9fr);
      align-items: center;
      gap: clamp(12px, 1.6vw, 26px);
      margin: 0;
      padding: clamp(14px, 1.8vw, 26px) 0;
      border: 0;
    }

    .calc-field--range { grid-column: 1 / -1; }

    .calc-field { display: grid; min-width: 0; gap: 8px; }
    .calc-field > span {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      color: rgba(255,255,255,.5);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .calc-field output { color: white; font-size: 10px; letter-spacing: 0; text-transform: none; }
    .calc-field small { color: rgba(255,255,255,.36); font-size: 9px; line-height: 1.25; }
    .volume-scale {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: -5px;
      color: rgba(255,255,255,.3);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .03em;
    }
    .volume-scale i { font-style: normal; }
    .volume-scale i:nth-child(2) { text-align: center; }
    .volume-scale i:last-child { text-align: right; }

    .calc-field select {
      appearance: none;
      -webkit-appearance: none;
      width: 100%;
      min-height: 42px;
      padding: 0 30px 0 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.22);
      border-radius: 0;
      background-color: transparent;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.5) 50%),
        linear-gradient(135deg, rgba(255,255,255,.5) 50%, transparent 50%);
      background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
      background-repeat: no-repeat;
      background-size: 4px 4px, 4px 4px;
      color: rgba(255,255,255,.82);
      font: 600 11px/1 "Onest", Arial, sans-serif;
    }

    .calc-field select:focus-visible { outline: 1px solid rgba(255,255,255,.55); outline-offset: 2px; }
    .calc-field input[type="range"] {
      appearance: none;
      -webkit-appearance: none;
      width: 100%;
      height: 18px;
      margin: 0;
      accent-color: var(--accent);
      background: transparent;
      cursor: pointer;
    }

    .calc-field input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,.22); }
    .calc-field input[type="range"]::-webkit-slider-thumb {
      width: 14px;
      height: 14px;
      margin-top: -6px;
      border: 2px solid #111;
      border-radius: 50%;
      background: var(--accent);
      -webkit-appearance: none;
    }
    .calc-field input[type="range"]::-moz-range-track { height: 2px; background: rgba(255,255,255,.22); }
    .calc-field input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border: 2px solid #111;
      border-radius: 50%;
      background: var(--accent);
    }

    .calc-field input[type="range"]:focus-visible { outline: 1px solid rgba(255,255,255,.55); outline-offset: 3px; }

    .calc-result {
      display: grid;
      min-width: 0;
      align-content: center;
      gap: 10px;
      padding-left: clamp(18px, 2.2vw, 34px);
      border-left: 1px solid rgba(255,255,255,.12);
    }

    .calc-result-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }

    .calc-result-head span {
      color: rgba(255,255,255,.42);
      font: 650 9px/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .calc-result-head strong {
      color: white;
      font-size: clamp(20px, 2vw, 31px);
      font-weight: 650;
      line-height: .95;
      letter-spacing: -.045em;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .calc-result[data-custom="true"] .calc-result-head strong {
      max-width: 230px;
      font-size: clamp(15px, 1.35vw, 21px);
      line-height: 1.05;
      white-space: normal;
    }

    .estimate-range { display: grid; gap: 4px; }
    .estimate-range-values,
    .estimate-range-scale {
      display: flex;
      justify-content: space-between;
      color: rgba(255,255,255,.5);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .02em;
      font-variant-numeric: tabular-nums;
    }
    .estimate-range-scale { color: rgba(255,255,255,.25); }
    .estimate-range-track { position: relative; height: 6px; overflow: hidden; background: rgba(255,255,255,.075); }
    .estimate-range-track b {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--range-start, 0%);
      width: var(--range-width, 0%);
      background: var(--accent);
      transition: left .22s ease, width .22s ease;
    }
    .calc-result[data-custom="true"] .estimate-range-track b {
      width: calc(100% - var(--range-start, 0%));
      background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px);
    }

    .estimate-breakdown {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 18px;
      padding-block: 8px;
      border-block: 1px solid rgba(255,255,255,.09);
    }
    .estimate-breakdown span,
    .estimate-time { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .estimate-breakdown i,
    .estimate-time span {
      color: rgba(255,255,255,.36);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-style: normal;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .estimate-breakdown b,
    .estimate-time strong { color: rgba(255,255,255,.74); font-size: 9px; font-weight: 650; font-variant-numeric: tabular-nums; }
    .estimate-time strong { text-align: right; }
    .calc-result p { margin: 0; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.3; }

    .modal[data-kind="services"] .services-footer p { max-width: 720px; font-size: 10px; line-height: 1.3; }

    /* Editorial refinement: fewer interface layers, clearer format hierarchy. */
    .about-manifesto {
      position: relative;
      display: block;
      width: 100%;
      color: rgba(255,255,255,.84);
      font-size: clamp(36px, 3.3vw, 60px);
      font-weight: 620;
      line-height: .88;
      letter-spacing: -.062em;
      text-transform: none;
    }

    .about-manifesto span {
      display: block;
      white-space: nowrap;
      animation: about-line-reveal .78s cubic-bezier(.16,.8,.28,1) both;
    }

    .about-manifesto span:nth-child(1) {
      position: relative;
      left: clamp(-20px, -1.5vw, -10px);
      margin: 0 0 .42em 1.15em;
      color: rgba(255,255,255,.44);
      font-size: .48em;
      font-weight: 520;
      letter-spacing: -.035em;
      animation-delay: .4s;
    }

    .about-manifesto span:nth-child(2) {
      color: rgba(255,255,255,.62);
      font-weight: 540;
      animation-delay: .5s;
    }

    .about-manifesto span:nth-child(3) {
      width: fit-content;
      margin: .08em 0 0 .62em;
      color: rgba(255,255,255,.9);
      font-weight: 650;
      animation-delay: .6s;
    }

    @keyframes about-line-reveal {
      from {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        clip-path: inset(0);
        transform: translateY(0);
      }
    }

    .about-inside {
      inset: 18% 8% 18%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 7%;
    }

    @media (max-width: 760px) {
      .about-manifesto { font-size: clamp(30px, 9.2vw, 39px); }
      .about-inside { inset: 18% 7% 20%; padding-left: 4%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .about-manifesto span { animation: none; }
    }

    /* Contact card: a calm invitation to start with an unpolished thought. */
    .contact-signal {
      top: 48%;
      left: clamp(18px, 2.25vw, 42px);
      display: flex;
      width: auto;
      height: auto;
      align-items: baseline;
      justify-content: flex-start;
      gap: .2em;
      color: rgba(255,255,255,.76);
      font-size: clamp(30px, 3vw, 52px);
      line-height: .86;
      letter-spacing: -.07em;
      opacity: 1;
      transform: translateY(-50%);
    }

    .contact-signal::before,
    .contact-signal::after { content: none; }

    .contact-signal > span:first-child {
      color: rgba(255,255,255,.28);
      font-weight: 480;
    }

    .contact-signal > span:nth-child(2) {
      color: rgba(255,255,255,.62);
      font-weight: 650;
    }

    .contact-signal > b {
      width: .11em;
      aspect-ratio: 1;
      margin-left: .04em;
      border-radius: 50%;
      background: var(--accent);
    }

    .contact-copy {
      position: absolute;
      top: 53%;
      right: clamp(18px, 2.25vw, 42px);
      left: clamp(18px, 2.25vw, 42px);
      z-index: 4;
      display: block;
      max-width: none;
      color: rgba(255,255,255,.48);
      line-height: 1.3;
    }

    .contact-copy strong {
      color: rgba(255,255,255,.9);
      font-size: clamp(15px, 1.35vw, 24px);
      font-weight: 580;
      letter-spacing: -.035em;
    }

    @media (max-width: 760px) {
      .contact-signal {
        top: 35%;
        left: 14px;
        font-size: clamp(25px, 7.4vw, 32px);
        transform: translateY(-50%);
      }
      .contact-copy { top: 53%; right: 14px; left: 14px; display: block; }
      .contact-copy strong { font-size: clamp(10px, 3vw, 13px); }
    }

    @media (max-width: 520px) {
      .contact-copy { display: none; }
    }

    .modal-title--single {
      max-width: 960px;
      font-size: clamp(42px, 5vw, 72px);
      line-height: .95;
    }

    .service-pricing { grid-template-rows: auto auto minmax(0, 1fr); }
    .tariff-option strong { white-space: normal; }

    .format-description {
      margin: 0;
      padding: 10px 0 9px;
      color: rgba(255,255,255,.66);
      font-size: 11px;
      line-height: 1.3;
    }

    .calc-result p { max-width: 420px; }

    .project-window-bar { justify-content: space-between; }
    .project-window-bar b { margin-left: 0; color: rgba(255,255,255,.52); }
    .project-map {
      position: absolute;
      inset: 17% 7% 29%;
      z-index: 2;
      display: grid;
      grid-template-columns: auto minmax(12px,1fr) auto minmax(12px,1fr) auto;
      align-items: center;
    }

    .project-map span {
      display: grid;
      min-height: 30px;
      place-items: center;
      padding: 5px;
      border: 1px solid rgba(255,255,255,.17);
      color: rgba(255,255,255,.64);
      font: 650 clamp(5px, .37vw, 7px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .05em;
    }

    .project-map i { height: 1px; background: rgba(255,255,255,.2); }

    .project-architecture {
      position: absolute;
      top: 12%;
      right: 5%;
      z-index: 1;
      width: 56%;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.22);
      color: rgba(255,255,255,.7);
    }

    .project-architecture-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
    }

    .project-feature-mark .project-architecture span {
      position: static;
      color: inherit;
      font-size: inherit;
      letter-spacing: inherit;
    }

    .project-architecture-flow {
      display: grid;
      grid-template-columns: auto minmax(12px,1fr) auto minmax(12px,1fr) auto;
      align-items: center;
      margin-top: clamp(18px, 2.2vw, 32px);
    }

    .project-architecture-flow i {
      display: grid;
      min-height: 38px;
      place-items: center;
      padding: 6px 9px;
      border: 1px solid currentColor;
      font: 650 8px/1.15 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .04em;
      text-align: center;
      text-transform: uppercase;
    }

    .project-architecture-flow b { height: 1px; background: currentColor; opacity: .45; }
    .project-feature[data-project-visual="art"] .project-architecture { border-color: rgba(20,20,20,.24); color: rgba(20,20,20,.66); }

    .project-index-item,
    .project-index-item:nth-child(2),
    .project-index-item:nth-child(3) {
      background: #0b0d0d;
      color: white;
    }

    .project-index-item:nth-child(2) > span,
    .project-index-item:nth-child(2) p { color: rgba(255,255,255,.5); }
    .project-index-item[aria-selected="true"] { background: rgba(255,255,255,.055); }

    .project-contact {
      margin-top: 13px;
      padding: 0 0 3px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.34);
      background: transparent;
      color: white;
      font: 650 11px/1.2 "Onest", Arial, sans-serif;
      cursor: pointer;
    }

    .project-contact:focus-visible { outline: 1px solid rgba(255,255,255,.55); outline-offset: 4px; }

    .project-live-link { display: inline-block; width: fit-content; text-decoration: none; }
    .project-contact[hidden] { display: none; }

    @media (max-width: 760px) {
      .modal-title--single { font-size: clamp(30px, 9vw, 46px); }
      .format-description { padding-block: 8px; font-size: 10px; }
      .project-architecture { top: 10%; width: 64%; }
      .project-architecture-flow { margin-top: 14px; }
      .project-architecture-flow i { min-height: 30px; padding-inline: 4px; font-size: 6px; }
      .project-contact { margin-top: 8px; font-size: 10px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .format-description { display: none; }
      .project-feature-copy p:nth-of-type(2) { display: none; }
      .project-architecture { display: none; }
    }

    @media (max-height: 500px) and (min-width: 701px) {
      .format-description { padding-block: 5px; font-size: 9px; }
      .project-contact { margin-top: 6px; font-size: 9px; }
    }

    /* Social cell alignment and legal note. */
    .tools {
      grid-template-rows: minmax(0, 1fr) auto;
      padding: 7px clamp(8px, .8vw, 14px) 6px;
    }

    .tools > .social-link { grid-row: 1; }

    .social-link {
      align-items: center;
      border-left: 0;
      padding-inline: 4px;
      text-align: center;
    }

    .tools > .social-link--vk,
    .tools > .social-link--telegram { border-left-width: 0; }

    .social-icon { margin-inline: auto; }
    .social-link small { width: 100%; text-align: center; }

    .social-legal-links {
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex;
      min-width: 0;
      min-height: 20px;
      align-items: end;
      justify-content: center;
      gap: 0;
      padding-top: 5px;
      border-top: 0;
    }

    .social-legal-links a {
      display: inline-flex;
      min-height: 15px;
      align-items: center;
      color: rgba(255,255,255,.38);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6.5px, .42vw, 8px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: .025em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
      transition: color .2s ease;
    }

    .social-legal-links a:hover,
    .social-legal-links a:focus-visible { color: var(--ink); }

    .social-legal-links a + a::before {
      content: "•";
      margin: 0 clamp(7px, .65vw, 12px);
      color: rgba(255,255,255,.24);
      font-size: .72em;
      line-height: 1;
      pointer-events: none;
    }

    .instagram-note { cursor: pointer; opacity: 1; }
    .instagram-note small::after { content: " *"; color: var(--accent); }
    .instagram-note:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: -2px; }

    @media (max-width: 700px) {
      .tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr)) clamp(14px, 2.6dvh, 19px);
        gap: 0;
        padding: clamp(2px, .4dvh, 3px) 5px;
      }

      .tools > .social-link--vk { grid-column: 1; grid-row: 1; }
      .tools > .social-link--telegram { grid-column: 2; grid-row: 1; }
      .tools > .social-link--instagram { grid-column: 1; grid-row: 2; }
      .tools > .social-link--dprofile { grid-column: 2; grid-row: 2; }
      .tools .social-link { min-height: 0; }
      .tools .social-icon { width: clamp(10px, 1.7dvh, 15px); margin-bottom: clamp(0px, .1dvh, 1px); }
      .tools .social-link small { font-size: clamp(6.5px, 1.05dvh, 9px); line-height: 1; }
      .social-legal-links { grid-row: 3; min-height: 0; gap: 0; padding-top: 0; align-items: center; }
      .social-legal-links a { min-height: 0; font-size: clamp(5px, .8dvh, 6px); letter-spacing: 0; }
      .social-legal-links a + a::before { margin-inline: clamp(3px, 1vw, 6px); }
    }

    @media (max-width: 360px) {
      .social-legal-links { gap: 0; }
      .social-legal-links a { font-size: 5.5px; }
      .social-legal-links a + a::before { margin-inline: 3px; }
    }

    @media (max-width: 420px) and (max-height: 680px) {
      .tools .social-icon { width: clamp(12px, 2.2dvh, 14px); margin-bottom: 0; }
      .tools .social-link small { display: none; }
    }

    .social-tooltip {
      position: fixed;
      z-index: 90;
      width: min(248px, calc(100vw - 24px));
      padding: 10px 12px;
      border-block: 1px solid rgba(255,255,255,.22);
      border-radius: 1px;
      background: #111;
      color: rgba(255,255,255,.78);
      font-size: 10.5px;
      line-height: 1.35;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .14s ease, transform .14s ease;
    }

    .social-tooltip[data-open="true"] { opacity: 1; transform: translateY(0); }

    @media (max-height: 500px) and (min-width: 701px) {
      .modal-body--services { gap: 6px; }
      .modal[data-kind="services"] .modal-description { display: none; }
      .tariff-option { min-height: 42px; gap: 0; padding-block: 5px; }
      .tariff-option > span,
      .tariff-option small { display: none; }
      .tariff-option strong { font-size: 13px; }
      .tariff-calculator { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 20px; }
      .calc-controls { gap: 10px; padding: 6px 14px 6px 0; }
      .calc-field { gap: 3px; }
      .calc-field > span,
      .calc-field output { font-size: 10px; }
      .calc-field small,
      .calc-result p,
      .estimate-breakdown,
      .volume-scale,
      .modal[data-kind="services"] .services-footer p { display: none; }
      .calc-field select { min-height: 42px; padding-left: 8px; font-size: 10px; }
      .calc-field input[type="range"] { min-height: 42px; height: 42px; }
      .calc-result { gap: 4px; padding-left: 14px; }
      .calc-result-head span { font-size: 8px; }
      .calc-result-head strong { font-size: 21px; }
      .calc-result[data-custom="true"] .calc-result-head strong {
        max-width: 100%;
        font-size: 18px;
        line-height: 1.05;
        overflow-wrap: anywhere;
        white-space: normal;
      }
      .modal[data-kind="services"] .services-footer button { min-height: 40px; }
    }

    @media (max-width: 760px) {
      .tariff-option { min-height: 56px; padding: 7px 8px; }
      .tariff-option > span { font-size: 8px; }
      .tariff-option strong { font-size: 12px; }
      .tariff-option small { font-size: 9px; }
      .tariff-selector { gap: 8px; }
      .tariff-calculator { grid-template-columns: 1fr; }
      .calc-controls { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 0; }
      .calc-field--range { grid-column: 1 / -1; }
      .calc-field { gap: 4px; }
      .calc-field > span,
      .calc-field output { font-size: 9px; }
      .calc-field small { display: none; }
      .calc-field select { min-height: 40px; font-size: 10px; }
      .calc-field input[type="range"] { min-height: 42px; height: 42px; }
      .calc-result {
        gap: 7px;
        padding: 9px 0 0;
        border-top: 1px solid rgba(255,255,255,.12);
        border-left: 0;
      }
      .calc-result-head strong { font-size: 22px; }
      .estimate-breakdown { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .modal-body--services { gap: 7px; }
      .modal[data-kind="services"] .modal-description { display: none; }
      .tariff-option { min-height: 42px; padding: 5px 6px; }
      .tariff-option > span,
      .tariff-option small { display: none; }
      .tariff-option strong { font-size: 10.5px; }
      .calc-controls { gap: 5px 8px; padding: 6px 0; }
      .calc-field input[type="range"] { min-height: 42px; height: 42px; }
      .calc-field select { min-height: 42px; padding-left: 7px; font-size: 10px; }
      .calc-result { gap: 3px 8px; padding-top: 6px; }
      .calc-result-head span { display: none; }
      .calc-result-head strong { font-size: 19px; }
      .calc-result p,
      .estimate-breakdown,
      .volume-scale { display: none; }
      .modal[data-kind="services"] .services-footer button { min-height: 42px; }
    }

    /* Header preferences and the light editorial palette. */
    html[data-theme="light"] {
      color-scheme: light;
      --ink: #171716;
      --muted: rgba(23,23,22,.56);
      --line: rgba(20,20,18,.13);
      --panel: rgba(246,245,240,.9);
    }

    body,
    .card,
    .modal-panel,
    .header-control,
    .social-tooltip {
      transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
    }

    html[data-theme="light"],
    html[data-theme="light"] body {
      background: #ebeae5;
    }

    html[data-theme="light"] body {
      color: var(--ink);
      background:
        radial-gradient(58rem 34rem at 60% 5%, rgba(249,65,55,.075), transparent 68%),
        linear-gradient(145deg, #f3f2ee, #e7e5df);
    }

    html[data-theme="light"] .noise-layer {
      opacity: .035;
      mix-blend-mode: multiply;
    }

    html[data-theme="light"] .hero-logo img {
      filter: brightness(0) drop-shadow(0 0 44px rgba(0,0,0,.03));
      opacity: .9;
    }

    html[data-theme="light"] .brand-caption,
    html[data-theme="light"] .clock,
    html[data-theme="light"] .hero-index,
    html[data-theme="light"] .card-kicker,
    html[data-theme="light"] .tools-caption,
    html[data-theme="light"] .project-copy,
    html[data-theme="light"] .services-copy,
    html[data-theme="light"] .contact-copy,
    html[data-theme="light"] .social-link small,
    html[data-theme="light"] .projects-count .process-note {
      color: rgba(23,23,22,.54);
    }

    html[data-theme="light"] .brand-caption:hover { color: rgba(23,23,22,.84); }

    html[data-theme="light"] .brand-caption[data-decoding="true"] .brand-caption-text {
      color: rgba(23,23,22,.88);
      text-shadow: 0 0 8px rgba(217,51,43,.17);
    }

    html[data-theme="light"] .role[data-timed="true"] .role-text::before {
      border-right-color: rgba(217,51,43,.38);
      color: #d9332b;
    }

    html[data-theme="light"] .header-control {
      border-color: rgba(20,20,18,.16);
      background: rgba(255,255,255,.44);
      color: rgba(20,20,18,.7);
    }

    html[data-theme="light"] .header-control:hover {
      border-color: rgba(20,20,18,.34);
      background: rgba(255,255,255,.8);
      color: #111;
    }

    html[data-theme="light"] .card {
      border-color: rgba(20,20,18,.13);
      background: linear-gradient(180deg, rgba(252,251,247,.96), rgba(235,233,227,.95));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 0 0 1px rgba(20,20,18,.012), 0 16px 44px rgba(48,43,35,.035);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    html[data-theme="light"] .card::before {
      background: linear-gradient(90deg, rgba(20,20,18,.025), transparent 20%, transparent 80%, rgba(20,20,18,.018));
    }

    html[data-theme="light"] .about-manifesto { color: rgba(20,20,18,.88); }
    html[data-theme="light"] .about-manifesto span:nth-child(1) { color: rgba(20,20,18,.45); }
    html[data-theme="light"] .about-manifesto span:nth-child(2) { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .about-manifesto span:nth-child(3) { color: rgba(20,20,18,.9); }
    html[data-theme="light"] .services-visual-caption,
    html[data-theme="light"] .services-visual-output { color: rgba(20,20,18,.46); }
    html[data-theme="light"] .service-flow-path { stroke: rgba(20,20,18,.25); }
    html[data-theme="light"] .service-flow-path--two { stroke: rgba(249,65,55,.64); }
    html[data-theme="light"] .service-flow-node circle { fill: #f5f4ef; stroke: rgba(20,20,18,.42); }
    html[data-theme="light"] .service-flow-node text { fill: rgba(20,20,18,.58); }
    html[data-theme="light"] .service-flow-output rect { fill: rgba(20,20,18,.025); stroke: rgba(20,20,18,.3); }
    html[data-theme="light"] .service-flow-output text { fill: rgba(20,20,18,.82); }
    html[data-theme="light"] .service-flow-output .service-flow-output-note { fill: rgba(20,20,18,.42); }
    @media (hover: hover) and (pointer: fine) {
      html[data-theme="light"] .services:hover .service-flow-path { stroke: rgba(20,20,18,.58); }
      html[data-theme="light"] .services:hover .service-flow-path--two { stroke: var(--accent); }
      html[data-theme="light"] .services:hover .service-flow-node text { fill: rgba(20,20,18,.88); }
    }
    html[data-theme="light"] .arrow { color: rgba(20,20,18,.5); }
    html[data-theme="light"] .contact-signal { color: rgba(20,20,18,.76); }
    html[data-theme="light"] .contact-signal > span:first-child { color: rgba(20,20,18,.3); }
    html[data-theme="light"] .contact-signal > span:nth-child(2) { color: rgba(20,20,18,.66); }
    html[data-theme="light"] .contact-copy strong { color: rgba(20,20,18,.9); }
    html[data-theme="light"] .contact-signal i { background: rgba(20,20,18,.22); }
    html[data-theme="light"] .contact-signal i:nth-child(2) { background: var(--accent); }
    html[data-theme="light"] .projects-count span { color: rgba(20,20,18,.42); }
    html[data-theme="light"] .process-visual i { border-color: rgba(20,20,18,.2); background: rgba(20,20,18,.09); }
    html[data-theme="light"] .process-visual i:first-child { border-color: var(--accent); background: var(--accent); }

    html[data-theme="light"] .tools { background: rgba(243,242,237,.86); }
    html[data-theme="light"] .social-link { border-left-color: rgba(20,20,18,.1); color: rgba(20,20,18,.68); }
    html[data-theme="light"] .social-link .social-icon { color: rgba(20,20,18,.7); }
    html[data-theme="light"] .social-link:hover small,
    html[data-theme="light"] .social-link:focus-visible small { color: #111; }
    html[data-theme="light"] .social-link.is-disabled .social-icon { color: rgba(20,20,18,.62); }
    html[data-theme="light"] .social-link.is-disabled small { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .social-link.is-disabled:hover { border-left-color: rgba(20,20,18,.1); }
    html[data-theme="light"] .social-link.is-disabled:hover .social-icon { color: rgba(20,20,18,.62); }
    html[data-theme="light"] .social-link.is-disabled:hover small { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .social-legal-links { border-top-color: rgba(20,20,18,.1); }
    html[data-theme="light"] .social-legal-links a { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .social-legal-links a + a::before { color: rgba(20,20,18,.28); }
    html[data-theme="light"] .social-legal-links a:hover,
    html[data-theme="light"] .social-legal-links a:focus-visible { color: var(--ink); }

    html[data-theme="light"] .modal-panel,
    html[data-theme="light"] .modal[data-kind="services"] .modal-panel,
    html[data-theme="light"] .modal[data-kind="projects"] .modal-panel,
    html[data-theme="light"] .modal[data-kind="contact"] .modal-panel {
      border-color: rgba(20,20,18,.17);
      background:
        radial-gradient(44rem 28rem at 92% 0%, rgba(249,65,55,.09), transparent 67%),
        #f5f4ef;
      box-shadow: 0 32px 100px rgba(18,18,17,.24), inset 0 1px 0 rgba(255,255,255,.7);
    }

    html[data-theme="light"] .modal-head { border-bottom-color: rgba(20,20,18,.11); }
    html[data-theme="light"] .modal-identity img {
      filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(2690%) hue-rotate(342deg) brightness(104%) contrast(96%);
    }
    html[data-theme="light"] .modal-close {
      border-color: rgba(20,20,18,.18);
      color: rgba(20,20,18,.68);
    }
    html[data-theme="light"] .modal-close:hover { color: white; }
    html[data-theme="light"] .modal-description,
    html[data-theme="light"] .about-editorial blockquote footer,
    html[data-theme="light"] .about-commitments dd,
    html[data-theme="light"] .format-description,
    html[data-theme="light"] .services-footer p,
    html[data-theme="light"] .contact-brief p,
    html[data-theme="light"] .process-route strong,
    html[data-theme="light"] .process-assurance p {
      color: rgba(20,20,18,.62);
    }

    html[data-theme="light"] .scene-label,
    html[data-theme="light"] .contact-brief span { color: rgba(20,20,18,.46); }
    html[data-theme="light"] .about-editorial { border-color: rgba(20,20,18,.13); }
    html[data-theme="light"] .about-legal-footer a {
      border-bottom-color: rgba(20,20,18,.28);
      color: rgba(20,20,18,.66);
    }
    html[data-theme="light"] .about-editorial blockquote,
    html[data-theme="light"] .about-commitments div,
    html[data-theme="light"] .process-route,
    html[data-theme="light"] .process-route li,
    html[data-theme="light"] .process-assurance { border-color: rgba(20,20,18,.13); }
    html[data-theme="light"] .about-editorial blockquote footer button,
    html[data-theme="light"] .contact-change { color: rgba(20,20,18,.74); }

    html[data-theme="light"] .services-footer a,
    html[data-theme="light"] .services-footer button,
    html[data-theme="light"] .contact-primary,
    html[data-theme="light"] .process-assurance a,
    html[data-theme="light"] .process-assurance button {
      background: #181817;
      color: #fff;
    }
    html[data-theme="light"] .services-footer a:hover,
    html[data-theme="light"] .services-footer button:hover,
    html[data-theme="light"] .contact-primary:hover,
    html[data-theme="light"] .process-assurance a:hover,
    html[data-theme="light"] .process-assurance button:hover { background: var(--accent); color: white; }

    html[data-theme="light"] .service-pricing,
    html[data-theme="light"] .tariff-selector,
    html[data-theme="light"] .calc-result { border-color: rgba(20,20,18,.14); }
    html[data-theme="light"] .tariff-option > span,
    html[data-theme="light"] .tariff-option small,
    html[data-theme="light"] .calc-field > span,
    html[data-theme="light"] .calc-field small,
    html[data-theme="light"] .volume-scale,
    html[data-theme="light"] .calc-result-head span,
    html[data-theme="light"] .estimate-breakdown i,
    html[data-theme="light"] .estimate-time span,
    html[data-theme="light"] .calc-result p { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .tariff-option[aria-checked="true"] strong,
    html[data-theme="light"] .calc-field output,
    html[data-theme="light"] .calc-result-head strong,
    html[data-theme="light"] .estimate-breakdown b,
    html[data-theme="light"] .estimate-time strong { color: #171716; }
    html[data-theme="light"] .calc-field select {
      border-color: rgba(20,20,18,.18);
      background-color: transparent;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(20,20,18,.55) 50%),
        linear-gradient(135deg, rgba(20,20,18,.55) 50%, transparent 50%);
      color: #1b1b1a;
    }
    html[data-theme="light"] .calc-field input[type="range"]::-webkit-slider-runnable-track { background: rgba(20,20,18,.22); }
    html[data-theme="light"] .calc-field input[type="range"]::-webkit-slider-thumb { border-color: #f5f4ef; }
    html[data-theme="light"] .calc-field input[type="range"]::-moz-range-track { background: rgba(20,20,18,.22); }
    html[data-theme="light"] .calc-field input[type="range"]::-moz-range-thumb { border-color: #f5f4ef; }
    html[data-theme="light"] .estimate-range-track { background: rgba(20,20,18,.08); }
    html[data-theme="light"] .estimate-range-values { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .estimate-range-scale { color: rgba(20,20,18,.3); }
    html[data-theme="light"] .estimate-breakdown { border-color: rgba(20,20,18,.11); }

    html[data-theme="light"] .project-index-item,
    html[data-theme="light"] .project-index-item:nth-child(2),
    html[data-theme="light"] .project-index-item:nth-child(3) {
      background: #151616;
      color: white;
    }
    html[data-theme="light"] .project-index-item[aria-selected="true"] { background: #242525; }

    html[data-theme="light"] .social-tooltip {
      border-color: rgba(20,20,18,.2);
      background: #f7f6f2;
      color: rgba(20,20,18,.76);
      box-shadow: 0 14px 38px rgba(20,20,18,.12);
    }

    html[lang="en"] .contact-signal::before { content: none; }

    @media (max-width: 700px) {
      .interface-controls { gap: 4px; }
      .header-control { min-width: 29px; height: 25px; padding-inline: 7px; font-size: 8px; }
      .header-control--theme { width: 29px; padding: 0; }
    }

    @media (max-width: 360px) {
      .clock { display: none; }
    }
    /* ProgressProm case: real production media, no decorative overlays. */
    .project-window[data-visual="industrial"] {
      overflow: hidden;
      border-color: rgba(255,255,255,.12);
      background: #111;
    }

    .project-window[data-visual="industrial"] .project-window-screen { inset: 0; }
    .project-window[data-visual="industrial"] .project-window-screen::before,
    .project-window[data-visual="industrial"] .project-window-screen::after,
    .project-window[data-visual="industrial"]::after { display: none; }

    .project-window-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 48%;
      filter: saturate(.82) contrast(1.05);
    }

    .case-media { display: none; min-width: 0; min-height: 0; }

    .project-feature[data-project-visual="industrial"] {
      display: grid;
      height: 100%;
      min-height: 0;
      grid-template-rows: minmax(0, 1fr) auto;
      overflow: hidden;
      border-color: rgba(141,44,242,.28);
      background: #0d0d0e;
    }

    .project-feature[data-project-visual="industrial"]::after,
    .project-feature[data-project-visual="industrial"] > .project-feature-mark { display: none; }
    .project-feature[data-project-visual="industrial"] .case-media { display: grid; grid-template-rows: minmax(0, 1fr) 44px; }

    .case-media-viewport {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: #161617;
    }

    .case-media-slide {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.015);
      transition: opacity .42s ease, transform .62s cubic-bezier(.2,.76,.24,1), visibility 0s linear .45s;
    }

    .case-media-slide.is-active {
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition-delay: 0s;
    }

    .case-media-slide video,
    .case-media-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .case-media-slide:last-child { background: #242326; }
    .case-media-slide:last-child img { object-fit: contain; }
    .case-media-toolbar {
      position: relative;
      z-index: 3;
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 14px 0 16px;
      border-top: 1px solid rgba(255,255,255,.09);
      background: #111112;
    }

    .case-media-meta { display: flex; min-width: 0; align-items: baseline; gap: 12px; }
    .case-media-meta strong,
    .case-media-meta span {
      font: 650 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .case-media-meta strong { flex: 0 0 auto; color: #8d2cf2; }
    .case-media-meta span { overflow: hidden; color: rgba(255,255,255,.62); text-overflow: ellipsis; white-space: nowrap; }

    .case-media-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
    .case-media-controls > button {
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;
      background: transparent;
      color: rgba(255,255,255,.78);
      font: 600 11px/1 Arial, sans-serif;
      cursor: pointer;
    }
    .case-media-controls > button:hover,
    .case-media-controls > button:focus-visible { border-color: rgba(141,44,242,.78); color: white; }

    .project-feature[data-project-visual="industrial"] .project-feature-copy {
      position: relative;
      inset: auto;
      display: grid;
      width: auto;
      grid-template-columns: minmax(150px,.72fr) minmax(250px,1.25fr) auto;
      grid-template-rows: auto auto auto;
      gap: 5px clamp(16px,2vw,30px);
      align-items: end;
      padding: clamp(14px,1.6vw,22px) clamp(16px,2vw,28px);
      border-top: 1px solid rgba(255,255,255,.09);
      background: #0d0d0e;
    }

    .project-feature[data-project-visual="industrial"] .project-feature-copy > span { grid-column: 1; grid-row: 1; align-self: start; }
    .project-feature[data-project-visual="industrial"] .project-feature-copy h3 { grid-column: 1; grid-row: 2; margin: 2px 0 0; font-size: clamp(24px,2.2vw,36px); }
    .project-feature[data-project-visual="industrial"] .project-feature-copy p { max-width: 520px; margin: 0; }
    .project-feature[data-project-visual="industrial"] .project-feature-copy p:nth-of-type(1) { grid-column: 2; grid-row: 1; align-self: start; }
    .project-feature[data-project-visual="industrial"] .project-feature-copy p:nth-of-type(2) { grid-column: 2; grid-row: 2; align-self: start; }

    .case-scope {
      display: flex;
      grid-column: 1 / 3;
      grid-row: 3;
      flex-wrap: wrap;
      gap: 7px;
      margin: 7px 0 0;
      padding: 0;
      list-style: none;
    }
    .case-scope li {
      padding: 5px 8px;
      border: 1px solid rgba(141,44,242,.34);
      color: rgba(255,255,255,.72);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .project-feature-actions {
      display: flex;
      grid-column: 3;
      grid-row: 1 / 4;
      align-self: stretch;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 12px;
      padding-left: 16px;
      border-left: 1px solid rgba(255,255,255,.1);
    }
    .project-feature-actions .project-contact { margin-top: 0; white-space: nowrap; }
    .project-feature-actions .project-live-link { color: white; border-bottom-color: #8d2cf2; }
    .project-feature:not([data-project-visual="industrial"]) .case-scope { display: none; }
    .project-feature:not([data-project-visual="industrial"]) .project-feature-actions { display: block; }
    .project-feature:not([data-project-visual="industrial"]) .project-feature-actions .project-contact { margin-top: 10px; }

    @media (prefers-reduced-motion: reduce) {
      .case-media-slide { transition: none; }
    }

    @media (max-width: 760px) {
      .project-feature[data-project-visual="industrial"] { height: 350px; min-height: 350px; grid-template-rows: 206px minmax(0,1fr); }
      .project-feature[data-project-visual="industrial"] .case-media { grid-template-rows: minmax(0,1fr) 40px; }
      .case-media-toolbar { gap: 8px; padding-inline: 10px 8px; }
      .case-media-meta { gap: 7px; }
      .case-media-meta strong,
      .case-media-meta span { font-size: 7px; }
      .case-media-controls { gap: 5px; }
      .case-media-controls > button { width: 28px; height: 28px; font-size: 10px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-rows: auto auto 1fr;
        gap: 2px 10px;
        padding: 10px 11px;
      }
      .project-feature[data-project-visual="industrial"] .project-feature-copy > span { grid-column: 1; grid-row: 1; font-size: 7px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy h3 { grid-column: 1; grid-row: 2; margin: 0; font-size: 20px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy p:nth-of-type(1) { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy p:nth-of-type(2) { display: block; grid-column: 1; grid-row: 3; font-size: 8px; line-height: 1.25; }
      .project-feature[data-project-visual="industrial"] .case-scope { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions { grid-column: 2; grid-row: 1 / 4; gap: 7px; padding-left: 9px; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions .project-contact { font-size: 8px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .project-feature[data-project-visual="industrial"] { height: 238px; min-height: 238px; grid-template-rows: 148px minmax(0,1fr); }
      .case-media-meta span { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy p { display: none; }
    }

    /* Projects v2: evidence-led case study, manual media and a calm editorial index. */
    .showcase .project-featured-name {
      position: relative;
      z-index: 4;
      width: 38%;
      color: rgba(255,255,255,.94);
      font-size: clamp(17px, 1.55vw, 27px);
      font-weight: 680;
      line-height: 1;
      letter-spacing: -.035em;
    }

    .showcase .project-copy { margin-top: clamp(5px,.7vw,10px); }

    .modal-body--projects { gap: clamp(16px,1.5vw,22px); }
    .projects-scene-head .modal-title {
      max-width: none;
      font-size: clamp(42px,4.15vw,60px);
      line-height: .92;
    }
    .projects-editorial { grid-template-columns: minmax(0,1.72fr) minmax(230px,.48fr); }

    .project-index-wrap {
      display: grid;
      min-width: 0;
      min-height: 0;
      grid-column: 2;
      grid-row: 1;
      grid-template-rows: auto minmax(0,1fr);
      border-top: 1px solid rgba(255,255,255,.13);
    }

    .project-index-label {
      padding: 10px 0 9px;
      color: rgba(255,255,255,.36);
      font: 650 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .project-index {
      display: grid;
      min-height: 0;
      grid-column: auto;
      grid-row: auto;
      grid-template-rows: 1.25fr 1fr 1fr;
      border-block: 0;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .project-index-item,
    .project-index-item:nth-child(2),
    .project-index-item:nth-child(3) {
      position: relative;
      justify-content: center;
      padding: 10px 14px 10px 17px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: transparent;
      color: white;
      opacity: .48;
      transition: opacity .18s ease, background-color .18s ease;
    }

    .project-index-item::before {
      top: 12px;
      right: auto;
      bottom: 12px;
      left: 0;
      width: 2px;
      height: auto;
      background: #ff4138;
    }

    .project-index-item[aria-selected="true"] { background: rgba(255,255,255,.035); opacity: 1; }
    .project-index-item > span,
    .project-index-item:nth-child(2) > span { color: rgba(255,255,255,.42); font-size: 8.5px; }
    .project-index-item[aria-selected="true"] > span { color: #ff5a52; }
    .project-index-item h3 { margin: 6px 0 7px; font-size: clamp(16px,1.3vw,21px); }
    .project-index-item p,
    .project-index-item:nth-child(2) p { color: rgba(255,255,255,.5); font-size: 10.5px; line-height: 1.32; }

    .project-feature[data-project-visual="industrial"] {
      grid-template-rows: minmax(0,1fr) auto;
      border: 1px solid rgba(255,255,255,.13);
      background: #0d0d0e;
    }

    .project-feature[data-project-visual="industrial"] .case-media { grid-template-rows: minmax(0,1fr) 46px; }
    .case-media-slide[data-fit="contain"] { padding: clamp(12px,1.7vw,24px); background: #222124; }
    .case-media-slide[data-fit="contain"] img { object-fit: contain; }

    .case-media-toolbar { padding-inline: 17px 10px; background: #101011; }
    .case-media-meta strong { color: #ff5149; }
    .case-media-meta strong,
    .case-media-meta span { font-size: 9px; }
    .case-media-controls { gap: 6px; }
    .case-media-controls > button {
      width: 34px;
      height: 34px;
      border-radius: 0;
      border-color: rgba(255,255,255,.14);
      font-size: 14px;
    }
    .case-media-controls > button:hover,
    .case-media-controls > button:focus-visible { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }

    .project-feature[data-project-visual="industrial"] .project-feature-copy {
      grid-template-columns: minmax(170px,.68fr) minmax(300px,1.3fr) minmax(175px,auto);
      grid-template-rows: auto;
      gap: clamp(16px,2vw,30px);
      align-items: stretch;
      padding: clamp(14px,1.55vw,21px) clamp(16px,1.9vw,26px);
    }

    .project-case-heading,
    .project-case-story { min-width: 0; }
    .project-feature[data-project-visual="industrial"] .project-case-heading {
      display: flex;
      flex-direction: column;
      grid-column: 1;
      grid-row: 1;
      justify-content: space-between;
    }
    .project-feature[data-project-visual="industrial"] .project-case-heading > span {
      color: #ff5a52;
      font: 700 8.5px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .project-feature[data-project-visual="industrial"] .project-feature-copy h3 {
      margin: 8px 0 10px;
      font-size: clamp(24px,2vw,33px);
      line-height: .95;
    }
    .project-feature[data-project-visual="industrial"] .case-context {
      margin-top: auto;
      color: rgba(255,255,255,.42);
      font: 600 8.5px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .project-feature[data-project-visual="industrial"] .project-case-story {
      display: grid;
      grid-column: 2;
      grid-row: 1;
      align-content: start;
      gap: 8px;
    }
    .project-feature[data-project-visual="industrial"] .project-case-story p {
      display: grid;
      max-width: none;
      grid-template-columns: 72px minmax(0,1fr);
      gap: 10px;
      margin: 0;
      color: rgba(255,255,255,.64);
      font-size: 10.5px;
      line-height: 1.38;
    }
    .project-feature[data-project-visual="industrial"] .project-case-story p b {
      color: rgba(255,255,255,.92);
      font: 700 8.5px/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .project-feature[data-project-visual="industrial"] .project-case-story .case-scope {
      display: block;
      padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.46);
      font: 650 8.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .project-feature-actions {
      grid-column: 3;
      grid-row: 1;
      justify-content: center;
      gap: 14px;
      padding-left: clamp(14px,1.6vw,22px);
    }
    .project-feature-actions .project-contact { font-size: 9.5px; white-space: normal; }
    .project-feature-actions .project-primary-action {
      width: 100%;
      margin: 0;
      padding: 12px 13px;
      border: 1px solid #ff4b43;
      background: #ff4b43;
      color: #0b0b0c;
      font-weight: 760;
      text-align: left;
    }
    .project-feature-actions .project-primary-action:hover,
    .project-feature-actions .project-primary-action:focus-visible { background: #ff625b; border-color: #ff625b; }
    .project-feature-actions .project-live-link { align-self: flex-start; color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.28); }

    .project-feature:not([data-project-visual="industrial"]) .project-case-heading,
    .project-feature:not([data-project-visual="industrial"]) .project-case-story { display: contents; }
    .project-feature:not([data-project-visual="industrial"]) .case-context,
    .project-feature:not([data-project-visual="industrial"]) .case-scope { display: none; }
    .project-feature:not([data-project-visual="industrial"]) .project-feature-actions .project-primary-action {
      width: auto;
      padding: 0 0 4px;
      border: 0;
      border-bottom: 1px solid var(--accent);
      background: transparent;
      color: inherit;
    }

    html[data-theme="light"] .project-index-wrap,
    html[data-theme="light"] .project-index { border-color: rgba(20,20,18,.16); }
    html[data-theme="light"] .project-index-item,
    html[data-theme="light"] .project-index-item:nth-child(2),
    html[data-theme="light"] .project-index-item:nth-child(3) { color: #181818; border-color: rgba(20,20,18,.13); }
    html[data-theme="light"] .project-index-item[aria-selected="true"] { background: rgba(20,20,18,.055); }
    html[data-theme="light"] .project-index-item > span,
    html[data-theme="light"] .project-index-item:nth-child(2) > span,
    html[data-theme="light"] .project-index-item p,
    html[data-theme="light"] .project-index-item:nth-child(2) p { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .project-index-label { color: rgba(20,20,18,.42); }

    @media (max-width: 760px) {
      .showcase .project-featured-name { width: 40%; font-size: 15px; }
      .projects-scene-head .modal-title { font-size: 34px; line-height: .95; }
      .projects-editorial { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 9px; }
      .projects-editorial > .project-feature { grid-column: 1; grid-row: 1; }
      .project-index-wrap { grid-column: 1; grid-row: 2; grid-template-rows: minmax(0,1fr); border-top: 0; }
      .project-index-label { display: none; }
      .project-index { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr; border-top: 1px solid rgba(255,255,255,.13); }
      .project-index-item,
      .project-index-item:nth-child(2),
      .project-index-item:nth-child(3) {
        min-height: 64px;
        padding: 9px 8px 8px 11px;
        border-right: 1px solid rgba(255,255,255,.1);
        border-bottom: 0;
      }
      .project-index-item::before { inset: 8px auto 8px 0; }
      .project-index-item > span,
      .project-index-item:nth-child(2) > span { font-size: 8px; }
      .project-index-item h3 { margin: 5px 0 0; font-size: 12.5px; line-height: 1; }
      .project-index-item p { display: none; }

      .project-feature[data-project-visual="industrial"] {
        height: clamp(280px,48dvh,350px);
        min-height: 0;
        grid-template-rows: minmax(0,1fr) auto;
      }
      .project-feature[data-project-visual="industrial"] .case-media { grid-template-rows: minmax(0,1fr) 40px; }
      .case-media-toolbar { padding-inline: 11px 6px; }
      .case-media-meta { gap: 7px; }
      .case-media-meta strong,
      .case-media-meta span { font-size: 8px; }
      .case-media-controls > button { width: 40px; height: 34px; font-size: 13px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy {
        grid-template-columns: minmax(0,1fr) minmax(120px,.78fr);
        grid-template-rows: auto auto;
        gap: 7px 12px;
        padding: 10px 11px;
      }
      .project-feature[data-project-visual="industrial"] .project-case-heading { grid-column: 1; grid-row: 1; }
      .project-feature[data-project-visual="industrial"] .project-case-heading > span { font-size: 8px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy h3 { margin: 5px 0 4px; font-size: 20px; }
      .project-feature[data-project-visual="industrial"] .case-context { font-size: 8px; }
      .project-feature[data-project-visual="industrial"] .project-case-story { grid-column: 1; grid-row: 2; gap: 0; }
      .project-feature[data-project-visual="industrial"] .project-case-story p:first-child,
      .project-feature[data-project-visual="industrial"] .project-case-story .case-scope { display: none; }
      .project-feature[data-project-visual="industrial"] .project-case-story p { display: block; font-size: 10px; line-height: 1.3; }
      .project-feature[data-project-visual="industrial"] .project-case-story p b { display: block; margin-bottom: 2px; font-size: 8px; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions { grid-column: 2; grid-row: 1 / 3; gap: 9px; padding-left: 10px; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions .project-contact { font-size: 9px; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions .project-primary-action { padding: 10px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .project-feature[data-project-visual="industrial"] { height: 250px; min-height: 0; grid-template-rows: minmax(0,1fr) auto; }
      .project-feature[data-project-visual="industrial"] .project-case-story { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions { grid-row: 1; }
      .project-feature[data-project-visual="industrial"] .case-context { display: none; }
      .case-media-meta span { display: block; }
    }

    /* Projects v3: one cinematic layer instead of media + description panels. */
    .modal-body--projects {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      overflow: hidden;
      padding: clamp(16px, 2.1vw, 28px) clamp(18px, 2.8vw, 40px) clamp(18px, 2.5vw, 34px);
    }

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

    .projects-editorial {
      height: 100%;
      min-height: 0;
      grid-template-columns: minmax(0, 1.76fr) minmax(214px, .46fr);
      gap: clamp(14px, 1.6vw, 24px);
    }

    .project-index-wrap {
      align-self: stretch;
      border-top-color: rgba(255,255,255,.15);
    }

    .project-index-label { padding-top: 8px; }
    .project-index-item[aria-selected="true"] { background: transparent; }
    .project-index-item:hover { opacity: .78; }
    .project-index-item[aria-selected="true"]:hover { opacity: 1; }

    .project-feature[data-project-visual="industrial"] {
      position: relative;
      isolation: isolate;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border-color: rgba(255,255,255,.16);
      background: #080809;
    }

    .project-feature[data-project-visual="industrial"]::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      pointer-events: none;
      background:
        linear-gradient(0deg, rgba(5,5,6,.98) 0%, rgba(5,5,6,.88) 17%, rgba(5,5,6,.58) 34%, rgba(5,5,6,.13) 60%, transparent 76%),
        linear-gradient(90deg, rgba(5,5,6,.64) 0%, rgba(5,5,6,.22) 48%, transparent 75%);
    }

    .project-feature[data-project-visual="industrial"] .case-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      min-width: 0;
      min-height: 0;
    }

    .project-feature[data-project-visual="industrial"] .case-media-viewport {
      position: absolute;
      inset: 0;
      background: #121214;
    }

    .project-feature[data-project-visual="industrial"] .case-media-slide video,
    .project-feature[data-project-visual="industrial"] .case-media-slide img {
      object-position: center 48%;
    }

    .project-feature[data-project-visual="industrial"] .case-media-toolbar {
      position: absolute;
      top: clamp(11px, 1.2vw, 17px);
      right: clamp(11px, 1.2vw, 17px);
      bottom: auto;
      z-index: 4;
      width: min(420px, calc(100% - 22px));
      min-height: 40px;
      padding: 4px 4px 4px 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(6,6,7,.72);
    }

    .project-feature[data-project-visual="industrial"] .case-media-meta { gap: 9px; }
    .project-feature[data-project-visual="industrial"] .case-media-meta strong,
    .project-feature[data-project-visual="industrial"] .case-media-meta span { font-size: 8.5px; }
    .project-feature[data-project-visual="industrial"] .case-media-meta span { color: rgba(255,255,255,.76); }
    .case-media-timeline {
      display: grid;
      width: 92px;
      flex: 0 0 92px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
    }
    .case-media-timeline button {
      position: relative;
      width: 100%;
      height: 32px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .case-media-timeline button::before,
    .case-media-timeline button::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      height: 2px;
      transform: translateY(-50%);
    }
    .case-media-timeline button::before { background: rgba(255,255,255,.22); }
    .case-media-timeline button::after {
      background: rgba(255,255,255,.76);
      transform: translateY(-50%) scaleX(0);
      transform-origin: left center;
      transition: transform .22s ease, background-color .2s ease;
    }
    .case-media-timeline button.is-complete::after,
    .case-media-timeline button[aria-current="true"]::after { transform: translateY(-50%) scaleX(1); }
    .case-media-timeline button[aria-current="true"]::after { background: #ff5149; }
    .case-media-timeline button:hover::after,
    .case-media-timeline button:focus-visible::after { background: white; transform: translateY(-50%) scaleX(1); }
    .case-media-timeline button:focus-visible { outline: 1px solid rgba(255,255,255,.54); outline-offset: 1px; }
    .project-feature[data-project-visual="industrial"] .case-media-controls > button {
      width: 34px;
      height: 32px;
      border: 0;
      border-left: 1px solid rgba(255,255,255,.16);
    }

    .project-feature[data-project-visual="industrial"] .project-feature-copy {
      position: absolute;
      inset: auto 0 0;
      z-index: 3;
      display: grid;
      width: 100%;
      grid-template-columns: minmax(168px, .72fr) minmax(250px, 1.28fr) minmax(166px, .58fr);
      grid-template-rows: auto;
      gap: clamp(16px, 2vw, 30px);
      align-items: end;
      padding: clamp(22px, 2.4vw, 34px);
      border: 0;
      background: transparent;
      text-shadow: 0 1px 18px rgba(0,0,0,.38);
    }

    .project-feature[data-project-visual="industrial"] .project-case-heading {
      grid-column: 1;
      grid-row: 1;
      justify-content: flex-end;
    }

    .project-feature[data-project-visual="industrial"] .project-case-heading > span { color: #ff5a52; }
    .project-feature[data-project-visual="industrial"] .project-feature-copy h3 {
      margin: 9px 0 10px;
      font-size: clamp(26px, 2.25vw, 38px);
    }
    .project-feature[data-project-visual="industrial"] .case-context { margin-top: 0; color: rgba(255,255,255,.62); }

    .project-feature[data-project-visual="industrial"] .project-case-story {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      gap: 9px;
    }

    .project-feature[data-project-visual="industrial"] .project-case-story p {
      grid-template-columns: 64px minmax(0,1fr);
      gap: 11px;
      color: rgba(255,255,255,.76);
      font-size: 11px;
      line-height: 1.42;
    }

    .project-feature[data-project-visual="industrial"] .project-case-story p b { color: rgba(255,255,255,.98); }
    .project-feature[data-project-visual="industrial"] .project-case-story .case-scope { display: none; }

    .project-feature[data-project-visual="industrial"] .project-feature-actions {
      grid-column: 3;
      grid-row: 1;
      align-self: end;
      justify-content: flex-end;
      gap: 12px;
      padding: 0;
      border: 0;
    }

    .project-feature[data-project-visual="industrial"] .project-feature-actions .project-primary-action {
      padding: 12px 13px;
      color: #0a0a0b;
      text-align: center;
    }

    .project-feature[data-project-visual="industrial"] .project-feature-actions .project-live-link {
      align-self: center;
      color: rgba(255,255,255,.88);
    }

    /* The main projects tile uses the same full-bleed evidence-first language. */
    .showcase .project-window[data-visual="industrial"] {
      inset: 0;
      border: 0;
      border-radius: inherit;
    }

    .showcase .project-window[data-visual="industrial"] .project-window-screen { inset: 0; }
    .showcase .project-window[data-visual="industrial"] .project-window-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(6,6,7,.96) 0%, rgba(6,6,7,.72) 34%, rgba(6,6,7,.16) 72%, transparent),
        linear-gradient(0deg, rgba(6,6,7,.9) 0%, rgba(6,6,7,.16) 56%, transparent 76%);
    }

    .showcase .card-inner {
      z-index: 4;
      pointer-events: none;
    }
    .showcase .project-featured-name,
    .showcase .project-copy,
    .showcase .card-title-row { width: min(43%, 410px); }
    .showcase .project-copy { max-width: 360px; color: rgba(255,255,255,.72); }

    html[data-theme="light"] .showcase .card-kicker,
    html[data-theme="light"] .showcase .project-featured-name,
    html[data-theme="light"] .showcase .card-label,
    html[data-theme="light"] .showcase .arrow { color: rgba(255,255,255,.96); }
    html[data-theme="light"] .showcase .project-copy { color: rgba(255,255,255,.74); }
    html[data-theme="light"] .project-index-item,
    html[data-theme="light"] .project-index-item:nth-child(2),
    html[data-theme="light"] .project-index-item:nth-child(3) {
      background: transparent;
      color: #181818;
    }
    html[data-theme="light"] .project-index-item[aria-selected="true"] { background: rgba(20,20,18,.045); }
    html[data-theme="light"] .project-index-item > span,
    html[data-theme="light"] .project-index-item:nth-child(2) > span,
    html[data-theme="light"] .project-index-item:nth-child(3) > span,
    html[data-theme="light"] .project-index-item p,
    html[data-theme="light"] .project-index-item:nth-child(2) p,
    html[data-theme="light"] .project-index-item:nth-child(3) p { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .project-index-item[aria-selected="true"] > span { color: #e84038; }

    @media (max-width: 760px) {
      .modal-body--projects {
        height: 100%;
        padding: 12px 13px 14px;
      }

      .projects-editorial { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 8px; }
      .projects-editorial > .project-feature { min-height: 0; }

      .project-feature[data-project-visual="industrial"] { height: 100%; min-height: 0; }
      .project-feature[data-project-visual="industrial"]::after {
        background:
          linear-gradient(0deg, rgba(5,5,6,.99) 0%, rgba(5,5,6,.9) 24%, rgba(5,5,6,.5) 48%, transparent 75%),
          linear-gradient(90deg, rgba(5,5,6,.5), transparent 78%);
      }

      .project-feature[data-project-visual="industrial"] .case-media-toolbar {
        top: 9px;
        right: 9px;
        width: min(360px, calc(100% - 18px));
        min-height: 42px;
      }
      .case-media-timeline { width: 76px; flex-basis: 76px; }
      .project-feature[data-project-visual="industrial"] .case-media-controls > button { width: 40px; height: 34px; }

      .project-feature[data-project-visual="industrial"] .project-feature-copy {
        grid-template-columns: minmax(0,1fr) minmax(142px,.55fr);
        grid-template-rows: auto auto;
        gap: 8px 14px;
        padding: 15px;
      }
      .project-feature[data-project-visual="industrial"] .project-case-heading { grid-column: 1; grid-row: 1; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy h3 { margin: 6px 0 5px; font-size: 24px; }
      .project-feature[data-project-visual="industrial"] .case-context { font-size: 8px; }
      .project-feature[data-project-visual="industrial"] .project-case-story { grid-column: 1; grid-row: 2; }
      .project-feature[data-project-visual="industrial"] .project-case-story p:first-child { display: none; }
      .project-feature[data-project-visual="industrial"] .project-case-story p { display: block; font-size: 10.5px; line-height: 1.32; }
      .project-feature[data-project-visual="industrial"] .project-case-story p b { display: block; margin-bottom: 3px; font-size: 8px; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions {
        grid-column: 2;
        grid-row: 1 / 3;
        gap: 10px;
      }
      .project-feature[data-project-visual="industrial"] .project-feature-actions .project-primary-action { padding: 11px 9px; font-size: 9px; }

      .showcase .project-window[data-visual="industrial"] { inset: 0; }
      .showcase .project-featured-name,
      .showcase .project-copy,
      .showcase .card-title-row { width: 48%; }
    }

    @media (max-width: 520px) {
      .project-feature[data-project-visual="industrial"] .case-media-meta span { display: none; }
      .project-feature[data-project-visual="industrial"] .case-media-toolbar { width: auto; }
      .case-media-timeline { width: 64px; flex-basis: 64px; gap: 3px; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy { grid-template-columns: minmax(0,1fr) 126px; padding: 12px; }
      .project-feature[data-project-visual="industrial"] .case-context,
      .project-feature[data-project-visual="industrial"] .project-case-story { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions { grid-row: 1; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions .project-live-link { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy h3 { font-size: 22px; }
    }

    @media (max-width: 420px) and (max-height: 640px) and (orientation: portrait) {
      .modal-body--projects { height: 100%; }
      .project-feature[data-project-visual="industrial"] { height: 100%; }
      .project-feature[data-project-visual="industrial"] .project-case-story { display: none; }
      .project-feature[data-project-visual="industrial"] .project-feature-actions { grid-row: 1; }
    }

    /* Projects v3.1: compact homepage viewport and a real LMS preview. */
    .showcase .project-window[data-visual] {
      inset: clamp(18px,1.5vw,26px) clamp(18px,1.7vw,30px) clamp(24px,2vw,34px) 49%;
      z-index: 3;
      pointer-events: auto;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: clamp(9px,.85vw,14px);
      background: #0a0a0b;
      box-shadow: 0 18px 46px rgba(0,0,0,.28);
      transition: border-color .24s ease, background-color .24s ease;
    }

    .showcase .project-window[data-visual] .project-window-bar {
      height: clamp(20px,1.55vw,26px);
      background: rgba(12,12,13,.96);
    }

    .showcase .project-window[data-visual] .project-window-bar b { margin-left: auto; }
    .showcase .project-window[data-visual] .project-window-screen {
      inset: clamp(20px,1.55vw,26px) 0 0;
      opacity: 1;
      transform: scale(1);
      transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    }

    .showcase .project-window[data-visual] .project-window-screen::after { content: none; display: none; }
    .showcase .project-window[data-visual]::after { display: none; }
    .showcase .project-window.is-changing .project-window-screen { opacity: 0; transform: scale(.985); }

    .showcase .project-window-video {
      position: absolute;
      inset: 0;
      opacity: 1;
      transition: opacity .2s ease;
    }

    .showcase .project-window:not([data-visual="industrial"]) .project-window-video { opacity: 0; }
    .showcase .project-window[data-visual="industrial"] .project-window-screen > strong,
    .showcase .project-window[data-visual="industrial"] .project-window-screen > small { display: none; }

    .showcase .project-window[data-visual="learning"] .project-window-screen {
      background:
        linear-gradient(rgba(178,145,255,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(178,145,255,.11) 1px, transparent 1px),
        radial-gradient(circle at 72% 35%, rgba(178,145,255,.5), transparent 32%),
        linear-gradient(145deg,#171226,#08070d 72%);
      background-size: 18px 18px,18px 18px,auto,auto;
    }

    .showcase .project-window[data-visual="learning"] .project-window-screen > strong,
    .showcase .project-window[data-visual="platform"] .project-window-screen > strong {
      display: block;
      color: rgba(255,255,255,.9);
      font-size: clamp(35px,4vw,66px);
    }

    .showcase .project-window[data-visual="learning"] .project-window-screen > small,
    .showcase .project-window[data-visual="platform"] .project-window-screen > small { display: block; }

    .showcase .project-featured-name,
    .showcase .project-copy,
    .showcase .card-title-row { width: min(42%, 390px); }

    html[data-theme="light"] .showcase .card-kicker,
    html[data-theme="light"] .showcase .project-featured-name,
    html[data-theme="light"] .showcase .card-label,
    html[data-theme="light"] .showcase .arrow { color: #181818; }
    html[data-theme="light"] .showcase .project-copy { color: rgba(20,20,18,.62); }

    html[data-theme="light"] .showcase .project-window[data-visual] {
      border-color: rgba(20,20,18,.16);
      background: #f2f0ec;
      box-shadow: 0 18px 46px rgba(54,48,42,.12);
    }

    html[data-theme="light"] .showcase .project-window[data-visual] .project-window-bar {
      border-bottom-color: rgba(20,20,18,.1);
      background: rgba(244,242,237,.97);
    }

    html[data-theme="light"] .showcase .project-window[data-visual] .project-window-bar i {
      background: rgba(20,20,18,.24);
    }

    html[data-theme="light"] .showcase .project-window[data-visual] .project-window-bar i:first-child {
      background: var(--accent);
    }

    html[data-theme="light"] .showcase .project-window[data-visual] .project-window-bar b {
      color: rgba(20,20,18,.62);
    }

    html[data-theme="light"] .project-window .project-cycle-meter {
      background: rgba(20,20,18,.1);
    }

    .project-window .project-cycle-meter {
      position: absolute;
      right: -1px;
      bottom: -1px;
      left: -1px;
      z-index: 8;
      height: 3px;
      overflow: hidden;
      background: rgba(255,255,255,.1);
      pointer-events: none;
    }

    .project-cycle-meter i {
      display: block;
      width: 100%;
      height: 100%;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left center;
    }

    .showcase.is-cycle-running .project-cycle-meter i { animation: featured-project-cycle 7s linear forwards; }
    .showcase.is-cycle-running.is-cycle-paused .project-cycle-meter i,
    .showcase.is-cycle-running .project-window:hover .project-cycle-meter i,
    .showcase.is-cycle-running:focus-visible .project-cycle-meter i { animation-play-state: paused; }
    @keyframes featured-project-cycle { to { transform: scaleX(1); } }

    .lms-live-preview { display: none; }

    .project-feature[data-project-visual="learning"] {
      isolation: isolate;
      overflow: hidden;
      background: #f3f1fb;
    }

    .project-feature[data-project-visual="learning"] .lms-live-preview {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      overflow: hidden;
      background: linear-gradient(145deg,#f7f5ff,#e9e4f8);
    }

    .lms-live-preview-bar {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 2;
      display: flex;
      height: 34px;
      align-items: center;
      gap: 5px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(18,15,26,.12);
      background: rgba(247,245,251,.96);
      color: rgba(20,17,28,.5);
    }

    .lms-live-preview-bar i {
      width: 5px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(20,17,28,.22);
    }
    .lms-live-preview-bar i:first-child { background: #b291ff; }
    .lms-live-preview-bar b,
    .lms-live-preview-bar span {
      font: 650 8px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .lms-live-preview-bar b { margin-left: 7px; }
    .lms-live-preview-bar span { margin-left: auto; color: #6f42d9; }

    .lms-live-preview img {
      position: absolute;
      top: 34px;
      left: 0;
      width: 100%;
      height: calc(100% - 34px);
      object-fit: cover;
      object-position: center top;
      background: #f7f6fa;
    }

    .project-feature[data-project-visual="learning"]::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      pointer-events: none;
      background:
        linear-gradient(0deg,rgba(7,7,9,.98) 0%,rgba(7,7,9,.9) 22%,rgba(7,7,9,.54) 43%,transparent 72%),
        linear-gradient(90deg,rgba(7,7,9,.42),transparent 68%);
    }

    .project-feature[data-project-visual="learning"] > .project-feature-mark { display: none; }
    .project-feature[data-project-visual="learning"] .project-feature-copy {
      z-index: 3;
      width: min(660px,76%);
      color: white;
      text-shadow: 0 1px 18px rgba(0,0,0,.4);
    }
    .project-feature[data-project-visual="learning"] .project-case-heading > span { color: #c8adff; }
    .project-feature[data-project-visual="learning"] .project-feature-copy h3,
    .project-feature[data-project-visual="learning"] .project-feature-copy p b,
    .project-feature[data-project-visual="learning"] .project-feature-actions { color: white; }
    .project-feature[data-project-visual="learning"] .project-feature-copy p { color: rgba(255,255,255,.78); }
    .project-feature[data-project-visual="learning"] .project-feature-actions .project-primary-action { color: white; }
    html[data-theme="light"] .project-feature[data-project-visual="learning"] .project-feature-copy h3,
    html[data-theme="light"] .project-feature[data-project-visual="learning"] .project-feature-copy p b,
    html[data-theme="light"] .project-feature[data-project-visual="learning"] .project-feature-actions { color: white; }

    @media (prefers-reduced-motion: reduce) {
      .showcase.is-cycle-running .project-cycle-meter i { animation: none; transform: scaleX(1); }
      .showcase .project-window[data-visual] .project-window-screen { transition: none; }
    }

    @media (max-width:760px) {
      .showcase .project-window[data-visual] { inset: 24px 12px 24px 47%; }
      .showcase .project-featured-name,
      .showcase .project-copy,
      .showcase .card-title-row { width: 43%; }
      .projects-editorial > .project-feature { height: 100%; min-height: 0; }
      .lms-live-preview img { object-position: 35% top; }
      .project-feature[data-project-visual="learning"] .project-feature-copy { width: 82%; }
    }

    @media (max-width:520px) {
      .project-feature[data-project-visual="learning"] .project-feature-copy { width: 88%; }
      .project-feature[data-project-visual="learning"] .project-case-story { display: none; }
      .lms-live-preview img { object-position: 32% top; }
    }

    /* Projects v3.2: a clearer, quieter project index at every viewport. */
    .project-index-item {
      opacity: .68;
      transition: opacity .2s ease, background-color .2s ease, color .2s ease;
    }

    .project-index-item:hover,
    .project-index-item:focus-visible { opacity: .9; }
    .project-index-item[aria-selected="true"] { opacity: 1; }
    .project-index-item:not([aria-selected="true"]) h3 { color: rgba(255,255,255,.82); }
    .project-index-item:not([aria-selected="true"]) p { color: rgba(255,255,255,.58); }

    html[data-theme="light"] .project-index-item:not([aria-selected="true"]) h3 { color: rgba(20,20,18,.78); }
    html[data-theme="light"] .project-index-item:not([aria-selected="true"]) p { color: rgba(20,20,18,.55); }

    @media (min-width: 761px) and (max-height: 760px) {
      .modal-body--projects { padding-block: 13px 16px; }
      .project-index-item { padding-block: 8px; }
      .project-index-item p { font-size: 9px; line-height: 1.35; }
      .project-feature[data-project-visual="industrial"] .project-feature-copy { padding: 19px; }
    }

    /* Services v4: an editorial capability field instead of a process diagram. */
    .services-visual.service-atlas {
      top: 50%;
      right: clamp(20px, 2.8vw, 46px);
      display: block;
      width: min(49%, 500px);
      height: clamp(176px, 19vw, 232px);
      transform: translateY(-50%);
      opacity: .94;
      isolation: isolate;
    }

    .service-atlas .services-visual-caption {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      color: rgba(255,255,255,.38);
      font-size: 8px;
    }

    .service-atlas-lines {
      position: absolute;
      inset: 10px 0 4px;
      width: 100%;
      height: calc(100% - 14px);
      overflow: visible;
    }

    .service-atlas-line {
      fill: none;
      stroke: rgba(255,255,255,.2);
      stroke-width: .8;
      stroke-dasharray: 1 8;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
      animation: service-atlas-flow 9s linear infinite;
      transition: stroke .25s ease, opacity .25s ease;
    }

    .service-atlas-line:nth-child(2n) { animation-direction: reverse; animation-duration: 12s; }
    .service-atlas-ring {
      fill: rgba(8,8,9,.72);
      stroke: rgba(255,255,255,.22);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }
    .service-atlas-pulse {
      fill: none;
      stroke: rgba(255,81,73,.5);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
      transform-box: fill-box;
      transform-origin: center;
      animation: service-atlas-pulse 3.6s ease-in-out infinite;
    }

    .service-atlas .service-atlas-node {
      position: absolute;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 !important;
      color: rgba(255,255,255,.54);
      font: 680 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .055em;
      text-transform: uppercase;
      -webkit-text-stroke: 0 transparent;
      transform: none;
      animation: service-atlas-node 8s steps(1,end) infinite;
      transition: color .2s ease, opacity .2s ease;
    }

    .service-atlas-node i {
      color: rgba(255,81,73,.82);
      font: inherit;
      font-size: 7px;
      font-style: normal;
    }
    .service-atlas-node b { font: inherit; white-space: nowrap; }
    .service-atlas-node--1 { top: 17%; left: 0; animation-delay: 0s; }
    .service-atlas-node--2 { top: 5%; left: 31%; animation-delay: -1s; }
    .service-atlas-node--3 { top: 17%; right: 0; animation-delay: -2s; }
    .service-atlas-node--4 { top: 48%; left: 0; animation-delay: -3s; }
    .service-atlas-node--5 { top: 48%; right: 0; animation-delay: -4s; }
    .service-atlas-node--6 { bottom: 13%; left: 0; animation-delay: -5s; }
    .service-atlas-node--7 { bottom: 2%; left: 33%; animation-delay: -6s; }
    .service-atlas-node--8 { right: 0; bottom: 13%; animation-delay: -7s; }

    .service-atlas .service-atlas-core {
      position: absolute;
      top: 51%;
      left: 50%;
      z-index: 3;
      display: grid;
      width: clamp(70px, 7vw, 88px);
      aspect-ratio: 1;
      place-content: center;
      margin: 0;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
      background: radial-gradient(circle at 52% 48%, rgba(255,81,73,.12), rgba(8,8,9,.9) 64%);
      color: rgba(255,255,255,.88);
      text-align: center;
      -webkit-text-stroke: 0 transparent;
      transform: translate(-50%,-50%);
      transition: border-color .25s ease, background-color .25s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    }
    .service-atlas-core b {
      font: 720 10px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
    }
    .service-atlas-core small {
      margin-top: 6px;
      color: rgba(255,255,255,.38);
      font: 650 6px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .service-atlas .services-visual-output {
      position: absolute;
      right: 0;
      bottom: 0;
      color: rgba(255,255,255,.44);
      font-size: 7px;
    }

    @keyframes service-atlas-flow { to { stroke-dashoffset: -72; } }
    @keyframes service-atlas-pulse {
      0%,100% { opacity: .22; transform: scale(.82); }
      50% { opacity: .76; transform: scale(1.16); }
    }
    @keyframes service-atlas-node {
      0%,12% { color: rgba(255,255,255,.92); }
      13%,100% { color: rgba(255,255,255,.54); }
    }
    @keyframes service-atlas-node-light {
      0%,12% { color: rgba(20,20,18,.9); }
      13%,100% { color: rgba(20,20,18,.6); }
    }

    @media (hover: hover) and (pointer: fine) {
      .services:hover .service-atlas-line { stroke: rgba(255,255,255,.42); }
      .services:hover .service-atlas-line:nth-child(3n) { stroke: rgba(255,81,73,.78); }
      .services:hover .service-atlas-node { color: rgba(255,255,255,.9); animation: none; }
      .services:hover .service-atlas-core {
        border-color: rgba(255,81,73,.76);
        background: radial-gradient(circle at 52% 48%, rgba(255,81,73,.2), rgba(8,8,9,.9) 66%);
        transform: translate(-50%,-50%) scale(1.04);
      }
    }

    .services:focus-visible .service-atlas-line { stroke: rgba(255,255,255,.42); }
    .services:focus-visible .service-atlas-node { color: rgba(255,255,255,.9); animation: none; }
    .services:focus-visible .service-atlas-core { border-color: rgba(255,81,73,.76); }

    html[data-theme="light"] .service-atlas .services-visual-caption,
    html[data-theme="light"] .service-atlas .services-visual-output { color: rgba(20,20,18,.46); }
    html[data-theme="light"] .service-atlas-line { stroke: rgba(20,20,18,.25); }
    html[data-theme="light"] .service-atlas-ring { fill: rgba(247,246,241,.76); stroke: rgba(20,20,18,.28); }
    html[data-theme="light"] .service-atlas-pulse { stroke: rgba(217,51,43,.6); }
    html[data-theme="light"] .service-atlas .service-atlas-node {
      color: rgba(20,20,18,.6);
      animation-name: service-atlas-node-light;
    }
    html[data-theme="light"] .service-atlas-node i { color: #d9332b; }
    html[data-theme="light"] .service-atlas .service-atlas-core {
      border-color: rgba(20,20,18,.26);
      background: radial-gradient(circle at 52% 48%, rgba(217,51,43,.12), rgba(247,246,241,.92) 68%);
      color: rgba(20,20,18,.86);
    }
    html[data-theme="light"] .service-atlas-core small { color: rgba(20,20,18,.44); }
    @media (hover: hover) and (pointer: fine) {
      html[data-theme="light"] .services:hover .service-atlas-line { stroke: rgba(20,20,18,.46); }
      html[data-theme="light"] .services:hover .service-atlas-line:nth-child(3n) { stroke: #d9332b; }
      html[data-theme="light"] .services:hover .service-atlas-node { color: rgba(20,20,18,.88); animation: none; }
      html[data-theme="light"] .services:hover .service-atlas-core { border-color: rgba(217,51,43,.72); }
    }

    @media (max-width: 700px) {
      .services-visual.service-atlas {
        top: 48%;
        right: 10px;
        left: 10px;
        width: auto;
        height: 126px;
        opacity: .9;
      }
      .service-atlas .services-visual-caption,
      .service-atlas .services-visual-output { display: none; }
      .service-atlas-lines { inset: 0; height: 100%; }
      .service-atlas .service-atlas-node { gap: 2px; font-size: 5.5px; letter-spacing: .015em; }
      .service-atlas-node i { display: none; }
      .service-atlas-node--1 { top: 4%; left: 0; }
      .service-atlas-node--2 { top: 4%; right: 0; left: auto; }
      .service-atlas-node--3 { top: 30%; right: auto; left: 0; }
      .service-atlas-node--4 { top: 30%; right: 0; left: auto; }
      .service-atlas-node--5 { top: auto; right: auto; bottom: 30%; left: 0; }
      .service-atlas-node--6 { top: auto; right: 0; bottom: 30%; left: auto; }
      .service-atlas-node--7 { bottom: 4%; left: 0; }
      .service-atlas-node--8 { right: 0; bottom: 4%; }
      .service-atlas .service-atlas-core { width: 52px; }
      .service-atlas-core b { font-size: 7px; }
      .service-atlas-core small { margin-top: 4px; font-size: 4.5px; }
    }

    /* Services v6: a connected glass molecule. The graph keeps the full
       capability set visible without returning to a rigid radial diagram. */
    .services-visual.service-molecule {
      top: 50%;
      right: clamp(18px, 2.5vw, 42px);
      display: block;
      width: min(58%, 760px);
      height: clamp(200px, 22vw, 320px);
      overflow: visible;
      opacity: 1;
      transform: translateY(-50%);
      isolation: isolate;
    }

    .service-molecule::after {
      content: "";
      position: absolute;
      inset: 13% 8% 9%;
      z-index: -2;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255,255,255,.055), transparent 68%);
      filter: blur(18px);
      opacity: .7;
    }

    .service-molecule .services-visual-caption,
    .service-molecule .services-visual-output {
      position: absolute;
      z-index: 5;
      margin: 0;
      color: rgba(255,255,255,.38);
      font: 680 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
      -webkit-text-stroke: 0 transparent;
    }

    .service-molecule .services-visual-caption { top: 0; left: 0; }
    .service-molecule .services-visual-output { right: 0; bottom: 0; color: rgba(255,255,255,.5); }

    .service-molecule-links {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .service-scan-object {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .service-finale-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      display: block;
      height: auto;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      transform: translate(-50%, -50%);
      filter: brightness(0) invert(1);
    }

    html[data-theme="light"] .service-finale-logo { filter: brightness(0); }


    .services-visual.service-molecule .service-orb {
      --orb-size: 64px;
      position: absolute;
      top: var(--orb-y, 50%);
      left: var(--orb-x, 50%);
      z-index: 2;
      display: grid;
      width: var(--orb-size);
      height: var(--orb-size);
      place-items: center;
      margin: 0;
      border: 1px solid rgba(255,255,255,.27);
      border-radius: 50%;
      background:
        radial-gradient(circle at 29% 22%, rgba(255,255,255,.64) 0 2%, rgba(255,255,255,.16) 7%, transparent 22%),
        radial-gradient(circle at 68% 74%, rgba(255,255,255,.04), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 47%, rgba(0,0,0,.2));
      box-shadow:
        inset 8px 8px 18px rgba(255,255,255,.055),
        inset -9px -11px 20px rgba(0,0,0,.24),
        0 9px 24px rgba(0,0,0,.17),
        0 0 0 1px rgba(0,0,0,.15);
      color: rgba(255,255,255,.72);
      font-size: 7px;
      line-height: 1.05;
      letter-spacing: .045em;
      text-align: center;
      -webkit-backdrop-filter: blur(3px) saturate(115%);
      backdrop-filter: blur(3px) saturate(115%);
      -webkit-text-stroke: 0 transparent;
      transform: translate(-50%,-50%);
      will-change: transform;
    }

    .service-orb::before {
      content: "";
      position: absolute;
      inset: 8%;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: inherit;
    }

    .service-orb::after {
      content: "";
      position: absolute;
      right: 15%;
      bottom: 13%;
      width: 17%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.16);
      filter: blur(1px);
    }

    .services-visual.service-molecule .service-orb b {
      position: relative;
      z-index: 2;
      max-width: 82%;
      font-family: inherit;
      font-size: inherit;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: inherit;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0,0,0,.5);
      white-space: normal;
    }

    .service-orb[data-service-orb="strategy"] { --orb-size: clamp(62px, 6.2vw, 112px); }
    .service-orb[data-service-orb="positioning"] { --orb-size: clamp(42px, 4.1vw, 72px); }
    .service-orb[data-service-orb="identity"] { --orb-size: clamp(57px, 5.5vw, 100px); }
    .service-orb[data-service-orb="ux"] { --orb-size: clamp(43px, 4.2vw, 74px); }
    .service-orb[data-service-orb="development"] { --orb-size: clamp(72px, 7.2vw, 128px); }
    .service-orb[data-service-orb="content"] { --orb-size: clamp(54px, 5.4vw, 94px); }
    .service-orb[data-service-orb="production"] { --orb-size: clamp(49px, 4.8vw, 84px); }
    .service-orb[data-service-orb="support"] { --orb-size: clamp(42px, 4vw, 70px); }

    .services:focus-visible .service-orb,
    .services.is-molecule-engaged .service-orb {
      border-color: rgba(255,255,255,.42);
      color: rgba(255,255,255,.94);
    }
    .services:hover .services-visual.service-molecule { opacity: 1; }

    html[data-theme="light"] .service-molecule::after {
      background: radial-gradient(ellipse, rgba(20,20,18,.08), transparent 68%);
    }
    html[data-theme="light"] .service-molecule .services-visual-caption,
    html[data-theme="light"] .service-molecule .services-visual-output { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .services-visual.service-molecule .service-orb {
      border-color: rgba(20,20,18,.24);
      background:
        radial-gradient(circle at 29% 22%, rgba(255,255,255,.94) 0 3%, rgba(255,255,255,.52) 8%, transparent 24%),
        radial-gradient(circle at 68% 74%, rgba(20,20,18,.025), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.18) 48%, rgba(20,20,18,.07));
      box-shadow:
        inset 8px 8px 18px rgba(255,255,255,.34),
        inset -9px -11px 20px rgba(20,20,18,.07),
        0 9px 24px rgba(20,20,18,.07),
        0 0 0 1px rgba(255,255,255,.34);
      color: rgba(20,20,18,.68);
    }
    html[data-theme="light"] .services-visual.service-molecule .service-orb b { text-shadow: 0 1px 8px rgba(255,255,255,.7); }
    html[data-theme="light"] .services:focus-visible .service-orb,
    html[data-theme="light"] .services.is-molecule-engaged .service-orb {
      border-color: rgba(217,51,43,.42);
      color: rgba(20,20,18,.92);
    }

    @media (max-width: 700px) {
      .services-visual.service-molecule {
        top: 47%;
        right: 12px;
        left: 12px;
        width: auto;
        height: 132px;
      }
      .service-molecule .services-visual-caption,
      .service-molecule .services-visual-output { display: none; }
      .services-visual.service-molecule .service-orb { font-size: 5.2px; }
      .service-orb[data-service-orb="strategy"] { --orb-size: 52px; }
      .service-orb[data-service-orb="positioning"] { --orb-size: 34px; }
      .service-orb[data-service-orb="identity"] { --orb-size: 46px; }
      .service-orb[data-service-orb="ux"] { --orb-size: 34px; }
      .service-orb[data-service-orb="development"] { --orb-size: 60px; }
      .service-orb[data-service-orb="content"] { --orb-size: 44px; }
      .service-orb[data-service-orb="production"] { --orb-size: 40px; }
      .service-orb[data-service-orb="support"] { --orb-size: 34px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .services-visual.service-molecule .service-orb { will-change: auto; }
    }

    /* Services v7: fluid capability field, based on the supplied metaball
       motion reference. Labels stay crisp while the canvas carries the form. */
    .service-molecule::after {
      inset: 8% 2% 2%;
      background:
        radial-gradient(circle at 52% 48%, rgba(255,255,255,.09), transparent 34%),
        radial-gradient(circle at 58% 54%, rgba(132,138,144,.055), transparent 56%);
      filter: blur(24px);
    }

    .service-molecule-links {
      filter: saturate(118%) contrast(104%);
      -webkit-mask-image: radial-gradient(ellipse 74% 90% at 50% 50%, #000 66%, transparent 100%);
      mask-image: radial-gradient(ellipse 74% 90% at 50% 50%, #000 66%, transparent 100%);
      opacity: .96;
    }

    .services-visual.service-molecule { contain: layout style; }

    .service-molecule.no-webgl .service-molecule-links {
      border-radius: 48%;
      background:
        radial-gradient(circle at 43% 45%, rgba(255,255,255,.82), rgba(190,196,202,.44) 18%, rgba(42,46,50,.22) 36%, transparent 50%),
        radial-gradient(circle at 63% 56%, rgba(245,247,249,.5), rgba(66,70,74,.18) 28%, transparent 46%);
      filter: blur(7px) saturate(82%);
    }

    html[data-theme="light"] .service-molecule.no-webgl .service-molecule-links {
      background:
        radial-gradient(circle at 43% 45%, rgba(68,71,74,.54), rgba(20,21,22,.66) 20%, rgba(0,0,0,.24) 37%, transparent 51%),
        radial-gradient(circle at 63% 56%, rgba(32,34,36,.48), rgba(0,0,0,.18) 29%, transparent 47%);
    }

    .service-molecule.is-webgl .service-orb { opacity: .72; }

    .services-visual.service-molecule .service-orb {
      display: inline-block;
      width: auto;
      height: auto;
      min-width: 0;
      aspect-ratio: auto;
      place-items: initial;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: rgba(255,255,255,.54);
      font: 620 clamp(7px, .54vw, 9px)/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .035em;
      text-align: left;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      opacity: .86;
    }

    .service-orb::before {
      content: attr(data-index);
      position: static;
      display: inline;
      margin-right: 5px;
      border: 0;
      border-radius: 0;
      color: rgba(255,81,73,.92);
      font: inherit;
    }

    .service-orb::after { content: none; }

    .services-visual.service-molecule .service-orb b {
      display: inline;
      max-width: none;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-shadow: 0 1px 8px rgba(0,0,0,.9);
      white-space: nowrap;
    }

    .services:focus-visible .service-orb,
    .services.is-molecule-engaged .service-orb {
      color: rgba(255,255,255,.88);
    }

    html[data-theme="light"] .service-molecule::after {
      background:
        radial-gradient(circle at 52% 48%, rgba(20,20,18,.1), transparent 35%),
        radial-gradient(circle at 58% 54%, rgba(20,20,18,.05), transparent 56%);
    }

    html[data-theme="light"] .services-visual.service-molecule .service-orb {
      border: 0;
      background: none;
      box-shadow: none;
      color: rgba(20,20,18,.58);
    }
    html[data-theme="light"] .services-visual.service-molecule .service-orb b {
      text-shadow: 0 1px 8px rgba(255,255,255,.88);
    }
    html[data-theme="light"] .services-visual.service-molecule .service-orb::before { color: #d9332b; }
    html[data-theme="light"] .services:focus-visible .service-orb,
    html[data-theme="light"] .services.is-molecule-engaged .service-orb { color: rgba(20,20,18,.9); }

    @media (max-width: 700px) {
      .services-visual.service-molecule .service-orb {
        width: auto;
        height: auto;
        font-size: 4.8px;
      }
      .service-orb::before { margin-right: 3px; }
    }

    /* Labels behave like tracking annotations in the supplied reference:
       they are sampled from the moving volume instead of remaining pinned. */
    .service-molecule.is-webgl .service-orb {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      filter: blur(2px);
      transition:
        opacity .32s ease,
        clip-path .56s cubic-bezier(.18,.78,.24,1),
        filter .42s ease,
        color .2s ease;
      will-change: transform, opacity, clip-path;
    }

    .service-molecule.is-webgl .service-orb.is-visible {
      opacity: .72;
      clip-path: inset(0 0 0 0);
      filter: blur(0);
    }

    .service-molecule.is-webgl .service-orb.is-emphasis {
      color: rgba(255,255,255,.96);
      opacity: 1;
    }

    html[data-theme="light"] .service-molecule.is-webgl .service-orb.is-emphasis {
      color: rgba(20,20,18,.94);
    }

    @media (prefers-reduced-motion: reduce) {
      .service-molecule.is-webgl .service-orb {
        opacity: 0;
        clip-path: none;
        filter: none;
        transition: none;
      }
      .service-molecule.is-webgl .service-orb.is-visible { opacity: .5; }
      .service-molecule.is-webgl .service-orb.is-emphasis { opacity: 1; }
    }

    @media (max-width: 520px) {
      .services-visual.service-molecule {
        top: 46%;
        right: 9px;
        left: 9px;
        height: 116px;
      }
      .services-visual.service-molecule .service-orb { font-size: 4.35px; }
      .service-molecule.is-webgl .service-orb.is-visible { opacity: .8; }
    }

    @media (max-height: 680px) and (min-width: 701px) {
      .services-visual.service-molecule {
        width: min(55%, 650px);
        height: clamp(166px, 18vw, 216px);
      }
    }

    /* Services v8: the volume is treated as a live SMENA service system.
       One capability leads at a time; the rest stay contextual, not noisy. */
    .service-molecule::after {
      inset: 4% 0 0;
      background:
        radial-gradient(circle at 48% 51%, rgba(255,255,255,.11), transparent 34%),
        radial-gradient(circle at 62% 58%, rgba(139,145,152,.07), transparent 52%);
      filter: blur(28px);
      opacity: .86;
    }

    .service-molecule-links {
      filter: saturate(106%) contrast(108%);
      -webkit-mask-image: radial-gradient(ellipse 82% 96% at 52% 50%, #000 69%, transparent 100%);
      mask-image: radial-gradient(ellipse 82% 96% at 52% 50%, #000 69%, transparent 100%);
    }

    .service-molecule .services-visual-caption {
      color: rgba(255,255,255,.42);
      letter-spacing: .14em;
    }

    .service-molecule.is-webgl .service-orb.is-visible {
      opacity: .34;
    }

    .service-molecule.is-webgl .service-orb.is-secondary {
      color: rgba(255,255,255,.56);
      opacity: .54;
    }

    .service-molecule.is-webgl .service-orb.is-emphasis {
      padding: 4px 6px;
      border-radius: 2px;
      background: rgba(5,5,5,.64);
      box-shadow: 0 4px 18px rgba(0,0,0,.22);
      color: rgba(255,255,255,.98);
      opacity: 1;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      filter: drop-shadow(0 3px 12px rgba(0,0,0,.74));
    }

    .service-molecule.is-webgl .service-orb.is-emphasis::before {
      color: var(--accent);
    }

    .service-molecule .service-live-readout {
      right: 0;
      bottom: 0;
      display: flex;
      align-items: baseline;
      gap: 8px;
      max-width: 66%;
      color: rgba(255,255,255,.9);
      font-size: clamp(7px, .54vw, 9px);
      white-space: nowrap;
    }

    .service-live-readout i,
    .service-live-readout span {
      position: static;
      display: inline;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-transform: uppercase;
      transform: none;
    }

    .service-live-readout i {
      color: var(--accent);
      font-style: normal;
    }

    .service-live-readout span {
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity .18s ease, transform .26s cubic-bezier(.2,.75,.24,1), clip-path .3s ease;
    }

    .service-live-readout.is-changing span {
      opacity: 0;
      clip-path: inset(0 0 0 100%);
      transform: translateX(7px);
    }

    html[data-theme="light"] .service-molecule::after {
      background:
        radial-gradient(circle at 48% 51%, rgba(20,20,18,.12), transparent 34%),
        radial-gradient(circle at 62% 58%, rgba(20,20,18,.055), transparent 54%);
    }

    html[data-theme="light"] .service-molecule .services-visual-caption,
    html[data-theme="light"] .service-molecule .service-live-readout { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .service-live-readout i { color: #d9332b; }
    html[data-theme="light"] .service-molecule.is-webgl .service-orb.is-secondary { color: rgba(20,20,18,.62); }
    html[data-theme="light"] .service-molecule.is-webgl .service-orb.is-emphasis {
      background: rgba(255,255,255,.8);
      box-shadow: 0 4px 16px rgba(20,20,18,.09);
      color: rgba(20,20,18,.94);
    }

    @media (max-width: 700px) {
      .service-molecule .services-visual-caption {
        top: 2px;
        display: block;
        font-size: 5px;
      }
      .service-molecule .service-live-readout {
        right: 2px;
        bottom: 1px;
        display: flex;
        gap: 5px;
        max-width: 58%;
        font-size: 5px;
      }
      .service-molecule.is-webgl .service-orb.is-visible { opacity: .28; }
      .service-molecule.is-webgl .service-orb.is-secondary { opacity: .45; }
      .service-molecule.is-webgl .service-orb.is-emphasis { opacity: .94; }
    }

    @media (max-width: 520px) {
      .service-molecule .services-visual-caption { display: none; }
      .service-molecule.is-webgl .service-orb { display: none; }
      .service-molecule .service-live-readout {
        right: 0;
        max-width: 100%;
        gap: 4px;
        font-size: 6.5px;
      }
    }

    /* Services v9: eight glossy capabilities share one physical field.
       The composition follows the supplied sphere reference without importing
       its phone chrome or turning the card into a separate visual demo. */
    .service-molecule.is-orbfield::after {
      inset: 2% 0 0;
      background:
        radial-gradient(ellipse at 52% 52%, rgba(255,255,255,.022), transparent 58%),
        radial-gradient(circle at 68% 56%, rgba(249,65,55,.015), transparent 58%);
      filter: blur(28px);
      opacity: .34;
    }

    .service-molecule.is-orbfield .service-molecule-links {
      pointer-events: none;
      filter: none;
      -webkit-mask-image: none;
      mask-image: none;
      opacity: 1;
    }

    .service-molecule.is-orbfield .service-orb {
      display: none;
      pointer-events: none;
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      filter: blur(2px);
      transition:
        opacity .24s ease,
        clip-path .42s cubic-bezier(.18,.78,.24,1),
        filter .3s ease;
      will-change: transform, opacity;
    }

    .service-molecule.is-orbfield .service-orb.is-visible {
      padding: 4px 6px;
      border-radius: 2px;
      background: rgba(5,5,5,.7);
      box-shadow: 0 4px 18px rgba(0,0,0,.22);
      color: rgba(255,255,255,.96);
      opacity: 1;
      clip-path: inset(0 0 0 0);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      filter: none;
    }

    .service-molecule.is-orbfield.is-pointer-active .services-visual-caption {
      color: rgba(255,255,255,.64);
    }

    .service-molecule.is-orbfield .service-live-readout,
    .services:hover .service-molecule.is-orbfield .service-live-readout {
      max-width: 82%;
      color: rgba(255,255,255,.76);
    }

    .service-molecule.is-orbfield .service-live-readout span,
    .service-molecule.is-orbfield .service-live-readout.is-changing span {
      display: block;
      margin-left: 0 !important;
      color: inherit;
      opacity: 1;
      clip-path: none;
      -webkit-text-stroke: 0 transparent;
      transform: none;
      transition: color .2s ease;
    }

    html[data-theme="light"] .service-molecule.is-orbfield::after {
      background:
        radial-gradient(ellipse at 55% 52%, rgba(20,20,18,.055), transparent 53%),
        radial-gradient(circle at 63% 56%, rgba(217,51,43,.035), transparent 58%);
    }

    html[data-theme="light"] .service-molecule.is-orbfield .service-orb.is-visible {
      background: rgba(255,255,255,.84);
      box-shadow: 0 4px 16px rgba(20,20,18,.1);
      color: rgba(20,20,18,.94);
    }

    html[data-theme="light"] .service-molecule.is-orbfield.is-pointer-active .services-visual-caption {
      color: rgba(20,20,18,.72);
    }

    html[data-theme="light"] .service-molecule.is-orbfield .service-live-readout,
    html[data-theme="light"] .services:hover .service-molecule.is-orbfield .service-live-readout {
      color: rgba(20,20,18,.62);
    }

    @media (max-width: 520px) {
      .service-molecule.is-orbfield .service-orb { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .service-molecule.is-orbfield .service-orb { transition: none; }
    }

    /* Services v10: eye-tracking lab. The card visualizes how hierarchy,
       composition and calls to action redistribute attention across a screen. */
    .service-molecule.is-heatmap {
      overflow: hidden;
      max-height: calc(100% - 20px);
      opacity: 1;
      isolation: isolate;
    }

    /* The card copy is a visual layer only. Keeping it out of hit testing
       lets the canvas receive the pointer while the whole tile remains one
       button for opening the services modal. */
    .services .card-inner { pointer-events: none; }

    /* The translucent top row should meet the hero without a hard rule. */
    .about,
    .services {
      border-top-color: transparent;
      box-shadow:
        inset 1px 0 0 rgba(255,255,255,.018),
        inset -1px 0 0 rgba(255,255,255,.012),
        inset 0 -1px 0 rgba(255,255,255,.018);
    }

    .service-molecule.is-heatmap::after {
      inset: 0;
      border-radius: 0;
      background: radial-gradient(ellipse at 58% 50%, rgba(255,255,255,.025), transparent 66%);
      filter: blur(14px);
      opacity: .65;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .service-molecule.is-heatmap .service-molecule-links {
      z-index: 1;
      width: 100%;
      height: 100%;
      opacity: 1;
      filter: none;
      pointer-events: auto;
      transform-origin: 50% 50%;
      transition: filter .28s ease, transform .42s cubic-bezier(.16,.82,.36,1);
    }

    .service-molecule.is-heatmap.is-pointer-active .service-molecule-links {
      filter: brightness(1.045) saturate(1.055) contrast(1.02);
      transform: scale(1.008);
    }

    .service-molecule.is-heatmap .service-orb {
      display: none !important;
    }

    .service-molecule.is-heatmap .services-visual-caption {
      display: none;
    }

    .service-molecule.is-heatmap .service-live-readout,
    .services:hover .service-molecule.is-heatmap .service-live-readout {
      display: none;
    }


    .service-molecule.is-heatmap .service-live-readout i {
      color: var(--accent);
      font-style: normal;
    }

    .service-molecule.is-heatmap .service-live-readout span {
      display: block;
      color: inherit;
      opacity: 1;
      clip-path: none;
      transform: none;
      -webkit-text-stroke: 0 transparent;
    }

    html[data-theme="light"] .service-molecule.is-heatmap::after {
      background: radial-gradient(ellipse at 58% 50%, rgba(20,20,18,.035), transparent 66%);
    }

    html[data-theme="light"] .about,
    html[data-theme="light"] .services {
      border-top-color: transparent;
      box-shadow:
        inset 1px 0 0 rgba(20,20,18,.035),
        inset -1px 0 0 rgba(20,20,18,.025),
        inset 0 -1px 0 rgba(20,20,18,.035);
    }

    html[data-theme="light"] .service-molecule.is-heatmap .services-visual-caption,
    html[data-theme="light"] .service-molecule.is-heatmap .service-live-readout,
    html[data-theme="light"] .services:hover .service-molecule.is-heatmap .service-live-readout {
      color: rgba(20,20,18,.68);
    }

    @media (max-width: 700px) {
      .service-molecule.is-heatmap::after { filter: blur(10px); }
    }

    /* Responsive contrast pass for the compact bento layouts. */
    @media (max-width: 900px) {
      .about-inside {
        inset: 12% 4% 15%;
        align-items: center;
        justify-content: center;
        padding-left: 0;
      }

      .about-manifesto {
        font-size: clamp(22px, 3.2vw, 28px);
        letter-spacing: -.065em;
        text-align: center;
      }

      .about-manifesto span {
        width: fit-content;
        margin-inline: auto !important;
      }

      .about-manifesto span:nth-child(1) {
        margin-bottom: .38em;
        font-size: .58em;
      }

      .contact-signal {
        top: 50%;
        left: 50%;
        justify-content: center;
        white-space: nowrap;
        transform: translate(-50%, -50%);
      }

      .tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) clamp(14px, 2.6dvh, 19px);
      }

      .tools > .social-link--vk,
      .tools > .social-link--telegram,
      .tools > .social-link--instagram,
      .tools > .social-link--dprofile {
        grid-column: auto;
        grid-row: 1;
      }

      .tools .social-link {
        align-items: center;
        justify-content: center;
        padding: 2px;
      }

      .tools .social-icon {
        width: clamp(19px, 2.7vw, 24px);
        margin: 0 auto;
      }

      .tools .social-link small { display: none; }
      .social-legal-links { grid-row: 2; }
    }

    @media (max-width: 520px) {
      .about-inside { inset: 10% 3% 13%; }
      .about-manifesto { font-size: clamp(22px, 6.4vw, 28px); }

      .contact-signal {
        font-size: clamp(24px, 7.2vw, 30px);
      }

      .tools .social-icon {
        width: clamp(20px, 6vw, 26px);
        margin: 0 auto;
      }

      .tools .social-link small { display: none; }
      .social-legal-links { grid-row: 2; }

      .services-visual.service-molecule.is-heatmap {
        top: 45%;
        right: 5px;
        left: 5px;
        height: 145px;
      }
    }

    @media (max-width: 900px) and (max-height: 590px) and (orientation: landscape) {
      .about-inside { inset: 5% 3% 25%; }
      .about-manifesto {
        font-size: clamp(20px, 2.6vw, 22px);
        line-height: .78;
      }
      .about-manifesto span:nth-child(1) { margin-bottom: .2em; }
    }

    /* Mobile interaction audit: preserve the compact composition while giving
       every small header and utility control a reliable touch target. */
    @media (max-width: 700px) {
      .brand-caption {
        min-height: 28px;
        padding-block: 7px;
      }
      .header-control {
        min-width: 32px;
        height: 30px;
      }
      .header-control--theme { width: 32px; }
      .social-legal-links a {
        display: inline-flex;
        min-height: 0;
        align-items: center;
      }
      .tools .social-link { min-height: 0; }
    }

    /* SMENA 3D: the embedded collection replaces only the concept diagram in
       the Projects modal. Other project visuals keep their own media. */
    .project-splat {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: none;
      overflow: hidden;
      background:
        radial-gradient(circle at 64% 44%, rgba(255,81,73,.065), transparent 46%),
        #090909;
      cursor: pointer;
      isolation: isolate;
      touch-action: pan-y pinch-zoom;
      -webkit-tap-highlight-color: transparent;
    }

    .project-feature[data-project-visual="platform"] {
      background: #090909;
      isolation: isolate;
    }

    .project-feature[data-project-visual="platform"] > .project-splat { display: block; }
    .project-feature[data-project-visual="platform"] > .project-feature-mark { display: none; }

    .project-feature[data-project-visual="platform"]::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(5,5,5,.9) 0, rgba(5,5,5,.64) 31%, rgba(5,5,5,.08) 68%, rgba(5,5,5,.2) 100%),
        linear-gradient(0deg, rgba(5,5,5,.94) 0, rgba(5,5,5,.5) 24%, transparent 58%),
        radial-gradient(circle at 72% 52%, transparent 0 32%, rgba(0,0,0,.24) 76%);
    }

    .project-feature[data-project-visual="platform"] .project-feature-copy {
      z-index: 3;
      width: min(650px, 72%);
      text-shadow: 0 2px 14px rgba(0,0,0,.8);
    }

    .project-splat:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: -3px;
    }

    .project-splat.is-interactive { cursor: grab; }
    .project-splat.is-interactive:active { cursor: grabbing; }

    .project-object-frame {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: #090a0b;
    }

    .project-object-switcher {
      position: absolute;
      top: 13px;
      right: 13px;
      z-index: 4;
      display: flex;
      gap: 3px;
      padding: 3px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 999px;
      background: rgba(5,5,5,.56);
      box-shadow: 0 9px 28px rgba(0,0,0,.2);
      backdrop-filter: blur(12px);
    }

    .project-object-switcher button {
      min-width: 58px;
      min-height: 30px;
      padding: 0 10px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(255,255,255,.54);
      font: 650 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .055em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .2s ease, background-color .2s ease;
    }

    .project-object-switcher button span { margin-right: 5px; color: rgba(255,255,255,.32); }
    .project-object-switcher button:hover { color: rgba(255,255,255,.88); }
    .project-object-switcher button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: white; }
    .project-object-switcher button[aria-pressed="true"] span { color: var(--accent); }
    .project-object-switcher button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

    .project-splat canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #090909;
      transform: translateY(-18%);
      touch-action: pan-y pinch-zoom !important;
    }

    .project-splat.is-interactive,
    .project-splat.is-interactive canvas { touch-action: none !important; }

    .splat-loading,
    .splat-hint {
      position: absolute;
      z-index: 3;
      pointer-events: none;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-weight: 650;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .splat-loading {
      top: 50%;
      left: 50%;
      color: rgba(255,255,255,.58);
      font-size: clamp(7px, .54vw, 10px);
      white-space: nowrap;
      transform: translate(-50%,-50%);
      transition: opacity .38s ease, visibility .38s ease;
    }

    .splat-loading::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-right: 9px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px rgba(255,81,73,.55);
      vertical-align: .08em;
    }

    .splat-loading.is-hidden,
    .splat-hint.is-hidden { opacity: 0; visibility: hidden; }

    .splat-loading.is-error {
      color: rgba(255,255,255,.72);
      white-space: normal;
      text-align: center;
    }

    .splat-hint {
      right: 14px;
      top: 14px;
      color: rgba(255,255,255,.42);
      font-size: 7px;
      transition: opacity .25s ease, visibility .25s ease;
    }

    .splat-hint::before { content: "●"; margin-right: 7px; color: var(--accent); font-size: 5px; }

    @media (max-width: 700px) {
      .project-feature[data-project-visual="platform"]::after {
        background:
          linear-gradient(90deg, rgba(5,5,5,.88), rgba(5,5,5,.34) 58%, rgba(5,5,5,.12)),
          linear-gradient(0deg, rgba(5,5,5,.96), rgba(5,5,5,.44) 46%, transparent 76%);
      }
      .project-feature[data-project-visual="platform"] .project-feature-copy { width: 82%; }
      .splat-hint { top: 9px; right: 9px; font-size: 5.5px; }
    }

    @media (max-width: 430px) {
      .splat-hint {
        display: block;
        max-width: 138px;
        padding: 6px 7px;
        font-size: 5px;
        line-height: 1.25;
        text-align: right;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .splat-loading,
      .splat-hint { transition: none; }
    }

    /* Gaussian case: a real still in the homepage preview and an editorial
       information layer that keeps the interactive subject unobstructed. */
    .project-window-splat-poster {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 48%;
      opacity: 0;
      transform: scale(1.015);
      transition: opacity .24s ease, transform .42s cubic-bezier(.2,.8,.2,1);
    }

    .showcase .project-window[data-visual="platform"] .project-window-screen {
      background: #060606;
    }

    .showcase .project-window[data-visual="platform"] .project-window-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      width: auto;
      height: auto;
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(4,4,4,.16), transparent 46%, rgba(4,4,4,.16)),
        linear-gradient(0deg, rgba(4,4,4,.78), transparent 48%);
      box-shadow: none;
      transform: none;
      pointer-events: none;
    }

    .showcase .project-window[data-visual="platform"] .project-window-splat-poster {
      display: block;
      opacity: 1;
      transform: scale(1);
    }

    .showcase .project-window[data-visual="platform"] .project-window-screen > strong {
      position: absolute;
      top: 11px;
      right: auto;
      bottom: auto;
      left: 12px;
      z-index: 3;
      display: inline-flex;
      width: auto;
      height: auto;
      align-items: center;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.66);
      font: 700 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .1em;
      text-transform: uppercase;
      backdrop-filter: none;
    }

    .showcase .project-window[data-visual="platform"] .project-window-screen > strong::before {
      content: "";
      width: 4px;
      height: 4px;
      margin-right: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(255,81,73,.5);
    }

    .showcase .project-window[data-visual="platform"] .project-window-screen > small {
      right: 11px;
      bottom: 9px;
      left: 11px;
      z-index: 3;
      color: rgba(255,255,255,.65);
      text-align: right;
    }

    .showcase .project-window.is-changing .project-window-splat-poster {
      opacity: 0;
      transform: scale(1.025);
    }

    .splat-readout {
      position: absolute;
      top: 15px;
      left: 16px;
      z-index: 3;
      display: grid;
      grid-template-columns: auto auto;
      gap: 2px 9px;
      color: rgba(255,255,255,.72);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .splat-readout span {
      grid-column: 1 / 3;
      color: rgba(255,255,255,.44);
      font-size: 7px;
    }

    .splat-readout i {
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 9px rgba(255,81,73,.6);
      vertical-align: 1px;
      transition: background-color .2s ease, box-shadow .2s ease;
    }

    .project-splat.is-interactive .splat-readout i {
      background: #8bffa2;
      box-shadow: 0 0 10px rgba(139,255,162,.65);
    }

    .splat-readout b {
      color: rgba(255,255,255,.92);
      font-size: 17px;
      line-height: 1;
      letter-spacing: -.035em;
    }

    .splat-readout small {
      align-self: end;
      color: rgba(255,255,255,.4);
      font-size: 6px;
      line-height: 1.2;
    }

    .project-feature[data-project-visual="platform"]::after {
      background:
        linear-gradient(0deg, rgba(4,4,4,.98) 0%, rgba(4,4,4,.84) 22%, rgba(4,4,4,.24) 48%, transparent 67%),
        linear-gradient(90deg, rgba(4,4,4,.34), transparent 44%, rgba(4,4,4,.16));
    }

    .project-feature[data-project-visual="platform"] .project-feature-copy {
      position: absolute;
      inset: auto 0 0;
      z-index: 3;
      display: grid;
      width: 100%;
      grid-template-columns: minmax(190px,.72fr) minmax(290px,1.3fr) minmax(150px,.52fr);
      gap: clamp(16px,2vw,30px);
      align-items: end;
      padding: clamp(22px,2.4vw,34px);
      text-shadow: 0 1px 18px rgba(0,0,0,.55);
    }

    .project-feature[data-project-visual="platform"] .project-case-heading {
      display: flex;
      min-width: 0;
      flex-direction: column;
      grid-column: 1;
      justify-content: flex-end;
    }

    .project-feature[data-project-visual="platform"] .project-case-heading > span {
      color: #ff5a52;
      font: 700 8.5px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .project-feature[data-project-visual="platform"] .project-feature-copy h3 {
      margin: 9px 0 10px;
      font-size: clamp(27px,2.25vw,38px);
      line-height: .95;
      white-space: nowrap;
    }

    .project-feature[data-project-visual="platform"] .case-context {
      display: block;
      margin: 0;
      color: rgba(255,255,255,.54);
      font: 650 8px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    .project-feature[data-project-visual="platform"] .project-case-story {
      display: grid;
      min-width: 0;
      grid-column: 2;
      grid-template-columns: minmax(0,1fr);
      grid-template-rows: auto auto auto;
      gap: 8px;
      align-self: end;
    }

    .project-feature[data-project-visual="platform"] .project-case-story p {
      display: grid;
      max-width: none;
      grid-template-columns: 78px minmax(0,1fr);
      gap: 11px;
      margin: 0;
      color: rgba(255,255,255,.72);
      font-size: 10.5px;
      line-height: 1.4;
    }

    .project-feature[data-project-visual="platform"] .project-case-story p b {
      color: rgba(255,255,255,.96);
      font: 700 8px/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .project-feature[data-project-visual="platform"] .project-case-story .case-scope {
      display: block;
      grid-column: 1;
      grid-row: auto;
      padding-top: 7px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.44);
      font: 650 8px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .project-feature[data-project-visual="platform"] .project-feature-actions {
      display: flex;
      flex-direction: column;
      grid-column: 3;
      gap: 6px;
      align-self: end;
      justify-content: flex-end;
      padding: 0;
      border: 0;
    }

    .project-feature[data-project-visual="platform"] .project-feature-actions .project-primary-action {
      width: 100%;
      padding: 12px 13px;
      border: 1px solid #ff5149;
      background: #ff5149;
      color: #080808;
      font-size: 9px;
      font-weight: 760;
      text-align: center;
    }

    .project-feature[data-project-visual="platform"] .project-feature-actions .project-primary-action:hover,
    .project-feature[data-project-visual="platform"] .project-feature-actions .project-primary-action:focus-visible {
      border-color: #ff6962;
      background: #ff6962;
    }

    .project-feature[data-project-visual="platform"] .project-live-link {
      display: inline-flex;
      width: 100%;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 9px 10px;
      border: 1px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.82);
      font-size: 8px;
      text-align: center;
    }

    .project-feature[data-project-visual="platform"] .project-live-link:hover,
    .project-feature[data-project-visual="platform"] .project-live-link:focus-visible {
      border-color: rgba(255,255,255,.52);
      color: white;
    }
    .splat-hint {
      top: 13px;
      right: 13px;
      padding: 7px 9px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(5,5,5,.42);
      color: rgba(255,255,255,.64);
      backdrop-filter: blur(9px);
    }

    @media (max-width: 760px) {
      .project-feature[data-project-visual="platform"]::after {
        background:
          linear-gradient(0deg, rgba(4,4,4,.99) 0%, rgba(4,4,4,.88) 29%, rgba(4,4,4,.3) 57%, transparent 76%),
          linear-gradient(90deg, rgba(4,4,4,.25), transparent 72%);
      }
      .project-feature[data-project-visual="platform"] .project-feature-copy {
        grid-template-columns: minmax(0,1fr) minmax(132px,.52fr);
        grid-template-rows: auto auto;
        gap: 8px 14px;
        padding: 15px;
      }
      .project-feature[data-project-visual="platform"] .project-case-heading { grid-column: 1; grid-row: 1; }
      .project-feature[data-project-visual="platform"] .project-feature-copy h3 { margin: 6px 0 5px; font-size: 24px; }
      .project-feature[data-project-visual="platform"] .project-feature-copy h3 { white-space: normal; }
      .project-feature[data-project-visual="platform"] .project-case-story { grid-column: 1; grid-row: 2; }
      .project-feature[data-project-visual="platform"] .project-case-story p:first-child,
      .project-feature[data-project-visual="platform"] .project-case-story .case-scope { display: none; }
      .project-feature[data-project-visual="platform"] .project-case-story p { display: block; font-size: 10px; line-height: 1.32; }
      .project-feature[data-project-visual="platform"] .project-case-story p b { display: block; margin-bottom: 2px; }
      .project-feature[data-project-visual="platform"] .project-feature-actions { grid-column: 2; grid-row: 1 / 3; }
      .project-feature[data-project-visual="platform"] .project-feature-actions .project-primary-action { padding: 11px 9px; }
      .splat-readout { top: 11px; left: 11px; }
      .splat-hint { top: 10px; right: 10px; }
    }

    @media (max-width: 520px) {
      .showcase .project-window[data-visual="platform"] .project-window-screen > strong { top: 8px; left: 8px; }
      .showcase .project-window[data-visual="platform"] .project-window-screen > small { right: 8px; bottom: 7px; left: 8px; font-size: 5px; }
      .project-feature[data-project-visual="platform"] .project-feature-copy { grid-template-columns: minmax(0,1fr) 116px; padding: 12px; }
      .project-feature[data-project-visual="platform"] .project-case-story { display: none; }
      .project-feature[data-project-visual="platform"] .project-feature-actions { grid-row: 1; }
      .project-feature[data-project-visual="platform"] .case-context { font-size: 7px; }
      .splat-readout b { font-size: 14px; }
      .project-object-switcher { top: 8px; right: 8px; }
      .project-object-switcher button { min-width: 34px; min-height: 28px; padding-inline: 8px; font-size: 0; }
      .project-object-switcher button span { margin: 0; font-size: 6.5px; }
      .project-feature[data-project-visual="platform"] .project-live-link { min-height: 31px; padding: 7px 5px; font-size: 7px; }
      .splat-hint {
        display: block;
        max-width: 138px;
        padding: 6px 7px;
        font-size: 5px;
        line-height: 1.25;
        text-align: right;
      }
    }

    @media (max-width: 700px) and (max-height: 590px) and (orientation: landscape) {
      .project-feature[data-project-visual="platform"] .project-case-story { display: none; }
      .project-feature[data-project-visual="platform"] .project-feature-actions { grid-row: 1; }
      .splat-readout small { display: none; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .project-feature[data-project-visual="platform"] .project-feature-copy {
        grid-template-columns: minmax(142px,.7fr) minmax(205px,1.1fr) 108px;
        gap: 10px;
        padding: 14px;
      }
      .project-feature[data-project-visual="platform"] .project-feature-copy h3 { margin-block: 5px; font-size: 24px; }
      .project-feature[data-project-visual="platform"] .project-case-story { gap: 5px; }
      .project-feature[data-project-visual="platform"] .project-case-story p:first-child,
      .project-feature[data-project-visual="platform"] .project-case-story .case-scope { display: none; }
      .project-feature[data-project-visual="platform"] .project-case-story p { display: block; font-size: 9px; line-height: 1.28; }
      .project-feature[data-project-visual="platform"] .project-case-story p b { display: block; margin-bottom: 2px; font-size: 7px; }
      .project-feature[data-project-visual="platform"] .project-feature-actions .project-primary-action { padding: 9px 6px; font-size: 7.5px; }
      .splat-readout small { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .project-window-splat-poster,
      .splat-readout i { transition: none; }
    }

    /* Services v5: a practical scope configurator with an editorial rhythm. */
    .modal[data-kind="services"] .modal-panel {
      height: min(820px, calc(100dvh - clamp(12px,4vw,48px)));
      background:
        radial-gradient(circle at 84% 4%, rgba(255,68,61,.105), transparent 30%),
        linear-gradient(145deg, rgba(23,23,24,.985), rgba(16,16,17,.985));
    }

    .modal-body--services {
      display: grid;
      grid-template-rows: auto minmax(0,1fr) auto;
      gap: clamp(10px, 1.45vh, 16px);
      min-height: 0;
    }

    .services-scene-head {
      display: grid;
      grid-template-columns: minmax(0,1.25fr) minmax(280px,.65fr);
      grid-template-areas: "label description" "title description";
      align-items: end;
      column-gap: clamp(28px,4vw,70px);
    }

    .services-scene-head .scene-label { grid-area: label; }
    .services-scene-head .modal-title {
      grid-area: title;
      max-width: 880px;
      margin: 7px 0 0;
      font-size: clamp(34px, 3.25vw, 52px);
      line-height: .94;
      letter-spacing: -.06em;
    }
    .services-scene-head .modal-description {
      grid-area: description;
      align-self: end;
      max-width: 470px;
      margin: 0 0 3px;
      color: rgba(255,255,255,.58);
      font-size: clamp(11px,1vw,15px);
      line-height: 1.45;
    }

    .service-pricing {
      display: grid;
      grid-template-rows: 28px auto auto minmax(0,1fr);
      min-height: 0;
      border-top: 1px solid rgba(255,255,255,.13);
    }

    .pricing-stagebar {
      display: grid;
      grid-template-columns: auto minmax(22px,1fr) auto minmax(22px,1fr) auto;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.38);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .pricing-stagebar span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
    .pricing-stagebar i { color: var(--accent); font-style: normal; }
    .pricing-stagebar b { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }

    .tariff-selector {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      background: rgba(255,255,255,.018);
    }
    .tariff-option {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 6px;
      min-width: 0;
      min-height: 106px;
      padding: 13px 16px 12px;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.11);
      border-radius: 0;
      background: transparent;
      text-align: left;
      transition: background-color .2s ease, color .2s ease;
    }
    .tariff-option:last-child { border-right: 0; }
    .tariff-option::before {
      right: 16px;
      bottom: 0;
      left: 16px;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
    }
    .tariff-option[aria-checked="true"] {
      background: linear-gradient(145deg, rgba(255,69,62,.12), rgba(255,69,62,.025) 62%);
    }
    .tariff-option[aria-checked="true"]::before { transform: scaleX(1); }
    .tariff-option span,
    .tariff-option small {
      color: rgba(255,255,255,.42);
      font: 650 7.5px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .tariff-option strong { font-size: clamp(14px,1.3vw,19px); line-height: 1.05; letter-spacing: -.025em; }
    .tariff-option em {
      max-width: 34ch;
      color: rgba(255,255,255,.53);
      font-size: 9.5px;
      font-style: normal;
      line-height: 1.35;
    }
    .tariff-option small { align-self: end; color: rgba(255,255,255,.68); letter-spacing: .04em; text-transform: none; }
    .tariff-option[aria-checked="true"] span,
    .tariff-option[aria-checked="true"] small { color: var(--accent); }

    .service-blueprint {
      display: grid;
      grid-template-columns: minmax(150px,.55fr) minmax(0,1.45fr);
      align-items: stretch;
      min-height: 56px;
      border-bottom: 1px solid rgba(255,255,255,.11);
    }
    .service-blueprint-head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      padding-right: 18px;
    }
    .service-blueprint-head span {
      color: rgba(255,255,255,.35);
      font: 650 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .service-blueprint-head strong { color: rgba(255,255,255,.9); font-size: 12px; }
    .service-blueprint ul {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .service-blueprint li {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 10px 9px 10px 20px;
      border-left: 1px solid rgba(255,255,255,.09);
      color: rgba(255,255,255,.67);
      font-size: 10.5px;
      line-height: 1.35;
      line-height: 1.28;
    }
    .service-blueprint li::before {
      content: "";
      position: absolute;
      left: 9px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(255,69,62,.48);
    }

    .tariff-calculator {
      display: grid;
      grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);
      gap: 0;
      min-height: 0;
    }
    .calc-controls {
      display: grid;
      grid-template-columns: minmax(0,1.25fr) repeat(2,minmax(130px,.75fr));
      align-content: center;
      gap: clamp(12px,1.7vw,26px);
      min-width: 0;
      padding: 12px 22px 10px 0;
      border: 0;
    }
    .calc-field { align-self: center; }
    .calc-result {
      display: grid;
      align-content: center;
      gap: 8px;
      min-width: 0;
      padding: 12px 0 10px 24px;
      border: 0;
      border-left: 1px solid rgba(255,255,255,.12);
      border-radius: 0;
      background: radial-gradient(circle at 88% 18%, rgba(255,68,61,.1), transparent 42%);
    }
    .calc-result-head { display: grid; grid-template-columns: minmax(92px,.42fr) minmax(0,1fr); align-items: end; }
    .calc-result-head strong {
      min-width: 0;
      font-size: clamp(22px,1.9vw,31px);
      letter-spacing: -.045em;
      text-align: right;
      white-space: nowrap;
    }
    .calc-result > p { margin: 0; font-size: 8.5px; line-height: 1.35; }
    .estimate-copy {
      justify-self: start;
      min-height: 28px;
      margin-top: 1px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      background: rgba(255,255,255,.025);
      color: rgba(255,255,255,.74);
      font: 650 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: border-color .2s ease, color .2s ease, background-color .2s ease;
    }
    .estimate-copy:hover,
    .estimate-copy:focus-visible { border-color: rgba(255,78,70,.64); color: #fff; background: rgba(255,70,62,.08); }
    .estimate-copy[data-state="copied"] { border-color: rgba(114,221,145,.52); color: #8be5a4; }

    .services-footer {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
      gap: 20px;
      min-height: 44px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .services-footer p { max-width: 78ch; margin: 0; color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.4; }
    .services-footer p strong { display: block; margin-bottom: 2px; color: rgba(255,255,255,.82); font-size: 10px; }
    .modal[data-kind="services"] .services-footer button {
      min-height: 42px;
      border: 1px solid rgba(255,76,68,.85);
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 26px rgba(255,65,57,.12);
    }

    html[data-theme="light"] .modal[data-kind="services"] .modal-panel {
      background:
        radial-gradient(circle at 84% 4%, rgba(230,54,46,.11), transparent 30%),
        linear-gradient(145deg, rgba(250,248,245,.97), rgba(239,235,231,.97));
    }
    html[data-theme="light"] .services-scene-head .modal-description,
    html[data-theme="light"] .tariff-option em,
    html[data-theme="light"] .service-blueprint li { color: rgba(20,20,18,.62); }
    html[data-theme="light"] .tariff-option span,
    html[data-theme="light"] .tariff-option small,
    html[data-theme="light"] .pricing-stagebar,
    html[data-theme="light"] .service-blueprint-head span { color: rgba(20,20,18,.45); }
    html[data-theme="light"] .tariff-option strong,
    html[data-theme="light"] .service-blueprint-head strong,
    html[data-theme="light"] .services-footer p strong { color: rgba(20,20,18,.92); }
    html[data-theme="light"] .tariff-selector,
    html[data-theme="light"] .service-pricing,
    html[data-theme="light"] .service-blueprint,
    html[data-theme="light"] .services-footer { border-color: rgba(20,20,18,.15); }
    html[data-theme="light"] .tariff-option { border-color: rgba(20,20,18,.12); }
    html[data-theme="light"] .service-blueprint li,
    html[data-theme="light"] .calc-result { border-color: rgba(20,20,18,.12); }
    html[data-theme="light"] .tariff-option[aria-checked="true"] { background: linear-gradient(145deg, rgba(236,55,47,.11), rgba(236,55,47,.02)); }
    html[data-theme="light"] .estimate-copy { color: rgba(20,20,18,.7); border-color: rgba(20,20,18,.2); }
    html[data-theme="light"] .services-footer p { color: rgba(20,20,18,.52); }

    @media (max-width: 760px) {
      .modal[data-kind="services"] .modal-panel {
        height: min(740px, calc(100dvh - 12px));
      }
      .modal-body--services { gap: 9px; }
      .services-scene-head { grid-template-columns: 1fr; grid-template-areas: "label" "title" "description"; gap: 0; }
      .services-scene-head .modal-title { margin-top: 5px; font-size: clamp(27px,8.2vw,42px); }
      .services-scene-head .modal-description { max-width: 58ch; margin-top: 6px; font-size: 10px; }
      .service-pricing { grid-template-rows: 24px auto auto auto; }
      .pricing-stagebar { gap: 6px; font-size: 6.5px; }
      .tariff-option { min-height: 82px; padding: 10px; gap: 4px; }
      .tariff-option em { display: none; }
      .tariff-option strong { font-size: 12px; }
      .tariff-option span,
      .tariff-option small { font-size: 6px; }
      .service-blueprint { grid-template-columns: 1fr; }
      .service-blueprint-head { display: none; }
      .service-blueprint ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .service-blueprint li { min-height: 30px; padding-block: 6px; font-size: 7.5px; }
      .service-blueprint li:nth-child(3) { border-top: 1px solid rgba(255,255,255,.08); }
      .service-blueprint li:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
      .tariff-calculator { grid-template-columns: 1fr; }
      .calc-controls { grid-template-columns: 1fr 1fr; padding: 9px 0; gap: 8px 12px; }
      .calc-field--range { grid-column: 1 / -1; }
      .calc-result { padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
      .estimate-breakdown { display: none; }
      .calc-result-head strong { font-size: 22px; }
      .estimate-range { margin-block: 0; }
      .services-footer { gap: 10px; }
      .services-footer p { font-size: 7px; }
      .services-footer p strong { font-size: 8px; }
    }

    @media (max-width: 520px) {
      .pricing-stagebar span { font-size: 0; gap: 0; }
      .pricing-stagebar i { font-size: 7px; }
      .tariff-option { min-height: 73px; padding: 8px; }
      .tariff-option span { display: none; }
      .tariff-option strong { font-size: 10px; }
      .tariff-option small { font-size: 5.5px; line-height: 1.25; }
      .service-blueprint li { font-size: 6.7px; }
      .calc-result > p { display: none; }
      .services-footer p { display: none; }
      .services-footer { grid-template-columns: 1fr; }
      .services-footer button { width: 100%; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .modal-body--services { gap: 6px; }
      .services-scene-head .modal-title { margin-top: 3px; font-size: 28px; }
      .services-scene-head .modal-description { display: none; }
      .service-pricing { grid-template-rows: 20px auto minmax(0,1fr); }
      .pricing-stagebar { font-size: 6px; }
      .tariff-option { min-height: 57px; padding: 7px 10px; gap: 2px; }
      .tariff-option em { display: none; }
      .tariff-option strong { font-size: 11px; }
      .tariff-option small { font-size: 5.5px; }
      .service-blueprint { display: none; }
      .tariff-calculator { grid-template-columns: minmax(0,1.16fr) minmax(270px,.84fr); }
      .calc-controls { padding-block: 6px; gap: 8px 14px; }
      .calc-result { padding-block: 6px; gap: 4px; }
      .estimate-breakdown { display: none; }
      .calc-result > p { display: none; }
      .services-footer { min-height: 34px; padding-top: 6px; }
      .services-footer p { font-size: 7px; }
      .services-footer p strong { display: inline; margin-right: 4px; font-size: 7px; }
    }

    /* Services v6: studio estimate sheet — flat, typographic and deliberately non-SaaS. */
    .modal[data-kind="services"] .modal-panel {
      height: min(820px, calc(100dvh - clamp(12px,4vw,48px)));
      background: #121212;
      box-shadow: 0 32px 100px rgba(0,0,0,.64);
    }
    .modal[data-kind="services"] .modal-head { border-bottom-color: rgba(255,255,255,.11); }
    .modal-body--services { gap: 14px; }
    .services-scene-head {
      grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr);
      column-gap: 60px;
      padding-bottom: 4px;
    }
    .services-scene-head .modal-title {
      margin-top: 9px;
      font-size: clamp(42px,4.15vw,66px);
      line-height: .94;
      letter-spacing: -.065em;
    }
    .services-scene-head .modal-description {
      max-width: 420px;
      padding-left: 18px;
      border-left: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.58);
      font-size: 12px;
      line-height: 1.5;
    }
    .services-scene-head .scene-label { color: var(--accent); }

    .service-pricing {
      grid-template-columns: minmax(240px,.62fr) minmax(0,1.38fr);
      grid-template-rows: 82px minmax(0,1fr);
      border-top: 1px solid rgba(255,255,255,.15);
    }
    .pricing-stagebar { display: none; }
    .tariff-selector {
      grid-column: 1;
      grid-row: 1 / 3;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3,minmax(0,1fr));
      overflow: visible;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.13);
      border-bottom: 1px solid rgba(255,255,255,.13);
      border-radius: 0;
      background: transparent;
    }
    .tariff-option {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto 1fr;
      gap: 7px 14px;
      min-height: 0;
      padding: 18px 24px 16px 18px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: transparent;
    }
    .tariff-option:last-child { border-bottom: 0; }
    .tariff-option::before {
      top: 18px;
      right: auto;
      bottom: 18px;
      left: -1px;
      width: 2px;
      height: auto;
      transform: scaleY(0);
      transform-origin: top;
    }
    .tariff-option[aria-checked="true"] { background: rgba(255,255,255,.025); }
    .tariff-option[aria-checked="true"]::before { transform: scaleY(1); }
    .tariff-option span { grid-column: 1 / -1; font-size: 9px; }
    .tariff-option strong {
      grid-column: 1 / -1;
      overflow: visible;
      font-size: clamp(16px,1.35vw,20px);
      line-height: 1.08;
      white-space: normal;
    }
    .tariff-option em {
      grid-column: 1;
      align-self: end;
      max-width: none;
      color: rgba(255,255,255,.46);
      font-size: 10px;
    }
    .tariff-option small {
      grid-column: 2;
      align-self: end;
      color: rgba(255,255,255,.5);
      font-size: 9px;
      text-align: right;
      white-space: nowrap;
    }
    .tariff-option[aria-checked="true"] span,
    .tariff-option[aria-checked="true"] small { color: var(--accent); }

    .service-blueprint {
      grid-column: 2;
      grid-row: 1;
      grid-template-columns: minmax(135px,.56fr) minmax(0,1.44fr);
      min-height: 82px;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }
    .service-blueprint-head { padding: 14px 18px; }
    .service-blueprint-head span { font-size: 9px; }
    .service-blueprint-head strong { font-size: 12px; }
    .service-blueprint li {
      padding: 12px 8px 12px 18px;
      color: rgba(255,255,255,.58);
      font-size: 10px;
      line-height: 1.35;
    }
    .service-blueprint li::before { left: 7px; width: 3px; height: 3px; box-shadow: none; }

    .tariff-calculator {
      grid-column: 2;
      grid-row: 2;
      grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr);
      min-height: 0;
    }
    .calc-controls {
      grid-template-columns: 1fr 1fr;
      align-content: center;
      gap: 12px 24px;
      padding: 18px 24px 14px 20px;
    }
    .calc-field { gap: 6px; }
    .calc-field > span { font-size: 9px; }
    .calc-field small { font-size: 8.5px; }
    .calc-field select { min-height: 38px; font-size: 11px; }
    .calc-modules {
      grid-column: 1 / -1;
      display: grid;
      gap: 9px;
      padding-top: 11px;
      border-top: 1px solid rgba(255,255,255,.11);
    }
    .service-recommendation {
      grid-column: 1 / -1;
      position: relative;
      margin: 0;
      padding: 9px 12px 9px 28px;
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.62);
      font-size: 9px;
      line-height: 1.35;
    }
    .service-recommendation::before {
      content: "↳";
      position: absolute;
      left: 11px;
      color: var(--accent);
      font-weight: 700;
    }
    .calc-modules > span {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      color: rgba(255,255,255,.7);
      font-size: 9px;
      font-weight: 650;
    }
    .calc-modules > span small {
      color: rgba(255,255,255,.34);
      font: 650 6.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .calc-module-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .calc-module-grid label {
      position: relative;
      display: grid;
      align-content: center;
      gap: 3px;
      min-width: 0;
      min-height: 44px;
      padding: 8px 8px 8px 13px;
      border-right: 1px solid rgba(255,255,255,.1);
      cursor: pointer;
    }
    .calc-module-grid label:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.1); }
    .calc-module-grid label:nth-child(3n) { border-right: 0; }
    .calc-module-grid label:last-child { border-right: 0; }
    .calc-module-grid input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .calc-module-grid label::before {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 0;
      width: 2px;
      background: var(--accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .18s ease;
    }
    .calc-module-grid label::after {
      content: "+";
      position: absolute;
      top: 7px;
      right: 7px;
      color: rgba(255,255,255,.32);
      font: 700 10px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
    }
    .calc-module-grid label:has(input:checked)::after { content: "✓"; color: var(--accent); }
    .calc-module-grid label:has(input:checked) { background: rgba(255,255,255,.035); }
    .calc-module-grid label:has(input:checked)::before { transform: scaleY(1); }
    .calc-module-grid label:has(input:checked) span { color: var(--accent); }
    .calc-module-grid label:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: -1px; }
    .calc-module-grid span { padding-right: 10px; color: rgba(255,255,255,.8); font-size: 10px; font-weight: 650; line-height: 1.15; }
    .calc-module-grid small { overflow: hidden; color: rgba(255,255,255,.44); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .calc-module-feedback {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: start;
      gap: 12px;
      min-height: 25px;
    }
    .calc-module-feedback p {
      margin: 0;
      color: rgba(255,255,255,.48);
      font-size: 10px;
      line-height: 1.35;
    }
    .calc-module-feedback button {
      padding: 0 0 3px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.25);
      background: transparent;
      color: rgba(255,255,255,.56);
      font: 650 6.5px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .calc-module-feedback button:hover,
    .calc-module-feedback button:focus-visible { border-color: var(--accent); color: var(--accent); }
    .calc-result {
      align-content: center;
      gap: 9px;
      padding: 18px 0 14px 22px;
      border-left: 1px solid rgba(255,255,255,.13);
      background: transparent;
    }
    .calc-result::before {
      content: "СМЕТА / 01";
      color: var(--accent);
      font: 650 6.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .12em;
    }
    html[lang="en"] .calc-result::before { content: "ESTIMATE / 01"; }
    .calc-result-head {
      display: block;
    }
    .calc-result-head span { display: block; margin-bottom: 7px; }
    .calc-result-head strong {
      display: block;
      font-size: clamp(24px,2.15vw,34px);
      text-align: left;
    }
    .calc-result > p { font-size: 9.5px; }
    .estimate-breakdown i,
    .estimate-time span { font-size: 8.5px; }
    .estimate-breakdown b,
    .estimate-time strong { font-size: 9.5px; }
    .estimate-range-track { height: 3px; }
    .estimate-breakdown { padding-block: 4px; }
    .estimate-breakdown-modules { grid-column: 1 / -1; }
    .estimate-breakdown-modules b { overflow: hidden; max-width: 62%; text-overflow: ellipsis; white-space: nowrap; }
    .estimate-copy {
      min-height: 24px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.28);
      border-radius: 0;
      background: transparent;
      color: rgba(255,255,255,.58);
    }
    .estimate-copy:hover,
    .estimate-copy:focus-visible { border-color: var(--accent); background: transparent; }
    .services-footer {
      min-height: 46px;
      padding-top: 12px;
    }
    .services-footer p { max-width: 68ch; font-size: 9.5px; line-height: 1.45; }
    .services-footer p strong { font-size: 10.5px; }
    .modal[data-kind="services"] .services-footer button {
      min-height: 38px;
      padding-inline: 19px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      font-size: 10px;
    }

    html[data-theme="light"] .modal[data-kind="services"] .modal-panel { background: rgba(245,242,238,.98); }
    html[data-theme="light"] .services-scene-head .modal-description { border-color: rgba(20,20,18,.2); }
    html[data-theme="light"] .tariff-selector,
    html[data-theme="light"] .tariff-option,
    html[data-theme="light"] .service-blueprint,
    html[data-theme="light"] .calc-result { border-color: rgba(20,20,18,.15); }
    html[data-theme="light"] .tariff-option[aria-checked="true"] { background: rgba(20,20,18,.025); }
    html[data-theme="light"] .calc-modules,
    html[data-theme="light"] .calc-module-grid,
    html[data-theme="light"] .calc-module-grid label { border-color: rgba(20,20,18,.14); }
    html[data-theme="light"] .calc-modules > span { color: rgba(20,20,18,.72); }
    html[data-theme="light"] .calc-modules > span small,
    html[data-theme="light"] .calc-module-grid small,
    html[data-theme="light"] .calc-module-feedback p { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .calc-module-grid span { color: rgba(20,20,18,.78); }
    html[data-theme="light"] .calc-module-grid label:has(input:checked) { background: rgba(20,20,18,.035); }
    html[data-theme="light"] .service-recommendation { border-color: rgba(20,20,18,.14); color: rgba(20,20,18,.6); }
    html[data-theme="light"] .calc-module-grid label::after { color: rgba(20,20,18,.36); }
    html[data-theme="light"] .calc-module-grid label:has(input:checked)::after { color: var(--accent); }
    html[data-theme="light"] .calc-module-feedback button { color: rgba(20,20,18,.58); border-color: rgba(20,20,18,.25); }

    @media (max-width: 760px) {
      .modal-body--services { gap: 9px; }
      .services-scene-head { grid-template-columns: 1fr; padding-bottom: 0; }
      .services-scene-head .modal-title { margin-top: 5px; font-size: clamp(30px,9vw,43px); }
      .services-scene-head .modal-description {
        max-width: none;
        margin-top: 7px;
        padding-left: 0;
        border-left: 0;
        font-size: 9px;
      }
      .service-pricing {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0,1fr);
      }
      .tariff-selector {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(3,minmax(0,1fr));
        grid-template-rows: 1fr;
        border-right: 0;
      }
      .tariff-option {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px;
        min-height: 78px;
        padding: 10px 9px 9px;
        border-right: 1px solid rgba(255,255,255,.1);
        border-bottom: 0;
      }
      .tariff-option:last-child { border-right: 0; }
      .tariff-option::before {
        top: auto;
        right: 9px;
        bottom: -1px;
        left: 9px;
        width: auto;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
      }
      .tariff-option[aria-checked="true"]::before { transform: scaleX(1); }
      .tariff-option span,
      .tariff-option strong,
      .tariff-option small { grid-column: 1; text-align: left; }
      .tariff-option strong { font-size: 11px; }
      .tariff-option em { display: none; }
      .tariff-option small { font-size: 5.8px; white-space: normal; }
      .service-blueprint {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .service-blueprint-head { display: none; }
      .service-blueprint ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .service-blueprint li { min-height: 30px; padding-block: 6px; font-size: 7px; }
      .tariff-calculator {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
      }
      .calc-controls { padding: 12px 0; gap: 10px 12px; }
      .calc-modules { gap: 6px; padding-top: 7px; }
      .calc-modules > span { font-size: 8px; }
      .service-recommendation { padding-block: 7px; font-size: 10px; }
      .calc-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .calc-module-grid label { min-height: 46px; padding: 7px 22px 7px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
      .calc-module-grid label:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.1); }
      .calc-module-grid label:nth-child(2n) { border-right: 0; }
      .calc-module-grid label:last-child { grid-column: 1 / -1; border-bottom: 0; }
      .calc-module-grid span { font-size: 10px; }
      .calc-module-grid small { display: block; font-size: 9px; }
      .calc-module-feedback p { font-size: 10px; }
      .calc-result {
        align-content: start;
        padding: 14px 0 0;
        border-top: 1px solid rgba(255,255,255,.13);
        border-left: 0;
      }
      .calc-result::before { display: none; }
      .calc-result-head { display: block; }
      .calc-result-head span { margin: 0 0 7px; }
      .calc-result-head strong { font-size: 26px; text-align: left; white-space: normal; }
      .services-footer { padding-top: 9px; }
    }

    @media (max-width: 520px) {
      .tariff-option span { display: block; font-size: 9px; }
      .tariff-option small { display: block; }
      .service-blueprint li { font-size: 6.6px; }
      .calc-result > p {
        display: block;
        max-width: 48ch;
        color: rgba(255,255,255,.46);
        font-size: 7.5px;
        line-height: 1.4;
      }
      html[data-theme="light"] .calc-result > p { color: rgba(20,20,18,.52); }
      .services-footer p { display: none; }
    }

    @media (max-width: 760px) and (max-height: 700px) {
      .modal[data-kind="services"] .modal-panel { height: calc(100dvh - 8px); }
      .modal-body--services {
        display: block;
        overflow-y: auto;
        padding-block: 14px 20px;
      }
      .modal-body--services > * + * { margin-top: 12px; }
      .services-scene-head .modal-title { font-size: 28px; }
      .services-scene-head .modal-description { display: block; }
      .service-pricing { display: grid; grid-template-rows: auto auto auto; }
      .tariff-option { min-height: 68px; padding: 8px; }
      .tariff-option strong { font-size: 11px; }
      .service-blueprint { display: grid; }
      .tariff-calculator { grid-row: 3; }
      .calc-controls { padding: 10px 0; gap: 9px 10px; }
      .calc-field { gap: 5px; }
      .calc-field small { display: block; }
      .volume-scale { display: flex; }
      .calc-modules { gap: 7px; padding-top: 7px; }
      .calc-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .calc-module-grid label { min-height: 46px; padding-block: 7px; }
      .calc-module-grid label:last-child { grid-column: 1 / -1; }
      .calc-module-grid span { font-size: 10px; }
      .calc-module-grid small { display: block; font-size: 9px; }
      .calc-module-feedback { display: grid; }
      .calc-field select { min-height: 30px; }
      .calc-result { gap: 7px; padding-top: 10px; }
      .estimate-range { margin-block: 0; }
      .estimate-breakdown,
      .calc-result > p { display: grid; }
      .estimate-copy { min-height: 20px; }
      .services-footer { min-height: 34px; padding-top: 8px; }
      .modal[data-kind="services"] .services-footer button { width: 100%; min-height: 34px; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .services-scene-head .modal-title { font-size: 30px; }
      .service-pricing { grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); grid-template-rows: 58px minmax(0,1fr); }
      .tariff-selector { grid-column: 1; grid-row: 1 / 3; grid-template-columns: 1fr; grid-template-rows: repeat(3,1fr); }
      .tariff-option { min-height: 0; padding: 7px 12px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
      .tariff-option span { display: none; }
      .tariff-option strong { font-size: 10px; }
      .tariff-option small { font-size: 5.5px; }
      .service-blueprint { display: grid; grid-column: 2; grid-row: 1; }
      .service-blueprint ul { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .service-blueprint li { min-height: 0; font-size: 6px; }
      .tariff-calculator { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(250px,.85fr); }
      .calc-controls { padding: 7px 14px; gap: 6px 12px; }
      .calc-result { padding: 7px 0 6px 14px; }
      .calc-result::before { display: none; }
    }

    /* Process modal v2: an operating map instead of a generic list of steps. */
    .modal[data-kind="process"] .modal-panel {
      background:
        radial-gradient(42rem 26rem at 88% 12%, rgba(249,65,55,.09), transparent 68%),
        linear-gradient(135deg, rgba(255,255,255,.018), transparent 34%),
        #111;
    }

    .modal-body--process {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(18px, 2vw, 30px);
      padding: clamp(24px, 2.7vw, 40px) clamp(28px, 3.5vw, 54px) clamp(26px, 3vw, 44px);
    }

    .process-scene-head {
      grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
      align-items: end;
      gap: 8px clamp(34px, 4.5vw, 68px);
    }

    .process-scene-head .modal-title {
      max-width: 760px;
      font-size: clamp(36px, 3.25vw, 48px);
      line-height: .96;
      text-wrap: balance;
    }

    .process-scene-head .modal-description {
      max-width: 430px;
      margin: 0 0 3px;
      font-size: clamp(12px, .95vw, 15px);
      line-height: 1.45;
    }

    .process-layout {
      display: grid;
      min-height: 0;
      grid-template-columns: minmax(330px, .82fr) minmax(440px, 1.18fr);
      gap: clamp(14px, 1.6vw, 24px);
    }

    .process-route {
      position: relative;
      display: grid;
      min-height: 0;
      grid-template-rows: repeat(5, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 3px;
      background: rgba(255,255,255,.012);
      list-style: none;
    }

    .process-route li {
      display: block;
      min-height: 0;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .process-route li:last-child { border-bottom: 0; }

    .process-tab {
      position: relative;
      display: grid;
      width: 100%;
      height: 100%;
      min-height: 58px;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 14px 10px 16px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background .25s ease, color .25s ease;
    }

    .process-tab::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 2px;
      height: auto;
      background: var(--accent);
      opacity: 0;
      transform: none;
      transition: opacity .2s ease;
    }

    .process-tab::after {
      content: "";
      position: absolute;
      right: 14px;
      bottom: -1px;
      left: 58px;
      height: 1px;
      background: linear-gradient(90deg, rgba(249,65,55,.3), transparent 72%);
      opacity: 0;
      transform: scaleX(.28);
      transform-origin: left;
      transition: opacity .25s ease, transform .45s cubic-bezier(.2,.75,.2,1);
    }

    .process-tab:hover { background: rgba(255,255,255,.025); }
    .process-tab[aria-selected="true"] { background: rgba(255,255,255,.055); }
    .process-tab[aria-selected="true"]::before,
    .process-tab[aria-selected="true"]::after { opacity: 1; }
    .process-tab[aria-selected="true"]::after { transform: scaleX(1); }

    .process-tab-index {
      color: rgba(255,255,255,.3);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .process-tab-copy {
      display: grid;
      min-width: 0;
      gap: 3px;
    }

    .process-tab-copy strong {
      overflow: hidden;
      color: rgba(255,255,255,.83);
      font-size: clamp(13px, 1.05vw, 16px);
      font-weight: 650;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .process-tab-copy small {
      overflow: hidden;
      color: rgba(255,255,255,.42);
      font-size: clamp(9px, .72vw, 11px);
      font-weight: 500;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .process-tab > i {
      color: rgba(255,255,255,.3);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 8px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-tab[aria-selected="true"] .process-tab-index,
    .process-tab[aria-selected="true"] > i { color: var(--accent); }
    .process-tab[aria-selected="true"] .process-tab-copy strong { color: white; }
    .process-tab:focus-visible { outline: 1px solid rgba(249,65,55,.8); outline-offset: -3px; }
    .process-tab:focus-visible .process-tab-copy strong { text-decoration: none; }

    .process-assurance {
      --process-progress: 20%;
      position: relative;
      display: grid;
      min-width: 0;
      min-height: 0;
      grid-template-rows: auto auto auto auto;
      align-content: space-between;
      gap: clamp(9px, 1vw, 14px);
      overflow: hidden;
      padding: clamp(16px, 1.6vw, 24px);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 3px;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        rgba(5,5,5,.32);
      background-size: 28px 28px, 28px 28px, auto;
      isolation: isolate;
    }

    .process-assurance::before {
      content: attr(data-step);
      position: absolute;
      z-index: -1;
      top: 48%;
      right: clamp(6px, 1.2vw, 18px);
      color: rgba(255,255,255,.027);
      font-size: clamp(150px, 16vw, 240px);
      font-weight: 760;
      line-height: .7;
      letter-spacing: -.09em;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .process-assurance::after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: var(--process-progress);
      height: 2px;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(249,65,55,.28);
      transition: width .55s cubic-bezier(.2,.75,.2,1);
    }

    .process-panel-meta,
    .process-panel-footer {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .process-panel-meta {
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.11);
      color: rgba(255,255,255,.42);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-panel-meta b { color: var(--accent); font-size: 1.15em; }

    .process-panel-copy {
      position: relative;
      z-index: 1;
      align-self: center;
      max-width: 620px;
    }

    .process-panel-copy > span {
      display: block;
      margin-bottom: 9px;
      color: rgba(255,255,255,.45);
      font-size: clamp(9px, .72vw, 11px);
      font-weight: 600;
    }

    .process-panel-copy h3 {
      max-width: 600px;
      margin: 0;
      font-size: clamp(24px, 2.4vw, 37px);
      font-weight: 680;
      line-height: 1.02;
      letter-spacing: -.045em;
      text-wrap: balance;
    }

    .process-panel-copy p {
      max-width: 590px;
      margin: 8px 0 0;
      color: rgba(255,255,255,.61);
      font-size: clamp(10px, .85vw, 13px);
      line-height: 1.42;
    }

    .process-outcomes {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 0;
      border-block: 1px solid rgba(255,255,255,.11);
    }

    .process-outcomes div {
      min-width: 0;
      padding: 9px 12px 10px;
      border-right: 1px solid rgba(255,255,255,.09);
    }

    .process-outcomes div:first-child { padding-left: 0; }
    .process-outcomes div:last-child { padding-right: 0; border-right: 0; }

    .process-outcomes dt {
      margin-bottom: 5px;
      color: rgba(255,255,255,.32);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-outcomes dd {
      margin: 0;
      color: rgba(255,255,255,.78);
      font-size: clamp(9px, .72vw, 11px);
      line-height: 1.3;
    }

    .process-panel-footer > span {
      color: rgba(255,255,255,.34);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .process-panel-footer button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin: 0;
      padding: 0 18px;
      border: 0;
      border-radius: 2px;
      background: #f5f4ef;
      color: #111;
      cursor: pointer;
      font: 700 11px/1 "Onest", Arial, sans-serif;
      transition: background .2s ease, color .2s ease;
    }

    .process-panel-footer button:hover { background: var(--accent); color: white; }

    .process-assurance.is-switching .process-panel-copy,
    .process-assurance.is-switching .process-outcomes,
    .process-assurance.is-switching .process-panel-meta { opacity: .08; transform: translateY(3px); }

    .process-panel-copy,
    .process-outcomes,
    .process-panel-meta { transition: opacity .18s ease, transform .18s ease; }

    html[data-theme="light"] .modal[data-kind="process"] .modal-panel {
      background:
        radial-gradient(42rem 26rem at 88% 12%, rgba(249,65,55,.09), transparent 68%),
        linear-gradient(135deg, rgba(255,255,255,.72), transparent 34%),
        #f5f4ef;
    }

    html[data-theme="light"] .process-route,
    html[data-theme="light"] .process-assurance { border-color: rgba(20,20,18,.16); }
    html[data-theme="light"] .process-route { background: rgba(20,20,18,.012); }
    html[data-theme="light"] .process-route li,
    html[data-theme="light"] .process-panel-meta,
    html[data-theme="light"] .process-outcomes { border-color: rgba(20,20,18,.12); }
    html[data-theme="light"] .process-tab:hover { background: rgba(20,20,18,.035); }
    html[data-theme="light"] .process-tab[aria-selected="true"] { background: rgba(20,20,18,.06); }
    html[data-theme="light"] .process-tab-index,
    html[data-theme="light"] .process-tab > i,
    html[data-theme="light"] .process-panel-meta,
    html[data-theme="light"] .process-panel-copy > span,
    html[data-theme="light"] .process-panel-footer > span { color: rgba(20,20,18,.5); }
    html[data-theme="light"] .process-tab-copy strong,
    html[data-theme="light"] .process-outcomes dd { color: rgba(20,20,18,.82); }
    html[data-theme="light"] .process-tab-copy small,
    html[data-theme="light"] .process-panel-copy p { color: rgba(20,20,18,.6); }
    html[data-theme="light"] .process-tab[aria-selected="true"] .process-tab-copy strong { color: #151514; }
    html[data-theme="light"] .process-assurance {
      background:
        linear-gradient(rgba(20,20,18,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,20,18,.025) 1px, transparent 1px),
        rgba(255,255,255,.34);
      background-size: 28px 28px, 28px 28px, auto;
    }
    html[data-theme="light"] .process-assurance::before { color: rgba(20,20,18,.035); }
    html[data-theme="light"] .process-outcomes div { border-color: rgba(20,20,18,.1); }
    html[data-theme="light"] .process-outcomes dt { color: rgba(20,20,18,.42); }
    html[data-theme="light"] .process-panel-footer button { background: #181817; color: white; }
    html[data-theme="light"] .process-panel-footer button:hover { background: var(--accent); }

    @media (max-width: 900px) {
      .modal-body--process { gap: 14px; padding: 18px 20px 22px; }
      .process-scene-head { gap: 6px 24px; }
      .process-scene-head .modal-title { font-size: clamp(32px, 5vw, 44px); }
      .process-layout { grid-template-columns: minmax(260px, .74fr) minmax(380px, 1.26fr); gap: 12px; }
      .process-tab { grid-template-columns: 32px minmax(0,1fr); gap: 8px; min-height: 48px; padding: 8px 10px 8px 12px; }
      .process-tab > i { display: none; }
      .process-tab::after { left: 44px; }
      .process-assurance { gap: 11px; padding: 15px; }
      .process-panel-copy h3 { font-size: clamp(21px, 3vw, 29px); }
      .process-outcomes div { padding: 9px 9px 10px; }
      .process-panel-footer button { min-height: 38px; }
    }

    @media (max-width: 700px) {
      .modal-body--process { grid-template-rows: auto minmax(0,1fr); gap: 12px; padding: 15px 16px 18px; }
      .process-scene-head { grid-template-columns: 1fr; gap: 5px; }
      .process-scene-head .scene-label { font-size: 8px; }
      .process-scene-head .modal-title { font-size: clamp(27px, 8vw, 38px); }
      .process-scene-head .modal-description { max-width: 620px; font-size: 10px; line-height: 1.35; }
      .process-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 10px; }
      .process-route { grid-template-columns: repeat(5, minmax(0,1fr)); grid-template-rows: 1fr; }
      .process-route li { min-width: 0; border-right: 1px solid rgba(255,255,255,.09); border-bottom: 0; }
      .process-route li:last-child { border-right: 0; }
      .process-tab { display: flex; min-height: 52px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 7px 8px; }
      .process-tab::before { inset: auto 0 -1px; width: auto; height: 2px; }
      .process-tab::after,
      .process-tab-copy small,
      .process-tab > i { display: none; }
      .process-tab-copy strong { font-size: clamp(9px, 2.5vw, 12px); white-space: normal; }
      .process-tab-index { font-size: 8px; }
      .process-assurance { grid-template-rows: auto auto auto auto; align-content: start; align-self: start; gap: 9px; padding: 13px; }
      .process-assurance::before { font-size: clamp(105px, 38vw, 160px); }
      .process-panel-meta { padding-bottom: 8px; font-size: 8px; }
      .process-panel-copy > span { margin-bottom: 5px; font-size: 8px; }
      .process-panel-copy h3 { font-size: clamp(19px, 5.6vw, 25px); }
      .process-panel-copy p { margin-top: 7px; font-size: 9px; line-height: 1.35; }
      .process-outcomes div { padding: 8px 7px; }
      .process-outcomes dt { margin-bottom: 3px; font-size: 6.5px; }
      .process-outcomes dd { font-size: 8px; line-height: 1.22; }
      .process-panel-footer > span { display: none; }
      .process-panel-footer button { width: 100%; min-height: 36px; padding-inline: 14px; font-size: 10px; }
    }

    @media (max-width: 420px) {
      .process-scene-head .modal-description { display: none; }
      .process-route { min-height: 48px; }
      .process-tab { min-height: 46px; padding: 6px; }
      .process-tab-copy strong { font-size: 9px; line-height: 1.05; }
      .process-assurance { min-height: min(46dvh, 380px); align-content: space-between; }
      .process-panel-copy p { display: block; }
      .process-outcomes { grid-template-columns: 1fr 1fr; }
      .process-outcomes div { border-bottom: 1px solid rgba(255,255,255,.09); }
      .process-outcomes div:nth-child(2) { border-right: 0; }
      .process-outcomes div:last-child { grid-column: 1 / -1; padding-left: 0; border-bottom: 0; }
    }

    @media (max-width: 360px) and (max-height: 650px) {
      .process-panel-copy p { display: none; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .modal-body--process { gap: 8px; padding: 8px 18px 10px; }
      .process-scene-head { grid-template-columns: minmax(0,1.2fr) minmax(220px,.8fr); gap: 4px 22px; }
      .process-scene-head .scene-label { font-size: 7px; }
      .process-scene-head .modal-title { font-size: clamp(24px, 3.2vw, 31px); }
      .process-scene-head .modal-description { display: block; font-size: 8px; line-height: 1.25; }
      .process-layout { grid-template-columns: minmax(260px,.78fr) minmax(360px,1.22fr); grid-template-rows: 1fr; gap: 10px; }
      .process-route { grid-template-columns: 1fr; grid-template-rows: repeat(5,minmax(0,1fr)); }
      .process-route li { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
      .process-tab { display: grid; min-height: 0; grid-template-columns: 26px minmax(0,1fr); gap: 7px; padding: 3px 8px 3px 10px; }
      .process-tab::before { inset: 0 auto 0 0; width: 2px; height: auto; }
      .process-tab-copy strong { font-size: 9px; white-space: nowrap; }
      .process-tab-copy small { display: block; font-size: 7px; }
      .process-assurance { gap: 6px; padding: 9px 12px; }
      .process-panel-meta { padding-bottom: 5px; font-size: 7px; }
      .process-panel-copy { align-self: start; }
      .process-panel-copy > span { margin-bottom: 3px; font-size: 7px; }
      .process-panel-copy h3 { font-size: clamp(15px, 2vw, 20px); }
      .process-panel-copy p { margin-top: 4px; font-size: 7.5px; line-height: 1.25; }
      .process-outcomes { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .process-outcomes div,
      .process-outcomes div:last-child { grid-column: auto; padding: 5px 6px; border-bottom: 0; }
      .process-outcomes div:first-child { padding-left: 0; }
      .process-outcomes dt { font-size: 5.5px; }
      .process-outcomes dd { font-size: 6.5px; }
      .process-panel-footer button { width: auto; min-height: 28px; padding-inline: 11px; font-size: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .process-tab,
      .process-tab::after,
      .process-assurance::after,
      .process-panel-copy,
      .process-outcomes,
      .process-panel-meta { transition: none; }
    }

    /* Process modal v3: restrained editorial sheet, no dashboard decoration. */
    .modal[data-kind="process"] .modal-panel {
      background: linear-gradient(116deg, #111 0%, #111 72%, #151311 100%);
      box-shadow: 0 42px 120px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.025);
    }

    .modal-body--process {
      gap: clamp(18px, 2.2vw, 30px);
      padding: clamp(24px, 2.8vw, 42px) clamp(30px, 3.8vw, 58px) clamp(28px, 3vw, 46px);
    }

    .process-scene-head {
      grid-template-columns: minmax(0, 1.22fr) minmax(270px, .78fr);
      gap: 8px clamp(42px, 5vw, 78px);
    }

    .process-scene-head .modal-title {
      max-width: 720px;
      font-size: clamp(38px, 3.5vw, 52px);
      line-height: .98;
      letter-spacing: -.045em;
    }

    .process-scene-head .modal-description {
      max-width: 390px;
      color: rgba(255,255,255,.58);
      font-size: clamp(11px, .9vw, 14px);
    }

    .process-layout {
      grid-template-columns: minmax(300px, .7fr) minmax(450px, 1.3fr);
      gap: clamp(28px, 3.5vw, 52px);
    }

    .process-route {
      border: 0;
      border-top: 1px solid rgba(255,255,255,.2);
      border-radius: 0;
      background: transparent;
    }

    .process-route li { border-bottom-color: rgba(255,255,255,.12); }

    .process-tab {
      min-height: 54px;
      grid-template-columns: 40px minmax(0,1fr);
      gap: 12px;
      padding: 8px 2px 8px 0;
      transition: color .18s ease;
    }

    .process-tab::before {
      inset: 50% auto auto 0;
      width: 18px;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0) translateY(-50%);
      transform-origin: left;
      transition: transform .25s cubic-bezier(.2,.7,.2,1);
    }

    .process-tab::after,
    .process-tab > i { display: none; }
    .process-tab:hover,
    .process-tab[aria-selected="true"] { background: transparent; }
    .process-tab[aria-selected="true"]::before { transform: scaleX(1) translateY(-50%); }

    .process-tab-index {
      padding-left: 0;
      color: rgba(255,255,255,.34);
      font-variant-numeric: tabular-nums;
      transition: padding-left .25s cubic-bezier(.2,.7,.2,1), color .18s ease;
    }

    .process-tab[aria-selected="true"] .process-tab-index {
      padding-left: 24px;
      color: var(--accent);
    }

    .process-tab-copy {
      gap: 3px;
      transition: transform .28s cubic-bezier(.22,.75,.18,1);
    }

    .process-tab:hover .process-tab-copy,
    .process-tab[aria-selected="true"] .process-tab-copy { transform: translateX(3px); }

    .process-tab-copy strong {
      color: rgba(255,255,255,.75);
      font-size: clamp(13px, 1vw, 15px);
      font-weight: 590;
      letter-spacing: -.015em;
    }

    .process-tab-copy small {
      color: rgba(255,255,255,.38);
      font-size: clamp(9px, .68vw, 10.5px);
      transition: color .2s ease;
    }

    .process-tab[aria-selected="true"] .process-tab-copy strong { color: white; }
    .process-tab:hover .process-tab-copy small { color: rgba(255,255,255,.48); }
    .process-tab[aria-selected="true"] .process-tab-copy small { color: rgba(255,255,255,.54); }

    .process-assurance {
      --stage-marker: 10%;
      grid-template-rows: auto minmax(0,1fr) auto auto;
      align-content: stretch;
      gap: clamp(12px, 1.25vw, 18px);
      overflow: visible;
      padding: 0 0 0 clamp(24px, 2.5vw, 38px);
      border: 0;
      border-left: 1px solid rgba(255,255,255,.16);
      border-radius: 0;
      background: transparent;
      isolation: auto;
    }

    .process-assurance[data-step="02"] { --stage-marker: 30%; }
    .process-assurance[data-step="03"] { --stage-marker: 50%; }
    .process-assurance[data-step="04"] { --stage-marker: 70%; }
    .process-assurance[data-step="05"] { --stage-marker: 90%; }

    .process-assurance::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 2;
      top: var(--stage-marker);
      left: -1px;
      width: 18px;
      height: 1px;
      background: var(--accent);
      transform: translateY(-50%);
      transition: top .42s cubic-bezier(.22,.75,.18,1);
      pointer-events: none;
    }

    .process-assurance::after { display: none; }

    .process-panel-meta {
      position: relative;
      padding: 10px 0 0;
      border-top: 1px solid rgba(255,255,255,.2);
      border-bottom: 0;
      color: rgba(255,255,255,.42);
      font-size: 9px;
      font-variant-numeric: tabular-nums;
    }

    .process-panel-meta::after {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: var(--process-progress);
      height: 1px;
      background: var(--accent);
      transition: width .48s cubic-bezier(.22,.75,.18,1);
      pointer-events: none;
    }

    .process-panel-folio {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
    }

    .process-panel-folio i,
    .process-panel-folio em {
      color: rgba(255,255,255,.34);
      font-style: normal;
    }

    .process-panel-folio em {
      overflow: hidden;
      max-width: min(190px, 22vw);
      font-family: "Onest", Arial, sans-serif;
      font-size: 9px;
      font-weight: 620;
      letter-spacing: 0;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
    }

    .process-panel-copy {
      align-self: center;
      max-width: 620px;
    }

    .process-panel-copy > span {
      margin-bottom: 10px;
      color: rgba(255,255,255,.44);
      font-size: clamp(9px, .7vw, 10.5px);
      font-weight: 540;
    }

    .process-panel-copy h3 {
      max-width: 610px;
      font-size: clamp(27px, 2.6vw, 40px);
      font-weight: 610;
      line-height: 1.02;
    }

    .process-panel-copy p {
      max-width: 62ch;
      margin-top: 10px;
      color: rgba(255,255,255,.57);
      font-size: clamp(10px, .8vw, 12.5px);
      line-height: 1.45;
    }

    .process-outcomes {
      border-top: 1px solid rgba(255,255,255,.16);
      border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .process-outcomes div {
      padding: 11px 14px 12px;
      border-right-color: rgba(255,255,255,.1);
    }

    .process-outcomes div:first-child { padding-left: 0; }

    .process-outcomes dt {
      color: rgba(255,255,255,.32);
      font-size: 7.5px;
      letter-spacing: .07em;
    }

    .process-outcomes dd {
      color: rgba(255,255,255,.72);
      font-size: clamp(9.5px, .72vw, 11px);
      line-height: 1.3;
    }

    .process-panel-footer > span {
      max-width: 390px;
      color: rgba(255,255,255,.35);
      font-family: "Onest", Arial, sans-serif;
      font-size: 9px;
      font-weight: 520;
      letter-spacing: 0;
      line-height: 1.3;
      text-transform: none;
    }

    .process-panel-footer button {
      min-height: 32px;
      align-self: center;
      gap: 12px;
      padding: 0 0 3px;
      border-bottom: 1px solid var(--accent);
      border-radius: 0;
      background: transparent;
      color: white;
      font-size: 11px;
      transition: color .18s ease, border-color .18s ease;
    }

    .process-panel-footer button:hover {
      border-color: white;
      background: transparent;
      color: var(--accent);
    }

    .process-panel-footer button span {
      display: inline-block;
      transition: transform .24s cubic-bezier(.22,.75,.18,1);
    }

    .process-panel-footer button:hover span { transform: translate(2px, -2px); }

    .process-assurance.is-switching .process-panel-copy,
    .process-assurance.is-switching .process-outcomes,
    .process-assurance.is-switching .process-panel-meta {
      opacity: .08;
      transform: translateY(4px);
    }

    .process-panel-copy,
    .process-outcomes,
    .process-panel-meta {
      transition: opacity .2s ease, transform .32s cubic-bezier(.22,.75,.18,1);
    }

    html[data-theme="light"] .modal[data-kind="process"] .modal-panel {
      background: linear-gradient(116deg, #f5f4ef 0%, #f5f4ef 72%, #f0ede7 100%);
      box-shadow: 0 42px 120px rgba(20,18,16,.24), inset 0 1px rgba(255,255,255,.82);
    }
    html[data-theme="light"] .process-route,
    html[data-theme="light"] .process-assurance { background: transparent; }
    html[data-theme="light"] .process-route { border-color: rgba(20,20,18,.22); }
    html[data-theme="light"] .process-route li,
    html[data-theme="light"] .process-assurance,
    html[data-theme="light"] .process-panel-meta,
    html[data-theme="light"] .process-outcomes { border-color: rgba(20,20,18,.16); }
    html[data-theme="light"] .process-tab:hover,
    html[data-theme="light"] .process-tab[aria-selected="true"] { background: transparent; }
    html[data-theme="light"] .process-tab-copy strong { color: rgba(20,20,18,.72); }
    html[data-theme="light"] .process-tab[aria-selected="true"] .process-tab-copy strong { color: #151514; }
    html[data-theme="light"] .process-tab-copy small,
    html[data-theme="light"] .process-panel-copy p { color: rgba(20,20,18,.57); }
    html[data-theme="light"] .process-tab-index,
    html[data-theme="light"] .process-panel-meta,
    html[data-theme="light"] .process-panel-copy > span,
    html[data-theme="light"] .process-panel-footer > span { color: rgba(20,20,18,.45); }
    html[data-theme="light"] .process-panel-folio i,
    html[data-theme="light"] .process-panel-folio em { color: rgba(20,20,18,.42); }
    html[data-theme="light"] .process-outcomes div { border-color: rgba(20,20,18,.1); }
    html[data-theme="light"] .process-outcomes dt { color: rgba(20,20,18,.4); }
    html[data-theme="light"] .process-outcomes dd { color: rgba(20,20,18,.72); }
    html[data-theme="light"] .process-panel-footer button { background: transparent; color: #171716; }
    html[data-theme="light"] .process-panel-footer button:hover { background: transparent; color: var(--accent); border-color: #171716; }

    @media (max-width: 900px) {
      .process-layout { grid-template-columns: minmax(250px,.7fr) minmax(370px,1.3fr); gap: 24px; }
      .process-assurance { padding-left: 22px; }
      .process-panel-copy h3 { font-size: clamp(22px, 3vw, 29px); }
    }

    @media (max-width: 700px) {
      .process-scene-head { grid-template-columns: 1fr; gap: 5px; }
      .process-scene-head .modal-title {
        max-width: 330px;
        font-size: clamp(27px, 8vw, 36px);
        line-height: .98;
      }
      .process-layout {
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
        gap: 16px;
      }
      .process-route { border: 0; border-block: 1px solid rgba(255,255,255,.16); }
      .process-route li { border-right-color: rgba(255,255,255,.1); }
      .process-tab { min-height: 50px; padding: 7px 6px; }
      .process-tab::before { inset: auto 6px -1px; width: auto; height: 1px; transform: scaleX(0); }
      .process-tab[aria-selected="true"]::before { transform: scaleX(1); }
      .process-tab[aria-selected="true"] .process-tab-index { padding-left: 0; }
      .process-assurance {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        align-content: stretch;
        align-self: stretch;
        gap: 12px;
        padding: 0;
        border-left: 0;
      }
      .process-assurance::before { display: none; }
      .process-panel-meta { padding-top: 9px; }
      .process-panel-folio em { max-width: 120px; }
      .process-panel-copy { align-self: center; }
      .process-panel-copy > span { margin-bottom: 6px; }
      .process-panel-copy h3 { font-size: clamp(20px, 5.8vw, 26px); }
      .process-panel-copy p { margin-top: 7px; }
      .process-outcomes div { padding-block: 9px; }
      .process-panel-footer button { width: auto; min-height: 30px; padding-inline: 0; }
      html[data-theme="light"] .process-route { border-color: rgba(20,20,18,.16); }
      html[data-theme="light"] .process-route li { border-color: rgba(20,20,18,.1); }
    }

    @media (max-width: 420px) {
      .modal-body--process { gap: 12px; padding: 14px 16px 18px; }
      .process-scene-head .modal-title { max-width: 280px; font-size: clamp(27px, 8.8vw, 34px); }
      .process-route { min-height: 48px; }
      .process-tab { min-height: 48px; padding-inline: 6px; }
      .process-tab-copy strong { font-size: 9px; line-height: 1.08; }
      .process-assurance { min-height: 0; align-content: stretch; gap: 11px; }
      .process-outcomes { grid-template-columns: 1fr; }
      .process-outcomes div,
      .process-outcomes div:first-child,
      .process-outcomes div:last-child {
        display: grid;
        grid-column: auto;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
      }
      .process-outcomes div:last-child { border-bottom: 0; }
      .process-outcomes dt { margin: 1px 0 0; }
      .process-panel-footer { justify-content: flex-end; }
      .process-panel-footer > span { display: none; }
      .process-panel-copy h3 { font-size: clamp(19px, 5.7vw, 23px); }
      html[data-theme="light"] .process-outcomes div { border-color: rgba(20,20,18,.1); }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .modal-body--process { gap: 7px; padding: 8px 18px 10px; }
      .process-scene-head .modal-title { font-size: clamp(23px, 3vw, 29px); }
      .process-layout { grid-template-columns: minmax(250px,.72fr) minmax(360px,1.28fr); gap: 22px; }
      .process-route { border-top: 1px solid rgba(255,255,255,.18); border-bottom: 0; }
      .process-tab { min-height: 0; padding-block: 3px; }
      .process-assurance { grid-template-rows: auto minmax(0,1fr) auto auto; gap: 5px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.15); }
      .process-panel-copy > span { margin-bottom: 3px; }
      .process-panel-copy h3 { font-size: clamp(15px, 2vw, 19px); }
      .process-panel-copy p { margin-top: 4px; font-size: 7.5px; line-height: 1.25; }
      .process-outcomes div { padding-block: 5px; }
      .process-panel-footer button { min-height: 24px; font-size: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .process-tab-copy,
      .process-tab-copy small,
      .process-assurance::before,
      .process-panel-meta::after,
      .process-panel-copy,
      .process-outcomes,
      .process-panel-meta { transition: none; }
      .process-panel-footer button span { transition: none; }
      .process-tab:hover .process-tab-copy,
      .process-tab[aria-selected="true"] .process-tab-copy,
      .process-assurance.is-switching .process-panel-copy,
      .process-assurance.is-switching .process-outcomes,
      .process-assurance.is-switching .process-panel-meta,
      .process-panel-footer button:hover span { transform: none; }
    }

    /* Final main-screen type and responsive audit. */
    .card-kicker {
      display: block;
      color: rgba(255,255,255,.6);
      font-size: clamp(12px, .75vw, 15px);
    }

    .projects-count .process-note { color: rgba(255,255,255,.5); }

    .social-legal-links a {
      color: rgba(255,255,255,.48);
      font-size: clamp(8px, .52vw, 10px);
    }

    html[data-theme="light"] .card-kicker { color: rgba(23,23,22,.66); }
    html[data-theme="light"] .projects-count .process-note { color: rgba(23,23,22,.58); }
    html[data-theme="light"] .social-legal-links a { color: rgba(20,20,18,.56); }

    @media (max-width: 920px) {
      .card-kicker { font-size: clamp(10.5px, 1.35vw, 12px); }
    }

    @media (max-width: 700px) {
      .social-legal-links a { font-size: clamp(6.5px, 1dvh, 8px); }
    }

    @media (max-width: 520px) {
      .card-kicker { font-size: clamp(9.5px, 2.55vw, 11px); }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .card-kicker {
        color: rgba(255,255,255,.66);
        font-size: 10px;
      }
      html[data-theme="light"] .card-kicker { color: rgba(23,23,22,.7); }
      .card-inner,
      .services .card-inner,
      .contact .card-inner { padding: 10px 22px; }
      .showcase .card-kicker { font-size: 9px; }
      .process-card .card-inner { padding: 9px 12px; }
      .projects-count { font-size: clamp(22px, 3.1vw, 28px); }
      .projects-count .process-note { display: none; }
      .process-card .card-label { font-size: clamp(12px, 1.75vw, 15px); }
    }

    /* About / team collage */
    .modal[data-kind="about"] .modal-panel {
      height: min(840px, calc(100dvh - clamp(8px, 2vw, 32px)));
    }

    .modal[data-kind="about"] #modal-content,
    .modal[data-kind="about"] .modal-body--about {
      min-height: 0;
    }

    .modal[data-kind="about"] .modal-body--about {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(14px, 1.8vw, 24px) clamp(18px, 2.6vw, 38px);
      box-sizing: border-box;
      overflow: hidden;
      padding: clamp(18px, 2.1vw, 30px) clamp(22px, 3.2vw, 48px) clamp(20px, 2.2vw, 32px);
    }

    .modal[data-kind="about"] .about-scene-head {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
      align-items: start;
      column-gap: clamp(18px, 2.6vw, 38px);
      margin-bottom: 0;
    }

    .modal[data-kind="about"] .about-scene-head .modal-title { grid-column: 1; }
    .modal[data-kind="about"] .about-scene-head .modal-description {
      grid-column: 2;
      max-width: 390px;
      padding-top: .55em;
      padding-bottom: 0;
      font-size: clamp(12px, 1vw, 15px);
      line-height: 1.36;
    }

    .modal[data-kind="about"] .modal-title {
      max-width: 680px;
      font-size: clamp(36px, 3.2vw, 48px);
      line-height: .96;
      text-wrap: balance;
    }

    .modal[data-kind="about"] .about-editorial {
      display: grid;
      grid-column: 2;
      grid-row: 2;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 0;
      border-block: 1px solid rgba(255,255,255,.13);
    }

    .modal[data-kind="about"] .about-editorial blockquote {
      min-height: 0;
      padding: clamp(16px, 1.7vw, 24px) 0 clamp(14px, 1.5vw, 20px);
      border-right: 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .modal[data-kind="about"] .about-editorial blockquote p {
      max-width: 470px;
      font-size: clamp(17px, 1.45vw, 21px);
      line-height: 1.14;
      letter-spacing: -.025em;
    }

    .modal[data-kind="about"] .about-editorial blockquote footer {
      margin-top: 13px;
      font-size: 9px;
      letter-spacing: .02em;
    }

    .modal[data-kind="about"] .about-editorial blockquote footer button { font-size: 10px; }

    .modal[data-kind="about"] .about-commitments {
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      counter-reset: about-commitment;
      min-height: 0;
      padding-left: 0;
    }

    .modal[data-kind="about"] .about-commitments div {
      grid-template-columns: 30px minmax(100px, .62fr) minmax(0, 1.38fr);
      counter-increment: about-commitment;
      align-items: center;
      min-height: 0;
      padding: clamp(11px, 1.25vw, 17px) 0;
    }

    .modal[data-kind="about"] .about-commitments div::before {
      content: "0" counter(about-commitment);
      color: var(--accent);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 8px;
      letter-spacing: .08em;
      line-height: 1.25;
    }

    .modal[data-kind="about"] .about-commitments dt { font-size: 12px; line-height: 1.2; }
    .modal[data-kind="about"] .about-commitments dd { font-size: 11px; line-height: 1.32; }

    .team-section {
      display: grid;
      grid-column: 1;
      grid-row: 2;
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
      margin: 0;
    }

    .team-collage {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      min-height: 0;
      height: 100%;
      gap: 0;
      overflow: hidden;
      background: transparent;
      isolation: isolate;
    }

    .team-runner {
      position: absolute;
      z-index: 5;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      opacity: 0;
      will-change: opacity;
    }

    .team-runner path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .team-runner__trail {
      stroke: rgba(255,84,64,.3);
      stroke-width: 4.2;
      filter: blur(1.7px);
    }

    .team-runner__core {
      stroke: var(--accent);
      stroke-width: 1.35;
      filter: drop-shadow(0 0 3px rgba(255,84,64,.78));
    }

    .team-note {
      position: relative;
      display: grid;
      grid-column: 4;
      grid-row: 2;
      grid-template-rows: minmax(0, 1fr) 34px;
      min-width: 0;
      min-height: 0;
      padding: 0;
      color: inherit;
      text-decoration: none;
      outline: none;
      background:
        radial-gradient(circle at 82% 18%, rgba(255,84,64,.12), transparent 38%),
        #0b0b0b;
      transition: background .3s ease;
    }

    .team-note span {
      align-self: center;
      justify-self: center;
      color: var(--accent);
      font-size: clamp(30px, 3.2vw, 48px);
      font-weight: 350;
      line-height: 1;
      transform: translate(-.04em, .04em);
      transition: color .3s ease, transform .3s ease;
    }

    .team-note strong {
      display: flex;
      align-items: center;
      align-self: stretch;
      padding: 0 12px;
      color: white;
      font-size: clamp(12px, 1vw, 15px);
      font-weight: 650;
      line-height: 1;
    }

    .team-note:hover,
    .team-note:focus-visible {
      background:
        radial-gradient(circle at 82% 18%, rgba(255,84,64,.22), transparent 46%),
        #0b0b0b;
    }

    .team-note:hover span,
    .team-note:focus-visible span {
      color: white;
      transform: translate(.06em, -.06em);
    }

    .team-note:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .team-member {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      margin: 0;
      background: #0b0b0b;
    }

    .team-member:nth-child(1) { grid-column: 1; grid-row: 1; }
    .team-member:nth-child(2) { grid-column: 2; grid-row: 1; }
    .team-member:nth-child(3) { grid-column: 3; grid-row: 1; }
    .team-member:nth-child(4) { grid-column: 4; grid-row: 1; }
    .team-member:nth-child(5) { grid-column: 1; grid-row: 2; }
    .team-member:nth-child(6) { grid-column: 2; grid-row: 2; }
    .team-member:nth-child(7) { grid-column: 3; grid-row: 2; }

    .team-member img {
      display: block;
      width: 100%;
      height: calc(100% - 34px);
      object-fit: cover;
      object-position: center top;
      filter: grayscale(1);
      transition: filter .35s ease, opacity .35s ease;
    }

    .team-member figcaption {
      position: absolute;
      z-index: 2;
      right: 0;
      bottom: 0;
      left: 0;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 3px;
      height: 34px;
      padding: 0 10px;
      background: #0b0b0b;
      color: white;
      opacity: 1;
      transform: none;
      transition: color .25s ease;
    }

    .team-member figcaption strong {
      min-width: 0;
      font-size: clamp(12px, 1vw, 15px);
      font-weight: 650;
      line-height: 1;
      white-space: nowrap;
    }

    .team-member figcaption span {
      color: rgba(255,255,255,.58);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(6px, .5vw, 8px);
      letter-spacing: .08em;
      line-height: 1;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .team-member figcaption .team-role--mixed-case {
      letter-spacing: .04em;
      text-transform: none;
    }

    .team-member:hover img {
      filter: grayscale(1) contrast(1.05);
    }

    .team-member:hover figcaption {
      color: var(--accent);
    }

    html[data-theme="light"] .team-collage { background: transparent; }
    html[data-theme="light"] .team-member { background: #e4e2dc; }
    html[data-theme="light"] .team-member figcaption {
      background: #e4e2dc;
      color: #171716;
    }
    html[data-theme="light"] .team-member figcaption span { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .team-note {
      background:
        radial-gradient(circle at 82% 18%, rgba(255,84,64,.12), transparent 40%),
        #e4e2dc;
    }
    html[data-theme="light"] .team-note strong { color: #171716; }
    html[data-theme="light"] .team-note:hover,
    html[data-theme="light"] .team-note:focus-visible {
      background:
        radial-gradient(circle at 82% 18%, rgba(255,84,64,.22), transparent 48%),
        #e4e2dc;
    }

    @media (hover: none), (pointer: coarse) {
      .team-member figcaption { opacity: 1; transform: none; }
    }

    @media (max-width: 900px) {
      .modal[data-kind="about"] .modal-panel {
        height: calc(100dvh - 8px);
        max-height: calc(100dvh - 8px);
      }

      .modal[data-kind="about"] .modal-body--about {
        grid-template-columns: minmax(0, .9fr) minmax(132px, 1.1fr);
        gap: 10px 7px;
        padding: 12px 16px 14px;
      }

      .modal[data-kind="about"] .about-scene-head {
        display: block;
        margin-bottom: 0;
      }

      .modal[data-kind="about"] .about-scene-head .modal-description {
        max-width: none;
        padding-bottom: 0;
      }

      .modal[data-kind="about"] .about-editorial {
        grid-template-rows: minmax(0, 1fr) minmax(0, 3fr);
      }

      .modal[data-kind="about"] .about-editorial blockquote {
        justify-content: space-between;
      }

      .modal[data-kind="about"] .about-commitments {
        grid-template-rows: repeat(3, minmax(0, 1fr));
      }

      .team-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
      }

      .team-member,
      .team-member:nth-child(n),
      .team-note {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: auto;
      }

      .team-member:nth-child(7) {
        grid-column: auto;
        aspect-ratio: auto;
      }

      .team-member img { height: calc(100% - 26px); }
      .team-member figcaption {
        height: 26px;
        padding: 0 8px;
        gap: 2px;
      }
      .team-member figcaption strong { font-size: 11px; }
      .team-member figcaption span { display: block; font-size: 5px; letter-spacing: .04em; }

      .team-note { grid-template-rows: minmax(0, 1fr) 26px; }
      .team-note span { font-size: clamp(24px, 7vw, 34px); }
      .team-note strong { padding: 0 8px; font-size: 11px; }

      .modal[data-kind="about"] .about-editorial blockquote { padding: 6px 0; }
      .modal[data-kind="about"] .about-editorial blockquote p { font-size: 11px; line-height: 1.2; }
      .modal[data-kind="about"] .about-editorial blockquote footer { margin-top: 6px; font-size: 7.5px; }
      .modal[data-kind="about"] .about-editorial blockquote footer button { display: none; }
      .modal[data-kind="about"] .about-commitments div {
        display: grid;
        grid-template-columns: 19px minmax(0, 1fr);
        align-content: center;
        min-height: 0;
        padding: 7px 0;
      }
      .modal[data-kind="about"] .about-commitments div::before { grid-row: 1 / 3; font-size: 6.5px; }
      .modal[data-kind="about"] .about-commitments dt { grid-column: 2; font-size: 9.5px; line-height: 1.12; }
      .modal[data-kind="about"] .about-commitments dd { grid-column: 2; margin-top: 2px; font-size: 8.7px; line-height: 1.18; }
    }

    @media (min-width: 521px) and (max-width: 900px) and (min-height: 641px) {
      .modal[data-kind="about"] .modal-body--about {
        grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
        gap: 15px 8px;
        padding: 16px 18px 18px;
      }

      .modal[data-kind="about"] .modal-title {
        max-width: 660px;
        font-size: clamp(36px, 5.6vw, 45px);
      }

      .modal[data-kind="about"] .about-scene-head .modal-description {
        margin-top: 7px;
        font-size: 12px;
        line-height: 1.32;
      }

      .team-member img { height: calc(100% - 30px); }
      .team-member figcaption { height: 30px; padding-inline: 9px; }
      .team-member figcaption strong { font-size: 12px; }

      .modal[data-kind="about"] .about-editorial {
        grid-template-rows: minmax(0, .82fr) minmax(0, 3.18fr);
      }

      .modal[data-kind="about"] .about-editorial blockquote { padding: 12px 0; }
      .modal[data-kind="about"] .about-editorial blockquote p {
        font-size: clamp(14px, 1.95vw, 17px);
        line-height: 1.16;
      }
      .modal[data-kind="about"] .about-editorial blockquote footer { font-size: 8px; }
      .modal[data-kind="about"] .about-editorial blockquote footer button { display: inline-flex; font-size: 9px; }
      .modal[data-kind="about"] .about-commitments div { grid-template-columns: 22px minmax(0, 1fr); padding: 12px 0; }
      .modal[data-kind="about"] .about-commitments div::before { font-size: 7px; }
      .modal[data-kind="about"] .about-commitments dt { font-size: 12px; }
      .modal[data-kind="about"] .about-commitments dd { margin-top: 5px; font-size: 10.5px; line-height: 1.28; }
    }

    @media (max-width: 520px) and (max-height: 640px) and (orientation: portrait) {
      .modal[data-kind="about"] .modal-body--about {
        grid-template-columns: minmax(0, .82fr) minmax(136px, 1.18fr);
        gap: 7px 6px;
        padding: 9px 12px 10px;
      }

      .modal[data-kind="about"] .about-scene-head { gap: 4px; }
      .modal[data-kind="about"] .about-scene-head .scene-label { display: none; }
      .modal[data-kind="about"] .modal-title { font-size: clamp(25px, 8.2vw, 31px); line-height: .92; }
      .modal[data-kind="about"] .modal-description { display: none; }
      .modal[data-kind="about"] .about-editorial { grid-template-rows: minmax(0, .82fr) minmax(0, 3.18fr); }
      .team-member img { height: calc(100% - 19px); }
      .team-member figcaption { height: 19px; padding: 0 5px; gap: 1px; }
      .team-member figcaption strong { font-size: 8.5px; }
      .team-member figcaption span { font-size: 4.5px; }
      .team-note { grid-template-rows: minmax(0, 1fr) 19px; }
      .team-note strong { padding: 0 5px; font-size: 8.5px; }
      .modal[data-kind="about"] .about-editorial blockquote { padding: 4px 0; }
      .modal[data-kind="about"] .about-editorial blockquote p { font-size: 9.5px; line-height: 1.17; }
      .modal[data-kind="about"] .about-editorial blockquote footer { display: none; }
      .modal[data-kind="about"] .about-commitments div { grid-template-columns: 15px minmax(0, 1fr); padding: 4px 0; }
      .modal[data-kind="about"] .about-commitments div::before { font-size: 5.5px; }
      .modal[data-kind="about"] .about-commitments dt { font-size: 8.2px; }
      .modal[data-kind="about"] .about-commitments dd { margin-top: 2px; font-size: 7.6px; line-height: 1.16; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .modal[data-kind="about"] .modal-panel {
        height: calc(100dvh - 8px);
        max-height: calc(100dvh - 8px);
      }

      .modal[data-kind="about"] .modal-body--about {
        grid-template-columns: minmax(0, 1.3fr) minmax(250px, .9fr);
        gap: 6px 12px;
        overflow: hidden;
        padding: 8px 14px 10px;
      }

      .modal[data-kind="about"] .about-scene-head {
        display: block;
      }

      .modal[data-kind="about"] .about-scene-head .scene-label,
      .modal[data-kind="about"] .modal-description { display: none; }

      .modal[data-kind="about"] .modal-title,
      .modal[data-kind="about"] .modal-intro .modal-title {
        font-size: clamp(23px, 4vw, 32px);
        line-height: .95;
      }

      .modal[data-kind="about"] .modal-title .title-line { display: inline; }
      .modal[data-kind="about"] .modal-title .title-line + .title-line { margin-left: .18em; }
      .team-collage {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
      }

      .team-member:nth-child(1) { grid-column: 1; grid-row: 1; }
      .team-member:nth-child(2) { grid-column: 2; grid-row: 1; }
      .team-member:nth-child(3) { grid-column: 3; grid-row: 1; }
      .team-member:nth-child(4) { grid-column: 4; grid-row: 1; }
      .team-member:nth-child(5) { grid-column: 1; grid-row: 2; }
      .team-member:nth-child(6) { grid-column: 2; grid-row: 2; }
      .team-member:nth-child(7) { grid-column: 3; grid-row: 2; }
      .team-note { grid-column: 4; grid-row: 2; }
      .team-member img { height: calc(100% - 20px); }
      .team-member figcaption { height: 20px; padding: 0 6px; gap: 1px; }
      .team-member figcaption strong { font-size: 8px; }
      .team-member figcaption span { font-size: 4.5px; }
      .team-note { grid-template-rows: minmax(0, 1fr) 20px; }
      .team-note strong { padding: 0 6px; font-size: 8px; }
      .modal[data-kind="about"] .about-editorial blockquote { padding: 4px 0; }
      .modal[data-kind="about"] .about-editorial blockquote p { font-size: 10.5px; line-height: 1.14; }
      .modal[data-kind="about"] .about-editorial blockquote footer { margin-top: 4px; font-size: 6.5px; }
      .modal[data-kind="about"] .about-commitments div { padding: 4px 0; }
      .modal[data-kind="about"] .about-commitments div::before { font-size: 6px; }
      .modal[data-kind="about"] .about-commitments dt { font-size: 9px; }
      .modal[data-kind="about"] .about-commitments dd { font-size: 8.3px; line-height: 1.12; }
    }

    @media (prefers-reduced-motion: reduce) {
      .team-member img,
      .team-member figcaption { transition: none; }
      .team-runner { display: none; }
    }

    /* 2K / high-density desktop calibration.
       Large panels used to keep growing after the type and artwork reached their
       Full-HD caps, which made the composition feel sparse on 2048–2560px wide
       workspaces. This layer scales the editorial hierarchy, not the whole UI. */
    @media (min-width: 1920px) and (min-height: 1000px) {
      :root {
        --gap: clamp(20px, 1vw, 28px);
        --radius: clamp(30px, 1.55vw, 40px);
      }

      .app {
        grid-template-rows: clamp(52px, 4.4vh, 64px) minmax(0, 1fr);
        padding: clamp(28px, 1.35vw, 40px);
        padding-top: max(clamp(28px, 1.35vw, 40px), env(safe-area-inset-top));
        padding-bottom: max(clamp(28px, 1.35vw, 40px), env(safe-area-inset-bottom));
      }

      .topbar {
        gap: clamp(24px, 1.4vw, 36px);
        font-size: clamp(18px, .86vw, 22px);
      }

      .brand-lockup { gap: clamp(22px, 1.1vw, 30px); }
      .top-logo { width: clamp(120px, 5.6vw, 144px); }
      .role { width: clamp(620px, 36vw, 820px); }

      .clock-wrap { gap: clamp(14px, .8vw, 22px); }
      .header-control {
        min-width: 36px;
        height: 32px;
        padding-inline: 10px;
        font-size: 10px;
      }
      .header-control--theme { width: 36px; }
      .theme-icon { width: 14px; height: 14px; }

      .stage { padding-top: clamp(176px, 16vh, 230px); }
      .hero-logo {
        top: clamp(30px, 3vh, 44px);
        width: min(58vw, 1520px);
      }

      .card-inner,
      .contact .card-inner {
        padding: clamp(42px, 2.15vw, 56px);
      }

      .services .card-inner,
      .showcase .card-inner {
        padding-inline: clamp(54px, 2.7vw, 68px);
      }

      .card-kicker { font-size: clamp(15px, .75vw, 19px); }
      .card-label { font-size: clamp(30px, 1.55vw, 40px); }
      .arrow { height: 22px; font-size: clamp(28px, 1.25vw, 34px); }

      .about-inside {
        inset: 16% 7% 17%;
        padding-left: 6%;
      }
      .about-manifesto { font-size: clamp(60px, 3vw, 78px); }

      .services-copy {
        max-width: 680px;
        font-size: clamp(19px, .9vw, 22px);
        line-height: 1.28;
      }
      .services-visual.service-molecule {
        right: clamp(42px, 2.2vw, 58px);
        width: min(58%, clamp(760px, 35vw, 980px));
        height: clamp(320px, 17vw, 400px);
      }

      .showcase .project-featured-name {
        width: min(41%, 440px);
        font-size: clamp(28px, 1.4vw, 36px);
      }
      .showcase .project-copy {
        width: min(41%, 440px);
        max-width: 400px;
        font-size: clamp(13px, .63vw, 16px);
        line-height: 1.36;
      }
      .showcase .card-title-row { width: min(41%, 440px); }
      .project-window {
        top: 9%;
        right: 4.8%;
        bottom: 10.5%;
        left: 46%;
      }
      .project-window-bar { height: clamp(28px, 1.35vw, 35px); }
      .project-window-screen { inset: clamp(28px, 1.35vw, 35px) 0 0; }
      .project-window-bar b { font-size: clamp(11px, .48vw, 13px); }
      .project-window-screen small { font-size: clamp(8px, .36vw, 10px); }

      .contact-signal {
        top: 48%;
        left: clamp(42px, 2.15vw, 56px);
        font-size: clamp(58px, 2.7vw, 70px);
      }
      .contact .card-label { font-size: clamp(28px, 1.4vw, 36px); }

      .process-card .card-inner { padding: clamp(34px, 1.75vw, 46px); }
      .process-card .card-label { font-size: clamp(26px, 1.3vw, 34px); }
      .projects-count { font-size: clamp(66px, 3.35vw, 86px); }

      .tools { padding: clamp(26px, 1.45vw, 38px) clamp(14px, .8vw, 22px) clamp(12px, .7vw, 18px); }
      .tools .social-icon { width: clamp(30px, 1.45vw, 38px); }
      .tools .social-link small { font-size: clamp(10px, .46vw, 12px); }
      .social-legal-links a { font-size: clamp(10px, .44vw, 11.5px); }
    }

    /* Wide 2K panels with a shallow 21:9-like viewport need a tighter
       manifesto so its eyebrow never competes with the card kicker. */
    @media (min-width: 1920px) and (min-height: 1000px) and (max-height: 1199px) and (min-aspect-ratio: 2/1) {
      .about-inside { inset: 23% 7% 18%; }
      .about-manifesto { font-size: clamp(56px, 2.45vw, 64px); }
    }

    /* Latin capitals use a slightly more open rhythm than Cyrillic, while the
       final line keeps a small optical gap so the three lines read as one mark. */
    html[lang="en"] .about-manifesto {
      line-height: .92;
    }

    html[lang="en"] .about-manifesto span {
      overflow: visible;
      background: transparent;
      animation-name: about-line-reveal-latin;
    }

    html[lang="en"] .about-manifesto span:nth-child(3) {
      margin-top: .045em;
    }

    /* Centre the visual weight of the three-line statement between the
       eyebrow and the persistent action row. */
    .about-manifesto {
      transform: translateY(clamp(22px, 2.35vw, 42px));
    }

    /* Keep card affordances readable in the light interface on hover and focus. */
    html[data-theme="light"] button.card:hover .arrow,
    html[data-theme="light"] button.card:focus-visible .arrow,
    html[data-theme="light"] .about-main:hover .arrow,
    html[data-theme="light"] .about-main:focus-visible .arrow {
      color: rgba(20,20,18,.72);
    }

    /* A card reads as one action: its label and directional mark respond together. */
    button.card:hover .card-label,
    button.card:focus-visible .card-label,
    .about-main:hover .card-label,
    .about-main:focus-visible .card-label,
    button.card:hover .arrow,
    button.card:focus-visible .arrow,
    .about-main:hover .arrow,
    .about-main:focus-visible .arrow {
      color: var(--accent);
    }

    @keyframes about-line-reveal-latin {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Services v7: a three-step project fit finder. */
    .modal[data-kind="services"] .modal-panel {
      height: min(820px, calc(100dvh - clamp(12px,4vw,48px)));
    }

    .modal[data-kind="services"] .modal-body--services {
      grid-template-rows: auto minmax(0,1fr) auto;
      gap: clamp(10px,1.25vw,16px);
    }

    .service-finder {
      display: grid;
      grid-template-rows: auto minmax(0,1fr);
      min-height: 0;
      border-top: 1px solid rgba(255,255,255,.15);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .finder-progress {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      margin: 0;
      padding: 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
      list-style: none;
    }

    .finder-progress li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 43px;
      padding: 0 16px;
      border-right: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.32);
      transition: color .2s ease, background .2s ease;
    }

    .finder-progress li:last-child { border-right: 0; }

    .finder-progress li::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .24s ease;
    }

    .finder-progress li.is-complete { color: rgba(255,255,255,.58); }
    .finder-progress li[aria-current="step"] {
      background: rgba(255,255,255,.025);
      color: var(--ink);
    }
    .finder-progress li[aria-current="step"]::after { transform: scaleX(1); }

    .finder-progress span {
      color: var(--accent);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
    }

    .finder-progress strong {
      font-size: 10px;
      font-weight: 650;
    }

    .finder-workspace {
      position: relative;
      min-height: 0;
    }

    .finder-panel,
    .finder-result {
      height: 100%;
      min-height: 0;
    }

    .finder-panel {
      display: grid;
      grid-template-columns: minmax(240px,.58fr) minmax(0,1.42fr);
      gap: clamp(24px,4vw,64px);
      align-items: center;
      padding: clamp(22px,3vw,44px) clamp(8px,1.5vw,20px);
    }

    .finder-panel[hidden],
    .finder-result[hidden] { display: none; }

    .finder-question {
      align-self: center;
      max-width: 360px;
    }

    .finder-question > span,
    .finder-result-label,
    .finder-result-detail > span,
    .finder-result-risk > span {
      display: block;
      margin-bottom: 13px;
      color: var(--accent);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .finder-question h3,
    .finder-result h3 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(28px,2.65vw,42px);
      line-height: .98;
      letter-spacing: -.055em;
    }

    .finder-question p {
      max-width: 34ch;
      margin: 17px 0 0;
      color: rgba(255,255,255,.5);
      font-size: 11px;
      line-height: 1.5;
    }

    .finder-options {
      display: grid;
      min-width: 0;
      border-top: 1px solid rgba(255,255,255,.13);
      border-left: 1px solid rgba(255,255,255,.13);
    }

    .finder-options--goals { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .finder-options--readiness,
    .finder-options--conditions { grid-template-columns: repeat(3,minmax(0,1fr)); }

    .finder-option,
    .finder-condition {
      position: relative;
      display: grid;
      align-content: start;
      gap: 8px;
      min-width: 0;
      min-height: 118px;
      padding: 18px;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.13);
      border-bottom: 1px solid rgba(255,255,255,.13);
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      transition: background .18s ease, color .18s ease;
    }

    .finder-options--goals .finder-option { min-height: 112px; }

    .finder-option::after,
    .finder-condition::after {
      content: "↗";
      position: absolute;
      top: 17px;
      right: 17px;
      color: rgba(255,255,255,.28);
      font-size: 13px;
      transition: color .18s ease, transform .18s ease;
    }

    .finder-option:hover,
    .finder-option:focus-visible,
    .finder-condition:hover,
    .finder-condition:focus-visible {
      background: rgba(255,255,255,.035);
    }

    .finder-option:hover::after,
    .finder-option:focus-visible::after,
    .finder-condition:hover::after,
    .finder-condition:focus-visible::after {
      color: var(--accent);
      transform: translate(2px,-2px);
    }

    .finder-option[aria-checked="true"],
    .finder-condition[aria-pressed="true"] {
      background: rgba(249,65,55,.075);
    }

    .finder-option[aria-checked="true"]::before,
    .finder-condition[aria-pressed="true"]::before {
      content: "";
      position: absolute;
      inset: -1px auto -1px -1px;
      width: 2px;
      background: var(--accent);
    }

    .finder-option[aria-checked="true"]::after,
    .finder-condition[aria-pressed="true"]::after {
      content: "✓";
      color: var(--accent);
      transform: none;
    }

    .finder-option > span,
    .finder-condition > span {
      padding-right: 22px;
      color: rgba(255,255,255,.42);
      font: 650 8px/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .finder-option strong,
    .finder-condition strong {
      max-width: 22ch;
      font-size: clamp(13px,1.05vw,16px);
      line-height: 1.12;
    }

    .finder-option small,
    .finder-condition small {
      max-width: 32ch;
      color: rgba(255,255,255,.46);
      font-size: 10px;
      line-height: 1.35;
    }

    .finder-back,
    .finder-restart {
      justify-self: start;
      align-self: end;
      padding: 4px 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.24);
      background: transparent;
      color: rgba(255,255,255,.58);
      font-size: 9px;
      font-weight: 650;
      cursor: pointer;
    }

    .finder-panel > .finder-back {
      grid-column: 2;
      margin-top: -28px;
    }

    .finder-panel-actions {
      grid-column: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: -28px;
    }

    .finder-next,
    .finder-contact {
      min-height: 42px;
      padding: 0 19px;
      border: 0;
      background: var(--accent);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }

    .finder-next span { margin-left: 20px; }

    .finder-result {
      display: grid;
      grid-template-columns: minmax(270px,.72fr) minmax(0,1.28fr);
    }

    .finder-result-main,
    .finder-result-detail {
      display: grid;
      align-content: center;
      min-width: 0;
      padding: clamp(24px,3vw,44px);
    }

    .finder-result-main {
      border-right: 1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(135deg,rgba(249,65,55,.085),transparent 58%);
    }

    .finder-result-reason {
      max-width: 41ch;
      margin: 16px 0 0;
      color: rgba(255,255,255,.54);
      font-size: 11px;
      line-height: 1.45;
    }

    .finder-result-facts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: clamp(26px,3vw,44px);
      border-top: 1px solid rgba(255,255,255,.13);
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .finder-result-facts > div {
      display: grid;
      gap: 7px;
      padding: 14px 14px 14px 0;
    }

    .finder-result-facts > div + div {
      padding-left: 14px;
      border-left: 1px solid rgba(255,255,255,.13);
    }

    .finder-result-facts span,
    .finder-result-detail > span,
    .finder-result-risk > span {
      color: rgba(255,255,255,.42);
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .finder-result-facts strong {
      font-size: clamp(14px,1.15vw,18px);
      line-height: 1.18;
    }

    .finder-result-detail > span { margin-bottom: 9px; }

    .finder-result-detail ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 0;
      padding: 0;
      border-top: 1px solid rgba(255,255,255,.13);
      border-left: 1px solid rgba(255,255,255,.13);
      list-style: none;
    }

    .finder-result-detail li {
      position: relative;
      min-height: 48px;
      padding: 15px 14px 12px 28px;
      border-right: 1px solid rgba(255,255,255,.13);
      border-bottom: 1px solid rgba(255,255,255,.13);
      color: rgba(255,255,255,.72);
      font-size: 10px;
      line-height: 1.3;
    }

    .finder-result-detail li::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 14px;
      width: 4px;
      height: 4px;
      background: var(--accent);
    }

    .finder-result-risk {
      display: grid;
      grid-template-columns: minmax(120px,.42fr) minmax(0,1fr);
      gap: 18px;
      margin-top: 18px;
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,.13);
    }

    .finder-result-risk > span { margin: 0; }

    .finder-result-risk p,
    .finder-result-summary {
      margin: 0;
      color: rgba(255,255,255,.56);
      font-size: 10px;
      line-height: 1.4;
    }

    .finder-result-summary {
      margin-top: 13px;
      color: rgba(255,255,255,.36);
    }

    .finder-result-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 18px;
    }

    .finder-contact { min-width: 240px; }

    .modal[data-kind="services"] .services-footer {
      min-height: 34px;
      padding-top: 8px;
    }

    .modal[data-kind="services"] .services-footer p {
      max-width: none;
      font-size: 9px;
    }

    html[data-theme="light"] .service-finder,
    html[data-theme="light"] .finder-progress,
    html[data-theme="light"] .finder-progress li,
    html[data-theme="light"] .finder-options,
    html[data-theme="light"] .finder-option,
    html[data-theme="light"] .finder-condition,
    html[data-theme="light"] .finder-result-main,
    html[data-theme="light"] .finder-result-facts,
    html[data-theme="light"] .finder-result-facts > div + div,
    html[data-theme="light"] .finder-result-detail ul,
    html[data-theme="light"] .finder-result-detail li,
    html[data-theme="light"] .finder-result-risk {
      border-color: rgba(20,20,18,.14);
    }

    html[data-theme="light"] .finder-progress li { color: rgba(20,20,18,.34); }
    html[data-theme="light"] .finder-progress li.is-complete { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .finder-progress li[aria-current="step"] {
      background: rgba(20,20,18,.025);
      color: rgba(20,20,18,.92);
    }
    html[data-theme="light"] .finder-question p,
    html[data-theme="light"] .finder-option small,
    html[data-theme="light"] .finder-condition small,
    html[data-theme="light"] .finder-result-reason,
    html[data-theme="light"] .finder-result-risk p { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .finder-option > span,
    html[data-theme="light"] .finder-condition > span,
    html[data-theme="light"] .finder-result-facts span,
    html[data-theme="light"] .finder-result-detail > span,
    html[data-theme="light"] .finder-result-risk > span { color: rgba(20,20,18,.44); }
    html[data-theme="light"] .finder-option::after,
    html[data-theme="light"] .finder-condition::after { color: rgba(20,20,18,.3); }
    html[data-theme="light"] .finder-option:hover,
    html[data-theme="light"] .finder-option:focus-visible,
    html[data-theme="light"] .finder-condition:hover,
    html[data-theme="light"] .finder-condition:focus-visible { background: rgba(20,20,18,.035); }
    html[data-theme="light"] .finder-option[aria-checked="true"],
    html[data-theme="light"] .finder-condition[aria-pressed="true"] { background: rgba(249,65,55,.065); }
    html[data-theme="light"] .finder-back,
    html[data-theme="light"] .finder-restart {
      border-color: rgba(20,20,18,.24);
      color: rgba(20,20,18,.58);
    }
    html[data-theme="light"] .finder-result-main {
      background: linear-gradient(135deg,rgba(249,65,55,.08),transparent 58%);
    }
    html[data-theme="light"] .finder-result-detail li { color: rgba(20,20,18,.72); }
    html[data-theme="light"] .finder-result-summary { color: rgba(20,20,18,.4); }

    @media (max-width: 760px) {
      .modal[data-kind="services"] .modal-body--services {
        gap: 7px;
        padding: 16px 15px 12px;
      }
      .services-scene-head .modal-title { font-size: clamp(29px,8.8vw,40px); }
      .services-scene-head .modal-description {
        margin-top: 5px;
        font-size: 9.5px;
        line-height: 1.35;
      }
      .finder-progress li {
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        padding: 0 5px;
      }
      .finder-progress strong { font-size: 8px; }
      .finder-progress span { font-size: 7px; }
      .finder-panel {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 13px;
        padding: 14px 0 8px;
      }
      .finder-question {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 6px 10px;
        max-width: none;
      }
      .finder-question > span { grid-row: 1; margin: 0; }
      .finder-question h3 {
        grid-column: 2;
        grid-row: 1;
        font-size: clamp(21px,6vw,27px);
      }
      .finder-question p {
        grid-column: 1 / -1;
        margin: 0;
        max-width: 56ch;
        font-size: 9px;
        line-height: 1.35;
      }
      .finder-options--goals { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .finder-options--readiness,
      .finder-options--conditions { grid-template-columns: 1fr; }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option {
        gap: 4px;
        min-height: 0;
        padding: 11px 24px 10px 11px;
      }
      .finder-options--goals .finder-option { min-height: 88px; }
      .finder-option::after,
      .finder-condition::after {
        top: 10px;
        right: 10px;
        font-size: 10px;
      }
      .finder-option > span,
      .finder-condition > span { font-size: 6.5px; }
      .finder-option strong,
      .finder-condition strong {
        font-size: 12px;
        line-height: 1.08;
      }
      .finder-option small,
      .finder-condition small {
        font-size: 8.5px;
        line-height: 1.25;
      }
      .finder-options--readiness .finder-option,
      .finder-options--conditions .finder-condition {
        grid-template-columns: minmax(105px,.55fr) minmax(0,1.45fr);
        align-items: center;
        min-height: 54px;
      }
      .finder-options--readiness .finder-option > span,
      .finder-options--conditions .finder-condition > span { grid-column: 1; }
      .finder-options--readiness .finder-option strong,
      .finder-options--conditions .finder-condition strong { grid-column: 1; }
      .finder-options--readiness .finder-option small,
      .finder-options--conditions .finder-condition small {
        grid-column: 2;
        grid-row: 1 / 3;
      }
      .finder-panel > .finder-back,
      .finder-panel-actions {
        grid-column: 1;
        margin-top: 0;
      }
      .finder-panel-actions { align-self: end; }
      .finder-next { min-height: 36px; }
      .finder-result {
        grid-template-columns: 1fr;
        align-content: start;
        overflow-y: auto;
      }
      .finder-result-main,
      .finder-result-detail { padding: 14px 0; }
      .finder-result-main {
        grid-template-columns: minmax(0,1fr) minmax(150px,.8fr);
        column-gap: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.13);
        background: transparent;
      }
      .finder-result-label { grid-column: 1; margin-bottom: 7px; }
      .finder-result h3 {
        grid-column: 1;
        font-size: 25px;
      }
      .finder-result-reason {
        grid-column: 1;
        margin-top: 8px;
        font-size: 9px;
      }
      .finder-result-facts {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: stretch;
        grid-template-columns: 1fr;
        margin: 0;
        border-top: 0;
      }
      .finder-result-facts > div { padding: 9px; }
      .finder-result-facts > div + div {
        padding-left: 9px;
        border-top: 1px solid rgba(255,255,255,.13);
        border-left: 0;
      }
      .finder-result-facts strong { font-size: 12px; }
      .finder-result-detail > span { margin-bottom: 6px; }
      .finder-result-detail li {
        min-height: 36px;
        padding: 10px 9px 9px 23px;
        font-size: 8px;
      }
      .finder-result-detail li::before { top: 14px; left: 11px; }
      .finder-result-risk {
        grid-template-columns: minmax(100px,.45fr) minmax(0,1.55fr);
        margin-top: 10px;
        padding-top: 10px;
      }
      .finder-result-risk p,
      .finder-result-summary { font-size: 8px; }
      .finder-result-summary { margin-top: 7px; }
      .finder-result-actions { margin-top: 10px; }
      .finder-contact {
        min-width: 0;
        min-height: 36px;
        font-size: 9px;
      }
      .modal[data-kind="services"] .services-footer {
        min-height: 22px;
        padding-top: 5px;
      }
      .modal[data-kind="services"] .services-footer p {
        display: block;
        font-size: 0;
        line-height: 1.3;
      }
      .modal[data-kind="services"] .services-footer p strong {
        display: inline;
        margin-right: 0;
        font-size: 8px;
      }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .finder-workspace {
        display: grid;
        align-items: center;
      }
      .finder-panel,
      .finder-result { height: auto; }
    }

    @media (max-width: 420px) {
      .finder-result-main {
        grid-template-columns: minmax(0,1fr) 128px;
        column-gap: 10px;
      }
      .finder-result h3 { font-size: 22px; }
      .finder-result-facts strong { font-size: 10px; }
      .finder-result-actions { gap: 12px; }
      .finder-restart { font-size: 8px; white-space: nowrap; }
      .finder-contact { padding-inline: 10px; }
    }

    @media (max-height: 650px) {
      .modal[data-kind="services"] .modal-body--services {
        display: grid;
        overflow-y: auto;
      }
      .finder-panel { padding-block: 14px; }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option { min-height: 82px; padding-block: 11px; }
      .finder-result-main,
      .finder-result-detail { padding-block: 16px; }
    }

    /* Services v8: calmer editorial hierarchy and a visible decision trail. */
    .modal[data-kind="services"] .modal-panel {
      background:
        radial-gradient(52rem 28rem at 82% -10%, rgba(249,65,55,.075), transparent 68%),
        linear-gradient(135deg, rgba(255,255,255,.018), transparent 38%),
        #111;
    }

    .services-scene-head { position: relative; }

    .services-scene-duration {
      position: absolute;
      top: 1px;
      right: 0;
      color: rgba(255,255,255,.38);
      font: 650 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .services-scene-head .modal-title {
      max-width: 19ch;
      font-size: clamp(38px,4vw,62px);
      line-height: .92;
    }

    .services-scene-head .modal-description {
      position: relative;
      max-width: 46ch;
      padding-left: 21px;
    }

    .services-scene-head .modal-description::before {
      content: "";
      position: absolute;
      top: .2em;
      bottom: .2em;
      left: 0;
      width: 1px;
      background: linear-gradient(var(--accent) 0 34%, rgba(255,255,255,.16) 34% 100%);
    }

    .service-finder { overflow: hidden; }

    .finder-progress li {
      display: block;
      min-height: 50px;
      padding: 0;
    }

    .finder-progress li::after { height: 1px; }

    .finder-progress button {
      display: flex;
      width: 100%;
      min-height: 49px;
      align-items: center;
      gap: 11px;
      padding: 6px 16px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .finder-progress button:disabled { cursor: default; }

    .finder-progress-copy {
      display: grid;
      min-width: 0;
      gap: 3px;
    }

    .finder-progress-copy strong { color: inherit; }

    .finder-progress-copy small {
      overflow: hidden;
      color: rgba(255,255,255,.3);
      font-size: 7.5px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .finder-progress li.is-complete .finder-progress-copy small,
    .finder-progress li[aria-current="step"] .finder-progress-copy small { color: rgba(255,255,255,.54); }

    .finder-progress li.is-complete button:hover,
    .finder-progress li.is-complete button:focus-visible { background: rgba(255,255,255,.035); }

    .finder-panel:not([hidden]),
    .finder-result:not([hidden]) { animation: finder-panel-in .28s cubic-bezier(.2,.7,.2,1) both; }

    @keyframes finder-panel-in {
      from { opacity: 0; transform: translateY(9px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .finder-question {
      position: relative;
      padding-left: clamp(15px,1.5vw,22px);
    }

    .finder-question::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 1px;
      background: linear-gradient(var(--accent) 0 24%, rgba(255,255,255,.13) 24% 100%);
    }

    .finder-question h3 { max-width: 12ch; }

    .finder-options {
      position: relative;
      background: rgba(0,0,0,.08);
    }

    .finder-option,
    .finder-condition {
      isolation: isolate;
      gap: 9px;
      min-height: 126px;
      padding: 20px 44px 19px 20px;
      overflow: hidden;
      transition: background .2s ease, color .2s ease, opacity .2s ease;
    }

    .finder-options--goals .finder-option { min-height: clamp(96px,12vh,122px); }

    .finder-option::after,
    .finder-condition::after { content: none; }

    .finder-option::before,
    .finder-condition::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: auto -18px -38px auto;
      width: 88px;
      aspect-ratio: 1;
      border: 1px solid rgba(255,255,255,.04);
      border-radius: 50%;
      transform: scale(.7);
      opacity: 0;
      transition: transform .3s ease, opacity .3s ease, border-color .3s ease;
    }

    .finder-option:hover::before,
    .finder-option:focus-visible::before,
    .finder-condition:hover::before,
    .finder-condition:focus-visible::before {
      border-color: rgba(249,65,55,.22);
      transform: scale(1);
      opacity: 1;
    }

    .finder-option[aria-checked="true"]::before,
    .finder-condition[aria-pressed="true"]::before {
      inset: auto -18px -38px auto;
      width: 88px;
      border: 1px solid rgba(249,65,55,.35);
      background: rgba(249,65,55,.04);
      border-radius: 50%;
      transform: scale(1);
      opacity: 1;
    }

    .finder-option[aria-checked="true"],
    .finder-condition[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--accent); }

    .finder-option-mark {
      position: absolute;
      top: 17px;
      right: 17px;
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      color: rgba(255,255,255,.38);
      font: normal 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
    }

    .finder-option:hover .finder-option-mark,
    .finder-option:focus-visible .finder-option-mark,
    .finder-condition:hover .finder-option-mark,
    .finder-condition:focus-visible .finder-option-mark {
      border-color: rgba(249,65,55,.52);
      color: var(--accent);
      transform: rotate(45deg);
    }

    .finder-condition:hover .finder-option-mark,
    .finder-condition:focus-visible .finder-option-mark { transform: rotate(90deg); }

    .finder-option[aria-checked="true"] .finder-option-mark,
    .finder-condition[aria-pressed="true"] .finder-option-mark {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
      transform: none;
    }

    .service-finder.is-committing .finder-option:not([aria-checked="true"]) { opacity: .42; }

    .finder-option strong,
    .finder-condition strong {
      font-size: clamp(14px,1.15vw,17px);
      letter-spacing: -.018em;
    }

    .finder-option small,
    .finder-condition small { max-width: 29ch; }

    .finder-back,
    .finder-restart {
      transition: color .18s ease, border-color .18s ease;
    }

    .finder-back:hover,
    .finder-back:focus-visible,
    .finder-restart:hover,
    .finder-restart:focus-visible {
      border-color: var(--accent);
      color: var(--ink);
    }

    .finder-next,
    .finder-contact {
      position: relative;
      overflow: hidden;
      transition: background .18s ease, transform .18s ease;
    }

    .finder-next:hover,
    .finder-next:focus-visible,
    .finder-contact:hover,
    .finder-contact:focus-visible { background: #d9342c; }

    .finder-next:active,
    .finder-contact:active { transform: translateY(1px); }

    .finder-result-main {
      position: relative;
      background:
        radial-gradient(circle at 0 100%, rgba(249,65,55,.13), transparent 42%),
        linear-gradient(135deg,rgba(249,65,55,.055),transparent 58%);
    }

    .finder-result-path {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 15px;
      color: rgba(255,255,255,.38);
      font-size: 8px;
      line-height: 1.2;
    }

    .finder-result-path i { color: var(--accent); font-style: normal; }
    .finder-result-path strong { color: rgba(255,255,255,.68); font-size: 8px; }

    .finder-result-why {
      display: block;
      margin-top: clamp(22px,2.5vw,34px);
      color: rgba(255,255,255,.38);
      font: 650 7.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .finder-result-reason { margin-top: 8px; }
    .finder-result-facts { margin-top: clamp(19px,2vw,28px); }

    .finder-result-detail { position: relative; }

    .finder-result-detail::after {
      content: "";
      position: absolute;
      right: clamp(24px,3vw,44px);
      bottom: clamp(24px,3vw,44px);
      width: 42px;
      height: 1px;
      background: var(--accent);
      opacity: .5;
      pointer-events: none;
    }

    .finder-result-actions { padding-right: 66px; }

    .modal[data-kind="services"] .services-footer {
      min-height: 37px;
      padding: 0;
      border-top: 0;
    }

    .services-assurances {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(3,minmax(0,1fr));
      margin: 0;
      padding: 0;
      border-top: 1px solid rgba(255,255,255,.12);
      list-style: none;
    }

    .services-assurances li {
      display: flex;
      min-width: 0;
      min-height: 37px;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border-right: 1px solid rgba(255,255,255,.1);
    }

    .services-assurances li:last-child { border-right: 0; }

    .services-assurances span {
      color: var(--accent);
      font: 650 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
    }

    .services-assurances strong {
      overflow: hidden;
      color: rgba(255,255,255,.58);
      font-size: 8px;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    html[data-theme="light"] .modal[data-kind="services"] .modal-panel {
      background:
        radial-gradient(52rem 28rem at 82% -10%, rgba(249,65,55,.09), transparent 68%),
        linear-gradient(135deg, rgba(20,20,18,.018), transparent 38%),
        #f4f2ed;
    }

    html[data-theme="light"] .services-scene-duration,
    html[data-theme="light"] .finder-progress-copy small,
    html[data-theme="light"] .finder-result-path,
    html[data-theme="light"] .finder-result-why { color: rgba(20,20,18,.42); }

    html[data-theme="light"] .services-scene-head .modal-description::before {
      background: linear-gradient(var(--accent) 0 34%, rgba(20,20,18,.16) 34% 100%);
    }

    html[data-theme="light"] .finder-progress li.is-complete .finder-progress-copy small,
    html[data-theme="light"] .finder-progress li[aria-current="step"] .finder-progress-copy small,
    html[data-theme="light"] .finder-result-path strong { color: rgba(20,20,18,.62); }

    html[data-theme="light"] .finder-options { background: rgba(255,255,255,.18); }

    html[data-theme="light"] .finder-option::before,
    html[data-theme="light"] .finder-condition::before { border-color: rgba(20,20,18,.06); }

    html[data-theme="light"] .finder-option-mark {
      border-color: rgba(20,20,18,.15);
      color: rgba(20,20,18,.42);
    }

    html[data-theme="light"] .finder-result-main {
      background:
        radial-gradient(circle at 0 100%, rgba(249,65,55,.12), transparent 42%),
        linear-gradient(135deg,rgba(249,65,55,.05),transparent 58%);
    }

    html[data-theme="light"] .services-assurances { border-color: rgba(20,20,18,.14); }
    html[data-theme="light"] .services-assurances li { border-color: rgba(20,20,18,.12); }
    html[data-theme="light"] .services-assurances strong { color: rgba(20,20,18,.62); }

    @media (max-width: 760px) {
      .services-scene-duration { display: none; }
      .services-scene-head .modal-title { max-width: 15ch; }
      .services-scene-head .modal-description { padding-left: 14px; }
      .finder-progress li { min-height: 42px; }
      .finder-progress button {
        min-height: 41px;
        justify-content: flex-start;
        gap: 7px;
        padding: 5px 7px;
      }
      .finder-progress-copy { gap: 2px; }
      .finder-progress-copy strong { font-size: 7.5px; }
      .finder-progress-copy small { font-size: 5.8px; }
      .finder-question { padding-left: 12px; }
      .finder-question::before { background: linear-gradient(var(--accent) 0 32%, rgba(255,255,255,.13) 32% 100%); }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option { padding-right: 36px; }
      .finder-option-mark {
        top: 9px;
        right: 9px;
        width: 19px;
        height: 19px;
        font-size: 9px;
      }
      .finder-result-main { padding-left: 12px; }
      .finder-result-path { margin-top: 9px; }
      .finder-result-why { margin-top: 12px; }
      .finder-result-detail::after { display: none; }
      .finder-result-actions { padding-right: 0; }
      .services-assurances li {
        min-height: 30px;
        gap: 5px;
        padding: 0 6px;
      }
      .services-assurances span { font-size: 5.5px; }
      .services-assurances strong {
        font-size: 6.2px;
        white-space: normal;
      }
    }

    @media (max-width: 420px) {
      .services-assurances li:nth-child(2) { display: none; }
      .services-assurances { grid-template-columns: 1fr 1fr; }
      .services-assurances li { justify-content: center; }
    }

    @media (max-height: 800px) and (min-width: 761px) {
      .modal[data-kind="services"] .modal-body--services { gap: 9px; }
      .services-scene-head .modal-title {
        max-width: 19ch;
        font-size: clamp(38px,3.7vw,52px);
      }
      .services-scene-head .modal-description { font-size: 10px; }
      .finder-panel { padding-block: 18px; }
      .finder-options--goals .finder-option { min-height: 94px; }
      .finder-result-main,
      .finder-result-detail { padding: 20px 28px; }
      .finder-result h3 { font-size: clamp(29px,2.5vw,35px); }
      .finder-result-why { margin-top: 14px; }
      .finder-result-facts { margin-top: 14px; }
      .finder-result-detail li { min-height: 42px; padding-block: 12px 9px; }
      .finder-result-detail li::before { top: 16px; }
      .finder-result-risk { margin-top: 12px; padding-top: 11px; }
      .finder-result-summary { margin-top: 8px; }
      .finder-result-actions { margin-top: 12px; }
      .finder-result-detail::after { right: 28px; bottom: 24px; }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .finder-workspace {
        isolation: isolate;
        align-items: start;
      }
      .finder-workspace::after {
        content: "";
        position: absolute;
        z-index: 0;
        right: -3px;
        bottom: 18px;
        color: rgba(255,255,255,.035);
        font: 750 clamp(92px,31vw,124px)/.72 Arial, sans-serif;
        letter-spacing: -.1em;
        pointer-events: none;
      }
      .service-finder[data-step="goal"] .finder-workspace::after { content: "01"; }
      .service-finder[data-step="readiness"] .finder-workspace::after { content: "02"; }
      .service-finder[data-step="conditions"] .finder-workspace::after { content: "03"; }
      .service-finder[data-step="result"] .finder-workspace::after { content: none; }
      html[data-theme="light"] .finder-workspace::after { color: rgba(20,20,18,.035); }
      .finder-panel,
      .finder-result { position: relative; z-index: 1; }
      .finder-panel { padding-top: clamp(30px,6vh,46px); }
      .finder-result { padding-top: 18px; }
    }

    @media (max-height: 650px) and (max-width: 760px) {
      .modal[data-kind="services"] .modal-body--services {
        gap: 5px;
        padding-top: 10px;
        padding-bottom: 8px;
      }
      .services-scene-head .modal-title {
        max-width: 15ch;
        font-size: clamp(28px,9vw,32px);
      }
      .services-scene-head .modal-description { display: none; }
      .finder-progress li,
      .finder-progress button { min-height: 34px; }
      .finder-panel { gap: 8px; padding-block: 8px 4px; }
      .finder-question { gap: 3px 7px; }
      .finder-question h3 { font-size: 19px; }
      .finder-question p { font-size: 7.5px; }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option {
        min-height: 70px;
        padding: 8px 28px 7px 9px;
      }
      .finder-option strong,
      .finder-condition strong { font-size: 10.5px; }
      .finder-option small,
      .finder-condition small { font-size: 7.2px; }
      .finder-option-mark {
        top: 7px;
        right: 7px;
        width: 17px;
        height: 17px;
      }
      .services-assurances li { min-height: 26px; }
    }

    /* Services v9: result state, clearer inputs and stronger small-screen type. */
    .modal-body--services[data-finder-view="result"] .services-scene-head .modal-title { max-width: 15ch; }

    .services-scene-head [data-services-scene-title] {
      transition: opacity .18s ease, transform .18s ease;
    }

    .finder-progress button:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: -2px;
    }

    .finder-next .finder-next-label { margin-left: 0; }
    .finder-next .finder-next-mark { margin-left: 20px; }

    .finder-result-summary-row {
      display: grid;
      grid-template-columns: minmax(120px,.42fr) minmax(0,1fr);
      gap: 18px;
      margin-top: 11px;
      padding-top: 11px;
      border-top: 1px solid rgba(255,255,255,.13);
    }

    .finder-result-summary-row > span {
      color: rgba(255,255,255,.42);
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .finder-result-summary-row .finder-result-summary {
      margin-top: 0;
      color: rgba(255,255,255,.58);
    }

    .finder-result {
      scrollbar-width: thin;
      scrollbar-color: rgba(249,65,55,.48) transparent;
    }

    .finder-result::-webkit-scrollbar { width: 3px; }
    .finder-result::-webkit-scrollbar-track { background: transparent; }
    .finder-result::-webkit-scrollbar-thumb { background: rgba(249,65,55,.48); }

    html[data-theme="light"] .finder-result-summary-row { border-color: rgba(20,20,18,.14); }
    html[data-theme="light"] .finder-result-summary-row > span { color: rgba(20,20,18,.44); }
    html[data-theme="light"] .finder-result-summary-row .finder-result-summary { color: rgba(20,20,18,.58); }

    @media (max-width: 760px) {
      .finder-result-summary-row {
        grid-template-columns: minmax(100px,.45fr) minmax(0,1.55fr);
        gap: 10px;
        margin-top: 7px;
        padding-top: 7px;
      }
      .finder-result-summary-row > span { font-size: 7px; }
      .finder-result-summary-row .finder-result-summary { margin-top: 0; }
      .services-assurances strong { font-size: 7.4px; }
    }

    @media (max-height: 800px) and (min-width: 761px) {
      .finder-result-summary-row { margin-top: 8px; padding-top: 8px; }
      .finder-result-summary-row .finder-result-summary { margin-top: 0; }
    }

    @media (max-height: 650px) and (max-width: 760px) {
      .services-assurances strong { font-size: 5.9px; }
    }

    @media (max-width: 340px) {
      .finder-result-main {
        grid-template-columns: minmax(0,1fr) 116px;
        column-gap: 8px;
      }
      .finder-result h3 { font-size: 19px; }
      .finder-result-facts strong { font-size: 9.5px; }
    }

    /* Services v10: stripped-back editorial system with SMENA keylines. */
    .modal[data-kind="services"] .modal-panel {
      height: min(760px, calc(100dvh - clamp(12px,4vw,48px)));
    }

    .modal[data-kind="services"] .modal-body--services {
      grid-template-rows: auto minmax(0,1fr);
      gap: clamp(12px,1.7vw,22px);
    }

    .services-scene-head {
      grid-template-columns: 1fr;
      align-items: end;
      padding-right: clamp(80px,12vw,170px);
    }

    .services-scene-head .scene-label,
    .services-scene-head .modal-title { grid-column: 1; }

    .services-scene-head .modal-title {
      max-width: 17ch;
      font-size: clamp(42px,4.35vw,66px);
      line-height: .9;
    }

    .services-scene-head::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 2px;
      width: clamp(54px,7vw,96px);
      height: 1px;
      background: var(--accent);
      transform: rotate(-90deg) translateX(50%);
      transform-origin: right bottom;
      opacity: .8;
    }

    .services-scene-head::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 1px;
      width: 5px;
      height: 5px;
      background: var(--accent);
    }

    .service-finder { border-bottom: 0; }

    .finder-progress li {
      min-height: 38px;
      border-right: 0;
    }

    .finder-progress button {
      min-height: 37px;
      gap: 8px;
      padding: 0 8px;
    }

    .finder-progress li[aria-current="step"] { background: transparent; }
    .finder-progress-copy { display: block; }
    .finder-progress-copy strong { font-size: 9px; letter-spacing: .01em; }

    .finder-progress li::after {
      right: auto;
      width: 42px;
      height: 1px;
      transform: scaleX(0);
    }

    .finder-progress li[aria-current="step"]::after { transform: scaleX(1); }

    .finder-panel {
      grid-template-columns: minmax(250px,.52fr) minmax(0,1.48fr);
      gap: clamp(28px,4.5vw,76px);
      padding-inline: clamp(10px,1.5vw,22px);
    }

    .finder-question { z-index: 1; padding-left: 18px; }

    .finder-question::after {
      content: "";
      position: absolute;
      z-index: -1;
      right: -18px;
      bottom: -44px;
      color: rgba(255,255,255,.028);
      font: 750 clamp(112px,12vw,178px)/.72 Arial, sans-serif;
      letter-spacing: -.12em;
      pointer-events: none;
    }

    .service-finder[data-step="goal"] .finder-question::after { content: "01"; }
    .service-finder[data-step="readiness"] .finder-question::after { content: "02"; }
    .service-finder[data-step="conditions"] .finder-question::after { content: "03"; }

    .finder-question h3 {
      max-width: 11ch;
      font-size: clamp(30px,2.8vw,44px);
    }

    .finder-question p { max-width: 31ch; color: rgba(255,255,255,.42); }

    .finder-options { background: transparent; }

    .finder-option,
    .finder-condition {
      min-height: 104px;
      padding: 19px 38px 18px 18px;
      background: transparent;
      box-shadow: none;
    }

    .finder-options--goals .finder-option { min-height: clamp(88px,10.5vh,104px); }

    .finder-option::before,
    .finder-condition::before,
    .finder-option[aria-checked="true"]::before,
    .finder-condition[aria-pressed="true"]::before {
      inset: auto auto -1px -1px;
      width: 0;
      height: 1px;
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      background: var(--accent);
      opacity: 1;
      transform: none;
      transition: width .25s cubic-bezier(.2,.7,.2,1);
    }

    .finder-option:hover::before,
    .finder-option:focus-visible::before,
    .finder-condition:hover::before,
    .finder-condition:focus-visible::before { width: 34%; transform: none; }

    .finder-option[aria-checked="true"]::before,
    .finder-condition[aria-pressed="true"]::before { width: 100%; }

    .finder-option[aria-checked="true"],
    .finder-condition[aria-pressed="true"] {
      background: linear-gradient(135deg,rgba(249,65,55,.06),transparent 58%);
      box-shadow: none;
    }

    .finder-option-mark {
      top: auto;
      right: 16px;
      bottom: 15px;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      color: rgba(255,255,255,.34);
      font-size: 13px;
    }

    .finder-option:hover .finder-option-mark,
    .finder-option:focus-visible .finder-option-mark,
    .finder-condition:hover .finder-option-mark,
    .finder-condition:focus-visible .finder-option-mark {
      border-color: transparent;
      color: var(--accent);
      transform: translate(3px,-3px);
    }

    .finder-condition:hover .finder-option-mark,
    .finder-condition:focus-visible .finder-option-mark { transform: rotate(90deg); }

    .finder-option[aria-checked="true"] .finder-option-mark,
    .finder-condition[aria-pressed="true"] .finder-option-mark {
      border: 0;
      background: transparent;
      color: var(--accent);
    }

    .finder-option > span,
    .finder-condition > span { color: rgba(255,255,255,.34); }

    .finder-option strong,
    .finder-condition strong {
      max-width: 19ch;
      font-size: clamp(15px,1.25vw,19px);
      line-height: 1.05;
    }

    .finder-option small,
    .finder-condition small {
      display: none;
      max-width: 27ch;
      color: rgba(255,255,255,.38);
      font-size: 9px;
    }

    .finder-result-reason { margin-top: 17px; }
    .finder-result-facts { margin-top: clamp(20px,2.3vw,32px); }

    html[data-theme="light"] .finder-question::after { color: rgba(20,20,18,.035); }
    html[data-theme="light"] .finder-question p { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .finder-option > span,
    html[data-theme="light"] .finder-condition > span { color: rgba(20,20,18,.4); }
    html[data-theme="light"] .finder-option small,
    html[data-theme="light"] .finder-condition small { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .finder-option-mark { color: rgba(20,20,18,.36); }

    @media (max-height: 800px) and (min-width: 761px) {
      .services-scene-head .modal-title { font-size: clamp(40px,3.9vw,54px); }
      .finder-panel { padding-block: 16px 42px; }
      .finder-options--goals .finder-option { min-height: 91px; }
      .finder-question h3 { font-size: clamp(28px,2.55vw,38px); }
    }

    @media (max-width: 760px) {
      .modal[data-kind="services"] .modal-body--services { gap: 7px; }
      .services-scene-head {
        grid-template-columns: 1fr;
        padding-right: 44px;
      }
      .services-scene-head .modal-title {
        max-width: 15ch;
        font-size: clamp(31px,9.5vw,40px);
      }
      .services-scene-head::before { height: 1px; width: 36px; }
      .finder-progress li,
      .finder-progress button { min-height: 32px; }
      .finder-progress button { justify-content: flex-start; padding-inline: 6px; }
      .finder-progress-copy strong { font-size: 7px; }
      .finder-progress li::after { width: 28px; }
      .finder-panel {
        grid-template-columns: 1fr;
        gap: 11px;
        padding-inline: 0;
      }
      .finder-question { padding-left: 11px; }
      .finder-question::after { content: none !important; }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option { padding-right: 29px; }
      .finder-option-mark {
        top: auto;
        right: 10px;
        bottom: 9px;
        width: auto;
        height: auto;
        font-size: 10px;
      }
      .finder-option small,
      .finder-condition small { display: block; font-size: 8px; }
    }

    @media (max-height: 650px) and (max-width: 760px) {
      .services-scene-head .modal-title { font-size: clamp(27px,8.7vw,31px); }
      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option { min-height: 66px; }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(620px, calc(100dvh - 24px));
      }
    }

    /* Services v11: one visual language — route, coordinates, keylines. */
    .services-scene-head {
      padding-right: clamp(178px,20vw,270px);
      overflow: hidden;
    }

    .services-scene-head::before,
    .services-scene-head::after { content: none; }

    .services-scene-duration { display: none; }

    .services-route-art {
      position: absolute;
      z-index: 2;
      right: 1px;
      bottom: 0;
      width: clamp(156px,18vw,224px);
      height: auto;
      overflow: visible;
      pointer-events: none;
    }

    .services-route-art-base,
    .services-route-art-run,
    .services-route-art-signal,
    .services-route-terminal-scope {
      fill: none;
      vector-effect: non-scaling-stroke;
    }

    .services-route-art-base {
      stroke: rgba(255,255,255,.13);
      stroke-width: .8;
    }

    .services-route-art-run {
      stroke: var(--accent);
      stroke-width: 1.25;
      stroke-dasharray: var(--route-progress,.26) 1;
      transition: stroke-dasharray .6s cubic-bezier(.2,.75,.2,1);
    }

    .services-route-node {
      fill: #111;
      stroke: rgba(255,255,255,.34);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
      transition: fill .3s ease, stroke .3s ease;
    }

    .services-route-terminal-scope {
      stroke: rgba(255,255,255,.34);
      stroke-width: .8;
      transition: stroke .3s ease, opacity .3s ease;
    }

    .services-route-terminal-core {
      fill: #111;
      stroke: var(--accent);
      stroke-width: .9;
      vector-effect: non-scaling-stroke;
      transition: fill .3s ease, stroke .3s ease;
    }

    .services-route-cursor {
      opacity: 0;
      transition: opacity .22s ease;
    }

    .services-route-cursor-ring {
      fill: none;
      stroke: var(--accent);
      stroke-width: .7;
      vector-effect: non-scaling-stroke;
      animation: servicesRouteCursor 2.4s ease-in-out infinite;
    }

    .services-route-cursor-core {
      fill: var(--accent);
      stroke: none;
    }

    .services-route-art-signal {
      stroke: rgba(255,255,255,.92);
      stroke-width: 1.15;
      stroke-dasharray: .035 .965;
      stroke-dashoffset: 0;
      opacity: 0;
    }

    .modal-body--services[data-finder-view="goal"] { --route-progress: .26; }
    .modal-body--services[data-finder-view="readiness"] { --route-progress: .54; }
    .modal-body--services[data-finder-view="conditions"] { --route-progress: .8; }
    .modal-body--services[data-finder-view="result"] { --route-progress: 1; }
    .modal-body--services[data-finder-view="goal"] .services-route-node:nth-of-type(1),
    .modal-body--services[data-finder-view="readiness"] .services-route-node:nth-of-type(-n+2),
    .modal-body--services[data-finder-view="conditions"] .services-route-node,
    .modal-body--services[data-finder-view="result"] .services-route-node {
      fill: var(--accent);
      stroke: var(--accent);
    }

    .modal-body--services[data-finder-view="result"] .services-route-terminal-scope { stroke: var(--accent); }
    .modal-body--services[data-finder-view="result"] .services-route-terminal-core { fill: var(--accent); }
    .modal-body--services[data-finder-view="goal"] .services-route-cursor--goal,
    .modal-body--services[data-finder-view="readiness"] .services-route-cursor--readiness,
    .modal-body--services[data-finder-view="conditions"] .services-route-cursor--conditions { opacity: 1; }
    .modal-body--services[data-finder-view="result"] .services-route-art-signal {
      opacity: .9;
      animation: servicesRouteSignal 3.2s linear infinite;
    }

    @keyframes servicesRouteSignal {
      to { stroke-dashoffset: -1; }
    }

    @keyframes servicesRouteCursor {
      0%, 100% { stroke-opacity: .28; }
      50% { stroke-opacity: .8; }
    }

    .finder-question::after { content: none !important; }

    .finder-option,
    .finder-condition { isolation: isolate; }

    .finder-option-coordinate {
      position: absolute;
      z-index: 0;
      top: 11px;
      right: 15px;
      color: rgba(255,255,255,.045);
      font: 750 clamp(42px,4.3vw,62px)/.8 Arial, sans-serif;
      letter-spacing: -.1em;
      pointer-events: none;
      transition: color .25s ease, transform .25s cubic-bezier(.2,.75,.2,1);
    }

    .finder-option > :not(.finder-option-coordinate),
    .finder-condition > :not(.finder-option-coordinate) {
      position: relative;
      z-index: 1;
    }

    .finder-option:hover .finder-option-coordinate,
    .finder-option:focus-visible .finder-option-coordinate,
    .finder-condition:hover .finder-option-coordinate,
    .finder-condition:focus-visible .finder-option-coordinate {
      color: rgba(249,65,55,.11);
      transform: translateX(-3px);
    }

    .finder-option[aria-checked="true"] .finder-option-coordinate,
    .finder-condition[aria-pressed="true"] .finder-option-coordinate {
      color: rgba(249,65,55,.16);
    }

    html[data-theme="light"] .services-route-art-base { stroke: rgba(20,20,18,.18); }
    html[data-theme="light"] .services-route-node,
    html[data-theme="light"] .services-route-terminal-core { fill: #f4f2ed; }
    html[data-theme="light"] .services-route-node,
    html[data-theme="light"] .services-route-terminal-scope { stroke: rgba(20,20,18,.34); }
    html[data-theme="light"] .services-route-art-signal { stroke: rgba(20,20,18,.82); }
    html[data-theme="light"] .modal-body--services[data-finder-view="goal"] .services-route-node:nth-of-type(1),
    html[data-theme="light"] .modal-body--services[data-finder-view="readiness"] .services-route-node:nth-of-type(-n+2),
    html[data-theme="light"] .modal-body--services[data-finder-view="conditions"] .services-route-node,
    html[data-theme="light"] .modal-body--services[data-finder-view="result"] .services-route-node,
    html[data-theme="light"] .modal-body--services[data-finder-view="result"] .services-route-terminal-core { fill: var(--accent); }
    html[data-theme="light"] .modal-body--services[data-finder-view="result"] .services-route-terminal-scope { stroke: var(--accent); }
    html[data-theme="light"] .finder-option-coordinate { color: rgba(20,20,18,.055); }

    @media (max-width: 760px) {
      .services-scene-head { padding-right: 110px; }
      .services-route-art { width: 104px; right: 0; bottom: 1px; }
      .finder-workspace::after { content: none !important; }
      .finder-option-coordinate {
        top: 9px;
        right: 10px;
        font-size: 38px;
      }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .modal[data-kind="services"] .modal-panel {
        height: min(600px, calc(100dvh - 24px));
      }
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(620px, calc(100dvh - 24px));
      }
    }

    /* Services v12: tighter art direction and a modular choice grid. */
    @media (min-width: 761px) {
      .modal[data-kind="services"] .modal-panel {
        height: min(590px, calc(100dvh - clamp(12px,4vw,48px)));
      }

      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(650px, calc(100dvh - clamp(12px,4vw,48px)));
      }

      .finder-panel {
        grid-template-columns: minmax(240px,.47fr) minmax(0,1.53fr);
        gap: clamp(34px,5vw,82px);
      }

      .finder-options--goals {
        grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
        grid-template-rows: minmax(108px,1.12fr) minmax(88px,.88fr);
      }

      .finder-options--goals .finder-option {
        min-height: 0;
      }

      .finder-options--goals .finder-option:nth-child(-n+2) strong {
        max-width: 17ch;
        font-size: clamp(17px,1.4vw,21px);
      }

      .finder-options--goals .finder-option:nth-child(n+3) {
        padding-top: 15px;
      }

      .finder-question h3 {
        letter-spacing: -.055em;
      }

      .finder-progress button {
        padding-inline: 9px;
      }

      .finder-progress-copy strong {
        letter-spacing: .025em;
      }

      .finder-result-detail::after { display: none; }
      .finder-result-actions { padding-right: 0; }

      .finder-option > span,
      .finder-condition > span {
        color: rgba(255,255,255,.48);
        letter-spacing: .055em;
      }

      html[data-theme="light"] .finder-option > span,
      html[data-theme="light"] .finder-condition > span {
        color: rgba(20,20,18,.5);
      }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .modal[data-kind="services"] .modal-panel:not(:has(.modal-body--services[data-finder-view="result"])) {
        height: min(540px, calc(100dvh - 24px));
      }
    }

    /* Services v13: one unambiguous selected state. */
    .finder-option::after,
    .finder-condition::after,
    .finder-option[aria-checked="true"]::after,
    .finder-condition[aria-pressed="true"]::after {
      content: none !important;
    }

    .finder-option > .finder-option-mark,
    .finder-condition > .finder-option-mark {
      position: absolute;
      z-index: 2;
      top: auto;
      right: 14px;
      bottom: 12px;
    }

    /* Services v14: tighter copy, connected controls and a clear route finish. */
    @media (min-width: 761px) {
      .finder-panel {
        grid-template-rows: auto auto;
        row-gap: 14px;
        align-content: center;
        align-items: start;
      }

      .finder-question,
      .finder-options { align-self: center; }

      .finder-panel > .finder-back,
      .finder-panel-actions {
        grid-row: 2;
        align-self: start;
        margin-top: 13px;
      }
    }

    /* Services v15: cross-audit — readable scale, calmer density and complete keyboard states. */
    .finder-progress button:focus-visible,
    .finder-option:focus-visible,
    .finder-condition:focus-visible,
    .finder-back:focus-visible,
    .finder-restart:focus-visible,
    .finder-next:focus-visible,
    .finder-contact:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: -2px;
    }

    .finder-progress-copy strong {
      font-size: 10px;
      letter-spacing: .02em;
    }

    .finder-question > span,
    .finder-result-label,
    .finder-result-detail > span,
    .finder-result-risk > span,
    .finder-result-summary-row > span {
      font-size: 8.5px;
      line-height: 1.15;
    }

    .finder-option small,
    .finder-condition small {
      display: block;
      max-width: 31ch;
      color: rgba(255,255,255,.49);
      font-size: 9.5px;
      line-height: 1.35;
    }

    .finder-option strong,
    .finder-condition strong {
      max-width: 20ch;
      line-height: 1.08;
    }

    .finder-result-reason,
    .finder-result-risk p,
    .finder-result-summary-row .finder-result-summary {
      color: rgba(255,255,255,.6);
    }

    .finder-result-detail li {
      color: rgba(255,255,255,.78);
    }

    html[data-theme="light"] .finder-option small,
    html[data-theme="light"] .finder-condition small,
    html[data-theme="light"] .finder-result-reason,
    html[data-theme="light"] .finder-result-risk p,
    html[data-theme="light"] .finder-result-summary-row .finder-result-summary {
      color: rgba(20,20,18,.58);
    }

    @media (min-width: 761px) {
      .modal[data-kind="services"] .modal-panel:not(:has(.modal-body--services[data-finder-view="result"])) {
        height: min(610px, calc(100dvh - clamp(12px,4vw,48px)));
      }

      .finder-progress li,
      .finder-progress button { min-height: 42px; }

      .finder-panel {
        grid-template-columns: minmax(238px,.45fr) minmax(0,1.55fr);
        column-gap: clamp(34px,4vw,60px);
        padding-block: 24px 34px;
      }

      .finder-question h3 {
        max-width: 10.5ch;
        font-size: clamp(31px,2.75vw,42px);
      }

      .finder-options--goals {
        grid-template-rows: repeat(2,minmax(106px,1fr));
      }

      .finder-option,
      .finder-condition,
      .finder-options--goals .finder-option {
        min-height: 116px;
        gap: 7px;
        padding: 17px 40px 16px 18px;
      }

      .finder-options--goals .finder-option {
        min-height: 106px;
      }

      .finder-options--goals .finder-option:nth-child(n+3) {
        padding-top: 17px;
      }

      .finder-option strong,
      .finder-condition strong,
      .finder-options--goals .finder-option:nth-child(-n+2) strong {
        font-size: clamp(16px,1.3vw,20px);
      }

      .finder-option > span,
      .finder-condition > span {
        font-size: 8px;
      }

      .finder-panel > .finder-back,
      .finder-panel-actions {
        margin-top: 10px;
      }

      .finder-back,
      .finder-restart { font-size: 10px; }

      .finder-result-main,
      .finder-result-detail {
        padding: clamp(28px,3.1vw,46px);
      }

      .finder-result h3 {
        font-size: clamp(34px,3vw,46px);
      }

      .finder-result-reason {
        max-width: 38ch;
        font-size: 11.5px;
      }

      .finder-result-facts strong {
        font-size: clamp(15px,1.25vw,19px);
      }

      .finder-result-detail li,
      .finder-result-risk p,
      .finder-result-summary-row .finder-result-summary {
        font-size: 10.5px;
      }
    }

    @media (max-width: 760px) {
      .finder-progress li,
      .finder-progress button { min-height: 36px; }

      .finder-progress-copy strong { font-size: 8px; }

      .finder-question > span,
      .finder-result-label,
      .finder-result-detail > span,
      .finder-result-risk > span,
      .finder-result-summary-row > span {
        font-size: 7.5px;
      }

      .finder-option small,
      .finder-condition small {
        font-size: 8.5px;
        line-height: 1.3;
      }

      .finder-result-reason,
      .finder-result-risk p,
      .finder-result-summary-row .finder-result-summary {
        font-size: 8.5px;
        line-height: 1.35;
      }

      .finder-result-detail li {
        min-height: 38px;
        font-size: 9px;
      }

      .finder-back,
      .finder-restart { min-height: 32px; font-size: 9px; }
    }

    @media (max-height: 650px) and (max-width: 760px) {
      .finder-option small,
      .finder-condition small { font-size: 7.5px; }
      .finder-result-detail li,
      .finder-result-risk p,
      .finder-result-summary-row .finder-result-summary { font-size: 7.8px; }
    }

    @media (max-width: 340px) {
      .finder-option strong,
      .finder-condition strong { overflow-wrap: anywhere; }

      .finder-options--goals { grid-template-columns: 1fr; }

      .finder-options--goals .finder-option {
        grid-template-columns: minmax(102px,.9fr) minmax(0,1.1fr);
        align-items: center;
        min-height: 58px;
        padding: 8px 27px 8px 10px;
      }

      .finder-options--goals .finder-option > span,
      .finder-options--goals .finder-option strong { grid-column: 1; }

      .finder-options--goals .finder-option small {
        grid-column: 2;
        grid-row: 1 / 3;
      }

      .finder-options--goals .finder-option-coordinate { font-size: 32px; }
    }

    /* Services v16: the result reads as an estimate, not an internal calculator summary. */
    @media (min-width: 761px) {
      .finder-result {
        grid-template-columns: minmax(300px,.76fr) minmax(0,1.24fr);
      }

      .finder-result-main {
        align-content: center;
        padding: clamp(38px,4.2vw,64px);
        background:
          linear-gradient(90deg,rgba(249,65,55,.075),transparent 70%),
          linear-gradient(180deg,rgba(249,65,55,.025),transparent 55%);
      }

      .finder-result-detail {
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-content: center;
        padding: clamp(34px,3.7vw,56px);
      }

      .finder-result-detail > span,
      .finder-result-detail > ul,
      .finder-result-actions { grid-column: 1 / -1; }

      .finder-result-risk,
      .finder-result-summary-row {
        display: block;
        min-height: 88px;
        margin: 0;
        padding: 15px 18px;
        border-top: 0;
        border-right: 1px solid rgba(255,255,255,.13);
        border-bottom: 1px solid rgba(255,255,255,.13);
      }

      .finder-result-summary-row {
        grid-template-columns: none;
        gap: 0;
        border-right: 0;
      }

      .finder-result-risk > span,
      .finder-result-summary-row > span {
        margin: 0 0 10px;
      }

      .finder-result-summary-row .finder-result-summary { margin: 0; }

      .finder-result-actions {
        margin-top: 22px;
      }

      .finder-contact {
        min-width: 270px;
        min-height: 48px;
        font-size: 11px;
      }
    }

    .finder-result-label {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .finder-result-label::before {
      content: "";
      width: 20px;
      height: 1px;
      background: var(--accent);
    }

    .finder-result-facts {
      background: rgba(255,255,255,.018);
    }

    .finder-result-facts > div {
      min-width: 0;
      padding-block: 16px;
    }

    .finder-result-facts span {
      max-width: 12ch;
      line-height: 1.2;
    }

    .finder-result-detail > span {
      margin-bottom: 12px;
      color: var(--ink);
      font-size: 9px;
    }

    .finder-result-detail li {
      min-height: 52px;
      padding-block: 17px 13px;
    }

    .finder-result-detail li::before { top: 21px; }

    .finder-result-risk p,
    .finder-result-summary-row .finder-result-summary {
      color: rgba(255,255,255,.64);
    }

    html[data-theme="light"] .finder-result-facts {
      background: rgba(20,20,18,.018);
    }

    html[data-theme="light"] .finder-result-risk,
    html[data-theme="light"] .finder-result-summary-row {
      border-color: rgba(20,20,18,.14);
    }

    @media (max-width: 760px) {
      .finder-result-label::before { width: 14px; }
      .finder-result-detail > span { font-size: 8px; }
      .finder-result-detail li { min-height: 38px; padding-block: 11px 9px; }
      .finder-result-detail li::before { top: 15px; }
    }

    @media (max-width: 760px) and (min-height: 700px) {
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(680px, calc(100dvh - 24px));
      }
    }

    @media (max-width: 760px) and (max-height: 650px) {
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] { gap: 4px; }
      .modal-body--services[data-finder-view="result"] .services-scene-head .modal-title {
        font-size: clamp(25px,8vw,29px);
      }
      .modal-body--services[data-finder-view="result"] .finder-progress li,
      .modal-body--services[data-finder-view="result"] .finder-progress button { min-height: 30px; }
      .modal-body--services[data-finder-view="result"] .finder-result-main,
      .modal-body--services[data-finder-view="result"] .finder-result-detail { padding-block: 8px; }
      .modal-body--services[data-finder-view="result"] .finder-result-reason {
        margin-top: 5px;
        font-size: 7.5px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div { padding-block: 7px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail > span { margin-bottom: 4px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li {
        min-height: 32px;
        padding-block: 8px 6px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li::before { top: 12px; }
      .modal-body--services[data-finder-view="result"] .finder-result-risk,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row {
        margin-top: 6px;
        padding-top: 6px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-actions { margin-top: 6px; }
      .modal-body--services[data-finder-view="result"] .finder-contact { min-height: 32px; }
    }

    /* Unified responsive type scale — final cross-section audit. */
    .brand-caption { font-size: clamp(10.5px, .72vw, 12px); }
    .clock { font-size: clamp(10px, .68vw, 11px); }
    .header-control--language { font-size: 10px; }
    .showcase .project-window[data-visual] .project-window-screen > small {
      font-size: clamp(8px, .52vw, 9px);
      line-height: 1.2;
    }
    .tools .social-link small { font-size: clamp(9.5px, .65vw, 11px); }
    .social-legal-links a { font-size: clamp(9px, .56vw, 10px); }
    .projects-count .process-note { font-size: clamp(10px, .66vw, 11px); }
    .project-copy { font-size: clamp(10.5px, .74vw, 12px); }

    .scene-label { font-size: clamp(10px, .68vw, 11px); }

    .team-member figcaption strong { font-size: clamp(11px, .78vw, 13px); }
    .team-member figcaption span {
      font-size: clamp(8.5px, .57vw, 9.5px);
      line-height: 1.05;
    }
    .modal[data-kind="about"] .about-editorial blockquote footer,
    .modal[data-kind="about"] .about-editorial blockquote footer button { font-size: 10.5px; }
    .modal[data-kind="about"] .about-commitments dt { font-size: clamp(11.5px, .78vw, 13px); }
    .modal[data-kind="about"] .about-commitments dd { font-size: clamp(10.5px, .72vw, 12px); }

    .finder-progress button > span:first-child { font-size: 9px; }
    .finder-progress-copy strong { font-size: clamp(10px, .68vw, 11px); }
    .finder-question > span { font-size: 9.5px; }
    .finder-option > span,
    .finder-condition > span { font-size: 9px; }
    .finder-option small,
    .finder-condition small { font-size: clamp(10px, .68vw, 11px); }
    .finder-result-label,
    .finder-result-detail > span,
    .finder-result-facts small,
    .finder-result-risk > span,
    .finder-result-summary-row > span { font-size: 9px; }
    .finder-result-reason,
    .finder-result-risk p,
    .finder-result-summary,
    .finder-result-detail li { font-size: clamp(10px, .68vw, 11px); }
    .finder-back,
    .finder-restart,
    .finder-contact { font-size: clamp(10px, .7vw, 11.5px); }

    .project-index-label { font-size: 10px; }
    .project-index-item > span { font-size: 9.5px; }
    .project-index-item p { font-size: clamp(11px, .74vw, 12px); }
    .project-feature-copy > span,
    .project-feature-copy p > span,
    .project-feature-copy .case-context,
    .project-media-caption strong,
    .project-media-caption span { font-size: 9.5px; }
    .project-contact { font-size: clamp(10px, .7vw, 11px); }

    .contact-copy-button,
    .contact-brief span { font-size: 10.5px; }

    .process-tab-index { font-size: 10.5px; }
    .process-tab-copy strong { font-size: clamp(11px, .78vw, 12.5px); }
    .process-tab-copy small { font-size: clamp(10.5px, .72vw, 11.5px); }
    .process-panel-meta,
    .process-panel-folio em { font-size: 10px; }
    .process-panel-copy > span { font-size: clamp(10.5px, .72vw, 11px); }
    .process-panel-copy p { font-size: clamp(11px, .82vw, 13px); }
    .process-outcomes dt { font-size: 9px; }
    .process-outcomes dd { font-size: clamp(10.5px, .74vw, 11.5px); }
    .process-panel-footer > span { font-size: 10px; }
    .process-panel-footer button { font-size: 11px; }

    @media (max-width: 700px) {
      .brand-caption { font-size: clamp(9.5px, 2.6vw, 11px); }
      .clock { font-size: 10px; }
      .header-control--language { font-size: 9.5px; }
      .tools .social-link small { font-size: 9px; }
      .social-legal-links a { font-size: 9px; }
      .project-copy { font-size: 10.5px; line-height: 1.32; }
      .scene-label { font-size: 9px; }

      .team-member figcaption strong { font-size: clamp(9.5px, 2.7vw, 11px); }
      .team-member figcaption span { font-size: clamp(7px, 2vw, 8px); }
      .modal[data-kind="about"] .about-editorial blockquote footer,
      .modal[data-kind="about"] .about-editorial blockquote footer button { font-size: 9px; }
      .modal[data-kind="about"] .about-commitments dt { font-size: 10px; }
      .modal[data-kind="about"] .about-commitments dd { font-size: 9.5px; }

      .finder-progress button > span:first-child,
      .finder-progress-copy strong { font-size: 8.5px; }
      .finder-question > span { font-size: 8.5px; }
      .finder-option > span,
      .finder-condition > span { font-size: 8.5px; }
      .finder-option small,
      .finder-condition small { font-size: 9.5px; }
      .finder-result-label,
      .finder-result-detail > span,
      .finder-result-facts small,
      .finder-result-risk > span,
      .finder-result-summary-row > span { font-size: 8.5px; }
      .finder-result-reason,
      .finder-result-risk p,
      .finder-result-summary,
      .finder-result-detail li { font-size: 9.5px; }
      .finder-back,
      .finder-restart,
      .finder-contact { font-size: 10px; }

      .modal[data-kind="projects"] .project-index-item > span,
      .project-feature-copy > span,
      .project-feature-copy p > span,
      .project-feature-copy .case-context,
      .project-media-caption strong,
      .project-media-caption span { font-size: 8.5px; }
      .project-contact { font-size: 10px; }

      .contact-copy-button,
      .contact-brief span { font-size: 9.5px; }
      .contact-brief p { font-size: 11px; }

      .process-tab-index { font-size: 9px; }
      .process-tab-copy strong { font-size: 10px; }
      .process-tab-copy small { font-size: 8.5px; }
      .process-panel-meta,
      .process-panel-folio em { font-size: 9px; }
      .process-panel-copy > span { font-size: 9.5px; }
      .process-panel-copy p { font-size: 10.5px; }
      .process-outcomes dt { font-size: 8.5px; }
      .process-outcomes dd { font-size: 10px; }
      .process-panel-footer > span { font-size: 9px; }
      .process-panel-footer button { font-size: 10.5px; }
    }

    @media (max-width: 420px) and (max-height: 650px) {
      .team-member figcaption strong { font-size: 9px; }
      .team-member figcaption span { display: none; }
      .modal[data-kind="about"] .about-editorial blockquote footer { display: none; }
      .modal[data-kind="about"] .about-commitments dt { font-size: 9px; }
      .modal[data-kind="about"] .about-commitments dd { font-size: 9px; }
      .finder-option small,
      .finder-condition small { font-size: 9px; }
    }

    @media (max-width: 420px) {
      .clock { display: none; }
    }

    @media (max-height: 590px) and (orientation: landscape) {
      .brand-caption,
      .scene-label { font-size: 9px; }
      .social-legal-links a { font-size: 8px; }
      .process-panel-copy > span,
      .process-panel-meta,
      .process-panel-folio em,
      .process-panel-footer > span { font-size: 8.5px; }
      .process-panel-copy p { font-size: 9px; }
      .process-outcomes dt { font-size: 8px; }
      .process-outcomes dd { font-size: 9px; }
      .process-panel-footer button { font-size: 9.5px; }
    }

    /* Contrast pass: preserve hierarchy without sacrificing legibility. */
    html:not([data-theme="light"]) .brand-caption { color: rgba(244,242,237,.72); }
    html:not([data-theme="light"]) .card-kicker,
    html:not([data-theme="light"]) .projects-count .process-note { color: rgba(255,255,255,.68); }
    html:not([data-theme="light"]) .tools .social-link small,
    html:not([data-theme="light"]) .social-link.is-disabled small,
    html:not([data-theme="light"]) .social-legal-links a { color: rgba(255,255,255,.64); }

    html:not([data-theme="light"]) .modal-description,
    html:not([data-theme="light"]) .about-commitments dd,
    html:not([data-theme="light"]) .team-member figcaption span,
    html:not([data-theme="light"]) .finder-option > span,
    html:not([data-theme="light"]) .finder-condition > span,
    html:not([data-theme="light"]) .finder-option small,
    html:not([data-theme="light"]) .finder-condition small,
    html:not([data-theme="light"]) .project-index-item p,
    html:not([data-theme="light"]) .project-feature-copy p,
    html:not([data-theme="light"]) .process-tab-copy small,
    html:not([data-theme="light"]) .process-panel-copy p,
    html:not([data-theme="light"]) .process-outcomes dd { color: rgba(255,255,255,.66); }

    html:not([data-theme="light"]) .about-editorial blockquote footer,
    html:not([data-theme="light"]) .project-index-item > span,
    html:not([data-theme="light"]) .process-panel-meta,
    html:not([data-theme="light"]) .process-panel-folio i,
    html:not([data-theme="light"]) .process-panel-folio em,
    html:not([data-theme="light"]) .process-panel-copy > span,
    html:not([data-theme="light"]) .process-outcomes dt,
    html:not([data-theme="light"]) .process-panel-footer > span { color: rgba(255,255,255,.52); }

    html[data-theme="light"] .brand-caption,
    html[data-theme="light"] .card-kicker,
    html[data-theme="light"] .projects-count .process-note { color: rgba(20,20,18,.68); }
    html[data-theme="light"] .tools .social-link small,
    html[data-theme="light"] .social-link.is-disabled small,
    html[data-theme="light"] .social-legal-links a { color: rgba(20,20,18,.62); }

    html[data-theme="light"] .modal-description,
    html[data-theme="light"] .about-commitments dd,
    html[data-theme="light"] .team-member figcaption span,
    html[data-theme="light"] .finder-option > span,
    html[data-theme="light"] .finder-condition > span,
    html[data-theme="light"] .finder-option small,
    html[data-theme="light"] .finder-condition small,
    html[data-theme="light"] .project-index-item p,
    html[data-theme="light"] .process-tab-copy small,
    html[data-theme="light"] .process-panel-copy p,
    html[data-theme="light"] .process-outcomes dd { color: rgba(20,20,18,.64); }

    html[data-theme="light"] .about-editorial blockquote footer,
    html[data-theme="light"] .project-index-item > span,
    html[data-theme="light"] .process-panel-meta,
    html[data-theme="light"] .process-panel-folio i,
    html[data-theme="light"] .process-panel-folio em,
    html[data-theme="light"] .process-panel-copy > span,
    html[data-theme="light"] .process-outcomes dt,
    html[data-theme="light"] .process-panel-footer > span { color: rgba(20,20,18,.56); }

    @media (min-width: 701px) {
      .team-member figcaption span { font-size: 10.5px; }
      .modal[data-kind="about"] .about-editorial blockquote footer,
      .modal[data-kind="about"] .about-editorial blockquote footer button { font-size: 11px; }

      .finder-progress button > span:first-child { font-size: 10px; }
      .finder-progress-copy strong { font-size: 11px; }
      .finder-question > span { font-size: 10px; }
      .finder-option > span,
      .finder-condition > span { font-size: 10px; }
      .finder-option small,
      .finder-condition small { font-size: 11.5px; }

      .modal[data-kind="projects"] .project-index-label { font-size: 11px; }
      .modal[data-kind="projects"] .project-index-item > span { font-size: 10.5px; }
      .modal[data-kind="projects"] .case-media-meta strong,
      .modal[data-kind="projects"] .case-media-meta span,
      .modal[data-kind="projects"] .project-feature-copy > span,
      .modal[data-kind="projects"] .project-feature-copy .case-context,
      .modal[data-kind="projects"] .project-case-story p b { font-size: 10px; }
      .modal[data-kind="projects"] .project-case-story p { font-size: 11px; }
      .modal[data-kind="projects"] .project-contact { font-size: 10.5px; }
      .contact-copy-button,
      .contact-brief span { font-size: 11px; }
      .process-panel-meta,
      .process-panel-folio em { font-size: 10.5px; }
      .process-outcomes dt { font-size: 10px; }
      .process-panel-footer > span { font-size: 10.5px; }
    }

    @media (min-width: 1200px) {
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-feature-copy,
      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-copy {
        grid-template-columns: minmax(260px,.9fr) minmax(270px,1.15fr) minmax(170px,.55fr);
        gap: clamp(18px,1.6vw,26px);
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-feature-copy h3,
      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-copy h3 {
        font-size: clamp(28px,2vw,34px);
      }
    }

    /* Services → project: one route with two valid entry points. */
    .project-route-bridge {
      position: absolute;
      z-index: 4;
      top: 50%;
      left: 62.5%;
      width: clamp(48px, 4.4vw, 72px);
      height: clamp(34px, 3.4vw, 46px);
      pointer-events: none;
      transform: translate(-50%, -50%);
      opacity: .48;
      transition: opacity .28s ease, filter .28s ease;
    }

    .project-route-bridge svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .project-route-bridge path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
    .project-route-bridge-base { stroke: rgba(255,255,255,.24); }
    .project-route-bridge-run {
      stroke: var(--accent);
      stroke-dasharray: .16 .84;
      stroke-dashoffset: 1;
      opacity: .62;
      animation: project-route-pulse 4.8s linear infinite;
    }
    .project-route-bridge circle { fill: var(--accent); }
    .project-route-bridge rect { fill: #111; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .bento.has-project-context .project-route-bridge { opacity: 1; filter: drop-shadow(0 0 8px rgba(249,65,55,.35)); }
    .bento.has-project-context .project-route-bridge-run { stroke-dasharray: .34 .66; opacity: 1; }
    .bento.has-project-context [data-project-route-contact] {
      border-color: rgba(249,65,55,.54);
      box-shadow: inset 0 0 0 1px rgba(249,65,55,.08);
    }

    @keyframes project-route-pulse { to { stroke-dashoffset: 0; } }

    .contact-primary-stack {
      display: grid;
      min-width: clamp(250px, 22vw, 318px);
      align-content: end;
      gap: 10px;
    }

    .contact-primary-stack .contact-primary { width: 100%; min-width: 0; }
    html:not([data-theme="light"]) .contact-primary-stack .contact-primary { background: var(--accent); color: #fff; }

    .contact.has-project-context .contact-signal { font-size: clamp(42px, 2.15vw, 54px); }

    .contact-team-proof {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 11px;
    }

    .contact-team-avatars { display: flex; flex: none; padding-left: 2px; }
    .contact-team-avatars img {
      display: block;
      width: 36px;
      height: 36px;
      margin-left: -8px;
      border: 2px solid #151515;
      border-radius: 50%;
      background: #222;
      object-fit: cover;
      object-position: 50% 22%;
      filter: grayscale(1) contrast(1.04);
      transform: translateZ(0);
      transform-origin: 50% 75%;
      transition: transform .34s cubic-bezier(.22,1,.36,1), filter .34s ease, box-shadow .34s ease;
    }
    .contact-team-avatars img:first-child { margin-left: 0; }
    .contact-team-avatars:hover img { filter: grayscale(.42) contrast(1.04); }
    .contact-team-avatars img:hover {
      position: relative;
      z-index: 2;
      filter: grayscale(0) contrast(1.02);
      transform: translateY(-5px) scale(1.12);
      box-shadow: 0 8px 18px rgba(0,0,0,.24);
    }

    .contact-team-proof-copy { display: grid; min-width: 0; gap: 2px; }
    .contact-team-proof-copy strong {
      overflow: hidden;
      color: rgba(255,255,255,.82);
      font-size: 11px;
      line-height: 1.12;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .contact-team-proof-copy small { color: rgba(255,255,255,.48); font-size: 9.5px; line-height: 1.1; }

    html[data-theme="light"] .project-route-bridge-base { stroke: rgba(20,20,18,.25); }
    html[data-theme="light"] .project-route-bridge rect { fill: #f0eee9; }
    html[data-theme="light"] .contact-team-avatars img { border-color: #f0eee9; background: #ddd9d2; }
    html[data-theme="light"] .contact-team-proof-copy strong { color: rgba(20,20,18,.84); }
    html[data-theme="light"] .contact-team-proof-copy small { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .contact-copy-button {
      border-left-color: rgba(20,20,18,.16);
      color: rgba(20,20,18,.58);
    }
    html[data-theme="light"] .contact-copy-button:hover,
    html[data-theme="light"] .contact-copy-button:focus-visible { color: var(--accent); }

    @media (max-width: 900px) {
      .project-route-bridge { display: none; }
    }

    @media (max-width: 700px) {
      .contact-primary-stack { min-width: 0; }
      .contact-team-proof { justify-content: flex-start; }
      .contact-team-avatars img { width: 32px; height: 32px; }
      .contact-team-proof-copy strong { font-size: 10.5px; }
      .contact-team-proof-copy small { font-size: 9px; }
      .contact-signal,
      .contact.has-project-context .contact-signal {
        top: 48%;
        left: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        font-size: clamp(23px, 6.4vw, 28px);
        line-height: .9;
        transform: translateY(-50%);
      }
      .contact-signal > b { position: absolute; right: -.2em; bottom: .08em; }
    }

    @media (max-width: 700px) and (max-height: 700px) {
      .contact-team-proof { display: none; }
    }

    /* Large desktop / 2K: scale microcopy and modal scenes with the canvas. */
    @media (min-width: 1920px) and (min-height: 1000px) {
      .modal.is-open .modal-panel { transform: translateY(0) scale(1.08); }
    }

    @media (min-width: 2200px) and (min-height: 1200px) {
      .brand-caption { font-size: 14px; }
      .clock { font-size: 13px; }
      .header-control--language { font-size: 12px; }
      .card-kicker { font-size: 15px; }
      .project-copy { font-size: 14px; }
      .projects-count .process-note { font-size: 13px; }
      .tools .social-link small { font-size: 13px; }
      .social-legal-links a { font-size: 11.5px; }
      .modal.is-open .modal-panel { transform: translateY(0) scale(1.22); }
    }

    /* Project handoff: anchored route, useful card state and a compact contact scene. */
    .project-route-bridge {
      top: 50%;
      left: 62.5%;
      width: 12px;
      height: calc(var(--gap) + 12px);
      opacity: 0;
      transform: translate(-50%, -50%);
      filter: none;
    }

    .project-route-bridge path { stroke-width: .8; }
    .project-route-bridge-run {
      stroke-dasharray: none;
      stroke-dashoffset: 0;
      opacity: .82;
      animation: none;
    }
    .project-route-bridge circle { r: 1.35px; }
    .project-route-bridge rect { stroke-width: .8; }
    .bento.has-project-context .project-route-bridge {
      opacity: .9;
      filter: none;
    }
    .bento.has-project-context .project-route-bridge-run { stroke-dasharray: none; }
    .bento.has-project-context [data-project-route-contact] {
      border-color: rgba(249,65,55,.38);
      box-shadow: inset 0 0 0 1px rgba(249,65,55,.045);
    }

    .contact.has-project-context .contact-signal {
      top: 49%;
      right: clamp(18px,2.25vw,42px);
      left: clamp(18px,2.25vw,42px);
      display: grid;
      width: auto;
      height: auto;
      align-items: start;
      gap: 7px;
      font-size: clamp(25px,1.85vw,34px);
      line-height: 1;
      letter-spacing: -.045em;
      transform: translateY(-50%);
    }

    .contact.has-project-context .contact-signal > span:first-child {
      color: var(--accent);
      font-size: .48em;
      font-weight: 680;
      line-height: 1.1;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .contact.has-project-context .contact-signal > span:nth-child(2) {
      overflow: hidden;
      color: rgba(255,255,255,.82);
      font-weight: 620;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .contact.has-project-context .contact-signal > b { display: none; }
    html[data-theme="light"] .contact.has-project-context .contact-signal > span:nth-child(2) { color: rgba(20,20,18,.78); }

    .modal[data-kind="contact"] .modal-panel,
    .modal[data-kind="services"] .modal-panel { transform: translateY(0) scale(1); }

    .modal-body--contact {
      grid-template-rows: auto auto auto;
      align-content: space-between;
      gap: clamp(18px,2vw,28px);
      padding: clamp(24px,2.7vw,40px) clamp(28px,3.6vw,54px) clamp(26px,3vw,44px);
    }

    .contact-scene-head {
      grid-template-columns: minmax(0,1.08fr) minmax(290px,.92fr);
      align-items: end;
      gap: 12px clamp(34px,4vw,68px);
    }

    .contact-head-copy {
      display: grid;
      align-self: end;
      gap: 13px;
    }
    .contact-head-copy .modal-description { max-width: 500px; margin: 0; }
    .contact-head-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 18px;
    }
    .contact-head-actions .contact-change,
    .contact-head-actions .contact-policy { margin: 0; }
    .contact-head-actions .contact-change {
      color: rgba(255,255,255,.76);
      font-size: 11px;
      line-height: 1.3;
    }
    .contact-head-actions .contact-policy {
      color: rgba(255,255,255,.46);
      font-size: 10px;
      line-height: 1.3;
    }

    .contact-email-row {
      min-height: clamp(78px,8.5vh,106px);
    }
    .contact-email-row .contact-email-action {
      min-height: 0;
      font-size: clamp(34px,3.7vw,56px);
    }

    .contact-actions {
      grid-template-columns: minmax(0,1fr) minmax(260px,320px);
      grid-template-areas: "brief primary";
      align-items: end;
      gap: clamp(24px,3vw,48px);
    }
    .contact-primary-stack { grid-area: primary; min-width: 0; }
    .contact-brief { grid-area: brief; min-height: 72px; }
    .contact-primary-stack .contact-primary {
      min-height: 48px;
      background: var(--accent);
      color: #fff;
    }
    .contact-team-proof-copy strong,
    .contact-team-proof-copy small { white-space: normal; }

    @media (min-width: 761px) {
      .contact-team-avatars img { width: 40px; height: 40px; }
      .contact-team-proof-copy strong { font-size: 12px; }
      .contact-team-proof-copy small { font-size: 10px; }
    }

    html[data-theme="light"] .contact-head-actions .contact-change { color: rgba(20,20,18,.74); }
    html[data-theme="light"] .contact-head-actions .contact-policy { color: rgba(20,20,18,.48); }

    @media (min-width: 1400px) {
      .modal[data-kind="contact"] .modal-panel,
      .modal[data-kind="services"] .modal-panel {
        width: min(1920px,calc(100vw - 104px));
      }
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(820px,calc(100dvh - 96px));
      }
      .modal[data-kind="contact"] .modal-panel { height: min(620px,calc(100dvh - 96px)); }
      .modal-body--services[data-finder-view="result"] .services-scene-head .modal-title { font-size: clamp(60px,4vw,76px); }
      .modal-body--services[data-finder-view="result"] .finder-progress-copy strong { font-size: 12px; }
      .modal-body--services[data-finder-view="result"] .finder-result h3 { font-size: clamp(38px,2.35vw,48px); }
      .modal-body--services[data-finder-view="result"] .finder-result-label,
      .modal-body--services[data-finder-view="result"] .finder-result-detail > span,
      .modal-body--services[data-finder-view="result"] .finder-result-risk > span,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row > span { font-size: 11px; }
      .modal-body--services[data-finder-view="result"] .finder-result-reason { font-size: 15px; }
      .modal-body--services[data-finder-view="result"] .finder-result-facts strong { font-size: 19px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li { font-size: 15px; }
      .modal-body--services[data-finder-view="result"] .finder-result-risk p,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row .finder-result-summary { font-size: 14px; }
      .modal-body--services[data-finder-view="result"] .finder-restart,
      .modal-body--services[data-finder-view="result"] .finder-contact { font-size: 12px; }
    }

    @media (min-width: 761px) and (max-width: 1399px) {
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(700px,calc(100dvh - 48px));
      }
    }

    @media (max-width: 900px) {
      .project-route-bridge { display: none; }
    }

    @media (max-width: 760px) {
      .contact.has-project-context .contact-signal {
        top: 50%;
        right: 14px;
        left: 14px;
        gap: 5px;
        font-size: clamp(18px,5.5vw,22px);
        transform: translateY(-50%);
      }
      .contact.has-project-context .contact-signal > span:first-child { font-size: .52em; }

      .modal[data-kind="contact"] .modal-panel {
        height: auto;
        max-height: calc(100dvh - 12px);
        border-radius: 18px;
      }
      .modal[data-kind="contact"] #modal-content { height: auto; }
      .modal-body--contact {
        height: auto;
        max-height: calc(100dvh - 60px);
        grid-template-rows: auto auto auto;
        align-content: start;
        gap: 14px;
        padding: 15px 18px 18px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }
      .modal-body--contact::-webkit-scrollbar { display: none; }
      .contact-scene-head {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .contact-scene-head .scene-label { grid-column: 1; }
      .contact-scene-head .modal-title {
        font-size: clamp(34px,10.2vw,43px);
        line-height: .98;
      }
      .contact-head-copy { gap: 9px; }
      .contact-head-copy .modal-description {
        max-width: none;
        font-size: 12.5px;
        line-height: 1.34;
      }
      .contact-head-actions { gap: 6px 16px; }
      .contact-head-actions .contact-change { font-size: 10.5px; }
      .contact-head-actions .contact-policy { font-size: 9.5px; }

      .contact-email-row { min-height: 58px; }
      .contact-email-row .contact-email-action {
        min-height: 58px;
        font-size: clamp(18px,5.25vw,23px);
        letter-spacing: -.035em;
      }
      .contact-copy-button {
        min-width: 72px;
        min-height: 40px;
        padding-inline: 7px;
        font-size: 9px;
      }

      .contact-actions {
        grid-template-columns: 1fr;
        grid-template-areas: "primary" "brief";
        gap: 12px;
      }
      .modal[data-kind="contact"] .contact-team-proof {
        display: flex;
        justify-content: flex-start;
      }
      .contact-primary-stack { gap: 8px; }
      .contact-team-avatars img { width: 30px; height: 30px; }
      .contact-team-proof-copy strong { font-size: 10px; }
      .contact-team-proof-copy small { font-size: 8.5px; }
      .contact-primary-stack .contact-primary { min-height: 46px; font-size: 11px; }
      .contact-brief {
        grid-template-columns: repeat(3,minmax(0,1fr));
        min-height: 58px;
        padding-top: 7px;
      }
      .contact-brief span {
        grid-column: 1 / -1;
        margin-bottom: 7px;
        font-size: 9px;
      }
      .contact-brief p {
        min-width: 0;
        padding-inline: 7px;
        font-size: 10px;
        line-height: 1.2;
        text-align: left;
        overflow-wrap: anywhere;
      }

      .modal-body--services[data-finder-view="result"] {
        gap: 8px;
        padding: 12px 16px 16px;
      }
      .modal-body--services[data-finder-view="result"] .services-scene-head {
        min-height: 70px;
        padding-right: 104px;
      }
      .modal-body--services[data-finder-view="result"] .services-scene-head .modal-title {
        font-size: clamp(31px,9.6vw,38px);
        line-height: .95;
      }
      .modal-body--services[data-finder-view="result"] .services-route-art { width: 96px; }
      .modal-body--services[data-finder-view="result"] .finder-progress li,
      .modal-body--services[data-finder-view="result"] .finder-progress button { min-height: 34px; }
      .modal-body--services[data-finder-view="result"] .finder-result {
        padding: 0 0 10px;
        overflow-y: auto;
        scrollbar-width: none;
      }
      .modal-body--services[data-finder-view="result"] .finder-result::-webkit-scrollbar { display: none; }
      .modal-body--services[data-finder-view="result"] .finder-result-main,
      .modal-body--services[data-finder-view="result"] .finder-result-detail { padding: 13px 12px; }
      .modal-body--services[data-finder-view="result"] .finder-result-main {
        grid-template-columns: 1fr;
        align-content: start;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-label,
      .modal-body--services[data-finder-view="result"] .finder-result h3,
      .modal-body--services[data-finder-view="result"] .finder-result-reason,
      .modal-body--services[data-finder-view="result"] .finder-result-facts { grid-column: 1; }
      .modal-body--services[data-finder-view="result"] .finder-result h3 { font-size: 26px; }
      .modal-body--services[data-finder-view="result"] .finder-result-reason {
        margin-top: 7px;
        font-size: 9.5px;
        line-height: 1.3;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts {
        grid-template-columns: repeat(2,minmax(0,1fr));
        margin-top: 12px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div { padding: 9px; }
      .modal-body--services[data-finder-view="result"] .finder-result-facts strong { font-size: 11px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail > span { margin-bottom: 5px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li {
        min-height: 35px;
        padding: 10px 8px 8px 22px;
        font-size: 9.5px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li::before { top: 13px; left: 8px; }
      .modal-body--services[data-finder-view="result"] .finder-result-risk,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row {
        display: grid;
        grid-template-columns: 92px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        margin-top: 7px;
        padding-top: 7px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-risk > span,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row > span { margin: 0; }
      .modal-body--services[data-finder-view="result"] .finder-result-risk p,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row .finder-result-summary {
        margin: 0;
        font-size: 9px;
        line-height: 1.25;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-actions {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        align-items: center;
        gap: 8px;
        margin-top: 10px;
      }
      .modal-body--services[data-finder-view="result"] .finder-contact {
        min-width: 0;
        width: 100%;
        min-height: 44px;
        padding-inline: 10px;
        font-size: 10.5px;
      }
      .modal-body--services[data-finder-view="result"] .finder-restart { justify-self: start; }
    }

    @media (max-width: 380px) and (max-height: 670px) {
      .modal-body--contact { gap: 11px; padding: 12px 14px 14px; }
      .contact-scene-head .modal-title { font-size: clamp(31px,9.5vw,36px); }
      .contact-head-copy .modal-description { font-size: 11.5px; }
      .contact-team-avatars img { width: 27px; height: 27px; }
      .contact-primary-stack .contact-primary { min-height: 42px; }
      .contact-brief { min-height: 52px; }
      .modal-body--services[data-finder-view="result"] .finder-result-main,
      .modal-body--services[data-finder-view="result"] .finder-result-detail { padding-block: 10px; }
    }

    /* Compact two-column cards: reserve a clear editorial strip for the
       kicker and keep the manifesto optically centred above its action. */
    @media (max-width: 700px) {
      .about-inside {
        inset: 17% 5% 27%;
        padding-left: 0;
      }
      .about-manifesto {
        line-height: .95;
        transform: translateY(4px);
      }
      .about-manifesto span:nth-child(1) { margin-bottom: .3em; }
      .about-manifesto span:nth-child(3) { margin-top: .1em; }

      .services-visual.service-molecule.is-heatmap {
        top: 50%;
        right: auto;
        left: 50%;
        width: 88%;
        height: clamp(126px, 33vw, 140px);
        transform: translate(-50%, -50%);
      }
    }

    /* Desktop zoom and small notebooks can produce the same narrow card
       width as a tablet. Keep the window below the format label there too. */
    @media (min-width: 701px) and (max-width: 1500px) {
      .about-inside {
        inset: 20% 6% 24%;
        padding-left: 0;
        justify-content: center;
      }
      .about-manifesto {
        font-size: clamp(31px, 3.05vw, 38px);
        line-height: .94;
        text-align: center;
        transform: translateY(10px);
      }
      .about-manifesto span { margin-inline: auto !important; }
      .about-manifesto span:nth-child(1) { margin-bottom: .32em; }
      .about-manifesto span:nth-child(3) { margin-top: .11em; }

      .services-visual.service-molecule.is-heatmap {
        top: 53%;
        right: clamp(16px, 2.4vw, 30px);
        width: min(48%, 500px);
        height: clamp(156px, 16vw, 204px);
      }
    }

    /* The progress rail already names each step. On phones the question can
       therefore read as a single, calm editorial block instead of a duplicate
       coordinate plus a heading. */
    @media (max-width: 760px) {
      .finder-question {
        display: block;
        padding-left: 11px;
      }
      .finder-question h3 {
        grid-column: auto;
        grid-row: auto;
        font-size: clamp(21px, 6vw, 27px);
      }
      .finder-question p {
        grid-column: auto;
        margin: 8px 0 0;
      }

      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] {
        gap: 9px;
        padding-top: 14px;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .services-scene-head .modal-title {
        max-width: none;
        font-size: clamp(30px, 8.3vw, 36px);
        line-height: .94;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .finder-result {
        overscroll-behavior: contain;
      }

      .finder-question h3 {
        max-width: 13ch;
        line-height: .9;
        letter-spacing: -.06em;
        text-wrap: balance;
      }
      .finder-question h3 > span {
        display: block;
        width: fit-content;
        white-space: nowrap;
        color: var(--ink);
        font-size: 1em;
        font-weight: inherit;
        letter-spacing: inherit;
      }
      .finder-question h3 > span + span {
        margin-top: .08em;
      }
      .finder-panel[data-finder-panel="goal"] .finder-question h3 > span + span { margin-left: .74em; }
      .finder-panel[data-finder-panel="readiness"] .finder-question h3 > span + span { margin-left: .48em; }
      .finder-panel[data-finder-panel="conditions"] .finder-question h3 > span + span { margin-left: .28em; }
    }

    /* On a phone the estimate is read as a short decision card, not as a
       spreadsheet. Restore the natural content order and use spacing and tone
       to group information instead of enclosing every row in a rule. */
    @media (max-width: 760px) {
      .modal-body--services[data-finder-view="result"] .finder-result-main {
        padding: 14px 12px 10px;
        border-bottom: 0;
        background: linear-gradient(135deg, rgba(255, 73, 63, .055), transparent 68%);
      }
      .modal-body--services[data-finder-view="result"] .finder-result h3 {
        margin-top: 4px;
        font-size: clamp(27px, 7.2vw, 32px);
        line-height: .94;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-reason {
        max-width: 34ch;
        margin-top: 8px;
        font-size: 10.5px;
        line-height: 1.36;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts {
        grid-column: 1;
        grid-row: auto;
        gap: 8px;
        margin-top: 13px;
        border: 0;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div,
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div + div {
        gap: 4px;
        min-height: 0;
        padding: 10px 11px;
        border: 0;
        border-radius: 3px;
        background: rgba(255, 255, 255, .045);
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts span {
        max-width: 13ch;
        font-size: 8.5px;
        line-height: 1.13;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts strong {
        font-size: 13px;
        line-height: 1.05;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail {
        padding: 8px 12px 13px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail > span {
        margin: 0 0 7px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
        border: 0;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li {
        min-height: 0;
        padding: 0 0 0 11px;
        border: 0;
        font-size: 9.5px;
        line-height: 1.22;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li::before {
        top: .47em;
        left: 0;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-risk,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 9px;
        margin-top: 10px;
        padding-top: 0;
        border-top: 0;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-risk p,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row .finder-result-summary {
        font-size: 9.5px;
        line-height: 1.28;
      }
      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-main {
        background: linear-gradient(135deg, rgba(255, 73, 63, .075), transparent 68%);
      }
      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts > div,
      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts > div + div {
        background: rgba(20, 20, 18, .045);
      }
    }

    /* Keep every mobile finder step in one deliberate frame. The height is
       large enough for the longest choice set, while very short viewports
       still get an internal scroll instead of clipped content. */
    @media (max-width: 760px) {
      .modal {
        padding: 8px;
      }
      .modal[data-kind="services"] .modal-panel,
      .modal[data-kind="services"] .modal-panel:has(.modal-body--services[data-finder-view="result"]) {
        height: min(720px, calc(100dvh - 16px)) !important;
        max-height: calc(100dvh - 16px) !important;
      }
      .modal[data-kind="services"] .modal-body--services,
      .modal[data-kind="services"] .service-finder {
        min-height: 0;
        overflow: hidden;
      }
      .modal[data-kind="services"] .finder-workspace {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-padding-bottom: 18px;
      }
      .modal[data-kind="services"] .finder-workspace::-webkit-scrollbar {
        display: none;
      }
      .modal[data-kind="services"] .finder-panel {
        height: auto;
        min-height: 100%;
        padding-bottom: 20px;
      }
    }

    /* Short landscape screens have enough width for the full route, but not
       for the portrait-sized header. Compress only that orientation so the
       final recommendation remains a complete, single-screen decision. */
    @media (min-width: 761px) and (max-height: 560px) {
      .modal { padding: 6px; }
      .modal[data-kind="services"] .modal-panel {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
      }
      .modal[data-kind="services"] .modal-head {
        min-height: 40px;
        padding-block: 6px;
      }
      .modal[data-kind="services"] .modal-body--services {
        gap: 5px;
        padding: 7px 18px 9px;
      }
      .modal[data-kind="services"] .services-scene-head {
        min-height: 48px;
        padding-right: 138px;
      }
      .modal[data-kind="services"] .services-scene-head .modal-title {
        max-width: 15ch;
        font-size: clamp(28px, 4.1vw, 34px);
        line-height: .91;
      }
      .modal[data-kind="services"] .services-route-art { width: 126px; }
      .modal[data-kind="services"] .finder-progress li,
      .modal[data-kind="services"] .finder-progress button { min-height: 29px; }
      .modal[data-kind="services"] .finder-progress-copy strong { font-size: 8px; }
      .modal[data-kind="services"] .finder-panel {
        gap: 24px;
        padding: 8px 6px;
      }
      .modal[data-kind="services"] .finder-question h3 { font-size: 27px; }
      .modal[data-kind="services"] .finder-option,
      .modal[data-kind="services"] .finder-condition,
      .modal[data-kind="services"] .finder-options--goals .finder-option {
        min-height: 74px;
        padding: 10px 30px 9px 12px;
      }
      .modal[data-kind="services"] .finder-option > span,
      .modal[data-kind="services"] .finder-condition > span { font-size: 7px; }
      .modal[data-kind="services"] .finder-option strong,
      .modal[data-kind="services"] .finder-condition strong { font-size: 13px; }
      .modal[data-kind="services"] .finder-option small,
      .modal[data-kind="services"] .finder-condition small { font-size: 7.5px; line-height: 1.18; }
      .modal[data-kind="services"] .finder-option-mark { right: 11px; bottom: 9px; font-size: 10px; }

      .modal-body--services[data-finder-view="result"] .finder-result {
        overflow-y: auto;
        scrollbar-width: none;
      }
      .modal-body--services[data-finder-view="result"] .finder-result::-webkit-scrollbar { display: none; }
      .modal-body--services[data-finder-view="result"] .finder-result-main,
      .modal-body--services[data-finder-view="result"] .finder-result-detail { padding: 9px 12px; }
      .modal-body--services[data-finder-view="result"] .finder-result h3 { font-size: 27px; }
      .modal-body--services[data-finder-view="result"] .finder-result-reason {
        margin-top: 6px;
        font-size: 9px;
        line-height: 1.25;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-facts { margin-top: 9px; }
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div { padding-block: 8px; }
      .modal-body--services[data-finder-view="result"] .finder-result-facts span { font-size: 7px; }
      .modal-body--services[data-finder-view="result"] .finder-result-facts strong { font-size: 11px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail > span { margin-bottom: 6px; }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li {
        min-height: 28px;
        padding: 7px 6px 6px 18px;
        font-size: 8px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-detail li::before { top: 10px; left: 7px; }
      .modal-body--services[data-finder-view="result"] .finder-result-risk,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row {
        grid-template-columns: 86px minmax(0,1fr);
        gap: 8px;
        margin-top: 6px;
        padding-top: 6px;
      }
      .modal-body--services[data-finder-view="result"] .finder-result-risk > span,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row > span,
      .modal-body--services[data-finder-view="result"] .finder-result-risk p,
      .modal-body--services[data-finder-view="result"] .finder-result-summary-row .finder-result-summary { font-size: 7.5px; }
      .modal-body--services[data-finder-view="result"] .finder-result-actions { margin-top: 7px; }
      .modal-body--services[data-finder-view="result"] .finder-contact { min-height: 34px; font-size: 8px; }
      .modal-body--services[data-finder-view="result"] .finder-restart { font-size: 8px; }
    }

    /* Keep the estimate equally legible on larger screens: budget and timing
       remain two independent cards instead of becoming one divided table. */
    @media (min-width: 761px) {
      .modal-body--services[data-finder-view="result"] .finder-result-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(10px, 1vw, 16px);
        border: 0;
        background: transparent;
      }

      .modal-body--services[data-finder-view="result"] .finder-result-facts > div,
      .modal-body--services[data-finder-view="result"] .finder-result-facts > div + div {
        display: grid;
        min-width: 0;
        min-height: clamp(82px, 5.4vw, 96px);
        align-content: center;
        gap: 6px;
        padding: clamp(15px, 1.1vw, 20px);
        border: 0;
        border-radius: 4px;
        background: rgba(255, 255, 255, .045);
      }

      .modal-body--services[data-finder-view="result"] .finder-result-facts span {
        max-width: 13ch;
        line-height: 1.12;
      }

      .modal-body--services[data-finder-view="result"] .finder-result-facts strong {
        font-size: clamp(13px, 1vw, 18px);
        letter-spacing: -.02em;
        white-space: nowrap;
      }

      .modal-body--services[data-finder-view="result"] .finder-result-facts > div:last-child strong {
        max-width: 100%;
        overflow-wrap: anywhere;
        text-wrap: balance;
        white-space: normal;
      }

      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts {
        background: transparent;
      }

      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts > div,
      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts > div + div {
        border: 0;
        background: rgba(20, 20, 18, .05);
      }

      html[data-theme="light"] .modal-body--services[data-finder-view="result"] .finder-result-facts strong {
        color: var(--ink);
      }
    }

    /* FAQ replaces the process card: one calm signal on the homepage and a
       two-part decision surface inside the modal. */
    .faq-card .card-inner {
      isolation: isolate;
      overflow: hidden;
    }

    .faq-card .card-inner::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 76% 30%, rgba(249,65,55,.13), transparent 32%),
        linear-gradient(135deg, transparent 58%, rgba(255,255,255,.025));
      opacity: .75;
    }

    .faq-card-note {
      position: absolute;
      top: 50%;
      left: clamp(17px,1.8vw,34px);
      color: rgba(255,255,255,.54);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(8px,.57vw,11px);
      font-weight: 650;
      line-height: 1;
      letter-spacing: .07em;
      text-transform: uppercase;
      white-space: nowrap;
      transform: translateY(-50%);
    }

    .faq-card .card-title-row {
      position: absolute;
      right: clamp(17px,1.8vw,34px);
      bottom: clamp(17px,1.8vw,34px);
      left: clamp(17px,1.8vw,34px);
      z-index: 3;
      width: auto;
      min-width: 0;
      align-items: center;
    }

    .faq-card .arrow { margin-left: auto; }

    .faq-card-symbol {
      position: absolute;
      top: 48%;
      right: clamp(22px,2.25vw,42px);
      color: transparent;
      font-size: clamp(72px,6.4vw,118px);
      font-weight: 700;
      line-height: .72;
      -webkit-text-stroke: 1px rgba(249,65,55,.72);
      transform: translateY(-50%);
      transition: transform .4s cubic-bezier(.08,.74,.56,1), -webkit-text-stroke-color .3s ease;
    }

    .faq-card:hover .faq-card-symbol {
      -webkit-text-stroke-color: var(--accent);
      transform: translateY(calc(-50% - 2px));
    }

    html[data-theme="light"] .faq-card .card-inner::before {
      background:
        radial-gradient(circle at 76% 30%, rgba(249,65,55,.11), transparent 32%),
        linear-gradient(135deg, transparent 58%, rgba(20,20,18,.025));
    }
    html[data-theme="light"] .faq-card-note { color: rgba(20,20,18,.58); }

    .modal[data-kind="faq"] .modal-panel {
      width: min(1460px, calc(100vw - clamp(28px,6vw,112px)));
      height: min(700px, calc(100dvh - clamp(18px,4vw,64px)));
      background:
        radial-gradient(42rem 28rem at 100% 0%, rgba(249,65,55,.095), transparent 68%),
        #111;
    }

    .modal[data-kind="faq"].is-open .modal-panel { transform: translateY(0) scale(1); }
    .modal[data-kind="faq"] #modal-content { min-height: 0; }

    .modal-body--faq {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0,1fr);
      gap: clamp(18px,2.2vw,30px);
      min-height: 0;
      height: 100%;
      max-height: none;
      overflow: hidden;
      padding: clamp(22px,2.5vw,36px) clamp(28px,3.8vw,56px) clamp(26px,3vw,42px);
    }

    .faq-scene-head {
      display: grid;
      grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr);
      align-items: end;
      gap: clamp(26px,4vw,64px);
      padding-bottom: clamp(18px,2vw,26px);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .faq-scene-head .scene-label { margin-bottom: 10px; }
    .faq-scene-head .modal-title {
      font-size: clamp(36px,3.4vw,54px);
      white-space: nowrap;
    }
    .faq-scene-head .modal-description {
      max-width: 42ch;
      padding-bottom: 3px;
      font-size: clamp(12px,.92vw,15px);
    }

    .faq-mobile-tabs,
    .faq-list-mobile-cta,
    .faq-mobile-bridge,
    .faq-form-flow,
    .faq-form-mobile-foot { display: none; }

    .faq-workspace {
      display: grid;
      grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr);
      align-items: start;
      gap: clamp(26px,3.2vw,46px);
      min-height: 0;
    }

    .faq-list {
      min-width: 0;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .faq-list-head {
      display: flex;
      min-height: 32px;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.42);
      font: 700 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .faq-list-head span:last-child { color: var(--accent); }

    .faq-item {
      position: relative;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(90deg, transparent, transparent);
      transition: background .2s ease;
    }
    .faq-item:hover { background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 72%); }
    .faq-item[open] { background: linear-gradient(90deg, rgba(249,65,55,.065), transparent 76%); }
    .faq-item[open]::before {
      content: "";
      position: absolute;
      top: 15px;
      bottom: 15px;
      left: 0;
      width: 2px;
      background: var(--accent);
    }
    .faq-item summary {
      display: grid;
      grid-template-columns: 34px minmax(0,1fr) 18px;
      min-height: 54px;
      align-items: center;
      gap: 10px;
      padding-left: 14px;
      list-style: none;
      cursor: pointer;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
    .faq-item summary:hover strong { color: var(--accent); }
    .faq-index {
      color: var(--accent);
      font: 700 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
    }
    .faq-item summary strong {
      min-width: 0;
      font-size: clamp(13px,.9vw,15px);
      font-weight: 620;
      letter-spacing: -.015em;
      transition: color .18s ease;
    }
    .faq-item summary i {
      position: relative;
      width: 12px;
      height: 12px;
      justify-self: end;
    }
    .faq-item summary i::before,
    .faq-item summary i::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 1px;
      background: rgba(255,255,255,.52);
      transform: translate(-50%,-50%);
      transition: transform .22s ease, background .18s ease;
    }
    .faq-item summary i::after { transform: translate(-50%,-50%) rotate(90deg); }
    .faq-item[open] summary i::after { transform: translate(-50%,-50%) rotate(0); }
    .faq-item[open] summary strong { color: var(--accent); }

    .faq-answer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      padding: 0 28px 17px 58px;
    }
    .faq-answer p {
      max-width: 52ch;
      margin: 0;
      color: rgba(255,255,255,.58);
      font-size: clamp(11.5px,.78vw,13.5px);
      line-height: 1.46;
    }
    .faq-answer button {
      flex: 0 0 auto;
      padding: 0 0 2px;
      border: 0;
      border-bottom: 1px solid rgba(249,65,55,.55);
      background: transparent;
      color: var(--accent);
      font: 650 9px/1.2 "Onest", Arial, sans-serif;
      cursor: pointer;
    }

    .faq-form {
      position: relative;
      display: grid;
      grid-template-rows: auto auto auto auto auto auto;
      align-content: start;
      align-self: start;
      min-width: 0;
      padding: clamp(18px,1.8vw,26px);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 10px;
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(249,65,55,.055), transparent 44%),
        rgba(255,255,255,.022);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }
    .faq-form::before {
      content: "";
      position: absolute;
      top: -1px;
      left: clamp(18px,1.8vw,26px);
      width: 72px;
      height: 2px;
      background: var(--accent);
    }
    .faq-form-head { margin-bottom: 11px; }
    .faq-form-kicker,
    .faq-field > span {
      color: var(--accent);
      font: 700 9px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .faq-form-kicker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .faq-response-time {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(255,255,255,.46);
      font-size: 8px;
      letter-spacing: .05em;
      white-space: nowrap;
    }
    .faq-response-time i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(249,65,55,.1);
    }
    .faq-form-title-row {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .faq-form-head h3 {
      min-width: 0;
      margin: 8px 0 7px;
      font-size: clamp(26px,2.1vw,34px);
      line-height: 1;
      letter-spacing: -.045em;
    }
    .faq-form-team {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      padding-right: 3px;
    }
    .faq-form-avatar {
      display: block;
      width: 44px;
      height: 44px;
      margin-left: -9px;
      border: 2px solid #171717;
      border-radius: 50%;
      overflow: hidden;
      background: #222;
      transition: transform .24s ease, box-shadow .24s ease;
    }
    .faq-form-avatar:first-child { margin-left: 0; }
    .faq-form-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 18%;
      filter: grayscale(1) contrast(1.04);
      transform: scale(1.18);
      transform-origin: 50% 18%;
      transition: transform .24s ease, filter .24s ease;
    }
    .faq-form-team:hover img { filter: grayscale(.35) contrast(1.03); }
    .faq-form-avatar:hover {
      position: relative;
      z-index: 2;
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0,0,0,.18);
    }
    .faq-form-avatar:hover img { transform: scale(1.24); }
    .faq-form-head p {
      max-width: 40ch;
      margin: 0;
      color: rgba(255,255,255,.52);
      font-size: 11px;
      line-height: 1.42;
    }
    .faq-field { display: grid; gap: 7px; margin-top: 11px; }
    .faq-field textarea,
    .faq-field input {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 8px;
      outline: 0;
      background: rgba(255,255,255,.025);
      color: var(--ink);
      font: 540 11.5px/1.4 "Onest", Arial, sans-serif;
      transition: border-color .18s ease, background .18s ease;
    }
    .faq-field textarea {
      min-height: 96px;
      padding: 10px 12px;
      resize: none;
    }
    .faq-field input { min-height: 40px; padding: 8px 12px; }
    .faq-field textarea::placeholder,
    .faq-field input::placeholder { color: rgba(255,255,255,.42); opacity: 1; }
    .faq-field textarea:focus,
    .faq-field input:focus {
      border-color: var(--accent);
      background: rgba(255,255,255,.04);
    }

    .faq-consent {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 12px;
      color: rgba(255,255,255,.58);
      font-size: 9.5px;
      line-height: 1.35;
      cursor: pointer;
    }
    .faq-consent input {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      margin: 0;
      accent-color: var(--accent);
    }
    .faq-consent a { color: inherit; text-underline-offset: 2px; }

    .faq-form-actions {
      display: grid;
      grid-template-columns: minmax(0,1.15fr) minmax(130px,.85fr);
      gap: 8px;
      margin-top: 14px;
    }
    .faq-form-actions button {
      min-height: 44px;
      padding: 10px 14px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #fff;
      font: 680 10.5px/1.2 "Onest", Arial, sans-serif;
      cursor: pointer;
    }
    .faq-form-actions button span { margin-left: 8px; }
    .faq-form-actions a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.72);
      font-size: 10.5px;
      font-weight: 650;
      text-align: center;
      text-decoration: none;
      transition: border-color .18s ease, color .18s ease, background .18s ease;
    }

    .faq-form-actions a:hover {
      border-color: rgba(249,65,55,.6);
      background: rgba(249,65,55,.055);
      color: var(--ink);
    }
    .faq-form-status {
      min-height: 1.3em;
      margin: 7px 0 0;
      color: rgba(255,255,255,.48);
      font-size: 9px;
      line-height: 1.3;
    }
    .faq-form[data-state="invalid"] .faq-form-status { color: var(--accent); }
    .faq-form-mobile-foot {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.34);
      font: 650 7.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    html[data-theme="light"] .modal[data-kind="faq"] .modal-panel {
      background:
        radial-gradient(42rem 28rem at 100% 0%, rgba(249,65,55,.085), transparent 68%),
        #f4f2ed;
    }
    html[data-theme="light"] .faq-scene-head,
    html[data-theme="light"] .faq-list,
    html[data-theme="light"] .faq-list-head,
    html[data-theme="light"] .faq-item,
    html[data-theme="light"] .faq-form { border-color: rgba(20,20,18,.14); }
    html[data-theme="light"] .faq-answer p { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .faq-item summary i::before,
    html[data-theme="light"] .faq-item summary i::after { background: rgba(20,20,18,.48); }
    html[data-theme="light"] .faq-list-head { color: rgba(20,20,18,.46); }
    html[data-theme="light"] .faq-form {
      background:
        linear-gradient(145deg, rgba(249,65,55,.05), transparent 44%),
        rgba(255,255,255,.38);
    }
    html[data-theme="light"] .faq-form-head p { color: rgba(20,20,18,.54); }
    html[data-theme="light"] .faq-response-time { color: rgba(20,20,18,.5); }
    html[data-theme="light"] .faq-form-avatar { border-color: #f4f2ed; background: #ddd9d2; }
    html[data-theme="light"] .faq-field textarea,
    html[data-theme="light"] .faq-field input {
      border-color: rgba(20,20,18,.2);
      background: rgba(255,255,255,.32);
      color: var(--ink);
    }
    html[data-theme="light"] .faq-field textarea::placeholder,
    html[data-theme="light"] .faq-field input::placeholder { color: rgba(20,20,18,.48); }
    html[data-theme="light"] .faq-consent,
    html[data-theme="light"] .faq-form-actions a { color: rgba(20,20,18,.58); }
    html[data-theme="light"] .faq-form-actions a { border-color: rgba(20,20,18,.18); }
    html[data-theme="light"] .faq-form-status { color: rgba(20,20,18,.42); }
    html[data-theme="light"] .faq-form-mobile-foot { border-color: rgba(20,20,18,.1); color: rgba(20,20,18,.4); }

    @media (max-width: 900px) {
      .faq-card-note { display: none; }
      .faq-card .card-title-row {
        right: 12px;
        bottom: 12px;
        left: 14px;
      }
      .faq-card-symbol {
        top: 24px;
        right: 28px;
        font-size: clamp(44px,14vw,58px);
        transform: none;
      }
      .faq-card:hover .faq-card-symbol { transform: none; }

      .modal[data-kind="faq"] .modal-panel {
        width: 100%;
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 20px;
      }
      .modal-body--faq {
        display: grid;
        grid-template-rows: auto auto minmax(0,1fr);
        gap: 9px;
        height: 100%;
        max-height: none;
        overflow: hidden;
        padding: 11px 16px 14px;
      }
      .faq-scene-head {
        grid-template-columns: 1fr;
        gap: 5px;
        padding-bottom: 9px;
      }
      .faq-scene-head .scene-label { margin-bottom: 4px; font-size: 7.5px; }
      .faq-scene-head .modal-title { font-size: clamp(28px,8.7vw,34px); line-height: .96; white-space: normal; }
      .faq-scene-head .modal-description { max-width: 48ch; padding: 0; font-size: 9px; line-height: 1.3; }

      .faq-mobile-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 36px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        overflow: hidden;
      }
      .faq-mobile-tabs button {
        position: relative;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.5);
        font: 650 9px/1 "Onest", Arial, sans-serif;
        cursor: pointer;
      }
      .faq-mobile-tabs button + button { border-left: 1px solid rgba(255,255,255,.14); }
      .faq-mobile-tabs button::after {
        content: "";
        position: absolute;
        right: 8px;
        bottom: 0;
        left: 8px;
        height: 1px;
        background: transparent;
      }
      .faq-mobile-tabs button[aria-selected="true"] {
        background: rgba(249,65,55,.055);
        color: var(--ink);
      }
      .faq-mobile-tabs button[aria-selected="true"]::after { background: var(--accent); }
      .faq-mobile-tabs small {
        color: var(--accent);
        font: 700 7.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      }

      .faq-workspace {
        display: block;
        min-height: 0;
        margin: 0;
        overflow: hidden;
      }
      .faq-list,
      .faq-form { width: 100%; height: 100%; min-height: 0; }
      .faq-list {
        display: flex;
        flex-direction: column;
      }
      .faq-list-head { display: none; }
      .faq-list-mobile-cta {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: auto;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        background: rgba(249,65,55,.045);
        color: rgba(255,255,255,.5);
        font: 600 8px/1.2 "Onest", Arial, sans-serif;
        text-align: left;
        cursor: pointer;
      }
      .faq-list-mobile-cta strong {
        color: var(--ink);
        font-size: 9px;
        font-weight: 650;
      }
      .faq-list-mobile-cta i { margin-left: 5px; color: var(--accent); font-style: normal; }
      .faq-form { display: none; padding: 12px; overflow: hidden; }
      .modal-body--faq[data-faq-mobile-view="question"] .faq-list { display: none; }
      .modal-body--faq[data-faq-mobile-view="question"] .faq-form {
        display: grid;
        grid-template-rows: auto auto auto auto auto auto minmax(0,1fr) auto;
      }
      .faq-form-head { margin-bottom: 4px; }
      .faq-form-title-row { gap: 9px; }
      .faq-form-head h3 { margin: 4px 0 4px; font-size: 23px; }
      .faq-form-team { padding-right: 2px; }
      .faq-form-avatar { width: 30px; height: 30px; margin-left: -7px; border-width: 1.5px; }
      .faq-form-head p { font-size: 8.5px; line-height: 1.3; }
      .faq-field { gap: 5px; margin-top: 7px; }
      .faq-field textarea { min-height: 64px; padding: 8px 10px; }
      .faq-field input { min-height: 34px; padding: 7px 10px; }
      .faq-consent { margin-top: 8px; font-size: 7.5px; }
      .faq-form-actions { grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
      .faq-form-actions button { min-height: 38px; font-size: 9px; }
      .faq-form-actions a { min-height: 34px; font-size: 8px; }
      .faq-form-status { margin-top: 5px; font-size: 7.5px; }
      .faq-form-mobile-foot {
        align-self: end;
        justify-content: space-between;
        gap: 12px;
        margin-top: 0;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,.1);
        color: rgba(255,255,255,.34);
        font: 650 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
        letter-spacing: .06em;
        text-transform: uppercase;
      }
      .faq-item summary { grid-template-columns: 27px minmax(0,1fr) 15px; min-height: 42px; gap: 8px; padding-left: 12px; }
      .faq-item summary strong { font-size: 11px; }
      .faq-answer { display: block; padding: 0 18px 10px 47px; }
      .faq-answer p { font-size: 9px; line-height: 1.34; }
      .faq-answer button { margin-top: 6px; font-size: 8px; }

      html[data-theme="light"] .faq-mobile-tabs,
      html[data-theme="light"] .faq-mobile-tabs button + button { border-color: rgba(20,20,18,.15); }
      html[data-theme="light"] .faq-mobile-tabs button { color: rgba(20,20,18,.55); }
      html[data-theme="light"] .faq-mobile-tabs button[aria-selected="true"] {
        background: rgba(249,65,55,.045);
        color: var(--ink);
      }
      html[data-theme="light"] .faq-list-mobile-cta { border-color: rgba(20,20,18,.14); color: rgba(20,20,18,.52); }
      html[data-theme="light"] .faq-form-mobile-foot { border-color: rgba(20,20,18,.1); color: rgba(20,20,18,.4); }
    }

    @media (max-width: 900px) and (max-height: 620px) {
      .modal-body--faq { gap: 7px; padding-top: 9px; padding-bottom: 11px; }
      .faq-scene-head { padding-bottom: 7px; }
      .faq-scene-head .modal-description { display: none; }
      .faq-mobile-tabs { min-height: 34px; }
      .faq-item summary { min-height: 40px; }
      .faq-form-head p { display: none; }
      .faq-form-avatar { width: 25px; height: 25px; margin-left: -6px; }
      .faq-field textarea { min-height: 58px; }
      .faq-form-actions button { min-height: 36px; }
      .faq-form-actions a { min-height: 32px; }
      .faq-list-mobile-cta { min-height: 42px; padding-block: 8px; }
      .faq-form-mobile-foot { padding-top: 6px; }
    }

    @media (max-width: 900px) and (min-height: 700px) {
      .faq-item summary { min-height: 44px; }
      .faq-item summary strong { font-size: 12px; }
      .faq-answer { padding-bottom: 12px; }
      .faq-answer p { font-size: 10.5px; line-height: 1.4; }
      .faq-answer button { font-size: 8.5px; }
      .faq-list-mobile-cta { font-size: 9px; }
      .faq-list-mobile-cta strong { font-size: 10px; }
      .faq-form-head p { font-size: 9.5px; }
      .faq-field textarea { min-height: 82px; }
      .faq-consent { font-size: 8.5px; }
      .faq-form-actions button { font-size: 10px; }
      .faq-form-actions a { font-size: 9px; }
      .faq-form-status { font-size: 8.5px; }
      .faq-form-flow {
        display: grid;
        align-self: center;
        gap: 10px;
        padding: 14px 0;
      }
      .faq-form-flow > span {
        color: rgba(255,255,255,.38);
        font: 700 7.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .faq-form-flow ol {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .faq-form-flow li {
        display: grid;
        align-content: start;
        gap: 7px;
        min-width: 0;
        min-height: 58px;
        padding: 0 10px;
        border-left: 1px solid rgba(255,255,255,.1);
        color: rgba(255,255,255,.5);
        font-size: 8.5px;
        line-height: 1.3;
      }
      .faq-form-flow li:first-child { padding-left: 0; border-left: 0; }
      .faq-form-flow li:last-child { padding-right: 0; }
      .faq-form-flow b {
        color: var(--accent);
        font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
      }
      .faq-mobile-bridge {
        position: relative;
        display: grid;
        flex: 1 1 auto;
        min-height: 88px;
        align-content: center;
        gap: 7px;
        margin-left: 34px;
        padding: 14px 12px 14px 24px;
      }
      .faq-mobile-bridge::before {
        content: "";
        position: absolute;
        top: 15px;
        bottom: 15px;
        left: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(249,65,55,.72), transparent);
      }
      .faq-mobile-bridge::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
        box-shadow: 0 0 0 5px rgba(249,65,55,.09);
      }
      .faq-mobile-bridge span {
        color: var(--accent);
        font: 700 8.5px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
        letter-spacing: .09em;
        text-transform: uppercase;
      }
      .faq-mobile-bridge p {
        max-width: 29ch;
        margin: 0;
        color: rgba(255,255,255,.5);
        font-size: 10.5px;
        line-height: 1.4;
      }
      .faq-mobile-bridge + .faq-list-mobile-cta { margin-top: 0; }
      html[data-theme="light"] .faq-mobile-bridge p { color: rgba(20,20,18,.54); }
      html[data-theme="light"] .faq-form-flow > span { color: rgba(20,20,18,.42); }
      html[data-theme="light"] .faq-form-flow li { border-color: rgba(20,20,18,.12); color: rgba(20,20,18,.55); }
    }

    /* Mid-height phone browsers lose part of the viewport to their own UI.
       Keep the question flow concise there and reserve the explanatory
       timeline for genuinely tall screens. */
    @media (max-width: 900px) and (min-height: 621px) and (max-height: 819px) {
      .faq-form { padding: 10px 12px; }
      .faq-form-head p,
      .faq-form-status,
      .faq-form-flow,
      .faq-form-mobile-foot { display: none; }
      .faq-form-head h3 { font-size: 22px; }
      .faq-field textarea { min-height: 72px; }
    }

    @media (min-width: 380px) and (max-width: 900px) and (min-height: 621px) and (max-height: 819px) {
      .faq-form-actions {
        grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
        gap: 7px;
      }
      .faq-form-actions button,
      .faq-form-actions a { min-height: 38px; padding-inline: 8px; }
    }

    @media (min-width: 901px) and (max-height: 680px) {
      .modal[data-kind="faq"] .modal-panel { height: calc(100dvh - 12px); }
      .modal-body--faq { gap: 12px; padding-top: 14px; padding-bottom: 16px; }
      .faq-scene-head { padding-bottom: 12px; }
      .faq-scene-head .scene-label { margin-bottom: 5px; }
      .faq-scene-head .modal-title { font-size: 38px; }
      .faq-item summary { min-height: 43px; }
      .faq-answer { padding-bottom: 10px; }
      .faq-form { padding: 15px; }
      .faq-form-head { margin-bottom: 4px; }
      .faq-form-head h3 { font-size: 22px; }
      .faq-form-head p { display: none; }
      .faq-field { margin-top: 8px; }
      .faq-field textarea { min-height: 68px; }
      .faq-consent { margin-top: 9px; }
      .faq-form-actions { margin-top: 10px; }
      .faq-form-status { margin-top: 5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-team-avatars img { transition: none; }
      .finder-panel:not([hidden]),
      .finder-result:not([hidden]) { animation: none; }
      .services-route-art-run,
      .services-route-art-signal,
      .services-route-node,
      .services-route-cursor,
      .finder-option-coordinate { transition: none; }
      .services-route-art-signal,
      .services-route-cursor-ring { animation: none !important; }
      .project-route-bridge-run { animation: none; }
    }
    /* Real message forms: one visual system for questions and project leads. */
    .lead-form {
      position: relative;
      display: grid;
      gap: 12px;
      padding: clamp(15px,1.7vw,22px);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 18px;
      background: rgba(255,255,255,.025);
    }

    .lead-form-grid {
      display: grid;
      grid-template-columns: minmax(0,1.25fr) minmax(220px,.75fr);
      gap: clamp(14px,2vw,28px);
    }

    .lead-form-side { display: grid; align-content: start; gap: 12px; }
    .lead-field { display: grid; min-width: 0; gap: 7px; }
    .lead-field > span,
    .lead-consent {
      color: rgba(255,255,255,.46);
      font-size: 9px;
      font-weight: 680;
      letter-spacing: .045em;
      line-height: 1.35;
    }
    .lead-field > span { text-transform: uppercase; }
    .lead-field input,
    .lead-field textarea {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.18);
      border-radius: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 560 13px/1.45 "Onest", sans-serif;
      transition: border-color .18s ease, background .18s ease;
    }
    .lead-field input { min-height: 38px; padding: 6px 0 7px; }
    .lead-field textarea {
      min-height: 104px;
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 11px;
      resize: none;
    }
    .lead-field input::placeholder,
    .lead-field textarea::placeholder { color: rgba(255,255,255,.28); }
    .lead-field input:focus,
    .lead-field textarea:focus { border-color: var(--accent); background: rgba(255,81,73,.025); }
    .lead-field input:user-invalid,
    .lead-field textarea:user-invalid { border-color: rgba(255,81,73,.75); }

    .lead-consent {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      text-transform: none;
    }
    .lead-consent input {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      margin: 1px 0 0;
      accent-color: var(--accent);
    }
    .lead-consent a { color: inherit; text-underline-offset: 3px; }
    .lead-consent a:hover { color: var(--ink); }

    .lead-form-footer {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(190px,270px);
      gap: 16px;
      align-items: center;
    }
    .lead-submit {
      min-height: 48px;
      border: 1px solid var(--accent);
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      cursor: pointer;
      font: 760 11px/1 "Onest", sans-serif;
      transition: filter .18s ease, opacity .18s ease;
    }
    .lead-submit:hover { filter: brightness(1.08); }
    .lead-submit:disabled { cursor: wait; opacity: .58; }
    .lead-form-status {
      min-height: 15px;
      margin: -4px 0 0;
      color: rgba(255,255,255,.42);
      font-size: 8.5px;
      line-height: 1.35;
    }
    .lead-form[data-state="invalid"] .lead-form-status { color: var(--accent); }

    .contact-actions--fallback {
      grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr);
      grid-template-areas: "fallback brief";
      align-items: stretch;
    }
    .contact-fallback-links {
      display: flex;
      grid-area: fallback;
      align-items: center;
      gap: 17px;
      font-size: 10px;
      font-weight: 680;
    }
    .contact-fallback-links a { color: rgba(255,255,255,.5); text-underline-offset: 4px; }
    .contact-fallback-links a:hover { color: var(--ink); }
    .contact-actions--fallback .contact-brief { grid-area: brief; }

    .modal[data-kind="contact"] .modal-panel { height: min(760px,calc(100dvh - 48px)); }
    .modal-body--contact { grid-template-rows: auto auto auto; }

    html[data-theme="light"] .lead-form {
      border-color: rgba(20,20,18,.15);
      background: rgba(255,255,255,.22);
    }
    html[data-theme="light"] .lead-field > span,
    html[data-theme="light"] .lead-consent,
    html[data-theme="light"] .lead-form-status { color: rgba(20,20,18,.52); }
    html[data-theme="light"] .lead-field input,
    html[data-theme="light"] .lead-field textarea {
      border-color: rgba(20,20,18,.18);
      color: rgba(20,20,18,.92);
    }
    html[data-theme="light"] .lead-field input::placeholder,
    html[data-theme="light"] .lead-field textarea::placeholder { color: rgba(20,20,18,.34); }
    html[data-theme="light"] .contact-fallback-links a { color: rgba(20,20,18,.5); }
    html[data-theme="light"] .contact-fallback-links a:hover { color: rgba(20,20,18,.9); }

    @media (max-width: 760px) {
      .modal[data-kind="contact"] .modal-panel { height: auto; max-height: calc(100dvh - 12px); }
      .lead-form { gap: 10px; padding: 13px; border-radius: 14px; }
      .lead-form-grid { grid-template-columns: 1fr; gap: 10px; }
      .lead-form-side { grid-template-columns: 1fr 1fr; gap: 11px; }
      .lead-field textarea { min-height: 82px; }
      .lead-form-footer { grid-template-columns: 1fr; gap: 9px; }
      .lead-form-footer .contact-team-proof { display: none !important; }
      .lead-submit { min-height: 44px; }
      .contact-actions--fallback {
        grid-template-columns: 1fr;
        grid-template-areas: "fallback" "brief";
        gap: 10px;
      }
      .contact-fallback-links { justify-content: space-between; }
    }

    @media (max-width: 430px) {
      .lead-form-side { grid-template-columns: 1fr; gap: 8px; }
      .lead-field input { min-height: 34px; }
      .lead-consent { font-size: 8.25px; }
      .lead-form-status { font-size: 8px; }
      .contact-actions--fallback .contact-brief { display: none; }
    }

    @media (max-height: 720px) and (min-width: 761px) {
      .modal[data-kind="contact"] .modal-panel { height: calc(100dvh - 16px); }
      .modal-body--contact { gap: 11px; padding-block: 18px; }
      .contact-head-copy .modal-description { font-size: 11px; }
      .lead-form { gap: 8px; padding-block: 11px; }
      .lead-field textarea { min-height: 72px; }
      .lead-submit { min-height: 42px; }
      .contact-brief { min-height: 52px; }
    }

    /* Cross-modal audit: use real dimensions instead of transform scaling.
       This keeps text crisp on 2K displays and gives case content a stable,
       readable hierarchy at ordinary desktop widths. */
    @media (min-width: 901px) {
      .modal.is-open .modal-panel,
      .modal[data-kind="about"].is-open .modal-panel,
      .modal[data-kind="projects"].is-open .modal-panel,
      .modal[data-kind="faq"].is-open .modal-panel,
      .modal[data-kind="contact"].is-open .modal-panel,
      .modal[data-kind="services"].is-open .modal-panel {
        transform: translateY(0) scale(1);
      }

      .modal[data-kind="about"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel {
        width: min(1380px, calc(100vw - 64px));
        height: min(820px, calc(100dvh - 48px));
      }

      .modal[data-kind="projects"] .modal-body--projects {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 14px;
        padding: 20px 28px 26px;
      }

      .modal[data-kind="projects"] .projects-scene-head {
        position: static;
        display: flex;
        width: auto;
        height: auto;
        align-items: end;
        justify-content: space-between;
        gap: 28px;
        overflow: visible;
        padding: 0 0 13px;
        border-bottom: 1px solid rgba(255,255,255,.13);
        clip: auto;
        clip-path: none;
        white-space: normal;
      }

      .modal[data-kind="projects"] .projects-scene-head .scene-label {
        order: 2;
        flex: 0 0 auto;
        color: var(--accent);
        font-size: 10.5px;
      }

      .modal[data-kind="projects"] .projects-scene-head .modal-title {
        max-width: 18ch;
        font-size: clamp(28px, 2.45vw, 40px);
        line-height: .96;
        text-wrap: balance;
      }

      .modal[data-kind="projects"] .projects-editorial {
        grid-template-columns: minmax(0, 1fr) clamp(270px, 22vw, 330px);
        gap: clamp(18px, 1.7vw, 26px);
      }

      .modal[data-kind="projects"] .project-index-label {
        padding-block: 12px 11px;
        font-size: 10.5px;
      }

      .modal[data-kind="projects"] .project-index-item,
      .modal[data-kind="projects"] .project-index-item:nth-child(2),
      .modal[data-kind="projects"] .project-index-item:nth-child(3) {
        padding: 14px 17px 14px 20px;
        opacity: .62;
      }

      .modal[data-kind="projects"] .project-index-item[aria-selected="true"] { opacity: 1; }
      .modal[data-kind="projects"] .project-index-item:hover { opacity: .84; }
      .modal[data-kind="projects"] .project-index-item[aria-selected="true"]:hover { opacity: 1; }

      .modal[data-kind="projects"] .project-index-item > span {
        font-size: 10.5px;
        line-height: 1.25;
      }

      .modal[data-kind="projects"] .project-index-item h3 {
        margin-block: 8px 9px;
        font-size: clamp(19px, 1.55vw, 25px);
        line-height: 1;
      }

      .modal[data-kind="projects"] .project-index-item p {
        max-width: 31ch;
        font-size: 12px;
        line-height: 1.4;
      }

      .modal[data-kind="projects"] .case-media-meta strong,
      .modal[data-kind="projects"] .case-media-meta span,
      .modal[data-kind="projects"] .project-case-heading > span,
      .modal[data-kind="projects"] .project-feature-copy .case-context,
      .modal[data-kind="projects"] .project-case-story p b {
        font-size: 10.5px;
      }

      .modal[data-kind="projects"] .project-case-story p {
        grid-template-columns: 76px minmax(0,1fr);
        font-size: 12.5px;
        line-height: 1.42;
      }

      .modal[data-kind="projects"] .project-primary-action,
      .modal[data-kind="projects"] .project-live-link {
        font-size: 11.5px;
        line-height: 1.25;
      }

      .modal[data-kind="faq"] .faq-list-head,
      .modal[data-kind="faq"] .faq-index,
      .modal[data-kind="faq"] .faq-form-kicker,
      .modal[data-kind="faq"] .faq-field > span {
        font-size: 10.5px;
      }

      .modal[data-kind="faq"] .faq-response-time,
      .modal[data-kind="faq"] .faq-answer button,
      .modal[data-kind="faq"] .faq-form-status {
        font-size: 10px;
      }

      .modal[data-kind="faq"] .faq-consent,
      .modal[data-kind="faq"] .faq-form-actions button,
      .modal[data-kind="faq"] .faq-form-actions a {
        font-size: 11px;
      }

      .modal[data-kind="contact"] .lead-field > span,
      .modal[data-kind="contact"] .lead-consent,
      .modal[data-kind="contact"] .lead-form-status,
      .modal[data-kind="contact"] .contact-fallback-links,
      .modal[data-kind="contact"] .contact-brief span {
        font-size: 10.5px;
      }

      .modal[data-kind="contact"] .lead-submit,
      .modal[data-kind="contact"] .contact-brief p {
        font-size: 11.5px;
      }
    }

    @media (min-width: 1600px) and (min-height: 900px) {
      .modal[data-kind="about"] .modal-panel,
      .modal[data-kind="projects"] .modal-panel {
        width: min(1680px, calc(100vw - 96px));
        height: min(920px, calc(100dvh - 72px));
      }

      .modal[data-kind="faq"] .modal-panel {
        width: min(1680px, calc(100vw - 96px));
        height: min(820px, calc(100dvh - 72px));
      }

      .modal[data-kind="projects"] .modal-body--projects {
        gap: 18px;
        padding: 26px 36px 34px;
      }

      .modal[data-kind="projects"] .project-index-item p,
      .modal[data-kind="projects"] .project-case-story p { font-size: 13.5px; }

      .modal[data-kind="projects"] .project-primary-action,
      .modal[data-kind="projects"] .project-live-link { font-size: 12px; }

      .modal[data-kind="faq"] .faq-item summary strong { font-size: 16px; }
      .modal[data-kind="faq"] .faq-answer p { font-size: 14px; }
      .modal[data-kind="faq"] .faq-field textarea,
      .modal[data-kind="faq"] .faq-field input { font-size: 14px; }
    }

    @media (max-width: 900px) {
      .modal[data-kind="projects"] .projects-scene-head {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .modal[data-kind="projects"] .project-index-item h3 { font-size: 13px; }
      .modal[data-kind="projects"] .project-primary-action { font-size: 9.5px; }
    }

    @media (max-width: 430px) and (max-height: 620px) {
      .modal[data-kind="contact"] .modal-body--contact {
        gap: 8px;
        padding: 10px 14px 12px;
      }

      .modal[data-kind="contact"] .contact-scene-head .modal-title {
        font-size: 29px;
      }

      .modal[data-kind="contact"] .contact-head-copy .modal-description,
      .modal[data-kind="contact"] .contact-head-actions {
        display: none;
      }

      .modal[data-kind="contact"] .lead-form {
        gap: 7px;
        padding: 10px;
      }

      .modal[data-kind="contact"] .lead-form-grid,
      .modal[data-kind="contact"] .lead-form-side {
        gap: 7px;
      }

      .modal[data-kind="contact"] .lead-form-side {
        grid-template-columns: 1fr 1fr;
      }

      .modal[data-kind="contact"] .lead-field {
        gap: 4px;
      }

      .modal[data-kind="contact"] .lead-field textarea {
        min-height: 60px;
      }

      .modal[data-kind="contact"] .lead-field input {
        min-height: 30px;
      }

      .modal[data-kind="contact"] .lead-consent,
      .modal[data-kind="contact"] .lead-form-status {
        font-size: 7.75px;
      }

      .modal[data-kind="contact"] .lead-submit {
        min-height: 38px;
      }
    }

    /* Projects v5 — editorial dossier. Media proves the work; the solid
       information rail explains it. No copy competes with the image. */
    @media (min-width: 901px) {
      .modal[data-kind="projects"] .modal-panel {
        background:
          radial-gradient(44rem 22rem at 100% 0%, rgba(249,65,55,.075), transparent 70%),
          #0f0f10;
      }

      .modal[data-kind="projects"] .projects-scene-head {
        min-height: 58px;
        align-items: center;
        padding-bottom: 15px;
      }

      .modal[data-kind="projects"] .projects-scene-head .modal-title {
        max-width: 22ch;
        font-size: clamp(29px,2.25vw,38px);
        letter-spacing: -.045em;
      }

      .modal[data-kind="projects"] .projects-scene-head .scene-label {
        padding: 7px 10px;
        border: 1px solid rgba(249,65,55,.38);
        border-radius: 999px;
        background: rgba(249,65,55,.055);
        font-size: 9.5px;
        letter-spacing: .07em;
      }

      .modal[data-kind="projects"] .projects-editorial {
        grid-template-columns: minmax(0,1fr) clamp(276px,21vw,326px);
        gap: 16px;
      }

      .modal[data-kind="projects"] .project-feature {
        border-radius: 10px;
        box-shadow: 0 18px 48px rgba(0,0,0,.22);
      }

      .modal[data-kind="projects"] .project-feature::after {
        background: linear-gradient(0deg,rgba(5,5,6,.48),transparent 42%);
      }

      .modal[data-kind="projects"] .project-feature-copy,
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-feature-copy,
      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-copy,
      .modal[data-kind="projects"] .project-feature[data-project-visual="learning"] .project-feature-copy,
      .modal[data-kind="projects"] .project-feature[data-project-visual="splat"] .project-feature-copy {
        position: absolute;
        inset: auto 0 0;
        z-index: 5;
        display: grid;
        width: 100%;
        grid-template-columns: minmax(190px,.8fr) minmax(310px,1.35fr) minmax(170px,.58fr);
        grid-template-rows: auto;
        gap: clamp(18px,1.8vw,28px);
        align-items: center;
        padding: 17px 20px 18px;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.12);
        background: rgba(9,9,10,.965);
        box-shadow: 0 -20px 44px rgba(0,0,0,.22);
        text-shadow: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .modal[data-kind="projects"] .project-feature .project-case-heading,
      .modal[data-kind="projects"] .project-feature:not([data-project-visual="industrial"]) .project-case-heading {
        display: flex;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        justify-content: center;
      }

      .modal[data-kind="projects"] .project-feature .project-case-heading > span {
        color: var(--accent);
        font-size: 10px;
        line-height: 1.25;
      }

      .modal[data-kind="projects"] .project-feature .project-feature-copy h3 {
        margin: 7px 0 5px;
        color: #f4f2ed;
        font-size: clamp(25px,1.9vw,32px);
        line-height: .96;
      }

      .modal[data-kind="projects"] .project-feature .case-context {
        display: block;
        margin: 0;
        color: rgba(255,255,255,.5);
        font-size: 10px;
      }

      .modal[data-kind="projects"] .project-feature .project-case-story,
      .modal[data-kind="projects"] .project-feature:not([data-project-visual="industrial"]) .project-case-story {
        display: grid;
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        align-content: center;
        gap: 8px;
      }

      .modal[data-kind="projects"] .project-feature .project-case-story p {
        display: grid;
        grid-template-columns: 68px minmax(0,1fr);
        gap: 10px;
        margin: 0;
        color: rgba(255,255,255,.72);
        font-size: 12px;
        line-height: 1.38;
      }

      .modal[data-kind="projects"] .project-feature .project-case-story p b {
        color: rgba(255,255,255,.94);
        font-size: 10px;
      }

      .modal[data-kind="projects"] .project-feature .project-case-story .case-scope {
        display: none;
      }

      .modal[data-kind="projects"] .project-feature .project-feature-actions,
      .modal[data-kind="projects"] .project-feature:not([data-project-visual="industrial"]) .project-feature-actions {
        display: flex;
        min-width: 0;
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        padding: 0 0 0 16px;
        border: 0;
        border-left: 1px solid rgba(255,255,255,.11);
      }

      .modal[data-kind="projects"] .project-feature .project-primary-action,
      .modal[data-kind="projects"] .project-feature:not([data-project-visual="industrial"]) .project-primary-action {
        width: 100%;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid rgba(249,65,55,.72);
        border-radius: 999px;
        background: transparent;
        color: rgba(255,255,255,.94);
        font-size: 10.5px;
        font-weight: 680;
        line-height: 1.2;
        text-align: center;
      }

      .modal[data-kind="projects"] .project-feature .project-primary-action:hover,
      .modal[data-kind="projects"] .project-feature .project-primary-action:focus-visible {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }

      .modal[data-kind="projects"] .project-feature .project-live-link {
        align-self: center;
        color: rgba(255,255,255,.66);
        font-size: 10px;
      }

      .modal[data-kind="projects"] .project-index-wrap {
        min-height: 0;
        padding: 14px;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 10px;
        background: rgba(255,255,255,.018);
      }

      .modal[data-kind="projects"] .project-index-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px 13px;
        border-bottom: 1px solid rgba(255,255,255,.1);
      }

      .modal[data-kind="projects"] .project-index-label b {
        color: var(--accent);
        font: 700 11px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
      }

      .modal[data-kind="projects"] .project-index {
        display: grid;
        grid-template-rows: repeat(3,minmax(0,1fr));
        gap: 8px;
        padding-top: 10px;
        border: 0;
      }

      .modal[data-kind="projects"] .project-index-item,
      .modal[data-kind="projects"] .project-index-item:nth-child(2),
      .modal[data-kind="projects"] .project-index-item:nth-child(3) {
        position: relative;
        min-height: 0;
        justify-content: center;
        padding: 15px 16px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 7px;
        background: rgba(255,255,255,.012);
        opacity: .68;
        overflow: hidden;
      }

      .modal[data-kind="projects"] .project-index-item::before {
        inset: 12px auto 12px -1px;
        width: 2px;
      }

      .modal[data-kind="projects"] .project-index-item[aria-selected="true"] {
        border-color: rgba(249,65,55,.28);
        background: linear-gradient(135deg,rgba(249,65,55,.075),rgba(255,255,255,.018));
        opacity: 1;
      }

      .modal[data-kind="projects"] .project-index-item h3 {
        margin: 7px 0 7px;
        font-size: clamp(19px,1.4vw,23px);
      }

      .modal[data-kind="projects"] .project-index-item p {
        font-size: 11.5px;
        line-height: 1.38;
      }

      html[data-theme="light"] .modal[data-kind="projects"] .modal-panel {
        background:
          radial-gradient(44rem 22rem at 100% 0%,rgba(249,65,55,.07),transparent 70%),
          #f5f4ef;
      }

      html[data-theme="light"] .modal[data-kind="projects"] .projects-scene-head,
      html[data-theme="light"] .modal[data-kind="projects"] .project-index-label {
        border-color: rgba(20,20,18,.12);
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-wrap {
        border-color: rgba(20,20,18,.13);
        background: rgba(20,20,18,.018);
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item,
      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item:nth-child(2),
      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item:nth-child(3) {
        border-color: rgba(20,20,18,.1);
        background: rgba(20,20,18,.012);
        opacity: .76;
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item[aria-selected="true"] {
        border-color: rgba(249,65,55,.25);
        background: linear-gradient(135deg,rgba(249,65,55,.08),rgba(20,20,18,.018));
        opacity: 1;
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item h3 {
        color: rgba(20,20,18,.84);
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item p {
        color: rgba(20,20,18,.6);
      }
    }

    @media (max-width: 900px) {
      .modal[data-kind="projects"] .project-feature {
        border-radius: 8px;
      }

      .modal[data-kind="projects"] .project-feature .project-feature-copy h3 {
        color: #f4f2ed;
      }

      .modal[data-kind="projects"] .project-index {
        gap: 5px;
        padding-top: 5px;
        border-top: 0;
      }

      .modal[data-kind="projects"] .project-index-item,
      .modal[data-kind="projects"] .project-index-item:nth-child(2),
      .modal[data-kind="projects"] .project-index-item:nth-child(3) {
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 5px;
        background: rgba(255,255,255,.018);
      }

      .modal[data-kind="projects"] .project-index-item[aria-selected="true"] {
        border-color: rgba(249,65,55,.32);
        background: rgba(249,65,55,.065);
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item,
      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item:nth-child(2),
      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item:nth-child(3) {
        border-color: rgba(20,20,18,.12);
        background: rgba(20,20,18,.018);
      }

      html[data-theme="light"] .modal[data-kind="projects"] .project-index-item[aria-selected="true"] {
        border-color: rgba(249,65,55,.3);
        background: rgba(249,65,55,.065);
      }

    }

    /* Projects v6 — the case itself is the title. The former scene heading is
       kept only as the dialog's accessible name, while the media gets the space. */
    .modal[data-kind="projects"] .modal-body--projects {
      display: grid;
      grid-template-rows: minmax(0,1fr);
      gap: 0;
    }

    .modal[data-kind="projects"] .projects-scene-head {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      border: 0;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .modal[data-kind="projects"] .projects-editorial {
      height: 100%;
      min-height: 0;
    }

    /* A compact film controller: readable metadata, direct progress and two
       familiar transport controls without the old heavy rectangular frame. */
    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-toolbar {
      top: clamp(10px,1vw,15px);
      right: clamp(10px,1vw,15px);
      display: flex;
      width: min(500px,calc(100% - 20px));
      max-width: calc(100% - 20px);
      min-height: 44px;
      gap: clamp(10px,1vw,16px);
      padding: 5px 6px 5px 15px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(8,8,9,.7);
      box-shadow: 0 8px 28px rgba(0,0,0,.24);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
    }

    .modal[data-kind="projects"] .case-media-meta {
      display: grid;
      min-width: 0;
      flex: 1 1 auto;
      grid-template-columns: auto minmax(0,1fr);
      align-items: center;
      gap: 10px;
    }

    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-meta strong {
      padding-right: 10px;
      border-right: 1px solid rgba(255,255,255,.16);
      color: var(--accent);
      font-size: 9px;
      letter-spacing: .08em;
    }

    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-meta span {
      max-width: none;
      color: rgba(255,255,255,.82);
      font-size: 9px;
      letter-spacing: .055em;
    }

    .modal[data-kind="projects"] .case-media-timeline {
      display: flex;
      width: auto;
      flex: 0 0 auto;
      align-items: center;
      gap: 5px;
    }

    .modal[data-kind="projects"] .case-media-timeline button {
      width: 8px;
      height: 32px;
      flex: 0 0 8px;
      transition: width .2s ease, flex-basis .2s ease;
    }

    .modal[data-kind="projects"] .case-media-timeline button[aria-current="true"] {
      width: 26px;
      flex-basis: 26px;
    }

    .modal[data-kind="projects"] .case-media-timeline button::before,
    .modal[data-kind="projects"] .case-media-timeline button::after {
      height: 4px;
      border-radius: 999px;
    }

    .modal[data-kind="projects"] .case-media-timeline button::before {
      background: rgba(255,255,255,.25);
    }

    .modal[data-kind="projects"] .case-media-timeline button.is-complete::after {
      background: rgba(255,255,255,.72);
    }

    .modal[data-kind="projects"] .case-media-timeline button[aria-current="true"]::after {
      background: var(--accent);
    }

    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-controls {
      gap: 4px;
    }

    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-controls > button {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      background: rgba(255,255,255,.035);
      color: rgba(255,255,255,.82);
      font-size: 13px;
    }

    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-controls > button:hover,
    .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-controls > button:focus-visible {
      border-color: rgba(249,65,55,.7);
      background: rgba(249,65,55,.13);
      color: #fff;
    }

    @media (min-width: 901px) {
      .modal[data-kind="projects"] .modal-body--projects {
        padding-top: 14px;
        padding-bottom: 20px;
      }
    }

    @media (max-width: 900px) {
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-toolbar {
        top: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100% - 16px);
        min-height: 38px;
        gap: 8px;
        padding: 3px 4px 3px 10px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-meta span {
        display: none;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-meta strong {
        padding-right: 8px;
        font-size: 8px;
      }

      .modal[data-kind="projects"] .case-media-timeline {
        gap: 4px;
      }

      .modal[data-kind="projects"] .case-media-timeline button {
        width: 6px;
        height: 28px;
        flex-basis: 6px;
      }

      .modal[data-kind="projects"] .case-media-timeline button[aria-current="true"] {
        width: 18px;
        flex-basis: 18px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .case-media-controls > button {
        width: 30px;
        height: 30px;
        font-size: 12px;
      }
    }

    /* Cross-page responsive QA — preserve keyboard focus on controls, but do
       not draw the browser's default ring on headings focused by script. */
    .modal h2[tabindex="-1"]:focus,
    .modal h3[tabindex="-1"]:focus {
      outline: none;
    }

    /* Laptop-height FAQ: keep the whole answer/form workspace inside the
       modal instead of clipping its final status line below the fold. */
    @media (min-width: 901px) and (max-height: 800px) {
      .modal[data-kind="faq"] .modal-body--faq {
        gap: 14px;
        padding-top: 18px;
        padding-bottom: 20px;
      }

      .modal[data-kind="faq"] .faq-scene-head {
        padding-bottom: 14px;
      }

      .modal[data-kind="faq"] .faq-scene-head .scene-label {
        margin-bottom: 6px;
      }

      .modal[data-kind="faq"] .faq-form {
        padding: 18px;
      }

      .modal[data-kind="faq"] .faq-form-head {
        margin-bottom: 6px;
      }

      .modal[data-kind="faq"] .faq-form-head h3 {
        margin-top: 6px;
        margin-bottom: 5px;
      }

      .modal[data-kind="faq"] .faq-field {
        gap: 6px;
        margin-top: 8px;
      }

      .modal[data-kind="faq"] .faq-field textarea {
        min-height: 78px;
      }

      .modal[data-kind="faq"] .faq-consent {
        margin-top: 9px;
      }

      .modal[data-kind="faq"] .faq-form-actions {
        margin-top: 10px;
      }

      .modal[data-kind="faq"] .faq-form-actions button,
      .modal[data-kind="faq"] .faq-form-actions a {
        min-height: 40px;
      }

      .modal[data-kind="faq"] .faq-form-status {
        margin-top: 5px;
      }
    }

    /* The two-column mobile team grid is narrow enough that the longest role
       needs its own compact setting; keep every caption inside its portrait. */
    @media (max-width: 520px) {
      .modal[data-kind="about"] .team-member figcaption {
        padding-inline: 4px;
        overflow: hidden;
      }

      .modal[data-kind="about"] .team-member figcaption span {
        max-width: 100%;
        overflow: hidden;
      }

      .modal[data-kind="about"] .team-member figcaption .team-role--mixed-case {
        font-size: 4.5px;
        letter-spacing: .02em;
      }
    }

    @media (max-width: 380px) and (max-height: 620px) {
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] {
        gap: 6px;
        padding-top: 8px;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .services-scene-head {
        min-height: 46px;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .finder-progress li,
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .finder-progress button {
        min-height: 28px;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .finder-result {
        padding-bottom: 0;
      }
      .modal[data-kind="services"] .modal-body--services[data-finder-view="result"] .finder-result h3 {
        font-size: 24px;
        line-height: 1;
      }
    }

    @media (min-width: 761px) and (max-width: 1199px) {
      .modal[data-kind="projects"] .project-feature[data-project-visual] .project-feature-copy {
        position: absolute;
        inset: auto 0 0;
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 150px;
        grid-template-rows: auto auto;
        gap: 8px 14px;
        align-items: start;
        padding: 14px 16px;
        border-top: 1px solid rgba(255,255,255,.14);
        background: rgba(9,9,10,.96);
        text-shadow: none;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual] .project-case-heading {
        display: flex;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual] .project-case-story {
        display: grid;
        min-width: 0;
        grid-column: 1;
        grid-row: 2;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual] .project-feature-actions {
        display: flex;
        min-width: 0;
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        flex-direction: column;
        gap: 8px;
        padding-left: 12px;
        border-left: 1px solid rgba(255,255,255,.12);
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual] .project-feature-copy h3 {
        font-size: clamp(20px, 2.1vw, 26px);
      }
    }

    @media (max-width: 760px) {
      .modal[data-kind="projects"] .project-feature:not([data-project-visual="industrial"]) .project-feature-copy {
        inset: auto 0 0;
        width: 100%;
        padding-inline: 16px;
        border-top: 1px solid rgba(255,255,255,.14);
        background: rgba(9,9,10,.94);
        text-shadow: none;
      }
    }

    @media (max-width: 380px) and (max-height: 620px) {
      .modal-body--faq[data-faq-mobile-view="question"] .faq-form {
        display: block;
        min-height: 0;
        overflow-y: auto;
      }
      .modal[data-kind="faq"] .faq-form-mobile-foot {
        display: none;
      }
    }

    @media (max-width: 380px) {
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-feature-copy {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 8px;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-case-heading {
        grid-column: 1;
        grid-row: 1;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-feature-actions {
        grid-column: 1;
        grid-row: 2;
        align-items: flex-start;
      }
      .modal[data-kind="projects"] .project-feature[data-project-visual="industrial"] .project-primary-action {
        width: auto;
        min-height: 34px;
        padding: 8px 13px;
      }
    }

    @media (max-width: 350px) {
      .modal[data-kind="projects"] .project-index-item h3 {
        font-size: 11px;
      }
    }

    /* The local-email flow needs readable feedback even on narrow phones. */
    @media (max-width: 430px) {
      .modal[data-kind="contact"] .lead-form-status,
      .modal[data-kind="faq"] .faq-form-status { font-size: 10px; line-height: 1.45; }
      .modal[data-kind="contact"] .lead-consent,
      .modal[data-kind="faq"] .faq-consent { font-size: 9.5px; line-height: 1.4; }
    }
    @media (max-width: 900px) {
      .modal-body--faq[data-faq-mobile-view="question"] .faq-form { overflow-y: auto; }
      .modal[data-kind="faq"] .faq-form-status { display: block; }
    }
    @media (max-width: 380px) and (max-height: 620px) {
      .modal[data-kind="faq"] .faq-form-kicker,
      .modal[data-kind="faq"] .faq-form-team { display: none; }
      .modal[data-kind="faq"] .faq-form-head h3 { font-size: 21px; }
      .modal[data-kind="faq"] .faq-form-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .modal[data-kind="faq"] .faq-form-actions button,
      .modal[data-kind="faq"] .faq-form-actions a { min-height: 36px; padding-inline: 5px; font-size: 8px; }
    }
    html[data-theme="light"] .lead-form-status,
    html[data-theme="light"] .faq-form-status { color: rgba(20,20,18,.68); }
    html[data-theme="light"] .lead-form[data-state="invalid"] .lead-form-status,
    html[data-theme="light"] .faq-form[data-state="invalid"] .faq-form-status { color: var(--accent); }

    .project-mobile-dossier { display: none; }
    .standalone-path {
      display: flex;
      grid-column: 1 / -1;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px 16px;
      margin-top: 4px;
      padding: 11px 0 0;
      border-top: 1px solid var(--line);
    }
    .standalone-path > span { color: var(--muted); font-size: 11px; line-height: 1.35; }
    .standalone-path-actions { display: flex; flex-wrap: wrap; gap: 5px; }
    .standalone-path-actions button {
      min-height: 29px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: transparent;
      color: var(--ink);
      font-size: 10px;
      cursor: pointer;
    }
    .standalone-path-actions button:hover,
    .standalone-path-actions button:focus-visible { border-color: var(--accent); color: var(--accent); }
    @media (max-width: 760px) {
      .finder-panel[data-finder-panel="goal"] { overflow-y: auto; }
      .standalone-path { gap: 7px; padding-top: 9px; }
      .standalone-path > span { width: 100%; font-size: 11px; }
      .standalone-path-actions button { min-height: 30px; font-size: 10px; }
    }
    @media (max-width: 760px) and (orientation: portrait) {
      .modal[data-kind="projects"] .modal-body--projects {
        display: block;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .modal[data-kind="projects"] .projects-editorial {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: 0;
      }
      .modal[data-kind="projects"] .projects-editorial > .project-feature {
        flex: none;
        width: 100%;
        height: clamp(310px, 58dvh, 430px);
        min-height: 310px;
      }
      .modal[data-kind="projects"] .project-feature .project-case-story { display: none; }
      .modal[data-kind="projects"] .project-mobile-dossier {
        display: grid;
        order: 2;
        gap: 0;
        padding: 9px 2px 13px;
      }
      .modal[data-kind="projects"] .project-mobile-dossier p {
        display: grid;
        grid-template-columns: 74px minmax(0,1fr);
        gap: 12px;
        margin: 0;
        padding: 10px 1px;
        border-bottom: 1px solid var(--line);
        font-size: 12px;
        line-height: 1.4;
      }
      .modal[data-kind="projects"] .project-mobile-dossier b {
        color: var(--accent);
        font-size: 10px;
        font-weight: 650;
      }
      .modal[data-kind="projects"] .project-index-wrap {
        order: 3;
        flex: none;
        margin-top: 8px;
      }
    }
    html[data-theme="light"] .modal[data-kind="projects"] .project-mobile-dossier p {
      border-color: rgba(20,20,18,.15);
    }
    .contact-fallback-links { flex-wrap: wrap; gap: 8px 16px; }
    .contact-fallback-links button {
      min-height: 32px;
      padding: 3px 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      font-size: 10px;
      font-weight: 680;
      text-align: left;
      cursor: pointer;
    }
    .faq-form-actions button[data-copy-faq-draft] {
      border-color: var(--line);
      background: transparent;
      color: var(--ink);
    }
    @media (max-width: 900px) {
      .faq-form-actions button[data-copy-faq-draft] { grid-column: 1 / -1; min-height: 34px; }
    }
    @media (max-width: 700px) and (orientation: portrait) {
      html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
      }
      .app {
        height: auto;
        min-height: 100dvh;
        grid-template-rows: 38px auto;
      }
      .stage { min-height: 0; }
      .bento {
        height: auto;
        grid-template-rows: repeat(3, minmax(clamp(150px, 25vh, 205px), auto));
      }
      .card-kicker { font-size: 11px; }
      .project-copy { font-size: 11px; }
      .social-legal-links a { font-size: 10px; }
      .modal[data-kind="services"] .finder-progress-copy strong,
      .modal[data-kind="services"] .finder-option > span,
      .modal[data-kind="services"] .finder-condition > span { font-size: 10px; }
      .modal[data-kind="services"] .finder-option small,
      .modal[data-kind="services"] .finder-condition small { font-size: 11px; }
      .modal[data-kind="contact"] .lead-consent,
      .modal[data-kind="faq"] .faq-consent { font-size: 11px; line-height: 1.4; }
      .modal[data-kind="about"] .team-member figcaption {
        min-height: 29px;
        height: auto;
        flex-wrap: wrap;
        align-content: center;
        gap: 1px 5px;
      }
      .modal[data-kind="about"] .team-member figcaption span,
      .modal[data-kind="about"] .team-member figcaption .team-role--mixed-case {
        font-size: 8.5px;
        line-height: 1.1;
      }
    }
    @media (max-width: 300px) and (orientation: portrait) {
      .app { display: block; padding-inline: 8px; }
      .topbar { min-height: 40px; }
      .brand-caption { display: none; }
      .stage { padding-top: 70px; }
      .hero-logo { top: 9px; width: 94%; }
      .bento {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: none;
        grid-auto-rows: minmax(170px, auto);
        gap: 8px;
      }
      .about, .services, .showcase, .contact, .rail {
        grid-column: 1;
        grid-row: auto;
      }
      .modal[data-kind="services"] .modal-body--services { gap: 6px; padding: 6px 8px 8px; }
      .modal[data-kind="services"] .services-scene-head { min-height: 0; padding-right: 0; }
      .modal[data-kind="services"] .services-scene-head .modal-title {
        max-width: none;
        font-size: 24px;
        line-height: .95;
      }
      .modal[data-kind="services"] .services-route-art { display: none; }
      .modal[data-kind="services"] .finder-progress button { justify-content: center; gap: 0; padding-inline: 2px; }
      .modal[data-kind="services"] .finder-progress-copy { display: none; }
      .modal[data-kind="services"] .finder-question { padding-left: 6px; }
      .modal[data-kind="services"] .finder-question h3 { font-size: 19px; }
      .modal[data-kind="services"] .finder-option,
      .modal[data-kind="services"] .finder-condition,
      .modal[data-kind="services"] .finder-options--goals .finder-option {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 4px;
        padding: 10px 17px 12px 10px;
      }
      .modal[data-kind="services"] .finder-option small,
      .modal[data-kind="services"] .finder-condition small {
        grid-column: 1;
        width: auto;
        font-size: 10px;
        line-height: 1.25;
      }
      .modal[data-kind="services"] .finder-option strong,
      .modal[data-kind="services"] .finder-condition strong { font-size: 13px; }
      .modal[data-kind="services"] .finder-option-coordinate { opacity: .45; }
    }

    @media (max-width: 760px) {
      .modal[data-kind="services"] .service-finder[data-step="goal"] .finder-question { display: none; }
    }
    @media (max-width: 380px) and (orientation: portrait) {
      .modal[data-kind="about"] .about-commitments dd { font-size: 9.7px; line-height: 1.22; }
      .modal[data-kind="faq"] .faq-answer p { font-size: 10px; line-height: 1.35; }
      .modal[data-kind="faq"] .faq-form-actions button,
      .modal[data-kind="faq"] .faq-form-actions a { min-height: 40px; padding-inline: 6px; font-size: 9.5px; line-height: 1.15; }
    }

    /* SozvonUm: real interface views, framed with the restrained case system. */
    .project-window-learning-poster { display: none; }
    .showcase .project-window[data-visual="learning"] .project-window-screen {
      background: #17141f;
    }
    .showcase .project-window[data-visual="learning"] .project-window-screen::before,
    .showcase .project-window[data-visual="learning"] .project-window-screen > strong,
    .showcase .project-window[data-visual="learning"] .project-window-screen > small { display: none; }
    .showcase .project-window[data-visual="learning"] .project-window-learning-poster {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      padding: clamp(14px, 2vw, 28px);
      background: #f2eef9;
    }
    .project-window-learning-poster > img {
      display: block;
      width: min(100%, 360px);
      height: auto;
      max-height: 62%;
      object-fit: contain;
    }
    .project-feature[data-project-visual="learning"] .lms-live-preview {
      background: #17131f;
    }
    .lms-live-preview .lms-preview-stage {
      position: absolute;
      inset: 34px 0 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      padding: 12px;
      background:
        radial-gradient(circle at 50% 13%, rgba(175,146,250,.18), transparent 47%),
        #17131f;
    }
    .lms-live-preview .lms-preview-stage img {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 8px;
      object-fit: cover;
      object-position: center top;
      background: #fff;
      box-shadow: 0 22px 56px rgba(2,1,8,.32);
    }
    .lms-live-preview .lms-preview-stage img[hidden] { display: none; }
    .lms-preview-open {
      position: absolute;
      top: 23px;
      right: 23px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(88,64,138,.23);
      border-radius: 6px;
      background: rgba(247,244,255,.94);
      color: #4f347e;
      font: 18px/1 Arial,sans-serif;
      text-decoration: none;
    }
    .lms-preview-open:hover,
    .lms-preview-open:focus-visible { background: #fff; outline: 2px solid #6f42d9; outline-offset: 1px; }
    .lms-live-preview-bar {
      z-index: 4;
      border-bottom-color: rgba(226,211,255,.12);
      background: #17131f;
      color: rgba(232,220,255,.68);
    }
    .lms-live-preview-bar i { background: rgba(226,211,255,.3); }
    .lms-live-preview-bar i:first-child { background: #c3a8ff; }
    .lms-live-preview-bar b { color: #eee5ff; }
    .lms-live-preview-bar span { margin-left: 12px; margin-right: 440px; color: #c3a8ff; }
    .lms-preview-controls {
      position: absolute;
      top: 4px;
      right: 8px;
      z-index: 5;
      display: flex;
      gap: 3px;
    }
    .lms-preview-controls button {
      min-height: 26px;
      padding: 0 7px;
      border: 1px solid transparent;
      border-radius: 5px;
      background: transparent;
      color: rgba(232,220,255,.64);
      font: 650 8px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
      white-space: nowrap;
      cursor: pointer;
    }
    .lms-preview-controls button span { margin-left: 4px; }
    .lms-preview-controls button:hover,
    .lms-preview-controls button[aria-pressed="true"] {
      border-color: rgba(195,168,255,.25);
      background: rgba(195,168,255,.16);
      color: #efe6ff;
    }
    .lms-preview-controls button:focus-visible { outline: 2px solid #6f42d9; outline-offset: 1px; }
    @media (hover: none) {
      .lms-preview-controls button:hover:not([aria-pressed="true"]) {
        border-color: transparent;
        background: transparent;
        color: rgba(232,220,255,.64);
      }
    }
    @media (max-width: 1150px) {
      .lms-live-preview-bar span { display: none; }
    }
    @media (max-width: 520px) {
      .lms-live-preview-bar { padding-inline: 8px; }
      .lms-live-preview-bar b { font-size: 7px; }
      .lms-preview-controls { right: 5px; gap: 1px; }
      .lms-preview-controls button { min-width: 24px; padding-inline: 4px; font-size: 8px; }
      .lms-preview-controls button span { display: none; }
      .lms-live-preview .lms-preview-stage { padding: 7px; }
      .lms-live-preview .lms-preview-stage img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-position: left top;
      }
      .lms-preview-open { top: 15px; right: 15px; width: 27px; height: 27px; }
    }

    /* On portrait tablets the project rail still sits beside the feature. Keep
       the 3D viewport dominant instead of letting the dossier cover the object. */
    @media (min-width: 761px) and (max-width: 900px) {
      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-copy {
        grid-template-columns: minmax(0,1fr) 132px;
        grid-template-rows: auto auto;
        gap: 7px 12px;
        padding: 13px 14px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-heading {
        grid-column: 1;
        grid-row: 1;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-copy h3 {
        margin: 5px 0 4px;
        font-size: 23px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-story {
        grid-column: 1;
        grid-row: 2;
        gap: 4px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-story p:first-child,
      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-story .case-scope {
        display: none;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-story p {
        display: block;
        font-size: 11.5px;
        line-height: 1.28;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-case-story p b {
        display: block;
        margin-bottom: 2px;
        font-size: 8.5px;
      }

      .modal[data-kind="projects"] .project-feature[data-project-visual="platform"] .project-feature-actions {
        grid-column: 2;
        grid-row: 1 / 3;
        padding-left: 12px;
      }
    }

    /* Final project-preview polish: keep the live 3D card quiet and let the
       actual objects and the supplied ProgressProm identity do the talking. */
    .showcase .project-window[data-visual="platform"] .project-window-screen > small {
      display: none;
    }

    .project-window-splat-media {
      display: contents;
    }

    .showcase .project-window[data-visual="platform"] .project-window-splat-poster {
      object-position: 50% 50%;
      transform: scale(1.015);
    }

    .showcase .project-window.is-changing .project-window-splat-poster {
      transform: scale(1.03);
    }

    .showcase .project-window[data-visual="industrial"] .project-window-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      display: block;
      background: linear-gradient(180deg, transparent 56%, rgba(5,5,6,.36) 100%);
      pointer-events: none;
    }

    .project-window-progressprom-logo {
      position: absolute;
      right: clamp(10px, 1.1vw, 15px);
      bottom: clamp(10px, 1.1vw, 15px);
      z-index: 5;
      display: block;
      width: clamp(104px, 12vw, 158px);
      max-width: 41%;
      height: auto;
      opacity: 0;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.72));
      transform: translateY(3px);
      transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
    }

    .showcase .project-window[data-visual="industrial"] .project-window-progressprom-logo {
      opacity: 1;
      transform: translateY(0);
    }

    .showcase .project-window.is-changing .project-window-progressprom-logo {
      opacity: 0;
      transform: translateY(3px);
    }

    .splat-readout {
      grid-template-columns: auto auto;
      align-items: end;
      column-gap: 8px;
    }

    .splat-readout b {
      grid-column: 1;
      grid-row: 1;
    }

    .splat-readout small {
      grid-column: 2;
      grid-row: 1;
      padding-bottom: 1px;
    }

    @media (max-width: 520px) {
      .showcase .project-window[data-visual="platform"] .project-window-screen > strong {
        display: none;
      }

      .project-window-progressprom-logo {
        right: 9px;
        bottom: 9px;
        width: 88px;
        max-width: 46%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .project-window-progressprom-logo { transition: none; }
    }