/* ============================================================
   Iberia Landscape Services : Custom Brand Stylesheet
   Builds on top of on3step-style.css (Bootstrap + Montserrat)
   ============================================================ */

/* ── Brand Palette ────────────────────────────────────────── */
:root {
  --green-dark:    #1e3a28;
  --green-primary: #2d5a3d;
  --green-mid:     #3d7a52;
  --green-light:   #5a9e6f;
  --gold:          #c8a951;
  --gold-light:    #e0c36a;
  --white:         #ffffff;
  --off-white:     #f7f8f5;
  --gray-light:    #e8ebe4;
  --gray-mid:      #8e9d89;
  --dark:          #141d16;
  --text-body:     #3d4a40;
}

/* ── Base Overrides ───────────────────────────────────────── */
body {
  color: var(--text-body);
  background: var(--white);
}

/* ── Top Info Bar (subnav) ────────────────────────────────── */
.subnav {
  background: var(--green-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.subnav .social-icons-subnav a {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-right: 20px;
  transition: color 0.2s ease;
}
.subnav .social-icons-subnav a:hover { color: var(--gold); }
.subnav .social-icons-subnav span { color: var(--gold); margin-right: 5px; }
.subnav .right .social-icons-subnav a { margin-right: 0; margin-left: 14px; }

/* ── Navigation ───────────────────────────────────────────── */
.navbar-default {
  background: rgba(20, 29, 22, 0.97) !important;
  border-bottom: 2px solid var(--green-primary) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.navbar-default.scrolled {
  background: rgba(20, 29, 22, 0.99) !important;
}
.navbar-default .navbar-brand img {
  height: 44px;
  width: auto;
  filter: brightness(1.05);
}
nav ul li a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.2px;
  font-weight: 500 !important;
  text-transform: uppercase;
  transition: color 0.2s ease !important;
}
nav ul li a:hover,
nav ul li a.actived { color: var(--gold) !important; }
nav ul li ul { background: var(--green-dark) !important; border-top: 2px solid var(--gold); }
nav ul li ul li a { color: rgba(255,255,255,0.8) !important; }
nav ul li ul li a:hover { color: var(--gold) !important; background: rgba(255,255,255,0.05); }

/* Quote button in nav */
nav ul li.btn {
  background: transparent;
  padding: 0;
  margin: 0 0 0 24px;
}
nav ul li.btn a {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: 2px;
  font-weight: 600 !important;
  letter-spacing: 1px;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center;
}
nav ul li.btn a:hover {
  background: var(--gold-light) !important;
  color: var(--dark) !important;
}
nav ul li.btn:hover {
  background: transparent;
  color: inherit;
}

/* ── Hero Section ─────────────────────────────────────────── */
.iberia-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url('../img/iberia/unsplash-image-w5TovjArN3o.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.iberia-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 29, 22, 0.82) 0%,
    rgba(30, 58, 40, 0.65) 50%,
    rgba(20, 29, 22, 0.78) 100%
  );
  z-index: 1;
}
.iberia-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(20,29,22,0.4) 0%, transparent 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 140px 0 80px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.3s forwards;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}
.hero-headline {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s ease 0.5s forwards;
}
.hero-headline span {
  color: var(--gold);
  display: block;
}
.hero-subheadline {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255,255,255,0.75);
  font-weight: 300;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease 0.7s forwards;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease 0.9s forwards;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--dark) !important;
  padding: 15px 32px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--gold);
  transition: all 0.3s ease;
}
.btn-hero-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,169,81,0.4);
}
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white) !important;
  padding: 15px 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}
.hero-contact-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(20,29,22,0.92);
  border-top: 1px solid rgba(200,169,81,0.2);
  padding: 18px 0;
  opacity: 0;
  animation: fadeIn 0.8s ease 1.2s forwards;
}
.hero-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-contact-item:hover { color: var(--gold); }
.hero-contact-item > span {
  width: 36px;
  height: 36px;
  background: rgba(200,169,81,0.15);
  border: 1px solid rgba(200,169,81,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 14px;
  flex-shrink: 0;
}
.hero-contact-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1px;
}
.hero-contact-value {
  font-size: 12px;
  color: var(--white);
  font-weight: 500;
}

/* ── Metrics / Trust Bar ──────────────────────────────────── */
.metrics-section {
  background: var(--green-primary);
  padding: 0;
  position: relative;
  z-index: 10;
}
.metric-item {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
  position: relative;
  transition: background 0.3s ease;
}
.metric-item:last-child { border-right: none; }
.metric-item:hover { background: rgba(255,255,255,0.05); }
.metric-number {
  font-size: 42px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.metric-label {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Section Base ─────────────────────────────────────────── */
.section-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
}
.section-title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1.2;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
.section-desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.8;
  max-width: 580px;
}

/* ── About Section ────────────────────────────────────────── */
.about-section {
  padding: 90px 0;
  background: var(--white);
}
.about-image-wrap {
  position: relative;
}
.about-img-main {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}
.about-img-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--white);
  border: 4px solid var(--white);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 8px;
}
.about-content { padding: 20px 0 20px 40px; }
.about-est {
  font-size: 13px;
  color: var(--gray-mid);
  font-weight: 400;
  margin-bottom: 28px;
  line-height: 1.8;
}
.credentials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.credential-pill,
a.credential-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.credential-pill i { color: var(--gold); }
.credential-pill:hover {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}
.credential-pill:hover i { color: var(--gold); }

/* ── Services Section ─────────────────────────────────────── */
.services-section {
  padding: 80px 0;
  background: var(--off-white);
}
.service-card {
  background: var(--white);
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--gray-light);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}
.service-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card-img { transform: scale(1.04); }
.service-card-img-wrap { overflow: hidden; }
.service-card-body {
  padding: 28px 28px 32px;
}
.service-card-icon {
  width: 52px;
  height: 52px;
  background: var(--green-dark);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: -52px;
  position: relative;
  z-index: 1;
  border: 3px solid var(--white);
}
.service-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  line-height: 1.3;
}
.service-card-desc {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ── CTA Band ─────────────────────────────────────────────── */
.cta-band {
  background: var(--gold);
  padding: 36px 0;
}
.cta-band h2 {
  color: var(--dark);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.4;
}
.btn-cta-dark {
  display: inline-block;
  background: var(--green-dark);
  color: var(--white) !important;
  padding: 14px 36px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--green-dark);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn-cta-dark:hover {
  background: var(--dark);
  border-color: var(--dark);
  transform: translateY(-2px);
}

/* ── Gallery Section ──────────────────────────────────────── */
.gallery-section {
  padding: 80px 0;
  background: var(--dark);
}
.gallery-section .section-title { color: var(--white); }
.gallery-section .section-eyebrow { color: rgba(200,169,81,0.9); }
.gallery-section .section-eyebrow::before { background: var(--gold); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px;
  gap: 4px;
  margin-top: 40px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,29,22,0.85) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Carousel gallery below grid */
.gallery-carousel {
  margin-top: 8px;
}
.gallery-carousel-item {
  padding: 2px;
}
.gallery-carousel-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ── Why Choose Us ────────────────────────────────────────── */
.why-section {
  padding: 80px 0;
  background: var(--white);
}
.why-bg-img {
  position: relative;
  height: 100%;
  min-height: 480px;
}
.why-bg-img img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}
.why-bg-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,29,22,0.7) 0%, rgba(45,90,61,0.5) 100%);
  z-index: 1;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-light);
  transition: background 0.2s ease;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li:hover { background: var(--off-white); margin: 0 -12px; padding: 14px 12px; }
.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--green-dark);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.feature-text h5 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 2px;
}
.feature-text p {
  font-size: 11.5px;
  color: var(--gray-mid);
  margin: 0;
  line-height: 1.5;
}

/* ── Certifications / Partners ────────────────────────────── */
.certifications-section {
  background: var(--off-white);
  padding: 60px 0;
  border-top: 1px solid var(--gray-light);
}
.cert-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  height: 90px;
  transition: all 0.3s ease;
}
.cert-logo-wrap:hover {
  border-color: var(--green-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.cert-logo-wrap img {
  max-height: 55px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(60%);
  transition: filter 0.3s ease;
}
.cert-logo-wrap:hover img { filter: grayscale(0); }

/* ── Estimate / Contact CTA ───────────────────────────────── */
.estimate-section {
  position: relative;
  padding: 100px 0;
  background: url('../img/iberia/hedge_clipping-1920x1280.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
.estimate-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,29,22,0.92) 0%, rgba(45,90,61,0.80) 100%);
}
.estimate-inner { position: relative; z-index: 1; }
.estimate-section .section-title { color: var(--white); }
.estimate-section .section-eyebrow { color: var(--gold); }
.estimate-section .section-eyebrow::before { background: var(--gold); }
.estimate-section .section-desc { color: rgba(255,255,255,0.7); max-width: 500px; }

/* Estimate Form */
.estimate-form {
  background: var(--white);
  padding: 44px 44px 44px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.estimate-form h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gold);
}
.form-group label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.form-control {
  border: 1px solid var(--gray-light);
  border-radius: 0;
  height: 44px;
  font-size: 13px;
  color: var(--text-body);
  background: var(--off-white);
  padding: 0 14px;
  transition: border-color 0.2s ease;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: var(--green-primary);
  background: var(--white);
}
textarea.form-control {
  height: 100px;
  padding-top: 12px;
  resize: none;
}
.btn-form-submit {
  display: block;
  width: 100%;
  background: var(--green-dark);
  color: var(--white);
  border: none;
  padding: 15px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 4px;
}
.btn-form-submit:hover { background: var(--green-primary); }

/* ── Contact Section ──────────────────────────────────────── */
.contact-section {
  padding: 80px 0;
  background: var(--white);
}
.contact-card {
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  padding: 32px 28px;
  height: 100%;
  transition: box-shadow 0.3s ease;
}
.contact-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.contact-card-icon {
  width: 48px;
  height: 48px;
  background: var(--green-dark);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
}
.contact-card-role {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--green-mid);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 14px;
}
a.contact-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-body);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}
.contact-card-link:hover { color: var(--green-primary); }
.contact-card-link i { color: var(--gold); font-size: 11px; width: 14px; }

.address-block {
  padding: 32px;
  background: var(--green-dark);
  color: var(--white);
}
.address-block h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 20px;
}
.address-block p {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 20px;
}
a.address-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 12.5px;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.address-link:hover { color: var(--gold); }
.address-link i { color: var(--gold); width: 16px; }

.map-embed {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
  filter: saturate(0.7) contrast(0.9);
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--green-dark);
  padding: 60px 0 0;
  color: rgba(255,255,255,0.65);
}
.footer-logo img {
  height: 40px;
  width: auto;
  filter: brightness(1.1);
  margin-bottom: 20px;
}
.footer-about {
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}
.footer-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200,169,81,0.2);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-links a::before {
  content: '';
  display: block;
  width: 8px;
  height: 1px;
  background: var(--gold);
}
.footer-links a:hover { color: var(--gold); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}
.footer-contact-item i { color: var(--gold); margin-top: 2px; }
.footer-contact-item a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact-item a:hover { color: var(--gold); }
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
a.footer-social-link {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}
.footer-bar {
  margin-top: 50px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}
.footer-bar p {
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.footer-bar .certbadges {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.footer-bar .certbadges img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.4);
  transition: opacity 0.2s ease;
}
.footer-bar .certbadges img:hover {
  filter: brightness(0) invert(1) opacity(0.8);
}

/* ── Scroll Animations ────────────────────────────────────── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal-delay-1 { transition-delay: 0.15s; }
.scroll-reveal-delay-2 { transition-delay: 0.3s; }
.scroll-reveal-delay-3 { transition-delay: 0.45s; }

/* ── Owl Carousel Override ────────────────────────────────── */
#owl-gallery .owl-controls .owl-buttons div {
  background: var(--green-dark);
  border-radius: 0;
  opacity: 0.85;
}
#owl-gallery .owl-controls .owl-buttons div:hover { background: var(--gold); opacity: 1; }

/* Force these section wrappers to always establish their own block
   formatting context so they reliably contain the height of their
   grid/flex content, regardless of float/flex edge cases in older or
   non-standard rendering engines. Safe: flow-root never clips content
   (unlike overflow:hidden), it only guarantees height containment. */
.about-section,
.services-section,
.cta-band,
.gallery-section,
.why-section,
.certifications-section,
.estimate-section,
.contact-section {
  display: flow-root;
}

/* ── Utility ──────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mb-30 { margin-bottom: 30px; }
.text-gold { color: var(--gold); }
.bg-green-dark { background: var(--green-dark); }

/* Flex row helper : Bootstrap 3's .row uses a :before/:after clearfix
   (display:table; content:" ") which becomes a real flex item (and eats
   space) if .row is also switched to display:flex. This class provides a
   flex row with that clearfix neutralized. */
.row-flex {
  display: flex;
  flex-wrap: wrap;
}
.row-flex::before,
.row-flex::after {
  content: none;
  display: none;
}
.row-flex.align-items-center { align-items: center; }
.row-flex.align-items-stretch { align-items: stretch; }
/* Bootstrap 3 grid columns rely on `float` for their layout math; float
   has no effect once the row is a flex container, but leaving it set is
   still harmless to clear explicitly. Note: do NOT add flex-shrink:0 here
   : columns without a col-xs-* class have no defined `width` below their
   smallest breakpoint (width:auto), and flex-shrink:0 would stop them
   shrinking to fit the row, forcing them to overflow at their content
   width instead of stacking full-width as intended. */
.row-flex > [class*="col-"] {
  float: none;
}
.iberia-divider {
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: 20px 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .about-content { padding: 40px 0 0; }
  .about-img-badge { right: 8px; bottom: 8px; }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 200px 200px;
  }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 1; }
  .hero-contact-bar { position: static; width: 100%; }
  .iberia-hero {
    min-height: auto;
    padding-top: 100px;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-content { padding: 40px 0 30px; }
}

@media (max-width: 767px) {
  .iberia-hero { background-attachment: scroll; }
  .estimate-section { background-attachment: scroll; }
  .hero-headline { font-size: 32px; }
  .metric-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 160px;
  }
  .gallery-item:first-child { grid-column: span 2; }
  .metrics-section .col-xs-6 { border-right: 1px solid rgba(255,255,255,0.1); }
  .metrics-section .col-xs-6:nth-child(2n) { border-right: none; }
  .estimate-form { padding: 28px 20px; }
  .footer-bar .certbadges { justify-content: flex-start; margin-top: 10px; }
  /* Columns that only carry col-md-*/col-sm-* classes (no col-xs-*) have
     no defined `width` below 768px, so as flex items they shrink-wrap to
     their own content instead of stacking full-width : a narrow badge or
     short card ends up a fraction of the row width with empty space
     beside it (certifications and contact-info grids). Force 100% here;
     col-sm-*/col-md-* rules take back over once those breakpoints hit. */
  .row-flex > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
}

/* ── Desktop nav vertical centering ───────────────────────────
   The template's `nav { top: 10px; ... }` rule (on3step-style.css)
   nudges the menu down by a fixed pixel offset tuned for the original
   template's content height. This site's menu row (with the taller
   "Free Estimate" button) is taller than the 70px navbar, so that
   offset pushes it past the navbar's bottom edge instead of centering
   it : logo and links end up misaligned, with no breathing room below
   the button. Flexbox-centering the row replaces that fragile offset
   with real vertical centering, regardless of content height. Scoped
   to desktop only : the mobile full-screen dropdown menu (≤1024px)
   already works correctly and uses absolute positioning instead. */
@media (min-width: 1025px) {
  .navbar-default .container > .row {
    display: flex;
    align-items: center;
    height: 70px;
  }
  .navbar-default .container > .row::before,
  .navbar-default .container > .row::after {
    content: none;
    display: none;
  }
  .navbar-default .navbar-brand {
    position: static;
    top: auto;
    padding-bottom: 0;
  }
  .navbar-default #menu-center {
    position: static;
    top: auto;
    float: none;
  }
  .navbar-default #main-menu {
    margin-left: auto;
  }
}

/* ── Preloader override ───────────────────────────────────── */
.mainpreloader span {
  border-top-color: var(--green-primary) !important;
}

/* ── Mobile menu brand override ──────────────────────────── */
@media only screen and (max-width: 1024px) {
  #main-menu {
    background: var(--green-dark) !important;
  }
  nav ul li a {
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 12px 0 !important;
  }
  nav ul li ul {
    background: rgba(0,0,0,0.3) !important;
  }
  nav ul li.btn a {
    background: var(--gold) !important;
    color: var(--dark) !important;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-right: 15px;
  }
  .navbar-toggle .icon-bar {
    background-color: var(--gold) !important;
  }
  .navbar-toggle {
    border-color: rgba(200,169,81,0.3) !important;
  }
}

/* ── Additional visual polish ─────────────────────────────── */

/* Ensure hero section sits below the dual navbar (subnav + navbar) */
body { padding-top: 0 !important; }

/* Smooth transition on nav scroll */
.sticky-nav.navbar-default {
  background: rgba(20, 29, 22, 0.99) !important;
  border-bottom-color: var(--green-primary) !important;
}

/* Gallery section description text */
.gallery-section p.section-desc {
  color: rgba(255,255,255,0.6);
}

/* Service card min-height for alignment */
.service-card { display: flex; flex-direction: column; }
.service-card-body { flex: 1; display: flex; flex-direction: column; }
.service-card-desc { flex: 1; }

/* Footer bar alignment */
@media (max-width: 767px) {
  .footer-bar .row { flex-direction: column; }
  .footer-bar .certbadges { justify-content: flex-start; margin-top: 14px; }
}

/* Iberia hero background attachment fix for Safari */
@supports (-webkit-overflow-scrolling: touch) {
  .iberia-hero, .estimate-section { background-attachment: scroll; }
}

/* Skip navigation link (WCAG 2.2 AA) */
a.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 99999;
  background: var(--gold);
  color: var(--dark);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--green-primary);
  outline-offset: 2px;
}

/* FA4 fallback: fa-user-tie is a FA5+ icon : map to fa-user */
.fa-user-tie::before { content: "\f007"; } /* fa-user */

/* Reduced motion: disable all transitions/animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-eyebrow,
  .hero-headline,
  .hero-subheadline,
  .hero-ctas,
  .hero-contact-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Why section left image column height alignment */
@media (min-width: 992px) {
  .why-section .col-md-5 {
    display: flex;
    flex-direction: column;
  }
  .why-bg-img {
    flex: 1;
  }
  .why-bg-img img {
    height: 100%;
    min-height: 600px;
  }
}

/* Contact section spacing */
.contact-section .address-block {
  padding: 36px;
}

/* Input select styling */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  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 d='M1 1l5 5 5-5' stroke='%235a6b5c' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Subnav hidden below 1024px already in queries css - ensure it doesn't break layout */
@media only screen and (max-width: 1024px) {
  .iberia-hero {
    padding-top: 70px;
  }
}