:root{
  --deep:#03130c;--glass:rgba(4,24,14,.70);--glass2:rgba(7,38,22,.78);--line:rgba(232,204,124,.26);
  --cream:#fff7df;--muted:rgba(255,247,223,.75);--gold:#e7c45c;--green:#7CFF37;--lime:#c9ff8b;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--cream);background:#03130c;overflow-x:hidden}
.bg{position:fixed;inset:0;background:
  linear-gradient(90deg,rgba(1,10,5,.92),rgba(2,20,9,.45) 45%,rgba(1,10,5,.88)),
  linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.72)),
  url("assets/images/7a1c8b130548b7c0.webp") center/cover no-repeat;z-index:-3}
.grain{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,rgba(124,255,55,.2),transparent 25rem),radial-gradient(circle at 85% 25%,rgba(231,196,92,.18),transparent 22rem);z-index:-2;pointer-events:none}
a{color:inherit;text-decoration:none}.topbar{position:sticky;top:14px;z-index:50;width:min(1180px,calc(100% - 28px));margin:14px auto 0;padding:12px 16px;display:flex;align-items:center;gap:20px;justify-content:space-between;background:rgba(3,20,12,.78);border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 70px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.logo img{width:210px;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.65))}.topbar nav{display:flex;gap:4px;align-items:center}.topbar nav a{font-size:14px;color:var(--muted);padding:10px 12px;border-radius:999px}.topbar nav a:hover{background:rgba(255,255,255,.08);color:#fff}.whatsapp,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900;border:1px solid var(--line);transition:.25s}
.whatsapp{background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307;padding:13px 18px;box-shadow:0 12px 30px rgba(231,196,92,.24)}
main{width:min(1180px,calc(100% - 28px));margin:auto}.hero{min-height:calc(100vh - 100px);display:flex;align-items:center;padding:80px 0 54px}.hero-panel{width:min(760px,100%);padding:46px;border-radius:34px;background:linear-gradient(135deg,rgba(3,25,13,.86),rgba(6,44,21,.64));border:1px solid var(--line);box-shadow:0 35px 100px rgba(0,0,0,.45);backdrop-filter:blur(14px)}
.eyebrow{margin:0 0 12px;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:900}.hero h1,.section h2,.cta h2{font-family:Georgia,serif;letter-spacing:-.055em;line-height:.93}.hero h1{font-size:clamp(54px,8vw,104px);margin:0 0 22px}.hero h1 span{color:var(--gold)}
.lead{font-size:20px;line-height:1.65;color:var(--muted);max-width:660px}.actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}.btn{padding:15px 22px}.primary{background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307}.ghost{background:rgba(255,255,255,.06);color:#fff}.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid var(--line);padding-top:20px}.trust span{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);font-size:13px;text-align:center;color:var(--muted)}
.facts-line{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(1,12,7,.74);backdrop-filter:blur(12px)}.facts-track{display:flex;width:max-content;animation:marquee 26s linear infinite}.facts-track span{padding:18px 34px;color:var(--lime);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:13px;white-space:nowrap}@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding:76px 0}.glass{background:linear-gradient(135deg,rgba(4,29,15,.82),rgba(7,48,25,.58));border:1px solid var(--line);border-radius:34px;padding:44px;margin:36px auto;backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.28)}.intro h2,.section h2,.cta h2{font-size:clamp(34px,4.5vw,60px);margin:0 0 20px}.why-grid,.category-grid,.process-grid,.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.why-grid article,.category-grid article,.process-grid article,.review-grid article{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:24px}.why-grid b,.process-grid span{color:var(--gold);font-size:28px}.why-grid h3,.category-grid h3,.process-grid h3{margin:12px 0 10px}.why-grid p,.category-grid p,.process-grid p,.review-grid article{color:var(--muted);line-height:1.55}
.section-head{margin-bottom:26px}.row{display:flex;justify-content:space-between;gap:20px;align-items:end}.filters,.carousel-controls{display:flex;gap:10px;flex-wrap:wrap}.filter,.carousel-controls button{border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;cursor:pointer}.filter.active{background:var(--gold);color:#071307}
.category-grid{grid-template-columns:repeat(3,1fr)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-card{overflow:hidden;background:rgba(2,20,12,.75);border:1px solid var(--line);border-radius:28px;box-shadow:0 25px 70px rgba(0,0,0,.26)}.product-card img{width:100%;height:260px;object-fit:cover;display:block}.product-card div{padding:22px}.product-card span{color:var(--gold);text-transform:uppercase;font-size:12px;letter-spacing:.12em;font-weight:900}.product-card h3{font-family:Georgia,serif;font-size:28px;margin:8px 0}.product-card p{color:var(--muted);line-height:1.55}.product-card a{color:var(--gold);font-weight:900}
.carousel-window{overflow:hidden;border-radius:32px}.project-track{display:flex;gap:18px;transition:transform .45s ease}.project-slide{min-width:calc(33.333% - 12px);height:520px;position:relative;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#092013}.project-slide img{width:100%;height:100%;object-fit:cover;display:block}.project-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}.project-slide div{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}.project-slide h3{font-family:Georgia,serif;font-size:28px;margin:0 0 6px}.project-slide p{margin:0;color:var(--muted)}
.process-grid{grid-template-columns:repeat(4,1fr)}.review-grid{grid-template-columns:repeat(3,1fr)}.review-grid b{display:block;color:var(--gold);margin-top:18px}.cta{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}.cta p{color:var(--muted);font-size:18px;line-height:1.6}.contact-card{display:grid;gap:14px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:26px}.contact-card a:not(.btn),.contact-card span{color:var(--muted)}
footer{border-top:1px solid var(--line);padding:38px max(28px,calc((100vw - 1180px)/2));background:rgba(1,11,6,.88);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;align-items:center}footer img{width:210px}footer p,footer small{color:var(--muted)}footer div{display:flex;gap:18px;flex-wrap:wrap;justify-content:end}
.review-popup{position:fixed;right:22px;bottom:22px;width:min(360px,calc(100% - 44px));padding:22px;border-radius:24px;background:rgba(4,29,15,.94);border:1px solid var(--line);box-shadow:0 25px 90px rgba(0,0,0,.45);z-index:80;transform:translateY(140%);opacity:0;transition:.45s}.review-popup.show{transform:translateY(0);opacity:1}.review-popup button{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.review-popup strong{color:var(--gold)}.review-popup p{color:var(--muted);line-height:1.55;margin-bottom:0}
@media(max-width:900px){.topbar{border-radius:20px;flex-wrap:wrap}.topbar nav{order:3;width:100%;overflow:auto}.logo img{width:180px}.hero-panel{padding:28px}.trust,.why-grid,.category-grid,.product-grid,.process-grid,.review-grid,.cta,footer{grid-template-columns:1fr}.project-slide{min-width:82%}.row{display:block}.filters{margin-top:16px}.hero{padding-top:50px}.product-card img{height:230px}}


/* FINAL FIXES: right-side landing facts, product image visibility, SEO sections */
.hero{
  justify-content:space-between;
  gap:38px;
}
.hero-floats{
  width:min(390px,100%);
  display:grid;
  gap:14px;
  margin-left:auto;
}
.float-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(7,26,18,.72),rgba(20,39,25,.56));
  border:1px solid rgba(232,204,124,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.26);
  backdrop-filter:blur(16px);
  animation:softFloat 5.5s ease-in-out infinite;
}
.float-card:nth-child(2){animation-delay:.35s}
.float-card:nth-child(3){animation-delay:.7s}
.float-card:nth-child(4){animation-delay:1.05s}
.float-card b{
  width:44px;height:44px;display:grid;place-items:center;border-radius:999px;
  background:rgba(231,196,92,.16);color:var(--gold);border:1px solid rgba(232,204,124,.34);
}
.float-card strong{display:block;color:#fff;font-size:17px}
.float-card p{margin:5px 0 0;color:var(--muted);line-height:1.45;font-size:14px}
.float-main{
  grid-template-columns:1fr;
  padding:24px;
  background:linear-gradient(135deg,rgba(231,196,92,.18),rgba(6,35,20,.70));
}
.float-main span{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.float-main strong{font-family:Georgia,serif;font-size:28px;letter-spacing:-.04em}
.mini-stat{grid-template-columns:1fr;text-align:center;background:linear-gradient(135deg,#ffe27a,#d9aa35);color:#071307}
.mini-stat strong,.mini-stat p{color:#071307}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Product PNGs from the old site often have transparent edges. This makes every product image visible. */
.product-card img{
  background:
    radial-gradient(circle at 50% 35%,rgba(255,244,185,.36),transparent 42%),
    linear-gradient(135deg,#102416,#25321d) !important;
  object-fit:contain !important;
  padding:16px;
}
.product-card img[src*="Gentle"],
.product-card img[src*="Gentle%20Jungle"]{
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,220,.48),transparent 44%),
    linear-gradient(135deg,#17301e,#314025) !important;
  padding:22px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.service-grid article,.faq-list details,.glass-lite{
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:24px;
}
.service-grid h3,.seo-copy h3{margin:0 0 10px;font-family:Georgia,serif;font-size:26px}
.service-grid p,.seo-copy p,.faq-list p{color:var(--muted);line-height:1.65;margin-bottom:0}
.seo-copy{margin-top:16px}
.faq-list{display:grid;gap:12px}
.faq-list summary{cursor:pointer;font-weight:900;color:#fff;font-size:18px}
.faq-list details[open]{border-color:rgba(232,204,124,.36)}
.topbar nav a[href="#reviews"]::after{content:" / FAQ"; color:var(--gold); font-size:11px; margin-left:2px;}
@media(max-width:900px){
  .hero{display:grid}
  .hero-floats{width:100%;margin:0}
  .service-grid{grid-template-columns:1fr}
}


/* Backdrop final: original uploaded plant image, just slightly brighter and cleaner */
.bg{
  background:
    linear-gradient(90deg,rgba(1,10,5,.72),rgba(2,18,8,.18) 46%,rgba(1,10,5,.62)),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),
    url("assets/images/7a1c8b130548b7c0.webp") center/cover no-repeat !important;
  filter:saturate(.96) brightness(1.08) contrast(1.02) !important;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 10%,rgba(255,255,255,.10),transparent 24rem),
    radial-gradient(circle at 78% 18%,rgba(231,196,92,.08),transparent 26rem),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.20) 75%,rgba(0,0,0,.42) 100%);
  pointer-events:none;
}

/* Always-visible WhatsApp button */
.sticky-whatsapp{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:120;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  font-weight:900;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 0 8px rgba(37,211,102,.13);
  transition:transform .22s ease, box-shadow .22s ease;
}
.sticky-whatsapp:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 10px rgba(37,211,102,.16);
}
.sticky-whatsapp .wa-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  font-size:20px;
}
.sticky-whatsapp small{
  display:block;
  font-weight:700;
  font-size:11px;
  opacity:.88;
  line-height:1.1;
}
.sticky-whatsapp span:last-child{
  display:block;
  line-height:1.15;
}
@media(max-width:700px){
  .sticky-whatsapp{
    left:14px;
    bottom:14px;
    padding:13px 15px;
  }
  .sticky-whatsapp small{display:none}
}


.section-support{
  max-width:780px;
  color:var(--muted);
  line-height:1.65;
  font-size:17px;
  margin:8px 0 0;
}


/* FINAL READABILITY + CAROUSEL FIXES */
body{
  text-rendering:optimizeLegibility;
}
.hero-panel,
.glass,
.product-card,
.category-grid article,
.process-grid article,
.review-grid article,
.service-grid article,
.faq-list details,
.contact-card,
.float-card{
  background-color:rgba(2,12,7,.84) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.hero h1,
.section h2,
.cta h2,
.product-card h3,
.category-grid h3,
.process-grid h3,
.service-grid h3,
.project-slide h3{
  color:#fffbe8 !important;
  text-shadow:0 4px 18px rgba(0,0,0,.72), 0 1px 0 rgba(0,0,0,.9);
}
.hero h1 span{
  color:#ffe27a !important;
  text-shadow:0 4px 22px rgba(0,0,0,.78), 0 0 28px rgba(231,196,92,.28);
}
.lead,
.section-support,
.product-card p,
.category-grid p,
.process-grid p,
.service-grid p,
.seo-copy p,
.faq-list p,
.review-grid article,
.cta p,
.contact-card a:not(.btn),
.contact-card span,
footer p,
footer small,
.float-card p{
  color:rgba(255,250,225,.93) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}
.eyebrow,
.product-card span,
.float-main span{
  color:#ffe27a !important;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.btn,
.whatsapp,
.sticky-whatsapp{
  text-shadow:none !important;
}
.hero-panel{
  border:1px solid rgba(255,226,122,.36) !important;
}
.section-head{
  position:relative;
  z-index:3;
}

/* Remove all text headings/captions sitting on top of project / before-after images. */
.project-slide::after,
.project-slide div{
  display:none !important;
}
.project-slide{
  border:1px solid rgba(255,226,122,.35) !important;
  box-shadow:0 26px 80px rgba(0,0,0,.42);
}

/* Put carousel arrows directly on the left and right sides of the image carousel. */
.projects{
  position:relative;
}
.projects .section-head.row{
  display:block !important;
}
.projects .carousel-controls{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  padding:0 10px;
}
.projects .carousel-controls button{
  pointer-events:auto;
  width:56px;
  height:56px;
  border-radius:999px;
  padding:0 !important;
  display:grid;
  place-items:center;
  font-size:34px;
  line-height:1;
  background:rgba(2,12,7,.84) !important;
  color:#ffe27a !important;
  border:1px solid rgba(255,226,122,.55) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.46);
}
.projects .carousel-controls button:hover{
  transform:scale(1.08);
  background:#ffe27a !important;
  color:#071307 !important;
}
.carousel-window{
  position:relative;
  padding:0 4px;
}
@media(max-width:900px){
  .projects .carousel-controls{
    top:58%;
    padding:0 2px;
  }
  .projects .carousel-controls button{
    width:48px;
    height:48px;
    font-size:30px;
  }
}


/* FINAL: Carousel arrows centered in the middle of the images + balanced 7-product layout */
.projects .carousel-window{
  position:relative !important;
  overflow:hidden;
  border-radius:32px;
}
.projects .section-head.row{
  display:block !important;
}
.projects .carousel-controls{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:20 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  pointer-events:none !important;
  padding:0 14px !important;
}
.projects .carousel-controls button{
  pointer-events:auto !important;
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  font-size:38px !important;
  line-height:1 !important;
  background:rgba(2,12,7,.88) !important;
  color:#ffe27a !important;
  border:1px solid rgba(255,226,122,.62) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.55) !important;
  backdrop-filter:blur(12px);
}
.projects .carousel-controls button:hover{
  transform:scale(1.08);
  background:#ffe27a !important;
  color:#071307 !important;
}

/* 7 hedging types: first row 4 cards, second row 3 wider cards. */
.product-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:18px !important;
}
.product-card{
  grid-column:span 3;
}
.product-card:nth-child(n+5){
  grid-column:span 4;
}
.product-card img{
  height:240px !important;
}
.product-card:nth-child(n+5) img{
  height:275px !important;
}
@media(max-width:1100px){
  .product-card,
  .product-card:nth-child(n+5){
    grid-column:span 6;
  }
}
@media(max-width:700px){
  .product-card,
  .product-card:nth-child(n+5){
    grid-column:span 12;
  }
  .projects .carousel-controls{
    padding:0 6px !important;
  }
  .projects .carousel-controls button{
    width:48px !important;
    height:48px !important;
    font-size:32px !important;
  }
}


/* FINAL REQUESTS: Gauteng-only text, before/after split slides, location only in footer */
.before-after-slide{
  padding:0 !important;
  background:#071307 !important;
}
.ba-split{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:1fr 54px 1fr;
  background:#071307;
}
.ba-half{
  position:relative;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.ba-before{
  filter:saturate(.55) brightness(.72);
}
.ba-after{
  filter:saturate(1.05) brightness(1.03);
}
.ba-half::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.38));
}
.ba-half span{
  position:absolute;
  left:18px;
  top:16px;
  z-index:2;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(2,12,7,.78);
  border:1px solid rgba(255,226,122,.45);
  color:#ffe27a;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:12px;
}
.ba-arrow{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ffe27a,#d7a928);
  color:#071307;
  font-size:34px;
  font-weight:1000;
  box-shadow:0 0 35px rgba(0,0,0,.35);
  z-index:3;
}
footer p strong{
  color:#ffe27a;
}


/* CLEAN FINAL FIXES */
.projects .section-head{
  margin-bottom:22px !important;
}
.projects .carousel-window{
  position:relative !important;
  overflow:hidden !important;
  border-radius:32px !important;
}
.projects .project-track{
  display:flex !important;
  gap:18px !important;
  transition:transform .45s ease !important;
}
.projects .project-slide{
  min-width:calc(33.333% - 12px) !important;
  height:560px !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:32px !important;
  border:1px solid rgba(255,226,122,.38) !important;
  background:#071307 !important;
  box-shadow:0 26px 80px rgba(0,0,0,.42) !important;
}
.projects .project-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.project-slide::after,
.project-slide > div:not(.ba-split){
  display:none !important;
}
.carousel-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:30 !important;
  width:62px !important;
  height:62px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,226,122,.68) !important;
  background:rgba(2,12,7,.88) !important;
  color:#ffe27a !important;
  box-shadow:0 18px 48px rgba(0,0,0,.58) !important;
  backdrop-filter:blur(12px);
  display:grid !important;
  place-items:center !important;
  font-size:42px !important;
  line-height:1 !important;
  padding:0 !important;
  cursor:pointer !important;
}
.carousel-arrow-left{left:18px !important;}
.carousel-arrow-right{right:18px !important;}
.carousel-arrow:hover{
  background:#ffe27a !important;
  color:#071307 !important;
}

/* Before-and-after: split the original composite image vertically, with the arrow between them. */
.before-after-slide{
  padding:0 !important;
}
.before-after-slide .ba-split{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-rows:1fr 56px 1fr !important;
  background:#071307 !important;
}
.before-after-slide .ba-half{
  position:relative !important;
  background-image:var(--ba-img) !important;
  background-repeat:no-repeat !important;
  background-size:100% 200% !important;
  overflow:hidden !important;
}
.before-after-slide .ba-before{
  background-position:center top !important;
  filter:saturate(.65) brightness(.76) !important;
}
.before-after-slide .ba-after{
  background-position:center bottom !important;
  filter:saturate(1.08) brightness(1.04) !important;
}
.before-after-slide .ba-half::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.26)) !important;
}
.before-after-slide .ba-half span{
  position:absolute !important;
  left:18px !important;
  top:16px !important;
  z-index:2 !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:rgba(2,12,7,.82) !important;
  border:1px solid rgba(255,226,122,.48) !important;
  color:#ffe27a !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.11em !important;
  font-size:12px !important;
}
.before-after-slide .ba-arrow{
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,#ffe27a,#d7a928) !important;
  color:#071307 !important;
  font-size:36px !important;
  font-weight:1000 !important;
  box-shadow:0 0 35px rgba(0,0,0,.35) !important;
  z-index:3 !important;
}

/* Balanced 7-product layout: four cards first row, three wider cards second row. */
.product-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:18px !important;
}
.product-card{
  grid-column:span 3 !important;
}
.product-card:nth-child(n+5){
  grid-column:span 4 !important;
}
.product-card img{
  height:240px !important;
}
.product-card:nth-child(n+5) img{
  height:275px !important;
}
.footer-location{
  color:rgba(255,250,225,.9) !important;
}
.footer-location strong{
  color:#ffe27a !important;
}
@media(max-width:1100px){
  .product-card,
  .product-card:nth-child(n+5){
    grid-column:span 6 !important;
  }
}
@media(max-width:900px){
  .projects .project-slide{
    min-width:82% !important;
  }
  .carousel-arrow{
    width:50px !important;
    height:50px !important;
    font-size:34px !important;
  }
  .carousel-arrow-left{left:8px !important;}
  .carousel-arrow-right{right:8px !important;}
}
@media(max-width:700px){
  .product-card,
  .product-card:nth-child(n+5){
    grid-column:span 12 !important;
  }
}


/* FINAL BEFORE/AFTER FIX: no arrows, both image halves visible */
.before-after-slide .ba-split{
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  gap:3px !important;
  background:#071307 !important;
}
.before-after-slide .ba-arrow{
  display:none !important;
}
.before-after-slide .ba-half{
  min-height:0 !important;
  background-image:var(--ba-img) !important;
  background-repeat:no-repeat !important;
  background-size:100% 200% !important;
  border:0 !important;
}
.before-after-slide .ba-before{
  background-position:center top !important;
  filter:saturate(.78) brightness(.88) contrast(1.03) !important;
}
.before-after-slide .ba-after{
  background-position:center bottom !important;
  filter:saturate(1.05) brightness(1.08) contrast(1.04) !important;
}
.before-after-slide .ba-half span{
  background:rgba(2,12,7,.88) !important;
}


/* FINAL LOGO + SOCIAL LINKS */
.topbar{
  min-height:92px;
}
.logo img{
  width:260px !important;
  max-height:92px !important;
  object-fit:contain !important;
}
footer img{
  width:270px !important;
  max-height:160px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
.footer-social{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.footer-social strong{
  color:#ffe27a;
  margin-right:4px;
}
.footer-social a{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,226,122,.42);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
  transition:.2s ease;
}
.footer-social a:hover{
  background:#ffe27a;
  color:#071307;
  transform:translateY(-2px);
}
@media(max-width:900px){
  .topbar{
    min-height:auto;
  }
  .logo img{
    width:220px !important;
    max-height:82px !important;
  }
  footer img{
    width:230px !important;
  }
  .footer-social{
    justify-content:flex-start;
  }
}


/* FINAL LOGO PLACEMENT FIX */
.topbar{
  width:min(1320px,calc(100% - 28px)) !important;
  min-height:104px !important;
  padding:12px 18px !important;
  gap:18px !important;
}
.logo{
  flex:0 0 365px !important;
  height:86px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
.logo img{
  width:360px !important;
  max-width:360px !important;
  max-height:110px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(124,255,55,.14)) !important;
}
.topbar nav{
  flex:1 1 auto !important;
  justify-content:center !important;
  gap:2px !important;
}
.topbar nav a{
  padding:10px 10px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
.topbar .whatsapp{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
footer{
  grid-template-columns:1.25fr .85fr 1fr !important;
  align-items:center !important;
  gap:28px !important;
}
footer > img{
  width:430px !important;
  max-width:100% !important;
  max-height:260px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(124,255,55,.12)) !important;
}
.footer-social{
  justify-content:flex-end !important;
}
@media(max-width:1150px){
  .topbar{
    flex-wrap:wrap !important;
    min-height:auto !important;
  }
  .logo{
    flex:1 1 100% !important;
    height:auto !important;
    justify-content:center !important;
  }
  .logo img{
    width:min(420px,92vw) !important;
    max-width:92vw !important;
  }
  .topbar nav{
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
    overflow:auto !important;
  }
}
@media(max-width:900px){
  footer{
    grid-template-columns:1fr !important;
  }
  footer > img{
    width:min(460px,100%) !important;
  }
  .footer-social{
    justify-content:flex-start !important;
  }
}


/* FINAL LOGO FIT + BEFORE/AFTER VISIBILITY FIX */
.topbar{
  width:min(1340px,calc(100% - 28px)) !important;
  min-height:92px !important;
  padding:12px 18px !important;
  gap:18px !important;
}
.logo{
  flex:0 0 430px !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
.logo img{
  width:420px !important;
  max-width:420px !important;
  height:auto !important;
  max-height:76px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.76)) drop-shadow(0 0 14px rgba(124,255,55,.18)) !important;
}
.topbar nav{
  flex:1 1 auto !important;
  justify-content:center !important;
  gap:2px !important;
}
.topbar nav a{
  padding:10px 9px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
.topbar .whatsapp{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
footer > img{
  width:460px !important;
  max-width:100% !important;
  max-height:300px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(124,255,55,.16)) !important;
}

/* Before/after slides: show the full uploaded images clearly. */
.project-slide.full-before-after{
  background:rgba(2,12,7,.96) !important;
  padding:10px !important;
}
.project-slide.full-before-after img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:rgba(0,0,0,.42) !important;
  border-radius:24px !important;
}
.project-slide.full-before-after::after,
.project-slide.full-before-after div,
.before-after-slide .ba-split,
.before-after-slide .ba-arrow{
  display:none !important;
}
@media(max-width:1180px){
  .topbar{
    flex-wrap:wrap !important;
    min-height:auto !important;
  }
  .logo{
    flex:1 1 100% !important;
    height:auto !important;
    justify-content:center !important;
  }
  .logo img{
    width:min(520px,92vw) !important;
    max-width:92vw !important;
    max-height:96px !important;
  }
  .topbar nav{
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
    overflow:auto !important;
  }
}
@media(max-width:900px){
  footer > img{
    width:min(480px,100%) !important;
  }
}


/* FINAL HEADER SOCIALS + CLEAN FOOTER */
.topbar{
  width:min(1380px,calc(100% - 28px)) !important;
  min-height:86px !important;
  padding:10px 16px !important;
  gap:14px !important;
}
.logo{
  flex:0 0 370px !important;
  height:70px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.logo img{
  width:365px !important;
  max-width:365px !important;
  max-height:74px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(124,255,55,.16)) !important;
}
.topbar nav{
  flex:1 1 auto !important;
  justify-content:center !important;
  gap:1px !important;
}
.topbar nav a{
  font-size:13px !important;
  padding:9px 8px !important;
  white-space:nowrap !important;
}
.top-socials{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}
.top-socials a{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#ffe27a;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.04em;
  border:1px solid rgba(255,226,122,.42);
  background:rgba(255,255,255,.07);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:.22s ease;
}
.top-socials a:hover{
  background:#ffe27a;
  color:#071307;
  transform:translateY(-2px);
}
.topbar .whatsapp{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  padding:12px 15px !important;
}

/* Replace messy footer styling with a proper premium footer grid. */
.site-footer{
  margin-top:70px !important;
  padding:0 !important;
  border-top:1px solid rgba(255,226,122,.26) !important;
  background:linear-gradient(180deg,rgba(1,10,6,.95),rgba(0,5,3,.98)) !important;
  display:block !important;
}
.site-footer .footer-inner{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:48px 0 34px;
  display:grid;
  grid-template-columns:1.45fr .7fr .9fr .7fr;
  gap:34px;
  align-items:start;
}
.footer-brand-block{
  display:block;
}
.footer-brand-block img{
  width:360px !important;
  max-width:100% !important;
  height:auto !important;
  max-height:130px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  margin:0 0 18px !important;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(124,255,55,.14)) !important;
}
.footer-brand-block p{
  max-width:440px;
  margin:0 0 12px;
  color:rgba(255,250,225,.82);
  line-height:1.65;
}
.footer-location strong{
  color:#ffe27a;
}
.footer-column{
  display:grid;
  gap:10px;
}
.footer-column h3{
  margin:0 0 6px;
  color:#ffe27a;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.footer-column a,
.footer-column span{
  color:rgba(255,250,225,.84);
  font-weight:700;
  line-height:1.4;
}
.footer-column a:hover{
  color:#ffe27a;
}
.footer-social a{
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,226,122,.36);
  background:rgba(255,255,255,.06);
}
.footer-social a:hover{
  background:#ffe27a;
  color:#071307;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 24px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  color:rgba(255,250,225,.62);
}
@media(max-width:1220px){
  .topbar{
    flex-wrap:wrap !important;
  }
  .logo{
    flex:1 1 100% !important;
    justify-content:center !important;
    height:auto !important;
  }
  .logo img{
    width:min(520px,92vw) !important;
    max-width:92vw !important;
    max-height:94px !important;
  }
  .topbar nav{
    order:3;
    width:100%;
    overflow:auto;
    justify-content:center !important;
  }
  .top-socials{
    margin-left:auto;
  }
}
@media(max-width:900px){
  .site-footer .footer-inner{
    grid-template-columns:1fr 1fr;
  }
  .footer-brand-block{
    grid-column:1/-1;
  }
}
@media(max-width:620px){
  .site-footer .footer-inner{
    grid-template-columns:1fr;
  }
  .footer-bottom{
    display:grid;
  }
  .top-socials a{
    width:36px;
    height:36px;
  }
}


/* FINAL TOP SOCIAL APP LOGOS + BEFORE/AFTER DIVIDER */
.top-socials{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  flex:0 0 auto !important;
}
.top-socials .social-icon{
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
  overflow:hidden !important;
}
.top-socials .social-icon svg{
  width:38px !important;
  height:38px !important;
  display:block !important;
}
.top-socials .social-icon:hover{
  transform:translateY(-3px) scale(1.06) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 0 4px rgba(255,226,122,.12) !important;
  background:rgba(255,255,255,.14) !important;
}

/* Before/after images stay fully visible, with a clear separator line and labels. */
.project-slide.full-before-after{
  position:relative !important;
  background:rgba(2,12,7,.96) !important;
  padding:10px !important;
}
.project-slide.full-before-after img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:rgba(0,0,0,.42) !important;
  border-radius:24px !important;
}
.project-slide.full-before-after .ba-divider{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:50% !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,transparent,#ffe27a 12%,#ffffff 50%,#ffe27a 88%,transparent) !important;
  box-shadow:0 0 18px rgba(255,226,122,.75),0 3px 12px rgba(0,0,0,.8) !important;
  border-radius:999px !important;
  z-index:5 !important;
  display:block !important;
}
.project-slide.full-before-after .ba-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#ffe27a;
  border:2px solid #071307;
  box-shadow:0 0 18px rgba(255,226,122,.65);
}
.project-slide.full-before-after .ba-label{
  position:absolute !important;
  left:22px !important;
  z-index:6 !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(2,12,7,.88) !important;
  color:#ffe27a !important;
  border:1px solid rgba(255,226,122,.55) !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 26px rgba(0,0,0,.40) !important;
  display:block !important;
}
.project-slide.full-before-after .ba-label-before{
  top:22px !important;
}
.project-slide.full-before-after .ba-label-after{
  bottom:22px !important;
}
@media(max-width:700px){
  .top-socials .social-icon{
    width:38px !important;
    height:38px !important;
  }
  .top-socials .social-icon svg{
    width:34px !important;
    height:34px !important;
  }
}


/* FINAL ALL-CAROUSEL BEFORE/AFTER FIX */
.project-slide.carousel-before-after{
  position:relative !important;
  background:rgba(2,12,7,.96) !important;
  padding:10px !important;
}
.project-slide.carousel-before-after img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:rgba(0,0,0,.42) !important;
  border-radius:24px !important;
}
.project-slide.carousel-before-after::after,
.project-slide.carousel-before-after div:not(.ba-split){
  display:none !important;
}
.project-slide.carousel-before-after .ba-divider{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:50% !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,transparent,#ffe27a 12%,#ffffff 50%,#ffe27a 88%,transparent) !important;
  box-shadow:0 0 18px rgba(255,226,122,.75),0 3px 12px rgba(0,0,0,.8) !important;
  border-radius:999px !important;
  z-index:8 !important;
  display:block !important;
}
.project-slide.carousel-before-after .ba-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#ffe27a;
  border:2px solid #071307;
  box-shadow:0 0 18px rgba(255,226,122,.65);
}
.project-slide.carousel-before-after .ba-label{
  position:absolute !important;
  left:22px !important;
  z-index:9 !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(2,12,7,.88) !important;
  color:#ffe27a !important;
  border:1px solid rgba(255,226,122,.55) !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 26px rgba(0,0,0,.40) !important;
  display:block !important;
}
.project-slide.carousel-before-after .ba-label-before{
  top:22px !important;
}
.project-slide.carousel-before-after .ba-label-after{
  bottom:22px !important;
}


/* FINAL CAROUSEL RULE: split effect on all carousel images EXCEPT the 2 selected images */
.project-slide.no-before-after-line{
  position:relative !important;
  background:rgba(2,12,7,.96) !important;
  padding:0 !important;
}
.project-slide.no-before-after-line img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
  background:transparent !important;
}
.project-slide.no-before-after-line .ba-divider,
.project-slide.no-before-after-line .ba-label{
  display:none !important;
}
.project-slide.no-before-after-line::after,
.project-slide.no-before-after-line > div{
  display:none !important;
}

/* All other carousel images show the clear before/after separator. */
.project-slide.carousel-before-after{
  position:relative !important;
  background:rgba(2,12,7,.96) !important;
  padding:10px !important;
}
.project-slide.carousel-before-after img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:rgba(0,0,0,.42) !important;
  border-radius:24px !important;
}
.project-slide.carousel-before-after::after,
.project-slide.carousel-before-after > div{
  display:none !important;
}
.project-slide.carousel-before-after .ba-divider{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:50% !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(90deg,transparent,#ffe27a 12%,#ffffff 50%,#ffe27a 88%,transparent) !important;
  box-shadow:0 0 18px rgba(255,226,122,.75),0 3px 12px rgba(0,0,0,.8) !important;
  border-radius:999px !important;
  z-index:8 !important;
  display:block !important;
}
.project-slide.carousel-before-after .ba-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#ffe27a;
  border:2px solid #071307;
  box-shadow:0 0 18px rgba(255,226,122,.65);
}
.project-slide.carousel-before-after .ba-label{
  position:absolute !important;
  left:22px !important;
  z-index:9 !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(2,12,7,.88) !important;
  color:#ffe27a !important;
  border:1px solid rgba(255,226,122,.55) !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 26px rgba(0,0,0,.40) !important;
  display:block !important;
}
.project-slide.carousel-before-after .ba-label-before{
  top:22px !important;
}
.project-slide.carousel-before-after .ba-label-after{
  bottom:22px !important;
}


/* FINAL: undo before/after effect on every carousel image */
.project-slide,
.project-slide.single-project-slide,
.project-slide.no-before-after-line,
.project-slide.carousel-before-after,
.project-slide.full-before-after{
  position:relative !important;
  background:rgba(2,12,7,.96) !important;
  padding:0 !important;
}
.project-slide img,
.project-slide.single-project-slide img,
.project-slide.no-before-after-line img,
.project-slide.carousel-before-after img,
.project-slide.full-before-after img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
  background:transparent !important;
}
.project-slide .ba-divider,
.project-slide .ba-label,
.project-slide .ba-arrow,
.project-slide .ba-split{
  display:none !important;
}
.project-slide::after,
.project-slide > div{
  display:none !important;
}


/* FINAL FULL DRAPING LOGO */
.topbar{
  overflow:visible !important;
  min-height:104px !important;
  padding:12px 18px !important;
  align-items:flex-start !important;
}
.logo{
  flex:0 0 420px !important;
  height:104px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow:visible !important;
  position:relative !important;
  z-index:8 !important;
}
.logo img{
  width:420px !important;
  max-width:420px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left top !important;
  display:block !important;
  margin-top:-8px !important;
  transform:translateY(8px) !important;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.78)) drop-shadow(0 0 18px rgba(124,255,55,.18)) !important;
}
.topbar nav,
.top-socials,
.topbar .whatsapp{
  margin-top:20px !important;
}
.site-footer,
footer{
  overflow:visible !important;
}
.footer-brand-block img,
.site-footer footer img,
footer > img,
footer img{
  width:520px !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left top !important;
  display:block !important;
  margin:-26px 0 10px !important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.78)) drop-shadow(0 0 22px rgba(124,255,55,.18)) !important;
}
.footer-brand-block{
  overflow:visible !important;
}
@media(max-width:1220px){
  .topbar{
    align-items:center !important;
  }
  .logo{
    flex:1 1 100% !important;
    height:auto !important;
    justify-content:center !important;
  }
  .logo img{
    width:min(520px,94vw) !important;
    max-width:94vw !important;
    margin-top:0 !important;
    transform:none !important;
  }
  .topbar nav,
  .top-socials,
  .topbar .whatsapp{
    margin-top:0 !important;
  }
}
@media(max-width:700px){
  .logo img{
    width:min(430px,94vw) !important;
  }
  footer img,
  .footer-brand-block img{
    width:min(460px,100%) !important;
  }
}


/* FINAL: make top directory/navigation text bigger and fill the header space better */
.topbar{
  width:min(1460px,calc(100% - 24px)) !important;
  gap:18px !important;
}
.topbar nav{
  flex:1 1 auto !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
  gap:6px !important;
  margin-top:18px !important;
}
.topbar nav a{
  font-size:15.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  padding:13px 15px !important;
  min-width:max-content !important;
  color:rgba(255,250,225,.94) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.58) !important;
}
.topbar nav a:hover{
  color:#ffe27a !important;
  background:rgba(255,255,255,.10) !important;
}
.top-socials{
  margin-top:18px !important;
}
.topbar .whatsapp{
  margin-top:18px !important;
  padding:14px 18px !important;
  font-size:14.5px !important;
}
@media(max-width:1220px){
  .topbar nav{
    justify-content:flex-start !important;
    gap:8px !important;
    margin-top:0 !important;
    padding-bottom:4px !important;
  }
  .topbar nav a{
    font-size:15px !important;
    padding:12px 14px !important;
  }
  .top-socials,
  .topbar .whatsapp{
    margin-top:0 !important;
  }
}


/* FINAL: bigger top navigation text while keeping everything inside the header block */
.topbar{
  width:min(1500px,calc(100% - 24px)) !important;
  min-height:104px !important;
  padding:12px 16px !important;
  gap:12px !important;
  align-items:flex-start !important;
  overflow:visible !important;
}
.logo{
  flex:0 0 390px !important;
  height:104px !important;
}
.logo img{
  width:390px !important;
  max-width:390px !important;
}
.topbar nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:3px !important;
  margin-top:22px !important;
  overflow:visible !important;
}
.topbar nav a{
  font-size:clamp(15px,0.84vw,17px) !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
  padding:12px 10px !important;
  white-space:nowrap !important;
  min-width:0 !important;
  color:rgba(255,250,225,.96) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.62) !important;
}
.top-socials{
  flex:0 0 auto !important;
  margin-top:22px !important;
  gap:8px !important;
}
.top-socials .social-icon{
  width:40px !important;
  height:40px !important;
}
.top-socials .social-icon svg{
  width:36px !important;
  height:36px !important;
}
.topbar .whatsapp{
  flex:0 0 auto !important;
  margin-top:22px !important;
  padding:13px 15px !important;
  font-size:14.5px !important;
  white-space:nowrap !important;
}

/* On medium screens, keep it inside the same block by letting the nav use a second line. */
@media(max-width:1280px){
  .topbar{
    flex-wrap:wrap !important;
    align-items:center !important;
  }
  .logo{
    flex:1 1 100% !important;
    height:auto !important;
    justify-content:center !important;
  }
  .logo img{
    width:min(500px,92vw) !important;
    max-width:92vw !important;
  }
  .topbar nav{
    order:3 !important;
    width:100% !important;
    margin-top:0 !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .topbar nav a{
    font-size:16px !important;
    padding:11px 13px !important;
  }
  .top-socials,
  .topbar .whatsapp{
    margin-top:0 !important;
  }
}
@media(max-width:650px){
  .topbar nav a{
    font-size:15px !important;
    padding:10px 11px !important;
  }
}


/* QUALITY & SAFETY FACT BLOCK */
.safety-facts{
  padding-top:36px !important;
}
.safety-panel{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:24px;
  align-items:stretch;
  padding:34px;
  border-radius:34px;
  background:linear-gradient(135deg,rgba(2,12,7,.88),rgba(9,34,18,.76));
  border:1px solid rgba(255,226,122,.34);
  box-shadow:0 30px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.safety-copy h2{
  margin:0 0 16px;
  font-family:Georgia,serif;
  font-size:clamp(32px,4vw,54px);
  line-height:.98;
  letter-spacing:-.05em;
  color:#fffbe8;
  text-shadow:0 4px 18px rgba(0,0,0,.72);
}
.safety-copy p{
  margin:0;
  color:rgba(255,250,225,.92);
  line-height:1.7;
  font-size:17px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.safety-copy strong{
  color:#ffe27a;
}
.safety-fact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.safety-fact-grid article{
  padding:22px;
  border-radius:24px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.safety-fact-grid span{
  display:inline-grid;
  place-items:center;
  min-width:62px;
  height:42px;
  padding:0 12px;
  border-radius:999px;
  margin-bottom:14px;
  color:#071307;
  background:linear-gradient(135deg,#ffe27a,#d7a928);
  font-weight:1000;
  letter-spacing:.06em;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.safety-fact-grid h3{
  margin:0 0 8px;
  color:#fffbe8;
  font-size:22px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.safety-fact-grid p{
  margin:0;
  color:rgba(255,250,225,.85);
  line-height:1.55;
}
@media(max-width:900px){
  .safety-panel{
    grid-template-columns:1fr;
    padding:26px;
  }
}
@media(max-width:580px){
  .safety-fact-grid{
    grid-template-columns:1fr;
  }
}


/* ABOUT STORY BLOCK */
.about-story{
  padding-top:58px !important;
}
.about-panel{
  display:grid;
  grid-template-columns:.9fr 1.25fr;
  gap:30px;
  align-items:start;
  padding:40px;
  border-radius:34px;
  background:linear-gradient(135deg,rgba(2,12,7,.88),rgba(8,33,18,.76));
  border:1px solid rgba(255,226,122,.34);
  box-shadow:0 30px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.about-title h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(38px,5vw,66px);
  line-height:.94;
  letter-spacing:-.055em;
  color:#fffbe8;
  text-shadow:0 4px 18px rgba(0,0,0,.72);
}
.about-copy{
  padding:4px 0 0;
}
.about-copy .welcome{
  color:#ffe27a;
  font-weight:1000;
  font-size:20px;
  margin-top:0;
}
.about-copy p{
  color:rgba(255,250,225,.92);
  line-height:1.78;
  font-size:17px;
  margin:0 0 16px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.about-copy strong{
  color:#ffe27a;
}
@media(max-width:900px){
  .about-panel{
    grid-template-columns:1fr;
    padding:28px;
  }
}


/* FOOTER COLLABORATION BLOCK */
.collaboration-block{
  margin-top:20px;
  padding:18px;
  border-radius:24px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,226,122,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;
  gap:10px;
  width:min(420px,100%);
}
.collaboration-block span{
  color:#ffe27a;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.collaboration-block img{
  width:100% !important;
  max-width:360px !important;
  height:auto !important;
  max-height:125px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  margin:0 !important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)) !important;
}
@media(max-width:900px){
  .collaboration-block{
    width:100%;
  }
}


/* FINAL: center the <a class="agsa-link" href="https://artificialgrasssa.co.za/" target="_blank" rel="noopener">Artificial Grass SA</a> collaboration block in its footer box */
.collaboration-block{
  margin:24px auto 0 !important;
  text-align:center !important;
  justify-items:center !important;
  align-items:center !important;
  width:min(460px,100%) !important;
}
.collaboration-block span{
  text-align:center !important;
  width:100% !important;
  display:block !important;
}
.collaboration-block img{
  margin:0 auto !important;
  object-position:center center !important;
}


/* ABSOLUTE FINAL: center the collaboration block and logo inside its footer box */
.footer-brand-block .collaboration-block,
.collaboration-block{
  width:min(430px,100%) !important;
  margin:24px auto 0 auto !important;
  padding:20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  justify-items:center !important;
}
.footer-brand-block .collaboration-block span,
.collaboration-block span{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin:0 0 12px 0 !important;
}
.footer-brand-block .collaboration-block img,
.collaboration-block img{
  display:block !important;
  width:min(330px,92%) !important;
  max-width:330px !important;
  height:auto !important;
  max-height:150px !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  align-self:center !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
}


/* ABOUT HEDGING GUIDE - compact block layout */
.hedging-guide{
  padding-top:42px !important;
}
.hedging-guide-panel{
  padding:32px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(2,12,7,.86),rgba(8,31,17,.72));
  border:1px solid rgba(255,226,122,.28);
  box-shadow:0 26px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
}
.hedging-guide-head{
  max-width:820px;
  margin:0 auto 22px;
  text-align:center;
}
.hedging-guide-head h2{
  margin:0 0 12px;
  font-family:Georgia,serif;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1;
  letter-spacing:-.045em;
  color:#fffbe8;
  text-shadow:0 4px 18px rgba(0,0,0,.7);
}
.hedging-guide-head p{
  margin:0;
  color:rgba(255,250,225,.86);
  line-height:1.65;
  font-size:16px;
}
.hedging-guide-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.hedging-guide-grid article{
  padding:18px;
  min-height:205px;
  border-radius:22px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.hedging-guide-grid span{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:34px;
  margin-bottom:12px;
  border-radius:999px;
  background:linear-gradient(135deg,#ffe27a,#d5a728);
  color:#071307;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.08em;
}
.hedging-guide-grid h3{
  margin:0 0 8px;
  color:#fffbe8;
  font-size:19px;
  line-height:1.12;
  text-shadow:0 2px 10px rgba(0,0,0,.58);
}
.hedging-guide-grid p{
  margin:0;
  color:rgba(255,250,225,.82);
  font-size:14.5px;
  line-height:1.55;
}
@media(max-width:1180px){
  .hedging-guide-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .hedging-guide-panel{
    padding:24px;
  }
  .hedging-guide-grid{
    grid-template-columns:1fr;
  }
  .hedging-guide-grid article{
    min-height:auto;
  }
}


/* FINAL: top buttons ordered by section flow and kept fitting inside the header */
.topbar nav{
  justify-content:space-between !important;
  gap:4px !important;
}
.topbar nav a{
  font-size:clamp(15px,0.82vw,17px) !important;
  padding-left:9px !important;
  padding-right:9px !important;
  white-space:nowrap !important;
}
@media(max-width:1280px){
  .topbar nav{
    justify-content:center !important;
    flex-wrap:wrap !important;
  }
  .topbar nav a{
    font-size:16px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* FINAL: Artificial Grass SA links */
.agsa-link{
  color:#ffe27a !important;
  font-weight:1000 !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,226,122,.55) !important;
}
.agsa-link:hover{
  color:#fff6bd !important;
  border-bottom-color:#fff6bd !important;
}
.agsa-logo-link{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  line-height:0 !important;
}
.agsa-logo-link img{
  margin:0 auto !important;
}


/* FINAL: top-right WhatsApp quote button text black */
.topbar .whatsapp,
.topbar a.whatsapp,
a.whatsapp[href*="wa.me"]{
  color:#000000 !important;
  text-shadow:none !important;
}
.topbar .whatsapp *,
.topbar a.whatsapp *,
a.whatsapp[href*="wa.me"] *{
  color:#000000 !important;
  text-shadow:none !important;
}


/* FINAL FIX: make the 'WhatsApp for a free quote' line black everywhere */
a,
a *,
.quote-card,
.quote-card *,
.hero-card,
.hero-card *,
.contact-card,
.contact-card *,
.whatsapp-card,
.whatsapp-card *,
.whatsapp,
.whatsapp *,
[href*="wa.me"],
[href*="wa.me"] *,
[href*="whatsapp"],
[href*="whatsapp"] *{
  text-shadow:none;
}
.quote-card p,
.hero-card p,
.contact-card p,
.whatsapp-card p,
a.whatsapp p,
a.whatsapp span,
[href*="wa.me"] p,
[href*="wa.me"] span,
[href*="whatsapp"] p,
[href*="whatsapp"] span{
  color:#000000 !important;
  text-shadow:none !important;
}

/* Exact block shown on the right: phone number + WhatsApp for a free quote */
.hero a[href*="wa.me"],
.hero [href*="wa.me"],
.hero a[href*="whatsapp"],
.hero [href*="whatsapp"]{
  color:#000000 !important;
}
.hero a[href*="wa.me"] *,
.hero [href*="wa.me"] *,
.hero a[href*="whatsapp"] *,
.hero [href*="whatsapp"] *{
  color:#000000 !important;
  text-shadow:none !important;
}




/* Project gallery patched with uploaded images */
.projects .project-slide{
  background:#071307 !important;
}
.projects .project-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#071307 !important;
}



/* Desktop all-changes patch */
.projects .carousel-window{
  position:relative!important;
  overflow:hidden!important;
  border-radius:32px!important;
}

.projects .project-track{
  display:flex!important;
  gap:18px!important;
  transition:transform .45s ease!important;
}

.projects .project-slide{
  min-width:calc(33.333% - 12px)!important;
  height:560px!important;
  background:#071307!important;
}

.projects .project-slide img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#071307!important;
}

.review-stars-desktop{
  color:#f0cf5b!important;
  font-size:23px!important;
  letter-spacing:2px!important;
  line-height:1!important;
  margin-bottom:14px!important;
  font-weight:1000!important;
  text-shadow:0 2px 12px rgba(240,207,91,.22)!important;
}

.reviews .review-grid article p{
  margin:0 0 14px!important;
  line-height:1.6!important;
}

.trade-price-info-desktop{
  margin-top:20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
}

.trade-info-pill-desktop{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(240,207,91,.45)!important;
  background:rgba(3,20,11,.86)!important;
  color:#fff8df!important;
  font-weight:900!important;
  font-size:14px!important;
  cursor:pointer!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12)!important;
}

.trade-info-icon-desktop{
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f0cf5b!important;
  color:#061207!important;
  font-weight:1000!important;
  font-family:Georgia,serif!important;
}

.trade-info-box-desktop{
  max-width:470px!important;
  padding:16px!important;
  border-radius:18px!important;
  border:1px solid rgba(240,207,91,.32)!important;
  background:rgba(3,20,11,.94)!important;
  color:#fff8df!important;
  box-shadow:0 16px 38px rgba(0,0,0,.32)!important;
}

.trade-info-box-desktop strong{
  display:block!important;
  font-size:15px!important;
  margin-bottom:6px!important;
}

.trade-info-box-desktop p{
  margin:0 0 12px!important;
  color:rgba(255,248,223,.78)!important;
  font-size:14px!important;
  line-height:1.45!important;
}

.trade-info-cta-desktop{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#f0cf5b,#ffe78a)!important;
  color:#061207!important;
  text-decoration:none!important;
  font-weight:1000!important;
  font-size:14px!important;
}

@media(max-width:900px){
  .projects .project-slide{
    min-width:82%!important;
    height:520px!important;
  }
}



/* Review layout fix: center the bottom row and align content cleanly */
.reviews .review-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:24px !important;
}

.reviews .review-grid article{
  flex:0 1 340px !important;
  max-width:380px !important;
  min-width:280px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  min-height:100% !important;
  text-align:left !important;
}

.reviews .review-grid article p{
  flex:1 1 auto !important;
  width:100% !important;
}

.reviews .review-grid article b{
  display:block !important;
  width:100% !important;
  margin-top:auto !important;
  padding-top:12px !important;
  text-align:left !important;
}

.reviews .section-head{
  text-align:center !important;
}

@media (max-width: 900px){
  .reviews .review-grid article{
    flex:1 1 100% !important;
    max-width:100% !important;
  }
}



/* Final desktop styling aligned with the current mobile website. */

html,
body{
  min-height:100%!important;
  background:#061207!important;
}

body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-2!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.48),rgba(3,20,11,.76) 42%,rgba(3,20,11,.90)),
    url("assets/images/7a1c8b130548b7c0.webp") center center / cover no-repeat!important;
}

main,
.page-shell,
.site-shell{
  background:transparent!important;
}

/* Softer cream contact and WhatsApp buttons. */
a[href*="wa.me"],
a[href*="whatsapp"],
.whatsapp,
.whatsapp-btn,
.whatsapp-button,
.cta,
.cta-button,
.quote-btn,
.trade-info-cta-desktop{
  background:linear-gradient(135deg,#fff7e7 0%,#f8ead0 52%,#edd8ad 100%)!important;
  color:#3b321f!important;
  border:1px solid rgba(217,192,141,.72)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78)!important;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover,
.whatsapp:hover,
.whatsapp-btn:hover,
.whatsapp-button:hover,
.cta:hover,
.cta-button:hover,
.quote-btn:hover,
.trade-info-cta-desktop:hover{
  background:linear-gradient(135deg,#fff9ed 0%,#f6ead3 54%,#e7d2a6 100%)!important;
  color:#2f2818!important;
}

/* Maintain clean centered desktop review layout. */
.reviews .review-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:24px!important;
}

.reviews .review-grid article{
  flex:0 1 340px!important;
  max-width:380px!important;
  min-width:280px!important;
  display:flex!important;
  flex-direction:column!important;
}

.reviews .review-grid article p{
  flex:1 1 auto!important;
}

.reviews .review-grid article b{
  margin-top:auto!important;
  padding-top:12px!important;
}

/* Keep desktop navigation permanently visible. */
header,
.site-header,
.topbar{
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}



/* Desktop-only large HedgeScape background photograph.
   The mobile website is untouched. */

html,
body{
  min-height:100%!important;
  background:#061207!important;
}

/* Disable the weaker external-image fallback from the previous version. */
body::before{
  display:none!important;
}

/* Use the large embedded hedging photograph as the fixed full-screen backdrop. */
.bg{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  background:
    linear-gradient(
      90deg,
      rgba(1,10,5,.58) 0%,
      rgba(2,20,9,.18) 42%,
      rgba(1,10,5,.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,.48) 100%
    ),
    url("assets/images/7a1c8b130548b7c0.webp") center 44% / cover no-repeat!important;
  filter:saturate(1.08) contrast(1.03)!important;
  pointer-events:none!important;
}

/* Keep the decorative glow light so the hedge photo stays visible. */
.grain{
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(124,255,55,.10),transparent 28rem),
    radial-gradient(circle at 84% 22%,rgba(231,196,92,.08),transparent 25rem)!important;
  pointer-events:none!important;
}

/* Put the actual website above the fixed photograph. */
.topbar,
main,
.site-footer,
.review-popup,
.sticky-whatsapp{
  position:relative!important;
  z-index:2!important;
}

/* Let the photograph show between and behind the sections. */
main,
.hero,
.section,
.facts-line{
  background:transparent!important;
}

/* Preserve readability with translucent glass panels instead of solid blocks. */
.hero-panel,
.glass,
.why-grid article,
.category-grid article,
.process-grid article,
.review-grid article,
.product-card,
.trade-price-info-desktop,
.projects .carousel-window{
  background:linear-gradient(
    135deg,
    rgba(3,25,13,.84),
    rgba(6,44,21,.66)
  )!important;
  backdrop-filter:blur(11px)!important;
  -webkit-backdrop-filter:blur(11px)!important;
}

/* Ensure the first screen shows a large, attractive area of the hedge photograph. */
.hero{
  min-height:calc(100vh - 40px)!important;
}



/* Keep the entire "Ready to quote?" section its normal dark-green colour.
   It must not inherit the cream button hover styling from .cta:hover. */
#contact,
#contact:hover,
#contact:focus,
#contact:focus-within{
  background:linear-gradient(
    135deg,
    rgba(3,25,13,.84),
    rgba(6,44,21,.66)
  )!important;
  border-color:rgba(255,255,255,.12)!important;
  color:inherit!important;
  transform:none!important;
  filter:none!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
}

/* Only the actual buttons inside the section may change on hover. */
#contact .btn:hover,
#contact a[href*="wa.me"]:hover,
#contact a[href*="whatsapp"]:hover{
  background:linear-gradient(
    135deg,
    #fff9ed 0%,
    #f6ead3 54%,
    #e7d2a6 100%
  )!important;
  color:#2f2818!important;
}



/* Keep rotating review popup fixed at the bottom-right of the viewport. */
.review-popup,
#reviewPopup{
  position:fixed!important;
  right:24px!important;
  bottom:24px!important;
  left:auto!important;
  top:auto!important;
  width:min(360px,calc(100vw - 48px))!important;
  z-index:2147482000!important;
  pointer-events:auto!important;
  margin:0!important;
}

.review-popup.show,
#reviewPopup.show{
  transform:translateY(0)!important;
  opacity:1!important;
}

/* Keep the sticky WhatsApp button fixed and clickable at bottom-left. */
.sticky-whatsapp{
  position:fixed!important;
  left:22px!important;
  right:auto!important;
  bottom:22px!important;
  top:auto!important;
  z-index:2147481900!important;
  pointer-events:auto!important;
}

/* Ensure every WhatsApp link can receive clicks above decorative layers. */
a[href*="wa.me"]{
  position:relative!important;
  z-index:5!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}

/* Prevent background/decorative layers from blocking links. */
.bg,
.grain,
body::before{
  pointer-events:none!important;
}

@media(max-width:700px){
  .review-popup,
  #reviewPopup{
    right:14px!important;
    bottom:84px!important;
    width:calc(100vw - 28px)!important;
  }

  .sticky-whatsapp{
    left:14px!important;
    bottom:14px!important;
  }
}



/* Show six FAQs on desktop until expanded. */
#faq .desktop-faq-extra{
  display:none!important;
}

#faq.desktop-faq-expanded .desktop-faq-extra{
  display:block!important;
  animation:desktopFaqReveal .24s ease!important;
}

.desktop-faq-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:190px!important;
  min-height:46px!important;
  margin:20px auto 0!important;
  padding:0 20px!important;
  border-radius:999px!important;
  border:1px solid rgba(217,192,141,.72)!important;
  background:linear-gradient(
    135deg,
    #fff7e7 0%,
    #f8ead0 54%,
    #edd8ad 100%
  )!important;
  color:#3b321f!important;
  font-size:14px!important;
  font-weight:1000!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-shadow:0 10px 22px rgba(0,0,0,.24),
             inset 0 1px 0 rgba(255,255,255,.78)!important;
}

.desktop-faq-toggle:hover{
  background:linear-gradient(
    135deg,
    #fff9ed 0%,
    #f6ead3 54%,
    #e7d2a6 100%
  )!important;
}

.desktop-faq-toggle:active{
  transform:scale(.98)!important;
}

@keyframes desktopFaqReveal{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* Permanent desktop WhatsApp button at the bottom-left. */
.constant-desktop-whatsapp{
  position:fixed!important;
  left:22px!important;
  bottom:22px!important;
  top:auto!important;
  right:auto!important;
  z-index:2147483000!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:54px!important;
  padding:0 18px 0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(217,192,141,.78)!important;
  background:linear-gradient(
    135deg,
    #fff7e7 0%,
    #f8ead0 54%,
    #edd8ad 100%
  )!important;
  color:#3b321f!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.82)!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease!important;
}

.constant-desktop-whatsapp:hover{
  transform:translateY(-3px)!important;
  filter:brightness(1.02)!important;
  color:#2f2818!important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.constant-desktop-whatsapp:active{
  transform:translateY(0) scale(.97)!important;
}

.constant-whatsapp-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#214f2b!important;
}

.constant-whatsapp-icon svg{
  width:23px!important;
  height:23px!important;
  display:block!important;
  fill:#fff7e7!important;
}

.constant-whatsapp-label{
  white-space:nowrap!important;
}

/* Decorative layers must never block the button. */
.bg,
.grain,
body::before{
  pointer-events:none!important;
}

@media(max-width:760px){
  .constant-desktop-whatsapp{
    left:14px!important;
    bottom:14px!important;
  }
}



/* Plain-text product quote links */
#products .product-card a{
  display:inline!important;
  align-self:flex-start!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin-top:12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.4!important;
  text-decoration:none!important;
  text-transform:none!important;
}

#products .product-card a:hover,
#products .product-card a:focus{
  background:none!important;
  color:#ffffff!important;
  box-shadow:none!important;
  transform:none!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

#products .product-card a:active{
  transform:none!important;
}

/* Small plain-white Show more / Show less control on desktop */
#desktopFaqToggle{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:16px auto 0!important;
  padding:2px 4px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.4!important;
  text-align:center!important;
  text-decoration:none!important;
}

#desktopFaqToggle:hover,
#desktopFaqToggle:focus{
  background:none!important;
  color:#ffffff!important;
  box-shadow:none!important;
  transform:none!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

#desktopFaqToggle:active{
  transform:none!important;
}



/* Desktop header behaviour matching the mobile website:
   full header at the top, compact hamburger after scrolling. */
:root{
  --desktop-header-space:138px;
}

html{
  scroll-padding-top:26px!important;
}

body{
  padding-top:var(--desktop-header-space)!important;
}

main,
section,
[id]{
  scroll-margin-top:26px!important;
}

/* Full navigation shown at the top of the page. */
.topbar{
  position:fixed!important;
  top:12px!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(1180px,calc(100% - 28px))!important;
  margin:0!important;
  transform:translateX(-50%) translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:2147482500!important;
  isolation:isolate!important;
  background:rgba(3,20,12,.92)!important;
  border:1px solid rgba(232,204,124,.42)!important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.12)!important;
  transition:
    transform .34s cubic-bezier(.22,.8,.25,1),
    opacity .22s ease,
    visibility 0s linear 0s!important;
  will-change:transform,opacity!important;
}

body.desktop-header-collapsed .topbar{
  transform:translateX(-50%) translateY(calc(-100% - 28px))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    transform .34s cubic-bezier(.22,.8,.25,1),
    opacity .22s ease,
    visibility 0s linear .34s!important;
}

/* Three-line floating menu, visible only after scrolling. */
.desktop-scroll-nav-toggle{
  position:fixed!important;
  top:18px!important;
  right:22px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:2147483000!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-10px) scale(.94)!important;
  transition:
    opacity .22s ease,
    transform .25s ease,
    visibility 0s linear .25s!important;
}

body.desktop-header-collapsed .desktop-scroll-nav-toggle,
.desktop-scroll-nav-toggle.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  transition-delay:0s!important;
}

.desktop-scroll-nav-button{
  width:52px!important;
  height:52px!important;
  padding:0!important;
  border-radius:17px!important;
  border:1px solid rgba(248,234,208,.58)!important;
  background:rgba(3,20,11,.90)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

.desktop-scroll-nav-button span{
  display:block!important;
  width:24px!important;
  height:3px!important;
  border-radius:999px!important;
  background:#f8ead0!important;
  transition:transform .2s ease,opacity .18s ease!important;
}

.desktop-scroll-nav-toggle.open .desktop-scroll-nav-button span:nth-child(1){
  transform:translateY(8px) rotate(45deg)!important;
}
.desktop-scroll-nav-toggle.open .desktop-scroll-nav-button span:nth-child(2){
  opacity:0!important;
}
.desktop-scroll-nav-toggle.open .desktop-scroll-nav-button span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg)!important;
}

.desktop-scroll-nav-panel{
  position:absolute!important;
  top:62px!important;
  right:0!important;
  width:250px!important;
  max-height:calc(100vh - 96px)!important;
  overflow-y:auto!important;
  display:none!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  padding:12px!important;
  border-radius:22px!important;
  border:1px solid rgba(248,234,208,.38)!important;
  background:rgba(3,20,11,.96)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.55)!important;
  overscroll-behavior:contain!important;
}

.desktop-scroll-nav-toggle.open .desktop-scroll-nav-panel{
  display:grid!important;
}

.desktop-scroll-nav-panel a{
  display:flex!important;
  min-height:42px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(248,234,208,.28)!important;
  background:rgba(255,247,231,.055)!important;
  color:#fff7e7!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:900!important;
  transition:background .18s ease,border-color .18s ease!important;
}

.desktop-scroll-nav-panel a:hover,
.desktop-scroll-nav-panel a:focus{
  background:rgba(248,234,208,.16)!important;
  border-color:rgba(248,234,208,.58)!important;
}

/* Keep it practical on narrower desktop windows. */
@media(max-width:1280px){
  :root{
    --desktop-header-space:205px;
  }

  .topbar{
    max-height:calc(100vh - 24px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
}

@media(max-width:700px){
  .desktop-scroll-nav-toggle{
    top:12px!important;
    right:12px!important;
  }

  .desktop-scroll-nav-panel{
    width:min(250px,calc(100vw - 24px))!important;
  }
}



/* Wider, non-overlapping full navigation at the top.
   The existing scroll hamburger behaviour is intentionally unchanged. */
.topbar{
  width:min(1560px,calc(100% - 20px))!important;
  max-width:none!important;
  min-height:84px!important;
  padding:12px 18px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:10px!important;
  overflow:visible!important;
  max-height:none!important;
}

.topbar > .logo{
  grid-column:1!important;
  min-width:0!important;
  flex:none!important;
  margin:0!important;
}

.topbar > .logo img{
  width:220px!important;
  max-width:220px!important;
  height:auto!important;
}

.topbar > nav{
  grid-column:2!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:2px!important;
  overflow:visible!important;
}

.topbar > nav a{
  flex:0 1 auto!important;
  min-width:0!important;
  padding:9px 8px!important;
  font-size:13px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

.topbar > .top-socials{
  grid-column:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  margin:0!important;
  min-width:max-content!important;
}

.topbar > .top-socials .social-icon{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
}

.topbar > .whatsapp{
  grid-column:4!important;
  margin:0!important;
  min-width:max-content!important;
  padding:12px 14px!important;
  font-size:13px!important;
  white-space:nowrap!important;
}

/* Give the links a dedicated second row before they ever become cramped. */
@media(max-width:1380px){
  .topbar{
    width:calc(100% - 20px)!important;
    grid-template-columns:auto 1fr auto!important;
    grid-template-rows:auto auto!important;
    padding:12px 16px 14px!important;
    overflow:visible!important;
    max-height:none!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }

  .topbar > .whatsapp{
    grid-column:3!important;
    grid-row:1!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:4px 6px!important;
  }

  .topbar > nav a{
    padding:8px 10px!important;
    font-size:13px!important;
  }
}

@media(max-width:900px){
  .topbar > .logo img{
    width:190px!important;
    max-width:190px!important;
  }

  .topbar > nav a{
    padding:7px 8px!important;
    font-size:12.5px!important;
  }

  .topbar > .whatsapp{
    padding:10px 12px!important;
    font-size:12.5px!important;
  }
}



/* Final large, balanced desktop header.
   The full header remains at the top; the existing hamburger remains on scroll. */
.topbar{
  width:min(1640px,calc(100% - 24px))!important;
  max-width:none!important;
  min-height:104px!important;
  padding:14px 22px!important;
  display:grid!important;
  grid-template-columns:minmax(280px,330px) minmax(0,1fr) auto auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:12px!important;
  overflow:visible!important;
  max-height:none!important;
  border-radius:30px!important;
}

.topbar > .logo{
  grid-column:1!important;
  min-width:0!important;
  width:100%!important;
  height:auto!important;
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  overflow:visible!important;
}

.topbar > .logo img{
  width:320px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:86px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.68))!important;
}

.topbar > nav{
  grid-column:2!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  overflow:visible!important;
}

.topbar > nav a{
  flex:0 1 auto!important;
  min-width:0!important;
  padding:11px 10px!important;
  border-radius:999px!important;
  color:rgba(255,250,225,.94)!important;
  font-size:clamp(14px,.88vw,16.5px)!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
  text-shadow:0 2px 10px rgba(0,0,0,.58)!important;
}

.topbar > nav a:hover,
.topbar > nav a:focus{
  background:rgba(255,255,255,.09)!important;
  color:#ffffff!important;
}

.topbar > .top-socials{
  grid-column:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-width:max-content!important;
  margin:0!important;
}

.topbar > .top-socials .social-icon,
.topbar > .top-socials a{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
}

.topbar > .top-socials .social-icon svg{
  width:30px!important;
  height:30px!important;
}

.topbar > .whatsapp{
  grid-column:4!important;
  min-width:max-content!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 18px!important;
  font-size:15px!important;
  font-weight:1000!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Give the navigation a clean full-width second row before it can overlap. */
@media(max-width:1490px){
  .topbar{
    width:calc(100% - 24px)!important;
    grid-template-columns:minmax(300px,1fr) auto auto!important;
    grid-template-rows:auto auto!important;
    padding:14px 20px 16px!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
  }

  .topbar > .logo img{
    width:340px!important;
    max-width:min(340px,100%)!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:3!important;
    grid-row:1!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:5px 8px!important;
    padding-top:4px!important;
    border-top:1px solid rgba(248,234,208,.16)!important;
  }

  .topbar > nav a{
    padding:10px 13px!important;
    font-size:16px!important;
  }
}

@media(max-width:1080px){
  .topbar{
    grid-template-columns:minmax(240px,1fr) auto auto!important;
    column-gap:12px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .topbar > .logo img{
    width:300px!important;
    max-width:min(300px,100%)!important;
  }

  .topbar > nav{
    gap:4px 5px!important;
  }

  .topbar > nav a{
    padding:9px 10px!important;
    font-size:15px!important;
  }

  .topbar > .top-socials .social-icon,
  .topbar > .top-socials a{
    width:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }

  .topbar > .whatsapp{
    min-height:44px!important;
    padding:0 15px!important;
    font-size:14px!important;
  }
}

@media(max-width:820px){
  .topbar{
    grid-template-columns:1fr auto!important;
    grid-template-rows:auto auto auto!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
  }

  .topbar > .logo img{
    width:280px!important;
    max-width:min(280px,100%)!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-self:center!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:3!important;
  }
}



/* Match the supplied desktop-header reference:
   one broad horizontal bar with a prominent logo and slightly larger text.
   Existing scroll-down hamburger behaviour remains unchanged. */

.topbar{
  width:min(1500px,calc(100% - 64px))!important;
  max-width:none!important;
  min-height:128px!important;
  padding:16px 18px 16px 26px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,390px) minmax(0,1fr) auto auto!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  column-gap:14px!important;
  row-gap:0!important;
  border-radius:25px!important;
  overflow:visible!important;
  max-height:none!important;
}

.topbar > .logo{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  min-height:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  overflow:visible!important;
}

.topbar > .logo img{
  width:380px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.68))!important;
}

.topbar > nav{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-evenly!important;
  flex-wrap:nowrap!important;
  gap:2px!important;
  overflow:visible!important;
  border:0!important;
}

.topbar > nav a{
  flex:0 1 auto!important;
  min-width:0!important;
  padding:11px 8px!important;
  border-radius:999px!important;
  color:#fff8e8!important;
  font-size:17px!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:.002em!important;
  white-space:nowrap!important;
  text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
}

.topbar > nav a[href="#reviews"]::after{
  font-size:12px!important;
  margin-left:2px!important;
}

.topbar > .top-socials{
  grid-column:3!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-width:max-content!important;
  margin:0!important;
}

.topbar > .top-socials .social-icon,
.topbar > .top-socials a{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
}

.topbar > .top-socials .social-icon svg{
  width:34px!important;
  height:34px!important;
}

.topbar > .whatsapp{
  grid-column:4!important;
  grid-row:1!important;
  min-width:max-content!important;
  min-height:50px!important;
  margin:0!important;
  padding:0 20px!important;
  font-size:16px!important;
  font-weight:1000!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Keep the same single-row appearance on standard laptop widths,
   while gently scaling before anything can collide. */
@media(max-width:1500px){
  .topbar{
    width:calc(100% - 28px)!important;
    grid-template-columns:minmax(300px,340px) minmax(0,1fr) auto auto!important;
    column-gap:10px!important;
    padding-left:18px!important;
    padding-right:16px!important;
  }

  .topbar > .logo img{
    width:330px!important;
  }

  .topbar > nav a{
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:15.5px!important;
  }

  .topbar > .top-socials .social-icon,
  .topbar > .top-socials a{
    width:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }

  .topbar > .whatsapp{
    min-height:46px!important;
    padding:0 16px!important;
    font-size:14.5px!important;
  }
}

/* Only use two rows when the browser is too narrow for a clean one-row bar. */
@media(max-width:1180px){
  .topbar{
    min-height:0!important;
    grid-template-columns:minmax(280px,1fr) auto auto!important;
    grid-template-rows:auto auto!important;
    row-gap:10px!important;
    padding:13px 16px 15px!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
    min-height:76px!important;
  }

  .topbar > .logo img{
    width:320px!important;
    max-width:min(320px,100%)!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:3!important;
    grid-row:1!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:4px 8px!important;
    padding-top:7px!important;
    border-top:1px solid rgba(248,234,208,.16)!important;
  }

  .topbar > nav a{
    padding:8px 10px!important;
    font-size:15px!important;
  }
}

@media(max-width:820px){
  .topbar{
    grid-template-columns:1fr auto!important;
    grid-template-rows:auto auto auto!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-self:center!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:3!important;
  }
}



/* Slimmer desktop navigation bubble with the logo intentionally extending
   beyond the bar, matching the supplied reference. Scroll hamburger unchanged. */
:root{
  --desktop-header-space:145px;
}

.topbar{
  width:min(1500px,calc(100% - 64px))!important;
  max-width:none!important;
  min-height:88px!important;
  height:88px!important;
  padding:8px 16px 8px 20px!important;
  display:grid!important;
  grid-template-columns:minmax(370px,400px) minmax(0,1fr) auto auto!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  column-gap:13px!important;
  row-gap:0!important;
  border-radius:24px!important;
  overflow:visible!important;
  max-height:none!important;
}

.topbar > .logo{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  overflow:visible!important;
  z-index:4!important;
}

.topbar > .logo img{
  position:relative!important;
  width:395px!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  transform:translateY(14px)!important;
  transform-origin:left center!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.72))!important;
  z-index:5!important;
}

.topbar > nav{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-evenly!important;
  flex-wrap:nowrap!important;
  gap:2px!important;
  overflow:visible!important;
  border:0!important;
}

.topbar > nav a{
  flex:0 1 auto!important;
  min-width:0!important;
  padding:10px 8px!important;
  border-radius:999px!important;
  color:#fff8e8!important;
  font-size:17px!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:.002em!important;
  white-space:nowrap!important;
  text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
}

.topbar > nav a[href="#reviews"]::after{
  font-size:12px!important;
  margin-left:2px!important;
}

.topbar > .top-socials{
  grid-column:3!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-width:max-content!important;
  margin:0!important;
}

.topbar > .top-socials .social-icon,
.topbar > .top-socials a{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
}

.topbar > .top-socials .social-icon svg{
  width:33px!important;
  height:33px!important;
}

.topbar > .whatsapp{
  grid-column:4!important;
  grid-row:1!important;
  min-width:max-content!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 19px!important;
  font-size:15.5px!important;
  font-weight:1000!important;
  line-height:1!important;
  white-space:nowrap!important;
}

@media(max-width:1500px){
  .topbar{
    width:calc(100% - 28px)!important;
    grid-template-columns:minmax(310px,340px) minmax(0,1fr) auto auto!important;
    column-gap:9px!important;
    padding-left:16px!important;
    padding-right:14px!important;
  }

  .topbar > .logo img{
    width:340px!important;
    transform:translateY(13px)!important;
  }

  .topbar > nav a{
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:15.5px!important;
  }

  .topbar > .top-socials .social-icon,
  .topbar > .top-socials a{
    width:41px!important;
    height:41px!important;
    flex-basis:41px!important;
  }

  .topbar > .whatsapp{
    min-height:45px!important;
    padding:0 15px!important;
    font-size:14.5px!important;
  }
}

/* Only move links to a second row when a smaller desktop cannot hold them safely. */
@media(max-width:1180px){
  :root{
    --desktop-header-space:185px;
  }

  .topbar{
    height:auto!important;
    min-height:112px!important;
    grid-template-columns:minmax(290px,1fr) auto auto!important;
    grid-template-rows:70px auto!important;
    row-gap:5px!important;
    padding:7px 15px 12px!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
    height:62px!important;
    min-height:62px!important;
  }

  .topbar > .logo img{
    width:325px!important;
    max-width:none!important;
    transform:translateY(11px)!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:3!important;
    grid-row:1!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:3px 7px!important;
    padding-top:6px!important;
    border-top:1px solid rgba(248,234,208,.16)!important;
  }

  .topbar > nav a{
    padding:7px 9px!important;
    font-size:15px!important;
  }
}

@media(max-width:820px){
  :root{
    --desktop-header-space:220px;
  }

  .topbar{
    grid-template-columns:1fr auto!important;
    grid-template-rows:70px auto auto!important;
  }

  .topbar > .logo{
    grid-column:1!important;
    grid-row:1!important;
  }

  .topbar > .logo img{
    width:285px!important;
  }

  .topbar > .top-socials{
    grid-column:2!important;
    grid-row:1!important;
  }

  .topbar > .whatsapp{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-self:center!important;
  }

  .topbar > nav{
    grid-column:1 / -1!important;
    grid-row:3!important;
  }
}



/* Lower the logo artwork so the HedgeScape wordmark sits through the
   vertical centre of the slim navigation bar while the foliage still overlaps. */
.topbar > .logo img{
  transform:translateY(27px)!important;
}
@media(max-width:1500px){
  .topbar > .logo img{
    transform:translateY(25px)!important;
  }
}
@media(max-width:1180px){
  .topbar > .logo img{
    transform:translateY(22px)!important;
  }
}
@media(max-width:820px){
  .topbar > .logo img{
    transform:translateY(20px)!important;
  }
}



/* Final position adjustment requested: lower the full header slightly and
   move the scroll hamburger a few pixels further left. */
:root{
  --desktop-header-space:155px;
}
.topbar{
  top:22px!important;
}
.desktop-scroll-nav-toggle{
  right:30px!important;
}
@media(max-width:700px){
  .desktop-scroll-nav-toggle{
    right:20px!important;
  }
}



/* Final measured alignment:
   - lower the complete navigation bubble
   - independently lower the logo so the HedgeScape wordmark is centred
   - shift the collapsed hamburger farther left */
:root{
  --desktop-header-space:172px;
}

.topbar{
  top:36px!important;
}

/* The transparent logo artwork is much taller than its wordmark.
   This offset centres the green HedgeScape text inside the 88px bar,
   while deliberately allowing the foliage to extend outside it. */
.topbar > .logo img{
  transform:translateY(42px)!important;
}

.desktop-scroll-nav-toggle{
  right:50px!important;
}

@media(max-width:1500px){
  .topbar > .logo img{
    transform:translateY(40px)!important;
  }
}

@media(max-width:1180px){
  .topbar{
    top:30px!important;
  }
  .topbar > .logo img{
    transform:translateY(36px)!important;
  }
  .desktop-scroll-nav-toggle{
    right:42px!important;
  }
}

@media(max-width:820px){
  .topbar > .logo img{
    transform:translateY(32px)!important;
  }
}

@media(max-width:700px){
  .desktop-scroll-nav-toggle{
    right:30px!important;
  }
}


/* =========================================================
   MULTI-PAGE DESKTOP BUILD — 2026-07-21
   ========================================================= */
body.desktop-page{min-height:100vh}
body.desktop-page .topbar nav a[aria-current="page"],
body.desktop-page .desktop-scroll-nav-panel a[aria-current="page"]{
  color:#071307!important;
  background:linear-gradient(135deg,#ffe27a,#e5b947)!important;
  box-shadow:0 8px 22px rgba(231,196,92,.22);
}
body.desktop-page .topbar nav a[href="reviews.html"]::after{content:none!important}
.subpage-main{min-height:72vh;padding-top:22px;padding-bottom:42px}
.subpage-main>.section:first-child,
.subpage-main>.cta:first-child{padding-top:72px}
.page-home main{padding-bottom:48px}
.page-directory{padding:62px 0 84px}
.page-directory .section-head{max-width:760px}
.page-directory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.page-directory-card{position:relative;min-height:190px;padding:26px;border-radius:26px;background:linear-gradient(145deg,rgba(5,37,20,.88),rgba(0,0,0,.32));border:1px solid rgba(232,204,124,.24);box-shadow:0 20px 55px rgba(0,0,0,.24);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.page-directory-card:hover{transform:translateY(-6px);border-color:rgba(232,204,124,.56);background:linear-gradient(145deg,rgba(9,55,29,.92),rgba(0,0,0,.30))}
.page-directory-card span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:rgba(231,196,92,.14);border:1px solid rgba(231,196,92,.3);color:var(--gold);font-weight:900}
.page-directory-card h3{font-family:Georgia,serif;font-size:27px;margin:26px 0 8px}
.page-directory-card p{margin:0;color:var(--muted);line-height:1.55}
.page-directory-card::after{content:"→";position:absolute;right:22px;top:22px;color:var(--gold);font-size:22px}
.site-footer a[href$=".html"]:hover{color:var(--gold)}

/* Centre-focus, click-to-cycle project gallery. No automatic cycling. */
.page-projects .projects{padding-bottom:96px}
.page-projects .projects .section-head{max-width:880px;margin-bottom:30px}
.gallery-instruction{max-width:760px;color:var(--muted);font-size:17px;line-height:1.65;margin:8px 0 0}
.page-projects .carousel-window{
  position:relative!important;
  overflow:hidden!important;
  min-height:680px!important;
  border-radius:34px!important;
  background:radial-gradient(circle at 50% 44%,rgba(124,255,55,.10),transparent 34rem),rgba(0,0,0,.18)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.35)!important;
  perspective:1400px;
}
.page-projects .project-track{
  position:relative!important;
  display:block!important;
  height:680px!important;
  transform:none!important;
  transition:none!important;
  gap:0!important;
}
.page-projects .project-slide,
.page-projects .project-slide.single-project-slide,
.page-projects .project-slide.no-before-after-line,
.page-projects .project-slide.carousel-before-after,
.page-projects .project-slide.full-before-after{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(55vw,610px)!important;
  min-width:0!important;
  height:590px!important;
  margin:0!important;
  border-radius:30px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) scale(.58)!important;
  transition:transform .58s cubic-bezier(.2,.78,.2,1),opacity .42s ease,filter .42s ease!important;
  border:1px solid rgba(232,204,124,.26)!important;
  background:linear-gradient(135deg,#071b10,#112f1d)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.36)!important;
  cursor:pointer!important;
}
.page-projects .project-slide img,
.page-projects .project-slide.single-project-slide img,
.page-projects .project-slide.no-before-after-line img,
.page-projects .project-slide.carousel-before-after img,
.page-projects .project-slide.full-before-after img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:0!important;
  background:linear-gradient(135deg,#07150d,#10291a)!important;
}
.page-projects .project-slide.is-active{
  opacity:1!important;
  z-index:4!important;
  pointer-events:auto!important;
  transform:translate(-50%,-50%) scale(1)!important;
  filter:none!important;
  border-color:rgba(232,204,124,.62)!important;
  box-shadow:0 34px 95px rgba(0,0,0,.56),0 0 0 1px rgba(231,196,92,.12)!important;
}
.page-projects .project-slide.is-prev{
  opacity:.72!important;
  z-index:2!important;
  pointer-events:auto!important;
  transform:translate(-132%,-50%) scale(.70) rotateY(9deg)!important;
  filter:saturate(.76) brightness(.72)!important;
}
.page-projects .project-slide.is-next{
  opacity:.72!important;
  z-index:2!important;
  pointer-events:auto!important;
  transform:translate(32%,-50%) scale(.70) rotateY(-9deg)!important;
  filter:saturate(.76) brightness(.72)!important;
}
.page-projects .project-slide.is-prev:hover,
.page-projects .project-slide.is-next:hover{opacity:.92!important;filter:saturate(.95) brightness(.86)!important}
.page-projects .project-slide::after,
.page-projects .project-slide>div{display:none!important}
.page-projects .carousel-arrow{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:58px!important;
  height:58px!important;
  border-radius:999px!important;
  z-index:12!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.25)!important;
  background:rgba(3,22,12,.82)!important;
  color:#fff!important;
  font-size:38px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 15px 42px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(14px)!important;
  transition:transform .2s ease,background .2s ease,border-color .2s ease!important;
}
.page-projects .carousel-arrow:hover{transform:translateY(-50%) scale(1.08)!important;background:var(--gold)!important;color:#071307!important;border-color:var(--gold)!important}
.page-projects .carousel-arrow-left{left:22px!important}
.page-projects .carousel-arrow-right{right:22px!important}
.gallery-counter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:14;padding:9px 15px;border-radius:999px;background:rgba(3,20,12,.82);border:1px solid rgba(232,204,124,.25);color:var(--gold);font-weight:900;letter-spacing:.08em;font-size:12px;backdrop-filter:blur(12px)}

/* Full, corrected reviews. */
.page-reviews .review-grid{grid-template-columns:repeat(2,1fr)!important;gap:20px!important}
.page-reviews .review-grid article{display:flex!important;flex-direction:column!important;min-height:100%;padding:30px!important}
.page-reviews .review-grid article p{font-size:17px!important;line-height:1.72!important;flex:1}
.page-reviews .review-grid article b{font-size:15px!important;line-height:1.45!important}
.review-stars-desktop{letter-spacing:.13em}

/* Categorised FAQ directory with five initial answers. */
.page-faq .faq .section-head{max-width:900px}
.faq-category-list{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 28px;padding:10px;border-radius:22px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.faq-filter{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:12px 17px;font-weight:900;cursor:pointer;transition:.22s ease}
.faq-filter:hover{border-color:rgba(232,204,124,.46);background:rgba(231,196,92,.10)}
.faq-filter.active{background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307;border-color:transparent;box-shadow:0 10px 28px rgba(231,196,92,.18)}
.page-faq .faq-list{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.page-faq .faq-list details{display:block;margin:0!important;padding:0!important;overflow:hidden;background:linear-gradient(135deg,rgba(5,33,19,.78),rgba(0,0,0,.26))!important}
.page-faq .faq-list details[hidden]{display:none!important}
.page-faq .faq-list summary{padding:22px 58px 22px 24px!important;position:relative;list-style:none!important;font-size:18px!important}
.page-faq .faq-list summary::-webkit-details-marker{display:none}
.page-faq .faq-list summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:28px;font-weight:400;transition:transform .2s ease}
.page-faq .faq-list details[open] summary::after{content:"−";transform:translateY(-50%) rotate(180deg)}
.page-faq .faq-list details p{margin:0!important;padding:0 24px 24px!important;max-width:980px;font-size:16px!important;line-height:1.72!important}
.faq-view-toggle{display:flex;margin:24px auto 0;border:1px solid rgba(232,204,124,.42);background:linear-gradient(135deg,rgba(231,196,92,.18),rgba(255,255,255,.06));color:#fff;border-radius:999px;padding:14px 24px;font-weight:900;cursor:pointer;transition:.22s ease}
.faq-view-toggle:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307}
.faq-view-toggle[hidden]{display:none!important}
.faq-result-note{color:var(--muted);font-size:14px;margin:0 0 12px}

@media(max-width:1100px){
  .page-directory-grid{grid-template-columns:repeat(2,1fr)}
  .page-projects .project-slide.is-prev{transform:translate(-117%,-50%) scale(.62)!important}
  .page-projects .project-slide.is-next{transform:translate(17%,-50%) scale(.62)!important}
}
@media(max-width:900px){
  .page-directory-grid,.page-reviews .review-grid{grid-template-columns:1fr!important}
  .page-projects .carousel-window,.page-projects .project-track{min-height:600px!important;height:600px!important}
  .page-projects .project-slide{width:min(72vw,560px)!important;height:520px!important}
}

/* HOME MERGE + FINAL RESPONSIVE SAFETY */
.home-section-nav-wrap{padding:34px 0 4px}.home-section-nav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px;border-radius:999px;background:rgba(2,18,10,.72);border:1px solid rgba(232,204,124,.24);box-shadow:0 18px 55px rgba(0,0,0,.24);backdrop-filter:blur(14px)}.home-section-nav-label{padding:11px 15px;color:#ffe27a;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.14em}.home-section-nav a{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-weight:900}.home-section-nav a:hover{background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307}.page-home #about,.page-home #categories,.page-home #process{scroll-margin-top:155px}.page-home .page-directory-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.page-home .page-directory-card{min-height:205px}@media(max-width:1200px){.page-home .page-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}html{overflow-x:hidden}body.desktop-page a.constant-desktop-whatsapp{position:fixed!important;left:22px!important;right:auto!important;bottom:22px!important;top:auto!important;width:auto!important;margin:0!important}body.desktop-page .facts-line{contain:paint}


/* =========================================================
   CAPTIONS, CALCULATOR & LEGAL PAGES — 2026-07-21
   ========================================================= */
.page-projects .project-slide > .project-caption{
  display:flex!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  z-index:8!important;flex-direction:column!important;gap:5px!important;padding:58px 24px 22px!important;
  background:linear-gradient(180deg,transparent,rgba(0,8,4,.90) 58%,rgba(0,8,4,.98))!important;
  opacity:0!important;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;pointer-events:none;
}
.page-projects .project-slide.is-active > .project-caption{opacity:1!important;transform:none}
.page-projects .project-caption strong{font-family:Georgia,serif;font-size:24px;line-height:1.12;color:#fff7df}
.page-projects .project-caption span{font-size:14px;line-height:1.45;color:rgba(255,250,225,.78)}
.page-projects .gallery-counter{bottom:20px!important}

.panel-calculator-section{padding-top:44px;padding-bottom:92px}
.calculator-heading{max-width:820px}
.panel-calculator{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:22px;padding:24px;border-radius:30px;background:linear-gradient(145deg,rgba(7,43,24,.92),rgba(1,16,9,.86));border:1px solid rgba(232,204,124,.30);box-shadow:0 28px 80px rgba(0,0,0,.34)}
.calculator-form{display:grid;gap:16px;padding:22px;border-radius:23px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08)}
.calculator-form label{display:grid;gap:8px;font-size:13px;font-weight:900;letter-spacing:.04em;color:rgba(255,250,225,.78)}
.calculator-form input,.calculator-form select{width:100%;min-height:50px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:#07170e;color:#fff7df;font:inherit;font-weight:800;outline:none}
.calculator-form input:focus,.calculator-form select:focus{border-color:rgba(255,226,122,.72);box-shadow:0 0 0 3px rgba(231,196,92,.13)}
.calculator-measurements{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calculator-button{min-height:52px;border:0;border-radius:15px;background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307;font-weight:1000;cursor:pointer;box-shadow:0 12px 28px rgba(231,196,92,.16)}
.calculator-result{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:30px;border-radius:23px;background:radial-gradient(circle at 70% 20%,rgba(124,255,55,.13),transparent 18rem),rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.09)}
.calculator-placeholder,.calculator-error{margin:0;color:rgba(255,250,225,.72);line-height:1.65}.calculator-error{color:#ffd0c8}
.calculator-kicker{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.calculator-total{font-family:Georgia,serif;font-size:clamp(38px,5vw,62px);line-height:1;margin:10px 0 22px;color:#fff7df}
.calculator-result dl{display:grid;gap:8px;margin:0 0 22px}.calculator-result dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.calculator-result dt{color:rgba(255,250,225,.62)}.calculator-result dd{margin:0;font-weight:900;text-align:right}
.calculator-whatsapp{display:flex;justify-content:center;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,#25D366,#128C7E);color:white!important;font-weight:1000;text-align:center}
.calculator-disclaimer{max-width:950px;margin:18px auto 0;text-align:center;color:rgba(255,250,225,.58);font-size:13px;line-height:1.65}

.site-footer .footer-inner{grid-template-columns:1.35fr .62fr .78fr .66fr .72fr!important}
.footer-legal a{font-size:14px}

.legal-page{padding-top:64px;padding-bottom:92px}.legal-hero{max-width:880px;margin-bottom:30px;padding:34px;border-radius:30px;background:linear-gradient(145deg,rgba(8,48,27,.90),rgba(0,0,0,.25));border:1px solid rgba(232,204,124,.28)}.legal-hero h1{font-family:Georgia,serif;font-size:clamp(42px,6vw,74px);line-height:1;margin:8px 0 18px}.legal-hero>p:not(.eyebrow){max-width:760px;color:rgba(255,250,225,.78);font-size:18px;line-height:1.7}.legal-hero small{color:var(--gold);font-weight:900}.legal-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.legal-page-nav{position:sticky;top:120px;display:grid;gap:8px;padding:12px;border-radius:20px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.08)}.legal-page-nav a{padding:13px 15px;border-radius:13px;font-weight:900;color:rgba(255,250,225,.76)}.legal-page-nav a:hover,.legal-page-nav a.active{background:linear-gradient(135deg,#ffe27a,#e5b947);color:#071307}.legal-content{display:grid;gap:14px}.legal-block{padding:28px;border-radius:24px;background:linear-gradient(145deg,rgba(5,35,20,.82),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.09)}.legal-block h2{font-family:Georgia,serif;font-size:27px;margin:0 0 14px}.legal-block p,.legal-block li{color:rgba(255,250,225,.76);line-height:1.72}.legal-block p{margin:0}.legal-block ul{margin:0;padding-left:22px;display:grid;gap:8px}.legal-block a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}.legal-note{padding:22px;border-radius:20px;background:rgba(231,196,92,.10);border:1px solid rgba(231,196,92,.34);color:rgba(255,250,225,.78);line-height:1.65}.legal-note strong{color:var(--gold)}
@media(max-width:1050px){.site-footer .footer-inner{grid-template-columns:1fr 1fr 1fr!important}.footer-brand-block{grid-column:1/-1}.panel-calculator{grid-template-columns:1fr}.legal-layout{grid-template-columns:1fr}.legal-page-nav{position:static;grid-template-columns:repeat(4,1fr)}}
@media(max-width:650px){.calculator-measurements{grid-template-columns:1fr}.legal-page-nav{grid-template-columns:1fr 1fr}.site-footer .footer-inner{grid-template-columns:1fr!important}}

/* Caption/counter separation */
.page-projects .gallery-counter{top:18px!important;bottom:auto!important}

/* =========================================================
   UNIFIED RESPONSIVE ARCHITECTURE + TRUST & ACCESSIBILITY
   ========================================================= */
.skip-link{position:fixed;left:16px;top:10px;z-index:5000;padding:12px 18px;border-radius:10px;background:#fff7df;color:#071307;font-weight:900;transform:translateY(-160%);transition:transform .18s}.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #ffe27a!important;outline-offset:4px!important}
.site-menu-toggle,.site-menu-backdrop{display:none}.topbar nav a{white-space:nowrap}.page-title{font-family:Georgia,serif;font-size:clamp(38px,5vw,64px);letter-spacing:-.05em;line-height:1;margin:0 0 20px}
.review-stars-desktop{font-size:12px!important;text-transform:uppercase;letter-spacing:.13em!important;color:var(--gold)!important}.faq-scope-note{max-width:800px;color:rgba(255,247,223,.68);line-height:1.65}
.contact-heading{max-width:850px}.contact-heading h1{font-family:Georgia,serif;font-size:clamp(44px,7vw,82px);line-height:.98;margin:8px 0 20px}.contact-heading>p:last-child{font-size:18px;line-height:1.7;color:var(--muted)}
.contact-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.contact-method-card{display:flex;flex-direction:column;align-items:flex-start;min-height:310px;padding:28px;border-radius:28px;background:linear-gradient(145deg,rgba(7,43,24,.88),rgba(0,0,0,.28));border:1px solid rgba(232,204,124,.25)}.contact-method-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(231,196,92,.14);color:var(--gold);font-weight:900}.contact-method-card h2{font-family:Georgia,serif;font-size:30px;margin:24px 0 10px}.contact-method-card p{color:var(--muted);line-height:1.65;flex:1}.contact-method-card>a:not(.btn),.contact-method-card strong{color:#ffe27a;font-weight:900;word-break:break-word}
.quote-builder-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start}.quote-builder-copy{padding:30px;border-radius:28px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.09)}.quote-builder-copy h2{font-size:clamp(36px,5vw,58px)}.quote-builder-copy>p:not(.eyebrow),.contact-checklist{color:var(--muted);line-height:1.7}.contact-checklist{display:grid;gap:10px;padding-left:20px}.quote-builder{display:grid;gap:15px;padding:28px;border-radius:28px;background:linear-gradient(145deg,rgba(7,43,24,.90),rgba(0,0,0,.28));border:1px solid rgba(232,204,124,.28)}.quote-builder label{display:grid;gap:8px;font-size:13px;font-weight:900;color:rgba(255,247,223,.82)}.quote-builder input,.quote-builder select,.quote-builder textarea{width:100%;padding:14px;border:1px solid rgba(255,255,255,.17);border-radius:14px;background:#07170e;color:#fff7df;font:inherit}.quote-builder textarea{resize:vertical}.quote-builder-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quote-builder-button{border:0;cursor:pointer;min-height:52px}.form-privacy-note{font-size:12px;line-height:1.6;color:rgba(255,247,223,.58)}.form-privacy-note a{color:#ffe27a;text-decoration:underline}
.contact-expectation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.contact-expectation-grid article{padding:24px;border-radius:22px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10)}.contact-expectation-grid h3{font-family:Georgia,serif;font-size:26px;margin:0 0 10px}.contact-expectation-grid p{color:var(--muted);line-height:1.6}
.official-resources>p{margin-bottom:20px}.official-source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px}.official-source-card{display:flex;flex-direction:column;min-height:220px;padding:20px;border-radius:19px;background:rgba(0,0,0,.20);border:1px solid rgba(232,204,124,.24);text-decoration:none!important;transition:.2s}.official-source-card:hover{transform:translateY(-3px);border-color:rgba(255,226,122,.72)}.official-source-card strong{color:#fff7df;font-size:18px}.official-source-domain{display:inline-block;margin:7px 0 12px;color:var(--gold);font-weight:900;font-size:12px;letter-spacing:.07em}.official-source-card p{flex:1;margin:0!important;font-size:14px}.official-source-action{margin-top:15px;color:#ffe27a;font-weight:900;font-size:13px}
.quality-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.quality-score-card{padding:24px;border-radius:24px;background:linear-gradient(145deg,rgba(7,43,24,.88),rgba(0,0,0,.28));border:1px solid rgba(232,204,124,.25)}.quality-score-card strong{display:block;font-family:Georgia,serif;font-size:52px;color:#ffe27a}.quality-score-card span{color:var(--muted)}.audit-table-wrap{overflow:auto;border-radius:22px;border:1px solid rgba(255,255,255,.10)}.audit-table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.22)}.audit-table th,.audit-table td{padding:15px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}.audit-table th{color:#ffe27a}.audit-table td{color:var(--muted)}.audit-status-pass{color:#9dff70!important;font-weight:900}.audit-status-note{color:#ffe27a!important;font-weight:900}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.facts-track{animation:none!important}}
@media(max-width:1050px){.contact-method-grid,.contact-expectation-grid,.official-source-grid{grid-template-columns:1fr 1fr}.quote-builder-section{grid-template-columns:1fr}.quality-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
body.desktop-page.responsive-page{padding-top:94px!important}body.desktop-page.responsive-page.site-menu-open{overflow:hidden!important}
body.desktop-page.responsive-page .topbar{position:fixed!important;top:10px!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;margin:0!important;min-height:72px!important;padding:8px 10px!important;border-radius:19px!important;display:flex!important;flex-wrap:nowrap!important;z-index:2000!important;transform:none!important}
body.desktop-page.responsive-page .topbar>.logo{position:static!important;display:block!important;min-width:0!important}body.desktop-page.responsive-page .topbar>.logo img{width:132px!important;height:auto!important;transform:none!important;margin:0!important}body.desktop-page.responsive-page .topbar>.top-socials,body.desktop-page.responsive-page .topbar>.whatsapp{display:none!important}
.site-menu-toggle{display:grid;width:48px;height:48px;margin-left:auto;padding:12px;border-radius:14px;border:1px solid rgba(232,204,124,.35);background:rgba(255,255,255,.06);place-content:center;gap:5px;cursor:pointer;z-index:2002}.site-menu-toggle span{display:block;width:23px;height:2px;border-radius:2px;background:#fff7df;transition:.2s}.site-menu-open .site-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.site-menu-open .site-menu-toggle span:nth-child(2){opacity:0}.site-menu-open .site-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.desktop-page.responsive-page .topbar nav{position:fixed!important;display:grid!important;align-content:start!important;gap:7px!important;top:90px!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100dvh - 104px)!important;padding:13px!important;overflow:auto!important;border-radius:20px!important;background:rgba(3,20,12,.98)!important;border:1px solid rgba(232,204,124,.33)!important;box-shadow:0 28px 80px rgba(0,0,0,.55)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-12px)!important;transition:.2s!important;z-index:2001!important}body.site-menu-open .topbar nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}body.desktop-page.responsive-page .topbar nav a{display:block!important;width:100%!important;padding:16px 18px!important;border-radius:14px!important;font-size:16px!important}
.site-menu-backdrop{position:fixed;inset:0;display:block;border:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;z-index:1990}.site-menu-open .site-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}.desktop-scroll-nav-toggle{display:none!important}.review-popup{display:none!important}
body.desktop-page.responsive-page main{width:min(100% - 20px,1180px)!important}body.desktop-page.responsive-page .hero{padding-top:24px!important;min-height:auto!important}body.desktop-page.responsive-page .hero-panel{padding:25px!important}body.desktop-page.responsive-page .hero h1{font-size:clamp(45px,14vw,68px)!important}body.desktop-page.responsive-page .hero-floats{grid-template-columns:1fr!important}body.desktop-page.responsive-page .home-section-nav{border-radius:22px!important}body.desktop-page.responsive-page .page-home .page-directory-grid{grid-template-columns:1fr!important}body.desktop-page.responsive-page .site-footer .footer-inner{grid-template-columns:1fr!important}body.desktop-page.responsive-page .constant-desktop-whatsapp{left:auto!important;right:14px!important;bottom:14px!important}
.contact-method-grid,.contact-expectation-grid,.official-source-grid,.quality-summary-grid{grid-template-columns:1fr}.quote-builder-row{grid-template-columns:1fr}.contact-method-card{min-height:0}.legal-page-nav{grid-template-columns:1fr 1fr!important}.legal-hero{padding:24px!important}
.page-projects .carousel-window,.page-projects .project-track{height:520px!important;min-height:520px!important}.page-projects .project-slide{width:78vw!important;height:450px!important}.page-projects .project-slide.is-prev{transform:translate(-105%,-50%) scale(.56)!important}.page-projects .project-slide.is-next{transform:translate(5%,-50%) scale(.56)!important}.page-projects .carousel-arrow{width:48px!important;height:48px!important}.page-projects .carousel-arrow-left{left:8px!important}.page-projects .carousel-arrow-right{right:8px!important}.page-projects .project-caption strong{font-size:20px!important}.page-projects .project-caption{padding:48px 18px 18px!important}
}
@media(max-width:520px){.legal-page-nav{grid-template-columns:1fr!important}.quality-score-card strong{font-size:44px}.topbar nav{overscroll-behavior:contain}}
@media(max-width:820px){body.desktop-page.responsive-page .topbar>.logo{width:150px!important;max-width:150px!important;flex:0 0 150px!important}body.desktop-page.responsive-page .topbar>.logo img{width:132px!important;max-height:54px!important;object-fit:contain!important}.site-menu-toggle{flex:0 0 48px!important;margin-left:auto!important}}

/* =========================================================
   SINGLE RESPONSIVE SITE REBUILD — DESKTOP DESIGN → MOBILE
   One HTML architecture for desktop, tablet and phone.
   These rules intentionally override legacy device-specific styling.
   ========================================================= */
html{scroll-padding-top:128px}
body.responsive-page{overflow-x:hidden!important}
body.responsive-page main{min-width:0}
body.responsive-page img{max-width:100%}
body.responsive-page .site-menu-toggle{display:none}
body.responsive-page .site-menu-backdrop{display:none}

/* Desktop stays as the visual source of truth. */
@media(min-width:821px){
  body.responsive-page .topbar{display:flex!important}
  body.responsive-page .topbar>nav{display:flex!important}
}

/* Tablet: same cards and content, simply reflowed. */
@media(max-width:1080px){
  body.responsive-page .hero{grid-template-columns:1fr!important;gap:22px!important}
  body.responsive-page .hero-floats{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.responsive-page .hero-floats .float-main{grid-column:1/-1}
  body.responsive-page .trust{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.responsive-page .category-grid,
  body.responsive-page .process-grid,
  body.responsive-page .product-grid,
  body.responsive-page .why-grid,
  body.responsive-page .page-directory-grid,
  body.responsive-page .hedging-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-home.responsive-page .page-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.responsive-page .about-panel,
  body.responsive-page .safety-panel,
  body.responsive-page .quote-builder-section,
  body.responsive-page .legal-layout{grid-template-columns:1fr!important}
  body.responsive-page .site-footer .footer-inner{grid-template-columns:1.2fr 1fr!important}
  body.responsive-page .footer-brand-block{grid-column:1/-1}
}

/* Phone / small tablet navigation: same desktop navigation, collapsed into a burger. */
@media(max-width:820px){
  html{scroll-padding-top:96px}
  body.responsive-page{padding-top:92px!important}
  body.responsive-page.site-menu-open{overflow:hidden!important}

  body.responsive-page .topbar{
    position:fixed!important;
    top:10px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    min-height:70px!important;
    margin:0!important;
    padding:8px 10px 8px 12px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    border-radius:20px!important;
    background:rgba(3,20,12,.94)!important;
    border:1px solid rgba(255,226,122,.28)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.45)!important;
    backdrop-filter:blur(18px)!important;
    transform:none!important;
    z-index:2200!important;
  }
  body.responsive-page .topbar>.logo{
    position:static!important;
    width:164px!important;
    max-width:164px!important;
    flex:0 0 164px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  body.responsive-page .topbar>.logo img{
    display:block!important;
    width:154px!important;
    height:56px!important;
    max-height:56px!important;
    object-fit:contain!important;
    object-position:left center!important;
    transform:none!important;
    margin:0!important;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))!important;
  }
  body.responsive-page .topbar>.top-socials,
  body.responsive-page .topbar>.whatsapp{display:none!important}

  body.responsive-page .site-menu-toggle{
    display:grid!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    margin-left:auto!important;
    padding:12px!important;
    place-content:center!important;
    gap:5px!important;
    border-radius:15px!important;
    border:1px solid rgba(255,226,122,.36)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,226,122,.05))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
    cursor:pointer!important;
    z-index:2202!important;
  }
  body.responsive-page .site-menu-toggle span{
    display:block!important;
    width:23px!important;
    height:2px!important;
    border-radius:5px!important;
    background:#fff7df!important;
    transition:transform .2s ease,opacity .2s ease!important;
  }
  body.responsive-page.site-menu-open .site-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  body.responsive-page.site-menu-open .site-menu-toggle span:nth-child(2){opacity:0!important}
  body.responsive-page.site-menu-open .site-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

  body.responsive-page .topbar>nav{
    position:fixed!important;
    top:90px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 104px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    gap:7px!important;
    margin:0!important;
    padding:13px!important;
    overflow:auto!important;
    border-radius:20px!important;
    background:rgba(3,20,12,.985)!important;
    border:1px solid rgba(255,226,122,.34)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(20px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-10px)!important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;
    z-index:2201!important;
    overscroll-behavior:contain!important;
  }
  body.responsive-page.site-menu-open .topbar>nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  body.responsive-page .topbar>nav a{
    display:flex!important;
    align-items:center!important;
    min-height:52px!important;
    width:100%!important;
    padding:14px 16px!important;
    border-radius:14px!important;
    font-size:16px!important;
    font-weight:900!important;
    color:#fff7df!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }
  body.responsive-page .topbar>nav a[aria-current="page"]{
    color:#071307!important;
    background:linear-gradient(135deg,#ffe27a,#e5b947)!important;
    border-color:transparent!important;
  }
  body.responsive-page .site-menu-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    border:0!important;
    background:rgba(0,0,0,.62)!important;
    backdrop-filter:blur(3px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:.2s ease!important;
    z-index:2190!important;
  }
  body.responsive-page.site-menu-open .site-menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.responsive-page .desktop-scroll-nav-toggle{display:none!important}

  /* Desktop layout, translated rather than replaced. */
  body.responsive-page main,
  body.responsive-page .subpage-main,
  body.responsive-page .home-main{width:min(100% - 20px,1180px)!important;margin-inline:auto!important}
  body.responsive-page .section{padding:48px 0!important}
  body.responsive-page .subpage-main>.section:first-child,
  body.responsive-page .subpage-main>.cta:first-child{padding-top:32px!important}
  body.responsive-page .hero{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;min-height:auto!important;padding:20px 0 16px!important}
  body.responsive-page .hero-panel{padding:24px!important;border-radius:28px!important}
  body.responsive-page .hero h1{font-size:clamp(42px,12.2vw,62px)!important;line-height:.96!important;letter-spacing:-.055em!important}
  body.responsive-page .lead{font-size:16px!important;line-height:1.66!important}
  body.responsive-page .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  body.responsive-page .actions .btn{width:100%!important;min-height:50px!important}
  body.responsive-page .trust{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.responsive-page .trust span{min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
  body.responsive-page .hero-floats{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important}
  body.responsive-page .float-card{animation:none!important;padding:17px!important;border-radius:20px!important}
  body.responsive-page .float-main{padding:20px!important}
  body.responsive-page .float-main strong{font-size:25px!important}

  body.responsive-page .facts-line{margin-inline:-10px!important;overflow:hidden!important}
  body.responsive-page .facts-track{font-size:12px!important;gap:24px!important}

  body.responsive-page .home-section-nav-wrap{padding:22px 0 0!important}
  body.responsive-page .home-section-nav{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding:9px!important;
    border-radius:20px!important;
    scrollbar-width:none!important;
  }
  body.responsive-page .home-section-nav::-webkit-scrollbar{display:none!important}
  body.responsive-page .home-section-nav-label,
  body.responsive-page .home-section-nav a{white-space:nowrap!important;flex:0 0 auto!important}

  body.responsive-page .about-panel,
  body.responsive-page .safety-panel,
  body.responsive-page .hedging-guide-panel,
  body.responsive-page .glass,
  body.responsive-page .quote-builder,
  body.responsive-page .quote-builder-copy,
  body.responsive-page .legal-hero,
  body.responsive-page .legal-block{padding:22px!important;border-radius:25px!important}
  body.responsive-page .about-panel,
  body.responsive-page .safety-panel{grid-template-columns:1fr!important;gap:20px!important}
  body.responsive-page .about-title h2,
  body.responsive-page .section h2,
  body.responsive-page .section-head h1,
  body.responsive-page .page-title h1,
  body.responsive-page .contact-heading h1,
  body.responsive-page .legal-hero h1{font-size:clamp(37px,10.5vw,52px)!important;line-height:1!important}

  body.responsive-page .category-grid,
  body.responsive-page .process-grid,
  body.responsive-page .product-grid,
  body.responsive-page .review-grid,
  body.responsive-page .why-grid,
  body.responsive-page .page-directory-grid,
  body.responsive-page .hedging-guide-grid,
  body.responsive-page .safety-fact-grid,
  body.responsive-page .contact-method-grid,
  body.responsive-page .contact-expectation-grid,
  body.responsive-page .official-source-grid,
  body.responsive-page .quality-summary-grid{grid-template-columns:1fr!important;gap:12px!important}
  body.page-home.responsive-page .page-directory-grid{grid-template-columns:1fr!important}
  body.responsive-page .page-directory-card,
  body.responsive-page .hedging-guide-grid article,
  body.responsive-page .contact-method-card{min-height:auto!important}

  body.responsive-page .product-card img{height:250px!important;padding:12px!important}
  body.responsive-page .filters,
  body.responsive-page .faq-category-list{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.responsive-page .filters::-webkit-scrollbar,
  body.responsive-page .faq-category-list::-webkit-scrollbar{display:none!important}
  body.responsive-page .filter,
  body.responsive-page .faq-filter{flex:0 0 auto!important;white-space:nowrap!important}

  body.responsive-page .panel-calculator{grid-template-columns:1fr!important;gap:18px!important;padding:22px!important}
  body.responsive-page .calculator-measurements,
  body.responsive-page .quote-builder-row{grid-template-columns:1fr!important}

  /* Keep the desktop centre-focus gallery concept on mobile. */
  body.page-projects.responsive-page .carousel-window,
  body.page-projects.responsive-page .project-track{height:500px!important;min-height:500px!important}
  body.page-projects.responsive-page .project-slide,
  body.page-projects.responsive-page .project-slide.single-project-slide,
  body.page-projects.responsive-page .project-slide.no-before-after-line{
    width:min(78vw,410px)!important;
    height:430px!important;
    border-radius:24px!important;
  }
  body.page-projects.responsive-page .project-slide.is-prev{transform:translate(-100%,-50%) scale(.56)!important;opacity:.58!important}
  body.page-projects.responsive-page .project-slide.is-next{transform:translate(0%,-50%) scale(.56)!important;opacity:.58!important}
  body.page-projects.responsive-page .carousel-arrow{width:46px!important;height:46px!important;font-size:30px!important}
  body.page-projects.responsive-page .carousel-arrow-left{left:6px!important}
  body.page-projects.responsive-page .carousel-arrow-right{right:6px!important}
  body.page-projects.responsive-page .project-caption{padding:44px 16px 16px!important}
  body.page-projects.responsive-page .project-caption strong{font-size:19px!important}

  body.page-reviews.responsive-page .review-grid{grid-template-columns:1fr!important}
  body.page-reviews.responsive-page .review-grid article{padding:22px!important}
  body.responsive-page .review-popup{display:none!important}

  body.responsive-page .faq-list summary{padding:18px 50px 18px 18px!important;font-size:16px!important;line-height:1.4!important}
  body.responsive-page .faq-list details>p{padding:0 18px 18px!important}

  body.responsive-page .quote-builder-section,
  body.responsive-page .legal-layout{grid-template-columns:1fr!important;gap:16px!important}
  body.responsive-page .legal-page-nav{position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}

  body.responsive-page .site-footer{padding:44px 12px 96px!important}
  body.responsive-page .site-footer .footer-inner{grid-template-columns:1fr!important;gap:24px!important}
  body.responsive-page .footer-brand-block,
  body.responsive-page .footer-column{text-align:left!important}
  body.responsive-page .site-footer .footer-inner>div{justify-content:flex-start!important}
  body.responsive-page .collaboration-block{margin:20px 0 0!important;width:100%!important}

  /* Compact floating WhatsApp on phones so content is not covered. */
  body.responsive-page .constant-desktop-whatsapp{
    position:fixed!important;
    left:auto!important;
    right:14px!important;
    bottom:14px!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    z-index:2100!important;
  }
  body.responsive-page .constant-desktop-whatsapp .constant-whatsapp-label{display:none!important}
  body.responsive-page .constant-desktop-whatsapp .constant-whatsapp-icon{margin:0!important}
}

@media(max-width:520px){
  body.responsive-page .topbar>.logo{width:148px!important;max-width:148px!important;flex-basis:148px!important}
  body.responsive-page .topbar>.logo img{width:140px!important;height:52px!important}
  body.responsive-page .hero-panel{padding:20px!important}
  body.responsive-page .hero h1{font-size:clamp(39px,11.5vw,50px)!important}
  body.responsive-page .trust{grid-template-columns:1fr 1fr!important}
  body.responsive-page .legal-page-nav{grid-template-columns:1fr!important}
  body.page-projects.responsive-page .project-slide,
  body.page-projects.responsive-page .project-slide.single-project-slide,
  body.page-projects.responsive-page .project-slide.no-before-after-line{width:80vw!important;height:410px!important}
}

/* =========================================================
   NAVIGATION REPAIR — 2026-08-07
   Restore the original desktop grid header and keep the
   responsive mobile menu crisp (no blur/compositor haze).
   ========================================================= */

/* Desktop / laptop: preserve the desktop design as the source of truth. */
@media (min-width:821px){
  body.responsive-page{
    padding-top:var(--desktop-header-space,172px)!important;
  }

  body.responsive-page .topbar{
    position:fixed!important;
    top:36px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(1500px,calc(100% - 64px))!important;
    max-width:none!important;
    min-height:88px!important;
    height:88px!important;
    margin:0!important;
    padding:8px 16px 8px 20px!important;
    display:grid!important;
    grid-template-columns:minmax(370px,400px) minmax(0,1fr) auto auto!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    column-gap:13px!important;
    row-gap:0!important;
    border-radius:24px!important;
    overflow:visible!important;
    max-height:none!important;
    z-index:2000!important;
  }

  body.responsive-page .topbar>.logo{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin:0!important;
    overflow:visible!important;
    z-index:4!important;
  }

  body.responsive-page .topbar>.logo img{
    position:relative!important;
    display:block!important;
    width:395px!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    transform:translateY(42px)!important;
    transform-origin:left center!important;
    margin:0!important;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.72))!important;
    z-index:5!important;
  }

  body.responsive-page .topbar>nav{
    grid-column:2!important;
    grid-row:1!important;
    position:static!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-evenly!important;
    flex-wrap:nowrap!important;
    gap:2px!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.responsive-page .topbar>nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 1 auto!important;
    min-width:0!important;
    width:auto!important;
    min-height:0!important;
    padding:10px 8px!important;
    border-radius:999px!important;
    color:#fff8e8!important;
    background:transparent!important;
    border:0!important;
    font-size:17px!important;
    font-weight:950!important;
    line-height:1.05!important;
    letter-spacing:.002em!important;
    white-space:nowrap!important;
    text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
  }

  body.responsive-page .topbar>nav a[aria-current="page"]{
    color:#071307!important;
    background:linear-gradient(135deg,#ffe27a,#e5b947)!important;
    box-shadow:0 8px 22px rgba(231,196,92,.22)!important;
  }

  body.responsive-page .topbar>.top-socials{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    min-width:max-content!important;
    margin:0!important;
  }

  body.responsive-page .topbar>.top-socials .social-icon,
  body.responsive-page .topbar>.top-socials a{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
  }

  body.responsive-page .topbar>.top-socials .social-icon svg{
    width:33px!important;
    height:33px!important;
  }

  body.responsive-page .topbar>.whatsapp{
    grid-column:4!important;
    grid-row:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:max-content!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 19px!important;
    font-size:15.5px!important;
    font-weight:1000!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.responsive-page .site-menu-toggle,
  body.responsive-page .site-menu-backdrop{
    display:none!important;
  }
}

@media (min-width:821px) and (max-width:1500px){
  body.responsive-page .topbar{
    width:calc(100% - 28px)!important;
    grid-template-columns:minmax(310px,340px) minmax(0,1fr) auto auto!important;
    column-gap:9px!important;
    padding-left:16px!important;
    padding-right:14px!important;
  }
  body.responsive-page .topbar>.logo img{
    width:340px!important;
    transform:translateY(40px)!important;
  }
  body.responsive-page .topbar>nav a{
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:15.5px!important;
  }
  body.responsive-page .topbar>.top-socials .social-icon,
  body.responsive-page .topbar>.top-socials a{
    width:41px!important;
    height:41px!important;
    flex-basis:41px!important;
  }
  body.responsive-page .topbar>.whatsapp{
    min-height:45px!important;
    padding:0 15px!important;
    font-size:14.5px!important;
  }
}

/* Smaller desktop / landscape tablet: use the original safe two-row desktop header. */
@media (min-width:821px) and (max-width:1180px){
  body.responsive-page{padding-top:185px!important}
  body.responsive-page .topbar{
    top:30px!important;
    height:auto!important;
    min-height:112px!important;
    grid-template-columns:minmax(290px,1fr) auto auto!important;
    grid-template-rows:70px auto!important;
    row-gap:5px!important;
    padding:7px 15px 12px!important;
  }
  body.responsive-page .topbar>.logo{
    grid-column:1!important;
    grid-row:1!important;
    height:62px!important;
    min-height:62px!important;
  }
  body.responsive-page .topbar>.logo img{
    width:325px!important;
    transform:translateY(36px)!important;
  }
  body.responsive-page .topbar>.top-socials{grid-column:2!important;grid-row:1!important}
  body.responsive-page .topbar>.whatsapp{grid-column:3!important;grid-row:1!important}
  body.responsive-page .topbar>nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:3px 7px!important;
    padding-top:6px!important;
    border-top:1px solid rgba(248,234,208,.16)!important;
  }
  body.responsive-page .topbar>nav a{padding:7px 9px!important;font-size:15px!important}
}

/* Mobile: crisp, fully opaque menu. No blur on the header, panel or backdrop. */
@media (max-width:820px){
  body.responsive-page .topbar{
    background:#04180e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    isolation:isolate!important;
  }

  body.responsive-page .topbar>nav{
    background:#04180e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    opacity:0!important;
    will-change:transform,opacity!important;
    -webkit-font-smoothing:antialiased!important;
    text-rendering:optimizeLegibility!important;
  }

  body.responsive-page.site-menu-open .topbar>nav{
    opacity:1!important;
  }

  body.responsive-page .site-menu-backdrop{
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }

  body.responsive-page .topbar>nav a{
    color:#fffaf0!important;
    background:#0b2919!important;
    border:1px solid rgba(255,226,122,.16)!important;
    text-shadow:none!important;
    filter:none!important;
  }

  body.responsive-page .topbar>nav a[aria-current="page"]{
    color:#071307!important;
    background:linear-gradient(135deg,#ffe27a,#e5b947)!important;
    border-color:transparent!important;
  }
}

/* Final mobile stacking correction: the dimming layer must sit BEHIND the menu. */
@media (max-width:820px){
  body.desktop-page.responsive-page .topbar{
    z-index:2300!important;
    background:#04180e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }
  body.desktop-page.responsive-page .topbar>nav,
  body.desktop-page.responsive-page .topbar nav{
    z-index:2301!important;
    background:#04180e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }
  body.desktop-page.responsive-page .site-menu-toggle{
    z-index:2302!important;
  }
  body.desktop-page.responsive-page .site-menu-backdrop{
    z-index:2290!important;
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }
}

/* =========================================================
   MOBILE LOGO ENHANCEMENT + ROUTING FIX RELEASE — 2026-08-07
   Keep the mobile header compact while letting the real logo
   artwork intentionally drape beyond the navigation capsule.
   ========================================================= */
@media (max-width:820px){
  body.responsive-page .topbar{
    min-height:72px!important;
    height:72px!important;
    padding:7px 12px 7px 14px!important;
    overflow:visible!important;
  }

  body.responsive-page .topbar>.logo,
  body.desktop-page.responsive-page .topbar>.logo{
    position:relative!important;
    width:205px!important;
    max-width:205px!important;
    flex:0 0 205px!important;
    height:64px!important;
    min-height:64px!important;
    overflow:visible!important;
    z-index:2304!important;
  }

  body.responsive-page .topbar>.logo img,
  body.desktop-page.responsive-page .topbar>.logo img{
    position:absolute!important;
    left:-8px!important;
    top:-21px!important;
    width:215px!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    transform:none!important;
    margin:0!important;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.68))!important;
    pointer-events:auto!important;
  }

  body.responsive-page .site-menu-toggle,
  body.desktop-page.responsive-page .site-menu-toggle{
    margin-left:auto!important;
    flex:0 0 48px!important;
    position:relative!important;
    z-index:2310!important;
  }
}

@media (max-width:430px){
  body.responsive-page .topbar>.logo,
  body.desktop-page.responsive-page .topbar>.logo{
    width:188px!important;
    max-width:188px!important;
    flex-basis:188px!important;
  }
  body.responsive-page .topbar>.logo img,
  body.desktop-page.responsive-page .topbar>.logo img{
    width:198px!important;
    left:-10px!important;
    top:-18px!important;
  }
}