/* Carrick & Pavey: single source for colour, type, space, motion. Every page links this file. */
:root {
  /* Surfaces */
  --bg: #030c09;
  --bg-2: #06130f;
  --glass: rgba(8,26,20,.55);
  --glass-2: rgba(10,34,26,.68);   /* also the solid fallback when blur is off */
  --glass-text: rgba(10,34,26,.85); /* every text panel over the scene; muted on it over a gold window: 5.61:1 */
  --step-1: rgba(10,34,26,.85);     /* job track panels, one step lighter each */
  --step-2: rgba(12,38,29,.85);
  --step-3: rgba(14,42,32,.85);
  --step-4: rgba(16,46,35,.85);
  --step-5: rgba(18,50,38,.85);
  --blur: 18px;
  --scrim: rgba(3,12,9,.88);       /* dark mask behind every text column over the scene; muted over a gold window: 7.60:1 */
  --scrim-fill: linear-gradient(90deg, var(--scrim) 0, var(--scrim) calc(max(0px, (100vw - 1600px) / 2) + var(--rail-w) + 720px), rgba(3,12,9,0) calc(max(0px, (100vw - 1600px) / 2) + var(--rail-w) + 1000px));
  --text-max: 680px;               /* plain text columns stay inside the solid scrim */
  --line: rgba(150,220,185,.12);   /* dividers, grid */
  --line-strong: rgba(150,220,185,.22);

  /* Text */
  --ink: #f3f7f1;      /* 18.28:1 on bg */
  --muted: #a3b8ad;    /* 9.45:1 on bg */
  --muted-2: #6e857a;  /* 5.00:1 on bg, 4.50:1 on glass-2: field borders and meta only */

  /* Emerald ramp: structure */
  --emerald: #2ee59d;       /* route line, stop numbers, eyebrows, focus */
  --emerald-2: #10b981;     /* active tick, selected states */
  --emerald-deep: #065f46;  /* selected fills under ink (7.09:1) */

  /* Gold: the Book a call button only */
  --gold: #f5cf6b;
  --gold-2: #d99a1e;
  --gold-ink: #241703;      /* 11.69:1 on gold, 7.17:1 on gold-2 */
  --shadow-gold: inset 0 0 0 1px rgba(36,23,3,.55), 0 0 0 3px #030c09, 0 14px 30px -12px rgba(0,0,0,.8);
  --shadow-gold-hover: inset 0 0 0 1px rgba(36,23,3,.55), 0 0 0 3px #030c09, 0 20px 36px -12px rgba(0,0,0,.85);

  /* Form error (approved) */
  --alert: #f08a7a;         /* 8.13:1 on bg, 7.78:1 on bg-2 */

  /* Scene light (scene only, never UI) */
  --scene-sky-top: #030c09;
  --scene-horizon: #0c2c21;
  --scene-ground: #040f0b;
  --scene-house: #10211c;
  --scene-house-2: #172b25;
  --scene-road: #12382b;
  --scene-window-off: #22403a;
  --scene-window-on: #f5cf6b;   /* a booked job */
  --scene-ping: #d99a1e;
  --scene-lead-1: #2ee59d;
  --scene-lead-2: #10b981;
  --scene-lead-3: #5df0b8;
  --scene-lead-4: #9be8c7;
  --scene-star: #a3b8ad;

  /* Type: Inter only, hierarchy from size and weight */
  --font: "Inter", system-ui, sans-serif;
  --fs-hero: clamp(34px, 5.2vw, 62px);     /* 800 / 1.04 / -0.03em */
  --fs-section: clamp(30px, 4.4vw, 50px);  /* 800 / 1.05 / -0.02em */
  --fs-beat: clamp(26px, 3.4vw, 40px);     /* 700 / 1.15 / -0.015em */
  --fs-h3: 22px;                           /* 700 / 1.25 / -0.01em */
  --fs-sub: clamp(16px, 2vw, 19px);        /* 400 / 1.6 */
  --fs-body: 17px;                         /* 16px under 560px; 400 / 1.6 */
  --fs-button: 15px;                       /* 700 */
  --fs-stop: 13px;                         /* 600, tabular, .08em */
  --fs-label: 15px;                        /* labels, roles, footer details; 16px on phones */
  --fs-small: 13px;                        /* 400 / 1.5; floor for any text */
  --fs-eyebrow: 13px;                      /* 600, uppercase, .18em */
  --measure: 62ch;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(80px, 12vw, 160px);
  --section-x: 24px;
  --maxw: 1180px;
  --rail: 20%;
  --pad: clamp(12px, 2.8vw, 40px);                    /* route line x */
  --pad-r: clamp(16px, 4vw, 64px);
  --rail-w: clamp(44px, calc(28vw - 120px), 288px);   /* about 20% at desktop */
  --num-x: calc(var(--pad) + clamp(8px, 1.4vw, 24px)); /* stop numbers */
  --screen-min: 0px;                                   /* one screen per section on phones */
  --step-min: 0px;                                     /* one step per screen on phones */
  --hero-min: 56svh;                                   /* inner-page heroes */
  --hero-justify: flex-end;
  --photo: 220px;
  --ticks: block;
  --btn-w: max-content;
  --form-max: min(780px, calc(100vw - var(--rail-w) - 400px)); /* leaves the toast corner clear */

  /* Radius and depth */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.75);
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.6);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-open: cubic-bezier(0.22, 1, 0.36, 1);
  --t-feedback: 120ms;
  --t-state: 240ms;
  --t-layout: 400ms;
  --t-entrance: 600ms;
  --t-exit: 450ms;
  --rise: 26px;
  --stagger: 90ms;
}
@media (max-width: 720px) { :root { --section-y: clamp(64px, 14vw, 110px); --screen-min: calc(100svh - 76px); --step-min: 0px; --hero-min: 0px; --hero-justify: flex-start; --photo: 160px; --fs-label: 16px; --fs-button: 16px; --form-max: 100%; --num-x: calc(var(--pad) + 5px); --ticks: none; --scrim-fill: linear-gradient(var(--scrim), var(--scrim)); } }
@media (max-width: 560px) { :root { --fs-body: 16px; --btn-w: 100%; } }
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--glass-2); --blur: 0px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: var(--glass-2); --blur: 0px; } }