/* Services v11: copy fills both columns, with original mobile reading order. */
body[data-page="services"]{
  --services-jump-height:76px;
  /* Shared html scroll-padding already includes the header and 20px. */
  --services-scroll-offset:calc(var(--services-jump-height) + 4px);
}
.services-main{overflow:clip;color:#000}
.services-banner{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(530px,46vw,720px);padding:100px 0 56px;
  background:#252b29;color:#fff;overflow:hidden;opacity:var(--services-banner-opacity,1);transition:opacity 120ms linear;
}
.services-banner-media{position:absolute;inset:0;z-index:-2;pointer-events:none}
.services-banner-media img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.services-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 15%,rgba(16,22,17,0.08471) 35%,rgba(16,22,17,0.63176) 100%),linear-gradient(90deg,rgba(17,24,19,0.40235),transparent 70%);
}
.services-banner-copy{display:block}
.services-banner h1{font:500 12px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:#fff;margin:0 0 20px}
.services-banner .services-display{font:400 clamp(29px,8.8vw,116px)/1.02 var(--display);letter-spacing:-.05em;color:#fff;max-width:none;margin:0;text-wrap:initial}
.services-display-line{display:block;white-space:nowrap}
.services-banner .services-standfirst{font:400 var(--ag-copy-size,17px)/1.7 var(--sans);color:#fff;max-width:65ch;margin:22px 0 0;text-wrap:pretty}
/* Prepare only banner text. Its image and surrounding surface stay immediate. */
.services-motion-preparing body[data-page="services"] .services-banner-copy h1,
.services-motion-preparing body[data-page="services"] .services-banner-copy .services-display,
.services-motion-preparing body[data-page="services"] .services-banner-copy .services-standfirst,
body[data-page="services"] .services-banner-copy [data-service-target="waiting"]{opacity:0;pointer-events:none}

.services-jump{position:sticky;top:calc(var(--ag-header-height) + env(safe-area-inset-top,0px));z-index:30;background:rgb(233 233 230 / .96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.services-jump-inner{height:var(--services-jump-height);display:flex;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid var(--line)}
.services-jump a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border:0;border-radius:var(--ag-pill-radius,12px);font:400 14px/1.4 var(--sans);color:#000;text-align:center;transition:background-color 180ms ease,color 180ms ease;touch-action:manipulation}
.services-jump a:hover{background:#0000000b}
.services-jump a[aria-current="location"]{background:#000;color:#fff}
.services-jump a:focus-visible{outline:2px solid #000;outline-offset:3px}

html body[data-page="services"] main>section.service-section{
  position:relative;padding-block:24px;margin-block:0;scroll-margin-top:var(--services-scroll-offset);
}
.service-section+.service-section{border-top:1px solid var(--line)}
/* Sections only gate unreached content. The media, titles and copy each own
   their entrance; never transform or animate opacity on the whole category. */
.services-motion-preparing body[data-page="services"] .service-section,
body[data-page="services"] .service-section[data-service-reveal="waiting"],
body[data-page="services"] .service-section [data-service-target="waiting"]{opacity:0;pointer-events:none}
body[data-page="services"] .service-media[data-service-target="running"]{will-change:opacity}
.service-summary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:16px;align-items:start}
.service-column{min-width:0}
.service-column-copy{grid-column:1;grid-row:1}
.service-column-media{grid-column:2;grid-row:1}
.service-summary-grid--split{grid-template-rows:auto minmax(0,1fr)}
.service-summary-grid--split>.service-column-media{grid-row:1 / span 2}
.service-intro{min-width:0}
.service-heading{font:500 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#000;margin:0 0 12px;max-width:45ch}
.service-display{font:400 clamp(42px,4.1vw,66px)/1.04 var(--display);letter-spacing:-.047em;color:#000;margin:0;text-wrap:balance}
.service-standfirst{font:400 clamp(17px,1.4vw,21px)/1.55 var(--sans);letter-spacing:-.01em;color:#000;max-width:49ch;margin:16px 0 0;text-wrap:pretty}
.service-media{position:relative;aspect-ratio:1.65;overflow:hidden;border-radius:var(--radius,24px);background:#d9dbd6;box-shadow:var(--ag-panel-shadow);margin:0}
.service-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
#brand-mascots .service-media img{object-position:center 32%}
#interactive-avatars .service-media img{object-position:center 26%}
#video-content .service-media img{object-position:center 48%}
.service-body-wrap{margin-top:18px;scroll-margin-top:var(--services-scroll-offset)}
.service-summary-grid>.service-copy-closing{grid-column:1;grid-row:2;margin-top:0}
.service-summary-grid--uses>.service-copy-continuation{grid-column:1 / -1;grid-row:2;margin-top:0}
.service-body{font:400 var(--ag-copy-size,17px)/1.7 var(--sans);color:#000;margin:0;max-width:none}
.service-body p{color:#000;max-width:none;font:inherit;letter-spacing:0;margin:0 0 16px;break-inside:avoid}
.service-body p:last-child{margin-bottom:0}
.service-uses{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);columns:2;column-gap:28px}
.service-uses li{color:#000;margin:0;padding:11px 0;border-bottom:1px solid var(--line);font:inherit;scroll-margin-top:var(--services-scroll-offset);break-inside:avoid-column}
.service-uses b{font-weight:500}
.service-uses span{color:#000}
.service-stats{margin-top:18px}
.service-stats-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.service-stats-list li{position:relative;margin:0;padding:0;scroll-margin-top:var(--services-scroll-offset)}
.service-stats-list li+li{border-top:1px solid var(--line)}
.service-stats-list a{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:48px;padding:10px 0;font:400 15px/1.55 var(--sans);color:#000;touch-action:manipulation}
.service-stats-tag{font:500 10px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#000}
.service-stats-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-wrap:pretty;min-width:0}
.service-stats-list a svg{width:16px;height:16px;transition:transform 180ms ease}
.service-stats-list a:hover svg{transform:translateX(3px)}
.service-stats-list a:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:2px}
.service-stats+.service-faqs{margin-top:12px}
.service-uses li{position:relative}
.service-faqs{margin-top:24px;scroll-margin-top:var(--services-scroll-offset)}
.service-faq-summary{
  display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;
  padding:18px 24px;min-height:62px;border:0;border-radius:var(--ag-pill-radius,12px);
  font:500 17px/1.5 var(--sans);background:#000;color:#fff;outline:none;
  touch-action:manipulation;transition:background-color 180ms ease;
}
.service-faq-summary::-webkit-details-marker{display:none}
.service-faq-summary::marker{content:""}
.service-faq-summary:hover{background:rgb(0 0 0 / .84)}
.service-faq-summary:focus-visible{outline:2px solid #000;outline-offset:5px}
.service-faq-count{font:400 13px/1.5 var(--sans);color:#fff;margin-left:auto;white-space:nowrap}
.service-faq-icon{position:relative;display:block;width:16px;height:16px;flex:none}
.service-faq-icon::before,.service-faq-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1px;background:currentColor}
.service-faq-icon::after{transform:rotate(90deg);transition:transform 180ms ease}
.service-faqs[open]>.service-faq-summary .service-faq-icon::after{transform:rotate(0)}
.service-faq-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:8px 24px 0}
.service-faq-item{padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:var(--services-scroll-offset);min-width:0}
.service-faq-question{font:500 17px/1.5 var(--sans);letter-spacing:0;margin:0 0 10px;color:#000}
.service-faq-answer{font:400 16px/1.7 var(--sans);letter-spacing:0;color:#000;max-width:none;margin:0}
.service-anchor,.service-faq-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:var(--services-scroll-offset)}
.services-main .ag-hello-cta{position:relative}
html body[data-page="services"] .ag-shared-cta.ag-hello-cta{margin-top:24px}

@media(max-width:1050px){
  .service-summary-grid{grid-template-columns:1fr;grid-template-rows:none;gap:18px}
  .service-column{display:contents}
  .service-intro{order:0}
  .service-media{order:1}
  .service-copy-leading{order:2}
  .service-copy-continuation{order:3}
  .service-copy-closing{order:4}
  .service-summary-grid>.service-copy-closing,.service-summary-grid--uses>.service-copy-continuation{grid-column:auto;grid-row:auto}
  .service-body-wrap{margin-top:0}
  .service-body{font-size:16px}
  .service-uses{columns:1}
  .service-display{font-size:clamp(43px,7.4vw,58px);max-width:23ch}
  .service-standfirst{max-width:49ch;font-size:18px}
}
@media(max-width:760px){
  .services-banner{min-height:610px;padding:92px 0 38px}
  .services-banner-media img{object-position:60% center}
  .services-banner .services-standfirst{max-width:48ch;font-size:16px;line-height:1.7;margin-top:18px}
  .service-faq-list{column-gap:24px;padding-inline:14px}
}
@media(max-width:600px){
  body[data-page="services"]{--services-jump-height:78px}
  .services-banner{min-height:605px;padding:78px 0 34px}
  .services-banner::after{background:linear-gradient(180deg,transparent 0%,rgba(16,22,17,0.07059) 25%,rgba(16,22,17,0.57529) 63%,rgba(16,22,17,0.79059) 100%),linear-gradient(90deg,rgba(16,22,17,0.16941),transparent 80%)}
  .services-banner-media img{object-position:62% center}
  .services-banner h1{margin-bottom:20px}
  .services-jump-inner{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:5px}
  .services-jump a{font-size:12px;line-height:1.3;min-height:48px;padding:10px 9px}
  .service-heading{font-size:11px;letter-spacing:.08em;max-width:35ch}
  .service-display{font-size:clamp(38px,10.4vw,53px);max-width:none}
  .service-standfirst{font-size:17px;line-height:1.6}
  .service-media{border-radius:22px;aspect-ratio:1.45}
  .service-stats{margin-top:16px}
  .service-stats-list a{grid-template-columns:38px minmax(0,1fr) 16px;gap:10px;font-size:14px}
  .service-faqs{margin-top:22px}
  .service-faq-summary{padding:16px 19px;gap:13px;min-height:60px;font-size:16px}
  .service-faq-count{font-size:12px}
  .service-faq-list{grid-template-columns:1fr;padding:3px 2px 0}
  .service-faq-item{padding-block:20px}
  .service-faq-question{font-size:16px}
  .service-faq-answer{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .services-motion-preparing body[data-page="services"] .services-banner-copy :is(h1,.services-display,.services-standfirst),
  body[data-page="services"] .services-banner-copy [data-service-target],
  body[data-page="services"] .services-banner-copy .ag-word,
  .services-motion-preparing body[data-page="services"] .service-section,
  body[data-page="services"] .service-section[data-service-reveal],
  body[data-page="services"] .service-section [data-service-target],
  body[data-page="services"] .service-section .ag-word{opacity:1!important;translate:none!important;transform:none!important;filter:none!important;pointer-events:auto;will-change:auto}
  .services-banner,.services-jump a,.service-faq-summary,.service-faq-icon::after,.service-stats-list a svg{transition:none}
}
@media print{
  .services-motion-preparing body[data-page="services"] .services-banner-copy :is(h1,.services-display,.services-standfirst),
  body[data-page="services"] .services-banner-copy [data-service-target],
  body[data-page="services"] .services-banner-copy .ag-word,
  .services-motion-preparing body[data-page="services"] .service-section,
  body[data-page="services"] .service-section[data-service-reveal],
  body[data-page="services"] .service-section [data-service-target],
  body[data-page="services"] .service-section .ag-word{opacity:1!important;translate:none!important;transform:none!important;filter:none!important;pointer-events:auto;will-change:auto}
  .services-main{overflow:visible}
  .services-banner{min-height:0;padding:24px 0;background:none;color:#000;opacity:1}
  .services-banner-media,.services-banner::after,.services-jump{display:none}
  .services-banner-copy{display:block}
  .services-banner h1,.services-banner .services-display,.services-banner .services-standfirst{color:#000}
  .services-banner .services-display{font-size:40px;margin-bottom:20px}
  .service-summary-grid{display:block}
  .service-media{display:none}
  .service-display{font-size:32px}
  .service-column{display:contents}
  .service-faq-list{display:block}
  .service-faq-summary{background:none;color:#000;padding:0}
  .service-faq-count,.service-faq-icon{display:none}
  .service-faqs::details-content{content-visibility:visible;display:block;height:auto}
  .service-faqs>.service-faq-list{display:block!important}
  .service-body p,.service-uses li,.service-faq-item{break-inside:avoid}
  .service-section{break-inside:auto}
  .service-heading,.service-display,.service-standfirst{break-after:avoid}
}

/* Supplied Services covers retain the full artwork and wordmarks on every screen. */
body[data-page="services"] .service-media[data-service-cover="20261012"]{aspect-ratio:16/9}

/* V76: let desktop artwork absorb unused column space. */
@media(min-width:1051px){
  body[data-page="services"] .service-column-media{align-self:stretch;display:flex;flex-direction:column}
  body[data-page="services"] .service-media[data-service-cover="20261012"]{flex:none;aspect-ratio:16/9;min-height:0}
  body[data-page="services"] .service-column-media>.service-body-wrap{flex:none}
}
#interactive-avatars .service-stats-list{border-top:0}

/* V182: preserve artwork size; align desktop media with the display headline below its 18px label and 12px gap. */
@media(min-width:1051px){html body[data-page=services] .service-summary-grid>.service-column-media{padding-top:30px}}