/* OBRAC_INNER_VISUAL_COHERENCE_V1
 * Shared visual authority for the live Elementor public pages.
 * - current nav item follows the page accent
 * - About / What We Do use the same full-bleed parallax hero language
 * - OBRAC AI VISION / RESEARCH gains a square diagram
 * - Get Involved loses the decorative hero rule and uses compact mobile rhythm
 */

/* Current page in the primary / mobile navigation inherits that page's accent. */
body:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15,.page-id-30){
  --obrac-current-menu-accent:var(--obrac-page-secondary,var(--gi-accent,var(--obrac-accent,#5e00ff)));
}
body:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15,.page-id-30)
:is(.obrac-site-header,.obrac-header-host,header,nav)
a[aria-current="page"]:not(.obrac-brand):not(.obrac-header-cta):not(.obrac-mobile-cta){
  color:var(--obrac-current-menu-accent)!important;
  font-weight:800!important;
  text-shadow:0 0 22px color-mix(in srgb,var(--obrac-current-menu-accent) 24%,transparent)!important;
}

/* -------------------------------------------------------------------------
 * About / What We Do: one hero language, opposite text alignment.
 * JS copies each page's existing licensed hero image into this parallax layer.
 * ---------------------------------------------------------------------- */
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  min-height:clamp(820px,74vw,1060px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#050507!important;
  border:0!important;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
}
body.page-id-11 .obrac-hero.obrac-unified-parallax-hero::before{
  background:
    linear-gradient(90deg,rgba(2,3,2,.96) 0%,rgba(2,3,2,.90) 34%,rgba(2,3,2,.54) 62%,rgba(2,3,2,.12) 100%),
    linear-gradient(180deg,rgba(2,3,2,.06),rgba(2,3,2,.36))!important;
}
body.page-id-13 .obrac-hero.obrac-unified-parallax-hero::before{
  background:
    linear-gradient(270deg,rgba(4,3,1,.96) 0%,rgba(4,3,1,.90) 34%,rgba(4,3,1,.54) 62%,rgba(4,3,1,.12) 100%),
    linear-gradient(180deg,rgba(4,3,1,.05),rgba(4,3,1,.38))!important;
}
body:is(.page-id-11,.page-id-13) .obrac-unified-hero-layer{
  position:absolute!important;
  inset:-8%!important;
  z-index:0!important;
  pointer-events:none!important;
  background-position:var(--obrac-unified-hero-position,center center)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:translate3d(0,0,0) scale(1.06);
  will-change:transform;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero>.obrac-shell{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:none!important;
  min-height:inherit!important;
  margin:0!important;
  padding:0!important;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:none!important;
  min-height:inherit!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
}
body.page-id-11 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid{justify-content:flex-start!important;}
body.page-id-13 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid{justify-content:flex-end!important;}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  width:min(1008px,70vw)!important;
  max-width:none!important;
  min-height:inherit!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.page-id-11 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
  padding:96px 180px 96px max(72px,calc((100vw - 1280px)/2 + 40px))!important;
}
body.page-id-13 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
  padding:96px max(72px,calc((100vw - 1280px)/2 + 40px)) 96px 180px!important;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy>*{
  width:100%;
  max-width:720px;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-media{
  display:none!important;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero :is(.obrac-display,.obrac-display .elementor-heading-title){
  color:#fff!important;
  font-size:clamp(58px,6vw,92px)!important;
  line-height:.96!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}
body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero :is(.obrac-lead,.obrac-lead p){
  color:#f3f1f4!important;
  font-size:19px!important;
  line-height:1.62!important;
}

/* -------------------------------------------------------------------------
 * OBRAC AI: square visual companion for VISION / RESEARCH.
 * ---------------------------------------------------------------------- */
body.page-id-12 .elementor-element-7191136a.obrac-ai-square-ready .elementor-element-7cc81682.obrac-quote{
  position:relative!important;
  min-height:420px!important;
  padding-right:390px!important;
  overflow:hidden!important;
}
body.page-id-12 .obrac-ai-square-diagram{
  position:absolute!important;
  z-index:2!important;
  top:50%!important;
  right:62px!important;
  width:286px!important;
  aspect-ratio:1!important;
  transform:translateY(-50%) rotate(4deg)!important;
  pointer-events:none!important;
  filter:drop-shadow(0 22px 46px color-mix(in srgb,var(--obrac-accent) 16%,transparent));
}
body.page-id-12 .obrac-ai-square-diagram__frame{
  position:absolute;
  inset:0;
  border:1px solid color-mix(in srgb,var(--obrac-accent) 58%,rgba(255,255,255,.18));
  border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--obrac-accent) 6%,transparent),transparent 62%);
}
body.page-id-12 .obrac-ai-square-diagram__frame:nth-child(2){
  inset:17%;
  border-color:color-mix(in srgb,var(--obrac-accent) 42%,rgba(255,255,255,.22));
  border-radius:16px;
  transform:rotate(-8deg);
}
body.page-id-12 .obrac-ai-square-diagram__frame:nth-child(3){
  inset:34%;
  border:2px solid color-mix(in srgb,var(--obrac-accent) 72%,rgba(255,255,255,.18));
  border-radius:10px;
  transform:rotate(10deg);
  box-shadow:inset 0 0 38px color-mix(in srgb,var(--obrac-accent) 7%,transparent);
}
body.page-id-12 .obrac-ai-square-diagram__dot{
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  border-radius:3px;
  background:var(--obrac-accent)!important;
  box-shadow:0 0 24px color-mix(in srgb,var(--obrac-accent) 78%,transparent);
}

/* -------------------------------------------------------------------------
 * Get Involved: remove hero rule everywhere; mobile gets compact rhythm.
 * ---------------------------------------------------------------------- */
body.page-id-14 .elementor-element-62c0d457 .obrac-hero-copy::before{
  content:none!important;
  display:none!important;
}

@media(max-width:1024px){
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero>.obrac-shell,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
    min-height:760px!important;
  }
  body.page-id-11 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
    width:min(760px,86vw)!important;
    padding:76px 120px 76px 32px!important;
  }
  body.page-id-13 .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
    width:min(760px,86vw)!important;
    padding:76px 32px 76px 120px!important;
  }
  body.page-id-12 .obrac-ai-square-diagram{right:34px!important;width:226px!important;}
  body.page-id-12 .elementor-element-7191136a.obrac-ai-square-ready .elementor-element-7cc81682.obrac-quote{padding-right:300px!important;}
}

@media(max-width:767px){
  /* About / What We Do become photographic full-bleed mobile heroes too. */
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero>.obrac-shell,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid,
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
    min-height:660px!important;
  }
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero::before{
    background:linear-gradient(180deg,rgba(3,2,4,.12) 0%,rgba(3,2,4,.34) 40%,rgba(3,2,4,.86) 73%,rgba(3,2,4,.98) 100%)!important;
  }
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-grid{
    justify-content:flex-end!important;
    align-items:stretch!important;
  }
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero .obrac-hero-copy{
    width:100%!important;
    padding:72px 24px 32px!important;
    justify-content:flex-end!important;
  }
  body:is(.page-id-11,.page-id-13) .obrac-hero.obrac-unified-parallax-hero :is(.obrac-display,.obrac-display .elementor-heading-title){
    font-size:clamp(40px,11.6vw,48px)!important;
    line-height:1!important;
  }
  body:is(.page-id-11,.page-id-13) .obrac-unified-hero-layer{
    inset:-10%!important;
  }

  /* Square diagram becomes an in-flow visual below the OBRAC AI copy. */
  body.page-id-12 .elementor-element-7191136a.obrac-ai-square-ready .elementor-element-7cc81682.obrac-quote{
    min-height:0!important;
    padding-right:20px!important;
    overflow:hidden!important;
  }
  body.page-id-12 .obrac-ai-square-diagram{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:min(178px,56vw)!important;
    margin:30px auto 4px!important;
    transform:rotate(4deg)!important;
  }

  /* Fold in the failed earlier mobile Get Involved polish in one durable layer. */
  body.page-id-14 .elementor-element-62c0d457.obrac-hero,
  body.page-id-14 .elementor-element-62c0d457.obrac-hero>.obrac-shell,
  body.page-id-14 .elementor-element-62c0d457.obrac-hero .obrac-hero-grid,
  body.page-id-14 .elementor-element-62c0d457.obrac-hero .obrac-hero-copy{
    min-height:640px!important;
  }
  body.page-id-14 .elementor-element-62c0d457.obrac-hero .obrac-hero-copy{
    justify-content:flex-start!important;
    padding:76px 24px 30px!important;
  }
  body.page-id-14 .obrac-section:not(.obrac-hero)>.obrac-shell{
    padding-top:28px!important;
    padding-bottom:28px!important;
    padding-block:28px!important;
    --padding-top:28px!important;
    --padding-bottom:28px!important;
  }
  body.page-id-14 .obrac-gi-half-parallax,
  body.page-id-14 .obrac-gi-video-story{
    margin-top:24px!important;
    margin-bottom:24px!important;
    margin-block:24px!important;
  }
  body.page-id-14 .elementor-element-849e287f :is(.obrac-grid-3,.obrac-grid-4),
  body.page-id-14 .elementor-element-70edc048 :is(.obrac-grid-3,.obrac-grid-4){
    margin-top:26px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:is(.page-id-11,.page-id-13) .obrac-unified-hero-layer{
    transform:none!important;
    will-change:auto!important;
  }
}