/* ============================================================================= WAUWATOSA — Custom Styles All custom CSS for the Wauwatosa theme lives here. Uses CSS variables defined in /style.css (theme root). ============================================================================= */

/* ============================================================================= GLOBAL RESET / BASE ============================================================================= */

.popular-services__list {list-style: none;margin: 0;padding: 0;}

/* ============================================================================= ACCESSIBILITY ============================================================================= */

.screen-reader-text {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

/* ============================================================================= SECTION 1 — HERO BANNER ============================================================================= */

.hero-banner {position: relative;min-height: 120vh;background-color: var(--color-dark-blue);background-size: cover;background-position: center center;background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top: -200px;height: 100%;}
.hero-banner__overlay {position: absolute;inset: 0;background: var(--color-dark-blue);opacity: 0.5;z-index: 1;pointer-events: none;}
.hero-banner__content {position: relative;z-index: 2;text-align: center;padding: 0 var(--container-padding);width: 100%;max-width: max-content;margin: 0 auto;top: 100px;}
.hero-banner__heading {font-family: var(--font-family-yrt);font-size: var(--h1-size);font-weight: var(--fw-regular);color: var(--color-light-green);line-height: 1;letter-spacing: 2px;text-transform: uppercase;text-shadow: 0 4px 4px rgba(22, 24, 29, 0.3);/* margin: 0 0 0.35em; */}
.hero-banner__subheading {font-family: var(--font-family-tiktok);font-size: var(--h2-size);font-weight: var(--fw-semibold);color: var(--color-off-white);line-height: var(--heading-line-height);margin: 0;text-shadow: 0 4px 4px rgba(22, 24, 29, 0.25);}
@keyframes heroSearchSettle {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSearchFallback {
	to { opacity: 1; visibility: visible; }
}
.hero-banner__search-form {width: 100%;max-width: 520px;margin: 0 auto;position: absolute;left: 0;right: 0;z-index: 4;opacity: 0;visibility: hidden;}
.hero-banner__search-form.is-ready {opacity: 1;visibility: visible;animation: heroSearchSettle 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;}
.hero-banner__search-form.is-animating {transition: top 0.35s cubic-bezier(0.25, 1, 0.5, 1);}
.hero-banner__search-form:not(.is-ready) {top: 55%;animation: heroSearchFallback 0.3s ease 0.4s forwards;}
@media (prefers-reduced-motion: reduce) {.hero-banner__search-form, .hero-banner__search-form.is-ready, .hero-banner__search-form.is-animating {animation: none !important;transition: none !important;}}
.hero-banner__search-wrap {display: flex;align-items: center;background: var(--color-off-white);border-radius: 50px;padding: 0.5rem 0.5rem 0.5rem 1.5rem;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);border: solid 3px var(--color-dark-blue);}
input#hero-search::placeholder {color: var(--color-dark-blue);}
input[type="search"].hero-banner__search-input {flex: 1;border: none !important;outline: none !important;background: transparent;font-family: var(--font-family-tiktok);font-size: var(--body-base);font-weight: var(--fw-semibold);letter-spacing: 2.4px;color: var(--color-dark-blue);text-transform: uppercase;padding: 0.4rem 0;min-width: 0;box-shadow: none !important;}
button.hero-banner__search-btn {flex-shrink: 0;background: transparent !important;border: none;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background 0.2s ease, color 0.2s ease;padding: 0 10px;}
button.hero-banner__search-btn:hover, button.hero-banner__search-btn:focus-visible {/* background: var(--color-light-green); color: var(--color-dark-blue); */outline: none;}

/* ============================================================================= SECTION 1b — HERO BANNER SLIDER (Swiper) ============================================================================= */

.hero-banner--slider {background-image: none !important;padding: 0;}
.hero-banner__swiper {position: absolute;inset: 0;width: 100%;height: 100%;}
.hero-banner__slide {position: relative;width: 100%;height: 100%;background-color: var(--color-dark-blue);background-size: cover;background-position: center center;background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;}
.hero-banner__slide .hero-banner__overlay {position: absolute;inset: 0;background: var(--color-dark-blue);opacity: 0.5;z-index: 1;pointer-events: none;}
.hero-banner__slide .hero-banner__content {position: relative;z-index: 2;}

/* ---- Video slide ---- */
.hero-banner__video-wrap {position: absolute;inset: 0;width: 100%;height: 100%;overflow: hidden;z-index: 0;pointer-events: none !important;}
.hero-banner__video, video.hero-banner__video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;border: 0 !important;outline: none;pointer-events: none !important;display: block;}
.hero-banner__video::-webkit-media-controls, .hero-banner__video::-webkit-media-controls-panel, .hero-banner__video::-webkit-media-controls-enclosure, .hero-banner__video::-webkit-media-controls-overlay-play-button, .hero-banner__video::-webkit-media-controls-start-playback-button {display: none !important;opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;-webkit-appearance: none !important;}
.hero-banner__video-wrap iframe {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1.3);transform-origin: center center;width: 100vw;height: 56.25vw;min-width: 177.78vh;min-height: 100%;border: 0 !important;outline: none;pointer-events: none !important;border-radius: 0 !important;display: block;background: var(--color-dark-blue);}
.hero-banner__swiper .video-wrapper, .hero-banner__video-wrap .video-wrapper {position: absolute !important;inset: 0 !important;width: 100% !important;height: 100% !important;aspect-ratio: unset !important;border: none !important;pointer-events: none !important;overflow: hidden !important;}

/* ---- Pagination dots ---- */
.hero-banner__pagination.swiper-pagination {position: absolute;bottom: 32px;left: 0;right: 0;width: 100%;margin: 0 auto;z-index: 10;display: flex;align-items: center;justify-content: center;gap: 10px;transform: none;pointer-events: none;}
.hero-banner__pagination .swiper-pagination-bullet {width: 10px;height: 10px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);opacity: 1;transition: background 0.3s ease, transform 0.3s ease;cursor: pointer;pointer-events: auto;margin: 0 !important;}
.hero-banner__pagination .swiper-pagination-bullet-active {background: var(--color-light-green);transform: scale(1.35);}

/* ---- Prev / Next arrows ---- */
.hero-banner__nav {position: absolute;top: 55%;transform: translateY(-50%);z-index: 10;display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;background: var(--color-tan);border: 2px solid var(--color-tan);border-radius: 50%;color: var(--color-dark-blue);cursor: pointer;transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;}
.hero-banner__nav--prev {left: 28px;}
.hero-banner__nav--next {right: 28px;}
.hero-banner__nav:hover, .hero-banner__nav:focus-visible {background: var(--color-dark-blue);border-color: var(--color-dark-blue);color: var(--color-off-white);outline: none;}
.hero-banner__nav.swiper-button-disabled {opacity: 0.3;cursor: default;pointer-events: none;}

/* Hide arrows on small screens */
@media (max-width: 768px) {
   .hero-banner__nav {width: 38px;height: 38px;}
   .hero-banner__nav--prev {left: 12px;}
   .hero-banner__nav--next {right: 12px;}
   .hero-banner__pagination.swiper-pagination {bottom: 18px;}
}
@media (max-width: 480px) {
   .hero-banner__nav {display: none;}
   .hero-banner__pagination.swiper-pagination {bottom: 18px;}
}

/* ============================================================================= SECTION 2 — POPULAR SERVICES ============================================================================= */

.popular-services {background-image: url("/wp-content/uploads/2026/07/Wauwatosa_Brand_Texture_1920x1080_Blue-1.webp");background-repeat: no-repeat;background-size: cover;position: relative;overflow: visible;padding: 50px 0 80px;}

/* 8-point star SVG pattern overlay */
.popular-services::after {content: "";position: absolute;top: -100px;right: 0px;bottom: -165px;left: 0;background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_4-1.webp");z-index: 1;/* was: 2 — keep it behind the cards, not on top */pointer-events: none;background-repeat: no-repeat;background-position: right;background-size: contain;}
.popular-services__inner {position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 2fr;align-items: center;gap: 60px;margin: 0 auto;}
.popular-services__label-wrap {display: flex;align-items: center;gap: 17px;margin-bottom: 35px;}
.popular-services__label {font-family: var(--font-family-tiktok);font-size: var(--h4-size);font-weight: var(--fw-bold);color: var(--color-off-white);line-height: normal;}
.popular-services__label.blue {color: var(--color-dark-blue);}
.popular-services__heading {font-family: var(--font-family-yrt);font-size: var(--h3-size);font-weight: var(--fw-regular);color: var(--color-light-green);text-transform: uppercase;margin-bottom: 25px;}
.popular-services__description {font-family: var(--font-family-tiktok);font-size: var(--p-size);font-weight: var(--fw-regular);color: var(--color-white);line-height: var(--body-line-height);margin-bottom: 2rem;}
.popular-services__description p {margin: 0 0 1em;line-height: 30px;}
.popular-services__description p:last-child {margin-bottom: 0;}
.popular-services__cta {display: inline-flex;align-items: center;gap: 6px;font-family: var(--font-family-tiktok);font-size: var(--body-base);font-weight: var(--fw-semibold);color: var(--color-white);text-decoration: none;border: 1.5px solid rgba(255, 255, 255, 0.6);padding: 0.65rem 1.5rem;border-radius: 4px;letter-spacing: 0.06em;text-transform: uppercase;transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.popular-services__cta:hover, .popular-services__cta:focus-visible {background: var(--color-light-green);border-color: var(--color-light-green);color: var(--color-dark-blue);outline: none;}

/* Right column — Service grid */
.popular-services__grid {flex: 1;min-width: 0;padding-bottom: 78px;}
.popular-services__list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;}
.popular-services__link {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: 20px;background: rgba(28, 56, 102, 0.2);border: 3px solid var(--color-light-green);border-radius: 12px;text-decoration: none;height: 156px;overflow: hidden;/* clips the scaled text at the rounded edge */transition: background 0.25s ease, border-color 0.25s ease;padding: 20px 50px;backdrop-filter: blur(4px);}
.popular-services__link:hover, .popular-services__link:focus-visible {background: rgba(172, 194, 55, 0.33);border-color: var(--color-light-green);z-index: 2;/* pulls it above adjacent cards while growing */outline: none;}
.popular-services__icon {width: 48px;height: 48px;object-fit: contain;}
.popular-services__link-text {font-family: var(--font-family-yrt);font-size: var(--size-48);font-weight: var(--fw-regular);color: var(--color-off-white);text-transform: uppercase;letter-spacing: 1.8px;line-height: 1;display: inline-block;/* required for transform to apply */transition: transform 0.25s ease, color 0.25s ease;}
.popular-services__link:hover .popular-services__link-text {transform: scale(1.15);}
.popular-services__item:nth-child(2n) {transform: translateY(78px);}

/* ============================================================================= SECTION 3 — FEATURED NEWS ============================================================================= */

.featured-news {position: relative;overflow: hidden;padding-top: 145px;}
.featured-news__controls.mobile {display: none;}

/* Section header row */
.featured-news__header {position: relative;z-index: 1;padding: 60px var(--container-padding) 36px;}
.featured-news__header-inner .popular-services__label-wrap {margin-bottom: 0px;}
.featured-news__header-inner {display: flex;align-items: center;justify-content: space-between;gap: 24px;margin: 0 auto;margin-bottom: 56px;}
.featured-news__label-wrap {display: flex;align-items: center;gap: 10px;}
.featured-news__star {color: var(--color-dark-blue);font-size: 20px;line-height: 1;}
.featured-news__pipe {color: var(--color-dark-blue);font-size: var(--body-large);font-weight: var(--fw-regular);}
.featured-news__label {font-family: var(--font-family-tiktok);font-size: var(--h4-size);font-weight: var(--fw-bold);color: var(--color-dark-blue);margin: 0;line-height: var(--heading-line-height);}
.featured-news__controls {display: flex;align-items: center;gap: 60px;flex-shrink: 0;}

/* Nav arrow buttons */
/* .featured-news__nav { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1.5px solid var(--color-dark-blue); border-radius: 4px; color: var(--color-dark-blue); cursor: pointer; padding: 0; } .featured-news__nav:focus-visible { outline: 3px solid var(--color-light-green); outline-offset: 2px; } .featured-news__nav.swiper-button-disabled { opacity: 0.35; cursor: default; } */

/* Swiper carousel */
.featured-news__carousel {position: relative;z-index: 1;width: 100%;height: 100%;}

/* Grid: large card (left) + side cards (right) */
.featured-news__grid {display: grid;grid-template-columns: 0.94fr 1fr;gap: 30px;/* max-width: 1400px; margin: 0 auto; min-height: 480px; */}
.featured-news__card-link {display: flex;flex-direction: column;height: 100%;text-decoration: none;color: inherit;}
.featured-news__card-link a {text-decoration: none;}
/* .featured-news__media { position: relative; overflow: hidden; background-color: var(--color-tan); } */
.featured-news__card--large .featured-news__img {border-radius: 12px 12px 0px 0px;}
.featured-news__img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px 0px 0px 12px;}
.featured-news__card--small .featured-news__img {aspect-ratio: 4 / 2.5;}
.featured-news__media--empty {display: block;width: 100%;height: 100%;background-color: var(--color-tan);}

/* Card text body (brown) */
.featured-news__body {background-color: var(--color-brown);}
.featured-news__title {font-family: var(--font-family-tiktok);font-weight: var(--fw-bold);color: var(--color-off-white);line-height: normal;margin: 0 0 0.5rem;font-size: var(--h6-size);display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.featured-news__excerpt {font-family: var(--font-family-tiktok);color: var(--color-off-white);line-height: var(--body-line-height);margin: 0 0 1rem;display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

/* Large card */
.featured-news__card--large .featured-news__body {padding: 37px 42px;border-radius: 0px 0px 12px 12px;height: 100%;}
.featured-news__body .tosa-link-format.white {font-size: 14px;font-weight: 500;text-wrap: nowrap;}
.tosa-border-left {display: flex;flex-direction: column;justify-content: space-between;border-left: solid 3px var(--color-light-green);padding-left: 18px;gap: 10px;}
.featured-news__card--large .tosa-border-left {display: grid;grid-template-columns: 1fr 0.3fr;align-items: end;}

/* Side column of small cards */
.featured-news__side {display: grid;flex-direction: column;gap: 30px;height: 100%;grid-template-rows: 1fr 1fr 1fr;}
.featured-news__card--small {flex: 1;min-height: 0;}
.featured-news__card--small .featured-news__card-link {flex-direction: row;max-height: 100%;}
.featured-news__card--small .featured-news__media {flex: 0 0 55%;max-width: 55%;}
.featured-news__card--small .featured-news__body {flex: 1;padding: 20px 20px 20px 30px;display: flex;border-radius: 0px 12px 12px 0px;height: auto;}
.featured-news__excerpt {font-size: var(--body-base);color: var(--color-off-white);margin-bottom: 0;}

/* ============================================================================= SECTION — WAUWATOSA EVENTS ============================================================================= */

.tosa-events:before {content: "";position: absolute;top: -200px;left: 0;width: 100%;height: 550px;background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_5-1.svg");background-repeat: no-repeat;background-position: top left;background-size: contain;pointer-events: none;z-index: -1;}
.tosa-events__card {border-radius: 12px;border: 3px solid var(--Light-Green, #acc237);background: rgba(28, 56, 102, 0.8);position: relative;top: 80px;z-index: 2;/* left: 30px; */padding: 45px 65px;margin-bottom: 130px;margin-right: -100px;backdrop-filter: blur(3px);}
.event-slider-bottom {margin-top: 79px;}
.tosa-events__date {padding: 14px 18px;background-color: var(--color-tan);border-radius: 12px 0px 0px 12px;font-weight: var(--fw-bold);display: flex;gap: 0;flex-direction: column;justify-content: center;}
.tosa-events__details {padding: 22px 21px;background: var(--color-off-white);border-radius: 0px 12px 12px 0px;}
.event-days, .event-time {font-size: var(--body-base);font-weight: var(--fw-semibold);line-height: 25px;}
/* .tosa-events__title, .tosa-events__star { font-family: var(--font-family-tiktok); font-weight: var(--fw-bold); } */
.tosa-events__swiper {max-height: 600px;}
.tosa-events__item {background-color: var(--color-off-white);color: var(--color-dark-blue) !important;border-radius: 12px;}
.tosa-events__nav-btn {display: flex;align-items: center;justify-content: center;background: transparent;border: 2px solid var(--color-tan);border-radius: 4px;color: var(--color-off-white);padding: 10px 5px;cursor: pointer;}
.featured-news__nav:focus-visible {outline: 3px solid var(--color-light-green);outline-offset: 2px;}
.featured-news__nav.swiper-button-disabled {opacity: 0.35;cursor: default;}
.tosa-events__nav-btn:hover, .tosa-events__nav-btn:focus-visible {outline: none;border: 2px solid var(--color-tan);}
.tosa-events__nav-btn.swiper-button-disabled {opacity: 0.35;cursor: default;}
.tosa-events__img {object-fit: cover;/* max-height: 420px; */border-radius: 12px;}
.tosa-events__callout {background-color: #acc237b2;/* bottom: -290px; */right: 35px;max-width: 550px;color: var(--color-dark-blue) !important;padding: 45px;border-radius: 12px;z-index: 1;border-radius: 12px;position: relative;z-index: 2;margin-top: -40px;float: inline-end;backdrop-filter: blur(2px);}

/* Speech-bubble tail */
.tosa-events__callout::after {content: "";position: absolute;bottom: -62px;left: 72px;width: 100px;height: 100px;background-image: url("/wp-content/uploads/2026/07/Union-1.svg");background-position: bottom;background-repeat: no-repeat;}
.tosa-events__callout h2 {font-family: var(--font-family-yrt);letter-spacing: 3.2px;}
.tosa-events__details h6 {display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 25px;}

/* ============================================================================= SECTION 4 — DEMOGRAPHICS ============================================================================= */

.demographics {background-image: url("/wp-content/uploads/2026/07/Wauwatosa_Brand_Texture_1920x1080_tan-1-1.webp");position: relative;background-size: cover;background-repeat: no-repeat;}

/* Top decorative multi-colour star strip */
.demographics__star-border img {height: 50px;object-fit: cover;width: 100%;}

/* Section label row */
.demographics__label-wrap {display: flex;align-items: center;gap: 10px;margin-bottom: 40px;}
.demographics__star-icon {color: var(--color-dark-blue);font-size: 20px;line-height: 1;}
.demographics__pipe {color: var(--color-dark-blue);font-size: var(--body-large);font-weight: var(--fw-regular);}
.demographics__label {font-family: var(--font-family-tiktok);font-size: var(--h4-size);font-weight: var(--fw-bold);color: var(--color-dark-blue);margin: 0;line-height: var(--heading-line-height);}

/* Media: blue stat box (left) overlapping the image (right) */
.demographics__media {position: relative;margin-bottom: 78px;min-height: 460px;}

/* Image carousel — offset to the right, the blue box overlaps its left edge */
/* .demographics__image-swiper { width: 78%; margin-left: auto; height: 460px; } */
.demographics__image-swiper .swiper-slide {height: 100%;}
.demographics__image {width: 65%;height: 100%;object-fit: cover;display: block;margin: auto;float: inline-end;border-radius: 12px;}
.demographics__image--empty {width: 65%;height: 100%;object-fit: cover;display: block;margin: auto;float: inline-end;border-radius: 12px;}

/* Blue stat box overlapping the left of the image */
.demographics__stat-box {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 42%;border-radius: 12px;border: 3px solid var(--Light-Green, #acc237);background: rgba(28, 56, 102, 0.7);padding: 90px;z-index: 2;text-align: center;color: var(--color-off-white);backdrop-filter: blur(3px);}
.demographics__stat-number {font-family: var(--font-family-yrt);line-height: 1;font-size: var(--h1-size);margin-bottom: 0px;}
.demographics__stat-label {font-family: var(--font-family-yrt);text-transform: uppercase;font-size: var(--h4-size);margin-bottom: 28px;}
.demographics__stat-description p {font-family: var(--font-family-tiktok);font-size: var(--body-large);line-height: 36px;margin: 0;}
.demographics__nav .tosa-events__nav-btn {border: 2px solid var(--color-off-white);padding: 5px 10px;}

/* Bottom CTA */
.demographics__cta-wrap {text-align: left;}
.demographics__cta-wrap .tosa-link-format {font-size: 22px;}
.demographics__cta:focus-visible {outline: 3px solid var(--color-light-green);outline-offset: 2px;}
.demographics__cta-arrow {letter-spacing: 0;}
.demographics__nav.featured-news__controls {justify-content: center;gap: 38px;margin-top: 35px;}

/* Mayor Section */
.mayor-section {padding-block: 200px 100px;}
.mayor-section:before {content: "";position: absolute;top: 0px;left: 0;width: 100%;height: 550px;background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_5-1.svg");background-repeat: no-repeat;background-position: top right;background-size: contain;pointer-events: none;z-index: -1;}
.meet-mayor {background: var(--color-burgendy);padding: 50px 88px 53px;border-radius: 12px;}
.mayor-column {grid-template-columns: 0.4fr 1fr;gap: 50px;}
.meet-mayor h2 {color: var(--color-off-white);text-align: center;font-family: var(--font-family-yrt);font-size: 44px;font-weight: var(--fw-regular);}
.meet-mayor p {color: var(--color-off-white);text-align: center;font-family: var(--font-family-tiktok);font-size: 18px;font-weight: var(--fw-bold);margin-bottom: 40px;}
.mayor-ctas {display: flex;justify-content: center;gap: 24px;flex-wrap: wrap;}
.meet-mayor img {margin-top: -126px;border-radius: 12px;width: 100%;}

@media (min-width: 1820px) {
    .popular-services__inner {gap: 266px;}
    .popular-services__list {gap: 50px;}
    
    /* News */
    .tosa-events__callout {max-width: 700px;padding: 55px 58px;}
    .tosa-events__card {padding: 65px 95px;top: 120px;margin-bottom: 170px;}
    /* .tosa-events__media { margin-bottom: 400px; } */
    .tosa-events__callout h4 {margin-bottom: 21px;}
    .tosa-events__callout h2 {margin-bottom: 29px;}
    
    /* Demographic */
    .demographics__stat-number {font-size: 96px;}
    .demographics__star-border {/* height: 80px; */background-image: url("/wp-content/uploads/2026/07/Wauwatosa_Twinkle_Star_Bar_Asset-1920x78-1.webp");background-size: cover;background-repeat: no-repeat;width: 100%;}
    
    /* Mayor  Section*/
    .meet-mayor {padding: 100px 58px 78px 101px;}
    .mayor-ctas {gap: 70px;}
    .tosa_container.mayor {padding-inline: 100px;}
    .meet-mayor img {margin-top: -200px;}
    .meet-mayor h2 {font-size: var(--h2-size);}
    .meet-mayor p {font-size: var(--body-large);}
}

@media (max-width: 1600px) {
    .featured-news__card--large .featured-news__body {padding: 30px 30px;}
    .meet-mayor {padding: 50px 40px 53px 60px;}
    .demographics__stat-box {padding: 50px;}
}

@media(max-width:1492px) {
    .tosa-events__swiper {max-height: 650px;}
}

@media (max-width: 1400px) {
    .tosa-events__card {left: 0;}
    .tosa-events__callout {max-width: 500px;right: 25px;padding: 25px;}
    .tosa-events__callout::after {height: 52px;bottom: -52px;left: 30px;}
    .tosa_container.mayor {padding-inline: 50px;}
    .mayor-section {padding-block: 150px 80px;}
}

@media screen and (max-width: 1330px) {
    .meet-mayor h2 {font-size: 38px;}
    .meet-mayor img {margin-top: 0px;}
    .mayor-ctas {gap: 19px;}
    .demographics__stat-box {padding-inline: 30px;}
}

@media (max-width: 1200px) {
    .hero-banner__subheading {font-size: var(--h3-size);}
    .tosa-events__card {padding: 45px;}
    .tosa-events__callout {max-width: 450px;}
    .featured-news__card--small .featured-news__media {max-width: 100%;}
    .featured-news__grid {grid-template-columns: 1fr;min-height: auto;}
    .featured-news__img {border-radius: 12px 12px 0px 0px;height: 350px;}
    .featured-news__card--small .featured-news__body {border-radius: 0px 0px 12px 12px;flex: 1 1 auto !important;height: 150px !important;}
    .featured-news__body {height: 200px !important;}
    .featured-news__excerpt {margin-bottom: 10px;line-height: 26px;}
    .featured-news__card--small .featured-news__card-link {flex-direction: column;}
    .featured-news__side {flex-direction: row;flex-wrap: wrap;}
    .featured-news__card--small {flex: 1 1 calc(50% - 4px);}
    .featured-news__carousel {height: 100%;}
    .featured-news__controls.mobile {display: grid;justify-content: center;margin-top: 30px;gap: 30px;}
}

@media (max-width: 1120px) {
    .popular-services__inner, .mayor-column {grid-template-columns: 1fr;}
    .meet-mayor img {margin-top: -120px;width: fit-content;margin-inline: auto;}
    .demographics__stat-box {position: relative;transform: none;width: 90%;min-width: 0;margin: 0 auto;margin-top: -50px;}
    .demographics__image {width: 100%;}
}

/* ============================================================================= RESPONSIVE — TABLET (≤ 991px) ============================================================================= */

@media (max-width: 991px) {
    .hero-banner {min-height: 85vh;}
    .hero-banner__content {top: 65px;max-width: 80%;}
    .popular-services {padding: 60px 0;}
    .popular-services__inner {flex-direction: column;align-items: flex-start;gap: 40px;}
    .popular-services__list {width: 100%;}
    
    /* Featured News — tablet */
    /* Demographics — tablet: blue box flows beneath the image */
    .demographics__media {min-height: 0;margin-bottom: 40px;}
    
    /* Events */
    .tosa-events__media {margin-bottom: 30px;}
    .tosa-events__img {border-radius: 0;}
    .tosa-events__card {position: relative;max-width: 100%;top: auto;right: auto;margin-right: auto;margin-bottom: 0px;border: none;border-radius: 0;}
    .tosa-events__callout {margin-inline: auto;float: none;right: 0;}
    .tosa-events .tosa_container {padding: 0px;overflow: hidden;}
    .tosa-events__swiper {max-height: 570px;}
    /*  .tosa-events__swiper { height: 260px; } */
}

/* ============================================================================= RESPONSIVE — MOBILE (≤ 767px) ============================================================================= */

@media (max-width: 768px) {
    .hero-banner {min-height: 75vh;}
    .hero-banner__content {padding: 0 1.25rem;}
    .popular-services__left {margin-bottom: 70px;}
    .hero-banner__search-form {max-width: 70vw;}
    .hero-banner__search-wrap {padding: 7px 15px;}
    button.hero-banner__search-btn {width: 16px;padding: 0;}
    .popular-services {padding: 50px 20px;}
    .popular-services__inner {gap: 0px;}
    .popular-services__list {grid-template-columns: repeat(2, 1fr);gap: 30px;}
    .popular-services__link {padding: 12px 16px;}
    .featured-news {padding-top: 100px;}
    
    /* Featured News — mobile */
    .featured-news__header {padding: 40px var(--container-padding) 24px;}
    .featured-news__header-inner {flex-wrap: wrap;gap: 16px;}
    .featured-news__card--small {flex: 1 1 100%;}
    .featured-news__card--large .tosa-border-left {grid-template-columns: 1fr;}
    .featured-news__header-inner {margin-bottom: 36px;}
    .featured-news__img {height: 320px;object-fit: cover;}
    
    /* Demographics — mobile */
    .demographics__stat-box {padding: 60px 28px 40px;}
    .demographics__nav {margin-top: 28px;}
    .demographics__cta {font-size: var(--body-small);}
    .demographics__stat-number {font-size: 60px;}
    .popular-services::after {background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_4-2.webp");background-position: bottom;bottom: -100px;top: 0;}
    
    /* events */
    .tosa-events__details h6 {font-size: 24px;}
    .tosa-events__callout h2 {letter-spacing: 1.2px;}
    .meet-mayor {padding: 63px 40px 63px 40px;}
    .mayor-column {gap: 40px;}
}

@media (max-width: 580px) {
    .hero-banner {min-height: 80vh;}
   .hero-banner__content {top: 70px;}
    .hero-banner__subheading {margin: 0;}
    .hero-banner__search-wrap {padding: 4px 14px;}
    .hero-banner__search-form {max-width: 80vw;}
    .hero-banner__pagination .swiper-pagination-bullet {width: 8px;height: 8px;}
    .hero-banner__pagination .swiper-pagination-bullet-active {transform: scale(1.1);}
    input[type="search"].hero-banner__search-input {font-size: 12px;letter-spacing: .6px;}
    .popular-services {background-image: url("/wp-content/uploads/2026/07/Wauwatosa_Brand_Texture_1920x1080_Blue-1-1.png");}
    .popular-services__item:nth-child(2n) {transform: translateY(0px);}
    .popular-services::after {background-position: bottom;bottom: -50px;}
    .popular-services__list {grid-template-columns: 1fr;gap: 50px;}
    .tosa-events__swiper {max-height: 670px;}
    .featured-news__card--small .featured-news__body {height: 200px !important;flex: auto !important;display: flex !important;}
    .featured-news__body {padding: 17px 16px !important;height: 230px !important;flex: auto !important;display: flex !important;}
    .featured-news {padding-top: 60px;}
    .featured-news__grid, .featured-news__side {gap: 20px;}
    .featured-news__card-link {height: auto;}
    .featured-news__header-inner .popular-services__label-wrap {margin: 0 auto;}
    .featured-news__controls {display: none;}
    .tosa-events {overflow: hidden;}
    .tosa-events:before {background-position: left;top: 270px;background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_5-2-1.webp");left: 100px;}
    .meet-mayor {padding: 63px 23px 63px 23px;border-radius: 0px;}
    .tosa_container.mayor {padding-inline: 0px;}
    .meet-mayor img {margin-top: -220px;width: 80%;}
    .mayor-section {padding-block: 250px 0px;}
    .mayor-section:before {background-image: url("/wp-content/uploads/2026/07/Website_pattern-build_5-2.webp");height: 400px;}
    
    /* Demographic */
    .demographics__cta-wrap .tosa-link-format {display: grid;padding: 0px 22px;}
    .demographics__nav.featured-news__controls {display: flex;}
    .demographics__cta-wrap .tosa-link-format svg {width: auto;float: right;}
}

@media (max-width: 520px) {
    .popular-services__heading {font-size: 32px;}
    .popular-services__grid {padding-bottom: 20px;}
    .popular-services__link {height: auto;gap: 0;}

    /* events */
    .tosa-events__callout h4 {font-size: 22px;}
    .tosa-events__callout {margin-inline: 15px;margin-top: -22px;max-width: none;}
    .tosa-events__card {padding: 50px 30px;}
    .tosa-events__callout::after {height: 43px;bottom: -43px;width: 70px;}
    .event-slider-bottom {margin-top: 36px;}
    .demographics__nav.featured-news__controls svg {width: 14px;}
    .demographics__nav .tosa-events__nav-btn {padding: 2px 8px;}
    .popular-services__link:hover .popular-services__link-text {transform: scale(1.07);}
}

@media (max-width: 425px) {
    .tosa-events__card {padding: 50px 15px;}
    .popular-services__label-wrap {gap: 10px;}
}