/* ============================================================
   Cinematic Video Hero — module.css
   All selectors namespaced .ibrahero to stay out of theme CSS.
   Timeline is driven by --hero-start and --hero-stagger,
   set per instance from the module fields.
   ============================================================ */
body.ibrahero-overlay .navbar.ibrahero-hdr-bar{
display: none;
}
.ibrahero {
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--hero-h, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-curtain, #0b1015);
  color: var(--hero-text, #f4f1ea);
  --hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Fallback for browsers without svh */
@supports not (height: 100svh) {
  .ibrahero { min-height: 100vh; }
}

/* ---------- Stage: video, poster, scrim ---------- */

.ibrahero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ibrahero__video,
.ibrahero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ibrahero__poster { z-index: 0; }

/* True cross-dissolve.
   The video sits above the poster and fades up over it, while the
   poster holds full opacity underneath and is only switched off once
   the fade has finished. Fading both at once leaves a window where
   neither layer is opaque and the background shows through as a dip
   in brightness — which reads as a flicker rather than a dissolve,
   and gets worse the longer the fade runs. */
.ibrahero.is-playing .ibrahero__poster {
  opacity: 0;
  transition: opacity 1ms linear var(--hero-fade, 2s);
}

.ibrahero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--hero-fade, 2s) cubic-bezier(.37, 0, .28, 1);
}
.ibrahero.is-playing .ibrahero__video { opacity: 1; }

/* Autoplay refused, or mobile set to poster-only: hide the video element */
.ibrahero.is-static .ibrahero__video { display: none; }
.ibrahero.is-static .ibrahero__poster { opacity: 1; }

/* Slow push-in. Starts from a slightly larger scale so the curtain
   lift and the settle read as one movement. */
.ibrahero--kenburns .ibrahero__video,
.ibrahero--kenburns .ibrahero__poster {
  animation: ibrahero-settle 24s var(--hero-ease) forwards;
}
@keyframes ibrahero-settle {
  0%   { transform: scale(1.14); }
  10%  { transform: scale(1.05); }
  100% { transform: scale(1.005); }
}

.ibrahero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgb(0 0 0 / calc(var(--hero-scrim, .45) * 1.35)) 0%,
      rgb(0 0 0 / calc(var(--hero-scrim, .45) * 0.8)) 32%,
      rgb(0 0 0 / calc(var(--hero-scrim, .45) * 0.25)) 62%,
      rgb(0 0 0 / calc(var(--hero-scrim, .45) * 0.45)) 100%),
    radial-gradient(120% 90% at 50% 45%,
      transparent 40%,
      rgb(0 0 0 / calc(var(--hero-scrim, .45) * 0.7)) 100%);
}

.ibrahero__grain {
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: ibrahero-grain 700ms steps(2) infinite;
}
@keyframes ibrahero-grain {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-2%, 1.5%, 0); }
  100% { transform: translate3d(1.5%, -1%, 0); }
}

/* ---------- Opening curtain ---------- */

.ibrahero__curtain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--hero-curtain, #0b1015);
  clip-path: inset(0 0 0 0);
  animation: ibrahero-curtain 1100ms var(--hero-ease-curtain) 120ms forwards;
}
@keyframes ibrahero-curtain {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

/* ---------- Layout ---------- */

.ibrahero__inner {
  position: relative;
  z-index: 8;
  display: flex;
  min-height: inherit;
  height: 100%;
  padding-block: clamp(2rem, 6vw, 6rem);
  padding-inline: calc(clamp(1.5rem, 6vw, 6.5rem) + var(--hero-inset, 0rem));
  box-sizing: border-box;
}

.ibrahero { display: flex; flex-direction: column; }
.ibrahero__inner { flex: 1 1 auto; }

.ibrahero--vtop .ibrahero__inner    { align-items: flex-start; padding-top: clamp(3.5rem, 9vh, 6.5rem); }
.ibrahero--vcenter .ibrahero__inner { align-items: center; }
.ibrahero--vbottom .ibrahero__inner { align-items: flex-end; padding-bottom: clamp(4.5rem, 11vh, 8rem); }

.ibrahero--left   .ibrahero__inner { justify-content: flex-start; }
.ibrahero--center .ibrahero__inner { justify-content: center; }
.ibrahero--right  .ibrahero__inner { justify-content: flex-end; }

.ibrahero__copy {
  max-width: var(--hero-maxw, 820px);
  width: 100%;
  will-change: transform;
  /* Column flex guarantees each child gets its own line regardless of
     which optional fields are filled in. Without this, the headline
     (inline-block) and CTA (inline-flex) collapse onto one line
     whenever the block-level subhead is absent. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ibrahero--center .ibrahero__copy { text-align: center; align-items: center; }
.ibrahero--right  .ibrahero__copy { text-align: right; align-items: flex-end; }

/* ---------- Eyebrow ---------- */

.ibrahero__eyebrow {
  margin: 0 0 clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--hero-ui);
  font-size: clamp(.62rem, .52rem + .28vw, .78rem);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hero-text) 78%, transparent);
  opacity: 0;
  letter-spacing: .62em;
  animation: ibrahero-eyebrow 1500ms var(--hero-ease) forwards;
  animation-delay: var(--hero-start, 1.4s);
}
@keyframes ibrahero-eyebrow {
  0%   { opacity: 0; letter-spacing: .62em; filter: blur(3px); }
  60%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: .26em; filter: blur(0); }
}

/* ---------- Hairline rule ---------- */

.ibrahero__rule {
  display: block;
  width: clamp(56px, 9vw, 108px);
  height: 1px;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  background: linear-gradient(to right,
    var(--hero-accent) 0%,
    color-mix(in srgb, var(--hero-accent) 20%, transparent) 100%);
  transform: scaleX(0);
  transform-origin: right center;
  animation: ibrahero-rule 1000ms var(--hero-ease) forwards;
  animation-delay: calc(var(--hero-start, 1.4s) + .22s);
}
.ibrahero--center .ibrahero__rule { margin-left: auto; margin-right: auto; }
.ibrahero--right  .ibrahero__rule { margin-left: auto; }
@keyframes ibrahero-rule {
  to { transform: scaleX(1); }
}

/* ---------- Headline ---------- */

.ibrahero__headline {
  margin: 0;
  font-family: var(--hero-display);
  font-size: var(--hero-size);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--hero-text);
  text-shadow: 0 2px 40px rgb(0 0 0 / .35);
}

.ibrahero__headline--link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.ibrahero__headline--link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.14em;
  height: 1px;
  background: var(--hero-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 620ms var(--hero-ease);
}
.ibrahero__headline--link:hover::after,
.ibrahero__headline--link:focus-visible::after { transform: scaleX(1); }
.ibrahero__headline--link:focus-visible {
  outline: 1px solid var(--hero-accent);
  outline-offset: .35em;
}

/* Word masks */
.ibrahero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .12em .04em .18em;
  margin: -.12em -.04em -.18em;
}
.ibrahero__word-in {
  display: inline-block;
  will-change: transform, opacity;
  animation-duration: 1250ms;
  animation-timing-function: var(--hero-ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--hero-start, 1.4s) + .42s + (var(--i) * var(--hero-stagger, 110ms)));
}

.ibrahero--wipe .ibrahero__word-in    { animation-name: ibrahero-wipe; }
.ibrahero--rise .ibrahero__word-in    { animation-name: ibrahero-rise; }
.ibrahero--cascade .ibrahero__word    { perspective: 620px; }
.ibrahero--cascade .ibrahero__word-in { animation-name: ibrahero-cascade; transform-origin: 50% 100%; }
.ibrahero--fade .ibrahero__word-in    { animation-name: ibrahero-fade; }

@keyframes ibrahero-wipe {
  0%   { transform: translate3d(115%, 0, 0); opacity: 0; filter: blur(6px); }
  55%  { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
}
@keyframes ibrahero-rise {
  0%   { transform: translate3d(0, 108%, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes ibrahero-cascade {
  0%   { transform: translate3d(0, 55%, 0) rotateX(-72deg); opacity: 0; }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }
}
@keyframes ibrahero-fade {
  0%   { opacity: 0; filter: blur(10px); transform: scale(1.03); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ---------- Subhead ---------- */

.ibrahero__subhead {
  margin: clamp(1.1rem, 2.4vw, 1.7rem) 0 0;
  max-width: 46ch;
  font-family: var(--hero-ui);
  font-size: clamp(.95rem, .88rem + .3vw, 1.12rem);
  font-weight: 400;
  line-height: 1.65;
  color: color-mix(in srgb, var(--hero-text) 82%, transparent);
  opacity: 0;
  animation: ibrahero-soft 1300ms var(--hero-ease) forwards;
  animation-delay: calc(var(--hero-start, 1.4s) + .42s + (var(--hero-words) * var(--hero-stagger, 110ms)) + .1s);
}
.ibrahero--center .ibrahero__subhead { margin-left: auto; margin-right: auto; }
.ibrahero--right  .ibrahero__subhead { margin-left: auto; }
@keyframes ibrahero-soft {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: none; }
}

/* ---------- CTA ---------- */

.ibrahero__cta {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
  font-family: var(--hero-ui);
  font-size: clamp(.72rem, .66rem + .2vw, .84rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hero-text);
  opacity: 0;
  animation: ibrahero-soft 1300ms var(--hero-ease) forwards;
  animation-delay: calc(var(--hero-start, 1.4s) + .42s + (var(--hero-words) * var(--hero-stagger, 110ms)) + .26s);
}
.ibrahero__cta-text {
  position: relative;
  padding-bottom: .55em;
}
.ibrahero__cta-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--hero-text) 42%, transparent);
}
.ibrahero__cta-text::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hero-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 560ms var(--hero-ease);
  z-index: 1;
}
.ibrahero__cta:hover .ibrahero__cta-text::before,
.ibrahero__cta:focus-visible .ibrahero__cta-text::before { transform: scaleX(1); transform-origin: left center; }
.ibrahero__cta-arrow {
  transition: transform 560ms var(--hero-ease);
  color: var(--hero-accent);
}
.ibrahero__cta:hover .ibrahero__cta-arrow { transform: translateX(7px); }
.ibrahero__cta:focus-visible { outline: 1px solid var(--hero-accent); outline-offset: .5em; }

/* ---------- Scroll cue ---------- */

.ibrahero__cue {
  position: absolute;
  z-index: 8;
  right: clamp(1.5rem, 6vw, 6.5rem);
  bottom: clamp(1.6rem, 4vh, 3rem);
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--hero-ui);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hero-text) 60%, transparent);
  opacity: 0;
  animation: ibrahero-soft 1400ms var(--hero-ease) forwards;
  animation-delay: calc(var(--hero-start, 1.4s) + 1.5s);
}
.ibrahero__cue-line {
  position: relative;
  display: block;
  width: 58px;
  height: 1px;
  background: color-mix(in srgb, var(--hero-text) 22%, transparent);
  overflow: hidden;
}
.ibrahero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--hero-accent), transparent);
  transform: translateX(-100%);
  animation: ibrahero-cue 2600ms ease-in-out infinite;
  animation-delay: calc(var(--hero-start, 1.4s) + 2s);
}
@keyframes ibrahero-cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Sound toggle ---------- */

.ibrahero__sound {
  position: absolute;
  z-index: 9;
  left: clamp(1.5rem, 6vw, 6.5rem);
  bottom: clamp(1.6rem, 4vh, 3rem);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .7em 1.15em;
  border: 1px solid color-mix(in srgb, var(--hero-text) 28%, transparent);
  border-radius: 999px;
  background: rgb(0 0 0 / .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--hero-text);
  font-family: var(--hero-ui);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: border-color 400ms ease, background 400ms ease;
  animation: ibrahero-soft 1200ms var(--hero-ease) forwards;
  animation-delay: calc(var(--hero-start, 1.4s) + 1.7s);
}
.ibrahero__sound:hover { border-color: var(--hero-accent); background: rgb(0 0 0 / .38); }
.ibrahero__sound:focus-visible { outline: 1px solid var(--hero-accent); outline-offset: .3em; }
.ibrahero__sound .ibrahero__wave { opacity: 0; transition: opacity 260ms ease; }
.ibrahero__sound .ibrahero__mute { opacity: 1; transition: opacity 260ms ease; }
.ibrahero__sound[aria-pressed="true"] .ibrahero__wave { opacity: 1; color: var(--hero-accent); }
.ibrahero__sound[aria-pressed="true"] .ibrahero__mute { opacity: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  /* Inset is a desktop-only refinement — there's no room to spare here */
  .ibrahero__inner { padding-inline: 1.5rem; }
  .ibrahero--vbottom .ibrahero__inner { padding-bottom: 6.5rem; }
  .ibrahero--vtop .ibrahero__inner { padding-top: 2.5rem; }
  .ibrahero__headline { line-height: 1.02; }
  .ibrahero__subhead { max-width: none; }
  .ibrahero__cue { display: none; }
  .ibrahero__sound {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.4rem;
  }
  /* Wipe-from-the-right gets cramped on narrow screens */
  .ibrahero--wipe .ibrahero__word-in { animation-name: ibrahero-rise; }
}

/* Poster-only on mobile */
@media (max-width: 780px) {
  .ibrahero--posterphone .ibrahero__video { display: none; }
  .ibrahero--posterphone .ibrahero__poster { opacity: 1; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ibrahero__curtain { display: none; }
  .ibrahero__grain { animation: none; }
  .ibrahero--kenburns .ibrahero__video,
  .ibrahero--kenburns .ibrahero__poster { animation: none; transform: none; }
  .ibrahero__eyebrow,
  .ibrahero__subhead,
  .ibrahero__cta,
  .ibrahero__cue,
  .ibrahero__sound {
    animation: ibrahero-plain 500ms ease forwards;
    animation-delay: .2s;
  }
  .ibrahero__word-in {
    animation: ibrahero-plain 500ms ease forwards;
    animation-delay: calc(.3s + (var(--i) * 60ms));
    filter: none;
  }
  .ibrahero__rule { animation: ibrahero-plain 500ms ease forwards; transform: scaleX(1); animation-delay: .25s; }
  .ibrahero__cue-line::after { animation: none; opacity: 0; }
  @keyframes ibrahero-plain {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---------- HubSpot editor preview ----------
   Skip the curtain in-editor so content stays visible while editing. */
body.hs-inline-edit .ibrahero__curtain { display: none; }
body.hs-inline-edit .ibrahero__word-in,
body.hs-inline-edit .ibrahero__eyebrow,
body.hs-inline-edit .ibrahero__subhead,
body.hs-inline-edit .ibrahero__cta { animation-delay: 0s !important; }

/* ---------- Fixed-ratio height variant ----------
   Replaces the per-instance ID rule from the earlier build. */
.ibrahero--ratio { min-height: 0; }
.ibrahero--ratio .ibrahero__stage { position: relative; aspect-ratio: 16 / 9; min-height: 420px; }
.ibrahero--ratio .ibrahero__inner { position: absolute; inset: 0; }
.ibrahero--ratio { position: relative; }

/* ---------- Safety net ----------
   If the CSS loads but JS never runs, the curtain must never be
   able to sit over the content permanently. The animation is
   forwards-filling, but this guarantees the end state. */
.ibrahero__curtain { animation-fill-mode: forwards; }
.ibrahero:not(.ibrahero--curtain) .ibrahero__curtain { display: none; }

/* ============================================================
   Theme-override guards
   The FAES theme styles links globally (colour, weight, family,
   underline) with selectors that outrank plain classes. Anchors
   inside the hero must ignore all of it in every state — a
   headline that turns purple on hover reads as a broken link.
   Kept scoped to .ibrahero so nothing else on the site changes.
   ============================================================ */

.ibrahero a.ibrahero__headline--link,
.ibrahero a.ibrahero__headline--link:link,
.ibrahero a.ibrahero__headline--link:visited,
.ibrahero a.ibrahero__headline--link:hover,
.ibrahero a.ibrahero__headline--link:focus,
.ibrahero a.ibrahero__headline--link:active {
  color: var(--hero-text) !important;
  font-family: var(--hero-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ibrahero a.ibrahero__cta,
.ibrahero a.ibrahero__cta:link,
.ibrahero a.ibrahero__cta:visited,
.ibrahero a.ibrahero__cta:hover,
.ibrahero a.ibrahero__cta:focus,
.ibrahero a.ibrahero__cta:active {
  color: var(--hero-text) !important;
  font-family: var(--hero-ui) !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Headline typography — same reasoning, non-link variant */
.ibrahero h1.ibrahero__headline {
  font-family: var(--hero-display) !important;
  font-weight: 400 !important;
  color: var(--hero-text) !important;
}

/* The hover underline spans the link box. On a headline that wraps to
   two lines that box is full width, so pin the rule to the text block
   rather than letting it run the whole column. */
.ibrahero__headline--link { width: fit-content; max-width: 100%; }
.ibrahero--right .ibrahero__headline--link { margin-left: auto; }
.ibrahero--center .ibrahero__headline--link { margin-inline: auto; }

/* Keep the CTA clear of the headline's hover underline */
.ibrahero__cta { flex: 0 0 auto; }

/* ============================================================
   Responsive refinements
   ============================================================ */

/* --- Phones ---------------------------------------------------
   The eyebrow is the weak point: a long uppercase string at .26em
   letterspacing eats roughly a third more width than the same text
   set normally, so "International Biomedical Research Association"
   wraps to four ragged lines on a 375px screen. The animation sets
   letter-spacing via a forwards-filling keyframe, so a plain
   override can't win — it needs its own keyframe. */
@media (max-width: 560px) {
  .ibrahero__eyebrow {
    font-size: .56rem;
    line-height: 1.7;
    animation-name: ibrahero-eyebrow-sm;
  }
  @keyframes ibrahero-eyebrow-sm {
    0%   { opacity: 0; letter-spacing: .34em; filter: blur(3px); }
    60%  { opacity: 1; }
    100% { opacity: 1; letter-spacing: .13em; filter: blur(0); }
  }

  /* Full-viewport grain layer is a costly repaint on low-end phones
     and the texture is barely visible at this size anyway */
  .ibrahero__grain { display: none; }

  .ibrahero__rule { width: clamp(40px, 14vw, 64px); }
  .ibrahero__cta { letter-spacing: .14em; }
}

/* --- Landscape phones -----------------------------------------
   100svh is only ~360px tall here. Without this the lower-third
   padding plus a two-line headline overflows the frame. */
@media (max-height: 500px) and (orientation: landscape) {
  .ibrahero { min-height: 440px; }
  .ibrahero__inner { padding-block: 1.4rem; }
  .ibrahero--vbottom .ibrahero__inner { padding-bottom: 2rem; }
  .ibrahero--vtop .ibrahero__inner { padding-top: 1.6rem; }
  .ibrahero__headline { font-size: clamp(1.8rem, 1rem + 5vh, 3rem); }
  .ibrahero__eyebrow { margin-bottom: .55rem; }
  .ibrahero__rule { margin-bottom: .7rem; }
  .ibrahero__subhead { margin-top: .6rem; }
  .ibrahero__cta { margin-top: .9rem; }
  .ibrahero__cue { display: none; }
}

/* --- Very narrow (320px) --------------------------------------
   Right-aligned text in a 320px column leaves almost no measure.
   Fall back to left alignment so lines stay readable. */
@media (max-width: 380px) {
  .ibrahero--right .ibrahero__copy { text-align: left; align-items: flex-start; }
  .ibrahero--right .ibrahero__headline--link { margin-left: 0; }
  .ibrahero--right .ibrahero__rule,
  .ibrahero--right .ibrahero__subhead { margin-left: 0; margin-right: auto; }
}

/* --- Overflow safety -------------------------------------------
   A long unbroken word (a URL, a compound term) inside the wipe
   mask can push past the frame. The section clips, so this never
   creates a horizontal scrollbar, but the text would be cut off. */
.ibrahero__headline { overflow-wrap: break-word; }
.ibrahero__word { max-width: 100%; }
.ibrahero__eyebrow, .ibrahero__subhead { overflow-wrap: break-word; }

/* ---------- Header overlay support ----------
   Classes here are applied at runtime by module.js after it locates
   the real header wrapper. Only the solid-state colour is emitted
   per instance from module.html. */

.ibrahero-hdr {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 40;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  transition: background-color .4s ease;
}

/* Full-width children are the bars carrying the opaque background */
.ibrahero-hdr-bar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
}
.ibrahero-hdr-bar::before,
.ibrahero-hdr-bar::after {
  background: transparent !important;
  background-image: none !important;
}

/* Only tagged on elements visible at load, so collapsed dropdown
   panels keep the theme's own colours */
.ibrahero-hdr-lit,
.ibrahero-hdr-lit > a,
.ibrahero-hdr-lit > span {
  color: #fff !important;
  text-shadow: 0 1px 12px rgb(0 0 0 / .45);
}

.ibrahero-hdr-logo { filter: brightness(0) invert(1); }

body.ibrahero-hdr-solid .ibrahero-hdr {
  position: fixed !important;
  animation: ibrahero-hdrdrop .45s cubic-bezier(.16,1,.3,1) both;
}
body.ibrahero-hdr-solid .ibrahero-hdr-lit,
body.ibrahero-hdr-solid .ibrahero-hdr-lit > a { text-shadow: none; }

/* Shared keyframe */
@keyframes ibrahero-hdrdrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.ibrahero-hdr-solid .ibrahero-hdr { animation: none !important; }
}

/* Thin empty elements — hamburger bars, dividers — are coloured with
   background-color rather than color, so the text rules never reach
   them. Matched by shape in module.js, not by class name. */
.ibrahero-hdr-mark {
  background-color: #fff !important;
  background-image: none !important;
}
body.ibrahero-hdr-solid .ibrahero-hdr-mark { background-color: #fff !important; }

/* The header's main row — side padding is set per instance from
   module.html so it can be matched to the hero's edge spacing. */
.ibrahero-hdr-row { box-sizing: border-box; }


/* Hero content shares the site container, so the headline lines up
   with the logo and menu above it rather than sitting on its own
   margins. Width comes from the Site container width field. */
.ibrahero--contained .ibrahero__inner {
  max-width: var(--hero-container, 1400px);
  margin-inline: auto;
  width: 100%;
  padding-inline: calc(var(--hero-pad, 1.5rem) + var(--hero-inset, 0rem));
}
@media (max-width: 780px) {
  .ibrahero--contained .ibrahero__inner { padding-inline: 1.25rem; }
}

/* ============================================================
   Page-scoped theme overrides
   These apply only on pages carrying the hero, via the body classes
   the module sets. Safe to extend — anything under .ibrahero-overlay
   affects the video pages and nothing else on the site.
   ============================================================ */

/* Logo sits in a white plate in the theme. Drop the plate over the
   video but keep the vertical padding, which sets the header height. */
body.ibrahero-overlay header .logo {
  background: transparent !important;
  background-image: none !important;
      padding: 20px 0 0 0 !important;
}