/* =============================================================================
   Seasons Care Modern — Theme layout (header, hero, sections, footer, templates)
   ============================================================================= */

/* ---------- Top bar ---------- */
.topbar {
  background: var(--forest-800); color: #EAF1ED; font-size: var(--step--1);
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; padding-block: .5rem; }
.topbar a { color: #EAF1ED; text-decoration: none; display: inline-flex; align-items:center; gap:.45ch; font-weight: 600; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__group { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items:center; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,247,240,.92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--cream-3); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
/* Client asked for the logo bigger and clearer. It is an SVG (408x100 viewBox), so height is
   lossless at any size — raising it costs nothing in sharpness. 70 -> 82px on desktop, with the
   full-width header (see .site-header__inner in design-system.css) giving it room to breathe. */
.brand__logo { height: 82px; width: auto; display: block; }
@media (max-width: 68rem){ .brand__logo { height: 68px; } }
@media (max-width: 48rem){ .brand__logo { height: 60px; } }
@media (max-width: 30rem){ .brand__logo { height: 52px; } }
.brand__mark { display:inline-grid; place-items:center; width: 46px; height: 46px; border-radius: 12px; background: var(--forest); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; flex:none; }
.brand__name { font-family: var(--font-serif); font-weight: 650; font-size: 1.22rem; line-height: 1.05; color: var(--ink); }
.brand__name small { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clay-600); }
.footer-logo { height: 74px; width: auto; display: block; margin-bottom: .3rem; }

.primary-nav { display: flex; align-items: center; gap: .25rem; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: .05rem; margin: 0; padding: 0; }
.primary-nav > ul > li > a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .94rem; padding: .5rem .52rem; border-radius: var(--radius-pill); display: inline-flex; align-items:center; gap:.12ch; white-space: nowrap; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav > ul > li > a[aria-current] { background: var(--forest-050); color: var(--forest-700); }
.primary-nav .menu-caret { opacity: .55; margin-left: -.05ch; transition: transform .15s var(--ease); }
.primary-nav .menu-item-has-children:hover .menu-caret, .primary-nav .menu-item-has-children:focus-within .menu-caret { transform: rotate(180deg); }
.primary-nav .menu-item-has-children { position: relative; }
/* keep the panel reachable while moving from trigger to submenu (invisible hover bridge) */
.primary-nav .menu-item-has-children::after { content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.primary-nav .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 250px; background: var(--paper);
  border: 1px solid var(--cream-3); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .5rem; display: grid; gap: 1px; opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Submenu links: no underline; refined hover with icon + accent bar + slight slide */
.primary-nav .sub-menu a { display:flex; align-items:center; gap:.7rem; padding: .6rem .8rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; color: var(--ink); position: relative; transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease); }
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible { background: var(--forest-050); color: var(--forest-700); padding-left: 1rem; }
.primary-nav .sub-menu a::before { content:""; position:absolute; left:.35rem; top:50%; width:3px; height:0; background: var(--clay); border-radius:2px; transform: translateY(-50%); transition: height .15s var(--ease); }
.primary-nav .sub-menu a:hover::before, .primary-nav .sub-menu a:focus-visible::before { height: 60%; }
.primary-nav .sub-menu .submenu-ic { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background: var(--clay-050); color: var(--clay-600); flex:none; }
@media (prefers-reduced-motion: reduce){ .primary-nav .sub-menu a { transition: background .01ms; } .primary-nav .sub-menu a:hover { padding-left:.8rem; } }
.header-cta { display: flex; align-items: center; gap: .6rem; }
/* Strong one-line "Schedule a Visit" button; shown from 1248px up (incl. 1280 & 1440). */
.header-cta__btn { display: none; white-space: nowrap; padding: .8rem 1.15rem; }
@media (min-width: 78rem) { .header-cta__btn { display: inline-flex; } }

/* mobile nav */
.nav-toggle { display: none; }
.mobile-only { display: none; }
/* Off-canvas drawer + backdrop are hidden entirely on desktop (only shown at <=62rem). */
.mobile-drawer, .drawer-backdrop { display: none; }
@media (max-width: 68rem) {
  .primary-nav > ul { display: none; }
  .drawer-backdrop { display: block; }
  .nav-toggle {
    display: inline-flex; align-items:center; gap:.5ch; background: var(--forest); color:#fff; border:0;
    padding: .7rem 1rem; border-radius: var(--radius-pill); font: inherit; font-weight: 650; cursor: pointer; min-height:44px;
  }
  .mobile-drawer {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: var(--paper);
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s var(--ease);
    z-index: 150; padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem;
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer[hidden] { display: flex; } /* keep transition; visually hidden via transform + inert */
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(27,55,45,.4); z-index: 149; opacity:0; visibility:hidden; transition: opacity .2s; }
  .drawer-backdrop.is-open { opacity:1; visibility:visible; }
  .mobile-drawer ul { list-style:none; margin:0; padding:0; }
  .mobile-drawer a { display:block; padding: .85rem .6rem; text-decoration:none; color: var(--ink); font-weight:650; border-radius: var(--radius-sm); border-bottom:1px solid var(--cream-2); }
  .mobile-drawer a:hover { background: var(--forest-050); }
  .mobile-drawer .sub-menu a { padding-left: 1.5rem; font-weight:600; color: var(--ink-soft); }
  .drawer-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: .5rem; }
  .drawer-close { background: var(--cream-2); border:0; border-radius: 50%; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color: var(--ink); }
  .mobile-only { display: block; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--forest-050), var(--cream)); }
/* Top padding cut so the Schedule / Call buttons clear the fold without scrolling — the hero used
   the same generous space top and bottom, which pushed the CTAs off-screen on shorter laptops.
   Bottom keeps its breathing room. Media column widened (.95fr -> 1.12fr) and stretched, so the
   album is larger and its top and bottom line up with the left column rather than floating
   centred against it. */
.hero__inner { display: grid; grid-template-columns: 1.05fr 1.12fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; padding-block: clamp(1rem, 2.2vw, 2rem) clamp(2.5rem, 6vw, 4.5rem); }
/* Both columns span the full grid row so the album's top and bottom edges line up exactly with the
   left column instead of overhanging it (measured 50px proud top and bottom before this). The text
   still sits optically centred — it centres INSIDE the stretched column rather than shrinking it. */
.hero__content { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.hero__content { max-width: 42rem; }
.hero__title { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.7rem); margin-bottom: .35em; letter-spacing: -0.015em; }
.hero__title .accent { color: var(--clay-600); }
/* Keep "feels like <word>" together on one line (no orphaned word on a 3rd line) */
.hero__title-phrase { white-space: nowrap; }
/* Rotating hero word (built by JS; no layout shift — inline-grid sizes to the widest word) */
.wordrot { display: inline-grid; vertical-align: bottom; }
.wordrot__stack { display: inline-grid; }
.wordrot__stack > span { grid-area: 1 / 1; opacity: 0; color: var(--clay-600); white-space: nowrap; transition: opacity .5s var(--ease); }
.wordrot__stack > span.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce){ .wordrot__stack > span { transition: none; } }
.hero__lede { font-size: var(--step-1); color: var(--ink-soft); margin-bottom: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; color: var(--ink-soft); font-weight: 600; }
.hero__trust .scc-icon { color: var(--forest); }
.hero__trust span { display: inline-flex; align-items:center; gap:.5ch; font-size: var(--step--1); }
/* Image + stat form ONE rounded card; the "16 residents" stat is a caption bar UNDER the
   photo so it never overlaps or hides the gallery imagery (the USP). */
.hero__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper); }
.hero__media img { display:block; width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--forest-050); }
.hero__badge {
  display:flex; align-items:center; gap:.85rem; padding: .9rem 1.15rem;
  background: var(--paper); border-top: 3px solid var(--gold);
}
.hero__badge .scc-icon { color: var(--clay-600); flex:none; }
.hero__badge strong { display:block; font-family: var(--font-serif); font-size: 1.35rem; line-height:1.05; color: var(--ink); }
.hero__badge span { font-size: var(--step--1); color: var(--ink-soft); }
@media (max-width: 54rem) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 34rem; margin-inline: auto; }
}

/* ---------- Section heading block ---------- */
.section-head { max-width: 52rem; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }

/* ---------- Value / feature grid ---------- */
/* 6 value props → clean 3×2 (never 4+2 orphan). Falls back to 2, then 1. */
.feature-grid { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 60rem){ .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 40rem){ .feature-grid { grid-template-columns: 1fr; } }
.feature { display:flex; gap: 1rem; }
.feature__icon { flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background: var(--gold-050); color: var(--gold); }
.feature h3 { font-size: var(--step-1); margin: .1rem 0 .3rem; }
.feature p { color: var(--ink-soft); margin: 0; }

/* ---------- Trust stats band ---------- */
.stats { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); text-align:center; }
.stat__num { font-family: var(--font-serif); font-size: var(--step-4); color: #fff; line-height:1; }
.stat__label { color: #D6E3DC; font-size: var(--step--1); margin-top:.4rem; }

/* ---------- Split (image + text) ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--forest-050); }
@media (max-width: 54rem){ .split, .split--reverse .split__media { grid-template-columns: 1fr; order: 0; } }

/* ---------- Gallery ---------- */
.scc-gallery { list-style:none; margin:0; padding:0; display:grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
.scc-gallery__item { margin:0; }
.scc-gallery__link { display:block; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.scc-gallery__link img { width:100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s var(--ease); background: var(--forest-050); }
.scc-gallery__link:hover img { transform: scale(1.05); }

/* Featured mosaic (homepage): one large lead image + supporting tiles → hierarchy + impact. */
.scc-gallery--featured { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.scc-gallery--featured .scc-gallery__item { margin: 0; }
.scc-gallery--featured .scc-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.scc-gallery--featured .scc-gallery__link { height: 100%; }
.scc-gallery--featured .scc-gallery__link img { height: 100%; aspect-ratio: auto; }
@media (max-width: 60rem){
  .scc-gallery--featured { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; }
  .scc-gallery--featured .scc-gallery__item:first-child { grid-column: span 2; grid-row: span 1; grid-auto-rows: 220px; }
  .scc-gallery--featured .scc-gallery__item:first-child .scc-gallery__link { height: 240px; }
}
@media (max-width: 30rem){
  .scc-gallery--featured { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
}

/* lightbox */
.scc-lightbox { position: fixed; inset:0; z-index:200; background: rgba(20,30,26,.9); display:none; align-items:center; justify-content:center; padding: 2rem; }
.scc-lightbox.is-open { display:flex; }
.scc-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.scc-lightbox__close { position:absolute; top:1rem; right:1rem; width:48px; height:48px; border-radius:50%; background:#fff; border:0; cursor:pointer; display:grid; place-items:center; color: var(--ink); }

/* ---------- Videos (square-native gallery: featured 2x2, hole-free) ---------- */
.video-gallery { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
.video-gallery__item { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.video-gallery__frame { background:#000; }
.video-gallery video { width:100%; aspect-ratio: 1/1; object-fit: cover; display:block; background:#000; }
.video-gallery__body { padding:.8rem 1rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.video-gallery__title { font-family: var(--font-serif); font-size: var(--step-0); line-height:1.25; margin:0; color: var(--ink); }
.video-gallery__badge { display:inline-flex; align-items:center; gap:.4ch; background: var(--clay); color:#fff; font-family: var(--font-sans); font-size:var(--step--1); font-weight:700; padding:.2rem .55rem; border-radius: var(--radius-pill); flex:none; }
.video-gallery__badge .scc-icon { color:#fff; }
@media (min-width: 56rem){
	.video-gallery { grid-template-columns: repeat(3, 1fr); }
	.video-gallery__item--featured { grid-column: span 2; grid-row: span 2; box-shadow: var(--shadow-lg); }
	.video-gallery__item--featured .video-gallery__title { font-size: var(--step-1); }
	.video-gallery__item--featured .video-gallery__body { padding:.95rem 1.2rem; }
}
@media (max-width: 34rem){ .video-gallery { grid-template-columns: 1fr; } }

/* ---------- Social widget (Connect with Seasons) ---------- */
.scc-connect { background: var(--paper); }
.scc-social { list-style:none; margin:0; padding:0; }
/* compact pills — default (light surfaces: contact, mobile menu) */
.scc-social--compact { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.scc-social__pill { display:inline-flex; align-items:center; gap:.45ch; padding:.42rem .75rem; border-radius: var(--radius-pill); background: var(--cream-2); border:1px solid var(--cream-3); color: var(--forest-700) !important; font-size: var(--step--1); font-weight:650; text-decoration:none !important; transition: background .18s var(--ease), border-color .18s var(--ease); }
.scc-social__pill:hover, .scc-social__pill:focus-visible { background: var(--forest-050); border-color: var(--forest-700); color: var(--forest-700) !important; }
.scc-social__pill .scc-icon { color: var(--clay); }
/* compact pills — footer (dark surface) */
.site-footer .scc-social__pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color:#E7F0EC !important; }
.site-footer .scc-social__pill:hover, .site-footer .scc-social__pill:focus-visible { background: rgba(255,255,255,.16); border-color: var(--gold); color:#fff !important; }
.site-footer .scc-social__pill .scc-icon { color: var(--gold); }
/* full cards (homepage / contact) */
.scc-social--cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 52rem){ .scc-social--cards { grid-template-columns: 1fr; max-width:30rem; margin-inline:auto; } }
.scc-social__card { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.scc-social__icon { display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; color:#fff; margin-bottom:.35rem; }
.scc-social__icon .scc-icon { color:#fff; }
.scc-social__card--facebook .scc-social__icon { background:#1877F2; }
.scc-social__card--instagram .scc-social__icon { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.scc-social__card--x .scc-social__icon { background:#111; }
.scc-social__name { margin:0; font-size: var(--step-1); font-family: var(--font-serif); color: var(--ink); }
.scc-social__handle { margin:0; font-size: var(--step--1); color: var(--forest-700); font-weight:650; }
.scc-social__blurb { margin:.25rem 0 .85rem; color: var(--ink-soft); font-size: var(--step--1); }
.scc-social__card .scc-btn { margin-top:auto; }
.drawer-social { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--cream-3); }
.drawer-social__label { display:block; font-size:var(--step--1); font-weight:700; color:var(--ink-soft); margin-bottom:.5rem; }
/* Privacy-safe article share bar */
.scc-share { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--cream-3); }
.scc-share__label { display:inline-flex; align-items:center; gap:.5ch; font-weight:650; color:var(--ink-soft); }
.scc-share__label .scc-icon { color:var(--clay); }
.scc-share__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.scc-share__btn { display:inline-flex; align-items:center; gap:.4ch; justify-content:center; min-width:42px; height:42px; padding:0 .7rem; border-radius:var(--radius-pill); border:1px solid var(--cream-3); background:var(--paper); color:var(--forest-700); cursor:pointer; text-decoration:none !important; font:inherit; font-size:var(--step--1); font-weight:650; }
.scc-share__btn:hover, .scc-share__btn:focus-visible { background:var(--forest-050); border-color:var(--forest-700); }
.scc-share__btn .scc-icon { color:var(--clay); }
.scc-share__copied { color:var(--forest-700); font-weight:650; }

/* ---------- Instagram: Life at Seasons ---------- */
.scc-instagram { background: var(--cream-2); }
.scc-instagram__head { text-align:center; max-width:52ch; margin:0 auto var(--sp-4); }
.scc-instagram__head h2 { margin:.2rem 0 .5rem; }
.scc-instagram__head .scc-btn { margin-top:.4rem; }
.scc-icon--flip { transform: scaleX(-1); }
.scc-ig-carousel { position:relative; display:flex; align-items:center; gap:.5rem; }
.scc-ig-track { list-style:none; margin:0; padding:.25rem; display:grid; grid-auto-flow:column; grid-auto-columns: minmax(46%, 1fr); gap: var(--sp-3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
@media (min-width:40rem){ .scc-ig-track { grid-auto-columns: minmax(30%, 1fr); } }
@media (min-width:64rem){ .scc-ig-track { grid-auto-columns: minmax(22%, 1fr); } }
.scc-ig-item { scroll-snap-align:start; }
.scc-ig-item a { position:relative; display:block; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.scc-ig-item img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background: var(--cream-2); transition: transform .3s ease; }
.scc-ig-item a:hover img, .scc-ig-item a:focus-visible img { transform: scale(1.04); }
.scc-ig-item__badge { position:absolute; top:.5rem; right:.5rem; color:#fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.scc-ig-nav { flex:none; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--cream-3); background: var(--paper); color: var(--forest-700); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-sm); }
.scc-ig-nav:hover { background: var(--forest-700); color:#fff; }
@media (max-width:40rem){ .scc-ig-nav { display:none; } } /* native swipe on touch */
.scc-ig-panel { max-width:52ch; margin:0 auto; text-align:center; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-4); }
.scc-ig-panel__glyph { display:inline-flex; width:4.5rem; height:4.5rem; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient(135deg,#F5EFE2,#E8DFC9); color: var(--forest-700); margin-bottom:.4rem; }
.scc-ig-panel__handle { font-family: var(--font-serif); font-size: var(--step-1); margin:.3rem 0 .2rem; color: var(--ink); }
.scc-ig-panel__text { color: var(--ink-soft); margin:0 auto .9rem; }
.scc-ig-panel__actions { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Testimonials ---------- */
.scc-testimonials { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.scc-testimonial { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); position: relative; }
.scc-testimonial__mark { color: var(--forest-100); position:absolute; top: 1rem; right: 1.1rem; }
.scc-testimonial__quote { margin: 0 0 1rem; border:0; padding:0; }
.scc-testimonial__quote p { font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink); line-height: 1.4; margin:0; }
.scc-testimonial__author { font-weight: 700; color: var(--forest-700); margin:0; }
.scc-testimonial__date { display:block; font-weight: 500; color: var(--ink-mute); font-size: var(--step--1); }

/* ---------- Reviews component ---------- */
.scc-reviews { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.scc-reviews__head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom:1px solid var(--cream-2); }
.scc-reviews__num { font-family: var(--font-serif); font-size: var(--step-4); color: var(--ink); line-height:1; }
.scc-reviews__score { display:flex; align-items:center; gap:.7rem; margin:0; }
.scc-reviews__meta { margin:0; color: var(--ink-soft); font-weight:600; }
.scc-reviews__list { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.scc-review__text { color: var(--ink-soft); margin:.5rem 0; }
.scc-review__author { font-weight:700; margin:0; color: var(--ink); }
.scc-review__when { font-weight:500; color: var(--ink-mute); }
.scc-reviews--cta { text-align:center; background: var(--forest-050); border-color: var(--forest-100); }
.scc-reviews__cta-icon { display:inline-grid; place-items:center; width:60px; height:60px; border-radius:50%; background: var(--gold-050); color: var(--gold); margin-bottom:.6rem; }
.scc-reviews__cta-body h3 { font-size: var(--step-2); margin:.2rem 0 .4rem; }
.scc-reviews__cta-body p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto 1.2rem; }

/* ---------- CTA band ---------- */
.scc-cta { background: linear-gradient(135deg, var(--clay), var(--clay-600)); color:#fff; border-radius: var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); box-shadow: var(--shadow-lg); }
.scc-cta__inner { max-width: 46rem; }
.scc-cta__title { color:#fff; font-size: var(--step-3); }
.scc-cta__text { color: #FBEDE6; font-size: var(--step-1); }
.scc-cta__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem; }
.scc-cta .scc-btn--primary { --btn-bg:#fff; --btn-fg: var(--clay-600); --btn-bd:#fff; }
.scc-cta .scc-btn--primary:hover { --btn-bg: var(--cream); }
.scc-cta .scc-btn--ghost { --btn-fg:#fff; }
.scc-cta .scc-btn--ghost:hover { --btn-bg: rgba(255,255,255,.14); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-block: .9rem; font-size: var(--step--1); color: var(--ink-mute); }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4ch; margin:0; padding:0; }
.breadcrumbs a { color: var(--forest-700); text-decoration:none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:.4ch; color: var(--cream-3); }

/* ---------- Page / article ---------- */
.page-hero { background: var(--forest-050); border-bottom:1px solid var(--cream-3); }
.page-hero__inner { padding-block: clamp(2rem,5vw,3.5rem); max-width: 54rem; }
.page-hero h1 { margin-bottom:.35rem; }
.page-hero p { color: var(--ink-soft); font-size: var(--step-1); margin:0; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.6em; font-size: var(--step-1); }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-block: 1.2em; }
.prose a:not(.scc-btn) { color: var(--forest-700); }
/* Buttons inside prose/content keep their own high-contrast label colour (fixes dark-on-green merge) */
.prose a.scc-btn, .prose a.scc-btn:hover { color: var(--btn-fg); }
.prose blockquote { margin: 1.5em 0; padding: 1rem 1.4rem; border-left: 4px solid var(--clay); background: var(--clay-050); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose ul li::marker { color: var(--clay); }

.content-with-aside { display:grid; grid-template-columns: minmax(0,1fr) 20rem; gap: clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width: 60rem){ .content-with-aside { grid-template-columns: 1fr; } }
.aside-card { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); position: sticky; top: 6rem; }
.aside-card h3 { font-size: var(--step-1); }

/* ---------- Blog archive cards ---------- */
.post-grid { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.post-card { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media { aspect-ratio: 16/9; overflow:hidden; background: var(--forest-050); }
.post-card__media img { width:100%; height:100%; object-fit: cover; }
.post-card__body { padding: var(--sp-4); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-card__cat { font-size: var(--step--1); font-weight: 700; color: var(--clay-600); text-transform: uppercase; letter-spacing:.05em; }
.post-card__title { font-size: var(--step-1); margin:0; }
.post-card__title a { color: var(--ink); text-decoration:none; }
.post-card__title a:hover { color: var(--clay-600); }
.post-card__meta { color: var(--ink-mute); font-size: var(--step--1); margin-top:auto; }

/* pagination */
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top: var(--sp-5); }
.pagination .page-numbers { display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 .6rem; border-radius: var(--radius-sm); background: var(--paper); border:1px solid var(--cream-3); text-decoration:none; color: var(--ink); font-weight:600; }
.pagination .current { background: var(--forest); color:#fff; border-color: var(--forest); }
.pagination a:hover { background: var(--forest-050); }

/* ---------- Contact / map ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width: 54rem){ .contact-grid { grid-template-columns: 1fr; } }
.map-embed { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--cream-3); aspect-ratio: 4/3; background: var(--forest-050); }
.map-embed iframe { width:100%; height:100%; border:0; display:block; }
.map-fallback { padding: var(--sp-4); }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-800); color: #CFDDD6; padding-block: var(--sp-6) var(--sp-4); margin-top: var(--sp-6); }
.site-footer a { color: #E7F0EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display:grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: 1.5fr 1.1fr 1.25fr 1.25fr; align-items:start; }
.footer-col h4 { margin:0 0 .9rem; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
@media (max-width: 75rem){ .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 48rem){ .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 34rem){ .footer-grid { grid-template-columns: 1fr; } }
.footer-col { min-width:0; }
.footer-brand-col__tag { max-width:34ch; color:#C4D3CB; margin-top:.9rem; }
.footer-brand-col__cta { margin-top:.9rem; }
.footer-comm-note { color:#B7C8BF; font-size:var(--step--1); margin:.1rem 0 1rem; }
.footer-comm-note a { color:#E7F0EC; font-weight:600; }
.footer-locations { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.footer-locations li { display:grid; gap:.15rem; }
.footer-locations strong { color:#fff; display:flex; align-items:center; gap:.5ch; flex-wrap:wrap; }
.footer-locations span { color:#B7C8BF; font-size:var(--step--1); }
.footer-loc-tag { font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--forest-800); background:var(--gold); padding:.05rem .45rem; border-radius:var(--radius-pill); }
.footer-directions { display:inline-flex; align-items:center; gap:.35ch; font-size:var(--step--1); font-weight:600; margin-top:.1rem; }
.footer-directions .scc-icon { color:var(--gold); }
/* Awards / recognition trust strip */
.footer-trust { border-top:1px solid rgba(255,255,255,.12); margin-top:var(--sp-5); padding-top:var(--sp-4); display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.footer-trust__label { font-family:var(--font-serif); color:#fff; font-size:var(--step-0); flex:none; }
.scc-awards { list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; flex-wrap:wrap; }
.scc-award { display:flex; align-items:center; gap:.7rem; }
.scc-award__seal { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(228,179,99,.16); color:var(--gold); flex:none; }
.scc-award__name { margin:0; font-weight:700; color:#fff; font-size:var(--step--1); line-height:1.2; }
.scc-award__meta { margin:0; color:#B7C8BF; font-size:.8rem; }
.scc-award__link { display:inline-flex; align-items:center; gap:.3ch; font-size:.8rem; color:var(--gold) !important; }
.site-credit a { color:#D8C39A; }
.site-credit a:hover { color:#fff; }
/* Homepage recognition section awards (light bg) */
.section--paper .scc-awards .scc-award__name, .section--tint .scc-awards .scc-award__name { color:var(--ink); }
.section--paper .scc-awards .scc-award__meta, .section--tint .scc-awards .scc-award__meta { color:var(--ink-soft); }
.section--paper .scc-awards .scc-award__link, .section--tint .scc-awards .scc-award__link { color:var(--clay-600) !important; }
.section--paper .scc-awards .scc-award__seal, .section--tint .scc-awards .scc-award__seal { background:var(--gold-050); }
.scc-award__seal--img { background:transparent !important; }
.scc-award__seal img { width:40px; height:40px; object-fit:contain; display:block; }
/* Premium homepage Recognition & Achievements cards */
.scc-recognition { list-style:none; margin:0 auto; padding:0; max-width:56rem; display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); justify-content:center; }
@media (max-width: 40rem){ .scc-recognition { grid-template-columns: 1fr; max-width:26rem; } }
.scc-recognition__card { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-4); text-align:center; display:flex; flex-direction:column; align-items:center; }
.scc-recognition__badge { height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
.scc-recognition__badge img { max-height:120px; width:auto; height:auto; object-fit:contain; } /* original proportions, no distortion/upscale */
.scc-recognition__seal { display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background: var(--gold-050); color: var(--gold); }
.scc-recognition__name { margin:0; font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink); line-height:1.2; }
.scc-recognition__issuer { margin:.25rem 0 0; font-size: var(--step--1); font-weight:650; color: var(--forest-700); }
.scc-recognition__blurb { margin:.6rem 0 .9rem; color: var(--ink-soft); font-size: var(--step--1); max-width:34ch; }
.scc-recognition__link { display:inline-flex; align-items:center; gap:.35ch; margin-top:auto; font-weight:650; font-size: var(--step--1); color: var(--clay-600) !important; }
.footer-brand__name { font-family: var(--font-serif); font-size: 1.3rem; color:#fff; }
.footer h4 { color:#fff; font-size: var(--step-0); margin-bottom: .8rem; }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-contact li { display:flex; gap:.6ch; align-items:flex-start; margin-bottom:.5rem; }
.footer-contact .scc-icon { color: var(--gold); flex:none; margin-top:2px; }
.footer-legal { border-top:1px solid rgba(255,255,255,.12); margin-top: var(--sp-5); padding-top: var(--sp-4); display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:center; }
.footer-legal a, .footer-legal__btn { color:#CFDDD6; font-size: var(--step--1); text-decoration:none; background:none; border:0; padding:0; cursor:pointer; font:inherit; }
.footer-legal a:hover, .footer-legal__btn:hover { color:#fff; text-decoration:underline; }
.footer-bottom { margin-top: var(--sp-4); padding-top: var(--sp-3); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size: var(--step--1); color:#AFC2B9; }

/* Floating desktop action rail (right side, > 68rem): fixed icon cells + stable left-reveal pill */
/* Unified shell so the four controls read as ONE quick-action centre */
.action-rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 95; display: flex; flex-direction: column; gap: 6px; padding: 7px; background: var(--paper); border: 1px solid var(--cream-3); border-radius: 20px; box-shadow: var(--shadow-lg); }
.action-rail::before { content: ""; position:absolute; left:50%; top:-9px; transform:translateX(-50%); width:26px; height:4px; border-radius:3px; background: var(--gold); opacity:.9; } /* small cap that marks the unit */
.admin-bar .action-rail { top: calc(50% + 16px); }
/* Call and Contact previously rendered as transparent cells, so the rail read as one orange button
   floating between two blank squares. All three cells now carry a deliberate theme treatment:
   forest green for Call and Email, clay for the Schedule emphasis in the centre. Equal 52px boxes,
   equal radius, icons grid-centred, so nothing sits off-axis. */
.action-rail__item { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--forest); color: #fff; border: 1px solid transparent; cursor: pointer; text-decoration:none; font:inherit; transition: background .18s var(--ease), color .18s var(--ease); }
.action-rail__item .scc-icon { color: #fff; }
.action-rail__ic { display: grid; place-items: center; line-height: 0; }
.action-rail__item:hover, .action-rail__item:focus-visible { background: var(--forest-700); color: #fff; }
.action-rail__item:hover .scc-icon, .action-rail__item:focus-visible .scc-icon { color: #fff; }
.action-rail__item:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
/* Schedule a Visit rail item — the clay emphasis in the centre of two green cells. It darkens to
   clay on hover rather than turning green, which would have collapsed the distinction now that its
   neighbours are green. */
.action-rail__item--primary { background: var(--clay); color:#fff; }
.action-rail__item--primary .scc-icon { color:#fff; }
.action-rail__item--primary:hover, .action-rail__item--primary:focus-visible { background: var(--clay-600); color:#fff; }
.action-rail__item--primary:hover .scc-icon, .action-rail__item--primary:focus-visible .scc-icon { color:#fff; }
/* The `--a11y` rail variant was removed with the rules that styled it: Comfort & Accessibility now
   has its own left-edge launcher and no longer renders inside this rail. */
.action-rail__label {
  position: absolute; right: calc(100% + 8px); top: 0; height: 100%; display: flex; align-items: center;
  white-space: nowrap; padding: 0 .95rem; border-radius: 12px; background: var(--forest); color:#fff;
  font-weight: 650; font-size: .92rem; box-shadow: var(--shadow); opacity: 0; transform: translateX(10px);
  pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.action-rail__item--primary .action-rail__label { background: var(--clay-600); }
.action-rail__item:hover .action-rail__label, .action-rail__item:focus-visible .action-rail__label { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce){ .action-rail__label { transition: opacity .01ms; transform:none; } }
@media (max-width: 68rem){ .action-rail { display:none; } }
/* Accessibility trigger lives in the rail on desktop, in the top bar on mobile/tablet (one shared panel). */
.topbar .a11y-trigger { display: none; }
@media (max-width: 68rem){ .topbar .a11y-trigger { display: inline-flex; } }

/* Fixed mobile action bar (<= 68rem, so tablet + phone are covered; desktop uses the rail) */
.mobile-actions { display:none; }
@media (max-width: 68rem){
  .mobile-actions {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90; gap:.5rem;
    padding:.5rem calc(.5rem + env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) calc(.5rem + env(safe-area-inset-left));
    background: rgba(251,247,240,.97); backdrop-filter: blur(6px); border-top:1px solid var(--cream-3);
  }
  .mobile-actions .scc-btn { flex:1; padding:.7rem .5rem; min-height:50px; font-size:.95rem; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- Sticky internal-page CTA (desktop only; mobile uses .mobile-actions) ---------- */
.scc-sticky-cta { display:none; }
@media (min-width: 68.01rem){
	/* The pill must size to its content, not the other way round. The previous rule combined a
	   640px cap with white-space:nowrap on the lead and flex:none on the actions, so the phone
	   button escaped the rounded container once the copy and the number were both long. */
	.scc-sticky-cta { position: fixed; left:50%; bottom: 1.1rem; z-index: 88; transform: translateX(-50%) translateY(130%); width:max-content; max-width: min(94vw, 62rem); display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:.75rem 1rem; padding:.6rem .75rem .6rem 1.25rem; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity:0; pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
	.scc-sticky-cta.is-visible { transform: translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
	/* Allowed to shrink and wrap — nowrap was what forced the overflow. */
	.scc-sticky-cta__lead { margin:0; flex:1 1 16rem; min-width:0; font-family: var(--font-serif); font-size: var(--step-0); line-height:1.25; color: var(--ink); }
	.scc-sticky-cta__actions { display:flex; gap:.5rem; flex:0 1 auto; flex-wrap:wrap; justify-content:center; }
	/* Buttons may shrink their padding before anything is allowed to leave the container. */
	.scc-sticky-cta .scc-btn { white-space:nowrap; padding-inline:clamp(.75rem,2vw,1.25rem); }
	/* Below the pill breakpoint the layout stacks rather than overflowing. */
	@media (max-width: 62rem){
		.scc-sticky-cta { border-radius: var(--radius-lg); }
		.scc-sticky-cta__lead { flex-basis:100%; text-align:center; }
		.scc-sticky-cta__actions { flex-basis:100%; }
	}
	.scc-sticky-cta__close { flex:none; width:1.9rem; height:1.9rem; border-radius:50%; border:none; background:transparent; color: var(--ink-soft); font-size:1.35rem; line-height:1; cursor:pointer; }
	.scc-sticky-cta__close:hover, .scc-sticky-cta__close:focus-visible { background: var(--cream-2); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce){ .scc-sticky-cta { transition: opacity .01ms linear; } }

/* ---------- Forms ---------- */
.scc-form { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: var(--shadow); }
.scc-form h2 { margin-top:0; }
.scc-field { margin-bottom: var(--sp-3); }
.scc-field-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 34rem){ .scc-field-row { grid-template-columns: 1fr; } }
.scc-field .req { color: var(--clay-600); }
.scc-alert { display:flex; align-items:center; gap:.6ch; padding:.85rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--sp-3); font-weight:600; }
.scc-alert--ok { background: var(--forest-050); color: var(--forest-700); border:1px solid var(--forest-100); }
.scc-alert--err { background: #FBEAE7; color: var(--err); border:1px solid #F1C9C3; }

/* ---------- Accessibility preferences (user-controlled, stored locally) ---------- */
/* Text size (scales rem-based type) */
html.a11y-font-1 { font-size: 106.25%; }
html.a11y-font-2 { font-size: 112.5%; }
html.a11y-font-3 { font-size: 122%; }
/* High contrast */
html.a11y-contrast { --cream:#ffffff; --cream-2:#f3f2ec; --cream-3:#c9c6ba; --paper:#ffffff;
  --ink:#0c0f0e; --ink-soft:#1c211f; --ink-mute:#2b302e; --forest:#123f30; --forest-700:#0d3125; --clay:#8a3a1f; --clay-600:#7a3117; }
html.a11y-contrast a, html.a11y-contrast .scc-card__more { text-decoration: underline; }
html.a11y-contrast .scc-card, html.a11y-contrast .post-card, html.a11y-contrast .scc-testimonial { border-color: #6c6a5f; }
/* Enhanced link emphasis */
html.a11y-links a:not(.scc-btn) { text-decoration: underline; text-underline-offset: 3px; }
/* Larger interactive controls */
html.a11y-targets .scc-btn, html.a11y-targets input, html.a11y-targets textarea, html.a11y-targets select { min-height: 54px; }
html.a11y-targets .primary-nav a, html.a11y-targets .footer a { padding-block: .8rem; }
/* Readable spacing */
html.a11y-spacing body { line-height: 1.9; letter-spacing: .015em; word-spacing: .06em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.35em; }
/* Pause non-essential motion */
html.a11y-motion-off *, html.a11y-motion-off *::before, html.a11y-motion-off *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* Trigger button (utility header) */
.a11y-trigger { display:inline-flex; align-items:center; gap:.45ch; background:transparent; border:0; color:#EAF1ED; font:inherit; font-weight:600; cursor:pointer; padding:.2rem .3rem; border-radius:6px; }
.a11y-trigger:hover { text-decoration: underline; }
/* Panel */
.a11y-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(92vw, 360px); background: var(--paper);
  box-shadow: var(--shadow-lg); z-index: 210; transform: translateX(100%); transition: transform .25s var(--ease);
  padding: 1.25rem 1.35rem 2rem; overflow-y: auto; display:flex; flex-direction:column; gap: 1rem; }
.a11y-panel.is-open { transform: translateX(0); }
.a11y-panel[hidden] { display:flex; }
.a11y-backdrop { position: fixed; inset:0; background: rgba(27,55,45,.4); z-index: 209; opacity:0; visibility:hidden; transition:opacity .2s; }
.a11y-backdrop.is-open { opacity:1; visibility:visible; }
.a11y-panel__head { display:flex; align-items:center; justify-content:space-between; }
.a11y-panel__head h2 { font-size: var(--step-1); margin:0; }
.a11y-close { background: var(--cream-2); border:0; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.a11y-group { border-top: 1px solid var(--cream-2); padding-top: .9rem; }
.a11y-group h3 { font-size: var(--step-0); margin:0 0 .5rem; }
.a11y-seg { display:flex; gap:.4rem; }
.a11y-seg button { flex:1; min-height:44px; border:1.5px solid var(--cream-3); background:var(--paper); border-radius:var(--radius-sm); font:inherit; font-weight:600; cursor:pointer; color:var(--ink); }
.a11y-seg button[aria-pressed="true"] { background: var(--forest); color:#fff; border-color: var(--forest); }
.a11y-toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; }
.a11y-toggle span { font-weight:600; }
.a11y-switch { position:relative; width:52px; height:30px; border-radius:999px; border:0; background:var(--cream-3); cursor:pointer; flex:none; transition:background .15s; }
.a11y-switch::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow: var(--shadow-sm); }
.a11y-switch[aria-pressed="true"] { background: var(--forest); }
.a11y-switch[aria-pressed="true"]::after { transform: translateX(22px); }
.a11y-reset { margin-top:.4rem; }

/* ---------- Conversion popup ---------- */
.popup-backdrop { position: fixed; inset:0; background: rgba(27,55,45,.55); z-index: 200; opacity:0; transition: opacity .25s var(--ease); }
.popup-backdrop.is-open { opacity:1; }
.popup-backdrop[hidden] { display:none; }
.popup { position: fixed; z-index: 201; top:50%; left:50%; transform: translate(-50%,-46%); width:min(94vw, 760px); max-height:92vh; overflow:auto; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity:0; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.popup.is-open { opacity:1; transform: translate(-50%,-50%); }
.popup[hidden] { display:none; }
.popup__close { position:absolute; top:.6rem; right:.6rem; z-index:2; width:44px; height:44px; border-radius:50%; background: var(--paper); border:1px solid var(--cream-3); display:grid; place-items:center; cursor:pointer; color:var(--ink); box-shadow: var(--shadow-sm); }
.popup__close:hover { background: var(--cream-2); }
.popup__grid { display:grid; grid-template-columns: 5fr 7fr; }
.popup__media { background-size:cover; background-position:center; min-height:100%; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.popup__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.popup__body h2 { font-size: var(--step-2); margin:.1rem 0 .5rem; }
.popup__lead { color: var(--ink-soft); }
.popup__usps { list-style:none; margin:.6rem 0 1rem; padding:0; display:grid; gap:.4rem; }
.popup__usps li { display:flex; align-items:center; gap:.5ch; font-weight:600; color:var(--ink); }
.popup__usps .scc-icon { color: var(--forest); flex:none; }
.popup__form { background:none; border:0; box-shadow:none; padding:0; }
@media (max-width: 40rem){ .popup__grid { grid-template-columns:1fr; } .popup__media { display:none; } }
@media (prefers-reduced-motion: reduce){ .popup, .popup-backdrop { transition:none; } }

/* ---------- Google Reviews (right-to-left marquee) ---------- */
.greviews__head { text-align:center; margin-bottom: var(--sp-4); }
.greviews__badge { display:inline-flex; align-items:center; gap:.55ch; font-weight:700; font-size:var(--step-1); color:var(--ink); margin:0; }
.greviews__g { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--cream-3); color:#4285F4; font-weight:800; font-family:Arial,Helvetica,sans-serif; font-size:15px; }
.greviews__on { font-weight:600; color:var(--ink-soft); font-size:var(--step-0); }
.greviews__intro { color:var(--ink-soft); max-width:56ch; margin:.6rem auto 0; }
.greviews__viewport { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.greviews__track { list-style:none; margin:0; padding:.5rem 0; display:flex; gap: var(--sp-4); width:max-content; animation: greviews-scroll 46s linear infinite; }
.greviews[data-paused="true"] .greviews__track, .greviews.is-tab-hidden .greviews__track,
.greviews__viewport:hover .greviews__track, .greviews__viewport:focus-within .greviews__track { animation-play-state: paused; }
@keyframes greviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.greview { flex:0 0 auto; width: 340px; max-width:82vw; background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding: var(--sp-4); }
.greview__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.greview__g { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--cream-3); font-weight:800; color:#4285F4; font-family:Arial,Helvetica,sans-serif; font-size:13px; }
.greview__text { color:var(--ink-soft); margin:0 0 .8rem; }
.greview__author { font-weight:700; color:var(--ink); margin:0; }
.greview__when { display:block; font-weight:500; color:var(--ink-mute); font-size:var(--step--1); }
.greviews__controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top: var(--sp-4); flex-wrap:wrap; }
.greviews__pp { background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius-pill); padding:.5rem 1rem; min-height:44px; font:inherit; font-weight:600; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; gap:.45ch; }
.greviews__pp:hover { background:var(--forest-050); }
.greviews__g--light { width:22px; height:22px; font-size:13px; }
@media (prefers-reduced-motion: reduce){
  .greviews__track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .greviews__viewport { -webkit-mask:none; mask:none; }
  .greview[aria-hidden="true"]{ display:none; }
  .greviews__pp { display:none; }
}

/* ---------- FAQ accordion ---------- */
/* ---------- The Seasons Difference (editorial differentiator section) ---------- */
.scc-difference { display:grid; gap: var(--sp-5); }
.scc-difference__lead { max-width:46ch; margin-inline:auto; text-align:center; }
.scc-difference__lead p { margin:0; font-family: var(--font-serif); font-size: var(--step-2); line-height:1.28; color: var(--ink); }
.scc-difference__cards { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 48rem){ .scc-difference__cards { grid-template-columns: 1fr; } }
.scc-difference__card { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4); display:grid; gap:.4rem; align-content:start; }
.scc-difference__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:14px; background: var(--gold-050); color: var(--clay-600); }
.scc-difference__card h3 { margin:.2rem 0 0; font-family: var(--font-serif); font-size: var(--step-1); line-height:1.25; color: var(--ink); }
.scc-difference__card p { margin:0; color: var(--ink-soft); font-size: var(--step--1); }
.scc-difference__clinical { background: var(--forest-800); color:#DCE8E2; border-radius: var(--radius-lg); padding: var(--sp-4); }
.scc-difference__clinicaltitle { display:flex; align-items:center; gap:.5ch; margin:0 0 .9rem; font-family: var(--font-serif); font-size: var(--step-1); color:#fff; }
.scc-difference__clinicaltitle .scc-icon { color: var(--gold); }
.scc-difference__clinical ul { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 52rem){ .scc-difference__clinical ul { grid-template-columns: 1fr; } }
.scc-difference__clinical li { display:flex; gap:.7rem; align-items:flex-start; }
.scc-difference__clinical li .scc-icon { color: var(--gold); }
.scc-difference__clinical strong { display:block; color:#fff; font-size: var(--step-0); }
.scc-difference__clinical span span, .scc-difference__clinical div span { display:block; color:#B7C8BF; font-size: var(--step--1); }
.scc-difference__cta { display:flex; gap:.7rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.scc-difference__phone { color: var(--ink-soft); font-size: var(--step--1); }

/* Answer centre: featured lead answer + category groups */
.scc-faqcentre { max-width: 62rem; margin-inline:auto; display:grid; gap: var(--sp-5); }
.scc-faqcentre__featured { background: linear-gradient(180deg, var(--cream-2), var(--paper)); border:1px solid var(--cream-3); border-left:4px solid var(--clay); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-4) var(--sp-4); }
.scc-faqcentre__badge { display:inline-flex; align-items:center; gap:.45ch; margin:0 0 .4rem; font-size:var(--step--1); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--clay-600); }
.scc-faqcentre__badge .scc-icon { color: var(--clay); }
.scc-faqcentre__featured h3 { margin:0 0 .5rem; font-family: var(--font-serif); font-size: var(--step-2); line-height:1.2; color: var(--ink); }
.scc-faqcentre__featured p { margin:0 0 1rem; color: var(--ink-soft); }
.scc-faqcentre__grouptitle { margin:0 0 .8rem; font-family: var(--font-serif); font-size: var(--step-1); color: var(--forest-700); border-bottom:1px solid var(--cream-3); padding-bottom:.45rem; }
.scc-faqcentre__foot { text-align:center; color: var(--ink-soft); font-size: var(--step--1); margin:0; }
.scc-faq { max-width: 62rem; margin-inline:auto; display:grid; gap:.75rem; }
.scc-faq__item { background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); overflow:hidden; }
.scc-faq__q { margin:0; font-size: inherit; }
.scc-faq .accordion__trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; background:none; border:0; cursor:pointer; padding:1.05rem 1.25rem; font-family:var(--font-serif); font-size:var(--step-1); font-weight:600; color:var(--ink); min-height:56px; }
.scc-faq .accordion__trigger:hover { color: var(--forest-700); }
.scc-faq__caret { transition: transform .2s var(--ease); flex:none; color:var(--clay-600); }
.scc-faq .accordion__trigger[aria-expanded="true"] .scc-faq__caret { transform: rotate(180deg); }
.scc-faq__a { padding: 0 1.25rem 1.15rem; }
.scc-faq__a p { margin:0; color: var(--ink-soft); }

/* ---------- Cookie consent (elegant light surface, high contrast) ---------- */
.cookie-consent { position: fixed; left:0; right:0; bottom:0; z-index: 120; background: var(--paper); color: var(--ink); border-top: 3px solid var(--gold); box-shadow: 0 -8px 28px rgba(38,50,48,.16); }
/* At 200% zoom, or 320px with the text wrapped over several lines, the notice could grow taller
   than the viewport with no way to reach the buttons. Cap it and let it scroll internally so the
   actions are always reachable. WCAG 2.2 reflow. */
.cookie-consent { max-height: 80vh; overflow-y: auto; }
.cookie-consent[hidden]{ display:none; }
.cookie-consent__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; padding-block:1rem; }
.cookie-consent__text { margin:0; font-size:.93rem; max-width:66ch; color: var(--ink-soft); }
.cookie-consent__text strong { color: var(--ink); }
.cookie-consent__text a { color: var(--forest-700); text-decoration:underline; font-weight:600; }
.cookie-consent__actions { display:flex; gap:.55rem; flex-wrap:wrap; }
.cookie-consent .scc-btn--ghost { color: var(--forest-700); border-color: var(--forest); }
.cookie-consent .scc-btn--ghost:hover { background: var(--forest-050); }
@media (max-width: 68rem){ .cookie-consent { bottom: calc(4.7rem + env(safe-area-inset-bottom)); } }
@media (max-width: 40rem){ .cookie-consent__actions .scc-btn { flex:1; } }
.cookie-prefs { position: fixed; z-index: 215; top:50%; left:50%; transform:translate(-50%,-50%); width:min(94vw,440px); max-height:88vh; overflow-y:auto; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:1.4rem; }
.cookie-prefs[hidden]{ display:none; }
.cookie-prefs__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.cookie-prefs__head h2 { margin:0; font-size:var(--step-1); }
.cookie-prefs__actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.4rem; }
.cookie-prefs__actions .scc-btn { flex:1 1 auto; justify-content:center; } /* Accept & Reject equal weight — no dark pattern */
.cookie-prefs-backdrop { position:fixed; inset:0; background:rgba(27,55,45,.45); z-index:214; }
.cookie-prefs-backdrop[hidden]{ display:none; }

/* dev fixture ribbon (contained env only) */
.scc-dev-fixtures .env-ribbon {
  position: fixed; bottom: 8px; left: 8px; z-index: 80; background: var(--warn); color:#fff;
  font-size: 11px; font-weight:700; padding:.25rem .5rem; border-radius: 6px; opacity:.85; pointer-events:none;
}
@media (max-width: 46rem){ .scc-dev-fixtures .env-ribbon { bottom: 4.7rem; } }

/* ---------- About / Founder (ABOUT-01) ---------- */
.scc-founder { display:grid; gap: var(--sp-5); }
.scc-founder__intro { display:grid; grid-template-columns: minmax(0,20rem) minmax(0,1fr); gap: var(--sp-5); align-items:start; }
@media (max-width: 56rem){ .scc-founder__intro { grid-template-columns: 1fr; } }

.scc-founder__portrait { margin:0; display:grid; gap:.6rem; }
.scc-founder__portrait img,
.scc-founder__ph { width:100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius-lg); box-shadow: var(--shadow); display:block; }
/* First-party placeholder — final aspect ratio and crop, so the real photograph is a drop-in swap. */
.scc-founder__ph { display:grid; place-items:center; background: linear-gradient(155deg, var(--forest-050), var(--cream-2) 55%, var(--gold-050)); border:1px solid var(--cream-3); }
.scc-founder__monogram { font-family: var(--font-serif); font-size: clamp(3rem, 9vw, 4.6rem); letter-spacing:.06em; color: var(--forest-700); opacity:.55; }
/* --ink-mute is calibrated against --cream; this caption sits on the darker --cream-2 tint, where
   it measured 4.08:1. --ink-soft keeps small caption text above 4.5:1 on either background. */
.scc-founder__portrait figcaption { font-size: var(--step--1); color: var(--ink-soft); text-align:center; }

.scc-founder__lead { display:grid; gap:.35rem; align-content:start; }
.scc-founder__name { margin:.15rem 0 0; font-family: var(--font-serif); font-size: var(--step-3); line-height:1.12; color: var(--ink); }
.scc-founder__role { margin:0; font-weight:700; color: var(--clay-600); letter-spacing:.01em; }
.scc-founder__summary { margin:.55rem 0 0; color: var(--ink-soft); font-size: var(--step-1); line-height:1.5; }

.scc-founder__creds { list-style:none; margin: var(--sp-4) 0 0; padding:0; display:grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 40rem){ .scc-founder__creds { grid-template-columns: 1fr; } }
.scc-founder__creds li { display:flex; gap:.75rem; align-items:flex-start; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); padding: .85rem .95rem; }
.scc-founder__credicon { display:grid; place-items:center; flex:none; width:2.4rem; height:2.4rem; border-radius:12px; background: var(--forest-050); color: var(--forest-700); }
.scc-founder__creds strong { display:block; font-size: var(--step-0); line-height:1.3; }
.scc-founder__creds span span, .scc-founder__creds div span { display:block; margin-top:.15rem; color: var(--ink-soft); font-size: var(--step--1); }

/* Narrative chapters */
.scc-founderstory { max-width: 60rem; margin-inline:auto; display:grid; gap: var(--sp-5); }
.scc-founderstory__ch { display:grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: var(--sp-3); align-items:start; }
@media (max-width: 40rem){ .scc-founderstory__ch { grid-template-columns: 1fr; gap:.75rem; } }
.scc-founderstory__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:16px; background: var(--gold-050); color: var(--clay-600); }
.scc-founderstory__body h3 { margin:.35rem 0 .5rem; font-size: var(--step-2); line-height:1.2; }
.scc-founderstory__body p { margin:0 0 .8rem; color: var(--ink-soft); }
.scc-founderstory__body p:last-child { margin-bottom:0; }
.scc-founderstory__belief { max-width:52ch; margin: var(--sp-3) auto 0; padding-top: var(--sp-4); border-top:1px solid var(--cream-3); text-align:center; font-family: var(--font-serif); font-size: var(--step-2); line-height:1.32; color: var(--forest-700); }

/* Podcast teaser (About + homepage) */
.scc-podteaser { max-width: 62rem; margin-inline:auto; display:grid; grid-template-columns: minmax(0,14rem) minmax(0,1fr); gap: var(--sp-4); align-items:center; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4); }
@media (max-width: 48rem){ .scc-podteaser { grid-template-columns: 1fr; } }
.scc-podteaser__art { aspect-ratio: 1 / 1; border-radius: var(--radius); background: linear-gradient(155deg, var(--forest-700), var(--forest-800)); display:grid; place-items:center; }
.scc-podteaser__wave { display:flex; align-items:center; gap:.4rem; height:3.5rem; }
.scc-podteaser__wave span { width:.42rem; border-radius: var(--radius-pill); background: var(--gold); display:block; }
.scc-podteaser__wave span:nth-child(1){ height:38%; } .scc-podteaser__wave span:nth-child(2){ height:76%; }
.scc-podteaser__wave span:nth-child(3){ height:100%; } .scc-podteaser__wave span:nth-child(4){ height:62%; }
.scc-podteaser__wave span:nth-child(5){ height:30%; }
.scc-podteaser__body h3 { margin:.1rem 0 .3rem; font-size: var(--step-2); line-height:1.2; }
.scc-podteaser__meta { margin:0 0 .5rem; color: var(--ink-soft); font-size: var(--step--1); }
.scc-podteaser__body > p { margin:0 0 var(--sp-3); color: var(--ink-soft); }
.scc-podteaser__actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.scc-podteaser__note { margin:.85rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }

/* "Where families usually go next" link grid */
.scc-founder__next { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Four across only when each card can still hold a comfortable line length for older readers. */
@media (max-width: 70rem){ .scc-founder__next { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 38rem){ .scc-founder__next { grid-template-columns: 1fr; } }
.scc-founder__next a { display:grid; gap:.3rem; height:100%; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius); padding: var(--sp-3); text-decoration:none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.scc-founder__next a:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.scc-founder__next a .scc-icon { color: var(--clay-600); }
.scc-founder__next strong { font-family: var(--font-serif); font-size: var(--step-1); line-height:1.25; }
.scc-founder__next span { color: var(--ink-soft); font-size: var(--step--1); }
@media (prefers-reduced-motion: reduce){ .scc-founder__next a { transition:none; } .scc-founder__next a:hover { transform:none; } }

/* ---------- Podcasts & Conversations hub (POD-01) ---------- */
.scc-podhub { max-width: 64rem; margin-inline:auto; display:grid; gap: var(--sp-6); }
.scc-podhub__episode { display:grid; grid-template-columns: minmax(0,15rem) minmax(0,1fr); gap: var(--sp-4); align-items:start; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4); }
@media (max-width: 48rem){ .scc-podhub__episode { grid-template-columns: 1fr; } }
.scc-podhub__art { aspect-ratio: 1 / 1; border-radius: var(--radius); background: linear-gradient(155deg, var(--forest-700), var(--forest-800)); display:grid; place-items:center; }
.scc-podhub__head h2 { margin:.1rem 0 .4rem; font-size: var(--step-2); line-height:1.2; }
.scc-podhub__meta { margin:0 0 .75rem; color: var(--ink-soft); font-size: var(--step--1); }
.scc-podhub__summary { margin:0 0 var(--sp-3); color: var(--ink-soft); }
.scc-podhub__actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.scc-podhub__attrib { display:flex; gap:.5rem; align-items:flex-start; margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top:1px solid var(--cream-3); color: var(--ink-soft); font-size: var(--step--1); }
.scc-podhub__attrib .scc-icon { flex:none; color: var(--forest-700); margin-top:.15rem; }
.scc-podhub__phone { color: var(--ink-soft); font-size: var(--step--1); }

.scc-podhub__block h2 { font-size: var(--step-2); margin:0 0 .5rem; }
.scc-podhub__blocklead { margin:0 0 var(--sp-4); color: var(--ink-soft); max-width: 62ch; }
.scc-podhub__block--founder { background: var(--cream-2); border:1px solid var(--cream-3); border-radius: var(--radius-lg); padding: var(--sp-4); }
.scc-podhub__block--founder p { color: var(--ink-soft); margin:0 0 var(--sp-3); }

.scc-podhub__topics { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 44rem){ .scc-podhub__topics { grid-template-columns: 1fr; } }
.scc-podhub__topics li { display:flex; gap:.6rem; align-items:flex-start; color: var(--ink-soft); }
.scc-podhub__topics .scc-icon { flex:none; color: var(--forest-700); margin-top:.2rem; }

.scc-podhub__answers { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-3); }
.scc-podhub__answers li { background: var(--paper); border:1px solid var(--cream-3); border-left:4px solid var(--clay); border-radius: var(--radius); padding: var(--sp-4); }
.scc-podhub__answers h3 { margin:0 0 .45rem; font-size: var(--step-1); line-height:1.25; }
.scc-podhub__answers p { margin:0 0 .7rem; color: var(--ink-soft); }
.scc-podhub__answers a { display:inline-flex; align-items:center; gap:.4ch; font-weight:600; text-decoration:none; }
.scc-podhub__answers a:hover { text-decoration:underline; }

.scc-podhub__chapters { list-style:none; margin:0; padding:0; display:grid; gap:0; border:1px solid var(--cream-3); border-radius: var(--radius); overflow:hidden; background: var(--paper); }
.scc-podhub__chapters li { display:flex; gap:1rem; align-items:baseline; padding:.7rem 1rem; border-bottom:1px solid var(--cream-3); color: var(--ink-soft); }
.scc-podhub__chapters li:last-child { border-bottom:0; }
.scc-podhub__chapters li:nth-child(odd) { background: var(--cream); }
.scc-podhub__t { flex:none; min-width:3.6rem; font-variant-numeric: tabular-nums; font-weight:700; color: var(--clay-600); }

/* ---------- Resident-life gallery: featured image + editorial rail (GAL-01) ---------- */
/* min-width:0 is load-bearing. Grid and flex children default to min-width:auto, which lets a
   scrolling rail expand to its content width instead of scrolling — that produced 2720px of
   horizontal page overflow at a 1280px viewport. Every ancestor of the scroller needs it. */
.scc-rl { display:grid; gap: var(--sp-4); min-width:0; max-width:100%; }
.scc-rl > * { min-width:0; }
.scc-rl__featured { margin:0; display:grid; gap:.55rem; min-width:0; max-width:100%; }
.scc-rl__featurebtn { position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
/* Fixed ratio so nothing shifts while images decode. */
.scc-rl__featurebtn img { display:block; width:100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 40rem){ .scc-rl__featurebtn img { aspect-ratio: 4 / 3; } }
.scc-rl__zoom { position:absolute; right:.85rem; bottom:.85rem; width:2.6rem; height:2.6rem; border-radius:50%; background: rgba(255,255,255,.94); color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow-sm); }
.scc-rl__featured figcaption { color: var(--ink-soft); font-size: var(--step--1); }

.scc-rl__railwrap { min-width:0; max-width:100%; }
.scc-rl__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.scc-rl__count { margin:0; color: var(--ink-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.scc-rl__nav { display:flex; gap:.5rem; }
.scc-rl__btn { width:48px; height:48px; border-radius:50%; border:1px solid var(--cream-3); background: var(--paper); color: var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow: var(--shadow-sm); }
.scc-rl__btn:hover:not(:disabled) { background: var(--forest-050); color: var(--forest-700); border-color: var(--forest-700); }
.scc-rl__btn:disabled { opacity:.4; cursor:default; }
.scc-rl__caret--prev { transform: rotate(180deg); }

/* --- Life at Seasons: pure-CSS continuous photo roll ----------------------
   The viewport clips; the rail is two identical server-rendered sets that
   translate 0 → -50%. Because the track is exactly two equal sets, -50% lands
   the clone set precisely where the original began, so the loop is seamless.
   Spacing is margin-right on every item (NOT flex gap) so that -50% equals one
   whole set width to the pixel — a flex gap would leave a fractional seam. */
.scc-rl__viewport { overflow: hidden; padding: .25rem 0 1rem; }
.scc-rl__rail {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: nowrap; width: max-content;
  animation: scc-rl-roll 130s linear infinite;
  will-change: transform;
}
/* Item widths + margin. Two sets of 16 → track is 2× one set → -50% = one set. */
.scc-rl__item { flex: 0 0 auto; width: 20rem; margin-right: 1rem; display: grid; gap: .4rem; }
@media (max-width: 40rem){ .scc-rl__item { width: 15rem; } }
.scc-rl__thumb { display:block; width:100%; padding:0; border:0; background: var(--forest-050); cursor:zoom-in; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.scc-rl__thumb img { display:block; width:100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--forest-050); }
.scc-rl__cap { margin:0; color: var(--ink-soft); font-size: var(--step--1); }

@keyframes scc-rl-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Pause when the visitor hovers, or tabs a real (non-clone) thumbnail into focus. */
.scc-rl__viewport:hover .scc-rl__rail,
.scc-rl__viewport:focus-within .scc-rl__rail { animation-play-state: paused; }

/* Reduced motion, and the Comfort & Accessibility motion toggle: no animation. The viewport
   becomes a normal horizontal scroll rail and the duplicate clone set is hidden, so every unique
   photograph is still reachable manually and none appears twice. */
@media (prefers-reduced-motion: reduce) {
  .scc-rl__rail { animation: none; width: auto; }
  .scc-rl__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scc-rl__item[data-scc-rl-clone] { display: none; }
}
html.scc-a11y-motion .scc-rl__rail { animation: none; width: auto; }
html.scc-a11y-motion .scc-rl__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.scc-a11y-motion .scc-rl__item[data-scc-rl-clone] { display: none; }

/* Lightbox upgrade: prev/next, caption, position counter */
.scc-noscroll, .scc-noscroll body { overflow:hidden; }
.scc-lightbox__inner { position:relative; display:flex; align-items:center; justify-content:center; gap:1rem; width:100%; height:100%; }
.scc-lightbox__fig { margin:0; display:grid; gap:.6rem; justify-items:center; max-width:92vw; }
.scc-lightbox__fig figcaption { display:grid; gap:.2rem; justify-items:center; color:#EAF1ED; font-size: var(--step--1); text-align:center; max-width:60ch; }
.scc-lightbox__pos { color:#B7C8BF; }
.scc-lightbox__nav { width:52px; height:52px; flex:none; border-radius:50%; border:0; background: rgba(255,255,255,.92); color: var(--ink); font-size:2rem; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow: var(--shadow-sm); }
.scc-lightbox__nav:hover { background:#fff; }
.scc-lightbox__nav[hidden] { display:none; }
@media (max-width: 40rem){
  .scc-lightbox { padding: 1rem; }
  .scc-lightbox__inner { gap:.4rem; }
  .scc-lightbox__nav { position:absolute; bottom:1rem; width:56px; height:56px; }
  .scc-lightbox__nav--prev { left:1rem; }
  .scc-lightbox__nav--next { right:1rem; }
  .scc-lightbox__fig figcaption { padding-bottom:4.5rem; }
}

/* ---------- Gallery pending state (no consent-cleared media yet) ---------- */
.scc-galpending { max-width: 46rem; margin-inline:auto; text-align:center; display:grid; justify-items:center; gap:.85rem; background: var(--paper); border:1px solid var(--cream-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-6) var(--sp-4); }
.scc-galpending__icon { display:grid; place-items:center; width:4rem; height:4rem; border-radius:20px; background: var(--forest-050); color: var(--forest-700); }
.scc-galpending h3 { margin:.2rem 0 0; font-size: var(--step-2); }
.scc-galpending p { margin:0; color: var(--ink-soft); max-width: 52ch; }
.scc-galpending__actions { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:.4rem; }

/* ---------- Our communities: four equal cards, one desktop row ----------
   The previous rule used flex:1 1 300px with wrap, so four cards at a 1216px container broke to
   3 + 1 and left an orphaned second row. An explicit column count is the fix — the count is the
   design intent, so it should be stated rather than emerge from flex-basis arithmetic. */
.scc-communities {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 68rem) { .scc-communities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .scc-communities { grid-template-columns: 1fr; } }

.scc-community {
  display: grid;
  /* body / contact / actions — the three rows align across all four cards regardless of how long
     any individual community name or blurb runs. */
  grid-template-rows: 1fr auto auto;
  gap: .75rem;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--cream-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-3);
}
.scc-community__body { min-width: 0; display: grid; gap: .35rem; align-content: start; }
.scc-community__name { margin: 0; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.2; color: var(--ink); }
.scc-community__addr { font-style: normal; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }
.scc-community__blurb { margin: .2rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }

.scc-community__contact { display: grid; gap: .3rem; padding-top: .6rem; border-top: 1px solid var(--cream-3); min-width: 0; }
.scc-community__link {
  display: flex; align-items: center; gap: .5ch;
  min-height: 40px; min-width: 0;
  color: var(--forest-700); font-size: var(--step--1); font-weight: 600; text-decoration: none;
}
.scc-community__link:hover { color: var(--clay-600); text-decoration: underline; }
.scc-community__link .scc-icon { flex: none; }
/* Long addresses must wrap inside the card rather than widen it. */
.scc-community__link span { min-width: 0; overflow-wrap: anywhere; }

.scc-community__actions { display: grid; gap: .4rem; }
.scc-community__actions .scc-btn { width: 100%; justify-content: center; text-align: center; }
@media (min-width: 40.01rem) and (max-width: 68rem) {
  .scc-community__actions { grid-template-columns: 1fr 1fr; }
}

/* ---------- Google reviews: discrete carousel (supersedes the marquee) ----------
   The marquee took 46s to traverse, which reads as static — the client's report was correct even
   though the animation was technically running. These rules take over when JS upgrades the
   component (.greviews--carousel); the marquee rules above remain the no-JS fallback. */
.greviews--carousel .greviews__viewport { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; scrollbar-width:none; min-width:0; }
.greviews--carousel .greviews__viewport::-webkit-scrollbar { display:none; }
.greviews--carousel .greviews__track { width:auto; min-width:0; animation:none; gap:var(--sp-3); }
.greviews--carousel .greviews__track > li { scroll-snap-align:center; flex:0 0 min(34rem,86%); }
@media (max-width:48rem){ .greviews--carousel .greviews__track > li { flex-basis:88%; } }
.greviews__nav { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:var(--sp-3); }
.greviews__arrow { width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--cream-3); background:var(--paper); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.greviews__arrow:hover { background:var(--forest-050); color:var(--forest-700); border-color:var(--forest-700); }
.greviews__dots { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; justify-content:center; }
.greviews__dot { width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.greviews__dot::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--cream-3); border:1px solid var(--ink-mute); transition:background .18s var(--ease), transform .18s var(--ease); }
.greviews__dot.is-current::before { background:var(--clay); border-color:var(--clay-600); transform:scale(1.25); }
.greviews--static .greviews__viewport { overflow:visible; scroll-snap-type:none; }
.greviews--static .greviews__track { flex-wrap:wrap; justify-content:center; }
.greviews--static .greviews__track > li { flex:1 1 22rem; }
.greviews--static .greviews__nav { display:none; }
@media (prefers-reduced-motion: reduce){ .greviews--carousel .greviews__viewport { scroll-behavior:auto; } .greviews__dot::before { transition:none; } }

/* ==========================================================================
   HERO PHOTO ALBUM — a turning page-book of Seasons photographs
   Replaces the single framed hero image. Client round-2: "a slide book ...
   like book pages are being opened".

   Source photographs are square or 2:3 collages, so the album frames them
   inside a fixed 4:3 page rather than forcing a full-bleed 16:9 crop that
   would cut the subjects out. object-fit:cover + a neutral page mat means a
   portrait and a square page look equally deliberate.
   ========================================================================== */
.scc-album {
  position: relative;
  width: 100%;
  /* Fills the stretched media column so the album's top and bottom line up with the left column.
     aspect-ratio is kept as the floor: it still reserves a stable box before any image decodes
     (zero CLS) and still governs the layout on mobile, where the columns stack and there is no
     sibling height to match. min-height stops a short left column collapsing the album. */
  height: 100%;
  min-height: clamp(20rem, 34vw, 30rem);
  aspect-ratio: 4 / 3;
  perspective: 1600px;              /* the book's depth; restrained on purpose */
  perspective-origin: 0% 50%;       /* spine on the left, pages open rightward */
}
/* The media column is the album's sizing parent once the grid stretches it. */
.hero__media { align-self: stretch; }
.scc-album__stack { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* The page mat: warm paper edge, so a square photo sits on something intentional. */
.scc-album__page {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--cream-3);
  box-shadow: var(--shadow);
  transform-origin: left center;     /* hinge at the spine */
  backface-visibility: hidden;
  /* Stacked pages sit behind the current one, very slightly offset, so the album reads as having
     depth without a literal 3D book model. */
  transform: translateZ(0) rotateY(0deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.scc-album__page img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scc-album__page.is-current { opacity: 1; pointer-events: auto; z-index: 3; }
/* THE NEXT PAGE SITS FULLY OPAQUE DIRECTLY UNDERNEATH — this is what makes it a page turn.
   It previously faded in from opacity 0 while the old page rotated away, which reads as a
   cross-fade with a bit of rotation, not as a book. A real page turn reveals a page that was
   already there: the incoming page is complete and in position, and the outgoing one peels off it. */
.scc-album__page.is-next {
  opacity: 1; z-index: 2;
  transform: none;
  filter: brightness(.985);
}

/* --- the turn itself ------------------------------------------------------
   Only applied once JS has taken over (.is-live), so a no-JS visitor keeps a
   plain static first page instead of a stack mid-animation. */
.scc-album.is-live .scc-album__page {
  transition: transform .85s cubic-bezier(.22,.61,.36,1), opacity .85s var(--ease), filter .85s var(--ease);
}
/* Outgoing page peels off the spine and swings right-to-left, revealing the page beneath.
   It stays fully OPAQUE for most of the arc — a page does not become transparent as it turns —
   and only gives up its opacity at the very end, once it is edge-on and effectively invisible
   anyway. Fading it early is what made this read as a cross-fade. */
.scc-album.is-live .scc-album__page.is-leaving {
  animation: scc-album-turn .9s cubic-bezier(.36,.06,.28,1) forwards;
  transform-origin: left center;
  z-index: 4;
}
@keyframes scc-album-turn {
  0%   { transform: rotateY(0deg);    opacity: 1; box-shadow: var(--shadow); }
  55%  { transform: rotateY(-95deg);  opacity: 1; box-shadow: -26px 16px 42px rgba(27,55,45,.30); }
  85%  { transform: rotateY(-150deg); opacity: 1; box-shadow: -14px 10px 26px rgba(27,55,45,.20); }
  100% { transform: rotateY(-172deg); opacity: 0; box-shadow: none; }
}
/* A soft gradient across the turning page reads as the light falling along a curling sheet. */
.scc-album.is-live .scc-album__page.is-leaving::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(27,55,45,.28) 0%, rgba(27,55,45,0) 22%, rgba(255,255,255,.16) 68%, rgba(255,255,255,.34) 100%);
  pointer-events: none;
}

/* "Photo N of M" exists for screen readers, so it is clipped rather than printed under the hero —
   it was visible text the client did not ask for. Clipped, NOT display:none, or the live region
   would stop being announced. */
.scc-album__status {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- controls (injected by JS) --------------------------------------------
   CLIENT ASKED FOR THIS CONTROL STRIP TO BE REMOVED from the hero, so at rest it is not rendered
   at all — no pill, no dots, nothing over the photograph.

   It is NOT deleted, because auto-advancing content still needs a pause mechanism (WCAG 2.2.2
   Pause, Stop, Hide) and a keyboard user has no hover to fall back on. Instead it is clipped out
   of view and springs back the moment anything inside it takes focus, so tabbing into the hero
   surfaces prev / pause / next exactly when they are needed and never otherwise. Mouse users keep
   pause-on-hover, and reduced-motion users get no autoplay to begin with. */
.scc-album__controls {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .4rem;
  background: rgba(251,247,240,.96);
  border: 1px solid var(--cream-3);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  /* Hidden from sight but still focusable — not display:none, which would drop it from the tab
     order and take the pause mechanism with it. */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.scc-album__controls:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.scc-album__btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--forest-700);
  cursor: pointer; font: inherit; font-size: 1.15rem; line-height: 1;
}
.scc-album__btn:hover { background: var(--forest-050); }
.scc-album__btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.scc-album__dots { display: flex; align-items: center; gap: .3rem; padding: 0 .2rem; }
.scc-album__dot {
  width: 22px; height: 22px; flex: none; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.scc-album__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cream-3); transition: background .18s var(--ease), transform .18s var(--ease);
}
.scc-album__dot[aria-selected="true"]::before { background: var(--clay); transform: scale(1.45); }
.scc-album__dot:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; border-radius: 50%; }

@media (max-width: 48rem) {
  .scc-album { aspect-ratio: 1 / 1; }   /* squares read better than 4:3 on a phone */
  .scc-album__status { bottom: -1.9rem; }
}

/* --- reduced motion -------------------------------------------------------
   No 3D rotation at all: pages cross-fade, and autoplay is off by default so
   nothing moves unless the visitor asks for it. Controls stay fully available. */
@media (prefers-reduced-motion: reduce) {
  .scc-album { perspective: none; }
  .scc-album.is-live .scc-album__page { transition: opacity .2s linear; }
  .scc-album.is-live .scc-album__page.is-leaving { transform: none; box-shadow: var(--shadow); }
  .scc-album__page.is-next { transform: none; filter: none; opacity: 0; }
}
/* Same treatment when the visitor has asked for reduced motion through
   Comfort & Accessibility, which sets this class on <html>. */
html.scc-a11y-motion .scc-album { perspective: none; }
html.scc-a11y-motion .scc-album.is-live .scc-album__page { transition: opacity .2s linear; }
html.scc-a11y-motion .scc-album.is-live .scc-album__page.is-leaving { transform: none; box-shadow: var(--shadow); }
html.scc-a11y-motion .scc-album__page.is-next { transform: none; filter: none; opacity: 0; }

/* (The former .scc-rl--marquee rules were removed with the JavaScript marquee — the roll is now
   pure CSS; see the "continuous photo roll" block above.) */

/* .hero__media img sets aspect-ratio:4/3 for the single-image fallback. Album pages fill their
   page box instead, so the ratio must not fight the explicit height. */
.scc-album__page img { aspect-ratio: auto; }

/* The next page must be fully opaque UNDERNEATH the current one — that is the whole mechanic of a
   page turn, and without it the album reads as a cross-fade.
   Raised specificity and placed last on purpose: the plain `.scc-album__page.is-next` rule earlier
   in this file was measuring as opacity 0 in the browser despite prefers-reduced-motion not
   matching, so it was losing the cascade to something. Rather than guess which rule won, this
   states the intent at a specificity nothing else in the album reaches. The reduced-motion
   overrides below still win because they are more specific again. */
.scc-album.is-live .scc-album__page.is-next { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .scc-album.is-live .scc-album__page.is-next { opacity: 0; }
}
html.scc-a11y-motion .scc-album.is-live .scc-album__page.is-next { opacity: 0; }

/* ==========================================================================
   SEASONS MEMORIES — the large editorial composition above the moving strip.
   Replaces the generic 5-tile featured grid, which read as one oversized
   montage with three offcuts beside it.
   ========================================================================== */
.scc-memories {
  margin: 0;
  padding: clamp(.85rem, 1.6vw, 1.35rem);
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--cream-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.scc-memories__grid {
  display: grid;
  gap: clamp(.6rem, 1.1vw, .9rem);
  /* Lead photograph occupies the left two-thirds and the full height; three supports stack to the
     right. Explicit areas rather than auto-flow so the lead cannot be reflowed into a support slot
     when the image count changes. */
  grid-template-columns: 1.62fr 1fr;
  /* TWO support rows, not three. With three, the supports had to divide the lead photograph's
     height between them and came out 420x161 - a 2.6:1 letterbox crop of a square source, which is
     exactly the unreadable-tile problem this composition exists to solve. Two rows give each
     support roughly 420x255, close enough to the lead's proportions to read as the same family. */
  grid-template-rows: repeat(2, 1fr);
}
.scc-memories__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--forest-050);
  box-shadow: var(--shadow-sm);
}
/* FIXED ratios with object-fit:cover. The sources are square and 2:3 collages of wildly mixed
   proportion, so without this a single portrait file stretches a whole row. The lead gets 4:3
   because a busy collage needs room to read; supports get 1:1 because a square crop of a square
   source loses nothing. */
.scc-memories__frame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.scc-memories__frame--lead { grid-row: 1 / -1; }
.scc-memories__frame--lead img { aspect-ratio: 4 / 3; height: 100%; }

.scc-memories__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  margin-top: .85rem; padding-inline: .2rem;
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.4;
}
.scc-memories__label {
  font-family: var(--font-serif); font-size: var(--step-0); font-weight: 650;
  color: var(--forest-700); letter-spacing: .01em;
}

/* Tablet: lead goes full width on top, supports become a row beneath it. Keeps the supports big
   enough to read rather than shrinking them into unreadable tiles in a narrow side column. */
@media (max-width: 62rem) {
  .scc-memories__grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; }
  .scc-memories__frame--lead { grid-row: auto; grid-column: 1 / -1; }
  .scc-memories__frame--lead img { aspect-ratio: 16 / 10; }
  .scc-memories__frame img { aspect-ratio: 1 / 1; }
}
/* Phone: lead first at full width, supports in a two-column grid. A third support would drop to a
   half-width orphan, so the grid deliberately holds two per row and lets the last one span. */
@media (max-width: 34rem) {
  .scc-memories__grid { grid-template-columns: repeat(2, 1fr); }
  .scc-memories__frame--lead img { aspect-ratio: 4 / 3; }
  .scc-memories__frame:last-child:nth-child(even) { grid-column: 1 / -1; }
  .scc-memories__frame:last-child:nth-child(even) img { aspect-ratio: 16 / 9; }
}

/* --- Hero album must fit the viewport without scrolling ------------------
   Client: part of the right-hand column was cut off below the fold. The album
   was sized only from its column width, so on a shorter laptop viewport (or
   with the WP admin bar taking 32px) its lower edge fell past the fold.
   Capping against vh makes the height viewport-aware; the left column still
   drives the row, so the two stay edge-aligned. */
@media (min-width: 48.01rem) {
  .scc-album {
    min-height: clamp(16rem, 24vw, 22rem);
    /* max-height removed — it capped the album below the media height on short viewports and left
       white paper below the badge. The definitive centred layout below no longer needs it. */
  }
  /* padding-block is set by the definitive hero layout block; not repeated here to avoid a
     conflicting second declaration. */
}

/* An unloaded thumbnail must never read as an empty cream box. */
.scc-rl__thumb { background: var(--forest-050); }
.scc-rl__thumb img { background: var(--forest-050); }

/* --- Smoother, more physical page turn ----------------------------------
   The single-keyframe swing read as a flat rotation. A real page accelerates
   away from the spine, slows as it passes vertical, then falls onto the far
   side — so the curve is split and the page lifts slightly off the book
   (translateZ) through the middle of the arc, which is what sells the
   thickness of the sheet. */
@keyframes scc-album-turn {
  0%   { transform: perspective(1600px) rotateY(0deg) translateZ(0);      opacity: 1; box-shadow: var(--shadow); }
  18%  { transform: perspective(1600px) rotateY(-22deg) translateZ(14px); opacity: 1; box-shadow: -10px 10px 26px rgba(27,55,45,.20); }
  50%  { transform: perspective(1600px) rotateY(-88deg) translateZ(26px); opacity: 1; box-shadow: -30px 18px 48px rgba(27,55,45,.32); }
  78%  { transform: perspective(1600px) rotateY(-140deg) translateZ(14px); opacity: 1; box-shadow: -18px 12px 30px rgba(27,55,45,.22); }
  100% { transform: perspective(1600px) rotateY(-174deg) translateZ(0);   opacity: 0; box-shadow: none; }
}
.scc-album.is-live .scc-album__page.is-leaving {
  /* Longer and eased asymmetrically: quick to lift, unhurried through the top of the arc. */
  animation: scc-album-turn 1.15s cubic-bezier(.42,.02,.34,1) forwards;
}
/* The light gradient sweeps across the sheet as it turns rather than sitting static. */
@keyframes scc-album-sheen {
  0%   { opacity: .10; }
  50%  { opacity: .55; }
  100% { opacity: .05; }
}
.scc-album.is-live .scc-album__page.is-leaving::after {
  animation: scc-album-sheen 1.15s ease-in-out forwards;
}

/* ==========================================================================
   EXIT-INTENT POPUP — progressive intent step + Caring Super Star seal
   ========================================================================== */
.popup--intent .popup__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width: 46rem) { .popup--intent .popup__grid { grid-template-columns: 1fr; } }
.popup__media { position: relative; background-size: cover; background-position: center; min-height: 100%; }
@media (max-width: 46rem) { .popup__media { min-height: 140px; } }

/* The Caring Super Star seal, cropped by CSS window from the original promo graphic.
   The source file is 783x818 and the seal occupies roughly x 45-265, y 12-240. Showing it through
   an overflow:hidden window with a percentage-scaled image means the ORIGINAL FILE IS NEVER
   MODIFIED and no new badge artwork is fabricated — the crop is presentation, not a derivative. */
.popup__award {
  position: absolute; left: .8rem; bottom: .8rem; right: .8rem;
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .7rem .45rem .45rem;
  background: rgba(251,247,240,.95);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.popup__awardcrop {
  position: relative; overflow: hidden; flex: none;
  width: 46px; aspect-ratio: 220 / 228; border-radius: 50%;
}
.popup__awardcrop img {
  position: absolute; width: 356%; height: auto; max-width: none;
  left: -20.5%; top: -5.3%;
}
.popup__awardtxt { font-size: .74rem; line-height: 1.2; color: var(--ink-soft); font-weight: 600; }
.popup__awardtxt strong { display: block; color: var(--forest-700); }

/* --- intent choices --- */
.popup__intents { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.popup__intent {
  width: 100%; display: flex; align-items: flex-start; gap: .7rem; text-align: left;
  padding: .7rem .85rem; min-height: 56px;
  border: 1.5px solid var(--cream-3); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.popup__intent:hover { border-color: var(--forest-700); background: var(--forest-050); }
.popup__intent:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.popup__intentic { color: var(--clay); flex: none; display: grid; place-items: center; margin-top: 1px; }
.popup__intenttxt { display: grid; gap: .1rem; min-width: 0; }
.popup__intenttxt strong { font-weight: 650; line-height: 1.25; }
.popup__intenttxt span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.35; }
.popup__continue {
  margin-top: .9rem; background: none; border: 0; padding: .5rem .2rem; min-height: 44px;
  color: var(--ink-soft); font: inherit; text-decoration: underline; cursor: pointer;
}
.popup__continue:hover { color: var(--ink); }
.popup__continue:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 6px; }

/* --- capture step --- */
.popup__pref { border: 0; padding: 0; margin: 0; }
.popup__pref legend { font-weight: 600; font-size: var(--step--1); padding: 0 0 .35rem; }
.popup__radio { display: inline-flex; align-items: center; gap: .4ch; min-height: 44px; margin-right: 1rem; cursor: pointer; }
.popup__opt { color: var(--ink-mute); font-weight: 400; }
.popup__actions { display: flex; gap: .6rem; margin-top: .3rem; }
.popup__actions .scc-btn { flex: 1 1 auto; }
.popup__actions .scc-btn--ghost { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) { .popup__intent { transition: none; } }

/* --- Recognition badges: consistent frame, native proportions ---------------
   Cards must share one frame size, but the artwork must NOT be stretched to
   fill it — object-fit:contain keeps every badge at its own aspect ratio
   inside a common box. */
.scc-recognition__crop {
  display: block; width: 108px; height: 108px; margin-inline: auto;
  position: relative; overflow: hidden;
}
.scc-recognition__crop img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The Caring Super Star seal is cropped from the original 783x818 promo graphic by a CSS window.
   The seal sits at roughly x 45-265, y 12-240, so the image is scaled to 356% and offset to bring
   just the seal into the frame. The SOURCE FILE IS NEVER MODIFIED — the crop is presentation only,
   which is what keeps this a framing decision rather than fabricated badge artwork. */
.scc-recognition__crop--caring img {
  position: absolute; width: 356%; height: auto; max-width: none; object-fit: fill;
  left: -20.5%; top: -5.3%;
}

/* Recognition cards share one height so the row reads as a set rather than a ragged shelf.
   The badge frame and the link sit at fixed positions; only the blurb flexes. */
.scc-recognition { align-items: stretch; }
.scc-recognition__card { display: flex; flex-direction: column; }
.scc-recognition__blurb { flex: 1 1 auto; }
.scc-recognition__link { margin-top: auto; }
/* The stretch above was not enough on its own — the grid was sizing each card to its own content,
   leaving a 430/430/382 shelf. Making the card fill its track is what actually equalises the row. */
.scc-recognition > .scc-recognition__card { height: 100%; }

/* --- Hero column layout: natural height, vertically centred ---------------
   THE DEFINITIVE VERSION. This replaces three successive attempts that fought each other:
     1. stretch both columns + cut padding      (moved the gap, did not remove it)
     2. natural height + top-align               (put the slack at the bottom = the gap)
     3. stretch media + FLEX the album to fill    (worked at 1440x900 but re-broke elsewhere)

   Attempt 3 was the trap the owner's latest screenshot shows. The media column stretched to the
   content height, but the album carried `max-height: min(30rem, 56vh)`. On a shorter/laptop
   viewport that 56vh cap is SMALLER than the space the flex needs, so the album cannot grow to
   fill it — and the leftover appears as white paper BELOW the "16 residents" badge, inside the
   rounded media card. That is the extra white space.

   The fix is to stop stretching entirely. Each column takes its NATURAL height and the two are
   vertically CENTRED against each other (align-items:center), which is exactly what the owner
   asked for. The media column is then album(4:3) + badge with nothing left over, so there is no
   white space to place — the max-height cap is removed because nothing forces the album past its
   own ratio any more. */
@media (min-width: 48.01rem) {
  .hero__inner { align-items: center; padding-block: clamp(1.25rem, 3vw, 2.5rem); }
  .hero__content { display: block; align-self: center; }
  .hero__media { align-self: center; display: block; }
  .scc-album {
    flex: none;
    height: auto;
    aspect-ratio: 4 / 3;          /* stable box, sized from the column width */
    min-height: 0;
    max-height: none;             /* the 56vh cap is what pushed white space below the badge */
  }
}

/* --- Rating stars: solid, warm gold, aligned --------------------------------
   The stars were rendering as hollow outlines because scc_icon() emits
   fill:none/stroke:currentColor. scc_stars() now ships its own filled path;
   these rules give it the warm accessible gold and consistent spacing, and
   grey (rather than remove) the unearned stars so the denominator stays
   visible at a glance. */
.scc-stars { display: inline-flex; align-items: center; gap: .1rem; vertical-align: middle; line-height: 0; }
.scc-star { display: block; color: var(--cream-3); flex: none; }
.scc-star.is-on { color: #D9A21B; }

/* --- Recognition: three equal cards in ONE desktop row ---------------------
   The grid was `repeat(2, 1fr)` with a 56rem cap, so three cards wrapped to a
   ragged 2+1 (measured 450/450/402 — the odd height was the third card sitting
   alone on its own row, not a within-row mismatch).
   Three explicit equal columns, a wider cap so they are not squeezed, and a
   fixed badge stage so every card's artwork, heading, issuer line, description
   and CTA sit on the same baselines. */
.scc-recognition { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 72rem; }
.scc-recognition__badge { height: 132px; flex: none; }
/* Tablet: two up rather than three squeezed columns, still a deliberate grid. */
@media (max-width: 62rem) { .scc-recognition { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; } }
/* Phone: a clean single column — no ragged wrap. */
@media (max-width: 40rem) { .scc-recognition { grid-template-columns: minmax(0, 1fr); max-width: 26rem; } }

/* --- Google reviews: continuous roll --------------------------------------
   Replaces the discrete carousel. The track is transform-positioned, so the
   viewport clips rather than scrolls and the cards keep a fixed width — a
   percentage width would resize the cards mid-roll as the track grows. */
.greviews--roll .greviews__viewport { overflow: hidden; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
.greviews--roll .greviews__track { width: max-content; animation: none; will-change: transform; }
.greviews--roll .greviews__track > li { flex: 0 0 min(30rem, 82vw); scroll-snap-align: none; }

/* Founder LinkedIn — a person's profile, styled as a credential link rather than a social icon. */
.scc-founder__social { margin: 1rem 0 0; }
.scc-founder__linkedin {
  display: inline-flex; align-items: center; gap: .5ch; min-height: 44px;
  color: var(--forest-700); font-weight: 650; text-decoration: none;
  border-bottom: 1.5px solid var(--cream-3); padding-bottom: .15rem;
}
.scc-founder__linkedin:hover { color: var(--clay-600); border-bottom-color: var(--clay); }
.scc-founder__linkedin:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 4px; }