/* CSS RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--background-light);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea {
  font: inherit;
}

address {
  font-style: normal;
}

/* ROOT VARIABLES */
:root {
  --primary-dark: #212c42;
  --primary-blue: #374a93;
  --primary-blue-light: #4c62b3;
  --accent-orange: #df922f;
  --accent-orange-light: #e8a94f;
  --neutral-silver: #c0c0c0;
  --background-light: #f7f5f2;
  --text-dark: #1a1a1a;
  --text-light: #ffffff;
  --container-width: 1200px;
  --shadow-soft: 0 18px 50px rgba(33, 44, 66, 0.08);
  --border-soft: 1px solid rgba(33, 44, 66, 0.1);
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-dark);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.35rem;
  margin-bottom: 0;
}

h4 {
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
}

a:hover,
a:focus {
  color: var(--accent-orange);
  text-decoration: none;
}

ul {
  padding-left: 1.2rem;
}

/* GLOBAL LAYOUT */
.container {
  width: min(100% - 40px, var(--container-width));
  margin: 0 auto;
}

.section {
  padding: 88px 0;
}

.section-light {
  background: #ffffff;
}

.section-dark {
  background: var(--primary-dark);
}

.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark li {
  color: var(--text-light);
}

.section-heading {
  margin-bottom: 52px;
  text-align: left;
}

.section-heading.narrow {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
}

.section-heading h2,
.value-section h2,
.contact-grid h2 {
  margin-bottom: 1.25rem;
}

.section-heading > * + *,
.value-grid > div > * + *,
.contact-grid > div > * + * {
  margin-top: 0.95rem;
}

.section-heading > h2 + p,
.value-grid > div > h2 + p,
.contact-grid > div > h2 + p {
  margin-top: 0;
}

.service-card > * + *,
.pillar-card > * + *,
.pricing-tier > * + *,
.contact-form > * + *,
.value-highlight > * + * {
  margin-top: 0.95rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 999;
  background: #fff;
  color: var(--primary-dark);
  padding: 10px 14px;
  border-radius: 6px;
}

/* NAVIGATION */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(247, 245, 242, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.brand {
  display: inline-flex;
  color: var(--primary-dark);
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  height: 48px;
  width: auto;
}

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  padding-left: 0;
}

.site-nav a {
  color: var(--primary-dark);
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--accent-orange);
}

.nav-cta {
  color: #fff !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  width: 28px;
  height: 3px;
  background: var(--primary-dark);
  border-radius: 999px;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background-color: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-orange-light);
  border-color: var(--accent-orange-light);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue-light);
  color: #ffffff;
  transform: translateY(-1px);
}

/* HERO */
.hero {
  position: relative;
  padding: 120px 0 110px;
  background:
    linear-gradient(rgba(33, 44, 66, 0.58), rgba(33, 44, 66, 0.58)),
    url('/assets/images/handshake.jpg') center center / cover no-repeat;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.hero-grid-simple {
  grid-template-columns: 1fr;
  min-height: 420px;
  align-items: center;
}

.hero-content > * + * {
  margin-top: 1.2rem;
}

.hero-content-simple {
  max-width: 720px;
}

.hero-content-simple > * + * {
  margin-top: 1.2rem;
}

.hero-tagline {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.15;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 0;
}

.hero-text {
  max-width: 720px;
  font-size: 1.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero .hero-tagline,
.hero .hero-text {
  color: #ffffff;
}

.hero .hero-text {
  max-width: 640px;
}

/* REVIEW STRIP (now contains the customer reviews carousel below the strip row) */
.review-strip {
  background: #ffffff;
  border-bottom: var(--border-soft);
  padding: 36px 0 64px;
}

.review-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.review-stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.review-stars img {
  width: 24px;
  height: 24px;
  display: block;
}

.review-strip-text {
  margin: 0;
  font-weight: 600;
  color: var(--primary-dark);
}

.review-strip-cta {
  flex: 0 0 auto;
}

/* TRUST BAND */
.trust-strip {
  padding-top: 30px;
  padding-bottom: 30px;
  background: var(--background-light);
}

.trust-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.trust-stat {
  text-align: center;
}

.trust-stat-number {
  display: block;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1;
  font-weight: 800;
  color: var(--accent-orange);
  margin-bottom: 0.9rem;
}

.trust-stat p {
  margin: 0;
}

/* STAT / VALUE SOURCE CITATIONS */
.trust-source {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: rgba(26, 26, 26, 0.55);
  text-align: center;
}

.value-source {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.value-source a {
  color: #ffffff;
  font-weight: 600;
}

.value-source a:hover,
.value-source a:focus {
  color: var(--accent-orange-light);
}

/* CARDS (shared base) */
.service-card,
.pillar-card,
.pricing-tier,
.value-highlight,
.contact-form {
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.service-card h3,
.pillar-card h3,
.contact-form h3,
.pricing-header h3,
.value-highlight h3 {
  margin-bottom: 0;
}

.service-card,
.pillar-card {
  padding: 30px;
}

.featured-card {
  border-top: 5px solid var(--accent-orange);
}

/* COST SECTION */
.cost-section,
.approach-section {
  padding-top: 112px;
  padding-bottom: 112px;
}

.cost-section .section-heading,
.approach-section .section-heading {
  margin-bottom: 64px;
}

.impact-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.impact-band .impact-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 36px;
}

.impact-band .impact-block + .impact-block {
  border-left: 1px solid rgba(33, 44, 66, 0.1);
}

.impact-band .impact-block h3 {
  margin-bottom: 1rem;
}

/* APPROACH SECTION */
.approach-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.approach-grid .pillar-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  padding: 36px 32px;
}

.approach-grid .pillar-card h3 {
  color: #ffffff;
}

.approach-grid .pillar-card p {
  color: rgba(255, 255, 255, 0.88);
}

/* SERVICES SECTION */
.services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 36px;
}

.services-grid .service-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(33, 44, 66, 0.08);
  border-radius: 16px;
  box-shadow: none;
  padding: 34px 32px;
}

.services-grid .service-card.featured-card {
  border-top: 1px solid rgba(33, 44, 66, 0.08);
}

.services-grid .service-card h3 {
  margin-bottom: 0.85rem;
}

.services-grid .service-card p {
  color: rgba(26, 26, 26, 0.88);
}

/* VALUE SECTION */
.value-section {
  background: var(--primary-dark);
}

.value-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
}

.value-section h2,
.value-section p {
  color: #ffffff;
  text-align: left;
}

.value-highlight {
  padding: 34px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.value-number {
  display: block;
  margin-bottom: 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: #ffffff;
}

/* PRICING */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.pricing-column {
  padding: 28px;
  border-radius: 22px;
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.pricing-column-accent {
  background: var(--accent-orange);
}

.pricing-column h3,
.pricing-column h4,
.pricing-column p,
.pricing-column li,
.pricing-column span {
  color: #ffffff;
}

.pricing-header {
  margin-bottom: 22px;
}

.pricing-header > * + * {
  margin-top: 0.8rem;
}

.pricing-tier {
  padding: 22px;
  margin-bottom: 18px;
  color: var(--primary-dark);
}

.pricing-tier:last-of-type {
  margin-bottom: 10px;
}

.pricing-tier h4,
.pricing-tier span,
.pricing-tier p,
.pricing-tier li {
  color: var(--primary-dark);
}

.pricing-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pricing-tier ul {
  display: grid;
  gap: 8px;
}

.pricing-tier li::marker {
  color: var(--accent-orange);
}

/* Fix: bullet markers on the orange accent column must be white */
.pricing-column-accent .pricing-tier li::marker {
  color: #ffffff;
}

/* Most Popular badge inside accent column header */
.pricing-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

/* Featured tier: extra top padding clears the overlapping badge */
.pricing-tier-featured {
  position: relative;
}

/* Cancel the * + * spacing rule on the tier head — the badge is position: absolute
   and out of flow, so it should not count as a preceding sibling for spacing. */
.pricing-tier-featured > .pricing-tier-head {
  margin-top: 0;
}

/* Badge floats above the top border of the featured tier card */
.pricing-tier-featured .pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #ffffff;
  margin-bottom: 0;
}

/* CTA below pricing grid */
.pricing-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pricing-cta p {
  font-size: 1.05rem;
  color: rgba(26, 26, 26, 0.72);
}

.pricing-note {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* CONTACT / FORMS */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact-section {
  background: var(--background-light);
}

.contact-form {
  padding: 28px;
}

.form-group {
  margin-bottom: 18px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--primary-dark);
}

input,
textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(33, 44, 66, 0.2);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-dark);
}

input:focus,
textarea:focus {
  outline: 2px solid rgba(55, 74, 147, 0.25);
  border-color: var(--primary-blue);
}

.contact-details > * + * {
  margin-top: 0.75rem;
}

/* ABOUT SECTION */
.about-section {
  background: #ffffff;
}

.about-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  gap: 40px;
  align-items: start;
}

.about-copy > * + * {
  margin-top: 1rem;
}

.about-figure {
  margin: 0;
  align-self: start;
}

.about-photo {
  width: 100%;
  border-radius: 18px;
  border: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.about-caption {
  margin-top: 14px;
  text-align: center;
  color: var(--primary-dark);
}

.about-caption-name {
  display: block;
  font-weight: 700;
}

.about-caption-title {
  display: block;
  font-size: 0.95rem;
  color: rgba(33, 44, 66, 0.74);
}

/* FOOTER */
.site-footer {
  padding: 42px 0 28px;
  background: var(--primary-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 32px;
  align-items: start;
}

.footer-grid-two-col {
  grid-template-columns: 1.2fr 0.9fr;
}

.site-footer p,
.site-footer a {
  color: #ffffff;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--accent-orange-light);
}

.footer-brand {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.75rem;
}

.footer-heading {
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-links {
  display: grid;
  gap: 0.45rem;
  line-height: 1.5;
}

.footer-right {
  display: flex;
  justify-content: flex-end;
}

.footer-links-wrap {
  text-align: left;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 1rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus {
  opacity: 1;
  transform: translateY(-1px);
}

.footer-social img {
  width: 100%;
  height: 100%;
}

/* PRIVACY NOTICE */
.privacy-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background: rgba(33, 44, 66, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -10px 30px rgba(33, 44, 66, 0.18);
}

.privacy-notice.is-hidden {
  display: none;
}

.privacy-notice-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.privacy-notice-text {
  color: #ffffff;
  max-width: 900px;
}

.privacy-notice-btn {
  flex: 0 0 auto;
}

body.has-privacy-notice {
  padding-bottom: 114px;
}

/* THANK YOU PAGE */
.thank-you-page {
  min-height: calc(100vh - 220px);
  display: grid;
  align-items: center;
  padding: 72px 0;
}

.thank-you-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.thank-you-card {
  width: min(100%, 780px);
  padding: 56px 48px;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.thank-you-card h1 {
  margin-bottom: 1.25rem;
  color: var(--primary-dark);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.12;
}

.thank-you-card p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.thank-you-card p + p {
  margin-top: 1rem;
}

.thank-you-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.thank-you-card .urgent-note strong {
  color: var(--primary-dark);
}

/* ZOHO FORM STYLES */
.vt-zoho-form {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 28px !important;
  background: #ffffff !important;
  color: var(--text-dark) !important;
}

.vt-zoho-form * {
  box-sizing: border-box;
  direction: ltr;
}

.vt-zoho-form form {
  width: 100%;
}

.vt-zoho-form .zcwf_row {
  margin: 0 0 18px 0;
}

.vt-zoho-form .zcwf_row:last-of-type {
  margin-bottom: 0;
}

.vt-zoho-form .zcwf_col_lab,
.vt-zoho-form .zcwf_col_fld {
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.vt-zoho-form .zcwf_col_lab {
  margin-bottom: 8px;
}

.vt-zoho-form .zcwf_col_lab label {
  display: block;
  margin: 0;
  font-family: "Inter", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.3;
}

.vt-zoho-form .zcwf_col_fld input[type="text"],
.vt-zoho-form .zcwf_col_fld textarea,
.vt-zoho-form .zcwf_col_fld select,
.vt-zoho-form .zcwf_col_fld .zcwf_col_fld_slt {
  width: 100% !important;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(33, 44, 66, 0.2) !important;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-dark);
  font-family: "Inter", sans-serif !important;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  float: none;
  resize: vertical;
}

.vt-zoho-form .zcwf_col_fld textarea {
  min-height: 140px;
}

.vt-zoho-form .zcwf_col_fld input:focus,
.vt-zoho-form .zcwf_col_fld textarea:focus,
.vt-zoho-form .zcwf_col_fld select:focus,
.vt-zoho-form .zcwf_col_fld .zcwf_col_fld_slt:focus {
  outline: 2px solid rgba(55, 74, 147, 0.25);
  border-color: var(--primary-blue) !important;
}

.vt-zoho-form .zcwf_col_help,
.vt-zoho-form .zcwf_help_icon,
.vt-zoho-form .zcwf_tooltip_over,
.vt-zoho-form .zcwf_tooltip_ctn,
.vt-zoho-form .zcwf_privacy_txt {
  display: none !important;
}

.vt-zoho-form .wfrm_fld_dpNn {
  display: none !important;
}

.vt-hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

.vt-zoho-form .formsubmit,
.vt-zoho-form .zcwf_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-family: "Inter", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: none !important;
  white-space: nowrap;
  max-width: none;
}

.vt-zoho-form .formsubmit.zcwf_button {
  background: var(--accent-orange) !important;
  border-color: var(--accent-orange) !important;
  color: #ffffff !important;
  margin-right: 0;
}

.vt-zoho-form .formsubmit.zcwf_button:hover,
.vt-zoho-form .formsubmit.zcwf_button:focus {
  background: var(--accent-orange-light) !important;
  border-color: var(--accent-orange-light) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.vt-zoho-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* MEDIA QUERIES */
@media (max-width: 1024px) {
  .hero-grid,
  .value-grid,
  .contact-grid,
  .pricing-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-nav ul {
    gap: 18px;
  }

  .trust-band {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .review-strip-inner {
    flex-wrap: wrap;
  }

  .cost-section,
  .approach-section,
  .services-section {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .impact-band {
    grid-template-columns: 1fr;
  }

  .impact-band .impact-block + .impact-block {
    border-left: 0;
    border-top: 1px solid rgba(33, 44, 66, 0.1);
  }

  .approach-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .about-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-right {
    justify-content: flex-start;
  }

  .privacy-notice-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .privacy-notice-btn {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .header-inner {
    flex-wrap: wrap;
    min-height: auto;
    padding: 18px 0;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav {
    display: none;
    width: 100%;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0 4px;
  }

  .site-nav li {
    width: 100%;
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 8px 0;
  }

  .nav-cta {
    text-align: center;
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    padding-top: 64px;
  }

  .cost-section,
  .approach-section,
  .services-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cost-section .section-heading,
  .approach-section .section-heading,
  .services-section .section-heading {
    margin-bottom: 48px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .container {
    width: min(100% - 28px, var(--container-width));
  }

  .brand-logo {
    height: 38px;
  }

  .hero-actions,
  .pricing-tier-head {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .hero {
    padding: 96px 0 84px;
  }

  .review-strip-inner {
    gap: 14px;
  }

  .review-stars {
    width: 100%;
    justify-content: center;
  }

  .review-strip-text {
    width: 100%;
    text-align: center;
  }

  .review-strip-cta {
    width: 100%;
  }

  .impact-band .impact-block,
  .approach-grid .pillar-card {
    padding: 30px 24px;
  }

  .services-grid {
    gap: 24px;
  }

  .services-grid .service-card {
    padding: 26px 24px;
  }

  .about-section .section-heading {
    margin-bottom: 28px;
  }

  .about-body {
    gap: 22px;
  }

  body.has-privacy-notice {
    padding-bottom: 146px;
  }

  .thank-you-page {
    padding: 56px 0;
  }

  .thank-you-card {
    padding: 40px 24px;
    border-radius: 20px;
  }

  .thank-you-actions .btn {
    width: 100%;
  }

  .vt-zoho-form {
    padding: 24px !important;
  }

  .vt-zoho-form .formsubmit,
  .vt-zoho-form .zcwf_button {
    width: 100%;
  }
}

/* ==========================================================================
   v1.9.0 - SECURITY STACK PAGE & SOLUTIONS DROPDOWN NAV
   ========================================================================== */

/* Accessible visually-hidden helper */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* SOLUTIONS DROPDOWN NAV (desktop) */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 600;
  cursor: pointer;
  line-height: inherit;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--accent-orange);
}

.nav-dropdown-active > .nav-dropdown-toggle {
  color: var(--accent-orange);
}

.nav-dropdown-caret {
  width: 10px;
  height: 7px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 240px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 44, 66, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1100;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu li {
  list-style: none;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--primary-dark);
  font-weight: 600;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: var(--accent-orange);
}

.nav-dropdown-menu a[aria-current="page"] {
  color: var(--accent-orange);
}

/* SECURITY STACK PAGE: HERO */
.stack-hero {
  position: relative;
  padding: 110px 0 90px;
  background:
    linear-gradient(rgba(33, 44, 66, 0.72), rgba(33, 44, 66, 0.72)),
    url('/assets/images/datacenter.jpg') center center / cover no-repeat;
  color: #ffffff;
}

.stack-hero-inner {
  max-width: 880px;
  text-align: center;
}

.stack-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.stack-hero-icon img {
  width: 84px;
  height: 84px;
  filter: brightness(0) invert(1);
}

.stack-hero-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.stack-hero-subtitle {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
}

/* SECURITY STACK: INTRO */
.stack-intro-section {
  padding-top: 72px;
  padding-bottom: 56px;
}

.stack-intro-container {
  max-width: 820px;
}

.stack-intro-lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--primary-dark);
  font-weight: 500;
}

/* SECURITY STACK: LAYERS LAYOUT */
.stack-layers-section {
  padding-top: 56px;
  padding-bottom: 96px;
  background: var(--background-light);
}

.stack-layers-container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* TOC SIDEBAR (desktop) */
.stack-toc {
  position: sticky;
  top: 110px;
  align-self: start;
}

.stack-toc-heading {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(33, 44, 66, 0.55);
}

.stack-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.stack-toc-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.stack-toc-link:hover,
.stack-toc-link:focus {
  background: rgba(33, 44, 66, 0.05);
  color: var(--primary-dark);
}

.stack-toc-link.is-active {
  background: rgba(33, 44, 66, 0.1);
  color: var(--primary-dark);
}

.stack-toc-num {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(33, 44, 66, 0.5);
}

.stack-toc-link.is-active .stack-toc-num {
  color: var(--primary-dark);
}

.stack-toc-label {
  flex: 1 1 auto;
}

/* TOC MOBILE SELECT (hidden on desktop) */
.stack-toc-mobile {
  display: none;
}

.stack-toc-select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(33, 44, 66, 0.2);
  border-radius: 10px;
  background: #ffffff;
  color: var(--primary-dark);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23212c42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 44px;
}

.stack-toc-select:focus {
  outline: 2px solid rgba(55, 74, 147, 0.25);
  border-color: var(--primary-blue);
}

/* LAYER CARDS */
.stack-layers {
  display: grid;
  gap: 28px;
}

.stack-layer {
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 36px;
  scroll-margin-top: 110px;
}

.stack-layer-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}

.stack-layer-num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
}

.stack-layer-num-total {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 2px;
}

.stack-layer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(33, 44, 66, 0.06);
}

.stack-layer-icon img {
  width: 30px;
  height: 30px;
}

.stack-layer-titlewrap {
  min-width: 0;
}

.stack-layer-title {
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);
  margin-bottom: 0.35rem;
}

.stack-layer-subtitle {
  font-style: italic;
  color: rgba(33, 44, 66, 0.72);
  font-size: 1rem;
  margin: 0;
}

/* "WITHOUT THIS LAYER" CALLOUT */
.stack-callout {
  margin: 0 0 22px 0;
  padding: 22px 24px;
  background: rgba(223, 146, 47, 0.08);
  border-left: 4px solid var(--accent-orange);
  border-radius: 0 12px 12px 0;
}

.stack-callout-label {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-orange);
}

.stack-callout-text {
  margin: 0;
  color: var(--primary-dark);
  line-height: 1.6;
}

/* COLLAPSIBLE TOOLS LIST (native <details>) */
.stack-tools {
  border-top: 1px solid rgba(33, 44, 66, 0.08);
  padding-top: 18px;
}

.stack-tools-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-dark);
  list-style: none;
  user-select: none;
}

.stack-tools-summary::-webkit-details-marker {
  display: none;
}

.stack-tools-summary:hover,
.stack-tools-summary:focus-visible {
  color: var(--accent-orange);
}

.stack-tools-summary-label {
  font-size: 0.95rem;
}

.stack-tools-caret {
  width: 12px;
  height: 8px;
  color: currentColor;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.stack-tools[open] .stack-tools-caret {
  transform: rotate(180deg);
}

.stack-tools-list {
  margin: 16px 0 4px 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 12px;
}

.stack-tools-list li {
  color: var(--primary-dark);
  line-height: 1.55;
}

.stack-tools-list li::marker {
  color: var(--accent-orange);
}

.stack-tools-list strong {
  color: var(--primary-dark);
  font-weight: 700;
}

/* WHY THIS STACK */
.stack-why-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.stack-why-body {
  max-width: 820px;
  display: grid;
  gap: 1.1rem;
}

.stack-why-body p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* CTA CARD */
.stack-cta-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.stack-cta-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 44px;
  text-align: center;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.stack-cta-card h2 {
  margin-bottom: 1rem;
}

.stack-cta-card > p {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: rgba(33, 44, 66, 0.85);
  font-size: 1.05rem;
}

.stack-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* RESPONSIVE — STACK PAGE & DROPDOWN */
@media (max-width: 1024px) {
  .stack-layers-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stack-toc {
    display: none;
  }

  .stack-toc-mobile {
    display: block;
    position: sticky;
    top: 84px;
    z-index: 50;
    padding: 10px;
    margin: 0 -10px 8px -10px;
    background: var(--background-light);
    border-radius: 12px;
  }
}

@media (max-width: 820px) {
  /* Mobile dropdown becomes a nested accordion within the hamburger menu */
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 6px 0 0 14px;
    margin-top: 6px;
    min-width: 0;
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }

  .nav-dropdown-menu a {
    padding: 8px 0;
  }

  .stack-hero {
    padding: 80px 0 64px;
  }

  .stack-hero-icon img {
    width: 68px;
    height: 68px;
  }

  .stack-layer {
    padding: 28px 24px;
  }

  .stack-layer-head {
    grid-template-columns: auto auto;
    grid-template-areas:
      "num icon"
      "title title";
    gap: 14px 16px;
  }

  .stack-layer-num {
    grid-area: num;
  }

  .stack-layer-icon {
    grid-area: icon;
  }

  .stack-layer-titlewrap {
    grid-area: title;
  }

  .stack-cta-card {
    padding: 36px 24px;
  }
}

@media (max-width: 640px) {
  .stack-toc-mobile {
    top: 70px;
  }

  .stack-layer-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "icon"
      "title";
    gap: 14px;
  }

  .stack-callout {
    padding: 18px 20px;
  }

  .stack-cta-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   v1.9.1 - HOMEPAGE APPROACH SECTION CTA (links to security stack page)
   ========================================================================== */

.approach-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.approach-cta p {
  font-size: 1.05rem;
}

/* ==========================================================================
   v1.10.0 - REVIEWS CAROUSEL (lives inside the .review-strip section, top of homepage)
   ========================================================================== */

.reviews-carousel {
  position: relative;
  max-width: 920px;
  margin: 40px auto 0;
}

.reviews-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 22px;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.reviews-track:focus-visible {
  outline: 3px solid rgba(223, 146, 47, 0.55);
  outline-offset: 4px;
}

.review-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 40px 48px;
  background: var(--background-light);
  color: var(--primary-dark);
  border: 1px solid rgba(33, 44, 66, 0.1);
  /* border-left: 6px solid var(--accent-orange); */ /* removed: looked tacky */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-slide .review-stars {
  display: inline-flex;
  gap: 6px;
}

.review-slide .review-stars img {
  width: 20px;
  height: 20px;
  display: block;
}

.review-quote {
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--primary-dark);
}

.review-attribution {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(33, 44, 66, 0.12);
}

.review-attribution p {
  margin: 0;
  line-height: 1.4;
}

.review-name {
  font-weight: 700;
  color: var(--primary-dark);
}

.review-business {
  margin-top: 2px;
  font-size: 0.95rem;
}

/* CAROUSEL CONTROLS: arrows on the sides (desktop) */
.reviews-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(33, 44, 66, 0.15);
  background: #ffffff;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(33, 44, 66, 0.18);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  z-index: 2;
}

.reviews-control:hover,
.reviews-control:focus-visible {
  background: var(--accent-orange);
  color: #ffffff;
  border-color: var(--accent-orange);
  transform: translateY(-50%) scale(1.05);
}

.reviews-control svg {
  width: 18px;
  height: 18px;
}

.reviews-prev {
  left: -22px;
}

.reviews-next {
  right: -22px;
}

/* PAGINATION DOTS */
.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.reviews-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(33, 44, 66, 0.25);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease, width 0.18s ease;
}

.reviews-dot:hover,
.reviews-dot:focus-visible {
  background: rgba(223, 146, 47, 0.6);
}

.reviews-dot.is-active {
  background: var(--accent-orange);
  width: 28px;
  border-radius: 999px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .review-slide {
    padding: 36px 36px;
  }

  .reviews-prev {
    left: 8px;
  }

  .reviews-next {
    right: 8px;
  }
}

@media (max-width: 640px) {
  .reviews-carousel {
    margin-top: 28px;
  }

  .review-slide {
    padding: 28px 24px;
    gap: 16px;
    /* border-left-width: 5px; */ /* paired with the orange stripe, removed alongside it */
  }

  .review-quote {
    font-size: 1rem;
  }

  .reviews-control {
    width: 40px;
    height: 40px;
  }

  .reviews-prev {
    left: 4px;
  }

  .reviews-next {
    right: 4px;
  }
}

/* Honor users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    scroll-behavior: auto;
  }

  .reviews-dot,
  .reviews-control {
    transition: none;
  }
}

/* ==========================================================================
   v1.11.0 - LINK STYLE STANDARDIZATION
   --------------------------------------------------------------------------
   Standardized to two link patterns site-wide:
     - Light backgrounds: navy (--primary-dark) text, hover to --accent-orange
     - Dark backgrounds:  white text, hover to --accent-orange-light
   No orange-by-default links anywhere. No underline on hover anywhere.
   Changes were applied in place to the base `a` rule, .value-source a, and
   by removing redundant per-element overrides on .trust-source a,
   .review-business a, and .reviews-source a (now inherit from base).
   ========================================================================== */

/* ==========================================================================
   v1.11.1 - VALUE SECTION SOLID BACKGROUND
   --------------------------------------------------------------------------
   Replaced the dated 135deg blue-to-navy gradient on .value-section with
   solid --primary-dark. Modern editorial sites favor solid dark sections
   over diagonal gradients; the change is in place above on the .value-section
   rule.
   ========================================================================== */

/* ==========================================================================
   v1.11.2 - SECURITY STACK HERO IMAGE BACKGROUND
   --------------------------------------------------------------------------
   Replaced the dated 135deg gradient on .stack-hero with a real datacenter
   photograph (datacenter.jpg) plus a navy overlay at 72% opacity. The
   overlay is heavier than the homepage hero (which uses 58%) because the
   photo has bright overhead lighting that needs more masking to keep the
   white headline legible. Change applied in place above on the .stack-hero
   rule.
   ========================================================================== */

/* ==========================================================================
   v1.11.3 - SECURITY STACK CALLOUT SOURCE CITATIONS
   --------------------------------------------------------------------------
   Added .stack-callout-source for the small "Source: <link>" line under each
   "Without this layer" callout. Style is small, muted, and sits inside the
   tinted callout box. Link inherits navy-to-orange behavior from the base
   link rules.
   ========================================================================== */

.stack-callout-source {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: rgba(33, 44, 66, 0.6);
}

/* ==========================================================================
   v1.11.4 - REVIEWS CAROUSEL MOVED INTO REVIEW STRIP SECTION
   --------------------------------------------------------------------------
   Moved the reviews carousel from inside the "Why Small Businesses Choose
   Veldtech" section up into the .review-strip near the top of the homepage.
   The strip now contains both the original "Rated 5 Stars on Google" row
   (stars + headline + Read Our Reviews button) and the carousel below it.
   Removed dead CSS for .reviews-block, .reviews-block-heading, and
   .reviews-source (those wrapper / heading / footer-link elements no longer
   exist in the markup). Updated .review-strip padding and .reviews-carousel
   margin to give the carousel proper breathing room inside the strip section.
   ========================================================================== */

/* ==========================================================================
   v1.11.5 - REVIEW CARD BACKGROUND TINT
   --------------------------------------------------------------------------
   Changed .review-slide background from solid white (#fff) to var(--background-light)
   (#f7f5f2). The cards were blending into the white .review-strip section
   background; the cream tint now gives them visible separation while reusing
   an existing brand color rather than introducing a new one. Change applied
   in place above on the .review-slide rule.
   ========================================================================== */

/* ==========================================================================
   v1.11.6 - REMOVED ORANGE LEFT STRIPE FROM REVIEW CARDS
   --------------------------------------------------------------------------
   The 6px orange (var(--accent-orange)) left border on .review-slide read as
   tacky against the new cream background. Commented out in place on both the
   base .review-slide rule and the mobile breakpoint (which had a paired
   border-left-width: 5px override). Cards are now defined by a uniform 1px
   navy border on all four sides plus the cream background tint.
   ========================================================================== */

/* ==========================================================================
   v1.11.7 - SECURITY STACK TOC ACTIVE STATE — NAVY INSTEAD OF ORANGE
   --------------------------------------------------------------------------
   Reworked the .stack-toc-link active state on the security-stack page TOC
   sidebar. Removed the orange left border (and the base 3px transparent
   placeholder that reserved space for it). Changed the active background
   tint from rgba(223, 146, 47, 0.1) (orange) to rgba(33, 44, 66, 0.1)
   (navy at 10%, slightly stronger than the 5% navy used on hover).
   Active text and the "01/07" number both stay var(--primary-dark) instead
   of switching to orange. Result: a subtle navy highlight that reads as
   sophisticated rather than commercial, and reserves orange for the actual
   layer number badges and warning callouts in the page body.
   ========================================================================== */

/* ==========================================================================
   v1.11.8 - STACK TOOLS SUMMARY: KEYBOARD-ONLY FOCUS HIGHLIGHT
   --------------------------------------------------------------------------
   Changed .stack-tools-summary :focus to :focus-visible. Native <summary>
   elements retain focus after a mouse click, and the previous :focus rule
   was leaving the "What's in this layer" label orange after click-to-collapse
   until the user clicked elsewhere. With :focus-visible, the orange highlight
   only persists for keyboard-driven focus (Tab key), which is correct
   accessibility behavior. Mouse users now see orange only while hovering.
   ========================================================================== */

/* ==========================================================================
   v1.11.9 - SOLUTIONS DROPDOWN: KEYBOARD-ONLY FOCUS + REMOVED ORANGE BG
   --------------------------------------------------------------------------
   Two changes to the Solutions dropdown nav, applied site-wide:
     1) .nav-dropdown-toggle :focus changed to :focus-visible. Same fix as
        v1.11.8 — clicking the toggle was leaving it orange until focus moved
        elsewhere. Now mouse clicks don't leave a persistent focus state, and
        the .is-open selector still keeps the toggle orange while the menu is
        open (intentional).
     2) Removed the rgba(223, 146, 47, 0.1) light orange background from
        .nav-dropdown-menu a hover/focus and from the [aria-current="page"]
        rule. Menu items now show only orange text on hover/keyboard-focus
        and orange text for the current page, with no background tint.
        Cleaner, less commercial. Also removed the mobile breakpoint rule
        that was specifically suppressing those backgrounds (now redundant).
        Also changed menu item :focus to :focus-visible for consistency.
   ========================================================================== */

/* ==========================================================================
   v1.12.0 - MANAGED IT SERVICES PAGE (Total Care)
   --------------------------------------------------------------------------
   Styles for the new managed-it-services.html page. Adds:
     - .msp-hero: full-width hero with field-engineer image, navy overlay
     - .msp-why-grid + .msp-why-card: 2x2 differentiator cards
     - .industry-grid + .industry-card: three-vertical industry display
       (Construction, Landscaping, Healthcare) with icon, paragraph, bullets
     - .snapshot-list: Parachute-style inclusion list
     - .tier-grid + .tier-card: Standard vs Premium pricing comparison
     - .billing-band: reuses .impact-band layout for billing/contract cards
     - .vendor-strip: horizontal stack of vendor names on dark background
     - .compliance-line: HIPAA / PCI strip
     - .faq-list + .faq-item: native <details> accordion mirroring the
       .stack-tools pattern for visual consistency
     - .msp-cta-card: final CTA card
   Reuses existing .btn, .container, .section, .impact-band, and
   .section-heading patterns. New media queries at 1024px, 820px, 640px.
   ========================================================================== */

/* MSP HERO */
.msp-hero {
  position: relative;
  padding: 130px 0 110px;
  background:
    linear-gradient(rgba(33, 44, 66, 0.72), rgba(33, 44, 66, 0.72)),
    url('/assets/images/field-engineer.jpg') center center / cover no-repeat;
  color: #ffffff;
}

.msp-hero-inner {
  max-width: 820px;
}

.msp-hero-title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.2rem;
}

.msp-hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.8rem;
}

.msp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* MSP WHY-VELDTECH GRID */
.msp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.msp-why-card {
  padding: 32px 30px;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.msp-why-card h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-dark);
}

.msp-why-card p {
  color: rgba(33, 44, 66, 0.85);
  line-height: 1.6;
}

.msp-why-card a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: rgba(33, 44, 66, 0.3);
  text-underline-offset: 3px;
}

.msp-why-card a:hover,
.msp-why-card a:focus {
  color: var(--accent-orange);
  text-decoration-color: var(--accent-orange);
}

/* INDUSTRY GRID */
.msp-industries-section {
  background: var(--background-light);
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.industry-card {
  padding: 36px 30px;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.industry-icon {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(33, 44, 66, 0.06);
  margin-bottom: 1.2rem;
}

.industry-icon img {
  width: 44px;
  height: 44px;
}

.industry-card h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-dark);
}

.industry-card > p {
  color: rgba(33, 44, 66, 0.85);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.industry-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.industry-card li {
  position: relative;
  padding-left: 24px;
  color: var(--primary-dark);
  line-height: 1.5;
  font-size: 0.98rem;
}

.industry-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent-orange);
  opacity: 0.85;
}

/* SNAPSHOT LIST (what's in Total Care) */
.snapshot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  border: var(--border-soft);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 36px;
}

.snapshot-list li {
  position: relative;
  padding: 0 0 0 38px;
}

.snapshot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-orange);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.snapshot-list h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--primary-dark);
}

.snapshot-list p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(33, 44, 66, 0.78);
  margin: 0;
}

/* TIER GRID (Standard / Premium) */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.tier-card {
  position: relative;
  padding: 36px 32px;
  background: #ffffff;
  border: 1px solid rgba(33, 44, 66, 0.12);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.tier-card-featured {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.tier-card-featured h3,
.tier-card-featured .tier-summary,
.tier-card-featured .tier-price-amount,
.tier-card-featured .tier-price-unit,
.tier-card-featured .tier-features li {
  color: #ffffff;
}

.tier-card-featured .tier-features li::before {
  background: var(--accent-orange);
}

.tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-orange);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.tier-card-head {
  margin-bottom: 1.4rem;
}

.tier-card-head h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0.8rem;
}

.tier-price-amount {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1;
}

.tier-price-unit {
  font-size: 0.95rem;
  color: rgba(33, 44, 66, 0.7);
  font-weight: 500;
}

.tier-summary {
  color: rgba(33, 44, 66, 0.82);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
}

.tier-features {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}

.tier-features li {
  position: relative;
  padding-left: 26px;
  color: var(--primary-dark);
  line-height: 1.5;
  font-size: 0.98rem;
}

.tier-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--primary-dark);
}

.tier-footnote {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(33, 44, 66, 0.1);
  text-align: center;
  font-size: 0.95rem;
  color: rgba(33, 44, 66, 0.75);
  line-height: 1.6;
}

/* BILLING BAND — variant of impact-band with same structure */
.billing-band .impact-block h3 {
  color: var(--primary-dark);
  margin-bottom: 0.85rem;
}

.billing-band .impact-block p {
  color: rgba(33, 44, 66, 0.82);
  line-height: 1.6;
}

/* OUR STACK / VENDOR STRIP */
.msp-stack-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.vendor-strip {
  list-style: none;
  padding: 0;
  margin: 36px 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}

.vendor-strip li {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.msp-stack-note {
  text-align: center;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 12px;
}

.msp-stack-note a {
  color: var(--accent-orange);
  text-decoration: underline;
  text-decoration-color: rgba(223, 146, 47, 0.4);
  text-underline-offset: 3px;
}

.msp-stack-note a:hover,
.msp-stack-note a:focus {
  color: var(--accent-orange-light);
  text-decoration-color: var(--accent-orange-light);
}

/* COMPLIANCE STRIP */
.msp-compliance-section {
  padding: 36px 0;
  background: var(--background-light);
}

.compliance-line {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: 0.01em;
}

/* FAQ ACCORDION */
.msp-faq-container {
  max-width: 880px;
  margin: 0 auto;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-item[open] {
  box-shadow: var(--shadow-soft);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-dark);
  user-select: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover,
.faq-summary:focus-visible {
  color: var(--accent-orange);
}

.faq-caret {
  width: 12px;
  height: 8px;
  color: currentColor;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.faq-item[open] .faq-caret {
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 24px 22px;
  color: rgba(33, 44, 66, 0.85);
  line-height: 1.65;
}

.faq-body p {
  margin: 0;
}

/* MSP CTA */
.msp-cta-section {
  background: var(--background-light);
  padding-top: 88px;
  padding-bottom: 88px;
}

.msp-cta-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 44px;
  text-align: center;
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.msp-cta-card h2 {
  margin-bottom: 1rem;
}

.msp-cta-card > p {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: rgba(33, 44, 66, 0.85);
  font-size: 1.05rem;
}

.msp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* MSP RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .industry-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }

  .snapshot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .msp-why-grid {
    gap: 22px;
  }
}

@media (max-width: 820px) {
  .msp-hero {
    padding: 96px 0 80px;
  }

  .msp-why-grid {
    grid-template-columns: 1fr;
  }

  .tier-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .billing-band {
    grid-template-columns: 1fr;
  }

  .billing-band .impact-block + .impact-block {
    border-left: 0;
    border-top: 1px solid rgba(33, 44, 66, 0.1);
  }
}

@media (max-width: 640px) {
  .snapshot-list {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .msp-cta-card {
    padding: 38px 24px;
  }

  .industry-card,
  .msp-why-card {
    padding: 28px 24px;
  }

  .tier-card {
    padding: 30px 24px;
  }

  .vendor-strip li {
    font-size: 0.9rem;
    padding: 8px 16px;
  }

  .faq-summary {
    padding: 18px 20px;
    font-size: 1rem;
  }

  .faq-body {
    padding: 0 20px 20px;
  }
}

/* ==========================================================================
   v1.12.1 - CYBERSECURITY PAGE PILLAR GRID (light-context variant)
   --------------------------------------------------------------------------
   The "What We Protect" pillars on cybersecurity.html sit on a light section
   directly below a dark hero (so the page does not stack two dark sections in
   a row). The existing .approach-grid rules are scoped to the dark navy
   approach-section on the homepage and would render the cards as
   semi-transparent white-on-navy. This new .cyber-pillars-grid renders the
   pillars as standard white cards on the light section, using the base
   .pillar-card styling without the dark-context overrides.
   ========================================================================== */

.cyber-pillars-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.cyber-pillars-grid .pillar-card {
  padding: 32px 30px;
}

.cyber-pillars-grid .pillar-card h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-dark);
}

.cyber-pillars-grid .pillar-card p {
  color: rgba(33, 44, 66, 0.85);
  line-height: 1.6;
}

.cyber-pricing-section .section-heading p a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: rgba(33, 44, 66, 0.3);
  text-underline-offset: 3px;
}

.cyber-pricing-section .section-heading p a:hover,
.cyber-pricing-section .section-heading p a:focus {
  color: var(--accent-orange);
  text-decoration-color: var(--accent-orange);
}

@media (max-width: 1024px) {
  .cyber-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cyber-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   v1.12.2 - HOMEPAGE SPLIT-SCREEN PATHS SECTION (Cybersecurity / Managed IT)
   --------------------------------------------------------------------------
   Added for the slimmed homepage (index.html v1.12.0). Lives between the
   About section and the Get in Touch form. Two edge-to-edge full-bleed
   panels under a centered intro: navy "Cybersecurity" panel on the left,
   white "Managed IT" panel on the right, each with a 64px icon, heading,
   short description, and an orange-accented inline CTA link. Deliberately
   not card-styled (no border, no shadow, no border-radius) so the section
   reads as one bold horizontal split rather than two more cards.
   Stacks vertically below 820px.
   ========================================================================== */

.homepage-paths-section {
  padding: 88px 0 0;
  background: var(--background-light);
}

.homepage-paths-section .section-heading {
  margin-bottom: 56px;
}

.homepage-paths-section .section-heading.narrow {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.paths-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.path-panel {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.path-cyber {
  background: var(--primary-dark);
  color: #ffffff;
}

.path-msp {
  background: #ffffff;
  color: var(--primary-dark);
  border-left: 1px solid rgba(33, 44, 66, 0.1);
}

.path-icon {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.path-cyber .path-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.path-cyber .path-icon img {
  width: 56px;
  height: 56px;
  filter: brightness(0) invert(1);
}

.path-msp .path-icon {
  background: rgba(33, 44, 66, 0.06);
}

.path-msp .path-icon img {
  width: 56px;
  height: 56px;
}

.path-panel h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.path-cyber h3 {
  color: #ffffff;
}

.path-msp h3 {
  color: var(--primary-dark);
}

.path-panel p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
  max-width: 460px;
}

.path-cyber p {
  color: rgba(255, 255, 255, 0.88);
}

.path-msp p {
  color: rgba(33, 44, 66, 0.85);
}

.path-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-orange);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.path-link:hover,
.path-link:focus {
  color: var(--accent-orange-light);
  border-bottom-color: var(--accent-orange-light);
}

@media (max-width: 820px) {
  .paths-split {
    grid-template-columns: 1fr;
  }

  .path-panel {
    padding: 60px 40px;
  }

  .path-msp {
    border-left: 0;
    border-top: 1px solid rgba(33, 44, 66, 0.1);
  }
}

@media (max-width: 640px) {
  .path-panel {
    padding: 48px 24px;
  }

  .path-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1.2rem;
  }

  .path-cyber .path-icon img,
  .path-msp .path-icon img {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   v1.12.3 - HOMEPAGE SECTION RHYTHM, COHESION, AND PATHS-CTA UNIFICATION
   --------------------------------------------------------------------------
   Three coordinated changes addressing background blending, padding
   inconsistency, and the width mismatch on the Paths CTA section.

   1) Background rhythm (alternating, no two adjacent sections share a bg):
        Hero (dark) -> Reviews (white) -> Why Veldtech (cream) ->
        About (now WHITE, was cream) -> Paths CTA (cream heading band +
        full-bleed split panels) -> Contact (now CREAM, was white)
      Result: every section visually distinct from neighbors.

   2) Padding normalization on .services-section: dropped from 112px/112px
      back to the .section default of 88px/88px. The 112px was a relic from
      when this section was sandwiched between the now-removed dense Cost
      and Approach blocks, and is no longer justified by neighbors. Removed
      .services-section from both the padding rule and the section-heading
      margin-bottom 64px rule (heading falls back to the default 52px).
      Removed the .about-section .section-heading margin-bottom 36px override
      so it also falls back to the default 52px.

   3) Paths CTA width mismatch: the section's heading was contained to 1200px
      while the panels went full bleed, creating the disjointed look.
      Heading's .section-heading.narrow modifier is overridden inside
      .homepage-paths-section to be horizontally centered (margin-left auto,
      margin-right auto, text-align center) so the heading sits symmetrically
      above the panel split rather than hugging the left third of the
      viewport. The section keeps its cream background: an earlier attempt
      to unify the section as full-bleed dark navy made the heading band
      visually merge with the dark Cybersecurity panel below, creating an
      asymmetric "dark blob on the left, dark-to-white transition on the
      right" effect. Cream heading band contrasts with both panels (dark
      and white) so the heading reads as a clear horizontal band above the
      panel split.
   ========================================================================== */