:root{
  --paper:#faf7f2;
  --paper-2:#f0e9dd;
  --ink:#251629;
  --ink-soft:#6b5c72;
  --plum:#201028;
  --plum-2:#2e1a3a;
  --plum-3:#3b2549;
  --gold:#b1873f;
  --gold-2:#c8a35c;
  --gold-deep:#8a6830;
  --gold-soft:rgba(177,135,63,.12);
  --line:rgba(37,22,41,.14);
  --line-2:rgba(37,22,41,.07);
  --line-d:rgba(255,255,255,.16);
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:88px 0}
.sec.tint{background:var(--paper-2)}
.sec.dark{background:var(--plum);color:#f4eee6}
.sec.dark h2{color:#fff}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 10px 0;font-weight:500}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-color:var(--plum)}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--gold-2)}

/* ---------- type helpers ---------- */
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:14px}
.eyebrow.on-dark{color:var(--gold-2)}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.2vw,3.4rem);color:var(--plum)}
.sec.dark .sec-head h2{color:#fff}
.sec-head p{color:var(--ink-soft);margin-top:14px;font-size:1.06rem;font-weight:300}
.sec.dark .sec-head p{color:rgba(244,238,230,.72)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;font-weight:500;font-size:1rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 8px 24px rgba(177,135,63,.35)}
.btn-gold:hover{box-shadow:0 12px 30px rgba(177,135,63,.45)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn-line.on-dark{border-color:var(--line-d);color:#f4eee6}
.btn-line.on-dark:hover{border-color:var(--gold-2);color:var(--gold-2)}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s,box-shadow .3s;background:rgba(250,247,242,.6);backdrop-filter:blur(4px)}
header.scrolled{background:rgba(250,247,242,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-2),0 8px 30px rgba(37,22,41,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
/* Without this the logo is the first thing flexbox squeezes, and on a narrow
   laptop it shrinks to nothing while the links stay. */
.logo{flex:none}
.logo-img{width:auto;height:40px}
.navlinks{display:flex;gap:18px;font-size:.95rem}
.navlinks a{text-decoration:none;color:var(--ink);opacity:.82;position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--gold);transition:width .3s var(--ease)}
.navlinks a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.call-mini{display:inline-flex;align-items:center;gap:7px;font-weight:600;text-decoration:none;color:var(--plum);font-size:.95rem;font-variant-numeric:tabular-nums}
.call-mini svg{color:var(--gold-deep)}
.nav .btn{padding:11px 22px;font-size:.92rem}
/* The language toggle costs the header bar about 100px. Without this the flex
   items break mid-label instead - "Instant / Estimate", "(650) 666- / 9641" -
   and the bar grows to two lines. */
.navlinks a,.call-mini,.nav .btn,.lang-toggle{white-space:nowrap}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:.86rem;font-weight:500;letter-spacing:.04em;color:var(--gold-deep);background:var(--gold-soft);border:1px solid rgba(177,135,63,.28);border-radius:999px;padding:7px 14px;transition:background .2s,border-color .2s}
.lang-toggle:hover{background:rgba(177,135,63,.2);border-color:var(--gold)}
.lang-toggle svg{flex:none;opacity:.85}
.lt-short{display:none}
.menu-lang{display:inline-flex;align-items:center;gap:8px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--plum);transition:.3s}
.mobile-menu{display:none;position:fixed;top:78px;left:0;right:0;z-index:99;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 24px 24px;flex-direction:column;gap:4px;box-shadow:0 24px 40px rgba(37,22,41,.14)}
.mobile-menu.open{display:flex}
.mobile-menu a{text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line-2);font-size:1.05rem}
.mobile-menu .btn{margin-top:14px;justify-content:center;border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative;padding:158px 0 74px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(900px 480px at 88% -10%,var(--gold-soft),transparent 60%),
  radial-gradient(700px 420px at -8% 30%,rgba(32,16,40,.05),transparent 60%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.9rem,6vw,4.7rem);color:var(--plum)}
.hero h1 em{font-style:italic;color:var(--gold-deep)}
.lead{margin-top:20px;font-size:1.14rem;color:var(--ink-soft);font-weight:300;max-width:34em}
.rating-chip{display:inline-flex;align-items:center;gap:9px;margin-top:18px;text-decoration:none;font-size:.94rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;box-shadow:0 4px 14px rgba(37,22,41,.06)}
.rating-chip .stars{color:var(--gold);letter-spacing:2px;font-size:.95rem}
.rating-chip b{font-weight:600}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.avail-line{margin-top:18px;font-size:.92rem;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.avail-line .dot{width:8px;height:8px;border-radius:50%;background:#3d9a5f;box-shadow:0 0 0 4px rgba(61,154,95,.15);flex:none}
.price-pill{display:inline-flex;align-items:center;gap:12px;margin-top:22px;text-decoration:none;background:var(--plum);color:#f4eee6;border-radius:14px;padding:13px 20px;font-size:.95rem;transition:transform .25s var(--ease)}
.price-pill:hover{transform:translateY(-2px)}
.price-pill .pp-tag{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1;white-space:nowrap;background:var(--gold);color:#fff;font-size:.7rem;letter-spacing:.12em;text-indent:.12em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:5px 10px}
.price-pill em{font-style:italic;color:var(--gold-2)}
.hero-media{position:relative}
.hero-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(32,16,40,.28);aspect-ratio:4/4.6}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-cap{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(32,16,40,.82);backdrop-filter:blur(8px);border-radius:14px;padding:13px 18px;color:#f4eee6;display:flex;flex-direction:column;gap:2px}
.hero-cap b{font-weight:500}
.hero-cap span{font-size:.85rem;opacity:.7}

/* ---------- trust bar ---------- */
.trust{background:var(--plum);color:#f4eee6;padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ti{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:2px solid var(--gold)}
.ti b{font-weight:500;font-size:.98rem}
.ti span{font-size:.84rem;opacity:.62}

/* ---------- estimate calculator ---------- */
.est-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.est-panel{background:var(--plum-2);border:1px solid var(--line-d);border-radius:22px;padding:34px}
.est-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-d)}
.est-row:last-of-type{border-bottom:0}
.est-lbl b{display:block;font-weight:500;font-size:1.02rem}
.est-lbl span{font-size:.84rem;opacity:.6}
.stepper{display:flex;align-items:center;gap:2px;background:var(--plum);border:1px solid var(--line-d);border-radius:999px;padding:4px}
.stepper button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:#f4eee6;font-size:1.35rem;cursor:pointer;line-height:1;transition:background .2s}
.stepper button:hover{background:var(--plum-3)}
.stepper output{min-width:34px;text-align:center;font-weight:600;font-size:1.1rem;font-variant-numeric:tabular-nums}
.chk{position:relative;display:inline-flex}
.chk input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chk .box{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-d);border-radius:999px;padding:9px 18px;font-size:.92rem;transition:all .2s;user-select:none}
.chk input:checked + .box{background:var(--gold);border-color:var(--gold);color:#fff}
.chk input:focus-visible + .box{outline:3px solid var(--gold-2);outline-offset:2px}
.est-out{background:#fff;color:var(--ink);border-radius:22px;padding:34px;box-shadow:0 24px 60px rgba(0,0,0,.25);position:sticky;top:100px}
.est-out .eo-label{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.est-total{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(3.2rem,6vw,4.4rem);color:var(--plum);line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.est-items{margin-top:16px;font-size:.92rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.est-items li{display:flex;justify-content:space-between;list-style:none;gap:14px}
.est-items li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}
.pkg-tip{margin-top:18px;background:var(--gold-soft);border:1px solid rgba(177,135,63,.3);border-radius:14px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.pkg-tip b{color:var(--gold-deep)}
/* Shown at 5+ rooms, where a package is usually the cheaper way to buy the same
   work. It only points at the table - it never changes the number above it, and
   it stays hidden until the total is revealed so it can't preempt the price. */
.pkg-up{margin-top:12px;border:1px dashed rgba(177,135,63,.45);border-radius:14px;padding:14px 16px;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.pkg-up b{color:var(--gold-deep)}
.pkg-up a{color:var(--gold-deep);font-weight:600}
.est-out.gated .pkg-up{display:none}
.est-fine{margin-top:16px;font-size:.8rem;color:var(--ink-soft);line-height:1.5}
.est-cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.est-cta .btn{padding:13px 22px;font-size:.94rem}
/* ---------- estimate lead gate ---------- */
.est-total{transition:filter .5s var(--ease),opacity .5s var(--ease)}
.est-out.gated .est-total{filter:blur(13px);opacity:.5;user-select:none}
.est-gate{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.gate-head{font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.gate-head b{color:var(--plum);font-weight:600}
.lead-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lf-field{display:flex;flex-direction:column;gap:6px}
.lf-field label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.lf-opt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
.lf-field input,.lf-field select{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.lf-field select{cursor:pointer}
.lf-field input:focus,.lf-field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.lf-field input[aria-invalid="true"]{border-color:#a8443b;background:#fdf5f4}
.lf-err{font-size:.82rem;color:#a8443b;font-weight:500}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form .btn-gold{width:100%;justify-content:center;margin-top:2px}
.lead-form .btn-gold[disabled]{opacity:.6;cursor:progress}
.gate-skip{align-self:center;background:none;border:0;padding:4px 6px;font:inherit;font-size:.85rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.gate-skip:hover{color:var(--gold-deep)}
.lf-note{font-size:.78rem;line-height:1.5;color:var(--ink-soft);text-align:center}
.lead-ok{margin-top:18px;background:var(--gold-soft);border:1px solid rgba(177,135,63,.3);border-radius:14px;padding:14px 16px;font-size:.9rem;line-height:1.55}
.lead-ok b{color:var(--gold-deep)}
.lead-ok em{font-style:normal;font-weight:600;color:var(--plum)}

/* ---------- pricing ---------- */
.compare{display:flex;align-items:stretch;justify-content:center;gap:18px;margin:0 auto 14px;max-width:640px}
.cmp-cell{flex:1;text-align:center;border:1px solid var(--line-d);border-radius:16px;padding:18px 14px}
.cmp-cell .lbl{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.cmp-cell .amt-sm{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;font-variant-numeric:tabular-nums}
.cmp-cell.hi{border-color:var(--gold);background:rgba(177,135,63,.08)}
.cmp-cell .extra{display:block;font-size:.78rem;color:var(--gold-2);margin-top:4px}
.cmp-vs{align-self:center;font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2rem;opacity:.5}
.value-line{text-align:center;font-size:1rem;color:rgba(244,238,230,.75);max-width:560px;margin:0 auto 46px}
.value-line strong{color:var(--gold-2)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:var(--plum-2);border:1px solid var(--line-d);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.price.feat{background:linear-gradient(160deg,var(--plum-3),var(--plum-2));border-color:var(--gold);box-shadow:0 24px 60px rgba(0,0,0,.3);position:relative}
.price .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:600;min-height:1em}
.price h3{font-size:1.7rem;color:#fff}
.price .amt{font-family:'Cormorant Garamond',Georgia,serif;font-size:3rem;color:var(--gold-2);line-height:1;font-variant-numeric:tabular-nums}
.price .amt small{font-size:1.05rem;color:rgba(244,238,230,.6);font-family:'Outfit',sans-serif}
.price .amt .from{font-size:1.05rem;color:rgba(244,238,230,.6);font-family:'Outfit',sans-serif}
.price-sub{font-size:.88rem;color:rgba(244,238,230,.62)}
.perroom{display:flex;align-items:baseline;gap:8px;background:rgba(177,135,63,.14);border-radius:12px;padding:10px 14px}
.perroom b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;color:var(--gold-2)}
.perroom span{font-size:.82rem;color:rgba(244,238,230,.7)}
.price ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px;flex:1}
.price li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:rgba(244,238,230,.82)}
.price li svg{flex:none;margin-top:4px;color:var(--gold-2)}
.price .btn{justify-content:center;margin-top:8px}
.price-note{text-align:center;margin-top:34px;color:rgba(244,238,230,.6);font-size:.92rem}
/* Four tiers side by side. Upholstery is priced per piece, not per visit, so it
   spans the full row underneath instead of posing as a fifth tier. The column
   count is set only above 1020px so the shared .price-grid rules in the media
   queries below still win on smaller screens. */
.price.wide{grid-column:1/-1}
@media (min-width:1021px){
  .tier-grid{grid-template-columns:repeat(4,1fr)}
  .tier-grid .price{padding:30px 22px}
  /* two lines are reserved so the four prices sit on one line as a row -
     "Whole Home + Protect" wraps in Spanish and would otherwise drop its price
     below the other three */
  .tier-grid .price h3{font-size:1.42rem;min-height:2.12em}
  .tier-grid .price .amt{font-size:2.6rem}
  .tier-grid .price-sub{font-size:.85rem}
  .tier-grid .price li{font-size:.9rem}
  .tier-grid .price.wide{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px 30px;padding:26px 30px}
  /* laid out in a row the subtitle sits right next to the bullets that repeat
     it word for word, so it only earns its place in the stacked card */
  .tier-grid .price.wide .tag,.tier-grid .price.wide .price-sub{display:none}
  .tier-grid .price.wide h3,.tier-grid .price.wide .amt{margin:0}
  .tier-grid .price.wide ul{flex-direction:row;flex-wrap:wrap;gap:8px 26px;margin:0}
  .tier-grid .price.wide .btn{margin:0}
}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:30px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(37,22,41,.1)}
.svc .ic{width:54px;height:54px;border-radius:16px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:18px}
.svc h3{font-size:1.55rem;color:var(--plum);margin-bottom:8px}
.svc p{font-size:.95rem;color:var(--ink-soft);font-weight:300}
.svc .more{display:inline-block;margin-top:14px;font-size:.9rem;color:var(--gold-deep);text-decoration:none;font-weight:500}
.svc .more:hover{text-decoration:underline}

/* ---------- before/after sliders ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ba{background:#fff;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(37,22,41,.06)}
.ba-slider{position:relative;aspect-ratio:4/4.4;overflow:hidden;touch-action:pan-y}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-slider .after-img{clip-path:inset(0 0 0 50%)}
.ba-slider .divider{position:absolute;top:0;bottom:0;left:50%;width:2.5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4);pointer-events:none}
.ba-slider .handle{position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none}
.ba-slider input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-slider .tag-b,.ba-slider .tag-a{position:absolute;top:12px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:4px 12px;border-radius:999px;pointer-events:none}
.ba-slider .tag-b{left:12px;background:rgba(32,16,40,.75);color:#fff}
.ba-slider .tag-a{right:12px;background:var(--gold);color:#fff}
.ba .cap{padding:16px 20px;font-size:.93rem;color:var(--ink-soft)}
.ba-hint{text-align:center;margin-top:22px;font-size:.88rem;color:var(--ink-soft)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:28px 24px}
.step .num{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.2rem;color:var(--gold);line-height:1;margin-bottom:12px}
.step h4{font-size:1.3rem;color:var(--plum);margin-bottom:6px}
.step p{font-size:.9rem;color:var(--ink-soft);font-weight:300}

/* ---------- why / owner ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.feature h2{font-size:clamp(2.2rem,4vw,3.2rem)}
.feature .intro{margin-top:16px;color:rgba(244,238,230,.72);font-weight:300;font-size:1.05rem}
.owner-note{margin-top:26px;background:var(--plum-2);border:1px solid var(--line-d);border-left:3px solid var(--gold);border-radius:16px;padding:20px 22px}
.owner-note b{display:block;font-weight:500;margin-bottom:4px;color:var(--gold-2)}
.owner-note p{font-size:.94rem;color:rgba(244,238,230,.78);font-weight:300}
.owner-note .es{display:inline-block;margin-top:10px;font-size:.82rem;background:rgba(177,135,63,.16);border:1px solid rgba(200,163,92,.4);color:var(--gold-2);border-radius:999px;padding:4px 12px}
.why-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.why-list li{display:flex;gap:16px}
.why-list .ck{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(177,135,63,.16);color:var(--gold-2);display:grid;place-items:center}
.why-list b{font-weight:500;display:block}
.why-list li>div>span{font-size:.9rem;color:rgba(244,238,230,.62);font-weight:300}

/* ---------- offers ---------- */
.offer-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.offer{position:relative;background:var(--plum-2);border:1px solid var(--line-d);border-radius:20px;padding:34px 30px 30px}
.offer .ribbon{position:absolute;top:-13px;left:26px;background:var(--gold);color:#fff;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:5px 14px}
.offer h3{font-size:1.6rem;color:#fff;margin-bottom:8px}
.offer p{font-size:.94rem;color:rgba(244,238,230,.72);font-weight:300}
.offer-cta{text-align:center;margin-top:36px;display:flex;flex-direction:column;gap:12px;align-items:center}
.offer-cta .fine{font-size:.78rem;color:rgba(244,238,230,.5)}

/* ---------- area ---------- */
.area-wrap{text-align:center;max-width:760px;margin:0 auto}
.area-cities{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.area-cities a{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 24px;font-size:.98rem;transition:all .25s var(--ease)}
.area-cities a:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px)}
.area-note{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:.92rem;color:var(--ink-soft)}
.area-note svg{color:var(--gold-deep)}

/* ---------- reviews ---------- */
.rev-agg{display:flex;justify-content:center;margin-bottom:36px}
.rev-agg a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 22px;box-shadow:0 6px 18px rgba(37,22,41,.06)}
.rev-agg .stars{color:var(--gold);letter-spacing:3px}
.rev-agg b{font-weight:600}
.rev-agg span{color:var(--ink-soft);font-size:.9rem}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:34px 28px 26px;display:flex;flex-direction:column;gap:18px}
.rev .stars{color:var(--gold);letter-spacing:3px;font-size:.95rem}
.rev p{font-size:.97rem;color:var(--ink);font-weight:300;flex:1}
.rev .who{display:flex;align-items:center;gap:12px}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--plum);color:var(--gold-2);display:grid;place-items:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2rem}
.rev .who b{display:block;font-weight:500;line-height:1.2}
.rev .who span{font-size:.8rem;color:var(--ink-soft)}
.rev-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.rev-note{max-width:60ch;margin:-18px auto 30px;text-align:center;font-size:.86rem;font-weight:300;color:var(--ink-soft)}

/* ---------- featured review ---------- */
.hero-quote{margin:20px 0 0;padding:0 0 0 18px;border-left:2px solid var(--gold);display:flex;flex-direction:column;gap:8px}
.hero-quote .stars{color:var(--gold);letter-spacing:3px;font-size:.85rem}
.hero-quote p{margin:0;font-size:1rem;font-weight:300;line-height:1.65;color:var(--ink)}
.hero-quote cite{font-style:normal;font-size:.85rem;font-weight:500;color:var(--plum)}
.hero-quote cite span{font-weight:300;color:var(--ink-soft)}
.featured-rev{max-width:760px;margin:0 auto;padding:40px 38px 34px;background:#fff;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 10px 30px rgba(37,22,41,.05);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.featured-rev .stars{color:var(--gold);letter-spacing:3px}
.featured-rev blockquote{margin:0}
.featured-rev blockquote p{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;line-height:1.6;color:var(--ink)}
.featured-rev figcaption b{font-weight:500;color:var(--plum)}
.featured-rev figcaption span{font-size:.85rem;color:var(--ink-soft);margin-left:8px}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 4px;font-family:inherit;font-size:1.08rem;font-weight:500;color:var(--ink);cursor:pointer}
.q .ic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-deep);transition:transform .3s var(--ease),background .3s}
.q.open .ic{transform:rotate(45deg);background:var(--gold);border-color:var(--gold);color:#fff}
.q .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.q .ans p{padding:0 44px 22px 4px;color:var(--ink-soft);font-weight:300;font-size:.98rem}

/* ---------- cta band ---------- */
.cta-band{text-align:center;padding:20px 0}
.cta-band h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.cta-band h2 em{font-style:italic;color:var(--gold-2)}
.cta-band p{margin-top:14px;color:rgba(244,238,230,.72);font-weight:300;font-size:1.06rem}
.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--plum);color:rgba(244,238,230,.75);padding:64px 0 34px;border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
footer h5{font-family:'Outfit',sans-serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a{color:rgba(244,238,230,.75);text-decoration:none}
footer a:hover{color:var(--gold-2)}
.fline{font-size:.92rem;font-weight:300}
.foot-hours{font-size:.9rem;font-weight:300;display:flex;flex-direction:column;gap:5px}
.foot-hours b{font-weight:500;color:#f4eee6}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-d);margin-top:46px;padding-top:24px;font-size:.84rem;color:rgba(244,238,230,.5)}

/* ---------- mobile sticky bar ---------- */
.mob-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:98;background:rgba(32,16,40,.96);backdrop-filter:blur(12px);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
.mob-bar .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.95rem}

/* ---------- hero evening badge / text-first ---------- */
.hero-badge{display:flex;align-items:flex-start;gap:11px;margin-top:20px;background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:14px 18px;font-size:1rem;line-height:1.55;color:var(--ink);max-width:56ch}
.hero-badge svg{flex:none;margin-top:3px;color:var(--gold-deep)}
.hero-badge b{font-weight:600;color:var(--plum)}
.text-first{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:.93rem;line-height:1.55;color:var(--ink-soft);max-width:54ch}
.text-first svg{flex:none;margin-top:3px;color:var(--gold-deep)}
.text-first b{color:var(--ink);font-weight:600}

/* ---------- 14-day guarantee ---------- */
.guarantee{display:flex;align-items:center;gap:20px;max-width:700px;margin:36px auto 0;background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:18px;padding:22px 26px}
.guarantee .g-badge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;font-size:.66rem;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;font-weight:600;line-height:1}
.guarantee .g-badge b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.85rem;letter-spacing:0;text-indent:0;font-weight:600;line-height:1;margin-bottom:2px}
.guarantee .g-copy b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;font-weight:600;color:#f4eee6;margin-bottom:5px}
.guarantee .g-copy p{font-size:.97rem;font-weight:300;color:rgba(244,238,230,.8);line-height:1.6}

/* ---------- cta band mail + footer note ---------- */
.cta-mail{margin-top:18px;font-size:.9rem;font-weight:300;color:rgba(244,238,230,.66)}
.cta-mail a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid rgba(200,163,92,.4)}
.cta-mail a:hover{color:#fff}
.fh-note{color:rgba(244,238,230,.55);font-style:italic}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
/* The header degrades in two stages instead of one. Logo (254) + six links
   (434) + toggle/phone/Book (375) + gaps needs ~1150px of usable bar, and the
   wrap only ever offers viewport minus 48. Dropping the inline phone number
   first buys ~146px, which keeps the nav links alive on 1024-1180 laptops
   rather than sending them straight to the burger. */
@media (max-width:1180px){
  .nav .call-mini{display:none}
}
@media (max-width:1020px){
  /* Links go too. Everything dropped above is in the burger menu, including
     the phone number, so nothing becomes unreachable. */
  .navlinks{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-media{max-width:520px}
  .est-grid,.feature{grid-template-columns:1fr;gap:36px}
  .price-grid,.svc-grid,.ba-grid,.rev-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .est-out{position:static}
}
@media (max-width:720px){
  .sec{padding:64px 0}
  .navlinks,.nav .call-mini,.nav .btn{display:none}
  .lang-toggle{padding:7px 12px}
  .lt-long{display:none}
  .lt-short{display:inline}
  .burger{display:flex}
  .hero{padding-top:120px}
  .price-grid,.svc-grid,.ba-grid,.rev-grid,.steps,.trust-grid,.offer-cards{grid-template-columns:1fr}
  .compare{flex-direction:column}
  .cmp-vs{padding:2px 0}
  .mob-bar{display:flex}
  .mob-bar .mb-primary{flex:1.55;gap:7px;font-weight:600}
  .mob-bar .btn-line{flex:.85;font-size:.88rem;padding:13px 6px}
  .hero-badge{font-size:.95rem;padding:13px 15px;margin-top:16px}
  .guarantee{flex-direction:column;text-align:center;gap:15px;padding:24px 20px}
  body{padding-bottom:74px}
  .est-panel,.est-out{padding:26px 22px}
  .lf-row{grid-template-columns:1fr}
  .chk .box{padding:8px 13px;font-size:.85rem;white-space:nowrap}
  .est-row{gap:10px}
  .foot-grid{grid-template-columns:1fr}
}
/* On a 360px phone the bar is logo + toggle + burger and the wordmark alone is
   254px of the 297px available. The toggle is the new arrival, so the logo
   gives up the height it can spare rather than the toggle disappearing on the
   phones most likely to want it. */
@media (max-width:480px){
  .nav{gap:12px}
  .nav-cta{gap:10px}
  .logo-img{height:28px}
  .lang-toggle{padding:6px 10px;font-size:.8rem}
}
/* 320px is the narrowest phone still in the wild. Tighter gutters and one more
   step off the wordmark keep the toggle and the burger on the same line. */
@media (max-width:360px){
  .wrap{padding:0 16px}
  .nav{gap:10px}
  .logo-img{height:25px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.svc,.area-cities a,.q .ic,.price-pill{transition:none !important}
}

/* ================= SERVICE PAGES ================= */
/* ---------- service page hero ---------- */
.svc-hero{position:relative;padding:150px 0 72px;background:
  radial-gradient(760px 420px at 12% 0%,rgba(177,135,63,.10),transparent 62%),
  linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.svc-hero .wrap{max-width:920px}
.svc-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);color:var(--plum);margin-top:6px}
.svc-hero h1 em{font-style:italic;color:var(--gold-deep)}
.svc-hero .lead{margin-top:18px;font-size:1.13rem;line-height:1.7;font-weight:300;color:var(--ink-soft);max-width:62ch}
.svc-hero .hero-actions{margin-top:26px}
.crumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:20px}
.crumb a{color:var(--gold-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.5;margin:0 7px}

/* ---------- long-form article ---------- */
.prose{max-width:70ch;margin:0 auto}
.prose h2{font-size:clamp(1.7rem,3vw,2.35rem);color:var(--plum);margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.28rem;color:var(--plum);margin:30px 0 10px;font-family:'Outfit',system-ui,sans-serif;font-weight:600}
.prose p{margin-bottom:16px;color:var(--ink-soft);font-weight:300;line-height:1.78}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.prose ul li{position:relative;padding-left:26px;color:var(--ink-soft);font-weight:300;line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.prose ul li b{color:var(--ink);font-weight:600}
.prose .callout{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}
.prose .callout p{margin:0;color:var(--ink)}

/* ---------- per-service price table ---------- */
.svc-price{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:.97rem}
.svc-price th{text-align:left;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;padding:0 0 12px;border-bottom:1px solid var(--line-2)}
.svc-price td{padding:14px 0;border-bottom:1px solid var(--line-2);color:var(--ink-soft);font-weight:300;vertical-align:top}
.svc-price td:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.svc-price tr:last-child td{border-bottom:0}
/* The packages sit in the first tbody, the a la carte rates in the second, so
   the whole range reads in one glance without a toggle. The recommended tier
   gets the same gold tint the featured price card uses - no new colours. */
.svc-price .pkg-best td{background:var(--gold-soft);color:var(--ink)}
.svc-price .pkg-best td:first-child{border-left:3px solid var(--gold);padding-left:14px}
.svc-price .best{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);border:1px solid var(--gold);border-radius:999px;padding:2px 9px;margin-left:8px;white-space:nowrap;vertical-align:2px}
.svc-price .alc .grp th{padding:26px 0 12px}
.svc-price .alc .grp+tr td{border-top:0}

/* ---------- before/after placeholder ---------- */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
/* A single slider, where .ba-pair would stretch it to half a row. */
.ba-solo{max-width:560px;margin:8px auto 0}

/* ---------- quote cta (pages without the estimator) ---------- */
.quote-cta{max-width:760px;margin:0 auto;text-align:center;background:var(--plum-2);border:1px solid var(--line-d);border-radius:22px;padding:44px 38px}
.quote-cta h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:#fff;margin-bottom:14px}
.quote-cta p{color:rgba(244,238,230,.75);font-weight:300;max-width:52ch;margin:0 auto 26px;line-height:1.7}
.quote-cta .hero-actions{justify-content:center}
.quote-cta .qc-note{margin:20px auto 0;font-size:.88rem;color:rgba(244,238,230,.55)}

/* ---------- related services ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:24px 24px 22px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rel-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(37,22,41,.1)}
.rel-card b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.42rem;font-weight:600;color:var(--plum);line-height:1.25}
.rel-card span{font-size:.91rem;color:var(--ink-soft);font-weight:300;line-height:1.6}
.rel-card em{font-style:normal;color:var(--gold-deep);font-size:1.05rem;margin-top:4px}
.rel-home{text-align:center;margin-top:34px}
.rel-home a{color:var(--gold-deep);text-decoration:none;font-weight:500}
.rel-home a:hover{text-decoration:underline}

/* ================= CITY PAGES ================= */
/* ---------- embedded map ---------- */
.map-embed{margin:26px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--paper-2);box-shadow:0 10px 30px rgba(37,22,41,.06)}
.map-embed iframe{display:block;width:100%;height:380px;border:0}
.map-cap{margin:14px 0 0;text-align:center;font-size:.86rem;font-weight:300;color:var(--ink-soft)}

/* ---------- neighbourhood chips ---------- */
.hoods{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;padding:0;list-style:none}
.hoods li{font-size:.82rem;letter-spacing:.04em;color:var(--gold-deep);background:var(--gold-soft);border:1px solid rgba(177,135,63,.24);border-radius:999px;padding:7px 14px;font-weight:500}

/* ---------- other-cities grid (four cards, not three) ---------- */
.city-grid{grid-template-columns:repeat(4,1fr)}

@media (max-width:1020px){
  .rel-grid{grid-template-columns:1fr 1fr}
  .city-grid{grid-template-columns:1fr 1fr}
  .map-embed iframe{height:320px}
}
@media (max-width:720px){
  .svc-hero{padding:118px 0 56px}
  .rel-grid{grid-template-columns:1fr}
  .city-grid{grid-template-columns:1fr}
  .ba-pair{grid-template-columns:1fr}
  .quote-cta{padding:34px 22px}
  .prose h2{margin-top:40px}
  .map-embed iframe{height:260px}
  .featured-rev{padding:30px 22px 26px}
  .featured-rev blockquote p{font-size:1.15rem}
}