/* V74 — visual polish requested 8 Sep 2026
   - header uses clean Advicedial wordmark only (no descriptor)
   - layer uses navy A only
   - AAA motif visibly transitions into a flat layer
   - repeating A pattern is used more consistently
   - prevent A marks from clipping */

:root{--v74-orange:#FF8A00;--v74-navy:#0A2A3A;--v74-white:#F7F8FA}

/* 1) Main website header: approved Advicedial wordmark only, no descriptor underneath */
header.site-header .brand,
.site-header .brand{overflow:visible!important;display:flex!important;align-items:center!important;min-height:58px!important}
.site-header .brand-logo{
  content:url("assets/adial-branding-kit-and-logos/advicedial_wordmark_on_dark_clean.png")!important;
  width:185px!important;height:auto!important;max-height:46px!important;object-fit:contain!important;object-position:left center!important;
  overflow:visible!important;clip-path:none!important;filter:none!important;
}

/* 2) Never clip the top of an A mark */
.brand-a-motion,.brand-a-motion *,.home-ribbon-logo,.dial-core,.dial-core-logo{overflow:visible!important;clip-path:none!important}

/* 3) More of the repeating AAAA pattern, still subtle */
.hero,.hero-home,.home-hero,.hero-section,.brand-layer-story,.workflow-story,.app-ecosystem,.integration-story,.integration-detail-hero{position:relative!important}
.brand-layer-story:after{
  right:-1%!important;top:2%!important;width:520px!important;height:220px!important;opacity:.10!important;
  background-size:contain!important;
}
.brand-layer-story:before{
  content:"";position:absolute;left:-55px;bottom:4%;width:410px;height:165px;
  background:url("assets/adial-branding-kit-and-logos/repeating-a-pattern.svg") center/contain no-repeat;
  opacity:.055;pointer-events:none;z-index:0;
}
.workflow-story:before,.app-ecosystem:before,.integration-story:before{opacity:.07!important;width:500px!important;height:185px!important}
.integration-detail-hero:after{
  content:"";position:absolute;right:-80px;bottom:-35px;width:430px;height:165px;
  background:url("assets/adial-branding-kit-and-logos/repeating-a-pattern.svg") center/contain no-repeat;
  opacity:.045;pointer-events:none;
}

/* 4) AAA -> A -> flat Layer motion. This is the brand story, not a static decoration. */
.brand-a-motion.brand-aaa{
  position:relative!important;width:330px!important;height:150px!important;margin-top:1.45rem!important;
  overflow:visible!important;isolation:isolate!important;
}
.brand-a-motion.brand-aaa img{
  position:absolute!important;width:92px!important;height:auto!important;left:14px!important;top:34px!important;
  transform-origin:50% 82%!important;filter:drop-shadow(0 0 8px rgba(255,138,0,.16))!important;
  animation:v74-a-to-layer 5.4s cubic-bezier(.4,0,.2,1) infinite!important;
}
.brand-a-motion.brand-aaa img:nth-child(1){opacity:1!important;animation-delay:0s!important}
.brand-a-motion.brand-aaa img:nth-child(2){left:74px!important;top:21px!important;opacity:.48!important;animation-delay:.08s!important}
.brand-a-motion.brand-aaa img:nth-child(3){left:134px!important;top:8px!important;opacity:.20!important;animation-delay:.16s!important}
.brand-a-motion.brand-aaa i{
  position:absolute!important;left:8px!important;bottom:18px!important;width:285px!important;height:20px!important;border-radius:50%!important;
  background:linear-gradient(180deg,#ffc870 0%,#ff9c28 48%,#ff7f08 100%)!important;
  border:1px solid rgba(255,255,255,.66)!important;
  box-shadow:0 0 16px rgba(255,138,0,.55),0 0 35px rgba(255,138,0,.22)!important;
  opacity:0;transform:scaleX(.28) scaleY(.4)!important;transform-origin:18% 50%!important;
  animation:v74-layer-emerge 5.4s cubic-bezier(.4,0,.2,1) infinite!important;
}
.brand-a-motion.brand-aaa i:after{
  content:"";position:absolute;left:10%;right:10%;top:35%;height:34%;border:1px solid rgba(255,255,255,.35);border-radius:50%;
}
@keyframes v74-a-to-layer{
  0%,22%{transform:translate(0,0) scale(1,1);opacity:var(--aOpacity,1)}
  42%{transform:translate(72px,18px) scale(1.08,.92)}
  58%,74%{transform:translate(88px,45px) scale(1.42,.12);opacity:.14}
  86%,100%{transform:translate(0,0) scale(1,1)}
}
@keyframes v74-layer-emerge{
  0%,34%{opacity:0;transform:scaleX(.28) scaleY(.4)}
  55%,76%{opacity:1;transform:scaleX(1) scaleY(1)}
  90%,100%{opacity:0;transform:scaleX(.45) scaleY(.6)}
}

/* 5) Layer logo: use the approved dark/navy A only, large enough to read */
.layer-platform{min-height:154px!important;overflow:visible!important}
.layer-platform img{
  content:url("assets/adial-branding-kit-and-logos/a_mark_crisp_navy.svg")!important;
  width:118px!important;max-width:118px!important;max-height:none!important;height:auto!important;
  filter:none!important;opacity:1!important;z-index:5!important;
}
.layer-platform:after{z-index:1!important}
.layer-platform:before{z-index:1!important}
.layer-platform .layer-acronym-v74{
  position:absolute;left:50%;top:68%;transform:translateX(-50%);z-index:6;
  color:#0A2A3A;font-size:8px;font-weight:800;letter-spacing:.20em;white-space:nowrap;text-transform:uppercase;
}

/* 6) Keep connector columns aligned to apps */
.layer-flows-bottom,.layer-systems{grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:start!important}
.layer-flows-bottom i:before{left:50%!important}
.layer-systems span{justify-self:stretch!important}

/* 7) Selector centre A remains crisp and has breathing room */
.home-dial-visual .dial-core-logo{width:132px!important;padding:8px!important;box-sizing:content-box!important}

@media(max-width:760px){
  .site-header .brand-logo{width:152px!important;max-height:40px!important}
  .brand-layer-story:after{width:290px!important;height:122px!important;opacity:.08!important}
  .brand-layer-story:before{width:260px;height:110px;left:-70px;opacity:.045}
  .brand-a-motion.brand-aaa{width:250px!important;height:125px!important;margin-inline:auto!important}
  .brand-a-motion.brand-aaa img{width:72px!important}.brand-a-motion.brand-aaa img:nth-child(2){left:58px!important}.brand-a-motion.brand-aaa img:nth-child(3){left:104px!important}
  .brand-a-motion.brand-aaa i{width:215px!important;height:16px!important}
  .layer-platform img{width:90px!important;max-width:90px!important}
  .layer-platform .layer-acronym-v74{font-size:6px;letter-spacing:.15em;top:70%}
}

@media(prefers-reduced-motion:reduce){
  .brand-a-motion.brand-aaa img,.brand-a-motion.brand-aaa i{animation:none!important}
  .brand-a-motion.brand-aaa i{opacity:.85;transform:none!important}
}