/* FANBASE hero: faithful HTML/CSS integration of Shadcn Space Agency Hero 01.
   Preserves this site's static architecture and existing links. */
/* Framework component's header pattern */
.topline{display:none!important}
.site-header{z-index:60;background:rgba(255,255,255,.94);border-bottom:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .3s}
.site-header .nav-shell{min-height:80px;height:80px;max-width:1160px;justify-content:space-between;gap:20px;transition:height .35s}
.site-header .brand{width:160px;margin-right:auto}
.site-header .brand img{width:160px;height:75px;object-fit:contain;mix-blend-mode:normal}
.site-header .nav-desktop{margin-left:0;display:flex;align-items:center;gap:0;border-radius:100px;padding:4px;background:#f3f5f5;flex:none}
.site-header .nav-desktop a{padding:10px 13px;border-radius:30px;color:#50616e;font-size:12px;font-weight:650;line-height:1.15;transition:background .2s,color .2s,box-shadow .2s}
.site-header .nav-desktop a:first-child,.site-header .nav-desktop a:hover{background:#fff;color:#112b3d;box-shadow:0 1px 4px rgba(17,41,59,.065)}
.site-header .nav-cta{background:#112638;color:#fff;min-height:43px;padding:5px 5px 5px 18px;gap:15px;font-size:12px;font-weight:750;border-radius:100px}
.site-header .nav-cta .icon{display:grid;place-items:center;box-sizing:content-box;width:17px;height:17px;padding:9px;border-radius:50%;background:#fff;color:#132638;transition:transform .3s}
.site-header .nav-cta:hover .icon{transform:rotate(45deg)}
.site-header.is-scrolled .nav-shell{height:74px;min-height:74px}
.site-header.is-scrolled{background:rgba(255,255,255,.88);box-shadow:0 12px 30px rgba(18,51,72,.035)}
/* Template's centered hero / soft gradients */
.hero.agency-hero{isolation:isolate;min-height:500px;display:flex;align-items:center;justify-content:center;padding:76px 0 64px;background:linear-gradient(115deg,#f8fcff 0%,#fff 48%,#fffaf3 100%);overflow:hidden}
.agency-hero-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.agency-ambient-glow{position:absolute;border-radius:50%;display:block;filter:blur(65px);opacity:.55;transform:translateZ(0)}
.agency-glow-blue{width:min(61vw,800px);height:310px;left:-15%;top:17%;background:#d7f2ff}
.agency-glow-cream{width:min(52vw,760px);height:340px;right:-15%;bottom:5%;background:#fff0d8}
.agency-glow-pointer{width:290px;height:290px;left:calc(var(--agency-pointer-x,50%) - 145px);top:calc(var(--agency-pointer-y,50%) - 145px);background:#c3eafe;opacity:.22;transition:opacity .25s;filter:blur(82px)}
.agency-hero-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:1120px;margin:0 auto}
.hero.agency-hero h1{font-size:clamp(49px,6.6vw,94px);line-height:1.09;letter-spacing:-.072em;font-weight:750;max-width:1050px;color:#142436;text-align:center;margin:0 0 24px}
.hero.agency-hero h1 em{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.04em;white-space:normal;color:#142436}
.agency-hero-description{max-width:670px;font-size:15px;line-height:1.75;color:#60707c;margin:0 auto 35px}
.agency-hero-action-row{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.agency-hero-primary{height:49px;display:inline-flex;gap:28px;align-items:center;justify-content:space-between;background:#132739;color:#fff;border-radius:100px;padding:5px 5px 5px 22px;font-size:13px;letter-spacing:-.01em;font-weight:750;white-space:nowrap;transition:background .2s,transform .25s}
.agency-hero-primary:hover{background:#079bdf;transform:translateY(-2px)}
.agency-hero-cta-icon{background:#fff;color:#172c3f;border-radius:100px;width:39px;height:39px;display:grid;place-items:center;transition:transform .3s}
.agency-hero-primary:hover .agency-hero-cta-icon{transform:rotate(45deg)}
.agency-hero-cta-icon .icon{width:16px;height:16px}
.agency-hero-people{display:flex;align-items:center;gap:18px}
.agency-hero-avatars{display:flex;align-items:center;padding-left:8px}
.agency-hero-avatars img{width:41px;height:41px;object-fit:cover;object-position:center 24%;border:3px solid #fff;border-radius:50%;margin-left:-8px;box-shadow:0 3px 7px rgba(0,0,0,.11)}
.agency-hero-people-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0;color:#5b6875;font-size:12px;line-height:1.65}
.agency-hero-stars{font-size:14px;letter-spacing:.16em;color:#079bdf;line-height:1.35}
.agency-hero-stars i{font-style:normal;color:#eca53a}
.agency-hero-inner>*{animation:agency-hero-in .85s cubic-bezier(.2,.72,.2,1) both}
.agency-hero-inner h1{animation-delay:.06s}
.agency-hero-inner .agency-hero-description{animation-delay:.18s}
.agency-hero-inner .agency-hero-action-row{animation-delay:.29s}
@keyframes agency-hero-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
/* Agency Hero 01 brand marquee adapted to actual FANBASE capabilities */
.agency-brand-slider{background:#fff;padding:15px 0 37px;overflow:hidden}
.agency-brand-heading{display:flex;gap:18px;align-items:center;justify-content:center;padding:13px 0 24px}
.agency-brand-heading span{width:120px;max-width:17vw;height:1px;background:linear-gradient(to right,transparent,#c9d3d9)}
.agency-brand-heading span:last-child{transform:rotate(180deg)}
.agency-brand-heading p{font-size:13px;color:#80909a;line-height:1.4;text-align:center;margin:0;font-weight:500}
.agency-brand-window{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.agency-brand-track{display:flex;width:max-content;animation:agency-brand-scroll 34s linear infinite}

.agency-brand-set{display:flex;align-items:center;gap:56px;padding-right:56px;flex:none}
.agency-brand-set span{display:flex;align-items:center;gap:11px;color:#425665;white-space:nowrap;font-size:16px;font-weight:800;letter-spacing:-.035em}
.agency-brand-set .icon{width:27px;height:27px;color:#079bdf;stroke-width:1.7}
@keyframes agency-brand-scroll{to{transform:translateX(-50%)}}
@media(max-width:940px){
.site-header .nav-shell{min-height:75px;height:75px}
.site-header .nav-desktop{display:none}
.site-header .nav-cta{margin-left:auto}
.site-header .brand{margin-right:0}
.site-header .menu-button{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;background:#f2f6f7;border:1px solid #dbe6ec;border-radius:50%;color:#173246;padding:11px}
.site-header .mobile-menu:not([hidden]){display:block}
.hero.agency-hero{min-height:460px}
}
@media(max-width:640px){
.site-header .nav-shell{height:69px;min-height:69px;gap:10px}
.site-header .brand,.site-header .brand img{width:126px}
.site-header .brand img{height:64px}
.site-header .nav-cta{display:none}
.hero.agency-hero{padding:80px 0 72px;min-height:480px}
.hero.agency-hero h1{font-size:clamp(47px,11.3vw,67px);line-height:1.06;letter-spacing:-.064em;margin-bottom:18px}
.agency-hero-description{font-size:13px;line-height:1.75;margin-bottom:29px;max-width:390px}
.agency-hero-action-row{flex-direction:column;gap:22px}
.agency-hero-people{gap:14px}
.agency-hero-ambient .agency-ambient-glow{opacity:.38}
.agency-brand-slider{padding:9px 0 28px}
.agency-brand-heading{padding-bottom:20px;gap:10px}
.agency-brand-heading p{font-size:11px;max-width:240px}
.agency-brand-set{gap:37px;padding-right:37px}
.agency-brand-set span{font-size:14px}
.agency-brand-set .icon{width:23px;height:23px}
}
@media(max-width:365px){
.hero.agency-hero h1{font-size:43px}
.agency-hero-description{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
.agency-hero-inner>*{animation:none!important}
.agency-brand-track{animation:none!important}
.agency-glow-pointer{display:none}
}


/* Standalone full-viewport hero. Never contain the case studies here. */
.hero.agency-hero{min-height:calc(100svh - 80px);min-height:calc(100dvh - 80px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(45px,7vh,100px) 0;gap:0;}
.hero.agency-hero h1{font-size:clamp(49px,6.6vw,94px)}
@media(max-width:940px){.hero.agency-hero{min-height:calc(100svh - 75px);min-height:calc(100dvh - 75px)}}
@media(max-width:640px){.hero.agency-hero{min-height:calc(100svh - 69px);min-height:calc(100dvh - 69px);padding:62px 0}.hero.agency-hero h1{font-size:clamp(44px,11.3vw,67px)}}

/* Oct 17: original capabilities marquee belongs INSIDE the viewport hero.
   It is anchored to the bottom and travels slowly left in a truly seamless loop. */
.hero.agency-hero{position:relative;box-sizing:border-box;min-height:calc(100svh - 80px);min-height:calc(100dvh - 80px);padding:clamp(32px,6vh,85px) 0 clamp(150px,18vh,195px);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero.agency-hero>.agency-brand-slider{position:absolute;left:0;right:0;bottom:0;z-index:3;width:100%;box-sizing:border-box;background:rgba(255,255,255,.7);border-top:1px solid rgba(17,48,69,.07);padding:17px 0 23px;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero.agency-hero .agency-brand-heading{position:relative;justify-content:center;padding:2px 0 17px;gap:14px}
.hero.agency-hero .agency-brand-heading p{flex:none;margin:0;color:#687f8f;line-height:1.5}
.hero.agency-hero .agency-brand-heading>span{max-width:90px}
.hero.agency-hero .agency-brand-window{width:100%;overflow:hidden}
.hero.agency-hero .agency-brand-track{display:flex;width:max-content;animation:agency-brand-scroll 64s linear infinite!important;animation-duration:64s!important;animation-iteration-count:infinite!important;will-change:transform}
.hero.agency-hero .agency-brand-set{gap:56px;padding-right:56px}


@media(max-width:940px){
 .hero.agency-hero{min-height:calc(100svh - 75px);min-height:calc(100dvh - 75px);padding-bottom:157px}
 .hero.agency-hero>.agency-brand-slider{padding:13px 0 19px}
 .hero.agency-hero .agency-brand-set{gap:42px;padding-right:42px}
}
@media(max-width:640px){
 .hero.agency-hero{min-height:calc(100svh - 69px);min-height:calc(100dvh - 69px);padding:45px 0 147px}
 .hero.agency-hero>.agency-brand-slider{padding:13px 0 18px}
 .hero.agency-hero .agency-brand-heading{padding:2px 0 17px}
 .hero.agency-hero .agency-brand-heading p{font-size:10px;max-width:220px;line-height:1.4}
 .hero.agency-hero .agency-brand-heading>span{max-width:28px}
 .hero.agency-hero .agency-brand-set{gap:35px;padding-right:35px}
 .hero.agency-hero .agency-brand-set span{font-size:14px}
 .hero.agency-hero .agency-brand-track{animation-duration:64s!important}
}
@media(prefers-reduced-motion:reduce){
 /* Preserve the slow service ticker motion under the site's global animation override. */
 .hero.agency-hero .agency-brand-track{animation:agency-brand-scroll 64s linear infinite!important}
}