@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* OCF_AGENT_BLOCK: lpm-brand
   Legacy Pest Management brand layer.
   Derived from the LPM shield logo and the owner's print flyers:
   near-black ground, chrome-silver display type, acid-green accents,
   hard angles and clipped corners, hex-grid texture.
   Remove everything between these markers to revert to the stock Lightning look. */

:root {
    /* Shape + depth tokens. The OCF token renderer emits colors and fonts only,
       so these are declared here to feed global.css's var() fallbacks. */
    --ocf-radius-sm: 0px;
    --ocf-radius: 2px;
    --ocf-radius-lg: 2px;
    --ocf-button-radius: 2px;
    --ocf-card-radius: 2px;
    --ocf-card-radius-lg: 2px;
    --ocf-image-radius: 2px;

    --ocf-button-shadow: none;
    --ocf-button-shadow-hover: none;
    --ocf-card-shadow: 0 0 0 1px color-mix(in srgb, var(--ocf-border) 90%, transparent);
    --ocf-card-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--ocf-primary) 55%, transparent), 0 0.65rem 1.8rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
    --ocf-image-shadow: none;

    /* Button personality: uppercase, tracked, hard-edged. */
    --button-text-transform: uppercase;
    --button-letter-spacing: 0.06em;
    --button-transform-hover: translateY(-2px);

    /* Brand primitives used throughout this block. */
    --lpm-lime: #A8F838;
    --lpm-green: #8CE02B;
    --lpm-green-deep: #2FA82C;
    --lpm-ink: #0A0B0A;
    --lpm-notch: 12px;
    --lpm-display: 'Anton', 'Archivo', system-ui, sans-serif;
    --lpm-phone-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    --lpm-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%238CE02B' stroke-width='1'%3E%3Cpolygon points='17.32,0 0,10 0,30 17.32,40 34.64,30 34.64,10'/%3E%3Cpolygon points='0,30 -17.32,40 -17.32,60 0,70 17.32,60 17.32,40'/%3E%3Cpolygon points='34.64,30 17.32,40 17.32,60 34.64,70 51.96,60 51.96,40'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 1. Type */

.heading-1,
.heading-2,
.heading-3 {
    letter-spacing: -0.015em;
}

.heading-2,
.heading-3 {
    text-transform: uppercase;
}

/* Hero headline: condensed display face with the logo's chrome gradient. */
.ocf-hero__headline {
    font-family: var(--lpm-display);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 0.94;
    text-transform: uppercase;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .ocf-hero__headline {
        background: linear-gradient(180deg, #FFFFFF 0%, #F2F5F2 34%, #C2C9C2 62%, #FAFCFA 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ------------------------------------------------------------ 2. Eyebrows */

/* The stock blueprint hid the hero eyebrow. It carries the city + service
   line, so it is restored here and styled as a flyer-style hex tag. */
.ocf-hero__eyebrow {
    display: inline-flex;
}

.eyebrow,
.ocf-hero__eyebrow,
.ocf-cta__eyebrow,
.ocf-about__eyebrow,
.ocf-services-eyebrow,
.ocf-service-areas__eyebrow {
    align-items: center;
    gap: 0.55rem;
    color: var(--lpm-green);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.eyebrow::before,
.ocf-hero__eyebrow::before,
.ocf-cta__eyebrow::before,
.ocf-about__eyebrow::before,
.ocf-services-eyebrow::before,
.ocf-service-areas__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Letter-spacing adds a trailing gap after the last character; pull it back
   so the eyebrow optically aligns with the heading below it. */
.eyebrow,
.ocf-hero__eyebrow,
.ocf-cta__eyebrow,
.ocf-about__eyebrow,
.ocf-services-eyebrow,
.ocf-service-areas__eyebrow {
    margin-right: -0.18em;
}

/* ------------------------------------------------------------- 3. Buttons */

/* Solid buttons take the flyer's cut-corner tag silhouette. clip-path also
   clips box-shadow, so depth comes from drop-shadow(), which follows the cut. */
.btn-primary,
.nav-cta,
.mobile-cta {
    clip-path: polygon(
        var(--lpm-notch) 0,
        100% 0,
        100% calc(100% - var(--lpm-notch)),
        calc(100% - var(--lpm-notch)) 100%,
        0 100%,
        0 var(--lpm-notch)
    );
    background: var(--lpm-green);
    color: var(--lpm-ink);
    font-weight: 700;
    transition: background var(--duration) var(--ease),
                filter var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.btn-primary:hover,
.nav-cta:hover,
.mobile-cta:hover {
    background: var(--lpm-lime);
    color: var(--lpm-ink);
    filter: drop-shadow(0 0.5rem 1.4rem color-mix(in srgb, var(--lpm-green) 38%, transparent));
}

.btn-primary:focus-visible,
.nav-cta:focus-visible,
.mobile-cta:focus-visible {
    outline: 2px solid var(--lpm-lime);
    outline-offset: 3px;
}

/* Outline buttons stay square-cut rather than notched, so the 1px border
   renders cleanly at every size. */
.btn-secondary {
    border-color: color-mix(in srgb, var(--ocf-heading) 40%, transparent);
    border-radius: 2px;
    font-weight: 700;
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--lpm-green) 12%, transparent);
    border-color: var(--lpm-green);
    color: var(--lpm-green);
}

/* -------------------------------------------------------- 4. Hex ground */

.page-section--alt {
    position: relative;
    isolation: isolate;
}

.page-section--alt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--lpm-hex);
    background-size: 64px 111px;
    opacity: 0.045;
    pointer-events: none;
}

/* ------------------------------------------------- 5. Section lead accent */

.ocf-services-header,
.ocf-about__copy,
.ocf-cta__copy,
.ocf-service-areas__content {
    position: relative;
}

.ocf-services-header::before,
.ocf-about__copy::before,
.ocf-cta__copy::before,
.ocf-service-areas__content::before {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    margin-bottom: 1.15rem;
    background: linear-gradient(90deg, var(--lpm-green) 0%, var(--lpm-green-deep) 100%);
    transform: skewX(-24deg);
}

/* ------------------------------------------------------- 6. Service cards */

.ocf-svc-card-img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    transition: transform var(--duration) var(--ease);
}

.ocf-svc-card-body {
    position: relative;
}

.ocf-svc-card-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--lpm-green);
    transition: width var(--duration) var(--ease);
}

.ocf-svc-card:hover .ocf-svc-card-body::before,
.ocf-svc-card-cta:hover .ocf-svc-card-body::before {
    width: 100%;
}

.ocf-svc-arrow {
    color: var(--lpm-green);
}

/* ------------------------------------------------- 6b. Location cards */

/* locations.css hardcodes three columns; with two offices that leaves a third
   of the row empty. auto-fit fills whatever is actually there, and still lays
   out cleanly if a third location is added later. */
.ocf-locations-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Match the angled media cut and green hover edge used on service cards. */
.ocf-location-card__media {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}

.ocf-location-card {
    position: relative;
    transition: border-color var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.ocf-location-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--lpm-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
}

.ocf-location-card:hover {
    border-color: color-mix(in srgb, var(--lpm-green) 55%, transparent);
    transform: translateY(-2px);
}

.ocf-location-card:hover::after {
    transform: scaleX(1);
}

.ocf-location-card__body h3 {
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------- 7. Trust stats */

.trust-stat {
    position: relative;
    padding-block: 1.35rem;
}

.trust-stat-value {
    font-family: var(--lpm-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--lpm-green);
}

.trust-stat-label {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.trust-stat + .trust-stat::before {
    content: "";
    position: absolute;
    left: calc(var(--grid-gap) * -0.5);
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: color-mix(in srgb, var(--lpm-green) 30%, transparent);
}

/* ------------------------------------------------------- 8. Header / nav */

.nav-bar {
    background: color-mix(in srgb, var(--lpm-ink) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--lpm-green) 22%, transparent);
}

.nav-links a {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 14px;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--lpm-green);
}

/* Uppercase + tracking widens these enough to wrap at mid widths. */
.nav-phone,
.nav-cta,
.mobile-phone {
    white-space: nowrap;
}

.nav-phone {
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.nav-cta {
    padding-inline: 1.1rem;
    font-size: 14px;
}

.nav-phone:hover {
    color: var(--lpm-green);
}

/* --------------------------------------- 9. Call Now / Text Us buttons */

/* The theme prints the phone number as the link text in the header, the
   mobile menu and the CTA. Relabel those to "Call Now" in CSS rather than
   JavaScript so the digits never flash on first paint. The number span is
   only hidden visually - it stays in the DOM for the OCF editor. */
a[data-ocf-action="phone"] [data-ocf-field="contact_phone"],
a[data-ocf-action="phone"] .ocf-cta__phone-text {
    display: none !important;
}

/* The service and service-area detail sidebars print a bare tel: link with the
   number as its own text node - no span to hide - so zero out the font size
   and let ::after supply the label. */
.ocf-detail-sticky-phone a[href^="tel:"] {
    font-size: 0 !important;
}

a[data-ocf-action="phone"]::after,
.ocf-detail-sticky-phone a[href^="tel:"]::after {
    content: "Call Now";
    font-size: 14px;
}

/* The sidebar supplies its own phone icon as a sibling of the link, so the
   pair is styled as one button and the stray icon is folded in. */
.ocf-detail-sticky-phone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ocf-detail-sticky-phone > svg {
    display: none;
}

/* The card's own phone glyph is a sibling of the link, so it cannot sit inside
   the button box. Redraw it as a mask on ::before instead, which keeps the
   icon tinted by the button's current colour on hover. */
.ocf-detail-sticky-phone a[href^="tel:"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--lpm-phone-mask) center / contain no-repeat;
    mask: var(--lpm-phone-mask) center / contain no-repeat;
}

/* Shared pill treatment for both actions wherever they appear inline. */
a[data-ocf-action="phone"],
.ocf-detail-sticky-phone a[href^="tel:"],
.lpm-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.7rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--lpm-green) 55%, transparent);
    border-radius: 2px;
    color: var(--lpm-green);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

a[data-ocf-action="phone"]:hover,
.ocf-detail-sticky-phone a[href^="tel:"]:hover,
.lpm-text-btn:hover {
    background: color-mix(in srgb, var(--lpm-green) 14%, transparent);
    border-color: var(--lpm-green);
    color: var(--lpm-lime);
}

a[data-ocf-action="phone"]:focus-visible,
.lpm-text-btn:focus-visible {
    outline: 2px solid var(--lpm-lime);
    outline-offset: 3px;
}

a[data-ocf-action="phone"] svg,
.ocf-detail-sticky-phone a[href^="tel:"] svg,
.lpm-text-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* The header already carries a solid green Request Service button, so these
   two stay outlined and the hierarchy holds. */
.nav-right .nav-phone,
.lpm-text-btn--nav {
    padding-inline: 0.85rem;
}

.nav-divider {
    display: none;
}

/* Mobile menu: full width, stacked under the primary CTA. */
.mobile-actions .mobile-phone,
.lpm-text-btn--mobile {
    display: flex;
    width: 100%;
}

.mobile-actions .mobile-phone .mobile-phone-icon {
    display: inline-flex;
}

@media (max-width: 1080px) {
    .nav-right .nav-phone,
    .lpm-text-btn--nav {
        display: none;
    }
}

/* ---------------------------------------- 9b. Sticky mobile action bar */

/* The flyers lead with contacting the business, so mobile gets both actions
   pinned to the bottom of every page. */
.lpm-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: none;
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

.lpm-actionbar__btn {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.5rem;
    padding: 0.85rem 0.5rem;
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lpm-actionbar__btn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.lpm-actionbar__btn--call {
    background: var(--lpm-green);
    color: var(--lpm-ink);
    border-top: 1px solid var(--lpm-green);
}

.lpm-actionbar__btn--call:hover,
.lpm-actionbar__btn--call:focus {
    background: var(--lpm-lime);
    color: var(--lpm-ink);
}

.lpm-actionbar__btn--text {
    background: var(--lpm-ink);
    color: var(--lpm-green);
    border-top: 1px solid var(--lpm-green);
    border-left: 1px solid color-mix(in srgb, var(--lpm-green) 45%, transparent);
}

.lpm-actionbar__btn--text:hover,
.lpm-actionbar__btn--text:focus {
    background: color-mix(in srgb, var(--lpm-green) 16%, var(--lpm-ink));
    color: var(--lpm-lime);
}

.lpm-actionbar__btn:focus-visible {
    outline: 2px solid var(--lpm-lime);
    outline-offset: -4px;
}

@media (max-width: 820px) {
    .lpm-actionbar {
        display: flex;
    }

    body {
        padding-bottom: 3.5rem;
    }
}

/* ------------------------------------------------- 9c. Hidden blog link */

/* components/footer.php force-appends a Blog item via ocf_nav_default_item(),
   which ignores the page's post status - so unpublishing the page is not
   enough on its own and would leave a link to a 404. Hidden here, and removed
   from the DOM by lpm-brand.php for browsers without :has(). */
.footer-link-list li:has(> a[data-ocf-field="nav_blog"]),
.nav-links li:has(> a[data-ocf-field="nav_blog"]),
.mobile-menu-inner a[data-ocf-field="nav_blog"] {
    display: none !important;
}

/* ------------------------------------------------------------ 10. Footer */

.site-footer {
    border-top: 2px solid var(--lpm-green);
}

.footer-brand-name {
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.footer-heading {
    color: var(--lpm-green);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-link-list a:hover,
.footer-contact-links a:hover,
.footer-bottom-links a:hover {
    color: var(--lpm-green);
}

/* --------------------------------------- 11. Service-area photo grading */

/* The neighbourhood photography is real and locally specific, so it is graded
   into the dark palette rather than replaced. */
.ocf-service-areas img,
.ocf-service-area-row img,
.ocf-service-areas-archive img {
    filter: saturate(0.45) contrast(1.08) brightness(0.82);
    transition: filter var(--duration) var(--ease);
}

.ocf-service-area-row:hover img,
.ocf-service-areas__map:hover img {
    filter: saturate(0.8) contrast(1.05) brightness(0.95);
}

/* --------------------------------------------- 12. Hero / CTA media */

/* The stock hero scrim was tuned for a lighter dark; against this near-black
   ground it buried the photograph. Lift the image and pull the scrim back on
   the right so the technician actually reads. */
/* `.ocf-cta__image` IS the <img>, so `.ocf-cta__image img` matched nothing and
   the CTA photo never got the lift. Corrected now that a real photograph sits
   there. Portrait source, wide slot, so hold the subject near the top. */
.ocf-hero__media img,
.ocf-cta__image {
    filter: brightness(1.28) contrast(1.05) saturate(1.05);
}

.ocf-cta__image {
    object-fit: cover;
    object-position: center 38%;
}

.ocf-hero {
    --gradient-hero-dark:
        linear-gradient(90deg,
            color-mix(in srgb, var(--lpm-ink) 95%, transparent) 0%,
            color-mix(in srgb, var(--lpm-ink) 89%, transparent) 40%,
            color-mix(in srgb, var(--lpm-ink) 60%, transparent) 62%,
            color-mix(in srgb, var(--lpm-ink) 20%, transparent) 82%,
            transparent 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--lpm-ink) 14%, transparent) 0%,
            color-mix(in srgb, var(--lpm-ink) 40%, transparent) 100%);
}

/* Stacked layout puts copy directly over the photograph, so the scrim has to
   carry the contrast vertically instead of horizontally. */
@media (max-width: 900px) {
    .ocf-hero {
        --gradient-hero-dark:
            linear-gradient(180deg,
                color-mix(in srgb, var(--lpm-ink) 82%, transparent) 0%,
                color-mix(in srgb, var(--lpm-ink) 90%, transparent) 45%,
                color-mix(in srgb, var(--lpm-ink) 95%, transparent) 100%);
    }
}

/* ------------------------------------------------------ 13. Hero polish */

.ocf-hero__check-icon {
    color: var(--lpm-green);
}

.ocf-hero__rating-value {
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .nav-cta,
    .mobile-cta,
    .ocf-svc-card-img,
    .ocf-svc-card-body::before {
        transition: none;
    }
}

/* ------------------------------------------ 14. Detail sidebar panel */

/* At 320px the address wrapped mid-line and the four info rows sat almost on
   top of each other. A slightly wider column plus more room between rows
   fixes both without changing the page layout. */
@media (min-width: 901px) {
    .ocf-detail-grid,
    .ocf-detail__grid {
        grid-template-columns: minmax(0, 1fr) 22.5rem;
    }
}

.ocf-detail-aside,
.ocf-detail__sidebar {
    padding: 1.35rem 1.35rem 1.5rem;
    gap: 1.25rem;
}

.ocf-detail-sticky {
    gap: 1.1rem;
}

/* The panel heading carries the divider, so the first info row does not need
   its own rule above it. */
.ocf-detail-sticky-heading {
    padding-bottom: 0.9rem;
    border-bottom: 2px solid color-mix(in srgb, var(--lpm-green) 45%, transparent);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media (min-width: 901px) {
    .ocf-detail-sticky-heading + .ocf-detail-meta-row {
        padding-top: 0;
        border-top: 0;
    }
}

.ocf-detail-meta-row {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    column-gap: 0.85rem;
    padding-top: 1.05rem;
}

.ocf-detail-meta-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-color: color-mix(in srgb, var(--lpm-green) 32%, transparent);
    color: var(--lpm-green);
}

.ocf-detail-meta-label {
    margin-bottom: 0.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ocf-detail-meta-row p {
    line-height: 1.55;
}

.ocf-detail-meta-row a:hover {
    color: var(--lpm-green);
}

/* Phone and email are unbreakable strings in a narrow column. */
.ocf-detail-meta-row a[href^="tel:"],
.ocf-detail-meta-row a[href^="mailto:"] {
    overflow-wrap: anywhere;
}

/* The aside's own grid gap already separates the map from the info panel. */
.ocf-location-map-card {
    margin-top: 0;
}

/* ------------------------------- 14b. Location sidebar call / text pair */

/* Rendered by lpm-loc-cta.php at the foot of the location sidebar. The two
   actions echo the sticky mobile bar: solid green call, outlined text. */
.lpm-loc-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.lpm-loc-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.75rem 0.6rem;
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

.lpm-loc-cta__btn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.lpm-loc-cta__btn--call {
    clip-path: polygon(
        var(--lpm-notch) 0,
        100% 0,
        100% calc(100% - var(--lpm-notch)),
        calc(100% - var(--lpm-notch)) 100%,
        0 100%,
        0 var(--lpm-notch)
    );
    background: var(--lpm-green);
    color: var(--lpm-ink);
}

.lpm-loc-cta__btn--call:hover {
    background: var(--lpm-lime);
    color: var(--lpm-ink);
}

.lpm-loc-cta__btn--text {
    border: 1px solid color-mix(in srgb, var(--lpm-green) 55%, transparent);
    border-radius: 2px;
    color: var(--lpm-green);
}

.lpm-loc-cta__btn--text:hover {
    background: color-mix(in srgb, var(--lpm-green) 14%, transparent);
    border-color: var(--lpm-green);
    color: var(--lpm-lime);
}

.lpm-loc-cta__btn:focus-visible {
    outline: 2px solid var(--lpm-lime);
    outline-offset: 3px;
}

@media (max-width: 400px) {
    .lpm-loc-cta {
        grid-template-columns: 1fr;
    }
}


/* The footer's contact list styles its links as a two-column grid (icon |
   text). `.lpm-text-btn` is a single class, so `.footer-contact-links a` won
   the cascade there: the injected Text Us label stretched into the second
   column and sat left of centre, out of line with the Call Now button beside
   it. `a.lpm-text-btn` matches that specificity and this file loads later. */
.site-footer .footer-contact-links a.lpm-text-btn {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.site-footer .footer-contact-links a.lpm-text-btn > span {
    flex: 0 0 auto;
}


/* The CTA section tints its phone link with the section's body colour, which
   is more specific than the shared pill rule -- so Call Now rendered in grey
   next to a green Text Us button of identical shape. */
.ocf-cta .ocf-cta__phone {
    color: var(--lpm-green);
}

.ocf-cta .ocf-cta__phone:hover {
    color: var(--lpm-lime);
}

/* --------------------------- 15. Mobile action-button consistency */

/* Below the theme's 760px CTA breakpoint every action stack goes full width at
   one height. The theme stretched only .ocf-cta__phone, which left the CTA
   section showing three buttons at three widths (Request Service 210px, Call
   Now 326px, Text Us 125px in a 358px column) and two heights. */
@media (max-width: 760px) {
    .ocf-hero__actions,
    .ocf-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ocf-hero__actions > a,
    .ocf-cta__actions > a,
    .mobile-actions > a,
    .site-footer .footer-contact-links > a[data-ocf-action="phone"],
    .site-footer .footer-contact-links > .lpm-text-btn {
        width: 100%;
        justify-content: center;
    }

    /* The outline pair sits at 2.75rem and the theme's primary buttons at
       3rem, so a stack of the three stepped down twice. */
    a[data-ocf-action="phone"],
    .lpm-text-btn,
    .ocf-cta__actions > a,
    .ocf-hero__actions > a,
    .mobile-actions > a {
        min-height: 3rem;
    }
}

/* ------------------------------------ 16. Mobile hero: show the photo */

/* Stacked, the hero copy runs ~1100px tall, so a full-bleed cover image had to
   stretch a 1024x572 photo over a 390x1100 box: a 1.9x blow-up showing about a
   fifth of the frame, under an 82-95% scrim. It read as a blurry dark blob.

   Below 900px the photo instead gets a band of its own at the top of the
   section, where 390x203 crops almost nothing off a 1024x572 source and the
   scrim only has to fade it into the copy underneath. */
@media (max-width: 900px) {
    .ocf-hero {
        --lpm-hero-media-h: clamp(13rem, 52vw, 17rem);

        display: block;
        background: var(--lpm-ink);

        --gradient-hero-dark:
            linear-gradient(180deg,
                color-mix(in srgb, var(--lpm-ink) 20%, transparent) 0%,
                color-mix(in srgb, var(--lpm-ink) 26%, transparent) 45%,
                color-mix(in srgb, var(--lpm-ink) 62%, transparent) 78%,
                var(--lpm-ink) 100%);
    }

    /* Out of the absolute stack and into flow, so it occupies real height. */
    .ocf-hero .ocf-hero__media {
        position: relative;
        height: var(--lpm-hero-media-h);
    }

    .ocf-hero .ocf-hero__media img {
        object-position: center 45%;
    }

    /* The scrim stays absolute but is clipped to the band. */
    .ocf-hero .ocf-hero__shade {
        top: 0;
        bottom: auto;
        height: var(--lpm-hero-media-h);
    }

    /* The band replaces the top padding the copy used to need. */
    .ocf-hero .ocf-hero__grid {
        padding-block: 1.75rem clamp(3rem, 8vw, 4rem);
    }
}

/* /OCF_AGENT_BLOCK: lpm-brand */