/* Shared overlay spacing: readable text groups and symmetric inner edges. */
:root { --overlay-pad: 24px; --overlay-gap: 16px; }

.site-menu { padding-bottom: 0; overflow-y: auto; }
.site-menu > * { flex-shrink: 0; }
.site-menu .menu-head { min-height: 0; padding-block: var(--overlay-pad); }
.site-menu nav { margin-top: 0; }
.site-menu nav a { padding-block: var(--overlay-pad); line-height: 1.3; }
.site-menu nav a span { flex: none; }
.site-menu .menu-contact { margin-top: 0; padding-block: var(--overlay-pad); overflow-wrap: anywhere; }

.hero-image-label { padding-block: var(--overlay-pad); }
.story-sequence .demo-visual { border: 0; background: transparent; }
.story-sequence .demo-caption .scene-copy { gap: var(--overlay-gap); }
.story-sequence.enhanced .demo-caption {
  height: auto;
  min-height: var(--demo-caption-height, 0px);
  display: flex;
  align-items: center;
}
.story-sequence .demo-caption .scene-copy,
.story-sequence .demo-visual { min-width: 0; width: 100%; }
.story-sequence .work-caption,
.story-sequence.enhanced .work-caption {
  padding-block: var(--overlay-pad);
  min-height: var(--work-caption-height, 0px);
}
.work-caption .scene-copy { align-items: center; row-gap: var(--overlay-gap); }
.work-caption .scene-copy > * { min-width: 0; margin: 0; }

.job-example .example-toolbar,
.job-example .example-footer { padding: 20px 24px; }
.job-example .example-conversation { padding: 20px 24px; }
.example-sender { min-width: 0; }
.example-sender .customer-initial,
.example-sender time { flex: none; }
.job-example .customer-message { margin-top: var(--overlay-gap); }
.example-record { gap: 10px; }
.example-record > * { min-width: 0; margin: 0; }
.example-response { display: grid; gap: 12px; }
.example-response > p,
.example-response > small { margin: 0; }
.example-calendar { display: grid; gap: 12px; }
.example-calendar > * { margin: 0; }
.example-week { padding-bottom: 12px; }
.example-appointment { margin-top: 0; }
.example-appointment > div { min-width: 0; }
.example-appointment > time,
.example-appointment > b { flex: none; }
.example-appointment span { overflow-wrap: anywhere; }
.example-calendar > p { margin-top: 0; }

.document-panels { align-items: stretch; }
.document-group { justify-content: center; min-width: 0; }
.document-group li { align-items: center; min-width: 0; }
.document-check { flex: 0 0 1.15em; }
.document-group li > span,
.document-group-head,
.document-note { min-width: 0; overflow-wrap: anywhere; }
.case-card:not(.case-photos) { align-self: start; height: max-content; }
.case-card:not(.case-photos) .case-card-body { justify-content: flex-start; }
.case-card h3,
.case-card-body p,
.case-item-status > span,
.case-approval h3,
.case-approval p { min-width: 0; overflow-wrap: anywhere; }
.case-files > div,
.case-invoice > div { min-width: 0; }
.case-upload-status { flex: none; }
.case-approval { padding-block: 22px; }
.case-approval > div { min-width: 0; }

/* If a fixed stage cannot fit its content, the existing story uses normal flow. */
.story-sequence:not(.enhanced) .example-event { height: auto; min-height: 0; padding-block: 20px; }
.story-sequence:not(.enhanced) .handoff-scene {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}
.story-sequence:not(.enhanced) :is(.document-overview, .job-handoff) {
  position: relative;
  inset: auto;
  container-type: normal;
}
.story-sequence:not(.enhanced) :is(.document-sheet, .case-sheet) {
  height: auto;
  padding: 40px var(--page-pad);
  gap: 24px;
}
.story-sequence:not(.enhanced) :is(.document-heading, .case-heading) { gap: 12px; }
.story-sequence:not(.enhanced) :is(.document-brand, .case-brand) { font-size: 12px; }
.story-sequence:not(.enhanced) :is(.document-heading h2, .case-heading h2) { font-size: clamp(28px, 4vw, 52px); }
.story-sequence:not(.enhanced) .document-heading > p:last-child { font-size: 18px; }
.story-sequence:not(.enhanced) .document-group { padding: 24px; gap: 20px; }
.story-sequence:not(.enhanced) .document-group h3 { font-size: 25px; }
.story-sequence:not(.enhanced) .document-group-head > p { margin-top: 12px; font-size: 14px; }
.story-sequence:not(.enhanced) .document-group ul { gap: 16px; }
.story-sequence:not(.enhanced) .document-group li { font-size: 16px; }
.story-sequence:not(.enhanced) .document-group .document-note { font-size: 13px; }
.story-sequence:not(.enhanced) .document-ready { padding: 16px 20px; font-size: 16px; }
.story-sequence:not(.enhanced) .case-grid { flex: none; grid-template-rows: auto; align-items: start; }
.story-sequence:not(.enhanced) .case-photo-frame { flex: none; min-height: 0; aspect-ratio: 3/2; }
.story-sequence:not(.enhanced) .case-card-body { flex: none; }
.story-sequence:not(.enhanced) .case-card h3 { font-size: 22px; }
.story-sequence:not(.enhanced) .case-card-body p { font-size: 15px; }
.story-sequence:not(.enhanced) .case-approval h3 { font-size: 28px; }
.story-sequence:not(.enhanced) .case-approval p { font-size: 15px; }

@media (max-width: 767px) {
  :root { --overlay-pad: 20px; --overlay-gap: 12px; }
  .job-example .example-toolbar,
  .job-example .example-footer,
  .job-example .example-conversation { padding: 16px; }
  .example-appointment { gap: 10px; }
  .case-approval { padding-block: 16px; }
  .story-sequence:not(.enhanced) :is(.document-sheet, .case-sheet) { padding-block: 32px; gap: 20px; }
  .story-sequence:not(.enhanced) .document-panels { gap: 20px; }
  .story-sequence:not(.enhanced) .document-group { padding: 20px; gap: 16px; }
  .story-sequence:not(.enhanced) .document-group h3 { font-size: 23px; }
  .story-sequence:not(.enhanced) .document-group li { font-size: 15px; }
  .story-sequence:not(.enhanced) .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .story-sequence:not(.enhanced) .case-card { padding: 20px; gap: 16px; }
  .story-sequence:not(.enhanced) .case-card-body small { font-size: 13px; }
}