body{overflow-x:clip}
.services-section{position:relative;display:grid;grid-template-columns:67.285714% 32.714286%;align-items:start;margin-top:var(--section-gap);padding:0;font-family:Inter,Arial,sans-serif;color:#030303;letter-spacing:0}
.services-pinned{--service-image-height:min(500px,calc(100svh - 140px));--service-image-width:calc(var(--service-image-height)*.768);position:sticky;top:120px;height:calc(100svh - 240px);min-height:330px}
.services-pinned h2{max-width:727px;margin:0;font-size:45px;font-weight:900;line-height:1.08;letter-spacing:-.9px}
.intro-motion #services-title:not(.is-revealed) .intro-line>span{transform:translateY(115%)}
.intro-motion #services-title.is-revealed .intro-line>span{animation:intro-line-reveal 660ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(100ms + var(--intro-line)*75ms)}
.service-category{position:absolute;left:74.30998%;top:calc(50svh - 96px);transform:translate(-50%,-50%);font-size:45px;font-weight:900;line-height:1.08;letter-spacing:-.9px;white-space:pre;opacity:0;transition:opacity 180ms ease;pointer-events:none}
.service-category.is-active{opacity:1}
.service-category{display:block;width:5.9em}
.category-words{position:relative;display:block;width:5.9em;height:1.28em;overflow:hidden}
.category-word{position:absolute;inset:0;display:block;text-align:center}
.category-colon{display:block;position:absolute;left:calc(50% + var(--service-image-width)/2 + 20px);top:0}
.service-hover-media{position:absolute;left:74.30998%;top:calc(50svh - 96px);transform:translate(-50%,-50%);width:var(--service-image-width);height:var(--service-image-height);z-index:2;overflow:hidden;opacity:0;visibility:hidden;transition:opacity 160ms ease;pointer-events:none}
.service-hover-media.is-open{opacity:1;visibility:visible}
.service-hover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;visibility:inherit}
.service-hover-media img.is-current{display:block}
.services-pinned.has-preview .service-category{opacity:1;transition:none}


.service-details{font-size:16px;font-weight:600;line-height:1.3}
.service-introduction{height:310px;max-width:434px}
.service-introduction p{margin:0 0 10px;line-height:21px}
.service-introduction p:nth-child(2){max-width:396px}
.service-group{margin:0 0 80px;scroll-margin-top:calc(48svh)}
.service-group:last-child{margin-bottom:0}
.service-group h3{margin:0 0 10px;font-size:16px;line-height:19px;font-weight:900}
.service-group p{max-width:434px;min-height:63px;margin:0;line-height:21px}
.service-group ul{list-style:none;margin:10px 0;padding:0 0 0 83px;font-size:16px;line-height:19px}
.service-view{display:inline-block;padding:0 0 2px;border:0;background-color:transparent;font:inherit;line-height:19px;color:inherit;cursor:pointer}
@media(prefers-reduced-motion:reduce){.service-category{transition:none}.service-category.is-changing>span,.intro-motion #services-title.is-revealed .intro-line>span{animation:none}.intro-motion #services-title .intro-line>span{transform:none}}
@media(prefers-reduced-motion:reduce){.service-hover-media,.service-hover-media.is-open{transition:none}}

/* Revised copy follows the text widths of the updated Figma frames. */
.service-introduction p:nth-child(2){max-width:399px}
#service-branding p:first-of-type{max-width:417px}
#service-branding p:nth-of-type(2){max-width:458px}
#service-packaging p:first-of-type{max-width:438px}
#service-packaging p:nth-of-type(2){max-width:396px}
#service-digital p:first-of-type{max-width:458px}
#service-digital p:nth-of-type(2){max-width:437px}
#service-advertising p:first-of-type{max-width:458px}
#service-advertising p:nth-of-type(2){max-width:435px}

/* Branding: retain the supplied 930 × 1212 image proportions. */
.service-hover-media img[src$="service-branding-v4.webp"]{width:auto;height:100%;max-width:100%;left:50%;right:auto;transform:translateX(-50%);object-fit:contain;aspect-ratio:auto}

/* Isolate heading line layers below service previews. */
.services-pinned h2{position:relative;z-index:0}
.service-category{z-index:1}
.service-hover-media{z-index:10}