/* The art surface is a named width container. Each preview gets a complete, fixed-height frame. */
.wk-service-art { --wk-art-height:280px; container: wk-service-art / inline-size; position:relative; width:100%; max-width:100%; min-width:0; height:auto; isolation:isolate; color:var(--ink); font-family:var(--text); pointer-events:none; }
.wk-service-art *, .wk-service-art *::before, .wk-service-art *::after {box-sizing:border-box}
.wk-service-art img {display:block;max-width:100%}
/* Equal landscape frames fill edge to edge above the glass metadata block. */
.wk-service-art:has(>video[data-wk-preview]){aspect-ratio:16/9;background:var(--graphite);overflow:hidden;pointer-events:auto}
.wk-service-art>video[data-wk-preview]{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.wk-service-art[role="button"]:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.wk-service-art .wk-art-icon {display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px}
.wk-service-art .wk-art-icon svg {width:100%;height:100%}
.wk-service-art .wk-art-pointer {display:block;width:14px;height:19px;background:currentColor;clip-path:polygon(0 0,100% 67%,54% 70%,75% 100%,54% 100%,37% 75%,0 95%)}

  .wk-service-art .brand-art,
  .wk-service-art .social-art {
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    background: var(--graphite);
    color: var(--paper);
    font-family: var(--text);
  }
  .wk-service-art .brand-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
  }
  .wk-service-art .brand-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(12px, 2.7cqw, 20px);
    transform: none;
    opacity: 1;
  }
  .wk-service-art .brand-small {
    display: block;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-weight: 500;
  }
  .wk-service-art .brand-poster {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper);
    color: var(--ink);
  }
  .wk-service-art .brand-poster-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(28px, 6.5cqw, 48px);
    letter-spacing: -.07em;
    line-height: .93;
  }
  .wk-service-art .brand-period,
  .wk-service-art .social-period { color: var(--red); }
  .wk-service-art .brand-poster-foot,
  .wk-service-art .brand-note-foot { font-size: 11px; line-height: 1.2; font-weight: 500; }
  .wk-service-art .brand-wordmark {
    grid-column: 6 / span 7;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--ink);
    color: var(--paper);
  }
  .wk-service-art .brand-wordmark-text {
    display: block;
    width: 100%;
    font-family: var(--display);
    font-size: clamp(28px, 7cqw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.07em;
    clip-path: inset(0);
  }
  .wk-service-art .brand-wordmark-rule { display: block; height: 3px; width: 32px; background: var(--red); }
  .wk-service-art .brand-book {
    grid-column: 6 / span 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper);
    color: var(--ink);
  }
  .wk-service-art .brand-book-title {
    font-family: var(--display);
    font-size: clamp(20px, 3.8cqw, 29px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 700;
  }
  .wk-service-art .brand-book-line { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; background: var(--red); }
  .wk-service-art .brand-note {
    grid-column: 10 / span 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--red);
    color: var(--ink);
  }
  .wk-service-art .brand-note-title {
    font-family: var(--display);
    font-size: clamp(22px, 4cqw, 31px);
    letter-spacing: -.06em;
    line-height: .95;
    font-weight: 800;
  }
  .wk-service-art .social-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
  }
  .wk-service-art .social-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(12px, 2.5cqw, 18px);
    box-sizing: border-box;
    background: var(--paper);
    color: var(--ink);
    transform: none;
    opacity: 1;
  }
  .wk-service-art .social-micro { font-size: 11px; line-height: 1.1; letter-spacing: -.015em; font-weight: 500; }
  .wk-service-art .social-bottom { display: block; margin-top: 5px; }
  .wk-service-art .social-lead-copy {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(21px, 4.1cqw, 31px);
    line-height: .98;
    letter-spacing: -.065em;
    transform-origin: left center;
  }
  .wk-service-art .social-type { background: var(--ink); color: var(--paper); }
  .wk-service-art .social-type-lines {
    display: flex;
    flex-direction: column;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(19px, 3.5cqw, 26px);
    letter-spacing: -.055em;
    line-height: .94;
  }
  .wk-service-art .social-wordmark-text { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
  .wk-service-art .social-red { background: var(--red); color: var(--ink); }
  .wk-service-art .social-red-copy {
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.065em;
    line-height: .97;
  }
  .wk-service-art .social-red .social-bottom { display: none; }
  .wk-service-art .social-red .social-period { color: var(--ink); }
  .wk-service-art .social-process-copy {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(17px, 2.85cqw, 22px);
    letter-spacing: -.045em;
    line-height: 1.07;
  }
  .wk-service-art .social-process-lines { display: flex; gap: 4px; }
  .wk-service-art .social-process-lines span { height: 3px; width: 16px; background: var(--red); }
  .wk-service-art .social-process-lines span:nth-child(2) { width: 25px; background: var(--ink); }
  .wk-service-art .social-process-lines span:nth-child(3) { width: 9px; background: var(--ink); }
  .wk-service-art .social-manifesto { background: var(--ink); color: var(--paper); }
  .wk-service-art .social-manifesto-copy {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(21px, 3.75cqw, 26px);
    line-height: .9;
    letter-spacing: -.055em;
  }
  .wk-service-art .social-manifesto .social-bottom { display: none; }
  .wk-service-art .social-signoff-copy {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(19px, 3.25cqw, 25px);
    letter-spacing: -.065em;
    line-height: 1.05;
  }
  .wk-service-art.is-playing .brand-panel { animation: wk-service-impact-study-brand-arrange 4.5s cubic-bezier(.22,1,.36,1) both; }
  .wk-service-art.is-playing .brand-poster { --brand-enter-x: 20%; --brand-enter-y: 10%; --brand-enter-angle: -5deg; }
  .wk-service-art.is-playing .brand-wordmark { --brand-enter-x: -32%; --brand-enter-y: 28%; --brand-enter-angle: 4deg; animation-delay: .08s; }
  .wk-service-art.is-playing .brand-book { --brand-enter-x: 10%; --brand-enter-y: 36%; --brand-enter-angle: -4deg; animation-delay: .16s; }
  .wk-service-art.is-playing .brand-note { --brand-enter-x: -12%; --brand-enter-y: -20%; --brand-enter-angle: 6deg; animation-delay: .24s; }
  .wk-service-art.is-playing .brand-wordmark-text { animation: wk-service-impact-study-brand-mark 4.5s cubic-bezier(.22,1,.36,1) both; }
  .wk-service-art.is-playing .social-tile { animation: wk-service-impact-study-social-grid 4.5s cubic-bezier(.22,1,.36,1) both; }
  .wk-service-art.is-playing .social-tile:nth-child(2) { animation-delay: .09s; }
  .wk-service-art.is-playing .social-tile:nth-child(3) { animation-delay: .18s; }
  .wk-service-art.is-playing .social-tile:nth-child(4) { animation-delay: .27s; }
  .wk-service-art.is-playing .social-tile:nth-child(5) { animation-delay: .36s; }
  .wk-service-art.is-playing .social-tile:nth-child(6) { animation-delay: .45s; }
  .wk-service-art.is-playing .social-lead-copy { animation: wk-service-impact-study-social-lead 4.5s cubic-bezier(.22,1,.36,1) both; }
  @keyframes wk-service-impact-study-brand-arrange {
    0%, 5% { transform: translate(var(--brand-enter-x), var(--brand-enter-y)) rotate(var(--brand-enter-angle)) scale(.92); }
    34%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  }
  @keyframes wk-service-impact-study-brand-mark {
    0%, 18% { clip-path: inset(0 100% 0 0); }
    46%, 100% { clip-path: inset(0); }
  }
  @keyframes wk-service-impact-study-social-grid {
    0%, 5% { transform: translateY(24px); }
    38%, 100% { transform: translateY(0); }
  }
  @keyframes wk-service-impact-study-social-lead {
    0%, 12% { transform: scale(.9); }
    32% { transform: scale(1.08); }
    52%, 100% { transform: scale(1); }
  }
  @container (max-width: 420px) {
    .wk-service-art .brand-mosaic,
    .wk-service-art .social-mosaic { padding: 12px; gap: 6px; }
    .wk-service-art .brand-mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
    .wk-service-art .brand-poster { grid-column: 1; grid-row: 1; }
    .wk-service-art .brand-wordmark { grid-column: 2; grid-row: 1; }
    .wk-service-art .brand-book { grid-column: 1; grid-row: 2; }
    .wk-service-art .brand-note { display: flex; grid-column: 2; grid-row: 2; }
    .wk-service-art .brand-poster-title { font-size: clamp(23px, 8.5cqw, 29px); }
    .wk-service-art .brand-book-title,
    .wk-service-art .brand-note-title { font-size: clamp(23px, 7cqw, 29px); }
    .wk-service-art .brand-wordmark-text { font-size: 28px; }
    .wk-service-art .brand-wordmark .brand-small { max-width: 12ch; }
    .wk-service-art .social-mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
    .wk-service-art .social-tile { padding: 10px 11px; }
    .wk-service-art .social-micro { display: none; }
    .wk-service-art .social-bottom { display: none; }
    .wk-service-art .social-lead-copy { font-size: 21px; }
    .wk-service-art .social-red-copy { font-size: 15px; }
    .wk-service-art .social-type-lines { font-size: 18px; }
    .wk-service-art .social-wordmark-text { font-size: 9px; }
    .wk-service-art .social-process-copy { font-size: 17px; }
    .wk-service-art .social-manifesto-copy { font-size: 16px; line-height: .88; }
    .wk-service-art .social-signoff-copy { font-size: 16px; }
    .wk-service-art .social-signoff .social-bottom { display: block; margin-top: 2px; font-size: 8px; line-height: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wk-service-art.is-playing .brand-panel,
    .wk-service-art.is-playing .brand-wordmark-text,
    .wk-service-art.is-playing .social-tile,
    .wk-service-art.is-playing .social-lead-copy { animation: none; transform: none; clip-path: inset(0); }
  }


.wk-service-art .iw-commercial { position:relative; height:280px; overflow:hidden; isolation:isolate; background:var(--paper); color:var(--ink); font-family:var(--text),sans-serif; }
.wk-service-art .iw-commercial *, .wk-service-art .iw-commercial *::before, .wk-service-art .iw-commercial *::after { box-sizing:border-box; }
.wk-service-art .iw-screen { position:absolute; inset:17px 25px; overflow:hidden; background:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 15%,transparent); border-radius:8px; box-shadow:0 9px 24px color-mix(in srgb,var(--ink) 8%,transparent); }
.wk-service-art .iw-browserbar { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; height:27px; padding:0 13px; background:var(--paper); border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent); font-size:11px; line-height:1.3; }
.wk-service-art .iw-browserdots { display:flex; gap:4px; }
.wk-service-art .iw-browserdots span { width:4px; height:4px; border-radius:50%; background:color-mix(in srgb,var(--ink) 35%,transparent); }
.wk-service-art .iw-webstage { height:calc(100% - 27px); overflow:hidden; position:relative; }
.wk-service-art .iw-web-stream { transform:translateY(-45px); }
.wk-service-art .iw-site-nav { height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:11px; line-height:1.3; }
.wk-service-art .iw-site-logo { font-family:var(--display),sans-serif; font-size:18px; font-weight:600; letter-spacing:-.055em; }
.wk-service-art .iw-site-links { display:flex; gap:16px; }
.wk-service-art .iw-site-hero {position:relative;height:255px;overflow:hidden;background:var(--ink)}
.wk-service-art .iw-site-photo {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.wk-service-art .iw-site-hero::after {position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(18,17,20,.52),transparent 75%)}
.wk-service-art .iw-site-copy {position:absolute;z-index:1;top:29px;left:26px;color:var(--paper)}
.wk-service-art .iw-site-copy>span {font-size:10px;line-height:1.3}
.wk-service-art .iw-site-copy strong {display:block;margin-top:7px;font-family:var(--display);font-size:clamp(30px,6cqw,42px);line-height:.95;letter-spacing:-.045em}
.wk-service-art .iw-webfocus {position:absolute;right:10px;bottom:9px;width:196px;height:73px;border-radius:7px;border:2px solid var(--paper);box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 25%,transparent);opacity:1}
.wk-service-art .iw-webreadout { position:absolute; right:13px; bottom:12px; display:flex; align-items:center; gap:11px; width:190px; padding:13px 15px; border-radius:5px; background:var(--paper); color:var(--ink); box-shadow:0 4px 18px color-mix(in srgb,var(--ink) 15%,transparent); }
.wk-service-art .iw-webreadout span { font-size:11px; line-height:1.3; opacity:.65; }
.wk-service-art .iw-webreadout strong { display:block; font-size:15px; line-height:1.4; font-weight:500; }
.wk-service-art .iw-webreadout i { margin-left:auto; width:15px; height:15px; }
.wk-service-art .iw-web-pointer { position:absolute; right:28px; bottom:21px; width:15px; height:15px; color:var(--paper); filter:drop-shadow(0 1px 1px var(--ink)); opacity:0; }
.wk-service-art.is-playing .iw-web-stream { animation:wk-service-iw-web-scroll-20261013 4.7s cubic-bezier(.22,.7,.2,1) 1 both; }
.wk-service-art.is-playing .iw-webfocus { animation:wk-service-iw-web-focus-20261013 4.7s ease 1 both; }
.wk-service-art.is-playing .iw-webreadout { animation:wk-service-iw-web-readout-20261013 4.7s cubic-bezier(.2,.7,.2,1) 1 both; }
.wk-service-art.is-playing .iw-web-pointer { animation:wk-service-iw-web-pointer-20261013 4.7s ease 1 both; }
@keyframes wk-service-iw-web-scroll-20261013 { 0%,12% {transform:translateY(0)} 47%,100% {transform:translateY(-45px)} }
@keyframes wk-service-iw-web-focus-20261013 { 0%,53% {opacity:0;box-shadow:0 0 0 0 transparent} 66%,100% {opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 25%,transparent)} }
@keyframes wk-service-iw-web-readout-20261013 { 0%,66% {opacity:0;transform:translateY(12px)} 87%,100% {opacity:1;transform:translateY(0)} }
@keyframes wk-service-iw-web-pointer-20261013 { 0%,43% {opacity:0;transform:translate(25px,28px)} 54%,67% {opacity:1;transform:translate(0,-10px)} 83%,100% {opacity:0;transform:translate(0,-10px)} }
.wk-service-art .iw-shopstage { position:relative; display:grid; grid-template-columns:44% 56%; height:calc(100% - 27px); overflow:hidden; }
.wk-service-art .iw-product { display:flex; align-items:center; justify-content:center; background:var(--paper); padding:9px 20px; }
.wk-service-art .iw-product img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.wk-service-art .iw-shopintro { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:20px 24px 20px 10px; opacity:0; }
.wk-service-art .iw-shopintro small { font-size:11px; letter-spacing:.05em; line-height:1.4; }
.wk-service-art .iw-shopintro h3 { font-family:var(--display),sans-serif; font-size:35px; font-weight:500; letter-spacing:-.055em; margin:7px 0 4px; line-height:1.05; }
.wk-service-art .iw-shopintro p { font-size:12px; line-height:1.5; margin:0 0 13px; max-width:24ch; }
.wk-service-art .iw-sample { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--ink); border-radius:3px; padding:6px 10px; font-size:11px; line-height:1.3; }
.wk-service-art .iw-sample-dot { width:5px; height:5px; border-radius:50%; background:var(--red); }
.wk-service-art .iw-shopadd { margin-top:12px; padding:9px 16px; border:0; background:var(--ink); color:var(--paper); font-size:12px; line-height:1.2; border-radius:3px; }
.wk-service-art .iw-basket { position:absolute; inset:0 0 0 auto; display:flex; flex-direction:column; width:48%; padding:20px 18px 14px; background:var(--ink); color:var(--paper); transform:translateX(0); }
.wk-service-art .iw-baskethead { display:flex; align-items:center; justify-content:space-between; font-size:14px; line-height:1.3; }
.wk-service-art .iw-baskethead span { font-size:11px; color:var(--paper); opacity:.7; }
.wk-service-art .iw-basketitem { display:flex; gap:11px; align-items:center; margin:20px 0 auto; }
.wk-service-art .iw-basketitem img { width:50px; height:60px; object-fit:contain; border-radius:3px; background:var(--paper); }
.wk-service-art .iw-basketitem strong { display:block; font-size:14px; line-height:1.5; font-weight:500; }
.wk-service-art .iw-basketitem small { font-size:11px; line-height:1.4; opacity:.65; }
.wk-service-art .iw-basketconfirm { display:flex; align-items:center; gap:6px; font-size:11px; line-height:1.4; margin:9px 0; }
.wk-service-art .iw-basketconfirm i { width:13px; height:13px; }
.wk-service-art .iw-basketcontinue { background:var(--paper); color:var(--ink); border:0; border-radius:3px; padding:9px; font-size:12px; line-height:1.2; width:100%; }
.wk-service-art.is-playing .iw-shopintro { animation:wk-service-iw-shop-intro-20261013 4.7s ease 1 both; }
.wk-service-art.is-playing .iw-sample { animation:wk-service-iw-shop-sample-20261013 4.7s ease 1 both; }
.wk-service-art.is-playing .iw-shopadd { animation:wk-service-iw-shop-add-20261013 4.7s ease 1 both; }
.wk-service-art.is-playing .iw-basket { animation:wk-service-iw-shop-basket-20261013 4.7s cubic-bezier(.25,.75,.2,1) 1 both; }
.wk-service-art.is-playing .iw-basketconfirm { animation:wk-service-iw-shop-confirm-20261013 4.7s ease 1 both; }
@keyframes wk-service-iw-shop-intro-20261013 { 0%,55% {opacity:1} 65%,100% {opacity:0} }
@keyframes wk-service-iw-shop-sample-20261013 { 0%,22% {background:transparent} 32%,100% {background:color-mix(in srgb,var(--red) 12%,var(--paper))} }
@keyframes wk-service-iw-shop-add-20261013 { 0%,43% {background:var(--ink);transform:scale(1)} 48% {background:var(--red);transform:scale(.97)} 54%,100% {background:var(--ink);transform:scale(1)} }
@keyframes wk-service-iw-shop-basket-20261013 { 0%,53% {transform:translateX(105%)} 83%,100% {transform:translateX(0)} }
@keyframes wk-service-iw-shop-confirm-20261013 { 0%,80% {opacity:0;transform:translateY(5px)} 95%,100% {opacity:1;transform:translateY(0)} }
.wk-service-art .iw-adscene { position:absolute; inset:15px 25px 58px; background:var(--ink); color:var(--paper); overflow:hidden; }
.wk-service-art .iw-adbrand { position:absolute; left:20px; top:15px; font-size:11px; font-weight:500; line-height:1.3; letter-spacing:.04em; }
.wk-service-art .iw-adlabel { position:absolute; right:18px; top:15px; font-size:11px; line-height:1.3; opacity:.7; }
.wk-service-art .iw-adtype { position:absolute; inset:47px 22px 25px; display:flex; flex-direction:column; justify-content:center; font-family:var(--display),sans-serif; font-size:clamp(42px,7cqw,68px); font-weight:500; letter-spacing:-.065em; line-height:.96; }
.wk-service-art .iw-adtype span { display:block; width:max-content; max-width:100%; position:relative; z-index:2; }
.wk-service-art .iw-adtype .iw-ad-land { color:var(--red); }
.wk-service-art .iw-adshape { position:absolute; width:165px; height:165px; border-radius:50%; right:35px; top:43px; background:var(--red); transform:translateX(0) scale(.85); opacity:.22; }
.wk-service-art .iw-ad-foot { position:absolute; right:20px; bottom:16px; font-size:11px; line-height:1.4; max-width:18ch; text-align:right; }
.wk-service-art .iw-ad-foot strong { display:block; margin-bottom:6px; font-weight:500; }
.wk-service-art .iw-ad-foot span { border-bottom:1px solid var(--paper); padding-bottom:2px; }
.wk-service-art .iw-storyboard { position:absolute; left:25px; right:25px; bottom:17px; height:29px; display:grid; grid-template-columns:repeat(4,1fr); background:color-mix(in srgb,var(--ink) 6%,var(--paper)); border-radius:3px; overflow:hidden; font-size:11px; line-height:1.3; }
.wk-service-art .iw-storyboard span { position:relative; padding:8px 12px; z-index:2; }
.wk-service-art .iw-storyboard span + span { border-left:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
.wk-service-art .iw-storyprogress { position:absolute; inset:0; background:color-mix(in srgb,var(--red) 16%,var(--paper)); transform-origin:left; transform:scaleX(1); }
.wk-service-art .iw-storyhead { position:absolute; width:2px; top:0; bottom:0; right:0; background:var(--red); }
.wk-service-art.is-playing .iw-ad-ideas { animation:wk-service-iw-ad-ideas-20261013 4.7s cubic-bezier(.2,.7,.2,1) 1 both; }
.wk-service-art.is-playing .iw-ad-land { animation:wk-service-iw-ad-land-20261013 4.7s cubic-bezier(.2,.7,.2,1) 1 both; }
.wk-service-art.is-playing .iw-adshape { animation:wk-service-iw-ad-shape-20261013 4.7s cubic-bezier(.2,.7,.2,1) 1 both; }
.wk-service-art.is-playing .iw-ad-foot { animation:wk-service-iw-ad-action-20261013 4.7s ease 1 both; }
.wk-service-art.is-playing .iw-storyprogress { animation:wk-service-iw-ad-progress-20261013 4.7s linear 1 both; }
@keyframes wk-service-iw-ad-ideas-20261013 { 0% {opacity:0;transform:translateY(32px)} 23%,100% {opacity:1;transform:translateY(0)} }
@keyframes wk-service-iw-ad-land-20261013 { 0%,20% {opacity:0;transform:translateX(-35px)} 50%,100% {opacity:1;transform:translateX(0)} }
@keyframes wk-service-iw-ad-shape-20261013 { 0%,18% {opacity:0;transform:translateX(110px) scale(.5)} 49% {opacity:.22;transform:translateX(0) scale(1)} 72%,100% {opacity:.22;transform:translateX(0) scale(.85)} }
@keyframes wk-service-iw-ad-action-20261013 { 0%,62% {opacity:0;transform:translateY(9px)} 88%,100% {opacity:1;transform:translateY(0)} }
@keyframes wk-service-iw-ad-progress-20261013 { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@container wk-service-art (max-width:480px) {
 .wk-service-art .iw-commercial {height:230px}
 .wk-service-art .iw-screen {inset:12px 9px}
 .wk-service-art .iw-browserbar {padding:0 9px}
 .wk-service-art .iw-site-nav {padding:0 12px}
 .wk-service-art .iw-site-links {gap:9px}
 .wk-service-art .iw-site-hero {height:215px}
 .wk-service-art .iw-site-photo {object-position:50% 56%}
 .wk-service-art .iw-site-copy {top:23px;left:16px}
 .wk-service-art .iw-site-copy strong {font-size:30px}
 .wk-service-art .iw-webreadout {width:154px;padding:9px 12px;bottom:9px;right:9px}
 .wk-service-art .iw-webfocus {right:6px;bottom:6px;width:160px;height:64px}
 .wk-service-art .iw-web-pointer {right:22px;bottom:18px}
 .wk-service-art .iw-shopstage {grid-template-columns:43% 57%}
 .wk-service-art .iw-product {padding:12px 8px}
 .wk-service-art .iw-shopintro {padding:12px 10px 12px 3px}
 .wk-service-art .iw-shopintro h3 {font-size:27px}
 .wk-service-art .iw-shopintro p {font-size:11px;margin-bottom:8px}
 .wk-service-art .iw-sample {padding:5px 7px;gap:6px}
 .wk-service-art .iw-shopadd {padding:8px 10px;margin-top:9px}
 .wk-service-art .iw-basket {width:57%;padding:13px 10px 10px}
 .wk-service-art .iw-baskethead {font-size:12px}
 .wk-service-art .iw-basketitem {gap:7px;margin-top:15px}
 .wk-service-art .iw-basketitem img {width:32px;height:45px}
 .wk-service-art .iw-basketitem strong {font-size:12px}
 .wk-service-art .iw-basketconfirm {font-size:11px;gap:4px}
 .wk-service-art .iw-basketconfirm i {display:none}
 .wk-service-art .iw-adscene {inset:12px 9px 50px}
 .wk-service-art .iw-adbrand {left:13px;top:12px}
 .wk-service-art .iw-adlabel {right:12px;top:12px}
 .wk-service-art .iw-adtype {inset:43px 13px 40px;font-size:38px}
 .wk-service-art .iw-adshape {width:110px;height:110px;right:-15px;top:42px}
 .wk-service-art .iw-ad-foot {right:13px;bottom:12px;max-width:none;font-size:11px}
 .wk-service-art .iw-ad-foot strong {display:none}
 .wk-service-art .iw-storyboard {left:9px;right:9px;bottom:12px;height:27px}
 .wk-service-art .iw-storyboard span {padding:7px 8px}
}
@media(prefers-reduced-motion:reduce) { .wk-service-art .iw-commercial * {animation:none!important} }


.wk-service-art .op-study{height:280px;position:relative;overflow:hidden;font-family:var(--text,"Hanken Grotesk"),sans-serif;color:var(--ink,#121114);font-size:13px;line-height:1.35;isolation:isolate;box-sizing:border-box}
.wk-service-art .op-study *{box-sizing:border-box}
.wk-service-art .op-muted{color:var(--stone)}
.wk-service-art .op-demo{font-size:11px;line-height:1.3;letter-spacing:.02em}
.wk-service-art .op-seo{background:color-mix(in srgb,var(--ink) 3%,var(--paper));padding:18px 22px}
.wk-service-art .op-seo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.wk-service-art .op-seo-title{font-size:14px;font-weight:500}
.wk-service-art .op-url{display:block;margin-top:3px;font-size:13px;color:var(--stone)}
.wk-service-art .op-seo-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.wk-service-art .op-label{margin:0 0 9px;font-size:12px;font-weight:500}
.wk-service-art .op-bars{height:132px;display:flex;align-items:flex-end;gap:13px;position:relative;padding:25px 0 21px}
.wk-service-art .op-bar-cell{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.wk-service-art .op-bar{display:block;width:100%;height:var(--bar-height);background:color-mix(in srgb,var(--stone) 55%,var(--paper));border-radius:3px 3px 0 0;transform-origin:50% 100%}
.wk-service-art .op-bar-day{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-size:12px;color:var(--stone)}
.wk-service-art .op-bar-value{position:absolute;bottom:calc(var(--bar-height) + 3px);left:50%;transform:translateX(-50%);font-size:12px;font-variant-numeric:tabular-nums}
.wk-service-art .op-seo-tip{position:absolute;left:52%;top:0;z-index:2;padding:7px 10px;background:var(--ink,#121114);color:var(--paper,#F3F1EC);border-radius:4px;font-size:12px;white-space:nowrap;opacity:0}
.wk-service-art .op-seo-pointer{position:absolute;left:69%;top:42%;z-index:3;color:var(--ink,#121114);opacity:0;pointer-events:none}
.wk-service-art .op-seo-pointer svg{width:20px;height:20px;fill:var(--paper,#F3F1EC);stroke-width:1.7}
.wk-service-art .op-keywords{width:100%;border-collapse:collapse;font-size:13px}
.wk-service-art .op-keywords th{font-size:12px;font-weight:400;color:var(--stone);text-align:left;padding:0 0 9px}
.wk-service-art .op-keywords th:last-child,.wk-service-art .op-keywords td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.wk-service-art .op-keywords td{padding:12px 0;border-top:1px solid var(--mist)}
.wk-service-art .op-seo-footer{position:absolute;left:22px;bottom:16px;color:var(--stone)}
.wk-service-art.is-playing .op-seo .op-bar--focus{animation:wk-service-op-seo-focus 4.6s ease forwards}
.wk-service-art.is-playing .op-seo .op-seo-tip{animation:wk-service-op-seo-tip 4.6s ease forwards}
.wk-service-art.is-playing .op-seo .op-seo-pointer{animation:wk-service-op-seo-pointer 4.6s ease forwards}
@keyframes wk-service-op-seo-focus{0%,21%{background:color-mix(in srgb,var(--stone) 55%,var(--paper))}34%,100%{background:var(--red,#F9423A)}}
@keyframes wk-service-op-seo-tip{0%,26%{opacity:0;transform:translateY(4px)}36%,73%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes wk-service-op-seo-pointer{0%{opacity:0;transform:translate(-58px,37px)}15%{opacity:1;transform:translate(-58px,37px)}32%,66%{opacity:1;transform:translate(0,0)}82%,100%{opacity:0;transform:translate(11px,13px)}}
.wk-service-art .op-crm{background:var(--paper,#F3F1EC);padding:18px 22px}
.wk-service-art .op-crm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.wk-service-art .op-crm-title{font-size:14px;font-weight:500}
.wk-service-art .op-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;height:170px}
.wk-service-art .op-crm-col{min-width:0;background:var(--mist);border-radius:6px;padding:10px}
.wk-service-art .op-crm-col-head{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:13px;font-weight:500}
.wk-service-art .op-crm-count{font-size:12px;color:var(--stone)}
.wk-service-art .op-enquiry{position:absolute;left:0;top:39px;width:calc((100% - 24px)/3);min-height:117px;padding:12px;background:color-mix(in srgb,var(--paper) 70%,var(--white));border-radius:6px;box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 4%,transparent);z-index:2}
.wk-service-art .op-enquiry-title{margin:0 0 4px;font-size:13px;font-weight:500}
.wk-service-art .op-enquiry-contact{font-size:12px;color:var(--stone)}
.wk-service-art .op-enquiry-kind{display:inline-block;margin-top:10px;padding:3px 6px;background:var(--mist);color:var(--stone);border-radius:3px;font-size:11px}
.wk-service-art .op-enquiry-detail{margin-top:11px;padding-top:8px;border-top:1px solid var(--mist);opacity:0;font-size:12px;line-height:1.4}
.wk-service-art .op-enquiry-detail strong{font-weight:500;display:block;color:var(--ink,#121114)}
.wk-service-art .op-crm-footer{position:absolute;left:22px;bottom:16px;color:var(--stone)}
.wk-service-art.is-playing .op-crm .op-enquiry{animation:wk-service-op-crm-move 4.6s cubic-bezier(.22,.68,.24,1) forwards}
.wk-service-art.is-playing .op-crm .op-enquiry-detail{animation:wk-service-op-crm-detail 4.6s ease forwards}
@keyframes wk-service-op-crm-move{0%,20%{transform:translateX(0)}29%{transform:translate(3px,-5px);box-shadow:0 9px 18px color-mix(in srgb,var(--ink) 8%,transparent)}53%,100%{transform:translateX(calc(100% + 12px));box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 4%,transparent)}}
@keyframes wk-service-op-crm-detail{0%,53%{opacity:0;transform:translateY(4px)}69%,100%{opacity:1;transform:translateY(0)}}
.wk-service-art .op-hosting{background:var(--graphite,#2A282D);color:var(--paper,#F3F1EC);padding:21px 25px}
.wk-service-art .op-host-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px}
.wk-service-art .op-host-title{font-size:14px;font-weight:500}
.wk-service-art .op-host-head .op-demo{color:color-mix(in srgb,var(--paper) 75%,var(--graphite))}
.wk-service-art .op-checks{list-style:none;padding:0;margin:0}
.wk-service-art .op-check-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid color-mix(in srgb,var(--paper) 7%,transparent);font-size:14px}
.wk-service-art .op-check-label{display:flex;align-items:center;gap:10px}
.wk-service-art .op-status-dot{display:block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--mist)}
.wk-service-art .op-status-dot--pending{background:var(--stone)}
.wk-service-art .op-check-state{font-size:12px;color:color-mix(in srgb,var(--paper) 80%,var(--graphite))}
.wk-service-art .op-content-label,.wk-service-art .op-content-state{display:grid}
.wk-service-art .op-content-label>span,.wk-service-art .op-content-state>span{grid-area:1/1}
.wk-service-art .op-host-after{opacity:0}
.wk-service-art .op-host-foot{margin-top:17px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
.wk-service-art .op-host-result{display:grid;font-weight:500}
.wk-service-art .op-host-result>span{grid-area:1/1}
.wk-service-art .op-host-domain{color:color-mix(in srgb,var(--paper) 75%,var(--graphite))}
.wk-service-art.is-playing .op-hosting .op-host-before{animation:wk-service-op-host-before 4.6s ease forwards}
.wk-service-art.is-playing .op-hosting .op-host-after{animation:wk-service-op-host-after 4.6s ease forwards}
.wk-service-art.is-playing .op-hosting .op-status-dot--pending{animation:wk-service-op-host-dot 4.6s ease forwards}
@keyframes wk-service-op-host-before{0%,45%{opacity:1}58%,100%{opacity:0}}
@keyframes wk-service-op-host-after{0%,45%{opacity:0;transform:translateY(3px)}62%,100%{opacity:1;transform:translateY(0)}}
@keyframes wk-service-op-host-dot{0%,25%,40%{background:var(--stone);box-shadow:0 0 0 0 transparent}33%{background:var(--red,#F9423A);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 13%,transparent)}61%,100%{background:var(--mist);box-shadow:0 0 0 0 transparent}}
@container wk-service-art (max-width:480px){
.wk-service-art .op-study{height:230px}
.wk-service-art .op-seo{padding:12px 14px}
.wk-service-art .op-seo-head{margin-bottom:7px}
.wk-service-art .op-seo-title{display:none}
.wk-service-art .op-url{margin-top:0}
.wk-service-art .op-seo-head>.op-demo{display:none}
.wk-service-art .op-seo-grid{grid-template-columns:1fr;gap:7px}
.wk-service-art .op-seo .op-label{margin:0;font-size:12px}
.wk-service-art .op-bars{height:62px;padding:17px 0 18px;gap:14px}
.wk-service-art .op-bar-value{display:none}
.wk-service-art .op-bar-day{top:calc(100% + 2px)}
.wk-service-art .op-seo-tip{top:0;left:54%;padding:5px 8px}
.wk-service-art .op-keywords{font-size:12px}
.wk-service-art .op-keywords th{padding:0 0 3px;font-size:12px}
.wk-service-art .op-keywords td{padding:2px 0}
.wk-service-art .op-seo-footer{left:14px;bottom:8px}
.wk-service-art .op-crm{padding:13px 14px}
.wk-service-art .op-crm-head{margin-bottom:12px}
.wk-service-art .op-crm-head>.op-demo{display:none}
.wk-service-art .op-pipeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:149px}
.wk-service-art .op-crm-col{padding:9px 7px}
.wk-service-art .op-crm-col--ready{display:none}
.wk-service-art .op-enquiry{width:calc((100% - 12px)/2);top:36px;padding:10px 8px;min-height:105px}
.wk-service-art .op-enquiry-kind{display:none}
.wk-service-art .op-enquiry-detail{margin-top:10px;padding-top:7px}
.wk-service-art .op-crm-footer{left:14px;bottom:10px}
.wk-service-art .op-hosting{padding:14px 16px}
.wk-service-art .op-host-head{margin-bottom:13px;align-items:baseline}
.wk-service-art .op-check-row{padding:10px 0;font-size:13px}
.wk-service-art .op-host-foot{margin-top:10px;align-items:flex-start;flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){
.wk-service-art .op-study *{animation:none!important;transition:none!important}
.wk-service-art .op-seo .op-bar--focus{background:var(--red,#F9423A)}
.wk-service-art .op-crm .op-enquiry{transform:translateX(calc(100% + 12px))}
.wk-service-art .op-crm .op-enquiry-detail{opacity:1;transform:none}
.wk-service-art .op-hosting .op-host-before{opacity:0}
.wk-service-art .op-hosting .op-host-after{opacity:1;transform:none}
.wk-service-art .op-hosting .op-status-dot--pending{background:var(--mist);box-shadow:none}
}


  
  .wk-service-art .op-seo .op-bar--focus{background:var(--red)}
  .wk-service-art .op-crm .op-enquiry{transform:translateX(calc(100% + 12px))}
  .wk-service-art .op-crm .op-enquiry-detail{opacity:1;transform:none}
  .wk-service-art .op-hosting .op-host-before{opacity:0}
  .wk-service-art .op-hosting .op-host-after{opacity:1;transform:none}
  .wk-service-art .op-hosting .op-status-dot--pending{background:var(--mist)}

/* Complete default still. The page runtime replays by toggling the art host class. */
.wk-service-art > .impact-study-art {height:var(--wk-art-height);width:100%;max-width:100%;min-width:0;margin:0;position:relative}
.wk-service-art .brand-art, .wk-service-art .social-art {height:var(--wk-art-height)}
.wk-service-art .iw-shopadd, .wk-service-art .iw-basketcontinue {display:block;text-align:center;font-family:var(--text)}
.wk-service-art .iw-adtype {font-size:clamp(42px,10cqw,68px)}
.wk-service-art .iw-webreadout .wk-art-icon {margin-left:auto;flex-shrink:0}
.wk-service-art .iw-webreadout .wk-art-icon svg {transform:rotate(-45deg)}
.wk-service-art .iw-web-pointer {position:absolute;right:28px;bottom:21px;width:15px;height:19px}
.wk-service-art .op-seo-pointer .wk-art-pointer {background:var(--ink)}
@container wk-service-art (max-width:480px) {
 .wk-service-art > .impact-study-art {--wk-art-height:230px;height:var(--wk-art-height)}
 .wk-service-art .iw-web-pointer {right:22px;bottom:18px}
 .wk-service-art .iw-adtype {font-size:38px}
 .wk-service-art .op-hosting {padding-top:14px;padding-bottom:14px}
}
@container wk-service-art (max-width:420px) {
 .wk-service-art > .brand-art {--wk-art-height:310px;height:var(--wk-art-height)}
}
@media(prefers-reduced-motion:reduce) {
 .wk-service-art * {animation:none!important;transition:none!important}
 .wk-service-art .brand-panel,.wk-service-art .social-tile {transform:none}
 .wk-service-art .brand-wordmark-text {clip-path:inset(0)}
 .wk-service-art .iw-web-stream {transform:translateY(-45px)}
 .wk-service-art .iw-webfocus,.wk-service-art .iw-webreadout {opacity:1}
 .wk-service-art .iw-web-pointer,.wk-service-art .op-seo-pointer {opacity:0}
 .wk-service-art .iw-shopintro {opacity:0}
 .wk-service-art .iw-basket {transform:translateX(0)}
 .wk-service-art .iw-basketconfirm,.wk-service-art .iw-ad-foot,.wk-service-art .iw-adtype span {opacity:1;transform:none}
 .wk-service-art .iw-adshape {opacity:.22;transform:translateX(0) scale(.85)}
 .wk-service-art .iw-storyprogress {transform:scaleX(1)}
 .wk-service-art .op-seo .op-bar--focus {background:var(--red)}
 .wk-service-art .op-crm .op-enquiry {transform:translateX(calc(100% + 12px))}
 .wk-service-art .op-crm .op-enquiry-detail {opacity:1;transform:none}
 .wk-service-art .op-hosting .op-host-before {opacity:0}
 .wk-service-art .op-hosting .op-host-after {opacity:1;transform:none}
 .wk-service-art .op-hosting .op-status-dot--pending {background:var(--mist);box-shadow:none}
}
/* Featured project presentations retain the existing card grid. */
.wk-f-m-rich{aspect-ratio:16/9!important;overflow:hidden;background:none!important}
.wk-f[data-slot^=n] .wk-f-m-rich{aspect-ratio:16/10!important}
.wk-f-m-rich::after{display:none}
.wk-f-rich .wk-bound-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding-bottom:4px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--fg);text-decoration:none}
.wk-f-rich .wk-bound-link:hover{border-color:var(--red)}
.wk-f-rich .wk-bound-link:focus-visible{outline:2px solid var(--red);outline-offset:5px}

@media (max-width:760px){
  .wk-f-m-rich,.wk-f[data-slot^=n] .wk-f-m-rich{aspect-ratio:4/3!important}
}