/* Homepage-only motion. Content stays visible without scripting. */
.home-page .button{border-radius:100px;box-shadow:0 2px 3px #20241c12,0 7px 15px #20241c0b,inset 0 1px 1px #ffffff30;transition:transform 160ms var(--ease),background 200ms ease}
.home-page .button:hover{transform:none}
.home-page .button:active{transform:scale(.97)}
.home-page .project:hover .project-visual img{transform:none}
.reel-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.reel-heading h2{font-size:14px;letter-spacing:0;font-weight:600}
.motion-toggle{min-height:44px;padding:9px 17px;border:1px solid var(--line);border-radius:50px;color:var(--ink);background:transparent;font-size:13px}
.reel-window{overflow-x:auto;overscroll-behavior-x:contain;padding-inline:var(--space);scrollbar-width:thin;scrollbar-color:var(--deep) transparent}
.reel-track{display:flex;width:max-content}
.reel-group{display:flex;gap:24px;padding-right:24px}
.reel-group .project{width:clamp(280px,43vw,680px);flex:none}
.reel-group .project-visual{border-radius:20px;aspect-ratio:1.53}
.reel-running .reel-track{animation:tgm-reel 42s linear infinite}
.reel-running .reel-window{overflow:hidden}
.reel-running .reel-window:focus-within{overflow-x:auto}
.reel-running .reel-window:focus-within .reel-track,.reel-running .reel-window:hover .reel-track,.motion-paused .reel-track,.reel-offscreen .reel-track{animation-play-state:paused}
@keyframes tgm-reel{to{transform:translateX(-50%)}}
.home-page .cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(90px,12vw,175px)}
.home-page .cta .wrap{position:relative;z-index:2}
.trail-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.trail-image{position:absolute;width:180px;height:112px;object-fit:cover;border-radius:12px;box-shadow:0 12px 25px #20241c25;pointer-events:none}
.floating-contact{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:20px;padding:8px 9px 8px 22px;background:var(--paper);border:1px solid var(--line);border-radius:100px;box-shadow:0 8px 30px #20241c20;white-space:nowrap}
.floating-contact strong{font-size:13px}.floating-contact .button{min-height:44px;padding:10px 18px;gap:15px}.home-page .footer{padding-bottom:110px}
@media(hover:hover) and (pointer:fine){.home-page:not(.motion-paused) .button:hover{transform:translateY(-2px)}.home-page:not(.motion-paused) .project:not([data-parallax]) :is(.round-link):hover{transform:translateY(-2px)}}
@media(max-width:760px){.reel-group{gap:16px;padding-right:16px}.reel-group .project{width:82vw}.reel-group .project-visual{padding:24px 18px}.floating-contact{bottom:14px;max-width:calc(100% - 28px);gap:12px;padding-left:17px}.floating-contact strong{font-size:12px}.reel-running .reel-track{animation-duration:42s}}
@media(prefers-reduced-motion:reduce){.reel-track{transform:none!important;animation:none!important}.reel-window{overflow-x:auto!important}.reel-clone{display:none}.trail-layer{display:none}.home-page .button{transform:none!important}}
/* Keyboard exploration presents every original project in a stable strip. */
.reel-running .reel-window:focus-within .reel-track{animation:none;transform:none}
.reel-running .reel-window:focus-within .reel-clone{display:none}
/* Review feedback: work heading, device compositions and Google review identity. */
.reel-heading h2{font-size:clamp(32px,4.5vw,62px);letter-spacing:-.035em}
.reel-controls{display:flex;justify-content:flex-end;margin-top:-8px;margin-bottom:16px}
.reel-controls .motion-toggle{font-size:12px;min-height:36px;padding:5px 12px}
.reel-group .device-preview{padding:0;isolation:isolate}
.reel-group .device-preview>img{width:100%;height:100%;object-fit:cover;object-position:top;filter:none}
.mobile-preview{position:absolute;right:5%;bottom:-5%;width:24%;height:60%;overflow:hidden;border:5px solid #20241c;border-bottom-width:8px;border-radius:20px 20px 0 0;background:#20241c;box-shadow:0 7px 22px #0005;z-index:2}
.reel-group .mobile-preview img{display:block;max-width:none;width:200%;height:auto;object-fit:initial;filter:none;transform:none!important;transition:none}
.review-brand{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-bottom:12px}
.review-brand>img{width:154px;height:28px;object-fit:contain}
.review-stars{display:flex;gap:3px;color:#a57112}
.review-stars svg{width:23px;height:23px}
.home-page .review-shell .rating-pending{font-size:12px;color:var(--muted);margin:0 0 24px}
@media(max-width:760px){.mobile-preview{border-width:4px;border-radius:14px 14px 0 0}.reel-heading{gap:16px}.reel-heading .button{padding-inline:15px;gap:12px}.reel-controls{margin-top:0}}
/* Complete previews: a contained grid replaces the edge-cropped marquee. */
.home-page .reel-window{max-width:var(--max);margin:auto;overflow:visible;padding-inline:var(--space)}
.home-page .reel-track{width:100%;display:block;animation:none;transform:none}
.home-page .reel-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:0}
.home-page .reel-group .project{width:100%;min-width:0}
.home-page .reel-group .device-preview{display:grid;grid-template-columns:minmax(0,1fr) 24%;align-items:center;gap:5%;padding:5%;aspect-ratio:1.53;overflow:visible}
.home-page .reel-group .device-preview>img{width:100%;height:auto;object-fit:contain;border-radius:5px;box-shadow:0 8px 20px #20241c25}
.home-page .mobile-preview{position:static;width:100%;height:auto;aspect-ratio:640/1385;border:4px solid #20241c;border-radius:15px;overflow:hidden;box-shadow:0 7px 20px #20241c25}
.home-page .reel-group .mobile-preview img{width:100%;max-width:100%;height:auto;object-fit:contain}
@media(max-width:760px){.home-page .reel-group{grid-template-columns:1fr;gap:16px}.home-page .mobile-preview{border-width:3px;border-radius:10px}}
/* A paged carousel: full cards at rest, with the original uncropped devices. */
.home-page .reel-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:5px}
.home-page .reel-track::-webkit-scrollbar{display:none}
.home-page .reel-group{display:flex;gap:24px;grid-template-columns:none}
.home-page .reel-group .project{flex:0 0 calc((100% - 24px)/2);scroll-snap-align:none}
.home-page .reel-group .project:nth-child(odd){scroll-snap-align:start}
.carousel-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-bottom:28px}
.carousel-controls button{background:transparent;color:var(--ink);font-size:22px;width:44px;height:44px}
.carousel-position{font-size:13px;min-width:36px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:760px){.home-page .reel-group .project{flex-basis:100%;scroll-snap-align:start}}

/* Slow, seamless rotation; complete images retain their natural aspect ratio. */
.home-page .reel-track{scroll-snap-type:none;scroll-behavior:auto}
.home-page .reel-group .project,.home-page .reel-group .project:nth-child(odd){scroll-snap-align:none}
@media(prefers-reduced-motion:reduce){.home-page .reel-copy{display:none}}

.reel-heading .results-green{color:var(--deep)}
@media(max-width:760px){.reel-heading{flex-direction:column;align-items:flex-start}.reel-heading .button{align-self:flex-start}}

/* At-a-glance figures supplied in the reference, replacing the client strip. */
.studio-stats{border-block:1px solid var(--line);margin-top:24px}
.stats-grid{display:grid;grid-template-columns:4fr 1.1fr}
.stats-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.stat{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:42px 24px;border-right:1px solid var(--line);min-width:0}
.stat:first-child{padding-left:0}
.stat dt,.stats-reviews span{font-family:inherit;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted)}
.stat dd{order:-1;margin:0;font-family:inherit;font-size:clamp(40px,4.5vw,62px);font-weight:600;line-height:1.1;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.stats-reviews{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:13px;padding:32px 0 32px 26px;text-decoration:none}
.stats-reviews span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr}.stat{padding:30px 20px}.stat:last-child{border-right:0}.stats-reviews{padding:24px 0;border-top:1px solid var(--line);flex-direction:row;align-items:center;justify-content:flex-start}.stats-reviews br{display:none}}
@media(max-width:560px){.stats-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:26px 18px}.stat:nth-child(2){border-right:0}.stat:nth-child(3){padding-left:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat dd{font-size:36px}.stat dt{font-size:15px}}

/* Shared figure and label rows stay aligned when labels wrap. */
.stat{justify-content:flex-start}
.stat dt{min-height:3em}
.stats-reviews{justify-content:flex-start;padding-top:42px;padding-bottom:42px;gap:14px}
.stats-reviews>svg{height:clamp(44px,4.95vw,68.2px);width:36px;flex-shrink:0}
@media(max-width:900px){.stats-reviews{padding-block:24px;align-items:center}.stats-reviews>svg{height:36px}}
/* Soft layered panels and green contour lines echo the supplied brand artwork. */
.review-showcase{position:relative;isolation:isolate;overflow:hidden;background:#f7f9f6;border-block:1px solid #e8ece5}
.review-showcase:before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/review-contours.svg') center/cover no-repeat;opacity:.65;pointer-events:none}
.review-showcase:after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:240px;border-radius:36px;background:#fff;box-shadow:0 28px 70px #2933220b;transform:rotate(-5deg);z-index:-1;pointer-events:none}
.review-showcase .split{align-items:center;gap:clamp(32px,6vw,90px);position:relative}
.review-showcase .quote{margin:0;padding:clamp(24px,4vw,48px);border:1px solid #ffffff;border-radius:28px;background:#ffffffed;box-shadow:0 20px 65px #202d1a0b;font-size:clamp(27px,3.3vw,44px)}
.review-showcase .quote cite{font-size:16px;line-height:1.6}
.review-showcase .review-shell{background:#fffffff2;border:1px solid #e8eee2;border-radius:28px;padding:clamp(24px,3vw,40px);box-shadow:0 20px 65px #202d1a0c;position:relative}
.review-showcase .review-shell:before{content:"";position:absolute;right:28px;top:-17px;width:34px;height:34px;border-radius:50%;background:var(--green);box-shadow:0 6px 20px #92b66a30}
@media(max-width:760px){.review-showcase .split{gap:32px}.review-showcase .quote,.review-showcase .review-shell{border-radius:22px}.review-showcase:before{background-size:auto 100%}}

/* Clear pricing and verified Google review snapshot. */
.review-showcase:after{display:none}
.pricing-section h2 em{font-style:normal;color:var(--green-dark,#3d592d)}
.pricing-section .section-heading>p{max-width:500px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pricing-plan{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);border:1px solid var(--line,#d7dacd);border-radius:24px}
.pricing-plan:nth-child(2){background:#eaf0e3;border-color:#b4c4a5}
.pricing-plan>p{font-size:17px;min-height:3.4em}
.plan-price{display:flex;flex-direction:column;gap:8px;margin:20px 0 28px;min-height:136px}
.plan-price>span,.plan-price small{font-size:15px}
.plan-price strong{font-size:clamp(38px,4vw,58px);line-height:1.1;letter-spacing:-.05em;font-weight:600}
.pricing-plan ul{list-style:none;padding:0;margin:0 0 32px;font-size:16px;line-height:1.6}
.pricing-plan li{padding:10px 0;border-top:1px solid #ced5c5}
.pricing-plan .button{margin-top:auto;align-self:flex-start}
.pricing-note{font-size:15px!important;max-width:850px;margin-top:24px}
.google-reviews-label{font-size:clamp(23px,2.2vw,30px);letter-spacing:-.04em}
.google-rating strong{font-size:42px;letter-spacing:-.05em}
.review-brand{flex-wrap:wrap;gap:16px}.review-stars{font-size:25px;letter-spacing:3px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.pricing-plan>p{min-height:0}.plan-price{min-height:0}.pricing-plan{padding:28px}}

/* Keep the moving strip on one composited layer; native touch scrolling remains available. */
.home-page .reel-group{will-change:transform;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.home-page .reel-group{will-change:auto;transform:none!important}}

/* Keep the mobile enquiry bar focused on its single action. */
@media(max-width:760px){.floating-contact{padding:8px;gap:0}.floating-contact strong,.floating-contact .button span{display:none}.floating-contact .button{gap:0;padding-inline:24px}}

/* Services inherit the previous review contour artwork. */
.home-page .studio-stats + section{position:relative;isolation:isolate;background:#f7f9f6;max-width:none}
.home-page .studio-stats + section:before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/review-contours.svg') center/cover no-repeat;opacity:.65;pointer-events:none}
.review-showcase:before{display:none}
.gradient-waves-container{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;background:linear-gradient(155deg,#f7f9f6 15%,#e5efd5 55%,#8bc53f 100%)}
.gradient-waves-container canvas{display:block;width:100%;height:100%;opacity:0}
.gradient-waves-container.waves-ready canvas{opacity:1}
.review-showcase>.wrap{position:relative;z-index:1}
.review-showcase .quote,.review-showcase .review-shell{background:#fffffff5}
@media(prefers-reduced-motion:reduce){.gradient-waves-container canvas{display:none}}

.gradient-waves-container.waves-ready{background:#f7f9f6}

.floating-contact{padding:8px;gap:0}.floating-contact .button{gap:0;padding-inline:24px}
.home-page .dark>.split{grid-template-columns:1fr}.home-page .dark>.split>div{max-width:780px}

/* Full-width artwork, shared max-width content alignment. */
.services-intro>.wrap>h2{margin-bottom:28px}.services-intro>.wrap>p{font-size:clamp(16px,1.6vw,22px)}

/* Interactive FloatingLines services background. */
.home-page .studio-stats + .services-intro:before{display:none}
.floating-lines-container{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;background:linear-gradient(150deg,#f7f9f6,#eef4e5)}
.floating-lines-container canvas{display:block;width:100%;height:100%}
.services-intro>.wrap{position:relative;z-index:1}