/* Shared site chrome — ENG1WED-226 stage 2b.
 * Every selector is prefixed `html body[class*="sbf-"]` = (0,2,3) so the SHARED
 * chrome outranks the leftover chrome rules still sitting in the five family
 * stylesheets, which are scoped `body.sbf-<family> .x` = (0,2,2). Those
 * leftovers are the unfinished half of 2b; until they are removed, this file
 * must win. Remove the prefix once the family sheets carry no chrome.
 */
html body[class*="sbf-"] /* Shared,html body[class*="sbf-"] authored site chrome. Family builders do not generate these rules. */
.skip{
  position:fixed!important;
  top:-100px!important;
  left:16px!important;
  z-index:100!important;
  padding:12px 18px!important;
  background:var(--sbf-ink)!important;
  color:var(--sbf-deep)!important;
  font-family:'Manrope',sans-serif!important;
  font-size:var(--sbf-size-small)!important;
  line-height:1.4!important;
  text-decoration:none!important;
}html body[class*="sbf-"] .skip:focus,html body[class*="sbf-"] .skip:focus-visible{top:16px!important;outline:2px solid var(--sbf-ember)!important;outline-offset:3px!important}html body[class*="sbf-"] .site-head{
  position:absolute!important;
  top:48px!important;
  right:58px!important;
  left:109px!important;
  z-index:40!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  pointer-events:none!important;
}html body[class*="sbf-"] .site-head--logo-only{top:48px!important;right:auto!important;left:109px!important}html body[class*="sbf-"] .site-brand-link,html body[class*="sbf-"] .site-menu-toggle{pointer-events:auto!important}html body[class*="sbf-"] .site-brand-link{display:block!important;line-height:0!important}html body[class*="sbf-"] .site-head .brand{display:block!important;width:196px!important;max-width:none!important;height:auto!important}html body[class*="sbf-"] .site-head--logo-only .brand{width:196px!important}html body[class*="sbf-"] .site-menu-toggle,html body[class*="sbf-"] .drawer-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  min-width:88px!important;
  min-height:44px!important;
  padding:10px 0!important;
  border:0!important;
  border-bottom:1px solid var(--sbf-rule-strong)!important;
  background:rgba(11,10,9,.25)!important;
  color:var(--sbf-ink)!important;
  font-family:'Manrope',sans-serif!important;
  font-size:var(--sbf-size-micro)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}html body[class*="sbf-"] .site-menu-toggle:hover,html body[class*="sbf-"] .site-menu-toggle:focus-visible,html body[class*="sbf-"] .drawer-close:hover,html body[class*="sbf-"] .drawer-close:focus-visible{color:var(--sbf-ember)!important;border-color:var(--sbf-ember)!important}html body[class*="sbf-"] .site-menu-mark{position:relative!important;width:17px!important;height:11px!important;border-top:1px solid currentColor!important;border-bottom:1px solid currentColor!important}html body[class*="sbf-"] .site-menu-mark:after{content:""!important;position:absolute!important;top:4px!important;right:0!important;width:11px!important;border-top:1px solid currentColor!important}html body[class*="sbf-"] .site-drawer{
  position:fixed!important;
  inset:0!important;
  z-index:60!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  background:var(--sbf-deep)!important;
  color:var(--sbf-ink)!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .28s ease!important;
}html body[class*="sbf-"] .site-drawer[hidden]{display:none!important}html body[class*="sbf-"] .site-drawer.is-open{opacity:1!important;visibility:visible!important}html body[class*="sbf-"] .drawer-top{flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:28px max(24px,4vw)!important}html body[class*="sbf-"] .drawer-top>a{display:block!important;line-height:0!important}html body[class*="sbf-"] .drawer-brand{display:block!important;width:clamp(150px,15vw,200px)!important;height:auto!important}html body[class*="sbf-"] .drawer-close-mark{position:relative!important;width:16px!important;height:16px!important}html body[class*="sbf-"] .drawer-close-mark:before,html body[class*="sbf-"] .drawer-close-mark:after{content:""!important;position:absolute!important;top:7px!important;left:0!important;width:17px!important;border-top:1px solid currentColor!important;transform:rotate(45deg)!important}html body[class*="sbf-"] .drawer-close-mark:after{transform:rotate(-45deg)!important}html body[class*="sbf-"] .drawer-nav{flex:1 0 auto!important;width:80%!important;max-width:1080px!important;margin:0 auto!important;padding:clamp(64px,10vh,118px) 0 clamp(72px,10vh,120px)!important;border-top:1px solid var(--sbf-rule)!important}html body[class*="sbf-"] .chrome-menu-columns{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:clamp(42px,7vw,96px)!important;align-items:start!important}html body[class*="sbf-"] .drawer-group h2,html body[class*="sbf-"] .foot-col h2{margin:0 0 24px!important;color:var(--sbf-soft)!important;font-family:'Manrope',sans-serif!important;font-size:var(--sbf-size-h2)!important;font-weight:700!important;line-height:var(--sbf-leading-h2)!important;letter-spacing:var(--sbf-tracking-h2)!important;text-transform:uppercase!important}html body[class*="sbf-"] .drawer-group ul,html body[class*="sbf-"] .foot-col ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important}html body[class*="sbf-"] .drawer-group ul{gap:clamp(12px,2.2vh,24px)!important}html body[class*="sbf-"] .drawer-group a{position:relative!important;display:inline-block!important;color:var(--sbf-ink)!important;font-family:'Fraunces',Georgia,serif!important;font-size:var(--sbf-size-h2)!important;font-weight:400!important;line-height:var(--sbf-leading-h2)!important;letter-spacing:var(--sbf-tracking-h2)!important;text-decoration:none!important}html body[class*="sbf-"] .drawer-group a:hover,html body[class*="sbf-"] .drawer-group a:focus-visible,html body[class*="sbf-"] .foot-col a:hover,html body[class*="sbf-"] .foot-col a:focus-visible{color:var(--sbf-ember)!important}html body[class*="sbf-"] .drawer-group a[aria-current="page"]:after{content:""!important;position:absolute!important;top:50%!important;left:calc(100% + 18px)!important;width:32px!important;border-top:1px solid var(--sbf-ember)!important}html body[class*="sbf-"] .drawer-company{flex:0 0 auto!important;width:80%!important;max-width:1080px!important;margin:0 auto!important;padding:22px 0 28px!important;border-top:1px solid var(--sbf-rule)!important;color:var(--sbf-soft)!important;font-family:'Manrope',sans-serif!important;font-size:var(--sbf-size-meta)!important;letter-spacing:.04em!important}html body.drawer-open{overflow:hidden!important}html body[class*="sbf-"] .site-footer{min-height:327px!important;padding:65px 0 0!important;background:var(--sbf-deep)!important;color:var(--sbf-ink)!important;border-top:1px solid var(--sbf-rule)!important;font-family:'Manrope',sans-serif!important}html body[class*="sbf-"] .footer-grid{display:grid!important;width:80%!important;max-width:1080px!important;margin:0 auto!important;grid-template-columns:minmax(180px,1fr) minmax(0,1.25fr)!important;gap:clamp(54px,8vw,120px)!important;align-items:start!important}html body[class*="sbf-"] .foot-brand img{display:block!important;width:150px!important;height:auto!important}html body[class*="sbf-"] .footer-navigation{min-width:0!important}html body[class*="sbf-"] .footer-navigation .chrome-menu-columns{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;gap:clamp(30px,5vw,72px)!important}html body[class*="sbf-"] .foot-col ul{gap:12px!important}html body[class*="sbf-"] .foot-col a{display:inline!important;margin:0!important;color:var(--sbf-ink)!important;font-size:var(--sbf-size-small)!important;line-height:var(--sbf-leading-small)!important;letter-spacing:.01em!important;text-decoration:none!important}html body[class*="sbf-"] .foot-base{width:80%!important;max-width:1080px!important;min-height:66px!important;margin:0 auto!important;padding:22px 0 28px!important;border-top:0!important;color:var(--sbf-soft)!important;font-size:var(--sbf-size-meta)!important;line-height:var(--sbf-leading-meta)!important;letter-spacing:.04em!important}
@media(max-width:900px){html body[class*="sbf-"] .footer-grid{grid-template-columns:1fr!important;gap:42px!important}html body[class*="sbf-"] .footer-navigation .chrome-menu-columns{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}html body[class*="sbf-"] .drawer-nav{width:100%!important;padding:clamp(52px,8vh,82px) var(--sbf-gutter) clamp(64px,9vh,90px)!important}html body[class*="sbf-"] .drawer-company{width:auto!important;max-width:none!important;margin:0 var(--sbf-gutter)!important}
}
@media(max-width:640px){html body[class*="sbf-"] .site-head{top:30px!important;right:20px!important;left:20px!important}html body[class*="sbf-"] .site-head--logo-only{top:30px!important;right:auto!important;left:20px!important}html body[class*="sbf-"] .site-head .brand,html body[class*="sbf-"] .site-head--logo-only .brand{width:132px!important}html body[class*="sbf-"] .site-menu-toggle,html body[class*="sbf-"] .drawer-close{min-width:82px!important}html body[class*="sbf-"] .drawer-top{padding:22px 20px!important}html body[class*="sbf-"] .drawer-brand{width:132px!important}html body[class*="sbf-"] .drawer-nav{padding:38px 20px 56px!important}html body[class*="sbf-"] .drawer-nav .chrome-menu-columns,html body[class*="sbf-"] .footer-navigation .chrome-menu-columns{grid-template-columns:1fr!important;gap:52px!important}html body[class*="sbf-"] .drawer-group a{font-size:var(--sbf-size-h3)!important;line-height:var(--sbf-leading-h3)!important}html body[class*="sbf-"] .drawer-group ul{gap:15px!important}html body[class*="sbf-"] .drawer-group h2{margin-bottom:21px!important}html body[class*="sbf-"] .drawer-company{margin:0 20px!important;padding-bottom:24px!important}html body[class*="sbf-"] .site-footer{padding-top:56px!important}html body[class*="sbf-"] .footer-grid,html body[class*="sbf-"] .foot-base{width:auto!important;margin-right:var(--sbf-gutter)!important;margin-left:var(--sbf-gutter)!important}html body[class*="sbf-"] .foot-base{margin-top:44px!important}
}
@media(prefers-reduced-motion:reduce){html body[class*="sbf-"] .site-drawer{transition:none!important}}
html body[class*="sbf-"] .foot-base{border-top:0!important}

/* Homepage hero: the logo-only header is out of flow, where the homepage's
 * original hero logo was IN flow and pushed the hero copy to the bottom of the
 * frame. Without this the copy collapses to the top and sits under the logo.
 * Restores the ratified composition: logo top-left, copy bottom-left. */
html body[class*="sbf-"].sbf-review45 .hero-inner{display:flex!important;flex-direction:column!important;justify-content:flex-end!important}

/* Chrome headings are LABELS, not document headings. They are <h2> for
 * semantics/accessibility, but the phase-3 type scale gave them the h2 step
 * (60px) and blew the footer apart. Chrome labels take the micro step and the
 * deck takes lead, regardless of tag. */
html body[class*="sbf-"] .foot-col h2,
html body[class*="sbf-"] .drawer-group h2,
html body[class*="sbf-"] .foot-col h3,
html body[class*="sbf-"] .drawer-group h3{
  font-size:var(--sbf-size-micro,11px)!important;line-height:1.4!important;
  font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  font-family:'Manrope',sans-serif!important;color:var(--sbf-soft)!important}

/* Hero text left edge, unified. Stephan 2026-07-31: "let's use the homepage as
 * the correct distance from the left most browser side."
 * Was three different edges reached three different ways:
 *   homepage 109 (padding-left on .hero-inner)
 *   team / screening-room / photography 58 (padding-left 57.6)
 *   contact 130 (margin-left, a centred 1180 shell)
 * All now start at 109. */
html body[class*="sbf-"] section.hero .wrap,
html body[class*="sbf-"] section.hero .hero-inner{
  padding-left:109px!important;margin-left:0!important}
@media(max-width:640px){
  html body[class*="sbf-"] section.hero .wrap,
  html body[class*="sbf-"] section.hero .hero-inner{padding-left:20px!important}}

/* Homepage Emmy receipt overflowed 320px screens by 4px: its grid is
 * `108px + 170px` plus gaps, which cannot fit. Stack it at the narrowest
 * width only; the two-column desktop composition is unchanged. */
@media(max-width:360px){
  html body[class*="sbf-"] .emmy-receipt{grid-template-columns:1fr!important}
}

/* Footer wordmark links home, matching the header and drawer brand links.
 * Those two use `display:block` because each sits in a flex container and so
 * shrink-wraps anyway. `.foot-brand` is a plain block inside a grid column of
 * `minmax(180px,1fr)`, where a block anchor would stretch the hit area across
 * the whole column — a click far to the right of the logo would navigate.
 * `inline-block` shrink-wraps to the 150px image instead.
 *
 * `vertical-align:top` is load-bearing, not decoration: an inline-block sits on
 * the parent's baseline, so `.foot-brand` kept a line-box strut under it and
 * measured 69.9px against the image's 61.5px — which pushed the mobile footer
 * 7.26px taller. Top-aligning collapses the box back onto the image exactly.
 * `line-height:0` matches the header and zeroes the anchor's own leading. */
html body[class*="sbf-"] .foot-brand-link{
  display:inline-block!important;
  vertical-align:top!important;
  line-height:0!important;
}

/* Shared full-bleed closer. Family markup supplies only field content and
 * optional per-instance focus/mobile-height values. */
html body[class*="sbf-"] .sbf-closer{
  position:relative!important;
  min-height:var(--sbf-closer-min-h,82svh)!important;
  padding-block:0!important;
  display:flex!important;
  align-items:center!important;
  text-align:center!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
html body[class*="sbf-"] .sbf-closer-bg{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:var(--sbf-closer-focus,center)!important;
}
html body[class*="sbf-"] .sbf-closer::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:var(--sbf-scrim)!important;
}
@media(max-width:640px){
  html body[class*="sbf-"] .sbf-closer{
    min-height:var(--sbf-closer-min-h-sm,74svh)!important;
  }
}