:root {
  --accent-glow: rgb(245 130 19 / 20%);
  --blue-glow: rgb(7 59 134 / 16%);
  --deep-navy: #04162c;
}

::selection {
  background: rgb(245 130 19 / 28%);
  color: var(--navy);
}

body {
  background-color: var(--white);
  background-image:
    radial-gradient(circle at 8% 12%, rgb(7 59 134 / 4%), transparent 26rem),
    radial-gradient(circle at 92% 36%, rgb(245 130 19 / 4%), transparent 24rem);
}

main {
  overflow: clip;
}

.scroll-progress {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #ffae45 42%, var(--blue));
  box-shadow: 0 1px 12px var(--accent-glow);
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

body[data-scroll-direction="up"] .scroll-progress {
  background: linear-gradient(90deg, var(--blue), #3d7ec1 48%, var(--orange));
  box-shadow: 0 1px 12px var(--blue-glow);
}

body[data-scroll-direction="down"] .scroll-progress {
  background: linear-gradient(90deg, var(--orange), #ffae45 42%, var(--blue));
  box-shadow: 0 1px 12px var(--accent-glow);
}

.site-header {
  animation: header-arrive 680ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, var(--orange), var(--blue), transparent 92%);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 320ms ease, transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.site-header.scrolled::after {
  opacity: 0.55;
  transform: scaleX(1);
}

.brand img {
  transition: filter 320ms ease, transform 320ms ease;
}

.brand:hover img {
  filter: drop-shadow(0 7px 12px rgb(7 59 134 / 16%));
  transform: translateY(-2px);
}

.main-nav a,
.footer-nav a {
  transition: color 220ms ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--blue);
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #a93f00, #c14d00 52%, #ad4100);
}

.button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px auto -2px -45%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 38%), transparent);
  transform: skewX(-18deg) translateX(0);
  transition: transform 620ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.button span {
  position: relative;
  z-index: 1;
}

.button:hover::before,
.button:focus-visible::before {
  transform: skewX(-18deg) translateX(470%);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.text-link {
  position: relative;
  padding-bottom: 0.22rem;
}

.text-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hero-copy h1,
.about-hero-copy h1,
.services-hero-copy h1,
.experience-hero-copy h1,
.contact-hero-copy h1 {
  background: linear-gradient(118deg, var(--navy) 12%, var(--blue) 96%);
  background-clip: text;
  color: var(--navy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow:not(.eyebrow-light) {
  background: linear-gradient(90deg, var(--blue), #0c63bd);
  background-clip: text;
  color: var(--blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.effects-ready .reveal .eyebrow::after,
html.effects-ready .reveal.eyebrow::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms cubic-bezier(0.2, 0.75, 0.25, 1) 180ms;
}

html.effects-ready .reveal.is-visible .eyebrow::after,
html.effects-ready .reveal.eyebrow.is-visible::after {
  transform: scaleX(1);
}

.approach,
.values,
.experience-value,
.services-cta,
.contact-closing,
.site-footer {
  background-color: var(--deep-navy);
  background-image:
    radial-gradient(circle at 88% 16%, rgb(23 91 158 / 34%), transparent 32rem),
    radial-gradient(circle at 14% 92%, rgb(245 130 19 / 10%), transparent 24rem),
    linear-gradient(135deg, var(--deep-navy), #082749 62%, #061a33);
  background-position: 100% 0, 0 100%, center;
  background-size: 125% 125%, 120% 120%, 100% 100%;
  animation: navy-drift 16s ease-in-out infinite alternate;
}

.approach::after,
.values::after,
.experience-value::after,
.services-cta::after {
  animation: ring-drift 12s ease-in-out infinite alternate;
}

.contact-closing {
  position: relative;
  isolation: isolate;
}

.contact-closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10rem;
  left: -8rem;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgb(245 130 19 / 15%), transparent 68%);
  border-radius: 50%;
  animation: glow-breathe 8s ease-in-out infinite alternate;
}

.service-ribbon {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f6f9fc, #fff7ef 50%, #f4f8fc);
}

.service-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgb(245 130 19 / 8%), transparent);
  animation: ribbon-sheen 9s ease-in-out infinite;
  pointer-events: none;
}

.crop,
.about-image,
.service-photo,
.experience-photo,
.contact-photo {
  transition: box-shadow 420ms ease;
}

.crop::after,
.about-image::after,
.service-photo::after,
.experience-photo::after,
.contact-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(135deg, rgb(245 130 19 / 9%), transparent 24%, transparent 74%, rgb(7 59 134 / 10%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
  opacity: 0.62;
  pointer-events: none;
  transition: box-shadow 420ms ease, opacity 420ms ease;
}

.crop:hover,
.about-image:hover,
.service-photo:hover,
.experience-photo:hover,
.contact-photo:hover {
  box-shadow: 0 22px 58px rgb(6 26 51 / 16%), 0 0 0 1px rgb(245 130 19 / 10%);
}

.crop:hover::after,
.about-image:hover::after,
.service-photo:hover::after,
.experience-photo:hover::after,
.contact-photo:hover::after {
  box-shadow: inset 0 0 0 1px rgb(245 130 19 / 34%);
  opacity: 0.82;
}

.crop figcaption {
  z-index: 3;
}

.approach-card,
.value-card,
.experience-value-card,
.category-card,
.conversation-card {
  transition: background-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.approach-card:hover,
.value-card:hover,
.experience-value-card:hover {
  background: rgb(255 255 255 / 4%);
  box-shadow: 0 18px 42px rgb(0 0 0 / 12%);
  transform: translateY(-5px);
}

.category-card:hover,
.conversation-card:hover {
  box-shadow: 0 20px 54px rgb(6 26 51 / 12%);
  transform: translateY(-5px);
}

.category-card h3,
.service-number,
.value-card svg,
.conversation-icon {
  transition: color 300ms ease, filter 300ms ease, transform 300ms ease;
}

.category-card:hover h3 {
  color: var(--blue);
}

.service-step:hover .service-number {
  color: var(--orange-strong-hover);
  filter: drop-shadow(0 7px 16px rgb(245 130 19 / 18%));
  transform: translateY(-3px);
}

.value-card:hover svg,
.conversation-list li:hover .conversation-icon {
  filter: drop-shadow(0 8px 14px rgb(245 130 19 / 18%));
  transform: translateY(-3px) scale(1.055);
}

.conversation-card {
  background: linear-gradient(145deg, #f5f8fb, #edf3f9);
  border: 1px solid rgb(7 59 134 / 7%);
}

.project-form input:hover,
.project-form select:hover,
.project-form textarea:hover {
  border-color: rgb(7 59 134 / 48%);
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
  border-color: var(--orange-strong);
  box-shadow: 0 0 0 3px rgb(245 130 19 / 12%), 0 10px 30px rgb(7 59 134 / 7%);
}

.form-status.status-pop {
  animation: status-pop 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

html.effects-ready .reveal {
  --reveal-delay: 0ms;
  filter: blur(7px);
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    filter 760ms ease var(--reveal-delay),
    opacity 720ms ease var(--reveal-delay),
    transform 820ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--reveal-delay);
  will-change: filter, opacity, transform;
}

.reveal-late {
  --reveal-delay: 110ms;
}

.reveal-latest {
  --reveal-delay: 210ms;
}

html.effects-ready .hero-copy.reveal,
html.effects-ready .about-hero-copy.reveal,
html.effects-ready .services-hero-copy.reveal,
html.effects-ready .experience-hero-copy.reveal,
html.effects-ready .contact-hero-copy.reveal,
html.effects-ready .closing-copy.reveal,
html.effects-ready .contact-closing-copy.reveal,
html.effects-ready .experience-copy.reveal {
  transform: translate3d(-26px, 18px, 0);
}

html.effects-ready figure.reveal {
  transform: translate3d(26px, 18px, 0) scale(0.985);
}

html.effects-ready .reveal.reveal-from-top {
  transform: translate3d(0, -32px, 0);
}

html.effects-ready .reveal.reveal-from-bottom {
  transform: translate3d(0, 32px, 0);
}

html.effects-ready figure.reveal.reveal-from-top {
  transform: translate3d(0, -28px, 0) scale(0.985);
}

html.effects-ready figure.reveal.reveal-from-bottom {
  transform: translate3d(0, 28px, 0) scale(0.985);
}

html.effects-ready .reveal.is-visible {
  filter: blur(0);
  opacity: 1;
  transform: none;
  will-change: auto;
}

@keyframes header-arrive {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes navy-drift {
  from {
    background-position: 100% 0, 0 100%, center;
  }
  to {
    background-position: 82% 18%, 16% 82%, center;
  }
}

@keyframes ring-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-22px, 18px, 0) scale(1.035);
  }
}

@keyframes glow-breathe {
  from {
    opacity: 0.55;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes ribbon-sheen {
  0%,
  38% {
    transform: translateX(0);
  }
  72%,
  100% {
    transform: translateX(720%);
  }
}

@keyframes status-pop {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .crop:hover,
  .about-image:hover,
  .service-photo:hover,
  .experience-photo:hover,
  .contact-photo:hover {
    box-shadow: var(--shadow);
  }

  .approach-card:hover,
  .value-card:hover,
  .experience-value-card:hover,
  .category-card:hover,
  .conversation-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .approach,
  .values,
  .experience-value,
  .services-cta,
  .contact-closing,
  .site-footer,
  .approach::after,
  .values::after,
  .experience-value::after,
  .services-cta::after,
  .contact-closing::before,
  .service-ribbon::before,
  .form-status.status-pop {
    animation: none !important;
  }

  .reveal {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}