/* ---------- service pages ---------- */
.page-service .site-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);color:var(--ink);box-shadow:0 1px 0 rgba(12,19,34,.07)}
.page-service .site-header .btn--sm{background:var(--navy);color:#fff}

/* hero */
.svc-hero{padding:calc(var(--header-h) + 28px) 0 clamp(64px,8vw,112px);background:#fff;overflow:hidden}
.svc-hero__grid{display:grid;gap:36px;align-items:center}
.svc-hero__grid>*,.handle__grid>*,.svc-final__grid>*{min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mute);margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.svc-hero__h1{margin-top:18px;font-weight:500;font-size:clamp(42px,6.4vw,96px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.svc-hero__h1 em.serif{font-size:1.04em;color:var(--navy)}
.svc-hero__sub{margin-top:22px;color:var(--slate);font-size:clamp(16px,1.35vw,19px);max-width:42ch}
.svc-hero .ctas{margin-top:30px}
.svc-hero .btn{font-family:inherit}
.svc-hero .btn .arw,.handle .btn .arw{width:16px;height:16px}
.svc-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--slate)}
.svc-hero__facts b{font-weight:500;color:var(--ink)}
.svc-hero__media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--stone);clip-path:inset(100% 0 0 0 round 18px);animation:svc-reveal 1300ms var(--ease) 150ms forwards}
.svc-hero__media .card__media{transform:scale(1.15);animation:svc-zoom 2200ms var(--ease) 150ms forwards}
@keyframes svc-reveal{to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes svc-zoom{to{transform:scale(1.02)}}
.svc-hero__tag{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:500;opacity:0;transform:translateY(10px);animation:svc-tag 700ms var(--ease) 1100ms forwards}
.svc-hero__tag i{width:8px;height:8px;border-radius:50%;background:var(--red)}
@keyframes svc-tag{to{opacity:1;transform:none}}
@media (max-width:767px){.svc-hero__media{aspect-ratio:4/4.4}}
@media (min-width:900px){.svc-hero__grid{grid-template-columns:1.1fr .9fr;gap:72px}.svc-hero__media{max-height:calc(100svh - var(--header-h) - 64px)}}

/* what we handle */
.handle{padding:var(--sec) 0;background:var(--stone)}
.handle__grid{display:grid;gap:48px}
.handle__answer{margin-top:24px;color:var(--slate);max-width:48ch}
.handle .btn{margin-top:32px;font-family:inherit}
.handle__list{list-style:none;border-top:1px solid rgba(12,19,34,.1)}
.handle__list li{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid rgba(12,19,34,.1);font-weight:500;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.025em;opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--i) * 60ms)}
.handle__list li.is-in{opacity:1;transform:none}
.handle__list span{font-size:12px;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums;flex:none;width:24px}
@media (min-width:900px){.handle__grid{grid-template-columns:1fr 1fr;gap:96px}.handle__head{position:sticky;top:calc(var(--header-h) + 64px);align-self:start}}

/* gallery reuses the services track */
.gallery__h2{margin-top:14px;font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.02;letter-spacing:-.04em}
.card--photo figure{margin:0}
.card--photo .card__title{font-size:17px}

/* cross-sell */
.xsell{padding:var(--sec) 0;background:#fff}
.xsell__grid{margin-top:48px;display:grid;gap:12px}
.xsell__card{position:relative;display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:18px;padding:12px 18px 12px 12px;border-radius:16px;background:var(--stone);transition:background-color 400ms var(--ease)}
.xsell__img{width:88px;height:88px;border-radius:12px;overflow:hidden}
.xsell__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.xsell__name{font-weight:500;font-size:19px;letter-spacing:-.02em}
.xsell__go .arw{width:20px;height:20px;transition:transform 400ms var(--ease)}
.xsell__card:hover{background:#E8EAE6}
.xsell__card:hover img{transform:scale(1.08)}
.xsell__card:hover .arw{transform:translateX(4px)}
@media (min-width:900px){
  .xsell__grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .xsell__card{grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:12px 12px 20px;gap:16px 12px}
  .xsell__img{grid-column:1/-1;width:100%;height:auto;aspect-ratio:4/3}
  .xsell__name{padding-left:8px}
}

/* final: copy + inline form */
.svc-final{padding:var(--sec) 0;background:var(--ink);color:#fff}
.svc-final .eyebrow{color:var(--on-dark-2)}
.svc-final__grid{display:grid;gap:44px;align-items:center}
.svc-final .final__h2{margin:22px 0 0;text-align:left;max-width:14ch}
.svc-final__lede{margin-top:22px;color:var(--on-dark-2);max-width:36ch}
.svc-final__phone{display:inline-block;margin-top:14px;font-size:clamp(40px,5vw,72px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;transition:color 400ms var(--ease)}
.svc-final__phone:hover{color:#C9D3E6}
.svc-final__form{background:var(--stone);border-radius:20px;padding:clamp(22px,3vw,40px);color:var(--ink)}
@media (min-width:900px){.svc-final__grid{grid-template-columns:1fr 1fr;gap:96px}}

@media (prefers-reduced-motion:reduce){
  .svc-hero__media,.svc-hero__media .card__media,.svc-hero__tag{animation:none;clip-path:none;transform:none;opacity:1}
  .handle__list li{opacity:1;transform:none}
}

/* common problems, fixed: drag-to-compare examples */
@property --p{syntax:'<percentage>';inherits:true;initial-value:50%}
.fixes{padding:var(--sec) 0;background:#fff}
.fixes__head{display:grid;gap:8px;margin-bottom:clamp(36px,5vw,64px)}
.fixes__hint{display:inline-flex;align-items:center;gap:10px;color:var(--slate);font-size:15px}
.fixes__hint::before{content:"";width:22px;height:1px;background:var(--red)}
.fixes__grid{list-style:none;display:grid;gap:44px}
.fix{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--ease),transform 800ms var(--ease);transition-delay:calc(var(--i) * 90ms)}
.fix.is-in{opacity:1;transform:none}
.fix__frame{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--stone);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.fix__frame.is-auto{transition:--p 1400ms var(--ease)}
.fix__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fix__img--before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.fix__tag{position:absolute;top:12px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);transition:opacity 300ms var(--ease)}
.fix__tag--before{left:12px}
.fix__tag--after{right:12px;background:var(--navy);color:#fff}
.fix__handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(12,19,34,.08)}
.fix__handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(6,12,26,.22);transition:transform 300ms var(--ease)}
.fix__handle i::before,.fix__handle i::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid var(--ink);border-width:0 0 1.6px 1.6px}
.fix__handle i::before{left:11px;transform:rotate(45deg)}
.fix__handle i::after{right:11px;transform:rotate(-135deg)}
.fix__frame:hover .fix__handle i,.fix__frame.is-drag .fix__handle i{transform:scale(1.1)}
.fix__range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fix__frame:has(.fix__range:focus-visible){outline:2px solid var(--navy);outline-offset:4px}
.fix__title{display:flex;align-items:baseline;gap:14px;margin-top:20px;font-weight:500;font-size:clamp(21px,1.9vw,26px);letter-spacing:-.03em}
.fix__title span{font-size:12px;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums}
.fix__line{margin-top:8px;color:var(--slate);max-width:40ch;padding-left:32px}
.fixes__note{margin-top:clamp(40px,5vw,64px);padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--mute);max-width:62ch}
@media (min-width:768px){
  .fixes__head{grid-template-columns:1fr auto;align-items:end}
  .fixes__grid{grid-template-columns:1fr 1fr;gap:56px 40px}
  .fix:nth-child(even){margin-top:96px}
}
@media (min-width:1200px){.fixes__grid{gap:64px 72px}}
@media (prefers-reduced-motion:reduce){.fix{opacity:1;transform:none;transition:none}.fix__frame.is-auto{transition:none}}
.fixes__intro .btn{margin-top:28px;font-family:inherit}
.fixes__intro .btn .arw{width:16px;height:16px}
.fixes .fixes__hint{margin-bottom:28px}
.fixes__also{margin-top:clamp(48px,6vw,80px);display:grid;gap:18px}
.fixes__also ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.fixes__also li{padding:12px 18px;border-radius:999px;background:var(--stone);font-weight:500;font-size:16px;letter-spacing:-.015em}
@media (min-width:900px){.fixes__head{grid-template-columns:1fr 1fr;gap:96px;align-items:end}}
.crumbs a{padding:12px 6px;margin:-12px -6px}
@media (max-width:767px){.svc-hero__facts{display:none}}

/* spacing system (see sections.css): service.css loads later, so restate the shared tokens here */
.xsell__grid{margin-top:var(--head-gap)}
.fixes__head{margin-bottom:var(--head-gap)}
.fixes__also{margin-top:var(--head-gap)}
.fixes__note{margin-top:var(--head-gap)}
.svc-hero{padding-bottom:var(--sec)}
.svc-final__grid{gap:var(--head-gap)}
:is(.pain,.proof,.how,.outcome,.faq,.fixes,.xsell,.svc-hero) + :is(.pain,.proof,.how,.outcome,.faq,.fixes,.xsell){padding-top:0}