:root {
  --studio-red: #902b24;
  --studio-red-deep: #712119;
  --studio-sage: #cfe3c8;
  --studio-cream: #f1f0e2;
  --studio-ink: #291e1b;
  --studio-muted: #5f504b;
  --studio-line: #baaa9c;
  --studio-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --studio-sans: Inter, Arial, sans-serif;
}
.motion-hero, .workflow-section {
  color-scheme: light;
  font-family: var(--studio-sans);
  color: var(--studio-ink);
}
.motion-hero {
  padding-block: clamp(39px, 6.4vw, 86px) clamp(31px, 5vw, 66px);
  background: radial-gradient(ellipse at 94% 15%, #e1ead6, transparent 65%), var(--studio-sage);
}
.motion-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  align-items: center;
  gap: clamp(25px, 4.5vw, 63px);
}
.motion-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--studio-red-deep);
}
.motion-hero .status-dot { background: var(--studio-red); box-shadow: none; }
.motion-hero h1, .workflow-intro h2 {
  font-family: var(--studio-serif);
  font-weight: 700;
  letter-spacing: -.052em;
  color: var(--studio-red);
}
.motion-hero h1 {
  margin: 16px 0 18px;
  font-size: clamp(43px, 5.6vw, 81px);
  line-height: .98;
  text-wrap: balance;
}
.motion-lead {
  max-width: 420px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}
.motion-hero .actions { gap: 15px 19px; margin-top: 23px; }
.motion-primary { background: var(--studio-red-deep); color: #fffaf0; }
.motion-primary:hover { background: #542016; }
.motion-link { color: var(--studio-red-deep); }
.motion-film { min-width: 0; }
.film-frame {
  position: relative;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #5b261f;
  border-radius: 8px;
  background: #482621;
  box-shadow: 0 18px 38px #422b2630;
}
.film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--studio-sage); }
.film-frame video:focus-visible { outline-offset: -4px; }
.film-play {
  position: absolute;
  inset: auto 14px 53px auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--studio-cream);
  border-radius: 4px;
  background: var(--studio-red-deep);
  color: #fffaf0;
  font-size: 13px;
  font-weight: 700;
}
.film-play:hover { background: #542016; }
.film-play svg { width: 20px; height: 20px; }
.motion-film figcaption, .scene-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 12px;
  font: 700 10px/1.45 var(--mono);
  letter-spacing: .09em;
}
.motion-film figcaption { margin-top: 11px; color: var(--studio-red-deep); }

.workflow-section { padding-block: clamp(48px, 7vw, 96px); background: var(--studio-cream); }
.workflow-intro .eyebrow, .scene-info .eyebrow { color: var(--studio-red-deep); }
.workflow-intro h2 { font-size: clamp(42px, 6.1vw, 82px); line-height: .99; margin-top: 13px; }
.workflow-intro > p { color: var(--studio-muted); }
.campaign-walkthrough {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(17px, 4vw, 53px);
  align-items: start;
}
.chapter-nav { display: grid; gap: 6px; }
.chapter-button {
  display: grid;
  grid-template-columns: 35px minmax(0,1fr);
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 11px 13px;
  text-align: left;
  color: var(--studio-ink);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--studio-line);
  border-radius: 5px;
}
.chapter-button:hover { background: #ece5d7; }
.chapter-button[aria-pressed="true"] { background: var(--studio-sage); border-color: #8ea88a; }
.chapter-number, .art-cap { font: 700 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--studio-red-deep); }
.chapter-number { margin-top: 3px; }
.chapter-button strong, .chapter-button small { display: block; }
.chapter-button strong { font-size: 17px; line-height: 1.15; }
.chapter-button small { color: var(--studio-muted); font-size: 12px; margin-top: 3px; }
.campaign-scene {
  overflow: hidden;
  border: 1px solid #b6a699;
  border-radius: 7px;
  background: #fffaf0;
}
.scene-top { padding: 11px 14px; background: var(--studio-red-deep); color: #fff4e9; }
.scene-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(165px, 23vw, 270px);
  overflow: hidden;
  padding: 14px;
  background: #cfdfc8;
}
.scene-art::before, .scene-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 66%;
  height: 118%;
  top: -44%;
  left: 19%;
  transform: rotate(32deg) skewY(23deg);
  border-right: 1px solid #8da78f;
  border-bottom: 1px solid #8da78f;
}
.scene-art::after { top: -54%; left: 25%; }
.paper-art, .delivery-pack {
  display: grid;
  gap: 9px;
  width: min(290px, 95%);
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid var(--studio-line);
  border-radius: 5px;
  background: var(--studio-cream);
  box-shadow: 8px 8px 0 #8e9e8766, 16px 16px 0 #8e9e8733;
}
.paper-art strong { font: 700 clamp(20px, 2.5vw, 31px)/1.05 var(--studio-serif); color: var(--studio-red-deep); }
.paper-rule { width: 88%; height: 4px; border-radius: 3px; background: #bdaa9b; }
.paper-rule.short { width: 62%; }
.art-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.art-tags span { padding: 2px 6px; color: #55251f; background: #e6d4c9; font-size: 11px; }
.scene-create { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; }
.scene-create img, .call-sheet { width: 100%; height: clamp(142px, 20vw, 222px); }
.scene-create img { object-fit: cover; object-position: 50% 67%; border-radius: 5px 0 0 5px; }
.call-sheet { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: clamp(9px, 2vw, 24px); background: var(--studio-red-deep); color: #fff4e9; border-radius: 0 5px 5px 0; font-size: 13px; }
.call-sheet .art-cap { color: #ffe1cb; }
.call-sheet span:not(.art-cap) { padding-top: 4px; border-top: 1px solid #a45445; }
.edit-screen { position: relative; width: min(410px, 100%); height: clamp(135px, 17vw, 215px); border: 5px solid #522e29; border-radius: 5px; overflow: hidden; }
.edit-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.edit-screen span { position: absolute; top: 6px; left: 7px; padding: 4px 7px; background: #38241f; color: #fff6ec; font: 700 10px var(--mono); }
.edit-timeline { position: absolute; inset: auto 8px 7px; height: 3px; background: linear-gradient(90deg,#ff9f80 35%,#dfc2b2 35%); }
.review-note { position: absolute; bottom: 20px; right: max(14px, 10%); display: grid; gap: 3px; max-width: calc(100% - 28px); padding: 8px 11px; border: 1px solid #b89c8c; border-radius: 4px; background: var(--studio-cream); font-size: 12px; }
.scene-deliver { background: #92362c; }
.scene-deliver::before, .scene-deliver::after { border-color: #c07762; }
.delivery-pack { box-shadow: 7px 7px 0 #662823, 14px 14px 0 #66282370; font-size: 12px; }
.delivery-pack strong { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.delivery-pack strong svg { color: var(--studio-red); }
.scene-info {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  align-items: end;
  gap: 9px 22px;
  padding: clamp(12px, 2vw, 22px);
}
.scene-info h3 { margin-top: 5px; font-size: clamp(17px, 2vw, 23px); }
.scene-info > p { color: var(--studio-muted); font-size: 14px; }
.chapter-selected .scene-panel:not([hidden]) { animation: chapter-enter .36s cubic-bezier(.22,.61,.36,1); }
.workflow-noscript { margin-top: 12px; font-size: 14px; }
@keyframes chapter-enter { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .motion-hero-grid { grid-template-columns: 1fr; }
  .motion-hero h1 { max-width: 13ch; text-wrap: wrap; }
}
@media (max-width: 650px) {
  .campaign-walkthrough, .scene-info { grid-template-columns: 1fr; }
  .chapter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-button { grid-template-columns: 21px minmax(0,1fr); gap: 3px; min-height: 54px; padding: 8px 6px; border-color: var(--studio-line); }
  .chapter-button strong { font-size: 15px; }
  .chapter-button small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-selected .scene-panel:not([hidden]) { animation: none; }
}