/* ============================================================
   AGU Roofing & Solar — Colors & Type Foundations  (v2 · REAL BRAND)
   ============================================================
   Palette sampled directly from the official logo (assets/agu-logo.png):
     • AGU Blue   #11B6E4  — electric cyan-blue (fists, ROOFING/SOLAR, swoosh)
     • AGU Silver #CED3D1  — the "AGU" wordmark + ring
     • Brand Black          — the badge field
   Fonts: Montserrat (display) + Lato (body), per brand direction.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Lato:wght@400;700;900&display=swap');

:root {
  /* ============ BRAND CORE ============ */
  --agu-blue:        #11B6E4;   /* primary accent — energy, solar, sky, water */
  --agu-blue-bright: #4ECFF2;   /* hover / highlight / glow */
  --agu-blue-deep:   #0A89AD;   /* accessible blue for large text on light */
  --agu-blue-700:    #076A88;   /* small text / links on light (AA) */
  --agu-blue-tint:   #E2F6FC;   /* soft blue wash background */
  --agu-blue-ink:    #052A38;   /* deep teal-navy surface (alt to black) */

  --agu-silver:       #CED3D1;  /* brand silver — wordmark, metallic accents */
  --agu-silver-light: #E4E8E7;
  --agu-steel:        #98A2A6;  /* mid metallic / muted on dark */

  /* ============ DARK NEUTRALS (cool) ============ */
  --agu-black:     #0B0D0E;     /* brand black — primary dark bg */
  --agu-carbon:    #14181A;     /* raised surface on black */
  --agu-graphite:  #21262A;     /* cards / inputs on dark */
  --agu-line-dark: #2C3338;     /* hairline on dark */

  /* ============ LIGHT NEUTRALS (cool) ============ */
  --agu-white:    #FFFFFF;
  --agu-platinum: #F3F5F6;      /* primary light bg */
  --agu-cloud:    #E9EDEE;      /* panel / alt surface */
  --agu-line:     #DCE2E3;      /* hairline on light */

  /* ============ TEXT ============ */
  --agu-slate-900: #0F1517;     /* headings on light */
  --agu-slate-700: #36444A;     /* body text */
  --agu-slate-500: #66727A;     /* muted / captions */
  --agu-slate-300: #A6AFB3;     /* disabled */

  /* ============ SEMANTIC ============ */
  --agu-storm:      #E8442C;    /* storm-damage urgency, alerts */
  --agu-storm-deep: #B82E1B;
  --agu-go:         #1FA463;    /* approved / financing / success */
  --agu-go-tint:    #E2F4EB;
  --agu-star:       #11B6E4;    /* ratings = brand blue (intentional) */

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'Montserrat', system-ui, sans-serif;        /* headlines, hooks, UI labels */
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;/* body, paragraphs, captions */

  /* ============ RADII ============ */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;

  /* ============ ELEVATION (cool-tinted) ============ */
  --sh-sm:  0 1px 2px rgba(11,13,14,.10), 0 1px 3px rgba(11,13,14,.07);
  --sh-md:  0 6px 16px rgba(11,13,14,.12), 0 2px 5px rgba(11,13,14,.07);
  --sh-lg:  0 18px 40px rgba(11,13,14,.20), 0 6px 14px rgba(11,13,14,.10);
  --sh-blue: 0 10px 26px rgba(17,182,228,.45);   /* glow under blue CTAs */

  /* ============ SPACING (4pt) ============ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ============ MOTION ============ */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s;  --t-base: .22s;  --t-slow: .4s;
}

/* ============================================================
   SEMANTIC TYPE SCALE
   Montserrat display is set tight + uppercase for the athletic,
   geometric feel of the logo letterforms. Bump display sizes
   inline on 1080px ad canvases.
   ============================================================ */
.agu-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--agu-slate-900);
}
.agu-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--agu-slate-900);
}
.agu-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--agu-slate-900);
}
.agu-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.18;
  color: var(--agu-slate-900);
}
.agu-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--agu-blue-700);
}
.agu-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--agu-slate-700);
}
.agu-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  color: var(--agu-slate-700);
}
.agu-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: var(--agu-slate-500);
}
.agu-numeral {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}