/* Wildcolour — restrained movement, clean typography and tactile glass. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset, 155px); }
html.lenis { scroll-behavior: auto; }
body { isolation: isolate; font-weight: 400; font-optical-sizing: auto; }
h1, h2, .hero h1 { font-weight: 500; letter-spacing: -.045em; }
h3, h4, .service-card h3 { font-weight: 500; letter-spacing: -.025em; }
.hero-brand h1 { line-height: 1.12; }
.hero-brand .lede { line-height: 1.85; }
.nav-links a { font-size: .9rem; }
.section-title p { line-height: 1.8; }
.hero-brand + #services { padding-top: clamp(24px, 3vw, 44px); }

/* Transforming the light fields keeps the movement on the compositor. */
.aurora { pointer-events: none; background: #000; }
.aurora::before, .aurora::after {
  width: min(85vw, 1100px); height: min(100vh, 1000px);
  filter: blur(85px); opacity: .3; will-change: transform;
}
.aurora::before {
  top: -25%; left: -22%;
  background: radial-gradient(ellipse at center, #d44d94, #d44d9430 43%, transparent 70%);
  animation: wildcolour-magenta-drift 24s ease-in-out infinite alternate;
}
.aurora::after {
  top: 18%; bottom: auto; right: -27%;
  background: radial-gradient(ellipse at center, #d1fe17, #ece64120 46%, transparent 70%);
  animation: wildcolour-lime-drift 29s ease-in-out -10s infinite alternate;
}
.aurora .grid-overlay { opacity: .1; }
@keyframes wildcolour-magenta-drift {
  0% { transform: translate3d(0, -5vh, 0) scale(1); }
  50% { transform: translate3d(30vw, 22vh, 0) scale(1.12); }
  100% { transform: translate3d(8vw, 53vh, 0) scale(.95); }
}
@keyframes wildcolour-lime-drift {
  0% { transform: translate3d(0, 8vh, 0) scale(1); }
  50% { transform: translate3d(-24vw, -21vh, 0) scale(1.12); }
  100% { transform: translate3d(-42vw, 16vh, 0) scale(.9); }
}
.gradient-text {
  background-image: linear-gradient(90deg, #d44d94 0%, #f08db9 18%, #ece641 38%, #d1fe17 52%, #ece641 66%, #f08db9 84%, #d44d94 100%);
  background-size: 200% 100%; background-position: 0% 50%; background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: wildcolour-type-gradient 5s linear infinite;
}
@keyframes wildcolour-type-gradient {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* A shared glass treatment for primary actions and card links. */
.btn, .service-card .card-link {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease), color .35s var(--ease);
}
.btn::before, .service-card .card-link::before {
  content: ''; position: absolute; inset: -60% -40%; z-index: -1;
  border-radius: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 36%, #ffffff06 43%, #ffffff29 50%, #ffffff06 57%, transparent 64%);
  transform: translateX(-75%) rotate(8deg); animation: none;
  transition: transform .9s var(--ease), opacity .5s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:hover::before, .btn:focus-visible::before,
.service-card:hover .card-link::before, .service-card:focus-visible .card-link::before {
  opacity: 1; transform: translateX(65%) rotate(8deg);
}
.btn-primary:hover, .btn-gradient:hover, .btn-primary:focus-visible, .btn-gradient:focus-visible {
  border-color: #d1fe17;
  box-shadow: inset 0 1px 2px #d1fe17ad, inset 0 -1px 1px #d1fe1755, 0 0 26px #d1fe172a, 0 12px 30px #0004;
}
.service-card .card-link {
  position: relative; isolation: isolate; overflow: hidden; align-self: flex-start;
  padding: 11px 19px; margin-top: 25px; min-height: 44px; border-radius: 11px;
  border: 1px solid #d1fe1775; color: #f4f7dc; font-weight: 500; font-size: .86rem;
  background: linear-gradient(150deg, #d1fe171e, #35420b26 48%, #12140c99);
  box-shadow: inset 0 1px 1px #d1fe1760, inset 0 -1px 1px #d1fe1720, 0 0 14px #d1fe170d;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.service-card:nth-child(even) .card-link {
  border-color: #d44d947d;
  background: linear-gradient(150deg, #efa4ca1a, #5b203e26 48%, #1b101699);
  box-shadow: inset 0 1px 1px #f3c0da60, inset 0 -1px 1px #d44d9420, 0 0 14px #d44d940d;
}
.service-card:hover .card-link, .service-card:focus-visible .card-link {
  color: #fff; border-color: #d1fe17cc; transform: translateY(-2px);
  box-shadow: inset 0 1px 2px #d1fe1780, 0 0 24px #d1fe1724;
}
.service-card:nth-child(even):hover .card-link, .service-card:nth-child(even):focus-visible .card-link {
  border-color: #efa4cacc; box-shadow: inset 0 1px 2px #f3c0da80, 0 0 24px #d44d9424;
}
.btn-arrow { transition: transform .5s var(--ease); }
.service-card:hover .btn-arrow, .service-card:focus-visible .btn-arrow { transform: translateX(4px); }

/* Entrance transitions are removed after completion so hover stays immediate. */
.service-card.reveal.pending {
  opacity: 0; transform: translate3d(0, 46px, 0) scale(.975); will-change: transform, opacity;
  transition: opacity .8s var(--ease) var(--reveal-delay, 0ms), transform .95s var(--ease) var(--reveal-delay, 0ms), border-color .4s var(--ease), background-color .4s var(--ease);
}
.service-card.reveal.pending.in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.service-card.reveal.in:not(.pending):hover, .service-card.reveal.in:not(.pending):focus-visible { transform: translateY(-6px); }
/* Keep an opaque surface under the photographic sprite while it blends. */
.service-card:hover, .service-card:focus-visible { background-color: #19171b; }
.service-card:nth-child(even):hover, .service-card:nth-child(even):focus-visible { background-color: #171911; }
.service-card .service-art { transition: transform .6s var(--ease); }
.service-card:hover .service-art, .service-card:focus-visible .service-art { transform: translateY(-3px) scale(1.035); }
/* The page-height body and non-scrolling horizontal clip keep sticky in range. */
.site-header {
  background: transparent; border-bottom: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: none;
}
.site-header.scrolled {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.site-header .container { position: relative; }
.site-header .logo {
  width: 280.8px; opacity: 1; transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .45s ease, transform .65s var(--ease);
}
.site-header.scrolled .logo { opacity: 0; transform: translate3d(-24px, -8px, 0) scale(.84); pointer-events: none; }
.nav-links {
  border-radius: var(--radius-pill);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: right .75s var(--ease), transform .75s var(--ease), border-color .45s ease, box-shadow .45s ease, background-position 1s ease;
}
.nav-links > li > a:not(.btn) {
  padding: 10px 15px; border-radius: var(--radius-pill);
  transition: color .3s ease, background-color .4s ease, box-shadow .4s ease;
}
.nav-links > li > a:not(.btn):hover,
.nav-links > li > a:not(.btn):focus-visible,
.nav-links > li > a.active {
  color: #fff; background: linear-gradient(120deg, #d44d9425, #d1fe171c);
  box-shadow: inset 0 1px 0 #ffffff20, 0 0 18px #d44d9418;
}
.nav-links a.active::after { content: none; }
.btn, .nav-toggle, .service-card .card-link { border-radius: var(--radius-pill); }
.site-header.scrolled .nav-links {
  border-color: #d1fe1752;
  background: linear-gradient(110deg, #0e0c10d9, #25101cbd, #18200fc7, #0e0c10d9);
  background-size: 240% 100%;
  box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px #d44d9422, 0 10px 35px #00055, 0 0 28px #d1fe1712;
  animation: nav-colour-flow 7s linear infinite;
}
@keyframes nav-colour-flow { to { background-position: 240% 0; } }
.site-footer { background: #000; }

/* A travelling lumo-pink highlight gives every page CTA a live perimeter. */
@property --cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.cta-banner {
  border-color: #d44d946e;
  box-shadow: 0 0 0 1px #d44d9418, 0 0 26px #d44d942b;
  animation: cta-glow-pulse 3.8s ease-in-out infinite;
}
.cta-banner::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--cta-angle), transparent 0 68%, #d44d94 77%, #ff91cc 84%, #fff2fa 87%, #ff5fb5 90%, transparent 98% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px #ff5fb5b8);
  animation: cta-edge-run 4.6s linear infinite;
}
@keyframes cta-edge-run { to { --cta-angle: 360deg; } }
@keyframes cta-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #d44d9418, 0 0 20px #d44d9424; }
  50% { box-shadow: 0 0 0 1px #ff5fb544, 0 0 42px #d44d945c, 0 0 76px #d44d941f; }
}

/* Persistent service ticker. Each HTML page contains two identical groups for a seamless loop. */
.service-ticker {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  height: var(--ticker-height); display: flex; align-items: center; overflow: hidden;
  background: #050506f2; border-top: 1px solid #d44d944d;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 -12px 34px #0009, 0 -2px 18px #d44d9418;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.service-ticker::before,
.service-ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(42px, 7vw, 140px); pointer-events: none;
}
.service-ticker::before { left: 0; background: linear-gradient(90deg, #050506 12%, #050506d9 42%, transparent 100%); }
.service-ticker::after { right: 0; background: linear-gradient(-90deg, #050506 12%, #050506d9 42%, transparent 100%); }
.service-ticker-track {
  display: flex; width: max-content; min-width: max-content; will-change: transform;
  animation: service-ticker-run 42s linear infinite;
}
.service-ticker-group { display: flex; align-items: center; flex: none; min-width: max-content; }
.service-ticker a {
  display: inline-flex; align-items: center; height: var(--ticker-height);
  padding-inline: clamp(20px, 2.5vw, 42px); white-space: nowrap;
  color: #aaa7ae; font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  transition: color .3s ease, text-shadow .3s ease;
}
.service-ticker a:hover,
.service-ticker a:focus-visible { color: #d1fe17; text-shadow: 0 0 14px #d1fe1770; }
.service-ticker-separator { color: #d44d94; font-size: .62rem; opacity: .8; }
.service-ticker:hover .service-ticker-track,
.service-ticker:focus-within .service-ticker-track { animation-play-state: paused; }
@keyframes service-ticker-run { to { transform: translateX(-50%); } }

@media (min-width: 961px) {
  .site-header .nav { min-height: 127px; position: relative; }
  .site-header .nav-links { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
  .site-header.scrolled .nav-links { right: 50%; transform: translate(50%, -50%) scale(.96); }
}

@media (max-width: 1100px) {
  .site-header .logo { width: 241.8px; }
}
@media (max-width: 960px) {
  .nav-links { max-height: calc(100dvh - var(--header-offset, 155px)); padding-bottom: 18px; border-radius: 22px; }
  .nav-links > li { flex: none; }
  .nav-links:not(.open) .dropdown { visibility: hidden; pointer-events: none; }
  .dropdown { gap: 0; }
  .dropdown a { padding-block: 7px; line-height: 1.35; }
  .dropdown a span { display: none; }
  .site-header.scrolled .nav-toggle { transform: translateX(calc(-50vw + 50% + clamp(22px, 4vw, 56px))); }
  .nav-toggle { transition: transform .65s var(--ease), background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .site-header.scrolled .nav-toggle { background: #121014cc; border-color: #d1fe1755; box-shadow: 0 0 24px #d44d9424; }
}
@media (max-width: 600px) {
  :root { --ticker-height: 44px; }
  .site-header .logo { width: 218.4px; }
  .nav { gap: 10px; }
  .aurora::before, .aurora::after { width: 125vw; height: 90vh; filter: blur(60px); opacity: .22; }
  .hero-brand h1 { letter-spacing: -.05em; }
  .hero-brand .lede { line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  html, html.lenis { scroll-behavior: auto; }
  .aurora::before, .aurora::after { animation: none !important; will-change: auto; }
  /* Keep the requested colour-only effect, with a gentler cycle. */
  .gradient-text { background-size: 200% 100%; animation: wildcolour-type-gradient 8s linear infinite !important; }
  .site-header .logo { transition-duration: .45s, .65s !important; }
  .nav-links { transition-duration: .75s, .75s, .45s, .45s, 1s !important; }
  .nav-toggle { transition-duration: .65s, .35s, .35s, .35s !important; }
  .site-header.scrolled .nav-links { animation: nav-colour-flow 10s linear infinite !important; }
  .cta-banner { animation: cta-glow-pulse 4.8s ease-in-out infinite !important; }
  .cta-banner::after { animation: cta-edge-run 6s linear infinite !important; }
  .service-ticker-track { animation: service-ticker-run 52s linear infinite !important; }
  .reveal.pending, .service-card.reveal.pending { opacity: 1; transform: none; will-change: auto; }
  .btn::before, .service-card .card-link::before { content: none; }
  .btn:hover, .service-card.reveal.in:not(.pending):hover, .service-card:hover .service-art, .service-card:hover .card-link { transform: none; }
}