/*
Theme Name: Lift Home
Description: Catalogue theme for Lift Home — mobility and home accessibility equipment. Clean rebuild: topbar, sticky header with search, dark category nav, hero slider, department tiles, services cards, dark 4-column footer. No ecommerce, no pricing.
Version: 1.7.6
Author: Lift Home
Requires PHP: 7.4
Text Domain: lift-home
*/
/* Lato — self-hosted (SIL OFL). Preloaded from functions.php so hero text
never re-renders late; loading it via Google's CSS cost ~7s of LCP on mobile. */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/lato-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/lato-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lato-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lato-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ------------------------------------------------------------------ tokens */
:root {
--lh-primary: #0b6b75; /* Lift Home teal (buttons, links, bands) */
--lh-primary-dark: #085059;
--lh-accent: #14b8c4; /* exact logo teal (logo.svg fill), decorative use */
--lh-accent-rgb: 20, 184, 196;
--lh-ink: #333333;
--lh-heading: #444444;
--lh-muted: #6b7680;
--lh-topbar: #dddddd;
--lh-navbar: #424242;
--lh-panel: #f7f7f7;
--lh-light: #f9f9f9;
--lh-border: #ececec;
--lh-footer: #353535;
--lh-focus: #ffb400;
--lh-radius: 6px;
--lh-wrap: 1450px;
}
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Lato', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 118%;
line-height: 1.6;
color: var(--lh-ink);
background: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
font-weight: 700;
color: var(--lh-heading);
line-height: 1.25;
margin: 0 0 .6em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
a { color: var(--lh-primary); }
a:hover { color: var(--lh-primary-dark); }
:focus-visible { outline: 3px solid var(--lh-focus); outline-offset: 2px; }
.lh-wrap { max-width: var(--lh-wrap); margin: 0 auto; padding: 0 20px; }
.screen-reader-text {
position: absolute; clip: rect(1px,1px,1px,1px);
width: 1px; height: 1px; overflow: hidden; word-wrap: normal;
}
.lh-skip:focus {
position: fixed; top: 8px; left: 8px; z-index: 10000;
clip: auto; width: auto; height: auto;
background: #fff; color: var(--lh-primary);
padding: .6rem 1rem; border-radius: var(--lh-radius);
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/* Buttons */
.lh-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 48px; padding: .6rem 1.4rem;
border-radius: var(--lh-radius); border: 2px solid var(--lh-primary);
background: var(--lh-primary); color: #fff;
font-weight: 700; text-decoration: none; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.lh-btn:hover { background: var(--lh-primary-dark); border-color: var(--lh-primary-dark); color: #fff; }
.lh-btn--outline { background: transparent; color: var(--lh-primary); }
.lh-btn--outline:hover { background: var(--lh-primary); color: #fff; }
.lh-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.lh-btn--ghost:hover { background: #fff; color: var(--lh-primary); }
/* ------------------------------------------------------------------ topbar */
.lh-topbar { background: var(--lh-topbar); min-height: 48px; font-size: 18px; }
.lh-topbar__in {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; min-height: 48px; flex-wrap: wrap;
}
.lh-topbar__item svg { width: 17px; height: 17px; }
.lh-topbar__item { display: inline-flex; align-items: center; gap: .4rem; color: #3a3a3a; }
.lh-topbar__phone { font-weight: 700; color: var(--lh-primary-dark); text-decoration: none; }
.lh-topbar__phone:hover { text-decoration: underline; }
/* ------------------------------------------------------------------ header */
/* Header + category nav travel together as one pinned block. */
.lh-headwrap {
position: sticky; top: 0; z-index: 990;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
body.admin-bar .lh-headwrap { top: 32px; }
.lh-header {
background: rgba(255,255,255,.95);
border-bottom: 1px solid var(--lh-border);
}
.lh-header__in {
display: flex; align-items: center; gap: 1.5rem;
min-height: 91px; padding-top: .4rem; padding-bottom: .4rem;
}
.lh-header__logo { flex: 0 0 auto; width: 225px; }
.lh-header__logo img { max-height: 80px; width: auto; display: block; }
.lh-header__search { flex: 1 1 auto; max-width: 640px; }
.lh-header__cta { flex: 0 0 auto; margin-left: auto; }
.lh-btn--call { flex-direction: column; gap: 0; line-height: 1.15; padding: .75rem 1.95rem; }
.lh-btn--call__label { font-size: 1.17rem; font-weight: 400; }
.lh-btn--call__number { font-size: 1.58rem; letter-spacing: .02em; }
.lh-search { display: flex; border: 2px solid var(--lh-navbar); border-radius: 99px; overflow: hidden; background: #fff; }
.lh-search input[type="search"] {
flex: 1 1 auto; border: 0; padding: .6rem 1.1rem;
font: inherit; font-size: .95rem; min-width: 0;
}
.lh-search input[type="search"]:focus { outline: none; }
.lh-search button {
border: 0; background: var(--lh-navbar); color: #fff;
padding: 0 1.1rem; cursor: pointer; display: flex; align-items: center;
}
.lh-search button:hover { background: var(--lh-primary); }
.lh-nav-toggle {
display: none; border: 0; background: var(--lh-primary); color: #fff;
border-radius: var(--lh-radius); padding: .5rem 1rem;
font: inherit; font-weight: 700; cursor: pointer;
}
.lh-nav-toggle:hover, .lh-nav-toggle:focus-visible { background: #095a63; }
.lh-nav-toggle:active { transform: scale(.97); }
/* ------------------------------------------------------------------ nav */
.lh-nav { background: var(--lh-navbar); min-height: 43px; }
.lh-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.lh-menu > li { position: relative; }
.lh-menu > li > a {
display: block; padding: .55rem 1.05rem;
color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none;
}
.lh-menu > li > a:hover { color: var(--lh-accent); }
.lh-menu > li.lh-has-sub > a { padding-right: .35rem; }
.lh-sub-toggle {
border: 0; background: none; color: #fff; cursor: pointer;
font-size: .8rem; padding: .55rem .5rem;
}
.lh-submenu {
list-style: none; margin: 0; padding: .5rem 0;
position: absolute; top: 100%; left: 0; z-index: 950;
min-width: 270px; background: var(--lh-panel);
border: 1px solid #fff; border-radius: 3px;
box-shadow: 0 6px 18px rgba(0,0,0,.15);
display: none;
}
.lh-menu li:hover > .lh-submenu,
.lh-menu li:focus-within > .lh-submenu,
.lh-menu li.lh-sub-open > .lh-submenu { display: block; }
.lh-submenu a {
display: block; padding: .4rem 1.1rem;
color: var(--lh-ink); font-size: .9rem; text-decoration: none;
}
.lh-submenu a:hover { color: var(--lh-primary); background: #fff; }
.lh-submenu .lh-submenu-child a { padding-left: 2rem; font-size: .84rem; color: var(--lh-muted); }
/* WP-assigned menus reuse the same look */
.lh-menu .sub-menu { list-style: none; margin: 0; padding: .5rem 0; position: absolute; top: 100%; left: 0; z-index: 950; min-width: 270px; background: var(--lh-panel); border: 1px solid #fff; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.15); display: none; }
.lh-menu li:hover > .sub-menu, .lh-menu li:focus-within > .sub-menu { display: block; }
.lh-menu .sub-menu a { display: block; padding: .4rem 1.1rem; color: var(--lh-ink); font-size: .9rem; text-decoration: none; }
/* ------------------------------------------------------------------ hero */
.lh-hero { position: relative; }
.lh-hero__track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.lh-hero__track::-webkit-scrollbar { display: none; }
.lh-hero__slide {
flex: 0 0 100%; scroll-snap-align: start;
min-height: 460px; display: flex; align-items: center;
padding: 3rem 0;
background: linear-gradient(115deg, var(--lh-primary-dark) 0%, var(--lh-primary) 55%, var(--lh-accent) 130%);
color: #fff;
}
.lh-hero__slide:nth-child(2) { background: linear-gradient(115deg, #21353b, var(--lh-navbar) 60%, #5c6b70); }
.lh-hero__slide:nth-child(3) { background: linear-gradient(115deg, #06444c, var(--lh-primary) 75%); }
.lh-hero__slide:nth-child(4) { background: linear-gradient(115deg, var(--lh-primary), var(--lh-primary-dark) 70%); }
.lh-hero__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; width: 100%; }
.lh-hero__kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; opacity: .85; margin-bottom: .5rem; }
.lh-hero__slide h2 { color: #fff; font-size: 2.3rem; margin-bottom: .4em; }
.lh-hero__slide p { max-width: 46ch; font-size: 1.05rem; opacity: .95; }
.lh-hero__art { text-align: center; }
/* Hero primary CTA: white on the teal wash for maximum contrast. */
.lh-btn--herocta {
background: #fff; color: var(--lh-primary);
font-size: 1.08rem; padding: .8rem 1.7rem;
box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.lh-btn--herocta:hover, .lh-btn--herocta:focus-visible { background: var(--lh-accent); color: #06343a; }
.lh-hero__art img { max-height: 320px; width: auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.25)); animation: lh-float 7s ease-in-out infinite; }
@keyframes lh-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.lh-hero__art img { animation: none; }
}
.lh-hero__dots { display: flex; justify-content: center; gap: .6rem; padding: .9rem 0; background: #fff; }
.lh-hero__dots a {
width: 12px; height: 12px; border-radius: 50%;
background: #c1c1c1; text-indent: -999em; overflow: hidden;
}
.lh-hero__dots a:hover { background: var(--lh-primary); }
/* ------------------------------------------------------------------ strip */
.lh-strip {
background: var(--lh-navbar); color: #f9f9f9;
text-align: center; padding: .8rem 1rem; font-weight: 700; letter-spacing: .02em;
}
.lh-strip .lh-maple { color: var(--lh-accent); }
/* ------------------------------------------------------------------ sections */
.lh-section { padding: 50px 0; }
.lh-section--light { background: var(--lh-light); }
.lh-section__head { text-align: center; margin-bottom: 2rem; }
.lh-section__head h1, .lh-section__head h2 {
position: relative; display: inline-block; padding-bottom: .5rem; margin-bottom: .4rem;
}
.lh-section__head h1::after, .lh-section__head h2::after {
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 52px; height: 4px; border-radius: 2px; background: var(--lh-accent);
}
.lh-section__head p { color: #56616b; max-width: 70ch; margin: 0 auto; }
/* Product cards */
.lh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.lh-row {
display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 1.05rem);
gap: 1.4rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .8rem;
}
.lh-row .lh-card { scroll-snap-align: start; }
.lh-card {
background: #fff; border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow .15s ease, transform .15s ease;
}
.lh-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-3px); }
/* Fixed-height media box: some product images are SVGs that WordPress
tags width="1" height="1", so never trust intrinsic image sizing. */
.lh-card__media { position: relative; display: block; height: 250px; background: #fff; }
.lh-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .8rem; }
.lh-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.lh-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lh-muted); }
.lh-card__title { font-size: 1rem; margin: 0; }
.lh-card__title a { color: var(--lh-heading); text-decoration: none; }
.lh-card__title a:hover { color: var(--lh-primary); }
.lh-card__sku { font-size: .78rem; color: var(--lh-muted); }
.lh-card__summary { font-size: .85rem; color: var(--lh-muted); margin: .2rem 0 0; }
.lh-card__more { margin-top: auto; padding-top: .6rem; font-size: .85rem; font-weight: 700; color: var(--lh-primary); }
/* Department tiles */
.lh-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; }
.lh-tile {
position: relative; display: block; border-radius: var(--lh-radius); overflow: hidden;
background: #fff; border: 1px solid var(--lh-border);
box-shadow: 0 3px 12px rgba(0,0,0,.07);
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
}
.lh-tile:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,.13); }
.lh-tile__media { position: relative; display: block; height: 210px; }
.lh-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1rem 1rem 4.5rem; }
.lh-tile__plate {
position: absolute; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,.92); padding: .6rem .5rem .7rem; text-align: center;
}
.lh-tile__plate strong { display: block; color: var(--lh-heading); font-size: .88rem; line-height: 1.25; }
.lh-tile__plate span {
display: inline-block; margin-top: .45rem; padding: .2rem .9rem;
background: var(--lh-primary); color: #fff;
border-radius: 99px; font-size: .74rem; font-weight: 700;
}
/* Services cards */
.lh-services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.lh-service {
background: #fff; border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
padding: 1.5rem 1.3rem; text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.lh-service svg { width: 46px; height: 46px; color: var(--lh-primary); margin-bottom: .8rem; }
.lh-service h3 { font-size: 1.02rem; }
.lh-service p { font-size: .86rem; color: var(--lh-muted); }
.lh-service a { font-weight: 700; font-size: .88rem; text-decoration: none; }
.lh-service a:hover { text-decoration: underline; }
/* Reviews placeholder */
.lh-reviews__box {
border: 2px dashed #c9e5e8; border-radius: var(--lh-radius);
background: #f4fbfc; padding: 2.5rem 1.5rem; text-align: center; color: var(--lh-muted);
}
/* ------------------------------------------------------------------ breadcrumbs */
.lh-crumbs { font-size: .82rem; color: var(--lh-muted); padding: 1rem 0 .2rem; }
.lh-crumbs a { color: var(--lh-muted); text-decoration: none; }
.lh-crumbs a:hover { color: var(--lh-primary); text-decoration: underline; }
.lh-crumbs span[aria-current] { color: var(--lh-ink); }
/* ------------------------------------------------------------------ archive */
.lh-archive { display: grid; grid-template-columns: 1fr; gap: 2.2rem; padding: 1.5rem 0 3rem; }
.lh-archive .lh-grid { grid-template-columns: repeat(4, 1fr); }
.lh-archive__head { margin-bottom: 1.4rem; }
.lh-archive__head .lh-term-desc { color: var(--lh-muted); max-width: 90ch; }
.lh-childchips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.lh-childchips a {
display: inline-block; padding: .3rem .9rem; border: 1px solid var(--lh-border);
border-radius: 99px; background: #fff; font-size: .82rem; text-decoration: none; color: var(--lh-ink);
}
.lh-childchips a:hover { border-color: var(--lh-primary); color: var(--lh-primary); }
.lh-sidebar__title { font-size: 1.05rem; }
.lh-sidebar ul { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .9rem; }
.lh-sidebar ul ul { padding-left: 1rem; margin: 0; }
.lh-sidebar li { margin: .25rem 0; }
.lh-sidebar a { text-decoration: none; color: var(--lh-ink); }
.lh-sidebar a:hover { color: var(--lh-primary); }
.lh-sidebar .current-cat > a { color: var(--lh-primary); font-weight: 700; }
.lh-sidebar__help {
background: var(--lh-light); border: 1px solid var(--lh-border);
border-radius: var(--lh-radius); padding: 1.2rem;
}
.lh-sidebar__help h3 { font-size: .98rem; }
.lh-sidebar__help p { font-size: .85rem; color: var(--lh-muted); }
.lh-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.lh-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; min-height: 42px; padding: 0 .6rem;
border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
text-decoration: none; color: var(--lh-ink);
}
.lh-pagination .page-numbers.current { background: var(--lh-primary); border-color: var(--lh-primary); color: #fff; }
.lh-pagination a.page-numbers:hover { border-color: var(--lh-primary); color: var(--lh-primary); }
/* ------------------------------------------------------------------ single product */
.lh-product { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; padding: 1rem 0 2rem; }
.lh-product__gallery { position: sticky; top: 155px; align-self: start; }
.lh-product__main-img {
position: relative; border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
background: #fff; height: 470px;
}
.lh-product__main-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; }
.lh-product__main-img .lh-lb-item { position: absolute; inset: 0; border: 0; background: none; padding: 0; cursor: zoom-in; }
.lh-product__main-img .lh-lb-item img { position: absolute; inset: 0; }
.lh-product__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.lh-product__thumbs img {
width: 82px; height: 82px; object-fit: contain;
border: 1px solid var(--lh-border); border-radius: var(--lh-radius); background: #fff; padding: .3rem;
}
.lh-product__title { font-size: 1.7rem; }
.lh-product__sku { color: var(--lh-muted); font-size: .88rem; margin-bottom: 1rem; }
.lh-product__brand { display: inline-block; background: var(--lh-panel); border-radius: 99px; padding: .2rem .8rem; font-size: .8rem; margin-bottom: 1rem; }
.lh-product__summary { font-size: 1.05rem; color: #464f57; }
.lh-highlights { list-style: none; margin: 1rem 0; padding: 0; }
.lh-highlights li { padding-left: 1.6rem; position: relative; margin: .4rem 0; }
.lh-highlights li::before {
content: "✓"; position: absolute; left: 0; color: var(--lh-primary); font-weight: 700;
}
.lh-product__section { margin: 2.2rem 0; }
.lh-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lh-specs th, .lh-specs td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--lh-border); vertical-align: top; }
.lh-specs th { width: 38%; font-weight: 700; color: var(--lh-heading); background: var(--lh-light); }
.lh-docs { list-style: none; margin: 0; padding: 0; }
.lh-docs li { margin: .5rem 0; }
.lh-related { padding: 2.5rem 0 3rem; border-top: 1px solid var(--lh-border); }
/* ------------------------------------------------------------------ pages/posts */
.lh-page { max-width: 900px; margin: 0 auto; padding: 1rem 20px 3rem; }
.lh-page .lh-page__content h2 { margin-top: 1.6em; }
/* ------------------------------------------------------------------ footer */
.lh-footer__band { background: var(--lh-primary); color: #fff; text-align: center; padding: 1.6rem 1rem; }
.lh-footer__band p { margin: 0 0 .9rem; font-size: 1.15rem; font-weight: 700; }
.lh-footer { background: var(--lh-footer); color: #cfcfcf; font-size: .9rem; }
.lh-footer a { color: #fff; }
.lh-footer a:hover { color: var(--lh-accent); }
.lh-footer__cols {
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem;
padding-top: 3rem; padding-bottom: 2.5rem;
}
.lh-footer__col h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.lh-footer__col ul { list-style: none; margin: 0; padding: 0; }
.lh-footer__col li { margin: .45rem 0; }
.lh-footer__col a { text-decoration: none; }
.lh-footer__col a:hover { text-decoration: underline; }
.lh-footer__logo { background: #fff; border-radius: var(--lh-radius); padding: .5rem; }
.lh-footer__contact a { font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.lh-footer__bar { border-top: 1px solid #474747; padding: 1rem 0; text-align: center; font-size: .8rem; color: #a5a5a5; }
/* ------------------------------------------------------------------ contact + map */
.lh-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: start; margin-top: 1rem; }
.lh-map { width: 100%; height: 400px; border: 0; border-radius: var(--lh-radius); box-shadow: 0 2px 12px rgba(0,0,0,.10); }
@media (max-width: 850px) {
.lh-contact { grid-template-columns: 1fr; }
.lh-map { height: 300px; }
}
/* ------------------------------------------------------------------ form */
.lh-form { max-width: 560px; }
.lh-form label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; color: var(--lh-heading); }
.lh-form input[type="text"], .lh-form input[type="email"], .lh-form input[type="tel"], .lh-form textarea {
width: 100%; padding: .65rem .8rem; font: inherit; font-size: .95rem;
border: 2px solid var(--lh-border); border-radius: var(--lh-radius); background: #fff;
}
.lh-form input:focus, .lh-form textarea:focus { border-color: var(--lh-primary); outline: none; }
.lh-form p { margin-bottom: 1.1rem; }
/* ------------------------------------------------------------------ stairlift showcase */
/* Height tracks the video's shape so the footage isn't cropped to a sliver. */
.lh-lifthero { position: relative; overflow: hidden; height: min(52vw, 640px); min-height: 380px; display: flex; align-items: center; background: var(--lh-primary-dark); }
.lh-lifthero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-lifthero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,80,89,.88) 20%, rgba(8,80,89,.25)); }
.lh-lifthero__in { position: relative; z-index: 2; color: #fff; padding: 4rem 20px; }
.lh-lifthero__in h1 { color: #fff; font-size: 2.4rem; margin-bottom: .4em; }
.lh-lifthero__in p { max-width: 52ch; font-size: 1.1rem; opacity: .95; }
.lh-liftsection { padding: 3.5rem 0 1rem; }
.lh-liftsection__intro { max-width: 72ch; color: var(--lh-muted); margin-bottom: 1rem; }
.lh-liftrow {
display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center;
padding: 2.8rem 0; border-bottom: 1px solid var(--lh-border);
}
.lh-liftrow:last-child { border-bottom: 0; }
.lh-liftrow h3 { color: var(--lh-primary); font-size: 1.4rem; margin-bottom: .6em; }
.lh-liftrow p { color: #4a545c; max-width: 48ch; }
.lh-liftrow__media { position: relative; }
.lh-liftrow__media img { width: 100%; height: auto; aspect-ratio: 740 / 580; object-fit: cover; object-position: center; border-radius: var(--lh-radius); display: block; box-shadow: 0 4px 18px rgba(0,0,0,.10); background: #f3f6f6; }
.lh-liftbadge {
position: absolute; top: 16px; right: 0; z-index: 2;
background: var(--lh-primary); color: #fff;
padding: .4rem 1rem; font-size: .72rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
}
.lh-btn--explore {
display: inline-flex; align-items: center; min-height: 46px; padding: .5rem 1.6rem;
border: 2px solid var(--lh-primary); border-radius: 99px; background: transparent;
color: var(--lh-primary); font-weight: 700; font-size: .82rem;
letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.lh-btn--explore:hover { background: var(--lh-primary); color: #fff; }
.lh-liftfaq { max-width: 820px; margin: 1rem 0 2rem; }
.lh-liftfaq details { border: 1px solid var(--lh-border); border-radius: var(--lh-radius); margin-bottom: .7rem; background: #fff; }
.lh-liftfaq summary { padding: .9rem 1.2rem; font-weight: 700; color: var(--lh-heading); cursor: pointer; }
.lh-liftfaq details[open] summary { border-bottom: 1px solid var(--lh-border); }
.lh-liftfaq details > div { padding: .9rem 1.2rem; color: #4a545c; }
@media (max-width: 850px) {
.lh-lifthero { min-height: 320px; }
.lh-lifthero__in h1 { font-size: 1.7rem; }
.lh-liftrow { grid-template-columns: 1fr; gap: 1.2rem; padding: 2rem 0; }
.lh-liftrow__media { order: -1; }
.lh-liftrow__media img { height: auto; }
}
/* ------------------------------------------------------------------ stairlift detail (split hero + tabs) */
.lh-sl-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; border-bottom: 4px solid var(--lh-primary); }
.lh-sl-hero__panel {
background: var(--lh-light); padding: 3.2rem clamp(20px, 6vw, 90px);
display: flex; flex-direction: column; justify-content: center;
}
.lh-sl-hero__panel .lh-crumbs { padding: 0 0 1.4rem; }
.lh-sl-hero__panel h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .35em; }
.lh-sl-hero__tagline { color: var(--lh-primary); font-size: 1.25rem; font-weight: 700; margin-bottom: .9rem; }
.lh-sl-hero__blurb { max-width: 56ch; color: #4a545c; margin-bottom: 1.6rem; }
.lh-sl-hero__phone { font-size: .9rem; color: var(--lh-muted); margin-top: .8rem; }
/* The media pane keeps the manufacturer photo's exact 740x580 proportions,
so the subject is never cropped at any viewport width. */
.lh-sl-hero__media { position: relative; aspect-ratio: 740 / 580; }
.lh-sl-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-sl-tabs { background: var(--lh-light); border-bottom: 1px solid var(--lh-border); position: sticky; top: 136px; z-index: 850; }
.lh-sl-tabs__in { display: flex; justify-content: center; flex-wrap: wrap; }
.lh-sl-tabs a {
font-weight: 700; font-size: .95rem; text-decoration: none;
color: var(--lh-heading); padding: 1.1rem 1.6rem;
border-left: 1px solid var(--lh-border); border-bottom: 3px solid transparent;
}
.lh-sl-tabs a:last-child { border-right: 1px solid var(--lh-border); }
.lh-sl-tabs a:hover { color: var(--lh-primary); }
.lh-sl-tabs a.is-active { color: var(--lh-primary); border-bottom-color: var(--lh-primary); background: #fff; }
.lh-sl-flow { }
.lh-sl-section { display: block; padding: 3.5rem 0; scroll-margin-top: 70px; }
/* Content columns sit centered like the manufacturer's pages. */
.lh-sl-section .lh-wrap { max-width: 1180px; }
.lh-sl-feature { margin-left: auto; margin-right: auto; }
.lh-sl-specgrid { margin-left: auto; margin-right: auto; }
.lh-sl-prose { margin-left: auto; margin-right: auto; }
.lh-sl-section--grey { background: var(--lh-light); border-top: 1px solid var(--lh-border); border-bottom: 1px solid var(--lh-border); }
.lh-sl-green { color: var(--lh-primary); font-weight: 700; margin-top: -.5rem; }
.lh-sl-green a { color: var(--lh-primary); }
.lh-sl-prose { max-width: 860px; margin-top: 2rem; }
/* Feature split (drive system, safety) */
.lh-sl-feature { display: grid; grid-template-columns: 460px 1fr; gap: 3.5rem; align-items: center; max-width: 1080px; }
.lh-sl-feature__media img { width: 100%; border-radius: 2px; display: block; }
.lh-sl-feature p { max-width: 52ch; color: #4a545c; }
.lh-sl-safety { margin-top: 3.5rem; }
.lh-sl-bullets { list-style: disc; padding-left: 1.2rem; color: #4a545c; }
.lh-sl-bullets li { margin: .45rem 0; }
/* Dark full-bleed standard-features band */
.lh-sl-dark {
margin-top: 3.5rem; padding: 4rem 0;
background: #20262a center/cover no-repeat;
position: relative; color: #fff;
}
.lh-sl-dark::before { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 18, .72); }
.lh-sl-dark__in { position: relative; display: grid; grid-template-columns: 1fr 420px; gap: 3.5rem; align-items: center; }
.lh-sl-dark h2 { color: #fff; }
.lh-sl-dark .lh-sl-green { color: var(--lh-accent); }
.lh-sl-darklist { margin: 1rem 0 0; padding-left: 1.2rem; }
.lh-sl-darklist li { margin: .55rem 0; font-weight: 600; }
.lh-sl-dark__media img { width: 100%; display: block; }
/* Two-column icon spec grid */
.lh-sl-specgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; max-width: 1080px; margin-top: 1.5rem; }
.lh-sl-spec { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid #d5d9dc; }
.lh-sl-spec img { flex: 0 0 34px; margin-top: .2rem; }
.lh-sl-spec h4 { margin: 0 0 .2rem; font-size: 1rem; }
.lh-sl-spec p { margin: 0; color: #4a545c; font-size: .92rem; }
.lh-sl-footnote { margin-top: 1.2rem; font-size: .8rem; color: var(--lh-muted); font-style: italic; }
/* Interactive gallery + lightbox */
.lh-sl-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 1.5rem; }
.lh-sl-gal__item { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--lh-radius); overflow: hidden; }
.lh-sl-gal__item img { width: 100%; height: clamp(150px, 18vw, 260px); object-fit: cover; display: block; transition: transform .2s ease; }
.lh-sl-gal__item:hover img { transform: scale(1.04); }
.lh-lightbox {
position: fixed; inset: 0; z-index: 10000; display: none;
align-items: center; justify-content: center; background: rgba(10, 14, 16, .92);
}
.lh-lightbox.is-open { display: flex; }
.lh-lightbox img { max-width: min(88vw, 1400px); max-height: 86vh; border-radius: 4px; }
.lh-lightbox button {
position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff;
font-size: 2rem; line-height: 1; cursor: pointer; border-radius: 50%;
width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
}
.lh-lightbox button:hover { background: var(--lh-primary); }
.lh-lightbox__close { top: 20px; right: 20px; }
.lh-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lh-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lh-sl-gal { grid-template-columns: 1fr 1fr; } .lh-sl-gal__item img { height: 160px; } }
/* Seat & rail customizer */
.lh-cfg { display: grid; grid-template-columns: .9fr 1.1fr .8fr; gap: 3rem; align-items: center; }
.lh-cfg__stage img { width: 100%; max-height: 520px; object-fit: contain; display: block; }
.lh-cfg__caption { text-align: center; color: var(--lh-muted); border-top: 1px solid var(--lh-border); padding-top: .6rem; margin-top: .6rem; font-size: .9rem; }
.lh-cfg__controls h3 { font-size: .98rem; margin: 1.4rem 0 .6rem; }
.lh-cfg__controls h3:first-child { margin-top: 0; }
.lh-cfg__pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.lh-cfg__pills button {
border: 1px solid var(--lh-border); background: #fff; border-radius: 99px;
padding: .45rem 1.1rem; font: inherit; font-size: .84rem; cursor: pointer;
}
.lh-cfg__pills button.is-active { background: var(--lh-primary); border-color: var(--lh-primary); color: #fff; }
.lh-cfg__pills button:disabled { opacity: .35; cursor: default; }
.lh-cfg__swatches { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.lh-cfg__swatch { border: 0; background: none; cursor: pointer; text-align: center; font-size: .72rem; color: var(--lh-muted); font-family: inherit; }
.lh-cfg__swatch .dot { display: block; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--lh-border); margin: 0 auto .35rem; }
.lh-cfg__swatch.is-active .dot { border-color: #fff; box-shadow: 0 0 0 2px var(--lh-primary); }
.lh-cfg__swatch:disabled { opacity: .3; cursor: default; }
.lh-cfg__clear { margin-top: 1.4rem; border: 0; background: none; color: var(--lh-primary); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
@media (max-width: 950px) { .lh-cfg { grid-template-columns: 1fr; gap: 1.5rem; } }
/* Documents band */
.lh-sl-docband { background: var(--lh-navbar) center/cover no-repeat; position: relative; color: #fff; }
.lh-sl-docband::before { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 18, .62); }
.lh-sl-docband__in { position: relative; }
.lh-sl-docband h2 { color: #fff; }
.lh-sl-docband a { color: #fff; font-weight: 700; }
.lh-sl-video { aspect-ratio: 16 / 9; max-width: 900px; margin: 1.5rem 0; }
.lh-sl-vid { aspect-ratio: 16 / 9; }
.lh-sl-vid iframe { width: 100%; height: 100%; border: 0; display: block; }
/* PS4D "See it before you buy" band (curved lifts) */
.lh-sl-ps4d { background: var(--lh-primary); color: #fff; padding: 3.5rem 0; }
.lh-sl-ps4d__in { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1180px; }
.lh-sl-ps4d h2 { color: #fff; }
.lh-sl-ps4d p { max-width: 46ch; opacity: .95; }
.lh-sl-ps4d__media img { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.lh-btn--onband { border-color: #fff; color: #fff; }
.lh-btn--onband:hover { background: #fff; color: var(--lh-primary); }
@media (max-width: 850px) { .lh-sl-ps4d__in { grid-template-columns: 1fr; } }
@media (max-width: 850px) {
.lh-sl-feature { grid-template-columns: 1fr; gap: 1.5rem; }
.lh-sl-dark__in { grid-template-columns: 1fr; }
.lh-sl-specgrid { grid-template-columns: 1fr; gap: 0; }
.lh-sl-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
}
/* Standard package: image + numbered list */
.lh-sl-sub { color: var(--lh-primary); font-weight: 700; font-size: 1.1rem; margin-top: -.6rem; }
.lh-sl-standard { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin: 1.5rem 0 2rem; }
.lh-sl-standard__media img { width: 100%; border-radius: var(--lh-radius); }
.lh-sl-numbered { counter-reset: lhn; list-style: none; margin: 0; padding: 0; }
.lh-sl-numbered li { counter-increment: lhn; position: relative; padding: .55rem 0 .55rem 3rem; border-bottom: 1px solid var(--lh-border); }
.lh-sl-numbered li::before {
content: counter(lhn); position: absolute; left: 0; top: .45rem;
width: 32px; height: 32px; border-radius: 50%;
background: var(--lh-primary); color: #fff; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
/* Options: icon card grid */
.lh-sl-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem; margin-bottom: 1.5rem; }
.lh-sl-option { background: #fff; border: 1px solid var(--lh-border); border-radius: var(--lh-radius); padding: 1.4rem 1.2rem; text-align: center; }
.lh-sl-option img { width: 72px; height: 72px; margin-bottom: .7rem; }
.lh-sl-option h3 { font-size: 1rem; margin-bottom: .4em; }
.lh-sl-option p { font-size: .86rem; color: var(--lh-muted); margin: 0; }
.lh-sl-note { color: var(--lh-muted); font-size: .9rem; }
/* Spec rows with icons */
.lh-specs--icons th { display: flex; align-items: center; gap: .7rem; border-bottom: 0; }
.lh-specs--icons th img { flex: 0 0 34px; }
/* Video embed */
.lh-sl-video { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
.lh-sl-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--lh-radius); }
/* Post-tab bands + related cards */
.lh-sl-band { background: var(--lh-light); border-top: 1px solid var(--lh-border); padding: 3rem 0; margin-top: 2.5rem; }
.lh-sl-band__in { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.lh-sl-band h2 { font-size: 1.3rem; }
.lh-sl-band p { color: #4a545c; max-width: 52ch; }
.lh-sl-related { padding: 3rem 0 1rem; }
.lh-sl-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lh-sl-relcard {
display: flex; flex-direction: column; gap: .5rem; text-decoration: none;
background: #fff; border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
padding: 1.2rem; transition: box-shadow .15s ease, transform .15s ease;
}
.lh-sl-relcard:hover { box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-3px); }
.lh-sl-relcard img { width: 100%; height: clamp(160px, 16vw, 230px); object-fit: contain; background: var(--lh-light); border-radius: var(--lh-radius); padding: .8rem; }
.lh-sl-relcard strong { color: var(--lh-heading); font-size: 1.05rem; }
.lh-sl-relcard span { color: var(--lh-primary); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 850px) {
.lh-sl-standard, .lh-sl-band__in { grid-template-columns: 1fr; gap: 1.5rem; }
.lh-sl-related__grid { grid-template-columns: 1fr; }
}
.lh-sl-typehero { background: linear-gradient(115deg, var(--lh-primary-dark), var(--lh-primary) 70%); color: #fff; padding: 3rem 0; }
.lh-sl-typehero h1 { color: #fff; margin-bottom: .3em; }
.lh-sl-typehero p { opacity: .95; max-width: 60ch; margin: 0; }
@media (max-width: 850px) {
.lh-sl-hero { grid-template-columns: 1fr; min-height: 0; }
/* Show the WHOLE unit on phones — never crop product photos */
.lh-sl-hero__media { aspect-ratio: auto; height: 300px; min-height: 0; order: -1; background: #fff; }
.lh-sl-hero__media img { object-fit: contain; padding: .75rem; }
.lh-sl-hero__panel { padding: 2rem 20px; }
.lh-sl-tabs { position: static; }
.lh-sl-tabs button { padding: .8rem 1rem; font-size: .85rem; }
/* ---- Mobile diet for lift model pages: key info only, then book ---- */
.lh-model-page .lh-sl-feature__media { display: none; } /* split-section images/videos */
.lh-model-page .lh-sl-dark__media { display: none; } /* annotated features photo */
.lh-model-page .lh-sl-darklist li:nth-child(n+7) { display: none; } /* standard features: top 6 */
.lh-model-page .lh-sl-prose { display: none; } /* long editorial body */
.lh-model-page .lh-sl-options .lh-sl-option:nth-child(n+5) { display: none; } /* options: top 4 */
.lh-model-page #lh-sec-seats { display: none; } /* seat configurator */
.lh-model-page .lh-sl-ps4d { display: none; }
.lh-model-page .lh-sl-bullets li:nth-child(n+6) { display: none; } /* safety bullets: top 5 */
.lh-model-page .lh-sl-docband { display: none; }
.lh-model-page .lh-sl-related { display: none; }
.lh-model-page .lh-sl-tabs a[href="#lh-sec-documents"] { display: none; }
.lh-model-page .lh-sl-band__in { grid-template-columns: 1fr; gap: 1.6rem; }
/* Sticky bottom booking bar on model pages */
.lh-mob-bookbar {
display: flex; align-items: center; justify-content: center;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 985;
min-height: 56px; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
background: var(--lh-primary); color: #fff;
font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
text-decoration: none; box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
}
body:has(.lh-mob-bookbar) { padding-bottom: 64px; }
.lh-product__actions { flex-direction: column; align-items: stretch; }
.lh-product__actions .lh-btn { width: 100%; }
.lh-backtotop, .lh-callfloat { bottom: 84px; }
}
@media (min-width: 851px) {
.lh-mob-bookbar { display: none; }
}
/* ------------------------------------------------------------------ floating */
.lh-backtotop {
position: fixed; right: 18px; bottom: 18px; z-index: 980;
width: 48px; height: 48px; border-radius: 50%;
border: 0; background: var(--lh-navbar); color: #fff; font-size: 1.2rem;
cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lh-backtotop.is-visible { opacity: .85; pointer-events: auto; }
.lh-backtotop:hover { opacity: 1; }
.lh-callfloat {
position: fixed; left: 18px; bottom: 18px; z-index: 980;
display: none; width: 56px; height: 56px; border-radius: 50%;
background: var(--lh-primary); color: #fff;
align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.25); text-decoration: none;
}
/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
.lh-grid, .lh-archive .lh-grid { grid-template-columns: repeat(3, 1fr); }
.lh-tiles { grid-template-columns: repeat(4, 1fr); }
.lh-services { grid-template-columns: repeat(3, 1fr); }
.lh-row { grid-auto-columns: calc(33.4% - 1rem); }
.lh-header__search { order: 4; flex-basis: 100%; max-width: none; padding-bottom: .6rem; }
.lh-header__in { flex-wrap: wrap; }
}
@media (max-width: 850px) {
body { font-size: 105%; }
.lh-topbar__item { display: none; }
.lh-topbar__phone { display: inline-flex; margin: 0 auto; }
/* On phones the number strip pins to the top alongside the header block. */
.lh-topbar { position: sticky; top: 0; z-index: 991; }
.lh-headwrap { top: 48px; }
.lh-header__cta { display: none; }
.lh-nav-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.lh-header__logo { width: 170px; }
.lh-header__in { min-height: 70px; }
.lh-nav { display: none; }
/* Open menu: freeze the page behind it and let the menu itself scroll. */
body.lh-nav-open { overflow: hidden; }
body.lh-nav-open .lh-nav {
display: block;
max-height: calc(100vh - 140px);
max-height: calc(100dvh - 140px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Generous overshoot so the last items scroll well clear of the bottom. */
body.lh-nav-open .lh-menu { padding-bottom: 50vh; }
/* On touch, dropdowns open ONLY via the arrow button — never from
hover emulation or focus while a finger is scrolling the list. */
.lh-menu li:hover > .lh-submenu,
.lh-menu li:focus-within > .lh-submenu { display: none; }
.lh-menu li.lh-sub-open > .lh-submenu { display: block; }
.lh-sub-toggle { padding: .7rem 1.1rem; font-size: 1.15rem; }
.lh-menu { flex-direction: column; }
.lh-menu > li > a { padding: .7rem 1rem; border-bottom: 1px solid #4e4e4e; }
.lh-sub-toggle { position: absolute; right: .4rem; top: .15rem; font-size: 1rem; }
.lh-submenu, .lh-menu .sub-menu { position: static; box-shadow: none; border: 0; background: #4a4a4a; }
.lh-submenu a, .lh-menu .sub-menu a { color: #eee; }
.lh-submenu a:hover { background: transparent; color: var(--lh-accent); }
.lh-hero__inner { grid-template-columns: 1fr; text-align: center; }
.lh-hero__slide { min-height: 340px; }
.lh-hero__slide h2 { font-size: 1.6rem; }
.lh-hero__art { display: none; }
.lh-grid, .lh-archive .lh-grid { grid-template-columns: repeat(2, 1fr); }
/* No room for the category sidebar on phones — nav covers it. */
.lh-sidebar { display: none; }
.lh-tiles { grid-template-columns: repeat(3, 1fr); }
.lh-services { grid-template-columns: repeat(2, 1fr); }
.lh-row { grid-auto-columns: calc(50% - .7rem); }
.lh-archive { grid-template-columns: 1fr; }
.lh-sidebar { order: 2; }
.lh-product { grid-template-columns: 1fr; }
.lh-product__gallery { position: static; }
.lh-card__media { height: 200px; }
.lh-tile__media { height: 170px; }
.lh-product__main-img { height: 340px; }
.lh-footer__cols { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.lh-callfloat { display: flex; }
body.single-sc_product .lh-callfloat { display: none; } /* CTA plugin has its own bar there */
}
@media (max-width: 549px) {
.lh-grid, .lh-archive .lh-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
.lh-tiles { grid-template-columns: 1fr 1fr; }
.lh-services { grid-template-columns: 1fr; }
.lh-row { grid-auto-columns: calc(75% - .7rem); }
.lh-footer__cols { grid-template-columns: 1fr; }
.lh-card__body { padding: .7rem .8rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
.lh-card, .lh-tile, .lh-btn, .lh-backtotop { transition: none; }
.lh-hero__track { scroll-behavior: auto; }
}
/* ------------------------------------------------------------------ home lifts (through-floor) */
/* .lh-sl-green's negative pull is for subtitle lines under an h2 —
when a heading itself is teal, keep normal flow. */
h2.lh-sl-green { margin-top: 0; }
/* Vertical rhythm between the stacked landing blocks */
.lh-hl-cards { margin-bottom: 3.5rem; }
.lh-sl-feature + .lh-sl-why { margin-top: 3.5rem; }
/* Why-choose split: text left, accordion stack right */
.lh-sl-why { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: start; max-width: 1080px; }
.lh-sl-why__text p { max-width: 48ch; color: #4a545c; }
.lh-sl-why__items details { background: #fff; }
.lh-sl-why__items summary h3 { margin: 0; }
/* Award card */
.lh-sl-award {
display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: center;
max-width: 900px; margin: 3.5rem auto 0; padding: 2rem 2.5rem;
border: 1px solid var(--lh-border); border-radius: var(--lh-radius); background: #fff;
}
.lh-sl-award p { max-width: 46ch; color: #4a545c; }
.lh-sl-award__media img { width: 100%; display: block; }
/* Numbered feature list + line-art diagram */
.lh-sl-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; max-width: 1080px; margin-top: 3.5rem; }
.lh-sl-feats__list { list-style: none; counter-reset: lhfeat; margin: 1.2rem 0 0; padding: 0; }
.lh-sl-feats__list li { counter-increment: lhfeat; position: relative; padding: 0 0 1.1rem 2.6rem; }
.lh-sl-feats__list li::before {
content: counter(lhfeat); position: absolute; left: 0; top: .05rem;
width: 1.7rem; height: 1.7rem; border-radius: 50%;
background: var(--lh-primary); color: #fff; font-weight: 700; font-size: .85rem;
display: flex; align-items: center; justify-content: center;
}
.lh-sl-feats__list h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.lh-sl-feats__list p { margin: 0; color: #4a545c; font-size: .93rem; max-width: 52ch; }
.lh-sl-feats__media { position: sticky; top: 150px; }
.lh-sl-feats__media img { width: 100%; display: block; }
/* Landing: three feature cards on the dark band */
.lh-hl-cards { margin-top: 0; }
.lh-hl-cards__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 288px)); gap: 2rem; justify-content: center; }
.lh-hl-card { margin: 0; }
.lh-hl-card img { width: 100%; display: block; }
.lh-hl-card figcaption { background: rgba(12, 16, 18, .85); color: #fff; font-weight: 700; text-align: center; padding: .7rem .5rem; }
/* Landing: compare band with photo stack */
.lh-cmpband { margin-top: 0; }
.lh-cmpband__in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.lh-cmpband__pics { display: flex; justify-content: center; align-items: center; }
.lh-cmpband__pics img {
width: 200px; background: #fff; padding: 8px 8px 26px; border-radius: 2px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .45); display: block;
}
.lh-cmpband__pics img:nth-child(1) { transform: rotate(-7deg) translateX(18px); }
.lh-cmpband__pics img:nth-child(2) { transform: rotate(3deg); z-index: 1; }
.lh-cmpband__pics img:nth-child(3) { transform: rotate(9deg) translateX(-18px); }
.lh-cmpband p { color: #e8ecee; max-width: 40ch; }
/* Compare chart */
.lh-cmp__scroll { overflow-x: auto; margin-top: 1.2rem; }
.lh-cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.lh-cmp thead tr:first-child th {
background: #3d4448; color: #fff; text-align: left; padding: .8rem 1rem;
border-bottom: 3px solid var(--lh-primary); font-size: 1.02rem;
}
.lh-cmp__pics td { padding: 1rem; }
.lh-cmp__pics img { width: 150px; display: block; }
.lh-cmp tbody th { text-align: left; padding: .65rem 1rem; font-size: .92rem; width: 240px; }
.lh-cmp tbody td { padding: .65rem 1rem; color: #4a545c; font-size: .92rem; }
.lh-cmp tbody tr:nth-child(odd) { background: var(--lh-light); }
/* Compare page configuration diagrams + spec-grid config icons */
.lh-cmp__configs { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.2rem; max-width: 760px; }
.lh-cmp__configrow { display: flex; gap: 1.5rem; }
.lh-cmp__configrow img { width: 84px; }
.lh-sl-configs { display: flex; gap: .9rem; }
.lh-sl-configs img { width: 56px; }
@media (max-width: 900px) {
.lh-sl-why, .lh-sl-feats, .lh-sl-award, .lh-cmpband__in { grid-template-columns: 1fr; }
.lh-hl-cards__row { grid-template-columns: 1fr; justify-items: center; }
.lh-hl-card { max-width: 288px; }
.lh-cmp__configs { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------ walk in tubs (Quick Tub) */
.lh-lifthero--img .lh-lifthero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-wt-badge {
display: inline-block; background: var(--lh-accent); color: #05343a;
font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
padding: .35rem .8rem; border-radius: 3px; margin-bottom: .9rem;
}
/* Product cards (two-part system, sizes) */
.lh-wt-grid { display: grid; gap: 2rem; margin-top: 2.2rem; }
.lh-wt-grid--2 { grid-template-columns: 1fr 1fr; }
/* auto-fit keeps every row edge-to-edge — no lonely tile beside a void,
whether a hub has 2 manufacturer tiles or 6. */
.lh-wt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.lh-wt-card { background: #fff; border: 1px solid var(--lh-border); border-radius: var(--lh-radius); overflow: hidden; }
.lh-wt-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.lh-wt-card__body { padding: 1.3rem 1.4rem 1.6rem; }
.lh-wt-card__body h3 { margin: 0 0 .5rem; }
.lh-wt-card__body p { color: #4a545c; font-size: .95rem; margin-bottom: 1rem; }
/* Icon reason grid */
.lh-wt-why { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 3rem; margin-top: 1.8rem; max-width: 1080px; }
.lh-wt-why__item { display: flex; gap: 1.1rem; align-items: flex-start; }
.lh-wt-ic {
flex: 0 0 52px; height: 52px; border-radius: 50%;
background: var(--lh-light); color: var(--lh-primary);
display: flex; align-items: center; justify-content: center;
}
.lh-wt-ic svg { width: 26px; height: 26px; }
.lh-wt-why__item h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.lh-wt-why__item p { margin: 0; color: #4a545c; font-size: .93rem; max-width: 46ch; }
@media (max-width: 900px) {
.lh-wt-grid--2, .lh-wt-grid--3, .lh-wt-why { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------ configurator dropdowns + quote cart */
.lh-dds { margin: 1rem 0 .4rem; display: grid; gap: .8rem; max-width: 460px; }
.lh-dd__label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .25rem; color: var(--lh-heading); }
.lh-dd__select {
width: 100%; padding: .55rem .7rem; border: 1px solid var(--lh-border);
border-radius: 4px; background: #fff; font: inherit; color: inherit;
}
.lh-dd__select:focus { outline: 2px solid var(--lh-primary); outline-offset: 1px; }
/* Header quote link */
.lh-quote-link {
position: relative; display: inline-flex; flex-direction: column; align-items: center;
gap: 2px; margin-right: 1.1rem; color: var(--lh-heading); text-decoration: none;
}
.lh-quote-link:hover { color: var(--lh-primary); }
.lh-quote-link__label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lh-quote-count {
position: absolute; top: -7px; right: -1px; min-width: 18px; height: 18px;
border-radius: 9px; background: var(--lh-primary); color: #fff;
font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px;
}
/* Add to Quote button on product pages */
.lh-product__actions { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center; margin: .6rem 0 .4rem; }
.lh-product__actions .lh-quote-add, .lh-product__actions .lh-quote-info { margin: 0; }
.lh-quote-info { gap: .5rem; }
.lh-quote-add { display: inline-flex; align-items: center; gap: .5rem; margin: .6rem 0 .4rem; cursor: pointer; }
.lh-quote-add.is-added { background: var(--lh-primary-dark); }
.lh-quote-added { font-size: .9rem; color: var(--lh-primary); margin: .2rem 0 .8rem; }
/* Quote page */
.lh-quote-items { margin: 1.5rem 0 2rem; border-top: 1px solid var(--lh-border); }
.lh-quote-items:empty { display: none; }
.lh-quote-item {
display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
padding: .9rem 0; border-bottom: 1px solid var(--lh-border);
}
.lh-quote-item__info a { font-weight: 700; text-decoration: none; color: var(--lh-heading); }
.lh-quote-item__info a:hover { color: var(--lh-primary); }
.lh-quote-item__model { display: block; font-size: .85rem; color: var(--lh-primary); font-weight: 700; margin-top: .15rem; }
.lh-quote-item__cfg { display: block; font-size: .85rem; color: #4a545c; margin-top: .15rem; }
.lh-quote-item__qty { display: inline-flex; align-items: center; gap: .6rem; }
.lh-quote-item__qty button {
width: 30px; height: 30px; border: 1px solid var(--lh-border); border-radius: 4px;
background: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.lh-quote-item__qty button:hover { border-color: var(--lh-primary); color: var(--lh-primary); }
.lh-quote-item__qty span { min-width: 1.4em; text-align: center; font-weight: 700; }
.lh-quote-item__rm { border: 0; background: none; color: #9aa3a9; font-size: 1rem; cursor: pointer; padding: .4rem; }
.lh-quote-item__rm:hover { color: #c0392b; }
.lh-quote-form,
.lh-form-card {
max-width: 560px;
padding: 1.9rem 2rem 1.4rem;
border-radius: 14px;
background:
radial-gradient(120% 90% at 100% 0%, rgba(43, 188, 198, .38) 0%, rgba(43, 188, 198, 0) 55%),
linear-gradient(150deg, #0d7a85 0%, var(--lh-primary) 45%, #07454c 100%);
box-shadow: 0 14px 34px rgba(11, 107, 117, .28);
}
.lh-quote-form h2, .lh-form-card h2 { color: #fff; }
.lh-quote-form label, .lh-form-card label { color: #fff; }
.lh-quote-form input, .lh-quote-form textarea,
.lh-form-card input, .lh-form-card textarea {
width: 100%; padding: .65rem .8rem; border: 1px solid transparent; border-radius: 8px; font: inherit;
background: #fff; color: #222;
}
.lh-quote-form input:focus, .lh-quote-form textarea:focus,
.lh-form-card input:focus, .lh-form-card textarea:focus {
border-color: var(--lh-accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--lh-accent-rgb), .35);
}
.lh-quote-form .lh-btn--solid, .lh-form-card .lh-btn { background: #fff; color: var(--lh-primary); }
.lh-quote-form .lh-btn--solid:hover, .lh-form-card .lh-btn:hover { background: var(--lh-accent); color: #06343a; }
.lh-quote-form .lh-btn--solid:disabled, .lh-form-card .lh-btn:disabled { opacity: .6; cursor: wait; }
.lh-quote-form .lh-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .65); }
.lh-quote-form .lh-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.lh-quote-form .lh-sl-footnote { color: rgba(255, 255, 255, .78); }
.lh-quote-error {
padding: .7rem .9rem; border-radius: 8px; color: #fff;
background: rgba(158, 27, 18, .45); border: 1px solid rgba(255, 190, 180, .55);
}
.lh-quote-error a { color: #fff; font-weight: 700; }
/* ------------------------------------------- content pages (page.php) */
.lh-page { max-width: 880px; margin: 0 auto; padding: 0 1.25rem 3.5rem; }
.lh-page h1 {
font-size: 2rem; color: var(--lh-heading); margin: 1.2rem 0 .4rem;
padding-bottom: .55rem; position: relative;
}
.lh-page h1::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 56px; height: 4px; border-radius: 2px; background: var(--lh-accent);
}
.lh-page__content { font-size: 1.04rem; line-height: 1.75; }
.lh-page__content > p, .lh-page__content > ul, .lh-page__content > ol { max-width: 70ch; }
.lh-page__content h2 {
color: var(--lh-primary); font-size: 1.35rem; margin: 2.2rem 0 .5rem;
}
.lh-page__content h3 { color: var(--lh-heading); font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.lh-page__content ul { list-style: none; padding-left: 0; }
.lh-page__content ul > li {
position: relative; padding-left: 1.6rem; margin: .45rem 0;
}
.lh-page__content ul > li::before {
content: '✓'; position: absolute; left: 0; top: 0;
color: var(--lh-primary); font-weight: 700;
}
.lh-page__content blockquote {
margin: 1.4rem 0; padding: 1rem 1.3rem; border-left: 4px solid var(--lh-accent);
background: #eef6f7; border-radius: 0 10px 10px 0; font-style: normal;
}
.lh-page__content a:not(.lh-btn):not(.lh-btn--explore) { color: var(--lh-primary); font-weight: 700; }
.lh-page__content a.lh-btn--solid, .lh-page__content a.lh-btn--explore { color: #fff; }
/* Ghost buttons are styled for dark bands — on light content, go teal-outline. */
.lh-page__content a.lh-btn--ghost { color: var(--lh-primary); border-color: var(--lh-primary); }
.lh-page__content a.lh-btn--ghost:hover { background: var(--lh-primary); color: #fff; }
/* FAQ accordions — brand cards with a rotating chevron. */
.lh-liftfaq details, .lh-page__content details {
background: #fff; border: 1px solid var(--lh-border); border-radius: 10px;
margin: .7rem 0; padding: 0; overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
.lh-liftfaq details:hover, .lh-page__content details:hover {
border-color: var(--lh-primary); box-shadow: 0 4px 16px rgba(11, 107, 117, .1);
}
.lh-liftfaq summary, .lh-page__content summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem;
padding: .95rem 1.2rem; font-weight: 700; color: var(--lh-heading);
}
.lh-liftfaq summary::-webkit-details-marker, .lh-page__content summary::-webkit-details-marker { display: none; }
.lh-liftfaq summary::before, .lh-page__content summary::before {
content: ''; flex: 0 0 10px; width: 10px; height: 10px;
border-right: 3px solid var(--lh-primary); border-bottom: 3px solid var(--lh-primary);
transform: rotate(-45deg); transition: transform .2s ease; margin-top: -2px;
}
.lh-liftfaq details[open] summary::before, .lh-page__content details[open] summary::before { transform: rotate(45deg); margin-top: -6px; }
.lh-liftfaq details[open] summary, .lh-page__content details[open] summary { color: var(--lh-primary); }
.lh-liftfaq summary h3, .lh-page__content summary h3 { display: inline; font-size: 1.02rem; margin: 0; color: inherit; }
.lh-liftfaq details > div, .lh-liftfaq details > p,
.lh-page__content details > div, .lh-page__content details > p {
padding: 0 1.2rem 1rem 3rem; margin: 0; color: var(--lh-text, #333);
}
.lh-form-done { color: #fff; }
.lh-form-done a { color: #fff; font-weight: 700; }
#message { scroll-margin-top: 155px; }
@media (max-width: 640px) {
.lh-quote-form, .lh-form-card { padding: 1.4rem 1.1rem 1rem; }
}
.lh-quote-empty { padding: 1.2rem 0 .4rem; }
.lh-quote-success { padding: 2rem 0; }
@media (max-width: 640px) {
.lh-quote-item { grid-template-columns: 1fr; gap: .5rem; }
.lh-quote-link { margin-right: .6rem; }
}
/* ------------------------------------------------------------------ polish pass (typography, tactility, focus) */
/* Headings: control hierarchy with weight + tracking, not scale */
h1, h2, h3, .lh-sl-hero__panel h1 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 750; }
/* Premium easing + tactile press on every interactive control */
.lh-btn, .lh-btn--explore, .lh-quote-add, .lh-cfg__pills button,
.lh-cfg__swatch, .lh-thumb, .lh-wt-card, .lh-card, .lh-sl-relcard,
.lh-quote-item__qty button {
transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1),
background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lh-btn:active, .lh-btn--explore:active, .lh-quote-add:active,
.lh-cfg__pills button:active, .lh-quote-item__qty button:active { transform: scale(0.97); }
/* Diffusion shadows tinted to the brand — depth without clutter */
.lh-card, .lh-wt-card, .lh-sl-relcard {
box-shadow: 0 1px 2px rgba(8, 80, 89, 0.04);
}
.lh-card:hover, .lh-wt-card:hover, .lh-sl-relcard:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -18px rgba(8, 80, 89, 0.25);
}
/* Visible, consistent keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: 2px solid var(--lh-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* Accordions: affordance + smooth chevron */
.lh-liftfaq summary { cursor: pointer; transition: color .2s ease; }
.lh-liftfaq summary:hover { color: var(--lh-primary); }
/* Doc list rows: icon alignment + hover slide */
.lh-docs a { display: inline-flex; align-items: center; gap: .55rem; transition: transform .25s cubic-bezier(0.16,1,0.3,1), color .2s ease; }
.lh-docs a:hover { transform: translateX(3px); color: var(--lh-primary); }
.lh-docs .lh-doc-ic { flex: 0 0 18px; color: var(--lh-primary); }
.lh-sl-docband .lh-docs .lh-doc-ic { color: var(--lh-accent); }
/* Selects: subtle inner depth */
.lh-dd__select { box-shadow: inset 0 1px 2px rgba(8, 80, 89, 0.05); }
@media (prefers-reduced-motion: reduce) {
.lh-btn, .lh-btn--explore, .lh-quote-add, .lh-cfg__pills button,
.lh-cfg__swatch, .lh-thumb, .lh-wt-card, .lh-card, .lh-sl-relcard,
.lh-docs a { transition: none; }
.lh-card:hover, .lh-wt-card:hover, .lh-sl-relcard:hover { transform: none; }
}
/* ------------------------------------------------------------------ funding directory */
.lh-fd-hero { background: var(--lh-light); border-bottom: 4px solid var(--lh-primary); }
.lh-fd-hero__in {
display: grid; grid-template-columns: 340px 1fr; gap: 3.5rem;
align-items: center; padding: 3.5rem 20px;
}
.lh-fd-hero__media img { width: 100%; border-radius: 8px; display: block; }
.lh-fd-badge {
display: inline-block; background: var(--lh-accent); color: #05343a;
font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
padding: .35rem .9rem; border-radius: 999px; margin-bottom: .9rem;
}
.lh-fd-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .6rem; max-width: 16ch; }
.lh-fd-hero p { max-width: 58ch; color: #4a545c; }
.lh-fd-hero__cta { margin-top: 1.3rem; }
/* Numbered process timeline */
.lh-fd-process { padding: 3rem 0 1rem; }
.lh-fd-steps { max-width: 880px; margin: 2.5rem auto 0; position: relative; }
.lh-fd-steps::before {
content: ""; position: absolute; left: 21px; top: 10px; bottom: 30px;
width: 2px; background: var(--lh-border);
}
.lh-fd-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1.4rem; padding: 0 0 2.6rem; }
.lh-fd-step__n {
position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
background: #fff; border: 2px solid var(--lh-primary); color: var(--lh-primary);
font: 700 1.15rem/40px Arial, sans-serif; text-align: center;
}
.lh-fd-step h3 { margin: 6px 0 .5rem; font-size: 1.25rem; }
.lh-fd-step p { max-width: 60ch; color: #4a545c; margin: 0 0 .8rem; }
.lh-fd-aside {
grid-column: 2; background: var(--lh-primary); color: #fff;
border-radius: 10px; padding: 1.2rem 1.4rem; max-width: 420px;
box-shadow: 0 16px 32px -18px rgba(8, 80, 89, .5);
}
.lh-fd-aside h4 { margin: 0 0 .4rem; color: #fff; }
.lh-fd-aside p { color: #e2f0f1; font-size: .92rem; margin: 0; }
/* Program directory */
.lh-fd-dir { padding: 2rem 0; }
.lh-fd-dir__head {
background: linear-gradient(115deg, var(--lh-primary-dark), var(--lh-primary));
color: #fff; border-radius: 12px; padding: 1.8rem 2rem; margin-bottom: 1.6rem;
}
.lh-fd-dir__head h2 { color: #fff; margin: 0 0 1rem; }
.lh-fd-filters { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lh-fd-filters label { font: 600 .82rem/1.4 Arial, sans-serif; color: #cfe6e8; display: grid; gap: .3rem; }
.lh-fd-filters select {
min-width: 210px; padding: .5rem .7rem; border-radius: 6px; border: 0;
font: inherit; color: var(--lh-heading); background: #fff;
}
.lh-fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.lh-fd-card {
background: #fff; border: 1px solid var(--lh-border); border-radius: 10px;
padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem;
box-shadow: 0 1px 2px rgba(8, 80, 89, .04);
transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s cubic-bezier(0.16,1,0.3,1);
}
.lh-fd-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(8, 80, 89, .25); }
.lh-fd-card h3 { margin: 0; font-size: 1.02rem; }
.lh-fd-card__region {
font: 600 .74rem/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase;
color: var(--lh-primary);
}
.lh-fd-card p { font-size: .9rem; color: #4a545c; margin: 0; flex: 1; }
.lh-fd-card__aud { font-size: .8rem; color: var(--lh-muted); }
.lh-fd-card__row { display: flex; gap: .6rem; align-items: flex-start; }
.lh-fd-card__row--grow { flex: 1; }
.lh-fd-card__row svg {
width: 16px; height: 16px; flex: 0 0 auto; margin-top: .1rem;
fill: none; stroke: #93a0a7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lh-fd-card__row .lh-fd-card__region { margin-top: .2rem; }
.lh-fd-card__go { font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--lh-primary); }
.lh-fd-card__go:hover { text-decoration: underline; }
@media (max-width: 900px) {
.lh-fd-hero__in { grid-template-columns: 1fr; gap: 1.5rem; }
.lh-fd-hero__media { max-width: 300px; }
.lh-fd-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.lh-fd-grid { grid-template-columns: 1fr 1fr; }
}
/* ------------------------------------------------------------------ ADP guide article */
.lh-adp-hero { background: var(--lh-primary-dark); color: #fff; padding: 3.5rem 0 5.5rem; }
.lh-adp-hero__in { display: grid; grid-template-columns: 1fr 460px; gap: 3rem; align-items: center; }
.lh-adp-hero h1 { color: var(--lh-accent); font-size: clamp(1.7rem, 3.6vw, 2.5rem); max-width: 18ch; margin: 0 0 .8rem; }
.lh-adp-kicker { font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #cfe6e8; }
.lh-adp-hero__media img { width: 100%; border-radius: 6px; display: block; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .5); }
.lh-adp-body { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; margin-top: -3.5rem; padding-bottom: 2.5rem; }
.lh-adp-card {
background: #fff; border: 1px solid var(--lh-border); border-radius: 10px;
padding: 2.4rem clamp(1.4rem, 4vw, 3rem); box-shadow: 0 20px 40px -24px rgba(8, 80, 89, .3);
}
.lh-adp-card h2 { margin-top: 2.2rem; }
.lh-adp-card h2:first-child { margin-top: 0; }
.lh-adp-card h3 { margin-top: 1.6rem; color: var(--lh-primary); }
.lh-adp-card p, .lh-adp-card li { color: #4a545c; max-width: 62ch; }
.lh-adp-card ul { padding-left: 1.3rem; }
.lh-adp-side { position: sticky; top: 175px; display: grid; gap: 1.2rem; margin-top: 4.5rem; }
.lh-adp-author {
background: var(--lh-light); border: 1px solid var(--lh-border); border-radius: 10px;
padding: 1.2rem 1.3rem;
}
.lh-adp-author__label {
display: block; font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .1em;
text-transform: uppercase; color: var(--lh-muted); margin-bottom: .5rem;
}
.lh-adp-author strong { display: block; margin-bottom: .3rem; }
.lh-adp-author p { font-size: .88rem; color: #4a545c; margin: 0 0 .6rem; }
.lh-adp-author a { font-weight: 700; font-size: .9rem; color: var(--lh-primary); text-decoration: none; }
.lh-adp-author a:hover { text-decoration: underline; }
@media (max-width: 900px) {
.lh-adp-hero__in { grid-template-columns: 1fr; }
.lh-adp-hero__media { max-width: 420px; }
.lh-adp-body { grid-template-columns: 1fr; }
.lh-adp-side { position: static; margin-top: 0; }
}
/* ------------------------------------------------------------------ tile fit + admin quick-remove */
/* Product-derived tiles show the whole photo instead of a 3:2 crop */
.lh-wt-card--fit > img { object-fit: contain; background: #fff; padding: .9rem; }
/* ------------------------------------------- tile & card hover physics */
/* Images breathe inside their clipped frames; one teal sweep per family. */
.lh-card__media { overflow: hidden; }
.lh-tile__media { overflow: hidden; }
.lh-card__media img, .lh-tile__media img, .lh-wt-card > img {
transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.lh-card:hover .lh-card__media img,
.lh-tile:hover .lh-tile__media img,
.lh-wt-card:hover > img { transform: scale(1.05); }
.lh-wt-card { position: relative; }
.lh-wt-card::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--lh-primary), var(--lh-accent));
transform: scaleX(0); transform-origin: left;
transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.lh-wt-card:hover::after { transform: scaleX(1); }
.lh-card__more, .lh-sl-green {
display: inline-block;
transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), color .3s ease;
}
.lh-card:hover .lh-card__more { transform: translateX(4px); }
.lh-wt-card:hover .lh-sl-green { transform: translateX(4px); }
.lh-card__title a { transition: color .25s ease; }
.lh-card:hover .lh-card__title a { color: var(--lh-primary); }
.lh-tile__plate span::after { content: ' \2192'; }
.lh-tile__plate span { transition: color .25s ease; }
.lh-tile:hover .lh-tile__plate span { color: var(--lh-primary); }
@media (prefers-reduced-motion: reduce) {
.lh-card__media img, .lh-tile__media img, .lh-wt-card > img,
.lh-card__more, .lh-sl-green, .lh-wt-card::after,
.lh-tile__plate span, .lh-card__title a { transition: none; }
.lh-card:hover .lh-card__media img,
.lh-tile:hover .lh-tile__media img,
.lh-wt-card:hover > img { transform: none; }
.lh-wt-card:hover::after { transform: scaleX(0); }
.lh-card:hover .lh-card__more, .lh-wt-card:hover .lh-sl-green { transform: none; }
}
/* Admin-only remove control (renders only for logged-in admins) */
.lh-card { position: relative; }
.lh-admin-remove {
position: absolute; top: 8px; right: 8px; z-index: 5;
width: 28px; height: 28px; border-radius: 50%;
background: #c0392b; color: #fff; text-decoration: none;
font-size: .85rem; line-height: 28px; text-align: center;
opacity: .85; transition: opacity .15s ease, transform .15s ease;
}
.lh-admin-remove:hover { opacity: 1; transform: scale(1.08); color: #fff; }
.lh-product__info { position: relative; }
.lh-product__info .lh-admin-remove { top: 0; right: 0; }
/* ------------------------------------------------------------------ manufacturer filter bar */
.lh-brandbar { margin-top: .6rem; align-items: center; }
.lh-brandbar__label { font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-muted); margin-right: .3rem; }
.lh-brandbar a.is-active { background: var(--lh-primary); color: #fff; border-color: var(--lh-primary); }
/* ------------------------------------------------------------------ assessment band + team cards (v1.5.0) */
/* "Book a Free Home Assessment" band — big-ticket hub + model pages */
.lh-assess { background: linear-gradient(180deg, #ffffff 0%, #eef6f6 18%, #eef6f6 100%); border-top: 1px solid #dcebeb; padding: 4rem 0 4.25rem; scroll-margin-top: 150px; }
.lh-assess--compact { background: #f6fafa; border-top: 1px solid #e3eeee; border-bottom: 1px solid #e3eeee; padding: 3.25rem 0; }
.lh-assess__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: start; }
.lh-assess__text h2 { font-size: 1.85rem; margin: 0 0 .8rem; }
.lh-assess--compact .lh-assess__text h2 { font-size: 1.55rem; }
.lh-assess__text > p { color: #4c5c5e; max-width: 52ch; }
.lh-assess__steps { list-style: none; margin: 1.4rem 0 1.2rem; padding: 0; }
.lh-assess__steps li { position: relative; padding: 0 0 .85rem 2rem; color: #3b4a4c; }
.lh-assess__steps li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--lh-primary); -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.lh-assess__card { margin: 1.5rem 0 1.1rem; max-width: 430px; }
/* The reviews slider must never blow out its column: contain it hard. */
.lh-form-reviews { margin-top: 1.5rem; min-width: 0; max-width: 100%; overflow: hidden; min-height: 280px; }
.lh-reviews-slot { min-height: 320px; }
.lh-form-reviews iframe { max-width: 100%; }
.lh-contact__info, .lh-contact__map, .lh-quote-aside, .lh-assess__text, .lh-assess__form { min-width: 0; }
.lh-assess__text .lh-form-reviews { max-width: 480px; }
.lh-assess__phone { color: #4c5c5e; font-size: .95rem; }
.lh-assess__phone a { color: var(--lh-primary); font-weight: 700; }
.lh-assess__form .lh-form-card { margin: 0; }
@media (max-width: 900px) {
.lh-assess__in { grid-template-columns: 1fr; gap: 1.8rem; }
.lh-assess { padding: 2.75rem 0 3rem; }
}
/* Two-column quote layout: form + team aside */
.lh-quote-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 2.75rem; align-items: start; margin-bottom: 3.5rem; }
.lh-quote-layout > div:first-child, .lh-quote-page { min-width: 0; }
.lh-quote-aside h2 { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.lh-quote-aside__note { color: #5b6d6f; font-size: .92rem; margin: 0 0 1rem; }
@media (max-width: 940px) {
.lh-quote-layout { grid-template-columns: 1fr; gap: 2rem; }
}
/* Team contact cards */
.lh-team--side { display: flex; flex-direction: column; gap: .85rem; }
.lh-team--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.lh-tm { display: flex; align-items: center; gap: .95rem; background: #fff; border: 1px solid #e0ebeb; border-radius: 12px; padding: .95rem 1.1rem; box-shadow: 0 2px 10px rgba(11, 107, 117, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lh-tm:hover { transform: translateY(-2px); border-color: #bcd9db; box-shadow: 0 8px 22px rgba(11, 107, 117, .1); }
.lh-tm--lead { border-color: var(--lh-primary); box-shadow: 0 4px 16px rgba(11, 107, 117, .12); }
.lh-tm__photo { flex: none; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--lh-primary), var(--lh-accent)); color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.lh-tm__photo img { width: 100%; height: 100%; object-fit: cover; }
.lh-tm__info { min-width: 0; }
.lh-tm__info h3 { font-size: 1rem; margin: 0; }
.lh-tm__role { margin: .1rem 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lh-primary); }
.lh-tm__links { margin: 0; display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.lh-tm__links a { color: #33484a; text-decoration: none; overflow-wrap: anywhere; }
.lh-tm__links a:hover { color: var(--lh-primary); text-decoration: underline; }
.lh-aside-hours { background: #f2f8f8; border: 1px solid #e0ebeb; border-radius: 12px; padding: 1rem 1.15rem; margin-top: 1rem; }
.lh-aside-hours h3 { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-primary); margin: 0 0 .4rem; }
.lh-aside-hours p { margin: .15rem 0; font-size: .9rem; color: #3b4a4c; }
/* About Us — Meet the Team */
.lh-about-team { max-width: 1450px; margin: 3.5rem auto 1rem; padding-top: 2.5rem; border-top: 1px solid #e3ecec; }
.lh-about-team h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.lh-about-team__intro { color: #4c5c5e; max-width: 62ch; margin: 0 0 1.4rem; }
.lh-team-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 21 / 9; margin: 0 0 1.6rem; background: #eef6f6; }
.lh-team-photo img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-team-photo__brand { display: none; }
.lh-team-photo.is-empty { background: linear-gradient(135deg, #0e7480 0%, #0b6b75 55%, #095c65 100%); }
.lh-team-photo.is-empty .lh-team-photo__brand { display: flex; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.lh-team-photo.is-empty .lh-team-photo__brand img { width: min(44%, 250px); background: #fff; border-radius: 12px; padding: 1.1rem 1.5rem; }
.lh-team-photo.is-empty .lh-team-photo__brand span { color: #d9f0f2; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 640px) {
.lh-team-photo { aspect-ratio: 16 / 10; }
}
/* ------------------------------------------------------------------ Canadian band (v1.6.6) */
.lh-canada-chip { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: .38rem 1rem .38rem .55rem; font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1.1rem; }
.lh-canada-chip img { width: 34px; height: 17px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.lh-canada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.7fr); gap: 2.2rem; align-items: center; background: #fff; border: 1px solid var(--lh-border); border-left: 6px solid #d52b1e; border-radius: var(--lh-radius); padding: 1.7rem 1.9rem; margin: 1.4rem 0 2.6rem; box-shadow: 0 4px 18px rgba(11, 107, 117, .06); }
.lh-canada__lead img { width: 96px; height: 48px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); margin-bottom: .9rem; }
.lh-canada__lead h2 { font-size: 1.55rem; margin: 0 0 .55rem; line-height: 1.2; }
.lh-canada__lead p { color: #4a545c; margin: 0; max-width: 46ch; }
.lh-canada__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.lh-canada__points h3 { font-size: 1rem; color: var(--lh-primary); margin: 0 0 .35rem; }
.lh-canada__points p { margin: 0; font-size: .95rem; color: #4a545c; line-height: 1.55; }
.lh-canada--owned { border-left-color: var(--lh-primary); }
@media (max-width: 900px) {
.lh-canada { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.4rem 1.3rem; }
.lh-canada__points { grid-template-columns: 1fr; gap: 1rem; }
}
/* ------------------------------------------------------------------ phone hero + Canadian band (v1.7.0, <=600px only; tablets untouched) */
@media (max-width: 600px) {
/* Hero: content-driven height (it was a fixed 320px box clipping its own buttons) */
.lh-lifthero { height: auto; min-height: 0; }
.lh-lifthero::after { background: linear-gradient(180deg, rgba(8, 80, 89, .84) 0%, rgba(8, 80, 89, .93) 100%); }
.lh-lifthero__in { padding: 1.9rem 20px 1.7rem; }
.lh-lifthero__in .lh-canada-chip { font-size: .68rem; letter-spacing: .06em; padding: .3rem .75rem .3rem .45rem; gap: .45rem; margin-bottom: .85rem; }
.lh-lifthero__in .lh-canada-chip img { width: 26px; height: 13px; }
.lh-lifthero__in h1 { font-size: 1.7rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; text-wrap: balance; }
.lh-lifthero__in p { font-size: 1rem; line-height: 1.5; opacity: .92; margin: 0 0 1rem; text-wrap: pretty; }
/* Buttons: stacked, full-width, one clear primary — the between them collapses via font-size:0 */
.lh-lifthero__in p:last-of-type { display: flex; flex-direction: column; gap: .6rem; font-size: 0; margin: 0; max-width: none; width: 100%; }
.lh-lifthero__in p:last-of-type .lh-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; font-size: 1rem; }
.lh-lifthero__in p:last-of-type .lh-btn:first-child { background: #fff; color: var(--lh-primary); border-color: #fff; }
.lh-lifthero__in p:last-of-type .lh-btn:first-child:hover { background: #e6f4f5; }
/* Canadian band: compact card — flag beside the title, points as a tight divided list */
.lh-canada { grid-template-columns: 1fr; gap: .9rem; padding: 1.1rem 1.05rem 1.15rem; margin: 1rem 0 1.8rem; border-left-width: 5px; border-radius: 12px; box-shadow: 0 2px 10px rgba(11, 107, 117, .06); }
.lh-canada__lead { display: grid; grid-template-columns: 44px 1fr; column-gap: .75rem; align-items: center; }
.lh-canada__lead img { width: 44px; height: 22px; margin: 0; }
.lh-canada__lead h2 { font-size: 1.15rem; line-height: 1.25; margin: 0; text-wrap: balance; }
.lh-canada__lead p { grid-column: 1 / -1; font-size: .93rem; line-height: 1.5; margin: .55rem 0 0; max-width: none; }
.lh-canada__points { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--lh-border); }
.lh-canada__points > div { padding: .7rem 0; border-bottom: 1px solid var(--lh-border); }
.lh-canada__points > div:last-child { border-bottom: 0; padding-bottom: .1rem; }
.lh-canada__points h3 { font-size: .92rem; margin: 0 0 .15rem; }
.lh-canada__points p { font-size: .88rem; line-height: 1.45; }
}
/* Phone (<=600px): land ON the form, drop redundant phone button and floating widgets */
@media (max-width: 600px) {
/* "Book a free home assessment" should open on the form, not the pitch: form first, pitch below */
.lh-assess__form { order: -1; }
.lh-assess__text { padding-top: .4rem; }
/* Sticky header stack on phones measures 223px (48 number strip + 175 header): land the form just under it */
.lh-assess, .lh-assess--compact { scroll-margin-top: 238px; padding-top: 1.3rem; }
/* The number is already in the sticky top bar — no second call button in the hero */
.lh-lifthero__in p:last-of-type .lh-btn[href^="tel:"] { display: none; }
.lh-sl-hero__phone { display: none; }
/* Floating back-to-top / call bubbles collide with the sticky bars on phones */
.lh-backtotop, .lh-callfloat { display: none !important; }
}