@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); }
/* ...and the band that follows it takes the same column, or its left-aligned
   heading sits 205px outside the article above it and reads as misaligned.
   The footer stays on the wide column: its content is centred, so it has no
   left edge to disagree with. */
.ll-main--read ~ .ll-clients .ll-wrap { max-width: var(--ll-read); }

.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; }
}