/* Services hub: ink opener with the bento mosaic, the goal filter (Flip), the whole-house order line */

/* ------------------------------------------------------------ opener */
.sv-op { min-height: min(80svh, 860px); display: flex; align-items: center; overflow: clip; }
.sv-op > .wrap { position: relative; z-index: 1; }
.sv-op__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(48% 60% at 82% 30%, rgba(122,188,99,.22), transparent 70%),
  radial-gradient(36% 50% at 8% 92%, rgba(200,96,91,.16), transparent 70%); }
.sv-op__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.sv-op__copy { display: grid; gap: clamp(16px, 1.6vw, 24px); align-content: center; }
.sv-op h1 { font-size: clamp(42px, 5vw, 84px); color: #fff; }
.sv-op h1 em { color: var(--green); }
.sv-op .lede { color: rgba(255,255,255,.8); }
.sv-proof { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.86); font-size: var(--small); }
.sv-proof li { display: inline-flex; align-items: center; gap: 8px; }
.sv-proof svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 2.6; }

/* the mosaic: six photos in a bento grid */
.sv-mosaic { position: relative; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "s s h b" "s s h a" "e e i i"; height: min(62vh, 600px); }
.t-solar { grid-area: s; } .t-ashp { grid-area: h; } .t-battery { grid-area: b; } .t-a2a { grid-area: a; } .t-ev { grid-area: e; } .t-insulation { grid-area: i; }
.sv-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--ink-2); color: #fff; text-decoration: none; isolation: isolate; }
.sv-tile__img { position: absolute; inset: -7%; z-index: -2; will-change: transform; }
.sv-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: filter .8s var(--ease); }
.sv-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,20,13,.88) 0%, rgba(8,20,13,.25) 50%, rgba(8,20,13,0) 75%); transition: background .6s; }
.sv-tile::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--green); opacity: 0; transition: opacity .5s; pointer-events: none; }
.sv-tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(12px, 1.1vw, 18px) clamp(12px, 1.2vw, 20px); display: grid; gap: 0; }
.sv-tile__label strong { font-family: var(--display); font-weight: 750; font-size: clamp(16px, 1.25vw, 22px); line-height: 1.12; letter-spacing: -.01em; }
.t-solar .sv-tile__label strong { font-size: clamp(20px, 1.8vw, 30px); }
.sv-tile__more { display: block; }
.sv-tile__more > span { display: block; font-size: 16px; line-height: 1.35; color: rgba(255,255,255,.86); }
/* The blurb always keeps its space, so the label box never changes size. With scripts, the label rests moved down by
   the blurb's height (--mh, measured in services.js) with the blurb faded out; lit or hovered, it slides up into view. */
html:not(.no-js) .sv-tile__label { transform: translateY(var(--mh, 0px)); transition: transform .6s var(--ease); }
html:not(.no-js) .sv-tile__more > span { opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
html:not(.no-js) .sv-tile.is-lit .sv-tile__label, html:not(.no-js) .sv-tile:hover .sv-tile__label, html:not(.no-js) .sv-tile:focus-visible .sv-tile__label { transform: none; }
html:not(.no-js) .sv-tile.no-more .sv-tile__label { transform: translateY(var(--mh, 0px)); }
html:not(.no-js) .sv-tile.no-more .sv-tile__more > span { opacity: 0; visibility: hidden; }
.sv-tile__more > span::before { content: ''; display: block; height: 6px; }
.sv-tile__go { position: absolute; z-index: 2; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; transition: background .3s, transform .45s var(--ease); }
.sv-tile__go svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; }
.sv-tile.is-lit::before, .sv-tile:hover::before, .sv-tile:focus-visible::before { opacity: 1; }
html:not(.no-js) .sv-tile.is-lit .sv-tile__more > span, html:not(.no-js) .sv-tile:hover .sv-tile__more > span, html:not(.no-js) .sv-tile:focus-visible .sv-tile__more > span { visibility: visible; opacity: 1; }
.sv-tile.is-lit .sv-tile__go, .sv-tile:hover .sv-tile__go { background: var(--coral); transform: rotate(-45deg); }
.sv-mosaic__bar { position: absolute; left: 0; right: 0; bottom: -22px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sv-mosaic__bar i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.sv-mosaic__bar b { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
.sv-tile.is-lit::after { background: linear-gradient(to top, rgba(31,77,24,.92) 0%, rgba(31,77,24,.25) 42%, rgba(8,20,13,0) 62%); }

/* ------------------------------------------------- pick by goal */
.sv-pick__head { margin-bottom: clamp(20px, 2vw, 28px); }
.sv-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; isolation: isolate; }
.sv-chips__pill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; border-radius: 999px; background: var(--ink); opacity: 0; pointer-events: none; }
.sv-chip { min-height: 48px; padding: 10px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); transition: color .35s, border-color .35s, background .35s; }
.sv-chip:hover { border-color: var(--green-deep); }
.sv-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sv-chips.has-pill .sv-chip { transition: color .35s, border-color .35s; }
.sv-chips.has-pill .sv-chip.is-on { background: transparent; }
.sv-chips.has-pill .sv-chip.is-on.is-landed { background: var(--ink); }   /* the pill has arrived: the chip carries the same colour */
.sv-count { margin: 18px 0 clamp(16px, 1.8vw, 24px); color: var(--muted); font-size: var(--small); }
.sv-count b { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--green-deep); }
.sv-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sv-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .45s var(--ease), border-color .3s; }
.sv-card:hover { box-shadow: 0 30px 50px -30px rgba(15,36,24,.45); border-color: rgba(79,154,58,.5); }
.sv-card.is-out { display: none; }
.sv-card__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 8; background: var(--ink-2); }
.sv-card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
.sv-card:hover .sv-card__img img { scale: 1.06; }
.sv-card__body { display: grid; gap: 8px; align-content: start; padding: 18px 22px 20px; grid-template-columns: auto 1fr; column-gap: 14px; }
.sv-card__icon { grid-row: span 1; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--paper-2); color: var(--green-deep); display: grid; place-items: center; transition: background .3s, color .3s; }
.sv-card:hover .sv-card__icon { background: var(--green-deep); color: #fff; }
.sv-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-card__body strong { align-self: center; font-family: var(--display); font-weight: 750; font-size: clamp(20px, 1.45vw, 24px); line-height: 1.15; }
.sv-card__why { grid-column: 1 / -1; color: #33443a; font-size: var(--small); line-height: 1.5; }
.sv-card__go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--green-dark); }
.sv-card__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .35s var(--ease); }
.sv-card:hover .sv-card__go svg { transform: translateX(4px); }
.sv-card__why.is-new { color: var(--ink); }

/* ------------------------------------------- the whole-house order */
.sv-order { overflow: clip; }
.sv-track { position: relative; }
.sv-track__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-track__line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sv-track__base { stroke: rgba(15,36,24,.24); stroke-width: 2.5; stroke-dasharray: 2 9; }
.sv-track__draw { stroke: var(--green-deep); stroke-width: 4; }
.sv-track__spark { position: absolute; left: 0; top: 0; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--green-deep), 0 0 22px 8px rgba(122,188,99,.7); opacity: 0; pointer-events: none; }
.sv-steps { position: relative; display: grid; gap: 26px; }
.sv-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; row-gap: 14px; align-items: start; align-content: start; }
.sv-step__media { grid-column: 2; grid-row: 1; display: block; border-radius: var(--radius-sm); }
.sv-step__img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-2); box-shadow: 0 26px 40px -26px rgba(15,36,24,.55); transition: transform .8s var(--ease); }
.sv-step__img img { width: 100%; height: 100%; object-fit: cover; transition: filter .8s var(--ease), scale 1.2s var(--ease); }
.sv-step__media:hover .sv-step__img img { scale: 1.06; }
.sv-step__node { grid-column: 1; grid-row: 1; position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; box-shadow: 0 0 0 6px #f3e7dc; transition: background .5s, color .5s, box-shadow .5s; }
.sv-step__node b { font-family: var(--display); font-weight: 800; font-size: 18px; }
.sv-step__node::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green-deep); opacity: 0; }
.sv-step.is-lit .sv-step__node::after { animation: sv-node 2.4s ease-out infinite; }
@keyframes sv-node { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.sv-step__text { grid-column: 2; display: grid; gap: 6px; justify-items: start; }
.sv-step__text h3 { font-size: clamp(22px, 1.7vw, 28px); }
.sv-step__text p { color: #3a4a40; font-size: var(--small); line-height: 1.5; }
.sv-step__text .link-arrow { min-height: 44px; font-size: 16px; }

/* motion start states (only with JS and motion allowed) */
html.has-js.motion .sv-tile { clip-path: inset(50% 50% round var(--radius-sm)); }
html.has-js.motion .sv-step:not(.is-lit) .sv-step__img img { filter: grayscale(.85); }
html.has-js.motion .sv-step:not(.is-lit) .sv-step__img { transform: scale(.95); }
html.has-js.motion .sv-step:not(.is-lit) .sv-step__node { background: #fff; color: var(--ink); box-shadow: 0 0 0 6px #f3e7dc, inset 0 0 0 2px rgba(15,36,24,.25); }
html.has-js.motion .sv-card { opacity: 0; }

@media (min-width: 720px) {
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-card.is-wide { grid-column: span 2; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; }
  .sv-card.is-wide .sv-card__img { aspect-ratio: auto; min-height: 300px; }
  .sv-card.is-wide .sv-card__img img { position: absolute; inset: 0; }
  .sv-card.is-wide .sv-card__body { align-content: center; padding: 26px 30px; }
  .sv-card.is-wide .sv-card__body strong { font-size: clamp(24px, 1.9vw, 32px); }
  .sv-card.is-wide .sv-card__why { font-size: clamp(17px, 1.2vw, 19px); }
}
@media (min-width: 1000px) {
  .sv-op__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); }
  .sv-step { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .sv-step__media, .sv-step__node, .sv-step__text { grid-column: 1; grid-row: auto; }
  .sv-step__img { aspect-ratio: 3 / 2; }
}
@media (max-width: 999px) {
  .sv-op { min-height: 0; }
  .sv-mosaic { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 46vw 34vw 34vw 34vw; grid-template-areas: "s s" "h b" "h a" "e i"; max-width: 720px; }
  .sv-mosaic { grid-template-rows: min(46vw, 330px) min(34vw, 240px) min(34vw, 240px) min(34vw, 240px); }
}
@media (max-width: 719px) {
  .sv-tile__go { width: 34px; height: 34px; right: 8px; top: 8px; }
  .sv-tile__more { display: none; }
  .sv-chip { padding: 10px 16px; }
  .sv-card__img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-mosaic__bar { display: none; }
  html.has-js.motion .sv-tile { clip-path: none; }
  html.has-js.motion .sv-step:not(.is-lit) .sv-step__img img { filter: none; }
  html.has-js.motion .sv-step:not(.is-lit) .sv-step__img { transform: none; }
  html.has-js.motion .sv-step:not(.is-lit) .sv-step__node { background: var(--green-deep); color: #fff; box-shadow: 0 0 0 6px #f3e7dc; }
  html.has-js.motion .sv-card { opacity: 1; }
}

/* the coloured phrase always takes its own line, so a wrapped heading never breaks inside it */
.sv-pick h2 em, .sv-order h2 em { display: block; }

/* short desktop screens (1366x768, 1280x720): the whole opener, proof row included, fits above the fold */
@media (min-width: 1000px) and (max-height: 860px) {
  .sv-op { min-height: 0; padding-top: calc(var(--header-h) + 16px); padding-bottom: 28px; }
  .sv-op h1 { font-size: clamp(36px, 3.9vw, 60px); }
  .sv-op__copy { gap: 14px; }
  .sv-op .lede { font-size: 17px; line-height: 1.5; }
  .sv-proof { padding-top: 12px; }
  .sv-mosaic { height: min(68vh, 520px); }
}

/* the tile labels measure their blurbs, so they show once the web fonts are in (main.js adds .fonts-in, 1.5 s at most) */
html.has-js.motion:not(.fonts-in) .sv-tile__label { opacity: 0; }
.sv-tile__label { transition: opacity .4s; }