.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 100;
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--sp-3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  margin-inline: calc(-1 * env(safe-area-inset-left, 0px)) calc(-1 * env(safe-area-inset-right, 0px));
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  background: var(--tum-void-scrim);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  container: site-header / inline-size;
}

.site-header__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-header__logo {
  display: block;
  width: 11.5rem;
  height: auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-display-condensed);
  font-size: var(--t-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.primary-nav a {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--dur-fast) var(--ease);
  padding: 0.5rem 0.1rem;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

.primary-nav a:focus-visible {
  color: var(--fg);
}@media (hover: hover) and (pointer: fine){.primary-nav a:hover{
  color: var(--fg);
}}
.primary-nav a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.primary-nav__cta {
  color: var(--bg) !important;
  background: var(--accent);
  padding: 0.6rem 1.1rem !important;
  border-radius: var(--radius-pill);
  font-weight: 700 !important;
}

.primary-nav__cta:focus-visible {
  background: var(--accent-hover);
  color: var(--bg) !important;
}@media (hover: hover) and (pointer: fine){.primary-nav__cta:hover{
  background: var(--accent-hover);
  color: var(--bg) !important;
}}

.primary-nav a[aria-current="page"] {
  color: var(--fg);
}
.primary-nav__cta[aria-current="page"] {
  background: var(--bg-panel);
  color: var(--fg-dim) !important;
}

.primary-nav__cta[aria-current="page"]:focus-visible {
  background: var(--bg-panel);
  color: var(--fg) !important;
}@media (hover: hover) and (pointer: fine){.primary-nav__cta[aria-current="page"]:hover{
  background: var(--bg-panel);
  color: var(--fg) !important;
}}

@container site-header (max-width: 45rem) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
  }
  .primary-nav[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s;
  }
  .primary-nav a {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-ui);
  }
  .primary-nav__cta {
    margin-top: var(--sp-3);
    text-align: center;
  }
}

.site-footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  container: site-footer / inline-size;
}
@media (max-width: 720px) {
  .site-footer { padding-bottom: 5.5rem; }
}

.site-footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
}

.site-footer__brand img {
  width: 9.5rem;
  height: auto;
  margin-bottom: var(--sp-4);
}
.site-footer__brand p {
  color: var(--fg-dim);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  margin: 0;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.site-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-footer__nav-title {
  font-family: var(--font-display-condensed);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--sp-1);
}
.site-footer__nav-group a {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: var(--t-small);
  line-height: 1.5;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-2) 0;
  margin: 0;
}

.site-footer__nav-group a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
}@media (hover: hover) and (pointer: fine){.site-footer__nav-group a:hover{
  color: var(--fg);
  text-decoration: underline;
}}
.site-footer__nav-group a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.site-footer__base {
  border-top: 1px solid var(--line);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--fg-dim);
}
.site-footer__base a {
  color: var(--fg-dim);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}

.site-footer__base a:focus-visible {
  color: var(--accent);
}@media (hover: hover) and (pointer: fine){.site-footer__base a:hover{
  color: var(--accent);
}}

.site-footer__version {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--sp-4);
  text-align: center;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 2fr; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}
@container site-footer (width < 20rem) {
  .site-footer__nav { grid-template-columns: 1fr; }
}

.primary-nav__cta { white-space: nowrap; }

@media (max-height: 500px) { .site-header { position: static; } }

.site-footer__base a { margin-block: 0; }

a, button, [role="button"], input, select, textarea, summary, label {
  touch-action: manipulation;
}
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}


*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--t-root); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }
html { scroll-padding-bottom: 5.5rem; }
html { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html[data-display-motion="stop"] { scroll-behavior: auto; }
html[data-display-motion="stop"] :is(main, .site-header, .site-footer) *,
html[data-display-motion="stop"] :is(main, .site-header, .site-footer) *::before,
html[data-display-motion="stop"] :is(main, .site-header, .site-footer) *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-display-motion="stop"] .js [data-reveal] {
  opacity: 1;
  transform: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

.section-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  overflow-wrap: normal;
  max-width: 28ch;
}

.section-lede + .section-lede { margin-top: var(--sp-4); }

.section-lede {
  max-width: var(--measure);
  color: var(--fg-dim);
  font-size: var(--t-lede);
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--t-ui);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
}
.btn--primary:focus-visible {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
  }
}
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--fg);
}

.btn--ghost:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}@media (hover: hover) and (pointer: fine){.btn--ghost:hover{
  border-color: var(--accent);
  color: var(--accent);
}}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-8);
  background:
    radial-gradient(1.6px 1.6px at 12% 20%, var(--paper-a32), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 12%, var(--paper-a24), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 66%, var(--paper-a18), transparent 60%),
    radial-gradient(1.6px 1.6px at 90% 52%, var(--paper-a26), transparent 60%),
    radial-gradient(1.6px 1.6px at 6% 78%, var(--paper-a16), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 86%, var(--paper-a20), transparent 60%),
    radial-gradient(120% 80% at 70% -20%, var(--bg-panel) 0%, var(--bg) 60%);
}

.hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-6);
}

.hero__copy { position: relative; z-index: 1; }

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
  overflow-wrap: normal;
}

.hero__lede {
  max-width: 34rem;
  font-size: var(--t-lede);
  color: var(--fg-dim);
  margin: 0 0 var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.services {
  padding-block: var(--sp-9);
  background: var(--bg);
}

.services__head { max-width: var(--measure); margin-bottom: var(--sp-8); }

#grow, #produce, #build {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 3.5rem 3rem 1fr;
  align-items: start;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.service-row__num {
  font-family: var(--font-display-condensed);
  font-size: var(--t-ui);
  color: var(--fg-dim);
  letter-spacing: 0.05em;
  padding-top: 0.2rem;
}

.service-row__icon {
  color: var(--accent-cyan);
  width: 2.25rem;
  height: 2.25rem;
}
.service-row__icon svg { width: 100%; height: 100%; }

.service-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.service-row__title {
  hyphens: auto;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  margin: 0;
  line-height: var(--lh-heading);
}
.service-row__desc {
  color: var(--fg-dim);
  max-width: var(--measure-narrow);
}

@media (max-width: 640px) {
  .service-row {
    grid-template-columns: 2.25rem 2rem minmax(0, 1fr);
    grid-template-areas:
      "num icon ."
      "title title title"
      "desc desc desc";
    gap: var(--sp-2) var(--sp-3);
  }
  .service-row__num { grid-area: num; }
  .service-row__icon { grid-area: icon; }
  .service-row__body { display: contents; }
  .service-row__title { grid-area: title; }
  .service-row__desc { grid-area: desc; }
}

.process {
  padding-block: var(--sp-9);
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-track {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  position: relative;
}
.process-track::before {
  content: "";
  position: absolute;
  top: calc(var(--marker-size) / 2);
  left: var(--marker-size);
  right: calc((100% - 2 * var(--sp-7)) / 3);
  height: 0;
  border-top: 1px dashed var(--line-strong);
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.process-step__marker {
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--t-ui);
  position: relative;
  z-index: 1;
}

.process-step__title {
  margin: 0;
  font-weight: 400;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
}

.process-step__desc {
  color: var(--fg-dim);
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 780px) {
  .process-track { grid-template-columns: 1fr; gap: var(--sp-6); }
  .process-track::before { display: none; }
}

.about {
  padding-block: var(--sp-9);
  background: var(--bg-raised);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-8);
  align-items: center;
}

.about__copy p {
  color: var(--fg-dim);
  max-width: var(--measure-narrow);
  margin: 0 0 var(--sp-4);
}
.about__copy p:last-child { margin-bottom: 0; }

.about__visual {
  display: flex;
  justify-content: center;
}
.about__visual img {
  width: 100%;
  height: auto;
  max-width: 26rem;
  opacity: 0.85;
}

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { order: -1; max-width: 18rem; width: min(18rem, 100%); margin-inline: auto; }
  .about--page .about__visual { order: 0; }
}

.contact {
  padding-block: var(--sp-10);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--bg-panel) 0%, var(--bg) 65%);
  border-top: 1px solid var(--line);
}

.contact__inner {
}

.contact--interior .contact__headline {
  font-size: var(--t-h2);
}

.contact__lede a {
  color: var(--accent-cyan);
}

.contact__lede a:focus-visible {
  color: var(--accent);
}@media (hover: hover) and (pointer: fine){.contact__lede a:hover{
  color: var(--accent);
}}

.contact__headline {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
  max-width: 20ch;
}

.contact__lede {
  max-width: var(--measure);
  color: var(--fg-dim);
  font-size: var(--t-lede);
  margin: 0 0 var(--sp-7);
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display-condensed);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-condensed);
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--sp-1);
  min-height: var(--tap-min);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.contact__email svg {
  width: 1.4em;
  height: 1.4em;
  color: var(--accent);
  flex-shrink: 0;
}

.contact__email:focus-visible {
  color: var(--accent);
}@media (hover: hover) and (pointer: fine){.contact__email:hover{
  color: var(--accent);
}}

.page-hero {
  padding-block: var(--sp-8) var(--sp-7);
  background:
    radial-gradient(1.6px 1.6px at 16% 30%, var(--paper-a28), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 18%, var(--paper-a22), transparent 60%),
    radial-gradient(1.6px 1.6px at 55% 75%, var(--paper-a16), transparent 60%),
    radial-gradient(120% 90% at 60% -30%, var(--bg-panel) 0%, var(--bg) 62%);
  border-bottom: 1px solid var(--line);
}

.page-hero__headline {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: auto;
  max-width: 20ch;
}

.page-hero .section-lede {
  margin-top: var(--sp-2);
}

.services--page {
  padding-block: var(--sp-8);
}
.services--page .services__head {
  margin-bottom: var(--sp-6);
}
.services--band {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about--page {
  background: var(--bg);
}
.about--page .about__copy .section-title {
  margin-top: var(--sp-6);
}
.about--page .about__copy .section-title:first-child {
  margin-top: 0;
}
.about--page .about__copy a {
  color: var(--accent-cyan);
}

.about--page .about__copy a:focus-visible {
  color: var(--accent);
}@media (hover: hover) and (pointer: fine){.about--page .about__copy a:hover{
  color: var(--accent);
}}

.contact--page {
  padding-block: var(--sp-8) var(--sp-9);
  background: var(--bg);
  border-top: 0;
}
.contact--page .contact__email {
  font-size: var(--t-contact-line);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.contact__notes {
  margin-top: var(--sp-7);
  max-width: var(--measure-narrow);
}
.contact__notes h2 {
  font-family: var(--font-display-condensed);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-condensed);
  margin: var(--sp-6) 0 var(--sp-3);
}
.contact__notes p {
  color: var(--fg-dim);
  margin: 0 0 var(--sp-4);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.js [data-reveal].is-settled { opacity: 1; transform: none; transition: none; }

.page-hero__actions { margin-top: var(--sp-6); }

.reel-section { padding-block: var(--sp-9); background: var(--bg); }

.reel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: var(--sp-7) var(--sp-6);
}
.reel__item { display: flex; flex-direction: column; gap: var(--sp-3); }

.self-hosted-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-raised); }
.self-hosted-video:focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 3px; }
.video-link { display: block; color: var(--fg); font-size: var(--t-small); line-height: var(--lh-body); text-decoration: underline; text-underline-offset: 0.2em; }
.video-link:focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 3px; }

.reel__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-2);
}
.reel__note { color: var(--fg-dim); font-size: var(--t-small); margin: 0; }
.reel__dur {
  font-family: var(--font-display-condensed);
  letter-spacing: var(--ls-condensed);
  color: var(--accent-cyan);
  white-space: nowrap;
}



.faq-section { padding-block: var(--sp-9); background: var(--bg-raised); border-top: 1px solid var(--line); }
.faq { margin: 0; max-width: var(--measure-narrow); }
.faq__item { padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  font-family: var(--font-display-condensed);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-condensed);
  margin: 0 0 var(--sp-3);
}
.faq__a { color: var(--fg-dim); margin: 0; }

.related { padding-block: var(--sp-9); background: var(--bg); border-top: 1px solid var(--line); }
.related__list {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .related__list { grid-template-columns: repeat(2, 1fr); }
}
.related__list li { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.related__list a {
  display: block;
  font-family: var(--font-display-condensed);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-condensed);
  color: var(--fg);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  min-height: var(--tap-min);
}
 .related__list a:focus-visible { color: var(--accent); }@media (hover: hover) and (pointer: fine){.related__list a:hover{ color: var(--accent); }}
.related__list span { color: var(--fg-dim); font-size: var(--t-small); }

.capability__more {
  margin: var(--sp-7) 0 0;
}
.capability__more a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--accent-cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.capability__more a:focus-visible { color: var(--accent); }@media (hover: hover) and (pointer: fine){.capability__more a:hover{ color: var(--accent); }}

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-7);
}
.picker__group { margin: 0; padding: 0; border: 0; min-width: 0; align-self: start; }
.picker__legend {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--fg);
  padding: 0;
  margin-bottom: var(--sp-2);
}
.picker__desc {
  color: var(--fg-dim);
  font-size: var(--t-small);
  margin: 0 0 var(--sp-4);
}
.picker__items { display: flex; flex-direction: column; }

.picker__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine){.picker__item:hover { color: var(--accent-hover); }}

.picker__box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--paper-a55);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.picker__box::after {
  content: "";
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
  margin-top: -2px;
}
.picker__box:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.picker__box:checked::after { transform: rotate(-45deg) scale(1); }
.picker__item:has(.picker__box:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.picker__box:focus-visible { outline: none; }

.picker__name {
  font-family: var(--font-body);
  font-size: var(--t-list);
  font-weight: 500;
  line-height: 1.3;
}
.picker__box:checked + .picker__name { color: var(--accent); }
.picker__item:has(.picker__box:checked) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.picker__summary {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-2));
  z-index: 4;
  margin-bottom: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--tum-void-scrim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}
.picker__count { margin: 0; color: var(--fg-dim); font-size: var(--t-small); max-width: var(--measure-narrow); }
.picker__count b { color: var(--fg); font-weight: 400; font-family: var(--font-display-condensed); }

@media (max-width: 800px) {
  .picker__summary { position: static; }
}
:root[data-display-text="larger"] .picker__summary,
:root[data-display-text="largest"] .picker__summary { position: static; }

.picker__group, .picker__item, .picker__name, .roster__group, .roster__list li,
.service-row, .service-row__title, .reel__item, .reel__title { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .picker__item, .picker__box, .picker__box::after { transition: none; }
}

.bento-section { padding-block: var(--sp-9); background: var(--bg-raised); border-top: 1px solid var(--line); }

.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6) var(--sp-5);
}
.bento__cell { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; align-content: start; }
.bento__cell--xl { grid-column: span 6; }
.bento__cell--lg { grid-column: span 5; }
.bento__cell--md { grid-column: span 4; }
.bento__cell--sm { grid-column: span 3; }


.bento__meta { min-width: 0; }
.bento__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-1);
}
.bento__cell--xl .bento__name { font-size: var(--t-h2); }
.bento__cell--sm .bento__name { font-size: var(--t-list); }
.bento__kind { color: var(--fg-dim); font-size: var(--t-small); margin: 0; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__cell--xl { grid-column: span 6; }
  .bento__cell--lg,
  .bento__cell--md,
  .bento__cell--sm { grid-column: span 3; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--xl,
  .bento__cell--lg,
  .bento__cell--md,
  .bento__cell--sm { grid-column: span 1; }
  .bento__cell--sm .bento__name { font-size: var(--t-h3); }
  .bento__cell--sm .facade__play { width: 4rem; height: 4rem; }
  .bento__cell--sm .facade__play svg { width: 1.6rem; height: 1.6rem; }
}

.picker-detail {
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.picker-detail[hidden] { display: none; }
.picker-detail:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.picker-detail__head {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}
.picker-detail__list { margin: 0; }
.picker-detail__name {
  font-family: var(--font-display-condensed);
  font-size: var(--t-list);
  letter-spacing: var(--ls-condensed);
  color: var(--accent);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.picker-detail__list > .picker-detail__name:first-child { padding-top: 0; border-top: 0; }
.picker-detail__text {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--fg-dim);
  max-width: var(--measure);
}
.picker-detail__list > .picker-detail__text:last-child { margin-bottom: 0; }
.contact__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-family: var(--font-display-condensed);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-condensed);
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-cyan);
  padding-bottom: var(--sp-1);
  min-height: var(--tap-min);
}
.contact__phone svg { width: 1.3em; height: 1.3em; color: var(--accent-cyan); flex-shrink: 0; }
 .contact__phone:focus-visible { color: var(--accent-cyan); }@media (hover: hover) and (pointer: fine){.contact__phone:hover{ color: var(--accent-cyan); }}
.contact--page .contact__phone {
  font-size: var(--t-contact-line);
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  border-bottom-color: var(--accent);
}
.contact--page .contact__phone svg { color: var(--accent); }
 .contact--page .contact__phone:focus-visible { color: var(--accent-hover); }@media (hover: hover) and (pointer: fine){.contact--page .contact__phone:hover{ color: var(--accent-hover); }}
.nowrap { white-space: nowrap; }
.bento-section + .faq-section { background: var(--bg); }

.related__list--work li { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.related__list--work a { margin-bottom: var(--sp-3); }
.related__list--work span { display: block; line-height: var(--lh-body); }

.sitegrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-7) var(--sp-6);
}
.sitecard { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sitecard__shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
  line-height: 0;
}
.sitecard__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
  opacity: 0.92;
}
.sitecard__shot:focus-visible img { transform: scale(1.02); opacity: 1; }
@media (hover: hover) {
  .sitecard__shot:hover img { transform: scale(1.02); opacity: 1; }
}
.sitecard__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-1);
}
.sitecard__name a { text-decoration: none; }
.sitecard__name .num { font-weight: 700; }
 .sitecard__name a:focus-visible { color: var(--accent); }@media (hover: hover) and (pointer: fine){.sitecard__name a:hover{ color: var(--accent); }}
.sitecard__place {
  font-family: var(--font-body);
  color: var(--accent-cyan);
  font-size: var(--t-small);
  margin: 0 0 var(--sp-3);
}
.sitecard__blurb { color: var(--fg-dim); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .sitecard__shot img { transition: none; }
  @media (hover: hover) and (pointer: fine){.sitecard__shot:hover img { transform: none; }}
}

.roster-section { padding-block: var(--sp-9); background: var(--bg-raised); border-top: 1px solid var(--line); }
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-6);
}
.roster__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}
.roster__list { list-style: none; margin: 0; padding: 0; }
.roster__list li {
  font-family: var(--font-display-condensed);
  font-size: var(--t-list);
  letter-spacing: var(--ls-condensed);
  color: var(--fg-dim);
  padding-block: var(--sp-2);
  border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
  .picker__note { display: none; }
  .picker__summary { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
}

.console-section { padding-block: var(--sp-9) 0; background: var(--bg); }

.console {
  --sage: var(--console-sage);
  --sage-dark: var(--console-sage-dark);
  --sage-light: var(--console-sage-light);
  --panel: var(--console-panel);
  --chrome: var(--console-chrome);
  --crt: var(--console-crt);
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--gutter) 0;
  background:
    linear-gradient(180deg, var(--sage-light) 0%, var(--sage) 12%, var(--sage) 88%, var(--sage-dark) 100%);
  border-top: 3px solid var(--sage-light);
  border-bottom: 3px solid var(--console-seam);
  overflow: hidden;
}

.console__rail {
  max-width: calc(var(--page-max) - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
}
.console__counter { display: inline-flex; gap: 3px; }
.console__counter b {
  font-family: var(--font-display-condensed);
  font-weight: 400;
  font-size: var(--t-counter);
  background: var(--console-counter-bg);
  color: var(--console-counter-digit);
  padding: 2px 7px;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px var(--black-a80);
}
.console__label {
  font-family: var(--font-display-condensed);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--console-label);
  background: var(--panel);
  padding: 3px 12px;
  border-radius: 2px;
}

.console__bays {
  list-style: none;
  max-width: calc(var(--page-max) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 0 var(--sp-5);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5) var(--sp-4);
  align-items: end;
}
.bay { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.bay--s7 { grid-column: span 7; }
.bay--s6 { grid-column: span 6; }
.bay--s5 { grid-column: span 5; }
.bay--s4 { grid-column: span 4; }
.bay--s3 { grid-column: span 3; }

.bay__console {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--console-bay) 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 var(--white-a55),
    inset 0 -2px 4px var(--black-a25),
    0 2px 5px var(--black-a35);
}
.bay__handle {
  flex: 0 0 auto;
  width: 9px;
  height: 46px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--console-handle-dark) 0%, var(--chrome) 40%, var(--console-handle-light) 55%, var(--console-handle) 100%);
  box-shadow: 0 1px 2px var(--black-a50);
}

.bay__screen {
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px / 16px;
  background: var(--crt);
  box-shadow:
    inset 0 0 0 3px var(--console-screen-rim),
    inset 0 0 24px var(--black-a70),
    inset 0 0 60px var(--console-crt-glow);
  overflow: hidden;
  position: relative;
}


.bay__lamps { display: flex; gap: 4px; flex-wrap: wrap; }
.bay__lamps i {
  width: 15px; height: 11px;
  border-radius: 2px;
  background: var(--console-lamp-off);
  box-shadow: inset 0 1px 0 var(--white-a30);
  animation: lamp 5s steps(1, end) infinite;
}
.bay__lamps i:nth-child(3n+1) { --lit: var(--console-lamp-amber); animation-duration: 4.2s; }
.bay__lamps i:nth-child(3n+2) { --lit: var(--console-lamp-blue); animation-duration: 6.1s; }
.bay__lamps i:nth-child(3n)   { --lit: var(--console-lamp-red); animation-duration: 7.4s; }
.bay__lamps i:nth-child(2) { animation-delay: .7s; }
.bay__lamps i:nth-child(3) { animation-delay: 1.9s; }
.bay__lamps i:nth-child(4) { animation-delay: 2.6s; }
.bay__lamps i:nth-child(5) { animation-delay: 3.4s; }
.bay__lamps i:nth-child(6) { animation-delay: .3s; }
.bay__lamps i:nth-child(7) { animation-delay: 4.8s; }
.bay__lamps i:nth-child(8) { animation-delay: 1.2s; }
@keyframes lamp {
  0%, 62%  { background: var(--console-lamp-off); }
  63%, 97% { background: var(--lit, var(--console-lamp-amber)); box-shadow: 0 0 7px var(--lit, var(--console-lamp-amber)), inset 0 1px 0 var(--white-a40); }
  98%,100% { background: var(--console-lamp-off); }
}

.bay__meta { min-width: 0; }
.bay__name {
  font-family: var(--font-display-condensed);
  font-size: var(--t-list);
  letter-spacing: var(--ls-condensed);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--console-name);
  background: var(--panel);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  margin: 0 0 var(--sp-2);
}
.bay--s7 .bay__name, .bay--s6 .bay__name { font-size: var(--t-h3); }
.bay__kind { color: var(--console-ink); font-size: var(--t-small); margin: 0; }
.bay__dur { color: var(--console-ink); }

.console__ledge {
  position: relative;
  height: 54px;
  background: linear-gradient(180deg, var(--console-ledge-light) 0%, var(--console-ledge) 60%, var(--console-ledge-dark) 100%);
  border-top: 2px solid var(--console-ledge-edge);
  margin-inline: calc(-1 * var(--gutter));
}
.console__ashtray {
  position: absolute; left: 6%; bottom: 10px;
  width: 62px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--console-ashtray-light) 0%, var(--console-ashtray) 70%, var(--console-ashtray-dark) 100%);
  box-shadow: 0 2px 4px var(--black-a40), inset 0 -2px 3px var(--black-a35);
}
.console__smoke {
  position: absolute; left: 46%; bottom: 12px;
  width: 10px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--smoke-a0) 0%, var(--smoke-a30) 55%, var(--smoke-a16) 100%);
  filter: blur(6px);
  transform-origin: bottom center;
  animation: smoke 9s ease-in-out infinite;
}
@keyframes smoke {
  0%   { opacity: 0; transform: translate(0, 10px) scaleX(.7) rotate(0deg); }
  25%  { opacity: .85; }
  60%  { opacity: .55; transform: translate(14px, -34px) scaleX(1.25) rotate(7deg); }
  100% { opacity: 0; transform: translate(30px, -74px) scaleX(1.7) rotate(13deg); }
}
.console__keys {
  position: absolute; right: 8%; bottom: 9px;
  width: 132px; height: 20px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--console-keys-light) 0 10px, var(--console-keys-dark) 10px 12px),
    var(--console-keys);
  box-shadow: inset 0 1px 0 var(--white-a30), 0 2px 3px var(--black-a35);
}

@media (max-width: 900px) {
  .console__bays { grid-template-columns: repeat(6, 1fr); }
  .bay--s7 { grid-column: span 7; }
.bay--s6 { grid-column: span 6; }
.bay--s5 { grid-column: span 5; }
  .bay--s4, .bay--s3 { grid-column: span 3; }
}
@media (max-width: 600px) {
  .console__bays { grid-template-columns: 1fr; }
  .bay--s7, .bay--s6, .bay--s5, .bay--s4, .bay--s3 { grid-column: span 1; }
  .console__rail { gap: var(--sp-4); }
  .console__keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bay__lamps i { animation: none; background: var(--console-lamp-off); }
  .bay__lamps i:nth-child(3n+1) { background: var(--console-lamp-amber); }
  .bay__lamps i:nth-child(3n+2) { background: var(--console-lamp-blue); }
  .console__smoke { animation: none; opacity: .35; }
}

.hero--photo {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-9) var(--sp-8);
  background: var(--bg);
  overflow: hidden;
}
.hero--photo .hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  animation: hero-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.hero--photo .hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 62%;
}
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.4%, -1%, 0); }
}

.hero--photo .hero__craft { transform-origin: 58% 41%; }

.hero--photo .hero__exhaust {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 0, var(--mask-solid) 15%);
  mask-image: linear-gradient(to top, transparent 0, var(--mask-solid) 15%);
}

@keyframes hero-launch {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  40%  { transform: translate3d(.2%, -2%, 0) scale(.99); opacity: 1; }
  65%  { transform: translate3d(.7%, -12%, 0) scale(.95); opacity: 1; }
  85%  { transform: translate3d(1.5%, -40%, 0) scale(.86); opacity: 1; }
  to   { transform: translate3d(2.4%, -105%, 0) scale(.68); opacity: 0; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--photo .hero__craft {
      animation: hero-launch linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 720px;
      will-change: transform, opacity;
    }
  }
}
.hero--photo .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--void-a96) 0%, var(--void-a90) 34%, var(--void-a45) 58%, var(--void-a12) 100%),
    linear-gradient(180deg, var(--void-a72) 0%, transparent 22%, transparent 68%, var(--bg) 100%);
}
.hero--photo .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--photo .hero__copy { max-width: 40rem; }
.hero--photo .hero__headline { text-shadow: 0 2px 24px var(--void-a85); }
.hero--photo .hero__lede {
  color: var(--fg-dim);
  color: color-mix(in srgb, var(--fg) 70%, var(--fg-dim));
  text-shadow: 0 1px 12px var(--void-a90);
}

@media (max-width: 860px) {
  .hero--photo .hero__photo img { object-position: 62% 58%; }
  .hero--photo .hero__craft { animation-range: 0 440px; }
  .hero--photo .hero__scrim {
    background:
      linear-gradient(180deg, var(--void-a90) 0%, var(--void-a72) 45%, var(--void-a55) 70%, var(--bg) 100%);
  }
}

.service-row__num, .process-step__marker, .reel__dur, .bay__dur, .contact__phone,
.console__counter b, .num {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

@media (max-width: 800px) {
  .hero--photo { padding-top: 0; }
  .hero--photo .hero__photo {
    position: relative;
    inset: auto;
    z-index: 0;
    height: min(64vw, 400px);
    overflow: hidden;
    margin-bottom: var(--sp-6);
    animation: none;
    transform: none;
  }
  .hero--photo .hero__photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(transparent, var(--bg));
  }
  .hero--photo .hero__photo img { object-position: 58% 45%; }
  .hero--photo .hero__craft { animation: none; transform: none; }
  .hero--photo .hero__scrim { display: none; }
  .hero--photo .hero__headline,
  .hero--photo .hero__lede { text-shadow: none; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .hero--photo .hero__scrim {
    background: linear-gradient(180deg, transparent 68%, var(--bg) 100%);
  }
  .hero--photo .hero__copy { position: relative; }
  .hero--photo .hero__copy::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sp-6));
    z-index: -1;
    background: var(--tum-void-scrim);
    border-radius: var(--radius-md, 12px);
  }
}

.service-row__title a { color: inherit; text-decoration: none; }
 .service-row__title a:focus-visible { color: var(--accent-cyan); text-decoration: underline; }@media (hover: hover) and (pointer: fine){.service-row__title a:hover{ color: var(--accent-cyan); text-decoration: underline; }}

.moon {
  position: relative;
  background: var(--bg);
  padding-top: var(--sp-9);
}
.moon__copy {
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-7);
}
.moon__scene {
  display: block;
  margin-top: calc(-1 * var(--sp-8));
  overflow: hidden;
}
.moon__scene img {
  width: 100%;
  height: auto;
  display: block;
  animation: moon-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes moon-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(1.2%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__photo,
  .hero--photo .hero__photo img,
  .moon__scene img { animation: none; transform: none; }
}

.ad-link {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  margin-top: var(--sp-1);
  font-size: var(--t-small);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.bay__screen:focus-visible { outline-color: var(--console-ink); }
.bay__meta .video-link, .bay__meta .ad-link { color: var(--console-ink); }
.bay__meta .video-link:focus-visible, .bay__meta .ad-link:focus-visible { outline-color: var(--console-ink); }

.scene-band { margin: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.scene-band img {
  display: block; width: 100%; height: auto;
  max-height: clamp(14rem, 36vw, 28rem);
  object-fit: cover; object-position: 50% 80%;
}
.page-hero--below-art { background: var(--bg); padding-top: var(--sp-7); }
.owner-note { margin: var(--sp-5) 0 0; max-width: var(--measure); color: var(--fg-dim); font-size: var(--t-small); }

.steps-section, .meet-section, .rewrite-section, .flow-section, .proof-note, .measure-section {
  padding-block: var(--sp-8); border-top: 1px solid var(--line);
}
.rewrite-section, .case--proof, .steps-section { background: var(--bg-raised); }
.steps-section__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-7); }
.plain-steps { margin: 0; padding-left: 1.25em; color: var(--fg-dim); max-width: var(--measure-narrow); }
.plain-steps li + li { margin-top: var(--sp-3); }

.rewrite { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
.rewrite__panel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-5); }
.rewrite__panel--after { border-color: var(--line-strong); }
.rewrite__label {
  margin: 0 0 var(--sp-3); font-family: var(--font-display-condensed); font-weight: 400;
  font-size: var(--t-h3); letter-spacing: var(--ls-condensed); text-transform: uppercase; color: var(--fg-dim);
}
.rewrite__panel--after .rewrite__label { color: var(--accent-cyan); }
.rewrite__dish { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--fg); }
.rewrite__text { margin: 0; color: var(--fg-dim); }
.rewrite__notes { margin: var(--sp-5) 0 0; padding-left: 1.25em; color: var(--fg-dim); max-width: var(--measure); }
.rewrite__notes li + li { margin-top: var(--sp-2); }

.flow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
.flow__lane { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-5); }
.flow__lane--direct { border-color: var(--line-strong); }
.flow__title {
  margin: 0 0 var(--sp-4); font-family: var(--font-display-condensed); font-weight: 400;
  font-size: var(--t-h3); letter-spacing: var(--ls-condensed); text-transform: uppercase;
}
.flow__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: var(--sp-5); }
.flow__steps li {
  position: relative; flex: 1; min-width: 0; text-align: center; padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg);
  color: var(--fg); font-size: var(--t-small); display: flex; align-items: center; justify-content: center;
}
.flow__steps li + li::before {
  content: ""; position: absolute; top: 50%; left: calc(-1 * var(--sp-5));
  width: calc(var(--sp-5) - 10px); border-top: 2px solid var(--accent-cyan);
}
.flow__steps li + li::after {
  content: ""; position: absolute; top: calc(50% - 6px); left: -10px; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--accent-cyan);
}
.flow__steps li { flex-direction: column; gap: var(--sp-1); }
.flow__lane--direct .flow__steps li:nth-child(2) { border-color: var(--accent-cyan); }
.flow__tag { color: var(--fg-dim); font-size: var(--t-label); line-height: 1.3; }
.flow__lane--direct .flow__tag { color: var(--accent-cyan); }
.flow__note { margin: var(--sp-4) 0 0; color: var(--fg-dim); font-size: var(--t-small); }

.case { padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.case--alt { background: var(--bg-raised); }
.case__inner { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: var(--sp-7); align-items: start; }
.case__stat { position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; }
.stat__sub { margin: var(--sp-2) 0 0; color: var(--fg-dim); font-size: var(--t-small); max-width: 17rem; }
.contact__alt { margin: var(--sp-4) 0 0; color: var(--fg-dim); font-size: var(--t-small); }
.contact__alt a { overflow-wrap: anywhere; }
.stat__num {
  margin: 0; font-family: var(--font-body); font-weight: 800;
  font-size: var(--t-stat); line-height: 1; white-space: nowrap; letter-spacing: -0.03em; color: var(--fg);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.stat__caption { margin: var(--sp-3) 0 0; color: var(--fg); font-weight: 600; }
.case__body p { color: var(--fg-dim); max-width: var(--measure); margin: 0 0 var(--sp-4); }
.case__sub {
  margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-display-condensed); font-weight: 400;
  font-size: var(--t-h3); letter-spacing: var(--ls-condensed); text-transform: uppercase;
}
.results-disclaimer { margin: var(--sp-5) 0 0; max-width: var(--measure); color: var(--fg-dim); font-size: var(--t-small); }

@media (max-width: 1000px) {
  .case__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .case__stat { position: static; }
}
@media (max-width: 800px) {
  .steps-section__inner, .rewrite, .flow { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 520px) {
  .flow__steps { flex-direction: column; gap: var(--sp-5); }
  .flow__steps li + li::before {
    top: calc(-1 * var(--sp-5)); left: 50%; width: 0; height: calc(var(--sp-5) - 8px);
    border-top: 0; border-left: 2px solid var(--accent-cyan);
  }
  .flow__steps li + li::after {
    top: -8px; left: calc(50% - 5px); border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 0; border-top: 8px solid var(--accent-cyan);
  }
}

:where(:root:not([data-display-theme="dark"])) :where(
  .services, .process, .about, .related, .faq-section, .roster-section, .bento-section,
  .steps-section, .meet-section, .rewrite-section, .flow-section, .case, .measure-section, .legal,
  .gallery-section
) {
  --bg: var(--band-bg);
  --bg-raised: var(--band-bg-raised);
  --bg-panel: var(--band-bg-panel);
  --fg: var(--band-fg);
  --fg-dim: var(--band-fg-dim);
  --line: var(--band-line);
  --line-strong: var(--band-line-strong);
  --accent-cyan: var(--band-cyan);
  --focus-ring: var(--band-cyan);
  --accent: var(--band-accent);
  --accent-hover: var(--band-accent-hover);
  background: var(--bg);
  color: var(--fg);
}

:root:not([data-display-theme="dark"]) .contact--page {
  --bg: var(--band-bg);
  --bg-raised: var(--band-bg-raised);
  --bg-panel: var(--band-bg-panel);
  --fg: var(--band-fg);
  --fg-dim: var(--band-fg-dim);
  --line: var(--band-line);
  --line-strong: var(--band-line-strong);
  --accent-cyan: var(--band-cyan);
  --focus-ring: var(--band-cyan);
  --accent: var(--band-accent);
  --accent-hover: var(--band-accent-hover);
  background: var(--bg);
  color: var(--fg);
}

.btn--primary { background: var(--tum-orange); color: var(--ink-fixed); }
 .btn--primary:focus-visible { background: var(--tum-orange-bright); color: var(--ink-fixed); }@media (hover: hover) and (pointer: fine){.btn--primary:hover{ background: var(--tum-orange-bright); color: var(--ink-fixed); }}

.picker__summary {
  --fg: var(--paper-fixed);
  --fg-dim: var(--paper-dim-fixed);
  --line-strong: var(--paper-a28);
  --accent: var(--tum-orange);
  --accent-hover: var(--tum-orange-bright);
  --focus-ring: var(--tum-orange-bright);
  color: var(--fg);
}
:root:not([data-display-theme="dark"]) .picker__box:not(:checked) { border-color: var(--fg-dim); background: var(--bg-panel); }

:root:not([data-display-theme="dark"]) :is(.related, .measure-section) { background: var(--bg-raised); }
:root:not([data-display-theme="dark"]) :is(.faq-section, .case--alt, .services--band, .rewrite-section, .steps-section, .case--proof) + :is(.related, .measure-section) { background: var(--bg); }

:root:not([data-display-theme="dark"]) .sitecard__shot { box-shadow: 0 6px 18px var(--band-shadow); }


.scene-band--photo img { object-position: 50% 55%; }
.gallery-section { padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.gallery-section--alt { background: var(--bg-raised); }
.gallery {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.gallery__item { margin: 0; }
.gallery__item img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-md); background: var(--bg-raised);
}
.gallery--strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.gallery-more { margin: var(--sp-5) 0 0; }
.gallery--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.gallery__item--tile { display: flex; flex-direction: column; gap: var(--sp-2); }
.gallery__title { margin: var(--sp-3) 0 0;  }
.gallery__title a { color: var(--fg); text-decoration: none; }
 .gallery__title a:focus-visible { color: var(--accent); text-decoration: underline; }@media (hover: hover) and (pointer: fine){.gallery__title a:hover{ color: var(--accent); text-decoration: underline; }}
.gallery__text { margin: 0; color: var(--fg-dim); font-size: var(--t-small); max-width: var(--measure-narrow); }

.steps-section + .faq-section { background: var(--bg-panel); }
.services--page + .meet-section { background: var(--bg-raised); }
.meet-section .section-lede + .plain-steps { margin-top: var(--sp-5); }
.meet-section .plain-steps + .section-lede { margin-top: var(--sp-5); }
.process .services__head, .faq-section .services__head { margin-bottom: var(--sp-6); }
.process-track { margin-top: var(--sp-6); }
.related__list { margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .faq:has(> .faq__item:nth-child(6)) { max-width: none; columns: 2; column-gap: var(--sp-7); }
  .faq:has(> .faq__item:nth-child(6)) > .faq__item { break-inside: avoid; border-bottom: 0; border-top: 1px solid var(--line); }
}
.plain-steps strong { display: block; color: var(--fg); margin-bottom: var(--sp-1); }
.steps-section ol.plain-steps li + li { margin-top: var(--sp-4); }
.page-hero + .steps-section .plain-steps, .scene-band + .page-hero + .steps-section .plain-steps { color: var(--fg); }
.plain-steps li::marker { color: var(--accent-cyan); }
.process-step__desc { margin: 0; }
.service-list--plain .service-row { grid-template-columns: 3rem 1fr; }
@media (max-width: 640px) {
  .service-list--plain .service-row { grid-template-columns: 2rem 1fr; grid-template-areas: "icon title" "desc desc"; }
}
.plain-steps--options { list-style: none; padding: 0; max-width: none; display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.plain-steps--options li { margin: 0; border-top: 1px solid var(--line-strong); padding-top: var(--sp-4); }
@media (min-width: 1024px) { .plain-steps--options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related__list a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
 .related__list a:focus-visible { text-decoration-color: currentColor; }@media (hover: hover) and (pointer: fine){.related__list a:hover{ text-decoration-color: currentColor; }}
@media (max-width: 800px) {
  .process, .faq-section, .related { padding-block: var(--sp-8); }
  .contact { padding-block: var(--sp-9); }
}
@media (max-width: 780px) {
  .process-step { display: grid; grid-template-columns: var(--marker-size) minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); }
  .process-step__marker { grid-row: span 2; }
}
.contact__lede { text-wrap: pretty; }
.service-row__title { hyphens: manual; }
:root[data-display-text="larger"] .service-row__title, :root[data-display-text="largest"] .service-row__title { hyphens: auto; }
@media (max-width: 480px) { .page-hero__actions .btn { width: 100%; } }

.scene-band img { max-height: clamp(14rem, 28vw, 21rem); }
:root:not([data-display-theme="dark"]) .about + .related { background: var(--bg-panel); }
.case--proof + .faq-section { background: var(--bg-panel); }
@media (min-width: 40rem) { .gallery--strip, .gallery--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .gallery:not(.gallery--tiles):not(.gallery--strip) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.gallery__title { font-family: var(--font-display-condensed); font-size: var(--t-h3); letter-spacing: var(--ls-display); font-weight: 400; }
.gallery__item--tile { position: relative; }
.gallery__item--tile .gallery__title a::after { content: ""; position: absolute; inset: 0; }
 .gallery__item--tile:focus-within .gallery__title a { color: var(--accent); text-decoration: underline; }@media (hover: hover) and (pointer: fine){.gallery__item--tile:hover .gallery__title a{ color: var(--accent); text-decoration: underline; }}
.gallery__item--tile:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-md); }
.gallery__item--tile:focus-within .gallery__title a:focus-visible { outline: none; }
.service-row__title a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }

.service-row__title a, .case__body p > a { padding-block: 0.6em; }

.capability__more a:only-child, .gallery-more a { padding-block: 0.75em; }

.section-lede, .stat__caption, .stat__sub { text-wrap: pretty; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.hero .hero__headline, .page-hero .page-hero__headline) { animation: hero-rise var(--dur-enter) var(--ease-out) both; }
  :is(.hero .hero__lede, .page-hero .section-lede) { animation: hero-rise var(--dur-enter) var(--ease-out) var(--stagger) both; }
  :is(.hero .hero__actions, .page-hero .page-hero__actions) { animation: hero-rise var(--dur-enter) var(--ease-out) calc(2 * var(--stagger)) both; }
}
@media (max-width: 480px) {
  .hero .hero__headline { font-size: var(--t-h1); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.scene-band--loop { position: relative; overflow: hidden; }
.scene-band__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.scene-band--loop.is-started .scene-band__video { opacity: 1; }
.loop-toggle {
  position: absolute; bottom: var(--sp-4);
  right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  width: var(--tap-min); height: var(--tap-min); padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong);
  cursor: pointer;
}
.loop-toggle[hidden] { display: none; }
.loop-toggle svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine){.loop-toggle:hover { background: var(--bg-panel); }}
.loop-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bg); }
.loop-toggle .loop-toggle__play { display: none; }
.loop-toggle[data-state="paused"] .loop-toggle__play { display: block; }
.loop-toggle[data-state="paused"] .loop-toggle__pause { display: none; }
.scene-band--loop img, .scene-band--loop .scene-band__video { object-position: 50% 55%; }
@media (min-width: 801px) {
  .scene-band--photo.scene-band--loop img, .scene-band--photo.scene-band--loop .scene-band__video { object-position: 50% 35%; }
}


.js [data-reveal="wipe"] {
  opacity: 1;
  transform: translateX(-0.5rem);
  clip-path: inset(-0.25em 100% -0.25em -0.25em);
  transition: clip-path var(--dur-wipe) var(--ease-out), transform var(--dur-wipe) var(--ease-out);
}
.js [data-reveal="wipe"].is-visible { transform: none; clip-path: inset(-0.25em -0.25em -0.25em -0.25em); }

.js [data-reveal] { transition-delay: var(--d, 0s); }
.js [data-reveal="follow"] { transition-delay: calc(var(--d, 0s) + var(--stagger)); }
.js [data-reveal].is-done { transition-duration: var(--dur-med); transition-delay: 0s; }

.js [data-reveal="photo"] { transform: scale(1.04); transition-duration: var(--dur-settle); }
.js [data-reveal="photo"].is-visible { transform: none; }

.js [data-reveal].is-settled { transition: none; transition-delay: 0s; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal="wipe"], .js [data-reveal="photo"] { clip-path: none; transform: none; transition: none; }
}
html[data-display-motion="stop"] .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--bg) 70%, transparent); }
  .btn { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
  .gallery__item:not([data-reveal]):has(a):hover,
  .js .gallery__item[data-reveal].is-done:has(a):hover { transform: translateY(-3px); }
  .gallery__item:has(a) img { transition: filter var(--dur-med) var(--ease-out); }
  .gallery__item:has(a):hover img { filter: brightness(1.06) saturate(1.08); }
  main a:not(.btn) { transition: color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease), text-underline-offset var(--dur-fast) var(--ease); }
  main a:not(.btn):hover { text-decoration-thickness: 2px; }
}

html[data-ambient="paused"] :is(.hero__photo, .bay__lamps i, .console__smoke, .moon__scene img) { animation-play-state: paused !important; }
.no-js :is(.hero__photo, .bay__lamps i, .console__smoke, .moon__scene img) { animation: none !important; }
.hero .ambient-toggle { z-index: 3; bottom: var(--sp-5); }
.console-section { position: relative; }
.console-section .ambient-toggle { z-index: 3; top: var(--sp-4); bottom: auto; }

@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}