/* Shared styling for service detail pages.
   Same-origin and cached across pages, so the second and third service page
   cost nothing extra to load. Kept separate from index.html, which has its own
   hero and tile styling that these pages don't need. */

/* Self-hosted type, matching the homepage. Browsers only download the weights
   a page actually uses, so listing all faces here costs nothing extra. */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/sora-800.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800.woff2') format('woff2')}

:root{
  --sky-900:#050e24;--sky-800:#0a1e45;--sky-700:#113c7f;--sky-500:#2f7ddb;
  --cyan-400:#22c8e5;--cyan-300:#5fe0f2;--violet-500:#7c5cff;--violet-400:#9b82ff;
  --white:#ffffff;--mist:#eef5fc;--ink:#12233d;--ink-soft:#4a5d78;
  --radius:22px;--shadow:0 18px 45px rgba(16,42,86,.14);
  --display:'Sora','Segoe UI',system-ui,sans-serif;
  --text:'Manrope','Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--text);color:var(--ink);background:var(--mist);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display)}
a,button{-webkit-tap-highlight-color:transparent}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);background:rgba(7,20,44,.42);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;transition:padding .35s ease,background .35s ease,border-color .35s ease}
nav.scrolled{padding:11px clamp(20px,5vw,64px);background:rgba(6,16,36,.78);border-bottom:1px solid rgba(95,224,242,.14)}
.logo{display:flex;align-items:center;gap:11px;color:var(--white);font-weight:800;font-size:1.13rem;text-decoration:none;font-family:var(--display)}
.logo svg,.logo img{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(34,200,229,.35))}
.nav-links{display:flex;gap:clamp(14px,3vw,36px);list-style:none;align-items:center}
.nav-links a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.95rem;font-weight:600;transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{background:linear-gradient(135deg,var(--cyan-400),var(--violet-500));color:var(--white)!important;padding:10px 22px;border-radius:999px;font-weight:700;box-shadow:0 6px 18px rgba(34,200,229,.35);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(34,200,229,.55)}
.nav-cta:active{transform:scale(.96)}
.nav-cta .cta-sm{display:none}
@media(max-width:600px){.nav-cta .cta-lg{display:none}.nav-cta .cta-sm{display:inline}}

/* mobile: hamburger + slide-in drawer, same system as the homepage */
.menu-btn{display:none;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);cursor:pointer;z-index:60;flex-direction:column;align-items:center;justify-content:center;gap:5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.menu-btn span{display:block;width:20px;height:2.2px;border-radius:2px;background:var(--white);transition:transform .3s ease,opacity .3s ease}
nav.open .menu-btn span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
nav.open .menu-btn span:nth-child(2){opacity:0}
nav.open .menu-btn span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}
.drawer-only{display:none}
@media(max-width:720px){
  .menu-btn{display:flex;margin-left:auto}
  /* drop the nav's backdrop-filter while open, or it becomes a containing block
     that traps the fixed drawer inside the ~66px nav box (blank strip bug) */
  nav.open{z-index:60;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links{position:fixed;inset:0;z-index:55;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:86px 14px calc(18px + env(safe-area-inset-bottom));background:rgba(3,8,20,0);opacity:0;pointer-events:none;overflow-y:auto;transition:opacity .3s ease,background .3s ease}
  .nav-links::before{content:"";position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);background:linear-gradient(200deg,rgba(13,30,64,.97),rgba(5,12,28,.97));border-left:1px solid rgba(95,224,242,.16);box-shadow:-30px 0 70px rgba(2,6,16,.6);transform:translateX(105%);transition:transform .36s cubic-bezier(.2,.65,.2,1)}
  nav.open .nav-links{opacity:1;pointer-events:auto;background:rgba(3,8,20,.55)}
  nav.open .nav-links::before{transform:none}
  .nav-links li{position:relative;width:min(302px,calc(86vw - 28px));opacity:0;transform:translateX(26px);transition:opacity .3s ease,transform .3s ease}
  nav.open .nav-links li{opacity:1;transform:none}
  nav.open .nav-links li:nth-child(2){transition-delay:.04s}
  nav.open .nav-links li:nth-child(3){transition-delay:.08s}
  nav.open .nav-links li:nth-child(4){transition-delay:.12s}
  nav.open .nav-links li:nth-child(5){transition-delay:.16s}
  nav.open .nav-links li:nth-child(6){transition-delay:.2s}
  nav.open .nav-links li:nth-child(7){transition-delay:.24s}
  nav.open .nav-links li:nth-child(8){transition-delay:.28s}
  nav.open .nav-links li:nth-child(9){transition-delay:.32s}
  nav.open .nav-links li:nth-child(10){transition-delay:.36s}
  .nav-links a:not(.nav-cta){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 16px;border-radius:14px;font-size:1.05rem;font-weight:700;font-family:var(--display);color:var(--white)}
  .nav-links a:not(.nav-cta)::after{content:"›";font-size:1.5rem;line-height:1;color:var(--cyan-300);opacity:.9}
  .nav-links a:not(.nav-cta):active{background:rgba(255,255,255,.08)}
  .drawer-only{display:block}
  .drawer-label{padding:20px 16px 6px;font-size:.68rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.42);font-family:var(--display)}
  .drawer-only a:not(.nav-cta){min-height:46px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.8);font-family:var(--text)}
  .nav-links .nav-cta{display:flex;align-items:center;justify-content:center;min-height:56px;font-size:1.05rem;margin-top:18px;width:100%}
}

/* sticky mobile action bar, same as the homepage */
.mob-bar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;display:none;gap:8px;padding:9px;border-radius:22px;background:rgba(6,16,36,.78);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(95,224,242,.2);box-shadow:0 16px 44px rgba(3,10,26,.55),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(130%);transition:transform .38s cubic-bezier(.2,.65,.2,1)}
.mob-bar.show{transform:none}
.mob-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;border-radius:15px;font-weight:800;font-size:.9rem;text-decoration:none;white-space:nowrap}
.mob-bar a:active{transform:scale(.96)}
.mob-bar svg{width:18px;height:18px;flex-shrink:0}
.mob-call{color:var(--white);border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.mob-wa{background:#25d366;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.42)}
.mob-enq{background:linear-gradient(135deg,var(--cyan-400),var(--violet-500));color:var(--white);box-shadow:0 8px 22px rgba(34,200,229,.4)}
@media(max-width:720px){
  .mob-bar{display:flex}
  footer{padding-bottom:calc(34px + 86px + env(safe-area-inset-bottom))}
}

header{position:relative;overflow:hidden;padding:160px 24px 104px;text-align:center;color:var(--white);
  background:linear-gradient(168deg,#040b1e 0%,#071733 45%,#0d2a5c 100%)}
/* the homepage's aurora + grain, rebuilt as pseudo-elements so no page markup
   changes are needed */
header::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;filter:blur(60px);opacity:.8;
  background:
    radial-gradient(38% 42% at 22% 18%, rgba(18,190,225,.42), transparent 68%),
    radial-gradient(40% 44% at 82% 12%, rgba(124,92,255,.48), transparent 68%),
    radial-gradient(44% 38% at 55% 95%, rgba(37,113,214,.45), transparent 70%);
  animation:pageAurora 30s ease-in-out infinite alternate;
}
@keyframes pageAurora{to{transform:translate(3%,4%) scale(1.07)}}
header::after{
  content:"";position:absolute;inset:0;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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
header>*{position:relative;z-index:1}
header .crumb{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:7px 18px;border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
header .crumb a{color:rgba(255,255,255,.85);text-decoration:none}
header .crumb a:hover{color:var(--cyan-300)}
header h1{font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:800;letter-spacing:-1px;line-height:1.12;max-width:880px;margin:0 auto;text-wrap:balance}
header h1 .grad{background:linear-gradient(92deg,var(--cyan-300) 10%,#7fb6ff 45%,var(--violet-400) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pageGradPan 7s ease-in-out infinite alternate}
@keyframes pageGradPan{to{background-position:100% 0}}
header p{margin:20px auto 0;color:rgba(255,255,255,.85);font-weight:500;max-width:640px}
header .locality{margin-top:24px;font-size:.86rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-300);opacity:.9;font-family:var(--display)}
/* gentle entrance — pure CSS, so it runs (and finishes) with or without JS */
header .crumb,header h1,header p{opacity:0;transform:translateY(26px);animation:pageRise .8s cubic-bezier(.2,.65,.2,1) forwards}
header h1{animation-delay:.12s}
header p{animation-delay:.24s}
@keyframes pageRise{to{opacity:1;transform:none}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0}
.wave svg{width:100%;height:70px;display:block}

main{max-width:840px;margin:0 auto;padding:clamp(48px,7vw,80px) clamp(20px,6vw,40px) clamp(56px,7vw,90px)}
.card{
  position:relative;background:var(--white);border-radius:var(--radius);
  border:1px solid rgba(18,35,61,.06);
  box-shadow:0 24px 60px rgba(16,42,86,.12),0 2px 8px rgba(16,42,86,.05);
  padding:clamp(30px,5vw,56px);margin-bottom:28px;overflow:hidden;
}
/* the tiles' accent bar, echoed on every content card */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--cyan-400),var(--violet-500));
}
main h2{font-size:1.5rem;font-weight:800;letter-spacing:-.4px;margin:0 0 14px}
main h3{font-size:1.08rem;font-weight:700;margin:26px 0 8px}
main p{margin-bottom:14px;color:#3c5170}
main ul{margin:0 0 16px 0;list-style:none}
main ul li{position:relative;padding:5px 0 5px 26px;color:#3c5170}
main ul li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-400),var(--violet-500))}
main a{color:var(--sky-500);font-weight:600;text-decoration:none}
main a:hover{text-decoration:underline}

.steps{counter-reset:step;list-style:none;margin:0}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 54px;color:#3c5170}
.steps li::before{content:counter(step);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-400),var(--violet-500));color:#fff;font-weight:800;font-size:.95rem;
  font-family:var(--display);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(34,200,229,.35)}
/* connecting line between step numbers */
.steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:42px;bottom:2px;width:2px;
  background:linear-gradient(180deg,rgba(34,200,229,.35),rgba(124,92,255,.2))}
.steps li strong{color:var(--ink);display:block;margin-bottom:2px}

.faq-q{font-weight:800;color:var(--ink);margin:26px 0 6px;font-size:1.03rem;padding-left:14px;position:relative}
.faq-q::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3.5px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan-400),var(--violet-500))}

/* closing CTA — the homepage's dark glass card */
.cta{
  position:relative;text-align:center;color:var(--white);
  background:linear-gradient(170deg,#0a1e45 0%,#071733 60%,#050e24 100%);
  border:1px solid rgba(95,224,242,.2);
  box-shadow:0 30px 80px rgba(3,10,26,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.cta::before{background:linear-gradient(90deg,var(--cyan-400),var(--violet-500));opacity:.9}
.cta::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;filter:blur(50px);opacity:.5;
  background:
    radial-gradient(38% 42% at 25% 25%, rgba(18,190,225,.5), transparent 68%),
    radial-gradient(40% 44% at 78% 80%, rgba(124,92,255,.55), transparent 68%);
}
.cta>*{position:relative;z-index:1}
.cta h2{color:var(--white)}
.cta p{color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 26px}

.btn{position:relative;display:inline-block;padding:16px 36px;border-radius:999px;text-decoration:none;font-weight:700;overflow:hidden;
  background:linear-gradient(135deg,var(--cyan-400),var(--violet-500));color:var(--white);
  box-shadow:0 10px 30px rgba(34,200,229,.4),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s cubic-bezier(.2,.65,.3,1.4),box-shadow .25s}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .55s ease}
.btn:hover{transform:translateY(-3px) scale(1.02);text-decoration:none;box-shadow:0 18px 44px rgba(34,200,229,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn:hover::after{left:120%}
.btn:active{transform:scale(.97)}
.cta-call{margin:22px auto 0!important;font-size:.98rem}
.cta-call a{color:var(--cyan-300);font-weight:700}
.areas-inline{font-size:.95rem;color:var(--ink-soft)}

/* reveal on scroll for content cards — driven by nav.js, gated behind html.js
   so no-JS visitors and non-scrolling renderers see everything immediately */
.js main .card{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.2,1)}
.js main .card.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  header .crumb,header h1,header p{opacity:1;transform:none;animation:none}
  .js main .card{opacity:1;transform:none}
}

footer{background:var(--sky-900);color:rgba(255,255,255,.65);padding:34px clamp(20px,6vw,72px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.88rem}
footer .logo{font-size:1rem}
footer .logo svg,footer .logo img{height:26px;width:auto}
.footer-legal{display:flex;flex-direction:column;gap:4px;text-align:right}
.footer-legal a{color:rgba(255,255,255,.75);text-decoration:none;font-weight:600}
.footer-legal .footer-ms{color:rgba(255,255,255,.55)}
.footer-legal .abn{color:rgba(255,255,255,.5);letter-spacing:.4px}
@media(max-width:640px){.footer-legal{text-align:left}}