@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');
:root{
  --q-green:#6dbb3f;
  --q-orange:#f28c28;
  --q-ink:#0f172a;
  --q-slate:#334155;
  --q-muted:#64748b;
  --q-bg:#f8fafc;
  --q-card:#ffffff;
  --q-border:#e2e8f0;
  --shadow: 0 10px 30px rgba(2,6,23,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--q-ink);
  background:var(--q-bg);
  line-height:1.55;
}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.small{font-size:.92rem;color:var(--q-muted)}
.kicker{letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-size:.78rem;color:var(--q-green)}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem 0}
h1{font-size:clamp(2rem, 4vw, 3.15rem)}
h2{font-size:clamp(1.5rem, 2.6vw, 2.15rem)}
h3{font-size:1.15rem}
p{margin:.6rem 0}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:12px 16px;border-radius:14px;
  background:linear-gradient(90deg,var(--q-green),var(--q-orange));
  color:#fff;text-decoration:none;font-weight:800;
  border:0; box-shadow: 0 10px 25px rgba(242,140,40,.18);
}
.btn.secondary{
  background:#fff;color:var(--q-ink);
  border:1px solid var(--q-border);
  box-shadow:none;
}
.btn:focus{outline:3px solid rgba(109,187,63,.35);outline-offset:2px}

.topbar{
  background:#fff;border-bottom:1px solid var(--q-border);
}
.topbar .row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;gap:16px;
}
.topbar .contact{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  color:var(--q-slate);font-weight:650;font-size:.92rem
}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:8px 10px;border:1px solid var(--q-border);
  border-radius:999px;background:#fff;color:var(--q-slate);
  font-weight:700;font-size:.85rem;
}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--q-border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:44px;width:auto}
.navlinks{
  display:flex;align-items:center;gap:18px;
}
.navlinks a{
  text-decoration:none;color:var(--q-slate);
  font-weight:800;font-size:.95rem;
  padding:10px 10px;border-radius:12px;
}
.navlinks a:hover{background:rgba(109,187,63,.08);color:var(--q-ink)}
.navcta{display:flex;gap:10px;align-items:center}
.menuBtn{
  display:none;background:#fff;border:1px solid var(--q-border);
  border-radius:12px;padding:10px 12px;font-weight:900;
}
@media (max-width: 940px){
  .menuBtn{display:inline-flex}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--q-border);
    padding:12px 18px;flex-direction:column;align-items:flex-start
  }
  .navlinks.open{display:flex}
  .navcta .btn.secondary{display:none}
}

.hero{
  position:relative;min-height:560px;display:grid;align-items:stretch;
  border-bottom:1px solid var(--q-border);
  background:#0b1220;
  overflow:hidden;
}
.hero .slides{position:absolute;inset:0;z-index:0}
.hero .slide{
  position:absolute;inset:0;opacity:0;transition:opacity 900ms ease;
  background-size:cover;background-position:center;transform:scale(1.02);
}
.hero .slide.active{opacity:1}
.hero .overlay{
  position:absolute;inset:0;
  background: radial-gradient(1200px 600px at 20% 30%, rgba(109,187,63,.32), transparent 60%),
              linear-gradient(90deg, rgba(2,6,23,.72), rgba(2,6,23,.35));
  z-index:1;
}
.hero .content{position:relative;z-index:2;padding:64px 0}
.hero .grid{
  display:grid;grid-template-columns: 1.15fr .85fr;
  gap:28px;align-items:center;
}
@media (max-width: 940px){
  .hero{min-height:auto}
  .hero .grid{grid-template-columns:1fr}
  .hero .content{padding:42px 0}
}
.hero h1{color:#fff;margin-bottom:10px}
.hero p{color:rgba(255,255,255,.86);max-width:58ch;font-size:1.05rem}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero .panel{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(226,232,240,.18);
  border-radius:18px;padding:18px 18px 16px;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
}
.hero .panel h3{color:#fff;margin:0 0 8px}
.hero .panel p{color:rgba(255,255,255,.8);font-size:.95rem}
.hero .panel ul{margin:10px 0 0 18px;color:rgba(255,255,255,.85)}
.hero .panel li{margin:6px 0}

/* Inner pages hero */
.hero.inner{min-height:360px}
.hero.inner .grid{grid-template-columns:1fr}
.hero.inner .content{padding:54px 0}
@media (max-width: 940px){
  .hero.inner .content{padding:38px 0}
}

.section{padding:58px 0}
.section.alt{background:#fff}
.section .head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media (max-width: 940px){ .cards{grid-template-columns:1fr} }

.card{
  background:var(--q-card);
  border:1px solid var(--q-border);
  border-radius:20px;
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
  overflow:hidden;
}
.card .media{height:150px;background-size:cover;background-position:center}
.card .body{padding:16px 16px 18px}
.card .body p{color:var(--q-muted);margin:.45rem 0 0}
.card .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{
  border:1px solid var(--q-border);background:#fff;border-radius:999px;
  padding:6px 10px;font-weight:750;font-size:.82rem;color:var(--q-slate)
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
@media (max-width: 940px){ .split{grid-template-columns:1fr} }

.panel{
  background:#fff;border:1px solid var(--q-border);border-radius:22px;
  padding:18px;box-shadow: var(--shadow);
}
.iconRow{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.iconRow img{width:42px;height:42px}
.iconRow h3{margin:0}
.iconRow p{margin:.25rem 0 0;color:var(--q-muted)}
.list{margin:10px 0 0 18px;color:var(--q-slate)}
.list li{margin:6px 0}

.cta{
  background:linear-gradient(90deg, rgba(109,187,63,.18), rgba(242,140,40,.18));
  border:1px solid var(--q-border);
  border-radius:26px;padding:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}
.cta strong{font-size:1.2rem}

.footer{background:#0b1220;color:#cbd5e1;margin-top:30px}
.footer a{color:#e2e8f0}
.footer .cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:20px;padding:34px 0}
@media (max-width: 940px){ .footer .cols{grid-template-columns:1fr} }
.footer h3{color:#fff}
.footer .fine{border-top:1px solid rgba(226,232,240,.12);padding:14px 0;color:#94a3b8;font-size:.9rem}

.form{display:grid;gap:10px}
.input{
  width:100%;padding:12px 12px;border-radius:14px;
  border:1px solid var(--q-border);background:#fff;font-size:1rem
}
textarea.input{min-height:110px;resize:vertical}
.notice{
  padding:12px 14px;border-radius:16px;border:1px solid var(--q-border);
  background:#fff;color:var(--q-slate)
}


/* Dropdown navigation (modern + user friendly) */
.dropdown{position:relative}

.navlinks .dropbtn{
  appearance:none;
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  color:var(--q-slate);
  font-weight:800;
  font-size:.95rem;
  padding:10px 10px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.navlinks .dropbtn:hover{background:rgba(109,187,63,.08);color:var(--q-ink)}
.navlinks .dropbtn:focus-visible{outline:3px solid rgba(109,187,63,.35);outline-offset:2px}
.navlinks .dropbtn .chev{display:inline-block;transition:transform .18s ease}
.dropdown.is-open .dropbtn .chev{transform:rotate(180deg)}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:280px;
  margin-top:6px;
  background:#fff;
  border:1px solid var(--q-border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,.12);
  padding:10px;
  z-index:60;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Hover "bridge" so the menu doesn't disappear when moving the mouse down */
.dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-10px;
  height:10px;
}

.dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  color:var(--q-slate);
  text-decoration:none;
}
.dropdown-menu a:hover{background:rgba(109,187,63,.10);color:var(--q-ink)}

.dropdown-menu .submenu-icon{
  opacity:.65;
  font-size:.95em;
  flex:0 0 1.1em;
}
.dropdown-menu a:hover .submenu-icon{opacity:.9}
.dropdown-menu .submenu-text{flex:1}

.dropdown-menu .submenu-head{
  background:rgba(15,23,42,.04);
  color:var(--q-ink);
  font-weight:900;
}
.dropdown-menu .submenu-sep{
  height:1px;
  background:var(--q-border);
  margin:8px 6px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.is-open .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* Mobile: click-to-toggle accordion */
@media (max-width: 940px){
  .dropdown{width:100%}
  .navlinks .dropbtn{width:100%;justify-content:space-between}

  .dropdown-menu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:8px;
    transform:none;
    box-shadow:none;
  }
  .dropdown-menu::before{display:none}

  /* Collapse by default on mobile */
  .dropdown-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    display:block;
  }
  .dropdown.is-open .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

/* =========================================================
   Video-reference box style: small image cards + soft effects
   ========================================================= */
.cards{
  gap:22px;
  align-items:stretch;
}
.cards .card.visual-card{
  position:relative;
  isolation:isolate;
  min-height:250px;
  border-radius:26px;
  border:1px solid rgba(226,232,240,.95);
  background:
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 18%), rgba(109,187,63,.18), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 18px 45px rgba(2,6,23,.075);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.cards .card.visual-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.75) 42%, rgba(255,255,255,.1) 53%, transparent 68%),
    radial-gradient(170px 130px at 100% 0%, rgba(242,140,40,.16), transparent 68%);
  transform:translateX(-115%);
  opacity:.86;
  transition:transform .7s ease;
}
.cards .card.visual-card::after{
  content:"";
  position:absolute;
  right:-72px;
  bottom:-92px;
  width:185px;
  height:185px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(109,187,63,.20), rgba(242,140,40,.18));
  filter:blur(1px);
  opacity:.84;
  transition:transform .28s ease, opacity .28s ease;
  z-index:-1;
}
.cards .card.visual-card:hover,
.cards .card.visual-card.is-card-active{
  transform:translateY(-8px);
  border-color:rgba(109,187,63,.46);
  box-shadow:0 28px 70px rgba(2,6,23,.14), 0 0 0 1px rgba(109,187,63,.08) inset;
}
.cards .card.visual-card:hover::before,
.cards .card.visual-card.is-card-active::before{
  transform:translateX(115%);
}
.cards .card.visual-card:hover::after,
.cards .card.visual-card.is-card-active::after{
  transform:scale(1.08) translate(-8px,-8px);
  opacity:1;
}
.cards .card.visual-card .body{
  position:relative;
  z-index:2;
  padding:104px 22px 24px;
}
.cards .card.visual-card h3{
  font-size:1.22rem;
  letter-spacing:-.01em;
}
.cards .card.visual-card .body p{
  color:#475569;
}
.cards .card.visual-card .visual,
.cards .card.visual-card.has-media .media{
  position:absolute;
  top:22px;
  left:22px;
  width:64px;
  height:64px;
  border-radius:20px;
  overflow:hidden;
  z-index:3;
  background:#fff;
  border:1px solid rgba(226,232,240,.96);
  box-shadow:0 14px 30px rgba(2,6,23,.13);
  transition:transform .28s ease, box-shadow .28s ease;
}
.cards .card.visual-card .visual{
  display:grid;
  place-items:center;
}
.cards .card.visual-card .visual img{
  width:64px;
  height:64px;
  display:block;
}
.cards .card.visual-card.has-media .media{
  background-size:cover;
  background-position:center;
}
.cards .card.visual-card.has-media .media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(15,23,42,.08), rgba(109,187,63,.18));
}
.cards .card.visual-card:hover .visual,
.cards .card.visual-card:hover .media{
  transform:translateY(-2px) rotate(-1deg) scale(1.04);
  box-shadow:0 18px 38px rgba(2,6,23,.18);
}
.cards .card.visual-card .meta{
  gap:8px;
}
.cards .card.visual-card .pill{
  background:rgba(255,255,255,.72);
  border-color:rgba(203,213,225,.8);
  backdrop-filter:blur(8px);
}
.cards .card.visual-card .btn.secondary{
  border-color:rgba(109,187,63,.38);
  color:#0f172a;
  background:linear-gradient(180deg, #fff, #f8fafc);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cards .card.visual-card .btn.secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(242,140,40,.54);
  box-shadow:0 16px 34px rgba(2,6,23,.11);
}

/* Content panels used on service pages and support pages */
.section .panel.feature-panel{
  position:relative;
  isolation:isolate;
  border-radius:30px;
  padding:30px;
  border:1px solid rgba(226,232,240,.96);
  background:
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 18%), rgba(109,187,63,.16), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.95));
  box-shadow:0 24px 68px rgba(2,6,23,.10);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.section .panel.feature-panel::before{
  content:"";
  position:absolute;
  right:-96px;
  top:-96px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(109,187,63,.22), rgba(242,140,40,.16));
  z-index:-1;
}
.section .panel.feature-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.68), transparent);
  transform:translateX(-115%);
  transition:transform .7s ease;
  z-index:-1;
}
.section .panel.feature-panel:hover,
.section .panel.feature-panel.is-card-active{
  transform:translateY(-6px);
  border-color:rgba(109,187,63,.45);
  box-shadow:0 30px 80px rgba(2,6,23,.14);
}
.section .panel.feature-panel:hover::after,
.section .panel.feature-panel.is-card-active::after{
  transform:translateX(115%);
}
.panel-visual{
  width:72px;
  height:72px;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(226,232,240,.96);
  box-shadow:0 16px 34px rgba(2,6,23,.13);
  margin-bottom:18px;
}
.panel-visual img{
  display:block;
  width:72px;
  height:72px;
}
.section .panel.feature-panel h2,
.section .panel.feature-panel h3{
  letter-spacing:-.02em;
}
.section .panel.feature-panel .list li{
  padding-left:4px;
}
.section .panel.feature-panel .cta{
  background:linear-gradient(90deg, rgba(109,187,63,.14), rgba(242,140,40,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.split > .card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 24px 68px rgba(2,6,23,.10);
}
.split > .card .media{
  transition:transform .5s ease, filter .5s ease;
}
.split > .card:hover .media{
  transform:scale(1.045);
  filter:saturate(1.05) contrast(1.03);
}

/* Dropdown service menu: compact visual menu items across every page */
.dropdown-menu{
  min-width:330px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(2,6,23,.16);
}
.dropdown-menu a{
  gap:12px;
  padding:10px 12px;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dropdown-menu a:hover{
  transform:translateX(3px);
  border-color:rgba(226,232,240,.95);
  background:linear-gradient(90deg, rgba(109,187,63,.10), rgba(242,140,40,.08));
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.dropdown-menu .submenu-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:12px;
  opacity:1;
  display:inline-block;
  background-color:#fff;
  background-size:34px 34px;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 8px 18px rgba(2,6,23,.10);
  border:1px solid rgba(226,232,240,.9);
}
.dropdown-menu .submenu-icon::before{content:""}
.dropdown-menu a[href="services.html"] .submenu-icon{background-image:url('card-all.svg')}
.dropdown-menu a[href="fibre.html"] .submenu-icon{background-image:url('card-fibre.svg')}
.dropdown-menu a[href="dark-fibre.html"] .submenu-icon{background-image:url('card-dark-fibre.svg')}
.dropdown-menu a[href="sip-trunk.html"] .submenu-icon{background-image:url('card-sip.svg')}
.dropdown-menu a[href="microsoft-sip.html"] .submenu-icon{background-image:url('card-teams.svg')}
.dropdown-menu a[href="hosted-voice.html"] .submenu-icon{background-image:url('card-voice.svg')}
.dropdown-menu a[href="vpn.html"] .submenu-icon{background-image:url('card-vpn.svg')}
.dropdown-menu a[href="voice.html"] .submenu-icon{background-image:url('card-voice.svg')}
.dropdown-menu a[href="pabx.html"] .submenu-icon{background-image:url('card-pabx.svg')}

@media (max-width: 940px){
  .cards .card.visual-card .body{padding:96px 18px 22px}
  .cards .card.visual-card .visual,
  .cards .card.visual-card.has-media .media{top:18px;left:18px;width:58px;height:58px;border-radius:18px}
  .cards .card.visual-card .visual img{width:58px;height:58px}
  .section .panel.feature-panel{padding:24px;border-radius:24px}
  .panel-visual{width:62px;height:62px;border-radius:19px}
  .panel-visual img{width:62px;height:62px}
  .dropdown-menu{min-width:0;border-radius:18px}
}

@media (prefers-reduced-motion: reduce){
  .cards .card.visual-card,
  .cards .card.visual-card::before,
  .cards .card.visual-card::after,
  .cards .card.visual-card .visual,
  .cards .card.visual-card .media,
  .section .panel.feature-panel,
  .section .panel.feature-panel::after,
  .split > .card .media,
  .dropdown-menu a{
    transition:none !important;
    transform:none !important;
  }
}