/* Visual storytelling layer. Content, forms and document controls keep their
   native flow; only illustrations animate, and nothing starts hidden. */
:root {
  --scene-mint: #d9eee3;
  --scene-coral: #f8dfd1;
  --scene-gold: #fcebc4;
  --scene-sky: #dcecf6;
}

.home-welcome {
  background: #fbf3e4;
  border-bottom: 1px solid #ead9bd;
}

.welcome-copy h1 span { color: #17675c; }
.welcome-art { position: relative; }
.welcome-art::before {
  content: '';
  position: absolute;
  inset: 8% -2% 3% 5%;
  background: #dbead9;
  border-radius: 48% 52% 44% 56%;
  z-index: -1;
}
.welcome-art { isolation: isolate; }
.welcome-weather { position: absolute; top: 3%; right: 3%; width: 24%; pointer-events: none; }
.art-label { border-color: #c5d9c6; background: #fffdf6; }
.proof-mark { color: #17675c; background: #e0efe1; border-color: #87ad99; }

.quick-route:nth-child(1) { background: #e4f2ea; }
.quick-route:nth-child(2) { background: #fff0dc; }
.quick-route:nth-child(3) { background: #eaf2f8; }
.quick-routes { background: #e4f2ea; }
.quick-route { border-color: #cfddd4; }
.quick-route:hover { background: #fffdf7; }

.page-intro,
.page-landlords .page-intro,
.page-what-we-do .page-intro,
.page-services-expanded .page-intro { background: #edf6ee; }
.page-activities .page-intro,
.page-community-support .page-intro,
.page-company-values .page-intro,
.page-new-resident-guide .page-intro { background: #fff1e6; }
.page-success-stories .page-intro,
.page-careers .page-intro,
.page-move-on .page-intro { background: #fff5dd; }
.page-contact-us .page-intro,
.page-partners .page-intro,
.page-your-support .page-intro,
.page-session-tools .page-intro { background: #eaf3f9; }

.section-soft { background: #eff7f1; }
.page-home .section-soft:nth-of-type(odd) { background: #fff4e4; }
.page-home #page-section-6960f03b743cf36abb93106e { background: #eaf4f8; }
.page-home #page-section-605880db74303038bce1dc85 { background: #f8eee8; }
.page-home #page-section-5efb5bd47e62821b38457796 { background: #e9f3ed; }
.section { position: relative; }

.service-card:nth-child(3n+1) { border-top-color: #428776; }
.service-card:nth-child(3n+2) { border-top-color: #dc8a65; }
.service-card:nth-child(3n+3) { border-top-color: #6299b9; }
.service-card:nth-child(3n+1) .service-card-art { background: #e5f2e9; }
.service-card:nth-child(3n+2) .service-card-art { background: #fff0dc; }
.service-card:nth-child(3n+3) .service-card-art { background: #eaf3fa; }
.card-index { color: #675647; }
.value-card { background: #eef7f0; border-top-color: #428776; }
.value-card:nth-child(3n+2) { background: #fff3e7; border-top-color: #ce7956; }
.value-card:nth-child(3n+3) { background: #eaf3f9; border-top-color: #6299b9; }
.feature-band { background: #fff3d7; border-color: #dcc897; }
.feature-band > .icon { color: #785217; }
.note-panel { background: #eaf3f8; border-left-color: #427d9b; }
.form-notice { background: #fff6e3; border-color: #d2bd88; color: #574624; }
.form-errors { background: #fff0e9; border-color: #934025; color: #71341f; }
.field-error { color: #8b351f; }
.form-field.has-error input:not([type=checkbox]),
.form-field.has-error textarea, .form-field.has-error select { border-color: #934025; }
.policy-card:nth-child(3n+1) { border-top-color: #428776; }
.policy-card:nth-child(3n+2) { border-top-color: #ce7956; }
.policy-card:nth-child(3n+3) { border-top-color: #6299b9; }
.publication-cover { background: #e6f2e8; }
.publication-card:nth-child(3n+2) .publication-cover { background: #fff0dc; }
.publication-card:nth-child(3n+3) .publication-cover { background: #e4eff8; }
.publication-type { color: #17675c; }
.partner-name { background: #eef6ed; }
.partner-card:nth-child(3n+2) .partner-name { background: #fff2df; }
.partner-card:nth-child(3n+3) .partner-name { background: #eaf2f8; }
.photo-pending { background: #fff4e4; border-color: #cfbca0; }
.step-list li::before { border-color: #8bb4a3; }
.step-list li:nth-child(2)::before { color: #72531c; border-color: #cdb375; }
.step-list li:nth-child(3)::before { border-color: #a0bed2; }
.site-footer { background: #edf3ee; border-top: 6px solid #d7ab55; }
.footer-bottom { border-color: #c9dbce; }


.next-step { border-top: 6px solid #d7ab55; }
.next-step .eyebrow { color: #f1cf82; }
mark { background: #ffe6a6; }

/* Shared scenes combine a transparent illustration with a small animated motif.
   Fixed aspect ratios reserve space before lazy images arrive. */
.story-scene {
  --scene-tint: var(--scene-mint);
  position: relative;
  isolation: isolate;
  width: min(100%, 380px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 12px;
  color: #17675c;
  flex-shrink: 0;
}
.tone-coral { --scene-tint: var(--scene-coral); }
.tone-gold { --scene-tint: var(--scene-gold); }
.tone-sky { --scene-tint: var(--scene-sky); }
.scene-halo {
  position: absolute;
  inset: 10% 3% 7%;
  border-radius: 48% 52% 41% 59% / 55% 38% 62% 45%;
  background: var(--scene-tint);
  z-index: -1;
}
.story-scene .scene-picture {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
}
.scene-animation {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 34%;
  height: auto;
  padding: 8px;
  border: 1px solid #c5d8cf;
  border-radius: 18px;
  background: #fffef9;
  box-shadow: 0 7px 18px #263d2510;
}
.intro-art { margin-top: 0; }
.scene-intro { margin-inline: auto 0; width: min(100%, 360px); }
.scene-section { width: min(100%, 310px); margin: 0 auto 25px; }
.scene-inline { width: 210px; float: right; margin: 0 0 24px 24px; }
.scene-search { width: 165px; margin: 0 auto 24px; }
.scene-heading { width: 240px; }
.section-heading:has(> .scene-heading) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 18px 48px;
}
.section-heading > .scene-heading { grid-column: 2; grid-row: 1 / span 2; }
.section-heading:has(> .scene-heading) > p { max-width: 700px; }
.section-heading:has(> .scene-heading) > .text-link { justify-self: start; }
.scene-article {
  float: right;
  width: 210px;
  margin: 0 0 18px 28px;
}
.article-body > section { display: flow-root; }
.article-layout > * { min-width: 0; }
.article-body > section:nth-child(even) {
  background: #f0f7f1;
  border: 1px solid #d6e3d8;
  border-radius: 12px;
  padding: 28px;
}
.article-body > section:nth-child(4n) { background: #fff5e7; border-color: #e8dcc5; }
.article-body > section > h2 { clear: none; }
.scene-worksheet { width: 180px; float: right; margin: 0 0 20px 28px; }
.worksheet { display: flow-root; }
.worksheet-fields { clear: both; }
.next-step-inner { flex-wrap: wrap; gap: 30px; }
.scene-cta { width: 195px; }
.next-step-inner > div:not(.button-row) { flex: 1; min-width: min(100%, 280px); }
.next-step-inner > .button-row { max-width: 270px; }
.next-step .scene-halo { background: #4b5b45; }
.photo-pending .scene-section { width: min(100%, 280px); }

/* Picture cards retain one link and its existing accessible name. */
.resource-link-illustrated {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 24px;
  gap: 22px;
  align-items: center;
  background: #fffdf8;
  overflow: hidden;
}
.resource-card-picture {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 28px;
  background: #e1efe6;
  padding: 6px;
}
.resource-card-picture img { width: 100%; height: 100%; object-fit: contain; }
.resource-link-illustrated:nth-child(4n+2) .resource-card-picture { background: #fceacb; }
.resource-link-illustrated:nth-child(4n+3) .resource-card-picture { background: #e2eef8; }
.resource-link-illustrated:nth-child(4n+4) .resource-card-picture { background: #fae2d7; }
.resource-link-illustrated:hover { background: #fffaf0; border-color: #7ea693; }

.motion-toggle {
  min-height: 44px;
  border: 1px solid #68796c;
  border-radius: 100px;
  background: #ffffff;
  color: #292929;
  font: inherit;
  font-size: 12px;
  padding: 10px 16px;
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #e0efe3; }
.footer-preferences { padding-block: 20px; }

/* Reserve logo cells before lazy images load. Otherwise their intrinsic sizes
   can move footer controls between pointer-down and pointer-up on a cold page. */
@media (max-width: 899px) {
  .footer-partner-grid li { position: relative; min-height: 0; }
  .footer-partner-grid img { position: absolute; inset: 0; }

}

/* Only run on entering the viewport. Each illustration settles within 4.5s.
   There are no infinite loops, scroll hijacking or hidden reading content. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion='off']) .motion-enter .welcome-cloud { animation: cloud-arrive 4.3s ease-out both; }
  html:not([data-motion='off']) .welcome-art.motion-enter > picture { display: block; animation: visual-arrive .8s ease-out both; }
  html:not([data-motion='off']) .motion-enter .scene-picture {
    animation: scene-arrive 800ms cubic-bezier(.2,.65,.3,1) both;
  }
  html:not([data-motion='off']) .motion-enter .scene-halo {
    animation: halo-arrive 1.1s ease-out both;
  }
  html:not([data-motion='off']) .motion-enter .scene-trail,
  html:not([data-motion='off']) .motion-enter .scene-tick {
    animation: scene-draw 1.8s .2s ease both;
  }
  html:not([data-motion='off']) .motion-enter .scene-tick-later { animation-delay: .65s; }
  html:not([data-motion='off']) .motion-enter .scene-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: scene-sunrise 3.8s ease-in-out both;
  }
  html:not([data-motion='off']) .motion-enter .scene-leaves {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: scene-grow 3.8s ease-in-out both;
  }
  html:not([data-motion='off']) .motion-enter .scene-chat-first { animation: scene-arrive .8s ease both; }
  html:not([data-motion='off']) .motion-enter .scene-chat-reply { animation: scene-arrive .8s .6s ease both; }
  html:not([data-motion='off']) .motion-enter .scene-dot { animation: scene-dot 1.1s 3 ease-in-out; }
  html:not([data-motion='off']) .motion-enter .scene-dot:nth-of-type(2) { animation-delay: .15s; }
  html:not([data-motion='off']) .motion-enter .scene-dot:nth-of-type(3) { animation-delay: .3s; }
  html:not([data-motion='off']) .visual-enter { animation: visual-arrive .7s ease-out both; }
  .button, .resource-link, .service-card, .quick-route, .partner-card {
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
  }
  @media (hover: hover) and (pointer: fine) {
    html:not([data-motion='off']) .service-card:hover,
    html:not([data-motion='off']) .resource-link-illustrated:hover { transform: translateY(-4px); box-shadow: 0 12px 26px #244a3310; }
    html:not([data-motion='off']) .button:hover { transform: translateY(-2px); }

}

}
@keyframes scene-arrive { from { opacity: .75; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes halo-arrive { from { transform: scale(.9) rotate(-5deg); } to { transform: none; } }
@keyframes scene-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes scene-sunrise { 0% { transform: translateY(6px) scale(.85); } 45% { transform: translateY(-4px) scale(1.08); } 100% { transform: none; } }
@keyframes scene-grow { 0% { transform: scaleY(.8) rotate(-5deg); } 45% { transform: scaleY(1.03) rotate(3deg); } 75% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes scene-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes visual-arrive { from { transform: translateY(12px); } to { transform: none; } }
@keyframes cloud-arrive { from { transform: translateX(-15px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (max-width: 1000px) {
  .resource-link-illustrated { grid-template-columns: 100px minmax(0, 1fr) 24px; gap: 16px; }
  .resource-card-picture { width: 100px; height: 112px; }
  .scene-article { width: 175px; margin-left: 20px; }
  .scene-heading { width: 200px; }
  .section-heading:has(> .scene-heading) { grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; }

}
@media (max-width: 767px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .scene-intro { width: 245px; margin-inline: auto; }
  .intro-art img { max-width: none; }
  .scene-section { width: 260px; }
  .scene-inline { float: none; width: 230px; margin: 20px auto 26px; }
  .split-grid:has(> .photo-pending) > .photo-pending { order: -1; }
  .next-step-inner { justify-content: flex-start; }
  .scene-cta { width: 175px; }
  .next-step-inner > .button-row { max-width: none; }
  .resource-link-illustrated { grid-template-columns: 110px minmax(0, 1fr) 20px; }
  .resource-card-picture { width: 110px; height: 120px; }

}
@media (max-width: 600px) {
  .section-heading:has(> .scene-heading) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-heading > .scene-heading { grid-column: 1; grid-row: auto; width: 220px; justify-self: center; }
  .scene-article { float: none; width: 210px; margin: 0 auto 24px; }
  .article-body > section:nth-child(even) { padding: 20px 16px; }
  .scene-worksheet { width: 170px; float: none; margin: 0 auto 22px; }
  .resource-link-illustrated { grid-template-columns: 85px minmax(0, 1fr); gap: 14px; padding: 18px 14px; }
  .resource-card-picture { width: 85px; height: 110px; border-radius: 20px; }
  .resource-link-illustrated > .icon { display: none; }
  .scene-cta { width: 185px; margin-inline: auto; }
  .scene-animation { border-radius: 12px; padding: 6px; }

}

/* User preferences apply immediately, including when changed while a page is open. */
html[data-motion='off'], html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

}
@media (forced-colors: active) {
  .scene-halo { display: none; }
  .story-scene { background: Canvas; }
  .scene-animation, .motion-toggle { border-color: ButtonText; }

}
@media print {
  .story-scene, .resource-card-picture, .footer-preferences { display: none !important; }
  .section-heading:has(> .scene-heading) { display: block; }
  .resource-link-illustrated { display: block; }
  .article-body > section:nth-child(even) { padding: 0; background: #fff; border: 0; border-radius: 0; }
  .home-welcome, .section-soft, .page-home .section-soft:nth-of-type(odd),
  body .page-intro, body .section[id], .value-card, .note-panel, .form-notice,
  .resource-link-illustrated, .feature-band { background: #fff !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }

}