/* ============================================================
   Fiduja — Design System v5
   Blue spectrum (navy → light blue) with gold used only in small
   doses, per direct art direction — not the literal brand-guideline
   fonts/logo treatment. Clean, sharp Inter throughout (the register
   Apple/Microsoft/Google use), moderate buttons, a refined always-on
   top nav, and real product screenshots instead of illustrated
   mockups wherever the product itself is the point.
   ============================================================ */

:root {
  --navy-900: #0f1e3c;
  --navy-800: #16294f;
  --navy-700: #1e3660;
  --blue-600: #2b4d84;
  --blue-500: #3868ab;
  --blue-400: #5f8ed0;
  --blue-300: #93b7e4;
  --blue-200: #c2d9f2;
  --blue-100: #e3edfa;
  --blue-50: #f4f8fd;

  --white: #ffffff;
  --gold: #c79a3a;
  --gold-deep: #a67d24;
  --gold-bright: #d4af37;

  --ink: var(--navy-900);
  --muted: #59647d;
  --neutral-700: #44474a;
  --neutral-900: #17181a;
  --muted-on-navy: rgba(227, 237, 250, 0.72);
  --line: rgba(15, 30, 60, 0.12);
  --line-on-navy: rgba(227, 237, 250, 0.16);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1240px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 20px 50px rgba(15, 30, 60, 0.1);
  --shadow-lg: 0 30px 80px rgba(15, 30, 60, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* position:fixed elements (the mobile nav panel) are positioned relative
     to the viewport, not body — so overflow-x:clip on body alone cannot
     constrain them; per spec, a fixed-position descendant escapes its
     ancestors' overflow clipping entirely. Clipping at the html level (the
     root of the initial containing block) is what actually constrains it.
     "clip" (not "hidden") is deliberate here too: unlike hidden/auto/scroll,
     it doesn't force overflow-y to "auto" and doesn't establish a new
     scrolling box, so it won't reintroduce the position:sticky header bug
     fixed earlier. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-sans);
  color: var(--muted);
  background: var(--blue-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

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

.container-narrow {
  width: min(760px, calc(100% - 48px));
  margin-inline: auto;
}

.container-narrow h2 {
  font-size: 24px;
  margin-top: 46px;
}

.container-narrow h2:first-of-type {
  margin-top: 0;
}

/* ---------- Typography — clean, sharp, no serif ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 18px;
}

h1 {
  font-size: clamp(34px, 4.4vw, 56px);
}

h2 {
  font-size: clamp(28px, 3.4vw, 42px);
}

h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
  color: var(--muted);
}

.section-dark p {
  color: var(--muted-on-navy);
}

.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 620px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-500);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.section-dark .eyebrow {
  color: var(--blue-300);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.mono-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.text-accent {
  color: var(--blue-500);
}

/* ---------- Buttons — moderate size, not pills, not boxes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-weight: 350;/*600;*/
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.btn-primary {
  color: var(--white);
  background: var(--navy-800);
  border-color: var(--navy-800);
}

.btn-primary:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.btn-secondary {
  color: var(--navy-800);
  background: var(--white);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
}

.section-dark .btn-secondary {
  color: var(--white);
  background: transparent;
  border-color: var(--line-on-navy);
}

.section-dark .btn-secondary:hover {
  border-color: var(--blue-300);
  color: var(--blue-200);
}

.btn-ghost {
  color: var(--navy-800);
  background: transparent;
  border-color: transparent;
  padding: 12px 4px;
}

.btn-ghost::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}

.btn-ghost:hover::after {
  transform: translateX(4px);
}

/* ---------- Header / Nav — always on top, clean like a native app bar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 30, 60, 0.05), 0 8px 24px rgba(15, 30, 60, 0.04);
}

.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand img {
  width: 32px;
  height: auto;
}

.brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand .brand-word {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--neutral-900);
}

.brand .brand-tagline {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 400;
  font-size: 15px;
  color: var(--neutral-700);
}

.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--neutral-900);
}

.nav-links a.active {
  color: var(--neutral-900);
  font-weight: 500;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--neutral-900);
  position: relative;
  transition: all 0.2s ease;
}

.nav-toggle span::before {
  position: absolute;
  top: -5px;
}

.nav-toggle span::after {
  position: absolute;
  top: 5px;
}

.nav-links-cta {
  display: none;
}

/* ---------- Page hero — used on every page, including Home/Insights ---------- */

.page-hero {
  padding: 68px 0 56px;
  background: linear-gradient(180deg, var(--blue-100) 0%, var(--blue-50) 100%);
}

.page-hero h1 {
  max-width: 800px;
}

.page-hero .lede {
  max-width: 640px;
  font-size: 18px;
}

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

/* ---------- Screenshot frame — real product UI, presented like a browser window ---------- */

.screenshot-frame {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.screenshot-frame .chrome-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--line);
}

.screenshot-frame .chrome-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-200);
}

.screenshot-frame .chrome-bar .url-pill {
  margin-left: 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
}

.screenshot-frame img {
  width: 100%;
  display: block;
}

/* ---------- Product showcase ---------- */

.showcase {
  position: relative;
  padding: 0 0 20px;
}

.showcase-frame {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
}

.showcase-caption {
  text-align: center;
  max-width: 560px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Stat row ---------- */

.signature-stat-band {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
}

.signature-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 0;
}

.signature-stat-item {
  flex: 1 1 210px;
  padding: 0 26px;
  border-left: 1px solid var(--line);
}

.signature-stat-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.signature-stat-item strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.signature-stat-item span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  display: block;
}

/* ---------- Sections ---------- */

.section {
  padding: 96px 0;
}

.section-tight {
  padding: 56px 0;
}

.section-soft {
  background: var(--blue-100);
}

.section-dark {
  background: var(--navy-900);
  color: var(--white);
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

.section-head {
  max-width: 700px;
  margin: 0 0 48px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Cards / grids ---------- */

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

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

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

.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--blue-200);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: var(--blue-100);
  color: var(--blue-600);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  margin-bottom: 8px;
}

.feature-card p {
  margin: 0;
}

.check-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.check b {
  color: var(--ink);
}

.check-mark {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-100);
  color: var(--blue-600);
  font-weight: 800;
  font-size: 12px;
  margin-top: 1px;
}

/* ---------- Split layout ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

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

.split.reverse > *:first-child {
  order: 2;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.contact-card,
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.contact-card .info-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contact-card .info-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ---------- Process steps ---------- */

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

.step {
  background: rgba(227, 237, 250, 0.06);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold-bright);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.step h3 {
  color: var(--white);
}

/* ---------- CTA band ---------- */

.cta-band {
  border-radius: var(--radius-lg);
  padding: 48px;
  background: linear-gradient(120deg, var(--navy-800), var(--blue-600));
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}

.cta-band h2 {
  margin-bottom: 8px;
  color: var(--white);
}

.cta-band p {
  margin: 0;
  font-size: 17px;
  color: var(--blue-100);
}

.cta-band .btn-primary {
  background: var(--white);
  color: var(--navy-800);
  border-color: var(--white);
}

.cta-band .btn-primary:hover {
  background: var(--blue-100);
  border-color: var(--blue-100);
}

/* ---------- Trust strip ---------- */

.trust-strip {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.trust-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  align-items: center;
  justify-content: space-between;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-700);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--blue-500);
  flex: none;
}

/* ---------- Forms ---------- */

label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--ink);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font: inherit;
  outline: none;
  background: var(--white);
  margin-bottom: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(56, 104, 171, 0.14);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: -6px;
}

.form-status {
  border-radius: var(--radius);
  padding: 16px 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.form-status.success {
  background: rgba(46, 125, 50, 0.1);
  color: #1e5c22;
  border: 1px solid rgba(46, 125, 50, 0.24);
}

.form-status.error {
  background: rgba(198, 40, 40, 0.08);
  color: #a12626;
  border: 1px solid rgba(198, 40, 40, 0.22);
}

/* ---------- Placeholder markers ---------- */

.needs-info {
  background: rgba(199, 154, 58, 0.16);
  border-bottom: 2px dashed var(--gold-deep);
  padding: 0 3px;
  font-style: normal;
}

.draft-banner {
  background: var(--navy-900);
  color: var(--white);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
}

.draft-banner span {
  color: var(--gold-bright);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(227, 237, 250, 0.64);
  padding: 56px 0 26px;
}

.footer-grid {
  display: grid;
  /* 3 columns while the Legal column is hidden (includes/footer.php) — restore
     to "1.3fr 1fr 1fr 1fr" once Privacy/Terms are published. */
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-on-navy);
}

.footer-brand .brand {
  margin-bottom: 14px;
}

.footer-brand .brand-word {
  color: var(--white);
}

.footer-brand .tagline {
  display: block;
  font-size: 13px;
  color: var(--blue-300);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.footer-brand p {
  color: rgba(227, 237, 250, 0.56);
  max-width: 280px;
  font-size: 14px;
}

.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(227, 237, 250, 0.64);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--blue-200);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  font-size: 13px;
}

/* ---------- Illustrated mockup device card (used sparingly, e.g. Solutions) ---------- */

.device-card {
  position: relative;
  background: var(--navy-800);
  border-radius: var(--radius-lg);
  padding: 26px;
  overflow: hidden;
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.device-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.device-head .dot-row {
  display: flex;
  gap: 6px;
}

.device-head .dot-row span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(227, 237, 250, 0.24);
}

.device-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(227, 237, 250, 0.58);
}

.device-panel {
  background: rgba(227, 237, 250, 0.06);
  border: 1px solid rgba(227, 237, 250, 0.1);
  border-radius: var(--radius);
  padding: 18px;
}

.device-panel + .device-panel {
  margin-top: 14px;
}

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

.kpi-tile {
  background: rgba(227, 237, 250, 0.06);
  border: 1px solid rgba(227, 237, 250, 0.1);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.kpi-tile strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.kpi-tile span {
  font-size: 11px;
  color: rgba(227, 237, 250, 0.56);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-up {
  color: #8ce0a8;
}

.drift-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(227, 237, 250, 0.12);
  margin: 16px 0 10px;
}

.drift-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(212, 175, 55, 0.32);
  border-radius: 999px;
}

.drift-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 3px solid var(--navy-800);
  transform: translate(-50%, -50%);
}

.drift-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(227, 237, 250, 0.5);
}

.device-card.light {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}

.device-card.light .device-title {
  color: var(--muted);
}

.device-card.light .device-panel {
  background: var(--blue-50);
  border: 1px solid var(--line);
}

.device-card.light .kpi-tile {
  background: var(--white);
  border: 1px solid var(--line);
}

.device-card.light .kpi-tile strong {
  color: var(--ink);
}

.device-card.light .kpi-tile span {
  color: var(--muted);
}

.device-card.light .drift-track {
  background: var(--line);
}

.device-card.light .drift-labels {
  color: var(--muted);
}

.device-card.light .device-head .dot-row span {
  background: var(--line);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

/* ---------- Utilities ---------- */

.mt-0 {
  margin-top: 0;
}

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

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: calc(100vh - 72px);
    z-index: 99;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 20px;
    font-size: 20px;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility flips to hidden only after the slide-out finishes, so the
       closing animation still plays; opening flips it immediately (delay: 0s)
       so the panel is visible from the first frame of the slide-in. This is
       the actual fix for the "reachable by pinch-zoom/pan" bug: overflow
       clipping only constrains the layout viewport, but pinch-zoom operates
       on the visual viewport above it, so a merely off-screen (transformed)
       panel can still be scrolled/zoomed into view. visibility:hidden means
       the browser doesn't paint the panel at all, at any zoom level, and
       correctly removes it from the tab order / accessibility tree too. */
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
    overflow-y: auto;
  }

  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s var(--ease), visibility 0s linear 0s;
  }

  .nav-toggle {
    display: grid;
  }

  .nav-actions-cta {
    display: none;
  }

  .nav-links-cta {
    display: inline-flex;
    margin-top: 8px;
  }

  .grid-3,
  .grid-2,
  .grid-4,
  .process {
    grid-template-columns: 1fr 1fr;
  }

  .split,
  .split.reverse,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .split.reverse > *:first-child {
    order: 0;
  }

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

  .trust-strip-row {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .nav {
    height: 64px;
  }

  .nav-links {
    top: 64px;
    height: calc(100vh - 64px);
  }

  .section {
    padding: 60px 0;
  }

  .cta-band {
    padding: 32px 26px;
  }

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

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}