/* TheAgency — base element styles. Reset + typography + layout primitives. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, figcaption { margin: 0; }

h1 { font-size: var(--h1); font-weight: 600; letter-spacing: -.032em; line-height: 1.04; }
h2 { font-size: var(--h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }

p { color: var(--body); line-height: 1.7; text-wrap: pretty; }

a { color: var(--acc-ink); text-decoration: none; }
a:hover { color: var(--acc); }

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

button { font: inherit; cursor: pointer; color: inherit; }

ul { padding: 0; list-style: none; }

/* ---- layout primitives ---- */

.content-width {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.content-width--narrow { max-width: var(--content-width-narrow); }
.content-width--form { max-width: var(--content-width-form); }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: 2.75rem; }
.section--band { background: var(--raised); border-block: 1px solid var(--header-line); }
.section--rule-top { border-top: 1px solid var(--header-line); }
.section--rule-bottom { border-bottom: 1px solid var(--header-line); }

@media (width <= 900px) {
  :root { --gutter: 1.25rem; }
  .content-width { padding-inline: var(--gutter); }
  .section { padding-block: 3.25rem; }
  .section--tight { padding-block: 2rem; }
  .section--band .content-width { padding-block: var(--space-l) var(--space-xl) !important; }
}

@media (width <= 640px) {
  .section--band .content-width { padding-block: var(--space-m) var(--space-l) !important; }
}

/* ---- shared type roles ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  color: var(--acc-ink);
}
.eyebrow strong { color: var(--muted); font-weight: 600; }

.lede { font-size: var(--text-xl); line-height: 1.6; color: var(--body); max-width: 34rem; }

.measure { max-width: 40rem; }

/* ---- looping demo animations (AI-answer / map-pack proof graphics) ---- */

@keyframes om-sweep { 0%, 26% { transform: scaleX(0); } 50%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes om-rise { 0%, 8% { transform: translateY(0); opacity: 1; } 34%, 88% { transform: translateY(-132px); opacity: 1; } 93% { transform: translateY(-132px); opacity: 0; } 94% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes om-fall { 0%, 8% { transform: translateY(0); opacity: 1; } 34%, 88% { transform: translateY(44px); opacity: 1; } 93% { transform: translateY(44px); opacity: 0; } 94% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes om-count { 0%, 6% { transform: translateY(0); } 13%, 18% { transform: translateY(-26px); } 25%, 30% { transform: translateY(-52px); } 37%, 42% { transform: translateY(-78px); } 50%, 94% { transform: translateY(-104px); } 100% { transform: translateY(0); } }
@keyframes om-grow { 0%, 6% { transform: scaleX(.18); } 50%, 94% { transform: scaleX(1); } 100% { transform: scaleX(.18); } }
@keyframes om-blip { 0%, 34% { opacity: 0; transform: translateY(4px); } 54%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes om-dim { 0%, 22% { opacity: 1; } 46%, 88% { opacity: .38; } 100% { opacity: 1; } }
@keyframes om-pop { 0%, 36% { opacity: 0; transform: scale(.94); } 54%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes om-barfill { 0%, 8% { transform: scaleX(.08); } 62%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@keyframes om-pulse { 0%, 48% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 64% { box-shadow: 0 0 0 6px rgba(74,222,128,.28); } 80%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
@media (prefers-reduced-motion: reduce) { .om-anim { animation: none !important; } }

/* skip link */
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--ink); color: #fff; padding: .6em 1em; border-radius: var(--radius);
  transition: top var(--transition-duration) var(--transition-timing);
  z-index: 100;
}
.skip-link:focus { top: 1rem; }