/* ==========================================================================
   AirPurete — homepage.css
   Redesigned AirPurete design system for the homepage foundation (shared
   header/footer, static hero, collection cards) and the new Commercial /
   Residential collection pages and the About page.

   Self-contained: the new collection/About pages load ONLY this file (plus the
   existing Open Sans web font), so they do not depend on the heavy Porto /
   Owl Carousel / Revolution Slider stack used by the legacy homepage sections.

   Brand palette — derived from EXISTING AirPurete assets only (no new palette):
     #155e7d  primary teal    (homepage buttons/headings, index.html)
     #0f4a63  primary dark     (darker shade of the primary teal)
     #2b6d94  brand blue       (--blue in css/product.css)
     #79b93c  brand green      (--green in css/product.css)
     #5f9a2c  green dark        (darker shade of brand green)
     #2d2d2d  body text        (--text in css/product.css)
     #f4f9fc  light section bg (index.html #commercial-filters)
   ========================================================================== */

:root {
    --ap-primary:        #155e7d;
    --ap-primary-dark:   #0f4a63;
    --ap-blue:           #2b6d94;
    --ap-green:          #79b93c;
    --ap-green-dark:     #5f9a2c;
    --ap-ink:            #0a2b3a; /* near-black navy for text on green (AA) */
    --ap-text:           #2d2d2d;
    --ap-text-muted:     #5b6670;
    --ap-line:           #dfe4e8;
    --ap-bg:             #ffffff;
    --ap-bg-soft:        #f4f9fc;

    --ap-radius:         8px;
    --ap-radius-lg:      16px;
    --ap-shadow:         0 1px 3px rgba(21, 94, 125, 0.08), 0 6px 18px rgba(21, 94, 125, 0.06);
    --ap-shadow-hover:   0 10px 30px rgba(21, 94, 125, 0.18);

    /* Wide, intentional content width. Full-width sections span the viewport;
       this container keeps readable content substantial on large monitors. */
    --ap-container-max:  1520px;
    --ap-gutter:         48px;   /* total horizontal gutter (24px each side)  */

    /* Consistent vertical rhythm for major sections */
    --ap-section-y:      clamp(48px, 6vw, 96px);

    --ap-gap:            24px;
    --ap-font:           'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Reusable brand gradients */
    --ap-grad-brand:     linear-gradient(120deg, var(--ap-primary-dark) 0%, var(--ap-primary) 58%, var(--ap-blue) 100%);
    --ap-grad-brand-2:   linear-gradient(150deg, var(--ap-primary) 0%, var(--ap-blue) 100%);
}

/* ---------- Base / reset ----------
   The typographic base is SCOPED to .ap-root so this shared stylesheet can be
   loaded on the legacy Porto homepage without restyling its existing sections.
   New collection/About pages set class="ap-root" on <body>; the homepage wraps
   only its new hero + collection sections in a .ap-root container. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; max-width: 100%; overflow-x: hidden; }

.ap-root {
    font-family: var(--ap-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ap-text);
    background: var(--ap-bg);
}
.ap-root img { max-width: 100%; height: auto; display: block; }
.ap-root a { color: var(--ap-primary); }

.ap-root h1,
.ap-root h2,
.ap-root h3,
.ap-root h4 { color: var(--ap-primary); line-height: 1.18; margin: 0 0 0.5em; font-family: var(--ap-font); }
.ap-root h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.ap-root h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

/* ---------- Accessibility helpers ---------- */
.ap-skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 2000;
    background: var(--ap-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--ap-radius);
    text-decoration: none;
    transition: top 0.2s ease;
}
.ap-skip-link:focus { top: 8px; }

:focus-visible {
    outline: 3px solid var(--ap-green);
    outline-offset: 2px;
    border-radius: 3px;
}

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

/* ---------- Layout ----------
   Full-width sections span the viewport; .ap-container is the wide internal
   readable container used for headings, grids, breadcrumbs and text. */
.ap-container {
    width: min(100% - var(--ap-gutter), var(--ap-container-max));
    margin-inline: auto;
}
@media (max-width: 640px) {
    :root { --ap-gutter: 32px; }
}

.ap-section { padding-block: var(--ap-section-y); }
.ap-section--soft { background: var(--ap-bg-soft); }

/* Full-width band wrapper (section background spans viewport; inner content
   sits in .ap-container). */
.ap-band { padding-block: var(--ap-section-y); }
.ap-band--soft  { background: var(--ap-bg-soft); }
.ap-band--brand { background: var(--ap-grad-brand); color: #fff; }
.ap-band--brand h1,
.ap-band--brand h2,
.ap-band--brand h3 { color: #fff; }
.ap-band--brand p { color: rgba(255, 255, 255, 0.9); }
.ap-band--brand .ap-eyebrow { color: #bfe08c; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.ap-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--ap-line);
    box-shadow: 0 1px 0 rgba(21, 94, 125, 0.04);
}
.ap-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
}
.ap-header__logo { display: inline-flex; align-items: center; }
.ap-header__logo img { width: 190px; height: auto; }

.ap-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ap-nav__list a {
    display: inline-block;
    padding: 10px 15px;
    color: var(--ap-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--ap-radius);
    transition: color 0.15s ease, background 0.15s ease;
}
.ap-nav__list a:hover { color: var(--ap-primary); background: var(--ap-bg-soft); }
.ap-nav__list a[aria-current="page"] {
    color: var(--ap-primary);
    box-shadow: inset 0 -3px 0 var(--ap-green);
    border-radius: var(--ap-radius) var(--ap-radius) 0 0;
}

/* Contact Us — prominent brand-green pill with dark-navy text (AA contrast) */
.ap-nav__cta {
    background: var(--ap-green) !important;
    color: var(--ap-ink) !important;
    font-weight: 800 !important;
    margin-left: 8px;
    box-shadow: 0 3px 10px rgba(121, 185, 60, 0.32);
}
.ap-nav__cta:hover { background: var(--ap-green-dark) !important; color: #06232f !important; }

.ap-nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    padding: 9px 13px;
    cursor: pointer;
    color: var(--ap-primary);
    font: inherit;
    font-weight: 700;
}
.ap-nav-toggle__bars,
.ap-nav-toggle__bars::before,
.ap-nav-toggle__bars::after {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    position: relative;
    content: '';
}
.ap-nav-toggle__bars::before { position: absolute; top: -6px; }
.ap-nav-toggle__bars::after  { position: absolute; top: 6px; }

/* Progressive enhancement: collapse only when JS is available. Without JS the
   full nav stays visible and usable (links wrap). */
@media (max-width: 980px) {
    .js .ap-nav-toggle { display: inline-flex; margin-left: auto; }
    .js .ap-nav { position: relative; }
    .js .ap-nav__list {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 240px;
        background: #fff;
        border: 1px solid var(--ap-line);
        border-radius: var(--ap-radius);
        box-shadow: var(--ap-shadow);
        padding: 8px;
        z-index: 1001;
    }
    .js .ap-nav__list.is-open { display: flex; }
    .js .ap-nav__list a { display: block; }
    .js .ap-nav__cta { margin-left: 0; margin-top: 4px; text-align: center; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.ap-breadcrumb { padding-block: 4px; }
.ap-breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 0.9rem; color: var(--ap-text-muted);
}
.ap-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.ap-breadcrumb li + li::before { content: '›'; color: var(--ap-line); }
.ap-breadcrumb a { color: var(--ap-primary); text-decoration: none; }
.ap-breadcrumb a:hover { text-decoration: underline; }
.ap-breadcrumb [aria-current="page"] { color: var(--ap-text-muted); }

/* ==========================================================================
   Page title band (full-width brand hero for Commercial/Residential/About)
   ========================================================================== */
.ap-page-band {
    background: var(--ap-grad-brand);
    color: #fff;
    padding-block: clamp(28px, 4vw, 52px);
    position: relative;
    overflow: hidden;
}
/* subtle diagonal texture — pure CSS, no asset */
.ap-page-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.ap-page-band > .ap-container { position: relative; z-index: 1; }
.ap-page-band h1 {
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.12;
    margin: 0.35em 0 0.35em;
}
.ap-page-band p,
.ap-page-band .ap-page-band__description {
    color: rgba(255, 255, 255, 0.88);
    max-width: 72ch;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 400;
    line-height: inherit;
    margin: 0;
}
/* Breadcrumb tuned for the dark band */
.ap-page-band .ap-breadcrumb ol { color: rgba(255, 255, 255, 0.7); }
.ap-page-band .ap-breadcrumb a { color: #fff; }
.ap-page-band .ap-breadcrumb a:hover { color: #bfe08c; text-decoration: none; }
.ap-page-band .ap-breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.75); }
.ap-page-band .ap-breadcrumb li + li::before { color: rgba(255, 255, 255, 0.4); }

/* Intro paragraph that sits below a band, in the wide container */
.ap-intro { max-width: 74ch; color: var(--ap-text-muted); font-size: 1.05rem; }

/* ==========================================================================
   Product grid + unified product card
   ========================================================================== */
.ap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 560px)  { .ap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ap-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .ap-grid { grid-template-columns: repeat(5, 1fr); } }

.ap-card {
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ap-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.ap-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--ap-bg-soft);
    padding: 18px;
    border-bottom: 1px solid var(--ap-line);
}
.ap-card__media img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply; /* product shots on white blend cleanly on soft bg */
}
.ap-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1 1 auto;
}
.ap-card__title { font-size: 1.1rem; margin: 0; color: var(--ap-primary); line-height: 1.3; }
.ap-card__desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ap-text-muted);
    flex: 1 1 auto;
}
.ap-card__cta {
    margin-top: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ap-primary);
}
.ap-card__cta span { transition: transform 0.18s ease; display: inline-block; }

.ap-card:hover,
.ap-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--ap-shadow-hover);
    border-color: var(--ap-green);
}
.ap-card:hover .ap-card__cta span { transform: translateX(4px); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--ap-radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ap-btn--primary { background: var(--ap-primary); color: #fff; border-color: var(--ap-primary); }
.ap-btn--primary:hover { background: var(--ap-primary-dark); border-color: var(--ap-primary-dark); color: #fff; }
.ap-btn--secondary {
    background: #fff;
    color: var(--ap-primary);
    border-color: var(--ap-primary);
}
.ap-btn--secondary:hover { background: var(--ap-bg-soft); }

/* ==========================================================================
   Homepage — static hero (full-width, text overlays the media area)
   ========================================================================== */
.ap-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 64vh, 660px);
    overflow: hidden;
    color: #fff;
    /* Branded temporary background so the empty <img> state still looks
       intentional. When a real hero image is set it fills the media layer. */
    background: var(--ap-grad-brand);
}
.ap-hero__media { position: absolute; inset: 0; z-index: -2; }
.ap-root .ap-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}/* Hide the intentional empty <img src=""> so no broken-image icon shows. Adding
   a real src (and alt) is all that's needed later — no markup change. */
.ap-hero__image[src=""],
.ap-hero__image:not([src]) { display: none; }
/* Dark left-to-right brand overlay for text readability over a future photo */
.ap-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(10, 43, 58, 0.92) 0%,
        rgba(15, 74, 99, 0.72) 46%,
        rgba(21, 94, 125, 0.12) 100%);
}
.ap-hero__inner { padding-block: clamp(48px, 7vw, 84px); }
.ap-hero__content { max-width: 680px; }
.ap-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.8vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 0.45em;
}
.ap-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    max-width: 56ch;
    margin: 0 0 32px;
}
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* On the hero, Contact = green (brand accent); secondary = outline-on-dark */
.ap-hero .ap-btn--primary {
    background: var(--ap-green);
    color: var(--ap-ink);
    border-color: var(--ap-green);
}
.ap-hero .ap-btn--primary:hover { background: var(--ap-green-dark); border-color: var(--ap-green-dark); color: #06232f; }
.ap-hero .ap-btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.75);
}
.ap-hero .ap-btn--secondary:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.ap-hero__trust {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.ap-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
}
.ap-hero__trust svg {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    padding: 5px;
    border-radius: 50%;
    color: var(--ap-green);
    background: rgba(121, 185, 60, 0.16);
    box-shadow: inset 0 0 0 1px rgba(121, 185, 60, 0.4);
}
/* Canada + USA flags */
.ap-hero__trust .ap-flags { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.ap-hero__trust .ap-flag {
    width: auto; height: 16px;
    padding: 0;
    border-radius: 2px;
    background: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Hero entrance animation — restrained, runs once. Opt-IN only when the user
   has no reduced-motion preference, so reduced-motion users see static content. */
@media (prefers-reduced-motion: no-preference) {
    .ap-anim { opacity: 0; transform: translateY(20px); animation: apFadeUp 0.7s ease forwards; }
    .ap-anim-1 { animation-delay: 0.05s; }
    .ap-anim-2 { animation-delay: 0.18s; }
    .ap-anim-3 { animation-delay: 0.31s; }
    .ap-anim-4 { animation-delay: 0.44s; }
}
@keyframes apFadeUp { to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
    .ap-hero { min-height: 440px; }
    .ap-hero__overlay {
        background: linear-gradient(90deg,
            rgba(10, 43, 58, 0.92) 0%,
            rgba(15, 74, 99, 0.82) 100%);
    }
}

/* ==========================================================================
   Homepage — collection entry cards (large visual banners)
   ========================================================================== */
.ap-collections-section {
    padding-top: 40px;
    padding-bottom: 72px;
}
.ap-collections-head { text-align: center; margin-bottom: clamp(28px, 3vw, 44px); }
.ap-collections-head .ap-eyebrow { justify-content: center; }
.ap-collections-title {
    text-align: center;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0;
}
.ap-collections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 720px) { .ap-collections { grid-template-columns: 1fr; } }

.ap-collection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    min-height: clamp(300px, 32vw, 420px);
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--ap-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ap-collection-card__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--ap-grad-brand-2);
}
.ap-collection-card--residential .ap-collection-card__media {
    background: linear-gradient(150deg, var(--ap-primary-dark) 0%, var(--ap-blue) 70%, var(--ap-green-dark) 150%);
}

/* Scoped to .ap-root so height:100% beats the global `.ap-root img { height:auto }`.
   A future 1600x900 (16:9) banner fills the media area via object-fit: cover. */
.ap-root .ap-collection-card__image {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ap-collection-card__image[src=""],
.ap-collection-card__image:not([src]) { display: none; }
.ap-collection-card__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 43, 58, 0.10) 0%, rgba(10, 43, 58, 0.35) 45%, rgba(10, 43, 58, 0.82) 100%);
}
.ap-collection-card__body {
    margin-top: auto;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ap-collection-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.99rem;
    font-weight: 800;
    color: #0A3C50;
}
.ap-collection-card__body h3 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin: 0;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.ap-collection-card__body p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 48ch;
    font-size: 1rem;
}
/* CTA styled as a solid green button (visual only — the whole card is the <a>) */
.ap-collection-card__cta {
    align-self: flex-start;
    margin-top: 8px;
    padding: 12px 22px;
    border-radius: var(--ap-radius);
    background: var(--ap-green);
    color: var(--ap-ink);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease;
}
.ap-collection-card:hover .ap-collection-card__cta { background: var(--ap-green-dark); }
.ap-collection-card__cta span { display: inline-block; transition: transform 0.18s ease; }
.ap-collection-card:hover,
.ap-collection-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--ap-shadow-hover);
}
.ap-collection-card:hover .ap-collection-card__cta span { transform: translateX(5px); }

/* Shared eyebrow (used on light sections) */
.ap-eyebrow {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ap-green-dark);
    margin: 0 0 0.5em;
}

/* ==========================================================================
   About page
   ========================================================================== */
.ap-prose { max-width: 66ch; }
.ap-prose p { margin: 0 0 1.1em; color: var(--ap-text); }
.ap-prose p:last-child { margin-bottom: 0; }

/* Two-column company composition: copy + styled media placeholder */
.ap-split {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}
@media (max-width: 860px) { .ap-split { grid-template-columns: 1fr; } }
/* True 50/50 variant (About page Commercial/Residential sections) */
.ap-split--even { grid-template-columns: 1fr 1fr; }
.ap-split--even > * { min-width: 0; }
@media (max-width: 860px) { .ap-split--even { grid-template-columns: 1fr; } }
/* Justify the prose paragraphs in those two sections */
.ap-split--even .ap-prose p { text-align: justify; }
.ap-split__media {
    overflow: hidden;
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow);
}
/*About image*/
.ap-split__media img {
    display: block;
    width: 100%;
    height: auto;

}

/* Why AirPurete — card grid */
.ap-why {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ap-gap);
}
.ap-why li {
    background: #fff;
    border: 1px solid var(--ap-line);
    border-top: 4px solid var(--ap-green);
    border-radius: var(--ap-radius-lg);
    padding: 26px 24px;
    box-shadow: var(--ap-shadow);
}
.ap-why h3 { font-size: 1.1rem; margin: 0 0 0.5em; color: var(--ap-blue); }
.ap-why p { margin: 0; color: var(--ap-text-muted); font-size: 0.95rem; }

/* Commercial / Residential path CTA cards */
.ap-paths {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 720px) { .ap-paths { grid-template-columns: 1fr; } }
.ap-path-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 3vw, 38px);
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow);
}
.ap-path-card h3 { margin: 0; font-size: 1.4rem; }
.ap-path-card p { margin: 0; color: var(--ap-text-muted); flex: 1 1 auto; }
.ap-path-card .ap-btn { align-self: flex-start; margin-top: 6px; }

/* Closing tagline strip */
.ap-tagline { text-align: center; }
.ap-tagline strong { display: block; color: var(--ap-primary); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.ap-tagline span { color: var(--ap-text-muted); font-size: 1.05rem; }

/* About — "Industries we serve": clean icon + label card grid */
.ap-industries {
    list-style: none;
    margin: clamp(20px, 2.4vw, 32px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.ap-industries li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 22px 14px;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow);
}
.ap-industries img { width: 44px; height: 44px; }
.ap-industries span { font-size: 0.9rem; font-weight: 600; color: var(--ap-primary); line-height: 1.3; }

/* ==========================================================================
   Phase 3 — shared section head
   ========================================================================== */
.ap-section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 48px); }
.ap-section-head .ap-eyebrow { justify-content: center; }
.ap-section-head h2 { margin: 0 0 0.35em; }
.ap-section-lead { color: var(--ap-text-muted); font-size: 1.05rem; margin: 0; }

/* ==========================================================================
   Product Features (Why AirPurete) — compact dark-navy banner, no cards
   ========================================================================== */
.ap-features {
    background: linear-gradient(135deg, var(--ap-primary-dark) 0%, var(--ap-primary) 58%, var(--ap-blue) 100%);
    color: #dbe7ee;
    padding-block: clamp(26px, 2.4vw, 34px);
    position: relative;
    overflow: hidden;
}
/* Very subtle airflow glow (CSS only, low opacity) */
.ap-features::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1100px 320px at 50% -12%, rgba(255, 255, 255, 0.07), transparent 70%);
}
.ap-features > .ap-container { position: relative; z-index: 1; }

.ap-features__head { text-align: center; max-width: 720px; margin: 0 auto clamp(16px, 2vw, 22px); }
.ap-features__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ap-green);
    margin: 0 0 0.6em;
}
.ap-features__head h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.35em;
}
.ap-features__lead { color: rgba(255, 255, 255, 0.72); font-size: 1rem; margin: 0; }

.ap-features__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* mobile: 2 columns */
    gap: 18px 6px;
}
@media (min-width: 700px)  { .ap-features__grid { grid-template-columns: repeat(4, 1fr); gap: 20px 6px; } }
@media (min-width: 1100px) { .ap-features__grid { grid-template-columns: repeat(8, 1fr); gap: 18px 0; } }

.ap-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2px 12px;
}
/* Subtle vertical separators between columns when 8 sit per row */
@media (min-width: 1100px) {
    .ap-feature + .ap-feature::before {
        content: '';
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 1px;
        background: rgba(255, 255, 255, 0.14);
    }
    /* No separator at the start of each row (items 1 and 9) */
    .ap-feature:nth-child(8n + 1)::before { content: none; }
}
.ap-feature__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(121, 185, 60, 0.55);
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.ap-feature__icon img { width: 22px; height: 22px; }
/* Scoped to .ap-features so these win over the legacy Porto `h3`/`p` base
   styles that otherwise dim/uppercase the text on the dark banner. */
.ap-features .ap-feature__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-transform: none;
}
.ap-features .ap-feature__desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    /* keep every item to 1–2 short lines so the banner stays compact */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Phase 3 — Commercial products carousel (manual, no autoplay)
   ========================================================================== */
.ap-commercial__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}
.ap-commercial__intro { max-width: 640px; }
.ap-commercial__intro h2 { margin: 0 0 0.3em; }
.ap-commercial__viewall {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    color: var(--ap-primary);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ap-commercial__viewall span { display: inline-block; transition: transform 0.18s ease; }
.ap-commercial__viewall:hover span { transform: translateX(4px); }

.ap-carousel { display: flex; align-items: center; gap: 10px; }
.ap-carousel__track {
    --vis: 1;
    --cgap: 20px;
    list-style: none;
    margin: 0;
    padding: 6px 2px;
    display: flex;
    gap: var(--cgap);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ap-carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 600px)  { .ap-carousel__track { --vis: 2; } }
@media (min-width: 900px)  { .ap-carousel__track { --vis: 3; } }
@media (min-width: 1200px) { .ap-carousel__track { --vis: 4; } }
@media (min-width: 1440px) { .ap-carousel__track { --vis: 6; } }

.ap-carousel__item {
    flex: 0 0 calc((100% - (var(--vis) - 1) * var(--cgap)) / var(--vis));
    scroll-snap-align: start;
}
.ap-carousel__item .ap-card { height: 100%; }
/* Keep carousel cards tidy/uniform; full text stays in the DOM for crawlers/AT */
.ap-carousel .ap-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-carousel__btn {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--ap-line);
    background: #fff;
    color: var(--ap-primary);
    font-size: 1.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ap-shadow);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.ap-carousel__btn:hover { background: var(--ap-primary); color: #fff; border-color: var(--ap-primary); }
.ap-carousel__btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.ap-carousel__btn:disabled:hover { background: #fff; color: var(--ap-primary); border-color: var(--ap-line); }
/* JS hides the controls when the track can't scroll; override the display above. */
.ap-carousel__btn[hidden] { display: none; }
@media (max-width: 520px) {
    .ap-carousel { gap: 6px; }
    .ap-carousel__btn { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* ==========================================================================
   Contact / Support CTA (Phase 4) — compact horizontal band
   ========================================================================== */
.ap-cta {
    background: linear-gradient(120deg, var(--ap-primary-dark) 0%, var(--ap-primary) 62%, var(--ap-blue) 100%);
    color: #fff;
    overflow: hidden;
}
/* 60% text / 40% image split */
.ap-cta__grid {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: stretch;
    min-height: clamp(220px, 22vw, 280px);
}
.ap-cta__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: clamp(26px, 3.4vw, 44px) clamp(24px, 5vw, 72px);
}
.ap-cta__text h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.2; }
.ap-cta__text p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 60ch; font-size: 1.02rem; }
/* Green Contact button on the dark band (mirrors the hero treatment) */
.ap-cta .ap-btn--primary { background: var(--ap-green); color: var(--ap-ink); border-color: var(--ap-green); white-space: nowrap; margin-top: 4px; }
.ap-cta .ap-btn--primary:hover { background: var(--ap-green-dark); border-color: var(--ap-green-dark); color: #06232f; }

/* CTA typography lock — encodes the homepage CTA's effective values on the shared
   CTA so legacy Porto/Bootstrap base rules (h1–h6 Playfair + weight + negative
   letter-spacing, and p/a rules) cannot leak in on product pages. Scoped to the
   CTA only; does not touch product content or other components. Values match the
   homepage CTA exactly, so nothing changes visually where the CTA already looked right. */
.ap-root .ap-cta__text h2,
.ap-root .ap-cta__text p,
.ap-root .ap-cta .ap-btn {
    font-family: var(--ap-font);
    font-style: normal;
    letter-spacing: normal;
}
.ap-root .ap-cta__text h2 {
    font-size: clamp(1.4rem, 2.3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}
.ap-root .ap-cta__text p {
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.65;
}
.ap-root .ap-cta .ap-btn {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
    text-transform: none;
}

/* Right image panel. The image is absolutely positioned so its natural size
   NEVER dictates the banner height — height is controlled by the grid alone.
   A branded gradient fills the panel until/behind the image (no white gap). */
.ap-support-cta__media {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(135deg, var(--ap-blue) 0%, var(--ap-primary-dark) 100%);
}
/* Scoped to .ap-root so these win over the global `.ap-root img { height:auto }` */
.ap-root .ap-support-cta__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ap-support-cta__image[src=""],
.ap-support-cta__image:not([src]) { display: none; }
/* Soft blue→photo blend so the image reads as part of the banner (no hard edge).
   Desktop: left-to-right fade from the banner blue into the photo. */
.ap-support-cta__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--ap-primary) 0%,
        rgba(21, 94, 125, 0.7) 8%,
        rgba(21, 94, 125, 0.2) 22%,
        transparent 40%);
}

@media (max-width: 1024px) { .ap-cta__grid { grid-template-columns: 57% 43%; } }
@media (max-width: 700px) {
    .ap-cta__grid { grid-template-columns: 1fr; min-height: 0; }
    .ap-support-cta__media { height: auto; min-height: 200px; }
    /* Mobile: image sits under the text, so fade from the top instead */
    .ap-support-cta__media::before {
        background: linear-gradient(180deg,
            var(--ap-primary) 0%,
            rgba(21, 94, 125, 0.6) 16%,
            transparent 42%);
    }
}

/* ==========================================================================
   Resources / Insights (Phase 5) — light editorial placeholders
   ========================================================================== */
/* Compact editorial strip — secondary to the product sections */
.ap-resources { padding-block: clamp(44px, 4vw, 56px); }
.ap-resources .ap-section-head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.ap-resources__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1000px) { .ap-resources__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ap-resources__grid { grid-template-columns: 1fr; } }

/* Homepage Blog strip reuses the shared .ap-carousel but caps the visible cards
   at 4 (the product track goes up to 6). Placed after the base .ap-carousel__track
   breakpoints so these --vis values win the cascade at equal specificity:
   mobile 1-up swipe carousel, small tablet 2-up, desktop (>=900px) up to 4-up. */
.ap-resources__track { --vis: 1; --cgap: clamp(16px, 1.6vw, 22px); }
@media (min-width: 600px) { .ap-resources__track { --vis: 2; } }
@media (min-width: 900px) { .ap-resources__track { --vis: 4; } }

.ap-resource {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    box-shadow: var(--ap-shadow);
}
/* Whole clickable card (first card only) */
.ap-resource__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ap-resource__media {
    position: relative;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-grad-brand-2);
    border-bottom: 3px solid var(--ap-green);
    overflow: hidden;
}
.ap-resource__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 24px);
}
.ap-resource__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 17px 17px;
    flex: 1 1 auto;
}
.ap-resource__title { margin: 0; font-size: 1rem; color: var(--ap-primary); line-height: 1.3; }
.ap-resource__desc { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ap-text-muted); flex: 1 1 auto; }
.ap-resource__cta {
    margin-top: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ap-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ap-resource__cta span { display: inline-block; transition: transform 0.18s ease; }
/* Subtle hover only on the linked card */
.ap-resource--link { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.ap-resource--link:hover,
.ap-resource--link:focus-within { transform: translateY(-4px); box-shadow: var(--ap-shadow-hover); border-color: var(--ap-green); }
.ap-resource--link:hover .ap-resource__cta span { transform: translateX(4px); }

/* ========================
   Official AirPurete Video
   ======================== */
/* Compact, restrained brand element near the footer*/
.ap-video { padding-block: clamp(36px, 3.5vw, 48px); }
.ap-video .ap-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}
.ap-video .ap-section-head { margin: 0; max-width: none; text-align: left; }
.ap-video .ap-section-head h2 { font-size: clamp(1.35rem, 2vw, 1.85rem); }
.ap-video__frame {
    max-width: none;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ap-line);
    box-shadow: var(--ap-shadow-hover);
    background: #0a2b3a;
}
.ap-video__embed { width: 100%; height: 100%; border: 0; display: block; }
/* Small screens: stack (text first, video second); video spans full width. */
@media (max-width: 768px) {
    .ap-video .ap-container { grid-template-columns: 1fr; gap: 26px; }
    .ap-video .ap-section-head { text-align: center; }
}

/* ==========================================================================
   Article / resource reading column (e.g. Understanding MERV Ratings)
   ========================================================================== */
.ap-article { max-width: 900px; margin: 0 auto; }
.ap-article .ap-lead { font-size: 1.12rem; color: var(--ap-text-muted); margin: 0 0 1.4em; }
.ap-article h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ap-primary); margin: 1.6em 0 0.5em; }
.ap-article h3 { font-size: 1.15rem; color: var(--ap-blue); margin: 1.3em 0 0.35em; }
.ap-article p { margin: 0 0 1.1em; color: var(--ap-text); line-height: 1.75; }
.ap-article ul { margin: 0 0 1.3em; padding-left: 1.25em; color: var(--ap-text); }
.ap-article li { margin-bottom: 0.5em; line-height: 1.65; }
.ap-article a { color: var(--ap-primary); font-weight: 600; }
.ap-article h2 { scroll-margin-top: 90px; }

/* Article page band eyebrow (lighter green for contrast on navy) */
.ap-page-band .ap-eyebrow { color: #bfe08c; }

/* Feature/hero image — branded gradient placeholder until a real src is set */
.ap-article-hero { max-width: 900px; margin: 0 auto clamp(22px, 3vw, 34px); }
.ap-article-hero__frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ap-line);
    background: var(--ap-grad-brand-2);
}
.ap-article-hero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 26px);
}
.ap-root .ap-article-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.ap-article-hero__img[src=""],
.ap-article-hero__img:not([src]) { display: none; }
/* Until a real hero image is supplied, hide the whole figure (no large empty
   placeholder block). The article flows band -> intro -> TOC. When a src is set
   the figure appears automatically. */
.ap-article-hero:has(.ap-article-hero__img[src=""]),
.ap-article-hero:has(.ap-article-hero__img:not([src])) { display: none; }

/* Table of contents */
.ap-toc {
    background: var(--ap-bg-soft);
    border: 1px solid var(--ap-line);
    border-left: 3px solid var(--ap-green);
    border-radius: var(--ap-radius);
    padding: 16px 20px;
    margin: 0 0 28px;
}
.ap-toc__title { margin: 0 0 8px; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ap-primary); }
.ap-toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ap-toc a { color: var(--ap-blue); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.ap-toc a:hover { text-decoration: underline; }

/* Callout / checklist block */
.ap-callout {
    background: var(--ap-bg-soft);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    padding: 22px 24px;
    margin: 30px 0;
}
.ap-callout h3 { margin: 0 0 0.5em; color: var(--ap-primary); font-size: 1.1rem; }
.ap-callout ul { margin: 0; padding-left: 1.2em; }
.ap-callout li { margin-bottom: 0.4em; }

/* Article content blocks — comparison tables, sources, related links & CTA
   (used by the commercial-focused blog posts) */
.ap-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.ap-table-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ap-table-wrap th, .ap-table-wrap td { border: 1px solid #dce7eb; padding: 0.8rem; text-align: left; vertical-align: top; }
.ap-table-wrap th { background: #edf4f6; color: #214c63; }
.ap-sources { margin-top: 2.5rem; font-size: 0.92rem; }
.ap-sources li { margin: 0.4rem 0; }
.ap-article__related { border-top: 1px solid #dce7eb; margin-top: 2rem; padding-top: 1.25rem; }
.ap-article__cta { background: #e9f1e4; border-left: 4px solid #9dca5a; padding: 1.25rem; margin: 2rem 0; border-radius: 4px; }
.ap-article__cta h3 { margin-top: 0; }
.ap-article__cta a { font-weight: 700; }

/* Related resources */
.ap-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .ap-related { grid-template-columns: 1fr; } }
.ap-related li { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 16px 18px; }
.ap-related a { font-weight: 700; color: var(--ap-primary); text-decoration: none; }
.ap-related a:hover { text-decoration: underline; }
.ap-related p { margin: 0.3em 0 0; color: var(--ap-text-muted); font-size: 0.9rem; }

/* Compact article contact CTA (no image split) */
.ap-cta__simple-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    padding-block: clamp(28px, 3vw, 40px);
}
.ap-cta__simple-inner h2 { color: #fff; margin: 0 0 0.3em; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.ap-cta__simple-inner p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 60ch; }

/* Homepage resource card image (covers the gradient/icon placeholder when set) */
.ap-root .ap-resource__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.2s ease; }
.ap-resource__img[src=""],
.ap-resource__img:not([src]) { display: none; }
.ap-resource--link:hover .ap-resource__img { transform: scale(1.04); }

/* Small category eyebrow on resource cards (Resources hub) */
.ap-resource__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ap-green-dark);
}

/* ==========================================================================
   Resources hub — featured article
   ========================================================================== */
.ap-featured {
    display: grid;
    grid-template-columns: 55% 45%;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    box-shadow: var(--ap-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ap-featured:hover,
.ap-featured:focus-visible { transform: translateY(-4px); box-shadow: var(--ap-shadow-hover); border-color: var(--ap-green); }
.ap-featured__media {
    position: relative;
    overflow: hidden;
    min-height: clamp(230px, 26vw, 340px);
    background: var(--ap-grad-brand-2);
}
.ap-root .ap-featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.ap-featured:hover .ap-featured__img { transform: scale(1.03); }
.ap-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: clamp(24px, 3vw, 42px);
}
.ap-featured__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ap-green-dark);
}
.ap-featured__title { margin: 0; color: var(--ap-primary); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }
.ap-featured__desc { margin: 0; color: var(--ap-text-muted); font-size: 0.98rem; line-height: 1.6; }
.ap-featured__cta { margin-top: 6px; font-weight: 800; color: var(--ap-primary); display: inline-flex; align-items: center; gap: 8px; }
.ap-featured__cta span { display: inline-block; transition: transform 0.18s ease; }
.ap-featured:hover .ap-featured__cta span { transform: translateX(4px); }
@media (max-width: 800px) {
    .ap-featured { grid-template-columns: 1fr; }
    .ap-featured__media { min-height: 190px; }
}

/* "View all resources" link under the homepage Resources strip */
.ap-resources__more { text-align: center; margin-top: clamp(22px, 2.4vw, 32px); }
.ap-resources__more a {
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem;
    color: var(--ap-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.ap-resources__more a span { display: inline-block; transition: transform 0.18s ease; }
.ap-resources__more a:hover span { transform: translateX(4px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ap-footer {
    background: var(--ap-primary-dark);
    color: #cddfe8;
    margin-top: 0;
}
.ap-footer a { color: #fff; text-decoration: none; }
.ap-footer a:hover { color: #bfe08c; text-decoration: none; }
.ap-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
    gap: 32px 40px;
    padding-block: clamp(44px, 4.5vw, 64px);
}
@media (max-width: 1040px) { .ap-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .ap-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ap-footer__grid { grid-template-columns: 1fr; } }

/* Brand column — the real AirPurete logo shown in its original colours
   (transparent PNG, no filter/invert/opacity treatment). */
.ap-footer__logo { display: inline-flex; margin: 0 0 14px; }
.ap-footer__logo img { width: 170px; height: auto; }
.ap-footer__brand p {
    margin: 0;
    max-width: 42ch;
    color: #a9c4d1;
    font-size: 0.95rem;
    line-height: 1.6;
}
.ap-footer__col h2 {
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin: 0 0 16px;
}
.ap-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ap-footer__col li { margin-bottom: 11px; font-size: 0.95rem; }

/* Contact column — small icon + text rows */
.ap-footer__contact-list { list-style: none; margin: 0; padding: 0; }
.ap-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
    color: #a9c4d1;
    font-size: 0.95rem;
    line-height: 1.5;
}
.ap-footer__contact-list svg {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin-top: 2px;
    color: var(--ap-green);
}
.ap-footer__contact-list a { color: #dcebf2; }
.ap-footer__contact-list a:hover { color: #bfe08c; }

/* Social — subtle circular icon buttons */
.ap-footer__social {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ap-footer__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ap-footer__social-btn svg { width: 17px; height: 17px; }
.ap-footer__social-btn:hover { background: var(--ap-green); border-color: var(--ap-green); color: var(--ap-ink); }
.ap-footer__social-btn:focus-visible { outline: 2px solid #bfe08c; outline-offset: 2px; }

/* Bottom bar — thin divider + centered copyright only */
.ap-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-block: 20px;
    font-size: 0.88rem;
    text-align: center;
    color: #9fbecd;
}

/* ==========================================================================
   Reduced motion — disable transitions/animations globally
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================
   Shared contact form
   ===================*/
.ap-form { width: 100%; }
.ap-form__note { margin: 0 0 18px; font-size: 0.9rem; color: var(--ap-text-muted); }
.ap-form__req { color: #c0392b; font-weight: 700; }

.ap-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 18px;
}
.ap-form__field { display: flex; flex-direction: column; min-width: 0; }
.ap-form__field--full { grid-column: 1 / -1; }

.ap-form__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ap-text);
    margin-bottom: 6px;
}

.ap-form__input,
.ap-form__select,
.ap-form__textarea {
    font: inherit;
    color: var(--ap-text);
    width: 100%;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ap-form__textarea { min-height: 120px; line-height: 1.6; resize: vertical; }

/* CSS-only chevron for the native select (no image asset) */
.ap-form__select {
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6670' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 8px;
}

.ap-form__input::placeholder,
.ap-form__textarea::placeholder { color: #9aa6ad; }

.ap-form__input:focus,
.ap-form__select:focus,
.ap-form__textarea:focus {
    outline: none;
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3px rgba(21, 94, 125, 0.15);
}

/* Native validation styling once the user has interacted */
.ap-form__input:user-invalid,
.ap-form__select:user-invalid,
.ap-form__textarea:user-invalid {
    border-color: #c0392b;
}

.ap-form__actions { margin-top: 22px; }
.ap-form__submit { width: 100%; }
@media (min-width: 560px) {
    .ap-form__submit { width: auto; min-width: 210px; }
}

/* ===============
   Request a Quote
   ==============*/

/* Persistent trigger — desktop: vertical tab pinned to the right edge */
.ap-quote-trigger {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    margin: 0;
    border: 0;
    cursor: pointer;
    font-family: var(--ap-font);
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    color: var(--ap-ink);
    background: var(--ap-green);
    padding: 16px 9px;
    border-radius: var(--ap-radius) 0 0 var(--ap-radius);
    box-shadow: -2px 3px 12px rgba(10, 43, 58, 0.28);
    writing-mode: vertical-rl;
    transition: background 0.15s ease;
}
.ap-quote-trigger:hover { background: var(--ap-green-dark); }

/* Mobile: not a vertical tab — a persistent pill CTA bottom-right */
@media (max-width: 700px) {
    .ap-quote-trigger {
        writing-mode: horizontal-tb;
        top: auto;
        bottom: 16px;
        right: 16px;
        transform: none;
        padding: 12px 18px;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(10, 43, 58, 0.30);
    }
}

/* Overlay wrapper (transparent; product page stays visible) */
.ap-quote {
    position: fixed;
    inset: 0;
    z-index: 3000;
    visibility: hidden;      /* out of tab order + a11y tree when closed */
    pointer-events: none;
}
.ap-quote.is-open { visibility: visible; pointer-events: auto; }

.ap-quote__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 43, 58, 0.5);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.ap-quote.is-open .ap-quote__backdrop { opacity: 1; }

.ap-quote__drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    max-height: 100%;
    max-height: 100dvh;
    width: min(510px, 100%);
    background: #fff;
    box-shadow: -10px 0 40px rgba(10, 43, 58, 0.28);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    will-change: transform;
}
.ap-quote.is-open .ap-quote__drawer { transform: translateX(0); }

.ap-quote__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ap-grad-brand);
    flex: 0 0 auto;
}
.ap-quote__head .ap-quote__title { margin: 0; color: #fff; font-size: 1.15rem; }
.ap-quote__close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    width: 40px; height: 40px;
    border-radius: var(--ap-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ap-quote__close:hover { background: rgba(255, 255, 255, 0.15); }

.ap-quote__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.ap-quote__intro { margin: 0 0 18px; color: var(--ap-text-muted); font-size: 0.95rem; }

/* Lock background scrolling while the drawer is open */
body.ap-quote-lock { overflow: hidden; }


.ap-quote__head { padding: 12px 20px; }
.ap-quote__body { padding: 12px 20px 14px; }
.ap-quote__drawer .ap-quote__intro { margin: 0 0 10px; }
.ap-quote__drawer .ap-form__note { margin: 0 0 8px; }
.ap-quote__drawer .ap-form__grid { gap: 10px 18px; }
.ap-quote__drawer .ap-form__label { margin-bottom: 3px; }
.ap-quote__drawer .ap-form__input,
.ap-quote__drawer .ap-form__select,
.ap-quote__drawer .ap-form__textarea { padding: 8px 12px; }
.ap-quote__drawer .ap-form__select { padding-right: 36px; }
.ap-quote__drawer .ap-form__textarea { min-height: 72px; height: 72px; }
.ap-quote__drawer .ap-form__actions { margin-top: 10px; }

/* Spam trap (honeypot): a hidden field Must be display:none */
.ap-form__hp {
    display: none;
}
.ap-form__status:not(:empty) {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--ap-radius);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ap-form__status.is-success { background: #eaf5e1; color: #2f6b17; border-color: var(--ap-green); }
.ap-form__status.is-error   { background: #fdecea; color: #a12a1e; border-color: #c0392b; }

/* ==========================================================================
   Scroll-to-top button — global, injected on every page by site-layout.js.
   Hidden near the top; JS toggles .is-visible past the scroll threshold.
   ========================================================================== */
.ap-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;              /* above page content; below the header (drawer/modals use 3000+) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ap-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--ap-shadow-hover);
    /* Hidden + out of tab order / a11y tree until revealed */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.ap-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.ap-to-top:hover { background: var(--ap-primary-dark); }
.ap-to-top:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; }
.ap-to-top__icon { display: block; width: 22px; height: 22px; fill: currentColor; }

/* On mobile product pages the "Request a Quote" pill sits at bottom-right; lift the
   scroll-to-top button above it so the two floating controls never overlap. */
@media (max-width: 700px) {
    body:has(.ap-quote-trigger) .ap-to-top { bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-to-top { transition: background 0.15s ease; transform: none; }
    .ap-to-top.is-visible { transform: none; }
}