/* split-comfort: the hvac sample's aesthetic: friendly, rounded, warm/cool.
 * Font URLs are relative so they resolve under any build base. */

@font-face {
  font-family: "Outfit Var";
  src: url(../fonts/outfit-var.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-display: "Outfit Var", system-ui, sans-serif;
  --font-body: "Outfit Var", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --logo-weight: 800;

  --c-ink: #20303b;
  --c-muted: #5d707d;
  --c-bg: #fdfdfc;
  --c-tint: #f3f6f7;
  --c-primary: #20303b;
  --c-accent: #20303b;
  --c-accent-hover: #0e1a22;
  --c-on-accent: #fff;
  --c-accent-2: #f25c33;
  --c-art-warm: #f25c33;
  --c-art-cool: #2386c8;
  --c-card-bg: #fff;
  --c-card-border: #e7ecee;

  --radius-btn: 999px;
  --radius-card: 16px;
  --radius-field: 10px;

  --hdr-bg: rgba(253, 253, 252, 0.92);
  --hdr-fg: #20303b;
  --hdr-border: #e7ecee;

  --hero-bg:
    radial-gradient(40rem 24rem at -10% -20%, #fdeae3 0%, transparent 60%),
    radial-gradient(40rem 24rem at 110% 120%, #e3f1fa 0%, transparent 60%);
  --hero-em: #f25c33;

  --sec-alt-bg: #f3f6f7;
  --sec-alt-fg: #20303b;
  --sec-alt-muted: #5d707d;
  --pill-bg: #fff;
  --pill-border: #dfe7ea;

  --sec-cta-bg: linear-gradient(120deg, #fdeae3, #e3f1fa);
  --sec-cta-fg: #20303b;
  --sec-cta-muted: #5d707d;
  --sec-cta-link: #2386c8;
  --field-bg: #fff;
  --field-border: #dfe7ea;

  --ftr-bg: #20303b;
  --ftr-fg: #c3d2db;
  --ftr-link: #fff;
  --ftr-fine: #9fb2bd;
  --callbar-bg: #1b6ea8;
}

/* Flourishes */
.logo .logo-mark {
  display: inline-block;
  background: linear-gradient(135deg, var(--c-art-warm) 0 50%, var(--c-art-cool) 50% 100%);
}
.svc-card:nth-child(3n + 1) { border-top: 4px solid var(--c-art-cool); }
.svc-card:nth-child(3n + 2) { border-top: 4px solid var(--c-art-warm); }
.svc-card:nth-child(3n) { border-top: 4px solid var(--c-art-cool); }