/* Site chrome and shared components (every page).
   Order: base → components → header → hero → sections → work scenes → stages → navy sections → footer → responsive → preferences */

/* Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 520;
  letter-spacing: -.03em;
  line-height: 1.08;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 520;
  letter-spacing: -.025em;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #6f8fff;
  outline-offset: 4px;
  border-radius: 4px;
}

::selection {
  background: #cdd9ff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 8px;
  z-index: 60;
  box-shadow: 0 10px 30px #0002;
}

.skip:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Components ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent);
  flex: none;
}

.dot.is-signal {
  background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb,var(--blue) 65%,transparent),inset 0 1px 0 #ffffff33;
}

.primary:hover {
  background: var(--blue-deep);
}

.light {
  background: #fff;
  color: var(--ink);
}

.light:hover {
  background: var(--blue-wash);
}

.text-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: color .2s,gap .25s var(--ease);
}

.text-link:hover {
  gap: 14px;
}

.circle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 15px;
  flex: none;
  transition: background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease);
}

.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .72;
  white-space: nowrap;
}

/* Header + navigation ---------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  transition: transform .35s var(--ease);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: height .3s var(--ease);
}

.brand {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}

.main-nav {
  display: flex;
  gap: 4px;
  font-size: 14px;
}

.main-nav a {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: color .2s;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  opacity: .45;
  transition: transform .3s var(--ease),opacity .3s;
}

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

.main-nav a:hover::after {
  transform: scaleX(.4);
}

.main-nav a[aria-current]::after {
  transform: scaleX(1);
  opacity: 1;
}

.header.on-dark {
  color: #fff;
}

.header.on-dark .main-nav a:hover {
  color: #fff;
}

.header.on-dark .main-nav a::after {
  background: #9db4ff;
}

.nav-cta {
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px -10px color-mix(in srgb,var(--blue) 65%,transparent),inset 0 1px 0 #ffffff33;
  display: inline-flex;
  gap: 14px;
  transition: background .25s var(--ease),transform .25s var(--ease);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--blue-deep);
  transform: translateY(-2px);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mobile-menu {
  display: none;
  position: relative;
}

/* Home link: the name is the hero's centrepiece, so the pill carries no wordmark. The link stays for keyboard and
   screen-reader users, appearing as the first segment of the pill when focused. */
.home-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-link:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 8px 13px;
  font-size: 14px;
  border-radius: 999px;
}

/* One compact glass capsule, centred: the header's only state, at rest and when it returns on scroll-up. A lens layer blurs and refracts; a tint layer adds colour and a rim light. */
.header.is-hidden {
  transform: translateY(calc(-100% - 16px));
}

.header.is-scrolled .header-inner {
  width: max-content;
  max-width: calc(100% - 2*var(--gutter));
  height: 58px;
  margin: 12px auto 0;
  padding: 0 6px 0 8px;
  gap: 22px;
  justify-content: flex-start;
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--glass-line),0 18px 40px -22px #141c2b59;
  animation: glass-slide .35s var(--ease);
}

.header.is-scrolled .main-nav a {
  padding: 8px 13px;
}

.header.is-scrolled .main-nav a::after {
  left: 13px;
  right: 13px;
}

.header.on-dark.is-scrolled .header-inner {
  box-shadow: 0 18px 40px -22px #000;
}

.header.is-scrolled .header-inner::before,
.header.is-scrolled .header-inner::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

.header.is-scrolled .header-inner::before {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  filter: url(#glass-distortion);
}

.header.is-scrolled .header-inner::after {
  background: var(--glass-tint);
  box-shadow: var(--glass-rim);
}

.header.on-dark.is-scrolled .header-inner::after {
  background: var(--glass-tint-dark);
  box-shadow: var(--glass-rim-dark);
}

.header.is-scrolled .header-inner::before,
.header.is-scrolled .header-inner::after,
.header.is-scrolled .header-inner>* {
  animation: glass-fade .35s var(--ease);
}

.header:not(.is-scrolled) .header-inner {
  animation: nav-in .35s var(--ease);
}

@keyframes glass-slide {
  from {
    transform: translateY(-6px);
  }
}

@keyframes glass-fade {
  from {
    opacity: 0;
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Section headings ------------------------------------------------------- */
/* Centred on the hero's axis: the title, then one line beneath it. */
.section-heading {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 56px;
  text-align: center;
}

.section-heading>p {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  text-wrap: balance;
}

[data-reveal] .w {
  transition: opacity .3s linear;
}

/* Work scenes: art-directed cards ----------------------------------------
   Each card is a composed scene: project gradient, grain, a particle specimen
   telling that project's story, and real screens layered in front. */
.work {
  padding: 120px 0 130px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 22px;
}

.work-card {
  position: relative;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -40px #141c2b40;
  transition: transform .5s var(--ease),box-shadow .5s var(--ease);
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 70px -44px #141c2b70;
}

.work-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 30px;
  flex: 1;
}

.work-meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--accent-ink,var(--muted));
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-meta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent,var(--blue));
}

.work-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 560;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: 14px;
}

.work-desc {
  font-family: var(--display);
  font-size: clamp(19px,1.5vw,22px);
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-top: 10px;
  color: var(--ink-2);
  max-width: 30ch;
  text-wrap: pretty;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  color: var(--accent-ink,var(--muted));
}

.view-case {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  margin-top: auto;
  padding-top: 26px;
}

.work-card:hover .circle-arrow,
.work-card:focus-visible .circle-arrow {
  background: var(--accent,var(--blue));
  border-color: var(--accent,var(--blue));
  color: #fff;
  transform: rotate(-45deg);
}

/* The scene */
.scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 380px;
  flex: none;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .42;
  pointer-events: none;
  z-index: 0;
}

.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  transition: transform .8s var(--ease);
}

.scene .screen {
  position: absolute;
  z-index: 2;
  transition: transform .8s var(--ease),box-shadow .8s var(--ease);
}

.work-card:hover .scene .screen {
  transform: translate3d(0,-6px,0);
}

.work-card:hover .scene .screen.is-front {
  transform: translate3d(0,-10px,0);
}

/* CubieConnect: a bare UI export inside a drawn SVG phone, whole in the scene like the other cards' phones.
   The image is inset to the frame's screen cut-out (18,14 and 468×1000 in the SVG's 504×1028 viewBox). */
.scene .scene-phone {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  height: 86%;
  aspect-ratio: 504 / 1028;
  translate: -50% 0;
  filter: drop-shadow(0 24px 40px #00000080);
  transition: transform .8s var(--ease);
}

.scene-phone img {
  position: absolute;
  left: 3.571%;
  top: 1.362%;
  width: 92.857%;
  height: 97.276%;
  max-width: none;
  border-radius: 12.82% / 6%;
}

.scene-phone svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-card:hover .scene .scene-phone {
  transform: translate3d(0,-6px,0);
}

/* Too narrow to clear the badge beside it: the phone starts below the badge and runs off the bottom of the scene. */
.scene-cubieconnect {
  container-type: inline-size;
}

@container (max-width:450px) {
  .scene .scene-phone {
    top: 62px;
    height: 125%;
  }
}

/* Product-state motion plays only on hover or focus: a still frame, then the real recording. */
.screen .motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.work-card:is(:hover,:focus-visible) .screen .motion.is-ready {
  opacity: 1;
}

/* World scenes: each case study's card is a small entrance into its world (--world-* in tokens.css, a world-*
   specimen at data-world-view="card" composed around the screens). */
.scene[data-world] {
  background:
    radial-gradient(70% 90% at 88% 100%,rgba(var(--rgb-world-accent),.26) 0,transparent 65%),
    radial-gradient(55% 70% at 4% 0,rgba(var(--rgb-world-light),.08) 0,transparent 70%),
    var(--world-base);
}

.scene[data-world]::before {
  opacity: .22;
}

.scene[data-world] .screen {
  border-color: #ffffff1f;
  box-shadow: 0 40px 70px -36px #000000d0,0 0 0 1px #ffffff14;
}

.scene[data-world] .screen-phone {
  box-shadow: 0 0 0 5px #0b0f17,0 0 0 6px #ffffff2a,0 40px 70px -32px #000;
}

/* Biomarker: a centered trio sized by the scene's height, so it holds its proportions at every card width. */
.scene-biomarker .is-cutout {
  top: 17.5%;
  left: 50%;
  height: 69.5%;
  aspect-ratio: 1015 / 2000;
  translate: -50% 0;
}

.scene-biomarker .is-cutout.is-left {
  translate: -122% 0;
}

.scene-biomarker .is-cutout.is-right {
  translate: 22% 0;
}

.scene-biomarker .is-cutout.is-front {
  top: 7%;
  height: 84%;
}

/* A website card on the site's own background; a soft light glow lifts the shot off it. */
.scene-backdrop {
  background: #05060b;
}

.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-backdrop .screen {
  border: 0;
  background: #0a090f;
  border-radius: 10px;
  box-shadow: 0 0 16px 14px rgba(255,255,255,.1);
}

.scene-backdrop.is-light {
  background: #e4dcf8;
}

.scene-backdrop.is-light .screen {
  background: #fff;
  box-shadow: 0 0 16px 14px rgba(108,76,224,.22);
}

/* Featured: the flagship sits wholly in its world, its copy beside the scene. */
.work-card.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,38fr) minmax(0,62fr);
  min-height: 560px;
  background:
    radial-gradient(90% 120% at 0 100%,rgba(var(--rgb-world-accent),.12) 0,transparent 60%),
    var(--world-base);
  color: var(--world-ink);
  border: 0;
  box-shadow: 0 40px 80px -48px var(--world-base);
}

.work-card.is-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .28;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

.work-card.is-featured .work-copy {
  padding: 46px 44px 42px;
}

.work-card.is-featured .work-meta {
  color: var(--world-light);
}

.work-card.is-featured .work-title {
  font-size: clamp(36px,3.3vw,50px);
  margin-top: 26px;
}

.work-card.is-featured .work-desc {
  font-size: clamp(22px,1.9vw,28px);
  color: var(--world-ink);
}

.work-card.is-featured .work-summary {
  color: var(--world-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 420px;
}

.work-card.is-featured .circle-arrow {
  border-color: #ffffff5c;
}

.work-card.is-featured .scene {
  height: auto;
  min-height: 100%;
  background: transparent;
}

.work-card.is-featured .scene::before {
  opacity: 0;
}

/* Quiet tiles (coming soon, also shipped) */
.work-card.is-quiet {
  grid-column: span 4;
}

.work-card.is-quiet .scene {
  height: 210px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ffffffb8;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.badge .dot {
  animation: breathe 2.4s ease-in-out infinite;
}

/* In a world scene the badge's dot takes the card's own accent. */
.scene[data-world] .badge .dot {
  --blue: var(--accent);
}

@keyframes breathe {
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb,var(--blue) 8%,transparent);
  }
}

/* Screens ----------------------------------------------------------------- */
.screen {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #141c2b14;
  box-shadow: 0 30px 60px -36px #1b1f5c66,0 2px 6px -2px #141c2b14;
}

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

.screen-desktop {
  border-radius: 10px;
}

.screen-phone {
  border-radius: 13% / 6%;
  box-shadow: 0 0 0 5px #10151f,0 0 0 6px #3a4252,0 40px 70px -30px #0a1430b3;
  border: 0;
}

/* A phone export that carries its own device frame on transparency: no CSS frame, just a shadow that follows its shape. */
.screen.is-cutout,
.scene[data-world] .screen.is-cutout {
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 30px #00000059);
}

/* A dynamic island for phone shots exported without a device frame. */
.screen-phone.has-island::after {
  content: "";
  position: absolute;
  top: 1.4%;
  left: 50%;
  width: 26%;
  height: 3%;
  translate: -50% 0;
  border-radius: 999px;
  background: #05070b;
}

.screen-crop {
  position: relative;
  border-radius: var(--radius);
}

.screen-crop img {
  position: absolute;
  left: var(--crop-x);
  top: var(--crop-y);
  width: var(--crop-w);
  max-width: none;
}

.on-navy .screen,
.is-featured .screen {
  border-color: #ffffff1f;
  box-shadow: 0 50px 90px -40px #000000d0,0 0 0 1px #ffffff14;
}

.is-featured .screen-phone {
  box-shadow: 0 0 0 5px #0b0f17,0 0 0 6px #ffffff2a,0 50px 90px -40px #000;
}

/* Word rise + film type ----------------------------------------------------
   Rise (js/rise.js): each word slides up out of its own line mask once its root is .is-ready.
   Film: the title carries the same grain as the art: each word is filled with its ink plus noise blended inside
   the letters, shimmering like projected film, with halation, a faint colour fringe and a hair of softness.
   Grain lives on each word (.wi) so it survives the per-word rise; the filter lives on the title (or its strong).
   --film-ink and --film-halo tint it per page. */
.wm {
  display: inline-block;
  vertical-align: bottom;
  padding: .14em .06em .16em;
  margin: -.14em -.06em -.16em;
  clip-path: inset(-60% -40% 0 -40%);
}

.wi {
  display: inline-block;
}

.is-ready .wi {
  animation: word-rise 1s var(--ease-out) calc(var(--i) * 45ms + 120ms) both;
}

@keyframes word-rise {
  from {
    transform: translateY(115%);
  }
}

.film .wi {
  background-image: var(--grain),linear-gradient(var(--film-ink,#fff),var(--film-ink,#fff));
  background-size: 140px 140px,100% 100%;
  background-blend-mode: soft-light,normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Tight tracking lets the last glyph overhang its box; pad the painted area so no edge goes unfilled. */
  padding: 0 .1em .06em .06em;
  margin: 0 -.1em -.06em -.06em;
  animation: film-grain .75s steps(6) infinite;
}

.is-ready .film .wi {
  animation: word-rise 1s var(--ease-out) calc(var(--i) * 45ms + 120ms) both,film-grain .75s steps(6) infinite;
}

@keyframes film-grain {
  to {
    background-position: 140px 70px,0 0;
  }
}

.film strong,
.film.is-glow {
  filter: blur(.25px) drop-shadow(0 0 .14em var(--film-halo,rgba(170,190,255,.32))) drop-shadow(-.6px 0 rgba(255,130,120,.2)) drop-shadow(.6px 0 rgba(120,160,255,.22));
}

.film strong {
  display: inline-block;
}

@media (forced-colors:active) {
  .film .wi {
    background: none;
    color: CanvasText;
  }
  .film strong,
  .film.is-glow {
    filter: none;
  }
}

@media print {
  .film .wi {
    background: none;
    color: #000;
    animation: none!important;
  }
  .film strong,
  .film.is-glow {
    filter: none;
  }
}

/* Navy sections + unfold ------------------------------------------------- */
.navy {
  position: relative;
  overflow: clip;
  background: var(--navy);
  color: var(--on-dark);
  isolation: isolate;
}

.navy::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .22;
  pointer-events: none;
  z-index: -1;
}

.navy .eyebrow {
  color: #93a6c6;
}

.navy-glow {
  position: absolute;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(closest-side,color-mix(in srgb,var(--blue) 30%,transparent),transparent);
}

:root {
  --unfold-radius: 40px;
}

[data-unfold] {
  transform: scale(calc(.9 + .1 * var(--unfold,1)));
  transform-origin: top center;
  border-radius: calc((1 - var(--unfold,1)) * var(--unfold-radius));
}

[data-unfold-phase="leave"] {
  transform-origin: bottom center;
}

/* Contact + footer ------------------------------------------------------- */
.contact {
  padding: 150px 0 0;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 64px;
  align-items: end;
}

.contact h2 {
  font-size: clamp(48px,6.4vw,104px);
  letter-spacing: -.045em;
  line-height: .98;
}

.contact h2 .muted {
  color: #7f8fb0;
  font-weight: var(--display-light);
}

.contact-copy p {
  color: var(--on-dark-muted);
  font-size: var(--fs-lead);
  line-height: 1.7;
  max-width: 30em;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.copy-email {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 22px;
  border-radius: 999px;
  border: 1px solid #ffffff26;
  background: #ffffff0d;
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  transition: background .25s var(--ease),border-color .25s;
}

.copy-email:hover {
  background: #ffffff17;
  border-color: #ffffff40;
}

/* The remnant's rim: the nav CTA's supernova light, turning faster. */
.copy-email::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 999px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--cta-angle,0deg),#6080ff,#a888ff,#ff86b0,#ffaa7a,#a888ff,#6080ff);
  -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 exclude,linear-gradient(#000 0 0);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(190,160,255,.8)) brightness(1.2);
  animation: cta-rim 6s linear infinite;
  transition: opacity .5s var(--ease);
}

.copy-email.is-copied::after {
  opacity: 1;
}

.copy-email .copy-state {
  position: relative;
  z-index: 1;
  min-width: 68px;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff1a;
  transition: background .3s var(--ease),color .3s var(--ease),box-shadow .5s var(--ease);
}

.copy-email.is-copied .copy-state {
  background: linear-gradient(100deg,#8aa4ff,#bba4ff 45%,#ffa3c4 78%,#ffbf96);
  color: #0b1226;
  box-shadow: 0 0 18px rgba(168,136,255,.6),0 0 5px rgba(255,170,122,.45);
}

.nova-flash,
.nova-ring,
.burst {
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.nova-flash {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(closest-side,#fff 0,#d8ccff 28%,rgba(168,136,255,.5) 55%,transparent 100%);
  mix-blend-mode: screen;
}

.nova-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(#6080ff,#a888ff,#ff86b0,#ffaa7a,#a888ff,#6080ff);
  -webkit-mask: radial-gradient(closest-side,transparent 90%,#000 93%,#000 100%);
  mask: radial-gradient(closest-side,transparent 90%,#000 93%,#000 100%);
}

.burst {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--c,#a888ff);
  box-shadow: 0 0 6px var(--c,#a888ff);
}

@media (prefers-reduced-motion:reduce) {
  .copy-email::after {
    animation: none;
  }
}

@media (prefers-contrast:more),(forced-colors:active) {
  .copy-email::after {
    display: none;
  }
  .copy-email.is-copied .copy-state {
    background: #fff;
    color: #0b1226;
    box-shadow: none;
  }
}

.footer {
  margin-top: 130px;
  padding: 26px 0 34px;
  border-top: 1px solid #ffffff17;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: #8796b2;
}

.footer a:hover {
  color: #fff;
}

.footer nav {
  display: flex;
  gap: 22px;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width:1100px) {
  .work-grid>.work-card[style*="span"] {
    grid-column: span 6!important;
  }
  .work-card.is-featured {
    grid-template-columns: 1fr;
  }
  .work-card.is-featured .scene {
    order: -1;
    min-height: 420px;
  }
}

@media (max-width:900px) {
  .header-inner {
    height: 72px;
  }
  .main-nav,
  .main-nav {
    display: none;
  }
  .header-right .nav-cta {
    padding: 10px 16px;
  }
  .mobile-menu {
    display: block;
  }
  .header.is-scrolled .header-inner {
    margin: 12px auto 0;
    padding: 0 6px;
    height: 54px;
    justify-content: center;
  }
  .header-right {
    gap: 4px;
  }
  /* On phones the pill holds a hamburger (left) and the call to action (right), matching the desktop order. */
  .header.is-scrolled .header-inner {
    padding-left: 4px;
  }
  .mobile-menu summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background .25s var(--ease);
  }
  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }
  .mobile-menu summary:hover,
  .mobile-menu[open] summary {
    background: var(--bg-2);
  }
  .header.on-dark .mobile-menu summary:hover,
  .header.on-dark .mobile-menu[open] summary {
    background: #ffffff1a;
  }
  .burger {
    width: 18px;
    height: 12px;
    overflow: visible;
  }
  .burger line {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: 9px 6px;
    transition: transform .3s var(--ease);
  }
  .mobile-menu[open] .burger line:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .mobile-menu[open] .burger line:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  /* The menu is the same glass as the pill: a refracting lens beneath, a tint and rim light on top. */
  .mobile-menu nav {
    position: absolute;
    left: -4px;
    top: calc(100% + 14px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 20px;
    isolation: isolate;
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--glass-line),0 24px 50px -24px #141c2b66;
    animation: rise .25s var(--ease);
  }
  .mobile-menu nav::before,
  .mobile-menu nav::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
  }
  .mobile-menu nav::before {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    filter: url(#glass-distortion);
  }
  .mobile-menu nav::after {
    background: #ffffffb8;
    box-shadow: var(--glass-rim);
  }
  .header.on-dark .mobile-menu nav {
    color: #fff;
    box-shadow: 0 0 0 1px #ffffff1f,0 24px 50px -24px #000;
  }
  .header.on-dark .mobile-menu nav::after {
    background: rgba(14,23,41,.72);
    box-shadow: var(--glass-rim-dark);
  }
  .mobile-menu nav a {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 17px;
    font-family: var(--display);
    font-weight: 520;
    letter-spacing: -.01em;
    transition: background .2s;
  }
  .mobile-menu nav a:is(:hover,:focus-visible) {
    background: #141c2b0d;
  }
  .header.on-dark .mobile-menu nav a:is(:hover,:focus-visible) {
    background: #ffffff14;
  }
  .section-heading {
    gap: 12px;
    margin-bottom: 36px;
  }
  .work {
    padding: 80px 0 90px;
  }
  .work-card,
  .work-card.is-quiet,
  .work-grid>.work-card[style*="span"] {
    grid-column: 1 / -1!important;
  }
  .scene {
    height: 300px;
  }
  .work-card.is-featured .scene {
    min-height: 330px;
  }
  .work-card.is-featured .work-copy,
  .work-copy {
    padding: 26px 22px 26px;
  }
  .contact {
    padding-top: 100px;
  }
  .work-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .contact-inner {
    grid-template-columns: minmax(0,1fr);
    gap: 30px;
  }
  .footer {
    flex-direction: column;
    margin-top: 80px;
  }
  :root {
    --unfold-radius: 24px;
  }
}

/* Preferences ------------------------------------------------------------ */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
  .header.is-scrolled .header-inner::before,
  .mobile-menu nav::before {
    display: none;
  }
  .mobile-menu nav::after {
    background: #fff;
  }
  .header.on-dark .mobile-menu nav::after {
    background: var(--navy);
  }
  .header.is-scrolled .header-inner::after {
    background: #fff;
  }
  .header.on-dark.is-scrolled .header-inner::after {
    background: var(--navy);
  }
}

@media (prefers-reduced-motion:reduce) {
  .wi,
  .is-ready .wi,
  .is-ready .film .wi {
    animation: none!important;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .001ms!important;
  }
  [data-unfold] {
    transform: none;
    border-radius: 0;
  }
}

@media (forced-colors:active) {
  .scene-art,
  .hero-canvas {
    display: none;
  }
}

/* Small phones: the cards keep their height while shots shrink with the width, so each is recomposed. !important
   outranks the desktop positions set inline on the shots. The Patient Portal and Wanda cards hit the same problem in
   the narrow two-column grid. */
@media (max-width:480px) {
  .scene-flow .screen-desktop {
    left: 5%!important;
    top: 14%!important;
    width: 82%!important;
  }
  .scene-flow .is-front {
    right: 4%!important;
    bottom: 8%!important;
    width: 50%!important;
  }
}

@media (max-width:480px),(min-width:901px) and (max-width:1100px) {
  .scene-cubie .screen-desktop:not(.is-front) {
    left: 5%!important;
    top: 13%!important;
    width: 84%!important;
  }
  .scene-cubie .is-front {
    right: 4%!important;
    bottom: 9%!important;
    width: 48%!important;
  }
  .scene-wanda .screen-desktop {
    left: 5%!important;
    top: 27%!important;
    width: 68%!important;
  }
  .scene-wanda .is-front {
    left: 68%!important;
    top: 22%!important;
    width: 23%!important;
  }
}

@media (max-width:360px) {
  .scene-flow .is-front {
    bottom: 14%!important;
  }
  .scene-cubie .is-front {
    bottom: 16%!important;
  }
}

/* Single-column tablets: full-width cards scale their height with their width, restoring each designed composition. */
@media (min-width:481px) and (max-width:900px) {
  .work-card .scene,
  .work-card.is-quiet .scene,
  .work-card.is-featured .scene {
    height: auto;
    min-height: 0;
    aspect-ratio: 12 / 7;
  }
  .work-card .scene-cubie {
    aspect-ratio: 8 / 5;
  }
}

/* Stacked flagship card: the shots are centred and whole, rather than placed for the desktop side-by-side layout. */
@media (min-width:481px) and (max-width:1100px) {
  .work-card.is-featured .scene {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .scene-flow .screen-desktop {
    left: 9%!important;
    top: 9%!important;
    width: 66%!important;
  }
  .scene-flow .is-front {
    right: 9%!important;
    bottom: 12%!important;
    width: 40%!important;
  }
}

/* Narrow two-column cards: the height is fixed while shots scale, so positions follow the card's width (cqw). */
@media (min-width:901px) and (max-width:1100px) {
  .scene-wanda {
    container-type: inline-size;
  }
  .scene-wanda .screen-desktop {
    top: calc(50% - 21.1cqw)!important;
  }
  .scene-wanda .is-front {
    top: calc(50% - 25.6cqw)!important;
  }
}

@media (min-width:1101px) and (max-width:1279px) {
  .scene-cubie,
  .scene-wanda {
    container-type: inline-size;
  }
  .scene-cubie .is-front {
    top: calc(14% + 33cqw)!important;
    bottom: auto!important;
  }
  .scene-wanda .screen-desktop {
    top: calc(50% - 19.9cqw)!important;
  }
  .scene-wanda .is-front {
    top: calc(50% - 18.9cqw)!important;
  }
}

/* Two-column Patient Portal card: equal margins either side of the pair of shots. */
@media (min-width:1101px) {
  .scene-cubie .screen-desktop:not(.is-front) {
    left: 9%!important;
    width: 78%!important;
  }
  .scene-cubie .is-front {
    right: 9%!important;
  }
}

/* Very small phones: the address and chip can't share a line, so they stack inside the button. */
@media (max-width:350px) {
  .copy-email {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 22px;
    text-align: center;
  }
  .copy-email::after {
    border-radius: 22px;
  }
}

/* Nav CTA: a glass pill with a fine rim of supernova light ------------------------
   The rim carries the remnant's colours (cool to warm) and turns slowly, like the avatar's.
   The CTA inside the mobile menu stays solid. */
.header-right>.nav-cta {
  position: relative;
  isolation: isolate;
  background: #ffffffa6;
  color: var(--ink);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  backdrop-filter: blur(8px) saturate(1.5);
  box-shadow: var(--glass-rim),0 0 0 1px #141c2b14;
  transition: transform .25s var(--ease),color .25s;
}

.header.on-dark .header-right>.nav-cta {
  background: #ffffff17;
  color: #fff;
  box-shadow: var(--glass-rim-dark),0 0 0 1px #ffffff26;
}

.header-right>.nav-cta:hover {
  background: #ffffffc4;
}

.header.on-dark .header-right>.nav-cta:hover {
  background: #ffffff24;
}

.header-right>.nav-cta::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 999px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--cta-angle,0deg),#6080ff,#a888ff,#ff86b0,#ffaa7a,#a888ff,#6080ff);
  -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 exclude,linear-gradient(#000 0 0);
  opacity: .5;
  filter: drop-shadow(0 0 3px rgba(170,140,255,.5));
  animation: cta-rim 30s linear infinite;
  transition: opacity .35s var(--ease),filter .35s var(--ease);
}

.header.on-dark .header-right>.nav-cta::after {
  opacity: .9;
}

@property --cta-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes cta-rim {
  to {
    --cta-angle: 360deg;
  }
}

.header-right>.nav-cta:is(:hover,:focus-visible)::after {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(190,160,255,.8)) brightness(1.25);
}

@media (prefers-reduced-motion:reduce) {
  .header-right>.nav-cta::after {
    animation: none;
  }
}

@media (prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
  .header-right>.nav-cta,
  .header.on-dark .header-right>.nav-cta {
    background: var(--blue);
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header-right>.nav-cta::after {
    display: none;
  }
}