/* ==========================================================================
   SMARTCARE GLOBAL HEADER AND FOOTER (.svh, .svf)
   1:1 Source Parity with html/header.html & html/footer.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL HEADER STYLES (.svh)
   -------------------------------------------------------------------------- */
.svh,.svh *{box-sizing:border-box;margin:0;padding:0}
.svh{
  --blk:#0a0a0a; --ash:#9aa0a6; --line:#1f1f1f; --glass-brd:rgba(255,255,255,.16);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.svh a{text-decoration:none;color:inherit}

/* ---- moving announcement bar (scrolls away) ---- */
.svh-marquee{background:linear-gradient(90deg,#000,#1a1a1a,#000);color:#fff;height:36px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.svh-track{display:flex;white-space:nowrap;will-change:transform;animation:svh-scroll 28s linear infinite}
.svh-track:hover{animation-play-state:paused}
.svh-track span{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#e8e8e8;padding:0 26px}
.svh-track span b{color:#fff;font-weight:800}
.svh-track span i{font-style:normal;color:var(--ash);margin:0 4px}
@keyframes svh-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---- STICKY solid bar (shrinks on scroll) ---- */
.svh-barwrap{position:relative;z-index:99990;background:var(--blk);border-bottom:1px solid var(--line);transition:background .25s,box-shadow .25s;width:100%}
.svh-barwrap.is-fixed{position:fixed;top:0;left:0;right:0;width:100%;z-index:99990}
body.admin-bar .svh-barwrap.is-fixed{top:32px}
@media(max-width:782px){body.admin-bar .svh-barwrap.is-fixed{top:46px}}
@media(max-width:600px){body.admin-bar .svh-barwrap.is-fixed{top:0}}
.svh-barwrap.scrolled{background:rgba(10,10,10,.96);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.svh-bar{display:flex;align-items:center;gap:16px;max-width:1280px;margin:0 auto;padding:16px 24px;transition:padding .25s}
.svh-barwrap.scrolled .svh-bar{padding:9px 24px}

.svh-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;cursor:pointer;flex:0 0 auto;background:rgba(255,255,255,.07);border:1px solid var(--glass-brd);border-radius:12px;transition:background .2s,transform .2s}
.svh-burger:hover{background:rgba(255,255,255,.16)}
.svh-burger:active{transform:scale(.95)}
.svh-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px}

.svh-logo{display:flex;align-items:center;flex:0 0 auto}
.svh-logo img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);transition:height .25s} /* force WHITE logo */
.svh-barwrap.scrolled .svh-logo img{height:34px}

.svh-spacer{flex:1 1 auto}

.svh-phone{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;font-size:14px}
.svh-phone svg{width:16px;height:16px;color:#fff}
.svh-phone:hover{color:#e0e0e0}

.svh-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;flex:0 0 auto;background:rgba(255,255,255,.07);border:1px solid var(--glass-brd);color:#fff;transition:background .2s}
.svh-cart:hover{background:rgba(255,255,255,.16)}
.svh-cart svg{width:20px;height:20px;color:#fff}
.svh-cart .count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;background:#fff;color:#0a0a0a;border-radius:999px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}

/* enquire, white pill, forced BLACK text */
.svh-cta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;background:#fff;padding:11px 18px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.2px;white-space:nowrap;border:1px solid #fff;transition:transform .15s,background .2s}
.svh-cta,.svh-cta *{color:#0a0a0a !important}
.svh-cta:hover{transform:translateY(-1px);background:#ededed}
.svh-cta svg{width:16px;height:16px}
.svh-cta svg path{fill:#0a0a0a}

/* ---- left drawer ---- */
.svh-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:99991}
.svh-overlay.open{opacity:1;visibility:visible}
.svh-drawer{position:fixed;top:0;left:0;height:100%;width:330px;max-width:88vw;z-index:99992;background:rgba(10,10,12,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;transform:translateX(-100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:8px 0 50px rgba(0,0,0,.5);border-right:1px solid var(--glass-brd)}
.svh-drawer.open{transform:translateX(0)}
.svh-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}
.svh-drawer-top img{height:34px;width:auto;filter:brightness(0) invert(1)}
.svh-close{width:42px;height:42px;border:1px solid var(--glass-brd);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.svh-close:hover{background:rgba(255,255,255,.16)}
.svh-nav{padding:8px 0;overflow-y:auto;flex:1}
.svh-nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:15px;font-weight:500;color:#e9e9e9;border-bottom:1px solid rgba(255,255,255,.06);transition:background .2s,padding .2s,color .2s}
.svh-nav a:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:30px}
.svh-nav a .tag{font-size:10px;font-weight:800;letter-spacing:.08em;background:#fff;color:#0a0a0a;border-radius:999px;padding:3px 8px}
.svh-nav a .arr{color:var(--ash);font-size:13px}
.svh-drawer-foot{padding:18px 24px;border-top:1px solid rgba(255,255,255,.1)}
.svh-drawer-foot .svh-cta{width:100%;justify-content:center;margin-bottom:12px}
.svh-drawer-foot .svh-call{display:flex;align-items:center;justify-content:center;gap:8px;color:#cfcfcf;font-size:13px;font-weight:600}
.svh-drawer-foot .svh-call:hover{color:#fff}

@media (max-width: 620px) {
  .svh-barwrap {
    overflow-x: clip;
    width: 100%;
  }
  .svh-bar {
    padding: 10px 16px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .svh-barwrap.scrolled .svh-bar {
    padding: 7px 16px !important;
  }
  .svh-burger {
    width: 38px !important;
    height: 38px !important;
    padding: 9px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }
  .svh-logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .svh-logo img {
    height: 28px !important;
    max-width: 120px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .svh-phone {
    display: none !important;
  }
  .svh-marquee {
    height: 32px !important;
  }
  .svh-track span {
    font-size: 11.5px !important;
    padding: 0 16px !important;
  }
  .svh-cart {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }
  .svh-cart svg {
    width: 18px !important;
    height: 18px !important;
  }
  .svh-cta {
    padding: 8px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .svh-cta svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ===== 3D LOGO PRELOADER (site-wide loading screen) ===== */
.svh-pre{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 40%,#141418 0,#070708 72%);transition:opacity .7s ease,visibility .7s ease}
.svh-pre.done{opacity:0;visibility:hidden}
.svh-pre-stage{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center;perspective:900px}
.svh-pre-ring{position:absolute;width:198px;height:198px;border-radius:50%;background:conic-gradient(from 0deg,#ff3b3b,#ff8a2c,#ffe53b,#37d67a,#33c4ff,#5b6bff,#b15bff,#ff3b3b);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));filter:drop-shadow(0 0 18px rgba(255,255,255,.22));opacity:.95;animation:svh-pre-spin 2.4s linear infinite}
.svh-pre-glow{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(50px);opacity:.5;background:conic-gradient(from 0deg,#ff3b3b,#ffe53b,#33c4ff,#b15bff,#ff3b3b);animation:svh-pre-spin 6s linear infinite reverse}
.svh-pre-logo{position:relative;z-index:2;width:120px;height:auto;display:block;filter:brightness(0) invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.6));animation:svh-pre-in 1.15s cubic-bezier(.2,.7,.2,1) both}
.svh-pre-bar{position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);width:140px;height:3px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.svh-pre-bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:#fff;animation:svh-pre-load 1.15s ease-in-out infinite}
@keyframes svh-pre-spin{to{transform:rotate(360deg)}}
@keyframes svh-pre-in{0%{opacity:0;transform:rotateY(-90deg) scale(.7)}60%{opacity:1}100%{opacity:1;transform:rotateY(0) scale(1)}}
@keyframes svh-pre-load{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.svh-pre-ring,.svh-pre-glow,.svh-pre-logo,.svh-pre-bar i{animation:none}}
@media (max-width: 768px) { .svh-pre, #svhPre { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }

/* ===== force phone + cart visible (beats theme link colors) ===== */
.svh-phone,.svh-phone *{color:#fff !important}
.svh-cart,.svh-cart svg{color:#fff !important}

/* ===== AURA BEAM illuminated Enquire button (RGB) ===== */
@keyframes svh-aura-slide{to{background-position:300% 0}}
@keyframes svh-aura-glow{0%,100%{box-shadow:0 0 14px rgba(255,59,59,.55)}25%{box-shadow:0 0 14px rgba(255,229,59,.55)}50%{box-shadow:0 0 14px rgba(55,214,122,.55)}75%{box-shadow:0 0 14px rgba(91,107,255,.55)}}
.svh-cta{position:relative;z-index:0;border-color:transparent;animation:svh-aura-glow 6s linear infinite}
.svh-cta::before{content:"";position:absolute;inset:0;border-radius:999px;padding:2px;background:linear-gradient(90deg,#ff3b3b,#ff8a2c,#ffe53b,#37d67a,#33c4ff,#5b6bff,#b15bff,#ff3b3b);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:svh-aura-slide 5s linear infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.svh-cta,.svh-cta::before{animation:none}}

/* --------------------------------------------------------------------------
   2. GLOBAL FOOTER STYLES (.svf)
   -------------------------------------------------------------------------- */
.svf,.svf *{box-sizing:border-box;margin:0;padding:0}
.svf{
  --blk:#0a0a0a; --line:#262626; --ash:#9aa0a6; --mut:#b9b9b9;
  --glass-brd:rgba(255,255,255,.12);
  background:linear-gradient(180deg,#0c0c0e,#070708);color:#e9e9e9;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.svf a{text-decoration:none;color:inherit;transition:color .2s}
.svf a:hover{color:#fff}
.svf .wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* contact strip (glass) */
.svf-contact{border-bottom:1px solid var(--line)}
.svf-contact .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px}
.svf-cline{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.svf-cline:hover{background:rgba(255,255,255,.08)}
.svf-cline svg{width:22px;height:22px;flex:0 0 auto;color:#fff}
.svf-cline small{display:block;color:var(--ash);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em}
.svf-cline b{font-size:14.5px;font-weight:600;color:#fff}

/* main columns */
.svf-main{padding:54px 0 40px}
.svf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
.svf-brand img{height:44px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.svf-brand p{color:var(--mut);font-size:14px;max-width:30ch;margin-bottom:18px;line-height:1.6}
.svf-social{display:flex;gap:10px}
.svf-social a{width:38px;height:38px;border:1px solid var(--glass-brd);border-radius:10px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.svf-social a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.svf-social svg{width:18px;height:18px;color:#e9e9e9}
.svf-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:16px;font-weight:700}
.svf-col ul{list-style:none}
.svf-col li{margin-bottom:11px}
.svf-col a{color:var(--mut);font-size:14px}
.svf-col a .nw{font-size:9.5px;font-weight:800;letter-spacing:.06em;background:#fff;color:#0a0a0a;border-radius:999px;padding:2px 6px;margin-left:6px;vertical-align:middle}

/* bottom */
.svf-bottom{border-top:1px solid var(--line)}
.svf-bottom .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:20px 22px}
.svf-bottom p{color:var(--ash);font-size:13px}
.svf-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
.svf-bottom nav a{color:var(--ash);font-size:13px}

@media(max-width:900px){
  .svf-grid{grid-template-columns:1fr 1fr}
  .svf-brand{grid-column:1 / -1}
  .svf-contact .wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svf-bottom .wrap{flex-direction:column;align-items:flex-start}
}

/* --------------------------------------------------------------------------
   3. CANONICAL BRAND AURA GRADIENT & KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes sv-aura-slide {
  to {
    background-position: 300% 0;
  }
}

@keyframes sv-aura-text-scoped {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.aura-text,
.text-aura-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: sv-aura-text-scoped 6s linear infinite !important;
  display: inline !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .aura-text,
  .text-aura-gradient {
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
  }
}

/* --------------------------------------------------------------------------
   4. GLOBAL SCROLL REVEAL UTILITIES (.reveal, .rv)
   -------------------------------------------------------------------------- */
.reveal,
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.in,
.rv.in {
  opacity: 1 !important;
  transform: none !important;
}

.reveal.d1, .rv.d1 { transition-delay: 0.1s; }
.reveal.d2, .rv.d2 { transition-delay: 0.2s; }
.reveal.d3, .rv.d3 { transition-delay: 0.3s; }
.reveal.d4, .rv.d4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Disable aura pulse animations on mobile devices */
@media (max-width: 768px) {
  .animate-aura-pulse,
  [class*="animate-aura-pulse"] {
    display: none !important;
    animation: none !important;
  }
}
}

/* Hide Trustindex review notices */
.ti-widget-notice,
.ti-free-widget-notice,
.ti-widget-container .ti-notice,
.ti-widget-container .ti-free-widget-notice,
[class*="ti-notice"],
[class*="free-widget-notice"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   SCROLL TO TOP BUTTON (.sv-scroll-top)
   -------------------------------------------------------------------------- */
.sv-scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 15, 18, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99980;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s,
              border-color 0.2s,
              color 0.2s,
              box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 0;
}
.sv-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sv-scroll-top svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}
.sv-scroll-top:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.35);
}
.sv-scroll-top:hover svg {
  transform: translateY(-2px);
}
.sv-scroll-top:active {
  transform: translateY(0) scale(0.95);
}
@media (max-width: 620px) {
  .sv-scroll-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
  .sv-scroll-top svg {
    width: 20px;
    height: 20px;
  }
}