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

:root {
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --text: #1a1a1a;
  --text-2: #444444;
  --text-3: #777777;
  /* Single source of truth for the Fixly green. --brand mirrors --green so
     the homepage's .home {} overrides line up with the rest of the site. */
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --green-border: #bbf7d0;
  --brand: #16a34a;
  --brand-deep: #15803d;
  --brand-soft: #f0fdf4;
  --red: #dc2626;
  --gold: #d97706;
  --border: #e5e7eb;
  --r: 10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Lexend', -apple-system, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
  -webkit-font-smoothing:antialiased; font-size:16px;
  overflow-x:hidden;
}

.wrap { max-width:880px; margin:0 auto; padding:0 20px; }
section { padding:56px 0; }

/* ── Top bar ── */
.topbar {
  padding:10px 16px; background:var(--green-bg); border-bottom:1px solid var(--green-border);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.85rem; color:var(--green); font-weight:600;
}
.topbar i { width:16px; height:16px; flex-shrink:0; }

/* ── Headings ── */
.sh { margin-bottom:28px; }
.sh-tag {
  font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--green); margin-bottom:6px; display:block;
}
.sh h2 { font-size:clamp(1.5rem,3.5vw,2rem); font-weight:700; line-height:1.25; }
.sh p { color:var(--text-2); margin-top:6px; font-size:0.95rem; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:12px 24px;
  border-radius:8px; font-size:0.9rem; font-weight:600;
  text-decoration:none; border:none; cursor:pointer; transition:all .15s ease;
}
.btn-fill { background:var(--green); color:#fff; }
.btn-fill:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--green); color:var(--green); }
.btn i { width:16px; height:16px; }

/* ═══ HERO ═══ */
.hero { padding:52px 0 44px; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.hero .wrap { display:flex; align-items:center; gap:40px; }
.hero-content { flex:1; }
.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.82rem; font-weight:600; color:var(--gold); margin-bottom:14px;
}
.hero h1 { font-size:clamp(1.7rem,4vw,2.3rem); font-weight:700; line-height:1.15; margin-bottom:14px; }
.hero h1 em { font-style:normal; color:var(--green); }
.hero-sub { color:var(--text-2); font-size:1rem; line-height:1.65; max-width:420px; margin-bottom:24px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-img {
  width:220px; height:220px; border-radius:50%; overflow:hidden;
  border:3px solid var(--border); flex-shrink:0; box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-nums {
  display:flex; gap:28px; margin-top:28px; padding-top:20px;
  border-top:1px solid var(--border);
}
.hero-nums dt { font-size:1.15rem; font-weight:700; color:var(--green); }
.hero-nums dd { font-size:0.72rem; color:var(--text-3); margin-top:1px; }

/* ═══ PRICING CARD ═══ */
.pricing-card {
  background:var(--bg); border:2px solid var(--green); border-radius:12px;
  padding:28px 32px; display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap;
}
.pricing-card .pc-main { flex:1; min-width:220px; }
.pricing-card .pc-price { font-size:2rem; font-weight:700; color:var(--green); }
.pricing-card .pc-label { font-size:0.85rem; color:var(--text-2); margin-top:2px; }
.pricing-card .pc-includes { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.pricing-card .pc-includes li {
  display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text-2);
}
.pricing-card .pc-includes li i { color:var(--green); width:16px; height:16px; flex-shrink:0; }
.pricing-card .pc-extra {
  min-width:200px; background:var(--bg-alt); border:1px solid var(--border);
  border-radius:8px; padding:18px;
}
.pricing-card .pc-extra h4 { font-size:0.82rem; font-weight:600; margin-bottom:6px; }
.pricing-card .pc-extra p { font-size:0.82rem; color:var(--text-2); line-height:1.5; }

/* ═══ COMPARE ═══ */
.compare { background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.compare-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-col {
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r);
  padding:24px 22px;
}
.compare-col.best { border-color:var(--green); position:relative; }
.compare-col.best::before {
  content:'BETTER DEAL'; position:absolute; top:-11px; right:20px;
  background:var(--green); color:#fff; font-size:0.65rem; font-weight:700;
  padding:3px 10px; border-radius:100px; letter-spacing:0.5px;
}
.compare-col h3 { font-size:0.95rem; font-weight:700; margin-bottom:2px; }
.compare-col .muted { font-size:0.78rem; color:var(--text-3); }
.compare-col .amt { font-size:1.8rem; font-weight:700; margin:10px 0 2px; }
.compare-col .amt s { font-size:0.95rem; color:var(--text-3); margin-right:6px; }
.compare-col .per { font-size:0.78rem; color:var(--text-3); margin-bottom:14px; }
.compare-col ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.compare-col li { display:flex; align-items:flex-start; gap:8px; font-size:0.85rem; color:var(--text-2); }
.compare-col li i { flex-shrink:0; margin-top:2px; width:16px; height:16px; }
.compare-col li i.yes { color:var(--green); }
.compare-col li i.no { color:var(--red); }
.compare-bottom {
  margin-top:16px; text-align:center; font-size:0.85rem; color:var(--text-2);
  padding:10px; background:var(--green-bg); border:1px solid var(--green-border);
  border-radius:8px;
}
.compare-bottom strong { color:var(--green); }

/* ═══ SERVICES ═══ */
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svc {
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r);
  padding:18px; cursor:pointer; transition:border-color .15s;
}
.svc:hover { border-color:var(--green); }
.svc-head { display:flex; align-items:center; gap:10px; }
.svc-head i { color:var(--green); width:22px; height:22px; flex-shrink:0; }
.svc-head h3 { font-size:0.9rem; font-weight:600; }
.svc-sub { font-size:0.78rem; color:var(--text-3); margin-top:4px; padding-left:32px; }
.svc-detail {
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding-left:32px; font-size:0.82rem; color:var(--text-2); line-height:1.55;
}
.svc.open .svc-detail { max-height:260px; margin-top:8px; }
.svc-detail .photo-link {
  color:var(--green); cursor:pointer; font-weight:600;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  margin-top:6px;
}
.svc-detail .photo-link:hover { text-decoration:underline; }
.svc-detail .photo-link i { width:14px; height:14px; }
.svc-note { margin-top:12px; font-size:0.82rem; color:var(--text-3); text-align:center; }

/* ═══ LIGHTBOX ═══ */
.lightbox {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.85); align-items:center; justify-content:center;
  padding:20px;
}
.lightbox.active { display:flex; }
.lb-inner { max-width:540px; width:100%; position:relative; }
.lb-close {
  position:absolute; top:-40px; right:0; background:none; border:none;
  color:#fff; font-size:1.5rem; cursor:pointer; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
}
.lb-img { width:100%; border-radius:10px; display:block; }
.lb-caption { color:#ccc; text-align:center; font-size:0.82rem; margin-top:10px; }
.lb-nav { display:flex; justify-content:center; gap:12px; margin-top:14px; }
.lb-nav button {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.lb-nav button:hover { background:rgba(255,255,255,0.25); }
.lb-dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.lb-dot {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3);
  cursor:pointer;
}
.lb-dot.active { background:#fff; }

/* ═══ STEPS ═══ */
.steps { background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step { text-align:center; }
.step-n {
  width:40px; height:40px; margin:0 auto 12px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; font-size:0.9rem; font-weight:700;
  background:var(--green); color:#fff;
}
.step h3 { font-size:0.92rem; font-weight:600; margin-bottom:4px; }
.step p { font-size:0.82rem; color:var(--text-2); max-width:220px; margin:0 auto; }

/* ═══ BOOKING ═══ */
#book { scroll-margin-top:40px; }
.book-box {
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r);
  padding:28px; margin-top:8px;
}
.book-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.book-progress {
  grid-column:1/-1; width:100%; max-width:none;
  display:flex; flex-direction:column; gap:8px; margin-bottom:6px;
}
.book-progress-top {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.book-progress-count {
  font-size:0.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3);
}
.book-progress-label {
  font-size:1rem; font-weight:700; color:var(--text);
}
.book-progress-bar {
  width:100%; height:5px; background:var(--border); border-radius:999px; overflow:hidden;
}
.book-progress-fill {
  width:33.333%; height:100%; background:linear-gradient(90deg, var(--green), #4ade80); border-radius:inherit;
  transition:width .2s ease;
}
.book-step-panel { display:none; grid-column:1/-1; grid-template-columns:inherit; gap:14px; }
.book-step-panel.active { display:grid; }
.fg { display:flex; flex-direction:column; gap:4px; }
.fg.full { grid-column:1/-1; }
.fg label { font-size:0.78rem; font-weight:600; color:var(--text-2); }
.fg input, .fg select, .fg textarea {
  width:100%; max-width:100%;
  background:var(--bg); border:1.5px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--text); font-family:inherit; font-size:0.9rem;
  outline:none; transition:border-color .15s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--green); }
.fg textarea { resize:vertical; min-height:80px; }
.fg .hint { font-size:0.73rem; color:var(--text-3); margin-top:2px; }

.book-alert {
  display:none; margin-bottom:14px; padding:12px 14px; border-radius:10px;
  font-size:0.82rem; line-height:1.5; border:1px solid transparent;
}
.book-alert-error {
  background:#fff2f2; color:#8c1d18; border-color:#f3c3bf;
}
.book-alert-info {
  background:var(--green-bg); color:var(--text); border-color:var(--green-border);
}

/* ── Address autocomplete dropdown ── */
.addr-wrap { position:relative; }
.addr-suggestions {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
  background:#fff; border:1.5px solid var(--green); border-top:none;
  border-radius:0 0 8px 8px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
  max-height:240px; overflow-y:auto;
}
.addr-item {
  padding:10px 14px; cursor:pointer; font-size:0.88rem; color:var(--text);
  display:flex; flex-direction:column; gap:1px;
  border-bottom:1px solid var(--border); transition:background .1s;
}
.addr-item:last-child { border-bottom:none; }
.addr-item:hover, .addr-item.active { background:var(--green-bg); }
.addr-item strong { font-weight:600; }
.addr-sub { font-size:0.75rem; color:var(--text-3); }
.addr-empty { color:var(--text-3); font-style:italic; cursor:default; }

/* ── Mini review near booking form ── */
.book-mini-review {
  display:flex; align-items:center; gap:8px; margin-top:2px; margin-bottom:6px;
  font-size:0.82rem; color:var(--text-2); font-style:italic;
}
.service-pills {
  display:flex; flex-wrap:wrap; gap:8px;
}
.service-pill {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  border:1.5px solid var(--border); background:var(--bg); font-size:0.82rem; font-weight:600;
  color:var(--text-2); cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
.service-pill input {
  width:16px; height:16px; accent-color:var(--green); margin:0;
}
.service-pill:has(input:checked) {
  border-color:var(--green); background:var(--green-bg); color:var(--green);
}

.slot-header {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.slot-note { font-size:0.75rem; color:var(--text-3); }
.slot-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(145px, 1fr)); gap:10px;
}
.slot-btn {
  min-height:46px; padding:11px 12px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font:inherit; font-size:0.86rem; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.slot-btn:hover {
  border-color:var(--green); background:var(--green-bg);
}
.slot-btn.active {
  border-color:var(--green); background:var(--green-bg); color:var(--green);
  box-shadow:0 0 0 2px rgba(52, 128, 84, 0.08);
}
.slot-btn-secondary {
  border-style:dashed; color:var(--text-2);
}
.slot-btn-disabled {
  cursor:not-allowed; color:var(--text-3); background:var(--bg-alt);
}

.dur-wrap { grid-column:1/-1; }
.dur-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.dur-header label { font-size:0.78rem; font-weight:600; color:var(--text-2); }
.dur-val { font-size:0.88rem; color:var(--green); font-weight:700; }
.dur-range {
  width:100%; -webkit-appearance:none; appearance:none; height:6px;
  background:var(--border); border-radius:3px; outline:none; cursor:pointer;
}
.dur-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--green); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer;
}
.dur-ticks { display:flex; justify-content:space-between; margin-top:4px; font-size:0.7rem; color:var(--text-3); }

.book-summary {
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--green-bg); border:1px solid var(--green-border);
  border-radius:8px; flex-wrap:wrap; gap:8px; margin-top:4px;
}
.book-summary .price { font-size:1.3rem; font-weight:700; color:var(--green); }
.book-summary .detail { font-size:0.75rem; color:var(--text-3); }
.book-summary .tr-price { font-size:0.85rem; text-decoration:line-through; color:var(--red); font-weight:600; }
.book-nav {
  grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; margin-top:6px; flex-wrap:wrap;
}
.review-card {
  grid-column:1/-1; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px;
}
.review-card h4 { font-size:0.86rem; margin-bottom:10px; }
.review-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; }
.review-item { min-width:0; }
.review-item-label { display:block; font-size:0.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.review-item-value { font-size:0.84rem; color:var(--text-2); word-break:break-word; }

.btn-submit { grid-column:1/-1; padding:14px; font-size:0.95rem; justify-content:center; margin-top:4px; }
.book-fine {
  grid-column:1/-1; text-align:center; font-size:0.73rem; color:var(--text-3);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.book-fine i { width:14px; height:14px; }
.payment-icons {
  grid-column:1/-1; display:flex; gap:12px; align-items:center; justify-content:center;
  font-size:0.73rem; color:var(--text-3); margin-top:2px;
}
.payment-icons i { width:14px; height:14px; color:var(--green); }

.success-actions {
  margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

/* ═══ REVIEWS ═══ */
.reviews { background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.rev-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.rev {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:20px;
}
.rev-stars { color:var(--gold); font-size:0.82rem; margin-bottom:6px; letter-spacing:2px; }
.rev p { font-size:0.88rem; color:var(--text-2); line-height:1.6; margin-bottom:10px; }
.rev-who { font-size:0.8rem; font-weight:600; }
.rev-when { font-size:0.7rem; color:var(--text-3); margin-top:1px; }

.badges { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.badge {
  display:flex; align-items:center; gap:6px; padding:7px 12px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  font-size:0.78rem; font-weight:600;
}
.badge i { color:var(--green); width:15px; height:15px; }

/* ═══ AREA ═══ */
.area-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.area-tag {
  padding:5px 12px; background:var(--bg-alt); border:1px solid var(--border);
  border-radius:100px; font-size:0.78rem; color:var(--text-2);
}

/* ═══ FAQ ═══ */
.faq-sec { background:var(--bg-alt); border-top:1px solid var(--border); }
.faq-list { max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.faq-q {
  padding:13px 18px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; font-weight:600; font-size:0.88rem; user-select:none;
}
.faq-q i { transition:transform .2s; color:var(--text-3); width:16px; height:16px; }
.faq-item.open .faq-q i { transform:rotate(45deg); color:var(--green); }
.faq-a {
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 18px; font-size:0.85rem; color:var(--text-2); line-height:1.6;
}
.faq-item.open .faq-a { max-height:300px; padding:0 18px 14px; }

/* ═══ FOOTER ═══ */
footer {
  text-align:center; padding:24px 20px; border-top:1px solid var(--border);
  font-size:0.75rem; color:var(--text-3);
}
footer a { color:var(--green); text-decoration:none; }

/* ═══ FIXLY BRAND OVERRIDES (additive, late in the cascade) ═══ */
:root {
  /* Brand palette — single source. --brand mirrors --green at :root above. */
  --ink: #0f1f12;            /* deep near-black green */
  --ink-2: #2c3a30;
}

/* ── Sticky site nav ─────────────────────────────────────────── */
.site-nav {
  position:sticky; top:0; z-index:90;
  background:#ffffffcc; backdrop-filter:saturate(160%) blur(8px);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-nav-wrap {
  max-width:1080px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
  position:relative; z-index:2;  /* sits above the drawer in the nav stacking context */
}
.site-nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-nav-logo img { height:44px; width:44px; display:block; border-radius:10px; }
.site-nav-logo .wordmark { font-weight:700; letter-spacing:.01em; color:var(--ink); font-size:1.22rem; }
.site-nav-links {
  display:flex; align-items:center; gap:22px; margin-left:auto;
}
.site-nav-links a {
  text-decoration:none; color:var(--text-2); font-size:0.9rem; font-weight:500;
  transition:color .15s;
}
.site-nav-links a:hover { color:var(--brand); }
.site-nav-cta {
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
  border-radius:8px; background:var(--green); color:#fff !important;
  font-size:0.88rem !important; font-weight:600 !important;
  transition:filter .15s;
}
.site-nav-cta:hover { filter:brightness(1.08); color:#fff !important; }
.site-nav-cta i { width:14px; height:14px; }
.site-nav-burger {
  display:none; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto;
  color:var(--text-2);
}
.site-nav-burger i { width:22px; height:22px; }

/* ── Mobile drawer (v3 — opaque, polished, green CTA) ──────────
   Architecture:
   - Drawer is a fixed-position FULL-VIEWPORT panel with a SOLID
     white sheet that wholly covers the page. No transparent gaps:
     every link is a transparent pill sitting on top of the same
     opaque white panel — so when you look "between" two pills, you
     still see white, not the page below.
   - Sliding is transform-only (GPU composited, no jank).
   - z-index 1000 ensures we sit above every page section, including
     anything that escapes the .site-nav stacking context.
   - Inner header strip carries the brand + close (X) button so the
     experience feels like a real native sheet, not just a dropdown.
   - Body scroll lock via `.nav-open` class on <body>. */
.site-nav-drawer {
  position:fixed;
  inset:0;
  z-index:1000;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  transform:translateY(-100%);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  visibility:hidden;
  pointer-events:none;
}
.site-nav-drawer.open {
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}
.site-nav-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:#ffffff;
  flex-shrink:0;
  min-height:64px;
}
.site-nav-drawer-header .site-nav-drawer-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.site-nav-drawer-header .site-nav-drawer-brand img {
  width:36px; height:36px; border-radius:8px; display:block;
}
.site-nav-drawer-header .site-nav-drawer-brand .wordmark {
  font-weight:700; font-size:1.05rem; color:var(--text); letter-spacing:-0.01em;
}
.site-nav-drawer-close {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:#f3f4f6; border:1px solid var(--border);
  border-radius:999px; cursor:pointer;
  color:var(--text-2);
  transition:background .15s, color .15s, transform .12s;
}
.site-nav-drawer-close:hover { background:#e5e7eb; color:var(--text); }
.site-nav-drawer-close:active { transform:scale(.94); }
.site-nav-drawer-close i { width:20px; height:20px; }

.site-nav-drawer-body {
  flex:1; min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 20px calc(28px + env(safe-area-inset-bottom));
  background:#ffffff;             /* hard opaque base — fills all gaps */
  display:flex; flex-direction:column; gap:10px;
}
.site-nav-drawer-body a {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  color:var(--text);
  font-size:1.02rem;
  font-weight:600;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  min-height:56px;
  box-shadow:0 1px 2px rgba(15, 31, 18, 0.03);
  transition:border-color .15s, color .15s, background .15s, transform .12s;
}
.site-nav-drawer-body a i {
  width:18px; height:18px; color:var(--text-3);
  transition:color .15s;
}
.site-nav-drawer-body a:hover,
.site-nav-drawer-body a:focus-visible {
  border-color:var(--green);
  color:var(--green);
  outline:none;
}
.site-nav-drawer-body a:hover i,
.site-nav-drawer-body a:focus-visible i { color:var(--green); }
.site-nav-drawer-body a:active { transform:scale(.985); }

/* Green CTA inside drawer (the "Pay for completed work" button).
   Specificity bumped (.site-nav-drawer .site-nav-drawer-body .site-nav-cta)
   so it wins over any per-page .home/.gallery-page overrides. */
.site-nav-drawer .site-nav-drawer-body .site-nav-cta,
body.home .site-nav-drawer .site-nav-drawer-body .site-nav-cta {
  justify-content:center;
  text-align:center;
  background:var(--green) !important;
  color:#ffffff !important;
  border:1px solid var(--green) !important;
  font-size:1.02rem !important;
  font-weight:700 !important;
  padding:18px 18px !important;
  border-radius:14px !important;
  margin-top:8px;
  min-height:60px;
  box-shadow:0 12px 28px rgba(22, 163, 74, 0.28), 0 2px 6px rgba(22, 163, 74, 0.18) !important;
}
.site-nav-drawer .site-nav-drawer-body .site-nav-cta i,
body.home .site-nav-drawer .site-nav-drawer-body .site-nav-cta i {
  color:#ffffff !important; width:18px; height:18px;
}
.site-nav-drawer .site-nav-drawer-body .site-nav-cta:hover,
.site-nav-drawer .site-nav-drawer-body .site-nav-cta:focus-visible,
body.home .site-nav-drawer .site-nav-drawer-body .site-nav-cta:hover {
  background:#13923f !important;
  border-color:#13923f !important;
  color:#ffffff !important;
}

.site-nav-drawer-foot {
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  font-size:0.82rem;
  color:var(--text-3);
  display:flex; align-items:center; gap:8px;
  background:#fafafa;
  flex-shrink:0;
}
.site-nav-drawer-foot i { width:14px; height:14px; color:var(--green); }

/* Body scroll lock + opaque nav while menu is open. */
body.nav-open { overflow:hidden; touch-action:none; }
body.nav-open .site-nav {
  background:#ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ═══ LIQUID-GLASS PREMIUM POLISH ═══
   A small global pass that lifts the whole site from "clean" to "premium":
   - Selection color matches the brand.
   - Focus rings use the brand green at a soft alpha.
   - Sticky nav has a more refined glass blur + a 1px inner highlight.
   - Buttons, cards get smoother transitions and an extra micro-shadow.
   - Smooth scrolling and motion-safe defaults.
   - Sticky mobile CTA gets a tiny halo on the icon mark. */
::selection { background: rgba(22, 163, 74, 0.18); color: var(--text); }
:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Refined site nav glass — slightly brighter, crisper highlight on top edge */
.site-nav {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Subtle hover for nav links — gives the nav some life on desktop */
.site-nav-links a {
  position: relative;
  transition: color .18s ease;
}
.site-nav-links a:not(.site-nav-cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.site-nav-links a:not(.site-nav-cta):hover::after { transform: scaleX(1); }

/* Refined drawer header — soft blur on its bottom border */
.site-nav-drawer-header {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 92%, rgba(255,255,255,0) 100%);
  border-bottom-color: rgba(15, 31, 18, 0.06);
}

/* Sticky CTA — subtle halo behind the icon mark on hover */
.fixly-stickycta .sc-mark { transition: transform .2s ease, box-shadow .2s ease; }
.fixly-stickycta:hover .sc-mark {
  transform: rotate(-4deg) scale(1.04);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Premium tactile button feel — applies sitewide */
button, .btn, .btn-fill, .btn-ghost, .btn-x, .pay-btn, .site-nav-cta {
  transition: transform .12s cubic-bezier(.2,.7,.2,1),
              box-shadow .2s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease;
}

/* Gallery filter chip glass — refined hover + active */
.g-filterbar {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Gallery card — softer shadow at rest, premium lift on hover */
.g-card {
  box-shadow: 0 6px 18px rgba(15, 31, 18, 0.06), 0 1px 2px rgba(15, 31, 18, 0.04);
}
.g-card:hover {
  box-shadow: 0 18px 40px rgba(15, 31, 18, 0.14), 0 2px 6px rgba(15, 31, 18, 0.06);
}

/* ── Trust strip (logos / verified row under hero) ─────────────── */
.trust-strip {
  background:var(--bg-alt); border-bottom:1px solid var(--border);
  padding:14px 0;
}
.trust-strip .wrap {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px 24px;
}
.trust-item {
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem;
  color:var(--text-2); font-weight:600; letter-spacing:.01em;
}
.trust-item i { width:16px; height:16px; color:var(--green); flex-shrink:0; }
.trust-item .pipe { color:var(--border); padding:0 6px; }

/* ── Gallery page ─────────────────────────────────────────────── */
.gallery-hero {
  padding:58px 0 34px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.gallery-hero h1 {
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.08;
  font-weight:700;
  margin:10px auto 14px;
  max-width:760px;
}
.gallery-hero p {
  color:var(--text-2);
  font-size:1.02rem;
  max-width:620px;
  margin:0 auto 22px;
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.work-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,31,18,0.04);
}
.work-card img {
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
  background:var(--bg-alt);
}
.work-card.landscape img { aspect-ratio:4 / 3; }
.work-card figcaption {
  padding:12px 14px;
  font-size:0.88rem;
  font-weight:600;
  color:var(--text);
}
.work-card figcaption span {
  display:block;
  margin-top:2px;
  font-size:0.74rem;
  font-weight:400;
  color:var(--text-3);
}

/* ── Hero refresh (old TaskRabbit arrangement, Fixly brand) ──────────── */
.hero-brand { text-align:center; padding:46px 0 28px; }
.hero-brand .wrap {
  display:block;
  max-width:900px;
}
.hero-brand-lockup {
  display:inline-flex; align-items:center; gap:12px;
  margin:0 auto 18px; padding:9px 16px 9px 10px;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  box-shadow:0 8px 24px rgba(15,31,18,0.05);
}
.hero-brand-lockup img { width:52px; height:52px; display:block; border-radius:13px; }
.hero-brand-lockup span {
  font-size:1.08rem; font-weight:700; color:var(--ink); letter-spacing:.01em;
}
.hero-brand .hero-tag { justify-content:center; display:inline-flex; margin-bottom:14px; }
.hero-brand h1 {
  font-size:clamp(1.9rem, 4.1vw, 2.8rem); font-weight:700; line-height:1.08;
  margin:0 auto 14px; max-width:700px;
}
.hero-brand .hero-actions { justify-content:center; }
.hero-brand .hero-actions .btn-ghost {
  background:#f3eee4;
  border-color:#e3d8c3;
}
.hero-brand .hero-actions .btn-ghost:hover {
  background:#efe4cf;
  border-color:#d8c4a1;
  color:var(--ink);
}

/* ── Section refinements ────────────────────────────────────── */
.sh.center { text-align:center; }
.sh.center p { margin-left:auto; margin-right:auto; max-width:560px; }
.section-tight { padding:44px 0; }

/* Footer CTA card */
.cta-card {
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color:#fff; padding:36px 32px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.cta-card h2 { font-size:clamp(1.4rem,3vw,1.8rem); font-weight:700; }
.cta-card p { color:#e8f6ea; font-size:0.95rem; max-width:480px; }
.cta-card .btn-fill {
  background:#fff; color:var(--brand);
}
.cta-card .btn-fill:hover { filter:brightness(1); background:#f4faf5; }
.cta-card .btn-ghost {
  background:transparent; color:#fff; border-color:rgba(255,255,255,0.4);
}
.cta-card .btn-ghost:hover { color:#fff; border-color:#fff; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background:var(--ink); color:#cdd6cf; padding:48px 0 24px;
  border-top:none; text-align:left;
  font-size:0.85rem;
}
.site-footer .wrap { max-width:1080px; }
.footer-cols {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
}
.footer-lockup { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-lockup img { width:42px; height:42px; display:block; border-radius:10px; }
.footer-lockup span { color:#fff; font-size:1.18rem; font-weight:700; letter-spacing:.01em; }
.footer-brand p { color:#8e9b91; font-size:0.85rem; line-height:1.6; max-width:280px; }
.footer-col h4 {
  font-size:0.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; margin-bottom:12px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-col a {
  color:#cdd6cf; text-decoration:none; font-size:0.86rem; transition:color .15s;
}
.footer-col a:hover { color:#fff; }
.footer-col a i { width:14px; height:14px; margin-right:4px; vertical-align:-2px; }

.footer-bottom {
  margin-top:32px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; color:#8e9b91; font-size:0.78rem;
}
.footer-bottom .stripe-mark {
  display:inline-flex; align-items:center; gap:4px; color:#cdd6cf;
}
.footer-bottom .stripe-mark i { width:14px; height:14px; color:var(--brand); }

/* ── Service cards — small icon + heading + description ────── */
.svc.icon-card {
  display:flex; gap:14px; cursor:default; align-items:flex-start;
}
.svc.icon-card .svc-ico {
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.svc.icon-card .svc-ico i { width:22px; height:22px; }
.svc.icon-card .svc-body { min-width:0; }
.svc.icon-card .svc-body h3 { font-size:0.95rem; margin-bottom:2px; }
.svc.icon-card .svc-body p { font-size:0.84rem; color:var(--text-2); line-height:1.55; }

/* ── Stripe trust strip inside /pay/ ───────────────────────── */
.stripe-strip {
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center;
  gap:10px 18px; flex-wrap:wrap;
  margin-top:6px; padding:10px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-alt);
  font-size:0.78rem; color:var(--text-3);
}
.stripe-strip strong { color:var(--text-2); font-weight:600; }
.stripe-strip i { width:14px; height:14px; color:var(--green); }
.stripe-strip .card-chips { display:inline-flex; gap:6px; align-items:center; }
.stripe-strip .card-chip {
  display:inline-block; padding:2px 6px; border-radius:4px;
  background:#fff; border:1px solid var(--border); font-size:0.66rem; font-weight:700;
  color:var(--text-2); letter-spacing:.02em;
}

/* ── Legal / static page (used by /privacy /terms /refunds) ── */
.legal { padding:48px 0; }
.legal .wrap { max-width:760px; }
.legal h1 { font-size:1.8rem; margin-bottom:6px; }
.legal .updated { font-size:0.82rem; color:var(--text-3); margin-bottom:24px; }
.legal h2 { font-size:1.05rem; margin:28px 0 8px; }
.legal p, .legal li { font-size:0.92rem; color:var(--text-2); line-height:1.7; }
.legal ul { padding-left:20px; margin:6px 0; }
.legal a { color:var(--green); }
.legal .legal-card {
  margin-top:32px;
  padding:18px 20px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:14px;
  font-size:0.88rem;
  line-height:1.7;
}
.legal .legal-card strong { color:var(--text); }

/* ═══ Sticky mobile Pay CTA (v3 — compact, classy FAB) ═══
   Pill is now small: an icon-only circle by default. The "Pay" label fades
   in only when the button is meant to be visible (after the user scrolls
   past every real Pay CTA on the page). At rest the button has a 48px
   tap target, never blocks more than a thumb of the screen, and disappears
   completely whenever a real Pay button is already visible. */
.fixly-stickycta {
  position:fixed;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:80;
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 6px;
  background:linear-gradient(180deg, #18b352 0%, #16a34a 60%, #13923f 100%);
  color:#ffffff !important;
  border-radius:999px;
  box-shadow:
    0 10px 22px rgba(22, 163, 74, 0.30),
    0 3px 8px rgba(22, 163, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  text-decoration:none;
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:-0.005em;
  transition:transform .14s cubic-bezier(.2,.7,.2,1),
             box-shadow .2s ease,
             opacity .22s ease;
  opacity:0;                       /* JS gates via .is-visible */
  transform:translateY(8px) scale(.94);
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
.fixly-stickycta.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.fixly-stickycta:hover { transform:translateY(-1px); }
.fixly-stickycta:active { transform:scale(.94); }
.fixly-stickycta .sc-mark {
  width:36px; height:36px;
  border-radius:999px;
  background:#ffffff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.10);
  flex-shrink:0;
}
.fixly-stickycta .sc-mark img {
  width:26px; height:26px; display:block; border-radius:7px;
  max-width:26px; max-height:26px;
  object-fit:contain;
}
.fixly-stickycta .sc-label {
  line-height:1; padding-right:4px;
  font-size:0.86rem;
}

@media (max-width: 820px) {
  .fixly-stickycta { display:inline-flex; }
}
@media (max-width: 360px) {
  /* Tight phones — collapse to icon-only so the button doesn't crowd. */
  .fixly-stickycta { padding:5px; }
  .fixly-stickycta .sc-label { display:none; }
}
/* Hide cleanly when the nav drawer is open. */
body.nav-open .fixly-stickycta {
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(8px) scale(.94) !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:700px) {
  section { padding:40px 0; }
  .hero .wrap { flex-direction:column-reverse; text-align:center; gap:20px; }
  .hero-img { width:150px; height:150px; margin:0 auto; }
  .hero-sub { margin:0 auto 24px; }
  .hero-actions { justify-content:center; }
  .hero-nums { justify-content:center; }
  .pricing-card { flex-direction:column; gap:16px; }
  .compare-cols { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .steps-row { grid-template-columns:1fr; gap:24px; }
  .book-form { grid-template-columns:1fr; }
  .slot-header { flex-direction:column; align-items:flex-start; }
  .review-list { grid-template-columns:1fr; }
  .book-nav { flex-direction:column; }
  .topbar { font-size:0.75rem; padding:8px 10px; gap:4px; }
  .topbar i { width:14px; height:14px; }
  /* Nav becomes a burger drawer */
  .site-nav-links { display:none; }
  .site-nav-burger { display:inline-flex; }
  /* Footer stacks */
  .footer-cols { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .hero-brand {
    padding:22px 0 14px;
  }
  .hero-brand-lockup {
    margin-bottom:8px;
    padding:8px 14px 8px 10px;
  }
  .hero-brand-lockup img {
    width:42px;
    height:42px;
  }
  .hero-brand-lockup span {
    font-size:0.96rem;
  }
  .hero-brand .hero-tag {
    margin-bottom:8px;
    font-size:0.78rem;
  }
  .hero-brand h1 {
    font-size:clamp(1.5rem, 7.2vw, 2.1rem);
    line-height:1.06;
    margin-bottom:8px;
  }
  .hero-brand .hero-actions {
    gap:8px;
    margin:0 auto;
    width:100%;
    max-width:460px;
  }
  .hero-brand .hero-actions .btn {
    width:100%;
    justify-content:center;
    min-height:44px;
  }

  /* Swipeable carousels for dense sections on mobile */
  .svc-grid,
  .rev-grid,
  .area-tags {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:10px;
    padding:2px 2px 10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .svc-grid::-webkit-scrollbar,
  .rev-grid::-webkit-scrollbar,
  .area-tags::-webkit-scrollbar {
    display:none;
  }
  .svc-grid > *,
  .rev-grid > *,
  .area-tags > * {
    scroll-snap-align:start;
    flex:0 0 86%;
  }
  .area-tags {
    justify-content:flex-start;
  }
  .area-tag {
    flex:0 0 auto;
  }

  .book-box {
    padding:20px 14px;
  }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:12px; }
}

@media (max-width:520px) {
  .hero-brand h1 {
    font-size:clamp(1.4rem, 7.4vw, 1.9rem);
  }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-hero { padding:42px 0 26px; }
}

/* ═══ GLOBAL MOBILE SAFETY ═══ */
@media (max-width:700px) {
  /* Prevent any element from blowing past viewport */
  body { overflow-x:hidden; }
  img, video, iframe, table { max-width:100%; }

  /* Footer always single column on phones */
  .footer-cols { grid-template-columns:1fr !important; gap:24px !important; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:6px; }

  /* Wrap makes text readable */
  .wrap { padding-left:18px; padding-right:18px; }

  /* Tables scroll horizontally rather than overflow */
  .bp-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Blog post page */
  .bp-page .site-main { padding:0 16px 60px; }
  .bp-toc, .bp-takeaways { padding:16px 18px; }
  .bp-cta { padding:24px 18px; }
  .bp-cta-row { flex-direction:column; }
  .bp-cta-btn { justify-content:center; }
  .bp-h1 { font-size:clamp(1.45rem,6vw,2rem); }

  /* Blog index */
  .bl-grid { grid-template-columns:1fr !important; }
  .bl-featured-card { grid-template-columns:1fr !important; }
  .bl-featured-body { padding:20px; }
  .bl-hero h1 { font-size:clamp(1.6rem,6.5vw,2.4rem); }
  .bl-pills { gap:6px; }
  .bl-pill { font-size:0.78rem; padding:5px 12px; }

  /* Nav: no horizontal overflow from long phone numbers */
  .site-nav-wrap { gap:8px; }
}