/* Good's Tree & Lawn Care — design tokens */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — matches goodstreecare.com */
  --forest: #1B4536;         /* deep forest green - primary band color, matches divider PNGs */
  --forest-deep: #133024;
  --forest-soft: #3E6450;
  --forest-wash: #E8EEE8;

  --burgundy: #6e2940;       /* burgundy band on How It Works + reviews */
  --burgundy-deep: #6e2940;
  --burgundy-soft: #6e2940;

  --brown: #3F2A22;          /* dark brown band on "Experience our services" */
  --brown-deep: #241509;

  --coral: #D6533F;          /* CTA button color — matches live goodstreecare.com */
  --coral-deep: #B33C28;

  --gold: #FAD087;           /* warm accent — used for italic emphasis on dark bgs ("Good", hero/closer ems) */

  /* Warm neutrals */
  --cream: #F4EDE2;          /* main page background — slightly warmer */
  --cream-2: #EAE1D2;
  --cream-3: #FBF7EE;
  --stone: #DDD1BB;
  --stone-deep: #b8a88a;

  /* Ink */
  --ink: #1A1A1A;
  --ink-2: #3B3530;
  --ink-3: #6B6460;
  --ink-4: #8E857F;
  --hairline: #E8E0D4;

  /* States */
  --ochre: #B8863A;
  --rust: #8E3A1E;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 1px rgba(26,26,26,0.04);
  --shadow-md: 0 6px 18px -8px rgba(26, 26, 26, 0.18), 0 2px 4px rgba(26,26,26,0.04);
  --shadow-lg: 0 24px 48px -20px rgba(26, 26, 26, 0.28), 0 8px 16px -12px rgba(26,26,26,0.10);

  /* Radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Type — matches goodstreecare.com */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --density: 1;

  /* Fluid type — tightened to match original's more moderate scale.
     Original hero is ~44-52px, not 96px. */
  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --step-1:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --step-4:  clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
  --step-5:  clamp(2rem, 1.65rem + 1.6vw, 2.875rem);
  --step-6:  clamp(2.375rem, 1.9rem + 2.2vw, 3.5rem);
}

/* Base reset */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--forest); color: var(--cream); }

/* Utility */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}

.eyebrow--ink { color: var(--ink-3); }

.rule {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}