/* Fieldstone Lawn & Landscape — demo site styles. Direction: "Front Porch".
   Desktop first: base rules are the 1440 design. Then
     @media (max-width: 1099px)  tablet (designed at 834, checked at 1024)
     @media (max-width: 699px)   phone  (designed at 390, checked at 360)
   Tablet and phone rules sit at the end of the file, grouped by component. */

:root {
  /* Color, by role */
  --ground: #FBF6EA;        /* warm cream page */
  --surface: #FFFFFF;       /* cards, the plan builder */
  --sand: #F3EAD3;          /* alternate band, chips, segmented tracks */
  --meadow: #E4EED6;        /* soft green panels */
  --meadow-2: #F2F7EA;      /* selected tiles */
  --ink: #1E3324;           /* text, deep forest-black */
  --ink-soft: #4F6352;      /* secondary text, 6.0:1 on cream */
  --line: #E3DAC6;          /* hairlines on cream */
  --tile-line: #D6CDB6;     /* tile outlines (decorative) */
  --field-line: #7D8B7E;    /* field borders, 3.5:1 on white */
  --accent: #2E7A33;        /* fresh green: every action */
  --accent-2: #3B8A3F;      /* second mower stripe */
  --accent-dk: #24622A;     /* hover, green text on sand/meadow */
  --on-accent: #FFFFFF;
  --butter: #F4C84A;        /* highlights */
  --butter-dk: #D9A21B;     /* stars */
  --butter-soft: #FBEBB4;
  --forest: #1D4A2B;        /* dark bands */
  --forest-2: #235735;      /* second stripe on dark bands */
  --forest-3: #163B22;      /* footer base */
  --on-dark: #FBF6EA;
  --on-dark-soft: #C3D5BD;

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Layout */
  --max: 1240px;
  --gutter: 40px;
  --section: 128px;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(30, 51, 36, .06), 0 18px 40px -22px rgba(30, 51, 36, .35);
}

@media (max-width: 1099px) {
  :root { --gutter: 32px; --section: 96px; }
}
@media (max-width: 699px) {
  :root { --gutter: 20px; --section: 64px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.site { background: var(--ground); overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
.ph { overflow: hidden; background: var(--meadow); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.03); }

/* Arches: horizontal radius 50% of the width; --av is the vertical radius as a share of the
   height, so a frame of width w and height h gets a true half-circle top when --av = (w/2)/h. */
.arch { border-radius: 50% 50% 22px 22px / var(--av, 36%) var(--av, 36%) 22px 22px; }

/* ---------------------------------------------------------------- type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); margin-bottom: 18px; }
.eyebrow--butter { color: var(--butter); }
.eyebrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(46, 122, 51, .16); }
.h2 { font-family: var(--font-display); font-size: 60px; line-height: 1.0; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.h2--cream { color: var(--on-dark); }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink-soft); }
.sub-h { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.tag--green { background: var(--meadow); color: var(--accent-dk); }
.link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font-weight: 700; font-size: 16px; color: var(--accent-dk); text-decoration: none; }
.link .icon { width: 18px; height: 18px; }

/* The hand-drawn butter underline: one per key heading. */
.hl { position: relative; z-index: 0; white-space: nowrap; }
.scribble { position: absolute; left: -3%; bottom: -0.04em; width: 106%; height: .34em; z-index: -1; overflow: visible; }
.scribble path { fill: none; stroke: var(--butter); stroke-width: 13px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.stars { display: inline-flex; gap: 2px; color: var(--butter-dk); }
.stars .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn .icon { width: 20px; height: 20px; }
.btn--big { height: 60px; padding: 0 30px; font-size: 18px; }
.btn--wide { width: 100%; }
.btn--green { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.btn--green:hover, .btn--green.is-hover { background: var(--accent-dk); }
.btn--green:focus-visible, .btn--green.is-focus { outline: 3px solid var(--butter); outline-offset: 3px; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line .icon { color: var(--accent); }
.btn--line:hover, .btn--line.is-hover { background: var(--ink); color: var(--on-dark); }
.btn--butter { background: var(--butter); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn--butter:hover, .btn--butter.is-hover { background: #FFD766; }
.btn--cream-line { background: transparent; color: var(--on-dark); border-color: rgba(251, 246, 234, .55); }
.btn--cream-line .icon { color: var(--butter); }
.btn--cream-line:hover, .btn--cream-line.is-hover { border-color: var(--on-dark); background: rgba(251, 246, 234, .08); }
.btn[disabled], .btn.is-disabled { background: #D9D3C3; color: #4E4D44; box-shadow: none; cursor: not-allowed; }

/* ---------------------------------------------------------------- header: floating pill */
.site-header { position: relative; z-index: 30; padding: 18px var(--gutter) 0; }
.pillnav { display: flex; align-items: center; gap: 4px; max-width: var(--max); margin: 0 auto; height: 76px; padding: 0 12px 0 14px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; min-height: 44px; }
.logo__mark { width: 46px; height: 46px; }
.logo__word { display: flex; flex-direction: column; line-height: 1; }
.logo__word b { font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.03em; }
.logo__word small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
.logo--cream { color: var(--on-dark); }
.logo--cream .logo__word small { color: var(--on-dark-soft); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 10px 14px; border-radius: 999px; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--ink); }
.nav a:hover { background: var(--sand); }
.pillnav__phone { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; margin: 0 14px 0 18px; font-weight: 700; font-size: 17px; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pillnav__phone .icon { width: 20px; height: 20px; color: var(--accent); }
.pillnav__cta { height: 54px; }
.hdr-call, .hdr-menu { display: none; }

/* ---------------------------------------------------------------- 1 · hero */
.hero { padding: 48px 0 104px; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; }
.hero__eyebrow { margin-bottom: 22px; }
.hero__title { font-family: var(--font-display); font-size: 94px; line-height: .94; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.hero__sub { margin-top: 28px; max-width: 33em; font-size: 21px; line-height: 1.5; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.proof { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 40px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof li > .icon { width: 20px; height: 20px; color: var(--accent); }
.proof .stars { margin-right: 2px; }

.hero__art { position: relative; height: 720px; }
.sun { position: absolute; top: 4px; right: 0; width: 290px; height: 290px; border-radius: 50%; background: var(--butter); }
.sun::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 2px dashed rgba(30, 51, 36, .18); }
.hero__photo { position: absolute; left: 62px; top: 40px; width: 460px; height: 664px; --av: 34.6%; box-shadow: var(--shadow); }
.hero__photo img { object-position: 50% 62%; }
.hero__inset { position: absolute; right: -6px; bottom: 26px; width: 196px; height: 196px; border-radius: 50%; border: 8px solid var(--ground); box-shadow: var(--shadow); }
.hero__inset img { object-position: 52% 38%; }
.price-card { position: absolute; left: -18px; top: 318px; width: 272px; padding: 20px 22px 20px; background: var(--surface); border-radius: 22px; box-shadow: 0 2px 4px rgba(30, 51, 36, .06), 0 24px 48px -20px rgba(30, 51, 36, .45); }
.price-card__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); }
.price-card__price { font-family: var(--font-display); font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-card__price small { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
.price-card__line { font-size: 15px; line-height: 1.45; color: var(--ink-soft); margin-top: 10px; }

/* ---------------------------------------------------------------- mower-stripe dark bands */
.stripes-dark { background-color: var(--forest); background-image: repeating-linear-gradient(100deg, var(--forest) 0 150px, var(--forest-2) 150px 300px); color: var(--on-dark); }

/* ---------------------------------------------------------------- 2 · plan builder */
.plan { padding: 120px 0; }
.plan__grid { display: grid; grid-template-columns: 390px 1fr; gap: 64px; align-items: start; }
.plan__intro { padding-top: 24px; }
.plan__intro .h2 { font-size: 58px; }
.plan__lead { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--on-dark-soft); }
.next { margin-top: 36px; position: relative; }
.next::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; border-left: 2px dashed rgba(244, 200, 74, .45); }
.next li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 10px 0; }
.next__n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--butter); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 19px; display: grid; place-items: center; }
.next b { display: block; font-size: 18px; color: var(--on-dark); line-height: 1.3; padding-top: 1px; }
.next span:not(.next__n) { display: block; font-size: 16px; color: var(--on-dark-soft); line-height: 1.45; }
.plan__fine { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15.5px; color: var(--on-dark-soft); }
.plan__fine .icon { color: var(--butter); width: 22px; height: 22px; }
.sample-text { margin-top: 30px; padding: 18px 18px 20px; border-radius: 26px; background: rgba(9, 30, 16, .34); border: 1px solid rgba(251, 246, 234, .12); }
.sample-text__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--on-dark-soft); margin-bottom: 12px; }
.sample-text__top .sample-text__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--butter); }
.bubble { max-width: 92%; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--surface); color: var(--ink); font-size: 15.5px; line-height: 1.45; }
.bubble ul { margin: 10px 0; padding: 8px 0; border-top: 1px dashed var(--tile-line); border-bottom: 1px dashed var(--tile-line); }
.bubble li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.bubble li b { font-variant-numeric: tabular-nums; }
.bubble--me { margin: 10px 0 0 auto; width: max-content; max-width: 70%; border-radius: 20px 20px 6px 20px; background: var(--butter); font-weight: 700; }

.builder { position: relative; background: var(--surface); color: var(--ink); border-radius: 32px; padding: 36px 44px 0; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .55); overflow: hidden; }
.steps { display: flex; gap: 8px; }
.steps li em { font-style: normal; }
.steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 999px; background: var(--sand); font-size: 15px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.steps li span { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 14px; color: var(--ink); }
.steps__1, .quote-step-2 .steps__2, .quote-sent .steps__3 { background: var(--forest) !important; color: var(--on-dark) !important; }
.steps__1 span, .quote-step-2 .steps__2 span, .quote-sent .steps__3 span { background: var(--butter) !important; }
.quote-step-2 .steps__1, .quote-sent .steps__1, .quote-sent .steps__2 { background: var(--meadow) !important; color: var(--accent-dk) !important; }
.quote-step-2 .steps__1 span, .quote-sent .steps__1 span, .quote-sent .steps__2 span { background: var(--accent) !important; color: var(--on-accent); }

.field-group { margin-top: 30px; }
.field-group legend, .field legend { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 14px; line-height: 1.2; }
.field-group legend span, .field label span, .field legend span { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); margin-left: 6px; }
.hint { font-size: 15px; color: var(--ink-soft); margin-top: 10px; }

.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.size { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 16px 16px; border: 2px solid var(--tile-line); border-radius: 18px; cursor: pointer; background: var(--surface); }
.size__lot { width: 72px; height: 52px; margin-bottom: 10px; }
.size__lot .lot { fill: var(--meadow); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.size__lot .house { fill: var(--ink); }
.size__lot .tree { fill: var(--accent); }
.size b { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.size span { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.size em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--accent-dk); margin-top: 6px; line-height: 1.3; }
.size.is-on { border-color: var(--accent); background: var(--meadow-2); box-shadow: 0 0 0 4px rgba(46, 122, 51, .14); }
.size__check, .svc__box { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.size__check .icon, .svc__box .icon { width: 15px; height: 15px; }
.size .size__check { color: var(--on-accent); margin: 0; }

.svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.svc { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 136px; padding: 16px 16px 16px; border: 2px solid var(--tile-line); border-radius: 18px; cursor: pointer; background: var(--surface); }
.svc__ic { width: 30px; height: 30px; color: var(--accent); margin-bottom: 12px; }
.svc b { font-size: 17px; font-weight: 700; line-height: 1.25; }
.svc span:not(.svc__box) { font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); margin-top: 3px; }
.svc__box { border-radius: 8px; background: var(--surface); border: 2px solid #B9B09A; }
.svc.is-on { border-color: var(--accent); background: var(--meadow-2); }
.svc.is-on .svc__box { background: var(--accent); border-color: var(--accent); }

.field-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px; }
.seg { display: flex; gap: 4px; padding: 5px; background: var(--sand); border-radius: 999px; }
.seg label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px; border-radius: 999px; font-size: 15.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.seg label.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(30, 51, 36, .18); }

.receipt { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 34px -44px 0; padding: 24px 44px 28px; background: var(--sand); border-top: 2px dashed var(--tile-line); }
.receipt__label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.receipt__label span { letter-spacing: 0; text-transform: none; font-size: 13px; background: var(--accent); color: var(--on-accent); padding: 2px 9px; border-radius: 999px; }
.receipt ul, .mini-plan ul, .done__card ul { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt li, .mini-plan li, .done__card li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; }
.receipt li::before, .mini-plan li::before, .done__card li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.receipt__go { flex: none; text-align: right; }
.receipt__note { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; }

.builder__step--2, .builder__done { display: none; }
.quote-step-2 .builder__step--1, .quote-sent .builder__step--1, .quote-sent .builder__step--2 { display: none; }
.quote-step-2 .builder__step--2 { display: block; }
.quote-sent .builder__done { display: block; }

.mini-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px; padding: 14px 18px; background: var(--meadow-2); border: 1px solid #CFE0BE; border-radius: 18px; }
.mini-plan .receipt__label { margin: 0; }
.mini-plan li { background: var(--surface); }
.mini-plan__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--accent-dk); text-decoration: none; min-height: 44px; }
.mini-plan__edit .icon { width: 18px; height: 18px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; margin-top: 26px; }
.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
.field > label { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.field legend { font-family: var(--font-body); font-size: 15.5px; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; height: 56px; padding: 0 16px; border: 1.5px solid var(--field-line); border-radius: 14px; background: var(--surface); font-size: 17px; color: var(--ink); appearance: none; }
.field textarea { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6F7C70; }
.field input:focus, .field select:focus, .field textarea:focus, .field .is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46, 122, 51, .18); }
.field.is-error input { border-color: #B3261E; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.field__err { font-size: 14.5px; font-weight: 600; color: #A12219; margin-top: 8px; }
.field .hint { margin-top: 8px; font-size: 14.5px; }
.field .seg { margin-top: 0; }
.select { position: relative; }
.select .icon { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.send { display: flex; align-items: center; gap: 24px; margin: 30px -44px 0; padding: 24px 44px 30px; background: var(--sand); border-top: 2px dashed var(--tile-line); }
.send .btn { width: auto; flex: none; }
.send__note { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink-soft); }
.send__note .icon { color: var(--accent); width: 22px; height: 22px; }

.builder__done { padding: 30px 0 44px; }
.done__badge { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px var(--meadow); }
.done__title { font-family: var(--font-display); font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin-top: 26px; max-width: 16em; }
.done__card { margin-top: 24px; padding: 18px 20px; background: var(--meadow-2); border: 1px solid #CFE0BE; border-radius: 20px; }
.done__steps { margin-top: 26px; display: grid; gap: 14px; }
.done__steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 17.5px; line-height: 1.45; }
.done__steps span { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.done__change { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-soft); }
.done__change a { color: var(--accent-dk); font-weight: 700; }

/* ---------------------------------------------------------------- shared section head */
.sec-head { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; margin-bottom: 40px; }
.sec-head__side { padding-bottom: 6px; }

/* ---------------------------------------------------------------- 3 · seasons (signature) */
.seasons { padding: var(--section) 0; }
.tabs { display: inline-flex; gap: 4px; padding: 6px; background: var(--sand); border-radius: 999px; margin-bottom: 22px; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.tab .icon { width: 20px; height: 20px; }
.tab--fall, .seasons-spring .tab--spring, .seasons-summer .tab--summer, .seasons-winter .tab--winter { background: var(--forest); color: var(--on-dark); }
.tab--fall .icon, .seasons-spring .tab--spring .icon, .seasons-summer .tab--summer .icon, .seasons-winter .tab--winter .icon { color: var(--butter); }
.seasons-spring .tab--fall, .seasons-summer .tab--fall, .seasons-winter .tab--fall { background: transparent; color: var(--ink-soft); }
.seasons-spring .tab--fall .icon, .seasons-summer .tab--fall .icon, .seasons-winter .tab--fall .icon { color: inherit; }

.chart { background: var(--surface); border-radius: 28px; padding: 26px 30px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.chart__grid { position: relative; display: grid; grid-template-columns: 196px repeat(24, minmax(0, 1fr)); grid-template-rows: 34px 48px repeat(8, 40px); row-gap: 6px; align-items: center; }
.chart__grid > * { position: relative; z-index: 1; }
.band { grid-row: 1 / -1; align-self: stretch; z-index: 0 !important; margin: -10px 0 -8px; border-radius: 18px; background: #EEF5E5; box-shadow: inset 0 0 0 2px #D5E6C5; }
.band--fall { grid-column: 18 / 24; }
.band--spring { grid-column: 6 / 12; }
.band--summer { grid-column: 12 / 18; }
.band--winter-a { grid-column: 2 / 6; }
.band--winter-b { grid-column: 24 / 26; }
.band--spring, .band--summer, .band--winter-a, .band--winter-b, .seasons-spring .band--fall, .seasons-summer .band--fall, .seasons-winter .band--fall { display: none; }
.seasons-spring .band--spring, .seasons-summer .band--summer, .seasons-winter .band--winter-a, .seasons-winter .band--winter-b { display: block; }
.chart__corner { grid-row: 1; grid-column: 1; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mo { grid-row: 1; grid-column: calc(var(--m) * 2) / span 2; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.mo--now { color: var(--ink); }
.mo--now em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--butter); color: var(--ink); padding: 2px 6px; border-radius: 999px; margin-left: 2px; vertical-align: 1px; }
.row-lbl { grid-column: 1; grid-row: var(--r); display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; color: var(--ink); padding-right: 12px; line-height: 1.2; }
.row-lbl .icon { width: 20px; height: 20px; color: var(--accent); }
.row-lbl--lawn { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.sw { grid-row: 2; grid-column: calc(var(--m) * 2) / span 2; height: 44px; margin: 0 3px; border-radius: 12px; background-color: var(--c); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 7px, rgba(255, 255, 255, 0) 7px 14px); }
.sw--now { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.bar { grid-row: var(--r); grid-column: var(--a) / var(--b); display: flex; align-items: center; height: 30px; margin: 0 3px; padding: 0 12px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--accent) 0 12px, var(--accent-2) 12px 24px); color: var(--on-accent); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.bar--light { background: repeating-linear-gradient(90deg, #D3E6C8 0 12px, #E0EED7 12px 24px); color: var(--accent-dk); }
.bar--alt { background: repeating-linear-gradient(90deg, #2D6A4C 0 12px, #367858 12px 24px); }
.track { grid-row: var(--r); grid-column: 2 / 26; height: 2px; margin: 0 8px; background: var(--line); }
.dot-v { grid-row: var(--r); grid-column: var(--a) / span 1; justify-self: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 30px; height: 14px; border-radius: 999px; }
.lg--bar { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, var(--accent-2) 6px 12px); }
.lg--light { background: repeating-linear-gradient(90deg, #D3E6C8 0 6px, #E0EED7 6px 12px); }
.lg--dot { width: 14px; border-radius: 50%; background: var(--accent); }
.lg--now { width: 14px; height: 14px; border-radius: 4px; background: #80A050; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.year-bar { display: none; }

.months-wrap { margin-top: 28px; }
.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 290px; gap: 20px; }
.months--spring, .months--summer, .months--winter, .seasons-spring .months--fall, .seasons-summer .months--fall, .seasons-winter .months--fall { display: none; }
.seasons-spring .months--spring, .seasons-summer .months--summer, .seasons-winter .months--winter { display: grid; }
.month { display: flex; flex-direction: column; padding: 26px 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.month--now { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(46, 122, 51, .1); }
.month__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.now-pill { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--butter); padding: 4px 10px; border-radius: 999px; }
.month__title { font-size: 18px; font-weight: 700; color: var(--accent-dk); margin-top: 6px; line-height: 1.3; }
.month__lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 0 8px; }
.month__do li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.45; margin-bottom: 8px; }
.month__do li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.month__you { margin-top: auto; padding: 14px 16px 16px; background: var(--butter-soft); border-radius: 16px; }
.month__you .month__lbl { margin: 0 0 4px; color: #6A5414; }
.month__you p:last-child { font-size: 15.5px; line-height: 1.45; }
.month__do { margin-bottom: 16px; }
.month__add { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15.5px; font-weight: 700; color: var(--accent-dk); text-decoration: none; min-height: 44px; }
.month__add .icon { width: 18px; height: 18px; }
.months__photo { --av: 30%; min-height: 100%; }
.months__photo img { object-position: 50% 60%; }

/* ---------------------------------------------------------------- 4 · services */
.services { padding: var(--section) 0; background: var(--surface); }
.mow { display: grid; grid-template-columns: 330px 1fr 400px; gap: 44px; align-items: center; padding: 26px; background: var(--ground); border-radius: 34px; }
.mow__photo { height: 420px; --av: 39%; }
.mow__photo img { object-position: 62% 50%; }
.mow__title { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin-top: 16px; }
.mow__line { font-size: 18px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }
.checks { margin-top: 22px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.4; }
.checks .icon { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.mow__prices { background: var(--surface); border-radius: 26px; padding: 24px 26px 22px; box-shadow: var(--shadow); }
.mow__th { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.ptable > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--tile-line); }
.ptable dt { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ptable dt small { display: block; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.ptable dd { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable dd.ptable__walk { font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--accent-dk); letter-spacing: 0; }
.mow__note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.mow__note .icon { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }

.svc-split { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; margin-top: 80px; }
.mlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 158px; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mlist li:first-child { border-top: 2px solid var(--ink); }
.mlist li > .icon { width: 28px; height: 28px; color: var(--accent); }
.mlist__txt b { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; }
.mlist__txt span { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.when { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: var(--sand); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.from { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mlist .from small:last-child:not(:first-child) { display: block; margin-top: 5px; }
.from small { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-top: 18px; border-top: 2px solid var(--ink); }
.pcard { display: flex; flex-direction: column; }
.pcard__photo { height: 170px; --av: 40%; margin-bottom: 14px; }
.pcard__art svg { width: 100%; height: 100%; }
.pcard b { font-size: 18px; font-weight: 700; line-height: 1.3; }
.pcard span { font-size: 15px; line-height: 1.45; color: var(--ink-soft); margin-top: 3px; }
.pcard .from { text-align: left; font-size: 24px; margin-top: 10px; }
.not-us { display: flex; align-items: center; gap: 12px; margin-top: 48px; padding: 16px 22px; border-radius: 18px; background: var(--ground); font-size: 16px; color: var(--ink-soft); }
.not-us .icon { width: 22px; height: 22px; color: var(--accent); }

/* ---------------------------------------------------------------- 5 · work */
.work { padding: 120px 0 128px; }
.sec-head--dark .sec-head__side { display: flex; justify-content: flex-end; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.proj { display: flex; flex-direction: column; }
.proj--a { grid-column: span 5; grid-row: span 2; }
.proj--b { grid-column: span 4; }
.proj--c { grid-column: span 3; }
.proj--d { grid-column: span 4; }
.proj--e { grid-column: span 3; }
.proj__photo { height: 270px; --av: 42%; }
.proj--a .proj__photo { flex: 1; min-height: 520px; --av: 30%; }
.proj--a .proj__photo img { object-position: 50% 60%; }
.proj--e .proj__photo img { object-position: 50% 45%; }
.proj__txt { margin-top: 18px; }
.proj__town { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--butter); }
.proj__town .icon { width: 16px; height: 16px; }
.proj__title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--on-dark); margin-top: 6px; }
.proj--a .proj__title { font-size: 32px; }
.proj__took { margin-top: 10px; }
.proj__took li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: var(--on-dark-soft); margin-bottom: 4px; }
.proj__took li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--butter); }
.proj__days { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(251, 246, 234, .22); background: rgba(251, 246, 234, .06); font-size: 14px; font-weight: 700; color: var(--on-dark); }
.proj__days .icon { width: 16px; height: 16px; color: var(--butter); }

/* ---------------------------------------------------------------- 6 · reviews */
.reviews { padding: var(--section) 0; }
.reviews__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.rating__h { font-size: 46px; }
.rating__card { margin-top: 30px; padding: 28px; background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); }
.rating__num { font-family: var(--font-display); font-size: 116px; font-weight: 800; letter-spacing: -0.05em; line-height: .86; font-variant-numeric: tabular-nums; }
.rating__meta { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.stars--big .icon { width: 24px; height: 24px; }
.bars { margin: 22px 0 18px; display: grid; gap: 8px; }
.bars > div { display: grid; grid-template-columns: 62px 1fr 34px; gap: 10px; align-items: center; font-size: 14.5px; }
.bars dt { color: var(--ink-soft); }
.bars dd:not(.bars__n) { height: 10px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.bars dd span { display: block; height: 100%; width: var(--w); min-width: 4px; border-radius: 999px; background: var(--accent); }
.bars__n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.feature-q { padding: 4px 0 34px; border-bottom: 2px solid var(--ink); }
.feature-q blockquote { font-family: var(--font-display); font-size: 40px; line-height: 1.14; font-weight: 600; letter-spacing: -0.025em; }
.feature-q figcaption { margin-top: 18px; font-size: 16px; color: var(--ink-soft); }
.feature-q figcaption b, .q figcaption b { color: var(--ink); margin-right: 6px; }
.qgrid { columns: 2; column-gap: 20px; margin-top: 30px; }
.q { break-inside: avoid; margin-bottom: 20px; padding: 24px 24px 22px; background: var(--surface); border-radius: 22px; border: 1px solid var(--line); }
.q blockquote { font-size: 17px; line-height: 1.55; }
.q figcaption { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.q figcaption b { display: block; font-size: 15.5px; }

/* ---------------------------------------------------------------- 7 · about */
.about { padding: var(--section) 0; background: var(--sand); }
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.about__photo { height: 620px; --av: 40%; }
.about__photo img { object-position: 70% 50%; }
.about__body .h2 { font-size: 56px; }
.about__p { margin-top: 20px; font-size: 18px; line-height: 1.65; max-width: 36em; }
.about__body .h2 + .about__p { margin-top: 24px; }
.owner-q { position: relative; margin-top: 30px; padding: 26px 28px 24px 30px; background: var(--surface); border-radius: 24px; border-left: 0; }
.owner-q blockquote { font-family: var(--font-display); font-size: 25px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.owner-q figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.crew { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; margin-top: 30px; }
.crew li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.crew .icon { width: 24px; height: 24px; color: var(--accent); }
.stats { display: flex; gap: 44px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #D9CCAA; }
.stats dt { font-family: var(--font-display); font-size: 50px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats dd { font-size: 15px; color: var(--ink-soft); margin-top: 6px; }
.about__community { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 16px; color: var(--ink-soft); }
.about__community .icon { width: 22px; height: 22px; color: var(--accent); }

/* ---------------------------------------------------------------- 8 · area */
.area { padding: var(--section) 0; background: var(--surface); }
.area__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: center; }
.map { position: relative; }
.map__box { border-radius: 34px; overflow: hidden; background: #EEF3E2; }
.map__svg { width: 100%; height: auto; }
.map__region { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .3em; fill: #8A9A82; }
.map__state { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; fill: #8A9A82; }
.town circle { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.town text { font-family: var(--font-body); font-size: 15px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #EEF3E2; stroke-width: 4px; stroke-linejoin: round; }
.town.t-mon circle { fill: #2E7A33; }
.town.t-tue circle { fill: #D9A21B; }
.town.t-wed circle { fill: #1D4A2B; }
.town.t-thu circle { fill: #7FB069; }
.town.t-fri circle { fill: #9A6A3A; }
.k { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(30, 51, 36, .2); flex: none; }
.k.t-mon { background: #2E7A33; }
.k.t-tue { background: #D9A21B; }
.k.t-wed { background: #1D4A2B; }
.k.t-thu { background: #7FB069; }
.k.t-fri { background: #9A6A3A; }
.map__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.map__key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 700; }
.map__key li { display: inline-flex; align-items: center; gap: 6px; }
.map__open { height: 48px; font-size: 16px; }
.week { margin-top: 30px; border-top: 2px solid var(--ink); }
.week li { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.week__day { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.week__day .icon { width: 18px; height: 18px; color: var(--ink-soft); }
.week__towns { font-size: 16.5px; line-height: 1.45; }
.week__sat .week__towns { color: var(--ink-soft); }
.area__body .lead { margin-top: 22px; }
.area__note { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 9 · faq */
.faq { padding: var(--section) 0; }
.faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
.faq__side .h2 { font-size: 50px; }
.ask { margin-top: 34px; background: var(--surface); border-radius: 28px; padding: 12px; box-shadow: var(--shadow); }
.ask__photo { height: 230px; --av: 50%; }
.ask__photo img { object-position: 50% 70%; }
.ask__body { padding: 18px 14px 14px; }
.ask__title { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -0.015em; }
.ask__body p:not(.ask__title) { font-size: 16px; color: var(--ink-soft); margin: 4px 0 16px; }
.fgroup { display: grid; grid-template-columns: 190px 1fr; column-gap: 24px; padding: 6px 0 14px; border-top: 2px solid var(--ink); }
.fgroup > .qa { grid-column: 2; }
.fgroup__lbl { grid-column: 1; grid-row: 1 / span 6; }
.fgroup + .fgroup { margin-top: 18px; }
.fgroup__lbl { padding-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); }
.qa { border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--sand); color: var(--accent-dk); transition: transform .2s, background-color .2s; }
.qa[open] summary .icon { background: var(--accent); color: var(--on-accent); }
.qa[open] summary .icon > * { transform: rotate(45deg); transform-origin: center; transform-box: fill-box; }
.qa:not([open]) > p { display: none; }
.qa p { padding: 0 48px 22px 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 40em; }

/* ---------------------------------------------------------------- footer */
.close { padding: 104px 0; }
.close__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
.close__h { font-family: var(--font-display); font-size: 78px; line-height: .98; font-weight: 800; letter-spacing: -0.045em; color: var(--on-dark); }
.close__p { margin-top: 22px; font-size: 20px; line-height: 1.55; color: var(--on-dark-soft); max-width: 30em; }
.close__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.close__photo { height: 400px; --av: 30%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.close__photo img { object-position: 50% 60%; }
.foot { background: var(--forest-3); color: var(--on-dark); padding: 72px 0 44px; }
.foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 48px; }
.foot__brand p { font-size: 16px; line-height: 1.55; color: var(--on-dark-soft); margin-top: 18px; max-width: 22em; }
.foot__contact { display: grid; gap: 0; }
.foot__contact span { margin: -6px 0 6px; }
.foot__contact a { color: var(--on-dark); font-weight: 700; text-decoration: none; font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }
.foot__contact span { font-size: 15px; color: var(--on-dark-soft); }
.foot__h { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--butter); margin-bottom: 14px; }
.foot__list { display: grid; gap: 4px; }
.foot__list li { font-size: 15.5px; color: var(--on-dark-soft); line-height: 1.5; }
.foot__list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--on-dark-soft); }
.foot__list:has(a) { gap: 0; }
.foot__list a:hover { color: var(--on-dark); }
.foot__list--cols { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 56px; padding-top: 24px; background: linear-gradient(rgba(251, 246, 234, .14), rgba(251, 246, 234, .14)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: 14.5px; color: var(--on-dark-soft); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--on-dark-soft); }
.foot__legal { align-items: center; }
.demo-note { flex-basis: 100%; font-size: 14.5px; color: var(--on-dark-soft); }

/* ---------------------------------------------------------------- fixed extras: phone tab bar, menu overlay */
.tabbar, .menu { display: none; }
.menu { position: fixed; }

/* phone-only pieces, styled here so the brand sheet can show them (shown at phone width below) */
.year-bar { --i: 8; --cw: calc((100% - 28px - 33px) / 12); position: relative; padding: 16px 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.seasons-spring .year-bar { --i: 2; }
.seasons-summer .year-bar { --i: 5; }
.seasons-winter .year-bar { --i: 0; }
.year-bar__bracket--b { display: none; }
.seasons-winter .year-bar__bracket { width: calc(2 * var(--cw) + 13px); }
.seasons-winter .year-bar__bracket--b { display: block; left: calc(14px + 11 * (var(--cw) + 3px) - 5px); width: calc(var(--cw) + 10px); }
.year-bar__sw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.year-bar__sw span { height: 44px; border-radius: 8px; background-color: var(--c); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 4px, rgba(255, 255, 255, 0) 4px 8px); }
.year-bar__mo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 10px; font-size: 12px; font-weight: 700; text-align: center; color: var(--ink-soft); }
.year-bar__mo span { line-height: 22px; border-radius: 999px; }
.year-bar__mo span:nth-child(10) { background: var(--butter); color: var(--ink); }
.year-bar__bracket { position: absolute; top: 10px; height: 56px; left: calc(14px + var(--i) * (var(--cw) + 3px) - 5px); width: calc(3 * var(--cw) + 16px); border: 3px solid var(--ink); border-radius: 13px; }
.year-bar__cap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.tabbar { grid-template-columns: repeat(5, 1fr); padding: 8px 6px 16px; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(30, 51, 36, .45); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; text-decoration: none; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.tabbar__item .icon { width: 54px; height: 30px; padding: 3px 15px; border-radius: 999px; }
.tabbar__item.is-on { color: var(--accent-dk); }
.tabbar__item.is-on .icon { background: var(--meadow); }
.tabbar__call { color: var(--accent-dk); }
.tabbar__call .icon { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------------- brand sheet only (brand.html) */

/* =====================================================================================
   TABLET (designed at 834, checked at 1024)
   ===================================================================================== */
@media (max-width: 1099px) {
  .h2 { font-size: 46px; }
  .lead { font-size: 18px; }
  .sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .sec-head__side { max-width: 36em; }

  /* header: links fold into the menu button */
  .site-header { padding-top: 14px; }
  .pillnav { height: 68px; padding: 0 10px 0 12px; }
  .nav { display: none; }
  .pillnav__phone { margin-left: auto; }
  .pillnav__cta { height: 48px; }
  .hdr-menu { display: grid; place-items: center; width: 48px; height: 48px; margin-left: 8px; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); }
  .hdr-menu .icon { width: 24px; height: 24px; }

  /* hero: a centered poster, the arch below */
  .hero { padding: 48px 0 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__copy { text-align: center; max-width: 720px; margin: 0 auto; }
  .hero__eyebrow { justify-content: center; }
  .hero__title { font-size: 68px; }
  .hero__sub { margin: 22px auto 0; font-size: 19px; max-width: 32em; }
  .hero__actions, .proof { justify-content: center; }
  .proof { margin: 28px auto 0; gap: 10px 22px; max-width: 620px; }
  .hero__art { width: 100%; max-width: 640px; height: 600px; margin: 0 auto; }
  .sun { top: 0; right: 40px; width: 230px; height: 230px; }
  .hero__photo { left: 130px; top: 22px; width: 400px; height: 572px; --av: 35%; }
  .price-card { left: 0; top: 290px; width: 250px; padding: 18px 20px; }
  .price-card__price { font-size: 46px; }
  .hero__inset { right: 30px; bottom: 6px; width: 168px; height: 168px; }

  /* plan builder: intro on top, form full width */
  .plan { padding: 88px 0; }
  .plan__grid { grid-template-columns: 1fr; gap: 40px; }
  .plan__intro { padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
  .plan__intro > .eyebrow, .plan__intro > .h2, .plan__intro > .plan__lead { grid-column: 1 / -1; }
  .plan__intro .h2 { font-size: 46px; max-width: 13em; }
  .plan__lead { max-width: 34em; }
  .next { grid-column: 1; margin-top: 26px; }
  .sample-text { grid-column: 2; grid-row: 4 / span 2; margin-top: 30px; }
  .plan__fine { grid-column: 1; }
  .builder { padding: 30px 32px 0; }
  .receipt, .send { margin-inline: -32px; padding-inline: 32px; }

  /* seasons chart: tighter label column; short labels still fit */
  .chart { padding: 22px 20px 18px; }
  .chart__grid { grid-template-columns: 140px repeat(24, minmax(0, 1fr)); grid-template-rows: 30px 48px repeat(8, 38px); }
  .row-lbl { font-size: 14px; gap: 8px; padding-right: 8px; }
  .row-lbl .icon { width: 18px; height: 18px; }
  .row-lbl--lawn { font-size: 13px; }
  .mo { font-size: 13.5px; }
  .mo--now em { display: none; }
  .sw { height: 42px; margin: 0 2px; border-radius: 10px; }
  .bar { height: 28px; margin: 0 2px; padding: 0 7px; font-size: 12.5px; }
  .tab { padding: 0 18px; }
  .months { grid-template-columns: 1fr 1fr; gap: 16px; }
  .months__photo { min-height: 320px; }

  /* services */
  .mow { grid-template-columns: 250px 1fr; gap: 28px 32px; padding: 22px; }
  .mow__photo { height: 340px; }
  .mow__title { font-size: 38px; }
  .mow__prices { grid-column: 1 / -1; }
  .svc-split { grid-template-columns: 1fr; gap: 56px; margin-top: 64px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .pcard__photo { height: 220px; --av: 36%; }

  /* work: lead project full width, then pairs */
  .work { padding: 88px 0 96px; }
  .sec-head--dark .sec-head__side { justify-content: flex-start; }
  .mosaic { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .proj--a { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: end; }
  .proj--b, .proj--c, .proj--d, .proj--e { grid-column: auto; }
  .proj--a .proj__photo { min-height: 0; height: 440px; flex: none; --av: 42%; }
  .proj--a .proj__txt { padding-bottom: 6px; }
  .proj__photo { height: 250px; }

  /* reviews: rating row on top */
  .reviews__grid { grid-template-columns: 1fr; gap: 48px; }
  .rating { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
  .rating > .eyebrow, .rating > .rating__h { grid-column: 1; }
  .rating__h { font-size: 44px; }
  .rating__card { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .rating__num { font-size: 92px; }
  .feature-q blockquote { font-size: 34px; }

  /* about: wide arch above the story */
  .about__grid { grid-template-columns: 1fr; gap: 44px; }
  .about__photo { height: 440px; --av: 46%; }
  .about__photo img { object-position: 50% 8%; }
  .about__body .h2 { font-size: 46px; }

  /* area: heading and routes first, then the map */
  .area__grid { grid-template-columns: 1fr; gap: 40px; }
  .area__body { order: -1; }

  /* faq */
  .faq__grid { grid-template-columns: 1fr; gap: 48px; }
  .faq__side { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
  .faq__side > .eyebrow, .faq__side > .h2 { grid-column: 1; }
  .faq__side .h2 { font-size: 44px; }
  .ask { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .ask__photo { height: 170px; }
  .fgroup { grid-template-columns: 150px 1fr; }

  /* close and footer */
  .close { padding: 80px 0; }
  .close__grid { grid-template-columns: 1.25fr 1fr; gap: 36px; }
  .close__h { font-size: 56px; }
  .close__p { font-size: 18px; }
  .close__photo { height: 380px; --av: 40%; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot__list:has(a) { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}


/* ---------------------------------------------------------------- menu overlay (tablet sheet, phone full screen) */
@media (max-width: 1099px) {
  .is-menu-open .menu { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 440px; z-index: 60; padding: 14px 24px 28px; background: var(--ground); overflow-y: auto; box-shadow: 0 0 0 4000px rgba(16, 32, 21, .5); }
  .menu__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 8px 0 12px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); }
  .menu__top .logo__mark { width: 40px; height: 40px; }
  .menu__top .logo__word b { font-size: 22px; }
  .menu__top .logo__word small { font-size: 12px; }
  .menu__close { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--forest); color: var(--on-dark); }
  .menu__close .icon { width: 22px; height: 22px; }
  .menu__list { margin-top: 18px; }
  .menu__list a { display: flex; align-items: center; justify-content: space-between; min-height: 62px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; text-decoration: none; color: var(--ink); }
  .menu__list a .icon { width: 22px; height: 22px; color: var(--accent); }
  .menu__list li:first-child a { color: var(--accent-dk); }
  .menu__actions { display: grid; gap: 10px; margin-top: 26px; }
  .menu__foot { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
  .menu__foot li { display: flex; align-items: center; gap: 10px; }
  .menu__foot li > .icon { width: 20px; height: 20px; color: var(--accent); }
  .menu__foot .stars .icon { width: 14px; height: 14px; }
}

/* =====================================================================================
   PHONE (designed at 390, checked at 360)
   ===================================================================================== */
@media (max-width: 699px) {
  body { font-size: 17px; }
  .h2 { font-size: 36px; line-height: 1.02; }
  .lead { font-size: 17px; }
  .eyebrow { font-size: 12px; letter-spacing: .1em; margin-bottom: 14px; }
  .sec-head { gap: 14px; margin-bottom: 26px; }
  .btn { height: 52px; font-size: 16.5px; }
  .btn--big { height: 56px; padding: 0 22px; font-size: 17px; }

  /* header: logo, call, menu */
  .site-header { padding: 12px 12px 0; }
  .pillnav { height: 62px; padding: 0 7px 0 10px; gap: 6px; }
  .logo { gap: 9px; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__word b { font-size: 21px; }
  .logo__word small { font-size: 12px; letter-spacing: .08em; margin-top: 3px; }
  .hide-sm { display: none; }
  .pillnav__phone, .pillnav__cta { display: none; }
  .hdr-call { display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
  .hdr-call .icon { width: 22px; height: 22px; }
  .hdr-menu { margin-left: 0; }

  /* hero */
  .hero { padding: 30px 0 56px; }
  .hero__grid { gap: 30px; }
  .hero__copy { text-align: left; }
  .hero__eyebrow { justify-content: flex-start; font-size: 12.5px; margin-bottom: 16px; }
  .hero__title { font-size: 48px; line-height: .95; letter-spacing: -0.04em; }
  .hero__sub { margin: 18px 0 0; font-size: 17px; line-height: 1.5; }
  .hero__actions { flex-direction: column; gap: 10px; margin-top: 24px; }
  .hero__actions .btn { width: 100%; }
  .proof { justify-content: flex-start; gap: 10px 16px; margin: 22px 0 0; font-size: 15px; }
  .proof li:first-child { flex-basis: 100%; }
  .proof li:nth-child(4) { display: none; }
  .proof li > .icon { width: 18px; height: 18px; }
  .stars .icon { width: 15px; height: 15px; }
  .hero__art { height: 470px; max-width: none; }
  .sun { top: 0; right: -8px; width: 150px; height: 150px; }
  .sun::after { inset: 16px; }
  .hero__photo { left: 22px; right: 22px; top: 16px; width: auto; height: 450px; --av: 34%; }
  .price-card { left: -4px; top: auto; bottom: 34px; width: auto; padding: 14px 16px; border-radius: 18px; }
  .price-card__label { font-size: 12px; }
  .price-card__price { font-size: 36px; margin-top: 4px; }
  .price-card__price small { font-size: 13.5px; }
  .price-card__line { display: none; }
  .hero__inset { right: -4px; bottom: 0; width: 118px; height: 118px; border-width: 6px; }

  /* plan builder: the form comes right after the heading */
  .plan { padding: 64px 0 56px; }
  .plan__grid { display: flex; flex-direction: column; gap: 0; }
  .plan__intro { display: contents; }
  .plan__intro .h2 { font-size: 36px; }
  .plan__lead { font-size: 16.5px; margin-top: 16px; }
  .builder { order: 1; margin-top: 26px; padding: 18px 16px 0; border-radius: 26px; }
  .next { order: 2; margin-top: 40px; }
  .sample-text { order: 3; margin-top: 22px; }
  .plan__fine { order: 4; font-size: 15px; }
  .steps { gap: 6px; }
  .steps li { flex: none; width: 42px; padding: 7px; justify-content: center; gap: 0; font-size: 15px; }
  .steps li em { display: none; }
  .steps__1, .quote-step-2 .steps__2, .quote-sent .steps__3 { flex: 1 !important; width: auto !important; justify-content: flex-start !important; gap: 10px !important; }
  .site:not(.quote-step-2):not(.quote-sent) .steps__1 em, .quote-step-2 .steps__2 em, .quote-sent .steps__3 em { display: inline; }
  .quote-step-2 .steps__1, .quote-sent .steps__1, .quote-sent .steps__2 { flex: none !important; width: 42px !important; gap: 0 !important; justify-content: center !important; }
  .field-group { margin-top: 24px; }
  .field-group legend { font-size: 19px; margin-bottom: 12px; }
  .hint, .field .hint { font-size: 15px; }
  .field-group legend span { white-space: nowrap; }
  .sizes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .size { padding: 12px 14px 14px; border-radius: 16px; }
  .size__lot { width: 58px; height: 42px; margin-bottom: 6px; }
  .size b { font-size: 19px; }
  .size span { font-size: 14px; }
  .size em { font-size: 12.5px; }
  .svcs { grid-template-columns: 1fr; gap: 8px; }
  .svc { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; min-height: 64px; padding: 11px 54px 11px 14px; border-radius: 16px; }
  .svc__ic { grid-row: 1 / span 2; width: 26px; height: 26px; margin: 0; }
  .svc b { font-size: 16px; }
  .svc span:not(.svc__box) { font-size: 13.5px; margin-top: 0; }
  .svc__box { top: 50%; right: 14px; transform: translateY(-50%); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .seg { padding: 4px; }
  .seg label { min-height: 44px; padding: 0 6px; font-size: 14px; }
  .receipt { display: block; margin: 26px -16px 0; padding: 18px 16px 20px; }
  .receipt li, .mini-plan li, .done__card li { font-size: 15px; padding: 6px 12px 6px 9px; }
  .receipt__go { text-align: left; margin-top: 16px; }
  .receipt__go .btn { width: 100%; }
  .receipt__note { font-size: 15px; text-align: center; }
  .mini-plan { margin-top: 20px; padding: 12px 14px; gap: 8px; }
  .mini-plan__edit { margin-left: 0; }
  .fields { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .send { display: block; margin: 24px -16px 0; padding: 18px 16px 22px; }
  .send .btn { width: 100%; }
  .send__note { margin-top: 12px; font-size: 15px; align-items: flex-start; }
  .builder__done { padding: 26px 0 30px; }
  .done__badge { width: 58px; height: 58px; }
  .done__title { font-size: 30px; margin-top: 22px; }
  .done__steps li { font-size: 16px; }
  .sample-text { padding: 14px 14px 16px; border-radius: 22px; }
  .bubble { font-size: 15px; }
  .sample-text__top { font-size: 15px; }

  /* seasons: segmented control, year bar, swipeable month cards */
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 5px; gap: 4px; border-radius: 22px; margin-bottom: 16px; }
  .tab { flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 2px; border-radius: 17px; font-size: 13.5px; }
  .tab .icon { width: 22px; height: 22px; }
  .chart { display: none; }
  .year-bar { display: block; }
  .months-wrap { margin: 18px calc(-1 * var(--gutter)) 0; }
  .months { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .months--spring, .months--summer, .months--winter, .seasons-spring .months--fall, .seasons-summer .months--fall, .seasons-winter .months--fall { display: none; }
  .seasons-spring .months--spring, .seasons-summer .months--summer, .seasons-winter .months--winter { display: flex; }
  .month { flex: 0 0 82%; scroll-snap-align: start; padding: 22px 20px 20px; border-radius: 22px; }
  .month__name { font-size: 30px; }
  .month__title { font-size: 17px; }
  .month__do li { font-size: 15.5px; }
  .months__photo { flex: 0 0 62%; min-height: 0; scroll-snap-align: start; --av: 36%; }

  /* services */
  .mow { grid-template-columns: 1fr; gap: 22px; padding: 14px 14px 16px; border-radius: 26px; }
  .mow__photo { height: 250px; --av: 46%; }
  .mow__body { padding: 0 6px; }
  .mow__title { font-size: 34px; margin-top: 12px; }
  .mow__line { font-size: 16.5px; }
  .checks li { font-size: 16px; }
  .mow__prices { padding: 18px 18px 16px; border-radius: 20px; }
  .ptable dt { font-size: 16px; }
  .ptable dd { font-size: 24px; }
  .ptable dd.ptable__walk { font-size: 15px; }
  .mow__note { font-size: 15px; }
  .svc-split { gap: 48px; margin-top: 52px; }
  .sub-h { font-size: 25px; }
  .mlist li { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; padding: 16px 0; align-items: start; }
  .mlist li > .icon { grid-row: 1 / span 2; width: 26px; height: 26px; }
  .mlist__txt b { font-size: 17px; }
  .mlist__txt span { font-size: 14.5px; }
  .when { grid-column: 2; grid-row: 2; justify-self: start; font-size: 12.5px; padding: 4px 10px; }
  .from { grid-column: 3; grid-row: 1; font-size: 23px; }
  .from small:last-child:not(:first-child) { display: block; margin-top: 4px; font-size: 12.5px; }
  .pgrid { gap: 22px 14px; }
  .pcard__photo { height: 130px; --av: 46%; margin-bottom: 10px; }
  .pcard b { font-size: 16px; }
  .pcard span { font-size: 13.5px; }
  .pcard .from { font-size: 21px; }
  .pcard .from small:last-child:not(:first-child) { display: inline; }
  .not-us { align-items: flex-start; margin-top: 36px; padding: 14px 16px; font-size: 15px; }

  /* work: swipe through the projects */
  .work { padding: 64px 0 60px; }
  .mosaic { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .proj, .proj--a { display: flex; flex: 0 0 84%; scroll-snap-align: start; }
  .proj--a .proj__photo, .proj__photo { height: 300px; flex: none; min-height: 0; --av: 46%; }
  .proj--a .proj__title, .proj__title { font-size: 23px; }
  .proj--a .proj__txt { padding: 0; }
  .proj__took li { font-size: 15px; }
  .proj__days { font-size: 15px; }

  /* reviews */
  .rating { display: block; }
  .rating__h { font-size: 34px; }
  .rating__card { margin-top: 22px; padding: 22px; border-radius: 24px; }
  .rating__num { font-size: 84px; }
  .feature-q { padding-bottom: 26px; }
  .feature-q blockquote { font-size: 25px; line-height: 1.2; }
  .feature-q figcaption, .q figcaption { font-size: 15px; }
  .bars__n { font-size: 15px; }
  .qgrid { columns: 1; margin-top: 22px; }
  .q { margin-bottom: 12px; padding: 20px 20px 18px; }
  .q blockquote { font-size: 16px; }
  .q:nth-child(n+4) { display: none; }
  .reviews__grid { gap: 40px; }

  /* about */
  .about__grid { gap: 32px; }
  .about__photo { height: 360px; --av: 48%; }
  .about__photo img { object-position: 70% 50%; }
  .about__body .h2 { font-size: 36px; }
  .about__p { font-size: 16.5px; }
  .owner-q { padding: 20px 20px 18px; }
  .owner-q blockquote { font-size: 20px; }
  .crew { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .crew li { font-size: 15.5px; }
  .stats { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 6px; }
  .stats > div { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #D9CCAA; }
  .stats dt { font-size: 36px; }
  .stats dd { font-size: 15.5px; margin: 0; }
  .about__community { align-items: flex-start; font-size: 15px; }

  /* area */
  .week { margin-top: 24px; }
  .week li { grid-template-columns: 128px 1fr; gap: 8px; padding: 13px 0; align-items: start; }
  .week__day { font-size: 18px; gap: 8px; }
  .week__towns { font-size: 15px; }
  .area__note { font-size: 15px; }
  .map__box { border-radius: 24px; }
  .map__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .map__key { justify-content: space-between; font-size: 15px; }
  .town text { font-size: 19px; stroke-width: 5px; }
  .town circle { r: 10px; }
  .map__region { font-size: 17px; }
  .map__state { font-size: 16px; }
  .map__open { width: 100%; }

  /* faq */
  .faq__grid { display: flex; flex-direction: column; gap: 0; }
  .faq__side { display: contents; }
  .faq__side .h2 { font-size: 34px; margin-bottom: 28px; }
  .faq__groups { order: 2; }
  .ask { order: 3; margin-top: 36px; display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 24px; }
  .ask__photo { height: 140px; --av: 50%; }
  .ask__body { padding: 4px 4px 4px 0; }
  .ask__title { font-size: 19px; line-height: 1.2; }
  .ask__body p:not(.ask__title) { font-size: 15px; margin: 4px 0 12px; }
  .ask .btn { height: 46px; padding: 0 16px; font-size: 15px; }
  .fgroup { grid-template-columns: 1fr; padding: 0 0 6px; }
  .fgroup + .fgroup { margin-top: 14px; }
  .fgroup__lbl { grid-row: auto; padding-top: 18px; padding-bottom: 2px; }
  .fgroup > .qa { grid-column: 1; }
  .qa summary { min-height: 58px; font-size: 17px; gap: 14px; }
  .qa summary .icon { width: 34px; height: 34px; }
  .qa p { padding: 0 0 18px; font-size: 15.5px; }

  /* close and footer */
  .close { padding: 64px 0; }
  .close__grid { grid-template-columns: 1fr; gap: 34px; }
  .close__h { font-size: 44px; }
  .close__p { font-size: 16.5px; }
  .close__actions { flex-direction: column; gap: 10px; margin-top: 26px; }
  .close__actions .btn { width: 100%; }
  .close__photo { height: 280px; --av: 46%; }
  .site-footer { background: var(--forest-3); padding-bottom: 96px; }
  .foot { padding: 52px 0 36px; }
  .foot__base, .demo-note { font-size: 15px; }
  .foot__cols { grid-template-columns: 1fr; gap: 34px; }
  .foot__base { flex-direction: column; margin-top: 40px; }

  /* app-style bottom tab bar */
  .tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }

  /* menu: full screen on the phone */
  .is-menu-open .menu { left: 0; width: auto; padding: 12px var(--gutter) 28px; box-shadow: none; }
  .menu__top { height: 62px; }
  .menu__list a { font-size: 27px; min-height: 60px; }
}
.sheet main > section { padding: 80px 0; border-top: 1px solid var(--line); }
.sheet #sheet-logo { border-top: 0; padding-top: 72px; background: var(--surface); }
.sheet #sheet-controls, .sheet #sheet-imagery { background: var(--surface); }
.sh-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 44px; }
.sh-hero { font-family: var(--font-display); font-size: 104px; line-height: .92; font-weight: 800; letter-spacing: -0.05em; }
.sh-lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
.sh-h { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.sh-sub { margin-top: 12px; max-width: 46em; font-size: 17px; color: var(--ink-soft); }
.sh-label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.sh-label--cream { color: var(--on-dark-soft); }
.sh-cap { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 14px; }
.sh-cap code, .sh-sw code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
.sh-mt { margin-top: 30px; }
.sh-grid { display: grid; gap: 20px; }
.sh-grid--logo { grid-template-columns: 1.2fr 1.2fr 1fr; }
.sh-card { padding: 24px; border-radius: 24px; background: var(--ground); border: 1px solid var(--line); }
.sh-card.sh-card--dark { border: 0; background-color: var(--forest); background-image: repeating-linear-gradient(100deg, var(--forest) 0 150px, var(--forest-2) 150px 300px); }
.sh-card--dark .sh-label { color: var(--on-dark-soft); }
.sh-card--dark .sh-cap { color: var(--on-dark-soft); }
.sh-stage { display: flex; align-items: center; min-height: 150px; }
.sh-logo-xl .logo__mark { width: 76px; height: 76px; }
.sh-logo-xl .logo__word b { font-size: 42px; }
.sh-logo-xl .logo__word small { font-size: 15px; margin-top: 7px; }
.sh-marks { gap: 28px; align-items: flex-end; }

.sh-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 32px; }
.sh-sw span { display: block; height: 104px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(30, 51, 36, .12); }
.sh-sw figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: 14.5px; line-height: 1.4; }
.sh-sw b { font-size: 15px; }
.sh-sw em { font-style: normal; color: var(--ink); }
.sh-sw small { font-size: 13.5px; color: var(--ink-soft); }
.sh-lawn { margin-top: 36px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.sh-lawn .year-bar__sw span { height: 56px; }

.sh-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.sh-font { padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.sh-font__sample { font-family: var(--font-display); font-size: 96px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.sh-font__sample--body { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em; }
.sh-scale { margin-top: 28px; border-top: 2px solid var(--ink); }
.sh-row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sh-spec { display: flex; flex-direction: column; font-weight: 700; font-size: 16px; }
.sh-spec small { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.sh-h1 { font-size: 94px; }
.sh-ink { color: var(--ink); margin: 0; }
.sh-left { text-align: left; }

.sh-states { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 28px 40px; margin-top: 32px; }
.sh-state { display: flex; flex-direction: column; align-items: flex-start; }
.sh-dark { display: flex; gap: 40px; margin-top: 32px; padding: 28px 30px; border-radius: 24px; }
.sh-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 28px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.sh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 36px; }
.sh-sizes, .sh-svcs { grid-template-columns: 1fr 1fr; }
.sh-tiles__cap { grid-column: 1 / -1; margin-top: 4px; }

.sh-comp { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px; margin-top: 32px; align-items: start; }
.sh-steps { margin-bottom: 14px; }
.sh-receipt { margin: 0; border-radius: 20px; border-top: 0; padding: 18px 20px; }
.sh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-price { position: static; }
.sh-sample { background: var(--forest); margin-top: 0; }
.sh-sample .bubble ul { margin: 0; padding-top: 0; border-top: 0; border-bottom: 0; }
.sh-signature { display: grid; grid-template-columns: 1fr 390px; gap: 32px; margin-top: 44px; align-items: start; }
.sh-chart__grid { grid-template-columns: 170px repeat(24, minmax(0, 1fr)); grid-template-rows: 34px 48px repeat(3, 40px); }
.sh-chart .mo--now em { display: none; }
.sh-phone-bits .tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 5px; gap: 4px; border-radius: 22px; }
.sh-phone-bits .tab { flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 2px; border-radius: 17px; font-size: 13.5px; }
.sh-yearbar { display: block; }
.sh-tabbar { display: grid; margin-top: 16px; border: 1px solid var(--line); border-radius: 22px; }

.sh-photos { display: grid; grid-template-columns: 300px 260px 220px 1fr; gap: 24px; align-items: end; margin-top: 32px; }
.sh-ph { height: 340px; --av: 40%; }
.sh-ph--tall { height: 420px; --av: 36%; }
.sh-ph--tall img { object-position: 50% 62%; }
.sh-ph--round { width: 220px; height: 220px; border-radius: 50%; border: 8px solid var(--ground); box-shadow: var(--shadow); }
.sh-photo-notes { align-self: center; }
.sh-bottom { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--line); }
.sh-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; }
.sh-icons span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.sh-icons .icon { width: 28px; height: 28px; color: var(--accent); }
.sh-stripe { padding: 34px 28px; border-radius: 24px; }
.sh-stripe .h2 { font-size: 46px; }
.sh-radii { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sh-r { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px; font-size: 14px; font-weight: 700; text-align: center; background: var(--meadow); color: var(--accent-dk); }
.sh-r--pill { border-radius: 999px; }
.sh-r--card { border-radius: 24px; }
.sh-r--tile { border-radius: 16px; }
.sh-r--float { border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---- build: states and polish not drawn in the design (demo-site-build) ---- */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* sticky header: .site's overflow:hidden would make it the scroll box and stop sticky; clip does the
   same clipping without that. The pill floats at the top; once the page is under it, a deeper shadow. */
.site { overflow: clip; }
.site-header { position: sticky; top: 0; }
[id] { scroll-margin-top: var(--hdr-h, 94px); }
.pillnav { transition: box-shadow .2s; }
.is-stuck .pillnav { box-shadow: 0 1px 2px rgba(30, 51, 36, .08), 0 16px 34px -14px rgba(30, 51, 36, .5); }

/* fonts: a size-matched stand-in for Bricolage while it loads, so headlines wrap the same way before and
   after and the hero doesn't jump (desktop layout shift was 0.086). Bricolage's optical sizing makes it
   relatively wider at small sizes, so each layout gets its own match, measured against Arial Bold on
   the hero (94px desktop, 68px tablet, 48px phone). */
@font-face { font-family: "Bricolage Fallback"; font-weight: 500 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 91%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback T"; font-weight: 500 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 95.5%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback P"; font-weight: 500 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
:root { --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; }
@media (max-width: 1099px) { :root { --font-display: 'Bricolage Grotesque', 'Bricolage Fallback T', system-ui, sans-serif; } }
@media (max-width: 699px) { :root { --font-display: 'Bricolage Grotesque', 'Bricolage Fallback P', system-ui, sans-serif; } }
/* DM Sans runs 102.6% of Arial in the body sizes (15–21px) and about 103% of Arial Bold in bold */
@font-face { font-family: "DM Sans Fallback"; font-weight: 300 400; src: local("Arial"), local("ArialMT"); size-adjust: 103.2%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 104.6%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 103%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }
:root { --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; }

/* header between 1100 and 1239: the six links, the number and the button don't fit the pill (the links
   wrapped to two lines), so the number becomes the design's round call button from the phone header */
.nav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1239px) {
  .pillnav__phone { display: none; }
  .hdr-call { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin: 0 10px 0 12px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
  .hdr-call .icon { width: 22px; height: 22px; }
  .nav a { padding: 10px 12px; }
}

/* hero: the eyebrow is part of the H1 now (trade + region); same look as the design's <p> */
.hero__h1 { margin: 0; font: inherit; }
.hero__h1 .hero__title { display: block; }
@media (max-width: 699px) {
  .hero__h1 .hide-sm { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* focus: ink ring on light ground, butter on the dark bands (the design's butter ring was 1.5:1 on cream) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn--green:focus-visible { outline-color: var(--ink); }
.stripes-dark a:focus-visible, .stripes-dark button:focus-visible, .foot a:focus-visible,
.stripes-dark .btn--green:focus-visible { outline-color: var(--butter); }
.stripes-dark .builder a:focus-visible, .stripes-dark .builder button:focus-visible { outline-color: var(--ink); }
[data-step-title]:focus, [data-sent-focus]:focus { outline: none; }
.size:has(input:focus-visible), .svc:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 1px; }
.qa summary:focus-visible { outline-offset: 4px; border-radius: 8px; }

/* plan builder: picked tiles follow the inputs; checks only on picked tiles */
.size:not(.is-on) .size__check { display: none; }
.svc:not(.is-on) .svc__box .icon { visibility: hidden; }
@media (hover: hover) {
  .size:not(.is-on):hover, .svc:not(.is-on):hover { border-color: var(--accent); }
  .seg label:not(.is-on):hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
}
.field-row:has(> [data-freq][hidden]) { grid-template-columns: 1fr; }
.receipt li.plan-empty, .mini-plan li.plan-empty { padding: 7px 0; background: none; font-weight: 500; color: var(--ink-soft); }
.receipt li.plan-empty::before, .mini-plan li.plan-empty::before { display: none; }
.mini-plan__edit { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
@media (hover: hover) {
  .mini-plan__edit:hover, .month__add:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* tiles ticked by "Add to my plan" glow for a moment, so the visitor sees what was added */
@media (prefers-reduced-motion: no-preference) {
  .svc.is-added { animation: fs-added 1.4s ease-out; }
}
@keyframes fs-added { 0%, 35% { box-shadow: 0 0 0 6px rgba(244, 200, 74, .9); } 100% { box-shadow: 0 0 0 6px rgba(244, 200, 74, 0); } }
.done__line { margin: 0; }

/* errors: the brand sheet's look, for selects and tile groups too */
.field.is-error select, .field.is-error textarea { border-color: #B3261E; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.field-group.is-error .size:not(.is-on), .field-group.is-error .svc:not(.is-on) { border-color: #B3261E; }
.field-group > .field__err { margin-top: 12px; }
.field-group .field__err:not([hidden]) + .hint { margin-top: 6px; }
.select select:invalid { color: #6F7C70; }
.select select option { color: var(--ink); }

/* sending */
.builder.is-sending .send .btn { background: var(--accent-dk); color: var(--on-accent); cursor: progress; }
.builder.is-sending .send .btn .icon { display: none; }
.builder.is-sending .send .btn::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: var(--on-accent); }
@media (prefers-reduced-motion: no-preference) {
  .builder.is-sending .send .btn::after { animation: fs-spin .8s linear infinite; }
}
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* seasons: the "now" dot in the phone year bar follows today (the design fixed it on October) */
.year-bar__mo span:nth-child(10) { background: none; color: inherit; }
.year-bar__mo span.is-now { background: var(--butter); color: var(--ink); }
/* seasons chart between 700 and 833: the design's tablet chart (drawn at 834) clipped "Bermuda", "1st
   trim" and "2nd" in their short bars, so the label column, the chart padding and the bar text tighten */
@media (min-width: 700px) and (max-width: 833px) {
  .chart { padding-inline: 14px; }
  .chart__grid { grid-template-columns: 100px repeat(24, minmax(0, 1fr)); }
  .row-lbl { font-size: 13.5px; }
  .bar { margin: 0 1px; padding: 0 4px; font-size: 12px; letter-spacing: -0.01em; }
}
@media (hover: hover) {
  .tab:not([aria-selected="true"]):hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
}

/* hovers that kept their words but lost their icon: the line button's green icon on its ink hover */
.btn--line:hover .icon { color: var(--butter); }

/* phone tab bar: slides away while a field has focus, so it never sits over a field above the keyboard */
@media (max-width: 699px) {
  .tabbar { transition: transform .2s ease; }
  .is-typing .tabbar { transform: translateY(110%); }
}