/* Citybroom — colours and type.
   Every value read straight out of the Framer project on 2026-09-03.
   Nothing here is a guess. Framer's own name for each is in the comment. */

:root {
  /* Colours ------------------------------------------------------------ */
  --neutral-01: rgb(245, 245, 240); /* page background, light text on dark */
  --neutral-02: rgb(235, 235, 225); /* second background */
  --neutral-03: rgb(153, 153, 153); /* muted labels */
  --neutral-04: rgb(24, 24, 24);    /* body text, dark panels */

  --color-01: rgb(135, 140, 79);    /* olive — the accent */
  --color-02: rgb(253, 240, 219);   /* cream */

  /* Used in the layouts, not saved as styles in Framer */
  --overlay-hero: rgba(16, 17, 12, 0.4);  /* darkens the hero video */
  --overlay-soft: rgba(0, 0, 0, 0.15);    /* over the services photo */
  --card-glass: rgba(255, 255, 255, 0.11);/* the stat card on the hero */

  /* Type --------------------------------------------------------------- */
  --font-display: "Inter Display", "Inter", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Every counter on the site is Geist Medium, per Framer */
  --font-number: "Geist", "Inter Display", system-ui, sans-serif;

  /* Layout ------------------------------------------------------------- */
  --container: 1224px;  /* the width everything sits inside */
  --gutter: 30px;       /* breathing room at the page edges */
  --radius: 16px;
  --radius-lg: 24px;
}

/* The fourteen text styles, exactly as Framer has them.
   Sizes are desktop; the tablet and phone sizes come later, once those
   breakpoints are read out of Framer too. */

.t-display-h1 { font: 500 138px/105% var(--font-display); letter-spacing: -6.7px; }
.t-h1         { font: 500 82px/100%  var(--font-display); letter-spacing: -0.045em; }
.t-h2         { font: 500 54px/110%  var(--font-display); letter-spacing: -0.03em; }
.t-h3         { font: 600 40px/140%  var(--font-display); letter-spacing: -1px; }
.t-h4         { font: 600 24px/140%  var(--font-display); letter-spacing: -0.5px; }

.t-body-20-bold   { font: 600 20px/140% var(--font-display); }
.t-body-20-medium { font: 600 20px/140% var(--font-display); }
.t-body-18-medium { font: 400 18px/170% var(--font-display); }

.t-body-16-bold    { font: 700 16px/170% var(--font-display); letter-spacing: -0.5px; }
.t-body-16-medium  { font: 500 16px/170% var(--font-display); }
.t-body-16-regular { font: 400 16px/180% var(--font-display); }

/* The small uppercase label above every section heading */
.t-body-14-medium  { font: 600 14px/170% var(--font-display); text-transform: uppercase; }
.t-body-14-regular { font: 400 14px/170% var(--font-display); }
.t-body-12-regular { font: 400 12px/170% var(--font-display); }