/* Site-wide half of the 2026-09-29 redesign. Loaded on every page by Base.astro (last, so it wins
 * over the Elementor-era sheets). Three parts:
 *   1. the shared page header (.osfp-hero) and closing band (.osfp-cta) from src/lib/page-hero.ts
 *   2. a restyle of the legacy content-band classes (region.css) — ONLY inside .osfp, the class a
 *      page's .page-content carries once it uses the new header, so unconverted pages are untouched
 *   3. responsive rules
 * Tokens mirror public/styles/home.css (the homepage keeps its own .osfh scope) but are prefixed
 * --p-: Elementor containers set their own custom properties (--display:flex, --gap, --width...) on
 * every .osf-element, and an unprefixed --display silently turned every heading's font into "flex". No 100vw anywhere:
 * the owner does not accept horizontal scrolling (website/CLAUDE.md).
 */
.osfp, .osfp-hero, .osfp-cta {
  --p-o: #f48f20; --p-o-hi: #ffa846; --p-o-ink: #a85f0c;
  --p-ink: #161616; --p-char: #1d1d1d; --p-text: #3b4046; --p-muted: #62686f;
  --p-line: #e4e4e1; --p-tint: #f5f5f3; --p-cream: #fff6ec; --p-r: 12px;
  --p-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --p-display: "Days One", "Roboto", sans-serif;
  --p-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The Hello theme caps .site-main at 500-1140px on any page whose body lacks an osf-page-* class,
   which is every generated page. Converted pages need full-width bands, so lift it for them. */
body:not([class*=osf-page-]) .site-main:has(> .page-content.osfp) { max-width: none; }

/* ---------- 1a. page header ---------- */
.osfp-hero {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  background: #111; color: rgba(255,255,255,.85); font-family: var(--p-body);
  padding: 196px 0 64px; min-height: 440px;
}
.osfp-hero *, .osfp-cta * { box-sizing: border-box; }
.osfp-hero-bg {
  position: absolute; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center;
}
.osfp-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% 50%, rgba(12,12,12,.6) 0%, rgba(12,12,12,.78) 75%),
    linear-gradient(0deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,0) 45%);
}
/* A page-specific photograph (the metro skylines, src/data/skylines.ts) gets a LIGHTER scrim: dark
   at the top for the header, a soft pool behind the copy, and the picture left readable. Owner,
   2026-09-30, on the redesign that had darkened everything alike: "less design and less eye
   catching". The copy carries a shadow instead of relying on the scrim alone. */
.osfp-hero--photo::before {
  background:
    radial-gradient(ellipse 58% 60% at 50% 58%, rgba(12,12,12,.42) 0%, rgba(12,12,12,0) 100%),
    linear-gradient(180deg, rgba(12,12,12,.7) 0%, rgba(12,12,12,.3) 34%, rgba(12,12,12,.3) 66%, rgba(12,12,12,.62) 100%);
}
.osf-kit-9 .osfp-hero--photo h1, .osfp-hero--photo .osfp-crumbs { text-shadow: 0 2px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
.osfp-hero .osfp-wrap { text-align: center; }
.osfp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.osfp-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0 0 18px; padding: 0; list-style: none; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.osfp-crumbs li { display: inline-flex; align-items: center; color: var(--p-o-hi); }
.osfp-crumbs li + li::before { content: "/"; margin: 0 .7em; color: rgba(255,255,255,.4); }
.osf-kit-9 .osfp-crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.osf-kit-9 .osfp-crumbs a:hover { color: #fff; }
.osf-kit-9 .osfp-hero h1 {
  max-width: 900px; margin: 0 auto 28px; padding: 0; color: #fff; text-transform: none;
  font-family: var(--p-display); font-weight: 400; letter-spacing: -.005em;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem); line-height: 1.1;
}
.osfp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.osfp-hero .osfp-actions { justify-content: center; }

/* buttons (same as the homepage's) */
.osf-kit-9 a.osfp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .8rem 1.4rem; border-radius: 8px; border: 2px solid transparent;
  font-family: var(--p-display); font-size: .9rem; line-height: 1.2; letter-spacing: .01em; text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.osf-kit-9 a.osfp-btn:hover { transform: translateY(-1px); }
.osf-kit-9 a.osfp-btn--primary { background: var(--p-o); color: var(--p-ink); }
.osf-kit-9 a.osfp-btn--primary:hover { background: var(--p-o-hi); }
.osf-kit-9 a.osfp-btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.osf-kit-9 a.osfp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.osf-kit-9 a.osfp-btn--dark { background: var(--p-ink); color: #fff; }
.osf-kit-9 a.osfp-btn--dark:hover { background: #333; }
.osf-kit-9 a.osfp-btn--outline { border-color: var(--p-ink); color: var(--p-ink); }
.osf-kit-9 a.osfp-btn--outline:hover { background: rgba(0,0,0,.06); }
/* keep each button's text color on hover: pre-shared.css turns every hovered link in <main> blue
   (.osf-kit-9 main a:hover, 0,2,2), which beat these (0,2,1) on every hero and closing band */
.osf-kit-9 a.osfp-btn--primary:hover, .osf-kit-9 a.osfp-btn--outline:hover { color: var(--p-ink); }
.osf-kit-9 a.osfp-btn--ghost:hover, .osf-kit-9 a.osfp-btn--dark:hover { color: #fff; }
/* plain in-text links on converted pages (migrated copy, the city pages' facility list, the Fit
   Supply line): the brand's link orange, never the old theme's blue */
.osf-kit-9 main.osfp a:not([class]):hover { color: var(--p-o-ink); }
.osfp-btn svg { flex: none; }
.osfp-arrow { transition: transform .15s; }
a:hover > .osfp-arrow { transform: translateX(3px); }
.osf-kit-9 a.osfp-btn:focus-visible { outline: 3px solid var(--p-o); outline-offset: 3px; }

/* ---------- 1b. closing band ---------- */
.osfp-cta { background: var(--p-o); color: var(--p-ink); padding: 56px 0; font-family: var(--p-body); }
.osfp-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.osf-kit-9 .osfp-cta h2 {
  margin: 0; padding: 0; color: var(--p-ink); text-transform: none;
  font-family: var(--p-display); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.15;
}
.osf-kit-9 .osfp-cta h2::after { display: none; }

/* ---------- 2. legacy bands, restyled inside .osfp ---------- */
/* the grey-pattern + orange-shape background the old banner's sibling container painted */
.osfp .osf-element-acb460d { background-image: none !important; }
.osfp .osf-element-acb460d::before { display: none !important; }
.osfp .osf-element-acb460d { --padding-top: 8px; }

/* type */
.osfp .osf-region-block, .osfp .osf-faq { font-family: var(--p-body); color: var(--p-text); }
.osfp .osf-region-block h2, .osfp .osf-region-block h3,
.osfp .container.osf-faq > h2 {
  font-family: var(--p-display); font-weight: 400; color: var(--p-ink); letter-spacing: -.005em;
  font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); line-height: 1.2; text-transform: none;
}
.osfp .osf-region-block p, .osfp .osf-region-block li { font-size: 1.02rem; line-height: 1.72; }
.osf-kit-9 .osfp .osf-region-block a:not(.osf-button):not(.osfp-btn) { color: var(--p-o-ink); text-decoration: underline; text-decoration-color: rgba(168,95,12,.35); text-underline-offset: 3px; }
.osf-kit-9 .osfp .osf-region-block a:not(.osf-button):not(.osfp-btn):hover { color: var(--p-o-ink); text-decoration-color: currentColor; }
.osfp .osf-vertical-capsule { font-size: 1.16rem; line-height: 1.7; color: var(--p-ink); }


/* headings that sit on a dark panel */
.osfp .osf-region-creds h2, .osfp .osf-region-creds h3 { color: #fff; }

/* preventive maintenance tiers (PM_TIERS markup) — the homepage's Silver/Gold/Platinum colors */
.osfp .osf-pm-tiers li { border: 0; border-radius: var(--p-r); box-shadow: var(--p-shadow); overflow: hidden; }
.osfp .osf-pm-tier-name { font-size: 1.12rem; color: var(--p-ink); background: linear-gradient(100deg, #c9ced3, #eef0f2); }
.osfp .osf-pm-tiers li:nth-child(2) .osf-pm-tier-name { background: linear-gradient(100deg, #eeb640, #f9dc92); }
.osfp .osf-pm-tiers li:nth-child(3) .osf-pm-tier-name { background: linear-gradient(100deg, #1b1b1b, #414141); color: #fff; }

/* checklists and symptom lists: orange check marks instead of bullets */
.osfp .osf-pm-checklist { list-style: none; padding-left: 0; }
.osfp .osf-pm-checklist li { position: relative; padding-left: 24px; }
.osfp .osf-pm-checklist li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 11px; height: 6px;
  border-left: 2px solid var(--p-o); border-bottom: 2px solid var(--p-o); transform: rotate(-45deg);
}
.osfp .osf-symptom-list li { border-radius: 0; }

/* FAQs: two across and quieter (owner, 2026-09-30: "make the faq's in 2 rows so they are not so
   prominent ... not such a long string"), and FOLDED (same day: "accordion style so we get the
   credit for rankings but do not have to have the full thing exposed"). Base.astro rewrites every
   .osf-faq-item into <details>/<summary> — src/lib/faq-accordion.ts, which says why the answers
   keep their ranking value. align-items: start so opening one does not stretch its row partner.
   The blog's article-width FAQ keeps one column, as a divided list. */
.osfp .container.osf-faq:not(.blog-faq) {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 0 56px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start;
}
.osfp .container.osf-faq > h2 { grid-column: 1 / -1; margin: 0 0 6px; }
.osfp .container.osf-faq > script { display: none; }
.osfp .container.osf-faq:not(.blog-faq) details.osf-faq-item {
  display: block; height: auto; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--p-line); border-radius: var(--p-r); overflow: hidden; background: #fff; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.osfp .container.osf-faq:not(.blog-faq) details.osf-faq-item:hover { border-color: #cfcfca; }
.osfp .container.osf-faq:not(.blog-faq) details.osf-faq-item[open] { border-color: var(--p-o); box-shadow: var(--p-shadow); }
.osfp .container.osf-faq .osf-faq-sum .osf-faq-icon {
  flex: 0 0 auto; align-self: center; clip-path: none; background: none; padding: 0;
}
.osfp .container.osf-faq .osf-faq-icon svg {
  display: block; width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--p-o); box-sizing: border-box;
}
.osf-kit-9 .osfp .container.osf-faq .osf-faq-q { flex: 1; color: var(--p-ink); font-size: 1rem; line-height: 1.35; margin: 0; }
.osfp .container.osf-faq:not(.blog-faq) details .osf-faq-body { padding: 0 18px 18px 60px; }
.osfp .container.osf-faq .osf-faq-a { color: var(--p-text); font-size: .94rem; line-height: 1.62; margin: 0; }

/* the summary row, shared by every FAQ on the site (homepage included) */
summary.osf-faq-sum {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer;
  list-style: none; -webkit-user-select: none; user-select: none;
}
summary.osf-faq-sum::-webkit-details-marker { display: none; }
summary.osf-faq-sum::marker { content: ""; }
summary.osf-faq-sum:focus-visible { outline: 3px solid #f48f20; outline-offset: -3px; }
.osf-faq-chev {
  flex: none; width: 9px; height: 9px; margin: 0 4px 4px 6px;
  border-right: 2px solid #a85f0c; border-bottom: 2px solid #a85f0c; transform: rotate(45deg); transition: transform .2s;
}
details[open] > summary .osf-faq-chev { transform: rotate(-135deg); margin-bottom: -4px; }

/* blog posts: one column, a divided list rather than cards */
.container.osf-faq.blog-faq details.osf-faq-item {
  display: block; padding: 0; margin: 0; border: 0; border-bottom: 1px solid rgba(0,0,0,.1);
  border-radius: 0; box-shadow: none; background: none; overflow: visible;
}
.container.osf-faq.blog-faq details.osf-faq-item:last-of-type { border-bottom: 0; }
.container.osf-faq.blog-faq summary.osf-faq-sum { padding: 16px 0; }
.container.osf-faq.blog-faq .osf-faq-q { flex: 1; margin: 0; font-size: 1.15rem; line-height: 1.35; }
.container.osf-faq.blog-faq details .osf-faq-body { padding: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .osf-faq-chev { transition: none; } }
@media (max-width: 640px) {
  summary.osf-faq-sum { padding: 14px 16px; }
  .osfp .container.osf-faq:not(.blog-faq) details .osf-faq-body { padding: 0 16px 16px 58px; }
}

/* Elementor buttons still inside converted pages take the new button shape */
.osf-kit-9 .osfp .osf-button {
  border-radius: 8px !important; box-shadow: none !important; outline: 0 !important;
  font-family: var(--p-display) !important; text-transform: none !important; letter-spacing: .01em !important;
  background-color: var(--p-o) !important; color: var(--p-ink) !important; border: 0 !important;
}
.osf-kit-9 .osfp .osf-button svg { fill: currentColor; }
/* the old theme drew a second 1px orange frame 5px outside every button with ::before */
.osf-kit-9 .osfp .osf-button::before, .osf-kit-9 .osfp .osf-button::after { display: none !important; }
.osf-kit-9 .osfp .osf-button.osf-size-sm { padding: .8rem 1.35rem !important; font-size: .9rem !important; }

/* old labels are lowercase text the theme displayed in capitals ("contact us"); sentence case now */
.osf-kit-9 .osfp .osf-button .osf-button-text { display: inline-block; }
.osf-kit-9 .osfp .osf-button .osf-button-text::first-letter { text-transform: uppercase; }

/* the decorative blue corner shape the old theme tucked under intro photos */
.osfp img[src*="about-shape-shadow-img"] { display: none !important; }

/* city pages: the decorative blue shape under the intro photo, and a softer photo corner */
.osfp .osf-element-0cd39e9 { display: none !important; }
.osfp .osf-element-b4923de img { border-radius: var(--p-r); }

/* ---------- 2a. ONE band system for every generated inner page (2026-09-30) ----------
   Owner: "look for uniformity and readability ... make them consistent within a subject matter",
   pointing at the warranty page's brands band — a dark box sitting inside a dark band, a big empty
   left column. The legacy bands had six grounds (cream with an orange rule, #2b2b2b, #f4f4f4,
   #f6f6f6, white, boxed) and a 1040px measure while the FAQ, the case studies and the homepage run
   1180px. Now: every band is full-bleed white with a hairline between bands, content on ONE 1180px
   left edge, prose capped at a readable ~80 characters; the preventive-maintenance band is the one
   tinted ground and the brands/credentials band the one dark ground; no box inside any band. */
.osfp .osf-region-block, .osfp .osf-why-panel, .osfp .osf-closing-panel {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
  padding: 44px max(32px, calc(50vw - 590px)); box-sizing: border-box;
  background: #fff; border: 0; border-top: 1px solid var(--p-line); border-radius: 0; box-shadow: none;
}
.osfp .osf-region-block > .osf-widget-container {
  max-width: none; margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none;
}
.osfp .osf-region-block p, .osfp .osf-region-block .osf-symptom-list, .osfp .osf-region-block .osf-case-list { max-width: 820px; }
.osfp .osf-region-block h2, .osfp .osf-region-block h3 { margin: 0 0 20px; max-width: 900px; }
.osfp .osf-region-block p { margin: 0 0 14px; }
.osfp .osf-region-block ul, .osfp .osf-region-block ol { margin-left: 0; margin-right: 0; }
/* no hairline directly under the page header: the first band opens the page */
.osfp .osf-element-acb460d > .ose-con-inner > .osf-region-block:first-child,
.osfp .osf-element-acb460d > .ose-con-inner > .osf-element:first-child > .ose-con-inner > .osf-region-block:first-child { border-top: 0; }
.osfp .osf-region-block p:last-child { margin-bottom: 0; }
/* the answer capsule that opens the equipment, facility and service pages: a lead paragraph, no box */
.osfp .osf-region-block.osf-why-panel:has(> .osf-widget-container > .osf-vertical-capsule:only-child) { border-top: 0; padding-bottom: 8px; }
.osfp .osf-vertical-capsule { max-width: 900px; font-size: 1.18rem; line-height: 1.7; color: var(--p-ink); }
/* grounds: one tint, one dark, everything else white */
.osfp .osf-region-pm, .osfp .osf-region-refs { background: var(--p-tint); border-top-color: var(--p-tint); }
.osfp .osf-region-creds { background: #161616; border-top: 0; color: rgba(255,255,255,.78); }
.osfp .osf-region-creds p, .osfp .osf-region-creds li { color: rgba(255,255,255,.78); }
.osfp .osf-region-creds strong { color: #fff; }
.osf-kit-9 .osfp .osf-region-creds a:not(.osf-button):not(.osfp-btn) { color: var(--p-o-hi); text-decoration-color: rgba(255,168,70,.4); }
.osf-kit-9 .osfp .osf-region-creds a:not(.osf-button):not(.osfp-btn):hover { color: #fff; }
.osfp .osf-region-creds + .osf-region-block { border-top-color: transparent; }
.osfp .osf-region-pm + .osf-region-block, .osfp .osf-region-refs + .osf-region-block { border-top-color: transparent; }
/* the brand list and the company paragraph sat in two columns with a rule between them, which left
   the column under the heading empty (the owner's screenshot). One column, list first. */
.osfp .osf-region-creds > .osf-widget-container { display: block; }
.osfp .osf-region-creds .osf-brand-list { border: 0; padding: 0; margin: 0 0 14px; font-size: 1.02rem; color: rgba(255,255,255,.86); }
.osfp .osf-region-creds ul:not(.osf-pm-tiers) { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 18px 0 0; padding: 0; }
.osfp .osf-region-creds ul:not(.osf-pm-tiers) li { margin: 0; padding: 14px 16px; list-style: none; border-radius: var(--p-r); background: #232323; border: 1px solid rgba(255,255,255,.06); }
.osfp .osf-region-creds ul:not(.osf-pm-tiers) li::before { display: none; }
/* link rows ("Equipment we repair in X", "Also serving near X", "A recent repair in X", "Other
   equipment we repair"): the heading-left / links-right grid became one column like every band */
.osfp .osf-region-nearby > .osf-widget-container { display: block; }
.osfp .osf-region-nearby > .osf-widget-container > h2, .osfp .osf-region-nearby > .osf-widget-container > h3 { padding-bottom: 12px; margin: 0 0 18px; }
.osfp .osf-region-nearby h2::after, .osfp .osf-region-nearby h3::after { display: block; }
.osfp .osf-region-nearby > .osf-widget-container > p { border-left: 0; padding: 0; margin: 0 0 12px; }
/* the expert quote: a pull quote on white, not a card */
.osfp .osf-region-quote .osf-quote { max-width: 900px; margin: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--p-o); background: none; box-shadow: none; }
.osfp .osf-region-quote .osf-quote-text { font-size: 1.16rem; line-height: 1.65; color: var(--p-ink); font-style: normal; }
/* stat tiles on the hubs and service pages: the homepage's black tiles, on the same edge */
.osfp .container.osf-hub-stats {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 44px max(32px, calc(50vw - 590px)); box-sizing: border-box;
  background: #fff; border-top: 1px solid var(--p-line);
}
.osfp .osf-hub-stats .osf-stat-grid li { background: #161616; border: 0; border-radius: var(--p-r); box-shadow: none; }
.osfp .osf-hub-stats .osf-stat-n { color: var(--p-o-hi); }
.osfp .osf-hub-stats .osf-stat-l { color: rgba(255,255,255,.75); }
/* service/facility/equipment hub cards ("What we do"): black tiles like the homepage */
.osf-kit-9 .osfp a.osf-facility-card {
  background: #161616; border: 1px solid #161616; border-radius: var(--p-r); box-shadow: none; color: #fff;
  transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.osf-kit-9 .osfp a.osf-facility-card:hover { background: #232323; border-color: var(--p-o); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.osfp .osf-facility-card-name { color: #fff; }
.osfp .osf-facility-card-meta { color: rgba(255,255,255,.66); }
.osfp .osf-facility-grid + p, .osfp .osf-facility-grid + * { margin-top: 20px; }
/* city pages: the intro and the facilities band are two-column (text + photo); see region-body.ts */
.osfp .osfp-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.osfp .osfp-split--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.osfp .osfp-split-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--p-r); box-shadow: var(--p-shadow); }
.osfp .osfp-split-text > h2, .osfp .osfp-split-text > h3 { max-width: none; }
.osf-kit-9 .osfp .osfp-split-more a { font-family: var(--p-display); font-size: .92rem; text-decoration: none; border-bottom: 2px solid rgba(168,95,12,.3); padding-bottom: 2px; }
.osf-kit-9 .osfp .osfp-split-more a:hover { border-bottom-color: var(--p-o); }
.osfp-split-more .osfp-arrow { vertical-align: -3px; }
.osfp .osfp-client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 6px 0 18px; }
.osfp .osfp-client-grid ul { list-style: none; margin: 0; padding: 0; }
.osfp .osfp-client-grid li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--p-line); }
.osfp .osfp-client-grid .osf-icon-list-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--p-cream); color: var(--p-o-ink); }
.osfp .osfp-client-grid .osf-icon-list-icon svg { width: 20px; height: 20px; }
.osfp .osfp-client-grid .osf-icon-list-icon svg path { fill: currentColor; }
.osf-kit-9 .osfp .osfp-client-grid a { color: var(--p-ink); text-decoration: none; font-weight: 500; }
.osf-kit-9 .osfp .osfp-client-grid a:hover { color: var(--p-o-ink); }
/* the FAQ block on the same 1180px edge at every width (it sat flush to the viewport at 900-1244px) */
.osfp .container.osf-faq:not(.blog-faq) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding-left: max(32px, calc(50vw - 590px)); padding-right: max(32px, calc(50vw - 590px)); padding-top: 40px; border-top: 1px solid var(--p-line); }
/* every inner-page section heading on one scale (the hub-stats and migrated headings ran larger) */
.osf-kit-9 .osfp .osf-hub-stats h2 { font-size: var(--p-h2); line-height: 1.16; }
.osfp-proof .container.osf-faq:not(.blog-faq) { width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-top: 0; }

/* ---------- 2a-i. VISUAL RHYTHM, restored (owner, 2026-09-30, same day) ----------
   "I like the before better ... the different colors in each section and larger image and larger
   titles." The all-white pass above made the pages uniform but flat. Consistency now comes from each
   band TYPE always getting the same treatment on every page, not from every band being the same:
     why-panel / capsule  light grey + orange top rule   ("Why choose", the opening summary)
     stats                cream + orange top rule        ("what calls look like", how-to, DFW)
     creds                dark + orange top rule         (brands, manufacturers, credentials)
     pm, refs, closing    light grey
     symptoms, link rows, quote, intro, facilities   white
   Section titles use the HOMEPAGE h2 scale everywhere (they had been shrunk to ~29px). The city intro
   is the big photo-left layout again. The single 1180px left edge and no-box-in-a-band both stay. */
.osfp { --p-h2: clamp(1.55rem, 1.05rem + 1.55vw, 2.35rem); }
.osf-kit-9 .osfp .osf-region-block h2, .osf-kit-9 .osfp .osf-region-block h3:not(.osf-faq-q),
.osf-kit-9 .osfp .container.osf-faq > h2, .osf-kit-9 .osfp .osf-hub-stats h2, .osf-kit-9 .osfp-proof h2,
.osf-kit-9 .osfp [data-osf-type="wp-page"] .osf-widget-heading:not(.osf-widget-theme-post-title) :is(h2, h3).osf-heading-title {
  font-size: var(--p-h2); line-height: 1.16;
}
.osf-kit-9 .osfp .osf-region-block h2, .osf-kit-9 .osfp .osf-region-block h3 { max-width: 960px; }
/* a sub-heading INSIDE a band (e.g. "Treadmill repair in Dallas" under "What Dallas service calls usually look like") sits a step below the band title */
.osf-kit-9 .osfp .osf-region-block .osf-widget-container > :is(p, ul, ol) ~ :is(h3, h4) { font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); margin-top: 28px; }
.osfp .osf-region-block.osf-why-panel, .osfp .osf-region-block.osf-closing-panel { background: #f4f4f2; border-top: 3px solid var(--p-o); }
.osfp .osf-region-block.osf-region-stats { background: #fdf6ec; border-top: 3px solid var(--p-o); }
.osfp .osf-region-block.osf-region-creds { background: #1f1f1f; border-top: 3px solid var(--p-o); }
.osfp .osf-region-block.osf-region-pm, .osfp .osf-region-block.osf-region-refs { background: #f4f4f2; border-top: 1px solid #e6e6e2; }
.osfp .osf-region-block.osf-closing-panel { border-top: 3px solid var(--p-o); }
.osfp .osf-region-block.osf-why-panel:has(> .osf-widget-container > .osf-vertical-capsule:only-child) { border-top: 3px solid var(--p-o); padding-bottom: 40px; }
/* a white band that follows a coloured one needs no rule of its own */
.osfp :is(.osf-why-panel, .osf-region-stats, .osf-region-creds, .osf-region-pm, .osf-region-refs, .osf-closing-panel) + .osf-region-block:not(.osf-why-panel, .osf-region-stats, .osf-region-creds, .osf-region-pm, .osf-region-refs, .osf-closing-panel) { border-top-color: transparent; }
.osfp .osf-region-creds .osf-widget-container ul:not(.osf-pm-tiers) li { background: #2a2a2a; }
/* city intro: the big photo on the left, the title large, as it was */
/* bands sit flush: the Elementor wrapper's 70px flex gap showed as white strips between coloured bands */
.osfp .ose-con-inner:has(> .osf-region-block), .osfp .ose-con-inner:has(> .osf-why-panel) { gap: 0 !important; row-gap: 0 !important; }
.osfp .osf-region-intro .osfp-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; }
.osfp .osf-region-intro .osfp-split-media { order: -1; }
.osfp .osf-region-intro .osfp-split-media img { aspect-ratio: auto; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.osf-kit-9 .osfp .osf-region-intro h2 { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.12; }
.osfp .osf-region-intro, .osfp .osf-region-clients { padding-top: 56px; padding-bottom: 56px; }
.osfp .osf-region-clients .osfp-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
.osfp .osf-region-clients .osfp-split-media img { aspect-ratio: auto; box-shadow: 0 18px 50px rgba(0,0,0,.18); }

/* ---------- 2a-ii. the migrated Elementor pages on the same system (2026-09-30) ----------
   About, Contact, Maintenance, Repair, Installation, Assembly, the service-area hub, the blog index
   and the legal pages are still their original Elementor markup under a pageHero(). Their sections
   ran 1360-1400px wide on a faint gym-photo texture, with centred 2.2-3rem headings and justified
   paragraphs — a different site from the bands above. Normalised here, by widget type, so the markup
   (the migration record) stays untouched. */
.osfp [data-osf-type="wp-page"] > .ose-con-boxed { --content-width: 1180px; --padding-left: 32px; --padding-right: 32px; }
/* the faint gym-photo texture behind DARK text on the intro and body sections goes; the two sections
   built as dark photos behind white text (/about-us/ mission and reviews) keep theirs. Listed by id
   from a scan of every migrated page, because a blanket rule blanked the reviews heading. */
.osfp :is(.osf-element-cafcf8d, .osf-element-3482ece, .osf-element-f10f9a9, .osf-element-1bf9b83, .osf-element-973f6a3, .osf-element-e59af3c, .osf-element-0df24f7, .osf-element-b0c0f15) { background-image: none !important; }
.osfp :is(.osf-element-0df24f7, .osf-element-b0c0f15)::before { background-image: none !important; }
.osf-kit-9 .osfp [data-osf-type="wp-page"] .osf-widget-heading:not(.osf-widget-theme-post-title) :is(h2, h3).osf-heading-title {
  font-family: var(--p-display); font-weight: 400; text-transform: none; letter-spacing: -.005em;
  font-size: var(--p-h2); line-height: 1.16; text-align: left;
}
.osfp [data-osf-type="wp-page"] .osf-widget-text-editor { text-align: left; font-size: 1.02rem; line-height: 1.72; }
.osfp [data-osf-type="wp-page"] .osf-widget-text-editor p { text-align: left; }
/* fixed-width heading and text blocks were centred by their column; they start at the content edge now,
   and text blocks stop at a readable measure */
.osfp [data-osf-type="wp-page"] :is(.osf-widget-heading, .osf-widget-text-editor).osf-widget__width-initial { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; }
.osfp [data-osf-type="wp-page"] .osf-widget-text-editor { max-width: 860px; }
.osfp [data-osf-type="wp-page"] .osf-widget-heading:has(:is(h2, h3).osf-heading-title) { align-self: flex-start; }
.osfp [data-osf-type="wp-page"] .osf-widget-button:not(.osf-element-137c8d4c *) { text-align: left; align-self: flex-start; }
.osfp [data-osf-type="wp-page"] .osf-element-f73228c .osf-widget-button { text-align: center; align-self: center; }
/* the shared closing block (Elementor template 573, on six pages): a tinted band, left-aligned,
   the two buttons side by side with no "or" between them */
.osfp .osf-element-161bc7be { --content-width: 1180px; --padding-left: max(32px, calc(50vw - 590px)); --padding-right: max(32px, calc(50vw - 590px)); background: var(--p-tint) !important; background-image: none !important; }
.osfp .osf-element-161bc7be > .ose-con-inner { max-width: none !important; }
.osfp .osf-element-161bc7be { padding-left: max(32px, calc(50vw - 590px)) !important; padding-right: max(32px, calc(50vw - 590px)) !important; }
@media (max-width: 640px) { .osfp .osf-element-161bc7be { padding-left: 16px !important; padding-right: 16px !important; } }
/* its band (161bc7be) supplies the edge; the panel itself must not also go full-bleed (on the service-area
   hub it carries .osf-closing-panel too, which pushed it 20px past the viewport) */
.osfp .osf-element-6ccf65f6 { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; border-top: 0 !important; background: transparent !important; }
.osfp .osf-element-161bc7be > .ose-con-inner { align-items: flex-start !important; }
.osfp .osf-element-6ccf65f6 .osf-widget__width-initial { width: 100% !important; max-width: 860px; }
.osfp .osf-element-6ccf65f6 { background: transparent !important; box-shadow: none !important; }
.osfp .osf-element-137c8d4c { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 12px; }
.osfp .osf-element-137c8d4c .osf-widget-heading { display: none; }
.osf-kit-9 .osfp .osf-element-737623de .osf-button { background: transparent !important; border: 2px solid var(--p-ink) !important; color: var(--p-ink) !important; }
/* full-width Elementor sections put their text and photo rows flush to the viewport edge; the ones that do
   not already hold a boxed section get the same 1180px edge as everything else */
.osfp [data-osf-type="wp-page"] > .ose-con-full:not(:has(.osf-element-161bc7be)) { --padding-left: max(32px, calc(50vw - 590px)); --padding-right: max(32px, calc(50vw - 590px)); }
.osfp [data-osf-type="wp-page"] > .ose-con-full:has(.osf-element-161bc7be) { background: var(--p-tint) !important; background-image: none !important; }
.osfp [data-osf-type="wp-page"] > .ose-con-full:has(.osf-element-161bc7be)::before { display: none !important; }
/* the service-area hub (page 77) kept a dark stats band and an orange-ruled grey panel from an older
   pass; they join the white/tint system, with their text colours to match */
.osfp .container.osf-hub-stats h2, body.osf-page-77 .osfp .osf-hub-stats h2 { color: var(--p-ink) !important; }
.osfp .container.osf-hub-stats p, body.osf-page-77 .osfp .osf-hub-stats p { color: var(--p-text) !important; }
.osfp .container.osf-hub-stats strong, body.osf-page-77 .osfp .osf-hub-stats strong { color: var(--p-ink) !important; }
body.osf-page-77 .osfp .osf-hub-stats { border-top: 1px solid var(--p-line); border-bottom: 0; }
body.osf-page-77 .osfp .osf-hub-panel { background: var(--p-tint) !important; border-top: 0 !important; border-bottom: 0 !important; }
body.osf-page-77 .osfp .osf-suburbs, body.osf-page-77 .osfp .osf-hub-faq { padding-left: max(32px, calc(50vw - 590px)); padding-right: max(32px, calc(50vw - 590px)); }
/* the skewed facility photo the migrated hub and service pages still carry */
.osfp .services-area-img img, .osfp .services-inner-area-img img { clip-path: none !important; border-radius: var(--p-r); }
.osfp [data-osf-type="wp-page"] .osf-widget-image img, .osfp [data-osf-type="wp-page"] .osf-widget-image .osf-widget-container { clip-path: none !important; }
.osfp [data-osf-type="wp-page"] .osf-widget-image img { border-radius: var(--p-r); }

/* blog cards (loop template 318, on the blog index and every post's related articles): the date badge
   was the old theme's blue; brand orange with ink text. And the sidebar search box goes — this is a
   static site with no search endpoint, so it could only ever lead to an error page. */
.osf-318 .osf-element-9bc9777 > .osf-widget-container { background: var(--p-o, #f48f20) !important; }
.osf-318 .osf-element-9bc9777, .osf-318 .osf-element-9bc9777 * { color: #161616 !important; }
.osf-kit-9 .osf-widget-search { display: none !important; }

/* contact page: the Google map on the same edge, rounded, a sensible height */
.osfp .map iframe { display: block; width: min(1180px, calc(100vw - 64px)); height: 420px; margin: 0 auto 48px; border-radius: var(--p-r); }

/* ---------- 2b. case studies, brand pages and their hubs (src/lib/case-study-body.ts) ---------- */
/* full-bleed like the bands, so its content sits on the same 1180px edge at every width */
.osfp-proof { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 8px max(32px, calc(50vw - 590px)) 24px; box-sizing: border-box; font-family: var(--p-body); color: var(--p-text); }
.osfp-proof *, .osfp-proof *::before { box-sizing: border-box; }
.osfp-proof section { padding: 40px 0 0; }
.osf-kit-9 .osfp-proof h2 {
  margin: 0 0 16px; padding: 0; color: var(--p-ink); text-transform: none; letter-spacing: -.005em;
  font-family: var(--p-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); line-height: 1.2;
}
.osf-kit-9 .osfp-proof h2::after { display: none; }
.osf-kit-9 .osfp-proof h3 { margin: 26px 0 8px; padding: 0; color: var(--p-ink); font-family: var(--p-body); font-weight: 700; font-size: 1.1rem; line-height: 1.35; text-transform: none; }
.osfp-proof p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.72; }
.osf-kit-9 .osfp-proof a:not(.osfp-btn) { color: var(--p-o-ink); text-decoration: underline; text-decoration-color: rgba(168,95,12,.35); text-underline-offset: 3px; }
.osf-kit-9 .osfp-proof a:not(.osfp-btn):hover { text-decoration-color: currentColor; }

/* intro: capsule + at-a-glance beside the lead photo */
.osfp-proof-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.osfp-hub-intro { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.osfp-kicker { margin: 0 0 10px; color: var(--p-o-ink); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.osfp-proof .osfp-capsule { font-size: 1.16rem; line-height: 1.7; color: var(--p-ink); margin-bottom: 22px; }
.osfp-glance { margin: 0; padding: 6px 20px; border-radius: var(--p-r); background: var(--p-tint); }
.osfp-glance > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--p-line); }
.osfp-glance > div:first-child { border-top: 0; }
.osfp-glance dt { margin: 0; color: var(--p-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.osfp-glance dd { margin: 0; color: var(--p-ink); font-size: .96rem; line-height: 1.5; }

/* photos */
.osfp-proof-photo { margin: 0; }
.osfp-proof-photo img { display: block; width: 100%; height: auto; border-radius: var(--p-r); box-shadow: var(--p-shadow); background: var(--p-tint); }
.osfp-proof-photo figcaption { margin-top: 10px; color: var(--p-muted); font-size: .88rem; line-height: 1.5; }
.osfp-proof-photo--lead.osfp-proof-photo--portrait { max-width: 440px; justify-self: center; width: 100%; }
.osfp-proof-photo--inline { margin: 8px 0 28px; }
.osfp-proof-photo--inline.osfp-proof-photo--portrait { max-width: 420px; }
.osfp-proof-photo--inline.osfp-proof-photo--landscape { max-width: 560px; }

/* prose column */
.osfp-proof-body { max-width: 820px; }
.osfp-proof-body h2 { margin-top: 18px !important; }
.osfp-proof-body h2:first-child { margin-top: 0 !important; }

/* related-page links: four labelled tiles that wrap, never scroll */
.osfp-linkrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.osfp-linkrow li { margin: 0; }
.osf-kit-9 .osfp-proof .osfp-linkrow a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--p-line); border-radius: var(--p-r);
  background: #fff; color: var(--p-ink); font-weight: 700; line-height: 1.35; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.osf-kit-9 .osfp-proof .osfp-linkrow a:hover { border-color: var(--p-o); box-shadow: var(--p-shadow); }
.osfp-linkrow a span { color: var(--p-muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.osfp-inline-links { max-width: 900px; }
.osfp-more-link { margin-top: 18px; font-weight: 700; }

/* cards (case studies and brands) */
.osfp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.osfp-card { margin: 0; }
.osfp-cards--three { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.osf-kit-9 .osfp-proof .osfp-card a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--p-line); border-radius: var(--p-r);
  background: #fff; color: var(--p-text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.osf-kit-9 .osfp-proof .osfp-card a:hover { transform: translateY(-2px); box-shadow: var(--p-shadow); border-color: #d6d6d2; }
.osfp-card img { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--p-tint); }
.osfp-card-kicker { padding: 16px 18px 0; color: var(--p-o-ink); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.osfp-card-title { padding: 6px 18px 0; color: var(--p-ink); font-family: var(--p-display); font-size: 1.08rem; line-height: 1.3; }
.osfp-card-meta { padding: 8px 18px 18px; color: var(--p-muted); font-size: .92rem; line-height: 1.5; }
.osfp-card--brand .osfp-card-title { font-size: 1.4rem; }
.osfp-card--brand a { border-top: 4px solid var(--p-o) !important; }

/* brand stat card */
.osfp-brand-stat { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: var(--p-r); background: var(--p-char); color: rgba(255,255,255,.82); }
.osfp-brand-n { color: var(--p-o-hi); font-family: var(--p-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; }
.osfp-brand-l { font-size: 1rem; line-height: 1.45; }
.osfp-badge { align-self: flex-start; margin-top: 12px; padding: 6px 12px; border-radius: 999px; line-height: 1.3; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.osfp-badge--on { background: var(--p-o); border-color: var(--p-o); color: var(--p-ink); }
.osfp-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.osfp-lines li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 16px; border-radius: var(--p-r); background: var(--p-tint); font-size: .95rem; line-height: 1.5; }
.osfp-lines strong { color: var(--p-ink); }

/* the "case studies" band on equipment and facility pages (caseStudyBand) */
.osfp .osf-case-list { list-style: none; margin: 0; padding: 0; }
.osfp .osf-case-list li { margin: 0; padding: 10px 0; border-top: 1px solid var(--p-line); }
.osfp .osf-case-list li:first-child { border-top: 0; }
.osfp .osf-case-list li span { display: block; color: var(--p-muted); font-size: .88rem; line-height: 1.4; }

/* FAQs inside these pages sit in the same 1180px column */
.osfp-proof .container.osf-faq:not(.blog-faq) { padding-top: 40px; padding-bottom: 8px; }

/* ---------- 2c. section rhythm (owner, 2026-09-30: "too much space ... in each section to
   section transition") ---------- */
/* Generated pages (equipment, facility, city, service, brand): every band carried a 30px MARGIN on
   top of its 26-34px padding, so a band change was margin + padding + margin + padding, ~130-150px.
   The bands' own colors and rules already separate them; the margins go. */
.osfp .osf-region-block { margin-top: 0; margin-bottom: 0; }
/* Migrated Elementor pages (about, contact, maintenance, repair, installation, ...): each section's
   padding comes from its own --padding-top/-bottom, 56-70px after tools/tighten-section-padding.ts,
   so two sections meeting still made 120-240px. min() CAPS it at 40px and leaves every smaller value
   exactly as it was — the thing that tool's header says CSS could not do. The region bands above
   set their padding in region.css, not through the variables, so they are excluded. */
.osfp .ose-con-full:not(.osf-region-block), .osfp .ose-con > .ose-con-inner {
  padding-block-start: min(var(--padding-block-start, 0px), 40px);
  padding-block-end: min(var(--padding-block-end, 0px), 40px);
}

/* /about-us/ team grid: Elementor declares grid-template-rows repeat(N, 1fr) at every breakpoint, so
   on a phone the eight cards sat in rows each stretched to the tallest card (700px) — a card, then
   300-400px of nothing, then the next. Rows sized to their own content instead. */
.osfp .osf-element-55e3274 { --ose-con-grid-template-rows: none; grid-template-rows: none; grid-auto-rows: auto; }

/* ---------- 3. responsive ---------- */
@media (max-width: 900px) {
  .osfp-hero { padding: 168px 0 48px; min-height: 0; }
  .osfp .osfp-split, .osfp .osfp-split--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .osfp .osfp-split--flip .osfp-split-media { order: 2; }
  .osfp .osf-region-creds ul:not(.osf-pm-tiers) { grid-template-columns: minmax(0, 1fr); }
  .osfp .container.osf-faq:not(.blog-faq) { grid-template-columns: 1fr; padding-left: 32px; padding-right: 32px; }
  .osfp-proof { padding-left: 32px; padding-right: 32px; }
  .osfp-proof .container.osf-faq:not(.blog-faq) { padding-left: 0; padding-right: 0; }
  .osfp-proof-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .osfp-glance > div { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .osfp-wrap { padding: 0 16px; }
  .osfp .osf-region-block, .osfp .osf-why-panel, .osfp .osf-closing-panel, .osfp .container.osf-hub-stats { padding: 32px 16px; }
  .osfp-proof { padding-left: 16px; padding-right: 16px; }
  .osfp [data-osf-type="wp-page"] > .ose-con-boxed { --padding-left: 16px; --padding-right: 16px; }
  .osfp [data-osf-type="wp-page"] > .ose-con-full:not(:has(.osf-element-161bc7be)) { --padding-left: 16px; --padding-right: 16px; }
  .osfp .map iframe { width: calc(100vw - 32px); height: 320px; }
  .osfp .container.osf-faq:not(.blog-faq) { padding-left: 16px; padding-right: 16px; }
  .osfp-proof .container.osf-faq:not(.blog-faq) { padding-left: 0; padding-right: 0; }
  .osfp .osfp-client-grid { grid-template-columns: minmax(0, 1fr); }
  .osfp .osf-hub-stats .osf-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .osfp-hero { padding: 120px 0 40px; }
  .osfp-hero::before { background: linear-gradient(180deg, rgba(12,12,12,.72), rgba(12,12,12,.9)); }
  .osfp-hero--photo::before { background: linear-gradient(180deg, rgba(12,12,12,.7) 0%, rgba(12,12,12,.42) 40%, rgba(12,12,12,.72) 100%); }
  .osfp-actions .osfp-btn { flex: 1 1 100%; }
  .osfp-cta { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .osfp-hero *, .osfp-cta *, .osfp * { transition: none !important; }
}