/* ============================================================
   WOMEN OF INFLUENCE — BASE / RESET & PRIMITIVES
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font: var(--text-base);
  color: var(--ink-700);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}

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

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-600); }

button { font: inherit; }

::selection { background: var(--teal-200); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

.section {
  position: relative;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.section--white { background: var(--white); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 1.4rem;
  display: block;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stat__value {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--teal-700);
}
.stat__label {
  font: var(--eyebrow);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.8rem;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--cream-100);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.pill-button:hover { background: var(--teal-700); color: var(--cream-100); transform: translateY(-3px); }

.pill-button--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.pill-button--outline:hover { border-color: var(--teal-600); background: var(--white); color: var(--ink-900); }

.mark {
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  background-size: 0% 0.42em;
  background-position: 0 82%;
  transition: background-size 1s var(--ease-soft) 0.15s;
  padding: 0 0.06em;
}
.mark--teal { background-image: linear-gradient(var(--teal-300), var(--teal-300)); }
.mark[data-in] { background-size: 100% 0.42em; }

em { font-style: italic; color: var(--teal-700); }

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
  animation: woi-failsafe 0.6s var(--ease-soft) 4s forwards;
}
[data-reveal][data-obs] { animation: none; }
[data-reveal][data-in] { opacity: 1; transform: none; }

@keyframes woi-failsafe { to { opacity: 1; transform: none; } }
@keyframes woi-float { 0% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-16px) rotate(var(--rot, 0deg)); } 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } }
@keyframes woi-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes woi-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  .mark { background-size: 100% 0.42em; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}