/* =========================================================
   Theme layer - light theme, layout fixes, and new components.
   Loaded AFTER styles-base.css so rules here safely override it.
   ========================================================= */

:root {
  --gold: #d4af37;
  --gold-soft: #f4d03f;
  --transition-theme: background-color .35s ease, color .35s ease, border-color .35s ease;

  /* light theme palette */
  --light-bg: #f7f6f2;
  --light-surface: #ffffff;
  --light-surface-alt: #f1efe9;
  --light-text: #1c1c1c;
  --light-text-muted: #5c5a54;
  --light-border: #e6e2d8;
}

body { transition: var(--transition-theme); }
* { transition: background-color .3s ease, border-color .3s ease; }

/* =========================================================
   HEADER - scroll state (class based, not inline styles, so
   both themes stay correct after scrolling)
   ========================================================= */
.header { background: rgba(10, 10, 10, 0.9); box-shadow: none; }
.header.scrolled { background: rgba(8, 8, 8, 0.97); backdrop-filter: blur(14px); box-shadow: 0 4px 24px rgba(0,0,0,.35); }
body.theme-light .header { background: rgba(255,255,255,0.92); }
body.theme-light .header.scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 4px 20px rgba(0,0,0,.08); }

/* =========================================================
   LIGHT THEME - base
   ========================================================= */
body.theme-light {
  background-color: var(--light-bg);
  color: var(--light-text);
}

body.theme-light .nav-link { color: var(--light-text); }
body.theme-light .nav-link:hover,
body.theme-light .nav-link.active { color: #a8792f; }
body.theme-light .dropdown-menu { background: var(--light-surface); box-shadow: 0 12px 34px rgba(0,0,0,.12); border: 1px solid var(--light-border); }
body.theme-light .dropdown-menu a { color: var(--light-text); }
body.theme-light .dropdown-menu a:hover,
body.theme-light .dropdown-menu a.active { background: var(--light-surface-alt); color: #a8792f; }
body.theme-light .hamburger .bar { background: var(--light-text); }
body.theme-light .logo-img { filter: none; }

/* plain (non photo-background) sections switch to light surfaces */
body.theme-light section { background-color: transparent; }
body.theme-light .services,
body.theme-light .running-projects,
body.theme-light .portfolio,
body.theme-light .blog,
body.theme-light .blog-posts,
body.theme-light .blog-categories,
body.theme-light .main-services,
body.theme-light .featured-projects,
body.theme-light .portfolio-gallery,
body.theme-light .portfolio-filters-section,
body.theme-light .category-filters,
body.theme-light .process-section,
body.theme-light .contact-main,
body.theme-light .whatwedo {
  background-color: var(--light-bg);
}
body.theme-light .services { background-color: var(--light-surface-alt); }
body.theme-light .process-section { background-color: var(--light-surface-alt); }

/* footer intentionally stays dark for contrast in both themes */
body.theme-light .footer { background-color: #111214; color: #f1f1f1; }
body.theme-light .footer-section h4,
body.theme-light .footer-logo h3 { color: #ffffff; }
body.theme-light .footer-links a, body.theme-light .footer-services a,
body.theme-light .footer-logo p,
body.theme-light .footer-contact .contact-item,
body.theme-light .footer-contact .contact-item a,
body.theme-light .social-link,
body.theme-light .footer-bottom p,
body.theme-light .footer-legal a {
  color: #d8d8d8;
}
body.theme-light .footer-links a:hover, body.theme-light .footer-services a:hover,
body.theme-light .footer-contact .contact-item a:hover,
body.theme-light .footer-legal a:hover { color: var(--gold); }
body.theme-light .social-links h4 { color: var(--gold); }

/* Cards & surfaces */
body.theme-light .card,
body.theme-light .service-card,
body.theme-light .project-card,
body.theme-light .blog-item,
body.theme-light .team-card,
body.theme-light .contact-form-section,
body.theme-light .gallery-item,
body.theme-light .category-card,
body.theme-light .faq-item {
  background-color: var(--light-surface);
  color: var(--light-text);
  border: 1px solid var(--light-border);
  box-shadow: 0 4px 18px rgba(20,20,20,.05);
}

/* .contact-info-section paints an opaque dark linear-gradient via the
   "background" shorthand in styles-base.css - overriding only
   background-color (as the shared card rule above does for everything
   else) leaves that gradient image on top, which is why it kept
   showing the dark styles-base.css look in light theme. Override the
   full shorthand here instead. */
body.theme-light .contact-info-section {
  background: var(--light-surface);
  color: var(--light-text);
  border: 1px solid var(--light-border);
  box-shadow: 0 4px 18px rgba(20,20,20,.05);
}
body.theme-light .contact-info-item {
  background: var(--light-surface-alt);
  border: 1px solid var(--light-border);
}
body.theme-light .contact-info-item:hover {
  background: rgba(180,137,79,.08);
  border-color: #b4894f;
}
body.theme-light .contact-details h4 { color: var(--light-text); }
body.theme-light .contact-details p { color: var(--light-text-muted); }

body.theme-light .service-item {
  background-color: var(--light-surface);
  border: 1px solid var(--light-border);
}
body.theme-light .service-item:hover { border-color: var(--gold); box-shadow: 0 10px 30px rgba(180,137,79,.15); }
body.theme-light .service-item h3,
body.theme-light .service-card h3,
body.theme-light .project-content h3,
body.theme-light .blog-content h3,
body.theme-light .category-card h3 { color: var(--light-text); }
body.theme-light .service-item p,
body.theme-light .service-card p,
body.theme-light .blog-content p,
body.theme-light .category-card p,
body.theme-light .project-details { color: var(--light-text-muted); }

body.theme-light input,
body.theme-light textarea,
body.theme-light select {
  background-color: #ffffff !important;
  color: var(--light-text) !important;
  border: 1px solid #d8d5cf !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: #9a978d; }
body.theme-light label { color: var(--light-text); }

body.theme-light h1, body.theme-light h2, body.theme-light h3,
body.theme-light h4, body.theme-light h5, body.theme-light p,
body.theme-light span, body.theme-light li, body.theme-light a {
  color: inherit;
}
body.theme-light .section-tag { background: rgba(180,137,79,0.12); color: #a8792f; border-color: rgba(180,137,79,0.35); }
body.theme-light .section-header h2,
body.theme-light .about-text h2,
body.theme-light .featured-text h2 { color: var(--light-text); }
body.theme-light .about-text p,
body.theme-light .contact-text p,
body.theme-light .portfolio .section-header p,
body.theme-light .featured-text p { color: var(--light-text-muted); }

body.theme-light .btn-primary { background: linear-gradient(45deg, #b4894f, #d9a94f); color: #fff; box-shadow: 0 4px 15px rgba(180,137,79,.25); }
body.theme-light .btn-primary:hover { box-shadow: 0 6px 20px rgba(180,137,79,.35); }
body.theme-light .btn-secondary { color: white; background-color: black; border-color: #b4894f; }
body.theme-light .btn-secondary:hover { background: #b4894f; color: #fff; }

body.theme-light .category-btn,
body.theme-light .filter-btn { color: var(--light-text); border-color: #d8d5cf; }
body.theme-light .category-btn.active, body.theme-light .category-btn:hover,
body.theme-light .filter-btn.active, body.theme-light .filter-btn:hover { background: #b4894f; border-color: #b4894f; color: #fff; }

body.theme-light .process-step .step-content h4 { color: var(--light-text); }
body.theme-light .process-step .step-content p,
body.theme-light .step-number { color: var(--light-text-muted); }

body.theme-light .scroll-to-top { background: #b4894f; }
body.theme-light .indicator { background: rgba(20,20,20,.2); }
body.theme-light .hero-controls button { background: rgba(20,20,20,.06); border-color: rgba(20,20,20,.2); color: #1c1c1c; }

/* =========================================================
   PHOTO / OVERLAY SECTIONS - always keep light text on a dark
   gradient overlay, in BOTH themes, so copy stays legible over
   real photography (hero, page headers, about/what-we-do panel,
   portfolio & blog image overlays, CTA banners).
   ========================================================= */
.hero, .page-hero, .services-hero, .projects-hero, .gallery-hero,
.blog-hero, .about-hero, .team-hero, .contact-hero, .whatwedo,
.cta-section {
  position: relative;
}

.hero *, .page-hero *, .services-hero *, .projects-hero *, .gallery-hero *,
.blog-hero *, .about-hero *, .team-hero *, .contact-hero * {
  color: #ffffff;
}
.hero .section-tag, .page-hero .section-tag, .services-hero .section-tag,
.projects-hero .section-tag, .gallery-hero .section-tag, .blog-hero .section-tag,
.about-hero .section-tag, .team-hero .section-tag, .contact-hero .section-tag {
  color: var(--gold);
}
/* Higher-specificity duplicate so this still wins over the generic
   body.theme-light text-color reset above (equal-specificity photo
   sections must ALWAYS show white text on their dark overlay). */
body.theme-light .hero h1, body.theme-light .hero h2, body.theme-light .hero p, body.theme-light .hero span, body.theme-light .hero li,
body.theme-light .page-hero h1, body.theme-light .page-hero h2, body.theme-light .page-hero p, body.theme-light .page-hero span,
body.theme-light .services-hero h1, body.theme-light .services-hero h2, body.theme-light .services-hero p, body.theme-light .services-hero span,
body.theme-light .projects-hero h1, body.theme-light .projects-hero h2, body.theme-light .projects-hero p, body.theme-light .projects-hero span,
body.theme-light .gallery-hero h1, body.theme-light .gallery-hero h2, body.theme-light .gallery-hero p, body.theme-light .gallery-hero span,
body.theme-light .blog-hero h1, body.theme-light .blog-hero h2, body.theme-light .blog-hero p, body.theme-light .blog-hero span,
body.theme-light .about-hero h1, body.theme-light .about-hero h2, body.theme-light .about-hero p, body.theme-light .about-hero span,
body.theme-light .team-hero h1, body.theme-light .team-hero h2, body.theme-light .team-hero p, body.theme-light .team-hero span,
body.theme-light .contact-hero h1, body.theme-light .contact-hero h2, body.theme-light .contact-hero p, body.theme-light .contact-hero span {
  color: #ffffff;
}
body.theme-light .cta-content h2, body.theme-light .cta-content p {
  color: #ffffff;
}
body.theme-light .cta-section { background: #111111; }
body.theme-light .about-stats { background: #000000; }
body.theme-light .stat-item h3, body.theme-light .stat-item p {
  color: #ffffff;
}
body.theme-light .contact { background: #111111; }
body.theme-light .contact .contact-text h2,
body.theme-light .contact .contact-text p,
body.theme-light .contact .contact-item p,
body.theme-light .contact .contact-item a {
  color: #ffffff;
}
body.theme-light .contact .contact-item h4 { color: var(--gold); }
body.theme-light .portfolio-overlay h4, body.theme-light .portfolio-overlay .category,
body.theme-light .project-overlay h4, body.theme-light .project-overlay h3,
body.theme-light .gallery-slide-overlay h4 {
  color: #ffffff;
}
body.theme-light .hero .section-tag, body.theme-light .page-hero .section-tag,
body.theme-light .services-hero .section-tag, body.theme-light .projects-hero .section-tag,
body.theme-light .gallery-hero .section-tag, body.theme-light .blog-hero .section-tag,
body.theme-light .about-hero .section-tag, body.theme-light .team-hero .section-tag,
body.theme-light .contact-hero .section-tag {
  color: var(--gold);
}

/* List-page hero bands (about, services, projects, gallery, blog,
   contact, team) previously used a flat #0a0a0a background from
   styles-base.css. In light theme a generic "sections go transparent"
   rule stripped that dark fill, leaving white heading text with
   nothing dark behind it. Giving every one of these a real photo +
   dark gradient overlay (in BOTH themes) fixes that permanently and
   also matches the request for a background image here. */
.about-hero, .services-hero, .projects-hero, .gallery-hero,
.blog-hero, .contact-hero, .team-hero {
  background-image: linear-gradient(180deg, rgba(8,8,8,.62), rgba(8,8,8,.8)),
    url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=2000&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.theme-light .about-hero, body.theme-light .services-hero,
body.theme-light .projects-hero, body.theme-light .gallery-hero,
body.theme-light .blog-hero, body.theme-light .contact-hero,
body.theme-light .team-hero {
  background-color: transparent; /* let the image show, don't fight it with a flat fill */
}

/* Ensure any inline-style photo hero (service.php / project.php use
   style="background:url(...)") always carries a readable overlay even
   if a future edit forgets the gradient in the inline style. */
.services-hero, .projects-hero {
  background-color: #111;
  background-blend-mode: multiply;
}
.services-hero::before, .projects-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7));
  z-index: 0;
  pointer-events: none;
}
.services-hero-content, .projects-hero-content, .gallery-hero-content,
.blog-hero-content, .about-hero-content, .team-hero-content, .contact-hero-content {
  position: relative;
  z-index: 1;
}

/* Fix: original CSS targeted h2 inside *-hero-content, but every
   template actually renders an <h1>. Style both so headings render
   correctly regardless of tag. */
.services-hero-content h1, .services-hero-content h2,
.projects-hero-content h1, .projects-hero-content h2,
.gallery-hero-content h1, .gallery-hero-content h2,
.blog-hero-content h1, .blog-hero-content h2,
.about-hero-content h1, .about-hero-content h2,
.team-hero-content h1, .team-hero-content h2,
.contact-hero-content h1, .contact-hero-content h2 {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.services-hero-content p, .projects-hero-content p, .gallery-hero-content p,
.blog-hero-content p, .about-hero-content p, .team-hero-content p, .contact-hero-content p {
  color: rgba(255,255,255,.88);
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 576px) {
  .services-hero-content h1, .projects-hero-content h1, .gallery-hero-content h1,
  .blog-hero-content h1, .about-hero-content h1, .contact-hero-content h1 { font-size: 1.9rem; }
}

/* Portfolio / project / blog image overlays - stronger legible gradient */
.portfolio-overlay,
.project-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.88) 100%) !important;
}
.portfolio-overlay h4, .project-overlay h4, .portfolio-overlay .category {
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.blog-number { background: rgba(0,0,0,.65); color: var(--gold); }

/* =========================================================
   Dropdown: tap to open on mobile (matches the hamburger's
   768px breakpoint exactly - a mismatched breakpoint here
   previously left the 769-991px range in a broken half state).
   ========================================================= */
@media (max-width: 768px) {
  /* display:none/block instead of max-height/overflow: the previous
     max-height:0 + overflow:hidden approach could still let the
     dropdown's own <li> items (each with their own margin/border from
     the ".nav-menu li" rule below) render a sliver of border/space
     even while "collapsed", which is what showed as an empty
     overlapping box under SERVICE. display:none removes it from
     layout completely - there is nothing left to leak through. */
  .dropdown-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    transform: none;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
  }
  .dropdown.open .dropdown-menu {
    display: block;
    padding: .4rem 0 .8rem;
  }
  .dropdown-menu li { margin: .6rem 0 !important; border-bottom: none !important; }
  .dropdown-menu a { font-size: .8rem; opacity: .85; }

  /* Arrow indicator - plain CSS character instead of a Font-Awesome
     glyph, so it always renders even if the icon font CDN is
     unreachable (showed as a stray ".." in testing). Uses ::after,
     but fully resets every property styles-base.css already sets on
     .nav-link::after for the hover-underline bar (position:absolute;
     bottom:-5px; left:0; width:0) - inheriting those previously made
     the arrow render off-position and overlap the menu below it. */
  .dropdown > .nav-link::after {
    content: "\25BE";
    font-family: inherit;
    margin-left: 6px;
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    bottom: auto;
    left: auto;
    background: none;
    transition: transform .25s ease;
  }
  .dropdown.open > .nav-link::after { transform: rotate(180deg); }

  /* Off-canvas mobile menu needs its own light-theme skin - it has a
     hardcoded dark background in styles-base.css, so without this the
     dark nav-link text color set for light theme was invisible on it. */
  body.theme-light .nav-menu {
    background-color: rgba(255,255,255,0.98);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }
  body.theme-light .nav-menu > li { border-bottom: 1px solid var(--light-border); padding-bottom: .75rem; }
  body.theme-light .nav-menu > li:last-child { border-bottom: none; }
  body.theme-light .dropdown-menu a { color: var(--light-text-muted); }
}

.dropdown-menu { z-index: 1200; }

/* =========================================================
   Hero height on mobile - styles-base.css uses a flat 100vh at
   every breakpoint, which on a phone (mostly empty space now that
   the hero is just a heading + one button) reads as an oversized,
   awkward block. Scale it down and resize the heading/button to match.
   ========================================================= */
@media (max-width: 768px) {
  .hero { height: 78vh; min-height: 480px; }
  .slide-content h1 { font-size: 2.1rem; margin-bottom: 1.4rem; }
  .slide-content .btn-primary { padding: .8rem 1.8rem; font-size: .8rem; }
  .hero-controls { bottom: 24px; }
  .hero-controls button { width: 40px; height: 40px; font-size: .85rem; }
  .hero-indicators { bottom: 12px; }
}
@media (max-width: 480px) {
  .hero { height: 68vh; min-height: 420px; }
  .slide-content h1 { font-size: 1.65rem; line-height: 1.3; margin-bottom: 1.1rem; }
  .slide-content .btn-primary { padding: .7rem 1.5rem; font-size: .75rem; letter-spacing: .5px; }
}

/* =========================================================
   Floating WhatsApp / Call buttons
   ========================================================= */
.floating-actions { position: fixed; right: 20px; bottom: 24px; display: flex; flex-direction: column; gap: 14px; z-index: 1500; }
.float-btn { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.float-btn:hover { transform: scale(1.08); }
.float-whatsapp { background-color: #25D366; }
.float-call { background-color: #b4894f; animation: floatPulse 2.4s infinite; }
@keyframes floatPulse {
  0% { box-shadow: 0 0 0 0 rgba(180,137,79,.5); }
  70% { box-shadow: 0 0 0 14px rgba(180,137,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(180,137,79,0); }
}
@media (max-width: 576px) {
  .float-btn { width: 48px; height: 48px; font-size: 1.25rem; }
  .floating-actions { right: 14px; bottom: 16px; gap: 10px; }
}

/* =========================================================
   Service categories (Residential/Commercial/Industrial)
   ========================================================= */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0 10px; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-grid { grid-template-columns: 1fr; } }

.category-card { border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); }
.category-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.category-card .category-card-body { padding: 20px; }
.category-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.category-card p { font-size: .92rem; opacity: .85; }

/* =========================================================
   Form status message
   ========================================================= */
.form-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: .95rem; }
.form-alert.success { background: #1f7a3d22; border: 1px solid #1f7a3d; color: #2fbd5e; }
.form-alert.error { background: #a3242422; border: 1px solid #a32424; color: #ff6b6b; }

/* =========================================================
   Generic responsive grids
   ========================================================= */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 992px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } }

.page-hero { padding: 160px 0 70px; text-align: center; }
.page-hero h1 { font-size: 2.6rem; margin-bottom: 12px; }
@media (max-width: 576px) { .page-hero { padding: 130px 0 50px; } .page-hero h1 { font-size: 1.9rem; } }

img { max-width: 100%; height: auto; }

/* =========================================================
   Services grid - force 4-in-a-row on desktop as requested,
   collapsing gracefully on smaller screens.
   ========================================================= */
.services-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

.services-grid-detailed { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .services-grid-detailed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid-detailed { grid-template-columns: 1fr; } }

/* =========================================================
   "What We Do" homepage section - text + supporting image,
   mirroring the requested reference layout.
   ========================================================= */
.whatwedo {
  padding: 6rem 0;
  background: #0c0c0c;
}
.whatwedo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.whatwedo-text h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #fff; }
.whatwedo-text p { color: #cccccc; line-height: 1.8; margin-bottom: 1.8rem; }
.whatwedo-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.whatwedo-list li {
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  padding-left: 1.9rem;
  position: relative;
}
.whatwedo-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gold);
  position: absolute;
  left: 0;
  top: 2px;
}
.whatwedo-image { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.whatwedo-image img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; }

body.theme-light .whatwedo { background: var(--light-bg); }
body.theme-light .whatwedo-text h2 { color: var(--light-text); }
body.theme-light .whatwedo-text p { color: var(--light-text-muted); }
body.theme-light .whatwedo-list li { color: var(--light-text); }

@media (max-width: 900px) {
  .whatwedo-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .whatwedo-image { order: -1; }
}

/* =========================================================
   Mini slider - reusable horizontal carousel used for the
   homepage Gallery & Blog sections so newly-added items show
   up automatically without a layout change.
   ========================================================= */
.mini-slider { position: relative; overflow: hidden; }
.mini-slider-track {
  display: flex;
  transition: transform .45s ease;
}
.mini-slide-item { padding: 0 14px; box-sizing: border-box; }
.mini-slider-nav { display: flex; justify-content: flex-end; gap: .75rem; margin-bottom: 1.5rem; }
.mini-prev, .mini-next {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: all .25s ease;
}
.mini-prev:hover, .mini-next:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.mini-prev.disabled, .mini-next.disabled { opacity: .35; cursor: default; pointer-events: none; }

body.theme-light .mini-prev, body.theme-light .mini-next {
  border-color: #d8d5cf; background: #fff; color: var(--light-text);
}
body.theme-light .mini-prev:hover, body.theme-light .mini-next:hover { background: #b4894f; border-color: #b4894f; color: #fff; }

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.section-header-row .section-header { margin-bottom: 0; text-align: left; }

/* Gallery slide card */
.gallery-slide-card { position: relative; border-radius: 10px; overflow: hidden; height: 280px; }
.gallery-slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-slide-card:hover img { transform: scale(1.08); }
.gallery-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%);
  display: flex; align-items: flex-end; padding: 18px;
}
.gallery-slide-overlay h4 { color: #fff; font-size: 1rem; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* =========================================================
   Blog category link (blog.php uses <a class="blog-category">
   for its filter row - style it like the button-based filters
   used elsewhere so it isn't a bare unstyled link).
   ========================================================= */
.blog-categories { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 2rem 0; }
.blog-category {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
  padding: .7rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all .3s ease;
}
.blog-category:hover, .blog-category.active { background: var(--gold); color: #000; border-color: var(--gold); }
body.theme-light .blog-category { color: var(--light-text); border-color: #d8d5cf; }
body.theme-light .blog-category:hover, body.theme-light .blog-category.active { background: #b4894f; color: #fff; border-color: #b4894f; }

/* Blog listing page: exactly 3 per row on desktop */
.blog-posts .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) { .blog-posts .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-posts .blog-grid { grid-template-columns: 1fr; } }

/* =========================================================
   FAQ accordion (used on services.php / service.php)
   ========================================================= */
.faq-section { padding: 6rem 0; }
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.6rem; cursor: pointer; font-weight: 600; color: #fff;
}
.faq-question i { transition: transform .3s ease; color: var(--gold); }
.faq-item.active .faq-question i { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 1.6rem; }
.faq-item.active .faq-answer { max-height: 300px; padding-bottom: 1.4rem; }
.faq-answer p { color: #cccccc; line-height: 1.7; }
body.theme-light .faq-question { color: var(--light-text); }
body.theme-light .faq-answer p { color: var(--light-text-muted); }

/* =========================================================
   Why-choose-us feature grid (services.php extra section)
   ========================================================= */
.features-section { padding: 6rem 0; background: #111111; }
body.theme-light .features-section { background: var(--light-surface-alt); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 992px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card { text-align: center; padding: 2rem 1.5rem; }
.feature-card .feature-icon { width: 70px; height: 70px; margin: 0 auto 1.2rem; border-radius: 50%; background: rgba(212,175,55,.12); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--gold); }
.feature-card h4 { color: #fff; margin-bottom: .6rem; font-size: 1.1rem; }
.feature-card p { color: #cccccc; font-size: .92rem; line-height: 1.6; }
body.theme-light .feature-card h4 { color: var(--light-text); }
body.theme-light .feature-card p { color: var(--light-text-muted); }

/* Related services (service.php extra section) */
.related-services { padding: 6rem 0; }
.related-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 900px) { .related-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .related-services-grid { grid-template-columns: 1fr; } }
.related-service-card {
  padding: 2rem; text-align: center; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  text-decoration: none; transition: all .3s ease;
}
.related-service-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.related-service-card .service-icon { font-size: 2.2rem; color: var(--gold); margin-bottom: 1rem; }
.related-service-card h4 { color: #fff; margin-bottom: .5rem; }
.related-service-card p { color: #999; font-size: .88rem; }
body.theme-light .related-service-card { background: var(--light-surface); border-color: var(--light-border); }
body.theme-light .related-service-card h4 { color: var(--light-text); }
body.theme-light .related-service-card p { color: var(--light-text-muted); }

/* =========================================================
   Contact page - Google Map embed
   ========================================================= */
.map-embed { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.1); }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }
body.theme-light .map-embed { border-color: var(--light-border); }

/* =========================================================
   Header/nav polish - keep text crisp over the transparent
   header on tall hero pages in both themes.
   ========================================================= */
.header { border-bottom: 1px solid rgba(255,255,255,.06); }
body.theme-light .header { border-bottom: 1px solid rgba(0,0,0,.06); }