/* ============================================================
   Services carousel (F1 coverflow) — scoped to .hr-services-grid
   Tokens come from the theme; fallbacks only where the live theme
   lacks a token.
   ============================================================ */
.hr-services-grid { --sg-w: 340px; --sg-gap: 16px; padding: clamp(64px, 8vw, 112px) 0; background: var(--hr-surface); }
.hr-services-grid .hr-sg-wrap { max-width: var(--container-max, 1240px); margin: 0 auto; padding: 0 var(--container-pad, clamp(20px, 4vw, 48px)); }

/* ---- header: eyebrow, H2, lead */
.hr-services-grid .hr-sg-head { max-width: 760px; }
.hr-services-grid .hr-sg-eyebrow { margin: 0 0 12px; font: var(--fw-bold) var(--fs-eyebrow, 0.8125rem)/1.2 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue); }
.hr-services-grid .hr-sg-h2 { margin: 0; font: var(--fw-extrabold) clamp(1.875rem, 3.4vw, 2.75rem)/1.12 var(--font-display); letter-spacing: -0.015em; color: var(--hr-navy); }
.hr-services-grid .hr-sg-lead { margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--hr-body); }

/* ---- the rail: native scrolling and snapping; the middle card sits in the centre */
.hr-services-grid .hr-sg-rail { display: flex; gap: var(--sg-gap); margin: 0; padding: 40px calc(50% - var(--sg-w) / 2) 48px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.hr-services-grid .hr-sg-rail::-webkit-scrollbar { display: none; }
.hr-services-grid .hr-sg-rail:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--hr-blue-100); }
.hr-services-grid .hr-sg-rail.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.hr-services-grid .hr-sg-slot { flex: none; width: var(--sg-w); margin: 0; scroll-snap-align: center; }

/* ---- the card: photo, navy fade, words. The hover layer stays still; the card inside it turns as it scrolls.
   The photo, glow and fades run 2px past the rounded clip, and the navy fallback stops 2px inside it, so the card's
   edge is always photo against page: no dark hairline, and nothing at the edge changes when the hover starts. */
.hr-services-grid .hr-sg-hover { position: relative; height: 100%; }
.hr-services-grid .hr-sg-card { position: relative; aspect-ratio: 3 / 4.2; overflow: hidden; border-radius: var(--r-2xl); isolation: isolate;
  padding: 2px; background: var(--hr-navy); background-clip: content-box;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--hr-navy) 55%, transparent); }
.hr-services-grid .hr-sg-img { position: absolute; inset: -2px; z-index: -2; width: calc(100% + 4px); height: calc(100% + 4px); max-width: none; object-fit: cover; pointer-events: none; }
.hr-services-grid .hr-sg-card::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--hr-navy) 92%, transparent) 100%); }
.hr-services-grid .hr-sg-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; color: var(--hr-text-on-color); }
.hr-services-grid .hr-sg-num { display: block; margin-bottom: 8px; font: var(--fw-bold) 0.75rem/1 var(--font-display); letter-spacing: var(--tracking-eyebrow); color: var(--hr-green); }
.hr-services-grid .hr-sg-title { margin: 0; font: var(--fw-extrabold) 1.5rem/1.15 var(--font-display); color: var(--hr-text-on-color); }
.hr-services-grid .hr-sg-desc { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.5; color: color-mix(in srgb, var(--hr-text-on-color) 90%, transparent); }
/* the link text is the service name; its stretched ::after makes the whole card one target */
.hr-services-grid .hr-sg-link, .hr-services-grid .hr-sg-link:hover, .hr-services-grid .hr-sg-link:focus { color: inherit; text-decoration: none; }
.hr-services-grid .hr-sg-link::after { content: ""; position: absolute; inset: -2000px; z-index: 1; }
.hr-services-grid .hr-sg-link:focus-visible { outline: none; }
.hr-services-grid .hr-sg-card:has(.hr-sg-link:focus-visible) { box-shadow: var(--shadow-focus); }

/* ---- sub-links (e.g. Roofing by type): tucked away until the card is hovered or focused,
   or, on touch screens, is the card in the middle */
.hr-services-grid .hr-sg-reveal { position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .4s var(--ease-out), opacity .3s var(--ease-out); }
.hr-services-grid .hr-sg-reveal > div { overflow: hidden; }
.hr-services-grid .hr-sg-slot:hover .hr-sg-reveal,
.hr-services-grid .hr-sg-slot:focus-within .hr-sg-reveal,
.hr-services-grid.is-touch .hr-sg-slot.is-center .hr-sg-reveal { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) { .hr-services-grid .hr-sg-slot.is-center .hr-sg-reveal { grid-template-rows: 1fr; opacity: 1; } }
/* opening the sub-links pushes the words up over the brighter part of the photo, so a deeper navy scrim fades in
   behind them (opacity only: no repaint while it fades) */
.hr-services-grid .hr-sg-body.has-subs::before { content: ""; position: absolute; top: -96px; right: -2px; bottom: -2px; left: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hr-navy) 62%, transparent) 38%, color-mix(in srgb, var(--hr-navy) 90%, transparent) 70%, var(--hr-navy));
  opacity: 0; transition: opacity .4s var(--ease-out); }
.hr-services-grid .hr-sg-slot:hover .hr-sg-body.has-subs::before,
.hr-services-grid .hr-sg-slot:focus-within .hr-sg-body.has-subs::before,
.hr-services-grid.is-touch .hr-sg-slot.is-center .hr-sg-body.has-subs::before { opacity: 1; }
@media (hover: none) { .hr-services-grid .hr-sg-slot.is-center .hr-sg-body.has-subs::before { opacity: 1; } }
.hr-services-grid .hr-sg-subs-label { margin: 16px 0 10px; font: var(--fw-bold) 0.75rem/1 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--hr-text-on-color); }
.hr-services-grid .hr-sg-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hr-services-grid .hr-sg-subs li { margin: 0; }
.hr-services-grid .hr-sg-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--hr-text-on-color) 70%, transparent);
  background: color-mix(in srgb, var(--hr-navy) 55%, transparent);
  border-radius: var(--r-pill); color: var(--hr-text-on-color); font: var(--fw-semibold) 0.8125rem/1 var(--font-sans); text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.hr-services-grid .hr-sg-chip:hover, .hr-services-grid .hr-sg-chip:focus { background: var(--hr-surface); border-color: var(--hr-surface); color: var(--hr-navy); text-decoration: none; }
.hr-services-grid .hr-sg-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- coverflow: side cards turn away and dim as they leave the middle (scroll-driven, no JS) */
@supports (animation-timeline: view()) {
  .hr-services-grid .hr-sg-card { animation: hr-sg-flow linear both; animation-timeline: view(inline); }
  .hr-services-grid .hr-sg-body > :not(.hr-sg-title):not(.hr-sg-reveal) { animation: hr-sg-text linear both; animation-timeline: view(inline); }
}
@keyframes hr-sg-flow {
  0%   { transform: perspective(1300px) rotateY(-36deg) scale(.84); opacity: .55; }
  50%  { transform: perspective(1300px) rotateY(0) scale(1); opacity: 1; }
  100% { transform: perspective(1300px) rotateY(36deg) scale(.84); opacity: .55; }
}
@keyframes hr-sg-flow-ph {
  0%   { transform: perspective(900px) translateX(-10%) rotateY(-28deg) scale(.88); opacity: .6; }
  50%  { transform: perspective(900px) translateX(0) rotateY(0) scale(1); opacity: 1; }
  100% { transform: perspective(900px) translateX(10%) rotateY(28deg) scale(.88); opacity: .6; }
}
@keyframes hr-sg-text { 0%, 32% { opacity: 0; } 50% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* ---- hover (computers): a slow, soft glow crosses the PHOTO once. It sits above the photo but under the navy fade
   and the words, so the text never washes out; leaving mid-sweep fades it out. The glow's falloff follows a bell
   curve (no straight ramps, so no visible edges or lines) and it is a plain see-through layer moved by transform
   only (no blend mode, which would make the browser redraw the card into an extra surface), so it glides on the
   graphics card at full frame rate. The photo zooms 3%, and a small arrow badge slides into the corner (keyboard
   focus shows the badge too). */
.hr-services-grid .hr-sg-go { position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--hr-surface); color: var(--hr-navy); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--hr-navy) 50%, transparent); pointer-events: none;
  opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.hr-services-grid .hr-sg-go svg { width: 18px; height: 18px; }
.hr-services-grid .hr-sg-slot:focus-within .hr-sg-go { opacity: 1; transform: none; }
.hr-services-grid .hr-sg-card::after { --g: var(--hr-text-on-color); content: ""; position: absolute; inset: -2px; z-index: -2; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%,
    color-mix(in srgb, var(--g) 0.8%, transparent) 27%, color-mix(in srgb, var(--g) 2.5%, transparent) 32%,
    color-mix(in srgb, var(--g) 5.5%, transparent) 36%, color-mix(in srgb, var(--g) 9.5%, transparent) 40%,
    color-mix(in srgb, var(--g) 13.5%, transparent) 44%, color-mix(in srgb, var(--g) 16%, transparent) 47%,
    color-mix(in srgb, var(--g) 17%, transparent) 50%,
    color-mix(in srgb, var(--g) 16%, transparent) 53%, color-mix(in srgb, var(--g) 13.5%, transparent) 56%,
    color-mix(in srgb, var(--g) 9.5%, transparent) 60%, color-mix(in srgb, var(--g) 5.5%, transparent) 64%,
    color-mix(in srgb, var(--g) 2.5%, transparent) 68%, color-mix(in srgb, var(--g) 0.8%, transparent) 73%, transparent 80%);
  opacity: 0; transform: translateX(-100%);
  transition: opacity .4s var(--ease-out), transform 0s linear .4s; }
@media (hover: hover) and (pointer: fine) {
  .hr-services-grid .hr-sg-card { cursor: pointer; }
  .hr-services-grid .hr-sg-rail.is-dragging .hr-sg-card { cursor: grabbing; }
  .hr-services-grid .hr-sg-img { transition: transform 1.2s var(--ease-out); }
  .hr-services-grid .hr-sg-slot:hover .hr-sg-img { transform: scale(1.03); }
  .hr-services-grid .hr-sg-slot:hover .hr-sg-go { opacity: 1; transform: none; }
  .hr-services-grid .hr-sg-slot:hover .hr-sg-card::after { opacity: 1; transform: translateX(100%);
    transition: opacity .25s linear, transform 1.8s cubic-bezier(.37, 0, .63, 1); }
  .hr-services-grid .hr-sg-rail.is-dragging .hr-sg-go,
  .hr-services-grid .hr-sg-rail.is-dragging .hr-sg-card::after { opacity: 0; }
}

/* ---- arrows either side of the pagination: ‹ 01 / 08 ▬▬▬ › */
.hr-services-grid .hr-sg-pg-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.hr-services-grid .hr-sg-btn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--hr-border-strong); border-radius: 50%;
  background: var(--hr-surface); color: var(--hr-navy); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.hr-services-grid .hr-sg-btn:hover { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
.hr-services-grid .hr-sg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-services-grid .hr-sg-btn svg { width: 22px; height: 22px; }

/* ---- pagination: a blue line stretches from dash to dash; at most --vis dashes show, past that they slide along
   and the end dash shrinks to say there are more */
.hr-services-grid .hr-sg-pg { --dash: 28px; --space: 8px; --slot: calc(var(--dash) + var(--space)); display: flex; align-items: center; justify-content: center; gap: 18px; }
.hr-services-grid .hr-sg-count { min-width: 72px; text-align: right; font: var(--fw-bold) 0.9375rem/1 var(--font-display); color: var(--hr-text-subtle); font-variant-numeric: tabular-nums; }
.hr-services-grid .hr-sg-count b { display: inline-block; color: var(--hr-navy); }
.hr-services-grid .hr-sg-count b.is-tick { animation: hr-sg-tick .35s var(--ease-out); }
@keyframes hr-sg-tick { from { transform: translateY(7px); opacity: .2; } to { transform: none; opacity: 1; } }
.hr-services-grid .hr-sg-view { position: relative; display: block; width: calc(var(--vis) * var(--slot) - var(--space)); height: 12px; overflow: hidden; }
.hr-services-grid .hr-sg-track { position: absolute; left: 0; top: 4px; display: flex; gap: var(--space); width: calc(var(--n) * var(--slot) - var(--space)); height: 4px;
  transition: transform .45s var(--ease-out); }
.hr-services-grid .hr-sg-dash { flex: none; width: var(--dash); height: 4px; border-radius: 2px; background: var(--hr-border-strong); opacity: .7;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.hr-services-grid .hr-sg-dash.is-edge { transform: scaleX(.45); opacity: .4; }
.hr-services-grid .hr-sg-worm { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--hr-blue); left: var(--l, 0px); right: var(--r, 0px);
  transition: left .34s cubic-bezier(.3, .7, .3, 1) var(--dl, 0s), right .34s cubic-bezier(.3, .7, .3, 1) var(--dr, 0s); }

/* ---- phones: a narrower middle card with a slice of each neighbour showing, so it reads as a carousel; swipe, no arrows */
@media (max-width: 767px) {
  .hr-services-grid { --sg-w: 62vw; --sg-gap: 8px; }
  .hr-services-grid .hr-sg-rail { padding-top: 24px; padding-bottom: 32px; }
  .hr-services-grid .hr-sg-body { padding: 16px; }
  .hr-services-grid .hr-sg-title { font-size: 1.125rem; }
  .hr-services-grid .hr-sg-desc { font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  /* sub-links on a phone card: a 2-up grid of 44px buttons (long names wrap to two lines) that takes the
     description's place while open, so the title and words stay inside the card */
  .hr-services-grid .hr-sg-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hr-services-grid .hr-sg-chip { display: flex; justify-content: center; min-height: 44px; padding: 4px 8px; font-size: 0.75rem; line-height: 1.2; text-align: center; }
  .hr-services-grid .hr-sg-subs-label { margin: 12px 0 8px; }
  .hr-services-grid .hr-sg-body.has-subs .hr-sg-desc { max-height: 6em; transition: max-height .4s var(--ease-out), margin-top .4s var(--ease-out); }
  .hr-services-grid .hr-sg-slot:hover .hr-sg-body.has-subs .hr-sg-desc,
  .hr-services-grid .hr-sg-slot:focus-within .hr-sg-body.has-subs .hr-sg-desc,
  .hr-services-grid.is-touch .hr-sg-slot.is-center .hr-sg-body.has-subs .hr-sg-desc { max-height: 0; margin-top: 0; }
  .hr-services-grid .hr-sg-btn { display: none; }
  .hr-services-grid .hr-sg-pg { --dash: 22px; --space: 6px; gap: 14px; }
  .hr-services-grid .hr-sg-count { min-width: 60px; font-size: 0.875rem; }
  @supports (animation-timeline: view()) { .hr-services-grid .hr-sg-card { animation-name: hr-sg-flow-ph; } }
}

@media (prefers-reduced-motion: reduce) {
  .hr-services-grid *, .hr-services-grid *::before, .hr-services-grid *::after { transition: none !important; animation: none !important; }
}