/* Homepage services: one service at a time, chosen from a segmented switch. */
.service-tabs { position:relative; display:inline-grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:44px; padding:5px; border-radius:999px; background:#e9ece8; }
.service-tabs button { position:relative; z-index:1; min-width:138px; padding:12px 24px; border:0; border-radius:999px; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:560; letter-spacing:-.01em; cursor:pointer; transition:color .3s; }
.service-tabs button:hover,.service-tabs [aria-selected="true"] { color:var(--ink); }
.service-tabs button:focus-visible { outline:2px solid #173342; outline-offset:2px; }
.service-tabs-thumb { position:absolute; top:5px; left:5px; width:calc((100% - 10px) / 3); height:calc(100% - 10px); border-radius:999px; background:#fff; box-shadow:0 1px 2px #1a2e2814,0 6px 16px -8px #1a2e2840; transition:translate .5s var(--ease); }
.service-tabs[data-active="1"] .service-tabs-thumb { translate:100% 0; }
.service-tabs[data-active="2"] .service-tabs-thumb { translate:200% 0; }

/* Panels share one grid cell, so switching never changes the section height. */
.service-stage { display:grid; }
.service-panel { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,96px); align-items:center; transition:opacity .45s var(--ease),translate .45s var(--ease); }
.service-panel[inert] { visibility:hidden; opacity:0; translate:0 8px; transition:opacity .3s var(--ease),translate .3s var(--ease),visibility 0s .3s; }
.service-panel-copy { display:flex; flex-direction:column; align-items:flex-start; max-width:470px; }
.service-panel h3 { font-size:clamp(30px,2.6vw,38px); font-weight:560; letter-spacing:-.045em; }
.service-panel-copy>p { margin:14px 0 20px; color:var(--muted); font-size:16px; line-height:1.65; }
.service-panel-includes { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; padding:0; list-style:none; }
.service-panel-includes li { padding:6px 12px; border:1px solid #e1e6e3; border-radius:999px; color:var(--ink); font-size:13px; font-weight:500; letter-spacing:-.01em; }
.service-panel-more { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; font-weight:560; letter-spacing:-.01em; }
.service-panel-more .icon { width:15px; height:15px; transition:translate .3s var(--ease); }
.service-panel-more:hover .icon { translate:4px 0; }
.service-panel-more:focus-visible { outline:2px solid #173342; outline-offset:4px; border-radius:4px; }

.service-panel-media { position:relative; height:clamp(340px,34vw,460px); margin:0; }
.service-panel-media img { width:100%; height:100%; border-radius:26px; background:#e9ece8; object-fit:cover; }
#service-panel-roofing .service-panel-media img { object-position:50% 30%; }
.service-panel-review { position:absolute; left:-44px; bottom:36px; width:260px; padding:16px 18px; border:1px solid #edf0ee; border-radius:18px; background:#fff; box-shadow:0 24px 48px -28px #0b181670; }
.service-panel-review .review-stars { display:inline-flex; gap:2px; color:#c8963a; }
.service-panel-review .review-stars svg { width:13px; height:13px; fill:currentColor; }
.service-panel-review p { margin:8px 0 6px; color:var(--ink); font-size:14px; line-height:1.45; letter-spacing:-.01em; }
.service-panel-review span:last-child { color:var(--muted); font-size:12px; }

@media(max-width:1000px) {
  .service-panel { grid-template-columns:1fr; gap:28px; align-items:start; }
  .service-panel-media { order:-1; height:auto; aspect-ratio:16 / 9; }
  .service-panel-review { left:16px; bottom:16px; }
  .service-panel-copy { max-width:560px; }
}
@media(max-width:760px) {
  .service-tabs { display:grid; margin-bottom:24px; }
  .service-tabs button { min-width:0; padding:11px 8px; font-size:13px; }
  .service-panel { gap:22px; }
  .service-panel-media { aspect-ratio:4 / 3; }
  .service-panel-media img { border-radius:20px; }
  .service-panel-review { display:none; }
  .service-panel h3 { font-size:28px; }
  .service-panel-copy>p { font-size:15px; }
}