:root{
  --bg:#111217;--panel:#1b1d23;--panel2:#24262e;--line:#383b45;
  --red:#d91f3d;--red2:#a40e28;--text:#f5f6f8;--muted:#b9bdc7;
  --white:#ffffff;--shadow:0 18px 50px rgba(0,0,0,.22);--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(70rem 24rem at 92% -4%,rgba(215,0,34,.22),transparent 58%),
    radial-gradient(60rem 18rem at 18% 108%,rgba(145,0,24,.18),transparent 60%),
    linear-gradient(180deg,#111217 0%,#090a0d 100%);
  color:#20232a;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
body:before{
  content:"";
  position:fixed;
  z-index:0;
  left:-8vw;
  right:-8vw;
  bottom:-130px;
  height:330px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 72% 35%,rgba(235,0,40,.24),transparent 42%),
    linear-gradient(170deg,transparent 38%,rgba(140,0,22,.25) 39%,rgba(230,0,38,.15) 49%,transparent 50%);
  transform:rotate(-2deg);
}
.hero,.page-shell,.site-footer{position:relative;z-index:1}
a{color:#b3132d;text-decoration:none}a:hover{text-decoration:underline}
.site-header{
  position:sticky;top:0;z-index:50;
  background:#000;
  backdrop-filter:blur(10px);
  border-bottom:1px solid #5a202b;
  box-shadow:0 10px 32px rgba(0,0,0,.28),0 1px 0 rgba(220,31,61,.12)
}
.header-inner{max-width:1180px;margin:0 auto;min-height:78px;padding:0 22px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;margin-right:auto}.brand img{width:178px;height:auto;display:block}
.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{color:#d9dce2;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none}
.main-nav a:hover{
  background:linear-gradient(180deg,#3a2026,#221a1e);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(218,31,61,.18)
}
.main-nav a.active{
  background:linear-gradient(180deg,#7d1728,#44101a);
  color:#fff;
  border:1px solid #b7253b;
  box-shadow:0 4px 16px rgba(177,15,45,.22),inset 0 0 0 1px rgba(255,255,255,.04)
}
.client-login{
  margin-left:8px!important;
  background:linear-gradient(180deg,#f02d4e,#b80d2c)!important;
  color:#fff!important;
  border:1px solid #ff4967!important;
  box-shadow:0 7px 22px rgba(205,13,47,.30),0 0 20px rgba(217,31,61,.16)
}
.client-login:hover{
  background:linear-gradient(180deg,#ff3b59,#cb1234)!important;
  filter:none!important
}
.hero{
  background:
    radial-gradient(circle at 84% 18%,rgba(239,37,60,.34),transparent 29%),
    radial-gradient(circle at 15% 110%,rgba(151,0,24,.24),transparent 36%),
    linear-gradient(135deg,#111216 0%,#21181c 58%,#101115 100%);
  color:#fff;
  border-bottom:1px solid #63212d;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.02)
}
.hero-inner{max-width:1180px;margin:0 auto;padding:70px 22px 64px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ff8da0;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;margin-bottom:12px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--red)}
.hero h1{margin:0;max-width:780px;font-size:clamp(34px,5vw,62px);line-height:1.03;letter-spacing:-.035em}
.hero p{max-width:760px;margin:18px 0 0;color:#c8cbd2;font-size:18px}
.page-shell{
  max-width:1180px;
  margin:0 auto;
  padding:38px 22px 64px;
  background:transparent
}
.con_bg{width:auto!important;background:none!important;position:static!important}
.sec{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,249,251,.99));
  border:1px solid #d8dbe1;
  border-top-color:#e9a7b3;
  border-radius:var(--radius);
  box-shadow:0 16px 38px rgba(0,0,0,.24),0 0 0 1px rgba(185,24,50,.04);
  padding:0;
  margin:0 0 24px;
  overflow:hidden
}
.section-title{
  position:static!important;width:auto!important;height:auto!important;
  background:
    radial-gradient(circle at 88% 120%,rgba(218,31,61,.20),transparent 34%),
    linear-gradient(180deg,#4a1b24,#24171b)!important;
  color:#fff!important;
  text-shadow:0 1px 0 #000!important;
  font:800 20px/1.2 Inter,Segoe UI,Arial,sans-serif!important;
  text-transform:none!important;
  padding:17px 22px!important;
  letter-spacing:-.01em;
  border-left:4px solid #ef253c;
  border-bottom:1px solid #6f2330;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.gray,.gray1,.gray2{width:auto!important;margin:0!important;padding:0!important}
.gray_bg{width:auto!important;background:none!important;padding:24px!important}
.gray>.gray_bg,.gray1 .gray_bg,.gray2 .gray_bg{padding:24px!important}
.gray{padding:24px!important}
.gray .gray{padding:0!important}
.gray h3{font-size:18px;line-height:1.65;margin:0;font-weight:600;color:#323640}
.red_txt{color:#cf1635;font-weight:800;text-shadow:0 0 12px rgba(207,22,53,.06)}
.gray_left{float:none!important;width:auto!important;min-width:0}
.gray_rt{float:none!important;width:auto!important;display:flex;justify-content:center;align-items:flex-start}
.gray_bg:has(.gray_left){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:28px;align-items:start}
.gray ul{list-style:none;margin:0;padding:0!important;font-size:15px!important}
.gray li{background:none!important;padding:10px 0 10px 28px!important;margin:0!important;border-bottom:1px solid #eceef1!important;position:relative;color:#30343c!important}
.gray li:last-child{border-bottom:none!important}
.gray li:before{content:"✓";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#fbe8ec;color:#b30f2a;font-size:11px;font-weight:900}
.responsive-media{max-width:100%;height:auto!important;border-radius:12px}
.content-split{width:100%!important;border-collapse:separate;border-spacing:0}
.content-split td{vertical-align:top;padding:0 10px}.content-split td:first-child{padding-left:0}.content-split td:last-child{padding-right:0}
.feature-chip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.feature-chip{
  display:flex;min-height:48px;align-items:center;padding:12px 14px;
  border:1px solid #d9dce2;border-radius:11px;
  background:linear-gradient(180deg,#ffffff,#f4f5f7);
  color:#292d35!important;font-weight:700;font-size:14px;text-decoration:none!important;
  box-shadow:0 4px 10px rgba(24,27,33,.045)
}
.feature-chip:before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#ef253c;margin-right:10px;
  box-shadow:0 0 0 4px #f8dce2,0 0 12px rgba(239,37,60,.32)
}
.feature-chip:hover{
  border-color:#c84e63;
  background:#fff;
  box-shadow:0 7px 18px rgba(115,12,31,.10)
}
.modern-form .get_bg{background:#24262d!important;border:1px solid #393c46;border-radius:14px;padding:18px!important;width:min(100%,500px)!important}
.modern-form .txt_row{display:grid!important;grid-template-columns:115px 1fr;gap:12px;align-items:start;margin:0 0 12px!important}
.modern-form .name,.modern-form .form_rt{float:none!important;width:auto!important;padding:0!important}
.modern-form .white{color:#fff!important;margin:7px 0 0!important}
.modern-input,.modern-form .text_area,.modern-form .text_area1{width:100%!important;max-width:none!important;background:#15161b!important;color:#fff!important;border:1px solid #4b4f5b!important;border-radius:8px!important;padding:10px 11px!important;font:inherit!important;outline:none}
.modern-form input.modern-input{height:42px!important}.modern-form textarea{min-height:130px!important;resize:vertical}
.modern-input:focus{border-color:#d91f3d!important;box-shadow:0 0 0 3px rgba(217,31,61,.15)}
.primary-action{border:1px solid #eb4260;border-radius:9px;background:linear-gradient(180deg,#e72a4a,#ad0e2b);color:#fff;font-weight:800;padding:11px 18px;cursor:pointer;margin-top:10px}
.primary-action:hover{filter:brightness(1.06)}
.site-footer{
  background:rgba(8,8,10,.96);
  color:#b8bbc4;
  border-top:1px solid #5b202b;
  box-shadow:0 -10px 34px rgba(0,0,0,.28)
}
.footer-inner{max-width:1180px;margin:0 auto;padding:30px 22px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px}.footer-links a{color:#d7dae0;font-size:13px}.copyright{font-size:13px;text-align:right}
.footer-note{grid-column:1/-1;border-top:1px solid #2b2d35;padding-top:16px;font-size:12px;color:#777d88}
body
body.front-home .page-shell{margin-top:-18px}
@media(max-width:900px){
 .header-inner{align-items:flex-start;padding-top:14px;padding-bottom:14px}.main-nav{gap:2px}.brand img{width:150px}
 .gray_bg:has(.gray_left){grid-template-columns:1fr}.feature-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .content-split,.content-split tbody,.content-split tr,.content-split td{display:block;width:100%!important}.content-split td{padding:0!important}.content-split td+td{margin-top:20px}
}
@media(max-width:680px){
 .site-header{position:static}.header-inner{display:block}.brand{margin-bottom:12px}.main-nav{justify-content:flex-start}.main-nav a{padding:8px 9px;font-size:13px}.client-login{margin-left:0!important}
 .hero-inner{padding:48px 18px}.hero p{font-size:16px}.page-shell{padding:24px 14px 40px}.sec{border-radius:14px}.gray,.gray_bg{padding:18px!important}
 .feature-chip-grid{grid-template-columns:1fr}.modern-form .txt_row{grid-template-columns:1fr;gap:4px}.modern-form .white{margin:0!important}.footer-inner{grid-template-columns:1fr}.copyright{text-align:left}
}

/* v2: stronger visual continuity with the modern dashboard */
body.front-home .page-shell{position:relative}
body.front-home .page-shell:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-12vw;
  right:-12vw;
  top:-28px;
  height:150px;
  pointer-events:none;
  background:linear-gradient(176deg,rgba(135,0,22,.16),rgba(224,18,49,.07) 48%,transparent 49%);
}


/* v3: original imagery restored */

/* Keep the hero/banner height identical on Home and internal pages. */
.front-home .hero-inner,
.front-page .hero-inner{
  max-width:1180px;
  margin:0 auto;
  padding:72px 22px 66px !important;
}

/* Original theQ wide image beneath the hero. */
.legacy-banner-strip{
  position:relative;
  z-index:1;
  width:100%;
  overflow:hidden;
  background:#0b0c10;
  border-top:1px solid rgba(111,35,48,.55);
  border-bottom:1px solid rgba(111,35,48,.70);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.legacy-banner-strip img{
  display:block;
  width:100%;
  max-width:1600px;
  height:auto;
  margin:0 auto;
  object-fit:cover;
}

/* Features page: restore original image-right composition. */
.features-page .gray_bg{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,34%);
  gap:28px;
  align-items:center;
}
.features-page .gray_left{
  min-width:0;
}
.features-page .gray_rt{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.features-page .gray_rt img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:260px;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(20,20,24,.14);
}

/* Home: retain its original supporting image on the right. */
.front-home .content-split{
  width:100%;
  border-collapse:collapse;
}
.front-home .content-split td:first-child{
  width:auto;
  padding-right:28px;
  vertical-align:top;
}
.front-home .content-split td:last-child{
  width:34%;
  min-width:240px;
  vertical-align:middle;
}
.front-home .content-split .gray_rt{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.front-home .content-split .gray_rt img{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(20,20,24,.14);
}

@media(max-width:820px){
  .features-page .gray_bg{
    grid-template-columns:1fr !important;
  }
  .features-page .gray_rt{
    justify-content:center;
    padding-top:6px;
  }
  .features-page .gray_rt img{
    max-width:min(100%,520px);
    max-height:220px;
  }

  .front-home .content-split,
  .front-home .content-split tbody,
  .front-home .content-split tr,
  .front-home .content-split td{
    display:block;
    width:100% !important;
  }
  .front-home .content-split td:first-child{
    padding-right:0;
  }
  .front-home .content-split td:last-child{
    min-width:0;
    padding-top:18px;
  }
  .front-home .content-split .gray_rt{
    justify-content:center;
  }
}


/* v4: banner moved into the hero above the heading */
.legacy-banner-strip{
  display:none !important;
}

.hero-banner-image{
  width:50%;
  max-width:760px;
  min-width:280px;
  margin:0 0 34px 0;
}
.hero-banner-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Keep the page heading aligned normally beneath the banner. */
.hero-banner-image + .eyebrow,
.hero-banner-image + h1{
  margin-top:0;
}

@media(max-width:760px){
  .hero-banner-image{
    width:72%;
    min-width:0;
    max-width:520px;
    margin-bottom:24px;
  }
}

@media(max-width:520px){
  .hero-banner-image{
    width:100%;
    max-width:420px;
  }
}


/* v5: banner removed from hero and used only in Home content section */
.hero-banner-image{
  display:none !important;
}

.home-section-image{
  padding:24px 28px 8px;
  text-align:center;
  background:transparent;
}
.home-section-image img{
  display:block;
  width:50%;
  max-width:720px;
  min-width:300px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

@media(max-width:760px){
  .home-section-image{
    padding:20px 18px 6px;
  }
  .home-section-image img{
    width:72%;
    min-width:0;
  }
}

@media(max-width:520px){
  .home-section-image img{
    width:100%;
  }
}


/* v6: selected modern brand logo */
.brand img{
  width:320px;
  max-width:32vw;
  height:auto;
  display:block;
}
.header-inner{
  min-height:92px;
}
.home-section-image{
  display:none !important;
}

/* Full-width content should never inherit the Features two-column image grid. */
.front-page:not(.features-page) .gray_bg{
  display:block !important;
  width:100% !important;
}
.front-page:not(.features-page) .feature-chip-grid{
  width:100%;
}

/* Contact page: image column matches the visual scale used on Home. */
.contact-split{
  width:100% !important;
  table-layout:fixed;
}
.contact-split td:first-child{
  width:66%;
  padding-right:28px;
}
.contact-split td:last-child{
  width:34%;
  vertical-align:middle;
}
.contact-split .gray_rt{
  width:100% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.contact-split .gray_rt img{
  display:block;
  width:100% !important;
  max-width:360px !important;
  max-height:none !important;
  height:auto !important;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(20,20,24,.14);
}

/* Features: new dashboard Statistics image.
   Clip the original screenshot's black outer surround without altering its pixels. */
.features-page .stats-feature-image{
  overflow:visible;
}
.features-page .stats-feature-image img{
  width:auto !important;
  max-width:100% !important;
  max-height:260px !important;
  height:auto !important;
  clip-path:inset(2.6% 3% 4.9% 3.5% round 22px);
  box-shadow:none !important;
}

/* Keep all Features images at one visual scale. */
.features-page .gray_rt img{
  max-height:260px !important;
}

@media(max-width:900px){
  .brand img{
    width:260px;
    max-width:44vw;
  }
  .header-inner{
    min-height:78px;
  }
}

@media(max-width:820px){
  .contact-split,
  .contact-split tbody,
  .contact-split tr,
  .contact-split td{
    display:block;
    width:100% !important;
  }
  .contact-split td:first-child{
    padding-right:0;
  }
  .contact-split td:last-child{
    margin-top:20px;
  }
  .contact-split .gray_rt img{
    max-width:420px !important;
  }
}

@media(max-width:560px){
  .brand img{
    width:240px;
    max-width:78vw;
  }
}

/* v7: tighten hero area and incorporate updated public-page refinements */
.eyebrow{display:none !important;}
.hero-inner,
.front-home .hero-inner,
.front-page .hero-inner{
  max-width:1180px;
  margin:0 auto;
  padding:34px 22px 30px !important;
}
.hero h1{
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.04;
}
.hero p{
  margin:12px 0 0;
  font-size:17px;
}
.page-shell{
  padding:24px 22px 64px;
}
body.front-home .page-shell{margin-top:0;}

/* Contact page: image sized and aligned with the form panel. */
.contact-page .contact-split{
  width:100% !important;
  table-layout:fixed;
}
.contact-page .contact-split td:first-child{
  width:56%;
  padding-right:28px;
  vertical-align:top;
}
.contact-page .contact-split td:last-child{
  width:44%;
  vertical-align:top;
}
.contact-page .contact-split .gray_rt{
  height:100%;
  display:flex !important;
  align-items:stretch;
  justify-content:center;
}
.contact-page .contact-split .gray_rt img{
  width:100% !important;
  max-width:520px !important;
  height:620px !important;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(20,20,24,.14);
}

/* Features page: new sanitised dashboard composition gets full visual emphasis. */
.features-page .stats-feature-image img{
  width:100% !important;
  max-width:100% !important;
  max-height:none !important;
  height:auto !important;
  clip-path:none !important;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(20,20,24,.14) !important;
}

/* Remove the floating image from pricing and let the text breathe full width. */
.pricing-page .pricing-content{
  width:100%;
  table-layout:auto;
}
.pricing-page .pricing-content td:first-child{
  width:100%;
  padding-right:0;
}

/* Virtual Call Centre page: keep the side image at a balanced, consistent size. */
.call-centre-page .callcentre-split{
  width:100%;
  table-layout:fixed;
}
.call-centre-page .callcentre-split td:first-child{
  width:60%;
  padding-right:28px;
  vertical-align:middle;
}
.call-centre-page .callcentre-split td:last-child{
  width:40%;
  vertical-align:middle;
}
.call-centre-page .callcentre-split .gray_rt{
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.call-centre-page .callcentre-split .gray_rt img{
  width:100% !important;
  max-width:430px !important;
  max-height:330px !important;
  height:auto !important;
  object-fit:contain;
  border-radius:14px;
}

@media(max-width:900px){
  .hero-inner,
  .front-home .hero-inner,
  .front-page .hero-inner{padding:28px 18px 24px !important;}
  .page-shell{padding:20px 18px 42px;}
}

@media(max-width:820px){
  .contact-page .contact-split,
  .contact-page .contact-split tbody,
  .contact-page .contact-split tr,
  .contact-page .contact-split td,
  .call-centre-page .callcentre-split,
  .call-centre-page .callcentre-split tbody,
  .call-centre-page .callcentre-split tr,
  .call-centre-page .callcentre-split td{
    display:block;
    width:100% !important;
  }
  .contact-page .contact-split td:first-child,
  .call-centre-page .callcentre-split td:first-child{padding-right:0;}
  .contact-page .contact-split td:last-child,
  .call-centre-page .callcentre-split td:last-child{margin-top:20px;}
  .contact-page .contact-split .gray_rt img{
    max-width:520px !important;
    height:auto !important;
    min-height:0 !important;
  }
  .call-centre-page .callcentre-split .gray_rt img{
    max-width:430px !important;
    max-height:none !important;
  }
}

/* v9: Form determines the desktop row height; the image cannot stretch it.
   Absolute positioning removes the image's intrinsic height from flex sizing. */
.contact-page .contact-intro{
  margin:0 0 22px;
  color:#30343c;
  font-size:16px;
  line-height:1.6;
}
.contact-page .contact-row{
  display:flex;
  gap:36px;
  align-items:stretch;
  width:100%;
}
.contact-page .contact-form-column,
.contact-page .contact-image-box{
  flex:1 1 0;
  min-width:0;
}
/* The form is allowed to determine its own height. */
.contact-page .contact-form-column{
  display:block;
  align-self:flex-start;
}
.contact-page .contact-form-column .modern-form{
  display:block;
  width:100%;
  margin:0;
}
.contact-page .contact-form-column .modern-form .get_bg{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0;
}
/* Stretch the image COLUMN to the form, never the other way around. */
.contact-page .contact-image-box{
  position:relative;
  align-self:stretch;
  display:block;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(20,20,24,.14);
}
.contact-page .contact-image-box img{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover;
  object-position:center center;
  border-radius:14px;
}
/* On narrow screens, stack normally and let the image have its natural size. */
@media(max-width:820px){
  .contact-page .contact-row{display:block;}
  .contact-page .contact-form-column{display:block;}
  .contact-page .contact-image-box{
    display:block;
    margin-top:20px;
    height:auto;
  }
  .contact-page .contact-image-box img{
    position:static;
    width:100% !important;
    height:auto !important;
    max-height:420px !important;
    object-fit:cover;
  }
}