/* ── base.css ── */
/* KLVR base: tokens, nav, hero, sections and responsive rules. Moved out of index.html on
   23 September 2026 so the case study pages share it; loaded first, exactly where the inline
   block used to sit, so the cascade is unchanged. */
/* §00 · TOKENS */
:root {
  --paper: #f5f2eb;
  --paper-deep: #e9e4da;
  --ink: #0b0b0d;
  --ink-soft: #232328;
  --line: rgba(11,11,13,.14);
  --blue: #245cff;
  --coral: #ff7158;
  --violet: #8a5cff;
  --acid: #c7ff30;
  --serif: "Bodoni Moda", "Bodoni Moda Fallback", Georgia, serif;
  --sans: "Manrope", "Manrope Fallback", Arial, sans-serif;
  --gutter: clamp(1rem, 3vw, 3rem);
  --radius: 1.5rem;
  --ease: cubic-bezier(.22,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  min-width: 320px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* §01 · NAV */
.nav {
  position: relative;
  z-index: 20;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.mark {
  font-weight: 800;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -.12em;
  line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.2rem); font-size: .82rem; font-weight: 600; }
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.45rem;
  height: 2px;
  background: var(--ink);
  transition: right .3s var(--ease);
}
.nav-links a:hover::after { right: 0; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: .7rem; }
.button {
  min-height: 2.85rem;
  padding: 0 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-size: .78rem;
  font-weight: 700;
  transition: transform .3s var(--ease), background .3s ease, color .3s ease;
}
.button:hover { transform: translateY(-2px); }
.button.dark { background: var(--ink); color: white; }
.button.light { background: rgba(255,255,255,.5); }
.menu { width: 2.85rem; padding: 0; background: transparent; }
.menu-lines { width: 1rem; display: grid; gap: 4px; }
.menu-lines i { display: block; height: 1px; background: currentColor; }

/* §02 · HERO */
.hero {
  position: relative;
  min-height: calc(100svh - 5.25rem);
  padding: clamp(2.2rem, 5vw, 4.6rem) var(--gutter) clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  align-content: start;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.88), transparent 36%),
    var(--paper);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 32%;
  width: 32vw;
  height: 24vw;
  max-height: 24rem;
  filter: blur(44px);
  opacity: .12;
  z-index: -1;
}
.hero::before { left: -12%; background: var(--coral); }
.hero::after { right: -12%; background: var(--blue); }
.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
  font-size: .64rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
.hero-kicker span:last-child { text-align: right; }
.hero-lockup { text-align: center; position: relative; z-index: 4; }
.hero-mark {
  margin: 0;
  font-size: clamp(5.2rem, 13vw, 12rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.13em;
  transform: scaleX(1.04);
  transform-origin: center;
}
.hero-title {
  max-width: 78rem;
  margin: clamp(1rem, 2.4vw, 2rem) auto 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.2vw, 5.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.hero-stage {
  position: relative;
  height: clamp(21rem, 34vw, 33rem);
  max-width: 96rem;
  width: 100%;
  margin: clamp(-.5rem, -1vw, -1rem) auto 0;
  perspective: 1200px;
  z-index: 3;
}
.fan {
  position: absolute;
  inset: 1.8rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.scene {
  --x: 0px;
  --r: 0deg;
  --z: 0px;
  --y: 0px;
  position: absolute;
  width: clamp(10.5rem, 16vw, 15rem);
  aspect-ratio: .66;
  padding: .65rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: clamp(1rem, 1.8vw, 1.55rem);
  color: white;
  background: #101013;
  box-shadow: 0 1.7rem 4rem rgba(16,15,18,.24);
  transform: translate3d(var(--x),var(--y),var(--z)) rotateY(var(--r));
  transition: transform 1.1s var(--ease), filter .4s ease;
  animation: arrive 1.1s var(--ease) both;
}
.scene:nth-child(1) { --x: -31rem; --r: 19deg; --z: -120px; --y: 2rem; animation-delay: .08s; }
.scene:nth-child(2) { --x: -21rem; --r: 14deg; --z: -70px; --y: .7rem; animation-delay: .16s; }
.scene:nth-child(3) { --x: -11rem; --r: 8deg; --z: -30px; --y: -.2rem; animation-delay: .24s; }
.scene:nth-child(4) { --x: 0rem; --r: 0deg; --z: 35px; --y: -1rem; animation-delay: .32s; }
.scene:nth-child(5) { --x: 11rem; --r: -8deg; --z: -30px; --y: -.2rem; animation-delay: .4s; }
.scene:nth-child(6) { --x: 21rem; --r: -14deg; --z: -70px; --y: .7rem; animation-delay: .48s; }
.scene:nth-child(7) { --x: 31rem; --r: -19deg; --z: -120px; --y: 2rem; animation-delay: .56s; }
@keyframes arrive {
  from { opacity: 0; transform: translate3d(calc(var(--x) * .35),5rem,-180px) rotateY(calc(var(--r) * .2)); }
  to { opacity: 1; transform: translate3d(var(--x),var(--y),var(--z)) rotateY(var(--r)); }
}
.scene-top { display: flex; justify-content: space-between; align-items: center; font-size: .42rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dots { display: flex; gap: 3px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.42); }
.scene-screen {
  position: relative;
  height: calc(100% - 1.2rem);
  margin-top: .55rem;
  border-radius: .9rem;
  overflow: hidden;
  background: linear-gradient(160deg, #15151a, #09090b);
  padding: .8rem;
}
.scene-label { font-family: var(--serif); font-size: clamp(.95rem, 1.5vw, 1.35rem); line-height: 1.05; }
.scene-meta { margin-top: .4rem; font-size: .42rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.scene-visual { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; height: 57%; border-radius: .7rem; overflow: hidden; }
.booking .scene-visual { background: linear-gradient(145deg, #36363d, #121216); display: grid; grid-template-columns: repeat(3,1fr); gap: .3rem; padding: .6rem; align-content: end; }
.booking .scene-visual i { height: 1.15rem; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; }
.menu-card .scene-screen { background: linear-gradient(155deg, #3b1c10, #100b08); }
.menu-card .scene-visual { background: radial-gradient(circle at 54% 42%, #f2a45c, transparent 14%), radial-gradient(circle at 52% 48%, #6f8a3a, transparent 29%), radial-gradient(circle at 50% 45%, #d7b585 0 43%, #765337 44% 50%, #17100c 51%); }
.music .scene-screen { background: linear-gradient(155deg, #3a1671, #10061f); }
.music .scene-visual { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #925fff, #251142 48%, #0a0710 72%); }
.wave { width: 82%; height: 32%; background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.85) 4px 6px); mask-image: linear-gradient(to bottom, transparent, black 25% 75%, transparent); }
.property .scene-screen { background: linear-gradient(160deg, #d9dfe6 0 50%, #eff2f6 50%); color: var(--ink); }
.property .scene-visual { background: linear-gradient(145deg, transparent 0 38%, #9bb0c1 39% 47%, #d9d5c9 48% 100%); border: 1px solid rgba(0,0,0,.08); }
.gallery .scene-screen { background: #e9e5de; color: var(--ink); }
.gallery .scene-visual { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.gallery .scene-visual i:nth-child(1) { background: linear-gradient(145deg,#1c2230,#8298b0); }
.gallery .scene-visual i:nth-child(2) { background: linear-gradient(145deg,#65594a,#e1c9a3); }
.gallery .scene-visual i:nth-child(3) { background: linear-gradient(145deg,#73483f,#e99c6e); }
.gallery .scene-visual i:nth-child(4) { background: linear-gradient(145deg,#18231d,#8ca66d); }
.shop .scene-screen { background: linear-gradient(150deg, #d4ff3e, #efffb6); color: var(--ink); }
.shop .scene-visual { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.shop .scene-visual i { background: rgba(255,255,255,.75); border-radius: .55rem; }
.phone .scene-screen { background: radial-gradient(circle at 50% 45%, #245cff, #141628 34%, #09090d 62%); }
.phone .scene-visual { display: grid; place-items: end center; padding-bottom: .8rem; background: radial-gradient(circle at 50% 28%, rgba(80,131,255,.9), transparent 22%); }
.call-row { display: flex; gap: .55rem; }
.call-row i { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: rgba(255,255,255,.18); }
.call-row i:nth-child(2) { background: #ff4b4b; }

.outcomes {
  position: relative;
  z-index: 8;
  justify-self: center;
  max-width: 100%;
  padding: .78rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
  font-size: clamp(.54rem, .75vw, .72rem);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
}
.hero-actions { position: relative; z-index: 8; display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* §03 · NEXT CHAPTER */
.chapter {
  min-height: 75svh;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  color: white;
  background: var(--ink);
  border-radius: 2rem 2rem 0 0;
  position: relative;
  z-index: 5;
}
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .75fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.eyebrow { margin: 0 0 1.25rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.chapter h2 { max-width: 13ch; margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 7.8rem); font-weight: 400; line-height: .93; letter-spacing: -.055em; text-transform: uppercase; }
.chapter-copy { max-width: 34rem; padding-top: 3rem; }
.chapter-copy p { margin: 0; font-size: clamp(1.05rem, 1.65vw, 1.4rem); line-height: 1.55; color: rgba(255,255,255,.72); }
.tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-top: clamp(4rem, 8vw, 8rem); }
.tile { min-height: 11rem; padding: 1rem; border-radius: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); transform: translateY(var(--lift,0)); }
.tile:nth-child(1) { background: var(--acid); --lift: 0; }
.tile:nth-child(2) { background: var(--violet); color: white; --lift: 2.3rem; }
.tile:nth-child(3) { background: var(--coral); --lift: .6rem; }
.tile:nth-child(4) { background: var(--blue); color: white; --lift: 3rem; }
.tile span { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.tile strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2.5vw, 2.35rem); line-height: 1; }

/* §04 · OFFERS */
.section { padding: clamp(5.5rem, 10vw, 10rem) var(--gutter); }
.section-head { display: grid; grid-template-columns: minmax(0,.85fr) minmax(18rem,.55fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-head .eyebrow { color: rgba(11,11,13,.48); }
.section-title { max-width: 12ch; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 400; line-height: .92; letter-spacing: -.055em; text-transform: uppercase; }
.section-intro { margin: 0; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.6; color: rgba(11,11,13,.65); }
.package-grid { display: grid; grid-template-columns: repeat(12,1fr); border-top: 1px solid var(--line); }
.package {
  grid-column: span 4;
  min-height: 30rem;
  padding: clamp(1.3rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}
.package:nth-child(3n+1) { border-left: 1px solid var(--line); }
.package:hover { transform: translateY(-.4rem); z-index: 2; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.11); }
.package:nth-child(1):hover { background: var(--acid); }
.package:nth-child(2):hover { background: var(--coral); }
.package:nth-child(3):hover { background: var(--violet); color: white; }
.package:nth-child(4):hover { background: var(--blue); color: white; }
.package:nth-child(5):hover { background: var(--ink); color: white; }
.package-no { font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; opacity: .55; }
.package h3 { margin: 2.5rem 0 .75rem; font-family: var(--serif); font-size: clamp(2.1rem, 3.6vw, 3.7rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.package p { margin: 0; max-width: 30rem; font-size: .92rem; line-height: 1.65; opacity: .68; }
.package-price { margin-top: auto; padding-top: 2.5rem; display: flex; align-items: baseline; gap: .45rem; }
.package-price strong { font-size: clamp(2.35rem, 4.5vw, 4.7rem); letter-spacing: -.065em; line-height: .85; }
.package-price span { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; opacity: .55; }
.package-link { margin-top: 1.25rem; display: inline-flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid currentColor; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .78; }
.package.custom { grid-column: span 8; }
.package.custom::after { content: "KLVR"; position: absolute; right: -1rem; top: 1rem; font-size: clamp(6rem,14vw,15rem); font-weight: 800; letter-spacing: -.14em; opacity: .035; pointer-events: none; }
.scope-note { margin-top: 2rem; max-width: 66rem; font-size: .76rem; line-height: 1.6; color: rgba(11,11,13,.52); }

/* §05 · COMMERCE */
.commerce { position: relative; min-height: 100svh; padding: clamp(5rem,9vw,8rem) var(--gutter); color: white; background: #14101f; overflow: hidden; }
.commerce::before { content: ""; position: absolute; width: 70vw; height: 70vw; left: -32vw; top: -22vw; border-radius: 50%; background: var(--violet); filter: blur(8rem); opacity: .22; }
.commerce::after { content: ""; position: absolute; width: 58vw; height: 58vw; right: -28vw; bottom: -28vw; border-radius: 50%; background: var(--blue); filter: blur(8rem); opacity: .2; }
.commerce-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(18rem,.7fr) minmax(28rem,1fr); gap: clamp(3rem,8vw,8rem); align-items: center; }
.commerce .eyebrow { color: rgba(255,255,255,.5); }
.commerce h2 { margin: 0; max-width: 10ch; font-family: var(--serif); font-size: clamp(3.7rem,7.6vw,8rem); font-weight: 400; line-height: .9; letter-spacing: -.06em; text-transform: uppercase; }
.commerce-copy > p { max-width: 34rem; margin: 1.6rem 0 0; font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.68); }
.commerce-list { margin: 2.4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; }
.commerce-list li { padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.catalogue-stage { min-height: 38rem; position: relative; perspective: 900px; }
.store-window { position: absolute; inset: 4rem 0 0 4rem; padding: 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1.6rem; background: rgba(255,255,255,.09); backdrop-filter: blur(18px); box-shadow: 0 2rem 7rem rgba(0,0,0,.35); transform: rotateY(-7deg) rotateX(3deg); }
.store-bar { height: 2.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.54); }
.product-grid { height: calc(100% - 2.5rem); display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); gap: .7rem; }
.product { position: relative; border-radius: .8rem; background: var(--paper); overflow: hidden; }
.product::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; left: 14%; top: 8%; border-radius: 45% 55% 52% 48%; background: var(--tone,var(--blue)); box-shadow: inset -1rem -1rem 2rem rgba(0,0,0,.13); }
.product::after { content: "SKU · " attr(data-sku); position: absolute; left: .55rem; bottom: .45rem; color: var(--ink); font-size: .42rem; letter-spacing: .08em; }
.product:nth-child(4n+1) { --tone: var(--acid); }
.product:nth-child(4n+2) { --tone: var(--coral); }
.product:nth-child(4n+3) { --tone: var(--violet); }
.product-count { position: absolute; right: -1rem; top: 0; width: 8.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--ink); background: var(--acid); transform: rotate(8deg); box-shadow: 0 1rem 3rem rgba(0,0,0,.24); }
.product-count strong { display: block; font-size: 2rem; line-height: 1; }
.product-count span { display: block; margin-top: .2rem; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }

/* §06 · AI */
.ai-section { padding: clamp(5.5rem,10vw,10rem) var(--gutter); background: #eaf0ff; }
.ai-shell { min-height: 48rem; padding: clamp(1.5rem,4vw,4rem); border-radius: 2rem; color: white; background: #080b14; overflow: hidden; position: relative; display: grid; grid-template-columns: minmax(19rem,.75fr) minmax(23rem,1fr); gap: clamp(2rem,6vw,7rem); align-items: center; }
.ai-shell::before { content: ""; position: absolute; inset: auto -12rem -18rem auto; width: 40rem; height: 40rem; border-radius: 50%; background: var(--blue); filter: blur(6rem); opacity: .27; }
.ai-copy { position: relative; z-index: 2; }
.ai-copy :is(h1, h2) { margin: 0; max-width: 11ch; font-family: var(--serif); font-size: clamp(3.4rem,7vw,7rem); font-weight: 400; line-height: .91; letter-spacing: -.055em; text-transform: uppercase; }
.ai-copy > p { margin: 1.4rem 0 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.68); }
.ai-features { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.ai-features li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.call-demo { position: relative; z-index: 2; min-height: 34rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1.7rem; background: radial-gradient(circle at 50% 35%, rgba(36,92,255,.58), rgba(25,28,45,.82) 34%, rgba(10,11,18,.9) 68%); box-shadow: 0 2rem 6rem rgba(0,0,0,.4); overflow: hidden; display: grid; place-items: center; }
.call-demo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 2.5rem 2.5rem; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.call-inner { position: relative; text-align: center; width: min(80%,24rem); }
.call-status { font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.orb { width: 9rem; aspect-ratio: 1; margin: 2rem auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7ca0ff 12%, #245cff 36%, #12162a 70%); box-shadow: 0 0 5rem rgba(36,92,255,.8); animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.07); box-shadow: 0 0 7rem rgba(36,92,255,.95); } }
.call-name { font-family: var(--serif); font-size: 2.1rem; }
.call-line { height: 2.7rem; margin: 1.8rem 0 1.3rem; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.8) 5px 7px); mask-image: linear-gradient(to bottom, transparent, black 30% 70%, transparent); animation: waveform 1.8s ease-in-out infinite alternate; }
@keyframes waveform { from { transform: scaleY(.45); opacity: .45; } to { transform: scaleY(1); opacity: 1; } }
.call-outcome { padding: .8rem 1rem; border-radius: 999px; background: rgba(199,255,48,.12); border: 1px solid rgba(199,255,48,.4); color: var(--acid); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }

/* §07 · CARE + WORK */
.care { background: var(--paper); }
.care-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.care-card { min-height: 23rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.2rem; display: flex; flex-direction: column; background: rgba(255,255,255,.42); }
.care-card.featured { background: var(--ink); color: white; }
.care-card h3 { margin: 2.2rem 0 .7rem; font-family: var(--serif); font-size: 2.5rem; font-weight: 400; line-height: 1; }
.care-card p { margin: 0; font-size: .88rem; line-height: 1.65; opacity: .62; }
.care-price { margin-top: auto; padding-top: 2rem; font-size: 2.5rem; font-weight: 800; letter-spacing: -.06em; }
.care-price small { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }
.addons { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.addons-title { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.addon-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.addon-row strong { font-family: var(--serif); font-size: clamp(1.5rem,2.4vw,2.3rem); font-weight: 400; }
.addon-row span { font-size: .9rem; font-weight: 800; }
.work-section { color: white; background: var(--ink); }
.work-section .section-head .eyebrow { color: rgba(255,255,255,.45); }
.work-section .section-intro { color: rgba(255,255,255,.62); }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case { min-height: 38rem; border-radius: 1.6rem; overflow: hidden; position: relative; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; color: white; background: #18181d; }
.case::before { content: ""; position: absolute; inset: 5rem 1.4rem 6rem; border-radius: 1rem; transition: transform .7s var(--ease); }
.case:hover::before { transform: scale(1.04) rotate(-1deg); }
.case.music-case::before { background: radial-gradient(circle at 40% 28%, #a45fff, transparent 20%), linear-gradient(150deg,#391070,#0b0712 70%); }
.case.shop-case::before { background: linear-gradient(135deg,#ede3d4 0 49%,#8c5e46 50% 67%,#191515 68%); }
.case-top, .case-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.case-top { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.case h3 { margin: 0; font-family: var(--serif); font-size: clamp(2rem,4vw,4.2rem); font-weight: 400; line-height: .95; }
.case-bottom span { max-width: 18rem; font-size: .7rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); text-align: right; }

/* §08 · BRIEF */
.brief { padding: clamp(5.5rem,10vw,10rem) var(--gutter); background: var(--acid); }
.brief-wrap { display: grid; grid-template-columns: minmax(18rem,.75fr) minmax(24rem,1fr); gap: clamp(3rem,8vw,8rem); }
.brief h2 { margin: 0; max-width: 10ch; font-family: var(--serif); font-size: clamp(3.5rem,7vw,7.5rem); font-weight: 400; line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.brief-copy p { max-width: 32rem; margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.65; }
.brief-meta { margin-top: 2rem; display: grid; gap: .7rem; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.brief-form { padding: clamp(1.4rem,3vw,2.5rem); border-radius: 1.6rem; background: var(--ink); color: white; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: .5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.field input, .field select, .field textarea { width: 100%; min-height: 3.3rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; padding: .5rem 0; background: transparent; color: white; font: 500 .95rem var(--sans); }
.field textarea { min-height: 7rem; resize: vertical; }
.field select { color-scheme: dark; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.32); }
.brief-form .button { margin-top: 1.5rem; width: 100%; border-color: var(--acid); background: var(--acid); color: var(--ink); }
.foot { padding: 2rem var(--gutter); background: var(--ink); color: white; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.foot small { color: rgba(255,255,255,.48); }
.foot-nav { display: flex; gap: 1.4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.foot-email { justify-self: end; font-size: .75rem; }

/* §09 · REVEALS */
.reveal { opacity: 0; transform: translateY(2.2rem); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* §10 · RESPONSIVE */
@media (max-width: 1050px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-actions { grid-column: 2; }
  .scene { width: clamp(9.2rem, 20vw, 12.5rem); }
  .scene:nth-child(1) { --x: -23rem; }
  .scene:nth-child(2) { --x: -15.5rem; }
  .scene:nth-child(3) { --x: -8rem; }
  .scene:nth-child(5) { --x: 8rem; }
  .scene:nth-child(6) { --x: 15.5rem; }
  .scene:nth-child(7) { --x: 23rem; }
  .package { grid-column: span 6; }
  .package.custom { grid-column: span 6; }
  .package:nth-child(3n+1) { border-left: 0; }
  .package:nth-child(odd) { border-left: 1px solid var(--line); }
  .commerce-wrap { grid-template-columns: 1fr; }
  .catalogue-stage { min-height: 34rem; }
}
@media (max-width: 720px) {
  .nav { min-height: 4.6rem; }
  .nav-actions .button.dark { display: none; }
  .hero { min-height: auto; padding-top: 2rem; }
  .hero-kicker span:last-child { display: none; }
  .hero-mark { font-size: clamp(4.2rem, 24vw, 7rem); }
  .hero-title { font-size: clamp(2.2rem, 11vw, 4.2rem); }
  .hero-stage { height: 24rem; margin-top: 1rem; }
  .fan { transform: translateX(-.2rem) scale(.78); }
  .scene:nth-child(1), .scene:nth-child(7) { display: none; }
  .scene:nth-child(2) { --x: -13rem; }
  .scene:nth-child(3) { --x: -6.8rem; }
  .scene:nth-child(5) { --x: 6.8rem; }
  .scene:nth-child(6) { --x: 13rem; }
  .outcomes { width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .chapter { border-radius: 1.2rem 1.2rem 0 0; }
  .chapter-grid { grid-template-columns: 1fr; gap: 1rem; }
  .chapter-copy { padding-top: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 9rem; transform: none; }
  .section-head, .ai-shell, .brief-wrap { grid-template-columns: 1fr; }
  .package, .package.custom { grid-column: 1 / -1; min-height: 25rem; border-left: 1px solid var(--line); }
  .commerce-list { grid-template-columns: 1fr; }
  .catalogue-stage { min-height: 27rem; }
  .store-window { inset: 2.5rem 0 0 0; }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .product:nth-child(n+10) { display: none; }
  .ai-shell { min-height: auto; }
  .care-grid, .cases { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; text-align: center; }
  .foot-nav { justify-content: center; flex-wrap: wrap; }
  .foot-email { justify-self: center; }
}
@media (max-width: 440px) {
  .scene { width: 10rem; }
  .scene:nth-child(2), .scene:nth-child(6) { display: none; }
  .scene:nth-child(3) { --x: -5.1rem; --r: 8deg; }
  .scene:nth-child(5) { --x: 5.1rem; --r: -8deg; }
  .hero-stage { height: 22rem; }
  .button { width: 100%; }
  .tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── refinements.css ── */
/* KLVR finishing system: paper, light and purposeful movement. */
::selection { background: var(--blue); color: white; }
[hidden] { display: none !important; }
html { scroll-padding-top: 7rem; }
button, summary { font-family: var(--sans); cursor: pointer; }
button, input, select, textarea { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.skip-link { position: fixed; z-index: 120; left: 1rem; top: 1rem; padding: 1rem 1.5rem; border-radius: 99px; color: white; background: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(245,242,235,.91); backdrop-filter: blur(20px); transition: box-shadow .3s; }
.nav.is-scrolled { box-shadow: 0 8px 30px rgba(11,11,13,.045); }
.reading-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(var(--progress,0)); transform-origin: left; background: linear-gradient(90deg,var(--coral),var(--violet),var(--blue)); pointer-events: none; }
.nav-links a { padding: .8rem 0; }
.nav-links a::after { bottom: .3rem; }
.nav-links a[aria-current="location"]::after { right: 0; background: var(--blue); }
.menu { width: auto; min-width: 5.6rem; gap: .6rem; padding: 0 1rem; list-style: none; user-select: none; }
.menu::-webkit-details-marker { display: none; }
.menu-lines i { transition: transform .3s; }
.site-menu[open] .menu-lines i:first-child { transform: translateY(2.5px) rotate(45deg); }
.site-menu[open] .menu-lines i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
.menu-panel { position: absolute; top: calc(100% + .65rem); right: var(--gutter); width: min(28rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 7rem); overflow-y: auto; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: 1.3rem; background: var(--paper); box-shadow: 0 1.5rem 4rem rgba(11,11,13,.18); }
.menu-panel > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .3rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; transition: color .2s; }
.menu-panel > a:hover, .menu-panel > a:focus-visible { color: var(--blue); }
.menu-panel > a > span:last-child { font-size: .72rem; }
.menu-panel .menu-brief { color: var(--blue); font-weight: 800; }
.menu-panel .menu-email { border: 0; font-size: .8rem; }
.button span[aria-hidden], .package-link span:last-child { display: inline-block; transition: transform .3s var(--ease); }
.button:hover > span[aria-hidden], .button:focus-visible > span[aria-hidden], .package-link:hover span:last-child { transform: translate(2px,-2px); }
.button.dark:hover { background: var(--blue); border-color: var(--blue); }
.hero { overflow: clip; }
.hero-kicker { position: relative; z-index: 4; color: #56534f; }
.hero::before, .hero::after { border-radius: 50%; width: min(55vw,48rem); height: min(50vw,42rem); max-height: none; top: 22%; opacity: .13; animation: ambient-drift 18s ease-in-out infinite alternate; }
.hero::after { animation-delay: -9s; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.orbit { position: absolute; left: 50%; top: 48%; width: 95%; height: 50%; border: 1px solid rgba(85,73,140,.1); border-radius: 50%; transform: translate(-50%,-50%) rotate(-16deg); animation: orbit-drift 26s ease-in-out infinite alternate; }
.orbit-two { width: 110%; height: 65%; transform: translate(-50%,-50%) rotate(16deg); animation-direction: alternate-reverse; animation-delay: -8s; }
.orbit-three { width: 80%; height: 78%; border-color: rgba(85,73,140,.065); animation-delay: -16s; }
.light-point { position: absolute; width: .5rem; aspect-ratio: 1; background: var(--violet); border-radius: 50%; opacity: .5; box-shadow: 0 0 0 .5rem rgba(138,92,255,.07); animation: ambient-drift 16s ease-in-out infinite alternate; }
.point-one { left: 14%; top: 36%; }
.point-two { right: 16%; bottom: 19%; background: var(--coral); animation-delay: -8s; }
@keyframes ambient-drift { to { transform: translate3d(5vw,3vw,0) scale(1.13); } }
@keyframes orbit-drift { to { transform: translate(-50%,-50%) rotate(9deg) scale(1.07); } }
.fan { transition: transform .65s var(--ease); transform: rotateX(var(--fan-x,0deg)) rotateY(var(--fan-y,0deg)); }
.scene { animation-fill-mode: backwards; transition: transform .65s var(--ease), box-shadow .4s; }
.scene:hover, .scene:focus-visible { transform: translate3d(var(--x),calc(var(--y) - 1.15rem),calc(var(--z) + 40px)) rotateY(var(--r)); box-shadow: 0 2rem 4rem rgba(16,15,18,.32); z-index: 4; }
.scene::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg,transparent 25%,rgba(255,255,255,.15),transparent 65%); opacity: 0; transition: opacity .4s; }
.scene:hover::after, .scene:focus-visible::after { opacity: 1; }
.outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1rem; white-space: normal; line-height: 1.6; }
.outcomes span { display: inline-flex; align-items: center; gap: 1rem; }
.outcomes span + span::before { content: ''; width: 3px; height: 3px; background: currentColor; opacity: .4; border-radius: 50%; }
.hero-utility { margin-top: 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .65rem; color: #625e58; }
.motion-toggle { border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.5); min-height: 2.75rem; padding: .5rem .9rem; display: inline-flex; gap: .5rem; align-items: center; color: var(--ink); font-size: .65rem; }
.motion-symbol { font-size: 1rem; }
.chapter, .care, .work-section, .brief { position: relative; isolation: isolate; overflow: clip; }
.chapter::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 86% 20%,rgba(138,92,255,.12),transparent 55%); }
.tile { position: relative; overflow: hidden; }
.tile::after { content: '↗'; position: absolute; right: 1rem; top: 1rem; font-family: var(--sans); opacity: .6; transition: transform .4s; }
.tile:hover::after { transform: translate(3px,-3px); }
.package { transition: background .4s, color .4s, box-shadow .4s, opacity .75s, transform .75s var(--ease); }
.package p, .care-card p { opacity: .8; }
.package-no, .package-price span { opacity: .72; }
.package:nth-child(3):hover { background: #6940d5; }
.package:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.package-link { min-height: 3rem; opacity: 1; }
.package, .care-card { background-image: radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.16),transparent 70%); }
.care-card { transition: box-shadow .4s, border-color .4s; }
.care-card:hover { border-color: rgba(36,92,255,.45); box-shadow: 0 .8rem 2.5rem rgba(11,11,13,.065); }
.section-head .eyebrow, .scope-note { color: #69655f; }
.eyebrow, .commerce .eyebrow, .work-section .section-head .eyebrow { color: #adaab3; }
.section-head .eyebrow { color: #69655f; }
.work-section .section-head .eyebrow { color: #adaab3; }
.commerce::before, .commerce::after, .ai-shell::before { pointer-events: none; animation: ambient-drift 20s ease-in-out infinite alternate; }
.commerce::after { animation-delay: -10s; }
.product::before { animation: product-turn 13s ease-in-out infinite alternate; }
.product:nth-child(3n)::before { animation-delay: -5s; }
.product:nth-child(3n + 1)::before { animation-delay: -9s; }
@keyframes product-turn { to { transform: rotate(35deg) scale(.9); border-radius: 58% 42% 35% 65%; } }
.product-count { animation: badge-float 7s ease-in-out infinite; }
@keyframes badge-float { 50% { transform: translateY(-10px) rotate(3deg); } }
.call-status { color: #b6bcca; }
.call-demo::after { content: ''; position: absolute; width: 17rem; height: 17rem; border: 1px solid rgba(128,163,255,.18); border-radius: 50%; left: 50%; top: 44%; transform: translate(-50%,-50%); animation: signal-ring 4s ease-out infinite; pointer-events: none; }
@keyframes signal-ring { from { opacity: .7; transform: translate(-50%,-50%) scale(.55); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.3); } }
.case { transition: border-color .4s; border: 1px solid rgba(255,255,255,.09); }
.case:hover, .case:focus-visible { border-color: rgba(255,255,255,.4); }
.case-top { color: #c1bdc9; align-items: start; }
.case-bottom span { color: #bbb7c2; }
.case::after { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); pointer-events: none; font-family: var(--serif); font-size: clamp(4rem,8vw,9rem); letter-spacing: -.07em; color: rgba(255,255,255,.84); transition: transform .7s var(--ease); }
.music-case::after { content: 'CHEFF'; }
.shop-case::after { content: 'ESTRA'; color: #fff8ee; }
.case:hover::after { transform: translate(-50%,-50%) rotate(-3deg) scale(1.04); }
.brief::before { content: ''; position: absolute; z-index: -1; width: 55vw; height: 55vw; right: -25vw; top: -25vw; border: 1px solid rgba(11,11,13,.13); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(11,11,13,.03),0 0 0 10rem rgba(11,11,13,.025); }
.field { min-width: 0; }
.field label { color: #bbbcc3; font-size: .68rem; }
.field input, .field select, .field textarea { transition: border-color .25s, background .25s; }
.field input::placeholder, .field textarea::placeholder { color: #93939e; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acid); }
.field select { padding-right: 1.25rem; text-overflow: ellipsis; }
.form-note { margin: 1rem 0 0; color: #aaaab4; font-size: .75rem; text-align: center; line-height: 1.6; }
.form-note a { color: white; text-decoration: underline; text-underline-offset: 4px; }
.form-status { margin: 1.25rem 0 0; padding: 1rem; border: 1px solid rgba(199,255,48,.4); border-radius: .65rem; color: #e3ff95; font-size: .85rem; line-height: 1.6; }
.form-status[data-state="error"] { color: #ffd0c8; border-color: rgba(255,113,88,.5); }
.brief-form button:disabled { opacity: .65; cursor: wait; }
.foot a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.foot a:hover { color: var(--acid); }
.reveal, .reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.reveal-ready { opacity: 0; transform: translateY(1.5rem); }
.reveal.reveal-ready.in { opacity: 1; transform: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .motion-offscreen, .motion-offscreen *, .motion-offscreen::before, .motion-offscreen::after, .motion-offscreen *::before, .motion-offscreen *::after { animation-play-state: paused !important; }
.motion-paused .scene { animation: none; }
.motion-paused .fan { transform: none; }
.motion-paused .reveal { opacity: 1; transform: none; transition: none; }
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition-duration: .01ms !important; }
@media (min-width: 1600px) { :root { --gutter: max(3rem,calc((100vw - 1500px)/2)); } }
@media (max-width: 1100px) {
  .ai-shell, .brief-wrap { grid-template-columns: minmax(0,1fr); }
  .ai-copy :is(h1, h2), .brief h2 { max-width: 15ch; }
  .call-demo { min-height: 31rem; }
  .case-bottom { align-items: start; flex-direction: column; }
  .case-bottom span { text-align: left; }
  .foot { grid-template-columns: auto 1fr; }
  .foot-nav { flex-wrap: wrap; justify-content: end; gap: .3rem 1rem; }
  .foot-email { grid-column: 1 / -1; }
}
@media (max-width: 850px) { .chapter-grid, .section-head { grid-template-columns: minmax(0,1fr); gap: 2rem; } .chapter-copy { padding-top: 0; } .care-grid { grid-template-columns: minmax(0,1fr); } .care-card { min-height: 20rem; } }
@media (max-width: 720px) {
  html { scroll-padding-top: 6rem; }
  .hero-stage { height: 21rem; }
  .fan, .motion-paused .fan { transform: translateX(-.2rem) scale(.78); }
  .outcomes { overflow: visible; padding: .8rem; font-size: .57rem; gap: .35rem .75rem; border-radius: 1.15rem; }
  .outcomes span { gap: .75rem; }
  .hero-utility { flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; text-align: center; }
  .hero-utility > span { width: 100%; }
  .orbit { width: 150%; }
  .hero::before, .hero::after { width: 75vw; height: 75vw; filter: blur(30px); }
  .section-title, .chapter h2, .commerce h2, .ai-copy :is(h1, h2), .brief h2 { font-size: clamp(2.6rem,11vw,5rem); }
  .commerce-wrap, .section-head, .chapter-grid { grid-template-columns: minmax(0,1fr); }
  .product-count { right: 0; width: 6.5rem; }
  .product-count strong { font-size: 1.7rem; }
  .call-demo { min-height: 28rem; }
  .call-inner { width: 86%; }
  .call-outcome { font-size: .6rem; line-height: 1.6; }
  .case { min-height: 31rem; }
  .case::before { bottom: 8rem; }
  .foot { grid-template-columns: 1fr; }
  .foot > a { justify-self: center; }
  .foot-nav { justify-content: center; }
  .foot-email { grid-column: auto; }
}
@media (max-width: 440px) { .nav { gap: 1rem; } .nav .button { width: auto; } .hero-stage { height: 19rem; } .tiles { grid-template-columns: 1fr 1fr; gap: .6rem; } .tile strong { font-size: 1.65rem; } .tile span { font-size: .57rem; } .tile::after { top: .65rem; right: .65rem; } .case-top { font-size: .57rem; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal.reveal-ready { opacity: 1; transform: none; } }

/* ── showcase.css ── */
/* Explicit foreground and background colours also apply to native Windows popups. */
.field select { color-scheme: light; background-color: #151519; color: #fff; padding: .7rem 2rem .7rem .7rem; border: 1px solid #55545d; border-radius: .45rem; }
.field select option, .field select optgroup { color: #17171b; background-color: #fff; }
.field select option:disabled { color: #595963; background-color: #efeff2; }
.field select option:checked { color: #17171b; background-color: #e9edff; }
.field input:-webkit-autofill, .field textarea:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #151519 inset; caret-color: #fff; }

/* The exact homepages, framed with room for their original compositions. */
.case { min-height: 0; justify-content: start; gap: 1.4rem; padding: 1.4rem; }
.case::before, .case::after { display: none; }
.case-preview { width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #111; }
.case-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .8s var(--ease); }
.case:hover .case-preview img, .case:focus-visible .case-preview img { transform: scale(1.025); }
.case-bottom { margin-top: auto; gap: 1rem; }
.case-bottom span { max-width: 14rem; }
.case h3 { font-size: clamp(2rem,3.8vw,3.8rem); }

/* A single photograph sheet keeps the sample catalogue light on requests. */
.product-grid { height: auto; grid-template-rows: none; }
.catalogue-stage { min-height: 0; padding: 3.3rem 0 1.5rem 2rem; }
.store-window { position: relative; inset: auto; transform: rotateY(-7deg) rotateX(3deg); }
.store-bar { height: auto; min-height: 2.5rem; gap: .8rem; color: #cfccd6; line-height: 1.5; }
.store-bar span:last-child { text-align: right; }
.product { background: #f8f6f0; display: flex; flex-direction: column; border: 1px solid rgba(11,11,13,.07); border-radius: .65rem; min-width: 0; }
.product::before, .product::after { display: none; }
.product-photo { display: block; width: 100%; aspect-ratio: 1; background-image: url('/assets/catalogue-products.webp'); background-size: 400% 300%; background-position: var(--photo-x,0%) var(--photo-y,0%); background-repeat: no-repeat; }
.product > .product-photo { transition: transform .5s var(--ease); }
.product:hover > .product-photo { transform: scale(1.04); }
.product-info { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem; padding: .5rem .55rem .65rem; color: #272629; background: #f8f6f0; font-size: .6rem; line-height: 1.3; }
.product-info b { font-size: .6rem; font-weight: 800; }
.product-count { right: -.25rem; top: -.5rem; z-index: 3; }

/* Every opening card is a miniature working genre of website. */
.scene { container-type: inline-size; }
.mini-site { position: relative; height: calc(100% - 1.2rem); margin-top: .55rem; padding: .7rem; border-radius: .9rem; overflow: hidden; display: flex; flex-direction: column; color: #171719; background: #f5f1e8; }
.mini-site * { box-sizing: border-box; }
.mini-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; font-size: clamp(5px,3cqi,7px); font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.mini-brand > span:last-child { font-size: clamp(6px,4cqi,10px); }
.mini-site .scene-label { font-size: clamp(15px,10cqi,23px); line-height: 1.08; letter-spacing: -.035em; }
.mini-site .scene-meta { font-size: clamp(4px,2.6cqi,6px); color: #6c6560; margin-top: .28rem; letter-spacing: .04em; }
.mini-section-label { display: flex; justify-content: space-between; margin-top: .9rem; margin-bottom: .35rem; font-size: clamp(5px,3.1cqi,7px); font-weight: 700; }
.service-sample { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d7d1c5; padding: .4rem 0; font-size: clamp(6px,3.6cqi,9px); }
.service-sample small { display: block; color: #69645c; font-size: .8em; margin-top: .12rem; }
.mini-dates { display: grid; grid-template-columns: repeat(5,1fr); gap: .15rem; }
.mini-dates > span { display: grid; text-align: center; padding: .32rem .1rem; gap: .15rem; font-size: clamp(5px,3cqi,7px); border-radius: .3rem; }
.mini-dates b { font-size: 1.25em; }
.mini-booking .chosen { background: #244639; color: #fff; }
.mini-times { display: flex; gap: .25rem; margin-top: .4rem; }
.mini-times span { flex: 1; border: 1px solid #c9c2b5; text-align: center; border-radius: 99px; padding: .28rem .08rem; font-size: clamp(5px,3.1cqi,7px); }
.mini-cta { display: flex; align-items: center; justify-content: center; min-height: 1.55rem; margin-top: auto; padding: .3rem; border-radius: .35rem; background: #151518; color: #fff; font-size: clamp(5px,3.5cqi,8px); font-weight: 700; }
.mini-booking .mini-cta { background: #244639; }
.mini-restaurant { background: #f2e6cf; color: #342213; }
.mini-food { display: block; width: 100%; height: 26%; margin: .6rem 0 .35rem; object-fit: cover; border-radius: .35rem; }
.mini-menu-tabs { display: flex; gap: .6rem; color: #7a401f; font-size: clamp(6px,3.5cqi,8px); font-weight: 800; padding: .25rem 0; border-bottom: 1px solid #c7ad89; }
.mini-menu-row { display: flex; align-items: start; justify-content: space-between; gap: .2rem; padding: .32rem 0; font-size: clamp(6px,3.7cqi,9px); }
.mini-menu-row small { display: block; margin-top: .1rem; font-size: .75em; color: #725840; }
.mini-restaurant .mini-cta { background: #753c22; min-height: 1.4rem; }
.mini-music { background: #17151b; color: #f2ede5; }
.mini-music .scene-meta { color: #b9a9c8; }
.mini-album { position: relative; min-height: 0; height: 42%; margin-top: .65rem; border-radius: .4rem; overflow: hidden; }
.mini-album img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.mini-album::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%,rgba(9,8,9,.7)); }
.mini-album > span { position: absolute; z-index: 1; left: .4rem; bottom: .3rem; font-size: 22cqi; font-weight: 800; letter-spacing: -.09em; }
.mini-track { display: flex; flex-direction: column; gap: .15rem; margin-top: .6rem; font-size: clamp(7px,4.5cqi,11px); }
.mini-track > span { font-size: .7em; color: #bbb1c6; }
.mini-playline { height: 2px; margin-top: .65rem; background: #504757; }
.mini-playline > span { display: block; height: 100%; width: 38%; background: #ddc2ff; }
.mini-duration { display: flex; justify-content: space-between; margin-top: .25rem; font-size: 2.8cqi; color: #c9bdd4; }
.mini-player { display: flex; align-items: center; justify-content: center; gap: 1.15rem; margin-top: .3rem; font-size: 7cqi; }
.mini-player .play-disc { border-radius: 50%; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; padding-left: .08rem; background: #e7d5ff; color: #17121c; font-size: .5rem; }
.mini-property { background: #eff0eb; }
.mini-listing-photo { position: relative; height: 43%; margin-top: .8rem; border-radius: .35rem; overflow: hidden; }
.mini-listing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-listing-photo > span { position: absolute; left: .4rem; top: .4rem; background: #f7f4e9; color: #393f32; padding: .25rem .35rem; border-radius: 99px; font-size: 2.8cqi; }
.mini-property-detail { display: flex; flex-direction: column; gap: .2rem; margin-top: .65rem; font-size: clamp(7px,4.5cqi,11px); }
.mini-property-detail > span { color: #64695e; font-size: .75em; }
.mini-specs { display: flex; justify-content: space-between; padding: .6rem 0; margin-top: .4rem; border-top: 1px solid #d6d9cf; font-size: clamp(5px,3.2cqi,8px); color: #616557; }
.mini-specs b { color: #242a1e; }
.mini-property .mini-cta { background: #394334; }
.mini-gallery { background: #ebe6de; }
.mini-gallery-grid { margin-top: .8rem; height: 53%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .3rem; }
.mini-gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.mini-gallery-caption { display: flex; flex-direction: column; gap: .25rem; margin-top: .6rem; font-size: 3.8cqi; }
.mini-gallery-caption span { font-size: .75em; color: #696359; }
.mini-gallery .mini-cta { background: transparent; color: #333026; justify-content: start; padding-left: 0; }
.mini-shop { background: #edf4da; }
.mini-shop-title { margin-top: .6rem; font-size: 4.7cqi; font-weight: 800; }
.mini-shop-title > span { display: block; margin-top: .1rem; font-size: .65em; font-weight: 500; color: #57613f; }
.mini-products { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2,minmax(0,1fr)); flex: 1; min-height: 0; gap: .4rem; margin: .6rem 0; }
.mini-products > div { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mini-products .product-photo { border-radius: .3rem; width: auto; height: calc(100% - .7rem); max-width: 100%; aspect-ratio: 1; align-self: center; }
.mini-products > div > span:last-child { display: flex; justify-content: space-between; gap: .2rem; font-size: clamp(4px,2.5cqi,6px); padding-top: .2rem; }
.mini-shop .mini-cta { background: #29351c; }
.mini-phone { background: #10182b; color: #eef3ff; }
.mini-phone .scene-meta { color: #adbcd5; }
.mini-live-dot { width: .3rem; height: .3rem; border-radius: 50%; background: #c7ff30; }
.mini-call-orb { flex-shrink: 0; width: 22%; aspect-ratio: 1; margin: .8rem auto .5rem; background: radial-gradient(circle at 35% 30%,#fff,#9abaff 16%,#3b6bff 50%,#102957); border-radius: 50%; box-shadow: 0 0 1.6rem #245cff88; }
.mini-call-label { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: 5cqi; }
.mini-call-label > span { font-size: .62em; color: #9caccb; }
.mini-transcript { padding: .5rem .4rem; background: #222e47; border-radius: .4rem .4rem .4rem 0; margin: .7rem .45rem 0 0; font-size: clamp(5px,3.5cqi,8px); line-height: 1.4; }
.mini-transcript.reply { background: #304c86; margin: .4rem 0 .5rem .45rem; border-radius: .4rem .4rem 0 .4rem; }
.mini-confirmed { padding: .5rem .3rem; margin-top: auto; border-radius: .4rem; background: #c7ff3012; border: 1px solid #c7ff3044; color: #c7ff30; font-size: 3.7cqi; text-align: center; }
.mini-confirmed > span { display: block; font-size: .78em; color: #b3c494; margin-top: .2rem; }

/* Hold a single central stack, then spread in one smooth, staggered gesture. */
.scene { --stack-depth: -60px; animation-name: stack-to-fan; animation-duration: 1.9s; animation-timing-function: cubic-bezier(.22,.75,.18,1); animation-fill-mode: backwards; }
.scene:nth-child(1) { --stack-depth: -90px; animation-delay: .3s; }
.scene:nth-child(2) { --stack-depth: -60px; animation-delay: .22s; }
.scene:nth-child(3) { --stack-depth: -25px; animation-delay: .14s; }
.scene:nth-child(4) { --stack-depth: 35px; animation-delay: .08s; }
.scene:nth-child(5) { --stack-depth: -35px; animation-delay: .14s; }
.scene:nth-child(6) { --stack-depth: -70px; animation-delay: .22s; }
.scene:nth-child(7) { --stack-depth: -100px; animation-delay: .3s; }
@keyframes stack-to-fan {
  0%, 22% { opacity: 1; transform: translate3d(0,0,var(--stack-depth)) rotateY(0deg); }
  100% { opacity: 1; transform: translate3d(var(--x),var(--y),var(--z)) rotateY(var(--r)); }
}
@media (max-width: 1050px) { .catalogue-stage { max-width: 48rem; width: 100%; justify-self: center; } }
@media (max-width: 720px) {
  .catalogue-stage { padding: 2.2rem 0 .5rem; }
  .store-window { padding: .6rem; border-radius: 1rem; transform: none; }
  .product-grid { gap: .4rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product:nth-child(n+10) { display: flex; }
  .product-count { top: -1.4rem; right: 0; width: 5.5rem; }
  .product-count strong { font-size: 1.5rem; }
  .product-count span { font-size: .42rem; }
  .store-bar { padding: .2rem .1rem .7rem; font-size: .5rem; padding-right: 4.6rem; flex-wrap: wrap; gap: .2rem; }
  .store-bar span:last-child { text-align: left; }
  .product-info { font-size: .55rem; padding: .35rem .3rem .5rem; gap: .15rem; }
  .product-info b { font-size: .55rem; }
  .case { min-height: 0; gap: 1rem; padding: 1rem; }
  .case-bottom { flex-direction: column; align-items: start; }
  .case-bottom span { text-align: left; max-width: none; }
  .case-top { flex-wrap: wrap; }
  .mini-site { padding: .55rem; }
  .mini-brand { margin-bottom: .4rem; }
  .mini-section-label { margin-top: .55rem; }
  .service-sample { padding: .25rem 0; }
  .mini-menu-row { padding: .2rem 0; }
  .mini-cta { min-height: 1.3rem; }
  .mini-listing-photo { margin-top: .6rem; }
  .mini-specs { padding: .4rem 0; }
}
@media (prefers-reduced-motion: reduce) { .scene { animation: none !important; } }

/* ── luminous.css ── */
/* KLVR's supplied luminous K: a scoped hero and navigation brand study. */
:root {
  --luminous-white: #fbfbfd;
  --luminous-ink: #17171d;
  --luminous-cyan: #32d7ef;
  --luminous-violet: #9460ef;
  --luminous-pink: #f16ec4;
  --luminous-amber: #f5b35b;
  --luminous-spectrum: linear-gradient(115deg, var(--luminous-cyan), #608aff 28%, var(--luminous-violet) 48%, var(--luminous-pink) 70%, var(--luminous-amber));
}
.nav {
  background: #fbfbfdeb;
  border-bottom-color: #20203412;
}
.nav .luminous-mark { display: inline-flex; align-items: center; gap: .1rem; color: var(--luminous-ink); }
.luminous-mark img { width: 3.5rem; height: 3.5rem; object-fit: contain; mix-blend-mode: multiply; margin: -.7rem -.3rem -.7rem -.7rem; }
.nav .reading-progress { background: var(--luminous-spectrum); }
.nav .button.dark, .hero .button.dark {
  background: var(--luminous-ink);
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 12px #25203c10;
}
.nav .button.dark:hover, .hero .button.dark:hover { background: #34303f; }
.nav .menu, .hero .button.light {
  background: linear-gradient(#ffffffed, #f8f7fced) padding-box, var(--luminous-spectrum) border-box;
  border: 1px solid transparent;
  color: var(--luminous-ink);
  box-shadow: 0 2px 10px #71639409;
}
.nav .menu-panel { background: #fbfbfd; }
.hero { background: var(--luminous-white); color: var(--luminous-ink); }
.hero .hero-kicker { color: #63616d; }
.hero .luminous-lockup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .03em;
  transform: none;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -.105em;
  min-height: clamp(8rem, 13vw, 12rem);
}
.luminous-lockup img {
  width: clamp(8rem, 13vw, 12rem);
  height: clamp(8rem, 13vw, 12rem);
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-right: -.17em;
}
.hero .hero-title { margin-top: .75rem; }
/* More specific than motion.css so depth remains separate from art direction. */
.hero .hero-depth-backdrop .hero-atmosphere {
  background:
    radial-gradient(ellipse at 16% 55%, #37d7ed16, transparent 44%),
    radial-gradient(ellipse at 72% 42%, #a375ed16, transparent 44%),
    radial-gradient(ellipse at 85% 66%, #f386c815, transparent 40%),
    radial-gradient(ellipse at 57% 76%, #f5b35b0c, transparent 30%),
    radial-gradient(ellipse at 48% 35%, #fff, transparent 60%);
}
.hero .orbit { border-color: #8873ad0c; }
.hero .orbit-two { border-color: #a685b80b; }
.hero .orbit-three, .hero .light-point { display: none; }
.hero .scene {
  border-color: #e1e0eb;
  background: #222129;
  box-shadow: 0 1.4rem 3rem #26213525, 0 0 0 1px #ffffff66;
}
.hero .scene::after { background: linear-gradient(120deg, transparent 25%, #bf9fe72b, #87eafa26, transparent 75%); }
.hero .outcomes {
  background: #ffffffa6;
  border-color: #dddded;
  color: #4b4856;
  box-shadow: 0 5px 24px #5a437808;
}
.hero .motion-toggle { background: #ffffffb3; border-color: #dddded; color: #565160; }
.hero .hero-utility { color: #66616e; }
@media (max-width: 720px) {
  .hero .luminous-lockup { gap: 0; min-height: 7rem; font-size: clamp(3.6rem, 14vw, 5rem); }
  .luminous-lockup img { width: 7rem; height: 7rem; }
  .hero .hero-title { margin-top: .5rem; }
}
@media (prefers-contrast: more) {
  .nav .menu, .hero .button.light, .hero .outcomes { border-color: currentColor; }
}

/* Spectral Fold: light follows the folded geometry of the supplied K. */
:root {
  --paper: #fbfbfd;
  --paper-deep: #f0eff5;
  --ink: #181821;
  --ink-soft: #292834;
  --line: #29233d1c;
  --blue: #5158cf;
  --violet: #9671dd;
  --coral: #d67daf;
  --acid: #e3dcfa;
  --radius: 1.75rem;
}
body { background: var(--paper); }
body::after { display: none; }
.nav { min-height: 5.25rem; }
.nav .mark { font-size: 1.55rem; letter-spacing: -.08em; }
.button { font-weight: 600; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #5158cf; outline-offset: 5px; }
.hero { padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: 3rem; }
.hero .hero-kicker { font-size: .6rem; letter-spacing: .1em; }
.hero .luminous-lockup { min-height: 7.5rem; font-size: 3.15rem; letter-spacing: -.08em; gap: .1rem; }
.hero .luminous-lockup img { width: 7.5rem; height: 7.5rem; margin-right: -.3rem; }
.luminous-lockup img, .luminous-mark img {
  mask-image: linear-gradient(90deg, transparent, #000 20% 80%, transparent), linear-gradient(0deg, transparent, #000 18% 82%, transparent);
  mask-composite: intersect;
}
.hero .hero-title {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: none;
  font-size: clamp(3.4rem, 6.9vw, 7rem);
  letter-spacing: -.073em;
  line-height: 1.04;
  max-width: 15ch;
  margin: .4rem auto 0;
}
.spectral-text {
  color: #665ac5;
  background: linear-gradient(110deg, #287c9c 3%, #5964c6 27%, #8955b5 54%, #b6508e 76%, #b17648);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hero-stage { margin-top: 2rem; height: clamp(22rem, 32vw, 31rem); }
.hero .hero-depth-backdrop .hero-atmosphere {
  background:
    radial-gradient(ellipse at 16% 65%, #6cdde815, transparent 40%),
    radial-gradient(ellipse at 79% 70%, #b595e420, transparent 40%),
    radial-gradient(ellipse at 68% 91%, #f0acba18, transparent 37%);
}
.hero .orbit { display: none; }
.hero .hero-atmosphere::before,
.hero .hero-atmosphere::after {
  content: '';
  position: absolute;
  width: 64%;
  height: 70%;
  top: 28%;
  left: -13%;
  border: 1px solid #ffffffde;
  border-radius: 42% 4% 48% 5%;
  background: linear-gradient(135deg, #ffffff00 12%, #ffffffb3 47%, #a6c9ef18 48%, #c19ce71a 65%, #ffffff00);
  transform: rotate(-27deg);
  animation: fold-breathe 16s var(--ease) infinite alternate;
}
.hero .hero-atmosphere::after { left: 55%; top: 44%; rotate: 180deg; animation-delay: -8s; }
@keyframes fold-breathe { to { transform: translate3d(1.5%, -2%, 0) rotate(-24deg); opacity: .6; } }
.hero .scene { border-radius: 1.25rem; background: #24232c; box-shadow: 0 1.3rem 2.8rem #23213524; }
.hero .outcomes { font-size: .58rem; padding: .85rem 1.25rem; border-color: #ebe8f2; }
.hero .hero-actions { margin-top: 1.2rem; }
.hero .hero-utility { margin-top: 2rem; }
.hero .button.light, .nav .menu { background: linear-gradient(#fbfbfd, #fbfbfd) padding-box, var(--luminous-spectrum) border-box; }

/* Quiet editorial chapters: the typography and surface do the work. */
.chapter, .section, .brief { padding-block: clamp(4.5rem, 8vw, 8rem); }
.chapter { min-height: 0; background: #f0eff5; color: var(--ink); border-radius: 2rem 2rem 0 0; border-top: 1px solid #e6e3ef; }
.chapter::before, .chapter::after { display: none; }
.chapter h2, .section-title, .commerce h2, .ai-copy :is(h1, h2), .brief h2 {
  font-family: var(--sans);
  font-size: clamp(2.8rem, 5.2vw, 5.7rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.062em;
  text-transform: none;
  max-width: 15ch;
}
.chapter-copy p, .section-intro { color: #666370; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.7; }
.chapter-copy { padding-top: 1.5rem; }
.eyebrow, .section-head .eyebrow, .chapter .eyebrow { color: #706878; font-size: .65rem; letter-spacing: .11em; }
.tiles { gap: 1rem; margin-top: 3.5rem; }
.tile, .tile:nth-child(n) {
  --lift: 0;
  min-height: 10rem;
  padding: 1.4rem;
  color: var(--ink);
  background: linear-gradient(145deg, #ffffffeb, #ffffff73);
  border: 1px solid #fff;
  box-shadow: 0 8px 24px #35304705;
  transform: none;
}
.tile:nth-child(2) { border-top-color: #b4a2dc; }
.tile:nth-child(3) { border-top-color: #ddabc8; }
.tile:nth-child(4) { border-top-color: #a0cbdf; }
.tile strong { font-family: var(--sans); font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.tile::after { color: #6d617f; }
.tile:hover, .tile:focus-visible { transform: translateY(-4px); }
.tile span { color: #77717f; font-size: .6rem; }
.reveal, .reveal.reveal-ready, .reveal.reveal-ready.in { opacity: 1; transform: none; transition: none; }
.section-head { margin-bottom: 3rem; gap: 3rem; }
.package-grid { gap: 1rem; border: 0; }
.package, .package:nth-child(n) { border: 1px solid #e5e2ed; border-radius: 1.5rem; background: #f7f6fa; min-height: 25rem; padding: 1.6rem; }
.package h3 { font-family: var(--sans); font-size: 1.75rem; font-weight: 600; letter-spacing: -.045em; }
.package p { color: #696572; opacity: 1; }
.package-no { color: #716779; opacity: 1; }
.package .package-price strong { font-size: 2.8rem; letter-spacing: -.065em; }
.package.custom { color: white; background: linear-gradient(135deg, #232030, #373049); border-color: #554368; }
.package.custom p, .package.custom .package-no { color: #d0c7da; }
.package.custom::after { opacity: .035; }
.package-link { letter-spacing: .04em; font-size: .65rem; }
.package::before, .care-card::before { opacity: .3; }
.scope-note { color: #746e7d; }

/* Dark gallery: the product sheet is unchanged; the frame now has real depth. */
.commerce { overflow: clip; background: #111017; padding-block: clamp(4rem, 7vw, 7rem); isolation: isolate; }
.commerce::before, .commerce::after { display: none; }
.commerce-wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.commerce-copy { padding-top: 2.5rem; }
.commerce h2 { font-size: clamp(3rem, 5.7vw, 6rem); max-width: 12ch; }
.commerce .spectral-text, #ai .spectral-text { background-image: linear-gradient(110deg, #83e4ec, #b4b6ff 35%, #ddb1ec 65%, #ffd0ad); }
.commerce .eyebrow, #ai .eyebrow { color: #b8adca; }
.commerce-copy > p { color: #b8b2c3; }
.commerce-copy > .eyebrow, #ai .ai-depth-copy > .eyebrow, .brief-copy > .eyebrow { font-size: .65rem; line-height: 1.5; letter-spacing: .11em; margin: 0 0 1.25rem; }
.commerce-list li { color: #bfb8ca; letter-spacing: .03em; font-size: .65rem; }
.catalogue-stage { width: 100%; padding: 2.5rem 0 .4rem; max-width: none; }
.store-window {
  background: linear-gradient(145deg, #2b253be6, #191720f2);
  border: 1px solid #c6a7ed42;
  box-shadow: 0 3rem 6rem #0005, inset 0 1px #ffffff30;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1.1rem;
  border-radius: 1.5rem;
  transform: rotateY(-5deg) rotateX(3deg);
  overflow: visible;
}
.store-bar { padding: .3rem .2rem 1rem; min-height: 3rem; color: #d0c6df; font-size: .5rem; }
.product-grid { gap: 1.75rem .65rem; padding-block: .8rem 1.5rem; }
.product { box-shadow: 0 12px 20px #0002; border-color: #ffffff59; }
.product-count { width: 6.5rem; right: -.3rem; top: -.3rem; color: #292237; background: linear-gradient(140deg,#e3f9fb,#dcd4f7 53%,#f7e0e8); border: 1px solid #fff; transform: rotate(7deg); box-shadow: 0 1rem 3rem #0003; }
.product-count strong { font-size: 2rem; }
.product-count span { font-size: .48rem; }

/* A quieter breathing movement follows the catalogue. */
.ai-section { background: #111017; padding: 1rem var(--gutter) clamp(4rem, 7vw, 7rem); }
#ai .ai-shell { min-height: 43rem; background: #18131f; border: 1px solid #bc9fdf30; border-radius: 2rem; overflow: clip; }
#ai .ai-copy :is(h1, h2) { font-size: clamp(3rem, 5.3vw, 5.7rem); }
#ai .ai-energy { mix-blend-mode: screen; }
#ai .call-status { border-color: #d6bcf438; background: #211b2a9c; color: #eee2f7; }
#ai .call-name { font-family: var(--sans); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 500; letter-spacing: -.045em; }
#ai .ai-call-card { border-color: #d6bcf444; background: linear-gradient(135deg,#382a42ad,#15121dde); box-shadow: inset 0 1px #ffffff20,0 1.5rem 3rem #0002; }
#ai .call-outcome { color: #d9f3e9; border: 1px solid #a2dbcd2b; background: #b2e9d80a; }
#ai .ai-features li { color: #c8bed2; font-size: .65rem; letter-spacing: .045em; }

.care-card { border-color: #e3e0eb; border-radius: 1.5rem; background: #f5f4f8; }
.care-card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.9rem; letter-spacing: -.04em; }
.care-card.featured { background: linear-gradient(145deg,#302937,#17151f); border-color: #665274; }
.care-card p { opacity: .75; }
.addons { margin-top: 2.5rem; }
.work-section { background: #f0eff5; color: var(--ink); }
.work-section .section-intro, .work-section .section-head .eyebrow { color: #6e6678; }
.cases { gap: 1.5rem; }
.case { background: #faf9fc; border: 1px solid #e0dbe9; border-radius: 1.6rem; padding: 1.15rem; }
.case-top, .case-bottom span { color: #746a7f; }
.case h3 { color: var(--ink); font-family: var(--sans); font-size: clamp(1.5rem,2.7vw,2.6rem); font-weight: 600; letter-spacing: -.05em; }
.case-preview { border-color: #e2dbe9; }
.case:hover, .case:focus-visible { border-color: #a79bc1; }
.brief { background: radial-gradient(ellipse at 5% 80%,#e4f3f6,transparent 55%),radial-gradient(ellipse at 95% 30%,#eee5f6,transparent 60%),#fbfbfd; }
.brief::before, .brief::after { display: none; }
.brief h2 { font-size: clamp(2.8rem, 5.2vw, 5.5rem); max-width: 12ch; }
.brief-wrap { gap: clamp(2rem,5vw,5rem); }
.brief-copy p { color: #6b6475; }
.brief-meta { color: #75697c; }
.brief-form { background: #ffffffc9; color: var(--ink); border: 1px solid #e5dbed; box-shadow: 0 2rem 5rem #50376508; }
.field label { color: #74667d; }
.field input, .field textarea, .field select { color: var(--ink); border-color: #d3c9dd; }
.field input::placeholder, .field textarea::placeholder { color: #847a8c; opacity: 1; }
.field select { background: #f4f1f8; color-scheme: light; }
.field input:-webkit-autofill, .field textarea:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px #f7f4fa inset; caret-color: var(--ink); }
.brief-form .button { background: #292231; color: #fff; border-color: #292231; }
.brief-form .button:hover { background: #44344f; }
.brief-form .form-note { color: #6c6276; }
.brief-form .form-note a { color: #4f4266; }
.form-status { color: #413449; }
.form-status[data-state="error"] { color: #9e253e; }
.form-status[data-state="success"] { color: #245b4f; }
.foot { background: #fbfbfd; color: #59515f; border-top: 1px solid #e7deec; }
.foot-mark { display: inline-flex; align-items: center; }
.foot-mark img { width: 3rem; height: 3rem; mix-blend-mode: multiply; }
@media (max-width: 1100px) {
  .commerce-wrap { grid-template-columns: 1fr; }
  .commerce-copy { padding-top: 0; }
  .commerce h2 { max-width: 16ch; }
  .catalogue-stage { max-width: 45rem; justify-self: center; }
}
@media (max-width: 850px) {
  .chapter-grid, .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .chapter-copy { padding-top: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav { min-height: 4.6rem; }
  .hero .luminous-lockup { min-height: 6rem; font-size: 2.6rem; }
  .hero .luminous-lockup img { width: 6rem; height: 6rem; }
  .hero .hero-title { font-size: clamp(2.55rem, 10.5vw, 4.5rem); letter-spacing: -.06em; }
  .hero .hero-stage { height: 21rem; margin-top: 1.5rem; }
  .hero .hero-kicker { font-size: .48rem; text-align: center; justify-content: center; }
  .hero .outcomes { font-size: .52rem; }
  .hero .hero-atmosphere::before, .hero .hero-atmosphere::after { animation: none; }
  .chapter h2, .section-title, .commerce h2, .ai-copy :is(h1, h2), .brief h2 { font-size: clamp(2.3rem, 9vw, 3.8rem); }
  .tile, .tile:nth-child(n) { min-height: 8rem; padding: 1.15rem; }
  .package, .package:nth-child(n) { min-height: 23rem; }
  .product-grid { gap: 1rem .5rem; padding-block: .3rem .7rem; }
  .commerce-list { grid-template-columns: 1fr 1fr; gap: .5rem .85rem; }
  .store-window { padding: .65rem; transform: none; }
  .store-bar { padding-bottom: 1rem; padding-right: 4rem; }
  .product-count { width: 5rem; right: 0; top: .2rem; }
  .product-count strong { font-size: 1.5rem; }
  .product-info, .product-info b { font-size: .55rem; }
  #ai .ai-shell { min-height: 0; padding: 1.5rem; border-radius: 1.5rem; }
  #ai .ai-copy :is(h1, h2) { font-size: 2.8rem; }
  #ai .ai-energy { height: 540px; }
  .case-bottom span { max-width: none; }
  .form-grid { gap: 1.2rem; }
}
@media (max-width: 440px) { .hero .hero-stage { height: 18rem; } }
@media (prefers-reduced-motion: reduce) { .hero .hero-atmosphere::before, .hero .hero-atmosphere::after { animation: none; } }
@media (forced-colors: active) { .spectral-text { background: none; -webkit-text-fill-color: currentColor; } }
/* The glass K is the first letter, with lvr forming one continuous wordmark. */
.nav .luminous-mark,.foot .foot-mark,.hero .luminous-lockup {display:inline-flex;align-items:baseline;gap:.025em;letter-spacing:-.065em;font-family:var(--sans);font-weight:650;line-height:1;}
.nav .luminous-mark img,.foot .foot-mark img,.hero .luminous-lockup img {width:.85em;height:1em;object-fit:contain;margin:0 -.015em 0 0;align-self:center;mask-image:none;mix-blend-mode:multiply;}
.nav .luminous-mark,.foot .foot-mark {font-size:2.25rem;}
.hero .luminous-lockup {display:flex;font-size:clamp(3.4rem,6vw,4.5rem);min-height:1.4em;}
.hero .luminous-lockup span,.nav .luminous-mark span,.foot .foot-mark span {letter-spacing:-.065em;}
.hero .hero-depth-backdrop .hero-atmosphere {background:none;overflow:hidden;}
.hero .hero-atmosphere::before,.hero .hero-atmosphere::after {display:none;}
.hero-film {position:absolute;inset:0;overflow:hidden;background:url('/assets/hero-glass-poster.jpg') center/cover no-repeat;opacity:.64;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 72%,transparent 100%);}
.hero-film::after {content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 29%,#fbfbfdc9,transparent 65%);pointer-events:none;}
.hero-film video {width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.8s ease;}
.hero-film video.is-ready {opacity:1;}
.hero .hero-lockup,.hero .hero-stage {position:relative;z-index:2;}
@media(max-width:700px){.hero .luminous-lockup{font-size:3.3rem;min-height:1.4em}.nav .luminous-mark{font-size:2rem}.hero-film{opacity:.46}.hero-film video{object-position:48% center}}
@media(prefers-reduced-motion:reduce){.hero-film video{transition:none}}
/* Optical alignment: the glass K shares the lowercase wordmark's cap height. */
.nav .luminous-mark,.foot .foot-mark,.hero .luminous-lockup {align-items:center;}
.nav .luminous-mark img,.foot .foot-mark img,.hero .luminous-lockup img {height:.78em;width:.67em;}
.nav .luminous-mark span,.foot .foot-mark span,.hero .luminous-lockup span {transform:translateY(.055em);}

/* Standalone transparent K identity. */
.nav .luminous-mark img,.foot .foot-mark img{width:2.3rem;height:2.7rem;margin:0;mix-blend-mode:normal;mask-image:none;}
.hero .luminous-lockup img{width:4.3rem;height:5rem;margin:0;mix-blend-mode:normal;mask-image:none;}
.hero .luminous-lockup{min-height:6rem;}
@media(max-width:700px){.hero .luminous-lockup img{width:3.5rem;height:4rem}.hero .luminous-lockup{min-height:4.8rem;}}

/* ── motion.css ── */
/* Phase 1: one paper canvas, three fan depths. No layout is animation-dependent. */
:root {
  --motion-ease: var(--ease);
  --motion-control: 180ms;
  --motion-settle: 650ms;
  --motion-entrance: 1900ms;
  --motion-stagger: 80ms;
  --motion-travel: 64px;
  --motion-title-speed: .55;
  --motion-stage-speed: .25;
}
.hero-depth-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-depth-backdrop .hero-atmosphere {
  z-index: 0;
  background:
    radial-gradient(ellipse at 9% 48%, #ff715816, transparent 48%),
    radial-gradient(ellipse at 91% 52%, #245cff13, transparent 48%),
    radial-gradient(ellipse at 50% 44%, #ffffffd9, transparent 45%);
}
.hero::before, .hero::after { display: none; }
.hero .scene { animation-duration: var(--motion-entrance); animation-timing-function: var(--motion-ease); }
.hero .scene:nth-child(1), .hero .scene:nth-child(7) { --depth-speed: .25; animation-delay: calc(var(--motion-stagger) * 3.75); }
.hero .scene:nth-child(2), .hero .scene:nth-child(6) { --depth-speed: .45; animation-delay: calc(var(--motion-stagger) * 2.75); }
.hero .scene:nth-child(3), .hero .scene:nth-child(5) { --depth-speed: .7; animation-delay: calc(var(--motion-stagger) * 1.75); }
.hero .scene:nth-child(4) { --depth-speed: 1; animation-delay: var(--motion-stagger); }
/* Individual translate composes with the existing entrance, hover and pointer tilt. */
.hero.depth-ready .hero-lockup { translate: 0 calc(var(--hero-travel, 0px) * var(--motion-title-speed)); }
.hero.depth-ready .hero-stage { translate: 0 calc(var(--hero-travel, 0px) * var(--motion-stage-speed)); }
.hero.depth-ready .scene { translate: 0 calc(var(--hero-travel, 0px) * (var(--depth-speed) - var(--motion-stage-speed))); }
.hero .hero-actions, .hero .hero-utility, .hero .outcomes { position: relative; z-index: 5; }
.hero .scene:focus-visible {
  animation: none;
  transition: none;
  transform: translate3d(0, var(--y), 160px) rotateY(0deg);
  z-index: 10;
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}
/* Pin only the artwork; headings and links remain in normal document flow. */
@media (min-width: 1101px) and (min-height: 760px) {
  .hero.depth-ready .hero-atmosphere {
    position: sticky;
    inset: auto;
    top: 5.25rem;
    height: calc(100svh - 5.25rem);
    overflow: clip;
  }
}
@media (max-width: 1100px), (max-height: 759px) {
  :root { --motion-travel: 24px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .hero .fan { scale: .8; }
}
@media (max-width: 720px) {
  :root { --motion-travel: 12px; }
  .hero .orbit-three, .hero .light-point { display: none; }
}
/* Focus and user preferences always take precedence over choreography. */
.hero:focus-within .hero-lockup,
.hero:focus-within .hero-stage,
.hero:focus-within .scene,
.motion-paused .hero .hero-lockup,
.motion-paused .hero .hero-stage,
.motion-paused .hero .scene { translate: none; }
.motion-paused .hero .hero-atmosphere { position: absolute; inset: 0; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-lockup, .hero .hero-stage, .hero .scene { translate: none !important; }
  .hero .hero-atmosphere { position: absolute !important; inset: 0 !important; height: auto !important; }
}
/* Full-site choreography. Only bounded transform/opacity values change on scroll. */
@media (min-width: 1101px) and (min-height: 760px) {
  :root { --motion-travel: 88px; }
  .commerce-wrap { min-height: max(52rem, calc(100svh + 4rem)); }
  .commerce.depth-ready.can-pin .catalogue-stage { position: sticky; top: 7rem; align-self: start; }
}
.commerce { --catalogue-distance: 48px; }
.commerce .product { --row-speed: .25; }
.commerce .product:nth-child(n+5) { --row-speed: .6; }
.commerce .product:nth-child(n+9) { --row-speed: 1; }
.commerce.depth-ready .product { translate: 0 calc(var(--catalogue-y, 0px) * var(--row-speed)); }
.commerce.depth-ready .store-window { rotate: y var(--catalogue-turn, 0deg); }
.commerce.depth-ready .product-count { translate: 0 calc(var(--catalogue-y, 0px) * -.35); }
.commerce.depth-ready .store-window::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border-top: 1px solid #c7d3ff; pointer-events: none; opacity: var(--catalogue-edge, .5); }
#ai { --ai-distance: 40px; }
.commerce:focus-within .product, .commerce:focus-within .product-count { translate: none; }
.commerce:focus-within .store-window { rotate: none; }
@media (max-width: 1100px), (max-height: 759px) { .commerce { --catalogue-distance: 24px; } }
@media (max-width: 720px) {
  .commerce { --catalogue-distance: 12px; }
  #ai { --ai-distance: 14px; }
  .commerce .product:nth-child(n) { --row-speed: .25; }
  .commerce .product:nth-child(n+4) { --row-speed: .5; }
  .commerce .product:nth-child(n+7) { --row-speed: .75; }
  .commerce .product:nth-child(n+10) { --row-speed: 1; }
  .commerce.depth-ready .store-window { rotate: none; }
}
.motion-paused .commerce-wrap { min-height: 0; }
.motion-paused .commerce .catalogue-stage { position: relative; top: auto; }
.motion-paused .commerce .product, .motion-paused .commerce .product-count { translate: none; }
.motion-paused .commerce .store-window { rotate: none; }
#ai:focus-within .ai-depth-copy, #ai:focus-within .call-inner { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .commerce-wrap { min-height: 0; }
  .commerce .catalogue-stage { position: relative !important; top: auto !important; }
  .commerce .product, .commerce .product-count { translate: none !important; }
  .commerce .store-window { rotate: none !important; }
}

/* ── studio.css ── */
/* KLVR Studio: open compositions, a focused glass scene, and real work first. */
:root{--studio-muted:#666570}
.nav{padding-block:1rem;background:#fbfbfdf0;backdrop-filter:blur(18px)}
@media(min-width:1101px){.nav details{display:none}}
.hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:2rem;min-height:min(850px,calc(100svh - 80px));padding:2.75rem max(3vw,calc((100vw - 1440px)/2)) 1.5rem;isolation:isolate;overflow:clip;}
.hero .hero-kicker{grid-column:1/-1;margin:0;position:relative;z-index:3;font-size:.66rem;letter-spacing:.08em;}
.hero .hero-lockup{grid-column:1;grid-row:2;align-self:center;text-align:left;padding:3rem 0 4rem;max-width:41rem;}
.hero .hero-title{font-size:clamp(3.2rem,5.5vw,5.25rem);line-height:1.07;letter-spacing:-.055em;text-align:left;margin:0;}
.hero .hero-title .spectral-text{background:none;color:#716094;-webkit-text-fill-color:currentColor;}
.hero-description{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.7;color:#64616c;max-width:31rem;margin:1.75rem 0 2rem;}
.hero .hero-actions{justify-content:flex-start;gap:.75rem;margin:0;flex-wrap:wrap;}
.hero .hero-actions .button{min-height:3.25rem;padding-inline:1.35rem;font-size:.82rem;}
.hero .hero-depth-backdrop{left:41%;right:-9%;top:5%;bottom:5%;z-index:-1;}
.hero .hero-depth-backdrop .hero-atmosphere{position:absolute;inset:0;height:100%;width:100%;}
.hero-film{opacity:.67;mask-image:radial-gradient(ellipse at 53% 48%,#000 24%,transparent 72%);}
.hero-film::after{background:linear-gradient(90deg,#fbfbfd70,transparent 45%);}
.hero-film video{object-fit:cover;}
.hero .hero-stage{grid-column:2;grid-row:2;align-self:center;height:30rem;margin:0;width:100%;perspective:1400px;}
.hero .fan{position:relative;width:100%;height:100%;transform:none!important;}
.hero .scene{left:50%;top:50%;width:clamp(150px,16vw,230px);height:22rem;--x:0px;--y:-50%;--r:0deg;transform:translate(calc(-50% + var(--x)),-50%) rotate(var(--r));animation:studio-arrive 1.5s cubic-bezier(.16,1,.3,1) both;box-shadow:0 25px 45px #24213722;border:1px solid #ffffff70;transition:box-shadow .3s,filter .3s;}
.hero .scene:nth-child(1){--x:-105px;--r:-9deg;z-index:1;animation-delay:.12s;--depth-speed:.4;}
.hero .scene:nth-child(2){--x:0px;--r:0deg;z-index:3;animation-delay:.22s;--depth-speed:1;}
.hero .scene:nth-child(3){--x:105px;--r:9deg;z-index:2;animation-delay:.32s;--depth-speed:.65;}
.hero .scene:hover{transform:translate(calc(-50% + var(--x)),-53%) rotate(var(--r));box-shadow:0 30px 55px #24213733;}
.hero .scene:focus-visible{transform:translate(-50%,-50%)!important;z-index:10;outline:3px solid #7957be;}
@keyframes studio-arrive{from{opacity:0;transform:translate(-50%,-42%) rotate(0deg) scale(.94)}to{opacity:1;transform:translate(calc(-50% + var(--x)),-50%) rotate(var(--r))}}
.hero-caption{grid-column:2;grid-row:3;margin:0;text-align:center;font-size:.72rem;color:#6d6876;align-self:center;}
.hero .hero-utility{grid-column:1;grid-row:3;margin:0;gap:1.5rem;justify-content:flex-start;}
.hero-next{color:#55505f;text-decoration:none;font-size:.72rem;display:inline-flex;gap:1rem;align-items:center;}
.hero .motion-toggle{position:static;}
.work-section{background:#f4f3f6;padding-top:6.5rem;padding-bottom:6.5rem;border-radius:0;}
.section-title,.chapter h2,.commerce h2,.ai-copy :is(h1, h2),.brief h2{letter-spacing:-.045em;}
.eyebrow,.package-no,.case-top,.brief-meta{font-size:.7rem!important;color:#6e6978;}
.work-section .cases{display:grid;grid-template-columns:1.12fr 1fr;gap:3.5rem;align-items:start;}
.work-section .case{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;}
.work-section .case:nth-child(2){margin-top:7rem;}
.work-section .case-top{margin-bottom:1rem;}
.work-section .case-preview{border-radius:1rem;aspect-ratio:16/10;overflow:hidden;box-shadow:0 24px 45px #25203312;}
.work-section .case-preview img{height:100%;object-fit:cover;object-position:top;transition:transform .65s cubic-bezier(.2,.7,.3,1);}
.work-section .case:hover .case-preview img{transform:scale(1.035);}
.case-story{color:#64616b;font-size:.95rem;line-height:1.75;margin:1.5rem 0 1rem;max-width:38rem;}
.work-section .case-bottom{align-items:start;gap:1rem;}
.work-section .case-bottom h3{font-size:1.9rem;}
.work-section .case-bottom>span{font-size:.62rem;max-width:15rem;line-height:1.7;color:#6a6473;}
.chapter{border-radius:0;background:#fbfbfd;}
.chapter .tiles{gap:2rem;}
.chapter .tile,.chapter .tile:nth-child(n){background:transparent;border:0;border-top:1px solid #dcd9e2;border-radius:0;box-shadow:none;min-height:10rem;padding:1.35rem 0;}
.chapter .tile::before,.chapter .tile::after{display:none;}
.chapter .tile:hover{background:transparent;transform:translateY(-4px);}
#services{background:#f7f7fa;}
.package{box-shadow:none;border-color:#e1dfe7;}
#ai .ai-energy{inset:9% 0 9% 43%;opacity:.58;filter:saturate(.75);}
#ai .ai-shell{border-radius:2rem;}
#ai .ai-energy-space{height:8rem;}
#ai .ai-call-card{background:linear-gradient(135deg,#eee7ff1c,#17131eaa);border-color:#ece6ff2b;}
#ai .call-status{font-size:.67rem;}
.brief-form input,.brief-form textarea,.brief-form select{transition:background .2s,border-color .2s;}
.brief-form input:focus,.brief-form textarea:focus,.brief-form select:focus{background:#f1eef8;border-color:#8571ad;outline:2px solid #8571ad;outline-offset:3px;}
.brief-form .field:focus-within label{color:#655184;}
@media(max-width:1100px){
.hero{min-height:720px;padding-inline:2rem;gap:1rem}.hero .hero-title{font-size:clamp(2.75rem,5.5vw,4rem)}
.hero .hero-stage{height:26rem}.hero .scene{width:170px;height:20rem}.hero .scene:nth-child(1){--x:-65px}.hero .scene:nth-child(3){--x:65px}
.work-section .cases{gap:2rem}.work-section .case-bottom{display:block}.work-section .case-bottom>span{display:block;margin-top:.65rem}
#ai .ai-energy{inset:auto 2% 2%;height:470px;}
}
@media(max-width:700px){
.hero{display:flex;flex-direction:column;min-height:0;padding:1.75rem 1.25rem 2rem;gap:0;}
.hero .hero-kicker{font-size:.58rem;justify-content:flex-start;text-align:left}.hero-kicker>span:last-child{display:none}
.hero .hero-lockup{padding:2.25rem 0 1rem;width:100%;max-width:none;}.hero .hero-title{font-size:clamp(2.7rem,10.4vw,4rem);letter-spacing:-.05em;}
.hero-description{font-size:1rem;margin:1.25rem 0 1.5rem;max-width:28rem;}
.hero .hero-actions{flex-direction:row;gap:.6rem}.hero .hero-actions .button{width:auto;min-height:3rem;padding-inline:1rem;font-size:.72rem;}
.hero .hero-depth-backdrop{inset:35% -35% 4% -15%;}.hero-film{opacity:.5;}
.hero .hero-stage{display:block;width:100%;height:22rem;margin:1.25rem 0 0;flex:none;}
.hero .scene{display:block!important;width:150px;height:19rem;}.hero .scene:nth-child(1){--x:-72px}.hero .scene:nth-child(3){--x:72px}
.hero-caption{font-size:.66rem;order:4;margin-top:.25rem;}.hero .hero-utility{order:5;justify-content:space-between;width:100%;margin-top:1.5rem;}
.work-section{padding-top:4rem;padding-bottom:4rem}.work-section .cases{grid-template-columns:1fr;gap:3rem;}.work-section .case:nth-child(2){margin-top:0;}.work-section .case-bottom{display:flex;}
.chapter .tiles{gap:1.2rem;}.chapter .tile,.chapter .tile:nth-child(n){min-height:8rem;}
}
.motion-paused .hero .scene{animation:none!important;}
@media(prefers-reduced-motion:reduce){.hero .scene{animation:none!important}.case-preview img,.chapter .tile{transition:none!important}}
@media(max-width:700px){.hero .hero-stage{height:24rem}.hero-caption{margin-top:1rem;}}

/* ── glass-garden.css ── */
/* GetLayers Glass Flower, adapted as KLVR's living care illustration. */
#care .care-garden{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.5rem;min-height:30rem;padding:4rem;border-radius:1.5rem;background:#14121b;color:#fff;margin-bottom:3rem;}
#care .care-garden>div:first-child,#care .care-garden>.section-intro{position:relative;z-index:2;width:51%;max-width:32rem;margin:0;}
#care .care-garden .eyebrow{color:#b4a8c9!important;}
#care .care-garden h2{font-size:clamp(2.8rem,4.8vw,4.8rem);line-height:1.08;max-width:9ch;color:#faf8ff;}
#care .care-garden>.section-intro{color:#c5bece;font-size:1rem;line-height:1.8;}
.garden-art{position:absolute;inset:0 -7% 0 43%;z-index:0;pointer-events:none;background:url('/assets/klvr-glass-garden-poster.webp') center/cover;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 17% 83%,transparent);}
.garden-art video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;opacity:0;transition:opacity 1.2s;}
.garden-art video.is-ready{opacity:1;}
.garden-light{position:absolute;inset:0;background:linear-gradient(125deg,#55d6e9 8%,#9980db 45%,#f0ad99 82%);mix-blend-mode:color;opacity:.8;}
.garden-caption{position:absolute;bottom:2rem;left:0;right:0;text-align:center;color:#cec4dc;letter-spacing:.1em;font-size:.65rem;text-transform:uppercase;}
/* Original KLVR edge-light treatment ties the catalogue to the same spectrum. */
.catalogue{position:relative;}
.catalogue::after{content:'';position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(125deg,#77dbe660,#a588ed40,#f1b49770) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;}
@media(max-width:700px){#care .care-garden{padding:2rem 1.5rem 20rem;min-height:0;gap:1.1rem;}#care .care-garden>div:first-child,#care .care-garden>.section-intro{width:100%;max-width:none;}#care .care-garden h2{font-size:2.8rem;max-width:10ch;}.garden-art{inset:auto -12% 0;height:20rem;mask-image:linear-gradient(transparent,#000 16% 90%,transparent);}.garden-caption{bottom:1.25rem;}}
@media(prefers-reduced-motion:reduce){.garden-art video{transition:none;}}

/* ── intelligence.css ── */
/* KLVR Liquid Intelligence — one spectral light source, refracted through every surface.
   Apple's Liquid Glass and the Layers "Stride" study both put light into the dark.
   KLVR's take is the inverse: light inside light. Paper stays paper; the KLVR spectrum
   becomes the single physical light in the room, and every surface either bends it,
   catches its rim, or falls away from it. Layered last — this pass only tunes. */

/* §00 · THE LIGHT */
:root {
  --lumen-cyan: #32d7ef;
  --lumen-blue: #608aff;
  --lumen-violet: #9460ef;
  /* The same violet, taken down until it carries body text on paper (6.6:1 on #fbfbfd). */
  --lumen-violet-ink: #6b3ec2;
  --lumen-pink: #f16ec4;
  --lumen-amber: #f5b35b;
  --lumen-arc: linear-gradient(112deg, var(--lumen-cyan), var(--lumen-blue) 27%, var(--lumen-violet) 49%, var(--lumen-pink) 72%, var(--lumen-amber));
  --lumen-arc-soft: linear-gradient(112deg, #32d7ef5c, #608aff52 27%, #9460ef57 49%, #f16ec452 72%, #f5b35b5c);
  /* One rim light and one shadow ramp, reused so every glass surface agrees. */
  --rim: inset 0 1px 0 #ffffffe6, inset 0 0 0 1px #ffffff5c;
  --rim-dark: inset 0 1px 0 #ffffff2e, inset 0 0 0 1px #ffffff14;
  --lift-1: 0 1px 2px #1d17331a, 0 10px 24px -16px #241d4229;
  --lift-2: 0 1px 2px #1d173314, 0 18px 38px -22px #241d4233, 0 40px 80px -48px #241d422e;
  --lift-3: 0 2px 5px #1d173314, 0 30px 60px -28px #241d423d, 0 60px 120px -60px #241d4238;
  --glass-blur: saturate(1.7) blur(26px);
  --lumen-settle: 760ms;
}

/* §01 · CHROME · the navigation leaves the edge and becomes a lens */
/* A progressive blur band so content dissolves under the capsule instead of
   colliding with the viewport edge. Colour-agnostic, so it works over paper and ink alike. */
body::before {
  content: "";
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  height: 5.6rem;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(#000 34%, #00000059 66%, transparent);
  mask-image: linear-gradient(#000 34%, #00000059 66%, transparent);
  transition: opacity .5s var(--ease);
}
body:has(.nav.is-scrolled)::before { opacity: 1; }
.nav {
  top: .7rem;
  width: min(1320px, calc(100% - 2 * var(--gutter)));
  margin: .7rem auto 0;
  min-height: 4.3rem;
  padding: .55rem clamp(.85rem, 1.5vw, 1.5rem);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), min-height .55s var(--ease);
}
.nav.is-scrolled {
  min-height: 4rem;
  background: #fbfbfdba;
  border-color: #2a234a17;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--rim), var(--lift-2);
}
/* The progress hairline lives inside the capsule instead of cutting across the page. */
.nav .reading-progress {
  left: 1.15rem;
  right: 1.15rem;
  bottom: .4rem;
  width: auto;
  height: 1.5px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.nav.is-scrolled .reading-progress { opacity: .85; }
.nav-links a::after { bottom: .2rem; height: 1.5px; border-radius: 999px; background: var(--ink); }
.nav-links a[aria-current="location"]::after { background: var(--lumen-violet-ink); }
.nav .menu-panel {
  right: 0;
  top: calc(100% + .7rem);
  border-radius: 1.7rem;
  border-color: #2a234a17;
  /* Opaque enough that the panel's own link colours keep their contrast when it
     hangs over a near-black section; the blur still does the glass work. */
  background: #fbfbfdf2;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--rim), var(--lift-3);
}
.nav .menu-panel > a { border-bottom-color: #2a234a14; }
/* The brand violet is only 3.9:1 on paper. Links are body-sized here, so the accent
   has to be the darkened version, not the light-source one. */
.nav .menu-panel > a:hover, .nav .menu-panel > a:focus-visible { color: var(--lumen-violet-ink); }

/* §02 · CONTROLS · capsules that catch the light as they are touched */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .4s var(--ease), background .4s var(--ease), color .35s ease, border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, #ffffff00 30%, #ffffff5e 47%, #ffffff00 64%);
  transform: translate3d(-130%, 0, 0);
  transition: transform 1s var(--ease);
  pointer-events: none;
}
.button:hover::before, .button:focus-visible::before { transform: translate3d(130%, 0, 0); }
.button:active { transform: translateY(-1px) scale(.985); }
.nav .button.dark, .hero .button.dark, #ai .button.dark, .brief-form .button {
  background: linear-gradient(#2d2939, #17151e);
  border-color: transparent;
  box-shadow: var(--rim-dark), var(--lift-1);
}
.nav .button.dark:hover, .hero .button.dark:hover, #ai .button.dark:hover, .brief-form .button:hover,
.nav .button.dark:focus-visible, .hero .button.dark:focus-visible, #ai .button.dark:focus-visible {
  background: linear-gradient(#37324a, #1c1926);
  box-shadow: var(--rim-dark), 0 2px 6px #1d173321, 0 18px 40px -20px #6a4fbf5c, 0 0 28px -8px #9460ef47;
}
.nav .menu, .hero .button.light {
  background: linear-gradient(#ffffffe0, #f7f5fccc) padding-box, var(--lumen-arc-soft) border-box;
  border: 1px solid transparent;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
}
/* Only the nav capsule sits over moving content; the hero pair does not, so it pays nothing. */
.hero .button.light { backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav .menu:hover, .hero .button.light:hover, .hero .button.light:focus-visible {
  background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 16px 34px -18px #6a4fbf4d;
}
/* The two overlay buttons sit on near-black, so they get the dark glass instead.
   Their margin and colour used to live in a style attribute, which also carried a
   background and border-color that outranked every rule below. Both now live here. */
#commerce .button.light, #ai .button.light {
  margin-top: 2rem;
  color: #fff;
  /* The capsule edge is the only thing saying "button" on near-black, so it has to clear
     the 3:1 non-text minimum: 40% white reads 3.8:1 over #111017 and #18131f alike. */
  background: #ffffff14;
  border-color: #ffffff66;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--rim-dark);
}
#commerce .button.light:hover, #ai .button.light:hover,
#commerce .button.light:focus-visible, #ai .button.light:focus-visible {
  background: #ffffff26;
  border-color: #ffffffa6;
  box-shadow: var(--rim-dark), 0 0 34px -10px #9460ef8f;
}

/* §03 · DISPLAY TYPE · light falls across a headline and runs out of energy */
.hero-title, .section-title, .chapter h2, .commerce h2, #ai .ai-copy :is(h1, h2), .brief h2, #care .care-garden h2 {
  background-image: linear-gradient(104deg, var(--lumen-near) 6%, var(--lumen-mid) 44%, var(--lumen-far) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title, .section-title, .chapter h2, .brief h2, #ai .ai-copy :is(h1, h2) {
  --lumen-near: #0d0c14;
  --lumen-mid: #232037;
  --lumen-far: #4b4666;
}
.commerce h2, #care .care-garden h2 {
  --lumen-near: #ffffff;
  --lumen-mid: #f2edfb;
  --lumen-far: #bfb5d4;
}
/* The spectral phrase is its own light source and must not inherit the falloff. */
.hero .hero-title .spectral-text { background-image: none; }
.spectral-text { -webkit-text-fill-color: transparent; }
.hero .hero-title .spectral-text { -webkit-text-fill-color: currentColor; }

/* §04 · THE HERO LIGHT FIELD · refraction on paper, not a glow in the dark */
.lumen-field {
  position: absolute;
  z-index: -2;
  inset: -22% -14% -12% -22%;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}
/* The pointer offset lives on these two wrappers. Nothing that animates may read it:
   a var() inside @keyframes re-snapshots the animation on every custom-property write
   and drops it off the compositor. */
.lumen-field > span {
  position: absolute;
  left: 50%;
  top: 46%;
  display: block;
  width: 78rem;
  height: 78rem;
  margin: -39rem 0 0 -39rem;
  border-radius: 50%;
  overflow: hidden;
}
/* The bloom: a white core with spectral fringes, the way light leaves real glass. */
.lumen-core {
  background:
    radial-gradient(closest-side, #ffffff 0 34%, #ffffff00 72%),
    conic-gradient(from 168deg,
      #32d7ef2e, #608aff29 15%, #9460ef2e 33%, #f16ec429 52%,
      #f5b35b26 68%, #9460ef24 84%, #32d7ef2e 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, #00000091 46%, transparent 74%);
  mask-image: radial-gradient(closest-side, #000 18%, #00000091 46%, transparent 74%);
  transform: translate3d(var(--lumen-dx, 0px), var(--lumen-dy, 0px), 0);
  /* Short enough to actually converge. A long transition retargeted every frame is not
     smoothing — it is a trail that never arrives. */
  transition: transform 420ms var(--ease);
}
/* The filaments: Stride's light threads, read as caustics on paper. The wrapper carries the
   pointer offset; the turning happens on a child, so the rotation stays on the compositor. */
.lumen-rays {
  opacity: .75;
  transform: translate3d(calc(var(--lumen-dx, 0px) * .45), calc(var(--lumen-dy, 0px) * .45), 0);
  transition: transform 560ms var(--ease);
}
.lumen-rays::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(from 0deg,
    #3a2f6e00 0 1.15deg, #3a2f6e12 1.15deg 1.3deg, #3a2f6e00 1.3deg 2.6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 8%, #000 26%, #00000075 48%, transparent 68%);
  mask-image: radial-gradient(closest-side, transparent 8%, #000 26%, #00000075 48%, transparent 68%);
  animation: lumen-turn 220s linear infinite;
}
@keyframes lumen-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* The device fan now reads as glass held in that light. */
.hero .scene {
  border-color: #ffffff8f;
  box-shadow:
    inset 0 1px 0 #ffffff59,
    0 1px 2px #1d173321,
    0 26px 48px -26px #241d4247,
    0 0 42px -18px #9460ef3d;
}
.hero .scene:hover {
  box-shadow:
    inset 0 1px 0 #ffffff80,
    0 2px 5px #1d17331c,
    0 34px 62px -28px #241d4259,
    0 0 56px -16px #9460ef66;
}
.hero-film::after { background: radial-gradient(ellipse at 52% 44%, #fbfbfdb3, transparent 62%), linear-gradient(90deg, #fbfbfd85, transparent 46%); }

/* §05 · PROOF · three plain facts, set like Stride's numerals */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 34rem;
  margin: 2.4rem 0 0;
  padding: 0;
}
.hero-proof > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  padding-left: clamp(1.1rem, 2.4vw, 2.6rem);
  border-left: 1px solid #2a234a1f;
}
.hero-proof > div:first-child { padding-left: 0; border-left: 0; }
.hero-proof dt {
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
  color: #201d31;
}
.hero-proof dd {
  margin: 0;
  max-width: 11rem;
  font-size: .66rem;
  line-height: 1.55;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #6c6779;
}
.hero .hero-lockup { padding-bottom: 2.25rem; }

/* §06 · LIGHT FIELDS · a diffuse colour behind the glass, so the glass has something to bend */
#services, #care, .work-section, .chapter {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
#services {
  background:
    radial-gradient(58% 44% at 12% 8%, #32d7ef14, transparent 62%),
    radial-gradient(52% 46% at 92% 34%, #9460ef17, transparent 64%),
    radial-gradient(60% 40% at 58% 104%, #f16ec412, transparent 60%),
    #f7f7fa;
}
.work-section {
  background:
    radial-gradient(54% 42% at 88% 6%, #608aff14, transparent 62%),
    radial-gradient(48% 40% at 6% 72%, #f5b35b12, transparent 60%),
    #f4f3f6;
}
#care {
  background:
    radial-gradient(56% 40% at 84% 88%, #9460ef14, transparent 62%),
    radial-gradient(50% 38% at 10% 18%, #32d7ef12, transparent 60%),
    var(--paper);
}
.chapter {
  background:
    radial-gradient(60% 44% at 78% 0%, #9460ef12, transparent 64%),
    #fbfbfd;
}
.chapter::before { display: none; }

/* §07 · SEAMS · light does not stop at a section boundary, it bleeds across it */
.commerce::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: 22rem;
  pointer-events: none;
  animation: none;
  width: auto;
  border-radius: 0;
  filter: none;
  opacity: 1;
  background:
    linear-gradient(#f7f7fa2b, #f7f7fa00 46%),
    radial-gradient(130% 100% at 50% -6%, #9460ef2e, transparent 64%);
}
.commerce::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  height: 1px;
  width: auto;
  border-radius: 0;
  filter: none;
  animation: none;
  opacity: .6;
  pointer-events: none;
  background: var(--lumen-arc);
}
/* The receptionist is the first light section after the dark catalogue, so the return
   seam lives on #ai: the ink bleeds a little way down into the paper. */
#ai::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 20rem;
  pointer-events: none;
  background:
    linear-gradient(#17131f2e, #17131f00 44%),
    radial-gradient(130% 100% at 50% -4%, #608aff1f, transparent 62%);
}
.brief {
  background:
    radial-gradient(ellipse at 6% 82%, #d8f2f7, transparent 55%),
    radial-gradient(ellipse at 94% 26%, #ece1f8, transparent 58%),
    radial-gradient(ellipse at 62% 108%, #fbe8dd, transparent 50%),
    #fbfbfd;
}

/* §08 · GLASS SURFACES · one card recipe, three temperaments.
   The fill stays translucent so the section's light field shows through it, and the spectral
   rim is a separate masked ring — never a border-box background layer, which would bleed
   colour straight through a translucent fill. */
.package, .package:nth-child(n), .care-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffffd1;
  background:
    radial-gradient(360px circle at var(--spot-x, 118%) var(--spot-y, -18%), #ffffffe0, #ffffff00 70%),
    linear-gradient(158deg, #ffffffd1, #f5f3faa3);
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.package::before, .care-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--lumen-arc-soft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.package:nth-child(n):hover, .package:nth-child(n):focus-within, .care-card:hover, .care-card:focus-within {
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-.4rem);
  background:
    radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), #ffffff, #ffffff00 72%),
    linear-gradient(158deg, #fffffff0, #f6f4fbcc);
  box-shadow: inset 0 1px 0 #fff, var(--lift-3);
}
.package:hover::before, .package:focus-within::before,
.care-card:hover::before, .care-card:focus-within::before { opacity: 1; }
.package.custom, .care-card.featured {
  color: #fff;
  border-color: #ffffff21;
  background:
    radial-gradient(400px circle at var(--spot-x, 112%) var(--spot-y, -14%), #ffffff2e, #ffffff00 68%),
    linear-gradient(152deg, #2e2740, #16141f);
  box-shadow: var(--rim-dark), var(--lift-2);
}
.package.custom:hover, .package.custom:focus-within, .care-card.featured:hover, .care-card.featured:focus-within {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(460px circle at var(--spot-x, 50%) var(--spot-y, 50%), #ffffff3d, #ffffff00 70%),
    linear-gradient(152deg, #362d4c, #191725);
  box-shadow: var(--rim-dark), var(--lift-3), 0 0 46px -18px #9460ef7a;
}
/* These two must match the :nth-child(n) specificity above, or the card-level focus ring
   that refinements.css established is silently outranked and never renders. */
.package:nth-child(n):focus-within { box-shadow: inset 0 1px 0 #fff, var(--lift-3), 0 0 0 2px #5158cf; }
.package.custom:focus-within { box-shadow: var(--rim-dark), var(--lift-3), 0 0 0 2px #b4a2dc; }
.package-link { position: relative; z-index: 2; border-top-color: currentColor; }
/* The tiles are square-cornered, so a gradient border-image is the honest tool here. */
.chapter .tile, .chapter .tile:nth-child(n) {
  border-top: 1px solid #dcd9e2;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.chapter .tile:hover, .chapter .tile:focus-visible {
  border-top-color: transparent;
  border-image-source: var(--lumen-arc);
  border-image-slice: 1;
}
.work-section .case-preview {
  border: 1px solid #ffffffb8;
  box-shadow: inset 0 1px 0 #ffffffcc, var(--lift-2);
  transition: box-shadow .5s var(--ease);
}
.work-section .case:hover .case-preview { box-shadow: inset 0 1px 0 #ffffffcc, var(--lift-3), 0 0 50px -22px #9460ef66; }
.brief-form {
  border: 1px solid #ffffffd9;
  background: linear-gradient(158deg, #ffffffd6, #fbfafdcc);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: inset 0 1px 0 #fff, var(--lift-3);
}
.foot {
  position: relative;
  border-top: 0;
  background: linear-gradient(#fbfbfd, #f6f5fa);
}
.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  opacity: .32;
  background: var(--lumen-arc);
  pointer-events: none;
}
.foot a:hover { color: var(--lumen-violet-ink); text-decoration: underline; text-underline-offset: 4px; }
#commerce .store-window { box-shadow: var(--rim-dark), 0 3rem 6rem #0006, 0 0 80px -30px #9460ef80; }
#care .care-garden { box-shadow: var(--rim-dark); }

/* §08b · LISTENING · a spectral rim travels the edge, but only where it means something:
   the receptionist that is answering, and the form while someone is typing into it. */
.lumen-rim {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
  /* The still ring. Whenever the travelling highlight is switched off, this is what is left. */
  background: var(--lumen-arc);
}
.lumen-rim::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 125%;
  aspect-ratio: 1;
  margin: -62.5% 0 0 -62.5%;
  background: conic-gradient(from 0deg,
    #16121c00 0 6%, #32d7ef 14%, #608aff 20%, #9460ef 27%, #f16ec4 34%,
    #f5b35b 40%, #16121c00 52%, #16121c00 100%);
  animation: lumen-travel 14s linear infinite;
}
@keyframes lumen-travel {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.brief-form { position: relative; }
.brief-form .lumen-rim { opacity: 0; transition: opacity .6s var(--ease); }
.brief-form .lumen-rim::before { animation-play-state: paused; }
.brief-form:focus-within .lumen-rim { opacity: .75; }
.brief-form:focus-within .lumen-rim::before { animation-play-state: running; }
/* Scoped to #ai on purpose: an unscoped .motion-paused .lumen-rim would outrank
   .brief-form .lumen-rim and leave the form ringed even when nothing is focused. */
.motion-paused .lumen-rim::before { display: none; }
.motion-paused #ai .lumen-rim { opacity: .3; }

/* §09 · ARRIVAL · content resolves out of the light instead of sliding in */
.reveal, .reveal.reveal-ready, .reveal.reveal-ready.in {
  transition:
    opacity var(--lumen-settle) var(--ease) calc(var(--reveal-i, 0) * 70ms),
    transform var(--lumen-settle) var(--ease) calc(var(--reveal-i, 0) * 70ms),
    filter var(--lumen-settle) var(--ease) calc(var(--reveal-i, 0) * 70ms);
}
.reveal.reveal-ready {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(7px);
}
.reveal.reveal-ready.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* §10 · PREFERENCES · the light is art direction, never a requirement */
.motion-paused .lumen-rays::before { animation: none; }
.motion-paused .lumen-core, .motion-paused .lumen-rays { transform: none; }
.motion-paused .reveal, .motion-paused .reveal.reveal-ready, .motion-paused .reveal.reveal-ready.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
/* On a short laptop the proof row is the difference between the hero fitting and not.
   Tighten the lockup rather than let the utility row fall past the fold. */
@media (min-width: 701px) and (max-height: 780px) {
  .hero .hero-lockup { padding-top: 2rem; padding-bottom: 1.35rem; }
  .hero-proof { margin-top: 1.6rem; }
  .hero-proof dt { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
}
@media (max-width: 1100px) {
  .nav { width: calc(100% - 2 * var(--gutter)); grid-template-columns: 1fr auto; }
  /* studio.css shows the Menu below 1101px and the panel is a superset of these links.
     The capsule is narrower than the old full-bleed bar, so showing both wraps the CTA. */
  .nav .nav-links { display: none; }
  .nav .nav-actions { grid-column: 2; }
  .nav .button { white-space: nowrap; }
  .hero-proof { margin-top: 2rem; }
}
@media (max-width: 700px) {
  .nav { top: .5rem; margin-top: .5rem; min-height: 3.9rem; padding-inline: .9rem; }
  .nav.is-scrolled { min-height: 3.7rem; }
  .nav .reading-progress { left: .85rem; right: .85rem; bottom: .32rem; }
  .lumen-field { inset: -12% -30% 6% -30%; }
  .lumen-field > span { top: 54%; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; }
  /* A tall, narrow card cannot be covered by a rotating square without a huge layer,
     and a phone is the wrong place to pay for one. The still ring carries it. */
  .lumen-rim::before { display: none; }
  #ai .lumen-rim { opacity: .38; }
  .hero-proof { margin-top: 1.75rem; }
  .hero-proof > div { padding-left: .8rem; }
  .hero-proof dt { font-size: 1.4rem; }
  /* Never below the page's own small-label floor — these three carry real content. */
  .hero-proof dd { font-size: .62rem; letter-spacing: .05em; max-width: none; }
  .hero .hero-lockup { padding-bottom: 1.25rem; }
  .commerce::before { height: 14rem; }
  #care::before { height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lumen-rays::before { animation: none; }
  .lumen-rim::before { display: none; }
  #ai .lumen-rim { opacity: .3; }
  .lumen-core, .lumen-rays { transform: none; transition: none; }
  .button::before { display: none; }
  .reveal, .reveal.reveal-ready, .reveal.reveal-ready.in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
@media (prefers-contrast: more) {
  .hero-title, .section-title, .chapter h2, .commerce h2, #ai .ai-copy :is(h1, h2), .brief h2, #care .care-garden h2,
  .spectral-text, .hero .hero-title .spectral-text {
    background: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
  /* A headline is half heading, half spectral phrase; both halves have to go solid together. */
  .spectral-text, .hero .hero-title .spectral-text { color: #3b3358; }
  .commerce .spectral-text { color: #fff; }
  .hero-proof dd { color: #4a4657; }
  .nav.is-scrolled { background: #fbfbfd; border-color: currentColor; }
  /* Nothing soft-focus or tinted survives when the reader has asked for maximum legibility —
     including the blur band, which would otherwise smear text passing under the nav. */
  .lumen-rays, .lumen-rim, .lumen-core, body::before { display: none; }
}
@media (forced-colors: active) {
  .hero-title, .section-title, .chapter h2, .commerce h2, #ai .ai-copy :is(h1, h2), .brief h2, #care .care-garden h2,
  .spectral-text, .hero .hero-title .spectral-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    forced-color-adjust: none;
    color: CanvasText;
  }
  /* Forced colours override background-color but not background-image, so every gradient
     here has to be removed by hand or it survives on top of the system palette. */
  .lumen-field, .lumen-rim, .commerce::before, .commerce::after, body::before { display: none; }
  .nav { border: 1px solid CanvasText; }
}

/* ── work.css ── */
/* Selected work: the real sites, at the size they deserve, desktop and phone together.
   Composition from the Astra study; the glass rim and lift come from intelligence.css. */
.work-section .cases {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3.5rem, 7vw, 6rem);
  max-width: 1120px;
  margin-inline: auto;
}
.work-section .case:nth-child(2) { margin-top: 0; }
.case-showcase {
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 3vw, 2.5rem) 13% clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: 1.6rem;
  border: 1px solid #ffffffc9;
  background:
    radial-gradient(70% 90% at 92% 100%, #9460ef1f, transparent 70%),
    radial-gradient(60% 80% at 4% 0%, #32d7ef17, transparent 70%),
    linear-gradient(135deg, #ebe7f0, #f9f7fb 70%);
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
}
.shop-case .case-showcase {
  background:
    radial-gradient(70% 90% at 92% 100%, #f5b35b1f, transparent 70%),
    radial-gradient(60% 80% at 4% 0%, #f16ec412, transparent 70%),
    linear-gradient(130deg, #ebe8e1, #f8f6f1 72%);
}
.dine-case .case-showcase {
  background:
    radial-gradient(70% 90% at 92% 100%, #b8955e24, transparent 70%),
    radial-gradient(60% 80% at 4% 0%, #8a2c3a12, transparent 70%),
    linear-gradient(130deg, #ece6df, #f9f6f2 72%);
}
.work-section .case-preview { aspect-ratio: 16 / 9; border-radius: .9rem; }
.case-mobile {
  position: absolute;
  right: 3.5%;
  bottom: 1.5rem;
  width: 17%;
  aspect-ratio: 390 / 844;
  border: 5px solid #f7f7f9;
  border-radius: 1.3rem;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d17331a, 0 26px 50px -22px #241d4252;
  transform: rotate(3deg);
  transition: transform .8s var(--ease), box-shadow .6s var(--ease);
}
.case-mobile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case:hover .case-mobile, .case:focus-visible .case-mobile {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d17331a, 0 34px 60px -24px #241d4266, 0 0 50px -20px #9460ef55;
}
.work-section .case-story { font-size: 1rem; max-width: 44rem; }
.work-section .case-bottom h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.case:focus-visible { outline: 3px solid #5158cf; outline-offset: 10px; border-radius: 1.6rem; }

@media (max-width: 700px) {
  .case-showcase { padding: .75rem 14% 1.75rem .75rem; border-radius: 1.1rem; }
  .case-mobile { width: 22%; right: 2%; bottom: .6rem; border-width: 3px; border-radius: .7rem; }
  .work-section .case-bottom { display: block; }
  .work-section .case-bottom h3 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .case-mobile { transition: none; }
  .case:hover .case-mobile, .case:focus-visible .case-mobile { transform: rotate(3deg); }
}

/* ── receptionist.css ── */
/* The receptionist, in daylight. The section leaves the dark band and becomes paper; the card is
   a pane of glass with the live K inside it, and its spectral rim travels only while the call is
   "live". Demo structure and copy from the Astra study, rebuilt on the KLVR glass system. */

/* §1 · The section: undo every dark-band rule the earlier passes set on #ai. */
#ai {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--ink);
  padding: clamp(5rem, 8vw, 7.5rem) var(--gutter);
  background:
    radial-gradient(55% 45% at 88% 30%, #9460ef14, transparent 64%),
    radial-gradient(50% 42% at 8% 88%, #32d7ef12, transparent 60%),
    #f2f1f6;
}
#ai .ai-shell {
  min-height: 0;
  padding: 0;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#ai .ai-shell::before, #ai .call-demo::before, #ai .call-demo::after { display: none; }
#ai .ai-copy :is(h1, h2) { font-size: clamp(2.8rem, 4.9vw, 4.9rem); line-height: 1.07; max-width: 13ch; }
#ai .ai-depth-copy > .eyebrow { color: #6e6978; }
#ai .ai-depth-copy > p:not(.eyebrow) { margin: 1.4rem 0 0; max-width: 32rem; color: #5f5a69; font-size: 1.02rem; line-height: 1.7; }
#ai .ai-features li { color: #57525f; border-top-color: #d9d5e0; font-size: .7rem; }
#ai .ai-depth-copy > .button { margin-top: 2rem; }
/* The spectral phrase has to carry its colour on paper, not on ink (3.7:1 at the lightest stop). */
#ai .ai-copy .spectral-text {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* §2 · The card */
#ai .intelligence-demo {
  min-height: 0;
  padding: 0;
  align-self: center;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#ai .intelligence-demo .call-inner {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(1.25rem, 2.2vw, 1.8rem);
  text-align: left;
  border: 1px solid #ffffffe0;
  border-radius: 1.7rem;
  background: linear-gradient(150deg, #ffffffe6, #faf8ffb3);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: inset 0 1px 0 #fff, var(--lift-3);
}
.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: .8rem; color: #3b324a; font-size: .72rem; font-weight: 600; }
.example-label { font-size: .62rem; font-weight: 500; border: 1px solid #dcd5e6; padding: .4rem .65rem; border-radius: 99px; color: #6e6479; }

/* The glass lives here. The canvas paints only the K and its shadow; the card shows through. */
.fold-signal {
  position: relative;
  height: clamp(15rem, 24vw, 19rem);
  margin: .5rem -.5rem 1rem;
}
.fold-signal { perspective: 900px; }
/* The glass leans toward the visitor's pointer, a few degrees, on a soft spring. */
.fold-signal .glass-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0;
  transform: rotateY(calc(var(--tilt-x, 0) * 9deg)) rotateX(calc(var(--tilt-y, 0) * -7deg));
  transition: opacity 1.2s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1);
}
.fold-signal.glass-live .glass-canvas { opacity: 1; }
.fold-signal .glass-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px #76648a1f);
  transition: opacity 1.2s var(--ease);
}
.fold-signal.glass-live .glass-fallback { opacity: 0; }

/* Atra's film of the K (sentient-video.js): it fades in over the still once it is actually
   playing, leans with the pointer like the WebGL glass did, and blooms when the call moves on. */
.fold-signal .sentient-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: rotateY(calc(var(--tilt-x, 0) * 9deg)) rotateX(calc(var(--tilt-y, 0) * -7deg));
  transition: opacity 1.2s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1), scale .7s var(--ease), filter .7s var(--ease);
}
.fold-signal.film-live .sentient-film { opacity: 1; }
.fold-signal.film-live .glass-fallback, .fold-signal.film-live .glass-canvas { opacity: 0; }
.fold-signal.is-struck .sentient-film { scale: 1.035; filter: brightness(1.07) saturate(1.18); }

.demo-message { min-height: 9.25rem; }
.demo-phase { margin: 0 0 .7rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #6f5f80; }
#ai .demo-title { margin: 0 0 .7rem; font-family: var(--sans); font-size: clamp(1.4rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; color: #2b2435; }
.demo-detail { margin: 0; max-width: 30rem; font-size: .9rem; line-height: 1.65; color: #5f5a69; }
.demo-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.2rem 0; padding: 0; }
.demo-steps button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .85rem .15rem .5rem;
  border: 0;
  border-top: 2px solid #ddd6e7;
  border-radius: 0;
  background: transparent;
  color: #6e6479;
  font: inherit;
  font-size: .74rem;
  text-align: left;
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.demo-steps button span { font-size: .62rem; opacity: .8; }
.demo-steps button:hover { color: #3f2a55; border-top-color: #b5a1ce; }
/* The active step's rule is a strip of the spectrum, not a flat purple bar. */
.demo-steps button[aria-pressed="true"] { color: #3f2a55; border-top-color: transparent; }
.demo-steps button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--lumen-arc);
}
.demo-steps button:focus-visible, .demo-replay:focus-visible { outline: 3px solid #5158cf; outline-offset: 4px; border-radius: 4px; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid #e4dfeb; }
.demo-footer p { margin: 0; max-width: 16rem; font-size: .68rem; line-height: 1.6; color: #6e6479; }
.demo-replay { flex-shrink: 0; min-height: 2.75rem; padding: .5rem 0; border: 0; background: none; color: var(--lumen-violet-ink); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }

/* §3 · The listening rim: still and faint at rest, travelling while the call plays. */
#ai .lumen-rim { opacity: .32; transition: opacity .8s var(--ease); }
#ai .lumen-rim::before { opacity: 0; animation-play-state: paused; transition: opacity .8s var(--ease); }
#ai .sequence-running .lumen-rim { opacity: .9; }
#ai .sequence-running .lumen-rim::before { opacity: 1; animation-play-state: running; }

@media (max-width: 1100px) {
  #ai .intelligence-demo { width: 100%; max-width: 42rem; margin: 0 auto; }
}
@media (max-width: 700px) {
  #ai { padding-block: 4rem; }
  #ai .ai-copy :is(h1, h2) { font-size: clamp(2.4rem, 10vw, 3rem); }
  .fold-signal { height: 13rem; margin-inline: -.25rem; }
  .demo-heading { font-size: .66rem; }
  .example-label { font-size: .58rem; }
  .demo-message { min-height: 10rem; }
  .demo-steps { gap: .35rem; }
  .demo-steps button { font-size: .68rem; }
  .demo-footer p { max-width: 11rem; font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-steps button, .fold-signal .glass-canvas, .fold-signal .glass-fallback, #ai .lumen-rim, #ai .lumen-rim::before { transition: none; }
}
@media (forced-colors: active) {
  .fold-signal .glass-canvas { display: none; }
  .fold-signal.glass-live .glass-fallback { opacity: 1; }
  #ai .ai-copy .spectral-text { background: none; -webkit-text-fill-color: currentColor; }
  .demo-steps button[aria-pressed="true"] { border-top-color: Highlight; }
  .demo-steps button[aria-pressed="true"]::before { display: none; }
}
@media (prefers-contrast: more) {
  #ai .ai-copy .spectral-text { background: none; -webkit-text-fill-color: currentColor; color: #3b3358; }
}

/* ── hero-wave.css ── */
/* KLVR Hero Wave — the glass film on paper.
   The film was shot on a pale grey studio sweep. Lifting its exposure takes that sweep to white,
   and multiplying the stage onto the hero makes white disappear: what remains is the glass and its
   floor shadow, lying directly on the page's own light field, with no box around it. A white
   vignette inside the stage feathers the darker corners of the sweep into nothing the same way.

   The blended element carries only the blend, opacity and transforms. Chrome drops the blend on a
   video layer that also has a filter or a mask, so the grade lives on the media inside, and the
   feather is painted rather than masked. */

.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero .hero-kicker { grid-row: 1; }

.hero .hero-wave {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  position: relative;
  z-index: 0;
  width: min(60vw, 64rem);
  /* Bleed off the right edge of the page: the sculpture's tendrils run to the margin. */
  margin-right: calc(-1 * max(3vw, (100vw - 1440px) / 2));
  aspect-ratio: 1926 / 1076;
  pointer-events: none;
  mix-blend-mode: multiply;
  /* Pointer drift (translate) and scroll travel (transform) are separate properties, so the
     two never overwrite each other. */
  translate: var(--wave-mx, 0px) var(--wave-my, 0px);
  transform: translate3d(0, calc(var(--wave-p, 0) * 16%), 0) scale(calc(1 + var(--wave-p, 0) * .07));
  opacity: calc(1 - var(--wave-p, 0) * .55);
  transition: translate 900ms cubic-bezier(.2, .8, .2, 1);
}
.hero-wave picture { display: contents; }
.hero-wave img,
.hero-wave video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(1.13) saturate(1.12);
}
.hero-wave video { opacity: 0; transition: opacity 1.2s var(--ease), filter 1.8s cubic-bezier(.2, .75, .15, 1) .25s; }
.hero-wave video.is-ready { opacity: 1; }
.hero-wave::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, #fff, #fff0 14%, #fff0 92%, #fff),
    linear-gradient(#fff, #fff0 8%, #fff0 80%, #fff);
}

/* The bloom and filaments gather behind the glass rather than behind the headline. */
.hero .lumen-field > span { left: 68%; top: 50%; }

/* The words sit above the glass wherever the two overlap. */
.hero .hero-utility { position: relative; z-index: 2; }
.hero .hero-caption { position: relative; z-index: 2; letter-spacing: .01em; }

/* Arrival: the glass comes into focus just after the headline. */
.cho-ready .hero .hero-wave { opacity: 0; scale: 1.045; }
.cho-ready .hero-wave img,
.cho-ready .hero-wave video { filter: brightness(1.13) saturate(1.12) blur(14px); }
.cho-ready.cho-hero-in .hero .hero-wave {
  opacity: calc(1 - var(--wave-p, 0) * .55);
  scale: 1;
  transition:
    opacity 1.6s cubic-bezier(.2, .75, .15, 1) .25s,
    scale 2.2s cubic-bezier(.2, .75, .15, 1) .25s,
    translate 900ms cubic-bezier(.2, .8, .2, 1);
}
.cho-ready.cho-hero-in .hero-wave img,
.cho-ready.cho-hero-in .hero-wave video { filter: brightness(1.13) saturate(1.12) blur(0); }
.cho-ready.cho-hero-in .hero-wave img { transition: filter 1.8s cubic-bezier(.2, .75, .15, 1) .25s; }

/* An upright tablet has height to spare and not enough width for words and glass side by side:
   the glass takes its own row under the words, edge to edge. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { grid-template-rows: auto auto auto auto; }
  .hero .hero-lockup { grid-column: 1 / -1; padding-bottom: 0; }
  .hero .hero-wave {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    width: auto;
    margin: -1rem calc(-1 * max(3vw, 2rem)) 0;
  }
  .hero .hero-caption { grid-row: 4; }
  .hero .hero-utility { grid-row: 4; }
  .hero .lumen-field > span { left: 50%; top: 60%; }
}
/* A landscape tablet keeps the pairing, with the glass tucked lower and further right. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: landscape) {
  .hero .hero-wave { width: min(56vw, 40rem); align-self: end; margin-bottom: 3.5rem; }
}
@media (max-width: 700px) {
  .hero .hero-wave {
    order: 3;
    align-self: stretch;
    width: auto;
    margin: .25rem -1.25rem 0;
  }
  .hero .lumen-field > span { left: 50%; top: 62%; }
}

.motion-paused .hero .hero-wave {
  opacity: 1 !important; scale: none !important; translate: none !important;
  transform: none !important; transition: none !important;
}
.motion-paused .hero-wave img, .motion-paused .hero-wave video { filter: brightness(1.13) saturate(1.12) !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-wave {
    opacity: 1 !important; scale: none !important; translate: none !important;
    transform: none !important; transition: none !important;
  }
  .hero-wave img { filter: brightness(1.13) saturate(1.12) !important; transition: none !important; }
  .hero-wave video { display: none; }
}
/* Forced colours drop filters and blending; the film would show as a grey rectangle. */
@media (forced-colors: active) {
  .hero .hero-wave { display: none; }
}

/* ── choreography.css ── */
/* KLVR Choreography — how things arrive, and how they answer the pointer.
   Every rule here is additive and every one is off under reduced motion or the Pause control:
   the page is complete and legible without a single frame of it. */

/* §1 · Headlines arrive as a wipe of light: a mask sweeps up the text while it lifts and sharpens.
   A mask, not per-line transforms, so the gradient-clipped headline type stays intact. */
.hero-title, .section-title, .chapter h2, .commerce h2, #ai .ai-copy :is(h1, h2), .brief h2, #care .care-garden h2 {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
  -webkit-mask-size: 100% 260%;
  mask-size: 100% 260%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* A mask (and gradient-clipped text) stops at the border box, and at these tight line-heights
     descenders hang just past it. The padding gives them room; the margin gives it back. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.hero .hero-title { margin-bottom: -.14em; }  /* studio.css resets the hero title's margin at this weight */
.cho-ready .cho-head {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
}
.cho-ready .cho-head.cho-in {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transform: none;
  filter: none;
  transition:
    -webkit-mask-position 1.25s cubic-bezier(.2, .75, .15, 1),
    mask-position 1.25s cubic-bezier(.2, .75, .15, 1),
    transform 1.25s cubic-bezier(.2, .75, .15, 1),
    filter 1s cubic-bezier(.2, .75, .15, 1);
}

/* §2 · The hero's supporting cast follows the headline in. */
.cho-ready .hero .hero-kicker,
.cho-ready .hero .hero-description,
.cho-ready .hero .hero-actions,
.cho-ready .hero .hero-proof,
.cho-ready .hero .hero-caption,
.cho-ready .hero .hero-utility {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.cho-ready.cho-hero-in .hero .hero-kicker,
.cho-ready.cho-hero-in .hero .hero-description,
.cho-ready.cho-hero-in .hero .hero-actions,
.cho-ready.cho-hero-in .hero .hero-proof,
.cho-ready.cho-hero-in .hero .hero-caption,
.cho-ready.cho-hero-in .hero .hero-utility {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.2, .75, .15, 1), transform 1.1s cubic-bezier(.2, .75, .15, 1);
}
.cho-ready.cho-hero-in .hero .hero-kicker { transition-delay: .05s; }
.cho-ready.cho-hero-in .hero .hero-description { transition-delay: .45s; }
.cho-ready.cho-hero-in .hero .hero-actions { transition-delay: .6s; }
.cho-ready.cho-hero-in .hero .hero-proof { transition-delay: .75s; }
.cho-ready.cho-hero-in .hero .hero-caption { transition-delay: 1.3s; }
.cho-ready.cho-hero-in .hero .hero-utility { transition-delay: 1.4s; }
.hero-proof dt { font-variant-numeric: tabular-nums; }

/* §3 · Magnetic controls: they lean toward the pointer, then settle. */
.cho-magnetic { translate: var(--mag-x, 0) var(--mag-y, 0); transition: translate .5s cubic-bezier(.2, .8, .2, 1), transform .4s var(--ease), background .4s var(--ease), box-shadow .45s var(--ease); }
.cho-magnetic.cho-pulling { transition: translate .12s linear, transform .4s var(--ease), background .4s var(--ease), box-shadow .45s var(--ease); }

/* §4 · The case studies assemble as they scroll in: the desktop settles, the phone rises. */
.cho-ready .case-showcase .case-preview {
  transform: translate3d(0, calc(var(--cs, 1) * 40px), 0) scale(calc(1 - var(--cs, 1) * .05));
  transform-origin: 50% 100%;
}
.cho-ready .case-showcase .case-mobile {
  transform: translate3d(0, calc(var(--cs, 1) * 120px), 0) rotate(calc(3deg + var(--cs, 1) * 5deg));
  opacity: calc(1 - var(--cs, 1) * .6);
}
.cho-ready .case:hover .case-showcase .case-mobile,
.cho-ready .case:focus-visible .case-showcase .case-mobile {
  transform: translate3d(0, calc(var(--cs, 1) * 120px - 10px), 0) rotate(1deg);
}

/* §5 · Cards tilt under the pointer, like a pane of glass held up to the light. */
.package, .care-card { transform-style: preserve-3d; }
.package.cho-tilting:nth-child(n), .care-card.cho-tilting {
  transform: perspective(1000px) translateY(-.4rem) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transition: transform .18s linear, box-shadow .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}

/* §6 · A light that follows the pointer across the dark catalogue. */
#commerce { --spot-mx: 50%; --spot-my: 30%; }
#commerce .commerce-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12rem;
  pointer-events: none;
  opacity: var(--spot-on, 0);
  background: radial-gradient(520px circle at var(--spot-mx) var(--spot-my), #9460ef2e, #32d7ef12 40%, transparent 70%);
  transition: opacity .8s var(--ease);
}

/* §7 · Preferences win, always. */
.motion-paused .cho-head, .motion-paused .cho-head.cho-in,
.motion-paused .hero .hero-kicker, .motion-paused .hero .hero-description, .motion-paused .hero .hero-actions,
.motion-paused .hero .hero-proof, .motion-paused .hero .hero-caption, .motion-paused .hero .hero-utility {
  opacity: 1 !important; transform: none !important; filter: none !important;
  -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important; transition: none !important;
}
.motion-paused .case-showcase .case-preview, .motion-paused .case-showcase .case-mobile { transform: none; opacity: 1; }
.motion-paused .cho-magnetic { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .cho-head, .hero .hero-kicker, .hero .hero-description, .hero .hero-actions, .hero .hero-proof, .hero .hero-caption, .hero .hero-utility {
    opacity: 1 !important; transform: none !important; filter: none !important;
    -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important; transition: none !important;
  }
  .case-showcase .case-preview, .case-showcase .case-mobile { transform: none !important; opacity: 1 !important; }
  .cho-magnetic { translate: none !important; }
  .package.cho-tilting:nth-child(n), .care-card.cho-tilting { transform: translateY(-.4rem); }
  #commerce .commerce-wrap::before { display: none; }
}
@media (forced-colors: active) {
  .hero-title, .section-title, .chapter h2, .commerce h2, #ai .ai-copy :is(h1, h2), .brief h2, #care .care-garden h2 { -webkit-mask-image: none; mask-image: none; }
}

/* ── live-demo.css ── */
/* Live demos. The receptionist stops being described and starts answering: a real phone line
   and a real chat, set into the #ai section on the same glass as the illustrative card above. */

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

/* §1 · The signal: one green dot that means "a person could talk to this right now". */
.live-dot, .nav-live {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #1fb869;
}
.live-dot::after, .nav-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: live-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes live-ping { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(2.6); opacity: 0; } }
.nav-live { width: .38rem; height: .38rem; margin-left: .45rem; vertical-align: .12em; }

/* §2 · Hero pill: the fastest route from "what is this" to "let me try it". */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  margin: 0 0 1.5rem;
  padding: .38rem .95rem .38rem .7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffe6, #f7f5fcd9) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: #2b2435;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.live-pill:hover, .live-pill:focus-visible {
  background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 16px 34px -18px #6a4fbf4d;
  transform: translateY(-1px);
}
.live-pill-tag {
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #17151e;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.live-pill > span:last-child { transition: transform .4s var(--ease); }
.live-pill:hover > span:last-child { transform: translateX(3px); }
.cho-ready .hero .live-pill { opacity: 0; transform: translate3d(0, 12px, 0); }
.cho-ready.cho-hero-in .hero .live-pill {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.2, .75, .15, 1) .15s, transform 1.1s cubic-bezier(.2, .75, .15, 1) .15s, background .4s var(--ease), box-shadow .4s var(--ease);
}
.motion-paused .hero .live-pill { opacity: 1; transform: none; }

/* §3 · The AI copy column now points down to the real thing. */
#ai .ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.4rem; margin-top: 2rem; }
#ai .ai-cta-link, #ai .demo-footer a, .live-fine a {
  color: var(--lumen-violet-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
#ai .ai-cta-link { font-size: .8rem; }

/* §4 · The band */
.live-demos {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: clamp(4.5rem, 9vw, 8rem) auto 0;
  scroll-margin-top: 6rem;
}
.live-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .62fr);
  grid-template-areas: "eye eye" "title copy";
  gap: 0 clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.live-eyebrow {
  grid-area: eye;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: #4f4a5a;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#ai .live-head :is(h2, h3) {
  grid-area: title;
  max-width: 15ch;
  margin: 0;
  color: #17151e;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.5vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
#ai .live-head .spectral-text {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-head > p:last-child { grid-area: copy; margin: 0; max-width: 30rem; color: #5f5a69; font-size: 1rem; line-height: 1.7; }

.live-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1rem, 1.8vw, 1.5rem); align-items: stretch; }

/* §5 · The cards: the same pane of glass as the illustrative demo. */
.live-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.35rem, 2.4vw, 2.1rem);
  border: 1px solid #ffffffe0;
  border-radius: 1.7rem;
  /* The site's glass recipe: a specular spot that follows the pointer (interactions.js writes
     --spot-x/--spot-y), over a translucent fill the section's light field shows through. */
  background:
    radial-gradient(440px circle at var(--spot-x, 112%) var(--spot-y, -14%), #ffffff, #ffffff00 70%),
    linear-gradient(150deg, #ffffffe6, #f8f6fdb8);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80, var(--lift-2);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.live-card:hover, .live-card:focus-within { transform: translateY(-.3rem); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80, var(--lift-3), 0 0 60px -30px #9460ef66; }
/* A tall card needs a bigger sweep, or the travelling light misses its top and bottom edges. */
.live-card .lumen-rim::before { width: 260%; margin: -130% 0 0 -130%; }
/* #ai-scoped to outrank receptionist.css, which keeps every #ai rim still until something is live. */
#ai .live-card:hover .lumen-rim, #ai .live-card:focus-within .lumen-rim { opacity: .85; }
#ai .live-card:hover .lumen-rim::before, #ai .live-card:focus-within .lumen-rim::before { opacity: 1; animation-play-state: running; }

.live-card-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; color: #3b324a; font-size: .72rem; font-weight: 600; }
.live-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#f4fcf7f0, #eaf8f0d9) padding-box, linear-gradient(135deg, #bfe8d0, #ffffff 50%, #bfe8d0) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px #1fb86966;
  color: #1d6b42;
  font-size: .62rem;
  font-weight: 600;
  white-space: nowrap;
}
.live-status i { width: .4rem; height: .4rem; border-radius: 50%; background: #1fb869; box-shadow: 0 0 0 3px #1fb86926; }
#ai .live-card :is(h3, h4) {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 .6rem;
  color: #2b2435;
  font-family: var(--sans);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.04em;
}
.live-lede { margin: 0; max-width: 31rem; color: #5f5a69; font-size: .95rem; line-height: 1.65; }
.live-fine { margin: auto 0 0; padding-top: 1.25rem; color: #6e6479; font-size: .7rem; line-height: 1.6; }

/* §6 · Demo 01 · the phone line */
.live-number {
  display: inline-block;
  align-self: flex-start;
  margin: clamp(1.4rem, 3vw, 2rem) 0 1.25rem;
  color: #17151e;
  font-size: clamp(1.9rem, 3.7vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .3s ease;
}
.live-number:hover, .live-number:focus-visible {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-call-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
#ai .live-dial {
  min-height: 3.4rem;
  padding-inline: 1.6rem;
  font-size: .86rem;
  animation: live-ring 2.6s cubic-bezier(.2, .75, .15, 1) infinite;
}
#ai .live-dial svg { flex-shrink: 0; }
@keyframes live-ring {
  0% { box-shadow: var(--rim-dark), var(--lift-1), 0 0 0 0 #9460ef59; }
  70%, 100% { box-shadow: var(--rim-dark), var(--lift-1), 0 0 0 14px #9460ef00; }
}
#ai .live-dial:hover, #ai .live-dial:focus-visible { animation: none; }
/* The secondary capsule is the hero's light-glass button: a frosted fill inside a spectral edge. */
.live-copy {
  min-height: 3.4rem;
  padding: 0 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffe6, #f7f5fcd1) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: #3b324a;
  font: 600 .8rem var(--sans);
  cursor: pointer;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), color .3s ease, transform .4s var(--ease);
}
.live-copy:hover {
  background: linear-gradient(#fffffff5, #faf8fde6) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 16px 34px -18px #6a4fbf4d;
  transform: translateY(-2px);
}
.live-copy.is-copied { background: linear-gradient(#f4fcf7, #eaf8f0) padding-box, linear-gradient(135deg, #9fd8b8, #d9f3e4) border-box; color: #1d6b42; }
.live-copy:focus-visible, .live-number:focus-visible, .live-pill:focus-visible { outline: 3px solid #5158cf; outline-offset: 4px; }

/* Only a desktop visitor needs the code: a phone can simply tap the number. */
.live-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .live-qr {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1.5rem;
    padding: .9rem;
    border: 1px solid #ffffffd9;
    border-radius: 1.2rem;
    background: linear-gradient(150deg, #ffffffb3, #f4f1f98c);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #2a234a0a, var(--lift-1);
  }
}
.live-qr .qr-svg {
  flex-shrink: 0;
  width: 5.75rem;
  height: 5.75rem;
  padding: .45rem;
  border-radius: .7rem;
  background: #fff;
  color: #1c1826;
  box-shadow: 0 0 0 1px #ece7f3;
  shape-rendering: crispEdges;
}
.live-qr p { margin: 0; color: #5f5a69; font-size: .8rem; line-height: 1.55; }
.live-qr strong { color: #2b2435; }

.live-prompts { margin-top: 1.6rem; }
.live-prompts > p { margin: 0 0 .4rem; color: #6f5f80; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.live-prompts ul { margin: 0; padding: 0; list-style: none; }
.live-prompts li { padding: .72rem 0; border-top: 1px solid #e4dfeb; color: #3b324a; font-size: .88rem; line-height: 1.5; }

/* §7 · Demo 02 · the chat, set into the card instead of floating over the page */
/* The chat sits in a glass bezel: a frosted rim around a white screen, like a device held in the light. */
.chat-frame {
  --bezel: .45rem;
  position: relative;
  flex: 1;
  min-height: 36rem;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid #ffffffe6;
  border-radius: 1.35rem;
  background: linear-gradient(150deg, #ffffffcc, #efebf6a6);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #2a234a0d, var(--lift-2);
}
.chat-frame::before {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: .95rem;
  background: #fff;
  box-shadow: 0 0 0 1px #2a234a14, 0 1px 3px #1d17331a;
}
.chat-frame iframe {
  position: absolute;
  inset: var(--bezel);
  width: calc(100% - 2 * var(--bezel));
  height: calc(100% - 2 * var(--bezel));
  border: 0;
  border-radius: .95rem;
  display: block;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.chat-frame.is-loaded iframe { opacity: 1; }
.chat-skeleton {
  position: absolute;
  inset: var(--bezel);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  transition: opacity .5s var(--ease);
}
.chat-frame.is-loaded .chat-skeleton { opacity: 0; pointer-events: none; }
.chat-skel-bubble {
  width: 68%;
  height: 3.1rem;
  border-radius: 1rem 1rem 1rem .3rem;
  background: linear-gradient(100deg, #f1eef6 30%, #faf8fc 50%, #f1eef6 70%) 0 0 / 300% 100%;
  animation: chat-shimmer 1.6s linear infinite;
}
.chat-skel-bubble.is-short { width: 44%; height: 2.3rem; }
.chat-skel-bubble.is-me { align-self: flex-end; width: 52%; border-radius: 1rem 1rem .3rem 1rem; }
@keyframes chat-shimmer { to { background-position: -150% 0; } }
.chat-skel-label { margin-top: auto; align-self: center; color: #8a8295; font-size: .74rem; }

/* §8 · Responsive */
@media (max-width: 1050px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); max-width: 42rem; margin-inline: auto; }
  .live-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "title" "copy"; }
  .live-head > p:last-child { margin-top: 1.1rem; }
}
@media (max-width: 720px) {
  .live-pill { font-size: .7rem; margin-bottom: 1.1rem; }
  .live-card { border-radius: 1.4rem; }
  .chat-frame { min-height: 34rem; }
  #ai .live-dial, .live-copy { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .live-number { font-size: 1.7rem; }
  .live-card-top { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .nav-live::after, #ai .live-dial, .chat-skel-bubble { animation: none; }
  .cho-ready .hero .live-pill { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  #ai .live-head .spectral-text, .live-number:hover { background: none; -webkit-text-fill-color: currentColor; }
  .live-qr .qr-svg { forced-color-adjust: none; background: #fff; color: #000; }
}

/* ── chat.css ── */
/* The receptionist chat, in KLVR glass. The screen inside the bezel carries a faint light field
   so the frosted bubbles have something to bend; the visitor's own words sit in the dark glass
   of the site's primary buttons; replies resolve out of the light a word at a time. */

.gchat, .gchat *, .gchat *::before, .gchat *::after { box-sizing: border-box; }
.gchat[hidden], .gchat-suggest[hidden], .gchat-reset[hidden] { display: none !important; }

.gchat {
  position: absolute;
  inset: var(--bezel);
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: .95rem;
  background:
    radial-gradient(60% 40% at 100% 0%, #9460ef14, transparent 70%),
    radial-gradient(55% 38% at 0% 100%, #32d7ef12, transparent 70%),
    radial-gradient(40% 30% at 90% 90%, #f16ec40d, transparent 70%),
    #fbfbfd;
  color: #2b2435;
  font-family: var(--sans);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.chat-frame.is-loaded .gchat { opacity: 1; }

/* §1 · Header: a frosted bar the conversation scrolls beneath. */
.gchat-head {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem .8rem 1rem;
  background: linear-gradient(#fbfbfde6, #fbfbfdb8);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 #2a234a0f, 0 8px 18px -14px #241d4233;
}
.gchat-head::after {
  content: "";
  position: absolute;
  inset: auto 1rem 0 1rem;
  height: 1px;
  background: var(--lumen-arc);
  opacity: .28;
}

/* The avatar is a small piece of the hero's light: a white core in a turning spectral fringe. */
.gchat-orb {
  position: relative;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ffffffcc, 0 4px 14px -4px #9460ef66, 0 0 0 1px #2a234a12;
}
.gchat-orb::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, var(--lumen-cyan), var(--lumen-blue), var(--lumen-violet), var(--lumen-pink), var(--lumen-amber), var(--lumen-cyan));
  filter: blur(5px);
  animation: gchat-turn 9s linear infinite;
}
.gchat-orb i {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, #ffffffd9 45%, #ffffff66 72%, #fff0);
  transition: transform .5s var(--ease);
}
@keyframes gchat-turn { to { transform: rotate(360deg); } }
.gchat.is-thinking .gchat-orb::before { animation-duration: 1.6s; }
.gchat.is-thinking .gchat-orb i { animation: gchat-breathe 1.4s ease-in-out infinite; }
@keyframes gchat-breathe { 50% { transform: scale(.72); } }

.gchat-id { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.gchat-id strong { font-size: .88rem; font-weight: 700; letter-spacing: -.02em; color: #1d1a28; }
.gchat-state { overflow: hidden; color: #6e6479; font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }
.gchat.is-thinking .gchat-state {
  background: linear-gradient(90deg, #6e6479 20%, #9460ef 40%, #f16ec4 50%, #6e6479 70%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gchat-sheen 1.6s linear infinite;
}
@keyframes gchat-sheen { to { background-position: -150% 0; } }
.gchat-reset {
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0 .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffe6, #f7f5fcd1) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff;
  color: #4a3f5c;
  font: 600 .68rem var(--sans);
  cursor: pointer;
  transition: background .35s var(--ease);
}
.gchat-reset:hover { background: linear-gradient(#fff, #fbf9fe) padding-box, var(--lumen-arc) border-box; }

/* §2 · The conversation */
.gchat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4.6rem 1rem 1rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #d8d2e2 transparent;
}
.gchat-log:focus-visible { outline: 2px solid #5158cf; outline-offset: -4px; border-radius: .6rem; }
.gmsg { display: flex; max-width: 86%; }
.gmsg.is-bot { align-self: flex-start; }
.gmsg.is-me { align-self: flex-end; }
.gchat-text {
  padding: .75rem 1rem;
  font-size: .88rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.gchat-text p { margin: 0; }
.gchat-text p + p { margin-top: .6rem; }
.gchat-text a { color: var(--lumen-violet-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Assistant: frosted glass lit from the top-left. */
.gmsg.is-bot .gchat-text {
  border: 1px solid #ffffffe6;
  border-radius: 1.15rem 1.15rem 1.15rem .35rem;
  background: linear-gradient(150deg, #ffffff, #f8f6fcd9);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px #1d173314, 0 10px 24px -18px #241d4240;
  color: #2b2435;
}
/* Visitor: the dark glass of the site's primary buttons, with the same violet rim light. */
.gmsg.is-me .gchat-text {
  border-radius: 1.15rem 1.15rem .35rem 1.15rem;
  background: linear-gradient(#2d2939, #17151e);
  box-shadow: var(--rim-dark), 0 8px 22px -14px #241d4299, 0 0 22px -10px #9460ef59;
  color: #f6f3fb;
}
.gmsg.is-me .gchat-text a { color: #d9ccff; }
.gmsg.is-error .gchat-text {
  background: linear-gradient(150deg, #fffaf3, #fff3e6d9);
  border-color: #f5d9b8;
  color: #6b4a1f;
}
.gchat-retry {
  display: block;
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lumen-violet-ink);
  font: 600 .8rem var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Arrival: the bubble lifts out of a blur, then its words resolve one after another. */
.gmsg { animation: gchat-in .55s var(--ease) both; }
@keyframes gchat-in { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } }
.gmsg.is-arriving .gw {
  display: inline-block;
  animation: gchat-word .5s var(--ease) both;
  animation-delay: calc(var(--w) * var(--wstep, 20ms) + .1s);
}
@keyframes gchat-word { from { opacity: 0; filter: blur(4px); transform: translateY(3px); } }

/* Thinking: three points of light passing through the spectrum. */
.gmsg.is-typing .gchat-text { display: flex; align-items: center; gap: .32rem; padding: .95rem 1.05rem; }
.gmsg.is-typing i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--lumen-violet);
  animation: gchat-dot 1.3s ease-in-out infinite;
}
.gmsg.is-typing i:nth-child(2) { animation-delay: .16s; }
.gmsg.is-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes gchat-dot {
  0%, 100% { transform: translateY(0); opacity: .45; background: var(--lumen-cyan); }
  33% { transform: translateY(-4px); opacity: 1; background: var(--lumen-violet); }
  66% { background: var(--lumen-pink); }
}

/* §3 · Suggestions */
.gchat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; }
.gchat-chip {
  min-height: 2.2rem;
  padding: 0 .85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffe6, #f7f5fcd1) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: #3b324a;
  font: 600 .74rem var(--sans);
  cursor: pointer;
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gchat-chip:hover, .gchat-chip:focus-visible {
  background: linear-gradient(#fff, #fbf9fe) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px -14px #6a4fbf66;
  transform: translateY(-1px);
}

/* §4 · Composer: a glass capsule whose edge lights up while you type, and a dark glass bead. */
.gchat-compose {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin: 0 .75rem .75rem;
  padding: .35rem .35rem .35rem 1rem;
  border: 1px solid transparent;
  border-radius: 1.4rem;
  background: linear-gradient(#ffffffeb, #f8f6fcdb) padding-box, linear-gradient(#e6e1ee, #efebf4) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.gchat-compose:focus-within {
  background: linear-gradient(#fff, #fcfbfe) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px -18px #6a4fbf73, 0 0 0 4px #9460ef14;
}
.gchat-compose textarea {
  flex: 1;
  min-width: 0;
  max-height: 8rem;
  margin: 0;
  padding: .6rem 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #1d1a28;
  font: 500 .9rem/1.45 var(--sans);
}
.gchat-compose textarea::placeholder { color: #9a92a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gchat-send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(#37324a, #17151e);
  box-shadow: var(--rim-dark), 0 6px 16px -8px #241d42b3, 0 0 18px -6px #9460ef80;
  color: #fff;
  cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s ease, box-shadow .3s var(--ease);
}
.gchat-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.05); box-shadow: var(--rim-dark), 0 8px 20px -8px #241d42cc, 0 0 26px -4px #9460efa6; }
.gchat-send:disabled { opacity: .28; cursor: default; box-shadow: none; }
.gchat-send:focus-visible, .gchat-chip:focus-visible, .gchat-reset:focus-visible { outline: 3px solid #5158cf; outline-offset: 3px; }

/* §5 · A second failed turn in a row offers the phone line inside the error bubble. */
.gmsg.is-error .gchat-note-call { margin-right: .75rem; }
.gmsg.is-error .gchat-note-call + .gchat-retry { display: inline-block; }

/* §6 · Voice teaser. The mic is a frosted bead beside the dark send bead. While it listens,
   a spectral ring breathes around it and the orb opens up; while it speaks, the orb pulses. */
.gchat-mic[hidden] { display: none; }
.gchat-mic {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#ffffffeb, #f3f0f9) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px #241d4233;
  color: #4a3f5c;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s ease;
}
.gchat-mic:hover { background: linear-gradient(#fff, #fbf9fe) padding-box, var(--lumen-arc) border-box; transform: translateY(-1px); }
.gchat-mic:focus-visible { outline: 3px solid #5158cf; outline-offset: 3px; }
.gchat-mic::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--lumen-cyan), var(--lumen-blue), var(--lumen-violet), var(--lumen-pink), var(--lumen-amber), var(--lumen-cyan));
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.gchat.is-listening .gchat-mic { color: #fff; background: linear-gradient(#7b52d6, #5a3ab0) padding-box, var(--lumen-arc) border-box; }
.gchat.is-listening .gchat-mic::after { opacity: 1; animation: gchat-turn 2.4s linear infinite, gchat-listen 1.2s ease-in-out infinite; }
@keyframes gchat-listen { 50% { transform: scale(1.12); } }
.gchat.is-speaking .gchat-mic { color: #6b3ec2; }
.gchat.is-listening .gchat-orb::before { animation-duration: 3s; }
.gchat.is-listening .gchat-orb i { transform: scale(.55); }
.gchat.is-speaking .gchat-orb i { animation: gchat-breathe .7s ease-in-out infinite; }
.gchat.is-listening .gchat-compose { background: linear-gradient(#fff, #fcfbfe) padding-box, var(--lumen-arc) border-box; }

/* The honest teaser note that follows the first spoken reply. */
.gmsg.is-note { max-width: 92%; }
.gmsg.is-note .gchat-text {
  border: 1px dashed #d4c8e8;
  border-radius: 1rem;
  background: linear-gradient(150deg, #faf7ffcc, #f4f0fbb3);
  color: #4a3f5c;
  font-size: .8rem;
}
.gchat-note-call {
  display: inline-flex;
  margin-top: .55rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: linear-gradient(#2d2939, #17151e);
  box-shadow: var(--rim-dark), 0 6px 16px -8px #241d42b3;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* §7 · The dock: a glass assistant in the corner of every page. */
.kdock {
  position: fixed;
  z-index: 60;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column-reverse; /* launcher first for keyboard order, drawn beneath the panel */
  align-items: flex-end;
  gap: .75rem;
  pointer-events: none;
  font-family: var(--sans);
}
.kdock-launch {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem 1.1rem .4rem .4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#fbfbfde0, #f5f2fbc7) padding-box, var(--lumen-arc-soft) border-box;
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 18px 40px -18px #241d4266, 0 0 40px -16px #9460ef66;
  color: #1d1a28;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  visibility: hidden;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s, background .4s var(--ease), box-shadow .4s var(--ease);
}
.kdock.is-shown .kdock-launch { opacity: 1; transform: none; visibility: visible; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s, background .4s var(--ease), box-shadow .4s var(--ease); }
.kdock-launch:hover { background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc) border-box; transform: translateY(-2px); }
.kdock-launch:focus-visible, .kdock-close:focus-visible { outline: 3px solid #5158cf; outline-offset: 4px; }
.kdock-launch .gchat-orb { width: 2.6rem; height: 2.6rem; }
.kdock-label { display: grid; text-align: left; line-height: 1.2; }
.kdock-label strong { font-size: .86rem; font-weight: 700; letter-spacing: -.02em; }
.kdock-label span { color: #6e6479; font-size: .66rem; }
.kdock-dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #1fb869; }
.kdock-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: live-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
.kdock.is-open .kdock-launch .kdock-label, .kdock.is-open .kdock-launch .kdock-dot { display: none; }
.kdock.is-open .kdock-launch { padding: .4rem; }

.kdock-panel {
  position: relative;
  width: min(25rem, calc(100vw - 2rem));
  height: min(38rem, calc(100svh - 7.5rem));
  padding: .45rem;
  border: 1px solid #ffffffe6;
  border-radius: 1.6rem;
  background: linear-gradient(150deg, #ffffffc7, #f1edf8b3);
  backdrop-filter: saturate(1.6) blur(24px);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 40px 90px -30px #241d4273, 0 0 70px -30px #9460ef80;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .32s var(--ease), transform .45s var(--ease);
}
.kdock-panel[hidden] { display: none; }
.kdock.is-visible-panel .kdock-panel { opacity: 1; transform: none; }
.kdock-panel .lumen-rim { opacity: .7; }
.kdock-panel .lumen-rim::before { width: 260%; margin: -130% 0 0 -130%; animation-play-state: running; }
.kdock .gchat { --bezel: .45rem; }
.kdock-panel.is-loaded .gchat { opacity: 1; }
.kdock .gchat-head { padding-right: .6rem; }
.kdock-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: #2a234a0d;
  color: #4a3f5c;
  cursor: pointer;
  transition: background .3s ease;
}
.kdock-close:hover { background: #2a234a1a; }

@media (max-width: 720px) {
  .kdock { right: .75rem; bottom: .75rem; left: .75rem; }
  .kdock-launch { padding-right: .95rem; }
  .kdock-panel { width: 100%; height: min(36rem, calc(100svh - 6.5rem)); border-radius: 1.4rem; }
}
@media (max-width: 380px) {
  .kdock-label span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kdock-launch, .kdock-panel { transition: opacity .2s linear, visibility 0s; transform: none !important; }
  .kdock-dot::after, .gchat-mic::after { animation: none; }
}
@media print { .kdock { display: none; } }

@media (max-width: 720px) {
  .gchat-compose textarea { font-size: 1rem; } /* 16px, so iOS does not zoom on focus */
  .gmsg { max-width: 90%; }
  .gchat-log { padding-inline: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gmsg, .gmsg.is-arriving .gw, .gchat-orb::before, .gchat.is-thinking .gchat-orb i, .gchat.is-thinking .gchat-state { animation: none; }
  .gchat.is-thinking .gchat-state { -webkit-text-fill-color: currentColor; background: none; }
  .gmsg.is-typing i { animation: gchat-dot 1.3s ease-in-out infinite; } /* the one signal that work is happening */
  .gchat-log { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .gmsg .gchat-text { border: 1px solid CanvasText; }
  .gchat-orb::before { display: none; }
}

/* ── proof.css ── */
/* Proof: numbers and words from clients, on the same glass as everything else.
   The section ships hidden and only appears once it holds real quotes (see index.html). */

.proof {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(52% 42% at 90% 10%, #9460ef14, transparent 64%),
    radial-gradient(48% 40% at 6% 90%, #32d7ef12, transparent 60%),
    #f6f5f9;
}
.proof .spectral-text {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.proof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.proof-stat {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid #ffffffe0;
  border-radius: 1.6rem;
  background: radial-gradient(360px circle at var(--spot-x, 110%) var(--spot-y, -10%), #fff, #fff0 70%), linear-gradient(150deg, #ffffffe0, #f6f3fcb3);
  box-shadow: inset 0 1px 0 #fff, var(--lift-2);
}
.proof-stat .lumen-rim { opacity: .35; }
.proof-num {
  margin: 0;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg, #3f7a8b, #7c5fa8 45%, #a3637a 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proof-label { margin: .9rem 0 0; color: #2b2435; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.proof-src { margin: .35rem 0 0; color: #7a7386; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.proof-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.proof-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
  border: 1px solid #ffffff21;
  border-radius: 1.6rem;
  color: #fff;
  background: radial-gradient(420px circle at var(--spot-x, 100%) var(--spot-y, 0%), #ffffff24, #fff0 68%), linear-gradient(152deg, #2e2740, #16141f 72%);
  box-shadow: var(--rim-dark), var(--lift-2), 0 0 60px -28px #9460ef8c;
}
.proof-mark {
  position: absolute;
  right: 1.6rem;
  top: 1.2rem;
  font-family: var(--serif);
  font-size: 7rem;
  line-height: .7;
  background: var(--lumen-arc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .5;
}
.proof-quote blockquote { margin: 0; }
.proof-quote blockquote p { position: relative; margin: 0; max-width: 34rem; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.proof-quote figcaption { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 2rem; }
.proof-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--lumen-cyan), var(--lumen-blue), var(--lumen-violet), var(--lumen-pink), var(--lumen-amber), var(--lumen-cyan));
  color: #17151e;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px #1c1926;
}
.proof-quote figcaption > span:nth-child(2) { display: grid; flex: 1; }
.proof-quote strong { font-size: .9rem; }
.proof-quote em { color: #b9b0c8; font-size: .74rem; font-style: normal; }
.proof-quote a { color: #d9ccff; font-size: .76rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

@media (max-width: 900px) {
  .proof-stats { grid-template-columns: minmax(0, 1fr); }
  .proof-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .proof-num, .proof-mark { background: none; -webkit-text-fill-color: currentColor; }
}

/* ── pages.css ── */
/* Pages: the pieces a site of real pages needs that a one-page site did not. A page header with
   its own h1, a process in glass cards, questions that open like glass, and a closing band that
   hands the visitor to /contact/. Same light, same glass, same spectrum. */

/* Sections that a link lands on receive focus (tabindex="-1") so keyboard and screen-reader users
   continue from there. They are destinations, not controls, so they get no focus ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* §1 · Where you are: the nav marks the page, the same way it marked the section. */
.nav-links a[aria-current="page"]::after { right: 0; background: var(--lumen-violet-ink); }
.foot-nav a[aria-current="page"] { color: var(--lumen-violet-ink); }
/* Pages without the home hero carry the Pause motion control in the footer: its own row, its own width. */
.foot .motion-toggle { grid-column: 1 / -1; justify-self: start; width: auto; }
@media (max-width: 720px) { .foot .motion-toggle { justify-self: center; } }

/* A small ring of the spectrum, used before eyebrows on every page (so it lives here, loaded
   everywhere, not in one tool's stylesheet). */
.calc-glyph {
  flex-shrink: 0;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--lumen-cyan), var(--lumen-blue), var(--lumen-violet), var(--lumen-pink), var(--lumen-amber), var(--lumen-cyan));
  -webkit-mask: radial-gradient(closest-side, #0000 52%, #000 56%);
  mask: radial-gradient(closest-side, #0000 52%, #000 56%);
}

/* §2 · Page header */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(50% 44% at 88% 12%, #9460ef1a, transparent 66%),
    radial-gradient(46% 40% at 4% 90%, #32d7ef14, transparent 62%),
    #fbfbfd;
}
.page-hero-inner { max-width: 1320px; margin: 0 auto; }
.page-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; color: #6e6978; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.page-crumbs li + li::before { content: "/"; margin-right: .5rem; color: #b1aabb; }
.page-crumbs a { color: #4f4a5a; text-decoration: underline; text-decoration-color: #cfc8da; text-underline-offset: 4px; }
.page-crumbs a:hover { color: var(--lumen-violet-ink); }
.page-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; color: #4f4a5a; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page-title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7.4vw, 7.2rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.06em;
  text-transform: uppercase;
  background-image: linear-gradient(104deg, #0d0c14 6%, #232037 44%, #4b4666 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-title .spectral-text, .page-section .spectral-text, .page-cta .spectral-text {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-lede { max-width: 38rem; margin: 1.6rem 0 0; color: #4b4757; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.7; }
.page-lede a { color: var(--lumen-violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.3rem; margin-top: 2rem; }
.page-hero .button.dark, .page-section .button.dark { background: linear-gradient(#2d2939, #17151e); border-color: transparent; color: #fff; box-shadow: var(--rim-dark), var(--lift-1); }
.page-hero .button.dark:hover, .page-section .button.dark:hover { background: linear-gradient(#37324a, #1c1926); box-shadow: var(--rim-dark), 0 2px 6px #1d173321, 0 18px 40px -20px #6a4fbf5c, 0 0 28px -8px #9460ef47; }
.page-hero .button.light {
  background: linear-gradient(#ffffffe0, #f7f5fccc) padding-box, var(--lumen-arc-soft) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: var(--ink);
}
.page-hero .button.light:hover { background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc) border-box; }
.page-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 40rem; margin: 2.4rem 0 0; padding: 0; }
.page-facts > div { padding: 0 0 0 clamp(1rem, 2.4vw, 2rem); border-left: 1px solid #2a234a1f; }
.page-facts > div:first-child { padding-left: 0; border-left: 0; }
.page-facts dt { color: #201d31; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.page-facts dd { margin: .45rem 0 0; color: #6c6779; font-size: .64rem; letter-spacing: .085em; line-height: 1.5; text-transform: uppercase; }

/* §3 · Plain sections on a page */
.page-section { position: relative; padding: clamp(4.5rem, 8vw, 7.5rem) var(--gutter); }
.page-section.is-tinted { background: radial-gradient(50% 40% at 100% 0%, #9460ef12, transparent 66%), #f4f3f7; }
.page-wrap { max-width: 1320px; margin: 0 auto; }
.page-kicker { margin: 0 0 1.1rem; color: #6e6978; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page-h2 { max-width: 16ch; margin: 0; color: #17151e; font-family: var(--serif); font-size: clamp(2.4rem, 4.8vw, 4.6rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; text-transform: uppercase; }
.page-intro { max-width: 36rem; margin: 1.2rem 0 0; color: #5f5a69; font-size: 1rem; line-height: 1.7; }
.page-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.2rem, 4.5vw, 3.5rem); }
.glass-card {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid #ffffffe0;
  border-radius: 1.5rem;
  background: radial-gradient(380px circle at var(--spot-x, 110%) var(--spot-y, -12%), #fff, #fff0 70%), linear-gradient(150deg, #ffffffe0, #f6f3fcb3);
  box-shadow: inset 0 1px 0 #fff, var(--lift-2);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.glass-card:hover { transform: translateY(-.25rem); box-shadow: inset 0 1px 0 #fff, var(--lift-3), 0 0 50px -28px #9460ef66; }
.glass-card .step-no {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 1.4rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #f5f2fb) padding-box, var(--lumen-arc) border-box;
  color: #4a3f5c;
  font-size: .7rem;
  font-weight: 700;
}
.glass-card h3 { margin: 0 0 .6rem; color: #2b2435; font-family: var(--sans); font-size: 1.12rem; font-weight: 700; letter-spacing: -.03em; }
.glass-card p { margin: 0; color: #5f5a69; font-size: .9rem; line-height: 1.65; }
/* A whole card as a link (the 404 page's ways back in): the spectral edge arrives on hover. */
a.glass-card.is-link { display: block; color: inherit; }
a.glass-card.is-link:hover, a.glass-card.is-link:focus-visible { background: radial-gradient(380px circle at var(--spot-x, 110%) var(--spot-y, -12%), #fff, #fff0 70%) padding-box, linear-gradient(150deg, #fff, #f8f6fce6) padding-box, var(--lumen-arc) border-box; border-color: transparent; }
a.glass-card.is-link:focus-visible { outline: 3px solid #5158cf; outline-offset: 4px; }
.not-found { min-height: 60svh; display: grid; align-content: center; }
.not-found .page-hero-inner { width: 100%; } /* auto margins in a grid would shrink it to its content */
.glass-card a { color: var(--lumen-violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* A quiet link at the end of a home page preview, to the page that holds the rest. */
.more-link { margin: 2rem 0 0; }
.more-link a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffe6, #f7f5fcd1) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: #2b2435;
  font-size: .82rem;
  font-weight: 600;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.more-link a:hover { background: linear-gradient(#fff, #fbf9fe) padding-box, var(--lumen-arc) border-box; transform: translateY(-2px); }
.more-link.on-dark a { background: #ffffff14 padding-box, linear-gradient(#ffffff66, #ffffff66) border-box; color: #fff; box-shadow: var(--rim-dark); }
.more-link.on-dark a:hover { background: #ffffff26 padding-box, var(--lumen-arc) border-box; }
.commerce-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; margin-top: 2rem; }
.commerce-cta .button.light { margin-top: 0 !important; }
.commerce-cta .commerce-more { color: #e0d7f0; font-size: .8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.commerce-cta .commerce-more:hover { color: #fff; }

/* Long-form text (the privacy policy): a readable measure, set on one pane of glass. */
.legal {
  max-width: 50rem;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  border: 1px solid #ffffffe0;
  border-radius: 1.8rem;
  background: linear-gradient(150deg, #ffffffe6, #f8f6fcc7);
  box-shadow: inset 0 1px 0 #fff, var(--lift-2);
  color: #4b4757;
  font-size: 1rem;
  line-height: 1.75;
}
.legal h2 { margin: 2.4rem 0 .8rem; color: #17151e; font-family: var(--sans); font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.6rem 0 .4rem; color: #2b2435; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .6rem; }
.legal strong { color: #2b2435; }
.legal a { color: var(--lumen-violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* §4 · Questions, opening like glass */
.faq { display: grid; gap: .6rem; max-width: 56rem; margin-top: clamp(2rem, 4vw, 3rem); }
.faq details {
  border: 1px solid #ffffffe0;
  border-radius: 1.2rem;
  background: linear-gradient(150deg, #ffffffe0, #f6f3fcb3);
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.faq details[open] { background: linear-gradient(150deg, #fff, #faf8fde6) padding-box, var(--lumen-arc-soft) border-box; border-color: transparent; box-shadow: inset 0 1px 0 #fff, var(--lift-2); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  color: #2b2435;
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; color: #6b3ec2; font-size: 1.3rem; font-weight: 400; line-height: 1; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid #5158cf; outline-offset: 2px; border-radius: 1.2rem; }
.faq details > div { padding: 0 1.3rem 1.2rem; color: #5f5a69; font-size: .92rem; line-height: 1.7; }
.faq details > div a { color: var(--lumen-violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* §5 · The closing band */
.page-cta { padding: clamp(4rem, 8vw, 7rem) var(--gutter); background: radial-gradient(ellipse at 6% 82%, #d8f2f7, transparent 55%), radial-gradient(ellipse at 94% 26%, #ece1f8, transparent 58%), radial-gradient(ellipse at 62% 108%, #fbe8dd, transparent 50%), #fbfbfd; }
.page-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  overflow: hidden;
  border: 1px solid #ffffff21;
  border-radius: 2rem;
  color: #fff;
  background: radial-gradient(520px circle at var(--spot-x, 100%) var(--spot-y, 0%), #ffffff24, #fff0 68%), linear-gradient(152deg, #2e2740, #16141f 72%);
  box-shadow: var(--rim-dark), var(--lift-3), 0 0 70px -30px #9460ef8c;
}
.page-cta-card h2 { max-width: 16ch; margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4.6vw, 4.4rem); font-weight: 400; line-height: .96; letter-spacing: -.05em; text-transform: uppercase; }
.page-cta-card p { max-width: 30rem; margin: 1rem 0 0; color: #d6cde6; line-height: 1.65; }
.page-cta-card .page-kicker { color: #c9bfdb; }
.page-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; }
.page-cta-card .button.dark {
  min-height: 3.3rem;
  padding-inline: 1.5rem;
  color: #17151e;
  background: linear-gradient(#fff, #eeeaf6) padding-box, var(--lumen-arc) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -12px #9460ef99;
}
.page-cta-card .button.dark:hover { background: linear-gradient(#fff, #f6f3fb) padding-box, var(--lumen-arc) border-box; box-shadow: inset 0 1px 0 #fff, 0 14px 38px -12px #9460efc4, 0 0 34px -8px #f16ec466; }
.page-cta-card .cta-link { color: #d9ccff; font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.page-cta-card .cta-link:hover { color: #fff; }

/* §6 · The AI page opens on its own section (its headline is the page's h1; the .ai-copy rules
   in the earlier sheets cover h1 and h2 alike). */
.ai-section.is-page-hero { padding-top: clamp(3rem, 6vw, 5rem); }
/* On the home page this seam lets the dark catalogue above bleed into the paper; on its own page
   there is nothing dark above, so it would only be a grey smear under the nav. */
#ai.is-page-hero::before { display: none; }
.page-crumbs-ai { max-width: 1320px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
#ai.no-seam::before { display: none; }

/* §7 · Industry pages: the try-it panel, the phone line and the chat side by side on one card. */
.ind-try { max-width: 1320px; margin: 0 auto; }
.ind-try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 1.2rem; }
#ai .ind-try-title { margin: .4rem 0 0; color: #2b2435; font-family: var(--sans); font-size: clamp(1.55rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; }
.ind-try .live-prompts { margin-top: .4rem; }
.ind-try .live-prompts > p.live-fine { margin: 1rem 0 0; padding-top: 0; color: #6e6479; font-size: .74rem; font-weight: 400; letter-spacing: 0; line-height: 1.6; text-transform: none; }
#ai .ind-try + .calc { margin-top: clamp(4rem, 8vw, 6.5rem); }
@media (max-width: 900px) { .ind-try-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1050px) {
  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-cta-card { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 720px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .page-facts { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .page-facts > div { padding-left: 0; border-left: 0; }
  .page-cta-card .button.dark { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-card, .more-link a, .faq summary::after { transition: none; }
}