/* A composed landscape, with every pixel of the creative retained. */
.creation-section{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding:80px 0 45px;scroll-margin-top:105px}
.creation-section>.wrap{position:relative;z-index:1}
.creation-landscape{position:absolute;z-index:0;inset:180px 0 0;background:url('/assets/original-landscape.svg') center bottom/cover no-repeat;opacity:.2;pointer-events:none;mask-image:linear-gradient(transparent,black 42%,black 82%,transparent)}
.creation-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px}
.creation-heading h2{font-size:clamp(40px,4.6vw,64px);line-height:1.1;margin:0}
.creation-heading>p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 5px;max-width:330px}
.creation-examples{position:relative;display:grid;grid-template-columns:.84fr 1.32fr .74fr;align-items:start;column-gap:clamp(32px,4.5vw,72px);padding:0 15px 20px}
.creation-example{min-width:0;position:relative;z-index:1}
.creation-example-film{margin-top:74px}
.creation-example-product{margin-top:200px}
.creation-branch{position:absolute;width:210px;left:43%;bottom:22px;opacity:.32;pointer-events:none;z-index:0}
.creation-media{display:block;position:relative;border:0;border-radius:0;padding:0;background:transparent;width:100%;cursor:pointer;box-shadow:0 12px 30px #193d7908}
.creation-media img,.creation-media video{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.creation-media video{aspect-ratio:9/16}
.creation-caption{display:flex;gap:13px;margin-top:22px}
.creation-index{font:400 10px/1.7 Inter,sans-serif;color:var(--blue);opacity:.65;padding-top:6px}
.creation-example h3{font:400 clamp(24px,2.5vw,32px)/1.15 Fraunces,serif;letter-spacing:-.035em;margin:0 0 10px}
.creation-example p{font-size:12px;line-height:1.75;color:var(--muted);margin:0;max-width:250px}
.creation-link{display:inline-flex;align-items:center;gap:20px;padding:12px 0 4px;min-height:44px;border:0;background:transparent;color:var(--blue);font:400 11px/1.5 Inter,sans-serif;cursor:pointer;text-align:left}
.creation-link span{font-size:18px;transition:transform .25s ease}
.creation-link:hover span{transform:translate(3px,-3px)}
.creation-media:focus-visible,.creation-link:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.creation-channels{font-size:11px;line-height:1.6;color:var(--blue);margin:25px 0 0;text-align:center}
@media(min-width:1500px){.creation-examples{max-width:1150px;margin-inline:auto}}
@media(max-width:1050px) and (min-width:701px){.creation-examples{column-gap:30px;padding-inline:0}.creation-example-product{margin-top:155px}.creation-example-film{margin-top:55px}.creation-caption{gap:8px}.creation-branch{width:150px;bottom:30px}.creation-example p{font-size:11px}.creation-heading>p{max-width:260px}}
@media(max-width:700px){.creation-section{padding:48px 0 35px}.creation-heading{display:block;margin-bottom:35px}.creation-heading h2{font-size:39px}.creation-heading>p{font-size:12px;margin-top:20px}.creation-examples{display:flex;flex-direction:column;gap:40px;padding:0}.creation-example{width:100%;margin:0}.creation-example-film .creation-media,.creation-example-product .creation-media{width:min(72%,238px);margin-inline:auto}.creation-example-static .creation-media{width:100%;max-width:430px;margin-inline:auto}.creation-caption{margin-top:18px;gap:14px}.creation-example h3{font-size:28px;margin-bottom:7px}.creation-example p{max-width:100%;font-size:12px}.creation-branch{display:none}.creation-landscape{inset:100px 0 0;background-size:auto 900px;background-position:center 40%;opacity:.1;mask-image:linear-gradient(transparent,black 25%,black 65%,transparent)}.creation-channels{text-align:left;margin-top:32px}.creation-link{font-size:11px}}
@media(max-width:360px){.creation-heading h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.creation-link span{transition:none}.creation-link:hover span{transform:none}}
/* Original portfolio masks applied to the creative itself. No opaque rectangle,
   painted border, duplicated image, blur or sampled edge extension. */
.creation-work-anchor{position:absolute;top:0;scroll-margin-top:105px}
.creation-example.journey-scene{min-height:0;padding:0;margin-bottom:0;scroll-margin-top:120px}
.creation-example-film.journey-scene{margin-top:74px;--creation-brush:url('/assets/brush-stewart-v17.png');--brush-size:136% 116%}
.creation-example-static.journey-scene{margin-top:0;--creation-brush:url('/assets/brush-static-v41.svg');--brush-size:100% 100%}
.creation-example-product.journey-scene{margin-top:200px;--creation-brush:url('/assets/brush-moment-v17.png');--brush-size:126% 124%}
.creation-media.journey-open{height:auto;margin:0;width:100%;max-width:none;aspect-ratio:auto;text-align:left;box-shadow:none;overflow:visible}
.creation-gesture.journey-surface{display:block;position:relative;inset:auto;margin:0;padding:0;overflow:visible;mask-image:var(--creation-brush);-webkit-mask-image:var(--creation-brush);mask-size:var(--brush-size);-webkit-mask-size:var(--brush-size);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.creation-gesture>.journey-reveal{position:relative;inset:auto;padding:0;overflow:visible;mask-image:none;-webkit-mask-image:none}
.creation-core{display:block;position:relative}
.creation-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:38px}
.creation-footer .creation-channels{margin:0;text-align:left}
.creation-footer .text-link{font-size:12px;min-height:44px;display:inline-flex;align-items:center;gap:22px}
@media(max-width:1050px) and (min-width:701px){.creation-example-film.journey-scene{margin-top:55px}.creation-example-product.journey-scene{margin-top:155px}}
@media(max-width:700px){.creation-example.journey-scene{margin:0}.creation-example-film.journey-scene{--brush-size:150% 126%}.creation-example-static.journey-scene{--brush-size:102% 102%}.creation-example-product.journey-scene{--brush-size:142% 138%}.creation-example-film .creation-media.journey-open,.creation-example-product .creation-media.journey-open{width:min(78%,250px);margin-inline:auto}.creation-example-static .creation-media.journey-open{width:100%;max-width:430px;margin-inline:auto}.creation-footer{display:block;margin-top:30px}.creation-footer .text-link{margin-top:12px}}

/* The product story keeps its native landscape frame inside the brush. */
.creation-example-static .creation-media video{aspect-ratio:5/4}

/* One clear target for each example: film playback or the still-image gallery. */
.creation-media>*{pointer-events:none}
.creation-link{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.creation-link .creation-project-name{font-size:11px;color:var(--muted)}
.creation-link .creation-action{font-size:11px;color:var(--blue)}
.creation-link:hover .creation-project-name{transform:none}

/* A quiet, continuous collection beneath the three lead projects. */
.featured-ribbon{position:relative;margin-top:60px;padding:0 0 18px;--ribbon-gap:52px}
.ribbon-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.ribbon-heading h3{font:400 24px/1.3 var(--serif);margin:0;color:var(--ink)}
.ribbon-toggle{border:0;border-bottom:1px solid #1b4d8c35;background:none;color:var(--blue);font:400 11px/1.4 var(--sans);padding:12px 0;min-height:44px;cursor:pointer}
.ribbon-window{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:12px 0 20px;touch-action:pan-x pan-y;overflow-anchor:none}
.ribbon-window::-webkit-scrollbar{display:none}
.ribbon-track,.ribbon-set{display:flex;align-items:center;width:max-content;gap:var(--ribbon-gap)}
.ribbon-track{gap:0}.ribbon-set{padding-right:var(--ribbon-gap)}
.ribbon-card{display:block;flex:none;width:230px;color:var(--ink);text-decoration:none}
.ribbon-landscape{width:330px}.ribbon-card:nth-child(even){margin-top:55px}
.ribbon-art{display:flex;align-items:center;justify-content:center;height:270px;mask:url('/assets/brush-moment-v17.png') center/127% 122% no-repeat;-webkit-mask:url('/assets/brush-moment-v17.png') center/127% 122% no-repeat}
.ribbon-card:nth-child(3n+1) .ribbon-art{mask-image:url('/assets/brush-stewart-v17.png');-webkit-mask-image:url('/assets/brush-stewart-v17.png')}
.ribbon-landscape .ribbon-art{mask-image:url('/assets/brush-static-v41.svg');-webkit-mask-image:url('/assets/brush-static-v41.svg');mask-size:108% 108%;-webkit-mask-size:108% 108%;height:245px}
.ribbon-art img{display:block;width:100%;height:100%;object-fit:contain}
.ribbon-caption{display:flex;flex-direction:column;gap:5px;margin:16px 8px 0}.ribbon-caption strong{font:400 21px/1.2 var(--serif)}.ribbon-caption>span{font:400 11px/1.5 var(--sans);color:var(--muted)}
.ribbon-card:focus-visible,.ribbon-toggle:focus-visible,.ribbon-window:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
@media(max-width:700px){.featured-ribbon{margin-top:36px;--ribbon-gap:28px}.ribbon-heading{margin-bottom:14px}.ribbon-heading h3{font-size:22px}.ribbon-card{width:166px}.ribbon-landscape{width:244px}.ribbon-art{height:214px}.ribbon-landscape .ribbon-art{height:190px}.ribbon-card:nth-child(even){margin-top:28px}.ribbon-caption strong{font-size:19px}}

.ribbon-landscape .ribbon-art{height:auto}.ribbon-landscape .ribbon-art img{height:auto}
#ribbon-title{scroll-margin-top:120px}

/* One continuous painted portfolio, led by the three consumer brands. */
.unified-work{margin-top:0;--ribbon-gap:65px}
.unified-work .ribbon-heading{justify-content:flex-end;margin-top:-25px;margin-bottom:12px}
.unified-work .ribbon-set{align-items:flex-start}
.unified-work .ribbon-window{padding-top:14px;padding-bottom:28px}
.unified-work .ribbon-card{width:280px;margin-top:60px}
.unified-work .ribbon-landscape{width:380px;margin-top:110px}
.unified-work .ribbon-art{height:340px}
.unified-work .ribbon-landscape .ribbon-art{height:auto}
.unified-work .ribbon-lead{width:300px;margin-top:55px;flex:none}
.unified-work .creation-example-static{width:460px;margin-top:0;--creation-brush:url('/assets/brush-static-v41.svg');--brush-size:100% 100%}
.unified-work .creation-example-film{--creation-brush:url('/assets/brush-stewart-v17.png');--brush-size:136% 116%}
.unified-work .creation-example-product{margin-top:110px;--creation-brush:url('/assets/brush-moment-v17.png');--brush-size:126% 124%}
.unified-work .creation-media.journey-open{width:100%;max-width:none;margin:0}
.unified-work .creation-caption{margin-inline:8px}
.unified-work .ribbon-set{padding-left:clamp(24px,9vw,154px)}
.unified-work .ribbon-caption strong{font-size:27px}
@media(max-width:700px){
 .unified-work{--ribbon-gap:30px}.unified-work .ribbon-heading{margin-top:-12px;margin-bottom:4px}
 .unified-work .ribbon-lead,.unified-work .ribbon-card{width:210px;margin-top:32px}
 .unified-work .creation-example-static,.unified-work .ribbon-landscape{width:290px;margin-top:0}
 .unified-work .creation-example-product{margin-top:58px}
 .unified-work .ribbon-art{height:270px}.unified-work .ribbon-landscape .ribbon-art{height:auto}
 .unified-work .creation-media.journey-open{width:100%;max-width:none}
 .unified-work .creation-caption{gap:8px}.unified-work .creation-example h3{font-size:26px}.unified-work .ribbon-caption strong{font-size:24px}
}
