/* Visual refinements layered on top of tailwind.css (loaded after it). */

:root {
  color-scheme: light;
  --ag-ink: #1f2a37;
  --ag-text: #3d4651;
  --ag-muted: #6b7480;
  --ag-line: #d9dee4;
  --ag-blue: #1b98dc;
  --ag-blue-dark: #137cb6;
  --ag-blue-soft: #f1f8fe;
  --ag-green: #69bd38;
  --ag-green-dark: #57a52b;
  --ag-gold: #d1a242;
  --ag-shadow: 0 24px 48px -20px rgba(16, 42, 67, .28);
}

/* ---------- Base ---------- */
html { background: #fff; }
body {
  background: #fff;
  color: var(--ag-text);
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(27, 152, 220, .18); }
h1, h2, h3, h4 { color: var(--ag-ink); letter-spacing: -.015em; }
.text-header { color: var(--ag-ink); }
sup { font-size: .6em; top: -.6em; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(27, 152, 220, .55);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Section wrappers used overflow:auto only to contain margins; flow-root does that
   without clipping shadows or spawning stray scrollbars. */
.overflow-auto { overflow: visible; display: flow-root; }

@media (max-width: 767px) {
  .my-16 { margin-top: 3rem; margin-bottom: 3rem; }
}

/* Inline text links */
p a:not([class]) {
  color: var(--ag-blue-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
p a:not([class]):hover { color: var(--ag-blue); }

/* Utilities missing from the purged tailwind build */
@media (min-width: 768px) { .md\:pb-\[25px\] { padding-bottom: 25px; } }
@media (min-width: 1024px) {
  .lg\:pb-\[28px\] { padding-bottom: 28px; }
  .lg\:-mx-8 { margin-left: -2rem; margin-right: -2rem; }
}

/* ---------- Header ---------- */
.site-logo { width: 176px; }
@media (min-width: 768px) { .site-logo { width: 224px; } }

/* ---------- Hero ---------- */
h1.text-header { font-weight: 700; }
@media (min-width: 1024px) { h1.lg\:leading-none { line-height: 1.08; } }
.hero-accent { color: var(--ag-green-dark); white-space: nowrap; }
h1 + p { color: var(--ag-text); }
img.h-\[53px\] { box-shadow: 0 4px 10px rgba(16, 42, 67, .15); }

/* ---------- Lead form ---------- */
#form {
  border-color: #e3e8ee;
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 28px 56px -24px rgba(16, 42, 67, .35), 0 2px 6px rgba(16, 42, 67, .06);
  scroll-margin-top: 24px;
}
#form h3 { color: var(--ag-ink); }
#form .relative.flex {
  border-color: #cfd6de;
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#form .relative.flex:hover { border-color: #aab4bf; }
#form .relative.flex:focus-within {
  border-color: var(--ag-blue);
  box-shadow: 0 0 0 3px rgba(27, 152, 220, .15);
}
#form .relative.flex:focus-within label { color: var(--ag-blue-dark); }
#form .relative.flex:has(input:not(:placeholder-shown):invalid) { border-color: #e5484d; }
#form label { transition: color .2s ease; }
#form input { color: var(--ag-ink); font-size: 15px; background: transparent; }
#form input::placeholder { color: #a3abb5; }

/* Spam trap: invisible to people, bots fill it in */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: .75rem;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #c62828;
}
.form-status:empty { display: none; }

.form-success { padding: 1.5rem .25rem; text-align: center; }
.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #74c843, #5cae2e);
  box-shadow: 0 10px 22px -8px rgba(88, 165, 44, .7);
}
.form-success h3 { margin-bottom: .75rem; font-size: 24px; font-weight: 500; line-height: 1.2; }
.form-success p { color: var(--ag-text); font-size: 15px; line-height: 1.5; }

/* ---------- CTA buttons ---------- */
.bg-tertiary {
  background: linear-gradient(180deg, #74c843 0%, #5cae2e 100%);
  box-shadow: 0 12px 24px -10px rgba(88, 165, 44, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bg-tertiary:hover {
  transform: translateY(-2px);
  filter: saturate(1.1) brightness(1.03);
  box-shadow: 0 16px 30px -10px rgba(88, 165, 44, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.bg-tertiary:active { transform: translateY(0); filter: brightness(.97); }
.bg-tertiary:disabled { cursor: progress; opacity: .75; transform: none; filter: none; }
.bg-tertiary svg { transition: transform .2s ease; }
.bg-tertiary:hover svg { transform: translateX(4px); }
@media (max-width: 767px) {
  .bg-tertiary { font-size: 18px; padding: 16px 24px; }
}

/* ---------- Content media ---------- */
picture { display: block; width: 100%; }
.media-photo {
  width: 100%;
  max-width: 460px;
  max-height: none;
  height: auto;
  aspect-ratio: 343 / 200;
  border-radius: 20px;
  box-shadow: var(--ag-shadow);
}
.media-books { width: 100%; max-width: 420px; }

/* "With over 350 representatives" caption: centred over the map on phones */
@media (max-width: 767px) { .map-caption { padding-left: 0; } }
.us-map path[fill="#44B1EC"] { transition: fill .2s ease; }
.us-map path[fill="#44B1EC"]:hover { fill: var(--ag-blue-dark); }
.us-map path[fill="white"] { pointer-events: none; }

/* Merton quote */
.quote {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--ag-gold);
  border-radius: 0 16px 16px 0;
  background: #fbf7ec;
  color: var(--ag-ink);
  font-style: italic;
}
.quote__author {
  display: block;
  margin-top: .625rem;
  font-size: .8em;
  font-style: normal;
  font-weight: 500;
  color: var(--ag-muted);
}

/* ---------- Testimonials ---------- */
.carousel-track { touch-action: pan-y; }
.carousel-track > div {
  position: relative;
  background: linear-gradient(180deg, #f5faff 0%, #eef6fd 100%);
  border-color: #cfe7f8;
}
.carousel-track > div::after {
  content: "\201C";
  position: absolute;
  top: 18px;
  right: 26px;
  font: 700 84px/1 Georgia, "Times New Roman", serif;
  color: rgba(27, 152, 220, .16);
  pointer-events: none;
}
.carousel-track > div > p { color: var(--ag-text); }
.carousel-track p:empty { display: none; }
.carousel-track img { box-shadow: 0 4px 10px rgba(16, 42, 67, .15); }

.carousel-dots { gap: 4px; }
.carousel-dots svg {
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  padding: 7px;
  cursor: pointer;
}
.carousel-dots circle { fill: #c3cad2; transition: fill .2s ease; }
.carousel-dots svg:hover circle { fill: #8d98a5; }
.carousel-dots svg.is-active circle { fill: var(--ag-blue); }
.carousel-dots svg:focus { outline: none; }
.carousel-dots svg:focus-visible { outline: 2px solid var(--ag-blue); outline-offset: 0; border-radius: 50%; }
@media (min-width: 1024px) { .carousel-dots { display: none; } }

/* ---------- Commitment ---------- */
.gap-5 > div:first-child svg { filter: drop-shadow(0 4px 8px rgba(27, 152, 220, .25)); }

/* ---------- Press logos ---------- */
.press-logos img {
  filter: grayscale(1);
  opacity: .65;
  transition: filter .25s ease, opacity .25s ease;
}
.press-logos img:hover { filter: none; opacity: 1; }
@media (max-width: 767px) {
  .press-logos img { margin: 0 1rem 1.5rem; height: 34px; }
}

/* ---------- Footer ---------- */
footer.bg-bglow { background: #f3f5f7; padding: 4rem 1.5rem 3rem; }
footer > div { max-width: 1084px; margin-left: auto; margin-right: auto; }
footer .text-bodycolor { color: var(--ag-muted); font-size: 14px; line-height: 1.6; }
footer .border-outline { border-color: var(--ag-line); }
footer .border-t { color: var(--ag-ink); font-size: 15px; }
footer a { transition: color .2s ease; }
footer a:hover { color: var(--ag-blue); }

/* ---------- Scroll reveal (enabled by main.js) ---------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .js-reveal .reveal { opacity: 1; transform: none; }
}