@charset "utf-8";
/* Lebanon Lawns - rebuild stylesheet.
   Replaces publicstyle.css, mbcsmbmcp.css, layerslider.css, videolightbox.css,
   overlay-minimal.css, Window.Metro.css and addtohomescreen.css, plus the
   twenty local @font-face families (only "Segoe UI" was ever referenced, and
   that is a system font on the platform that has it).

   Colours are the CMS's own, with two corrected for contrast:
     .subFooter band ink was #ffffff on #8fc323 -> 2.10:1, a years-old WCAG AA
       failure on every page. Now #1a1a1a on the same green -> 8.29:1.
     heading green was #528741 on white -> 4.29:1 at 16px. Now #50833f -> 4.51:1.
   Both keep the brand hue; see NOTES.md. */

:root {
  --ll-green:      #8fc323;   /* brand green - bands, buttons, rules        */
  --ll-green-dk:   #7aa81d;   /* hover/active for the above                 */
  --ll-green-ink:  #50833f;   /* section headings on white (AA at 16px)     */
  --ll-red:        #660000;   /* the CMS's sub-heading dark red             */
  --ll-forest:     #003300;
  --ll-ink:        #1c1c1c;
  --ll-ink-soft:   #4a4a4a;
  --ll-band:       #f1f1f1;   /* header band - the logo's own baked-in bg   */
  --ll-black:      #000;
  --ll-line:       #dcdcdc;

  /* Shell width for the header, footer, bands, the hero and the home grid.
     1100 left the hero at 47% of a 2180px desktop, floating in a grey field. */
  --ll-wrap:       1280px;
  /* The ARTICLE column: 74ch of Segoe UI measures 638px, so 638 + two 32px
     gutters. h1, prose and form all share it, so nothing is stranded to the
     left of a container much wider than its own content. */
  --ll-read:       702px;
  --ll-gut:        clamp(16px, 4vw, 32px);
  --ll-head-h:     96px;      /* JS overwrites with the measured height     */
  --ll-radius:     4px;
  --ll-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--ll-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ll-ink);
  background: #fff;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--ll-green-ink); }
a:hover, a:focus { color: var(--ll-red); }

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

.ll-wrap {
  max-width: var(--ll-wrap);
  margin-inline: auto;
  padding-inline: var(--ll-gut);
}

.ll-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #fff;
  color: var(--ll-ink);
  padding: 12px 20px;
  font-weight: 600;
}
.ll-skip:focus { left: 8px; top: 8px; }

.ll-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------- top utility */

.ll-top {
  background: var(--ll-black);
  color: #fff;
  font-size: 15px;
}
.ll-top .ll-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  flex-wrap: wrap;
}

.ll-top a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--ll-radius);
  line-height: 1.2;
}
.ll-top a:hover, .ll-top a:focus { background: #232323; color: #fff; }
.ll-top svg { flex: none; fill: var(--ll-green); }

.ll-top-tel {
  margin-left: auto;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
}
.ll-top-tel .ll-tel-short { display: none; }

/* ------------------------------------------------------------------ header */

.ll-head {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--ll-band);
  border-bottom: 3px solid var(--ll-green);
}
.ll-head .ll-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
}

.ll-logo { display: block; flex: none; line-height: 0; }
.ll-logo img { width: 163px; height: 118px; display: block; }

/* The burger is the phone control; it is hidden above the nav breakpoint.
   Base-level display:none on everything the drawer needs, so nothing leaks
   under the desktop header before the media query applies. */
.ll-burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid #c8c8c8;
  border-radius: var(--ll-radius);
  background: #fff;
  color: var(--ll-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.ll-burger:hover { background: #fff; border-color: var(--ll-green); }
.ll-burger svg { display: block; pointer-events: none; }
.ll-burger .ll-x  { display: none; }
.ll-burger[aria-expanded="true"] .ll-x  { display: block; }
.ll-burger[aria-expanded="true"] .ll-hb { display: none; }

.ll-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
}

/* --------------------------------------------------------------------- nav */

.ll-nav { margin-left: auto; }

/* Scope the flex row to the TOP-level list. `.ll-nav ul` (0,1,1) matches the
   dropdown too and out-specifies `.ll-sub` (0,1,0) no matter which comes
   later, so the panel's display:none never applied and every page loaded with
   the Services menu hanging open. */
.ll-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ll-nav ul { list-style: none; margin: 0; padding: 0; }

.ll-nav > ul > li { position: relative; }

.ll-nav a,
.ll-nav .ll-subtoggle {
  display: block;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ll-ink);
  text-decoration: none;
  padding: 12px 13px;
  border: 0;
  background: none;
  border-radius: var(--ll-radius);
  cursor: pointer;
  white-space: nowrap;
}
.ll-nav > ul > li > a:hover,
.ll-nav > ul > li > a:focus,
.ll-nav > ul > li > .ll-subtoggle:hover,
.ll-nav > ul > li > .ll-subtoggle:focus { background: #e2e2e2; color: var(--ll-red); }

.ll-nav [aria-current="page"] {
  color: var(--ll-red);
  box-shadow: inset 0 -3px 0 var(--ll-green);
}

.ll-nav .ll-subtoggle { display: flex; align-items: center; gap: 6px; }
.ll-nav .ll-subtoggle svg { flex: none; transition: transform .15s ease; }
.ll-nav .ll-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.ll-nav .ll-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--ll-line);
  border-top: 3px solid var(--ll-green);
  border-radius: 0 0 var(--ll-radius) var(--ll-radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  padding: 6px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  z-index: 5;
}
/* :hover and :focus-within give the dropdown a complete mouse AND keyboard
   path with JS off - the toggle <button> is focusable while the panel is
   display:none, so focusing it opens the panel and its links hold it open.
   The script's click/Escape handling is an enhancement, not the only way in. */
.ll-nav .ll-has-sub:hover > .ll-sub,
.ll-nav .ll-has-sub:focus-within > .ll-sub,
.ll-nav .ll-sub[data-open="true"] { display: flex; }

.ll-sub a {
  padding: 11px 14px;
  font-weight: 500;
  white-space: normal;
}
.ll-sub a:hover, .ll-sub a:focus { background: #f2f7e8; color: var(--ll-red); }

.ll-nav-cta > a {
  background: var(--ll-green);
  color: #10240a;
  margin-left: 6px;
}
.ll-nav-cta > a:hover, .ll-nav-cta > a:focus {
  background: var(--ll-green-dk);
  color: #10240a;
}

/* -------------------------------------------------------------------- hero */

.ll-hero { background: var(--ll-band); }
.ll-hero-inner {
  max-width: var(--ll-wrap);
  margin-inline: auto;
  padding-inline: var(--ll-gut);
}
/* The slides and their controls need their own positioning context, or the
   arrows centre against the image PLUS the promo bar and sit too low. */
.ll-hero-frame { position: relative; }

.ll-slides {
  /* a <ul> keeps the UA's 40px padding-inline-start, and flex-basis:100% then
     resolves against a content box 40px narrower than the track - so slide 2
     shows as a sliver down the right edge of slide 1 */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ll-slides::-webkit-scrollbar { display: none; }

.ll-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
/* The middle slide is a COMPOSITION, not a photograph - it carries a white
   circle of set copy in its right half - so no slide is ever cover-cropped.
   The natural 898x340 ratio is honoured at every width instead. */
/* <picture> is inline by default, so it does not fill its flex item */
.ll-slide picture { display: block; }
.ll-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 898 / 340;
}

.ll-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.ll-hero-nav:hover, .ll-hero-nav:focus { background: rgba(0,0,0,.8); }
.ll-hero-prev { left: 10px; }
.ll-hero-next { right: 10px; }
.ll-hero-nav svg { fill: currentColor; }

.ll-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.ll-dots button {
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ll-dots button::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}
.ll-dots button[aria-current="true"]::before { background: var(--ll-green); }

/* The slide caption. It was three byte-identical JPEGs of set type inside the
   slider; it is text now, so it reflows and can be read by a screen reader. */
.ll-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--ll-black);
  color: #fff;
  text-decoration: none;
}
.ll-promo:hover, .ll-promo:focus { color: #fff; }
.ll-promo:hover .ll-promo-tag { background: var(--ll-green-dk); }
.ll-promo-tag {
  background: var(--ll-green);
  color: #10240a;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 14px var(--ll-gut);
  display: flex;
  align-items: center;
  flex: none;
}
.ll-promo-txt {
  padding: 14px var(--ll-gut);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
}
.ll-promo-txt svg { flex: none; fill: var(--ll-green); }

/* ------------------------------------------------------------------- main */

main { display: block; }

.ll-main { padding: 40px 0 48px; }

/* On a 2180px screen the old layout put a 638px prose ribbon at the LEFT edge
   of a centred 1100px wrapper - a double offset that reads as a broken
   left-alignment rather than a measure. The column now IS the measure. */
.ll-main--read .ll-wrap { max-width: var(--ll-read); }
/* The reading column is for the ARTICLE only. The testimonial band and the
   footer keep the wide shell column on every page, so the bottom of the site
   is identical wherever you are - a band that changed width between the home
   page and a content page read as the page shifting under you. */

.ll-page-title {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: .01em;
  margin: 0 0 6px;
  color: var(--ll-ink);
}
.ll-page-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  margin-top: 14px;
  background: var(--ll-green);
}

.ll-lede {
  font-size: 18px;
  color: var(--ll-green-ink);
  font-style: italic;
  margin: 18px 0 0;
}

.ll-prose { max-width: none; }
.ll-prose > *:first-child { margin-top: 0; }
.ll-prose p { margin: 0 0 1.1em; }

.ll-prose h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.25;
  font-weight: 600;
  color: var(--ll-red);
  margin: 2em 0 .5em;
}
.ll-prose h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ll-green-ink);
  margin: 1.7em 0 .35em;
}
.ll-prose h3 + p { margin-top: 0; }

.ll-prose ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.ll-prose li { margin: .3em 0; }

.ll-prose hr {
  border: 0;
  border-top: 1px solid var(--ll-line);
  margin: 2.4em 0;
}

/* the numbered treatment schedules on /lawn-treatment and /tree-and-shrub.
   The step numbers are real text inside .ll-step-n, not a CSS counter - a
   ::before counter is decoration and disappears from search, from copy-paste
   and from a screen reader. */
.ll-steps { margin: 0; padding: 0; list-style: none; }
.ll-steps > li { margin: 0 0 1.6em; }
.ll-steps h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 .4em;
  font-size: 18px;
  color: var(--ll-red);
}
.ll-step-n {
  flex: none;
  min-width: 38px; height: 38px;
  padding-inline: 4px;
  border-radius: 19px;
  background: var(--ll-green);
  color: #10240a;
  font-weight: 700;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.ll-step-n.ll-step-nonum {
  background: none;
  border: 2px dashed var(--ll-green);
  width: 38px;
}
.ll-steps p { margin: 0 0 .8em 52px; }
.ll-steps p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- home page feature cards */

.ll-welcome { text-align: center; margin-bottom: 8px; }
.ll-welcome h1 {
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 300;
  letter-spacing: .06em;
  margin: 0;
  color: var(--ll-ink);
}
.ll-rule {
  width: min(680px, 100%);
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg,
              rgba(143,195,35,0) 0%, var(--ll-green) 18%,
              var(--ll-green) 82%, rgba(143,195,35,0) 100%);
}

.ll-feats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  /* min(300px,100%) - a bare 300px floor plus the gutter overflows a 320px
     phone, and a grid item's floor is what does the damage, not its ceiling */
  /* Four features, so the count is known: auto-fit would settle on THREE
     tracks in a 1216px column and strand the fourth on a row of its own. */
  grid-template-columns: 1fr;
  gap: 28px 44px;
}
@media (min-width: 700px) {
  .ll-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ll-feat { display: flex; gap: 16px; align-items: flex-start; }
.ll-feat img { flex: none; width: 52px; height: 52px; }
.ll-feat h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ll-ink);
  margin: 4px 0 6px;
  line-height: 1.25;
}
.ll-feat p { margin: 0; color: var(--ll-ink-soft); }

.ll-cta-row {
  margin: 42px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.ll-btn {
  /* a <button> does not inherit the page font, so a .ll-btn on a <button>
     renders at the UA's ~13px while the same class on an <a> renders at 16 */
  font: inherit;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--ll-radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.2;
}
.ll-btn-primary { background: var(--ll-green); color: #10240a; }
.ll-btn-primary:hover, .ll-btn-primary:focus {
  background: var(--ll-green-dk); color: #10240a;
}
.ll-btn-ghost {
  border-color: var(--ll-ink);
  color: var(--ll-ink);
  background: #fff;
}
.ll-btn-ghost:hover, .ll-btn-ghost:focus {
  background: var(--ll-ink); color: #fff;
}
.ll-btn svg { flex: none; fill: currentColor; }

/* --------------------------------------------------------------- clients */

.ll-clients {
  background: var(--ll-green);
  color: #1a1a1a;                 /* 8.29:1 - the CMS used #fff at 2.10:1 */
  padding: 40px 0 44px;
}
.ll-clients h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  letter-spacing: .05em;
  margin: 0 0 22px;
  color: #10240a;
}
/* There are four quotes, so a 3-track grid strands the fourth alone under a
   row of empty space. A 420px floor settles on two tracks at desktop. */
.ll-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 44px;
}
@media (min-width: 760px) {
  .ll-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ll-quotes blockquote { margin: 0; }
.ll-quotes p { margin: 0 0 8px; font-style: italic; }
.ll-quotes footer { font-weight: 700; font-style: normal; font-size: 14px; }

/* ---------------------------------------------------------------- footer */

.ll-foot {
  background: var(--ll-black);
  color: #d6d6d6;
  padding: 34px 0 30px;
  font-size: 14px;
}
.ll-foot ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
}
.ll-foot a { color: #fff; text-decoration: none; padding: 6px 10px; display: block; }
.ll-foot a:hover, .ll-foot a:focus { color: var(--ll-green); text-decoration: underline; }
.ll-foot-meta {
  text-align: center;
  margin: 0;
  color: #b4b4b4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
  align-items: center;
}
.ll-foot-meta a { display: inline; padding: 0; }

/* ------------------------------------------------------------------ forms */

.ll-form { max-width: none; }
.ll-field { margin: 0 0 18px; }
.ll-field > label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.ll-req { color: #a11; margin-left: 2px; }

.ll-form input[type="text"],
.ll-form input[type="tel"],
.ll-form input[type="email"],
.ll-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;                /* < 16px makes iOS zoom on focus */
  color: var(--ll-ink);
  padding: 11px 12px;
  border: 1px solid #9a9a9a;
  border-radius: var(--ll-radius);
  background: #fff;
}
.ll-form textarea { min-height: 150px; resize: vertical; }
.ll-form input:focus, .ll-form textarea:focus {
  border-color: var(--ll-green-dk);
  outline: 2px solid var(--ll-green-dk);
  outline-offset: 0;
}

.ll-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.ll-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.ll-check label { font-weight: 500; }

.ll-hp {                          /* honeypot - never shown, never announced */
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.ll-note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--ll-radius);
  border-left: 5px solid;
}
.ll-note-ok  { background: #eef7e4; border-color: var(--ll-green); color: #1f3d0e; }
.ll-note-bad { background: #fdecec; border-color: #c62828; color: #6b1414; }
.ll-note p { margin: 0; }
.ll-note ul { margin: 8px 0 0; padding-left: 1.2em; }

/* -------------------------------------------------------------------- 404 */

.ll-404 { text-align: center; padding: 20px 0 10px; }
.ll-404 .ll-page-title::after { margin-inline: auto; }

/* ============================== responsive ============================== */

/* Nav breakpoint. The bar needs the six root items plus a 163px logo; the
   value is set from a measurement of the rendered <li> widths, not by eye,
   with slack for the fallback font. See NOTES.md. */
@media (max-width: 1000px) {
  .ll-burger { display: flex; }

  .ll-nav {
    position: fixed;
    top: var(--ll-head-real, var(--ll-head-h));
    right: 0;
    bottom: 0;
    width: min(340px, 86vw);
    margin: 0;
    background: #fff;
    border-left: 1px solid var(--ll-line);
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(102%);
    transition: transform .25s ease;
    z-index: 1250;
    padding: 8px 0 28px;
  }
  /* The drawer starts BELOW the masthead: inset:0 would put its first items
     under a sticky header that has to sit above the backdrop, so they are
     visible but every tap lands on the header. */

  .ll-nav > ul { display: block; }
  .ll-nav > ul > li { border-bottom: 1px solid #ececec; }

  .ll-nav a,
  .ll-nav .ll-subtoggle {
    width: 100%;
    text-align: left;
    padding: 15px var(--ll-gut);
    border-radius: 0;
    font-size: 17px;
    white-space: normal;
  }
  .ll-nav .ll-subtoggle { justify-content: space-between; }
  .ll-nav [aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--ll-green);
    background: #f7faf1;
  }

  .ll-nav .ll-sub {
    position: static;
    min-width: 0;
    border: 0;
    border-top: 1px solid #ececec;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: #f7f7f7;
  }
  /* Hover must NOT open the panel once it is an accordion - a touch device
     reports :hover on tap and the panel would open behind the tap target. */
  .ll-nav .ll-has-sub:hover > .ll-sub { display: none; }
  .ll-nav .ll-has-sub:focus-within > .ll-sub,
  .ll-nav .ll-sub[data-open="true"] { display: block; }
  .ll-nav .ll-sub a { padding-left: calc(var(--ll-gut) + 16px); }

  .ll-nav-cta > a {
    margin: 12px var(--ll-gut) 0;
    width: auto;
    text-align: center;
    border-radius: var(--ll-radius);
  }
  .ll-nav-cta { border-bottom: 0 !important; }

  .ll-navopen .ll-backdrop { display: block; }
  .ll-navopen .ll-nav { transform: translateX(0); }
  .ll-navopen { overflow: hidden; }

  /* position:sticky + z-index on the masthead opens a stacking context, so a
     nav inside it resolves its z-index at the bar's value - under a backdrop
     that is a child of <body>. Lift the bar above the backdrop while open. */
  .ll-navopen .ll-head { z-index: 1300; }
}

@media (max-width: 860px) {
  .ll-head .ll-wrap { min-height: 74px; }
  .ll-logo img { width: 132px; height: 96px; }
}

@media (max-width: 640px) {
  .ll-main { padding: 28px 0 36px; }
  .ll-promo-tag { width: 100%; }
  .ll-hero-nav { width: 38px; height: 38px; }
  .ll-hero-prev { left: 6px; }
  .ll-hero-next { right: 6px; }
}

/* Below this the black bar cannot hold two labelled buttons and a full phone
   number, and hiding the phone on the device most likely to dial it is the
   worst thing a naive responsive layer can do. The number becomes a 44px
   icon-only tel: control instead. Threshold set from the measured content
   width of the row, not from a round number. */
@media (max-width: 560px) {
  .ll-top .ll-wrap { gap: 2px; }
  .ll-top a { padding: 8px; font-size: 14px; }
  .ll-top-tel .ll-tel-full  { display: none; }
  .ll-top-tel .ll-tel-short { display: block; }
  .ll-top-tel { min-width: 44px; min-height: 44px; justify-content: center; }
  .ll-logo img { width: 112px; height: 81px; }
  .ll-head .ll-wrap { min-height: 66px; }
}

@media (max-width: 380px) {
  .ll-top a span.ll-top-label { display: none; }
  .ll-top a { padding: 10px; }
}

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

@media print {
  .ll-top, .ll-burger, .ll-nav, .ll-hero-nav, .ll-dots, .ll-backdrop { display: none !important; }
  .ll-head { position: static; }
  body { color: #000; }
}