main > .section:not(.dark) + .section:not(.dark) {
  padding-block-start: 0;
}
.detail-hero {
  container: dhero / inline-size;
  padding-block: var(--space-xl) var(--space-2xl);
}
.detail-hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.detail-hero-copy {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  min-width: 0;
}
.detail-hero h1 {
  max-inline-size: 14ch;
}
.detail-hero + .section {
  padding-block-start: 0;
}
.detail-sector {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}
.detail-scene {
  min-width: 0;
}
@container dhero (inline-size > 56rem) {
  .detail-hero-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
  }
  .detail-hero .product-media {
    padding-block-end: var(--space-2xl);
  }
  .detail-hero .float-scene {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: var(--space-md);
    inline-size: min(72%, 23rem);
    margin: 0;
  }
}
.answer {
  container: answer / inline-size;
  padding-block-start: var(--space-xl);
}
.answer-grid {
  display: grid;
  gap: var(--space-md);
}
.answer-text {
  max-inline-size: 58ch;
  color: var(--color-ink-2);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}
.updated {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
@container answer (inline-size > 56rem) {
  .answer-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
  }
  .answer-grid .updated {
    grid-column: 2;
  }
}
.split {
  container: split / inline-size;
}
.split-grid {
  display: grid;
  gap: var(--space-md);
}
.split-body {
  display: grid;
  gap: var(--space-sm);
}
.split-body p {
  color: var(--color-ink-2);
}
.split-body .tags {
  margin-block-start: var(--space-2xs);
}
@container split (inline-size > 56rem) {
  .split-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
  }
}
.caps {
  container: caps / inline-size;
}
.block-head {
  margin-block-end: var(--space-xl);
}
.caps-grid {
  display: grid;
  gap: var(--space-xl) var(--gap-columns);
  list-style: none;
}
.cap {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  justify-items: start;
}
.cap p {
  color: var(--color-ink-2);
}
.cap-mark {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised-s);
  color: var(--color-accent);
}
.cap-mark .icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
@container caps (inline-size > 36rem) {
  .caps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container caps (inline-size > 60rem) {
  .caps-grid:not(:has(> :nth-child(4):last-child)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.specs {
  container: specs / inline-size;
}
.specs-grid {
  display: grid;
  gap: var(--space-xl);
}
.specs-list {
  display: grid;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.specs-list > div {
  display: grid;
  gap: var(--space-3xs) var(--space-lg);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.specs-list dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.specs-list dd {
  color: inherit;
}
@container specs (inline-size > 56rem) {
  .specs-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
  }
  .specs-list > div {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
}
.shots {
  container: shots / inline-size;
}
.shots-head {
  margin-block-end: var(--space-xl);
}
.shot {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-l);
  background: var(--color-paper);
  box-shadow: var(--shadow-inset);
}
.shot img {
  inline-size: 100%;
  border-radius: var(--radius-m);
}
.shot figcaption {
  padding-inline: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.shot-missing {
  display: grid;
  place-items: center;
  min-block-size: 16rem;
  text-align: center;
}
.closing {
  container: closing / inline-size;
}
.closing-grid {
  display: grid;
  gap: var(--space-lg);
}
.next-link {
  display: grid;
  gap: var(--space-2xs);
  align-content: center;
  padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-l);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-soft);
}
.next-link:hover {
  background: var(--color-paper-2);
}
.next-link:active {
  background: var(--color-paper-3);
}
.next-link span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.next-link strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  min-width: 0;
}
@container page (inline-size < 40rem) {
  .next-link strong {
    font-size: 2rem;
    line-height: 2.375rem;
  }
}
.next-link .icon {
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-out);
}
.next-link:hover .icon {
  transform: translateX(6px);
}
@container closing (inline-size > 56rem) {
  .closing-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .next-link:hover .icon {
    transform: none;
  }
}
.service-list {
  display: grid;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.service {
  padding-block: var(--space-xl);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  scroll-margin-block-start: calc(var(--nav-height) + var(--space-lg));
}
.service h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-title);
}
.service h3 .cap-mark {
  margin: 0;
}
.service .split-grid {
  align-items: start;
}
.service .split-body {
  justify-items: start;
}
.people > .container {
  container: people / inline-size;
}
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--gap-columns);
  list-style: none;
}
@container people (inline-size > 40rem) {
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container people (inline-size > 64rem) {
  .team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.person-photo {
  inline-size: 100%;
  aspect-ratio: 1;
  margin-block-end: var(--space-xs);
  border: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-l);
  object-fit: cover;
  background: var(--color-paper-2);
}
.person {
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}
.person p {
  color: var(--color-ink-2);
}
.person-mark {
  display: grid;
  place-items: center;
  inline-size: 5rem;
  block-size: 5rem;
  margin-block-end: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-l);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised-s);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-title);
}
.person:nth-child(2) .person-mark {
  background: var(--color-sand);
  color: var(--color-ink);
}
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-xl) var(--gap-columns);
}
.office {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--glass-edge);
  border-radius: var(--radius-l);
  background: var(--color-dark-2);
}
.office address {
  font-style: normal;
  color: var(--color-ink-2);
}
.office p {
  color: var(--color-ink-2);
}
.gallery {
  display: grid;
  gap: var(--space-lg) var(--gap-columns);
  container: gallery / inline-size;
}
.shots > .container {
  container: shotsbox / inline-size;
}
@container shotsbox (inline-size > 48rem) {
  .gallery:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gallery .shot {
  align-content: start;
  padding: var(--space-xs);
  box-shadow: var(--shadow-shot);
  border-color: var(--color-hair);
  background: var(--color-raised);
}
.gallery-note {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
}
.service-art,
.offices-art {
  overflow: clip;
  border: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-shot);
}
.service-art img,
.offices-art img {
  inline-size: 100%;
}
@container split (inline-size > 56rem) {
  .service .split-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  }
}
.offices-art {
  margin-block-end: var(--space-xl);
  border-color: var(--glass-edge);
}
.detail-media {
  margin: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--sc-bg);
  overflow: clip;
  min-width: 0;
}
.detail-media img {
  inline-size: 100%;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-window);
}
.detail-media-neutral {
  --sc-bg: var(--color-paper-3);
}
.detail-media.detail-scene {
  padding: 0;
  background: none;
  overflow: visible;
}
.detail-scene .scene,
.detail-scene .river-viz {
  box-shadow: var(--shadow-window);
}
@media (prefers-reduced-motion: no-preference) {
  .detail-media img {
    animation: rise-in var(--dur-reveal) var(--ease-out) both;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}
.about-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}
.about-tiles picture {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: clip;
  background: var(--color-paper-3);
  box-shadow: var(--shadow-raised);
}
.about-tiles img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
}
.about-tiles picture:nth-child(even) {
  transform: translateY(var(--space-lg));
}
.answer-who {
  max-inline-size: 58ch;
  color: var(--color-ink-2);
}
@container answer (inline-size > 56rem) {
  .answer-who {
    grid-column: 2;
  }
}
.specs-grid {
  align-items: start;
}
.specs-list {
  display: grid;
  gap: var(--space-sm);
  border: 0;
}
.specs-list > div {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-hair);
  border-block-end: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-m);
  background: var(--color-paper-2);
}
@container specs (inline-size > 40rem) {
  .specs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container specs (inline-size > 56rem) {
  .specs-list > div {
    grid-template-columns: none;
  }
}
.specs-list dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}
.specs-list dd {
  font-weight: var(--weight-strong);
}
.glance > .container {
  container: glance / inline-size;
}
.fact-grid {
  display: grid;
  gap: var(--space-md);
}
@container glance (inline-size > 40rem) {
  .fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container glance (inline-size > 64rem) {
  .fact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fact-wide {
    grid-column: span 2;
  }
}
.fact {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-l);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised-s);
  transition: transform var(--dur-short) var(--ease-out);
}
.fact:hover {
  transform: translateY(-4px);
}
.fact dt {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}
.fact dd {
  display: grid;
  gap: var(--space-3xs);
}
.fact dd span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.fact dd a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule);
}
.fact dd a:hover {
  color: var(--color-accent);
}
.fact-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.fact-chips a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-soft);
}
.fact-chips a:hover {
  background: var(--tint-teal);
}
.pillars > .container {
  container: pillars / inline-size;
}
.pillar-grid {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
}
@container pillars (inline-size > 48rem) {
  .pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pillar {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-sm) var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-l);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised-s);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-raised);
}
.pillar > :not(.pillar-media) {
  padding-inline: var(--space-sm);
}
.pillar-media {
  aspect-ratio: 16 / 10;
  margin-block-end: var(--space-xs);
  border-radius: var(--radius-m);
  overflow: clip;
  background: var(--color-paper-3);
}
.pillar-media picture {
  display: block;
  block-size: 100%;
}
.pillar-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
}
.pillar h3 a {
  text-decoration: none;
}
.pillar h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
}
.pillar:has(a:focus-visible) {
  outline: var(--ring-width) solid var(--color-focus);
  outline-offset: var(--ring-width);
}
.pillar h3 a:focus-visible {
  outline: none;
}
.pillar p {
  color: var(--color-muted);
}
.careers-card {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--grad-soft);
}
#careers > .container {
  container: careers / inline-size;
}
.careers-card p {
  max-inline-size: 52ch;
  margin-block-start: var(--space-xs);
  color: var(--color-ink-2);
}
@container careers (inline-size > 48rem) {
  .careers-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fact:hover,
  .pillar:hover {
    transform: none;
  }
}
.detail-hero-grid:has(.about-tiles) h1 {
  max-inline-size: 12ch;
}
@container dhero (inline-size > 56rem) {
  .detail-hero-grid:has(.about-tiles) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}
.cap-mark {
  border-color: transparent;
  box-shadow: none;
}
.cap:nth-child(6n+1) .cap-mark {
  background: var(--tint-teal);
  color: var(--tint-teal-ink);
}
.cap:nth-child(6n+2) .cap-mark {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}
.cap:nth-child(6n+3) .cap-mark {
  background: var(--tint-coral);
  color: var(--tint-coral-ink);
}
.cap:nth-child(6n+4) .cap-mark {
  background: var(--tint-amber);
  color: var(--tint-amber-ink);
}
.cap:nth-child(6n+5) .cap-mark {
  background: var(--tint-green);
  color: var(--tint-green-ink);
}
.cap:nth-child(6n+6) .cap-mark {
  background: var(--tint-rose);
  color: var(--tint-rose-ink);
}
.cap {
  transition: transform var(--dur-short) var(--ease-out);
}
.cap:hover .cap-mark {
  transform: rotate(-8deg) scale(1.08);
}
.cap-mark {
  transition: transform var(--dur-short) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .cap:hover .cap-mark {
    transform: none;
  }
}
.caps-grid {
  counter-reset: cap;
}
.cap {
  counter-increment: cap;
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--color-hair);
}
.cap::before {
  content: counter(cap, decimal-leading-zero);
  color: var(--color-accent);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
}
.cap .cap-mark {
  display: none;
}
.detail-hero + .pgrid .block-head {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.svc-list {
  container: svc / inline-size;
  display: grid;
  gap: var(--space-xl);
}
.svc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: var(--shadow-neu);
}
.svc-copy {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  align-content: center;
}
.svc-n {
  color: var(--color-accent);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
}
.svc-line {
  max-inline-size: 30rem;
  color: var(--color-ink-2);
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.svc-items {
  display: grid;
  gap: var(--space-sm);
  inline-size: 100%;
  margin-block: var(--space-xs);
}
.svc-items > div {
  display: grid;
  gap: var(--space-3xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-hair);
  scroll-margin-block-start: calc(var(--nav-height) + var(--space-xl));
}
.svc-items dt {
  font-weight: var(--weight-strong);
}
.svc-items dd {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@container svc (inline-size > 60rem) {
  .svc-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    padding: var(--space-xl);
  }
  .svc-card:nth-child(even) .svc-copy {
    order: 2;
  }
}