/* Services page, chapter system (see DESIGN-NOTES.md).
   One idea per screen. Type sizes match the homepage: page hero 6vw/15vw, chapter headline 8vw, lead 1.1-1.4rem, body 1.1rem+. */

/* 1. Hero: one statement, nothing else */
.svc-hero { display: flex; align-items: center; min-height: min(80svh, 52rem); padding-block: clamp(3rem, 8vw, 7rem); }
.svc-hero h1 { font-size: clamp(3.4rem, 6vw, 6rem); line-height: .88; margin: 0 0 clamp(1.25rem, 2vw, 2rem); max-width: 14ch; text-wrap: balance; }
.svc-hero__intro { max-width: 30rem; margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; }
@media (max-width: 720px) { .svc-hero { min-height: 70svh; padding-block: 2rem 3rem; } .svc-hero h1 { font-size: clamp(3.4rem, 15vw, 6rem); } .svc-hero__intro { font-size: 1.2rem; } }

/* 2. The pool: a heading chapter, then one chapter per service */
.svc-pool { background: var(--ink); color: var(--cream); padding-block: clamp(4.5rem, 9vw, 9rem); }
.svc-pool__head, .svc-model__head { display: grid; gap: 1.25rem; }
.svc-pool h2, .svc-model h2 { font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: .9; margin: 0; text-wrap: balance; }
.svc-pool__lead, .svc-model__lead { margin: 0; max-width: 30rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; }
.svc-pool__lead { color: var(--cream); }
@media (max-width: 720px) { .svc-pool h2, .svc-model h2 { font-size: clamp(3.4rem, 15vw, 5.5rem); } .svc-pool__lead, .svc-model__lead { font-size: 1.2rem; } }
@media (min-width: 900px) { .svc-pool__head, .svc-model__head { grid-template-columns: 1fr minmax(16rem, 26rem); align-items: end; } }

.svc-step { display: flex; align-items: center; min-height: min(100svh, 56rem); padding-block: clamp(3rem, 6vw, 6rem); }
.svc-step--sand { background: #e8e3d4; color: var(--ink); }
.svc-step--orange { background: var(--orange); color: var(--ink); }
.svc-step--ink { background: var(--ink); color: var(--cream); }
.svc-step--rust { background: var(--rust, #b8360f); color: var(--cream); }
.svc-step__inner { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; width: var(--shell); }
@media (min-width: 900px) { .svc-step__inner { grid-template-columns: 1.1fr .9fr; } }
.svc-step__label { margin: 0 0 clamp(1rem, 2vw, 1.75rem); display: flex; gap: .7rem; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.svc-step h3 { font-size: clamp(3.4rem, 6.5vw, 7.5rem); line-height: .88; letter-spacing: -.025em; margin: 0 0 clamp(1rem, 2vw, 1.75rem); text-wrap: balance; }
.svc-step__text { margin: 0; max-width: 28rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; }
.svc-step__more { display: inline-block; margin-top: clamp(1rem, 2vw, 1.5rem); color: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: underline; text-underline-offset: .25em; }
.svc-step__image { margin: 0; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(13,13,12,.15); }
.svc-step__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
@media (max-width: 720px) {
  .svc-step { min-height: 0; padding-block: 3.5rem; }
  .svc-step h3 { font-size: clamp(3.4rem, 15vw, 5.6rem); }
  .svc-step__image { aspect-ratio: 5 / 4; }
}

/* 3. Ways of working: three colored tiles, same family as the homepage step tiles */
.svc-model { padding-block: clamp(4.5rem, 9vw, 9rem); background: var(--cream); }
.svc-model__head { margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.svc-model__lead { color: var(--ink); }
.svc-options { list-style: none; margin-block: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .svc-options { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.svc-option { display: flex; flex-direction: column; min-height: clamp(20rem, 34vw, 30rem); padding: clamp(1.25rem, 2vw, 2rem); border-radius: 1.1rem; }
.svc-option--sand { background: #e8e3d4; color: var(--ink); }
.svc-option--orange { background: var(--orange); color: var(--ink); }
.svc-option--ink { background: var(--ink); color: var(--cream); }
.svc-option p { margin: 0; }
.svc-option__role { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.svc-option h3 { font-size: clamp(3rem, 4.6vw, 5rem); line-height: .88; margin: auto 0 1rem; }
.svc-option p:last-child { font-size: 1.1rem; line-height: 1.35; max-width: 26rem; }
@media (max-width: 720px) { .svc-option { min-height: 17rem; } .svc-option h3 { font-size: clamp(3.4rem, 15vw, 5rem); } }

/* Zoomed-out view: every service on one screen, each a link to its deep dive below */
.svc-pool__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.svc-index { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid rgba(245,242,234,.22); }
.svc-index li { border-bottom: 1px solid rgba(245,242,234,.22); }
.svc-index a { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: .5rem; padding-block: clamp(.55rem, 1.1vw, 1rem); color: var(--cream); text-decoration: none; transition: color .2s ease, padding .25s ease; }
.svc-index__n { color: var(--orange); font-size: .85rem; font-weight: 700; letter-spacing: .12em; }
.svc-index__t { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.svc-index__go { color: var(--orange); font-size: 1.4rem; }
.svc-index a:hover, .svc-index a:focus-visible { color: var(--orange); }
.svc-index a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 720px) { .svc-index a { grid-template-columns: 2.4rem 1fr auto; } .svc-index__t { font-size: clamp(1.7rem, 7.4vw, 2.3rem); } }
html:root { scroll-padding-top: 0; }
.svc-step { scroll-margin-top: 0; }

/* Hero: statement on the left, one photo on the right so the screen is never empty */
.svc-hero { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .svc-hero { grid-template-columns: 1fr 1fr; } }
.svc-hero__image { margin: 0; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; background: #1b1b19; }
.svc-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
@media (max-width: 899px) { .svc-hero { min-height: 0; } }

/* Deep dive as rising cards: each service slides up over the one before, like the homepage steps */
.svc-step { position: relative; border-radius: 0; margin-top: 0; }
.svc-pool { padding-bottom: calc(clamp(4.5rem, 9vw, 9rem) + 1.8rem); }
@media (min-width: 900px) {
  .svc-step { position: sticky; top: 0; min-height: 100svh; }
  .svc-step:nth-of-type(n) { z-index: 1; }
  #svc-2 { z-index: 2; } #svc-3 { z-index: 3; } #svc-4 { z-index: 4; } #svc-5 { z-index: 5; } #svc-6 { z-index: 6; } #svc-7 { z-index: 7; }
  .svc-model { position: relative; z-index: 8; border-radius: 0; margin-top: 0; }
}
@media (max-width: 899px) { .svc-model { border-radius: 0; margin-top: 0; position: relative; } }
@media (prefers-reduced-motion: reduce) { .svc-step { position: relative; } }

/* One horizontal line of links, pinned at the top while you move through the services */
.svc-line { position: sticky; top: 0; z-index: 20; background: var(--ink); color: var(--cream); border-top: 1px solid rgba(245,242,234,.22); border-bottom: 1px solid rgba(245,242,234,.22); }
.svc-line__in { display: flex; justify-content: space-between; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.svc-line__in::-webkit-scrollbar { display: none; }
.svc-line a { display: inline-flex; align-items: baseline; gap: .45rem; flex: none; padding-block: .85rem; color: inherit; text-decoration: none; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1; white-space: nowrap; transition: color .2s ease; }
.svc-line a span { color: var(--orange); font-family: "DM Sans", sans-serif; font-size: .7rem; letter-spacing: .12em; }
.svc-line a:hover, .svc-line a.is-on { color: var(--orange); }
.svc-line a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 720px) { .svc-line__in { justify-content: flex-start; gap: 1.5rem; } .svc-line a { font-size: 1.3rem; padding-block: .8rem; } }
.svc-deck { position: relative; }

/* Each card grows: starts inset with rounded corners, widens to full width as it rises (same as the homepage people chapter) */
.svc-step[data-rise], .svc-model[data-rise] {
  margin-inline: calc((1 - var(--rise, 1)) * 5vw);
  border-radius: calc(.4rem + (1 - var(--rise, 1)) * 1.4rem) calc(.4rem + (1 - var(--rise, 1)) * 1.4rem) 0 0;
}

/* Hero: one bold centered statement, filling the first screen (each NDS site opens differently; this page opens with a centered punch) */
.svc-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100svh - 92px); padding-block: clamp(2rem, 6vw, 5rem); }
.svc-hero h1 { font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: .88; max-width: 13ch; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); text-wrap: balance; }
.svc-hero__intro { max-width: 32rem; margin: 0 auto; font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
@media (max-width: 720px) { .svc-hero { min-height: calc(100svh - 88px); } .svc-hero h1 { font-size: clamp(3.4rem, 15vw, 6rem); } .svc-hero__intro { font-size: 1.2rem; } }

/* Hint at the next section: the first screen stops short so the top of "Our services." shows at the bottom edge */
.svc-hero { min-height: calc(100svh - 92px - 9svh); }
.svc-pool { padding-top: clamp(4.5rem, 9vw, 9rem); }
@media (max-width: 720px) { .svc-hero { min-height: calc(100svh - 88px - 9svh); } }

/* Hierarchy: the opening statement is the biggest thing on the page. Section headings are one clear step down (about half), so the two never compete. */
.svc-pool h2, .svc-model h2 { font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: .92; }
@media (max-width: 720px) { .svc-pool h2, .svc-model h2 { font-size: clamp(2.6rem, 11vw, 3.6rem); } }
.svc-pool__lead, .svc-model__lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
@media (min-width: 900px) { .svc-pool__head, .svc-model__head { align-items: center; } }

/* First card is square and flat against the black list; the others round and rise over each other */
#svc-1 { border-radius: 0; margin-top: 0; }

/* Nothing but the cards shows behind a rising card: the deck is the same black as the last service */
.svc-deck { background: var(--ink); }

/* Growing cards end flat and full width: corners are only round while the card is still narrow */
.svc-step[data-rise] {
  margin-inline: calc((1 - var(--rise, 1)) * 5vw);
  border-radius: calc((1 - var(--rise, 1)) * 1.8rem) calc((1 - var(--rise, 1)) * 1.8rem) 0 0;
}

/* Phones: each card carries a screen's worth of its own colour under the next card, so while the next one is still narrow you see the card before it, never the page behind */
@media (max-width: 899px) {
  .svc-step { padding-bottom: calc(3.5rem + 100svh); margin-bottom: -100svh; }
  .svc-model { position: relative; }
}

/* Rule: sections are never rounded at rest. Only a card that is still growing is rounded, and it flattens as it fills the page. */
.svc-model, #svc-1 { border-radius: 0; margin-top: 0; }
/* Hero: text only, same position and sizes as the home hero. Left aligned; the headline sits where the home headline sits (about 175px under the header on a phone, 58px on desktop). The NDS sites do the same page to page: same header, statement in the same place, no photo needed. */
.svc-hero.shell { display: flex; flex-direction: column; justify-content: flex-start; text-align: left; min-height: 0; padding-block: 2.5rem 0; }
.svc-hero.shell h1 { font-size: clamp(3.4rem, 15vw, 6rem); line-height: .88; letter-spacing: -.035em; max-width: none; margin: 0; text-wrap: initial; }
.svc-hero.shell .svc-hero__intro { max-width: 31rem; margin: 1.1rem 0 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.035em; text-align: left; }
@media (min-width: 900px) {
  .svc-hero.shell { display: block; min-height: 0; padding-block: 3.6rem 0; }
  .svc-hero.shell h1 { font-size: clamp(3.4rem, 8vw, 8.5rem); max-width: 22ch; text-wrap: balance; }
  .svc-hero.shell .svc-hero__intro { font-size: 1.125rem; }
}

/* Our services, the way ndstudio.gov shows its pages: a hairline, a small label, then a quiet grid of thumbnails with one-line captions. Everything visible at a glance; each tile jumps to its service. */
.svc-deck .svc-pool { background: var(--cream); color: var(--ink); }
.svc-pool__all { width: var(--shell); margin-inline: auto; padding-top: 0; }
.svc-pool h2.svc-pool__label { display: flex; gap: 2.5rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); font-family: "DM Sans", sans-serif; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .95rem; line-height: 1.2; }
.svc-pool__all .svc-index { width: auto; margin: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.svc-pool__all .svc-index li { border: 0; }
.svc-pool__all .svc-index a { display: block; padding: 0; color: var(--ink); }
.svc-index__img { margin: 0 0 .7rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .8rem; background: #d9d4c5; }
.svc-index__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: transform .5s cubic-bezier(.22,.8,.3,1); }
.svc-pool__all .svc-index a:hover img, .svc-pool__all .svc-index a:focus-visible img { transform: scale(1.04); }
.svc-index__cap { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: baseline; }
.svc-pool__all .svc-index__n { font-size: .75rem; }
.svc-pool__all .svc-index__t { font-family: "DM Sans", sans-serif; font-weight: 500; text-transform: none; letter-spacing: -.01em; line-height: 1.2; font-size: 1rem; }
.svc-pool__all .svc-index__go { font-size: 1rem; }
.svc-pool__all .svc-index a:hover .svc-index__t, .svc-pool__all .svc-index a:focus-visible .svc-index__t { color: var(--rust, #b8360f); }
@media (min-width: 900px) { .svc-pool__all .svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; } .svc-pool__all .svc-index__t { font-size: 1.1rem; } }
.svc-deck .svc-pool h2.svc-pool__label { font-family: "DM Sans", sans-serif; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .95rem; line-height: 1.2; }
@media (max-width: 720px) { .svc-pool__all .svc-index__go { display: none; } .svc-index__cap { grid-template-columns: auto 1fr; } }
.svc-index__img { aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .svc-pool__all .svc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.25rem; } .svc-pool__all .svc-index__t { font-size: 1rem; } }
.svc-index__img--how { display: grid; place-items: end start; background: var(--orange); }
.svc-index__img--how span { padding: .9rem 1.1rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--ink); }
#how-we-work { scroll-margin-top: 0; }

/* Tiles: slightly soft photo with a warm tint, the name sitting right on the square. */
.svc-pool__all .svc-index a { position: relative; display: block; border-radius: .8rem; overflow: hidden; background: var(--ink); }
.svc-index__img { margin: 0; border-radius: 0; position: relative; }
.svc-index__img img { filter: grayscale(1) blur(2.5px) contrast(1.05); transform: scale(1.06); }
.svc-index__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,.82), rgba(13,13,12,.18) 70%), rgba(255,105,65,.3); transition: opacity .4s ease; }
.svc-pool__all .svc-index a:hover img, .svc-pool__all .svc-index a:focus-visible img { transform: scale(1.1); filter: grayscale(1) blur(1px) contrast(1.05); }
.svc-index__cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: .85rem .95rem; grid-template-columns: 1fr auto; gap: .15rem .6rem; color: var(--cream); }
.svc-pool__all .svc-index__n { grid-column: 1 / -1; color: var(--orange); font-size: .75rem; letter-spacing: .12em; }
.svc-pool__all .svc-index__t { color: var(--cream); font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
.svc-pool__all .svc-index__go { color: var(--cream); align-self: end; }
.svc-pool__all .svc-index a:hover .svc-index__t, .svc-pool__all .svc-index a:focus-visible .svc-index__t { color: var(--cream); text-decoration: underline; text-underline-offset: .2em; }
.svc-index__img--how::after { display: none; }
.svc-index__img--how span { display: none; }
.svc-pool__all .svc-index li:last-child a { background: var(--orange); }
.svc-pool__all .svc-index li:last-child .svc-index__n, .svc-pool__all .svc-index li:last-child .svc-index__t, .svc-pool__all .svc-index li:last-child .svc-index__go { color: var(--ink); }
@media (max-width: 720px) { .svc-pool__all .svc-index__go { display: none; } .svc-index__cap { grid-template-columns: 1fr; padding: .7rem .75rem; } .svc-pool__all .svc-index__t { font-size: .98rem; } }
.svc-pool__all .svc-index li:not(:last-child) .svc-index__n { color: rgba(245,242,234,.8); }

/* Type: follow the homepage. Same hero size and tracking, same label style as the home eyebrow and step numbers, same link size as the home "See more" link. */
.services-page .svc-hero.shell h1 { font-size: clamp(3.4rem, 15vw, 6rem); line-height: .88; letter-spacing: -.035em; }
@media (min-width: 900px) { .services-page .svc-hero.shell h1 { font-size: clamp(3.4rem, 6vw, 6rem); letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; } }
.services-page .svc-step__label, .services-page .svc-option__role, .services-page .svc-pool__label { font-family: "DM Sans", sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.services-page .svc-pool h2.svc-pool__label, .services-page .svc-deck .svc-pool h2.svc-pool__label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.services-page .svc-pool__all .svc-index__n { font-size: .75rem; letter-spacing: .16em; }
.services-page .svc-step__more { font-size: 1rem; font-weight: 700; }
@media (min-width: 900px) { .services-page .svc-step__more { font-size: 1.15rem; } }

/* Ways to work with us: no cards (the cards are used above). A quiet two-column text layout like the ndstudio.gov statements: small label on the left, headline and sentence on the right, space between the rows. */
.svc-options, .svc-options.shell { display: block; }
.svc-option, .svc-option--sand, .svc-option--orange, .svc-option--ink { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; min-height: 0; padding: clamp(1.75rem, 4vw, 3.25rem) 0; border-radius: 0; background: none; color: var(--ink); }
.svc-option__role { margin: 0; color: var(--rust, #b8360f); }
.svc-option h3 { margin: 0; font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: .92; }
.svc-option p:last-child { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; max-width: 30rem; }
@media (min-width: 900px) {
  .svc-option, .svc-option--sand, .svc-option--orange, .svc-option--ink { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 2rem; align-items: start; }
  .svc-option__role { grid-row: 1 / span 2; padding-top: .9rem; }
  .svc-option h3, .svc-option p:last-child { grid-column: 2; }
  .svc-option h3 { margin-bottom: 1rem; }
}
@media (max-width: 720px) { .svc-option h3 { font-size: clamp(2.6rem, 11vw, 3.6rem); } .svc-option p:last-child { font-size: 1.2rem; } }

/* Calmer tiles: lighter tint, name only (no number or arrow), names start on the same line, last tile black. */
.svc-index__img img { filter: grayscale(1) blur(2px) contrast(1.05); }
.svc-index__img::after { background: linear-gradient(to top, rgba(13,13,12,.68), rgba(13,13,12,.08) 68%), rgba(255,105,65,.14); }
.svc-pool__all .svc-index__n, .svc-pool__all .svc-index__go { display: none; }
.svc-index__cap { display: block; padding: .9rem 1rem; }
.svc-pool__all .svc-index__t { display: block; min-height: 2.3em; }
.svc-pool__all .svc-index li:last-child a { background: var(--ink); }
.svc-pool__all .svc-index li:last-child .svc-index__t { color: var(--cream); }
.svc-index__img--how { background: var(--ink); }

/* Ways to work with us on desktop: three columns side by side, still no cards. */
@media (min-width: 900px) {
  .svc-options, .svc-options.shell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
  .svc-option, .svc-option--sand, .svc-option--orange, .svc-option--ink { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, 2vw, 2rem) 0 0; }
  .svc-option__role { grid-row: auto; padding-top: 0; }
  .svc-option h3, .svc-option p:last-child { grid-column: auto; }
  .svc-option h3 { margin-bottom: 0; font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
}

/* Tiles are still: no zoom or focus change on hover. They only warm toward orange, very slightly. */
.svc-index__img img, .svc-pool__all .svc-index a:hover img, .svc-pool__all .svc-index a:focus-visible img { transition: none; transform: scale(1.06); filter: grayscale(1) blur(2px) contrast(1.05); }
.svc-index__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--orange); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.svc-pool__all .svc-index a:hover .svc-index__img::before, .svc-pool__all .svc-index a:focus-visible .svc-index__img::before { opacity: .14; }
.svc-pool__all .svc-index a:hover .svc-index__t, .svc-pool__all .svc-index a:focus-visible .svc-index__t { text-decoration: none; }
.svc-pool__all .svc-index a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .svc-index__img::before { transition: none; } }

/* Black and white tiles. Hover washes them toward white (name turns dark), nothing moves. */
.svc-index__img::after { background: linear-gradient(to top, rgba(13,13,12,.7), rgba(13,13,12,.12) 70%); }
.svc-index__img::before { background: #fff; }
.svc-pool__all .svc-index a:hover .svc-index__img::before, .svc-pool__all .svc-index a:focus-visible .svc-index__img::before { opacity: .38; }
.svc-pool__all .svc-index__t { transition: color .35s ease; }
.svc-pool__all .svc-index a:hover .svc-index__t, .svc-pool__all .svc-index a:focus-visible .svc-index__t { color: var(--ink); }
.svc-pool__all .svc-index li:last-child a:hover .svc-index__t, .svc-pool__all .svc-index li:last-child a:focus-visible .svc-index__t { color: var(--cream); }
.svc-pool__all .svc-index li:last-child a:hover { background: #3a3a37; }
.svc-index__img--how::before { display: none; }
@media (prefers-reduced-motion: reduce) { .svc-pool__all .svc-index__t { transition: none; } }

/* Tile names never change color on hover. */
.svc-pool__all .svc-index a:hover .svc-index__t, .svc-pool__all .svc-index a:focus-visible .svc-index__t,
.svc-pool__all .svc-index li:last-child a:hover .svc-index__t, .svc-pool__all .svc-index li:last-child a:focus-visible .svc-index__t { color: var(--cream); }
.svc-pool__all .svc-index__t { transition: none; }
.svc-pool__all .svc-index a:hover .svc-index__img::before, .svc-pool__all .svc-index a:focus-visible .svc-index__img::before { opacity: .22; }
/* Card labels read "number, service name" */
.svc-step__label { flex-wrap: wrap; gap: .3rem .9rem; }

/* Same hero breathing room as Philosophy */
.services-page:not(.philosophy-page) .svc-hero.shell { padding-block: clamp(5rem, 11vw, 10rem) clamp(2rem, 5vw, 4rem); }

/* Smooth stacking: growing cards are clipped, not resized. Width/margin/radius changes forced layout on every scroll frame; clip-path only repaints. Images are pre-greyed files, so no live filter on moving photos. */
.svc-step[data-rise] {
  margin-inline: 0;
  border-radius: 0;
  clip-path: inset(0 calc((1 - var(--rise, 1)) * 5vw) 0 round calc((1 - var(--rise, 1)) * 1.8rem) calc((1 - var(--rise, 1)) * 1.8rem) 0 0);
}
.svc-step__image img, .svc-hero__image img { filter: none; }
.svc-step { isolation: isolate; }
@media (prefers-reduced-motion: reduce) { .svc-step[data-rise] { clip-path: none; } }
.svc-jumping .svc-step a, .svc-jumping .svc-model a { pointer-events: none; }