/* ============================================================
   The Puck — case-study microsite (auteur-studio.com/puck/)
   Auteur house style, tuned to The Puck's brand:
   deep navy ground, amber-gold accent, Cormorant + Syne.
   Image-forward: full-bleed plates, large type, the living
   "Ask The Puck" intelligence mark reproduced faithfully.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #070d1c;   /* The Puck ground */
  --navy-2:     #0a1224;
  --navy-mid:   #0d1630;
  --white:      #ffffff;
  --off-white:  #eef1f6;
  --mid:        #9aa4b6;
  --soft:       #6b768a;
  --dim:        #39424f;
  --rule:       #17203a;
  --accent:     #c9a84c;   /* The Puck gold */
  --accent-dim: #8f7a3e;
  --accent-bri: #e4c184;
  --accent-core:#f5c878;

  --pad:   clamp(24px, 6vw, 120px);
  --prose: 640px;
  --wide:  920px;
  --full:  1240px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.serif { font-family: 'Cormorant Garamond', serif; font-weight: 300; }
.eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent);
}

/* ---------------- nav ---------------- */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem var(--pad);
  background: linear-gradient(180deg, rgba(3,6,14,0.85), rgba(3,6,14,0));
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
#nav.solid { background: rgba(5,9,20,0.92); backdrop-filter: blur(10px); border-bottom-color: var(--rule); }
.wordmark {
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--white); text-decoration: none;
  white-space: nowrap; transition: color 0.25s;
}
.wordmark:hover { color: var(--accent); }
.nav-links { display: flex; gap: clamp(1rem, 2.6vw, 2.4rem); align-items: center; }
.nav-links a {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--soft); text-decoration: none;
  transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--off-white); }
.nav-links a.current { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav-live {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); background: var(--accent); text-decoration: none;
  padding: 0.5rem 1.05rem; white-space: nowrap; transition: background 0.2s;
}
.nav-live:hover { background: var(--accent-bri); }
.nav-toggle { display: none; width: 30px; height: 26px; flex-direction: column; justify-content: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 1.5px; width: 24px; background: var(--off-white); transition: transform 0.3s, opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 820px) {
  .wordmark { font-size: 0.72rem; letter-spacing: 0.2em; }
  .wordmark, .nav-right { position: relative; z-index: 2; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 1.5rem; background: rgba(5,9,20,0.97); backdrop-filter: blur(14px);
    padding: clamp(82px,15vh,120px) var(--pad) clamp(40px,7vh,64px);
    border-bottom: 1px solid var(--rule); z-index: 1;
    transform: translateY(-100%); visibility: hidden; transition: transform 0.38s cubic-bezier(.2,.7,.2,1), visibility 0.38s;
  }
  .nav-links.open { transform: translateY(0); visibility: visible; }
  .nav-links a { font-size: 1.05rem; letter-spacing: 0.12em; color: var(--off-white); }
  .nav-links a.current { color: var(--accent); }
}

/* ---------------- hero ---------------- */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-media, .hero video, .hero img.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,13,28,.55) 0%, rgba(7,13,28,0) 26%, rgba(7,13,28,.35) 60%, rgba(7,13,28,.96) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad) clamp(44px, 8vh, 110px); }
.hero .eyebrow { margin-bottom: 1.2rem; }
.hero-wordmark { max-width: min(560px, 74vw); margin-bottom: 1.6rem; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.6)); }
.hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2.8rem, 9.5vw, 8rem); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--off-white);
}
.hero h1 .sub-title { display:block; font-size: clamp(1rem, 3vw, 2.1rem); letter-spacing: 0.02em; color: var(--accent); font-style: italic; margin-top: 0.6rem; }
.hero-sub {
  margin-top: 1.4rem; max-width: 44ch;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem); color: var(--mid);
}
.hero-meta {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-dim);
}
.scroll-cue {
  position: absolute; z-index: 2; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }

/* ---------------- sections / rhythm ---------------- */
section { padding: clamp(48px, 8vh, 104px) var(--pad); }
section.tight { padding-top: clamp(30px,4.5vh,58px); padding-bottom: clamp(30px,4.5vh,58px); }
.measure { max-width: var(--prose); margin: 0 auto; }
.wide { max-width: var(--wide); margin: 0 auto; }

/* big centered quote */
.lead { max-width: var(--wide); margin: 0 auto; text-align: center; }
.lead .serif { font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--off-white); }
.lead .serif em { font-style: italic; color: var(--accent); }
.lead cite {
  display: block; margin-top: 1.8rem; font-style: normal;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent-dim);
}
.pull { max-width: var(--wide); margin: 0 auto; text-align: center; }
.pull .serif { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.28; font-style: italic; color: var(--accent-bri); }
.pull cite { display:block; margin-top: 1.6rem; font-style: normal; font-size: 0.66rem; font-weight:600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-dim); }

/* heading */
h2.head, .head {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--off-white);
}
.sec-head { max-width: var(--full); margin: 0 auto clamp(40px,6vh,72px); border-top: 1px solid var(--rule); padding-top: 1.5rem; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.sec-head .eyebrow { flex-shrink: 0; }
.sec-head .head { margin-left: auto; font-size: clamp(1.4rem,2.8vw,2.1rem); }

/* body prose */
.prose p { font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.78; color: var(--mid); }
.prose p + p { margin-top: 1.3rem; }
.prose p strong, .prose em.key { color: var(--off-white); font-weight: 500; font-style: normal; }
.prose .drop::first-letter { font-family:'Cormorant Garamond',serif; font-size: 3.4em; line-height: 0.8; float: left; padding: 0.05em 0.12em 0 0; color: var(--accent); font-weight: 400; }

/* ---------------- plates ---------------- */
.plate { padding: 0 var(--pad); }
.plate img, .plate video { width: 100%; display: block; }
.plate.tall img, .plate.tall video { max-height: 92vh; object-fit: cover; }
.plate.viewport img, .plate.viewport video { height: 100svh; object-fit: cover; }
.plate.bleed { padding: 0; }
figure { margin: 0; }
.cap { padding: 0.6rem 0 0; }
.cap, figcaption { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.cap .accent { color: var(--accent-dim); }

:root { --vmax: 500px; }
.plate.portrait { padding: clamp(36px,6vh,80px) var(--pad); display: flex; flex-direction: column; align-items: flex-start; }
.plate.portrait figure { display: inline-block; max-width: 100%; }
.plate.portrait img, .plate.portrait video { width: auto; max-width: min(100%, var(--vmax)); max-height: 82svh; object-fit: contain; }
.plate.portrait figcaption, .plate.portrait .cap { max-width: 100%; padding: 0.7rem 0 0; text-align: left; }
.plate.framed { padding: clamp(30px,4.5vh,56px) var(--pad); display: flex; flex-direction: column; align-items: flex-start; }
.plate.framed figure { display: inline-block; max-width: min(100%, 940px); }
.plate.framed img { width: 100%; height: auto; }

/* ---------------- lightbox ---------------- */
img.zoomable { cursor: zoom-in; }
.lb-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(3,6,14,0.95); display: flex; align-items: center; justify-content: center; padding: clamp(20px,5vh,64px) clamp(20px,5vw,80px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; cursor: zoom-out; }
.lb-overlay.open { opacity: 1; visibility: visible; }
.lb-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 60px rgba(0,0,0,0.6); }
.lb-close { position: fixed; top: clamp(14px,2vh,24px); right: clamp(16px,2.4vw,32px); z-index: 201; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--off-white); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: color 0.2s; }
.lb-close:hover { color: var(--accent); }

/* ---------------- sound toggle ---------------- */
.sound-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: none; cursor: pointer; padding: 0.3rem 0; color: var(--mid); transition: color 0.2s; }
.sound-btn:hover { color: var(--off-white); }
.sound-btn.playing { color: var(--accent); }
.sound-btn .eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.sound-btn .eq i { width: 2.5px; height: 5px; background: currentColor; border-radius: 1px; transition: height 0.2s; }
.sound-btn.playing .eq i { animation: eqbar 0.9s ease-in-out infinite; }
.sound-btn.playing .eq i:nth-child(1) { animation-delay: -0.5s; }
.sound-btn.playing .eq i:nth-child(2) { animation-delay: -0.2s; }
.sound-btn.playing .eq i:nth-child(3) { animation-delay: -0.7s; }
.sound-btn.playing .eq i:nth-child(4) { animation-delay: -0.35s; }
@keyframes eqbar { 0%,100% { height: 4px; } 50% { height: 18px; } }
.sound-btn .sound-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .sound-btn.playing .eq i { animation: none; height: 9px; } }
@media (max-width: 620px) { .sound-btn .sound-label { display: none; } }

/* ---------------- brand: wordmark evolution + roundels ---------------- */
/* Every mark sits on true black so gold + white read cleanly and the lockup's own
   black canvas blends seamlessly (dark-on-dark, never a light card on a dark page). */
.versions { max-width: var(--full); margin: clamp(20px,3vw,34px) auto 0; display: grid; gap: clamp(12px,1.6vw,18px); }
.version { position: relative; background: #000; border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(180px, 220px) 1fr; align-items: center; gap: clamp(18px,2.6vw,38px); padding: clamp(22px,3vw,38px) clamp(24px,3.4vw,46px); overflow: hidden; }
.version-label .vidx { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: var(--accent-dim); }
.version-label h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.3rem,2.2vw,1.7rem); line-height: 1.1; color: var(--off-white); margin: 0.3rem 0 0.5rem; letter-spacing: -0.01em; }
.version-label p { font-size: 0.8rem; line-height: 1.55; color: var(--soft); }
.version-mark { display: flex; align-items: center; justify-content: center; min-height: 76px; }
.version-mark img { width: auto; max-width: min(100%, 330px); max-height: 92px; object-fit: contain; }
.version.final { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 24px 70px rgba(0,0,0,0.55); }
.version.final .version-mark img { max-width: min(100%, 540px); max-height: 190px; }
.version.final .vidx { color: var(--accent); }
/* "before" — the inherited brand, shown as an archival artifact */
.version.before .vidx { color: var(--soft); }
.version.before .version-mark img { max-width: min(100%, 190px); max-height: 190px; border: 1px solid var(--rule); }
.version .vtag { position: absolute; top: 0; right: 0; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); background: var(--accent); padding: 0.4rem 0.85rem; }
.version .vtag.is-before { background: transparent; color: var(--soft); border: 1px solid var(--rule); border-top: 0; border-right: 0; }
@media (max-width: 720px) {
  .version { grid-template-columns: 1fr; gap: clamp(16px,4vw,24px); text-align: center; }
  .version-mark img { max-height: 76px; }
  .version.final .version-mark img { max-height: 150px; }
  .version.before .version-mark img { max-height: 160px; }
}

.marks { max-width: var(--full); margin: clamp(12px,1.6vw,18px) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px,2vw,22px); }
.mark-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; text-align: center; padding: clamp(30px,5vw,64px) clamp(20px,3vw,40px); background: linear-gradient(160deg, var(--navy-2), var(--navy)); border: 1px solid var(--rule); }
.mark-cell img { max-width: 100%; }
.mark-cell.lock img { width: min(300px, 80%); }
.mark-cell.circle img { width: min(150px, 54%); }
.mark-note { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 820px) { .marks { grid-template-columns: 1fr; } .mark-cell { padding: clamp(28px,7vw,48px); } }

/* ---------------- duo / trio ---------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: var(--full); margin: 0 auto; }
.duo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* split: image + text */
.split { max-width: var(--full); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split.flip .split-media { order: -1; }
.split-media img { width: 100%; }
.split-body .head { margin-bottom: 1.4rem; }
.split-body .eyebrow { margin-bottom: 1rem; }

/* ---------------- browser-framed screenshots (the website) ---------------- */
.browser { max-width: var(--full); margin: 0 auto; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--navy-2); box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #0c1428; border-bottom: 1px solid var(--rule); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3550; display: block; }
.browser-url { margin-left: 0.8rem; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--soft); font-family: 'Syne', sans-serif; }
.browser img { width: 100%; display: block; }
.shots { max-width: var(--full); margin: clamp(16px,2.4vw,26px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,22px); }
.shot { border: 1px solid var(--rule); overflow: hidden; background: var(--navy-2); }
.shot img { width: 100%; display: block; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption { padding: 0.7rem 1rem; border-top: 1px solid var(--rule); }
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }

/* ---------------- feature grid (platform capabilities) ---------------- */
.features { max-width: var(--full); margin: clamp(20px,3vw,34px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.feature { background: linear-gradient(160deg, var(--navy-2), var(--navy)); padding: clamp(24px,3vw,40px); }
.feature .fnum { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--accent); }
.feature h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.3rem,2.2vw,1.75rem); line-height: 1.12; color: var(--off-white); margin: 0.5rem 0 0.7rem; letter-spacing: -0.01em; }
.feature p { font-size: 0.95rem; line-height: 1.68; color: var(--mid); }
.feature p em { color: var(--off-white); font-style: normal; font-weight: 500; }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

/* ---------------- Ask The Puck — the living mark ---------------- */
.orb { position: relative; display: inline-block; line-height: 0; }
.orb--lg { width: 118px; height: 118px; }
.orb--xl { width: 168px; height: 168px; }
.orb-svg { width: 100%; height: 100%; overflow: visible; }
.orb-halo { opacity: 1; }
.orb-core { transform-box: fill-box; transform-origin: center; animation: orbBreath 3.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(240,180,94,.85)); }
.orb-idle, .orb-sonar, .orb-orbits, .orb-respond { opacity: 0; transition: opacity .45s ease; }
.orb.is-idle .orb-idle { opacity: 1; }
.orb.is-thinking .orb-orbits { opacity: 1; }
.orb.is-speaking .orb-respond { opacity: 1; }
.orb-idle circle { fill: none; stroke: #f0b45e; stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
.orb.is-idle .orb-idle circle { animation: orbPulse 3.4s ease-in-out infinite; }
.orb-orbits { transform-box: fill-box; transform-origin: center; }
.orb.is-thinking .orb-orbits { animation: orbDrift 9s linear infinite; }
.orb-orbits ellipse { fill: none; stroke: #e6a24c; stroke-width: .7; stroke-dasharray: 1.5 4; opacity: .7; }
.orb-orbits .dot { fill: #f0b45e; opacity: .9; }
.orb-respond .ring { fill: none; stroke: #e6a24c; stroke-width: 1; opacity: .38; }
.orb-respond .trail { stroke: #e6a24c; stroke-width: .5; opacity: .22; }
.orb-respond .beam { stroke: #f5c070; stroke-width: 2; filter: drop-shadow(0 0 5px #e6a24c); stroke-dasharray: 90; }
.orb-respond .lead { fill: #fff0d6; transform-box: fill-box; transform-origin: center; }
.orb.is-speaking .orb-respond .beam { animation: orbBeam 1.3s ease-out infinite; }
.orb.is-speaking .orb-respond .lead { animation: orbLead 1.3s ease-out infinite; }
.orb.is-speaking .orb-core { animation: orbBreath 1s ease-in-out infinite; }
@keyframes orbBreath { 0%,100%{transform:scale(.9);opacity:.9} 50%{transform:scale(1.08);opacity:1} }
@keyframes orbPulse { 0%,100%{opacity:.28;transform:scale(.95)} 50%{opacity:.7;transform:scale(1.05)} }
@keyframes orbDrift { to { transform: rotate(360deg); } }
@keyframes orbBeam { 0%{stroke-dashoffset:90;opacity:0} 25%{opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes orbLead { 0%{transform:translateX(0);opacity:0} 25%{opacity:1} 100%{transform:translateX(78px);opacity:0} }

/* agent showcase — the flagship: orb beside an illustrative conversation */
.agent-stage { position: relative; overflow: hidden; padding: clamp(90px,16vh,200px) var(--pad); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.orb--xl { width: 188px; height: 188px; }
.agent-banner { position: relative; z-index: 2; max-width: var(--full); margin: 0 auto clamp(40px,6vh,72px); }
.agent-banner .eyebrow { display: flex; align-items: center; gap: 0.8rem; }
.agent-banner .eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--accent); }
.agent-banner .big { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--off-white); margin-top: 1rem; }
.agent-banner .big em { font-style: italic; color: var(--accent); }

/* centered intro (orb + copy + caps) */
.agent-intro { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; }
.agent-intro .orb-wrap { display: inline-flex; padding: 1.4rem; border-radius: 50%; background: radial-gradient(circle, rgba(12,18,30,.85) 46%, rgba(12,18,30,.35) 74%, transparent 100%); box-shadow: inset 0 0 0 1.5px rgba(245,200,120,.4); margin-bottom: 1.6rem; }
.agent-intro .prose p { color: var(--mid); max-width: 62ch; margin-left: auto; margin-right: auto; }
.agent-intro .agent-caps { justify-content: center; }

/* real agent captures */
.agent-shots { position: relative; z-index: 2; max-width: var(--full); margin: clamp(30px,5vh,60px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,22px); }
.agent-shot { border: 1px solid var(--accent-dim); border-radius: 10px; overflow: hidden; background: #0a1020; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.agent-shot.span2 { grid-column: 1 / -1; }
.agent-shot img { width: 100%; display: block; }
.agent-shot figcaption { padding: 0.75rem 1.1rem; border-top: 1px solid var(--rule); }
.agent-shot figcaption .accent { color: var(--accent-dim); }
.agent-live-note { position: relative; z-index: 2; max-width: var(--full); margin: 0.9rem auto 0; text-align: right; color: var(--soft); }
@media (max-width: 820px) { .agent-shots { grid-template-columns: 1fr; } }
.agent-stage .bg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.32; }
.agent-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 30% 40%, rgba(7,13,28,0.35) 0%, rgba(7,13,28,0.82) 55%, rgba(7,13,28,0.97) 100%); }
.agent-grid { position: relative; z-index: 2; max-width: var(--full); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.agent-lede .orb-wrap { display: inline-flex; padding: 1.6rem; border-radius: 50%; background: radial-gradient(circle, rgba(12,18,30,.85) 46%, rgba(12,18,30,.35) 74%, transparent 100%); box-shadow: inset 0 0 0 1.5px rgba(245,200,120,.4); margin-bottom: 1.8rem; }
.agent-lede .head { margin: 0.4rem 0 1.2rem; }
.agent-lede .prose p { max-width: 42ch; }
.agent-caps { list-style: none; margin: 1.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.agent-caps li { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0.4rem 0.8rem; }

.chat { background: rgba(9,15,30,0.78); border: 1px solid var(--rule); backdrop-filter: blur(6px); padding: clamp(20px,3vw,34px); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.chat-head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.chat-head .dot { width: 34px; height: 34px; flex-shrink: 0; }
.chat-head .name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--off-white); }
.chat-head .sub { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.bubble { max-width: 86%; padding: 0.85rem 1.15rem; font-size: 0.94rem; line-height: 1.6; margin-bottom: 0.9rem; }
.bubble.q { margin-left: auto; background: var(--accent); color: var(--navy); font-weight: 500; border-radius: 12px 12px 3px 12px; }
.bubble.a { background: rgba(20,28,48,0.9); color: var(--off-white); border: 1px solid var(--rule); border-radius: 12px 12px 12px 3px; }
.bubble.a .src { display: block; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.chat-note { margin-top: 0.6rem; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); text-align: center; }
@media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; gap: clamp(28px,6vw,40px); } .agent-lede { text-align: center; } .agent-lede .prose p { margin-left: auto; margin-right: auto; } .agent-caps { justify-content: center; } .bubble { max-width: 92%; } }

/* ---------------- brand film player (play/pause + its own sound) ---------------- */
.film-frame { position: relative; width: 100%; overflow: hidden; background: #000; }
.film-frame video { width: 100%; height: auto; display: block; max-height: 92vh; object-fit: cover; }
.film-controls { position: absolute; left: clamp(12px,2vw,22px); bottom: clamp(12px,2vw,22px); z-index: 3; display: flex; align-items: center; gap: 0.65rem; }
.film-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(245,200,120,.45); background: rgba(7,13,28,.62); backdrop-filter: blur(8px); color: var(--accent-bri); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s, border-color .2s, transform .15s; }
.film-btn:hover { background: rgba(7,13,28,.88); border-color: var(--accent); transform: scale(1.06); }
.film-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.film-btn .ic-pause, .film-btn .ic-on { display: none; }
.film-frame.is-playing .film-btn.play .ic-play { display: none; }
.film-frame.is-playing .film-btn.play .ic-pause { display: block; }
.film-frame.is-unmuted .film-btn.sound .ic-off { display: none; }
.film-frame.is-unmuted .film-btn.sound .ic-on { display: block; }
.film-frame.is-unmuted .film-btn.sound { border-color: var(--accent); background: rgba(201,168,76,.18); }
.film-hint { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238,241,246,.8); text-shadow: 0 1px 10px rgba(0,0,0,.95); }
.film-frame.is-unmuted .film-hint { color: var(--accent); }
@media (max-width: 600px) { .film-btn { width: 40px; height: 40px; } .film-hint { display: none; } }

/* ---------------- sound feature (full theme player) ---------------- */
.sound-feature .bg-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sound-feature .head { margin: 0.6rem 0 0.4rem; }
.sound-feature .sub { font-size: clamp(0.9rem,1.4vw,1.05rem); color: var(--mid); max-width: 42ch; margin-bottom: clamp(24px,4vh,40px); }
.player { display: inline-flex; align-items: center; gap: clamp(14px,2vw,22px); background: rgba(9,15,30,0.72); border: 1px solid var(--rule); backdrop-filter: blur(6px); padding: clamp(12px,1.6vw,16px) clamp(16px,2.2vw,24px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.play-btn { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; }
.play-btn:hover { background: var(--accent-bri); transform: scale(1.05); }
.play-btn svg { width: 20px; height: 20px; fill: var(--navy); }
.play-btn .icon-pause { display: none; }
.player.playing .play-btn .icon-play { display: none; }
.player.playing .play-btn .icon-pause { display: block; }
.player-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.player-wave i { width: 3px; height: 6px; background: var(--accent-dim); border-radius: 2px; }
.player.playing .player-wave i { background: var(--accent); animation: wave 1.1s ease-in-out infinite; }
.player-wave i:nth-child(2n){ animation-delay: -0.2s; } .player-wave i:nth-child(3n){ animation-delay: -0.5s; } .player-wave i:nth-child(4n){ animation-delay: -0.35s; } .player-wave i:nth-child(5n){ animation-delay: -0.7s; }
@keyframes wave { 0%,100%{ height: 5px; } 50%{ height: 30px; } }
@media (prefers-reduced-motion: reduce) { .player.playing .player-wave i { animation: none; height: 16px; } }
.player-meta { text-align: left; min-width: 150px; }
.player-meta .ptitle { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--off-white); }
.player-meta .pdur { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.sound-credit { margin-top: clamp(20px,3vh,30px); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dim); }
@media (max-width: 540px) { .player-meta { display: none; } }

/* ---------------- stat band ---------------- */
.bg-video-sec { position: relative; overflow: hidden; padding: clamp(110px,20vh,240px) var(--pad); display: flex; align-items: center; justify-content: center; text-align: center; }
.bg-video-sec .bg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5; }
.bg-video-sec::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(7,13,28,0.25) 0%, rgba(7,13,28,0.6) 55%, rgba(7,13,28,0.94) 100%); }
.bg-video-sec .bg-inner { position: relative; z-index: 2; max-width: var(--full); width: 100%; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,48px); }
.stat-n { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.6rem,6vw,4.6rem); line-height: 0.9; color: var(--accent-bri); }
.stat-l { margin-top: 0.7rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; gap: 34px 20px; } }

/* topic chips */
.chips { max-width: var(--wide); margin: 1.6rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.chip { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); padding: 0.42rem 0.85rem; }

/* ---------------- specs / scope / credits ---------------- */
.specs { max-width: var(--wide); margin: 0 auto; }
.spec-row { display: grid; grid-template-columns: 210px 1fr; gap: 1.4rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.spec-row:last-child { border-bottom: 1px solid var(--rule); }
.spec-row dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dim); padding-top: 0.2rem; }
.spec-row dd { font-size: clamp(1rem,1.5vw,1.2rem); color: var(--off-white); font-weight: 500; }
.spec-row dd small { display:block; margin-top: 0.3rem; color: var(--mid); font-weight: 400; font-size: 0.86rem; }

.credits { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 2.4rem; }
.credits dt { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 0.5rem; }
.credits dd { font-size: 0.95rem; color: var(--off-white); line-height: 1.5; }
.credits dd small { display: block; margin-top: 0.25rem; color: var(--soft); font-size: 0.8rem; }

/* ---------------- CTA ---------------- */
.cta { max-width: var(--wide); margin: 0 auto; text-align: center; }
.cta .head { margin-bottom: 1.6rem; }
.btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 2rem; border: 1px solid var(--accent); background: var(--accent); color: var(--navy); text-decoration: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: background .2s, color .2s; }
.btn:hover { background: var(--accent-bri); border-color: var(--accent-bri); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: rgba(201,168,76,0.08); color: var(--accent-bri); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* footer */
footer { padding: clamp(70px,10vh,150px) var(--pad) clamp(40px,6vh,80px); border-top: 1px solid var(--rule); }
.foot-bottom { max-width: var(--full); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.foot-bottom a { color: var(--accent); text-decoration: none; font-size: 0.85rem; }
.foot-bottom a:hover { color: var(--accent-bri); }
.foot-bottom .copy { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--dim); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; } html { scroll-behavior: auto; }
  .shot img { transition: none; }
  .orb-core, .orb-idle circle, .orb-orbits, .orb-respond .beam, .orb-respond .lead { animation: none !important; }
  .orb.is-thinking .orb-orbits, .orb.is-idle .orb-idle, .orb.is-speaking .orb-respond { opacity: .85; }
}

/* responsive */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .duo img { aspect-ratio: 16/10; }
  .spec-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .spec-row dt { padding-top: 0; }
  .sec-head { flex-direction: column; gap: 0.5rem; }
  .sec-head .head { margin-left: 0; }
}