/* Services · new version (from option A) — hover list that also plays itself, an automatic colour showcase of the five services,
   steps that light up on their own, moving strips of real jobs. Nothing here needs scrolling to play. */
.sa-hero { padding: calc(var(--head-h) + 90px) 0 110px; }
.sa-hero__top { display: grid; grid-template-columns: 1.5fr .8fr; gap: 50px; align-items: end; margin-bottom: 64px; }
.sa-hero .tag { margin-bottom: 22px; }
.sa-hero .d-xl em { color: var(--crimson); }
.sa-hero .lede { margin: 0; }

/* the big list: point at a row and its photo or clip opens up inside it */
.sa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sa-list li { border-bottom: 1px solid var(--line); }
.sa-list a { display: grid; grid-template-columns: 0 auto 0 1fr 52px; align-items: center; gap: 0 24px; padding: 24px 0; text-decoration: none; color: var(--ink); transition: grid-template-columns .65s cubic-bezier(.2, .8, .1, 1), padding .4s; }
.sa-list__n { font: 600 13px/1 var(--sans); color: var(--muted); }
.sa-list__name { font: 700 clamp(34px, 4.6vw, 72px)/1.04 var(--display); font-variation-settings: "wdth" 86; letter-spacing: -.03em; white-space: nowrap; transition: color .3s; }
.sa-list__pill { position: relative; height: 78px; border-radius: 999px; overflow: hidden; opacity: 0; transition: opacity .4s; background: var(--c); }
.sa-list__pill img, .sa-list__pill video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sa-list__d { justify-self: end; max-width: 22em; text-align: right; font-size: 15px; color: var(--muted); }
.sa-list__go { justify-self: end; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 18px; transition: .35s; }
.sa-list a:focus-visible, .sa-list a.is-open { grid-template-columns: 0 auto 220px 1fr 52px; }
.sa-list a:focus-visible .sa-list__pill, .sa-list a.is-open .sa-list__pill { opacity: 1; }
.sa-list a.is-open .sa-list__name { color: var(--c); }
.sa-list a.is-open .sa-list__go { background: var(--c); border-color: var(--c); color: #fff; transform: rotate(45deg); }

/* steps: they light up one after another on their own */
.sa-steps { padding: 140px 0 120px; }
.sa-steps__head { margin-bottom: 60px; }
.sa-steps .tag { margin-bottom: 22px; }
.sa-steps .d-l em { color: var(--crimson); }
.sa-steps__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; counter-reset: s; }
.sa-steps__list li { position: relative; padding-top: 70px; opacity: .35; transition: opacity .5s; }
.sa-steps__list li.is-on { opacity: 1; }
.sa-steps__list li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font: 700 14px/1 var(--sans); transition: background .5s, color .5s, box-shadow .5s; }
.sa-steps__list li.is-on::before { background: var(--sc); color: var(--sk, #fff); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc) 20%, transparent); }
.sa-steps__list b { display: block; margin-bottom: 8px; font: 700 18px/1.15 var(--display); font-variation-settings: "wdth" 88; }
.sa-steps__list p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* paints */
.sa-paints { padding: 120px 0; background: #fff; }
.sa-paints__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sa-paints .tag { margin-bottom: 20px; }
.sa-paints .d-m em { color: var(--crimson); }
.sa-paints .lede { margin-top: 22px; }
.sa-paints__cans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-paints__cans li { position: relative; padding: 22px 22px 22px 92px; border-radius: 20px; background: var(--paper); min-height: 110px; overflow: hidden; transition: transform .5s var(--ease); }
.sa-paints__cans li:hover { transform: translateY(-4px); }
.sa-paints__cans i { position: absolute; left: 20px; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 40%), var(--c); box-shadow: 0 0 0 5px #d5d7db, 0 0 0 7px #a9acb2; }
.sa-paints__cans li::after { content: ""; position: absolute; left: 20px; top: 0; width: 54px; height: 0; border-radius: 0 0 27px 27px; background: var(--c); transition: height .6s cubic-bezier(.6, 0, .3, 1); }
.sa-paints__cans li:hover::after { height: 26px; }
.sa-paints__cans b { display: block; font: 700 19px/1.15 var(--display); font-variation-settings: "wdth" 88; }
.sa-paints__cans small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }

/* FAQ */
.sa-faq { padding: 130px 0; }
.sa-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.sa-faq .tag { margin-bottom: 20px; }
.sa-faq .d-m em { color: var(--crimson); }
.sa-faq .lede { margin-top: 22px; }
.sa-faq details { border-bottom: 1px solid var(--line); }
.sa-faq details:first-child { border-top: 1px solid var(--ink); }
.sa-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 700 clamp(19px, 1.6vw, 23px)/1.25 var(--display); font-variation-settings: "wdth" 88; cursor: inherit; }
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary i { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-style: normal; transition: transform .4s var(--ease), background .3s; }
.sa-faq details[open] summary i { transform: rotate(45deg); background: var(--crimson); color: #fff; }
.sa-faq details p { margin: 0 0 22px; max-width: 40em; color: var(--ink-2); }

/* quotes */
.sa-q { padding: 20px 0 120px; }
.sa-q__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sa-q figure { margin: 0; padding: 26px; border-radius: 22px; background: #fff; border-top: 6px solid var(--c); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; box-shadow: 0 16px 30px -26px rgba(0, 0, 0, .4); }
.sa-q blockquote { margin: 0; font: italic 400 19px/1.4 var(--serif); }
.sa-q figcaption { font: 700 13px/1 var(--sans); }

@media (max-width: 900px) {
  .sa-hero { padding-top: calc(var(--head-h) + 50px); }
  .sa-hero__top, .sa-paints__grid, .sa-faq__grid { grid-template-columns: 1fr; }
  /* phones: every row keeps its size; the photo sits in a fixed slot on the right and lights up in turn, so nothing below ever moves */
  .sa-list a, .sa-list a.is-open, .sa-list a:focus-visible { grid-template-columns: 0 1fr 96px; gap: 6px 12px; padding: 16px 0; transition: none; }
  .sa-list__n { grid-row: 1; align-self: start; padding-top: 8px; }
  .sa-list__name { grid-column: 2; font-size: 28px; white-space: normal; }
  .sa-list__pill { grid-column: 3; grid-row: 1 / span 2; height: 74px; border-radius: 16px; opacity: .55; transform: scale(.92); transition: opacity .5s, filter .5s, transform .6s var(--ease); }
  .sa-list a.is-open .sa-list__pill { opacity: 1; filter: none; transform: none; }
  .sa-list__d { grid-column: 2; text-align: left; justify-self: start; font-size: 14px; }
  .sa-list__go { display: none; }
  .sa-steps__list { grid-template-columns: 1fr; gap: 0; }
  .sa-steps__list li { padding: 6px 0 28px 70px; }
  .sa-paints__cans { grid-template-columns: 1fr; }
  .sa-q__grid { grid-template-columns: 1fr; }
}

/* ---------- the showcase: plays through the five services by itself ---------- */
.sv-show { position: relative; padding: 120px 0 110px; background: var(--cc, #24324f); color: var(--ci, #fff); transition: background-color .6s ease, color .6s ease; overflow: hidden; }
.sv-show__head { margin-bottom: 30px; }
.sv-show__tag { color: inherit; margin-bottom: 18px; }
.sv-show__tag::before { background: currentColor; }
.sv-show .d-m em { color: inherit; opacity: .85; }
.sv-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 34px; }
.sv-tab { position: relative; display: grid; gap: 6px; padding: 14px 16px 16px; border: 0; border-radius: 16px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; text-align: left; transition: background .5s, color .5s, transform .4s var(--ease); }
.sv-tab:hover { transform: translateY(-2px); }
.sv-tab span { font: 700 12px/1 var(--sans); letter-spacing: .14em; opacity: .65; }
.sv-tab b { font: 700 clamp(16px, 1.3vw, 19px)/1.15 var(--display); font-variation-settings: "wdth" 88; }
.sv-tab[aria-selected="true"] { background: var(--ci, #fff); color: var(--cc, #24324f); }

.sv-stage { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.sv-stage__copy { display: grid; }
.sv-card { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .5s var(--ease); pointer-events: none; visibility: hidden; transition-property: opacity, transform, visibility; }
.sv-card.is-on { opacity: 1; transform: none; transition-delay: .18s; pointer-events: auto; visibility: visible; }
.sv-card h3 { margin: 0 0 16px; font: 700 clamp(40px, 4.6vw, 78px)/.94 var(--display); font-variation-settings: "wdth" 84; letter-spacing: -.035em; }
.sv-card p { margin: 0 0 22px; max-width: 30em; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; opacity: .9; }
.sv-card h4 { margin: 0 0 10px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.sv-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.sv-card li { padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 15px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sv-chips span { padding: 8px 12px; border-radius: 99px; background: color-mix(in srgb, currentColor 10%, transparent); font: 600 13px/1 var(--sans); }
.sv-card blockquote { margin: 0 0 24px; padding-left: 16px; border-left: 3px solid currentColor; font: italic 400 18px/1.4 var(--serif); opacity: .92; }
.sv-card blockquote cite { display: block; margin-top: 6px; font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.sv-card .btn { --bg: var(--ci, #fff); --fg: var(--cc, #24324f); --streak: #9f102c; }
.sv-card .btn:hover { color: #fff; }

.sv-stage__media { position: relative; aspect-ratio: 5 / 4.2; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .15); }
.sv-shot { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 0 100% round 26px); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1); }
.sv-shot.is-on { clip-path: inset(0 0 0 0 round 26px); z-index: 2; }
.sv-shot.was { clip-path: inset(0 0 0 0 round 26px); z-index: 1; transition: none; }
.sv-shot > img, .sv-shot > video { width: 100%; height: 100%; object-fit: cover; }
.sv-shot.is-on > img { animation: sv-push 4.5s ease-out both; }
@keyframes sv-push { from { transform: scale(1.08); } to { transform: scale(1); } }
.sv-shot__inset { position: absolute; right: 14px; bottom: 14px; width: 36%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 20px 30px -14px rgba(0, 0, 0, .5); }
.sv-shot__inset img { width: 100%; height: 100%; object-fit: cover; }

/* a strip of Beacon jobs for the service that's showing; it slides along on its own */
.sv-strip { position: relative; display: grid; margin-top: 34px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sv-strip__row { grid-area: 1 / 1; display: flex; gap: 12px; width: max-content; animation: sv-mq 40s linear infinite; opacity: 0; transition: opacity .6s; }
.sv-strip__row.is-on { opacity: 1; }
.sv-strip:hover .sv-strip__row { animation-play-state: paused; }
.sv-strip figure { margin: 0; flex: none; width: 210px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.sv-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sv-strip figure:hover img { transform: scale(1.06); }
.sv-strip__note { grid-row: 2; margin: 10px 0 0; font-size: 12.5px; opacity: .7; }
@keyframes sv-mq { to { transform: translateX(-50%); } }

/* steps, playing themselves */
.sa-steps__list li { cursor: inherit; }
.sa-steps__list li button { all: unset; display: block; cursor: inherit; }
.sa-steps__list li button:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; border-radius: 6px; }
.sa-steps__list li.is-now b { color: var(--sc); }
.sv-stepnow { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; padding: 22px 26px; border-radius: 20px; background: #fff; box-shadow: 0 18px 34px -28px rgba(0, 0, 0, .4); border-left: 6px solid var(--sc, var(--crimson)); transition: border-color .4s; }
.sv-stepnow b { grid-row: span 2; font: 700 clamp(44px, 4vw, 64px)/1 var(--display); font-variation-settings: "wdth" 84; color: var(--sc, var(--crimson)); transition: color .4s; }
.sv-stepnow strong { font: 700 clamp(19px, 1.7vw, 24px)/1.15 var(--display); font-variation-settings: "wdth" 88; }
.sv-stepnow span { color: var(--muted); }

/* recent work, always moving */
.sv-work { padding: 10px 0 100px; overflow: hidden; }
.sv-work__row { display: flex; gap: 14px; width: max-content; margin-bottom: 14px; animation: sv-mq 60s linear infinite; }
.sv-work__row--rev { animation-direction: reverse; animation-duration: 70s; }
.sv-work:hover .sv-work__row { animation-play-state: paused; }
.sv-work figure { margin: 0; position: relative; flex: none; width: 280px; height: 196px; border-radius: 18px; overflow: hidden; }
.sv-work figure:nth-child(3n) { width: 196px; }
.sv-work img { width: 100%; height: 100%; object-fit: cover; }
.sv-work figure i { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); font: 600 11.5px/1 var(--sans); font-style: normal; }

@media (max-width: 900px) {
  .sv-show { padding: 80px 0 70px; }
  .sv-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--pad) * -1) 22px; padding: 0 var(--pad) 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .sv-tabs::-webkit-scrollbar { display: none; }
  .sv-tab { flex: none; width: 150px; scroll-snap-align: start; }
  .sv-stage { grid-template-columns: 1fr; }
  .sv-stage__media { order: -1; aspect-ratio: 4 / 3.2; }
  .sv-card ul { grid-template-columns: 1fr; }
  .sv-card h3 { font-size: 42px; }
  .sv-strip figure { width: 150px; }
  .sv-stepnow { grid-template-columns: 1fr; }
  .sv-stepnow b { grid-row: auto; }
  .sv-work figure { width: 200px; height: 140px; }
  .sv-work figure:nth-child(3n) { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .sv-strip__row, .sv-work__row { animation: none; } }

/* no decorative 01–07 numbering (AI habit): list numbers go, step circles carry a painted tick instead */
.sa-list__n { visibility: hidden; }
.sa-list a { margin-left: -24px; }
@media (max-width: 760px) { .sa-list a, .sa-list a.is-open, .sa-list a:focus-visible { margin-left: -12px; } }
.sv-stepnow b { display: none; }
.sa-steps__list li::before { content: "✓"; font-size: 20px; }