/* Q-Vision Solutions — layout. Depends on qvs-tokens.css. */

/* Header ------------------------------------------------------------------ */
.qvs-wordmark {
  display: flex; align-items: baseline; gap: 0.1em;
  text-decoration: none; margin-right: auto;
  font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.qvs-wordmark__q { color: var(--qvs-teal); font-size: 1.6rem; }
.qvs-wordmark__rest { color: var(--qvs-navy); font-size: 1.6rem; }
.qvs-wordmark__sub {
  color: var(--qvs-grey); font-size: 0.7rem; letter-spacing: 0.18em;
  font-weight: 600; margin-left: 0.4em;
}
.qvs-nav__list a[aria-current="page"] { color: var(--qvs-teal); text-decoration: underline; }

/* Hero -------------------------------------------------------------------- */
.qvs-hero h1 { max-width: 16ch; }
.qvs-hero__sub { color: var(--qvs-grey); max-width: 62ch; }
.qvs-hero__actions { margin-top: var(--qvs-space-8); }
.qvs-hero--sub { padding-bottom: var(--qvs-space-12); }
.qvs-hero--sub h1 { max-width: 22ch; }
.qvs-hero--q1 { border-top: 5px solid var(--qvs-q1); }
.qvs-hero--q2 { border-top: 5px solid var(--qvs-q2); }
.qvs-hero--q3 { border-top: 5px solid var(--qvs-q3); }
.qvs-hero--q4 { border-top: 5px solid var(--qvs-q4); }

.qvs-narrow { max-width: 74ch; }

/* Grids ------------------------------------------------------------------- */
.qvs-grid { display: grid; gap: var(--qvs-space-6); margin-top: var(--qvs-space-8); }
.qvs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.qvs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qvs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.qvs-card h3 { font-size: var(--qvs-text-xl); margin-bottom: var(--qvs-space-3); }
.qvs-card h3 a { color: var(--qvs-navy); text-decoration: none; }
.qvs-card h3 a:hover { color: var(--qvs-teal); text-decoration: underline; }
.qvs-card p { font-size: var(--qvs-text-sm); margin-bottom: var(--qvs-space-3); }
.qvs-card__focus, .qvs-card__vis { color: var(--qvs-grey); }
.qvs-card__more { margin-bottom: 0; font-weight: 600; }
.qvs-pillar h3 { font-size: 1.35rem; }
.qvs-pillar p { font-size: var(--qvs-text-base); }

.qvs-aud h3 { font-size: 1.1rem; margin-bottom: var(--qvs-space-2); }
.qvs-aud p { font-size: var(--qvs-text-sm); color: var(--qvs-grey); margin: 0; }

/* Steps ------------------------------------------------------------------- */
.qvs-steps {
  list-style: none; padding: 0; margin: var(--qvs-space-8) 0 0;
  display: grid; gap: var(--qvs-space-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.qvs-step__n {
  display: block; font-size: 2.2rem; font-weight: 700;
  color: var(--qvs-teal); line-height: 1; margin-bottom: var(--qvs-space-2);
}
.qvs-step h3 { font-size: 1.15rem; margin-bottom: var(--qvs-space-2); }
.qvs-step p { font-size: var(--qvs-text-sm); color: var(--qvs-grey); margin: 0; }

/* Lists ------------------------------------------------------------------- */
.qvs-method, .qvs-check, .qvs-std, .qvs-related { padding-left: 0; list-style: none; }
.qvs-method li, .qvs-check li, .qvs-std li {
  position: relative; padding-left: var(--qvs-space-6);
  margin-bottom: var(--qvs-space-3); max-width: var(--qvs-measure);
}
.qvs-method li::before, .qvs-check li::before, .qvs-std li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--qvs-teal);
}
.qvs-std li::before { border-radius: 1px; background: var(--qvs-navy); }
.qvs-numbered { padding-left: var(--qvs-space-6); }
.qvs-numbered li { margin-bottom: var(--qvs-space-3); max-width: var(--qvs-measure); }
.qvs-related li { margin-bottom: var(--qvs-space-2); font-weight: 600; }

.qvs-pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--qvs-space-3); margin-top: var(--qvs-space-6); }
.qvs-pills li {
  background: var(--qvs-teal-wash); color: var(--qvs-navy);
  border-radius: 999px; padding: var(--qvs-space-2) var(--qvs-space-4);
  font-size: var(--qvs-text-sm); font-weight: 600;
}

.qvs-note {
  font-size: var(--qvs-text-sm); color: var(--qvs-grey);
  border-left: 3px solid var(--qvs-rule); padding-left: var(--qvs-space-4);
  max-width: var(--qvs-measure);
}

/* Quote / contact --------------------------------------------------------- */
.qvs-quote p { margin-bottom: var(--qvs-space-3); }
.qvs-quote footer { font-style: normal; font-size: var(--qvs-text-sm);
  color: var(--qvs-grey); font-weight: 600; }

.qvs-contact-card {
  background: var(--qvs-teal-wash); border-radius: var(--qvs-radius-lg);
  padding: var(--qvs-space-8); margin-bottom: var(--qvs-space-12);
}
.qvs-contact-card h2 { margin-top: 0; }
.qvs-contact-email { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--qvs-space-2); }
.qvs-contact-email a { color: var(--qvs-navy); }

.qvs-cta h2 { max-width: 20ch; }
.qvs-cta .qvs-lead { color: rgba(255,255,255,0.85); max-width: 60ch; }

section h2 { margin-top: var(--qvs-space-12); }
section h2:first-of-type { margin-top: 0; }
.qvs-hero h1 { margin-top: 0; }

/* Footer ------------------------------------------------------------------ */
.qvs-footer__grid {
  display: grid; gap: var(--qvs-space-8);
  grid-template-columns: 2fr 1fr 1fr; margin-bottom: var(--qvs-space-8);
}
.qvs-footer__blurb { color: rgba(255,255,255,0.75); font-size: var(--qvs-text-sm); max-width: 46ch; }
.qvs-footer__h { font-size: var(--qvs-text-sm); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--qvs-teal-light); margin-bottom: var(--qvs-space-3); }
.qvs-footer__links { list-style: none; padding: 0; margin: 0; display: block; }
.qvs-footer__links li { margin-bottom: var(--qvs-space-2); }
.qvs-footer__links a { font-size: var(--qvs-text-sm); }
.qvs-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--qvs-space-6);
  color: rgba(255,255,255,0.6); font-size: var(--qvs-text-xs); max-width: 80ch;
}

@media (max-width: 860px) {
  .qvs-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .qvs-hero h1, .qvs-hero--sub h1 { max-width: none; }
  .qvs-grid { gap: var(--qvs-space-4); }
}