/* Original site art direction. Shared page styles and base tokens remain canonical. */
html:has(body.web-site) { font-size: var(--size-site-root); }
body.web-site {
  margin: 0;
  background: var(--color-site-cream);
  color: var(--color-site-ink);
  font-family: var(--font-site-body);
  line-height: var(--line-site-copy);
  -webkit-font-smoothing: antialiased;
}
.web-site *, .web-site *::before, .web-site *::after { box-sizing: border-box; }
.web-site [hidden] { display: none !important; }
.web-site .web-main { min-width: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.web-site :is(img, video) { display: block; max-width: 100%; height: auto; object-fit: contain; }
.web-site :is(h1, h2, h3, h4) { font-family: var(--font-site-heading); overflow-wrap: break-word; }
.web-site :is(p, li, dd, a, span) { overflow-wrap: anywhere; }
.web-site :is(button, a, summary) { -webkit-tap-highlight-color: transparent; }
.web-site :is(button, a, summary, [tabindex]):focus-visible {
  outline: var(--width-site-focus) solid var(--color-blue);
  outline-offset: 0.3rem;
}
.web-site :is(.web-header, .web-hero, .web-showcase, .web-steps, .web-footer) :is(button, a, summary, [tabindex]):focus-visible {
  outline-color: var(--color-site-blue-bright);
}
.web-site ::selection { background: var(--color-site-electric); color: var(--color-paper); }
.web-site .skip-link:focus { z-index: 100; color: var(--color-site-ink); background: var(--color-paper); }
.web-inner, .web-header-inner, .web-footer-inner {
  width: 100%; max-width: var(--width-site-page); margin-inline: auto; padding-inline: var(--space-site-gutter);
}
.web-section { position: relative; padding-block: var(--space-site-section); scroll-margin-top: 2rem; }
.web-heading {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: end; gap: 1.5rem var(--space-site-gap); margin-bottom: clamp(3rem, 5vw, 5.5rem);
}
.web-heading > .web-kicker { grid-column: 1 / -1; }
.web-kicker {
  display: flex; align-items: center; gap: 0.9rem; margin: 0; color: var(--color-blue);
  font-size: 0.6875rem; font-weight: 650; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.16em;
}
.web-kicker:empty { display: none; }
.web-kicker::before { content: ''; display: block; flex: 0 0 0.375rem; height: 0.375rem; border: 1px solid currentColor; border-radius: 50%; }
.web-section-number {
  display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-blue);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
}
.web-title {
  max-width: 15ch; margin: 0; color: inherit; font-size: var(--size-site-section);
  font-weight: 500; line-height: 1.04; letter-spacing: -0.065em; text-wrap: balance;
}
.web-intro { max-width: var(--width-site-copy); margin: 0; color: var(--color-site-muted); font-size: var(--size-site-intro); line-height: 1.7; }
.web-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.web-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 1.75rem;
  min-height: var(--size-site-control); max-width: 100%; padding: 0.875rem 1.375rem;
  border: 1px solid var(--color-site-electric); border-radius: 0.2rem;
  background: var(--color-site-electric); color: var(--color-paper); font: inherit; font-size: 0.8125rem;
  font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-site-fast), border-color var(--motion-site-fast), color var(--motion-site-fast), transform var(--motion-site-fast);
}
.web-button > span[aria-hidden] { font-size: 1.125rem; line-height: 1; }
.web-button:hover { background: var(--color-site-ink); border-color: var(--color-site-ink); color: var(--color-paper); transform: translateY(-2px); }
.web-button--outline { background: transparent; border-color: var(--color-site-hairline); color: var(--color-site-ink); }
.web-text-link {
  display: inline-flex; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 0.25rem 0;
  color: var(--color-blue); font: inherit; font-size: 0.8125rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px;
}
button.web-text-link { border: 0; background: transparent; cursor: pointer; }
.web-header {
  position: relative; z-index: 20; color: var(--color-paper); background: var(--color-site-night);
  border-bottom: 1px solid var(--color-site-night-line);
}
.web-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--height-site-header); padding-block: 0.625rem;
}
.web-brand {
  display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; max-width: 43%;
  color: inherit; font-family: var(--font-site-heading); font-size: 1rem; font-weight: 550;
  line-height: 1.25; letter-spacing: -0.035em; text-decoration: none;
}
.web-brand img { flex: 0 0 3rem; width: 3rem; height: 3rem; max-width: 3rem; max-height: 3rem; object-fit: contain; }
.web-brand img + span { max-width: 16ch; font-size: 0.75rem; line-height: 1.45; letter-spacing: 0; }
.web-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem clamp(0.875rem, 1.5vw, 2rem); }
.web-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--color-site-night-muted); font-size: 0.75rem; text-decoration: none;
}
.web-nav a::after {
  content: ''; position: absolute; right: 0; bottom: 0.35rem; left: 0; height: 1px; background: var(--color-site-blue-bright);
  transform: scaleX(0); transform-origin: left; transition: transform var(--motion-site-normal) var(--ease-site);
}
.web-nav a:hover, .web-nav a[aria-current] { color: var(--color-paper); }
.web-nav a:hover::after, .web-nav a[aria-current]::after { transform: scaleX(1); }
.web-nav-toggle {
  display: none; justify-content: center; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-site-night-line); border-radius: 0.2rem; color: inherit; background: transparent; font: inherit; font-size: 0.75rem;
}
.web-sites { position: relative; min-width: 0; }
.web-sites > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 2.75rem; color: var(--color-site-night-muted); font-size: 0.75rem; cursor: pointer; list-style: none;
}
.web-sites > summary::-webkit-details-marker { display: none; }
.web-sites > summary::marker { content: ''; }
.web-sites[open] > summary, .web-sites > summary:hover { color: var(--color-paper); }
.web-sites[open] > summary > span { transform: rotate(180deg); }
.web-sites-list {
  position: absolute; z-index: 25; top: 100%; right: 0; width: min(24rem, calc(100vw - 2rem));
  max-height: min(60vh, 30rem); overflow-y: auto; margin: 0; padding: 0.5rem; list-style: none;
  border: 1px solid var(--color-site-night-line); border-radius: 0.35rem;
  background: var(--color-site-night-raised); box-shadow: 0 1.25rem 3rem #0006;
}
.web-sites-list li + li { border-top: 1px solid var(--color-site-night-line); }
.web-sites-list a { display: grid; gap: 0.375rem; min-width: 0; padding: 0.875rem; border-radius: 0.2rem; }
.web-sites-list a::after { content: none; }
.web-sites-list a:hover { background: var(--color-site-night); }
.web-sites-name { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--color-paper); font-size: 0.875rem; font-weight: 600; }
.web-sites-name > span { color: var(--color-site-blue-bright); }
.web-sites-description { color: var(--color-site-night-muted); font-size: 0.75rem; line-height: 1.6; }
@media (max-width: 52rem) {
  .web-sites { grid-column: 1 / -1; }
  .web-sites > summary { padding-inline: 0.375rem; font-size: 0.875rem; }
  .web-sites-list { position: static; width: 100%; max-height: none; margin-top: 0.5rem; box-shadow: none; }
  .web-sites-list a { padding: 0.875rem; }
}
@media (forced-colors: active) {
  .web-sites-list { border-color: CanvasText; }
  .web-sites-list a:hover { color: LinkText; background: Canvas; }
}
.web-demo-bar {
  position: relative; z-index: 30; min-height: var(--height-site-demo-rail); background: var(--color-site-night-raised);
  color: var(--color-site-night-muted); border-bottom: 1px solid var(--color-site-night-line); font-size: 0.625rem; line-height: 1.4;
}
.web-demo-bar > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.125rem 1rem; min-height: var(--height-site-demo-rail); }
.web-demo-bar strong { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.web-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
.web-demo-controls a { display: inline-flex; align-items: center; min-height: var(--height-site-demo-rail); color: var(--color-site-night-muted); text-decoration: none; }
.web-demo-controls a:hover, .web-demo-controls a[aria-current] { color: var(--color-paper); text-decoration: underline; text-underline-offset: 0.3em; }
.web-hero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space-site-hero) 3rem; color: var(--color-paper); background: var(--color-site-night); }
.web-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-site-gap); }
.web-hero-copy { position: relative; z-index: 3; min-width: 0; }
.web-hero .web-kicker { color: var(--color-site-blue-bright); }
.web-hero-title {
  max-width: 12.7ch; margin: 1.75rem 0 1.75rem; color: inherit;
  font-size: var(--size-site-display); font-weight: 500; line-height: var(--line-site-display);
  letter-spacing: var(--tracking-site-display); text-wrap: balance;
}
.web-hero-title > span, .web-hero-title > em { display: block; }
.web-hero-title em { color: var(--color-site-blue-bright); font-style: normal; }
.web-hero .web-intro { max-width: 36ch; color: var(--color-site-night-muted); font-size: 0.9375rem; line-height: 1.8; }
.web-hero-copy > .web-actions, .web-hero-copy > .web-button { margin-top: 2rem; }
.web-hero .web-button { color: var(--color-site-night); background: var(--color-site-cream); border-color: var(--color-site-cream); }
.web-hero .web-button:hover { background: var(--color-site-blue-bright); border-color: var(--color-site-blue-bright); }
.web-hero .web-button--outline { color: var(--color-paper); background: transparent; border-color: var(--color-site-night-line); }
.web-hero .web-button--outline:hover { color: var(--color-paper); background: var(--color-site-night-raised); border-color: var(--color-site-blue-bright); }
.web-hero .web-text-link { color: var(--color-paper); }
.web-hero-media { position: relative; min-width: 0; }
.web-hero-index {
  display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-site-night-muted);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
}
.web-hero-index::before { content: ''; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--color-site-amber); }
.web-hero-bottom {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--color-site-night-line);
  color: var(--color-site-night-muted); font-size: 0.625rem; letter-spacing: 0.025em;
}
.web-hero-bottom > span:last-child { display: inline-flex; align-items: center; gap: 1.5rem; }
.web-hero-bottom > span:last-child span { color: var(--color-site-blue-bright); font-size: 1.125rem; }
.web-hero-orbit-mark { position: absolute; z-index: 2; left: var(--space-site-gutter); bottom: 5.5rem; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-site-amber); border-radius: 50%; transform: rotate(-30deg) scaleY(0.45); }
.web-media { position: relative; display: grid; place-items: center; min-width: 0; width: 100%; aspect-ratio: 1; }
.web-media > :is(img, video) { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.web-media:has(> video) { aspect-ratio: 3 / 1; }
.web-media-empty { display: grid; align-content: center; justify-items: center; gap: 1rem; min-height: 18rem; padding: 2.5rem; border: 1px solid var(--color-site-hairline); color: var(--color-site-muted); background: var(--color-canvas); text-align: center; font-size: 0.8125rem; }
.web-empty-symbol { display: block; font-family: var(--font-site-heading); font-size: clamp(4rem, 8vw, 8rem); line-height: 1; color: var(--color-blue); }
.web-hero .web-media-empty { padding: 0; border: 0; color: var(--color-site-night-muted); background: transparent; }
.web-media-caption { margin-top: 0.5rem; color: var(--color-site-muted); font-size: 0.625rem; line-height: 1.5; }
.web-hero .web-media-caption { color: var(--color-site-night-muted); }
.web-media-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding-top: 0.75rem; }
.web-media-controls button {
  min-height: 2.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--color-site-night-line); border-radius: var(--radius-site-pill);
  background: var(--color-site-night); color: inherit; font: inherit; font-size: 0.625rem; text-decoration: none; cursor: pointer;
}
.web-media-controls button:hover { border-color: var(--color-site-blue-bright); }
.web-media-controls button:disabled { cursor: default; }
.web-media-controls .web-media-caption { margin: 0; }
/* The full desktop frame preserves the original sculpture and its negative space. */
body.web-site[data-media-placement="background"] .web-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
body.web-site[data-media-placement="background"]:has(.web-demo-bar) .web-header { top: var(--height-site-demo-rail); }
body.web-site[data-media-placement="background"] .web-hero { padding-block: 0; }
body.web-site[data-media-placement="background"] .web-hero-grid {
  min-height: clamp(40rem, 47vw, 52rem); grid-template-columns: minmax(0, 1fr);
  gap: 0; padding-top: calc(var(--height-site-header) + 1.5rem); padding-bottom: 7rem;
}
body.web-site[data-media-placement="background"] .web-hero-copy { width: 47%; max-width: none; }
body.web-site[data-media-placement="background"] .web-hero-title { font-size: var(--size-site-display); }
body.web-site[data-media-placement="background"] .web-hero-media { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
body.web-site[data-media-placement="background"] .web-hero-media > .web-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; display: grid; align-content: center; }
body.web-site[data-media-placement="background"] .web-hero-media .web-media > :is(img, video) { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
body.web-site[data-media-placement="background"] .web-hero-media > .web-media-controls {
  position: absolute; z-index: 4; right: max(var(--space-site-gutter), calc((100vw - var(--width-site-page)) / 2 + var(--space-site-gutter)));
  bottom: 6rem; padding: 0; pointer-events: auto;
}
body.web-site[data-media-placement="background"] .web-hero-bottom {
  position: absolute; right: max(var(--space-site-gutter), calc((100vw - var(--width-site-page)) / 2 + var(--space-site-gutter)));
  bottom: 2.5rem; left: max(var(--space-site-gutter), calc((100vw - var(--width-site-page)) / 2 + var(--space-site-gutter)));
  margin-top: 0;
}
body.web-site[data-media-placement="background"] .web-rings { width: min(65vw, 58rem); margin-left: auto; margin-right: 2rem; }
/* Soften the frame edges without cropping the artwork. */
@media (min-width: 52.001rem) {
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media:has(> video) > video { grid-area: 1 / 1; }
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media:has(> video)::before,
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media:has(> video)::after {
    content: ''; grid-area: 1 / 1; z-index: 2; width: 100%; height: 1.5rem; pointer-events: none;
  }
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media:has(> video)::before {
    align-self: start; background: linear-gradient(to bottom, var(--color-site-night), transparent);
  }
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media:has(> video)::after {
    align-self: end; background: linear-gradient(to top, var(--color-site-night), transparent);
  }
}
.web-rings { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; perspective: 40rem; color: var(--color-site-blue-bright); }
.web-ring {
  --ring-x: 64deg; --ring-y: 16deg; --ring-z: 24deg;
  position: absolute; inset: 13%; border: 1px solid currentColor; border-radius: 50%;
  transform: rotateX(var(--ring-x)) rotateY(var(--ring-y)) rotateZ(var(--ring-z)); animation: web-ring-drift var(--motion-site-ring) ease-in-out infinite;
}
.web-ring:nth-of-type(2) { --ring-x: 24deg; --ring-y: 62deg; --ring-z: 58deg; animation-direction: reverse; }
.web-ring:nth-of-type(3) { --ring-x: 42deg; --ring-y: -45deg; --ring-z: -16deg; animation-delay: var(--motion-site-ring-offset); }
.web-ring-core { z-index: 1; max-width: 12ch; padding: 1rem; color: var(--color-paper); font-family: var(--font-mono); font-size: 0.625rem; text-align: center; }
.web-ring-label { position: absolute; right: 10%; bottom: 2%; left: 10%; color: var(--color-site-night-muted); font-size: 0.625rem; text-align: center; }
[data-paused="true"] .web-ring, .web-rings[data-paused="true"] .web-ring { animation-play-state: paused; }
@keyframes web-ring-drift {
  0%, 100% { transform: rotateX(var(--ring-x)) rotateY(var(--ring-y)) rotateZ(var(--ring-z)); }
  50% { transform: rotateX(calc(var(--ring-x) + 12deg)) rotateY(calc(var(--ring-y) + 18deg)) rotateZ(calc(var(--ring-z) + 26deg)); }
}
.web-services { background: var(--color-site-cream); }
.web-services-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--color-site-hairline); list-style: none; }
.web-service {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.75rem, 3vw, 3.5rem) clamp(1.5rem, 2.75vw, 3rem);
  border-left: 1px solid var(--color-site-hairline); border-bottom: 1px solid var(--color-site-hairline);
}
.web-service:first-child { padding-left: 0; border-left: 0; }
.web-service:last-child { padding-right: 0; }
.web-service-index { display: block; margin-bottom: 3.5rem; color: var(--color-blue); font-family: var(--font-site-heading); font-size: clamp(3.5rem, 5.5vw, 6.5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.09em; }
.web-service-copy { flex: 1 1 auto; }
.web-service h3 { max-width: 12ch; margin: 0 0 1.25rem; font-size: var(--size-site-subtitle); font-weight: 500; line-height: 1.12; letter-spacing: -0.055em; }
.web-service p { max-width: 32ch; margin: 0; color: var(--color-site-muted); font-size: 0.875rem; line-height: 1.8; }
.web-service-copy > .web-text-link { margin-top: 1.25rem; }
.web-tags { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.web-tags > * { padding: 0; color: var(--color-site-muted); font-family: var(--font-mono); font-size: 0.5625rem; line-height: 1.8; letter-spacing: 0.015em; }
.web-tags > * + *::before { content: '/'; margin-right: 0.875rem; color: var(--color-blue); }
.web-showcase { padding-block: 0; color: var(--color-paper); background: var(--color-site-night-raised); }
.web-showcase-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-site-gap); }
.web-showcase-copy { padding-block: var(--space-site-section); }
.web-showcase-copy .web-heading { display: block; margin-bottom: 2rem; }
.web-showcase-copy .web-kicker { margin-bottom: 2rem; color: var(--color-site-blue-bright); }
.web-showcase-copy .web-title { max-width: 12ch; }
.web-showcase-copy .web-intro { max-width: 34ch; margin-top: 2rem; color: var(--color-site-night-muted); font-size: 0.875rem; }
.web-showcase .web-media { width: 100%; aspect-ratio: 1; }
.web-showcase .web-media-empty { border-color: var(--color-site-night-line); color: var(--color-site-night-muted); background: var(--color-site-night); }
.web-showcase .web-button { color: var(--color-site-night); background: var(--color-site-cream); border-color: var(--color-site-cream); }
.web-showcase .web-button--outline { color: var(--color-paper); background: transparent; border-color: var(--color-site-night-line); }
.web-showcase .web-button:hover { color: var(--color-site-night); background: var(--color-site-blue-bright); border-color: var(--color-site-blue-bright); }
.web-gallery { background: var(--color-site-cream); }
.web-gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem) 2rem; align-items: start; }
.web-gallery-item { grid-column: span 6; min-width: 0; margin: 0; }
.web-gallery-item:nth-child(3n + 1) { grid-column: span 7; }
.web-gallery-item:nth-child(3n + 2) { grid-column: span 5; margin-top: 7.5rem; }
.web-gallery-item:nth-child(3n) { grid-column: 5 / -1; }
.web-gallery-item .web-media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-canvas); }
.web-gallery-item:nth-child(3n + 2) .web-media { aspect-ratio: 4 / 5; }
.web-gallery-item .web-media-empty { min-height: 0; }
.web-gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.web-gallery-item img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease-site); }
.web-gallery-open:hover img { transform: scale(1.025); }
.web-gallery-caption { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; margin-top: 1.25rem; color: var(--color-site-muted); font-size: 0.75rem; }
.web-gallery-caption > span { padding-top: 0.3rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-blue); }
.web-gallery-caption h3 { margin: 0 0 0.375rem; color: var(--color-site-ink); font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.045em; }
.web-gallery-caption p { max-width: 46ch; margin: 0; }
.web-steps { color: var(--color-paper); background: var(--color-site-night); }
.web-steps .web-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: var(--space-site-gap); }
.web-steps .web-heading { position: sticky; top: 3rem; display: block; margin: 0; }
.web-steps .web-kicker { margin-bottom: 2rem; color: var(--color-site-blue-bright); }
.web-steps .web-title { max-width: 11ch; }
.web-steps .web-intro { max-width: 31ch; margin-top: 1.75rem; color: var(--color-site-night-muted); font-size: 0.875rem; }
.web-steps-list { display: block; margin: 0; padding: 0; list-style: none; counter-reset: web-step; }
.web-step {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; min-width: 0;
  padding-block: 2rem 2.5rem; border-top: 1px solid var(--color-site-night-line); counter-increment: web-step;
}
.web-step:last-child { padding-bottom: 0; }
.web-step::before { content: counter(web-step, decimal-leading-zero); padding-top: 0.25rem; color: var(--color-site-blue-bright); font-family: var(--font-mono); font-size: 0.6875rem; }
.web-step h3 { margin: 0 0 0.875rem; font-size: clamp(1.5rem, 2.1vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; }
.web-step p { max-width: 43ch; margin: 0; color: var(--color-site-night-muted); font-size: 0.875rem; line-height: 1.8; }
.web-about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--space-site-gap); }
.web-about .web-heading { display: block; margin: 0; }
.web-about .web-kicker { margin-bottom: 2rem; }
.web-about .web-title { max-width: 12ch; }
.web-about .web-intro { max-width: 38ch; margin-top: 1.75rem; }
.web-about-note > .web-actions { margin-top: 2rem; }
.web-about-note .callout { align-items: flex-start; gap: 1rem; padding: 2rem 0 2rem 2rem; border: 0; border-left: 1px solid var(--color-site-hairline); border-radius: 0; background: transparent; }
.web-about-note .callout h3 { margin-bottom: 1rem; font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.04em; }
.web-about-note .callout p { color: var(--color-site-muted); font-size: 0.875rem; line-height: 1.85; }
.web-about-note .callout-mark { padding-top: 0.25rem; }
.web-faq { border-top: 1px solid var(--color-site-hairline); background: var(--color-site-cream); }
.web-faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: var(--space-site-gap); }
.web-faq .web-heading { display: block; margin: 0; }
.web-faq .web-kicker { margin-bottom: 2rem; }
.web-faq .web-title { max-width: 10ch; }
.web-faq .web-intro { max-width: 30ch; margin-top: 1.75rem; font-size: 0.875rem; }
.web-faq-list.section-content { max-width: none; margin: 0; border-top: 1px solid var(--color-site-hairline); }
.web-faq-list.section-content > * + * { margin-top: 0; }
.web-faq-list.section-content details { border-color: var(--color-site-hairline); }
.web-faq-list.section-content summary {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 4.75rem; padding: 1.5rem 0;
  color: var(--color-site-ink); font-family: var(--font-site-heading); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.025em; list-style: none;
}
.web-faq-list summary::-webkit-details-marker { display: none; }
.web-faq-list summary::marker { content: ''; }
.web-faq-list summary::after { content: '+'; flex: 0 0 1.25rem; color: var(--color-blue); font-size: 1.5rem; font-weight: 400; line-height: 1; text-align: center; }
.web-faq-list details[open] summary::after { content: '−'; }
.web-faq-list.section-content details > div { padding: 0 2.5rem 1.75rem 0; }
.web-faq-list.section-content details p { max-width: 55ch; color: var(--color-site-muted); font-size: 0.875rem; line-height: 1.85; }
/* Contact: open cobalt/chrome/amber ribbons suspended above a soft reflection. */
.web-contact { isolation: isolate; overflow: clip; color: var(--color-paper); background: var(--color-site-night); border-top: 1px solid var(--color-site-night-line); }
.web-contact > .web-inner { position: relative; z-index: 1; }
.web-contact::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 83% 50%, color-mix(in srgb, var(--color-blue) 12%, transparent), transparent 55%); }
.web-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.web-contact .web-heading { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-bottom: 2.5rem; }
.web-contact .web-kicker { color: var(--color-site-blue-bright); }
.web-contact .web-title { max-width: 17ch; font-size: clamp(3rem, 4.6vw, 6rem); line-height: 1.04; letter-spacing: -0.065em; }
.web-contact .web-intro { max-width: 54ch; color: var(--color-site-night-muted); font-size: 0.9375rem; }
.web-contact .web-button { color: var(--color-site-night); background: var(--color-paper); border-color: var(--color-paper); }
.web-contact .web-button:hover { color: var(--color-site-night); background: var(--color-site-blue-bright); border-color: var(--color-site-blue-bright); }
.web-contact .web-button--outline { color: var(--color-paper); background: transparent; border-color: var(--color-site-night-muted); }
.web-contact .web-button--outline:hover { color: var(--color-site-night); background: var(--color-paper); border-color: var(--color-paper); }
.web-contact .web-text-link { color: var(--color-site-night-muted); }
.web-site .web-contact :is(button, a, summary, [tabindex]):focus-visible { outline-color: var(--color-paper); }
.web-contact-visual { min-width: 0; width: 100%; margin: 0; align-self: center; }
.web-contact-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; isolation: isolate; overflow: hidden; mask-image: radial-gradient(ellipse at 50% 50%, #000 49%, transparent 74%); }
.web-contact-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.web-contact-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.web-contact-trace { fill: none; stroke: #c4edff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90 1200; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px #258aff); }
.web-contact-trace--software { stroke: #ffda9c; stroke-width: 3; stroke-dasharray: 140 1200; filter: drop-shadow(0 0 5px #de943c); }
.web-contact-led { fill: #ffe1a8; opacity: 0; filter: drop-shadow(0 0 6px #f0ae4e); }
.web-contact-shine { fill: #80bdff; opacity: 0; }
.web-contact-refraction { opacity: 0; }
.web-contact-visual-controls { position: relative; display: flex; justify-content: center; min-height: 2.75rem; margin-top: 1rem; }
.web-contact-visual-controls:has(button[hidden]) { display: none; }
.web-contact-visual-controls button { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--color-site-night-line); border-radius: 2rem; font: inherit; font-size: .6875rem; text-decoration: none; background: color-mix(in srgb, var(--color-site-night) 80%, transparent); cursor: pointer; }
.web-contact-visual-controls button::before { content: ''; width: .5rem; height: .625rem; border-inline: 2px solid currentColor; }
.web-contact-visual[data-paused="true"] .web-contact-visual-controls button::before { width: 0; height: 0; border: .3125rem solid transparent; border-left: .4375rem solid currentColor; border-right: 0; }
.web-contact-visual-controls button:hover { color: var(--color-paper); border-color: var(--color-site-blue-bright); }
.web-contact-visual[data-renderer="unavailable"] { display: none; }
.web-footer { color: var(--color-site-night-muted); background: var(--color-site-night); font-size: 0.75rem; }
.web-footer-inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; padding-block: 4rem 3rem; }
.web-footer .web-brand { max-width: none; color: var(--color-paper); font-size: 1.5rem; letter-spacing: -0.05em; }
.web-footer p { max-width: 44ch; margin-top: 0.75rem; color: var(--color-site-night-muted); font-size: 0.6875rem; }
.web-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.web-footer-links a, .web-footer-links .web-text-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-site-night-muted); font-size: 0.6875rem; font-weight: 400; }
.web-footer-links a:hover { color: var(--color-paper); }
.web-embed { min-width: 0; margin-top: 2rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--color-site-hairline); background: var(--color-paper); color: var(--color-site-ink); }
.web-embed > * + * { margin-top: 1rem; }
.web-embed h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.04em; }
.web-embed p { max-width: 64ch; color: var(--color-site-muted); font-size: 0.875rem; }
.web-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.web-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.web-consent-actions button { min-height: 2.75rem; }
dialog.web-lightbox {
  width: min(92vw, var(--width-site-narrow)); max-width: calc(100% - 2rem); max-height: 92svh; padding: 3.5rem 2rem 2rem;
  border: 1px solid var(--color-site-night-line); border-radius: 0.25rem; color: var(--color-paper); background: var(--color-site-night); overflow: auto;
}
dialog.web-lightbox::backdrop { background: var(--color-site-overlay); }
.web-lightbox-close { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 0.875rem; color: var(--color-paper); border-color: var(--color-site-night-line); background: var(--color-site-night); font-size: 0.75rem; }
.web-lightbox-content img { width: 100%; max-height: 76svh; object-fit: contain; }
.web-lightbox-content p { margin-top: 1rem; color: var(--color-site-night-muted); font-size: 0.75rem; }
.web-empty-site { min-height: 60svh; display: grid; align-content: center; gap: 1.5rem; padding-block: var(--space-site-section); }
.web-empty-site > * { max-width: var(--width-site-copy); }
.web-page-title { width: 100%; max-width: var(--width-site-page); margin: 0 auto; padding: var(--space-site-section) var(--space-site-gutter) 0; font-size: var(--size-site-section); font-weight: 500; letter-spacing: -0.065em; }
.web-empty-site h1 { color: var(--color-site-ink); font-size: var(--size-site-section); }
.web-empty-site p { color: var(--color-site-muted); }
.web-empty-site .web-rings { display: none; }
/* Alternate compositions share the same components and local media. */
body.web-site[data-composition="split"] .web-hero-title { font-size: var(--size-site-display-split); }
body.web-site[data-composition="split"][data-media-placement="background"] .web-hero-grid { min-height: clamp(42rem, 49vw, 54rem); }
body.web-site[data-composition="split"][data-media-placement="background"] .web-hero-copy { width: 44%; }
body.web-site[data-composition="split"] .web-services-list { grid-template-columns: minmax(0, 1fr); }
body.web-site[data-composition="split"] .web-service { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(8rem, 0.55fr); align-items: start; gap: 2rem; padding: 2.5rem 0; border-left: 0; }
body.web-site[data-composition="split"] .web-service-index { margin-bottom: 0; font-size: 4.5rem; }
body.web-site[data-composition="split"] .web-service h3 { max-width: none; }
body.web-site[data-composition="split"] .web-tags { justify-content: flex-end; margin-top: 0.5rem; }
body.web-site[data-composition="compact"] .web-section { padding-block: clamp(4rem, 6vw, 6.5rem); }
body.web-site[data-composition="compact"] .web-hero-title { font-size: var(--size-site-display-compact); }
body.web-site[data-composition="compact"][data-media-placement="background"] .web-hero-grid { min-height: clamp(38rem, 43vw, 48rem); padding-top: calc(var(--height-site-header) + 1.25rem); padding-bottom: 7rem; }
body.web-site[data-composition="compact"] .web-heading { margin-bottom: 3rem; }
body.web-site[data-composition="compact"] .web-showcase { padding-block: 0; }
body.web-site[data-composition="compact"] .web-gallery-grid { gap: 3rem 1.5rem; }
body.web-site[data-composition="compact"] .web-gallery-item { grid-column: span 4; margin-top: 0; }
body.web-site[data-composition="compact"] .web-gallery-item .web-media { aspect-ratio: 1; }
body.web-site[data-media-placement="below"] .web-hero-grid { grid-template-columns: minmax(0, 1fr); }
body.web-site[data-media-placement="below"] .web-hero-copy { max-width: 55rem; }
body.web-site[data-media-placement="below"] .web-hero-title { max-width: 16ch; }
body.web-site[data-media-placement="below"] .web-hero-media { width: 100%; max-width: none; }
body.web-site[data-media-placement="below"] .web-hero-media .web-media:not(.web-media-empty) { aspect-ratio: 3 / 1; }
@media (min-width: 100rem) {
  body.web-site[data-media-placement="background"] .web-hero-copy { width: 48%; }
}
@media (max-width: 70rem) {
  .web-brand img + span { display: none; }
  .web-nav { gap: 0.25rem 1rem; }
  .web-hero-title { font-size: clamp(3.5rem, 6.3vw, 5rem); }
  body.web-site[data-media-placement="background"] .web-hero-copy { width: 49%; }
  body.web-site[data-media-placement="background"] .web-hero-grid { min-height: 40rem; padding-top: calc(var(--height-site-header) + 1.5rem); padding-bottom: 7rem; }
  .web-service { padding-inline: 1.5rem; }
  .web-service-index { margin-bottom: 2.5rem; }
  .web-gallery-item:nth-child(3n + 2) { margin-top: 5rem; }
}
@media (max-width: 52rem) {
  .web-site { --height-site-header: 4.25rem; }
  .web-header-inner { flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.625rem; }
  .web-brand { max-width: calc(100% - 7rem); font-size: 1rem; }
  .web-brand img { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; max-width: 2.75rem; max-height: 2.75rem; }
  .web-nav-toggle { display: inline-flex; margin-left: auto; cursor: pointer; }
  .web-nav { flex: 1 0 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--color-site-night-line); }
  .web-nav a { padding-inline: 0.375rem; font-size: 0.875rem; }
  body.web-site[data-media-placement="background"] .web-header { background: var(--color-site-night); }
  body.web-site[data-media-placement="background"] .web-header:has(.web-nav-toggle[hidden]):has(.web-nav:not([hidden])) { position: relative; top: auto; }
  body.web-site[data-media-placement="background"]:has(.web-nav-toggle[hidden]) .web-hero-grid { padding-top: 3rem; }
  .web-demo-bar strong { font-size: 0.5rem; letter-spacing: 0.07em; }
  .web-demo-controls { gap: 0.75rem; }
  .web-heading, .web-showcase-grid, .web-about-grid, .web-faq-grid, .web-contact .web-heading { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .web-heading { margin-bottom: 3rem; }
  .web-title { max-width: 15ch; }
  .web-kicker { font-size: 0.625rem; }
  .web-hero { padding-top: 3rem; }
  .web-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .web-hero-title, body.web-site[data-composition] .web-hero-title, body.web-site[data-media-placement="background"] .web-hero-title { max-width: 13ch; font-size: var(--size-site-display-mobile); letter-spacing: -0.07em; }
  .web-hero .web-intro { max-width: 38ch; font-size: 0.875rem; line-height: 1.8; }
  .web-hero-copy > .web-actions { margin-top: 1.75rem; }
  .web-hero-media { width: min(100%, 35rem); margin-inline: auto; }
  .web-hero-bottom { margin-top: 2.5rem; font-size: 0.5625rem; }
  .web-hero-orbit-mark { display: none; }
  body.web-site[data-media-placement="background"] .web-hero-grid, body.web-site[data-composition][data-media-placement="background"] .web-hero-grid {
    min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
    padding-top: calc(var(--height-site-header) + 1.25rem); padding-bottom: 0;
  }
  body.web-site[data-media-placement="background"] .web-hero-copy, body.web-site[data-composition][data-media-placement="background"] .web-hero-copy { width: 100%; max-width: 38rem; }
  body.web-site[data-media-placement="background"] .web-hero-media {
    position: relative; inset: auto; width: calc(100% + var(--space-site-gutter) * 2); max-width: none;
    margin: 0 calc(var(--space-site-gutter) * -1); overflow: hidden; pointer-events: auto;
  }
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media {
    position: relative; inset: auto; display: grid; width: 100%; height: auto; aspect-ratio: 30 / 17;
    align-content: center; justify-items: start; overflow: hidden;
  }
  /* Trim only the empty left part of the wide frame; preserve every ring edge. */
  body.web-site[data-media-placement="background"] .web-hero-media .web-media > :is(img, video) {
    width: 170%; max-width: none; height: auto; max-height: none; transform: translateX(-41.1765%); object-fit: contain;
  }
  body.web-site[data-media-placement="background"] .web-hero-media > .web-media-controls {
    position: relative; inset: auto; justify-content: center; padding: 0 1.375rem 0.75rem; gap: 0.75rem;
  }
  body.web-site[data-media-placement="background"] .web-hero-bottom {
    position: relative; inset: auto; margin-top: 1.5rem; padding-block: 1.25rem 2rem;
  }
  body.web-site[data-media-placement="background"] .web-rings { width: 100%; max-width: 30rem; margin: 0 auto; }
  .web-services-list { grid-template-columns: minmax(0, 1fr); }
  .web-service, .web-service:first-child, .web-service:last-child {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: 1.25rem;
    padding: 2rem 0; border-left: 0;
  }
  .web-service-index { margin: 0; font-size: 3.5rem; }
  .web-service h3 { max-width: 16ch; font-size: 1.75rem; }
  .web-service .web-tags { grid-column: 2; margin-top: 0; }
  .web-showcase-grid { gap: 0; }
  .web-showcase-copy { padding-block: var(--space-site-section) 3rem; }
  .web-showcase .web-media { max-width: 38rem; margin-inline: auto; margin-bottom: 2rem; }
  .web-gallery-grid { gap: 3.5rem 1.25rem; }
  .web-gallery-item, .web-gallery-item:nth-child(3n + 1), .web-gallery-item:nth-child(3n + 2), .web-gallery-item:nth-child(3n) { grid-column: 1 / -1; margin-top: 0; }
  .web-gallery-item:nth-child(3n + 2) { grid-column: 3 / -1; }
  .web-gallery-item:nth-child(3n + 2) .web-media { aspect-ratio: 4 / 5; }
  .web-gallery-item .web-media { aspect-ratio: 1.1; }
  .web-steps .web-inner { display: block; }
  .web-steps .web-heading { position: static; margin-bottom: 3rem; }
  .web-step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
  .web-step h3 { font-size: 1.625rem; }
  .web-about-note .callout { padding: 1.5rem 0 1.5rem 1.5rem; }
  .web-faq-grid { gap: 3rem; }
  .web-faq-list.section-content summary { font-size: 1rem; gap: 1rem; }
  .web-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .web-contact-visual { width: min(100%, 30rem); margin-inline: auto; }
  .web-contact-stage { max-height: 24rem; }
  .web-contact .web-heading { width: 100%; margin-bottom: 2.5rem; }
  .web-contact .web-title { max-width: 13ch; font-size: clamp(3rem, 10.5vw, 5rem); }

  .web-footer-inner { display: block; padding-block: 3rem 2rem; }
  .web-footer-links { margin-top: 2rem; gap: 0.5rem 1.5rem; }
  body.web-site[data-composition="split"] .web-service { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding: 2rem 0; }
  body.web-site[data-composition="split"] .web-service-index { font-size: 3.5rem; }
  body.web-site[data-composition="split"] .web-tags { justify-content: flex-start; margin: 0; }
  body.web-site[data-composition="compact"] .web-gallery-item { grid-column: span 6; margin-top: 0; }
  body.web-site[data-composition="compact"] .web-gallery-caption { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  body.web-site[data-composition="compact"] .web-gallery-caption h3 { font-size: 1.125rem; }
}
@media (max-width: 30rem) {
  .web-demo-bar > div { justify-content: flex-start; gap: 0 0.75rem; }
  .web-demo-bar strong { flex: 1 1 auto; max-width: 14ch; font-size: 0.5rem; }
  .web-demo-controls { margin-left: auto; gap: 0.75rem; font-size: 0.5625rem; }
  .web-button { gap: 1rem; padding-inline: 1rem; font-size: 0.75rem; }
  .web-hero-copy > .web-actions { gap: 0.625rem; }
  .web-hero-title { margin-block: 1.5rem; }
  .web-hero-bottom { align-items: flex-start; gap: 0.5rem; }
  .web-service, .web-service:first-child, .web-service:last-child, body.web-site[data-composition="split"] .web-service { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; }
  .web-service-index, body.web-site[data-composition="split"] .web-service-index { font-size: 2.875rem; }
  .web-service h3 { font-size: 1.5rem; }
  .web-tags { gap: 0.375rem 0.625rem; }
  .web-tags > * + *::before { margin-right: 0.625rem; }
  .web-gallery-item:nth-child(3n + 2) { grid-column: 2 / -1; }
  .web-gallery-caption { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5rem; }
  body.web-site[data-composition="compact"] .web-gallery-item { grid-column: 1 / -1; }
  .web-contact .web-title { font-size: 3rem; }
  dialog.web-lightbox { padding: 3.5rem 0.75rem 0.75rem; }
}
.web-reveal { transition: opacity 650ms var(--ease-site), transform 850ms var(--ease-site); }
.web-reveal[data-visible="false"] { opacity: 0; transform: translateY(1.5rem); }
.web-reveal[data-visible="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .web-reveal[data-visible] { opacity: 1 !important; transform: none !important; }
  .web-site *, .web-site *::before, .web-site *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .web-button:hover, .web-gallery-open:hover img { transform: none; }
}
@media (forced-colors: active) {
  .web-button, .web-nav-toggle, .web-media-controls button, .web-gallery-open, .web-embed, dialog.web-lightbox { border: 1px solid ButtonText; }
  .web-nav a::after, .web-kicker::before { background: LinkText; }
  .web-ring { border-color: CanvasText; }
  .web-contact::before, .web-contact-visual { display: none; }
}