:root { --service-line: rgba(10,10,10,.22); }
.services-page { background: var(--paper); }
.services-page .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.services-hero { min-height: 100svh; padding: 7.6rem 2.25rem 2rem; display: flex; flex-direction: column; }
.services-kicker { display: flex; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid rgba(241,240,235,.28); font: .67rem/1.4 var(--mono); letter-spacing: .06em; }
.services-hero h1 { margin: auto 0 4rem; font-size: clamp(4.8rem,13vw,14rem); line-height: .74; letter-spacing: -.095em; font-weight: 900; }
.services-hero h1 span { display: block; overflow: hidden; animation: service-title .85s cubic-bezier(.2,.75,.15,1) both; }
.services-hero h1 span:nth-child(1) { animation-delay: .7s; }
.services-hero h1 span:nth-child(2) { animation-delay: .82s; }
.services-hero h1 span:nth-child(3) { color: var(--acid); animation-delay: .94s; }
@keyframes service-title { from { transform: translateY(105%); } }
.services-hero-bottom { display: grid; grid-template-columns: 5fr 3fr; gap: 2rem; align-items: end; padding-top: 1.3rem; border-top: 1px solid rgba(241,240,235,.28); }
.services-hero-bottom p { max-width: 48rem; margin: 0; font-size: clamp(1.1rem,1.8vw,1.75rem); line-height: 1.3; letter-spacing: -.03em; }
.services-hero-bottom > div { display: flex; justify-content: flex-end; gap: 1.5rem; }
.services-hero-bottom a { border-bottom: 1px solid; padding-bottom: .3rem; font: .68rem var(--mono); text-transform: uppercase; }
.service-nav-wrap { position: sticky; z-index: 60; top: 5.25rem; display: grid; grid-template-columns: 1fr; background: var(--paper); border-bottom: 1px solid var(--ink); }
.service-nav { display: grid; grid-template-columns: repeat(10,1fr); }
.service-nav a { min-height: 5.3rem; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding: .7rem; border-right: 1px solid var(--service-line); font-size: .7rem; line-height: 1.12; transition: background .3s ease,color .3s ease; }
.service-nav a span { font: .58rem var(--mono); }
.service-nav a.active { background: var(--ink); color: var(--acid); }
.service-nav-trigger { display: none; }
.service-detail { padding: 7rem 2.25rem 6rem; border-bottom: 1px solid var(--ink); opacity: .2; transform: translateY(2rem); transition: opacity .55s ease,transform .55s ease; scroll-margin-top: 10.6rem; }
.service-detail.is-visible { opacity: 1; transform: translateY(0); }
.service-index { display: flex; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid; font: .65rem var(--mono); }
.service-detail header { display: grid; grid-template-columns: 9fr 3fr; gap: 2rem; align-items: end; }
.service-detail h2 { max-width: 82rem; margin: 3rem 0 4rem; font-size: clamp(3.9rem,8.7vw,10rem); line-height: .82; letter-spacing: -.085em; }
.service-detail header p { margin: 0 0 4.5rem; font: .65rem/1.5 var(--mono); text-align: right; }
.service-media { position: relative; width: 100%; min-height: min(55vw,43rem); overflow: hidden; margin: 0 0 4rem; border: 0; background: var(--ink); }
.service-media-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#ecommerce .service-media-image img { object-position: center; }
#product-photography .service-media-image img { object-position: center; }
.service-story { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid; border-bottom: 1px solid; }
.service-story article { min-height: 18rem; padding: 1.5rem 1.5rem 2rem 0; border-right: 1px solid var(--service-line); }
.service-story article+article { padding-left: 1.5rem; }
.service-story article:last-child { border-right: 0; }
.service-story span,.service-implementation > div span,.service-connections > span { display:block; margin-bottom: 3rem; font:.62rem var(--mono); }
.service-story p { max-width: 28rem; margin: 0; font-size: 1.15rem; line-height: 1.4; }
.service-implementation { display: grid; grid-template-columns: 3fr 9fr; border-bottom: 1px solid; }
.service-implementation > div { display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem 1.5rem 1.5rem 0; border-right:1px solid var(--service-line); }
.service-implementation > div strong { font-size:clamp(1.7rem,3vw,3.5rem); line-height:.9; letter-spacing:-.06em; }
.service-implementation ul { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0; list-style:none; }
.service-implementation li { min-height:4.4rem; display:flex; align-items:center; padding:.75rem 1rem; border-right:1px solid var(--service-line); border-bottom:1px solid var(--service-line); font-size:.88rem; }
.service-connections { display:grid; grid-template-columns:3fr 6fr 3fr; align-items:start; min-height:10rem; padding-top:1.5rem; }
.service-connections nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.service-connections nav a,.service-package-link { border-bottom:1px solid; padding-bottom:.25rem; font:.65rem var(--mono); text-transform:uppercase; }
.service-package-link { justify-self:end; }
.services-cta { min-height:88svh; padding:6rem 2.25rem 2rem; display:flex; flex-direction:column; }
.services-cta h2 { margin:auto 0 4rem; font-size:clamp(4rem,10vw,11rem); line-height:.78; letter-spacing:-.09em; }
.services-cta h2 em { color:var(--acid); }
.services-cta > div:last-child { display:grid; grid-template-columns:5fr 3fr; gap:2rem; align-items:end; border-top:1px solid rgba(241,240,235,.3); padding-top:1.5rem; }
.services-cta p { max-width:42rem; margin:0; font-size:1.25rem; line-height:1.4; }
.services-cta nav { display:grid; grid-template-columns:1fr 1fr; }
.services-cta nav a { min-height:5rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--paper); font:.68rem var(--mono); text-transform:uppercase; }
.services-cta nav a:first-child { background:var(--acid); color:var(--ink); border-color:var(--acid); }
.context-cursor { position:fixed; z-index:120; top:-2.5rem; left:-2.5rem; width:5rem; height:5rem; display:grid; place-items:center; background:var(--acid); color:var(--ink); border-radius:50%; pointer-events:none; opacity:0; transition:opacity .2s ease; font:.58rem var(--mono); }
.context-cursor.visible { opacity:1; }

@media (max-width: 900px) {
  .services-hero { padding:6.8rem 1rem 1.2rem; }
  .services-kicker span:last-child { display:none; }
  .services-hero h1 { margin:18vh 0 auto; font-size:clamp(4.1rem,20vw,7.5rem); }
  .services-hero-bottom { grid-template-columns:1fr; }
  .services-hero-bottom > div { justify-content:flex-start; }
  .service-nav-wrap { top:4.25rem; }
  .service-nav-trigger { min-height:4.2rem; display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border:0; background:var(--paper); text-align:left; }
  .service-nav-trigger span { font:.58rem var(--mono); }
  .service-nav-trigger strong { max-width:58%; font-size:.85rem; }
  .service-nav { display:none; grid-template-columns:1fr 1fr; max-height:70svh; overflow:auto; border-top:1px solid; }
  .service-nav.open { display:grid; }
  .service-nav a { min-height:4.4rem; border-bottom:1px solid var(--service-line); }
  .service-detail { padding:5rem 1rem 4rem; scroll-margin-top:8.5rem; }
  .service-detail header { grid-template-columns:1fr; }
  .service-detail h2 { margin:2.5rem 0 1rem; font-size:clamp(3.4rem,15vw,6rem); }
  .service-detail header p { margin:0 0 3rem; text-align:left; }
  .service-media { min-height:74vw; }
  .service-story { grid-template-columns:1fr; }
  .service-story article,.service-story article+article { min-height:auto; padding:1.5rem 0 2.2rem; border-right:0; border-bottom:1px solid var(--service-line); }
  .service-story article:last-child { border-bottom:0; }
  .service-story span { margin-bottom:1.5rem; }
  .service-implementation { grid-template-columns:1fr; }
  .service-implementation > div { min-height:9rem; border-right:0; border-bottom:1px solid; }
  .service-implementation ul { grid-template-columns:1fr 1fr; }
  .service-implementation li { min-height:3.8rem; }
  .service-connections { grid-template-columns:1fr; gap:1.5rem; }
  .service-connections > span { margin-bottom:0; }
  .service-package-link { justify-self:start; min-height:2.75rem; display:flex; align-items:center; }
  .services-cta { padding:5rem 1rem 1.2rem; }
  .services-cta h2 { font-size:clamp(3.9rem,17vw,7rem); }
  .services-cta > div:last-child { grid-template-columns:1fr; }
  .services-cta nav { grid-template-columns:1fr; }
  .context-cursor { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .services-hero h1 span,.service-detail { animation:none; transform:none; transition:none; }
}