:root { --night: #050608; }
.site-header { border-bottom: 0; }
.wrap { width: min(100% - 6rem, 86rem); }
.header-inner { min-height: 6.5rem; }
.brand { font-size: 1.5rem; font-weight: 400; }
.site-nav a { font-weight: 400; }
.hero { position: relative; isolation: isolate; }
.hero-shell { min-height: max(760px, calc(100svh - 6.5rem)); padding-block: 3.5rem 9rem; position: static; align-items: flex-start; }
.hero-copy { width: 51%; max-width: 43rem; background: none; }
.hero h1 { font-size: clamp(3.3rem, 5.2vw, 5.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -.048em; max-width: none; }
.hero-context { font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: #bec4cd; margin-bottom: 1.7rem; }
.hero-copy .lead { font-size: clamp(1.125rem, 1.35vw, 1.3rem); max-width: 44ch; color: #c6cbd3; }
.hero-detail { max-width: 43ch; font-size: 1rem; color: #aab2bf; }
.hero-actions { gap: 1rem; margin-top: 2rem; }
.hero .text-link { font-weight: 400; font-size: 1rem; }
.hero .button { font-weight: 500; min-height: 3.4rem; }
.call-note { color: #aab2bf; }
.hero-art { display: none; }
.prism-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.prism-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.prism-stage.is-live canvas { opacity: 1; }
.prism-stage.is-live .prism-poster { visibility: hidden; }
.prism-poster { position: absolute; inset: 0; overflow: hidden; }
.prism-poster::before { content: ''; position: absolute; left: 62%; top: 65%; width: 70%; height: 82%; transform: translateY(-50%); background: conic-gradient(from 50deg at 0% 50%, transparent 0deg, #ae442a55 9deg, #ffd5a499 22deg, #fff4daee 34deg, #c1f0ffff 40deg, #4ca9ec99 48deg, #1256c344 65deg, transparent 79deg); filter: blur(9px); mask-image: linear-gradient(90deg, #000, #000 55%, transparent); }
.fallback-beam { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 2px #cce7ff); }
.prism-poster img { position: absolute; left: 62%; top: 65%; height: 51%; width: auto; transform: translate(-50%, -50%); z-index: 1; }
.motion-toggle { position: absolute; right: 3rem; bottom: 1.5rem; z-index: 3; border: 1px solid #74818e; border-radius: 999px; padding: .5rem 1rem; background: #080b10; color: #d3dae2; font: inherit; font-size: 1rem; cursor: pointer; min-height: 44px; }
.motion-toggle[hidden] { display: none; }
.example-section { background: #edf0ec; }
@media (max-width: 1050px) and (min-width: 761px) {
  .hero-copy { width: 57%; }
  .hero h1 { font-size: 4.3vw; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 7rem; gap: 1.1rem; }
  .site-nav ul { gap: .8rem 1.2rem; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 36px; }
  .hero-shell { min-height: 0; padding: 3.5rem 0 23rem; }
  .hero-copy { width: 100%; max-width: 38rem; }
  .hero h1 { font-size: clamp(2.7rem, 8.6vw, 4.5rem); }
  .hero-context { font-size: 1rem; }
  .prism-stage { top: auto; height: 23rem; bottom: 0; }
  .prism-poster img { left: 45%; top: 47%; height: 77%; }
  .prism-poster::before { left: 45%; top: 47%; width: 95%; height: 110%; }
  .fallback-beam { width: 72.58%; transform: translateY(-18%); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .motion-toggle { right: 1.25rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- dark scheme for the rest of the page (Amanda, 2026-09-19): the hero's night carries through ---- */
:root {
  color-scheme: dark;
  --paper: #050608;
  --white: #0b0e13;          /* section surface (was the white sections) */
  --ink: #edf1f5;
  --deep: #edf1f5;           /* primary button fill */
  --teal: #9fd6ff;           /* links, labels, counters */
  --muted: #a9b3bf;
  --mist: #0b0e13;           /* example + approach surfaces */
  --line: rgba(237, 241, 245, 0.16);
  --gold: #ffc766;
}
body { background: var(--paper); color: var(--ink); }
.example-section { background: var(--mist); border-top: 1px solid var(--line); }
.services { background: var(--paper); }
.approach { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.button { background: var(--deep); color: var(--night); }
.button:hover { background: #ffffff; color: var(--night); }
.skip-link { background: var(--ink); color: var(--night); }
.contact { background: var(--mist); color: var(--ink); border-top: 1px solid var(--line); }
.contact p { color: var(--muted); }
.contact .button { background: var(--ink); color: var(--night); }
.contact .button:hover { background: #ffffff; }
.contact-email a { color: var(--ink); }
.site-footer { background: var(--paper); color: var(--muted); border-top: 1px solid var(--line); }
.audience { border-left-color: var(--gold); }
::selection { background: var(--ink); color: var(--night); }

/* ---- the prism light, repeated: a spectrum thread through the rest of the page ---- */
:root { --spectrum: linear-gradient(90deg, #ff5a45 0%, #ffb347 22%, #fff1a8 42%, #8fe3ff 62%, #3d8bff 82%, #a06bff 100%); }
.example-section, .approach, .contact, .site-footer { position: relative; border-top: 0; }
.example-section::before, .approach::before, .contact::before, .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--spectrum); opacity: .6; pointer-events: none;
}
.approach { border-bottom: 0; }
.example li:nth-child(1)::before, .steps li:nth-child(1)::before { color: #ff9a8a; }
.example li:nth-child(2)::before, .steps li:nth-child(2)::before { color: #ffcf6b; }
.example li:nth-child(3)::before, .steps li:nth-child(3)::before { color: #8fe3ff; }
.steps li:nth-child(4)::before { color: #b391ff; }
.audience { border-left: 0; padding-left: 1.1rem; position: relative; }
.audience::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: linear-gradient(180deg, #ff5a45, #ffb347, #fff1a8, #8fe3ff, #3d8bff); }
.contact { overflow: hidden; }
.contact .wrap { position: relative; z-index: 1; }
.contact::after {
  content: ''; position: absolute; right: -6%; top: -40%; width: 46%; height: 180%; pointer-events: none;
  background: conic-gradient(from 195deg at 100% 50%, transparent 0deg, #ff5a4540 18deg, #ffb34745 32deg, #fff1a845 46deg, #8fe3ff45 60deg, #3d8bff40 74deg, #a06bff30 86deg, transparent 100deg);
  filter: blur(34px);
}

/* ---- smoky backgrounds: slow fog behind every section (Amanda, 2026-09-19) ---- */
html { background: #050608; }
body { position: relative; z-index: 0; background: transparent; }
:root { --mist: rgba(11, 14, 19, 0.62); --paper: transparent; }
.site-footer { background: rgba(5, 6, 8, 0.6); }
body::before, body::after { content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none; will-change: transform; }
body::before {
  background:
    radial-gradient(55% 42% at 18% 28%, rgba(120, 140, 170, 0.20), transparent 70%),
    radial-gradient(48% 38% at 78% 62%, rgba(96, 118, 150, 0.18), transparent 70%),
    radial-gradient(42% 34% at 46% 88%, rgba(150, 128, 118, 0.12), transparent 70%),
    radial-gradient(36% 30% at 62% 14%, rgba(110, 130, 160, 0.12), transparent 70%);
  filter: blur(28px);
  animation: fog-drift 46s ease-in-out infinite alternate;
}
body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.0045' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 0.60  0 0 0 0 0.66  0 0 0 0 0.78  0 0 0 0.9 -0.25'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size: 900px 900px;
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: fog-roll 70s linear infinite alternate;
}
@keyframes fog-drift { from { transform: translate3d(-3%, -2%, 0) scale(1.04); } to { transform: translate3d(3%, 2.5%, 0) scale(1.12); } }
@keyframes fog-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6%, -4%, 0); } }
.hero { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
.hero .button { background: transparent; color: var(--night-ink); }
.hero .button:hover { background: var(--night-ink); color: var(--night); }