@media (prefers-reduced-motion: no-preference) {
  .s-hero-copy {
    animation: hero-enter 0.85s both;
  }
  .s-hero-art {
    animation: art-enter 1.2s both;
  }
  .s-button > a:after,
  .s-submit:after {
    animation: sheen 6s ease-in-out infinite;
  }
  .s-architecture-line:after {
    animation: data-pass 3s ease-in-out infinite;
  }
  .s-reveal.s-pending {
    opacity: 0;
    transform: translateY(20px);
  }
  .s-reveal {
    transition:
      opacity 0.65s,
      transform 0.65s;
  }
  .s-service {
    transition:
      opacity 0.65s,
      transform 0.65s,
      border-color 0.3s;
  }
  @keyframes hero-enter {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes art-enter {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes sheen {
    0%,
    60% {
      transform: translateX(-100%);
    }
    90%,
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes data-pass {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(40px);
    }
  }
}

/* One two-second orbit per card, in a shared six-second sequence. */
@property --s-flow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes s-flow-border {
  0% {
    --s-flow-angle: 0deg;
    opacity: 0;
  }
  2%,
  30% {
    opacity: 1;
  }
  33.333333% {
    --s-flow-angle: 360deg;
    opacity: 0;
  }
  100% {
    --s-flow-angle: 360deg;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @supports (background: conic-gradient(from 0deg, transparent, #ffb85e)) and
    ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    #together .s-flow-running .s-stack-node {
      border-color: #ffffff20;
    }
    #together .s-flow-running .s-stack-node::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 1;
      padding: 2px;
      border-radius: inherit;
      pointer-events: none;
      background: conic-gradient(
        from var(--s-flow-angle),
        transparent 0deg 185deg,
        #ffb85e30 235deg,
        #ffb85e 290deg,
        #fff0cf 325deg,
        transparent 360deg
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: s-flow-border 6s linear infinite both;
    }
    #together .s-flow-running .s-stack-node:nth-child(2)::before {
      animation-delay: 2s;
    }
    #together .s-flow-running .s-stack-node:nth-child(3)::before {
      animation-delay: 4s;
    }
  }
}

/* A two-second sweep at 85% transparency; JS starts the next logo every five seconds. */
.s-logo-sequence-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 8px;
}
.s-logo-sequence-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    #07090c00 0%,
    #07090c 22%,
    #ffc253 50%,
    #07090c 78%,
    #07090c00 100%
  );
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .s-logo-sequence-item.s-logo-sweeping::before {
    animation: s-logo-sweep 2s ease-in-out both;
  }
}
@keyframes s-logo-sweep {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 0.15;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Shared interaction layer. All effects enhance an already usable document. */
:root {
  --s-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --s-fast: 180ms;
  --s-medium: 280ms;
  --s-header-offset: 0px;
}

/* 1. Pointer light gently breathes inside the glyphs, without scaling the text. */
@property --s-title-light-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 125px;
}
@keyframes s-title-light-pulse {
  0%, 100% { --s-title-light-radius: 105px; opacity: 0.72; }
  50% { --s-title-light-radius: 155px; opacity: 1; }
}
main .s-cursor-title {
  position: relative;
  pointer-events: auto;
}
main .s-cursor-title > .s-title-gradient {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0 !important;
  padding: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  text-wrap: inherit;
  background: radial-gradient(
    circle var(--s-title-light-radius, 125px) at var(--s-light-x, 50%) var(--s-light-y, 50%),
    var(--s-title-light-center, #fff0cc) 0%,
    var(--s-title-light-inner, #ffd18b) 22%,
    var(--s-title-light-color, #ffb85e) 44%,
    var(--s-title-light-edge, #e89b4659) 66%,
    transparent 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transition: opacity 240ms var(--s-ease);
}
main .s-cursor-title > .s-title-gradient,
main .s-cursor-title > .s-title-gradient * {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
main .s-cursor-title.s-light-active > .s-title-gradient {
  opacity: 1;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main .s-cursor-title.s-light-active > .s-title-gradient {
    animation: s-title-light-pulse 2.8s ease-in-out infinite;
  }
}

/* Go architecture uses the same pointer light in a cyan-blue palette. */
#together .s-stack-joint-heading > h2 {
  --s-title-light-center: #e2f8ff;
  --s-title-light-inner: #8ddfff;
  --s-title-light-color: #38bdf8;
  --s-title-light-edge: #0284c759;
}

/* 2. Persistent orientation. The WordPress template-part is the sticky ancestor. */
.wp-site-blocks > .wp-block-template-part:has(> .s-header) {
  position: sticky;
  top: var(--s-header-offset);
  z-index: 10;
}
.s-header {
  position: sticky;
  top: var(--s-header-offset);
  background: #0b0e12f2;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.admin-bar {
  --s-header-offset: 32px;
}
.s-nav a {
  position: relative;
  padding-block: 12px;
  isolation: isolate;
}
.s-nav a::before {
  content: "";
  position: absolute;
  inset: 4px -8px;
  z-index: -1;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(135deg, #ffb85e20, #ffb85e0a);
  box-shadow:
    inset 0 0 0 1px #ffb85e26,
    0 6px 16px #00000038,
    0 2px 10px #ffb85e0d;
  opacity: 0;
  transition: opacity var(--s-fast) var(--s-ease);
}
.s-nav a:focus-visible::before {
  opacity: 1;
}
@media (hover: hover) {
  .s-nav a:hover::before {
    opacity: 1;
  }
}
.s-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 4px;
  height: 1px;
  background: var(--s-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--s-fast) var(--s-ease);
}
.s-nav a:is(:hover, :focus-visible, [aria-current]) {
  color: var(--s-accent);
}
.s-nav a:is(:hover, :focus-visible, [aria-current])::after {
  transform: scaleX(1);
}
.s-header-contact[aria-current] {
  color: var(--s-accent);
}
@supports (animation-timeline: scroll()) {
  .s-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, #c98b36, #ffb85e, #ffe6b8);
    transform-origin: left;
    animation: s-reading-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes s-reading-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

/* 3. Quiet surface light. No transforms that move text or imply an extra action. */
.s-light-surface {
  position: relative;
  isolation: isolate;
}
.s-light-surface::before,
.s-light-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--s-medium) var(--s-ease);
}
.s-light-surface::after {
  z-index: -1;
  background: radial-gradient(
    350px circle at var(--s-light-x) var(--s-light-y),
    #ffb85e0f,
    transparent 75%
  );
}
@supports (mask-composite: exclude) {
  .s-light-surface::before {
    z-index: 1;
    padding: 1px;
    background: radial-gradient(
      230px circle at var(--s-light-x) var(--s-light-y),
      #ffe2af,
      #ffb85e77 35%,
      transparent 75%
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}
.s-light-surface.s-light-active::before,
.s-light-surface.s-light-active::after {
  opacity: 1;
}
.s-light-surface:focus-within {
  border-color: var(--s-accent);
}

/* 4. Native transitions between documents; ordinary navigation is the fallback. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: var(--s-ease);
}
::view-transition-group(*) {
  animation-duration: 180ms;
}
.s-header {
  view-transition-name: sinatroit-header;
}

/* 5. Native disclosures animate to their real height without measurement scripts. */
.s-faq-list summary {
  min-height: 44px;
  transition: color var(--s-fast) ease;
}
.s-faq-list summary.tableads-disclosure {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 0;
  padding: 6px 36px 6px 0;
  list-style: none;
}
.tableads-disclosure::-webkit-details-marker {
  display: none;
}
.tableads-disclosure::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--s-accent);
  -webkit-mask: center / contain no-repeat url("../icons/arrow-right.svg");
  mask: center / contain no-repeat url("../icons/arrow-right.svg");
  transform: rotate(90deg);
  transition: transform var(--s-medium) var(--s-ease);
}
details[open] > .tableads-disclosure::after {
  transform: rotate(-90deg);
}
.s-faq-list summary:is(:hover, :focus-visible),
.s-faq-list details[open] summary {
  color: var(--s-accent);
}
.s-faq-list details p {
  padding-left: 0;
  padding-right: 36px;
}
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .s-faq-list {
    interpolate-size: allow-keywords;
  }
  .s-faq-list details::details-content {
    height: 0;
    opacity: 0;
    overflow: clip;
    transition:
      height var(--s-medium) var(--s-ease),
      opacity var(--s-medium) ease,
      content-visibility var(--s-medium) allow-discrete;
  }
  .s-faq-list details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* Native entry transitions for the compact navigation on smaller screens. */
@media (max-width: 782px) {
  .admin-bar {
    --s-header-offset: 46px;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 92px;
  }
  .s-nav {
    gap: 4px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .s-nav a {
    padding: 10px 4px;
    min-height: 44px;
  }
  .s-nav a::after {
    bottom: 5px;
    right: auto;
    width: 24px;
  }
  .s-nav a::before {
    inset: 2px 0;
  }
  .s-menu {
    min-height: 44px;
    min-width: 44px;
  }
  @supports (transition-behavior: allow-discrete) {
    .s-nav {
      opacity: 0;
      transform: translateY(-8px);
      transition:
        opacity 180ms ease,
        transform 180ms var(--s-ease),
        display 180ms allow-discrete;
    }
    .s-nav.s-open {
      opacity: 1;
      transform: none;
    }
    @starting-style {
      .s-nav.s-open {
        opacity: 0;
        transform: translateY(-8px);
      }
    }
  }
}
@media (max-width: 600px) {
  .admin-bar {
    --s-header-offset: 0px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .s-header {
    background: var(--s-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce),
  (forced-colors: active),
  (hover: none) {
  main .s-cursor-title > .s-title-gradient,
  .s-light-surface::before,
  .s-light-surface::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  .s-header::after {
    display: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .s-nav a::before {
    display: none;
  }
  .s-header {
    background: Canvas;
    backdrop-filter: none;
  }
  .s-header::after {
    display: none;
  }
  .tableads-disclosure::after {
    background: ButtonText;
  }
}