/**
 * Supporting the sector (/supporting-the-sector/): a section-landing page.
 * Full-width Beaver Builder custom-module sections, enqueued on the page by
 * inc/hos-ss.php. Standard site chrome (matches the signed-off wireframe).
 * Design-system tokens throughout. Button and link anchors are coloured with
 * !important so they hold inside the front-end .fl-ds-page wrapper (GOTCHA 6).
 * All body copy on this page is signed-off PLACEHOLDER pending HOS final words.
 */

.hos-ss-section { padding: clamp(36px, 5vw, 64px) 0; }

/* Buttons */
.hos-ss-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; border-radius: var(--ds-radius-pill); border: 2px solid transparent; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-base); line-height: 1; }
a.hos-ss-btn { text-decoration: none !important; }
a.hos-ss-btn--light { background: var(--ds-color-white); color: var(--ds-color-heading) !important; }
a.hos-ss-btn--light:hover { background: var(--ds-color-surface); color: var(--ds-color-heading) !important; }
a.hos-ss-btn--outline { background: transparent; border-color: var(--ds-color-white); color: var(--ds-color-white) !important; }
a.hos-ss-btn--outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--ds-color-white) !important; }

/* Text CTA link (arrow) */
a.hos-ss-cta { display: inline-flex; align-items: center; color: var(--ds-color-red-dark) !important; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-base); text-decoration: none !important; }
a.hos-ss-cta::after { content: '\2192'; margin-left: 8px; }
a.hos-ss-cta:hover { color: var(--ds-color-red-hover) !important; text-decoration: underline !important; }

/* Placeholder note */
.hos-ss-ph { margin: 0; font-size: var(--ds-text-sm); font-style: italic; color: var(--ds-color-muted); }

/* Hero */
.hos-ss-hero { background: var(--ds-color-red-core); padding: clamp(48px, 7vw, 88px) 0; }
.hos-ss-hero__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-direction: column; gap: var(--ds-space-lg); }
.fl-ds-page .hos-ss-hero h1 { margin: 0; color: var(--ds-color-white); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: var(--ds-letter-display); }
.hos-ss-hero__intro { margin: 0; max-width: 54ch; font-size: clamp(1.5rem, 2.2vw, 1.625rem); line-height: var(--ds-line-lead); color: var(--ds-color-white); }
.hos-ss-media { aspect-ratio: 4 / 3; border-radius: var(--ds-radius-lg); background: linear-gradient(135deg, var(--ds-color-blue-tint), var(--ds-color-orange-tint)); display: flex; align-items: center; justify-content: center; }
.hos-ss-media span { font-size: var(--ds-text-sm); color: var(--ds-color-muted); }

/* Strands */
.hos-ss-strands__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-ss-strands h2 { margin: 0 0 var(--ds-space-xs); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.15; color: var(--ds-color-heading); }
.hos-ss-strands__intro { margin: 0 0 var(--ds-space-xl); max-width: 68ch; font-size: var(--ds-text-lead); color: var(--ds-color-body); }
.hos-ss-strands__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
.hos-ss-strand { border-radius: var(--ds-radius-lg); padding: clamp(24px, 2.8vw, 34px); display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-ss-strand--blue { background: var(--ds-color-blue-tint); }
.hos-ss-strand--orange { background: var(--ds-color-orange-tint); }
.hos-ss-strand--green { background: var(--ds-color-green-tint); }
.hos-ss-strand__icon { width: 40px; height: 40px; color: var(--ds-color-heading); }
.hos-ss-strand h3 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h4); line-height: 1.25; color: var(--ds-color-heading); }
.hos-ss-strand__desc { margin: 0; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.hos-ss-list li { display: flex; align-items: flex-start; gap: var(--ds-space-sm); font-size: var(--ds-text-sm); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-ss-list__tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); color: var(--ds-color-white); }
.hos-ss-list__tick svg { width: 14px; height: 14px; }
.hos-ss-strand__cta { margin-top: auto; padding-top: var(--ds-space-sm); }
.hos-ss-strands__note { margin: var(--ds-space-lg) 0 0; font-size: var(--ds-text-sm); font-style: italic; color: var(--ds-color-muted); }

/* Coming Home */
.hos-ss-coming__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hos-ss-coming__text { display: flex; flex-direction: column; gap: var(--ds-space-sm); align-items: flex-start; }
.hos-ss-coming__eyebrow { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-color-muted); }
.hos-ss-coming h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; color: var(--ds-color-heading); }
.hos-ss-coming__body { margin: 0; max-width: 56ch; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }

/* Newsletter (global [hos_newsletter] panel) */
.hos-ss-newsletter__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }

/* Contact CTA: full-width dark band (matches Our Services / the wireframe) */
.hos-ss-contact { background: var(--ds-color-blue-dark); padding: clamp(48px, 7vw, 88px) 0; }
.hos-ss-contact__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-ss-contact__panel { display: flex; flex-wrap: wrap; gap: var(--ds-space-xl); align-items: center; justify-content: space-between; }
.hos-ss-contact__text { flex: 1 1 440px; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.hos-ss-contact h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.15; color: var(--ds-color-white); }
.hos-ss-contact__text p { margin: 0; max-width: 48ch; font-size: var(--ds-text-intro); line-height: 1.6; color: var(--ds-color-white); }
/* Keep the text white inside the Beaver Builder editor too (the builder's own
   heading/paragraph colours load later there and were turning it dark). */
.hos-ss-contact h2, .hos-ss-contact .hos-ss-contact__text p { color: var(--ds-color-white) !important; }
.hos-ss-contact__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: var(--ds-space-md); align-items: center; }

@media (max-width: 900px) {
	.hos-ss-hero__inner { grid-template-columns: 1fr; }
	.hos-ss-hero__media { order: -1; }
	.hos-ss-strands__grid { grid-template-columns: 1fr; }
	.hos-ss-coming__inner { grid-template-columns: 1fr; }
	.hos-ss-coming__media { order: -1; }
	.hos-ss-contact__panel { grid-template-columns: 1fr; }
	.hos-ss-contact__actions { justify-content: flex-start; }
}

/* ---- 14 Sept: final-content refit (white cards + coloured accent, lead, testimonials, research detail) ---- */
.hos-ss-strands__inner .hos-ss-lead { max-width: 820px; margin: 0 auto var(--ds-space-xl); }
.hos-ss-lead p { margin: 0 0 var(--ds-space-md); font-size: var(--ds-text-lead); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-ss-lead__quote { margin: var(--ds-space-lg) 0 0; padding: var(--ds-space-lg); background: var(--ds-color-blue-tint); border-radius: var(--ds-radius-lg); }
.hos-ss-lead__quote p { margin: 0 0 var(--ds-space-sm); font-style: italic; font-size: var(--ds-text-lead); line-height: 1.55; color: var(--ds-color-blue-dark); }
.hos-ss-lead__quote cite { font-style: normal; font-weight: var(--ds-weight-semibold); color: var(--ds-color-blue-dark); }
/* Tinted card fills matching the signed-off wireframe (15 Sept: reverted the
   14 Sept white-card refit, which did not match the wireframe's tinted cards). */
.hos-ss-strand { border: 1px solid transparent; }
.hos-ss-strand--blue { background: #e2f3f1; border-color: #b6dcd8; }
.hos-ss-strand--orange { background: #fdece0; border-color: #f0cdb2; }
.hos-ss-strand--green { background: #e6f2e5; border-color: #c2ddc0; }
.hos-ss-strand__icon { color: var(--ds-color-blue-dark); }
/* quotes: 3-up, matching the Our Services page quote cards (15 Sept) */
.hos-ss-quotes { max-width: var(--ds-width-container); margin: var(--ds-space-xl) auto 0; padding: 0 var(--ds-space-gutter); }
.hos-ss-quote { background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-panel); display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-ss-quote p { margin: 0; font-size: var(--ds-text-quote-sm); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-ss-quote cite { font-style: normal; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-color-muted); }
/* research detail: full-width grey band with an H2 (15 Sept) */
.hos-ss-research { background: var(--ds-color-surface); }
.hos-ss-research__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-ss-research__inner > h2 { margin: 0 0 var(--ds-space-lg); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; color: var(--ds-color-heading); }
.hos-ss-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.hos-ss-detail h3 { margin: 0 0 var(--ds-space-sm); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h4); color: var(--ds-color-heading); }
.hos-ss-detail p { margin: var(--ds-space-md) 0 0; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-ss-rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.hos-ss-rlist li { position: relative; padding-left: 18px; font-size: var(--ds-text-sm); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-ss-rlist li::before { content: '\2013'; position: absolute; left: 0; color: var(--ds-color-red-dark); font-weight: 700; }
@media (max-width: 900px) {
	.hos-ss-quotes { grid-template-columns: 1fr; }
	.hos-ss-detail__grid { grid-template-columns: 1fr; }
}

/* 14 Sept fix: the DS resets .fl-ds-block blockquote{padding:0;border:none} and
   .fl-ds-block p{margin:0} at 0,1,1, which stripped the padding/border/inner
   spacing from our quote boxes. Re-apply scoped under .fl-ds-page (0,2,x) so it
   holds on the front end. Also open up the heading-to-cards gap. */
.fl-ds-page .hos-ss-lead p { margin: 0 0 var(--ds-space-md); }
.fl-ds-page .hos-ss-lead__quote { padding: var(--ds-space-panel); }
.fl-ds-page .hos-ss-lead__quote p { margin: 0 0 var(--ds-space-sm); }
.fl-ds-page .hos-ss-lead__quote cite { display: block; }
.fl-ds-page .hos-ss-quote { padding: var(--ds-space-panel); border: 1px solid var(--ds-color-border); }
.fl-ds-page .hos-ss-quote p { margin: 0; }
.fl-ds-page .hos-ss-quote cite { display: block; }
.hos-ss-strands h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.fl-ds-page .hos-ss-detail p { margin-top: var(--ds-space-md); }



/* ---- 15 Sept: card link weight, quote carousel, research image rows, coming-home photo ---- */

/* Card CTA links bold (scope under .fl-ds-page to beat the DS link rule, like the Our Services cards) */
.fl-ds-page a.hos-ss-cta { font-weight: var(--ds-weight-semibold); }

/* Quote carousel (fixed height: flex track makes all slides equal to the tallest) */
.hos-ss-carousel__viewport { overflow: hidden; }
.hos-ss-carousel__track { display: flex; align-items: stretch; transition: transform 0.45s ease; }
.hos-ss-carousel__slide { flex: 0 0 100%; display: flex; justify-content: center; padding: var(--ds-space-xs); }
.hos-ss-carousel__slide .hos-ss-quote { width: 100%; max-width: 760px; }
.hos-ss-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-md); margin-top: var(--ds-space-lg); }
.hos-ss-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-color-border); background: var(--ds-color-white); color: var(--ds-color-heading); cursor: pointer; }
.hos-ss-carousel__btn svg { width: 20px; height: 20px; }
.hos-ss-carousel__dots { display: flex; gap: var(--ds-space-sm); }
.hos-ss-carousel__dot { width: 11px; height: 11px; border-radius: var(--ds-radius-pill); border: none; background: var(--ds-color-border-hover); cursor: pointer; padding: 0; }
.hos-ss-carousel__dot[aria-current="true"] { background: var(--ds-color-red-core); }
/* DS reset paints every builder <button> as a red pill with white text; force ours back */
.fl-ds-page .hos-ss-carousel__btn { border: 1px solid var(--ds-color-border) !important; border-radius: var(--ds-radius-pill) !important; background: var(--ds-color-white) !important; color: var(--ds-color-heading) !important; min-height: 0 !important; box-shadow: none !important; }
.fl-ds-page .hos-ss-carousel__btn:hover { background: var(--ds-color-surface) !important; }
.fl-ds-page .hos-ss-carousel__dot { border: 0 !important; border-radius: var(--ds-radius-pill) !important; background: var(--ds-color-border-hover) !important; min-height: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fl-ds-page .hos-ss-carousel__dot[aria-current="true"] { background: var(--ds-color-red-core) !important; }

/* Research: two alternating text/image rows */
.hos-ss-rrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hos-ss-rrow + .hos-ss-rrow { margin-top: clamp(32px, 5vw, 60px); }
.hos-ss-rrow__text h3 { margin: 0 0 var(--ds-space-md); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h4); color: var(--ds-color-heading); }
.hos-ss-rrow__text p { margin: var(--ds-space-md) 0 0; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-ss-rrow__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-radius-lg); display: block; }
.fl-ds-page .hos-ss-rrow__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Coming Home teaser photo (replaces the placeholder box) */
.hos-ss-coming__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-radius-lg); display: block; }
.fl-ds-page .hos-ss-coming__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
	.hos-ss-rrow { grid-template-columns: 1fr; }
	.hos-ss-rrow--rev .hos-ss-rrow__media { order: -1; }
	.hos-ss-contact__actions { justify-content: flex-start; }
}

/* 15 Sept: carousel arrows hidden for now, dots only. */
.hos-ss-carousel__btn { display: none; }

/* =====================================================================
   23 Sept 2026 (client design edits): two-column body with a sticky
   "Keep in touch" box on the right (split layout at the end of this file), photos on the three cards, Moira's
   pulled quote + partner-quote carousel, publication covers, body text at
   the same size as the service pages, round bullets.
   ===================================================================== */
.hos-ss-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 68px); }
.hos-ss-block { display: flex; flex-direction: column; gap: var(--ds-space-lg); }
.fl-ds-page .hos-ss-block > h2 { margin: 0 !important; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.2; color: var(--ds-color-heading); }
.fl-ds-page .hos-ss-block h3 { margin: 0 !important; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h4); line-height: 1.25; color: var(--ds-color-heading); }

/* Body text at service-page size (was the larger lead size). */
.hos-ss-main .hos-ss-lead { max-width: none; margin: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.fl-ds-page .hos-ss-main .hos-ss-lead p { margin: 0 !important; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }

/* Three cards, photo on top */
.hos-ss-main .hos-ss-strands__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hos-ss-main .hos-ss-strand { padding: 0; gap: 0; overflow: hidden; }
.hos-ss-strand__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fl-ds-page .hos-ss-strand__img { height: auto; }
.hos-ss-strand__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ds-space-sm); padding: clamp(20px, 2.4vw, 26px); }
.fl-ds-page .hos-ss-strand__desc { margin: 0 !important; }

/* Moira's pulled quote (same pattern as the broker quotes on service pages) */
.hos-ss-person { background: var(--ds-color-surface); border-radius: var(--ds-radius-lg); padding: var(--ds-space-panel); display: flex; flex-wrap: wrap; gap: var(--ds-space-lg); align-items: center; }
.hos-ss-person__img { flex: none; width: 112px; height: 112px; border-radius: var(--ds-radius-pill); object-fit: cover; display: block; }
.fl-ds-page .hos-ss-person__img { width: 112px; height: 112px; }
.hos-ss-person__text { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.fl-ds-page .hos-ss-person blockquote { margin: 0 !important; padding: 0; border: 0; font-size: var(--ds-text-quote-sm); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.fl-ds-page .hos-ss-person__who { margin: 0 !important; display: flex; flex-direction: column; font-size: var(--ds-text-xs); }
.hos-ss-person__who strong { color: var(--ds-color-heading); }
.hos-ss-person__who span { color: var(--ds-color-muted); }

/* Partner quotes carousel (mechanics: css/hos-carousel.css + js/hos-carousel.js) */
.hos-ss-orgquotes .hos-carousel__slide > * { max-width: none; }
.hos-ss-orgquotes .hos-ss-quote { margin: 0; background: var(--ds-color-blue-tint); border: 0 !important; }
.fl-ds-page .hos-ss-orgquotes .hos-ss-quote blockquote { margin: 0 !important; padding: 0; border: 0; font-size: var(--ds-text-base); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-ss-orgquotes .hos-ss-quote figcaption { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-color-muted); }
.hos-ss-orgquotes .hos-carousel__controls { margin-top: var(--ds-space-md); }

/* Publication covers (click to open the report) */
.fl-ds-page .hos-ss-pubs { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.hos-ss-pubs li { margin: 0; padding: 0; }
.hos-ss-pubs li::before { content: none; }
.fl-ds-page a.hos-ss-pub { display: flex; flex-direction: column; gap: 10px; color: var(--ds-color-heading) !important; text-decoration: none !important; }
.hos-ss-pub__cover { display: block; width: 100%; aspect-ratio: 300 / 424; object-fit: cover; border: 1px solid var(--ds-color-border); border-radius: 6px; box-shadow: 0 10px 22px -14px rgba(47, 48, 49, .55); transition: transform .15s ease, box-shadow .15s ease; }
.fl-ds-page .hos-ss-pub__cover { height: auto; }
.hos-ss-pub:hover .hos-ss-pub__cover { transform: translateY(-3px); box-shadow: 0 16px 28px -14px rgba(47, 48, 49, .6); }
.hos-ss-pub__title { font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-label); line-height: 1.35; }
.fl-ds-page a.hos-ss-pub:hover .hos-ss-pub__title { color: var(--ds-color-red-dark); text-decoration: underline; }

/* Podcast line: same size as the rest of the body, with its link */
.fl-ds-page .hos-ss-podcast p { margin: 0 !important; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.fl-ds-page .hos-ss-podcast a { color: var(--ds-color-red-dark) !important; text-decoration: underline !important; text-underline-offset: 3px; font-weight: var(--ds-weight-semibold); }

/* Round bullets, body-size list text */
.hos-ss-rlist li { font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); padding-left: 22px; }
.hos-ss-rlist li::before { content: ''; top: 0.72em; left: 2px; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); }
.hos-ss-main .hos-ss-rrow { gap: clamp(20px, 3vw, 32px); }
.fl-ds-page .hos-ss-main .hos-ss-rrow__text h3 { margin: 0 0 var(--ds-space-md) !important; }

/* Coming Home teaser inside the main column */
.hos-ss-main .hos-ss-coming { background: var(--ds-color-surface); border-radius: var(--ds-radius-lg); padding: var(--ds-space-panel); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: center; }
.fl-ds-page .hos-ss-main .hos-ss-coming__body { margin: 0 !important; font-size: var(--ds-text-base); }

@media (max-width: 900px) {
	.hos-ss-main .hos-ss-coming { grid-template-columns: minmax(0, 1fr); }
	.hos-ss-main .hos-ss-coming .hos-ss-coming__photo { order: -1; }
}

/* Cards section sits full width above the sidebar area, so the three cards
   keep their photos on top at a readable width. */
.hos-ss-help { padding: clamp(40px, 6vw, 72px) 0 0; }
.hos-ss-help__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-direction: column; gap: clamp(32px, 4.5vw, 48px); }
.hos-ss-help .hos-ss-lead { max-width: 860px; margin: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.fl-ds-page .hos-ss-help .hos-ss-lead p { margin: 0 !important; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-ss-help .hos-ss-strands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hos-ss-help .hos-ss-strand { padding: 0; gap: 0; overflow: hidden; }
.fl-ds-page .hos-ss-strand__desc { font-size: var(--ds-text-sm); line-height: 1.6; }
@media (max-width: 900px) { .hos-ss-help .hos-ss-strands__grid { grid-template-columns: minmax(0, 1fr); } }
.hos-ss-main .hos-ss-research { background: none; padding: 0; }
.hos-ss-main .hos-ss-rrow { align-items: start; }

/* =====================================================================
   Split layout (23 Sept): the page body is five separate custom modules,
   so each section edits on its own. From 901px up (and not inside the
   Beaver Builder editor) the page wrapper becomes a grid:
   - any module runs full width by default (hero, cards, closing box, or a
     section copied in from another page);
   - modules marked .hos-ss-part--main sit in the left column;
   - the Keep in touch module (.hos-ss-part--side) sits in the right column
     beside the four modules before it and follows the reader as they
     scroll (sticky within that area only).
   On phones and in the editor the modules simply stack.
   ===================================================================== */
.hos-ss-part { --ss-vgap: clamp(44px, 6vw, 68px); padding-top: var(--ss-vgap); }
.hos-ss-part__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); box-sizing: border-box; }
.hos-ss-part--side { padding-bottom: var(--ss-vgap); }

@media (min-width: 901px) {
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) {
		--ss-side: clamp(280px, 28vw, 340px);
		--ss-gap: clamp(28px, 4vw, 56px);
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--ds-space-gutter), 1fr)
			[main-start] minmax(0, calc(var(--ds-width-container) - (2 * var(--ds-space-gutter)) - var(--ss-side) - var(--ss-gap)))
			[main-end] var(--ss-gap)
			[side-start] var(--ss-side)
			[side-end] minmax(var(--ds-space-gutter), 1fr) [full-end];
		grid-auto-flow: row dense;
	}
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) > * { grid-column: full; min-width: 0; }
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) > .hos-ss-part--main { grid-column: main; }
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) > .hos-ss-part--main:has(+ .hos-ss-part--side) { padding-bottom: var(--ss-vgap); }
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) > .hos-ss-part--side { grid-column: side; grid-row: span 4; align-self: start; position: sticky; top: 24px; padding: 0; margin-top: var(--ss-vgap); }
	body:not(.fl-builder-edit) .fl-ds-page:has(> .hos-ss-part--side) .hos-ss-part__inner { max-width: none; padding: 0; }

	/* Keep in touch box, stacked to suit the narrow column */
	body:not(.fl-builder-edit) .hos-ss-part--side .hos-newsletter { flex-direction: column; align-items: stretch; gap: var(--ds-space-md); padding: clamp(22px, 2.4vw, 28px); }
	body:not(.fl-builder-edit) .hos-ss-part--side .hos-newsletter__text { flex: none; }
	body:not(.fl-builder-edit) .fl-ds-page .hos-ss-part--side .hos-newsletter__text p { max-width: none; }
	body:not(.fl-builder-edit) .hos-ss-part--side .hos-newsletter__btn { justify-content: center; text-align: center; padding: 14px 20px; min-height: 52px; }
}

/* On tour note under the opening paragraphs (Catherine, 25 Sept): a peach
   box linking to /ontour/ while the autumn tour runs. Empty = hidden. */
.hos-ss-tour { padding: var(--ds-space-lg) var(--ds-space-panel); background: var(--ds-color-red-tint); border-radius: var(--ds-radius-lg); }
.hos-ss-tour:empty { display: none; }
.fl-ds-page .hos-ss-tour p, .hos-ss-tour p { margin: 0 !important; font-size: var(--ds-text-intro); line-height: var(--ds-line-lead); color: var(--ds-color-heading); }
.fl-ds-page .hos-ss-tour a, .hos-ss-tour a { color: var(--ds-color-red-hover) !important; font-weight: var(--ds-weight-semibold); }