/* Homepage (2026-09-29 redesign). Rendered by src/lib/home-body.ts.
 *
 * Every selector is scoped under .osfh so nothing here reaches the shared header and footer, which
 * are still styled by the Elementor-era page-index.css / post-index.css. Fonts are the brand's own
 * self-hosted Days One (display) and Roboto (text), declared in page-index.css.
 *
 * Layout rules this file keeps (website/CLAUDE.md): no horizontal scrolling at any width — no
 * 100vw anywhere (the scrollbar makes 100vw wider than the page), every grid collapses, and the
 * phone gutter is 16px.
 */
.osfh {
  --o: #f48f20;          /* brand orange — fills, never small text on white */
  --o-hi: #ffa846;
  --o-ink: #a85f0c;      /* orange for text on light backgrounds (5.2:1 on white) */
  --ink: #161616;
  --char: #1d1d1d;
  --text: #3b4046;
  --muted: #62686f;
  --line: #e4e4e1;
  --tint: #f5f5f3;
  --cream: #fff6ec;
  --r: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --shadow-hi: 0 2px 4px rgba(0,0,0,.06), 0 16px 36px rgba(0,0,0,.12);
  --display: "Days One", "Roboto", sans-serif;
  --body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--body);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
}
.osfh *, .osfh *::before, .osfh *::after { box-sizing: border-box; }
.osfh img { display: block; max-width: 100%; height: auto; }
.osfh ul, .osfh ol { list-style: none; margin: 0; padding: 0; }
.osfh p { margin: 0; }
/* pre-shared.css colors every link with `.osf-kit-9 main a` (0,1,2), so the base reset matches that
   specificity (and wins by loading later), and every rule below that colors a link is written as
   `.osfh a.x` / `.osfh .x a` to outrank both. */
main .osfh a { color: inherit; text-decoration: none; }
.osfh a:focus-visible { outline: 3px solid var(--o); outline-offset: 3px; border-radius: 4px; }
.osfh h1, .osfh h2, .osfh h3 {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  margin: 0; letter-spacing: -0.005em; text-transform: none;
}
.osfh h2 { font-size: clamp(1.55rem, 1.05rem + 1.55vw, 2.35rem); line-height: 1.18; }
.osfh h3 { font-size: 1.05rem; line-height: 1.35; }
.osfh strong { font-weight: 700; color: var(--ink); }

.osfh-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- shared pieces ---------- */
.osfh-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--o-ink); margin-bottom: .9rem !important;
}
.osfh-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--o); }
.osfh-eyebrow--light { color: var(--o-hi); }

.osfh-hl { position: relative; display: inline-block; padding: 0 .16em; color: var(--ink); z-index: 0; }
.osfh-hl::before {
  content: ""; position: absolute; inset: .06em -.04em 0; z-index: -1;
  background: var(--o); transform: skewX(-12deg); border-radius: .12em;
}

.osfh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.5rem; border-radius: 8px; border: 2px solid transparent;
  font-family: var(--display); font-size: .92rem; line-height: 1.2; letter-spacing: .01em;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.osfh-btn:hover { transform: translateY(-1px); }
.osfh-btn--primary { background: var(--o); color: var(--ink) !important; }
.osfh-btn--primary:hover { background: var(--o-hi); }
.osfh-btn--ghost { border-color: rgba(255,255,255,.65); color: #fff !important; }
.osfh-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.osfh-btn--dark { background: var(--ink); color: #fff !important; }
.osfh-btn--dark:hover { background: #333; }
.osfh-arrow { flex: none; transition: transform .15s; }
a:hover > .osfh-arrow, a:hover .osfh-arrow { transform: translateX(3px); }

.osfh-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 88px top AND bottom made every section change 176px of nothing (owner, 2026-09-30: "too much space
   ... in each section to section transition, especially on the home page"). ~90px now. */
.osfh-sec { padding: 44px 0; background: #fff; }
.osfh-sec--tint { background: var(--tint); }
.osfh-sec--cream { background: var(--cream); }
.osfh-sec--dark { background: var(--char); color: rgba(255,255,255,.78); }
.osfh-sec--dark h2, .osfh-sec--dark h3 { color: #fff; }
.osfh-sec--dark .osfh-eyebrow { color: var(--o-hi); }

.osfh-head { margin-bottom: 40px; max-width: 760px; }
.osfh-head--split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px 64px; align-items: end;
}
.osfh-head--split > p { color: var(--muted); }
.osfh-sec--dark .osfh-head--split > p { color: rgba(255,255,255,.72); }

.osfh-more { margin-top: 32px !important; }
.osfh .osfh-more a, .osfh a.osfh-inline {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: .92rem; color: var(--o-ink);
  border-bottom: 2px solid rgba(244,143,32,.35); padding-bottom: 2px;
}
.osfh .osfh-more a:hover, .osfh a.osfh-inline:hover { border-color: var(--o); }
.osfh .osfh-more--light a { color: var(--o-hi); }

/* ---------- hero ---------- */
.osfh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #111; color: rgba(255,255,255,.86);
  padding: 208px 0 56px;
}
.osfh-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 70% 30%;
}
.osfh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* even overlay for the CENTERED copy (owner, 2026-09-30: centered like fitsupply.com) */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(12,12,12,.62) 0%, rgba(12,12,12,.78) 70%),
    linear-gradient(0deg, rgba(12,12,12,.85) 0%, rgba(12,12,12,0) 38%);
}
.osfh-hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.osfh-hero-copy .osfh-actions { justify-content: center; }
.osfh-hero h1 {
  color: #fff; font-size: clamp(2.1rem, 1.1rem + 3.3vw, 3.7rem); line-height: 1.08;
  margin-bottom: 22px;
}
.osfh-lead { font-size: 1.2rem; line-height: 1.55; max-width: 620px; margin: 0 auto 32px !important; }
.osfh-btn svg { flex: none; }

.osfh-paths {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-top: 64px;
}
.osfh a.osfh-path {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px 22px; border-radius: var(--r);
  background: #fff; color: var(--text); border-top: 4px solid var(--o);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
}
.osfh a.osfh-path:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.osfh-path-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.osfh-path-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--display); font-size: 1.06rem; color: var(--ink); }
.osfh-path-title .osfh-arrow { color: var(--o-ink); }

/* ---------- stats strip ---------- */
.osfh-stats { background: var(--o); color: var(--ink); padding: 34px 0; }
.osfh-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.osfh-stat { display: flex; flex-direction: column; gap: 2px; padding: 4px 28px; border-left: 1px solid rgba(0,0,0,.18); }
.osfh-stat:first-child { border-left: 0; padding-left: 0; }
.osfh-stat-n { font-family: var(--display); font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.3rem); line-height: 1.1; }
.osfh-stat-n--text { font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); line-height: 1.3; padding-top: .2em; }
.osfh-stat-l { font-size: .93rem; line-height: 1.35; color: rgba(0,0,0,.78); }

/* ---------- FAQ (folded into <details> by Base.astro — src/lib/faq-accordion.ts) ---------- */
.osfh-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
.osfh details.osf-faq-item {
  display: block; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; box-shadow: none; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.osfh details.osf-faq-item:hover { border-color: #cfcfca; }
.osfh details.osf-faq-item[open] { border-color: var(--o); box-shadow: var(--shadow); }
.osfh .osf-faq-sum .osf-faq-icon { flex: 0 0 auto; display: block; padding: 0; background: none; clip-path: none; }
.osfh .osf-faq-icon svg { display: block; width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--o); box-sizing: border-box; }
.osfh .osf-faq-q { flex: 1; margin: 0 !important; font-family: var(--display); font-weight: 400; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.osfh details .osf-faq-body { padding: 0 18px 18px 60px; }
.osfh .osf-faq-a { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text); }
.osfh .osfh-faq + script { display: none; }

/* ---------- equipment ---------- */
.osfh-eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.osfh a.osfh-eq {
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 14px 16px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink);
  color: #fff; transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
/* Black tiles (owner chose option B of three mockups, 2026-09-30): the logo and header colors,
   orange icons on black, the section itself stays white so the page keeps its light/dark rhythm. */
.osfh a.osfh-eq:hover { background: #232323; border-color: var(--o); box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: translateY(-2px); }   /* must out-rank .osfh a.osfh-eq (0,2,1), or the border never turns orange */
/* pre-shared.css paints EVERY hovered link inside <main> blue — `.osf-kit-9 main a:hover`, specificity
   0,2,2, rgb(32,133,244) — a leftover of the old theme that outranks each card rule in this file
   (0,2,1), so every tile, card and inline link on the homepage went blue under the pointer. Pin each
   link's own color through :hover at 0,3,1. Owner spotted it on the equipment tiles, 2026-09-30. */
.osfh a.osfh-eq:hover { color: #fff; }
.osfh a.osfh-path:hover, .osfh a.osfh-post:hover { color: var(--text); }
.osfh a.osfh-svc:hover, .osfh a.osfh-mini:hover { color: #fff; }
.osfh a.osfh-inline:hover, .osfh a:not([class]):hover { color: var(--o-ink); }
.osfh .osfh-more--light a:hover, .osfh .osfh-sec--dark a:not([class]):hover { color: var(--o-hi); }
.osfh-eq-icon {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px;
  background: rgba(244,143,32,.14); color: var(--o-hi);
}
.osfh-eq-icon svg { width: 34px; height: 34px; }
.osfh-eq-icon svg [stroke="black"], .osfh-eq-icon svg [stroke="#000"], .osfh-eq-icon svg [stroke="#000000"] { stroke: currentColor; }
.osfh-eq-icon svg [fill="black"]:not(mask *), .osfh-eq-icon svg [fill="#000"]:not(mask *) { fill: currentColor; }
.osfh-eq-name { flex: 1; font-family: var(--display); font-size: .95rem; line-height: 1.3; }
.osfh-eq .osfh-arrow { color: var(--o-hi); }

/* ---------- services ---------- */
.osfh-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.osfh a.osfh-svc {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  background: var(--ink); border-radius: var(--r); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.12);
  color: rgba(255,255,255,.78); transition: box-shadow .15s, transform .15s;
}
/* Black service cards and tiles to match the equipment tiles (owner, 2026-09-30: "make the services
   cards black too to match"). The photo stays on top; the body is the logo's black and orange. */
.osfh a.osfh-svc:hover { box-shadow: 0 0 0 2px var(--o), 0 16px 40px rgba(0,0,0,.22); transform: translateY(-3px); }
.osfh a.osfh-svc h3 { color: #fff; }
.osfh-svc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.osfh-svc-img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .4s; }
.osfh-svc:hover .osfh-svc-img img { transform: scale(1.04); }
.osfh-svc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 26px 26px; }
.osfh-svc-body h3 { font-size: 1.2rem; }
.osfh-svc-text { font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.72); flex: 1; }
.osfh-svc-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 6px; font-family: var(--display); font-size: .88rem; color: var(--o-ink); }
.osfh-svc .osfh-svc-link { color: var(--o-hi); }   /* the blog and case-study cards reuse this link on white */

.osfh-more-svc { margin-top: 40px; }
.osfh-more-svc-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px !important; font-size: 1.15rem; }
.osfh-more-svc-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.osfh-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.osfh a.osfh-mini {
  position: relative; display: flex; align-items: flex-start; gap: 14px; height: 100%;
  padding: 18px 40px 18px 18px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink);
  color: #fff; transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.osfh a.osfh-mini:hover { background: #232323; border-color: var(--o); box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: translateY(-2px); }
.osfh-mini .osfh-ico { background: rgba(244,143,32,.14); color: var(--o-hi); }
.osfh-mini .osfh-ico svg { width: 26px; height: 26px; }
.osfh-mini-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.osfh-mini-t { font-family: var(--display); font-size: .98rem; line-height: 1.3; color: #fff; }
.osfh-mini-d { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.66); }
.osfh-mini > .osfh-arrow { position: absolute; top: 20px; right: 16px; color: var(--o-hi); }
/* with every tile black, "All services" turns ORANGE so it still reads as the way to everything else */
.osfh a.osfh-mini--all { background: var(--o); border-color: var(--o); }
.osfh a.osfh-mini--all:hover { background: var(--o-hi); border-color: var(--o-hi); }
.osfh .osfh-mini--all .osfh-ico { background: rgba(0,0,0,.12); color: var(--ink); }
.osfh-mini--all .osfh-mini-t { color: var(--ink); }
.osfh-mini--all .osfh-mini-d { color: rgba(22,22,22,.78); }
.osfh-mini--all > .osfh-arrow { color: var(--ink); }

/* ---------- process ---------- */
.osfh-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.osfh-step {
  position: relative; padding: 26px 24px 28px; border-radius: var(--r);
  background: var(--tint); border-top: 3px solid var(--o);
}
.osfh-step-n { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--o); margin-bottom: 14px; }
.osfh-step h3 { margin-bottom: 8px; }
.osfh-step p { font-size: .96rem; line-height: 1.6; color: var(--muted); }
.osfh .osfh-step a { color: var(--o-ink); border-bottom: 1px solid currentColor; white-space: nowrap; }

/* ---------- preventive maintenance plans (wording from data/pm-plans.ts = /maintenance/) ---------- */
.osfh-ico {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--cream); color: var(--o-ink);
}
.osfh-ico svg { width: 30px; height: 30px; }
.osfh-ico svg [stroke="black"], .osfh-ico svg [stroke="#000"], .osfh-ico svg [stroke="#000000"] { stroke: currentColor; }
.osfh-ico svg [fill="black"]:not(mask *), .osfh-ico svg [fill="#000"]:not(mask *) { fill: currentColor; }
.osfh-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.osfh-plan { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.osfh-plan--platinum { grid-column: 1 / -1; }
.osfh-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; }
.osfh-plan-head h3 { font-size: 1.45rem; line-height: 1.1; }
.osfh-plan-head small { display: block; margin-top: 4px; font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.osfh-plan--silver .osfh-plan-head { background: linear-gradient(100deg, #c9ced3, #eef0f2); }
.osfh-plan--gold .osfh-plan-head { background: linear-gradient(100deg, #eeb640, #f9dc92); }
.osfh-plan--platinum .osfh-plan-head { background: linear-gradient(100deg, #1b1b1b, #414141); }
.osfh-plan--platinum .osfh-plan-head h3 { color: #fff; }
.osfh-plan-tag { flex: none; padding: .38rem .8rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.osfh-plan--platinum .osfh-plan-tag { background: var(--o); color: var(--ink); }
.osfh-plan-body { display: grid; gap: 22px; padding: 24px 26px 28px; }
.osfh-plan-area { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-items: start; }
.osfh-plan-area .osfh-ico { grid-row: span 2; }
.osfh-plan-area h4, .osfh-checklist h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.osfh-plan-area h4 { align-self: center; }
.osfh-plan-area p { font-size: .95rem; line-height: 1.6; }
.osfh-checklists { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; padding: 26px 26px 30px; }
.osfh-checklist h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.osfh-checklist li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: .9rem; line-height: 1.45; }
.osfh-checklist li::before {
  content: ""; position: absolute; left: 1px; top: .38em; width: 10px; height: 5px;
  border-left: 2px solid var(--o); border-bottom: 2px solid var(--o); transform: rotate(-45deg);
}
.osfh-pm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  margin-top: 32px; padding: 24px 28px; border-radius: var(--r); background: #fff; border: 1px dashed rgba(168,95,12,.4);
}
.osfh-pm-foot p { max-width: 720px; }
.osfh-pm-foot .osfh-actions { flex: none; }

/* ---------- facilities ---------- */
.osfh-fac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.osfh .osfh-fac-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,.13);
  font-family: var(--display); font-size: .98rem; color: #fff; transition: color .15s;
}
.osfh .osfh-fac-grid a:hover { color: var(--o-hi); }
.osfh-fac-grid .osfh-arrow { color: var(--o); }

/* ---------- areas ---------- */
.osfh-areas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.osfh-area {
  grid-column: span 3; padding: 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line);
}
.osfh-area:nth-child(1) { grid-column: 1 / -1; }
.osfh-area:nth-child(2), .osfh-area:nth-child(3), .osfh-area:nth-child(4) { grid-column: span 4; }
.osfh-area h3 { font-size: 1rem; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--o); }
.osfh .osfh-area h3 a { color: var(--ink); }
.osfh .osfh-area h3 a:hover { color: var(--o-ink); }
.osfh-area ul { font-size: .93rem; line-height: 1.95; }
.osfh-area li { display: inline; white-space: nowrap; }
.osfh-area li:not(:last-child)::after { content: "\00B7"; margin: 0 .42em; color: #b9b9b4; }
.osfh .osfh-area li a { color: var(--text); border-bottom: 1px solid transparent; }
.osfh .osfh-area li a:hover { color: var(--o-ink); border-color: currentColor; }

/* ---------- team ---------- */
.osfh-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.osfh-person { display: flex; flex-direction: column; gap: 2px; }
.osfh-person img {
  width: 100%; aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; object-position: 50% 18%;
  border-radius: var(--r); background: var(--tint); margin-bottom: 10px;
}
.osfh-person-ph {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 10px; border-radius: var(--r);
  background: linear-gradient(160deg, #2b2b2b, #141414); color: var(--o);
  font-family: var(--display); font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); letter-spacing: .04em;
}
.osfh-person-name { font-family: var(--display); font-size: .95rem; color: var(--ink); }
.osfh-person-role { font-size: .88rem; color: var(--muted); }

/* ---------- reviews ---------- */
.osfh-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.osfh-review {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px;
  border-radius: var(--r); background: #fff; box-shadow: var(--shadow);
}
.osfh-stars { color: var(--o); font-size: 1.1rem; letter-spacing: .12em; }
.osfh-review blockquote { margin: 0; padding: 0; border: 0; flex: 1; font-size: 1rem; line-height: 1.65; color: var(--ink); font-style: normal; }
.osfh-review-by { font-size: .9rem; color: var(--muted); }

/* ---------- brands ---------- */
.osfh-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.osfh-logos li { flex: 1 1 150px; max-width: 176px; display: grid; place-items: center; height: 88px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.osfh-logos img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.osfh-logos li:hover img { filter: none; opacity: 1; }

/* ---------- blog ---------- */
.osfh-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.osfh-post {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
}
.osfh-post:hover { box-shadow: var(--shadow-hi); transform: translateY(-3px); }
.osfh-post-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #ddd; }
.osfh-post-img img { width: 100%; height: 100% !important; object-fit: cover; }
.osfh-post--cs .osfh-post-img { aspect-ratio: 4 / 3; }
.osfh-logos li a { display: grid; place-items: center; width: 100%; height: 100%; }
.osfh-logos li a:hover img, .osfh-logos li a:focus-visible img { filter: none; opacity: 1; }
.osfh-post-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.osfh-post-date { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.osfh-post-ex { flex: 1; font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* ---------- closing call to action ---------- */
.osfh-cta { background: var(--o); color: var(--ink); padding: 56px 0; }
.osfh-cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.osfh-cta h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); margin-bottom: 14px; }
.osfh-cta .osfh-eyebrow { color: var(--ink); }
.osfh-cta .osfh-eyebrow::before { background: var(--ink); }
.osfh-cta p { font-size: 1.08rem; margin-bottom: 26px; color: rgba(0,0,0,.8); }
.osfh-cta .osfh-btn--primary { background: var(--ink); color: #fff !important; }
.osfh-cta .osfh-btn--primary:hover { background: #333; }
.osfh-cta .osfh-btn--ghost { border-color: var(--ink); color: var(--ink) !important; }
.osfh-cta .osfh-btn--ghost:hover { background: rgba(0,0,0,.06); }
.osfh ul.osfh-contact { display: grid; gap: 4px; padding: 14px 28px; border-radius: var(--r); background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.osfh-contact li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.osfh-contact li:last-child { border-bottom: 0; }
.osfh-contact li > svg { flex: none; margin-top: 3px; color: var(--o-ink); }
.osfh-contact span { display: flex; flex-direction: column; font-size: .98rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.osfh-contact strong { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.osfh .osfh-contact a { color: var(--ink); }
.osfh .osfh-contact a:hover { color: var(--o-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .osfh-eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osfh-team { gap: 22px 16px; }
  .osfh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osfh-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osfh-checklists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osfh-area, .osfh-area:nth-child(2), .osfh-area:nth-child(3), .osfh-area:nth-child(4) { grid-column: span 6; }
}
@media (max-width: 900px) {
  .osfh-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osfh-sec { padding: 36px 0; }
  .osfh-head--split { grid-template-columns: 1fr; align-items: start; }
  .osfh-svc-grid, .osfh-reviews, .osfh-posts, .osfh-plans, .osfh-faq { grid-template-columns: 1fr; }
  .osfh a.osfh-svc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .osfh-svc-img { aspect-ratio: auto; height: 100%; min-height: 180px; }
  .osfh-fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osfh-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .osfh-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .osfh-cta-grid { grid-template-columns: 1fr; }
  .osfh-pm-foot { flex-direction: column; align-items: flex-start; }
  .osfh-hero { padding-top: 168px; }
}
@media (max-width: 640px) {
  .osfh { font-size: 16px; }
  .osfh-wrap { padding: 0 16px; }
  .osfh-sec { padding: 40px 0; }
  .osfh-hero { padding: 132px 0 40px; }
  .osfh-hero::before { background: linear-gradient(180deg, rgba(12,12,12,.78) 0%, rgba(12,12,12,.9) 55%, rgba(12,12,12,.96) 100%); }
  .osfh-lead { font-size: 1.04rem; }
  .osfh-actions .osfh-btn { flex: 1 1 100%; }
  .osfh-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
  .osfh-path-title { font-size: .95rem; }
  .osfh-path-title .osfh-arrow { display: none; }
  .osfh-path-kicker { font-size: .66rem; letter-spacing: .08em; }
  .osfh a.osfh-path { padding: 14px 14px 16px; }
  .osfh-eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .osfh a.osfh-eq { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .osfh-eq .osfh-arrow { display: none; }
  .osfh-eq-icon { width: 44px; height: 44px; }
  .osfh-eq-icon svg { width: 30px; height: 30px; }
  .osfh-eq-name { font-size: .88rem; }
  .osfh a.osfh-svc { display: flex; }
  .osfh-svc-img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .osfh-steps, .osfh-fac-grid, .osfh-mini-grid { grid-template-columns: 1fr; }
  .osfh-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .osfh-area, .osfh-area:nth-child(2), .osfh-area:nth-child(3), .osfh-area:nth-child(4) { grid-column: 1 / -1; }
  .osfh-logos li { flex-basis: calc(50% - 6px); max-width: none; }
  .osfh-stat { padding: 2px 14px; }
  .osfh-cta { padding: 44px 0; }
  .osfh-checklists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; padding: 20px 16px 24px; }
  .osfh-checklist li { font-size: .86rem; padding-left: 17px; }
  .osfh-plan-head, .osfh-plan-body { padding-left: 18px; padding-right: 18px; }
  .osfh-plan-head { flex-wrap: wrap; }
  .osfh-plan-area { grid-template-columns: 1fr; }
  .osfh-plan-area .osfh-ico { grid-row: auto; }
  .osfh ul.osfh-contact { padding: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .osfh *, .osfh *::before, .osfh *::after { transition: none !important; }
}