:root { color-scheme: dark; --gutter: clamp(24px, 4vw, 56px); --ink: #f2f2f2; --muted: #c4c4c4; --canvas: #020817; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: Outfit, system-ui, sans-serif; }
    a { color: inherit; }
    .stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--canvas); }
    .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: -3; }
    .bluewash { position: absolute; inset: 0; z-index: -2; background: #04142f; mix-blend-mode: screen; opacity: .72; pointer-events: none; }
    .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,2,10,.78) 0%, rgba(0,3,14,.46) 36%, rgba(0,0,0,.04) 66%), linear-gradient(0deg, rgba(0,2,10,.70), transparent 52%); }
    header { height: 44px; position: absolute; top: clamp(24px, 3vw, 38px); left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 3; }
    .brand { position: relative; width: 104px; height: 44px; color: white; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: #020817; font: 500 19px/1 Jost, sans-serif; letter-spacing: .16em; white-space: nowrap; }
    @property --orbit-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    .brand::before { content: ""; position: absolute; inset: -1px; padding: 1px; pointer-events: none; opacity: .82; background: conic-gradient(from var(--orbit-angle), #2356af 0deg, #507ccb 90deg, #5c35a7 180deg, #8172af 270deg, #2356af 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: border-orbit 20s linear infinite; }
    @keyframes border-orbit { to { --orbit-angle: 360deg; } }
    @media (prefers-reduced-motion: reduce) { .brand::before { animation: none; } }
    nav { display: flex; gap: 38px; align-items: center; }
    nav a { position: relative; color: rgba(255,255,255,.82); text-decoration: none; font-size: 12.5px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; transition: color .2s ease; }
    nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: .28em; bottom: -8px; height: 1px; background: linear-gradient(90deg, #507ccb, #8172af); transform: scaleX(0); transform-origin: left; opacity: .88; transition: transform .24s ease; }
    nav a:not(.nav-cta):hover { color: white; }
    nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
    .nav-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; background: white; color: #050505; text-decoration: none; border: 0; border-radius: 0; font-size: 13.5px; font-weight: 400; letter-spacing: .01em; text-transform: none; }
    .nav-cta:hover { color: #050505; }
    .copy { position: absolute; left: var(--gutter); bottom: clamp(164px, 20vh, 200px); width: min(700px, calc(100% - (2 * var(--gutter)))); z-index: 2; }
    .scope { margin: 0 0 22px; color: rgba(255,255,255,.72); font: 500 12px/1.3 "Geist Mono", monospace; }
    h1 { max-width: 710px; margin: 0; font-weight: 300; font-size: clamp(42px, 4.5vw, 66px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
    .sub { max-width: 610px; margin: 24px 0 0; color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; line-height: 1.58; letter-spacing: .005em; text-wrap: pretty; }
    .cta-icon { width: 22px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; color: #050505; }

    .cta-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: square; stroke-linejoin: miter; transition: transform .2s ease; }
    .nav-cta:hover .cta-icon svg { transform: translateX(2px); }
    .services { position: relative; padding: clamp(106px, 12vw, 166px) var(--gutter) clamp(116px, 13vw, 184px); overflow: hidden; border-top: 1px solid rgba(80,124,203,.20); background: linear-gradient(180deg, #020817 0%, #030a18 100%); }
    .services::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 16% 18%, rgba(80,124,203,.12), transparent 32%), radial-gradient(circle at 92% 62%, rgba(92,53,167,.08), transparent 34%); }
    .services-inner { position: relative; width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(150px,.52fr) minmax(0,1.48fr); gap: clamp(54px, 8vw, 132px); }
    .services-copy h2 { max-width: 760px; margin: 0; font-size: clamp(46px, 5vw, 74px); font-weight: 300; line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
    .services-lead { max-width: 760px; margin: 30px 0 0; color: rgba(242,242,242,.72); font-size: clamp(18px, 1.7vw, 24px); font-weight: 300; line-height: 1.52; letter-spacing: -.004em; text-wrap: pretty; }
    .service-list { margin-top: clamp(62px, 7vw, 96px); border-top: 1px solid rgba(255,255,255,.16); }
    .service-item { display: grid; grid-template-columns: minmax(170px,.58fr) minmax(0,1.42fr); gap: clamp(28px, 5vw, 76px); padding: 30px 0 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .service-title { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 300; line-height: 1.12; letter-spacing: -.01em; color: rgba(255,255,255,.96); }
    .service-detail p { margin: 0; color: rgba(242,242,242,.68); font-size: 16px; font-weight: 300; line-height: 1.62; text-wrap: pretty; }
    .service-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; padding: 0; list-style: none; }
    .service-tags li { color: rgba(242,242,242,.70); border: 1px solid rgba(143,174,228,.22); padding: 7px 10px; font: 400 10px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .services-note { max-width: 710px; margin: 34px 0 0; color: rgba(143,174,228,.86); font-size: 15px; font-weight: 300; line-height: 1.6; }
    .work { position: relative; padding: clamp(96px, 11vw, 148px) var(--gutter); border-top: 1px solid rgba(80,124,203,.16); background: #030a18; overflow: hidden; }
    .work::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(80,124,203,.08), transparent 42%), radial-gradient(circle at 82% 46%, rgba(129,114,175,.08), transparent 36%); }
    .work-inner { position: relative; width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(150px,.52fr) minmax(0,1.48fr); gap: clamp(54px, 8vw, 132px); }
    .work-copy { display: grid; grid-template-columns: minmax(0,.9fr) minmax(240px,.55fr); gap: clamp(34px, 6vw, 86px); align-items: start; }
    .work h2 { margin: 0; max-width: 660px; font-size: clamp(38px, 4.2vw, 64px); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
    .work p { margin: 24px 0 0; max-width: 650px; color: rgba(242,242,242,.68); font-size: clamp(17px, 1.45vw, 21px); font-weight: 300; line-height: 1.56; text-wrap: pretty; }
    .work-signal { margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(143,174,228,.84); font: 400 11px/1.7 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .approach { position: relative; min-height: 78svh; padding: clamp(104px, 12vw, 176px) var(--gutter); overflow: hidden; border-top: 1px solid rgba(80,124,203,.20); background: radial-gradient(circle at 82% 18%, rgba(80,124,203,.10), transparent 34%), radial-gradient(circle at 70% 78%, rgba(92,53,167,.07), transparent 32%), #030a18; }
    .approach-inner { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(150px,.52fr) minmax(0,1.48fr); gap: clamp(54px, 8vw, 132px); }
    .section-label { margin: 7px 0 0; color: #8faee4; font: 500 11px/1.3 "Geist Mono", monospace; letter-spacing: .13em; }
    .approach-copy h2 { max-width: 780px; margin: 0; font-size: clamp(48px, 5.2vw, 76px); font-weight: 300; line-height: .98; letter-spacing: -.025em; }
    .approach-lead { max-width: 850px; margin: 34px 0 0; color: rgba(242,242,242,.76); font-size: clamp(20px, 2vw, 27px); font-weight: 300; line-height: 1.48; letter-spacing: -.006em; text-wrap: pretty; }
    .principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; margin-top: clamp(70px, 8vw, 108px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
    .principle h3 { margin: 0 0 12px; font-size: 18px; font-weight: 400; letter-spacing: .01em; }
    .principle p { margin: 0; color: rgba(242,242,242,.60); font-size: 15px; font-weight: 300; line-height: 1.6; }
    @media (max-width: 760px) {
      nav > a:not(.nav-cta) { display: none; }
      :root { --gutter: 22px; }
      header { top: 22px; }
      .stage { height: auto; min-height: 100svh; }
      .art { object-position: 66% 50%; }
      .shade { background: linear-gradient(0deg, rgba(0,2,10,.97) 0%, rgba(0,3,14,.76) 53%, rgba(0,2,10,.10) 82%); }
      .copy { position: relative; left: auto; bottom: auto; width: auto; padding: 238px var(--gutter) 88px; }
      h1 { font-size: clamp(37px, 10.7vw, 48px); max-width: 560px; line-height: 1.01; }
      .sub { max-width: 520px; margin-top: 17px; font-size: 15.5px; line-height: 1.5; }
      .scope { margin-bottom: 15px; font-size: 10px; line-height: 1.45; }
      .brand { width: 90px; height: 38px; font-size: 16px; }
      .services { padding: 62px var(--gutter) 66px; }
      .services-inner { grid-template-columns: 1fr; gap: 22px; }
      .section-label { margin: 0; font-size: 10px; }
      .services-copy h2 { font-size: clamp(32px, 9.1vw, 42px); line-height: 1.04; }
      .services-lead { margin-top: 18px; font-size: 16px; line-height: 1.45; }
      .service-list { margin-top: 32px; }
      .service-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 19px; }
      .service-title { font-size: 20px; line-height: 1.12; }
      .service-detail p { font-size: 14px; line-height: 1.48; }
      .service-tags { display: none; }
      .services-note { margin-top: 22px; font-size: 14px; line-height: 1.5; }
      .work { padding: 64px var(--gutter); }
      .work-inner { grid-template-columns: 1fr; gap: 22px; }
      .work-copy { grid-template-columns: 1fr; gap: 22px; }
      .work h2 { font-size: clamp(32px, 9.5vw, 44px); line-height: 1.04; }
      .work p { margin-top: 20px; font-size: 16px; line-height: 1.5; }
      .work-signal { margin-top: 0; padding-top: 16px; font-size: 10px; }
      .approach { min-height: auto; padding: 70px var(--gutter) 78px; }
      .approach-inner { grid-template-columns: 1fr; gap: 22px; }
      .approach-copy h2 { font-size: clamp(34px, 9.8vw, 46px); line-height: 1.04; }
      .approach-lead { margin-top: 21px; font-size: 17px; line-height: 1.5; }
      .principles { grid-template-columns: 1fr; gap: 0; margin-top: 42px; padding-top: 0; border-top: 0; }
      .principle { padding: 21px 0 24px; border-top: 1px solid rgba(255,255,255,.16); }
    }

/* Wave depth: the image and its illuminated copies share one coordinate plane. */
.atmosphere { position: absolute; inset: -3%; z-index: -4; pointer-events: none; background: radial-gradient(ellipse at 76% 42%, rgba(45, 72, 143, .48), transparent 54%), radial-gradient(ellipse at 68% 22%, rgba(116, 55, 116, .25), transparent 40%), #020817; }
.wave-plane { position: absolute; inset: -24px; z-index: -3; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 34%, #000 94%, rgba(0,0,0,.9)); }
.wave-plane .art { z-index: 0; mix-blend-mode: screen; }
.wave-plane .bluewash { z-index: 1; }
.wave-plane .shade { z-index: 2; }
.wave-light { position: absolute; inset: 0; z-index: 3; background: url('../assets/studies/ascii-wave-quiet.png') 62% 50% / cover no-repeat; mix-blend-mode: screen; filter: brightness(3.8) saturate(1.25); opacity: 0; animation: wave-glimmer 7s ease-in-out infinite; }
.wave-light--crest { mask-image: radial-gradient(ellipse 18% 20% at 74% 30%, #000 0%, transparent 100%); }
.wave-light--curl { mask-image: radial-gradient(ellipse 12% 24% at 69% 57%, #000 0%, transparent 100%); animation-duration: 8.5s; animation-delay: -3s; }
.wave-light--base { mask-image: radial-gradient(ellipse 21% 14% at 72% 78%, #000 0%, transparent 100%); animation-duration: 10s; animation-delay: -6s; }
@keyframes wave-glimmer { 0%, 10%, 90%, 100% { opacity: .02; } 48% { opacity: .88; } }
.stage.is-paused .wave-light { animation-play-state: paused; }
@media (max-width: 760px) {
  .wave-plane { inset: 0; }
  .wave-light { background-position: 66% 50%; }
  .wave-light--crest { mask-image: radial-gradient(ellipse 34% 22% at 75% 28%, #000, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave-light { animation: none; opacity: 0; }
}