.sr-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(229, 185, 118, 0.11),
      transparent 34rem
    ),
    linear-gradient(145deg, #111821 0%, #17212b 52%, #10171f 100%);
  transition:
    opacity 700ms var(--ease-out),
    visibility var(--motion-slow);
}
.sr-loader__content {
  display: flex;
  width: min(88vw, 580px);
  flex-direction: column;
  align-items: center;
  animation: sr-loader-enter 700ms var(--ease-out) both;
}
.sr-loader__brand {
  width: 100%;
}
.sr-loader__logo {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}
.sr-loader__track {
  position: relative;
  width: min(46vw, 240px);
  height: 2px;
  overflow: hidden;
  margin-top: 30px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
}
.sr-loader__track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(229, 185, 118, 0.25),
    var(--cta),
    #f7dba9
  );
  box-shadow: 0 0 12px rgba(229, 185, 118, 0.45);
  animation: sr-loader-progress 1.5s var(--ease-in-out) infinite;
}
@keyframes sr-loader-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sr-loader-progress {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(340%);
  }
}

html.loaded .sr-loader__content {
  animation: none;
  transition:
    opacity 350ms var(--ease-in),
    transform 350ms var(--ease-in);
  opacity: 0;
  transform: translateY(-8px);
}
html.loaded .sr-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.no-loader .sr-loader {
  display: none !important;
}

.sr-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1500;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

@media (max-width: 480px) {
  .sr-loader__content {
    position: relative;
    top: -6vh;
  }
  .sr-loader__track {
    width: min(54vw, 200px);
    margin-top: 20px;
  }
}

.sr-nav {
  transition:
    box-shadow var(--motion-base) var(--ease-out),
    background var(--motion-base) var(--ease-out),
    backdrop-filter var(--motion-base);
}
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .sr-nav.is-stuck {
    background: var(--surface);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}
.sr-nav .sr-container {
  transition: padding-block var(--motion-base) var(--ease-out);
}
.sr-nav {
  border-bottom: 1px solid var(--border);
}
.sr-nav.is-stuck .sr-container {
  padding-block: 10px;
}

@media (min-width: 1025px) {
  .sr-nav .sr-container {
    gap: clamp(20px, 3vw, 44px);
    min-height: 86px;
    padding-block: 11px;
  }
  .sr-logo {
    width: 190px;
    height: 64px;
    flex-basis: 190px;
  }
  .sr-nav {
    border-radius: 0;
  }
  .sr-nav-links {
    flex: 1;
    justify-content: center;
    gap: clamp(16px, 2vw, 30px);
  }
  .sr-nav-links > a,
  .sr-nav-links .sr-drop-toggle {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }
  .sr-nav-phone {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    background: var(--cta);
    color: var(--on-cta);
    font-size: 0.77rem;
    font-weight: 700;
    white-space: nowrap;
    transition:
      background var(--motion-fast),
      transform var(--motion-fast);
  }
  .sr-nav-phone:hover {
    background: var(--cta-hover);
    color: var(--on-cta);
    transform: translateY(-1px);
  }
  .sr-nav-phone .sr-icon {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 1025px) {
  .sr-drop-menu {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity var(--motion-quick) var(--ease-out),
      transform var(--motion-quick) var(--ease-out),
      visibility var(--motion-quick);
  }
  .sr-drop:hover .sr-drop-menu,
  .sr-drop:focus-within .sr-drop-menu,
  .sr-drop.is-open .sr-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .sr-drop-menu a {
    transition:
      background var(--motion-fast),
      color var(--motion-fast),
      transform var(--motion-fast) var(--ease-out);
  }
  .sr-drop-menu a:hover {
    transform: translateX(3px);
  }
}

@media (hover: hover) {
  .sr-btn {
    transition:
      transform var(--motion-quick) var(--ease-out),
      box-shadow var(--motion-quick) var(--ease-out),
      background var(--motion-quick),
      border-color var(--motion-quick),
      color var(--motion-quick);
  }
  .sr-btn > svg,
  .sr-btn .sr-ico,
  .sr-btn i {
    transition: transform var(--motion-quick) var(--ease-out);
  }
  .sr-btn:hover > svg:last-child,
  .sr-btn:hover .sr-ico:last-child {
    transform: translateX(4px);
  }
  .sr-btn--accent:hover {
    box-shadow: 0 14px 34px rgba(229, 185, 118, 0.3);
  }

  .sr-nav-links > a,
  .sr-drop-toggle {
    position: relative;
  }
  .sr-nav-links > a::after,
  .sr-drop-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--cta);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--motion-quick) var(--ease-out);
    border-radius: 2px;
  }
  .sr-nav-links > a:hover::after,
  .sr-nav-links > a.is-active::after,
  .sr-drop:hover .sr-drop-toggle::after,
  .sr-drop.is-active .sr-drop-toggle::after {
    transform: scaleX(1);
  }

  .sr-card {
    transition:
      transform var(--motion-quick) var(--ease-out),
      box-shadow var(--motion-quick) var(--ease-out),
      border-color var(--motion-quick);
  }
  .sr-card:hover {
    border-color: color-mix(in srgb, var(--cta) 40%, var(--border));
  }

  .sr-service__icon,
  .sr-step__num {
    transition:
      transform var(--motion-quick) var(--ease-out),
      background var(--motion-quick),
      color var(--motion-quick);
  }
  .sr-card:hover .sr-service__icon,
  .sr-service:hover .sr-service__icon {
    transform: translateY(-2px) scale(1.06) rotate(-3deg);
  }
  .sr-card:hover .sr-service__icon {
    background: color-mix(in srgb, var(--cta) 18%, var(--surface));
  }
  .sr-step:hover .sr-step__num {
    transform: scale(1.08);
    transition-timing-function: var(--ease-spring);
  }

  .sr-footer a {
    transition:
      color var(--motion-fast),
      transform var(--motion-fast) var(--ease-out);
  }
  .sr-footer a:hover {
    transform: translateX(2px);
  }

  .sr-service a,
  .sr-blog__body a {
    transition: color var(--motion-fast);
  }
  .sr-service a {
    display: inline-block;
  }
  .sr-service:hover a {
    color: var(--cta-hover);
  }

  .sr-blog__thumb,
  .sr-service__media {
    position: relative;
  }
}

.sr-btn:active {
  transform: translateY(0) scale(0.97);
}
.sr-top:active {
  transform: scale(0.92);
}

.sr-acc__body p {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--motion-base) var(--ease-out) 0.04s,
    transform var(--motion-base) var(--ease-out) 0.04s;
}
.sr-acc.is-open .sr-acc__body p {
  opacity: 1;
  transform: none;
}
.sr-acc__icon {
  transition:
    transform var(--motion-base) var(--ease-spring),
    color var(--motion-fast);
}

.sr-top {
  transform: scale(0.8) translateY(8px);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-spring);
}
.sr-top.is-vis {
  transform: scale(1) translateY(0);
}
@media (hover: hover) {
  .sr-top:hover {
    transform: scale(1.07) translateY(-2px);
  }
}

.sr-cookie {
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}
.sr-cookie.is-hidden {
  display: flex !important;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .sr-hero--home .sr-hero__bg img {
      animation: none;
      will-change: auto;
    }

    .sr-hero--full .sr-hero__bg img {
      animation: sr-kenburns 22s var(--ease-in-out) 1.2s both alternate infinite;
      will-change: transform;
    }

    .sr-hero__bg[data-parallax] {
      transform: translate3d(
        calc(var(--px, 0) * 10px),
        calc(var(--py, 0) * 8px),
        0
      );
      transition: transform 0.25s var(--ease-out-soft);
      will-change: transform;
    }
  }
}
@keyframes sr-kenburns {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-0.6%, -0.6%, 0);
  }
}

.sr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}
.sr-word__i {
  display: inline-block;
  transform: translateY(0.95em);
  opacity: 0;
  filter: blur(4px);
  transition:
    transform var(--motion-slow) var(--ease-out),
    opacity var(--motion-slow) var(--ease-out),
    filter var(--motion-slow) var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 45ms);
}
[data-reveal].is-in .sr-word__i {
  transform: none;
  opacity: 1;
  filter: none;
}

.js:not(.reveal-js) .sr-word__i {
  animation: sr-word-failsafe 0.01s linear 1.6s forwards;
}
@keyframes sr-word-failsafe {
  to {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

[data-tempo="hero"] {
  --stagger: 120ms;
}
[data-tempo="brisk"] {
  --reveal-dur: var(--motion-medium);
  --stagger: 52ms;
  --lead: 70ms;
}
[data-tempo="walk"] {
  --reveal-dur: var(--motion-medium);
  --stagger: 130ms;
  --lead: 110ms;
}
[data-tempo="immersive"] {
  --reveal-dur: var(--motion-xslow);
  --reveal-dur-clip: var(--motion-xslow);
  --stagger: 110ms;
  --lead: 220ms;
  --reveal-ease: var(--ease-out-soft);
}
[data-tempo="gravity"] {
  --reveal-dur: 760ms;
  --reveal-dur-clip: 900ms;
  --stagger: 90ms;
  --lead: 200ms;
}
[data-tempo="crescendo"] {
  --reveal-dur: 720ms;
  --stagger: 64ms;
  --lead: 180ms;
}
[data-tempo="alive"] {
  --reveal-dur: var(--motion-slow);
  --stagger: 100ms;
  --lead: 160ms;
  --reveal-ease: var(--ease-out-soft);
}
[data-tempo="resolution"] {
  --reveal-dur: 820ms;
  --stagger: 40ms;
  --lead: 120ms;
  --reveal-ease: var(--ease-out-soft);
}

@media (hover: hover) {
  .sr-card {
    transition-duration: var(--motion-base);
  }
  .sr-service--photo .sr-service__media img,
  .sr-blog__thumb img {
    transition-duration: 760ms;
  }
  .sr-btn {
    transition-duration:
      var(--motion-base), var(--motion-base), var(--motion-quick),
      var(--motion-quick), var(--motion-quick);
  }
}

[id] {
  scroll-margin-top: 92px;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: sr-vt-out var(--motion-base) var(--ease-out) both;
}
::view-transition-new(root) {
  animation: sr-vt-in var(--motion-base) var(--ease-out) both;
}
@keyframes sr-vt-out {
  to {
    opacity: 0;
  }
}
@keyframes sr-vt-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-loader__content,
  .sr-loader__track span {
    animation: none;
  }
  .sr-loader__content {
    opacity: 1;
    transform: none;
  }
  .sr-loader__track span {
    width: 100%;
  }
  .sr-hero--full .sr-hero__bg img,
  .sr-hero__bg[data-parallax] img {
    animation: none !important;
    transform: none !important;
  }
  .sr-progress {
    display: none;
  }
  .sr-word__i {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

.sr-lb-lock {
  overflow: hidden;
}
.sr-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 15, 0.92);
  padding: clamp(16px, 4vw, 48px);
}
.sr-lb.is-open {
  display: flex;
}
.sr-lb__stage {
  position: relative;
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.sr-lb__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  background: var(--slate-900);
}
.sr-lb__cap {
  color: #e7ecf2;
  font-size: 0.95rem;
  text-align: center;
  max-width: 70ch;
}
.sr-lb__count {
  position: absolute;
  top: clamp(16px, 4vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.sr-lb__close,
.sr-lb__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transition:
    background var(--dur-fast),
    transform var(--dur-fast);
}
.sr-lb__close:hover,
.sr-lb__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.sr-lb__close:active,
.sr-lb__nav:active {
  transform: scale(0.92);
}
.sr-lb__close {
  top: clamp(16px, 4vw, 28px);
  right: clamp(16px, 4vw, 28px);
  width: 48px;
  height: 48px;
  font-size: 1.9rem;
  line-height: 1;
}
.sr-lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
}
.sr-lb__nav:active {
  transform: translateY(-50%) scale(0.92);
}
.sr-lb__prev {
  left: clamp(8px, 3vw, 28px);
}
.sr-lb__next {
  right: clamp(8px, 3vw, 28px);
}
@media (max-width: 640px) {
  .sr-lb__nav {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
}
.sr-lb__img.is-in {
  animation: sr-lb-fade 0.28s var(--ease) both;
}
@keyframes sr-lb-fade {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sr-lb-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: rgba(12, 17, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
}
.sr-lb-btn .sr-icon {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-fast),
    transform var(--dur-fast),
    background var(--dur-fast);
}
.sr-gallery-item:hover .sr-lb-btn,
.sr-lb-btn:focus-visible {
  opacity: 1;
  transform: none;
}
.sr-lb-btn:hover {
  background: var(--cta);
}
@media (hover: none) {
  .sr-lb-btn {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-lb__img.is-in {
    animation: none;
  }
  .sr-lb-btn {
    transition: none;
  }
}