/*
Theme Name: Direct Remodels
Theme URI: https://directremodels.com
Author: E11 Group
Author URI: https://e11group.com
Description: Child theme of Launchpad for Direct Remodels. Overrides brand colors, fonts, and patterns while inheriting Launchpad's block library and design system.
Template: launchpad
Tags: block-theme, full-site-editing, child-theme
Tested up to: 6.7.1
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: direct-remodels
*/

/* Script heading + underline-decor combo: tighten spacing */
.has-script-font-family + .wp-block-image {
    margin-top: -0.75em !important;
}

/* ============================================================
   Site-wide image rounded corners
   ============================================================
   Default radius for every photo. SVGs (icons, decorative
   marks), brand logos, and a few mascot/illustration classes are
   explicitly excluded since rounding their corners would look
   wrong. Add the `dr-no-radius` class to opt out per-image. */
img {
    border-radius: 0.5rem;
}

img[src$=".svg"],
img[src*=".svg?"],
.custom-logo,
.header-logo-default img,
.header-logo-compact img,
.dr-mobile-nav-extras img,
.dr-window-icon img,
.dr-value-bird img,
.dr-no-radius,
.dr-no-radius img,
/* Images flush against an adjacent colored block — let the parent
   wrapper handle the rounding (parent has overflow: hidden + the
   appropriate per-corner border-radius). */
.dr-team-card-photo img,
.dr-team-related-photo img,
.dr-window-card-photo img,
.dr-window-card-photo .wp-post-image,
.dr-window-card-photo .dr-window-card-photo-img,
.dr-blog-card-img img,
.dr-blog-card-img .wp-post-image {
    border-radius: 0 !important;
}

/* ============================================================
   Global text-link hover: drop the underline, fade opacity.
   ============================================================
   The launchpad parent theme adds a 1px underline to body links by
   default and thickens it on hover (inc/accessibility.php), plus a
   theme.json rule that adds underline on hover for every <a>. Per the
   client's request, hover state should be a color-opacity change
   instead of an underline.

   Opacity 0.75 keeps contrast within WCAG-AA range for our brand
   palette: e.g. primary teal #085C61 at 75% on neutral #F0E2CA still
   yields ~5.6:1 contrast (passes AA for normal text). Buttons are
   excluded — they have their own hover treatment. */
a:not(.wp-block-button__link):not(.wp-element-button):not(.dr-team-card-link):not(.dr-team-related-card):not(.custom-logo-link) {
    transition: opacity 0.15s ease;
}

/* Body, header, footer — every text link, every theme/parent context. */
a:not(.wp-block-button__link):not(.wp-element-button):not(.dr-team-card-link):not(.dr-team-related-card):not(.custom-logo-link):hover,
.entry-content a:not(.wp-block-button__link):hover,
.wp-block-post-content a:not(.wp-block-button__link):hover,
header.site-header a:not(.wp-block-button__link):not(.dr-mobile-nav-cta):hover,
footer.wp-block-template-part a:hover {
    text-decoration: none !important;
    opacity: 0.75;
}

/* Global CTA hover: lighter gradient + shadow lift */
.wp-block-button__link.has-gradient-yellow-gradient-background,
.dr-mobile-nav-cta {
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link.has-gradient-yellow-gradient-background:hover,
.dr-mobile-nav-cta:hover {
    background: linear-gradient(180deg, #ffefcd 0%, #ffd478 100%) !important;
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Teal CTA hover: lighter teal + shadow */
.wp-block-button__link.has-gradient-teal-gradient-background {
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link.has-gradient-teal-gradient-background:hover {
    background: linear-gradient(180deg, #1aada4 0%, #0a7a7f 100%) !important;
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/*
 * Header — Standard sticky, solid dark teal
 *
 * Uses the parent theme's sticky system (position: sticky, pushes content
 * down, handles admin-bar offset). The `<header>` element itself inherits
 * from body (base color), so we pin its background to the dark preset to
 * prevent any beige flash at the edges or on rubber-band scroll.
 */

header.site-header {
    background-color: var(--wp--preset--color--dark) !important;
}

/* Prevent ancestors from clipping the overflowing badge logo */
header.site-header:has(.is-position-sticky),
header.site-header:has(.is-position-sticky) .wp-block-group {
    overflow: visible !important;
}

/* Badge logo: shrink on mobile */
header.site-header:has(.is-position-sticky) .header-logo-default img {
    max-width: 80px;
}

/* Badge logo: absolute positioning, out of flow */
header.site-header:has(.is-position-sticky) .header-logo-default {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Compact logo: always in-flow to reserve header space. */
header.site-header:has(.is-position-sticky) .header-logo-compact {
    position: static !important;
    max-height: 60px !important;
}

header.site-header:has(.is-position-sticky) .header-logo-compact img {
    max-height: 60px;
    width: auto;
}

/* --- Mobile header: hide phone + CTA, fix nav overlay --- */
/* --- Mobile header: hide phone + CTA, fix nav overlay (mobile-first) --- */
header.site-header .wp-block-navigation ~ .wp-block-group {
    display: none !important;
}

/* Mobile nav extras: hidden by default, shown inside overlay */
.dr-mobile-nav-extras {
    display: none;
}

/* Nav overlay: full screen, animate from top */
header.site-header .wp-block-navigation__responsive-container {
    animation: none !important;
}

header.site-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    animation: dr-slide-from-top 0.3s ease !important;
}

@keyframes dr-slide-from-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

header.site-header .wp-block-navigation__responsive-container.dr-nav-closing {
    animation: dr-slide-to-top 0.3s ease forwards !important;
}

@keyframes dr-slide-to-top {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* Close button: ensure visible */
header.site-header .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 10 !important;
}

/* Overlay content: center everything (only when open) */
header.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 4rem !important;
}

/* Force overlay nav link colors (overrides WP elements + front-page inheritance) */
header.site-header .wp-block-navigation__responsive-container.is-menu-open a:not(.dr-mobile-nav-cta) {
    color: var(--wp--preset--color--surface) !important;
}

/* Show mobile extras inside the overlay (moved by JS) */
.wp-block-navigation__responsive-container-content .dr-mobile-nav-extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: 0 2rem;
}

header.site-header .is-menu-open .dr-mobile-nav-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wp--preset--color--accent) !important;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1.125rem;
    text-decoration: none;
}

header.site-header .is-menu-open .dr-mobile-nav-cta {
    display: block;
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 56px;
    background: var(--wp--preset--gradient--gradient-yellow);
    border: 1px solid #D9A83F;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--wp--preset--font-family--primary);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
}

@media (min-width: 1024px) {
    header.site-header .wp-block-navigation ~ .wp-block-group {
        display: flex !important;
    }

    .dr-mobile-nav-extras {
        display: none !important;
    }

    header.site-header:has(.is-position-sticky) .header-logo-default img {
        max-width: none;
    }

    /* Override "always" overlay: show inline nav on desktop */
    .dr-main-nav .wp-block-navigation__responsive-container {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .dr-main-nav .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .dr-main-nav .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .dr-main-nav .wp-block-navigation__responsive-container-content {
        flex-direction: row !important;
        padding: 0 !important;
        gap: var(--wp--preset--spacing--medium);
    }
}

/* --- Home page: white body background --- */
.dr-front-page {
    background-color: #fff !important;
}

/* Remove gap between last content section and footer */
.dr-front-page main.wp-block-group {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.dr-front-page .wp-block-post-content {
    margin-bottom: 0 !important;
}

.dr-front-page .wp-block-post-content > .alignfull:last-child {
    margin-bottom: 0 !important;
}

.dr-front-page footer.wp-block-template-part {
    margin-top: 0 !important;
}

/* --- Compact mode: DR-specific height targets --- */

header.site-header.is-scrolled.is-scrolled > .wp-block-group {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

header.site-header.is-scrolled.is-scrolled .wp-block-button__link {
    padding: 0.55rem 1rem !important;
    font-size: 0.9rem !important;
}

/* =============================================
   Trust Badge Cards
   ============================================= */

.dr-trust-badge {
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dr-trust-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* =============================================
   Window & Door Style Cards
   ============================================= */

/* Grid layout: 2 columns */
.dr-styles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

/* Styles grid: 2 columns on desktop */
.dr-styles-section .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dr-styles-section .wp-block-post-template > li {
    margin: 0;
    padding: 0;
}

/* Pretty text-wrap on CTA headings */
.dr-cta-energy-guide h2,
.dr-cta-energy-guide p {
    text-wrap: pretty;
}

/* Card: stacked on mobile, side-by-side on desktop. min-height set with
   !important to override the per-card inline style and keep windows + doors
   visually equal across both query loops. */
.dr-window-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-height: 440px !important;
    height: 100%;
}

.dr-window-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Photo column */
.dr-window-card-photo {
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    height: 200px;
}

.dr-window-card-photo img,
.dr-window-card-photo .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.dr-window-card-photo .wp-block-post-featured-image {
    height: 100%;
    margin: 0;
}

.dr-window-card-photo .wp-block-post-featured-image a {
    display: block;
    height: 100%;
}

.dr-window-card-photo .wp-block-post-featured-image img {
    height: 100%;
    object-fit: cover;
}

.dr-window-card:hover .dr-window-card-photo img {
    transform: scale(1.05);
}

/* Content column */
.dr-window-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    background-color: var(--wp--preset--color--primary);
}

/* Icon */
.dr-window-icon-img {
    width: 105px;
    height: 105px;
    object-fit: contain;
    align-self: flex-start;
}

/* Title + excerpt wrapper */
.dr-window-card-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Title */
.dr-window-card-title {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent-light);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

/* Excerpt */
.dr-window-card-excerpt {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wp--preset--color--surface);
    margin: 0;
    line-height: 1.2;
}

/* Title link: no underline by default, underline on hover */
.dr-window-card .dr-window-card-content .wp-block-post-title a {
    text-decoration: none !important;
}

.dr-window-card .dr-window-card-content .wp-block-post-title a:hover {
    text-decoration: underline !important;
}

/* Icon alignment: left-align and top-align within bounding box */
.dr-window-card-content .dr-window-icon {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.dr-window-card-content .dr-window-icon img {
    object-fit: contain;
    object-position: top left;
}

/* Hide icon when no icon is set */
.dr-window-icon img[src=""] {
    display: none;
}

.dr-window-icon:has(img[src=""]) {
    display: none;
}

/* =============================================
   Promotions Grid
   ============================================= */

.dr-promo-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 782px) {
    .dr-promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dr-promo-grid > .dr-promo-card {
    height: 100%;
    margin-top: 0 !important;
}

/* =============================================
   Promo Cards
   ============================================= */

.dr-promo-card {
    display: grid !important;
    grid-template-columns: 40% 1fr;
    overflow: hidden;
    min-height: 340px;
    transition: box-shadow 0.2s ease;
}

.dr-promo-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Image column: fill the grid cell with padding */
.dr-promo-card-img {
    overflow: hidden;
    padding: 2rem 0.5rem 2rem 2rem !important;
    margin: 0 !important;
}

.dr-promo-card-img > * {
    margin: 0 !important;
}

.dr-promo-card-img .wp-block-image {
    height: 100%;
    margin: 0 !important;
}

.dr-promo-card-img .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mask: rounded-top tab shape (cards 1, 4) */
.dr-promo-mask-single .wp-block-image img {
    -webkit-mask-image: url('assets/images/promo-mask-single.svg');
    mask-image: url('assets/images/promo-mask-single.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Mask: 2×2 window grid (cards 2, 3) */
.dr-promo-mask-grid .wp-block-image img {
    -webkit-mask-image: url('assets/images/promo-mask-grid.svg');
    mask-image: url('assets/images/promo-mask-grid.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Text column: vertically centered */
.dr-promo-card-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* =============================================
   Blog Archive Cards
   ============================================= */

.dr-archive-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dr-archive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* =============================================
   Home Hero
   ============================================= */


/* Financing lines match button width */
.dr-hero-financing {
    align-self: stretch;
    max-width: 100%;
}

.dr-hero-financing p {
    width: 100%;
}

/* Bundle button + financing lines so they share width */
.dr-hero-cta-bundle {
    align-self: flex-start !important;
    gap: var(--wp--preset--spacing--medium) !important;
}

.dr-hero-cta-bundle .wp-block-button {
    width: auto !important;
}

.dr-hero-cta-bundle .dr-hero-financing {
    align-self: stretch;
}

/* Push hero inner content below the header (~100px for logo overflow) */
.dr-hero-home .wp-block-cover__inner-container > .wp-block-group {
    padding-top: 7rem !important;
}

.dr-hero-home h1 {
    max-width: 500px;
}

.dr-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layered window: scene behind, frame on top */
.dr-hero-window-wrap {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
}

/* Video/image behind the window frame */
.dr-hero-window-video {
    position: absolute;
    top: 34%;
    left: 18%;
    width: 64%;
    height: 60%;
    z-index: 0;
    margin: 0 !important;
}

.dr-hero-window-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-hero-window-frame {
    position: relative;
    z-index: 1;
}

.dr-hero-window-frame img {
    max-width: 100%;
    height: auto;
}

/* =============================================
   Stats Bar Pills
   ============================================= */

.dr-stat-pill {
    flex: 1 1 0 !important;
    justify-content: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dr-stat-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* =============================================
   Core Values Cards
   ============================================= */

.dr-value-card {
    overflow: hidden;
    min-height: 140px;
    align-items: center;
    position: relative;
}

/* Yellow circle fragment in bottom-right of card — 261px circle, mostly hidden */
.dr-value-card::after {
    content: "";
    position: absolute;
    bottom: -160px;
    right: -120px;
    width: 261px;
    height: 261px;
    background-color: #f2bc47;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.dr-value-card .dr-value-bird {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.dr-value-bird img {
    object-fit: contain;
    object-position: right bottom;
    display: block;
    height: 120px;
    width: auto !important;
}

/* Middle card (handshake) — stretches full height */
.wp-block-columns > .wp-block-column:nth-child(2) .dr-value-card .dr-value-bird {
    top: 0;
}

.wp-block-columns > .wp-block-column:nth-child(2) .dr-value-bird img {
    height: 100%;
}

/* Reveal-on-scroll micro-animation.
   Cards start slightly translated + transparent, then slide up and fade in
   when they enter the viewport (driven by dr-reveal.js adding .is-revealed).
   Each column is staggered ~120ms so they cascade left-to-right. */
@media (prefers-reduced-motion: no-preference) {
    .dr-value-card {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        will-change: opacity, transform;
    }
    .dr-value-card.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
    .wp-block-columns > .wp-block-column:nth-child(2) .dr-value-card {
        transition-delay: 0.12s;
    }
    .wp-block-columns > .wp-block-column:nth-child(3) .dr-value-card {
        transition-delay: 0.24s;
    }
}

/* =============================================
   CTA Photo
   ============================================= */

.dr-cta-photo {
    overflow: visible;
    position: relative;
}

.dr-cta-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 108px;
    height: 89px;
    background: url('assets/images/corner-arcs-gold.png') no-repeat bottom right;
    background-size: 108px 89px;
    pointer-events: none;
    z-index: 1;
}

.dr-cta-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 369px;
}

/* =============================================
   Testimonial Carousel
   ============================================= */

.dr-testimonial-section {
    background-color: rgba(242, 188, 71, 0.1);
    background-image: url('assets/images/wave-pattern.svg');
    background-repeat: repeat;
    background-size: 1200px 900px;
    position: relative;
}

/* Carousel container */
.dr-carousel {
    position: relative;
}

/* --- Cards track: grid stacking, cross-dissolve between slides --- */
.dr-carousel-cards {
    display: grid;
    overflow: hidden;
}

.dr-carousel-cards > * {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.dr-carousel-cards > .active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity 0.5s ease, visibility 0s;
}

.dr-carousel-cards > .leaving {
    opacity: 0;
    visibility: visible;
    z-index: 2;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

@media (prefers-reduced-motion: reduce) {
    .dr-carousel-cards > * {
        transition: none;
    }
}

/* --- Headings track: no stacking, fade swap --- */
.dr-carousel-headings > * {
    display: none;
}

.dr-carousel-headings > .active {
    display: block;
    animation: drFadeIn 0.3s ease;
}

@keyframes drFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dr-carousel-slide {
    text-align: center;
}

/* Slide heading — script quote */
.dr-testimonial-heading {
    font-family: var(--wp--preset--font-family--script);
    font-size: 3rem;
    line-height: 1;
    color: var(--wp--preset--color--primary);
    font-weight: 400;
    margin: 0 0 var(--wp--preset--spacing--large);
    text-align: center;
}

/* Nav row: arrows + card */
.dr-testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--medium);
}

.dr-nav-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.dr-nav-arrow:hover {
    opacity: 1;
}

.dr-nav-arrow img {
    width: 48px;
    height: 48px;
}

/* Testimonial card */
.dr-testimonial-card {
    flex: 1;
    min-width: 0;
    max-width: 800px;
    border-radius: 0.5rem;
    overflow: visible;
    position: relative;
}

/* Media area (thumbnail + play button) */
.dr-testimonial-media {
    position: relative;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

/* Dorseys slide: vertical (9:16) video, scoped via the data-video attribute.
   The video element preserves its native aspect inside the 16:9 frame,
   leaving empty bars on each side. Place the matching backdrop image here
   so those bars are filled instead of showing a transparent gap. */
.dr-testimonial-media[data-video*="dorseys.mp4"] {
    background: url('assets/images/dorsey-bg.png') center/cover no-repeat;
}

.dr-testimonial-media .dr-video-thumb {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Play button overlay */
.dr-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: transform 0.2s ease;
}

.dr-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.dr-play-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    overflow: visible;
}

.dr-play-circle svg {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

/* Video player (replaces thumbnail on play) */
.dr-video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
}

/* Quote card */
.dr-testimonial-quote {
    background-color: var(--wp--preset--color--accent);
    padding: 2rem 2.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-align: left;
    position: relative;
    overflow: visible;
}

/* Corner arcs decoration */
.dr-testimonial-quote::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 88px;
    height: 128px;
    background: url('assets/images/corner-arcs-teal.png') no-repeat bottom right;
    background-size: 88px 128px;
    pointer-events: none;
}

.dr-quote-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--contrast);
    margin: 0 0 0.75rem;
    padding-right: 6rem;
}

.dr-quote-author {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    /* primary (#085C61) on the accent-yellow card = 4.44:1 (fails AA);
       primary-dark (#065048) = 5.36:1, on-brand and passes. */
    color: var(--wp--preset--color--primary-dark);
    margin: 0;
}

/* Mobile: drop the bottom-right corner-arcs decoration, tighten the
   quote padding + text size, and ensure all four corners of the card
   render rounded (the media + quote already split top/bottom radii;
   the parent .dr-testimonial-card has overflow:hidden via the section
   in mobile context so the seam reads as a single 4-corner block). */
@media (max-width: 781px) {
    .dr-testimonial-card {
        overflow: hidden;
    }
    .dr-testimonial-quote {
        padding: 1.25rem 1.5rem;
    }
    .dr-testimonial-quote::after {
        display: none;
    }
    .dr-quote-text {
        font-size: 0.875rem;
        line-height: 1.5;
        padding-right: 0;
        margin-bottom: 0.75rem;
    }
    .dr-quote-author {
        font-size: 0.9375rem;
    }
}

/* =============================================
   Support Cards
   ============================================= */

/* Card grid: 3 columns */
.dr-support-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Each card: pelican inside card body, head peeks above */
.dr-support-card {
    padding-top: 30px;
}

.dr-support-card-body {
    position: relative;
    overflow: visible;
    border-radius: 8px;
    padding: 10rem 3rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pelican: fixed height so all 3 match, mostly inside card */
.dr-support-card-pelican {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    height: 180px;
    width: auto;
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
}

/* Card heading spacing */
.dr-support-card-heading {
    font-family: var(--wp--preset--font-family--script);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    margin: 3rem 0 1.5rem;
}

/* Bullet items */
.dr-support-card-items {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    text-align: left;
}

.dr-support-card-items li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.3;
}

/* Checkmark circle icon */
.dr-support-check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* =============================================
   FAQ Accordion
   ============================================= */

.dr-faq-item {
    border-bottom: 1px solid var(--wp--preset--color--outline);
}

.dr-faq-question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    line-height: 1.6;
}

.dr-faq-question svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--wp--preset--color--primary);
}

.dr-faq-item.is-open .dr-faq-question svg {
    transform: rotate(-90deg);
}

.dr-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    padding: 0 0 0 2rem;
}

.dr-faq-item.is-open .dr-faq-answer {
    /* Generous max-height so multi-paragraph answers (workflow page)
       don't get truncated. The transition is set on max-height so a
       fixed value is required, but a large ceiling gives every answer
       room while keeping the open animation smooth. */
    max-height: 4000px;
    opacity: 1;
    padding: 0 0 1rem 2rem;
}

.dr-faq-answer p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
    margin: 0;
}

/* =============================================
   Support Contact
   ============================================= */

/* Gravity Form styling — match Figma */
.dr-support-contact-section .gform_wrapper label.gfield_label,
.dr-support-contact-section .gform_wrapper .gform-field-label {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.3rem;
}

.dr-support-contact-section .gform_wrapper input[type="text"],
.dr-support-contact-section .gform_wrapper input[type="email"],
.dr-support-contact-section .gform_wrapper input[type="tel"],
.dr-support-contact-section .gform_wrapper textarea {
    background: rgba(242, 188, 71, 0.1) !important;
    border: 1px solid rgba(242, 188, 71, 0.4) !important;
    border-radius: 2px !important;
    height: 40px;
    width: 100% !important;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}

.dr-support-contact-section .gform_wrapper textarea {
    height: 160px;
    resize: vertical;
}

.dr-support-contact-section .gform_wrapper .gform-footer input[type="submit"],
.dr-support-contact-section .gform_wrapper .gform_button {
    background: linear-gradient(180deg, #FFD987 0%, #F2BC47 100%) !important;
    border: 1px solid #D9A83F !important;
    border-radius: 56px !important;
    color: #000 !important;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dr-support-contact-section .gform_wrapper .gform_button:hover {
    opacity: 0.9;
}

/* Field containers fill available width */
.dr-support-contact-section .gform_wrapper .ginput_container {
    width: 100% !important;
}

.dr-support-contact-section .gform_wrapper .gfield {
    width: 100% !important;
}

/* Override GF 12-col grid — 1 col mobile, 2 col desktop */
.dr-support-contact-section .gform_fields {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 782px) {
    .dr-support-contact-section .gform_fields {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.dr-support-contact-section .gform_wrapper .gf_left_half,
.dr-support-contact-section .gform_wrapper .gf_right_half {
    grid-column: span 1 !important;
}

/* Message field spans full width */
.dr-support-contact-section .gform_wrapper .gfield:not(.gf_left_half):not(.gf_right_half) {
    grid-column: 1 / -1 !important;
}

/* Full-bleed breakout */
.dr-support-contact-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.dr-support-contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 6rem;
    max-width: 776px;
    margin-left: auto;
    margin-right: auto;
}

.dr-contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.dr-contact-method-icon {
    width: 32px;
    height: 32px;
    color: var(--wp--preset--color--primary);
}

.dr-contact-method-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary);
    margin: 0;
}

.dr-contact-method-value {
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    margin: 0;
}

/* =============================================
   Responsive
   ============================================= */

/* =============================================
   Footer
   ============================================= */

/* Footer: no top margin — content butts right up against it */
footer.wp-block-template-part {
    margin-top: 0 !important;
}

/* Remove underlines from header links (phone number) */
header.site-header a {
    text-decoration: none;
}

/* Header text links — phone number, etc. Hover handled by the global rule
   below (opacity-based). */

/* Remove underlines from all footer links by default */
footer.wp-block-template-part a {
    text-decoration: none;
}

/* Underline on hover for nav links */
footer.wp-block-template-part a:hover {
    text-decoration: underline;
}

/* Keep underlines on bottom bar Privacy/Terms links */
footer.wp-block-template-part .has-primary-dark-background-color a {
    text-decoration: underline;
}

/* Footer CTA: button stretches to match Call Us width */
.dr-footer-cta {
    align-items: stretch !important;
}

.dr-footer-btn {
    width: 100%;
}

.dr-footer-btn .wp-block-button {
    width: 100%;
}

.dr-footer-btn .wp-block-button__link {
    width: 100%;
    text-align: center;
}

/* =============================================
   About Page
   ============================================= */

/* Post-content lives inside a constrained <main>, so WP core layout's
   `alignfull` padding-unwind only gets one level. Force any alignfull
   section that's a direct child of post-content out to viewport width. */
.wp-block-post-content > .alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw;
    width: 100vw;
}

.dr-page-hero {
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
    min-height: 0 !important;
    height: 664px;
}

/* Bottom gradient overlay — teal fading up from bottom */
.dr-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(8, 92, 97, 1) 0%, rgba(8, 92, 97, 0.85) 30%, rgba(8, 92, 97, 0.4) 55%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Dark blurred ellipse behind the heading for contrast */
.dr-page-hero h1 {
    position: relative;
}

.dr-page-hero h1::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 569px;
    height: 244px;
    background: black;
    border-radius: 569px;
    filter: blur(86px);
    z-index: -1;
    pointer-events: none;
}

/* Heading pushed to bottom, above the gradient */
.dr-page-hero .wp-block-cover__inner-container {
    position: relative;
    z-index: 2 !important;
    height: 100%;
}

.dr-page-hero .wp-block-cover__inner-container > .wp-block-group {
    position: absolute;
    bottom: 78px;
    left: 0;
    right: 0;
    padding: 0;
}

/* Curved bottom mask — base-colored arc overlaid at the bottom */
.dr-page-hero::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--wp--preset--color--base, #EFEBEB);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 3;
}

/* Remove gap between hero and intro */
.dr-page-hero + .wp-block-group {
    margin-top: 0 !important;
}

/* Tighten spacing: mission → core-values (target ~2rem total) */
.dr-about-mission-wrap {
    padding-bottom: 1rem !important;
}
.dr-about-mission-wrap + .wp-block-group {
    padding-top: 1rem !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Features section: background pattern overlay */
.dr-about-features-section {
    position: relative;
}

.dr-about-features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/images/features-pattern.png') repeat;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

/* Equal-height columns — above the pattern */
.dr-about-features-section .wp-block-columns {
    align-items: stretch !important;
    position: relative;
    z-index: 1;
}

.dr-about-features-section .wp-block-column {
    display: flex;
}

/* Feature cards: flex column, image pushed to bottom */
.dr-about-feature {
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding: 0 !important;
}

.dr-about-feature > .wp-block-group:first-child {
    flex: 0 0 auto;
}

.dr-about-feature-img {
    margin: auto 0 0 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.dr-about-feature-img.wp-block-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.dr-about-feature-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 0 !important;
}

/* Pelican card: contain so the illustration isn't cropped */
.dr-about-feature-img.dr-contain img {
    object-fit: contain;
    object-position: center bottom;
}

/* Mission card: photo fills the column, clips to right-side rounded corners */
.dr-about-mission {
    overflow: hidden;
    padding: 4rem;
}

.dr-about-mission-photo {
    padding: 0 !important;
}

.dr-about-mission-img {
    margin: 0 !important;
    height: 100%;
}

.dr-about-mission-img img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Core values section: teal arc decorator */
.dr-core-values-section {
    position: relative;
    overflow: hidden;
}

.dr-core-values-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 250px;
    background: url('assets/images/decor-teal-arcs.png') no-repeat bottom right;
    background-size: contain;
    pointer-events: none;
}

/* Value photos: always circular */
.dr-about-value-photo img {
    border-radius: 50% !important;
    object-fit: cover;
}

/* Team cards: overflow hidden for image clipping */
.dr-team-card {
    overflow: hidden;
    position: relative; /* anchor for .dr-team-card-link overlay */
}

.dr-team-card-photo {
    margin: 0 !important;
    overflow: hidden;
    /* Match the source photo aspect (~3:4 portrait) so the full headshot —
       including the brand badge in the top-right — stays visible at every
       grid width. Previously the container had a fixed 300px height which
       caused horizontal cropping on the narrower consultants cards. */
    aspect-ratio: 3 / 4;
}

.dr-team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background-color: var(--wp--preset--color--primary-light);
    transition: transform 0.4s ease-out;
    will-change: transform;
}

/* Whole-card click target. The link is an absolute overlay so the entire
   card is clickable (image + name block) without nesting <a> inside blocks. */
.dr-team-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Visually invisible but discoverable to assistive tech via aria-label. */
    text-indent: -9999px;
    overflow: hidden;
    border-radius: inherit;
}

.dr-team-card-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Hover: gently scale the photo. */
@media (prefers-reduced-motion: no-preference) {
    .dr-team-card:hover .dr-team-card-photo img,
    .dr-team-card:focus-within .dr-team-card-photo img {
        transform: scale(1.05);
    }
}

/* Team bio detail page: rounded photo + eyebrow link styling. */
.dr-team-bio-photo {
    border-radius: 0.5rem;
    width: 100%;
    height: auto;
    display: block;
    background-color: var(--wp--preset--color--primary-light);
}

/* Name (in the Signatra script font) — give it a touch more letter-spacing
   and tighten the bottom margin so the role sits closely beneath. */
.dr-team-bio-name {
    margin-bottom: 0.25rem !important;
    letter-spacing: -0.01em;
}

/* Job title (role + office), e.g. "Design Consultant, Tampa Office".
   Sits directly below the script-font name. */
.dr-team-bio-role {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--wp--preset--color--muted);
    margin: 0 0 1.5rem;
    letter-spacing: 0.01em;
}

.dr-team-bio-eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.15s ease;
}

.dr-team-bio-eyebrow a:hover {
    opacity: 0.7;
}

/* "Other [Department]" grid. Lives in its own alignfull group with its
   own padding/background, so no internal margin or border-top here. */
.dr-team-related {
    margin: 0;
    padding: 0;
}

.dr-team-related-heading {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-align: center;
    margin: 0 0 2rem;
}

.dr-team-related-grid {
    display: grid;
    /* Cap the max track width so a single related card (e.g. on a Sales
       Manager's bio page where there's only one peer) doesn't stretch to
       fill the entire content width. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    justify-content: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dr-team-related-grid > li {
    margin: 0;
}

.dr-team-related-card {
    display: block;
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    transition: transform 0.2s ease;
}

.dr-team-related-card,
.dr-team-related-card:hover,
.dr-team-related-card:focus {
    /* Beats the parent theme's .entry-content a:not(.wp-block-button__link)
       underline rule, which has equal specificity but loads later. */
    text-decoration: none !important;
}

.dr-team-related-card:hover {
    transform: translateY(-2px);
}

.dr-team-related-photo {
    display: block;
    overflow: hidden;
    background: var(--wp--preset--color--primary-light);
    /* Match the source photos (3:4 portrait) so the brand badge in the
       top-right doesn't get clipped. */
    aspect-ratio: 3 / 4;
}

.dr-team-related-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    .dr-team-related-card:hover .dr-team-related-photo img,
    .dr-team-related-card:focus-visible .dr-team-related-photo img {
        transform: scale(1.05);
    }
}

.dr-team-related-name {
    display: block;
    padding: 0.75rem 1rem;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    color: var(--wp--preset--color--primary);
    /* Default fallback; overridden per-department below to match the
       /about/ page card colors (yellow for managers, blue for consultants). */
    background: var(--wp--preset--color--accent);
}

/* Sales Managers section — yellow (accent) name plate. */
.dr-team-related--sales-managers .dr-team-related-name {
    background: var(--wp--preset--color--accent);
}

/* Design Consultants section — blue (primary-light) name plate. */
.dr-team-related--design-consultants .dr-team-related-name {
    background: var(--wp--preset--color--primary-light);
}

@media (max-width: 600px) {
    .dr-team-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Consultants grid: 4 columns on desktop */
.dr-consultants-grid {
    flex-wrap: wrap !important;
}

.dr-consultants-grid > .wp-block-column {
    flex-basis: calc(25% - var(--wp--preset--spacing--medium) * 3 / 4) !important;
    flex-grow: 0 !important;
}

/* Managers grid: same card size as consultants, centered. Without this,
   2 default columns each take 50% of the row — making the cards twice
   the consultants' width. */
.dr-managers-grid {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.dr-managers-grid > .wp-block-column {
    flex-basis: calc(25% - var(--wp--preset--spacing--medium) * 3 / 4) !important;
    flex-grow: 0 !important;
}

/* Mobile: both staff grids drop to 2 per row instead of stacking.
   Selectors include .wp-block-columns + :not() to match WordPress core's
   own stack-on-mobile rule's specificity (.wp-block-columns:not(...) >
   .wp-block-column with !important). Same cascade order means our rule
   wins on tie via being later in the source. */
@media (max-width: 781px) {
    .wp-block-columns.dr-consultants-grid:not(.is-not-stacked-on-mobile) > .wp-block-column,
    .wp-block-columns.dr-managers-grid:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: calc(50% - var(--wp--preset--spacing--medium) / 2) !important;
    }
}

/* Gallery section: subtle blue tint background */
.dr-about-gallery-section {
    background-color: rgba(146, 212, 229, 0.2);
}

/* Gallery bento: staggered mosaic via nth-child grid placement */
.dr-bento-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.6fr 1.3fr;
    grid-template-rows: repeat(10, 1fr);
    gap: 12px !important;
    height: 600px;
    flex-wrap: nowrap !important;
}

.dr-bento-grid .wp-block-image {
    overflow: hidden;
    border-radius: 0.5rem;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
}

.dr-bento-grid .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Left col: 60/40 split */
.dr-bento-grid .wp-block-image:nth-child(1) { grid-column: 1; grid-row: 1 / 7; }
.dr-bento-grid .wp-block-image:nth-child(4) { grid-column: 1; grid-row: 7 / 11; }

/* Center col: 55/45 split */
.dr-bento-grid .wp-block-image:nth-child(2) { grid-column: 2; grid-row: 1 / 6; }
.dr-bento-grid .wp-block-image:nth-child(5) { grid-column: 2; grid-row: 6 / 11; }

/* Right col: 35/65 split */
.dr-bento-grid .wp-block-image:nth-child(3) { grid-column: 3; grid-row: 1 / 4; }
.dr-bento-grid .wp-block-image:nth-child(6) { grid-column: 3; grid-row: 4 / 11; }

/* =============================================
   Projects Gallery Slider (single window/door)
   ============================================= */

/* Choose the style section */
.dr-styles-section {
    background-color: rgba(146, 212, 229, 0.2) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
}

/* No gap between styles grid and gallery */
.dr-styles-section + .dr-projects-section {
    margin-top: 0 !important;
}

/* Full-bleed breakout from constrained parent */
.dr-projects-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.dr-projects-section .wp-block-gallery {
    gap: 1rem !important;
}

.dr-projects-section .wp-block-gallery .wp-block-image img {
    border-radius: 0.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Slide height: auto so gallery grids size naturally */
.dr-projects-section .swiper-slide {
    height: auto !important;
}

/* Swiper nav row: arrows + dots aligned in a centered line */
.dr-projects-section .swiper {
    padding-bottom: 3.5rem;
}

.dr-projects-section .swiper-button-prev,
.dr-projects-section .swiper-button-next {
    top: auto;
    bottom: 12px;
    width: 32px;
    height: 32px;
    margin-top: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.dr-projects-section .swiper-button-prev {
    left: calc(50% - 80px);
}

.dr-projects-section .swiper-button-next {
    right: calc(50% - 80px);
}

.dr-projects-section .swiper-button-prev:hover,
.dr-projects-section .swiper-button-next:hover {
    opacity: 1;
}

.dr-projects-section .swiper-button-prev::after,
.dr-projects-section .swiper-button-next::after {
    content: '';
    width: 32px;
    height: 32px;
    display: block;
}

.dr-projects-section .swiper-button-prev::after {
    background: url('assets/images/arrow-left.svg') no-repeat center;
    background-size: 32px 32px;
}

.dr-projects-section .swiper-button-next::after {
    background: url('assets/images/arrow-right.svg') no-repeat center;
    background-size: 32px 32px;
}

/* Swiper pagination: custom dot indicators */
.dr-projects-section .swiper-pagination {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
}

.dr-projects-section .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid var(--wp--preset--color--primary);
    opacity: 1;
}

.dr-projects-section .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--accent);
}

/* =============================================
   CTA — Energy Guide
   ============================================= */

.dr-cta-energy-guide {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* =============================================
   Direct Advantage
   ============================================= */

.dr-advantage-pelican {
    margin-top: 2rem !important;
    margin-bottom: -39px !important;
    position: relative;
    z-index: 1;
}

.dr-advantage-pelican img {
    width: 96px;
    height: auto;
}

.dr-advantage-card {
    margin-top: 0 !important;
}

/* =============================================
   Home — Direct Advantage (teal split card)
   ============================================= */

.dr-home-advantage {
    position: relative;
}

.dr-home-advantage__pelican {
    position: absolute;
    top: -66px;
    right: 1.25rem;
    width: 100px;
    z-index: 3;
    pointer-events: none;
    margin: 0 !important;
}

.dr-home-advantage__pelican img {
    width: 100%;
    height: auto;
    display: block;
}

.editor-styles-wrapper .dr-home-advantage__pelican {
    display: none;
}

.dr-home-advantage__layout {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0 !important;
}

.dr-home-advantage__image {
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 1;
    position: relative;
    flex: 0 0 55%;
    align-self: stretch;
    line-height: 0;
}

.dr-home-advantage__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    max-width: none;
}

.dr-home-advantage__card {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    margin-left: -8% !important;
    align-self: stretch;
    justify-content: center !important;
}

.dr-home-advantage__card h4 {
    margin: 0 !important;
}

.dr-home-advantage__card p {
    margin: 0 !important;
}

@media (min-width: 782px) {
    .dr-home-advantage__pelican {
        width: 140px;
        top: -93px;
        right: 4rem;
    }
}

@media (max-width: 781px) {
    .dr-home-advantage__layout {
        flex-direction: column;
    }

    .dr-home-advantage__image {
        flex: 0 0 auto;
        min-height: 240px;
        margin-bottom: -2rem !important;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .dr-home-advantage__image img {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .dr-home-advantage__card {
        margin-left: 0 !important;
        padding: 2rem !important;
        padding-top: 3rem !important;
        border-top-left-radius: 32px !important;
        border-bottom-left-radius: 16px !important;
    }
}

/* =============================================
   Window Style — Single Page Hero
   ============================================= */

.dr-window-hero {
    margin-top: 0 !important;
}

/* Cap the hero photo to half the original 800px content width so the
   brand window illustrations don't dominate the page. Centered via auto
   margins (the parent's constrained layout would otherwise stretch the
   figure block to the full content width). */
.dr-window-hero-photo {
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dr-window-hero-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* "From Our Projects" slider: force a consistent 3-column grid with
   uniform 3:2 thumbnails so every image is the same size, regardless
   of how many appear on a given slide. */
.dr-projects-section .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
}

.dr-projects-section .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
    flex-basis: auto !important;
}

.dr-projects-section .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
}

@media (max-width: 781px) {
    /* Auto-fit so a single related-project image stretches to the
       full row instead of leaving an awkward empty grid cell. */
    .dr-projects-section .wp-block-gallery {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        justify-content: center;
    }
}

/* (removed: dr-window-related grid — was a duplicate of the existing
   "From Our Projects" slider on the same pages.) */

/* =============================================
   Window Style — Dynamic CTA
   ============================================= */

.dr-cta-card {
    position: relative;
    overflow: hidden;
}

.dr-cta-window-icon-wrap {
    position: static;
    flex-shrink: 0;
}

.dr-cta-decor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 158px;
    height: 231px;
    z-index: 0;
    pointer-events: none;
}

.dr-cta-icon {
    position: relative;
    z-index: 1;
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* =============================================
   Blog Single Post
   ============================================= */

/* Content typography */
.dr-blog-single .wp-block-post-content p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wp--preset--color--contrast);
}

.dr-blog-single .wp-block-post-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin-top: 2.5rem;
}

.dr-blog-single .wp-block-post-content h3 {
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin-top: 2rem;
}

/* Lists: clean, readable bullets that match the body copy */
.dr-blog-single .wp-block-post-content ul,
.dr-blog-single .wp-block-post-content ol {
    margin: 1.25rem 0;
    padding-left: 1.75rem;
}

.dr-blog-single .wp-block-post-content ul { list-style: disc; }
.dr-blog-single .wp-block-post-content ol { list-style: decimal; }

.dr-blog-single .wp-block-post-content ul li,
.dr-blog-single .wp-block-post-content ol li {
    color: var(--wp--preset--color--contrast);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* Teal bullet markers for a subtle brand touch */
.dr-blog-single .wp-block-post-content li::marker {
    color: var(--wp--preset--color--primary);
}

/* Classic-editor list items wrap text in <span>; inherit list styling */
.dr-blog-single .wp-block-post-content li span {
    font-weight: inherit;
    color: inherit;
}

/* =============================================
   Blog Archive Cards
   ============================================= */

/* Card: image left, content right */
.dr-blog-card {
    display: grid !important;
    grid-template-columns: 35.5% 1fr;
    overflow: hidden;
    min-height: 0;
}

.dr-blog-card-img {
    overflow: hidden;
    background-color: var(--wp--preset--color--primary);
    margin: 0 !important;
    /* Round only the left corners — the right side sits flush against
       .dr-blog-card-text, which owns the right-side rounding. The
       parent .dr-blog-card already has overflow:hidden + 8px radius,
       so this is belt-and-braces for any layout where the figure
       leaks past the card's clip. */
    border-radius: 8px 0 0 8px !important;
}

.dr-blog-card-img img,
.dr-blog-card-img .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Force every corner sharp on the image itself — the figure's
       border-radius + overflow:hidden does the visible rounding. */
    border-radius: 0 !important;
}

/* Text side: vertically centered */
.dr-blog-card-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 8px 8px 0;
}

/* Alternating card background colors */
.dr-blog-list > .wp-block-post:nth-child(odd) .dr-blog-card-text {
    background-color: var(--wp--preset--color--neutral-light);
}

.dr-blog-list > .wp-block-post:nth-child(even) .dr-blog-card-text {
    background-color: var(--wp--preset--color--neutral);
}

/* Read More button */
.dr-blog-read-more {
    display: inline-block;
    background-color: var(--wp--preset--color--primary);
    color: #fff !important;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.625rem 1.5rem !important;
    border-radius: 56px;
    transition: opacity 0.2s;
}

.dr-blog-read-more:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* Pagination */
.dr-blog-pagination {
    gap: 1rem;
}

.dr-blog-pagination .wp-block-query-pagination-numbers {
    display: flex;
    gap: 0.25rem;
}

.dr-blog-pagination a,
.dr-blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Square box → border-radius:50% renders a perfect circle.
       Padding-based sizing was making this oval (52×44). Lock both
       axes and let the flex centering keep the number centered. */
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    background: none;
    color: var(--wp--preset--color--primary);
    transition: color 0.2s, background 0.2s;
}

.dr-blog-pagination a:hover {
    color: var(--wp--preset--color--accent);
}

/* Active page: subtle teal background */
.dr-blog-pagination span.current {
    background: var(--wp--preset--color--primary);
    color: #fff;
}

/* Prev/Next labels: text-style, not circles. */
.dr-blog-pagination .wp-block-query-pagination-previous,
.dr-blog-pagination .wp-block-query-pagination-next {
    width: auto;
    padding: 0 0.5rem;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

/* =============================================
   Gallery — Project Grid
   ============================================= */

/* Filter toggle button */
.dr-gallery-filter-wrap {
    margin-bottom: 2rem;
}

.dr-gallery-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dr-gallery-filter-toggle:hover {
    opacity: 0.9;
}

.dr-gallery-filter-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

.dr-gallery-filter-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Filter pills row — slide open/closed */
.dr-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.dr-gallery-filters.is-open {
    max-height: 200px;
    opacity: 1;
    margin-top: 1rem;
}

.dr-gallery-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.dr-gallery-filter-pill:hover {
    background: var(--wp--preset--color--neutral);
}

.dr-gallery-filter-pill.is-active {
    background: var(--wp--preset--color--neutral);
}

/* Gallery grid: 3 columns */
.dr-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1.5rem;
}

/* Gallery item */
.dr-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Items beyond the initial page (or filtered out) are hidden via this
   single attribute — both the PHP initial render and the JS load-more
   logic toggle it so there's only one source of truth for visibility. */
.dr-gallery-item[data-hidden="true"] {
    display: none;
}

/* Load More button — sits below the grid, centered. Inherits the
   wp-block-button__link / wp-element-button styles from theme.json so
   it picks up the existing button hover treatment automatically. */
.dr-gallery-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.dr-gallery-load-more {
    background: linear-gradient(180deg, #B7F0FF 0%, #92D4E5 100%);
    color: var(--wp--preset--color--contrast);
    border: 1px solid #92D4E5;
    border-radius: 56px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1.125rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dr-gallery-load-more:hover {
    background: linear-gradient(180deg, #d8f5ff 0%, #b6e3ee 100%);
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dr-gallery-item-img {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 376 / 246;
}

.dr-gallery-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-gallery-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dr-gallery-item-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    margin: 0;
}

.dr-gallery-item-tags {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wp--preset--color--primary);
    margin: 0;
}

/* Lightbox cursor hint */
.dr-lightbox-trigger {
    cursor: zoom-in;
}

/* Lightbox overlay */
.dr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.dr-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.dr-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.dr-lightbox-close,
.dr-lightbox-prev,
.dr-lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.dr-lightbox-close:hover,
.dr-lightbox-prev:hover,
.dr-lightbox-next:hover {
    opacity: 1;
}

.dr-lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.5rem;
}

.dr-lightbox-prev,
.dr-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
}

.dr-lightbox-prev { left: 1.5rem; }
.dr-lightbox-next { right: 1.5rem; }

/* Featured image on single post */
.dr-blog-single .wp-block-post-featured-image img {
    border-radius: 8px;
}

/* Related Posts section */
.dr-related-posts .wp-block-post-featured-image img {
    height: 246px;
    object-fit: cover;
}

/* =============================================
   Responsive
   ============================================= */

@media (min-width: 600px) {
    .dr-archive-grid.wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile-first defaults for about/support/styles --- */
.dr-about-mission-img img {
    border-radius: 0 0 0.5rem 0.5rem;
}

.dr-about-mission {
    flex-direction: column;
    padding: 3rem;
}

.dr-about-mission p {
    font-size: 1.25rem;
}

.dr-core-values-section {
    padding: 3rem !important;
}

.dr-core-values-section::after {
    display: none !important;
}

/* Hide decorators in the editor so they don't steal focus */
.editor-styles-wrapper .dr-core-values-section::after {
    display: none !important;
}

.editor-styles-wrapper .dr-value-bird {
    pointer-events: none;
}

.editor-styles-wrapper .dr-value-card::after {
    display: none;
}

.editor-styles-wrapper .dr-benefits-pelican,
.editor-styles-wrapper .dr-opp-arcs {
    display: none;
}

.editor-styles-wrapper .dr-support-cards {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
}

.editor-styles-wrapper .dr-support-cards img.dr-support-card-pelican {
    height: 180px;
    width: auto;
    pointer-events: none;
}

.dr-styles-section .wp-block-post-template {
    /* 2 per row on mobile (and up) — desktop bumps to 2 too via the
       @media (min-width: 782px) rule below; at very narrow widths the
       2-col layout still works because the cards are flex-column. */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 380px) {
    .dr-styles-section .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

.dr-window-card {
    flex-direction: column;
    overflow: visible;
}

.dr-window-card-photo {
    height: 200px;
    border-radius: 8px 8px 0 0;
}

.dr-window-card-content {
    position: relative;
    padding-top: 3.5rem;
    text-align: left;
    border-radius: 0 0 8px 8px;
}

.dr-window-card-content .dr-window-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px !important;
    height: 56px !important;
    background: var(--wp--preset--color--dark);
    border: 2px solid var(--wp--preset--color--accent);
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-window-card-content .dr-window-icon img {
    object-position: center center;
    max-width: 80%;
    max-height: 80%;
}

@media (min-width: 782px) {
    .dr-about-feature-img img {
        height: 296px;
    }

    /* Removed forced fixed height + center-center crop on desktop — the
       container now drives the size via aspect-ratio (set above). */

    .dr-about-mission-img img {
        border-radius: 0;
        min-height: 320px;
    }

    .dr-about-mission {
        flex-direction: row;
        padding: 4rem;
    }

    .dr-about-mission p {
        font-size: 1.75rem;
    }

    .dr-styles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dr-styles-section .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }

    .dr-window-card {
        flex-direction: row;
        min-height: 340px;
        overflow: hidden;
    }

    .dr-window-card-photo {
        flex: 0 0 50%;
        height: auto;
        border-radius: 0;
    }

    .dr-window-card-content {
        position: static;
        padding-top: 2rem;
        text-align: left;
        align-items: flex-start;
        border-radius: 0;
    }

    .dr-window-card-content .dr-window-icon {
        position: static;
        transform: none;
        width: 105px !important;
        height: 105px !important;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .dr-window-card-content .dr-window-icon img {
        object-position: top left;
    }

    .dr-support-cards {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        margin: 0;
    }

    .dr-support-contact-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }

    .dr-core-values-section {
        padding-right: 20rem !important;
        padding-left: 4.5rem !important;
    }

    .dr-core-values-section::after {
        display: block !important;
    }
}

@media (min-width: 960px) {
    .dr-archive-grid.wp-block-post-template {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   CAREERS PAGE
   ========================================================================== */

/* --- Hero Team Photo --- */
.dr-careers-team-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.dr-careers-team-photo img {
    border-radius: 8px;
}

/* --- Benefits & Culture Card --- */
.dr-careers-benefits {
    background-color: var(--wp--preset--color--neutral);
    border-radius: 8px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    max-width: 776px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.dr-benefits-heading {
    font-family: var(--wp--preset--font-family--script);
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
    color: var(--wp--preset--color--primary);
    margin: 0 0 1.5rem;
}

.dr-benefits-list {
    max-width: 503px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dr-benefit-item h3 {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin: 0 0 0.5rem;
}

.dr-benefit-item p {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--wp--preset--color--contrast);
    margin: 0;
}

.dr-benefits-pelican {
    display: none;
    position: absolute !important;
    bottom: 0;
    right: 0;
    height: auto;
    pointer-events: none;
    margin: 0 !important;
}

/* --- Opportunities Section --- */
.dr-careers-opportunities {
    display: grid;
    background-color: var(--wp--preset--color--primary);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.dr-opp-content {
    padding: 2.5rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
}

.dr-opp-heading {
    font-family: var(--wp--preset--font-family--script);
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
    color: var(--wp--preset--color--accent-light);
    margin: 0;
}

.dr-opp-description {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.dr-opp-roles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dr-opp-roles li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.dr-opp-roles li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23085c61' d='M9.131 6.75H0v-1.5h9.131l-4.2-4.2L6 0l6 6-6 6-1.069-1.05z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.5rem;
}

.dr-careers-opportunities > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.dr-opp-photo {
    margin: 0 !important;
    overflow: hidden;
}

.dr-opp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-opp-arcs {
    position: absolute !important;
    bottom: -2px;
    left: 50%;
    z-index: 2;
    width: 120px !important;
    height: auto !important;
    pointer-events: none;
}

.dr-opp-arcs img {
    width: 100%;
    height: auto;
}

/* --- Responsive: Careers --- */
/* --- Careers: mobile-first defaults --- */
.dr-opp-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dr-careers-opportunities {
    grid-template-columns: 1fr;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dr-opp-photo {
    position: relative;
    width: 100%;
    min-height: 300px;
}

.dr-opp-arcs {
    display: none;
}

.dr-benefits-pelican {
    width: 140px;
}

@media (min-width: 782px) {
    .dr-opp-wrapper {
        padding-left: var(--wp--preset--spacing--medium) !important;
        padding-right: var(--wp--preset--spacing--medium) !important;
    }

    .dr-careers-opportunities {
        grid-template-columns: 1fr 1fr;
        border-radius: 8px !important;
    }

    .dr-opp-content {
        padding: 3rem 2rem 5rem;
    }

    .dr-opp-photo {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        min-height: auto;
    }

    .dr-opp-arcs {
        display: block;
    }

    .dr-opp-description {
        max-width: none;
    }

    .dr-benefits-pelican {
        display: block;
        width: 200px;
    }
}

@media (min-width: 1024px) {
    .dr-opp-content {
        padding: 5rem 3rem 7rem 4.5rem;
    }

    .dr-opp-description {
        max-width: 300px;
    }
}

/* --- Window Showcase Block --- */
.dr-window-showcase {
    position: relative;
    margin: 0 auto;
}

.dr-window-showcase__media {
    position: absolute;
    top: 32%;
    left: 18%;
    width: 64%;
    height: 63%;
    z-index: 0;
    overflow: hidden;
}

.dr-window-showcase__media img,
.dr-window-showcase__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-window-showcase__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* --- Section Heading Block --- */
.dr-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dr-section-heading__eyebrow {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

.dr-section-heading__title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 -0.25rem;
}

h1.dr-section-heading__title {
    font-size: 6.25rem;
}

.dr-section-heading__underline {
    width: 121px;
    height: auto;
    display: block;
}

.dr-section-heading[style*="text-align:center"] {
    align-items: center;
}

.dr-section-heading[style*="text-align:right"] {
    align-items: flex-end;
}

/* Free Estimate modal */
/* Guide-modal custom HTML form. Inherits the modal chrome from
   .dr-estimate-modal; styles below cover only the inner form layout. */
.dr-guide-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dr-guide-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dr-guide-form__field label {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    letter-spacing: 0.02em;
}

.dr-guide-form__optional {
    font-weight: 400;
    color: var(--wp--preset--color--muted);
    margin-left: 0.25rem;
}

.dr-guide-form__required {
    color: var(--wp--preset--color--accent);
    margin-left: 0.15rem;
}

/* Two-column row for First Name / Last Name on wider screens. */
.dr-guide-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 540px) {
    .dr-guide-form__row {
        grid-template-columns: 1fr;
    }
}

.dr-guide-form__field input {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--wp--preset--color--outline);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--wp--preset--color--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dr-guide-form__field input:focus,
.dr-guide-form__field select:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px rgba(8, 92, 97, 0.15);
}

.dr-guide-form__field select {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--wp--preset--color--outline);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    appearance: none;
    /* Caret SVG inlined as the dropdown indicator. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23085C61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dr-promo-form__success {
    text-align: center;
    padding: 1.5rem 0;
}

.dr-promo-form__success h3 {
    font-family: var(--wp--preset--font-family--script);
    color: var(--wp--preset--color--primary);
    font-size: 2.25rem;
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.dr-promo-form__success p {
    margin: 0;
    color: var(--wp--preset--color--contrast);
    font-size: 1rem;
    line-height: 1.5;
}

/* ============================================================
   Gravity Forms — brand restyle
   ============================================================
   Overrides the default Orbital theme so any Gravity Form on the
   site (blog post sidebars, embedded forms, etc.) matches the
   custom HTML forms in our modals (.dr-guide-form*). Uses
   !important in places because Gravity Forms inlines its own
   CSS with high specificity. */

.gform_wrapper {
    --gf-color-primary: var(--wp--preset--color--primary);
    --gf-color-primary-rgb: 8, 92, 97;
}

/* Two-column grid for half-width fields, single column for full-width.
   The doubled .gform_fields.gform_fields selector (specificity 0,3,0) raises this
   above Gravity Forms' own @container grid, which otherwise wins on wide forms and
   renders its 12-col tracks unevenly (~70/30). minmax(0,1fr) keeps columns equal. */
.gform_wrapper .gform_fields.gform_fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.gform_wrapper .gform_fields.gform_fields > .gfield {
    grid-column: span 1 !important;
}

.gform_wrapper .gform_fields.gform_fields > .gfield--width-full,
.gform_wrapper .gform_fields.gform_fields > .gfield--type-html,
.gform_wrapper .gform_fields.gform_fields > .gfield--type-captcha,
.gform_wrapper .gform_fields.gform_fields > .gfield--type-handlfree_gclid,
.gform_wrapper .gform_fields.gform_fields > .gfield--type-section {
    grid-column: 1 / -1 !important;
}

/* Hide GF's wordy "(Required)" suffix; keep the asterisk via ::after. */
.gform_wrapper .gfield_required_text {
    display: none !important;
}

.gform_wrapper .gfield_required {
    color: var(--wp--preset--color--accent);
    margin-left: 0.15rem;
}

.gform_wrapper .gfield_label {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
    display: block;
}

/* Inputs, textarea, and select — all share the same brand chrome. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid var(--wp--preset--color--outline) !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    background-color: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--contrast) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--wp--preset--color--muted);
    opacity: 1;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 92, 97, 0.15) !important;
}

/* Native select caret replaced with the brand-colored one used in
   our HTML forms. */
.gform_wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23085C61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

/* Submit button — brand yellow pill, matching the HTML-form button. */
.gform_wrapper .gform_footer {
    margin-top: 1rem !important;
    padding-top: 0 !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"].gform_button {
    margin-top: 0 !important;
    padding: 0.95rem 2rem !important;
    border: 1px solid #D9A83F !important;
    border-radius: 56px !important;
    background: linear-gradient(180deg, #FFD987 0%, #F2BC47 100%) !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--wp--preset--font-family--secondary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    width: auto !important;
}

.gform_wrapper .gform_button:hover {
    background: linear-gradient(180deg, #ffefcd 0%, #ffd478 100%) !important;
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Validation error states */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: #c00 !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: #c00;
}

/* Mobile: collapse to single column */
@media (max-width: 600px) {
    .gform_wrapper .gform_fields.gform_fields {
        grid-template-columns: 1fr !important;
    }
    .gform_wrapper .gform_fields.gform_fields > .gfield {
        grid-column: 1 / -1 !important;
    }
}

.dr-guide-form__submit {
    margin-top: 0.5rem;
    padding: 0.95rem 2rem;
    border: 1px solid #D9A83F;
    border-radius: 56px;
    background: linear-gradient(180deg, #FFD987 0%, #F2BC47 100%);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dr-guide-form__submit:hover {
    background: linear-gradient(180deg, #ffefcd 0%, #ffd478 100%);
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dr-guide-form__privacy {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--muted);
    line-height: 1.4;
}

.dr-guide-form__success {
    text-align: center;
    padding: 1.5rem 0;
}

.dr-guide-form__success h3 {
    font-family: var(--wp--preset--font-family--script);
    color: var(--wp--preset--color--primary);
    font-size: 2.25rem;
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.dr-guide-form__success p {
    margin: 0;
    color: var(--wp--preset--color--contrast);
    font-size: 1rem;
    line-height: 1.5;
}

/* Backdrop for the (now non-modal) estimate/guide/promo dialogs. Opened via
   dialog.show() (not showModal()) so body-appended overlays like the reCAPTCHA
   image challenge aren't trapped behind the browser top layer — so we render
   our own dim layer here instead of relying on ::backdrop. */
.dr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 59, 74, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.dr-modal-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}
html.dr-modal-open {
    overflow: hidden;
}

.dr-estimate-modal {
    /* Center in the viewport. The native <dialog> modal centering
       (margin:auto + inset:0 + height:fit-content) was being defeated by an
       upstream reset, pinning the dialog top-left — so set it explicitly. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: calc(100% - 2rem);
    overflow: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    max-width: 900px;
    width: calc(100% - 2rem);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    background: #fff;
    color: var(--wp--preset--color--contrast);
    /* Above site chrome (header 9999, lightbox 99999) but BELOW reCAPTCHA's
       challenge overlay (z-index 2000000000), so the challenge renders on top.
       Dialog is opened non-modally (show()) — see assets/js/estimate-modal.js. */
    z-index: 100001;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease,
        overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.dr-estimate-modal[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    .dr-estimate-modal[open] {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

.dr-estimate-modal[open].dr-estimate-modal--closing {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.dr-estimate-modal::backdrop {
    background: rgba(3, 59, 74, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease,
        overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.dr-estimate-modal[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .dr-estimate-modal[open]::backdrop {
        opacity: 0;
    }
}

.dr-estimate-modal[open].dr-estimate-modal--closing::backdrop {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dr-estimate-modal,
    .dr-estimate-modal::backdrop {
        transition: none;
    }
}

.dr-estimate-modal__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
    position: relative;
}

@media (min-width: 768px) {
    .dr-estimate-modal__inner {
        grid-template-columns: 280px 1fr;
        gap: 2.5rem;
        padding: 3rem 2.5rem 2.5rem;
    }
}

.dr-estimate-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease;
}

.dr-estimate-modal__close:hover {
    transform: rotate(90deg);
}

.dr-estimate-modal__heading {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0 0 0.75rem;
    line-height: 1.1;
}

.dr-estimate-modal__sub {
    font-size: 0.95rem;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.dr-estimate-modal__phone {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}

.dr-estimate-modal__phone:hover {
    text-decoration: underline;
}

.dr-estimate-modal__form .gform_wrapper {
    margin: 0;
}

/* Form fields — match target: filled gray, rounded, generous padding */
.dr-estimate-modal .gfield input[type="text"],
.dr-estimate-modal .gfield input[type="email"],
.dr-estimate-modal .gfield input[type="tel"],
.dr-estimate-modal .gfield input[type="url"],
.dr-estimate-modal .gfield input[type="number"],
.dr-estimate-modal .gfield textarea {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    width: 100% !important;
    box-shadow: none !important;
    color: var(--wp--preset--color--contrast);
}

.dr-estimate-modal .gfield input:focus,
.dr-estimate-modal .gfield textarea:focus {
    outline: 2px solid var(--wp--preset--color--primary) !important;
    outline-offset: -1px;
    border-color: transparent !important;
}

/* Hide the visible labels (target shows placeholders only) */
.dr-estimate-modal .gfield_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Even 2-column grid for half-width fields — Orbital's 12-col grid renders
   uneven inside this modal, so force exact 50/50. Tighten the gaps too. */
.dr-estimate-modal .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.75rem !important;
    column-gap: 1rem !important;
}

.dr-estimate-modal .gform_fields > .gfield {
    grid-column: 1 / -1; /* full-width default (and hidden gclid/honeypot) */
}

.dr-estimate-modal .gform_fields > .gfield--width-half {
    grid-column: span 1; /* First/Last and Email/Phone share a row evenly */
}

.dr-estimate-modal .gfield input,
.dr-estimate-modal .gfield textarea,
.dr-estimate-modal .gfield select {
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .dr-estimate-modal .gform_fields {
        grid-template-columns: 1fr;
    }
    .dr-estimate-modal .gform_fields > .gfield--width-half {
        grid-column: 1 / -1;
    }
}

.dr-estimate-modal .gfield {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tighten disclaimer / html-field line-height */
.dr-estimate-modal .gfield--type-html,
.dr-estimate-modal .gfield_html,
.dr-estimate-modal .gfield_html p,
.dr-estimate-modal .gfield_description {
    line-height: 1.4 !important;
    font-size: 0.85rem;
}

/* Submit button — theme yellow pill, left-aligned */
.dr-estimate-modal .gform_footer {
    justify-content: flex-start !important;
    padding-top: 0.5rem !important;
}

.dr-estimate-modal .gform_footer input[type="submit"],
.dr-estimate-modal .gform_button {
    background: linear-gradient(180deg, #f2bc47 0%, #d9a83f 100%) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 1px solid #d9a83f !important;
    border-radius: 56px !important;
    padding: 1rem 3rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dr-estimate-modal .gform_footer input[type="submit"]:hover,
.dr-estimate-modal .gform_button:hover {
    background: linear-gradient(180deg, #ffefcd 0%, #ffd478 100%) !important;
    box-shadow: 0 6px 16px rgba(217, 168, 63, 0.35) !important;
    transform: translateY(-1px);
}

/* Harden the close button against GF's button resets */
button.dr-estimate-modal__close,
button.dr-estimate-modal__close:hover,
button.dr-estimate-modal__close:focus,
button.dr-estimate-modal__close:focus-visible,
button.dr-estimate-modal__close:active {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 34px;
    height: 34px;
    min-width: 0;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none !important;
    box-shadow: none;
    z-index: 2;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.dr-estimate-modal__close:hover {
    transform: rotate(90deg);
}

button.dr-estimate-modal__close:focus,
button.dr-estimate-modal__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(242, 188, 71, 0.45);
}


/* =============================================
   Home Hero v2 — promo banner + dark cover
   ============================================= */

/* --- Promo banner strip --- */
.dr-promo-banner {
    padding: 0.6rem 1rem !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--wp--preset--color--dark);
    gap: 0.75rem;
    margin: 0 !important;
}

.dr-promo-banner p {
    margin: 0 !important;
    line-height: 1.3;
}

.dr-promo-banner__tag {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--accent);
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dr-promo-banner__link a {
    color: var(--wp--preset--color--dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Hero cover --- */
.dr-home-hero-v2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: var(--wp--preset--color--dark);
    overflow: hidden;
    position: relative;
}

.dr-home-hero-v2 .wp-block-cover__image-background {
    z-index: 1;
    animation: drKenBurns 22s ease-in-out infinite alternate;
    transform-origin: center;
}

/* Custom overlay — a gradient instead of wp:cover's solid dim */
.dr-home-hero-v2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 59, 74, 0.65) 0%, rgba(3, 59, 74, 0.72) 45%, rgba(3, 59, 74, 0.92) 100%);
    z-index: 2;
    pointer-events: none;
}

.dr-home-hero-v2 .wp-block-cover__inner-container {
    position: relative;
    z-index: 3 !important;
    width: 100%;
}

.dr-home-hero-v2__inner {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem) !important;
    text-align: center;
    align-items: center !important;
}

/* --- Floating promo card --- */
.dr-hero-promo {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-light) 100%);
    color: var(--wp--preset--color--dark);
    padding: 1.25rem 2.5rem;
    border-radius: 1rem;
    margin: 0 auto 2rem;
    box-shadow: 0 8px 30px rgba(242, 188, 71, 0.3);
}

.dr-hero-promo__pelican {
    height: 80px;
    width: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    animation: drPelicanBob 3.5s ease-in-out infinite;
    animation-delay: 1.3s;
    transform-origin: center bottom;
}

.dr-hero-promo__text {
    text-align: left;
}

.dr-hero-promo__label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin-bottom: 0.15rem;
}

.dr-hero-promo__offer {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1;
}

.dr-hero-promo__detail {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* --- Title + description --- */
.dr-home-hero-v2__title {
    font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
    max-width: 700px;
    margin: 0 auto 1.25rem !important;
}

.dr-home-hero-v2__title em {
    font-style: normal;
    color: var(--wp--preset--color--primary-light);
}

.dr-home-hero-v2__desc {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 12px rgba(3, 59, 74, 0.6);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 2.5rem !important;
}

/* --- Buttons --- */
.dr-home-hero-v2__actions {
    gap: 1rem;
    margin-bottom: 3rem;
}

.dr-btn-accent .wp-block-button__link,
.dr-btn-phone .wp-block-button__link {
    padding: 1rem 2rem !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
}

.dr-btn-accent .wp-block-button__link {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--dark) !important;
    animation: drCtaGlow 2.8s ease-out infinite;
    animation-delay: 1.8s;
}

.dr-btn-accent .wp-block-button__link::after {
    content: '→';
    display: inline-block;
    margin-left: 0.35rem;
    transition: transform 0.25s ease;
    font-weight: 900;
}

.dr-btn-accent .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

.dr-btn-phone .wp-block-button__link {
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--surface) !important;
}

.dr-btn-phone .wp-block-button__link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.55.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.24 1.01l-2.2 2.23z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.dr-btn-accent .wp-block-button__link:hover,
.dr-btn-phone .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* --- Trust stats row --- */
.dr-trust-stats {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dr-trust-stat {
    text-align: center;
    color: var(--wp--preset--color--surface);
}

.dr-trust-stat__number {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--wp--preset--color--accent);
    line-height: 1;
}

.dr-trust-stat__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    margin-top: 0.25rem;
}

.dr-trust-stat__divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    display: none;
}

/* --- Entrance animations --- */
.dr-hero-promo,
.dr-home-hero-v2__title,
.dr-home-hero-v2__desc,
.dr-home-hero-v2__actions,
.dr-trust-stats {
    opacity: 0;
    animation: drFadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.dr-hero-promo            { animation: drPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; }
.dr-home-hero-v2__title   { animation-delay: 0.9s; }
.dr-home-hero-v2__desc    { animation-delay: 1.05s; }
.dr-home-hero-v2__actions { animation-delay: 1.2s; }
.dr-trust-stats           { animation-delay: 1.35s; }

/* --- Keyframes --- */
@keyframes drFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes drPopIn {
    0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
    70%  { transform: scale(1.04) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes drKenBurns {
    0%   { transform: scale(1.1) translate(-0.5%, 0.5%); }
    100% { transform: scale(1.0) translate(0.5%, -0.5%); }
}

@keyframes drPelicanBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-6px) rotate(3deg); }
}

@keyframes drCtaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 188, 71, 0.45); }
    70%      { box-shadow: 0 0 0 14px rgba(242, 188, 71, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dr-home-hero-v2 *,
    .dr-home-hero-v2 *::before,
    .dr-home-hero-v2 *::after,
    .dr-promo-banner *,
    .dr-hero-promo,
    .dr-hero-promo__pelican {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Desktop enhancements --- */
@media (min-width: 769px) {
    .dr-trust-stats {
        gap: 2.5rem;
    }

    .dr-trust-stat__divider {
        display: block;
    }
}

@media (max-width: 768px) {
    .dr-hero-promo {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }

    .dr-hero-promo__text {
        text-align: center;
    }

    .dr-promo-banner {
        font-size: 0.7rem;
    }
}

/* =============================================================
   /ntbo NTBO Lookup page
   ============================================================= */
/* Plain-text link list — no bullets, just one per line. */
.dr-ntbo-list,
.dr-ntbo-list li {
    list-style: none !important;
}
.dr-ntbo-list {
    padding-left: 0;
    margin: 0;
}
.dr-ntbo-list li {
    margin: 0;
}
.dr-ntbo-list a {
    font-weight: 500;
}

/* =============================================================
   Landing Pages — Shared Chrome
   ============================================================= */

.dr-lp-site-header,
.dr-lp-site-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dr-lp-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.dr-lp-main > .wp-block-post-content {
    padding: 0 !important;
}

.dr-lp-main > .wp-block-post-content > .alignfull:first-child {
    margin-top: 0 !important;
}

.dr-lp-main > .wp-block-post-content > .alignfull:last-child {
    margin-bottom: 0 !important;
}

.dr-lp-body,
.dr-lp-body.has-global-padding {
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--wp--preset--color--base);
}

/* Trim cover minHeight on mobile */
@media (max-width: 781px) {
    .dr-lp-funfact.wp-block-cover {
        min-height: 240px !important;
    }
    .dr-lp-cta-final.wp-block-cover {
        min-height: 320px !important;
    }
}

/* LP section vertical rhythm:
   - Distinct full-bleed sections (hero / funfact / cta-final) keep their own
     inline padding for content breathing inside the bg, and have 0 vertical
     margin so the bg butts to adjacent sections.
   - Every other alignfull section uses 0 vertical padding and 5.5rem vertical
     margin so adjacent sections collapse to a single 5.5rem gap. */
.dr-lp-body > .alignfull:not(.dr-lp-hero):not(.dr-lp-funfact):not(.dr-lp-cta-final):not(.dr-lp-quote-trust):not(.dr-lp-quote-help):not(.dr-lp-quote-windows) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
}

.dr-lp-body > .alignfull.dr-lp-hero,
.dr-lp-body > .alignfull.dr-lp-funfact,
.dr-lp-body > .alignfull.dr-lp-cta-final,
.dr-lp-body > .alignfull.dr-lp-quote-trust,
.dr-lp-body > .alignfull.dr-lp-quote-help,
.dr-lp-body > .alignfull.dr-lp-quote-windows {
    margin-top: 0;
    margin-bottom: 0;
}

/* Mobile: widen the LP page gutters. Patterns use `medium` spacing preset for
   left/right padding throughout; redefining the variable scope-locally bumps
   all 14 sections in one rule. */
@media (max-width: 781px) {
    .dr-lp-body {
        --wp--preset--spacing--medium: 1.5rem;
    }

    /* Tighter vertical rhythm between sections on mobile */
    .dr-lp-body > .alignfull:not(.dr-lp-hero):not(.dr-lp-funfact):not(.dr-lp-cta-final):not(.dr-lp-quote-trust):not(.dr-lp-quote-help):not(.dr-lp-quote-windows) {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Landing Header -------------------------------------------- */

.dr-lp-header a {
    text-decoration: none;
}

.dr-lp-header > .wp-block-group.alignwide {
    gap: 1rem;
}

.dr-lp-header__logo {
    flex: 0 0 auto;
}

.dr-lp-header__logo img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 140px;
}

.dr-lp-header__title {
    flex: 1 1 auto;
    text-align: center;
}

.dr-lp-header__title a:hover {
    opacity: 0.85;
}

.dr-lp-header__cta {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .dr-lp-header > .wp-block-group.alignwide {
        flex-wrap: nowrap;
        gap: 0.5rem;
        justify-content: space-between;
        align-items: center;
    }

    .dr-lp-header__logo {
        order: 1;
        flex: 0 0 auto;
    }

    .dr-lp-header__title {
        order: 2;
        flex: 1 1 auto;
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        text-align: center;
        padding: 0 0.25rem;
    }

    .dr-lp-header > .wp-block-group > .wp-block-buttons {
        order: 3;
        flex: 0 0 auto;
    }

    .dr-lp-header__cta .wp-block-button__link {
        font-size: 0.68rem !important;
        padding: 0.45rem 0.9rem !important;
    }

    .dr-lp-header__logo img {
        height: 32px !important;
        width: auto !important;
        max-width: 85px;
    }
}

/* Landing Footer -------------------------------------------- */

.dr-lp-footer__logo img {
    width: clamp(180px, 20vw, 240px);
    height: auto;
}

.dr-lp-footer__meta a {
    color: inherit;
    text-decoration: underline;
}

/* =============================================================
   Landing — Energy Efficiency Guide
   ============================================================= */

/* Hero ----------------------------------------------------- */

.dr-lp-hero {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background-color: var(--wp--preset--color--primary) !important;
    min-height: 560px;
}

/* Soft base-colored arc at the bottom — bezier curve, 24px peak.
   bottom: -2px bleeds the arc slightly past the hero's bottom edge to
   prevent a sub-pixel hairline at certain viewport widths. */
.dr-lp-hero::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'><path d='M0 24C0 24 438.823 0 720 0C1001.18 0 1440 24 1440 24H0Z' fill='%23EFEBEB'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 4;
    pointer-events: none;
}

/* No position:relative here — absolute children (.__media, .__book) should
   resolve against .dr-lp-hero (full viewport width) so the image can reach
   the viewport's right edge on screens wider than 1440px. */
.dr-lp-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 560px;
    display: flex;
    align-items: stretch;
}

.dr-lp-hero__content {
    flex: 1 1 40%;
    padding: 4rem var(--wp--preset--spacing--medium) 4rem var(--wp--preset--spacing--medium);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    max-width: min(40%, 600px);
}

.dr-lp-hero__title {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--wp--preset--color--surface);
}

.dr-lp-hero__subtitle {
    margin: 0 0 2rem;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--accent-light);
}

.dr-lp-hero__content .dr-lp-cta-btn,
.dr-lp-hero__content a.dr-lp-cta-btn {
    align-self: flex-start;
    display: inline-block;
    padding: 1.15rem 2.5rem;
    border-radius: 56px;
    background: var(--wp--preset--gradient--gradient-yellow);
    color: var(--wp--preset--color--contrast);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.dr-lp-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    z-index: 1;
    overflow: hidden;
}

.dr-lp-hero__chart {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Book sits OUTSIDE the media container so it can straddle the blue/image
   boundary. Media is 44% of viewport anchored to the right, so the
   teal/image boundary is at left=56%. Book centers slightly inside it. */
.dr-lp-hero__book {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

@media (max-width: 781px) {
    .dr-lp-hero {
        min-height: 0;
        background: var(--wp--preset--color--primary) !important;
    }

    .dr-lp-hero__inner {
        flex-direction: column;
        min-height: 0;
    }

    /* Media band on top: chart only, full width */
    .dr-lp-hero__media {
        position: relative;
        width: 100%;
        height: 180px;
        order: 1;
    }

    .dr-lp-hero__chart {
        position: absolute;
        right: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Hide the full-bleed book on mobile; a smaller one goes inside content */
    .dr-lp-hero__book {
        display: none;
    }

    /* Content band below: book icon left, text right */
    .dr-lp-hero__content {
        flex: 1 1 auto;
        padding: 2rem var(--wp--preset--spacing--medium);
        max-width: none;
        order: 2;
        text-align: center;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "book   title"
            "sub    sub"
            "btn    btn";
        column-gap: 1rem;
        row-gap: 0.75rem;
        align-items: center;
    }

    .dr-lp-hero__content::before {
        content: "";
        grid-area: book;
        width: 100px;
        height: 130px;
        background-image: url("assets/images/hero-energy-guide-book.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
    }

    .dr-lp-hero__title {
        grid-area: title;
        margin: 0;
        text-align: left;
        font-size: 1.375rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .dr-lp-hero__subtitle {
        grid-area: sub;
        text-align: center;
        margin: 0;
        font-size: 1.3125rem;
        font-weight: 600;
        line-height: normal;
    }

    .dr-lp-hero__content .dr-lp-cta-btn,
    .dr-lp-hero__content a.dr-lp-cta-btn {
        grid-area: btn;
        justify-self: center;
        align-self: center;
        padding: 0.75rem 1.25rem;
        border: 1px solid #D9A83F;
    }
}

/* Save Money ------------------------------------------------ */

.dr-lp-save__illustration img {
    max-width: 380px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.dr-lp-save .wp-block-column:last-child {
    max-width: 520px;
}

.dr-lp-save h2 {
    max-width: 14ch;
}

@media (max-width: 781px) {
    .dr-lp-save .wp-block-column {
        flex-basis: 100% !important;
    }

    .dr-lp-save__illustration img {
        max-width: 240px;
        margin: 0 auto;
    }

    .dr-lp-save h2 {
        font-size: 1.3125rem !important;
    }
}

/* Beige Callout --------------------------------------------- */

.dr-lp-callout {
    position: relative;
    overflow: hidden;
}

.dr-lp-callout::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 115px;
    height: 168px;
    background-image: url("assets/images/callout-arches.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    pointer-events: none;
}

.dr-lp-callout__text {
    max-width: 820px;
}

.dr-lp-callout__cta {
    margin-top: 0.25rem;
}

@media (max-width: 781px) {
    .dr-lp-callout__text {
        max-width: none;
        font-size: 0.875rem !important;
    }

    .dr-lp-callout::after {
        width: 55px;
        height: 80px;
    }
}

/* Fun Fact -------------------------------------------------- */

/* Fun Fact: solid black background with the bg image as a ::before layer.
   The image asset already has the darkening baked in, so no extra opacity. */
.dr-lp-funfact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.dr-lp-funfact::before {
    content: "";
    position: absolute;
    /* Negative inset so the blur fade-out is clipped outside the visible
       section — prevents soft/dark edges at the section boundary. */
    inset: -20px;
    background-image: url("assets/images/funfact-bg.png");
    background-size: cover;
    background-position: top;
    filter: blur(8px);
    z-index: 0;
    pointer-events: none;
}

.dr-lp-funfact > * {
    position: relative;
    z-index: 1;
}

.dr-lp-funfact__tag {
    width: max-content;
    margin: 0 auto !important;
}

.dr-lp-funfact__stat .has-accent-color {
    color: var(--wp--preset--color--accent);
}

.dr-lp-funfact__stat {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* What You'll Learn — Bento --------------------------------- */

.dr-lp-bento {
    margin: 0 auto;
    max-width: 960px;
}

.dr-lp-bento .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* Card uses 0 horizontal padding so the image can bleed to the edges.
   Text regions below the image re-introduce their own padding. */
.dr-lp-bento__card {
    height: 100%;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dr-lp-bento__card--teal {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
}

.dr-lp-bento__card--yellow {
    background-color: var(--wp--preset--color--accent-light);
    color: var(--wp--preset--color--contrast);
}

.dr-lp-bento__card--teal .dr-lp-bento__title,
.dr-lp-bento__card--teal .dr-lp-bento__list {
    color: var(--wp--preset--color--accent-light);
}

.dr-lp-bento__card--yellow .dr-lp-bento__title {
    color: var(--wp--preset--color--primary);
}

.dr-lp-bento__title {
    margin: 0 auto;
    padding: 2.25rem 2rem 1.75rem;
    max-width: 16ch;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: inherit;
}

/* Image meets card's left/right edges (no horizontal padding) */
.dr-lp-bento__image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0;
    display: block;
    margin: 0;
}

.dr-lp-bento__list {
    list-style: none;
    padding: 2rem 4rem 3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.3;
}

.dr-lp-bento__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dr-lp-bento__arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
}

.dr-lp-learn-wrap .dr-lp-learn__intro {
    max-width: 620px;
    margin: 0 auto;
}

@media (max-width: 781px) {
    .dr-lp-bento .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* 5 Quick Tips --------------------------------------------- */

.dr-lp-tips {
    list-style: none;
    padding: 1.5rem;
    margin: 1.5rem auto 0;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border: 1px solid var(--wp--preset--color--secondary);
    border-radius: 8px;
}

.dr-lp-tip {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    border: none;
}

.dr-lp-tip__icon {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dr-lp-tip__icon svg {
    display: block;
    width: 36px;
    height: 36px;
}

.dr-lp-tip__text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--wp--preset--color--contrast);
}

/* Content Rows (Design / Heat & Cool) ----------------------- */

.dr-lp-content-row {
    overflow: hidden;
}

.dr-lp-content-row .wp-block-columns {
    gap: 0 !important;
}

.dr-lp-content-row .wp-block-column:first-child {
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
}

.dr-lp-content-row__image {
    margin: 0 !important;
    flex: 1;
    overflow: hidden;
    min-height: 280px;
}

.dr-lp-content-row__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-lp-content-row h3 {
    max-width: 16ch;
}

@media (max-width: 781px) {
    .dr-lp-content-row .wp-block-column {
        flex-basis: 100% !important;
    }

    .dr-lp-content-row__image {
        min-height: 0;
        height: 147px;
    }

    .dr-lp-content-row h3 {
        font-size: 1.125rem !important;
    }
}

/* Final CTA ------------------------------------------------- */

.dr-lp-cta-final {
    position: relative;
    overflow: hidden;
}

.dr-lp-cta-final__image img {
    max-width: 540px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.dr-lp-cta-final .wp-block-column:last-child {
    max-width: 520px;
}

@media (max-width: 781px) {
    .dr-lp-cta-final .wp-block-column {
        flex-basis: 100% !important;
    }

    .dr-lp-cta-final__image img {
        max-width: 500px;
    }

    /* Center text + button column on mobile (matches Figma mobile layout) */
    .dr-lp-cta-final .wp-block-column:last-child {
        max-width: none;
    }

    .dr-lp-cta-final .wp-block-column:last-child h2,
    .dr-lp-cta-final .wp-block-column:last-child p {
        text-align: center !important;
    }

    /* Mobile subtitle: 21px (overrides inline 28px) */
    .dr-lp-cta-final .wp-block-column:last-child p {
        font-size: 1.3125rem !important;
    }

    /* Mobile button: 16px / weight 700 / padding 12px 20px */
    .dr-lp-cta-final .wp-block-button__link {
        font-size: 1rem !important;
        font-weight: 700 !important;
        padding: 0.75rem 1.25rem !important;
    }

    .dr-lp-cta-final .wp-block-buttons {
        justify-content: center !important;
    }
}

/* ============================================================
   LP — Quote / Lead Capture (/free-estimate/)
   ============================================================ */

/* Hero ------------------------------------------------------ */

.dr-lp-quote-hero.wp-block-cover {
    align-items: center;
    background-position: center right;
    position: relative;
    overflow: visible;
}

/* Full-height tonal gradient per Figma spec: transparent at top,
   60% black at mid, dark teal #032C2E at bottom. Sits behind the
   hero content so the form card pops above it. */
/* Gradient sits ABOVE the cover image (z=0) but BELOW the inner-container
   (z=1, locked by WP core with 0,6,1 specificity we can't easily beat).
   z-index: 0 + later source order than the image puts the gradient on top
   of the photo while staying behind all hero content (heading, badges,
   form card). */
.dr-lp-quote-hero.wp-block-cover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.70) 64.9%,
        #032C2E 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Stretch the cover's inner-container to fill the cover's full min-height.
   Cover is `display:flex; align-items:center` by default — overriding
   `align-self` to `stretch` makes the container span 0→640px instead of
   centering at content height (~396px). The columns wrapper inside becomes
   a flex row that stretches its columns to full height too. */
.dr-lp-quote-hero .wp-block-cover__inner-container {
    width: 100%;
    max-width: 1240px;
    position: relative;
    z-index: 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* Columns wrapper grows to fill the stretched inner-container so the
   form-col can be a true full-height flex child. `flex: 1` makes it
   span from inner-container top (cover top + cover top-padding) to
   inner-container bottom (cover bottom - cover bottom-padding). */
.dr-lp-quote-hero__cols.wp-block-columns {
    align-items: stretch;
    gap: 2.25rem;
    flex: 1;
}

/* Copy column stays vertically-centered visually within the stretched row. */
.dr-lp-quote-hero__copy.wp-block-column.is-vertically-aligned-center {
    align-self: center;
}

/* Form column stretches to full hero height and bottom-aligns the card.
   `align-self: stretch` overrides `is-vertically-aligned-center`'s
   `align-self: center` (specificity 0,3,0 beats 0,2,0). The card is then
   pushed below the hero floor with `translateY` for the visual overhang
   into the trust banner — `transform` doesn't disturb sibling layout, so
   the card's negative `margin-bottom` still pulls the trust banner up
   to absorb the overhang. */
.dr-lp-quote-hero__form-col.wp-block-column {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 4;
}

.dr-lp-quote-hero__form-col .dr-lp-quote-form-card {
    /* Negative margin-bottom does double duty here:
       1. Pulls the trust banner up by 6rem (banner has padding-top:
          calc(2.25rem + 6rem) to absorb this and still leave 2.25rem
          of breathing room above its content).
       2. Inside the flex-column form-col with `justify-content: flex-end`,
          the negative margin shrinks the card's effective flex size, so
          its bottom edge sits 6rem BELOW the form-col bottom (= cover
          floor) — giving the desired visual overhang into the trust
          banner. No transform needed.
       Both physical and logical properties so we override WP core's
       `:where(.is-layout-flow) > :last-child { margin-block-end: 0 }`. */
    margin-bottom: -6rem;
    margin-block-end: -6rem;
}

.dr-lp-quote-hero__copy {
    max-width: 760px;
}

.dr-lp-quote-hero__title {
    text-wrap: balance;
}

.dr-lp-quote-hero__sub {
    max-width: 404px;
}

.dr-lp-quote-hero__badges {
    gap: 0.875rem;
    align-items: center;
    margin: 0;
}

.dr-lp-quote-hero__badge {
    margin: 0 !important;
}

.dr-lp-quote-hero__badge img {
    display: block;
    height: 42px;
    width: auto !important;
}

/* Form card ------------------------------------------------- */

.dr-lp-quote-form-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.dr-lp-quote-form-card .gform_wrapper {
    margin: 0;
}

.dr-lp-quote-form-card .gform_wrapper .gform_fields {
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
}

/* First/Last side-by-side via gf-half class */
.dr-lp-quote-form-card .gform_wrapper .gfield.gf-half {
    grid-column: span 6;
}

/* Field labels — visible above each input, per design */
.dr-lp-quote-form-card .gform_wrapper .gfield_label {
    display: block;
    color: #000;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.375rem;
    padding: 0;
}

.dr-lp-quote-form-card .gform_wrapper .gfield_required {
    display: none;
}

/* Hide the outer "Address" legend — sub-input labels (Street Address,
   City, State, ZIP) provide enough labeling per the design. */
.dr-lp-quote-form-card .gform_wrapper .gfield--type-address > legend.gfield_label {
    display: none;
}

.dr-lp-quote-form-card .gform_wrapper input[type="text"],
.dr-lp-quote-form-card .gform_wrapper input[type="email"],
.dr-lp-quote-form-card .gform_wrapper input[type="tel"],
.dr-lp-quote-form-card .gform_wrapper select {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    color: var(--wp--preset--color--contrast);
    appearance: none;
    -webkit-appearance: none;
}

.dr-lp-quote-form-card .gform_wrapper select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
    padding-right: 2.25rem;
}

.dr-lp-quote-form-card .gform_wrapper input::placeholder,
.dr-lp-quote-form-card .gform_wrapper select::placeholder {
    color: #6b7280;
}

.dr-lp-quote-form-card .gform_wrapper .ginput_complex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

/* GF's foundation theme adds padding-inline to each grid-col; zero it so
   our explicit column-gap on .ginput_complex (and .gform_fields) is the
   only horizontal spacing between fields. */
.dr-lp-quote-form-card .gform_wrapper .gform-grid-col {
    padding-inline: 0 !important;
}

.dr-lp-quote-form-card .gform_wrapper .address_line_1,
.dr-lp-quote-form-card .gform_wrapper .address_zip {
    grid-column: 1 / -1;
}

/* GF outputs sub-inputs as <span><input/><label/></span> — flip the
   order visually so the label appears above each sub-input. */
.dr-lp-quote-form-card .gform_wrapper .ginput_complex span {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column-reverse;
}

/* Address sub-fields render their own labels above each input */
.dr-lp-quote-form-card .gform_wrapper .ginput_complex label {
    display: block;
    color: #000;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.375rem;
}

.dr-lp-quote-form-card .gform_wrapper .gform_footer {
    padding: 0;
    margin: 1rem 0 0;
    display: block;
}

/* Submit button — matches Figma node 34:4289 spec exactly */
.dr-lp-quote-form-card .gform_wrapper .gform_button,
.dr-lp-quote-form-card .gform_wrapper input[type="submit"].gform_button {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(180deg, #0c7c83 0%, #085c61 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 56px !important;
    padding: 14px 16px 16px !important;
    font-family: var(--wp--preset--font-family--secondary) !important;
    font-size: 1.3125rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: filter 0.2s !important;
    white-space: nowrap !important;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
    line-height: 1 !important;
}

.dr-lp-quote-form-card .gform_wrapper .gform_button:hover {
    filter: brightness(1.08);
}

@media (max-width: 781px) {
    .dr-lp-quote-hero.wp-block-cover {
        min-height: auto !important;
        padding-left: 21px !important;
        padding-right: 21px !important;
        padding-top: 8rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Mobile gradient per Figma node 34:3889 — slightly stronger midpoint
       than desktop (0.74 vs 0.70 alpha). Otherwise identical fade
       transparent → dark → #032C2E. */
    .dr-lp-quote-hero.wp-block-cover::after {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.74) 64.9%,
            #032C2E 100%
        ) !important;
    }

    .dr-lp-quote-hero__cols {
        gap: 1rem;
    }

    .dr-lp-quote-hero__title {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    .dr-lp-quote-hero__sub {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .dr-lp-quote-form-card {
        padding: 1.375rem 1.875rem !important;
        border-radius: 16px !important;
    }

    .dr-lp-quote-form-card__title {
        font-size: 20px !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }

    .dr-lp-quote-form-card .gform_wrapper .gfield_label {
        font-size: 14px !important;
    }

    .dr-lp-quote-form-card .gform_wrapper input[type="text"],
    .dr-lp-quote-form-card .gform_wrapper input[type="email"],
    .dr-lp-quote-form-card .gform_wrapper input[type="tel"],
    .dr-lp-quote-form-card .gform_wrapper select {
        height: 30px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        border-radius: 24px !important;
    }

    .dr-lp-quote-form-card .gform_wrapper .gform_button,
    .dr-lp-quote-form-card .gform_wrapper input[type="submit"].gform_button {
        background: var(--wp--preset--color--primary) !important;
        padding: 16px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        border-radius: 56px !important;
        box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.25) !important;
    }

    /* No overhang into trust banner on mobile */
    .dr-lp-quote-hero__form-col .dr-lp-quote-form-card {
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
    }
}

/* Trust banner ---------------------------------------------- */

/* Inner content is constrained to roughly the hero's copy-column width
   and left-aligned so it sits BESIDE (not below) the form card overhang
   coming down from the hero. The form card hangs into the empty right
   side of the banner; banner content stays put. No extra top padding
   needed because the overhang doesn't overlap the badge+text row. */
.dr-lp-quote-trust__inner {
    gap: 1.5rem;
    align-items: center;
    max-width: 695px;
    /* Align the inner's left edge with the hero copy column above. The hero
       uses a 1240px centered content area inside the same parent padding;
       the centering offset is `(100% - 1240px) / 2`, clamped to 0 for
       narrow viewports. */
    margin-left: max(0px, calc((100% - 1240px) / 2)) !important;
    margin-right: auto !important;
}

.dr-lp-quote-trust__badges {
    gap: 0.875rem;
    align-items: center;
    flex-shrink: 0;
}

.dr-lp-quote-trust__badge {
    margin: 0;
}

.dr-lp-quote-trust__badge img {
    display: block;
    object-fit: contain;
}

.dr-lp-quote-trust__copy {
    gap: 0.375rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 781px) {
    .dr-lp-quote-trust.wp-block-group {
        padding-top: 1.125rem !important;
        padding-bottom: 1.125rem !important;
    }

    .dr-lp-quote-trust__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        text-align: left;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0;
    }

    .dr-lp-quote-trust__badges {
        gap: 0.875rem;
    }

    .dr-lp-quote-trust__badge img {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain;
    }

    .dr-lp-quote-trust__copy {
        gap: 0.375rem;
    }

    .dr-lp-quote-trust__title {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .dr-lp-quote-trust__sub {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--wp--preset--color--base) !important;
    }
}

/* Custom-windows section ----------------------------------- */

.dr-lp-quote-custom .wp-block-columns {
    max-width: 776px;
    margin-inline: auto;
}

.dr-lp-quote-custom__photo img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 781px) {
    /* Mobile: grid layout (not flex) so the zip CTA can span both columns
       on its own row beneath the media + copy 2-col row.
       Uses display:contents on the copy column to flatten its children
       into the parent grid so we can place each one individually. */
    .dr-lp-quote-custom__cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
        display: grid !important;
        grid-template-columns: 35% 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 1rem;
        row-gap: 0;
    }

    .dr-lp-quote-custom__cols.wp-block-columns:not(.is-not-stacked-on-mobile) > .dr-lp-quote-custom__media {
        grid-column: 1;
        grid-row: 1 / 3;
        flex: none !important;
        max-width: none !important;
    }

    .dr-lp-quote-custom__cols.wp-block-columns:not(.is-not-stacked-on-mobile) > .dr-lp-quote-custom__copy {
        display: contents !important;
    }

    .dr-lp-quote-custom__title {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-bottom: 0.375rem !important;
    }

    .dr-lp-quote-custom__sub {
        grid-column: 2;
        grid-row: 2;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
    }

    /* Zip CTA on its own row spanning both columns */
    .dr-lp-quote-custom .dr-lp-quote-zipcta {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        width: 100%;
        margin-top: 1rem;
    }

    .dr-lp-quote-custom .dr-lp-quote-zipcta__input {
        flex: 1 1 auto;
        width: auto;
    }

    /* Portrait-cropped photo with 12px rounded corners (matches desktop) */
    .dr-lp-quote-custom__media .dr-lp-quote-custom__photo img {
        aspect-ratio: 116 / 136;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 12px !important;
    }
}

/* Reusable zip + CTA control (also used in section 6) -------
   Single seamless pill split into two halves per Figma node 34:3370:
   - LEFT (input): white bg, inner shadow, #cdcdcd border, left side rounded
   - RIGHT (button): yellow gradient, #d9a83f border, right side rounded
   - Halves abut each other; the button's negative margin-left collapses
     the doubled border into a single visual seam. */

.dr-lp-quote-zipcta {
    display: inline-flex;
    align-items: stretch;
}

.dr-lp-quote-zipcta__input {
    width: 120px;
    flex: 0 0 120px;
    min-width: 0;
    border: 1px solid #cdcdcd;
    outline: none;
    padding: 16px 24px;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    background: #fff;
    color: #000;
    border-radius: 56px 0 0 56px;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dr-lp-quote-zipcta__input::placeholder {
    color: #000;
    opacity: 1;
}

.dr-lp-quote-zipcta__input:focus {
    border-color: var(--wp--preset--color--primary);
    z-index: 1;
}

.dr-lp-quote-zipcta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    background: linear-gradient(180deg, #ffd67c 0%, #f2bc47 100%);
    color: #000 !important;
    text-decoration: none !important;
    border: 1px solid #d9a83f;
    border-radius: 0 56px 56px 0;
    padding: 16px 24px;
    font-family: var(--wp--preset--font-family--primary);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 0.2s;
}

.dr-lp-quote-zipcta__btn:hover {
    filter: brightness(1.05);
}

/* DR difference card --------------------------------------- */

.dr-lp-quote-difference__card {
    position: relative;
    overflow: hidden;
    box-shadow: 2px 12px 28px rgba(0, 0, 0, 0.10);
    max-width: 776px;
    margin-inline: auto;
}

/* Decorative teal swoop pinned to the bottom-left corner of the card.
   No padding around it — sits flush against the card's outer edges and
   gets clipped by the card's border-radius via overflow:hidden. The
   pelican mascot column is z-indexed above so it reads clearly on top. */
.dr-lp-quote-difference__swoop {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 312px;
    height: 276px;
    pointer-events: none;
    z-index: 0;
    display: block;
}

.dr-lp-quote-difference__cols,
.dr-lp-quote-difference__title,
.dr-lp-quote-difference__sub {
    position: relative;
    z-index: 1;
}

.dr-lp-quote-difference__list {
    list-style: none;
}

.dr-lp-quote-difference__list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--wp--preset--color--primary-light);
    color: var(--wp--preset--color--primary);
    font-weight: 500;
}

.dr-lp-quote-difference__list li strong {
    font-weight: 700;
}

.dr-lp-quote-difference__list li:last-child {
    border-bottom: none;
}

.dr-lp-quote-difference__mascot img {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-inline: auto;
    display: block;
}

@media (max-width: 781px) {
    .dr-lp-quote-difference__card {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    .dr-lp-quote-difference__title {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 0.3125rem !important;
    }

    .dr-lp-quote-difference__sub {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
    }

    /* Keep 2-col on mobile (mascot left, stats right) */
    .dr-lp-quote-difference__cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1.25rem !important;
        align-items: flex-start !important;
    }

    /* Top-align pelican with the list (override the column's
       is-vertically-aligned-center which would otherwise center it). */
    .dr-lp-quote-difference__cols > .dr-lp-quote-difference__mascot.is-vertically-aligned-center,
    .dr-lp-quote-difference__cols > .dr-lp-quote-difference__stats.is-vertically-aligned-center {
        align-self: flex-start !important;
    }

    .dr-lp-quote-difference__cols.wp-block-columns:not(.is-not-stacked-on-mobile) > .dr-lp-quote-difference__mascot {
        flex: 0 0 80px !important;
        max-width: 80px !important;
    }

    .dr-lp-quote-difference__cols.wp-block-columns:not(.is-not-stacked-on-mobile) > .dr-lp-quote-difference__stats {
        flex: 1 1 auto !important;
        max-width: none !important;
    }

    .dr-lp-quote-difference__mascot img {
        max-width: 80px;
    }

    .dr-lp-quote-difference__list {
        font-size: 14px !important;
        padding-left: 0 !important;
    }

    .dr-lp-quote-difference__list li {
        padding: 0.4rem 0 !important;
    }

    /* Hide the bottom swoop on mobile (clutter at small sizes) */
    .dr-lp-quote-difference__swoop {
        display: none;
    }
}

/* Window types grid (6-up) ----------------------------------
   Backed by a `wp:query` Query Loop over the `window-style` CPT. The
   CPT post-template renders as a <ul> of <li> wrappers, so the grid
   display lives on the post-template (the actual flex/grid parent of
   the cards), not on the outer query block. */

.dr-lp-quote-windows {
    position: relative;
    isolation: isolate;
    padding-block: 5rem;
    background-image: url('assets/images/lp-quote-windows-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dr-lp-quote-windows::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #EFEBEB 0%, rgba(239, 235, 235, 0) 46.58%);
    pointer-events: none;
    z-index: 0;
}

.dr-lp-quote-windows > * {
    position: relative;
    z-index: 1;
}

.dr-lp-quote-windows__grid {
    max-width: 1080px;
    margin-inline: auto;
}

.dr-lp-quote-windows__grid .wp-block-post-template,
.dr-lp-quote-windows__post-template {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2.5rem;
}

.dr-lp-quote-windows__grid .wp-block-post-template > li,
.dr-lp-quote-windows__post-template > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dr-lp-quote-windows__card,
.dr-lp-quote-windows__card:link,
.dr-lp-quote-windows__card:visited {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--wp--preset--color--contrast);
    transition: background-color 0.2s;
}

.dr-lp-quote-windows__card:hover {
    background-color: rgba(0, 0, 0, 0.03);
    text-decoration: none !important;
}

.dr-lp-quote-windows__card span {
    text-decoration: none !important;
}

.dr-lp-quote-windows__icon {
    flex: 0 0 80px;
    display: block;
}

.dr-lp-quote-windows__icon img {
    width: 100%;
    height: auto;
    display: block;
}

.dr-lp-quote-windows__body {
    display: block;
}

.dr-lp-quote-windows__name {
    display: block;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    margin-bottom: 0.25rem;
}

.dr-lp-quote-windows__desc {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
    .dr-lp-quote-windows {
        padding-block: 2rem;
    }

    .dr-lp-quote-windows__title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Horizontal scroll cards on mobile — escapes the section padding
       so cards can scroll edge-to-edge. margin-inline shifts the box
       out by the section padding, but width must also grow to actually
       span the full viewport width. */
    .dr-lp-quote-windows__grid .wp-block-post-template,
    .dr-lp-quote-windows__post-template {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 1.5rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--wp--preset--spacing--medium));
        width: calc(100% + 2 * var(--wp--preset--spacing--medium));
        max-width: none !important;
        padding-inline: var(--wp--preset--spacing--medium);
        scroll-padding-left: var(--wp--preset--spacing--medium);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Line break before "for your home" — span becomes block-level so
       the regular-weight portion drops to its own line. */
    .dr-lp-quote-windows__title > span {
        display: block;
    }

    .dr-lp-quote-windows__grid .wp-block-post-template::-webkit-scrollbar,
    .dr-lp-quote-windows__post-template::-webkit-scrollbar {
        display: none;
    }

    .dr-lp-quote-windows__grid .wp-block-post-template > li,
    .dr-lp-quote-windows__post-template > li {
        flex: 0 0 220px;
        scroll-snap-align: start;
    }

    .dr-lp-quote-windows__card,
    .dr-lp-quote-windows__card:link,
    .dr-lp-quote-windows__card:visited {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
    }

    .dr-lp-quote-windows__icon {
        flex: none;
        width: 80px;
        height: 80px;
    }

    .dr-lp-quote-windows__icon svg,
    .dr-lp-quote-windows__icon img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .dr-lp-quote-windows__name {
        font-size: 14px;
    }

    .dr-lp-quote-windows__desc {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
    }
}

/* Help / "Don't know where to start" cover ----------------- */

.dr-lp-quote-help.wp-block-cover {
    align-items: stretch;
}

.dr-lp-quote-help .wp-block-cover__inner-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    position: relative;
}

.dr-lp-quote-help__panel {
    background: rgba(7, 92, 97, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Mobile: photo on top, opaque teal panel at bottom — stack via the cover's
   flex layout (align-items: flex-end pushes panel to the bottom of the
   cover area, the cover bg photo fills the empty top area). */
@media (max-width: 781px) {
    .dr-lp-quote-help.wp-block-cover {
        align-items: flex-end !important;
        min-height: 540px !important;
        padding: 0 !important;
    }

    .dr-lp-quote-help .wp-block-cover__inner-container {
        width: 100% !important;
        margin: 0 !important;
    }

    .dr-lp-quote-help__panel {
        background: var(--wp--preset--color--primary) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 1.5rem 21px !important;
        width: 100%;
    }

    .dr-lp-quote-help__title {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }

    .dr-lp-quote-help__sub {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    .dr-lp-quote-help .dr-lp-quote-zipcta {
        display: flex;
        width: 100%;
    }

    .dr-lp-quote-help .dr-lp-quote-zipcta__input {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (min-width: 782px) {
    .dr-lp-quote-help.wp-block-cover {
        padding-inline: 0 !important;
    }

    .dr-lp-quote-help__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 8.5rem;
        width: 30rem;
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Testimonials section ------------------------------------- */

.dr-lp-quote-testimonials__intro {
    margin-inline: auto;
    margin-bottom: 2rem;
    text-align: center;
}

.dr-lp-quote-testimonials__avatar {
    margin: 0 auto 1rem;
}

.dr-lp-quote-testimonials__avatar img {
    border-radius: 999px;
}

.dr-lp-quote-testimonials__title {
    max-width: 36rem;
    margin-inline: auto;
}

@media (max-width: 781px) {
    /* Mobile intro: pelican inline with heading */
    .dr-lp-quote-testimonials__intro {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 0.5rem;
        max-width: 100% !important;
        text-align: left;
    }

    .dr-lp-quote-testimonials__avatar,
    .dr-lp-quote-testimonials__avatar img {
        width: 134px !important;
        height: auto !important;
        margin: 0 !important;
        flex: 0 0 134px !important;
    }

    .dr-lp-quote-testimonials__title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        max-width: none !important;
        margin-inline: 0 !important;
        flex: 1 1 auto;
    }
}

@media (min-width: 782px) {
    .dr-lp-quote-testimonials__intro {
        position: relative;
        max-width: 36rem;
    }

    .dr-lp-quote-testimonials__avatar {
        position: absolute;
        top: 50%;
        right: auto;
        bottom: auto;
        left: calc(-140px - 1.5rem);
        transform: translateY(-50%);
        margin: 0;
        width: 140px;
    }

    .dr-lp-quote-testimonials__title {
        text-align: left;
    }
}

.dr-lp-quote-testimonials__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1080px;
    margin-inline: auto;
}

.dr-lp-quote-testimonials__top,
.dr-lp-quote-testimonials__cards {
    display: contents;
}

.dr-lp-quote-tcard__photo {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
}

.dr-lp-quote-tcard__pill {
    background: var(--wp--preset--color--primary);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    font-family: var(--wp--preset--font-family--primary);
    display: flex;
    align-items: center;
}

.dr-lp-quote-tcard {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
}

.dr-lp-quote-tcard__quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    font-weight: 400;
}

.dr-lp-quote-tcard__byline {
    margin: 0;
    font-size: 16px;
    line-height: 1.375;
    color: var(--wp--preset--color--primary);
    font-weight: 700;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.dr-lp-quote-tcard__loc {
    font-weight: 400;
}

/* Slider chrome (arrows + dots) is hidden on desktop where cards are
   a static grid via display:contents on the cards wrapper. */
.dr-lp-quote-testimonials__slider,
.dr-lp-quote-testimonials__dots {
    display: contents;
}

.dr-lp-quote-testimonials__arrow,
.dr-lp-quote-testimonials__dot {
    display: none;
}

@media (max-width: 781px) {
    /* Mobile grid: pill (full-width) / photo thumbnails row / stacked cards */
    .dr-lp-quote-testimonials__grid {
        display: grid !important;
        grid-template-columns: 67px 1fr 67px;
        column-gap: 1rem;
        row-gap: 1.25rem;
        margin-top: 1rem;
    }

    .dr-lp-quote-tcard__pill {
        grid-column: 1 / -1;
        grid-row: 1;
        background: transparent !important;
        color: var(--wp--preset--color--primary) !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    .dr-lp-quote-tcard__photo--left {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 67 / 121;
    }

    .dr-lp-quote-tcard__photo--center {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: 222 / 121;
    }

    .dr-lp-quote-tcard__photo--right {
        grid-column: 3;
        grid-row: 2;
        aspect-ratio: 67 / 121;
    }

    /* Slider row: cards-scroller is fixed at 70vw and centered; arrows
       pin to the viewport edges via justify-content: space-between.
       Only one card is visible at a time (each card == 100% of cards),
       and swiping/clicking advances to the next. */
    .dr-lp-quote-testimonials__slider {
        display: flex !important;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        margin-inline: calc(-1 * var(--wp--preset--spacing--medium));
        width: calc(100% + 2 * var(--wp--preset--spacing--medium));
        padding-inline: 1.5rem;
        box-sizing: border-box;
    }

    .dr-lp-quote-testimonials__cards {
        display: flex !important;
        flex: 0 0 70vw;
        max-width: 70vw;
        gap: 1rem;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        box-sizing: border-box;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dr-lp-quote-testimonials__cards::-webkit-scrollbar {
        display: none;
    }

    .dr-lp-quote-tcard {
        flex: 0 0 100%;
        box-sizing: border-box;
        scroll-snap-align: start;
        padding: 1.25rem !important;
        grid-column: auto;
        grid-row: auto;
    }

    /* Arrows visible on mobile, flanking the cards row */
    .dr-lp-quote-testimonials__arrow {
        display: block;
        appearance: none;
        background: transparent;
        border: 0;
        padding: 0.25rem;
        cursor: pointer;
        color: var(--wp--preset--color--secondary);
        line-height: 0;
        flex: 0 0 auto;
    }

    .dr-lp-quote-testimonials__arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .dr-lp-quote-testimonials__arrow svg {
        display: block;
    }

    /* Dots row sits below the slider, full width and centered */
    .dr-lp-quote-testimonials__dots {
        display: flex !important;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .dr-lp-quote-testimonials__dot {
        display: block;
        appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid var(--wp--preset--color--secondary);
        padding: 0;
        cursor: pointer;
    }

    .dr-lp-quote-testimonials__dot.is-active {
        background: var(--wp--preset--color--secondary);
    }

    .dr-lp-quote-tcard__quote {
        font-size: 14px !important;
    }

    .dr-lp-quote-tcard__byline {
        font-size: 14px !important;
    }

}

@media (min-width: 782px) {
    .dr-lp-quote-testimonials__intro {
        text-align: left;
    }

    .dr-lp-quote-testimonials__grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem 1.5rem;
        align-items: start;
    }

    .dr-lp-quote-testimonials__top {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem 1.5rem;
    }

    .dr-lp-quote-tcard__photo--left {
        grid-column: 1;
        grid-row: 1 / 3;
        aspect-ratio: auto;
        height: 100%;
    }

    .dr-lp-quote-tcard__photo--center {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: auto;
        height: 100%;
        min-height: 0;
    }

    .dr-lp-quote-tcard__photo--right {
        grid-column: 3;
        grid-row: 1 / 3;
        aspect-ratio: auto;
        height: 100%;
    }

    .dr-lp-quote-tcard__pill {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Final CTA ------------------------------------------------- */

.dr-lp-quote-final.wp-block-cover {
    align-items: center;
    overflow: visible;
}

/* Image asset already has its faded opacity baked in — flip above dim
   at full opacity so it shows over the solid teal. WP core gives the dim
   z-index:1 and the image z-index:0 by default; we swap that. */
.dr-lp-quote-final .wp-block-cover__image-background {
    z-index: 2 !important;
}

/* Top-left swoop: a teal triangle protruding UP above the section, with
   its hypotenuse curved (convex from the teal side). Sits entirely above
   the section's top edge so it doesn't overlap the bg image. */
.dr-lp-quote-final::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 0;
    width: 260px;
    height: 80px;
    background-image: url('assets/images/lp-quote-final-swoop.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.dr-lp-quote-final .wp-block-cover__inner-container {
    position: relative;
    z-index: 4;
}

.dr-lp-quote-final__title,
.dr-lp-quote-final__sub {
    max-width: 791px;
}

.dr-lp-quote-final__box {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 1rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin: 0 auto;
}

.dr-lp-quote-final__label {
    margin: 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-family: var(--wp--preset--font-family--primary);
    font-weight: 400;
    line-height: 1.6;
}

.dr-lp-quote-final .dr-lp-quote-zipcta {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 48px;
    padding: 4px 4px 4px 28px;
    gap: 12px;
    align-items: center;
}

.dr-lp-quote-final .dr-lp-quote-zipcta__input {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
    flex: 0 1 auto;
    border-radius: 0;
}

.dr-lp-quote-final .dr-lp-quote-zipcta__btn {
    border-radius: 56px;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    margin-left: 0;
    box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.25);
}

/* Landing header — quote variant -------------------------- */
/* The quote LP header is a transparent overlay: a teal "swoop"
   shape bleeds out of the upper-left corner with the round Direct
   Remodels logo badge sitting on top of it. The header is
   absolutely positioned over the hero so the hero photo can
   bleed to the very top of the page. */

header.dr-lp-site-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.dr-lp-header-quote {
    position: relative;
    width: 100%;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    background: transparent !important;
    overflow: visible;
}

.dr-lp-header-quote::before {
    /* Teal swoop bleeding off upper-left corner */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 168px;
    background-image: url("assets/images/lp-quote-hero-swoop.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.dr-lp-header-quote__logo {
    position: absolute !important;
    top: 18px;
    left: 28px;
    width: 96px !important;
    max-width: 96px;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    pointer-events: auto;
}

.dr-lp-header-quote__logo a {
    display: block;
    line-height: 0;
}

.dr-lp-header-quote__logo img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 781px) {
    .dr-lp-header-quote::before {
        width: 230px;
        height: 138px;
    }

    .dr-lp-header-quote__logo {
        top: 21px;
        left: 21px;
        width: 90px !important;
        max-width: 90px;
    }
}

@media (max-width: 781px) {
    .dr-lp-quote-final__title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .dr-lp-quote-final__sub {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    .dr-lp-quote-final__box {
        width: 100%;
        box-sizing: border-box;
        padding: 1rem !important;
    }

    .dr-lp-quote-final__label {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* Hide the floating teal swoop on mobile (it overlaps the previous section) */
    .dr-lp-quote-final::before {
        display: none;
    }

    /* Compact form pill on mobile (zip input + yellow button) */
    .dr-lp-quote-final .dr-lp-quote-zipcta {
        display: flex;
        width: calc(100% - 2rem);
        margin-inline: 1rem;
        padding: 4px 4px 4px 18px;
        box-sizing: border-box;
    }

    .dr-lp-quote-final .dr-lp-quote-zipcta__input {
        flex: 1 1 auto;
        width: auto;
        font-size: 14px;
    }

    .dr-lp-quote-final .dr-lp-quote-zipcta__btn {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
}



/* ============================================================
   Impact Window Types & Services page
   ============================================================
   Window-types grid uses plain wp:columns so each card is just an
   icon + h3 + paragraph. Left-align everything for a documentary
   feel (matches the source layout). On mobile we collapse to a
   single column with the icon centered above the title.

   Page CTA mirrors the existing dr-cta-card but adds an installer
   photo on the right; on mobile the photo drops below the copy. */
.dr-window-types .wp-block-column {
    text-align: left;
}
.dr-window-types .wp-block-image {
    margin-bottom: 1rem;
}
.dr-window-types h3 {
    margin-bottom: 0.5rem;
}

.dr-page-cta .dr-cta-card {
    overflow: hidden;
    position: relative;
}
.dr-page-cta .dr-cta-installer {
    flex-shrink: 0;
}
.dr-page-cta .dr-cta-installer img {
    border-radius: 0.5rem;
    width: 320px;
    height: auto;
    display: block;
}

/* Impact-gallery: 3-col grid with consistent 3:2 thumbnails. WP core
   default flex layout for nested-image galleries doesn't sniff column
   count reliably — force the layout so the 6 images actually show. */
.dr-impact-gallery .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
}
.dr-impact-gallery .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
    flex-basis: auto !important;
}
.dr-impact-gallery .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
}

/* ============================================================
   /direct-remodels-workflow internal page
   ============================================================ */
/* FAQ answer that contains multiple paragraphs / lists / links —
   give the inner content sensible spacing without the outer panel
   styling looking cramped. */
.dr-workflow-contacts .dr-workflow-contact-list {
    padding-left: 1.25rem;
}
.dr-workflow-contacts .dr-workflow-contact-list > li {
    margin-bottom: 1rem;
}
.dr-workflow-contacts .dr-workflow-contact-list > li > strong {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
}
.dr-workflow-contacts .dr-workflow-contact-list ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-top: 0.25rem;
}
.dr-workflow-contacts .dr-workflow-contact-list a {
    word-break: break-all;
}

/* FAQ items with HTML body: ensure nested <p> and <ul> render
   with breathing room (the answer container is otherwise a tight
   <p> wrap). */
.dr-faq-answer p + p,
.dr-faq-answer p + ul,
.dr-faq-answer ul + p {
    margin-top: 0.75rem;
}
.dr-faq-answer ul {
    margin: 0.5rem 0 0.75rem 1.25rem;
    list-style: disc;
}
.dr-faq-answer ul li {
    margin-bottom: 0.35rem;
}

/* ============================================================
   /welcome page
   ============================================================ */
/* Process steps: 3-col grid (2 rows). Force 3:2 photos so the
   cards line up regardless of source dimensions. */
.dr-welcome-process .dr-process-step img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* Questions CTA: same chrome as our other dr-cta-card panels. */
.dr-welcome-questions .dr-cta-card {
    overflow: hidden;
    position: relative;
}

/* "You Made a Great Choice" feature columns: top-aligned with the
   icon sitting flush above the heading. */
.dr-welcome-features .wp-block-column.dr-welcome-feature {
    align-self: flex-start;
}
.dr-welcome-features .dr-welcome-feature .wp-block-image {
    margin-bottom: 1rem;
}

/* Testimonial cards (yellow accent panels). All 3 stretch to the
   tallest card height so the row aligns. */
.dr-welcome-testimonials .wp-block-columns {
    align-items: stretch;
}
.dr-welcome-testimonials .wp-block-column {
    display: flex;
}
.dr-welcome-testimonials .dr-welcome-testimonial-card {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}
.dr-welcome-testimonials .dr-welcome-testimonial-card p {
    margin-block-start: 0;
}

@media (max-width: 781px) {
    .dr-impact-gallery .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Welcome: process & features collapse to single column with
       a touch more bottom margin between cards. */
    .dr-welcome-process .wp-block-columns,
    .dr-welcome-features .wp-block-columns,
    .dr-welcome-testimonials .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 2rem !important;
    }
    .dr-welcome-process .wp-block-column,
    .dr-welcome-features .wp-block-column,
    .dr-welcome-testimonials .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Questions CTA stacks vertically on mobile so the button sits
       below the heading + copy. */
    .dr-welcome-questions .dr-cta-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 2rem 1.5rem !important;
        gap: 1rem !important;
    }

    /* Window types: single column with centered icon + heading */
    .dr-window-types .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 2rem !important;
    }
    .dr-window-types .wp-block-column {
        flex-basis: 100% !important;
        text-align: center;
    }
    .dr-window-types .wp-block-image {
        display: flex;
        justify-content: center;
    }

    /* Page CTA: stack copy above installer photo, center the photo */
    .dr-page-cta .dr-cta-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
    }
    .dr-page-cta .dr-cta-installer {
        align-self: center;
        max-width: 220px;
    }
    .dr-page-cta .dr-cta-installer img {
        width: 100%;
    }
}

/* ============================================================
   Global word-break fix
   ============================================================
   WP core sets `word-break: break-word` on .wp-block-post-title,
   .wp-block-button__link, and .wp-block-column inline in <head>.
   That value lets the browser break a single word mid-character when
   it doesn't fit — which is why "Casement", "Henderson", and "Get a
   Quote" letter-breaks ("Casemen/t", "GET/A/QUOTE") in narrow mobile
   columns. Force normal wrapping everywhere; restore aggressive
   breaking only on URLs/email-style content if we ever need it. */
.wp-block-post-title,
.wp-block-button__link,
.wp-block-column,
.wp-block-heading,
h1, h2, h3, h4, h5, h6,
.dr-window-card-title,
.dr-team-card-name,
.dr-team-related-name {
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
}

/* ============================================================
   Mobile typography + spacing scale
   ============================================================
   Tablet down (<= 781px) and phone down (<= 480px) bring headings,
   hero heights, and section padding into line so:
     - Section H2s stay readable but never huge
     - Card post-titles (window/blog) stay small (1rem)
     - The CTA-window-style card stacks vertically and the button
       no longer letter-breaks
     - Inter-section gaps are predictable
*/
@media (max-width: 781px) {

    /* ---- Page heroes (About, Windows & Doors, etc.) ---- */
    .dr-page-hero {
        height: 360px !important;
    }
    .dr-page-hero h1 {
        font-size: 3rem !important;
    }
    .dr-page-hero .wp-block-cover__inner-container {
        padding: 1.5rem !important;
    }

    /* ---- Generic headings ----
       NB: do NOT include .wp-block-post-title here — that class is
       used as H1 (single post hero) AND H2 (cards). We size each in
       its own context below.
       H1s in this theme inherit the script font (Signatra) via
       theme.json. Script type needs ~1.4× the px size of sans-serif
       for equivalent visual weight, so we keep them ~3rem on mobile. */
    h1,
    .wp-block-heading.has-script-font-family {
        font-size: 3rem !important; /* 48px */
        line-height: 1.05 !important;
    }
    h2 {
        font-size: 1.625rem !important; /* 26px */
        line-height: 1.25 !important;
    }
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    blockquote {
        font-size: 1.125rem !important;
        line-height: 1.45 !important;
    }
    /* Section headings rendered with the script font (e.g. "The Direct
       Advantage", "Core Values", "From Our Projects") want a touch more
       presence than a plain H2. */
    .dr-section-heading__title.has-script-font-family,
    h2.has-script-font-family,
    .dr-testimonial-heading {
        font-size: 2.25rem !important; /* 36px */
        line-height: 1.15 !important;
    }
    /* Single post / page title at H1 level keeps script feel — same
       size as a generic script H1 since it IS one (theme.json applies
       script font to h1 element-wide). */
    h1.wp-block-post-title {
        font-size: 3rem !important; /* 48px */
        line-height: 1.05 !important;
    }
    /* Big mission paragraph (about page) that reads heading-ish */
    .dr-about-mission p {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    /* Body copy nudges down */
    .dr-window-card-excerpt,
    .dr-about-mission ~ p,
    .has-text-color.has-contrast-color {
        font-size: 0.95rem;
    }
    /* Bio detail name (script font on team-detail page) */
    .dr-team-bio-name {
        font-size: 2.5rem !important;
    }

    /* ---- Window-style cards ----
       2-col grid on mobile is narrow (~190px), so:
         - Title down to 1rem (and pin block-link inheritance)
         - Inner padding down to 1.25rem so the body has air
         - Top padding stays 4rem to clear the absolutely-positioned
           icon badge */
    .dr-window-card-content {
        padding: 4rem 1.25rem 1.5rem !important;
    }
    .dr-window-card-content h2.wp-block-post-title,
    .dr-window-card-content h2.wp-block-post-title a {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    .dr-window-card-excerpt {
        font-size: 0.825rem !important;
        line-height: 1.35 !important;
    }

    /* ---- Blog list cards ----
       Title is the script font (Signatra). Script type needs ~1.4×
       the px size of a sans-serif to read at equivalent visual
       weight, so 17px ended up looking tiny. 30px gives the title
       room to breathe inside a ~245px text panel without overflowing. */
    .dr-blog-card-text h2.wp-block-post-title,
    .dr-blog-card-text h2.wp-block-post-title a {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.05 !important;
    }
    .dr-blog-card-text {
        padding: 1rem !important;
    }
    .dr-blog-card-text p {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
    .dr-blog-read-more {
        font-size: 0.8125rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* ---- Buttons ----
       Most CTAs in patterns (header, hero, CTA cards, careers apply,
       single-page CTA) hard-code 1rem 2rem padding + 1.125rem font.
       That's heftier than necessary on a 414px screen — shrink the
       horizontal padding and font size so buttons feel proportional.
       The hero-v2 .dr-btn-accent / .dr-btn-phone overrides have a
       higher-specificity rule with their own !important padding, so
       they need an equally-specific mobile override below. */
    .wp-block-button__link {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    .dr-btn-accent .wp-block-button__link,
    .dr-btn-phone .wp-block-button__link {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important; /* 15px */
    }

    /* ---- CTA Window-style card (single window/door pages) ----
       The flex layout was nowrap-row on mobile, squeezing the button
       to ~80px wide so "GET A QUOTE" letter-broke. Stack vertically
       with the icon centered + smaller below the copy. */
    .dr-cta-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
    }
    .dr-cta-card .wp-block-button {
        width: auto !important;
    }
    .dr-cta-card .wp-block-button__link {
        white-space: normal !important;
    }
    .dr-cta-window-icon-wrap {
        max-width: 220px;
        margin: 0 auto !important;
    }
    .dr-cta-window-icon-wrap .dr-cta-icon {
        width: 100% !important;
        height: auto !important;
    }
    .dr-cta-window-icon-wrap .dr-cta-decor {
        display: none !important;
    }

    /* ---- Single-page top clearance ----
       Blog single, blog archive, single window/door pages all set
       padding-top: 8rem inline on the outermost main/group to clear
       the sticky header on desktop. On mobile that's a 100+ px empty
       band above the title — drop to ~4rem so the title lands right
       under the (shorter) mobile header. */
    .dr-blog-single,
    .dr-blog-archive,
    .dr-window-hero {
        padding-top: 4rem !important;
    }

    /* ---- Section-padding rhythm ----
       Block patterns nest constrained-layout groups with x-large
       vertical padding (~5rem). Plus parent-theme global-padding adds
       its own vertical air. Both stack on every section on mobile,
       so flatten them to ~2.5rem top/bottom for a tighter rhythm
       without losing breathing room. */
    .wp-block-group[style*="--wp--preset--spacing--x-large"],
    .alignfull.has-global-padding,
    .dr-projects-section,
    .dr-section--lifestyle,
    .dr-section--features,
    .dr-section--testimonials,
    .dr-section--values {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .dr-cta-window-style {
        padding: 1.5rem 1rem !important;
    }
}

@media (max-width: 480px) {
    .dr-page-hero {
        height: 280px !important;
    }
    .dr-page-hero h1 {
        font-size: 2.5rem !important;
    }
    /* Script H1s nudge down for smaller phones but stay sizeable */
    h1,
    .wp-block-heading.has-script-font-family {
        font-size: 2.5rem !important; /* 40px */
    }
    h1.wp-block-post-title {
        font-size: 2.5rem !important; /* 40px */
    }
    h2 {
        font-size: 1.375rem !important; /* 22px */
    }
    .dr-section-heading__title.has-script-font-family,
    h2.has-script-font-family,
    .dr-testimonial-heading {
        font-size: 1.875rem !important; /* 30px */
    }
    .dr-team-bio-name {
        font-size: 2rem !important;
    }
    /* Blog card script titles: nudge down for the narrowest phones */
    .dr-blog-card-text h2.wp-block-post-title,
    .dr-blog-card-text h2.wp-block-post-title a {
        font-size: 1.625rem !important; /* 26px */
    }
}

/* ==========================================================================
   Popup forms (Hold On!, etc.)
   The Popup Manager renders content into .lp-popup__content, which is NOT a
   layout-flow/entry container — so WordPress block spacing never reaches the
   heading/paragraph/form, and the in-popup context disrupts the Gravity Forms
   grid (half-width fields render uneven). Restored here in the child theme.
   ========================================================================== */
.lp-popup__content > * + * {
    margin-block-start: 1.25rem;
}

/* Even 50/50 row for half-width fields (scoped to popups only). */
.lp-popup .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.lp-popup .gform_wrapper .gform_fields > .gfield {
    grid-column: 1 / -1; /* full-width default (also hidden gclid/honeypot) */
}

.lp-popup .gform_wrapper .gform_fields > .gfield--width-half {
    grid-column: span 1; /* halves share a row evenly */
}

.lp-popup .gform_wrapper .gfield input,
.lp-popup .gform_wrapper .gfield textarea,
.lp-popup .gform_wrapper .gfield select {
    width: 100%;
    box-sizing: border-box;
}

.lp-popup .gform_wrapper .gform_footer {
    margin-block-start: 1.5rem;
}

@media (max-width: 480px) {
    /* Stack the half-width fields on very narrow popups. */
    .lp-popup .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
    }
    .lp-popup .gform_wrapper .gform_fields > .gfield--width-half {
        grid-column: 1 / -1;
    }
}