/* ==========================================================================
   About Us page — overrides only. Loaded AFTER css/style.css, so these rules
   win without needing !important. Nothing here touches the GAIA landing page:
   every selector is scoped under body.about-us-page.
   ========================================================================== */

/* Hero photo — shown at its true, unaltered colors. No overlay/tint.
   The two divs below (.hero-grid, .blob) are what caused the earlier
   greenish tint: they sit inside every .hero section on the GAIA site,
   absolutely positioned on top of whatever background is set, so they
   have to be hidden here explicitly. */
body.about-us-page .hero-about {
    background-image: url('../images/hero_background.jpg');
    background-size: cover;
    background-position: center;
}
body.about-us-page .hero-about .hero-grid,
body.about-us-page .hero-about .blob {
    display: none;
}
/* Text sits on the photo without any image tint — legibility comes from a
   shadow behind the letters, not from darkening the picture itself. */
body.about-us-page .hero-about .hero-content {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.about-us-page .hero-about .section-label,
body.about-us-page .hero-about h1,
body.about-us-page .hero-about .hero-sub {
    color: #fff;
}
body.about-us-page .hero-about h1 em {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* Nav bar stays solid white here — the shared style.css makes it a
   translucent blurred white (rgba(255,255,255,0.72)) so the GAIA landing
   page's photo/pattern shows through it faintly. On this page that let the
   hero photo bleed through the header; forcing it fully opaque fixes that. */
body.about-us-page nav {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Plain white content sections so any inserted photos aren't tinted by the
   grid/blob pattern used on the GAIA landing page. */
body.about-us-page .section-hero-bg {
    background: #fff;
}
body.about-us-page .section-hero-bg .hero-grid,
body.about-us-page .section-hero-bg .blob {
    display: none;
}
body.about-us-page .specs-table {
    background: #fff;
    backdrop-filter: none;
}
body.about-us-page .specs-key {
    background: #fafafa;
}

/* Services rows that can carry an optional image (see specs-table-illustrated
   markup in the About Us HTML) — text and thumbnail sit side by side. */
body.about-us-page .specs-table-illustrated .specs-val {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
body.about-us-page .specs-table-illustrated .specs-text {
    flex: 1;
    min-width: 200px;
}
body.about-us-page .specs-thumb {
    width: 140px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    body.about-us-page .specs-thumb {
        width: 100%;
        height: 160px;
    }
}