/* ==========================================================================
   PREMIUM CLIENT TEMPLATE — design tokens.
   The high-ticket tier: cinematic dark canvas + scroll choreography, built
   from the same engineering as the standard template (../template/).

   Re-skin per client by editing ONLY this file (+ the Google Fonts <link>
   in both HTML files if changing typefaces). Never hard-code a colour or
   font in main.css or the HTML.

   Current demo content: Voltaire Electrical (NICEIC electrician, Bow).
   ========================================================================== */

:root {
  /* ----- Palette: near-black canvas, ONE electric accent -----
     The whole tier's look rests on restraint: the accent appears on CTAs,
     kickers and key numerals only. Give it more surface and it cheapens. */
  --p-bg:         #08090B;   /* page canvas */
  --p-bg-raise:   #101317;   /* raised panels, cards */
  --p-ink:        #F3F2ED;   /* primary text on dark */
  --p-ink-dim:    #949AA2;   /* secondary text */
  --p-line:       rgba(243, 242, 237, 0.10);
  --p-accent:     #F5B301;   /* electrician amber — swap per trade */
  --p-accent-hi:  #FFC933;   /* accent hover */
  --p-accent-ink: #0A0A0A;   /* text on accent */
  --p-warn:       #E0643C;   /* form errors */

  /* Hero photo — swap for the client's own job photo in img/ */
  --p-hero-photo: url("https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1900&q=70");

  /* ----- Typography ----- */
  --p-font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --p-font-body: "Instrument Sans", "Segoe UI", sans-serif;

  --p-fs-mega: clamp(2.5rem, 7.5vw + 0.5rem, 5.6rem);   /* hero headline */
  --p-fs-1: clamp(1.8rem, 3.6vw + 0.5rem, 3rem);         /* section headings */
  --p-fs-2: clamp(1.15rem, 1.3vw + 0.85rem, 1.5rem);     /* card headings */
  --p-fs-3: clamp(1.05rem, 0.4vw + 1rem, 1.22rem);       /* leads */
  --p-fs-4: 1rem;
  --p-fs-5: 0.85rem;
  --p-fs-num: clamp(2.2rem, 4.5vw, 3.6rem);              /* stat numerals */

  /* ----- Rhythm / shape ----- */
  --p-space-section: clamp(4.5rem, 11vw, 9rem);
  --p-pad: clamp(1.25rem, 4vw, 3rem);
  --p-radius: 14px;
  --p-radius-sm: 8px;
  --p-maxw: 78rem;
}