.services-page { background: var(--paper); }

.services-hero {
  position: relative;
  min-height: calc(100svh - 5.4rem);
  overflow: hidden;
  color: var(--white);
  background: var(--ink-deep);
}

.services-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,17,20,.98) 0%, rgba(7,17,20,.84) 50%, rgba(7,17,20,.18) 100%);
}

.services-hero-media { position: absolute; inset: 0 0 0 48%; margin: 0; }
.services-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.08); }
.services-hero-media::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.14) 25%); }

.services-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .45fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
  min-height: calc(100svh - 5.4rem);
  padding-block: clamp(5rem, 10vw, 9rem) 3.2rem;
}

.services-hero-copy { max-width: 57rem; }
.services-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 8.4vw, 9.5rem); font-weight: 500; line-height: .84; letter-spacing: -.065em; }
.services-hero h1 em { display: block; color: var(--signal); font-weight: 500; }
.services-hero-lead { display: grid; grid-template-columns: 7rem minmax(0, 38rem); gap: 1.5rem; margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line-light); }
.services-hero-lead span { color: var(--signal); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; }
.services-hero-lead p { margin: 0; color: rgba(255,255,255,.76); font-size: clamp(1rem, 1.4vw, 1.28rem); }
.services-hero-evidence { display: grid; grid-template-columns: 7rem minmax(0, 38rem) auto; gap: 1.5rem; align-items: center; margin-top: 1.4rem; padding: 1rem 0; border-block: 1px solid var(--line-light); color: var(--white); text-decoration: none; }
.services-hero-evidence span { color: var(--signal); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.services-hero-evidence strong { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.45rem); font-weight: 500; }
.services-hero-evidence i { color: var(--signal); font-style: normal; font-size: 1.4rem; transition: transform 180ms ease; }
.services-hero-evidence:hover i, .services-hero-evidence:focus-visible i { transform: translate(.2rem, -.2rem); }

.service-chain { margin: 0; padding: 0; counter-reset: chain; list-style: none; border-top: 1px solid var(--line-light); }
.service-chain li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: center; min-height: 3.6rem; border-bottom: 1px solid var(--line-light); font-size: .84rem; }
.service-chain li::before { counter-increment: chain; content: "0" counter(chain); color: var(--signal); font-family: var(--mono); font-size: .63rem; }

.services-index { padding-block: clamp(5rem, 8vw, 9rem); }
.services-index-head { display: grid; grid-template-columns: .58fr 1.42fr; gap: clamp(2rem, 6vw, 7rem); align-items: end; margin-bottom: 3.5rem; }
.services-index-head h2 { max-width: 52rem; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 6.8vw, 7.5rem); font-weight: 500; line-height: .88; letter-spacing: -.055em; }
.services-index-head p { max-width: 32rem; margin: 0 0 .6rem; color: rgba(11,37,45,.66); }

.service-filter-shell { position: sticky; z-index: 20; top: 0; margin-bottom: 2.3rem; padding-block: .8rem; background: rgba(238,232,220,.93); border-block: 1px solid var(--line); backdrop-filter: blur(14px); }
.service-filter { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: thin; }
.service-filter button { flex: 0 0 auto; min-height: 2.8rem; padding: .62rem .9rem; border: 1px solid var(--line); color: var(--ink); background: transparent; font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.service-filter button:hover,
.service-filter button:focus-visible,
.service-filter button.is-active { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.service-filter-result { margin-left: auto; align-self: center; flex: 0 0 auto; padding-left: 1rem; color: rgba(11,37,45,.58); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }

.service-system-list { border-top: 1px solid var(--ink); }
.service-system { display: grid; grid-template-columns: 6.5rem minmax(18rem, .78fr) minmax(28rem, 1.22fr); gap: clamp(1.5rem, 3.5vw, 4rem); padding-block: clamp(2.3rem, 4.5vw, 4.7rem); border-bottom: 1px solid var(--line); }
.service-system[hidden] { display: none; }
.service-system-number { display: flex; flex-direction: column; align-items: flex-start; }
.service-system-number span { color: var(--signal-deep); font-family: var(--serif); font-size: clamp(3.8rem, 6vw, 6.8rem); line-height: .75; letter-spacing: -.06em; }
.service-system-number small { margin-top: 1rem; color: rgba(11,37,45,.52); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; }
.service-system-intro { align-self: start; }
.service-system-intro .service-card-meta { margin: 0 0 1.2rem; }
.service-system-intro h3 { max-width: 35rem; margin: 0; font-family: var(--serif); font-size: clamp(2.25rem, 3.5vw, 4.2rem); font-weight: 500; line-height: .92; letter-spacing: -.045em; }
.service-system-intro h3 a { color: inherit; text-decoration: none; }
.service-system-intro > p:not(.service-card-meta) { max-width: 34rem; margin: 1.2rem 0 0; color: rgba(11,37,45,.68); }
.service-system-detail { display: inline-flex; gap: .75rem; align-items: center; margin-top: 1.7rem; color: var(--signal-deep); font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.service-system-detail span { font-size: 1.2rem; transition: transform 180ms ease; }
.service-system-detail:hover span, .service-system-detail:focus-visible span { transform: translate(.18rem, -.18rem); }
.service-branch-list { align-self: start; margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; }
.service-branch-list li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-branch-list a { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr) auto 1.25rem; gap: 1rem; align-items: center; min-height: 7rem; padding: 1rem 1.2rem; color: inherit; background: rgba(255,255,255,.2); text-decoration: none; transition: background 180ms ease; }
.service-branch-list a:hover, .service-branch-list a:focus-visible { background: rgba(217,114,82,.14); }
.service-branch-index { align-self: start; padding-top: .15rem; color: var(--signal-deep); font-family: var(--mono); font-size: .61rem; }
.service-branch-copy { min-width: 0; }
.service-branch-copy strong { display: block; font-size: .98rem; font-weight: 600; line-height: 1.25; }
.service-branch-copy small { display: block; margin-top: .8rem; color: rgba(11,37,45,.48); font-family: var(--mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.service-branch-copy b { display: block; margin-top: .22rem; color: rgba(11,37,45,.72); font-family: var(--serif); font-size: 1.12rem; font-weight: 500; line-height: 1.2; }
.service-branch-project { padding: .34rem .45rem; border: 1px solid var(--line); color: rgba(11,37,45,.62); font-family: var(--mono); font-size: .56rem; white-space: nowrap; }
.service-branch-project.is-verification { border-style: dashed; color: #9a572e; }
.service-branch-arrow { color: var(--signal-deep); font-size: 1.25rem; transition: transform 180ms ease; }
.service-branch-list a:hover .service-branch-arrow, .service-branch-list a:focus-visible .service-branch-arrow { transform: translate(.18rem, -.18rem); }

.service-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-index-card { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-index-card > a { display: grid; grid-template-rows: 15.5rem 1fr; min-height: 44rem; color: inherit; text-decoration: none; background: rgba(255,255,255,.17); transition: background 220ms ease; }
.service-index-card > a:hover,
.service-index-card > a:focus-visible { background: rgba(217,114,82,.13); }
.service-card-visual { position: relative; overflow: hidden; margin: 0; border-bottom: 1px solid var(--line); background: var(--ink); }
.service-card-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.58) contrast(1.04); transition: transform 650ms cubic-bezier(.2,.8,.2,1), filter 300ms ease; }
.service-index-card > a:hover img,
.service-index-card > a:focus-visible img { transform: scale(1.035); filter: saturate(.88); }
.service-card-number { position: absolute; right: 1rem; bottom: -.2rem; color: var(--signal); font-family: var(--serif); font-size: 7.5rem; font-weight: 400; line-height: .8; }
.service-card-body { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.6rem); }
.service-card-meta { display: flex; justify-content: space-between; gap: 1rem; color: rgba(11,37,45,.62); font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.service-card-body h3 { max-width: 34rem; margin: 1.8rem 0 1rem; font-family: var(--serif); font-size: clamp(2.25rem, 3.7vw, 4.25rem); font-weight: 500; line-height: .92; letter-spacing: -.045em; }
.service-card-body > p { max-width: 38rem; margin: 0; color: rgba(11,37,45,.7); font-size: 1rem; }
.service-card-foot { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end; margin-top: auto; padding-top: 2rem; }
.service-output-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.service-output-list li { padding: .35rem .52rem; border: 1px solid var(--line); font-family: var(--mono); font-size: .58rem; text-transform: uppercase; }
.service-card-arrow { color: var(--signal-deep); font-size: 2rem; transition: transform 220ms ease; }
.service-index-card > a:hover .service-card-arrow,
.service-index-card > a:focus-visible .service-card-arrow { transform: translate(.25rem, -.25rem); }
.service-projects { margin-top: 1.2rem; color: rgba(11,37,45,.55); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }

.services-method { padding-block: clamp(5rem, 9vw, 10rem); color: var(--white); background: var(--ink); }
.services-method-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(3rem, 8vw, 9rem); }
.services-method h2 { max-width: 62rem; margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 8rem); font-weight: 500; line-height: .88; letter-spacing: -.055em; }
.services-method h2 em { color: var(--signal); font-weight: 500; }
.method-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 5rem; border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.method-step { min-height: 13rem; padding: 1.2rem; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.method-step span { color: var(--signal); font-family: var(--mono); font-size: .62rem; }
.method-step strong { display: block; margin-top: 4.6rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; }

.services-contact { padding-block: clamp(5rem, 8vw, 8rem); background: var(--signal); }
.services-contact-grid { display: grid; grid-template-columns: 1.5fr auto; gap: 3rem; align-items: end; }
.services-contact h2 { max-width: 60rem; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 6vw, 7rem); font-weight: 500; line-height: .9; letter-spacing: -.055em; }
.services-contact .button { background: var(--paper); }

@media (max-width: 980px) {
  .services-hero-media { left: 36%; }
  .services-hero-grid { grid-template-columns: 1fr; align-content: end; }
  .service-chain { display: none; }
  .services-index-head, .services-method-grid { grid-template-columns: 1fr; }
  .service-index-grid { grid-template-columns: 1fr; }
  .service-system { grid-template-columns: 5rem minmax(0, 1fr); }
  .service-branch-list { grid-column: 2; }
  .method-steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .services-hero { min-height: 44rem; }
  .services-hero-media { inset: 0; opacity: .46; }
  .services-hero::after { background: linear-gradient(180deg, rgba(7,17,20,.36), rgba(7,17,20,.98) 70%); }
  .services-hero-grid { min-height: 44rem; padding-bottom: 2.2rem; }
  .services-hero h1 { font-size: clamp(3.6rem, 17vw, 5.5rem); }
  .services-hero-lead { grid-template-columns: 1fr; gap: .7rem; margin-top: 1.8rem; }
  .services-hero-evidence { grid-template-columns: 1fr auto; gap: .45rem 1rem; }
  .services-hero-evidence span { grid-column: 1 / -1; }
  .services-index-head { margin-bottom: 2.5rem; }
  .service-filter { padding-bottom: .25rem; }
  .service-filter-result { display: none; }
  .service-system { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-system-number { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .service-system-number small { margin-top: 0; }
  .service-branch-list { grid-column: 1; }
  .service-branch-list a { grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .75rem; min-height: 0; padding: 1rem .85rem; }
  .service-branch-project { grid-column: 2; justify-self: start; }
  .service-branch-arrow { grid-column: 3; grid-row: 1 / 3; }
  .service-index-card > a { grid-template-rows: 12rem 1fr; min-height: 38rem; }
  .service-card-number { font-size: 5.8rem; }
  .service-card-foot { grid-template-columns: 1fr; }
  .service-card-arrow { display: none; }
  .method-steps { grid-template-columns: 1fr; }
  .method-step { min-height: auto; }
  .method-step strong { margin-top: 2rem; }
  .services-contact-grid { grid-template-columns: 1fr; align-items: start; }
}