/* Four inline objects become an editorial index. The artwork keeps one DOM
   identity during its flight; the row's content remains at its final size. */
.services{--service-media:clamp(112px,11.6vw,148px);--service-gutter:clamp(24px,4vw,64px);position:relative;z-index:3;isolation:isolate;margin-top:-24svh;padding-bottom:48px;color:var(--blue)}
.services__backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.services__sculptures{position:sticky;top:0;height:100svh;transition:filter 1.2s ease}
.services[data-expanded="true"] .services__sculptures{filter:blur(8px)}
.services__intro{position:relative;padding:clamp(112px,16svh,168px) 7vw 46px}
.services__heading-wrap{position:relative;width:100%}
.services__heading{margin:0;font:400 clamp(74px,11.7vw,180px)/.94 "Bookish",Georgia,serif;letter-spacing:-.035em;font-synthesis:none}
.services__heading span{display:block;padding:.06em 0}
.services__heading .services__our{width:max-content}
.services__word{margin-left:10vw}
.services__inline{position:absolute;left:31%;top:4%;display:flex;align-items:center;gap:clamp(14px,1.5vw,24px)}
.services__inline i{display:block;width:clamp(54px,6vw,86px);aspect-ratio:1}
.services__heading-arrow{position:absolute;right:0;bottom:.07em;width:clamp(40px,6vw,90px);height:auto;transform:rotate(90deg);transition:transform 1.5s cubic-bezier(.65,0,.35,1)}
.services[data-expanded="true"] .services__heading-arrow{transform:rotate(135deg)}
.services__index{position:relative;scroll-margin-top:100px}
.services__row{position:relative;display:grid;grid-template-columns:24px var(--service-media) minmax(0,1.2fr) minmax(220px,.9fr) 28px;align-items:center;gap:clamp(22px,3vw,48px);min-height:calc(var(--service-media) + 40px);padding:20px var(--service-gutter);color:var(--blue);text-decoration:none;isolation:isolate;border-top:1px solid rgba(0,47,167,.25);transition:color .4s ease;scroll-margin-top:100px}
.services__row:last-child{border-bottom:1px solid rgba(0,47,167,.25)}
.services__row::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(0,15,62,.08),rgba(0,18,66,.24)),var(--blue) var(--blue-suede) 50% 50%/var(--suede) var(--suede);opacity:0;transform:scaleY(.7);transform-origin:50% 100%;transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.services__number{align-self:start;padding-top:4px;font:400 12px/1.4 "Haas Display",sans-serif;opacity:.6}
.services__slot{position:relative;width:var(--service-media);aspect-ratio:1}
.services__object{position:absolute;inset:0;margin:0;z-index:2;transform-origin:center;will-change:transform}
.services__surface{position:absolute;inset:0;overflow:hidden;border-radius:20% 20% 20% 4%;background:var(--cream);box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 8px 22px #12214b16}
.services__surface img,.services__surface video{width:100%;height:100%;display:block;object-fit:cover}
.services__surface--brand img{object-fit:cover}
.services__surface--ai{background:radial-gradient(circle at 50% 40%,#eff1fb,#b7c3e5)}
.services__surface--ai img{object-fit:contain;transform:scale(1.15)}
.services__surface--web img{object-fit:cover;object-position:50%}
.services__surface figcaption{position:absolute;inset:auto 0 0;padding:20px 10px 12px;background:linear-gradient(transparent,#001344bb);color:var(--cream);font:500 22px/1.15 "Haas Display",sans-serif;opacity:0;pointer-events:none}
.services__title h3{font:400 clamp(38px,4.3vw,66px)/1 "Bookish",Georgia,serif;letter-spacing:-.035em;margin:0;font-synthesis:none}
.services__title p{font:400 12px/1.4 "Haas Display",sans-serif;margin:17px 0 0;opacity:.8}
.services__detail p{font:400 clamp(16px,1.35vw,20px)/1.45 "Haas Display",sans-serif;max-width:35ch;margin:0}
.services__detail>span{display:block;margin-top:12px;font:500 11px/1.3 "Haas Display",sans-serif;letter-spacing:.06em}
.services__row-arrow{width:28px;height:28px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.services__row:focus-visible{outline:2px solid var(--blue);outline-offset:-6px}
.services__row:focus-visible,.services[data-expanded="true"] .services__row:focus-within{color:var(--cream)}
.services__row:focus-visible::before,.services[data-expanded="true"] .services__row:focus-within::before{opacity:1;transform:scaleY(1)}
@media(hover:hover){
  .services:not([data-motion="ready"]) .services__row:hover,.services .services__row[data-ready="true"]:hover{color:var(--cream)}
  .services:not([data-motion="ready"]) .services__row:hover::before,.services .services__row[data-ready="true"]:hover::before{opacity:1;transform:scaleY(1)}
  .services__row:hover .services__row-arrow{transform:translate(3px,-3px)}
}
.services[data-motion="ready"] .services__row{border-color:transparent}
.services[data-motion="ready"] .services__row::after{content:"";position:absolute;top:0;left:var(--service-gutter);right:var(--service-gutter);height:1px;background:currentColor;opacity:calc(var(--index-progress,0) * .25);pointer-events:none}
.services[data-motion="ready"] .services__title,.services[data-motion="ready"] .services__detail,.services[data-motion="ready"] .services__number,.services[data-motion="ready"] .services__row-arrow{opacity:var(--row-reveal,0);transform:translateY(calc((1 - var(--row-reveal,0)) * 14px))}
.services[data-motion="ready"][data-expanded="false"] .services__surface{animation:service-float 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.services[data-motion="ready"] figcaption{opacity:calc(1 - var(--object-progress,0))}
@keyframes service-float{0%,100%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(5px) rotate(2deg)}}
@media(max-width:1050px) and (min-width:768px){
  .services{--service-media:116px;--service-gutter:30px}
  .services__row{gap:24px;grid-template-columns:18px var(--service-media) minmax(0,1fr) minmax(190px,.9fr) 22px}
  .services__title h3{font-size:40px}
  .services__title p{font-size:11px}
}
@media(max-width:767px){
  .services{--service-media:92px;--service-gutter:20px;margin-top:-12svh;padding-bottom:40px}
  .services__intro{padding:112px 20px 66px}
  .services__heading{font-size:clamp(53px,13.6vw,104px);line-height:1.04}
  .services__word{margin-left:0!important}
  .services__inline{left:34%;top:5%;gap:7px}
  .services__inline i{width:clamp(36px,10.2vw,68px)}
  .services__heading-arrow{right:4px;bottom:-60px;width:30px}
  .services__row{grid-template-columns:var(--service-media) minmax(0,1fr) 20px;column-gap:16px;row-gap:12px;padding:18px var(--service-gutter);min-height:206px}
  .services__surface figcaption{font-size:18px;line-height:1.12;padding:12px 5px 8px}
  .services__number{display:none}
  .services__slot{grid-column:1;grid-row:1}
  .services__title{grid-column:2;grid-row:1}
  .services__title h3{font-size:clamp(25px,7.5vw,44px);line-height:1.05}
  .services__title p{font-size:10px;margin-top:10px}
  .services__detail{grid-column:1/-1;grid-row:2;display:flex;align-items:end;gap:16px;justify-content:space-between}
  .services__detail p{font-size:14px;line-height:1.4;max-width:34ch}
  .services__detail>span{max-width:10ch;flex:none;font-size:9px;line-height:1.5;margin:0}
  .services__row-arrow{grid-column:3;grid-row:1;width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .services__intro{height:auto;min-height:0;padding-bottom:46px}
  .services__inline{display:none}
  .services__sculptures,.services__heading-arrow,.services__row,.services__row::before,.services__row-arrow{transition:none}
  .services__object{will-change:auto}
}