:root{
  --bg:#433c32;
  --fg:#f9fafb;
  --muted:#9e907b;
  --accent:#9e907b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.container.narrow{max-width:900px}
.topbar{background:transparent;color:var(--fg);position:sticky;top:0;z-index:50}
.topbar .brand img{height:180px;width:auto;display:block}
.topbar .right{display:flex;gap:10px;align-items:center;font-size:14px}
.topbar .contact-link{opacity:.9;text-decoration:none}
.topbar .sep{opacity:.5}
.hero{height:70vh;min-height:420px;background-image:linear-gradient( to bottom, rgba(15,23,42,.55), rgba(15,23,42,.75) ), url('assets/img/hero-bg.jpg');background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--fg)}
.hero .overlay{padding:24px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px;font-weight:800}
.hero p{margin:0 0 24px;color:#ffffff;font-size:18px}
.cta{display:inline-block;background:var(--accent);color:#111827;text-decoration:none;padding:12px 20px;border-radius:999px;font-weight:700}
/* Intro fixed: stack vertically, no columns */
.intro{padding:60px 0;background:#fff}
.intro .container{display:block !important; max-width:900px; margin:0 auto}
.intro h2{font-size:40px;font-weight:800;text-align:left;margin-bottom:24px}
.intro p{column-count:1 !important; column-gap:normal !important; font-size:18px; line-height:1.8; margin-bottom:18px; color:#333; text-align:left}

.contact h2{margin:0 0 16px}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer{padding:24px 0;background:#0b1220;color:#94a3b8;text-align:center  }
@media (max-width:768px){
  .topbar .right{display:none}
  .topbar .brand img{height:75px}
  .hero h1{font-size:32px}
}

.cta.secondary{margin-left:12px;background:transparent;border:2px solid var(--accent);color:var(--accent)}
.floating-call{
  position:fixed;right:16px;bottom:16px;
  width:60px;height:60px;border-radius:50%;
  background:var(--accent);color:#111827;display:flex;
  align-items:center;justify-content:center;
  text-decoration:none;font-size:28px;box-shadow:0 10px 25px rgba(0,0,0,.25);
  z-index:999;
}
@media (min-width:769px){
  .floating-call{display:none}
}

.cta.tertiary{margin-left:12px;background:transparent;border:2px solid #fff;color:#fff}
.floating-email{
  position:fixed;left:16px;bottom:16px;width:60px;height:60px;border-radius:50%;
  background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:26px;box-shadow:0 10px 25px rgba(0,0,0,.25);z-index:999;
}
@media (min-width:769px){
  .floating-email{display:none}
}

/* v9 hero actions in one straight row */
.actions{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid rgba(212,180,131,.9)}
.btn.solid{background:var(--accent);color:#111827}
.btn.outline{background:transparent;color:var(--fg)}
.btn.ghost{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.8)}
.btn:hover{opacity:.95}
/* contact inline row at bottom */
.contact-inline{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;font-size:16px}
.contact-inline a{color:#111;text-decoration:none}
.contact-inline a:hover{text-decoration:underline}

/* v10 simple hero action */
.actions{display:flex;justify-content:center;margin-top:20px}
.actions .btn{padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--accent);color:#111827}
.actions .btn:hover{opacity:.95}

/* v10: center single hero action */
.actions{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}


/* Smooth background transition effect */
body {
  background: linear-gradient(to bottom, #000000, #fff0f5);
  transition: background 0.5s ease;
}


header { background: #000000; transition: background 0.3s ease; }


/* v25 adjustments */
header.scrolled { background: linear-gradient(180deg, #000000 0%, #2a331d 100%) !important; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
header.scrolled { background: linear-gradient(180deg, #000000 0%, #2a331d 100%) !important; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
header.scrolled { background: linear-gradient(180deg, #000000 0%, #2a331d 100%) !important; box-shadow: 0 2px 12px rgba(0,0,0,.3); }


header.scrolled { background: linear-gradient(180deg, #000000 0%, #2a331d 100%) !important; box-shadow: 0 2px 12px rgba(0,0,0,.3); }


header.scrolled .contact-link,
header.scrolled a[href^="tel:"],
header.scrolled a[href^="mailto:"] {
  color: #ffffff !important;
}

header.scrolled .brand img {
  filter: brightness(0) invert(1) !important;
}


/* Header main navigation */
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.main-nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.main-nav .nav-link{color:#ffffff;text-decoration:none;font-weight:600;opacity:.95;padding:8px 10px;border-radius:10px}
.main-nav .nav-link:hover{opacity:1;text-decoration:underline}

/* Keep nav links white when scrolled */
header.scrolled .main-nav .nav-link{color:#ffffff !important}


/* Header main navigation */
.main-nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.main-nav .nav-link{color:#fff;text-decoration:none;font-weight:600;opacity:.95;padding:8px 10px;border-radius:10px;transition:background .3s ease}
.main-nav .nav-link:hover{opacity:1;text-decoration:underline;background:rgba(255,255,255,.1)}
.main-nav .nav-link:active{background:rgba(255,255,255,.2);color:#e0e0e0}

/* Keep nav links white when scrolled */
header.scrolled .main-nav .nav-link{color:#ffffff !important}


/* === Portfolio Section === */
#portfolio{padding:64px 0;background:#f8fafc}
#portfolio h2{margin:0 0 12px}
#portfolio .muted{color:#64748b;margin-bottom:24px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.portfolio-grid{grid-template-columns:1fr}}
.portfolio-grid .card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.06);padding-bottom:12px}
.portfolio-grid .thumb{height:160px;background-size:cover;background-position:center}
.portfolio-grid h3{font-size:18px;margin:12px 12px 4px}
.portfolio-grid p{font-size:14px;color:#475569;margin:0 12px 8px}


/* === tweak: shift "Project Portfolio" heading slightly left on desktop === */
@media (min-width: 1024px){
  section.portfolio > .container.narrow > h2 { margin-left: -40px; }
}
@media (max-width: 1023.98px){
  section.portfolio > .container.narrow > h2 { margin-left: 0; }
}
/* === end tweak === */

@media (max-width: 900px){
  section.portfolio .container.narrow{ display:block !important; text-align:center !important; }
  section.portfolio h2{ text-align:center !important; margin:0 0 12px !important; font-size:26px !important; line-height:1.15 !important; white-space:nowrap !important; }
  section.portfolio .portfolio-grid{ display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; column-gap:10px !important; row-gap:12px !important; align-items:stretch !important; justify-items:stretch !important; }
  section.portfolio .portfolio-grid .card{ transform:scale(0.94); transform-origin: top center; }
  section.portfolio .portfolio-grid .thumb{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; object-fit:cover !important; display:block !important; }
  section.portfolio .portfolio-grid h3{ margin:8px 6px 10px !important; font-size:12.5px !important; font-weight:700 !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:1.2 !important; min-height:28px !important; }
}
@media (max-width: 600px){
  section.portfolio .portfolio-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* ===== HEADER NAV FIX (Mobile): show nav pills, hide phone/email ===== */
@media (max-width: 900px){
  header.topbar .right{ display:flex !important; flex-direction:column !important; gap:10px !important; align-items:flex-start !important; }
  header.topbar .right .contact-link,
  header.topbar .right .sep{ display:none !important; } /* hide phone/email on mobile */

  header.topbar nav.main-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-left:0 !important;
  }
  header.topbar nav.main-nav .nav-link{
    display:inline-block !important;
    color:#fff !important;
    font-weight:700 !important;
    text-decoration:none !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.12) !important;
    box-shadow:0 2px 10px rgba(0,0,0,.15) !important;
  }
}

/* === Trustpilot (home page only) === */

#reviews { scroll-margin-top: 140px !important; }
@media (max-width: 900px){
  
  #reviews { scroll-margin-top: 120px !important; }
}


/* === Responsive Enhancements (added by assistant) === */

/* Fluid media */
img, video { max-width: 100%; height: auto; }

/* Layout variables */
:root{
  --container: 1200px;
  --pad: 16px;
  --pad-lg: 24px;
}

/* Container tweaks */
.container{ max-width: var(--container); padding: 0 var(--pad); gap: 12px; flex-wrap: wrap; }

/* Mobile header with menu toggle */
.menu-toggle{
  display: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
  color: #fff;
}
.menu-toggle:focus{ outline: 2px dashed rgba(255,255,255,.7); outline-offset: 2px; }

/* Reset previous rule that hid .right on mobile */
@media (max-width: 768px){
  .topbar .right{ display: flex; align-items: center; gap: 12px; }
}

/* Mobile nav overlay */
.main-nav{
  /* desktop stays inline */
}
@media (max-width: 768px){
  .menu-toggle{ display: inline-block; margin-left: auto; }
  .main-nav{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 340px);
    background: rgba(0,0,0,0.9);
    padding: 80px var(--pad-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 80;
  }
  body.nav-open .main-nav{ transform: translateX(0); }
  .main-nav .nav-link{ font-size: 18px; padding: 10px 12px; border-radius: 10px; }
  /* Dim page behind open menu */
  body.nav-open::before{
    content:"";
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 70;
  }
}

/* Portfolio grid: 3/2/1 responsive */
.portfolio-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1024px){ .portfolio-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .portfolio-grid{ grid-template-columns: 1fr; } }

/* Typography scale */
h1{ line-height: 1.1; }
@media (max-width: 640px){ h1{ font-size: clamp(28px, 6vw, 36px); } }
h2{ line-height: 1.2; }
@media (max-width: 640px){ h2{ font-size: clamp(22px, 4.8vw, 28px); } }

/* Spacing polish for sections */
section{ padding: clamp(28px, 6vw, 56px) 0; }

/* Better narrow container on large screens */
.container.narrow{ max-width: 960px; }


/* === Nav helpers (restored) === */
@media (max-width:768px){
  .menu-toggle{ display:inline-block !important; }
  .topbar .right{ display:flex !important; align-items:center; gap:10px; }
  .topbar .right .contact-link,
  .topbar .right .sep{ display:none !important; }
}
body.nav-open::before{ pointer-events: none !important; }
.menu-toggle{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  z-index: 2002;
}
@media (max-width:768px){
  .main-nav{ z-index: 2001 !important; }
}
:root{ --anchor-offset: 88px; }
@media (max-width:768px){ :root{ --anchor-offset: 120px; } }
#welcome, #portfolio, #contact{ scroll-margin-top: var(--anchor-offset); }

/* === Lightbox arrows: blue glass === */
.lb-btn{
  background: rgba(30, 136, 229, .28) !important;
  border: 1px solid rgba(30, 136, 229, .45) !important;
  color:#fff !important;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 6px 18px rgba(30, 136, 229, .25);
}
.lb-btn:hover{ background: rgba(30, 136, 229, .45) !important; }
.lb-btn:focus{ outline: 2px solid rgba(30, 136, 229, .75); outline-offset: 2px; }



/* === V15: Lightbox CLOSE button -> red glass (desktop + mobile) === */
#lb .lb-close,
#lb .lightbox-close,
#lb .glightbox-close,
#lb .pswp__button--close,
#lb .close,
#lb .lb-btn.close,
#lb .lb-btn.is-close{
  background: rgba(220, 38, 38, .35) !important;         /* red glass */
  border: 1px solid rgba(220, 38, 38, .55) !important;
  color: #fff !important;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 6px 18px rgba(220, 38, 38, .35);
}
#lb .lb-close:hover,
#lb .lightbox-close:hover,
#lb .glightbox-close:hover,
#lb .pswp__button--close:hover,
#lb .close:hover,
#lb .lb-btn.close:hover,
#lb .lb-btn.is-close:hover{
  background: rgba(220, 38, 38, .6) !important;
}



/* V16: Enable nav clicks on desktop; pointer-events only controlled on mobile */
@media (max-width:768px){
  .main-nav{ pointer-events: none; }
  body.nav-open .main-nav{ pointer-events: auto; }
}
\n
/* === V17: Desktop-only sticky header (no mobile change) === */
@media (min-width:769px){
  .topbar{ position: sticky; top: 0; z-index: 3000; }
}

/* Ensure lightbox overlay sits above header */
#lb{ z-index: 5000 !important; }
\n

/* === DARK THEME OVERRIDES (requested palette) === */
html.dark, html.dark body{ background:#262930 !important; color:#e5e7eb !important; }
html.dark .intro,
html.dark section.portfolio,
html.dark .portfolio,
html.dark .contact,
html.dark .contact-inline,
html.dark .footer{ background:#262930 !important;   }
html.dark .portfolio-grid .card,
html.dark .card,
html.dark .feature,
html.dark .panel{ background:#262930 !important; border-color:#3a3d45 !important; box-shadow:0 8px 20px rgba(0,0,0,.35) !important; color:#e5e7eb !important; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark p, html.dark li, html.dark small, html.dark span{ color:#e5e7eb !important; }
html.dark a{ color:#93c5fd !important; } html.dark a:hover{ color:#bfdbfe !important; }
html.dark input, html.dark textarea, html.dark select{ background:rgba(38,41,48,1) !important; color:#e5e7eb !important; border-color:#3a3d45 !important; }
html.dark button, html.dark .btn{ background:#3a3d45 !important; color:#fff !important; border-color:#4b4f59 !important; }
/* === END DARK THEME OVERRIDES === */



@media (max-width:768px){  }



/* Light mode backgrounds to match page */
@media (prefers-color-scheme: light), :root:not(.dark) {
  .contact,
  .trustpilot-section,
  .trustpilot-section .container,
  .contact-inline {
    background: #f8fafc !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* Ensure no stray bands */




/* Footer in LIGHT mode: white bg + black text */



/* Keep DARK mode footer on requested dark bg */
html.dark .footer{
  background:#262930 !important;
  color:#e5e7eb !important;
}
html.dark .footer p,
html.dark .footer small,
html.dark .footer a{
  color:#e5e7eb !important;
}

/* Footer aligned with page background in LIGHT mode */
:root:not(.dark) .footer{
  background:#f8fafc !important;
  color:#000 !important;
}
:root:not(.dark) .footer p,
:root:not(.dark) .footer small,
:root:not(.dark) .footer a{ color:#000 !important; opacity:.9; }

/* Normalize bands around footer/contact to match page bg in LIGHT mode */
:root:not(.dark) .trustpilot-section,
:root:not(.dark) .trustpilot-section .container,
:root:not(.dark) .contact,
:root:not(.dark) .contact-inline,
:root:not(.dark) .footer-wrapper,
:root:not(.dark) .site-end,
:root:not(.dark) .page-bottom,
:root:not(.dark) .tail,
:root:not(.dark) .site-tail{
  background:#f8fafc !important;
  box-shadow:none !important;
  border:none !important;
}

/* === Twin separators (Light: black, Dark: white) === */
:root:not(.dark) .trustpilot-section{ border-top:2px solid #000 !important; }
:root:not(.dark) .footer{ border-top:2px solid #000 !important; }

html.dark .trustpilot-section{ border-top:2px solid #ffffff !important; }
html.dark .footer{ border-top:2px solid #ffffff !important; }

/* Ensure no extra backgrounds interfere */
.trustpilot-section, .footer{ box-shadow:none !important; background-clip:padding-box; }


/* === FIX: Dark mode header/nav links stay white (even on scroll/visited/active) === */
html.dark header a,
html.dark .header a,
html.dark nav a,
html.dark .nav a,
html.dark .topbar a,
html.dark .menu a,
html.dark .navbar a,
html.dark .site-header a,
html.dark .site-header nav a,
html.dark .header.scrolled a,
html.dark .site-header.scrolled a,
html.dark .navbar.scrolled a {
  color: #ffffff !important;
}
html.dark header a:visited,
html.dark .header a:visited,
html.dark nav a:visited,
html.dark .nav a:visited,
html.dark .topbar a:visited,
html.dark .menu a:visited,
html.dark .navbar a:visited { color:#ffffff !important; }
html.dark header a:hover,
html.dark .header a:hover,
html.dark nav a:hover,
html.dark .nav a:hover,
html.dark .topbar a:hover,
html.dark .menu a:hover,
html.dark .navbar a:hover { color:#f3f4f6 !important; }
html.dark .header svg, html.dark .site-header svg { fill:#ffffff; stroke:#ffffff; }



/* ----------------- Gallery pages polish (no size changes) ----------------- */
/* Remove any stray line under gallery */
.gallery-grid::after,
.gallery-grid hr { content:none !important; display:none !important; border:0 !important; }
/* Spacing under gallery so it never hugs the footer, even with many images */
.gallery-grid { margin-bottom: clamp(28px, 4vw, 48px) !important; }
/* Footer blends with gradient; only one black separator on top of footer */
.gallery-grid ~ footer.footer {
  background: transparent !important;
  box-shadow: none !important;
  border-top: 2px solid #000 !important;
}
.gallery-grid ~ footer.footer .container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Gentle breathing room inside grid without changing card sizes */
.gallery-grid { gap: clamp(12px, 2.5vw, 20px); }
/* Extra bottom space on very small screens */
@media (max-width: 480px) { .gallery-grid { margin-bottom: 36px !important; } }
/* ------------------------------------------------------------------------- */


/* Ensure videos match gallery tile size */
.tile video{width:100%;height:220px;object-fit:cover;display:block}


/* === Mobile gallery normalization for Kitchen & Garden (match Bathroom) === */
@media (max-width: 768px) {
  .gallery-kitchen .gallery-grid,
  .gallery-garden .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .gallery-kitchen .gallery-grid > *,
  .gallery-garden .gallery-grid > * {
    display: block;
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  .gallery-kitchen .gallery-grid img,
  .gallery-garden .gallery-grid img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 14px;
  }
  .gallery-kitchen .gallery-grid figure,
  .gallery-garden .gallery-grid figure {
    margin: 0;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
  }
}



/* === Mobile gallery 'fill the row' fix (Kitchen & Garden match Bathroom) === */
@media (max-width: 768px) {
  .gallery-kitchen .gallery-grid,
  .gallery-garden .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  /* wrappers/cards must not cap width */
  .gallery-kitchen .gallery-grid > *,
  .gallery-garden .gallery-grid > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* ensure anchors/figures behave like block and stretch */
  .gallery-kitchen .gallery-grid a,
  .gallery-garden .gallery-grid a,
  .gallery-kitchen .gallery-grid figure,
  .gallery-garden .gallery-grid figure {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* images fill entire grid cell (square) */
  .gallery-kitchen .gallery-grid img,
  .gallery-garden .gallery-grid img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
}



/* Video tiles preview same height as images across all galleries */
.gallery-grid a.tile[data-type="video"] video{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  background: transparent;
  border:0; outline:0;
  vertical-align: top;
}


/* Contact: Trustpilot review chip */
.contactx__grid .contactx__chip--review{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;padding:10px 14px;
  background:#e8f5ee;border:2px solid #00b67a;color:#065f46;
  font-weight:600;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
}
.contactx__grid .contactx__chip--review:hover{ filter:brightness(0.98); }


/* Review chip with centered green star */
.contactx__grid .contactx__chip--review{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:10px 14px;
  background:#e8f5ee;border:2px solid #00b67a;color:#065f46;
  font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
}
.contactx__grid .contactx__chip--review strong{ font-weight:700; }
.contactx__grid .contactx__chip--review:hover{ filter:brightness(0.98); transform: translateY(-1px); transition: .15s ease; }



/* iOS video visibility baseline */
video { display:block; width:100%; height:auto; background:#000; }


/* --- Hero Slider (auto 15s) --- */
.hero-slider { position: relative; height: 70vh; min-height: 420px; width: 100%; overflow: hidden; }
.hero-slider .slides { height: 100%; width: 100%; position: relative; }
.hero-slider .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease-in-out; }
.hero-slider .slide.is-active { opacity: 1; }
@media (max-width: 768px) {
  .hero-slider { height: 55vh; min-height: 320px; }
}


/* --- Modern Fade Hero Slider --- */
.fade-slider { position: relative; height: 85vh; min-height: 500px; overflow: hidden; }
.fade-slider .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.5s ease-in-out;
}
.fade-slider .slide.is-active { opacity: 1; z-index: 1; }
.fade-slider .overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);
}
.fade-slider .hero-content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; text-align: center; z-index: 2;
}
.fade-slider .hero-content h1 { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; }
.fade-slider .hero-content p { font-size: 1.25rem; margin: 0; }
@media (max-width: 768px) {
  .fade-slider { height: 65vh; min-height: 360px; }
  .fade-slider .hero-content h1 { font-size: 2rem; }
  .fade-slider .hero-content p { font-size: 1rem; }
}