/* ============================================================
   TOKENS — single source of truth for the theme.
   Change a value here and it updates everywhere on the site.
   Nothing else in the CSS should contain a raw colour or size.

   Palette: GREEN / BEIGE / BLACK — deliberately cheap.

   This site is styled to look UNDESIGNED, on purpose. The brief
   was a plain, high-contrast page with fewer words, bigger type
   and the phone number impossible to miss — the look of a trade
   site that converts rather than one that wins an award.

   Three rules follow, and they are what make it read that way:
     · radius is ZERO. Every button is a flat rectangle.
     · no shadows, no gradients, no soft depth of any kind.
     · body type is set LARGE (20px) with a heavy heading face,
       because the caller is often reading at arm's length.

   One accent, used only for buttons and the urgency strip.
   ============================================================ */
:root{
  /* ---- brand palette ---- */
  --brand:#3E7D5E;         /* the green — buttons, strip, nothing else */
  --brand-dk:#2F624A;      /* hover */
  --brand-md:#5A9478;
  --brand-lt:#E8F0EB;      /* pale wash — menu hover only */

  --accent:#3E7D5E;        /* same green. A second colour would dilute it. */
  --accent-dk:#2F624A;
  --accent-lt:#E8F0EB;
  --ruby:#5A9478;

  --zest:#3E7D5E;          /* the engine reserves this for a second accent;
                              here it is the same green so nothing stands out
                              that should not. */
  --zest-lt:#E8F0EB;
  --zest-ink:#FFFFFF;      /* text on a green surface */
  --zest-dk:#2F624A;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;
  --cream:#E2E0DA;         /* the beige band — warm grey, not white */
  --ink:#141414;
  --muted:#4A4A4A;         /* body grey. Dark on purpose: this has to be
                              readable in sunlight on a phone. */
  --line:#C9C6BF;

  /* ---- rgb triplets, for rgba() ---- */
  --scrim-rgb:0,0,0;
  --band-rgb:20,20,20;
  --ink-rgb:20,20,20;
  --zest-rgb:62,125,94;

  --paper:#FFFFFF;
  --paper-rgb:255,255,255;

  /* ---- text on green / dark surfaces ---- */
  --on-brand:#FFFFFF;
  --on-brand-dim:#E4EDE8;
  --on-brand-mute:#CFDED6;
  --on-brand-fade:#A9C4B7;

  /* ---- type ----
     System stack only. No webfont: this design gains nothing from one,
     and every kilobyte not downloaded is a faster first paint on the
     phone somebody is standing at a broken gate holding. */
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --serif:var(--sans);     /* headings are the same face, just heavier */

  /* ---- shape & rhythm ---- */
  --r:0;                   /* nothing is rounded */
  --r-sm:0;
  --maxw:1080px;           /* narrower than the other sites — long lines are
                              hard work at 20px */
  --shadow:none;

  /* ---- hero focal point ----
     The hero is a driveway gate standing open, shot down the drive. The
     gate is right of centre; the image is a full-width band with the
     headline BELOW it rather than over it, so the crop only has to keep
     the gate in frame. */
  /* The band is ~3.9:1 but the photo is 21:9, so cover() discards ~39% of the
     frame vertically — 243px of a 623px scaled image. At Y=50% that split
     evenly and sheared the top off the technician's head. Y=28% moves the
     visible window up: ~68px off the top instead of 122, ~175px off the
     bottom, which crops his legs rather than his skull. */
  --hero-focus:60% 28%;
  /* No --hero-focus-sm here. The engine sheet has a media query that reads it,
     but this site's main.css fork dropped that rule, so the token would be dead
     code. It is also unnecessary: at 386px the band is 131px tall against a
     164px scaled image, so only 33px is cropped and 28% works at both sizes.
     Measured, not assumed. */

  --hero-band-h:min(34vw,380px);
}