/* October refinements: compact shadows, live controls and the blue footer. */
.button,.faq-help .button{box-shadow:inset 0 1px 1px #ffffff50,0 3px 0 #003799,0 7px 12px #00296324}
.button:hover,.button:focus-visible,.faq-help .button:hover{box-shadow:inset 0 1px 1px #ffffff60,0 3px 0 #003799,0 9px 18px #0059ff30}
.hero-socials{position:absolute;top:192px;left:50%;margin-left:-76.5px;display:flex;gap:12px;translate:0 var(--hero-offset,0px)}
.hero-socials a{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:rgba(255,255,255,.18);color:#626262;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 3px 8px rgba(15,23,42,.07);transition:background .25s,color .25s,translate .25s}
.hero-socials svg{width:22px;height:22px;fill:currentColor}
.hero-socials a:hover,.hero-socials a:focus-visible{background:rgba(255,255,255,.3);color:#0059ff;translate:0 -4px}
.ribbon{width:1700px;padding:16px 0;overflow:hidden;display:block}
.ribbon-track,.ribbon-group{display:flex;align-items:center;width:max-content}
.ribbon-group{gap:32px;padding-right:32px;flex:none}
.ribbon-track{animation:ribbon-run 35s linear infinite}
.ribbon.back .ribbon-track{animation-direction:reverse;animation-duration:42s}
@keyframes ribbon-run{to{transform:translateX(-50%)}}
.quote-card{overflow:hidden}
.quote-bottom blockquote{font-size:25px;line-height:32px;margin-bottom:28px}
.quote-controls button{cursor:pointer;transition:background .25s,transform .25s}
.quote-controls button:hover,.quote-controls button:focus-visible{background:#0059ff;transform:translateY(-2px)}
.carousel-toggle{position:absolute;right:40px;top:40px;border:1px solid #ffffff55;border-radius:20px;padding:7px 12px;background:transparent;color:white;cursor:pointer;font:12px Inter,sans-serif}
.carousel-toggle:hover{background:#0059ff}
.service-tags li{padding:0;border:0;background:none;min-width:0!important}
.service-tags button{border:1px solid #b0b0b0;border-radius:200px;background:white;padding:17.239px 24px;font:500 18px/20.522px Poppins,sans-serif;white-space:nowrap;color:#000;cursor:pointer;transition:background .25s,color .25s,border-color .25s,translate .25s}
.service-tags button:hover,.service-tags button:focus-visible,.service-tags button[aria-pressed=true]{background:#0059ff;color:white;border-color:#0059ff;translate:0 -2px}
.portfolio-grid.is-filtered{display:flex;gap:28px;width:max-content;min-width:100%;align-items:flex-start}
.portfolio-grid.is-filtered .work-card{position:relative;left:auto;top:auto;flex:0 0 401px;animation:gallery-in .45s ease both}
.work-card[hidden]{display:none!important}
.portfolio-empty{padding:100px 40px;text-align:center;font:24px/1.5 'Cal Sans',sans-serif}
.portfolio-empty a{color:#0059ff;display:block}
@keyframes gallery-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.pricing h2{background:none;color:#f5f5f5}
.pricing .section-badge.red{color:#3883ff}
.pricing .section-badge.red span{background:#3883ff}
.plan,.plan.featured{outline:2px solid transparent;outline-offset:-2px}
.plan:hover,.plan:focus-within{outline-color:#0059ff}
.plan .plan-button:hover,.plan .plan-button:focus-visible{background:#0059ff;color:white;outline:none}
.plan .plan-button:hover>span,.plan .plan-button:focus-visible>span{background:white}
.plan.featured .plan-button:hover img,.plan.featured .plan-button:focus-visible img{filter:brightness(0)}
[data-count]{font-variant-numeric:tabular-nums}
.email-strip>div>span>span{color:#0059ff}
.footer-panel{background:radial-gradient(ellipse at 48% 105%,#064aff 0%,#002de6 31%,#00167b 50%,transparent 74%),radial-gradient(ellipse at 60% -15%,#292a31,transparent 50%),#02030c}
.footer-lights{display:none}
.footer-columns a,.footer-columns span{font:700 20px/32px Unbounded,sans-serif;text-transform:uppercase}
.footer-meta{top:468px}
.footer-meta>span:first-child{width:340px}
.footer-wordmark{left:12px;top:514px;width:1400px;height:286px;font:700 290px/1.0 Unbounded,sans-serif;letter-spacing:-14px;color:#fff;background:none;text-align:center}
.footer-blur{height:100px;backdrop-filter:blur(9px)}
@media(prefers-reduced-motion:reduce){.hero-socials{translate:none}.ribbon-track{animation:none}.portfolio-grid.is-filtered .work-card{animation:none}}

/* Independent translate layers preserve heading reveals and button interactions. */
.portfolio .section-title,.portfolio-highlight,.process .section-title,.process-highlight,
.pricing h2,.comparison .section-title,.faq-sidebar .section-title,.contact-content h3{
 translate:0 var(--section-drift,0px);
}
.art-heading,.contact-art{translate:0 var(--section-art-drift,0px)}
/* The light artwork includes the top cutout and must stay attached to the edge. */
.pricing-light{translate:none}
.testimonial-grid,.process-grid,.plans,.comparison-table,.faq-help{translate:0 var(--section-card-drift,0px)}
.footer-panel{background-position:0 var(--section-art-drift,0px),0 0,0 0;background-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){
 .portfolio .section-title,.portfolio-highlight,.process .section-title,.process-highlight,
 .pricing h2,.comparison .section-title,.faq-sidebar .section-title,.contact-content h3,
 .art-heading,.contact-art,.pricing-light,.testimonial-grid,.process-grid,.plans,.comparison-table,.faq-help{translate:none}
 .footer-panel{background-position:0 0}
}
/* Locally hosted portfolio images with category filters and full-design previews. */
.service-tags{gap:12px}
.service-tags button{font-size:16px;padding:17px 20px}
.portfolio-scroll{left:40px;right:40px;top:416px;height:810px;overflow:visible}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:390px;gap:24px;width:100%;height:auto}
.portfolio-project{position:relative;display:block;width:100%;height:390px;padding:0;border:0;border-radius:22px;background:#e2e2e5;overflow:hidden;cursor:zoom-in;text-align:left}
.portfolio-project>img{display:block;width:100%;height:100%;object-fit:contain;transition:scale .6s}
.portfolio-project>img.tall-project{object-fit:cover;object-position:top}
.portfolio-project:hover>img{scale:1.025}
.project-caption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(transparent,#070b19e8);color:white;opacity:0;transition:opacity .25s}
.project-caption strong,.project-caption small{display:block;font:500 16px/1.5 Inter,sans-serif}
.project-caption small{font-size:12px;color:#d3d9ed}
.portfolio-project:hover .project-caption,.portfolio-project:focus-visible .project-caption{opacity:1}
.portfolio-project:focus-visible{outline:3px solid #0059ff;outline-offset:3px}
.portfolio-pagination{position:absolute;left:40px;right:40px;top:1250px;display:flex;align-items:center;justify-content:space-between;font:14px Inter,sans-serif}
.portfolio-pagination button{border:1px solid #b0b0b0;padding:12px 24px;border-radius:30px;background:white;cursor:pointer;font:500 14px Inter,sans-serif}
.portfolio-pagination button:hover:not(:disabled){background:#0059ff;color:white;border-color:#0059ff}
.portfolio-pagination button:disabled{opacity:.35;cursor:default}
.project-viewer{order: 1px solid #ffffff30;
    border-radius: 18px;
    width: min(1080px, 90vw);
    max-width: 70vw;
    height: 70vh;
    max-height: 70vh;
    background: #14151b;
    color: white;
    overflow: hidden;
    box-shadow: 0 20px 80px #0005;
    padding: 10px;}
.project-viewer::backdrop{background:#050915cc;backdrop-filter:blur(8px)}
.project-toolbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:20px}
.project-toolbar h2{font:500 18px/1.4 Inter,sans-serif}
.project-close{padding:10px 18px;flex:none;border:1px solid #ffffff50;border-radius:25px;background:transparent;color:white;cursor:pointer}
.project-close:hover{background:#0059ff}
.project-image-scroll{height:calc(100% - 70px);overflow:auto;background:#e7e7e9;text-align:center}
.project-image-scroll img{display:block;max-width:100%;height:auto;margin:0 auto}

/* Match the footer gradient on the testimonial statistics card. */
.stats{background:radial-gradient(ellipse at 48% 105%,#064aff 0%,#002de6 31%,#00167b 50%,transparent 74%),radial-gradient(ellipse at 60% -15%,#292a31,transparent 50%),#02030c}
.footer-lights{display:none}

/* Masonry cards retain each artwork's native proportions, without letterboxing. */
.portfolio-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scroll-behavior:auto}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;align-items:start;gap:24px}
.portfolio-column{display:flex;flex-direction:column;gap:24px;min-width:0}
.portfolio-project{height:auto;flex:none;background:transparent;border-radius:18px}
.portfolio-project>img,.portfolio-project>img.tall-project{width:100%;height:auto;object-fit:contain;display:block}
.portfolio-project:hover>img{scale:1}
.portfolio-pagination .portfolio-motion-toggle{margin-left:auto;margin-right:24px}
.portfolio-pagination #portfolio-status{margin-right:24px}

/* Editorial portfolio montage; selected work is not attributed to the quoted client. */
.quote-card{background:#0b1429;isolation:isolate}
.testimonial-collage{position:absolute;inset:-65px -25px -80px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,270px);gap:16px;transform:rotate(-9deg) scale(1.05);z-index:-3;pointer-events:none}
.collage-tile{overflow:hidden;border-radius:12px;background:#172746;box-shadow:0 12px 25px #0005}
.collage-tile:nth-child(3n+2){translate:0 35px}
.collage-tile img{width:100%;height:100%;object-fit:cover;object-position:top}
.quote-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,15,34,.38) 0%,rgba(6,15,34,.68) 30%,rgba(6,15,34,.96) 66%,#080f22 100%);pointer-events:none}
.quote-count{position:relative;text-shadow:0 1px 6px #000}
.carousel-toggle{background:#081327b3;backdrop-filter:blur(8px)}
.collage-label{position:absolute;top:91px;left:40px;padding:6px 10px;border:1px solid #ffffff40;border-radius:20px;background:#081327b3;color:#e1eaff;font:400 11px/16px Inter,sans-serif;letter-spacing:.3px}
.quote-bottom{z-index:1}

.banner-media{overflow:hidden}
.hero-video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:inherit}

/* Two seamless left-to-right rows; the page owns vertical scrolling. */
.portfolio-scroll{overflow:hidden;overscroll-behavior:auto}
.portfolio-grid{display:flex;flex-direction:column;gap:24px;width:100%;height:804px}
.portfolio-marquee-row{height:390px;flex:none;overflow:hidden}
.portfolio-marquee-track,.portfolio-marquee-group{display:flex;width:max-content;align-items:flex-start}
.portfolio-marquee-group{gap:24px;padding-right:24px;flex:none}
.portfolio-marquee-track{will-change:transform}
.portfolio-marquee-group .portfolio-project{height:390px;flex:none;max-width:none}
.portfolio-marquee-group .portfolio-project>img{width:100%;height:390px;object-fit:contain}

/* Expand the 16:9 showreel into a viewport-fitting, briefly pinned frame. */
.banner{height:calc(1754px + var(--showreel-extra,0px))}
.banner-media{left:var(--video-left,8px);top:var(--video-top,792px);width:var(--video-width,1424px);height:var(--video-height,802px);transform:scale(var(--video-growth,1));transform-origin:center center;border-radius:var(--media-radius,32px)}
.client-logos{top:calc(1658px + var(--showreel-extra,0px))}
.ribbons{margin-top:calc(1680px + var(--showreel-extra,0px))}
@media(prefers-reduced-motion:reduce){.banner-media{transform:none}}

/* Client logo marquee, with preserved original artwork and colors. */
.client-logos{height:76px;top:calc(1638px + var(--showreel-extra,0px));mask-size:100% 100%;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.logo-track{height:76px;align-items:center;gap:0;animation:client-logo-drift 32s linear infinite}
.logo-group{display:flex;align-items:center;gap:56px;padding-right:56px;flex:none}
.client-logo{width:190px;height:76px;display:flex;align-items:center;justify-content:center;flex:none}
.logo-track .client-logo img{width:100%;height:62px;object-fit:contain;mix-blend-mode:multiply}
.client-logos:hover .logo-track{animation-play-state:paused}
@keyframes client-logo-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-group{gap:24px;padding-right:24px}.client-logo{width:168px}}