/* ==========================================================================
   Smartland Technology - global stylesheet
   Tokens -> base -> layout -> components -> sections -> responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-navy: #0B1F3A;
  --color-navy-700: #123058;
  --color-navy-500: #1C4076;
  --color-blue: #2878FF;
  --color-blue-600: #1A62DC;
  --color-cyan: #00C2FF;
  --color-bg: #F5F8FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EDF3FA;
  --color-text: #16263D;
  --color-muted: #4A5C75;
  --color-border: #D8E2EF;
  --color-border-strong: #B9C9DD;
  --color-error: #B3261E;
  --color-error-bg: #FCEDEC;
  --color-success-bg: #E7F5EF;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.125rem;
  --step-5: 2.75rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 3px rgba(11, 31, 58, 0.05);
  --shadow-md: 0 6px 18px rgba(11, 31, 58, 0.08);
  --shadow-lg: 0 18px 40px rgba(11, 31, 58, 0.12);

  --container: 1200px;
  --container-narrow: 880px;
  --header-height: 76px;
  --transition: 180ms ease;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  line-height: 1.2;
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-navy); }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2xs); }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 200;
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-md); color: #fff; }

main:focus { outline: none; }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--surface { background: var(--color-surface); }
.section--alt { background: var(--color-surface-alt); }
.section--navy { background: var(--color-navy); color: #DCE7F5; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section__head { max-width: 720px; margin-bottom: var(--space-2xl); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-blue-600);
}
.section--navy .section__eyebrow { color: var(--color-cyan); }
.section__heading { font-size: var(--step-4); margin-bottom: var(--space-md); }
.section__lead { font-size: var(--step-1); color: var(--color-muted); }
.section--navy .section__lead { color: #C3D4E8; }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--step-3); }
.prose h3 { margin-top: var(--space-xl); font-size: var(--step-2); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: var(--space-xs); }

/* --------------------------------------------------------------------------
   4. Buttons and icons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn--lg { padding: 0.95rem 1.75rem; font-size: 1rem; }
.btn--primary { background: var(--color-blue); color: #fff; }
.btn--primary:hover { background: var(--color-blue-600); color: #fff; }
.btn--secondary { background: var(--color-navy); color: #fff; }
.btn--secondary:hover { background: var(--color-navy-500); color: #fff; }
.btn--outline { background: transparent; color: var(--color-navy); border-color: var(--color-border-strong); }
.btn--outline:hover { background: var(--color-surface); border-color: var(--color-navy); color: var(--color-navy); }
.btn--ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.btn:active { transform: translateY(1px); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 32px; height: 32px; color: currentColor; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.brand__mark { display: inline-flex; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-size: 1.125rem; font-weight: 700; color: var(--color-navy); letter-spacing: -0.02em; }
.brand__suffix { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }

.site-nav { display: flex; align-items: center; gap: var(--space-xl); }
.site-nav__list { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.site-nav__list li { margin: 0; }
.site-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-xs) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--color-navy); font-weight: 600; }

.site-nav__actions { display: flex; align-items: center; gap: var(--space-md); }
.site-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__phone:hover { color: var(--color-blue-600); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.6rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle__bars span {
  display: block; height: 2px; width: 100%;
  background: var(--color-navy); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  color: #DCE7F5;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-3xl);
  align-items: center;
  padding-block: var(--space-4xl);
}
.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(0, 194, 255, 0.45);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
}
.hero__title { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.35rem); margin-bottom: var(--space-lg); }
.hero__lead { font-size: var(--step-1); color: #C3D4E8; margin-bottom: var(--space-xl); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); }
.hero__phone {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  color: #fff; font-weight: 600; text-decoration: none;
}
.hero__phone span { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.hero__phone:hover { color: var(--color-cyan); }

.hero__visual { position: relative; }
.hero__visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero__badge {
  position: absolute;
  left: calc(-1 * var(--space-lg));
  bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9375rem;
  max-width: 260px;
}
.hero__badge .icon { color: var(--color-blue); }

/* Compact hero used on interior pages */
.page-hero {
  background: linear-gradient(150deg, var(--color-navy) 0%, #13355E 100%);
  color: #C3D4E8;
  padding-block: var(--space-3xl);
}
.page-hero__title { color: #fff; margin-bottom: var(--space-md); }
.page-hero__lead { font-size: var(--step-1); max-width: 68ch; margin-bottom: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* --------------------------------------------------------------------------
   7. Cards and content blocks
   -------------------------------------------------------------------------- */
.value-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.value-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); padding-block: var(--space-2xl); }
.value-item { display: flex; flex-direction: column; gap: var(--space-xs); }
.value-item__icon { color: var(--color-blue); }
.value-item__title { font-size: var(--step-1); margin: var(--space-xs) 0 0; }
.value-item__text { color: var(--color-muted); font-size: 0.9375rem; }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.service-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card:focus-within { border-color: var(--color-blue); box-shadow: var(--shadow-md); }
.service-card__icon { color: var(--color-blue); }
.service-card__title { margin: 0; font-size: var(--step-2); }
.service-card__link { color: var(--color-navy); text-decoration: none; }
.service-card__link::after { content: ""; position: absolute; inset: 0; }
.service-card:hover .service-card__link { color: var(--color-blue-600); }
.service-card__text { color: var(--color-muted); font-size: 0.9375rem; flex: 1; }
.service-card__more {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: 0.875rem; font-weight: 600; color: var(--color-blue-600);
}

.feature-card {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.feature-card__icon { color: var(--color-blue); margin-bottom: var(--space-sm); }
.feature-card__title { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.feature-card__text { color: var(--color-muted); font-size: 0.9375rem; }
.section--navy .feature-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--navy .feature-card__text { color: #C3D4E8; }
.section--navy .feature-card__icon { color: var(--color-cyan); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-sm); margin: 0; }
.check-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--color-blue); }
.section--navy .check-list .icon { color: var(--color-cyan); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.step { position: relative; margin: 0; padding-top: var(--space-lg); border-top: 2px solid var(--color-border-strong); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-blue-600);
}
.step__title { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.step__text { color: var(--color-muted); font-size: 0.9375rem; }
.section--navy .step { border-top-color: rgba(255, 255, 255, 0.25); }
.section--navy .step::before { color: var(--color-cyan); }
.section--navy .step__text { color: #C3D4E8; }

.tag-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.tag-grid li { margin: 0; }
.tag {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy);
}

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: center; }
.split > * { min-width: 0; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.definition-list { display: grid; gap: var(--space-lg); }
.definition-list__item {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius-sm);
}
.definition-list__term { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.definition-list__text { color: var(--color-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   8. Breadcrumbs, FAQs, CTA band
   -------------------------------------------------------------------------- */
.breadcrumbs { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.breadcrumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  list-style: none; margin: 0; padding: var(--space-sm) 0;
  font-size: 0.875rem; color: var(--color-muted);
}
.breadcrumbs__item { margin: 0; display: flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: var(--color-border-strong); }
.breadcrumbs__item a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--color-blue-600); text-decoration: underline; }
.breadcrumbs__item [aria-current] { color: var(--color-navy); font-weight: 600; }

.faqs { background: var(--color-surface); }
.faqs__list { display: grid; gap: var(--space-sm); }
.faq {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.faq__question {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: 600; color: var(--color-navy); cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  font-size: 1.35rem; line-height: 1; color: var(--color-blue-600); flex: none;
}
.faq[open] .faq__question::after { content: "\2212"; }
.faq[open] .faq__question { border-bottom: 1px solid var(--color-border); }
.faq__answer { padding: var(--space-md) var(--space-lg); color: var(--color-muted); }

.cta-band { background: var(--color-navy); color: #C3D4E8; }
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xl); padding-block: var(--space-2xl);
}
.cta-band__copy { max-width: 60ch; }
.cta-band__heading { color: #fff; font-size: var(--step-3); margin-bottom: var(--space-xs); }
.cta-band__text { color: #C3D4E8; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { font-size: 0.9375rem; font-weight: 600; color: var(--color-navy); }
.field__hint { font-size: 0.8125rem; color: var(--color-muted); }
.field__required { color: var(--color-error); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-navy-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(40, 120, 255, 0.18);
  outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--color-error); }
.field__error { font-size: 0.875rem; font-weight: 500; color: var(--color-error); }

.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); border: 1px solid; }
.alert--success { background: var(--color-success-bg); border-color: #9AD3BE; color: #0A5C43; }
.alert--error { background: var(--color-error-bg); border-color: #E8B4B0; color: #8C1D18; }
.alert__title { margin: 0 0 var(--space-2xs); font-size: var(--step-1); color: inherit; }
.alert ul { margin: var(--space-xs) 0 0; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-3xl); align-items: start; }
.contact-panel {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.contact-panel__heading { font-size: var(--step-2); margin-bottom: var(--space-lg); }
.contact-detail { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail .icon { color: var(--color-blue); width: 22px; height: 22px; margin-top: 3px; }
.contact-detail__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px; }
.contact-detail__value { color: var(--color-navy); font-weight: 500; }
.contact-detail__value a { color: var(--color-navy); text-decoration: none; }
.contact-detail__value a:hover { color: var(--color-blue-600); text-decoration: underline; }
.map-embed { margin-top: var(--space-xl); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* --------------------------------------------------------------------------
   10. Error pages
   -------------------------------------------------------------------------- */
.error-page { padding-block: var(--space-4xl); text-align: center; }
.error-page__code { font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1; color: var(--color-blue); margin-bottom: var(--space-md); }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-2xl); padding-block: var(--space-3xl); }
  .hero__badge { left: var(--space-lg); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav__phone { display: none; }
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { display: flex; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--color-border); }
  .site-nav__link { display: block; padding: var(--space-md) 0; font-size: 1rem; }
  .site-nav__link::after { display: none; }
  .site-nav__actions { flex-direction: column; align-items: stretch; gap: var(--space-sm); margin-top: var(--space-md); }
  .site-nav__phone { display: inline-flex; justify-content: center; padding: var(--space-sm) 0; }
  .site-nav__actions .btn { width: 100%; }
}

@media (max-width: 720px) {
  :root { --space-3xl: 3.25rem; --space-4xl: 4rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .check-list--2 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .value-strip__grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; }
  h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.4rem); }
  h2 { font-size: var(--step-3); }
  .section__heading { font-size: var(--step-3); }
}

@media (max-width: 420px) {
  .container { padding-inline: var(--space-md); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__badge { position: static; max-width: none; margin-top: var(--space-md); }
}

/* --------------------------------------------------------------------------
   12. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The marquee bands are exempt — see section 14.15. They carry their own pause
     control, which is the accessible answer for continuously moving content. */
  .marquee--values .marquee__track { animation-duration: 46s !important; }
  .marquee--industries .marquee__track { animation-duration: 60s !important; }
  .marquee--partners .marquee__track { animation-duration: 40s !important; }
  .marquee__track { animation-iteration-count: infinite !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   13. Image placeholder
   Shown until the owner's photography is added to /assets/images/.
   -------------------------------------------------------------------------- */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, var(--color-navy-500) 0%, var(--color-navy) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}
.media-placeholder__mark { color: var(--color-cyan); opacity: 0.55; }

/* ==========================================================================
   14. Design-mockup components
   Added to match design/mockups/Smartland Technology.png
   ========================================================================== */

.icon--xs { width: 15px; height: 15px; }

.btn--pill { border-radius: 999px; }

.section__eyebrow--rule { display: inline-flex; align-items: center; gap: var(--space-sm); }
.section__eyebrow--rule::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
}
.section--navy .section__eyebrow--rule::before,
.home-cta .section__eyebrow--rule::before { background: var(--color-cyan); }

/* --------------------------------------------------------------------------
   14.1 Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--color-navy);
  color: #B9CBE2;
  font-size: 0.8125rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 40px;
}
.topbar p { margin: 0; }
.topbar__address,
.topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.topbar__address .icon,
.topbar__phone .icon { color: var(--color-cyan); }
.topbar__phone { color: #fff; font-weight: 600; text-decoration: none; }
.topbar__phone:hover { color: var(--color-cyan); }
.topbar__right { display: flex; align-items: center; gap: var(--space-lg); }
.topbar__social { display: flex; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.topbar__social li { margin: 0; }
.topbar__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.topbar__social a:hover { background: var(--color-blue); color: #fff; }

@media (max-width: 900px) {
  .topbar { display: none; }
}

/* --------------------------------------------------------------------------
   14.2 Header brand and dropdown
   -------------------------------------------------------------------------- */
.brand__name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; }
.brand__suffix { font-size: 0.6875rem; letter-spacing: 0.28em; }

.site-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }

.site-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--color-muted);
  cursor: pointer;
}
.site-nav__caret:hover { color: var(--color-blue); }
.site-nav__caret .icon { transition: transform var(--transition); }
.site-nav__caret[aria-expanded="true"] .icon { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -12px;
  z-index: 60;
  display: none;
  width: 280px;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.dropdown li { margin: 0; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.is-open { display: block; }

.dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.dropdown__link:hover { background: var(--color-surface-alt); color: var(--color-navy); }
.dropdown__link.is-active { background: var(--color-surface-alt); color: var(--color-navy); font-weight: 600; }
.dropdown__icon { display: inline-flex; color: var(--color-blue); }
.dropdown__all { margin-top: var(--space-2xs); border-top: 1px solid var(--color-border); padding-top: var(--space-2xs); }
.dropdown__all .dropdown__link { color: var(--color-blue-600); font-weight: 600; }

/* --------------------------------------------------------------------------
   14.3 Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--color-navy); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture, .hero__bg .media-placeholder { display: block; height: 100%; }
.hero__bg-image { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  background:
    linear-gradient(100deg, rgba(6, 20, 40, 0.94) 0%, rgba(6, 20, 40, 0.78) 42%, rgba(6, 20, 40, 0.35) 72%, rgba(6, 20, 40, 0.25) 100%);
}
.hero__inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: var(--space-4xl);
}
.hero__eyebrow {
  border: 0;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: #9FC6E8;
}
.hero__title { font-size: clamp(2.15rem, 1.3rem + 3vw, 3.5rem); line-height: 1.12; }
.hero__title-accent { color: var(--color-cyan); }
.hero__lead { max-width: 46ch; color: #C3D4E8; }

.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: 0; }
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.hero__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  flex: none;
}
.hero__pill--static .hero__pill-icon { background: rgba(255, 255, 255, 0.16); }
.hero__pill:not(.hero__pill--static):hover { color: var(--color-cyan); }

/* Call and Email sit under the hero copy on small screens, where the top bar with
   the phone number is hidden. On desktop the header already carries both, so the
   pills in .hero__meta are enough. */
.hero__contact { display: none; }

/* --------------------------------------------------------------------------
   14.4 Value strip
   -------------------------------------------------------------------------- */
.value-strip__grid { list-style: none; margin: 0; padding-inline: 0; }
.value-strip__grid > li { margin: 0; }
.value-item { flex-direction: row; align-items: flex-start; gap: var(--space-md); }
.value-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-alt);
  color: var(--color-blue);
}
.value-item__icon .icon { width: 22px; height: 22px; }
.value-item__title { margin: 0 0 2px; font-size: 1rem; }
.value-item__text { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   14.5 Service cards with thumbnails
   -------------------------------------------------------------------------- */
.service-card--image {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
}
.service-card__thumb { flex: none; width: 74px; }
.service-card__thumb img,
.service-card__thumb .media-placeholder {
  width: 74px;
  height: 74px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.service-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.service-card--image .service-card__title { font-size: 1.0625rem; }
.service-card--image .service-card__text { font-size: 0.875rem; margin: 0; }
.service-card--image .service-card__more { margin-top: var(--space-2xs); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   14.6 About section
   -------------------------------------------------------------------------- */
.split--about { gap: var(--space-3xl); align-items: center; }
.mini-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
}
.mini-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
}
.mini-features__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   14.7 Process
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.process__step { position: relative; margin: 0; }
.process__step + .process__step::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -50%;
  width: 100%;
  height: 1px;
  border-top: 1px dashed var(--color-border-strong);
  z-index: 0;
}
.process__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(40, 120, 255, 0.28);
}
.process__icon .icon { width: 26px; height: 26px; }
.process__number {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
}
.process__title { margin: 0 0 var(--space-xs); font-size: 1.0625rem; }
.process__text { margin: 0; font-size: 0.875rem; color: var(--color-muted); }

/* --------------------------------------------------------------------------
   14.8 Industries
   -------------------------------------------------------------------------- */
.industries {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.industry-tile { margin: 0; text-align: center; }
.industry-tile__media { display: block; }
.industry-tile__media img,
.industry-tile__media .media-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.industry-tile__label {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   14.9 Homepage CTA panel
   -------------------------------------------------------------------------- */
.home-cta { padding-block: 0 var(--space-3xl); }
.home-cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) var(--space-3xl);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 88% 50%, rgba(0, 140, 255, 0.32), transparent 65%),
    linear-gradient(105deg, #071A33 0%, #0B2547 55%, #123A6B 100%);
  color: #C3D4E8;
}
.home-cta__heading { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-bottom: var(--space-sm); }
.home-cta__text { color: #B9CBE2; max-width: 46ch; margin: 0; }
.home-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.home-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.home-cta__phone:hover { color: var(--color-cyan); }
.home-cta__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
}
.home-cta__script {
  position: absolute;
  right: var(--space-3xl);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14.10 Partner strip
   -------------------------------------------------------------------------- */
.partners { padding-block: var(--space-2xl); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.partners__heading {
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue-600);
}
.partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.partners__item { margin: 0; }
.partners__item img { max-height: 30px; width: auto; opacity: 0.72; filter: grayscale(1); transition: opacity var(--transition), filter var(--transition); }
.partners__item:hover img { opacity: 1; filter: none; }
.partners__wordmark {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   14.11 Footer additions
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-navy); color: #B9CBE2; padding-top: var(--space-3xl); }
.site-footer a { color: #B9CBE2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.6fr 1.5fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.brand--footer { margin-bottom: var(--space-md); }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__suffix { color: #8FA8C4; }
.site-footer__text { font-size: 0.875rem; max-width: 30ch; }
.site-footer__heading {
  margin-bottom: var(--space-md);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}
.site-footer__column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: 0.875rem; }
.site-footer__column li { margin: 0; }
.site-footer__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.site-footer__social { display: flex; gap: var(--space-xs); list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.site-footer__social li { margin: 0; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.site-footer__social a:hover { background: var(--color-blue); }
.site-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); font-size: 0.875rem; }
.site-footer__contact li { display: flex; gap: var(--space-sm); margin: 0; }
.site-footer__contact .icon { color: var(--color-cyan); margin-top: 2px; flex: none; }
.site-footer__contact address { font-style: normal; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; align-items: center; gap: var(--space-sm); }
.site-footer__legal span { color: rgba(255, 255, 255, 0.3); }
.site-footer__tagline { color: #8FA8C4; }

/* --------------------------------------------------------------------------
   14.12 Responsive for the design components
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.6fr; }
  .site-footer__grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .process__step:nth-child(3)::before { display: none; }
  .home-cta__panel { grid-template-columns: 1fr; padding: var(--space-2xl); }
  .home-cta__script { display: none; }
}

@media (max-width: 820px) {
  .site-nav__item { flex-wrap: wrap; }
  .site-nav__caret { margin-left: auto; }
  .dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding-inline: 0;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { display: none; }
  .dropdown.is-open { display: block; }
  .dropdown__all { border-top: 0; }
}

@media (max-width: 720px) {
  .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners__list { justify-content: center; gap: var(--space-lg); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .site-footer__grid > div:last-child { grid-column: auto; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .mini-features { gap: var(--space-lg); }
}

@media (max-width: 480px) {
  .process { grid-template-columns: 1fr; }
  .process__step::before { display: none !important; }
  .site-footer__services { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14.13 Interior page hero
   Brings /services/, the nine detail pages, /about-us/ and /contact-us/ onto the
   same visual language as the homepage hero, at a compact interior height.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--color-navy);
  overflow: hidden;
  padding-block: var(--space-3xl);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 130% at 88% 12%, rgba(40, 120, 255, 0.32) 0%, rgba(6, 20, 40, 0) 62%),
    linear-gradient(100deg, rgba(6, 20, 40, 0.9) 0%, rgba(6, 20, 40, 0.55) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9FC6E8;
}
.page-hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-cyan);
  flex: none;
}
.page-hero__title {
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.85rem);
  line-height: 1.15;
  max-width: 22ch;
}
.page-hero__lead { color: #C3D4E8; max-width: 62ch; }

/* Related-service cards sit on a tinted section, so they need the card surface. */
.service-card--compact { padding: var(--space-lg); }

@media (max-width: 720px) {
  .page-hero { padding-block: var(--space-2xl); }
  .page-hero__title { max-width: none; }
}

/* --------------------------------------------------------------------------
   14.14 Vertical rhythm
   The first pass left too much air above and below every band; this tightens the
   whole page without touching the spacing scale other components depend on.
   -------------------------------------------------------------------------- */
.section { padding-block: 3.25rem; }
.section--tight { padding-block: var(--space-xl); }
.section__head { margin-bottom: var(--space-xl); }
.hero__inner { padding-block: 4rem; }
.page-hero { padding-block: var(--space-2xl); }
.value-strip__grid { padding-block: var(--space-xl); }
.partners { padding-block: var(--space-xl); }
.partners__heading { margin-bottom: var(--space-lg); }
.mini-features { margin-top: var(--space-lg); }

/* Centred section heads get the room to hold their heading on one line, while the
   lead paragraph stays at a comfortable reading measure. */
.section__head--center { max-width: 940px; }
.section__head--center .section__lead { max-width: 640px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   14.15 Continuous marquees
   One mechanism for the three sliding bands: the track holds the item set several
   times over and shifts by exactly one set, so the loop has no visible seam.
   Direction is set per band; reduced-motion stops all of them.
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.marquee__track > li { margin: 0; flex: none; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Every track holds four copies of its set, so it shifts by a quarter of itself —
   one full set — which is what makes the restart invisible. Four copies also keeps
   the remaining track wider than the viewport on large desktop screens. */
@keyframes marquee-left-4 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
@keyframes marquee-right-4 { from { transform: translate3d(-25%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Stretch, not centre: the items have different text heights, and centring each one
   individually leaves the icons stepping up and down across the row. */
.marquee--values .marquee__track {
  gap: var(--space-3xl);
  align-items: stretch;
  padding-block: var(--space-xl);
  animation: marquee-right-4 46s linear infinite;
}
.marquee--values .value-item { width: 270px; align-items: flex-start; }

.marquee--industries .marquee__track { gap: var(--space-md); animation: marquee-left-4 60s linear infinite; }
.marquee--industries .industry-tile { width: 168px; }

.marquee--partners .marquee__track { gap: var(--space-3xl); animation: marquee-left-4 40s linear infinite; }

/* A fixed box per logo with object-fit: contain keeps a wide wordmark from dwarfing
   a square mark — without it VMware renders five times the width of Dell. */
.marquee--partners .partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 48px;
}
.marquee--partners .partners__item picture { display: flex; align-items: center; height: 100%; }
.marquee--partners .partners__item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Paused by the control, by hover, or by keyboard focus landing inside. */
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* The three bands keep moving even under prefers-reduced-motion: the site owner
   asked for them explicitly, and the pause control below is what actually
   satisfies WCAG 2.2.2 — a mechanism to stop moving content — rather than the
   blunt global switch. The motion is slow, linear and never flashes.
   The global rule in section 12 would otherwise collapse these to 0.01ms. */
.marquee__track {
  animation-duration: inherit;
}
.marquee--values .marquee__track,
.marquee--industries .marquee__track,
.marquee--partners .marquee__track {
  animation-iteration-count: infinite !important;
}

.marquee__control {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition), color var(--transition), border-color var(--transition);
}
.marquee__control:hover,
.marquee__control:focus-visible { opacity: 1; color: var(--color-blue-600); border-color: var(--color-blue); }
.marquee__control svg { width: 12px; height: 12px; fill: currentColor; }
.marquee--industries .marquee__control { background: var(--color-bg); }

/* --------------------------------------------------------------------------
   14.16 Brand logo artwork
   -------------------------------------------------------------------------- */
.brand__logo { display: block; height: 42px; width: auto; }
.brand--footer .brand__logo { height: 44px; }

/* --------------------------------------------------------------------------
   14.17 Full-width Get Started band
   -------------------------------------------------------------------------- */
.home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 0;
  background: var(--color-navy);
  color: #C3D4E8;
}
.home-cta__bg { position: absolute; inset: 0; z-index: -2; }
.home-cta__bg picture, .home-cta__bg .media-placeholder { display: block; height: 100%; }
.home-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.home-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 120% at 82% 50%, rgba(0, 140, 255, 0.30), transparent 68%),
    linear-gradient(100deg, rgba(6, 20, 40, 0.92) 0%, rgba(6, 20, 40, 0.72) 55%, rgba(6, 20, 40, 0.55) 100%);
}
.home-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
}
.home-cta__script { right: var(--space-lg); }

@media (max-width: 1024px) {
  .home-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .marquee--values .value-item { width: 240px; }
  .marquee--industries .industry-tile { width: 136px; }
}

/* --------------------------------------------------------------------------
   14.18 Small screens

   900px is this site's one mobile breakpoint — it is where the top bar and the
   header navigation give way — so the whole small-screen treatment lives here
   rather than being split across 900 / 720 / 480. Phones report CSS widths
   anywhere from about 360 to 820, and splitting the rules meant a large phone
   got the hero cropped one way and a small one another.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* With the top bar hidden, the hero is the only place left to call or write
     from, so the two actions stack full width and read as the primary path. */
  .hero__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .hero__contact .btn { width: 100%; justify-content: center; }

  /* The pill would only repeat the Call button above it. */
  .hero__meta { display: none; }

  /* The photograph is 2.13:1, so a portrait viewport crops it to roughly a third
     of its width. Centred, that lands on empty sky; 82% keeps the technician,
     the branded uniform and the racks in frame, and is darker behind the
     headline. */
  .hero__bg-image { object-position: 82% center; }
  .hero__inner { padding-block: var(--space-3xl); }

  /* The desktop scrim runs at 100deg across a wide box, so its darkest stop sits
     on the left third. Turned upright on a phone that stop covers the whole
     photograph and the hero reads as flat navy. Run it down the page instead:
     dark enough behind the headline, clearing towards the foot so the image is
     actually visible. */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(6, 20, 40, 0.90) 0%,
        rgba(6, 20, 40, 0.80) 38%,
        rgba(6, 20, 40, 0.58) 72%,
        rgba(6, 20, 40, 0.45) 100%);
  }

}

/* Two columns hold their shape down to about 600px; below that a card cannot fit
   a thumbnail and a readable line beside it, so it goes full width. Above 600 a
   single column just stretches one short line across the whole screen. */
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14.19 About highlights and process, as marquees
   -------------------------------------------------------------------------- */
/* Static on desktop, where all three sit side by side inside the about column and
   there is nothing to scroll past; a strip that short reads as restless rather
   than moving. It becomes a marquee only where the column is too narrow to hold
   the three at once. */
.marquee--features { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.marquee--features .marquee__track {
  width: 100%;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: stretch;
  animation: none;
}
.marquee--features .marquee__track > li[aria-hidden="true"] { display: none; }
.marquee--features .marquee__control { display: none; }

@media (max-width: 900px) {
  .marquee--features {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee--features .marquee__track {
    width: max-content;
    flex-wrap: nowrap;
    animation: marquee-right-4 34s linear infinite;
  }
  .marquee--features .marquee__track > li[aria-hidden="true"] { display: flex; }
  .marquee--features li { width: 190px; }
  .marquee--features .marquee__control {
    display: inline-flex;
    right: 0;
    bottom: -6px;
    width: 24px;
    height: 24px;
  }
  .marquee--features .marquee__control svg { width: 9px; height: 9px; }
}

/* The process is a four-across grid on desktop, where all four steps fit and the
   dashed connector between them means something. Below the mobile breakpoint the
   steps become a marquee instead. */
.marquee--process { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.marquee--process .marquee__track {
  /* .marquee__track sets display:flex later in the file than .process sets grid,
     so the grid has to be restated here or the four steps lay out in a row wide
     enough to overflow the page. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
  animation: none;
}
.marquee--process .marquee__track > li[aria-hidden="true"] { display: none; }
.marquee--process .marquee__control { display: none; }

@media (max-width: 900px) {
  .marquee--process {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee--process .marquee__track {
    display: flex;
    grid-template-columns: none;
    width: max-content;
    gap: var(--space-lg);
    animation: marquee-left-4 44s linear infinite;
  }
  .marquee--process .marquee__track > li[aria-hidden="true"] { display: block; }
  .marquee--process .marquee__control { display: inline-flex; }
  .marquee--process .process__step { width: 220px; }
  /* The connector assumes neighbours in a grid; in a moving row it is noise. */
  .marquee--process .process__step::before { display: none; }

  /* Services: photograph across the card, then heading, description and the
     Learn More link beneath it. */
  .service-card--image { flex-direction: column; gap: var(--space-md); padding: var(--space-md); }
  .service-card__thumb { width: 100%; }
  .service-card__thumb picture { display: block; }
  .service-card__thumb img,
  .service-card__thumb .media-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }
  .service-card--image .service-card__title { font-size: 1.1875rem; }
  .service-card--image .service-card__text { font-size: 0.9375rem; }
  .service-card--image .service-card__more { margin-top: var(--space-xs); font-size: 0.9375rem; }
}