/* ======================================================================
   Freedom Senior Services — v1.5.3 visual system
   Mosaic/photo treatments, footer, navigation section state, motion,
   hover/focus, homepage service icons, Locations 2.
   Loads after wp-compat.css. Everything degrades to the 1.5.2 look
   without JavaScript; motion is disabled under prefers-reduced-motion.
   ====================================================================== */

:root {
  --mosaic-sq: 0.625rem;          /* 10px squares, as on the flyer */
  --mosaic-gap: 0.25rem;
  --frame: 2px;                   /* orange partial frame */
  --reveal-dur: 520ms;
  --reveal-shift: 16px;
  --hover-dur: 180ms;
}

/* ---------- 1. Mosaic squares (navy · mint · orange), a reusable accent ---------- */
.mosaic-sq {
  position: absolute; display: block; pointer-events: none; z-index: 2;
  width: calc(var(--mosaic-sq) * 3 + var(--mosaic-gap) * 2); height: var(--mosaic-sq);
  background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--mint), var(--mint)), linear-gradient(var(--orange), var(--orange));
  background-size: var(--mosaic-sq) var(--mosaic-sq);
  background-repeat: no-repeat;
  background-position: 0 0, calc(var(--mosaic-sq) + var(--mosaic-gap)) 0, calc((var(--mosaic-sq) + var(--mosaic-gap)) * 2) 0;
}
.on-dark .mosaic-sq, .fss-footer .mosaic-sq, .bg-navy .mosaic-sq {
  background-image: linear-gradient(var(--white), var(--white)), linear-gradient(var(--mint), var(--mint)), linear-gradient(var(--orange), var(--orange));
}

/* ---------- 2. Photo treatments ---------- */
/* Editorial: thin orange partial frame offset from the photo, squares at opposite corners, frame open at those corners. */
.ph.treat-editorial { position: relative; isolation: isolate; }
.ph.treat-editorial::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: -0.9rem -0.9rem -0.9rem -0.9rem;
  border: var(--frame) solid var(--orange); border-radius: calc(var(--radius-card) + .4rem);
  /* open the top-left and bottom-right corners so the squares sit in the gap, like the flyer */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 0;
  clip-path: polygon(3.2rem 0, 100% 0, 100% calc(100% - 1.1rem), calc(100% - 3.2rem) calc(100% - 1.1rem), calc(100% - 3.2rem) 100%, 0 100%, 0 1.1rem, 3.2rem 1.1rem);
}
.ph.treat-editorial .mosaic-sq--tl { top: -1.25rem; left: -0.9rem; }
.ph.treat-editorial .mosaic-sq--br { bottom: -1.25rem; right: -0.9rem; }
.ph.treat-editorial .ph__shape { box-shadow: 0 14px 34px rgba(2, 60, 90, .12); }

/* Window: keep the arch and its shadow; squares near the lower-left corner; a short orange arc over the upper-left shoulder. */
.ph.treat-window { position: relative; }
.ph.treat-window .ph__shape--arch { box-shadow: 0 18px 40px rgba(2, 60, 90, .16); }
/* The arc is its own element (not ::before) because split heroes already use ::before for the offset teal arch. */
.ph.treat-window .ph__arc {
  position: absolute; pointer-events: none; z-index: 1; display: block;
  inset: -0.75rem; border: var(--frame) solid transparent; border-top-color: var(--orange); border-left-color: var(--orange);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  clip-path: polygon(0 0, 48% 0, 48% 26%, 0 26%);
}
.hero--careers .ph.treat-window .mosaic-sq { background-image: linear-gradient(var(--white), var(--white)), linear-gradient(var(--mint), var(--mint)), linear-gradient(var(--orange), var(--orange)); }
.ph.treat-window .mosaic-sq--bl { bottom: -1.2rem; left: 0.5rem; }
.ph.treat-window .mosaic-sq--br { bottom: -1.2rem; right: 0.5rem; }
/* Home hero: the photo sits on the navy panel, so the squares read white/mint/orange there. */
.hero--home .ph.treat-window .mosaic-sq { background-image: linear-gradient(var(--white), var(--white)), linear-gradient(var(--mint), var(--mint)), linear-gradient(var(--orange), var(--orange)); }
@media (max-width: 47.9em) {
  .ph.treat-editorial::before { inset: -0.6rem; }
  .ph.treat-editorial .mosaic-sq--tl { top: -0.95rem; left: -0.6rem; }
  .ph.treat-editorial .mosaic-sq--br { bottom: -0.95rem; right: -0.6rem; }
  .hero--home .ph.treat-window .mosaic-sq { display: none; } /* the full-bleed navy band leaves no room under the arch */
}

/* ---------- 3. Hero photo entrance (service family + home): settle in, then the dot ---------- */
@keyframes fss-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fss-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fss-fade { from { opacity: 0; } to { opacity: 1; } }
.ph--hero.ph--photo .ph__shape { animation: fss-settle 640ms var(--ease) both; }
.ph--hero.ph--photo::after { animation: fss-pop 420ms var(--ease) 560ms both; }
.ph--hero.ph--photo .mosaic-sq, .ph--hero.ph--photo .ph__arc { animation: fss-fade 400ms ease 820ms both; }
/* The hero's own copy stays put: no movement on headline or buttons (no layout shift, nothing to wait for). */

/* ---------- 4. Scroll reveals (JS adds .reveal to below-the-fold items only, then .is-in when they enter) ---------- */
.reveal { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }
.reveal.reveal--img { transform: translateY(var(--reveal-shift)) scale(.985); }
.reveal.reveal--img.is-in { transform: none; }

/* ---------- 5. Homepage house mark: draws in orange, settles to translucent white, dot appears ---------- */
.hero--home::after { display: none; } /* replaces the 1.5.0 PNG watermark */
/* Positioned from the hero inner container so it lands inside the navy panel (which is drawn on the section): right edge = 2.5vw in from the viewport. */
.house-draw { position: absolute; z-index: 0; right: calc(3vw - max(0px, (100vw - var(--container)) / 2)); bottom: 1rem; width: min(10vw, 9rem); aspect-ratio: 4489 / 5080; pointer-events: none; }
.house-draw svg { width: 100%; height: 100%; display: block; overflow: visible; }
.house-draw path { fill: rgba(255,255,255,.12); stroke: var(--orange); stroke-width: 64; stroke-linejoin: round; stroke-linecap: round; }
.house-draw .hd-door { fill: rgba(238,119,36,.42); }
.house-draw__dot { position: absolute; right: -16%; bottom: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
@keyframes fss-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fss-settle-fill { from { fill: rgba(255,255,255,0); stroke-opacity: 1; } to { fill: rgba(255,255,255,.12); stroke-opacity: 0; } }
@keyframes fss-settle-door { from { fill: rgba(238,119,36,0); stroke-opacity: 1; } to { fill: rgba(238,119,36,.42); stroke-opacity: 0; } }
.house-draw.is-animated path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fss-draw 1150ms var(--ease) 150ms both, fss-settle-fill 520ms ease 1250ms both; }
.house-draw.is-animated .hd-door { animation: fss-draw 1150ms var(--ease) 150ms both, fss-settle-door 520ms ease 1250ms both; }
.house-draw.is-animated .house-draw__dot { animation: fss-pop 380ms var(--ease) 1700ms both; }
.house-draw:not(.is-animated) path { stroke-opacity: 0; }
@media (max-width: 47.9em) { .house-draw { display: none; } }
@media (min-width: 48em) and (max-width: 89.99em) { .house-draw { width: min(8.5vw, 6.5rem); right: calc(2vw - max(0px, (100vw - var(--container)) / 2)); } }

/* ---------- 6. Reduced motion: final compositions only ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ph--hero.ph--photo .ph__shape, .ph--hero.ph--photo::after, .ph--hero.ph--photo .mosaic-sq, .ph--hero.ph--photo .ph__arc { animation: none; }
  .house-draw.is-animated path, .house-draw.is-animated .hd-door, .house-draw.is-animated .house-draw__dot { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0; }
  .btn, .textlink, .doors li, .states li, .services li, .router li, .faq summary .plus { transition: none !important; }
}

/* ---------- 7. Hover and focus ---------- */
.btn { transition: background-color var(--hover-dur) var(--ease), color var(--hover-dur) var(--ease), border-color var(--hover-dur) var(--ease), transform var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease); }
.btn--primary:hover, .btn--primary:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(238, 119, 36, .32); }
.btn--navy:hover, .btn--navy:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2, 60, 90, .28); }
.btn--secondary:hover, .btn--secondary:focus-visible { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark .btn:focus-visible, .fss-footer .btn:focus-visible, .fss-header .btn:focus-visible, .fss-mobile .btn:focus-visible { outline-color: var(--focus-on-dark); }
body a.btn--primary:focus-visible { color: var(--navy); }
.textlink { transition: color var(--hover-dur) var(--ease); }
.textlink:hover, .textlink:focus-visible { color: var(--teal-dark); }
.on-dark .textlink:hover, .on-dark .textlink:focus-visible { color: var(--mint); }
.textlink:focus-visible::after { transform: translateX(3px) rotate(45deg); }
/* Linked cards and tiles: lift + rule colour; the whole card follows its link's hover/focus. */
.doors li, .states li, .services li, .router li, .panel:has(> .textlink), .panel:has(> .cta-row) { transition: transform var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease), border-color var(--hover-dur) var(--ease), background-color var(--hover-dur) var(--ease); }
.doors li:has(a):hover, .doors li:has(a):focus-within, .states li:has(a):hover, .states li:has(a):focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 60, 90, .12); border-color: var(--teal); }
.services li:has(a):hover, .services li:has(a):focus-within, .router li:has(a):hover, .router li:has(a):focus-within { background: linear-gradient(90deg, var(--bg-soft), transparent 70%); }
.services li:has(a):hover .textlink::after, .router li:has(a):hover .textlink::after { transform: translateX(3px) rotate(45deg); }
.services li:has(a):hover .svc-icon, .services li:has(a):focus-within .svc-icon { transform: translateY(-2px) scale(1.04); }
/* Image links */
a:has(> .ph) { display: block; border-radius: var(--radius-card); }
a:has(> .ph):hover .ph__shape, a:has(> .ph):focus-visible .ph__shape { box-shadow: 0 18px 40px rgba(2, 60, 90, .2); }
/* Accordion rows */
.faq summary { transition: color var(--hover-dur) var(--ease); }
.faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.faq summary:hover .plus, .faq summary:focus-visible .plus { border-color: var(--teal-dark); }
/* Header controls */
body .fss-header .fss-nav a:not(.btn):hover, body .fss-header .fss-nav a:not(.btn):focus-visible { background-color: rgba(255,255,255,.14); }
body .fss-header .fss-phone:hover, body .fss-header .fss-phone:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
/* Footer links */
.fss-footer a:not(.btn):hover, .fss-footer a:not(.btn):focus-visible { color: var(--mint); text-decoration-color: var(--mint); }

/* ---------- 8. Navigation: current section (parent of the page being viewed) ---------- */
@media (min-width: 64em) {
  body .fss-header .fss-nav .is-current-section > button, body .fss-header .fss-nav .is-current-section > a:not([aria-current="page"]) { box-shadow: inset 0 -3px 0 var(--orange); border-radius: var(--radius-pill) var(--radius-pill) 4px 4px; }
  body .fss-header .fss-nav .is-current-section > button[aria-expanded="true"] { background-color: rgba(255,255,255,.14); }
}
body .fss-header .fss-mobile .is-current-section > button, body .fss-header .fss-mobile .is-current-section > a:not([aria-current="page"]) { box-shadow: inset 4px 0 0 var(--orange); }
body .fss-header .fss-mobile a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--orange); background: rgba(255,255,255,.06); }
body .fss-header .fss-nav .menu a[aria-current="page"] { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--orange); }

/* ---------- 9. Homepage service icons: four distinct marks in circles (flyer style) ---------- */
.services .door { width: 3.25rem; height: 3.25rem; border-radius: 50%; margin-top: 0; background: var(--navy); position: relative; transition: transform var(--hover-dur) var(--ease); }
.services .door::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.9rem; height: 1.9rem; background: var(--white); opacity: 1; border-radius: 0; transform: none;
  -webkit-mask: var(--svc) center / contain no-repeat; mask: var(--svc) center / contain no-repeat; }
.services li { grid-template-columns: 4rem minmax(0, 1fr); }
/* Home Care: house with a heart */
.services li:nth-child(1) .door { background: var(--navy); --svc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11.2 12 4l8.5 7.2'/><path d='M5.5 9.8V20h13V9.8'/><path d='M12 17.2s-3.2-2-3.2-4a1.6 1.6 0 0 1 3.2-.6 1.6 1.6 0 0 1 3.2.6c0 2-3.2 4-3.2 4z'/></svg>"); }
/* Adult Day Health: rising sun (the day, together) */
.services li:nth-child(2) .door { background: var(--orange); --svc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 17h16'/><path d='M7 17a5 5 0 0 1 10 0'/><path d='M12 7V4.5M6.3 9.3 4.6 7.6M17.7 9.3l1.7-1.7M3 13H5M19 13h2'/><path d='M8 20.5h8'/></svg>"); }
/* IDD Programs: two people side by side */
.services li:nth-child(3) .door { background: var(--teal); --svc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='8.5' cy='8' r='2.6'/><circle cx='16' cy='9' r='2.2'/><path d='M3.5 19.5v-1.3a5 5 0 0 1 10 0v1.3'/><path d='M14.2 19.5v-1a4 4 0 0 1 6.3-3.3'/></svg>"); }
/* Veteran Care: star inside a badge */
.services li:nth-child(4) .door { background: var(--navy); --svc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 19 6v5.3c0 4.3-2.9 7.5-7 9.2-4.1-1.7-7-4.9-7-9.2V6z'/><path d='m12 8.3 1.1 2.3 2.5.3-1.8 1.7.5 2.5L12 13.9 9.7 15.1l.5-2.5-1.8-1.7 2.5-.3z'/></svg>"); }
.services .door.svc-icon { }

/* ---------- 10. Footer v2 ---------- */
.fss-footer--v2 { padding-block: 0 var(--s-6); }
.fss-footer--v2 nav::before { display: none; }
.fss-footer__band { position: relative; background: var(--tint-teal); color: var(--slate); border-top: 1px solid var(--line); padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); overflow: hidden; }
.fss-footer__band .mosaic-sq { background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--teal), var(--teal)), linear-gradient(var(--orange), var(--orange)); }
.fss-footer__band .mosaic-sq--tl { top: 1.1rem; left: var(--gutter); }
.fss-footer__band .mosaic-sq--br { bottom: 1.1rem; right: var(--gutter); }
.fss-footer__band-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 48em) { .fss-footer__band-inner { grid-template-columns: minmax(0, 1.5fr) auto; } }
@media (min-width: 64em) { .fss-footer__band-inner { grid-template-columns: minmax(0, 1.4fr) auto auto; gap: var(--s-8); } }
.fss-footer__tag { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--navy); margin: 0 0 var(--s-3); text-wrap: balance; }
.fss-footer__lede { margin: 0; color: var(--slate); max-width: 36rem; font-size: var(--fs-body); }
.fss-footer__call { display: grid; gap: .15rem; justify-items: start; }
.fss-footer__eyebrow { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); }
body .fss-footer--v2 .fss-footer__phone { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); color: var(--navy); text-decoration: none; margin: 0; line-height: 1.1; }
body .fss-footer--v2 .fss-footer__phone .ico { color: var(--orange); }
.fss-footer--v2 .fss-footer__phone .ico { width: .85em; height: .85em; }
body .fss-footer--v2 .fss-footer__phone:hover, body .fss-footer--v2 .fss-footer__phone:focus-visible { color: var(--teal-dark); text-decoration: underline; text-underline-offset: .18em; }
.fss-footer__band :focus-visible { outline-color: var(--focus); }
.fss-footer__digits { color: var(--slate); font-weight: 700; font-size: var(--fs-body); }
.fss-footer__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
body .fss-footer--v2 .fss-footer__actions a.btn--secondary { color: var(--navy); border-color: var(--navy); }
body .fss-footer--v2 .fss-footer__actions a.btn--secondary:hover, body .fss-footer--v2 .fss-footer__actions a.btn--secondary:focus-visible { background: var(--navy); color: var(--white); }
@media (max-width: 47.9em) { .fss-footer__actions .btn { flex: 1 1 auto; } }
.fss-footer__main { display: grid; gap: var(--s-6); padding-top: var(--s-7); }
@media (min-width: 48em) { .fss-footer__main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); } .fss-footer__main > .fss-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 64em) { .fss-footer__main { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .fss-footer__main > .fss-footer__brand { grid-column: auto; } }
.fss-footer--v2 .fss-footer__brand img { width: 2.75rem; margin-bottom: var(--s-3); }
.fss-footer--v2 .fss-footer__brand p { max-width: 34rem; }
.fss-footer__heading { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin: 0 0 var(--s-3); }
.fss-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fss-footer__group a { display: inline-block; padding-block: .45rem; line-height: 1.3; min-height: var(--tap); text-decoration: none; }
.fss-footer__group a:hover, .fss-footer__group a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.fss-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; align-items: center; border-top: 1px solid var(--navy-line); margin-top: var(--s-6); padding-top: var(--s-5); font-size: var(--fs-xs); }
.fss-footer--v2 .fss-footer__legal ul, .fss-footer--v2 nav.fss-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem var(--s-5); grid-template-columns: none; }
.fss-footer--v2 .fss-footer__legal a { font-size: var(--fs-xs); color: var(--on-dark); opacity: .9; line-height: 1.3; min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
.fss-footer--v2 .fss-footer__legal a:hover, .fss-footer--v2 .fss-footer__legal a:focus-visible { opacity: 1; text-decoration: underline; color: var(--mint); }
.fss-footer--v2 .fss-footer__bottom p { margin: 0; opacity: .8; }
.fss-footer--v2 .fss-footer__concern { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--mint); }

/* ---------- 11. Locations: visitor-facing empty states ---------- */
.directory__pending { display: grid; gap: var(--s-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--orange); border-radius: var(--radius-card); max-width: 46rem; }
.directory__pending h3 { margin: 0; }
.directory__pending p { margin: 0; }
.directory__pending .cta-row { margin-top: var(--s-2); }

/* ---------- 12. Locations 2 (page template) ---------- */
.l2-hero { position: relative; overflow: hidden; }
.l2-hero .hero__copy { max-width: 46rem; }
.l2-states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .l2-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .l2-states { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.l2-state { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); border-top: 4px solid var(--navy); transition: transform var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease), border-color var(--hover-dur) var(--ease); }
.l2-state:nth-child(2) { border-top-color: var(--orange); }
.l2-state:nth-child(3) { border-top-color: var(--teal); }
.l2-state:nth-child(4) { border-top-color: var(--mint); }
.l2-state:nth-child(5) { border-top-color: var(--blue-gray); }
.l2-state h3 { margin: 0; font-size: var(--fs-h3); }
.l2-state p { margin: 0; font-size: var(--fs-sm); color: var(--slate); }
.l2-state__abbr { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--navy); letter-spacing: .02em; }
.l2-state:has(a):hover, .l2-state:has(a):focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 60, 90, .12); }
.l2-state .textlink { font-size: var(--fs-sm); min-height: 2.5rem; }
.l2-state .l2-state__soon { font-size: var(--fs-xs); color: var(--teal-dark); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.l2-map { position: relative; display: grid; place-items: center; padding: var(--s-5); background: var(--tint-teal); border-radius: var(--radius-card); border: 1px solid var(--line); min-height: 14rem; }
.l2-map svg { width: 100%; max-width: 28rem; height: auto; display: block; }
.l2-map figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--slate); text-align: center; max-width: 30rem; }
.l2-how { display: grid; gap: var(--s-5); }
@media (min-width: 48em) { .l2-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.l2-how > div { padding-top: var(--s-4); border-top: 2px solid var(--mint); }
.l2-how h3 { font-size: var(--fs-lead); margin-bottom: var(--s-2); }
.l2-how p { margin: 0; }
.l2-note { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--white); border-left: 4px solid var(--teal); border-radius: 0 var(--radius-soft) var(--radius-soft) 0; }
.l2-note p { margin: 0; }
@media (min-width: 30em) and (max-width: 47.9em) { .fss-footer__main { grid-template-columns: 1fr 1fr; } .fss-footer__main > .fss-footer__brand { grid-column: 1 / -1; } }
/* Service-family variation so the three service heroes are not identical: Adult Day mirrors the arc and moves the squares right; IDD keeps the squares only. */
body.fss-page-adult-day .ph.treat-window .ph__arc { transform: scaleX(-1); }
body.fss-page-adult-day .ph.treat-window .mosaic-sq--bl { left: auto; right: 0.5rem; }
body.fss-page-idd .ph.treat-window .ph__arc { display: none; }
body.fss-page-idd .ph.treat-window .mosaic-sq--bl { bottom: auto; top: 50%; left: -1.6rem; transform: rotate(90deg); transform-origin: left top; }
/* Careers: "What you can expect" reads as benefit cards on the navy band. */
body.fss-page-careers .points { gap: var(--s-4); }
body.fss-page-careers .points li { padding: var(--s-5); border: 1px solid var(--navy-line); border-top: 3px solid var(--mint); border-radius: var(--radius-card); background: rgba(255,255,255,.06); }

/* v1.5.4: when the band is suppressed (page already ends with a closing CTA) the utility footer starts with a hairline above its content. */
.fss-footer--no-band { border-top: 1px solid var(--navy-line); }
.fss-footer--no-band .fss-footer__main { padding-top: var(--s-7); }

/* v1.6.3 footer social links: quiet, secondary to navigation and the call band. */
.fss-footer__social { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; gap: var(--s-2); }
.fss-footer__social li { margin: 0; }
.fss-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 1px solid var(--navy-line); border-radius: 50%; color: var(--on-dark); opacity: .85; text-decoration: none; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
.fss-footer__social-link .ico { width: 1.15rem; height: 1.15rem; }
.fss-footer__social-link:hover, .fss-footer__social-link:focus-visible { opacity: 1; color: var(--mint); border-color: var(--mint); }
.fss-footer__social-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fss-footer__social-link { transition: none; } }

/* 1.6.4: general inquiry email in the footer brand column */
.fss-footer--v2 .fss-footer__email { margin: var(--s-3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--white); }
.fss-footer--v2 .fss-footer__email a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.fss-footer--v2 .fss-footer__email span { opacity: .85; }
/* 1.6.4: a little more room on large Mac displays (the 76rem cap left wide margins at 1440px and above) */
@media (min-width: 90em) { :root { --container: 84rem; } }