/* Lawns and Pavers — Design Tokens
 * Crisp white + emerald + slate direction.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   Global resets — prevent any horizontal overflow.
   Every element uses border-box so padding doesn't blow out widths.
   html/body have hard overflow-x: hidden as a safety net.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img, video { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }

:root {
  /* -------- Turf (emerald primary) -------- */
  --turf-50:  #EAF3EC;
  --turf-100: #CDE3D3;
  --turf-200: #9FC7AE;
  --turf-300: #6FA985;
  --turf-400: #478A62;
  --turf-500: #2F7048;
  --turf-600: #245A3C;
  --turf-700: #1F5A3A; /* brand green — from reference */
  --turf-800: #17432B;
  --turf-900: #0F2E1D;
  --turf-950: #081A10;

  /* -------- Slate (secondary — from reference paver panel) -------- */
  --slate-50:  #F2F4F6;
  --slate-100: #E3E7EB;
  --slate-200: #CBD2D9;
  --slate-300: #B7C1CA;
  --slate-400: #8F9AA6;
  --slate-500: #6B7682;
  --slate-600: #4C5A66; /* brand slate — from reference */
  --slate-700: #38434D;
  --slate-800: #252D34;
  --slate-900: #131820;

  /* -------- Clay (accent, sparingly used on CTA flourish) -------- */
  --clay-100: #F5D7C6;
  --clay-300: #E0906D;
  --clay-500: #B2593A;
  --clay-700: #6F3521;

  /* -------- Neutrals (clean, slate-tinted, NOT warm cream) -------- */
  --white:    #FFFFFF;
  --paper:    #FAFBFC; /* page bg alt — barely off-white */
  --n-50:     #F1F4F6;
  --n-100:    #E6EAEE;
  --n-200:    #D7DDE3;
  --n-300:    #BEC6CE;
  --n-400:    #9AA3AD;

  /* -------- Ink -------- */
  --ink-900: #0B0E12; /* near-black, slight cool */
  --ink-700: #2A2F35;
  --ink-500: #5A6069;
  --ink-300: #9298A1;

  /* -------- Semantic tokens -------- */
  --bg-page:       var(--white);
  --bg-section:    var(--n-50);
  --bg-card:       var(--white);
  --bg-inverse:    var(--turf-700);
  --bg-ink:        var(--ink-900);

  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--slate-600);
  --fg-muted:      var(--ink-500);
  --fg-inverse:    var(--white);
  --fg-accent:     var(--turf-700);

  --border-default: var(--n-200);
  --border-strong:  var(--slate-300);
  --border-focus:   var(--turf-700);

  --btn-primary-bg:        var(--turf-700);
  --btn-primary-bg-hover:  var(--turf-800);
  --btn-primary-bg-active: var(--turf-900);
  --btn-primary-fg:        var(--white);

  --btn-secondary-bg:        transparent;
  --btn-secondary-border:    var(--ink-900);
  --btn-secondary-fg:        var(--ink-900);
  --btn-secondary-bg-hover:  var(--n-100);

  /* -------- Type -------- */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  --leading-tight:  1.02;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.22em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 14, 18, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(11, 14, 18, 0.12);
  --shadow-3: 0 24px 64px -24px rgba(11, 14, 18, 0.22);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 400ms;

  --header-h: 72px;
  --container-max: 1200px;
  --container-wide: 1440px;
}

/* ======== Elements ======== */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: inherit;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); text-transform: uppercase; }
h2 { font-size: var(--text-3xl); text-transform: uppercase; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0; }

h5, h6 { font-family: var(--font-sans); font-weight: 700; margin: 0; }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p { margin: 0; line-height: var(--leading-loose); color: inherit; text-wrap: pretty; }
small, .text-small { font-size: var(--text-sm); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: uppercase;
}

.lead { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--fg-secondary); }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a { color: inherit; text-decoration-color: var(--slate-300); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-base) var(--ease-out); }
a:hover { text-decoration-color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 20px; min-height: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  text-decoration: none; user-select: none;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-primary:active { background: var(--btn-primary-bg-active); transform: translateY(1px); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-ghost { background: transparent; color: var(--fg-primary); }
.btn-ghost:hover { background: var(--n-100); }

.card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-xs); background: var(--slate-100); color: var(--slate-700); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--n-200); color: var(--ink-900); font-size: var(--text-sm); font-weight: 600; }

.input, .textarea, .select { width: 100%; padding: 12px 14px; min-height: 48px; background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-base); color: var(--fg-primary); transition: border-color var(--dur-fast) var(--ease-out); }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; border-color: transparent; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
.label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--fg-primary); }

.divider { height: 1px; background: var(--border-default); border: 0; }

/* ============================================================
   Responsive utilities
   - .container             : max-width + horizontal padding
   - .section-pad           : vertical section padding
   - .grid-*                : layout grids that adapt at breakpoints
   - .h-display / .h-section: fluid headings
   - .nav-desktop, .menu-btn, .mobile-menu : header pieces
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
.container--wide   { max-width: var(--container-wide); }
.container--mid    { max-width: 1100px; }
.container--narrow { max-width: 1000px; }

.section-pad     { padding-top: 96px;  padding-bottom: 96px;  }
.section-pad--lg { padding-top: 112px; padding-bottom: 112px; }
.section-pad--sm { padding-top: 20px;  padding-bottom: 20px;  }

.grid-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-work     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-process  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.grid-footer   { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.grid-stats    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.grid-split            { display: grid; grid-template-columns: 1fr 1.2fr;  gap: 64px; align-items: center; }
.grid-split--reverse   { display: grid; grid-template-columns: 1.1fr 1fr;  gap: 64px; align-items: center; }
.grid-split--basecraft { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }

.grid-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-2up-keep { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.h-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 76px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.0;
  text-transform: uppercase; text-wrap: balance; margin: 0;
}
.h-section {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.02;
  text-transform: uppercase; text-wrap: balance; margin: 0;
}

/* Header */
.nav-desktop { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.menu-btn {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--n-200);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0;
  color: var(--ink-900);
}
.menu-btn:hover { background: var(--n-100); }
.mobile-menu { display: none; }

/* ===== Tablet: ≤960px ===== */
@media (max-width: 960px) {
  .grid-services { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid-work     { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid-footer   { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-split,
  .grid-split--reverse,
  .grid-split--basecraft { grid-template-columns: 1fr; gap: 40px; }
  .section-pad     { padding-top: 72px; padding-bottom: 72px; }
  .section-pad--lg { padding-top: 80px; padding-bottom: 80px; }
}

/* ===== Mobile: ≤840px =====
   Lake Osceola pattern: use !important so rules beat any inline style.
   No need to refactor every inline style — just flip what matters here. */
@media (max-width: 840px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  .grid-services            { grid-template-columns: 1fr !important; gap: 14px !important; }
  .grid-work                { grid-template-columns: 1fr !important; gap: 14px !important; }
  .grid-process             { grid-template-columns: 1fr !important; gap: 28px !important; }
  .grid-process > .process-line { display: none !important; }
  .grid-footer              { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-stats               { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .grid-2up                 { grid-template-columns: 1fr !important; }
  .grid-split,
  .grid-split--reverse,
  .grid-split--basecraft    { grid-template-columns: 1fr !important; gap: 40px !important; }

  .section-pad     { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section-pad--lg { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Header: hide desktop nav + phone, hide wordmark eyebrow/tagline, show hamburger + short CTA */
  .nav-desktop                  { display: none !important; }
  .nav-actions                  { gap: 8px !important; min-width: 0 !important; }
  .nav-actions .nav-phone       { display: none !important; }
  .menu-btn                     { display: inline-flex !important; width: 38px !important; height: 38px !important; }
  .nav-actions .btn-primary     { padding: 8px 12px !important; font-size: 13px !important; min-height: 38px !important; }
  .btn-cta-text-full            { display: none !important; }
  .btn-cta-text-short           { display: inline !important; }

  /* Wordmark: shrink icons, hide eyebrow + tagline, shrink main text */
  .wordmark                     { gap: 8px !important; min-width: 0 !important; flex: 0 1 auto !important; }
  .wordmark-marks               { gap: 4px !important; }
  .wordmark-marks svg           { width: 26px !important; height: 30px !important; }
  /* Wordmark on mobile: hairline eyebrow + larger main text, hide tagline.
     Eyebrow is forced small + tracked for the hairline aesthetic regardless
     of the dynamic size prop on Wordmark itself. */
  .wordmark-eyebrow             { display: block !important; font-size: 8px !important; letter-spacing: 0.18em !important; margin-bottom: 3px !important; }
  .wordmark-tagline             { display: none !important; }
  .wordmark-main                { font-size: 18px !important; letter-spacing: -0.01em !important; }

  /* BaseCraft diagram: compress for mobile */
  .basecraft-diagram            { padding: 16px !important; }
  .basecraft-ruler              { display: none !important; }
  .basecraft-layer              {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: 3px !important;
  }
  .basecraft-layer > span       { white-space: normal !important; text-align: left !important; }
  .basecraft-layer > span:nth-child(2) { font-size: 10.5px !important; line-height: 1.35 !important; opacity: 0.92 !important; }
  .basecraft-spec-badge         { display: flex !important; max-width: 100% !important; }

  /* Aspect-ratio media (WhyUs portrait, ServiceArea map): cap height on mobile */
  .aspect-cap                   { aspect-ratio: 4/3 !important; }

  /* Default tag scaling for any naked tags (services pages I didn't refactor) */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  .display { font-size: var(--text-4xl); }
  .lead { font-size: var(--text-base); }

  /* ---- Service-page sledgehammer ----
     Catches inline gridTemplateColumns patterns that should collapse on mobile.
     Targets the actual rendered HTML attribute (kebab-case).
     Deliberately does NOT catch repeat(2, ...), single-icon "Xpx 1fr",
     "auto 1fr", or "auto 1fr auto" chevron patterns. */

  /* repeat(3+) and repeat(10+) */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns: repeat(7"],
  [style*="grid-template-columns: repeat(8"],
  [style*="grid-template-columns: repeat(9"],
  [style*="grid-template-columns: repeat(1"],

  /* 2-column fractional splits (hero text/image, content/sidebar, etc.) */
  [style*="grid-template-columns: 0.8fr"],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 1fr 1.0"],
  [style*="grid-template-columns: 1fr 1.2"],
  [style*="grid-template-columns: 1fr 1.3"],
  [style*="grid-template-columns: 1fr 1.4"],
  [style*="grid-template-columns: 1fr 1.5"],
  [style*="grid-template-columns: 1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr\""],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],

  /* 3+ col patterns with mixed fractional / fixed columns */
  [style*="grid-template-columns: 1fr 1fr 1"],
  [style*="grid-template-columns: 1.4fr 1.2fr"],
  [style*="grid-template-columns: 1.6fr"],
  [style*="grid-template-columns: 100px 1.4fr"],
  [style*="grid-template-columns: 110px 1fr"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 140px 110px"],
  [style*="grid-template-columns: 180px 1.2fr"],
  [style*="grid-template-columns: 180px 220px"],
  [style*="grid-template-columns: 80px 1.3fr"],
  [style*="grid-template-columns: 150px 1fr 50px"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Service-page section padding compression ----
     Tightens the "margins are too big" feel on mobile across all service pages. */
  [style*="padding: 112px 32px"],
  [style*="padding: 128px 32px"],
  [style*="padding: 96px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding: 80px 32px 0"] {
    padding: 48px 16px 0 !important;
  }

  /* ---- Responsive table → card pattern ----
     For data tables that have a header row + repeated rows. On mobile:
     - Header row hides (.m-table-header)
     - Each row becomes a vertical card (.m-card-row), with field labels
       coming from .m-label spans (hidden on desktop, shown on mobile). */
  .m-table-header             { display: none !important; }
  .m-card-row                 { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 24px 16px !important; }
  .m-card-row > div           { width: 100% !important; }
  .m-label                    { display: block !important; font-family: var(--font-sans); font-size: 10.5px !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }

  /* ---- SeasonCalendar mobile ----
     Hide horizontal timeline (doesn't work at narrow widths). The vertical
     visit list below collapses to 1-col via sledgehammer and reads naturally. */
  .season-timeline-desktop    { display: none !important; }
  .season-visits              { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; gap: 0 !important; }
  .season-visit-item          { padding: 14px 0 !important; border-bottom: 1px solid var(--n-200); }
  .season-visit-item:last-child { border-bottom: none !important; }

  /* ---- SystemAnatomy schematic ----
     Hide the desktop SVG schematic on mobile (absolute-positioned labels overlap
     on narrow widths). The legend grid below conveys the same info as a list. */
  .schematic-desktop          { display: none !important; }

  /* ---- BaseCraftDeep cross-section ----
     Hide the desktop cross-section diagram on mobile. The layer blocks have
     fixed pixel heights tied to inches and can't hold their spec text at narrow
     widths — text overflows into the next layer. The mobile fallback list
     (.cross-section-mobile) carries the same info as plain rows. */
  .cross-section-desktop      { display: none !important; }
  .cross-section-mobile       { display: block !important; }

  /* ---- Hero / page-level heading sizes on mobile ----
     The inline page-h1/h2/h3 declarations in each service index.html clamp at
     56px / 52px / 28px. Those minimums are too large for ~380px viewports —
     long words like "HARDSCAPING" overflow. Force a smaller floor on mobile. */
  .page-h1 { font-size: 42px !important; line-height: 0.95 !important; }
  .page-h2 { font-size: 30px !important; line-height: 1.05 !important; }
  .page-h3 { font-size: 21px !important; }

  /* ---- ServiceArea map on mobile ----
     The 22-town SVG shrinks proportionally on small screens — labels are too
     small to read and start overlapping. Hide labels and keep the dots; the
     town grid above the map already lists every town by name. */
  .map-town-label             { display: none !important; }
}

.m-label { display: none; }

.btn-cta-text-short { display: none; }

/* Header is position:fixed; this spacer reserves its height in document flow
   so content doesn't slide up under the header. */
.header-spacer { height: 80px; flex-shrink: 0; }