/* ==========================================================================
 Baker Aluminum. Homepage (hand-coded, WP Page Template)
 Brand palette + fonts extracted from Elementor Kit (post 16) + live site.
 Colors: gold #D8A827 (secondary/accent), dark gold #977702, black #000,
 body text #626262, off-white #F8F6F6, light border #DEDEDE, #fff.
 Fonts: Barlow (display H1/headings), Inter (eyebrows/subheads/buttons),
 Heebo (body).
 No em/en dashes anywhere. All colors are the client's existing brand colors.
 ========================================================================== */

:root {
 --ba-gold: #D8A827;
 --ba-gold-dark: #977702;
 --ba-black: #000000;
 --ba-ink: #1a1a1a;
 --ba-text: #626262;
 --ba-cream: #F8F6F6;
 --ba-line: #DEDEDE;
 --ba-white: #FFFFFF;

 --ba-font-display: "Barlow", "Helvetica Neue", Arial, sans-serif;
 --ba-font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
 --ba-font-body: "Heebo", "Helvetica Neue", Arial, sans-serif;

 --ba-maxw: 1240px;
 --ba-pad: clamp(20px, 5vw, 64px);
 --ba-shadow: 0 18px 50px -20px rgba(0,0,0,0.35);
 --ba-shadow-sm: 0 8px 24px -12px rgba(0,0,0,0.30);
}

/* ---- base / reset scoped to the page ---- */
.ba-home * { box-sizing: border-box; }
.ba-home {
 font-family: var(--ba-font-body);
 color: var(--ba-ink);
 background: var(--ba-white);
 line-height: 1.6;
 font-size: 16px;
 overflow-x: hidden;
}
.ba-home img { max-width: 100%; display: block; }
.ba-home a { color: inherit; text-decoration: none; }
.ba-home p { margin: 0 0 1em; color: var(--ba-text); }
.ba-home h1, .ba-home h2, .ba-home h3, .ba-home h4 {
 font-family: var(--ba-font-display);
 color: var(--ba-ink);
 margin: 0;
 line-height: 1.08;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.ba-wrap { max-width: var(--ba-maxw); margin: 0 auto; padding-left: var(--ba-pad); padding-right: var(--ba-pad); }

/* ---- shared bits ---- */
.ba-eyebrow {
 font-family: var(--ba-font-ui);
 font-weight: 600;
 font-size:.78rem;
 letter-spacing:.22em;
 text-transform: uppercase;
 color: var(--ba-gold-dark);
 display: inline-block;
}
/* Decorative dash line removed per brand direction: eyebrows are clean text only. */
.ba-eyebrow::before { content: none; display: none; }
.ba-section { padding: clamp(56px, 8vw, 110px) 0; }

/* Buttons: every variant sets an explicit, contrasting fg + bg. Hardened with
 !important so no parent theme / Elementor global button color can turn a label
 dark-on-dark (the "black box, invisible text" bug). */
.ba-home .ba-btn {
 --btn-bg: var(--ba-gold);
 --btn-fg: #1a1200;
 font-family: var(--ba-font-ui);
 font-weight: 600;
 font-size:.98rem;
 letter-spacing:.01em;
 display: inline-flex;
 align-items: center;
 gap:.6em;
 padding: 16px 30px;
 background-color: var(--btn-bg) !important;
 color: var(--btn-fg) !important;
 border-radius: 2px;
 border: 2px solid var(--btn-bg);
 cursor: pointer;
 transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
 box-shadow: 0 10px 30px -12px rgba(151,119,2,0.65);
 text-decoration: none;
}
.ba-home .ba-btn,
.ba-home .ba-btn:link,
.ba-home .ba-btn:visited,
.ba-home .ba-btn:hover,
.ba-home .ba-btn:active { color: var(--btn-fg) !important; }
.ba-home .ba-btn svg { width: 18px; height: 18px; color: var(--btn-fg) !important; stroke: currentColor; }
.ba-home .ba-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(151,119,2,0.8); }
.ba-home .ba-btn--ghost {
 --btn-bg: transparent;
 --btn-fg: #ffffff;
 border-color: rgba(255,255,255,0.55);
 box-shadow: none;
}
.ba-home .ba-btn--ghost:hover { --btn-bg: var(--ba-gold); --btn-fg: #1a1200; border-color: var(--ba-gold); }
.ba-home .ba-btn--dark { --btn-bg: var(--ba-ink); --btn-fg: #ffffff; box-shadow: var(--ba-shadow-sm); }

/* ==========================================================================
 HERO
 ========================================================================== */
.ba-hero {
 position: relative;
 /* Shorter hero: trimmed from clamp(620px, 92vh, 960px) so it is noticeably
 less tall while badges, eyebrow, H1 and quote still sit comfortably. */
 min-height: clamp(440px, 66vh, 680px);
 display: flex;
 align-items: center;
 color: #fff;
 overflow: hidden;
 background: var(--ba-black);
}
.ba-hero__slides { position: absolute; inset: 0; z-index: 0; }
.ba-hero__slide {
 position: absolute; inset: 0;
 background-size: cover;
 background-position: center;
 opacity: 0;
 transform: scale(1.06);
 transition: opacity 1.4s ease, transform 7s ease;
 will-change: opacity, transform;
}
.ba-hero__slide.is-active { opacity: 1; transform: scale(1); }
.ba-hero__scrim {
 position: absolute; inset: 0; z-index: 1;
 background:
 linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.66) 42%, rgba(0,0,0,0.20) 72%, rgba(0,0,0,0.35) 100%),
 linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
}
.ba-hero__grain { position: absolute; inset: 0; z-index: 1; opacity:.05; pointer-events: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ba-hero__inner {
 position: relative; z-index: 2;
 width: 100%;
 max-width: var(--ba-maxw);
 margin: 0 auto;
 padding: clamp(64px,8vh,100px) var(--ba-pad) clamp(40px,5vh,60px);
}
.ba-hero__panel { max-width: 720px; }
.ba-hero__badges-top { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.ba-hero__badge { background: #fff; border-radius: 8px; padding: 8px 12px; box-shadow: var(--ba-shadow-sm); }
.ba-hero__badge img { height: 42px; width: auto; }
.ba-hero__eyebrow { color: var(--ba-gold); }
.ba-hero__eyebrow::before { background: var(--ba-gold); }
.ba-hero h1 {
 color: #fff;
 /* Reduced 30% from clamp(1.9rem, 3.2vw, 3.1rem) per design direction. */
 font-size: clamp(1.33rem, 2.24vw, 2.17rem);
 line-height: 1.15;
 margin: 20px 0 0;
 text-wrap: balance;
 text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.ba-hero__quote {
 margin: 40px 0 0;
 padding: 6px 0 6px 20px;
 border-left: 3px solid var(--ba-gold);
 font-family: var(--ba-font-ui);
 font-style: italic;
 font-size: 1.05rem;
 color: #ffffff;
}
.ba-hero__estimate {
 margin-top: 34px;
 padding: 24px 26px;
 background: rgba(0,0,0,0.42);
 backdrop-filter: blur(6px);
 border: 1px solid rgba(255,255,255,0.14);
 border-radius: 10px;
 max-width: 560px;
}
.ba-hero__estimate h2 {
 font-family: var(--ba-font-ui);
 font-weight: 700;
 color: var(--ba-gold);
 font-size: 1.1rem;
 letter-spacing:.01em;
 margin-bottom: 8px;
}
.ba-hero__estimate p { color: #e7e7e7; font-size:.96rem; margin-bottom: 6px; }
.ba-hero__estimate.ba-hero__area { color: #fff; font-weight: 500; font-family: var(--ba-font-ui); font-size:.92rem; margin: 4px 0 20px; }
.ba-hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ==========================================================================
 TRUST STRIP
 ========================================================================== */
.ba-trust { background: var(--ba-ink); color: #fff; }
.ba-trust__grid {
 display: grid; grid-template-columns: repeat(3, 1fr);
 max-width: var(--ba-maxw); margin: 0 auto;
}
.ba-trust__cell {
 /* Reduced vertical padding to shorten the credibility banner. */
 padding: clamp(20px, 2.6vw, 32px) clamp(20px,3vw,40px);
 text-align: center;
 position: relative;
}
.ba-trust__cell +.ba-trust__cell { border-left: 1px solid rgba(255,255,255,0.10); }
.ba-trust__icon { color: var(--ba-gold); margin: 0 auto 10px; width: 34px; height: 34px; }
.ba-trust__icon svg { width: 34px; height: 34px; }
.ba-trust__cell h3 {
 color: #fff;
 font-size: clamp(1.15rem, 2vw, 1.6rem);
 line-height: 1.1;
 text-transform: uppercase;
 letter-spacing:.02em;
}
.ba-trust__cell h3.ba-accent { color: var(--ba-gold); display: block; }
@media (max-width: 760px){
.ba-trust__grid { grid-template-columns: 1fr; }
.ba-trust__cell +.ba-trust__cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); }
}

/* ==========================================================================
 SERVICES
 ========================================================================== */
.ba-services { background: var(--ba-cream); }
.ba-services__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px,5vw,64px); }
.ba-services__head h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 14px; text-transform: capitalize; }
.ba-services__grid {
 /* 2 columns x 2 rows (4 cards). Cards get larger at 2-across; container width
 unchanged (not full-bleed). */
 display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.ba-card {
 position: relative;
 min-height: 460px;
 border-radius: 12px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 color: #fff;
 box-shadow: var(--ba-shadow-sm);
 isolation: isolate;
}
.ba-card__bg {
 position: absolute; inset: 0; z-index: -2;
 background-size: cover; background-position: center;
 transition: transform .7s ease;
}
.ba-card::after {
 content: ""; position: absolute; inset: 0; z-index: -1;
 /* Slightly darkened at the top too, so the now top-aligned heading stays legible
 over the brighter part of the image. */
 background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 28%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.92) 100%);
 transition: background .4s ease;
}
.ba-card:hover.ba-card__bg { transform: scale(1.08); }
/* Body is a full-height flex column: heading + description sit at the top, and the
 divider (top border of.ba-card__great) plus the Great For chips and Learn More
 are pushed to the bottom via margin-top:auto so they align across all cards. */
.ba-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ba-card__body h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.ba-card__body p { color: rgba(255,255,255,0.85); font-size:.93rem; margin-bottom: 14px; }
.ba-card__great {
 font-family: var(--ba-font-ui); font-weight: 600; font-size:.74rem;
 letter-spacing:.16em; text-transform: uppercase; color: var(--ba-gold);
 /* margin-top:auto pushes this divider (its top border) and everything after it
 (chips + Learn More) to the bottom of the card. */
 margin-top: auto;
 padding-top: 14px; margin-bottom: 9px; border-top: 1px solid rgba(255,255,255,0.28);
}
/* "Great For:" use-case chips: small translucent pills that read cleanly on the
 dark card image. */
.ba-card__uses {
 list-style: none; margin: 0 0 16px; padding: 0;
 display: flex; flex-wrap: wrap; gap: 6px;
}
.ba-card__uses li {
 font-family: var(--ba-font-ui); font-weight: 500; font-size:.72rem;
 line-height: 1.3; color: #ffffff;
 background: rgba(255,255,255,0.15);
 border: 1px solid rgba(255,255,255,0.24);
 padding: 3px 10px; border-radius: 999px;
 backdrop-filter: blur(2px);
}
.ba-card__link {
 font-family: var(--ba-font-ui); font-weight: 600; font-size:.9rem;
 color: #fff; display: inline-flex; align-items: center; gap: 8px;
 transition: gap .2s ease, color .2s ease;
}
.ba-card__link svg { width: 16px; height: 16px; color: var(--ba-gold); transition: transform .2s ease; }
.ba-card:hover.ba-card__link { color: var(--ba-gold); }
.ba-card:hover.ba-card__link svg { transform: translateX(5px); }
/* Stretched link: the whole card is the click target while "Learn More" stays the
 visible affordance. The chips/text are non-interactive so no nested links break it. */
.ba-card { cursor: pointer; }
.ba-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ba-card__link:focus-visible { outline: none; }
.ba-card__link:focus-visible::after { outline: 3px solid var(--ba-gold); outline-offset: -4px; border-radius: 12px; }
@media (max-width: 560px){.ba-services__grid { grid-template-columns: 1fr; }.ba-card{ min-height: 380px; } }

/* ==========================================================================
 RIEGSECKER SPOTLIGHT
 ========================================================================== */
.ba-spotlight { background: var(--ba-ink); color: #fff; position: relative; overflow: hidden; }
.ba-spotlight::before {
 content: "\201C"; position: absolute; top: -40px; left: 2vw;
 font-family: var(--ba-font-display); font-size: 22rem; line-height: 1;
 color: var(--ba-gold); opacity:.12;
}
.ba-spotlight__inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.ba-spotlight__lead {
 font-family: var(--ba-font-ui); color: var(--ba-gold); font-weight: 500;
 font-size: 1rem; margin-bottom: 22px;
}
.ba-spotlight h2 {
 color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.9rem); margin-bottom: 26px;
}
.ba-spotlight__text { color: #ffffff !important; font-size: 1.1rem; line-height: 1.75; }
.ba-spotlight__stars { color: var(--ba-gold); letter-spacing: 4px; font-size: 1.2rem; margin-bottom: 18px; }
.ba-spotlight__author {
 font-family: var(--ba-font-ui); font-weight: 600; color: #fff; letter-spacing:.04em;
 margin-top: 22px; text-transform: uppercase; font-size:.9rem;
}
.ba-spotlight__author::before { content: ""; display: block; width: 44px; height: 2px; background: var(--ba-gold); margin: 0 auto 16px; }

/* ==========================================================================
 BUILDING HISTORY
 ========================================================================== */
.ba-history { background: var(--ba-white); }
.ba-history__grid {
 display: grid; grid-template-columns: 1.05fr.95fr; gap: clamp(30px,5vw,70px);
 align-items: center; max-width: var(--ba-maxw); margin: 0 auto;
}
.ba-history__media { position: relative; }
.ba-history__media.ba-img-main {
 border-radius: 12px; box-shadow: var(--ba-shadow); width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.ba-history__media.ba-img-float {
 position: absolute; right: -18px; bottom: -30px; width: 46%;
 border-radius: 10px; border: 6px solid #fff; box-shadow: var(--ba-shadow);
 aspect-ratio: 1/1; object-fit: cover;
}
.ba-history__badge {
 position: absolute; left: -14px; top: -14px; background: var(--ba-gold); color: #1a1200;
 font-family: var(--ba-font-ui); font-weight: 700; font-size:.8rem; letter-spacing:.04em;
 padding: 14px 16px; border-radius: 8px; box-shadow: var(--ba-shadow-sm); max-width: 150px; line-height: 1.2;
}
.ba-history__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 14px 0 8px; }
.ba-history__copy.ba-history__sub {
 font-family: var(--ba-font-ui); font-weight: 600; color: var(--ba-gold-dark);
 font-size: 1.1rem; margin-bottom: 20px; display: block;
}
.ba-history__copy p { font-size: 1.02rem; }
.ba-history__copy.ba-btn { margin-top: 12px; }
@media (max-width: 900px){
.ba-history__grid { grid-template-columns: 1fr; }
.ba-history__media { max-width: 520px; margin: 0 auto 44px; }
}

/* ==========================================================================
 BEFORE / AFTER
 ========================================================================== */
.ba-ba { background: var(--ba-cream); position: relative; }
.ba-ba__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px,5vw,60px); }
.ba-ba__head h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-top: 14px; }
.ba-ba__head p { font-size: 1.05rem; margin-top: 14px; }
/* Full-bleed gallery: exactly TWO columns (2 cols x 6 rows = 12 pairs), spanning
 the full page width (wider than the centered content column), so each pair is
 about half the page wide and the images are large. Gaps between rows AND between
 the two columns are exactly 50px. Each pair card design/labels/caption unchanged.
 Drops to 1 column on mobile. */
.ba-ba__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 28px; /* match.ba-services__grid gap */
 max-width: var(--ba-maxw); /* match Our Services centered container width (drop full-bleed) */
 margin: 0 auto;
 padding-left: var(--ba-pad);
 padding-right: var(--ba-pad);
}
@media (max-width: 640px){.ba-ba__grid { grid-template-columns: 1fr; gap: 32px; } }
.ba-ba__item {
 margin: 0; /* reset default <figure> inline margin (~40px) - the real center gap */
 background: #fff; border-radius: 14px; overflow: hidden;
 box-shadow: var(--ba-shadow); border: 1px solid var(--ba-line);
 display: flex; flex-direction: column;
}
.ba-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--ba-line); }
.ba-ba__cell { position: relative; background: #eee; }
.ba-ba__cell img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba-ba__tag {
 position: absolute; top: 14px; left: 14px;
 font-family: var(--ba-font-ui); font-weight: 700; font-size:.74rem;
 letter-spacing:.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 3px;
 color: #fff; backdrop-filter: blur(2px);
}
.ba-ba__tag--before { background: rgba(26,26,26,0.82); }
.ba-ba__tag--after { background: var(--ba-gold); color: #1a1200; }
.ba-ba__caption {
 padding: 22px 26px; font-family: var(--ba-font-body); color: var(--ba-text);
 font-size: 1.05rem; line-height: 1.55; border-top: 3px solid var(--ba-gold);
}
@media (max-width: 560px){.ba-ba__pair { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
 REVIEWS
 ========================================================================== */
.ba-reviews { background: var(--ba-white); }
.ba-reviews__head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px,5vw,60px); }
.ba-reviews__head h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-top: 14px; }
.ba-reviews__grid { columns: 3; column-gap: 24px; }
@media (max-width: 1000px){.ba-reviews__grid { columns: 2; } }
@media (max-width: 640px){.ba-reviews__grid { columns: 1; } }
.ba-review {
 break-inside: avoid; -webkit-column-break-inside: avoid;
 background: var(--ba-cream); border: 1px solid var(--ba-line);
 border-radius: 12px; padding: 26px 24px; margin-bottom: 24px;
 position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ba-review:hover { transform: translateY(-4px); box-shadow: var(--ba-shadow-sm); border-color: var(--ba-gold); }
.ba-review__stars { color: var(--ba-gold); letter-spacing: 3px; font-size: 1rem; margin-bottom: 12px; }
.ba-review h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--ba-ink); }
.ba-review p { font-size:.95rem; color: var(--ba-text); margin-bottom: 16px; }
.ba-review__author {
 font-family: var(--ba-font-ui); font-weight: 600; font-size:.85rem; color: var(--ba-ink);
 display: flex; align-items: center; gap: 10px;
}
.ba-review__author::before {
 content: ""; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
 background: var(--ba-gold); color: #1a1200; display: inline-block;
 background-image: linear-gradient(135deg, var(--ba-gold), var(--ba-gold-dark));
}
.ba-reviews__more { text-align: center; margin-top: 20px; }

/* ==========================================================================
 BOTTOM CTA
 ========================================================================== */
.ba-cta {
 position: relative; color: #fff; text-align: center; overflow: hidden;
 background: var(--ba-black);
}
.ba-cta__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity:.28; }
.ba-cta__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.9)); }
.ba-cta__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.ba-cta__lead { font-family: var(--ba-font-ui); color: var(--ba-gold); font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; }
.ba-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 18px; }
.ba-cta p { color: #d7d7d7; font-size: 1.05rem; max-width: 620px; margin: 0 auto 12px; }
.ba-cta__area { color: #fff; font-family: var(--ba-font-ui); font-weight: 500; margin-bottom: 30px; }
.ba-cta__row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

/* ---- entrance animation ---- */
@media (prefers-reduced-motion: no-preference){
.ba-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.ba-reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
 DARK-SECTION LEGIBILITY SAFETY NET (audit fix)
 Every dark/black-background section forces its body text to white / very-near
 white so nothing renders dark-on-dark. Intentional GOLD accents are re-asserted
 with !important so they always stay gold. Uses :where() (zero specificity) for
 the base so per-element rules still win; placed last so equal-specificity wins.
 ========================================================================== */
.ba-hero.ba-trust.ba-spotlight.ba-cta.ba-est-hero { color: #f4f4f4; }
.ba-hero :where(p, li, span, blockquote, div),
.ba-trust :where(p, li, span),
.ba-spotlight :where(p, li, span),
.ba-cta :where(p, li, span),
.ba-est-hero :where(p, li, span) { color: #f1f1f1; }
.ba-hero :where(h1, h2, h3, h4),
.ba-trust :where(h2, h3, h4),
.ba-spotlight :where(h2, h3, h4),
.ba-cta :where(h2, h3, h4),
.ba-est-hero :where(h1, h2, h3, h4) { color: #ffffff; }
/* keep intentional gold accents legible-on-dark */
.ba-hero__eyebrow,
.ba-spotlight__lead,
.ba-spotlight__stars,
.ba-cta__lead,
.ba-card__great,
.ba-trust__cell h3.ba-accent,
.ba-est-hero.ba-eyebrow { color: var(--ba-gold) !important; }
/* keep the hero quote crisp white (item 2) even against the safety net */
.ba-hero.ba-hero__quote { color: #ffffff !important; }
/* service cards sit on dark image gradients too: keep their body text light */
.ba-card :where(p) { color: rgba(255,255,255,0.9); }
.ba-card__body h3.ba-card__link { color: #ffffff; }

/* Hero scrim: LOWERED black opacity (valid rgba; the original was malformed / missing
   the alpha comma). Left kept dark enough for the white headline to stay legible,
   fading to near-clear on the right so the hero photo reads bright. */
.ba-hero__scrim {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 55%);
}

/* Hero layout revision: text block (eyebrow + H1 + quote) top-aligned at the very top;
   H1 container full width + reduced size; BBB/Google badges moved to the bottom-right. */
.ba-hero { align-items: flex-start; }
.ba-hero__panel { max-width: 100%; }
.ba-hero h1 { font-size: clamp(1.05rem, 1.75vw, 1.6rem); }
.ba-hero__badges {
  position: absolute; z-index: 2;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(18px, 4vh, 42px);
  width: 100%; max-width: var(--ba-maxw);
  padding: 0 var(--ba-pad);
  display: flex; justify-content: flex-end; align-items: flex-end; gap: 14px;
}
@media (max-width: 640px){
  .ba-hero__badges { justify-content: flex-start; bottom: 14px; }
  .ba-hero__badge img { height: 34px; }
}

/* Force button-arrow icon size (the .ba-btn svg rule was being overridden, so the
   arrows blew up to full width). High specificity + !important pins them small. */
.ba-home .ba-btn svg, .ba-home a.ba-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; }

/* Lift the Elementor header (and its Services dropdown submenu) above the hero.
   The hero inner is z-index 2; the header was position:static/z-index:auto, so the
   dropdown rendered behind the H1. This gives the header a stacking context on top. */
.elementor-location-header { position: relative; z-index: 100; }

/* Covey quote: force white. The plain color:#fff was out-specified by `.ba-home p`
   (var(--ba-text) gray) and the intended !important rule had a dropped space. This
   wins and adds a shadow so it reads clearly over the bright hero slides. */
.ba-home .ba-hero__quote { color: #ffffff !important; text-shadow: 0 2px 14px rgba(0,0,0,0.65); }


/* Trust strip: add a space before the gold accent word (OWNED& OPERATED / UNMATCHEDSERVICE). */
.ba-trust__cell h3 .ba-accent { margin-left: .3em; }

/* September 2026 homepage review: full photos and separate solid card bodies. */
.ba-home .ba-card { min-height: 0; background: #fff; color: var(--ba-ink); justify-content: flex-start; }
.ba-home .ba-card::after { content: none; }
.ba-home .ba-card__image { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--ba-cream); transform: none; }
.ba-home .ba-card:first-child .ba-card__image { object-fit: cover; object-position: center; }
.ba-home .ba-card__body { background: #fff; padding: 24px; }
.ba-home .ba-card__body h3 { color: var(--ba-ink); font-size: 1.5rem; line-height: 1.2; }
.ba-home .ba-card__body p { color: var(--ba-text); font-size: .93rem; line-height: 1.6; }
.ba-home .ba-card__link { align-self: flex-start; margin-top: auto; padding: 12px 20px; border-radius: 5px; }
.ba-home .ba-card__link svg { color: currentColor; }
.ba-home .ba-cta__row { margin-top: 28px; }
.ba-home .ba-cta__row .ba-btn { justify-content: center; text-align: center; }
.ba-home .ba-btn:focus-visible { outline: 3px solid var(--ba-gold); outline-offset: 4px; }
@media (max-width: 560px) {
  .ba-home .ba-cta__row { flex-direction: column; align-items: stretch; }
  .ba-home .ba-cta__row .ba-btn { width: 100%; padding: 14px 18px; font-size: .9rem; }
}