/* Buyer's-guide page — "How to choose a Maui wedding videographer".
 *
 * Ported from SBF-Buyers-Guide-Review-04.html (ratified 2026-08-10), rescoped
 * from the review's `.sbf-buyers-guide-review04` to the family body class.
 *
 * NOT in this file, deliberately:
 *   - tokens        : `sbf-tokens` is a registered dependency of `sbf-chrome`.
 *   - @font-face    : same, the token layer owns the faces.
 *   - site chrome   : header, drawer, footer and the skip link all live in
 *                     chrome.css at (0,2,3) + !important and must keep winning.
 *   - .review-flag  : preview-only furniture.
 *
 * `!important` matches the family idiom: Divi is still active on the clone and
 * its stylesheet otherwise reaches p / h2 / ol / li / a on this page.
 *
 * Chrome pins `section.hero .hero-inner { padding-left: 109px }` (20px below
 * 640px) with !important — the settled hero edge. Review 04 uses the same two
 * values, so nothing here fights it.
 */

body.sbf-buyers-guide *,
body.sbf-buyers-guide *::before,
body.sbf-buyers-guide *::after{box-sizing:border-box}

body.sbf-buyers-guide{
  margin:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  background:var(--sbf-deep)!important;
  color:var(--sbf-ink)!important;
  font-family:var(--sbf-font-body)!important;
  font-size:var(--sbf-size-body)!important;
  line-height:var(--sbf-leading-body)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.sbf-buyers-guide img{display:block!important;max-width:100%!important;border:0!important}
body.sbf-buyers-guide main a{color:var(--sbf-ink)}
body.sbf-buyers-guide h1,
body.sbf-buyers-guide main h2{font-family:var(--sbf-font-display)!important;font-weight:400!important;font-optical-sizing:auto;margin:0!important}
body.sbf-buyers-guide h1{font-size:var(--sbf-size-display)!important;line-height:var(--sbf-leading-display)!important;letter-spacing:var(--sbf-tracking-display)!important}
body.sbf-buyers-guide main h2{font-size:var(--sbf-size-h2)!important;line-height:var(--sbf-leading-h2)!important;letter-spacing:var(--sbf-tracking-h2)!important}
/* Divi colours headings #939393. The review artifact had no Divi, so it simply
 * inherited body ink and never needed to say this. Without it all eight
 * questions and the closer render grey. */
body.sbf-buyers-guide h1,
body.sbf-buyers-guide main h2,
body.sbf-buyers-guide main h2 em{color:var(--sbf-ink)!important}
/* No heading, lead or answer may end on a single-word line (DoD 3).
 * `balance` on headings is the family idiom — screening-room, team, contact,
 * story and photography-portfolio all set it. `pretty` is the prose
 * equivalent: it exists specifically to pull a word down and kill the orphan. */
/* Only the question headings need balancing. The hero H1 has no widow it can
 * escape — at 390px "videographer" alone is 309px of a 350px measure, and
 * "wedding videographer" needs 515px — so balancing it only pushes the break
 * further from Review 04 (4 lines instead of 3) without fixing anything. */
body.sbf-buyers-guide .article-body h2{text-wrap:balance!important}
body.sbf-buyers-guide .hero-sub,
body.sbf-buyers-guide .article-body p,
body.sbf-buyers-guide .article-body li{text-wrap:pretty!important}
/* Divi ships `p{padding-bottom:1em}` and pads headings. The review artifact had
 * neither, so every paragraph box measured 71px against the design's 54px and
 * the whole page ran long. Spacing on this page is margin-only, as designed. */
body.sbf-buyers-guide main p,
body.sbf-buyers-guide h1,
body.sbf-buyers-guide main h2{padding:0!important}
body.sbf-buyers-guide .article-body li{padding:0 0 0 10px!important}
body.sbf-buyers-guide main p{margin:0 0 1.15em!important}
body.sbf-buyers-guide main p:last-child{margin-bottom:0!important}
body.sbf-buyers-guide :focus-visible{outline:2px solid var(--sbf-ember);outline-offset:3px}

body.sbf-buyers-guide .wrap{width:100%!important;max-width:var(--sbf-shell)!important;margin:0 auto!important;padding-inline:var(--sbf-gutter)!important}
body.sbf-buyers-guide .section{padding-block:clamp(64px,8vw,104px)!important}
body.sbf-buyers-guide .reading{width:min(100%,var(--sbf-text))!important;margin:0 auto!important}
body.sbf-buyers-guide main .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:.7em!important;margin:0 0 20px!important;
  font-family:var(--sbf-font-body)!important;font-size:var(--sbf-size-meta)!important;font-weight:700!important;
  line-height:var(--sbf-leading-meta)!important;letter-spacing:var(--sbf-tracking-micro)!important;
  text-transform:uppercase!important;color:var(--sbf-quiet)!important}
body.sbf-buyers-guide main .eyebrow::before{content:""!important;width:26px!important;height:1px!important;background:var(--sbf-ember)!important}

/* ---- hero ---- */
body.sbf-buyers-guide .hero{position:relative!important;height:100svh!important;min-height:600px!important;overflow:hidden!important;background:var(--sbf-deep)!important;isolation:isolate!important}
body.sbf-buyers-guide .hero-poster{position:absolute!important;inset:0!important;z-index:-2!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:scaleX(-1)!important}
body.sbf-buyers-guide .hero-veil{position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;
  background:linear-gradient(100deg,color-mix(in srgb,var(--sbf-deep) 80%,transparent) 0%,color-mix(in srgb,var(--sbf-deep) 42%,transparent) 38%,color-mix(in srgb,var(--sbf-deep) 6%,transparent) 66%,color-mix(in srgb,var(--sbf-deep) 30%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--sbf-deep) 72%,transparent) 0%,transparent 44%)!important}
body.sbf-buyers-guide .hero-inner{position:absolute!important;inset:0!important;z-index:2!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;padding:0 var(--sbf-gutter) clamp(52px,7vw,96px)!important}
body.sbf-buyers-guide .hero-copy{max-width:850px!important}
body.sbf-buyers-guide .hero h1{max-width:14ch!important;color:var(--sbf-ink)!important;
  text-shadow:0 1px 3px color-mix(in srgb,var(--sbf-deep) 92%,transparent),0 3px 28px color-mix(in srgb,var(--sbf-deep) 78%,transparent)!important}
body.sbf-buyers-guide .hero-sub{margin:20px 0 0!important;max-width:52ch!important;font-size:var(--sbf-size-lead)!important;font-weight:300!important;line-height:var(--sbf-leading-lead)!important;color:var(--sbf-ink)!important;
  text-shadow:0 1px 3px color-mix(in srgb,var(--sbf-deep) 92%,transparent)!important}
body.sbf-buyers-guide .hero .eyebrow{color:var(--sbf-ink)!important;text-shadow:0 1px 3px color-mix(in srgb,var(--sbf-deep) 92%,transparent)!important}

/* ---- article body ---- */
body.sbf-buyers-guide .article-body{color:var(--sbf-ink)!important;font-size:var(--sbf-size-body)!important;font-weight:300!important;line-height:var(--sbf-leading-body)!important}
/* Divi sets a flat `p{font-size:16px}`, which beats inheritance from
 * .article-body — so paragraphs rendered 16px while their own list items
 * correctly inherited the token. State the step on the element itself. */
body.sbf-buyers-guide .article-body p,
body.sbf-buyers-guide .article-body li{font-size:var(--sbf-size-body)!important;line-height:var(--sbf-leading-body)!important}
body.sbf-buyers-guide .article-body p{margin:0 0 1.35em!important}
body.sbf-buyers-guide .article-body h2{margin:clamp(48px,5vw,72px) 0 clamp(18px,2vw,26px)!important}
body.sbf-buyers-guide .article-body>h2:first-child{margin-top:0!important}
body.sbf-buyers-guide .article-body ol{margin:40px 0!important;padding-left:28px!important;list-style:decimal!important}
body.sbf-buyers-guide .article-body li{margin:0 0 1.35em!important;padding-left:10px!important;list-style:decimal!important}
body.sbf-buyers-guide .article-body li:last-child{margin-bottom:0!important}
body.sbf-buyers-guide .article-body strong{color:var(--sbf-ink)!important;font-weight:600!important}

/* ---- full-bleed body figures ---- */
body.sbf-buyers-guide .wide-frame{width:100%!important;max-width:var(--sbf-shell)!important;margin:0 auto!important;padding-inline:var(--sbf-gutter)!important}
body.sbf-buyers-guide .wide-frame img{width:100%!important;aspect-ratio:2/1!important;object-fit:cover!important;background:var(--sbf-elev)!important}
body.sbf-buyers-guide .wide-frame figcaption{padding-top:12px!important;color:var(--sbf-soft)!important;font-size:var(--sbf-size-micro)!important;font-weight:400!important;line-height:var(--sbf-leading-micro)!important;letter-spacing:var(--sbf-tracking-micro)!important;text-transform:uppercase!important}

/* ---- closing CTA — team family idiom ---- */
body.sbf-buyers-guide .close{position:relative!important;min-height:74svh!important;display:flex!important;align-items:center!important;text-align:center!important;isolation:isolate!important;overflow:hidden!important}
body.sbf-buyers-guide .close-bg{position:absolute!important;inset:0!important;z-index:-2!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 54%!important}
body.sbf-buyers-guide .close::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:color-mix(in srgb,var(--sbf-deep) 68%,transparent)!important}
body.sbf-buyers-guide .close-copy{max-width:850px!important;margin:auto!important}
body.sbf-buyers-guide .button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:50px!important;padding:16px 26px!important;background:var(--sbf-ember)!important;color:var(--sbf-deep)!important;text-decoration:none!important;font-size:var(--sbf-size-meta)!important;font-weight:700!important;line-height:var(--sbf-leading-meta)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
body.sbf-buyers-guide .button:hover{background:var(--sbf-ember-deep)!important}

@media (max-width:640px){
  body.sbf-buyers-guide .hero{min-height:100svh!important}
  body.sbf-buyers-guide .hero-inner{min-height:100svh!important;padding:124px 20px 30px!important;gap:30px!important}
  body.sbf-buyers-guide .hero-copy{align-self:end!important;min-width:0!important}
  body.sbf-buyers-guide .hero .eyebrow{max-width:29ch!important;line-height:var(--sbf-leading-body)!important}
  body.sbf-buyers-guide .hero h1{max-width:12ch!important}
  body.sbf-buyers-guide .hero-sub{font-size:var(--sbf-size-body)!important;line-height:var(--sbf-leading-body)!important}
  body.sbf-buyers-guide .wide-frame img{aspect-ratio:16/10!important}
  body.sbf-buyers-guide .section{padding-block:78px!important}
  body.sbf-buyers-guide .close{min-height:74svh!important}
}

/* closer type parity with team — measured 2026-08-11 */
.sbf-buyers-guide .close-copy .eyebrow,
.close.sbf-closer .close-copy .eyebrow{
  font-size:var(--sbf-size-lead)!important;
  line-height:1.7!important;
  letter-spacing:.17em!important;
  color:var(--sbf-soft)!important;
  max-width:677px!important;
  margin-left:auto!important;margin-right:auto!important;
}
.sbf-buyers-guide .close-copy h2,
.close.sbf-closer .close-copy h2{
  letter-spacing:-.026em!important;
}
.sbf-buyers-guide .close-copy p:not(.eyebrow),
.close.sbf-closer .close-copy p:not(.eyebrow){
  font-size:var(--sbf-size-lead)!important;
  line-height:1.7!important;
  font-weight:400!important;
  max-width:628px!important;
  margin-left:auto!important;margin-right:auto!important;
}
.sbf-buyers-guide .close-copy .button,
.close.sbf-closer .close-copy .button{
  line-height:1.7!important;
}

/* closer eyebrow: no ember rule — team parity */
.close-copy .eyebrow::before,.close.sbf-closer .close-copy .eyebrow::before{content:none!important;display:none!important}