/* ── 0. Self-hosted Open Sans ────────────────────────────────────────────────
   Was a render-blocking request to fonts.googleapis.com costing 760ms of the
   critical path (measured in PageSpeed). Self-hosting removes the third-party
   round trip entirely — same variable font, latin + latin-ext only (the cyrillic,
   greek and vietnamese subsets Google also ships are not used here).

   `font-display: swap` so text paints immediately in the fallback and reflows to
   Open Sans, rather than blocking the first paint on the font.
   Note the site's declared stack is 'Lato','Open Sans' — Lato is never loaded
   (the WordPress site did not load it either), so this is what actually renders. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Apex Lawns — shared site CSS
   --------------------------------------------------------------------------
   Scope note: the homepage, /our-services/ and the 6 city pages are verbatim
   custom-coded blocks that ship their OWN scoped <style> (.apex-home, .ah-*,
   and per-city prefixes). This file deliberately does NOT restyle those.

   What lives here:
     1. Global reset + the old platform-replacement defaults (the old platform's reset is gone, so
        without this the extracted copy falls back to serif with underlined
        links and 8px body margin edge slivers).
     2. The design tokens the custom blocks use, so the pages that were native
        builder modules (/about-us/, /contact-us/, /gallery/) can match them.
     3. The shared quote form, gallery grid, and blog/collection styles.

   Accessibility: --green-ink is the AA-safe deep token for SMALL text on light
   backgrounds (--green at 3.6:1 on white fails AA for body copy). Use --green
   only for large text (>=24px, or >=18.66px bold) and for colored backgrounds
   with white text.
   ========================================================================== */

:root {
  --green-darkest: #111a12;
  --green-dark:    #1a2e1a;
  --green-deep:    #1a3a26;
  --green:         #2a6e3f;
  --green-ink:     #1f5730;   /* AA-safe for small text on white (5.9:1) */
  --green-mid:     #3a8f52;
  --green-light:   #86efac;
  --green-wash:    #f0f7f2;
  --orange:        #e86c1a;
  --orange-dark:   #cf5c0f;
  --ink:           #222;
  --ink-soft:      #555;
  --ink-muted:     #666;
  --rule:          #e5e7eb;
  --white:         #fff;

  /* the old platform's global defaults, which the extracted CSS inherits FROM rather
     than declaring. Reproduced here because the migration removes that
     stylesheet -- see the body rule below for why each one matters. */
  --body-ink:      #666;   /* inherited global body colour */
  --body-weight:   500;    /* inherited global body font-weight */

  /* Lato first purely to match the extracted CSS's declared stack; it is NEVER
     loaded (the live site does not load it either), so this always resolves to
     Open Sans. Do not add a Lato @font-face or webfont link -- see head.php. */
  --font-body:     'Lato', 'Open Sans', sans-serif;
}

/* ── 1. Reset / the old platform-replacement defaults ────────────────────────────────── */

html, body { margin: 0; padding: 0; }

/* ⚠ font-weight and color here are LIVE-SITE PARITY, not taste.
   The old platform set `font-weight:500` and `color:#666` globally on body, and the extracted
   page CSS inherits both rather than declaring them. Without these two lines the
   whole site rendered a weight lighter than the live site (verified element by
   element in Chrome: .ah-lead, .ah-pillar, .ah-hero-sub, .ah-stat-label,
   .ah-callout and .af-cta-bar were all 400 vs 500 on production) and the header
   top bar inherited #222 instead of #666.
   Content regions are unaffected: .apex-home, .apex-footer and .ax-page all set
   their own colour explicitly. */
body {
  font-family: var(--font-body);
  color: var(--body-ink);
  font-weight: var(--body-weight);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* The old platform shipped `img { max-width:100% }`; keep height:auto alongside it or any
   <img> carrying width/height attributes renders stretched. */
img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: var(--green-ink); }

/* HOUSE RULE: this stylesheet contains zero page-builder or plugin tie-backs --
   no builder class selectors, no builder font names, not even in comments (this
   file is served to the browser, so a comment naming the old builder is still a
   visible tie-back). A scroll-reveal opacity defence used to live here keyed to
   builder classes; extraction now strips those classes entirely, so it is gone.
   If a future extraction ever ships opacity:0 markup, fix it in the extractor. */

.ax-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--green-darkest);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.ax-skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 2. Page shell for the rebuilt (formerly native-the old platform) pages ──────────── */

.ax-page { color: var(--ink); }
.ax-page * { box-sizing: border-box; }

.ax-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 55%, var(--green-mid) 100%);
  color: var(--white);
  padding: clamp(48px, 6vw, 84px) clamp(20px, 5vw, 72px);
  text-align: center;
}
.ax-hero h1 {
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 14px;
  color: var(--white);
}
.ax-hero__sub {
  font-size: clamp(15px, 1.8vw, 20px);
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .9);
}
.ax-hero__eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 30px;
  padding: 5px 18px;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}

.ax-section { padding: clamp(40px, 5.5vw, 76px) clamp(20px, 5vw, 60px); }
.ax-section--wash  { background: var(--green-wash); }
.ax-section--white { background: var(--white); }
/* Container widths. The site's own header uses `min(90vw, 1800px)`, so these are
   set to sit in that family rather than the tighter defaults they started at --
   the narrower caps made the contact-page form render at a different width from
   the identical form on the homepage. */
.ax-wrap { width: min(100%, 1600px); margin: 0 auto; }
.ax-wrap--narrow { width: min(100%, 1100px); margin: 0 auto; }

.ax-tag {
  font-size: clamp(10px, .9vw, 12px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 10px;
}
.ax-page h2 {
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--green-dark);
  margin: 0 0 16px;
}
.ax-page h3 {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 10px;
}
.ax-page h4 {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.ax-page p { margin: 0 0 16px; color: var(--ink-soft); }
.ax-page p:last-child { margin-bottom: 0; }
.ax-page ul, .ax-page ol { margin: 0 0 16px; padding-left: 1.3em; color: var(--ink-soft); }
.ax-page li { margin-bottom: 6px; }

/* Dark-ground text, re-asserted AFTER the .ax-page typography above.
   `.ax-page p { color: var(--ink-soft) }` is (0,1,1) and beats a bare
   `.ax-hero__sub` (0,1,0) regardless of order, so hero/CTA copy rendered dark
   grey on green until these two-class selectors were added. Any new dark section
   must be listed here too. */
.ax-page .ax-hero__eyebrow,
.ax-page .ax-hero h1,
.ax-page .ax-hero p,
.ax-page .ax-hero__sub { color: var(--white); }
.ax-page .ax-hero__sub { color: rgba(255, 255, 255, .92); }
.ax-page .ax-hero a { color: var(--green-light); }

/* ⚠ MARGIN, for the same specificity reason as the colours above.
   `.ax-page p { margin: 0 0 16px }` is (0,1,1) and beats `.ax-hero__sub`'s
   `margin: 0 auto` (0,1,0), so the auto-centring was silently dropped: the block
   kept its 720px max-width but sat hard left inside a full-width hero, with its
   text centred inside that offset box. Measured 72px of gap on the left against
   633px on the right — it read as broken copy on all five rebuilt pages, not just
   /thank-you/ where it was first spotted.
   Any property `.ax-page p` also sets must be re-asserted here, not just colour. */
.ax-page .ax-hero p,
.ax-page .ax-hero__sub {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.ax-page .ax-cta h2 { color: var(--white); }
.ax-page .ax-cta p { color: rgba(255, 255, 255, .88); }

.ax-figure { margin: 0 0 24px; }
.ax-figure img { border-radius: 10px; width: 100%; }

/* Feature cards -- our replacement for the old builder blurb module */
.ax-blurbs { display: flex; flex-wrap: wrap; gap: 22px; }
.ax-blurbs--4 .ax-blurb { flex: 1 1 220px; }
.ax-blurbs--3 .ax-blurb { flex: 1 1 300px; }
.ax-blurb {
  background: var(--white);
  border-radius: 10px;
  border-left: 4px solid var(--green);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
.ax-blurb__icon {
  display: block;
  /* Deliberately the body font: the old builder's icon font does not exist here,
     so a glyph codepoint would render as a stray Latin letter. Extraction no
     longer emits those glyphs; kept only for a future icon of our own. */
  font-family: var(--font-body);
  font-size: 30px;
  color: var(--green);
  margin-bottom: 10px;
}
.ax-blurb__title { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; color: var(--green-dark); margin: 0 0 10px; }
.ax-blurb__body { font-size: clamp(13px, 1.1vw, 15px); color: var(--ink-soft); line-height: 1.65; }
.ax-blurb__body p:last-child { margin-bottom: 0; }

/* CTA strip */
.ax-cta {
  background: var(--green-dark);
  color: var(--white);
  padding: clamp(36px, 4.5vw, 60px) clamp(20px, 5vw, 60px);
  text-align: center;
}
.ax-cta h2 { color: var(--white); }
.ax-cta p { color: rgba(255, 255, 255, .85); }
.ax-btn {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: clamp(12px, 1.5vw, 17px) clamp(24px, 3vw, 40px);
  border-radius: 6px;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  text-decoration: none;
}
.ax-btn:hover { background: var(--orange-dark); color: var(--white); }
.ax-btn--ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
  color: var(--white);
}
.ax-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.ax-btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }

/* ── 3. Shared quote form ────────────────────────────────────────────────── */

/* No max-width: the form fills whatever slot it is given, so the SAME partial
   renders identically on the homepage and /contact-us/. It previously capped at
   780px, which made the contact-page copy 780px wide against 673px on the
   homepage — different field widths and a different checkbox column count from
   byte-identical markup. Both pages now place it in a 47.25% column of the same
   1600px row, so the rendered form is the same on both. */
/* SELF-SUFFICIENT: a shared partial must not depend on ambient page CSS. The
   contact page wraps content in .ax-page (which sets box-sizing:border-box), but
   on the homepage the form sits inside an extracted block with no such rule, so
   it fell back to content-box and every input overflowed its field by exactly its
   padding+border (300px field, 330px input). Scoping box-sizing to the form's own
   subtree makes it render identically wherever it is placed. */
.ax-form-wrap,
.ax-form-wrap * { box-sizing: border-box; }

.ax-form-wrap {
  background: var(--white);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 38px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .09);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
.ax-form__row { display: flex; flex-wrap: wrap; gap: 16px; }
.ax-form__row > .ax-form__field { flex: 1 1 220px; }
.ax-form__field { margin-bottom: 16px; }
.ax-form label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.ax-req { color: var(--orange); }
.ax-form input[type="text"],
.ax-form input[type="tel"],
.ax-form input[type="email"],
.ax-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;              /* 16px stops iOS Safari zooming on focus */
  color: var(--ink);
  background: #f6f8f6;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 13px 14px;
}
.ax-form input:focus, .ax-form textarea:focus {
  border-color: var(--green);
  background: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 110, 63, .15);
}
.ax-form textarea { resize: vertical; min-height: 108px; }

.ax-form__fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.ax-form__fieldset legend {
  font-weight: 700;
  font-size: 14px;
  color: var(--green-dark);
  padding: 0;
  margin-bottom: 10px;
}
.ax-form__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 18px;
}
.ax-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  padding: 7px 0;               /* clears the 24px minimum tap target */
  cursor: pointer;
}
.ax-check input { width: 18px; height: 18px; accent-color: var(--green); flex: 0 0 auto; margin: 0; }

.ax-form__submit {
  font-family: inherit;
  background: var(--orange);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 15px 44px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.ax-form__submit:hover { background: var(--orange-dark); }

/* Form-scoped (two classes) on purpose: the consent line is a <p>, so a bare
   `.ax-form__consent` (0,1,0) loses to the page-level `.ax-page p` (0,1,1) on
   pages that use the .ax-page shell and wins on pages that don't -- the same
   partial rendered #555 on /contact-us/ and #666 on the homepage. Any text rule
   for this partial must stay form-scoped for the same reason. */
.ax-form .ax-form__consent {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 18px 0 0;
}
.ax-form__error {
  background: #fdecea;
  border-left: 4px solid #c0392b;
  color: #8d2114;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 0 0 20px;
  font-size: 14.5px;
}
/* Honeypot — off-screen rather than display:none so bots still see a real field */
.ax-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 4. Gallery grid ─────────────────────────────────────────────────────── */

.ax-gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.ax-gal__item { margin: 0; overflow: hidden; border-radius: 8px; background: var(--green-wash); }
.ax-gal__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}
.ax-gal__item:hover img { transform: scale(1.04); }

/* ── 5. Blog / collection cards ──────────────────────────────────────────── */

.ax-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.ax-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
}
.ax-card__thumb { display: block; }
.ax-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ax-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ax-card__date { font-size: 13px; color: var(--ink-muted); }
.ax-card__title { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.3; margin: 6px 0 10px; }
.ax-card__title a { color: var(--green-dark); text-decoration: none; }
.ax-card__title a:hover { color: var(--green-ink); }
.ax-card__excerpt { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; }
.ax-card__more {
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--green-ink);
  text-decoration: none;
}
.ax-card__more:hover { color: var(--orange-dark); }

/* Article body */
.ax-article { width: min(100%, 800px); margin: 0 auto; }
.ax-article__meta { font-size: 14px; color: var(--ink-muted); margin-bottom: 26px; }
.ax-article h2 { font-size: clamp(20px, 2.6vw, 30px); margin-top: 36px; }
.ax-article h3 { font-size: clamp(17px, 1.9vw, 23px); margin-top: 28px; }
.ax-article img { border-radius: 10px; margin: 24px 0; }
.ax-article blockquote {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--green-wash);
  border-left: 4px solid var(--green);
  border-radius: 0 8px 8px 0;
  font-size: 16.5px;
  color: var(--green-dark);
}
.ax-article blockquote p:last-child { margin-bottom: 0; }

/* ── 6. Utility ──────────────────────────────────────────────────────────── */

.ax-center { text-align: center; }
.ax-lead { font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-soft); line-height: 1.75; }
.ax-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 7. the old platform row / column reproduction ───────────────────────────────────────
   The old structure was section > row > column > module, and the row/column layer
   is where multi-column layouts live. Flattening modules lost it: the homepage
   quote section is a two-column row (intro left, form right) and came out as a
   full-width intro stacked above a centred form with a large empty area beside
   it. `extract_page.py` now emits .ax-row / .ax-col wrappers carrying the original
   widths; these rules make them behave like the original floated columns.
   Column widths are inline (they vary per row); only the mechanics live here. */

.ax-row { width: 100%; }
.ax-row--cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5.5%;              /* builder gutter setting was 5.5% */
  align-items: flex-start;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
  box-sizing: border-box;
}
.ax-col { min-width: 0; }   /* lets long words wrap instead of forcing overflow */

@media (max-width: 980px) {
  /* The original collapsed columns to full width at its tablet breakpoint. */
  .ax-row--cols { display: block; }
  .ax-col { width: 100% !important; flex: none !important; }
  .ax-col + .ax-col { margin-top: 30px; }
}

/* ── 8. Quote-section intro (mirrors the homepage block on /contact-us/) ──────
   The homepage's quote intro is custom-coded markup inside its own extracted
   block; /contact-us/ is a rebuilt page, so it needs our equivalent styling to
   sit beside the same form partial on the same green ground. */

.ax-quote-intro { color: var(--white); }
.ax-quote-intro__tag {
  font-size: clamp(10px, .9vw, 12px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-light);
  margin: 0 0 10px;
}
.ax-quote-intro h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 16px;
}
.ax-quote-intro p {
  font-size: clamp(14px, 1.3vw, 17px);
  color: rgba(255, 255, 255, .88);
  line-height: 1.7;
  margin: 0 0 18px;
}
.ax-quote-intro__list { list-style: none; margin: 0 0 26px; padding: 0; }
.ax-quote-intro__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: clamp(13px, 1.2vw, 15px);
  color: rgba(255, 255, 255, .9);
  padding: 5px 0;
}
.ax-quote-intro__list li::before { content: '✓'; color: var(--green-light); font-weight: 700; }
.ax-quote-intro__phone {
  display: inline-block;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--green-light);
  text-decoration: none;
}
.ax-quote-intro__hours {
  font-size: clamp(12px, 1vw, 13px) !important;
  color: rgba(255, 255, 255, .7) !important;
  margin: 4px 0 0 !important;
}

/* ── 9. Breadcrumb bar ───────────────────────────────────────────────────────
   Inserted before <main> by assets/js/breadcrumb.js. Styling is colour and
   spacing ONLY — deliberately `position: static`, with no `top: var(--nav-h)`
   offset, because the insertion point plus the script's geometry check do the
   positioning work. Copying another site's sticky breadcrumb CSS is what breaks
   when its header happens to be positioned differently.
   Colours come from this site's own tokens rather than a hardcoded palette. */

.ax-bc {
  position: static;
  background: var(--green-darkest);
  border-bottom: 2px solid var(--orange);
  padding: 10px clamp(20px, 4vw, 60px);
  font-family: var(--font-body);
}
.ax-bc__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 1600px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  font-size: clamp(12px, 1.1vw, 14px);
}
.ax-bc__item { display: flex; align-items: center; gap: 6px; }
/* Separator is CSS-generated so it is never read out by a screen reader. */
.ax-bc__item + .ax-bc__item::before {
  content: '›';
  color: rgba(255, 255, 255, .45);
  font-size: 1.15em;
  line-height: 1;
}
.ax-bc__link {
  color: var(--green-light);      /* 8.9:1 on --green-darkest */
  text-decoration: none;
  padding: 4px 0;                 /* keeps the tap target at 24px+ */
}
.ax-bc__link:hover,
.ax-bc__link:focus-visible { text-decoration: underline; }
.ax-bc__current {
  color: rgba(255, 255, 255, .82);
  padding: 4px 0;
}