/* ============================================================
   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.
   ============================================================ */
:root{
  /* ---- brand palette: "ruby red citrus" ---- */
  --brand:#1E4034;         /* grove green — headers, dark sections */
  --brand-dk:#142B23;      /* deeper green — hovers, scrims */
  --brand-md:#3D6553;      /* mid green — borders, hover states */
  --brand-lt:#E4EDE6;      /* pale green — icon plates */

  --accent:#C6432F;        /* ruby — primary CTAs, prices, links */
  --accent-dk:#A6331F;     /* ruby hover */
  --accent-lt:#FBEAE6;     /* pale ruby — icon plates */
  --ruby:#D9503F;          /* display ruby — decorative only */

  --zest:#F0A828;          /* citrus — stats, stars, CTAs on dark */
  --zest-lt:#FDF1DC;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#F3F5F2;         /* alternating section surface */
  --ink:#1C211F;           /* body text */
  --muted:#5E6B62;         /* secondary text */
  --line:#E0E5E0;          /* borders & rules */

  /* ---- type ---- */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Inter",system-ui,-apple-system,sans-serif;  /* headings */

  /* ---- shape & rhythm ---- */
  --r:10px;                /* card radius */
  --r-sm:8px;              /* button / input radius */
  --maxw:1180px;           /* content width */
  --shadow:0 1px 2px rgba(28,33,31,.04),0 10px 22px -16px rgba(28,33,31,.26);

  /* ---- hero focal point ----
     Which part of the hero photo survives the cover-crop, as object-position
     "X Y". Photo-specific, so it belongs here rather than in the engine.
     X: 62% keeps the doors right-of-centre, clear of the headline.
     Y: lower = more sky above the roofline, less driveway at the bottom.
     18% shows ~93px of sky and trims ~155px of pavement on a 1470px-wide
     window — about a 13% downward shift vs. the original 62%. */
  --hero-focus:62% 18%;
  --hero-focus-sm:60% 42%;   /* narrow screens crop horizontally, so Y barely bites */

  /* Minimum height for the city/service-area hero band. The house photo spans
     ~540px once scaled, so a short band physically cannot contain it — no focal
     point fixes that. Matching the home hero's height lets --hero-focus above
     work identically on both, roofline ~87px down with the house fully in frame. */
  --hero-band-h:min(76vh,640px);
}