/* ============================================================
   Owl & Anchor QA — Header Navigation + Animation Kit
   Prefix: oa- (scoped; safe alongside Astra/Elementor).
   Classic horizontal nav (no overlay). Animates transform/opacity only.
   ============================================================ */
:root{
  --oa-navy:#0D1B2A;
  --oa-navy-deep:#12233A;
  --oa-copper:#C77D3E;
  --oa-copper-dark:#A9612C;
  --oa-off:#F7F5F1;
  --oa-slate:#4A5568;
  --oa-hair:#E7E2D9;
  --oa-white:#FFFFFF;
  --oa-announce-h:40px;
  --oa-header-h:72px;
  --oa-top:112px; /* announce + header; JS updates when bar dismissed */
  --oa-ease:cubic-bezier(0.16,1,0.3,1);
}
html{ scroll-padding-top:calc(var(--oa-top) + 12px); }
body{ padding-top:var(--oa-top); }

.oa-shell *,.oa-shell *::before,.oa-shell *::after{ box-sizing:border-box; }
.oa-shell{ font-family:'Inter',system-ui,sans-serif; }

/* ---------- Announcement bar ---------- */
.oa-announce{
  position:fixed; top:0; left:0; right:0; height:var(--oa-announce-h);
  z-index:9800; background:var(--oa-navy); color:var(--oa-off);
  display:flex; align-items:center;
}
.oa-announce.oa-hide{ display:none; }
.oa-announce__inner{
  position:relative; width:100%; max-width:1240px; margin:0 auto;
  padding:0 46px; display:flex; align-items:center; justify-content:center;
}
.oa-announce__text{
  margin:0; font-size:14px; line-height:1.35; letter-spacing:.01em;
  text-align:center; color:var(--oa-off);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oa-announce__text a{
  color:var(--oa-copper); font-weight:600; text-decoration:none; padding-bottom:1px;
  background-image:linear-gradient(var(--oa-copper),var(--oa-copper));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .25s var(--oa-ease), color .2s ease;
}
.oa-announce__text a:hover,.oa-announce__text a:focus-visible,.oa-announce__text a:focus{ background-size:100% 1px; color:#E19A5C; }
.oa-announce__dismiss{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; line-height:0;
  background:transparent; border:0; border-radius:6px; cursor:pointer;
  color:rgba(247,245,241,.65); transition:color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.oa-announce__dismiss:hover{ color:var(--oa-white); background:rgba(247,245,241,.08); }

/* ---------- Header ---------- */
.oa-header{
  position:fixed; top:var(--oa-announce-h); left:0; right:0; height:var(--oa-header-h);
  z-index:9700; background:var(--oa-white);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease;
}
.oa-header.oa-scrolled{ box-shadow:0 6px 22px rgba(13,27,42,.09); border-bottom-color:var(--oa-hair); }
.oa-header__inner{
  height:100%; max-width:1240px; margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.oa-logo{ display:inline-flex; align-items:center; line-height:0; text-decoration:none; }
.oa-logo img{ max-height:44px; width:auto; display:block; }

/* ---------- Desktop nav ---------- */
.oa-topnav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.oa-topnav__link{
  position:relative; font-size:15px; font-weight:500; letter-spacing:.1px;
  color:var(--oa-navy); text-decoration:none; padding:6px 2px;
  transition:color .2s ease;
}
.oa-topnav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--oa-copper); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--oa-ease);
}
.oa-topnav__link:hover,.oa-topnav__link:focus,.oa-topnav__link:focus-visible{ color:var(--oa-copper); }
.oa-topnav__link:hover::after,.oa-topnav__link:focus-visible::after{ transform:scaleX(1); }
.oa-topnav__link.oa-active{ color:var(--oa-copper); font-weight:600; }
.oa-topnav__link.oa-active::after{ transform:scaleX(1); }
.oa-topnav__cta{
  display:inline-block; background:var(--oa-copper); color:#FFFFFF !important;
  font-size:15px; font-weight:600; text-decoration:none;
  padding:11px 22px; border-radius:6px; line-height:1;
  transition:background .2s ease, transform .2s var(--oa-ease), box-shadow .2s ease;
}
.oa-topnav__cta:hover,.oa-topnav__cta:focus-visible{
  background:var(--oa-copper-dark); transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(169,97,44,.28);
}
.oa-topnav__cta2{
  display:inline-block; background:transparent; color:var(--oa-copper) !important;
  font-size:15px; font-weight:600; text-decoration:none;
  padding:10px 20px; border-radius:6px; line-height:1;
  border:1.5px solid var(--oa-copper);
  transition:background .2s ease, color .2s ease, transform .2s var(--oa-ease);
}
.oa-topnav__cta2:hover,.oa-topnav__cta2:focus-visible,.oa-topnav__cta2.oa-active{
  background:var(--oa-copper); color:#FFFFFF !important; transform:translateY(-1px);
}

/* ---------- Mobile toggle + dropdown panel ---------- */
.oa-nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; border:0; cursor:pointer; color:var(--oa-navy);
  border-radius:8px; -webkit-tap-highlight-color:transparent;
}
.oa-nav-toggle__icon{ position:relative; display:inline-block; width:24px; height:16px; }
.oa-nav-toggle__icon span{
  position:absolute; left:0; height:2px; width:100%; border-radius:2px;
  background:currentColor;
  transition:transform .3s var(--oa-ease), opacity .2s ease;
}
.oa-nav-toggle__icon span:nth-child(1){ top:0; }
.oa-nav-toggle__icon span:nth-child(2){ top:7px; }
.oa-nav-toggle__icon span:nth-child(3){ top:14px; }
.oa-nav-toggle[aria-expanded="true"] .oa-nav-toggle__icon span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.oa-nav-toggle[aria-expanded="true"] .oa-nav-toggle__icon span:nth-child(2){ opacity:0; }
.oa-nav-toggle[aria-expanded="true"] .oa-nav-toggle__icon span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.oa-mobilenav{
  position:fixed; top:var(--oa-top); left:0; right:0; z-index:9600;
  background:var(--oa-white); border-bottom:1px solid var(--oa-hair);
  box-shadow:0 18px 34px rgba(13,27,42,.12);
  padding:8px 20px 18px;
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--oa-ease), transform .25s var(--oa-ease), visibility 0s linear .25s;
}
.oa-mobilenav.oa-open{
  opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;
  transition:opacity .25s var(--oa-ease), transform .25s var(--oa-ease), visibility 0s linear 0s;
}
.oa-mobilenav__link{
  display:block; font-size:16px; font-weight:500; color:var(--oa-navy);
  text-decoration:none; padding:12px 4px; border-bottom:1px solid var(--oa-off);
  transition:color .2s ease;
}
.oa-mobilenav__link:hover,.oa-mobilenav__link:focus,.oa-mobilenav__link:focus-visible{ color:var(--oa-copper); }
.oa-mobilenav__link.oa-active{ color:var(--oa-copper); font-weight:600; }
.oa-mobilenav__cta{
  display:block; text-align:center; background:var(--oa-copper); color:#FFFFFF !important;
  font-size:15px; font-weight:600; text-decoration:none;
  padding:13px 22px; border-radius:6px; margin-top:10px;
  transition:background .2s ease;
}
.oa-mobilenav__cta:hover{ background:var(--oa-copper-dark); }
.oa-mobilenav__cta2{
  display:block; text-align:center; background:transparent; color:var(--oa-copper) !important;
  font-size:15px; font-weight:600; text-decoration:none;
  padding:12px 22px; border-radius:6px; margin-top:14px;
  border:1.5px solid var(--oa-copper);
  transition:background .2s ease, color .2s ease;
}
.oa-mobilenav__cta2:hover{ background:var(--oa-copper); color:#FFFFFF !important; }

@media (max-width:879px){
  .oa-topnav{ display:none; }
  .oa-nav-toggle{ display:inline-flex; }
}
@media (min-width:880px){
  .oa-mobilenav{ display:none; }
}

/* ---------- Body state while mobile panel open ---------- */
body.oa-mnav-open{ overflow:hidden; }

/* ---------- Native-widget grid rows (ids set by build scripts) ----------
   Elementor 4.2-beta container flex widths are unreliable; these grids give
   multi-column layout while every child stays a normal, editable container. */
[id^="ssg2-"]{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
[id^="ssg3-"]{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
[id^="ssg4-"]{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
[id^="ssgh-"]{ display:grid !important; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center; }
@media (max-width:1024px){
  [id^="ssg4-"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:781px){
  [id^="ssg2-"],[id^="ssg3-"],[id^="ssg4-"]{ grid-template-columns:1fr; }
  [id^="ssgh-"]{ grid-template-columns:1fr; gap:28px; }
}
/* hover lift for card-like grid children */
[id^="ssg3-"] > .e-con{ transition:transform .18s ease, box-shadow .18s ease; }
[id^="ssg3-"] > .e-con:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(13,27,42,.12); }
@media (prefers-reduced-motion: reduce){
  [id^="ssg3-"] > .e-con,[id^="ssg3-"] > .e-con:hover{ transition:none !important; transform:none !important; }
}

/* ---------- Scroll reveal ---------- */
.oa-reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--oa-ease), transform .7s var(--oa-ease);
  transition-delay:calc(min(var(--oa-i,0),8) * 70ms);
}
.oa-reveal--sec{ transform:none; }
.oa-reveal.oa-in{ opacity:1; transform:none; }
.oa-static .oa-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---------- Card hover lift ---------- */
.oa-card{ transition:transform .18s ease, box-shadow .18s ease; }
.oa-card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(13,27,42,.12); }

/* ---------- Focus visibility ---------- */
.oa-shell :focus-visible{
  outline:2px solid var(--oa-copper); outline-offset:3px; border-radius:4px;
}
.oa-nav-toggle:focus:not(:focus-visible){ outline:none; }

/* ---------- Overrides vs Elementor/Astra global <button> styles ---------- */
#oa-header .oa-nav-toggle{
  background:transparent; border:0; padding:0; width:44px; height:44px;
  border-radius:8px; color:var(--oa-navy);
}
#oa-announce .oa-announce__dismiss{
  background:transparent; border:0; padding:0; width:28px; height:28px;
  border-radius:6px; color:rgba(247,245,241,.65);
}
#oa-announce .oa-announce__dismiss:hover{ color:var(--oa-white); background:rgba(247,245,241,.08); }

/* ---------- Funnel stepper (#oa-funnel) ---------- */
.oa-fs-hidden{ display:none !important; }
.oa-fs-invisible{ visibility:hidden; }
.oa-fs-progress{ margin:0 0 24px; }
.oa-fs-count{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--oa-copper); margin-bottom:6px; }
.oa-fs-title{ font-family:'Sora',sans-serif; font-size:22px; font-weight:600; color:var(--oa-navy); margin-bottom:14px; }
.oa-fs-bar{ height:6px; background:var(--oa-off); border-radius:999px; overflow:hidden; }
.oa-fs-bar span{ display:block; height:100%; width:25%; background:var(--oa-copper); border-radius:999px; transition:width .35s var(--oa-ease); }
.oa-fs-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
#oa-funnel .oa-fs-next{
  margin-left:auto; background:var(--oa-copper); color:#fff; border:0; border-radius:8px;
  padding:13px 26px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .2s ease;
}
#oa-funnel .oa-fs-next:hover{ background:var(--oa-copper-dark); }
#oa-funnel .oa-fs-back{
  background:transparent; border:1px solid var(--oa-hair); color:var(--oa-slate); border-radius:8px;
  padding:13px 22px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
#oa-funnel .oa-fs-back:hover{ border-color:var(--oa-navy); color:var(--oa-navy); }
.oa-fs-error{ outline:2px solid #D64545; outline-offset:6px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){ .oa-fs-bar span{ transition:none !important; } }

/* ---------- Logged-in admin bar offset ---------- */
body.admin-bar .oa-announce{ top:32px; }
body.admin-bar .oa-header{ top:calc(var(--oa-announce-h) + 32px); }
@media (max-width:782px){
  body.admin-bar .oa-announce{ top:46px; }
  body.admin-bar .oa-header{ top:calc(var(--oa-announce-h) + 46px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .oa-mobilenav{ transform:none !important; transition:opacity .15s linear, visibility 0s linear .15s !important; }
  .oa-mobilenav.oa-open{ transform:none !important; transition:opacity .15s linear, visibility 0s linear 0s !important; }
  .oa-reveal{ transform:none !important; transition:opacity .3s linear !important; transition-delay:0s !important; }
  .oa-card,.oa-card:hover{ transition:none !important; transform:none !important; }
  .oa-nav-toggle__icon span{ transition:opacity .2s linear !important; }
  .oa-topnav__link::after{ transition:none !important; }
  .oa-topnav__cta,.oa-topnav__cta:hover{ transform:none !important; }
}