/*
Theme Name: QMS Systems V17 QMS Services Logo
Theme URI: https://qmsprecast.co.uk/
Author: QMS Systems
Description: Custom one-page WordPress theme for QMS Systems with real service images and bert. section.
Version: 17.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: qms-systems-v17
*/

:root{--cream:#faf6ee;--ink:#111827;--muted:#625c54;--orange:#f97316;--orange-dark:#ea580c;--line:#f0dcc3;--card:#fffdf8;--soft-orange:#fff1e6;--dark:#111}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;padding:14px 24px}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.page{max-width:1240px;margin:0 auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 18px}.logo{display:flex;align-items:center;gap:12px}.logo-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:var(--dark);color:var(--orange);box-shadow:0 8px 20px rgba(17,17,17,.08)}.logo-mark svg{width:32px;height:32px}.logo-title{font-size:30px;line-height:.9;font-weight:900;letter-spacing:-.04em}.logo-subtitle{margin-top:5px;color:var(--orange);font-size:13px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:900}.nav a{padding-bottom:8px;border-bottom:2px solid transparent;transition:.18s}.nav a:hover,.nav a.bert{color:var(--orange)}.nav a.active{border-color:var(--orange)}
.hero{overflow:hidden;border-radius:30px;color:#fff;padding:56px;background:radial-gradient(circle at 62% 75%,rgba(249,115,22,.22),transparent 26%),linear-gradient(135deg,#141414,#1f2020 58%,#111);box-shadow:0 18px 38px rgba(17,17,17,.08)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);gap:36px;align-items:center}.eyebrow{margin:0;color:#fb923c;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.hero h1{max-width:760px;margin:24px 0 0;font-size:clamp(44px,5.6vw,72px);line-height:1.04;letter-spacing:-.055em;font-weight:900}.hero-copy{max-width:700px;margin:24px 0 0;color:#e7e5e4;font-size:19px;line-height:1.7}.button-outline{display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:28px;padding:0 28px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(0,0,0,.2);color:#fff;font-size:15px;font-weight:900;transition:.18s}.button-outline:hover{background:#fff;color:#111}.experience-card{align-self:end;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}.experience-inner{display:flex;align-items:center;gap:16px}.experience-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.28);color:var(--orange);font-weight:900}.experience-number{color:var(--orange);font-size:38px;line-height:1;font-weight:900;letter-spacing:-.04em}.experience-text{margin:4px 0 0;color:#ece8e3;font-size:14px;line-height:1.45;font-weight:700}
.image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.image-card{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 8px 24px rgba(17,17,17,.04)}.image-card img{width:100%;height:230px;object-fit:cover}.image-card-body{padding:18px 20px 20px}.image-card h3{margin:0;font-size:17px;line-height:1.15;font-weight:900;letter-spacing:-.03em}.image-card p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.5)}.benefit{display:flex;align-items:flex-start;gap:14px;min-height:112px;padding:22px 20px}.benefit:not(:last-child){border-right:1px solid var(--line)}.benefit-icon{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:999px;background:var(--soft-orange);color:#8a3b07;font-weight:900}.benefit h3{margin:0;font-size:15px;line-height:1.25;font-weight:900}.benefit p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.section-heading{padding-top:34px;text-align:center}.section-heading h2{margin:0;font-size:30px;font-weight:900;letter-spacing:-.04em}.section-heading p{margin:8px 0 0;color:var(--muted);font-size:16px}.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px}.service-card{padding:24px;border:1px solid #ffead2;border-radius:24px;background:rgba(255,255,255,.8);box-shadow:0 8px 24px rgba(17,17,17,.03)}.service-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:999px;background:#ffedd5;color:var(--orange);font-size:24px;font-weight:900}.service-card h3{margin:20px 0 0;font-size:22px;line-height:1.12;font-weight:900;letter-spacing:-.04em}.service-card p{margin:14px 0 0;color:#44403c;font-size:15px;line-height:1.6}
.approach{margin-top:18px;padding:28px;border:1px solid #efddc7;border-radius:24px;background:#f5eadb}.approach-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}.approach-main{display:flex;gap:20px}.target-circle{width:74px;height:74px;display:grid;place-items:center;flex-shrink:0;border-radius:999px;background:#ffedd5;font-size:30px}.approach h2{margin:0;font-size:23px;font-weight:900;letter-spacing:-.04em}.approach p{max-width:680px;margin:8px 0 0;color:#44403c;font-size:15px;line-height:1.6}.outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.outcome{padding:12px 10px;text-align:center;font-size:14px;line-height:1.35;font-weight:900}.outcome:not(:last-child){border-right:1px solid #ebd3b3}
.bert-intro{margin-top:28px;padding:28px;border:1px solid #ffedd5;border-radius:24px;background:rgba(255,255,255,.7)}.bert-intro-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:20px;align-items:center}.bert-label{margin:0;color:var(--orange);font-size:13px;font-weight:900;letter-spacing:.16em}.bert-intro h2{margin:8px 0 0;font-size:36px;line-height:1.05;font-weight:900;letter-spacing:-.05em}.bert-intro p{margin:0;color:#44403c;font-size:17px;line-height:1.7}.bert-panel{margin-top:18px;padding:44px 52px;border-radius:24px;color:#fff;background:radial-gradient(circle at 42% 42%,rgba(88,28,135,.22),transparent 30%),linear-gradient(135deg,#020617,#030817 62%,#000814);box-shadow:0 18px 38px rgba(2,6,23,.12)}.bert-badge{display:inline-flex;padding:8px 16px;border:1px solid rgba(249,115,22,.45);border-radius:999px;background:rgba(67,20,7,.35);color:#fed7aa;font-size:12px;font-weight:900}.bert-panel h2{max-width:860px;margin:18px 0 0;font-size:clamp(38px,4.8vw,62px);line-height:1;font-weight:900;letter-spacing:-.055em}.bert-panel p{max-width:760px;margin:18px 0 0;color:#e2e8f0;font-size:16px;line-height:1.7}.brand{color:var(--orange);font-weight:900}.button-orange{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:22px;padding:0 28px;border-radius:999px;background:var(--orange);color:#fff;font-weight:900;transition:.18s}.button-orange:hover{background:var(--orange-dark)}
.contact{margin-top:18px;padding:22px 24px;border:1px solid #ffedd5;border-radius:24px;background:#fff6ec}.contact-grid{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.contact-main{display:flex;align-items:center;gap:18px}.contact-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:999px;background:#ffedd5;font-size:28px}.contact h2{margin:0;font-size:22px;font-weight:900}.contact p{margin:4px 0 0;color:var(--muted);font-size:14px}.contact-links{display:flex;flex-wrap:wrap;gap:16px}.contact-links a{font-size:14px;font-weight:900;transition:.18s}.contact-links a:hover{color:var(--orange)}.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 4px;color:var(--muted);font-size:12px}.footer-links{display:flex;gap:28px}
@media(max-width:1080px){.hero-grid,.approach-grid,.bert-intro-grid,.contact-grid{grid-template-columns:1fr}.image-grid,.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit:nth-child(2){border-right:none}.benefit:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:760px){body{padding:10px 12px}.nav{display:none}.hero,.bert-panel{padding:34px 24px}.hero h1,.bert-panel h2{font-size:42px}.hero-copy{font-size:17px}.image-grid,.benefits,.services-grid,.outcomes{grid-template-columns:1fr}.benefit,.outcome{border-right:none!important;border-bottom:1px solid var(--line)}.benefit:last-child,.outcome:last-child{border-bottom:none}.approach-main,.contact-main,.contact-links,.footer{flex-direction:column;align-items:flex-start}.footer-links{gap:14px;flex-wrap:wrap}}


/* Flexible solutions */

.flexible-solutions {
  margin-top: 28px;
  padding: 30px;
  border: 1px solid #ffedd5;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 15%, rgba(249, 115, 22, 0.12), transparent 22%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.03);
}

.flexible-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.flexible-label {
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flexible-solutions h2 {
  max-width: 560px;
  margin: 8px 0 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.flexible-solutions p {
  margin: 0;
  color: #44403c;
  font-size: 17px;
  line-height: 1.7;
}

.flexible-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.flexible-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .flexible-grid {
    grid-template-columns: 1fr;
  }
}


/* QMS logo image */
.logo-image {
  width: 220px;
  height: auto;
  display: block;
}

.logo {
  gap: 0;
}

@media (max-width: 760px) {
  .logo-image {
    width: 170px;
  }
}



/* bert.-style motion and interaction */

@keyframes qmsFadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes qmsFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes qmsGlow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

@keyframes qmsSheen {
  0% {
    transform: translateX(-140%) skewX(-18deg);
  }

  100% {
    transform: translateX(220%) skewX(-18deg);
  }
}

@keyframes qmsSoftPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.26);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
  }
}

.hero,
.bert-panel {
  position: relative;
  isolation: isolate;
}

.hero::before,
.bert-panel::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 22%, rgba(249, 115, 22, 0.18), transparent 18%),
    radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.09), transparent 18%);
  animation: qmsGlow 7s ease-in-out infinite;
  pointer-events: none;
}

.hero h1,
.hero .eyebrow,
.hero .hero-copy,
.hero .button-outline {
  animation: qmsFadeUp 0.75s ease both;
}

.hero h1 {
  animation-delay: 0.08s;
}

.hero .hero-copy {
  animation-delay: 0.16s;
}

.hero .button-outline {
  animation-delay: 0.24s;
}

.experience-card {
  animation: qmsFadeUp 0.75s ease 0.22s both, qmsFloat 5.5s ease-in-out 1.1s infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.image-card,
.service-card,
.benefit,
.outcome,
.button-orange,
.button-outline {
  will-change: transform;
}

.image-card,
.service-card,
.benefit {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.image-card:hover,
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.10);
  border-color: #fed7aa;
}

.benefit:hover {
  transform: translateY(-3px);
  background: rgba(255, 247, 237, 0.72);
}

.image-card img {
  transition: transform 0.45s ease, filter 0.45s ease;
}

.image-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.03);
}

.button-orange,
.button-outline {
  position: relative;
  overflow: hidden;
}

.button-orange::after,
.button-outline::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 42%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-140%) skewX(-18deg);
}

.button-orange:hover::after,
.button-outline:hover::after {
  animation: qmsSheen 0.75s ease;
}

.button-orange {
  animation: qmsSoftPulse 3s ease-in-out infinite;
}

.bert-badge,
.flexible-tags span {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.bert-badge:hover,
.flexible-tags span:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}



/* Cut-out QMS logo */
.logo-image{
  width: 245px;
  height: auto;
  display: block;
}

/* Live site background */
body{
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, rgba(249,115,22,0.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(37,99,235,0.05), transparent 28%),
    #faf6ee;
}

body::before,
body::after{
  content:"";
  position: fixed;
  inset: auto;
  z-index: -2;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
}

body::before{
  width: 420px;
  height: 420px;
  left: -80px;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.18) 0%, rgba(249,115,22,0.08) 38%, rgba(249,115,22,0) 72%);
  animation: qmsAmbientDriftOne 18s ease-in-out infinite alternate;
}

body::after{
  width: 520px;
  height: 520px;
  right: -120px;
  bottom: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(37,99,235,0.07) 40%, rgba(37,99,235,0) 72%);
  animation: qmsAmbientDriftTwo 22s ease-in-out infinite alternate;
}

.page{
  position: relative;
  z-index: 1;
}

.page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17,24,39,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
  animation: qmsGridDrift 24s linear infinite;
  opacity: 0.45;
}

@keyframes qmsAmbientDriftOne{
  0%{
    transform: translate3d(0,0,0) scale(1);
  }
  50%{
    transform: translate3d(60px,20px,0) scale(1.08);
  }
  100%{
    transform: translate3d(120px,-30px,0) scale(0.98);
  }
}

@keyframes qmsAmbientDriftTwo{
  0%{
    transform: translate3d(0,0,0) scale(1);
  }
  50%{
    transform: translate3d(-70px,-25px,0) scale(1.05);
  }
  100%{
    transform: translate3d(-120px,30px,0) scale(0.96);
  }
}

@keyframes qmsGridDrift{
  0%{
    transform: translate3d(0,0,0);
  }
  100%{
    transform: translate3d(42px,42px,0);
  }
}

/* More animated live dark panels */
.hero,
.bert-panel{
  background-size: 180% 180%;
  animation: qmsPanelFlow 16s ease-in-out infinite;
}

@keyframes qmsPanelFlow{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

@media (max-width: 760px){
  .logo-image{
    width: 185px;
  }

  body::before{
    width: 280px;
    height: 280px;
    left: -90px;
  }

  body::after{
    width: 320px;
    height: 320px;
    right: -110px;
  }
}



/* ===== QMS blue / black / white palette override ===== */

:root{
  --cream:#f8fafc;
  --ink:#0f172a;
  --muted:#475569;
  --orange:#2563eb;        /* re-mapped to QMS blue */
  --orange-dark:#1d4ed8;   /* deeper blue */
  --line:#dbeafe;
  --card:#ffffff;
  --soft-orange:#eff6ff;   /* pale blue */
  --dark:#020617;
}

body{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.08), transparent 24%),
    radial-gradient(circle at bottom right, rgba(15,23,42,0.06), transparent 28%),
    #f8fafc;
}

body::before{
  background: radial-gradient(circle, rgba(37,99,235,0.20) 0%, rgba(37,99,235,0.09) 38%, rgba(37,99,235,0) 72%);
}

body::after{
  background: radial-gradient(circle, rgba(15,23,42,0.14) 0%, rgba(30,41,59,0.07) 40%, rgba(30,41,59,0) 72%);
}

.page::before{
  background-image:
    linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px);
}

.eyebrow,
.logo-subtitle,
.bert-label,
.brand,
.nav a.bert,
.nav a:hover{
  color:#2563eb;
}

.nav a.active{
  border-color:#2563eb;
}

.hero{
  background:
    radial-gradient(circle at 62% 75%, rgba(37,99,235,0.24), transparent 26%),
    linear-gradient(135deg, #020617, #0f172a 58%, #000000);
}

.bert-panel{
  background:
    radial-gradient(circle at 42% 42%, rgba(37,99,235,0.18), transparent 30%),
    linear-gradient(135deg, #020617, #0b1120 62%, #000814);
}

.hero::before,
.bert-panel::before{
  background:
    radial-gradient(circle at 20% 22%, rgba(37,99,235,0.20), transparent 18%),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,0.10), transparent 18%);
}

.button-orange{
  background:#2563eb;
  color:#ffffff;
}

.button-orange:hover{
  background:#1d4ed8;
}

.button-outline:hover{
  background:#ffffff;
  color:#0f172a;
}

.button-orange{
  box-shadow: 0 10px 28px rgba(37,99,235,0.22);
}

@keyframes qmsSoftPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37,99,235,0.24);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37,99,235,0);
  }
}

.experience-number{
  color:#60a5fa;
}

.experience-icon,
.logo-mark{
  color:#60a5fa;
}

.benefit-icon,
.service-icon,
.contact-icon,
.target-circle{
  background:#eff6ff;
  color:#2563eb;
}

.benefit-icon{
  color:#1d4ed8;
}

.service-card,
.image-card,
.approach,
.contact,
.flexible-solutions,
.bert-intro{
  border-color:#dbeafe;
}

.image-card:hover,
.service-card:hover{
  border-color:#93c5fd;
}

.benefit:hover{
  background: rgba(239,246,255,0.72);
}

.flexible-tags span{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}

.bert-badge{
  border-color: rgba(96,165,250,0.45);
  background: rgba(30,41,59,0.45);
  color:#dbeafe;
}

.approach{
  background:#f8fbff;
}

.contact{
  background:#f8fbff;
}

.footer{
  color:#475569;
}

.footer a:hover,
.contact-links a:hover{
  color:#2563eb;
}



/* ===== V8 background fix =====
   The live background blobs now sit on a dedicated fixed layer
   instead of being attached to body pseudo-elements. This stops the
   lower moving background from being clipped near the bottom of the page.
*/

html,
body {
  min-height: 100%;
}

body {
  overflow-x: clip;
}

body::before,
body::after {
  display: none;
}

.qms-live-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.qms-live-bg__blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.58;
  will-change: transform;
}

.qms-live-bg__blob--one {
  width: 460px;
  height: 460px;
  left: -120px;
  top: 8vh;
  background: radial-gradient(circle, rgba(37,99,235,0.20) 0%, rgba(37,99,235,0.09) 38%, rgba(37,99,235,0) 72%);
  animation: qmsAmbientDriftOne 18s ease-in-out infinite alternate;
}

.qms-live-bg__blob--two {
  width: 560px;
  height: 560px;
  right: -150px;
  bottom: -90px;
  background: radial-gradient(circle, rgba(15,23,42,0.16) 0%, rgba(30,41,59,0.08) 40%, rgba(30,41,59,0) 72%);
  animation: qmsAmbientDriftTwo 22s ease-in-out infinite alternate;
}

.qms-live-bg__blob--three {
  width: 360px;
  height: 360px;
  left: 42%;
  bottom: -120px;
  background: radial-gradient(circle, rgba(59,130,246,0.13) 0%, rgba(59,130,246,0.06) 42%, rgba(59,130,246,0) 74%);
  animation: qmsAmbientDriftThree 26s ease-in-out infinite alternate;
}

@keyframes qmsAmbientDriftThree {
  0% {
    transform: translate3d(-40px, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(40px, -45px, 0) scale(1.08);
  }

  100% {
    transform: translate3d(90px, -20px, 0) scale(0.98);
  }
}

.page {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .qms-live-bg__blob--one {
    width: 300px;
    height: 300px;
    left: -120px;
  }

  .qms-live-bg__blob--two {
    width: 360px;
    height: 360px;
    right: -140px;
    bottom: -70px;
  }

  .qms-live-bg__blob--three {
    width: 260px;
    height: 260px;
    left: 20%;
    bottom: -90px;
  }
}



/* ===== V9 live background cleanup =====
   Removes the straight overlay line/band and keeps only soft floating blobs.
*/

body::before,
body::after,
.page::before {
  display: none !important;
  content: none !important;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.05), transparent 22%),
    radial-gradient(circle at bottom right, rgba(15,23,42,0.05), transparent 24%),
    #f8fafc;
}

.qms-live-bg {
  position: fixed;
  top: -18vh;
  right: 0;
  bottom: -18vh;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  background: none !important;
}

.qms-live-bg__blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.46;
  will-change: transform;
  background-repeat: no-repeat;
}

.qms-live-bg__blob--one {
  width: 420px;
  height: 420px;
  left: -120px;
  top: 10vh;
  background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, rgba(59,130,246,0.10) 38%, rgba(59,130,246,0) 72%);
  animation: qmsAmbientDriftOne 18s ease-in-out infinite alternate;
}

.qms-live-bg__blob--two {
  width: 520px;
  height: 520px;
  right: -170px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(15,23,42,0.18) 0%, rgba(30,41,59,0.08) 42%, rgba(30,41,59,0) 74%);
  animation: qmsAmbientDriftTwo 24s ease-in-out infinite alternate;
}

.qms-live-bg__blob--three {
  width: 340px;
  height: 340px;
  left: 48%;
  bottom: -120px;
  background: radial-gradient(circle, rgba(96,165,250,0.12) 0%, rgba(96,165,250,0.06) 42%, rgba(96,165,250,0) 74%);
  animation: qmsAmbientDriftThree 28s ease-in-out infinite alternate;
}

@keyframes qmsAmbientDriftThree {
  0% {
    transform: translate3d(-20px, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(30px, -30px, 0) scale(1.06);
  }
  100% {
    transform: translate3d(65px, -12px, 0) scale(0.98);
  }
}

.page {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .qms-live-bg {
    top: -14vh;
    bottom: -14vh;
  }

  .qms-live-bg__blob--one {
    width: 280px;
    height: 280px;
    left: -100px;
  }

  .qms-live-bg__blob--two {
    width: 340px;
    height: 340px;
    right: -130px;
    bottom: -100px;
  }

  .qms-live-bg__blob--three {
    width: 220px;
    height: 220px;
    left: 24%;
    bottom: -80px;
  }
}



/* ===== V10 bert. section to match usebert.co.uk styling ===== */

.bert-intro {
  margin-top: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bert-match {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 44px;
  color: #ffffff;
  background:
    radial-gradient(circle at 74% 28%, rgba(37, 99, 235, 0.28), transparent 24%),
    radial-gradient(circle at 16% 80%, rgba(96, 165, 250, 0.14), transparent 24%),
    linear-gradient(135deg, #020617, #06132d 58%, #000814);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.22);
}

.bert-match::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.06) 35%, transparent 52%),
    radial-gradient(circle at 20% 22%, rgba(59,130,246,0.18), transparent 18%);
  animation: qmsPanelFlow 18s ease-in-out infinite;
  pointer-events: none;
}

.bert-match-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 34px;
  align-items: center;
}

.bert-match-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(96,165,250,0.45);
  border-radius: 999px;
  background: rgba(15,23,42,0.64);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.bert-match h2 {
  max-width: 760px;
  margin: 20px 0 0;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.bert-match-copy {
  max-width: 660px;
  margin: 22px 0 0;
  color: #dbeafe;
  font-size: 18px;
  line-height: 1.75;
}

.bert-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.bert-match-primary,
.bert-match-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.bert-match-primary {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(37,99,235,0.32);
}

.bert-match-primary:hover {
  transform: translateY(-2px);
  background: #1d4ed8;
}

.bert-match-secondary {
  border: 1px solid rgba(219,234,254,0.25);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.bert-match-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(219,234,254,0.55);
  background: rgba(255,255,255,0.12);
}

.bert-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.bert-metric {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(219,234,254,0.12);
  border-radius: 20px;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(8px);
}

.bert-metric strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.bert-metric span {
  display: block;
  margin-top: 5px;
  color: #bfdbfe;
  font-size: 13px;
  line-height: 1.4;
}

.bert-app-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(219,234,254,0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05)),
    rgba(15,23,42,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  animation: qmsFloat 5.5s ease-in-out infinite;
}

.bert-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bert-app-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 950;
}

.bert-app-date {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 900;
}

.bert-task-card {
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  color: #0f172a;
}

.bert-task-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.bert-task-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.bert-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.bert-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.bert-time {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.bert-proof-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.bert-proof-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(219,234,254,0.13);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: #dbeafe;
  font-size: 14px;
  font-weight: 850;
}

.bert-proof-item span:last-child {
  color: #93c5fd;
  font-size: 13px;
}

.bert-panel {
  display: none;
}

@media (max-width: 980px) {
  .bert-match {
    padding: 32px 24px;
  }

  .bert-match-grid {
    grid-template-columns: 1fr;
  }

  .bert-metrics {
    grid-template-columns: 1fr;
  }

  .bert-match h2 {
    font-size: 44px;
  }
}



/* ===== V12 bert. section brand styling ===== */

.bert-intro {
  margin-top: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bert-match {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 44px;
  color: #ffffff;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 122, 0, 0.18), transparent 22%),
    radial-gradient(circle at 16% 82%, rgba(37, 99, 235, 0.12), transparent 24%),
    linear-gradient(135deg, #000814, #020c22 58%, #000000);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.22);
}

.bert-match::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 122, 0, 0.08), transparent 18%),
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.05) 36%, transparent 52%);
  animation: qmsPanelFlow 18s ease-in-out infinite;
  pointer-events: none;
}

.bert-match-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 34px;
  align-items: center;
}

.bert-brand-lockup {
  margin: 0;
}

.bert-site-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 0 18px 0;
  border-radius: 14px;
}

.bert-match h2 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.94;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.bert-match-copy {
  max-width: 660px;
  margin: 22px 0 0;
  color: #dbeafe;
  font-size: 18px;
  line-height: 1.75;
}

.bert-match-copy .brand {
  color: #ff7a00;
}

.bert-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.bert-match-primary,
.bert-match-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.bert-match-primary {
  background: #ff7a00;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(255, 122, 0, 0.32);
}

.bert-match-primary:hover {
  transform: translateY(-2px);
  background: #ff8c1a;
}

.bert-match-secondary {
  border: 1px solid rgba(219,234,254,0.22);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.bert-match-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255,122,0,0.45);
  background: rgba(255,255,255,0.10);
}

.bert-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.bert-metric {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(219,234,254,0.10);
  border-radius: 20px;
  background: rgba(15,23,42,0.48);
  backdrop-filter: blur(8px);
}

.bert-metric strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.bert-metric span {
  display: block;
  margin-top: 5px;
  color: #bfdbfe;
  font-size: 13px;
  line-height: 1.4;
}

.bert-app-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(219,234,254,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    rgba(15,23,42,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  animation: qmsFloat 5.5s ease-in-out infinite;
}

.bert-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bert-app-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,122,0,0.12);
  color: #ffb266;
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(255,122,0,0.18);
}

.bert-app-date {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 900;
}

.bert-task-card {
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  color: #0f172a;
}

.bert-task-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.bert-task-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.bert-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.bert-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ff7a00;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.bert-time {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.bert-proof-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.bert-proof-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(219,234,254,0.13);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: #dbeafe;
  font-size: 14px;
  font-weight: 850;
}

.bert-proof-item span:last-child {
  color: #ffb266;
  font-size: 13px;
}

.bert-panel {
  display: none;
}

@media (max-width: 980px) {
  .bert-match {
    padding: 32px 24px;
  }

  .bert-match-grid {
    grid-template-columns: 1fr;
  }

  .bert-metrics {
    grid-template-columns: 1fr;
  }

  .bert-match h2 {
    font-size: 44px;
  }

  .bert-site-logo {
    width: min(100%, 300px);
  }
}



/* ===== V13 bert. layout refinement ===== */

.bert-intro {
  margin-top: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bert-top-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid #dbeafe;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 12%, rgba(37,99,235,0.08), transparent 20%),
    rgba(255,255,255,0.78);
  box-shadow: 0 10px 28px rgba(15,23,42,0.04);
}

.bert-top-copy {
  max-width: 720px;
}

.bert-top-kicker {
  margin: 0;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bert-top-title {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.bert-top-text {
  margin: 14px 0 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.75;
}

.bert-top-logo-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bert-top-logo-card {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border: 1px solid rgba(219,234,254,0.9);
  border-radius: 24px;
  background:
    linear-gradient(135deg, #020617, #06132d 58%, #000814);
  box-shadow: 0 18px 40px rgba(2,6,23,0.14);
}

.bert-site-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 14px;
}

.bert-match {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 44px;
  color: #ffffff;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 122, 0, 0.18), transparent 22%),
    radial-gradient(circle at 16% 82%, rgba(37, 99, 235, 0.12), transparent 24%),
    linear-gradient(135deg, #000814, #020c22 58%, #000000);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.22);
}

.bert-match::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 122, 0, 0.08), transparent 18%),
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.05) 36%, transparent 52%);
  animation: qmsPanelFlow 18s ease-in-out infinite;
  pointer-events: none;
}

.bert-match-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  gap: 34px;
  align-items: center;
}

.bert-match-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255,122,0,0.28);
  border-radius: 999px;
  background: rgba(255,122,0,0.10);
  color: #ffd1a3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.bert-match h2 {
  max-width: 760px;
  margin: 18px 0 0;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.94;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.bert-match-copy {
  max-width: 660px;
  margin: 22px 0 0;
  color: #dbeafe;
  font-size: 18px;
  line-height: 1.75;
}

.bert-match-copy .brand {
  color: #ff7a00;
}

.bert-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.bert-match-primary,
.bert-match-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.bert-match-primary {
  background: #ff7a00;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(255, 122, 0, 0.32);
}

.bert-match-primary:hover {
  transform: translateY(-2px);
  background: #ff8c1a;
}

.bert-match-secondary {
  border: 1px solid rgba(219,234,254,0.22);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.bert-match-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255,122,0,0.45);
  background: rgba(255,255,255,0.10);
}

.bert-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.bert-metric {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(219,234,254,0.10);
  border-radius: 20px;
  background: rgba(15,23,42,0.48);
  backdrop-filter: blur(8px);
}

.bert-metric strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.bert-metric span {
  display: block;
  margin-top: 5px;
  color: #bfdbfe;
  font-size: 13px;
  line-height: 1.4;
}

.bert-app-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(219,234,254,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    rgba(15,23,42,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  animation: qmsFloat 5.5s ease-in-out infinite;
}

.bert-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bert-app-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,122,0,0.12);
  color: #ffb266;
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(255,122,0,0.18);
}

.bert-app-date {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 900;
}

.bert-task-card {
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  color: #0f172a;
}

.bert-task-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.bert-task-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.bert-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.bert-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ff7a00;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.bert-time {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.bert-proof-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.bert-proof-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(219,234,254,0.13);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: #dbeafe;
  font-size: 14px;
  font-weight: 850;
}

.bert-proof-item span:last-child {
  color: #ffb266;
  font-size: 13px;
}

.bert-panel {
  display: none;
}

@media (max-width: 980px) {
  .bert-top-intro,
  .bert-match-grid {
    grid-template-columns: 1fr;
  }

  .bert-top-logo-wrap {
    justify-content: flex-start;
  }

  .bert-match {
    padding: 32px 24px;
  }

  .bert-metrics {
    grid-template-columns: 1fr;
  }

  .bert-match h2,
  .bert-top-title {
    font-size: 44px;
  }

  .bert-top-logo-card {
    max-width: 300px;
  }
}


/* V14 wording update */
.qms-definition {
  max-width: 700px;
  margin: 18px 0 0;
  color: #bfdbfe;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 800;
}


/* ===== V15 QMS square logo + Services ===== */
.logo.logo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.logo-square {
  width: 86px;
  height: auto;
  display: block;
}

.logo-services {
  display: block;
  color: #0f172a;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
}

.logo-image,
.logo-title,
.logo-subtitle,
.logo-mark {
  display: none !important;
}

@media (max-width: 760px) {
  .logo-square {
    width: 70px;
  }

  .logo-services {
    font-size: 14px;
  }
}


/* ===== V16 QMS square logo with Services to the right ===== */
.logo.logo-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-decoration: none;
}

.logo-square {
  width: 72px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.logo-services-inline {
  display: block;
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-align: left;
}

.logo-services {
  display: none !important;
}

.logo-image,
.logo-title,
.logo-subtitle,
.logo-mark {
  display: none !important;
}

@media (max-width: 760px) {
  .logo.logo-inline {
    gap: 10px;
  }

  .logo-square {
    width: 58px;
  }

  .logo-services-inline {
    font-size: 22px;
  }
}


/* ===== V17 logo lockup: like the old logo, but Services instead of Systems ===== */
.logo.logo-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-decoration: none;
}

.logo-square {
  width: 72px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.logo-text-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}

.logo-qms-text {
  display: block;
  color: #0f172a;
  font-size: 32px;
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.logo-services-text {
  display: block;
  margin-top: 4px;
  color: #2563eb;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.logo-services,
.logo-services-inline,
.logo-image,
.logo-title,
.logo-subtitle,
.logo-mark {
  display: none !important;
}

@media (max-width: 760px) {
  .logo.logo-lockup {
    gap: 10px;
  }

  .logo-square {
    width: 58px;
  }

  .logo-qms-text {
    font-size: 26px;
  }

  .logo-services-text {
    font-size: 13px;
  }
}