/* Independent lossless portraits: no equal-quarter sprite crop or neighbouring pixels. */
.home-page .portrait-crop { aspect-ratio: 144 / 181; }
.home-page .portrait-crop img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; left: 0; top: 0; }
.home-page .audience .portrait-crop { aspect-ratio: 144 / 181; }
.home-page .audience-copy { min-width: 0; }
.home-page .hero-owner { width: 29%; }
.home-page .story-copy summary { min-height: 44px; }
.home-page .team-article img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (min-width: 851px) {
  .home-page .feature-scene .scene-person { width: 24%; }
  .home-page .renewals-scene { min-height: 340px; }
}

/* Keep the five roles equal: a single readable list on phones and tablets. */
@media (max-width: 850px) {
  .home-page .audience-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .home-page .audience,
  .home-page .audience.partners { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; align-items: center; grid-column: auto; padding: 22px 0; border-top: 1px solid #c9d7c8; }
  .home-page .audience .portrait-crop,
  .home-page .partners .portrait-crop { width: 100%; max-width: none; margin: 0; }
  .home-page .audience-copy { max-width: 500px; }
  .home-page .audience-label,
  .home-page .partners .audience-label { font-size: 14px; margin-bottom: 10px; }
  .home-page .audience h3,
  .home-page .partners h3 { font-size: 23px; line-height: 1.25; }
  .home-page .audience p,
  .home-page .partners p { font-size: 16px; line-height: 1.55; }

  /* The illustrations use document flow here, so cards cannot cover their neighbours. */
  .home-page .hero-grid { padding-bottom: 52px; }
  .home-page .hero-scene { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 22px 16px; width: min(530px, 100%); height: auto; padding: 12px 10px 0; }
  .home-page .app-window { position: relative; grid-column: 1 / -1; top: auto; left: auto; width: 100%; }
  .home-page .window-content { padding: 20px 18px; }
  .home-page .workflow-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  .home-page .workflow-step em { max-width: 110px; }
  .home-page .lease-card { position: relative; grid-column: 1; top: auto; left: auto; width: 100%; min-height: 0; transform: none; padding: 18px; align-self: center; }
  .home-page .hero-owner { position: relative; grid-column: 2; right: auto; bottom: auto; width: 100%; align-self: center; }
  .home-page .scene-note { position: relative; grid-column: 1 / -1; bottom: auto; right: auto; text-align: right; font-size: 12px; }
  .home-page .blue-orbit { inset: 0 -5px 34px; transform: none; border-radius: 46% 50% 43% 48%; }
  .home-page .dot-motif { right: 0; top: -4px; }

  .home-page .feature-scene { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 15px; height: auto; min-height: 0; padding: 26px 14px; margin-top: 10px; }
  .home-page .scene-orbit,
  .home-page .renewals-scene .scene-orbit,
  .home-page .requests-scene .scene-orbit { inset: 12px 0; }
  .home-page .scene-person,
  .home-page .renewals-scene .scene-person,
  .home-page .requests-scene .scene-person { position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 100%; left: auto; right: auto; bottom: auto; }
  .home-page .mini-window { position: relative; left: auto; right: auto; top: auto; width: 100%; min-height: 0; transform: none; padding: 16px; grid-column: 2; }
  .home-page .maintenance-window { grid-row: 1; }
  .home-page .schedule-card { grid-row: 2; display: flex; align-items: flex-start; }
  .home-page .renewal-window { grid-row: 1 / span 2; }
  .home-page .flow-path { display: none; }
  .home-page .mini-window h3 { font-size: 17px; line-height: 1.25; }
  .home-page .file-row { gap: 9px; margin: 14px 0; }
  .home-page .file-row strong,
  .home-page .status-line strong,
  .home-page .request-detail strong { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .home-page .file-row small,
  .home-page .status-line small,
  .home-page .request-detail small { font-size: 12px; line-height: 1.45; }
  .home-page .status-line { margin: 0; padding: 10px 8px; gap: 8px; }
  .home-page .schedule-card p { display: block; font-size: 13px; line-height: 1.45; }
  .home-page .schedule-card .check { float: none; margin-top: 2px; }
  .home-page .calendar-icon { font-size: 28px; }
  .home-page .renewal-check { font-size: 13px; line-height: 1.4; gap: 8px; padding: 9px 7px; }
  .home-page .renewal-check span { flex: none; }
  .home-page .signature-box { gap: 8px; }
  .home-page .signature-box span { font-size: 17px; padding: 7px; }
  .home-page .request-window { grid-row: 1; }
  .home-page .request-stack { position: relative; top: auto; right: auto; width: 100%; grid-column: 2; grid-row: 2; gap: 8px; }
  .home-page .request-stack > span { font-size: 13px; line-height: 1.4; padding: 11px; }
  .home-page .request-detail { margin: 14px 0; gap: 9px; }
  .home-page .pink-pill { font-size: 13px; }
}

@media (max-width: 520px) {
  .home-page .hero-scene { grid-template-columns: minmax(0, 1fr) 82px; gap: 20px 12px; padding: 8px 0 0; }
  .home-page .window-content { padding: 16px 14px; }
  .home-page .window-content > h2 { font-size: 22px; margin-bottom: 10px; }
  .home-page .workflow-step { grid-template-columns: 27px minmax(0, 1fr); gap: 5px 10px; padding: 12px 0; min-height: 72px; }
  .home-page .step-icon { grid-column: 1; grid-row: 1 / span 2; width: 27px; height: 27px; }
  .home-page .workflow-step strong { font-size: 14px; line-height: 1.35; }
  .home-page .workflow-step em { grid-column: 2; max-width: none; justify-self: start; font-size: 12px; padding: 5px 8px; }
  .home-page .workflow-step.current { margin: 7px 0 0; padding: 12px 8px; }
  .home-page .workflow-step:not(:last-child)::after { top: 37px; left: 13px; height: calc(100% - 10px); }
  .home-page .lease-card { padding: 15px 13px; }
  .home-page .lease-card h3 { font-size: 17px; }
  .home-page .blue-pill { font-size: 11px; padding: 7px 9px; }
  .home-page .signature { display: block; margin: 9px 0 0; font-size: 20px; }
  .home-page .scene-note { font-size: 12px; padding-top: 2px; }
  .home-page .feature-scene { grid-template-columns: 78px minmax(0, 1fr); gap: 14px 10px; padding: 22px 5px; }
  .home-page .mini-window { padding: 14px 12px; }
  .home-page .mini-window h3 { font-size: 16px; }
  .home-page .file-icon { width: 26px; height: 35px; font-size: 10px; }
  .home-page .check { width: 23px; height: 23px; font-size: 15px; }
  .home-page .request-stack > span { font-size: 13px; padding: 10px; gap: 8px; }
  .home-page .audience,
  .home-page .audience.partners { grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 21px 0; }
  .home-page .audience h3,
  .home-page .partners h3 { font-size: 20px; }
  .home-page .audience p,
  .home-page .partners p { font-size: 15px; }
  .home-page .audience-label { font-size: 13px; }
}

/* The illustration is the pause target; transport buttons do not occupy the layout. */
.home-page .motion-unit { min-width: 0; }
.home-page .workflow-story.reverse .motion-unit { order: 2; }
.home-page [data-motion-scene][role="button"] { cursor: pointer; }
.home-page [data-motion-scene]:focus-visible { outline: 3px solid #1681a5; outline-offset: 9px; border-radius: 14px; }
.home-page .hero-scene:focus-visible { outline-color: #65D56F; }
.home-page .workflow-step em { min-width: 9.5em; text-align: center; }
.home-page .renewal-label { font-size: inherit; font-weight: 500; line-height: inherit; }
.home-page .renewal-intention { min-width: 0; display: grid; gap: 5px; }
.home-page .intention-badge { font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.35; padding: 4px 8px; border-radius: 12px; background: #d6f2d8; color: #154b30; justify-self: start; }
.home-page .owner-badge { background: #d9edfa; color: #164f70; }
.home-page .signature { display: inline-block; width: 95px; height: 40px; margin: 0 0 0 12px; transform: none; vertical-align: middle; }
.home-page .signature-stroke { display: block; width: 100%; height: 100%; fill: none; stroke: #294d65; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-page .signature-box { gap: 10px; }
.home-page .signature-box > span { display: block; min-width: 0; width: 50%; height: 44px; padding: 2px 6px; }
.home-page .entry-notice { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #dce4da; }
.home-page .entry-notice svg { width: 21px; height: 25px; flex: none; fill: none; stroke: #315b45; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-page .entry-notice strong { display: block; font-size: 12px; line-height: 1.3; }
.home-page .entry-notice small { display: block; font-size: 11px; line-height: 1.4; margin-top: 3px; }
.home-page .schedule-card { top: 106px; }
.home-page .schedule-card > div { min-width: 0; }
.home-page .schedule-card > .calendar-icon { flex: none; }
.home-page .renewal-window { top: 16px; }
.home-page .request-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.home-page .pet-icon { display: grid; place-items: center; }
.home-page .pet-icon .request-icon { width: 30px; height: 30px; }
.home-page .audience h3 > span { display: block; white-space: nowrap; }
.home-page .audience h3 { font-size: 21px; line-height: 1.25; }
@media (min-width: 851px) and (max-width: 1150px) { .home-page .audience h3 { font-size: 17px; } }
@media (max-width: 850px) {
  .home-page .workflow-story .motion-unit { order: 2; }
  .home-page .schedule-card, .home-page .renewal-window { top: auto; }
  .home-page .schedule-card > div { flex: 1; }
  .home-page .entry-notice { margin-top: 12px; padding-top: 10px; }
  .home-page .entry-notice strong { font-size: 13px; }
  .home-page .audience h3 { font-size: 23px; }
}
@media (max-width: 520px) {
  .home-page .signature { display: block; margin: 7px 0 0; height: 34px; width: 88px; }
  .home-page .intention-badge { font-size: 11px; padding: 4px 6px; }
  .home-page .signature-box { gap: 6px; }
  .home-page .signature-box > span { height: 36px; padding: 2px; }
  .home-page .request-icon { width: 23px; height: 23px; }
  .home-page .audience h3 { font-size: 20px; }
}
@media (max-width: 360px) { .home-page .audience h3 { font-size: 18px; } }

/* Four 1.8s stages + a 3.6s final hold, then repeat. The CSS clock pauses in place. */
@media (prefers-reduced-motion: no-preference) {
  .home-page .motion-running { --motion-play: paused; animation: workflow-tick 1.8s linear infinite; animation-play-state: var(--motion-play); }
  .home-page .motion-running.in-view { --motion-play: running; }
  .home-page [data-motion-scene="portrait"].motion-running { animation-duration: 1.1s; animation-iteration-count: 1; }
  .home-page .motion-waiting { opacity: .82; }
  .home-page .motion-active { box-shadow: 0 0 0 3px #25864466, 0 8px 18px #0d282912; border-radius: 7px; }
  .home-page .motion-active:not(.portrait-crop) { animation: stage-arrives .5s ease-out both; animation-play-state: var(--motion-play); }
  .home-page .motion-running .portrait-crop img { animation: portrait-arrives .9s ease-out both; animation-play-state: var(--motion-play); }
  .home-page .motion-running .audience-label { animation: role-emphasis 1.1s ease-out both; animation-play-state: var(--motion-play); }
  .home-page .motion-done .step-icon,
  .home-page .motion-done .check,
  .home-page .motion-done .renewal-marker { animation: check-confirms .4s ease-out both; animation-play-state: var(--motion-play); }
  .home-page .motion-waiting .step-icon,
  .home-page .motion-active .step-icon,
  .home-page .motion-waiting .check,
  .home-page .motion-active .check,
  .home-page .motion-waiting .renewal-marker,
  .home-page .motion-active .renewal-marker { background: #dce8e1; color: #315b45; }
  .home-page .motion-active .signature-stroke path { animation: signature-arrives 1.2s ease-out both; animation-play-state: var(--motion-play); }
  .home-page .motion-waiting .signature-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  @keyframes workflow-tick { from { --workflow-phase: 0; } to { --workflow-phase: 1; } }
  @keyframes stage-arrives { from { translate: 0 5px; } to { translate: 0 0; } }
  @keyframes portrait-arrives { from { opacity: .45; transform: translateX(-8px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes role-emphasis { from { box-shadow: 0 0 0 5px #27844b33; } to { box-shadow: 0 0 0 0 #27844b00; } }
  @keyframes check-confirms { from { transform: scale(.6); } 65% { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes signature-arrives { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .home-page [data-motion-scene], .home-page [data-motion-scene] * { animation: none !important; transition: none !important; }
}