/* ================= HOME ================= */
.hero {
  padding-top: var(--space-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-copy h1 { margin-block: var(--space-2) var(--space-3); }
.hero-copy p.intro-text { margin-bottom: var(--space-4); }
.hero-visual svg { width: 100%; height: auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin-inline: auto; }
}

.trust-strip {
  border-block: 1px solid var(--border);
  background: var(--white);
}
.trust-strip-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}
.trust-strip-inner p {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-6);
}
.why-list { display: flex; flex-direction: column; gap: var(--space-4); }
.why-list h3 { margin-bottom: 6px; }
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; }
}

.custom-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.custom-cta-inner h2 { margin-bottom: var(--space-2); }
.custom-cta-inner > div:first-child { max-width: 640px; }

.contact-panel-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--pale-blue);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.contact-panel-inner h2 { margin-bottom: var(--space-2); }
.contact-panel-inner > div:first-child { max-width: 560px; }

/* ================= INNER PAGE HERO (shared) ================= */
.page-hero {
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}
.page-hero .eyebrow { display: block; }
.page-hero h1 { margin-block: var(--space-2) var(--space-3); }
.page-hero .intro-text { max-width: 680px; margin-inline: auto; }

/* ================= SERVICES ================= */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.service-block:nth-of-type(even) .service-media { order: -1; }
.service-media {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.service-media svg { width: 100%; height: auto; }
.service-copy h2 { margin-bottom: var(--space-2); }
.service-copy .lede {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.service-copy ul { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.service-copy li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--slate);
}
.service-copy li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--leaf); margin-top: 3px; }

@media (max-width: 860px) {
  .service-block, .service-block:nth-of-type(even) .service-media { grid-template-columns: 1fr; order: 0; }
  .service-block { grid-template-columns: 1fr; }
}

.services-overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
@media (max-width: 900px) { .services-overview-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .services-overview-grid { grid-template-columns: 1fr; } }
.overview-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
}
.overview-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ================= DEMOS ================= */
.demo-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
}
.demo-block:not(:last-child) { border-bottom: 1px solid var(--border); }
.demo-block:nth-of-type(even) .demo-media { order: -1; }
.demo-media {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.demo-media svg { width: 100%; height: auto; }
.demo-copy h3 { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 2.2vw, 1.9rem); }

@media (max-width: 860px) {
  .demo-block, .demo-block:nth-of-type(even) .demo-media { grid-template-columns: 1fr; order: 0; }
  .demo-block { grid-template-columns: 1fr; }
}

.demo-disclaimer {
  background: var(--pale-blue);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  color: var(--slate);
  margin-bottom: var(--space-6);
}

/* ================= ABOUT ================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}
.about-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }

/* ================= CONTACT ================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}
.contact-info .card { margin-bottom: var(--space-3); }
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ================= LEGAL ================= */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}
.legal-content h2 { margin-block: var(--space-5) var(--space-2); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { margin-bottom: var(--space-2); }
.legal-content ul { list-style: disc; padding-left: 1.4em; }
.legal-content .updated { color: var(--slate); font-size: 14px; margin-bottom: var(--space-5); }
.legal-flag {
  background: var(--pale-blue);
  border-left: 4px solid var(--orange);
  border-radius: 0 10px 10px 0;
  padding: var(--space-3);
  margin-block: var(--space-3);
  font-size: 15px;
}
.flag-inline {
  color: #B85A00;
  font-style: italic;
  font-size: 0.92em;
}