/*
Theme Name: Lil Handyman That Can
Theme URI: https://lilhandymanthatcan.mvp.sbarron.com
Author: Shane Barron
Author URI: https://sbarron.com
Description: Theme for Lil Handyman That Can. Train-car services, a mobile call and booking bar, Housecall Pro and Google review slots, service-area map.
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: lilhandyman
*/
/* Copyright (c) 2026 Shane Barron. All rights reserved. Not licensed for use, copying or hosting by anyone until the Upwork contract for this site is paid in full; ownership then passes to the client under that contract. */

:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cream: #FBF4E4;
  --paper: #FFFCF4;
  --ink: #1B2433;
  --red: #C8352A;
  --red-deep: #9E2820;
  --blue: #1F5FA8;
  --blue-deep: #143F73;
  --yellow: #F6C341;
  --green: #3E8E4A;
  --wood: #B9853F;
  --line: rgba(27, 36, 51, .14);
  --wrap: 1180px;
  --u: 8px;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --label: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --body: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --t-0: 1.0625rem;
  --t-1: 1.3rem;
  --t-2: 1.62rem;
  --t-3: 2.03rem;
  --t-4: 2.54rem;
  --t-5: 3.17rem;
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
html, body { overflow-x: clip; }
body { margin: 0; background-color: var(--cream); background-image: var(--noise), radial-gradient(rgba(185,133,63,.08) 1px, transparent 1.4px); background-size: 160px 160px, 9px 9px; background-blend-mode: multiply; color: var(--ink); font: 400 var(--t-0)/1.62 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lh-skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.lh-skip:focus { left: 16px; top: 16px; }

h1, h2, h3, h4 { margin: 0 0 calc(var(--u) * 2); line-height: 1.04; color: var(--ink); font-weight: 400; }
h1 { font: 400 clamp(2.9rem, 7.4vw, 5.8rem)/.96 var(--display); letter-spacing: .005em; }
h2 { font: 400 clamp(var(--t-3), 4vw, var(--t-5))/1.02 var(--display); }
h3 { font: 800 var(--t-1)/1.2 var(--label); font-stretch: 112%; letter-spacing: -.01em; }
p { margin: 0 0 calc(var(--u) * 2); }
ul, ol { padding-left: 1.2em; }

/* name plate (the yellow labels on his train cars) */
.lh-tape, .is-style-lh-tape {
  display: inline-block;
  font: 800 .82rem/1 var(--label); font-stretch: 112%;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); background: var(--yellow);
  padding: 9px 14px 8px; margin: 0 0 calc(var(--u) * 2.5);
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
}
.lh-lede { font-size: var(--t-1); line-height: 1.45; max-width: 48ch; opacity: .84; }
.lh-meta { font-size: .9rem; opacity: .72; }
.lh-sample, .lh-demo-note { font-size: .86rem; font-style: italic; opacity: .7; margin-top: calc(var(--u) * 1.5); }
.lh-demo-note { padding: 12px 14px; border: 2px dashed rgba(27,36,51,.3); border-radius: var(--r); font-style: normal; opacity: .85; background: var(--paper); }

/* buttons: chunky, like the logo lettering */
.lh-btn, .wp-block-button__link, .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 14px 26px;
  font: 400 1.18rem/1 var(--display); letter-spacing: .02em;
  color: #fff; background: var(--red);
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.lh-btn:hover, .wp-block-button__link:hover { color: #fff; background: var(--red-deep); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lh-btn:active, .wp-block-button__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lh-btn--yellow, .is-style-outline .wp-block-button__link { background: var(--yellow); color: var(--ink); }
.lh-btn--yellow:hover, .is-style-outline .wp-block-button__link:hover { background: #FFD55E; color: var(--ink); }
.lh-btn--small { min-height: 46px; padding: 10px 18px; font-size: 1.05rem; box-shadow: 3px 3px 0 var(--ink); }
.wp-block-buttons { gap: 14px; }

/* top bar + header */
.lh-topbar { background: var(--blue-deep); color: #fff; font: 700 .86rem/1 var(--body); }
.lh-topbar__in { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 9px 32px; display: flex; gap: 24px; align-items: center; }
.lh-topbar__vet { color: var(--yellow); letter-spacing: .04em; text-transform: uppercase; font-family: var(--label); font-weight: 800; font-size: .76rem; }
.lh-topbar__area { opacity: .85; }
.lh-topbar__tel { margin-left: auto; color: #fff; text-decoration: none; font: 400 1.05rem/1 var(--display); letter-spacing: .03em; }
@media (max-width: 760px) { .lh-topbar__area { display: none; } .lh-topbar__in { padding: 8px 16px; } }
.lh-header { position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--ink); }
.lh-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(251,244,228,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.admin-bar .lh-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .lh-header { top: 0; } }
.lh-header__in { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 8px 32px; display: flex; align-items: center; gap: 20px; }
.lh-brand { flex: none; display: block; }
.lh-brand .lh-logo { height: 64px; width: auto; }
.lh-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.lh-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lh-nav__list > li { position: relative; }
.lh-nav__list a { display: block; padding: 10px 11px; font: 800 .98rem/1 var(--label); font-stretch: 112%; text-decoration: none; color: var(--ink); border-radius: 8px; }
.lh-nav__list a:hover, .lh-nav__list .current-menu-item > a, .lh-nav__list .current-menu-ancestor > a { background: var(--yellow); }
.lh-nav__list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; list-style: none; margin: 0; padding: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 5px 5px 0 var(--ink); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; }
.lh-nav__list li:hover > .sub-menu, .lh-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.lh-nav__list .sub-menu a { font-family: var(--body); font-weight: 700; }
.lh-nav__cta { display: flex; gap: 10px; }
.lh-menu-btn { display: none; margin-left: auto; width: 50px; height: 50px; border: 3px solid var(--ink); border-radius: 10px; background: var(--yellow); cursor: pointer; position: relative; box-shadow: 3px 3px 0 var(--ink); }
.lh-menu-btn span:first-child, .lh-menu-btn span:first-child::before, .lh-menu-btn span:first-child::after { position: absolute; left: 11px; right: 11px; height: 3px; background: var(--ink); content: ''; border-radius: 2px; transition: .2s; }
.lh-menu-btn span:first-child { top: 21px; }
.lh-menu-btn span:first-child::before { left: 0; right: 0; top: -8px; }
.lh-menu-btn span:first-child::after { left: 0; right: 0; top: 8px; }
.lh-nav-open .lh-menu-btn span:first-child { background: transparent; }
.lh-nav-open .lh-menu-btn span:first-child::before { top: 0; transform: rotate(45deg); }
.lh-nav-open .lh-menu-btn span:first-child::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1080px) {
  .lh-header__in { padding: 6px 16px; }
  .lh-brand .lh-logo { height: 50px; }
  .lh-menu-btn { display: block; }
  .lh-nav { position: fixed; inset: var(--lh-nav-top, 104px) 0 0 0; background: var(--cream); flex-direction: column; align-items: stretch; gap: 0; padding: 16px 16px 120px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .lh-nav-open .lh-nav { opacity: 1; visibility: visible; transform: none; }
  .lh-nav-open { overflow: hidden; }
  .lh-nav__list { flex-direction: column; }
  .lh-nav__list a { padding: 15px 8px; font-size: 1.2rem; border-bottom: 2px solid var(--line); border-radius: 0; }
  .lh-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 16px; }
  .lh-nav__list .sub-menu a { font-size: 1.05rem; }
  .lh-nav__cta { flex-direction: column; padding-top: 20px; }
  .lh-nav__cta .lh-btn { width: 100%; }
}
@media (max-width: 760px) { .lh-nav { inset: var(--lh-nav-top, 88px) 0 0 0; } }

/* the track: rails + ties, used as dividers */
.lh-track { height: 22px; position: relative; background:
  linear-gradient(var(--ink), var(--ink)) 0 4px / 100% 4px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 15px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, var(--wood) 0 10px, transparent 10px 34px) 0 0 / 100% 22px no-repeat; }
.lh-track--footer { margin-top: 0; }

/* layout */
.lh-main { min-height: 60vh; }
.lh-content { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: calc(var(--u) * 4) 32px calc(var(--u) * 10); }
.lh-content--home { padding-top: 0; }
.lh-content > * { margin-top: 0; }
.lh-content > * + * { margin-top: calc(var(--u) * 3); }
.lh-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.lh-prose { max-width: 70ch; }
@media (max-width: 760px) { .lh-content { padding: calc(var(--u) * 3) 16px calc(var(--u) * 8); } }

.lh-pagehead { background-color: var(--blue); background-image: var(--noise), linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 160px 160px, 28px 28px, 28px 28px; background-position: 0 0, 0 calc(var(--bgshift, 0px)), 0 calc(var(--bgshift, 0px)); color: #fff; position: relative; border-bottom: 3px solid var(--ink); overflow: hidden; }
.lh-pagehead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background:
  linear-gradient(var(--ink), var(--ink)) 0 4px / 100% 4px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 15px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, var(--wood) 0 10px, transparent 10px 34px); opacity: .55; }
.lh-pagehead__in { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: calc(var(--u) * 5) 32px calc(var(--u) * 8); }
.lh-pagehead h1 { color: #fff; max-width: 16ch; text-shadow: 3px 3px 0 var(--ink); }
.lh-pagehead .lh-lede { color: #fff; opacity: .92; }
.lh-pagehead a { color: #fff; }
@media (max-width: 760px) { .lh-pagehead__in { padding: 24px 16px 52px; } }
.lh-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; font-size: .92rem; }
.lh-crumbs li + li::before { content: '›'; margin-right: 6px; opacity: .6; }
.lh-crumbs [aria-current] { opacity: .8; }

.lh-section { padding: calc(var(--u) * 9) 0; }
.lh-section + .lh-section { border-top: 2px dashed var(--line); }
.lh-head { max-width: 780px; margin-bottom: calc(var(--u) * 5); }
.lh-head p { font-size: var(--t-1); line-height: 1.45; opacity: .82; max-width: 54ch; }
.lh-center { text-align: center; }
.lh-center > * { margin-left: auto; margin-right: auto; }

/* hero: split, photo on one side, text on the other */
.lh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(86vh, 860px); margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw; max-width: 100vw; background-color: var(--blue-deep); background-image: var(--noise), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); border-bottom: 3px solid var(--ink); }
.lh-hero__text { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(56px, 6vw, 88px) max(16px, calc((100vw - var(--wrap)) / 2)); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.lh-hero__bg { grid-column: 2; grid-row: 1; position: relative; margin: 0; overflow: hidden; border-left: 3px solid var(--ink); box-shadow: inset 12px 0 30px rgba(0,0,0,.25); }
.lh-hero__bg img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 55% 40%; transform: translate3d(0, var(--shift, 0px), 0) scale(1.02); will-change: transform; }
.lh-hero__logo { margin: 0 0 18px -8px; max-width: 480px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)) drop-shadow(0 4px 6px rgba(0,0,0,.3)); transform: translate3d(0, var(--shift, 0px), 0); }
.lh-hero__logo img { width: 100%; height: auto; }
.lh-hero h1 { color: #fff; text-shadow: 4px 4px 0 var(--ink), 0 14px 30px rgba(0,0,0,.35); font-size: clamp(2.6rem, 4.8vw, 4.4rem); }
.lh-hero .lh-lede { color: #fff; opacity: .95; }
.lh-badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 0; }
.lh-badges li { font: 800 .8rem/1 var(--label); font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.55); color: #fff; }
.lh-badges li:first-child { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.lh-hero .lh-sample { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; z-index: 3; margin: 12px 14px 0 0; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.lh-hero__track { grid-column: 1 / -1; grid-row: 1; align-self: end; position: relative; z-index: 3; }
@media (max-width: 900px) {
  .lh-hero { grid-template-columns: 1fr; min-height: 0; }
  .lh-hero__bg { grid-column: 1; grid-row: 1; height: 66vw; max-height: 460px; border-left: 0; border-bottom: 3px solid var(--ink); box-shadow: none; }
  .lh-hero__text { grid-column: 1; grid-row: 2; padding: 22px 16px 54px; }
  .lh-hero__logo { max-width: 330px; margin: -88px auto 12px; }
  .lh-hero .lh-sample { grid-column: 1; grid-row: 1; font-size: .78rem; }
  .lh-hero__track { grid-row: 2; }
}

/* the train: services as cars */
.is-style-lh-train { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 54px; position: relative; scrollbar-width: thin; }
.is-style-lh-train::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 22px; min-width: 100%; background:
  linear-gradient(var(--ink), var(--ink)) 0 4px / 100% 4px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 15px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, var(--wood) 0 10px, transparent 10px 34px); pointer-events: none; }
.is-style-lh-car {
  --car: var(--red);
  position: relative; flex: 0 0 236px; scroll-snap-align: start;
  margin-right: 26px; background: var(--car); color: #fff;
  border: 3px solid var(--ink); border-radius: 14px 14px 8px 8px;
  padding: 16px 16px 20px; box-shadow: 5px 5px 0 var(--ink);
  display: flex; flex-direction: column; min-height: 300px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.is-style-lh-car:last-child { margin-right: 0; }
.is-style-lh-car::before, .is-style-lh-car::after { content: ''; position: absolute; bottom: -24px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, var(--yellow) 0 28%, var(--ink) 29% 40%, var(--blue) 41% 70%, var(--ink) 71%); z-index: 1; }
.is-style-lh-car::before { left: 22px; }
.is-style-lh-car::after { right: 22px; }
.is-style-lh-car .lh-car__coupler { position: absolute; right: -29px; top: 62%; width: 29px; height: 6px; background: var(--ink); margin: 0; }
.is-style-lh-car:last-child .lh-car__coupler { display: none; }
.is-style-lh-car .lh-car__img { margin: 0 0 14px; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--yellow); }
.is-style-lh-car .lh-car__img img { width: 100%; height: 100%; object-fit: cover; }
.is-style-lh-car h3 { margin: 0 0 8px; }
.is-style-lh-car h3 a { display: inline-block; color: var(--ink); background: var(--yellow); text-decoration: none; padding: 7px 10px 6px; border: 3px solid var(--ink); border-radius: 6px; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; }
.is-style-lh-car h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.is-style-lh-car p { font-size: .95rem; line-height: 1.45; margin: 0 0 10px; color: #fff; }
.is-style-lh-car .lh-car__go { margin-top: auto; font: 400 1.05rem/1 var(--display); }
.is-style-lh-car:hover, .is-style-lh-car:focus-within { transform: translateY(-8px); }
.is-style-lh-car:nth-child(7n+1) { --car: var(--red); }
.is-style-lh-car:nth-child(7n+2) { --car: var(--green); }
.is-style-lh-car:nth-child(7n+3) { --car: var(--red-deep); }
.is-style-lh-car:nth-child(7n+4) { --car: var(--wood); }
.is-style-lh-car:nth-child(7n+5) { --car: var(--blue); }
.is-style-lh-car:nth-child(7n+6) { --car: var(--red); }
.is-style-lh-car:nth-child(7n+7) { --car: var(--blue-deep); }
.is-style-lh-car:nth-child(7n+4) p, .is-style-lh-car:nth-child(7n+4) .lh-car__go { color: var(--ink); }
.lh-motion .is-style-lh-train:not(.is-in) .is-style-lh-car { transform: translateX(120px); opacity: 0; }
.lh-motion .is-style-lh-train .is-style-lh-car { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s; }
.lh-train-hint { font-size: .9rem; opacity: .7; margin-top: 0 !important; }
@media (min-width: 1240px) { .lh-train-hint { display: none; } }

/* trust row */
.lh-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lh-trust > * { margin: 0 !important; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); padding: 20px 18px 16px; box-shadow: 4px 4px 0 var(--ink); }
.lh-trust h3 { font-size: 1.02rem; margin-bottom: 6px; }
.lh-trust p { font-size: .94rem; margin: 0; opacity: .82; }
.lh-trust > *:nth-child(1) { background: var(--yellow); }
@media (max-width: 900px) { .lh-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lh-trust { grid-template-columns: 1fr; } }

.lh-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lh-steps > * { margin: 0 !important; position: relative; padding-top: 70px; }
.lh-steps > *::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; border: 3px solid var(--ink); font: 400 1.7rem/48px var(--display); text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.lh-steps > *:nth-child(2)::before { background: var(--blue); }
.lh-steps > *:nth-child(3)::before { background: var(--green); }
.lh-steps > *:nth-child(4)::before { background: var(--yellow); color: var(--ink); }
.lh-steps p { font-size: .96rem; opacity: .84; }
@media (max-width: 900px) { .lh-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lh-steps { grid-template-columns: 1fr; } }

/* media + text */
.wp-block-media-text .wp-block-media-text__media img { border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); }
.wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 clamp(16px, 4vw, 56px); }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 clamp(16px, 4vw, 56px) 0 0; }
@media (max-width: 600px) { .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 28px 0 0; } }
.lh-ticks { list-style: none; padding: 0; }
.lh-ticks li { padding-left: 32px; position: relative; margin-bottom: 9px; }
.lh-ticks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font: 800 .8rem/22px var(--body); text-align: center; }
.lh-note-box { background: var(--paper); border: 3px solid var(--ink); border-left-width: 10px; border-left-color: var(--yellow); border-radius: var(--r); padding: 18px 20px; }

/* recent jobs */
.lh-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.lh-filter button { min-height: 44px; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); font: 800 .9rem/1 var(--label); font-stretch: 112%; color: var(--ink); cursor: pointer; }
.lh-filter button.is-on { background: var(--blue); color: #fff; }
.lh-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lh-job[hidden] { display: none; }
.lh-job a { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); overflow: hidden; height: 100%; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.lh-job a:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.lh-job img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-bottom: 3px solid var(--ink); }
.lh-job__body { padding: 14px 16px 16px; }
.lh-job__type { font: 800 .74rem/1 var(--label); text-transform: uppercase; letter-spacing: .12em; color: var(--red); margin-bottom: 8px; }
.lh-job h3 { font-size: 1.1rem; margin-bottom: 4px; }
.lh-job__where { margin: 0; font-size: .92rem; opacity: .72; }
@media (max-width: 900px) { .lh-jobs { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 560px) { .lh-jobs { grid-template-columns: 1fr; } }
.lh-motion .lh-jobs:not(.is-in) .lh-job { opacity: 0; transform: translateY(20px); }
.lh-motion .lh-jobs .lh-job { transition: opacity .5s, transform .5s; }
.lh-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 24px 0; border: 3px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.lh-facts > div { padding: 14px 20px; border-right: 2px solid var(--line); }
.lh-facts dt { font: 800 .72rem/1 var(--label); text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-bottom: 6px; }
.lh-facts dd { margin: 0; font-weight: 700; }

/* before/after */
.lh-ba-wrap { margin: 0; }
.lh-ba { position: relative; margin: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: var(--r); aspect-ratio: 3 / 2; background: #ddd; user-select: none; touch-action: pan-y; }
.lh-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.lh-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.lh-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 100vh; }
.lh-ba__range::-moz-range-thumb { width: 64px; height: 100vh; border: 0; }
.lh-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; z-index: 2; pointer-events: none; }
.lh-ba__handle::after { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); color: var(--ink); font: 800 .78rem/52px var(--body); text-align: center; letter-spacing: 2px; }
.lh-ba__tag { position: absolute; top: 12px; z-index: 2; font: 800 .74rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: #fff; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 6px; pointer-events: none; }
.lh-ba__tag--before { left: 12px; }
.lh-ba__tag--after { right: 12px; background: var(--yellow); }

/* reviews */
.lh-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lh-review { margin: 0; padding: 22px 22px 18px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; }
.lh-review__stars { color: #E2A100; letter-spacing: 3px; font-size: 1.15rem; margin-bottom: 8px; text-shadow: 1px 1px 0 var(--ink); }
.lh-review footer { margin-top: auto; font-size: .92rem; }
.lh-review footer span { display: block; opacity: .68; }
.lh-google-sum { margin-top: 16px; }
@media (max-width: 900px) { .lh-reviews { grid-template-columns: 1fr; } }

/* service area */
.lh-areas { list-style: none; padding: 0; columns: 4 170px; column-gap: 24px; }
.lh-areas li { padding: 9px 0; border-bottom: 2px dashed var(--line); break-inside: avoid; font-weight: 700; }
.lh-areas li::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 10px; background: var(--red); border: 2px solid var(--ink); border-radius: 50%; }
.lh-map { margin: 0; }
.lh-map:not(.lh-zipmap) svg { width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); background: #F3E6C4; }
.lh-map__land { fill: #F3E6C4; }
.lh-map__sea { fill: #8FC1E8; }
.lh-map__rail { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; opacity: .55; }
.lh-map__ties { fill: none; stroke: var(--wood); stroke-width: 14; stroke-dasharray: 3 12; opacity: .6; }
.lh-map__ocean { font: 400 22px var(--display); fill: #fff; opacity: .9; }
.lh-map__pin circle { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.lh-map__pin text { font: 800 14px var(--label); fill: var(--ink); paint-order: stroke; stroke: #F3E6C4; stroke-width: 4px; }
.lh-map figcaption { font-size: .86rem; font-style: italic; opacity: .7; margin-top: 12px; }
.lh-map--google iframe { width: 100%; height: 460px; border: 3px solid var(--ink); border-radius: var(--r); }
.wp-block-columns { gap: 36px; }

/* forms */
.lh-form, .lh-quote, .lh-book, .lh-contact { max-width: 880px; }
.lh-form label { display: block; font: 800 .95rem/1.3 var(--body); }
.lh-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .lh-form select, .lh-form textarea { display: block; width: 100%; margin-top: 8px; min-height: 52px; padding: 12px 14px; font: 400 1rem/1.4 var(--body); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 10px; }
.lh-form input[type=file] { display: block; margin-top: 8px; font: 400 .95rem var(--body); max-width: 100%; }
.lh-form :is(input, select, textarea):focus { outline: none; box-shadow: 0 0 0 4px var(--yellow); }
.lh-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .lh-grid2 { grid-template-columns: 1fr; } }
.lh-hp { position: absolute; left: -9999px; }
.lh-done, .lh-err { padding: 16px 18px; border-radius: 10px; font-weight: 800; border: 3px solid var(--ink); }
.lh-done { background: #D8EED9; }
.lh-err { background: #F6D3CF; }
.lh-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.lh-day { border: 3px solid var(--ink); border-radius: 10px; padding: 10px; margin: 0; background: var(--paper); min-width: 0; }
.lh-day legend { padding: 0 6px; font-size: .9rem; background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; }
.lh-day.is-full { opacity: .5; }
.lh-slot { display: block; margin-top: 6px; }
.lh-slot input { position: absolute; opacity: 0; }
.lh-slot span { display: block; text-align: center; min-height: 44px; line-height: 38px; border: 3px solid var(--ink); border-radius: 8px; font-weight: 800; font-size: .95rem; cursor: pointer; background: #fff; }
.lh-slot input:checked + span { background: var(--red); color: #fff; }
.lh-slot input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lh-slot.is-taken span { text-decoration: line-through; opacity: .5; cursor: not-allowed; font-size: .8rem; }
.lh-book__hint { font-size: .95rem; opacity: .78; margin-bottom: 0; }
.lh-book__for { max-width: 380px; }
.lh-hcp { margin: 8px 0; }

/* cta band */
.lh-cta-band { margin-top: calc(var(--u) * 8) !important; padding: clamp(30px, 5vw, 56px); background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); position: relative; overflow: hidden; }
.lh-cta-band h2, .lh-cta-band p { color: #fff; }
.lh-cta-band h2 { text-shadow: 3px 3px 0 var(--ink); }
.lh-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--yellow); color: var(--ink); }
.lh-cta-band .is-style-outline .wp-block-button__link { background: #fff; color: var(--ink); }
.lh-cta-band .lh-btn { background: var(--yellow); color: var(--ink); }
.lh-cta-band .lh-btn--ghost { background: #fff; }
.lh-cta-band .lh-tape { background: #fff; }
.lh-cta-band a:not(.wp-block-button__link):not(.lh-btn) { color: #fff; }

/* posts */
.lh-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lh-post a { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); overflow: hidden; height: 100%; box-shadow: 4px 4px 0 var(--ink); }
.lh-post img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-bottom: 3px solid var(--ink); }
.lh-post__body { padding: 16px 18px 20px; }
.lh-post h2 { font-size: 1.4rem; margin-bottom: 8px; }
.lh-post p { font-size: .95rem; opacity: .82; }
.lh-more-link { font-weight: 800; color: var(--red); }
@media (max-width: 900px) { .lh-posts { grid-template-columns: 1fr; } }
.lh-postimg img { width: 100%; border: 3px solid var(--ink); border-radius: var(--r); max-height: 520px; object-fit: cover; }
.lh-prose h2 { font-size: var(--t-3); margin-top: 40px; }

/* faq */
.lh-faq details { border: 3px solid var(--ink); border-radius: 10px; padding: 14px 18px; background: var(--paper); margin-bottom: 12px; }
.lh-faq summary { cursor: pointer; font: 800 1.05rem/1.3 var(--label); font-stretch: 112%; list-style: none; padding-right: 32px; position: relative; }
.lh-faq summary::after { content: '+'; position: absolute; right: 0; top: -4px; font: 400 1.8rem/1 var(--display); color: var(--red); }
.lh-faq details[open] summary::after { content: '–'; }
.lh-faq details p { margin: 12px 0 0; max-width: 70ch; }

/* footer */
.lh-footer { background-color: var(--ink); background-image: var(--noise); color: #fff; }
.lh-footer__in { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 56px 32px 28px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; }
.lh-footer h2 { font: 800 .8rem/1 var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--yellow); margin-bottom: 16px; }
.lh-footer p, .lh-footer li { color: rgba(255,255,255,.86); font-size: .95rem; }
.lh-footer a { color: #fff; }
.lh-footer ul { list-style: none; padding: 0; margin: 0; }
.lh-footer li { margin-bottom: 10px; }
.lh-footer__brand .lh-logo { width: 280px; height: auto; background: transparent; }
.lh-footer__brand p { max-width: 34ch; margin-top: 14px; }
.lh-footer__tel { font: 400 1.5rem/1 var(--display); text-decoration: none; color: var(--yellow) !important; }
.lh-footer__menu a { text-decoration: none; }
.lh-footer__cslb { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 0 32px 8px; font-size: .82rem; color: rgba(255,255,255,.7); }
.lh-footer__base { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 18px 32px 28px; border-top: 1px solid rgba(255,255,255,.15); font-size: .84rem; color: rgba(255,255,255,.65); }
@media (max-width: 900px) { .lh-footer__in { grid-template-columns: 1fr 1fr; padding: 44px 16px 22px; } .lh-footer__cslb, .lh-footer__base { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 560px) { .lh-footer__in { grid-template-columns: 1fr; } .lh-footer__base { padding-bottom: 96px; } }

/* Kevin spec 6: Book Now floats alone, lower right, resting above the chat box */
.lh-float-book {
  position: fixed; right: 24px; bottom: 96px; z-index: 72;
  display: inline-flex; align-items: center; min-height: 52px; padding: 12px 24px;
  font: 400 1.15rem/1 var(--display); letter-spacing: .02em; color: #fff !important; text-decoration: none;
  background: var(--red); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 4px 10px rgba(0,0,0,.2), 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lh-float-book:hover { transform: translate(-2px, -2px); }
.lh-chat-open .lh-float-book, .lh-nav-open .lh-float-book, .lh-tools-open .lh-float-book { display: none; }
@media (max-width: 760px) {
  .lh-float-book { right: 16px; bottom: calc(85px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 12px 22px; font-size: 1.05rem; }
  .lh-chat { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  .lh-main { padding-bottom: 0; }
  body { padding-bottom: 0; }
  .lh-footer__base { padding-bottom: 140px !important; }
}

/* Kevin spec 7: utility row, Site Tools next to the chat */
.lh-utility { display: flex; gap: 4%; justify-content: center; max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 20px 16px; }
.lh-utility button {
  flex: 0 1 48%; max-width: 320px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 1.08rem/1 var(--display); letter-spacing: .02em; color: var(--ink); background: #fff;
  border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
.lh-utility__chat { background: var(--yellow) !important; }
.lh-utility button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Site Tools bottom sheet */
.lh-tools { position: fixed; inset: 0; z-index: 90; }
.lh-tools[hidden] { display: none; }
.lh-tools__scrim { position: absolute; inset: 0; background: rgba(27,36,51,.5); opacity: 0; transition: opacity .25s ease; }
.lh-tools__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 760px; margin: 0 auto; max-height: min(86vh, 720px);
  display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--ink); border-bottom: 0;
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lh-tools.is-up .lh-tools__scrim { opacity: 1; }
.lh-tools.is-up .lh-tools__sheet { transform: none; }
.lh-tools__grip { width: 48px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: rgba(27,36,51,.3); }
.lh-tools__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 6px 22px; }
.lh-tools__head h2 { margin: 0; font: 400 1.6rem/1.1 var(--display); }
.lh-tools__close { width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.lh-tools__tabs { display: flex; gap: 6px; padding: 6px 12px 0; border-bottom: 3px solid var(--ink); }
.lh-tools__tabs button {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 8px; font: 700 .95rem/1.15 var(--body); color: var(--ink); background: var(--cream);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer; text-align: center;
}
.lh-tools__tabs button[aria-selected="true"] { background: var(--yellow); }
.lh-tools__pane { padding: 18px 22px 24px; overflow-y: auto; }
.lh-tools__pane h3 { margin: 0 0 12px; font: 400 1.35rem/1.15 var(--display); }
.lh-tools__pane p { margin: 0 0 12px; line-height: 1.55; }
.lh-tools__facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 16px; }
.lh-tools__facts dt { font-weight: 700; }
.lh-tools__facts dd { margin: 0; }
.lh-tools__badges { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lh-tools__badges li { padding: 8px 12px; font-weight: 700; font-size: .92rem; background: #fff; border: 2px solid var(--ink); border-radius: 20px; }
.lh-tools__acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .lh-tools__tabs button { font-size: .82rem; } .lh-tools__facts { grid-template-columns: 1fr; gap: 2px; } .lh-tools__facts dd { margin-bottom: 10px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.lh-jobphoto { margin: 0; } .lh-jobphoto img { width: 100%; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); max-height: 640px; object-fit: cover; }
.lh-content.lh-content--home { padding-top: 0; }
@media (max-width: 760px) {
  .lh-topbar__vet { font-size: .66rem; white-space: nowrap; }
  .lh-topbar__tel { white-space: nowrap; font-size: .98rem; }
}
@media (max-width: 440px) { .lh-topbar__vet { font-size: .6rem; } .lh-topbar__tel { font-size: .9rem; } .lh-topbar__in { gap: 12px; } }

/* depth: layered shadows */
.lh-job a, .lh-review, .lh-trust > *, .lh-post a, .lh-faq details, .lh-day { box-shadow: 4px 4px 0 var(--ink), 0 18px 34px -12px rgba(27,36,51,.35); }
.lh-job a:hover { box-shadow: 7px 7px 0 var(--ink), 0 26px 44px -14px rgba(27,36,51,.45); }
.is-style-lh-car { box-shadow: 5px 5px 0 var(--ink), 0 24px 36px -16px rgba(27,36,51,.5); background-image: var(--noise), linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08)); background-blend-mode: soft-light, normal; }
.is-style-lh-car:nth-child(7n+4) { background-image: var(--noise), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px), linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08)); }
.lh-cta-band { background-image: var(--noise), repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); box-shadow: 8px 8px 0 var(--ink), 0 30px 50px -20px rgba(27,36,51,.5); }
.lh-btn, .wp-block-button__link { box-shadow: 4px 4px 0 var(--ink), 0 10px 18px -8px rgba(27,36,51,.45); }
.wp-block-media-text .wp-block-media-text__media { overflow: hidden; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink), 0 26px 44px -18px rgba(27,36,51,.5); }
.wp-block-media-text .wp-block-media-text__media img { border: 0; border-radius: 0; box-shadow: none; transform: translate3d(0, var(--shift, 0px), 0) scale(1.14); will-change: transform; }
.lh-map:not(.lh-zipmap) svg { box-shadow: 6px 6px 0 var(--ink), 0 26px 44px -18px rgba(27,36,51,.45); }
.lh-pagehead h1 { text-shadow: 3px 3px 0 var(--ink), 0 14px 30px rgba(0,0,0,.3); }
.lh-motion .lh-rise { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.lh-motion .lh-rise.is-in { opacity: 1; transform: none; }
@media (max-width: 760px) { .lh-hero, .lh-content > .alignfull { width: auto !important; max-width: none !important; margin-left: -16px !important; margin-right: -16px !important; } }

/* the engine at the front of the train */
.lh-engine { position: relative; flex: 0 0 300px; align-self: stretch; min-height: 300px; margin-left: 4px; outline: none; cursor: pointer; }
.lh-engine__img { position: absolute; left: 0; right: 0; bottom: -22px; z-index: 2; display: block; width: 100%; height: auto; max-height: 330px; object-fit: contain; object-position: bottom; transition: opacity .35s ease; }
.lh-engine__photo { position: absolute; z-index: 1; left: 12%; right: 12%; top: 6%; bottom: 8%; border: 4px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--ink); opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .35s ease; }
.lh-engine__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-engine.has-photo:hover .lh-engine__img, .lh-engine.has-photo:focus .lh-engine__img, .lh-engine.has-photo.is-open .lh-engine__img { opacity: .12; }
.lh-engine.has-photo:hover .lh-engine__photo, .lh-engine.has-photo:focus .lh-engine__photo, .lh-engine.has-photo.is-open .lh-engine__photo { opacity: 1; transform: none; }
.lh-engine__art { height: 290px; bottom: 0; }
.lh-engine__art > span { position: absolute; border: 3px solid var(--ink); }
.lh-e-cab { left: 0; bottom: 44px; width: 104px; height: 176px; background: var(--blue); border-radius: 12px 12px 4px 4px; box-shadow: 5px 5px 0 var(--ink); }
.lh-e-cab::before { content: ''; position: absolute; left: -10px; right: -10px; top: -16px; height: 18px; background: var(--red); border: 3px solid var(--ink); border-radius: 8px; }
.lh-e-win { position: absolute; left: 18px; right: 18px; top: 26px; height: 52px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 8px; }
.lh-e-boiler { left: 98px; bottom: 44px; width: 156px; height: 118px; background: var(--red); border-radius: 10px 58px 58px 10px; box-shadow: 5px 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; padding: 0 22px 0 10px; }
.lh-e-name { position: static !important; border: 0 !important; color: var(--yellow); font: 400 .92rem/1.05 var(--display); text-align: center; text-shadow: 2px 2px 0 var(--ink); }
.lh-e-stack { left: 170px; bottom: 158px; width: 34px; height: 64px; background: var(--ink); border-radius: 4px 4px 0 0; }
.lh-e-stack::before { content: ''; position: absolute; left: -11px; right: -11px; top: -14px; height: 16px; background: var(--ink); border-radius: 6px; }
.lh-e-front { left: 236px; bottom: 70px; width: 34px; height: 66px; background: var(--yellow); border-radius: 50%; }
.lh-e-catcher { right: 0; bottom: 18px; width: 62px; height: 44px; background: var(--yellow); clip-path: polygon(0 0, 100% 100%, 0 100%); border: 0 !important; }
.lh-e-wheel { bottom: -24px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, var(--yellow) 0 26%, var(--ink) 27% 38%, var(--blue) 39% 70%, var(--ink) 71%); border: 0 !important; z-index: 2; }
.lh-e-wheel--1 { left: 18px; } .lh-e-wheel--2 { left: 118px; } .lh-e-wheel--3 { left: 186px; }
.lh-train.is-rolling { scroll-snap-type: none; }
@media (max-width: 640px) { .lh-engine { flex-basis: 250px; min-height: 280px; } .lh-engine__art { transform: scale(.82); transform-origin: left bottom; } }
.lh-train::after { display: none; }
.lh-train {
  background:
    linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 36px - var(--rail-lift, 0px)) / 100% 4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 25px - var(--rail-lift, 0px)) / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--wood) 0 10px, transparent 10px 34px) 0 calc(100% - 18px - var(--rail-lift, 0px)) / 100% 22px no-repeat;
  background-attachment: local;
}
.lh-engine { flex-basis: 410px; }
.lh-engine__art { transform: scale(1.38); transform-origin: left bottom; }
@media (max-width: 640px) { .lh-engine { flex-basis: 330px; } .lh-engine__art { transform: scale(1.1); } }
.lh-e-catcher { right: auto; left: 252px; bottom: 6px; width: 46px; height: 40px; }
.lh-engine__art .lh-e-wheel { bottom: -14px; }
.lh-train { scrollbar-width: none; -ms-overflow-style: none; }
.lh-train::-webkit-scrollbar { display: none; }
.lh-train { padding-top: 90px; }
.lh-engine { flex-basis: 520px; }
.lh-engine__art { transform: scale(1.75); }
.lh-engine__img:not(.lh-engine__art) { max-height: 470px; }
.lh-engine__photo { top: -12%; bottom: 4%; left: 8%; right: 18%; }
@media (max-width: 640px) { .lh-train { padding-top: 50px; } .lh-engine { flex-basis: 400px; } .lh-engine__art { transform: scale(1.35); } }
.lh-engine__art { right: auto; width: 300px; }
.lh-e-catcher { left: 246px; bottom: -6px; width: 52px; height: 42px; }
.lh-engine { flex-basis: 540px; }
@media (max-width: 640px) { .lh-engine { flex-basis: 420px; } }
.lh-engine { scroll-snap-align: end; }
@media (max-width: 640px) { .lh-engine { flex-basis: 320px; } .lh-engine__art { transform: scale(1.05); } .lh-engine__img:not(.lh-engine__art) { max-height: 320px; } }

/* sideways parallax, driven by scroll */
.lh-hero__bg img, .lh-hero__logo, .lh-section .lh-head, .lh-jobs, .lh-reviews, .lh-steps, .lh-trust, .wp-block-media-text__media img, .wp-block-media-text__content { translate: var(--xshift, 0px) 0; }
.lh-hero__bg img { scale: 1.05; }
.lh-pagehead { background-position: 0 0, var(--bgxshift, 0px) var(--bgshift, 0px), var(--bgxshift, 0px) var(--bgshift, 0px); }
.lh-cta-band { background-position: 0 0, var(--bgxshift, 0px) 0; }
.lh-track { background-position: 0 4px, 0 15px, var(--tie, 0px) 0; background-size: 100% 4px, 100% 4px, 34px 22px; background-repeat: no-repeat, no-repeat, repeat-x; }
@media (prefers-reduced-motion: reduce) { .lh-hero__bg img, .lh-hero__logo, .lh-section .lh-head, .lh-jobs, .lh-reviews, .lh-steps, .lh-trust, .wp-block-media-text__media img, .wp-block-media-text__content { translate: none; } }
.lh-engine__photo { top: 46%; left: 48%; right: auto; bottom: auto; width: 48%; aspect-ratio: 4 / 5; transform: translate(-50%, -50%) scale(.94); }
.lh-engine.has-photo:hover .lh-engine__photo, .lh-engine.has-photo:focus .lh-engine__photo, .lh-engine.has-photo.is-open .lh-engine__photo { transform: translate(-50%, -50%); }
.lh-engine__photo { top: 42%; }
.lh-engine.has-photo:hover .lh-engine__photo, .lh-engine.has-photo:focus .lh-engine__photo, .lh-engine.has-photo.is-open .lh-engine__photo { z-index: 3; }
.lh-cta-band .lh-tape { color: var(--ink); }
.lh-engine--drawn .lh-engine__photo { --ew: 525px; --eh: 507px; top: auto; left: calc(var(--ew) / 2); bottom: calc(var(--eh) / 2); width: calc(var(--ew) / 2); transform: translate(-50%, 50%) scale(.94); }
.lh-engine--drawn.has-photo:hover .lh-engine__photo, .lh-engine--drawn.has-photo:focus .lh-engine__photo, .lh-engine--drawn.has-photo.is-open .lh-engine__photo { transform: translate(-50%, 50%); }
@media (max-width: 640px) { .lh-engine--drawn .lh-engine__photo { --ew: 315px; --eh: 304px; } }

/* hero: the photo fills the whole hero, the words sit over it */
.lh-hero { grid-template-columns: minmax(0, 1fr); }
.lh-hero__bg { grid-column: 1; grid-row: 1; border-left: 0; box-shadow: none; z-index: 0; }
.lh-hero__bg::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(17, 38, 74, .94) 0%, rgba(17, 38, 74, .84) 34%, rgba(17, 38, 74, .38) 62%, rgba(17, 38, 74, .08) 100%), linear-gradient(0deg, rgba(17, 38, 74, .5), transparent 30%); }
.lh-hero__bg img { scale: 1.08; }
.lh-hero__text { grid-column: 1; grid-row: 1; max-width: calc(max(16px, (100vw - var(--wrap)) / 2) + 640px); }
.lh-hero .lh-sample { grid-column: 1; justify-self: end; }
@media (max-width: 760px) {
  .lh-hero__bg { grid-row: 1; height: auto; max-height: none; border-bottom: 0; }
  .lh-hero__bg::after { background: linear-gradient(180deg, rgba(17, 38, 74, .55) 0%, rgba(17, 38, 74, .8) 45%, rgba(17, 38, 74, .94) 100%); }
  .lh-hero__text { grid-row: 1; max-width: none; padding: 28px 16px 64px; }
  .lh-hero__logo { margin: 0 auto 14px; }
  .lh-hero__track { grid-row: 1; }
}
.lh-hero__bg img { will-change: auto; }
@media (max-width: 760px) { .lh-hero__bg::after { background: linear-gradient(180deg, rgba(17, 38, 74, .2) 0%, rgba(17, 38, 74, .55) 40%, rgba(17, 38, 74, .82) 100%); } .lh-hero h1, .lh-hero .lh-lede { text-shadow: 3px 3px 0 var(--ink), 0 4px 18px rgba(0,0,0,.6); } }

/* things slide in from the left or right once, then stay */
.lh-hero__bg img, .lh-hero__logo, .lh-section .lh-head, .lh-jobs, .lh-reviews, .lh-steps, .lh-trust, .wp-block-media-text__media img, .wp-block-media-text__content { translate: none; }
.lh-motion .lh-from-left, .lh-motion .lh-from-right { opacity: 0; transition: translate .9s cubic-bezier(.2, .75, .2, 1), opacity .7s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.lh-motion .lh-from-left { translate: -90px 0; }
.lh-motion .lh-from-right { translate: 90px 0; }
.lh-motion .lh-from-left.is-in, .lh-motion .lh-from-right.is-in { opacity: 1; translate: 0 0; }
@media (max-width: 640px) { .lh-motion .lh-from-left { translate: -40px 0; } .lh-motion .lh-from-right { translate: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .lh-motion .lh-from-left, .lh-motion .lh-from-right { opacity: 1; translate: none; transition: none; } }
.lh-motion .lh-jobs .lh-job.lh-from-left, .lh-motion .lh-jobs .lh-job.lh-from-right { transform: none; transition: translate .9s cubic-bezier(.2, .75, .2, 1), opacity .7s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.lh-motion .lh-jobs:not(.is-in) .lh-job.lh-from-left, .lh-motion .lh-jobs:not(.is-in) .lh-job.lh-from-right { opacity: 0; }

/* large screens: spread the hero out. Words lower left, logo sticker upper right, badges lower right */
@media (min-width: 1100px) {
  .lh-hero__text { max-width: none; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; column-gap: 40px; padding-right: max(16px, calc((100vw - var(--wrap)) / 2)); padding-top: 48px; }
  .lh-hero__logo { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; max-width: 360px; margin: 0; rotate: 3deg; }
  .lh-hero h1 { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 14px; }
  .lh-hero .lh-lede { grid-column: 1; grid-row: 3; }
  .lh-hero__text > .wp-block-buttons { grid-column: 1; grid-row: 4; }
  .lh-hero .lh-badges { grid-column: 2; grid-row: 4; justify-self: end; align-self: end; justify-content: flex-end; max-width: 460px; margin: 0; }
  .lh-hero__bg::after { background: linear-gradient(90deg, rgba(17, 38, 74, .9) 0%, rgba(17, 38, 74, .72) 32%, rgba(17, 38, 74, .2) 58%, rgba(17, 38, 74, .12) 78%, rgba(17, 38, 74, .45) 100%), linear-gradient(0deg, rgba(17, 38, 74, .6), transparent 32%); }
}
.lh-hero__bg img { scale: -1.04 1.04; object-position: 40% 35%; }
@media (min-width: 1100px) {
  .lh-hero__text { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; align-content: stretch; }
  .lh-hero h1 { grid-column: 1; grid-row: 2; align-self: end; }
  .lh-hero .lh-lede { grid-column: 1; grid-row: 3; }
  .lh-hero .lh-badges { grid-column: 1; grid-row: 4; justify-self: start; justify-content: flex-start; max-width: none; margin: 22px 0 0; }
  .lh-hero__logo { grid-column: 2; grid-row: 2 / 4; justify-self: center; align-self: end; max-width: 440px; width: 100%; margin: 0 0 22px; rotate: 2deg; }
  .lh-hero__text > .wp-block-buttons { grid-column: 2; grid-row: 4; justify-self: center; align-self: start; justify-content: center; margin: 0; }
}
@media (min-width: 1100px) {
  .lh-hero__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 56px; }
  .lh-hero h1 { font-size: clamp(2.3rem, 3.7vw, 3.5rem); }
  .lh-hero__logo { max-width: 540px; }
}
.lh-hero__bg img { scale: 1.04; object-position: 50% 40%; }
.lh-engine__photo { aspect-ratio: 3 / 2; }
.lh-engine--drawn .lh-engine__photo { width: calc(var(--ew) * .6); }
.lh-engine.has-photo:hover .lh-engine__img, .lh-engine.has-photo:focus .lh-engine__img, .lh-engine.has-photo.is-open .lh-engine__img { opacity: 0; }
.lh-engine.has-photo:hover .lh-engine__img, .lh-engine.has-photo:focus .lh-engine__img, .lh-engine.has-photo.is-open .lh-engine__img { opacity: 1; }
.lh-engine__photo { z-index: 5; pointer-events: none; }

/* trust cards: lift, tilt and a colour stripe on hover */
.lh-trust > * { --c: var(--red); position: relative; overflow: hidden; cursor: default; transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease; }
.lh-trust > *:nth-child(2) { --c: var(--blue); } .lh-trust > *:nth-child(3) { --c: var(--green); } .lh-trust > *:nth-child(4) { --c: var(--wood); }
.lh-trust > *::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.lh-trust > *:nth-child(1)::before { --c: var(--red); }
.lh-trust h3 { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.lh-trust > *:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 8px 10px 0 var(--ink), 0 28px 44px -14px rgba(27, 36, 51, .45); }
.lh-trust > *:nth-child(even):hover { transform: translateY(-8px) rotate(1.2deg); }
.lh-trust > *:hover::before { transform: scaleY(1); }
.lh-trust > *:hover h3 { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .lh-trust > *, .lh-trust > *::before, .lh-trust h3 { transition: none; } }

/* Kevin spec 1: the full logo, big, at the top of every service page */
.lh-pagehead__logo { display: block; width: min(560px, 100%); margin: 0 0 18px; }
.lh-pagehead__logo .lh-logo { width: 100%; height: auto; filter: drop-shadow(4px 6px 8px rgba(0,0,0,.35)); }

/* reviews panel: its own scroll box, longest first */
.lh-review-panel { max-height: 760px; overflow-y: auto; padding: 6px 12px 18px 4px; border: 3px solid var(--ink); border-radius: var(--r); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.lh-review-panel .lh-reviews { padding: 14px; }
.lh-review-sum { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lh-review-sum li { font-size: .98rem; }
.lh-review.is-pinned { outline: 3px solid var(--yellow); outline-offset: 3px; }
.lh-reviews__more { text-align: center; margin: 18px 0 0; }

/* Other & Concept Work: the peek-inside grid, 2x2 on a computer, one column on phones */
.lh-peek { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.lh-peek__box { padding: 22px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 5px 5px 0 var(--ink); }
.lh-peek__box h3 { margin: 6px 0 8px; }
.lh-peek__box p { margin: 0; }
.lh-peek__pic { font-size: 2.6rem; line-height: 1; margin: 0 !important; }
@media (max-width: 760px) { .lh-peek { grid-template-columns: 1fr; } }

/* service area: Kevin's zip codes on a real map */
.lh-zipmap { margin: 0; }
.lh-zipmap__map { height: 460px; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); background: #e8eef3; z-index: 1; }
.lh-zipmap figcaption { margin-top: 12px; font-size: .95rem; }
.lh-zipmap__pick { font-weight: 700; }
@media (max-width: 760px) { .lh-zipmap__map { height: 380px; } }
.lh-ziplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.lh-ziplist div { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.lh-ziplist dt { font-weight: 700; }
.lh-ziplist dd { margin: 2px 0 0; font-size: .92rem; opacity: .8; }
.lh-zipmap img, .lh-zipmap svg { max-width: none; box-shadow: none; border: 0; border-radius: 0; }
.lh-zipmap .leaflet-attribution-flag { display: none !important; }

/* Kevin's spec: engine at the front on the left, cars behind it; his fifth car carries a Take a Peek Inside tag */
.is-style-lh-train > .lh-engine { margin-left: 0; margin-right: 26px; scroll-snap-align: start; }
.is-style-lh-train > .lh-engine::after { content: ''; position: absolute; right: -29px; top: auto; bottom: 34px; width: 29px; height: 6px; background: var(--ink); z-index: 0; }
.lh-car__tag {
  position: absolute; z-index: 3; top: -16px; right: -12px; margin: 0 !important; rotate: 6deg;
  padding: 7px 12px 6px; font: 400 1.05rem/1 var(--display) !important; letter-spacing: .02em; color: var(--ink) !important;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink);
}
.lh-car__tag::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.lh-car__tag { padding-left: 26px; }

/* the engine picture (Grok Imagine, from Kevin's logo engine), standing on the track at the front */
.lh-engine:not(.lh-engine--drawn) { flex: 0 0 470px; min-height: 300px; align-self: stretch; }
.lh-engine:not(.lh-engine--drawn) .lh-engine__img { position: absolute; left: 0; right: auto; bottom: -24px; width: 100%; height: auto; max-height: none; object-fit: contain; filter: drop-shadow(4px 8px 8px rgba(27,36,51,.25)); }
@media (max-width: 640px) { .lh-engine:not(.lh-engine--drawn) { flex-basis: 210px; min-height: 0; } .is-style-lh-train > .lh-engine { margin-right: 22px; } }

/* car wheels drawn like the wheels in Kevin's logo: thick blue tire with a light shine, big yellow disc, ringed hub */
.is-style-lh-car::before, .is-style-lh-car::after { width: 48px; height: 48px; bottom: -26px; border-radius: 0; background: url("img/wheel.svg") center / contain no-repeat; }
.is-style-lh-car::before { left: 18px; }
.is-style-lh-car::after { right: 18px; }

/* Kevin spec 3 and 4: phone = engine pinned left, cars 150 wide, engine + 1.5 cars on screen;
   computer (1024+) = engine and his four core cars across the screen at once, the fifth rolls in on hover */
@media (max-width: 760px) {
  .is-style-lh-train { scroll-snap-type: x mandatory; padding-left: 0; }
  .is-style-lh-train > .lh-engine:not(.lh-engine--drawn) { position: sticky; left: 0; z-index: 4; flex: 0 0 130px; margin-right: 12px; }
  .is-style-lh-car { flex: 0 0 140px; min-height: 0; margin-right: 12px; padding: 10px 10px 18px; scroll-snap-align: center; }
  .is-style-lh-car .lh-car__img { margin-bottom: 8px; }
  .is-style-lh-car h3 a { font-size: .74rem; padding: 6px 7px 5px; letter-spacing: .04em; min-height: 48px; display: flex; align-items: center; }
  .is-style-lh-car > p:not(.lh-car__go):not(.lh-car__coupler):not(.lh-car__tag) { display: none; }
  .is-style-lh-car .lh-car__go { font-size: .9rem; }
  .is-style-lh-car .lh-car__coupler { right: -15px; width: 15px; }
  .is-style-lh-car::before, .is-style-lh-car::after { width: 38px; height: 38px; bottom: -22px; }
  .is-style-lh-car::before { left: 12px; } .is-style-lh-car::after { right: 12px; }
  .lh-car__tag { font-size: .82rem !important; top: -14px; right: -8px; padding: 5px 8px 4px 20px; }
  .lh-car__tag::before { left: 6px; width: 7px; height: 7px; }
}
@media (min-width: 1024px) {
  .is-style-lh-train > .lh-engine:not(.lh-engine--drawn) { flex-basis: 300px; margin-right: 22px; }
  .is-style-lh-car { flex-basis: 190px; margin-right: 22px; padding: 14px 14px 20px; }
  .is-style-lh-car .lh-car__coupler { right: -25px; width: 25px; }
  .is-style-lh-car h3 a { font-size: .82rem; }
  .is-style-lh-car p { font-size: .9rem; }
}
.lh-tools__kevin { float: right; width: 120px; margin: 0 0 10px 16px; }
.lh-tools__kevin img { width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }

/* Kevin spec 6, position 1: the page opens on the train, over the hero photo */
.lh-hero.lh-hero--train { min-height: 0; grid-template-columns: minmax(0, 1fr); }
.lh-hero--train .lh-hero__bg::after { background: linear-gradient(180deg, rgba(17, 38, 74, .82) 0%, rgba(17, 38, 74, .62) 45%, rgba(17, 38, 74, .78) 100%); }
.lh-hero__train { grid-column: 1; grid-row: 1; position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 44px 32px 18px; }
.lh-hero--train h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 10px 0 8px; }
.lh-hero--train .lh-lede { margin: 0 0 6px; max-width: 46ch; }
.lh-hero--train .lh-train-hint { color: #fff; opacity: .8; }
.lh-hero--train .is-style-lh-train { padding-top: 34px; }
.lh-hero--train .is-style-lh-train::after, .lh-hero--train .is-style-lh-train { color: #fff; }
@media (max-width: 760px) {
  .lh-hero__train { padding: 22px 16px 10px; }
  .lh-hero--train h1 { font-size: 1.75rem; }
  .lh-hero--train .lh-lede { font-size: 1rem; }
}
.lh-peek__pic img { width: 200px; height: 120px; object-fit: contain; object-position: left center; display: block; }

.lh-footer__replay { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 0 32px 12px; font-size: .9rem; }
@media (max-width: 900px) { .lh-footer__replay { padding: 0 16px 12px; } }
.lh-replay { display: inline-block; margin-left: 14px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
@media (min-width: 1024px) { .lh-hero--train .lh-train-hint { display: block !important; } .lh-hero--train .lh-train-hint { font-size: 0; } .lh-hero--train .lh-train-hint .lh-replay { font-size: .95rem; margin-left: 0; } }

/* Kevin spec 4: on a computer every car displays at once (engine + all five), no swipe */
@media (min-width: 1024px) {
  .is-style-lh-train > .lh-engine:not(.lh-engine--drawn) { flex-basis: 250px; margin-right: 20px; }
  .is-style-lh-car { flex-basis: 158px; margin-right: 20px; padding: 12px 12px 22px; min-height: 0; }
  .is-style-lh-car > p:not(.lh-car__go):not(.lh-car__coupler):not(.lh-car__tag) { display: none; }
  .is-style-lh-car h3 a { font-size: .74rem; letter-spacing: .04em; }
  .is-style-lh-car .lh-car__coupler { right: -23px; width: 23px; }
  .is-style-lh-train { overflow-x: visible; scroll-snap-type: none; }
}
@media (min-width: 1024px) {
  .is-style-lh-car { align-self: flex-end; }
  .is-style-lh-car .lh-car__go { margin-top: 10px; }
  .lh-car__tag { font-size: .82rem !important; top: -14px; right: -10px; padding: 5px 9px 4px 20px; }
  .lh-car__tag::before { left: 6px; width: 7px; height: 7px; }
}

.lh-peek__box .lh-ticks { margin: 12px 0 0; font-size: .95rem; }
.lh-peek__box .lh-ticks li { margin-bottom: 7px; }

/* Kevin 10-31: on phones the home train is a revolving carousel (lh_carousel); computers keep the whole train */
.lh-ride { display: none; }
@media (max-width: 759px) {
  .lh-content--home > .lh-hero--train { display: none; }
  .lh-ride { display: block; position: relative; margin: 0 -16px !important; width: auto; }
  .lh-ride__stage { position: relative; height: 82vh; height: 82svh; overflow: hidden; display: flex; flex-direction: column; background: var(--cream, #f4efe3); }
  .lh-ride__view { position: relative; flex: 1 1 auto; min-height: 0; background: linear-gradient(180deg, #3f8fd0, #9fd3f3 45%, #cfeaf8 60%, #5f9444 60%); border-bottom: 3px solid var(--ink); }
  .lh-ride canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
  .lh-ride__caption { flex: 0 0 auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); }
  .lh-ride__h1 { font-family: var(--display); font-size: .9rem; margin: 0 0 6px; opacity: .7; }
  .lh-ride__caption .lh-tape { margin: 0; }
  .lh-ride__caption h2 { margin: 6px 0 10px; font-size: clamp(1.5rem, 6.5vw, 2.1rem); line-height: 1.05; }
  .lh-ride__caption p[data-car-lede] { display: none; }
  .lh-ride__dots { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
  .lh-ride__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(27,36,51,.25); border: 2px solid var(--ink); }
  .lh-ride__dots i.on { background: var(--yellow); }
  .lh-ride__hint { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); margin: 0; padding: 4px 12px; font: 700 .85rem/1.2 var(--body, sans-serif); color: var(--ink); background: rgba(255,255,255,.85); border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap; pointer-events: none; }
  .lh-ride__turn { position: absolute; top: 50%; z-index: 4; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; font: 400 1.6rem/1 var(--display); color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
  .lh-ride__turn[data-turn="prev"] { left: 10px; }
  .lh-ride__turn[data-turn="next"] { right: 10px; }
  .lh-ride__turn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .lh-ride.is-lost canvas { visibility: hidden; }
  .lh-ride.is-lost .lh-ride__view::after { content: "Tap the arrows or See the details to look around"; position: absolute; inset: 40% 24px auto; text-align: center; font-weight: 700; }
  .lh-ride__debug { position: absolute; left: 8px; top: 30px; font: 11px/1.3 ui-monospace, monospace; background: rgba(255,255,255,.85); padding: 6px 8px; border-radius: 6px; display: none; white-space: pre; }
  body.debug .lh-ride__debug { display: block; }
}
@media (max-width: 759px) { .lh-ride__caption h2 { max-width: calc(100% - 150px); } }

/* Kevin 10-31: cars drawn as the cars from his logo */
.is-style-lh-car.lh-car--art { background: none !important; border: 0; box-shadow: none; padding: 0; min-height: 0; justify-content: flex-end; }
.is-style-lh-car.lh-car--art::before, .is-style-lh-car.lh-car--art::after { display: none; }
.lh-car--art .lh-car__link { display: block; position: relative; }
.lh-car--art .lh-car__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.lh-car--art .lh-car__art { display: block; width: 100%; height: auto; filter: drop-shadow(4px 6px 6px rgba(27,36,51,.3)); }
.lh-car--art .lh-car__go { position: absolute; left: 0; right: 0; bottom: -46px; text-align: center; color: #fff; margin: 0; font-size: .95rem; }
.lh-car--art .lh-car__coupler { top: auto; bottom: 18%; }
.is-style-lh-car.lh-car--art { flex: 0 0 auto; }
.lh-car--art .lh-car__art { width: auto; height: var(--lh-art-h, 170px); }
.lh-car--art .lh-car__link { margin-bottom: -20px; }
.is-style-lh-car.lh-car--art .lh-car__go { color: #fff !important; bottom: -62px; }
@media (min-width: 1400px) { .lh-train, .is-style-lh-train { --lh-art-h: 200px; } }
@media (max-width: 1100px) { .is-style-lh-train { --lh-art-h: 150px; } }
@media (max-width: 760px) { .is-style-lh-train { --lh-art-h: 130px; } }
.is-style-lh-train { --lh-art-h: 150px; }
@media (min-width: 1600px) { .is-style-lh-train { --lh-art-h: 190px; } }
@media (max-width: 1199px) { .is-style-lh-train { --lh-art-h: 125px; } }
@media (max-width: 760px) { .is-style-lh-train { --lh-art-h: 110px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .is-style-lh-train { --lh-art-h: 108px; } }
.lh-car--art .lh-car__go { white-space: nowrap; }
@media (max-width: 1199px) { .lh-car--art .lh-car__go { font-size: .8rem; } }
/* Kevin 10-31: "narrow the reviews so i can mo[ve]". On phones the reviews box leaves a gutter on the right for the thumb, and it is shorter. */
@media (max-width: 759px) {
  .lh-review-panel { max-height: 62vh; margin-right: 44px !important; }
  .lh-section:has(.lh-review-panel) { position: relative; }
}
/* Kevin's car pictures stop at the name sign, so the cars get the site's wheels back */
.is-style-lh-car.lh-car--art::before, .is-style-lh-car.lh-car--art::after { display: block; width: calc(var(--lh-art-h, 150px) * .3); height: calc(var(--lh-art-h, 150px) * .3); bottom: calc(var(--lh-art-h, 150px) * -.16); z-index: 3; }
.is-style-lh-car.lh-car--art::before { left: 12%; }
.is-style-lh-car.lh-car--art::after { right: 12%; left: auto; }
.lh-car--art .lh-car__link { margin-bottom: calc(var(--lh-art-h, 150px) * .02); }
.lh-car--art:not(.lh-car--tagged) .lh-car__link { margin-bottom: calc(var(--lh-art-h, 150px) * .24); }
.is-style-lh-car.lh-car--art:not(.lh-car--tagged)::before, .is-style-lh-car.lh-car--art:not(.lh-car--tagged)::after { bottom: calc(var(--lh-art-h, 150px) * -.02); }
.is-style-lh-car.lh-car--art.lh-car--tagged::before, .is-style-lh-car.lh-car--art.lh-car--tagged::after { display: none; }
.lh-car--art:not(.lh-car--tagged) .lh-car__link::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: calc(var(--lh-art-h, 150px) * -.1); height: calc(var(--lh-art-h, 150px) * .1); background: #3b3f4a; border: 2px solid var(--ink); border-radius: 3px; z-index: -1; }
.is-style-lh-car.lh-car--art { margin-bottom: calc(var(--lh-art-h, 150px) * -.15); }
.is-style-lh-car.lh-car--art .lh-car__go { bottom: calc(var(--lh-art-h, 150px) * -.33); }
/* Same wheel spacing on every car: centers a fixed distance either side of the middle */
.is-style-lh-car.lh-car--art:not(.lh-car--tagged)::before { left: calc(50% - var(--lh-art-h, 150px) * .43); right: auto; }
.is-style-lh-car.lh-car--art:not(.lh-car--tagged)::after { left: calc(50% + var(--lh-art-h, 150px) * .13); right: auto; }
.lh-car--art:not(.lh-car--tagged) .lh-car__link::before { left: calc(50% - var(--lh-art-h, 150px) * .46); right: calc(50% - var(--lh-art-h, 150px) * .46); }

/* The closed phone menu (and its Services dropdown) must not catch taps or swipes */
@media (max-width: 1080px) { body:not(.lh-nav-open) .lh-nav, body:not(.lh-nav-open) .lh-nav * { visibility: hidden !important; pointer-events: none !important; } }

/* Shane 10-31: when the train is wider than the screen it rolls inside its box (mouse left/right, still in the middle) */
.is-style-lh-train.is-rolling { overflow-x: auto !important; overflow-y: hidden; --rail-lift: 44px; padding-bottom: 98px; }
/* Kevin 10-16: tap the engine on a phone and his photo shows */
.lh-ride__kevin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(72%, 300px); margin: 0; z-index: 6; border: 4px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--ink); background: #fff; pointer-events: none; }
.lh-ride__kevin[hidden] { display: none; }
.lh-ride__kevin img { display: block; width: 100%; height: auto; }
/* "See the details" under each car opens that car's page; the hint row under the train no longer sits on top of those links */
.lh-car__go a { color: inherit; text-decoration: none; }
.lh-car__go a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lh-hero--train .lh-train-hint { pointer-events: none; }
.lh-hero--train .lh-train-hint a { pointer-events: auto; }
/* Housecall Pro's button styles itself blue; on this site it wears the site's button */
.lh-hcp .hcp-button.lh-btn { min-height: 54px !important; padding: 14px 26px !important; font: 400 1.18rem/1 var(--display) !important; letter-spacing: .02em !important; text-transform: none !important; color: #fff !important; background: var(--red) !important; border: 3px solid var(--ink) !important; border-radius: 12px !important; box-shadow: 4px 4px 0 var(--ink) !important; cursor: pointer; }
.lh-hcp .hcp-button.lh-btn:hover { background: var(--red-deep) !important; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink) !important; }
/* Phone home: the caption under the train leaves the right side to the floating Book Now */
@media (max-width: 760px) { .lh-ride__caption .lh-btn { max-width: calc(100% - 150px); } }
/* Kevin spec 3: tap targets at least 48 px on phones. The hit area grows; the look does not change. */
@media (max-width: 760px) {
  .lh-topbar__tel { display: inline-block; padding-top: 17px; padding-bottom: 17px; margin-top: -17px; margin-bottom: -17px; }
  .lh-zipmap__map .leaflet-bar a { width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 24px !important; }
  .wp-block-details > summary { padding-top: 13px; padding-bottom: 13px; margin-top: -13px; margin-bottom: -13px; }
  .lh-faq summary::after { top: 9px; }
}
/* The engine box was 300 px tall with the picture at its foot, which left an empty band above the cars and pushed the train down under the floating Book Now on laptop screens */
@media (min-width: 1024px) { .lh-hero--train .is-style-lh-train > .lh-engine:not(.lh-engine--drawn) { min-height: calc(var(--lh-art-h, 150px) * 1.3); } }
/* Shane 10-31: the engine is always the same height as the cars, like Kevin's cartoon */
@media (min-width: 1024px) { .is-style-lh-train > .lh-engine:not(.lh-engine--drawn) { flex-basis: calc(var(--lh-art-h, 150px) * 1.975); } }
/* Kevin 11-01: "i need my clients to see them" — every link to the service policies is a bold button that goes jump jump, wiggle wiggle wiggle, then rests */
a.lh-policy-link { display: inline-block; margin: 2px 7px 2px 2px; padding: 3px 12px 4px; font-family: var(--display); font-weight: 400; letter-spacing: .01em; color: var(--ink) !important; background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none !important; transform-origin: 50% 100%; animation: lh-jump-wiggle 3.2s ease-in-out infinite; }
a.lh-policy-link:hover, a.lh-policy-link:focus-visible { background: var(--red); color: #fff !important; animation-play-state: paused; }
.lh-policy-cta { font-weight: 700; }
@keyframes lh-jump-wiggle {
  0%, 46%, 100% { transform: none; }
  5% { transform: translateY(-9px); }
  10% { transform: none; }
  15% { transform: translateY(-9px); }
  20% { transform: none; }
  24% { transform: rotate(-6deg); }
  28% { transform: rotate(6deg); }
  32% { transform: rotate(-6deg); }
  36% { transform: rotate(6deg); }
  40% { transform: rotate(-4deg); }
  43% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { a.lh-policy-link { animation: none; } }
/* Kevin 11-01: his own jobs sit beside the demo samples; the samples are tagged on the photo */
.lh-job > a { position: relative; }
.lh-job__sample { position: absolute; top: 10px; left: 10px; padding: 2px 8px; font: 700 .72rem/1.4 var(--body, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.88); border: 2px solid var(--ink); border-radius: 6px; }
/* Kevin 11-01 5:18 PM: "the mouse icon can it be a hammer?" Computers with a mouse only; phones are untouched. The hammer's striking face is the hotspot. */
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, summary, label, [role="button"], .lh-ride canvas { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-45%2016%2016%29%22%20stroke%3D%22%231b2433%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2214%22%20y%3D%229%22%20width%3D%224.4%22%20height%3D%2221%22%20rx%3D%222.2%22%20fill%3D%22%23c98b3c%22%2F%3E%3Cpath%20d%3D%22M6%204.5%20H19.5%20C22.5%204.5%2025%205.5%2026.8%207.4%20L25.2%209.2%20C24%208.2%2022.4%207.8%2020.8%207.8%20V10.5%20H6%20Z%22%20fill%3D%22%23c9ccd2%22%2F%3E%3Cpath%20d%3D%22M6%204.5%20V10.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 3 17, auto; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea { cursor: text; }
}
/* Kevin 11-01 5:18 PM: the footer Service policies link should "bring attention" too */
.lh-policy-item > a { display: inline-block; padding: 1px 10px 2px; font-weight: 700; color: var(--ink) !important; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); text-decoration: none !important; transform-origin: 50% 100%; animation: lh-jump-wiggle 3.2s ease-in-out infinite; }
.lh-policy-item > a:hover, .lh-policy-item > a:focus-visible { background: var(--red); color: #fff !important; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lh-policy-item > a { animation: none; } }

.lh-pay { margin: 0 0 18px; padding: 18px 20px; background: var(--blue-deep); color: #fff; border: 3px solid #fff; border-radius: var(--r); box-shadow: 0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
.lh-pay h4 { margin: 0 0 10px; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; color: var(--yellow); }
.lh-pay ul { margin: 0 0 12px; padding-left: 1.2em; }
.lh-pay li { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; color: #fff; }
.lh-pay li strong { color: #fff; }
.lh-pay p { margin: 0; font-size: 1rem; line-height: 1.45; color: #fff; }
.lh-cta-band .wp-block-button.lh-btn-tel .wp-block-button__link { background: #fff; color: var(--ink); }
.lh-book__note { background: #fff6d9; border-left: 4px solid #e8b23a; padding: 12px 16px; border-radius: 6px; font-weight: 600; color: #2b2b2b; }