/* ============================================================================
   opsct.com — the one stylesheet.

   Rewritten from scratch 06 SEP 2026 evening to BUILD_BRIEF_06SEP2026.md,
   section "THE APPROVED STANDARD — Captain's layout, approved 06 SEP 2026 ~1905".
   Every earlier look section in that brief is superseded and none of it survives
   in this file.

   THE RULES THIS FILE IS BUILT TO, in the brief's order:
     "Phone first. One column, top to bottom, never a sideways scroll. On a big
      screen the same column sits centered and the seasonal photo fills the sides."
     1. "The header is the letterhead header", pinned, riding down the page.
     2. "Two big buttons right under the header, side by side, two colors,
         riding with it."
     3. the service map, 4. the picture band, 5. one who-we-are line and the footer.
     6. the service pages take Parkway's snow-page shape.

   COLOUR — the locked letterhead config and nothing else:
     OPS COMPANY DATA/OPS Branding/00_Source/letterhead.config.js
       gold F0B429 · wordmark blue 073C89 · green 194A15 · navy small 1A3A6B
       · footer address grey 555555
     The old navy 1B3A5C, mustard C5922E and green 1B5E37 are OUT of this build
     entirely — check_site.py rule 17 fails the build if any of the three appears.

   TYPE — the letterhead furniture is Cambria with a Georgia fallback, as the
   letterhead itself is. Everything a customer reads is the system stack. No web
   font is downloaded (plan 3.3).

   WIDTH — the content column is 720px at most and centred. Nothing in this file
   declares a fixed width, a min-width or an image that can exceed a 390px phone;
   check_overflow.py reads this file and proves it.
   ========================================================================== */

:root {
  /* --gold was the letterhead's #F0B429. Captain's ruling 07 SEP 2026 ~0940, reading the site on
     his phone: it comes up orange there, "more yellow in that orange to brighten it", on the call
     button, the rule and the map ribbon alike. This brighter yellow is the site's own gold from
     now on; the letterhead keeps its #F0B429. */
  --gold:   #FFC933;
  /* The bright green inside the seal's own medallion, sampled off the pixels of
     images/ops-seal-logo.png (2,768 pixels of #5CB111 in the lawn). Captain's
     ruling 06 SEP 2026 ~2045 names it for the quote button. */
  --seal-green: #5CB111;
  --blue:   #073C89;
  --green:  #194A15;
  --navy:   #1A3A6B;
  --grey:   #555555;

  --ink:    #16181C;
  --rule:   #D8DEE7;
  --tint:   #F4F6F9;
  --white:  #FFFFFF;

  --furniture: Cambria, Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;

  --col: 720px;
  --pad: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Nothing on this site is ever wider than the column it sits in. */
img, svg, video, table, pre { max-width: 100%; }
img, svg { height: auto; display: block; }

a { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, label:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: var(--white); padding: 10px 14px; z-index: 60;
}
.skip:focus { left: 0; }

/* Text a screen reader reads and a screen does not show. */
.sr { position: absolute; left: -9999px; top: auto; overflow: hidden; }

/* ---------------------------------------------------------------- 1. HEADER
   The letterhead header, pinned. Seal large left; the wordmark in one blue,
   Cambria; the green italic services line under it; the thin rule and the gold
   rule. Proof: OPS COMPANY DATA/OPS Branding/Proofs/OPS Word Letterhead.pdf   */

.topfix {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(7, 60, 137, 0.14);
}

.letterhead {
  max-width: var(--col);
  margin: 0 auto;
  padding: 12px var(--pad) 0;
  display: flex;
  flex-wrap: wrap;           /* the green line sits on its own row under the seal and the name (Captain, 07 SEP 2026 about 0005) */
  align-items: center;
  gap: 4px 12px;
}

/* Captain's ruling 06 SEP 2026 ~2045, item 1: the seal larger — about 96px on
   the desktop and 64px on the phone — and the name and the green services line
   big enough to read without squinting. */
.letterhead .seal {
  width: 64px;
  flex: 0 0 auto;
}

.letterhead .lh-text { min-width: 0; flex: 1 1 0; }

/* The wordmark is the page's own <h1> on the homepage — Captain's ruling item 3,
   06 SEP 2026 ~2050: the headline sentence comes out and the name in the header
   carries the heading. The class beats the element, so it looks the same
   whether it is a <p> or an <h1>. */
.wordmark {
  margin: 0;
  font-family: var(--furniture);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--blue);
  font-size: clamp(11px, 3.4vw, 28px);   /* measured: the name fits one line at 375px with the 64px seal */
  white-space: nowrap;       /* one line on every phone (Captain, 07 SEP 2026 about 0013) */
}

.lh-thin {
  border: 0;
  border-top: 1px solid var(--navy);
  margin: 3px 0 2px;
}

/* The green services line — Captain's correction 06 SEP 2026 ~1935.
   It was breaking onto two lines at every width. Above 640px it is ONE line,
   as on the letterhead: the size scales with the column and the line is set
   nowrap, so it can never break. Below 640px it may wrap once and sits
   centred; the text carries a non-breaking space between "Property" and
   "Projects" so that pair never splits across the two lines.
   The sizes are set so the line fits the text box at every width: the box is
   the column (720px at most) less 32px of page padding, the seal (56px, 84px
   above 900px) and the 10px gap. */
.services-line {
  flex: 1 1 100%;            /* its own full-width row */
  margin: 2px 0 10px;
  font-family: var(--furniture);
  font-style: italic;
  font-weight: 700;
  color: var(--green);
  font-size: clamp(13px, 3.9vw, 19px);
  line-height: 1.25;
  text-align: center;
  padding: 0 6px;
}

@media (min-width: 640px) {
  .services-line {
    white-space: nowrap;
    font-size: min(2.4vw, 17px);   /* narrower than the gold rule by a clear margin (Captain, 07 SEP 2026 about 0013) */
  }
}

.gold-rule {
  height: 4px;
  background: var(--gold);
  max-width: var(--col);
  margin: 0 auto;
}

/* ---------------------------------------------------------- 2. THE TWO BUTTONS
   Side by side, two colours, riding with the header. Full width of the column
   on a phone, half each.                                                     */

.twobtn {
  max-width: var(--col);
  margin: 0 auto;
  padding: 8px var(--pad);
  display: flex;
  gap: 8px;
}

/* Captain's ruling 06 SEP 2026 ~2045, item 2: REQUEST A QUOTE in the seal's
   bright green and CALL in the seal's gold-yellow, dark text on both, so they
   read as buttons that connect now. Both colours were read off the seal's own
   pixels (images/ops-seal-logo.png): the lawn inside the medallion is #5CB111
   and the ring's gold is the letterhead's own #F0B429. */
.twobtn a {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  color: #0A1628;
  font-weight: 700;
  font-size: clamp(14px, 3.9vw, 20px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  padding: 14px 6px;
  border-radius: 7px;
  border: 2px solid rgba(10, 22, 40, 0.28);
}

.btn-quote { background: var(--seal-green); }
.btn-call  { background: var(--gold); }
.twobtn a:hover, .twobtn a:focus { filter: brightness(1.12); }

.side { display: none; }

/* ------------------------------------------------------------- THE COLUMN */

.page {
  max-width: var(--col);
  margin: 0 auto;
  background: var(--white);
  padding: 0 var(--pad) 28px;
}

main { display: block; }

h1, h2, h3 {
  font-family: var(--furniture);
  color: var(--blue);
  line-height: 1.2;
  margin: 22px 0 8px;
}
h1 { font-size: clamp(23px, 6vw, 34px); }
h2 { font-size: clamp(19px, 4.6vw, 25px); }
h3 { font-size: clamp(17px, 4vw, 20px); }

h2::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  background: var(--gold);
  margin-top: 6px;
}

p { margin: 0 0 12px; }
.lede { font-size: clamp(17px, 4.2vw, 20px); }

.crumbs {
  font-size: 14px;
  color: var(--grey);
  padding: 10px 0 0;
}
.crumbs a { color: var(--navy); }

.whoweare {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--tint);
  border-left: 5px solid var(--gold);
  font-family: var(--furniture);
  font-size: clamp(15px, 3.9vw, 18px);
  color: var(--blue);
}

/* -------------------------------------------------- WELCOME ABOARD, THE CHART
   Captain's order 07 SEP 2026 ~0945, on the homepage foot: the onboarding path
   drawn as a chart. Bars in the two-button style on a shaded ground, thin black
   lines with arrowheads between them. Built in the page as text, not a picture,
   so a phone reads it and Google reads the words (plan 2.5). Contact Request
   is the green button's colour and Call Us the gold button's, because they ARE
   those two buttons; every step after them is a wordmark-blue bar.            */

.aboard {
  margin: 22px 0 8px;
  padding: 16px 14px 14px;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: center;
}
.aboard h2 {
  margin: 0 0 12px;
  font-family: var(--furniture);
  color: var(--blue);
  font-size: clamp(22px, 5.6vw, 28px);
}
.aboard h2::after { display: none; }
.flow { max-width: 340px; margin: 0 auto; }
.flow .step, .flow .step a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(15px, 4vw, 19px);
  line-height: 1.15;
  border-radius: 7px;
}
.flow .step {
  padding: 12px 8px;
  background: var(--blue);
  color: var(--white);
  border: 2px solid rgba(10, 22, 40, 0.28);
}
.flow .step a { color: inherit; padding: 0; }
.flow .s-green { background: var(--seal-green); color: #0A1628; }
.flow .s-gold  { background: var(--gold); color: #0A1628; }
.flow .or {
  margin: 4px 0;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}
.flow .arrow {
  position: relative;
  width: 2px;
  height: 26px;
  margin: 0 auto;
  background: #000000;
}
.flow .arrow::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -1px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000000;
}
/* Captain's order 07 SEP 2026 ~1220: the heading at the top reads OPS Onboarding
   Process, big, so nobody has to scroll to learn what the chart is; Welcome Aboard
   closes it at the bottom in big bold letters; Contact Request and Call Us are real
   buttons, the only place a button repeats on the page. */
.flow a.step { text-decoration: none; cursor: pointer; }
.flow a.step:hover, .flow a.step:focus { filter: brightness(1.12); }
.flow-label {
  margin: 14px 0 0;
  font-family: var(--furniture);
  font-weight: 700;
  color: var(--blue);
  font-size: clamp(24px, 6vw, 32px);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- 3. THE MAP
   Captain's ruling 06 SEP 2026 ~2050, item 4: the map is FULL COLUMN WIDTH and
   the 22 towns run under it in text, full width, with a small divider between
   each name. It no longer sits in a narrow column beside a list.             */

.map-block { margin: 30px 0 6px; }   /* the map drops deeper below the buttons (Captain, 07 SEP 2026 about 0013) */

.map-block figure { margin: 0; }

.map-block img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.map-towns {
  margin: 10px 0 0;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.6;
  color: var(--navy);
}

/* The what-and-where sentence under the map, larger so it stands out (Captain, 07 SEP 2026 ~1030). */
.map-towns strong { display: block; color: var(--blue); margin-bottom: 6px; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.35; }

.map-towns .sep { color: var(--gold); font-weight: 700; padding: 0 2px; }

/* ------------------------------------------------------- 4. THE PICTURE BAND
   Captain's ruling 06 SEP 2026 ~2050, item 5: a picture every three seconds
   with a quick fade, the service name in a bold band across the lower third of
   each picture, and ALL ELEVEN service buttons — two rows on the desktop,
   stacked on the phone. CSS only — radio inputs and a keyframe fade. Every
   picture is reachable with scripts switched off.

   The eleven buttons sit directly under the picture rather than on it: eleven
   stacked buttons at 390px would cover the whole photograph, which is not what
   "buttons on the pictures" was asking for.                                  */

.band {
  position: relative;
  margin: 14px 0 8px;
  background: var(--blue);
  border-radius: 6px;
  overflow: hidden;
}

.band > input { position: absolute; opacity: 0; pointer-events: none; }

.slides {
  position: relative;
  aspect-ratio: 16 / 11;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: bandfade 30s infinite;  /* ten pictures, three seconds each (Captain, 07 SEP 2026; the 0145 truck band reverted at 0150 on his word) */
}

.slide img { width: 100%; height: 100%; object-fit: cover; }

/* The service name, in a bold band across the lower third of the picture. */
.slide figcaption {
  position: absolute;
  left: 0; right: 0;
  top: 67%;
  background: rgba(7, 60, 137, 0.86);
  border-top: 3px solid var(--gold);
  color: var(--white);
  font-family: var(--furniture);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 5.6vw, 34px);
  line-height: 1.2;
  padding: 10px 14px;
}

/* Four slides, three seconds each: twelve seconds round, one quarter of it per
   picture, with the fade taking the last few tenths of each turn. */
@keyframes bandfade {
  0%     { opacity: 1; }
  8.0%   { opacity: 1; }
  10.0%   { opacity: 0; }
  98.0%   { opacity: 0; }
  100%   { opacity: 1; }
}

.sl1 { animation-delay: -0s; }
.sl2 { animation-delay: -27s; }
.sl3 { animation-delay: -24s; }
.sl4 { animation-delay: -21s; }
.sl5 { animation-delay: -18s; }
.sl6 { animation-delay: -15s; }
.sl7 { animation-delay: -12s; }
.sl8 { animation-delay: -9s; }
.sl9 { animation-delay: -6s; }
.sl10 { animation-delay: -3s; }

/* A dot that is pressed stops the rotation and holds its own picture. */
#band1:checked ~ .slides .slide,
#band2:checked ~ .slides .slide,
#band3:checked ~ .slides .slide,
#band4:checked ~ .slides .slide,
#band5:checked ~ .slides .slide,
#band6:checked ~ .slides .slide,
#band7:checked ~ .slides .slide,
#band8:checked ~ .slides .slide,
#band9:checked ~ .slides .slide,
#band10:checked ~ .slides .slide { animation: none; opacity: 0; }

#band1:checked ~ .slides .sl1,
#band2:checked ~ .slides .sl2,
#band3:checked ~ .slides .sl3,
#band4:checked ~ .slides .sl4,
#band5:checked ~ .slides .sl5,
#band6:checked ~ .slides .sl6,
#band7:checked ~ .slides .sl7,
#band8:checked ~ .slides .sl8,
#band9:checked ~ .slides .sl9,
#band10:checked ~ .slides .sl10 { opacity: 1; }

.dots {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.dots label {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--white);
  cursor: pointer;
}

#band1:checked ~ .dots label[for="band1"],
#band2:checked ~ .dots label[for="band2"],
#band3:checked ~ .dots label[for="band3"],
#band4:checked ~ .dots label[for="band4"],
#band5:checked ~ .dots label[for="band5"],
#band6:checked ~ .dots label[for="band6"],
#band7:checked ~ .dots label[for="band7"],
#band8:checked ~ .dots label[for="band8"],
#band9:checked ~ .dots label[for="band9"],
#band10:checked ~ .dots label[for="band10"] { background: var(--gold); }

/* The eleven buttons. One per row on the phone; two rows on the desktop. */
.floating {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two across on a phone; the block sits under the towns line, above the pictures (Captain, 07 SEP 2026 0020) */
  gap: 6px;
  padding: 8px;
  margin: 12px 0 14px;
  border-radius: 6px;
  background: var(--blue);
}

.floating a {
  display: flex;                 /* text centred left-right and top-bottom (Captain, 07 SEP 2026 0030) */
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  background: rgba(25, 74, 21, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.2;
  padding: 11px 6px;
}

/* Button colours by season — Captain's order 07 SEP 2026 0024: light blue for snow,
   a lighter green for lawn and hedge work, a fall orange for leaves and cleanups,
   the letterhead navy for the office buttons; the process button double wide. */
.floating a.c-snow   { background: #CFE6F7; color: var(--blue); border-color: #8FBFE6; }
.floating a.c-lawn   { background: #A9DB8A; color: var(--green); border-color: #6FB84E; }
.floating a.c-fall   { background: #E08A2E; color: var(--white); border-color: var(--gold); }
.floating a.c-office { background: var(--navy); color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.floating a.c-dark   { background: #D9BE84; color: var(--blue); border-color: #B8964F; }   /* Property Projects: a khaki tan, its own colour, lighter than the dark green Captain found heavy (0031) */
.floating a.c-wide   { grid-column: span 2; }
.floating a:hover, .floating a:focus { background: var(--gold); color: var(--blue); }

@media (min-width: 560px) {
  .floating { grid-template-columns: repeat(3, 1fr); }
}

/* The reduce-motion hold on the band came out 07 SEP 2026 about 2355 on Captain's order: it flips for everyone. */

/* --------------------------------------------------------- 6. SERVICE PAGES
   Parkway's snow-page shape: a full-width picture of our own work with the page
   name and one button on it; then words left, pictures stacked right, one
   column on the phone.                                                       */

.pagetop {
  position: relative;
  margin: 12px 0 6px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--blue);
}

.pagetop img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.pagetop .over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(7, 60, 137, 0.94), rgba(7, 60, 137, 0));
}

.pagetop h1 { color: var(--white); margin: 0 0 8px; }

.onbtn, .cta {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
}

/* .cta is the in-page button the town pages and the hubs already carry; it is
   kept so their approved copy needed no rewriting at the re-chrome. */
.cta { margin: 4px 6px 10px 0; }
/* The thank-you page's way home, big enough to find on a phone (Captain, 07 SEP 2026 ~1210:
   "the home button is pretty small"). */
.cta.home { display: block; text-align: center; font-size: clamp(17px, 4.6vw, 21px); padding: 14px 16px; margin: 6px 0 18px; }

.twocol { display: block; }
.twocol .words { min-width: 0; }
.twocol .stack { min-width: 0; }
.twocol .stack figure { margin: 0 0 12px; }

@media (min-width: 640px) {
  .twocol { display: flex; gap: 16px; align-items: flex-start; }
  .twocol .words { flex: 1 1 58%; }
  .twocol .stack { flex: 1 1 38%; }
}

figure { margin: 12px 0; }
figure img { width: 100%; border-radius: 4px; }

figcaption {
  font-size: 14px;
  color: var(--grey);
  padding-top: 5px;
}

/* ------------------------------------------------ THE PEOPLE, ABOUT PAGE
   Captain's ruling 07 SEP 2026 ~1045: "the name and the face of the people that
   you're talking to." Four faces two across, each with its line under it, then
   the crew picture off Race Rock with one line under it.                      */
.people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 16px;
}
.people .person { margin: 0; min-width: 0; }
.people .person img { width: 100%; height: auto; border-radius: 6px; display: block; }
.people .person .photo-wanted { margin: 0; padding: 40px 10px; }
.people .person figcaption { font-size: 15px; color: var(--ink); padding-top: 8px; line-height: 1.4; }
.people .person figcaption strong { color: var(--blue); display: block; }
figure.crew { margin: 6px 0 0; }
figure.crew img { width: 100%; height: auto; border-radius: 6px; display: block; }
.crewline {
  margin: 6px 0 18px;
  font-family: var(--furniture);
  color: var(--blue);
  font-size: clamp(15px, 3.9vw, 18px);
}

/* ------------------------------------------------ THE SHOP BLOCK, ABOUT PAGE
   Captain's order 07 SEP 2026 ~1115: the bay picture large on the left, the
   two detail pictures small on the right, compact, less scrolling. On a phone
   the bay goes full width and the two sit side by side under it.            */
.shop {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 8px;
  margin: 0 0 18px;
}
.shop figure { margin: 0; min-width: 0; }
.shop img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.shop .big img { aspect-ratio: 1 / 1; }
.shop .small { display: grid; gap: 8px; min-width: 0; }
.shop .small img { aspect-ratio: 4 / 3; }
@media (max-width: 599px) {
  .shop { grid-template-columns: 1fr; }
  .shop .big img { aspect-ratio: 4 / 3; }
  .shop .small { grid-template-columns: 1fr 1fr; }
}

.photo-wanted {
  border: 3px dashed var(--gold);
  background: var(--tint);
  color: var(--blue);
  font-family: var(--furniture);
  font-weight: 700;
  padding: 22px 14px;
  text-align: center;
  margin: 12px 0;
}

/* ------------------------------------------------------- LISTS AND FACTS */

ul.plain, ul.links { list-style: none; margin: 8px 0 14px; padding: 0; }
ul.plain li, ul.links li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
ul.links a { font-weight: 700; text-decoration: none; }
ul.links .what { display: block; font-weight: 400; color: var(--ink); }

ol.steps { margin: 8px 0 16px; padding-left: 22px; }
ol.steps li { margin-bottom: 10px; }
ol.steps strong { display: block; color: var(--blue); font-family: var(--furniture); }
ol.steps span { display: block; }

.facts {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
}
.facts p:last-child { margin-bottom: 0; }

.towns { color: var(--navy); }

.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0 16px; }
.cards a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  color: var(--ink);
}
.cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cards b { display: block; color: var(--blue); font-family: var(--furniture); padding: 8px 10px 0; }
.cards span { display: block; padding: 0 10px 10px; }

@media (min-width: 560px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------- FORMS */

form.request { margin: 8px 0 16px; }
form.request label { display: block; font-weight: 700; color: var(--blue); margin-top: 10px; }
form.request input, form.request textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 10px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}
form.request button {
  margin-top: 14px;
  width: 100%;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: var(--green);
  border: 0;
  border-radius: 6px;
  padding: 14px 10px;
  cursor: pointer;
}
form.request .note { font-size: 14px; color: var(--grey); margin-top: 8px; }
/* The address block: street on its own line, then city, state and ZIP across
   (Captain's order 07 SEP 2026 ~1135 on his first live test of the form). */
form.request .csz { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
/* Captain's ruling 07 SEP 2026 ~1230: the form is not all or nothing. Only the name
   and the message are required; a customer may leave the address, phone or e-mail
   blank and the office works with what they gave. */
form.request .opt { font-weight: 400; color: var(--grey); font-size: 14px; }
form.request .csz > div { min-width: 0; }

/* ------------------------------------------- THE REVIEWS, ABOUT PAGE
   Captain's ruling 07 SEP 2026 ~1140: three Angi quotes in the customer's own
   words, the rating line above, the link to the reviews page below. No stars
   in the code (plan 3.4).                                                     */
.rating { font-weight: 700; color: var(--blue); margin: 0 0 8px; }
.review {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--tint);
  border-left: 4px solid var(--gold);
}
.review p { margin: 0 0 4px; }
.review footer { font-weight: 700; color: var(--blue); }
.readall { margin: 4px 0 18px; font-weight: 700; }
form.request .hp { position: absolute; left: -9999px; top: 0; }

/* ------------------------------------------------------------- 5. THE FOOT */

/* Captain's ruling 06 SEP 2026 ~2055, item 7: the footer is SLIM — a small
   seal, the name, the phone, the email, the five menu words and one line for
   the shops and the mail box. No street address anywhere on the site, no hours
   sentence, and the towns are not repeated down here. */
.foot {
  background: var(--blue);
  color: var(--white);
  margin-top: 20px;
  padding: 16px var(--pad) 20px;
}
.foot .inner { max-width: var(--col); margin: 0 auto; }
.foot img.seal { width: 56px; margin-bottom: 6px; }
.foot .fname {
  font-family: var(--furniture);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(16px, 4.2vw, 20px);
  margin: 0 0 6px;
}
.foot a { color: var(--white); }
.foot .addr { color: #E4E9F2; margin: 0 0 6px; }
.foot .menu { font-weight: 700; margin: 8px 0 6px; }
.foot .legal { color: #C8D2E4; font-size: 14px; margin: 0; }

/* ------------------------------------- THE SEASONAL PHOTO ON A BIG SCREEN
   Above 900px the same column sits centred and the seasonal picture fills the
   sides — the frame Captain took from Landgreen. Below 900px there is no
   background picture at all, so a phone never downloads it.                  */

@media (min-width: 900px) {
  .side { display: block; }
  /* The side panels: one still picture each side, two serene lawns, Captain's word at about 0009; the band in the middle is the only thing that moves.
     Captain's ruling 07 SEP 2026 about 0007 after the slideshows were tried and found too
     busy. The pictures are set here, inside the media query, so a phone never
     downloads them. */
  body { background: #194A15; }
  .side { position: fixed; top: 0; bottom: 0; width: calc(50% - 360px); z-index: -1; overflow: hidden; background: #194A15; }
  .side.left { left: 0; }
  .side.right { right: 0; }
  .side .s { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .side .sL1 { background-image: url("/images/lawn-mowing-back-lawn-to-tree-line-montville-2026.jpg"); }
  .side .sR1 { background-image: url("/images/lawn-and-beds-kept-along-stream-mystic-2026.jpg"); }
  .topfix, .page {
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.34);
  }
  .foot {
    max-width: var(--col);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.34);
  }
  .letterhead .seal { width: 120px; }
  /* Eleven buttons, four across, three rows. */
  .floating { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ PRINT */

@media print {
  .topfix, .twobtn, .floating, .dots, .skip { display: none; }
  body { background: none; color: #000000; font-size: 12pt; }
  .page { max-width: none; }
  .slide { position: static; opacity: 1; animation: none; }
}