/* =============================================================
   Q2 Distribution — brand tokens & overrides on Bootstrap 5.3
   Derived from the Q2 logo. Clean, professional, industrial-B2B.
   ============================================================= */

/* ---- Self-hosted Inter ---- */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/Inter-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/Inter-500.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/Inter-600.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/Inter-700.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root{
  /* Brand (sampled from logo) */
  --q2-navy:        #0C2A5E;   /* primary: headings, nav, buttons, footer bg */
  --q2-navy-deep:   #081E45;   /* hovers, footer, gradients */
  --q2-teal:        #00B3A5;   /* accent: underlines, icons, dividers, large UI only */
  --q2-teal-link:   #007E72;   /* link/CTA TEXT on white — darkened to pass WCAG AA 4.5:1 (4.97:1) */
  --q2-teal-deep:   #00756A;   /* link hover */
  --q2-grey:        #A7A9AC;   /* the "2": muted text, borders, dividers */
  --q2-grey-soft:   #E6E8EB;   /* hairlines, card borders */

  /* Neutrals */
  --q2-ink:         #1A2230;   /* body text */
  --q2-muted:       #5A6472;   /* secondary text (>= AA on white) */
  --q2-bg:          #FFFFFF;
  --q2-bg-soft:     #F4F6F9;   /* alternating section background */
  --q2-white:       #FFFFFF;

  /* Type */
  --q2-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --q2-radius: 10px;
  --q2-maxw: 1140px;       /* matches Bootstrap container-xl */
  --q2-section-y: clamp(3rem, 7vw, 6rem);

  /* Map a few Bootstrap theme vars to brand */
  --bs-primary: var(--q2-navy);
  --bs-link-color: var(--q2-teal-link);
  --bs-link-hover-color: var(--q2-teal-deep);
  --bs-body-color: var(--q2-ink);
  --bs-body-font-family: var(--q2-font);
}

/* ---- Base ---- */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--q2-font);
  color:var(--q2-ink);
  background:var(--q2-bg);
  font-size:1.0625rem;          /* 17px */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Offset anchored sections for the sticky header */
:target{ scroll-margin-top:84px; }

a{ color:var(--q2-teal-link); text-underline-offset:2px; }
a:hover{ color:var(--q2-teal-deep); }

p{ max-width:65ch; }

/* ---- Headings ---- */
h1,h2,h3,h4{ color:var(--q2-navy); font-weight:700; line-height:1.15; }
h1{ font-size:clamp(2rem, 4.5vw, 3.25rem); letter-spacing:-0.01em; }
h2{ font-size:clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size:1.15rem; font-weight:600; line-height:1.3; }

/* Tabular figures for phone numbers / data so they don't jitter */
.q2-tnum{ font-variant-numeric:tabular-nums; }

/* ---- Section rhythm ---- */
.q2-section{ padding-block:var(--q2-section-y); }
.q2-section--soft{ background:var(--q2-bg-soft); }

.q2-container{
  max-width:var(--q2-maxw);
  margin-inline:auto;
  padding-inline:1rem;
}
@media (min-width:768px){ .q2-container{ padding-inline:1.5rem; } }

/* Brand teal underline accent under each H2 (the logo "swoosh") */
.q2-rule{
  width:56px; height:4px;
  background:var(--q2-teal);
  border-radius:2px;
  margin:.75rem 0 1.5rem;
}
.q2-rule--center{ margin-inline:auto; }

.q2-eyebrow{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8125rem;
  font-weight:600;
  color:var(--q2-teal-link);
  margin-bottom:.5rem;
}
.q2-lead{ color:var(--q2-muted); font-size:1.125rem; }

/* ---- Skip link ---- */
.q2-skip{
  position:absolute; left:1rem; top:-3rem;
  z-index:1100;
  background:var(--q2-navy); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 var(--q2-radius) var(--q2-radius);
  transition:top .2s ease;
}
.q2-skip:focus{ top:0; color:#fff; }

/* ---- Focus visibility (never remove) ---- */
:focus-visible{
  outline:2px solid var(--q2-teal-deep);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- Header / nav ---- */
.q2-header{
  position:sticky; top:0; z-index:1030;
  background:#fff;
  border-bottom:1px solid var(--q2-grey-soft);
  transition:box-shadow .2s ease;
}
.q2-header.is-scrolled{ box-shadow:0 2px 12px rgba(8,30,69,.08); }
.q2-logo{ height:44px; width:auto; display:block; }
.q2-footer-logo{ height:52px; width:auto; }

.navbar .nav-link{
  color:var(--q2-ink);
  font-weight:500;
  padding-inline:.9rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible{ color:var(--q2-navy); }
.navbar .nav-link.active{ color:var(--q2-navy); font-weight:600; }

/* ---- Buttons ---- */
.btn{ font-weight:600; border-radius:var(--q2-radius); }
.btn-lg{ padding:.75rem 1.4rem; }
/* enforce 44px min touch target */
.btn, .navbar-toggler{ min-height:44px; }

.btn-q2-primary{
  background:var(--q2-navy); border-color:var(--q2-navy); color:#fff;
}
.btn-q2-primary:hover,
.btn-q2-primary:focus-visible{
  background:var(--q2-navy-deep); border-color:var(--q2-navy-deep); color:#fff;
}
.btn-q2-accent{
  background:var(--q2-teal); border-color:var(--q2-teal); color:var(--q2-navy);
  font-weight:700;
}
.btn-q2-accent:hover,
.btn-q2-accent:focus-visible{
  background:var(--q2-teal-deep); border-color:var(--q2-teal-deep); color:#fff;
}
.btn-q2-outline{
  background:transparent; border:2px solid var(--q2-navy); color:var(--q2-navy);
}
.btn-q2-outline:hover,
.btn-q2-outline:focus-visible{
  background:var(--q2-navy); color:#fff;
}

/* ---- Hero ---- */
.q2-hero{
  background:linear-gradient(160deg, var(--q2-navy) 0%, var(--q2-navy-deep) 100%);
  color:#fff;
}
.q2-hero h1{ color:#fff; }
.q2-hero .q2-lead{ color:rgba(255,255,255,.85); }
.q2-hero .q2-rule{ background:var(--q2-teal); }
.q2-trustline{
  color:rgba(255,255,255,.75);
  font-size:.95rem;
}
.q2-trustline .dot{ color:var(--q2-teal); padding-inline:.45rem; }

/* ---- Product / value cards ---- */
.q2-card{
  height:100%;
  background:#fff;
  border:1px solid var(--q2-grey-soft);
  border-radius:var(--q2-radius);
  padding:1.5rem;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.q2-card:hover{
  border-color:var(--q2-navy);
  box-shadow:0 10px 26px rgba(8,30,69,.10);
  transform:translateY(-3px);
}
.q2-card h3{ margin-bottom:.5rem; }
.q2-card ul{
  margin:0; padding:0; list-style:none;
  color:var(--q2-muted); font-size:.975rem; line-height:1.5;
}
.q2-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  background:rgba(0,179,165,.12);
  color:var(--q2-teal-link);
  margin-bottom:1rem;
}
.q2-card-icon svg{ width:24px; height:24px; }

/* "Why" value props */
.q2-value-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px;
  background:var(--q2-navy); color:#fff; margin-bottom:1rem;
}
.q2-value-icon svg{ width:28px; height:28px; }

/* ---- Contact ---- */
.q2-contact-card{
  background:#fff; border:1px solid var(--q2-grey-soft);
  border-radius:var(--q2-radius); padding:1.75rem;
}
.q2-nap{ list-style:none; padding:0; margin:0; }
.q2-nap li{ display:flex; gap:.75rem; margin-bottom:.9rem; color:var(--q2-ink); }
.q2-nap svg{ width:20px; height:20px; flex:0 0 20px; color:var(--q2-teal-link); margin-top:3px; }
.q2-nap a{ color:var(--q2-ink); text-decoration:none; }
.q2-nap a:hover{ color:var(--q2-teal-deep); text-decoration:underline; }

.form-label{ font-weight:500; color:var(--q2-ink); }
.form-control{ border-color:var(--q2-grey-soft); border-radius:8px; padding:.7rem .85rem; }
.form-control:focus{
  border-color:var(--q2-teal-link);
  box-shadow:0 0 0 .2rem rgba(0,137,123,.18);
}
.q2-required{ color:#b3261e; }            /* used with text, not colour alone */
.form-text{ color:var(--q2-muted); }

/* Honeypot — visually hidden but not display:none (so bots fill it) */
.q2-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Form status live region */
.q2-status{ margin-top:1rem; }
.q2-status .alert{ margin-bottom:0; }

/* Map */
.q2-map{
  width:100%; height:auto; aspect-ratio:16/10;
  border:1px solid var(--q2-grey-soft); border-radius:var(--q2-radius);
  object-fit:cover; display:block;
}

/* ---- Footer ---- */
.q2-footer{
  background:var(--q2-navy-deep);
  color:rgba(255,255,255,.82);
  border-top:4px solid var(--q2-teal);
}
.q2-footer h2,.q2-footer h3{ color:#fff; }
.q2-footer a{ color:rgba(255,255,255,.88); text-decoration:none; }
.q2-footer a:hover,
.q2-footer a:focus-visible{ color:#fff; text-decoration:underline; }
.q2-footer .q2-footer-nav{ list-style:none; padding:0; margin:0; }
.q2-footer .q2-footer-nav li{ margin-bottom:.5rem; }
.q2-footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65);
  font-size:.9rem;
}

/* ---- Legal / content pages ---- */
.q2-prose{ max-width:72ch; }
.q2-prose h2{ margin-top:2.25rem; font-size:1.4rem; }
.q2-prose p, .q2-prose li{ color:var(--q2-ink); }
.q2-prose ul, .q2-prose ol{ padding-left:1.25rem; }
.q2-updated{ color:var(--q2-muted); font-size:.95rem; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .q2-card:hover{ transform:none; }
}