/* ============================================================
   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.
   ============================================================ */

.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;
  transition: opacity 900ms ease 200ms;
}

/* Once the video is confirmed playing, fade the poster out from underneath */
.ibrahero.is-playing .ibrahero__poster { opacity: 0; }

.ibrahero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease;
}
.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; }
}