/* U.S. Pave Residential — site styles. Matches the ChatGPT mockups and uspave.com: Oswald + Roboto,
   black 75% header over the hero, square red uppercase buttons, blue headings, light-gray bands, black footer. */
:root {
  --usr-red: #8B0000; --usr-red-h: #A30F0F; --usr-blue: #005CA9; --usr-blue-d: #0B3F7A; --usr-teal: #00B7CD;
  --usr-ink: #1B1F24; --usr-mute: #5B6470; --usr-line: #DDE2E8; --usr-gray: #F4F6F8; --usr-gray2: #EFEFEF; --usr-white: #fff;
  --usr-h: 'Oswald', 'Arial Narrow', Arial, sans-serif; --usr-b: 'Roboto', Arial, Helvetica, sans-serif;
  --usr-w: 1200px;
}
body.usr-body-page { margin: 0; background: var(--usr-white); color: var(--usr-ink); font: 16px/1.6 var(--usr-b); -webkit-font-smoothing: antialiased; }
.usr-body-page *, .usr-body-page *::before, .usr-body-page *::after { box-sizing: border-box; }
.usr-body-page img { max-width: 100%; height: auto; display: block; }
.usr-body-page a { color: var(--usr-blue); }
.usr-wrap { max-width: var(--usr-w); margin: 0 auto; padding: 0 24px; }
.usr-narrow { max-width: 860px; }
.usr-narrow .usr-h2 { margin-bottom: 14px; }
.usr-c { text-align: center; }
.usr-sr, .usr-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.usr-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 1000; }
.usr-skip:focus { left: 8px; }
.usr-ico { flex: none; }

/* Type */
.usr-h1 { font: 500 clamp(36px, 5.2vw, 64px)/1.04 var(--usr-h); color: #fff; margin: 0 0 18px; letter-spacing: -.5px; max-width: 640px; }
.usr-h1-sm { font-size: clamp(28px, 3.6vw, 40px); color: var(--usr-blue-d); text-transform: uppercase; }
.usr-h2 { font: 500 clamp(26px, 3vw, 34px)/1.1 var(--usr-h); color: var(--usr-blue-d); text-transform: uppercase; margin: 0 0 6px; }
.usr-h3 { font: 500 22px/1.15 var(--usr-h); color: var(--usr-blue-d); text-transform: uppercase; margin: 0 0 8px; }
.usr-sub { color: var(--usr-mute); margin: 0 0 26px; }
.usr-body { font-size: 17px; margin: 0 0 16px; }
.usr-small { font-size: 13.5px; color: var(--usr-mute); }
.usr-mt { margin-top: 44px; }
.usr-link { font-weight: 700; text-decoration: none; text-transform: uppercase; font-family: var(--usr-h); letter-spacing: .3px; margin-right: 18px; }
.usr-link:hover { text-decoration: underline; }
.usr-links { margin-top: 10px; }

/* Buttons: same as uspave.com "Get an Estimate" */
.usr-btn { display: inline-block; background: var(--usr-red); color: #fff !important; font: 500 17px/1 var(--usr-h); text-transform: uppercase; letter-spacing: .6px;
  padding: 16px 28px; border: 2px solid var(--usr-red); border-radius: 0; text-decoration: none; cursor: pointer; text-align: center; transition: background .15s; }
.usr-btn:hover { background: var(--usr-red-h); border-color: var(--usr-red-h); }
.usr-btn:focus-visible, .usr-body-page a:focus-visible, .usr-body-page button:focus-visible, .usr-body-page input:focus-visible { outline: 3px solid var(--usr-teal); outline-offset: 2px; }
.usr-btn-sm { padding: 11px 18px; font-size: 15px; }
.usr-btn-block { display: block; width: 100%; }
.usr-btn-ghost { background: transparent; color: var(--usr-red) !important; }
.usr-btn-ghost:hover { background: var(--usr-red); color: #fff !important; }


/* Breadcrumbs */
.usr-crumbs { font-size: 13px; color: var(--usr-mute); padding: 12px 0; background: var(--usr-gray); }
.usr-crumbs a { color: var(--usr-mute); text-decoration: none; }
.usr-crumbs a:hover { text-decoration: underline; }
.usr-crumbs span { margin: 0 4px; }
.usr-crumbs-over { position: absolute; left: 0; right: 0; top: var(--hd-h, 136px); z-index: 40; background: transparent; color: rgba(255,255,255,.8); }
.usr-crumbs-over a { color: rgba(255,255,255,.85); }

/* Hero */
.usr-hero { position: relative; color: #fff; background-color: #111; background-position: center; background-size: cover; background-repeat: no-repeat; padding: calc(var(--hd-h, 136px) + 70px) 0 56px; min-height: 650px; display: flex; align-items: center; }
.usr-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.05) 80%); }
.usr-hero-in { position: relative; width: 100%; }
.usr-hero-p { font-size: 19px; max-width: 560px; margin: 0 0 26px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.usr-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.usr-hero-cta .usr-btn-ghost { color: #fff !important; border-color: #fff; }
.usr-hero-cta .usr-btn-ghost:hover { background: #fff; color: var(--usr-red) !important; }
.usr-hero-alt { color: #fff !important; font-weight: 500; }
.usr-hero-note { margin-top: 18px; font-size: 15px; }
.usr-hero-note a { color: #fff !important; font-weight: 700; }
.usr-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; padding: 0; margin: 30px 0 0; }
.usr-proof li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; max-width: 200px; line-height: 1.25; }
.usr-proof .usr-ico { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--usr-blue); color: #fff; }

/* Address box */
.usr-addr { position: relative; max-width: 620px; }
.usr-addr-row { display: flex; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.usr-addr-row input[type=text] { flex: 1; min-width: 0; border: 0; padding: 0 20px 0 48px; font: 17px var(--usr-b); color: var(--usr-ink); height: 60px; outline: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23005CA9'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E") 16px center no-repeat; }
.usr-addr-row .usr-btn { height: 60px; padding: 0 30px; font-size: 20px; white-space: nowrap; }
.usr-addr-list { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.25); z-index: 30; max-height: 320px; overflow: auto; }
.usr-addr-list button { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--usr-line); background: #fff; padding: 12px 16px; font: 16px var(--usr-b); color: var(--usr-ink); cursor: pointer; }
.usr-addr-list button small { display: block; color: var(--usr-mute); font-size: 13px; }
.usr-addr-list button:hover, .usr-addr-list button.on { background: #EAF3FB; }
.usr-addr-list .usr-addr-msg { padding: 12px 16px; color: var(--usr-mute); font-size: 14px; }

/* Sections */
.usr-sec { padding: 64px 0; }
.usr-gray { background: var(--usr-gray); }

/* How it works + pricing (home) */
.usr-hiw { display: grid; grid-template-columns: 1.75fr 1fr; gap: 40px; align-items: start; }
.usr-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0; margin: 20px 0 0; counter-reset: s; }
.usr-steps li { text-align: center; position: relative; }
.usr-steps li:not(:last-child)::after { content: '→'; position: absolute; right: -16px; top: 34px; color: var(--usr-blue-d); font-size: 22px; }
.usr-step-ico { position: relative; display: inline-flex; width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 2px solid var(--usr-line); align-items: center; justify-content: center; color: var(--usr-blue); margin-bottom: 16px; }
.usr-step-ico .usr-ico { width: 38px; height: 38px; }
.usr-step-n { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--usr-blue); color: #fff; font: 500 15px/28px var(--usr-h); }
.usr-steps p { margin: 0; font-weight: 500; line-height: 1.3; }
.usr-pc { border-left: 1px solid var(--usr-line); padding-left: 36px; }
.usr-price-line { color: var(--usr-blue); font-weight: 500; font-size: 17px; margin: 0 0 16px; }
.usr-price-ex { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; margin: 0 0 12px; }
.usr-price-ex li { background: #fff; border: 1px solid var(--usr-line); text-align: center; padding: 14px 6px; }
.usr-price-ex span { display: block; font-size: 14px; color: var(--usr-mute); }
.usr-price-ex b { display: block; font: 500 32px/1.1 var(--usr-h); color: var(--usr-blue-d); }

/* Pricing with calculator */
.usr-price { display: grid; grid-template-columns: 1.4fr 1fr; background: #fff; border: 1px solid var(--usr-line); }
.usr-price-l { padding: 36px; }
.usr-price-l .usr-h3 { font-size: 30px; }
.usr-price-r { padding: 36px; background: var(--usr-blue-d); color: #fff; }
.usr-price-r label { font: 500 18px var(--usr-h); text-transform: uppercase; letter-spacing: .4px; }
.usr-calc-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.usr-calc-row input { width: 140px; height: 50px; font: 500 22px var(--usr-h); padding: 0 12px; border: 0; }
.usr-calc-out { font: 500 58px/1 var(--usr-h); margin: 8px 0; }
.usr-price-r .usr-small { color: rgba(255,255,255,.8); }

/* Service cards */
.usr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.usr-cards-3 { grid-template-columns: repeat(3, 1fr); }
.usr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--usr-line); text-decoration: none; color: var(--usr-ink) !important; transition: box-shadow .15s, transform .15s; }
.usr-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-2px); }
.usr-card img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.usr-card-b { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.usr-card-t { font: 500 20px/1.1 var(--usr-h); color: var(--usr-blue-d); text-transform: uppercase; margin-bottom: 6px; }
.usr-card-p { font-size: 14px; color: var(--usr-mute); flex: 1; margin-bottom: 14px; }

/* Before / after + reviews */
.usr-bar { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.usr-bar-solo { grid-template-columns: 1fr; }
.usr-bar-l { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.usr-bar-solo .usr-bar-l { grid-template-columns: 260px 1fr; }
.usr-ba-intro p { color: var(--usr-mute); }
.usr-ba { display: grid; grid-template-columns: 1fr; gap: 4px; }
.usr-ba figure { position: relative; margin: 0; }
.usr-ba img { aspect-ratio: 4/1; object-fit: cover; width: 100%; }
.usr-bar-solo .usr-ba { max-width: 760px; }
.usr-ba figcaption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,.72); color: #fff; font: 500 18px/1 var(--usr-h); text-transform: uppercase; padding: 10px 14px; }
.usr-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.usr-review { margin: 0; background: #fff; border: 1px solid var(--usr-line); padding: 16px; font-size: 14px; }
.usr-review p { font-style: italic; margin: 0 0 12px; }
.usr-review cite { font-style: normal; font-weight: 700; }
.usr-review cite small { display: block; font-weight: 400; color: var(--usr-mute); }
.usr-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0; margin: 26px 0 0; }
.usr-badges li { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--usr-blue-d); }

/* Areas + FAQ */
.usr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.usr-cities { list-style: none; columns: 2; padding: 0; margin: 0 0 16px; }
.usr-cities li { display: flex; align-items: center; gap: 8px; padding: 5px 0; break-inside: avoid; }
.usr-cities .usr-ico { width: 18px; height: 18px; color: var(--usr-blue); }
.usr-gray .usr-faq details, .usr-faq details { background: #fff; border: 1px solid var(--usr-line); margin-bottom: 8px; }
.usr-faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; font-weight: 500; color: var(--usr-blue-d); }
.usr-faq summary::-webkit-details-marker { display: none; }
.usr-faq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--usr-blue); }
.usr-faq details[open] summary::after { content: '–'; }
.usr-faq details p { margin: 0; padding: 0 16px 16px; color: var(--usr-ink); }

/* Icon grid, process, checklists, compare */
.usr-icons { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; padding: 0; margin: 10px 0 20px; }
.usr-icons li { text-align: center; font-weight: 500; line-height: 1.35; }
.usr-icon-c { display: flex; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: #EAF3FB; color: var(--usr-blue); align-items: center; justify-content: center; }
.usr-gray .usr-icon-c { background: #fff; }
.usr-icon-c .usr-ico { width: 34px; height: 34px; }
.usr-process { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 0; margin: 10px 0 0; counter-reset: p; }
.usr-process li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--usr-line); padding: 14px 16px; font-weight: 500; }
.usr-process li span { flex: none; width: 34px; height: 34px; background: var(--usr-blue); color: #fff; font: 500 17px/34px var(--usr-h); text-align: center; }
.usr-checks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; padding: 0; margin: 10px 0 0; }
.usr-checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.usr-checks .usr-ico { color: var(--usr-blue); margin-top: 1px; }
.usr-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.usr-compare-c { background: #fff; border: 1px solid var(--usr-line); border-top: 4px solid var(--usr-blue); padding: 22px; }

/* Red CTA band */
.usr-band { background: linear-gradient(100deg, #6E0000, var(--usr-red) 55%, #6E0000); color: #fff; padding: 40px 0; }
.usr-band-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: center; }
.usr-band .usr-h2 { color: #fff; text-transform: none; font-size: clamp(28px, 3.2vw, 38px); }
.usr-band p { margin: 0; font-size: 17px; }
.usr-band .usr-btn { background: #fff; color: var(--usr-red) !important; border-color: #fff; }
.usr-band .usr-btn:hover { background: #F3E6E6; }
.usr-band .usr-btn-ghost { background: transparent; color: #fff !important; }
.usr-band .usr-addr-row .usr-btn { background: var(--usr-red); color: #fff !important; border-color: #fff; }

/* Booking page */
.usr-booking-in { max-width: 560px; }
.usr-booking .usr-h1-sm { text-align: center; font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; }

/* Estimate form */
.usr-est { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.usr-contact { list-style: none; padding: 0; margin: 24px 0 0; }
.usr-contact li { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-weight: 500; }
.usr-contact .usr-ico { color: var(--usr-blue); }
.usr-form { background: #fff; border: 1px solid var(--usr-line); padding: 30px; }
.usr-form p { margin: 0 0 16px; }
.usr-form label, .usr-radios legend { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.usr-form input:not([type=radio]):not([type=file]), .usr-form select, .usr-form textarea { width: 100%; border: 1px solid #BFC7D1; border-radius: 0; padding: 12px; font: 16px var(--usr-b); color: var(--usr-ink); background: #fff; }
.usr-form input:focus, .usr-form select:focus, .usr-form textarea:focus { border-color: var(--usr-blue); outline: 2px solid rgba(0,92,169,.2); }
.usr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.usr-radios { border: 0; padding: 0; margin: 0 0 16px; }
.usr-radios label { display: inline-flex; align-items: center; gap: 6px; margin-right: 20px; font-weight: 400; font-size: 16px; }
.usr-form-err { color: #B00020; font-weight: 500; margin-bottom: 10px; }
.usr-form-ok { text-align: center; padding: 30px 10px; }
.usr-form-ok .usr-ico { width: 64px; height: 64px; color: #1E8E3E; margin: 0 auto 12px; }


h1 sup, h2 sup { font-size: .45em; vertical-align: super; line-height: 0; }

/* Hero promo callout (sealing online) */
.usr-promo { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 16px 10px 10px; background: rgba(255,255,255,.95); color: var(--usr-ink) !important; text-decoration: none; font-weight: 500; max-width: 620px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.usr-promo:hover { background: #fff; }
.usr-promo-tag { flex: none; background: var(--usr-red); color: #fff; font: 500 14px/1 var(--usr-h); text-transform: uppercase; letter-spacing: .6px; padding: 7px 10px; }
.usr-promo-go { color: var(--usr-red); font-size: 20px; font-weight: 700; }
.usr-hero .usr-proof li { max-width: none; }

/* Big sealing feature on the residential home page */
.usr-seal { background: linear-gradient(160deg, #0B3F7A 0%, #062A55 100%); color: #fff; padding: 72px 0 64px; position: relative; overflow: hidden; }
.usr-seal .usr-wrap { position: relative; }
.usr-seal-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.usr-eyebrow { display: inline-block; font: 500 15px/1 var(--usr-h); text-transform: uppercase; letter-spacing: 1.2px; color: #fff; background: var(--usr-red); padding: 8px 12px; margin: 0 0 18px; }
.usr-seal-h { font: 500 clamp(32px, 4.4vw, 54px)/1.05 var(--usr-h); margin: 0 0 16px; text-wrap: balance; }
.usr-seal-p { font-size: 19px; margin: 0 0 26px; max-width: 560px; color: rgba(255,255,255,.92); }
.usr-btn-lg { font-size: 21px; padding: 20px 34px; }
.usr-seal .usr-btn { border-color: var(--usr-red); }
.usr-seal-link { color: #fff !important; font-weight: 500; text-decoration: underline; }
.usr-seal .usr-proof .usr-ico { background: rgba(255,255,255,.14); }
.usr-seal-price { background: #fff; color: var(--usr-ink); padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.usr-seal-price-h { font: 500 28px/1.1 var(--usr-h); text-transform: uppercase; color: var(--usr-blue-d); margin: 0 0 8px; }
.usr-seal-line { color: var(--usr-blue); font-weight: 500; font-size: 17px; margin: 0 0 16px; }
.usr-seal-small { font-size: 13.5px; color: var(--usr-mute); margin: 4px 0 0; }
.usr-seal-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,.15); }
.usr-seal-steps li { display: flex; align-items: center; gap: 12px; background: #0A3A70; padding: 18px; font-weight: 500; line-height: 1.3; }
.usr-seal-steps .usr-ico { width: 30px; height: 30px; color: #8CC8FF; flex: none; }
.usr-seal-n { flex: none; width: 30px; height: 30px; background: #fff; color: var(--usr-blue-d); font: 500 16px/30px var(--usr-h); text-align: center; }

/* Responsive */
@media (max-width: 1260px) {
  .usr-cards { grid-template-columns: repeat(3, 1fr); }
  .usr-hiw { grid-template-columns: 1fr; }
  .usr-pc { border-left: 0; padding-left: 0; }
  .usr-bar { grid-template-columns: 1fr; }
  .usr-cards { grid-template-columns: repeat(3, 1fr); }
  .usr-seal-top { grid-template-columns: 1fr; }
  .usr-seal-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .usr-hero { padding: calc(var(--hd-h, 120px) + 44px) 0 36px; min-height: 0; }
  .usr-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7)); }
  .usr-hero-p { font-size: 17px; }
  .usr-addr-row { flex-direction: column; }
  .usr-addr-row .usr-btn { width: 100%; }
  .usr-addr-row input[type=text] { flex: none; width: 100%; }
  .usr-proof { gap: 12px 20px; }
  .usr-proof li { font-size: 14px; max-width: none; }
  .usr-proof .usr-ico { width: 36px; height: 36px; padding: 7px; }
  .usr-sec { padding: 44px 0; }
  .usr-steps { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .usr-steps li::after { display: none; }
  .usr-cards, .usr-cards-3, .usr-compare { grid-template-columns: 1fr 1fr; }
  .usr-bar-l, .usr-bar-solo .usr-bar-l { grid-template-columns: 1fr; }
  .usr-reviews { grid-template-columns: 1fr; }
  .usr-split, .usr-est, .usr-band-in, .usr-price { grid-template-columns: 1fr; }
  .usr-split { gap: 36px; }
  .usr-checks { grid-template-columns: 1fr; }
  .usr-seal { padding: 48px 0; }
  .usr-seal-p { font-size: 17px; }
  .usr-promo { font-size: 14px; }
  .usr-btn-lg { width: 100%; font-size: 19px; }
  .usr-icons { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .usr-icons li { font-size: 15px; }
  .usr-form { padding: 20px; }
  .usr-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .usr-wrap { padding: 0 16px; }
  .usr-cards, .usr-cards-3, .usr-compare { grid-template-columns: 1fr; }
  .usr-price-ex b { font-size: 26px; }
  .usr-seal-steps { grid-template-columns: 1fr; }
  .usr-btn-sm { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .usr-card, .usr-btn { transition: none; } .usr-card:hover { transform: none; } }


/* ===== Header: same wireframe and sizes as uspave.com (theme "uspave", header.banner) ===== */
.usr-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(0,0,0,.75); font-family: Roboto, sans-serif; }
.admin-bar .usr-hd { top: 32px; }
@media (max-width: 782px) { .admin-bar .usr-hd { top: 46px; } }   /* WordPress's own bar is taller on phones (logged-in only) */
/* The booking page ("See My Price", where the driveway is measured and the outline checked): the header stays at the
   top of the page and scrolls away with it, so it never sits over the measuring screens (Nick, 2026-09-27).
   Every other residential page keeps the fixed header, like uspave.com. */
.usr-page-see-my-price .usr-hd { position: absolute; }
.usr-main-plain { padding-top: var(--hd-h, 136px); }
.usr-top { background-color: rgba(0,0,0,.75); color: #fff; padding: 2px 10px; }
.usr-top > div { max-width: 1920px; margin: 0 auto; display: flex; padding: 0 2em; justify-content: center; }
.usr-top p { margin: 0; font-size: .9rem; line-height: 1.5; padding: 5.6px 0; text-align: center; }
.usr-top i { font-style: normal; }
.usr-top .usr-ico { width: 14px; height: 14px; color: #FFCF00; vertical-align: -2px; margin: 0 4px 0 5px; transform: rotate(0deg); }
.usr-top-phone { color: #FFCF00 !important; text-decoration: underline; }
.usr-socials a { color: #fff !important; margin-left: 8px; }
.usr-socials .usr-ico { color: #fff; width: 15px; height: 15px; margin: 0; }
.usr-bottom { background-color: rgba(0,0,0,.5); padding: 0 1px; }
.usr-bottom > div { padding: 0 2em; display: flex; justify-content: space-between; align-items: center; max-width: 1920px; margin: 0 auto; position: relative; }
.usr-logo { flex: none; }
/* Logo sized by HEIGHT to the commercial logo's height at each width, so the header bar is the same size as on
   uspave.com (the residential logo is proportionally taller: 2.8:1 vs 3.2:1). */
.usr-logo img { display: block; box-sizing: content-box; width: auto; max-width: none; height: 79px; padding: .75em 0; }
.usr-nav { display: flex; flex-wrap: wrap; align-items: center; flex: 1; padding: 8px 16px; }
.usr-nav-a { color: #fff !important; background: none; border: 0; font: 400 16px/24px Roboto, sans-serif; text-transform: uppercase; padding: 8px 24px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.usr-nav-a:hover { color: #FFCF00 !important; }
.usr-nav-m { display: none; }
.usr-dd { position: relative; }
.usr-dd > .usr-nav-a::after { content: ''; display: inline-block; margin-left: 8px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.usr-dd-m { position: absolute; top: 100%; left: 0; min-width: 260px; background: rgba(0,0,0,.9); padding: 8px 0; display: none; z-index: 5; }
.usr-dd:hover .usr-dd-m, .usr-dd.open .usr-dd-m, .usr-dd:focus-within .usr-dd-m { display: block; }
.usr-dd-m a { display: block; color: #fff !important; padding: 4px 24px; text-decoration: none; font: 400 16px/1.6 Roboto, sans-serif; text-transform: uppercase; }
.usr-dd-m a:hover { color: #FFCF00 !important; }
.usr-hd-right { flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
.usr-hd-links { display: flex; }
.usr-hd-links a { color: #fff !important; text-decoration: none; text-transform: uppercase; font: 400 16px/24px Roboto, sans-serif; padding: 8px 16px; }
.usr-hd-links a:hover { color: #FFCF00 !important; }
.usr-hd-btn { display: inline-block; background: #8B0000; color: #fff !important; border: 1px solid transparent; font: 400 16px/24px Roboto, sans-serif; text-transform: uppercase; padding: 16px 28px; text-decoration: none; }
.usr-hd-btn:hover { background: #A30F0F; }
@media (max-width: 1600px) { .usr-logo img { height: 79px; padding: .75em 0 .75em 1.5em; } }
@media (max-width: 1400px) { .usr-bottom > div { padding: 0 .75em 0 0; } .usr-logo img { padding: .75em 0 .75em .75em; } .usr-nav-a { padding-left: 1.125rem; padding-right: 1.125rem; } }
@media (max-width: 1300px) { .usr-logo img { height: 91px; } }
@media (max-width: 1300px) {
  .usr-bottom > div { display: block; padding: 0 .25em; }
  .usr-hd-right { position: absolute; top: 1.2em; right: 1em; }
}
/* Phones and tablets, same as uspave.com (theme "uspave", measured and copied September 27, 2026): below 1200 px the
   contact strip shrinks to a 4 px band plus one line with the phone number, the logo steps down 200 → 175 → 150 → 130
   → 110 px, the menu folds behind a 56 x 40 ☰ that turns into an X, and the red button stays next to it. */
.usr-top-m { display: none; }
.usr-burger { display: none; position: relative; width: 56px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; flex: none; }
.usr-burger span { position: absolute; left: 50%; top: 10px; width: 24px; height: 2px; margin: 0; background: #fff; transform: translateX(-50%); transition: .35s; }
.usr-burger span.m { top: 18px; } .usr-burger span.b { top: 26px; }
.usr-burger[aria-expanded="true"] span.t { transform: translateY(8px) translateX(-50%) rotate(45deg); }
.usr-burger[aria-expanded="true"] span.m { opacity: 0; }
.usr-burger[aria-expanded="true"] span.b { transform: translateY(-8px) translateX(-50%) rotate(-45deg); }
@media (max-width: 1199px) {
  .usr-top p { display: none; }
  .usr-top-m { display: block; background-color: rgba(0,0,0,.75); color: #fff; text-align: center; }
  .usr-top-m p { margin: 0; font-size: 1rem; line-height: 24px; padding: 5px 0; }
  .usr-top-m .usr-ico { width: 14px; height: 14px; color: #FFCF00; vertical-align: -2px; margin: 0 0 0 5px; }
  .usr-top-m .usr-top-phone { color: #FFCF00 !important; padding: 5px; letter-spacing: 1px; text-decoration: none; }
  .usr-bottom > div { display: flex; align-items: center; justify-content: flex-start; padding: 0 .35em 0 0; }
  .usr-bottom > div { min-height: 68px; }
  .usr-logo img { height: 56px; padding: .25em 0 .5em .5em; }
  .usr-hd-right { position: static; margin-left: auto; align-self: center; display: flex; flex-direction: row; align-items: center; }
  .usr-hd-links { display: none; }
  .usr-hd-btn { font-size: 16px; line-height: 1.5; padding: 1em 1.75em; }
  .usr-burger { display: block; margin-left: .5em; align-self: center; }
  /* The menu opens as a list under the header. */
  .usr-nav { display: none; }
  .usr-nav.open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: rgba(0,0,0,.9); padding: .25em 1em 1em; max-height: calc(100vh - 140px); overflow-y: auto; }
  .usr-nav.open .usr-nav-a { text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .usr-nav.open .usr-nav-m { display: block; }
  .usr-nav.open .usr-dd-m { position: static; display: none; background: transparent; padding: 0 0 8px 12px; min-width: 0; }
  .usr-nav.open .usr-dd.open .usr-dd-m { display: block; }
}
@media (max-width: 500px) { .usr-bottom > div { min-height: 67px; } .usr-logo img { height: 51px; padding: .25em 0 .75em .5em; } .usr-hd-btn { font-size: 90%; } }
@media (max-width: 487px) { .usr-bottom > div { min-height: 56px; } .usr-logo img { height: 40px; } .usr-hd-btn { font-size: 85%; } }
@media (max-width: 425px) { .usr-bottom > div { min-height: 50px; } .usr-logo img { height: 34px; } .usr-hd-btn { font-size: 80%; padding: .8em 1.5em; } }
@media (max-width: 375px) { .usr-bottom > div { min-height: 47px; } .usr-logo img { height: 31px; padding: .25em 0 .25em .5em; } .usr-hd-btn { font-size: 70%; } }

/* ===== Footer: same wireframe as uspave.com (section-contact + black copyright bar) ===== */
.usr-fc { display: grid; grid-template-columns: 1fr 1fr; background: #ddd; }
.usr-fc-loc, .usr-fc-form { background-color: #1c1c1c; background-size: cover; background-position: center; color: #fff; }
.usr-fc-form { background-color: #7a0000; }
.usr-fc-loc { padding: 112px 16px; }
.usr-fc-loc > div { max-width: 550px; margin: 0 auto; padding: 0 15px; }
.usr-fc-logo { width: 250px; margin-bottom: 24px; }
.usr-fc-links { list-style: none; padding: 0; margin: 0 0 28px; }
.usr-fc-links a { color: #fff !important; text-decoration: underline; text-transform: uppercase; font: 400 15px/1.6 Roboto, sans-serif; }
.usr-fc-links a:hover { color: #FFCF00 !important; }
.usr-fc-badges { display: flex; flex-direction: column; gap: 14px; }
.usr-fc-badges img { width: 200px; }
.usr-fc-form { padding: 80px 16px 112px; }
.usr-fc-form > div { max-width: 780px; margin: 0 auto; padding: 0 15px; }
.usr-fc-h { font: 500 39px/1.5 Oswald, sans-serif; color: #fff; text-transform: uppercase; margin: 39px 0; padding: 4px 0 4px 20px; border-left: 15px solid #FFCF00; }
.usr-fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 14px; }
.usr-fc-f input, .usr-fc-f select, .usr-fc-f textarea { width: 100%; background: transparent; border: 1px solid #fff; border-radius: 0; color: #fff; font: 500 15px/22.5px Roboto, sans-serif; padding: 8px; }
.usr-fc-f input::placeholder, .usr-fc-f textarea::placeholder { color: #fff; opacity: 1; }
.usr-fc-f select option { color: #000; }
.usr-fc-f label { display: block; color: #fff; font: 500 17px/25.5px Roboto, sans-serif; margin: 10px 0 4px; }
.usr-fc-f label span { color: #FFCF00; }
.usr-fc-f textarea { margin-bottom: 14px; }
.usr-fc-send { width: 100%; background: #EFEFEF; color: #8B0000; border: 0; font: 400 16px/24px Roboto, sans-serif; text-transform: uppercase; padding: 10px; cursor: pointer; }
.usr-fc-send:hover { background: #fff; }
.usr-fc .usr-form-err { color: #FFCF00; }
.usr-fc .usr-form-ok { color: #fff; }
.usr-fc .usr-form-ok .usr-h2 { color: #fff; }
.usr-ft { background: #000; color: #fff; height: 100px; display: flex; align-items: center; justify-content: center; }
.usr-ft p { margin: 0; font: 400 16px/24px Roboto, sans-serif; }
@media (max-width: 991px) { .usr-fc { grid-template-columns: 1fr; } .usr-fc-loc { padding: 64px 16px; } .usr-fc-form { padding: 32px 16px 64px; } }
@media (max-width: 520px) { .usr-fc-grid { grid-template-columns: 1fr; } }

/* ===== "Your Home, Our Reputation" tagline (residential home hero) ===== */
.usr-hero-in { position: relative; }
.usr-tagline { position: absolute; right: 24px; bottom: -20px; margin: 0; color: #fff; font: 400 clamp(30px, 3.2vw, 46px)/1.05 'Kaushan Script', 'Brush Script MT', cursive; text-shadow: 0 2px 10px rgba(0,0,0,.55); transform: rotate(-6deg); text-align: left; }
.usr-tagline span { display: block; }
.usr-tagline span + span { padding-left: 1.2em; position: relative; }
.usr-tagline span + span::after { content: ''; position: absolute; left: 1.4em; right: -.2em; bottom: -.18em; height: 4px; border-radius: 4px; background: var(--usr-blue); transform: rotate(-2deg); }
@media (max-width: 1000px) { .usr-tagline { position: static; margin: 28px 0 0 auto; width: max-content; } }

/* ===== TreadCoat™ zones =====
   TreadCoat is U.S. Pave's own sealer brand with its own look (charcoal, white condensed type, bright green accent, blue rule).
   It appears as a distinct "ingredient" panel inside the residential site, always smaller than the U.S. Pave Residential logo in the header.
   --tc-green: placeholder bright green; match to TreadCoat's official hex when the brand file arrives. */
:root { --tc-charcoal: #1D1F21; --tc-charcoal-2: #2A2D30; --tc-green: #8DC63F; --tc-blue: #005CA9; }
.tc-logo { display: block; height: auto; max-width: 100%; }
.tc-logo-text { font: 600 30px/1 Oswald, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.tc-innov { margin: 10px 0 0; font: 400 13px/1.3 Roboto, sans-serif; letter-spacing: .4px; color: rgba(255,255,255,.72); }
.tc-innov sup, .tc-band sup, .tc-feature sup { font-size: .7em; vertical-align: super; line-height: 0; }
.tc-lead { font: 500 clamp(20px, 2.2vw, 26px)/1.15 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: #fff; margin: 0 0 8px; }
.tc-btn { display: inline-block; background: var(--tc-green); color: #111 !important; font: 500 16px/1 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .6px; padding: 15px 22px; text-decoration: none; white-space: nowrap; }
.tc-btn:hover { background: #A5DB5A; }
.tc-inner { color: #fff !important; font-weight: 500; text-decoration: underline; }
.tc-inner:hover { color: var(--tc-green) !important; }
span.tc-inner { text-decoration: none; opacity: .8; }

/* Home: slim band right under the online-sealing section */
.tc-band { background: var(--tc-charcoal); color: rgba(255,255,255,.88); border-bottom: 4px solid var(--tc-blue); position: relative; }
.tc-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc-green); }
.tc-band-in { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; padding-block: 34px; }
.tc-band-logo .tc-logo { width: 260px; }
.tc-band-copy p { margin: 0; }
.tc-band-copy p + p { font-size: 16px; max-width: 560px; }
.tc-band-act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Sealcoating page: "Why TreadCoat" panel */
.tc-feature { background: var(--tc-charcoal) radial-gradient(ellipse at top right, var(--tc-charcoal-2), var(--tc-charcoal) 60%); color: #fff; padding: 64px 0 56px; border-bottom: 4px solid var(--tc-blue); }
.tc-feature-head { display: grid; justify-items: center; text-align: center; gap: 10px; margin-bottom: 30px; }
.tc-feature-head .tc-logo { width: 300px; margin-bottom: 8px; }
.tc-h2 { font: 500 clamp(26px, 3vw, 34px)/1.1 Oswald, sans-serif; text-transform: uppercase; color: #fff; margin: 0; }
.tc-h2 sup { font-size: .5em; }
.tc-sub { margin: 0; color: rgba(255,255,255,.82); }
.tc-points { list-style: none; padding: 0; margin: 0 auto 30px; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tc-points li { display: grid; justify-items: center; text-align: center; gap: 10px; font-weight: 500; line-height: 1.35; }
.tc-ico { display: flex; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--tc-green); color: var(--tc-green); align-items: center; justify-content: center; }
.tc-ico .usr-ico { width: 30px; height: 30px; }
.tc-feature-act { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.tc-feature .tc-innov { text-align: center; margin-top: 18px; }

/* TreadCoat page hero */
.tc-hero { position: relative; background-color: var(--tc-charcoal); background-size: cover; background-position: center; color: #fff; padding: calc(var(--hd-h, 136px) + 70px) 0 64px; border-bottom: 4px solid var(--tc-blue); }
.tc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,21,23,.94) 0%, rgba(20,21,23,.82) 55%, rgba(20,21,23,.6) 100%); }
.tc-hero-in { position: relative; }
.tc-logo-xl { width: 440px; margin-bottom: 26px; }
.tc-h1 { color: #fff; }
.tc-h1 sup { font-size: .45em; vertical-align: super; line-height: 0; }
.tc-hero .tc-lead { border-left: 5px solid var(--tc-green); padding-left: 14px; margin: 6px 0 14px; }
.usr-btn-ghost.tc-out { color: #fff !important; border-color: #fff; }
.usr-btn-ghost.tc-out:hover { background: #fff; color: var(--tc-charcoal) !important; }
.usr-sec .usr-btn-ghost.tc-out { color: var(--usr-red) !important; border-color: var(--usr-red); }
.usr-sec .usr-btn-ghost.tc-out:hover { background: var(--usr-red); color: #fff !important; }

/* Footer badge */
.tc-foot { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; color: rgba(255,255,255,.8) !important; font: 400 13px/1.3 Roboto, sans-serif; }
.tc-foot .tc-logo { width: 200px; }
.tc-foot .tc-logo-text { font-size: 22px; }
.tc-foot:hover span { color: var(--tc-green); }

@media (max-width: 1000px) {
  .tc-band-in { grid-template-columns: 1fr; gap: 18px; }
  .tc-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .tc-logo-xl { width: 280px; }
  .tc-feature-head .tc-logo, .tc-band-logo .tc-logo { width: 230px; }
}

/* Text + photo section (e.g. "Squeegeed by hand. Never sprayed.") */
.usr-textimg { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.usr-textimg .usr-h2 { margin-bottom: 14px; }
.usr-textimg-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
@media (max-width: 900px) { .usr-textimg { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- v0.6: locations, ZIP check, waitlist, franchise, links back to uspave.com commercial ---------- */
.usr-zip { max-width: 560px; }
.usr-zip-row { display: flex; gap: 0; }
.usr-zip-row input { flex: 1; min-width: 0; border: 1px solid #BFC7D1; border-right: 0; border-radius: 0; padding: 14px 16px; font: 17px var(--usr-b); color: var(--usr-ink); background: #fff; }
.usr-zip-row .usr-btn { white-space: nowrap; }
.usr-zip-res { margin-top: 12px; font-size: 16px; min-height: 1em; }
.usr-zip-res:empty { margin: 0; }
.usr-zip-yes, .usr-zip-no { padding: 12px 14px; background: #fff; color: var(--usr-ink); border-left: 5px solid #1E8E3E; }
.usr-zip-no { border-left-color: #B7791F; }
.usr-zip-res a { font-weight: 700; }
.usr-hero .usr-zip-res a { color: var(--usr-blue); }
.usr-regions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; margin-top: 8px; }
.usr-region { background: #fff; border: 1px solid var(--usr-line); border-top: 4px solid var(--usr-blue); padding: 22px 22px 8px; }
.usr-region-note { margin: 0 0 12px; color: var(--usr-mute); font-weight: 500; }
.usr-region .usr-cities { columns: 1; }
.usr-region:first-child .usr-cities { columns: 2; }
.usr-regions-solo { display: block; }
.usr-regions-solo .usr-region { border: 0; padding: 0; background: none; }
.usr-regions-solo .usr-cities, .usr-regions-solo .usr-region:first-child .usr-cities { columns: 3; }
.usr-regions-more { margin-top: 40px; align-items: start; }
.usr-zip-box { background: #fff; border: 1px solid var(--usr-line); padding: 24px; }
.usr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px !important; font-weight: 400 !important; color: #3B4756; margin: 0 0 16px !important; }
.usr-check input { width: 18px !important; height: 18px; flex: none; margin-top: 2px; }
.usr-comm { background: var(--usr-blue); color: #fff; padding: 44px 0; }
.usr-comm .usr-h2 { color: #fff; text-transform: none; font-size: clamp(26px, 3vw, 36px); }
.usr-comm p { margin: 0; font-size: 17px; }
.usr-comm .usr-eyebrow { background: #fff; color: var(--usr-blue); }
.usr-comm .usr-band-act { text-align: right; }
.usr-btn-white { background: #fff !important; color: var(--usr-blue) !important; border-color: #fff !important; }
.usr-btn-white:hover { background: #E6EEF7 !important; }
.usr-band-comm { margin-top: 14px !important; font-size: 15px !important; opacity: .95; }
.usr-band-comm a { color: #fff !important; font-weight: 700; text-decoration: underline; }
.usr-fr-teaser { background: var(--usr-gray); border-top: 1px solid var(--usr-line); }
.usr-fr-teaser .usr-band-act { text-align: right; }
.usr-fr-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%); }
.usr-fr-lead { font: 500 clamp(22px, 2.4vw, 28px)/1.2 var(--usr-h); color: #FFCF00; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.usr-eyebrow-light { background: #fff; color: var(--usr-red); }
.usr-disclaimer { padding: 28px 0 40px; background: #fff; border-top: 1px solid var(--usr-line); }
.usr-disclaimer p { font-size: 13px; color: var(--usr-mute); margin: 0; }
.usr-top-comm a { color: #FFCF00 !important; text-decoration: none; font-weight: 500; }
.usr-top-comm a:hover { text-decoration: underline; }
.usr-fc-comm { margin: 18px 0 0; }
.usr-fc-comm-btn { display: inline-block; border: 2px solid #fff; color: #fff !important; padding: 10px 16px; font: 500 15px/1 var(--usr-h); text-transform: uppercase; letter-spacing: .6px; text-decoration: none !important; }
.usr-fc-comm-btn:hover { background: #fff; color: #111 !important; }
@media (max-width: 1000px) {
  .usr-regions { grid-template-columns: 1fr 1fr; }
  .usr-region:first-child { grid-column: 1 / -1; }
  .usr-region:first-child .usr-cities { columns: 3; }
}
@media (max-width: 820px) {
  .usr-regions { grid-template-columns: 1fr; }
  .usr-region:first-child .usr-cities, .usr-regions-solo .usr-cities, .usr-regions-solo .usr-region:first-child .usr-cities { columns: 2; }
  .usr-comm .usr-band-act, .usr-fr-teaser .usr-band-act { text-align: left; }
  .usr-zip-row { flex-direction: column; }
  .usr-zip-row input { border-right: 1px solid #BFC7D1; }
}
@media (max-width: 700px) { .usr-top p > span.usr-top-comm { display: none; } }

/* Pave It Forward™ band (v0.9.4): asphalt photo, white type, blue stat cards */
.usr-pif { position: relative; background: #1B1E22 center/cover no-repeat; color: #fff; padding: 64px 0; }
.usr-pif::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.72) 60%, rgba(0,20,50,.6) 100%); }
.usr-pif-in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.usr-pif .usr-h2 { color: #fff; }
.usr-pif .usr-eyebrow-light { background: #fff; color: var(--usr-blue); }
.usr-pif-text { font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 60ch; }
.usr-pif-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.usr-pif-stats li { background: var(--usr-blue); color: #fff; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; border-left: 5px solid #fff; }
.usr-pif-stats b { font: 500 34px/1 var(--usr-h); }
.usr-pif-stats span { font-size: 15px; }
.usr-fc-pif { margin-top: 8px !important; }
@media (max-width: 860px) { .usr-pif-in { grid-template-columns: 1fr; } .usr-pif-stats b { font-size: 28px; } }

/* Footer without the form (Hillary, Sept 2026): two ways in and the phone */
.usr-fc-cta p { color: #fff; font-size: 18px; line-height: 1.5; margin: 0 0 22px; }
.usr-fc-btn { display: block; text-align: center; background: transparent; color: #fff !important; border: 2px solid #fff; font: 500 18px/1 var(--usr-h); text-transform: uppercase; letter-spacing: .6px; padding: 16px 20px; margin: 0 0 12px; text-decoration: none !important; }
.usr-fc-btn:hover { background: #fff; color: #7a0000 !important; }
.usr-fc-btn-w { background: #fff; color: #7a0000 !important; }
.usr-fc-btn-w:hover { background: #EFEFEF; }
.usr-fc-call { margin-top: 20px !important; font-size: 17px !important; }
.usr-fc-call a { color: #FFCF00 !important; font-weight: 700; text-decoration: underline; }
.usr-fc-call svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; fill: #FFCF00; }

/* Pave It Forward™ page */
.usr-pif-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.6) 60%, rgba(0,20,50,.5) 100%); }
.usr-pif-hero-stats { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.usr-pif-hero-stats li { background: rgba(0,92,169,.92); color: #fff; padding: 12px 18px; border-left: 4px solid #fff; min-width: 150px; }
.usr-pif-hero-stats b { display: block; font: 500 30px/1 var(--usr-h); }
.usr-pif-hero-stats span { font-size: 14px; }
.usr-pif-act .usr-btn { margin-right: 10px; margin-bottom: 10px; }
.usr-pif .usr-btn-ghost.tc-out { color: #fff !important; border-color: #fff; }
.usr-pif .usr-btn-ghost.tc-out:hover { background: #fff; color: var(--usr-blue) !important; }

/* Pave It Forward™ menu item in the handwritten brand font (Nick, 2026-09-27: "a distinctively different character font") */
/* Same as the commercial site's menu item (Nick, 2026-09-27: "make it look just like the one on the commercial"): 20px/30px, plain ™ */
.usr-nav-a.usr-nav-pif { font: 400 20px/30px 'Kaushan Script', 'Brush Script MT', cursive; text-transform: none; letter-spacing: 0; color: #fff !important; padding: 3px 24px 5px; }
.usr-nav-a.usr-nav-pif:hover { color: #FFCF00 !important; }

/* Pave It Forward™ hero: text left, the program logo on a white "sign" right */
.usr-pif-hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.usr-pif-logo { background: #fff; padding: 22px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.5); transform: rotate(-2deg); border: 6px solid #fff; outline: 2px solid rgba(0,0,0,.25); }
.usr-pif-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .usr-pif-hero-in { grid-template-columns: 1fr; gap: 28px; } .usr-pif-logo { max-width: 420px; transform: none; } }

/* Never underlined, whatever the theme adds (Nick, 2026-09-27) */
.usr-hd a, .usr-nav-a, .usr-btn, .usr-hd-btn, .usr-fc-btn, .usr-fc-links a, .usr-fc-comm-btn { text-decoration: none !important; }
.usr-grating { color: var(--usr-blue-d, #0B3F7A); font-weight: 700; margin: -6px 0 6px; }
.usr-grating a { color: inherit; }