/* ── 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;}}

/* ── 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%);
}
.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); }
}

/* ── 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; }
}

/* ── calculator.css ── */
/* The missed-call calculator. One pane of glass in two temperaments: the frosted side where
   the visitor describes their week, and a dark lens where the cost comes into focus in the
   KLVR spectrum. Same recipe as the packages: pointer-lit fill, masked spectral rim. */

.calc {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: clamp(5rem, 10vw, 9rem) auto 0;
  scroll-margin-top: 6rem;
}

/* §1 · The pane */
.calc-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(.5rem, 1vw, .75rem);
  margin: 0;
  padding: clamp(.5rem, 1vw, .75rem);
  border: 1px solid #ffffffe0;
  border-radius: 2rem;
  background:
    radial-gradient(520px circle at var(--spot-x, 8%) var(--spot-y, -10%), #ffffff, #ffffff00 70%),
    linear-gradient(150deg, #ffffffe0, #f6f3fcb3);
  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-3);
}
/* #ai-scoped to outrank receptionist.css's still rims. The light travels while someone is
   hovering or adjusting, the same "only when it means something" rule as the brief form. */
#ai .calc-panel .lumen-rim { opacity: .45; }
.calc-panel .lumen-rim::before { width: 180%; margin: -90% 0 0 -90%; }
#ai .calc-panel:hover .lumen-rim, #ai .calc-panel:focus-within .lumen-rim { opacity: .85; }
#ai .calc-panel:hover .lumen-rim::before, #ai .calc-panel:focus-within .lumen-rim::before { opacity: 1; animation-play-state: running; }

.calc-inputs { padding: clamp(1.1rem, 2.4vw, 2.25rem); }

/* §2 · Presets: capsules that catch the spectrum when chosen */
.calc-presets { margin: 0 0 .5rem; padding: 0; border: 0; min-width: 0; }
.calc-presets legend, .calc-result-label {
  margin: 0 0 .8rem;
  padding: 0;
  color: #6f5f80;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.calc-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.calc-chip {
  min-height: 2.45rem;
  padding: 0 .85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffd9, #f7f5fcc7) padding-box, linear-gradient(#e3dded, #efebf4) border-box;
  box-shadow: inset 0 1px 0 #fff;
  color: #3b324a;
  font: 600 .76rem var(--sans);
  cursor: pointer;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease), color .3s ease;
}
.calc-chip:hover { background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc-soft) border-box; transform: translateY(-1px); }
.calc-chip[aria-pressed="true"] {
  color: #2b2435;
  background: linear-gradient(#fffffffa, #fbf9fef0) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 12px 26px -16px #6a4fbf66;
}

/* §3 · Fields */
.calc-field { margin-top: 1.55rem; }
.calc-label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calc-label label { color: #2b2435; font-size: .86rem; font-weight: 600; }
.calc-label output {
  min-width: 3.5rem;
  color: #17151e;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-hint { margin: .15rem 0 0; color: #7a7386; font-size: .72rem; line-height: 1.5; }
.calc-money {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: .3rem .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffeb, #f7f5fcd9) padding-box, var(--lumen-arc-soft) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: #17151e;
  font-size: 1.05rem;
  font-weight: 600;
}
.calc-money:focus-within { background: linear-gradient(#fff, #fff) padding-box, var(--lumen-arc) border-box; }
.calc-money input {
  width: 6ch;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: -.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc-money input::-webkit-outer-spin-button, .calc-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* §4 · Sliders: the spectrum is revealed as the value grows; the thumb is a glass bead. */
.calc-range {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.2rem;
  margin: .35rem 0 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.calc-range:focus { outline: none; }
.calc-range::-webkit-slider-runnable-track {
  height: .5rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #0000 var(--fill), #e8e4ef var(--fill)),
    linear-gradient(90deg, var(--lumen-cyan), var(--lumen-blue) 26%, var(--lumen-violet) 50%, var(--lumen-pink) 75%, var(--lumen-amber));
  box-shadow: inset 0 1px 2px #1d173329, 0 1px 0 #ffffffe6;
}
.calc-range::-moz-range-track {
  height: .5rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #0000 var(--fill), #e8e4ef var(--fill)),
    linear-gradient(90deg, var(--lumen-cyan), var(--lumen-blue) 26%, var(--lumen-violet) 50%, var(--lumen-pink) 75%, var(--lumen-amber));
  box-shadow: inset 0 1px 2px #1d173329, 0 1px 0 #ffffffe6;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -.55rem;
  border: 1px solid #ffffffee;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 26%, #f5f2fb 58%, #e2dbee);
  box-shadow: 0 0 0 1px #2a234a1c, 0 5px 12px -3px #241d4252, inset 0 -3px 5px #9460ef24, inset 0 2px 1px #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.calc-range::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid #ffffffee;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 26%, #f5f2fb 58%, #e2dbee);
  box-shadow: 0 0 0 1px #2a234a1c, 0 5px 12px -3px #241d4252, inset 0 -3px 5px #9460ef24, inset 0 2px 1px #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.calc-range:active::-webkit-slider-thumb, .calc-range:hover::-webkit-slider-thumb { transform: scale(1.14); }
.calc-range:active::-moz-range-thumb, .calc-range:hover::-moz-range-thumb { transform: scale(1.14); }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px #2a234a1c, 0 0 0 5px #5158cf59, 0 5px 12px -3px #241d4252, inset 0 -3px 5px #9460ef24; }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px #2a234a1c, 0 0 0 5px #5158cf59, 0 5px 12px -3px #241d4252, inset 0 -3px 5px #9460ef24; }

/* §5 · The lens: dark glass, the same temperament as the featured care plan. */
.calc-result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.8vw, 2.5rem);
  border: 1px solid #ffffff1f;
  border-radius: 1.55rem;
  color: #fff;
  background:
    radial-gradient(440px circle at var(--spot-x, 100%) var(--spot-y, 0%), #ffffff1f, #ffffff00 68%),
    linear-gradient(152deg, #2e2740, #16141f 70%);
  box-shadow: var(--rim-dark), var(--lift-2), 0 0 60px -26px #9460ef8c;
}
/* The light the number gives off, pooled behind it. */
.calc-result::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  top: -30%;
  width: 90%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #9460ef59, #608aff26 55%, #0000);
  opacity: var(--glow, .6);
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.calc-result-label { color: #c9bfdb; }
.calc-total {
  margin: 0;
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(105deg, #9fedf3, #b9bcff 32%, #dcb3f0 62%, #ffd2b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calc-year { margin: .7rem 0 0; color: #e7e1f1; font-size: 1rem; font-weight: 500; }
.calc-year span { font-weight: 700; font-variant-numeric: tabular-nums; }

/* A month of calls, as points of light. Hollow ones went to voicemail. */
.calc-field-viz { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.calc-dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: .42rem; }
.calc-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff3d;
  box-shadow: inset 0 1px 0 #ffffff40;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 6ms);
}
.calc-dots i.is-missed {
  background: #0000;
  box-shadow: inset 0 0 0 1.5px var(--c, #f16ec4), 0 0 10px -2px var(--c, #f16ec4);
  transform: scale(.86);
}
.calc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0; color: #b9b0c8; font-size: .66rem; }
.calc-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.calc-legend i { width: .55rem; height: .55rem; border-radius: 50%; background: #ffffff4d; }
.calc-legend i.is-missed { background: #0000; box-shadow: inset 0 0 0 1.5px #f16ec4; }
.calc-legend-scale { margin-left: auto; color: #968cab; }

.calc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; }
.calc-stats > div { padding: .9rem 0 0 1rem; border-top: 1px solid #ffffff1f; border-left: 1px solid #ffffff1f; }
.calc-stats > div:first-child { padding-left: 0; border-left: 0; }
.calc-stats dt { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.calc-stats dd { margin: .3rem 0 0; max-width: 9rem; color: #b9b0c8; font-size: .62rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }

.calc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: auto; padding-top: clamp(1.6rem, 3vw, 2.2rem); }
/* A light capsule on dark glass: the one bright object in the lens. */
#ai .calc-cta .button.dark {
  min-height: 3.3rem;
  padding-inline: 1.5rem;
  color: #17151e;
  background: linear-gradient(#ffffff, #eeeaf6) padding-box, var(--lumen-arc) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -12px #9460ef99;
}
#ai .calc-cta .button.dark:hover, #ai .calc-cta .button.dark:focus-visible {
  background: linear-gradient(#ffffff, #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;
}
.calc-cta-link { color: #d9ccff; font-size: .78rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.calc-cta-link:hover { color: #fff; }
.calc-cta-link:focus-visible { outline: 3px solid #b4a2dc; outline-offset: 4px; border-radius: 4px; }
.calc-fine { margin: 1rem 0 0; color: #a39bb3; font-size: .68rem; line-height: 1.55; }

/* §6 · Responsive */
@media (max-width: 1050px) {
  .calc-panel { grid-template-columns: minmax(0, 1fr); max-width: 42rem; margin-inline: auto; }
  .calc .live-head { max-width: 42rem; margin-inline: auto; }
}
@media (max-width: 720px) {
  .calc-panel { border-radius: 1.6rem; }
  .calc-result { border-radius: 1.25rem; }
  .calc-dots { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: .38rem; }
  .calc-stats dd { font-size: .58rem; }
  .calc-legend-scale { margin-left: 0; width: 100%; }
  #ai .calc-cta .button.dark { width: 100%; }
}
@media (max-width: 380px) {
  .calc-chip { padding: 0 .8rem; font-size: .72rem; }
  .calc-stats > div { padding-left: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-dots i, .calc-chip, .calc-range::-webkit-slider-thumb, .calc-result::before { transition: none; }
}
@media (forced-colors: active) {
  .calc-total { background: none; -webkit-text-fill-color: currentColor; }
  .calc-dots i { forced-color-adjust: none; background: CanvasText; }
  .calc-dots i.is-missed { background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  .calc-range { forced-color-adjust: auto; }
}

/* ── 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], .chat-fallback[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 · Fallback: Ulio's own embed, only if our line to it fails. */
.chat-frame.is-fallback .chat-skeleton { display: none; }

/* §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; }
.kdock-fallback { margin: 3rem 1.5rem; color: #4a3f5c; font-size: .9rem; line-height: 1.6; }
.kdock-fallback a { color: var(--lumen-violet-ink); font-weight: 600; }

@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; }
}

/* ── estimator.css ── */
/* The project estimator. The calculator's pane in a second room: frosted choices on the left,
   the dark lens on the right where the estimate assembles itself line by line. */

.est { position: relative; z-index: 2; max-width: 1320px; margin: clamp(5rem, 9vw, 8rem) auto 0; scroll-margin-top: 6rem; }
#services .est .live-head 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;
}
#services .est .live-head .spectral-text {
  background: linear-gradient(110deg, #3f7a8b, #7c5fa8 52%, #a3637a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.est-panel { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.est-panel:hover .lumen-rim, .est-panel:focus-within .lumen-rim { opacity: .85; }

/* §1 · Groups */
.est-group { margin: 0 0 1.9rem; padding: 0; border: 0; min-width: 0; }
.est-group:last-child { margin-bottom: 0; }
.est-group legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  padding: 0;
  color: #2b2435;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.est-group legend span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #f5f2fb) padding-box, var(--lumen-arc-soft) border-box;
  color: #6f5f80;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Inputs stay real inputs for keyboards and screen readers; only the glass is custom. */
.est-option input, .est-toggle input, .est-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* §2 · Base: glass tiles that catch the spectrum when chosen */
.est-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.est-option { position: relative; display: block; cursor: pointer; }
.est-card {
  display: grid;
  gap: .25rem;
  height: 100%;
  padding: .85rem .9rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(150deg, #ffffffd9, #f7f5fcc7) padding-box, linear-gradient(#e6e1ee, #eeeaf4) border-box;
  box-shadow: inset 0 1px 0 #fff;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .35s var(--ease);
}
.est-card strong { color: #2b2435; font-size: .86rem; font-weight: 700; letter-spacing: -.02em; }
.est-card em { color: #7a7386; font-size: .7rem; font-style: normal; line-height: 1.4; }
.est-card b { margin-top: .35rem; color: #17151e; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-option:hover .est-card { background: linear-gradient(150deg, #fff, #faf8fde6) padding-box, var(--lumen-arc-soft) border-box; transform: translateY(-1px); }
.est-option input:checked + .est-card {
  background: radial-gradient(160px circle at 0% 0%, #ffffff, #ffffff00 70%) padding-box, linear-gradient(150deg, #fff, #fbf9fe) padding-box, var(--lumen-arc) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #1d173314, 0 14px 30px -18px #6a4fbf73;
}
.est-option input:focus-visible + .est-card, .est-toggle input:focus-visible + span, .est-pill input:focus-visible + span { outline: 3px solid #5158cf; outline-offset: 3px; }

/* §3 · Add-ons: rows with a glass switch */
.est-toggles { display: grid; gap: .45rem; }
.est-toggle { position: relative; display: block; cursor: pointer; }
.est-toggle > span {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  grid-template-areas: "switch title price" "switch note price";
  align-items: center;
  column-gap: .8rem;
  padding: .7rem .95rem .7rem .75rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(150deg, #ffffffd1, #f7f5fcbf) padding-box, linear-gradient(#e8e3ef, #efebf4) border-box;
  box-shadow: inset 0 1px 0 #fff;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.est-toggle > span::before {
  content: "";
  grid-area: switch;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #e5e1ec;
  box-shadow: inset 0 1px 2px #1d173326;
  transition: background .35s var(--ease);
}
.est-toggle > span::after {
  content: "";
  position: absolute;
  left: calc(.75rem + 3px);
  top: 50%;
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  margin-top: calc(-.75rem + 3px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 26%, #f5f2fb 58%, #e2dbee);
  box-shadow: 0 0 0 1px #2a234a1c, 0 3px 7px -2px #241d4252;
  transition: transform .35s var(--ease);
}
.est-toggle input:checked + span::before { background: linear-gradient(90deg, var(--lumen-cyan), var(--lumen-blue) 40%, var(--lumen-violet)); }
.est-toggle input:checked + span::after { transform: translateX(1.1rem); }
.est-toggle input:checked + span { background: linear-gradient(150deg, #fff, #fbf9fe) padding-box, var(--lumen-arc-soft) border-box; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px #6a4fbf66; }
.est-toggle strong { grid-area: title; color: #2b2435; font-size: .84rem; font-weight: 600; }
.est-toggle em { grid-area: note; color: #7a7386; font-size: .7rem; font-style: normal; }
.est-toggle b { grid-area: price; color: #17151e; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-toggle:not(.is-feature) > span { grid-template-areas: "switch title price"; }
/* The receptionist is the one add-on that is also a product: it gets the light. */
.est-toggle.is-feature > span { background: radial-gradient(220px circle at 100% 0%, #9460ef14, #0000 70%) padding-box, linear-gradient(150deg, #ffffffe6, #f7f5fcd1) padding-box, var(--lumen-arc-soft) border-box; }

/* §4 · Care: capsules */
.est-pill { position: relative; cursor: pointer; }
.est-pill > span {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0 .95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#ffffffd9, #f7f5fcc7) padding-box, linear-gradient(#e3dded, #efebf4) border-box;
  box-shadow: inset 0 1px 0 #fff;
  color: #3b324a;
  font-size: .76rem;
  font-weight: 600;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.est-pill:hover > span { background: linear-gradient(#fffffff2, #faf8fde6) padding-box, var(--lumen-arc-soft) border-box; }
.est-pill input:checked + span { background: linear-gradient(#fffffffa, #fbf9fef0) padding-box, var(--lumen-arc) border-box; box-shadow: inset 0 1px 0 #fff, 0 12px 26px -16px #6a4fbf66; color: #2b2435; }

/* §5 · The lens */
.est-total { display: flex; align-items: baseline; gap: .6rem; }
.est-from { font-size: .3em; letter-spacing: 0; -webkit-text-fill-color: #c9bfdb; }
.est-from[hidden] { display: none; }
.est-monthly { min-height: 1.5rem; }
.est-lines { margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; border-top: 1px solid #ffffff1f; }
.est-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid #ffffff14;
  color: #e7e1f1;
  font-size: .84rem;
  animation: est-line .5s var(--ease) both;
}
.est-lines li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-lines li.is-quote b { color: #d9ccff; font-weight: 500; }
.est-lines li.is-monthly b { color: #b9f0de; }
@keyframes est-line { from { opacity: 0; transform: translateX(8px); filter: blur(4px); } }
.est-quote { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid #ffffff1f; border-radius: .9rem; background: #ffffff0d; color: #d6cde6; font-size: .76rem; line-height: 1.55; }
.est .calc-cta .button.dark {
  min-height: 3.3rem;
  padding-inline: 1.5rem;
  color: #17151e;
  background: linear-gradient(#ffffff, #eeeaf6) padding-box, var(--lumen-arc) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -12px #9460ef99;
}
.est .calc-cta .button.dark:hover, .est .calc-cta .button.dark:focus-visible {
  background: linear-gradient(#ffffff, #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;
}

@media (max-width: 1050px) {
  .est-panel { grid-template-columns: minmax(0, 1fr); max-width: 42rem; margin-inline: auto; }
  .est .live-head { max-width: 42rem; margin-inline: auto; }
}
@media (max-width: 720px) {
  .est-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est .calc-cta .button.dark { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .est-lines li { animation: none; }
  .est-card, .est-toggle > span, .est-toggle > span::after, .est-toggle > span::before { transition: none; }
}
@media (forced-colors: active) {
  .est-option input:checked + .est-card, .est-toggle input:checked + span, .est-pill input:checked + span { outline: 3px solid Highlight; }
}

/* ── 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; }
}