:root {
  --navy-950: #050b14;
  --navy-900: #07111f;
  --navy-850: #0a1728;
  --navy-800: #0d1d31;
  --charcoal: #101722;
  --slate: #94a3b8;
  --slate-light: #cbd5e1;
  --white: #f8fafc;
  --blue: #1f8fff;
  --blue-strong: #0077ff;
  --blue-soft: rgba(31, 143, 255, 0.15);
  --border: rgba(148, 163, 184, 0.18);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
  background: var(--navy-950);
  line-height: 1.6;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 10px 14px;
  background: var(--blue);
  color: var(--white);
  border-radius: 10px;
}

.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 11, 20, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  transition: box-shadow 180ms ease, background 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(5, 11, 20, 0.95);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

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

.brand {
  display: flex;
  align-items: center;
  min-width: 180px;
}

.brand-logo {
  width: 220px;
  max-height: 62px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--slate-light);
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-link {
  position: relative;
  transition: color 160ms ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  cursor: pointer;
}

.nav-toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--white);
  border-radius: 99px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  color: var(--white);
  box-shadow: 0 16px 40px rgba(0, 119, 255, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 18px 52px rgba(0, 119, 255, 0.34);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
  color: var(--white);
}

.btn-secondary:hover {
  border-color: rgba(31, 143, 255, 0.55);
  background: rgba(31, 143, 255, 0.12);
}

.btn-ghost {
  color: var(--white);
  border-color: rgba(31, 143, 255, 0.5);
  background: rgba(31, 143, 255, 0.08);
}

.btn-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.88rem;
}

.section {
  padding: 96px 0;
  background: var(--navy-950);
}

.section-dark {
  background:
    radial-gradient(circle at 18% 20%, rgba(31, 143, 255, 0.16), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(0, 119, 255, 0.15), transparent 32%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}

.section-muted {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-850));
  border-block: 1px solid rgba(148, 163, 184, 0.1);
}

.eyebrow {
  margin: 0 0 14px;
  color: #7fc1ff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  letter-spacing: -0.04em;
  line-height: 1.05;
}

h1 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(2.45rem, 3.75vw, 3.95rem);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 4.2vw, 3.45rem);
}

h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

p {
  color: var(--slate-light);
}

.hero {
  min-height: calc(68vh - 80px);
  display: flex;
  align-items: flex-start;
  padding: 78px 0 30px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: center;
  gap: 34px;
}

.hero-subtitle {
  max-width: 680px;
  margin-bottom: 18px;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.hero-area-note {
  margin: -6px 0 18px;
  color: var(--slate-light);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

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

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-row span {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--slate-light);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  min-height: 400px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 14px;
  border: 1px solid rgba(31, 143, 255, 0.22);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 70% 15%, rgba(31, 143, 255, 0.24), transparent 34%);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
  pointer-events: none;
}

.visual-card,
.visual-tile {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background: rgba(7, 17, 31, 0.78);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.visual-card-large {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(31, 143, 255, 0.08), rgba(7, 17, 31, 0.82)),
    radial-gradient(circle at 78% 22%, rgba(31, 143, 255, 0.3), transparent 28%);
}

.visual-kicker {
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.14);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.visual-card-large strong {
  max-width: 440px;
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.visual-card-large p {
  max-width: 420px;
  margin-bottom: 0;
}

.visual-tile {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}

.visual-tile p {
  margin: 20px 0 0;
  color: var(--white);
  font-weight: 800;
  line-height: 1.16;
}

.tile-icon {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #9fd2ff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.camera-tile {
  grid-column: 1 / 4;
  grid-row: 4 / 6;
}

.network-tile {
  grid-column: 4 / 7;
  grid-row: 4 / 6;
}

.phone-tile {
  grid-column: 1 / 4;
  grid-row: 6 / 7;
}

.access-tile {
  grid-column: 4 / 7;
  grid-row: 6 / 7;
}

.service-strip {
  padding: 24px 0;
  background: rgba(7, 17, 31, 0.98);
  border-block: 1px solid rgba(148, 163, 184, 0.12);
}

.service-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.strip-item {
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 15px;
  color: var(--slate-light);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 700;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.strip-item:hover {
  color: var(--white);
  border-color: rgba(31, 143, 255, 0.45);
  background: rgba(31, 143, 255, 0.09);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 44px;
}

.section-heading p {
  max-width: 720px;
  font-size: 1.05rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  min-height: 300px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(31, 143, 255, 0.45);
  background: linear-gradient(180deg, rgba(31, 143, 255, 0.1), rgba(255, 255, 255, 0.025));
}

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 14px;
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.14);
  font-weight: 900;
}

.service-card p {
  min-height: 96px;
}

.service-card a {
  display: inline-flex;
  color: #8fcbff;
  font-weight: 800;
}

.service-card a:hover {
  color: var(--white);
}

.split-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: 54px;
  align-items: start;
}

.why-card,
.contact-form,
.area-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.why-card {
  padding: 32px;
}

.check-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  color: var(--slate-light);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(31, 143, 255, 0.1);
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.industry-item {
  min-height: 110px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 15%, rgba(31, 143, 255, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-weight: 850;
}

.section-area {
  padding-top: 0;
}

.area-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px;
  background:
    radial-gradient(circle at 75% 50%, rgba(31, 143, 255, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
}

.area-card p {
  margin-bottom: 0;
}

.contact-section {
  background:
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.contact-actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.contact-link {
  width: fit-content;
  color: #9fd2ff;
  font-weight: 850;
}

.contact-link:hover {
  color: var(--white);
}

.contact-form {
  padding: 28px;
}

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

.form-row label {
  display: block;
  margin-bottom: 7px;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  outline: none;
  padding: 13px 14px;
  color: var(--white);
  background: rgba(5, 11, 20, 0.68);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

select {
  color-scheme: dark;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(31, 143, 255, 0.75);
  box-shadow: 0 0 0 4px rgba(31, 143, 255, 0.14);
}

.form-submit {
  width: 100%;
  border: 0;
}

.form-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: #9fd2ff;
  font-size: 0.92rem;
  font-weight: 700;
}

.site-footer {
  padding: 62px 0 28px;
  background: #040913;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr;
  gap: 42px;
}

.footer-logo {
  width: 220px;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 18px;
}

.site-footer h3 {
  margin-bottom: 18px;
  font-size: 1rem;
  letter-spacing: 0;
}

.site-footer a {
  display: block;
  margin-bottom: 10px;
  color: var(--slate-light);
  font-weight: 650;
}

.site-footer a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--slate);
  font-size: 0.9rem;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

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


@media (min-width: 1180px) {
  .hero-copy h1 {
    max-width: 780px;
  }

  .hero-subtitle {
    max-width: 650px;
  }
}

@media (min-width: 1041px) and (max-height: 820px) {
  .hero {
    padding-top: 62px;
    padding-bottom: 24px;
  }

  .hero-visual {
    min-height: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

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

@media (max-width: 1040px) {
  .hero-grid,
  .split-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding: 64px 0 48px;
  }

  .hero-visual {
    min-height: 520px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-strip-grid,
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .header-inner {
    min-height: 74px;
  }

  .brand-logo {
    width: 182px;
  }

  .nav-toggle {
    display: block;
  }

  .primary-nav {
    position: fixed;
    inset: 76px 18px auto 18px;
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(5, 11, 20, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .primary-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link,
  .nav-cta {
    width: 100%;
    padding: 12px 14px;
    justify-content: flex-start;
  }

  .nav-link::after {
    display: none;
  }

  .hero {
    padding-top: 52px;
  }

  .hero-actions,
  .area-card,
  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .area-card {
    display: grid;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .hero-area-note {
    font-size: 0.9rem;
  }

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

  .section {
    padding: 72px 0;
  }

  .hero-visual {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .visual-card-large,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    grid-column: auto;
    grid-row: auto;
  }

  .services-grid,
  .service-strip-grid,
  .industry-grid,
  .two-columns {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: auto;
  }

  .service-card p {
    min-height: auto;
  }
}


/* ---------------------------------------------------------
   ITTS v3.3 refinement pass
   Goal: make the desktop hero land higher in the viewport,
   keep CTAs above the fold, and preserve the strong mobile view.
--------------------------------------------------------- */
.hero-contact-line {
  display: none;
}

@media (min-width: 1041px) {
  .hero {
    min-height: calc(100svh - 80px);
    padding: clamp(28px, 4.2vh, 44px) 0 42px;
    align-items: flex-start;
  }

  .hero-grid {
    align-items: start;
    gap: clamp(34px, 4vw, 62px);
  }

  .hero-copy {
    padding-top: clamp(14px, 2vh, 28px);
  }

  .hero .eyebrow {
    margin-bottom: 8px;
  }

  .hero-area-note {
    margin: 0 0 22px;
    font-size: 0.95rem;
  }

  .hero-copy h1 {
    max-width: 650px;
    margin-bottom: 20px;
    font-size: clamp(3rem, 4.05vw, 4.15rem);
    line-height: 0.99;
  }

  .hero-subtitle {
    max-width: 650px;
    margin-bottom: 22px;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.5;
  }

  .hero-actions {
    margin-bottom: 12px;
  }

  .hero-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    max-width: 650px;
    margin: 0 0 18px;
    color: var(--slate-light);
    font-size: 0.91rem;
    font-weight: 800;
  }

  .hero-contact-line a {
    color: #9fd2ff;
  }

  .hero-contact-line a:hover {
    color: var(--white);
  }

  .hero-contact-line span {
    color: var(--slate-light);
  }

  .trust-row span {
    padding: 7px 11px;
  }

  .hero-visual {
    min-height: 430px;
    padding: 16px;
    gap: 12px;
    border-radius: 30px;
  }

  .visual-card-large {
    padding: 22px;
  }

  .visual-card-large strong {
    font-size: clamp(1.7rem, 2.2vw, 2.25rem);
  }

  .visual-tile {
    min-height: 112px;
    padding: 15px;
  }
}

@media (min-width: 1041px) and (max-height: 850px) {
  .hero {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .hero-copy {
    padding-top: 8px;
  }

  .hero-area-note {
    margin-bottom: 16px;
  }

  .hero-copy h1 {
    max-width: 610px;
    margin-bottom: 16px;
    font-size: clamp(2.65rem, 3.65vw, 3.65rem);
  }

  .hero-subtitle {
    max-width: 600px;
    margin-bottom: 16px;
    font-size: 0.98rem;
  }

  .hero-actions .btn {
    min-height: 44px;
    padding-inline: 18px;
  }

  .hero-contact-line {
    margin-bottom: 12px;
    font-size: 0.86rem;
  }

  .trust-row span {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .hero-visual {
    min-height: 382px;
    padding: 14px;
    gap: 10px;
  }

  .visual-card-large {
    padding: 20px;
  }

  .visual-card-large strong {
    font-size: clamp(1.45rem, 2.05vw, 2rem);
  }

  .visual-tile {
    min-height: 96px;
    padding: 13px;
  }
}

@media (min-width: 1280px) and (min-height: 900px) {
  .hero {
    padding-top: 54px;
  }

  .hero-copy {
    padding-top: 26px;
  }
}

@media (max-width: 860px) {
  .hero-contact-line {
    display: none;
  }
}


/* ---------------------------------------------------------
   ITTS v3.4 refinement pass
   Goal: improve official logo legibility without disturbing the
   approved v3.3 hero balance. DNS/SSL/site structure unchanged.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .header-inner {
    min-height: 92px;
  }

  .brand {
    min-width: 270px;
  }

  .brand-logo {
    width: clamp(255px, 18vw, 286px);
    max-height: 78px;
  }

  .primary-nav {
    gap: 22px;
  }
}

@media (min-width: 1041px) and (max-width: 1180px) {
  .brand {
    min-width: 245px;
  }

  .brand-logo {
    width: 250px;
  }

  .primary-nav {
    gap: 18px;
  }

  .nav-cta {
    padding-inline: 18px;
  }
}

@media (max-width: 860px) {
  .header-inner {
    min-height: 88px;
  }

  .brand-logo {
    width: min(220px, 62vw);
    max-height: 76px;
  }

  .primary-nav {
    inset: 90px 18px auto 18px;
  }
}

@media (max-width: 380px) {
  .brand-logo {
    width: 198px;
  }
}


/* ---------------------------------------------------------
   ITTS v3.5 test pass
   Request: increase header + logo approximately 15%, and
   increase header navigation text for better readability.
   This is a visual test version; hero/content from v3.4 remains.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .header-inner {
    min-height: 106px; /* v3.4 was 92px */
    gap: 28px;
  }

  .brand {
    min-width: 315px;
  }

  .brand-logo {
    width: clamp(293px, 20.7vw, 329px); /* ~15% larger than v3.4 */
    max-height: 90px;
  }

  .primary-nav {
    font-size: 1.05rem;
    gap: 24px;
    font-weight: 700;
  }

  .nav-link::after {
    bottom: -10px;
  }

  .nav-cta {
    min-height: 46px;
    padding-inline: 24px;
    font-size: 0.98rem;
  }
}

@media (min-width: 1041px) and (max-width: 1240px) {
  .header-inner {
    gap: 20px;
  }

  .brand {
    min-width: 285px;
  }

  .brand-logo {
    width: 292px;
    max-height: 86px;
  }

  .primary-nav {
    gap: 18px;
    font-size: 1rem;
  }

  .nav-cta {
    padding-inline: 18px;
    font-size: 0.94rem;
  }
}

@media (max-width: 860px) {
  .header-inner {
    min-height: 101px; /* ~15% larger than v3.4 mobile header */
  }

  .brand-logo {
    width: min(253px, 70vw); /* ~15% larger than v3.4 mobile logo */
    max-height: 88px;
  }

  .nav-toggle {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .nav-toggle-line {
    width: 23px;
  }

  .primary-nav {
    inset: 103px 18px auto 18px;
    font-size: 1.05rem;
  }

  .nav-link,
  .nav-cta {
    font-size: 1.04rem;
  }
}

@media (max-width: 380px) {
  .brand-logo {
    width: 225px;
  }
}


/* ---------------------------------------------------------
   ITTS v3.6 test pass
   Request: keep v3.5 layout, increase desktop menu text ~15%
   and increase official logo ~5% for legibility testing.
   Hero/content remain unchanged from v3.5.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .brand {
    min-width: 331px; /* ~5% wider than v3.5 */
  }

  .brand-logo {
    width: clamp(308px, 21.8vw, 345px); /* ~5% larger than v3.5 */
    max-height: 95px;
  }

  .primary-nav {
    font-size: 1.21rem; /* ~15% larger than v3.5 */
    gap: 25px;
    font-weight: 750;
  }

  .nav-cta {
    min-height: 48px;
    padding-inline: 26px;
    font-size: 1.07rem;
    font-weight: 750;
  }
}

@media (min-width: 1041px) and (max-width: 1280px) {
  .brand {
    min-width: 305px;
  }

  .brand-logo {
    width: 307px;
    max-height: 92px;
  }

  .primary-nav {
    gap: 18px;
    font-size: 1.12rem;
  }

  .nav-cta {
    padding-inline: 18px;
    font-size: 1rem;
  }
}

@media (max-width: 860px) {
  .brand-logo {
    width: min(266px, 72vw); /* ~5% larger than v3.5 mobile logo */
    max-height: 92px;
  }

  .nav-link,
  .nav-cta {
    font-size: 1.1rem;
  }
}

@media (max-width: 380px) {
  .brand-logo {
    width: 236px;
  }
}

/* ---------------------------------------------------------
   ITTS v3.7 expert pass
   Base visual remains v3.6. This pass adds conversion polish,
   local SEO structure, stronger solution positioning, and small
   production-ready refinements without changing DNS/hosting.
--------------------------------------------------------- */
:target {
  scroll-margin-top: 124px;
}

:focus-visible {
  outline: 3px solid rgba(31, 143, 255, 0.75);
  outline-offset: 4px;
}

@media (min-width: 1041px) {
  .hero {
    min-height: calc(100svh - 106px);
  }

  .hero-contact-line a {
    white-space: nowrap;
  }
}

.section-solutions {
  padding: 74px 0 84px;
  background:
    radial-gradient(circle at 20% 0%, rgba(31, 143, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #07111f, #050b14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.compact-heading {
  margin-bottom: 32px;
}

.compact-heading h2 {
  max-width: 860px;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.solution-card {
  position: relative;
  min-height: 245px;
  padding: 24px 132px 26px 24px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 80% 16%, rgba(31, 143, 255, 0.18), transparent 38%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.solution-card::after {
  content: "";
  position: absolute;
  inset: auto 22px 0 22px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, rgba(31, 143, 255, 0.9), transparent);
  opacity: 0.55;
}

.solution-card:hover {
  transform: translateY(-5px);
  border-color: rgba(31, 143, 255, 0.46);
  background:
    linear-gradient(180deg, rgba(31, 143, 255, 0.12), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 80% 16%, rgba(31, 143, 255, 0.22), transparent 38%);
}

.solution-card .solution-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 92px;
  height: 92px;
  object-fit: contain;
  opacity: 0.98;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.solution-card span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 18px;
  padding: 0 10px;
  border-radius: 999px;
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.14);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.solution-card h3 {
  max-width: 260px;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.solution-card p {
  max-width: 260px;
  margin-bottom: 0;
  font-size: 0.98rem;
}

@media (max-width: 1199px) {
  .solution-card {
    padding-right: 112px;
  }
  .solution-card .solution-icon {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 767px) {
  .solution-card {
    padding: 22px 22px 26px 22px;
  }
  .solution-card .solution-icon {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 74px;
    height: 74px;
    margin: 0 0 16px auto;
  }
  .solution-card h3,
  .solution-card p {
    max-width: none;
  }
}

.mini-cta {
  margin-top: 34px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(31, 143, 255, 0.28);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 84% 50%, rgba(31, 143, 255, 0.2), transparent 30%),
    rgba(255, 255, 255, 0.045);
}

.mini-cta h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
}

.mini-cta .eyebrow {
  margin-bottom: 8px;
}

.service-card {
  min-height: 318px;
}

.service-card h3 {
  letter-spacing: -0.025em;
}

.service-card p {
  color: #d7e2ef;
}

.contact-link,
.hero-contact-line a {
  text-underline-offset: 4px;
}

.contact-link:hover,
.hero-contact-line a:hover {
  text-decoration: underline;
}

@media (max-width: 1040px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mini-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .section-solutions {
    padding: 64px 0 70px;
  }

  .solution-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    min-height: auto;
  }

  .mini-cta {
    padding: 22px;
  }
}

/* ---------------------------------------------------------
   ITTS v3.8 finishing pass
   Goal: keep v3.6 approved visual base, improve conversion
   depth, message clarity, service density, industry detail,
   and professional low-voltage positioning.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-copy h1 {
    max-width: 650px;
  }

  .hero-subtitle {
    max-width: 700px;
  }
}

.visual-card-large strong {
  max-width: 500px;
}

.visual-tile {
  justify-content: flex-start;
}

.visual-tile .tile-title {
  margin: auto 0 6px;
  color: var(--white);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.visual-tile small {
  display: block;
  color: #b9c9dc;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 650;
}

.services-grid-v38 .service-card {
  min-height: 300px;
}

.services-grid-v38 .service-card p {
  min-height: 86px;
}

.section-process {
  background:
    radial-gradient(circle at 70% 12%, rgba(31, 143, 255, 0.11), transparent 32%),
    linear-gradient(180deg, #050b14, #07111f);
  border-block: 1px solid rgba(148, 163, 184, 0.1);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.process-card {
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 84% 12%, rgba(31, 143, 255, 0.14), transparent 34%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
}

.process-card span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 26px;
  border-radius: 14px;
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.14);
  font-size: 0.9rem;
  font-weight: 900;
}

.process-card h3 {
  font-size: 1.18rem;
  letter-spacing: -0.025em;
}

.process-card p {
  margin-bottom: 0;
  color: #d7e2ef;
  font-size: 0.96rem;
}

.industry-grid-rich .industry-item {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
}

.industry-grid-rich .industry-item h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.industry-grid-rich .industry-item p {
  margin: 0;
  color: #c9d7e8;
  font-size: 0.9rem;
  line-height: 1.42;
  font-weight: 600;
}

.area-btn {
  min-width: 190px;
  white-space: nowrap;
}

.contact-copy h2 {
  max-width: 620px;
}

.footer-grid a[href*="Commercial"] {
  white-space: nowrap;
}

@media (min-width: 1041px) and (max-height: 850px) {
  .visual-tile small {
    font-size: 0.72rem;
  }

  .visual-tile .tile-title {
    font-size: 0.94rem;
  }
}

@media (max-width: 1040px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .process-card {
    min-height: auto;
  }

  .industry-grid-rich .industry-item {
    min-height: auto;
  }
}


/* ---------------------------------------------------------
   ITTS v3.9 production pass
   Focus: sharper logo asset delivery, real form handler,
   vector service imagery, and more finished visual cards.
--------------------------------------------------------- */
.brand-logo,
.footer-logo {
  filter: saturate(1.04) contrast(1.04);
}

.visual-art-wrap {
  position: absolute;
  inset: 14px 14px auto 14px;
  height: 44%;
  overflow: hidden;
  border-radius: 20px;
  opacity: 0.5;
  pointer-events: none;
}

.visual-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-card-large {
  overflow: hidden;
}

.visual-card-large .visual-kicker,
.visual-card-large strong,
.visual-card-large p {
  position: relative;
  z-index: 2;
}

.tile-art-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 54px;
  height: 54px;
  opacity: 0.82;
  filter: drop-shadow(0 12px 20px rgba(31, 143, 255, 0.14));
}

.visual-tile .tile-icon,
.visual-tile .tile-title,
.visual-tile small {
  position: relative;
  z-index: 2;
}

.visual-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    radial-gradient(circle at 84% 16%, rgba(31,143,255,.18), transparent 34%),
    rgba(7,17,31,.78);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.service-icon {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
}

.service-number {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: 14px;
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.14);
  font-size: 0.9rem;
  font-weight: 900;
}

.services-grid-v38 .service-card {
  position: relative;
  overflow: hidden;
}

.services-grid-v38 .service-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -70px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(31,143,255,.08);
  pointer-events: none;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.contact-form input.field-error,
.contact-form select.field-error,
.contact-form textarea.field-error {
  border-color: rgba(255, 94, 94, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 94, 94, 0.1);
}

.form-submit:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

.form-status {
  min-height: 24px;
}

.form-status.is-success {
  color: #8ef0b0;
}

.form-status.is-error {
  color: #ffb4b4;
}

@media (max-width: 1040px) {
  .visual-art-wrap {
    opacity: 0.24;
  }

  .tile-art-icon {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 640px) {
  .card-top {
    margin-bottom: 20px;
  }

  .service-icon {
    width: 58px;
    height: 58px;
  }
}


/* =============================
   Version 4.1 controlled visual refinement
   Base: v3.9 stable. v4.0 discarded.
   ============================= */
.brand-logo {
  width: 286px;
  max-height: 82px;
}

.header-inner {
  min-height: 92px;
}

.hero-visual {
  min-height: 430px;
}

.visual-art-wrap {
  opacity: 0.48;
  height: 46%;
}

.visual-card-large strong {
  max-width: 520px;
}

.tile-art-icon {
  width: 66px;
  height: 66px;
  opacity: 0.96;
}

.visual-tile {
  min-height: 132px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    radial-gradient(circle at 84% 16%, rgba(31,143,255,.22), transparent 38%),
    rgba(7,17,31,.82);
}

.tile-title {
  max-width: 70%;
}

.service-icon {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 18px 26px rgba(31,143,255,.14));
}

.services-grid-v38 .service-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.024)),
    radial-gradient(circle at 88% 20%, rgba(31,143,255,.12), transparent 35%);
}

.services-grid-v38 .service-card h3 {
  letter-spacing: -0.03em;
}

.services-grid-v38 .service-card p {
  color: var(--slate-light);
}

@media (max-width: 1040px) {
  .brand-logo {
    width: 228px;
    max-height: 70px;
  }
  .header-inner {
    min-height: 94px;
  }
  .visual-art-wrap {
    opacity: 0.36;
  }
  .tile-art-icon {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 640px) {
  .brand-logo {
    width: 220px;
  }
  .hero-visual {
    min-height: 420px;
  }
  .service-icon {
    width: 66px;
    height: 66px;
  }
}


/* ---------------------------------------------------------
   ITTS v4.3 hero final pass
   Base: v4.1/v4.2 stable structure.
   Goal: stronger high-quality hero visual without breaking layout.
--------------------------------------------------------- */
.visual-card-large {
  position: relative;
  min-height: 310px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8, 18, 32, 0.50), rgba(4, 10, 18, 0.94)),
    radial-gradient(circle at 78% 22%, rgba(31, 143, 255, 0.22), transparent 34%),
    rgba(7, 17, 31, 0.86);
}

.visual-card-large::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 11, 20, 0.70) 0%, rgba(5, 11, 20, 0.32) 47%, rgba(5, 11, 20, 0.58) 100%),
    linear-gradient(180deg, rgba(5, 11, 20, 0.14) 0%, rgba(5, 11, 20, 0.60) 58%, rgba(5, 11, 20, 0.96) 100%);
  pointer-events: none;
}

.visual-art-wrap {
  inset: 0;
  height: 100%;
  border-radius: inherit;
  opacity: 0.82;
}

.visual-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 48%;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.08) brightness(0.92);
}

.visual-card-large .visual-kicker,
.visual-card-large strong,
.visual-card-large p {
  position: relative;
  z-index: 3;
  max-width: 500px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.visual-card-large .visual-kicker {
  background: rgba(31, 143, 255, 0.24);
  border: 1px solid rgba(143, 203, 255, 0.16);
  backdrop-filter: blur(8px);
}

.visual-card-large strong {
  font-size: clamp(1.55rem, 2.9vw, 2.3rem);
}

.visual-card-large p {
  color: #dbeafe;
}

@media (max-width: 1040px) {
  .visual-card-large {
    min-height: 340px;
  }

  .visual-art {
    object-position: 60% 50%;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, 0.68) 0%, rgba(5, 11, 20, 0.36) 50%, rgba(5, 11, 20, 0.66) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, 0.16) 0%, rgba(5, 11, 20, 0.62) 60%, rgba(5, 11, 20, 0.96) 100%);
  }
}

@media (max-width: 640px) {
  .visual-card-large {
    min-height: 300px;
  }

  .visual-art {
    object-position: 62% 52%;
  }

  .visual-card-large strong {
    font-size: 1.5rem;
  }
}


/* ---------------------------------------------------------
   ITTS v4.4 hero brightness correction
   Fix: previous hero frame/overlay was dimming the image too much.
   Keep v4.3 structure, but make the hero artwork brighter and more visible.
--------------------------------------------------------- */
.hero-visual {
  border-color: rgba(31, 143, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    radial-gradient(circle at 72% 18%, rgba(31,143,255,0.18), transparent 36%);
}

.visual-card-large {
  min-height: 320px;
  background: rgba(7, 17, 31, 0.58);
  border-color: rgba(148, 203, 255, 0.22);
  box-shadow: 0 16px 45px rgba(0,0,0,0.22);
}

.visual-card-large::before {
  background:
    linear-gradient(90deg, rgba(5, 11, 20, 0.28) 0%, rgba(5, 11, 20, 0.08) 44%, rgba(5, 11, 20, 0.16) 100%),
    linear-gradient(180deg, rgba(5, 11, 20, 0.04) 0%, rgba(5, 11, 20, 0.18) 54%, rgba(5, 11, 20, 0.58) 100%);
}

.visual-art-wrap {
  opacity: 1;
}

.visual-art {
  object-position: 56% 50%;
  transform: scale(1.015);
  filter: saturate(1.14) contrast(1.10) brightness(1.10);
}

.visual-card-large .visual-kicker {
  background: rgba(9, 31, 57, 0.62);
  border: 1px solid rgba(143, 203, 255, 0.26);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.visual-card-large strong,
.visual-card-large p {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.82);
}

@media (max-width: 1040px) {
  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, 0.30) 0%, rgba(5, 11, 20, 0.10) 50%, rgba(5, 11, 20, 0.20) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, 0.04) 0%, rgba(5, 11, 20, 0.22) 58%, rgba(5, 11, 20, 0.62) 100%);
  }
}

@media (max-width: 640px) {
  .visual-art {
    object-position: 58% 52%;
    filter: saturate(1.12) contrast(1.08) brightness(1.04);
  }
}


/* ---------------------------------------------------------
   ITTS v4.5 service image integration
   Base: v4.4 approved hero + real PHP form.
   Adds 8 service images without turning the section into a catalog.
--------------------------------------------------------- */
.services-grid-v45 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.service-card-image {
  position: relative;
  padding: 16px 16px 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    radial-gradient(circle at 86% 18%, rgba(31,143,255,.16), transparent 34%),
    rgba(7,17,31,.84);
}

.service-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,11,20,0.00), rgba(5,11,20,0.24) 38%, rgba(5,11,20,0.78) 100%);
  opacity: 0.52;
  pointer-events: none;
}

.service-card-image .service-photo {
  position: relative;
  z-index: 1;
  margin: -4px -4px 18px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(143,203,255,.16);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.service-card-image .service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,8,15,0.02), rgba(3,8,15,0.22)),
    radial-gradient(circle at 78% 22%, rgba(31,143,255,.12), transparent 36%);
  pointer-events: none;
}

.service-card-image .service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.06) contrast(1.04) brightness(.95);
  transform: scale(1.01);
}

.service-card-image .card-top,
.service-card-image h3,
.service-card-image p,
.service-card-image a {
  position: relative;
  z-index: 2;
}

.service-card-image .card-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.service-card-image .service-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(31,143,255,.16);
  border: 1px solid rgba(143,203,255,.14);
  color: #a9d4ff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.service-card-image h3 {
  margin-top: 0;
  min-height: 2.3em;
}

.service-card-image p {
  color: var(--slate-light);
}

@media (max-width: 1180px) {
  .services-grid-v45 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .services-grid-v45 {
    grid-template-columns: 1fr;
  }

  .service-card-image {
    padding: 14px 14px 20px;
  }

  .service-card-image h3 {
    min-height: auto;
  }
}


/* ---------------------------------------------------------
   ITTS v4.6 service image brightness correction
   Fix: service card images looked too dark/opaque in v4.5.
   Keep the card structure, reduce overlays, increase visual clarity.
--------------------------------------------------------- */
.service-card-image {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    radial-gradient(circle at 86% 18%, rgba(31,143,255,.13), transparent 34%),
    rgba(7,17,31,.82);
}

.service-card-image::before {
  opacity: 0.16;
  background:
    linear-gradient(180deg, rgba(5,11,20,0.00), rgba(5,11,20,0.08) 42%, rgba(5,11,20,0.34) 100%);
}

.service-card-image .service-photo {
  border-color: rgba(143,203,255,.23);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.16);
}

.service-card-image .service-photo::after {
  background:
    linear-gradient(180deg, rgba(3,8,15,0.00), rgba(3,8,15,0.06)),
    radial-gradient(circle at 78% 22%, rgba(31,143,255,.06), transparent 34%);
}

.service-card-image .service-photo img {
  filter: saturate(1.14) contrast(1.08) brightness(1.08);
  transform: scale(1.005);
}

.service-card-image:hover .service-photo img {
  filter: saturate(1.18) contrast(1.10) brightness(1.12);
}

.service-card-image p {
  color: #d5dfec;
}


/* ---------------------------------------------------------
   ITTS v4.7 approved icon set integration
   Base: v4.6. Replaces hero tile SVGs with approved PNG icon set.
   Preserves hero, service images, form, and layout.
--------------------------------------------------------- */
.tile-art-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.94;
  border-radius: 18px;
  padding: 4px;
  background: rgba(5, 13, 24, 0.18);
  filter:
    saturate(1.08)
    contrast(1.06)
    brightness(1.05)
    drop-shadow(0 12px 22px rgba(31, 143, 255, 0.20));
}

.visual-tile:hover .tile-art-icon {
  opacity: 1;
  filter:
    saturate(1.14)
    contrast(1.08)
    brightness(1.10)
    drop-shadow(0 14px 28px rgba(31, 143, 255, 0.26));
}


/* ---------------------------------------------------------
   ITTS v4.10 hero tile safe correction
   Base: v4.7 approved layout.
   Discards v4.8/v4.9 height changes.
   Keeps tile structure stable and only improves readability.
--------------------------------------------------------- */
.visual-tile .tile-art-icon {
  width: 58px;
  height: 58px;
  opacity: 0.96;
}

.visual-tile small {
  color: #d7e8fb;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.visual-tile {
  border-color: rgba(143, 203, 255, 0.17);
}


/* ---------------------------------------------------------
   ITTS v5.1 hero tile visual balance
   Base: v5.0.
   Goal: reduce the empty look inside hero tiles without changing
   the hero grid, hero image, card heights, or service section.
--------------------------------------------------------- */
.visual-tile {
  overflow: hidden;
}

.visual-tile .tile-art-icon {
  z-index: 4;
  width: 52px;
  height: 52px;
  top: 16px;
  right: 16px;
  opacity: 0.98;
  background: rgba(5, 13, 24, 0.30);
}

.tile-art-watermark {
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 48%;
  width: 118px;
  height: 118px;
  object-fit: contain;
  opacity: 0.13;
  transform: translateY(-50%);
  filter:
    saturate(1.12)
    contrast(1.08)
    brightness(1.14)
    drop-shadow(0 18px 38px rgba(31, 143, 255, 0.36));
  pointer-events: none;
}

.phone-tile .tile-art-watermark,
.access-tile .tile-art-watermark {
  width: 92px;
  height: 92px;
  right: 10px;
  top: 50%;
  opacity: 0.11;
}

.visual-tile .tile-icon,
.visual-tile .tile-title,
.visual-tile small {
  position: relative;
  z-index: 3;
}

.visual-tile .tile-title {
  text-shadow: 0 2px 14px rgba(0,0,0,0.42);
}

.visual-tile small {
  max-width: 86%;
  display: block;
}

.camera-tile,
.network-tile,
.phone-tile,
.access-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.02)),
    radial-gradient(circle at 82% 42%, rgba(31,143,255,.24), transparent 34%),
    rgba(7,17,31,.78);
}

@media (max-width: 640px) {
  .tile-art-watermark {
    width: 88px;
    height: 88px;
    opacity: 0.10;
  }

  .visual-tile .tile-art-icon {
    width: 48px;
    height: 48px;
  }
}


/* ---------------------------------------------------------
   ITTS v5.4 hero tile correction
   Base: v5.1 stable layout.
   Corrections from screenshot review:
   - Remove heavy frame/overlay feeling from the 4 hero tiles.
   - Stop duplicating visual emphasis: hide the small icon image and use the large watermark icon as the main tile visual.
   - Keep the text compact and readable.
   - Reduce the visual height/noise of CCTV and DATA without changing the main hero card.
   - Preserve hero image, service images, icons, and PHP form.
--------------------------------------------------------- */

/* Keep the right hero panel stable */
.hero-visual {
  grid-template-rows: 1fr 1fr 1fr .86fr .86fr 1fr;
}

/* Clean the 4 mini cards: less border, less shadow, less heavy overlay */
.visual-tile {
  overflow: hidden;
  border: 1px solid rgba(143, 203, 255, 0.08) !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 72% 50%, rgba(31, 143, 255, 0.20), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.010)),
    rgba(7,17,31,0.50) !important;
}

/* The small upper-right icon was adding noise and fighting the watermark */
.visual-tile .tile-art-icon {
  display: none !important;
}

/* The watermark becomes the real tile visual */
.tile-art-watermark {
  z-index: 1;
  width: 150px;
  height: 150px;
  right: -8px;
  top: 50%;
  opacity: 0.28;
  object-fit: contain;
  filter: saturate(1.22) contrast(1.12) brightness(1.18) !important;
}

.camera-tile .tile-art-watermark,
.network-tile .tile-art-watermark {
  width: 158px;
  height: 158px;
  right: -12px;
  opacity: 0.30;
}

.phone-tile .tile-art-watermark,
.access-tile .tile-art-watermark {
  width: 112px;
  height: 112px;
  right: -4px;
  opacity: 0.23;
}

/* Reduce CCTV and DATA tile visual noise/height only through row sizing */
.camera-tile,
.network-tile {
  padding-bottom: 14px;
}

.visual-tile .tile-icon,
.visual-tile .tile-title,
.visual-tile small {
  position: relative;
  z-index: 3;
}

.visual-tile .tile-icon {
  background: rgba(31, 143, 255, 0.18);
  border: 1px solid rgba(143, 203, 255, 0.10);
}

.visual-tile .tile-title {
  max-width: 76%;
  margin-top: auto;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

.visual-tile small {
  display: block;
  max-width: 78%;
  color: #dbeafe;
  font-weight: 800;
  line-height: 1.22;
  text-shadow: 0 2px 12px rgba(0,0,0,0.42);
}

/* Extra clear overlay to protect text without hiding icon */
.visual-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(7,17,31,0.18), rgba(7,17,31,0.04) 48%, rgba(7,17,31,0.20));
  pointer-events: none;
}

/* Do not let previous v5.1 watermark rules overpower this pass */
.phone-tile .tile-art-watermark,
.access-tile .tile-art-watermark {
  top: 50%;
}

@media (max-width: 1040px) {
  .hero-visual {
    grid-template-rows: repeat(6, 1fr);
  }

  .tile-art-watermark {
    width: 118px;
    height: 118px;
    opacity: 0.18;
  }

  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark {
    width: 124px;
    height: 124px;
    opacity: 0.20;
  }
}

@media (max-width: 640px) {
  .visual-tile .tile-art-icon {
    display: none !important;
  }

  .tile-art-watermark {
    width: 98px;
    height: 98px;
    opacity: 0.14;
  }

  .visual-tile .tile-title,
  .visual-tile small {
    max-width: 86%;
  }
}


/* ---------------------------------------------------------
   ITTS v5.5 hero mini-card equalization
   - CCTV and DATA changed to the same visual height as VOICE.
   - Heavy overlay/frame reduced to near-minimum on all 4 mini cards.
   - Keep the larger watermark icons as the main visual cue.
--------------------------------------------------------- */

@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 1fr 1fr 1fr 0.96fr 0.96fr !important;
  }

  .visual-card-large {
    grid-row: 1 / 4;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(143, 203, 255, 0.055) !important;
    box-shadow: none !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.004)),
      rgba(7, 17, 31, 0.18) !important;
  }

  .camera-tile {
    grid-column: 1 / 4;
    grid-row: 4 / 5 !important;
  }

  .network-tile {
    grid-column: 4 / 7;
    grid-row: 4 / 5 !important;
  }

  .phone-tile {
    grid-column: 1 / 4;
    grid-row: 5 / 6 !important;
  }

  .access-tile {
    grid-column: 4 / 7;
    grid-row: 5 / 6 !important;
  }

  .visual-tile::after {
    display: none !important;
    background: transparent !important;
  }

  .visual-tile .tile-icon,
  .visual-tile .tile-title,
  .visual-tile small {
    z-index: 3;
  }

  .visual-tile .tile-icon {
    margin-bottom: 10px;
    background: rgba(31, 143, 255, 0.12);
    border: 1px solid rgba(143, 203, 255, 0.08);
    box-shadow: none;
  }

  .visual-tile .tile-title {
    margin-top: auto;
    margin-bottom: 4px;
    max-width: 58%;
    font-size: 0.99rem;
    line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0,0,0,0.28);
  }

  .visual-tile small {
    max-width: 58%;
    font-size: 0.82rem;
    line-height: 1.14;
    color: #e5f1ff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.24);
  }

  .tile-art-watermark {
    top: 50% !important;
    right: -8px !important;
    transform: translateY(-50%);
    opacity: 0.34 !important;
    filter: saturate(1.18) contrast(1.08) brightness(1.22) !important;
  }

  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 118px !important;
    height: 118px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v5.7 desktop-only hero height correction
   Fixed: v5.6 package did not bump CSS cache in index.html.
   Scope: Desktop only. No mobile/tablet changes.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    min-height: auto !important;
    padding-top: clamp(20px, 3.0vh, 32px) !important;
    padding-bottom: 22px !important;
  }

  .hero-grid {
    align-items: start !important;
    gap: clamp(24px, 2.7vw, 40px) !important;
  }

  .hero-copy {
    padding-top: clamp(4px, 1vh, 14px) !important;
  }

  .hero .eyebrow {
    margin-bottom: 6px !important;
  }

  .hero-area-note {
    margin-bottom: 14px !important;
  }

  .hero-copy h1 {
    margin-bottom: 14px !important;
  }

  .hero-subtitle {
    margin-bottom: 16px !important;
  }

  .hero-actions {
    margin-bottom: 10px !important;
  }

  .hero-contact-line {
    margin-bottom: 12px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v5.8 VOICE icon background cleanup
   Uses transparent VOIP icon asset and removes remaining frame effect.
--------------------------------------------------------- */
.phone-tile .tile-art-watermark {
  mix-blend-mode: screen;
  opacity: 0.38 !important;
  filter: saturate(1.20) contrast(1.08) brightness(1.28) !important;
}


/* ---------------------------------------------------------
   ITTS v6.1 solution-card icon balance
   Base: v6.0.
   Goal: reduce Secure / Connect / Communicate / Present icons
   so they support the content instead of competing with the hero.
--------------------------------------------------------- */
.solution-card {
  padding: 24px 96px 26px 24px !important;
}

.solution-card .solution-icon {
  top: 24px !important;
  right: 24px !important;
  width: 64px !important;
  height: 64px !important;
  opacity: 0.90 !important;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(1.02)
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)) !important;
}

.solution-card span {
  margin-bottom: 22px !important;
}

.solution-card h3 {
  max-width: 245px !important;
}

.solution-card p {
  max-width: 250px !important;
}

@media (max-width: 1199px) {
  .solution-card {
    padding-right: 84px !important;
  }

  .solution-card .solution-icon {
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 767px) {
  .solution-card {
    padding: 22px 22px 26px 22px !important;
  }

  .solution-card .solution-icon {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.2 How We Work process-card icons and copy
   Updates the four process cards:
   Site Walk & Assessment / Clear Scope / Professional Installation / Support & Optimization.
--------------------------------------------------------- */
.process-grid-v62 {
  align-items: stretch;
}

.process-card-icon {
  position: relative;
  min-height: 265px;
  padding: 24px 22px 26px;
  overflow: hidden;
}

.process-card-icon::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(31,143,255,.16), transparent 62%);
  pointer-events: none;
}

.process-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 74px;
  height: 74px;
  object-fit: contain;
  opacity: .94;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
  pointer-events: none;
}

.process-card-icon span,
.process-card-icon h3,
.process-card-icon p {
  position: relative;
  z-index: 2;
}

.process-card-icon span {
  margin-bottom: 34px;
}

.process-card-icon h3 {
  max-width: 210px;
  margin-bottom: 12px;
  font-size: 1.18rem;
}

.process-card-icon p {
  max-width: 245px;
  line-height: 1.48;
}

@media (max-width: 1040px) {
  .process-card-icon {
    min-height: 245px;
  }

  .process-icon {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .process-card-icon {
    min-height: auto;
    padding: 22px;
  }

  .process-icon {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 62px;
    height: 62px;
    margin: 0 0 18px auto;
  }

  .process-card-icon::before {
    width: 90px;
    height: 90px;
  }

  .process-card-icon span {
    margin-bottom: 18px;
  }

  .process-card-icon h3,
  .process-card-icon p {
    max-width: none;
  }
}


/* ---------------------------------------------------------
   ITTS v6.3 regenerated How We Work icons
   Goal: minimum tolerable size while still identifiable.
   Keeps process text from v6.2; only swaps/refines the icons.
--------------------------------------------------------- */
.process-card-icon {
  padding: 24px 22px 26px;
}

.process-card-icon::before {
  width: 82px;
  height: 82px;
  top: 16px;
  right: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(31,143,255,.10), transparent 64%);
}

.process-icon {
  top: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  opacity: .92;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(1.04)
    drop-shadow(0 8px 14px rgba(0,0,0,.20));
}

.process-card-icon span {
  margin-bottom: 34px;
}

.process-card-icon h3 {
  max-width: 230px;
}

.process-card-icon p {
  max-width: 250px;
}

@media (max-width: 1040px) {
  .process-icon {
    width: 54px;
    height: 54px;
  }

  .process-card-icon::before {
    width: 76px;
    height: 76px;
  }
}

@media (max-width: 640px) {
  .process-icon {
    width: 52px;
    height: 52px;
  }

  .process-card-icon::before {
    width: 70px;
    height: 70px;
  }
}


/* ---------------------------------------------------------
   ITTS v6.4 industry card icons
   Adds small, clear industry icons to the Industries We Serve section.
   Icons are intentionally supporting elements, not hero images.
--------------------------------------------------------- */
.industry-grid-rich .industry-item-icon {
  position: relative;
  min-height: 162px;
  padding: 22px 96px 22px 22px;
  overflow: hidden;
}

.industry-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: .92;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(1.06)
    drop-shadow(0 8px 14px rgba(0,0,0,.18));
  pointer-events: none;
}

.industry-grid-rich .industry-item-icon::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(31,143,255,.10), transparent 66%);
  pointer-events: none;
}

.industry-grid-rich .industry-item-icon h3,
.industry-grid-rich .industry-item-icon p {
  position: relative;
  z-index: 2;
}

@media (max-width: 1040px) {
  .industry-grid-rich .industry-item-icon {
    padding-right: 82px;
  }

  .industry-icon {
    width: 46px;
    height: 46px;
  }

  .industry-grid-rich .industry-item-icon::after {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .industry-grid-rich .industry-item-icon {
    padding-right: 72px;
  }

  .industry-icon {
    width: 42px;
    height: 42px;
  }
}


/* ---------------------------------------------------------
   ITTS v6.5 clickable hero capability chips and service tiles
   Left chips and right hero tiles now jump directly to the related service card.
--------------------------------------------------------- */
.trust-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.trust-row a:hover,
.trust-row a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(31, 143, 255, 0.48);
  color: #bfe2ff;
  background: rgba(31, 143, 255, 0.12);
}

.hero-service-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hero-service-link:hover,
.hero-service-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(31, 143, 255, 0.42) !important;
  background:
    radial-gradient(circle at 74% 50%, rgba(31,143,255,.24), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(7,17,31,.44) !important;
}

.service-card[id] {
  scroll-margin-top: 120px;
}

.service-card[id]:target {
  border-color: rgba(31, 143, 255, 0.68);
  box-shadow:
    0 0 0 1px rgba(31, 143, 255, 0.26),
    0 18px 50px rgba(31, 143, 255, 0.14);
}


/* ITTS v6.6 hero trust card */
.hero-experience-card {
  max-width: 560px;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 10%, rgba(31, 143, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.hero-experience-eyebrow {
  margin: 0 0 9px;
  color: #9fd2ff;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-experience-copy {
  margin: 0;
  color: var(--white);
  font-size: 1.13rem;
  line-height: 1.42;
  font-weight: 500;
}

@media (max-width: 767px) {
  .hero-experience-card {
    max-width: 100%;
    margin-top: 18px;
    padding: 16px 18px;
  }
}


/* ---------------------------------------------------------
   ITTS v6.8 stronger hero trust card presence
   v6.7 was too conservative visually. This pass makes the card
   wider, taller, and more readable without adding new content.
--------------------------------------------------------- */
.hero-experience-card {
  width: min(640px, 100%) !important;
  max-width: 640px !important;
  min-height: 138px !important;
  margin-top: 24px !important;
  padding: 26px 30px !important;
  border-color: rgba(143, 203, 255, 0.22) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(31, 143, 255, 0.20), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026)) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.hero-experience-eyebrow {
  margin-bottom: 12px !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.105em !important;
}

.hero-experience-copy {
  max-width: 560px !important;
  font-size: 1.26rem !important;
  line-height: 1.38 !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 767px) {
  .hero-experience-card {
    width: 100% !important;
    min-height: auto !important;
    padding: 18px 20px !important;
  }

  .hero-experience-eyebrow {
    font-size: 0.82rem !important;
  }

  .hero-experience-copy {
    font-size: 1.05rem !important;
    line-height: 1.44 !important;
  }
}


/* ITTS v6.9 maximum acceptable hero experience card emphasis */
.hero-experience-card {
  width: min(700px, 100%) !important;
  max-width: 700px !important;
  min-height: 164px !important;
  margin-top: 26px !important;
  padding: 30px 34px !important;
  border: 1px solid rgba(143, 203, 255, 0.28) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(31, 143, 255, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.088), rgba(255,255,255,0.03)) !important;
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.hero-experience-eyebrow {
  margin: 0 0 14px !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
}

.hero-experience-copy {
  max-width: 610px !important;
  font-size: 1.46rem !important;
  line-height: 1.35 !important;
  font-weight: 780 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 767px) {
  .hero-experience-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 18px 20px !important;
    margin-top: 18px !important;
  }

  .hero-experience-eyebrow {
    font-size: 0.82rem !important;
  }

  .hero-experience-copy {
    max-width: none !important;
    font-size: 1.05rem !important;
    line-height: 1.44 !important;
  }
}


/* ITTS v6.10 - hero experience card more square / taller on desktop */
.hero-experience-card {
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  min-height: 228px !important;
  margin-top: 26px !important;
  padding: 30px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}

.hero-experience-eyebrow {
  margin: 0 0 12px !important;
}

.hero-experience-copy {
  max-width: 470px !important;
  font-size: 1.44rem !important;
  line-height: 1.36 !important;
}

@media (max-width: 767px) {
  .hero-experience-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 18px 20px !important;
    display: block !important;
  }

  .hero-experience-copy {
    max-width: none !important;
    font-size: 1.05rem !important;
    line-height: 1.44 !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.11 hero experience copy update
   Updated trust message to be honest and accurate:
   20+ years of telecom / low-voltage experience, not 20+ years operating locally.
--------------------------------------------------------- */
.hero-experience-eyebrow {
  max-width: 470px !important;
  line-height: 1.35 !important;
}

.hero-experience-copy {
  max-width: 470px !important;
}


/* ---------------------------------------------------------
   ITTS v6.12 premium service-strip button treatment
   Applies Option A: subtle gradient, blue translucent border,
   soft shadow, controlled blue hover glow, and micro-lift.
--------------------------------------------------------- */
.service-strip {
  background:
    linear-gradient(180deg, rgba(7, 17, 31, 0.98), rgba(5, 11, 20, 0.98)) !important;
  border-block: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.strip-item {
  position: relative;
  overflow: hidden;
  padding: 16px 18px !important;
  border: 1px solid rgba(143, 203, 255, 0.16) !important;
  border-radius: 16px !important;
  color: #edf6ff !important;
  background:
    radial-gradient(circle at 80% 12%, rgba(31, 143, 255, 0.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.024)),
    rgba(7, 17, 31, 0.62) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease !important;
}

.strip-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(143, 203, 255, 0.10), transparent);
  opacity: 0;
  transform: translateX(-55%);
  transition: opacity 220ms ease, transform 360ms ease;
  pointer-events: none;
}

.strip-item:hover,
.strip-item:focus-visible {
  transform: translateY(-3px);
  color: #ffffff !important;
  border-color: rgba(31, 143, 255, 0.58) !important;
  background:
    radial-gradient(circle at 80% 12%, rgba(31, 143, 255, 0.20), transparent 44%),
    linear-gradient(180deg, rgba(31, 143, 255, 0.115), rgba(255,255,255,0.032)),
    rgba(7, 17, 31, 0.72) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(31, 143, 255, 0.12),
    0 0 24px rgba(31, 143, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.strip-item:hover::before,
.strip-item:focus-visible::before {
  opacity: 1;
  transform: translateX(55%);
}

@media (max-width: 767px) {
  .strip-item {
    padding: 14px 15px !important;
    border-radius: 15px !important;
  }

  .strip-item:hover,
  .strip-item:focus-visible {
    transform: none;
  }
}


/* ---------------------------------------------------------
   ITTS v6.13 Service Area map enhancement
   Inserts approved PA + NJ tech map as a subtle background layer.
--------------------------------------------------------- */
.area-card-map {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  isolation: isolate;
}

.area-card-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,17,31,0.96) 0%, rgba(7,17,31,0.88) 34%, rgba(7,17,31,0.54) 68%, rgba(7,17,31,0.40) 100%),
    radial-gradient(circle at 72% 50%, rgba(31,143,255,0.12), transparent 42%);
  pointer-events: none;
}

.area-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
}

.area-map-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  filter: saturate(1.08) contrast(1.04) brightness(0.95);
}

.area-content,
.area-card-map .area-btn {
  position: relative;
  z-index: 2;
}

.area-content {
  max-width: 760px;
}

.area-card-map .area-btn {
  background: rgba(15, 30, 52, 0.78);
  backdrop-filter: blur(6px);
  border-color: rgba(143,203,255,0.20);
}

@media (max-width: 1040px) {
  .area-card-map {
    min-height: 360px;
    align-items: flex-start;
    flex-direction: column;
  }

  .area-card-map::before {
    background:
      linear-gradient(180deg, rgba(7,17,31,0.94) 0%, rgba(7,17,31,0.82) 62%, rgba(7,17,31,0.52) 100%),
      radial-gradient(circle at 72% 50%, rgba(31,143,255,0.12), transparent 42%);
  }

  .area-map-bg img {
    object-position: center;
  }
}

@media (max-width: 640px) {
  .area-card-map {
    min-height: 390px;
  }

  .area-map-bg {
    opacity: 0.55;
  }
}


/* ---------------------------------------------------------
   ITTS v6.15 desktop hero redesign
   True layout correction:
   - Replaces restaurant/signage-heavy hero art with security/network/telecom art.
   - Changes the right-side hero module from old 2x2 lower tiles to a premium 4-card row.
   - Keeps mobile/tablet safer by applying this only to desktop.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-grid {
    grid-template-columns: minmax(0, .96fr) minmax(560px, 1.04fr) !important;
    align-items: start !important;
    gap: clamp(28px, 3vw, 46px) !important;
  }

  .hero-visual {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    gap: 14px !important;
    border-radius: 32px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 300px 150px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.062), rgba(255,255,255,.018)),
      radial-gradient(circle at 73% 18%, rgba(31,143,255,.18), transparent 35%) !important;
    box-shadow:
      0 22px 70px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.026) !important;
  }

  .visual-card-large {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 2 !important;
    min-height: 0 !important;
    height: 300px !important;
    padding: 20px 22px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, .52) 0%, rgba(5, 11, 20, .14) 42%, rgba(5, 11, 20, .22) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, .03) 0%, rgba(5, 11, 20, .16) 48%, rgba(5, 11, 20, .72) 100%) !important;
  }

  .visual-art-wrap {
    inset: 0 !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 56% 47% !important;
    transform: scale(1.01) !important;
    filter: saturate(1.10) contrast(1.08) brightness(.98) !important;
  }

  .visual-card-large .visual-kicker {
    margin-bottom: 9px !important;
    padding: 7px 11px !important;
    font-size: .72rem !important;
    background: rgba(9, 31, 57, .68) !important;
    border: 1px solid rgba(143,203,255,.24) !important;
  }

  .visual-card-large strong {
    max-width: 560px !important;
    margin-bottom: 8px !important;
    font-size: clamp(1.55rem, 2.55vw, 2.05rem) !important;
    line-height: 1.04 !important;
  }

  .visual-card-large p {
    max-width: 500px !important;
    font-size: .98rem !important;
    line-height: 1.35 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 150px !important;
    padding: 16px 16px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border: 1px solid rgba(143,203,255,.16) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 72% 20%, rgba(31,143,255,.15), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.016)),
      rgba(7,17,31,.54) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .camera-tile {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
  }

  .network-tile {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
  }

  .phone-tile {
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
  }

  .access-tile {
    grid-column: 4 / 5 !important;
    grid-row: 2 / 3 !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    top: 20px !important;
    right: 16px !important;
    transform: none !important;
    opacity: .38 !important;
    object-fit: contain !important;
    filter: saturate(1.18) contrast(1.08) brightness(1.20) !important;
  }

  .visual-tile .tile-icon {
    width: fit-content !important;
    margin: 0 0 auto 0 !important;
    padding: 6px 10px !important;
    font-size: .73rem !important;
    letter-spacing: .07em !important;
    background: rgba(31,143,255,.16) !important;
    border: 1px solid rgba(143,203,255,.12) !important;
  }

  .visual-tile .tile-title {
    max-width: 100% !important;
    margin: 0 0 5px !important;
    color: #ffffff !important;
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.38) !important;
  }

  .visual-tile small {
    max-width: 100% !important;
    color: #dbeafe !important;
    font-size: .80rem !important;
    line-height: 1.18 !important;
    font-weight: 760 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.30) !important;
  }

  .visual-tile::after {
    display: none !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.16 desktop adjustment #1
   Increase right hero module height for better desktop balance.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 360px 172px !important;
    gap: 16px !important;
    padding: 18px !important;
    border-radius: 34px !important;
  }

  .visual-card-large {
    height: 360px !important;
    min-height: 360px !important;
    padding: 24px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 172px !important;
    padding: 18px 17px 17px !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 86px !important;
    height: 86px !important;
    top: 22px !important;
    right: 18px !important;
  }

  .visual-tile .tile-title {
    font-size: 1.08rem !important;
    line-height: 1.08 !important;
  }

  .visual-tile small {
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
  }

  .visual-art {
    object-position: 57% 48% !important;
  }
}

/* ---------------------------------------------------------
   ITTS v6.17 desktop adjustment #2
   Stronger right hero lift for final desktop balance.
   Scope: desktop only. Leaves mobile/tablet unchanged.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 404px 188px !important;
    gap: 18px !important;
    padding: 20px !important;
    border-radius: 36px !important;
  }

  .visual-card-large {
    height: 404px !important;
    min-height: 404px !important;
    padding: 26px !important;
    border-radius: 26px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 188px !important;
    padding: 20px 18px 18px !important;
    border-radius: 22px !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 92px !important;
    height: 92px !important;
    top: 24px !important;
    right: 18px !important;
    opacity: .40 !important;
  }

  .visual-card-large strong {
    font-size: clamp(1.62rem, 2.65vw, 2.14rem) !important;
    line-height: 1.03 !important;
    max-width: 590px !important;
  }

  .visual-card-large p {
    font-size: 1rem !important;
    line-height: 1.36 !important;
    max-width: 520px !important;
  }

  .visual-tile .tile-title {
    font-size: 1.10rem !important;
    line-height: 1.08 !important;
  }

  .visual-tile small {
    font-size: 0.86rem !important;
    line-height: 1.22 !important;
  }

  .visual-art {
    object-position: 57% 47% !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.18 final desktop hero alignment pass
   Goal: bring the real HTML/CSS closer to the approved mockup:
   clean compact desktop hero, premium right panel, horizontal cards,
   no cramped mini-card text, and no oversized vertical stretch.
   Scope: desktop only. Mobile/tablet preserved.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .hero .container {
    max-width: 1340px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(610px, 1.08fr) !important;
    gap: clamp(34px, 3.8vw, 58px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 10px !important;
  }

  .hero .eyebrow {
    margin-bottom: 8px !important;
  }

  .hero-area-note {
    margin-bottom: 18px !important;
  }

  .hero-copy h1 {
    margin-bottom: 18px !important;
    font-size: clamp(3.15rem, 5.35vw, 5.05rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.075em !important;
  }

  .hero-subtitle {
    max-width: 620px !important;
    margin-bottom: 18px !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    margin-bottom: 12px !important;
    gap: 14px !important;
  }

  .hero-actions .btn {
    padding: 14px 22px !important;
  }

  .hero-contact-line {
    margin-bottom: 14px !important;
    gap: 20px !important;
  }

  .trust-row {
    margin-bottom: 0 !important;
    gap: 10px !important;
  }

  .trust-row a {
    padding: 8px 13px !important;
    font-size: 0.84rem !important;
  }

  .hero-visual {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 315px 132px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
      radial-gradient(circle at 74% 18%, rgba(31,143,255,.18), transparent 36%) !important;
    box-shadow:
      0 22px 70px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.026) !important;
  }

  .visual-card-large {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 2 !important;
    height: 315px !important;
    min-height: 315px !important;
    padding: 20px 22px !important;
    border-radius: 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, .42) 0%, rgba(5, 11, 20, .12) 44%, rgba(5, 11, 20, .20) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, .02) 0%, rgba(5, 11, 20, .14) 48%, rgba(5, 11, 20, .72) 100%) !important;
  }

  .visual-art-wrap {
    inset: 0 !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 54% 48% !important;
    transform: scale(1.01) !important;
    filter: saturate(1.08) contrast(1.06) brightness(.99) !important;
  }

  .visual-card-large .visual-kicker {
    margin-bottom: 8px !important;
    padding: 7px 11px !important;
    font-size: .70rem !important;
    letter-spacing: .095em !important;
    background: rgba(9, 31, 57, .72) !important;
    border: 1px solid rgba(143,203,255,.24) !important;
    backdrop-filter: blur(8px);
  }

  .visual-card-large strong {
    max-width: 620px !important;
    margin-bottom: 7px !important;
    font-size: clamp(1.48rem, 2.38vw, 1.98rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
  }

  .visual-card-large p {
    max-width: 520px !important;
    font-size: .92rem !important;
    line-height: 1.34 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 132px !important;
    padding: 14px 12px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    border: 1px solid rgba(143,203,255,.17) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(31,143,255,.14), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.016)),
      rgba(7,17,31,.56) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .camera-tile { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; }
  .network-tile { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
  .phone-tile { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
  .access-tile { grid-column: 4 / 5 !important; grid-row: 2 / 3 !important; }

  .visual-tile .tile-icon {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    background: rgba(31,143,255,.17) !important;
    border: 1px solid rgba(143,203,255,.14) !important;
    z-index: 4 !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    top: 38px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: .70 !important;
    object-fit: contain !important;
    filter: saturate(1.10) contrast(1.05) brightness(1.10) drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
    z-index: 2 !important;
  }

  .visual-tile .tile-title {
    max-width: 100% !important;
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-size: .95rem !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.38) !important;
    z-index: 4 !important;
  }

  .visual-tile small {
    max-width: 100% !important;
    color: #dbeafe !important;
    font-size: .72rem !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.30) !important;
    z-index: 4 !important;
  }

  .visual-tile::after {
    display: none !important;
  }

  .hero-experience-card {
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    min-height: 158px !important;
    margin-top: 26px !important;
    padding: 24px 28px !important;
    justify-content: center !important;
  }

  .hero-experience-eyebrow {
    max-width: 450px !important;
    margin-bottom: 10px !important;
    font-size: .88rem !important;
    line-height: 1.32 !important;
  }

  .hero-experience-copy {
    max-width: 450px !important;
    font-size: 1.18rem !important;
    line-height: 1.36 !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.20 FINAL desktop hero closeout
   Produces the approved mockup direction with real HTML/CSS:
   - hero image based on final low-voltage mockup asset
   - 4 compact card row
   - new 20+ years badge
   - clean premium desktop proportions
   Mobile/tablet is preserved.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .hero .container {
    max-width: 1340px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(610px, 1.08fr) !important;
    gap: clamp(34px, 3.8vw, 58px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 10px !important;
  }

  .hero .eyebrow {
    margin-bottom: 8px !important;
  }

  .hero-area-note {
    margin-bottom: 18px !important;
  }

  .hero-copy h1 {
    margin-bottom: 18px !important;
    font-size: clamp(3.15rem, 5.35vw, 5.05rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.075em !important;
  }

  .hero-subtitle {
    max-width: 620px !important;
    margin-bottom: 18px !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    margin-bottom: 12px !important;
    gap: 14px !important;
  }

  .hero-actions .btn {
    padding: 14px 22px !important;
  }

  .hero-contact-line {
    margin-bottom: 14px !important;
    gap: 20px !important;
  }

  .trust-row {
    margin-bottom: 0 !important;
    gap: 10px !important;
  }

  .trust-row a {
    padding: 8px 13px !important;
    font-size: 0.84rem !important;
  }

  .hero-visual {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 32px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 390px 160px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
      radial-gradient(circle at 74% 18%, rgba(31,143,255,.18), transparent 36%) !important;
    box-shadow:
      0 22px 70px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.026) !important;
  }

  .visual-card-large {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 2 !important;
    height: 390px !important;
    min-height: 390px !important;
    border-radius: 24px !important;
    padding: 22px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, .34) 0%, rgba(5, 11, 20, .08) 46%, rgba(5, 11, 20, .16) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, .02) 0%, rgba(5, 11, 20, .11) 48%, rgba(5, 11, 20, .56) 100%) !important;
  }

  .visual-art-wrap {
    inset: 0 !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 50% 48% !important;
    transform: scale(1.01) !important;
    filter: saturate(1.08) contrast(1.06) brightness(.99) !important;
  }

  .visual-card-large .visual-kicker {
    margin-bottom: 8px !important;
    padding: 7px 11px !important;
    font-size: .70rem !important;
    letter-spacing: .095em !important;
    background: rgba(9, 31, 57, .72) !important;
    border: 1px solid rgba(143,203,255,.24) !important;
    backdrop-filter: blur(8px);
  }

  .visual-card-large strong {
    max-width: 640px !important;
    margin-bottom: 7px !important;
    font-size: clamp(1.55rem, 2.45vw, 2.05rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
  }

  .visual-card-large p {
    max-width: 520px !important;
    font-size: .95rem !important;
    line-height: 1.35 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 160px !important;
    padding: 14px 12px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    border: 1px solid rgba(143,203,255,.17) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(31,143,255,.14), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.016)),
      rgba(7,17,31,.56) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .camera-tile { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; }
  .network-tile { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
  .phone-tile { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
  .access-tile { grid-column: 4 / 5 !important; grid-row: 2 / 3 !important; }

  .visual-tile .tile-icon {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    background: rgba(31,143,255,.17) !important;
    border: 1px solid rgba(143,203,255,.14) !important;
    z-index: 4 !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    top: 38px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: .78 !important;
    object-fit: contain !important;
    filter: saturate(1.12) contrast(1.06) brightness(1.12) drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
    z-index: 2 !important;
  }

  .visual-tile .tile-title {
    max-width: 100% !important;
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-size: .96rem !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.38) !important;
    z-index: 4 !important;
  }

  .visual-tile small {
    max-width: 100% !important;
    color: #dbeafe !important;
    font-size: .72rem !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.30) !important;
    z-index: 4 !important;
  }

  .visual-tile::after {
    display: none !important;
  }

  .hero-experience-card {
    width: min(560px, 100%) !important;
    max-width: 560px !important;
    min-height: 180px !important;
    margin-top: 26px !important;
    padding: 24px 28px !important;
    display: grid !important;
    grid-template-columns: 112px 1fr !important;
    align-items: center !important;
    gap: 22px !important;
  }

  .experience-badge {
    width: 96px !important;
    height: 96px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 22px rgba(31,143,255,.18)) !important;
  }

  .experience-copy-wrap {
    min-width: 0 !important;
  }

  .hero-experience-eyebrow {
    max-width: 390px !important;
    margin-bottom: 10px !important;
    font-size: .88rem !important;
    line-height: 1.32 !important;
  }

  .hero-experience-copy {
    max-width: 390px !important;
    font-size: 1.08rem !important;
    line-height: 1.36 !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.21 desktop proportion correction
   Fixes v6.20 looking too small/narrow on wide desktop screens.
   Also fixes Access mini-card icon using a proper keypad/reader asset.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .hero .container {
    max-width: 1500px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(560px, 0.92fr) minmax(680px, 1.08fr) !important;
    gap: clamp(42px, 4.4vw, 72px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 12px !important;
  }

  .hero-copy h1 {
    font-size: clamp(3.55rem, 5.75vw, 5.70rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.075em !important;
    margin-bottom: 20px !important;
  }

  .hero-subtitle {
    max-width: 680px !important;
    font-size: 1.10rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  .hero-actions .btn {
    padding: 15px 25px !important;
  }

  .hero-contact-line {
    gap: 22px !important;
    margin-bottom: 16px !important;
  }

  .trust-row a {
    padding: 8px 14px !important;
    font-size: 0.86rem !important;
  }

  .hero-visual {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 17px !important;
    gap: 17px !important;
    border-radius: 34px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 420px 178px !important;
  }

  .visual-card-large {
    height: 420px !important;
    min-height: 420px !important;
    padding: 24px !important;
    border-radius: 26px !important;
  }

  .visual-art {
    object-position: 50% 48% !important;
    transform: scale(1.005) !important;
  }

  .visual-card-large strong {
    max-width: 670px !important;
    font-size: clamp(1.72rem, 2.70vw, 2.30rem) !important;
    line-height: 1.03 !important;
  }

  .visual-card-large p {
    max-width: 600px !important;
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 178px !important;
    padding: 16px 14px 15px !important;
    border-radius: 20px !important;
  }

  .visual-tile .tile-icon {
    top: 13px !important;
    padding: 6px 11px !important;
    font-size: .72rem !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 72px !important;
    height: 72px !important;
    top: 42px !important;
    opacity: .82 !important;
  }

  .visual-tile .tile-title {
    font-size: 1.05rem !important;
    line-height: 1.06 !important;
    margin-bottom: 5px !important;
  }

  .visual-tile small {
    font-size: .78rem !important;
    line-height: 1.18 !important;
  }

  .hero-experience-card {
    width: min(620px, 100%) !important;
    max-width: 620px !important;
    min-height: 190px !important;
    margin-top: 28px !important;
    padding: 26px 30px !important;
    grid-template-columns: 122px 1fr !important;
    gap: 24px !important;
  }

  .experience-badge {
    width: 106px !important;
    height: 106px !important;
  }

  .hero-experience-eyebrow {
    max-width: 440px !important;
    font-size: .94rem !important;
    line-height: 1.33 !important;
  }

  .hero-experience-copy {
    max-width: 440px !important;
    font-size: 1.14rem !important;
    line-height: 1.38 !important;
  }
}

@media (min-width: 1500px) {
  .hero .container {
    max-width: 1540px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(600px, 0.92fr) minmax(720px, 1.08fr) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.22 desktop hero re-balance
   User request:
   1) reduce hero visual width by ~10%
   2) increase hero visual height by ~15%
   3) replace ACCESS mini-card icon
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-grid {
    grid-template-columns: minmax(610px, 1.04fr) minmax(610px, 0.96fr) !important;
    gap: clamp(30px, 3.2vw, 50px) !important;
    align-items: start !important;
  }

  .hero-visual {
    width: 90% !important;
    justify-self: end !important;
    padding: 16px !important;
    gap: 16px !important;
    grid-template-rows: 483px 205px !important;
    border-radius: 32px !important;
  }

  .visual-card-large {
    height: 483px !important;
    min-height: 483px !important;
    padding: 24px !important;
  }

  .visual-art {
    object-position: 52% 48% !important;
    transform: scale(1.01) !important;
  }

  .visual-card-large .visual-kicker {
    max-width: 360px !important;
  }

  .visual-card-large strong {
    max-width: 560px !important;
    font-size: clamp(1.56rem, 2.35vw, 2.02rem) !important;
    line-height: 1.02 !important;
  }

  .visual-card-large p {
    max-width: 520px !important;
    font-size: 0.98rem !important;
    line-height: 1.32 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 205px !important;
    padding: 16px 14px 16px !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 70px !important;
    height: 70px !important;
    top: 44px !important;
    opacity: .84 !important;
  }

  .visual-tile .tile-title {
    font-size: 0.98rem !important;
    line-height: 1.03 !important;
    margin-bottom: 4px !important;
  }

  .visual-tile small {
    font-size: .75rem !important;
    line-height: 1.17 !important;
  }
}

@media (min-width: 1500px) {
  .hero-grid {
    grid-template-columns: minmax(630px, 1.05fr) minmax(650px, 0.95fr) !important;
  }

  .hero-visual {
    width: 89% !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.23 desktop alignment/polish pass
   Goal before mobile refinement:
   - Stop hero from being pulled too far right.
   - Align hero module with the page/service card rhythm.
   - Increase useful hero height without making it wider.
   - Remove duplicated baked-in text issue by using clean hero asset.
   - Keep ACCESS as real access-control reader icon.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .hero .container {
    max-width: 1440px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(580px, 1fr) minmax(620px, 1fr) !important;
    gap: clamp(32px, 3.4vw, 54px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 10px !important;
  }

  .hero-copy h1 {
    font-size: clamp(3.25rem, 5.35vw, 5.18rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.075em !important;
    margin-bottom: 18px !important;
  }

  .hero-subtitle {
    max-width: 660px !important;
    font-size: 1.07rem !important;
    line-height: 1.50 !important;
    margin-bottom: 19px !important;
  }

  .hero-contact-line {
    gap: 20px !important;
    margin-bottom: 14px !important;
  }

  .hero-visual {
    width: 96% !important;
    justify-self: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 32px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 500px 205px !important;
  }

  .visual-card-large {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 2 !important;
    height: 500px !important;
    min-height: 500px !important;
    padding: 24px !important;
    border-radius: 25px !important;
    overflow: hidden !important;
  }

  .visual-art {
    object-position: 50% 48% !important;
    transform: scale(1.006) !important;
    filter: saturate(1.08) contrast(1.06) brightness(.99) !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5, 11, 20, .38) 0%, rgba(5, 11, 20, .10) 48%, rgba(5, 11, 20, .16) 100%),
      linear-gradient(180deg, rgba(5, 11, 20, .01) 0%, rgba(5, 11, 20, .10) 50%, rgba(5, 11, 20, .56) 100%) !important;
  }

  .visual-card-large .visual-kicker {
    max-width: fit-content !important;
    margin-bottom: 9px !important;
    padding: 7px 12px !important;
    font-size: .72rem !important;
    background: rgba(9, 31, 57, .72) !important;
    border: 1px solid rgba(143,203,255,.24) !important;
  }

  .visual-card-large strong {
    max-width: 620px !important;
    font-size: clamp(1.55rem, 2.45vw, 2.08rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 8px !important;
  }

  .visual-card-large p {
    max-width: 540px !important;
    font-size: .98rem !important;
    line-height: 1.35 !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 205px !important;
    padding: 16px 14px 16px !important;
    border-radius: 20px !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-end !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 72px !important;
    height: 72px !important;
    top: 44px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: .84 !important;
    object-fit: contain !important;
  }

  .visual-tile .tile-icon {
    top: 13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 6px 11px !important;
    font-size: .72rem !important;
  }

  .visual-tile .tile-title {
    font-size: 1.0rem !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
  }

  .visual-tile small {
    font-size: .75rem !important;
    line-height: 1.17 !important;
  }

  .hero-experience-card {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    min-height: 184px !important;
    margin-top: 28px !important;
    padding: 25px 30px !important;
    grid-template-columns: 118px 1fr !important;
    gap: 22px !important;
  }

  .experience-badge {
    width: 102px !important;
    height: 102px !important;
  }

  .hero-experience-eyebrow {
    max-width: 430px !important;
    font-size: .92rem !important;
    line-height: 1.32 !important;
  }

  .hero-experience-copy {
    max-width: 430px !important;
    font-size: 1.11rem !important;
    line-height: 1.36 !important;
  }
}

@media (min-width: 1500px) {
  .hero .container {
    max-width: 1480px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(610px, 1fr) minmax(650px, 1fr) !important;
  }

  .hero-visual {
    width: 95% !important;
    justify-self: center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.24 desktop alignment correction
   Screenshot review:
   - Hero visual was still sitting too far to the right compared
     with the service strip/cards below.
   - This pass brings the hero back inside the same visual rhythm
     as the rest of the homepage and keeps the added height.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .hero .container {
    max-width: 1320px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(535px, 0.98fr) minmax(570px, 1.02fr) !important;
    gap: clamp(26px, 2.6vw, 42px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 8px !important;
  }

  .hero-copy h1 {
    font-size: clamp(3.10rem, 5.00vw, 4.90rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.075em !important;
    margin-bottom: 18px !important;
  }

  .hero-subtitle {
    max-width: 620px !important;
    font-size: 1.05rem !important;
    line-height: 1.50 !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 640px !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 32px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 500px 205px !important;
  }

  .visual-card-large {
    height: 500px !important;
    min-height: 500px !important;
    padding: 24px !important;
    border-radius: 25px !important;
  }

  .visual-card-large strong {
    max-width: 590px !important;
    font-size: clamp(1.46rem, 2.28vw, 1.96rem) !important;
    line-height: 1.03 !important;
  }

  .visual-card-large p {
    max-width: 520px !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
  }

  .visual-card-large .visual-kicker {
    max-width: fit-content !important;
    font-size: .70rem !important;
    padding: 7px 11px !important;
  }

  .visual-art {
    object-position: 50% 48% !important;
    transform: scale(1.006) !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 205px !important;
    padding: 16px 12px 16px !important;
    border-radius: 20px !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 68px !important;
    height: 68px !important;
    top: 44px !important;
    opacity: .84 !important;
  }

  .visual-tile .tile-title {
    font-size: .95rem !important;
    line-height: 1.05 !important;
  }

  .visual-tile small {
    font-size: .71rem !important;
    line-height: 1.16 !important;
  }

  .hero-experience-card {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
  }
}

@media (min-width: 1500px) {
  .hero .container {
    max-width: 1340px !important;
  }

  .hero-grid {
    grid-template-columns: minmax(550px, 0.98fr) minmax(590px, 1.02fr) !important;
    gap: 42px !important;
  }

  .hero-visual {
    max-width: 660px !important;
    justify-self: start !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.25 desktop CTA row + hero vertical balance
   Screenshot review:
   - "Call Now" was wrapping to a second row, wasting vertical space.
   - Compact CTA buttons allow all 3 actions to stay on one line.
   - The saved height helps align the left experience card and right hero
     without pushing the right hero too far down.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .hero-actions .btn {
    white-space: nowrap !important;
    padding: 12px 18px !important;
    min-height: 46px !important;
    font-size: 0.92rem !important;
    line-height: 1 !important;
  }

  .hero-actions .btn-primary {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-actions .btn-secondary,
  .hero-actions .btn-outline {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-copy {
    padding-top: 6px !important;
  }

  .hero-copy h1 {
    margin-bottom: 16px !important;
  }

  .hero-subtitle {
    margin-bottom: 16px !important;
  }

  .hero-contact-line {
    margin-bottom: 13px !important;
  }

  .trust-row {
    margin-bottom: 0 !important;
  }

  .hero-experience-card {
    margin-top: 24px !important;
  }
}

/* Slightly tighter CTA behavior for medium desktop widths */
@media (min-width: 1041px) and (max-width: 1280px) {
  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn {
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 0.88rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.26 desktop final micro-adjustment
   User review: v6.25 is close. Add only a controlled +5%
   vertical increase to the right hero module.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 525px 215px !important;
  }

  .visual-card-large {
    height: 525px !important;
    min-height: 525px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 215px !important;
  }

  .visual-art {
    object-position: 50% 48% !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.27 desktop final micro-polish
   Review from v6.26:
   1) Add only a near-imperceptible +1.5% height to the right hero.
   2) Center the left capability chips (Voice/Data/Video/Audio/Security)
      relative to the "Backed by 20+ years" card width.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 533px 218px !important;
  }

  .visual-card-large {
    height: 533px !important;
    min-height: 533px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 218px !important;
  }

  /* Center capability chips using the same visual width as the experience card */
  .trust-row {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .trust-row a {
    text-align: center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.28 desktop left-body color + typography polish
   Requested adjustments:
   1) Slightly reduce "Professional Low-Voltage Technology Integration".
   2) Homologate key accents to the logo metallic-blue family:
      - Serving Pennsylvania & New Jersey
      - Header Request an Estimate button
      - Hero Request an Estimate button
      - Contact line: Call Now / Direct / email
      - Backed by 20+ years experience label
   Scope: desktop only, preserving current structure.
--------------------------------------------------------- */
:root {
  --itts-metal-blue: #4f9cff;
  --itts-metal-blue-light: #8fcbff;
  --itts-metal-blue-deep: #1f6dff;
}

@media (min-width: 1041px) {
  /* Reduce headline just enough to feel closer to the approved mockup */
  .hero-copy h1 {
    font-size: clamp(3.00rem, 4.85vw, 4.78rem) !important;
    line-height: 0.985 !important;
    letter-spacing: -0.070em !important;
    margin-bottom: 18px !important;
  }

  /* Metallic-blue brand accent for eyebrow / location */
  .hero .eyebrow,
  .section .eyebrow,
  .hero-area-note strong,
  .hero-area-note {
    color: var(--itts-metal-blue-light) !important;
  }

  .hero .eyebrow {
    text-shadow: 0 0 18px rgba(79, 156, 255, 0.18) !important;
  }

  /* Header CTA + Hero primary CTA in same metallic-blue language */
  .site-header .btn-primary,
  .nav-cta,
  .hero-actions .btn-primary {
    background:
      linear-gradient(180deg, #5aa7ff 0%, #2f7dff 54%, #1f6dff 100%) !important;
    border-color: rgba(143, 203, 255, 0.36) !important;
    color: #ffffff !important;
    box-shadow:
      0 14px 32px rgba(31, 109, 255, 0.28),
      inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .site-header .btn-primary:hover,
  .nav-cta:hover,
  .hero-actions .btn-primary:hover {
    background:
      linear-gradient(180deg, #6db4ff 0%, #3588ff 54%, #2474ff 100%) !important;
    box-shadow:
      0 18px 40px rgba(31, 109, 255, 0.34),
      0 0 22px rgba(79, 156, 255, 0.16),
      inset 0 1px 0 rgba(255,255,255,0.20) !important;
  }

  /* Hero contact line in metallic blue */
  .hero-contact-line,
  .hero-contact-line a,
  .hero-contact-line span {
    color: var(--itts-metal-blue-light) !important;
  }

  .hero-contact-line a {
    text-shadow: 0 0 14px rgba(79, 156, 255, 0.14) !important;
  }

  .hero-contact-line a:hover {
    color: #ffffff !important;
  }

  /* Experience card label in the same brand blue */
  .hero-experience-eyebrow {
    color: var(--itts-metal-blue-light) !important;
    text-shadow: 0 0 18px rgba(79, 156, 255, 0.18) !important;
  }

  /* Keep capability chips centered relative to the experience card */
  .trust-row {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    justify-content: center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.29 visible desktop polish correction
   Purpose: v6.28 change was too subtle / may have appeared unchanged.
   This pass makes the requested adjustments clearly visible:
   - Hero headline reduced enough to recover balance.
   - Brand accent blue applied with stronger selectors.
   - CTA buttons standardized to ITTS metallic-blue.
   Desktop only.
--------------------------------------------------------- */

:root {
  --itts-metal-blue: #3f8cff;
  --itts-metal-blue-light: #8fcaff;
  --itts-metal-blue-hot: #5aa7ff;
  --itts-metal-blue-deep: #1f6dff;
}

@media (min-width: 1041px) {
  /* Stronger, visible headline reduction */
  body .hero .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(2.72rem, 4.38vw, 4.35rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.064em !important;
    margin-bottom: 18px !important;
    max-width: 670px !important;
  }

  /* Keep the text block visually strong after reducing headline */
  body .hero-subtitle,
  .hero-subtitle {
    max-width: 640px !important;
    font-size: 1.06rem !important;
    line-height: 1.52 !important;
  }

  /* Homologated metallic-blue accents */
  body .hero .eyebrow,
  body .hero-area-note,
  body .hero-area-note strong,
  body .hero-contact-line,
  body .hero-contact-line a,
  body .hero-contact-line span,
  body .hero-experience-eyebrow {
    color: var(--itts-metal-blue-light) !important;
    text-shadow: 0 0 16px rgba(79,156,255,0.16) !important;
  }

  body .hero-contact-line a:hover {
    color: #ffffff !important;
  }

  /* Make header and hero Request Estimate buttons visibly closer to logo blue */
  body .site-header .btn-primary,
  body .site-header .nav-cta,
  body .hero-actions .btn-primary,
  body a.btn.btn-primary {
    background:
      linear-gradient(180deg, #6bb4ff 0%, #3f8cff 48%, #1f6dff 100%) !important;
    border: 1px solid rgba(143, 203, 255, 0.42) !important;
    color: #ffffff !important;
    box-shadow:
      0 12px 30px rgba(31,109,255,.28),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  body .site-header .btn-primary:hover,
  body .site-header .nav-cta:hover,
  body .hero-actions .btn-primary:hover,
  body a.btn.btn-primary:hover {
    background:
      linear-gradient(180deg, #7ac0ff 0%, #4b98ff 48%, #2878ff 100%) !important;
    box-shadow:
      0 16px 38px rgba(31,109,255,.34),
      0 0 22px rgba(79,156,255,.18),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  /* Keep capability chips centered with Backed by 20+ years card */
  body .trust-row {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Slightly tighten vertical rhythm after headline reduction */
  body .hero-actions {
    margin-bottom: 12px !important;
  }

  body .hero-contact-line {
    margin-bottom: 13px !important;
  }

  body .hero-experience-card {
    margin-top: 24px !important;
  }
}

/* Medium desktop safety: keep headline from dominating again */
@media (min-width: 1041px) and (max-width: 1320px) {
  body .hero .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(2.60rem, 4.10vw, 4.05rem) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.30 desktop headline + metallic blue correction
   Goal:
   - Reduce headline enough so "Voltage Technology" can sit on the same line.
   - Sharpen blue accents using a stronger ITTS/logo-inspired electric blue.
   - Override earlier rules with high-specificity selectors.
   Desktop only.
--------------------------------------------------------- */
:root {
  --itts-logo-blue: #2f7dff;
  --itts-logo-blue-bright: #4fa3ff;
  --itts-logo-blue-metal: #77bdff;
  --itts-logo-blue-deep: #0f5dff;
}

@media (min-width: 1041px) {
  /* Headline: intentionally smaller and wider to match the approved mockup rhythm */
  html body .hero .hero-copy h1,
  body .hero-copy h1,
  .hero-copy h1 {
    max-width: 740px !important;
    font-size: clamp(2.55rem, 4.05vw, 4.02rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 18px !important;
  }

  /* Keep hero left column from forcing unnecessary wraps */
  html body .hero-grid {
    grid-template-columns: minmax(610px, 1.02fr) minmax(600px, 0.98fr) !important;
  }

  html body .hero-subtitle,
  body .hero-subtitle,
  .hero-subtitle {
    max-width: 690px !important;
    font-size: 1.05rem !important;
    line-height: 1.52 !important;
  }

  /* Stronger ITTS/logo blue accents */
  html body .hero .eyebrow,
  html body .hero-area-note,
  html body .hero-area-note strong,
  html body .hero-contact-line,
  html body .hero-contact-line a,
  html body .hero-contact-line span,
  html body .hero-experience-eyebrow {
    color: var(--itts-logo-blue-metal) !important;
    text-shadow:
      0 0 10px rgba(47, 125, 255, 0.22),
      0 0 22px rgba(47, 125, 255, 0.12) !important;
  }

  html body .hero .eyebrow {
    letter-spacing: .18em !important;
  }

  html body .hero-contact-line a:hover {
    color: #ffffff !important;
  }

  /* Sharper metallic-blue CTA treatment */
  html body .site-header .btn-primary,
  html body .site-header .nav-cta,
  html body header .btn-primary,
  html body .hero-actions .btn-primary,
  html body a.btn.btn-primary {
    background:
      linear-gradient(180deg, #78bdff 0%, #4fa3ff 35%, #2f7dff 70%, #185fff 100%) !important;
    border: 1px solid rgba(143, 203, 255, 0.64) !important;
    color: #ffffff !important;
    box-shadow:
      0 14px 34px rgba(47, 125, 255, 0.34),
      0 0 22px rgba(47, 125, 255, 0.16),
      inset 0 1px 0 rgba(255,255,255,0.30) !important;
  }

  html body .site-header .btn-primary:hover,
  html body .site-header .nav-cta:hover,
  html body header .btn-primary:hover,
  html body .hero-actions .btn-primary:hover,
  html body a.btn.btn-primary:hover {
    background:
      linear-gradient(180deg, #8dccff 0%, #5cb0ff 35%, #3a8eff 70%, #216eff 100%) !important;
    border-color: rgba(170, 220, 255, 0.72) !important;
    box-shadow:
      0 18px 42px rgba(47, 125, 255, 0.40),
      0 0 28px rgba(47, 125, 255, 0.20),
      inset 0 1px 0 rgba(255,255,255,0.34) !important;
  }

  /* Experience label stronger blue */
  html body .hero-experience-eyebrow {
    color: var(--itts-logo-blue-metal) !important;
  }

  /* Retain chip centering under the contact row */
  html body .trust-row {
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Keep "Voltage Technology" together at common 1366-1440 laptop widths */
@media (min-width: 1041px) and (max-width: 1450px) {
  html body .hero .hero-copy h1,
  body .hero-copy h1,
  .hero-copy h1 {
    max-width: 700px !important;
    font-size: clamp(2.45rem, 3.75vw, 3.75rem) !important;
    line-height: 1.045 !important;
  }

  html body .hero-grid {
    grid-template-columns: minmax(590px, 1.02fr) minmax(560px, 0.98fr) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.31 desktop hero-right reduction
   User request:
   - Left side is approved.
   - Reduce the right hero module by about 20% to restore balance
     and stop the mini-cards from feeling stretched/distorted.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  /* Keep v6.30 left-side headline/color work, only reduce the right visual module. */
  .hero-visual {
    grid-template-rows: 426px 174px !important; /* ~20% down from 533px / 218px */
    max-width: 640px !important;
    width: 100% !important;
    justify-self: start !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .visual-card-large {
    height: 426px !important;
    min-height: 426px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 174px !important;
    padding: 15px 12px 14px !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    width: 64px !important;
    height: 64px !important;
    top: 40px !important;
  }

  .visual-tile .tile-title {
    font-size: .96rem !important;
    line-height: 1.05 !important;
  }

  .visual-tile small {
    font-size: .71rem !important;
    line-height: 1.15 !important;
  }

  .visual-art {
    object-position: 50% 48% !important;
    transform: scale(1.006) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.32 desktop final alignment request
   User request:
   1) Reduce "Backed by 20+ years" card by ~20% width and height.
   2) Move the right hero visual module ~15% to the left.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  /* Move the right hero module left without changing the approved left body */
  .hero-visual {
    transform: translateX(-15%) !important;
    transform-origin: center center !important;
  }

  /* Reduce experience card footprint approximately 20% */
  .hero-experience-card {
    width: min(488px, 100%) !important;
    max-width: 488px !important;
    min-height: 148px !important;
    margin-top: 22px !important;
    padding: 20px 22px !important;
    grid-template-columns: 88px 1fr !important;
    gap: 18px !important;
    border-radius: 18px !important;
  }

  .experience-badge {
    width: 78px !important;
    height: 78px !important;
  }

  .hero-experience-eyebrow {
    max-width: 350px !important;
    font-size: .78rem !important;
    line-height: 1.30 !important;
    margin-bottom: 7px !important;
  }

  .hero-experience-copy {
    max-width: 350px !important;
    font-size: .94rem !important;
    line-height: 1.34 !important;
  }

  /* Keep the capability chips centered relative to the now-smaller card */
  .trust-row {
    width: min(488px, 100%) !important;
    max-width: 488px !important;
    justify-content: center !important;
  }
}

/* Keep the hero from over-shifting on medium desktop widths */
@media (min-width: 1041px) and (max-width: 1280px) {
  .hero-visual {
    transform: translateX(-10%) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.33 desktop left-text reduction
   User request:
   1) Reduce hero subtitle by approximately 2pt.
   2) Reduce hero headline by approximately 2pt.
   Scope: desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  html body .hero .hero-copy h1,
  body .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(2.58rem, 4.14vw, 4.18rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.060em !important;
    max-width: 720px !important;
  }

  html body .hero-subtitle,
  body .hero-subtitle,
  .hero-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.50 !important;
    max-width: 640px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1450px) {
  html body .hero .hero-copy h1,
  body .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(2.48rem, 3.55vw, 3.58rem) !important;
    line-height: 1.015 !important;
    max-width: 690px !important;
  }

  html body .hero-subtitle,
  body .hero-subtitle,
  .hero-subtitle {
    font-size: 0.90rem !important;
    line-height: 1.50 !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.34 hero mini-cards replication
   Goal:
   Match the approved sample mini-cards under the hero:
   - same general size
   - same text hierarchy
   - same centered image treatment
   - cleaner, more premium card appearance
   Desktop-focused.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 426px 184px !important;
    gap: 16px !important;
  }

  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile,
  .hero-visual .visual-tile {
    min-height: 184px !important;
    padding: 14px 14px 16px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(50, 125, 255, 0.14) 0%, rgba(50, 125, 255, 0.06) 23%, rgba(50, 125, 255, 0.00) 52%),
      linear-gradient(180deg, rgba(19, 30, 48, 0.94) 0%, rgba(10, 18, 31, 0.98) 100%) !important;
    border: 1px solid rgba(90, 128, 196, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 28px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(34, 88, 182, 0.08) !important;
    overflow: hidden !important;
  }

  .hero-visual .visual-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(77, 135, 255, 0.00) 0%, rgba(77, 135, 255, 0.05) 50%, rgba(77, 135, 255, 0.00) 100%),
      radial-gradient(circle at 50% 50%, rgba(65, 130, 255, 0.10) 0%, rgba(65, 130, 255, 0.00) 55%);
    pointer-events: none;
    z-index: 0;
  }

  .visual-tile .tile-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    order: 1 !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #2f7dff !important;
  }

  .visual-tile .tile-art-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    order: 2 !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: 66px !important;
    max-width: 92px !important;
    object-fit: contain !important;
    margin: 4px auto 14px !important;
    filter: drop-shadow(0 8px 18px rgba(47, 125, 255, 0.18)) !important;
    transform: none !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: none !important;
  }

  .visual-tile .tile-title {
    display: none !important;
  }

  .visual-tile small {
    order: 3 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 120px !important;
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-wrap: balance;
  }

  .visual-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(110, 158, 235, 0.54) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 16px 32px rgba(0, 0, 0, 0.28),
      0 0 22px rgba(47, 125, 255, 0.10) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.35 hero mini-cards match approved reference
   Request:
   1) Center CCTV / DATA / VOICE / ACCESS titles and add a stronger
      highlight effect.
   2) Make each card use a larger "mini image" treatment like the sample,
      instead of a small faint logo.
   Scope: desktop mini-cards under the hero.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-visual {
    grid-template-rows: 426px 184px !important;
    gap: 16px !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 184px !important;
    padding: 13px 12px 15px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(45,125,255,0.18) 0%, rgba(45,125,255,0.08) 28%, rgba(45,125,255,0.00) 58%),
      radial-gradient(circle at 80% 70%, rgba(31,143,255,0.10), transparent 42%),
      linear-gradient(180deg, rgba(18,30,48,0.96) 0%, rgba(8,16,30,0.98) 100%) !important;
    border: 1px solid rgba(96,126,188,0.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.045),
      0 12px 30px rgba(0,0,0,0.24),
      0 0 0 1px rgba(42,100,210,0.08) !important;
  }

  .hero-visual .visual-tile::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(44,116,255,0.07) 50%, transparent 100%),
      radial-gradient(circle at 50% 54%, rgba(52,135,255,0.16), transparent 44%) !important;
    pointer-events: none !important;
  }

  .hero-visual .visual-tile::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 42px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(47,125,255,.28), transparent) !important;
    opacity: .55 !important;
    pointer-events: none !important;
  }

  /* Hide the old pill label. The visible title is now the centered blue heading. */
  .visual-tile .tile-icon {
    display: none !important;
  }

  /* Centered, highlighted titles like the reference */
  .visual-tile .tile-title {
    display: block !important;
    order: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    margin: 0 0 8px !important;
    max-width: 100% !important;
    color: #2f7dff !important;
    font-size: .80rem !important;
    line-height: 1.0 !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow:
      0 0 10px rgba(47,125,255,.35),
      0 0 20px rgba(47,125,255,.18) !important;
  }

  /* Mini image treatment: larger, centered, cleaner */
  .visual-tile .tile-art-icon {
    display: block !important;
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    width: auto !important;
    height: 78px !important;
    max-width: 112px !important;
    margin: 0 auto 12px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    filter:
      drop-shadow(0 10px 18px rgba(47,125,255,.20))
      drop-shadow(0 0 8px rgba(47,125,255,.12)) !important;
  }

  .camera-tile .tile-art-icon {
    height: 82px !important;
    max-width: 116px !important;
  }

  .network-tile .tile-art-icon {
    height: 76px !important;
    max-width: 118px !important;
  }

  .phone-tile .tile-art-icon {
    height: 78px !important;
    max-width: 112px !important;
  }

  .access-tile .tile-art-icon {
    height: 78px !important;
    max-width: 102px !important;
  }

  /* Remove watermark duplication so the mini image reads like the sample */
  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: none !important;
  }

  .visual-tile small {
    order: 3 !important;
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 126px !important;
    color: #ffffff !important;
    font-size: .68rem !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
  }

  .hero-visual .visual-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(96,158,255,.62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 16px 34px rgba(0,0,0,.28),
      0 0 22px rgba(47,125,255,.12) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.36 desktop final image replacement
   - Replaces hero image with final integrated low-voltage visual.
   - Replaces mini-card icons with HD product images:
     dome camera, blue patchcord, Android-style VoIP phone, keypad/card reader.
   - Hides HTML overlay text on the hero image because the v6.36 hero
     image already includes the integrated title/text treatment.
   Scope: desktop hero / mini-cards.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .visual-card-large .visual-kicker,
  .visual-card-large strong,
  .visual-card-large p {
    display: none !important;
  }

  .visual-card-large {
    justify-content: flex-end !important;
    height: 426px !important;
    min-height: 426px !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5,11,20,.06), rgba(5,11,20,.00) 46%, rgba(5,11,20,.04)),
      linear-gradient(180deg, rgba(5,11,20,.00), rgba(5,11,20,.06) 100%) !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: scale(1.0) !important;
    filter: saturate(1.04) contrast(1.03) brightness(.98) !important;
  }

  .hero-visual {
    grid-template-rows: 426px 184px !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 184px !important;
    padding: 13px 12px 14px !important;
  }

  .visual-tile .tile-title {
    display: block !important;
    order: 1 !important;
    margin-bottom: 8px !important;
    color: #2f7dff !important;
    font-size: .80rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow:
      0 0 10px rgba(47,125,255,.42),
      0 0 22px rgba(47,125,255,.22) !important;
  }

  .visual-tile .tile-icon {
    display: none !important;
  }

  .visual-tile .tile-art-icon {
    display: block !important;
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 78px !important;
    max-width: 118px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
    margin: 0 auto 10px !important;
    opacity: 1 !important;
    transform: none !important;
    filter:
      drop-shadow(0 10px 18px rgba(47,125,255,.22))
      drop-shadow(0 0 10px rgba(47,125,255,.14)) !important;
  }

  .camera-tile .tile-art-icon {
    height: 82px !important;
    max-width: 114px !important;
  }

  .network-tile .tile-art-icon {
    height: 78px !important;
    max-width: 120px !important;
  }

  .phone-tile .tile-art-icon {
    height: 80px !important;
    max-width: 118px !important;
  }

  .access-tile .tile-art-icon {
    height: 80px !important;
    max-width: 104px !important;
    object-fit: cover !important;
  }

  .tile-art-watermark,
  .camera-tile .tile-art-watermark,
  .network-tile .tile-art-watermark,
  .phone-tile .tile-art-watermark,
  .access-tile .tile-art-watermark {
    display: none !important;
  }

  .visual-tile small {
    max-width: 126px !important;
    font-size: .68rem !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.37 desktop hero final correction
   Approved changes:
   - Use approved flat hero background image without baked text.
   - Restore previous editable HTML overlay text on top of hero image.
   - Use approved 20+ years shield.
   - Keep mini-card HD product images from v6.36.
   Scope: desktop hero area.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  /* Restore editable overlay text that v6.36 hid */
  .visual-card-large .visual-kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-bottom: 8px !important;
    padding: 7px 12px !important;
    color: #dceeff !important;
    background: rgba(9, 31, 57, .76) !important;
    border: 1px solid rgba(143, 203, 255, .25) !important;
    border-radius: 999px !important;
    font-size: .70rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(8px);
  }

  .visual-card-large strong {
    display: block !important;
    max-width: 590px !important;
    margin: 0 0 7px !important;
    color: #ffffff !important;
    font-size: clamp(1.46rem, 2.28vw, 1.96rem) !important;
    line-height: 1.03 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.46) !important;
  }

  .visual-card-large p {
    display: block !important;
    max-width: 520px !important;
    color: rgba(235, 245, 255, .92) !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
  }

  .visual-card-large {
    height: 426px !important;
    min-height: 426px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 24px !important;
    overflow: hidden !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(4, 10, 22, .58) 0%, rgba(4, 10, 22, .24) 44%, rgba(4, 10, 22, .12) 100%),
      linear-gradient(180deg, rgba(4, 10, 22, .02) 0%, rgba(4, 10, 22, .16) 52%, rgba(4, 10, 22, .72) 100%) !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: scale(1.0) !important;
    filter: saturate(1.04) contrast(1.04) brightness(.98) !important;
  }

  /* Approved shield badge, corrected centering/sizing */
  .experience-badge {
    width: 82px !important;
    height: 82px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    justify-self: center !important;
    align-self: center !important;
    filter:
      drop-shadow(0 8px 18px rgba(47,125,255,.20))
      drop-shadow(0 0 10px rgba(47,125,255,.12)) !important;
  }

  .hero-experience-card {
    align-items: center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.38 desktop final alignment
   Goal:
   Center Voice / Data / Video / Audio / Security chips in relation
   to the "Backed by 20+ years" card below.
   Desktop only.
--------------------------------------------------------- */
@media (min-width: 1041px) {
  .hero-copy .trust-row,
  .trust-row {
    width: min(488px, 100%) !important;
    max-width: 488px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-copy .trust-row a,
  .trust-row a {
    flex: 0 0 auto !important;
    text-align: center !important;
  }

  .hero-experience-card {
    width: min(488px, 100%) !important;
    max-width: 488px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1280px) {
  .hero-copy .trust-row,
  .trust-row {
    width: min(488px, 100%) !important;
    max-width: 488px !important;
    gap: 8px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.39M - Mobile Refinement Phase 1
   Base: v6.38 Official Desktop
   Desktop preserved. Mobile/tablet only.
--------------------------------------------------------- */

@media (max-width: 1040px) {
  .hero {
    padding: 42px 0 44px !important;
  }

  .hero .container {
    width: min(100% - 32px, 760px) !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .hero-copy {
    padding-top: 0 !important;
  }

  .hero .eyebrow {
    font-size: .78rem !important;
    letter-spacing: .16em !important;
    margin-bottom: 10px !important;
    color: #8fcaff !important;
  }

  .hero-area-note {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin-bottom: 22px !important;
    color: #d8e8ff !important;
  }

  .hero-copy h1 {
    max-width: 680px !important;
    font-size: clamp(2.55rem, 10.3vw, 4.65rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 18px !important;
  }

  .hero-subtitle {
    max-width: 680px !important;
    font-size: clamp(1.02rem, 3.65vw, 1.38rem) !important;
    line-height: 1.52 !important;
    margin-bottom: 24px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-height: 56px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 1.05rem !important;
    padding: 16px 20px !important;
  }

  .hero-contact-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-bottom: 18px !important;
    font-size: .95rem !important;
    line-height: 1.3 !important;
    color: #8fcaff !important;
  }

  .trust-row {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    padding: 1px 0 6px !important;
    margin: 0 0 20px !important;
    scrollbar-width: none !important;
  }

  .trust-row::-webkit-scrollbar {
    display: none !important;
  }

  .trust-row a {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 10px 17px !important;
    font-size: .94rem !important;
    border-radius: 999px !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 28px !important;
    margin: 0 auto !important;
  }

  .visual-card-large {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    height: clamp(300px, 58vw, 430px) !important;
    border-radius: 22px !important;
    padding: 22px !important;
    overflow: hidden !important;
    justify-content: flex-end !important;
  }

  .visual-card-large .visual-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 8px) !important;
    padding: 7px 11px !important;
    font-size: .66rem !important;
    letter-spacing: .09em !important;
    border-radius: 999px !important;
  }

  .visual-card-large strong {
    display: block !important;
    max-width: 92% !important;
    font-size: clamp(1.45rem, 6.8vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 8px !important;
  }

  .visual-card-large p {
    display: block !important;
    max-width: 92% !important;
    font-size: clamp(.95rem, 3.4vw, 1.20rem) !important;
    line-height: 1.42 !important;
  }

  .visual-card-large::before {
    background:
      linear-gradient(90deg, rgba(5,11,20,.50), rgba(5,11,20,.16) 52%, rgba(5,11,20,.05)),
      linear-gradient(180deg, rgba(5,11,20,.04), rgba(5,11,20,.18) 52%, rgba(5,11,20,.74)) !important;
  }

  .visual-art {
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: scale(1.0) !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 168px !important;
    height: auto !important;
    padding: 14px 10px 15px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .visual-tile .tile-icon {
    display: none !important;
  }

  .visual-tile .tile-title {
    display: block !important;
    order: 1 !important;
    margin: 0 0 8px !important;
    color: #2f7dff !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 0 0 10px rgba(47,125,255,.35) !important;
  }

  .visual-tile .tile-art-icon {
    display: block !important;
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 104px !important;
    height: 70px !important;
    margin: 0 auto 10px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    transform: none !important;
    filter: drop-shadow(0 8px 16px rgba(47,125,255,.20)) !important;
  }

  .tile-art-watermark {
    display: none !important;
  }

  .visual-tile small {
    order: 3 !important;
    max-width: 120px !important;
    font-size: .72rem !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
    color: #fff !important;
    text-align: center !important;
  }

  .hero-experience-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-top: 20px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 76px 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    border-radius: 20px !important;
  }

  .experience-badge {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .hero-experience-eyebrow {
    max-width: 100% !important;
    margin-bottom: 8px !important;
    font-size: .78rem !important;
    line-height: 1.28 !important;
    letter-spacing: .12em !important;
    color: #8fcaff !important;
  }

  .hero-experience-copy {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .service-strip {
    padding: 24px 0 !important;
  }

  .service-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .strip-item {
    min-height: 54px !important;
    padding: 13px 12px !important;
    font-size: .88rem !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  .site-header {
    min-height: 92px !important;
  }

  .site-header .container,
  .nav-wrap {
    min-height: 92px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .site-logo img,
  .brand-logo img,
  .logo img {
    max-height: 64px !important;
    width: auto !important;
  }

  .mobile-menu-toggle,
  .menu-toggle,
  .hamburger {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
  }

  .hero {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  .hero .container {
    width: min(100% - 28px, 520px) !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.45rem, 12vw, 3.55rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.06em !important;
    margin-bottom: 16px !important;
  }

  .hero-subtitle {
    font-size: 1.06rem !important;
    line-height: 1.52 !important;
    margin-bottom: 22px !important;
  }

  .hero-actions {
    gap: 11px !important;
  }

  .hero-actions .btn {
    min-height: 54px !important;
    font-size: 1rem !important;
  }

  .hero-visual {
    gap: 11px !important;
    padding: 10px !important;
    border-radius: 26px !important;
  }

  .visual-card-large {
    height: 340px !important;
    padding: 19px !important;
    border-radius: 20px !important;
  }

  .visual-card-large strong {
    font-size: clamp(1.40rem, 7.3vw, 2.05rem) !important;
  }

  .visual-card-large p {
    font-size: .98rem !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 152px !important;
    padding: 12px 8px 13px !important;
    border-radius: 16px !important;
  }

  .visual-tile .tile-art-icon {
    height: 62px !important;
    max-width: 94px !important;
    margin-bottom: 8px !important;
  }

  .visual-tile small {
    font-size: .66rem !important;
    line-height: 1.16 !important;
  }

  .hero-experience-card {
    grid-template-columns: 66px 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .experience-badge {
    width: 62px !important;
    height: 62px !important;
  }

  .hero-experience-eyebrow {
    font-size: .70rem !important;
    line-height: 1.25 !important;
  }

  .hero-experience-copy {
    font-size: .94rem !important;
    line-height: 1.32 !important;
  }
}

@media (max-width: 420px) {
  .site-logo img,
  .brand-logo img,
  .logo img {
    max-height: 58px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.25rem, 11.6vw, 3.20rem) !important;
  }

  .visual-card-large {
    height: 318px !important;
  }

  .visual-card-large .visual-kicker {
    font-size: .58rem !important;
    padding: 6px 9px !important;
  }

  .visual-card-large strong {
    font-size: 1.55rem !important;
  }

  .visual-card-large p {
    font-size: .88rem !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 145px !important;
  }

  .visual-tile .tile-title {
    font-size: .70rem !important;
  }

  .visual-tile .tile-art-icon {
    height: 56px !important;
    max-width: 88px !important;
  }

  .visual-tile small {
    font-size: .62rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.40M - Mobile Refinement Phase 2
   Based on v6.39M.
   Goal:
   - Improve the mobile service/chip buttons shown after the hero CTA.
   - Group Voice/Data/Video/Audio/Security into a clean 2-line layout.
   - Normalize the 8 service buttons below mini-cards so both columns align.
   Desktop remains untouched.
--------------------------------------------------------- */

/* Mobile capability chips: balanced 3 + 2 layout */
@media (max-width: 640px) {
  .trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 22px !important;
    scrollbar-width: none !important;
  }

  .trust-row a {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  /* Slight visual correction so the second row feels intentionally centered */
  .trust-row a:nth-child(4),
  .trust-row a:nth-child(5) {
    flex-basis: 118px !important;
    width: 118px !important;
    max-width: 118px !important;
  }
}

/* Very narrow phones: keep chip layout clean */
@media (max-width: 380px) {
  .trust-row {
    gap: 9px !important;
  }

  .trust-row a {
    flex-basis: 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    font-size: .86rem !important;
  }

  .trust-row a:nth-child(4),
  .trust-row a:nth-child(5) {
    flex-basis: 110px !important;
    width: 110px !important;
    max-width: 110px !important;
  }
}

/* Service strip: equal-size 2-column buttons */
@media (max-width: 1040px) {
  .service-strip-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .strip-item {
    width: 100% !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 16px !important;
    font-size: .92rem !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    white-space: normal !important;
  }
}

@media (max-width: 420px) {
  .service-strip-grid {
    gap: 11px !important;
  }

  .strip-item {
    min-height: 70px !important;
    height: 70px !important;
    padding: 9px 10px !important;
    font-size: .84rem !important;
    line-height: 1.14 !important;
    border-radius: 15px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.41M - Mobile Refinement Phase 3
   Mobile conversion pass: WhatsApp + Social Links + compact hero.
   Desktop protected.
--------------------------------------------------------- */
.btn-whatsapp {
  background: linear-gradient(180deg, #2fd27d, #0da55c) !important;
  color: #ffffff !important;
  border-color: rgba(180, 255, 215, 0.34) !important;
  box-shadow: 0 14px 32px rgba(13, 165, 92, 0.25), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.btn-whatsapp:hover {
  background: linear-gradient(180deg, #3ce18c, #11b464) !important;
  color: #ffffff !important;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #dceeff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  border: 1px solid rgba(143, 203, 255, .18);
  background: rgba(255,255,255,.045);
}

.social-links a:hover {
  border-color: rgba(79,156,255,.42);
  background: rgba(79,156,255,.10);
}

.footer-social-links {
  margin-top: 16px;
}

.contact-social-links {
  margin-top: 16px;
  margin-bottom: 10px;
}

.floating-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(180deg, #2fd27d, #0da55c);
  border: 1px solid rgba(190,255,220,.38);
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 24px rgba(13,165,92,.20);
}

.floating-whatsapp-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: #ffffff;
  font-size: .76rem;
  font-weight: 900;
}

.floating-whatsapp-label {
  font-size: .92rem;
  font-weight: 850;
}

@media (min-width: 1041px) {
  .hero-whatsapp-cta,
  .nav-whatsapp-link {
    display: none !important;
  }
}

@media (max-width: 1040px) {
  .hero-copy h1 {
    font-size: clamp(2.28rem, 9.25vw, 4.20rem) !important;
    line-height: 1.035 !important;
    margin-bottom: 15px !important;
  }

  .hero-subtitle {
    font-size: clamp(.98rem, 3.35vw, 1.22rem) !important;
    line-height: 1.48 !important;
    margin-bottom: 20px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  .hero-actions .btn {
    min-height: 54px !important;
    font-size: 1rem !important;
  }

  .hero-whatsapp-cta {
    display: inline-flex !important;
  }

  .hero-contact-line {
    gap: 6px !important;
    margin-bottom: 16px !important;
    font-size: .90rem !important;
  }

  .visual-card-large {
    height: clamp(285px, 54vw, 400px) !important;
  }

  .visual-card-large strong {
    font-size: clamp(1.35rem, 6.2vw, 2.15rem) !important;
  }

  .visual-card-large p {
    font-size: clamp(.88rem, 3.15vw, 1.08rem) !important;
  }

  .hero-experience-card {
    margin-top: 16px !important;
    padding: 15px !important;
    grid-template-columns: 64px 1fr !important;
    gap: 13px !important;
    border-radius: 18px !important;
  }

  .experience-badge {
    width: 58px !important;
    height: 58px !important;
  }

  .hero-experience-eyebrow {
    font-size: .68rem !important;
    line-height: 1.22 !important;
    margin-bottom: 6px !important;
  }

  .hero-experience-copy {
    font-size: .90rem !important;
    line-height: 1.30 !important;
  }

  .nav-whatsapp-link {
    display: inline-flex !important;
  }
}

@media (max-width: 640px) {
  .floating-whatsapp {
    display: inline-flex !important;
  }

  .hero {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.12rem, 10.3vw, 3.18rem) !important;
    line-height: 1.04 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle {
    font-size: 1.00rem !important;
    line-height: 1.48 !important;
    margin-bottom: 18px !important;
  }

  .hero-actions .btn {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: .98rem !important;
  }

  .visual-card-large {
    height: 310px !important;
  }

  .hero-visual .visual-tile,
  .camera-tile,
  .network-tile,
  .phone-tile,
  .access-tile {
    min-height: 146px !important;
  }

  .hero-experience-card {
    grid-template-columns: 58px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .experience-badge {
    width: 54px !important;
    height: 54px !important;
  }

  .footer-social-links,
  .contact-social-links {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .hero-copy h1 {
    font-size: clamp(2.02rem, 10vw, 2.90rem) !important;
  }

  .visual-card-large {
    height: 292px !important;
  }

  .floating-whatsapp {
    right: 14px;
    bottom: 14px;
    padding: 9px 12px 9px 9px;
  }

  .floating-whatsapp-icon {
    width: 32px;
    height: 32px;
  }

  .floating-whatsapp-label {
    font-size: .86rem;
  }
}


/* ---------------------------------------------------------
   ITTS v6.42M - Mobile Cleanup + CTA Organization
   Base: v6.41M
   Approved:
   - WhatsApp only as floating button and inside hamburger menu.
   - Remove WhatsApp from hero CTA row.
   - Remove Facebook/Instagram/WhatsApp from upper hero contact area.
   - Organize hero CTA buttons.
   - Compact capability chips and service strip buttons.
   Desktop protected.
--------------------------------------------------------- */

/* Ensure hero WhatsApp CTA is not displayed anywhere in the hero */
.hero-whatsapp-cta {
  display: none !important;
}

/* Keep nav WhatsApp available; desktop stays hidden */
@media (min-width: 1041px) {
  .nav-whatsapp-link {
    display: none !important;
  }
}

/* Mobile CTA organization */
@media (max-width: 1040px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
  }

  /* Approved mobile order:
     1. Call Now
     2. Request an Estimate
     3. View Our Services
  */
  .hero-call-cta {
    order: 1 !important;
  }

  .hero-request-cta {
    order: 2 !important;
  }

  .hero-services-cta {
    order: 3 !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 18px !important;
    font-size: .98rem !important;
    border-radius: 999px !important;
    justify-content: center !important;
  }

  /* Compact the contact line after removing social buttons from this area */
  .hero-contact-line {
    margin-top: 2px !important;
    margin-bottom: 15px !important;
    gap: 5px !important;
    font-size: .88rem !important;
    line-height: 1.28 !important;
  }

  /* Capability chips: intentional 3 + 2 layout, tighter and aligned */
  .trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
  }

  .trust-row a {
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .trust-row a:nth-child(4),
  .trust-row a:nth-child(5) {
    flex-basis: 112px !important;
    width: 112px !important;
    max-width: 112px !important;
  }

  /* Service strip: cleaner, equal 2-column layout */
  .service-strip {
    padding: 22px 0 !important;
  }

  .service-strip-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .strip-item {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 9px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    font-size: .82rem !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    white-space: normal !important;
  }

  /* Floating WhatsApp: smaller, circular, less intrusive */
  .floating-whatsapp {
    width: 58px !important;
    height: 58px !important;
    right: 16px !important;
    bottom: 16px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.30),
      0 0 20px rgba(13,165,92,.22) !important;
  }

  .floating-whatsapp-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: .86rem !important;
    background: rgba(255,255,255,.18) !important;
  }

  .floating-whatsapp-label {
    display: none !important;
  }
}

/* Phone-specific cleanup */
@media (max-width: 640px) {
  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn {
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: .96rem !important;
  }

  .hero-copy h1 {
    margin-bottom: 13px !important;
  }

  .hero-subtitle {
    margin-bottom: 17px !important;
  }

  .trust-row {
    gap: 9px !important;
    margin-bottom: 17px !important;
  }

  .trust-row a {
    flex-basis: 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    min-height: 42px !important;
    font-size: .86rem !important;
  }

  .trust-row a:nth-child(4),
  .trust-row a:nth-child(5) {
    flex-basis: 110px !important;
    width: 110px !important;
    max-width: 110px !important;
  }

  .strip-item {
    min-height: 62px !important;
    height: 62px !important;
    font-size: .80rem !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 420px) {
  .trust-row a {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    font-size: .82rem !important;
  }

  .trust-row a:nth-child(4),
  .trust-row a:nth-child(5) {
    flex-basis: 104px !important;
    width: 104px !important;
    max-width: 104px !important;
  }

  .strip-item {
    min-height: 60px !important;
    height: 60px !important;
    font-size: .76rem !important;
    line-height: 1.12 !important;
  }

  .floating-whatsapp {
    width: 54px !important;
    height: 54px !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  .floating-whatsapp-icon {
    width: 39px !important;
    height: 39px !important;
    font-size: .78rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.43M - Mobile Social Icons + Value Cards Compact Pass
   Base: v6.42M
   - Floating WhatsApp uses icon-only SVG.
   - Facebook/Instagram are icon buttons with "Connect with ITTS".
   - Secure/Connect/Communicate/Present value cards compacted on mobile.
   Desktop protected.
--------------------------------------------------------- */

/* Icon-based social links */
.social-icon-block {
  margin-top: 16px;
}

.social-icon-title {
  margin: 0 0 10px;
  color: #8fcaff;
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.social-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.social-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 900;
  border: 1px solid rgba(143,203,255,.24);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.18);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.social-facebook {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(180deg, #3b82ff, #1557d8);
}

.social-instagram {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, #6a5cff 0%, #d637a8 48%, #ff8a3d 100%);
}

.social-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.22);
}

/* Floating WhatsApp icon-only */
.floating-whatsapp {
  width: 54px !important;
  height: 54px !important;
  right: 16px !important;
  bottom: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #2fd27d, #0da55c) !important;
  border: 1px solid rgba(190,255,220,.42) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.30),
    0 0 22px rgba(13,165,92,.24),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.floating-whatsapp-svg {
  width: 31px !important;
  height: 31px !important;
  display: block !important;
  fill: #ffffff !important;
}

.floating-whatsapp-icon,
.floating-whatsapp-label {
  display: none !important;
}

@media (max-width: 1040px) {
  /* Value proposition section cards: Secure / Connect / Communicate / Present */
  .value-card,
  .strategy-card,
  .feature-card,
  .pillar-card,
  .solution-card {
    min-height: auto !important;
  }

  /* Broad targeting of the card pattern in the Integrated Technology Partner section */
  .integrated-section .card,
  .partner-section .card,
  .value-section .card,
  .systems-section .card,
  .features-grid .card,
  .solution-grid .card {
    min-height: auto !important;
  }

  .integrated-section,
  .partner-section,
  .value-section,
  .systems-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .integrated-section h2,
  .partner-section h2,
  .value-section h2,
  .systems-section h2 {
    font-size: clamp(2.05rem, 8.2vw, 3.1rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
  }

  .integrated-section .section-lead,
  .partner-section .section-lead,
  .value-section .section-lead,
  .systems-section .section-lead {
    font-size: 1.05rem !important;
    line-height: 1.48 !important;
    margin-bottom: 24px !important;
  }

  /* Compact cards by common classes and structural patterns */
  .value-card,
  .strategy-card,
  .feature-card,
  .pillar-card,
  .solution-card,
  .integrated-section .card,
  .partner-section .card,
  .value-section .card,
  .systems-section .card {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .value-card .eyebrow,
  .strategy-card .eyebrow,
  .feature-card .eyebrow,
  .pillar-card .eyebrow,
  .solution-card .eyebrow,
  .integrated-section .card .eyebrow,
  .partner-section .card .eyebrow,
  .value-section .card .eyebrow,
  .systems-section .card .eyebrow {
    font-size: .72rem !important;
    padding: 8px 14px !important;
    margin-bottom: 18px !important;
    border-radius: 999px !important;
  }

  .value-card h3,
  .strategy-card h3,
  .feature-card h3,
  .pillar-card h3,
  .solution-card h3,
  .integrated-section .card h3,
  .partner-section .card h3,
  .value-section .card h3,
  .systems-section .card h3 {
    font-size: clamp(1.28rem, 5.2vw, 1.72rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
    max-width: 78% !important;
  }

  .value-card p,
  .strategy-card p,
  .feature-card p,
  .pillar-card p,
  .solution-card p,
  .integrated-section .card p,
  .partner-section .card p,
  .value-section .card p,
  .systems-section .card p {
    font-size: .98rem !important;
    line-height: 1.42 !important;
    max-width: 86% !important;
  }

  .value-card img,
  .strategy-card img,
  .feature-card img,
  .pillar-card img,
  .solution-card img,
  .integrated-section .card img,
  .partner-section .card img,
  .value-section .card img,
  .systems-section .card img {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain !important;
    top: 22px !important;
    right: 22px !important;
  }

  .floating-whatsapp {
    display: inline-flex !important;
  }

  .contact-social-icons,
  .footer-social-icons {
    margin-top: 18px !important;
  }

  .contact-social-icons .social-icon-title,
  .footer-social-icons .social-icon-title {
    font-size: .76rem !important;
  }
}

@media (max-width: 640px) {
  .integrated-section,
  .partner-section,
  .value-section,
  .systems-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .integrated-section h2,
  .partner-section h2,
  .value-section h2,
  .systems-section h2 {
    font-size: clamp(1.92rem, 7.7vw, 2.65rem) !important;
  }

  .integrated-section .section-lead,
  .partner-section .section-lead,
  .value-section .section-lead,
  .systems-section .section-lead {
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }

  .value-card,
  .strategy-card,
  .feature-card,
  .pillar-card,
  .solution-card,
  .integrated-section .card,
  .partner-section .card,
  .value-section .card,
  .systems-section .card {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .value-card h3,
  .strategy-card h3,
  .feature-card h3,
  .pillar-card h3,
  .solution-card h3,
  .integrated-section .card h3,
  .partner-section .card h3,
  .value-section .card h3,
  .systems-section .card h3 {
    font-size: 1.38rem !important;
    max-width: 75% !important;
  }

  .value-card p,
  .strategy-card p,
  .feature-card p,
  .pillar-card p,
  .solution-card p,
  .integrated-section .card p,
  .partner-section .card p,
  .value-section .card p,
  .systems-section .card p {
    font-size: .94rem !important;
    line-height: 1.40 !important;
    max-width: 88% !important;
  }

  .value-card img,
  .strategy-card img,
  .feature-card img,
  .pillar-card img,
  .solution-card img,
  .integrated-section .card img,
  .partner-section .card img,
  .value-section .card img,
  .systems-section .card img {
    width: 52px !important;
    height: 52px !important;
    top: 20px !important;
    right: 20px !important;
  }

  .floating-whatsapp {
    width: 50px !important;
    height: 50px !important;
    right: 14px !important;
    bottom: 18px !important;
  }

  .floating-whatsapp-svg {
    width: 29px !important;
    height: 29px !important;
  }
}

@media (max-width: 420px) {
  .value-card,
  .strategy-card,
  .feature-card,
  .pillar-card,
  .solution-card,
  .integrated-section .card,
  .partner-section .card,
  .value-section .card,
  .systems-section .card {
    padding: 18px !important;
  }

  .value-card h3,
  .strategy-card h3,
  .feature-card h3,
  .pillar-card h3,
  .solution-card h3,
  .integrated-section .card h3,
  .partner-section .card h3,
  .value-section .card h3,
  .systems-section .card h3 {
    font-size: 1.25rem !important;
  }

  .value-card p,
  .strategy-card p,
  .feature-card p,
  .pillar-card p,
  .solution-card p,
  .integrated-section .card p,
  .partner-section .card p,
  .value-section .card p,
  .systems-section .card p {
    font-size: .88rem !important;
  }

  .social-icon {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}


/* ---------------------------------------------------------
   ITTS v6.44M - Mobile Mid-Page Card Density Pass
   Base: v6.43M
   Approved:
   1) Replace Instagram placeholder with a more accurate Instagram-style SVG.
   2) Compact Secure / Connect / Communicate / Present cards further.
   3) Compact How We Work process cards.
   4) Compact Industries cards.
   Desktop protected.
--------------------------------------------------------- */

/* Better social SVG rendering */
.social-icon {
  overflow: hidden !important;
}

.social-svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  fill: #ffffff !important;
}

.social-svg-instagram {
  width: 25px !important;
  height: 25px !important;
}

/* Mobile-only density improvements */
@media (max-width: 1040px) {
  /* 1) Secure / Connect / Communicate / Present */
  .section-solutions {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-solutions .section-heading {
    margin-bottom: 22px !important;
  }

  .section-solutions .section-heading h2 {
    font-size: clamp(2.0rem, 7.7vw, 3.0rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  .section-solutions .section-heading p:not(.eyebrow) {
    font-size: 1.02rem !important;
    line-height: 1.44 !important;
  }

  .section-solutions .solution-grid {
    gap: 14px !important;
  }

  .section-solutions .solution-card {
    min-height: auto !important;
    height: auto !important;
    padding: 19px 78px 19px 20px !important;
    border-radius: 22px !important;
  }

  .section-solutions .solution-card .solution-icon {
    width: 50px !important;
    height: 50px !important;
    top: 20px !important;
    right: 20px !important;
  }

  .section-solutions .solution-card span {
    min-height: 28px !important;
    margin-bottom: 15px !important;
    padding: 0 13px !important;
    font-size: .70rem !important;
  }

  .section-solutions .solution-card h3 {
    max-width: 100% !important;
    margin-bottom: 10px !important;
    font-size: clamp(1.22rem, 4.8vw, 1.55rem) !important;
    line-height: 1.10 !important;
  }

  .section-solutions .solution-card p {
    max-width: 100% !important;
    font-size: .94rem !important;
    line-height: 1.38 !important;
  }

  .section-solutions .solution-card::after {
    height: 2px !important;
    opacity: .34 !important;
  }

  /* 2) How We Work cards: turn giant cards into compact process blocks */
  .section-process {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-process .section-heading {
    margin-bottom: 22px !important;
  }

  .section-process .section-heading h2 {
    font-size: clamp(1.95rem, 7.4vw, 2.85rem) !important;
    line-height: 1.06 !important;
  }

  .process-grid,
  .process-grid-v62 {
    gap: 14px !important;
  }

  .process-card,
  .process-card-icon {
    min-height: auto !important;
    height: auto !important;
    padding: 18px 72px 18px 18px !important;
    border-radius: 22px !important;
    position: relative !important;
  }

  .process-card-icon::before {
    width: 58px !important;
    height: 58px !important;
    top: 16px !important;
    right: 16px !important;
    border-radius: 16px !important;
    opacity: .82 !important;
  }

  .process-icon {
    position: absolute !important;
    width: 42px !important;
    height: 42px !important;
    top: 23px !important;
    right: 24px !important;
    margin: 0 !important;
  }

  .process-card span,
  .process-card-icon span {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 14px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
  }

  .process-card h3,
  .process-card-icon h3 {
    max-width: 100% !important;
    margin-bottom: 8px !important;
    font-size: 1.14rem !important;
    line-height: 1.16 !important;
  }

  .process-card p,
  .process-card-icon p {
    max-width: 100% !important;
    font-size: .91rem !important;
    line-height: 1.38 !important;
  }

  /* 3) Industries: same text, smaller containers, less empty space */
  #industries {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  #industries .section-heading {
    margin-bottom: 22px !important;
  }

  #industries .section-heading h2 {
    font-size: clamp(1.95rem, 7.3vw, 2.80rem) !important;
    line-height: 1.06 !important;
  }

  .industry-grid,
  .industry-grid-rich {
    gap: 12px !important;
  }

  .industry-grid-rich .industry-item,
  .industry-grid-rich .industry-item-icon,
  .industry-item,
  .industry-item-icon {
    min-height: auto !important;
    height: auto !important;
    padding: 18px 68px 18px 18px !important;
    border-radius: 22px !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  .industry-icon {
    width: 38px !important;
    height: 38px !important;
    top: 18px !important;
    right: 18px !important;
  }

  .industry-grid-rich .industry-item-icon::after {
    width: 54px !important;
    height: 54px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 16px !important;
    opacity: .75 !important;
  }

  .industry-grid-rich .industry-item h3,
  .industry-grid-rich .industry-item-icon h3,
  .industry-item h3 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    margin-bottom: 3px !important;
  }

  .industry-grid-rich .industry-item p,
  .industry-grid-rich .industry-item-icon p,
  .industry-item p {
    font-size: .86rem !important;
    line-height: 1.32 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .section-solutions,
  .section-process,
  #industries {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .section-solutions .solution-grid,
  .process-grid,
  .process-grid-v62,
  .industry-grid,
  .industry-grid-rich {
    gap: 12px !important;
  }

  .section-solutions .solution-card {
    padding: 18px 68px 18px 18px !important;
    border-radius: 20px !important;
  }

  .section-solutions .solution-card .solution-icon {
    width: 46px !important;
    height: 46px !important;
    top: 18px !important;
    right: 18px !important;
  }

  .section-solutions .solution-card span {
    margin-bottom: 13px !important;
  }

  .section-solutions .solution-card h3 {
    font-size: 1.24rem !important;
    margin-bottom: 8px !important;
  }

  .section-solutions .solution-card p {
    font-size: .90rem !important;
    line-height: 1.34 !important;
  }

  .process-card,
  .process-card-icon {
    padding: 17px 64px 17px 17px !important;
    border-radius: 20px !important;
  }

  .process-card-icon::before {
    width: 52px !important;
    height: 52px !important;
  }

  .process-icon {
    width: 38px !important;
    height: 38px !important;
    top: 22px !important;
    right: 22px !important;
  }

  .process-card span,
  .process-card-icon span {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 12px !important;
    font-size: .78rem !important;
  }

  .process-card h3,
  .process-card-icon h3 {
    font-size: 1.08rem !important;
  }

  .process-card p,
  .process-card-icon p {
    font-size: .86rem !important;
    line-height: 1.34 !important;
  }

  .industry-grid-rich .industry-item,
  .industry-grid-rich .industry-item-icon,
  .industry-item,
  .industry-item-icon {
    padding: 16px 60px 16px 16px !important;
    border-radius: 20px !important;
  }

  .industry-icon {
    width: 34px !important;
    height: 34px !important;
    top: 17px !important;
    right: 17px !important;
  }

  .industry-grid-rich .industry-item-icon::after {
    width: 48px !important;
    height: 48px !important;
  }

  .industry-grid-rich .industry-item h3,
  .industry-grid-rich .industry-item-icon h3,
  .industry-item h3 {
    font-size: .96rem !important;
  }

  .industry-grid-rich .industry-item p,
  .industry-grid-rich .industry-item-icon p,
  .industry-item p {
    font-size: .82rem !important;
    line-height: 1.30 !important;
  }
}

@media (max-width: 420px) {
  .section-solutions .solution-card {
    padding: 16px 60px 16px 16px !important;
  }

  .section-solutions .solution-card h3 {
    font-size: 1.15rem !important;
  }

  .section-solutions .solution-card p {
    font-size: .84rem !important;
  }

  .process-card,
  .process-card-icon {
    padding: 16px 58px 16px 16px !important;
  }

  .process-icon {
    width: 34px !important;
    height: 34px !important;
    top: 20px !important;
    right: 20px !important;
  }

  .process-card-icon::before {
    width: 46px !important;
    height: 46px !important;
  }

  .industry-grid-rich .industry-item,
  .industry-grid-rich .industry-item-icon,
  .industry-item,
  .industry-item-icon {
    padding: 15px 56px 15px 15px !important;
  }

  .industry-icon {
    width: 32px !important;
    height: 32px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.45M - Final Mobile Touches
   Base: v6.44M
   - Service Area map improved on mobile.
   - Footer/contact social icons normalized to match hero/contact style.
   Desktop protected.
--------------------------------------------------------- */

/* Normalize social icons everywhere */
.social-icon-block {
  margin-top: 16px !important;
}

.social-icon-title {
  margin: 0 0 10px !important;
  color: #8fcaff !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.social-icon-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.social-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(143,203,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.18) !important;
}

.social-icon svg,
.social-svg {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
  display: block !important;
  fill: #ffffff !important;
  flex: 0 0 auto !important;
}

.social-instagram svg,
.social-svg-instagram {
  width: 24px !important;
  height: 24px !important;
}

.social-facebook {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(180deg, #3b82ff, #1557d8) !important;
}

.social-instagram {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg, #6a5cff 0%, #d637a8 48%, #ff8a3d 100%) !important;
}

.footer-social-icons .social-icon-row,
.contact-social-icons .social-icon-row {
  justify-content: flex-start !important;
}

/* Mobile Service Area map visibility */
@media (max-width: 1040px) {
  .service-area-card,
  .service-area-hero,
  .service-area-panel,
  .area-card {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Use stronger visible map layer on the common service-area blocks */
  .service-area-card::before,
  .service-area-hero::before,
  .service-area-panel::before,
  .area-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
      linear-gradient(90deg, rgba(6, 14, 26, .66), rgba(6, 14, 26, .34) 55%, rgba(6, 14, 26, .22)),
      linear-gradient(180deg, rgba(6, 14, 26, .20), rgba(6, 14, 26, .62)),
      url("assets/images/service-area-map-v645M.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: .72 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .service-area-card > *,
  .service-area-hero > *,
  .service-area-panel > *,
  .area-card > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .service-area-card::after,
  .service-area-hero::after,
  .service-area-panel::after,
  .area-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(circle at 72% 42%, rgba(47,125,255,.16), transparent 42%),
      linear-gradient(180deg, rgba(13, 31, 54, .08), rgba(3, 10, 20, .28)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* If the existing map is rendered as an img or background layer, bring it up */
@media (max-width: 1040px) {
  .service-map,
  .service-area-map,
  .map-bg,
  .map-layer {
    opacity: .52 !important;
    filter: saturate(1.1) contrast(1.08) brightness(1.05) !important;
  }
}

@media (max-width: 640px) {
  .social-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .social-icon svg,
  .social-svg {
    width: 22px !important;
    height: 22px !important;
  }

  .service-area-card::before,
  .service-area-hero::before,
  .service-area-panel::before,
  .area-card::before {
    opacity: .78 !important;
    background-position: center center !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.46M - Mobile Hamburger Menu Alignment Fix
   Base: v6.45M
   Approved issue:
   - Mobile hamburger menu links need cleaner alignment.
   - Request an Estimate button inside menu was visually unbalanced.
   Desktop protected.
--------------------------------------------------------- */

/* Mobile menu cleanup */
@media (max-width: 1040px) {
  /* Covers the common menu containers used in this static build */
  .site-nav,
  .primary-nav,
  .nav-menu,
  .main-nav,
  .mobile-nav {
    text-align: left !important;
  }

  .site-nav.is-open,
  .primary-nav.is-open,
  .nav-menu.is-open,
  .main-nav.is-open,
  .mobile-nav.is-open,
  .nav-open .site-nav,
  .nav-open .primary-nav,
  .nav-open .nav-menu,
  .nav-open .main-nav {
    width: calc(100% - 56px) !important;
    max-width: 760px !important;
    left: 28px !important;
    right: 28px !important;
    padding: 34px 36px !important;
    border-radius: 28px !important;
  }

  /* Align normal hamburger links */
  .site-nav a,
  .primary-nav a,
  .nav-menu a,
  .main-nav a,
  .mobile-nav a {
    text-align: left !important;
  }

  /* When the nav becomes the mobile overlay, all links should share a clean left edge */
  .site-nav.is-open a,
  .primary-nav.is-open a,
  .nav-menu.is-open a,
  .main-nav.is-open a,
  .mobile-nav.is-open a,
  .nav-open .site-nav a,
  .nav-open .primary-nav a,
  .nav-open .nav-menu a,
  .nav-open .main-nav a {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.15 !important;
  }

  /* Menu link rhythm */
  .site-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .primary-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-menu.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .main-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .mobile-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .site-nav a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .primary-nav a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .nav-menu a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .main-nav a:not(.nav-cta):not(.mobile-menu-request-cta) {
    min-height: 42px !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: rgba(235,245,255,.92) !important;
  }

  /* WhatsApp link in menu behaves like normal link, not a CTA */
  .nav-whatsapp-link {
    color: rgba(235,245,255,.92) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 42px !important;
  }

  /* Request Estimate button inside the hamburger menu */
  .site-nav.is-open .nav-cta,
  .primary-nav.is-open .nav-cta,
  .nav-menu.is-open .nav-cta,
  .main-nav.is-open .nav-cta,
  .mobile-nav.is-open .nav-cta,
  .site-nav.is-open .mobile-menu-request-cta,
  .primary-nav.is-open .mobile-menu-request-cta,
  .nav-menu.is-open .mobile-menu-request-cta,
  .main-nav.is-open .mobile-menu-request-cta,
  .mobile-nav.is-open .mobile-menu-request-cta,
  .nav-open .site-nav .nav-cta,
  .nav-open .primary-nav .nav-cta,
  .nav-open .nav-menu .nav-cta,
  .nav-open .main-nav .nav-cta {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    margin-top: 14px !important;
    padding: 16px 20px !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #2f8cff 0%, #1175f5 100%) !important;
    border: 1px solid rgba(178, 219, 255, .32) !important;
    box-shadow:
      0 14px 30px rgba(31, 143, 255, .20),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
}

@media (max-width: 640px) {
  .site-nav.is-open,
  .primary-nav.is-open,
  .nav-menu.is-open,
  .main-nav.is-open,
  .mobile-nav.is-open,
  .nav-open .site-nav,
  .nav-open .primary-nav,
  .nav-open .nav-menu,
  .nav-open .main-nav {
    width: calc(100% - 48px) !important;
    left: 24px !important;
    right: 24px !important;
    padding: 30px 30px !important;
    border-radius: 26px !important;
  }

  .site-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .primary-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-menu.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .main-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .mobile-nav.is-open a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .site-nav a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .primary-nav a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .nav-menu a:not(.nav-cta):not(.mobile-menu-request-cta),
  .nav-open .main-nav a:not(.nav-cta):not(.mobile-menu-request-cta) {
    min-height: 40px !important;
    font-size: 1.08rem !important;
  }

  .site-nav.is-open .nav-cta,
  .primary-nav.is-open .nav-cta,
  .nav-menu.is-open .nav-cta,
  .main-nav.is-open .nav-cta,
  .mobile-nav.is-open .nav-cta,
  .nav-open .site-nav .nav-cta,
  .nav-open .primary-nav .nav-cta,
  .nav-open .nav-menu .nav-cta,
  .nav-open .main-nav .nav-cta {
    min-height: 54px !important;
    margin-top: 12px !important;
    font-size: 1rem !important;
    padding: 15px 18px !important;
  }
}

@media (max-width: 420px) {
  .site-nav.is-open,
  .primary-nav.is-open,
  .nav-menu.is-open,
  .main-nav.is-open,
  .mobile-nav.is-open,
  .nav-open .site-nav,
  .nav-open .primary-nav,
  .nav-open .nav-menu,
  .nav-open .main-nav {
    width: calc(100% - 40px) !important;
    left: 20px !important;
    right: 20px !important;
    padding: 28px 26px !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.47M - Phase 1 Closeout: Desktop WhatsApp + Social Links
   Base: v6.46M
   - Keep approved desktop/mobile layouts.
   - Add floating WhatsApp visibility to desktop, discreet.
   - Ensure Connect with ITTS icons are available in Contact and Footer.
   - Keep mobile behavior from v6.46M.
--------------------------------------------------------- */

/* Desktop WhatsApp floating button - discreet, icon only */
@media (min-width: 1041px) {
  .floating-whatsapp {
    display: inline-flex !important;
    width: 54px !important;
    height: 54px !important;
    right: 24px !important;
    bottom: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #2fd27d, #0da55c) !important;
    border: 1px solid rgba(190,255,220,.42) !important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.30),
      0 0 22px rgba(13,165,92,.20),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 9999 !important;
  }

  .floating-whatsapp-svg {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    fill: #ffffff !important;
  }

  .floating-whatsapp-icon,
  .floating-whatsapp-label {
    display: none !important;
  }

  .floating-whatsapp:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 18px 38px rgba(0,0,0,.34),
      0 0 28px rgba(13,165,92,.26),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  /* Social blocks desktop: keep clean and aligned */
  .contact-social-icons,
  .footer-social-icons {
    margin-top: 18px !important;
  }

  .social-icon-title {
    margin: 0 0 10px !important;
    color: #8fcaff !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }

  .social-icon-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .social-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(143,203,255,.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 22px rgba(0,0,0,.18) !important;
  }

  .social-icon svg,
  .social-svg {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    display: block !important;
    fill: #ffffff !important;
    flex: 0 0 auto !important;
  }

  .social-facebook {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%),
      linear-gradient(180deg, #3b82ff, #1557d8) !important;
  }

  .social-instagram {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 32%),
      linear-gradient(135deg, #6a5cff 0%, #d637a8 48%, #ff8a3d 100%) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.48ES - Bilingual Phase 2
--------------------------------------------------------- */
.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #8fcaff !important;
  border: 1px solid rgba(143,203,255,.22);
  background: rgba(255,255,255,.045);
  font-weight: 850;
  font-size: .88rem;
  text-decoration: none;
}
.language-switch:hover {
  color: #ffffff !important;
  border-color: rgba(143,203,255,.42);
  background: rgba(47,125,255,.12);
}
@media (max-width: 1040px) {
  .language-switch {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(235,245,255,.92) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
  }
}

/* ---------------------------------------------------------
   ITTS v6.51ES - Spanish Hero Desktop Balance Fix
   Base: v6.50ES
   Fixes Spanish desktop only:
   - Spanish hero headline was too tall and caused imbalance.
   - Spanish hero subtitle was crossing into hero image area.
   - Adds stronger text width control on /es/ desktop.
   - English layout preserved.
--------------------------------------------------------- */

/* Spanish page: desktop hero text control */
@media (min-width: 1041px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr) !important;
    column-gap: clamp(42px, 5vw, 74px) !important;
    align-items: start !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 650px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.15rem, 4.2vw, 4.55rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.055em !important;
    max-width: 630px !important;
    margin-bottom: 22px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 610px !important;
    width: 100% !important;
    font-size: clamp(1rem, 1.05vw, 1.13rem) !important;
    line-height: 1.42 !important;
    margin-bottom: 22px !important;
    text-wrap: pretty;
  }

  html[lang="es"] .hero-actions {
    margin-bottom: 14px !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 610px !important;
    flex-wrap: wrap !important;
    row-gap: 7px !important;
    column-gap: 18px !important;
  }

  html[lang="es"] .hero-visual {
    min-width: 0 !important;
    align-self: start !important;
  }
}

/* Spanish page: laptop desktop widths need a little more compression */
@media (min-width: 1041px) and (max-width: 1360px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 0.90fr) minmax(0, 1.10fr) !important;
    column-gap: 44px !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(2.85rem, 3.9vw, 4.05rem) !important;
    max-width: 570px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 540px !important;
    font-size: .98rem !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 540px !important;
  }
}

/* Spanish page: keep mobile behavior from approved mobile version */
@media (max-width: 1040px) {
  html[lang="es"] .hero-copy h1 {
    letter-spacing: -0.05em !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 100% !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.52ES - Spanish Desktop Hero Width Balance
   Base: v6.51ES
   User request:
   - Move the hero visual slightly to the right.
   - Give Spanish left copy more horizontal room.
   - Reduce left column height by improving text wrapping.
   - English preserved.
--------------------------------------------------------- */

@media (min-width: 1041px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    column-gap: clamp(34px, 4.2vw, 64px) !important;
    align-items: start !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 760px !important;
    width: 100% !important;
  }

  html[lang="es"] .hero-copy h1 {
    max-width: 740px !important;
    font-size: clamp(3.05rem, 3.75vw, 4.28rem) !important;
    line-height: .99 !important;
    letter-spacing: -0.058em !important;
    margin-bottom: 21px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 700px !important;
    font-size: clamp(.98rem, .96vw, 1.08rem) !important;
    line-height: 1.40 !important;
    margin-bottom: 21px !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 700px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(18px) !important;
    max-width: 100% !important;
  }
}

/* Common laptop width like the current screenshot */
@media (min-width: 1041px) and (max-width: 1440px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    column-gap: 38px !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 720px !important;
  }

  html[lang="es"] .hero-copy h1 {
    max-width: 700px !important;
    font-size: clamp(2.82rem, 3.62vw, 3.85rem) !important;
    line-height: .985 !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 670px !important;
    font-size: .96rem !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 670px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(24px) !important;
  }
}

/* Narrow desktop: keep visual from overflowing while still giving copy room */
@media (min-width: 1041px) and (max-width: 1220px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
    column-gap: 30px !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(2.64rem, 3.45vw, 3.45rem) !important;
    max-width: 650px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 610px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(14px) !important;
  }
}

/* Keep approved mobile behavior untouched */
@media (max-width: 1040px) {
  html[lang="es"] .hero-visual {
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.53ES - Spanish Hero Headline Size Fine Tune
   Base: v6.52ES
   User request:
   - Reduce Spanish hero headline font slightly to gain horizontal amplitude
     and reduce the left column height.
   - English preserved.
   - Mobile preserved.
--------------------------------------------------------- */

@media (min-width: 1041px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(2.80rem, 3.35vw, 3.92rem) !important;
    line-height: .985 !important;
    letter-spacing: -0.056em !important;
    max-width: 760px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1440px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(2.58rem, 3.22vw, 3.52rem) !important;
    line-height: .985 !important;
    max-width: 720px !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 735px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1220px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(2.46rem, 3.06vw, 3.18rem) !important;
    max-width: 690px !important;
  }
}

/* Do not shrink the approved mobile headline */
@media (max-width: 1040px) {
  html[lang="es"] .hero-copy h1 {
    font-size: inherit;
  }
}


/* ---------------------------------------------------------
   ITTS v6.54ES - Spanish Hero Headline Copy + English Size Restore
   Base: v6.53ES
   Approved:
   - Change Spanish hero headline to:
     "Soluciones Low-Voltage Profesionales"
   - Restore Spanish hero headline to the same desktop font scale as English.
   - Preserve English and mobile behavior.
--------------------------------------------------------- */

@media (min-width: 1041px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(4rem, 5.7vw, 6.25rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.06em !important;
    max-width: 760px !important;
    margin-bottom: 22px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 700px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1440px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.55rem, 4.75vw, 5.2rem) !important;
    max-width: 730px !important;
  }
}

@media (min-width: 1041px) and (max-width: 1220px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.2rem, 4.4vw, 4.65rem) !important;
    max-width: 690px !important;
  }
}

/* Keep approved mobile behavior stable */
@media (max-width: 1040px) {
  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3rem, 12vw, 4rem) !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.55ES - Spanish Hero Left Block Expansion + Headline Update
   Base: v6.54ES
   Requested:
   - Increase Spanish hero left block width around 12%.
   - Shift Spanish hero left block slightly left for better visual balance.
   - Replace headline with "Soluciones Tecnológicas Integradas".
   - Preserve English and mobile.
--------------------------------------------------------- */

@media (min-width: 1041px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    column-gap: clamp(30px, 3.6vw, 58px) !important;
    align-items: start !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 850px !important;
    width: 112% !important;
    transform: translateX(-42px) !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(4rem, 5.7vw, 6.25rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.06em !important;
    max-width: 840px !important;
    margin-bottom: 22px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 780px !important;
    line-height: 1.40 !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 780px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(26px) !important;
  }
}

/* Laptop width similar to current screenshot */
@media (min-width: 1041px) and (max-width: 1440px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
    column-gap: 34px !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 790px !important;
    width: 112% !important;
    transform: translateX(-38px) !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.55rem, 4.75vw, 5.2rem) !important;
    max-width: 770px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 735px !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 735px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(22px) !important;
  }
}

@media (min-width: 1041px) and (max-width: 1220px) {
  html[lang="es"] .hero-copy {
    transform: translateX(-24px) !important;
    width: 108% !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.15rem, 4.35vw, 4.55rem) !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(12px) !important;
  }
}

/* Keep mobile stable */
@media (max-width: 1040px) {
  html[lang="es"] .hero-copy {
    width: 100% !important;
    transform: none !important;
  }

  html[lang="es"] .hero-visual {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   ITTS v6.59ES - Spanish Hero Only Test
   Base: v6.58ES
   Purpose:
   - Test improving the Spanish desktop hero without touching header rules.
   - Do not modify English or mobile.
   - Reduce hero top/bottom visual height and improve left/right balance.
--------------------------------------------------------- */

@media screen and (min-width: 1041px) {
  html[lang="es"] .hero {
    padding-top: clamp(28px, 3.2vw, 52px) !important;
    padding-bottom: clamp(28px, 3.2vw, 52px) !important;
  }

  html[lang="es"] .hero .container {
    width: min(100% - 56px, 1500px) !important;
    max-width: 1500px !important;
  }

  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    column-gap: clamp(34px, 4vw, 64px) !important;
    align-items: start !important;
  }

  html[lang="es"] .hero-copy {
    max-width: 800px !important;
    width: 100% !important;
    transform: none !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.65rem, 5.1vw, 5.72rem) !important;
    line-height: .96 !important;
    letter-spacing: -0.058em !important;
    max-width: 780px !important;
    margin-bottom: 18px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 760px !important;
    margin-bottom: 18px !important;
    line-height: 1.36 !important;
  }

  html[lang="es"] .hero-actions {
    margin-bottom: 12px !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 760px !important;
    margin-bottom: 14px !important;
  }

  html[lang="es"] .trust-row {
    margin-top: 0 !important;
  }

  html[lang="es"] .hero-visual {
    transform: none !important;
    align-self: start !important;
  }
}

/* Laptop view similar to user's screenshots */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  html[lang="es"] .hero {
    padding-top: 30px !important;
    padding-bottom: 32px !important;
  }

  html[lang="es"] .hero .container {
    width: min(100% - 48px, 1420px) !important;
    max-width: 1420px !important;
  }

  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    column-gap: 42px !important;
  }

  html[lang="es"] .hero-copy h1 {
    font-size: clamp(3.35rem, 4.55vw, 5.05rem) !important;
    max-width: 720px !important;
    margin-bottom: 16px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 700px !important;
    font-size: .98rem !important;
    margin-bottom: 16px !important;
  }

  html[lang="es"] .hero-contact-line {
    max-width: 700px !important;
  }
}

/* Preserve approved mobile behavior */
@media screen and (max-width: 1040px) {
  html[lang="es"] .hero,
  html[lang="es"] .hero .container,
  html[lang="es"] .hero-grid,
  html[lang="es"] .hero-copy,
  html[lang="es"] .hero-visual {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   ITTS v6.61ES - Spanish Desktop Industries Card Alignment
   Base: v6.60ES
   User request:
   - Organize and align text inside industries mini-cards.
   - Only Spanish desktop.
   - Preserve English, mobile, header and hero.
--------------------------------------------------------- */

@media screen and (min-width: 1041px) {
  html[lang="es"] #industries .industry-grid,
  html[lang="es"] #industries .industry-grid-rich {
    align-items: stretch !important;
  }

  html[lang="es"] #industries .industry-item,
  html[lang="es"] #industries .industry-item-icon,
  html[lang="es"] #industries .industry-grid-rich .industry-item,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon {
    min-height: 186px !important;
    height: 100% !important;
    padding: 34px 74px 30px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
    position: relative !important;
  }

  html[lang="es"] #industries .industry-item h3,
  html[lang="es"] #industries .industry-item-icon h3,
  html[lang="es"] #industries .industry-grid-rich .industry-item h3,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon h3 {
    min-height: 42px !important;
    margin: 0 0 12px 0 !important;
    max-width: 190px !important;
    display: flex !important;
    align-items: flex-end !important;
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  html[lang="es"] #industries .industry-item p,
  html[lang="es"] #industries .industry-item-icon p,
  html[lang="es"] #industries .industry-grid-rich .industry-item p,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon p {
    margin: 0 !important;
    max-width: 205px !important;
    min-height: 82px !important;
    font-size: .94rem !important;
    line-height: 1.33 !important;
    color: rgba(236, 244, 255, .88) !important;
  }

  html[lang="es"] #industries .industry-icon {
    position: absolute !important;
    width: 42px !important;
    height: 42px !important;
    top: 36px !important;
    right: 32px !important;
    object-fit: contain !important;
    opacity: .88 !important;
  }

  html[lang="es"] #industries .industry-item-icon::after,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon::after {
    width: 58px !important;
    height: 58px !important;
    top: 27px !important;
    right: 24px !important;
    opacity: .78 !important;
  }
}

/* Current laptop/desktop screenshot width */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  html[lang="es"] #industries .industry-item,
  html[lang="es"] #industries .industry-item-icon,
  html[lang="es"] #industries .industry-grid-rich .industry-item,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon {
    min-height: 174px !important;
    padding: 30px 66px 26px 26px !important;
  }

  html[lang="es"] #industries .industry-item h3,
  html[lang="es"] #industries .industry-item-icon h3,
  html[lang="es"] #industries .industry-grid-rich .industry-item h3,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon h3 {
    min-height: 40px !important;
    max-width: 172px !important;
    margin-bottom: 10px !important;
    font-size: 1.02rem !important;
  }

  html[lang="es"] #industries .industry-item p,
  html[lang="es"] #industries .industry-item-icon p,
  html[lang="es"] #industries .industry-grid-rich .industry-item p,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon p {
    max-width: 178px !important;
    min-height: 76px !important;
    font-size: .88rem !important;
    line-height: 1.30 !important;
  }

  html[lang="es"] #industries .industry-icon {
    width: 38px !important;
    height: 38px !important;
    top: 31px !important;
    right: 25px !important;
  }

  html[lang="es"] #industries .industry-item-icon::after,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon::after {
    width: 52px !important;
    height: 52px !important;
    top: 24px !important;
    right: 18px !important;
  }
}

/* Preserve approved mobile layout */
@media screen and (max-width: 1040px) {
  html[lang="es"] #industries .industry-item,
  html[lang="es"] #industries .industry-item-icon,
  html[lang="es"] #industries .industry-grid-rich .industry-item,
  html[lang="es"] #industries .industry-grid-rich .industry-item-icon {
    min-height: auto !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.62ES - Spanish Header Restored to Early Bilingual Baseline
   Base: v6.61ES
   Action:
   - Removed accumulated Spanish desktop header override blocks.
   - Header returns to the early bilingual behavior used around V6.48ES.
   - No new header styling added here.
   Preserved:
   - Spanish content refinements
   - Spanish hero current state
   - Spanish industries card alignment v6.61ES
   - English
   - Mobile
--------------------------------------------------------- */


/* ---------------------------------------------------------
   ITTS v6.62ES - Spanish Header Restored to Early Bilingual Baseline
   Base: v6.61ES
   Action:
   - Removed accumulated Spanish desktop header override blocks.
   - Header returns to the early bilingual behavior used around V6.48ES.
   - No new header styling added here.
   Preserved:
   - Spanish content refinements
   - Spanish hero current state
   - Spanish industries card alignment v6.61ES
   - English
   - Mobile
--------------------------------------------------------- */



/* ---------------------------------------------------------
   ITTS v6.64ES - Global Desktop Header + Logo Legibility Fix
   Base: v6.63ES
   Scope:
   - Desktop header for English and Spanish.
   - Improve logo legibility, especially "Integrated Technology Solutions".
   - Keep nav and CTA in one clean row.
   - Do not touch hero or mobile.
--------------------------------------------------------- */

@media screen and (min-width: 1041px) {
  .site-header .container {
    width: min(100% - 52px, 1420px) !important;
    max-width: 1420px !important;
  }

  .header-inner {
    min-height: 86px !important;
    height: 86px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
  }

  .brand {
    flex: 0 0 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo {
    width: 248px !important;
    max-width: 248px !important;
    max-height: 68px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .primary-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: clamp(14px, 1.15vw, 24px) !important;
    font-size: .93rem !important;
    line-height: 1 !important;
  }

  .primary-nav .nav-link,
  .primary-nav .language-switch,
  .primary-nav .nav-cta,
  .primary-nav .nav-whatsapp-link {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
  }

  .primary-nav .nav-whatsapp-link {
    display: none !important;
  }

  .primary-nav .language-switch {
    min-height: 36px !important;
    height: 36px !important;
    padding: 7px 13px !important;
    font-size: .82rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 190px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .93rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    text-align: center !important;
  }
}

/* Laptop desktop width */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  .site-header .container {
    width: min(100% - 44px, 1360px) !important;
    max-width: 1360px !important;
  }

  .header-inner {
    min-height: 82px !important;
    height: 82px !important;
    gap: 20px !important;
  }

  .brand {
    flex-basis: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;
    height: 66px !important;
  }

  .brand-logo {
    width: 232px !important;
    max-width: 232px !important;
    max-height: 64px !important;
  }

  .primary-nav {
    gap: 13px !important;
    font-size: .88rem !important;
  }

  .primary-nav .language-switch {
    min-height: 34px !important;
    height: 34px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: .80rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 178px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    font-size: .88rem !important;
  }
}

/* Narrow desktop safety */
@media screen and (min-width: 1041px) and (max-width: 1220px) {
  .site-header .container {
    width: min(100% - 34px, 1180px) !important;
  }

  .brand {
    flex-basis: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }

  .brand-logo {
    width: 204px !important;
    max-width: 204px !important;
  }

  .primary-nav {
    gap: 9px !important;
    font-size: .81rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 160px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: .81rem !important;
  }
}

/* Preserve approved mobile header */
@media screen and (max-width: 1040px) {
  .header-inner {
    height: auto !important;
    min-height: initial !important;
  }

  .brand {
    height: auto !important;
  }

  .brand-logo {
    max-height: none !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.65ES - Spanish Desktop Hero Final Sizing Pass
   Base: v6.64ES
   Scope:
   - Spanish desktop hero only.
   - Subtitle forced into approved two-line structure.
   - Hero visual reduced 10% width/height and moved slightly left.
   - English, mobile, header, industries preserved.
--------------------------------------------------------- */

.desktop-only {
  display: inline;
}

@media screen and (min-width: 1041px) {
  html[lang="es"] .hero-subtitle {
    max-width: 790px !important;
    line-height: 1.38 !important;
  }

  html[lang="es"] .hero-subtitle .desktop-only {
    display: block !important;
  }

  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    column-gap: clamp(28px, 3.4vw, 54px) !important;
    align-items: start !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(-26px) scale(.90) !important;
    transform-origin: top left !important;
    align-self: start !important;
  }

  html[lang="es"] .hero-card,
  html[lang="es"] .hero-device-card,
  html[lang="es"] .hero-showcase,
  html[lang="es"] .hero-media {
    max-width: 100% !important;
  }
}

/* Laptop width similar to current desktop screenshots */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  html[lang="es"] .hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
    column-gap: 30px !important;
  }

  html[lang="es"] .hero-subtitle {
    max-width: 760px !important;
  }

  html[lang="es"] .hero-visual {
    transform: translateX(-22px) scale(.90) !important;
  }
}

/* Mobile must stay approved; no forced line break or visual scaling */
@media screen and (max-width: 1040px) {
  .desktop-only {
    display: none !important;
  }

  html[lang="es"] .hero-visual {
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.66ES - Correct HD Header Logo + Spanish Hero Visual Left Shift
   Base: v6.65ES
   Scope:
   - Header logo uses official high-resolution header asset:
     assets/logos/itts-logo-header@2x.png
   - Spanish desktop hero visual moved 15% left.
   - No AI redraw.
   - English, Spanish, desktop and mobile use the sharper header logo.
--------------------------------------------------------- */

.brand-logo {
  image-rendering: auto !important;
  object-fit: contain !important;
}

/* Keep logo sharp and readable without changing approved proportions */
@media screen and (min-width: 1041px) {
  .brand-logo {
    width: 248px !important;
    max-width: 248px !important;
    max-height: 70px !important;
  }

  .brand {
    flex-basis: 252px !important;
    min-width: 252px !important;
  }
}

@media screen and (min-width: 1041px) and (max-width: 1460px) {
  .brand-logo {
    width: 232px !important;
    max-width: 232px !important;
    max-height: 66px !important;
  }

  .brand {
    flex-basis: 236px !important;
    min-width: 236px !important;
  }
}

/* Spanish desktop hero visual: move 15% left, retain approved 10% scale reduction */
@media screen and (min-width: 1041px) {
  html[lang="es"] .hero-visual {
    transform: translateX(-15%) scale(.90) !important;
    transform-origin: top left !important;
  }
}

/* Preserve mobile */
@media screen and (max-width: 1040px) {
  html[lang="es"] .hero-visual {
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   ITTS v6.67ES - Final Desktop EN/ES Service Area Map Visibility Pass
   Base: v6.66ES
   Scope:
   - Desktop English and Spanish.
   - Improve visibility of the map inside Service Area card.
   - No hero/header/logo/mobile/industries changes.
--------------------------------------------------------- */

@media screen and (min-width: 1041px) {
  /* Increase map artwork visibility in Service Area card */
  #service-area .service-area-card::before,
  #service-area .service-area-card::after,
  #service-area .area-card::before,
  #service-area .area-card::after,
  #service-area .map-card::before,
  #service-area .map-card::after,
  #service-area .service-map::before,
  #service-area .service-map::after,
  #service-area .service-area-map::before,
  #service-area .service-area-map::after,
  .service-area-card::before,
  .service-area-card::after,
  .service-area-map::before,
  .service-area-map::after {
    opacity: .42 !important;
    filter: saturate(1.15) contrast(1.10) brightness(1.08) !important;
  }

  #service-area .map-bg,
  #service-area .service-map-bg,
  #service-area .service-area-map-bg,
  #service-area .area-map-bg,
  #service-area img[src*="map"],
  #service-area [style*="map"] {
    opacity: .44 !important;
    filter: saturate(1.16) contrast(1.12) brightness(1.08) !important;
  }

  /* Keep text readable over stronger map */
  #service-area .service-area-card,
  #service-area .area-card,
  #service-area .map-card,
  #service-area .service-map,
  #service-area .service-area-map {
    background-blend-mode: normal, screen !important;
  }
}

/* Preserve mobile exactly as approved */
@media screen and (max-width: 1040px) {
  #service-area .service-area-card::before,
  #service-area .service-area-card::after,
  #service-area .area-card::before,
  #service-area .area-card::after,
  #service-area .map-card::before,
  #service-area .map-card::after,
  #service-area .service-map::before,
  #service-area .service-map::after,
  #service-area .service-area-map::before,
  #service-area .service-area-map::after {
    filter: inherit;
  }
}


/* ---------------------------------------------------------
   ITTS V6.68D-ML - OFFICIAL DESKTOP MULTI-LANGUAGE RELEASE
   Base: v6.67ES
   D = Desktop
   ML = Multi-Language / English + Spanish

   Final change:
   - Stronger Service Area map visibility on desktop EN/ES.
   Preserved:
   - Header
   - Hero
   - Logo
   - Mobile
   - Industries cards
--------------------------------------------------------- */

@media screen and (min-width: 1041px) {
  #service-area .service-area-card::before,
  #service-area .service-area-card::after,
  #service-area .area-card::before,
  #service-area .area-card::after,
  #service-area .map-card::before,
  #service-area .map-card::after,
  #service-area .service-map::before,
  #service-area .service-map::after,
  #service-area .service-area-map::before,
  #service-area .service-area-map::after,
  .service-area-card::before,
  .service-area-card::after,
  .service-area-map::before,
  .service-area-map::after {
    opacity: .62 !important;
    filter: saturate(1.28) contrast(1.22) brightness(1.16) !important;
  }

  #service-area .map-bg,
  #service-area .service-map-bg,
  #service-area .service-area-map-bg,
  #service-area .area-map-bg,
  #service-area img[src*="map"],
  #service-area [style*="map"] {
    opacity: .64 !important;
    filter: saturate(1.30) contrast(1.25) brightness(1.16) !important;
  }

  #service-area .service-area-card,
  #service-area .area-card,
  #service-area .map-card,
  #service-area .service-map,
  #service-area .service-area-map {
    background-blend-mode: normal, screen !important;
  }

  /* Keep foreground text/CTA dominant over stronger map */
  #service-area .service-area-card > *,
  #service-area .area-card > *,
  #service-area .map-card > *,
  #service-area .service-map > *,
  #service-area .service-area-map > * {
    position: relative;
    z-index: 2;
  }
}

/* Mobile preserved from approved version */
@media screen and (max-width: 1040px) {
  #service-area .service-area-card::before,
  #service-area .service-area-card::after,
  #service-area .area-card::before,
  #service-area .area-card::after,
  #service-area .map-card::before,
  #service-area .map-card::after,
  #service-area .service-map::before,
  #service-area .service-map::after,
  #service-area .service-area-map::before,
  #service-area .service-area-map::after {
    filter: inherit;
  }
}


/* ---------------------------------------------------------
   ITTS V6.69M-ML - Mobile Header Height + Language Switch Test
   Base: V6.68D-ML official desktop EN/ES
   Scope:
   - Mobile EN + ES only.
   - Compact mobile header.
   - Add mobile language switch to header.
   - Desktop official V6.68D-ML preserved.
--------------------------------------------------------- */

.mobile-language-switch {
  display: none;
}

@media screen and (max-width: 1040px) {
  .site-header {
    min-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

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

  .header-inner {
    min-height: 72px !important;
    height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo {
    width: min(255px, 54vw) !important;
    max-width: min(255px, 54vw) !important;
    max-height: 56px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .mobile-language-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 38px !important;
    min-width: 76px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(145, 190, 255, .28) !important;
    background: rgba(12, 24, 42, .78) !important;
    color: #a9d4ff !important;
    font-weight: 800 !important;
    font-size: .82rem !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    flex: 0 0 auto !important;
  }

  .primary-nav {
    top: 72px !important;
  }
}

@media screen and (max-width: 430px) {
  .header-inner {
    gap: 8px !important;
  }

  .brand-logo {
    width: min(220px, 48vw) !important;
    max-width: min(220px, 48vw) !important;
  }

  .mobile-language-switch {
    min-width: 68px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: .76rem !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

@media screen and (max-width: 370px) {
  .brand-logo {
    width: min(195px, 45vw) !important;
    max-width: min(195px, 45vw) !important;
  }

  .mobile-language-switch {
    min-width: 62px !important;
    font-size: .72rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS V6.70M-ML - Logo Header Optimization Test
   Base: V6.69M-ML
   Scope:
   - Desktop EN/ES: larger full logo for stronger brand presence.
   - Mobile EN/ES: simplified readable logo asset:
     ITTS + IT Telenet Solutions, without tiny tagline.
   - Header can grow slightly to protect logo legibility.
   - Hero/content preserved.
--------------------------------------------------------- */

.brand-logo-picture {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
}

.brand-logo {
  image-rendering: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Desktop EN/ES: strengthen full official logo presence */
@media screen and (min-width: 1041px) {
  .header-inner {
    min-height: 92px !important;
    height: 92px !important;
    align-items: center !important;
  }

  .brand {
    flex: 0 0 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: 78px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 282px !important;
    max-width: 282px !important;
    max-height: 78px !important;
  }

  .primary-nav {
    gap: clamp(12px, 1vw, 22px) !important;
  }

  .primary-nav .nav-cta {
    white-space: nowrap !important;
  }
}

/* Laptop desktop safety */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  .header-inner {
    min-height: 88px !important;
    height: 88px !important;
  }

  .brand {
    flex-basis: 266px !important;
    min-width: 266px !important;
    max-width: 266px !important;
    height: 74px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 262px !important;
    max-width: 262px !important;
    max-height: 74px !important;
  }

  .primary-nav {
    gap: 12px !important;
    font-size: .86rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 176px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobile EN/ES: use simplified readable logo and allow stronger brand presence */
@media screen and (max-width: 1040px) {
  .site-header {
    min-height: 82px !important;
  }

  .header-inner {
    min-height: 82px !important;
    height: 82px !important;
    gap: 10px !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: min(310px, 58vw) !important;
    max-width: min(310px, 58vw) !important;
    max-height: 68px !important;
  }

  .mobile-language-switch {
    height: 38px !important;
    min-width: 76px !important;
    padding: 0 12px !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  .primary-nav {
    top: 82px !important;
  }
}

/* iPhone width tuning */
@media screen and (max-width: 430px) {
  .header-inner {
    gap: 8px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: min(278px, 52vw) !important;
    max-width: min(278px, 52vw) !important;
    max-height: 64px !important;
  }

  .mobile-language-switch {
    min-width: 68px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: .76rem !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* Very narrow safety */
@media screen and (max-width: 370px) {
  .brand-logo-picture,
  .brand-logo {
    width: min(240px, 48vw) !important;
    max-width: min(240px, 48vw) !important;
  }

  .mobile-language-switch {
    min-width: 62px !important;
    font-size: .72rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS V6.71M-ML - Header Logo Strategy + Mobile Micro Polish
   Base: V6.70M-ML
   Scope:
   - Desktop EN/ES: use simplified premium header logo:
     ITTS + IT Telenet Solutions.
   - Mobile EN/ES: keep optimized logo strategy and increase mobile logo 5%.
   - Footer/documents/invoices should continue using the full logo with tagline where applicable.
   - Hero layout preserved.
--------------------------------------------------------- */

.brand-logo-picture {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
}

.brand-logo {
  image-rendering: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Desktop EN/ES: simplified premium logo with stronger presence */
@media screen and (min-width: 1041px) {
  .header-inner {
    min-height: 90px !important;
    height: 90px !important;
    align-items: center !important;
  }

  .brand {
    flex: 0 0 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 284px !important;
    max-width: 284px !important;
    max-height: 76px !important;
  }

  .primary-nav {
    gap: clamp(12px, 1vw, 22px) !important;
  }

  .primary-nav .nav-cta {
    white-space: nowrap !important;
  }
}

/* Laptop desktop safety */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  .header-inner {
    min-height: 86px !important;
    height: 86px !important;
  }

  .brand {
    flex-basis: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 74px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 268px !important;
    max-width: 268px !important;
    max-height: 74px !important;
  }

  .primary-nav {
    gap: 12px !important;
    font-size: .86rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 176px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobile EN/ES: keep optimized logo and increase by approx. 5% */
@media screen and (max-width: 1040px) {
  .site-header {
    min-height: 84px !important;
  }

  .header-inner {
    min-height: 84px !important;
    height: 84px !important;
    gap: 10px !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: min(326px, 61vw) !important;
    max-width: min(326px, 61vw) !important;
    max-height: 71px !important;
  }

  .mobile-language-switch {
    height: 38px !important;
    min-width: 76px !important;
    padding: 0 12px !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  .primary-nav {
    top: 84px !important;
  }
}

/* iPhone width tuning after 5% logo increase */
@media screen and (max-width: 430px) {
  .header-inner {
    gap: 8px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: min(292px, 55vw) !important;
    max-width: min(292px, 55vw) !important;
    max-height: 66px !important;
  }

  .mobile-language-switch {
    min-width: 68px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: .76rem !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* Very narrow safety */
@media screen and (max-width: 370px) {
  .brand-logo-picture,
  .brand-logo {
    width: min(252px, 50vw) !important;
    max-width: min(252px, 50vw) !important;
  }

  .mobile-language-switch {
    min-width: 62px !important;
    font-size: .72rem !important;
  }
}


/* ---------------------------------------------------------
   ITTS V6.72M-ML - Final Logo + Tagline Polish Pass
   Base: V6.71M-ML
   Scope:
   - EN/ES desktop/mobile header logo size refinement.
   - Hero tagline "Integrated Technology Solutions" visual emphasis.
   - No headline/layout/card/CTA structure changes.
--------------------------------------------------------- */

/* Hero tagline / brand statement emphasis */
.hero-visual .eyebrow,
.hero-card .eyebrow,
.visual-card-large .eyebrow,
.hero-visual [class*="eyebrow"],
.hero-visual [class*="tagline"],
.hero-visual [class*="badge"] {
  color: #d9efff !important;
  background:
    linear-gradient(180deg, rgba(35, 108, 210, .34), rgba(8, 26, 52, .78)) !important;
  border: 1px solid rgba(121, 190, 255, .52) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 22px rgba(47, 125, 255, .22),
    0 10px 24px rgba(0,0,0,.22) !important;
  text-shadow: 0 0 14px rgba(143, 203, 255, .38) !important;
  letter-spacing: .16em !important;
}

/* When the exact tagline is rendered as plain text within the hero card,
   this improves the surrounding premium/brand effect without changing layout. */
.visual-card-large strong,
.hero-visual strong {
  text-shadow:
    0 0 22px rgba(53, 140, 255, .24),
    0 2px 18px rgba(0,0,0,.28) !important;
}

/* Desktop EN/ES: increase simplified header logo by approx. 10% */
@media screen and (min-width: 1041px) {
  .brand {
    flex-basis: 315px !important;
    min-width: 315px !important;
    max-width: 315px !important;
    height: 82px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 312px !important;
    max-width: 312px !important;
    max-height: 82px !important;
  }

  .header-inner {
    min-height: 94px !important;
    height: 94px !important;
  }

  .primary-nav {
    gap: clamp(10px, .9vw, 20px) !important;
  }
}

/* Laptop safety after desktop logo increase */
@media screen and (min-width: 1041px) and (max-width: 1460px) {
  .brand {
    flex-basis: 297px !important;
    min-width: 297px !important;
    max-width: 297px !important;
    height: 79px !important;
  }

  .brand-logo-picture,
  .brand-logo {
    width: 295px !important;
    max-width: 295px !important;
    max-height: 79px !important;
  }

  .header-inner {
    min-height: 90px !important;
    height: 90px !important;
  }

  .primary-nav {
    gap: 10px !important;
    font-size: .84rem !important;
  }

  .primary-nav .nav-cta {
    min-width: 170px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Mobile EN/ES: increase header logo by approx. 5% */
@media screen and (max-width: 1040px) {
  .brand-logo-picture,
  .brand-logo {
    width: min(342px, 64vw) !important;
    max-width: min(342px, 64vw) !important;
    max-height: 74px !important;
  }

  .brand {
    height: 73px !important;
  }

  .header-inner {
    min-height: 86px !important;
    height: 86px !important;
  }

  .site-header {
    min-height: 86px !important;
  }

  .primary-nav {
    top: 86px !important;
  }
}

/* Small mobile safety after 5% logo increase */
@media screen and (max-width: 430px) {
  .brand-logo-picture,
  .brand-logo {
    width: min(306px, 57vw) !important;
    max-width: min(306px, 57vw) !important;
    max-height: 69px !important;
  }
}

@media screen and (max-width: 370px) {
  .brand-logo-picture,
  .brand-logo {
    width: min(264px, 52vw) !important;
    max-width: min(264px, 52vw) !important;
  }
}