/* ==========================================================
   Maintenance Dubai — base stylesheet
   Brand colours live in :root — change them here once the
   name/logo is finalised and the whole site follows.
   ========================================================== */

:root {
  --ink: #0f1a1c;
  --ink-soft: #4a5759;
  --muted: #7b8789;
  --line: #e4e9ea;
  --bg: #ffffff;
  --bg-soft: #f5f7f7;
  --accent: #0e7c6b;        /* primary brand colour */
  --accent-dark: #0a5f52;
  --accent-tint: #e6f3f0;
  --warm: #f2b33d;          /* small highlight colour */

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 26, 28, .04), 0 8px 24px rgba(15, 26, 28, .06);
  --max: 1160px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0 0 1em; color: var(--ink-soft); }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 620px; margin-bottom: 48px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

h1 { font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 19px; }

.lead { font-size: 18px; max-width: 560px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  font-family: inherit;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--accent-dark); }
.btn--light:hover { transform: translateY(-1px); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.is-scrolled { border-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo__mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent);
  display: grid; place-items: center;
}
.logo__mark svg { width: 18px; height: 18px; color: #fff; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: color .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav .btn { padding: 11px 20px; }

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 96px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.hero h1 span { color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 40px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 28px; }
.hero__trust div { font-size: 14px; color: var(--muted); }
.hero__trust strong { display: block; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }

.hero__card {
  position: relative;
  background: var(--accent);
  border-radius: 24px;
  padding: 36px;
  color: #fff;
  overflow: hidden;
  min-height: 440px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.hero__card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.18) 0, transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);
}
.hero__illustration { align-self: flex-end; width: 44%; max-width: 220px; opacity: .95; }
.hero__card > * { position: relative; }
.hero__card h3, .hero__card h2 { color: #fff; font-size: 22px; margin-bottom: 18px; }
.check-list li { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-weight: 500; }
.check-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--warm); }

/* ---------- Services ---------- */
.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
.card p { font-size: 15px; margin: 0; }
.card h3 { margin-top: 20px; }

.icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid; place-items: center;
}
.icon svg { width: 24px; height: 24px; }

.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--accent); }
.card__link svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .card__link svg { transform: translateX(3px); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 28px; border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 14px;
}
.step p { font-size: 15px; }

/* ---------- Split / features ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-list { display: grid; gap: 24px; margin-top: 32px; }
.feature { display: flex; gap: 16px; }
.feature .icon { flex-shrink: 0; width: 42px; height: 42px; }
.feature .icon svg { width: 20px; height: 20px; }
.feature h4, .feature h3 { font-size: 17px; margin-bottom: 4px; }
.feature p { font-size: 15px; margin: 0; }

.stat-panel {
  background: var(--ink);
  border-radius: 24px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  color: #fff;
}
.stat-panel strong { display: block; font-size: 44px; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.stat-panel span { color: rgba(255,255,255,.65); font-size: 15px; }

/* ---------- Areas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-weight: 700;
  font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; margin: 0; }

/* ---------- CTA band ---------- */
.cta {
  background: var(--accent);
  border-radius: 24px;
  padding: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  color: #fff;
}
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: rgba(255,255,255,.8); margin: 0; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cta .btn--ghost:hover { border-color: #fff; }

/* ---------- Page header (inner pages) ---------- */
.page-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.page-hero p { max-width: 600px; font-size: 18px; margin: 0; }

/* ---------- Service detail rows ---------- */
.service-row {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.service-row .icon { width: 56px; height: 56px; }
.service-row h3 { font-size: 24px; }
.service-row ul li { position: relative; padding: 5px 0 5px 22px; color: var(--ink-soft); font-size: 15px; }
.service-row ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.contact-info { display: grid; gap: 16px; }
.contact-item { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-item small { display: block; color: var(--muted); font-size: 13px; }
.contact-item strong { font-size: 16px; }

.form { background: var(--bg-soft); border-radius: 20px; padding: 36px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.form .btn { width: 100%; justify-content: center; }
.form__note { font-size: 13px; color: var(--muted); text-align: center; margin: 14px 0 0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 72px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer p { color: rgba(255,255,255,.6); font-size: 15px; max-width: 280px; }
.footer h4, .footer__title { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer li { padding: 4px 0; font-size: 15px; }
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; font-size: 14px; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 72px; }
  .hero__grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__card { min-height: 360px; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: flex-start; padding: 44px 28px; }
  .service-row { grid-template-columns: 1fr; gap: 16px; }

  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav .btn { margin-top: 18px; justify-content: center; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .form { padding: 24px; }
  .stat-panel { padding: 32px; gap: 28px; }
  .stat-panel strong { font-size: 36px; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__illustration { width: 46%; }
}

/* ==========================================================
   Banner carousel (home page, under the header)
   ========================================================== */
.carousel {
  --slide-time: 6s;
  position: relative;
  overflow: hidden;
  background: #e6e0d7;
  isolation: isolate;
}
.carousel__track { display: grid; }
.slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.1s ease, visibility 0s; }

.slide__media { overflow: hidden; }
.slide__media img {
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 420px;
  max-height: 620px;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.07);
  transition: transform 7.5s cubic-bezier(.2, .6, .2, 1);
}
.slide.is-active .slide__media img { transform: scale(1); }

.slide__caption { position: absolute; inset: 0; display: flex; align-items: center; padding-bottom: 40px; }
.slide__text { max-width: 470px; }
.slide__text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.slide.is-active .slide__text > * { opacity: 1; transform: none; }
.slide.is-active .slide__text > :nth-child(1) { transition-delay: .25s; }
.slide.is-active .slide__text > :nth-child(2) { transition-delay: .38s; }
.slide.is-active .slide__text > :nth-child(3) { transition-delay: .5s; }
.slide.is-active .slide__text > :nth-child(4) { transition-delay: .62s; }

.slide__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 18px;
}
.slide__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.slide__title {
  font-size: clamp(30px, 3.9vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 16px;
}
.slide__desc { font-size: 17px; color: #4c4a45; max-width: 400px; margin-bottom: 28px; }
.slide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.slide__link { font-size: 15px; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid rgba(15, 26, 28, .3); padding-bottom: 2px; transition: border-color .2s; }
.slide__link:hover { border-color: var(--ink); }

/* Controls */
.carousel__ui { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; pointer-events: none; }
.carousel__ui .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.carousel__ui button { pointer-events: auto; font-family: inherit; cursor: pointer; }

.carousel__dots { display: flex; align-items: center; gap: 10px; }
.carousel__count { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.carousel__count span { color: rgba(15, 26, 28, .45); }
.carousel__dot { width: 44px; height: 20px; padding: 0; border: 0; background: none; display: flex; align-items: center; }
.carousel__dot i { display: block; position: relative; width: 100%; height: 2px; border-radius: 2px; background: rgba(15, 26, 28, .18); overflow: hidden; }
.carousel__dot i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.carousel__dot.is-active i::after { animation: carousel-progress var(--slide-time) linear forwards; }
.carousel.is-paused .carousel__dot.is-active i::after { animation-play-state: paused; }
@keyframes carousel-progress { to { transform: scaleX(1); } }

.carousel__arrows { display: flex; gap: 10px; }
.carousel__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
}
.carousel__arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.carousel__arrow svg { width: 18px; height: 18px; }

@media (max-width: 1000px) {
  .slide { display: flex; flex-direction: column; }
  .slide__media img { aspect-ratio: 16 / 10; min-height: 0; max-height: 380px; object-position: 82% center; }
  .slide__caption { position: static; padding: 32px 0 96px; }
  .slide__text { max-width: 560px; }
  .carousel__ui { bottom: 24px; }
}
@media (max-width: 560px) {
  .slide__desc { font-size: 16px; }
  .carousel__dot { width: 30px; }
  .carousel__arrows { display: none; } /* swipe on phones; keeps clear of the WhatsApp button */
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide__media img, .slide__text > * { transition: none; transform: none; }
  .carousel__dot.is-active i::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================
   Services dropdown (mega menu)
   ========================================================== */
.header__inner { position: relative; }
.nav__item { display: flex; align-items: center; gap: 4px; }
.nav__expand {
  width: 22px; height: 22px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--muted);
  display: grid; place-items: center;
  transition: transform .25s, color .2s;
}
.nav__expand svg { width: 14px; height: 14px; }

.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 20px; right: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 26, 28, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* invisible bridge so the menu doesn't close while the cursor travels down to it */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.mega h5 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.nav__links .mega a {
  display: block;
  padding: 7px 0;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--ink-soft);
  transition: color .15s, transform .15s;
}
.nav__links .mega a:hover { color: var(--accent-dark); transform: translateX(3px); }
.nav__links .mega a.mega__all { margin-top: 10px; font-weight: 700; color: var(--accent); }

@media (min-width: 861px) {
  .has-menu:hover .mega, .has-menu:focus-within .mega, .has-menu.is-open .mega {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .has-menu:hover .nav__expand, .has-menu:focus-within .nav__expand, .has-menu.is-open .nav__expand { transform: rotate(180deg); color: var(--ink); }
  .has-menu:hover > a { color: var(--ink); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .mega { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav { max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav__item > a { flex: 1; border-bottom: 0; }
  .nav__expand { width: 44px; height: 44px; }
  .nav__expand svg { width: 18px; height: 18px; }
  .has-menu.is-open .nav__expand { transform: rotate(180deg); color: var(--ink); }
  .mega {
    position: static;
    display: none;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 4px 0 20px;
    border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .mega::before { display: none; }
  .has-menu.is-open .mega { display: grid; }
  .mega h5 { margin-bottom: 4px; padding-bottom: 8px; }
  .nav__links .mega a { padding: 8px 0; border-bottom: 0; font-size: 15px; }
}

/* Services page: category headings + jump links */
.service-group { padding: 64px 0 8px; scroll-margin-top: 80px; }
.service-group h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.jump a {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s, color .2s;
}
.jump a:hover { border-color: var(--ink); color: var(--ink); }
.section__more { display: flex; justify-content: center; margin-top: 40px; }
.has-menu.is-closing .mega { opacity: 0 !important; visibility: hidden !important; }

/* ==========================================================
   Packages page
   ========================================================== */
.tabs {
  display: flex; width: fit-content; max-width: 100%;
  margin: 0 auto 56px;
  padding: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tabs__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  border: 0; border-radius: 999px;
  background: none;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.tabs__btn svg { width: 18px; height: 18px; }
.tabs__btn.is-active { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(15, 26, 28, .18); }

.tab-panel { animation: panel-in .45s ease; }
.tab-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }

.plans { align-items: stretch; margin-top: 8px; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: box-shadow .25s, transform .25s;
}
.plan:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.plan--featured { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 24px 60px rgba(15, 26, 28, .22); }
.plan__badge {
  position: absolute; top: 20px; right: 20px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--warm); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.plan h3 { font-size: 22px; margin-bottom: 4px; }
.plan__for { font-size: 15px; margin-bottom: 24px; }
.plan__price { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 24px; }
.plan__price small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.plan__price span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.plan .btn { justify-content: center; }
.plan__list { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan__list li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c6b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7L10 16l-4-4'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.plan__list li.is-off { color: var(--muted); text-decoration: line-through; opacity: .7; }
.plan__list li.is-off::before { background: var(--bg-soft); }
.plan--featured .plan__for, .plan--featured .plan__list li { color: rgba(255, 255, 255, .75); }
.plan--featured .plan__price small, .plan--featured .plan__price span { color: rgba(255, 255, 255, .55); }
.plan--featured .plan__list { border-color: rgba(255, 255, 255, .14); }
.plan--featured .plan__list li::before { background-color: rgba(255, 255, 255, .12); filter: brightness(0) invert(1); opacity: .9; }

.rates__title { margin: 72px 0 20px; font-size: 22px; text-align: center; }
.rates { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.rates table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.rates th, .rates td { padding: 16px 24px; text-align: left; }
.rates thead th { background: var(--bg-soft); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.rates tbody tr + tr td { border-top: 1px solid var(--line); }
.rates tbody td:first-child { font-weight: 600; }
.rates tbody td:not(:first-child) { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rates tbody td:nth-child(3) { color: var(--accent-dark); font-weight: 700; }
.rates tbody tr:hover td { background: #fafbfb; }

.terms { margin: 28px auto 0; max-width: 760px; display: grid; gap: 6px; }
.terms li { position: relative; padding-left: 16px; font-size: 14px; color: var(--muted); }
.terms li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }

.rate-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.rate-card span { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.rate-card strong { display: block; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.rate-card small { font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .tabs { margin-bottom: 40px; }
  .tabs__btn { padding: 12px 20px; }
  .plan { padding: 30px 24px; }
  .rates th, .rates td { padding: 14px 16px; }
  .rates__title { margin-top: 56px; }
}
@media (min-width: 861px) and (max-width: 980px) {
  .nav { gap: 20px; }
  .nav__links { gap: 18px; }
}

/* ==========================================================
   Individual service pages
   ========================================================== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { font-weight: 600; color: var(--ink); }
.service-hero__row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.service-hero__row .eyebrow { margin: 0; }
.service-hero h1 { font-size: clamp(32px, 4.4vw, 52px); max-width: 820px; }
.service-hero .hero__actions { margin: 28px 0 0; }

.split--top { align-items: start; }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.perks li { font-size: 13px; color: var(--muted); line-height: 1.5; }
.perks strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }

.included { position: sticky; top: 100px; padding: 36px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; }
.included h3 { font-size: 22px; margin: 0; }
.included .plan__list { margin-top: 20px; padding-top: 20px; margin-bottom: 28px; }
.included .plan__list li::before { background-color: #fff; }
.included .btn { width: 100%; justify-content: center; }
.included__note { margin: 16px 0 0; text-align: center; font-size: 14px; }
.included__note a { color: var(--accent); font-weight: 700; }
.faq details p a { color: var(--accent); font-weight: 600; text-decoration: underline; }

.grid--related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Services overview: links to the detail pages */
.service-row h3 a { transition: color .2s; }
.service-row h3 a:hover { color: var(--accent); }
.card__link--alt { margin-left: 22px; color: var(--ink); }

@media (max-width: 860px) {
  .included { position: static; padding: 28px 24px; }
  .perks { grid-template-columns: 1fr; gap: 12px; }
}

/* Carousel slide with the photo on the left and the text on the right */
.slide--right .slide__media img { object-position: left center; }
@media (min-width: 1001px) {
  .slide--right .slide__text { margin-left: auto; max-width: 430px; }
  /* the dots and arrows keep their side on every slide (they used to swap on the photo slide) */
}
@media (max-width: 1000px) {
  .slide--right .slide__media img { object-position: 10% center; }
}
/* let the banners keep their true 3:1 shape instead of being cropped to a fixed height */
.slide__media img { height: auto; }
@media (min-width: 1001px) {
  .slide--right .slide__text { max-width: min(430px, calc(50vw - 170px)); }
}

/* ==========================================================
   Blog
   ========================================================== */
.container--narrow { max-width: 800px; }

.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter__btn {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.filter__btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.post-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.post-card[hidden] { display: none; }
.post-card__media { aspect-ratio: 16 / 10; background: #e6e0d7; overflow: hidden; display: grid; place-items: center; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; transition: transform .6s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__icon { width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, .7); color: var(--accent); display: grid; place-items: center; }
.post-card__icon svg { width: 34px; height: 34px; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-card__cat { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.post-card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.post-card p { font-size: 15px; margin-bottom: 18px; }
.post-card__meta { margin-top: auto; font-size: 13px; color: var(--muted); }

/* first article on the blog page is shown large */
.post-grid:not(.post-grid--plain) .post-card:first-child { grid-column: 1 / -1; flex-direction: row; }
.post-grid:not(.post-grid--plain) .post-card:first-child .post-card__media { flex: 1.2; aspect-ratio: auto; min-height: 320px; }
.post-grid:not(.post-grid--plain) .post-card:first-child .post-card__body { flex: 1; justify-content: center; padding: 44px; }
.post-grid:not(.post-grid--plain) .post-card:first-child h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.post-grid:not(.post-grid--plain) .post-card:first-child .post-card__meta { margin-top: 8px; }

/* Article */
.article .page-hero h1 { font-size: clamp(30px, 4.2vw, 46px); }
.article__meta { font-size: 14px !important; color: var(--muted); margin-top: 18px !important; }
.article__body { padding-top: 48px; padding-bottom: 96px; }
.article__cover { border-radius: 20px; overflow: hidden; margin-bottom: 40px; background: #e6e0d7; }
.article__cover img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 85% center; }
.article__intro { font-size: 19px; line-height: 1.7; color: var(--ink); margin-bottom: 40px; }
.tips { display: grid; gap: 8px; }
.tip { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 26px 0; border-top: 1px solid var(--line); }
.tip__n { font-size: 14px; font-weight: 800; color: var(--accent); padding-top: 5px; }
.tip h2 { font-size: 21px; margin-bottom: 8px; letter-spacing: -.01em; }
.tip p { margin: 0; font-size: 16.5px; line-height: 1.7; }
.callout { margin-top: 40px; padding: 36px; background: var(--accent-tint); border-radius: 20px; }
.callout h3 { font-size: 20px; }
.callout p { color: var(--ink-soft); margin-bottom: 22px; }

@media (max-width: 960px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-grid:not(.post-grid--plain) .post-card:first-child { flex-direction: column; }
  .post-grid:not(.post-grid--plain) .post-card:first-child .post-card__media { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .post-grid:not(.post-grid--plain) .post-card:first-child .post-card__body { padding: 24px; }
  .tip { grid-template-columns: 40px 1fr; }
  .callout { padding: 28px 24px; }
  .article__body { padding-bottom: 72px; }
}
@media (min-width: 861px) and (max-width: 1040px) {
  .nav { gap: 18px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
}
/* banner photos keep their subject on the right — anchor the crop there */
.post-card__media img, .article__cover img { object-position: 100% center; }

/* ==========================================================
   Service animations
   (the "anim" class is added by main.js; skipped for visitors
   who have asked their device to reduce motion)
   ========================================================== */

/* cards in a row appear one after another */
.anim .reveal { transition-delay: var(--d, 0s); }

/* icons draw themselves in */
.anim .reveal .icon svg *, .anim .service-hero .icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .reveal.is-visible .icon svg *, .anim .service-hero .icon svg * {
  animation: icon-draw 1.1s cubic-bezier(.6, 0, .2, 1) forwards;
  animation-delay: calc(var(--dd, 0s) + .2s);
}
@keyframes icon-draw { to { stroke-dashoffset: 0; } }

/* icon tile reacts on hover */
.icon { transition: background .3s, color .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
a.card:hover .icon, .service-row:hover .icon, .contact-item:hover .icon {
  background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.08);
}

/* service cards: accent line sweeps across the top */
a.card { position: relative; overflow: hidden; }
a.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
a.card:hover::after { transform: scaleX(1); }
a.card h3 { transition: color .2s; }
a.card:hover h3 { color: var(--accent-dark); }

/* services overview rows */
.service-row { position: relative; }
.service-row::before {
  content: ""; position: absolute; left: -20px; top: 40px; bottom: 40px; width: 3px; border-radius: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.service-row:hover::before { transform: scaleY(1); }
.service-row h3 { transition: transform .3s; }
.service-row:hover h3 { transform: translateX(4px); }
.anim .service-row.reveal { transform: translateX(-24px); }
.anim .service-row.reveal.is-visible { transform: none; }
.anim .service-row ul li { opacity: 0; transform: translateX(14px); transition: opacity .5s ease, transform .5s ease; }
.anim .service-row.is-visible ul li { opacity: 1; transform: none; }
.anim .service-row.is-visible ul li:nth-child(1) { transition-delay: .25s; }
.anim .service-row.is-visible ul li:nth-child(2) { transition-delay: .35s; }
.anim .service-row.is-visible ul li:nth-child(3) { transition-delay: .45s; }
.anim .service-row.is-visible ul li:nth-child(4) { transition-delay: .55s; }
.anim .service-row.is-visible ul li:nth-child(5) { transition-delay: .65s; }

/* category headings: underline grows in */
.service-group h2 { display: inline-block; position: relative; padding-bottom: 14px; }
.service-group h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 64px; border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1) .3s;
}
.service-group.is-visible h2::after, html:not(.anim) .service-group h2::after { transform: scaleX(1); }

/* individual service page: floating icon with a soft pulse */
.service-hero .icon { position: relative; }
.anim .service-hero .icon { animation: icon-float 4s ease-in-out infinite; }
.anim .service-hero .icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--accent);
  animation: icon-pulse 2.6s ease-out infinite;
}
@keyframes icon-float { 50% { transform: translateY(-5px); } }
@keyframes icon-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

/* "What's included" ticks in one by one */
.anim .included .plan__list li { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.anim .included .plan__list li::before { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.anim .included.is-visible .plan__list li { opacity: 1; transform: none; }
.anim .included.is-visible .plan__list li::before { transform: scale(1); }
.anim .included.is-visible .plan__list li:nth-child(1), .anim .included.is-visible .plan__list li:nth-child(1)::before { transition-delay: .2s; }
.anim .included.is-visible .plan__list li:nth-child(2), .anim .included.is-visible .plan__list li:nth-child(2)::before { transition-delay: .32s; }
.anim .included.is-visible .plan__list li:nth-child(3), .anim .included.is-visible .plan__list li:nth-child(3)::before { transition-delay: .44s; }
.anim .included.is-visible .plan__list li:nth-child(4), .anim .included.is-visible .plan__list li:nth-child(4)::before { transition-delay: .56s; }
.anim .included.is-visible .plan__list li:nth-child(5), .anim .included.is-visible .plan__list li:nth-child(5)::before { transition-delay: .68s; }
.anim .included.is-visible .plan__list li:nth-child(6), .anim .included.is-visible .plan__list li:nth-child(6)::before { transition-delay: .8s; }

/* "How it works" steps: the top line fills as each step appears */
.step { border-top-color: var(--line); }
.step::after {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--dd, 0s) + .2s);
}
.anim .step.is-visible::after { transform: scaleX(1); }

/* primary buttons: arrow nudges forward */
.btn svg { transition: transform .25s; }
.btn:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .service-row::before { display: none; }
}
.service-group .eyebrow { display: block; }

/* ==========================================================
   AC service pages: animated hero (motion lives in js/ac-hero.js)
   ========================================================== */
.ac-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #fff 35%, #e9f5fb 100%);
  border-bottom: 0;
}
.ac-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.ac-hero .service-hero__text { position: relative; z-index: 3; }

.ac-stage { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 1 / .92; }
.ac-stage__glow {
  position: absolute; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(120, 200, 240, .38) 0, rgba(120, 200, 240, 0) 62%);
  border-radius: 50%;
}
.ac-stage__unit {
  position: absolute; top: 2%; left: 4%; width: 92%; aspect-ratio: 1536 / 500;
  overflow: hidden; z-index: 2;
  filter: drop-shadow(0 26px 30px rgba(20, 70, 100, .22));
  will-change: transform;
}
/* the picture has empty space above and below the unit — crop to the unit itself */
.ac-stage__unit img { width: 100%; height: auto; margin-top: -16.3%; }
.ac-stage__led {
  position: absolute; left: 90.2%; top: 80%; width: 2.6%; aspect-ratio: 1; border-radius: 50%;
  background: #35e08a; box-shadow: 0 0 10px 3px rgba(53, 224, 138, .7);
}
.ac-stage__air {
  position: absolute; z-index: 1;
  top: 27%; left: -35%; width: 170%; max-width: none; height: auto;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.ac-stage__flakes { position: absolute; z-index: 1; left: 12%; right: 12%; top: 30%; height: 0; pointer-events: none; }
.ac-flake { position: absolute; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(140, 210, 245, .9); opacity: 0; }
.ac-flake--star { width: auto; height: auto; background: none; box-shadow: none; color: #7cc4ea; font-size: 15px; line-height: 1; text-shadow: 0 0 8px #fff; }

.ac-stage__chip {
  position: absolute; z-index: 3;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(20, 70, 100, .14);
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.ac-stage__chip--temp { left: 0; bottom: 14%; }
.ac-stage__chip--temp small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ac-stage__chip--temp b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #1786c2; font-variant-numeric: tabular-nums; }
.ac-stage__chip--air { right: 0; bottom: 30%; display: flex; align-items: center; gap: 10px; }
.ac-stage__chip--air i { width: 10px; height: 10px; border-radius: 50% 0 50% 50%; background: #4caf50; rotate: -45deg; }

@media (max-width: 860px) {
  .ac-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .ac-stage { max-width: 440px; margin: 0 auto; }
  .ac-hero { padding-bottom: 24px; }
}
@media (min-width: 861px) {
  /* fade the airflow out before it reaches the headline */
  .ac-stage__air { -webkit-mask-image: linear-gradient(to right, transparent 10%, #000 30%); mask-image: linear-gradient(to right, transparent 10%, #000 30%); }
}

/* ==========================================================
   Electrical Services page: live-wire hero (motion lives in js/elec-hero.js)
   ========================================================== */
.elec-hero {
  --flash: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 80% at 78% 50%, rgba(40, 90, 200, .28), transparent 70%),
    linear-gradient(150deg, #070b18 0%, #0c1530 60%, #101d44 100%);
}
/* faint blueprint grid */
.elec-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 160, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000, transparent 85%);
}
/* whole-hero flash on every strike */
.elec-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse 70% 90% at 70% 50%, #cfe0ff, #7aa7ff 60%, #3d6bff);
  opacity: var(--flash);
  mix-blend-mode: screen;
}
.elec-hero .service-hero__text { position: relative; z-index: 3; }
.elec-hero h1 { color: #fff; }
.elec-hero p { color: rgba(255, 255, 255, .72); }
.elec-hero .crumbs, .elec-hero .crumbs a { color: rgba(255, 255, 255, .5); }
.elec-hero .crumbs a:hover, .elec-hero .crumbs b { color: #fff; }
.elec-hero .eyebrow { color: #ffc94d; }
.elec-hero .icon { background: rgba(255, 201, 77, .14); color: #ffc94d; }
.anim .elec-hero .icon::after { border-color: #ffc94d; }
.elec-hero .btn--primary { background: #ffc94d; color: #0a1020; }
.elec-hero .btn--primary:hover { background: #ffd876; }
.elec-hero .btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
.elec-hero .btn--ghost:hover { border-color: #fff; }

.elec-stage { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 1 / .94; cursor: pointer; }
.elec-stage__glow {
  position: absolute; left: 18%; top: 50%; width: 95%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(90, 150, 255, .55) 0, rgba(90, 150, 255, 0) 62%);
  border-radius: 50%; opacity: .55;
}
/* the cable is wider than its box so the black sleeve runs off the right-hand side */
.elec-cable { position: absolute; left: 0; top: 0; width: 140%; aspect-ratio: 3 / 2; will-change: transform; }
.elec-cable__img {
  width: 100%; height: 100%; object-fit: contain;
  scale: -1 1; /* mirrored: wires point towards the headline */
  filter: drop-shadow(0 0 1px rgba(140, 180, 255, .55)) drop-shadow(0 22px 34px rgba(0, 0, 0, .6));
  -webkit-mask-image: linear-gradient(to left, #000 78%, transparent 100%);
  mask-image: linear-gradient(to left, #000 78%, transparent 100%);
}
.elec-bolt {
  position: absolute; left: 13%; top: 52%; width: 62%; max-width: none; height: auto;
  translate: -50% -50%; transform: rotate(90deg);
  mix-blend-mode: screen; pointer-events: none; opacity: .9;
  filter: brightness(1.25) saturate(1.2);
}
.elec-arc {
  position: absolute; width: 26%; max-width: none; height: auto;
  translate: -50% -50%; mix-blend-mode: screen; pointer-events: none; opacity: 0;
  filter: brightness(1.3);
}
.elec-tip {
  position: absolute; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #bcd4ff 18%, rgba(90, 150, 255, .55) 40%, rgba(90, 150, 255, 0) 70%);
  mix-blend-mode: screen; opacity: .7; pointer-events: none;
}
.elec-sparks { position: absolute; inset: 0; pointer-events: none; }
.elec-spark {
  position: absolute; width: 3px; height: 13px; margin: -6px 0 0 -1px; border-radius: 3px;
  background: linear-gradient(#fff, #ffc24d 40%, #ff7a1a);
  box-shadow: 0 0 8px 1px rgba(255, 160, 50, .9);
  opacity: 0;
}

.elec-chip {
  position: absolute; z-index: 3;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(14, 22, 48, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(140, 175, 255, .28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  font-size: 14px; font-weight: 700; color: #fff;
}
.elec-chip--volt { right: 0; top: 4%; }
.elec-chip--volt small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.elec-chip--volt b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #ffc94d; font-variant-numeric: tabular-nums; }
.elec-chip--status { right: 2%; bottom: 5%; display: flex; align-items: center; gap: 10px; }
.elec-chip--status i { width: 10px; height: 10px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 10px 2px rgba(255, 176, 32, .8); animation: elec-blink .5s steps(2) infinite; }
.elec-chip--status.is-safe i { background: #35e08a; box-shadow: 0 0 10px 2px rgba(53, 224, 138, .8); animation: none; }
@keyframes elec-blink { 50% { opacity: .25; } }

@media (max-width: 860px) {
  .elec-stage { max-width: 440px; margin: 0 auto; }
  .elec-hero { padding-bottom: 32px; }
}

/* ==========================================================
   Plumbing Repair page: leaking-pipe hero (motion lives in js/plumb-hero.js)
   ========================================================== */
.plumb-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  padding-bottom: 110px;
  background: linear-gradient(150deg, #f1f9fe 0%, #d3eaf8 55%, #a8d5f1 100%);
}
.plumb-hero .service-hero__text { position: relative; z-index: 3; }
.plumb-hero .icon { background: #fff; color: #0b79c4; }
.plumb-hero .eyebrow { color: #0b79c4; }
.anim .plumb-hero .icon::after { border-color: #0b79c4; }
.plumb-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); }

.plumb-stage { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 1 / .9; cursor: pointer; }
/* Mirrored so the pipe runs in from the right and the leak sprays towards the headline.
   It starts above the hero so the upright pipe appears to come down from behind the header. */
.plumb-pipe { position: absolute; left: -8%; top: -92px; width: 150%; aspect-ratio: 3 / 2; scale: -1 1; will-change: transform; }
.plumb-pipe__img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(20, 60, 100, .28));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%);
}
.plumb-splash {
  position: absolute; left: 56.5%; top: 33.5%; width: 50%; max-width: none; height: auto;
  transform-origin: 10% 11%; rotate: 16deg;
  pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(30, 110, 180, .25));
}
.plumb-drops { position: absolute; inset: 0; pointer-events: none; }
.plumb-drop {
  position: absolute; width: 11px; height: 15px; margin: 0 0 0 -5px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 35% 35%, #fff 0, #d6eefd 30%, #6db9ea 75%, #3b93d1 100%);
  box-shadow: inset -1px -2px 3px rgba(20, 90, 160, .35), 0 2px 4px rgba(20, 90, 160, .2);
  opacity: 0;
}

.plumb-chip {
  position: absolute; z-index: 3;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 34px rgba(20, 70, 110, .18);
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.plumb-chip--status { right: 0; top: 55%; display: flex; align-items: center; gap: 10px; }
.plumb-chip--status i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: plumb-ping 1.2s ease-out infinite; }
@keyframes plumb-ping { to { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); } }
.plumb-chip--count { right: 0; bottom: 2%; }
.plumb-chip--count small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plumb-chip--count b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #0b79c4; font-variant-numeric: tabular-nums; }

/* water collecting at the bottom of the hero (added by the script) */
.plumb-water { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 2; pointer-events: none; }
.plumb-wave {
  position: absolute; left: 0; top: 0; width: 200%; height: 100%;
  background-repeat: repeat-x; background-size: 50% 100%;
}
.plumb-wave--back { opacity: .55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='none'%3E%3Cpath fill='%235aaee6' d='M0 26 Q150 0 300 26 T600 26 T900 26 T1200 26 V170 H0Z'/%3E%3C/svg%3E"); }
.plumb-wave--front { top: 10px; opacity: .6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='none'%3E%3Cpath fill='%232f8fd4' d='M0 22 Q100 44 200 22 T400 22 T600 22 T800 22 T1000 22 T1200 22 V170 H0Z'/%3E%3C/svg%3E"); }

@media (max-width: 860px) {
  .plumb-stage { max-width: 440px; margin: 0 auto; }
  .plumb-pipe { top: 0; }
  /* stacked layout: the upright pipe has no header to hide behind, so fade its top instead */
  .plumb-pipe__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 16%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .plumb-chip--status { top: 62%; }
}
/* soften the lower edge of the pipe picture so the falling water doesn't end in a hard line */
.plumb-pipe__img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 860px) {
  .plumb-pipe__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
  }
}
/* live water drops are drawn on this canvas (added by the script) */
.plumb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ==========================================================
   Handyman Services page: room-assembly hero (motion lives in js/handyman-hero.js)
   ========================================================== */
.hm-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffaf3 0%, #f7ebdb 58%, #eed9be 100%);
}
.hm-hero .service-hero__text { position: relative; z-index: 3; }
.hm-hero .eyebrow { color: #c2551f; }
.hm-hero .icon { background: #fff; color: #c2551f; }
.anim .hm-hero .icon::after { border-color: #c2551f; }
.hm-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.hm-stage { position: relative; width: 112%; margin-left: -12%; cursor: pointer; }
.hm-room { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.hm-floor {
  position: absolute; left: 2%; right: 0; bottom: -6%; height: 46%;
  background: radial-gradient(ellipse at 50% 55%, rgba(120, 78, 38, .22) 0, rgba(120, 78, 38, 0) 68%);
}

/* Each picture is placed so the four together match the finished-room reference */
.hm-piece { position: absolute; will-change: transform; }
.hm-piece__art { position: relative; will-change: transform, opacity; }
.hm-piece img { width: 100%; height: auto; filter: drop-shadow(0 16px 16px rgba(80, 48, 18, .22)); }
.hm-piece--tv    { left: 55%;   top: 10.4%; width: 43%;   z-index: 1; }
.hm-piece--sofa  { left: .1%;   top: 21.2%; width: 57.5%; z-index: 2; }
.hm-piece--table { left: 13%;   top: 34.8%; width: 66%;   z-index: 3; }
.hm-piece--chair { left: 67.6%; top: 48.7%; width: 31%;   z-index: 4; }

/* the TV screen lights up at the end */
.hm-screen {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  clip-path: polygon(25.7% 10.8%, 74.2% 7%, 74.2% 47.5%, 25.7% 47.3%);
  background: linear-gradient(115deg, #0e7c6b, #2aa7d8 35%, #f2b33d 70%, #c2551f) 0% 50% / 260% 260%;
  mix-blend-mode: screen;
}

.hm-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hm-fx > span { position: absolute; translate: -50% -50%; }
.hm-dust { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 164, 124, .75), rgba(196, 164, 124, 0) 70%); }
.hm-badge {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #c2551f;
  box-shadow: 0 10px 24px rgba(80, 48, 18, .28);
}
.hm-badge svg { width: 22px; height: 22px; }
.hm-badge.is-done { background: #17a673; color: #fff; }
.hm-spark { color: #f2b33d; font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(242, 179, 61, .8); }
.hm-confetti { width: 8px; height: 12px; border-radius: 2px; }

/* to-do list card */
.hm-list {
  position: absolute; left: 12%; top: -34px; z-index: 5;
  width: 228px; padding: 14px 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(80, 48, 18, .16);
}
.hm-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 800; color: var(--ink); }
.hm-list__head b { color: #c2551f; font-variant-numeric: tabular-nums; }
.hm-list__bar { height: 4px; margin: 9px 0 10px; border-radius: 4px; background: #efe3d2; overflow: hidden; }
.hm-list__bar i { display: block; height: 100%; background: #c2551f; transform-origin: left; transition: background .3s; }
.hm-list ul { display: grid; gap: 5px; }
.hm-list li { position: relative; padding-left: 22px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--muted); transition: color .3s; }
.hm-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #d9c9b3; background: #fff center / 9px no-repeat;
  transition: background-color .3s, border-color .3s;
}
.hm-list li.is-done { color: var(--ink); }
.hm-list li.is-done::before {
  border-color: #17a673; background-color: #17a673;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.hm-list.is-complete .hm-list__head b, .hm-list.is-complete .hm-list__head span { color: #12855c; }
.hm-list.is-complete .hm-list__bar i { background: #17a673; }

@media (min-width: 861px) {
  .hm-hero { padding-top: 96px; }
}
@media (max-width: 860px) {
  .hm-stage { width: 100%; margin: 0 auto; max-width: 520px; }
  .hm-list { position: relative; left: auto; top: auto; margin: 0 0 6px; }
  .hm-hero { padding-bottom: 40px; }
}
/* keep the room clear of the headline and the list clear of the sofa */
.hm-stage { width: 104%; margin-left: -4%; }
.hm-list { left: 4%; top: -62px; }
@media (max-width: 860px) {
  .hm-stage { width: 100%; margin: 0 auto; }
  .hm-list { left: auto; top: auto; }
}

/* ==========================================================
   Home carousel: animated service scenes as slides
   (same scenes and scripts as the service pages)
   ========================================================== */
.carousel .slide--scene { display: flex; flex-direction: row; align-items: center; padding: 52px 0 92px; }
.slide--scene > .container { position: relative; }
.slide--scene .slide__desc { max-width: 420px; }
@media (min-width: 861px) {
  .carousel__track { min-height: 560px; }
  /* a little smaller than on the service pages so the carousel doesn't get too tall */
  .slide--scene .ac-stage, .slide--scene .elec-stage, .slide--scene .plumb-stage { max-width: 460px; }
  .slide--scene .hm-stage { width: 100%; max-width: 520px; margin-left: auto; }
  .slide--scene.hm-hero { padding-top: 104px; }
}
/* the photo slide stretches to the same height as the scenes */
.carousel .slide__media { height: 100%; }
.carousel .slide__media img { height: 100%; }

/* text colours per scene */
.elec-hero .slide__title { color: #fff; }
.elec-hero .slide__eyebrow { color: #ffc94d; }
.elec-hero .slide__link { color: #fff; border-color: rgba(255, 255, 255, .4); }
.elec-hero .slide__link:hover { border-color: #fff; }
.plumb-hero .slide__eyebrow { color: #0b79c4; }
.hm-hero .slide__eyebrow { color: #c2551f; }
.slide--scene.plumb-hero { padding-bottom: 120px; }

/* light controls while the dark (electrical) slide is showing */
.carousel.is-dark .carousel__count { color: #fff; }
.carousel.is-dark .carousel__count span { color: rgba(255, 255, 255, .5); }
.carousel.is-dark .carousel__dot i { background: rgba(255, 255, 255, .25); }
.carousel.is-dark .carousel__dot i::after { background: #fff; }

@media (max-width: 1000px) {
  .carousel .slide__media, .carousel .slide__media img { height: auto; }
}
@media (max-width: 860px) {
  .carousel .slide--scene { align-items: flex-start; padding: 36px 0 96px; }
  .slide--scene.plumb-hero { padding-bottom: 130px; }
}

/* ==========================================================
   Carpentry Services page: kitchen-fitting hero
   (motion lives in js/carpentry-hero.js)
   ========================================================== */
.cp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffaf4 0%, #f4e7d5 58%, #e7d0b0 100%);
}
.cp-hero .service-hero__text { position: relative; z-index: 3; }
.cp-hero .eyebrow, .cp-hero .slide__eyebrow { color: #9a5a2a; }
.cp-hero .icon { background: #fff; color: #9a5a2a; }
.anim .cp-hero .icon::after { border-color: #9a5a2a; }
.cp-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.cp-stage { position: relative; width: 104%; margin-left: -4%; cursor: pointer; }
.cp-room { position: relative; width: 100%; aspect-ratio: 3 / 2; }

/* backdrop: wall behind the units, floor shadow, warm under-cabinet light */
.cp-wall {
  position: absolute; left: 3%; right: 3%; top: 9%; bottom: 14%; border-radius: 10px;
  background:
    linear-gradient(115deg, transparent 46%, rgba(190, 170, 140, .16) 47%, transparent 49%) 0 0 / 46% 60%,
    linear-gradient(180deg, #f8f1e6, #efe3d1);
  box-shadow: inset 0 0 0 1px rgba(160, 120, 70, .12);
}
.cp-floor {
  position: absolute; left: 0; right: 0; bottom: -7%; height: 34%;
  background: radial-gradient(ellipse at 50% 45%, rgba(110, 70, 30, .26) 0, rgba(110, 70, 30, 0) 68%);
}
.cp-glow {
  position: absolute; left: 6%; right: 6%; top: 41%; height: 20%;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 196, 110, .85) 0, rgba(255, 196, 110, 0) 70%);
  filter: blur(6px);
}

/* Each picture shows a whole corner. It is trimmed at the corner seam and placed so the
   four together read as one L-shaped kitchen, like the finished-kitchen reference. */
.cp-piece { position: absolute; will-change: transform; }
.cp-piece__art { position: relative; will-change: transform, opacity; }
.cp-piece img { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(70, 40, 12, .2)); }
.cp-piece--ul { left: 1%;    top: 0;     width: 72.6%; z-index: 2; }
.cp-piece--ul img { clip-path: inset(0 30% 0 0); }
.cp-piece--ur { left: 35.2%; top: 5.1%;  width: 63.9%; z-index: 3; }
.cp-piece--ur img { clip-path: inset(0 0 0 26%); }
.cp-piece--bl { left: 1%;    top: 28.6%; width: 83.3%; z-index: 4; }
.cp-piece--bl img { clip-path: inset(0 39.5% 0 0); }
.cp-piece--br { left: 17.5%; top: 39.9%; width: 81.6%; z-index: 5; }
.cp-piece--br img { clip-path: inset(0 0 0 41.5%); }

/* the carpenter's marks and tools (created by the script) */
.cp-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.cp-mark { position: absolute; border: 2px dashed rgba(154, 90, 42, .55); border-radius: 6px; background: rgba(154, 90, 42, .05); }
.cp-tape {
  position: absolute; height: 12px; transform-origin: left; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #f6c531 0 9px, #1d1a14 9px 10px);
  box-shadow: 0 3px 6px rgba(70, 40, 12, .3);
}
.cp-tape__label {
  position: absolute; translate: -50% 0; padding: 3px 9px; border-radius: 999px;
  background: #1d1a14; color: #f6c531;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cp-screw {
  position: absolute; width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b9bcc2 45%, #6d7078);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.cp-screw::before, .cp-screw::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.6px;
  background: #3a3c41; translate: -50% -50%;
}
.cp-screw::after { rotate: 90deg; }
.cp-dust { position: absolute; width: 5px; height: 5px; translate: -50% -50%; border-radius: 1px; background: #c99a63; }
.cp-drill {
  position: absolute; width: 50px; height: 50px; translate: -12% -88%;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: #9a5a2a;
  box-shadow: 0 10px 24px rgba(70, 40, 12, .32);
}
.cp-drill svg { width: 28px; height: 28px; }
.cp-level {
  position: absolute; height: 18px; translate: -50% -50%; border-radius: 4px;
  background: linear-gradient(180deg, #ffd23e, #e9a90c);
  box-shadow: 0 4px 10px rgba(70, 40, 12, .35);
}
.cp-level::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 10px; translate: -50% -50%;
  border-radius: 6px; background: #dff3c4; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35);
}
.cp-level i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 7px; margin: -3.5px 0 0 -6px;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.cp-level.is-true::before { background: #7be08a; }
.cp-spark { position: absolute; translate: -50% -50%; color: #f6c531; font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(246, 197, 49, .8); }
.cp-shine {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  mix-blend-mode: soft-light;
}

/* job sheet */
.cp-sheet {
  position: relative; z-index: 5;
  width: fit-content; max-width: 96%; margin: 0 0 10px 4%; padding: 12px 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(70, 40, 12, .16);
}
.cp-sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; font-weight: 800; color: var(--ink); }
.cp-sheet__head b { color: #9a5a2a; font-variant-numeric: tabular-nums; }
.cp-sheet__bar { height: 4px; margin: 8px 0 9px; border-radius: 4px; background: #efe1cd; overflow: hidden; }
.cp-sheet__bar i { display: block; height: 100%; background: #9a5a2a; transform-origin: left; transition: background .3s; }
.cp-sheet ul { display: grid; grid-template-columns: auto auto; gap: 4px 22px; }
.cp-sheet li { position: relative; padding-left: 21px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--muted); white-space: nowrap; transition: color .3s; }
.cp-sheet li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #d9c6ab; background: #fff center / 9px no-repeat;
  transition: background-color .3s, border-color .3s;
}
.cp-sheet li.is-done { color: var(--ink); }
.cp-sheet li.is-done::before {
  border-color: #17a673; background-color: #17a673;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.cp-sheet.is-complete .cp-sheet__head b, .cp-sheet.is-complete .cp-sheet__head span { color: #12855c; }
.cp-sheet.is-complete .cp-sheet__bar i { background: #17a673; }

@media (max-width: 860px) {
  .cp-stage { width: 100%; margin: 0 auto; max-width: 520px; }
  .cp-sheet { margin-left: 0; }
  .cp-sheet ul { gap: 4px 14px; }
  .cp-hero { padding-bottom: 40px; }
}

/* home carousel: carpentry scene slide */
@media (min-width: 861px) {
  .slide--scene .cp-stage { width: 100%; max-width: 520px; margin-left: auto; }
  .slide--scene .cp-sheet { margin-left: 0; }
}
/* six slides: slightly shorter progress lines */
.carousel__dot { width: 38px; }
@media (max-width: 560px) { .carousel__dot { width: 26px; } }
/* ==========================================================
   Parquet Flooring page: floor-laying hero
   (the floor is built and animated by js/parquet-hero.js)
   ========================================================== */
.pq-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffaf3 0%, #f4e6d2 58%, #e4c9a2 100%);
}
.pq-hero .service-hero__text { position: relative; z-index: 3; }
.pq-hero .eyebrow, .pq-hero .slide__eyebrow { color: #9a5a2a; }
.pq-hero .icon { background: #fff; color: #9a5a2a; }
.anim .pq-hero .icon::after { border-color: #9a5a2a; }
.pq-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.pq-stage { position: relative; width: 104%; margin-left: -4%; cursor: pointer; }
.pq-room { position: relative; width: 100%; aspect-ratio: 3 / 2; }

/* The camera. Everything inside is a real 3D room corner seen from above,
   and the soft mask lets the floor fade out at the edges like a photograph. */
.pq-scene {
  position: absolute; inset: -6% -14% -18% -14%;
  perspective: 1100px; perspective-origin: 50% 20%;
  -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 48%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 54% at 50% 48%, #000 60%, transparent 100%);
}
/* .pq-tilt leans the floor back; .pq-floor turns it so we look into the corner */
.pq-tilt {
  --u: 20px;               /* width of one board; set by the script */
  position: absolute; left: 50%; top: 57%;
  width: calc(var(--u) * 18); height: calc(var(--u) * 18);
  margin: calc(var(--u) * -9) 0 0 calc(var(--u) * -9);
  transform: rotateX(60deg);
  transform-style: preserve-3d;
  will-change: transform;
}
.pq-floor {
  position: absolute; inset: 0;
  transform: rotate(45deg);
  transform-style: preserve-3d;
  will-change: transform;
}
/* subfloor: screed with trowelled adhesive lines, visible until the boards cover it */
.pq-boards {
  position: absolute; inset: 0; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(120, 100, 80, .18) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #cfc4b4, #b9ac99);
}
.pq-board {
  position: absolute;
  width: calc(var(--u) * 3); height: var(--u);
  background-color: #b9793f; background-image: var(--pq-tex, none); background-size: 135% 135%;
  box-shadow: inset 0 0 0 .6px rgba(60, 30, 8, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  will-change: transform, opacity;
}
/* boards lying the other way use the same grain turned a quarter turn */
.pq-board--turn { width: var(--u); height: calc(var(--u) * 3); background-image: var(--pq-tex-v, none); }
/* light catching the finished floor */
.pq-gloss {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) 0 0 / 300% 100%,
    radial-gradient(ellipse 30% 22% at 30% 30%, rgba(255, 255, 255, .62), transparent 70%),
    radial-gradient(ellipse 26% 30% at 64% 62%, rgba(255, 246, 225, .55), transparent 70%);
  mix-blend-mode: overlay;
}
/* two walls standing on the far edges, with white skirting */
.pq-wall { position: absolute; background: linear-gradient(0deg, #fff 0 15%, #e9e2d6 15% 17%, #d9d0c3 17% 100%); }
.pq-wall--back { left: 0; bottom: 100%; width: 100%; height: 20%; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.pq-wall--left {
  right: 100%; top: 0; height: 100%; width: 20%; transform-origin: 100% 50%; transform: rotateY(90deg);
  background: linear-gradient(270deg, #fff 0 15%, #e3dbce 15% 17%, #cfc5b6 17% 100%);
}

/* the board photograph that starts the job */
.pq-photo {
  position: absolute; left: 14%; top: 8%; width: 72%; height: auto; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 26px 24px rgba(70, 40, 12, .35));
  opacity: 0; /* shown only by the animation; the finished floor is the resting state */
}
.pq-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pq-fx > span { position: absolute; translate: -50% -50%; }
.pq-mallet {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #9a5a2a; box-shadow: 0 10px 24px rgba(70, 40, 12, .32);
}
.pq-mallet svg { width: 26px; height: 26px; }
.pq-dust { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(206, 176, 136, .8), rgba(206, 176, 136, 0) 70%); }
.pq-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 230, 170, 1); }

.pq-chip {
  position: absolute; right: 2%; bottom: 4%; z-index: 5;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 34px rgba(70, 40, 12, .18);
}
.pq-chip small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pq-chip b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #9a5a2a; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .pq-stage { width: 100%; margin: 0 auto; max-width: 520px; }
  .pq-hero { padding-bottom: 40px; }
}

/* ==========================================================
   Kitchen Counter Top Repair page: repair hero
   (the pictures are blended and animated by js/countertop-hero.js)
   ========================================================== */
.ct-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffdf8 0%, #f4ecdf 58%, #e4d6bd 100%);
}
.ct-hero .service-hero__text { position: relative; z-index: 3; }
.ct-hero .eyebrow, .ct-hero .slide__eyebrow { color: #8a6a3a; }
.ct-hero .icon { background: #fff; color: #8a6a3a; }
.anim .ct-hero .icon::after { border-color: #8a6a3a; }
.ct-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.ct-stage { position: relative; width: 112%; margin-left: -4%; cursor: pointer; }
.ct-room { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.ct-shadow {
  position: absolute; left: 4%; right: 4%; bottom: -8%; height: 30%;
  background: radial-gradient(ellipse at 50% 40%, rgba(90, 70, 40, .22) 0, rgba(90, 70, 40, 0) 68%);
}
.ct-img, .ct-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* resting state (no script): just the finished worktop */
.ct-img--before, .ct-img--work, .ct-canvas { display: none; }
/* once the script is running the canvas shows the blend of the three pictures */
.ct-live .ct-img { display: none; }
.ct-live .ct-canvas {
  display: block;
  /* the technician's arms come in from the left and top edges of the photo: fade those edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to bottom, transparent 0, #000 7%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to bottom, transparent 0, #000 7%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* tools and marks placed over the picture by the script */
.ct-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ct-fx > span { position: absolute; translate: -50% -50%; }
.ct-scan {
  top: 0 !important; translate: -50% 0 !important; width: 3px; height: 100%;
  background: linear-gradient(180deg, transparent, #ff5a3c 20%, #ff5a3c 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 90, 60, .55);
}
.ct-ring {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2.5px solid #ff5a3c; background: rgba(255, 90, 60, .12);
  box-shadow: 0 0 0 6px rgba(255, 90, 60, .14);
}
.ct-ring b {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0;
  padding: 3px 10px; border-radius: 999px; background: #ff5a3c; color: #fff;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.ct-tool {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #8a6a3a;
  box-shadow: 0 10px 24px rgba(70, 50, 20, .32);
}
.ct-tool svg { width: 28px; height: 28px; }
.ct-tool--pad { width: 62px; height: 62px; color: #0e7c6b; }
.ct-tool--pad svg { width: 36px; height: 36px; }
.ct-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 226, 150, 1), 0 0 2px rgba(180, 130, 40, .8); }
.ct-bubble {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .55) 60%, rgba(190, 225, 245, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 3px rgba(60, 100, 130, .25);
}
.ct-shine {
  top: -10% !important; translate: 0 0 !important; width: 24%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  mix-blend-mode: soft-light;
}
.ct-shine--soft { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); }

.ct-hint {
  position: absolute; left: 50%; bottom: -6%; translate: -50% 0; z-index: 5;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(15, 26, 28, .78); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (hover: none) { .ct-hint { display: none; } }

@media (max-width: 860px) {
  .ct-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .ct-hero { padding-bottom: 40px; }
  .ct-ring { width: 38px; height: 38px; }
  .ct-tool { width: 40px; height: 40px; }
  .ct-tool svg { width: 22px; height: 22px; }
}
/* keep the sweeping light inside the picture */
.ct-fx { overflow: hidden; border-radius: 4px; }

/* ==========================================================
   Custom Wood Table Tops page: workshop hero
   (motion lives in js/tabletop-hero.js)
   ========================================================== */
.wt-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffaf4 0%, #f3e5d3 58%, #e2c8a6 100%);
}
.wt-hero .service-hero__text { position: relative; z-index: 3; }
.wt-hero .eyebrow, .wt-hero .slide__eyebrow { color: #8a4b22; }
.wt-hero .icon { background: #fff; color: #8a4b22; }
.anim .wt-hero .icon::after { border-color: #8a4b22; }
.wt-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.wt-stage { position: relative; width: 110%; margin-left: -4%; cursor: pointer; }
.wt-room { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.wt-shadow {
  position: absolute; left: 3%; right: 3%; bottom: -9%; height: 30%;
  background: radial-gradient(ellipse at 50% 40%, rgba(80, 45, 15, .3) 0, rgba(80, 45, 15, 0) 68%);
}

/* resting state (no script): just the finished table */
.wt-final { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 14px rgba(70, 38, 10, .22)); }
.wt-part, .wt-top { position: absolute; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.wt-part { height: auto; filter: drop-shadow(0 12px 12px rgba(70, 38, 10, .25)); }
.wt-part--legl { left: 4%;  top: 44%; width: 31%; }
.wt-part--legr { left: 65%; top: 44%; width: 31%; }
/* the slab fills the stage while it is being worked on */
.wt-top { left: 5%; top: 4%; width: 90%; }
.wt-top img { width: 100%; height: auto; filter: drop-shadow(0 18px 16px rgba(70, 38, 10, .28)); }
/* light that only falls on the wood: the slab picture itself is used as the stencil */
.wt-top__shine {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%) 120% 0 / 260% 100% no-repeat;
  -webkit-mask: url("../images/wt-top.webp") center / 100% 100% no-repeat;
  mask: url("../images/wt-top.webp") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
}

/* marks and tools placed over the picture by the script */
.wt-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wt-fx > span { position: absolute; translate: -50% -50%; }
.wt-dim {
  translate: 0 -50% !important; height: 2px; transform-origin: 0 50%;
  background: #1d1a14;
}
.wt-dim::before, .wt-dim::after { content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: #1d1a14; }
.wt-dim::before { left: 0; }
.wt-dim::after { right: 0; }
.wt-dim b {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  padding: 3px 10px; border-radius: 999px; background: #1d1a14; color: #f6c531;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.wt-tool {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #8a4b22;
  box-shadow: 0 10px 24px rgba(70, 38, 10, .32);
}
.wt-tool svg { width: 28px; height: 28px; }
.wt-dust { width: 5px; height: 5px; border-radius: 1px; background: #c99a63; }
.wt-puff { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 180, 136, .85), rgba(214, 180, 136, 0) 70%); }
.wt-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 220, 150, 1), 0 0 2px rgba(150, 90, 30, .8); }
.wt-flash { width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 240, 210, 0) 65%); }

@media (max-width: 860px) {
  .wt-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .wt-hero { padding-bottom: 40px; }
  .wt-tool { width: 40px; height: 40px; }
  .wt-tool svg { width: 22px; height: 22px; }
}

/* ==========================================================
   Renovation & Refurbishment page: room-makeover hero
   (the two pictures are blended and animated by js/renovation-hero.js)
   ========================================================== */
.rn-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffdf9 0%, #f3ebdf 58%, #e2d3bb 100%);
}
.rn-hero .service-hero__text { position: relative; z-index: 3; }
.rn-hero .eyebrow, .rn-hero .slide__eyebrow { color: #8a6234; }
.rn-hero .icon { background: #fff; color: #8a6234; }
.anim .rn-hero .icon::after { border-color: #8a6234; }
.rn-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.rn-stage { position: relative; width: 104%; margin-left: -4%; cursor: pointer; }
.rn-room {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 50px rgba(70, 50, 20, .24), 0 0 0 1px rgba(255, 255, 255, .7);
  background: #f1e9dd;
}
.rn-img, .rn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* resting state (no script): just the renovated room */
.rn-img--before, .rn-canvas { display: none; }
/* once the script is running the canvas shows the blend of the two pictures */
.rn-live .rn-img { display: none; }
.rn-live .rn-canvas { display: block; }

/* tools and effects placed over the picture by the script */
.rn-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.rn-fx > span { position: absolute; translate: -50% -50%; }
.rn-tool {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #8a6234;
  box-shadow: 0 10px 24px rgba(60, 40, 15, .35);
}
.rn-tool svg { width: 28px; height: 28px; }
.rn-chip { width: 8px; height: 6px; border-radius: 1px; background: #cdbfa8; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rn-dustcloud { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(222, 208, 186, .9), rgba(222, 208, 186, 0) 70%); }
.rn-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 226, 150, 1), 0 0 2px rgba(160, 110, 40, .8); }
.rn-light {
  width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 236, 180, .7) 18%, rgba(255, 220, 140, 0) 65%);
  mix-blend-mode: screen;
}
.rn-wash { width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 20%, rgba(255, 244, 214, .85), rgba(255, 244, 214, 0) 75%); mix-blend-mode: screen; }

.rn-hint {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 5;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(15, 26, 28, .72); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (hover: none) { .rn-hint { display: none; } }

@media (max-width: 860px) {
  .rn-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .rn-hero { padding-bottom: 40px; }
  .rn-tool { width: 40px; height: 40px; }
  .rn-tool svg { width: 22px; height: 22px; }
}

/* ==========================================================
   Masonry Services page: bricklaying hero
   (the wall is built and animated by js/masonry-hero.js)
   ========================================================== */
.ms-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffaf5 0%, #f5e6d8 58%, #e8c9ae 100%);
}
.ms-hero .service-hero__text { position: relative; z-index: 3; }
.ms-hero .eyebrow, .ms-hero .slide__eyebrow { color: #b04a1e; }
.ms-hero .icon { background: #fff; color: #b04a1e; }
.anim .ms-hero .icon::after { border-color: #b04a1e; }
.ms-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.ms-stage { position: relative; width: 106%; margin-left: -4%; cursor: pointer; }
.ms-room { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.ms-shadow {
  position: absolute; left: 4%; right: 4%; bottom: -7%; height: 28%;
  background: radial-gradient(ellipse at 50% 40%, rgba(90, 50, 20, .3) 0, rgba(90, 50, 20, 0) 68%);
}
.ms-final, .ms-canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 14px rgba(80, 40, 12, .22)); }
/* resting state (no script): just the finished shell */
.ms-canvas { display: none; }
.ms-mason { position: absolute; left: 3%; top: 1%; width: 94%; height: auto; z-index: 3; opacity: 0; visibility: hidden; filter: drop-shadow(0 16px 16px rgba(80, 40, 12, .28)); will-change: transform, opacity; }
/* once the script is running the canvas shows the wall going up */
.ms-live .ms-final { display: none; }
.ms-live .ms-canvas { display: block; }

.ms-chip {
  position: absolute; right: 1%; bottom: 2%; z-index: 5;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 34px rgba(80, 40, 12, .2);
}
.ms-chip small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ms-chip b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #b04a1e; font-variant-numeric: tabular-nums; }

/* tools and effects placed over the picture by the script */
.ms-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ms-fx > span { position: absolute; translate: -50% -50%; }
.ms-tool {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #b04a1e;
  box-shadow: 0 10px 24px rgba(80, 40, 12, .34);
  transition: background .25s, color .25s;
}
.ms-tool svg { width: 28px; height: 28px; }
.ms-tool.is-true { background: #17a673; color: #fff; }
.ms-string {
  translate: 0 -50% !important; width: 58%; height: 2px; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, #1d1a14 0 8px, transparent 8px 12px);
}
.ms-brick {
  width: 44px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, #e06a3a, #c4502a);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 10px rgba(80, 40, 12, .3);
}
.ms-dust { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 186, 168, .9), rgba(200, 186, 168, 0) 70%); }
.ms-crumb { width: 6px; height: 5px; border-radius: 1px; background: #c4502a; }
.ms-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 214, 140, 1), 0 0 2px rgba(160, 80, 30, .9); }
.ms-sun {
  top: -10% !important; translate: 0 0 !important; width: 26%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 244, 214, .8), transparent);
  mix-blend-mode: soft-light;
}

@media (max-width: 860px) {
  .ms-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .ms-hero { padding-bottom: 40px; }
  .ms-tool { width: 40px; height: 40px; }
  .ms-tool svg { width: 22px; height: 22px; }
  .ms-brick { width: 32px; height: 15px; }
}
@media (max-width: 860px) {
  /* smaller counters on phones so they don't cover the picture */
  .ms-chip, .pq-chip { padding: 7px 12px; border-radius: 12px; }
  .ms-chip small, .pq-chip small { font-size: 9.5px; }
  .ms-chip b, .pq-chip b { font-size: 20px; }
}

/* ==========================================================
   Painting Services page: room-painting hero
   (the two pictures are blended and animated by js/painting-hero.js)
   ========================================================== */
.pt-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fffdf8 0%, #f6eddc 58%, #ead9bd 100%);
}
.pt-hero .service-hero__text { position: relative; z-index: 3; }
.pt-hero .eyebrow, .pt-hero .slide__eyebrow { color: #a8702a; }
.pt-hero .icon { background: #fff; color: #a8702a; }
.anim .pt-hero .icon::after { border-color: #a8702a; }
.pt-hero .btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .95); }

.pt-stage { position: relative; width: 104%; margin-left: -4%; cursor: pointer; }
.pt-room {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 50px rgba(80, 55, 20, .24), 0 0 0 1px rgba(255, 255, 255, .7);
  background: #e9e4dc;
}
.pt-img, .pt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* resting state (no script): just the painted room */
.pt-img--before, .pt-canvas { display: none; }
/* once the script is running the canvas shows the blend of the two pictures */
.pt-live .pt-img { display: none; }
.pt-live .pt-canvas { display: block; }

/* tools and effects placed over the picture by the script */
.pt-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.pt-fx > span { position: absolute; translate: -50% -50%; }
.pt-tool {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #a8702a;
  box-shadow: 0 10px 24px rgba(60, 40, 15, .35);
}
.pt-tool svg { width: 28px; height: 28px; }
/* a ring in the colour of the paint on the roller */
.pt-tool--roller { box-shadow: 0 0 0 4px var(--paint, #fff), 0 0 0 5px rgba(0, 0, 0, .12), 0 10px 24px rgba(60, 40, 15, .35); }
.pt-tape { translate: 0 0 !important; background: #f2c230; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); opacity: .95; }
.pt-filler { width: 22px; height: 16px; border-radius: 50%; background: #fbfaf6; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pt-dust { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 220, 208, .9), rgba(226, 220, 208, 0) 70%); }
.pt-drip { width: 5px; height: 12px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; transform-origin: 50% 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.pt-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 226, 150, 1), 0 0 2px rgba(160, 110, 40, .8); }
.pt-light {
  width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 236, 180, .7) 18%, rgba(255, 220, 140, 0) 65%);
  mix-blend-mode: screen;
}

.pt-swatch {
  position: absolute; left: 12px; top: 12px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(60, 40, 15, .2);
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.pt-swatch i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pt-swatch i:nth-child(1) { background: #ead9bd; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #a8702a; }
.pt-swatch i:nth-child(2) { background: #cfd8d2; }
.pt-swatch i:nth-child(3) { background: #d9c7c0; }
.pt-swatch span { margin-left: 4px; }

.pt-hint {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 5;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(15, 26, 28, .72); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (hover: none) { .pt-hint { display: none; } }

@media (max-width: 860px) {
  .pt-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .pt-hero { padding-bottom: 40px; }
  .pt-tool { width: 40px; height: 40px; }
  .pt-tool svg { width: 22px; height: 22px; }
  .pt-swatch span { display: none; }
}

/* ==========================================================
   Property Snagging page: inspection hero
   (pins are created and animated by js/snagging-hero.js)
   ========================================================== */
.sn-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #fbfdff 0%, #eef3f6 58%, #dde7ec 100%);
}
.sn-hero .service-hero__text { position: relative; z-index: 3; }
.sn-hero .eyebrow, .sn-hero .slide__eyebrow { color: #c2362b; }
.sn-hero .icon { background: #fff; color: #c2362b; }
.anim .sn-hero .icon::after { border-color: #c2362b; }
.sn-hero .btn--ghost { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .95); }
.sn-sheet .cp-sheet__head b { color: #c2362b; }
.sn-sheet .cp-sheet__bar { background: #e4eaee; }
.sn-sheet .cp-sheet__bar i { background: #c2362b; }
.sn-sheet li::before { border-color: #c9d3d9; }

.sn-stage { position: relative; width: 104%; margin-left: -2%; cursor: pointer; }
.sn-scene { position: relative; padding-bottom: 7%; }
.sn-room {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 50px rgba(30, 50, 70, .24), 0 0 0 1px rgba(255, 255, 255, .7);
  background: #e9e4dc;
}
.sn-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* measuring grid and scan line */
.sn-grid {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 220, 255, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 220, 255, .28) 1px, transparent 1px);
  background-size: 8.333% 12.5%;
  mix-blend-mode: screen;
}
.sn-scan {
  position: absolute; top: 0; left: 0; width: 3px; height: 100%; translate: -50% 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  background: linear-gradient(180deg, transparent, #5fe0ff 15%, #5fe0ff 85%, transparent);
  box-shadow: 0 0 22px 6px rgba(95, 224, 255, .55), -40px 0 60px 10px rgba(95, 224, 255, .12);
}
/* thermal lens: the picture underneath is shown in false colour */
.sn-thermal {
  position: absolute; left: 42%; top: 40%; width: 24%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: invert(1) hue-rotate(200deg) saturate(3.2) contrast(1.15);
  backdrop-filter: invert(1) hue-rotate(200deg) saturate(3.2) contrast(1.15);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.sn-thermal b {
  position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0;
  padding: 4px 11px; border-radius: 999px; background: #17a673; color: #fff;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  opacity: 0; scale: .6; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.6, .5, 1);
}
.sn-thermal.is-clear b { opacity: 1; scale: 1; }
.sn-laser { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sn-laser line { stroke: #ff3b30; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 59, 48, .9)); opacity: 0; }

/* snag pins */
.sn-pins { position: absolute; inset: 0; pointer-events: none; }
.sn-pin {
  --c: #e5484d;
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: auto;
}
.sn-pin i {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: #fff; border: 2px solid #fff;
  font-size: 11px; font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  transition: background .3s;
}
.sn-pin.is-live::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c);
  animation: sn-ping 2.2s ease-out infinite;
}
@keyframes sn-ping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }
.sn-pin.is-sorted[data-cat="finish"]  { --c: #f08c00; }
.sn-pin.is-sorted[data-cat="joinery"] { --c: #2f7de1; }
.sn-pin.is-sorted[data-cat="mep"]     { --c: #8b5cf6; }
.sn-pin b {
  position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 4px;
  padding: 4px 10px; border-radius: 999px; background: #0f1a1c; color: #fff;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s;
  z-index: 2;
}
.sn-pin:hover b, .sn-pin.is-named b { opacity: 1; translate: -50% 0; }
.sn-pin:hover { z-index: 3; }
.sn-spark { position: absolute; translate: -50% -50%; color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(255, 226, 150, 1); pointer-events: none; }

/* the inspector stands in front of the picture */
.sn-officer {
  position: absolute; left: -9%; bottom: 0; width: 60%; height: auto; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(20, 35, 50, .35));
  will-change: transform;
}

/* report card */
.sn-report {
  position: absolute; right: -1%; bottom: 0; z-index: 5; width: 46%; max-width: 250px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 16px 36px rgba(20, 40, 60, .26);
  font-size: 12.5px; color: var(--ink);
}
.sn-report__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 13px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sn-report__head b { font-size: 20px; color: #c2362b; font-variant-numeric: tabular-nums; }
.sn-report__row { display: grid; grid-template-columns: 10px auto 1fr 16px; align-items: center; gap: 8px; padding: 3px 0; font-weight: 600; }
.sn-report__row i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sn-report__row em { height: 5px; border-radius: 5px; background: #e9eef1; overflow: hidden; }
.sn-report__row u { display: block; height: 100%; background: var(--c); transform-origin: left; transform: scaleX(.8); }
.sn-report__row b { text-align: right; font-variant-numeric: tabular-nums; }
.sn-report__row[data-cat="finish"]  { --c: #f08c00; }
.sn-report__row[data-cat="joinery"] { --c: #2f7de1; }
.sn-report__row[data-cat="mep"]     { --c: #8b5cf6; }
.sn-report__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 800; color: #12855c; }
.sn-report__foot i {
  width: 16px; height: 16px; border-radius: 50%; background: #17a673 center / 10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 860px) {
  .sn-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .sn-hero { padding-bottom: 40px; }
  .sn-scene { padding-bottom: 14%; }
  .sn-pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .sn-pin i { font-size: 9px; border-width: 1.5px; }
  .sn-officer { width: 56%; left: -6%; }
  .sn-report { width: 52%; padding: 10px 12px; font-size: 11.5px; }
}

/* job-sheet cards must never push the hero wider than a phone screen */
.ac-hero__grid > * { min-width: 0; }
@media (max-width: 860px) {
  .cp-sheet { max-width: 100%; }
  .cp-sheet li { white-space: normal; }
  .sn-sheet ul { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .sn-sheet li { font-size: 11.5px; }
}

/* ==========================================================
   Disinfection & Cleaning page: fogging hero
   (hotspots are created and animated by js/disinfection-hero.js)
   ========================================================== */
.dc-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #f8fffd 0%, #e7f6f1 58%, #cdeee3 100%);
}
.dc-hero .service-hero__text { position: relative; z-index: 3; }
.dc-hero .icon { background: #fff; }
.dc-hero .btn--ghost { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .95); }
.dc-sheet .cp-sheet__head b { color: var(--accent); }
.dc-sheet .cp-sheet__bar { background: #dff0ea; }
.dc-sheet .cp-sheet__bar i { background: var(--accent); }
.dc-sheet li::before { border-color: #bfd9d0; }

.dc-stage { position: relative; width: 104%; margin-left: -2%; cursor: pointer; }
.dc-scene { position: relative; padding-bottom: 8%; }
.dc-room {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 50px rgba(20, 70, 60, .22), 0 0 0 1px rgba(255, 255, 255, .7);
  background: #dfe5e3;
}
.dc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the room goes dark-violet for the UV scan */
.dc-dim { position: absolute; inset: 0; background: rgba(38, 16, 80, .46); mix-blend-mode: multiply; opacity: 0; visibility: hidden; pointer-events: none; }
.dc-uv {
  position: absolute; top: 0; left: 0; width: 12%; height: 100%; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(170, 110, 255, .55) 45%, rgba(220, 190, 255, .9) 50%, rgba(170, 110, 255, .55) 55%, transparent);
  mix-blend-mode: screen; opacity: 0; visibility: hidden; pointer-events: none;
}

/* hotspots: red and crawling until treated, then green */
.dc-zones { position: absolute; inset: 0; pointer-events: none; }
.dc-zone {
  position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle, rgba(239, 51, 51, .7) 0, rgba(239, 51, 51, .42) 38%, rgba(239, 51, 51, 0) 70%);
  transition: background .5s;
}
.dc-zone.is-live::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  border: 2px solid rgba(255, 70, 70, .9);
  animation: dc-ping 1.4s ease-out infinite;
}
@keyframes dc-ping { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
.dc-zone em { position: absolute; width: 26%; aspect-ratio: 1; translate: -50% -50%; color: #b91c1c; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.dc-zone em svg { width: 100%; height: 100%; display: block; }
.dc-zone.is-clean { background: radial-gradient(circle, rgba(34, 197, 94, .5) 0, rgba(34, 197, 94, .26) 38%, rgba(34, 197, 94, 0) 68%); }
.dc-zone.is-clean em { opacity: 0; }
/* the tick that stays on a treated area */
.dc-zone i {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #16a34a center / 12px no-repeat; border: 2px solid #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  transform: scale(0);
}
.dc-zone.is-clean i { transform: scale(1); }
.dc-zone b {
  position: absolute; left: 50%; bottom: calc(50% + 18px); translate: -50% 4px;
  padding: 4px 10px; border-radius: 999px; background: #0f1a1c; color: #fff;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; z-index: 2;
}
.dc-zone:hover b { opacity: 1; translate: -50% 0; }
.dc-zone:hover { z-index: 3; }

/* fog */
.dc-fog { position: absolute; inset: 0; pointer-events: none; }
.dc-puff {
  position: absolute; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0, rgba(240, 250, 248, .55) 40%, rgba(240, 250, 248, 0) 70%);
  filter: blur(3px);
}
/* fresh-air sweep and the all-clear badge */
.dc-fresh {
  position: absolute; top: 0; left: 0; width: 34%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(160, 255, 210, .5), rgba(255, 255, 255, .55), rgba(160, 255, 210, .5), transparent);
  mix-blend-mode: screen; opacity: 0; visibility: hidden; pointer-events: none;
}
.dc-shield {
  position: absolute; left: 100%; top: 0; translate: 0 0; transform: translate(-108%, 30%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: #16a34a; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(10, 80, 40, .4); z-index: 4; pointer-events: none;
}
.dc-shield i {
  width: 18px; height: 18px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.dc-spark { position: absolute; translate: -50% -50%; color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(150, 255, 200, 1), 0 0 2px rgba(20, 120, 70, .8); pointer-events: none; }
.dc-cloth {
  position: absolute; width: 44px; height: 34px; translate: -50% -50%; border-radius: 8px 12px 9px 13px;
  background: linear-gradient(135deg, #bfe3ff, #7cc4f5);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), 0 8px 16px rgba(20, 60, 90, .35); pointer-events: none;
}

/* the fogging machine stands in front of the picture */
.dc-machine {
  position: absolute; left: -6%; bottom: 0; width: 44%; height: auto; z-index: 5; pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(20, 50, 45, .38));
  will-change: transform;
}
.dc-chip {
  position: absolute; right: 0; bottom: 0; z-index: 5;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 34px rgba(20, 70, 60, .2);
}
.dc-chip small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dc-chip b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .dc-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .dc-hero { padding-bottom: 40px; }
  .dc-scene { padding-bottom: 14%; }
  .dc-zone i { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; background-size: 9px; }
  .dc-chip { padding: 7px 12px; border-radius: 12px; }
  .dc-chip small { font-size: 9.5px; }
  .dc-chip b { font-size: 20px; }
  .dc-shield { font-size: 11.5px; padding: 6px 11px 6px 8px; }
}

/* ==========================================================
   Water Tank Cleaning page: tank-cleaning hero
   (the two pictures are blended and animated by js/watertank-hero.js)
   ========================================================== */
.wk-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: linear-gradient(160deg, #f8fcff 0%, #e3f1fa 58%, #c5e1f3 100%);
}
.wk-hero .service-hero__text { position: relative; z-index: 3; }
.wk-hero .eyebrow, .wk-hero .slide__eyebrow { color: #0b79c4; }
.wk-hero .icon { background: #fff; color: #0b79c4; }
.anim .wk-hero .icon::after { border-color: #0b79c4; }
.wk-hero .btn--ghost { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .95); }
.wk-sheet .cp-sheet__head b { color: #0b79c4; }
.wk-sheet .cp-sheet__bar { background: #dcebf5; }
.wk-sheet .cp-sheet__bar i { background: #0b79c4; }
.wk-sheet li::before { border-color: #bcd3e2; }

.wk-stage { position: relative; width: 104%; margin-left: -4%; cursor: pointer; }
.wk-room {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 50px rgba(20, 60, 100, .24), 0 0 0 1px rgba(255, 255, 255, .7);
  background: #eef3f6;
}
.wk-img, .wk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* resting state (no script): just the clean tank */
.wk-img--before, .wk-canvas { display: none; }
/* once the script is running the canvas shows the blend of the two pictures */
.wk-live .wk-img { display: none; }
.wk-live .wk-canvas { display: block; }

/* clean water running down the inlet pipe */
.wk-pipe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; visibility: hidden; }
.wk-pipe polyline { fill: none; stroke: #bfe6ff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(120, 200, 255, .9)); }

/* tools and effects placed over the picture by the script */
.wk-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.wk-fx > span { position: absolute; translate: -50% -50%; }
.wk-tool {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #0b79c4;
  box-shadow: 0 0 0 4px rgba(150, 215, 255, .7), 0 10px 24px rgba(20, 60, 100, .38);
}
.wk-tool svg { width: 28px; height: 28px; }
.wk-mist { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(225, 242, 255, .5) 45%, rgba(225, 242, 255, 0) 70%); }
.wk-runoff { width: 6px; height: 16px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; transform-origin: 50% 0; background: linear-gradient(#8a8f3a, #5d6b2a); opacity: .9; }
.wk-stream {
  translate: 0 -50% !important; width: 16%; height: 14px; border-radius: 0 8px 8px 0; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, #8c9a5a 0 14px, #a9b47a 14px 24px);
  box-shadow: 0 0 10px rgba(120, 140, 70, .5);
}
.wk-foam {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 60%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, .65) 0, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 78%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(190, 232, 255, .0), rgba(190, 232, 255, .45));
}
.wk-bubble {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .5) 60%, rgba(180, 225, 250, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 100, 150, .25);
}
.wk-spark { color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 0 10px rgba(170, 225, 255, 1), 0 0 2px rgba(30, 100, 170, .8); }
.wk-shine {
  top: -10% !important; translate: 0 0 !important; width: 24%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  mix-blend-mode: soft-light;
}

/* water-level gauge */
.wk-gauge {
  position: absolute; left: 12px; top: 12px; z-index: 5;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px;
  padding: 9px 13px 9px 11px; border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(20, 60, 100, .22);
}
.wk-gauge small { grid-column: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wk-gauge__bar { grid-row: 1 / 3; width: 12px; height: 40px; border-radius: 6px; background: #e3ecf2; overflow: hidden; display: flex; align-items: flex-end; }
.wk-gauge__bar i { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; background: linear-gradient(#a3a85a, #6f7a34); transition: background .5s; }
.wk-gauge.is-clean .wk-gauge__bar i { background: linear-gradient(#7fd0ff, #1f8fe0); }
.wk-gauge b { grid-column: 2; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #6f7a34; font-variant-numeric: tabular-nums; transition: color .5s; }
.wk-gauge.is-clean b { color: #0b79c4; }

.wk-hint {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 5;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(15, 26, 28, .72); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (hover: none) { .wk-hint { display: none; } }

@media (max-width: 860px) {
  .wk-stage { width: 100%; margin: 0 auto; max-width: 560px; }
  .wk-hero { padding-bottom: 40px; }
  .wk-tool { width: 42px; height: 42px; }
  .wk-tool svg { width: 22px; height: 22px; }
  .wk-gauge { padding: 7px 10px 7px 9px; }
  .wk-gauge b { font-size: 18px; }
  .wk-gauge__bar { height: 32px; }
}

/* ==========================================================
   Home & Office Sanitation page: same fogging hero as the
   disinfection page, with its own pictures and a warmer look
   ========================================================== */
.sa-hero { background: linear-gradient(160deg, #fcfff9 0%, #edf7e6 58%, #d5eec6 100%); }
.sa-hero .eyebrow, .sa-hero .slide__eyebrow { color: #2f8a3c; }
.sa-hero .icon { color: #2f8a3c; }
.anim .sa-hero .icon::after { border-color: #2f8a3c; }
.sa-hero .dc-sheet .cp-sheet__head b, .sa-hero .dc-chip b { color: #2f8a3c; }
.sa-hero .dc-sheet .cp-sheet__bar i { background: #2f8a3c; }
.sa-hero .dc-room { box-shadow: 0 26px 50px rgba(40, 80, 30, .22), 0 0 0 1px rgba(255, 255, 255, .7); }
/* this machine picture is wider (its spray is part of the picture) */
.sa-hero .dc-machine { width: 62%; left: -8%; }
/* the sanitising wave that spreads out from the machine */
.dc-wave {
  position: absolute; width: 230%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(120, 230, 150, .95);
  background: radial-gradient(circle, rgba(120, 230, 150, 0) 55%, rgba(120, 230, 150, .28) 100%);
  box-shadow: 0 0 22px rgba(120, 230, 150, .6);
}
@media (max-width: 860px) {
  .sa-hero .dc-machine { width: 60%; left: -7%; }
}

/* ==========================================================
   Careers page
   ========================================================== */
.roles { display: grid; gap: 12px; }
.role {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.role:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }
.role[hidden] { display: none; }
.role h3 { font-size: 19px; margin-bottom: 4px; }
.role p { font-size: 15px; margin-bottom: 12px; }
.role__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role__tags span { padding: 4px 11px; border-radius: 999px; background: var(--bg-soft); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.role__tags span:first-child { background: var(--accent-tint); color: var(--accent-dark); }
.role .btn { flex-shrink: 0; padding: 11px 22px; }
#roles, #apply { scroll-margin-top: 72px; }
@media (max-width: 640px) {
  .role { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* booking form: the package row stays hidden until an annual contract is chosen */
.form__row[hidden] { display: none; }

/* ==========================================================
   About page: "our services in action" wall
   (twenty drawn scenes playing together; js/showcase.js)
   ========================================================== */
.live { background: var(--bg-soft); scroll-margin-top: 72px; }
.live .section__head { margin-bottom: 36px; }
.live__chip {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.live__chip i { width: 9px; height: 9px; border-radius: 50%; background: #e5533d; animation: live-pulse 1.4s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 83, 61, .55); }
  100% { box-shadow: 0 0 0 10px rgba(229, 83, 61, 0); }
}
.live__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.live-tile {
  display: block; overflow: hidden; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.live-tile:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(15, 26, 28, .12); }
.live-tile svg { display: block; width: 100%; height: auto; stroke-linecap: round; stroke-linejoin: round; }
.live-tile svg .v-dr { stroke-dasharray: 1; }
.live-tile svg text { font: 800 17px var(--font); fill: var(--ink); text-anchor: middle; }
.live-tile svg .v-lbl { font-size: 11px; fill: #fff; letter-spacing: .08em; }
.live-tile__meta { display: grid; gap: 3px; padding: 12px 14px 15px; }
.live-tile__meta b { font-size: 14.5px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.live-tile__meta span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
/* without animation the tiles show the finished job: tools and "before" details are left out */
.live.is-static svg .v-tool, .live.is-static svg .v-pre { display: none; }

@media (max-width: 1100px) { .live__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .live__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
  .live__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .live-tile { border-radius: 14px; }
  .live-tile__meta { padding: 10px 11px 12px; }
  .live-tile__meta b { font-size: 13px; }
  .live-tile__meta span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .live__chip i { animation: none; } }

/* ==========================================================
   Privacy Policy and Terms & Conditions pages
   ========================================================== */
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.legal h2 { display: flex; gap: 16px; align-items: baseline; margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 22px; letter-spacing: -.01em; }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h2 span { flex: none; width: 28px; font-size: 14px; font-weight: 800; color: var(--accent); }
.legal p, .legal ul { margin: 0 0 14px 44px; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.legal ul { padding-left: 20px; list-style: disc; }
.legal li { padding: 3px 0; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--ink); }
.legal p a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal .callout p { margin-left: 0; }
@media (max-width: 700px) {
  .legal p, .legal ul { margin-left: 0; }
  .legal h2 { gap: 10px; font-size: 20px; }
}

/* ==========================================================
   Customer reviews page
   ========================================================== */
.stars { display: inline-flex; gap: 2px; }
.stars i { display: block; width: 18px; height: 18px; }
.stars svg { display: block; width: 100%; height: 100%; fill: var(--line); }
.stars .is-on svg { fill: var(--warm); }
.stars--lg i { width: 24px; height: 24px; }

/* the summary: average score, how the stars are spread, and a prompt to write one */
.rating {
  display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center;
  padding: 36px 40px; margin-bottom: 40px; border-radius: 24px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.rating__score { display: grid; gap: 8px; justify-items: center; text-align: center; min-width: 170px; }
.rating__score b { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.rating__score > span { font-size: 14px; color: var(--muted); }
.rating__bars { display: grid; gap: 9px; }
.rating__bar { display: grid; grid-template-columns: 52px 1fr 24px; gap: 12px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.rating__bar div { height: 8px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rating__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--warm); transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.rating__bar em { font-style: normal; color: var(--muted); text-align: right; }
.rating__cta { max-width: 260px; }
.rating__cta h3, .rating__cta h2 { font-size: 19px; margin-bottom: 6px; }
.rating__cta p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }

.review-grid { columns: 3; column-gap: 20px; }
.review {
  break-inside: avoid; display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 20px; padding: 26px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s, opacity .6s;
}
.review:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(15, 26, 28, .1); }
.review[hidden] { display: none; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review__sample { padding: 3px 9px; border-radius: 99px; background: #fff4dc; color: #8a5a00; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.review__text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.review__who { display: flex; align-items: center; gap: 12px; }
.review__avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 800; font-size: 17px; }
.review__who b { display: block; font-size: 15px; color: var(--ink); }
.review__who div span { font-size: 13px; color: var(--muted); }
.review__service { align-self: flex-start; padding: 5px 12px; border-radius: 99px; background: var(--bg-soft); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.review-empty { text-align: center; color: var(--muted); padding: 32px 0; }

.checklist { display: grid; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 30px; font-weight: 600; color: var(--ink); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* star picker in the review form (5 on the left in the page, so the row is reversed) */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { cursor: pointer; line-height: 0; }
.star-input svg { width: 34px; height: 34px; fill: var(--line); transition: fill .15s, transform .15s; }
.star-input label:hover svg { transform: scale(1.12); }
.star-input input:checked ~ label svg,
.star-input label:hover svg, .star-input label:hover ~ label svg { fill: var(--warm); }
.star-input input:focus-visible + label svg { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 1000px) {
  .rating { grid-template-columns: auto 1fr; gap: 32px; }
  .rating__cta { grid-column: 1 / -1; max-width: none; padding-top: 24px; border-top: 1px solid var(--line); }
  .review-grid { columns: 2; }
}
@media (max-width: 640px) {
  .rating { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .rating__score b { font-size: 52px; }
  .review-grid { columns: 1; }
  .review { padding: 22px; }
}

/* blog pictures with a see-through background (product cut-outs): shown whole, not cropped */
.post-card__media img.is-cutout, .article__cover img.is-cutout { object-fit: contain; object-position: center; padding: 7% 9%; }
.post-card__media:has(.is-cutout), .article__cover:has(.is-cutout) { background: linear-gradient(160deg, #f3efe8, #e2dbd0); }
.article__cover img.is-cutout { padding: 4% 16%; }
/* pictures whose subject stands on the left */
.post-card__media img.is-left, .article__cover img.is-left { object-position: 8% center; }
/* pictures whose subject fills the middle; the tall pooja cabinet gets a little less padding */
.post-card__media img.is-center, .article__cover img.is-center { object-position: center 30%; }
.post-card__media img[src$="blog-pooja.webp"] { padding: 5% 9%; }
.article__cover img[src$="blog-pooja.webp"] { aspect-ratio: 16 / 9; padding: 3% 16%; }
.post-card__media:has(img[src$="blog-amc.webp"]), .article__cover:has(img[src$="blog-amc.webp"]) { background: #fff; }
/* tall cut-outs must not stretch their card: pin the picture inside the frame */
.post-card__media:has(.is-cutout) { position: relative; }
.post-card__media img.is-cutout { position: absolute; inset: 0; }

/* ==========================================================
   Language switch (both languages) and the Arabic, right-to-left pages (/ar)
   ========================================================== */
.lang-switch {
  padding: 6px 12px !important; border: 1px solid var(--line) !important; border-radius: 999px;
  font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.3;
  transition: background .2s, color .2s, border-color .2s;
}
.lang-switch:hover { background: var(--ink); border-color: var(--ink) !important; color: #fff !important; }
.lang-switch[lang="ar"] { font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif; }
@media (max-width: 860px) { .lang-switch { align-self: flex-start; margin: 14px 0 4px; } }

[dir="rtl"] { --font: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif; }
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: var(--font); }
/* Arabic letters join up, so spacing between letters must stay natural */
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .slide__title { line-height: 1.35; }
[dir="rtl"] .lang-switch { font-family: "Manrope", system-ui, sans-serif; }
/* phone numbers, e-mail addresses and prices in digits read left to right */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="tel"] { text-align: right; }

/* arrows on buttons and links point the other way */
[dir="rtl"] .btn svg, [dir="rtl"] .card__link svg, [dir="rtl"] .slide__link svg, [dir="rtl"] .post-card__more svg,
[dir="rtl"] .carousel__arrows svg, [dir="rtl"] .breadcrumb svg, [dir="rtl"] .nav__expand + .mega .mega__all svg { transform: scaleX(-1); }

/* things placed with left/right in the English layout */
[dir="rtl"] .service-row ul li { padding: 5px 22px 5px 0; }
[dir="rtl"] .service-row ul li::before { left: auto; right: 0; }
[dir="rtl"] .service-row::before { left: auto; right: -20px; }
[dir="rtl"] .service-group h2::after { left: auto; right: 0; }
[dir="rtl"] .plan__badge { right: auto; left: 20px; }
[dir="rtl"] .plan__list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .plan__list li::before { left: auto; right: 0; }
[dir="rtl"] .rates th, [dir="rtl"] .rates td { text-align: right; }
[dir="rtl"] .terms li { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .terms li::before { left: auto; right: 0; }
[dir="rtl"] .card__link--alt { margin-left: 0; margin-right: 22px; }
[dir="rtl"] .carousel__count { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .carousel__dot i::after, [dir="rtl"] .showcase__tab i { transform-origin: right; }
[dir="rtl"] .legal p, [dir="rtl"] .legal ul { margin-left: 0; margin-right: 44px; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .legal .callout p { margin-right: 0; }
[dir="rtl"] .checklist li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
[dir="rtl"] .rating__bar em { text-align: left; }
[dir="rtl"] .wa-float { right: auto; left: 20px; }
@media (max-width: 700px) { [dir="rtl"] .legal p, [dir="rtl"] .legal ul { margin-right: 0; } }

/* The animated pictures are drawn in fixed positions, so each stage keeps its own left-to-right
   layout; only its place on the page and the Arabic labels inside it follow the page direction. */
[dir="rtl"] [class$="-stage"], [dir="rtl"] [class*="-stage "] { direction: ltr; margin-left: 0; margin-right: auto; }
[dir="rtl"] .cp-sheet, [dir="rtl"] [class$="-stage"] [class*="chip"], [dir="rtl"] [class$="-stage"] [class*="hint"],
[dir="rtl"] [class$="-stage"] [class*="badge"], [dir="rtl"] [class$="-stage"] [class*="label"], [dir="rtl"] [class$="-stage"] [class*="tag"] { direction: rtl; }
[dir="rtl"] .live-tile svg { direction: ltr; }
@media (min-width: 861px) { .nav__links { align-items: center; } }

/* ==========================================================
   Home page: six latest blog articles (text only, minimal)
   ========================================================== */
.home-tips__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.home-tips__head h2 { margin: 0; }
.home-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.home-tip { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 28px; border-top: 1px solid var(--line); color: inherit; }
.home-tip__cat { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.home-tip h3 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; transition: color .2s; }
.home-tip__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--muted); }
.home-tip__meta svg { width: 18px; height: 18px; color: var(--ink); transition: transform .25s, color .2s; }
.home-tip:hover h3 { color: var(--accent); }
.home-tip:hover .home-tip__meta svg { transform: translateX(5px); color: var(--accent); }
[dir="rtl"] .home-tip__meta svg { transform: scaleX(-1); }
[dir="rtl"] .home-tip:hover .home-tip__meta svg { transform: scaleX(-1) translateX(5px); }
@media (max-width: 960px) { .home-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (max-width: 600px) {
  .home-tips { grid-template-columns: 1fr; }
  .home-tip { padding: 20px 0 22px; }
  .home-tip h3 { font-size: 17.5px; }
}

/* ==========================================================
   Bayt logo (images/logo.webp). The picture has empty space around the artwork,
   so the frame shows only the artwork: 1358 x 880 out of 1536 x 1024.
   ========================================================== */
.logo { --logo-h: 58px; flex: none; }
.logo__img { position: relative; display: block; flex: none; overflow: hidden; height: var(--logo-h); width: calc(var(--logo-h) * 1.543); }
.logo__img img { position: absolute; max-width: none; width: auto; height: calc(var(--logo-h) * 1.1636); left: calc(var(--logo-h) * -0.1318); top: calc(var(--logo-h) * -0.0386); }
/* the dark letters need a light plate on the dark footer */
.footer .logo { --logo-h: 76px; display: inline-flex; padding: 12px 16px; border-radius: 16px; background: #fff; }
@media (max-width: 860px) { .header .logo { --logo-h: 50px; } }

/* "First come, first served" photo slide: on laptop-size screens the photo is cropped by height, so the
   technician's pointing hand would reach under the text. Slide the photo left just enough to keep a gap. */
@media (min-width: 1001px) {
  .slide--right .slide__media img { object-position: min(0px, calc(50vw - 740px)) center; }
}

/* Contact page: Google map */
.map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.map-head h2 { margin-bottom: 8px; }
.map-head p { margin: 0; color: var(--ink-soft); }
.map { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #e8ecec; aspect-ratio: 16 / 7; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .map { aspect-ratio: 4 / 5; border-radius: 16px; } }

/* headings that exist for search engines and screen readers but are not shown */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* images carry width/height in the HTML (reserves their space while loading); the article cover sizes itself */
.article__cover img { height: auto; }