:root{
  --blue:#1E8BF0; --glow:#62C0FF; --deep:#0A2C54;
  --ink:#050608; --coal:#090C12;
  --txt:#EAF0F8; --mut:#8A96A8;
  --line:rgba(255,255,255,.08);
}
html,body{background:var(--ink);color:var(--txt);font-family:"Switzer","Nunito",sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:var(--blue);color:#fff;}

/* ---------- atmosphere ---------- */
.grain:before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mesh{
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(30,139,240,.20), transparent 70%),
    radial-gradient(50% 45% at 92% 18%, rgba(98,192,255,.12), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(10,44,84,.55), transparent 70%),
    var(--ink);
}

/* ---------- chrome / metallic text (matches logo) ---------- */
.chrome{
  background:linear-gradient(180deg,#ffffff 0%,#E6EDF7 38%,#9EAAC0 58%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.06);
}
.blue-grad{
  background:linear-gradient(180deg,var(--glow),var(--blue) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.display{font-family:"Nunito",sans-serif;letter-spacing:-.02em;line-height:1.02;font-weight:800;}
.italic-skew{font-style:italic;}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-weight:700;border-radius:16px;
     font-family:"Nunito",sans-serif;
     transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s;will-change:transform;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{
  background:linear-gradient(180deg,#2E9BFF,#1577DE);color:#fff;padding:.95rem 1.6rem;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -8px rgba(30,139,240,.65),0 2px 8px rgba(0,0,0,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 40px -10px rgba(30,139,240,.85);}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--txt);padding:.95rem 1.5rem;border:1px solid var(--line);
           backdrop-filter:blur(8px);box-shadow:0 8px 24px -14px rgba(0,0,0,.6);}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);border-color:rgba(98,192,255,.4);}
.focusable:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:16px;}

/* ---------- nav links ---------- */
.nav-link{position:relative;transition:color .25s;}
.nav-link.active{color:#fff;}
.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),var(--blue));}

/* ---------- glass cards ---------- */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 60px -40px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
}
.card-hover{transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;}
.card-hover:hover{transform:translateY(-6px);border-color:rgba(98,192,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 70px -45px rgba(30,139,240,.5);}

/* ---------- image treatment ---------- */
.img-treat{position:relative;overflow:hidden;}
.img-treat img{transition:transform .8s cubic-bezier(.22,1,.36,1);}
.img-treat:hover img{transform:scale(1.06);}
.img-treat:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,8,.85),rgba(5,6,8,.05) 55%);}
.img-tint:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(140deg,rgba(30,139,240,.28),transparent 60%);mix-blend-mode:multiply;}

/* ---------- reveal (subtle) ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in-view{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(10px);}
.stagger.in-view>*{animation:rise .45s ease forwards;}
.stagger.in-view>*:nth-child(1){animation-delay:.03s}
.stagger.in-view>*:nth-child(2){animation-delay:.08s}
.stagger.in-view>*:nth-child(3){animation-delay:.13s}
.stagger.in-view>*:nth-child(4){animation-delay:.18s}
.stagger.in-view>*:nth-child(5){animation-delay:.23s}
.stagger.in-view>*:nth-child(6){animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}

/* hero entrance */
.h-rise{opacity:0;transform:translateY(14px);animation:rise .55s ease forwards;}

/* shine sweep */
@keyframes sweep{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(220%) skewX(-20deg)}}
.shine{position:relative;overflow:hidden;}
.shine:after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:sweep 5.5s ease-in-out infinite;}

/* marquee */
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee{animation:scrollx 50s linear infinite;}
.marquee.marquee-fast{animation-duration:28s;}

/* nav scrolled */
#nav.scrolled{background:rgba(6,8,12,.82);backdrop-filter:blur(14px);border-color:var(--line);}

/* scroll cue — static (animation removed to calm the page) */
.floaty{animation:none;}

/* page hero band (inner pages) */
.page-hero{position:relative;padding-top:124px;padding-bottom:48px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% -10%,rgba(30,139,240,.18),transparent 60%),var(--ink);
  border-bottom:1px solid var(--line);}

/* before/after — auto-rotating two-photo comparison */
.ba-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.ba-dull .ba-layer{filter:saturate(.5) brightness(.66) contrast(.96) sepia(.1);} /* placeholder "before" look — remove this class once real before photos are used */
.ba-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);border:0;padding:0;cursor:pointer;
  transition:background .3s,width .3s;}
.ba-dot:hover{background:rgba(255,255,255,.45);}
.ba-dot.active{width:22px;background:linear-gradient(90deg,var(--glow),var(--blue));}
.ba-dot:focus-visible{outline:2px solid var(--glow);outline-offset:3px;}

details summary::-webkit-details-marker{display:none;}
.faq[open] .faq-ic{transform:rotate(45deg);}
.faq[open] .faq-body{animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.stagger>*,.h-rise{opacity:1!important;transform:none!important}}
.stagger.in-view>*{opacity:1;}

/* ---------- form ---------- */
.form-in{margin-top:.4rem;width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;
  padding:.8rem .95rem;color:var(--txt);font-size:14px;font-family:"Switzer",sans-serif;transition:border-color .25s,background .25s,box-shadow .25s;}
.form-in::placeholder{color:rgba(255,255,255,.3)}
.form-in:focus{outline:none;border-color:rgba(98,192,255,.55);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(30,139,240,.12)}
select.form-in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A96A8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.img-fallback img{opacity:0}
.img-fallback{background:linear-gradient(135deg,#0A2C54,#090C12);}
.img-fallback:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 30%,rgba(30,139,240,.4),transparent 60%);}

/* keep footer content clear of the fixed mobile "Call Olly" bar (only shown < 640px) */
@media (max-width:639px){ footer{ padding-bottom:96px; } }