/* ===========================================================================
   OPTSY — SITE CHROME
   Header and footer. Load after optsy-core.css.

   The header is click-driven rather than hover-driven, because a hover menu
   has no sensible behaviour on touch and every one of these pages gets heavy
   mobile traffic. Clicking works identically on both, and it keeps the
   keyboard path simple.
   =========================================================================== */


/* ===========================================================================
   HEADER
   =========================================================================== */
.op-site-header{
  position:sticky;top:0;z-index:100;
  background:var(--op-navy-deep);
  font-family:var(--op-font);
  transition:box-shadow .2s ease;
}
.op-site-header.is-stuck{box-shadow:0 1px 0 rgba(255,255,255,.08), 0 10px 30px -12px rgba(0,0,0,.6)}

/* anchors should not land under the sticky bar */
.op-page :target{scroll-margin-top:110px}


/* ---- utility strip ---- */
.op-topbar{
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.8125rem;
}
.op-topbar .site-container{
  display:flex;align-items:center;justify-content:flex-end;gap:22px;
  min-height:38px;
}
.op-topbar a,
.op-topbar span{color:#9fb3cc}
.op-topbar a{font-weight:600;color:#cfe0f5}
.op-topbar a:hover{color:#fff;text-decoration:none}
.op-topbar-phone{display:inline-flex;align-items:center;gap:7px}
.op-topbar-phone svg{width:14px;height:14px}


/* ---- main bar ---- */
.op-navbar .site-container{
  display:flex;align-items:center;gap:28px;
  min-height:74px;
}

.op-logo{flex:0 0 auto;display:block}
.op-logo img{height:34px;width:auto;display:block}

/* nav fills the space between logo and actions */
.op-nav{flex:1 1 auto;display:flex;align-items:center}
.op-nav-list{
  display:flex;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
}
.op-nav-item{position:relative}

.op-nav-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 14px;
  min-height:44px;
  border:0;background:none;
  border-radius:7px;
  color:#dce6f3;
  font-family:inherit;font-size:.9375rem;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.op-nav-link:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.op-nav-link[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.op-nav-link[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--op-yellow)}

/* the chevron on items that open a submenu */
.op-nav-link .op-caret{
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
  opacity:.7;
}
.op-nav-link[aria-expanded="true"] .op-caret{transform:rotate(225deg) translateY(-2px);opacity:1}


/* ---- submenu, desktop ---- */
.op-subnav{
  display:none;
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  padding:12px;
  background:var(--op-white);
  border:1px solid var(--op-line);
  border-radius:var(--op-r-md);
  box-shadow:var(--op-shadow-lift);
}
.op-subnav.open{display:block}
.op-subnav-inner{
  display:grid;
  grid-template-columns:repeat(2,minmax(230px,1fr));
  gap:2px 8px;
}
.op-subnav--single .op-subnav-inner{grid-template-columns:minmax(220px,1fr)}

.op-subnav a{
  display:block;
  padding:10px 12px;
  border-radius:var(--op-r-sm);
  color:var(--op-ink);
  font-size:.9375rem;line-height:1.35;
}
.op-subnav a:hover{background:var(--op-tint);color:var(--op-accent);text-decoration:none}

.op-subnav-all{
  grid-column:1 / -1;
  margin-top:8px;padding-top:12px;
  border-top:1px solid var(--op-line-soft);
}
.op-subnav-all a{color:var(--op-accent);font-weight:600}


/* ---- right-hand actions ---- */
.op-nav-actions{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-left:auto}

/* burger, hidden until the nav collapses */
.op-burger{
  display:none;
  flex:0 0 auto;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.op-burger span{
  position:relative;
  display:block;width:18px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .22s ease,background-color .22s ease;
}
.op-burger span::before,
.op-burger span::after{
  content:"";position:absolute;left:0;
  width:18px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .22s ease,top .22s ease;
}
.op-burger span::before{top:-6px}
.op-burger span::after{top:6px}
.op-burger[aria-expanded="true"] span{background:transparent}
.op-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.op-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* only shown inside the mobile panel */
.op-nav-foot{display:none}

/* scrim behind the mobile nav */
.op-nav-scrim{
  position:fixed;inset:0;z-index:95;
  background:rgba(10,23,41,.55);
  opacity:0;
  transition:opacity .28s ease;
}
.op-nav-scrim.open{opacity:1}


/* ---------------------------------------------------------------------------
   HEADER — COLLAPSED
   1080px, not 768px: the full menu needs the room, and collapsing early is
   better than letting items wrap into two rows on a tablet.
   --------------------------------------------------------------------------- */
@media (max-width:1080px){
  .op-navbar .site-container{min-height:64px;gap:14px}
  .op-burger{display:inline-flex}

  .op-nav{
    position:fixed;top:0;right:0;bottom:0;z-index:96;
    width:min(360px,88vw);
    display:block;
    padding:0;
    background:var(--op-white);
    box-shadow:-20px 0 60px -24px rgba(10,23,41,.6);
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .op-nav.open{transform:translateX(0)}

  /* space at the top so the panel clears the close button */
  .op-nav-list{
    display:block;
    padding:70px 0 0;
  }
  .op-nav-item{border-bottom:1px solid var(--op-line-soft)}
  .op-nav-item:first-child{border-top:1px solid var(--op-line-soft)}

  .op-nav-link{
    display:flex;width:100%;
    justify-content:space-between;
    padding:16px 22px;
    min-height:54px;
    border-radius:0;
    color:var(--op-ink);
    font-size:1rem;font-weight:600;
  }
  .op-nav-link:hover,
  .op-nav-link[aria-expanded="true"]{background:var(--op-tint);color:var(--op-ink)}
  .op-nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--op-yellow)}
  .op-nav-link .op-caret{border-color:var(--op-muted)}

  /* submenu becomes an inline accordion */
  .op-subnav{
    position:static;
    display:none;
    padding:4px 0 12px;
    border:0;border-radius:0;
    background:var(--op-tint);
    box-shadow:none;
  }
  .op-subnav.open{display:block}
  .op-subnav-inner,
  .op-subnav--single .op-subnav-inner{grid-template-columns:1fr;gap:0}
  .op-subnav a{padding:12px 22px 12px 34px;border-radius:0;font-size:.9375rem}
  .op-subnav-all{margin:0;padding:8px 0 0;border-top:1px solid var(--op-line)}

  /* phone and CTA pinned to the foot of the panel */
  .op-nav-foot{
    display:block;
    padding:24px 22px 32px;
  }
  .op-nav-foot .btn{width:100%}
  .op-nav-foot .op-nav-phone{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:14px;
    font-size:.9375rem;font-weight:600;color:var(--op-navy);
  }
  .op-nav-foot .op-nav-phone svg{width:16px;height:16px}
  .op-nav-foot p{margin:10px 0 0;text-align:center;font-size:.8125rem;color:var(--op-muted)}

  /* the demo button moves into the panel, so the bar keeps only the burger */
  .op-nav-actions .btn{display:none}
  .op-topbar .site-container{justify-content:center}
}

@media (max-width:680px){
  .op-topbar{font-size:.75rem}
  .op-topbar .site-container{min-height:34px;gap:14px}
  .op-logo img{height:28px}
  .op-page :target{scroll-margin-top:90px}
}

@media (prefers-reduced-motion:reduce){
  .op-nav,.op-nav-scrim,.op-burger span,.op-burger span::before,.op-burger span::after{transition:none}
}


/* ===========================================================================
   FOOTER
   =========================================================================== */
.op-site-footer{
  background:var(--op-navy-deep);
  color:#9fb3cc;
  font-family:var(--op-font);
  font-size:.9375rem;
  line-height:1.7;
}
.op-site-footer a{color:#cfe0f5}
.op-site-footer a:hover{color:#fff;text-decoration:none}

.op-footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:44px;
  padding:60px 0 52px;
}

.op-footer-brand .op-logo{margin-bottom:20px}
.op-footer-brand p{margin:0 0 20px;max-width:34ch;font-size:.875rem}

.op-footer-apps{display:flex;gap:10px;flex-wrap:wrap}
.op-footer-apps img{height:40px;width:auto}

.op-site-footer h2{
  color:#fff;
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  margin:0 0 18px;
}

.op-footer-links{list-style:none;margin:0;padding:0}
.op-footer-links li{margin-bottom:11px}
.op-footer-links a{font-size:.9375rem}

.op-site-footer address{font-style:normal;font-size:.9375rem}
.op-footer-contact p{margin:0 0 14px}
.op-footer-contact strong{display:block;color:#fff;font-weight:600;font-size:.875rem;margin-bottom:2px}

.op-footer-social{display:flex;gap:10px;margin-top:20px}
.op-footer-social a{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  color:#cfe0f5;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.op-footer-social a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.op-footer-social svg{width:17px;height:17px;fill:currentColor}

.op-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0 28px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.8125rem;
}
.op-footer-bottom p{margin:0}
.op-footer-bottom nav{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:960px){
  .op-footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;padding:52px 0 44px}
  .op-footer-brand{grid-column:1 / -1}
  .op-footer-brand p{max-width:52ch}
}

@media (max-width:680px){
  .op-footer-main{grid-template-columns:1fr;gap:34px;padding:44px 0 36px}
  .op-footer-bottom{
    flex-direction:column;align-items:flex-start;gap:12px;
    /* clears the sticky demo pill */
    padding-bottom:84px;
  }
  .op-footer-bottom nav{gap:16px}
}


/* ---------------------------------------------------------------------------
   Close button inside the mobile nav panel.
   The burger sits in the header bar, which does not always overlap the panel
   at wider collapsed widths, so the panel carries its own close control.
   --------------------------------------------------------------------------- */
.op-nav-close{display:none}

@media (max-width:1080px){
  .op-nav-close{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:16px;
    width:42px;height:42px;
    border:1px solid var(--op-line);
    border-radius:9px;
    background:var(--op-white);
    color:var(--op-ink);
    cursor:pointer;
    z-index:2;
  }
  .op-nav-close:hover{background:var(--op-tint)}
  .op-nav-close svg{width:18px;height:18px}
  .op-nav{position:fixed}
}


/* ---------------------------------------------------------------------------
   Closed nav panel must be inert.
   Off-screen but visible means its fifteen feature links stay in the tab
   order and are announced by screen readers while the menu looks shut.
   visibility:hidden removes it from both, and delaying the transition lets
   the slide-out animation finish before it disappears.
   --------------------------------------------------------------------------- */
@media (max-width:1080px){
  .op-nav{
    visibility:hidden;
    transition:transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s;
  }
  .op-nav.open{
    visibility:visible;
    transition:transform .3s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
}


/* The sticky demo pill must not float over the open nav panel. Same class the
   drawer uses, so one rule covers both. */
html.op-drawer-open .op-sticky-cta{opacity:0;pointer-events:none}