/* Online Family — premium experience layer. Content and core layouts remain owned by page styles. */
:root{--of-experience-ease:cubic-bezier(.2,.72,.22,1);--of-experience-line:rgba(25,25,22,.12);--of-experience-shadow:0 18px 44px rgba(22,22,18,.075)}
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Progressive reveal: elements stay visible unless JS successfully initializes. */
.of-experience-ready [data-of-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .68s var(--of-experience-ease),transform .68s var(--of-experience-ease);transition-delay:var(--of-experience-delay,0ms)}
.of-experience-ready [data-of-reveal="left"]{transform:translate3d(-20px,0,0)}
.of-experience-ready [data-of-reveal="right"]{transform:translate3d(20px,0,0)}
.of-experience-ready [data-of-reveal="scale"]{transform:scale(.975)}
.of-experience-ready [data-of-reveal].of-experience-visible{opacity:1;transform:none}
/* Consistent tactile polish without inventing controls or changing navigation. */
.service,.feature-item,.case-card,.portfolio-card,.team-card,.fiverr-review-card,.faq-item,.step,.platform-card,.industry-type-card,.industry-process-step,.industry-info,.industry-ai-feature-main,.industry-ai-feature-side{transition:transform .35s var(--of-experience-ease),box-shadow .35s var(--of-experience-ease),border-color .35s var(--of-experience-ease)}
@media(hover:hover){
 .service:hover,.feature-item:hover,.case-card:hover,.portfolio-card:hover,.team-card:hover,.fiverr-review-card:hover,.platform-card:hover,.industry-type-card:hover,.industry-process-step:hover,.industry-info:hover,.industry-ai-feature-main:hover,.industry-ai-feature-side:hover{transform:translateY(-3px);box-shadow:var(--of-experience-shadow)}
 .case-card img,.portfolio-card img,.team-card img,.image-duo img,.industry-type-card img,.industry-ai-feature-main img,.industry-ai-feature-side img{transition:transform .75s var(--of-experience-ease),filter .75s var(--of-experience-ease)}
 .case-card:hover img,.portfolio-card:hover img,.team-card:hover img,.image-duo img:hover,.industry-type-card:hover img,.industry-ai-feature-main:hover img,.industry-ai-feature-side:hover img{transform:scale(1.025)}
}
/* Editorial page framing */
.pagehero,.services-hero,.hero{isolation:isolate}
.pagehero,.services-hero{position:relative}
.pagehero:after,.services-hero:after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 90% 5%,rgba(211,255,55,.10),transparent 42%);opacity:.7}
.section-head h2,.pagehero h1,.services-hero h1,.hero h1{text-wrap:balance}
.cta-band,.cta-band .cta-grid{transition:background-color .35s ease}
.btn,.navcta,.services-text-link{transition:transform .25s var(--of-experience-ease),background-color .25s ease,color .25s ease,border-color .25s ease}
@media(hover:hover){.btn:hover,.navcta:hover{transform:translateY(-2px)}}
/* Platform pages: give existing media a deliberate vertical-storytelling treatment. */
body.of-page-youtube .pagehero,body.of-page-instagram .pagehero,body.of-page-tiktok .pagehero{overflow:hidden}
body.of-page-youtube .two-col img,body.of-page-instagram .two-col img,body.of-page-tiktok .two-col img{border-radius:16px}
body.of-page-instagram .image-duo img,body.of-page-tiktok .image-duo img{border-radius:14px}
body.of-page-youtube .section,body.of-page-instagram .section,body.of-page-tiktok .section{scroll-margin-top:90px}
/* About: storytelling imagery stays editorial and calm. */
body.of-page-about .image-duo img{border-radius:16px;box-shadow:0 16px 42px rgba(20,20,16,.08)}
/* Portfolio and reviews: clear project surfaces, restrained movement. */
body.of-page-projects .portfolio-card,body.of-page-case-studies .case-card{overflow:hidden}
body.of-page-reviews .fiverr-review-card{transform-origin:center}
/* Contact and FAQ prioritize usability over decorative motion. */
body.of-page-contact .contact-form,body.of-page-contact .contact-grid,body.of-page-faq .faq-list{scroll-margin-top:100px}
body.of-page-contact input,body.of-page-contact textarea,body.of-page-contact select{transition:border-color .2s ease,box-shadow .2s ease}
body.of-page-contact input:focus-visible,body.of-page-contact textarea:focus-visible,body.of-page-contact select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(207,246,52,.26)}
@media(max-width:700px){html{scroll-padding-top:76px}.of-experience-ready [data-of-reveal]{transform:translate3d(0,12px,0)}.of-experience-ready [data-of-reveal="left"],.of-experience-ready [data-of-reveal="right"]{transform:translate3d(0,12px,0)}.pagehero:after,.services-hero:after{opacity:.35}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}