:root {
  color-scheme: dark;
  --space: #0d0d18;
  --surface: #151526;
  --ink: #f6f4ff;
  --muted: #bdbbd2;
  --line: #a9a5e031;
  --lavender: #c6b5ff;
  --mint: #9af0d8;
  --accent: var(--lavender);
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--space); color: var(--ink); font: 1rem/1.55 "Segoe UI", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { width: min(calc(100% - 6rem), 86rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 10; transform: translateY(-180%); background: var(--space); padding: .6rem 1rem; }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: #0e0e1b; }
.header-inner, .footer-inner { min-height: 4.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.brand { display: inline-flex; flex: 0 0 auto; width: 9.25rem; }
.brand img { width: 100%; height: auto; }
.primary-nav, .hero-actions { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.primary-nav, .text-link { font-size: .91rem; font-weight: 650; }
.primary-nav > a:first-child, .text-link { color: #d9d5ec; }
.primary-nav > a:first-child:hover, .text-link:hover { color: var(--mint); }
.button {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .65rem 1.12rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  font-weight: 720;
  line-height: 1.2;
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .3s ease;
}
.button span, .text-link span { transition: transform .26s var(--ease); }
.button:hover span, .text-link:hover span { transform: translate(2px, -2px); }
.button-small { min-height: 2.65rem; border-color: #a9a5e055; padding-inline: .85rem; }
.button-small:hover { background: #c6b5ff19; border-color: var(--lavender); }
.button-primary { color: #112620; background: var(--mint); box-shadow: 0 0 2.1rem #8ff3cd2c; }
.button-primary:hover { background: #c6ffe9; box-shadow: 0 0 2.45rem #8ff3cd51; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.text-link span { color: var(--mint); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 75% 44%, #252043 0%, transparent 49%),
    radial-gradient(ellipse at 93% 90%, #182938 0%, transparent 45%),
    radial-gradient(ellipse at 6% 88%, #24192c 0%, transparent 41%),
    #101020;
}
.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background: radial-gradient(circle, #aaa8e346 1px, transparent 1.15px) center / 27px 27px;
  mask-image: linear-gradient(100deg, #0003 8%, #000 74%, #0008);
}
.hero-field { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(1.6rem, 3.4vw, 4rem);
  min-height: clamp(30rem, 44vw, 43rem);
  padding-block: clamp(2.2rem, 4.6vw, 4.2rem);
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: .62rem;
  color: var(--lavender);
  font: 650 .71rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 1.1rem; }
.signal { flex: 0 0 .43rem; height: .43rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 .85rem #a6ffd8; }
h1, h2 { font-weight: 760; line-height: .95; letter-spacing: -.075em; }
h1 { font-size: clamp(3.1rem, 5.8vw, 6.5rem); line-height: 1.02; letter-spacing: -.065em; }
h2 { font-size: clamp(2.65rem, 5.1vw, 5rem); }
h1 em, h2 em { color: var(--lavender); font-style: normal; }
h1 em {
  display: inline-block;
  padding: 0 .09em .06em 0;
  background: linear-gradient(101deg, #b5a1ff 5%, #edb7f2 50%, #ffc1a1 98%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-summary { max-width: 38ch; margin-top: 1.15rem; color: #d0cce2; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero-actions { margin-top: 1.7rem; flex-wrap: wrap; }

.hero-world {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.27;
  min-width: 0;
  border: 1px solid #b0a2ee38;
  border-radius: 1.4rem;
  background: radial-gradient(ellipse at 50% 48%, #2b245e70, #18183112 57%, #11112186);
  box-shadow: inset 0 0 3.5rem #39356c35, 0 1.2rem 3.5rem #08081535;
}
.hero-world::before {
  position: absolute;
  z-index: -1;
  inset: 1rem;
  border-radius: .8rem;
  border: 1px solid #b0a2ee17;
  content: "";
  pointer-events: none;
}
.hero-art { position: absolute; inset: 8% 0; display: grid; place-items: center; container-type: size; pointer-events: none; }
/* Keep the SVG and its service links in the same coordinate space. */
.hero-constellation {
  --ribbon-travel: 1.25s;
  --coral-start: .16s;
  --ribbon-ease: cubic-bezier(.45, .02, .28, 1);
  position: relative;
  width: 100%;
  width: min(100%, calc(100cqh * 620 / 470));
  aspect-ratio: 620 / 470;
  transform: translate(var(--ribbon-x, 0), var(--ribbon-y, 0));
  transition: transform .7s var(--ease);
}
.hero-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ribbon-shape {
  filter: drop-shadow(0 10px 21px #ec87da42) drop-shadow(0 14px 13px #0a092a96);
}
.ribbon-pulse { opacity: 0; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .16 2; }
.orbit-spark { filter: drop-shadow(0 0 4px #a8fff0); }
.world-map { position: absolute; inset: 0; pointer-events: none; }
.world-pin {
  --pin-accent: #ffc1a1;
  --pin-stem: .8rem;
  --pin-stem-offset: 1.25rem;
  position: absolute;
  left: calc(var(--pin-inline) - var(--pin-stem-offset));
  bottom: calc(100% - var(--pin-y) + var(--pin-stem));
  display: inline-flex;
  align-items: center;
  gap: .55em;
  max-width: calc(50% - var(--pin-inline) + var(--pin-stem-offset) - .3rem);
  min-height: 44px;
  padding-inline: clamp(.55rem, 1.3vw, .9rem);
  border: 1px solid #c6b5ff55;
  border-radius: .65rem;
  background: #1a1830f2;
  color: #f5efff;
  box-shadow: 0 .4rem 1.2rem #0d0b2170;
  font-size: clamp(.78rem, 1.2vw, .95rem);
  font-weight: 650;
  pointer-events: auto;
  transition: border-color .2s ease, background-color .2s ease;
}
/* The stem positions match the outer edges of the four ribbon tips. */
.world-pin[data-project-service="web"] { --pin-inline: 13.55%; --pin-y: 26.81%; --pin-arrive: calc(var(--coral-start) + .1s); }
.world-pin[data-project-service="ai"] { --pin-inline: 12.74%; --pin-y: 25.53%; --pin-arrive: calc(var(--ribbon-travel) - .12s); }
.world-pin[data-project-service="cloud"] { --pin-inline: 15.32%; --pin-y: 77.23%; --pin-arrive: .1s; }
.world-pin[data-project-service="devops"] { --pin-inline: 14.35%; --pin-y: 77.45%; --pin-arrive: calc(var(--coral-start) + var(--ribbon-travel) - .12s); }
.world-pin:is([data-project-service="ai"], [data-project-service="devops"]) {
  left: auto;
  right: calc(var(--pin-inline) - var(--pin-stem-offset));
}
.world-pin:is([data-project-service="cloud"], [data-project-service="devops"]) {
  --pin-enter-y: -.4rem;
  top: calc(var(--pin-y) + var(--pin-stem));
  bottom: auto;
}
.world-pin:is([data-project-service="ai"], [data-project-service="cloud"]) { --pin-accent: var(--mint); }
.world-pin::before {
  content: "";
  flex: 0 0 auto;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--pin-accent);
  box-shadow: 0 0 .6rem var(--pin-accent);
}
.world-pin::after {
  content: "";
  position: absolute;
  left: var(--pin-stem-offset);
  top: 100%;
  width: 1px;
  height: var(--pin-stem);
  background: var(--pin-accent);
  opacity: .65;
  pointer-events: none;
}
.world-pin:is([data-project-service="ai"], [data-project-service="devops"])::after { left: auto; right: var(--pin-stem-offset); }
.world-pin:is([data-project-service="cloud"], [data-project-service="devops"])::after { top: auto; bottom: 100%; }
.world-pin span { color: var(--pin-accent); }
.world-pin:hover, .world-pin:focus-visible { border-color: var(--pin-accent); background: #302948; }
.motion-control {
  padding: .35rem .58rem;
  border: 1px solid #ada6d74b;
  border-radius: .4rem;
  background: #131325b8;
  color: #dedaf1;
  font-size: .72rem;
  line-height: 1.2;
  cursor: pointer;
}
.motion-control:hover { border-color: var(--lavender); }

.contact { overflow: clip; padding-block: clamp(3.7rem, 7.8vw, 7rem); border-top: 1px solid var(--line); background: radial-gradient(ellipse at 12% 85%, #192c38, transparent 64%), #121225; }
.contact-inner { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.contact-scene { min-width: 0; }
.contact h2 em { color: var(--mint); }
.contact-copy > p:last-child { margin-top: 1.2rem; }
.enquiry-form { position: relative; padding: clamp(1.15rem, 3.1vw, 2rem); border: 1px solid var(--line); border-radius: .95rem; background: #1b192e; }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-service, .field-details { grid-column: 1 / -1; }
.field { min-width: 0; }
.field label { display: block; margin-bottom: .32rem; font-size: .91rem; font-weight: 650; }
.field :is(input, select, textarea) { display: block; width: 100%; min-height: 2.9rem; padding: .58rem .7rem; border: 1px solid #8a82ab; border-radius: .42rem; color: var(--ink); background: #131222; }
.field textarea { resize: vertical; }
.field ::placeholder { color: #b4aecb; }
.field [aria-invalid="true"] { border-color: #ffa888; }
.enquiry-form .button { margin-top: 1.1rem; }
.preview-form-note { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.preview-form-note:empty { margin: 0; }
[data-worker-enquiry] button:disabled { opacity: .65; cursor: default; }
.form-notice { padding: .65rem .8rem; margin-bottom: 1rem; border: 1px solid #699f88; border-radius: .4rem; color: #cbf6df; background: #234738; }
.form-notice-error { color: #ffd5c7; background: #52322b; border-color: #bd795f; }
.errorlist { margin: .3rem 0 0; padding-left: 1.2rem; color: #ffd5c7; font-size: .9rem; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 5.5rem; color: var(--muted); font-size: .86rem; }
.footer-inner .brand { width: 7.5rem; }


.hero-world {
  aspect-ratio: 1.08;
  border-color: transparent;
  background: radial-gradient(ellipse at 52% 45%, #3e306c58, transparent 71%);
  box-shadow: 0 2rem 6rem #110b2a43;
}
.hero-art { inset: -8% -12%; }
.hero-world::before { border: 0; }
.art-caption { position: absolute; bottom: 1.65rem; left: 1.75rem; display: flex; align-items: center; gap: .5rem; color: #c3b8e4; font: 550 .62rem/1 var(--mono); letter-spacing: .14em; }
.art-caption span { width: .33rem; height: .33rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 .5rem var(--mint); }
.hero-actions .button { min-width: 8.8rem; }
.try-note { color: #d5cfe5; font-size: .88rem; }
.motion-control { position: absolute; right: 0; bottom: .78rem; }
.contact-copy > p:last-child { max-width: 37ch; color: var(--muted); }

@media (max-width: 64rem) {
  .shell { width: calc(100% - 3.5rem); }
  .hero-inner { min-height: 27rem; }
}
@media (max-width: 49rem) {
  .shell { width: calc(100% - 2.3rem); }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 2.8rem 3.05rem; gap: 1.55rem; }
  .hero-world { width: min(100%, 35rem); }
  h1 { font-size: clamp(3.25rem, 11vw, 6.15rem); }
  .hero-actions { margin-top: 1.25rem; }
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .contact { padding-block: 2.8rem 3.2rem; }
  .contact-inner { gap: 1.55rem; }
  .contact h2 { font-size: clamp(2.45rem, 8vw, 3.6rem); line-height: 1.02; }
  .enquiry-form .form-fields { grid-template-columns: 1fr; }
  .enquiry-form :is(input:not([type="hidden"]), select, textarea) { min-height: 48px; font-size: 1rem; }
  .enquiry-form .button { width: 100%; }
}
@media (max-width: 34rem) {
  .header-inner { min-height: 4.15rem; gap: .65rem; }
  .brand { width: 7rem; }
  .primary-nav { font-size: .8rem; }
  .button-small { min-height: 2.5rem; gap: .4rem; padding-inline: .6rem; }
  .hero-inner { padding-top: 2.25rem; }
  .hero-actions { gap: .75rem 1rem; }
  .hero-world { aspect-ratio: 1.26; }
  .hero-art { inset: 5% -7%; }
  .world-pin { --pin-stem: .55rem; --pin-stem-offset: 2.5rem; }
  .world-pin::before { display: none; }
  .art-caption { bottom: 1rem; left: 1.2rem; font-size: .52rem; }
  .form-fields { grid-template-columns: 1fr; }
  .footer-inner { flex-wrap: wrap; justify-content: flex-start; padding-block: 1rem; gap: .5rem 1rem; }
}
@media (max-width: 22rem) { h1 { font-size: 2.85rem; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy > * { animation: enter-up .85s var(--ease) backwards; }
  .hero-copy h1 { animation-delay: .1s; }
  .hero-summary { animation-delay: .18s; }
  .hero-actions { animation-delay: .25s; }
  .awaiting-reveal .ribbon-draw { stroke-dashoffset: 1.13; }
  .awaiting-reveal .world-pin:not(:focus-visible) { opacity: 0; pointer-events: none; }
  .is-revealing .ribbon-draw { animation: trace-ribbon var(--ribbon-travel) var(--ribbon-ease) both; }
  .is-revealing .ribbon-pulse { animation: ribbon-signal var(--ribbon-travel) var(--ribbon-ease) both; }
  .is-revealing :is(#coral-reveal .ribbon-draw, .ribbon-pulse-coral) { animation-delay: var(--coral-start); }
  .is-revealing .world-pin:not(:focus-visible) { animation: ribbon-pin-in .4s var(--pin-arrive) var(--ease) backwards; }
  .contact-scrubbing {
    --contact-fold: calc((1 - var(--contact-progress)) * (1 - var(--contact-progress)));
  }
  .contact:not(:focus-within) .contact-scrubbing > :is(.contact-copy, .enquiry-form) {
    opacity: min(1, calc(var(--contact-progress) * 2.4));
  }
  .contact:not(:focus-within) .contact-scrubbing .contact-copy {
    transform-origin: 0 50%;
    transform: perspective(900px) translateY(calc(25px * var(--contact-fold)))
      rotateX(calc(-25deg * var(--contact-fold)));
  }
  .contact:not(:focus-within) .contact-scrubbing .enquiry-form {
    --contact-pitch: -56deg;
    --contact-yaw: -17deg;
    --contact-roll: 3deg;
    --contact-offset: 38px;
    transform-origin: 50% 5%;
    transform: perspective(1100px)
      translate3d(calc(var(--contact-offset) * var(--contact-fold)), calc(46px * var(--contact-fold)), calc(-45px * var(--contact-fold)))
      rotateX(calc(var(--contact-pitch) * var(--contact-fold)))
      rotateY(calc(var(--contact-yaw) * var(--contact-fold)))
      rotateZ(calc(var(--contact-roll) * var(--contact-fold)));
  }
  .contact:not(:focus-within) .contact-scrubbing .enquiry-form::before {
    content: "";
    position: absolute;
    inset: -1px .85rem auto;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, #b5a1ff 24%, #9af0d8 62%, transparent);
    opacity: min(calc(var(--contact-progress) * 2), calc((1 - var(--contact-progress)) * 2));
    pointer-events: none;
    transform: scaleX(calc(.14 + var(--contact-progress) * .86));
  }
  @media (max-width: 49rem) {
    .contact:not(:focus-within) .contact-scrubbing .enquiry-form {
      --contact-pitch: -49deg;
      --contact-yaw: -5deg;
      --contact-roll: 1deg;
      --contact-offset: 0px;
    }
  }
  @keyframes trace-ribbon { from { stroke-dashoffset: 1.13; } to { stroke-dashoffset: 0; } }
  @keyframes ribbon-signal {
    from { stroke-dashoffset: .16; opacity: 0; }
    15%, 80% { opacity: .94; }
    to { stroke-dashoffset: -1; opacity: 0; }
  }
  @keyframes ribbon-pin-in {
    from { opacity: 0; transform: translateY(var(--pin-enter-y, .4rem)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes enter-up { from { opacity: .2; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}