/* Services page: loads after style.css */

/* Banner */
.page-banner{position:relative;background:var(--red);color:#fff;padding:170px 0 90px;overflow:hidden}
.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:kenburns 22s ease-in-out infinite alternate}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(142,27,27,.93) 0%,rgba(200,32,31,.75) 55%,rgba(232,80,31,.35) 100%)}
.page-banner .container{position:relative;z-index:2}
.page-banner h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;margin:.4rem 0 .6rem;animation:up .8s .1s both}
.page-banner .lead{max-width:56ch;opacity:1;animation:up .8s .3s both}
.crumbs{display:flex;gap:.6rem;font-size:.95rem;animation:up .8s both}
.crumbs a{text-decoration:none;opacity:.85}
.crumbs a:hover{opacity:1;color:var(--yellow)}
.crumbs b{color:var(--yellow);font-weight:600}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.fl{position:absolute;z-index:1;border:3px solid rgba(255,199,44,.55);border-radius:6px;animation:floaty 9s ease-in-out infinite}
.f1{width:70px;height:70px;right:12%;top:26%}
.f2{width:38px;height:38px;right:24%;bottom:18%;animation-delay:-3s;border-color:rgba(255,255,255,.5)}
.f3{width:110px;height:110px;right:5%;bottom:8%;animation-delay:-6s;border-radius:50%}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(25deg)}}

/* Intro + sticky jump nav */
.intro{padding:70px 0 30px;text-align:center}
.intro .container{max-width:760px}
.intro h2::after{margin-inline:auto}
.intro p{margin-inline:auto}
.jump{position:sticky;top:62px;z-index:30;background:rgba(255,248,242,.97);backdrop-filter:blur(8px);border-bottom:1px solid #f0dccd}
.jump ul{list-style:none;margin:0;padding:.7rem 0;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:block;white-space:nowrap;text-decoration:none;font-size:.88rem;font-weight:600;padding:.45rem 1rem;border-radius:99px;border:2px solid #ecd2c1;background:#fff;transition:.25s}
.jump a:hover{border-color:var(--orange);color:var(--red)}
.jump a.on{background:var(--red);border-color:var(--red);color:#fff}

/* Service rows */
.svc-row{position:relative;padding:90px 0;overflow-x:clip;scroll-margin-top:120px}
.svc-row:nth-child(even){background:var(--sand)}
.svc-grid2{display:grid;grid-template-columns:1fr 1.05fr;gap:3.5rem;align-items:center}
.svc-row.flip .svc-media{order:2}
.svc-media{position:relative;perspective:900px}
.svc-media .photo{aspect-ratio:5/4;box-shadow:0 18px 40px rgba(92,16,19,.2);transition:transform .25s ease-out;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.svc-num{position:absolute;top:-18px;left:-14px;width:68px;height:68px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:700;font-size:1.5rem;display:grid;place-items:center;border:4px solid var(--red);box-shadow:0 8px 18px rgba(92,16,19,.25);z-index:2}
.svc-row.flip .svc-num{left:auto;right:-14px}
.kicker{display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem}
.svc-body h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.svc-body h4{font:700 1rem var(--head);margin:1.2rem 0 .6rem;color:var(--red)}
.incl{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.incl li{position:relative;padding-left:2rem}
.incl li::before{content:"✓";position:absolute;left:0;top:.15rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--red);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
.best{background:#fff;border-left:4px solid var(--yellow);padding:.7rem 1rem;border-radius:0 8px 8px 0;font-size:.95rem;margin-bottom:1.4rem}
.svc-row:nth-child(even) .best{background:var(--paper)}
.svc-body .btn-row{margin:0}

/* Scroll animations (only when JS is on) */
.js .svc-media{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.js .svc-row.flip .svc-media{clip-path:inset(0 0 0 100%)}
.js .svc-row.in .svc-media{clip-path:inset(-30px -30px -30px -30px)}
.js .svc-num{transform:scale(0);transition:transform .6s .9s cubic-bezier(.3,1.6,.5,1)}
.js .svc-row.in .svc-num{transform:scale(1)}
.js .svc-body>*{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--i,0)*90ms + 250ms)}
.js .svc-row.in .svc-body>*{opacity:1;transform:none}
.js .incl li{opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--j,0)*110ms + 700ms)}
.js .svc-row.in .incl li{opacity:1;transform:none}
.js .svc-row.in h2::after{width:64px}

@media (max-width:980px){
  .svc-grid2{grid-template-columns:1fr;gap:2.2rem}
  .svc-row.flip .svc-media{order:0}
  .svc-row{padding:64px 0}
  .svc-num{left:8px;top:-14px}
  .svc-row.flip .svc-num{right:auto;left:8px}
}
@media (max-width:760px){.page-banner{padding:130px 0 60px}.fl{display:none}.jump{top:62px}}
@media (prefers-reduced-motion:reduce){
  .page-banner::before,.fl{animation:none}
  .js .svc-media,.js .svc-row.flip .svc-media{clip-path:none}
  .js .svc-num,.js .svc-body>*,.js .incl li{transform:none;opacity:1;transition:none}
  .js .svc-num{transform:scale(1)}
  .js h2::after{width:64px}
}