/* Pages that scroll normally (founder, 27 October 2026: the other pages get the same treatment as the main pages): the
   service sites' inner pages, and on the main site the guides, checklists and legal pages. Same file on every site
   (edit it in VeraTrust, then copy it to the others and to veracrest).
   PC: once the header has scrolled away, a bar slides in with the home button and the site's logo on the left, the page
   name in the middle, and Enquire Now and the Services spanner on the right. Phones keep the two corner buttons
   (css/page-head.css) and get the Enquire tab at the bottom. Parts of the page build in as they come into view. */

/* the bar (PC only) */
.ib{display:none}
@media (min-width:1024px){
.ib{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;height:54px;z-index:50;box-sizing:border-box;
 background:rgba(5,12,19,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(var(--a-rgb),.18);
 transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility 0s .3s}
html.hd-past .ib{transform:none;opacity:1;visibility:visible;transition:transform .3s ease,opacity .3s ease}
.ib-brand{position:absolute;left:48px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px}
.ib-home{width:36px;height:36px;box-sizing:border-box;border-radius:10px;display:grid;place-items:center;color:var(--a);background:rgba(10,22,29,.85);
 border:1px solid rgba(var(--a-rgb),.45);text-decoration:none;transition:box-shadow .25s}
.ib-home svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib-home:hover,.ib-home:focus-visible{box-shadow:0 0 14px rgba(var(--a-rgb),.45)}
.ib-svc{display:flex;align-items:center;gap:10px;text-decoration:none}
.ib-svc img:first-child{width:26px;height:26px}
.ib-svc .ib-wm{height:22px;width:auto}
.ib-svc:hover .ib-wm,.ib-svc:focus-visible .ib-wm{filter:brightness(1.15)}
.ib-t{margin:0;max-width:calc(100% - 700px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/1.2 "Sora",Arial,sans-serif;color:#fff}
/* the header's own Services spanner, pinned into the bar (one menu) */
html.hd-past .site-header{z-index:55;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.hd-past .site-header .svc-dd{position:fixed;top:9px;right:48px;z-index:60}
html.hd-past .site-header .svc-btn{width:36px;height:36px;padding:0;justify-content:center;border-radius:10px;color:var(--a);background:rgba(10,22,29,.85);border:1px solid rgba(var(--a-rgb),.45);box-shadow:none}
html.hd-past .site-header .svc-btn .svc-txt,html.hd-past .site-header .svc-btn>svg:not(.svc-wrench){display:none}
html.hd-past .site-header .svc-btn .svc-wrench{display:block;width:20px;height:20px;transform:none!important;stroke:currentColor}
html.hd-past .site-header .svc-btn:hover,html.hd-past .site-header .svc-btn[aria-expanded="true"]{box-shadow:0 0 14px rgba(var(--a-rgb),.45)}
html.hd-past .site-header .svc-menu{right:0;left:auto;top:46px}
}
@media (min-width:1024px) and (max-width:1279px){.ib-wm{display:none}.ib-t{max-width:calc(100% - 520px)}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.ib,html.hd-past .ib{transition:none}}

/* Enquire: the bottom tab on phones, a floating button on tablets, "Enquire Now" in the bar on PC */
.m-cta{display:none}
.m-cta .cta-s{display:none}
@media (max-width:760px){
.m-cta{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:45;pointer-events:none;transform:translateY(110%);transition:transform .3s ease}
.m-cta.show{transform:none}
.m-cta .btn{pointer-events:auto;padding:11px 24px;font-size:14px;border-radius:14px 14px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.5),0 0 18px var(--glow)}
@supports (-webkit-touch-callout:none){.m-cta .btn{padding-bottom:calc(11px + min(env(safe-area-inset-bottom,0px),34px))}}
}
@media (min-width:761px) and (max-width:1023px){
.m-cta{display:flex;position:fixed;right:24px;bottom:14px;z-index:45;pointer-events:none;transform:translateY(calc(100% + 40px));opacity:0;transition:transform .35s ease,opacity .35s ease}
.m-cta.show{transform:none;opacity:1}
.m-cta .btn{pointer-events:auto;padding:10px 22px;font-size:14px;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 22px var(--glow)}
}
@media (min-width:1024px){
.m-cta{display:flex;position:fixed;top:9px;right:96px;z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
html.hd-past .m-cta{opacity:1}
.m-cta .btn{pointer-events:none;height:36px;box-sizing:border-box;padding:0 16px;font-size:13.5px;border-radius:10px;box-shadow:none;display:inline-flex;align-items:center}
html.hd-past .m-cta .btn{pointer-events:auto}
.m-cta .cta-l{display:none}.m-cta .cta-s{display:inline}
}
@media (prefers-reduced-motion:reduce){.m-cta{transition:none}}
/* phones: the end of the page stays clear of the tab */
@media (max-width:760px){html.ib-on .site-footer{padding-bottom:64px}}

/* build-in (style 1, as on the main pages): parts fade in and rise a little as they come into view; fades and small
   moves only, so the layout never shifts. Nothing is hidden unless js/inner.js runs. */
html.bi .ib-p{opacity:0;transform:translateY(16px)}
html.bi .ib-p.ib-in{opacity:1;transform:none;transition:opacity .55s ease var(--bi-d,0ms),transform .65s cubic-bezier(.2,.8,.2,1) var(--bi-d,0ms)}
