.st-d-title{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1;letter-spacing:0em;font-size:70px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} .st-d-heading{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1.2;letter-spacing:0em;font-size:40px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} .st-d-subheading{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1.6;letter-spacing:0.1em;font-size:14px;text-align:left;font-family:'Montserrat';font-weight:400;font-style:normal} .st-d-paragraph{color:rgba(250,250,250,1);line-height:1.4;letter-spacing:0em;font-size:18px;text-align:left;font-family:'Montserrat';font-weight:400;font-style:normal} .st-primary{border-style:solid;padding:0px 0px 0px 0px;border-width:0px;border-color:rgba(33,33,33,1);background-color:rgba(0,0,0,1);background-image:none;transition-duration:0.5s} .st-primary span{color:rgba(250,250,250,1);font-family:'Lexend Peta';font-weight:400;font-style:normal;font-size:12px;text-align:center;text-transform:uppercase;letter-spacing:0.05em;line-height:1.8;transition-duration:0.5s} .st-secondary{border-style:solid;padding:0px 0px 0px 0px;border-width:1px;border-color:rgba(250,250,250,1);background-color:rgba(250,250,250,0);background-image:none;transition-duration:0.5s} .st-secondary span{color:rgba(250,250,250,1);font-family:'Lexend Peta';font-weight:400;font-style:normal;font-size:12px;text-align:center;text-transform:uppercase;letter-spacing:0.05em;line-height:1.8;transition-duration:0.5s} @media(max-width:767px){.st-m-title{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1;letter-spacing:0em;font-size:45px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} .st-m-heading{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1.2;letter-spacing:0em;font-size:28px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} .st-m-subheading{color:rgba(250,250,250,1);text-transform:uppercase;line-height:1.6;letter-spacing:0.1em;font-size:14px;text-align:left;font-family:'Montserrat';font-weight:400;font-style:normal} .st-m-paragraph{color:rgba(250,250,250,1);line-height:1.4;letter-spacing:0em;font-size:16px;text-align:left;font-family:'Montserrat';font-weight:400;font-style:normal} .st-primary span{color:rgba(250,250,250,1);font-family:'Lexend Peta';font-weight:400;font-style:normal;font-size:11px;text-align:center;text-transform:uppercase;letter-spacing:0.05em;line-height:1.8} .st-secondary span{color:rgba(250,250,250,1);font-family:'Lexend Peta';font-weight:400;font-style:normal;font-size:11px;text-align:center;text-transform:uppercase;letter-spacing:0.05em;line-height:1.8}} .sec-menu{--h:1.0px;--mh:1.0px;z-index:200;background-color:rgba(0,0,0,0)} .e-menu_0{left:calc(1132px + var(--g));top:0px;width:68px;height:63px} @media(max-width:767px){.e-menu_0{left:262px;top:6px;width:50px;height:50px}} .e-menu_0 svg{fill:rgba(250,250,250,1)} @media(max-width:767px){.e-menu_0 svg{fill:rgba(250,250,250,1)}} .e-menu_view-1_0{left:calc(0px - var(--g));top:0px;width:calc(1200px + 2 * var(--g));height:68px} @media(max-width:767px){.e-menu_view-1_0{left:48px;top:0px;width:224px;height:0.7px;display:none}} .e-menu_view-1_0>.shape,.e-menu_view-1_0>.ico{background-color:rgba(0,0,0,1)} @media(max-width:767px){.e-menu_view-1_0>.shape,.e-menu_view-1_0>.ico{background-color:rgba(0,0,0,1)}} .e-menu_view-1_1{left:600px;top:24px;width:1px;height:1px} @media(max-width:767px){.e-menu_view-1_1{left:160px;top:0px;width:1px;height:1px}} .e-menu_view-1_1 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-menu_view-1_2{left:calc(1015px + var(--g));top:24px;width:89px;height:19px} @media(max-width:767px){.e-menu_view-1_2{left:110px;top:169px;width:100px;height:20px;display:none}} .t-menu_view-1_2{color:rgba(255,255,255,1);line-height:1.4;letter-spacing:0.1em;font-size:12px;text-align:center} @media(max-width:767px){.t-menu_view-1_2{color:rgba(255,255,255,1);line-height:1.6;letter-spacing:0.2em;font-size:14px;text-align:left}} .e-menu_view-1_3{left:calc(898px + var(--g));top:24px;width:98px;height:19px} @media(max-width:767px){.e-menu_view-1_3{left:110px;top:135px;width:100px;height:24px;display:none}} .t-menu_view-1_3{color:rgba(255,255,255,1);line-height:1.4;letter-spacing:0.1em;font-size:12px;text-align:center} @media(max-width:767px){.t-menu_view-1_3{color:rgba(255,255,255,1);line-height:1.6;letter-spacing:0.2em;font-size:14px;text-align:left}} .e-menu_view-1_4{left:calc(787px + var(--g));top:24px;width:92px;height:19px} @media(max-width:767px){.e-menu_view-1_4{left:105px;top:106px;width:111px;height:19px;display:none}} .t-menu_view-1_4{color:rgba(255,255,255,1);line-height:1.4;letter-spacing:0.1em;font-size:12px;text-align:center} @media(max-width:767px){.t-menu_view-1_4{color:rgba(255,255,255,1);line-height:1.6;letter-spacing:0.2em;font-size:14px;text-align:center}} .e-menu_view-1_5{left:calc(-23px - var(--g));top:-25px;width:208px;height:126px} @media(max-width:767px){.e-menu_view-1_5{left:-5px;top:0px;width:110px;height:70px;display:none}} .e-menu_view-1_5 .ph{background-repeat:no-repeat;background-size:contain;background-position:50%;border-radius:inherit} .e-menu_view-1_6{left:calc(1149px + var(--g));top:17px;width:35px;height:32px} @media(max-width:767px){.e-menu_view-1_6{left:262px;top:6px;width:50px;height:50px}} .e-menu_view-1_6 svg{fill:rgba(250,250,250,1)} @media(max-width:767px){.e-menu_view-1_6 svg{fill:rgba(250,250,250,1)}} .sec-hero{--h:995.0px;--mh:659.0px;background-color:rgba(0,0,0,1)} .sec-hero>.bgm{background-image:url('../img/d1cb4e-picture_for_second_page_main_top_background_1.jpg');background-size:cover;background-position:center top;background-attachment:fixed;opacity:0.13} @media(max-width:767px){.sec-hero>.bgm{background-image:url('../img/027125-picture_for_second_page_main.jpg');background-size:cover;background-position:center top;background-attachment:scroll;opacity:0.13}} .e-hero_0{left:338px;top:829px;width:523px;height:45px} @media(max-width:767px){.e-hero_0{left:20px;top:496px;width:280px;height:33px}} .t-hero_0{font-size:22px;text-align:center} @media(max-width:767px){.t-hero_0{font-size:14px;text-align:center}} .e-hero_1{left:403px;top:177px;width:392px;height:574px} @media(max-width:767px){.e-hero_1{left:49px;top:194px;width:224px;height:232px}} .e-hero_1 .ph{background-repeat:no-repeat;background-size:cover;background-position:60% 60%;border-radius:inherit} .e-hero_2{left:403px;top:530px;width:392px;height:221px} @media(max-width:767px){.e-hero_2{left:49px;top:340px;width:224px;height:86px}} .e-hero_2>.shape,.e-hero_2>.ico{background-color:transparent;background-origin:border-box;background-image:linear-gradient(0deg, rgba(44,155,246,1) 0%, rgba(0,0,0,0) 100%)} @media(max-width:767px){.e-hero_2>.shape,.e-hero_2>.ico{background-color:transparent;background-origin:border-box;background-image:linear-gradient(0deg, rgba(44,155,246,1) 0%, rgba(0,0,0,0) 100%)}} .e-hero_3{left:121px;top:664px;width:958px;height:141px} @media(max-width:767px){.e-hero_3{left:22px;top:396px;width:277px;height:85px}} .t-hero_3{line-height:1.1;font-size:60px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-hero_3{line-height:1;font-size:25px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-hero_4{left:calc(75px - var(--g));top:7px;width:170px;height:128px} @media(max-width:767px){.e-hero_4{left:13px;top:16px;width:94px;height:66px}} .e-hero_4 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-hero_5{left:-120px;top:120px;width:1440px;height:114px} @media(max-width:767px){.e-hero_5{left:6px;top:91px;width:309px;height:103px}} .sec-hidden-video-break{--h:744.0px;--mh:200.0px;background-color:rgba(250,250,250,1)} .sec-hidden-video-break>.bgm{opacity:1} @media(max-width:767px){.sec-hidden-video-break>.bgm{opacity:1}} .sec-faq{--h:864.0px;--mh:939.0px;background-color:rgba(255,255,255,1)} .e-faq_0{left:697px;top:402px;width:460px;height:223px} @media(max-width:767px){.e-faq_0{left:20px;top:307px;width:280px;height:258px}} .t-faq_0{color:rgba(0,0,0,1);font-size:18px;overflow:hidden} @media(max-width:767px){.t-faq_0{color:rgba(0,0,0,1);font-size:14px;overflow:hidden}} .e-faq_1{left:697px;top:339px;width:491px;height:39px} @media(max-width:767px){.e-faq_1{left:20px;top:203px;width:280px;height:95px}} .t-faq_1{color:rgba(0,0,0,1);line-height:1.4;font-size:15px} @media(max-width:767px){.t-faq_1{color:rgba(0,0,0,1);line-height:1.6;font-size:14px}} /* HOVER IS GATED ON A HOVER-CAPABLE POINTER. These per-element fades (the package-card photo dropping to 0.2 to reveal the card, the accessory cards, the FAQ rows) are the engine's own `.d`/`.m` hover rules, and live ships them at BOTH breakpoints -- so on a phone they apply to :hover, which a touch browser latches on tap and does not release until you tap something else. Measured on an iPhone 14 Pro context: tapping a package card leaves its photo stuck at opacity 0.2. `@media(hover:hover)` asks the POINTER rather than the width, so a mouse sees exactly what it saw before and a finger never triggers a state it cannot leave. Wrapped in place, one rule per line, by the same pass that generates them -- see _tools/gen2.py. */ @media(hover:hover){.e-faq_1:hover{opacity:0.6;transition-duration:0.5s;transition-property:opacity}} .e-faq_2{left:697px;top:101px;width:548px;height:220px} @media(max-width:767px){.e-faq_2{left:20px;top:43px;width:280px;height:156px}} .t-faq_2{color:rgba(44,155,246,1);line-height:1;font-size:70px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-faq_2{color:rgba(44,155,246,1);line-height:1.2;font-size:40px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal}} .e-faq_3{left:calc(0px - var(--g));top:38px;width:calc(630px + var(--g));height:789px} @media(max-width:767px){.e-faq_3{left:0px;top:583px;width:320px;height:202px}} /* This gallery is Showit's widget, the same wiring as the home page's contact-cta_2 (see home.css there for why .ssg-slider sits in the selector: the widget injects its own stylesheet at runtime and wins on source order at equal specificity). Live init_data for faq_3: {"aa":1.75,"dots":true} on BOTH layouts, cells at scale(0.9) desktop / scale(0.8) mobile with the dots hidden by the engine. It was emitted here as a 135s marquee with every cell shrunk uniformly, so nothing was ever the featured shot; live advances one cell every 1.75s and holds. */ .e-faq_3 .ssg-slider .ssg-slider-cell{margin-right:0px;transform:scale(0.9);-webkit-transform:scale(0.9)} @media(max-width:767px){.e-faq_3 .ssg-slider .ssg-slider-cell{margin-right:0px;transform:scale(0.8);-webkit-transform:scale(0.8)}} .e-faq_3 .flickity-page-dots{display:none} .e-faq_4{left:697px;top:683px;width:255px;height:57px} @media(max-width:767px){.e-faq_4{left:40px;top:824px;width:240px;height:54px}} .e-faq_4 .btn{background-color:rgba(44,155,246,1);background-image:none} @media(max-width:767px){.e-faq_4 .btn{background-color:rgba(44,155,246,1);background-image:none}} .sec-packages{--h:1099.0px;--mh:2260.0px;background-color:rgba(0,0,0,1)} .sec-packages>.bgm{background-image:url('../img/d4a812-img_2360_original.jpg');background-size:cover;background-position:center top;background-attachment:scroll;opacity:0.3} @media(max-width:767px){.sec-packages>.bgm{background-image:url('../img/035455-img_3457.jpg');background-size:cover;background-position:center top;background-attachment:scroll;opacity:0.3}} .sec-testimonial{--h:963.0px;--mh:616.0px;background-color:rgba(0,0,0,1)} .sec-testimonial>.bgm{background-image:url('../img/d4a812-img_2360_original.jpg');background-size:cover;background-position:center;opacity:0.4} @media(max-width:767px){.sec-testimonial>.bgm{background-image:url('../img/c22762-showit-website-template-105_jaymk0kx.jpg');background-size:cover;background-position:center top;background-attachment:scroll;opacity:0.4}} .e-testimonial_0{left:calc(0px - var(--g));top:407px;width:calc(1200px + 2 * var(--g));height:568px} @media(max-width:767px){.e-testimonial_0{left:0px;top:0px;width:320px;height:813px}} .e-testimonial_0{transform:rotate(180deg)} .e-testimonial_0>.shape,.e-testimonial_0>.ico{background-color:transparent;opacity:1;background-origin:border-box;background-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(44,155,246,1) 100%)} @media(max-width:767px){.e-testimonial_0>.shape,.e-testimonial_0>.ico{background-color:transparent;opacity:1;background-origin:border-box;background-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(44,155,246,1) 100%)}} .e-testimonial_1{left:276px;top:306px;width:635px;height:101px} @media(max-width:767px){.e-testimonial_1{left:17px;top:108px;width:287px;height:109px}} .t-testimonial_1{text-transform:uppercase;line-height:1;font-size:60px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-testimonial_1{text-transform:uppercase;line-height:1;font-size:36px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-testimonial_2{left:468px;top:482px;width:264px;height:56px} @media(max-width:767px){.e-testimonial_2{left:71px;top:249px;width:179px;height:38px}} .e-testimonial_2 .btn span{font-size:12px} @media(max-width:767px){.e-testimonial_2 .btn span{font-size:11px}} .sec-social-2{--h:757.0px;--mh:388.0px;z-index:1;background-image:linear-gradient(0deg, rgba(8,9,11,1) 0%, rgba(44,155,246,1) 100%)} .e-social-2_8{left:562px;top:58px;width:466px;height:20px} @media(max-width:767px){.e-social-2_8{left:52px;top:206px;width:228px;height:40px;display:none}} .t-social-2_8{color:rgba(255,255,255,1);text-transform:uppercase;line-height:1.2;letter-spacing:0.1em;font-size:16px;text-align:left} @media(max-width:767px){.t-social-2_8{color:rgba(255,255,255,1);text-transform:uppercase;line-height:1.4;letter-spacing:0.1em;font-size:12px;text-align:left}} .e-social-2_9{left:562px;top:93px;width:428px;height:1px} @media(max-width:767px){.e-social-2_9{left:69px;top:318px;width:183px;height:1px;display:none}} .e-social-2_9>.shape,.e-social-2_9>.ico{background-color:rgba(255,255,255,1)} @media(max-width:767px){.e-social-2_9>.shape,.e-social-2_9>.ico{background-color:rgba(255,255,255,1)}} .e-social-2_10{left:562px;top:129px;width:611px;height:284px} @media(max-width:767px){.e-social-2_10{left:196px;top:117px;width:123px;height:58px;display:none}} .t-social-2_10{color:rgba(255,255,255,1);text-transform:uppercase;line-height:1;font-size:70px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-social-2_10{color:rgba(255,255,255,1);text-transform:uppercase;line-height:1;font-size:21px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal}} .e-social-2_11{left:623px;top:99px;width:479px;height:71px} @media(max-width:767px){.e-social-2_11{left:17px;top:114px;width:287px;height:58px}} .t-social-2_11{color:rgba(255,255,255,1);text-transform:uppercase;line-height:0.8;font-size:70px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-social-2_11{color:rgba(255,255,255,1);text-transform:uppercase;line-height:1;font-size:24px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-social-2_12{left:623px;top:440px;width:440px;height:1px} @media(max-width:767px){.e-social-2_12{left:21px;top:198px;width:280px;height:1px}} .e-social-2_12>.shape,.e-social-2_12>.ico{background-color:rgba(255,255,255,1)} @media(max-width:767px){.e-social-2_12>.shape,.e-social-2_12>.ico{background-color:rgba(255,255,255,1)}} .e-social-2_13{left:617px;top:455px;width:55px;height:53px} @media(max-width:767px){.e-social-2_13{left:140px;top:210px;width:34px;height:30px}} .e-social-2_13 .ph{background-repeat:no-repeat;background-size:contain;background-position:50%;border-radius:inherit} .e-social-2_14{left:562px;top:455px;width:44px;height:53px} @media(max-width:767px){.e-social-2_14{left:109px;top:212px;width:24px;height:26px}} .e-social-2_14 .ph{background-repeat:no-repeat;background-position:50%;background-size:contain;border-radius:inherit} .e-social-2_15{left:676px;top:453px;width:57px;height:53px} @media(max-width:767px){.e-social-2_15{left:177px;top:210px;width:34px;height:30px}} .e-social-2_15 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-social-2_16{left:243px;top:-159px;width:140px;height:42px} @media(max-width:767px){.e-social-2_16{left:116px;top:-224px;width:89px;height:13px}} .e-social-2_16 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-social-2_17{left:-135px;top:-282px;width:875px;height:923px} @media(max-width:767px){.e-social-2_17{left:-30px;top:-270px;width:381px;height:399px}} .e-social-2_17 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-social-2_18{left:137px;top:-177px;width:330px;height:710px;border-radius:18px} @media(max-width:767px){.e-social-2_18{left:91px;top:-222px;width:139px;height:303px;border-radius:10px}} .e-social-2_18 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-social-2_18{overflow:hidden} @media(max-width:767px){.e-social-2_18{overflow:hidden}} .e-social-2_19{left:137px;top:-177px;width:330px;height:710px;border-radius:20px} @media(max-width:767px){.e-social-2_19{left:88px;top:-225px;width:146px;height:315px;border-radius:15px}} .e-social-2_19{overflow:hidden} @media(max-width:767px){.e-social-2_19{overflow:hidden}} .e-social-2_20{left:1016px;top:351px;width:65px;height:56px} @media(max-width:767px){.e-social-2_20{left:254px;top:161px;width:37px;height:30px}} .e-social-2_20 svg{fill:rgba(250,250,250,1)} @media(max-width:767px){.e-social-2_20 svg{fill:rgba(250,250,250,1)}} .sec-mobile-navigation{--h:787.0px;--mh:619.0px;z-index:999999999;background-color:rgba(0,0,0,1)} .e-mobile-navigation_0{left:360px;top:236px;width:480px;height:314.8px} @media(max-width:767px){.e-mobile-navigation_0{left:0px;top:-113px;width:320px;height:846px}} .e-mobile-navigation_0>.shape,.e-mobile-navigation_0>.ico{background-color:rgba(0,0,0,1)} @media(max-width:767px){.e-mobile-navigation_0>.shape,.e-mobile-navigation_0>.ico{background-color:rgba(0,0,0,1)}} .e-mobile-navigation_3{left:calc(728px + var(--g));top:163px;width:211px;height:346px} @media(max-width:767px){.e-mobile-navigation_3{left:0px;top:254px;width:320px;height:365px}} .e-mobile-navigation_3 .ph{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border-radius:inherit} .e-mobile-navigation_6{left:535px;top:328px;width:131px;height:20px} @media(max-width:767px){.e-mobile-navigation_6{left:20px;top:168px;width:280px;height:35px}} .t-mobile-navigation_6{color:rgba(255,255,255,1);text-transform:uppercase;font-size:15px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-mobile-navigation_6{color:rgba(255,255,255,1);text-transform:uppercase;font-size:21px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-mobile-navigation_7{left:361px;top:370px;width:131px;height:20px} @media(max-width:767px){.e-mobile-navigation_7{left:20px;top:129px;width:280px;height:32px}} .t-mobile-navigation_7{color:rgba(255,255,255,1);text-transform:uppercase;font-size:15px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-mobile-navigation_7{color:rgba(255,255,255,1);text-transform:uppercase;font-size:21px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-mobile-navigation_8{left:361px;top:328px;width:131px;height:20px} @media(max-width:767px){.e-mobile-navigation_8{left:20px;top:89px;width:280px;height:30px}} .t-mobile-navigation_8{text-transform:uppercase;font-size:15px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-mobile-navigation_8{text-transform:uppercase;font-size:21px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-mobile-navigation_9{left:calc(1127px + var(--g));top:29px;width:48px;height:33px} @media(max-width:767px){.e-mobile-navigation_9{left:279px;top:16px;width:27px;height:31px}} .e-mobile-navigation_9 svg{fill:rgba(44,155,246,1)} @media(max-width:767px){.e-mobile-navigation_9 svg{fill:rgba(44,155,246,1)}} .sec-footer-2{--h:98.0px;--mh:262.0px;z-index:51;background-color:rgba(255,255,255,1)} .e-footer-2_0{left:calc(-24px - var(--g));top:-14px;width:217px;height:138px} @media(max-width:767px){.e-footer-2_0{left:80px;top:26px;width:150px;height:81px}} .e-footer-2_0 .ph{background-repeat:no-repeat;background-size:contain;background-position:50%;border-radius:inherit} @media(max-width:767px){.e-footer-2_0 .ph{background-size:cover}} .e-footer-2_1{left:calc(-60px - var(--g));top:909px;width:22px;height:11px} @media(max-width:767px){.e-footer-2_1{left:76px;top:237px;width:169px;height:14px}} .t-footer-2_1{color:rgba(255,255,255,1);text-transform:none;line-height:1.1;letter-spacing:-0.02em;font-size:2px} @media(max-width:767px){.t-footer-2_1{color:rgba(255,255,255,1);text-transform:none;line-height:1.1;letter-spacing:-0.02em;font-size:1px}} .e-footer-2_2{left:calc(909px + var(--g));top:40px;width:67px;height:20px} @media(max-width:767px){.e-footer-2_2{left:160px;top:112px;width:140px;height:19px}} .t-footer-2_2{color:rgba(0,0,0,1);text-transform:uppercase;font-size:18px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-footer-2_2{color:rgba(0,0,0,1);text-transform:uppercase;font-size:23px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-footer-2_3{left:calc(816px + var(--g));top:40px;width:79px;height:20px} @media(max-width:767px){.e-footer-2_3{left:20px;top:155px;width:141px;height:19px}} .t-footer-2_3{color:rgba(0,0,0,1);text-transform:uppercase;font-size:18px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-footer-2_3{color:rgba(0,0,0,1);text-transform:uppercase;font-size:23px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-footer-2_4{left:calc(742px + var(--g));top:40px;width:66px;height:20px} @media(max-width:767px){.e-footer-2_4{left:20px;top:112px;width:141px;height:19px}} .t-footer-2_4{color:rgba(0,0,0,1);text-transform:uppercase;font-size:18px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-footer-2_4{color:rgba(0,0,0,1);text-transform:uppercase;font-size:23px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-footer-2_5{left:calc(0px - var(--g));top:9px;width:calc(1195px + 2 * var(--g));height:1px} @media(max-width:767px){.e-footer-2_5{left:0px;top:11px;width:320px;height:1px}} .e-footer-2_5>.shape,.e-footer-2_5>.ico{background-color:rgba(34,34,34,1)} @media(max-width:767px){.e-footer-2_5>.shape,.e-footer-2_5>.ico{background-color:rgba(34,34,34,1)}} .e-footer-2_6{left:calc(1144px + var(--g));top:54px;width:89px;height:1px} @media(max-width:767px){.e-footer-2_6{left:0px;top:250px;width:321px;height:1px}} .e-footer-2_6{transform:rotate(90deg)} @media(max-width:767px){.e-footer-2_6{transform:none}} .e-footer-2_6>.shape,.e-footer-2_6>.ico{background-color:rgba(34,34,34,1)} @media(max-width:767px){.e-footer-2_6>.shape,.e-footer-2_6>.ico{background-color:rgba(34,34,34,1)}} .e-footer-2_7{left:calc(948px + var(--g));top:54px;width:89px;height:1px} @media(max-width:767px){.e-footer-2_7{left:0px;top:204px;width:321px;height:1px}} .e-footer-2_7{transform:rotate(90deg)} @media(max-width:767px){.e-footer-2_7{transform:none}} .e-footer-2_7>.shape,.e-footer-2_7>.ico{background-color:rgba(34,34,34,1)} @media(max-width:767px){.e-footer-2_7>.shape,.e-footer-2_7>.ico{background-color:rgba(34,34,34,1)}} .e-footer-2_8{left:calc(1040px + var(--g));top:41px;width:116px;height:19px} @media(max-width:767px){.e-footer-2_8{left:160px;top:155px;width:140px;height:22px}} .t-footer-2_8{color:rgba(0,0,0,1);text-transform:uppercase;font-size:18px;text-align:left;font-family:'Anton';font-weight:400;font-style:normal} @media(max-width:767px){.t-footer-2_8{color:rgba(0,0,0,1);text-transform:uppercase;font-size:23px;text-align:center;font-family:'Anton';font-weight:400;font-style:normal}} .e-footer-2_9{left:calc(161px - var(--g));top:55px;width:476px;height:19px} @media(max-width:767px){.e-footer-2_9{left:12px;top:218px;width:314px;height:19px}} .t-footer-2_9{color:rgba(0,0,0,1);font-size:10px} @media(max-width:767px){.t-footer-2_9{color:rgba(0,0,0,1);font-size:9px}} /* Add-ons carousel. All seven add-ons live in ONE row of 354px columns; the window shows three and the track slides exactly one column per arrow press, so the card on the right leaves and a new one arrives instead of all three swapping at once. The window is inset to 76..1124 so a card in the next column is fully clipped and the two arrows (at 11 and 1139) stay outside it. */ transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform} /* THE PHONE MOCKUP MUST NOT SWALLOW THE LINKS IT SITS OVER. e-social-2_16/17/18 are the three decorative pieces of the phone mockup: plain
s holding a background image, no href, no handler, no hover rule. e-social-2_17 is 875x923 and is laid over the sister company's TikTok, Instagram and Facebook icons, so it wins the hit test at the centre of all three and none of them can be clicked. Measured on the live page: the same three links are blocked there in exactly the same way, so this is inherited, not introduced. It is the same defect that killed the testimonial arrows on phones, and it takes the same fix -- see the e-social-2_0 note in home.css. Only these three, not `ty-graphic` in general: some graphics ARE hover targets (the package card photos fade to reveal the card), and pointer-events:none would silently kill those. */ .e-social-2_16,.e-social-2_17,.e-social-2_18{pointer-events:none} /* ---- packages spacing sample: A. Tight, phone type 16px ---- */ /* Type is copied from the shipping build so these samples differ from it in SPACING only. The one deliberate exception is list line-height, which the build sets per item at 1, 1.1, 1.2 or 1.3 to squeeze a wrapped label into a fixed slot; a list has one line-height, so it is unified here. */ .pk-flow{position:relative;background-color:#000;height:auto;padding:72px 0} .pk-flow>.bgm{position:absolute;inset:0} .pk-wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 30px; box-sizing:border-box;pointer-events:auto} .pk-eyebrow{margin:0;color:#fafafa;text-transform:uppercase;line-height:1.6; letter-spacing:.1em;font-size:22px;font-family:'Montserrat',sans-serif;text-align:center} .pk-head{margin:8px 0 0;color:#2c9bf6;text-transform:uppercase;line-height:1.2; font-size:70px;font-family:'Anton',sans-serif;font-weight:400;text-align:center} .pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px; margin-top:52px;align-items:stretch} /* Blue frame with the white panel inset 5px, exactly as the build draws it. */ .pk-card{background:#2c9bf6;border:1px solid #222;padding:5px;box-sizing:border-box} .pk-inner{display:flex;flex-direction:column;height:100%;background:#fafafa; border:1px solid #222;padding:28px;box-sizing:border-box} .pk-photo{margin:0} .pk-photo span{display:block;aspect-ratio:295/216;background-size:cover; background-position:center} .pk-title{margin:22px 0 0;color:#222;text-transform:uppercase;line-height:1.1; font-size:28px;font-family:'Anton',sans-serif;font-weight:400} /* The list carries the whole rhythm: one gap, one line-height, one dot offset. */ .pk-list{list-style:none;margin:16px 0 0;padding:0;display:flex; flex-direction:column;gap:13px} .pk-list li{display:flex;align-items:flex-start;gap:15px;color:#222; font-family:'Montserrat',sans-serif;font-size:16px;line-height:1.4} /* Optical centring: half the difference between the first line box and the dot, so the dot sits ON the line instead of above its cap height. */ .pk-list li::before{content:'';flex:0 0 7px;width:7px;height:7px; border-radius:50%;background:#222;margin-top:calc((1.4em - 7px) / 2)} /* Anchored to the bottom, so all three footers line up however many bullets sit above them. */ .pk-foot{margin-top:auto;padding-top:26px} .pk-rule{height:1px;background:#222} .pk-price{margin:14px 0 0;color:#222;text-transform:uppercase;line-height:1.6; letter-spacing:.1em;font-size:12px;font-family:'Montserrat',sans-serif} .pk-btn{display:flex;align-items:center;justify-content:center;margin-top:16px; height:52px;background:#2c9bf6;text-decoration:none;transition:background .3s} .pk-btn span{color:#fafafa;text-transform:uppercase;letter-spacing:.05em;font-size:12px; line-height:1.8;font-family:'Lexend Peta',sans-serif} .pk-btn:hover{background:#1b86dd} @media(max-width:900px){ .pk-grid{grid-template-columns:1fr;gap:30px} .pk-wrap{padding:0 18px} .pk-inner{padding:24px} .pk-eyebrow{font-size:calc(14px * 1.15)} .pk-head{font-size:calc(32px * 1.15)} .pk-title{font-size:calc(28px * 1.15);text-align:center} .pk-list li{font-size:calc(14px * 1.15);line-height:1.45} .pk-price{font-size:calc(15px * 1.15)} .pk-btn{height:calc(54px * 1.15)} .pk-btn span{font-size:calc(11px * 1.15)} .pk-flow{padding:50px 0} } /* ===== Our Premium Add-ons ===== Replaces the two Showit canvases (one only-d, one only-m) that used to draw this section with a hand-typed coordinate on every photo, title, rule and paragraph. One responsive section now, scroll-snap does the paging, and every gap comes from the scale in variants/addons/classic.py. */ :root{--ax-ink:#111;--ax-mute:#4f545c;--ax-line:#cfd3d9;--ax-blue:#2c9bf6;--ax-bg:#fafafa} .sec-addons{position:relative;height:auto;background:var(--ax-bg);color:var(--ax-ink); padding:88px 0;overflow:hidden} .ax-wrap{max-width:1200px;margin:0 auto;padding:0 30px;box-sizing:border-box;pointer-events:auto} .ax-eyebrow{margin:0;text-align:center;text-transform:uppercase;letter-spacing:.18em; font:400 clamp(12px,1.1vw,15px)/1.6 'Montserrat',sans-serif;color:var(--ax-mute)} .ax-head{margin:10px 0 0;text-align:center;text-transform:uppercase;letter-spacing:.01em; font:400 clamp(38px,6.2vw,70px)/1.05 'Anton',sans-serif} /* arrow, rail, arrow. The arrows are grid cells, so they can never sit on top of the words the way the hand-placed ones did. */ .ax-deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:42px;margin-top:54px} .ax-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--ax-line); background:transparent;color:var(--ax-ink);cursor:pointer;display:grid;place-items:center; padding:0;transition:background .2s,border-color .2s,color .2s} .ax-arrow:hover{background:var(--ax-ink);border-color:var(--ax-ink);color:#fff} .ax-arrow svg{width:15px;height:15px;fill:currentColor;display:block} .ax-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*42px)/3); gap:42px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none} .ax-rail::-webkit-scrollbar{display:none} .ax-card{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center; text-align:center} /* the blue frame: a square box with the picture inset inside it, exactly as the build draws it, but the inset is one number so it is equal on all four sides */ /* SQUARE, in every engine. aspect-ratio is only a suggestion: on a grid box whose content is an image, Chrome grows the box to the photo's own shape and ignores it, while WebKit honours it. That is why this shipped square in one browser and not the other. A percentage padding is resolved against the WIDTH by every engine, so the ratio cannot be overridden by the content. */ .ax-frame{position:relative;width:100%;border:1px solid var(--ax-blue);background:#fff} .ax-frame::before{content:'';display:block;padding-top:100%} .ax-frame>span{position:absolute;inset:10px;display:block;overflow:hidden} .ax-frame img{display:block;width:100%;height:100%;object-fit:cover;background:#e8eaee} /* the name sits in a slot two lines tall with the words centred in it, so a one-line name does not drag the hairline up by a whole line */ .ax-title{margin:32px 0 0;height:calc(28px * 1.15 * 2); display:flex;align-items:center;justify-content:center; font:400 28px/1.15 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em} .ax-rule{width:100%;height:1px;background:var(--ax-line);margin-top:22px} .ax-body{margin:18px 0 0;font:400 16px/1.6 'Montserrat',sans-serif; color:var(--ax-mute)} @media(max-width:767px){ .ax-wrap{padding:0 14px} .ax-deck{gap:10px;margin-top:43px} .ax-rail{grid-auto-columns:100%} .ax-arrow{width:44px;height:44px} .sec-addons{padding:63px 0} } @media(prefers-reduced-motion:reduce){.ax-rail{scroll-behavior:auto}} /* The menu's own close icon is DESKTOP ONLY. On a phone it renders in exactly the same 61x61 box as the hamburger, so the two draw on top of each other as a star, and it is unreachable anyway: a hit test at its centre returns the overlay's svg, because the mobile overlay carries its own smaller X on top and that is the one you actually tap. On desktop it is the real control that closes the nav bar, so it stays there. */ @media(max-width:767px){.e-menu_view-1_6{display:none}} /* ===== Price list reconciliation (platform contract) ===== The package and add-on cards on this page are wired to the client's own price list (client_packages), so renaming a package, rewriting its inclusions, pricing an add-on or adding a new one in the portal rewrites these cards with no rebuild. Contract: templates/README.md, "Price marks & package reconciliation". .ax-price is the add-on card's price slot. It reads "inquire for pricing" today, exactly as the package cards above it do, because nothing on this site is priced. It has to exist rather than be left out: the slot is the only thing the reconciler can write a real amount into, so without it a priced add-on could never show its price anywhere. */ .ax-price{margin:14px 0 0;color:var(--ax-ink);text-transform:uppercase; line-height:1.6;letter-spacing:.1em;font-size:12px; font-family:'Montserrat',sans-serif} /* The cards are equal-height grid cells, so pushing the price to the bottom of the column lands every one on the same baseline however long the description above it runs. Without this the line sits wherever each paragraph ends and the row reads ragged. */ .ax-card{justify-content:flex-start} .ax-price{margin-top:auto;padding-top:14px} /* A band must never render as a heading over nothing. If the client clears every add-on (or every package) from their portal, the whole section goes. Scoped to these two ids on purpose: the same attribute appears on the contact form's package picker, and a generic selector would hide that. :has() cannot see inside