:root {
/* === Surfaces === */
--upp-bg-page: #FFFFFF; /* clean white instead of aged paper */
--upp-bg-elevated: rgba(255, 255, 255, 0.94);
--upp-bg-section-alt: #F4ECD8; /* warm cream — kept for variety */
--upp-bg-section-cream: #F4ECD8;
--upp-bg-dark: #122118; /* deep forest near-black */
--upp-bg-warning-dark: #1A2530; /* dark navy for caution sections */
--upp-bg-caution: #FFC629; /* hi-vis safety yellow */
/* === Ink === */
--upp-ink: #0F1410;
--upp-ink-on-dark: #F8F4E8;
--upp-ink-muted: #5a6058;
--upp-ink-muted-on-dark: #c8c2b8;
--upp-ink-faint: #a8a399;
/* === Action — hot orange (Home Depot / safety road) === */
--upp-accent: #F26619; /* HOT hi-vis orange */
--upp-accent-soft: #FF8C42;
--upp-accent-deep: #C2470F;
--upp-accent-ink: #ffffff;
/* === Honest / Go — saturated forest green (John Deere / safety) === */
--upp-fair: #2D7A3E; /* deep saturated go-green */
--upp-fair-light: #4FBE5B; /* brighter alt for chips/badges */
--upp-fair-deep: #1F5A2C;
--upp-fair-ink: #ffffff;
/* === Warning — red, distinct from action orange === */
--upp-warning: #D63916;
--upp-warning-deep: #9C2A0F;
--upp-caution-deep: #B88A0E;
/* === Borders === */
--upp-border: rgba(15, 15, 15, 0.08);
--upp-border-strong: rgba(15, 15, 15, 0.18);
/* === Type === */
--upp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--upp-font-serif: Georgia, "Times New Roman", serif;
/* === Geometry === */
--upp-radius-button: 6px;
--upp-radius-card: 8px;
--upp-radius-pill: 999px;
--upp-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.upp-widget {
width: 100%;
box-sizing: border-box;
background: var(--upp-bg-page);
color: var(--upp-ink);
font-family: var(--upp-font-sans);
}
.upp-widget *,
.upp-widget *::before,
.upp-widget *::after {
box-sizing: border-box;
}
.upp-widget__inner {
width: min(1120px, calc(100% - 32px));
margin-inline: auto;
}
.upp-widget-kicker {
margin: 0 0 12px;
color: var(--upp-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.upp-widget h1,
.upp-widget h2,
.upp-widget h3,
.upp-widget p {
letter-spacing: 0;
}
.upp-widget h1,
.upp-widget h2 {
margin: 0;
line-height: 1.06;
}
.upp-widget h1 {
font-size: clamp(38px, 6vw, 68px);
}
.upp-widget h2 {
font-size: clamp(30px, 4vw, 48px);
}
.upp-widget h3 {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.upp-widget p {
font-size: 17px;
line-height: 1.58;
}
.upp-widget-lede {
max-width: 760px;
margin: 16px 0 0;
color: var(--upp-ink-muted);
font-size: clamp(17px, 2vw, 21px);
}
.upp-widget-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.upp-widget-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
border: 1px solid var(--upp-accent);
border-radius: var(--upp-radius-button);
background: var(--upp-accent);
color: var(--upp-accent-ink);
padding: 13px 22px;
font-weight: 800;
text-decoration: none;
text-transform: none;
transition: transform var(--upp-transition), background var(--upp-transition);
}
.upp-widget-btn:hover,
.upp-widget-btn:focus-visible {
transform: translateY(-1px);
}
.upp-widget-btn--ghost {
background: transparent;
color: var(--upp-accent);
}
.upp-widget-text-link {
color: var(--upp-accent);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
.upp-hero-widget {
position: relative;
isolation: isolate;
min-height: 440px;
display: flex;
align-items: center;
padding: 84px 0;
background-color: var(--upp-bg-section-alt);
background-image: linear-gradient(rgba(15, 15, 15, var(--upp-hero-overlay, 0)), rgba(15, 15, 15, var(--upp-hero-overlay, 0))), var(--upp-hero-image);
background-position: center;
background-size: cover;
}
.upp-hero-widget[style*="--upp-hero-image"] {
color: var(--upp-ink-on-dark);
}
.upp-hero-widget[style*="--upp-hero-image"] .upp-widget-lede,
.upp-hero-widget[style*="--upp-hero-image"] .upp-widget-kicker {
color: var(--upp-ink-on-dark);
}
.upp-hero-widget--center {
text-align: center;
}
.upp-hero-widget--center .upp-widget-lede,
.upp-hero-widget--center .upp-widget-actions {
margin-inline: auto;
justify-content: center;
}
.upp-hero-widget--variant-b .upp-widget__inner {
width: min(760px, calc(100% - 32px));
max-width: 760px;
margin-inline: auto;
border: 1px solid rgba(251, 250, 246, .28);
border-radius: var(--upp-radius-card);
background: rgba(15, 15, 15, .62);
padding: clamp(24px, 4vw, 42px);
backdrop-filter: blur(3px);
}
.upp-hero-widget--variant-b.upp-hero-widget--left .upp-widget__inner {
margin-left: calc((100% - min(1120px, calc(100% - 32px))) / 2);
margin-right: auto;
}
.upp-hero-widget--variant-c {
min-height: 320px;
padding: 56px 0;
background-image: none;
background-color: var(--upp-bg-page);
color: var(--upp-ink);
border-block: 1px solid var(--upp-border);
}
.upp-hero-widget--variant-c[style*="--upp-hero-image"] {
color: var(--upp-ink);
}
.upp-hero-widget--variant-c[style*="--upp-hero-image"] .upp-widget-kicker {
color: var(--upp-accent);
}
.upp-hero-widget--variant-c[style*="--upp-hero-image"] .upp-widget-lede {
color: var(--upp-ink-muted);
}
.upp-hero-widget--variant-c .upp-widget__inner {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
gap: 24px;
align-items: end;
}
.upp-hero-widget--variant-c h1 {
font-size: clamp(34px, 4vw, 52px);
}
.upp-hero-widget--variant-c .upp-widget-lede {
margin-top: 0;
}
/* ============================================================
VARIANT D — Attention-grab (slogan + accent + preview card)
Pattern adapted from punchy SEO landing pages (Whitespark etc.)
Centered, huge headline, accent-word highlight, product preview.
============================================================ */
.upp-hero-widget--variant-d {
min-height: auto;
padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
background-image: none;
background-color: #F2EADA;
color: var(--upp-ink, #1A332A);
text-align: center;
border-top: none;
border-bottom: none;
position: relative;
overflow: hidden;
}
/* Whisper of a dot pattern — barely there, just enough to feel "paper" */
.upp-hero-widget--variant-d::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.upp-hero-widget--variant-d[style*="--upp-hero-image"] {
color: var(--upp-ink, #1A332A);
}
.upp-hero-widget--variant-d .upp-widget__inner {
width: min(880px, calc(100% - 32px));
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 1;
}
.upp-hero-widget--variant-d .upp-hero-widget__copy {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
width: 100%;
}
.upp-hero-widget--variant-d .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0;
}
.upp-hero-widget--variant-d h1 {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0;
max-width: 22ch;
color: var(--upp-ink, #1A332A);
line-height: 1.05;
letter-spacing: -0.015em;
font-weight: 800;
}
/* Primary headline line — the punchy ask */
.upp-hero-widget--variant-d .upp-hero-h1-primary {
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.05;
font-weight: 800;
display: block;
}
/* Secondary headline line — smaller "second opinion" tagline below */
.upp-hero-widget--variant-d .upp-hero-h1-secondary {
font-size: clamp(22px, 3vw, 36px);
line-height: 1.15;
font-weight: 700;
color: var(--upp-ink, #1A332A);
opacity: 0.85;
display: block;
margin-top: 6px;
}
/* If accent word appears in secondary line, scale up the rivet */
.upp-hero-widget--variant-d .upp-hero-h1-secondary .upp-hero-accent {
font-size: inherit;
}
/* The accent word — sage green, italic, slightly bigger.
This is the "fair" treatment. */
.upp-hero-widget--variant-d .upp-hero-accent {
color: var(--upp-fair, #6B8E5A);
font-style: italic;
font-weight: 900;
position: relative;
display: inline-block;
padding: 0 0.05em;
}
/* Optional underline rivet stroke beneath accent word */
.upp-hero-widget--variant-d .upp-hero-accent::after {
content: '';
position: absolute;
left: 0.06em;
right: 0.06em;
bottom: 0.08em;
height: 0.16em;
background: var(--upp-fair, #6B8E5A);
opacity: 0.22;
border-radius: 4px;
z-index: -1;
}
.upp-hero-widget--variant-d .upp-widget-lede {
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.5;
color: var(--upp-ink-muted, #5a5a5a);
margin: 4px 0 8px;
max-width: 52ch;
}
.upp-hero-widget--variant-d .upp-widget-actions {
margin-top: 12px;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.upp-hero-widget--variant-d .upp-widget-actions .upp-widget-btn:not(.upp-widget-btn--ghost) {
font-size: 18px;
padding: 18px 36px;
background-color: var(--upp-accent, #C76D35);
color: #fff;
border: 2px solid var(--upp-accent-deep, #9c4d1f);
box-shadow: 0 4px 0 var(--upp-accent-deep, #9c4d1f), 0 8px 20px rgba(199, 109, 53, 0.25);
font-weight: 700;
letter-spacing: 0.5px;
transition: transform .12s ease, box-shadow .12s ease;
}
.upp-hero-widget--variant-d .upp-widget-actions .upp-widget-btn:not(.upp-widget-btn--ghost):hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--upp-accent-deep, #9c4d1f), 0 4px 12px rgba(199, 109, 53, 0.3);
}
.upp-hero-pills {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
}
.upp-hero-pills li {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--upp-ink, #1A332A);
padding: 6px 12px;
background: rgba(107, 142, 90, 0.08);
border: 1px solid rgba(107, 142, 90, 0.25);
border-radius: 99px;
}
.upp-hero-pills li span {
color: var(--upp-fair, #6B8E5A);
font-weight: 800;
}
/* PREVIEW CARD — the "what gets measured" mockup */
.upp-hero-preview {
margin-top: 40px;
width: min(640px, calc(100% - 16px));
background: #fff;
border: 1px solid var(--upp-border, #d4cbb8);
border-top: 6px solid var(--upp-ink, #1A332A);
border-radius: 6px;
padding: 22px 28px 24px;
box-shadow: 0 12px 40px rgba(26, 51, 42, 0.08), 0 2px 6px rgba(26, 51, 42, 0.04);
text-align: left;
position: relative;
}
.upp-hero-preview__label {
display: block;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--upp-ink-muted, #888);
margin-bottom: 14px;
border-bottom: 1px dashed var(--upp-border, #d4cbb8);
padding-bottom: 10px;
}
.upp-hero-preview__rows {
display: flex;
flex-direction: column;
gap: 10px;
}
.upp-hero-preview__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
font-family: 'Inter', sans-serif;
}
.upp-hero-preview__k {
font-size: 14px;
font-weight: 500;
color: var(--upp-ink-muted, #5a5a5a);
}
.upp-hero-preview__v {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 26px;
font-weight: 700;
color: var(--upp-ink, #1A332A);
letter-spacing: 0.5px;
}
.upp-hero-preview__v--your {
color: var(--upp-accent, #C76D35);
}
.upp-hero-preview__v--fair {
color: var(--upp-fair, #6B8E5A);
}
.upp-hero-preview__dash {
opacity: 0.5;
padding: 0 4px;
font-weight: 400;
}
.upp-hero-preview__verdict {
display: flex;
align-items: center;
gap: 16px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--upp-border, #d4cbb8);
}
.upp-hero-preview__gauge {
width: 56px;
height: 56px;
flex: 0 0 56px;
}
.upp-hero-preview__verdict-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.upp-hero-preview__verdict-label {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--upp-ink-muted, #888);
}
.upp-hero-preview__verdict-value {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--upp-fair, #6B8E5A);
letter-spacing: 1px;
}
/* Mobile tightening */
@media (max-width: 600px) {
.upp-hero-widget--variant-d {
min-height: auto;
padding: 40px 0 36px;
}
.upp-hero-widget--variant-d h1 {
font-size: clamp(28px, 7vw, 40px);
}
.upp-hero-preview {
padding: 18px 18px 20px;
}
.upp-hero-preview__v {
font-size: 22px;
}
.upp-hero-preview__verdict-value {
font-size: 20px;
}
}
.upp-trust-strip {
padding: 42px 0;
}
.upp-trust-strip__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.upp-trust-strip__item {
border: 1px solid var(--upp-border-strong);
border-radius: var(--upp-radius-card);
background: var(--upp-bg-elevated);
padding: 20px;
text-align: center;
}
.upp-trust-strip__item strong {
display: block;
color: var(--upp-accent);
font-size: 30px;
line-height: 1.05;
}
.upp-trust-strip__item span {
display: block;
margin-top: 8px;
color: var(--upp-ink-muted);
font-size: 14px;
}
.upp-trust-strip--variant-b {
padding: 22px 0;
border-block: 1px solid var(--upp-border-strong);
}
.upp-trust-strip--variant-b .upp-trust-strip__grid {
display: flex;
justify-content: space-between;
gap: 0;
}
.upp-trust-strip--variant-b .upp-trust-strip__item {
flex: 1 1 0;
border: 0;
border-radius: 0;
background: transparent;
padding: 10px 22px;
text-align: left;
}
.upp-trust-strip--variant-b .upp-trust-strip__item + .upp-trust-strip__item {
border-left: 1px solid var(--upp-border-strong);
}
.upp-trust-strip--variant-b .upp-trust-strip__item strong {
font-size: 22px;
}
.upp-trust-strip--variant-c {
background: var(--upp-bg-dark);
}
.upp-trust-strip--variant-c .upp-trust-strip__item {
border-color: rgba(251, 250, 246, .18);
background: rgba(251, 250, 246, .06);
}
.upp-trust-strip--variant-c .upp-trust-strip__item span {
color: var(--upp-ink-muted-on-dark);
}
/* ============================================================
VARIANT D — Bold Colored License Plates
Three distinct colored blocks side-by-side. Each shouts a single
trust signal in white text + huge white glyph. Block colors map
to brand semantics: GREEN=honest/qualified, NAVY=local/anchored,
ORANGE=free/action.
============================================================ */
.upp-trust-strip--variant-d {
background: var(--upp-bg-section-cream, #F4ECD8);
padding: clamp(24px, 3.5vw, 44px) 0 clamp(32px, 3.5vw, 48px);
position: relative;
overflow: hidden;
}
.upp-trust-strip--variant-d::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.05) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.upp-trust-strip--variant-d .upp-trust-strip__wrap {
position: relative;
z-index: 1;
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-trust-strip--variant-d .upp-trust-strip__eyebrow {
text-align: center;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--upp-ink, #0F1410);
margin: 0 0 22px;
font-weight: 700;
opacity: 0.7;
}
.upp-trust-strip--variant-d .upp-trust-strip__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.upp-trust-strip--variant-d .upp-trust-strip__item {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 22px;
border: 0;
background: var(--upp-fair, #2D7A3E);
color: #fff;
text-align: left;
border-radius: 10px;
position: relative;
box-shadow: 0 4px 0 var(--upp-fair-deep, #1F5A2C),
0 10px 24px rgba(15, 20, 16, .12);
transition: transform .15s ease, box-shadow .15s ease;
}
.upp-trust-strip--variant-d .upp-trust-strip__item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 var(--upp-fair-deep, #1F5A2C),
0 14px 32px rgba(15, 20, 16, .18);
}
/* 2nd block: deep navy (local / anchored / Salt Lake) */
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(2) {
background: var(--upp-bg-warning-dark, #1A2530);
box-shadow: 0 4px 0 #0d141b,
0 10px 24px rgba(15, 20, 16, .12);
}
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(2):hover {
box-shadow: 0 6px 0 #0d141b,
0 14px 32px rgba(15, 20, 16, .18);
}
/* 3rd block: hot orange (FREE / no signup — the most important sell) */
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(3) {
background: var(--upp-accent, #F26619);
box-shadow: 0 4px 0 var(--upp-accent-deep, #C2470F),
0 10px 24px rgba(15, 20, 16, .12);
}
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(3):hover {
box-shadow: 0 6px 0 var(--upp-accent-deep, #C2470F),
0 14px 32px rgba(15, 20, 16, .18);
}
.upp-trust-strip--variant-d .upp-trust-strip__item + .upp-trust-strip__item {
border-left: 0;
}
.upp-trust-strip--variant-d .upp-trust-strip__badge {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.20);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.upp-trust-strip--variant-d .upp-trust-strip__badge svg {
width: 30px;
height: 30px;
display: block;
color: #fff;
stroke: #fff !important;
fill: none;
}
.upp-trust-strip--variant-d .upp-trust-strip__badge svg *[fill="currentColor"] {
fill: #fff !important;
stroke: none;
}
.upp-trust-strip--variant-d .upp-trust-strip__text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.upp-trust-strip--variant-d .upp-trust-strip__item strong {
color: #fff;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.upp-trust-strip--variant-d .upp-trust-strip__item span {
color: rgba(255, 255, 255, 0.88);
font-size: 13.5px;
line-height: 1.35;
margin-top: 2px;
font-weight: 500;
}
@media (max-width: 720px) {
.upp-trust-strip--variant-d .upp-trust-strip__grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
.upp-operator-intro,
.upp-services-index,
.upp-service-price-guides,
.upp-cities-chips,
.upp-how-it-works,
.upp-tool-placeholder,
.upp-gives-back-placeholder,
.upp-section-divider {
padding: 58px 0;
}
.upp-operator-intro {
background: var(--upp-bg-section-alt);
}
/* Elementor's saved page data once added 400px of horizontal padding to the
operator widget container. The component owns its own responsive inner
width, so outer editor padding must never collapse it at tablet widths. */
.elementor-widget-upp_operator_intro > .elementor-widget-container {
padding-right: 0 !important;
padding-left: 0 !important;
}
.upp-operator-intro__grid {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 34px;
align-items: center;
}
.upp-operator-intro__media {
margin: 0;
}
.upp-operator-intro__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--upp-radius-card);
}
.upp-operator-intro__copy p {
margin: 14px 0 0;
}
.upp-operator-intro--variant-a .upp-operator-intro__grid {
grid-template-columns: 1fr;
max-width: 760px;
margin-inline: auto;
text-align: left;
}
/* Variant A: portrait becomes a small byline-style circular avatar
placed above the kicker, so the photo still appears but the layout
stays "text first". */
.upp-operator-intro--variant-a .upp-operator-intro__media {
margin: 0 0 18px;
max-width: 96px;
}
.upp-operator-intro--variant-a .upp-operator-intro__media img {
width: 96px;
height: 96px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--upp-accent, #C76D35), 0 6px 16px rgba(26, 51, 42, 0.12);
}
.upp-operator-intro--variant-b .upp-operator-intro__copy {
border-left: 4px solid var(--upp-accent);
padding-left: 28px;
}
.upp-operator-intro--variant-c {
background: var(--upp-bg-dark);
color: var(--upp-ink-on-dark);
}
.upp-operator-intro--variant-c .upp-operator-intro__grid {
border: 1px solid rgba(251, 250, 246, .18);
border-radius: var(--upp-radius-card);
background: rgba(251, 250, 246, .06);
padding: clamp(24px, 4vw, 42px);
}
.upp-operator-intro--variant-c .upp-operator-intro__media img {
aspect-ratio: 1;
border-radius: 50%;
}
.upp-operator-intro--variant-c .upp-operator-intro__copy p {
color: var(--upp-ink-muted-on-dark);
}
.upp-services-index__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 28px;
}
.upp-services-index__group {
border-top: 2px solid var(--upp-ink);
padding-top: 12px;
}
.upp-services-index__group ul {
display: grid;
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.upp-services-index__group a {
color: var(--upp-ink);
font-weight: 700;
text-decoration: none;
}
.upp-services-index__group a:hover,
.upp-services-index__group a:focus-visible {
color: var(--upp-accent);
text-decoration: underline;
}
.upp-services-index--variant-b .upp-services-index__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.upp-services-index--variant-b .upp-services-index__group {
border: 1px solid var(--upp-border-strong);
border-radius: var(--upp-radius-card);
background: var(--upp-bg-elevated);
padding: 20px;
}
.upp-services-index--variant-b .upp-services-index__group ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.upp-services-index--variant-b .upp-services-index__group a {
display: inline-flex;
border: 1px solid var(--upp-border);
border-radius: var(--upp-radius-pill);
padding: 8px 10px;
background: var(--upp-bg-page);
font-size: 14px;
}
.upp-services-index--variant-c .upp-services-index__grid {
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--upp-border-strong);
}
.upp-services-index--variant-c .upp-services-index__group {
display: grid;
grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
gap: 18px;
border-top: 0;
border-bottom: 1px solid var(--upp-border-strong);
padding: 16px 0;
}
.upp-services-index--variant-c .upp-services-index__group ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0;
}
/* ============================================================
GLOBAL CHIP PATTERN — .upp-chip
Reusable pill component for any list of links (cities, services,
tags, related items). Default: white pill, rust pin glyph, lift
on hover. Drop the .upp-chip class on any anywhere.
============================================================ */
.upp-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 12px;
background: #ffffff;
color: var(--upp-ink, #1A332A);
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 999px;
font-weight: 700;
font-size: 14.5px;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 1px 0 rgba(26, 51, 42, 0.03), 0 2px 6px rgba(26, 51, 42, 0.04);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.upp-chip__pin {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--upp-accent, #C76D35);
display: inline-flex;
align-items: center;
justify-content: center;
}
.upp-chip__pin svg {
width: 16px;
height: 16px;
display: block;
stroke: currentColor;
}
.upp-chip__label {
white-space: nowrap;
}
.upp-chip:hover,
.upp-chip:focus-visible {
transform: translateY(-1px);
border-color: var(--upp-accent, #C76D35);
color: var(--upp-accent, #C76D35);
box-shadow: 0 1px 0 rgba(26, 51, 42, 0.04), 0 6px 14px rgba(199, 109, 53, 0.18);
outline: none;
}
.upp-chip:hover .upp-chip__pin,
.upp-chip:focus-visible .upp-chip__pin {
color: var(--upp-accent-deep, #9c4d1f);
}
/* Cities chips section wrapper */
.upp-cities-chips {
background: #F2EADA;
position: relative;
overflow: hidden;
}
.upp-cities-chips::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.upp-cities-chips .upp-widget__inner {
position: relative;
z-index: 1;
}
.upp-cities-chips h2 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--upp-ink, #1A332A);
margin: 0 0 6px;
line-height: 1.1;
}
.upp-cities-chips .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0 0 24px;
max-width: 56ch;
font-size: clamp(15px, 1.4vw, 17px);
}
/* ============================================================
UPP_Service_Price_Guides — real-time service index
Queries WP for published upp_service posts. 4 visual variants.
============================================================ */
.upp-service-price-guides {
background: var(--upp-bg-page, #F7F0DF);
}
.upp-service-price-guides .upp-widget__inner {
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
}
.upp-service-price-guides__head {
margin: 0 0 32px;
}
.upp-service-price-guides__title {
margin: 6px 0 8px;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: var(--upp-ink, #1A332A);
letter-spacing: -.5px;
line-height: 1.05;
}
.upp-service-price-guides .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0 0 6px;
max-width: 62ch;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.5;
}
.upp-service-price-guides__count {
margin: 4px 0 0;
font-size: 13px;
color: var(--upp-ink-muted, #5a5a5a);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.upp-service-price-guides__empty {
padding: 32px;
text-align: center;
background: #fff;
border-radius: 12px;
color: var(--upp-ink-muted, #5a5a5a);
}
.upp-service-price-guides__grid {
display: grid;
grid-template-columns: repeat(var(--upp-spg-cols, 3), minmax(0, 1fr));
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 980px) {
.upp-service-price-guides__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.upp-service-price-guides__grid {
grid-template-columns: 1fr;
}
}
.upp-service-price-guides__item {
margin: 0;
}
.upp-service-price-guides__card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 12px;
border: 1px solid rgba(26, 51, 42, 0.08);
box-shadow: 0 2px 0 rgba(26, 51, 42, .04), 0 8px 24px rgba(26, 51, 42, .06);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.upp-service-price-guides__card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 0 rgba(26, 51, 42, .06), 0 14px 32px rgba(26, 51, 42, .12);
border-color: var(--upp-accent, #C76D35);
}
.upp-service-price-guides__media {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: #f1ede0 center / cover no-repeat;
position: relative;
}
.upp-service-price-guides__media-placeholder {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(199, 109, 53, .12), rgba(26, 51, 42, .08)),
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), transparent 60%);
}
.upp-service-price-guides__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
flex: 1 0 auto;
}
.upp-service-price-guides__card-title {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
line-height: 1.2;
color: var(--upp-ink, #1A332A);
}
.upp-service-price-guides__card-tagline {
font-size: 14px;
line-height: 1.5;
color: var(--upp-ink-muted, #5a5a5a);
}
.upp-service-price-guides__card-cta {
margin-top: auto;
padding-top: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
}
/* ============= VARIANT B — compact tile grid ============= */
.upp-service-price-guides--variant-b .upp-service-price-guides__card {
flex-direction: row;
align-items: center;
padding: 18px 22px;
gap: 14px;
}
.upp-service-price-guides--variant-b .upp-service-price-guides__media {
display: none;
}
.upp-service-price-guides--variant-b .upp-service-price-guides__body {
padding: 0;
gap: 4px;
flex: 1;
}
.upp-service-price-guides--variant-b .upp-service-price-guides__card-cta {
margin-top: 6px;
font-size: 12px;
}
.upp-service-price-guides--variant-b .upp-service-price-guides__card-tagline {
font-size: 13.5px;
}
/* ============= VARIANT C — grouped by category ============= */
.upp-service-price-guides--variant-c .upp-service-price-guides__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
@media (max-width: 700px) {
.upp-service-price-guides--variant-c .upp-service-price-guides__groups {
grid-template-columns: 1fr;
}
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(26, 51, 42, 0.08);
padding: 24px 26px;
box-shadow: 0 2px 0 rgba(26, 51, 42, .04), 0 6px 18px rgba(26, 51, 42, .06);
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-title {
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--upp-accent, #C76D35);
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--upp-ink, #1A332A);
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list {
list-style: none;
padding: 0;
margin: 0;
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list li {
border-bottom: 1px dashed rgba(26, 51, 42, 0.12);
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list li:last-child {
border-bottom: 0;
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 0;
text-decoration: none;
color: var(--upp-ink, #1A332A);
font-size: 15px;
line-height: 1.3;
transition: color .12s ease;
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list a:hover {
color: var(--upp-accent, #C76D35);
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-link-arrow {
color: var(--upp-accent, #C76D35);
font-size: 18px;
transition: transform .12s ease;
}
.upp-service-price-guides--variant-c .upp-service-price-guides__group-list a:hover .upp-service-price-guides__group-link-arrow {
transform: translateX(4px);
}
/* ============= VARIANT D — minimal list ============= */
.upp-service-price-guides--variant-d .upp-service-price-guides__grid {
display: block;
border-top: 1px solid rgba(26, 51, 42, 0.18);
}
.upp-service-price-guides--variant-d .upp-service-price-guides__item {
border-bottom: 1px solid rgba(26, 51, 42, 0.18);
}
.upp-service-price-guides--variant-d .upp-service-price-guides__card {
flex-direction: row;
align-items: center;
justify-content: space-between;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 22px 0;
gap: 16px;
}
.upp-service-price-guides--variant-d .upp-service-price-guides__card:hover {
transform: none;
box-shadow: none;
border-color: transparent;
background: rgba(199, 109, 53, .04);
padding-inline: 12px;
}
.upp-service-price-guides--variant-d .upp-service-price-guides__media {
display: none;
}
.upp-service-price-guides--variant-d .upp-service-price-guides__body {
padding: 0;
flex-direction: row;
align-items: baseline;
gap: 18px;
flex: 1;
}
.upp-service-price-guides--variant-d .upp-service-price-guides__card-title {
font-size: 17px;
letter-spacing: 1px;
}
.upp-service-price-guides--variant-d .upp-service-price-guides__card-cta {
margin: 0;
padding: 0;
flex: none;
}
.upp-cities-chips__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 0;
}
/* Back-compat: any legacy without .upp-chip still inside the list
gets the same treatment so older content keeps working */
.upp-cities-chips__list a:not(.upp-chip) {
display: inline-flex;
align-items: center;
padding: 9px 16px;
background: #ffffff;
color: var(--upp-ink, #1A332A);
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 999px;
font-weight: 700;
font-size: 14.5px;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 1px 0 rgba(26, 51, 42, 0.03), 0 2px 6px rgba(26, 51, 42, 0.04);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.upp-cities-chips__list a:not(.upp-chip):hover,
.upp-cities-chips__list a:not(.upp-chip):focus-visible {
transform: translateY(-1px);
border-color: var(--upp-accent, #C76D35);
color: var(--upp-accent, #C76D35);
box-shadow: 0 1px 0 rgba(26, 51, 42, 0.04), 0 6px 14px rgba(199, 109, 53, 0.18);
}
.upp-cities-chips--variant-b {
background: var(--upp-bg-page);
}
.upp-cities-chips--variant-b .upp-cities-chips__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--upp-border-strong);
border-left: 1px solid var(--upp-border-strong);
}
.upp-cities-chips--variant-b .upp-cities-chips__list a {
border: 0;
border-right: 1px solid var(--upp-border-strong);
border-bottom: 1px solid var(--upp-border-strong);
border-radius: 0;
padding: 14px 16px;
}
.upp-cities-chips--variant-c {
background: var(--upp-bg-dark);
color: var(--upp-ink-on-dark);
}
.upp-cities-chips--variant-c .upp-widget-lede {
color: var(--upp-ink-muted-on-dark);
}
.upp-cities-chips--variant-c .upp-cities-chips__list a {
border-color: rgba(251, 250, 246, .18);
background: rgba(251, 250, 246, .06);
color: var(--upp-ink-on-dark);
}
.upp-cities-chips--variant-c .upp-cities-chips__list a:hover,
.upp-cities-chips--variant-c .upp-cities-chips__list a:focus-visible {
color: var(--upp-accent-soft);
}
.upp-how-it-works__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.upp-how-it-works__step {
border: 1px solid var(--upp-border-strong);
border-radius: var(--upp-radius-card);
padding: 20px;
}
.upp-how-it-works__step span {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--upp-accent);
color: var(--upp-accent-ink);
font-weight: 850;
}
.upp-how-it-works__step p {
margin: 10px 0 0;
color: var(--upp-ink-muted);
font-size: 15px;
}
.upp-how-it-works--variant-b {
background: var(--upp-bg-section-alt);
}
.upp-how-it-works--variant-b .upp-how-it-works__steps {
grid-template-columns: 1fr;
}
.upp-how-it-works--variant-b .upp-how-it-works__step {
display: grid;
grid-template-columns: 56px minmax(0, .35fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
background: var(--upp-bg-page);
}
.upp-how-it-works--variant-b .upp-how-it-works__step span {
margin-bottom: 0;
}
.upp-how-it-works--variant-b .upp-how-it-works__step p {
margin-top: 0;
}
/* ============================================================
VARIANT D — RED FLAG HAZARD PLACARD
Treats the widget as a real construction-site warning sign.
Dark navy section background, hi-vis yellow CAUTION badge in
the kicker, white cards with chunky orange/red left stripes,
big white-on-red triangle icons. Eye cannot skip this.
============================================================ */
.upp-how-it-works--variant-d {
background: var(--upp-bg-warning-dark, #1A2530);
position: relative;
overflow: hidden;
padding: clamp(48px, 5vw, 72px) 0;
}
.upp-how-it-works--variant-d::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 198, 41, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
/* Yellow/black caution-tape diagonal stripe across the top edge */
.upp-how-it-works--variant-d::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 12px;
background-image: repeating-linear-gradient(
135deg,
var(--upp-bg-caution, #FFC629) 0,
var(--upp-bg-caution, #FFC629) 22px,
#0f1410 22px,
#0f1410 44px
);
z-index: 1;
}
.upp-how-it-works--variant-d .upp-widget__inner {
position: relative;
z-index: 2;
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
/* The kicker is now a CHUNKY YELLOW BADGE, not a polite eyebrow */
.upp-how-it-works--variant-d .upp-widget-kicker {
display: inline-block;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: #0F1410;
background: var(--upp-bg-caution, #FFC629);
padding: 8px 16px;
border-radius: 4px;
margin: 0 0 18px;
font-weight: 800;
box-shadow: 0 3px 0 var(--upp-caution-deep, #B88A0E);
}
/* Headline on dark BG = white. Bigger. */
.upp-how-it-works--variant-d h2 {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
letter-spacing: -0.01em;
color: #ffffff;
margin: 0 0 10px;
line-height: 1.05;
}
.upp-how-it-works--variant-d .upp-widget-lede {
color: rgba(255, 255, 255, 0.78);
margin: 0 0 32px;
max-width: 60ch;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.55;
}
.upp-how-it-works--variant-d .upp-how-it-works__steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 0;
}
/* Cards: white on dark, chunky 6px red/orange left stripe, no soft shadows */
.upp-how-it-works--variant-d .upp-how-it-works__step {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 20px;
row-gap: 6px;
align-items: center;
background: #ffffff;
border: 0;
border-left: 6px solid var(--upp-warning, #D63916);
border-radius: 4px;
padding: 22px 24px;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28),
0 12px 28px rgba(0, 0, 0, 0.32);
transition: transform .12s ease, box-shadow .12s ease;
}
/* Alternate cards get hot-orange stripes for variety (still reads as warning) */
.upp-how-it-works--variant-d .upp-how-it-works__step:nth-child(even) {
border-left-color: var(--upp-accent, #F26619);
}
.upp-how-it-works--variant-d .upp-how-it-works__step:hover {
transform: translateY(-3px);
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.32),
0 16px 36px rgba(0, 0, 0, 0.42);
}
/* BIG warning triangle icons — 60px circles on red BG */
.upp-how-it-works--variant-d .upp-how-it-works__icon {
grid-row: 1 / span 2;
width: 60px;
height: 60px;
margin: 0;
border-radius: 50%;
background: var(--upp-warning, #D63916);
color: #fff;
display: inline-grid;
place-items: center;
box-shadow: 0 4px 0 var(--upp-warning-deep, #9C2A0F);
}
/* Even cards use hot orange to match the alternating left stripe */
.upp-how-it-works--variant-d .upp-how-it-works__step:nth-child(even) .upp-how-it-works__icon {
background: var(--upp-accent, #F26619);
box-shadow: 0 4px 0 var(--upp-accent-deep, #C2470F);
}
.upp-how-it-works--variant-d .upp-how-it-works__icon svg {
width: 30px;
height: 30px;
display: block;
}
.upp-how-it-works--variant-d .upp-how-it-works__step h3 {
margin: 0;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--upp-ink, #0F1410);
line-height: 1.2;
}
.upp-how-it-works--variant-d .upp-how-it-works__step p {
margin: 0;
color: #3a3f3c;
font-size: 14.5px;
line-height: 1.5;
}
@media (max-width: 720px) {
.upp-how-it-works--variant-d .upp-how-it-works__steps {
grid-template-columns: 1fr;
}
.upp-how-it-works--variant-d .upp-how-it-works__step {
padding: 20px 20px;
}
}
.upp-how-it-works--variant-c .upp-how-it-works__steps {
display: block;
position: relative;
margin-left: 16px;
border-left: 2px solid var(--upp-accent);
}
.upp-how-it-works--variant-c .upp-how-it-works__step {
position: relative;
border: 0;
border-radius: 0;
padding: 0 0 26px 30px;
}
.upp-how-it-works--variant-c .upp-how-it-works__step span {
position: absolute;
left: -18px;
top: 0;
width: 34px;
height: 34px;
}
.upp-tool-placeholder,
.upp-gives-back-placeholder {
background: var(--upp-bg-dark);
color: var(--upp-ink-on-dark);
}
.upp-tool-placeholder__card,
.upp-gives-back-placeholder__card {
border: 1px solid rgba(251, 250, 246, .18);
border-radius: var(--upp-radius-card);
background: rgba(251, 250, 246, .06);
padding: clamp(24px, 4vw, 42px);
}
.upp-tool-placeholder__card p,
.upp-gives-back-placeholder__card p {
max-width: 760px;
color: var(--upp-ink-muted-on-dark);
}
.upp-section-divider {
border-top: 1px solid var(--upp-border);
border-bottom: 1px solid var(--upp-border);
text-align: center;
}
.upp-section-divider--variant-b {
background: var(--upp-bg-dark);
color: var(--upp-ink-on-dark);
}
.upp-section-divider--variant-b .upp-widget-kicker {
color: var(--upp-accent-soft);
}
@media (max-width: 880px) {
.upp-hero-widget {
min-height: 360px;
padding: 56px 0;
}
.upp-widget-actions,
.upp-hero-widget--center .upp-widget-actions {
justify-content: stretch;
}
.upp-widget-btn {
width: 100%;
}
.upp-trust-strip__grid,
.upp-operator-intro__grid,
.upp-services-index__grid,
.upp-services-index--variant-b .upp-services-index__grid,
.upp-how-it-works__steps {
grid-template-columns: 1fr;
}
/* Cap portrait size on mobile — don't let it eat the whole viewport */
.upp-operator-intro__media {
max-width: 280px;
margin-inline: auto;
}
.upp-operator-intro__media img {
aspect-ratio: 1 / 1;
border-radius: 50%;
}
.upp-operator-intro--variant-b .upp-operator-intro__media img,
.upp-operator-intro--variant-c .upp-operator-intro__media img {
aspect-ratio: 1 / 1;
border-radius: 50%;
}
.upp-hero-widget--variant-c .upp-widget__inner,
.upp-services-index--variant-c .upp-services-index__group,
.upp-services-index--variant-c .upp-services-index__group ul,
.upp-cities-chips--variant-b .upp-cities-chips__list,
.upp-how-it-works--variant-b .upp-how-it-works__step {
grid-template-columns: 1fr;
}
.upp-hero-widget--variant-c .upp-widget-lede {
margin-top: 16px;
}
.upp-trust-strip--variant-b .upp-trust-strip__grid {
display: grid;
gap: 10px;
}
.upp-trust-strip--variant-b .upp-trust-strip__item {
border-left: 0;
border-top: 1px solid var(--upp-border-strong);
padding-inline: 0;
}
.upp-trust-strip--variant-b .upp-trust-strip__item + .upp-trust-strip__item {
border-left: 0;
}
.upp-operator-intro--variant-b .upp-operator-intro__copy {
border-left: 0;
border-top: 4px solid var(--upp-accent);
padding-left: 0;
padding-top: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.upp-widget-btn {
transition: none;
}
}
/* ============================================================
UPP_Network_Feed — cross-site past work cards (live from MMP)
============================================================ */
.upp-network-feed {
background: #F2EADA;
padding: clamp(40px, 5vw, 64px) 0;
position: relative;
overflow: hidden;
}
.upp-network-feed::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.upp-network-feed__inner {
position: relative;
z-index: 1;
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-network-feed__head {
margin: 0 0 28px;
max-width: 720px;
}
.upp-network-feed__head .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0 0 8px;
font-weight: 700;
}
.upp-network-feed__title {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--upp-ink, #1A332A);
margin: 0 0 10px;
line-height: 1.1;
}
.upp-network-feed__lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
}
.upp-network-feed__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 880px) {
.upp-network-feed__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 540px) {
.upp-network-feed__grid {
grid-template-columns: 1fr;
}
}
.upp-network-feed__card {
background: #ffffff;
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(26, 51, 42, .04), 0 8px 24px rgba(26, 51, 42, .06);
transition: transform .12s ease, box-shadow .12s ease;
}
.upp-network-feed__card:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(26, 51, 42, .04), 0 14px 32px rgba(26, 51, 42, .10);
}
.upp-network-feed__card > a {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.upp-network-feed__media {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #f4ecd9;
border-bottom: 1px solid rgba(26, 51, 42, 0.08);
}
.upp-network-feed__media--empty {
background-image: repeating-linear-gradient(45deg, #f8f3e6, #f8f3e6 12px, #f0e8d4 12px, #f0e8d4 24px);
}
.upp-network-feed__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
}
.upp-network-feed__card-title {
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
line-height: 1.25;
color: var(--upp-ink, #1A332A);
}
.upp-network-feed__excerpt {
color: var(--upp-ink-muted, #5a5a5a);
font-size: 13.5px;
line-height: 1.5;
}
.upp-network-feed__cta {
margin-top: auto;
color: var(--upp-accent, #C76D35);
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
padding-top: 6px;
}
.upp-network-feed__card:hover .upp-network-feed__cta {
color: var(--upp-accent-deep, #9c4d1f);
}
.upp-network-feed__more {
margin: 24px 0 0;
text-align: center;
}
.upp-network-feed__more a {
color: var(--upp-accent, #C76D35);
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 13px;
text-decoration: none;
}
.upp-network-feed__more a:hover {
color: var(--upp-accent-deep, #9c4d1f);
}
.upp-network-feed__empty {
text-align: center;
color: var(--upp-ink-muted, #5a5a5a);
background: #fff;
border: 1px dashed rgba(26, 51, 42, 0.15);
border-radius: 8px;
padding: 24px;
}
.upp-network-feed__empty a {
color: var(--upp-accent, #C76D35);
font-weight: 700;
}
/* ============================================================
UPP_Breadcrumb — site-wide trail
============================================================ */
.upp-breadcrumb {
background: transparent;
padding: 10px 0 6px;
}
.upp-breadcrumb .upp-widget__inner {
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
color: var(--upp-ink-muted, #5a5a5a);
}
.upp-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.upp-breadcrumb__item a {
color: var(--upp-ink-muted, #5a5a5a);
text-decoration: none;
transition: color .12s ease;
}
.upp-breadcrumb__item a:hover {
color: var(--upp-accent, #C76D35);
}
.upp-breadcrumb__item [aria-current="page"] {
color: var(--upp-ink, #1A332A);
font-weight: 700;
}
.upp-breadcrumb__sep {
color: rgba(26, 51, 42, 0.35);
}
/* ============================================================
UPP_Service_Schematic — educational illustration block
============================================================ */
.upp-service-schematic {
background: #F2EADA;
padding: clamp(40px, 5vw, 64px) 0;
position: relative;
overflow: hidden;
}
.upp-service-schematic::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.upp-service-schematic .upp-widget__inner {
position: relative;
z-index: 1;
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-service-schematic__head {
text-align: center;
margin: 0 auto 28px;
max-width: 720px;
}
.upp-service-schematic__head .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0 0 8px;
font-weight: 700;
}
.upp-service-schematic__head h2 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--upp-ink, #1A332A);
margin: 0 0 10px;
line-height: 1.1;
}
.upp-service-schematic__head .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
}
.upp-service-schematic__body {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.upp-service-schematic--variant-b .upp-service-schematic__body {
grid-template-columns: 1fr;
}
/* When there are no callouts, center the figure with a sane max-width
instead of letting it sprawl across the full container */
.upp-service-schematic--no-callouts .upp-service-schematic__body {
grid-template-columns: 1fr;
justify-items: center;
}
.upp-service-schematic--no-callouts .upp-service-schematic__figure {
max-width: 520px;
width: 100%;
}
.upp-service-schematic__figure {
margin: 0;
background: #ffffff;
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 10px;
padding: 24px;
box-shadow: 0 1px 0 rgba(26, 51, 42, .04), 0 8px 24px rgba(26, 51, 42, .06);
}
.upp-service-schematic__figure img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
.upp-service-schematic__placeholder {
aspect-ratio: 4 / 3;
background: repeating-linear-gradient(45deg, #f8f3e6, #f8f3e6 12px, #f0e8d4 12px, #f0e8d4 24px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: var(--upp-ink-muted, #5a5a5a);
font-size: 14px;
font-style: italic;
}
.upp-service-schematic__figure figcaption {
margin-top: 14px;
font-size: 13px;
font-style: italic;
color: var(--upp-ink-muted, #5a5a5a);
text-align: center;
}
.upp-service-schematic__callouts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.upp-service-schematic__callout {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 12px;
align-items: start;
background: #ffffff;
border: 1px solid rgba(26, 51, 42, 0.10);
border-left: 3px solid var(--upp-accent, #C76D35);
border-radius: 6px;
padding: 14px 16px;
}
.upp-service-schematic__num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--upp-accent, #C76D35);
color: #fff;
display: inline-grid;
place-items: center;
font-weight: 800;
font-size: 13px;
box-shadow: 0 2px 0 var(--upp-accent-deep, #9c4d1f);
}
.upp-service-schematic__callout strong {
display: block;
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 13.5px;
color: var(--upp-ink, #1A332A);
margin-bottom: 2px;
}
.upp-service-schematic__callout p {
margin: 0;
color: var(--upp-ink-muted, #5a5a5a);
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 820px) {
.upp-service-schematic__body {
grid-template-columns: 1fr;
gap: 20px;
}
.upp-service-schematic__figure {
max-width: 480px;
width: 100%;
margin-inline: auto;
}
.upp-service-schematic__callouts {
gap: 10px;
}
.upp-service-schematic__callout {
padding: 12px 14px;
}
}
/* ============================================================
UPP_Scope_Block — two-column included / NOT included
============================================================ */
.upp-scope-block {
background: #ffffff;
padding: clamp(40px, 5vw, 64px) 0;
}
.upp-scope-block .upp-widget__inner {
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-scope-block__head {
text-align: center;
margin: 0 auto 32px;
max-width: 720px;
}
.upp-scope-block__head .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0 0 8px;
font-weight: 700;
}
.upp-scope-block__head h2 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
color: var(--upp-ink, #1A332A);
margin: 0 0 10px;
line-height: 1.1;
}
.upp-scope-block__head .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0;
font-size: clamp(15px, 1.4vw, 17px);
}
.upp-scope-block__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.upp-scope-block__col {
background: #F7F0DF;
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 10px;
padding: 24px 26px;
}
.upp-scope-block__col--included {
border-left: 4px solid #6B8E5A;
}
.upp-scope-block__col--excluded {
border-left: 4px solid #C76D35;
}
.upp-scope-block__col h3 {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--upp-ink, #1A332A);
margin: 0 0 14px;
}
.upp-scope-block__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.upp-scope-block__col li {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: start;
color: var(--upp-ink, #1A332A);
font-size: 15px;
line-height: 1.45;
}
.upp-scope-block__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
}
.upp-scope-block__icon svg {
width: 14px;
height: 14px;
}
.upp-scope-block__icon--check {
background: rgba(107, 142, 90, 0.15);
color: #4a6b3e;
}
.upp-scope-block__icon--x {
background: rgba(199, 109, 53, 0.15);
color: #9c4d1f;
}
@media (max-width: 720px) {
.upp-scope-block__grid {
grid-template-columns: 1fr;
}
}
/* ===========================================================
VARIANT B — Plain ledger (hairlines, no tinted backgrounds)
Reads like a clean spec sheet. Less visual weight.
=========================================================== */
.upp-scope-block--variant-b .upp-scope-block__col {
background: transparent;
border: 0;
border-top: 2px solid var(--upp-ink, #1A332A);
border-radius: 0;
padding: 18px 0 0;
}
.upp-scope-block--variant-b .upp-scope-block__col--included {
border-top-color: #2e7d32;
}
.upp-scope-block--variant-b .upp-scope-block__col--excluded {
border-top-color: var(--upp-accent, #C76D35);
}
.upp-scope-block--variant-b .upp-scope-block__col h3 {
padding: 0 0 12px;
border-bottom: 1px solid rgba(26, 51, 42, 0.12);
margin-bottom: 12px;
}
.upp-scope-block--variant-b .upp-scope-block__col li {
padding: 10px 0;
border-bottom: 1px dashed rgba(26, 51, 42, 0.12);
}
.upp-scope-block--variant-b .upp-scope-block__col li:last-child {
border-bottom: 0;
}
/* ===========================================================
VARIANT C — Stacked timeline
Single column. Included section on top with green rule, then
excluded below with orange rule. Better on mobile, more linear read.
=========================================================== */
.upp-scope-block--variant-c .upp-scope-block__grid {
display: block;
}
.upp-scope-block--variant-c .upp-scope-block__col {
background: transparent;
border: 0;
border-radius: 0;
padding: 0 0 28px;
position: relative;
}
.upp-scope-block--variant-c .upp-scope-block__col + .upp-scope-block__col {
margin-top: 28px;
padding-top: 28px;
border-top: 1px dashed rgba(26, 51, 42, 0.20);
}
.upp-scope-block--variant-c .upp-scope-block__col h3 {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
}
.upp-scope-block--variant-c .upp-scope-block__col--included h3 {
background: #e0efe2;
color: #1f5a26;
}
.upp-scope-block--variant-c .upp-scope-block__col--excluded h3 {
background: #fcecdb;
color: #8a4419;
}
.upp-scope-block--variant-c .upp-scope-block__col ul {
margin-top: 14px;
columns: 2;
column-gap: 32px;
}
.upp-scope-block--variant-c .upp-scope-block__col li {
break-inside: avoid;
padding: 6px 0;
}
@media (max-width: 720px) {
.upp-scope-block--variant-c .upp-scope-block__col ul {
columns: 1;
}
}
/* ===========================================================
VARIANT D — Inline pills
Items render as chips/pills in a flowing layout. Compact, scannable.
Green-border pills for included, orange-border pills for excluded.
=========================================================== */
.upp-scope-block--variant-d .upp-scope-block__col {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.upp-scope-block--variant-d .upp-scope-block__col h3 {
margin-bottom: 14px;
}
.upp-scope-block--variant-d .upp-scope-block__col ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
}
.upp-scope-block--variant-d .upp-scope-block__col li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: #fff;
border: 2px solid;
font-size: 14px;
line-height: 1.2;
box-shadow: 0 2px 0 rgba(26, 51, 42, .05);
}
.upp-scope-block--variant-d .upp-scope-block__col--included li {
border-color: #2e7d32;
color: #1f5a26;
}
.upp-scope-block--variant-d .upp-scope-block__col--excluded li {
border-color: var(--upp-accent, #C76D35);
color: #8a4419;
}
.upp-scope-block--variant-d .upp-scope-block__icon {
width: 18px;
height: 18px;
flex: none;
}
/* ============================================================
UPP_Price_Factors — why prices vary (educational ticket cards)
============================================================ */
.upp-price-factors {
background: #F2EADA;
padding: clamp(40px, 5vw, 64px) 0;
position: relative;
overflow: hidden;
}
.upp-price-factors::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26, 51, 42, 0.06) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.upp-price-factors .upp-widget__inner {
position: relative;
z-index: 1;
width: min(1080px, calc(100% - 32px));
margin-inline: auto;
}
.upp-price-factors__head {
margin: 0 0 28px;
max-width: 720px;
}
.upp-price-factors__head .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0 0 8px;
font-weight: 700;
}
.upp-price-factors__head h2 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
color: var(--upp-ink, #1A332A);
margin: 0 0 10px;
line-height: 1.1;
}
.upp-price-factors__head .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
}
.upp-price-factors__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.upp-price-factors__card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 18px;
row-gap: 4px;
align-items: start;
background: #ffffff;
border: 1px solid rgba(26, 51, 42, 0.10);
border-left: 4px solid var(--upp-accent, #C76D35);
border-radius: 8px;
padding: 20px 22px;
box-shadow: 0 1px 0 rgba(26, 51, 42, .04), 0 6px 18px rgba(26, 51, 42, .06);
transition: transform .12s ease, box-shadow .12s ease;
}
.upp-price-factors__card:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(26, 51, 42, .04), 0 12px 24px rgba(26, 51, 42, .10);
}
.upp-price-factors__badge {
grid-row: 1 / span 2;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--upp-accent, #C76D35);
color: #fff;
display: inline-grid;
place-items: center;
box-shadow: 0 3px 0 var(--upp-accent-deep, #9c4d1f), 0 0 0 4px rgba(199, 109, 53, .10);
}
.upp-price-factors__badge svg {
width: 22px;
height: 22px;
display: block;
stroke: #fff !important;
}
.upp-price-factors__card h3 {
margin: 4px 0 0;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--upp-ink, #1A332A);
line-height: 1.2;
}
.upp-price-factors__card p {
margin: 0;
color: var(--upp-ink-muted, #5a5a5a);
font-size: 14.5px;
line-height: 1.5;
}
@media (max-width: 720px) {
.upp-price-factors__grid {
grid-template-columns: 1fr;
}
.upp-price-factors__card {
padding: 18px;
}
}
/* The numeric prefix is hidden by default — only variant B uses it. */
.upp-price-factors__num {
display: none;
}
/* ===========================================================
VARIANT B — Numbered editorial
Big serif numerals, no card chrome, hairline dividers between rows.
Reads like a magazine ranked list.
=========================================================== */
.upp-price-factors--variant-b .upp-price-factors__grid {
display: block;
border-top: 1px solid rgba(26, 51, 42, 0.18);
}
.upp-price-factors--variant-b .upp-price-factors__card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
column-gap: 24px;
row-gap: 0;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(26, 51, 42, 0.18);
border-left: 0;
border-radius: 0;
box-shadow: none;
padding: 28px 0;
align-items: baseline;
}
.upp-price-factors--variant-b .upp-price-factors__card:hover {
transform: none;
box-shadow: none;
}
.upp-price-factors--variant-b .upp-price-factors__badge {
display: none;
}
.upp-price-factors--variant-b .upp-price-factors__num {
display: block;
grid-row: 1 / span 2;
font-family: 'Oswald', 'Inter', sans-serif;
font-size: clamp(54px, 6vw, 84px);
font-weight: 800;
line-height: 0.85;
color: var(--upp-accent, #C76D35);
letter-spacing: -2px;
align-self: start;
padding-top: 4px;
}
.upp-price-factors--variant-b .upp-price-factors__card h3 {
margin-top: 0;
font-size: clamp(18px, 1.8vw, 22px);
}
.upp-price-factors--variant-b .upp-price-factors__card p {
font-size: 15.5px;
max-width: 60ch;
}
@media (max-width: 600px) {
.upp-price-factors--variant-b .upp-price-factors__card {
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 14px;
padding: 22px 0;
}
.upp-price-factors--variant-b .upp-price-factors__num {
font-size: 42px;
}
}
/* ===========================================================
VARIANT C — Horizontal stripes
Full-width rows with alternating cream/white backgrounds.
Icon on the left, copy on the right. Reads like a checklist.
=========================================================== */
.upp-price-factors--variant-c .upp-price-factors__grid {
display: block;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(26, 51, 42, .08);
}
.upp-price-factors--variant-c .upp-price-factors__card {
grid-template-columns: 60px minmax(0, 1fr);
column-gap: 22px;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 24px 28px;
background: #ffffff;
}
.upp-price-factors--variant-c .upp-price-factors__card:nth-child(odd) {
background: var(--upp-bg-page, #F7F0DF);
}
.upp-price-factors--variant-c .upp-price-factors__card:hover {
transform: none;
box-shadow: inset 4px 0 0 var(--upp-accent, #C76D35);
}
.upp-price-factors--variant-c .upp-price-factors__badge {
width: 52px;
height: 52px;
box-shadow: 0 2px 0 var(--upp-accent-deep, #9c4d1f);
}
.upp-price-factors--variant-c .upp-price-factors__badge svg {
width: 26px;
height: 26px;
}
@media (max-width: 600px) {
.upp-price-factors--variant-c .upp-price-factors__card {
padding: 20px;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 14px;
}
.upp-price-factors--variant-c .upp-price-factors__badge {
width: 44px;
height: 44px;
}
}
/* ===========================================================
VARIANT D — Icon-forward centered
Bigger badge, centered alignment, no left accent bar.
Reads like a feature grid.
=========================================================== */
.upp-price-factors--variant-d .upp-price-factors__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.upp-price-factors--variant-d .upp-price-factors__card {
grid-template-columns: 1fr;
text-align: center;
border-left: 0;
border-top: 4px solid var(--upp-accent, #C76D35);
padding: 32px 24px 24px;
align-items: center;
justify-items: center;
row-gap: 10px;
}
.upp-price-factors--variant-d .upp-price-factors__badge {
grid-row: auto;
width: 64px;
height: 64px;
margin-bottom: 6px;
box-shadow: 0 4px 0 var(--upp-accent-deep, #9c4d1f), 0 0 0 6px rgba(199, 109, 53, .10);
}
.upp-price-factors--variant-d .upp-price-factors__badge svg {
width: 30px;
height: 30px;
}
.upp-price-factors--variant-d .upp-price-factors__card h3 {
margin-top: 4px;
font-size: clamp(16px, 1.5vw, 19px);
}
.upp-price-factors--variant-d .upp-price-factors__card p {
max-width: 38ch;
}
@media (max-width: 720px) {
.upp-price-factors--variant-d .upp-price-factors__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
UPP_FAQ_Accordion — collapsed-by-default, LLM citation surface
============================================================ */
.upp-faq-accordion {
background: #ffffff;
padding: clamp(40px, 5vw, 64px) 0;
}
.upp-faq-accordion .upp-widget__inner {
width: min(820px, calc(100% - 32px));
margin-inline: auto;
}
.upp-faq-accordion__head {
text-align: center;
margin: 0 auto 28px;
}
.upp-faq-accordion__head .upp-widget-kicker {
font-family: 'Oswald', 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--upp-accent, #C76D35);
margin: 0 0 8px;
font-weight: 700;
}
.upp-faq-accordion__head h2 {
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
color: var(--upp-ink, #1A332A);
margin: 0 0 8px;
line-height: 1.1;
}
.upp-faq-accordion__head .upp-widget-lede {
color: var(--upp-ink-muted, #5a5a5a);
margin: 0;
font-size: 15px;
}
.upp-faq-accordion__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* 2-column variant — matches MMOS FAQ pattern */
.upp-faq-cols-2 .upp-faq-accordion__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
@media (max-width: 720px) {
.upp-faq-cols-2 .upp-faq-accordion__list {
grid-template-columns: 1fr;
}
}
/* Overflow items hidden by default until "Show more" clicked */
.upp-faq-accordion__item[hidden] {
display: none !important;
}
/* Show-more button — matches the same chunky button family
as the rest of the UPP UI */
.upp-faq-show-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 22px auto 0;
padding: 12px 22px;
background: transparent;
color: var(--upp-ink, #1A332A);
border: 2px solid var(--upp-accent, #C76D35);
border-radius: 6px;
font-family: 'Oswald', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 13px;
cursor: pointer;
transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
box-shadow: 3px 3px 0 var(--upp-accent-deep, #9c4d1f);
}
.upp-faq-show-more:hover {
background: var(--upp-accent, #C76D35);
color: #fff;
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 var(--upp-accent-deep, #9c4d1f);
}
.upp-faq-show-more-count {
color: var(--upp-ink-muted, #5a5a5a);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.upp-faq-show-more:hover .upp-faq-show-more-count {
color: rgba(255, 255, 255, 0.85);
}
.upp-faq-show-more-arrow {
transition: transform .18s ease;
font-size: 14px;
line-height: 1;
}
.upp-faq-expanded .upp-faq-show-more-arrow {
transform: rotate(180deg);
}
.upp-faq-show-more[aria-expanded="true"] .upp-faq-show-more-text::after {
content: ' (hide)';
color: var(--upp-ink-muted, #5a5a5a);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
/* Center the button row */
.upp-faq-accordion .upp-widget__inner {
text-align: center;
}
.upp-faq-accordion .upp-faq-accordion__head,
.upp-faq-accordion__list {
text-align: left;
}
.upp-faq-accordion__item details {
background: #F7F0DF;
border: 1px solid rgba(26, 51, 42, 0.10);
border-radius: 8px;
overflow: hidden;
}
.upp-faq-accordion__item details[open] {
background: #ffffff;
border-left: 3px solid var(--upp-accent, #C76D35);
box-shadow: 0 4px 14px rgba(26, 51, 42, .06);
}
.upp-faq-accordion__item summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-weight: 700;
color: var(--upp-ink, #1A332A);
font-size: 16px;
transition: color .12s ease;
}
.upp-faq-accordion__item summary::-webkit-details-marker {
display: none;
}
.upp-faq-accordion__item summary:hover {
color: var(--upp-accent, #C76D35);
}
.upp-faq-accordion__q {
flex: 1 1 auto;
}
.upp-faq-accordion__icon {
width: 22px;
height: 22px;
color: var(--upp-accent, #C76D35);
flex-shrink: 0;
transition: transform .18s ease;
}
.upp-faq-accordion__icon svg {
width: 100%;
height: 100%;
display: block;
}
.upp-faq-accordion__item details[open] .upp-faq-accordion__icon {
transform: rotate(180deg);
}
.upp-faq-accordion__a {
padding: 0 22px 18px;
color: var(--upp-ink-muted, #5a5a5a);
font-size: 15px;
line-height: 1.6;
}
.upp-faq-accordion__a p {
margin: 0 0 10px;
}
.upp-faq-accordion__a p:last-child {
margin-bottom: 0;
}
/* ============================================================
0.8.6 — COMPACT CREDIBILITY + RED-FLAG SECTIONS
Keep the evidence readable without turning the page into a
stack of billboards or a construction-site warning placard.
============================================================ */
.upp-trust-strip--variant-d {
padding: clamp(20px, 3vw, 30px) 0 clamp(24px, 3vw, 34px);
}
.upp-trust-strip--variant-d .upp-trust-strip__eyebrow {
margin-bottom: 16px;
color: var(--upp-ink-muted, #5A5A50);
font-family: Inter, Arial, sans-serif;
font-size: 11px;
line-height: 1.45;
letter-spacing: 2px;
opacity: 1;
}
.upp-trust-strip--variant-d .upp-trust-strip__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
overflow: hidden;
background: #FFFCF5;
border: 1px solid var(--upp-border-strong, #D8CDB6);
border-radius: 12px;
box-shadow: 0 4px 0 rgba(15, 20, 16, .08);
}
.upp-trust-strip--variant-d .upp-trust-strip__item,
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(2),
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(3) {
min-width: 0;
gap: 12px;
padding: 17px 20px;
color: var(--upp-ink, #0F1410);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transition: background-color .15s ease;
}
.upp-trust-strip--variant-d .upp-trust-strip__item:hover,
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(2):hover,
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(3):hover {
transform: none;
background: #F8F0DE;
box-shadow: none;
}
.upp-trust-strip--variant-d .upp-trust-strip__item + .upp-trust-strip__item {
border-left: 1px solid var(--upp-border-strong, #D8CDB6);
}
.upp-trust-strip--variant-d .upp-trust-strip__badge {
width: 40px;
height: 40px;
background: #F4ECD8;
border: 1px solid #DDCFB0;
box-shadow: none;
}
.upp-trust-strip--variant-d .upp-trust-strip__badge svg {
width: 21px;
height: 21px;
stroke: var(--upp-accent, #C94B26) !important;
}
.upp-trust-strip--variant-d .upp-trust-strip__item strong {
color: var(--upp-ink, #0F1410);
font-family: Inter, Arial, sans-serif;
font-size: clamp(17px, 1.9vw, 21px);
line-height: 1.1;
letter-spacing: -.01em;
}
.upp-trust-strip--variant-d .upp-trust-strip__item span {
margin-top: 0;
color: var(--upp-ink-muted, #5A5A50);
font-size: 12.5px;
line-height: 1.35;
}
.upp-how-it-works--variant-d {
padding: clamp(38px, 5vw, 58px) 0;
overflow: hidden;
background: var(--upp-bg-section-cream, #F4ECD8);
}
.upp-how-it-works--variant-d::before {
background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 16, .05) 1px, transparent 0);
opacity: .55;
}
.upp-how-it-works--variant-d::after {
display: none;
}
.upp-how-it-works--variant-d .upp-widget-kicker {
margin-bottom: 14px;
padding: 7px 12px;
color: var(--upp-accent-deep, #A83B1D);
background: #FFFCF5;
border: 1px solid #E3CBB5;
border-radius: 999px;
box-shadow: none;
font-family: Inter, Arial, sans-serif;
font-size: 11px;
line-height: 1;
letter-spacing: 1.8px;
}
.upp-how-it-works--variant-d h2 {
max-width: 780px;
margin-bottom: 10px;
color: var(--upp-ink, #0F1410);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(30px, 4vw, 44px);
line-height: 1.06;
letter-spacing: -.025em;
}
.upp-how-it-works--variant-d .upp-widget-lede {
max-width: 720px;
margin-bottom: 24px;
color: var(--upp-ink-muted, #5A5A50);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.55;
}
.upp-how-it-works--variant-d .upp-widget-lede::first-letter {
text-transform: uppercase;
}
.upp-how-it-works--variant-d .upp-how-it-works__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.upp-how-it-works--variant-d .upp-how-it-works__step,
.upp-how-it-works--variant-d .upp-how-it-works__step:nth-child(even) {
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 13px;
row-gap: 3px;
align-content: center;
min-height: 0;
padding: 16px 17px;
background: #FFFCF5;
border: 1px solid var(--upp-border-strong, #D8CDB6);
border-left: 4px solid var(--upp-accent, #F26619);
border-radius: 10px;
box-shadow: 0 3px 0 rgba(15, 20, 16, .08);
transition: border-color .15s ease, background-color .15s ease;
}
.upp-how-it-works--variant-d .upp-how-it-works__step:hover {
transform: none;
background: #FFFFFF;
border-color: #CDBE9F;
border-left-color: var(--upp-accent-deep, #C2470F);
box-shadow: 0 3px 0 rgba(15, 20, 16, .08);
}
.upp-how-it-works--variant-d .upp-how-it-works__icon,
.upp-how-it-works--variant-d .upp-how-it-works__step:nth-child(even) .upp-how-it-works__icon {
width: 34px;
height: 34px;
color: var(--upp-accent-deep, #C2470F);
background: #FFF0E5;
border: 1px solid #F5CDB5;
border-radius: 50%;
box-shadow: none;
}
.upp-how-it-works--variant-d .upp-how-it-works__icon svg {
width: 18px;
height: 18px;
stroke: currentColor !important;
}
.upp-how-it-works--variant-d .upp-how-it-works__step h3 {
color: var(--upp-ink, #0F1410);
font-family: Inter, Arial, sans-serif;
font-size: 14px;
line-height: 1.25;
letter-spacing: .08em;
}
.upp-how-it-works--variant-d .upp-how-it-works__step p {
color: var(--upp-ink-muted, #5A5A50);
font-size: 13.5px;
line-height: 1.45;
}
@media (max-width: 880px) {
.upp-trust-strip--variant-d .upp-trust-strip__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.upp-how-it-works--variant-d .upp-how-it-works__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.upp-trust-strip--variant-d .upp-trust-strip__grid,
.upp-how-it-works--variant-d .upp-how-it-works__steps {
grid-template-columns: 1fr;
}
.upp-trust-strip--variant-d .upp-trust-strip__item,
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(2),
.upp-trust-strip--variant-d .upp-trust-strip__item:nth-child(3) {
padding: 13px 16px;
}
.upp-trust-strip--variant-d .upp-trust-strip__item + .upp-trust-strip__item {
border-top: 1px solid var(--upp-border-strong, #D8CDB6);
border-left: 0;
}
.upp-how-it-works--variant-d .upp-how-it-works__step,
.upp-how-it-works--variant-d .upp-how-it-works__step:nth-child(even) {
padding: 14px 15px;
}
}