/*
  Service page parts (loaded on every service-* page, after site.css).
  Breadcrumb, full-background service animation in the hero, room-by-room walk, home-vs-deep comparison, other services.
*/

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--deep);text-decoration:underline}
.crumbs [aria-current]{color:var(--navy);font-weight:500}

/* hero: the service animation sits on the right at its natural size, opening from a card
   ("stepping into the clean"); the headline sits on soft paper on the left; the estimate floats on top */
.svc-hero{min-height:min(860px,92vh);display:grid;align-items:center}
.svc-hero .svc-bg{background:#F9F7F8}
.svc-bg video{position:absolute;top:0;right:0;width:72%;height:100%;object-fit:contain;object-position:right center;animation:stepIn 1.6s cubic-bezier(.65,0,.2,1) .2s backwards}
@keyframes stepIn{from{clip-path:inset(32% 30% 32% 46% round 24px);transform:scale(1.08)}to{clip-path:inset(0 0 0 0 round 0)}}
.svc-hero .hero-bg::after{background:linear-gradient(90deg,rgba(249,247,248,1) 0%,rgba(249,247,248,.92) 30%,rgba(249,247,248,.2) 50%,rgba(249,247,248,0) 62%),linear-gradient(180deg,rgba(255,255,255,0) 78%,var(--paper) 100%)}
.svc-hero .bub-lux.b1,.svc-hero .bub-lux.b2{display:none}
.svc-hero .survey{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(220,229,236,.9);box-shadow:0 2px 4px rgba(11,34,54,.06),0 30px 70px rgba(11,34,54,.22);animation:rise .7s ease-out .9s backwards,floaty 7s ease-in-out 1.6s infinite alternate}
@keyframes floaty{to{transform:translateY(-10px)}}
.svc-hero .survey.sheet{animation:sheetUp .38s cubic-bezier(.2,.8,.2,1);transform:none}
.svc-hero .hero-copy{align-self:center;max-width:460px;padding:28px 30px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(11,34,54,.05),0 14px 40px rgba(11,34,54,.10);animation:rise .7s ease-out 1.1s backwards}

/* room by room: five rooms side by side; each fills blue from the floor up, one after another,
   when the section comes into view. Phones: the rooms swipe and fill as each comes into view. */
@property --c{syntax:"<number>";inherits:true;initial-value:0}
.rooms-in{padding-block:clamp(64px,9vw,112px);overflow:hidden}
.rooms-head .head{margin-bottom:clamp(28px,4vw,44px)}
.rooms-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,24px);width:min(1200px,100% - 2 * clamp(16px,4vw,40px));margin-inline:auto}
.room-card{margin:0;--c:0;--i:0;transition:--c 1.3s cubic-bezier(.4,0,.2,1) calc(var(--i) * .35s)}
.room-card.clean{--c:1}
.rc-pic{position:relative;display:block;aspect-ratio:448/620;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.rc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-after{clip-path:inset(calc((1 - var(--c)) * 100%) 0 0 0)}
.rc-pic::after{content:"";position:absolute;left:0;right:0;top:calc((1 - var(--c)) * 100%);height:3px;background:#fff;box-shadow:0 0 14px 2px rgba(0,148,233,.55);opacity:calc(var(--c) * (1 - var(--c)) * 4);pointer-events:none}
.room-card figcaption{display:grid;gap:2px;margin-top:14px}
.rc-n{font-size:.78rem;font-weight:600;color:var(--deep);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.room-card figcaption b{font-size:1.1rem;font-weight:600;color:var(--navy)}
.room-card figcaption span:last-child{color:var(--muted);font-size:.95rem;line-height:1.45}
.rooms-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(32px,4vw,48px)}
.rooms-cta img{width:64px;height:auto}
.rooms-cta b{font-size:1.2rem;font-weight:600;color:var(--navy)}
@media (max-width:860px){
  .rooms-track{display:flex;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 clamp(16px,4vw,40px) 8px}
  .rooms-track::-webkit-scrollbar{display:none}
  .room-card{flex:none;width:72vw;max-width:300px;scroll-snap-align:center;--i:0!important}
}
@media (prefers-reduced-motion:reduce){.room-card{--c:1!important;transition:none}}

/* home vs deep */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp-3{grid-template-columns:repeat(3,1fr)}
.cmp-card{border:1px solid var(--hair);border-radius:22px;padding:30px;display:grid;gap:14px;align-content:start;background:var(--paper)}
.cmp-card.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue),var(--shadow)}
.cmp-card p{color:var(--muted)}
.cmp-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cmp-card li{display:flex;gap:10px;font-weight:500;color:var(--navy)}
.cmp-card li::before{content:"✓";color:var(--blue);font-weight:700}
.cmp-card .btn{justify-self:start;margin-top:6px}

/* other services */
.other-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.other-list a{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border:1px solid var(--hair);border-radius:14px;color:var(--navy);text-decoration:none;font-weight:500;transition:border-color .2s,box-shadow .25s,transform .25s}
.other-list a:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-2px)}
.other-list a span{color:var(--deep)}

@media (max-width:1020px){.other-list{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .svc-hero{min-height:0;padding-top:calc(75vw + 70px)!important}
  .svc-bg video{width:100%;height:auto;bottom:auto;top:62px;aspect-ratio:4/3;object-fit:contain}
  .svc-hero .hero-copy{max-width:none;padding:18px 18px 20px}
  .svc-hero .hero-bg::after{background:linear-gradient(180deg,rgba(249,247,248,0) 40%,var(--paper) 70%)}
  .svc-hero .survey{animation:rise .7s ease-out .9s backwards}
  .hero-copy .crumbs{display:none}
  .cmp,.cmp-3{grid-template-columns:minmax(0,1fr)}
  .cmp-card{min-width:0;padding:24px 20px}
  .cmp-card .btn{max-width:100%;white-space:normal;text-align:center}
  .other-list{grid-template-columns:1fr}
}