/* =========================================================================
   REPLOY Power — Design tokens & base
   Values extracted verbatim from the live Webflow stylesheet
   (reploy-power.webflow.shared.css :root + element defaults).

   FONTS — two families, both correctly licensed (no self-hosted font files):
   • Body / text        → Proxima Nova, served ONLY via the Adobe Fonts kit
     (https://use.typekit.net/pjg0tqj.css), referenced as `proxima-nova`.
   • Display / headings → Poppins, loaded from Google Fonts (@import below).
     Poppins is open-licensed (SIL Open Font License) and is our stand-in
     for the original site's Gotham Rounded, which we do NOT license.
     The original used Gotham Rounded for h1–h3, nav, buttons, the hero
     rotator and footer/section titles; everything else was Proxima Nova.
     That split is reproduced here.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  /* Brand palette (verbatim from source :root) */
  --reploy-yellow: #fbb255;
  --reploy-black:  #3b3838;
  --reploy-beige:  #f5f1e9;
  --reploy-teal:   #00a3ad;
  --reploy-navy:   #003151;
  --white:         #ffffff;
  --reploy-blue:   #0050bd; /* focus / link accent used by source */

  /* Typography
     --font-body    : Proxima Nova (Adobe Fonts kit) — body copy + sub-headings
                      (h4/h5), exactly as on the original site.
     --font-display : Poppins (Google Fonts, SIL OFL) — display headings (h1–h3),
                      nav, buttons, hero rotator, footer/section titles.
     --font-head    : back-compat alias of the display face. */
  --font-body:    "proxima-nova", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Poppins", "proxima-nova", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-head:    var(--font-display);

  /* Layout */
  --container: 1200px;
  --pad-x: 50px;          /* section side padding (desktop) */
  --section-pad-y: 200px; /* vertical-padding-150 (desktop) */
}

/* ---- Reset-ish base ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--reploy-beige);
  color: var(--reploy-black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { border: 0; vertical-align: middle; }

a { color: var(--reploy-yellow); font-family: var(--font-body); text-decoration: underline; }

h1, h2, h3 { margin: 0 0 10px; font-family: var(--font-head); } /* display: Poppins */
h4, h5     { margin: 0 0 10px; font-family: var(--font-body); } /* Proxima — matches original */

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 15px 0;
  padding: 0 20px;
  font-size: 18px;
  line-height: 22px;
}

/* Accessibility: focus ring matches source's blue */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--reploy-blue);
  outline-offset: 2px;
}

/* Visually-hidden helper (skip link, labels) */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}