/* ROUND 128 — Phone heroes (inc/round128.php). Loads after inner.css and the earlier rounds on the pages it covers.
   Pattern, phones only: the photo fills the top half of the viewport; the copy sits in a full-width panel under it
   whose rounded top corners (24px) overlap the photo's foot by 24px; text left-aligned. */
@media (max-width:767px){
  .sh-r128{--sh-r128-h:50svh;--sh-r128-r:24px;--sh-r128-lap:24px}

  /* ---- Accessible Living (.ac-hero: absolute photo, centred cream card, amber tagline) ---- */
  .sh-r128.sh-page-accessible-living .ac-hero{display:flex;flex-direction:column;min-height:0;background:var(--cream)}
  .sh-r128.sh-page-accessible-living .ac-hero__bg{position:relative;inset:auto;z-index:0;height:var(--sh-r128-h);overflow:hidden}
  .sh-r128.sh-page-accessible-living .ac-hero__inner{position:relative;z-index:1;display:block;min-height:0;padding:0;margin-top:calc(-1 * var(--sh-r128-lap))}
  .sh-r128.sh-page-accessible-living .ac-hero__circle{position:static;width:100%;max-width:none;height:auto;border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;padding:48px 24px 40px;gap:20px;text-align:left;align-items:flex-start;animation:none}
  .sh-r128.sh-page-accessible-living .ac-hero__circle .kd__head--c{align-items:flex-start;text-align:left}
  .sh-r128.sh-page-accessible-living .ac-hero__circle .kd__title br{display:none}
  /* the tagline straddles the photo's bottom edge (desktop: it hangs over the hero's foot) */
  .sh-inner.sh-r128.sh-page-accessible-living .ac-hero__tagline{position:absolute;left:24px;top:calc(var(--sh-r128-h) - 30px);z-index:2;margin:0;padding:0;font-size:44px;line-height:44px;white-space:nowrap;text-align:left}

  /* ---- Knockdown & Rebuild (.kd: copy then the before / after compare) ---- */
  .sh-r128.sh-page-knockdown-rebuild .kd__intro{flex-direction:column;gap:0;padding:0}
  .sh-r128.sh-page-knockdown-rebuild .kd__compare{order:-1;flex:none;display:block;width:100%;height:var(--sh-r128-h);position:relative;overflow:hidden}
  .sh-r128.sh-page-knockdown-rebuild .kd__after{margin:0;width:100%;height:100%;aspect-ratio:auto}
  .sh-r128.sh-page-knockdown-rebuild .kd__compare::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(66,64,64,.25) 0,rgba(66,64,64,0) 28%,rgba(66,64,64,0) 55%,rgba(66,64,64,.45) 100%)}
  .sh-r128.sh-page-knockdown-rebuild .kd__before,.sh-r128.sh-page-knockdown-rebuild .kd__cap{display:none}
  .sh-r128.sh-page-knockdown-rebuild .kd__text{position:relative;z-index:1;width:100%;margin-top:calc(-1 * var(--sh-r128-lap));padding:48px 24px 48px;background:var(--cream);border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;align-items:flex-start;text-align:left}

  /* ---- Subdivide & Build (.sd-hero: absolute photo + green wash, white copy) ---- */
  .sh-r128.sh-page-subdivide-and-build .sd-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible;background:var(--slate-green)}
  .sh-r128.sh-page-subdivide-and-build .sd-hero__bg{position:relative;inset:auto;z-index:0;width:100%;height:var(--sh-r128-h);overflow:hidden}
  .sh-r128.sh-page-subdivide-and-build .sd-hero__bg::after{background:linear-gradient(to bottom,rgba(58,70,62,.5) 3.6%,rgba(58,70,62,0) 21.5%)} /* the photo shows whole; the green takes over below it */
  .sh-r128.sh-page-subdivide-and-build .sd-hero__inner{position:relative;z-index:1;margin-top:-96px;border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;background:linear-gradient(to bottom,rgba(99,116,104,.5) 0,var(--slate-green) 120px)}
  .sh-r128.sh-page-subdivide-and-build .sd-hero__text{width:100%;margin:0;padding:128px 24px 56px;gap:20px;align-items:flex-start;text-align:left}
  .sh-r128.sh-page-subdivide-and-build .sd-hero__copy br,.sh-r128.sh-page-subdivide-and-build .sd-hero .kd__title br{display:none}

  /* ---- Build vs Buy (.ch: absolute photo, centred cream card) — tan panel ---- */
  .sh-r128.sh-page-building-vs-buying .ch{display:flex;flex-direction:column;min-height:0;background:var(--tan,#d9d3c3)}
  .sh-r128.sh-page-building-vs-buying .ch__bg{position:relative;inset:auto;z-index:0;height:var(--sh-r128-h);overflow:hidden}
  .sh-r128.sh-page-building-vs-buying .ch__inner{position:relative;z-index:1;display:block;min-height:0;padding:0;margin-top:calc(-1 * var(--sh-r128-lap))}
  .sh-r128.sh-page-building-vs-buying .ch__circle{width:100%;max-width:none;min-height:0;height:auto;border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;background:var(--tan,#d9d3c3);padding:48px 24px 48px;gap:20px;text-align:left;align-items:flex-start}
  .sh-r128.sh-page-building-vs-buying .ch__circle .kd__head--c{align-items:flex-start;text-align:left}
  .sh-r128.sh-page-building-vs-buying .ch .link-btn{align-self:flex-start}

  /* ---- Display Homes (.dh__intro: copy then the hero figure with its caption) ---- */
  .sh-r128.sh-page-display-homes .dh__intro{flex-direction:column;gap:0;padding:0 !important}
  .sh-r128.sh-page-display-homes .dh__hero{display:contents}
  .sh-r128.sh-page-display-homes .dh__hero-link{order:-1;display:block;width:100%;height:var(--sh-r128-h);aspect-ratio:auto;border-radius:0;overflow:hidden}
  .sh-r128.sh-page-display-homes .dh__text{order:0;position:relative;z-index:1;width:100%;margin-top:calc(-1 * var(--sh-r128-lap));padding:48px 24px 24px;background:var(--cream);border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;align-items:flex-start;text-align:left}
  .sh-r128.sh-page-display-homes .dh__caption{order:1;width:100%;margin:0;padding:0 24px 24px}

  /* ---- Story split heroes: About us, Invest in a display home, Our promise (.sy-hero--split: copy then photo) ---- */
  .sh-r128.sh-page-about-sentinel-homes .sy-hero__inner,
  .sh-r128.sh-page-invest-in-a-display-home .sy-hero__inner,
  .sh-r128.sh-page-our-promise .sy-hero__inner{flex-direction:column;gap:0;padding:0}
  .sh-r128.sh-page-about-sentinel-homes .sy-hero__media,
  .sh-r128.sh-page-invest-in-a-display-home .sy-hero__media,
  .sh-r128.sh-page-our-promise .sy-hero__media{order:-1;flex:none;width:100%;max-width:none;height:var(--sh-r128-h);border-radius:0;display:block}
  .sh-r128.sh-page-about-sentinel-homes .sy-hero__media img,
  .sh-r128.sh-page-invest-in-a-display-home .sy-hero__media img,
  .sh-r128.sh-page-our-promise .sy-hero__media img{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:0}
  .sh-r128.sh-page-about-sentinel-homes .sy-hero__text,
  .sh-r128.sh-page-invest-in-a-display-home .sy-hero__text,
  .sh-r128.sh-page-our-promise .sy-hero__text{position:relative;z-index:1;width:100%;margin-top:calc(-1 * var(--sh-r128-lap));padding:48px 24px 48px;background:var(--cream);border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;align-items:flex-start;text-align:left}
  .sh-r128.sh-page-about-sentinel-homes .sy-hero__text .kd__title br{display:none}

  /* ---- Charity Home singles (.ch--charity: absolute photo + wash, centred cream card, location stack) ---- */
  .sh-r128.single-charity_home .ch--charity{display:flex;flex-direction:column;min-height:0;background:var(--cream)}
  .sh-r128.single-charity_home .ch--charity .ch__bg{position:relative;inset:auto;z-index:0;height:var(--sh-r128-h);overflow:hidden}
  .sh-r128.single-charity_home .ch__wash{inset:auto;top:0;left:0;right:0;height:var(--sh-r128-h);z-index:0}
  .sh-r128.single-charity_home .ch--charity .ch__inner{position:relative;z-index:1;display:block;min-height:0;padding:0;margin-top:calc(-1 * var(--sh-r128-lap))}
  .sh-r128.single-charity_home .ch__circle--sm{width:100%;max-width:none;min-height:0;border-radius:var(--sh-r128-r) var(--sh-r128-r) 0 0;padding:48px 24px 24px;gap:20px;text-align:left;align-items:flex-start}
  .sh-r128.single-charity_home .ch__circle--sm .kd__head--c{align-items:flex-start;text-align:left}
  .sh-r128.single-charity_home .chh-hero__stack{position:static;padding:0 24px 40px}
  .sh-r128.single-charity_home .chh-hero__label,.sh-r128.single-charity_home .chh-hero__line{color:var(--charcoal)}

  /* ---- Broader Outcomes (.sy-hero--decor: absolute photo + wash, pill / amber title / line) ---- */
  .sh-r128.sh-page-broader-outcomes .sy-hero--decor{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible;background:var(--charcoal)}
  .sh-r128.sh-page-broader-outcomes .sy-hero__bgwrap{position:relative;inset:auto;z-index:0;isolation:isolate;height:var(--sh-r128-h);overflow:hidden}
  .sh-r128.sh-page-broader-outcomes .sy-hero__wash{inset:auto;top:0;left:0;right:0;height:var(--sh-r128-h);z-index:0;background:linear-gradient(to bottom,rgba(66,64,64,0) 45%,var(--charcoal) 100%)}
  /* the stack rises so the amber line sits half on the photo, half on the charcoal (pill 24 + gap 8 + half of 44) */
  .sh-r128.sh-page-broader-outcomes .sy-hero__stack{position:relative;z-index:1;margin-top:-54px;padding:0 24px 48px;gap:8px}
}

/* ---- Blog single hero (single.php), every width: photo on top (16:9, never taller than its width or 720px) fading
        into the charcoal; the title block on the charcoal, overlapping the photo's foot; "← Back" eyebrow. ---- */
.sh-r128.single-post .bp__hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0;overflow:visible;background:var(--charcoal)}
.sh-r128.single-post .bp__bgwrap{position:relative;inset:auto;width:100%;aspect-ratio:16 / 9;max-height:min(100vw,720px);overflow:hidden}
.sh-r128.single-post .bp__bgwrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(40,38,38,.35) 0,rgba(40,38,38,0) 28%,rgba(66,64,64,0) 55%,var(--charcoal) 100%)}
.sh-r128.single-post .bp__wash{display:none}
.sh-r128.single-post .bp__head{position:relative;z-index:1;margin:-120px auto 0;padding:0 var(--global-padding) 64px}
.sh-r128.single-post .bp__hero--plain{padding:calc(var(--nav-h,120px) + 48px) var(--global-padding) 64px;background:var(--cream)}
.sh-r128.single-post .bp__hero--plain .bp__head{margin:0 auto;padding:0}
.sh-r128.single-post .bp__back{display:inline-flex;align-items:center;gap:6px}
@media (max-width:767px){
  .sh-r128.single-post .bp__hero{min-height:0;padding:0}
  .sh-r128.single-post .bp__bgwrap{aspect-ratio:1 / 1}
  .sh-r128.single-post .bp__head{margin-top:-96px;padding:0 24px 48px}
}