@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap');

:root{
  --bg:#050403;
  --panel:rgba(6,6,5,.88);
  --card:rgba(9,9,7,.92);
  --text:#fffaf0;
  --muted:#e5dcc8;
  --gold:#d8b542;
  --gold2:#fff09c;
  --line:rgba(255,222,105,.34);
  --line2:rgba(255,222,105,.56);
  --green:#57c47c;
  --blue:#3278ff;
  --max:1760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 0%,rgba(216,181,66,.18),transparent 34rem),
    linear-gradient(135deg,#050403 0%,#0d0b07 45%,#030302 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(18px,.35vw + 16px,22px);
  line-height:1.55;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:58px 58px;
}
.site-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 80% 12%,rgba(216,181,66,.08),transparent 38rem)}

a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  min-height:92px;
  margin:0;
  padding:.8rem clamp(1.25rem,3vw,4rem);
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,2.6rem);
  background:rgba(4,4,3,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.logo-link{flex:0 0 auto}
.logo-link img{width:96px;max-width:96px;border-radius:8px}
.menu-toggle{display:none}
.main-nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(.75rem,1vw,1.45rem);
}
.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:.9rem clamp(1rem,1vw,1.45rem);
  text-decoration:none;
  font-weight:900;
  font-size:clamp(1rem,.35vw + .92rem,1.25rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  border-radius:999px;
  color:var(--text);
  white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,.08)}
.main-nav .nav-cta{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;border:0}

.home-hero{
  position:relative;
  min-height:calc(100svh - 92px);
  width:100%;
  display:flex;
  align-items:center;
  padding:clamp(2.4rem,4vw,5rem) 0 clamp(2.4rem,4vw,5rem) clamp(1.5rem,4vw,5rem);
  overflow:hidden;
}
.hero-image-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.56) 42%,rgba(0,0,0,.30) 100%),
    url("/assets/images/simon-bg.jpg") center right / cover no-repeat;
  z-index:0;
}
.home-hero-card{
  position:relative;
  z-index:1;
  width:min(54vw,980px);
  min-width:min(760px,calc(100vw - 3rem));
  padding:clamp(3rem,4.2vw,5.7rem);
  border:1px solid var(--line2);
  border-radius:34px;
  background:rgba(0,0,0,.68);
  box-shadow:0 36px 120px rgba(0,0,0,.55);
  overflow:hidden;
  isolation:isolate;
}
.hero-water-video,.hero-water-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero-water-video{
  object-fit:cover;
  opacity:.50;
  filter:brightness(.78) contrast(1.2) saturate(.95);
}
.hero-water-overlay{
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 58%,rgba(0,0,0,.52) 100%),
    radial-gradient(circle at 28% 20%,rgba(216,181,66,.12),transparent 24rem);
}
.home-hero-card > :not(.hero-water-video):not(.hero-water-overlay){position:relative;z-index:2}

.kicker{
  margin:0 0 1rem;
  color:var(--gold2);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(.9rem,.24vw + .82rem,1.08rem);
}
h1,h2,h3{margin:0;line-height:1.04;letter-spacing:-.045em}
h1{font-size:clamp(4rem,5.2vw,7rem)}
h2{font-size:clamp(2.4rem,3.2vw,4.4rem)}
h3{font-size:clamp(1.5rem,1vw + 1.1rem,2.1rem)}
p{color:var(--muted)}
.hero-intro{
  max-width:820px;
  margin:1.4rem 0 0;
  font-size:clamp(1.25rem,.45vw + 1.05rem,1.55rem);
  line-height:1.55;
}
.hero-actions{
  display:flex;
  align-items:stretch;
  gap:1rem;
  flex-wrap:nowrap;
  margin-top:2rem;
  width:100%;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:62px;
  padding:1rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  border:1.5px solid var(--line2);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-align:center;
  font-size:clamp(1rem,.24vw + .94rem,1.18rem);
}
.hero-actions .button{flex:1 1 0;min-width:0}
.button.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;border:0}
.button.secondary{background:#080806;color:var(--gold2)}
.button.whatsapp{background:linear-gradient(135deg,#79d489,#3bb66d);color:#0b120d;border:0}
.button.gocardless{background:linear-gradient(135deg,#67b7ff,#3267ff);color:white;border:0}

.page-strip,.page-section,.page-hero,.page-cta{
  width:min(calc(100% - clamp(2rem,4vw,5rem)),var(--max));
  margin:0 auto;
}
.key-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  padding:3rem 0 1.5rem;
}
.big-key-card{
  min-height:170px;
  padding:1.8rem;
  border:1.5px solid var(--line2);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(14,13,10,.94),rgba(0,0,0,.7));
}
.big-key-card strong{
  display:block;
  color:var(--gold2);
  font-size:clamp(3rem,3.4vw,4.6rem);
  line-height:1;
  margin-bottom:.7rem;
}
.big-key-card span{
  display:block;
  color:var(--text);
  font-size:clamp(1.24rem,.45vw + 1rem,1.5rem);
  font-weight:900;
  line-height:1.2;
}

.page-section,.page-hero,.page-cta{
  margin-top:4rem;
  padding:clamp(2.2rem,3vw,4rem);
  border:1.5px solid var(--line);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(9,9,7,.94),rgba(0,0,0,.74));
  box-shadow:0 30px 100px rgba(0,0,0,.38);
}
.page-hero.compact{
  margin-top:4rem;
  max-width:var(--max);
}
.page-hero p{max-width:980px;font-size:clamp(1.18rem,.36vw + 1rem,1.42rem)}
.two-column-highlight{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr);
  gap:2rem;
  align-items:center;
}
.quick-links{display:grid;gap:1rem}
.quick-links a,.seo-service-links a{
  display:flex;
  align-items:center;
  min-height:70px;
  padding:1.1rem 1.25rem;
  border:1.5px solid var(--line);
  border-radius:18px;
  text-decoration:none;
  color:var(--gold2);
  background:rgba(0,0,0,.35);
  font-weight:900;
}

.services-grid-page{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}
.service-page-card,.card{
  padding:1.7rem;
  border:1.5px solid var(--line);
  border-radius:22px;
  background:rgba(0,0,0,.42);
}
.service-page-card a{color:var(--gold2);font-weight:900;text-decoration:none}

.quote-page-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(520px,.85fr);
  gap:2rem;
  align-items:start;
}
.tabs{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.3rem}
.tab{
  min-height:58px;
  padding:.9rem 1.1rem;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.tab.active{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;border:0}
.calc-panel{display:none}
.calc-panel.active{display:block}
label{display:block;color:var(--text);font-weight:900;margin:0 0 1.2rem}
input,select,textarea{
  width:100%;
  min-height:70px;
  padding:1.1rem 1.2rem;
  margin-top:.45rem;
  border-radius:16px;
  border:1.5px solid var(--line);
  background:#020202;
  color:var(--text);
  outline:none;
  font-size:clamp(1.12rem,.35vw + 1rem,1.3rem);
}
textarea{min-height:250px;resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field-row.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.result-box{
  margin-top:1rem;
  padding:1.6rem;
  border:1.5px solid var(--line2);
  border-radius:22px;
  background:rgba(216,181,66,.08);
}
.result-box span{color:var(--gold2);font-weight:900;text-transform:uppercase}
.result-box strong{display:block;color:var(--gold2);font-size:clamp(4rem,5vw,6rem);line-height:1;margin:.4rem 0}
.hidden-honeypot,.hidden-honeypot *{display:none!important}
.form-warning{padding:1rem;border-radius:14px;border:1px solid var(--gold2);background:rgba(216,181,66,.12);color:var(--gold2);font-weight:900}
.enquiry-form.validation-attempted input[required]:invalid{border-color:var(--gold2)!important;box-shadow:0 0 0 4px rgba(216,181,66,.18)!important}

.area-page-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(560px,1.15fr);gap:2rem}
.map-card img{width:100%;border-radius:16px}
.tick-list{list-style:none;padding:0;margin:1rem 0}
.tick-list li{margin:.75rem 0;color:var(--muted);font-weight:800}
.tick-list li::before{content:"✓ ";color:var(--gold2);font-weight:900}

.faq-grid-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
summary{cursor:pointer;font-weight:900;font-size:clamp(1.15rem,.35vw + 1rem,1.35rem)}
details p{margin-top:1rem}
.page-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.payment-card{max-width:900px;margin:0 auto;text-align:center}
.success-card{text-align:center;max-width:900px}
.success-card img{width:220px;margin:0 auto 1.5rem}

.footer{
  width:min(calc(100% - 3rem),var(--max));
  margin:4rem auto 2rem;
  display:flex;
  align-items:center;
  gap:1rem;
  color:var(--muted);
  font-size:1rem;
}
.footer img{width:54px;border-radius:6px}
.footer p{margin:.2rem 0}

@media(max-width:1180px){
  .main-nav{gap:.45rem}
  .main-nav a{font-size:.92rem;padding:.75rem .75rem}
  .logo-link img{width:70px}
  .home-hero-card{width:min(62vw,820px);min-width:min(660px,calc(100vw - 3rem))}
  h1{font-size:clamp(3.2rem,5.4vw,5.2rem)}
  .services-grid-page,.key-strip,.quote-page-layout,.area-page-layout,.faq-grid-page,.two-column-highlight{grid-template-columns:1fr}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .button{flex:1 1 calc(50% - .5rem)}
}

@media(max-width:760px){
  body{font-size:17px}
  .topbar{min-height:70px;padding:.7rem 1rem;flex-wrap:wrap}
  .logo-link img{width:58px}
  .menu-toggle{
    margin-left:auto;
    display:grid;
    place-items:center;
    width:52px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,.35);
    cursor:pointer;
  }
  .menu-toggle span{display:block;width:24px;height:2px;background:var(--gold2);margin:3px 0}
  .main-nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch}
  .topbar.nav-open .main-nav,.main-nav.open{display:flex}
  .main-nav a{width:100%;font-size:1rem;min-height:52px}
  .home-hero{
    min-height:auto;
    padding:1rem;
    display:block;
  }
  .hero-image-bg{background-position:center right}
  .home-hero-card{
    width:100%;
    min-width:0;
    padding:1.25rem;
    border-radius:22px;
  }
  .hero-water-video{opacity:.26}
  h1{font-size:clamp(2.2rem,9vw,3rem);line-height:1.08}
  h2{font-size:clamp(1.85rem,7vw,2.5rem)}
  .hero-intro{font-size:1.05rem}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .button{width:100%;min-height:56px}
  .page-strip,.page-section,.page-hero,.page-cta{width:calc(100% - 1.4rem)}
  .key-strip{grid-template-columns:1fr;padding-top:1.5rem}
  .big-key-card{min-height:110px}
  .big-key-card strong{font-size:2.5rem}
  .services-grid-page,.quote-page-layout,.area-page-layout,.faq-grid-page,.field-row,.field-row.three-cols{grid-template-columns:1fr}
  .page-section,.page-hero,.page-cta{margin-top:1.5rem;padding:1.1rem;border-radius:22px}
  input,select,textarea{min-height:60px;font-size:1rem}
  textarea{min-height:180px}
  .footer{display:block;text-align:center}
  .footer img{margin:0 auto 1rem}
}


/* FINAL: remove filler section, bigger top tabs, clearly visible water video. */

/* No filler explanation section on homepage. */
.two-column-highlight{
  display: none !important;
}

/* Bigger, clearer top navigation. */
.topbar{
  min-height: 104px !important;
  padding: 0.85rem clamp(1.4rem, 3.4vw, 4.8rem) !important;
}

.logo-link img,
.topbar .logo-link img{
  width: 118px !important;
  max-width: 118px !important;
}

.main-nav{
  gap: clamp(1rem, 1.45vw, 2rem) !important;
}

.main-nav a{
  min-height: 66px !important;
  padding: 1rem clamp(1.25rem, 1.45vw, 2rem) !important;
  font-size: clamp(1.18rem, 0.42vw + 1.02rem, 1.48rem) !important;
  letter-spacing: .025em !important;
}

/* The welcome box video must be visible, not hidden under black. */
.home-hero-card{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: min(57vw, 1080px) !important;
  min-width: min(820px, calc(100vw - 3rem)) !important;
  padding: clamp(3.1rem, 4.2vw, 5.8rem) !important;
  background: rgba(0,0,0,.46) !important;
}

.hero-water-video,
.hero-water-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
}

.hero-water-video{
  display:block !important;
  z-index:0 !important;
  object-fit:cover !important;
  opacity:.78 !important;
  filter: brightness(.92) contrast(1.25) saturate(1.08) !important;
}

.hero-water-overlay{
  z-index:1 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.64) 54%, rgba(0,0,0,.38) 100%),
    radial-gradient(circle at 25% 20%, rgba(216,181,66,.12), transparent 26rem) !important;
}

.home-hero-card > :not(.hero-water-video):not(.hero-water-overlay){
  position:relative !important;
  z-index:2 !important;
}

.home-hero{
  min-height: calc(100svh - 104px) !important;
}

/* Bigger laptop text, but not cramped. */
.home-hero-card h1{
  font-size: clamp(4.45rem, 5.7vw, 7.8rem) !important;
  line-height: .98 !important;
}

.hero-intro{
  font-size: clamp(1.35rem, .5vw + 1.05rem, 1.7rem) !important;
  max-width: 900px !important;
}

.hero-actions .button{
  min-height: 70px !important;
  font-size: clamp(1.1rem, .35vw + 1rem, 1.32rem) !important;
}

/* Price key cards move directly after hero, no filler below. */
.key-strip{
  padding-top: 3.5rem !important;
}

.big-key-card{
  min-height: 190px !important;
  padding: 2rem !important;
}

.big-key-card strong{
  font-size: clamp(3.4rem, 3.8vw, 5rem) !important;
}

.big-key-card span{
  font-size: clamp(1.35rem, .5vw + 1.05rem, 1.65rem) !important;
}

/* Keep pages clean and bigger. */
.page-section,
.page-hero,
.page-cta{
  padding: clamp(2.5rem,3.3vw,4.4rem) !important;
}

.services-grid-page{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media(max-width:1180px){
  .topbar{
    min-height: 84px !important;
  }

  .logo-link img,
  .topbar .logo-link img{
    width: 76px !important;
    max-width: 76px !important;
  }

  .main-nav{
    gap: .55rem !important;
  }

  .main-nav a{
    min-height: 54px !important;
    font-size: clamp(.9rem, .3vw + .84rem, 1.05rem) !important;
    padding: .78rem .85rem !important;
  }

  .home-hero-card{
    width: min(64vw, 850px) !important;
    min-width: min(680px, calc(100vw - 3rem)) !important;
  }

  .home-hero-card h1{
    font-size: clamp(3.3rem, 5.8vw, 5.4rem) !important;
  }

  .services-grid-page{
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:760px){
  .topbar{
    min-height: 72px !important;
    padding: .7rem 1rem !important;
  }

  .logo-link img,
  .topbar .logo-link img{
    width: 60px !important;
    max-width: 60px !important;
  }

  .home-hero-card{
    width: 100% !important;
    min-width: 0 !important;
    padding: 1.35rem !important;
  }

  .hero-water-video{
    opacity: .42 !important;
  }

  .home-hero-card h1{
    font-size: clamp(2.2rem, 9vw, 3.05rem) !important;
    line-height: 1.08 !important;
  }

  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* IMAGE HERO + AI BACKGROUNDS FINAL
   Uses the uploaded water-fed-pole image behind the first box instead of video.
   Adds the AI character as a soft background layer on each page/section without squeezing text boxes. */

/* Replace old video layer with uploaded image layer. */
.hero-water-video,
.hero-water-overlay{
  display: none !important;
}

.home-hero-card{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: rgba(0,0,0,.54) !important;
}

.hero-window-photo,
.hero-photo-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
}

.hero-window-photo{
  z-index:0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity:.72 !important;
  filter: brightness(.78) contrast(1.18) saturate(1.08) !important;
}

.hero-photo-overlay{
  z-index:1 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.76) 52%, rgba(0,0,0,.50) 100%),
    radial-gradient(circle at 30% 18%, rgba(216,181,66,.13), transparent 24rem) !important;
}

.home-hero-card > :not(.hero-window-photo):not(.hero-photo-overlay){
  position:relative !important;
  z-index:2 !important;
}

/* Make the top tabs clear and large on laptop/desktop. */
.topbar{
  min-height: 104px !important;
}

.logo-link img,
.topbar .logo-link img{
  width: 118px !important;
  max-width: 118px !important;
}

.main-nav a{
  min-height: 66px !important;
  padding: 1rem clamp(1.25rem, 1.45vw, 2rem) !important;
  font-size: clamp(1.18rem, 0.42vw + 1.02rem, 1.48rem) !important;
}

/* Add the AI character to page backgrounds without changing box widths or text layout. */
main{
  position: relative;
  isolation: isolate;
}

.page-hero,
.page-section,
.page-cta{
  position: relative !important;
  overflow: hidden !important;
}

.page-hero::after,
.page-section::after,
.page-cta::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.26)),
    url("/assets/images/simon-bg.jpg") right center / min(52vw, 780px) auto no-repeat;
  opacity:.18;
  filter:saturate(.95) brightness(.9);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, black 70%, black 100%);
}

.page-hero > *,
.page-section > *,
.page-cta > *{
  position:relative !important;
  z-index:1 !important;
}

/* Prevent any background artwork from squeezing content boxes. */
.page-hero,
.page-section,
.page-cta,
.card,
.service-page-card,
.calculator,
.enquiry-form{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media(max-width:1180px){
  .logo-link img,
  .topbar .logo-link img{
    width: 76px !important;
    max-width: 76px !important;
  }

  .main-nav a{
    min-height:54px !important;
    font-size: clamp(.9rem, .3vw + .84rem, 1.05rem) !important;
    padding:.78rem .85rem !important;
  }

  .page-hero::after,
  .page-section::after,
  .page-cta::after{
    opacity:.12;
    background-size: min(80vw, 650px) auto;
  }
}

@media(max-width:760px){
  .logo-link img,
  .topbar .logo-link img{
    width:60px !important;
    max-width:60px !important;
  }

  .hero-window-photo{
    opacity:.42 !important;
    object-position:center center !important;
  }

  .page-hero::after,
  .page-section::after,
  .page-cta::after{
    opacity:.08;
    background-size: 120vw auto;
    background-position:right top;
  }
}


/* HARD FORCE IMAGE BEHIND FIRST WELCOME BOX - FINAL UPLOAD */
.home-hero-card{
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.76) 52%, rgba(0,0,0,.50) 100%),
    url("/assets/images/water-fed-pole-system.webp") center center / cover no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.home-hero-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:url("/assets/images/water-fed-pole-system.webp") center center / cover no-repeat !important;
  opacity:.52 !important;
  filter:brightness(.82) contrast(1.18) saturate(1.08) !important;
}

.hero-window-photo{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:.58 !important;
  filter:brightness(.82) contrast(1.18) saturate(1.08) !important;
  pointer-events:none !important;
}

.hero-photo-overlay{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.76) 52%, rgba(0,0,0,.50) 100%),
    radial-gradient(circle at 30% 18%, rgba(216,181,66,.13), transparent 24rem) !important;
}

.home-hero-card > :not(.hero-window-photo):not(.hero-photo-overlay){
  position:relative !important;
  z-index:2 !important;
}

.hero-water-video,
.hero-water-overlay{
  display:none !important;
}

/* Make it obvious the correct build is loaded: multi-page layout, no old one-page service block styling dominance. */
.home-hero-card h1{
  font-size: clamp(4.45rem, 5.7vw, 7.8rem) !important;
}

@media(max-width:760px){
  .home-hero-card::before,
  .hero-window-photo{
    opacity:.36 !important;
  }
}


/* CLEAN NO PHOTO / NO VIDEO FINAL
   Removes all first-box photo/video layers and returns the welcome box to a clean premium dark design. */

.home-hero-card{
  background:
    radial-gradient(circle at 20% 12%, rgba(216,181,66,.16), transparent 18rem),
    linear-gradient(145deg, rgba(9,9,7,.96), rgba(0,0,0,.88)) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.home-hero-card::before,
.home-hero-card::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

.hero-water-video,
.hero-water-overlay,
.hero-window-photo,
.hero-photo-overlay{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.home-hero-card > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Keep the main page AI background outside the welcome box only. */
.home-hero .hero-image-bg{
  display: block !important;
}

/* Ensure top tabs remain large and clear. */
.topbar{
  min-height: 104px !important;
  padding: 0.85rem clamp(1.4rem, 3.4vw, 4.8rem) !important;
}

.logo-link img,
.topbar .logo-link img{
  width: 118px !important;
  max-width: 118px !important;
}

.main-nav a{
  min-height: 66px !important;
  padding: 1rem clamp(1.25rem, 1.45vw, 2rem) !important;
  font-size: clamp(1.18rem, 0.42vw + 1.02rem, 1.48rem) !important;
}

@media(max-width:1180px){
  .logo-link img,
  .topbar .logo-link img{
    width: 76px !important;
    max-width: 76px !important;
  }

  .main-nav a{
    min-height:54px !important;
    font-size: clamp(.9rem, .3vw + .84rem, 1.05rem) !important;
    padding:.78rem .85rem !important;
  }
}

@media(max-width:760px){
  .logo-link img,
  .topbar .logo-link img{
    width:60px !important;
    max-width:60px !important;
  }
}


/* BALANCED TEXT + BIGGER SMOOTH BUTTONS FINAL
   Keeps the clean layout, makes text slightly calmer, and makes buttons bigger so text has room. */

body{
  font-size: clamp(17px, .25vw + 15.5px, 20px) !important;
}

p,
li,
label,
input,
select,
textarea,
summary{
  font-size: clamp(1rem, .24vw + .94rem, 1.14rem) !important;
  line-height: 1.58 !important;
}

.card p,
.section-title p:not(.kicker),
.calc-copy,
.form-note,
.result-box p,
.footer p,
.service-page-card p{
  font-size: clamp(.98rem, .22vw + .92rem, 1.1rem) !important;
  line-height: 1.6 !important;
}

/* Top navigation: clear, smooth, and large enough for the text. */
.topbar{
  min-height: 96px !important;
  padding: .82rem clamp(1.25rem, 3vw, 4.2rem) !important;
}

.logo-link img,
.topbar .logo-link img{
  width: 98px !important;
  max-width: 98px !important;
}

.main-nav{
  gap: clamp(.8rem, 1.05vw, 1.45rem) !important;
}

.main-nav a{
  min-height: 64px !important;
  padding: 1rem clamp(1.25rem, 1.25vw, 1.7rem) !important;
  font-size: clamp(1rem, .3vw + .92rem, 1.18rem) !important;
  line-height: 1.15 !important;
  border-radius: 999px !important;
}

/* Hero text reduced slightly from the oversized version. */
.home-hero{
  min-height: calc(100svh - 96px) !important;
}

.home-hero-card{
  width: min(54vw, 980px) !important;
  min-width: min(760px, calc(100vw - 3rem)) !important;
  padding: clamp(2.7rem, 3.8vw, 5rem) !important;
}

.home-hero-card h1,
h1{
  font-size: clamp(3.65rem, 4.8vw, 6.55rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -.045em !important;
}

.hero-intro{
  font-size: clamp(1.15rem, .36vw + 1rem, 1.38rem) !important;
  line-height: 1.55 !important;
  max-width: 780px !important;
}

.kicker{
  font-size: clamp(.82rem, .2vw + .76rem, .98rem) !important;
  letter-spacing: .15em !important;
}

/* Bigger, smoother buttons: more height, more side padding, no cramped text. */
.button,
.tab,
button{
  min-height: 66px !important;
  padding: 1.05rem 1.45rem !important;
  font-size: clamp(.98rem, .24vw + .9rem, 1.12rem) !important;
  line-height: 1.16 !important;
  border-radius: 999px !important;
  white-space: normal !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    filter .22s ease !important;
  will-change: transform, box-shadow, filter;
}

/* Hero buttons get extra room because there are four in a row. */
.hero-actions{
  gap: 1rem !important;
}

.hero-actions .button{
  min-height: 68px !important;
  padding: 1.05rem .95rem !important;
  font-size: clamp(.92rem, .18vw + .88rem, 1.04rem) !important;
  line-height: 1.16 !important;
  flex: 1 1 0 !important;
}

/* Quote/send buttons can be wider/taller. */
.enquiry-form .button,
.page-cta .button,
.payment-card .button,
.quick-links a{
  min-height: 68px !important;
  padding: 1.1rem 1.55rem !important;
}

/* Smooth hover/press state. */
.button:hover,
.main-nav a:hover,
.tab:hover,
.quick-links a:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

.button:active,
.main-nav a:active,
.tab:active,
.quick-links a:active{
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.98) !important;
}

.button.primary:hover,
.main-nav .nav-cta:hover,
.tab.active:hover{
  box-shadow: 0 16px 38px rgba(216,181,66,.30) !important;
}

.button.secondary:hover{
  border-color: rgba(255,240,156,.84) !important;
  box-shadow: 0 16px 38px rgba(216,181,66,.17) !important;
}

.button.whatsapp:hover{
  box-shadow: 0 16px 38px rgba(82,196,124,.25) !important;
}

.button.gocardless:hover{
  box-shadow: 0 16px 38px rgba(50,120,255,.25) !important;
}

/* Price cards reduced slightly but still strong. */
.big-key-card{
  min-height: 150px !important;
  padding: 1.55rem !important;
}

.big-key-card strong{
  font-size: clamp(2.7rem, 3vw, 4rem) !important;
}

.big-key-card span{
  font-size: clamp(1.05rem, .34vw + .94rem, 1.28rem) !important;
  line-height: 1.22 !important;
}

/* Page headings reduced slightly. */
h2{
  font-size: clamp(2.1rem, 2.8vw, 3.8rem) !important;
  line-height: 1.06 !important;
}

h3,
.card h3,
.service-page-card h3{
  font-size: clamp(1.35rem, .8vw + 1rem, 1.85rem) !important;
  line-height: 1.16 !important;
}

/* Forms still readable, not oversized. */
input,
select,
textarea{
  min-height: 62px !important;
  padding: .95rem 1rem !important;
  font-size: clamp(1rem, .24vw + .95rem, 1.16rem) !important;
}

textarea{
  min-height: 210px !important;
}

.result-box strong{
  font-size: clamp(3.2rem, 4.2vw, 5rem) !important;
}

/* Medium screens: stop nav/buttons feeling squeezed. */
@media(max-width:1180px){
  .topbar{
    min-height: 82px !important;
  }

  .logo-link img,
  .topbar .logo-link img{
    width: 70px !important;
    max-width: 70px !important;
  }

  .main-nav{
    gap: .5rem !important;
  }

  .main-nav a{
    min-height: 52px !important;
    font-size: clamp(.84rem, .25vw + .78rem, .98rem) !important;
    padding: .78rem .88rem !important;
  }

  .home-hero-card{
    width: min(62vw, 820px) !important;
    min-width: min(640px, calc(100vw - 3rem)) !important;
  }

  .home-hero-card h1,
  h1{
    font-size: clamp(3rem, 5.2vw, 5rem) !important;
  }

  .hero-actions{
    flex-wrap: wrap !important;
  }

  .hero-actions .button{
    flex: 1 1 calc(50% - .5rem) !important;
    min-height: 62px !important;
    padding: .95rem 1rem !important;
  }
}

/* Mobile: keep the buttons big enough for fingers and text. */
@media(max-width:760px){
  .topbar{
    min-height: 70px !important;
    padding: .7rem 1rem !important;
  }

  .logo-link img,
  .topbar .logo-link img{
    width: 58px !important;
    max-width: 58px !important;
  }

  .main-nav a{
    min-height: 56px !important;
    padding: .9rem 1rem !important;
    font-size: 1rem !important;
  }

  .home-hero-card{
    width: 100% !important;
    min-width: 0 !important;
    padding: 1.2rem !important;
  }

  .home-hero-card h1,
  h1{
    font-size: clamp(2.05rem, 8.2vw, 2.82rem) !important;
    line-height: 1.08 !important;
  }

  .hero-intro{
    font-size: 1.02rem !important;
  }

  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .button,
  .hero-actions .button,
  .tab{
    width: 100% !important;
    min-height: 58px !important;
    padding: .95rem 1rem !important;
    font-size: 1rem !important;
  }

  .big-key-card{
    min-height: 104px !important;
  }

  .big-key-card strong{
    font-size: 2.35rem !important;
  }

  .big-key-card span{
    font-size: 1.05rem !important;
  }
}


/* CALL BUTTON + CONTACT TAB UPDATE */
.main-nav{
  gap: clamp(.55rem, .8vw, 1rem) !important;
}

.main-nav a{
  min-height: 62px !important;
  padding: .95rem clamp(.9rem, 1vw, 1.35rem) !important;
  font-size: clamp(.92rem, .24vw + .86rem, 1.08rem) !important;
}

.main-nav .nav-cta{
  min-width: 92px !important;
}

.hero-actions .button[href^="tel:"],
.contact-actions .button[href^="tel:"]{
  min-width: 140px !important;
}

.contact-page-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .7fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
}

.contact-detail-list{
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}

.contact-detail-list p{
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
}

.contact-detail-list strong{
  color: var(--gold2);
}

.contact-detail-list a{
  color: var(--text);
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.contact-actions{
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
}

.contact-actions .button{
  flex: 1 1 160px;
}

.contact-small-note{
  margin-top: 1rem;
  color: var(--muted);
}

@media(max-width:1180px){
  .main-nav a{
    min-height: 52px !important;
    font-size: clamp(.78rem, .22vw + .74rem, .92rem) !important;
    padding: .75rem .72rem !important;
  }

  .main-nav .nav-cta{
    min-width: 74px !important;
  }

  .contact-page-layout{
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:760px){
  .main-nav a{
    min-height: 56px !important;
    font-size: 1rem !important;
    padding: .9rem 1rem !important;
  }

  .contact-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* FOOTER STACKED TEXT UPDATE
   Puts the service area line directly above the all-rights-reserved line. */
.footer{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  text-align: left !important;
}

.footer-copy{
  display: flex !important;
  flex-direction: column !important;
  gap: .15rem !important;
}

.footer-service-area,
.footer-rights{
  margin: 0 !important;
  line-height: 1.35 !important;
}

.footer-service-area{
  color: var(--muted) !important;
  font-weight: 700 !important;
}

.footer-rights{
  color: rgba(255,250,240,.72) !important;
  font-size: .95rem !important;
}

@media(max-width:760px){
  .footer{
    display: block !important;
    text-align: center !important;
  }

  .footer img{
    margin: 0 auto 1rem !important;
  }

  .footer-copy{
    align-items: center !important;
  }
}


/* MOBILE MENU ALIGNMENT FIX
   Centres the three hamburger lines properly inside the mobile menu button. */
@media(max-width:760px){
  .menu-toggle{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 54px !important;
    height: 46px !important;
    min-width: 54px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border: 1.5px solid var(--line2) !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,.42) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
    line-height: 1 !important;
  }

  .menu-toggle span{
    display: block !important;
    width: 25px !important;
    height: 2.5px !important;
    min-height: 2.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--gold2) !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  .topbar{
    align-items: center !important;
  }

  .topbar.nav-open .menu-toggle span:nth-child(1){
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  .topbar.nav-open .menu-toggle span:nth-child(2){
    opacity: 0 !important;
  }

  .topbar.nav-open .menu-toggle span:nth-child(3){
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }
}


/* FOOTER FULLY CENTERED UPDATE
   Centres the logo and both footer text lines properly across the page. */
.footer{
  width: min(calc(100% - 3rem), var(--max)) !important;
  margin: 4rem auto 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .85rem !important;
  text-align: center !important;
}

.footer img{
  width: 62px !important;
  max-width: 62px !important;
  margin: 0 auto !important;
  display: block !important;
  border-radius: 8px !important;
}

.footer-copy{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .25rem !important;
  width: 100% !important;
  text-align: center !important;
}

.footer-service-area,
.footer-rights,
.footer p{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

.footer-service-area{
  color: var(--muted) !important;
  font-weight: 800 !important;
  font-size: clamp(1rem, .25vw + .95rem, 1.15rem) !important;
}

.footer-rights{
  color: rgba(255,250,240,.72) !important;
  font-size: clamp(.92rem, .2vw + .86rem, 1.05rem) !important;
}

@media(max-width:760px){
  .footer{
    width: calc(100% - 1.4rem) !important;
    margin-top: 2.5rem !important;
  }

  .footer img{
    width: 58px !important;
    max-width: 58px !important;
  }
}


/* MOBILE CONTACT PAGE FIT FIX
   Stops contact details, email address and boxes overflowing on phone screens. */

/* Desktop/tablet still keeps the contact layout clean. */
.contact-page-layout{
  width: min(calc(100% - clamp(2rem,4vw,5rem)), var(--max)) !important;
  max-width: var(--max) !important;
  overflow: hidden !important;
}

.contact-card{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.contact-detail-list,
.contact-detail-list p,
.contact-detail-list a,
.contact-detail-list strong{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.contact-detail-list p{
  box-sizing: border-box !important;
}

/* Phone-specific correction. */
@media(max-width:760px){
  .contact-page-layout{
    width: calc(100% - 1.4rem) !important;
    max-width: calc(100% - 1.4rem) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    overflow: hidden !important;
  }

  .contact-card,
  .contact-page-layout .card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 1rem !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .contact-card h2,
  .contact-page-layout h2{
    font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 1rem !important;
  }

  .contact-detail-list{
    gap: .8rem !important;
    margin: 1rem 0 1.25rem !important;
    width: 100% !important;
  }

  .contact-detail-list p{
    width: 100% !important;
    max-width: 100% !important;
    padding: .95rem !important;
    border-radius: 15px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  .contact-detail-list strong{
    display: block !important;
    margin-bottom: .35rem !important;
    font-size: 1rem !important;
  }

  .contact-detail-list a{
    display: inline-block !important;
    max-width: 100% !important;
    font-size: clamp(.92rem, 4.2vw, 1.05rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .contact-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    width: 100% !important;
  }

  .contact-actions .button{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: .95rem 1rem !important;
    font-size: 1rem !important;
  }

  /* Remove the faint AI overlay from the contact boxes on mobile; it makes the page look busy. */
  .contact-page-layout::after,
  .contact-page-layout .card::after{
    content: none !important;
    display: none !important;
  }

  .page-hero.compact h1{
    font-size: clamp(2rem, 8.2vw, 2.75rem) !important;
  }
}


/* REMOVE CUSTOMER-UNNEEDED INTERNAL PAGE SUBTEXT + SMALL FOOTER RIGHTS
   Hides the short explanatory line under internal page heading boxes
   and makes the all-rights-reserved line small across every page. */

/* Hide the paragraph under internal page hero headings, e.g.
   Services: "Separate service pages..."
   FAQ: "All FAQ boxes..."
   Contact/Quote/Area/Payments service-page intros too. */
.page-hero.compact > p:not(.kicker){
  display: none !important;
}

/* Tighten page heading boxes now that the extra line is gone. */
.page-hero.compact{
  padding-top: clamp(2rem, 2.8vw, 3.4rem) !important;
  padding-bottom: clamp(2rem, 2.8vw, 3.4rem) !important;
}

.page-hero.compact h1{
  margin-bottom: 0 !important;
}

/* Keep footer service area visible, but make legal line smaller. */
.footer-service-area{
  font-size: clamp(.95rem, .2vw + .9rem, 1.08rem) !important;
  line-height: 1.32 !important;
}

.footer-rights{
  font-size: clamp(.72rem, .16vw + .66rem, .82rem) !important;
  line-height: 1.25 !important;
  opacity: .74 !important;
  font-weight: 500 !important;
}

@media(max-width:760px){
  .page-hero.compact{
    padding-top: 1.15rem !important;
    padding-bottom: 1.15rem !important;
  }

  .footer-service-area{
    font-size: .9rem !important;
  }

  .footer-rights{
    font-size: .72rem !important;
  }
}