/* GRC Waterproofing - design tokens
   Build: /forge-mockup run, 2026-09-01. Modeled on eadsroofing.com (roofing runner-up,
   revision 5). eads is NOT same-vertical evidence: no waterproofing comp exists in the
   70-site teardown pool. It was chosen on merit because waterproofing buys like roofing,
   big-ticket exterior-envelope work, once in a lifetime, warranty and trust driven.

   THE THESIS. GRC digs. Their competitors drill a hole in your slab and sell you a pump.
   Everything on this page serves one comparison, so the page is built around a drawn
   section through a foundation rather than around a photo grid. The identity is a dig
   crew's identity: safety orange, black, red Georgia clay, machinery.

   COLOUR IS SAMPLED FROM THEIR OWN ASSETS, not chosen. Their live Divi site accents in
   stock Divi blue #2EA3F2 while their hard hats and excavator are orange. The palette
   below is what the business already owns and is not using. */

:root {
  /* ---- colour roles ---- */
  --grc-orange: #FC6607;        /* EXACT pixel mode of their branded hard hat. Primary
                                   accent: buttons, rules, hazard stripes, active states. */
  --grc-orange-deep: #E54D01;   /* EXACT body colour of their branded excavator render.
                                   Hover/pressed, gradient ends, the darker stripe. */
  --grc-orange-wash: #FFF1E7;   /* derived. Card grounds and form fill only. */

  --grc-black: #0B0B0C;         /* the page's dark ground, header, footer, hero scrim */
  --grc-black-2: #17181A;       /* the ONE lighter black, for cards on black */
  --grc-hair-dark: #2E3033;     /* hairlines on dark ground */
  --grc-hair: #DFDCD7;          /* hairlines on light ground */

  --grc-clay: #C57F57;          /* sampled from the red Georgia clay in their own trench
                                   photos. Tertiary only: diagram soil, quiet accents.
                                   Never a button, never type. */
  --grc-clay-deep: #5E463E;     /* the shadowed clay in the same photos. Diagram depth. */

  --grc-paper: #F6F4F1;         /* the light ground. Warm, so it agrees with clay. */
  --grc-white: #FFFFFF;
  --grc-ink: #1A1A1C;           /* body text on light ground */
  --grc-ink-70: rgba(26,26,28,.72);
  --grc-white-72: rgba(255,255,255,.74);
  --grc-white-45: rgba(255,255,255,.46);

  /* ---- CONTRAST LAW, measured not assumed ----
     #FC6607 vs white = 2.98:1  (FAILS AA)      vs #0B0B0C = 6.60:1 (passes AA)
     #E54D01 vs white = 3.89:1  (FAILS AA)      vs #0B0B0C = 5.05:1 (passes AA)
     Therefore: type on orange is ALWAYS black. White type only ever sits on black or on
     a scrimmed photo. This is not a stylistic preference, it is the reason the page reads
     as hazard signage, and it is why no orange button anywhere carries white text. */

  /* ---- type ----
     Bevan (heavy slab, 400 only) carries display. Barlow carries everything else.
     Chosen against the logo's genre: a bold geometric mark with a roofline wants a sturdy
     slab, not the Oswald/Inter/Poppins default that reads as template. */
  --grc-display: "Bevan", "Rockwell", Georgia, serif;
  --grc-text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --grc-h1: clamp(2.35rem, 5.4vw, 4.15rem);
  --grc-h2: clamp(1.85rem, 3.5vw, 2.9rem);
  --grc-h3: 1.3rem;
  --grc-eyebrow: .78rem;
  --grc-body: 1.0625rem;
  --grc-lede: 1.175rem;

  /* ---- space ---- */
  --grc-gutter: 24px;
  --grc-max: 1200px;
  --grc-sec-y: clamp(56px, 7vw, 96px);
  --grc-radius: 3px;            /* near-square. A dig crew is not rounded. */
  --grc-radius-lg: 6px;

  --grc-shadow: 0 10px 30px rgba(11,11,12,.13);
  --grc-shadow-hard: 0 6px 0 var(--grc-orange-deep);   /* the button's chunky press */

  /* ---- the hazard stripe, one definition, reused everywhere ---- */
  --grc-hazard: repeating-linear-gradient(
      135deg, var(--grc-orange) 0 14px, var(--grc-black) 14px 28px);
}