/* Stunning homepage-only redesign for langleysepticservice.ca — 2026-05-21 */
:root {
  --lux-ink: #071018;
  --lux-ink-2: #10251f;
  --lux-cream: #fbfff9;
  --lux-mist: #edf8f2;
  --lux-card: rgba(255, 255, 255, 0.88);
  --lux-line: rgba(31, 77, 65, 0.12);
  --lux-line-dark: rgba(255, 255, 255, 0.16);
  --lux-mint: #7bd6c0;
  --lux-lime: #d9f267;
  --lux-teal: #21a986;
  --lux-blue: #48b8ff;
  --lux-warning: #c4513a;
  --lux-shadow: 0 30px 90px rgba(7, 16, 24, 0.18);
  --lux-shadow-soft: 0 18px 54px rgba(31, 77, 65, 0.12);
  --lux-radius-xl: 34px;
  --lux-radius: 24px;
  --lux-radius-sm: 16px;
}

body.home-stunning {
  background:
    radial-gradient(circle at 8% -4%, rgba(123, 214, 192, .24), transparent 34rem),
    radial-gradient(circle at 96% 8%, rgba(217, 242, 103, .16), transparent 34rem),
    linear-gradient(180deg, #f8fdfa 0%, #eef9f3 38%, #ffffff 100%);
}

.home-stunning .container { width: min(calc(100% - 2rem), 1180px); }
.home-stunning .site-header { z-index: 50; }
.home-stunning .site-nav a:not(.button) { font-size: .95rem; }
.home-stunning .topbar__inner { justify-content: center; text-align: center; }
.home-stunning .topbar__actions { display: none !important; }

.lux-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 700px;
  padding: clamp(4.2rem, 6.4vw, 7.4rem) 0 clamp(4.4rem, 5.7vw, 6.5rem);
  color: #f8fff9;
  background:
    linear-gradient(90deg, rgba(7, 16, 24, .98) 0%, rgba(7, 16, 24, .84) 44%, rgba(7, 16, 24, .48) 100%),
    radial-gradient(circle at 75% 18%, rgba(123, 214, 192, .24), transparent 34rem),
    linear-gradient(135deg, #071018 0%, #0c211b 56%, #143b30 100%);
}
.lux-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url('/assets/img/langley-contours.svg');
  background-size: cover;
  background-position: center;
  opacity: .46;
  mix-blend-mode: screen;
}
.lux-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -34% -12%;
  height: 54%;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 28px);
  transform: skewY(-4deg);
}
.lux-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(2rem, 4.4vw, 5rem);
  align-items: center;
}
.lux-kicker {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.15rem;
  padding: .58rem .82rem;
  border: 1px solid rgba(217, 242, 103, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--lux-lime);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 14px 44px rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
}
.lux-kicker::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--lux-lime);
  box-shadow: 0 0 0 6px rgba(217, 242, 103, .13), 0 0 34px rgba(217, 242, 103, .55);
}
.lux-hero h1 {
  max-width: 12.5ch;
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: clamp(3.05rem, 6.9vw, 6.8rem);
  line-height: .89;
  letter-spacing: -.085em;
  text-wrap: balance;
  text-shadow: 0 26px 82px rgba(0,0,0,.5);
}
.lux-gradient-text {
  background: linear-gradient(90deg, #fff 0%, #e9fff2 44%, var(--lux-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lux-hero__lede {
  max-width: 59ch;
  margin-bottom: 1.55rem;
  color: rgba(248, 255, 249, .82);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.62;
}
.lux-hero__actions, .lux-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
  margin: 1.65rem 0;
}
.lux-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .92rem 1.18rem;
  border: 1px solid transparent;
  border-radius: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(123, 214, 192, .25);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.lux-button:hover { transform: translateY(-2px); }
.lux-button--primary {
  background: linear-gradient(135deg, var(--lux-lime) 0%, var(--lux-mint) 48%, var(--lux-teal) 100%);
  color: var(--lux-ink);
  box-shadow: 0 20px 50px rgba(21, 127, 103, .3), inset 0 0 0 1px rgba(255,255,255,.45);
}
.lux-button--ghost {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px);
}
.lux-button--dark {
  background: linear-gradient(135deg, #071018, #17392f);
  color: #fff;
  box-shadow: 0 20px 50px rgba(7, 16, 24, .22);
}
.lux-button--light {
  background: #fff;
  color: var(--lux-ink);
}
.lux-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .78rem;
  max-width: 720px;
  margin-top: 2rem;
}
.lux-proof {
  padding: .98rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.075);
  color: rgba(248,255,249,.78);
  backdrop-filter: blur(16px);
}
.lux-proof strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: .2rem;
}

.lux-visual {
  position: relative;
  min-height: 560px;
}
.lux-visual__main {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--lux-radius-xl);
  background: #071018;
  box-shadow: 0 40px 110px rgba(0,0,0,.42);
}
.lux-visual__main img {
  width: 100%;
  min-height: 500px;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.08) brightness(.95);
}
.lux-visual__main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 34%, rgba(7,16,24,.1) 58%, rgba(7,16,24,.88) 100%),
    radial-gradient(circle at 12% 12%, rgba(217,242,103,.20), transparent 20rem);
}
.lux-visual__caption {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 2;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(7,16,24,.62);
  backdrop-filter: blur(18px);
}
.lux-visual__caption strong { display:block; color:#fff; font-size:1.12rem; margin-bottom:.25rem; }
.lux-visual__caption span { color: rgba(248,255,249,.74); }
.lux-float-card {
  position: absolute;
  z-index: 3;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.lux-float-card strong { display:block; font-size:1.35rem; line-height:1; color: var(--lux-lime); }
.lux-float-card span { color: rgba(248,255,249,.82); font-size:.88rem; }
.lux-float-card--rating { top: 1.1rem; left: 1.1rem; }
.lux-float-card--dispatch { right: 1.1rem; top: 1.1rem; }
.lux-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  scroll-margin-top: 112px;
}
.lux-heading h2[id],
.lux-final-cta[id] {
  scroll-margin-top: 112px;
}
.lux-section--tight { padding-top: clamp(3rem, 5vw, 5rem); }
.lux-section--dark {
  position: relative;
  overflow: hidden;
  color: #f8fff9;
  background:
    radial-gradient(circle at 12% 8%, rgba(217,242,103,.13), transparent 28rem),
    radial-gradient(circle at 86% 10%, rgba(123,214,192,.18), transparent 34rem),
    linear-gradient(135deg, #071018 0%, #10251f 62%, #163f34 100%);
}
.lux-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/langley-contours.svg');
  background-size: cover;
  opacity: .16;
  mix-blend-mode: screen;
}
.lux-section--dark > .container { position: relative; z-index: 1; }
.lux-heading { max-width: 800px; margin-bottom: clamp(2rem, 3.6vw, 3.2rem); }
.lux-heading--split {
  display: grid;
  grid-template-columns: 1fr minmax(280px, .62fr);
  gap: 2rem;
  align-items: end;
  max-width: none;
}
.lux-heading h2 {
  margin: 0;
  color: var(--lux-ink);
  font-size: clamp(2.2rem, 4.5vw, 4.65rem);
  line-height: .94;
  letter-spacing: -.07em;
  text-wrap: balance;
}
.lux-section--dark .lux-heading h2 { color: #fff; }
.lux-heading p { margin-top: 1rem; color: #587067; font-size: 1.08rem; line-height: 1.7; }
.lux-section--dark .lux-heading p { color: rgba(248,255,249,.74); }

.lux-trust-band {
  position: relative;
  z-index: 6;
  margin-top: -2.2rem;
}
.lux-trust-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .92rem;
}
.lux-mini-card, .lux-card, .lux-review, .lux-faq details {
  border: 1px solid var(--lux-line);
  border-radius: var(--lux-radius);
  background: rgba(255,255,255,.88);
  box-shadow: var(--lux-shadow-soft);
  backdrop-filter: blur(18px);
}
.lux-mini-card { padding: 1.1rem; }
.lux-mini-card strong { display:block; color: var(--lux-ink); margin-bottom:.25rem; }
.lux-mini-card span { color:#587067; font-size:.95rem; }

.lux-bento {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 1rem;
  align-items: stretch;
}
.lux-bento__main, .lux-bento__stack figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--lux-radius-xl);
  background: #071018;
  box-shadow: var(--lux-shadow-soft);
}
.lux-bento__main img, .lux-bento__stack img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.lux-bento__main { min-height: 560px; }
.lux-bento__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.lux-bento__stack figure { min-height: 270px; }
.lux-photo-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.15rem 1.15rem 1rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(7,16,24,0), rgba(7,16,24,.62) 46%, rgba(7,16,24,.88));
  color: rgba(248,255,249,.82);
  pointer-events: none;
}
.lux-photo-label strong { display:block; color:#fff; margin-bottom:.16rem; }
.lux-photo-label span { display:block; max-width: 42rem; }

.lux-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.lux-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.08rem;
  background: linear-gradient(180deg, #fff, #fbfffd);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lux-card:hover { transform: translateY(-4px); box-shadow: 0 28px 76px rgba(31,77,65,.16); }
.lux-card__image {
  position: relative;
  overflow: hidden;
  margin: -.2rem -.2rem 1rem;
  border-radius: 20px;
  background: #e8f5ef;
  aspect-ratio: 1.25 / 1;
}
.lux-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.04); }
.lux-card__number {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 14px;
  background: rgba(7,16,24,.72);
  color: var(--lux-lime);
  font-weight: 900;
  backdrop-filter: blur(12px);
}
.lux-card h3 { margin: 0 0 .55rem; color: var(--lux-ink); font-size: 1.22rem; line-height: 1.12; letter-spacing: -.035em; }
.lux-card p { color: #587067; margin-bottom: 1rem; }
.lux-card ul { list-style: none; padding: 0; margin: 0 0 1rem; display:grid; gap:.48rem; }
.lux-card li { position: relative; padding-left: 1.1rem; color: #587067; font-size: .94rem; }
.lux-card li::before { content:""; position:absolute; left:0; top:.55rem; width:.42rem; height:.42rem; border-radius:50%; background: var(--lux-teal); }
.lux-card__link { margin-top: auto; color: var(--lux-ink-2); font-weight: 900; }

.lux-emergency-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 1.2rem;
  align-items: stretch;
}
.lux-emergency-panel {
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border: 1px solid var(--lux-line-dark);
  border-radius: var(--lux-radius-xl);
  background: rgba(255,255,255,.08);
  box-shadow: 0 28px 82px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
}
.lux-emergency-panel h3 { margin-top:0; color:#fff; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height:1; letter-spacing:-.04em; }
.lux-emergency-list { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.78rem; }
.lux-emergency-list li { padding: .85rem .9rem; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.07); color:rgba(248,255,249,.82); }
.lux-process { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.lux-process__step { padding: 1.25rem; border:1px solid rgba(255,255,255,.13); border-radius: 22px; background:rgba(255,255,255,.08); }
.lux-process__step span { display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; margin-bottom:1rem; border-radius:14px; background: var(--lux-lime); color: var(--lux-ink); font-weight:900; }
.lux-process__step h3 { color:#fff; margin-bottom:.55rem; }
.lux-process__step p { color:rgba(248,255,249,.74); }

.lux-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.lux-review { padding: 1.35rem; }
.lux-review blockquote { margin: 0; color: var(--lux-ink); font-size: 1.04rem; line-height:1.55; }
.lux-review figcaption { margin-top: .95rem; color: #587067; font-weight: 800; }
.lux-rating-panel {
  grid-row: span 2;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  color: #f8fff9;
  border-radius: var(--lux-radius-xl);
  background:
    radial-gradient(circle at 20% 0%, rgba(217,242,103,.18), transparent 18rem),
    linear-gradient(135deg, #071018, #183f34);
  box-shadow: var(--lux-shadow);
}
.lux-rating-panel strong { display:block; color:var(--lux-lime); font-size: clamp(3.4rem, 7vw, 6rem); line-height:.85; letter-spacing:-.08em; }
.lux-rating-panel span { color: rgba(248,255,249,.78); }
.lux-rating-panel p { color: rgba(248,255,249,.82); font-size:1.08rem; }

.lux-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .82rem;
}
.lux-area-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .95rem 1rem;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid var(--lux-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 34px rgba(31,77,65,.08);
  color: var(--lux-ink-2);
  font-weight: 800;
}
.lux-faq { display:grid; gap:.85rem; }
.lux-faq details { padding: 1.08rem 1.18rem; }
.lux-faq summary { cursor:pointer; color:var(--lux-ink); font-weight:900; }
.lux-faq p { color:#587067; margin-top:.82rem; }

.lux-final-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--lux-radius-xl);
  color: #fff;
  background:
    radial-gradient(circle at 80% 0%, rgba(217,242,103,.20), transparent 24rem),
    linear-gradient(135deg, #071018 0%, #12382c 58%, #21a986 100%);
  box-shadow: var(--lux-shadow);
}
.lux-final-cta::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:url('/assets/img/langley-contours.svg'); background-size:cover; opacity:.18; mix-blend-mode:screen; }
.lux-final-cta__inner { position:relative; z-index:1; display:grid; grid-template-columns: 1fr auto; gap:1.2rem; align-items:center; }
.lux-final-cta h2 { margin:0; max-width: 13ch; color:#fff; font-size:clamp(2.4rem,5vw,4.8rem); line-height:.9; letter-spacing:-.08em; }
.lux-final-cta p { color:rgba(248,255,249,.78); max-width:56ch; }

@media (forced-colors: active) {
  .lux-gradient-text {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    background: none;
  }
  .lux-button--primary, .lux-process__step span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media (max-width: 1050px) {
  .lux-hero__grid, .lux-heading--split, .lux-bento, .lux-emergency-grid, .lux-final-cta__inner { grid-template-columns: 1fr; }
  .lux-visual { min-height: auto; max-width: 680px; margin-inline: auto; }
  .lux-float-card--rating { left: 1rem; }
  .lux-float-card--dispatch { right: 1rem; }
  .lux-bento__main { min-height: 520px; }
  .lux-bento__stack figure { min-height: 250px; }
  .lux-services, .lux-trust-band__grid, .lux-areas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lux-hero { min-height: auto; padding-top: 3.2rem; }
  .lux-hero h1 { font-size: clamp(3rem, 16vw, 4.7rem); max-width: 11ch; }
  .lux-hero__actions, .lux-action-row { display:grid; }
  .lux-button { width:100%; }
  .lux-proof-row, .lux-services, .lux-trust-band__grid, .lux-process, .lux-reviews-grid, .lux-areas { grid-template-columns: 1fr; }
  .lux-proof-row { gap: .9rem; }
  .lux-proof {
    display: grid;
    grid-template-columns: 1.45rem 1fr;
    column-gap: .7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .lux-proof::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    margin-top: .08rem;
    border-radius: 999px;
    background: rgba(217, 242, 103, .18);
    color: var(--lux-lime);
    font-size: .9rem;
    font-weight: 900;
  }
  .lux-proof strong { margin-bottom: .1rem; }
  .lux-proof span { grid-column: 2; color: rgba(248,255,249,.72); }
  .lux-visual__main img { min-height: 390px; }
  .lux-float-card { position: static; margin-top: .8rem; }
  .lux-bento__main { min-height: 390px; }
  .lux-bento__stack figure { min-height: 240px; }
  .lux-section { padding: 3.6rem 0; }
  .lux-heading h2, .lux-final-cta h2 { letter-spacing: -.065em; }
}