/* FIXO — header, mobile drawer and footer.
   Ported verbatim from the static design (css/styles.css). Scoped to
   .header / .drawer / .footer so nothing here can leak into page bands. */

:root{
  --aqua:#B9F4F9; --aqua-deep:#7FDDE6;
  --navy:#4D6598; --navy-deep:#3B5080; --navy-ink:#1B2540;
  --peri:#9AABD8; --lav:#E5D1FF; --cream:#FFFFEB;
  --ink:#1B2540; --ink-2:#4A5470; --ink-3:#7C86A2;
  --line:#E4E9F4; --bg-soft:#F5F7FC;
  --shadow-lg:0 30px 60px -20px rgba(27,37,64,.28);
  --container:1200px; --gutter:24px; --nav-h:76px;
}

/* --- local reset ------------------------------------------------------- */
.header,.drawer,.footer{
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.7;font-weight:400;color:var(--ink)}
.header *,.header *::before,.header *::after,
.drawer *,.drawer *::before,.drawer *::after,
.footer *,.footer *::before,.footer *::after{box-sizing:border-box}
.header ul,.drawer ul,.footer ul{margin:0;padding:0;list-style:none}
.header a,.drawer a,.footer a{color:inherit;text-decoration:none}
.header img,.header svg,.drawer img,.drawer svg,.footer img,.footer svg{max-width:100%;display:block}
.header img,.drawer img,.footer img{height:auto}
.header button,.drawer button{font:inherit;cursor:pointer;margin:0}
.footer p{margin:0 0 1em}
.footer p:last-child{margin-bottom:0}
.footer .footer-h{margin:0 0 18px;line-height:1.2;letter-spacing:-.01em;font-weight:600}
.header .ico,.drawer .ico,.footer .ico{
  width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.footer .mt-24{margin-top:24px}

/* --- buttons ---------------------------------------------------------- */
.header .btn,.drawer .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:10px;border:2px solid transparent;
  font-weight:600;font-size:14px;line-height:1;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.header .btn svg,.drawer .btn svg{width:18px;height:18px;flex:none}
.header .btn:active,.drawer .btn:active{transform:translateY(1px)}
.header .btn-primary,.drawer .btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px -8px rgba(77,101,152,.6)}
.header .btn-primary:hover,.drawer .btn-primary:hover{background:var(--navy-deep);box-shadow:0 12px 26px -8px rgba(77,101,152,.7);transform:translateY(-1px)}
.drawer .btn-outline{background:transparent;color:var(--navy);border-color:var(--peri)}
.drawer .btn-outline:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.drawer .btn-block{width:100%}
@media (max-width:640px){.header .btn,.drawer .btn{font-size:13px;min-height:46px}}

/* --- layout ----------------------------------------------------------- */
.header .container,.footer .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* --- logo ------------------------------------------------------------- */
.header .logo,.drawer .logo,.footer .logo{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.header .logo img,.drawer .logo img,.footer .logo img{height:34px;width:auto}
.header .logo .tag,.drawer .logo .tag,.footer .logo .tag{
  display:block;font-size:9px;font-weight:600;letter-spacing:.09em;white-space:nowrap;
  text-transform:uppercase;color:var(--navy);margin-top:3px}
.footer .logo .tag{color:var(--aqua)}
.drawer-head .logo img{height:30px}
@media (max-width:640px){
  .header .logo img,.drawer .logo img,.footer .logo img{height:28px}
  .header .logo .tag,.drawer .logo .tag,.footer .logo .tag{font-size:8px}
}

/* --- sticky shell ------------------------------------------------------
   The design's <header class="header"> is a direct child of <body>, so its
   position:sticky has the whole page to travel in. Inside HFE the template
   sits in wrappers that are exactly as tall as the header, which would give
   sticky zero travel — so the positioning moves up to #masthead (a direct
   child of #page) and .header keeps only the paint. */
/* HFE ships `.ehf-header #masthead{position:relative;z-index:99}` (1,1,0),
   which out-specifies a bare #masthead — so match its specificity here. */
body.ehf-header #masthead,#masthead{position:sticky;top:0;z-index:99}
#masthead>.elementor,#masthead>.elementor>.e-con,
#masthead .elementor-widget-shortcode,#masthead .elementor-shortcode{min-width:0}
.header{
  position:relative;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s}
.header.is-scrolled{box-shadow:0 6px 24px -14px rgba(27,37,64,.3);border-color:var(--line)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h);max-width:1320px}

/* --- desktop nav ------------------------------------------------------
   Five top-level items only. Everything else lives in the About panel, so
   the row can never grow wide enough to push the CTA off screen again. */
.nav{display:flex;align-items:center;gap:2px;min-width:0}
.nav>li{position:relative;margin:0}
.nav>li>a{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;white-space:nowrap;
  border-radius:10px;font-weight:500;font-size:14px;color:var(--ink);
  transition:background .18s ease,color .18s ease}
.nav>li>a:hover,.nav>li>a[aria-current="page"]{background:var(--bg-soft);color:var(--navy)}
.nav>li>a[aria-current="page"]{font-weight:600}
.nav .caret{width:14px;height:14px;color:var(--ink-3);transition:transform .22s ease,color .18s ease}
.nav>li:hover>a .caret,.nav>li:focus-within>a .caret{transform:rotate(180deg);color:var(--navy)}

/* hover bridge: the 12px gap under the trigger stays hoverable */
.nav>li:has(.sub)::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

/* --- mega panel --------------------------------------------------------
   The panel is wider than its trigger, so it is positioned against
   `.header .container` (which is position:relative) rather than the <li>.
   `.mega` itself is transparent and carries only the 12px top padding: that
   padding is the hover bridge, so the pointer never crosses dead space on its
   way down from the trigger. The visible card is `.mega-inner`. */
.nav>li.has-mega{position:static}
.mega{
  position:absolute;top:100%;left:0;right:0;z-index:60;
  padding-top:12px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
.nav>li:hover>.mega,.nav>li:focus-within>.mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s}

.mega-inner{
  width:min(1060px,calc(100vw - 40px));margin:0 auto;
  display:grid;gap:26px;
  padding:22px;
  background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
  border:1px solid rgba(27,37,64,.08);border-radius:20px;
  box-shadow:0 40px 80px -32px rgba(27,37,64,.45),0 10px 28px -18px rgba(27,37,64,.24),0 0 0 1px rgba(255,255,255,.7) inset}
.mega--services .mega-inner{grid-template-columns:minmax(0,1fr) 296px}
.mega--areas .mega-inner{grid-template-columns:308px minmax(0,1fr)}

.mega-col{min-width:0}
.mega-label{
  display:block;margin:2px 0 12px 12px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.mega-sub{display:block;margin:-8px 0 12px 12px;font-size:12px;color:var(--ink-3)}

/* rows */
.mega-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mega--areas .mega-rows{grid-template-columns:minmax(0,1fr)}
.mega-item{
  position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:11px 12px;border-radius:13px;min-width:0;
  transition:background .18s ease}
.mega-ico{
  flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--bg-soft);color:var(--navy);
  border:1px solid var(--line);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.mega-ico .ico{width:17px;height:17px}
.mega-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega-t{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.mega-d{font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.mega-item:hover,.mega-item:focus-visible{
  background:linear-gradient(90deg,rgba(185,244,249,.30) 0%,rgba(185,244,249,.05) 75%,transparent 100%)}
.mega-item:hover .mega-ico,.mega-item:focus-visible .mega-ico{
  background:var(--aqua);color:var(--navy-ink);border-color:var(--aqua-deep)}
.mega-item:hover .mega-t,.mega-item:focus-visible .mega-t{color:var(--navy-ink)}
.mega-item[aria-current="page"] .mega-ico{background:var(--aqua);color:var(--navy-ink);border-color:var(--aqua-deep)}
.mega-item[aria-current="page"] .mega-t{color:var(--navy)}

/* the nested service-areas panel */
.mega-col--areas{border-left:1px solid var(--line);padding-left:26px}
.mega-areas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 10px}
.mega-areas-grid a{
  display:block;padding:7px 10px;border-radius:9px;
  font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .16s ease,color .16s ease}
.mega-areas-grid a:hover,.mega-areas-grid a:focus-visible{background:rgba(185,244,249,.28);color:var(--navy-ink)}
.mega-areas-grid a[aria-current="page"]{background:rgba(185,244,249,.34);color:var(--navy);font-weight:600}
.mega-all{
  display:inline-flex;align-items:center;gap:6px;margin:14px 0 0 10px;
  font-size:12.5px;font-weight:600;color:var(--navy);
  transition:color .16s ease}
.mega-all:hover,.mega-all:focus-visible{color:var(--navy-ink)}

/* the featured card beside Services */
.mega-feature{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px;border-radius:16px;
  background:linear-gradient(155deg,#1B2540 0%,#28345C 55%,#3B5080 100%);
  color:#fff}
.mega-feature-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--aqua);background:rgba(185,244,249,.14);border:1px solid rgba(185,244,249,.28)}
.mega-feature-pill .ico{width:13px;height:13px}
.mega-feature strong{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff}
.mega-feature p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.mega-feature-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  padding:11px 18px;border-radius:10px;
  font-size:13px;font-weight:600;
  color:var(--navy-ink);background:var(--aqua);
  transition:background .18s ease,transform .18s ease,color .18s ease}
.mega-feature-cta .ico{width:16px;height:16px}
.mega-feature-cta:hover,.mega-feature-cta:focus-visible{
  color:var(--navy-ink);background:#D3F8FB;transform:translateY(-1px)}

/* keep the panel inside narrower desktops */
@media (max-width:1180px){
  .mega-inner{padding:18px;gap:20px}
  .mega--services .mega-inner{grid-template-columns:minmax(0,1fr) 260px}
  .mega--areas .mega-inner{grid-template-columns:280px minmax(0,1fr)}
  .mega-areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .mega,.nav>li:hover>.mega,.nav>li:focus-within>.mega{
    transition:opacity .12s ease,visibility 0s;transform:none}
  .nav .caret,.mega-item,.mega-ico,.mega-areas-grid a,.mega-feature-cta{transition:none}
  .mega-feature-cta:hover{transform:none}
}


.header-cta{display:flex;align-items:center;gap:12px}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:8px;white-space:nowrap}
.header-phone:hover{background:var(--bg-soft);color:var(--navy)}
.header-phone .ico{width:18px;height:18px;color:var(--navy)}
.header .nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:10px;align-items:center;justify-content:center;color:var(--ink);padding:0;font-size:14px;white-space:normal}
.header .nav-toggle:hover,.header .nav-toggle:focus{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}

@media (max-width:1180px){.header-phone span{display:none}}
@media (max-width:1024px){
  .nav{display:none}
  .header .nav-toggle{display:inline-flex}
  .header-cta .btn{display:none}
  .header .container{min-height:64px}
}

/* --- mobile drawer ---------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:1000;pointer-events:none}
.drawer-bg{position:absolute;inset:0;background:rgba(27,37,64,.5);opacity:0;transition:opacity .25s}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#fff;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:20px;overflow-y:auto}
.drawer.is-open{pointer-events:auto}
.drawer.is-open .drawer-bg{opacity:1}
.drawer.is-open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.drawer .drawer-close{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--ink);font-size:14px}
.drawer .drawer-close:hover,.drawer .drawer-close:focus{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
/* drawer navigation — native <details> accordions, no JS */
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-nav .dtop,
.drawer-nav .dgroup>summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px;border-radius:12px;font-weight:600;font-size:15px;color:var(--ink);
  border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease}
.drawer-nav .dtop:hover,.drawer-nav .dgroup>summary:hover{background:var(--bg-soft);border-color:var(--line)}
.drawer-nav .dtop[aria-current="page"]{background:var(--bg-soft);border-color:var(--line);color:var(--navy)}
.drawer-nav .dgroup>summary{cursor:pointer;list-style:none}
.drawer-nav .dgroup>summary::-webkit-details-marker{display:none}
.drawer-nav .dcaret{width:18px;height:18px;color:var(--ink-3);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.drawer-nav .dgroup[open]>summary{background:var(--bg-soft);border-color:var(--line);color:var(--navy)}
.drawer-nav .dgroup[open]>summary .dcaret{transform:rotate(180deg);color:var(--navy)}
.drawer-nav .dgroup-body{display:flex;flex-direction:column;gap:2px;padding:6px 0 10px 8px;margin-left:10px;border-left:2px solid var(--line)}
.drawer-nav .dsub{
  display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;
  transition:background .18s ease,color .18s ease}
.drawer-nav .dsub-d{font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.45}
.drawer-nav .dsub:hover{background:rgba(185,244,249,.24);color:var(--navy-ink)}
.drawer-nav .dsub[aria-current="page"]{background:rgba(185,244,249,.3);color:var(--navy)}
.drawer-nav .dgroup[open]>.dgroup-body{animation:fixo-drawer-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes fixo-drawer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .drawer-nav .dcaret{transition:none}
  .drawer-nav .dgroup[open]>.dgroup-body{animation:none}
}
.drawer-foot{margin-top:auto;padding-top:20px;display:grid;gap:10px}
body.fixo-drawer-open{overflow:hidden}

/* --- footer ----------------------------------------------------------- */
.footer{background:var(--navy-ink);color:rgba(255,255,255,.78);padding:72px 0 0}
.footer-grid{display:grid;grid-template-columns:1.35fr .85fr 1.5fr 1.05fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .footer-h{color:#fff;font-size:15px;letter-spacing:.02em;line-height:1.2}
.footer p{font-size:13px}
.footer li{margin-bottom:10px;font-size:13px}
.footer a:hover{color:var(--aqua)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.04)}
.footer .badge svg{width:14px;height:14px;color:var(--aqua)}
.nap{display:grid;gap:14px}
.nap li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-2)}
.nap .ico{color:var(--navy);margin-top:3px;width:18px;height:18px}
.nap b{color:var(--ink);display:block;font-size:13px}
.footer .nap li{color:rgba(255,255,255,.78)}
.footer .nap .ico{color:var(--aqua)}
.footer .nap b{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0;font-size:12px;color:rgba(255,255,255,.55)}
.footer-bottom ul{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom li{margin:0}
/* service areas: eighteen cities as wrapping chips instead of a long column */
.footer .foot-areas .area-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.footer .foot-areas .area-chips li{margin:0}
.footer .foot-areas .area-chips a{
  display:inline-block;padding:6px 11px;border-radius:999px;font-size:12px;line-height:1.3;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.footer .foot-areas .area-chips a:hover{
  background:rgba(185,244,249,.14);border-color:rgba(185,244,249,.5);color:var(--aqua)}
.footer .foot-all{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:13px;font-weight:600;color:var(--aqua)}
.footer .foot-all:hover{color:#fff}

@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer .foot-areas{grid-column:1 / -1}
}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px}.footer{padding-top:52px}}

/* --- breadcrumbs -------------------------------------------------------
   Added for SEO: BreadcrumbList structured data has to reflect a trail that
   is actually on the page. Styled from the design's own tokens so it reads
   as part of the system rather than an add-on. */
.fixo-bc{
  background:#fff;border-bottom:1px solid var(--line);
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12px;line-height:1.5}
.fixo-bc *,.fixo-bc *::before,.fixo-bc *::after{box-sizing:border-box}
.fixo-bc .container{width:100%;max-width:1320px;margin:0 auto;padding:11px var(--gutter)}
.fixo-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.fixo-bc li{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:12px}
.fixo-bc a{color:var(--ink-3);text-decoration:none;padding:2px 0}
.fixo-bc a:hover{color:var(--navy)}
.fixo-bc span[aria-current]{color:var(--ink);font-weight:600}
.fixo-bc-sep{width:13px;height:13px;flex:none;display:block;
  stroke:var(--peri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .fixo-bc .container{padding:9px var(--gutter)}
  .fixo-bc li,.fixo-bc{font-size:11px}
}

/* --- neutralise Elementor's wrappers around the two templates --------- */
#masthead .e-con,#masthead .e-con-inner,
#colophon .e-con,#colophon .e-con-inner{--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0}
#masthead .elementor-widget:not(:last-child),
#colophon .elementor-widget:not(:last-child){margin-bottom:0}
#colophon{background:var(--navy-ink)}

/* --- button and link states -------------------------------------------
   Elementor's kit ships `.elementor-kit-7 a:hover{color:#3B5080}` at (0,2,1)
   and `.elementor-kit-7 button:hover{background-color:#3B5080;color:#fff}` at
   the same weight. Our hover rules only changed the background, so on hover
   the label fell back to the kit's navy — navy text on a navy button, i.e.
   invisible. Every interactive state below now pins its own colour at a
   specificity that clears the kit. Add new buttons the same way. */

.header .btn-primary,
.header .btn-primary:link,
.header .btn-primary:visited,
.drawer .btn-primary,
.drawer .btn-primary:link,
.drawer .btn-primary:visited{color:#fff}

.header .btn-primary:hover,
.header .btn-primary:focus,
.header .btn-primary:focus-visible,
.header .btn-primary:active,
.drawer .btn-primary:hover,
.drawer .btn-primary:focus,
.drawer .btn-primary:focus-visible,
.drawer .btn-primary:active{color:#fff;background:var(--navy-deep)}

.drawer .btn-outline:hover,
.drawer .btn-outline:focus,
.drawer .btn-outline:focus-visible,
.drawer .btn-outline:active{color:var(--navy);background:#fff;border-color:var(--navy)}

.header .header-phone:hover,
.header .header-phone:focus,
.header .header-phone:focus-visible{color:var(--navy);background:var(--bg-soft)}

.mega .mega-all:hover,
.mega .mega-all:focus-visible{color:var(--navy-ink)}
.mega .mega-feature-cta:hover,
.mega .mega-feature-cta:focus-visible{color:var(--navy-ink);background:#D3F8FB}
.mega .mega-areas-grid a:hover,
.mega .mega-areas-grid a:focus-visible{color:var(--navy-ink)}

.footer .container a:hover,
.footer .container a:focus-visible{color:var(--aqua)}
.footer .container .foot-all:hover,
.footer .container .foot-all:focus-visible{color:#fff}
.footer .container .area-chips a:hover,
.footer .container .area-chips a:focus-visible{color:var(--aqua)}

/* visible keyboard focus everywhere in the chrome */
.header .btn:focus-visible,
.drawer .btn:focus-visible,
.header .nav-toggle:focus-visible,
.drawer .drawer-close:focus-visible,
.nav>li>a:focus-visible,
.mega .mega-item:focus-visible,
.mega .mega-all:focus-visible,
.mega .mega-areas-grid a:focus-visible,
.mega .mega-feature-cta:focus-visible,
.drawer-nav .dtop:focus-visible,
.drawer-nav .dsub:focus-visible,
.drawer-nav summary:focus-visible,
.footer .container a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:8px}
.footer .container a:focus-visible{outline-color:var(--aqua)}

/* Hover colour guards: never let the kit's a:hover / button:hover colour take over
   on our own light hover grounds. */
.mega-item:hover,.mega-item:focus,.mega-item:focus-visible{color:var(--ink)}
.mega-item:hover .mega-d,.mega-item:focus-visible .mega-d{color:var(--ink-2)}
.drawer-nav .dtop:hover,.drawer-nav .dtop:focus,.drawer-nav .dtop:focus-visible,
.drawer-nav .dgroup>summary:hover,.drawer-nav .dgroup>summary:focus{color:var(--ink)}
.drawer-nav .dsub:hover,.drawer-nav .dsub:focus,.drawer-nav .dsub:focus-visible{color:var(--navy)}


/* ==========================================================================
   FOOTER SOCIAL LINKS  (2026-09-04)
   Two icon links in the footer brand column, under the trust badges. Sized to
   a 38px target so they clear the 24px minimum for touch without dominating
   the column, and built from the same border/background/aqua tokens as
   .badge above them so the block reads as one family.
   ========================================================================== */
.footer .social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.footer .social li { margin: 0; }
.footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer .social a:hover,
.footer .social a:focus-visible {
  border-color: var(--aqua);
  background: rgba(255, 255, 255, .09);
  transform: translateY(-2px);
}
.footer .social svg {
  width: 18px;
  height: 18px;
  color: var(--aqua);
}

@media (prefers-reduced-motion: reduce) {
  .footer .social a { transition: none; }
  .footer .social a:hover,
  .footer .social a:focus-visible { transform: none; }
}


/* ==========================================================================
   FOOTER CREDENTIAL STRIP  (2026-09-09)
   One row of trust plates between .footer-grid and .footer-bottom, rendered by
   novamira-sandbox/fixo-credential-strip.php.

   Plates are <div>, not <a>/<button>, so the elementor-kit-7 hover rule that
   sets colour as well as background (see the hover-states note in the header/
   footer doc) cannot match them. Do not turn a plate into a link without also
   pinning :hover colour.

   The icon tile is white on purpose: the icons are full-colour art, and a
   tinted tile muddies them. Same tile works on the navy footer ground.
   ========================================================================== */
.fixo-creds{border-top:1px solid rgba(255,255,255,.10);padding:22px 0 2px}
.creds-row{display:flex;flex-wrap:wrap;gap:14px}
.cred{display:flex;align-items:center;gap:12px;flex:1 1 236px;min-width:0;max-width:320px;
  padding:11px 15px;border-radius:12px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15)}
.cred-ic{width:40px;height:40px;border-radius:10px;background:#fff;flex:none;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cred-ic img{width:26px;height:26px;display:block}
.cred-b{min-width:0}
.cred-t{display:block;font-size:12.5px;font-weight:600;line-height:1.2;color:#fff}
.cred-s{display:block;font-size:10.5px;line-height:1.35;color:rgba(255,255,255,.62);margin-top:3px}
.cred-n{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.05em;color:#B9F4F9;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* Phone: two per row, matching the 2x2 the trust bar uses at this width. */
@media (max-width:640px){
  .fixo-creds{padding:18px 0 2px}
  .creds-row{gap:10px}
  .cred{flex:1 1 calc(50% - 5px);max-width:none;padding:10px 11px;gap:10px;border-radius:11px}
  .cred-ic{width:34px;height:34px;border-radius:9px}
  .cred-ic img{width:22px;height:22px}
  .cred-t{font-size:11.5px}
  .cred-s{font-size:9.5px;margin-top:2px}
  .cred-n{font-size:10.5px;margin-top:2px}
}
@media (max-width:400px){
  .cred{flex:1 1 100%}
}