/* kwd — the public site's top bar (app/views/partials/site_top.php): the logo, Services and its menu, the other
   links, the phone, Free report and Sign in. On the public site (marketing.css), and on the sign-in, 404 and
   "link not active" pages, whose own styles it mustn't touch: every rule here is under .top. marketing.js runs it
   (the Services menu, the burger, solid once the page scrolls). */
:root{--deep:var(--surface-hero-2);--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,.7,.2,1.25);
  --glass:color-mix(in srgb,var(--white) 6%,transparent);--glass-line:color-mix(in srgb,var(--white) 11%,transparent);--lime-glow:color-mix(in srgb,var(--highlight) 40%,transparent)}
.top{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.top .wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 28px;position:relative;z-index:1;box-sizing:border-box}
.top *,.top *::before,.top *::after{box-sizing:border-box}
.top svg{display:block}
.top{position:fixed;left:0;right:0;top:0;z-index:50;transition:background-color .35s,box-shadow .35s,backdrop-filter .35s}
.top-in{display:flex;align-items:center;gap:28px;height:84px;transition:height .35s var(--ease)}
.top.scrolled{background:color-mix(in srgb,var(--deep) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--glass-line),0 10px 30px -18px color-mix(in srgb,var(--black) 60%,transparent)}
.top.scrolled .top-in{height:66px}
.top .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white);font-weight:760;font-size:22px;letter-spacing:-.02em;flex:none}
.top .logo img{width:38px;height:38px;transition:transform .5s var(--spring)}
.top .logo:hover img{transform:rotate(-8deg) scale(1.06)}
.top .logo b{color:var(--highlight-light);font-weight:720}
.top .logo span{position:relative;padding-bottom:.14em}
/* the underline: on hover it reaches half a character past the name at each end */
.top .logo span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.1em;pointer-events:none;background:linear-gradient(90deg,transparent,var(--highlight-soft)),linear-gradient(var(--accent-light) 0 0);transition:left .5s var(--spring),right .5s var(--spring)}
.top .logo:hover span::after{left:-.5ch;right:-.5ch}
.top .menu{display:flex;align-items:center;gap:4px;flex:1}
.top .menu > a,.top .sub-link,.top .sub-btn{position:relative;font:inherit;font-size:15px;font-weight:560;color:var(--ink-hero);text-decoration:none;padding:9px 13px;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.top .menu > a::after,.top .sub-link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:var(--highlight-light);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.top .menu > a:hover::after,.top .menu > a[aria-current]::after,.top .sub-link:hover::after,.top .sub-link[aria-current]::after,.top .has-sub.open .sub-link::after{transform:scaleX(1)}
.top .menu > a:hover,.top .sub-link:hover,.top .sub-btn:hover{color:var(--white)}
.top .has-sub{display:flex;align-items:center}
.top .sub-link{padding-right:4px!important}
.top .sub-btn{padding:9px 8px 9px 2px!important}
.top .sub-btn .ic{transition:transform .3s var(--ease)}
.top .has-sub{position:relative}
.top .has-sub.open .sub-btn .ic{transform:rotate(180deg)}
.top .sub{position:absolute;left:-20px;top:calc(100% + 12px);width:min(720px,92vw);padding:14px;border-radius:20px;background:color-mix(in srgb,var(--deep) 92%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--glass-line);box-shadow:0 30px 70px -20px color-mix(in srgb,var(--black) 70%,transparent);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:20% 0;transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.top .has-sub.open .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.top .sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.top .sub-grid a{display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:13px;text-decoration:none;transition:background-color .2s}
.top .sub-grid a:hover,.top .sub-grid a[aria-current]{background:var(--glass)}
.top .sub-grid i{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--highlight-light);background:color-mix(in srgb,var(--highlight-light) 10%,transparent);border:1px solid color-mix(in srgb,var(--highlight-light) 22%,transparent);transition:transform .35s var(--spring)}
.top .sub-grid a:hover i{transform:scale(1.08) rotate(-4deg)}
.top .sub-grid b{display:block;color:var(--white);font-size:15px;font-weight:650}
.top .sub-grid small{display:block;font-size:13px;line-height:1.45;color:var(--ink-hero-3)}
.top .sub-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:13px 14px 4px;border-top:1px solid var(--glass-line);font-size:14px;color:var(--ink-hero-3)}
.top .sub-foot span a,.top .sub-foot a.all{display:inline-flex;align-items:center;gap:6px;color:var(--highlight-light);font-weight:650;text-decoration:none}
.top .sub-foot a.all{color:var(--white)}
.top .sub-foot a .ic{transition:transform .3s var(--ease)}.top .sub-foot a:hover .ic{transform:translateX(4px)}
.top .menu-acts{display:flex;align-items:center;gap:14px;margin-left:auto}
.top .tel{display:inline-flex;align-items:center;gap:8px;color:var(--white);font-weight:650;font-size:15px;text-decoration:none;white-space:nowrap}
.top .tel .ic{color:var(--highlight-light)}
.top .signin{font-size:14.5px;font-weight:600;color:var(--ink-hero-2);text-decoration:none;padding:8px 4px}
.top .signin:hover{color:var(--white)}
.top .burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);color:var(--white);cursor:pointer;place-items:center}
.top .burger .ic:last-child{display:none}
/* the Free report button, as on the site */
.top .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:680;text-decoration:none;cursor:pointer;border:0;overflow:hidden;isolation:isolate;transition:transform .35s var(--spring),box-shadow .35s}
.top .btn-primary{color:var(--deep);background:linear-gradient(135deg,var(--highlight-soft),var(--highlight) 55%,var(--accent-green));background-size:180% 180%;box-shadow:0 1px 0 color-mix(in srgb,var(--white) 60%,transparent) inset,0 12px 32px -12px var(--lime-glow)}
.top .btn-primary:hover{background-position:100% 100%;transform:translateY(-2px)}
.top .btn.sm{padding:10px 16px;font-size:14.5px;border-radius:11px}
@media (max-width:1100px){
  .top .menu > a,.top .sub-btn{padding:9px 9px}
  .top .signin{display:none}
}
@media (max-width:980px){
  .top .burger{display:grid}
  .top .menu{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;gap:2px;padding:100px 24px 40px;overflow-y:auto;
    background:color-mix(in srgb,var(--deep) 97%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s}
  .menu-open .top .menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease)}
  .menu-open .top .burger .ic:first-child{display:none}.menu-open .top .burger .ic:last-child{display:block}
  body.menu-open{overflow:hidden}   /* the page behind the open menu stays still */
  .top .menu > a,.top .sub-link{font-size:20px;padding:14px 6px;width:100%;justify-content:space-between}
  .top .has-sub{flex-wrap:wrap}.top .has-sub .sub-link{flex:1;width:auto}.top .has-sub .sub{flex-basis:100%}
  .top .sub-btn{width:48px;height:48px;justify-content:center;border:1px solid var(--glass-line)!important;border-radius:12px;padding:0!important}
  .top .menu > a::after,.top .sub-link::after{display:none}
  .top .sub-foot{flex-direction:column;align-items:flex-start}
  .top .sub{position:static;width:auto;padding:0;margin:0 0 6px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:none;opacity:1;visibility:visible;transform:none}
  .top .has-sub.open .sub{display:block}
  .top .sub-grid{grid-template-columns:1fr}
  .top .menu-acts{flex-direction:column;align-items:stretch;margin:24px 0 0;gap:12px}
  .top .menu-acts .btn{padding:15px}
  .top .signin{display:block;text-align:center}
  .top-in{height:72px}
}
.top .sub-link::after{right:4px!important}
@media (hover:hover) and (min-width:981px){.top .has-sub:hover .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}.top .has-sub:hover .sub-btn .ic{transform:rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.top *,.top *::before,.top *::after{transition:none!important;animation:none!important}}

/* ---- .embed: laid into a page shaped like the sign-in page (partials/site_top.php) ---- */
.top .mk-d,.top .bar-acts{display:none}
.top.embed{position:absolute;right:auto;width:var(--embed-w,100%)}   /* as wide as the teal side (the page sets --embed-w) */
.top.embed,.top.embed.scrolled{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.top.embed .wrap{max-width:none;padding:0 64px}
.top.embed .top-in,.top.embed.scrolled .top-in{height:172px}          /* the logo where the sign-in page always had it: 56px down */
.top.embed .logo{font-size:30px;gap:14px;font-weight:750}
.top.embed .logo img{width:60px;height:60px}
.top.embed .menu{display:none}                                        /* its links are in the menu button's panel */
.top.embed .bar-acts{display:flex;align-items:center;gap:18px;margin-left:auto}
.top.embed .bar-acts > *{flex:none;white-space:nowrap}
/* the menu button and its panel: the Services menu's look, opened by a click or (with a pointer) by hovering */
.top.embed .hb{position:relative}
.top.embed .burger{display:grid}
.top.embed .hb.open .burger .ic:first-child{display:none}.top.embed .hb.open .burger .ic:last-child{display:block}
.top.embed .hb-panel{top:calc(100% + 12px);left:auto;right:0;width:min(700px,calc(var(--embed-w,100vw) - 80px));max-height:calc(100vh - 140px);overflow-y:auto;overflow-x:hidden;white-space:normal}   /* opens below the button, its right edge under the button's, never past the teal's left edge; its text wraps (the row it sits in doesn't) */
.top.embed .hb.open .hb-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.top .hb-panel{transform-origin:90% 0}
.top.embed .hb-panel .sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}   /* columns may be narrower than their text: it wraps, never scrolls sideways */
.top .hb-h{display:block;margin:6px 12px 6px;font-size:11.5px;font-weight:720;letter-spacing:.13em;text-transform:uppercase;color:var(--highlight-light)}
.top .hb-h ~ .hb-h{margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-line)}
@media (max-width:1180px){.top.embed .bar-acts .tel span{display:none}}   /* the phone as its icon, where the teal runs short */
/* stacked (the teal on top, full width): smaller */
@media (max-width:980px){
  .top.embed{width:100%}
  .top.embed .wrap{padding:0 24px}
  .top.embed .top-in,.top.embed.scrolled .top-in{height:96px}
  .top.embed .logo{font-size:24px}.top.embed .logo img{width:44px;height:44px}
  .top.embed .hb-panel .sub-grid{grid-template-columns:minmax(0,1fr)}
  /* the phone menu's rules for .sub would flatten the panel: it stays a floating panel here too */
  .top.embed .hb-panel{position:absolute;display:block;top:calc(100% + 10px);left:auto;right:0;width:min(560px,calc(100vw - 40px));padding:14px;margin:0;background:color-mix(in srgb,var(--deep) 96%,transparent);
    border:1px solid var(--glass-line);border-radius:20px;box-shadow:0 30px 70px -20px color-mix(in srgb,var(--black) 70%,transparent);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px)}
}
@media (hover:hover) and (min-width:981px){.top.embed .hb:hover .hb-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}}

/* ---- liquid glass, for what floats over the page (the menus, the bar once scrolled): a lens rather than a plain
   blur — lighter tint, the colours behind boosted and brightened, a lit rim (bright top-left, fading to the
   bottom-right), a soft glow inside and a shadow under ---- */
.top .sub,.top.scrolled{
  background:linear-gradient(135deg,color-mix(in srgb,var(--white) 10%,transparent),color-mix(in srgb,var(--white) 2%,transparent) 45%,color-mix(in srgb,var(--deep) 30%,transparent)),color-mix(in srgb,var(--deep) 58%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.08);backdrop-filter:blur(22px) saturate(1.9) brightness(1.08)}
.top .sub{border:1px solid transparent;border-radius:22px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 32%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--white) 8%,transparent),inset 0 -12px 30px -18px color-mix(in srgb,var(--highlight-light) 35%,transparent),
    0 30px 70px -22px color-mix(in srgb,var(--black) 70%,transparent),0 8px 20px -10px color-mix(in srgb,var(--black) 45%,transparent)}
/* the lit rim: a gradient border, bright where the light hits */
.top .sub::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--white) 55%,transparent),color-mix(in srgb,var(--white) 12%,transparent) 35%,transparent 60%,color-mix(in srgb,var(--highlight-light) 30%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.top.scrolled{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--white) 14%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 10%,transparent),0 12px 34px -16px color-mix(in srgb,var(--black) 60%,transparent)}
/* the links inside: a glassy pill on hover */
.top .sub-grid a:hover,.top .sub-grid a[aria-current]{background:linear-gradient(135deg,color-mix(in srgb,var(--white) 12%,transparent),color-mix(in srgb,var(--white) 4%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 18%,transparent)}
/* the round buttons on the split pages' teal, glassy too */
.top.embed .burger,.is-portal .top.embed .bar-acts .tel{background:linear-gradient(160deg,color-mix(in srgb,var(--white) 16%,transparent),color-mix(in srgb,var(--white) 4%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 30%,transparent),0 6px 16px -8px color-mix(in srgb,var(--black) 55%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6)}
/* phones (the menu as a list in the full-screen sheet): no floating panel there */
@media (max-width:980px){.top:not(.embed) .sub{box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.top:not(.embed) .sub::before{display:none}}
/* the bar runs over white sections too: more of the deep green in it, so its white words stay clear (still a lens) */
.top.scrolled{background:linear-gradient(180deg,color-mix(in srgb,var(--white) 7%,transparent),transparent 60%),color-mix(in srgb,var(--deep) 84%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9)}
/* the scrolled bar's glass lives on a layer behind it, not on the bar itself: a blur on the bar would stop the Services
   menu inside it from blurring the page (a blur inside a blur only sees its parent), so it lost its glass once scrolled */
.top.scrolled{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,color-mix(in srgb,var(--white) 7%,transparent),transparent 60%),color-mix(in srgb,var(--deep) 84%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9)}
.top.scrolled::before{opacity:1}
.top.embed::before{display:none}
@media (max-width:980px){.menu-open .top::before{opacity:0}}
/* scrolled, the menu often opens over white: more of the deep green in its glass, so its words stay clear */
.top.scrolled .sub{background:linear-gradient(135deg,color-mix(in srgb,var(--white) 9%,transparent),transparent 45%,color-mix(in srgb,var(--deep) 30%,transparent)),color-mix(in srgb,var(--deep) 84%,transparent)}
/* the menus' glass: 86% of the deep green everywhere (over the dark header or white sections alike), and the small
   descriptions brighter */
.top .sub,.top.scrolled .sub{background:linear-gradient(135deg,color-mix(in srgb,var(--white) 9%,transparent),transparent 45%,color-mix(in srgb,var(--deep) 30%,transparent)),color-mix(in srgb,var(--deep) 86%,transparent)}
.top .sub-grid small{color:var(--ink-hero-2)}
.top .sub-foot{color:var(--ink-hero-2)}