/* ══════════════════════════════════════════════════════════════
   Mega menu — Quality Safe & Lock
   Sits inside .hp-bar (position:relative, full width) so each panel
   can span the viewport. .hp-top is container-type:inline-size, so
   cqw here is 1% of the header width and the menu scales with the
   header type it hangs off.
   ══════════════════════════════════════════════════════════════ */

.mega-wrap{position:absolute;left:0;right:0;top:100%;z-index:60;pointer-events:none}

.mega{
  position:absolute;left:0;right:0;top:0;
  pointer-events:none;
  opacity:0;
  transform:translateY(-.7cqw);
  visibility:hidden;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),
             transform .34s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .3s;
  background:
    radial-gradient(80cqw 26cqw at 12% -30%, rgba(233,164,21,.16), transparent 62%),
    linear-gradient(180deg,#04162E 0%,#020B1B 100%);
  border-top:.14cqw solid transparent;
  border-image:linear-gradient(90deg,transparent,#E9A415 18%,#F3CE7A 50%,#E9A415 82%,transparent) 1;
  box-shadow:0 2.2cqw 4cqw rgba(0,0,0,.55);
}
.mega.is-open{
  opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),
             transform .34s cubic-bezier(.16,1,.3,1),
             visibility 0s;
}
/* hairline that keeps the panel visually welded to the header */
.mega::before{
  content:'';position:absolute;left:0;right:0;top:0;height:.08cqw;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}

.mega__in{
  display:grid;
  grid-template-columns:20.5cqw 1fr;
  gap:2.6cqw;
  max-width:92cqw;
  margin:0 auto;
  padding:2.5cqw 3cqw 2cqw;
}

/* ── feature card ─────────────────────────────────────────── */
.mega__feature{
  position:relative;display:block;
  padding:1.7cqw 1.6cqw 1.5cqw;
  border-radius:.7cqw;
  background:linear-gradient(158deg,rgba(233,164,21,.2) 0%,rgba(233,164,21,.07) 46%,rgba(4,22,46,.5) 100%);
  border:.07cqw solid rgba(233,164,21,.42);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;
}
.mega__feature::after{
  content:'';position:absolute;inset:0;border-radius:.7cqw;
  background:radial-gradient(18cqw 12cqw at 88% -10%,rgba(233,164,21,.22),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.mega__feature:hover{
  transform:translateY(-.28cqw);
  border-color:rgba(233,164,21,.7);
  box-shadow:0 1.1cqw 2.2cqw rgba(0,0,0,.45);
}
.mega__feature:hover::after{opacity:1}
.mega__feature svg{
  position:relative;width:2.9cqw;height:2.9cqw;color:#E9A415;display:block;
}
.mega__feature b{
  position:relative;display:block;margin-top:.9cqw;
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:1.72cqw;line-height:1.06;letter-spacing:.005em;
  text-transform:uppercase;color:#fff;
}
.mega__feature p{
  position:relative;margin-top:.6cqw;
  font-family:'Roboto',Arial,sans-serif;
  font-size:.92cqw;line-height:1.55;color:rgba(255,255,255,.74);
}
.mega__feature i{
  position:relative;display:inline-flex;align-items:center;gap:.45cqw;
  margin-top:.95cqw;font-style:normal;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:.88cqw;letter-spacing:.055em;text-transform:uppercase;color:#E9A415;
}
.mega__feature i::after{content:'→';transition:transform .25s}
.mega__feature:hover i::after{transform:translateX(.35cqw)}
.mega__feature img{
  width:100%;height:7.2cqw;object-fit:cover;border-radius:.4cqw;
  margin-bottom:.9cqw;opacity:.9;
}

/* ── link columns ─────────────────────────────────────────── */
.mega__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;align-content:start}

.mega__col{opacity:0;transform:translateY(.5cqw);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.mega.is-open .mega__col{opacity:1;transform:none}
.mega.is-open .mega__col:nth-child(1){transition-delay:.05s}
.mega.is-open .mega__col:nth-child(2){transition-delay:.11s}
.mega.is-open .mega__col:nth-child(3){transition-delay:.17s}
.mega.is-open .mega__feature{animation:megaFeat .5s cubic-bezier(.16,1,.3,1) both}
@keyframes megaFeat{from{opacity:0;transform:translateY(.6cqw) scale(.985)}to{opacity:1;transform:none}}

.mega__col h4{
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:.92cqw;letter-spacing:.13em;text-transform:uppercase;
  color:#E9A415;margin:0 0 .25cqw;
}
.mega__col h4::after{
  content:'';display:block;width:1.8cqw;height:.13cqw;margin-top:.5cqw;
  background:linear-gradient(90deg,#E9A415,rgba(233,164,21,0));
}
.mega__col ul{list-style:none;margin:.85cqw 0 0;padding:0}
.mega__col li + li{margin-top:.1cqw}
.mega__col a{
  position:relative;display:flex;align-items:center;gap:.5cqw;
  padding:.42cqw .5cqw .42cqw .7cqw;
  border-radius:.28cqw;
  font-family:'Roboto',Arial,sans-serif;font-weight:400;
  font-size:1.02cqw;line-height:1.25;color:rgba(255,255,255,.86);
  text-transform:none;letter-spacing:0;white-space:normal;
  transition:color .2s,background .2s,transform .22s cubic-bezier(.16,1,.3,1);
}
/* gold rail that grows on hover */
.mega__col a::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;
  width:.13cqw;border-radius:.13cqw;background:#E9A415;
  transform:scaleY(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.mega__col a:hover,.mega__col a:focus-visible{
  color:#fff;background:rgba(233,164,21,.09);transform:translateX(.22cqw);
}
.mega__col a:hover::before,.mega__col a:focus-visible::before{transform:scaleY(1)}
.mega__col a svg{width:.62cqw;height:.62cqw;color:#E9A415;opacity:.55;flex:none;
  transition:opacity .2s,transform .25s}
.mega__col a:hover svg{opacity:1;transform:translateX(.15cqw)}

/* ── panel footer strip ───────────────────────────────────── */
.mega__foot{
  display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  max-width:92cqw;margin:0 auto;
  padding:1cqw 3cqw 1.3cqw;
  border-top:.07cqw solid rgba(255,255,255,.11);
}
.mega__foot span{
  display:inline-flex;align-items:center;gap:.6cqw;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:.95cqw;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.mega__foot span svg{width:1.05cqw;height:1.05cqw;color:#E9A415}
.mega__foot a{
  display:inline-flex;align-items:center;gap:.6cqw;
  padding:.6cqw 1.3cqw;border-radius:.3cqw;
  background:#E9A415;color:#04162E;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:1.05cqw;letter-spacing:.04em;text-transform:uppercase;
  transition:background .22s,transform .22s;
}
.mega__foot a svg{width:1.05cqw;height:1.05cqw;flex:none}
.mega__foot a:hover{background:#F3CE7A;transform:translateY(-.1cqw)}

/* caret flips while its panel is open */
.hp-nav li.is-open > a{color:#E9A415}
.hp-nav li > a svg{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.hp-nav li.is-open > a svg{transform:rotate(180deg)}

/* dim the page behind an open panel */
.mega-scrim{
  position:fixed;inset:0;z-index:15;
  /* purely decorative: if it took pointer events it would appear under the
     cursor the instant a panel opened and mouseenter would close it again */
  pointer-events:none;
  background:rgba(1,7,18,.55);
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility 0s linear .3s;
}
.mega-scrim.is-open{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}

@media (prefers-reduced-motion:reduce){
  .mega,.mega__col,.mega__feature,.mega__col a{transition-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════
   Mobile — the same taxonomy as an accordion in the drawer
   ══════════════════════════════════════════════════════════ */
.m-acc{border-bottom:1px solid rgba(255,255,255,.09)}
.m-acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 2px;background:none;border:0;cursor:pointer;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  text-align:left;
}
.m-acc__btn svg{width:15px;height:15px;color:#E9A415;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.m-acc__btn[aria-expanded="true"]{color:#E9A415}
.m-acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1);
}
.m-acc__panel > div{overflow:hidden}
.m-acc__btn[aria-expanded="true"] + .m-acc__panel{grid-template-rows:1fr}
.m-acc__panel ul{list-style:none;margin:0;padding:0 0 12px}
.m-acc__panel h5{
  margin:10px 0 4px;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#E9A415;
}
/* the drawer's own .mobile-menu-links li a rule is condensed/uppercase/1.2rem —
   sub-links need to read as a quieter second level, so restate the lot */
.mobile-menu-links li.m-acc{border-bottom:1px solid rgba(255,255,255,.1)}
.m-acc__panel li{border-bottom:0 !important}
.m-acc__panel li a{
  display:block;padding:9px 0 9px 14px;
  border-left:2px solid rgba(233,164,21,.28);
  font-family:'Roboto',Arial,sans-serif;
  font-weight:400;font-size:.95rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.84);
  transition:color .2s,border-color .2s,padding-left .2s;
}
.m-acc__panel li a:hover{color:#fff;border-color:#E9A415;padding-left:18px}


@media (max-width:1080px){
  .mega-wrap,.mega-scrim{display:none}
}


/* ══════════════════════════════════════════════════════════════
   MOBILE MAIN MENU (2026-08-24, client spec + refinement pass)
   Three tiers: SERVICES (primary) > COMPANY (secondary) > the
   conversion panel. Shared by all 17 pages; the drawer only ever
   renders <=768px, so this is mobile-only by construction.

   Refinement pass targets, all measured rather than eyeballed:
   the drawer overflowed a 390x844 iPhone by 281px, so row padding
   came down ~17% and the 24/7-address-licence block was dropped
   (that content lives in the footer) to bring the whole menu onto
   one screen. The split-button look is gone: an expandable
   category's ENTIRE row is now one <button>, with its landing page
   demoted to an "... Overview" first child, so no row has text and
   chevron doing two different things.
   ══════════════════════════════════════════════════════════════ */
/* Bottom padding is deliberately 0: the call CTA is position:sticky and
   carries the safe-area inset itself, so any padding here would show as a
   navy gap under the button once the menu is scrolled to the end. */
.mobile-menu{
  padding:12px 22px 0;
  overscroll-behavior:contain;            /* menu scroll never chains to the page */
  -webkit-overflow-scrolling:touch;
}
.mobile-menu-head{
  margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* 48px touch target kept, but the filled+bordered box was reading as
   heavy next to a 40px logo — now a plain gold-tinted glyph. */
.mobile-close{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;margin-right:-8px;
  background:none;border:0;border-radius:8px;
  color:rgba(255,255,255,.72);font-size:0;
  transition:background .2s ease,color .2s ease;
}
.mobile-close svg{width:21px;height:21px;display:block}
.mobile-close:active{background:rgba(233,164,21,.14);color:#E9A415}
.mobile-close:focus-visible{outline:2px solid #E9A415;outline-offset:2px}

.mm-nav{margin-bottom:7px}
.mm-eyebrow{
  margin:0 0 1px;
  font-family:'Roboto Condensed','Barlow Condensed',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#E9A415;
}
.mm-primary,.mm-secondary{list-style:none;margin:0;padding:0}

/* ── primary service rows ──
   Row padding trimmed ~17% (58 -> 50px min-height) while staying well
   above the 44px touch minimum. */
.mm-primary > li + li{border-top:1px solid rgba(255,255,255,.1)}
.mm-acc__row,.mm-row__solo{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:52px;padding:8px 2px;   /* §8: accordion rows >= 52px */
  background:none;border:0;text-align:left;cursor:pointer;
  font-family:'Barlow Condensed','Roboto Condensed',sans-serif;
  font-weight:700;font-size:1.26rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;
  transition:color .2s ease;
}
.mm-acc__row > span{flex:1 1 auto;min-width:0}
.mm-acc__chev{
  width:18px;height:18px;flex:none;color:rgba(233,164,21,.8);
  transition:transform .28s cubic-bezier(.16,1,.3,1),color .2s ease;
}
.mm-acc__row:active,.mm-row__solo:active{color:#E9A415}
.mm-acc__row:focus-visible,.mm-row__solo:focus-visible{outline:2px solid #E9A415;outline-offset:-2px}
/* open state: label goes gold and the chevron flips */
.mm-acc.is-open > .mm-acc__row{color:#E9A415}
.mm-acc.is-open > .mm-acc__row .mm-acc__chev{transform:rotate(180deg);color:#E9A415}

/* ── expanded panel ──
   0fr -> 1fr animates a real auto height with no clipping max-height.
   visibility (not just overflow) keeps collapsed links out of the tab
   order — a 0fr row clips children but leaves them their layout box. */
.mm-acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1);
}
.mm-acc__panel > .mm-acc__inner{
  overflow:hidden;min-height:0;
  visibility:hidden;
  transition:visibility 0s linear .3s;
}
.mm-acc.is-open > .mm-acc__panel{grid-template-rows:1fr}
.mm-acc.is-open > .mm-acc__panel > .mm-acc__inner{visibility:visible;transition:visibility 0s}
/* the expanded area sits on its own slightly deeper ground, so the two
   levels of the hierarchy are never ambiguous */
.mm-acc__inner{
  background:rgba(0,0,0,.22);
  border-left:2px solid rgba(233,164,21,.45);
  border-radius:0 6px 6px 0;
}
.mm-acc__desc{
  margin:0;padding:11px 14px 3px;
  font-family:'Roboto',Arial,sans-serif;
  font-style:italic;font-weight:400;font-size:.84rem;line-height:1.35;
  color:rgba(233,164,21,.78);
}
.mm-acc__inner ul{list-style:none;margin:0;padding:2px 0 9px}
.mm-acc__inner li a{
  display:block;min-height:44px;
  padding:11px 14px;
  font-family:'Roboto',Arial,sans-serif;
  font-weight:400;font-size:.94rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.8);
  transition:color .2s ease,padding-left .2s ease;
}
.mm-acc__inner li a:active{color:#E9A415;padding-left:18px}
.mm-acc__inner li a:focus-visible{outline:2px solid #E9A415;outline-offset:-3px}

/* ── Emergency: the menu's first true CTA ──
   A tinted block, not a shout: dark gold-over-navy blend with a gold
   hairline and gold type. Deliberately never red. */
.mm-emg{
  display:flex;align-items:center;gap:11px;
  min-height:52px;margin-top:8px;padding:10px 13px;  /* §8 */
  background:linear-gradient(90deg, rgba(233,164,21,.17), rgba(233,164,21,.07));
  border:1px solid rgba(233,164,21,.42);
  border-radius:8px;
  font-family:'Barlow Condensed','Roboto Condensed',sans-serif;
  font-weight:700;font-size:1.16rem;letter-spacing:.06em;text-transform:uppercase;
  color:#F0B63A;
  transition:background .2s ease,border-color .2s ease;
}
.mm-emg__bolt{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:6px;
  background:rgba(233,164,21,.22);color:#E9A415;
}
.mm-emg__bolt svg{width:14px;height:14px;display:block}
.mm-emg__txt{flex:1 1 auto;min-width:0}
.mm-emg__arw{width:17px;height:17px;flex:none;color:rgba(233,164,21,.85);transition:transform .2s ease}
.mm-emg:active{background:rgba(233,164,21,.26);border-color:#E9A415}
.mm-emg:active .mm-emg__arw{transform:translateX(3px)}
.mm-emg:focus-visible{outline:2px solid #E9A415;outline-offset:2px}

/* ── COMPANY: unmistakably subordinate to SERVICES ── */
.mm-secondary{display:flex;flex-wrap:wrap}
.mm-secondary li{width:50%}
.mm-secondary a{
  display:flex;align-items:center;min-height:44px;padding:4px 2px;
  font-family:'Roboto',Arial,sans-serif;
  font-weight:400;font-size:.92rem;letter-spacing:.01em;
  color:rgba(255,255,255,.7);
  transition:color .2s ease;
}
.mm-secondary a:active{color:#E9A415}
.mm-secondary a:focus-visible{outline:2px solid #E9A415;outline-offset:-2px}

/* ── conversion panel — STICKY ──
   Was a 206px card at the very end of a 903px menu, so on an iPhone the
   call action was two screens down. It is now a compact bar pinned to
   the bottom of the drawer's own scrollport: the navigation scrolls
   behind it and the phone number is reachable at any scroll position,
   which is a stronger fix than any amount of tightening.

   position:sticky (not fixed) is what makes "doesn't obscure the last
   navigation items" true for free — the bar still occupies its place at
   the END of the flow, so when you reach the bottom of the menu the last
   Company link sits above it and nothing is ever hidden underneath.

   The drawer's bottom padding is 0 (see .mobile-menu) and the safe-area
   inset is carried here instead, otherwise a navy strip would appear
   below the button at the end of the scroll. The negative side margins
   cancel the drawer's 22px gutter so the bar reaches both edges, and the
   solid navy is required — content scrolls behind this. */
.mm-cta{
  position:sticky;bottom:0;z-index:2;
  margin:10px -22px 0;
  padding:9px 22px calc(10px + env(safe-area-inset-bottom));
  background:#001029;
  border-top:1px solid rgba(233,164,21,.3);
  box-shadow:0 -8px 18px rgba(0,4,12,.5);
  text-align:center;
}
.mm-cta__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 12px;border-radius:7px;
  background:#E9A415;color:#001029;
  box-shadow:0 4px 14px rgba(233,164,21,.22);
  font-family:'Barlow Condensed','Roboto Condensed',sans-serif;
  font-weight:800;font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s ease;
}
.mm-cta__btn svg{width:18px;height:18px;flex:none}
.mm-cta__arw{transition:transform .2s ease}
.mm-cta__btn:active{background:#F4B733}
.mm-cta__btn:active .mm-cta__arw{transform:translateX(3px)}
.mm-cta__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Request Service survives here as a quiet secondary path — the gold
   button owns the urgent action, this keeps the non-urgent one reachable */
.mm-cta__alt{
  display:block;min-height:32px;line-height:32px;margin-top:3px;
  font-family:'Roboto',Arial,sans-serif;font-size:.88rem;
  color:rgba(255,255,255,.66);text-decoration:underline;
  text-underline-offset:3px;
}
.mm-cta__alt:active{color:#E9A415}

@media (max-width:359px){
  .mm-secondary li{width:100%}
  .mm-acc__row,.mm-row__solo{font-size:1.16rem}
  .mm-cta__btn{font-size:.98rem}
}

/* Reduced motion: the whole drawer settles instantly, matching this site's
   established standard everywhere else. The `*` is deliberate — enumerating
   selectors here already missed the sub-link transitions once. */
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu *{transition:none !important;animation:none !important}
  /* the only motion left in an :active state is a nudge; neutralise it too */
  .mm-acc__inner li a:active{padding-left:14px}
  .mm-emg:active .mm-emg__arw,.mm-cta__btn:active .mm-cta__arw{transform:none}
}