@charset "utf-8";
/* Green Mountain Group - green-mountain-group.com
 *
 * Replaces publicstyle.css + responsive.css + mbcsmbmcp.css (the Easy Button &
 * Menu Maker skin) + layerslider.css + the Telerik WebResource sheets + the FA
 * 4.7 CDN sheet + Window.Metro.css + feature.presenter + instalink.
 *
 * Palette is the CMS's own, contrast-checked:
 *   #278353 brand green   4.71:1 on white, both directions        AA
 *   #216e46 deep green    6.21:1 on white, 5.71:1 on #f1f5fa      AA at body size
 *   #2b2b2b ink          14.16:1 on white                         AA
 *   #f1f5fa mist          the CMS's own light band
 * Green at BODY size on the mist band is only 4.30:1, so small green text
 * there uses --green-deep. Large text and buttons keep the brand green.
 *
 * Icon path data is Font Awesome Free 6.5.2, CC BY 4.0
 * (https://fontawesome.com/license/free).
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --green:        #278353;
  --green-deep:   #216e46;
  --green-dark:   #1c5e3c;
  --ink:          #2b2b2b;
  --body:         #1a1a1a;
  --muted:        #5a6068;
  --mist:         #f1f5fa;
  --line:         #dfe5ec;
  --white:        #ffffff;

  --shell:        1200px;
  --read:         740px;      /* the measure, gutters included */
  --gutter:       clamp(16px, 4vw, 32px);
  --radius:       6px;
  --shadow:       0 2px 10px rgba(20, 40, 30, .10);
  --shadow-lg:    0 12px 34px rgba(20, 40, 30, .18);

  --head-h:       64px;       /* JS overwrites with the measured rect bottom */
  --nav-bp:       1000px;     /* measured; see fp_probe "one of bar/burger" */
}

/* ------------------------------------------------------------------- fonts */
/* Self-hosted, subset to Latin. The CMS @imported three Google stylesheets
 * from inside publicstyle.css and then asked for them as "Montserrat Light" /
 * "Montserrat Regular" - names Google never served. One family, real weights. */
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 300;
  font-display: swap; src: url(/assets/fonts/montserrat-300.woff) format("woff");
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/montserrat-400.woff) format("woff");
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/montserrat-700.woff) format("woff");
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font: 300 17px/1.65 Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--body);
  background: var(--white);
  /* an e-mail address is one unbreakable 27-character token and a rect walk
   * cannot see it overflow its track (README: ceecoequipment) */
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
/* <picture> is display:inline by default, so it does not fill a grid or flex
 * track and carries a baseline gap under every image (README: ceecoequipment) */
picture { display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; color: var(--ink); font-weight: 400;
  line-height: 1.18; letter-spacing: -.01em; }
h1 { font-size: clamp(29px, 4.4vw, 46px); }
h2 { font-size: clamp(23px, 3vw, 32px); color: var(--green-deep); }
h3 { font-size: clamp(19px, 2.2vw, 24px); color: var(--green-deep); }
h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 17px; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.15em; }
li { margin-bottom: .4em; }
a { color: var(--green-deep); text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--green-dark); }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

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

.gmg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--green); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.gmg-skip:focus { left: 0; color: #fff; }

.gmg-vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.gmg-shell { width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter); }

/* --------------------------------------------------------------- masthead */
/* Two rows on desktop, exactly as the CMS had it: identity + contact above,
 * navigation below. The nav row therefore only ever has to hold six short
 * labels, which is why the breakpoint is driven by the UTILITY row. */
.gmg-head {
  position: sticky; top: 0; z-index: 1200;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.gmg-util { display: flex; align-items: center; gap: 18px;
  padding-block: 12px; }
.gmg-brand { display: inline-flex; flex: 0 0 auto; margin-right: auto; }
.gmg-brand img { display: block; width: 194px; height: 89px; }

.gmg-contact { display: flex; align-items: center; gap: 14px; }
.gmg-tel { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 400; color: var(--ink); text-decoration: none; white-space: nowrap; }
.gmg-tel:hover, .gmg-tel:focus-visible { color: var(--green-dark); text-decoration: underline; }
.gmg-tel .gmg-i { color: var(--green); }

/* The CMS drew these two as near-white 26px PNGs on a white bar: present,
 * and effectively invisible. Same glyphs, brand green, as inline SVG. */
.gmg-social { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--green-deep); background: var(--mist); transition: background .18s, color .18s; }
.gmg-social:hover, .gmg-social:focus-visible { background: var(--green); color: #fff; }

.gmg-i { display: inline-block; vertical-align: -.125em; fill: currentColor; stroke: none; }

/* buttons ------------------------------------------------------------------ */
/* font:inherit on anything that can land on a <button>, or the same class
 * renders at the UA's ~13px there and 17px on an <a> (README: lebanonlawns) */
.gmg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 15px/1 Montserrat, "Segoe UI", system-ui, Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: 14px 22px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.gmg-btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.gmg-btn--primary:hover, .gmg-btn--primary:focus-visible {
  background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.gmg-btn--ghost { background: transparent; color: var(--green-deep); border-color: var(--green); }
.gmg-btn--ghost:hover, .gmg-btn--ghost:focus-visible { background: var(--green); color: #fff; }
.gmg-btn--block { width: 100%; }
.gmg-btn--white { background: #fff; color: var(--green-deep); border-color: #fff; }
.gmg-btn--white:hover, .gmg-btn--white:focus-visible {
  background: var(--ink); border-color: var(--ink); color: #fff; }

/* ------------------------------------------------------------------- nav */
.gmg-navbar { border-top: 1px solid var(--line); }
/* the nav bar's own gutter has to match the utility row's, or the first item
 * sits flush against the viewport edge while the logo above it is inset */
.gmg-navshell { display: flex; align-items: center; }
.gmg-nav { min-width: 0; margin-inline-start: -15px; }   /* cancel the first
                                                          * item's own padding
                                                          * so the labels line
                                                          * up with the logo */
.gmg-nav > ul {
  display: flex; flex-wrap: nowrap; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
/* nowrap on purpose: if the bar ever stops fitting the page OVERFLOWS and the
 * probe says so, instead of silently going to two rows and reading as
 * deliberate (README: appearanceplus) */
.gmg-nav > ul > li { position: relative; margin: 0; }
.gmg-nav > ul > li > a,
.gmg-nav > ul > li > .gmg-subtoggle {
  display: flex; align-items: center; gap: 7px;
  font: 400 14px/1 Montserrat, "Segoe UI", system-ui, Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 17px 15px; white-space: nowrap;
}
.gmg-nav > ul > li > a:hover, .gmg-nav > ul > li > .gmg-subtoggle:hover,
.gmg-nav > ul > li > a:focus-visible, .gmg-nav > ul > li > .gmg-subtoggle:focus-visible {
  color: var(--green-dark);
}
/* the current-page marker must be its own box: an inset box-shadow follows the
 * border-radius and curves up at both ends (README: esmihaiti) */
.gmg-nav > ul > li > a[aria-current="page"] { color: var(--green-deep); }
.gmg-nav > ul > li > a[aria-current="page"]::after,
.gmg-nav > ul > li.is-section > .gmg-subtoggle::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 0;
  height: 3px; background: var(--green); border-radius: 0;
}
.gmg-caret { width: 9px; height: 9px; transition: transform .18s; }

/* dropdown ---------------------------------------------------------------- */
.gmg-sub {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 288px; margin: 0; padding: 6px 0 8px; list-style: none;
  background: transparent;          /* the panel's ink lives on the <li>s, so
                                     * the 6px stand-off stays part of one
                                     * unbroken hover shape (README: esmihaiti) */
  display: none;
}
/* the visual gap is padding INSIDE the panel, never `top: calc(100% + 6px)` -
 * that leaves a 6px hole in the hover target and the menu closes while the
 * pointer is still travelling to it */
.gmg-sub > li { margin: 0; }
.gmg-sub > li:first-child > a { border-radius: var(--radius) var(--radius) 0 0; }
.gmg-sub > li:last-child > a { border-radius: 0 0 var(--radius) var(--radius); }
.gmg-sub a {
  display: block; padding: 12px 18px; text-decoration: none;
  font-size: 15px; font-weight: 300; color: var(--ink);
  background: var(--white); border-left: 3px solid transparent;
  box-shadow: var(--shadow-lg);
}
.gmg-sub a:hover, .gmg-sub a:focus-visible {
  background: var(--mist); color: var(--green-dark); border-left-color: var(--green);
}
.gmg-sub a[aria-current="page"] { color: var(--green-deep); border-left-color: var(--green); font-weight: 400; }

/* :focus-within next to :hover gives the dropdown a complete keyboard path
 * with JS off - the toggle <button> is focusable while the panel is
 * display:none, and focusing it opens the panel (README: sspallets) */
.gmg-nav > ul > li:hover > .gmg-sub,
.gmg-nav > ul > li:focus-within > .gmg-sub,
.gmg-nav > ul > li.is-open > .gmg-sub { display: block; }
.gmg-nav > ul > li:hover > .gmg-subtoggle .gmg-caret,
.gmg-nav > ul > li.is-open > .gmg-subtoggle .gmg-caret { transform: rotate(180deg); }

/* burger ------------------------------------------------------------------ */
/* base-level display:none on everything the drawer owns, or it renders inside
 * the desktop bar as well (README: mainlyart) */
.gmg-burger { display: none; }
.gmg-backdrop { display: none; }
.gmg-navfoot { display: none; }

.gmg-burger {
  position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); cursor: pointer; padding: 0;
}
/* the bars are positioned ABSOLUTELY so a visually-hidden label inside the
 * button cannot become a fourth layout row and push them off centre
 * (README: bakerspridestl). 16/23/30 gives 7px gaps by construction, so
 * translating the outer two by +/-7px lands both exactly on the middle bar. */
.gmg-burger span {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .22s, opacity .16s;
}
.gmg-burger span:nth-child(1) { top: 15px; }
.gmg-burger span:nth-child(2) { top: 22px; }
.gmg-burger span:nth-child(3) { top: 29px; }
.gmg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gmg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gmg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- sections */
.gmg-band { padding-block: clamp(38px, 6vw, 68px); }
.gmg-band--mist { background: var(--mist); }
.gmg-band--tight { padding-block: clamp(26px, 4vw, 44px); }
.gmg-eyebrow {
  margin: 0 0 14px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; color: var(--green-deep);
}
.gmg-center { text-align: center; }
.gmg-center .gmg-eyebrow { text-align: center; }

/* the article column IS the measure. Left-aligning a 74ch block inside a
 * centred 1200px column is a DOUBLE offset and reads as broken alignment
 * (README: lebanonlawns) */
.gmg-prose { max-width: var(--read); margin-inline: auto; }
.gmg-prose > :last-child { margin-bottom: 0; }
.gmg-prose ul, .gmg-prose ol { padding-left: 1.3em; }
.gmg-prose img, .gmg-prose picture { border-radius: var(--radius); }

/* --------------------------------------------------------------- the hero */
/* LayerSlider was greensock + transitions + kreaturamedia + a skin, ~145 KB,
 * configured `responsive: false` - so it rendered at a fixed pixel size for
 * ever. Six slides, one heading each, over a background photograph. */
.gmg-hero { position: relative; overflow: hidden; background: var(--ink); }
/* EVERY grid track is minmax(0, 1fr), including a single-column one.
 * A bare implicit track is `auto`, i.e. max-content, and the slide's <img>
 * contributes its INTRINSIC width to that (a percentage width is treated as
 * auto when sizing to max-content) - so the track measured 1043px inside a
 * 375px viewport and put a horizontal scrollbar on the home page.
 * Same family as "a grid item's default min-width is its min-CONTENT width"
 * (README: macathletix, ddadvertising). */
.gmg-hero__track { display: grid; grid-template-columns: minmax(0, 1fr); }
.gmg-hero__slide {
  grid-area: 1 / 1; position: relative; min-width: 0;
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.gmg-hero__slide.is-active { opacity: 1; visibility: visible; }
.gmg-hero__slide picture, .gmg-hero__slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* The caption's scrim. The CMS's mountain silhouette is one, but only where
 * the silhouette IS - a caption wider than its peaks runs out onto bare
 * photograph, and fp_heroink.py measured the worst pixel there at 1.09:1 while
 * the MEAN was a comfortable 8:1. A DOM contrast sweep cannot see any of this.
 *
 * The alpha is SOLVED, not chosen: `python fp_heroink.py --solve` sweeps it
 * against all six photographs and reports the worst single pixel.
 *     0.50 -> 3.48:1   AA for large text only
 *     0.60 -> 4.79:1   AA at ANY size
 *     0.62 -> 5.13:1   what ships, so it survives a type-size change
 * The flat part of the gradient (the bottom 38%) covers the caption's measured
 * ink band exactly (62%-90% of the hero height), which is what makes the model
 * in fp_heroink.py match what the browser actually paints. Change one and
 * re-run the other. */
.gmg-hero__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
      rgba(16, 22, 18, .62) 0%,
      rgba(16, 22, 18, .62) 38%,
      rgba(16, 22, 18, 0)   72%);
}
/* The source band is 1920x460, i.e. 23.96vw. The height is written DIRECTLY,
 * not as an aspect-ratio, because `aspect-ratio` + `min-height` resolves the
 * other way round: with width:auto the ratio gives a 90px height at 375px, the
 * min-height raises that to 250, and then the ratio BACK-COMPUTES the width to
 * 250 x 4.17 = 1043px. The track then draws its photograph 1043px wide inside
 * a 375px viewport, clipped to the left third - and `overflow:hidden` on the
 * hero means the page-level scrollWidth check never sees it.
 *
 * clamp() does the same job with no such coupling: the CMS's own proportion
 * from ~1050px up, a floor so a phone gets a real hero rather than a 90px
 * strip (the photographs cover-crop, which is safe - they are photographs, not
 * compositions), and a ceiling so a 2195px display does not get a 526px band
 * filling the whole fold (README: bakerspridestl). */
.gmg-hero__track { height: clamp(250px, 24vw, 460px); }
.gmg-hero__cap {
  position: absolute; inset: auto 0 0 0; display: grid; place-items: center;
  /* clears the dot row at bottom:10px so the caption cannot sit on it */
  padding-bottom: clamp(30px, 3vw, 38px); pointer-events: none;
}
/* the CMS's own mountain scrim: a dark silhouette at 60% alpha that sits
 * behind the caption. It is what gives the white heading its contrast, so it
 * is a load-bearing element, not decoration. */
.gmg-hero__plate {
  display: grid; place-items: end center;
  width: min(858px, 92%); aspect-ratio: 858 / 253;
  background: url(/assets/img/green-mountain.png) center bottom / contain no-repeat;
  padding-bottom: clamp(8px, 2.2vw, 26px);
}
.gmg-hero__cap h2, .gmg-hero__cap p {
  margin: 0; color: #fff; text-align: center; font-weight: 400;
  font-size: clamp(21px, 4.4vw, 50px); line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.gmg-hero__btns { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: space-between;
  padding-inline: clamp(6px, 2vw, 18px); pointer-events: none; }
.gmg-hero__arrow {
  pointer-events: auto; width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; color: #fff;
  background: rgba(20, 30, 25, .45); transition: background .18s;
}
.gmg-hero__arrow:hover, .gmg-hero__arrow:focus-visible { background: var(--green); }
.gmg-hero__dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; gap: 9px; justify-content: center; margin: 0; padding: 0; list-style: none;
}
.gmg-hero__dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; background: transparent; transition: background .18s;
}
.gmg-hero__dots button[aria-current="true"] { background: #fff; }

/* page banner (inner pages): the CMS's 1920x100 strip */
.gmg-banner { background: var(--green); color: #fff; }
.gmg-banner .gmg-shell { padding-block: clamp(26px, 4vw, 44px); }
.gmg-banner h1 { color: #fff; margin: 0; }
.gmg-banner p { margin: .5em 0 0; color: rgba(255,255,255,.92); }

/* ------------------------------------------------------------- home blocks */
.gmg-intro { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .gmg-intro { grid-template-columns: minmax(0, 446px) minmax(0, 1fr); } }
.gmg-intro img { border-radius: var(--radius); }

/* the item count is FIXED and known, so write the count. auto-fit strands the
 * odd item on a row of its own (README: lebanonlawns) */
.gmg-tiles { display: grid; gap: clamp(18px, 3vw, 30px); margin: 0; padding: 0;
  list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .gmg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gmg-tile { margin: 0; }
/* a grid item stretches; the link inside it does not - measure the thing that
 * has the background colour, not its parent (README: esmihaiti) */
.gmg-tile a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: var(--ink); background: var(--white);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.gmg-tile a:hover, .gmg-tile a:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--green-dark);
}
.gmg-tile img { width: 100%; aspect-ratio: 376 / 250; object-fit: cover; }
.gmg-tile h3 { margin: 0; padding: 18px 16px 20px; text-align: center;
  font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: inherit; }

/* the "Get a FREE Quote" band. The CMS built this by pulling a div up over an
 * image with margin-top:-180px; it is a two-column band. */
.gmg-quote { background: var(--green); color: #fff; overflow: hidden; }
.gmg-quote__grid { display: grid; gap: clamp(12px, 3vw, 40px); align-items: end;
  grid-template-columns: minmax(0, 1fr); text-align: center; }
@media (min-width: 780px) {
  .gmg-quote__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    text-align: left; align-items: center; }
}
.gmg-quote__cut { align-self: end; margin-bottom: -1px; }
.gmg-quote__cut img { display: block; margin-inline: auto; width: 100%; max-width: 320px; }
.gmg-quote__body { padding-block: clamp(26px, 5vw, 54px); }
.gmg-quote h2 { color: #fff; font-size: clamp(27px, 4.4vw, 46px); margin-bottom: .35em; }
.gmg-quote p { color: rgba(255,255,255,.95); margin-bottom: 1.3em; }

/* ------------------------------------------------------------------- forms */
.gmg-formwrap { display: grid; gap: clamp(26px, 4vw, 46px);
  grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .gmg-formwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.gmg-field { margin-bottom: 18px; }
.gmg-field > label, .gmg-fieldset > legend {
  display: block; margin-bottom: 6px; font-size: 15px; font-weight: 400; color: var(--ink);
}
.gmg-req { color: #a3231f; }
.gmg-input, .gmg-textarea, .gmg-select {
  display: block; width: 100%; font: inherit; font-size: 16px; color: var(--body);
  padding: 12px 14px; background: #fff; border-radius: var(--radius);
  /* WCAG 1.4.11 wants 3:1 on a non-text UI boundary and a DOM contrast sweep
   * only walks text nodes, so this pair is computed by hand:
   * #6b7280 on #ffffff is 4.83:1 (README: ceecoequipment). */
  border: 1px solid #6b7280;
}
.gmg-textarea { min-height: 150px; resize: vertical; }
.gmg-input:focus, .gmg-textarea:focus, .gmg-select:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(39, 131, 83, .18); outline: none;
}
.gmg-fieldset { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 4px; margin: 0 0 18px; }
/* a <legend> that wraps sits ON the fieldset border (README: esmihaiti) */
.gmg-fieldset > legend { padding-inline: 6px; background: var(--white); }
.gmg-check { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 16px; }
.gmg-check input { width: 18px; height: 18px; accent-color: var(--green); flex: 0 0 auto; }
.gmg-err { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: #fdecea; border: 1px solid #d9776f; color: #8a1c17; }
.gmg-err ul { margin: .4em 0 0; padding-left: 1.2em; }
.gmg-ok { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radius);
  background: #e8f5ee; border: 1px solid var(--green); color: var(--green-dark); }
/* parked off-screen on purpose; excluded from the probe's rect walk alongside
 * the skip link (README: ceecoequipment) */
.gmg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gmg-map { border: 0; width: 100%; height: 420px; border-radius: var(--radius); display: block; }

/* -------------------------------------------------------------- the popup */
/* Elfsight's Popup app wrapped an iframe to /pop-form.html, which posts to the
 * client's Salesforce Web-to-Lead endpoint. The endpoint is untouched; the
 * chrome around it is now ~40 lines instead of a third-party platform. */
.gmg-pop { border: 0; padding: 0; max-width: 460px; width: calc(100% - 32px);
  border-radius: 10px; box-shadow: var(--shadow-lg); background: #fff; }
.gmg-pop::backdrop { background: rgba(18, 26, 22, .62); }
.gmg-pop__body { padding: 30px 28px 28px; text-align: center; }
.gmg-pop h2 { margin-bottom: .5em; font-size: clamp(21px, 4vw, 27px); color: var(--ink); }
.gmg-pop p { color: var(--muted); font-size: 16px; }
.gmg-pop form { margin-top: 20px; text-align: left; }
.gmg-pop__close {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--mist); color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1;
}
.gmg-pop__close:hover, .gmg-pop__close:focus-visible { background: var(--green); color: #fff; }

/* -------------------------------------------------------------- blog bits */
.gmg-bloglayout { display: grid; gap: clamp(28px, 4vw, 50px);
  grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 940px) {
  .gmg-bloglayout { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); }
}
.gmg-posts { margin: 0; padding: 0; list-style: none; }
.gmg-posts > li { margin: 0 0 28px; padding: 0 0 26px; border-bottom: 1px solid var(--line); }
.gmg-posts > li:last-child { border-bottom: 0; }
.gmg-posts h2 { margin-bottom: .3em; font-size: clamp(20px, 2.6vw, 26px); }
.gmg-posts h2 a { text-decoration: none; }
.gmg-posts h2 a:hover, .gmg-posts h2 a:focus-visible { text-decoration: underline; }
.gmg-meta { margin: 0 0 .7em; font-size: 14px; color: var(--muted); font-style: italic; }
.gmg-side { background: var(--mist); border-radius: var(--radius); padding: 20px 20px 8px; }
.gmg-side h2 { font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-deep); }
.gmg-side ul { margin: 0 0 18px; padding: 0; list-style: none; font-size: 15px; }
.gmg-side li { margin-bottom: 10px; }
.gmg-side a { text-decoration: none; }
.gmg-side a:hover, .gmg-side a:focus-visible { text-decoration: underline; }
.gmg-side a[aria-current="page"] { font-weight: 700; }
.gmg-search { display: flex; gap: 8px; margin-bottom: 18px; }
.gmg-search input { flex: 1 1 auto; min-width: 0; }
.gmg-postnav { display: flex; justify-content: space-between; gap: 14px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.gmg-share { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.gmg-share span { font-size: 14px; color: var(--muted); }

.gmg-video { position: relative; aspect-ratio: 16 / 9; max-width: 720px;
  margin-inline: auto; border-radius: var(--radius); overflow: hidden; background: #000; }
.gmg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the CMS's own note for a service page it never wrote copy for */
.gmg-stub { background: var(--mist); border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; }
.gmg-stub > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */
.gmg-foot { background: var(--white); border-top: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 46px); text-align: center; }
.gmg-foot__logos { display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
/* the plate and its padding go on the FRAME, never on the <img>: border-box
 * padding on the image draws a 17% squash that the border-box ratio hides
 * (README: appearanceplus) */
.gmg-foot__logos a, .gmg-foot__logos span { display: inline-flex; }
.gmg-foot__addr { color: var(--green-deep); font-weight: 700; margin: 0 0 8px; }
.gmg-foot__addr a { color: inherit; }
.gmg-foot__cr { color: var(--muted); font-size: 14px; margin: 0; }

/* ============================== the drawer ==============================
 * Below --nav-bp the utility row collapses to logo + call + burger, and the
 * whole nav becomes an off-canvas panel.
 * ====================================================================== */
@media (max-width: 999.98px) {
  .gmg-burger { display: block; }
  .gmg-navbar {
    position: fixed; top: var(--head-h); left: 0; bottom: 0; z-index: 1250;
    width: min(360px, 86vw); border-top: 0;
    background: var(--white); box-shadow: var(--shadow-lg);
    transform: translateX(-100%); transition: transform .26s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  html.gmg-open .gmg-navbar { transform: translateX(0); visibility: visible; }
  .gmg-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1210;
    background: rgba(18, 26, 22, .5);
    opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  html.gmg-open .gmg-backdrop { opacity: 1; pointer-events: auto; }

  /* The drawer lives INSIDE the sticky masthead, and `position: sticky` +
   * `z-index` opens a stacking context - so the drawer's z-index: 1250 is
   * resolved inside the header, AT 1200, underneath a backdrop that is a child
   * of <body> at 1210. Every tap on a menu item then hits the backdrop and
   * closes the panel, which reads as "the menu closes when I click anything",
   * and the panel renders visibly dimmed.
   *
   * This is the fourth site in this series to hit it (macathletix, drauermd,
   * kvlawf, ddadvertising). `element.click()` bypasses hit-testing and passes
   * happily; `document.elementFromPoint()` over a real menu item is the check
   * that sees it, and it is in gmg_probe.html.
   *
   * Lift the header above the backdrop only while the panel is open. */
  html.gmg-open .gmg-head { z-index: 1300; }

  .gmg-navshell { display: block; padding-inline: 0; max-width: none; }
  .gmg-nav { margin-inline-start: 0; }
  .gmg-nav > ul { display: block; }
  .gmg-nav > ul > li { border-bottom: 1px solid var(--line); }
  .gmg-nav > ul > li > a,
  .gmg-nav > ul > li > .gmg-subtoggle {
    width: 100%; justify-content: space-between; padding: 16px 20px; font-size: 15px;
  }
  .gmg-nav > ul > li > a[aria-current="page"]::after,
  .gmg-nav > ul > li.is-section > .gmg-subtoggle::after { display: none; }
  .gmg-nav > ul > li > a[aria-current="page"],
  .gmg-nav > ul > li.is-section > .gmg-subtoggle {
    border-left: 4px solid var(--green); padding-left: 16px;
  }

  /* the accordion. Re-scoping .gmg-sub for specificity above means EVERY other
   * rule for it has to be re-scoped here too, or the panel stays an absolutely
   * positioned dropdown escaping the drawer (README: lebanonlawns). */
  .gmg-nav .gmg-sub {
    position: static; min-width: 0; padding: 0 0 6px; box-shadow: none;
    background: var(--mist);
  }
  .gmg-nav .gmg-sub a {
    box-shadow: none; background: transparent; padding: 13px 20px 13px 34px; font-size: 15px;
  }
  .gmg-nav .gmg-sub > li:first-child > a,
  .gmg-nav .gmg-sub > li:last-child > a { border-radius: 0; }
  /* hover must NOT open the accordion on a touch device */
  .gmg-nav > ul > li:hover > .gmg-sub { display: none; }
  .gmg-nav > ul > li.is-open > .gmg-sub { display: block; }

  /* the drawer's own tail: the phone number and the CTA in full. Hiding both
   * on the device most likely to act on them is the worst thing a naive
   * responsive layer can do (README: sspallets). */
  .gmg-navfoot { display: grid; gap: 12px; padding: 20px; }
  .gmg-navfoot .gmg-btn { width: 100%; }

  .gmg-util { gap: 12px; }
  .gmg-contact .gmg-tel span { display: none; }     /* icon-only 44x44 call button */
  .gmg-tel {
    width: 44px; height: 44px; justify-content: center; border-radius: 50%;
    background: var(--mist); color: var(--green-deep);
  }
  .gmg-contact .gmg-social { display: none; }
}

/* The quote button is the site's primary call to action, and below the nav
 * breakpoint it would otherwise live ONLY inside the drawer - one tap away on
 * every tablet, on a bar with 200px of spare room. The measured budget at
 * 620px is logo 194 + phone 44 + button 205 + burger 46 + three gaps 42 =
 * 531px of content against 620 - 2x24.8 gutters = 570 available, so 620 is the
 * narrowest width where it fits with slack. Below that the drawer's own
 * full-width copy takes over - hiding the CTA outright on the device most
 * likely to act on it is the worst thing a naive responsive layer can do
 * (README: sspallets). */
@media (max-width: 619.98px) {
  .gmg-util > .gmg-btn { display: none; }
}
@media (min-width: 620px) and (max-width: 999.98px) {
  .gmg-util > .gmg-btn { padding: 12px 16px; font-size: 14px; }
}

@media (max-width: 560px) {
  .gmg-brand img { width: 152px; height: 70px; }
}
@media (max-width: 380px) {
  .gmg-brand img { width: 128px; height: 59px; }
}

/* ---- the scroll lock -----------------------------------------------------
 * Three parts, and they only work together. `html { overflow: hidden }` alone
 * stops the document being a scroll container, so a position:sticky masthead
 * has nothing left to stick against and snaps back to its STATIC position -
 * 900px above the viewport if that is how far down the reader was. From
 * scrollY 0 everything looks perfect, which is exactly where a drawer gets
 * tested (README: appearanceplus, ddadvertising).
 * ------------------------------------------------------------------------ */
html.gmg-locked, html.gmg-locked body { overflow: hidden; }
/* 1. body pinned at -scrollY (JS sets the inline top). Also the only lock that
 *    holds on iOS, where overflow:hidden on the document scroller does not. */
html.gmg-locked body { position: fixed; left: 0; right: 0; width: 100%; }
/* 2. sticky has nothing to stick to any more, so the header goes FIXED */
html.gmg-locked .gmg-head { position: fixed; top: 0; left: 0; right: 0; }
/* 3. a fixed header has left the flow, so everything below it jumps UP by the
 *    header's own height. This puts it back; the two cancel exactly. */
html.gmg-locked body { padding-top: var(--head-h); }

/* ------------------------------------------------------------------- print */
@media print {
  .gmg-head, .gmg-hero__btns, .gmg-hero__dots, .gmg-backdrop, .gmg-pop { display: none !important; }
  body { font-size: 12pt; }
}