/* Larkmoor Lawn & Landscape — generated by kit/_build/archetypes/grounds.py. */
/* Do not edit by hand: re-run `python3 kit/_build/archetypes/grounds.py sample-landscaper-clean`. */
/* ============================================================================
   ARCHETYPE — GROUNDS (lawn care & landscaping)
   ----------------------------------------------------------------------------
   Not a style kit, and deliberately not the builder archetype either.

   A builder sells one finished thing you will look at for twenty years, so that
   archetype argues with case studies, spec tables and hairlines on warm paper.
   A grounds crew sells something else entirely: a relationship measured in
   visits. The buyer is not asking "will this be built properly" — they are
   asking "who is in my yard on Tuesday, what do they actually do, and what does
   it cost me every month?"

   So the three ideas here are the opposite of the builder's:

   1. THE YEAR IS THE STRUCTURE. A twelve-month band runs across the site, and
      the seasons get their own photographs. No other trade's website is
      organised by the calendar, and this one has to be, because the work is.
   2. PRICES IN A TABLE, NOT IN A BAND. Maintenance is a subscription, so it is
      priced like one: plan down the side, lot size across the top, a number in
      every cell. "Contact us for a quote" is the thing we are arguing against.
   3. SOFT PANELS, NOT DRAWING SHEETS. Rounded corners, pill buttons, generous
      colour blocks, no monospace anywhere. The builder reads like a document;
      this reads like a service you subscribe to.

   ⚠️ NEPRIDÁVAJ `backdrop-filter`, `filter` ani `transform` na `.mast` —
   ktorýkoľvek z nich vytvorí containing block pre `position: fixed` potomkov
   a rozbalené mobilné menu sa zbalí na výšku hlavičky. (Tá istá pasca ako
   v base.css aj v archetype-builder.css; `position: sticky` ju nemá.)
   ========================================================================= */

:root {
  --f-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --chalk: #f7f7f2;
  --chalk-2: #eceade;
  --white: #ffffff;

  --ink: #17211a;
  --ink-2: #4e5b51;
  --ink-3: #7b877f;
  --line: #dedcd0;
  --line-2: #c8c6b8;

  --moss: #1f3d2b;
  --moss-2: #16301f;
  --moss-soft: rgba(31, 61, 43, .08);
  --on-moss: #eef2ea;
  --on-moss-mute: #a8bdae;
  --on-moss-line: rgba(238, 242, 234, .18);

  --wheat: #d9a441;
  --wheat-2: #c08f2f;
  --wheat-soft: rgba(217, 164, 65, .16);

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 33, 26, .04), 0 8px 24px rgba(23, 33, 26, .06);

  --wrap: 1200px;
  --gut: 1.25rem;
  --mast-h: 74px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--moss); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.028em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); letter-spacing: -.018em; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--moss); color: var(--on-moss); padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- Grid ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 900px) { :root { --gut: 2rem; } }

.band { padding-block: clamp(3.25rem, 6.5vw, 6rem); }
.band--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.band--chalk2 { background: var(--chalk-2); }
.band--white { background: var(--white); }
.band--moss { background: var(--moss); color: var(--on-moss); }
.band--moss h2, .band--moss h3, .band--moss h4 { color: var(--on-moss); }
.band--moss p { color: var(--on-moss-mute); }
.band--moss a { color: var(--on-moss); }

/* --- Section head --------------------------------------------------------- */
/* No numbering and no monospace anywhere: the builder archetype owns the
   drawing-sheet language, and two sample sites must not share a tell. */
.shead { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.shead h2 { margin-top: .875rem; }
.shead__lede { margin-top: 1rem; color: var(--ink-2); font-size: 1.0625rem; }
.band--moss .shead__lede { color: var(--on-moss-mute); }

.pill {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  background: var(--wheat-soft); color: #7a5410;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.band--moss .pill { background: rgba(217, 164, 65, .2); color: var(--wheat); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.6rem; border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--f-body); font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--solid { background: var(--moss); color: var(--on-moss); }
.btn--solid:hover { background: var(--moss-2); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--ink); background: rgba(23, 33, 26, .03); }
.band--moss .btn--solid { background: var(--wheat); color: #1f1503; }
.band--moss .btn--solid:hover { background: var(--wheat-2); }
.band--moss .btn--line { color: var(--on-moss); border-color: var(--on-moss-line); }
.band--moss .btn--line:hover { border-color: var(--on-moss); background: rgba(255,255,255,.06); }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 559px) { .hero .btns .btn, .endcta .btns .btn { flex: 1 1 100%; } }

/* --- Masthead ------------------------------------------------------------- */
.mast {
  position: sticky; top: 0; z-index: 60;
  background: var(--chalk); border-bottom: 1px solid var(--line);
}
.mast__in { display: flex; align-items: center; gap: 1rem; height: var(--mast-h); }

.brand { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark {
  flex-shrink: 0; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--moss); color: var(--wheat);
}
.brand__mark svg { width: 19px; height: 19px; }
.brand__name {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: 1.2rem; line-height: 1.1; color: var(--ink); letter-spacing: -.03em;
}
/* ⚠️ Na mobile ostáva v hlavičke po burgeri, značke a tlačidle asi 145 px —
   „Larkmoor Lawn & Landscape" sa tam nezmestí v žiadnej čitateľnej veľkosti
   a zalomí sa na tri riadky, ktoré roztiahnu lištu. Do 620 px preto svieti
   krátky názov, nad ním plný. Rovnaká dvojica žije aj v mobilnom menu. */
.brand__name--full { display: none; }
.brand__name--short { white-space: nowrap; }
@media (min-width: 620px) {
  .brand__name--full { display: block; }
  .brand__name--short { display: none; }
}
@media (min-width: 1024px) { .brand__name { white-space: nowrap; } }
/* ⚠️ Doplnkový riadok „Lawn care & landscaping · Austin, TX" v hlavičke NEBYŤ
   nemôže — firemný názov je dlhý a ani na 1440 px sa oba vedľa navigácie
   nezmestia; prekrývali sa. Žije preto v pätičke, kde je naň miesto. */
.brand__loc { font-size: .875rem; color: var(--on-moss-mute); }

/* ⚠️ `fixed`, nie `absolute` — klik na <label> presunie fokus na checkbox
   a prehliadač ho odroluje do zorného poľa. */
.navbox { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-inline-start: -.5rem;
  cursor: pointer; flex-shrink: 0; color: var(--ink); order: -1;
}
.burger i, .burger i::before, .burger i::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s ease;
}
.burger i { position: relative; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -7px; }
.burger i::after { top: 7px; }
.navbox:checked ~ .wrap .burger i { background: transparent; }
.navbox:checked ~ .wrap .burger i::before { transform: translateY(7px) rotate(45deg); }
.navbox:checked ~ .wrap .burger i::after { transform: translateY(-7px) rotate(-45deg); }
.navbox:focus-visible ~ .wrap .burger { outline: 3px solid var(--moss); outline-offset: 2px; }

.nav {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; background: var(--chalk);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.nav__top {
  display: flex; align-items: center; height: var(--mast-h);
  padding-inline: var(--gut); border-bottom: 1px solid var(--line);
}
.nav__top .brand__name { flex: 1 1 auto; }
.nav__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-inline-end: -.5rem;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.navbox:checked ~ .wrap .nav { opacity: 1; visibility: visible; }
body:has(.navbox:checked) { overflow: hidden; }
.nav__list { padding: .5rem var(--gut) 0; overflow-y: auto; }
.nav__list li { border-bottom: 1px solid var(--line); }
.nav__list a {
  display: block; padding: 1.15rem 0;
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: -.03em; color: var(--ink);
}
.nav__list a:hover { text-decoration: none; color: var(--moss); }
.nav__list a[aria-current="page"] { color: var(--moss); }
.nav__foot { margin-top: auto; padding: 1.5rem var(--gut) 7rem; }
.nav__foot .btn { width: 100%; }
.nav__foot p { margin: .75rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-2); }

.mast__cta { flex-shrink: 0; min-height: 44px; padding-inline: 1.1rem; font-size: .9375rem; }

@media (min-width: 1024px) {
  .burger { display: none; }
  .nav {
    position: static; flex-direction: row; align-items: center;
    inset: auto; opacity: 1; visibility: visible; background: none;
    margin-inline-start: auto; transition: none;
  }
  .nav__list { display: flex; gap: 1.6rem; padding: 0; overflow: visible; }
  .nav__list li { border-bottom: 0; }
  .nav__list a {
    padding: .5rem 0; white-space: nowrap;
    font-family: var(--f-body); font-size: .9375rem; font-weight: 500;
    letter-spacing: 0; color: var(--ink);
  }
  .nav__foot, .nav__top { display: none; }
  .mast__cta { margin-inline-start: 1.75rem; padding-inline: 1.5rem; font-size: 1rem; }
  body:has(.navbox:checked) { overflow: visible; }
}

/* --- Hero ----------------------------------------------------------------- */
/* Split, not a dark full-bleed photo with a scrim. The builder archetype uses
   the scrim hero; sharing that silhouette would undo the whole argument. */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.hero__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 940px) { .hero__in { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.hero h1 { margin-top: 1rem; }
.hero__sub { margin: 1.4rem 0 0; color: var(--ink-2); font-size: 1.1875rem; max-width: 34rem; }
.hero .btns { margin-top: 2rem; }
.hero__note { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-3); max-width: 30rem; }
.hero__ph { position: relative; }
.hero__ph img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  object-position: var(--hero-focus, center);
  border-radius: var(--r-lg);
}
.hero__chip {
  position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.15rem; border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow);
}
@media (min-width: 560px) { .hero__chip { right: auto; } }
.hero__chip b { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.03em; }
.hero__chip span { font-size: .875rem; color: var(--ink-2); }

.hero--inner { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); border-bottom: 1px solid var(--line); }
.hero--inner .hero__in { display: block; max-width: 44rem; }
.hero--inner h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

/* --- Badge strip ---------------------------------------------------------- */
.badges { border-block: 1px solid var(--line); }
.badges ul { display: grid; gap: .875rem; padding-block: 1.25rem; }
@media (min-width: 720px) { .badges ul { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.badges li { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--ink-2); }
.badges svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--moss); }

/* --- The year band -------------------------------------------------------- */
/* The signature element. Twelve months across, each with the one job that
   month actually needs. Nothing else in the demo set is organised this way. */
.year { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 560px) { .year { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .year { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .year { grid-template-columns: repeat(6, 1fr); } }
.year__m { background: var(--white); padding: 1rem .9rem 1.15rem; }
.year__m--peak { background: #f2f6ee; }
.year__name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.year__season { display: block; margin-top: .15rem; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--wheat-2); font-weight: 600; }
.year__task { margin: .6rem 0 0; font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.year__note { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-3); }

/* --- Seasons -------------------------------------------------------------- */
.seasons { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .seasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .seasons { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.season { background: var(--white); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.season img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.season__body { padding: 1.15rem 1.25rem 1.4rem; flex: 1 1 auto; }
.season__when { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--wheat-2); font-weight: 600; }
.season h3 { margin: .4rem 0 .5rem; }
.season p { margin: 0; font-size: .9375rem; color: var(--ink-2); }

/* --- Plans table ---------------------------------------------------------- */
/* Maintenance is a subscription, so it is priced like one. A cell for every
   plan and every lot size, and no "contact us" anywhere in the grid. */
.plans { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.plan {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.6rem 1.5rem 1.75rem;
}
.plan--pick { border-color: var(--moss); box-shadow: var(--shadow); }
.plan__tag { align-self: flex-start; margin-bottom: .9rem; }
/* Prázdna značka drží rovnakú základnú čiaru vo všetkých troch kartách —
   bez nej sa vybraný plán posunie o výšku štítku nadol. */
.plan__tag--ghost { visibility: hidden; }
.plan h3 { font-size: 1.35rem; }
.plan__cad { margin: .35rem 0 0; font-size: .875rem; color: var(--ink-3); }
.plan__blurb { margin: .9rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.plan__prices { margin: 1.35rem 0 0; border-top: 1px solid var(--line); }
.plan__prices div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.plan__lot { font-size: .875rem; color: var(--ink-2); }
.plan__num { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.03em; white-space: nowrap; }
.plan__num s { color: var(--ink-3); font-weight: 400; }
.plan__inc { margin: 1.35rem 0 1.6rem; display: grid; gap: .55rem; }
.plan__inc li { display: flex; gap: .55rem; font-size: .9375rem; color: var(--ink-2); }
.plan__inc svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .2rem; color: var(--moss); }
.plan .btn { margin-top: auto; width: 100%; }
.plans__note { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-3); max-width: 46rem; }

/* --- What happens on a visit ---------------------------------------------- */
.visit { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .visit { grid-template-columns: 1fr 1.1fr; } }
.visit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.steps { counter-reset: step; display: grid; gap: 0; margin-top: 1.75rem; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .35rem 1rem;
  padding-block: 1.05rem; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2; align-self: start;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--wheat-2);
  padding-top: .1rem;
}
.steps h3 { font-size: 1.0625rem; }
.steps__mins { font-size: .8125rem; color: var(--ink-3); white-space: nowrap; padding-top: .2rem; }
.steps p { grid-column: 2 / -1; margin: 0; font-size: .9375rem; color: var(--ink-2); }
.band--moss .steps li { border-color: var(--on-moss-line); }
.band--moss .steps p { color: var(--on-moss-mute); }
.band--moss .steps__mins { color: var(--on-moss-mute); }
.band--moss .steps li::before { color: var(--wheat); }

/* --- Garden projects ------------------------------------------------------ */
.jobs { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .jobs { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.job {
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.job img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.job__body { padding: 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.job__top { display: flex; align-items: center; gap: .7rem; }
.job__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--moss-soft); color: var(--moss); flex-shrink: 0; }
.job__ic svg { width: 20px; height: 20px; }
.job p { margin: .9rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.job__list { margin: 1.1rem 0 0; display: grid; gap: .45rem; }
.job__list li { font-size: .9rem; color: var(--ink-2); padding-inline-start: 1rem; position: relative; }
.job__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--wheat); }
.job__from { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.job__list { margin-bottom: 1.35rem; }
.job__from b { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.03em; color: var(--ink); }

/* --- Gallery -------------------------------------------------------------- */
.shots { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .shots { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
.shot figcaption { margin-top: .875rem; font-size: .9375rem; color: var(--ink-2); }

/* --- Split (about, generic) ----------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.split p { color: var(--ink-2); }

/* --- Stats ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.04em; color: var(--wheat); }
.stat span { display: block; margin-top: .3rem; font-size: .9375rem; }

/* --- Values / commitments ------------------------------------------------- */
.vals { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .vals { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.val { background: var(--white); border-radius: var(--r-md); padding: 1.4rem 1.5rem 1.6rem; border: 1px solid var(--line); }
.val h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.val p { margin: 0; font-size: .9375rem; color: var(--ink-2); }

/* --- Reviews -------------------------------------------------------------- */
/* Quotes only, first name and town. No stars and no AggregateRating: a sample
   business must not carry invented ratings, and neither must a customer demo. */
.words { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .words { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.word { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--shadow); }
.word blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.word figcaption { margin-top: auto; padding-top: 1.1rem; font-size: .875rem; color: var(--ink-3); }

/* --- Steps / how it goes -------------------------------------------------- */
.flow { display: grid; gap: 1.25rem; counter-reset: fl; }
@media (min-width: 640px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.flow li { counter-increment: fl; padding-top: 1.1rem; border-top: 2px solid var(--on-moss-line); }
.flow li::before { content: "0" counter(fl); display: block; margin-bottom: .6rem; font-family: var(--f-display); font-weight: 700; font-size: .875rem; color: var(--wheat); }
.flow h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.flow p { margin: 0; font-size: .9375rem; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 0; }
.faq li { padding-block: 1.4rem; border-top: 1px solid var(--line); }
.faq li:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.faq p { margin: 0; color: var(--ink-2); font-size: .9375rem; }

/* --- End CTA -------------------------------------------------------------- */
.endcta { text-align: center; }
.endcta .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.endcta p { max-width: 40rem; }

/* --- Form ----------------------------------------------------------------- */
.formgrid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .formgrid { grid-template-columns: 1fr 21rem; gap: 3.5rem; } }
.form { display: grid; gap: 1.125rem; }
@media (min-width: 700px) { .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.field textarea { min-height: 140px; resize: vertical; }
.field :focus { border-color: var(--moss); outline: none; box-shadow: 0 0 0 3px var(--moss-soft); }
.formnote { font-size: .875rem; color: var(--ink-3); }
.demo-notice {
  margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  background: var(--wheat-soft); font-size: .875rem; color: #6b4a0e;
}
.aside { display: grid; gap: 0; }
.aside > div { padding-block: 1.15rem; border-top: 1px solid var(--line); }
.aside > div:last-child { border-bottom: 1px solid var(--line); }
.aside h3 { font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: .45rem; letter-spacing: .02em; }
.aside a { font-size: 1.0625rem; font-weight: 600; }
.aside p { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px dashed var(--line); font-size: .9375rem; }

/* --- Footer --------------------------------------------------------------- */
.foot { background: var(--moss); color: var(--on-moss-mute); padding-block: 3.25rem 7rem; }
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3.25rem; } }
.foot h4 { font-family: var(--f-body); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-moss); font-weight: 600; margin-bottom: .9rem; }
.foot a { color: var(--on-moss); }
.foot li { margin-bottom: .5rem; }
.foot .brand__name { color: var(--on-moss); font-size: 1.3rem; }
.foot .hours div { border-bottom-color: var(--on-moss-line); }
.foot__legal { margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--on-moss-line); font-size: .8125rem; }
.foot__sample { color: var(--on-moss); }

/* --- TrueBuilt demo bar (identical behaviour to the kit) ------------------- */
.demo-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #14243a; color: #f5f2ec; border-top: 2px solid #e8752a;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.demo-bar__in {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .625rem;
  max-width: var(--wrap); margin-inline: auto; padding: .5rem 1.25rem;
  font-size: .8125rem; line-height: 1.3;
}
.demo-bar__txt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-bar__cta { margin-inline-start: auto; }
.demo-bar__pre, .demo-bar__long { display: none; }
@media (min-width: 560px) { .demo-bar__pre { display: inline; } }
@media (min-width: 860px) { .demo-bar__long { display: inline; } }
.demo-bar__txt b { color: #fff; }
.demo-bar__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 .75rem; border-radius: 8px; white-space: nowrap;
  background: #c2410c; color: #fff; font-weight: 600; font-size: .8125rem;
}
.demo-bar__cta:hover { background: #9a3412; text-decoration: none; }
.demo-bar__close {
  flex-shrink: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px; margin-inline-end: -.375rem;
  color: #9fb2c8; font-size: 1.125rem; cursor: pointer;
}
.demo-bar__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.demo-bar__x { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.demo-bar__x:checked ~ .demo-bar { display: none; }
.demo-bar__restore {
  display: none; position: fixed; right: 14px; bottom: 14px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: #14243a; border: 2px solid #e8752a; color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); align-items: center; justify-content: center;
}
.demo-bar__restore svg { width: 22px; height: 22px; }
.demo-bar__x:checked ~ .demo-bar__restore { display: inline-flex; }
/* ⚠️ Musí ostať ZA pravidlami vyššie — médiá nezvyšujú špecificitu, rozhoduje poradie. */
@media (max-width: 359px) {
  .demo-bar__in { font-size: .75rem; gap: .5rem; padding-inline: 1rem; }
  .demo-bar__cta { padding-inline: .5rem; font-size: .75rem; min-height: 34px; }
}
@media (min-width: 700px) {
  .demo-bar__in { font-size: .875rem; padding-inline: 2rem; gap: .875rem; }
  .demo-bar__cta { min-height: 40px; padding-inline: 1rem; }
}

/* --- Larkmoor Lawn & Landscape overrides --- */
:root {
  --moss: #26472f;
  --moss-2: #1b3623;
  --moss-soft: rgba(38, 71, 47, .08);
  --on-moss: #eff3ea;
  --on-moss-mute: #a9c0ae;
  --on-moss-line: rgba(239, 243, 234, .18);
  --wheat: #d9a441;
  --wheat-2: #a97c22;
  --wheat-soft: rgba(217, 164, 65, .16);
  --hero-focus: center;
}