/* The work and client stories lead the homepage; the image gallery closes it. */
.agency-hero-grid{align-items:flex-end}
.agency-hero-copy{max-width:900px}
.agency-hero .eyebrow span:last-child{text-transform:uppercase}
.agency-cta{border:0;cursor:pointer;text-align:left}
.agency-cta:focus-visible{outline:3px solid #80b5ff;outline-offset:4px}
.portfolio-gallery{padding-top:88px}
.portfolio-frame:after{display:none}
.portfolio-frame figcaption{display:none}
.approach-intro{grid-template-columns:1fr 2fr}
.approach-intro h2{font-family:Manrope,Arial,sans-serif;font-weight:700;letter-spacing:-.06em}
.approach-intro h2 .highlight{font-family:Georgia,serif;font-weight:400}
.contact-section-button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;margin-top:24px;border:1px solid #111;border-radius:32px;background:#fff;color:#111;padding:16px 22px;font-size:16px;cursor:pointer}
.contact-section-button:hover{background:var(--lime)}
.contact-dialog{width:min(660px,calc(100% - 24px));max-height:92dvh;border:0;border-radius:12px;padding:clamp(24px,4vw,42px);background:#fff;color:#111}
.contact-dialog::backdrop{background:rgba(0,0,0,.78)}
.contact-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-dialog-top button{border:1px solid #bbb;background:transparent;border-radius:24px;padding:8px 14px;cursor:pointer}
.contact-dialog h2{font:700 clamp(34px,4vw,58px)/1.08 Manrope,Arial,sans-serif;letter-spacing:-.06em;margin:22px 0 10px}
.contact-dialog>p{font-size:16px;line-height:1.55;color:#444;max-width:500px}
[data-contact-form]{display:grid;gap:17px;margin-top:24px}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
[data-contact-form] label{display:grid;gap:7px;font-size:13px;font-weight:700}
[data-contact-form] input,[data-contact-form] textarea{width:100%;padding:12px 13px;border:1px solid #aaa;border-radius:5px;background:#fff;color:#111;font:inherit;font-weight:400;resize:vertical}
[data-contact-form] input:focus-visible,[data-contact-form] textarea:focus-visible{outline:3px solid #80b5ff;outline-offset:1px}
.contact-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;border:0;border-radius:5px;padding:16px 20px;background:#3b82f6;color:#08172d;font-weight:700;cursor:pointer}
.contact-submit:hover{background:#80b5ff}
.contact-form-status{margin:0;font-size:12px;color:#555;line-height:1.5}

/* Still video covers let visitors choose what to watch. */
.reels-section{padding-bottom:84px}
.reels-section>.proof-heading{margin-bottom:36px}
.reel-source-note{margin-top:24px!important}

/* Three video testimonials at a time; buttons and touch scrolling advance them. */
.video-section{padding-bottom:88px}
.testimonial-carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 4.5% 18px;color:#ccc;font-size:13px;letter-spacing:.12em}
.testimonial-carousel-controls>div{display:flex;gap:10px}
.testimonial-carousel-controls button{width:44px;height:44px;border:1px solid #777;border-radius:50%;background:transparent;color:#fff;font-size:21px;cursor:pointer}
.testimonial-carousel-controls button:hover:not(:disabled){background:#3b82f6;border-color:#3b82f6;color:#111}
.testimonial-carousel-controls button:disabled{opacity:.35;cursor:default}
.testimonial-track,.testimonial-fallback{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;padding:0 4.5% 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#666 #111}
.testimonial-track{scroll-padding-inline:4.5%}
.testimonial-video-card,.testimonial-fallback figure{min-width:0;scroll-snap-align:start;margin:0;background:#202020;border-radius:7px;overflow:hidden}
.testimonial-video-card video,.testimonial-fallback video{display:block;width:100%;aspect-ratio:9/16;max-height:580px;object-fit:contain;background:#111}
.testimonial-video-card figcaption,.testimonial-fallback figcaption{display:flex;flex-direction:column;gap:4px;border:0;padding:14px 17px 17px;color:#fff;font-size:14px}
.testimonial-video-card figcaption span{font-size:11px;color:#aaa}

@media(max-width:1000px){.testimonial-track,.testimonial-fallback{grid-auto-columns:calc((100% - 16px)/2)}}
@media(max-width:650px){.agency-hero .eyebrow span:last-child{display:block;max-width:145px;text-align:right}.testimonial-track,.testimonial-fallback{grid-auto-columns:calc(100% - 16%);gap:12px}.approach-intro{grid-template-columns:1fr}.portfolio-gallery{padding-top:62px}.contact-form-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.testimonial-track{scroll-behavior:auto}}

/* React Bits Drift Wall, with a quieter straight-on presentation. */
.reels-section .wall-controls{margin:0 4.5% 16px}
.reels-section .wall-controls p{margin:0}
.reels-section .wall-controls button{cursor:pointer}
.reels-section .wall-controls button:hover{border-color:#80b5ff;color:#80b5ff}
.reel-wall{height:750px}
.reel-wall .drift-wall{mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.reel-wall .drift-wall__tile{border:0;padding:0;background:transparent;color:#fff;text-align:left;cursor:pointer}
.reel-wall .drift-wall__inner{opacity:1}
.reel-wall .drift-wall__tile img{filter:none}
.reel-wall .drift-wall__overlay{background:linear-gradient(transparent 28%,rgba(0,0,0,.94) 84%)!important;opacity:1!important}
.reel-wall .reel-tile-label{left:13px;right:13px;bottom:13px}
.reel-wall .reel-card-name{font-size:clamp(15px,1.4vw,20px)!important;line-height:1.12}
.reel-wall .reel-watch{font-size:10px!important;line-height:1.3}
.reel-wall .reel-card-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px!important;padding-top:8px}
.reel-wall .reel-card-metrics strong{font-size:clamp(14px,1.3vw,19px)}
.reel-wall .reel-card-metrics>span>span{font-size:9px}
.reels-section .reel-picker{margin:18px 4.5% 0}
.reels-section .reel-picker button{cursor:pointer}
@media(max-width:1000px){.reel-wall{height:680px}}
@media(max-width:650px){.reel-wall{height:580px}.reel-wall .reel-tile-label{left:10px;right:10px;bottom:10px}.reel-wall .reel-card-name{font-size:15px!important}.reels-section .wall-controls{align-items:center;gap:10px}.reels-section .wall-controls p{max-width:190px;font-size:12px}}