/* ==========================================================
   site-labs.css: the Labs page look (_lab/lab.css), shared by the
   Products hub, product pages, demo pages and Contact page.
   Load it LAST (after pulse.css / ai-work-sample.css / demo-modal.css /
   contact-modal.css) so these rules win. The homepage uses style.css.
   Added 2026-09-27 (labsync). Colors: navy #002340, green #2e7d32,
   teal #009688, white, plus the neutral grays already used.
   ========================================================== */

/* 1. Tokens + base (Labs sections 1-2) ------------------------ */
:root {
  --labs-navy: #002340;
  --labs-green: #2e7d32;
  --labs-text: #1f2933;
  --labs-muted: #5c6670;
  --labs-line: #e3e7eb;
  --labs-font: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --labs-max: 1100px;
  --header-height: 4.8rem;
}
body {
  font-family: var(--labs-font);
  color: var(--labs-text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;               /* footer stays at the bottom on short pages */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
a { color: var(--labs-green); }
.pulse-wrap { width: min(100% - 2.5rem, var(--labs-max)); margin-inline: auto; }

/* 2. Top bar: solid navy, also while scrolling (no frosted glass) */
.site-topbar,
.site-topbar.is-scrolled {
  background: var(--labs-navy);
  background-color: var(--labs-navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-topbar.is-scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.site-topbar__inner { width: min(100% - 2.5rem, 1140px); margin-inline: auto; justify-content: center; }
.site-topbar__nav a {
  color: #fff; font-family: var(--labs-font);
  font-weight: 600; font-size: .9rem; letter-spacing: .02em;
}

/* 3. Page intro (was the navy-to-green hero): white, navy title,
      muted lead, thin green divider (Labs .lab-intro) */
.pulse-hero {
  background: #fff;
  color: var(--labs-text);
  padding: 0;
}
.pulse-hero__inner {
  padding: 2.25rem 0 1.375rem;
  border-bottom: 1px solid var(--labs-green);
}
.pulse-hero__title {
  margin: 0 0 .6rem;
  font-family: var(--labs-font);
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--labs-navy);
}
.pulse-hero__lead {
  margin: 0;
  max-width: 100%;
  font-family: var(--labs-font);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--labs-muted);
}

/* 4. Content sections (Labs .lab-section) --------------------- */
.lab-section { max-width: 100%; padding: 1.5rem 0 1rem; }
.lab-section h2 { margin: 0 0 .4rem; color: var(--labs-navy); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.lab-section .lab-note { margin: 0 0 2rem; color: var(--labs-muted); }
.lab-section h3 { margin: 2rem 0 .5rem; color: var(--labs-green); font-size: 1.1rem; font-weight: 600; }
.lab-section p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.75; }
.lab-section--divided { padding-bottom: 1.1875rem; border-bottom: 1px solid var(--labs-green); }
.lab-section--divided > p:last-child { margin-bottom: 0; }

/* 5. Info cards (.aws-box), as in Labs section 10 ------------- */
.aws-brief { background: #fff; padding: 1.8125rem 0 0; }
.aws-box {
  color: #1a1a1a;
  line-height: 1.5;
  font-family: "Source Sans Pro", "Source Sans 3", "Segoe UI", sans-serif;
}
.aws-box + .aws-box { margin-top: 1.5rem; }
main > .aws-brief:last-child { padding-bottom: 3.5rem; }   /* e.g. Contact page: space above the footer */
.aws-brief__title {
  margin: 0 0 .2rem;
  font-family: var(--labs-font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--labs-navy);
}
.aws-disclaimer { color: var(--labs-green); }

/* 6. Call to action: centred row, no green band (Labs .lab-cta) */
.pulse-cta {
  background: #fff;
  color: var(--labs-navy);
  padding: 3rem 0 3.5rem;
  text-align: center;
}
.pulse-cta h2,
.pulse-cta .aws-cta-heading {
  max-width: 100%;
  margin: 0 auto 1.5rem;
  font-family: var(--labs-font);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--labs-navy);
}
.pulse-cta .pulse-cta__btn,
.pulse-cta button.pulse-cta__btn {
  margin: 0;
  min-height: 3rem;
  min-width: min(200px, 100%);
  padding: .7rem 1.5rem;
  border: 2px solid var(--labs-navy);
  border-radius: 4px;
  background: var(--labs-navy);
  color: #fff;
  font-family: var(--labs-font);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.pulse-cta .pulse-cta__btn:hover,
.pulse-cta .pulse-cta__btn:focus-visible { background: #001a30; border-color: #001a30; color: #fff; }
.pulse-cta p,
.pulse-cta p.aws-cta-line {
  margin: 1rem auto 0;
  max-width: 100%;
  color: var(--labs-muted);
  font-size: .95rem;
}

/* 7. Icon cards: icon on top, title centred underneath (Labs .lab-card) */
.lab-cards-section { background: #fff; padding: 1.8125rem 0 0; }
.lab-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.lab-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 1.5rem 2rem;
  background: #fff;
  border: 1px solid var(--labs-line);
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.lab-card:hover,
.lab-card:focus-visible {
  border-color: #cfd6dc;
  box-shadow: 0 10px 28px rgba(0, 35, 64, .08);
  transform: translateY(-2px);
}
.lab-card img { display: block; width: 168px; height: 168px; max-width: 100%; }
.lab-card h2 {
  margin: 1.25rem 0 0;
  font-family: var(--labs-font);
  font-size: 1.1rem; font-weight: 600; line-height: 1.3;
  color: var(--labs-navy);
  text-align: center;
}

/* 8. Contact page form: same field + button look as the pop-up */
.ciq-field label { font-family: var(--labs-font); color: var(--labs-navy); font-weight: 600; font-size: .95rem; }
.ciq-field label span { color: var(--labs-green); }
.ciq-field input,
.ciq-field select,
.ciq-field textarea {
  width: 100%; box-sizing: border-box; padding: .6rem .75rem;
  font-family: var(--labs-font); font-size: 1rem;
  color: #1a1a1a; background: #fff; border: 1px solid #cfd6dc; border-radius: 6px;
}
.ciq-field input:focus,
.ciq-field select:focus,
.ciq-field textarea:focus { outline: none; border-color: var(--labs-green); box-shadow: 0 0 0 1px var(--labs-green); }
.pulse-search__btn.ciq-contact-submit {
  margin-top: 1.25rem;
  border: 2px solid var(--labs-navy);
  background: var(--labs-navy);
  color: #fff;
}
.pulse-search__btn.ciq-contact-submit:hover,
.pulse-search__btn.ciq-contact-submit:focus-visible { background: #001a30; border-color: #001a30; }

/* 9. Footer: one line, navy with white text (Labs .lab-footer) */
.pulse-footer {
  background: var(--labs-navy);
  color: #fff;
  padding: 1.75rem 1.25rem;
  font-family: var(--labs-font);
  font-size: .9rem;
  text-align: center;
}
.pulse-footer .pulse-wrap { width: auto; }
.pulse-footer p { margin: 0; }

/* 10. Phones (Labs 760px breakpoint) ------------------------- */
@media (max-width: 760px) {
  .pulse-hero__inner { padding: 3rem 0 2rem; }
  .lab-section { padding-top: 2.25rem; }
  .lab-section--divided { padding-bottom: 1.9375rem; }
  .pulse-cta { padding: 2.25rem 0 3rem; }
  main > .aws-brief:last-child { padding-bottom: 2.5rem; }
  .lab-cards { grid-template-columns: 1fr; gap: 1.25rem; }
  .lab-cards-section { padding-top: 2.5625rem; }
  .lab-card { padding: 2rem 1.25rem 1.75rem; }
  .lab-card img { width: 140px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-card { transition: none; }
  .lab-card:hover, .lab-card:focus-visible { transform: none; }
}

/* Intro with no green divider (Database App page). Backup: site-labs.css.bak-nodivider */
.pulse-hero--plain .pulse-hero__inner { border-bottom: 0; padding-bottom: 0; }
/* Database App title matches the homepage section headings (28px). Backup: site-labs.css.bak-dbtitle */
.pulse-hero--plain .pulse-hero__title {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #002340;
}
/* Database App: less space between the title and the note. Backup: site-labs.css.bak-dbgap */
.pulse-hero--plain .pulse-hero__title { margin-bottom: .4rem; }
.pulse-hero--plain + .lab-section-wrap .lab-section { padding-top: 0; }

/* Database App: tighter title-to-note gap. Backup: site-labs.css.bak-dbgap2 */
.pulse-hero--plain .pulse-hero__title { margin-bottom: 0; }
.pulse-hero--plain + .lab-section-wrap .lab-section > .lab-note:first-child { margin-top: 0; }

/* Database App: intro paragraph right under the title. Backup: site-labs.css.bak-ctagap */
.pulse-hero--plain + .lab-section-wrap .lab-section > .lab-intro:first-child { margin-top: 0; }
/* Database App: less space between the bottom divider and the trial line */
.pulse-hero--plain ~ .pulse-cta { padding-top: 1.75rem; }
@media (max-width: 760px) { .pulse-hero--plain ~ .pulse-cta { padding-top: 1.5rem; } }

/* Database App: title-to-intro gap matches the green heading-to-paragraph gaps. Backup: site-labs.css.bak-titlegap */
.pulse-hero--plain .pulse-hero__title { margin-bottom: .5625rem; }

/* Image-only info box (Interactive Maps): box takes the picture's own ratio */
.aws-box.aws-box--image { padding: 0; overflow: hidden; aspect-ratio: 1152 / 548; }
.aws-box--image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* Three image boxes in a row (Interactive Maps); stacked on phones */
.aws-image-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.aws-image-row .aws-box + .aws-box { margin-top: 0; }
@media (max-width: 600px) { .aws-image-row { grid-template-columns: 1fr; gap: 1rem; } }

/* Interactive Maps: green divider under the three pictures, not under the intro.
   Backup: site-labs.css.bak-mapsdiv */
.maps-page .pulse-hero__inner { border-bottom: 0; }
.maps-page .aws-image-row {
  padding-bottom: 1.375rem;
  border-bottom: 1px solid var(--labs-green);
}
@media (max-width: 760px) {
  .maps-page .aws-image-row { padding-bottom: 2rem; }
}

/* Interactive Maps: title, intro, and block spacing match the Database App page.
   Backup: site-labs.css.bak-mapformat */
.maps-page .lab-section > .aws-image-row { margin-top: 1.5rem; }
.maps-page #map-uses .lab-section { padding-top: 1.5rem; padding-bottom: 0; }
.maps-page #map-uses .lab-section > h3:first-child { margin-top: 0; }