/* Selected direction: a finished shell and service-specific, authentic work. */
.site-header{position:relative;z-index:20}
.site-footer{padding-bottom:24px}
.footer-bottom{padding-bottom:0}
.preview-label{display:none}
@media(max-width:1100px){
 .site-header{flex-wrap:nowrap}
 .site-header #main-nav{position:absolute;z-index:30;top:100%;left:0;right:0;width:100%;padding:22px 26px;background:#fbf4e6;border:1px solid #244b7733;border-radius:0 0 20px 20px;box-shadow:0 18px 32px #244b7726;animation:menu-arrive .22s ease-out}
 .site-header #main-nav a{min-width:0}
 .site-header #main-nav .nav-cta{grid-column:1/-1;background:var(--blue-accent)}
 .menu-toggle[aria-expanded=true]{background:var(--blue-accent)}
}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:500px){
 .site-header #main-nav{gap:6px 16px;padding:18px 20px;font-size:16px}
 .site-footer{margin-top:30px;padding-top:36px;padding-bottom:22px}
 .footer-bottom{margin-top:28px;padding-top:18px}
}
.phone-showcase{grid-area:art;position:relative;width:100%;max-width:560px;height:570px;align-self:center;isolation:isolate}
.phone-showcase .moving-route{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.phone-wash{position:absolute;inset:17% 3% 9%;border-radius:53% 43% 59% 39%;background:linear-gradient(140deg,#e1eef5,#f7dcd2);transform:rotate(-9deg);z-index:-2}
.sketch-phone{position:absolute;width:274px;height:532px;top:10px;left:50%;transform:translateX(-50%) rotate(-3deg)}
.phone-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(7px 12px 8px #244b771b)}
.phone-display{position:absolute;inset:36px 17px 27px;overflow:hidden;border-radius:4px 4px 16px 16px;background:#061a2d;isolation:isolate}
.phone-site{width:100%;height:auto;max-width:none;display:block;animation:phone-scroll 15s linear infinite;animation-play-state:paused}
.phone-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px 21px;background:#edf5f8 url('/wp-content/plugins/hcm-homepage-launch/build/assets/paper.webp');text-align:left;opacity:0;animation:phone-card 15s ease-in-out infinite;animation-play-state:paused}
.phone-card small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.phone-card strong{font:400 36px/1.12 HeartCityDisplay,Georgia,serif}
.phone-card .underline{display:inline-block}
.phone-card>span{font-size:15px;line-height:1.5;margin-top:26px}
.phone-showcase.motion-running .phone-site,.phone-showcase.motion-running .phone-card{animation-play-state:running}
.phone-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px}
.phone-note{position:absolute;right:0;top:15%;width:95px;font:italic 23px/1.2 HeartCityDisplay,Georgia,serif;transform:rotate(8deg)}
@keyframes phone-scroll{
 0%,10%{transform:translateY(0)}
 64%,86%{transform:translateY(-1500px)}
 86.01%,100%{transform:translateY(0)}
}
@keyframes phone-card{0%,66%{opacity:0}74%,92%{opacity:1}100%{opacity:0}}
.service-collage-seo .service-photo>img{filter:brightness(1.12) saturate(1.08) contrast(1.02)}
.service-collage-seo{aspect-ratio:600/660}
.service-collage-seo .service-photo{position:relative;left:7%;top:auto;margin-top:9%;width:85%}
.seo-reveal{position:relative;aspect-ratio:1440/1180;background:#edf5f8;overflow:hidden}
.seo-reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.seo-portrait{filter:brightness(1.12) saturate(1.08) contrast(1.02)}
.seo-grid{opacity:0;animation:seo-grid-fade 14s ease-in-out infinite;animation-play-state:paused}
.seo-reveal.motion-running .seo-grid{animation-play-state:running}
.service-collage-seo .service-photo figcaption{max-width:100%;padding:16px 2px 18px;font-size:19px}
.service-collage-seo figcaption span,.service-collage-seo figcaption small{display:block;font:500 13px/1.5 HeartCityText,Georgia,serif;margin-top:5px}
.service-collage-seo .collage-sketch{width:29%;right:-2%;bottom:-1%}
.service-collage-seo .collage-note{bottom:0;font-size:23px;width:60%}
@keyframes seo-grid-fade{0%,22%{opacity:0}38%,78%{opacity:1}94%,100%{opacity:0}}
.service-collage-social-media{aspect-ratio:600/690;max-width:560px}
.service-collage-social-media .service-photo{left:12%;width:76%;max-width:400px;margin-inline:auto;padding:12px 12px 0}
.service-collage-social-media .service-photo>img{aspect-ratio:4/5;object-fit:contain;background:#fff}
.service-collage-social-media .collage-sketch{width:27%;right:-1%;left:auto;top:4%;bottom:auto}
.service-collage-social-media .collage-note{bottom:0}
@media(max-width:1100px){.phone-showcase{width:min(560px,100%);height:570px}.phone-note{right:5%}}
@media(max-width:500px){
 .phone-showcase{height:510px}
 .sketch-phone{transform:translateX(-50%) rotate(-3deg) scale(.9);transform-origin:top center}
 .phone-note{display:none}
 .phone-caption{bottom:0;font-size:13px}
 .service-collage-social-media .service-photo{width:80%}
 .service-collage-seo{aspect-ratio:auto;padding-bottom:65px}
 .service-collage-seo .collage-note{font-size:19px;bottom:0}
 .service-collage-seo .service-photo figcaption{font-size:17px}
 .service-collage-seo figcaption span,.service-collage-seo figcaption small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .site-header #main-nav,.phone-site,.phone-card{animation:none}
 .phone-card{display:none}
 .seo-grid{animation:none;opacity:1}
}

.service-collage-social-media .collage-note{display:none}
/* Small, four-second gestures keep the service illustrations feeling hand drawn. */
.service-collage .collage-sketch{animation-duration:4s;animation-iteration-count:infinite;animation-play-state:paused;transform-origin:50% 55%;will-change:transform}
.service-collage.icons-running .collage-sketch{animation-play-state:running}
.service-collage-paid-ads .collage-sketch{animation-name:megaphone-shake;animation-timing-function:ease-in-out}
.service-collage-seo .collage-sketch{animation-name:search-figure-eight;animation-timing-function:linear}
.service-collage-social-media .collage-sketch{animation-name:hashtag-bounce;animation-timing-function:ease-in-out}
@keyframes megaphone-shake{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-4deg)}80%{transform:rotate(4deg)}84%{transform:rotate(-3deg)}88%{transform:rotate(2deg)}92%{transform:rotate(-1deg)}96%{transform:rotate(0)}}
@keyframes search-figure-eight{0%{transform:translate(0.000px,0.000px)}1.5625%{transform:translate(1.470px,1.366px)}3.125%{transform:translate(2.926px,2.679px)}4.6875%{transform:translate(4.354px,3.889px)}6.25%{transform:translate(5.740px,4.950px)}7.8125%{transform:translate(7.071px,5.820px)}9.375%{transform:translate(8.334px,6.467px)}10.9375%{transform:translate(9.516px,6.865px)}12.5%{transform:translate(10.607px,7.000px)}14.0625%{transform:translate(11.595px,6.865px)}15.625%{transform:translate(12.472px,6.467px)}17.1875%{transform:translate(13.229px,5.820px)}18.75%{transform:translate(13.858px,4.950px)}20.3125%{transform:translate(14.354px,3.889px)}21.875%{transform:translate(14.712px,2.679px)}23.4375%{transform:translate(14.928px,1.366px)}25%{transform:translate(15.000px,0.000px)}26.5625%{transform:translate(14.928px,-1.366px)}28.125%{transform:translate(14.712px,-2.679px)}29.6875%{transform:translate(14.354px,-3.889px)}31.25%{transform:translate(13.858px,-4.950px)}32.8125%{transform:translate(13.229px,-5.820px)}34.375%{transform:translate(12.472px,-6.467px)}35.9375%{transform:translate(11.595px,-6.865px)}37.5%{transform:translate(10.607px,-7.000px)}39.0625%{transform:translate(9.516px,-6.865px)}40.625%{transform:translate(8.334px,-6.467px)}42.1875%{transform:translate(7.071px,-5.820px)}43.75%{transform:translate(5.740px,-4.950px)}45.3125%{transform:translate(4.354px,-3.889px)}46.875%{transform:translate(2.926px,-2.679px)}48.4375%{transform:translate(1.470px,-1.366px)}50%{transform:translate(0.000px,-0.000px)}51.5625%{transform:translate(-1.470px,1.366px)}53.125%{transform:translate(-2.926px,2.679px)}54.6875%{transform:translate(-4.354px,3.889px)}56.25%{transform:translate(-5.740px,4.950px)}57.8125%{transform:translate(-7.071px,5.820px)}59.375%{transform:translate(-8.334px,6.467px)}60.9375%{transform:translate(-9.516px,6.865px)}62.5%{transform:translate(-10.607px,7.000px)}64.0625%{transform:translate(-11.595px,6.865px)}65.625%{transform:translate(-12.472px,6.467px)}67.1875%{transform:translate(-13.229px,5.820px)}68.75%{transform:translate(-13.858px,4.950px)}70.3125%{transform:translate(-14.354px,3.889px)}71.875%{transform:translate(-14.712px,2.679px)}73.4375%{transform:translate(-14.928px,1.366px)}75%{transform:translate(-15.000px,0.000px)}76.5625%{transform:translate(-14.928px,-1.366px)}78.125%{transform:translate(-14.712px,-2.679px)}79.6875%{transform:translate(-14.354px,-3.889px)}81.25%{transform:translate(-13.858px,-4.950px)}82.8125%{transform:translate(-13.229px,-5.820px)}84.375%{transform:translate(-12.472px,-6.467px)}85.9375%{transform:translate(-11.595px,-6.865px)}87.5%{transform:translate(-10.607px,-7.000px)}89.0625%{transform:translate(-9.516px,-6.865px)}90.625%{transform:translate(-8.334px,-6.467px)}92.1875%{transform:translate(-7.071px,-5.820px)}93.75%{transform:translate(-5.740px,-4.950px)}95.3125%{transform:translate(-4.354px,-3.889px)}96.875%{transform:translate(-2.926px,-2.679px)}98.4375%{transform:translate(-1.470px,-1.366px)}100%{transform:translate(-0.000px,-0.000px)}}
@keyframes hashtag-bounce{0%,10%,100%{transform:scale(1)}72%{transform:scale(1.48)}82%{transform:scale(.92)}88%{transform:scale(1.08)}94%{transform:scale(.98)}}
.client-posts{position:relative;overflow:hidden;isolation:isolate;background:#fff;aspect-ratio:4/5}
.client-posts :is(img,.revenue-chart){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:four-post-fade 24s linear infinite paused}
.client-posts img:nth-child(2){animation-delay:-18s}
.client-posts img:nth-child(3){animation-delay:-12s}
.client-posts img:nth-child(4){animation-delay:-6s}
.client-posts.posts-running :is(img,.revenue-chart){animation-play-state:running}
@keyframes four-post-fade{0%,20%{opacity:1}25%,95%{opacity:0}100%{opacity:1}}
.client-posts.two-posts{aspect-ratio:3/2;background:#edf5f8}
.client-posts.two-posts :is(img,.revenue-chart){animation-name:two-post-fade;animation-duration:12s}
.client-posts.two-posts :is(img,.revenue-chart):nth-child(2){animation-delay:-6s}
@keyframes two-post-fade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .service-collage .collage-sketch{animation:none;will-change:auto}
 .client-posts :is(img,.revenue-chart){animation:none;opacity:0}
 .client-posts img:first-child{opacity:1}
}

/* Preserve every face in the wide team photo; focus the individual portrait. */
.client-posts img[src$="nl-agent-outdoor-display.webp"]{object-fit:cover;object-position:50% 50%}
.client-posts img[src$="nl-team-outdoor-display.webp"]{object-fit:contain;background:#fffdf8}

.service-collage-social-media .collage-sketch{transform-origin:100% 0}

/* Shares the second slide clock: draw after fade-in, reset only while hidden. */
.revenue-chart .revenue-draw-mask{width:0;animation:revenue-draw 12s linear -6s infinite paused}
.posts-running .revenue-draw-mask{animation-play-state:running}
@keyframes revenue-draw{0%,5%{width:0}34%,49%{width:850px}50%,100%{width:0}}
@media(prefers-reduced-motion:reduce){.revenue-chart .revenue-draw-mask{animation:none;width:850px}}