:root{
  --bg:#000;
  --card:#0d0d0f;
  --muted:#a0a0a7;
  --text:#f4f4f6;
  --accent: #ff751f;
  --accent-2:#1e57b7;
  --border:#1e1e22;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.6}
a{color:#fff;text-decoration:none}
a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;background:rgba(0,0,0,.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--border);z-index:50}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px}
.brand{display:flex;align-items:center;min-width:160px}
.logo{height:42px;width:auto;display:block}
.nav{margin-left:auto}
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px}
.nav-list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.nav-link{display:inline-block;padding:10px;border-radius:10px}
.nav-link:hover, .nav-link:focus{background:var(--card)}
.nav-link.no-click{cursor:default}
.nav-link.no-click:hover{background:transparent}
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:44px;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:260px;list-style:none;margin:0;padding:8px}
.dropdown:hover>.dropdown-menu,.dropdown:focus-within>.dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px;border-radius:8px}
.dropdown-menu a:hover{background:#151518}
.phone{margin-left:10px;white-space:nowrap;color:#fff;opacity:.9}
.phone a{font-weight:700}
.hero{padding:96px 16px 48px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255, 117, 31, 0.05), transparent 60%)}
.hero-inner{max-width:1100px;margin:0 auto}
.hero h1{font-size:clamp(28px, 3.5vw, 44px);line-height:1.15;margin:0 0 12px;font-weight:800}
.hero p{color:var(--muted);max-width:800px;margin:0 0 20px}
.btn{display:inline-block;padding:12px 18px;border:1px solid var(--border);border-radius:14px;background:#121218;color:#fff}
.btn.primary{background: var(--accent);border-color:var(--accent);font-weight:700;color:#000}
.btn + .btn{margin-left:10px}
.section{max-width:1100px;margin:0 auto;padding:56px 16px;border-bottom:1px solid var(--border)}
.section h1,.section h2{margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin-top:6px}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;max-width:640px}
.site-footer{padding:32px 16px}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.footer-inner h4{margin:0 0 10px}
.meta{list-style:none;margin:0;padding:0;color:var(--muted)}
.meta li{padding:4px 0}
.copyright{text-align:center;color:var(--muted);margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-wrapper{width:100%;max-width:440px;padding:24px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:4px 0 8px}
.login-card label{font-weight:600}
.login-card input{padding:12px;border-radius:12px;border:1px solid var(--border);background:#0b0b0d;color:#fff}
.muted{color:var(--muted);font-size:14px}
.login-brand{display:block;text-align:center;margin-bottom:12px}
/* Support grid */
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px}
.support-item.full-row{grid-column:1/-1}
@media (max-width: 720px){
  .support-grid{grid-template-columns:1fr}
}
/* Responsive nav */
@media (max-width: 900px){
  .menu-toggle{display:inline-block}
  .nav-list{display:none;position:absolute;right:16px;top:58px;flex-direction:column;align-items:stretch;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px;min-width:260px}
  .nav-list.open{display:flex}
  .dropdown{width:100%}
  .dropdown-menu{position:static;border:none;background:transparent;padding:0;margin:0;display:none}
  .dropdown.open .dropdown-menu{display:block}
  .phone{order:99;padding:6px 10px;background:#0f0f12;border-radius:10px}
}

/* Support layout tweaks for requested ordering */
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px}
.support-item.full-row{grid-column:1/-1}
.support-spacer{visibility:hidden;border:none;background:transparent}

@media (max-width: 720px){
  .support-grid{grid-template-columns:1fr}
  .support-spacer{display:none}
}

/* Fix nav positioning on login page */
.login-body header.site-header {
  position: relative;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.login-wrapper {
  margin-top: 100px; /* Add spacing below nav so card doesn't overlap */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Support card hover styling */
.support-item {
  text-decoration: none;           /* Remove underline by default */
  color: #fff;                     /* Keep white text */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.support-item:hover {
  background-color: #ff751f;       /* Orange background on hover */
  color: #000;                     /* Black text on hover */
  text-decoration: none;           /* No underline when hovered */
  transform: translateY(-3px);     /* Slight lift effect (optional) */
}

/* Keep text color consistent for headings & paragraphs inside cards */
.support-item:hover h2,
.support-item:hover p {
  color: #000;
  text-decoration: none;
}

/* Contact form styles (updated for alignment and consistent design) */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form label {
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.2;
}
.contact-form input[type=text],
.contact-form input[type=tel],
.contact-form input[type=email],
.contact-form textarea {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #121218;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 117, 31, 0.2);
  outline: none;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.hp {
  position: absolute;
  left: -5000px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
@media (max-width: 720px) {
  .form-row.two { grid-template-columns: 1fr; }
}

/* Required fields note */
.req-note{color:#ff4d4f !important;font-size:13px;font-weight:600;display:inline-block;text-align:left}

.card h2{margin-bottom:0}

.card h2 + .req-note{display:block;margin-top:4px;margin-bottom:10px}

/* Page section headings */
.section h1,
main.section h1,
.section-title,
.page-header h1{
  color: var(--accent);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

nav ul ul li a { background: #000; border: 1px solid var(--border); }

/* --- NAV STYLE RESET (V1n) --- */
/* Base: white text, black bg, NO border */
.nav .nav-list > li:not(.phone) > a,
.nav .nav-list > li.dropdown > .nav-link,
.nav ul ul li > a {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Hover: orange fill, black text, BLUE glow */
.nav .nav-list > li:not(.phone) > a:hover,
.nav .nav-list > li.dropdown:hover > .nav-link,
.nav ul ul li > a:hover {
  background-color: var(--accent) !important; /* #ff751f */
  color: #000 !important;
  box-shadow: 0 0 10px rgba(0, 74, 173, 0.65) !important; /* #004aad glow */
}

/* Ensure phone item does NOT get hover styling */
.nav .nav-list > li.phone a,
.nav .nav-list > li.phone a:hover {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
}

/* Keep logo and menu aligned on a single row without overlap */
.site-header .nav-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.site-header .brand{flex:0 0 auto;margin-right:12px}
.site-header .nav{margin-left:auto;flex:0 1 auto}

/* Normalize link alignment (span vs <a>) so "Services" sits level */
.nav .nav-list > li > a,
.nav .nav-list > li > .nav-link{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  line-height:1;
}

/* Ensure all top-level items share the same vertical rhythm */
.nav .nav-list{display:flex;align-items:center}

/* Refine dropdown geometry to avoid flicker while keeping visuals */
.dropdown{position:relative; padding-bottom:0} /* remove extra vertical bump */
.dropdown-menu{
  top: calc(100% + 6px); /* drop just below the parent item */
  left: 0;
}

/* --- V1s: Text-wrapped images in service pages --- */
.float-img{max-width:280px;margin:0 16px 12px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0e0e12}
.float-img img{display:block;width:100%;height:auto}
.float-img figcaption{font-size:12px;color:var(--muted);padding:6px 8px}
.float-img.left{float:left}
.float-img.right{float:right;margin:0 0 12px 16px}
@media (max-width: 860px){
  .float-img.left,.float-img.right{float:none;margin:0 0 12px 0;max-width:100%}
}

.float-img,
.card img,
.grid.brands img {
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* 1) Align logo + nav row */
.site-header .nav-inner{display:flex;align-items:center;justify-content:space-between}

/* 2) Baseline normalization for all top-level items (exclude phone) */
.nav .nav-list{display:flex;align-items:center}
.nav .nav-list>li{display:flex;align-items:center;position:relative}
.nav .nav-list>li.phone{display:block} /* leave phone untouched */

/* Treat anchors and the non-clickable span the same box model */
.nav .nav-list>li>a,
.nav .nav-list>li>.nav-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  line-height:1;
  padding:0 14px;
  margin:0;
  vertical-align:middle;
  font: inherit;
  text-decoration:none;
  background:transparent;
}

/* Services should look the same but not click */
.nav .nav-list>li.dropdown>.nav-link.no-click{
  pointer-events:none;
  cursor:default;
}

/* 3) Dropdown stability & gapless hover */
nav ul ul{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:#000;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
  z-index:1000;
  min-width:200px;
}
nav ul li.dropdown:hover>ul,
nav ul li.dropdown:focus-within>ul{
  display:block;
  opacity:1;
  visibility:visible;
}
/* Hover bridge to remove dead gap between parent and submenu */
.nav .nav-list>li.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:10px;
}

/* 4) Ensure hover visuals remain (orange fill + blue glow) */
.nav .nav-list>li:not(.phone)>a:hover,
.nav .nav-list>li.dropdown:hover>.nav-link,
nav ul ul li>a:hover{
  background-color:var(--accent) !important;
  color:#000 !important;
  box-shadow:0 0 10px rgba(0,74,173,.65);
}

/* 5) Phone item stays plain */
.nav .nav-list>li.phone a{
  height:auto;
  line-height:1.2;
  padding:0;
  background:transparent !important;
  box-shadow:none !important;
}

.nav .nav-list > li > .nav-link.no-click{display:inline-flex;align-items:center;justify-content:center}

/* Layout */
.site-header .nav-inner{display:flex;align-items:center;gap:16px}
.site-header .brand{flex:0 0 auto}
.nav{flex:1 1 auto}
.nav .nav-list{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.nav .nav-list>li{display:flex;align-items:center;position:relative}

/* Items: anchors and Services trigger identical boxes */
.nav .nav-list>li>a,
.nav .nav-list>li>.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  margin:0;
  height:auto;
  line-height:1.2;
  text-decoration:none;
  color:#fff;
  background:transparent;
  border:none;
  border-radius:6px;
  transition:background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Make Services non-click but keep same box */
.nav .nav-list>li.dropdown>.nav-link.no-click{pointer-events:none;cursor:default}

/* Hover visual (top/child) */
.nav .nav-list>li:not(.phone)>a:hover,
.nav .nav-list>li.dropdown:hover>.nav-link,
.nav ul ul li>a:hover{
  background-color:var(--accent);
  color:#000;
  box-shadow:0 0 10px rgba(0,74,173,.65); /* blue glow */
}

/* Phone item excluded from styling */
.nav .nav-list>li.phone a{padding:0;margin:0;background:transparent;box-shadow:none;color:#fff}

/* Dropdown menu */
nav ul ul{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:#000;
  min-width:220px;
  padding:6px;
  border-radius:10px;
  z-index:1000;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
nav ul li.dropdown:hover>ul{display:block}

/* Dropdown items */
nav ul ul li{display:block}
nav ul ul li>a{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:#fff;
}

/* Remove underlines globally in nav */
nav a, .nav .nav-list>li>a{ text-decoration:none }

/* ========================================================== */

/* Default: transparent 1px border to reserve space */
.nav .nav-list>li:not(.phone)>a,
.nav .nav-list>li.dropdown>.nav-link {
  box-sizing: border-box;
  border: 1px solid transparent;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
}

/* Hover: orange fill, blue border, no size change */
.nav .nav-list>li:not(.phone)>a:hover,
.nav .nav-list>li.dropdown:hover>.nav-link,
nav ul ul li>a:hover {
  background-color: var(--accent);
  color: #000;
  border-color: #004aad;
  box-shadow: 0 0 10px rgba(0, 74, 173, 0.65);
}

/* Dropdown items also get a reserved border to avoid jump */
nav ul ul li>a {
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 8px 10px;
  line-height: 1.2;
}

/* Keep phone item untouched */
.nav .nav-list>li.phone a {
  border: none;
  height: auto;
  line-height: normal;
  padding: 0;
}
/* ================================================================ */

/* Default dropdown items */
nav ul ul li > a {
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  color: #fff;
}

/* On hover: keep underline off and show orange fill + blue border */
nav ul ul li > a:hover {
  text-decoration: none !important;
  background-color: var(--accent);
  color: #000;
  border-color: #004aad;
  box-shadow: 0 0 10px rgba(0, 74, 173, 0.65);
}

/* ====================================================================== */

@media (min-width: 981px){
  .nav{display:block !important}
  .nav .nav-list{display:flex !important; flex-direction:row !important; align-items:center !important}
  .nav .nav-list>li{display:flex !important}
  nav ul ul{position:absolute !important; display:none}
  nav ul li.dropdown:hover>ul{display:block}
}

/* Desktop defaults */
.nav-toggle{ display:none; }
.nav{ display:block; }
.nav .nav-list{ display:flex; flex-direction:row; align-items:center; gap:6px; }
.nav .nav-list>li{ display:flex; align-items:center; position:relative; }

/* Dropdown desktop behaviour */
nav ul ul{ position:absolute; display:none; top:calc(100% + 6px); left:0; }
nav ul li.dropdown:hover>ul{ display:block; }

/* Mobile overrides only when <=980px */

  .nav{ display:none; width:100%; }
  .nav.open{ display:block; }
  .nav .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav .nav-list>li{ display:block; }
  nav ul ul{ position:static; display:none; top:auto; left:auto; }
  nav ul li.dropdown.open > ul{ display:block; }
}
/* ===================================================================== */

/* ====================================================================== */

/* ====================================================================== */

/* ======================================================================= */

/* Global page container on desktop */
@media (min-width: 981px){
  .site-header .nav-inner,
  .section { max-width: 1100px; margin: 0 auto; }
  .section { padding: 24px 16px; }
  /* Ensure header content aligns nicely */
  .site-header .nav-inner{ padding-left:16px; padding-right:16px; }
  .brand{ display:inline-flex; align-items:center; }
  .brand img{ height:42px; width:auto; }
  /* Desktop grid defaults */
  .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  /* If a page uses single main card, keep centered width rather than full-bleed */
  .grid:only-child, .grid.single, main .grid{ justify-items: stretch; }
  /* Desktop nav: force row layout */
  .nav{ display:block !important; }
  .nav .nav-list{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; }
  .nav .nav-list>li{ display:flex !important; align-items:center !important; }
  nav ul ul{ position:absolute !important; display:none !important; top:calc(100% + 6px) !important; left:0 !important; }
  nav ul li.dropdown:hover>ul{ display:block !important; }
}

/* Mobile: keep as before (stacked) */

  .grid{ display:grid; grid-template-columns:1fr; gap:16px; }
}
/* ===================================================================== */

/* Move header border to container so it doesn't span full browser width */
@media (min-width: 981px){
  .site-header{ border-bottom: none !important; }
  .site-header .nav-inner{ border-bottom: 1px solid var(--border); }
  /* Constrain generic dividers/bars to the page container width */
  hr, .rule, .divider, .section-divider, .bar { 
    max-width: 1100px; 
    margin: 0 auto; 
    border-color: var(--border);
  }
  /* Ensure all page sections use the centered container */
  main.section, .section { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding-left: 16px; 
    padding-right: 16px; 
  }
  /* Ensure grids default to two columns on desktop unless overridden */
  .grid{ grid-template-columns: 1fr 1fr !important; }
}
/* Keep mobile layout unchanged */

/* ===================================================================== */

/* ====================================================================== */

:root { --container-max: 1100px; } /* matches Products/Support/Contact */

.site-header .nav-inner,
.section {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Header border must be container-width, not full-bleed */
.site-header { border-bottom: none; }
.site-header .nav-inner { border-bottom: 1px solid var(--border); }

/* Constrain generic dividers/bars to container width */
hr, .rule, .divider, .section-divider, .bar {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  border-color: var(--border);
}
/* ======================================================================= */

:root { --container-max: 1100px; }
.site-header .nav-inner, .section {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* Header border must be container width */
.site-header { border-bottom: none; }
.site-header .nav-inner { border-bottom: 1px solid var(--border); }
/* Dividers constrained to container */
hr, .rule, .divider, .section-divider, .bar {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  border-color: var(--border);
}
/* Desktop nav enforced */
.nav-toggle{ display:none !important; }
.nav{ display:block !important; }
.nav .nav-list{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; }
.nav .nav-list>li{ display:flex !important; align-items:center !important; position:relative !important; }
nav ul ul{ position:absolute !important; display:none !important; top:calc(100% + 6px) !important; left:0 !important; }
nav ul li.dropdown:hover>ul{ display:block !important; }



/* Test & Tag Quarter Colour Bar (AS3760:2022) */

#tag-colour-bar .tagbar-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 16px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .2px;
}



/* Standalone Tag Bar (container width, separate from <main>) */
.tagbar-standalone{ max-width: var(--container-max); margin: 0 auto 8px auto; padding: 0 16px; }
.tagbar-box{ border-radius: 4px; }
.tagbar-box .tagbar-inner{ padding: 8px 0; font-weight: 600; text-align: center; letter-spacing: .2px; }



/* Prevent layout shift when some pages have a vertical scrollbar and others don't */
:root { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable both-edges) {
  html { overflow-y: scroll; } /* fallback for older browsers */
}