/**
 * Our services landing (page-our-services.php).
 *
 * Red hero, a housing-emergency two-column with a starter-guides card, an
 * audience toggle (CSS-only radio tabs), the specialist service cards, a short
 * film, rotating client quotes and the shared Get Help CTA. Colours, spacing,
 * radius and type come from the design-system tokens; buttons and card anchors
 * carry explicit overrides because the design-system base rule underlines and
 * recolours every <a> inside .fl-ds-page.
 */

.hos-services { font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-services h1, .hos-services h2, .hos-services h3, .hos-services strong { color: var(--ds-color-heading); }

/* ---- Buttons ---- */
.hos-services-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; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.fl-ds-page a.hos-services-btn { text-decoration: none; }
.fl-ds-page a.hos-services-btn--white { background: var(--ds-color-white); color: var(--ds-color-blue-dark); }
.fl-ds-page a.hos-services-btn--white:hover { background: var(--ds-color-blue-tint-deep); color: var(--ds-color-blue-dark); }
.fl-ds-page a.hos-services-btn--ghost { background: transparent; border-color: var(--ds-color-white); color: var(--ds-color-white); }
.fl-ds-page a.hos-services-btn--ghost:hover { background: rgba(255, 255, 255, .16); color: var(--ds-color-white); }

/* ---- Hero (red) ---- */
.hos-services-hero { background: var(--ds-color-red-core); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-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-services-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-services-hero__lead { margin: 0; color: var(--ds-color-white); font-size: clamp(1.5rem, 2.2vw, 1.625rem); line-height: var(--ds-line-lead); max-width: 54ch; }

/* ---- Housing-emergency two-col ---- */
.hos-services-emergency { background: var(--ds-color-white); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-emergency__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.hos-services-emergency__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-services-emergency__text h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
.hos-services-emergency__text p { margin: 0; max-width: 58ch; }
.hos-services-note { color: var(--ds-color-muted); font-size: var(--ds-text-xs); }

.hos-services-starter { flex: 1 1 320px; max-width: 440px; background: var(--ds-color-green-tint); border-radius: var(--ds-radius-lg); padding: var(--ds-space-panel); display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-services-starter h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-h4); line-height: 1.3; }
.hos-services-starter__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.hos-services-starter__item { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); color: var(--ds-color-heading); }
.hos-services-starter__item svg { flex: none; margin-top: 3px; color: var(--ds-color-red-dark); }

/* ---- Audience toggle + getting-started cards ---- */
.hos-services-getting { background: var(--ds-color-surface); padding: clamp(40px, 6vw, 72px) 0; }
.hos-services-getting__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-services-tab-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hos-services-tabs__labels { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--ds-color-border); margin-bottom: clamp(28px, 4vw, 44px); }
.hos-services-tab { display: inline-flex; align-items: center; padding: 0 2px 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-lead); color: var(--ds-color-muted); cursor: pointer; }
.hos-services-tab:hover { color: var(--ds-color-heading); }
#hos-aud-public:checked ~ .hos-services-tabs__labels .hos-services-tab[for="hos-aud-public"],
#hos-aud-pro:checked ~ .hos-services-tabs__labels .hos-services-tab[for="hos-aud-pro"] { color: var(--ds-color-heading); border-bottom-color: var(--ds-color-red-core); }
#hos-aud-public:focus-visible ~ .hos-services-tabs__labels .hos-services-tab[for="hos-aud-public"],
#hos-aud-pro:focus-visible ~ .hos-services-tabs__labels .hos-services-tab[for="hos-aud-pro"] { outline: 3px solid var(--ds-color-blue-dark); outline-offset: 4px; }
.hos-services-panel { display: none; }
#hos-aud-public:checked ~ .hos-services-panel--public { display: block; }
#hos-aud-pro:checked ~ .hos-services-panel--pro { display: block; }

.hos-services-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-space-lg); }
.hos-services-card { display: flex; flex-direction: column; gap: var(--ds-space-sm); background: var(--ds-color-white); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); padding: clamp(24px, 3vw, 32px); }
.hos-services-card h3 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-h4); line-height: 1.3; }
.hos-services-card p { margin: 0; font-size: var(--ds-text-sm); line-height: 1.6; }
.hos-services-card__more { margin-top: auto; padding-top: var(--ds-space-sm); }
.fl-ds-page a.hos-services-card__more { color: var(--ds-color-red-dark); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); text-decoration: none; }
.fl-ds-page a.hos-services-card__more:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---- Specialist service cards ---- */
.hos-services-specialist { background: var(--ds-color-white); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-specialist__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.hos-services-specialist__head { display: flex; flex-direction: column; gap: var(--ds-space-sm); max-width: 44ch; }
.hos-services-specialist__head h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
.hos-services-specialist__head p { margin: 0; color: var(--ds-color-body); }
.hos-services-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ds-space-lg); }
.hos-services-svc-card { display: flex; flex-direction: column; gap: var(--ds-space-md); border-radius: var(--ds-radius-lg); padding: clamp(24px, 3vw, 32px); border: 1px solid transparent; }
.fl-ds-page a.hos-services-svc-card { text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.fl-ds-page a.hos-services-svc-card:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-2px); }
.hos-services-svc-card--orange { background: var(--ds-color-orange-tint); }
.hos-services-svc-card--blue { background: var(--ds-color-blue-tint); }
.hos-services-svc-card--green { background: var(--ds-color-green-tint); }
.hos-services-svc-card__logo { height: 46px; width: auto; max-width: 82%; object-fit: contain; object-position: left center; display: block; }
.hos-services-svc-card 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; }
.hos-services-svc-card p { margin: 0; font-size: var(--ds-text-sm); line-height: 1.6; color: var(--ds-color-body); }
.hos-services-svc-card__more { margin-top: auto; padding-top: var(--ds-space-xs); color: var(--ds-color-red-dark); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); }

/* ---- Video / film ---- */
.hos-services-video { background: var(--ds-color-surface); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-video__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); align-items: center; }
.hos-services-video__media { flex: 1 1 380px; min-width: 280px; margin: 0; }
.hos-services-video__frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-space-sm); aspect-ratio: 16 / 10; border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-color-blue-tint-deep); }
.hos-services-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hos-services-video__play { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 22px 10px 14px; border-radius: var(--ds-radius-pill); background: var(--ds-color-white); color: var(--ds-color-heading); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); }
.hos-services-video__play-icon { flex: none; width: 34px; height: 34px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); position: relative; }
.hos-services-video__play-icon::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ds-color-white); }
.hos-services-video__soon { position: relative; font-size: var(--ds-text-xs); color: var(--ds-color-blue-dark); }
.hos-services-video__text { flex: 1 1 340px; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-services-video__text h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; }
.hos-services-video__text p { margin: 0; max-width: 52ch; }
.fl-ds-page a.hos-services-video__transcript { color: var(--ds-color-red-dark); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); text-decoration: none; }
.fl-ds-page a.hos-services-video__transcript:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---- Quotes ---- */
.hos-services-quotes { background: var(--ds-color-white); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-quotes__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-direction: column; gap: clamp(24px, 4vw, 40px); }
.hos-services-quotes__inner > h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; }
.hos-services-quotes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ds-space-lg); }
.hos-services-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-services-quote blockquote { margin: 0; font-size: var(--ds-text-quote-sm); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-services-quote cite { font-style: normal; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-color-muted); }

/* ---- CTA (blue) ---- */
.hos-services-cta { background: var(--ds-color-blue-dark); padding: clamp(48px, 7vw, 88px) 0; }
.hos-services-cta__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: flex; flex-wrap: wrap; gap: var(--ds-space-xl); align-items: center; justify-content: space-between; }
.hos-services-cta__text { flex: 1 1 440px; display: flex; flex-direction: column; gap: var(--ds-space-lg); }
.fl-ds-page .hos-services-cta__text h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h2); line-height: 1.15; color: var(--ds-color-white); }
.hos-services-cta__text p { margin: 0; color: var(--ds-color-blue-on-dark); font-size: var(--ds-text-intro); line-height: 1.6; max-width: 48ch; }
/* Same colours inside the Beaver Builder editor (builder heading/paragraph colours load later there). */
.hos-services-cta__text h2 { color: var(--ds-color-white) !important; }
.hos-services-cta__text p { color: var(--ds-color-blue-on-dark) !important; }
.hos-services-cta__emergency { align-self: flex-start; border: 2px solid var(--ds-color-white); border-radius: var(--ds-radius-md); padding: 14px 20px; color: var(--ds-color-white); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); }
.hos-services-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-md); align-items: center; }
.hos-services-cta__actions .hos-services-btn { min-height: 60px; padding: 18px 34px; font-size: var(--ds-text-intro); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
	.hos-services-video__media { flex-basis: 100%; }
}

/* Emergency intro is a single rich-text (editor) field; keep the paragraph rhythm. */
.hos-services-emergency__body { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-services-emergency__body p { margin: 0; }

/* Editor safety net. The white heading rules above are scoped under
   .fl-ds-page, but the Beaver Builder editor does not wrap the content in
   that class, so in edit mode the hero H1 and the CTA H2 fell back to the
   dark default (appearing black). These wrapper-independent overrides keep
   them white both on the front end and inside the builder. */
.hos-services-hero h1,
.hos-services-cta__text h2 { color: var(--ds-color-white) !important; }

/* Our Services specialist cards: keep the brand logo at 46px (15 Sept 2026).
   The DS rule .fl-ds-block img{height:auto} outranks the 46px logo height,
   so scope the override under .fl-ds-page with !important. */
.fl-ds-page .hos-services-svc-card__logo { height: 46px !important; width: auto; max-width: 82%; object-fit: contain; object-position: left center; display: block; margin-bottom: 2px; }

/* Getting-started white cards: photo on top, padded text body below (15 Sept 2026). */
.hos-services-card { padding: 0; gap: 0; overflow: hidden; }
.hos-services-card__media { display: block; }
.hos-services-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hos-services-card__body { display: flex; flex-direction: column; gap: var(--ds-space-sm); padding: clamp(22px, 2.6vw, 28px); flex: 1 1 auto; }

/* Specialist service logos, standardised (23 Sept 2026, client design note).
   Each logo sits in a 63px slot and is scaled so its lettering matches the
   cap height of the master Housing Options Scotland mark (about 17px), rather
   than all sharing one image height. Widths come from each file's aspect
   ratio; object-fit keeps them undistorted. */
.fl-ds-page .hos-services-svc-card__logo { height: 63px !important; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 2px; }
.fl-ds-page .hos-services-svc-card--orange .hos-services-svc-card__logo { width: 141px !important; } /* Making Moves: 50px tall */
.fl-ds-page .hos-services-svc-card--blue .hos-services-svc-card__logo { width: 100px !important; }   /* Military Matters: 40px tall */
.fl-ds-page .hos-services-svc-card--green .hos-services-svc-card__logo { width: 125px !important; }  /* Hospital Housing Clinic: 63px tall */

/* What you can expect from us: intro + quote carousel (23 Sept 2026).
   Carousel mechanics live in css/hos-carousel.css + js/hos-carousel.js. */
.hos-services-quotes__head { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-md); text-align: center; }
.fl-ds-page .hos-services-quotes__inner > .hos-services-quotes__head h2 { margin: 0 !important; }
.hos-services-quotes__intro { max-width: 720px; }
.fl-ds-page .hos-services-quotes__intro p { margin: 0 !important; font-size: var(--ds-text-intro); line-height: var(--ds-line-lead); color: var(--ds-color-body); }
.fl-ds-page .hos-services-quotes__intro a { color: var(--ds-color-red-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--ds-weight-semibold); }
.hos-services-quotes { background: var(--ds-color-surface); }
.hos-services-carousel .hos-services-quote { position: relative; margin: 0; background: var(--ds-color-white); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 34px) clamp(64px, 7vw, 92px); }
.hos-services-carousel .hos-services-quote::before { content: "\201C"; position: absolute; left: clamp(18px, 2.4vw, 30px); top: clamp(10px, 1.6vw, 18px); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(4.5rem, 7vw, 6rem); line-height: 1; color: var(--ds-color-red-core); }
.fl-ds-page .hos-services-carousel .hos-services-quote blockquote { margin: 0 !important; padding: 0; border: 0; font-size: var(--ds-text-intro); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }

/* Shorter specialist heading (23 Sept 2026): let it sit on one line on desktop. */
.hos-services-specialist__head { max-width: 720px; }
@media (max-width: 600px) {
	.hos-services-carousel .hos-services-quote { padding: 22px 22px 24px; }
	.hos-services-carousel .hos-services-quote::before { position: static; display: block; font-size: 3.25rem; height: 0.55em; margin-bottom: 6px; }
}

/* Accessibility: links in the green starter box need a darker red for 4.5:1 */
.fl-ds-page a.hos-services-starter__link, .fl-ds-block a.hos-services-starter__link { color: var(--ds-color-red-hover) !important; }

/* Accessibility: the "find out more" links on the tinted specialist cards need the darker red for 4.5:1 */
.fl-ds-page .hos-services-svc-card .hos-services-svc-card__more, .fl-ds-block .hos-services-svc-card .hos-services-svc-card__more { color: var(--ds-color-red-hover) !important; }