- kill the hover-lift and pointer so they don't look clickable.
===================================================================== */
.pm-service-card--static { cursor: default; }
.pm-service-card--static:hover {
transform: none;
box-shadow: var(--pm-shadow);
border-color: var(--pm-border);
}
/* =====================================================================
30 - SIGNS CARD + CTA
Wraps the [pm_signs] checklist in a clean "symptom-checker" panel and
adds a call-to-action at the recognition moment. The checklist itself
is still styled by Section 18; this adds the card + the CTA footer.
Structure: pm-signs-card > [pm_signs] + pm-signs-cta (text + buttons).
===================================================================== */
.pm-signs-card {
background: var(--pm-white);
border: 1px solid var(--pm-border);
border-radius: var(--pm-radius-lg);
box-shadow: var(--pm-shadow);
padding: 2rem 2.1rem;
}
.pm-signs-cta {
display: flex; align-items: center; justify-content: space-between;
gap: 1.25rem; flex-wrap: wrap;
margin-top: 1.6rem; padding-top: 1.4rem;
border-top: 1px solid var(--pm-border);
}
.pm-signs-cta p, .pm-signs-cta .elementor-widget-text-editor p { margin: 0 !important; color: var(--pm-slate); font-size: 1rem; line-height: 1.5; }
.pm-signs-cta strong { color: var(--pm-navy); font-weight: 700; }
@media (max-width: 767px) {
.pm-signs-card { padding: 1.5rem 1.4rem; }
.pm-signs-cta { align-items: flex-start; }
}
/* =====================================================================
31 - SIGNS CTA ROW FIX
The button container inside pm-signs-cta was a full-width Elementor
container, so it couldn't fit beside the text and wrapped underneath.
Size it to its content so the text + buttons share the row.
===================================================================== */
.pm-signs-cta > .e-con { flex: 0 0 auto; width: auto !important; }
/* =====================================================================
32 - MOMENT ITEM LAYOUT FIX
[pm_moments] outputs icon + title + desc as siblings; in the flex row
they lined up side-by-side. Use a grid so the icon sits on the left
and the title stacks above the description.
===================================================================== */
.pm-moment-item { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; row-gap: .15rem; align-items: start; }
.pm-moment-ic { grid-column: 1; grid-row: 1 / 3; }
.pm-moment-title { grid-column: 2; grid-row: 1; }
.pm-moment-desc { grid-column: 2; grid-row: 2; }
/* =====================================================================
33 - MOMENTS: SINGLE DIVIDER
Both the .pm-moments container (Section 25, from the old Icon Box
build) and the .pm-moments-grid (Section 28) drew a top border, so
two lines showed above the moments. The container border is the one
that also shows when the repeater is empty - keep it; drop the grid's.
===================================================================== */
.pm-moments-grid { border-top: none; padding-top: 0; }
/* ==== PM Section 34 - Google review floating badge ==== */
.pm-rev-badge{position:fixed;right:20px;bottom:20px;z-index:9998;display:flex;align-items:stretch;background:#fff;border:1px solid #D5DDE4;border-radius:12px;box-shadow:0 6px 24px rgba(14,42,69,.16);font-family:'Hanken Grotesk',sans-serif;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.pm-rev-badge:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,42,69,.22)}
.pm-rev-link{display:flex;align-items:center;gap:.6rem;padding:.58rem .5rem .58rem .8rem;text-decoration:none}
.pm-rev-g{display:block;width:24px;height:24px;flex:0 0 24px}
.pm-rev-g svg{display:block;width:100%;height:100%}
.pm-rev-body{display:flex;flex-direction:column;line-height:1.15}
.pm-rev-stars{color:#E8963B;font-size:.82rem;letter-spacing:1.5px}
.pm-rev-cta{color:#16202B;font-size:.82rem;font-weight:600}
.pm-rev-x{border:0;background:transparent;color:#6B7884;font-size:1.05rem;line-height:1;padding:0 .55rem;cursor:pointer;border-left:1px solid #EEF3F7}
.pm-rev-x:hover{color:#16202B;background:#F5F8FB}
@media (max-width:600px){.pm-rev-badge{right:12px;bottom:12px}.pm-rev-cta{font-size:.78rem}.pm-rev-g{width:20px;height:20px;flex-basis:20px}}
/* ==== PM Section 35 - Hero price chip ==== */
.pm-price-chip{display:inline-flex;align-items:baseline;gap:.4rem;margin-top:1rem;padding:.5rem .9rem;background:#EEF3F7;border:1px solid #D5DDE4;border-radius:10px;font-family:'Hanken Grotesk',sans-serif;font-size:.95rem;color:#16202B;line-height:1.2}
.pm-price-amt{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.15rem;color:#1C4C79;letter-spacing:.3px}
.pm-price-note{color:#45525E;font-size:.88rem}
@media (max-width:600px){.pm-price-chip{font-size:.9rem}}
/* ==== PM Section 36 - Pricing "no surprises" promise strip ==== */
.pm-promise-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #D5DDE4;border-radius:14px;box-shadow:0 4px 18px rgba(14,42,69,.06);overflow:hidden;max-width:1200px;margin:0 auto}
.pm-promise{display:flex;align-items:center;gap:.7rem;padding:1.05rem 1.15rem;border-left:1px solid #EEF3F7}
.pm-promise:first-child{border-left:0}
.pm-promise-ic{flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#EEF3F7;border-radius:9px;color:#2E73B8}
.pm-promise-ic svg{width:19px;height:19px}
.pm-promise-txt{display:flex;flex-direction:column;line-height:1.2}
.pm-promise-txt b{font-family:'Oswald',sans-serif;font-weight:600;font-size:.98rem;color:#16202B;letter-spacing:.2px}
.pm-promise-txt span{font-size:.82rem;color:#45525E;margin-top:.12rem}
@media (max-width:900px){.pm-promise-strip{grid-template-columns:repeat(2,1fr)}.pm-promise{border-left:1px solid #EEF3F7}.pm-promise:nth-child(odd){border-left:0}.pm-promise:nth-child(n+3){border-top:1px solid #EEF3F7}}
@media (max-width:520px){.pm-promise-strip{grid-template-columns:1fr}.pm-promise{border-left:0;border-top:1px solid #EEF3F7}.pm-promise:first-child{border-top:0}}
/* ==== PM Section 37 - Maintenance plan teaser band ==== */
.pm-plan-card{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:center;max-width:1100px;margin:0 auto;background:linear-gradient(135deg,#0E2A45 0%,#1C4C79 100%);border-radius:18px;padding:2.4rem 2.6rem;box-shadow:0 18px 44px rgba(14,42,69,.22)}
.pm-plan-eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:.78rem;font-weight:600;color:#7FA8CC;margin:0 0 .5rem}
.pm-plan-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.7rem;line-height:1.14;color:#fff;margin:0 0 .55rem;text-transform:none}
.pm-plan-sub{color:#C7D6E5;font-size:.95rem;line-height:1.45;margin:0 0 1.15rem}
.pm-plan-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.4rem}
.pm-plan-list li{position:relative;padding-left:1.55rem;color:#EEF3F7;font-size:.92rem;line-height:1.35}
.pm-plan-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#E8963B;font-weight:700}
.pm-plan-aside{text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(127,168,204,.28);border-radius:14px;padding:1.6rem 1.3rem}
.pm-plan-price{font-family:'Oswald',sans-serif;font-weight:700;font-size:2.5rem;line-height:1;color:#fff}
.pm-plan-per{font-size:1rem;color:#7FA8CC;font-weight:400}
.pm-plan-alt{color:#B9CBDD;font-size:.82rem;margin:.45rem 0 1.15rem}
.pm-plan-cta{display:inline-block;background:#E8963B;color:#0E2A45;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;padding:.8rem 1.7rem;border-radius:10px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.pm-plan-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(232,150,59,.42)}
.pm-plan-note{color:#8FA6BC;font-size:.76rem;margin:.9rem 0 0}
@media (max-width:820px){.pm-plan-card{grid-template-columns:1fr;padding:1.9rem 1.6rem;gap:1.5rem}.pm-plan-list{grid-template-columns:1fr}.pm-plan-title{font-size:1.5rem}}
/* ==== PM Section 39 - Mobile/tablet side gutters (service template) ==== */
@media (max-width:1024px){.elementor-location-single .e-con.e-parent{padding-left:22px !important;padding-right:22px !important}}
/* ==== PM Section 42 - Problem section mobile rhythm (<=767): tighten the loose 56px gap, and re-seat the moments divider - more room above the line (away from the pull quote), less below (closer to the moments) ==== */
@media (max-width:767px){
.e-con:has(> .pm-pullquote){gap:30px !important}
.pm-moments{margin-top:24px !important;padding-top:30px !important}
.pm-moments-grid{margin-top:0 !important}
}
/* ==== PM Section 43 - Service-area coverage chips ==== */
.pm-area-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.pm-area-chip{display:inline-flex;align-items:center;background:#EEF3F7;border:1px solid #D5DDE4;color:#1C4C79;font-family:'Hanken Grotesk',sans-serif;font-size:.9rem;font-weight:600;padding:.42rem .85rem;border-radius:20px}
/* ==== PM Section 44 - Local reviews ==== */
.pm-area-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pm-area-review{margin:0;background:#fff;border:1px solid #D5DDE4;border-radius:14px;padding:1.4rem 1.5rem;box-shadow:0 4px 18px rgba(14,42,69,.06);display:flex;flex-direction:column;gap:.85rem}
.pm-area-review-quote{margin:0;color:#16202B;font-size:1rem;line-height:1.55}
.pm-area-review-quote::before{content:"\201C";font-family:'Oswald',sans-serif;font-size:2.2rem;line-height:0;color:#7FA8CC;position:relative;top:.55rem;margin-right:.12rem}
.pm-area-review-by{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;color:#45525E;font-weight:600}
@media (max-width:900px){.pm-area-reviews{grid-template-columns:1fr}}
/* ==== PM Section 45 - Nearby areas ====
The .pm-area-nearby / .pm-area-nearby-link styles live in the
"Town link chips" block just below (Section 49 group), which covers both
the Services-hub "Serving" band and the area-page "Nearby" band. Not
duplicated here to avoid a conflicting override. */
/* ==== PM Section 46 - Map embed (responsive; fixed so it can't overflow) ==== */
.pm-area-map{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid #D5DDE4;margin-top:1.2rem}
.pm-area-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Hero map: at mobile the Elementor shortcode wrapper collapses to a line-box
(~21px) because .pm-hero-map sizes via aspect-ratio and its only child is
position:absolute — nothing in flow for the wrapper to measure. The map then
paints outside its own box and lands on the .pm-hero-proof card below it.
Explicit height + clearing the ratio fixes the chain. Mobile only: at 768px+
the wrapper measures correctly and the card is meant to float on the map. */
@media (max-width: 767px){
.pm-hero-media .elementor-widget-shortcode:has(.pm-hero-map){min-height:200px}
.pm-hero-map{height:200px;aspect-ratio:auto}
}
/* ==== PM Section 48 - "Outside the circle" call nudge ==== */
.pm-area-nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.4rem;max-width:1200px;margin:0 auto;background:#EEF3F7;border:1px solid #D5DDE4;border-radius:14px;padding:1rem 1.6rem}
.pm-area-nudge-ic{flex:0 0 auto;display:flex}
.pm-area-nudge-ic svg{width:24px;height:24px;display:block}
.pm-area-nudge-txt{margin:0;flex:1 1 auto;min-width:0;max-width:none;color:#45525E;font-size:1rem;line-height:1.45}
.pm-area-nudge-txt strong{color:#16202B;font-weight:600}
.pm-area-nudge-btn{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;background:#1C4C79;color:#fff;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;font-weight:600;padding:.65rem 1.2rem;border-radius:9px;text-decoration:none;transition:background .15s ease,transform .15s ease}
.pm-area-nudge-btn:hover{background:#2E73B8;color:#fff;transform:translateY(-2px)}
@media (max-width:680px){.pm-area-nudge{gap:.55rem .85rem}.pm-area-nudge-txt{flex:1 1 180px;font-size:.95rem}.pm-area-nudge-btn{flex:1 1 100%;justify-content:center;margin-top:.25rem}}
/* ==== PM Section 49 - Reviews: center the grid (graceful for 1-3+ reviews) ==== */
.pm-area-reviews{display:flex !important;flex-wrap:wrap !important;justify-content:center !important}
.pm-area-review{flex:1 1 320px;max-width:380px}
/* ==== Town link chips (Serving the Upper Cumberland band + area Nearby band) ==== */
.pm-area-nearby{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.pm-area-nearby-link{display:inline-flex;align-items:center;background:#fff;border:1px solid #D5DDE4;color:#1C4C79;text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:600;padding:.55rem 1.05rem;border-radius:8px;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.pm-area-nearby-link:hover{border-color:#7FA8CC;color:#2E73B8;transform:translateY(-2px)}
/* ==== PM Section 51 - Membership tiers (Comfort / Whole-Home) ==== */
.pm-tiers{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:900px;margin:0 auto;align-items:stretch}
.pm-tier{position:relative;border-radius:18px;padding:2rem 1.9rem;display:flex;flex-direction:column}
.pm-tier--comfort{background:#EEF3F7;border:1px solid #D5DDE4}
.pm-tier--featured{background:linear-gradient(160deg,#1C4C79,#0E2A45);color:#fff;box-shadow:0 18px 44px rgba(14,42,69,.24)}
.pm-tier-badge{position:absolute;top:1.4rem;right:1.4rem;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:20px;padding:.3rem .7rem}
.pm-tier-name{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:1.35rem;font-weight:600;color:#1C4C79;margin:0}
.pm-tier--featured .pm-tier-name{color:#fff}
.pm-tier-price{font-family:'Oswald',sans-serif;font-weight:700;font-size:2.9rem;line-height:1;color:#1C4C79;margin:.3rem 0 .1rem}
.pm-tier--featured .pm-tier-price{color:#fff}
.pm-tier-price span{font-size:1rem;font-weight:400;color:#6B7884}
.pm-tier--featured .pm-tier-price span{color:#9DB6CE}
.pm-tier-alt{font-size:.85rem;color:#6B7884;margin:0 0 .9rem}
.pm-tier--featured .pm-tier-alt{color:#9DB6CE}
.pm-tier-tag{font-style:italic;font-size:.92rem;color:#45525E;margin:0 0 1.1rem;padding-bottom:1.05rem;border-bottom:1px solid #D5DDE4}
.pm-tier--featured .pm-tier-tag{color:#C7D6E5;border-color:rgba(127,168,204,.3)}
.pm-tier-list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.7rem;flex:1}
.pm-tier-list li{position:relative;padding-left:1.9rem;font-size:.92rem;line-height:1.4;color:#16202B}
.pm-tier--featured .pm-tier-list li{color:#EAF1F8}
.pm-tier-list li::before{content:"";position:absolute;left:0;top:.05rem;width:18px;height:18px;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232E73B8'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pm-tier--featured .pm-tier-list li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235B9BD5'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pm-tier-plus{padding-left:0 !important;font-weight:600;color:#1C4C79 !important;margin-bottom:.05rem}
.pm-tier--featured .pm-tier-plus{color:#AECDEA !important}
.pm-tier-plus::before{display:none !important}
.pm-tier-cta{display:block;text-align:center;margin-top:auto;background:#1C4C79;color:#fff;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:600;padding:.85rem 1rem;border-radius:10px;text-decoration:none;transition:background .15s ease,transform .15s ease}
.pm-tier-cta:hover{background:#2E73B8;transform:translateY(-2px)}
.pm-tier-cta--gold{background:#E8963B;color:#0E2A45}
.pm-tier-cta--gold:hover{background:#d9822f}
@media (max-width:720px){.pm-tiers{grid-template-columns:1fr;max-width:420px}}
/* ==== PM Section 52b - In-content buttons (Gutenberg Button block) ==== */
.pm-article .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0}
.pm-article .wp-block-button{margin:0}
.pm-article .wp-block-button__link{
display:inline-block;background:#1C4C79 !important;color:#fff !important;
font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
font-size:1rem;padding:.8rem 1.6rem;border-radius:11px;text-decoration:none;
box-shadow:0 10px 26px rgba(28,76,121,.28);transition:background .15s ease,transform .15s ease}
.pm-article .wp-block-button__link:hover{background:#2E73B8 !important;transform:translateY(-2px)}
/* Pick "Outline" in the block toolbar for a secondary button */
.pm-article .wp-block-button.is-style-outline .wp-block-button__link{
background:transparent !important;color:#1C4C79 !important;border:2px solid #1C4C79;box-shadow:none}
.pm-article .wp-block-button.is-style-outline .wp-block-button__link:hover{background:#1C4C79 !important;color:#fff !important}
/* ==== PM Section 54 - How-it-works steps (left-aligned, connected) ==== */
.pm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0}
.pm-step{position:relative;text-align:left}
/* connector line linking the numbers across the row */
.pm-step:not(:last-child)::before{content:"";position:absolute;top:23px;left:56px;right:-2rem;height:2px;background:#DCE5EC}
.pm-step-num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:#1C4C79;color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:1.25rem;display:flex;align-items:center;justify-content:center;margin:0 0 1.1rem;box-shadow:0 6px 16px rgba(28,76,121,.25)}
.pm-step h3{font-family:'Oswald',sans-serif;font-size:1.2rem;color:#16202B;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.4px}
.pm-step p{color:#556472;font-size:.96rem;line-height:1.55;margin:0}
@media (max-width:720px){
.pm-steps{grid-template-columns:1fr;gap:1.6rem;max-width:440px}
.pm-step{padding-left:64px;min-height:46px}
.pm-step-num{position:absolute;left:0;top:0;margin:0}
.pm-step:not(:last-child)::before{display:none}
}
/* ==== PM Section 55 - Blueprint grid texture (light sections) ====
Add BOTH classes "pm-texture pm-texture--light" to a white/tint section's
OUTER container. Reuses the Section 24 ::before; just recolors the grid to
your light border tone and fades it so it stays subtle. ==== */
.pm-texture--light::before{
background-image:
linear-gradient(#DCE5EC 1px, transparent 1px),
linear-gradient(90deg, #DCE5EC 1px, transparent 1px);
background-size:30px 30px;
opacity:.55;
-webkit-mask-image:radial-gradient(130% 105% at 50% 0%, #000 35%, transparent 88%);
mask-image:radial-gradient(130% 105% at 50% 0%, #000 35%, transparent 88%);
}
/* ==== PM Section 57 - "What a visit covers" card (left-aligned) ==== */
.pm-includes{max-width:950px;margin:0;background:#fff;border:1px solid #D5DDE4;border-radius:18px;box-shadow:0 12px 34px rgba(14,42,69,.08);padding:2.2rem 2.5rem}
.pm-includes-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:600;color:#2E73B8;background:#EEF3F7;border:1px solid #D5DDE4;border-radius:20px;padding:.35rem .9rem;margin-bottom:1.4rem}
.pm-includes .elementor-icon-list-items{display:grid !important;grid-template-columns:1fr 1fr !important;gap:.9rem 2.4rem !important;margin:0 !important}
.pm-includes .elementor-icon-list-item{margin:0 !important;padding:0 !important}
.pm-includes .elementor-icon-list-text{color:#16202B !important;font-size:1rem !important;font-family:'Hanken Grotesk',sans-serif !important;line-height:1.35}
.pm-includes .elementor-icon-list-icon{align-self:flex-start;margin-top:2px}
.pm-includes .elementor-icon-list-icon svg,.pm-includes .elementor-icon-list-icon i{fill:#2E73B8 !important;color:#2E73B8 !important}
@media (max-width:640px){.pm-includes{padding:1.6rem 1.4rem}.pm-includes .elementor-icon-list-items{grid-template-columns:1fr !important}}
/* ==== PM Section 58 - Hero membership plans (compact) ====
NOTE: the CTA colour/underline rules carry !important on purpose. These
buttons live inside a Text Editor widget, so Section 2's global content-link
rule (.elementor-widget-text-editor a:not(.elementor-button), 0,3,1) outranks
plain .pm-hplan-cta (0,2,0) and repaints them navy + underlined at rest and
blue on hover. !important is the durable fix; a longer .elementor-kit-7 only ties. */
.pm-hero-plans{display:flex;gap:2.5rem;align-items:stretch;padding-top:14px}
.pm-hplan{flex:1 1 0;min-width:0;position:relative;border-radius:16px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;background:#fff;border:1px solid #D5DDE4;box-shadow:0 8px 26px rgba(14,42,69,.08)}
.pm-hplan--featured{background:linear-gradient(160deg,#1C4C79,#0E2A45);color:#fff;border-color:transparent;box-shadow:0 16px 38px rgba(14,42,69,.28)}
.pm-hplan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;font-weight:600;color:#0E2A45;background:#E8963B;border-radius:20px;padding:.28rem .8rem}
.pm-hplan-name{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:1.05rem;font-weight:600;color:#1C4C79;margin:0}
.pm-hplan--featured .pm-hplan-name{color:#fff}
.pm-hplan-price{font-family:'Oswald',sans-serif;font-weight:700;font-size:2.1rem;line-height:1;color:#1C4C79;margin:.25rem 0 0}
.pm-hplan--featured .pm-hplan-price{color:#fff}
.pm-hplan-price span{font-size:.85rem;font-weight:400;color:#6B7884}
.pm-hplan--featured .pm-hplan-price span{color:#9DB6CE}
.pm-hplan-alt{font-size:.78rem;color:#6B7884;margin:.1rem 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid #E1E8EF}
.pm-hplan--featured .pm-hplan-alt{color:#9DB6CE;border-color:rgba(127,168,204,.25)}
.pm-hplan-list{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pm-hplan-list li{position:relative;padding-left:1.4rem;font-size:.82rem;line-height:1.3;color:#16202B}
.pm-hplan--featured .pm-hplan-list li{color:#EAF1F8}
.pm-hplan-list li::before{content:"";position:absolute;left:0;top:.12rem;width:14px;height:14px;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232E73B8'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pm-hplan--featured .pm-hplan-list li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235B9BD5'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pm-hplan-cta{display:block;text-align:center;margin-top:auto;background:#1C4C79;color:#fff !important;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:.78rem;font-weight:600;padding:.65rem;border-radius:9px;text-decoration:none !important;transition:background .15s ease,transform .15s ease}
.pm-hplan-cta:hover{background:#2E73B8;color:#fff !important;text-decoration:none !important;transform:translateY(-2px)}
.pm-hplan-cta:focus-visible{outline:3px solid #7FA8CC;outline-offset:2px}
.pm-hplan-cta--gold{background:#E8963B;color:#0E2A45 !important}
.pm-hplan-cta--gold:hover{background:#d9822f;color:#0E2A45 !important;transform:translateY(-2px)}
@media (max-width:520px){.pm-hero-plans{flex-direction:column}}
/* ==== PM Section 59 - Contact / Schedule page ==== */
/* Split hero */
.pm-contact-hero{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start;max-width:1080px;margin:0 auto}
.pm-call-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:1.4rem 0 .4rem}
.pm-call-btn{display:inline-flex;align-items:center;gap:.55rem;background:#1C4C79;color:#fff;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-weight:600;font-size:1.2rem;padding:.8rem 1.4rem;border-radius:11px;text-decoration:none;box-shadow:0 10px 26px rgba(28,76,121,.28);transition:background .15s ease,transform .15s ease}
.pm-call-btn:hover{background:#2E73B8;transform:translateY(-2px)}
.pm-call-or{color:#6B7884;font-size:.9rem;max-width:220px;line-height:1.35}
.pm-contact-chips{display:flex;flex-direction:column;gap:.6rem;margin:1.3rem 0 0;padding:0;list-style:none}
.pm-contact-chips li{position:relative;padding-left:1.8rem;color:#16202B;font-size:.96rem;line-height:1.4}
.pm-contact-chips li::before{content:"";position:absolute;left:0;top:.08rem;width:18px;height:18px;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232E73B8'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Form card */
.pm-form-card{background:#fff;border:1px solid #D5DDE4;border-radius:18px;box-shadow:0 16px 40px rgba(14,42,69,.10);padding:1.9rem 1.9rem 2rem}
.pm-form-card .pm-form-title,.pm-form-card h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.4rem;color:#1C4C79;margin:0 0 .35rem;text-transform:none}
.pm-form-card .pm-form-sub{color:#556472;font-size:.92rem;line-height:1.5;margin:0 0 1.3rem}
.pm-form-card .elementor-field-group > label{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:.82rem;color:#45525E;margin-bottom:.3rem}
.pm-form-card input,.pm-form-card select,.pm-form-card textarea{border:1px solid #D5DDE4 !important;border-radius:9px !important;padding:.72rem .85rem !important;font-size:.95rem !important;background:#fff !important;color:#16202B !important}
.pm-form-card input:focus,.pm-form-card select:focus,.pm-form-card textarea:focus{border-color:#2E73B8 !important;box-shadow:0 0 0 3px rgba(46,115,184,.12) !important;outline:none}
.pm-form-card button[type=submit],.pm-form-card .elementor-button{width:100%;background:#E8963B !important;color:#0E2A45 !important;font-family:'Oswald',sans-serif !important;text-transform:uppercase !important;letter-spacing:.5px !important;font-weight:600 !important;font-size:1rem !important;padding:.9rem !important;border-radius:10px !important;border:none !important;transition:background .15s ease}
.pm-form-card button[type=submit]:hover,.pm-form-card .elementor-button:hover{background:#d9822f !important}
.pm-form-fineprint{font-size:.78rem;color:#8595A4;margin:.9rem 0 0;text-align:center}
/* Details band */
.pm-contact-details{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:960px;margin:0 auto}
.pm-detail{background:#fff;border:1px solid #D5DDE4;border-radius:14px;padding:1.5rem 1.5rem;text-align:center}
.pm-detail-ic{font-size:1.7rem;display:block;margin-bottom:.55rem}
.pm-detail h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.02rem;color:#1C4C79;margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.4px}
.pm-detail p{color:#45525E;font-size:.95rem;line-height:1.55;margin:0}
.pm-detail a{color:#2E73B8;text-decoration:none;font-weight:600}
.pm-detail a:hover{text-decoration:underline}
@media (max-width:860px){.pm-contact-hero{grid-template-columns:1fr;gap:1.8rem}.pm-contact-details{grid-template-columns:1fr}.pm-call-or{max-width:none}}
/* ==== PM Section 62 - DOORWAY CARDS (Commercial + University icon boxes) ==== */
.pm-doorway {
position: relative;
background: var(--pm-white);
border: 1px solid var(--pm-border);
border-radius: var(--pm-radius-lg);
padding: 1.6rem 1.7rem;
height: 100%;
transition: transform var(--pm-dur) var(--pm-ease),
box-shadow var(--pm-dur) var(--pm-ease),
border-color var(--pm-dur) var(--pm-ease);
}
.pm-doorway:hover {
transform: translateY(-4px);
box-shadow: var(--pm-shadow-lg);
border-color: var(--pm-blue-soft);
}
/* Note: do NOT set display:flex on .elementor-icon-box-wrapper. Elementor's own
position classes (elementor-position-inline-start / block-start) already lay
the box out — overriding it forces a row and ignores the Position control. */
/* Icon chip — inverts on hover, same move as .pm-card--feature */
.pm-doorway .elementor-icon {
/* inline-grid, NOT grid — a block-level grid ignores the text-align:center
Elementor puts on the wrapper, and the chip jams against the left edge. */
display: inline-grid; place-items: center;
line-height: 0;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--pm-pale-tint);
color: var(--pm-blue);
transition: background-color var(--pm-dur) var(--pm-ease),
color var(--pm-dur) var(--pm-ease);
}
/* Font Awesome viewBoxes are not square (store-alt and graduation-cap are both
0 0 640 512). Forcing width AND height squashes them — set one, auto the other. */
.pm-doorway .elementor-icon svg { width: auto; height: 24px; }
/* Font Awesome icons are fill-based; uploaded brand SVGs are stroke-based.
Blanket `fill:none` strips FA icons to a traced outline — scope them apart. */
.pm-doorway .elementor-icon svg.e-font-icon-svg { fill: currentColor; stroke: none; }
.pm-doorway .elementor-icon svg:not(.e-font-icon-svg) { fill: none; stroke: currentColor; }
.pm-doorway:hover .elementor-icon {
background: var(--pm-navy);
color: var(--pm-white);
}
.pm-doorway .elementor-icon-box-title {
font-family: var(--pm-font-display);
text-transform: uppercase; font-weight: 700;
font-size: 1.2rem; letter-spacing: .01em;
color: var(--pm-navy);
margin: 0 0 .45rem;
}
.pm-doorway .elementor-icon-box-title a { color: inherit; text-decoration: none; }
/* Stretched link — makes the whole card clickable from the title anchor */
.pm-doorway .elementor-icon-box-title a::after {
content: ""; position: absolute; inset: 0;
}
.pm-doorway .elementor-icon-box-description {
color: var(--pm-slate);
font-size: .95rem; line-height: 1.55;
margin: 0;
}
/* CTA line, per card */
.pm-doorway .elementor-icon-box-description::after {
display: block;
margin-top: .85rem;
font-weight: 700; font-size: .9rem;
color: var(--pm-blue);
}
.pm-doorway--commercial .elementor-icon-box-description::after { content: "Commercial services \2192"; }
.pm-doorway--university .elementor-icon-box-description::after { content: "Putnam Maintenance University \2192"; }
@media (max-width: 767px) {
.pm-doorway { padding: 1.3rem 1.35rem; }
.pm-doorway .elementor-icon { width: 46px; height: 46px; border-radius: 12px; }
.pm-doorway .elementor-icon svg { width: auto; height: 21px; }
}
/* ==== PM Section 63 - IMAGE ====
Add "pm-img" to an Image widget (or its container) via Advanced -> CSS Classes.
Matches the hero image treatment: rounded corners + soft shadow.
================================================================= */
.pm-img img {
display: block;
width: 100%;
height: auto;
border-radius: var(--pm-radius-lg);
box-shadow: var(--pm-shadow-lg);
}
/* ==========================================================================
PM Section 64 — TRADE CARDS (Services Loop Grid) v6 · Elementor V4, verified
Photo-led loop item for the five trades. Order in the card:
photo → title → blurb → two-button footer (stacked).
Fixes baked in:
• Columns set in the LOOP GRID WIDGET, never in CSS (see Section 65).
• Container padding zeroed at all breakpoints so the photo bleeds to edges.
• Icon chip forced to 46px and clipped (can't fill the card).
• Title + blurb styled DIRECTLY (V4 has no .elementor-widget-container
/ .elementor-heading-title wrappers).
• Blurb clamped to 2 lines.
• 24/7 badge overrides Elementor's reserved container ::before (inset:0).
• Footer buttons stacked full-width; View arrow sits beside text.
Class placement (Advanced → CSS Classes):
.pm-trade-card → loop CONTAINER (.e-con)
.pm-trade-img → Image widget (ACF hero_image)
.pm-trade-ic → Image widget (ACF icon — optional)
.pm-trade-name → Heading H3 (Post Title)
.pm-trade-desc → Text widget (ACF short_description)
.pm-trade-foot → Container holding two Button widgets:
.pm-btn-view → Button "View Services" Link: Dynamic → Permalink
.pm-btn-call → Button "Call" Link: tel:+19315597823
========================================================================== */
/* --- Card shell ----------------------------------------------------------- */
.pm-trade-card{
--pm-trade-img-h: 170px; /* photo height + chip anchor stay in sync */
position: relative; /* positioning context for chip + badge */
display: flex; flex-direction: column;
height: 100%; /* equal-height cards across the loop grid */
background: var(--pm-white);
border: 1px solid var(--pm-border);
border-radius: var(--pm-radius-lg);
overflow: hidden; /* clips the photo to the rounded corners */
transition: transform var(--pm-dur) var(--pm-ease),
box-shadow var(--pm-dur) var(--pm-ease),
border-color var(--pm-dur) var(--pm-ease);
}
.pm-trade-card:hover{
transform: translateY(-4px);
box-shadow: var(--pm-shadow-lg);
border-color: var(--pm-blue-soft);
}
/* Kill Elementor/Hello container padding at EVERY breakpoint so the photo bleeds
to the top and side edges. 2nd .elementor-kit-7 covers "boxed" containers whose padding
sits on .e-con-inner. */
.e-con.e-parent.pm-trade-card,
.e-con.e-parent.pm-trade-card > .e-con-inner{
padding: 0 !important;
}
/* --- Photo ---------------------------------------------------------------- */
.pm-trade-img,
.pm-trade-img .elementor-widget-container{ line-height: 0; }
.pm-trade-img img{
width: 100%; height: var(--pm-trade-img-h);
object-fit: cover; display: block;
}
.pm-trade-img:not(:has(img)){ display: none; } /* no photo → collapse the slot */
/* --- Icon chip (floats bottom-left on the photo; forced small + clipped) --- */
.pm-trade-card .pm-trade-ic{
position: absolute;
top: calc(var(--pm-trade-img-h) - 58px); /* 46px chip + 12px inset above seam */
left: 1rem;
z-index: 2;
width: 46px !important; height: 46px !important;
display: grid; place-items: center;
background: var(--pm-white);
border-radius: 12px;
box-shadow: var(--pm-shadow);
overflow: hidden; /* clip a too-big icon asset */
pointer-events: none; /* keep the whole card clickable */
}
.pm-trade-card .pm-trade-ic img{
width: 24px !important; height: 24px !important;
max-width: 24px !important; object-fit: contain;
}
.pm-trade-ic:not(:has(img)){ display: none; } /* no icon set → no chip */
/* --- Title (styled directly — V4 flat DOM) -------------------------------- */
.pm-trade-name{
margin: 1.15rem 1.3rem .5rem; /* top = gap from photo; bottom = gap to blurb */
font-family: var(--pm-font-display) !important;
text-transform: uppercase !important;
font-weight: 700 !important;
font-size: 1.2rem !important;
line-height: 1.15 !important;
letter-spacing: .01em !important;
color: var(--pm-navy) !important;
}
/* Heading text lives in .elementor-heading-title (V4 heading widget) —
style it there so it beats Elementor's global heading font. */
.pm-trade-card .pm-trade-name .elementor-heading-title{
font-family: "Oswald","Barlow Condensed","Arial Narrow",sans-serif !important;
text-transform: uppercase !important;
font-weight: 700 !important;
font-size: 1.2rem !important;
line-height: 1.15 !important;
letter-spacing: .01em !important;
color: var(--pm-navy) !important;
}
/* --- Blurb (styled + clamped directly — V4 flat DOM) ---------------------- */
.pm-trade-desc{
margin: 0 1.3rem .7rem; /* top 0; extra bottom padding before the footer */
color: var(--pm-slate);
font-size: .92rem;
line-height: 1.55;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* change to 3 for taller cards */
overflow: hidden;
}
/* --- Capability chips (dynamic via [pm_trade_chips]) — below blurb, above footer */
.pm-trade-chips{
display: flex; flex-wrap: wrap; gap: .4rem;
margin: 0 1.3rem 1.1rem; /* top 0; bottom = room before the footer */
}
.pm-trade-chips:empty{ display: none; }
.pm-chip{
font-size: .72rem; font-weight: 600; color: var(--pm-navy);
background: var(--pm-pale-tint); padding: .22rem .6rem;
border-radius: 999px; letter-spacing: .01em; white-space: nowrap;
}
/* --- 24/7 badge (top-right; overrides Elementor's reserved ::before) ------ */
.pm-trade-card::before{
content: "24/7 SERVICE";
position: absolute;
inset: .8rem .8rem auto auto !important; /* top right bottom left — beats inset:0 */
width: auto !important; height: auto !important;
z-index: 3;
font-family: var(--pm-font-display);
font-weight: 700; font-size: .78rem; letter-spacing: .03em;
color: var(--pm-white);
background: var(--pm-navy);
padding: .28rem .62rem;
border-radius: 999px;
box-shadow: var(--pm-shadow);
pointer-events: none; /* keep the whole card clickable */
}
/* --- Two-action footer (View + Call) — stacked, full-width ---------------- */
.pm-trade-foot{
margin-top: auto; /* pins the footer to the card bottom */
display: flex; flex-direction: column; /* stacked: View on top, Call below */
align-items: stretch; /* each button fills the card width */
gap: .5rem;
border-top: 1px solid var(--pm-border);
padding: 1rem 1.3rem 1.15rem !important; /* built-in spacing, no manual pad */
}
.pm-trade-foot > *{ margin: 0 !important; } /* kill Elementor widget gaps */
.pm-trade-foot .pm-btn-view{ flex: none; } /* no horizontal grow when stacked */
.pm-trade-foot .elementor-button{
display: flex !important; align-items: center; justify-content: center;
width: 100%; min-height: 44px; /* equal height → buttons line up */
padding: .5rem 1rem !important;
font-size: .82rem !important;
text-transform: uppercase; letter-spacing: .02em;
}
.pm-btn-call .elementor-button{ white-space: nowrap; }
/* Arrow BESIDE the label — target the flex content-wrapper, NOT the
. */
.pm-btn-view .elementor-button-content-wrapper{ gap: .45rem; }
.pm-btn-view .elementor-button-content-wrapper::after{
content: "\2192"; font-size: 1rem; line-height: 1;
transition: transform var(--pm-dur) var(--pm-ease);
}
.pm-btn-view .elementor-button:hover .elementor-button-content-wrapper::after{
transform: translateX(3px);
}
/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 767px){
.pm-trade-card{ --pm-trade-img-h: 150px; } /* chip anchor follows automatically */
}
/* ==========================================================================
PM Section 65 — SERVICES LOOP GRID (adaptive columns)
SEPARATE from Section 64 — this styles the Loop Grid WIDGET, not the card.
Put class `pm-services-grid` on the Loop Grid widget (Advanced → CSS Classes).
auto-fit fills the row and collapses empty tracks, so 4/5/6 items all look
balanced with no lopsided gap. Do NOT delete this when editing the cards.
========================================================================== */
.pm-services-grid.elementor-grid,
.pm-services-grid .elementor-grid,
.pm-services-grid .elementor-loop-container{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
gap: 1.5rem !important;
}
/* ==========================================================================
PM Section 66 — $99 SERVICE-CALL BAR (full-width navy band under the hero)
Build:
Section/Container → class `pm-fee-bar`, width Full, background --pm-navy-900
HTML widget → the .pm-fee-inner markup above
========================================================================== */
/* Band: force the navy and zero Elementor's own padding/margins so the bar
height is set ONLY by .pm-fee-inner below (bulletproof against theme padding). */
.pm-fee-bar{ background: var(--pm-navy-900) !important; padding: 0 !important; }
.pm-fee-bar > .e-con-inner{ padding: 0 !important; }
.pm-fee-bar .e-con-inner > *{ margin: 0 !important; }
/* Inner row: centered, max-width matched to the page; this sets the height. */
.pm-fee-inner{
max-width: 1200px;
margin: 0 auto;
padding: 1.1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
flex-wrap: wrap;
color: #fff;
}
/* Offer group — price + line stay together if the row wraps. */
.pm-fee-offer{
display: flex;
align-items: center;
gap: .8rem;
flex-wrap: wrap;
}
.pm-fee-price{
font-family: var(--pm-font-display);
font-weight: 700;
font-size: 2.1rem;
line-height: 1;
letter-spacing: .01em;
color: var(--pm-blue-soft);
}
.pm-fee-lead{
font-weight: 700;
font-size: 1.02rem;
line-height: 1.3;
color: #fff;
}
.pm-fee-lead .thin{
font-weight: 400;
color: #c9d6e2;
}
/* Soft CTA — a link, not a button, so it doesn't fight the hero's Schedule button. */
.pm-fee-cta{
flex: none;
font-family: var(--pm-font-display);
text-transform: uppercase;
font-weight: 700;
font-size: .9rem;
letter-spacing: .03em;
color: var(--pm-blue-soft);
text-decoration: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: .4rem;
transition: color var(--pm-dur) var(--pm-ease);
}
.pm-fee-cta::after{
content: "\2192";
font-size: 1rem;
transition: transform var(--pm-dur) var(--pm-ease);
}
.pm-fee-cta:hover{ color: #fff; }
.pm-fee-cta:hover::after{ transform: translateX(3px); }
.pm-fee-cta:focus-visible{
outline: 2px solid var(--pm-blue-soft);
outline-offset: 3px;
border-radius: 4px;
}
/* Mobile: stack and center. */
@media (max-width: 640px){
.pm-fee-inner{
flex-direction: column;
justify-content: center;
text-align: center;
gap: .7rem;
}
.pm-fee-offer{ justify-content: center; }
}
/* $99 fee CTA — button element, on-brand hover.
Overrides Hello Elementor's default button:hover/:focus (#c36 pink). */
.pm-fee-inner .pm-fee-cta{
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: .5rem 1rem;
border-radius: var(--pm-radius-btn);
transition: background-color var(--pm-dur) var(--pm-ease),
color var(--pm-dur) var(--pm-ease);
}
.pm-fee-inner .pm-fee-cta:hover,
.pm-fee-inner .pm-fee-cta:focus,
.pm-fee-inner .pm-fee-cta:focus-visible{
background-color: var(--pm-white);
color: var(--pm-navy);
}
.pm-fee-inner .pm-fee-cta:focus-visible{
outline: 2px solid var(--pm-blue-soft);
outline-offset: 3px;
}
/* ==========================================================================
PM Section 67 — PUTNAM MAINTENANCE UNIVERSITY HIGHLIGHT (home page)
Split image + story band. Layout only — colors come from .pm-section--navy,
.pm-eyebrow, and .pm-btn--ondark (existing kit utilities).
========================================================================== */
/* Band: photo bleeds to the top/bottom edges — the text column carries padding. */
.pm-uni{ padding-top: 0 !important; padding-bottom: 0 !important; }
.pm-uni > .e-con-inner{ padding-top: 0 !important; padding-bottom: 0 !important; }
/* Two equal columns; the photo stretches to match the text side's height. */
.pm-uni-inner{
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 3.5rem;
align-items: stretch;
max-width: 1200px;
margin-inline: auto;
}
/* Photo column — fills its half edge-to-edge, full height. */
.pm-uni-photo{
min-height: 420px;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Text column. */
.pm-uni-body{
align-self: center;
padding: 4.5rem 0;
}
.pm-uni-body p{ color: #c9d6e2; max-width: 46ch; }
/* Proof points (Icon List) — on-dark colors, tighter spacing. */
.pm-uni-points .elementor-icon-list-item{ margin-bottom: .6rem; }
.pm-uni-points .elementor-icon-list-text{ color: #fff; font-weight: 600; }
.pm-uni-points .elementor-icon-list-icon svg,
.pm-uni-points .elementor-icon-list-icon i{ fill: var(--pm-blue-soft); color: var(--pm-blue-soft); }
/* Mobile: stack, photo on top, restore side padding on the text. */
@media (max-width: 820px){
.pm-uni-inner{ grid-template-columns: 1fr; gap: 0; }
.pm-uni-photo{ min-height: 260px; }
.pm-uni-body{ padding: 2.6rem 1.3rem; }
}
/* =========================================================================
7B - MOBILE NAV (REPLACES Sections 15, 40, 41 and the earlier
"HEADER — MOBILE MENU" block pasted into Section 7)
DELETE THOSE FOUR BLOCKS when you paste this in. Everything they did is
carried over below - nothing is dropped. See the audit for line-by-line.
Why one block: the mobile menu activates at <=1024px (verified: hamburger
at 1024, full nav at 1100), but Sections 15/40/41 were all scoped <=767px,
so tablets ran the menu with none of the fixes applied.
Two queries on purpose:
<=1024px menu mechanics (matches Elementor's real breakpoint)
<=767px phone-only layout (utility bar + inline CTAs) - unchanged
========================================================================= */
/* ---------- MENU MECHANICS (<=1024px) ---------- */
@media (max-width: 1024px){
/* Anchor the panel to the whole header row, not the narrow nav widget,
so it drops below the header full-width. (was Section 15) */
.pm-header{ position: relative; }
.pm-header .elementor-widget-nav-menu{ position: static !important; }
.pm-header .pm-main-nav{ flex: 1 1 auto !important; width: auto !important; }
.pm-main-nav .elementor-menu-toggle{ margin-left: auto !important; margin-right: 0 !important; }
/* Hamburger: 44x44 minimum touch target (was 33x33) */
.pm-header .elementor-menu-toggle{
min-width: 44px !important; min-height: 44px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
/* Panel: full width, flush under the header bar (no 10px gap) */
.pm-header .elementor-nav-menu--dropdown{
position: absolute !important;
left: 0 !important; right: 0 !important; width: 100% !important;
top: 100% !important;
margin-top: 0 !important;
border-top: 0 !important;
z-index: 1000;
box-shadow: var(--pm-shadow-lg);
overflow-y: auto !important;
}
/* Submenus flow inline instead of absolute flyouts, so all items show
without scrolling a cramped inner box. SmartMenus writes these inline
via JS - hence !important. */
.pm-header .elementor-nav-menu--dropdown .sub-menu{
position: static !important;
width: auto !important; min-width: 0 !important; max-width: none !important;
max-height: none !important; margin: 0 !important;
overflow: visible !important;
box-shadow: none !important; border-radius: 0 !important;
}
/* Rows: flex so the caret can be pushed to the right edge.
padding-right is 0 - the caret owns that space. */
.pm-header .elementor-nav-menu--dropdown a.elementor-item{
display: flex !important; align-items: center;
padding: 0 0 0 20px !important;
min-height: 58px;
font-size: 16px !important;
border-bottom: 0 !important; /* separator lives on the li */
color: var(--pm-navy);
transition: none !important; /* no fade: Section 7's .25s colour
transition made the text crawl
navy->white while the background
snapped, giving a ~100ms
navy-on-navy blink on every tap */
}
.pm-header .elementor-nav-menu--dropdown a.elementor-sub-item{
padding: 14px 20px 14px 34px !important; /* indent = visual hierarchy */
font-size: 15px !important;
}
.pm-header .elementor-nav-menu--dropdown li:not(:last-child){
border-bottom: 1px solid rgba(0,0,0,.06);
}
/* THE TAP FIX: caret sits at the right edge, full row height, with a
divider. Before: 56px caret mid-row, 182px of dead zone to its right
that navigated instead of toggling (85% of the row). */
.pm-header .elementor-nav-menu--dropdown .sub-arrow{
margin-left: auto !important;
width: 72px !important;
align-self: stretch !important;
display: flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important;
border-left: 1px solid rgba(255,255,255,.25);
}
/* CARET HIT-FIX (this is what made "tap to close" navigate).
SmartMenus decides toggle-vs-follow-link with:
f = $(e.target).is(".sub-arrow")
if (isCollapsible && (toggleMode || f)) { close; return false; }
collapsibleBehavior is "default", so toggleMode is false and f is the ONLY
thing that prevents navigation. Elementor renders an