/* ==========================================================================
   Web Advanced — Colors & Type tokens
   Distilled from wa2015.css (the production marketing site stylesheet).
   ========================================================================== */

/* ---- Proxima Nova (licensed; OTF assets live in /fonts) ----
   Files load relative to the project root. Pages nested in subfolders
   (preview/, slides/, ui_kits/...) should still resolve correctly because
   we use a leading slash to anchor at the project root.
   If a page is opened from disk without a server, swap to `../fonts/...` etc. */
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaThin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaRegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaSemibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaSemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaBlack.otf") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNovaBlackItalic.otf") format("opentype");
  font-weight: 800 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand color (the "WA cyan") ---- */
  --wa-cyan: #23c1e5;        /* primary brand color, used for links, buttons, accents, the logo block */
  --wa-cyan-alt: #19c1e4;    /* slightly different cyan used inside the logo SVG (legacy) */

  /* ---- Brand secondary blues ---- */
  --wa-blue-deep: #004c9d;       /* deep blue, hover state on logo + dark stat panels */
  --wa-blue-mid:  #0078d1;       /* mid blue, used as fallback bg behind hero photos */
  --wa-blue-overlay: rgba(11, 48, 161, 0.98); /* nav menu overlay */
  --wa-blue-accent: #4371f9;     /* electric blue, used as accent on stat dividers + icons */

  /* ---- Brand accent (warm) ---- */
  --wa-red: #ff534f;             /* coral-red, used in headlines (`<strong>`) + close button */
  --wa-red-hover: #f14945;
  --wa-red-error: #ff4b57;       /* form error text */
  --wa-coral-soft: #f6a5a1;      /* error border */
  --wa-coral: var(--wa-red);     /* alias — the accent is also referred to as "coral" in docs */
  --wa-coral-hover: var(--wa-red-hover);

  /* ---- Misc accents ---- */
  --wa-green: #94ff16;           /* lime green, only used inside services hero <strong> */
  --wa-purple: #a529f4;          /* mobile nav hover */

  /* ---- Neutrals ---- */
  --wa-black:  #000;
  --wa-ink:    #222;             /* dark btn bg */
  --wa-ink-2:  #242424;          /* menu toggle / contact-details bg */
  --wa-ink-3:  #333;             /* contact-map bg, dark btn hover */
  --wa-slate:  #6D7F87;          /* nav icon fill, footer text */
  --wa-slate-2: #768394;         /* social label */
  --wa-slate-3: #798798;         /* form label / muted body copy */
  --wa-line-1: #c9d2dd;          /* divider borders (careers, social bg) */
  --wa-line-2: #e3e7e9;          /* hairline dividers */
  --wa-line-3: #e5ecef;          /* nav-item bottom border */
  --wa-line-4: #e7e8ea;          /* form input border */
  --wa-line-5: #eff1f4;          /* hover wash on nav */
  --wa-bg-1:   #f6f9fa;          /* page bg right side */
  --wa-bg-2:   #f1f4f5;          /* page bg left side */
  --wa-bg-3:   #ecf3f7;          /* services-intro / join-us bg */
  --wa-white:  #fff;

  /* ---- Semantic foreground ---- */
  --fg-1: var(--wa-black);       /* primary text */
  --fg-2: var(--wa-slate-3);     /* secondary text */
  --fg-3: var(--wa-slate);       /* tertiary text / muted icons */
  --fg-link: var(--wa-cyan);
  --fg-link-hover: var(--wa-blue-deep);
  --fg-on-dark: var(--wa-white);
  --fg-accent: var(--wa-cyan);

  /* ---- Semantic background ---- */
  --bg-page: var(--wa-bg-1);
  --bg-page-gradient: linear-gradient(to right, var(--wa-bg-2) 0%, var(--wa-bg-1) 13%, var(--wa-bg-1) 100%);
  --bg-surface: var(--wa-white);
  --bg-surface-alt: var(--wa-bg-3);
  --bg-dark: var(--wa-ink);
  --bg-darker: var(--wa-black);
  --bg-brand: var(--wa-cyan);
  --bg-brand-deep: var(--wa-blue-deep);

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--wa-line-2);
  --border-input: 1px solid var(--wa-line-4);
  --border-divider: 1px solid var(--wa-line-1);
  --border-accent: 2px solid var(--wa-cyan);

  /* ---- Type families ---- */
  --font-sans: "Proxima Nova", "proxima-nova", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-icon: "FontAwesome";

  /* ---- Type scale (matches the hero/headline scale used across the site) ---- */
  --fs-display:  100px;   /* huge hero on big screens (about/services) */
  --fs-h1:       60px;    /* mid-screen hero */
  --fs-h1-mobile: 36px;
  --fs-h2:       36px;    /* section headings */
  --fs-h3:       30px;    /* sub-section heading */
  --fs-h4:       24px;
  --fs-lead:     30px;    /* about-intro lead */
  --fs-lead-mobile: 22px;
  --fs-body:     18px;
  --fs-body-sm:  16px;
  --fs-eyebrow:  14px;    /* uppercase tracked labels (.btn, .more, .nav) */
  --fs-micro:    12px;    /* desktop nav text */

  /* ---- Type weights ---- */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;        /* used for h2 in our-values, careers, contact, join-us */

  /* ---- Tracking ---- */
  --tracking-eyebrow: 0.05em;
  --tracking-btn: 0.5px;
  --tracking-tight: -0.03em;

  /* ---- Line height ---- */
  --lh-tight: 1;
  --lh-snug:  1.15;
  --lh-base:  1.5;

  /* ---- Spacing (informal scale lifted from .content padding rhythms) ---- */
  --sp-1: 0.25em;
  --sp-2: 0.5em;
  --sp-3: 1em;
  --sp-4: 2em;
  --sp-5: 30px;
  --sp-6: 50px;
  --sp-7: 80px;
  --sp-8: 100px;
  --sp-9: 140px;

  /* ---- Layout ---- */
  --sidebar-w: 87px;             /* fixed left rail on desktop */
  --max-content: 1200px;         /* .content max-width */

  /* ---- Radii ---- */
  --r-0: 0;                      /* btn — buttons are square (border-radius: 0) */
  --r-pill: 100%;                /* social bubbles, scroll-top */

  /* ---- Deck / proposal-document tokens ---- */
  --wa-deck-ink:        #0d2840;   /* body color in PDF proposals — slightly cool near-black */
  --wa-deck-page-bg:    #ffffff;   /* always white */
  --wa-deck-card-bg:    #f1f4f5;   /* gray cards on cost-estimate spreads */
  --wa-deck-pagenum:    #9aa6b0;   /* tiny page numbers in the top-left chrome */
  --wa-deck-eyebrow:    var(--wa-cyan);
  --wa-deck-divider-bg: var(--wa-cyan); /* full-bleed cyan section-divider pages */
  --fs-deck-cover:      54px;
  --fs-deck-divider:    66px;
  --fs-deck-h1:         36px;
  --fs-deck-lead:       19px;
  --fs-deck-body:       14px;
  --fs-deck-eyebrow:    9px;

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.68, 0.61, 0.43, 0.59);
  --ease-snap:    cubic-bezier(0.2, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-mid:  0.4s;
  --dur-slow: 0.75s;
}

/* ==========================================================================
   Base type styles (semantic, drop-in)
   ========================================================================== */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page-gradient);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-thin);
  line-height: var(--lh-snug);
  margin: 0 0 0.4em;
}
h1 strong, .h1 strong {
  font-weight: var(--fw-thin);
  color: var(--wa-red);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  margin: 0 0 0.5em;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin: 0 0 0.5em;
  color: var(--wa-cyan);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

p, .p { font-size: var(--fs-body); line-height: var(--lh-base); }
.lead { color: var(--wa-cyan); font-size: var(--fs-lead); font-weight: var(--fw-light); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--fg-link-hover); }

@media (max-width: 768px) {
  h1, .h1 { font-size: var(--fs-h1-mobile); }
  .lead   { font-size: var(--fs-lead-mobile); }
}