/* ===========================================
   LAVENDER HOUSE CLEANING — Design System
   =========================================== */

:root {
  /* Brand: #995ec9 lavender-violet + #a98cb1 muted mauve + soft cream. */
  --lav-50:  #fbf8fd;
  --lav-100: #f5eefb;
  --lav-200: #ebdef6;
  --lav-300: #dcc8ee;
  --lav-400: #c6a7e3;
  --lav-500: #b085d8;
  --lav-600: #995ec9;   /* brand primary */
  --lav-700: #8450b0;
  --lav-800: #6d4193;

  /* Muted mauve — secondary */
  --mauve:       #a98cb1;
  --mauve-light: #c3aec9;
  --mauve-dark:  #8d7096;

  /* Soft cream — replaces all gold */
  --cream:      #faf6ec;
  --cream-mid:  #f3ecdc;
  --cream-deep: #e6dcc6;
  --cream-line: #ded2b8;
  --cream-text: #8a7d64;

  /* Legacy accent names now map to cream so nothing reads as gold */
  --gold:      #f3ecdc;
  --gold-dark: #cbbb98;
  --gold-soft: #faf6ec;

  --ink:   #4a4260;
  --body:  #6f6885;
  --line:  #eee7f6;
  --white: #ffffff;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --r-full: 999px;

  --sh-sm: 0 2px 10px rgba(153, 94, 201, .07);
  --sh:    0 10px 32px rgba(153, 94, 201, .12);
  --sh-lg: 0 24px 64px rgba(153, 94, 201, .18);

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -.015em; }
h3 { font-size: 1.22rem; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; margin: 0 auto; }

section { padding: 88px 0; }
section.tight { padding: 60px 0; }
.bg-soft { background: var(--lav-50); }
.bg-gold { background: var(--cream); }

/* ---------- Eyebrow + headings ---------- */
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--lav-500);
  margin-bottom: 12px;
  font-family: var(--font-body);
}
.center { text-align: center; }
.center .eyebrow { text-align: center; }
.lede { font-size: 1.08rem; color: var(--body); max-width: 620px; }
.center .lede { margin-left: auto; margin-right: auto; }
.sec-head { margin-bottom: 52px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .98rem;
  font-family: var(--font-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
  min-height: 48px;
  line-height: 1.25;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible, .nav-btn:focus-visible, .rail-btn:focus-visible,
.mobile-bar a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--lav-500); outline-offset: 3px;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--lav-700); color: var(--white); box-shadow: 0 8px 20px rgba(111,87,180,.28); }
.btn-primary:hover { background: var(--lav-800); box-shadow: 0 12px 28px rgba(111,87,180,.36); }
.btn-gold { background: var(--cream-mid); color: var(--lav-800); border-color: var(--cream-line); box-shadow: 0 6px 18px rgba(153,94,201,.10); }
.btn-gold:hover { background: var(--cream-deep); color: var(--lav-800); }
.btn-ghost { background: transparent; color: var(--lav-700); border-color: var(--lav-300); }
.btn-ghost:hover { background: var(--lav-50); border-color: var(--lav-500); }
.btn-white { background: var(--white); color: var(--lav-700); }
.btn-white:hover { background: var(--lav-50); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline-white:hover { background: rgba(255,255,255,.14); }
.btn-lg { padding: 17px 38px; font-size: 1.04rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }

/* ---------- Top bar ---------- */
.topbar {
  background: linear-gradient(90deg, var(--lav-600), var(--mauve));
  color: #fff;
  font-size: .84rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: var(--white); font-weight: 700; }
.topbar a:hover { color: var(--cream); }
.topbar .tb-right { display: flex; gap: 20px; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--lav-700); line-height: 1.15; }
.brand .mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--lav-300), var(--lav-600));
  display: grid; place-items: center;
  font-size: 1.15rem;
  box-shadow: var(--sh-sm);
}
.brand small { display: block; font-family: var(--font-body); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lav-400); font-weight: 700; }

.main-nav { display: flex; gap: 26px; align-items: center; font-weight: 600; font-size: .95rem; }
.main-nav a { color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.main-nav a:hover, .main-nav a.active { color: var(--lav-600); border-bottom-color: var(--lav-400); }
.main-nav a.hire { color: var(--mauve-dark); }
.main-nav a.hire:hover, .main-nav a.hire.active { color: var(--mauve-dark); border-bottom-color: var(--mauve); }

.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; padding: 11px 22px; border-radius: var(--r-full); font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .15s, color .15s; }
.nav-btn.pay { background: var(--cream-mid); color: var(--lav-800); border: 1px solid var(--cream-line); }
.nav-btn.pay:hover { background: var(--cream-deep); color: var(--lav-800); }
.nav-btn.call { background: var(--lav-700); color: var(--white); }
.nav-btn.call:hover { background: var(--lav-800); }

.menu-toggle { display: none; background: none; border: 0; font-size: 1.7rem; color: var(--lav-700); cursor: pointer; line-height: 1; width: 46px; height: 46px; border-radius: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.menu-toggle:active { background: var(--lav-100); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--lav-50) 0%, var(--lav-100) 60%, var(--lav-200) 100%);
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before { width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,255,255,.75), transparent 68%); top: -120px; right: -80px; }
.hero::after { width: 300px; height: 300px; background: radial-gradient(circle, rgba(250,246,236,.85), transparent 70%); bottom: -110px; left: -70px; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { color: var(--lav-800); margin-bottom: 18px; }
.hero p.lede { font-size: 1.14rem; margin-bottom: 30px; }

.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pill {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--lav-200);
  color: var(--lav-700);
  border-radius: var(--r-full);
  padding: 7px 16px;
  font-size: .82rem;
  font-weight: 700;
}

.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.stars { color: var(--mauve); font-size: 1.05rem; letter-spacing: 2px; }
.hero-proof .txt { font-size: .88rem; color: var(--body); }
.hero-proof .txt strong { color: var(--ink); }

/* Hero image collage */
.hero-media { position: relative; }
.hero-media .photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.hero-media .photo img { width: 100%; height: 420px; object-fit: cover; }
.float-card {
  position: absolute;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
}
.float-card .big { font-family: var(--font-display); font-size: 1.5rem; color: var(--lav-700); font-weight: 700; line-height: 1; }
.float-card .lbl { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--body); }
.float-card.tl { top: 22px; left: -26px; }
.float-card.br { bottom: 24px; right: -24px; }

/* Image fallback tile */
.ph {
  width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--lav-200), var(--lav-400));
  display: grid; place-items: center;
  color: var(--white); font-family: var(--font-display); font-size: 1.05rem;
  min-height: 220px;
  text-align: center; padding: 20px;
}

/* ---------- Trust strip ---------- */
.trust-strip { background: linear-gradient(90deg, var(--lav-100), var(--lav-200), var(--lav-100)); color: var(--ink); padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.trust-strip .item { font-size: .92rem; font-weight: 600; }
.trust-strip .item span { display: block; font-size: 1.4rem; margin-bottom: 4px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { text-align: center; position: relative; }
.step .num {
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--lav-200);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--lav-600);
  box-shadow: var(--sh-sm);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .96rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--lav-200); }
.card .ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--lav-50); border: 1px solid var(--lav-200);
  display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: .96rem; }

/* Service cards with photos */
.svc-card {
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.svc-card .thumb { height: 200px; overflow: hidden; background: var(--lav-100); }
.svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .thumb img { transform: scale(1.06); }
.svc-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.svc-card .price-tag {
  display: inline-block; align-self: flex-start;
  background: var(--lav-50); color: var(--lav-700);
  border-radius: var(--r-full); padding: 5px 14px;
  font-size: .8rem; font-weight: 700; margin-bottom: 10px;
}
.svc-card p { font-size: .94rem; flex: 1; }
.svc-card .more { margin-top: 14px; font-weight: 700; color: var(--lav-600); font-size: .92rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .n { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--lav-600); font-weight: 700; line-height: 1; }
.stat .l { font-size: .86rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--body); margin-top: 8px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gal-item { border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--sh-sm); background: var(--lav-100); }
.gal-item img { width: 100%; height: 250px; object-fit: cover; transition: transform .5s ease; }
.gal-item:hover img { transform: scale(1.07); }
.gal-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(84,66,130,.82), transparent);
  color: var(--white); padding: 26px 16px 14px;
  font-weight: 700; font-size: .9rem;
}
.gal-item.tall img { height: 250px; }
.gal-item.wide { grid-column: span 2; }

/* ---------- Before / After slider ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.ba-grid:has(> :only-child) { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.ba {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh); background: var(--lav-100);
  user-select: none; touch-action: none;
  min-height: 220px;
}
/* padding-box gives the height even where aspect-ratio is unsupported */
.ba::before { content: ""; display: block; padding-bottom: 62.5%; }
@supports (aspect-ratio: 16 / 10) {
  .ba { aspect-ratio: 16 / 10; min-height: 0; }
  .ba::before { display: none; }
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after-layer { clip-path: inset(0 0 0 50%); }
.ba .ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: var(--white); transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,.35); pointer-events: none;
}
.ba .ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); box-shadow: var(--sh);
  display: grid; place-items: center;
  color: var(--lav-700); font-size: .95rem; font-weight: 800;
  pointer-events: none;
}
.ba input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba .tag {
  position: absolute; top: 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  padding: 6px 13px; border-radius: var(--r-full); text-transform: uppercase;
  pointer-events: none; backdrop-filter: blur(4px);
}
.ba .tag-before { left: 14px; background: rgba(84,66,130,.75); color: var(--white); }
.ba .tag-after  { right: 14px; background: var(--cream); color: var(--lav-800); }
.ba-caption { text-align: center; font-weight: 700; color: var(--ink); margin-top: 14px; font-size: .98rem; }
.ba-hint { text-align: center; font-size: .86rem; color: var(--body); margin-top: 4px; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.split .media img { width: 100%; height: 460px; object-fit: cover; }
.check-list { list-style: none; margin-top: 22px; }
.check-list li { padding: 9px 0 9px 34px; position: relative; font-weight: 600; color: var(--ink); font-size: .98rem; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 9px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lav-100); color: var(--lav-600);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}

/* ---------- Pricing table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: var(--sh); background: var(--white); }
table.pricing { width: 100%; border-collapse: collapse; min-width: 640px; }
table.pricing th, table.pricing td { padding: 17px 16px; text-align: center; border-bottom: 1px solid var(--line); font-size: .96rem; }
table.pricing thead th { background: linear-gradient(135deg, var(--lav-500), var(--lav-600)); color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: .88rem; letter-spacing: .02em; }
table.pricing td:first-child, table.pricing th:first-child { text-align: left; font-weight: 700; color: var(--ink); padding-left: 24px; }
table.pricing tbody tr:hover td { background: var(--lav-50); }
table.pricing tbody tr:last-child td { border-bottom: none; }
table.pricing .popular { background: var(--cream) !important; }
.badge-pop {
  display: inline-block; background: var(--cream-deep); color: var(--lav-800);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-full); margin-left: 8px; vertical-align: middle;
}
.note { font-size: .88rem; color: var(--body); margin-top: 16px; text-align: center; }

/* ---------- Add-ons ---------- */
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.addon-grid li {
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px dashed var(--line);
  font-weight: 600; color: var(--ink); font-size: .96rem;
}
.addon-grid li .amt { color: var(--lav-600); font-weight: 800; white-space: nowrap; font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- Testimonials ---------- */
.quote-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 28px;
  display: flex; flex-direction: column;
}
.quote-card .qm { font-family: var(--font-display); font-size: 2.6rem; color: var(--lav-300); line-height: .8; margin-bottom: 12px; }
.quote-card p { font-size: .97rem; flex: 1; }
.quote-card .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote-card .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(140deg, var(--lav-400), var(--lav-600));
  color: var(--white); display: grid; place-items: center;
  font-weight: 700; font-family: var(--font-display); font-size: 1.05rem;
}
.quote-card .who b { color: var(--ink); display: block; font-size: .95rem; }
.quote-card .who small { color: var(--body); font-size: .8rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 12px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--lav-300); box-shadow: var(--sh-sm); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 56px 20px 24px;
  font-weight: 700; color: var(--ink); font-size: 1.02rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--lav-500); font-weight: 400; line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq .ans { padding: 0 24px 22px; font-size: .97rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--lav-200), var(--lav-300) 55%, var(--lav-200));
  color: var(--ink);
  padding: 76px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);
  top: -180px; right: -120px;
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: var(--lav-800); margin-bottom: 14px; }
.cta-band p { color: var(--ink); max-width: 560px; margin: 0 auto 30px; font-size: 1.06rem; }

/* ---------- Payment page ---------- */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pay-card {
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 28px; text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.pay-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--lav-300); }
.pay-card.featured { border-color: var(--lav-400); box-shadow: var(--sh); position: relative; }
.pay-card.featured::before {
  content: "MOST POPULAR"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--lav-600); color: var(--white); font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; padding: 5px 16px; border-radius: var(--r-full); white-space: nowrap;
}
.pay-card .amt { font-family: var(--font-display); font-size: 2.7rem; color: var(--lav-700); font-weight: 700; line-height: 1; margin: 10px 0 4px; }
.pay-card .sub { font-size: .88rem; margin-bottom: 18px; }
.pay-card ul { list-style: none; text-align: left; margin: 0 0 22px; flex: 1; }
.pay-card ul li { padding: 7px 0 7px 26px; position: relative; font-size: .92rem; }
.pay-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--lav-500); font-weight: 700; }

.secure-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; color: var(--body); font-size: .86rem; flex-wrap: wrap; }
.secure-row .chip { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 14px; font-weight: 700; font-size: .8rem; color: var(--ink); }

.setup-note {
  background: var(--cream); border: 1px dashed var(--cream-line);
  border-radius: var(--r); padding: 22px 26px; margin-top: 40px;
  font-size: .92rem; color: var(--ink);
}
.setup-note b { color: var(--lav-700); }
.setup-note code { background: var(--white); padding: 2px 7px; border-radius: 5px; font-size: .86rem; border: 1px solid var(--line); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 38px; box-shadow: var(--sh);
  max-width: 680px; margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .86rem; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: .97rem; font-family: inherit; color: var(--ink);
  background: var(--lav-50); transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lav-400); background: var(--white);
  box-shadow: 0 0 0 4px var(--lav-100);
}
.field textarea { resize: vertical; }

/* ---------- Info boxes ---------- */
.info-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; }
.info-box h3 { margin-bottom: 14px; }
.info-box ul { list-style: none; }
.info-box ul li { padding: 8px 0 8px 26px; position: relative; font-size: .96rem; border-bottom: 1px solid var(--line); }
.info-box ul li:last-child { border-bottom: none; }
.info-box ul li::before { content: "🪻"; position: absolute; left: 0; font-size: .84rem; }

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 32px 24px; text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--lav-300); }
.contact-card .ic { font-size: 2rem; margin-bottom: 10px; }
.contact-card .big {
  display: block; font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 700; color: var(--lav-700); margin: 8px 0 12px;
}
.contact-card p { font-size: .9rem; }

/* ---------- Footer ---------- */
footer.site-footer { background: linear-gradient(180deg, var(--lav-50), var(--lav-100)); color: var(--body); padding: 66px 0 0; font-size: .93rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
.foot-grid h4 { color: var(--lav-800); font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; }
.foot-grid ul { list-style: none; }
.foot-grid ul li { margin-bottom: 9px; }
.foot-grid a:hover { color: var(--lav-700); }
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; color: var(--lav-800); margin-bottom: 14px; }
.foot-brand .mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--lav-300), var(--lav-600)); display: grid; place-items: center; }
.foot-phone { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--lav-700); font-weight: 700; margin: 6px 0 4px; }
.foot-phone:hover { color: var(--lav-600); }
.foot-bottom { border-top: 1px solid var(--line); padding: 22px 0; text-align: center; font-size: .84rem; color: var(--body); }

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(63,49,104,.14);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-bar a {
  flex: 1; text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 10px 6px; border-radius: 12px;
  font-weight: 700; font-size: .84rem;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mobile-bar a:active { filter: brightness(.93); transform: scale(.97); }
.mobile-bar .mb-call { background: var(--lav-700); color: var(--white); }
.mobile-bar .mb-text { background: var(--lav-100); color: var(--lav-700); }
.mobile-bar .mb-pay { background: var(--cream-mid); color: var(--lav-800); }

/* Chat widget bubble/panel — lifted above .mobile-bar on mobile so the
   two fixed elements don't overlap; .mobile-bar is ~68px tall + safe area. */
.cw-bubble { bottom: 20px; }
.cw-panel { bottom: 86px; }
@media (max-width: 820px) {
  .cw-bubble { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .cw-panel { bottom: calc(144px + env(safe-area-inset-bottom)); }
}
@media (max-height: 480px) and (orientation: landscape) {
  .cw-bubble { bottom: 20px; }
  .cw-panel { bottom: 86px; }
}

/* ---------- Responsive ---------- */






/* ============================================================
   MOTION LAYER — scroll reveal, parallax, lightbox, rails
   ============================================================ */

/* Scroll progress bar */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--lav-400), var(--lav-700));
  z-index: 999; transition: width .1s linear;
  box-shadow: 0 0 12px rgba(153,94,201,.45);
}

/* ---- Reveal on scroll ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="wipe"]  { transform: none; clip-path: inset(0 100% 0 0); opacity: 1; transition: clip-path 1s cubic-bezier(.76,0,.24,1); }
.js [data-reveal].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* stagger children */
.js [data-stagger] > * { opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.js [data-stagger].in > * { opacity: 1; transform: none; }

/* ---- Ken Burns drift on hero photo ---- */
@keyframes kenburns {
  0%   { transform: scale(1.06) translate3d(0,0,0); }
  50%  { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
  100% { transform: scale(1.06) translate3d(0,0,0); }
}
.hero-media .photo img { animation: kenburns 22s ease-in-out infinite; }

/* ---- Floating lavender petals ---- */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal {
  position: absolute; top: -8%;
  font-size: 15px; opacity: .32;
  animation: drift linear infinite;
  will-change: transform;
}
@keyframes drift {
  0%   { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; }
  10%  { opacity: .38; }
  90%  { opacity: .28; }
  100% { transform: translate3d(var(--dx, 40px), 112vh, 0) rotate(420deg); opacity: 0; }
}

/* ---- Parallax ---- */
[data-parallax] { will-change: transform; }

/* ---- 3D tilt cards ---- */
@media (hover: none), (pointer: coarse) { .tilt { transform: none !important; } }
.tilt { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.tilt-inner { transform: translateZ(30px); }

/* ---- Magnetic / shine buttons ---- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-22deg); transition: left .6s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---- Photo rail (drag / swipe / snap) ---- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 22px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.rail.dragging * { pointer-events: none; }
.rail-item {
  flex: 0 0 clamp(240px, 30vw, 340px);
  scroll-snap-align: center;
  border-radius: var(--r-lg); overflow: hidden;
  position: relative; background: var(--lav-100);
  box-shadow: var(--sh); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.rail-item img { width: 100%; height: 340px; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.rail-item:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.rail-item:hover img { transform: scale(1.08); }
.rail-item .cap {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(84,66,130,.88), rgba(84,66,130,.32) 55%, transparent);
  color: #fff; padding: 40px 20px 18px;
}
.rail-item .cap b { display: block; font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 3px; }
.rail-item .cap span { font-size: .84rem; opacity: .85; }
.rail-item .zoom {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--lav-700);
  display: grid; place-items: center; font-size: .95rem;
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s;
}
.rail-item:hover .zoom { opacity: 1; transform: scale(1); }

.rail-nav { display: flex; justify-content: center; gap: 12px; margin-top: 10px; align-items: center; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--lav-200); background: var(--white);
  color: var(--lav-700); font-size: 1.15rem; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.rail-btn:hover { background: var(--lav-700); color: #fff; border-color: var(--lav-600); transform: scale(1.08); box-shadow: var(--sh); }
.rail-dots { display: flex; gap: 7px; }
.rail-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lav-200); transition: width .3s, background .3s;
  display: block;
}
.rail-dots i.on { width: 24px; border-radius: 4px; background: var(--lav-600); }
.rail-hint { text-align: center; font-size: .84rem; color: var(--body); margin-top: 2px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(74,58,116,.90);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; transform: scale(.94); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.lightbox.on figure { transform: scale(1); }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: var(--r); box-shadow: 0 30px 90px rgba(60,45,100,.45); }
.lightbox figcaption { color: #fff; margin-top: 16px; font-family: var(--font-display); font-size: 1.15rem; }
.lightbox figcaption small { display: block; font-family: var(--font-body); font-size: .86rem; opacity: .7; margin-top: 4px; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.1); }
.lb-prev { left: 3vw; } .lb-next { right: 3vw; }
.lb-close {
  position: absolute; top: 24px; right: 3vw;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.lb-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
.lb-count { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .86rem; letter-spacing: .1em; }

/* ---- Marquee of service areas ---- */
.marquee { overflow: hidden; position: relative; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.chip-city {
  background: var(--white); border: 1px solid var(--lav-200);
  color: var(--lav-700); border-radius: var(--r-full);
  padding: 8px 18px; font-size: .88rem; font-weight: 700; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
}
.chip-city:hover { background: var(--lav-700); color: #fff; transform: translateY(-2px); }

/* ---- Region accordion cards ---- */
.region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.region {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.region:hover { box-shadow: var(--sh); border-color: var(--lav-200); transform: translateY(-3px); }
.region summary {
  cursor: pointer; list-style: none; padding: 22px 56px 22px 24px;
  display: flex; align-items: center; gap: 14px; position: relative;
}
.region summary::-webkit-details-marker { display: none; }
.region summary .rico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px;
  background: var(--lav-50); border: 1px solid var(--lav-200);
  display: grid; place-items: center; font-size: 1.3rem;
}
.region summary b { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); display: block; }
.region summary small { color: var(--body); font-size: .84rem; }
.region summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--lav-500); transition: transform .3s;
}
.region[open] summary::after { content: "−"; }
.region .cities { padding: 0 24px 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.region .cities span {
  background: var(--lav-50); border: 1px solid var(--lav-100);
  color: var(--lav-700); border-radius: var(--r-full);
  padding: 6px 14px; font-size: .84rem; font-weight: 600;
  transition: background .18s, color .18s, transform .18s;
}
.region .cities span:hover { background: var(--lav-700); color: #fff; transform: translateY(-2px); }

/* ---- Wage highlight (hiring) ---- */
.wage-hero {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--cream); border: 2px solid var(--cream-line);
  border-radius: var(--r-lg); padding: 18px 30px;
  box-shadow: var(--sh); margin-bottom: 22px;
}
.wage-hero .amt { font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; color: var(--lav-700); line-height: 1; }
.wage-hero .per { font-weight: 700; color: var(--ink); font-size: 1rem; }
.wage-hero .tagline { font-size: .84rem; color: var(--body); display: block; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .petals { display: none; }
}




/* ============================================================
   RESPONSIVE SYSTEM
   ============================================================ */

/* ---- Universal overflow guards ---- */
img, table, pre { max-width: 100%; }
/* overflow-x:hidden on body breaks position:sticky — clip on <html> does not */
html { overflow-x: clip; }
.wrap { width: 100%; }

/* ---- 1150px : tighten nav ---- */
@media (max-width: 1150px) {
  .main-nav { gap: 18px; font-size: .9rem; }
  .nav-btn { padding: 10px 16px; font-size: .84rem; }
  .brand { font-size: 1.18rem; }
}

/* ---- 1000px : stack hero + split, 2-up grids ---- */
@media (max-width: 1000px) {
  section { padding: 74px 0; }
  .hero { padding: 64px 0 74px; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 42px; }
  .hero-media { order: -1; }
  .split .media img { height: 340px; }
  .hero-media .photo img { height: 360px; }
  .float-card.tl { top: 14px; left: 10px; }
  .float-card.br { bottom: 14px; right: 10px; }
  .g4, .stats, .pay-grid, .contact-grid, .gallery, .perks { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .region-grid { grid-template-columns: 1fr; }
}

/* ---- 900px : nav collapses to drawer ---- */

/* ---- 820px : single-column content, sticky bar on ---- */
@media (max-width: 820px) {
  section { padding: 58px 0; }
  section.tight { padding: 44px 0; }
  .sec-head { margin-bottom: 38px; }
  .wrap { padding: 0 20px; }

  .g3, .g2, .steps, .addon-grid, .ba-grid { grid-template-columns: 1fr; }
  .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .gal-item.wide { grid-column: span 1; }

  /* buttons go full-width and stack */
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .btn-row .btn { width: 100%; white-space: normal; }
  .btn-lg { padding: 16px 24px; font-size: 1rem; }
  .center .btn-row { align-items: stretch; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 80px; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 26px 20px; }
  .hero-media .photo img { height: 290px; }
  .split .media img { height: 280px; }
  .topbar .tb-right { display: none; }
  .topbar .wrap { justify-content: center; text-align: center; }
  .topbar { font-size: .8rem; }

  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .lb-close { right: 14px; top: 14px; }
  .rail-item img { height: 270px; }
  .faq summary { padding: 18px 48px 18px 18px; font-size: .98rem; }
  .faq .ans { padding: 0 18px 20px; }
  .region summary { padding: 18px 48px 18px 18px; }
  .region .cities { padding: 0 18px 20px; }
}

/* ---- 620px : phones ---- */
@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  section { padding: 48px 0; }
  .wrap { padding: 0 16px; }

  .g4, .stats, .pay-grid, .contact-grid, .gallery, .perks,
  .trust-strip .wrap, .foot-grid { grid-template-columns: 1fr; }

  .trust-strip .wrap { gap: 14px; text-align: left; }
  .trust-strip .item { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
  .trust-strip .item span { margin: 0; font-size: 1.25rem; }

  .float-card { display: none; }
  .hero { padding: 44px 0 54px; }
  .hero-media .photo img { height: 240px; }
  .hero-badges { gap: 8px; }
  .pill { font-size: .78rem; padding: 6px 13px; }

  .pay-card, .contact-card, .card, .quote-card, .info-box { padding: 26px 20px; }
  .pay-card .amt { font-size: 2.3rem; }
  .wage-hero { padding: 15px 22px; width: 100%; justify-content: center; }
  .wage-hero .amt { font-size: 2.4rem; }

  .rail-item { flex: 0 0 82vw; }
  .rail-item img { height: 240px; }
  .rail-nav { gap: 10px; }
  .rail-btn { width: 44px; height: 44px; }

  .secure-row { gap: 7px; font-size: .8rem; }
  .secure-row .chip { padding: 5px 11px; font-size: .75rem; }

  .foot-grid { gap: 30px; text-align: left; }
  footer.site-footer { padding: 48px 0 0; }

  .stat .n { font-size: 2.2rem; }
  .step .num { width: 54px; height: 54px; font-size: 1.2rem; }
  .lightbox figcaption { font-size: 1rem; }
  .marquee-track { animation-duration: 34s; }
}

/* ---- 400px : small phones ---- */
@media (max-width: 400px) {
  .wrap { padding: 0 14px; }
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand .mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 1rem; }
  .brand small { font-size: .58rem; letter-spacing: .12em; }
  .nav-btn.pay { padding: 9px 13px; font-size: .78rem; }
  .btn { padding: 14px 20px; font-size: .94rem; }
  .btn-lg { padding: 15px 20px; font-size: .96rem; }
  .mobile-bar a { font-size: .78rem; }
  .rail-item { flex: 0 0 86vw; }
  .pay-card .amt { font-size: 2rem; }
  .wage-hero .amt { font-size: 2.1rem; }
  table.pricing th, table.pricing td { padding: 13px 10px; font-size: .88rem; }
}

/* ---- Short landscape phones ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 34px 0 40px; }
  .hero-media .photo img { height: 200px; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .main-nav { max-height: 70vh; }
}

/* ---- Touch devices: kill hover-only effects ---- */
@media (hover: none) {
  .btn:hover, .nav-btn:hover, .card:hover, .svc-card:hover,
  .pay-card:hover, .contact-card:hover, .rail-item:hover { transform: none; }
  .btn::after { display: none; }
  .rail-item:hover img, .svc-card:hover .thumb img, .gal-item:hover img { transform: none; }
  .marquee-track { animation-play-state: running !important; }
}

/* ---- Print ---- */
@media print {
  .topbar, .site-header, .mobile-bar, .progress-bar, .petals,
  .rail-nav, .rail-hint, .cta-band, .lightbox { display: none !important; }
  body { padding-bottom: 0; }
  section { padding: 18px 0; page-break-inside: avoid; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ============================================================
   QUOTE BUILDER + PAY MODAL
   ============================================================ */
.quote-builder {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh);
  overflow: hidden; max-width: 940px; margin: 0 auto;
}
.qb-body { padding: 32px; }
.qb-step { margin-bottom: 26px; }
.qb-step > label.qb-title {
  display: block; font-weight: 800; color: var(--ink);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}
.qb-opts { display: grid; gap: 10px; }
.qb-opts.c2 { grid-template-columns: repeat(2, 1fr); }
.qb-opts.c4 { grid-template-columns: repeat(4, 1fr); }
.qb-opt { position: relative; }
.qb-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qb-opt span {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 60px; padding: 12px 14px; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--lav-50); font-weight: 700; color: var(--ink); font-size: .92rem;
  transition: border-color .18s, background .18s, transform .18s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.qb-opt span small { font-weight: 600; color: var(--body); font-size: .78rem; }
.qb-opt input:checked + span {
  border-color: var(--lav-600); background: var(--lav-100);
  box-shadow: 0 0 0 3px var(--lav-100);
}
.qb-opt input:focus-visible + span { outline: 3px solid var(--lav-500); outline-offset: 2px; }
.qb-opt span:active { transform: scale(.98); }

.qb-addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.qb-addon {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .93rem; font-weight: 600; color: var(--ink);
  transition: background .15s, border-color .15s; min-height: 46px;
}
.qb-addon:hover { background: var(--lav-50); border-color: var(--line); }
.qb-addon input { width: 20px; height: 20px; accent-color: var(--lav-600); flex: 0 0 20px; }
.qb-addon .amt { margin-left: auto; font-weight: 800; color: var(--lav-700); white-space: nowrap; }

.qb-total {
  background: linear-gradient(135deg, var(--lav-100), var(--lav-200));
  padding: 26px 32px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.qb-total .lbl { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--lav-800); }
.qb-total .sum { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; color: var(--lav-800); line-height: 1; }
.qb-total .breakdown { font-size: .84rem; color: var(--ink); margin-top: 4px; }
.qb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Pay modal */
.pay-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(74,58,116,.72); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.pay-modal.on { opacity: 1; pointer-events: auto; }
.pay-modal .sheet {
  background: var(--white); border-radius: var(--r-lg);
  max-width: 480px; width: 100%; padding: 34px 30px;
  box-shadow: var(--sh-lg); text-align: center;
  transform: translateY(16px) scale(.97); transition: transform .35s cubic-bezier(.22,1,.36,1);
  max-height: 90vh; overflow-y: auto;
}
.pay-modal.on .sheet { transform: none; }
.pay-modal h3 { font-size: 1.4rem; margin-bottom: 8px; }
.pay-modal p { font-size: .95rem; margin-bottom: 20px; }
.pay-modal .big-total {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: var(--lav-700); line-height: 1; margin: 6px 0 4px;
}
.pay-modal .modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pay-modal .modal-actions .btn { width: 100%; }
.pay-modal .close-x {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.2); color: #fff; font-size: 1.2rem; cursor: pointer;
}

@media (max-width: 820px) {
  .qb-body { padding: 22px 18px; }
  .qb-total { padding: 22px 18px; flex-direction: column; align-items: stretch; text-align: center; }
  .qb-actions { flex-direction: column; }
  .qb-actions .btn { width: 100%; }
  .qb-opts.c4 { grid-template-columns: repeat(2, 1fr); }
  .qb-addons { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .qb-opts.c2, .qb-opts.c4 { grid-template-columns: 1fr; }
  .qb-total .sum { font-size: 2.3rem; }
}

/* ---------- Real logo mark in header & footer ---------- */
.brand .mark {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 46px; height: 46px; flex: 0 0 46px;
}
.foot-brand .mark { width: 42px; height: 42px; flex: 0 0 42px; }
@media (max-width: 400px) {
  .brand .mark { width: 38px; height: 38px; flex-basis: 38px; }
}

/* ---------- Legal pages ---------- */
.legal h2 { font-size: 1.3rem; margin: 34px 0 10px; color: var(--lav-800); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); }

/* ---------- Static before/after composite ---------- */
.ba-static {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh); background: var(--lav-100); cursor: zoom-in;
  min-height: 220px;
}
.ba-static::before { content: ""; display: block; padding-bottom: 62.5%; }
@supports (aspect-ratio: 16 / 10) {
  .ba-static { aspect-ratio: 16 / 10; min-height: 0; }
  .ba-static::before { display: none; }
}
.ba-static img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ba-static:hover img { transform: scale(1.04); }
.ba-static .zoom {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--lav-700);
  display: grid; place-items: center; font-size: .95rem;
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s;
}
.ba-static:hover .zoom { opacity: 1; transform: scale(1); }

/* ---------- Detail (close-up grime) cards ---------- */
.detail-card {
  position: relative; margin: 0; border-radius: var(--r); overflow: hidden;
  background: var(--lav-100); box-shadow: var(--sh-sm); cursor: zoom-in;
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.detail-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.detail-card img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform .55s ease; }
.detail-card:hover img { transform: scale(1.06); }
.detail-card figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(84,66,130,.92), rgba(84,66,130,.35) 60%, transparent);
  color: #fff; padding: 44px 18px 16px;
}
.detail-card figcaption b { display: block; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 3px; }
.detail-card figcaption span { font-size: .84rem; opacity: .9; }
.detail-card .zoom {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--lav-700);
  display: grid; place-items: center; font-size: .9rem;
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s;
}
.detail-card:hover .zoom { opacity: 1; transform: scale(1); }
@media (max-width: 620px) { .detail-card img { height: 240px; } }


/* ============================================================
   NAVIGATION — desktop bar + reliable mobile drawer
   ============================================================ */

/* Skip link (keyboard users) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--lav-700); color: #fff; padding: 14px 22px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Drawer backdrop */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(74,58,116,.55);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.nav-backdrop.on { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav-row { padding: 10px 0; gap: 12px; }
  .nav-actions .nav-btn.call { display: none; }
  .menu-toggle { display: grid; place-items: center; }

  /* full-screen drawer — position:fixed, no fragile ancestors */
  .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(88vw, 340px);
    z-index: 99;
    background: #fff;
    box-shadow: -14px 0 40px rgba(74,58,116,.22);
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0;
    padding: 84px 22px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(102%);
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    visibility: hidden;
  }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav a {
    display: flex; align-items: center;
    min-height: 56px; padding: 14px 4px;
    font-size: 1.06rem; font-weight: 600;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
  }
  .main-nav a.active { border-left-color: var(--lav-600); padding-left: 12px; color: var(--lav-700); }
  .main-nav a:last-of-type { border-bottom: none; }

  /* actions pinned inside the drawer */
  .drawer-cta { margin-top: 22px; display: grid; gap: 10px; }
  .drawer-cta a {
    border: 0 !important; min-height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); font-weight: 700; font-size: 1rem;
    padding: 15px 20px !important;
  }
  .drawer-cta .d-call { background: var(--lav-700); color: #fff; }
  .drawer-cta .d-text { background: var(--lav-100); color: var(--lav-800); }
  .drawer-cta .d-pay  { background: var(--cream-mid); color: var(--lav-800); }
  .drawer-close {
    position: absolute; top: 16px; right: 16px;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff;
    font-size: 1.35rem; color: var(--lav-700); cursor: pointer;
    display: grid; place-items: center;
  }
  .drawer-close:active { background: var(--lav-100); }
}

@media (min-width: 901px) {
  .drawer-cta, .drawer-close, .nav-backdrop { display: none !important; }
}

/* prevent background scroll while the drawer is open */
body.nav-open { overflow: hidden; }

/* ---------- Footer: collapse into sections on phones ---------- */
.foot-col > h4 { margin-bottom: 16px; }
@media (max-width: 620px) {
  .foot-col { border-bottom: 1px solid rgba(109,65,147,.14); }
  .foot-col:last-child { border-bottom: none; }
  .foot-col > h4 {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; margin: 0; padding: 18px 0; min-height: 56px;
    font-size: .8rem;
  }
  .foot-col > h4::after {
    content: "+"; font-size: 1.4rem; font-weight: 400;
    color: var(--lav-600); line-height: 1;
  }
  .foot-col.open > h4::after { content: "\2212"; }
  .foot-col > ul, .foot-col > p { display: none; padding-bottom: 16px; }
  .foot-col.open > ul, .foot-col.open > p { display: block; }
  .foot-col ul li { margin-bottom: 0; }
  .foot-col ul li a { display: block; padding: 12px 0; min-height: 46px; }
  .foot-grid { gap: 0; padding-bottom: 26px; }
  .foot-brand-col { padding-bottom: 22px; }
}

/* ---------- Photographic logo mark ---------- */
.brand .mark, .foot-brand .mark {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(109,65,147,.18);
  object-fit: cover;
}

/* ---------- Logo used inside a photo slot: fit, never crop ---------- */
.brandshot {
  object-fit: contain !important;
  background: var(--cream);
  padding: 10px;
}
.svc-card .thumb .brandshot { height: 200px; width: 100%; padding: 14px; }
.split .media .brandshot { height: auto; width: 100%; max-height: 460px; padding: 18px; }
@media (max-width: 1000px) { .split .media .brandshot { max-height: 340px; } }
@media (max-width: 820px)  { .split .media .brandshot { max-height: 280px; } }