/* ===========================================
   A&P DESIGNERS — V3 COLOR THEME
   "Israeli Flag + Earthy Orange Pop"
   Deep black · Royal blue · Warm orange · Sky blue · White
   =========================================== */

@import url('styles.css');

/* ── ROOT VARIABLE OVERRIDES ── */
:root {
  /* Deep black base */
  --black:      #040408;
  --near-black: #070710;
  --dark:       #0A0A18;
  --dark-mid:   #0E0E20;
  --dark-card:  #121228;
  --border:     rgba(0, 56, 184, 0.18);
  --muted:      #666666;
  --muted-light:#FFFFFF;

  /* V3 Palette */
  --orange: #0038B8;   /* Israeli flag Royal Blue — primary   */
  --green:  #FFFFFF;   /* Sky blue                — secondary */
  --gold:   #FFFFFF;   /* Pure white              — tertiary  */
  --blue:   #C87020;   /* Earthy warm orange      — fourth    */
  --red:    #1E5FB3;   /* Mid blue                — fifth     */
  --yellow: #22C55E;   /* Green (sparingly)       — sixth     */
}

/* ── BACKGROUND — subtle horizontal stripe echoing flag ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(0,56,184,0.03) 0px,
      rgba(0,56,184,0.03) 2px,
      transparent 2px,
      transparent 60px
    );
  background-size: 100% 60px;
}

/* ── SPLASH — natural images: NO filter, neutral dark vignettes ── */
.sc1-bg { filter: none; }
.sc2-bg { filter: none; }
.sc3-bg { filter: none; }
.sc4-bg { filter: none; }

/* Pure neutral dark overlays — NO color tint */
.sc1 .splash__scene-vignette {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 25%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 40%);
}
.sc2 .splash__scene-vignette {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 25%, rgba(0,0,0,0.74) 100%),
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 40%);
}
.sc3 .splash__scene-vignette {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 25%, rgba(0,0,0,0.70) 100%),
    linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.28) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 40%);
}
.sc4 .splash__scene-vignette {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 25%, rgba(0,0,0,0.74) 100%),
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, transparent 40%);
}

/* Scene word colors */
.sc1-word { color: #0038B8; }
.sc2-word { color: #FFFFFF; }
.sc3-word { color: #C87020; }
.sc4-word { color: #FFFFFF; }

/* Progress bar */
.splash__progress-bar {
  background: linear-gradient(90deg, #0038B8, #4A90D9, #C87020, #FFFFFF, #0038B8);
}

/* Logo accent — tiny green here, only spot */
.splash__amp--and { color: #0038B8; }
.splash__tag      { color: #22C55E; }

/* Logo stage grid */
.splash__logo-stage::before {
  background-image:
    linear-gradient(rgba(0,56,184,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,56,184,0.04) 1px, transparent 1px);
}

/* ── NAVIGATION ── */
.nav__logo-mark   { color: #0038B8; }
.nav__toggle      { background: #0038B8; }
.nav__toggle:hover { background: #002D9A; }

.nav.nav--scrolled .nav__pill {
  border-color: rgba(0, 56, 184, 0.3);
  box-shadow: 0 8px 40px rgba(0, 56, 184, 0.18);
}

/* ── FULL-SCREEN MENU ── */
.menu-link:nth-child(1) { --clr: #0038B8; }
.menu-link:nth-child(2) { --clr: #FFFFFF; }
.menu-link:nth-child(3) { --clr: #C87020; }
.menu-link:nth-child(4) { --clr: #4A90D9; }
.menu-link:nth-child(5) { --clr: #1E5FB3; }
.menu-link:nth-child(6) { --clr: #FFFFFF; }

.menu-cta       { color: #0038B8; }
.menu-cta:hover { color: #C87020; }

/* ── HERO ── */
.hero__img { filter: none; }
.hero__headline-line--2 { color: #0038B8; }

.hero__headline-accent {
  -webkit-text-stroke: 2px #C87020;
  color: transparent;
}

/* Green kept in one spot — badge pulse */
.hero__badge-pulse { background: #22C55E; }

/* Ticker — Israeli blue band */
.hero__ticker { background: #0038B8; }
.ticker__track span  { color: #FFFFFF; }
.ticker__dot { color: rgba(255,255,255,0.4) !important; }

/* Stats */
.hero__stat { border-color: rgba(0, 56, 184, 0.2); }

/* ── HERO BACKGROUND SLIDESHOW ── */
.hero__slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* 5 slides x 6s = 30s cycle (construction workers image removed) */
@keyframes heroSlide {
  0%   { opacity: 0; transform: scale(1.06); }
  3%   { opacity: 1; transform: scale(1.03); }
  17%  { opacity: 1; transform: scale(1.00); }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

.hs1 {
  background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400&q=85&auto=format&fit=crop');
  animation: heroSlide 30s 0s infinite;
}
.hs2 {
  background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1400&q=85&auto=format&fit=crop');
  animation: heroSlide 30s 6s infinite;
}
.hs4 {
  background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1400&q=85&auto=format&fit=crop');
  animation: heroSlide 30s 12s infinite;
}
.hs5 {
  background-image: url('https://images.unsplash.com/photo-1600210492493-0946911123ea?w=1400&q=85&auto=format&fit=crop');
  animation: heroSlide 30s 18s infinite;
}
.hs6 {
  background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1400&q=85&auto=format&fit=crop');
  animation: heroSlide 30s 24s infinite;
}

/* Overlay on top of slideshow */
.hero__img-overlay {
  background: linear-gradient(135deg, rgba(4,4,8,0.78) 0%, rgba(4,4,8,0.25) 70%, transparent 100%) !important;
  z-index: 2;
  position: relative;
}

/* ── TRUST BAR ── */
.trust-bar__item svg { color: #0038B8; }

/* ── BUTTONS ── */
.btn--fire {
  background: #0038B8;
  color: #FFFFFF;
  box-shadow: 0 4px 24px rgba(0, 56, 184, 0.45);
}
.btn--fire:hover {
  background: #002D9A;
  box-shadow: 0 8px 40px rgba(0, 56, 184, 0.6);
}
.btn--wire:hover { border-color: #C87020; color: #C87020; }

/* ── SECTION LABELS & TITLES ── */
.label           { color: #0038B8; }
.display-title em { color: #C87020; }

/* ── SERVICE BANDS ── */
/* Remodeling — Israeli Blue (first/premium) */
#remodeling .service-band__color-block { background: #0038B8 !important; }
#remodeling .service-band__color-block .service-band__big-label { color: rgba(255,255,255,0.15); }
#remodeling .service-band__tag  { color: #FFFFFF; }
#remodeling .service-band__cta  { background: #0038B8; color: #fff; }
#remodeling .service-item__price { color: #FFFFFF; }

/* Construction — Earthy Orange (second) */
#construction .service-band__color-block { background: #C87020 !important; }
#construction .service-band__color-block .service-band__big-label { color: rgba(255,255,255,0.15); }
#construction .service-band__tag  { color: #C87020; }
#construction .service-band__cta  { background: #C87020; color: #fff; }
#construction .service-item__price { color: #C87020; }

/* Handyman — Sky Blue (third) */
#handyman .service-band__color-block { background: #4A90D9 !important; }
#handyman .service-band__color-block .service-band__big-label { color: rgba(255,255,255,0.15); }
#handyman .service-band__tag  { color: #FFFFFF; }
#handyman .service-band__cta  { background: #4A90D9; color: #fff; }
#handyman .service-item__price { color: #FFFFFF; }

/* ── PROCESS ── */
.process__step:nth-child(1) .process__num { color: #0038B8; }
.process__step:nth-child(3) .process__num { color: #C87020; }
.process__step:nth-child(5) .process__num { color: #FFFFFF; }
.process__step:nth-child(7) .process__num { color: #FFFFFF; }

/* ── PRICING ── */
/* Remodeling — first/featured */
.pricing-card:nth-child(1) { --pc: #0038B8; }
.pricing-card:nth-child(1) .pricing-card__stripe { background: #0038B8; }
.pricing-card:nth-child(1) .pricing-card__cat   { color: #FFFFFF; }
.pricing-card:nth-child(1) .pricing-card__price { color: #0038B8; }
.pricing-card:nth-child(1) li span              { color: #FFFFFF; }
.pricing-card:nth-child(1) .pricing-card__btn   {
  background: #0038B8; border-color: #0038B8; color: #fff;
}

/* Construction — second */
.pricing-card:nth-child(2) { --pc: #C87020; }
.pricing-card:nth-child(2) .pricing-card__stripe { background: #C87020; }
.pricing-card:nth-child(2) .pricing-card__cat   { color: #C87020; }
.pricing-card:nth-child(2) .pricing-card__price { color: #C87020; }
.pricing-card:nth-child(2) li span              { color: #C87020; }
.pricing-card:nth-child(2) .pricing-card__btn   { border-color: #C87020; color: #C87020; }

/* Handyman — third */
.pricing-card:nth-child(3) { --pc: #4A90D9; }
.pricing-card:nth-child(3) .pricing-card__stripe { background: #4A90D9; }
.pricing-card:nth-child(3) .pricing-card__cat   { color: #FFFFFF; }
.pricing-card:nth-child(3) .pricing-card__price { color: #FFFFFF; }
.pricing-card:nth-child(3) li span              { color: #FFFFFF; }
.pricing-card:nth-child(3) .pricing-card__btn   { border-color: #FFFFFF; color: #FFFFFF; }

.pricing-card--featured {
  border-color: rgba(0, 56, 184, 0.5);
  box-shadow: 0 0 60px rgba(0, 56, 184, 0.15);
}
.pricing-card__badge { background: #0038B8; }

/* ── GALLERY captions ── */
.gallery__cap-tag { background: #0038B8 !important; color: #fff !important; }

/* ── AREA CHIPS ── */
.chip:hover {
  background: #0038B8;
  color: #fff;
  border-color: #0038B8;
}

/* ── REVIEWS ── */
.review-card:nth-child(1) { border-top-color: #0038B8; }
.review-card:nth-child(2) { border-top-color: #C87020; }
.review-card:nth-child(3) { border-top-color: #FFFFFF; }
.review-card:nth-child(4) { border-top-color: #1E5FB3; }

.review-card:nth-child(1) .review-card__avi { background: #0038B8; color: #fff; }
.review-card:nth-child(2) .review-card__avi { background: #C87020; color: #fff; }
.review-card:nth-child(3) .review-card__avi { background: #4A90D9; color: #fff; }
.review-card:nth-child(4) .review-card__avi { background: #1E5FB3; color: #fff; }

.reviews__big-score { color: #0038B8; }
.reviews__stars     { color: #FFD700; }
.review-card__stars { color: #FFD700; }

/* ── CONTACT / FORM ── */
.quote-form { border-top-color: #0038B8; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #0038B8;
  box-shadow: 0 0 0 3px rgba(0, 56, 184, 0.12);
}

.cta-title em { color: #C87020; }

/* ── MOBILE FLOAT ── */
.mobile-float__call { background: #0038B8; color: #fff; }

/* ── FOOTER ── */
.footer__ticker            { background: #0038B8; }
.footer__ticker-track span { color: #fff; }
.footer__phone-cta         { color: #0038B8; }
.footer__phone-cta:hover   { color: #C87020; }
.footer__cols a:hover      { color: #0038B8; }
.footer__bottom a:hover    { color: #0038B8; }
.footer__logo span:first-child { color: #0038B8 !important; }

/* ── CARD HOVER GLOW ── */
.service-card:hover {
  border-color: rgba(0, 56, 184, 0.45);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0, 56, 184, 0.2);
}

/* ── AREAS SEO TEXT ── */
.areas__seo strong { color: #0038B8; }

/* ════════════════════════════════════════════════════════
   FAQ SECTION
════════════════════════════════════════════════════════ */
.faq {
  padding: 100px 0 80px;
  background: #0A0A18;
}

.faq__grid {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.faq__item {
  border-bottom: 1px solid rgba(0,56,184,0.18);
}
.faq__item:first-child { border-top: 1px solid rgba(0,56,184,0.18); }

.faq__q {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 600;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq__q:hover { color: #0038B8; }

/* Arrow icon */
.faq__q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: #0038B8;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
}
.faq__q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}
.faq__q[aria-expanded="true"] { color: #0038B8; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__a[hidden] { display: block !important; max-height: 0; }
.faq__a.is-open  { max-height: 400px; }

.faq__a p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  padding-bottom: 22px;
}
.faq__a p strong { color: #fff; }
.faq__a p a { color: #0038B8; text-decoration: none; }
.faq__a p a:hover { text-decoration: underline; }

/* ── HERO "SERVICES" — solid orange fill instead of outline ── */
.hero__headline-accent {
  -webkit-text-stroke: 0 !important;
  color: #C87020 !important;
}

/* ── NAV LOGO — styled text (A=orange, &P=white, DESIGNERS=blue) ── */
.nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
  transition: opacity 0.2s ease;
}
.nav__logo:hover .nav__logo-text { opacity: 0.85; }

.nav__logo-top {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.logo-a   { color: #C87020; }          /* orange */
.logo-amp { color: #ffffff; font-weight: 700; font-size: 1.6rem; }
.logo-p   { color: #ffffff; }

.nav__logo-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: #4894FF;                       /* blue — same as A was before */
  text-transform: uppercase;
  padding-left: 2px;
}

/* ════════════════════════════════════════════════════════
   BEFORE / AFTER TRANSFORMATIONS SECTION
════════════════════════════════════════════════════════ */
.transformations {
  padding: 120px 0 100px;
  background: #070710;
  overflow: hidden;
}

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 48px;
}

/* Row 1: roof vent narrow-left | kitchen wide-right */
/* Single-card row — span full width */
.ba-grid--full {
  grid-template-columns: 1fr;
}

/* mobile — consolidated in second @media block below */

.ba-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Single card ── */
.ba-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  background: #0A0A18;
  border: 1px solid rgba(0,56,184,0.18);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* ── Sketch-layout card sizing ──
   Columns: kitchen (1fr left, tall) | roof+porch (1.3fr right, stacked)
   With 16:9 right cards, the kitchen stretches to ~2:3 portrait — fills perfectly.
   Bottom: deck spans full width at 21:9 panoramic crop.
*/
.ba-grid--sketch {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 32px;
  align-items: stretch;
}
.ba-grid--bottom {
  margin-top: 24px;
}

/* Kitchen: left col, spans both rows — stretches to match combined right height */
.ba-card--sketch-left {
  grid-column: 1;
  grid-row: 1 / 3;
  background: #0a0a0a;
}

/* Roof vent: top-right */
.ba-card--sketch-tr {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
}

/* Porch: bottom-right — matches roof vent height */
.ba-card--sketch-mr {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
}

/* Deck: full-width panoramic — no black bars on the 4:3 deck photos */
.ba-card--sketch-bottom {
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}

/* Deck card */
.ba-card--sketch-bottom .ba-before img,
.ba-card--sketch-bottom .ba-after  img { object-fit: cover; object-position: center; }

/* Outdoor kitchen (sketch-left) — cover fills card, no dark gaps */
.ba-card--sketch-left .ba-before img,
.ba-card--sketch-left .ba-after  img { object-fit: cover; object-position: center; }

/* Roof (sketch-tr) — contain shows full photo */
.ba-card--contain .ba-before img,
.ba-card--contain .ba-after  img { object-fit: contain !important; object-position: center; }


/* Mobile tap state handled entirely by JS inline styles */

/* ── Before image layer (always visible underneath) ── */
.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
}

.ba-before img,
.ba-after  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Tired" before look — slightly dull so the reveal pops */
.ba-before img {
  filter: none;
}

/* All cards use cover — photos fill their window perfectly, no black bars */
.ba-card--big .ba-before img,
.ba-card--big .ba-after  img { object-fit: cover; }
.ba-col .ba-card .ba-before img,
.ba-col .ba-card .ba-after  img { object-fit: cover; }

/* After layer — fast clean sweep, no dark effect */
.ba-after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease-out;
  z-index: 2;
}

.ba-card:hover .ba-after {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.5s ease-in-out;
}

/* ── BEFORE / AFTER labels ── */
.ba-labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.ba-tag {
  position: absolute;
  top: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ba-tag--before {
  left: 14px;
  background: rgba(0,0,0,0.65);
  color: #e0e0e0;
  border: 1px solid rgba(255,255,255,0.15);
}

.ba-tag--after {
  left: 14px;
  background: #0038B8;
  color: #fff;
  opacity: 0;
  transform: translateX(-6px);
}

/* on hover: before label fades out, after label fades in */
.ba-card:hover .ba-tag--before {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}
.ba-card:hover .ba-tag--after {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s;
}


/* ── Duo grid — two equal columns for portrait or landscape pairs ── */
.ba-grid--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Portrait card — matches 3:4 photo ratio (outdoor kitchen, roof) */
.ba-card--portrait-card {
  aspect-ratio: 3 / 4;
  background: #0a0a0a;
}
.ba-card--portrait-card .ba-before img,
.ba-card--portrait-card .ba-after  img {
  object-fit: cover;
  object-position: center;
}

/* Landscape card — matches 4:3 photo ratio (porch, kitchen remodel) */
.ba-card--landscape-card {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
}
.ba-card--landscape-card .ba-before img,
.ba-card--landscape-card .ba-after  img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 800px) {
  .ba-grid--duo { grid-template-columns: 1fr; gap: 14px; }
}

/* Side-by-side pair row (kitchen + upcoming) */
.ba-grid--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ba-card--pair {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
}

.ba-card--pair .ba-before img,
.ba-card--pair .ba-after  img { object-fit: cover; object-position: center; }

@media (max-width: 800px) {
  /* Stack every grid to single column */
  .ba-grid,
  .ba-grid--sketch,
  .ba-grid--pair         { grid-template-columns: 1fr; gap: 14px; }

  /* Reset grid placement on sketch cards */
  .ba-card--sketch-left,
  .ba-card--sketch-tr,
  .ba-card--sketch-mr    { grid-column: 1; grid-row: auto; }

  /* Give every card a sensible aspect ratio on mobile */
  .ba-card--sketch-left  { aspect-ratio: 3 / 4; }   /* portrait — matches kitchen photos */
  .ba-card--sketch-tr    { aspect-ratio: 4 / 3; }
  .ba-card--sketch-mr    { aspect-ratio: 4 / 3; }
  .ba-card--sketch-bottom { aspect-ratio: 4 / 3; }
  .ba-card--pair         { aspect-ratio: 4 / 3; }

  /* Kitchen card is portrait on mobile — cover fills it perfectly, no contain needed */
  .ba-card--sketch-left .ba-before img,
  .ba-card--sketch-left .ba-after  img { object-fit: cover !important; object-position: center; }

  /* Tighter row spacing on mobile */
  .ba-grid--sketch   { margin-top: 20px; }
  .ba-grid--bottom   { margin-top: 14px; }
}

/* ── Project name + location caption bar ── */
.ba-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.ba-caption__name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

.ba-caption__loc {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}


/* ── "Hover to reveal" hint badge ── */
.ba-hint {
  position: absolute;
  bottom: 52px;
  right: 14px;
  z-index: 6;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.ba-card:hover .ba-hint {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ── Card footer caption ── */
.ba-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  padding: 12px 16px 14px;
  background: linear-gradient(to top, rgba(4,4,8,0.92) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
}

.ba-footer strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
}

.ba-footer span {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* ── Sweep edge — thin bright line at the reveal boundary ── */
.ba-after::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 3px;
  background: rgba(0, 56, 184, 0.7);
  box-shadow: 0 0 12px rgba(0, 56, 184, 0.9), 0 0 24px rgba(0,56,184,0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ba-card:hover .ba-after::after {
  opacity: 1;
}

/* ── Hide edge line once fully swept ── */
.ba-card:hover .ba-after:not(.swept)::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   V4 CLIENT NOTE OVERRIDES
   - Light blue text → white globally (via --muted-light:#fff above)
   - Hero desc explicit white
   - Review quote text explicit white
   - & REMODELING → orange (set inline in HTML, CSS fallback below)
   ══════════════════════════════════════════════════════════════ */

/* Hero body copy — white */
.hero__desc { color: #fff !important; }

/* Hero & REMODELING line — orange */
.hero__headline-line--4 { color: #C87020 !important; }

/* Review card quote text — white */
.review-card p { color: #fff !important; }

/* Section subheads — white */
.section-sub { color: #fff !important; }
.services__intro { color: #fff !important; }

/* Pricing card list items — white text (no prices/checkmarks style) */
.pricing-card__list li { color: rgba(255,255,255,0.88); }

/* No hidden fees section extra padding */
.pricing .section-header { padding-top: 4rem; padding-bottom: 3rem; }

/* ── FIX: close button z-index (inner has z-index:1, button needs z-index:2) ── */
.menu-overlay__close {
  z-index: 2;
  cursor: pointer;
}

/* ── Remove shine swipe across logo — cleaner appearance ── */
.splash__logo-wrap::after {
  display: none !important;
  animation: none !important;
}

/* Soften logo entrance: clean fade-up instead of bouncy scale */
@keyframes splashLogoIn {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash__logo-wrap {
  animation-timing-function: ease-out !important;
}

/* ── SECTION LABEL OVERRIDES — white text ── */
/* "What We Do", "Client Reviews", "Real Results",
   "Common Questions", "Transparent Pricing", "Service Area" */
.services .label,
.reviews  .label,
.transformations .label,
.faq      .label,
.pricing  .label,
.areas    .label { color: #FFFFFF !important; }

/* 5.0 aggregate score in reviews */
.reviews__big-score { color: #FFFFFF !important; }

/* Phone number in footer — both the big CTA and the contact column link */
.footer__phone-cta { color: #FFFFFF !important; }
.footer__phone-cta:hover { color: #C87020 !important; }
.footer__cols a[href^="tel"] { color: #FFFFFF !important; }
.footer__cols a[href^="tel"]:hover { color: #C87020 !important; }

/* Skip intro button */
.splash__skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 20;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 30px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.splash__skip:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}