/* The Boardroom Edit, version five, CR6 (8 Oct 2026): background video BEHIND text.
   Pattern matched: the v3/v4 home "v3-videohero" (full-bleed, object-fit:cover video absolutely positioned
   behind the content, cream wash for legibility, muted autoplay loop playsinline, poster, pause button,
   reduced motion keeps the poster), as on melodywilding.com (Elementor background-video + overlay).
   No new site-wide motion: no scroll fades, hover lifts, parallax or page transitions. */

/* ---- 1. How I work hero: the video fills the city scene behind the hero panel ---- */
.v5-bghero{overflow:hidden;padding-bottom:clamp(110px,11vw,170px);background:var(--c-latte)}
.v5-bghero>.v5-bghero__media{position:absolute;inset:0;z-index:0;transform:none;animation:none!important}
.v5-bghero__media picture,.v5-bghero__media img,.v5-bghero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;border-radius:0}
.v5-bghero__media video{opacity:0;transition:opacity 1.2s ease}
.v5-bghero__media video.is-playing{opacity:1}
/* cream on the text side, warm clay tint, dark green settling into the base (as the v3 home video section) */
.v5-bghero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(247,243,236,.28) 0%,rgba(247,243,236,.2) 40%,rgba(241,227,208,.06) 72%,rgba(241,227,208,0) 100%),
    linear-gradient(0deg,rgba(27,56,45,.26) 0%,rgba(27,56,45,0) 40%)}
.v5-bghero__wash::after{content:"";position:absolute;inset:0;background:rgba(214,150,96,.14);mix-blend-mode:multiply}
.v5-bghero.city-scene::after{z-index:1}
/* CR6 addendum (8 Oct 2026, Sophie): the hero panel is see-through so the video shows behind the text.
   Fallback (no backdrop-filter support): 78% latte. With blur support: 55% latte + 6px blur.
   A soft cream text halo keeps WCAG AA on the busiest frames (checked with tools-v5/contrast_hiw_v5.py). */
.v5-bghero .page-header{z-index:2;background-color:rgba(241,227,208,.78)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .v5-bghero .page-header{background-color:rgba(241,227,208,.55);-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05)}
}
/* small text over moving footage: deeper clay label and darker breadcrumb (same hues) so AA holds on every frame */
.v5-bghero .page-header .kicker{color:#7f3714}
.v5-bghero .page-header .breadcrumb,.v5-bghero .page-header .breadcrumb a{color:#3a332c}
.v5-bghero .page-header :is(h1,.page-lede,.kicker,.breadcrumb){text-shadow:0 0 2px rgba(247,243,236,.9),0 0 7px rgba(247,243,236,.85),0 0 16px rgba(247,243,236,.6)}
.v5-bghero .v3-videohero__toggle{z-index:3;right:max(var(--pad-x,1.25rem),calc(50vw - 50% + var(--s-4)));left:auto;bottom:calc(var(--s-4) + 6px)}
@media (max-width:640px){
  .v5-bghero{padding-bottom:96px}
  .v5-bghero__media picture,.v5-bghero__media img,.v5-bghero__media video{object-position:50% 30%}
  .v5-bghero .v3-videohero__toggle{left:var(--pad-x,1.25rem);right:auto;bottom:1rem}
}

/* ---- 2. How I work: short personal intro (same panel as the v5 home intro) ---- */
.v5-hiw-intro{margin-top:var(--s-6)}

/* ---- 3. Home: Room Method over the background video ---- */
.v3-videohero .v5-bgv-media{position:absolute;inset:0;z-index:-2;transform:none;animation:none!important}
.v3-videohero .v5-bgv-media picture{position:absolute;inset:0}
.v5-howbg .v3-videohero__content{max-width:40rem}
.v5-howbg .kicker{margin:0 0 var(--s-2)}
.v5-howbg h2{margin:0 0 var(--s-2);font-size:clamp(1.9rem,1.4rem + 1.8vw,2.9rem);line-height:1.08;letter-spacing:-.02em}
.v5-howbg .v5-howbg__line{margin:0 0 var(--s-4);font-size:1.0625rem;color:var(--c-ink);max-width:34rem}
.v5-howbg__steps{list-style:none;counter-reset:hs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0}
.v5-howbg__steps li{counter-increment:hs;display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-radius:14px;background:rgba(255,253,249,.88);border:1px solid rgba(35,71,58,.14);font-family:var(--font-serif);font-size:1.125rem;line-height:1.2;color:var(--c-ink)}
.v5-howbg__steps li::before{content:counter(hs);flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--c-accent);color:#fff;font:600 .8125rem/1 var(--font-sans)}
.v5-howbg .v5-more{margin-top:var(--s-4)}
/* CR6 addendum: soft cream halo so the small clay label and the link keep AA over every frame */
.v5-howbg .v3-videohero__content>.kicker{color:#7f3714}
.v5-howbg .v5-more a{color:var(--c-accent-hover,#1a362c)}
.v5-howbg .v5-more{max-width:26rem} /* keeps the link inside the denser part of the wash */
.v5-howbg .v3-videohero__content>:is(.kicker,h2,.v5-howbg__line,.v5-more){text-shadow:0 0 2px rgba(247,243,236,.9),0 0 7px rgba(247,243,236,.85),0 0 16px rgba(247,243,236,.6)}
@media (max-width:640px){
  /* CR6 addendum: the v3 phone wash (88-95% cream) hid the footage; lighter here, with a text halo */
  .v5-howbg .v3-videohero__wash{background:
    linear-gradient(0deg,rgba(247,243,236,.78) 0%,rgba(247,243,236,.7) 55%,rgba(241,227,208,.5) 100%),
    linear-gradient(180deg,rgba(27,56,45,.2) 0%,rgba(27,56,45,0) 40%)}
  .v5-howbg__steps{grid-template-columns:1fr;gap:var(--s-2)}
  .v5-howbg .v3-videohero__content{padding-top:var(--s-7)}
}