@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/source-sans-pro-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/source-sans-pro-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --background: #000;
  --foreground: #fff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.28);
  --line-soft: rgba(255,255,255,.28);
  --page-height: 100vh;
  --max-width: 1400px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html {
  background: var(--background);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.shell {
  width: min(100%, calc(var(--max-width) + 2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site {
  position: relative;
  min-height: 100vh;
}

.site-header {
  position: relative;
  z-index: 3;
  padding-top: 28px;
}

.brand {
  display: block;
  width: clamp(245px, 20vw, 315px);
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  Reactive foreground layer.
  Applying difference to the full content groups is more reliable than applying
  it to individual text nodes, because the group itself blends directly with
  the blob underneath it. The logo/header intentionally remains normal white.
*/
.site > main,
.site > .site-footer {
  position: relative;
  z-index: 2;
  mix-blend-mode: difference;
}

.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-copy {
  max-width: 900px;
  padding-block: 70px;
}

.hero h1,
.legal h1 {
  margin: 0;
  font-size: 72px;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
}

.hero p {
  margin: 28px 0 0;
  max-width: 760px;
  font-size: 24px;
  line-height: 1.5;
}

/*
  Interactive type: white text stays white on black, but inverts/complements
  wherever the moving blob passes underneath it.
*/

.services-contact {
  position: relative;
  padding-bottom: 110px;
}

.section-divider {
  height: 1px;
  width: 100%;
  background: var(--line);
}

.services-contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.47fr);
  gap: clamp(70px,9vw,150px);
  padding-top: 42px;
}

.services h2,
.contact h2,
.legal-copy h2 {
  margin: 0 0 30px;
  font-size: 42px;
  line-height: 1.3;
  font-weight: 600;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.service-list li {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: baseline;
  gap: 18px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 24px;
  line-height: 1.35;
}

.service-number {
  color: var(--muted);
  font-size: 16px;
}

.contact p {
  margin: 0 0 28px;
  max-width: 360px;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 58px;
  max-width: 100%;
  padding: 10px 20px 12px;
  border: 2px solid #fff;
  border-radius: 35px;
  text-decoration: none;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.button-arrow {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1;
  opacity: 0.9;
  transform: translateY(-1px);
}

.button-arrow-css::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 4px;
  width: 13px;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}

.button-arrow-css::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

@media (hover:hover) and (pointer:fine) {
  .pill-button:hover {
    color: #000;
    background: #fff;
    transform: scale(1.025);
  }
}

.site-footer { padding-bottom: 28px; }

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding-top: 18px;
  color: var(--foreground);
  font-size: 24px;
  line-height: 1.5;
}

.footer-row nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-row a { text-decoration: none; }

/* =========================================================
   COLOR-FIELD BLOB
   Richer color, less grey/white, more differentiated inner movement.
   ========================================================= */

.blob-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--page-height);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  --blob-size: clamp(470px, 42vw, 680px);
  --field-blur: 7px;
  --trail-blur: 70px;
  --grain-opacity: .34;
  --blob-scale-x: 1;
  --blob-scale-y: 1;
  --blob-rotation: 0deg;
  --axis-rotation: 0deg;
  --inner-rotation: 0deg;
  --inner-shift-x: 0px;
  --inner-shift-y: 0px;

  position: absolute;
  left: 68vw;
  top: 47vh;
  width: var(--blob-size);
  aspect-ratio: 1;
  transform:
    translate3d(-50%,-50%,0)
    rotate(var(--blob-rotation))
    scale(var(--blob-scale-x), var(--blob-scale-y));
  transform-origin: center;
  isolation: isolate;
  will-change: left, top, transform;
}

.color-field,
.blob-trail,
.blob-center,
.blob-core-glow,
.blob-inner-sweep,
.blob-grain {
  position: absolute;
  pointer-events: none;
}

.color-field {
  border-radius: 50%;
  filter: blur(var(--field-blur));
  mix-blend-mode: screen;
  will-change: transform, filter, opacity, background;
}

.field-blue {
  width: 84%;
  height: 84%;
  left: 7%;
  top: 10%;
  background:
    radial-gradient(circle at 31% 50%,
      rgb(var(--blue-core, 96 220 246) / 1) 0 12%,
      rgb(var(--blue-mid, 60 170 244) / 1) 26%,
      rgb(var(--blue-soft, 53 109 232) / .74) 50%,
      transparent 74%);
}

.field-coral {
  width: 86%;
  height: 86%;
  left: 10%;
  top: 7%;
  background:
    radial-gradient(circle at 64% 38%,
      rgb(var(--coral-core, 255 103 58) / 1) 0 12%,
      rgb(var(--coral-mid, 255 134 38) / 1) 27%,
      rgb(var(--coral-soft, 255 84 48) / .68) 50%,
      transparent 74%);
}

.field-amber {
  width: 86%;
  height: 86%;
  left: 7%;
  top: 15%;
  background:
    radial-gradient(circle at 55% 70%,
      rgb(var(--amber-core, 255 202 31) / 1) 0 12%,
      rgb(var(--amber-mid, 255 163 18) / .98) 28%,
      rgb(var(--amber-soft, 255 123 26) / .64) 51%,
      transparent 75%);
}

.field-pink {
  width: 72%;
  height: 72%;
  left: 18%;
  top: 19%;
  background:
    radial-gradient(circle at 71% 71%,
      rgb(var(--pink-core, 246 76 184) / .92) 0 8%,
      rgb(var(--pink-mid, 196 69 220) / .80) 24%,
      rgb(var(--pink-soft, 103 67 230) / .42) 46%,
      transparent 71%);
}

.field-lime {
  width: 90%;
  height: 90%;
  left: 4%;
  top: 4%;
  background:
    radial-gradient(circle at 16% 56%,
      rgb(var(--lime-core, 204 238 116) / .50) 0 6%,
      rgb(var(--lime-mid, 159 223 132) / .36) 22%,
      rgb(var(--lime-soft, 90 195 168) / .16) 42%,
      transparent 69%);
}

.blob-center {
  left: 26%;
  top: 23%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 46%,
      rgba(255, 222, 195, .18) 0 20%,
      rgba(255, 203, 170, .12) 40%,
      rgba(255, 168, 131, .05) 58%,
      transparent 73%);
  filter: blur(4px);
  mix-blend-mode: screen;
}

.blob-core-glow {
  inset: 10%;
  border-radius: 50%;
  background:
    conic-gradient(from var(--axis-rotation),
      rgba(62, 193, 245, .24) 8deg,
      rgba(73, 133, 252, .16) 78deg,
      rgba(255, 171, 46, .22) 150deg,
      rgba(255, 98, 50, .24) 242deg,
      rgba(159, 76, 234, .16) 318deg,
      rgba(62, 193, 245, .24) 360deg);
  filter: blur(17px);
  opacity: .88;
  mix-blend-mode: screen;
  transform: rotate(var(--inner-rotation));
}

.blob-inner-sweep {
  inset: 18%;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--axis-rotation) * -0.7 + 40deg),
      rgba(89, 204, 255, .00) 0deg,
      rgba(89, 204, 255, .20) 56deg,
      rgba(255, 197, 48, .24) 150deg,
      rgba(255, 112, 44, .26) 228deg,
      rgba(240, 92, 186, .22) 282deg,
      rgba(89, 204, 255, .00) 360deg),
    radial-gradient(circle at 36% 44%, rgba(99, 203, 255, .18), transparent 36%),
    radial-gradient(circle at 66% 58%, rgba(255, 154, 48, .20), transparent 40%);
  filter: blur(13px);
  opacity: .86;
  mix-blend-mode: screen;
  transform: translate3d(var(--inner-shift-x), var(--inner-shift-y), 0) rotate(var(--inner-rotation));
}

.blob-trail {
  inset: 0%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, rgba(82, 212, 246, .38), transparent 43%),
    radial-gradient(circle at 67% 40%, rgba(255, 114, 52, .38), transparent 44%),
    radial-gradient(circle at 53% 73%, rgba(255, 188, 32, .32), transparent 46%),
    radial-gradient(circle at 71% 71%, rgba(147, 88, 235, .20), transparent 43%);
  filter: blur(var(--trail-blur));
  opacity: .78;
  mix-blend-mode: screen;
  transform-origin: center;
  will-change: transform, filter, opacity;
}

.blob-grain {
  inset: 7%;
  width: 86%;
  height: 86%;
  opacity: var(--grain-opacity);
  mix-blend-mode: soft-light;
}

.legal {
  padding-top: clamp(100px,12vw,180px);
  padding-bottom: 120px;
}

.back-link {
  display: inline-block;
  margin-bottom: 52px;
  color: var(--muted);
  font-size: 20px;
  text-decoration: none;
}

.legal h1 { margin-bottom: 62px; }
.legal-copy { max-width: 860px; font-size: 20px; line-height: 1.55; }
.legal-copy h2 { margin-top: 52px; margin-bottom: 12px; font-size: 28px; }
.legal-copy p { margin: 0 0 24px; }
.legal-copy a { text-underline-offset: 4px; }
.legal-status { color: var(--muted); }

@media (max-width: 1024px) {
  .blob { --blob-size: clamp(400px, 52vw, 580px); }
}

@media (max-width: 767px) {
  body { font-size: 20px; line-height: 1.3; }
  .site-header { padding-top: 22px; }
  .brand { width: clamp(215px,70vw,270px); }
  .hero { min-height: 84vh; }
  .hero-copy { padding-block: 70px 100px; }

  .hero h1,
  .legal h1 {
    font-size: 44px;
    line-height: 1.12;
  }

  .hero p { font-size: 20px; line-height: 1.3; }
  .desktop-break { display: none; }

  .services-contact-grid {
    grid-template-columns: 1fr;
    gap: 72px;
    padding-top: 32px;
  }

  .services h2,
  .contact h2,
  .legal-copy h2 {
    font-size: 28px;
  }

  .service-list li {
    grid-template-columns: 36px minmax(0,1fr);
    font-size: 20px;
  }

  .pill-button {
    width: 100%;
    font-size: 20px;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 20px;
  }

  .footer-row nav { gap: 20px; }

  .blob {
    --blob-size: clamp(330px, 84vw, 480px);
  }

  .legal-copy { font-size: 18px; }
  .legal-copy h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob {
    --field-blur: 12px;
    --trail-blur: 64px;
  }
}