/*site2255 2026*/
:root { /* COLORS from Figma Colors frame */ --white: #FFFFFF; --black: #17181C; --bg: #FFF5F5; --grey: #4F525C; --grey-light: #989898; --grey-dark: #5C5C5C; --grey-mid: #888A8C; --grey-line: #E0E0E0; --grey-stroke: #F2F2F2; --red: #FF3227; --blue: #0990EF; --green: #00D369; --stroke: rgba(183,45,36,0.1); --stroke-red: rgba(183,45,36,0.1); --overlay: rgba(0,0,0,0.24); --stroke-white: rgba(255,255,255,0.08); --stroke-white-24: rgba(255,255,255,0.24); --stroke-white-40: rgba(255,255,255,0.4); --black-light: #212226; --red-light: #FFF5F5; --red-light-2: #FFE2E0; --wheel-hover: #EFD2D0; --shadow: 0px 4px 24px 0px rgba(224,0,0,0.02), 2px 2px 4px 0px rgba(115,0,0,0.01); --shadow-2: 0px 4px 68px 0px rgba(0,0,0,0.04), 2px 2px 6px 0px rgba(0,0,0,0.02); /* GAPS  universal vw values */ --gap-2: 0.104vw; --gap-4: 0.208vw; --gap-5: 0.26vw; --gap-6: 0.313vw; --gap-8: 0.417vw; --gap-10: 0.521vw; --gap-12: 0.625vw; --gap-14: 0.729vw; --gap-16: 0.833vw; --gap-18: 0.938vw; --gap-20: 1.042vw; --gap-21: 1.094vw; --gap-22: 1.146vw; --gap-24: 1.25vw; --gap-26: 1.354vw; --gap-28: 1.458vw; --gap-30: 1.563vw; --gap-32: 1.667vw; --gap-36: 1.875vw; --gap-38: 1.979vw; --gap-40: 2.083vw; --gap-44: 2.292vw; --gap-48: 2.5vw; --gap-50: 2.604vw; --gap-52: 2.708vw; --gap-53: 2.76vw; --gap-54: 2.813vw; --gap-56: 2.917vw; --gap-60: 3.125vw; --gap-64: 3.333vw; --gap-66: 3.438vw; --gap-70: 3.646vw; --gap-72: 3.75vw; --gap-80: 4.17vw; --gap-82: 4.271vw; --gap-88: 4.583vw; --gap-90: 4.688vw; --gap-94: 4.896vw; --gap-96: 5vw; --gap-100: 5.208vw; --gap-110: 5.729vw; --gap-116: 6.042vw; --gap-120: 6.25vw; --gap-128: 6.667vw; --gap-136: 7.083vw; --gap-140: 7.292vw; --gap-148: 7.708vw; --gap-150: 7.813vw; --gap-152: 7.917vw; --gap-156: 8.125vw; --gap-160: 8.333vw; --gap-170: 8.854vw; --gap-180: 9.375vw; --gap-190: 9.896vw; --gap-194: 10.104vw; --gap-200: 10.417vw; --gap-211: 10.99vw; --gap-220: 11.458vw; --gap-227: 11.823vw; --gap-240: 12.5vw; --gap-260: 13.542vw; --gap-269: 14.010vw; --gap-270: 14.063vw; --gap-274: 14.271vw; --gap-280: 14.583vw; --gap-300: 15.625vw; --gap-320: 16.667vw; --gap-332: 17.292vw; --gap-335: 17.448vw; --gap-360: 18.75vw; --gap-364: 18.958vw; --gap-385: 20.052vw; --gap-402: 20.938vw; --gap-410: 21.354vw; --gap-420: 21.875vw; --gap-428: 22.292vw; --gap-437: 22.760vw; --gap-450: 23.438vw; --gap-477: 24.844vw; --gap-496: 25.833vw; --gap-500: 26.042vw; --gap-512: 26.667vw; --gap-526: 27.396vw; --gap-560: 29.167vw; --gap-590: 30.729vw; --gap-600: 31.25vw; --gap-619: 32.240vw; --gap-638: 33.229vw; --gap-640: 33.333vw; --gap-646: 33.646vw; --gap-658: 34.271vw; --gap-685: 35.677vw; --gap-690: 35.938vw; --gap-700: 36.458vw; --gap-730: 38.021vw; --gap-750: 39.063vw; --gap-974: 50.729vw; --gap-1045: 54.427vw; --gap-1078: 56.146vw; --gap-1200: 62.5vw; --gap-1364: 71.042vw; --gap-1400: 72.917vw; --gap-1636: 85.208vw; /* FS  one per Figma text style size (px/1920*100 = vw) */ --fs-8: 0.417vw; --fs-12: 0.625vw; --fs-14: 0.729vw; --fs-15: 0.781vw; --fs-16: 0.833vw; --fs-17: 0.885vw; --fs-18: 0.938vw; --fs-19: 0.990vw; --fs-20: 1.042vw; --fs-22: 1.146vw; --fs-24: 1.25vw; --fs-28: 1.458vw; --fs-32: 1.667vw; --fs-36: 1.875vw; --fs-46: 2.396vw; --fs-48: 2.5vw; --fs-56: 2.917vw; --fs-70: 3.646vw; --fs-72: 3.75vw; --fs-90: 4.688vw; --fs-120: 6.25vw; --fs-200: 10.417vw; /* FONTS */ --font-1: 'pinghebrew-medium'; --font-2: 'pinghebrew-heavy'; --font-3: 'PPNeueMontreal-Bold'; --font-bold: 'pinghebrew-bold'; }
/*------------------------------------------/*
GENERAL
/*------------------------------------------*/
html { font-size: 62.5%; overflow-x: clip; }
body { opacity: 0; color: var(--black); background: var(--bg); transition: 0.3s opacity ease; font-family: var(--font-1) !important; font-size: 2rem; zoom: 1 !important; position: relative; transition-delay: 0.5s; }
body { font-size: clamp(15px, var(--fs-17),300px); font-family: var(--font-1); line-height: 1.45; letter-spacing: -0.17px; }
body.home-page { opacity: 1; }
body.shown { opacity: 1; }
body, body.modal-open { padding: 0 !important; overflow: clip !important; }
.modal { z-index: 10000; }
.modal-backdrop.in { opacity: 0.5; }
.gallery-cubes-modal { padding: 0 !important; }
.gallery-cubes-modal .flexslider .slides { display: flex; align-items: center; flex-wrap: wrap; }
.gallery-cubes-modal .flexslider .flex-direction-nav li a { outline: unset; }
.gallery-cubes-modal .flexslider a.flex-next:before, .gallery-cubes-modal .flexslider a.flex-prev:before { font-size: 250%; }
.grid-box-fulltext :is(p, li), :is(#lobbyText, #text1, #text2, .text1, .text2) :is(p, li), .grid-rows .grid-row-text :is(p, li), :is(#text1, #text2) > span, .section-topText :is(p, li), #catalogText :is(p, li), .project-inner-page .headline-wrapper .cstm-flds .field-row p, .circle-swiper .grid-boxes .grid-boxes .grid-box .grid-box-subtitle span { font-size: clamp(14px,var(--fs-17),300px); position: relative; line-height: 1.5; color: white; letter-spacing: 0.01em; font-weight: 100; font-family: var(--font-1); }
.section-title, .grid-text-section .section-title { margin: 0; }
#SiteContainer { position: relative; z-index: 1; }
body:not(:has(#GridTop.noTopImage)) #SiteGrid { padding: 0; }
#SiteGridContainer { position: relative; z-index: 2; }
#GridWrapInner { max-width: var(--app-width); display: flex; flex-direction: column; }
#allSectionsWrapper { z-index: 2; background: var(--bg); }
.sections .section, section.section { margin-bottom: 0; padding: 0; max-width: var(--app-width); width: 100%; }
.grid-rows .grid-row { background: inherit; }
.grid-row li.slider-item, .grid-boxes .grid-box-image { padding-bottom: 0; overflow: visible; }
.grid-boxes .grid-box-image-container, .grid-row .grid-row-image-container, .grid-short-box-image .image-container { position: relative; height: 100%; }
.grid-text.gridHasVideo .grid-iframe-holder { padding: 0; display: flex; overflow: hidden; }
.grid-text.gridHasVideo .grid-iframe-holder video { width: 100%; }
.grid-boxes { display: flex; margin: 0; width: 100%; }
.grid-boxes .grid-box { margin: 0; padding: 0; }
.grid-boxes .grid-box-subtitle { font-size: unset; }
.grid-boxes .grid-box .grid-box-image, #lobbyview .grid-boxes .grid-box-image, :is(div, #LobbyModule) .grid-boxes .grid-box-image { margin: 0; }
.grid-boxes .grid-box-title h3 a { outline: none !important; transition: 0.3s ease all; }
#lobbyview .grid-boxes, #LobbyModule .grid-boxes { max-width: unset; padding: 0; margin: 0; }
#LobbyModule .grid-box { opacity: inherit; font-size: 2rem; margin: 0; }
#text1 p:last-child { margin: 0; }
#GridPage { padding: 0; background: var(--bg); }
#main-header .max-width, #GridPage .max-width, .blog-grid #GridPage .max-width, .max-width, .lobby-grid #GridPage .max-width { width: 100%; padding: 0; max-width: 100%; margin: 0; }
.grid-text-content, .grid-text .grid-text-content { opacity: initial; margin: 0; width: 100%; padding: 0; }
.grid-text p { margin-top: 0; }
b, strong { font-weight: unset; font-family: var(--font-2); }
li::marker { color: var(--black); }
a:hover, a:focus { color: inherit; }
.container-fluid { padding: 0; }
.gallery-container { width: 100%; }
.gallery-cubes { display: flex; }
.box-image-animation { outline: unset !important; }
.box-image-animation:hover img { transform: none !important; }
#GridPromo { width: 100%; margin: 0; padding: 0; max-width: unset; }
#CatalogModule { padding: 0; }
.itemContentWrapper { margin: 0; }
.row { margin: 0; }
.slick-track::before, .slick-track::after, .grid-boxes::before, .grid-boxes::after, .grid-rows::before, .grid-rows .grid-row::after, #gridshort-view > div::before, #gridshort-view > div::after, .gallery-cubes::before, .gallery-cubes::after, .row::before, .row::after, .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after, .clearfix { display: none !important; }
#GridTop, #GridTop.blog { height: calc(100vh - var(--headerHeight)); background-repeat: no-repeat; background-size: cover; margin: 0; width: 100%; margin-top: var(--headerHeight); position: relative; border-radius: 0; }
#GridTop.noTopImage.longer { height: 0; overflow: hidden; }
#home-gallery .scroll-down { display: none; }
#player-controls { display: none; }
.cartItemsCounter { background: var(--blue); }
.cartItemsCounter span.CartItems { color: var(--white); left: 50%; top: 60%; }
footer { padding: 0; display: block; position: relative; z-index: 1000; padding-bottom: 0; background: var(--black); }
#SiteFooter { float: none; }
h1, .h1, h2, .h2, h3, .h3 { margin: 0; }
.gallery-cubes .image-link-container { display: none; }
.blog-post { padding: 0; direction: ltr; }
#LobbyModule .grid-boxes .grid-box-title h3 { font-size: unset; margin: 0; }
:is(div,#LobbyModule) #lobbyview { display: flex; padding-block: var(--gap-120) var(--gap-120); justify-content: center; flex-direction: column; background: var(--white)-; width: 70%; margin-inline: auto; margin-bottom: var(--gap-120); }
#BlogMain { padding-bottom: var(--gap-80); }
.gallery-cubes .boxes-images-outer-image { border-radius: 6px; padding: 0; width: 100%; height: auto; aspect-ratio: 1.2; }
.gallery-cubes .boxes-images-outer-image { pointer-events: none; }
.opacity-layer-slide { display: none; }
.GridTop { width: calc(100% - var(--gap-24)); margin-inline: auto; margin-top: var(--gap-12); border-radius: 6px; }
.blog-post-title a:focus, .blog-post-title a:hover { text-decoration: none; }
.gallery-container .gallery-cubes > div .boxes-images-outer-image:focus { outline: none; }
.owl-carousel .owl-controls .owl-dot { width: 7px; height: 7px; background: white; border-radius: 9.3px; transition: 0.3s ease all; }
.owl-carousel .owl-controls .owl-dot.active { width: 32px; }
.swiper-pagination span.swiper-pagination-bullet { background: white !important; opacity: 1; border-radius: 0; transition: 0.3s ease all; border: 1px solid var(--black); width: 10px; height: 10px; }
.swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { width: 10px; height: 10px; background: var(--black) !IMPORTANT; }
#ContentGridShortModule .gridshort-view-item { width: 100%; margin: 0; }
#ContentGridShortModule .grid-short-box-image a { position: static; }
#GridTop.noTopImage, .GridTop.noTopImage { display: none; }
#PageBreadCrumps { max-width: 100% !important; padding: 0 !important; text-align: center; background: white; color: var(--grey); }
#PageBreadCrumps span:not(:last-child)::after { content: "/"; width: var(--gap-4); aspect-ratio: 1; display: inline-block; border-radius: 50%; margin-inline: 0 10px; }
#PageBreadCrumps span:not(:last-child) { display: inline-flex; gap: var(--gap-10); align-items: center; }
label.error, span.error { left: 0; top: -15%; white-space: nowrap; font-size: 60%; }
#ContentRegularModule li { list-style: none; }
#ContentRegularModule ul { padding: 0; }
#ContentRegularModule li:before { content: ""; width: var(--gap-6); height: auto; aspect-ratio: 1; display: inline-block; background: var(--black); border-radius: 50%; vertical-align: inherit; margin-inline-end: var(--gap-12); }
.categories-strip { display: none; }
.cookies-disclaimer { width: var(--gap-360); background: var(--white); border: 1px solid rgba(17, 18, 42, 0.12); bottom: var(--gap-40); right: var(--gap-40); box-shadow: 0 4px 25px -10px rgba(0, 6, 44, 0.10); border-radius: 10px; padding: var(--gap-24); }
.cookies-disclaimer .disclaimer-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); }
.cookies-disclaimer .disclaimer-wrapper h2 { font-family: var(--font-2); color: var(--black); font-size: clamp(14px,var(--fs-20),300px); margin-bottom: var(--gap-16); }
.cookies-disclaimer .disclaimer-wrapper p { color: var(--grey); text-align: center; margin: 0; }
.cookies-disclaimer .disclaimer-wrapper button { margin: 0; }
#BlogModule { overflow: visible; }
.scr-reader-only { display: none; }
.pagination { display: flex; justify-content: center; gap: var(--gap-12); margin: 0; margin-bottom: var(--gap-80); }
.pagination > li { display: inline-flex; }
.pagination > li a, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; margin: 0; border: 1px solid var(--black); color: var(--black); transition: 0.3s ease all; }
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: white; background: var(--black); border: 1px solid var(--black); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background: var(--black); color: white !important; }
#BlogView .share-strip:before, #BlogView .share-strip:after { display: none; }
.select-wrapper:after { left: 1%; color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; width: var(--gap-16); }
#SiteGrid.layout-2sides #GridContent { width: unset; padding-left: 0; text-align: unset; }
::selection { background: var(--blue); color: var(--white); }
/*--------------------/*
TEXT SELECTORS
/*--------------------*/
/* One empty placeholder per Figma text style. Replace `.` with real selectors as the site is built. */
/* --- title He --- */
/*120-title He*/
.blogmain-header #headline h1, #FormResultPage #headline h1, body:is(.policy, .accessabilityMainPage) #headline h1 { font-size: clamp(60px,var(--fs-120),300px); font-family: var(--font-2); line-height: 0.9; letter-spacing: -0.01em; }
/*90-title He*/
:is(div,#LobbyModule) #lobbyview #headline h1 { font-size: clamp(48px,var(--fs-90),300px); font-family: var(--font-2); line-height: 0.9; letter-spacing: -0.01em; }
/*70-title He*/
.section-title h2, .grid-rows .grid-row-text h2, .wins .section-title h2, .prod-service .section-title h2, .webinar-page .red-bg .headline, body.our-blog.contentInnerPage:not(.webinar) #BlogView #headline h1, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts > h2, body.carrer.contentInnerPage #headline h1, .agents .section-title h2 { font-size: clamp(40px,var(--fs-70),300px); font-family: var(--font-2); line-height: 1; }
/*48-title He*/
body.implement-ai #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .section-title h2, body.kickstart #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .section-title h2, .grid-row-section:is([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2, .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-text.title p, .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-text.main-title p, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #headline h3 { font-size: clamp(32px,var(--fs-48),300px); font-family: var(--font-2); line-height: 1; }
/*56-title He*/
.cards.wide .dynamic-grid-item .card-number-wrapper .dynamic-grid-field.field-text.title p { font-size: clamp(36px,var(--fs-56),300px); font-family: var(--font-2); line-height: 1; text-align: right; color: var(--white); }
/*36-title He*/
.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3, body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, body.kickstart :is(div,#LobbyModule) #lobbyview > h2, .quote .grid-text > p, .prod-service .dynamic-grid-item .prod-service-right .field-text:last-child p, .cards .dynamic-grid-item .dynamic-grid-field.field-text.sub-title p, .cards.with-img .dynamic-grid-item .dynamic-grid-field.field-text.title p, .started .grid-text-content h2, .webinar-page .red-bg .sub-headline, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .agent-popup .agent-popup-name, body.contact .form-container-wide #DynamicFormObject #form-thanks #headline h3 { font-size: clamp(24px,var(--fs-36),300px); font-family: var(--font-2); line-height: 1; }
/*28-title He  home gallery subtitle*/
#home-gallery .gallery-text h1 { font-size: clamp(19px,var(--fs-28),300px); font-family: var(--font-2); line-height: 1.07; letter-spacing: normal; text-align: center; }
/*24-title He*/
.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-text.title p, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title a, body.our-blog #BlogModule .blog-posts .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title a, .webinar-page .white-bg .subheadline h4, .webinar-page .white-bg .when p, body.ai-guide .grid-text-section[data-id="25696"] .section-title h2 { font-size: clamp(16px,var(--fs-24),300px); font-family: var(--font-2); line-height: 1.3; letter-spacing: 0.01em; }
/*20-title He*/
.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question h3, .team .grid-boxes .grid-box .grid-box-title h3 a, .success .grid-boxes .grid-box .grid-box-title h3 a, .grid-rows .grid-row-text p strong, #SiteFooter .footer-text-divided .footer-text-middle ul li h4, .num-cards .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p, .grid-faq-section .panel-group .faq-item .faq-headline .faq-headline-title, .q-a .dynamic-grid-item .dynamic-grid-field.field-text.question p, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a, .webinar-page .white-bg .step .step-info, .section.grid-contents.jobs .grid-short-box-label, .grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p, .agents .dynamic-grid-item .dynamic-grid-field.field-text.title p, body.implement-ai .cards .dynamic-grid-item .card-head .dynamic-grid-field.field-text p, :is(div,#LobbyModule) .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a.he-title { font-size: clamp(13px,var(--fs-20),300px); font-family: var(--font-2); line-height: 1.1; letter-spacing: 0.01em; }
.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question h3 { line-height: 1.1; }
:is(div,#LobbyModule) .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a.he-title { text-transform: none; }
/* --- title En --- */
/*200-title En*/
.touch h2, #home-gallery .gallery-title-row .hi-we, #home-gallery .gallery-title-row .are-text, #home-gallery .gallery-richkid-row .richkid-text { font-size: clamp(80px,var(--fs-200),300px); font-family: var(--font-3); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
/*120-title En*/
.page-not-found #headline h1, body.contact :is(div,#LobbyModule) #lobbyview #headline h1, :is(div,#LobbyModule) #lobbyview #headline h1.en-title, .blogmain-header #headline h1.en-title, .selected-work .section-title h2, .cards .dynamic-grid-item .dynamic-grid-field.field-text.title p, .started .section-title h2, body.implement-ai .cards .section-title h2 { font-size: clamp(60px,var(--fs-120),300px); font-family: var(--font-3); line-height: 0.88; letter-spacing: -0.01em; text-transform: uppercase; }
/*90-title En*/
body.playbook :is(div,#LobbyModule) #lobbyview #headline h1, body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper #headline h1, .event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.red p, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .left .date h3 { font-size: clamp(48px,var(--fs-90),300px); font-family: var(--font-3); line-height: 0.9; text-transform: uppercase; }
/*70-title En*/
.num-cards .dynamic-grid-item .dynamic-grid-field.field-text.number p { font-size: clamp(40px,var(--fs-70),300px); font-family: var(--font-3); line-height: 0.9; text-transform: uppercase; }
/*56-title En*/
.webinar-page .white-bg .step .step-ind p, .num-cards.after-webinar .dynamic-grid-item .dynamic-grid-field.field-text.number p, .grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number p, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-title p { font-size: clamp(36px,var(--fs-56),300px); font-family: var(--font-3); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-title p { line-height: 1; color: var(--black); }
/*32-title En*/
.webinar-page .red-bg .date-time .date { font-size: clamp(21px,var(--fs-32),300px); font-family: var(--font-3); line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; }
/*24-title En*/
.touch .grid-boxes .grid-box .grid-box-title h3 a, .webinar-page .webinar-sticky-ticket .date-time .date { font-size: clamp(16px,var(--fs-24),300px); font-family: var(--font-3); line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; }
/*20-title En*/
.selected-work .blog-post-content h2.blog-post-title a, #BlogModule .blog-posts .blog-post .blog-post-content h2.blog-post-title a, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a.en-title, .grid-faq-section .panel-group .faq-item .faq-headline::after, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-subtitle p { font-size: clamp(13px,var(--fs-20),300px); font-family: var(--font-3); line-height: 0.9; text-transform: uppercase; color: var(--white); }
.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-subtitle p { color: var(--black); }
/* --- running text --- */
/*24-Medium*/
.grid-text-section:not(.quote):not(.started) .grid-text-content p, body.implement-ai .cards .section-topText p { font-size: clamp(16px,var(--fs-24),300px); font-family: var(--font-1); line-height: 1.5; color: var(--grey); }
/*19-Bold*/
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p:first-child, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p, body.kickstart :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p, .webinar-page .white-bg .text h3, .webinar-page .white-bg .when h4, .webinar-page .white-bg .close-text > p:first-child, .webinar-page .white-bg .close-text h4, .webinar-page .white-bg .speakers-title, .webinar-page .white-bg .steps-title, .webinar-page .red-bg .date-time .dayNtime, body.our-blog.contentInnerPage:not(.webinar) #BlogView #text1 :is(h3,h4,h5), .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-text.lil-title p, body.carrer.contentInnerPage #text1 :is(h3,h4,h5), body.carrer.contentInnerPage #text1 > p:last-child, .after-webinar .num-cards-title-wrapper .section-title h2, .grid-text-section[data-id="25696"] .grid-text-content h3.grid-text-subhead, body:is(.policy, .accessabilityMainPage) #pageview #text1 > :is(h2,h3), .webinar-page .white-bg .text p:is(:has(> a), :has(> strong:only-child)) { font-size: clamp(13px,var(--fs-19),300px); font-family: var(--font-bold); line-height: 1.5; }
/*19-Medium*/
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p, .cards .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .cards.wide .dynamic-grid-item .card-number-wrapper::before, .agent-popup .agent-popup-role, :is(div,#LobbyModule) #lobbyview > h2, body.implement-ai :is(div,#LobbyModule) #lobbyview > h2, body.rcmo :is(div,#LobbyModule) #lobbyview #lobbyText > p, body.method-page :is(div,#LobbyModule) #lobbyview #lobbyText > p { font-size: clamp(13px,var(--fs-19),300px); font-family: var(--font-1); line-height: 1.5; }
:is(div,#LobbyModule) #lobbyview > h2 { color: var(--grey); }
/*17-Heavy*/
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li { font-size: clamp(11px,var(--fs-17),300px); font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.01em; }
/*17-Bold*/
header :is(#main-header, #header2) .menu-nav ul#menu > li > a, .touch .grid-boxes .grid-box .grid-box-subtitle.button a, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim .btn-text-wrapper span, #FormResultPage #text1 a.FormResultPageButton .btn-text-wrapper span, #home-gallery .gallery-text .gallery-text-btn, .cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul li, .blog-tags nav.blog-tags-list ul li.blog-tag.active a, .webinar-page .white-bg .speakers .speaker .speaker-info .speakerName h4, .webinar-page .white-bg .close-text p a, .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext p a, body.carrer.contentInnerPage .career-sticky-ticket .ticket-title, .page-not-found a.button-with-anim .btn-text-wrapper span, .cookies-disclaimer .disclaimer-wrapper button .btn-text-wrapper span, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p:first-child, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p a, .webinar-page .red-bg .speakers .speaker .speaker-info .speakerName h4, .webinar-page .webinar-sticky-ticket .ticket-title, body:is(.kickstart, .ai-guide) .webinar-sticky-ticket .ticket-title, .webinar-page .white-bg .text p a, .started .grid-text-content p:has(> a) a, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-name { font-size: clamp(11px,var(--fs-17),300px); font-family: var(--font-bold); line-height: 1.5; letter-spacing: 0.01em; }
.started .grid-text-content p:has(> a) a { color: var(--red); }
.webinar-page .white-bg .text p strong { font-family: var(--font-bold); color: var(--black); }
/*17-Medium*/
#FormResultPage #text1 p, body.our-blog .blogmain-header #text1 p, body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper .lobbyTextContainer #lobbyText p, .touch .grid-boxes .grid-box .grid-box-subtitle span, :is(#main-header, #header2) .menu-nav ul#menu li a, :is(#main-header, #header2) .header-center .header-buttons a, .wins .text1 p, .prod-service .dynamic-grid-item .field-richtext p, #SiteFooter .footer-text-divided .footer-text-middle ul li a, .cards .section-topText p, .num-cards .section-topText p, .started .grid-text-content p, .cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .cards.with-img .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .grid-faq-section .section-topText p, .grid-faq-section .faq-item-text p, .q-a .dynamic-grid-item .dynamic-grid-field.field-richtext.answer p, .q-a .section-topText p, .blog-tags nav.blog-tags-list ul li.blog-tag a, .blog-tags nav.blog-tags-list ul li.blog-tag:not(:first-child)::before, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-text, .webinar-page .white-bg .text p, .webinar-page .white-bg .close-text > p:last-child, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view > h2, body.our-blog.contentInnerPage:not(.webinar) #BlogView #text1 :is(p, li), .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext :is(p, li), .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-text.sub-title p, .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-richtext :is(p, li), body.carrer.contentInnerPage #text1 :is(p, li), body.carrer.contentInnerPage #GridPromo .form-text-col .top-form, body.ai-guide .grid-text-section[data-id="25696"] .grid-text-content > p, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-richtext.station-text p, .agents .section-topText p, .agent-popup .agent-popup-body p, body:is(.policy, .accessabilityMainPage) #pageview #text1 :is(p, li, span), body.about .grid-text-section:not(.quote):not(.started) .grid-text-content p, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p, .webinar-page .red-bg .publish-date, .page-not-found #subheadline h2, .page-not-found #text1 p, body.contact .form-container-wide #DynamicFormObject #form-thanks #text1 p { font-size: clamp(11px,var(--fs-17),300px); font-family: var(--font-1); line-height: 1.5; letter-spacing: 0.01em; }
.grid-form-popup .form-container-wide #DynamicFormObject #form-thanks :is(#headline h3, #text1 p) { text-align: start; }
.grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p { color: var(--grey); }
.grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #headline h3, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p:first-child { color: var(--black); }
body.contact .form-container-wide #DynamicFormObject #form-thanks :is(#headline h3, #text1 p) { text-align: center; }
body.contact .form-container-wide #DynamicFormObject #form-thanks #headline h3 { color: var(--black); }
body.contact .form-container-wide #DynamicFormObject #form-thanks #text1 p { color: var(--grey); }
.grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p a { color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }
.prod-service .dynamic-grid-item .field-richtext p { text-align: start; }
/*15-Heavy*/
.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.full-date p, .quote .section-title h2, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .left .dayNtime h4, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author .author-name, .webinar-page .webinar-sticky-ticket .date-time .dayNtime { font-size: clamp(10px,var(--fs-15),300px); font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.02em; }
/*15-Medium*/
.team .grid-boxes .grid-box .grid-box-subtitle span, .success .grid-boxes .grid-box .grid-box-fulltext p, .num-cards .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-richtext.text p, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-text, body.carrer.contentInnerPage #headline a.career-back-link, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view a.blog-back, .cookies-disclaimer .disclaimer-wrapper p, .agents .dynamic-grid-item .dynamic-grid-field.field-text.sub-title p, .webinar-page .red-bg a.webinar-back, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-author span { font-size: clamp(10px,var(--fs-15),300px); font-family: var(--font-1); line-height: 1.4; letter-spacing: 0.01em; }
/*14-Medium*/
.quote .quote-avatar > h2, #SiteFooter .footer-text > span > ul:first-of-type li, .webinar-page .speakers .speaker .speaker-info .speakerJob h4, .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select), .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper.must::before, body.carrer.contentInnerPage .career-share .share-label, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author .author-position, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip span, :is(div, #LobbyModule) .blog-post.our-blog .blog-post-content > .tag, .webinar-page .white-bg .share-strip .share-label, body.ai-guide .share-strip .share-label, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-position { font-size: clamp(9px,var(--fs-14),300px); font-family: var(--font-1); line-height: 1.5; letter-spacing: 0.02em; }
.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select) { font-size: clamp(9px,var(--fs-14),300px) !important; }
/*12-Heavy*/
.prod-service .dynamic-grid-item .prod-service-right .field-text:first-child p, .selected-work .blog-post .blog-post-text, .selected-work .blog-post .tags .tag, #BlogModule .blog-posts .blog-post .tags .tag { font-size: clamp(8px,var(--fs-12),300px); font-family: var(--font-2); line-height: 1.5; }
/*12-Medium*/
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField label { font-size: clamp(8px,var(--fs-12),300px); font-family: var(--font-1); line-height: 1.5; }
/*8-Bold*/
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) span.error { font-size: clamp(7px,var(--fs-8),300px); font-family: var(--font-bold); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--red); }
/*BUTTONS*/
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons a, .dynamicGrid.one-row[data-id="28056"] .dynamic-grid-field.field-button a, .num-cards .num-cards-title-wrapper .dynamic-grid-field.field-button a, #home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink, .selected-work .content-section-Btn a.sec-button, .grid-content-section.success .content-section-Btn a.sec-button, :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a, .grid-text .sec-button, .grid-rows .grid-row-text a.grid-row-button, :is(#main-header, #header2) .header-center .header-buttons a, .blogmain-header #text1 a.tiny-btn, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .left a.upcoming-btn, #FormResultPage #text1 a.FormResultPageButton, .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit button.form-submit, .webinar-page .white-bg .btn-wrapper a.open-form-btn, .webinar-page .red-bg a.open-form-btn, .webinar-page .webinar-sticky-ticket a.open-form-btn, body:is(.kickstart, .ai-guide) .webinar-sticky-ticket a.open-form-btn, .grid-faq-section .title-text-wrapper a.faq-cta, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-button a, .section.grid-contents.jobs .grid-short-box-link a, body.carrer.contentInnerPage #headline a.career-hero-cta, body.carrer.contentInnerPage .career-sticky-ticket a.ticket-cta, div.page-not-found #text1 a, .cookies-disclaimer .disclaimer-wrapper button { position: relative; text-align: center; margin: 0; background-color: var(--red); display: block; width: max-content; min-width: var(--gap-140); align-items: center; border: unset; color: var(--white); font-size: clamp(1.2rem, var(--fs-17), 1000rem); transition: 0.3s all ease; border-radius: 50px; height: var(--gap-52); align-content: center; line-height: 1.4; font-family: var(--font-bold); }
/*RED*/
. { background: var(--red); color: var(--white); }
/*WHITE*/
. { background: var(--white); color: var(--black); }
.button-arrow-wrapper { position: relative; display: flex; width: fit-content; }
.arrow { position: static; width: var(--gap-50); height: auto; aspect-ratio: 1; right: var(--gap-12); bottom: var(--gap-12); border-radius: 0; background: white; overflow: hidden; background-position: center; background-repeat: no-repeat; border: 1px solid; border-inline-start: 0; }
:is(div, #LobbyModule) :is(p, div):has(> .button-with-anim) { overflow: visible; }
:is(div, #LobbyModule) .button-with-anim { position: relative; margin-inline: var(--gap-52) 0 !important; transition: 0.35s all cubic-bezier(0.25, 0.1, 0.3, 1.7) !important; cursor: pointer; padding-inline: var(--gap-24); }
:is(div, #LobbyModule) .button-with-anim::before { content: ''; position: absolute; width: var(--gap-52); height: auto; aspect-ratio: 1; inset-inline-end: 100%; top: 50%; transform: translateY(-50%); background-color: var(--red); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: var(--gap-18); transition: 0.35s all cubic-bezier(0.25, 0.1, 0.3, 1.7); background-color: var(--red); background-image: url(https://media.getmood.io/warehouse/dynamic/731724.svg); }
@media(min-width: 1025px) {
:is(div, #LobbyModule) .button-with-anim::after { content: ''; position: absolute; width: var(--gap-52); height: auto; aspect-ratio: 1; inset-inline-start: 100%; top: 50%; transform: translateY(-50%) scale(0); background-color: var(--red); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: var(--gap-18); background-image: url(https://media.getmood.io/warehouse/dynamic/731523.svg); transition: 0.35s all cubic-bezier(0.25, 0.1, 0.3, 1); background-image: url("https://media.getmood.io/warehouse/dynamic/731524.svg"); background-color: white; background-color: var(--red); background-image: url(https://media.getmood.io/warehouse/dynamic/731725.svg); }
:is(div, #LobbyModule) .button-with-anim:hover { margin-inline-start: 0 !important; }
:is(div, #LobbyModule) .button-with-anim:hover::before { transform: translateY(-50%) scale(0); inset-inline-end: calc(100% - var(--gap-28)); transition: 0.35s all cubic-bezier(0.25, 0.1, 0.3, 1); }
:is(div, #LobbyModule) .button-with-anim:hover::after { transform: translateY(-50%) scale(1); transition: 0.35s all cubic-bezier(0.25, 0.1, 0.3, 1.7); }
.normal-form input:focus { border: none !important; outline: none; }
#PageBreadCrumps :is(span a, span) { font-size: clamp(10px,var(--fs-15),300px); }
a:focus { outline: none; }
.TopVideo iframe { width: 130vw; }
#lobbyText { max-width: 35.663vw; }
.shadow-btn::before, .shadow-btn::after { content: attr(data-text); position: absolute; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease; align-content: center; text-align: center; color: var(--black); }
.shadow-btn::before { top: 0; transform: translateY(0); }
.shadow-btn::after { top: 100%; color: var(--black); }
.shadow-btn:hover::before { transform: translateY(-100%); }
.shadow-btn:hover::after { transform: translateY(-100%); }
.shadow-btn { position: relative; overflow: hidden; color: transparent !important; }
a.shadow-btn { overflow: hidden !important; display: inline-flex; }
.grid-image-section { height: 33.333vw; }
.grid-image-section .image-section-data { height: 33.333vw; /* padding-block: var(--gap-120); */ }
.grid-rows .grid-row-text a.grid-row-button:hover, .grid-rows .grid-row-text a.grid-row-button:focus { background: var(--red) }
}
@media(max-width: 1025px) {
:root { --gap-2: 2px; --gap-4: 4px; --gap-5: 5px; --gap-6: 6px; --gap-8: 8px; --gap-10: 10px; --gap-12: 12px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-20: 20px; --gap-24: 24px; --gap-28: 28px; --gap-30: 30px; --gap-32: 32px; --gap-36: 36px; --gap-38: 38px; --gap-40: 40px; --gap-44: 44px; --gap-48: 48px; --gap-50: 50px; --gap-52: 52px; --gap-53: 53px; --gap-54: 54px; --gap-56: 56px; --gap-60: 60px; --gap-64: 64px; --gap-66: 66px; --gap-72: 72px; --gap-80: 80px; --gap-82: 82px; --gap-88: 88px; --gap-90: 90px; --gap-94: 94px; --gap-96: 96px; --gap-100: 100px; --gap-116: 116px; --gap-120: 120px; --gap-136: 136px; --gap-140: 140px; --gap-148: 148px; --gap-152: 152px; --gap-156: 156px; --gap-160: 160px; --gap-180: 180px; --gap-190: 190px; --gap-200: 200px; --gap-211: 211px; --gap-227: 227px; --gap-240: 240px; --gap-269: 269px; --gap-270: 270px; --gap-274: 274px; --gap-300: 300px; --gap-332: 332px; --gap-335: 335px; --gap-364: 364px; --gap-385: 385px; --gap-402: 402px; --gap-410: 410px; --gap-428: 428px; --gap-437: 437px; --gap-450: 450px; --gap-477: 477px; --gap-496: 496px; --gap-500: 500px; --gap-512: 512px; --gap-526: 526px; --gap-560: 560px; --gap-590: 590px; --gap-600: 600px; --gap-619: 619px; --gap-638: 638px; --gap-640: 640px; --gap-646: 646px; --gap-658: 658px; --gap-685: 685px; --gap-690: 690px; --gap-700: 700px; --gap-730: 730px; --gap-750: 750px; --gap-974: 974px; --gap-1045: 1045px; --gap-1078: 1078px; --gap-1200: 1200px; --gap-1364: 1364px; --gap-1400: 1400px; --gap-1636: 1636px; /* FS  mirror desktop fs vars as fixed px */ --fs-8: 8px; --fs-12: 12px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-36: 36px; --fs-46: 46px; --fs-48: 48px; --fs-56: 56px; --fs-70: 70px; --fs-72: 72px; --fs-90: 90px; --fs-120: 120px; --fs-200: 200px; }
body { font-size: 16px; line-height: 1.5; letter-spacing: 0.16px; }
#GridTop .top-caption { position: absolute; transform: translate(-50%,-50%); left: 50%; margin: 0; height: fit-content; justify-content: center; font-family: var(--font-2); }
.grid-text-content :is(p, li), .grid-box-fulltext :is(p, li), .grid-text :is(p, li), :is(#lobbyText, #text1, #text2, .text1, .text2) :is(p, li), .grid-rows .grid-row-text :is(p, li), :is(#text1, #text2) > span, .section-topText :is(p, li), #catalogText :is(p, li) { font-size: 16px; line-height: 1.5; letter-spacing: 0.01em; }
.opacity-layer-slide { position: absolute; width: 100%; height: 100%; opacity: 0.2; background: black; z-index: 3; }
h1, h2, .section-title h1, .section-title h2, .grid-text h2, .grid-rows .grid-row-text h2, #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle, #pageview :is(#text1, #text2) > h2, #headline h1 { font-size: 50px; line-height: 0.95; letter-spacing: -2px; }
#GridTop, #GridTop.blog { height: 333px; position: relative; }
.GridTop { width: calc(100% - var(--gap-12)); margin-top: var(--gap-6); }
.sections .section, section.section { max-width: unset; }
#PageBreadCrumps { font-size: var(--fs-16); padding: var(--gap-12) var(--gap-24) var(--gap-40); padding-bottom: 0 !important; margin: 0; justify-content: normal; position: relative; }
#PageBreadCrumps span { font-size: 14px; }
#PageBreadCrumps span:not(:last-child) { gap: 5px; }
#PageBreadCrumps span:not(:last-child)::after { width: 3px; margin-inline-end: 2px; }
ul { padding-inline: 20px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { width: 18px; }
#nav-toggle span:before { top: -5px; }
#nav-toggle span:after { bottom: -4px; }
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 1%; }
.swiper-pagination-bullet-active { background: var(--black) !important; }
.owl-carousel .owl-item .item { padding: 0; border-radius: 6px; }
#SiteGrid > div { position: relative; z-index: 1; }
.grid-boxes-content { overflow: auto; }
.grid-boxes-content > div { min-width: 248px; }
.arrow { width: 42px; }
.cookies-disclaimer { right: 20px; left: 20px; bottom: 80px; width: auto; transform: none; padding: 24px; }
.cookies-disclaimer .disclaimer-wrapper { gap: 24px; }
.cookies-disclaimer .disclaimer-wrapper button { width: max-content; height: 48px; padding-inline: 20px; }
select, textarea, input { font-size: 22px !important; line-height: 0.85 !important; }
#PageBreadCrumps { padding-top: 8px !important; padding-inline: 20px !important; text-align: start; color: var(--grey-light); }
#GridTop, #GridTop.blog { margin-top: 68px; height: 280px; border-radius: 0; }
.swiper-button-next, .swiper-rtl .swiper-button-prev { top: 10% !important; color: var(--white) !important; width: 11px !important; height: 19px !important; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 19px !important; }
.swiper-button-prev { left: unset; right: 20% !important; }
.swiper-rtl .swiper-button-next { left: 5% !important; }
.swiper-rtl .swiper-button-prev { right: 5% !important; }
#text1 { max-width: 100%; }
:is(div, #LobbyModule) .button-with-anim::before { height: 48px; width: 48px; }
/*--------------------/*
TEXT SELECTORS
/*--------------------*/
/* One empty placeholder per Figma mobile text style (fixed px). */
/* --- title He --- */
/*36-title He*/
body.kickstart :is(div,#LobbyModule) #lobbyview #headline h1, .cards.with-img .dynamic-grid-item .dynamic-grid-field.field-text.title p, :is(div,#LobbyModule) #lobbyview #headline h1, .cards.wide .dynamic-grid-item .card-number-wrapper .dynamic-grid-field.field-text.title p, .blogmain-header #headline h1, body.our-blog.contentInnerPage:not(.webinar) #BlogView #headline h1, #FormResultPage #headline h1, body:is(.policy, .accessabilityMainPage) #headline h1 { font-size: 36px; font-family: var(--font-2); line-height: 1; letter-spacing: normal; }
:is(div,#LobbyModule) #lobbyview #headline h1, .blogmain-header #headline h1, body:is(.policy, .accessabilityMainPage) #headline h1 { text-align: center; }
/*32-title He*/
.section-title h2, .grid-rows .grid-row-text h2, .prod-service .section-title h2, .event-cube .section-title h2, .dynamicGrid.alternative .section-title h2, .dynamicGrid.one-row .section-title h2, .dynamicGrid.cards .section-title h2, body.method-page .grid-text-section[data-id="28000"] .section-title h2, body.implement-ai #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .section-title h2, body.kickstart #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .section-title h2, .section.grid-contents.jobs .section-title h2, .success .section-title h2, .draggable .section-title h2, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-text.title p, .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-text.main-title p, .cards.with-img .section-title h2, .wins .section-title h2, .grid-row-section:is([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2, .team .section-title h2, .grid-text-section:not(.quote):not(.started) .section-title h2, .num-cards .section-title h2, .q-a .section-title h2, .grid-faq-section .title-text-wrapper .section-title h2, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts > h2, .agents .section-title h2 { font-size: 32px; font-family: var(--font-2); line-height: 1; letter-spacing: normal; }
.grid-text-section:not(.quote):not(.started) .section-title h2, .grid-faq-section .title-text-wrapper .section-title h2 { text-align: center; }
/*24-title He*/
.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3, .webinar-page .red-bg .headline, body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, body.carrer.contentInnerPage #headline h1, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, :is(#main-header, #header2) .menu-nav ul#menu > li:not(.megaMenuSection) > a, .agent-popup .agent-popup-name, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #headline h3, body.contact .form-container-wide #DynamicFormObject #form-thanks #headline h3 { font-size: 24px; font-family: var(--font-2); line-height: 1.3; letter-spacing: normal; }
.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3 { letter-spacing: 0.01em; }
:is(#main-header, #header2) .menu-nav ul#menu > li:not(.megaMenuSection) > a { letter-spacing: 0.01em; }
body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #headline h3 { letter-spacing: 0.01em; }
.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #headline h3 { text-align: center; }
/*20-title He*/
.webinar-page .white-bg .subheadline h4, .event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-text.title p, .num-cards .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title a, body.our-blog #BlogModule .blog-posts .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title a, .webinar-page .white-bg .when p, body.ai-guide .grid-text-section[data-id="25696"] .section-title h2 { font-size: 20px; font-family: var(--font-2); line-height: 1.3; letter-spacing: normal; }
/*18-title He*/
body.portfolio #BlogModule .blog-posts .blog-post .blog-post-content h2.blog-post-title a, .grid-rows .grid-row-text p strong, .grid-faq-section .panel-group .faq-item .faq-headline .faq-headline-title, .agents .dynamic-grid-item .dynamic-grid-field.field-text.title p, :is(div,#LobbyModule) .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a.he-title { font-size: 18px; font-family: var(--font-2); line-height: 1.3; letter-spacing: 0.01em; }
/*17-title He*/
.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question p, .q-a .dynamic-grid-item .dynamic-grid-field.field-text.question h3 { font-size: 17px; font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.01em; }
/*16-title He*/
.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h3, .webinar-page .white-bg .step .step-info, .webinar-page .red-bg .date-time .dayNtime, .section.grid-contents.jobs .grid-short-box-label { font-size: 16px; font-family: var(--font-2); line-height: 1.3; letter-spacing: 0.01em; }
.num-cards.after-webinar .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p, .grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p { font-size: 16px; font-family: var(--font-2); line-height: 1.2; letter-spacing: 0.01em; }
.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-text.title p { letter-spacing: normal; }
/* --- title En --- */
/*72-title En*/
.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.red p, .cards .dynamic-grid-item .dynamic-grid-field.field-text.title p, .num-cards .dynamic-grid-item .dynamic-grid-field.field-text.number p, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .left .date h3 { font-size: 72px; font-family: var(--font-3); line-height: 0.9; letter-spacing: normal; text-transform: uppercase; }
/*48-title En*/
.touch h2, .started .section-title h2, body.implement-ai .cards .section-title h2 { font-size: 48px; font-family: var(--font-3); line-height: 1; text-transform: uppercase; letter-spacing: normal; }
/*36-title En*/
.page-not-found #headline h1, body.playbook :is(div,#LobbyModule) #lobbyview #headline h1, :is(div,#LobbyModule) #lobbyview #headline h1.en-title, .blogmain-header #headline h1.en-title, body.our-blog.contentInnerPage:not(.webinar) #BlogView #headline h1.en-title, body.contact :is(div,#LobbyModule) #lobbyview #headline h1, body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper #headline h1, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-title p { font-size: 36px; font-family: var(--font-3); line-height: 1; letter-spacing: normal; text-transform: uppercase; }
body.contact :is(div,#LobbyModule) #lobbyview #headline h1 { text-align: start; }
body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper #headline h1 { text-align: center; color: var(--white); }
.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-title p { text-align: center; }
/*24-title En*/
.webinar-page .red-bg .date-time .date { font-size: 24px; font-family: var(--font-3); line-height: 0.9; text-transform: uppercase; }
/*18-title En*/
.touch .grid-boxes .grid-box .grid-box-title h3 a, .grid-faq-section .panel-group .faq-item .faq-headline::after, .num-cards.after-webinar .dynamic-grid-item .dynamic-grid-field.field-text.number p, .grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number p, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-subtitle p, .webinar-page .white-bg .step .step-ind p, .webinar-page .webinar-sticky-ticket .date-time .date { font-size: 18px; font-family: var(--font-3); line-height: 0.9; text-transform: uppercase; letter-spacing: normal; }
.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-text.station-subtitle p { line-height: 1; text-align: center; }
.grid-faq-section .panel-group .faq-item .faq-headline::after { color: var(--black); }
/* --- running text --- */
/*BUTTONS  shared default*/
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons a, .dynamicGrid.one-row[data-id="28056"] .dynamic-grid-field.field-button a, .num-cards .num-cards-title-wrapper .dynamic-grid-field.field-button a, #home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink, .selected-work .content-section-Btn a.sec-button, .grid-content-section.success .content-section-Btn a.sec-button, :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a, .grid-text .sec-button, .grid-rows .grid-row-text a.grid-row-button, :is(#main-header, #header2) .header-center .header-buttons a, .blogmain-header #text1 a.tiny-btn, #FormResultPage #text1 a.FormResultPageButton, .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit button.form-submit, .webinar-page .white-bg .btn-wrapper a.open-form-btn, .webinar-page .red-bg a.open-form-btn, .grid-faq-section .title-text-wrapper a.faq-cta, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-button a, .section.grid-contents.jobs .grid-short-box-link a, body.carrer.contentInnerPage #headline a.career-hero-cta, body.carrer.contentInnerPage .career-sticky-ticket a.ticket-cta, div.page-not-found #text1 a, .cookies-disclaimer .disclaimer-wrapper button { font-size: 15px; height: 48px; }
/*22-Bold*/
.cards .dynamic-grid-item .dynamic-grid-field.field-text.sub-title p, .quote .grid-text > p { font-size: 22px; font-family: var(--font-bold); line-height: 1.2; }
/*17-Medium*/
body.our-blog.contentInnerPage:not(.webinar) #BlogView #text1 :is(p, li), body:is(.policy, .accessabilityMainPage) #pageview #text1 :is(p, li, span) { font-size: 17px; font-family: var(--font-1); line-height: 1.47; letter-spacing: normal; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 :is(p, li, span) { line-height: 1.5; }
/*16-Heavy*/
.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-text.lil-title p, .success .grid-boxes .grid-box .grid-box-title h3 a, body.our-blog.contentInnerPage:not(.webinar) #BlogModule #BlogView .blog-related-posts .blog-post-title a, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li, :is(#main-header, #header2) .menu-nav ul#menu .mgMenuMob .mgMenuMob-groupTitle a { font-size: 16px; font-family: var(--font-2); line-height: 1.5; letter-spacing: normal; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li { letter-spacing: 0.01em; }
.team .grid-boxes .grid-box .grid-box-title h3 a { font-size: 16px; font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.01em; }
body.carrer.contentInnerPage #text1 :is(h3,h4,h5), body.carrer.contentInnerPage #text1 > p:last-child, body.our-blog.contentInnerPage:not(.webinar) #BlogView #text1 :is(h3,h4,h5) { font-size: 16px; font-family: var(--font-bold); line-height: 1.5; letter-spacing: 0.01em; }
/*16-Bold*/
.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text p strong, .started .grid-text-content h2, .webinar-page .white-bg .text h3, .webinar-page .white-bg .when h4, .webinar-page .white-bg .close-text h4, .webinar-page .white-bg .speakers-title, .webinar-page .white-bg .steps-title, body.kickstart :is(div,#LobbyModule) #lobbyview > h2, .after-webinar .num-cards-title-wrapper .section-title h2, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p, .grid-text-section[data-id="25696"] .grid-text-content h3.grid-text-subhead, .grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form, body.implement-ai .cards .dynamic-grid-item .card-head .dynamic-grid-field.field-text p, body:is(.policy, .accessabilityMainPage) #pageview #text1 > :is(h2,h3), body.portfolio .blog-tags nav.blog-tags-list ul li.blog-tag.active a, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p:first-child, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p a, .webinar-page .red-bg .sub-headline, .webinar-page .white-bg .speakers .speaker .speaker-info .speakerName h4, .webinar-page .white-bg .text p:is(:has(> a), :has(> strong:only-child)), .webinar-page .red-bg .publish-date, body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p:first-child { font-size: 16px; font-family: var(--font-bold); line-height: 1.5; letter-spacing: 0.01em; }
.grid-text-section[data-id="25696"] .grid-text-content h3.grid-text-subhead { letter-spacing: normal; }
.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { text-align: center; }
/*16-Medium (running text)*/
.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-richtext p, body.carrer.contentInnerPage #text1 :is(p, li), .touch .grid-boxes .grid-box .grid-box-subtitle span, .cards.with-img .section-topText p, .cards.with-img .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .cards .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text p, .grid-text-section:not(.quote):not(.started) .grid-text-content p, .started .grid-text-content p, .num-cards .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-richtext.text p, .cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text p, .q-a .section-topText p, .grid-faq-section .title-text-wrapper .section-topText p, .grid-faq-section .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text p, body.our-blog .blogmain-header #text1 p, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view > h2, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-text, body.kickstart :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p, body.rcmo :is(div,#LobbyModule) #lobbyview #lobbyText > p, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim .btn-text-wrapper span, body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper .lobbyTextContainer #lobbyText p, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .form-text-col .top-form, #FormResultPage #text1 p, body.ai-guide .grid-text-section[data-id="25696"] .grid-text-content > p, :is(#main-header, #header2) .menu-nav ul#menu .mgMenuMob .mgMenuMob-item a, body.method-page :is(div,#LobbyModule) #lobbyview #lobbyText > p, .dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-richtext.station-text p, .agents .section-topText p, :is(div,#LobbyModule) #lobbyview > h2, body.implement-ai :is(div,#LobbyModule) #lobbyview > h2, body.implement-ai .cards .section-topText p, .agent-popup .agent-popup-role, .agent-popup .agent-popup-body p, body.portfolio .blog-tags nav.blog-tags-list ul li.blog-tag:not(:first-child)::before, body.portfolio .blog-tags nav.blog-tags-list ul li.blog-tag a, .cards .section-topText p, body.about .grid-text-section:not(.quote):not(.started) .grid-text-content p, .grid-form-popup .form-container-wide #DynamicFormObject #form-thanks #text1 p, .num-cards .section-topText p, .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext :is(p, li), .dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext p, body.ai-guide .dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-richtext p, .page-not-found #subheadline h2, .page-not-found #text1 p, body.contact .form-container-wide #DynamicFormObject #form-thanks #text1 p { font-size: 16px; font-family: var(--font-1); line-height: 1.5; letter-spacing: 0.01em; }
.grid-form-popup .form-container-wide #DynamicFormObject #form-thanks :is(#headline h3, #text1 p) { text-align: center; }
:is(#main-header, #header2) .menu-nav ul#menu .mgMenuMob .mgMenuMob-item a { line-height: 1.5; }
body.ai-guide .grid-text-section[data-id="25696"] .grid-text-content > p { letter-spacing: normal; color: var(--grey); text-align: start; }
.grid-text-section:not(.quote):not(.started) .grid-text-content p { text-align: center; color: var(--grey); }
body.method-page :is(div,#LobbyModule) #lobbyview #lobbyText > p { text-align: center; color: var(--grey); }
.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-richtext.station-text p { text-align: center; color: var(--grey); }
body.about :is(div,#LobbyModule) #lobbyview .lobby-content-wrapper .lobbyTextContainer #lobbyText p { text-align: center; }
body.our-blog .blogmain-header #text1 p { text-align: center; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view > h2 { text-align: center; color: var(--grey); }
.grid-faq-section .title-text-wrapper .section-topText p { text-align: center; }
/*15-Heavy*/
.quote .section-title h2, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .left .dayNtime h4 { font-size: 15px; font-family: var(--font-2); line-height: 1.4; letter-spacing: 0.01em; }
body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title a.en-title { font-size: 15px; line-height: 1.4; letter-spacing: normal; }
/*15-Bold*/
body.playbook .quote .quote-avatar .section-title h2, :is(#main-header, #header2) .header-center .header-buttons a, body.carrer.contentInnerPage .career-sticky-ticket .ticket-title, .cookies-disclaimer .disclaimer-wrapper button .btn-text-wrapper span, .webinar-page .red-bg .speakers .speaker .speaker-info .speakerName h4, .webinar-page .webinar-sticky-ticket.no-date .ticket-content .ticket-title, .page-not-found a.button-with-anim .btn-text-wrapper span, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-name { font-size: 15px; font-family: var(--font-bold); line-height: 1.4; letter-spacing: 0.01em; }
/*15-Medium*/
.success .grid-boxes .grid-box .grid-box-fulltext p, #FormResultPage #text1 a.FormResultPageButton .btn-text-wrapper span, .agents .dynamic-grid-item .dynamic-grid-field.field-text.sub-title p, .webinar-page .red-bg a.webinar-back { font-size: 15px; font-family: var(--font-1); line-height: 1.4; letter-spacing: 0.01em; }
/*14-Medium*/
.quote .quote-avatar > h2, body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip span, body.carrer.contentInnerPage #headline a.career-back-link, body.carrer.contentInnerPage .career-share .share-label, .cookies-disclaimer .disclaimer-wrapper p, body.ai-guide .share-strip .share-label, :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-position { font-size: 14px; font-family: var(--font-1); line-height: 1.4; letter-spacing: 0.01em; }
/*14-Medium*/
body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-text, body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-author span { font-size: 14px; font-family: var(--font-1); line-height: 1.5; letter-spacing: 0.02em; }
/*12-Medium*/
.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField label { font-size: 12px; font-family: var(--font-1); line-height: 1.5; letter-spacing: normal; }
/*HOME GALLERY overrides*/
#home-gallery .gallery-text span { font-size: 56px; line-height: 0.9; letter-spacing: normal; }
#home-gallery .gallery-title-row .hi-we, #home-gallery .gallery-title-row .are-text, #home-gallery .gallery-richkid-row .richkid-text { font-size: 72px; line-height: 0.9; letter-spacing: -0.01em; }
#home-gallery .gallery-text h1 { font-size: 16px; font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.01em; }
#home-gallery .gallery-text .gallery-text-btn { font-size: 15px; line-height: 1.4; letter-spacing: 0.01em; }
.quote .grid-text > p { line-height: 1; letter-spacing: normal; }
.wins .text1 p { font-size: 16px; line-height: 1.5; letter-spacing: 0.01em; }
.prod-service .dynamic-grid-item > .field-text p { font-size: 24px; font-family: var(--font-2); color: var(--black); line-height: 1.3; letter-spacing: normal; text-align: right; }
.prod-service .dynamic-grid-item .field-richtext p { font-size: 15px; font-family: var(--font-1); color: var(--grey); line-height: 1.6; letter-spacing: normal; text-align: right; width: 100%; }
.prod-service .prod-service-bottom .field-text p { font-size: 15px; font-family: var(--font-1); color: var(--grey); line-height: 1.6; letter-spacing: normal; }
#SiteFooter .footer-text-divided .footer-text-middle ul li h4 { font-size: 16px; font-family: var(--font-2); line-height: 1.5; letter-spacing: 0.01em; }
#SiteFooter .footer-text-divided .footer-text-middle ul li { font-size: 16px; font-family: var(--font-1); line-height: 1.5; letter-spacing: 0.01em; }
#SiteFooter .footer-text > span > ul:first-of-type li { font-size: 14px; font-family: var(--font-1); line-height: 1.4; letter-spacing: 0.01em; }
.selected-work .section-title h2 { font-size: 48px; line-height: 1; letter-spacing: normal; }
.selected-work .blog-post-content h2.blog-post-title a { font-size: 18px; line-height: 0.9; letter-spacing: normal; }
.selected-work .blog-post .blog-post-text { font-size: 12px; letter-spacing: normal; }
.selected-work .content-section-Btn a.sec-button, .grid-content-section.success .content-section-Btn a.sec-button { font-size: 15px; letter-spacing: normal; }
/*BUTTONS*/
:is(#main-header, #header2) .header-center .header-buttons a { background: var(--white); color: var(--black); font-size: 15px; height: var(--gap-38); border-radius: 86px; padding-inline: var(--gap-12); }
}
/*------------------------------------------/*
HOME GALLERY
/*------------------------------------------*/
#home-gallery { height: calc(200vh - var(--gap-60)) !important; position: relative; width: 100%; overflow: clip; background: var(--red); }
#home-gallery #TopVideo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#home-gallery #TopVideo iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; min-height: 56.25vw; pointer-events: none; }
#home-gallery .opacity-layer { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--black); z-index: 2; pointer-events: none; display: none; }
#home-gallery .gallery-caption.caption-text { position: static; inset: 0; width: 100%; height: fit-content; left: 0; top: 0; padding: var(--gap-96) var(--gap-200); margin: 0; transform: unset; z-index: 3; display: flex; align-items: center; justify-content: center; margin-top: var(--headerHeight); }
#home-gallery .gallery-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-40); width: 100%; text-align: center; color: var(--white); }
#home-gallery .gallery-text span { display: block; color: var(--white); }
#home-gallery .gallery-title-block { width: 100%; display: flex; flex-direction: column; gap: var(--gap-2); }
#home-gallery .gallery-title-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--gap-180); width: 100%; position: relative; }
#home-gallery .gallery-title-row #TopVideo { width: var(--gap-260) !important; height: var(--gap-200) !important; overflow: hidden; left: 48%; top: -16%; transform: rotate(-7.5deg); border-radius: 10px; z-index: 2; }
#home-gallery .gallery-title-row #TopVideo iframe { min-height: unset; width: 153%; height: 101%; transform: none; left: 50%; bottom: 50%; position: absolute; transform: translate(-50%,-50%); }
#home-gallery #TopVideo.video-fly { inset: auto; width: auto; height: auto; overflow: hidden; z-index: 2; will-change: transform; }
#home-gallery #TopVideo.video-fly iframe { min-height: unset; width: auto; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#home-gallery .gallery-title-row span.hi-we { z-index: 3; }
#home-gallery .gallery-richkid-row { display: flex; flex-direction: row; justify-content: center; width: 100%; }
#home-gallery .gallery-richkid-row .richkid-text { line-height: 1; }
#home-gallery .gallery-richkid-row .richkid-text sup { font-size: clamp(24px,var(--fs-46),200px); font-family: var(--font-3); display:none;}
#home-gallery .gallery-text h1 { color: var(--white); }
#home-gallery .gallery-text .gallery-text-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--gap-52); padding-inline: var(--gap-24); padding-block: 0; min-width: unset; border-radius: var(--gap-90); background: var(--white); color: var(--black); border: none; line-height: 1; }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink { background: var(--white); color: var(--black); min-width: var(--gap-180); }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink .btn-text-wrapper { }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink .btn-text-wrapper span { color: var(--black); }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink::before { background: var(--white); }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim { direction: rtl; background: white; color: var(--black); }
#home-gallery .gallery-caption .gallery-text > span { display: flex; direction: rtl; }
#home-gallery .gallery-caption .gallery-text > span .svg { width: var(--gap-16); height: auto; aspect-ratio: 1; background-image: url("https://media.getmood.io/warehouse/dynamic/732001.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; margin-inline: var(--gap-20); }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim::before { background-color: white; background-image: url(https://media.getmood.io/warehouse/dynamic/731523.svg); background-position: center; background-repeat: no-repeat; }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim::after { background-color: var(--white); background-image: url(/warehouse/dynamic/623930.svg); }
#home-gallery .sliding-gallery-rail { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; z-index: 4; }
#home-gallery .sliding-gallery-rail .section.grid-gallery-section.sliding-gallery { position: sticky; bottom: 0; pointer-events: auto; width: 100%; max-width: unset; margin: 0; direction: rtl; }
@media(min-width: 1025px) {
/* the (R) sign sits as a flex item beside the wordmark, nudged down from the bootstrap sup offset */
#home-gallery .gallery-richkid-row .richkid-text { display: flex; }
#home-gallery .gallery-richkid-row .richkid-text sup { top: 13%; }
}
@media(max-width: 1025px) {
/* QA 2: the hero keeps its 150vh (the video-grow scrolls across it); the logo strip is moved INTO the hero by JS on mobile too and sticks to the viewport bottom from the first fold - needs overflow: clip (hidden would make the hero the sticky scrollport) */
#home-gallery { height: 150vh !important; min-height: 600px; background: var(--red); overflow: clip; margin-bottom: 40px; }
#home-gallery .slides, #home-gallery .slider-item, #home-gallery .slider-bg { width: 100%; height: 100% !important; }
#home-gallery .slider-bg { background-size: cover; background-position: center; }
#home-gallery .gallery-caption.caption-text { padding: 96px 24px; z-index: 4; position: relative; }
#home-gallery .gallery-text { gap: 24px; }
#home-gallery .gallery-text .gallery-text-btn { width: fit-content; height: 48px; padding-inline: 20px; border-radius: 86px; }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim { min-width: 0; height: 48px; margin-inline: 56px 0 !important; padding-inline: 20px; border-radius: 86px; width: 161px; }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim .btn-text-wrapper span { color: var(--black); font-size: 17px; }
#home-gallery .gallery-caption .gallery-text a.gallery-text-btn.photoCaptionLink.button-with-anim::before { width: 48px; height: 48px; background-size: 18px; }
#home-gallery .gallery-title-row { gap: 8px; flex-wrap: wrap; row-gap: 0; }
#home-gallery .gallery-title-row .hi-we { width: 100%; text-align: center; }
#home-gallery .gallery-richkid-row .richkid-text { display: flex; }
#home-gallery .gallery-richkid-row .richkid-text sup { font-size: 15px; top: 20%; }
/*MOBILE VIDEO CARD + GROW*/
#home-gallery .gallery-title-row #TopVideo { display: none; }
#home-gallery .gallery-title-row .TopVideo.visible-xs { position: relative; width: 111px; height: 80px; overflow: hidden; border-radius: 10px; transform: rotate(-7.5deg); flex-shrink: 0; z-index: 2; }
#home-gallery .gallery-title-row .TopVideo.visible-xs #mainVideo { width: 100% !important; height: 100% !important; object-fit: cover; }
#home-gallery .TopVideo.visible-xs #mobile-player-controls { display: none; }
#home-gallery .TopVideo.visible-xs.video-fly { position: absolute; inset: auto; overflow: hidden; z-index: 2; will-change: transform; }
#home-gallery .TopVideo.visible-xs.video-fly #mainVideo { width: 123% !important; height: 116% !important; object-fit: cover; }
}
/*------------------------------------------/*
FORM RESET
/*------------------------------------------*/
.form-container-wide { }
.form-container-wide #DynamicFormObject { border: none; padding: 0; display: flex; flex-direction: column; }
.form-container-wide #DynamicFormObject::after { display: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { padding: 0; width: 100%; display: block; }
.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText::after { display: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields { padding: 0; width: 100%; margin: 0; display: block; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: unset; margin: 0; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form { }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset { display: flex; flex-direction: column; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField { padding: 0; float: none; width: 100%; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper { }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper::before { right: 0.5%; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) :is(input, textarea) { margin: 0; width: 100%; border-radius: 0; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) :is(input, textarea)::placeholder, .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField select { color: var(--grey-light); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select):focus { box-shadow: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField { margin: 0; text-align: start; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { width: 100%; padding: 0; float: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit input.form-submit { border-radius: 0; width: fit-content; background: black; color: white; margin-inline: auto; }
.form-container-wide #DynamicFormObject .dynamicFormEndText { display: block; width: 100%; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField { }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper { }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper { display: flex; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper select { border: none; border-radius: 0; border-bottom: 2px solid var(--black); padding-inline: 0; color: var(--grey-light); height: var(--gap-60); padding-inline: var(--gap-14); box-shadow: none; }
/* career inner page form card  2-col (text right / fields left) */
body.carrer.contentInnerPage #GridPromo #DynamicFormObject { flex-direction: row; gap: var(--gap-48); align-items: flex-start; background: var(--white); border-radius: 10px; box-shadow: var(--shadow); padding: var(--gap-48); box-sizing: border-box; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .form-text-col { width: var(--gap-320); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--gap-24); text-align: right; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText { padding: 0; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .form-text-col .top-form { color: var(--grey); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectFields { flex: 1; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectFields form fieldset { gap: var(--gap-8); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) :is(input, textarea) { /* height: var(--gap-52); */ /* border: 1px solid var(--grey-line); */ border-radius: 10px; padding-inline: var(--gap-16); background: var(--white); text-align: right; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField .textarea-wrapper textarea { /* height: auto; */ /* min-height: var(--gap-88); */ padding-block: var(--gap-20); width: 100% !important; min-height: var(--gap-160); }
/* ACTIONS ROW (Figma 1483:7210) — JS wraps the CV upload + submit: upload hugs its text on the start side, submit on the end side */
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .career-form-actions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--gap-16); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .career-form-actions .dynamicFormObjectField.file-upload { width: fit-content; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .career-form-actions .dynamicFormObjectField.file-upload::after { display: none; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper { height: auto; display: inline-flex; align-items: center; gap: var(--gap-4); border: none; border-bottom: 1px solid var(--black); border-radius: 0; background: transparent; padding: 0 0 var(--gap-2); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper.must::before { position: static; transform: none; order: 1; color: var(--black); opacity: 1; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper.must:has(.fileUploadTrigger:not(:placeholder-shown))::before { opacity: 0; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper input.fileUploader { position: absolute; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper::after { content: ""; order: 3; width: var(--gap-14); height: var(--gap-14); margin-inline-start: var(--gap-4); flex-shrink: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12.86 6.79L6.98 12.72C6.75 12.95 6.48 13.13 6.18 13.26C5.88 13.39 5.56 13.45 5.23 13.45C4.9 13.45 4.58 13.39 4.28 13.26C3.98 13.13 3.71 12.95 3.48 12.72L1.72 10.93C1.26 10.46 1 9.83 1 9.17C1 8.52 1.26 7.89 1.72 7.42L7.99 1.14C8.17 0.95 8.39 0.8 8.63 0.7C8.87 0.6 9.13 0.55 9.39 0.55C9.65 0.55 9.91 0.6 10.15 0.7C10.39 0.8 10.61 0.95 10.79 1.14L11.5 1.84C11.68 2.02 11.83 2.24 11.93 2.48C12.03 2.72 12.08 2.98 12.08 3.24C12.08 3.5 12.03 3.76 11.93 4C11.83 4.24 11.68 4.46 11.5 4.64L5.94 10.22C5.85 10.31 5.74 10.38 5.62 10.43C5.5 10.48 5.37 10.51 5.24 10.51C5.11 10.51 4.98 10.48 4.86 10.43C4.74 10.38 4.63 10.31 4.54 10.22L4.19 9.86C4.1 9.77 4.03 9.66 3.98 9.54C3.93 9.42 3.9 9.29 3.9 9.16C3.9 9.03 3.93 8.9 3.98 8.78C4.03 8.66 4.1 8.55 4.19 8.46L7.92 4.76' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .fileUploadTrigger { order: 1; field-sizing: content; width: auto; min-width: 0; height: auto; border: none; border-radius: 0; padding: 0; background: transparent; color: var(--black); text-align: start; cursor: pointer; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .fileUploadTrigger::placeholder { color: var(--black); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.file-upload .input-wrapper :is(span, label).error { top: 100%; transform: none; inset-inline-end: auto; inset-inline-start: 0; margin-top: var(--gap-4); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.checkboxField { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--gap-8); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectSubmit { display: flex; justify-content: flex-start; margin-top: 0; width: auto; }
@media(max-width: 1024px) {
}
/*------------------------------------------/*
FORM
/*------------------------------------------*/
.form-container-wide { background: var(--bg); padding: var(--gap-88) var(--gap-56); border-radius: 10px; max-width: var(--gap-560); margin-inline: auto; }
.form-container-wide #DynamicFormObject { gap: var(--gap-32); }
.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormObjectTitle { text-align: start; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields { display: flex; flex-direction: column; gap: var(--gap-32); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { text-align: start; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset { display: flex; flex-direction: column; gap: var(--gap-8); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) { position: relative; background: var(--white); border: 1px solid var(--stroke); border-radius: 10px; height: var(--gap-52); padding-inline: var(--gap-16); display: flex; align-items: center; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { height: unset; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper.must::before { content: "*"; color: var(--grey); position: absolute; inset-inline-start: var(--gap-16); top: 50%; transform: translateY(-50%); z-index: 1; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper.must:has(:is(input, textarea):focus, :is(input, textarea):not(:placeholder-shown))::before { opacity: 0; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) span.error { position: absolute; top: 50%; right: auto; inset-inline-end: var(--gap-16); transform: translateY(-50%); margin: 0; z-index: 1; pointer-events: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea { resize: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select) { background: transparent; border: none; border-radius: 0; width: 100%; height: 100%; padding: 0; margin: 0; color: var(--black); text-align: start; box-shadow: none; padding-inline: 16px; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) :is(input, textarea)::placeholder, .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField select { color: var(--grey); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select):focus { box-shadow: none; border: none !important; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField { display: flex; flex-direction: row; align-items: center; gap: var(--gap-10); padding-top: var(--gap-8); margin-top: var(--gap-16); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: var(--gap-16); height: var(--gap-16); min-width: var(--gap-16); margin: 0; border: 1px solid var(--grey-line); border-radius: 4px; background: var(--white); cursor: pointer; flex-shrink: 0; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField input[type="checkbox"]:checked { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.43 5.14L7.47 10.29L5 8.23' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--red); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField label { margin: 0; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { display: flex; margin-top: var(--gap-16); padding: 0; float: none; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit button.form-submit { background: var(--red); color: var(--white); border-radius: 50px; width: max-content; margin: 0; }
.form-container-wide #DynamicFormObject .dynamicFormEndText { }
@media(min-width: 1025px) {
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea { padding-block: var(--gap-14); }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper::before { top: 9%; right: var(--gap-18); font-size: clamp(10px,var(--fs-14),300px); color: var(--grey); }
}
@media(max-width: 1024px) {
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.textareaField { height: 52px; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { height: 100%; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper::before { right: 17px; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) textarea { display: flex; padding-block: 14px; height: fit-content; height: 100%; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) :is(input, textarea, select) { font-size: 14px !important; }
.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { margin: 0; }
.form-container-wide #DynamicFormObject { max-width: 100% !important; margin-inline: 0; }
}
/*------------------------------------------/*
HEADER
/*------------------------------------------*/
header { position: relative; z-index: 1001; }
@media(min-width: 1025px) {
#main-header, #header2 { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--header-bg, transparent); transition: 0.3s ease background-color, 0.3s ease box-shadow; height: var(--gap-96); }
:is(#main-header, #header2).show-bar { /* background-color: var(--header-bg, var(--white)); */ }
:is(#main-header, #header2) .max-width { width: 100%; }
:is(#main-header, #header2) .header-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: var(--gap-24) var(--gap-40); width: 100%; background: var(--header-bg); transition: 0.3s ease all; height: 100%; }
:is(#main-header, #header2).collapsed .header-container { justify-content: flex-start; transform: translateY(-100%); background: var(--header-bg); }
:is(#main-header, #header2) .header-right { display: flex; flex-direction: row; align-items: center; gap: 0; position: absolute; left: 0; right: 0; width: fit-content; margin-inline: auto; }
:is(#main-header, #header2).collapsed .header-right { position: static; width: auto; margin-inline: 0; }
:is(#main-header, #header2) .header-right .header-right-content { display: none; }
:is(#main-header, #header2) .menu-nav { display: flex; flex-direction: row; align-items: center; position: relative; }
:is(#main-header, #header2) .menu-nav ul#menu { display: flex; flex-direction: row; align-items: center; gap: var(--gap-32); margin: 0; padding: 0; list-style: none; transition: 0.3s ease opacity; }
:is(#main-header, #header2).collapsed .menu-nav ul#menu { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; }
:is(#main-header, #header2) .menu-nav ul#menu li { position: relative; margin: 0; }
:is(#main-header, #header2) .menu-nav ul#menu li.social-mobile { display: none; }
:is(#main-header, #header2) .menu-nav ul#menu li i.opensub { display: none; }
:is(#main-header, #header2) .menu-nav ul#menu li a { position: relative; display: inline-block; padding: 0; white-space: nowrap; transition: 0.3s ease color; }
:is(#main-header, #header2) .menu-nav ul#menu li a::after { content: ''; position: absolute; left: 0; bottom: calc(-1 * var(--gap-8)); width: 100%; height: var(--gap-2); background: var(--red); border-radius: var(--gap-64); opacity: 0; transition: 0.3s ease opacity; }
:is(#main-header, #header2) .menu-nav ul#menu li a:hover::after { opacity: 1; }
:is(#main-header, #header2) #nav-toggle { /* position: absolute; */ display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: var(--gap-50); height: var(--gap-50); border-radius: 86px; background: var(--red); cursor: pointer; opacity: 1; pointer-events: none; transition: 0.3s ease all; }
:is(#main-header, #header2).collapsed #nav-toggle { position: relative; opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; transition-delay: 0.15s; }
:is(#main-header, #header2) #nav-toggle span { position: absolute; display: block; width: 17px; height: 2px; background: var(--white); border-radius: 64px; background: transparent; }
:is(#main-header, #header2) #nav-toggle span::before { content: ''; position: absolute; left: 0; top: -4px; width: 17px; height: 2px; background: var(--white); border-radius: 64px; }
:is(#main-header, #header2) .header-center { display: flex; align-items: center; position: absolute; bottom: 50%; transform: translateY(50%); right: var(--gap-40); }
:is(#main-header, #header2) .header-center .header-buttons { display: flex; align-items: center; justify-content: center; }
:is(#main-header, #header2).collapsed .header-center { margin-inline-start: 0; }
:is(#main-header, #header2) .header-center .header-buttons a { display: inline-flex; align-items: center; justify-content: center; height: var(--gap-50); padding-inline: var(--gap-32); border-radius: 86px; background: var(--red); color: var(--white); border: none; min-width: unset; transition: 0.3s ease background, 0.3s ease color; }
:is(#main-header, #header2).over-hero .header-center .header-buttons a { background: var(--white); color: var(--black); }
:is(#main-header, #header2) .header-center .header-buttons a.shadow-btn::before, :is(#main-header, #header2) .header-center .header-buttons a.shadow-btn::after { color: var(--white); }
:is(#main-header, #header2).over-hero .header-center .header-buttons a.shadow-btn::before, :is(#main-header, #header2).over-hero .header-center .header-buttons a.shadow-btn::after { color: var(--black); }
/* QA 2 (sweeping): on a red section (--header-bg = brand red, JS .on-red) the red CTA and the compact red hamburger would melt into the bar - white with dark ink instead; covers the home hero at every scroll depth and the about opener */
:is(#main-header, #header2).on-red .header-center .header-buttons a { background: var(--white); color: var(--black); }
:is(#main-header, #header2).on-red .header-center .header-buttons a.shadow-btn::before, :is(#main-header, #header2).on-red .header-center .header-buttons a.shadow-btn::after { color: var(--black); }
:is(#main-header, #header2).on-red.collapsed #nav-toggle { background: var(--white); }
:is(#main-header, #header2).on-red.collapsed #nav-toggle span::before, :is(#main-header, #header2).on-red.collapsed #nav-toggle span::after { background: var(--black); }
:is(#main-header, #header2) .header-left { display: flex; align-items: center; position: absolute; left: var(--gap-40); bottom: 50%; transform: translateY(50%); }
:is(#main-header, #header2).collapsed .header-left { margin-inline-start: auto; }
:is(#main-header, #header2) .header-left .logoHeader { display: inline-flex; align-items: center; position: relative; }
:is(#main-header, #header2) .header-left .logoHeader img { width: var(--gap-140); height: var(--gap-24); object-fit: contain; display: block; transition: 0.3s ease filter; }
:is(#main-header, #header2).dark .header-left .logoHeader img { filter: brightness(0) invert(1); }
:is(#main-header, #header2).light .header-left .logoHeader img { filter: none; }
/* LOGO LOTTIE (JS initHeaderLogoLottie): the 820x180 comp is sized so its wordmark (770x132 inside it) lands exactly on the 140x24 svg slot; the svg stays for alt text + no-JS, the lottie is centred over it and follows the same .dark/.light filter */
:is(#main-header, #header2) .header-left .logoHeader.has-lottie img { opacity: 0; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--gap-140) * 820 / 770); height: calc(var(--gap-24) * 180 / 132); display: block; pointer-events: none; transition: 0.3s ease filter; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie svg { display: block; width: 100% !important; height: 100% !important; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie svg path { fill: var(--red); }
:is(#main-header, #header2).dark .header-left .logoHeader .logo-lottie { filter: brightness(0) invert(1); }
:is(#main-header, #header2).light .header-left .logoHeader .logo-lottie { filter: none; }
:is(#main-header, #header2).dark .menu-nav ul#menu li a { color: var(--white); }
:is(#main-header, #header2).light .menu-nav ul#menu li a { color: var(--black); }
body.ai-guide :is(#main-header, #header2).dark .header-center .header-buttons a { background: var(--white); color: var(--black); }
body.webinar :is(#main-header, #header2).dark .header-center .header-buttons a { background: var(--white); color: var(--black); }
body.webinar :is(#main-header, #header2).dark .header-center .header-buttons a.shadow-btn::before, body.webinar :is(#main-header, #header2).dark .header-center .header-buttons a.shadow-btn::after { color: var(--black); }
:is(#main-header, #header2) #nav-toggle span::after { background: var(--white); width: 17px; height: 2px; bottom: -4px; }
:is(#main-header, #header2):not(.collapsed) #nav-toggle { transform: translateX(50%) scale(0); width: 0; }
/* #main-header.collapsed { background: none; } */ /* QA 2: the bar is never transparent - it keeps the matched section colour (--header-bg) in every state, so the content never shows through the logo / CTA / hamburger */
/* CONTACT  start closed with white toggle + white CTA; solid white bar when opened */
body.contact :is(#main-header, #header2).collapsed #nav-toggle { background: var(--white); }
body.contact :is(#main-header, #header2).collapsed #nav-toggle span::before, body.contact :is(#main-header, #header2).collapsed #nav-toggle span::after { background: var(--black); }
body.contact :is(#main-header, #header2).collapsed .header-center .header-buttons a { background: var(--white); color: var(--black); }
body.contact :is(#main-header, #header2).collapsed .header-center .header-buttons a.shadow-btn::before, body.contact :is(#main-header, #header2).collapsed .header-center .header-buttons a.shadow-btn::after { color: var(--black); }
body.contact :is(#main-header, #header2).show-bar .header-container { background: var(--white); }
body.contact :is(#main-header, #header2).show-bar .menu-nav ul#menu li a { color: var(--black); }
body.contact :is(#main-header, #header2).contact-top, body.contact :is(#main-header, #header2).contact-top .header-container { background: transparent; }
body.contact :is(#main-header, #header2).contact-top .header-left .logoHeader :is(img, .logo-lottie) { filter: brightness(0); }
}
@media(max-width: 1025px) {
#main-header, #header2 { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--header-bg, var(--red)); display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--gap-20); transition: 0.3s ease background-color, 0.3s ease box-shadow; }
:is(#main-header, #header2).bg { box-shadow: none; background: var(--header-bg); }
:is(#main-header, #header2) .header-container { flex: 0 0 0; min-width: 0; padding: 0; overflow: visible; display: none; }
:is(#main-header, #header2) .header-right { display: flex; flex-direction: row; align-items: center; gap: 16px; }
:is(#main-header, #header2) .menu-nav { display: flex; align-items: center; }
:is(#main-header, #header2) .menu-nav ul#menu { display: none; }
:is(#main-header, #header2) #nav-toggle { display: flex; align-items: center; justify-content: center; width: var(--gap-38); height: var(--gap-38); border-radius: 86px; background: var(--red); }
:is(#main-header, #header2) #nav-toggle span, :is(#main-header, #header2) #nav-toggle span:before, :is(#main-header, #header2) #nav-toggle span:after { width: 17px; height: 2px; background: var(--white); border-radius: 64px; }
:is(#main-header, #header2) #nav-toggle span { background: transparent; }
:is(#main-header, #header2) #nav-toggle span:before { top: -3px; }
:is(#main-header, #header2) #nav-toggle span:after { bottom: -3px; top: auto; }
:is(#main-header, #header2) .header-center { display: flex; align-items: center; gap: 0; }
:is(#main-header, #header2) .header-center .header-buttons { display: flex; align-items: center; }
:is(#main-header, #header2) .header-center .header-buttons a { display: inline-flex; align-items: center; justify-content: center; height: var(--gap-38); padding-inline: var(--gap-12); padding-block: 0; border-radius: 86px; background: var(--red); color: var(--white); border: none; min-width: unset; }
:is(#main-header, #header2) .header-left .logoHeader img { width: 93px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); transition: 0.3s ease filter; }
:is(#main-header, #header2).light .header-left .logoHeader img { filter: none; }
/* QA 2: over a dark section (red hero, black sections) the CTA + hamburger flip to white with dark ink so they read */
:is(#main-header, #header2).dark .header-center .header-buttons a { background: var(--white); color: var(--black); }
:is(#main-header, #header2).dark #nav-toggle { background: var(--white); }
:is(#main-header, #header2).dark #nav-toggle span:before, :is(#main-header, #header2).dark #nav-toggle span:after { background: var(--black); }
:is(#main-header, #header2) .header-container { display: block; position: absolute; }
:is(#main-header, #header2) .menu-nav ul#menu { display: flex; list-style: none; margin: 0; background: var(--bg); padding: var(--gap-120) var(--gap-20) 0; }
:is(#main-header, #header2) .menu-nav ul#menu li.social-mobile, :is(#main-header, #header2) .menu-nav ul#menu li i.opensub { display: none; }
:is(#main-header, #header2) .header-center, :is(#main-header, #header2) .header-left { position: relative; z-index: 1010; }
:is(#main-header, #header2).open .header-left .logoHeader img { filter: brightness(0); }
/* LOGO LOTTIE on mobile: same comp centred over the 93x16 slot (93*820/770 x 16*180/132), colour states copied from the img: white by default, .light red, .open black */
:is(#main-header, #header2) .header-left { display: flex; }
:is(#main-header, #header2) .header-left .logoHeader { display: inline-flex; align-items: center; position: relative; }
:is(#main-header, #header2) .header-left .logoHeader.has-lottie img { opacity: 0; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(93px * 820 / 770); height: calc(16px * 180 / 132); display: block; pointer-events: none; filter: brightness(0) invert(1); transition: 0.3s ease filter; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie svg { display: block; width: 100% !important; height: 100% !important; }
:is(#main-header, #header2) .header-left .logoHeader .logo-lottie svg path { fill: var(--red); }
:is(#main-header, #header2).light .header-left .logoHeader .logo-lottie { filter: none; }
:is(#main-header, #header2).open .header-left .logoHeader .logo-lottie { filter: brightness(0); }
:is(#main-header, #header2) #nav-toggle.active span::before, :is(#main-header, #header2) #nav-toggle.active span::after { top: 0; bottom: auto; }
:is(#main-header, #header2) #nav-toggle.active span::before { transform: rotate(45deg); }
:is(#main-header, #header2) #nav-toggle.active span::after { transform: rotate(-45deg); }
}
/**/
/*------------------------------------------/*
MEGA MENU
/*------------------------------------------*/
:is(#main-header, #header2) { --mgm-font-title: var(--font-2); --mgm-font-item: var(--font-1); }
.mgMenu { --mgm-title-color: var(--black); --mgm-text: var(--grey); --mgm-accent: var(--red); }
@media(min-width: 1025px) {
.mgMenu { padding-top: var(--gap-52); }
.mgMenu::before { content: ""; position: fixed; inset: 0; top: var(--gap-96); background: var(--overlay); z-index: -1; pointer-events: none; }
.mgMenu--t1 .mgMenu-inner { gap: var(--mgm-gap-cols); }
.mgMenu--t1 .mgMenu-groups { padding-inline-end: 0; }
.mgMenu--t1 .mgMenu-bannerImg { border: 1px solid var(--stroke-white); }
:is(#main-header, #header2) .menu-nav ul#menu .mgMenu .mgMenu-item a { color: var(--mgm-text); white-space: normal; }
:is(#main-header, #header2) .menu-nav ul#menu .mgMenu .mgMenu-item a::after { bottom: 0; }
}
@media(max-width: 1025px) {
.mgMenuMob { --mgm-mob-bg: var(--bg); }
:is(#main-header, #header2) .menu-nav ul#menu li.mgMenuMob .mgMenuMob-back { flex-direction: row-reverse; }
:is(#main-header, #header2) .menu-nav ul#menu li.mgMenuMob .mgMenuMob-chevron { width: 7px; height: auto; }
:is(#main-header, #header2) .menu-nav ul#menu li.mgMenuMob .mgMenuMob-chevron path { fill: currentColor; }
}
/**/
/*------------------------------------------/*
FOOTER
/*------------------------------------------*/
footer .section.grid-content-section.touch { padding-block: var(--gap-140) calc(var(--gap-140) ); background: var(--black); padding-inline: var(--gap-280); position: relative; z-index: 1; overflow: hidden; }
footer .section.grid-content-section.touch h2 { color: var(--white); direction: ltr; }
footer .section.grid-content-section.touch .grid-boxes { margin-top: var(--gap-80); }
footer .section.grid-content-section.touch .grid-boxes .grid-box { float: none !important; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-image { width: var(--gap-66); margin-inline: auto !important; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-title { margin-top: var(--gap-20); }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-title h3 { font-size: unset; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-title h3 a { color: var(--white); }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle { margin-top: var(--gap-12); }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button { margin-top: var(--gap-32); }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle span { color: var(--white); opacity: 0.8; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button a { display: block; width: fit-content; min-width: var(--gap-140); height: var(--gap-52); align-content: center; margin-inline: auto; color: var(--white); border: 2px solid var(--white); border-radius: 50px; background: var(--black); }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button a.shadow-btn { display: flex; align-items: center; justify-content: center; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button a.shadow-btn::before, footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button a.shadow-btn::after { color: var(--white); }
/* FALLING ICONS (JS initFalling2DMatterJS, ported from aiready's .section-resource): the canvas fills the black touch section behind the title + cards and is bottom-anchored so the icons pile at the floor; h2 + cards are lifted above it so the links and pill buttons stay clickable */
footer .section.grid-content-section.touch > :is(h2, .grid-boxes) { position: relative; z-index: 2; }
footer .section.grid-content-section.touch .section-resource { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; z-index: 1; display: block; }
footer .section.grid-content-section.touch .section-resource .canvas-matter { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; pointer-events: none; }
footer .section.grid-content-section.touch .section-resource .canvas-matter__before { display: none; }
footer .section.grid-content-section.touch .section-resource .canvas-matter__target { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
footer .section.grid-content-section.touch .section-resource #canvas-target canvas { position: relative; top: -1px; left: -1px; max-width: calc(100% + 2px); max-height: calc(100% + 2px); min-width: calc(100% + 2px); min-height: calc(100% + 2px); pointer-events: all; }
#SiteFooter { background: var(--red); position: sticky; bottom: 0; }
#SiteFooter .footer-text-divided { padding: var(--gap-80) var(--gap-385); }
#SiteFooter .footer-text-divided .footer-text-middle { display: flex; flex-direction: row; gap: var(--gap-80); width: 100%; }
#SiteFooter .footer-text-divided .footer-text-middle > p { display: none; }
#SiteFooter .footer-text-divided .footer-text-middle > ul { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-4); list-style: none; padding: 0; margin: 0; }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li:first-child { margin-bottom: var(--gap-16); }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li { color: var(--white); text-align: start; white-space: nowrap; }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li h4 { color: var(--white); margin: 0; }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li a { color: var(--white); }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li a.shadow-btn::before, #SiteFooter .footer-text-divided .footer-text-middle > ul > li a.shadow-btn::after { color: var(--white); }
#SiteFooter .footer-text { padding: var(--gap-16) var(--gap-385); border-top: 1px solid var(--stroke-white-24); text-align: unset !important; }
#SiteFooter .footer-text > span { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
#SiteFooter .footer-text > span > p { display: none; }
#SiteFooter .footer-text > span > ul:first-of-type { display: flex; flex-direction: row; align-items: center; list-style: none; padding: 0; margin: 0; }
#SiteFooter .footer-text > span > ul:first-of-type > li { display: flex; align-items: center; color: var(--white); }
#SiteFooter .footer-text > span > ul:first-of-type > li:not(:last-child)::after { content: ""; display: block; width: 1px; height: var(--gap-8); background: var(--white); margin-inline: var(--gap-16); flex-shrink: 0; }
#SiteFooter .footer-text > span > ul:last-of-type { display: flex; flex-direction: row; align-items: center; gap: var(--gap-20); list-style: none; padding: 0; margin: 0; }
#SiteFooter .footer-text > span > ul:last-of-type li a img { width: var(--gap-20); height: var(--gap-20); display: block; }
#SiteFooter .footer-text .footerSocialIcons { display: none; }
#SiteFooter .site-credit.alternative { display: none; }
@media(min-width: 1025px) {
/* float:none - .footer-text is a floated col-xs-12 and the GENERAL reset kills the .row clearfix; with .site-credit hidden nothing cleared it, so it hung 54px below #SiteFooter. Desktop only: on mobile the float sits over the template's 50px #SiteFooter padding-bottom */
#SiteFooter .footer-text { float: none; }
}
@media(max-width: 1025px) {
#SiteFooter { position: static; }
#SiteFooter .footer-text-divided { display: flex; flex-direction: column; align-items: flex-start; padding: var(--gap-32) var(--gap-20); gap: var(--gap-32); }
#SiteFooter .footer-text-divided .footer-text-middle { flex-direction: column; gap: 0; padding: 0; }
#SiteFooter .footer-text-divided .footer-text-middle > ul { border-bottom: 1px solid var(--stroke-white-24); }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li:first-child { width: 100%; margin-bottom: 0; padding-block: var(--gap-14); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); cursor: pointer; }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li:not(:first-child) { display: none; padding-inline-start: var(--gap-40); white-space: normal; }
#SiteFooter .footer-text-divided .footer-text-middle > ul > li:not(:first-child):not(:last-child) { margin-bottom: var(--gap-4); }
#SiteFooter .footer-text-divided .footer-text-middle > ul.open > li:not(:first-child) { display: block; }
#SiteFooter .footer-text-divided .footer-text-middle > ul.open > li:last-child { padding-bottom: var(--gap-14); }
#SiteFooter .footer-text-divided .footer-text-middle .footer-accordion-icon { position: relative; width: var(--gap-14); height: var(--gap-14); flex-shrink: 0; }
#SiteFooter .footer-text-divided .footer-text-middle .footer-accordion-icon::before, #SiteFooter .footer-text-divided .footer-text-middle .footer-accordion-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--white); transform: translate(-50%,-50%); transition: 0.3s ease transform; }
#SiteFooter .footer-text-divided .footer-text-middle .footer-accordion-icon::before { width: 100%; height: 1.5px; }
#SiteFooter .footer-text-divided .footer-text-middle .footer-accordion-icon::after { width: 1.5px; height: 100%; }
#SiteFooter .footer-text-divided .footer-text-middle > ul.open .footer-accordion-icon::after { transform: translate(-50%,-50%) scaleY(0); }
#SiteFooter .footer-text-divided .footer-social-mobile { display: flex; flex-direction: row; align-items: center; gap: var(--gap-20); list-style: none; padding: 0; margin: 0; }
#SiteFooter .footer-text-divided .footer-social-mobile li a img { width: var(--gap-20); height: var(--gap-20); display: block; }
#SiteFooter .footer-text { padding: var(--gap-16) var(--gap-20); }
#SiteFooter .footer-text > span { flex-direction: row; align-items: center; }
#SiteFooter .footer-text > span > ul:last-of-type { display: none; }
#SiteFooter .footer-text > span > ul:first-of-type > li:not(:last-child)::after { content: none; }
#SiteFooter .footer-text > span > ul:first-of-type > li:first-child::after { content: ""; display: block; width: 1px; height: var(--gap-8); background: var(--white); margin-inline: var(--gap-16); flex-shrink: 0; }
#SiteFooter .footer-text > span > ul:first-of-type { width: 100%; }
#SiteFooter .footer-text > span > ul:first-of-type > li:last-child { margin-inline-start: auto; }
}
/**/
/*------------------------------------------/*
ROTATING IMAGE TRAIL
/*------------------------------------------*/
body.about :is(div,#LobbyModule) #lobbyview { position: relative; overflow: clip; }
body.about :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.cursor-anim { display: none; }
.rotating-image-trail__collection { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.rotating-image-trail__list { display: flex; flex-wrap: wrap; gap: var(--gap-16); }
.rotating-image-trail__item { z-index: 10; pointer-events: none; user-select: none; }
.rotating-image-trail__card { position: relative; width: var(--gap-194); aspect-ratio: 3 / 4; }
.rotating-image-trail__card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.about #lobbyview [data-trail-item="hidden"] { position: absolute; transform: translate(-50%, -50%) scale(0) rotate(-20deg); }
body.about #lobbyview [data-trail-item="visible"] { position: absolute; transform: translate(-50%, -50%) scale(1) rotate(0.001deg); transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1); }
body.about #lobbyview [data-trail-item="transition-out"] { position: absolute; transform: translate(-50%, -50%) scale(0) rotate(180deg); transition: transform 0.8s cubic-bezier(0.625, 0, 0.875, 0); }
/**/
/*------------------------------------------/*
METHOD WHEEL
/*------------------------------------------*/
/* designer package (method-wheel.css, 2026-10-01) for the inline svg.rk-wheel: --rk-angle drives the red wedge AND the mask that reveals the white labels, so they can never drift; the curve is the method-page lottie's. Do NOT add easing/transition on .rk-rot */
.rk-wheel { --rk-angle: 0deg; --rk-dur: 600ms; --rk-ease: cubic-bezier(.2, 0, .15, 1); display: block; width: 100%; height: auto; overflow: visible; }
.rk-wheel .rk-rot { transform: rotate(var(--rk-angle)); transform-origin: 295px 295px; transition: transform var(--rk-dur) var(--rk-ease); }
.rk-wheel .rk-high { fill: transparent; transition: fill 150ms ease; pointer-events: none; }
.rk-wheel .rk-high.is-hover { fill: var(--wheel-hover); }
.rk-wheel .rk-hit { fill: transparent; cursor: pointer; outline: none; }
.rk-wheel .rk-hit:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.rk-wheel .rk-rot, .rk-wheel .rk-high { transition-duration: 1ms; }
}
/**/
/*------------------------------------------/*
SECTIONS
/*------------------------------------------*/
:is(div,#LobbyModule) #lobbyview #headline { font-size: unset; margin-bottom: var(--gap-40); max-width: var(--gap-1200); margin-inline: auto; }
:is(div,#LobbyModule) #lobbyview #headline h1 { text-wrap: balance; }
:is(div,#LobbyModule) #lobbyview > h2 { max-width: var(--gap-685); margin: 0 auto; text-align: center; }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer { }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a { margin-top: var(--gap-24); display: block; /* margin-inline: auto !important; */ }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { display: flex; justify-content: center; }
#allSectionsWrapper .section.grid-row-section { padding: var(--gap-120) var(--gap-260) var(--gap-120); }
#allSectionsWrapper .section.grid-row-section .grid-rows { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 0; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; gap: var(--gap-200); }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box { width: 50%; display: flex; align-items: center; justify-content: center; height: 31.771vw; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { display: flex !important; flex-direction: column; justify-content: center; gap: var(--gap-32); width: 50%; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-32); width: 100%; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { width: 100%; text-align: start; margin: 0; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h3 { margin: 0; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text .grid-row-inner-text { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gap-12); width: 100%; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text :is(p,li) { color: var(--grey); }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides { height: 100%; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item { height: 100%; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { height: 100%; }
@media(min-width: 1025px) {
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row { gap: 0; }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box { width: 35.885vw; height: auto; }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { width: 100%; height: auto; display: block; }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { width: 28.542vw; }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { gap: var(--gap-12); }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { margin-bottom: var(--gap-20); }
#allSectionsWrapper .section.grid-row-section:not([data-id="25621"],[data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { margin-top: var(--gap-28); }
/* .method row: the CMS wheel png is swapped for the method lottie by JS (initMethodRowLottie), same 35.885vw cell, square */
#allSectionsWrapper .section.grid-row-section.method.has-lottie .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { display: none; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-lottie { width: 100%; max-width: var(--gap-646); aspect-ratio: 1; margin-inline: auto; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-lottie svg { display: block; width: 100% !important; height: 100% !important; }
/* .method row on the home page (27220): the png is swapped for the interactive inline svg by JS (initMethodRowWheel), same square cell */
#allSectionsWrapper .section.grid-row-section.method.has-wheel .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { display: none; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-wheel { width: 100%; max-width: var(--gap-646); aspect-ratio: 1; margin-inline: auto; }
}
#allSectionsWrapper .section.grid-row-section[data-id="25621"] { background: var(--black); padding-block: var(--gap-120); }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { color: var(--white); gap: 0; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text p + p { margin-top: 0; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text :is(p,li) { color: var(--white); }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { width: 81%; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.flexslider-box { height: 27.813vw; border-radius: var(--gap-10); overflow: hidden; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { object-fit: cover; object-position: right; }
/* SEO-GEO AI-agents row (27732) = the 25621 row in white (Figma 3362:17075) */
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) { background: var(--white); padding-block: var(--gap-120); }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box { width: var(--gap-619); flex-shrink: 0; height: 27.813vw; border-radius: var(--gap-10); overflow: hidden; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { width: 100%; object-fit: cover; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { width: auto; flex: 1; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { gap: var(--gap-24); }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text :is(h2,p,li) { color: var(--black); }
#allSectionsWrapper .section.grid-text-section { padding: var(--gap-120) var(--gap-260); }
#allSectionsWrapper .section.grid-text-section .section-title { margin-bottom: var(--gap-32); }
#allSectionsWrapper .section.grid-text-section > * { width: 60%; margin-inline: auto; }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started):not([data-id="25696"]) > .grid-text { width: var(--gap-1078); max-width: 100%; }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started):not([data-id="25696"]) .grid-text-content { display: flex; flex-direction: column; gap: 0; }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started):not([data-id="25696"]) .grid-text-content p { margin: 0; color: var(--black); text-align: center; }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started) .grid-text-content p { color: var(--grey); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] { padding-block: var(--gap-120) var(--gap-72); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .section-title { margin-bottom: var(--gap-56); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .section-title h2 { text-align: start; }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content > * { margin: 0; margin-top: var(--gap-32); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content > *:first-child { margin-top: 0; }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content h3.grid-text-subhead + * { margin-top: var(--gap-16); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content > a.sec-button { margin-top: var(--gap-72); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content > p { color: var(--grey); }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text .grid-text-content { text-align: start; }
#allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text .grid-text-content h2 { font-size: clamp(14px,var(--fs-19),300px); }
#allSectionsWrapper .section.grid-text-section.quote { display: flex; flex-direction: column; align-items: center; padding-block: var(--gap-120); padding-inline: 23.75vw; }
#allSectionsWrapper .section.grid-text-section.quote .grid-text.gridTextWithImg { display: flex; flex-direction: column; align-items: center; gap: var(--gap-40); width: 100%; }
#allSectionsWrapper .section.grid-text-section.quote .grid-text-content { display: none; }
#allSectionsWrapper .section.grid-text-section.quote .grid-text > p { max-width: 52.083vw; text-align: center; color: var(--black); }
#allSectionsWrapper .section.grid-text-section.quote .grid-text > p::before { content: ''; display: block; font-size: clamp(40px,var(--fs-70),300px); font-family: var(--font-2); color: var(--red); line-height: 1; text-align: center; margin-bottom: -10px; background-image: url("https://media.getmood.io/warehouse/dynamic/769401.svg"); width: var(--gap-28); height: var(--gap-21); margin-inline: auto; margin-bottom: var(--gap-30); }
#allSectionsWrapper .section.grid-text-section.quote .quote-avatar { display: flex; flex-direction: column; align-items: center; gap: var(--gap-16); padding-top: var(--gap-18); }
#allSectionsWrapper .section.grid-text-section.quote .quote-avatar .gridTextImgContainer img { width: var(--gap-52); height: var(--gap-52); border-radius: 999px; object-fit: cover; display: block; }
#allSectionsWrapper .section.grid-text-section.quote .section-title { margin: 0; }
#allSectionsWrapper .section.grid-text-section.quote .section-title h2 { text-align: center; }
#allSectionsWrapper .section.grid-text-section.quote .quote-avatar > h2 { text-align: center; color: var(--black); margin-top: calc(-1 * var(--gap-16)); }
#allSectionsWrapper .section.grid-text-section.quote[data-id="25691"] { background: white; }
#allSectionsWrapper .section.grid-text-section.quote[data-id="25701"] { background: white; }
/* grid-video-section (home 25604): the CMS embed is Vimeo's responsive code (div padding-top 56.25% + absolute iframe) - QA 2 wants it at the content width (1400x638) with 10px corners; the 16:9 wrapper is cropped top/bottom by .moreText. The wrapper needs an explicit width - as a flex item with only an absolute child it collapses to 0 */
#allSectionsWrapper .section.grid-video-section { display: flex; justify-content: center; padding-block: var(--gap-120); }
#allSectionsWrapper .section.grid-video-section .grid-text { width: var(--gap-1400); max-width: 100%; margin: 0; padding: 0; }
#allSectionsWrapper .section.grid-video-section .grid-text .grid-text-content { width: 100%; float: none; }
#allSectionsWrapper .section.grid-video-section .grid-text .grid-text-content .moreText { display: flex; justify-content: center; align-items: center; height: 33.229vw; overflow: hidden; border-radius: 10px; }
#allSectionsWrapper .section.grid-video-section .grid-text .grid-text-content .moreText > div { width: 100%; flex-shrink: 0; }
/* #allSectionsWrapper .section.grid-video-section .grid-text .grid-text-content .moreText iframe { width: 118%; height: 38.438vw; display: block; } */
#allSectionsWrapper .section.grid-text-section.started { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-56); padding-block: var(--gap-120); padding-inline: var(--gap-260); }
#allSectionsWrapper .section.grid-text-section.started .section-title { margin: 0; width: auto; }
#allSectionsWrapper .section.grid-text-section.started .section-title h2 { text-align: center; color: var(--black); }
#allSectionsWrapper .section.grid-text-section.started .grid-text { width: auto; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content { display: flex; flex-direction: column; align-items: center; gap: var(--gap-16); width: auto; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content h2 { text-align: center; color: var(--black); }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p { max-width: var(--gap-420); text-align: center; color: var(--grey); }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content a.sec-button { margin-top: var(--gap-40); }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p:has(> a) { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; margin: var(--gap-40) 0 0; font-size: 0; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p:has(> a) a { display: inline-flex; gap: var(--gap-8); border-bottom: 1px solid var(--red); text-decoration: none; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p:has(> a) a:not(:first-child) { margin-inline-start: var(--gap-32); }
#allSectionsWrapper .section.prod-service { background: var(--bg); }
#allSectionsWrapper .section.prod-service .section-title { padding-block-start: var(--gap-120); padding-block-end: var(--gap-24); padding-inline: var(--gap-260); text-align: start; width: 100%; }
#allSectionsWrapper .section.prod-service .section-topText { padding-inline: var(--gap-260); padding-block-end: var(--gap-72); text-align: start; }
#allSectionsWrapper .section.prod-service .section-topText p { max-width: var(--gap-600); }
#allSectionsWrapper .section.prod-service .section-topText :is(p, li) { color: var(--grey); }
#allSectionsWrapper .section.prod-service .dynamic-grid-wrapper { padding-inline: var(--gap-260); padding-block-end: var(--gap-120); }
#allSectionsWrapper .section.prod-service .dynamic-grid-items { display: flex; flex-direction: column; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-20); padding-block: var(--gap-16); position: relative; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--gap-24); width: var(--gap-700); flex-shrink: 0; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right .field-text:last-child { padding-block-end: 0; text-shadow: 0px 38px 0px rgba(255,50,39,1); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .field-richtext { flex: 1; opacity: 0.8; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .field-richtext p { width: 65%; margin-inline-start: auto; color: var(--grey); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right .field-text:first-child { min-width: var(--gap-18); text-align: center; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow { width: var(--gap-48); height: var(--gap-48); border-radius: 50%; background: var(--white); box-shadow: var(--shadow); flex-shrink: 0; position: relative; overflow: hidden; transition: 0.3s ease all; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow:before, #allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow:after { content: ""; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: inherit; transition: 0.3s ease all; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow:before { transform: translateX(100%); background-image: url("https://media.getmood.io/warehouse/dynamic/769403.svg"); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow:after { background-image: url("https://media.getmood.io/warehouse/dynamic/769402.svg"); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .dynamic-grid-field.field-button { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .dynamic-grid-field.field-button a { display: block; width: 100%; height: 100%; font-size: 0; color: transparent; text-decoration: none; }
#allSectionsWrapper .section.event-cube { padding: var(--gap-120) var(--gap-260); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper { }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items { background: var(--white); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.01), 0 4px 24px 0 rgba(0, 0, 0, 0.02); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item { display: flex; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .right-wrapper { padding-block: var(--gap-12); padding-inline-start: var(--gap-12); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .right-wrapper img { width: 100%; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper { text-align: start; align-content: center; padding-inline: var(--gap-48); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-text.title { margin-bottom: var(--gap-12); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-text.title p { }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-textarea { }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-textarea p { color: var(--grey); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper { min-width: 20.938vw; align-content: center; padding-inline: var(--gap-40); border-inline-start: 2px solid var(--bg); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.red { margin-bottom: var(--gap-20); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.red p { color: var(--red); }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.full-date { }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper .dynamic-grid-field.field-text.full-date p { }
#allSectionsWrapper .section.dynamicGrid.cards { padding: var(--gap-260) var(--gap-260) var(--gap-120); background: #fff; }
#allSectionsWrapper .section.dynamicGrid.cards .section-title { text-align: center; }
#allSectionsWrapper .section.dynamicGrid.cards .section-topText { margin-top: var(--gap-24); display: flex; justify-content: center; }
#allSectionsWrapper .section.dynamicGrid.cards .section-topText p { color: var(--grey); max-width: var(--gap-800); text-align: center; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-wrapper { margin-top: var(--gap-72); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-items { display: flex; flex-direction: column; align-items: center; gap: var(--gap-280); position: relative; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: var(--gap-48); border-radius: 10px; border: 1px solid var(--stroke-white); aspect-ratio: 500/600; width: 100%; max-width: var(--gap-500); position: sticky; top: var(--gap-160); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+1) { background: var(--blue); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+2) { background: var(--red); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+3) { background: var(--green); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n) { background: var(--black); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .dynamic-grid-field.field-img.icon img { width: var(--gap-30); height: var(--gap-28); object-fit: contain; filter: brightness(0) invert(1); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-number-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--gap-30); align-self: stretch; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .dynamic-grid-field p { color: var(--white); }
#allSectionsWrapper .section.dynamicGrid.cards.wide { padding: var(--gap-120) var(--gap-260) 0; background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-items { display: flex; gap: var(--gap-280); align-items: stretch; counter-reset: card; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: var(--gap-700); max-width: unset; aspect-ratio: 703/400; padding: var(--gap-40); position: sticky; top: var(--gap-300); margin-inline: auto; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .card-number-wrapper { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--gap-40); align-self: stretch; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .card-number-wrapper::before { counter-increment: card; content: counter(card, decimal-leading-zero); color: var(--white); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text { display: flex; flex-direction: column; gap: var(--gap-24); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text p { text-align: right; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--gap-12); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul li { width: fit-content; display: flex; align-items: center; gap: var(--gap-8); color: var(--white); font-family: var(--font-1); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul li::before { content: ""; width: var(--gap-14); height: var(--gap-12); flex-shrink: 0; background: var(--white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center/contain; }
#allSectionsWrapper .section.cards.with-img { padding: var(--gap-260) var(--gap-260) var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.cards.with-img .section-title { text-align: center; }
#allSectionsWrapper .section.cards.with-img .section-topText { margin-top: var(--gap-24); display: flex; justify-content: center; }
#allSectionsWrapper .section.cards.with-img .section-topText p { color: var(--grey); max-width: var(--gap-600); text-align: center; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-wrapper { margin-top: var(--gap-72); }
/* QA 2: grid-auto-rows 1fr makes every sticky card the height of the tallest one so the stack covers perfectly (flex let 610/635/610 peek through) */
#allSectionsWrapper .section.cards.with-img .dynamic-grid-items { display: grid; grid-template-columns: 100%; grid-auto-rows: 1fr; justify-items: center; gap: var(--gap-280); position: relative; padding-bottom: var(--gap-160); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item { display: flex; flex-direction: column; width: 100%; max-width: var(--gap-500); padding: var(--gap-8); border: 1px solid var(--stroke-white); border-radius: 10px; position: sticky; top: var(--gap-160); justify-content: space-between; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item:nth-child(4n+1) { background: var(--blue); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item:nth-child(4n+2) { background: var(--red); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item:nth-child(4n+3) { background: var(--green); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item:nth-child(4n) { background: var(--black); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .with-img-content { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); padding: var(--gap-40) var(--gap-56) var(--gap-56); text-align: center; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .with-img-content .dynamic-grid-field.field-img.icon img { width: auto; height: var(--gap-16); object-fit: contain; filter: brightness(0) invert(1); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .with-img-content .dynamic-grid-field p { color: var(--white); }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .dynamic-grid-field.field-img:not(.icon) { display: flex; align-items: center; justify-content: center; height: var(--gap-300); padding: 0; border: 1px solid var(--stroke-white-40); border-radius: 10px; overflow: hidden; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .dynamic-grid-field.field-img:not(.icon) img { width: 100%; height: 100%; object-fit: cover; display: block; }
#allSectionsWrapper .section.dynamicGrid.num-cards { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: var(--gap-120) var(--gap-260); background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper { width: 36%; position: sticky; top: calc(var(--headerHeight) + var(--gap-120)); display: flex; flex-direction: column; gap: var(--gap-24); text-align: start; }
#allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .section-topText p { color: var(--grey); }
#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-wrapper { width: 49%; }
#allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .dynamic-grid-field.field-button { margin-top: var(--gap-8); }
#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-main { display: none; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-items, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-items) { display: flex; flex-direction: column; gap: var(--gap-20); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item) { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; background: var(--white); box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .dynamic-grid-field.field-text.number, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number) { width: var(--gap-200); height: var(--gap-200); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--red-light-2); border-radius: 5px; margin: var(--gap-8); margin-inline-end: 0; }
#allSectionsWrapper .section.dynamicGrid.num-cards:not(.after-webinar) .dynamic-grid-item .dynamic-grid-field.field-text.number { height: auto; min-height: var(--gap-200); align-self: stretch; background: var(--red-light-2); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .dynamic-grid-field.field-text.number p, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number p) { color: var(--red); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .num-cards-text, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text) { flex: 1; display: flex; flex-direction: column; gap: var(--gap-16); text-align: start; padding-right: var(--gap-56); padding-left: var(--gap-120); }
#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .num-cards-text .dynamic-grid-field.field-richtext.text p { color: var(--grey); }
#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--gap-16); width: 70%; margin-inline: auto; padding-top: 0; }
#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .num-cards-title-wrapper { width: 100%; position: static; top: auto; }
#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-wrapper { width: 100%; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-items, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-items) { gap: var(--gap-4); padding-bottom: 0; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-item, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item) { height: var(--gap-152); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-item .dynamic-grid-field.field-text.number, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number) { width: var(--gap-136); height: var(--gap-136); }
#allSectionsWrapper .section.dynamicGrid.agents { padding: var(--gap-120) var(--gap-260) var(--gap-120); background: var(--bg); display: flex; flex-direction: column; align-items: center; }
#allSectionsWrapper .section.dynamicGrid.agents .section-title { text-align: center; }
#allSectionsWrapper .section.dynamicGrid.agents .section-topText { margin-top: var(--gap-24); display: flex; justify-content: center; }
#allSectionsWrapper .section.dynamicGrid.agents .section-topText p { color: var(--grey); max-width: var(--gap-600); text-align: center; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-wrapper { margin-top: var(--gap-56); width: var(--gap-1045); max-width: 100%; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-items { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-64) var(--gap-20); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item { display: flex; flex-direction: column; cursor: pointer; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.3s ease all; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more { position: absolute; bottom: var(--gap-16); right: var(--gap-16); width: var(--gap-48); height: var(--gap-48); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-2); display: block; transition: 0.3s ease transform; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::before, #allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--black); border-radius: var(--gap-2); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::before { width: var(--gap-14); height: var(--gap-2); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::after { width: var(--gap-2); height: var(--gap-14); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .agent-text { display: flex; flex-direction: column; gap: var(--gap-4); padding: var(--gap-20) var(--gap-20) 0; text-align: center; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .agent-text .dynamic-grid-field p { margin: 0; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .agent-text .dynamic-grid-field.field-text.sub-title p { color: var(--grey); }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-richtext.rich-text, #allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-iframe { display: none; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: 0.3s ease all; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item.video-ready .dynamic-grid-field.field-img.pic .agent-video { opacity: 1; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-video iframe { width: 100%; height: 100%; border: 0; display: block; }
#allSectionsWrapper .section.dynamicGrid.q-a { padding: var(--gap-120) var(--gap-260); background: none; }
#allSectionsWrapper .section.dynamicGrid.q-a .section-title { text-align: center; }
#allSectionsWrapper .section.dynamicGrid.q-a .section-topText { margin-top: var(--gap-24); display: flex; justify-content: center; }
#allSectionsWrapper .section.dynamicGrid.q-a .section-topText p { color: var(--grey); max-width: var(--gap-600); text-align: center; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-wrapper { margin-top: var(--gap-32); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-items { display: flex; flex-direction: column; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item { display: flex; flex-direction: column; gap: var(--gap-38); padding-block: var(--gap-38); border-bottom: 1px solid var(--stroke-red); position: relative; transition: 0.3s ease padding; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item::before { content: ""; position: absolute; inset: var(--gap-10) 0; background: var(--white); border-radius: 10px; opacity: 0; transition: 0.3s ease all; z-index: 0; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item > * { position: relative; z-index: 1; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open { gap: var(--gap-24); padding-inline: var(--gap-24); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open::before { opacity: 1; inset: var(--gap-8) 0; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: var(--gap-40); cursor: pointer; text-align: start; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question p { flex: 1; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle { position: relative; width: var(--gap-26); height: var(--gap-26); flex-shrink: 0; transition: 0.3s ease transform; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::before, #allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--red); transition: 0.3s ease all; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::before { width: var(--gap-14); height: var(--gap-2); border-radius: var(--gap-2); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::after { width: var(--gap-2); height: var(--gap-14); border-radius: var(--gap-2); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open .dynamic-grid-field.field-text.question .qa-toggle { transform: rotate(45deg); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-richtext.answer { display: none; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open .dynamic-grid-field.field-richtext.answer { display: block; text-align: start; width: 100%; padding-inline-end: var(--gap-80); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-richtext.answer p { color: var(--grey); }
#allSectionsWrapper .section.dynamicGrid.q-a[data-id="25698"] { background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.alternative { padding: var(--gap-120) var(--gap-260) var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-items { display: flex; flex-direction: column; gap: var(--gap-80); }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item { display: grid; grid-template-columns: var(--gap-410) 1fr; column-gap: var(--gap-300); row-gap: var(--gap-24); align-items: start; padding-block-end: 0; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-text.title { grid-column: 1; grid-row: 1; text-align: start; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext { grid-column: 2; display: flex; flex-direction: column; gap: var(--gap-16); }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext p { color: var(--grey); opacity: 0.8; text-align: right; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-8); }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext ul li { display: flex; align-items: center; gap: var(--gap-8); width: fit-content; color: var(--grey); flex-direction: row-reverse; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext ul li::after { content: ""; min-width: var(--gap-6); height: auto; aspect-ratio: 1; background: var(--red); border-radius: 50%; flex-shrink: 0; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext p a { color: var(--red); border-bottom: 1px solid var(--red); }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-button { grid-column: 2; }
#allSectionsWrapper .section.dynamicGrid.one-row { padding: var(--gap-120) var(--gap-260); background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item { display: flex; flex-direction: row; align-items: center; gap: var(--gap-200); }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .one-row-text { flex: 1; display: flex; flex-direction: column; gap: var(--gap-24); text-align: start; }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext p { color: var(--grey); }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-img { flex: 0 0 var(--gap-600); }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-img img { width: 100%; aspect-ratio: 619/534; object-fit: cover; border-radius: 10px; display: block; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] { background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item { justify-content: space-between; align-items: flex-start; flex-direction: row-reverse; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text { flex: 0 0 var(--gap-690); align-items: flex-start; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3 { margin: 0 0 var(--gap-16); }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3:not(:first-child) { margin-top: var(--gap-64); }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext p { opacity: 0.8; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext p + p { margin-top: var(--gap-16); }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-img { flex: 0 0 var(--gap-477); }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-img img { aspect-ratio: 477/532; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-iframe { flex: 0 0 var(--gap-477); position: sticky; top: calc(var(--headerHeight) + var(--gap-40)); aspect-ratio: 477/532; border-radius: 10px; overflow: hidden; background: var(--black); }
@media(min-width: 1025px) {
#allSectionsWrapper .section.dynamicGrid.method { display: flex; flex-direction: row; align-items: stretch; padding: 0; background: var(--bg); }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-wrapper { width: 50%; flex-shrink: 0; }
#allSectionsWrapper .section.dynamicGrid.method .method-wheel-seat { width: 50%; flex-shrink: 0; pointer-events: none; }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-items { display: flex; flex-direction: column; }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-20); padding-inline: var(--gap-260) var(--gap-40); text-align: center; }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field { width: 100%; }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field p { margin: 0; text-align: center; }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-richtext.station-text { padding-inline: var(--gap-72); }
#allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field.field-richtext.station-text p { color: var(--grey); }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { margin-bottom: 24px; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-iframe iframe { width: 111% !important; height: 162% !important; left: 50% !important; bottom: 50% !important; transform: translate(-50%,-21%); }
}
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery { min-height: unset; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container { }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes { background: var(--white); gap: var(--gap-60); padding-block: var(--gap-10); justify-content: flex-start; padding-inline-start: var(--gap-64); }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes { display: flex; flex-wrap: nowrap; width: max-content; animation: scrollText 102s linear infinite; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes > div { width: var(--gap-110); }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes > div .image-link-container { display: none; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes > div .boxes-images-outer-image { padding: 0; height: var(--gap-40); width: 100%; background-position: center; background-size: contain !important; background-repeat: no-repeat; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes > div .boxes-images-outer-image { filter: unset; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .slide-wrapper { display: flex; width: 100%; background: var(--black); }
#allSectionsWrapper .section.grid-gallery-section.wins { background: var(--black); }
#allSectionsWrapper .section.grid-gallery-section.wins .section-title { padding-block: var(--gap-120) 0; padding-inline: var(--gap-260); }
#allSectionsWrapper .section.grid-gallery-section.wins .section-title h2 { color: var(--white); }
#allSectionsWrapper .section.grid-gallery-section.wins .text1 { padding-block: var(--gap-16) var(--gap-64); padding-inline: var(--gap-260); display: flex; justify-content: center; width: 62%; margin-inline: auto; }
#allSectionsWrapper .section.grid-gallery-section.wins .text1 p { color: var(--white); text-align: center; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container { padding: 0 var(--gap-260) var(--gap-120); }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .gallery-cubes { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--gap-20); flex-wrap: unset; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .gallery-cubes > div { width: 100%; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .gallery-cubes .boxes-images-outer-image { background-color: var(--black-light); border: 1px solid var(--stroke-white); border-radius: 6px; aspect-ratio: unset; height: var(--gap-140); background-size: auto !important; background-repeat: no-repeat; background-position: center; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .gallery-cubes > div .image-link-container { display: none; }
@media(min-width: 1025px) {
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="26596"] { padding-top: var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .gallery-container { padding-inline: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .gallery-container .gallery-cubes { display: flex; justify-content: center; gap: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .gallery-container .gallery-cubes > div { width: var(--gap-240); flex-shrink: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .gallery-container .gallery-cubes .boxes-images-outer-image { height: var(--gap-160); background-color: transparent; border: none; border-radius: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25634"] { padding-top: var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25654"] { padding-top: var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="28077"] .section-title { margin-bottom: var(--gap-48); }
}
@media(max-width: 1025px) {
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="25654"] .gallery-container { padding-block: 32px; }
#allSectionsWrapper .section.grid-video-section { padding-block: 40px; }
#allSectionsWrapper .section.grid-video-section .grid-text .grid-text-content .moreText { height: auto; border-radius: 0; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { object-fit: contain; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { object-fit: contain; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p:has(> a) a:not(:first-child) { margin: 0; }
}
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container { padding-block: 0 var(--gap-120); background: var(--bg); }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes > div { width: var(--gap-240); flex-shrink: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes > div .boxes-images-outer-image { height: var(--gap-160); background-color: transparent; border: none; border-radius: 0; box-shadow: none; }
/* logo wall cycle (osmo.supply logo-wall-cycle): the visible cubes are the slots (5 desktop / 4 mobile), JS moves each logo into a .logo-wall-target layer and swaps them; no modal click */
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div:nth-child(n+6) { display: none; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div .boxes-images-outer-image { position: relative; overflow: hidden; pointer-events: none; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div .boxes-images-outer-image .logo-wall-target { position: absolute; inset: 0; background-size: auto; background-repeat: no-repeat; background-position: center; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.black-bg .gallery-container .gallery-cubes > div .boxes-images-outer-image .logo-wall-target { filter: invert(1); }
@media(min-width: 1025px) {
/* two-rows: 2x5 wall = 10 slots */
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.two-rows .gallery-container .gallery-cubes { display: grid; grid-template-columns: repeat(5, var(--gap-240)); justify-content: center; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.two-rows .gallery-container .gallery-cubes > div:nth-child(n+6) { display: block; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.two-rows .gallery-container .gallery-cubes > div:nth-child(n+11) { display: none; }
}
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-container { padding-block: var(--gap-120) var(--gap-120); }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes { display: flex; flex-direction: column; align-items: center; gap: var(--gap-560); width: 100%; /* background: white; */ }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div { width: 100%; display: flex; justify-content: center; float: none; padding: 0; position: sticky; top: calc(var(--headerHeight) + var(--gap-120)); }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div .boxes-images-outer-image { border-radius: 10px; /* box-shadow: var(--shadow); */ aspect-ratio: auto; height: auto; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(1) { z-index: 1; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(1) .boxes-images-outer-image { width: 50.521vw; aspect-ratio: 970/571; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) { z-index: 2; top: calc(var(--headerHeight) + var(--gap-120) + var(--gap-227)); }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) .boxes-images-outer-image { width: 35.417vw; aspect-ratio: 450/262; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(3) { z-index: 3; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(3) .boxes-images-outer-image { width: 72.917vw; aspect-ratio: 1400/720; }
#allSectionsWrapper .section.grid-gallery-section.draggable { background: var(--black); padding-block: var(--gap-200); overflow: hidden; }
#allSectionsWrapper .section.grid-gallery-section.draggable .section-title { padding-block: 0 var(--gap-80); padding-inline: var(--gap-260); }
#allSectionsWrapper .section.grid-gallery-section.draggable .section-title h2 { color: var(--white); text-align: center; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-container { position: relative; height: 33vw; cursor: none; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0; padding: 0; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div { position: absolute; width: 43.75vw; float: none; margin: 0; padding: 0; will-change: transform; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div .image-link-container { display: none; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div .boxes-images-outer-image { position: relative; width: 100%; height: auto; aspect-ratio: 840/575; border-radius: 10px; overflow: hidden; pointer-events: none; background-size: cover; background-position: center; box-shadow: var(--shadow); }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div .boxes-images-outer-image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 1; transition: opacity 0.2s ease; pointer-events: none; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div[data-flick-cards-item-status="active"] .boxes-images-outer-image::after { opacity: 0; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div [data-flick-cards-dragger] { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: pan-y; }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor { position: absolute; top: 0; left: 0; z-index: 10; width: var(--gap-88); height: var(--gap-88); border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-container.flick-cursor-active .flick-drag-cursor { opacity: 1; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-container[data-flick-drag-status="grabbing"] .flick-drag-cursor { transform: scale(0.85); }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor span { color: var(--black); font-family: var(--font-3); font-size: clamp(12px,var(--fs-16),300px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor:before, #allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor:after { content: ""; width: var(--gap-8); height: var(--gap-8); background: white; position: absolute; border-radius: 50%; }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor:before { right: calc(0px - var(--gap-16)); }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor:after { left: calc(0px - var(--gap-16)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes { position: relative; display: block; width: 100%; height: 166.979vw; }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div { position: absolute; float: none; margin: 0; padding: 0; width: 18.021vw; }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+1) { left: 11.615vw; top: calc(33.333vw + var(--cycle, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+2) { left: 74.688vw; top: calc(48.646vw + var(--cycle, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+3) { left: 27.5vw; top: calc(75.938vw + var(--cycle, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+4) { left: 63.125vw; top: calc(96.667vw + var(--cycle, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div .boxes-images-outer-image { width: 100%; height: auto; aspect-ratio: 346/420; border-radius: 10px; box-shadow: var(--shadow); }
/* image 5+ repeats slots 1-4 one Figma field (1636) lower - JS sets --cycle / --cycles / data-tail; height = 640 + last slot bottom (420/714/1238/1636) + 930 + cycles x 1636 */
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="1"] { height: calc(103.646vw + var(--cycles, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="2"] { height: calc(118.958vw + var(--cycles, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="3"] { height: calc(146.25vw + var(--cycles, 0) * var(--gap-1636)); }
:is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="4"] { height: calc(166.979vw + var(--cycles, 0) * var(--gap-1636)); }
#allSectionsWrapper .section.grid-content-section.success { display: flex; justify-content: space-between; padding: var(--gap-120) var(--gap-260) var(--gap-120); /* gap: var(--gap-140); */ }
#allSectionsWrapper .section.grid-content-section.success .title-text-wrapper { width: var(--gap-477); flex-shrink: 0; padding-inline-end: 0; height: fit-content; position: sticky; top: calc(var(--headerHeight) + var(--gap-200)); }
#allSectionsWrapper .section.grid-content-section.success .section-title { text-align: start; }
#allSectionsWrapper .section.grid-content-section.success .section-topText { margin-top: var(--gap-24); }
#allSectionsWrapper .section.grid-content-section.success .section-topText p { color: var(--grey); text-align: start; }
#allSectionsWrapper .section.grid-content-section.success .title-text-wrapper .content-section-Btn { display: flex; justify-content: flex-start; width: 100%; margin: var(--gap-32) 0 0; padding: 0; float: none; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes { display: grid; grid-template-columns: repeat(2,1fr); row-gap: var(--gap-70); column-gap: var(--gap-20); min-width: 39.635vw; width: 39.635vw; flex-shrink: 0; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box { width: 100%; text-align: start; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-image { border-radius: var(--gap-10); overflow: hidden; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-title { margin-top: var(--gap-16); }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-title h3 { font-size: unset; margin: 0; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-title h3 a { color: var(--black); }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-fulltext { margin-top: var(--gap-6); }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-fulltext p { color: var(--grey); padding-inline-end: var(--gap-40); }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box.gridHasVideo .grid-box-image { aspect-ratio: 370.5/446.61; position: relative; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box.gridHasVideo .grid-box-image :is(.grid-box-image-container, a.box-image-animation, .grid-iframe-holder) { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; }
/* the vimeo embed is a 9:16 padding box (inline position: relative) - pin it to the middle so the crop is centred */
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box.gridHasVideo .grid-box-image .grid-iframe-holder > div { position: absolute !important; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
#allSectionsWrapper .section.grid-content-section.team { background: var(--black); overflow: hidden; padding-bottom: var(--gap-120); }
#allSectionsWrapper .section.grid-content-section.team .section-title { padding: var(--gap-120) 0 var(--gap-64); text-align: center; }
#allSectionsWrapper .section.grid-content-section.team .section-title h2 { color: var(--white); }
#allSectionsWrapper .section.grid-content-section.team .team-swiper { padding-inline: var(--gap-260); }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes { display: flex; flex-wrap: nowrap; gap: 0; width: fit-content; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box { width: var(--gap-500); height: var(--gap-600); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; border-radius: 10px; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-image { flex: 1; overflow: hidden; min-height: 0; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-image .grid-box-image-container { height: 100%; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-title { padding-block-start: var(--gap-16); padding-inline-end: var(--gap-120); flex-shrink: 0; text-align: start; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-title h3 { font-size: unset; margin: 0; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-title h3 a { color: var(--white); }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-subtitle { padding-inline-end: var(--gap-120); padding-block-end: var(--gap-16); flex-shrink: 0; text-align: start; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-subtitle span { color: var(--white); }
#allSectionsWrapper .section.grid-blog.selected-work { background: var(--black); padding-bottom: max(0px, calc(var(--gap-120) - var(--sw-trail, 0px))); }
#allSectionsWrapper .section.grid-blog.selected-work .section-title { padding-block: var(--gap-240); width: 100%; text-align: center; position: sticky; top: 0; }
#allSectionsWrapper .section.grid-blog.selected-work .section-title h2 { color: var(--white); text-align: center; display: inline-block; width: min-content; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row { display: flex; flex-direction: column; align-items: center; padding-inline: var(--gap-260); padding-block: var(--gap-420) var(--gap-48); gap: var(--gap-560); margin: 0; position: relative; /* QA 2: was sticky top 0 - at the section end it slid 52px (the button height) under the button, so the card-to-button gap read 188 (240 - 52) instead of the padding */ }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post { position: sticky; top: var(--sw-top, var(--gap-240)); /* --sw-top set by centerSelectedWorkStack(): card middle on the title text middle */ }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post .blog-post-content .tags { justify-content: center; }
#allSectionsWrapper .section.grid-blog.selected-work .content-section-Btn { width: 100%; display: flex; justify-content: center; padding-block: 0; margin-bottom: var(--sw-trail, 0px); /* background: var(--black); */ /* --sw-trail (centerSelectedWorkStack): room below the button so the sticky title releases just as the last card lands centered on it - taken back off the section padding; under the cards it pushed the button away and let the pile slide */ }
#allSectionsWrapper .section.grid-blog.selected-work .content-section-Btn a.sec-button { min-width: var(--gap-180); }
body.home-page #allSectionsWrapper .section.grid-blog { padding-block: var(--gap-120); padding-inline: var(--gap-260); }
body.home-page #allSectionsWrapper .section.grid-blog .grid-boxes-blog .blog-post.oneItem { width: 100% !important; }
body.home-page :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content { position: static; }
body.home-page :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > :not(.left) { position: relative; }
body.home-page :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > :not(.left) .blog-post-text { position: static; background: none; border: none; justify-content: flex-start; padding: 0; }
#allSectionsWrapper .section.grid-faq-section { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; padding-block: var(--gap-120); padding-inline: var(--gap-260); }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper { width: 25.99vw; position: sticky; top: var(--gap-200); }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper .section-title { text-align: right; margin: 0; max-width: none; }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper .section-topText { margin: var(--gap-24) 0 0; max-width: none; text-align: right; }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper .section-topText :is(p, li) { color: var(--grey); }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper a.faq-cta { margin-top: var(--gap-32); }
#allSectionsWrapper .section.grid-faq-section .grid-faq { width: 35.885vw; margin: 0; max-width: none; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group { display: flex; flex-direction: column; gap: var(--gap-16); margin: 0; counter-reset: faq; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item { display: flex; flex-direction: column; gap: var(--gap-32); padding: var(--gap-32); margin: 0 !important; background: var(--white); box-shadow: var(--shadow); border: none; border-radius: 10px; min-height: var(--gap-94); justify-content: center; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: var(--gap-40); padding: 0; background: none; cursor: pointer; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline i { display: none; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline::before { content: ""; width: var(--gap-20); height: var(--gap-20); margin-top: var(--gap-4); flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.30762 8.15315L9.96347 16.1111L17.6922 8.15315L14.6299 5L9.96347 9.80481L5.36996 5L2.30762 8.15315Z' fill='%23FF3227'/%3E%3C/svg%3E") no-repeat center / contain; transition: 0.3s ease all; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline.open::before { transform: rotate(180deg); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline .faq-headline-title { flex: 1; margin: 0; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline::after { counter-increment: faq; content: counter(faq, decimal-leading-zero); width: var(--gap-30); padding-top: var(--gap-6); flex-shrink: 0; text-align: right; color: var(--black); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body { background: none; padding-inline-start: var(--gap-70); padding-inline-end: var(--gap-60); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner { padding: 0; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text p { color: var(--grey); }
#allSectionsWrapper .section.grid-faq-section[data-id="26602"] { padding-block: var(--gap-120); }
#allSectionsWrapper .section.grid-image-section.gap-btm { width: 50.521vw; padding: 0; margin-inline: auto; height: fit-content; /* box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.01), 0 4px 24px 0 rgba(0, 0, 0, 0.02); */ border-radius: var(--gap-12); overflow: hidden; margin-bottom: var(--gap-120); }
#allSectionsWrapper .section.grid-image-section.gap-btm .image-section-data { height: fit-content; }
#allSectionsWrapper .section.grid-image-section.gap-btm .image-section-data img { margin: 0 !important; }
#allSectionsWrapper .section.grid-contents.jobs { padding-inline: var(--gap-260); padding-bottom: var(--gap-140); padding-top: var(--gap-120); }
#allSectionsWrapper .section.grid-contents.jobs .section-title { margin: 0 0 var(--gap-120); }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content { flex-direction: column; gap: var(--gap-12); }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content .col-md-4 { width: 100%; padding: 0; float: none; }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content .col-md-4:not(:last-child) { padding-bottom: var(--gap-12); border-bottom: 1px solid var(--stroke); }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box { min-height: var(--gap-82); margin: 0; display: flex; align-items: center; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-fulltext { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap-40); width: 100%; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-subtitle { display: none; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-label { padding: 0; }
/**/
@media(min-width: 1025px) {
#allSectionsWrapper .section.prod-service .dynamic-grid-item { transition: 0.3s ease all; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item:hover { padding-inline: var(--gap-24); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item:hover::before { opacity: 1; }
/* #allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item:hover .dynamic-grid-field.field-img.pic :is(img, .agent-video) { transform: scale(1.06); } */
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item:hover .dynamic-grid-field.field-img.pic .agent-more { transform: rotate(30deg); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right .field-text:last-child { overflow: hidden; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right .field-text:last-child p { transition: transform 0.3s ease; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item:hover .prod-service-right .field-text:last-child p { transform: translateY(-38px); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-right .field-text:first-child p { transition: color 0.3s ease; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item:hover .prod-service-right .field-text:first-child p { color: var(--red); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item:hover .prod-service-arrow { background: var(--red); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item:hover .prod-service-arrow::before { transform: translateX(0); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item:hover .prod-service-arrow::after { transform: translateX(-100%); }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post .blog-post-image { transition: 0.3s ease all; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post:hover .blog-post-image { transform: scale(1.1); }
#allSectionsWrapper .section.grid-image-section { padding-inline: var(--gap-260); padding-block: var(--gap-120); height: fit-content; }
}
@media(max-width: 1025px) {
#allSectionsWrapper .section.grid-row-section { padding: 0 24px 60px; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row { flex-direction: column; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box { width: 100%; height: 371px; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { width: 100%; align-items: flex-start; gap: 24px; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { gap: 24px; align-items: center; padding-bottom: 0; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { text-align: center; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { width: 100%; border-radius: 86px; height: 48px; width: fit-content; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text :is(p,li) { text-align: center; }
/* .method row: the lottie wheel (JS) is a full-width square, the cell hugs it instead of the 371px photo height */
#allSectionsWrapper .section.grid-row-section.method { padding-block: 40px; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box { height: auto; }
#allSectionsWrapper .section.grid-row-section.method.has-lottie .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { display: none; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-lottie { width: 100%; aspect-ratio: 1; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-lottie svg { display: block; width: 100% !important; height: 100% !important; }
#allSectionsWrapper .section.grid-row-section.method.has-wheel .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { display: none; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .method-row-wheel { width: 100%; aspect-ratio: 1; }
#allSectionsWrapper .section.grid-row-section.method .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { height: 52px; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] { padding: 20px 20px 0; margin-top: 40px; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.flexslider-box { height: 289px; border-radius: 5px; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item img { object-position: center; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { padding: 64px 0 32px; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { gap: 20px; margin: 0; }
#allSectionsWrapper .section.grid-row-section[data-id="25621"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { width: 100%; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) { padding: 40px 20px 0; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.flexslider-box { width: 100%; height: 289px; border-radius: 5px; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { padding: 64px 0 40px; }
#allSectionsWrapper .section.grid-row-section:is([data-id="27732"],[data-id="27994"]) .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { gap: 20px; margin: 0; }
#allSectionsWrapper .section.grid-row-section[data-id="25632"] { margin-top: var(--gap-64); }
#allSectionsWrapper .section.grid-contents.jobs { padding-inline: var(--gap-20); padding-block: var(--gap-40); }
#allSectionsWrapper .section.grid-contents.jobs .section-title { margin-bottom: 40px; }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content { overflow: visible; }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content .col-md-4 { min-width: unset; }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content .col-md-4:not(:last-child) { padding-bottom: 0; border-bottom: none; }
#allSectionsWrapper .section.grid-contents.jobs .grid-boxes.grid-boxes-content .col-md-4:not(:last-child) .grid-short-box { border-bottom: none; padding-bottom: 20px; margin: 0; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box { position: relative; min-height: auto; background: var(--white); box-shadow: var(--shadow); border-radius: var(--gap-5); padding: var(--gap-20); }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-fulltext { display: block; width: 100%; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-label { padding-inline-end: var(--gap-64); padding-block: 0; text-align: start; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-link { position: absolute; inset: 0; margin: 0; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-link a.button-with-anim { position: static; display: block; width: 100%; height: 100%; margin: 0 !important; padding: 0; min-width: unset; background: none; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-link a.button-with-anim .btn-text-wrapper { display: none; }
#allSectionsWrapper .section.grid-contents.jobs .grid-short-box .grid-short-box-link a.button-with-anim::before { inset-inline-end: unset; inset-inline-end: var(--gap-20); top: 50%; transform: translateY(-50%); width: var(--gap-40); height: var(--gap-40); }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started) { padding: var(--gap-40) var(--gap-20); }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started) .section-title { margin-bottom: var(--gap-20); }
#allSectionsWrapper .section.grid-text-section:not(.quote):not(.started) > * { width: 100%; margin-inline: 0; }
#allSectionsWrapper .section.grid-text-section.quote { padding-block: var(--gap-40); padding-inline: var(--gap-24); }
#allSectionsWrapper .section.grid-text-section.quote .grid-text > p { max-width: 100%; line-height: 1.2; }
#allSectionsWrapper .section.grid-text-section.quote .grid-text > p::before { height: 21px; background-repeat: no-repeat; background-size: cover; }
#allSectionsWrapper .section.grid-text-section.quote .quote-avatar .gridTextImgContainer img { width: var(--gap-48); height: var(--gap-48); }
#allSectionsWrapper .section.grid-text-section.quote .section-title { width: 100%; }
#allSectionsWrapper .section.grid-text-section.quote .section-title h2 { width: 100%; }
#allSectionsWrapper .section.prod-service .section-title { padding-block-start: 40px; padding-block-end: 40px; padding-inline: 20px; text-align: center; width: 100%; }
#allSectionsWrapper .section.prod-service .section-topText { padding-inline: 20px; padding-block-end: 40px; text-align: center; }
#allSectionsWrapper .section.prod-service .section-topText p { max-width: 100%; }
#allSectionsWrapper .section.prod-service .dynamic-grid-wrapper { padding-inline: 20px; padding-block-end: 40px; }
#allSectionsWrapper .section.prod-service .dynamic-grid-items { display: grid; grid-template-columns: 100%; grid-auto-rows: 1fr; gap: 400px; padding-block-end: 0; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item { position: sticky; top: 200px; flex-direction: column; align-items: stretch; gap: 12px; padding: 32px; min-height: 239px; background: var(--white); border-radius: 5px; box-shadow: var(--shadow); border-bottom: none; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow:after { background-image: url("https://media.getmood.io/warehouse/dynamic/769403.svg"); background-color: var(--red); }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .prod-service-arrow { width: 36px; height: 36px; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .field-richtext { width: 100%; opacity: 0.8; }
#allSectionsWrapper .section.prod-service .dynamic-grid-item .field-richtext p { width: 100%; margin-inline-start: 0; }
#allSectionsWrapper .section.prod-service .prod-service-bottom { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; margin-block-start: auto; }
#allSectionsWrapper .section.grid-gallery-section.wins { background: none; }
#allSectionsWrapper .section.grid-gallery-section.wins .section-title { padding-block: 40px 0; padding-inline: 20px; text-align: center; }
#allSectionsWrapper .section.grid-gallery-section.wins .text1 { padding-block: 20px 40px; padding-inline: 20px; width: 100%; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container { padding: 0 20px 40px; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .gallery-cubes { display: none; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .slide-wrapper { display: flex; width: 100%; overflow: hidden; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .wins-marquee-track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; gap: var(--gap-52); animation: scrollText 40s linear infinite; }
#allSectionsWrapper .section.grid-gallery-section.wins .gallery-container .wins-marquee-track img { height: var(--gap-60); max-width: fit-content; display: block; object-fit: none; }
/* QA 2: white-bg logo strips (service pages) = static 3-up rows of 111x74 cells (Figma 2826:35094), no marquee */
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container { padding: 40px 20px 40px; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes { display: flex; flex-wrap: wrap; justify-content: center; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes > div { width: 33.333%; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .gallery-cubes > div .boxes-images-outer-image { height: 74px; padding: 18px 16px; background-origin: content-box; background-size: contain !important; }
#allSectionsWrapper .section.grid-gallery-section.wins.white-bg .gallery-container .slide-wrapper { display: none; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) { background: var(--black); margin-bottom: 40px; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container { padding-inline: 0; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper { gap: 8px; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper .wins-marquee-track { gap: 8px; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper .wins-marquee-track img { height: 120px; max-width: 227px; border-radius: var(--corner-radius-small, 5px); border: 1px solid rgba(255, 255, 255, 0.08); background: #212226; object-fit: none; }
/* QA 2: the home wins strip is a static 2x2 logo grid (167x112 cells, no frame, no background) - the JS marquee track is reused as the grid, its clone hidden, the animation off */
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container { padding-inline: 20px; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper { display: block; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper .wins-marquee-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; width: 100%; animation: none; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper .wins-marquee-track + .wins-marquee-track { display: none; }
#allSectionsWrapper .section.grid-gallery-section:is(.wins[data-id="25611"]) .gallery-container .slide-wrapper .wins-marquee-track img { width: 100%; max-width: 100%; height: 112px; border-radius: 0; border: none; background: transparent; object-fit: scale-down; }
/* logo wall cycle: the cubes themselves are the 2x2 (4 slots, 112px cells, no frame), no marquee track */
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container { padding-inline: 20px; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div { width: 100%; padding: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div:nth-child(n+5) { display: none; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div .boxes-images-outer-image { height: 112px; background-color: transparent; border: none; border-radius: 0; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .gallery-cubes > div .boxes-images-outer-image .logo-wall-target { background-size: contain; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl .gallery-container .slide-wrapper { display: none; }
/* white-bg walls keep the QA 2 logo size (74px cells, 18/16 inset) */
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.white-bg .gallery-container .gallery-cubes > div .boxes-images-outer-image { height: 74px; }
#allSectionsWrapper .section.grid-gallery-section.wins.osmo-tgl.white-bg .gallery-container .gallery-cubes > div .boxes-images-outer-image .logo-wall-target { inset: 18px 16px; }
#allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text .grid-row-inner-text { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
#allSectionsWrapper .section.grid-blog.selected-work { padding-block: 60px; }
#allSectionsWrapper .section.grid-blog.selected-work .section-title { position: sticky; top: 0; padding-block: 0 40px; height: 100vh; align-content: center; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row { position: relative; top: auto; padding-inline: 20px; padding-block: 0 46px; gap: var(--gap-200); }
/* QA 2: each card pins 20px lower than the one before so the stack shows the top edge of the cards underneath */
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post { position: sticky; top: 170px; width: 100% !important; border-radius: 5px; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post:nth-child(2) { top: 190px; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post:nth-child(3) { top: 210px; }
#allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog.row .blog-post:nth-child(4) { top: 230px; }
#allSectionsWrapper .section.grid-blog.selected-work .content-section-Btn { padding-block: 0; }
#allSectionsWrapper .section.grid-blog.selected-work .content-section-Btn a.sec-button { min-width: 150px; height: 48px; }
body.home-page #allSectionsWrapper .section.grid-blog { padding-block: var(--gap-40) 40px; padding-inline: 19px; }
#allSectionsWrapper .section.dynamicGrid.cards { padding: 40px 20px; }
/* QA 2 (about): grid-auto-rows 1fr = every sticky card the height of the tallest, so the card underneath never peeks out at the bottom */
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-items { display: grid; grid-template-columns: 100%; grid-auto-rows: 1fr; gap: var(--gap-200); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item { position: sticky; top: var(--gap-160); aspect-ratio: unset; padding: 32px 24px; gap: var(--gap-32); width: 100%; max-width: 100%; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-number-wrapper { gap: var(--gap-14); }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+2) { top: 170px; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+3) { top: 180px; }
#allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n+4) { top: 190px; }
#allSectionsWrapper .section.dynamicGrid.cards.wide { padding: 60px 20px; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-items { flex-direction: column; align-items: center; gap: var(--gap-200); padding-bottom: 0; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item { width: 100%; max-width: 100%; height: var(--gap-500); aspect-ratio: unset; position: sticky; top: var(--gap-80); padding: var(--gap-24); border-radius: var(--gap-5); justify-content: flex-start; gap: var(--gap-24); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .card-number-wrapper { display: block; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .card-number-wrapper::before { display: none; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text { flex: 1; justify-content: space-between; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--gap-4); }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item .dynamic-grid-field.field-richtext.text ul li { text-align: start; align-items: baseline; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item:nth-child(2) { top: 90px; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item:nth-child(3) { top: 100px; }
#allSectionsWrapper .section.dynamicGrid.cards.wide .dynamic-grid-item:nth-child(4) { top: 110px; }
#allSectionsWrapper .section.cards.with-img { padding: 60px 0; }
#allSectionsWrapper .section.cards.with-img .section-title { padding-inline: 20px; }
#allSectionsWrapper .section.cards.with-img .section-topText { padding-inline: 20px; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-items { display: grid; grid-template-columns: 100%; grid-auto-rows: 1fr; gap: var(--gap-200); padding-bottom: 0; }
/* QA 2: full-screen cards pinned at the very top, all rows the height of the tallest (grid-auto-rows 1fr) */
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item { position: sticky; top: var(--headerHeight); min-height: 100vh; min-height: calc(100svh - var(--headerHeight)); max-width: 100%; border-radius: 0; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .dynamic-grid-field.field-img:not(.icon) { height: 260px; }
#allSectionsWrapper .section.cards.with-img .dynamic-grid-item .with-img-content { padding: 40px 24px; padding-block: 60px 30px; }
#allSectionsWrapper .section.cards.with-img[data-id="25612"] { padding-block: 40px; padding-bottom: 40px; }
#allSectionsWrapper .section.cards.with-img[data-id="25612"] .dynamic-grid-wrapper { margin-top: 120px; }
#allSectionsWrapper .section.grid-content-section.success { flex-direction: column; padding: 40px 0; }
#allSectionsWrapper .section.grid-content-section.success .title-text-wrapper { position: relative; top: auto; padding-inline: 20px; width: 100%; }
#allSectionsWrapper .section.grid-content-section.success .section-title { text-align: center; }
#allSectionsWrapper .section.grid-content-section.success .section-topText { text-align: center; margin-top: 12px; }
#allSectionsWrapper .section.grid-content-section.success .section-topText p { text-align: center; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes { grid-template-columns: unset; display: flex; flex-direction: row; overflow-x: auto; min-width: unset; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding-inline: 20px; gap: 20px; margin-top: 48px; width: auto; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box { flex: 0 0 300px; scroll-snap-align: start; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-image { height: 361px; border-radius: 5px; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .grid-box .grid-box-fulltext p { padding-inline-end: 16px; }
#allSectionsWrapper .section.grid-content-section.success .grid-boxes .content-section-Btn { display: none; }
#allSectionsWrapper .section.grid-content-section.success .title-text-wrapper .content-section-Btn { justify-content: center; margin-top: 24px; }
#allSectionsWrapper .section.event-cube { padding: 60px 20px; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item { flex-direction: column; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .left-wrapper { min-width: unset; width: 100%; border-inline-start: none; border-bottom: 2px solid var(--bg); padding-inline: 20px; padding-block: 20px; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper { padding-inline: 20px; padding-block: 20px; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-text.title p { text-align: center; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .center-wrapper .dynamic-grid-field.field-textarea p { text-align: center; }
#allSectionsWrapper .section.event-cube .dynamic-grid-wrapper .dynamic-grid-items .dynamic-grid-item .right-wrapper { width: 100%; }
#allSectionsWrapper .section.grid-text-section.started { padding: 40px 20px; gap: 12px; }
#allSectionsWrapper .section.grid-text-section.started .grid-text { width: 100%; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content { gap: 12px; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content a.sec-button { margin-top: 12px; }
#allSectionsWrapper .section.grid-text-section.started .grid-text-content p { width: 100%; max-width: 100%; }
#allSectionsWrapper .section.dynamicGrid.num-cards { flex-direction: column; padding: 40px 20px; gap: 64px; }
#allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper { width: 100%; position: relative; top: auto; text-align: center; }
#allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .dynamic-grid-field.field-button { margin-inline: auto; }
#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-wrapper { width: 100%; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-items, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-items) { gap: var(--gap-200); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item) { position: sticky; top: var(--gap-152); flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 100%; border-radius: 5px; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .dynamic-grid-field.field-text.number, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number) { width: auto; height: auto; padding: var(--gap-40) 0; margin: var(--gap-8) var(--gap-8) 0; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards .dynamic-grid-item .num-cards-text, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text) { flex: unset; padding: var(--gap-32); }
#allSectionsWrapper .section.dynamicGrid.num-cards:not(.after-webinar) .dynamic-grid-item .dynamic-grid-field.field-text.number { min-height: 153px; height: 153px; padding: 0; }
#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar { gap: var(--gap-12); width: 100%; padding-top: 40px; }
#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .num-cards-title-wrapper { text-align: start; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-items, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-items) { gap: var(--gap-8); padding-bottom: var(--gap-16); }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-item, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item) { position: static; flex-direction: row; height: fit-content; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-item .dynamic-grid-field.field-text.number, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .dynamic-grid-field.field-text.number) { width: var(--gap-66); he; height: 82px; margin: var(--gap-4) var(--gap-4) var(--gap-4) 0; }
:is(#allSectionsWrapper .section.dynamicGrid.num-cards.after-webinar .dynamic-grid-item .num-cards-text, #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content .dynamic-grid-item .num-cards-text) { flex: 1; padding: var(--gap-16); }
#allSectionsWrapper .section.dynamicGrid.agents { padding: 40px 20px; }
#allSectionsWrapper .section.dynamicGrid.agents .section-topText { margin-top: 20px; }
#allSectionsWrapper .section.dynamicGrid.agents .section-topText p { max-width: 100%; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-wrapper { margin-top: 64px; width: 100%; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-items { grid-template-columns: repeat(2,1fr); gap: 20px; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic { border-radius: 5px; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more { bottom: 10px; right: 10px; width: 38px; height: 38px; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::before { width: 12px; height: 2px; border-radius: 2px; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .dynamic-grid-field.field-img.pic .agent-more::after { width: 2px; height: 12px; border-radius: 2px; }
#allSectionsWrapper .section.dynamicGrid.agents .dynamic-grid-item .agent-text { gap: 4px; padding: 12px 20px 0; }
#allSectionsWrapper .section.dynamicGrid.q-a { padding: var(--gap-40) var(--gap-20); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-wrapper { margin-top: var(--gap-40); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item { gap: var(--gap-16); padding-block: var(--gap-16); }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle { width: 26px; height: 26px; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::before { width: 22px; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item .dynamic-grid-field.field-text.question .qa-toggle::after { height: 22px; }
/* QA 2: the desktop .open rule (gap 24 + inline 24) out-specified the mobile gap, and the answer had its own padded white box - 40 gap + indent. Open item = 16 gap, answer flush with the question, full row */
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open { gap: 16px; padding-inline: 0; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open::before { opacity: 0; }
#allSectionsWrapper .section.dynamicGrid.q-a .dynamic-grid-item.open .dynamic-grid-field.field-richtext.answer { width: 100%; background: none; border-radius: 0; padding: 0; }
#allSectionsWrapper .section.dynamicGrid.alternative { padding: 60px 20px 0; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item { grid-template-columns: 1fr; column-gap: 0; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext { grid-column: 1; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext ul li { text-align: start; align-items: baseline; }
#allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-button { grid-column: 1; }
#allSectionsWrapper .section.dynamicGrid.one-row { padding: 40px 20px; }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item { flex-direction: column-reverse; gap: 64px; }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-img { flex: unset; width: 100%; }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .one-row-text { justify-content: center; align-items: center; gap: 20px; }
#allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext p { text-align: center; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] { padding: 0 0 64px; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item { gap: 0; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-img { flex: none; width: 100%; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-img img { height: 418px; aspect-ratio: unset; border-radius: 0; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-iframe { flex: none; position: relative; top: auto; width: 100%; height: 418px; aspect-ratio: unset; border-radius: 0; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text { flex: none; padding: 64px 20px 0; align-items: flex-start; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext h3:not(:first-child) { margin-top: 48px; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-richtext p { text-align: start; }
#allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text .dynamic-grid-field.field-button a { padding-inline: 20px; }
#allSectionsWrapper .section.grid-content-section.team { padding-bottom: 60px; }
#allSectionsWrapper .section.grid-content-section.team .section-title { padding-top: 64px; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes { width: 100%; overflow-x: auto; gap: var(--gap-20); padding-inline: var(--gap-20); }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box { width: var(--gap-300); height: 360px; border-radius: 0; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-image { border-radius: 5px; }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-title { padding-block-start: var(--gap-12); padding-inline-end: 0; margin-bottom: var(--gap-4); }
#allSectionsWrapper .section.grid-content-section.team .grid-boxes .grid-box .grid-box-subtitle { padding-inline-end: 0; padding-block-end: 0; }
#allSectionsWrapper .section.grid-faq-section { flex-direction: column; padding: var(--gap-40) var(--gap-20); gap: var(--gap-48); }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper { width: 100%; position: relative; top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--gap-20); }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper .section-topText { margin-top: 0; }
#allSectionsWrapper .section.grid-faq-section .title-text-wrapper a.faq-cta { margin-top: 4px; }
#allSectionsWrapper .section.grid-faq-section .grid-faq { width: 100%; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group { gap: var(--gap-12); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item { padding: var(--gap-16); border-radius: var(--gap-5); gap: var(--gap-20); min-height: 0; }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline { gap: var(--gap-16); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline::after { width: var(--gap-24); padding-top: var(--gap-4); }
#allSectionsWrapper .section.grid-faq-section .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body { padding-inline-start: var(--gap-40); padding-inline-end: var(--gap-36); }
#allSectionsWrapper .section.grid-faq-section[data-id="26602"] { padding-block: 40px; }
#allSectionsWrapper .section.grid-gallery-section.wins[data-id="26596"] .gallery-container { padding-top: 40px; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes { gap: 32px; }
:is(#allSectionsWrapper, #home-gallery) .section.grid-gallery-section.sliding-gallery .gallery-container .gallery-cubes > div { width: 80px; }
#allSectionsWrapper .section.grid-gallery-section.draggable { padding-block: var(--gap-64); }
#allSectionsWrapper .section.grid-gallery-section.draggable .section-title { padding-block: 0 var(--gap-48); padding-inline: var(--gap-20); }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-container { height: 237px; cursor: auto; }
#allSectionsWrapper .section.grid-gallery-section.draggable .gallery-cubes > div { width: 332px; }
#allSectionsWrapper .section.grid-gallery-section.draggable .flick-drag-cursor { display: none; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-container { padding-block: 40px; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes { gap: 200px; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div { position: sticky; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(1) { top: calc(var(--headerHeight) + 235px); /* margin-bottom: 366px; */ }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(1) .boxes-images-outer-image { width: 334px; aspect-ratio: 334/197; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) { top: calc(var(--headerHeight) + 296px); /* margin-bottom: 356px; */ }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) .boxes-images-outer-image { width: 264px; aspect-ratio: 264/156; }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(3) { top: calc(var(--headerHeight) + 214px); }
#allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(3) .boxes-images-outer-image { width: 100%; aspect-ratio: 374/240; border-radius: 0; }
footer .section.grid-content-section.touch { padding-inline: 20px; padding-block: 64px 20px; }
footer .section.grid-content-section.touch h2 { text-align: center; }
footer .section.grid-content-section.touch .grid-boxes { margin-top: 64px; flex-direction: column; gap: 20px; }
footer .section.grid-content-section.touch .grid-boxes .grid-box { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px; background: var(--black-light); border: 1px solid var(--stroke-white); border-radius: 5px; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .touch-row-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-direction: row-reverse; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .touch-row-bottom { display: flex; justify-content: center; align-items: flex-end; gap: 12px; flex-direction: row-reverse; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-image { width: 27px; margin-inline: 0 !important; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-title { margin-top: 0; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle { margin-top: 0; text-align: right; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button { margin-top: 0; }
footer .section.grid-content-section.touch .grid-boxes .grid-box .grid-box-subtitle.button a { width: 36px; height: 36px; min-width: 0; padding: 0; border: none; border-radius: 0; font-size: 0; color: transparent; background: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.653436' y='0.653436' width='34.6931' height='34.6931' rx='17.3466' stroke='white' stroke-width='1.30687'/%3E%3Cpath d='M12.5549 17.9648L19.8625 25.0625L22.5579 22.4443L18.1155 18.1309L17.9436 17.9639L18.1165 17.7979L22.5569 13.5537L19.8616 10.9355L12.5549 17.9648Z' fill='white' stroke='%2317181C' stroke-width='0.461538'/%3E%3C/svg%3E") center / contain no-repeat; }
#allSectionsWrapper .section.grid-contents.jobs { padding-inline: 20px; }
/* QA 2: full-bleed 375x340 box (Figma 1565:9395); the image starts 255x232 top-centre and grows to fill it on scroll (JS GROW ON SCROLL, mobile) */
#allSectionsWrapper .section.grid-image-section.gap-btm { width: 100%; height: 340px; margin-bottom: 0; padding-inline: 0; display: flex; justify-content: center; align-items: flex-start; overflow: visible; border-radius: 0; box-shadow: none; margin-bottom: 40px; }
#allSectionsWrapper .section.grid-image-section.gap-btm .image-section-data { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
#allSectionsWrapper .section.grid-image-section.gap-btm .image-section-data img { width: 100%; height: 100%; object-fit: cover; }
#allSectionsWrapper .section.grid-image-section[data-id="25619"] { padding-inline: 20px; }
#allSectionsWrapper .section.grid-image-section[data-id="25619"] { height: auto; padding-block: 40px; }
#allSectionsWrapper .section.grid-image-section[data-id="25619"] .image-section-data { height: 340px; border-radius: 5px; overflow: hidden; }
#allSectionsWrapper .section.grid-image-section[data-id="25619"] .image-section-data img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
}
/**/
/*------------------------------------------/*
BLOG POST
/*------------------------------------------*/
:is(div,#LobbyModule) .blog-post { width: var(--gap-560) !important; float: none !important; position: relative; border-radius: 10px; overflow: hidden; }
:is(div,#LobbyModule) .blog-post .blog-post-image { position: relative; }
:is(div,#LobbyModule) .blog-post .blog-post-image::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgb(0 0 0 / 30%) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 1; }
:is(div,#LobbyModule) .blog-post .blog-post-image a { display: block; }
:is(div,#LobbyModule) .blog-post .blog-post-image a img { width: 100%; aspect-ratio: 560 / 547; object-fit: cover; display: block; }
:is(div,#LobbyModule) .blog-post .blog-post-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: var(--gap-32) var(--gap-24); background: transparent; z-index: 2; }
:is(div,#LobbyModule) .blog-post .blog-post-content h2.blog-post-title { font-size: unset; margin: 0; padding: 0; }
:is(div,#LobbyModule) .blog-post .blog-post-icons { display: none; }
:is(div,#LobbyModule) .blog-post .blog-post-button { display: none; }
:is(div,#LobbyModule) .blog-post .blog-post-text { position: absolute; top: var(--gap-16); right: var(--gap-16); z-index: 3; background: rgba(23,23,23,0.3); backdrop-filter: blur(16px); border-radius: 40px; padding: 0 var(--gap-12); height: var(--gap-24); display: flex; align-items: center; justify-content: center; margin: 0; }
:is(div,#LobbyModule) .blog-post .tags { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--gap-6); padding: var(--gap-16); }
:is(div,#LobbyModule) .blog-post .tags .tag { display: flex; align-items: center; justify-content: center; gap: var(--gap-8); height: var(--gap-24); padding: 0 var(--gap-12); border-radius: 40px; background: rgba(23,23,23,0.3); backdrop-filter: blur(8px); white-space: nowrap; color: var(--white); font-size: clamp(9px, var(--fs-12), 300px); font-family: var(--font-bold); letter-spacing: normal; }
:is(div,#LobbyModule) .blog-post .blog-post-content h2.blog-post-title { margin: 0; z-index: 2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(div,#LobbyModule) .blog-post .tags .blog-post-text { position: static; color: var(--white); }
:is(div,#LobbyModule) .blog-post .blog-post-icons { display: none; }
@media(max-width: 1025px) {
:is(div,#LobbyModule) .blog-post { width: 100% !important; }
:is(div,#LobbyModule) .blog-post .tags .tag { font-size: 12px; }
}
/**/
/*------------------------------------------/*
BLOG POST  OUR BLOG
/*------------------------------------------*/
:is(div,#LobbyModule) .blog-post.our-blog { width: 100% !important; position: static; display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-16); border-radius: 0; overflow: visible; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-image { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 335 / 403; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-image::after { content: none; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-image a { display: block; height: 100%; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-image a img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content { position: static; inset: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: var(--gap-6); padding: 0 0 0 var(--gap-40); background: none; z-index: auto; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag { background: var(--red-light-2); border: 1px solid var(--stroke-red); border-radius: 40px; height: var(--gap-32); padding-right: var(--gap-12); padding-left: var(--gap-8); color: var(--black); display: flex; gap: var(--gap-6); flex-direction: row-reverse; align-items: center; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag p { margin: 0; color: inherit; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag:after { content: ""; width: var(--gap-16); height: auto; aspect-ratio: 1; display: inline-block; background-image: url("https://media.getmood.io/warehouse/dynamic/766945.svg"); }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag.tag-plain { background: var(--white); color: var(--grey-dark); padding-inline: var(--gap-12); gap: var(--gap-8); }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag.tag-plain:after { content: none; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content h2.blog-post-title { margin: 0; z-index: auto; direction: rtl; text-align: start; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content h2.blog-post-title:has(> a.en-title) { direction: ltr; text-align: end; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content .blog-post-text { position: static; inset: auto; background: none; backdrop-filter: none; border-radius: 0; padding: 0; height: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: start; color: var(--grey); margin: 0; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content .blog-post-text { text-align: start; border: none; direction: rtl; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content h2.blog-post-title a { color: var(--black); }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-icons { display: none; }
:is(div,#LobbyModule) .blog-post.our-blog:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-author { width: 100%; margin: 0; direction: rtl; text-align: start; }
:is(div,#LobbyModule) .blog-post.our-blog:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-author span { color: var(--grey); unicode-bidi: isolate; }
:is(div,#LobbyModule) .blog-post.our-blog:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-author .author-position::before { content: ", "; }
/* QA 2: story card = image + title only (desktop + mobile), title up to 3 lines - webinar + upcoming cards keep their description */
body.our-blog:not(.webinar) :is(div,#LobbyModule) .blog-post.our-blog:not(:has(> .upcoming-wrapper)) .blog-post-content .blog-post-text { display: none; }
body.our-blog:not(.webinar) :is(div,#LobbyModule) .blog-post.our-blog:not(:has(> .upcoming-wrapper)) .blog-post-content h2.blog-post-title { -webkit-line-clamp: 3; }
@media(max-width: 1025px) {
:is(div,#LobbyModule) .blog-post.our-blog { width: 157px !important; flex-shrink: 0; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-image { aspect-ratio: auto; height: 189px; border-radius: 5px; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content { align-items: stretch; padding: 0; gap: 2px; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content > .tag { display: none; }
:is(div,#LobbyModule) .blog-post.our-blog .blog-post-content .blog-post-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/**/
/*------------------------------------------/*
BLOG POST  OUR BLOG UPCOMING
/*------------------------------------------*/
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .upcoming-wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: var(--gap-385); background: var(--white); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content { order: 0; flex: 1; display: flex; flex-direction: row-reverse; align-items: center; row-gap: var(--gap-12); height: 100%; padding-block: 0; box-sizing: border-box; background: none; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > .left { grid-column: 1; grid-row: 1 / -1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-20); padding-inline: var(--gap-40) var(--gap-80); text-align: center; border-inline-end: 1px solid var(--stroke); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > :not(.left) { grid-column: 2; padding-inline: var(--gap-48); margin: 0; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .left .date h3 { color: var(--red); margin: 0; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .left .dayNtime h4 { margin: 0; color: var(--black); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title { margin: 0; text-align: start; direction: rtl; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title a { color: var(--black); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-text { text-align: start; direction: rtl; color: var(--grey); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-icons { display: none; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author { display: flex; flex-direction: column; align-items: stretch; margin: 0; margin-top: var(--gap-24); direction: rtl; text-align: start; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author span { unicode-bidi: isolate; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-name { color: var(--black); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author .author-position { color: var(--grey); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image { order: 2; flex-shrink: 0; width: var(--gap-500); height: 100%; padding: var(--gap-12); padding-inline-start: 0; box-sizing: border-box; border-radius: 0; overflow: visible; aspect-ratio: auto; position: static; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image::after { content: none; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image a { display: block; width: 100%; height: 100%; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image a img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; aspect-ratio: auto; display: block; }
@media(min-width: 1025px) {
body.our-blog :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > .left { width: calc(var(--gap-402) + var(--gap-2)); flex-shrink: 0; padding-inline: var(--gap-40); border-inline-end: 2px solid var(--bg); }
body.our-blog :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > .left a.upcoming-btn { margin-top: var(--gap-16); direction: rtl; }
body.our-blog :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .center-wrapper { display: flex; flex-direction: column; gap: var(--gap-12); }
}
@media(max-width: 1025px) {
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) { border-radius: 5px; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > .left a.upcoming-btn { height: 48px; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .upcoming-wrapper { flex-direction: column; width: 100%; height: auto; background: none; box-shadow: var(--shadow); border-radius: 0; overflow: visible; align-items: stretch; gap: 0; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content { flex-direction: column; align-items: stretch; padding: 0; height: auto; gap: 2px; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > .left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-24); background: var(--white); padding: var(--gap-40) var(--gap-24); border-radius: 5px; border-inline-end: none; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .left .dayNtime h4 { margin: 0; color: var(--black); }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > :not(.left) { padding-inline: 0; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .center-wrapper { display: flex; flex-direction: column; gap: var(--gap-8); background: var(--white); padding: var(--gap-40) var(--gap-24); border-radius: 0 0 5px 5px; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content h2.blog-post-title { text-align: center; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-text { text-align: center; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .blog-post-author { margin-top: 24px; text-align: center; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image { order: -1; width: 100%; height: auto; background: var(--white); padding: var(--gap-10) var(--gap-10) 0; border-radius: 5px 5px 0 0; overflow: visible; }
:is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-image a img { aspect-ratio: 315 / 231; border-radius: 5px; }
}
/**/
/*------------------------------------------/*
PAGES
/*------------------------------------------*/
/*--------------------/*
HOME-PAGE
/*--------------------*/
@media(min-width: 1025px) {
body.home-page #allSectionsWrapper .section.grid-blog.selected-work .section-title { width: 100%; margin-inline: auto; }
body.home-page :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content .center-wrapper { display: flex; flex-direction: column; gap: var(--gap-12); }
}
@media(max-width: 1025px) {
body.home-page #allSectionsWrapper .section.grid-blog.selected-work .grid-boxes-blog { padding-inline: 0; }
body.home-page :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) .blog-post-content > :not(.left) .blog-post-text { justify-content: center; }
}
/*--------------------/*
PAGE 404
/*--------------------*/
body:has(.page-not-found) #GridContent { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-block: var(--headerHeight) var(--gap-120); padding-inline: var(--gap-200); }
div.page-not-found { display: flex; flex-direction: column; align-items: center; gap: 0; }
div.page-not-found br { display: none; }
div.page-not-found h2 { margin: 0; }
.page-not-found #headline { margin: 0 0 var(--gap-48); max-width: var(--gap-700); }
.page-not-found :is(#subheadline, #text1) { margin: 0; max-width: var(--gap-496); }
.page-not-found #subheadline h2, .page-not-found #text1 p { color: var(--grey); margin: 0; }
.page-not-found #text1 { display: flex; flex-direction: column; align-items: center; }
.page-not-found #text1 .pnf-text > *, .page-not-found #text1 .pnf-text #subheadline h2 { display: inline; }
.page-not-found #text1 .pnf-text #subheadline h2::after { content: " "; }
.page-not-found #text1 p.pnf-buttons { display: flex; justify-content: center; gap: var(--gap-12); margin-top: var(--gap-72); }
.page-not-found #text1 p.pnf-buttons a.button-with-anim { display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: var(--gap-52); margin-inline: 0 !important; padding-inline: var(--gap-24); border-radius: 86px; }
.page-not-found #text1 p.pnf-buttons a.button-with-anim::before, .page-not-found #text1 p.pnf-buttons a.button-with-anim::after { content: none; display: none; }
.page-not-found #text1 p.pnf-buttons a.button-with-anim:last-child { background: transparent; border: 2px solid var(--red); color: var(--black); }
@media(max-width: 1025px) {
body:has(.page-not-found) #GridContent { padding-inline: var(--gap-20); padding-block: calc(var(--headerHeight) + var(--gap-40)) var(--gap-64); }
.page-not-found #headline { margin-bottom: var(--gap-16); max-width: 100%; }
.page-not-found :is(#subheadline, #text1) { max-width: 100%; }
.page-not-found #text1 p.pnf-buttons { margin-top: var(--gap-40); }
.page-not-found #text1 p.pnf-buttons a.button-with-anim { height: var(--gap-48); padding-inline: var(--gap-20); }
}
/**/
/*--------------------/*
THANK YOU PAGE
/*--------------------*/
#FormResultPage { display: flex; justify-content: center; text-align: center; background: var(--bg); min-height: calc(100vh - var(--headerHeight)); padding: calc(var(--headerHeight) + var(--gap-120)) var(--gap-260) var(--gap-120); }
#FormResultPage #pageview { width: 100%; }
#FormResultPage #pageview .container-fluid { display: flex; flex-direction: column; align-items: center; gap: var(--gap-48); }
#FormResultPage #headline { margin: 0; }
#FormResultPage #text1 { display: flex; flex-direction: column; align-items: center; gap: var(--gap-48); margin: 0; max-width: 100%; }
#FormResultPage #text1 p { color: var(--grey); margin: 0; max-width: var(--gap-512); }
#FormResultPage #text1 a.FormResultPageButton { margin-block: 0; }
@media(max-width: 1025px) {
#FormResultPage { padding: calc(var(--headerHeight) + 40px) 20px 64px; }
#FormResultPage #pageview { display: flex; align-items: center; }
#FormResultPage #pageview .container-fluid { gap: 16px; }
#FormResultPage #text1 { gap: 0px; }
#FormResultPage #text1 a.FormResultPageButton { height: 48px; margin-top: 40px !important; padding-inline: 20px; }
}
/**/
/*--------------------/*
LEGAL PAGES (privacy policy + accessibility declaration)
/*--------------------*/
body:is(.policy, .accessabilityMainPage) { background: var(--bg); }
body:is(.policy, .accessabilityMainPage) #GridWrapInner { background: var(--bg); }
body:is(.policy, .accessabilityMainPage) #pageview { width: 100%; margin: 0; }
body:is(.policy, .accessabilityMainPage) #pageview :is(.MainContent, .container-fluid) { padding: 0; text-align: center; }
body:is(.policy, .accessabilityMainPage) #headline { font-size: unset; margin: 0; padding: var(--gap-120) var(--gap-260); text-align: center; }
body:is(.policy, .accessabilityMainPage) #headline h1 { color: var(--black); text-align: center; text-wrap: balance; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 { width: 100%; max-width: var(--gap-640); margin: 0 auto; padding: 0 0 var(--gap-180); display: flex; flex-direction: column; gap: var(--gap-16); text-align: start; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 > * { margin: 0; text-align: start; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 > :is(h2,h3):not(:first-child) { margin-top: var(--gap-16); }
body:is(.policy, .accessabilityMainPage) #pageview #text1 > :is(h2,h3) { color: var(--black); }
body:is(.policy, .accessabilityMainPage) #pageview #text1 :is(p, li, span) { color: var(--grey); font-weight: unset; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 p { overflow: visible; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 a { color: inherit; text-decoration: underline; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap-4); }
body:is(.policy, .accessabilityMainPage) #pageview #text1 ul li { display: flex; align-items: flex-start; gap: var(--gap-16); clear: none; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 ul li::before { content: ""; min-width: var(--gap-6); height: var(--gap-6); margin-top: var(--gap-10); background: var(--red); border-radius: 50%; flex-shrink: 0; }
@media(min-width: 1025px) {
body:is(.policy, .accessabilityMainPage) #pageview #text1 a:hover { color: var(--red); }
}
@media(max-width: 1025px) {
body:is(.policy, .accessabilityMainPage) #headline { padding: 40px 20px 64px; }
body:is(.policy, .accessabilityMainPage) #pageview { padding: 0 20px 64px; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 { max-width: 100%; padding: 0; gap: 12px; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 > :is(h2,h3):not(:first-child) { margin-top: 12px; }
body:is(.policy, .accessabilityMainPage) #pageview #text1 ul li::before { min-width: 4px; height: 4px; }
}
/**/
/*--------------------/*
KICKSTART PAGE
/*--------------------*/
body.kickstart :is(div,#LobbyModule) #lobbyview { background: var(--red); width: 100%; align-items: center; gap: var(--gap-32); padding-block: calc( var(--gap-96)) var(--gap-100); }
body.kickstart :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: 0; }
body.kickstart :is(div,#LobbyModule) #lobbyview #headline h1 { color: var(--white); }
body.kickstart :is(div,#LobbyModule) #lobbyview > h2 { color: var(--white); text-align: center; max-width: var(--gap-600); margin-inline: auto; }
body.kickstart :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { color: var(--white); text-align: center; max-width: var(--gap-685); margin-inline: auto; }
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gap-12); padding-top: var(--gap-24); direction: rtl; }
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons a { margin: 0; padding-inline: var(--gap-24); border-radius: var(--gap-90); }
body.kickstart :is(div,#LobbyModule) #lobbyview.one-button .lobby-buttons a { background: var(--white); color: var(--black); }
body.kickstart :is(div,#LobbyModule) #lobbyview.two-buttons .lobby-buttons a.btn-fill { background: var(--white); color: var(--black); }
body.kickstart :is(div,#LobbyModule) #lobbyview.two-buttons .lobby-buttons a.btn-outline { background: transparent; border: 2px solid var(--white); color: var(--white); }
body.kickstart #allSectionsWrapper .section.dynamicGrid.buttons.buttons-moved { display: none; }
body.kickstart #allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item .dynamic-grid-field.field-richtext p { opacity: 1; }
/**/
@media(max-width: 1025px) {
body.kickstart :is(div,#LobbyModule) #lobbyview { gap: var(--gap-16); padding-block: var(--gap-48) var(--gap-64); min-height: unset; }
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons { flex-wrap: wrap; }
body.kickstart :is(div,#LobbyModule) #lobbyview .lobby-buttons a { padding-inline: var(--gap-20); height: var(--gap-48); border-radius: var(--gap-88); letter-spacing: 0.15px; }
body:is(.kickstart,.rcmo) #allSectionsWrapper .section.dynamicGrid.alternative { padding-top: 40px; }
body:is(.kickstart,.rcmo) #allSectionsWrapper .section.dynamicGrid.alternative .dynamic-grid-item { row-gap: 16px; padding-block-end: 40px; }
}
/*--------------------/*
PLAYBOOK PAGE
/*--------------------*/
body.playbook :is(div,#LobbyModule) #lobbyview { gap: var(--gap-48); margin: 0; }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { display: flex; flex-direction: column; align-items: center; gap: var(--gap-48); }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { max-width: var(--gap-685); margin: 0; }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { max-width: none; padding: 0; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery { background: var(--red); }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) { top: calc(var(--headerHeight) + var(--gap-120) + var(--gap-190)); }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) .boxes-images-outer-image { width: var(--gap-364); aspect-ratio: 364/406; }
body.playbook #allSectionsWrapper .section.playbook-video { display: flex; justify-content: center; padding-top: var(--gap-120); }
body.playbook #allSectionsWrapper .section.playbook-video .playbook-video-inner { position: relative; width: var(--gap-1400); aspect-ratio: 1400/700; border-radius: var(--gap-10); overflow: hidden; background: var(--black); }
body.playbook #allSectionsWrapper .section.playbook-video .playbook-video-inner .dynamic-grid-field.field-iframe { position: static; }
/**/
@media(max-width: 1025px) {
body.playbook :is(div,#LobbyModule) #lobbyview { gap: 16px; }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { gap: 40px; }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { max-width: 100%; }
body.playbook :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a { padding-inline: 20px; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-container { padding-top: 0; padding-bottom: 0; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div .boxes-images-outer-image { border-radius: 5px; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) { top: calc(var(--headerHeight) + 256px); }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(2) .boxes-images-outer-image { width: 140px; aspect-ratio: 140/156; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery .gallery-cubes > div:nth-child(3) .boxes-images-outer-image { width: 100%; aspect-ratio: 375/240; border-radius: 0; }
body.playbook #allSectionsWrapper .section.grid-gallery-section.sticky-gallery[data-id="28057"] { margin-bottom: 40px; }
body.playbook #allSectionsWrapper .section.playbook-video { padding: 0 20px; }
body.playbook #allSectionsWrapper .section.playbook-video .playbook-video-inner { width: 100%; height: 340px; aspect-ratio: unset; border-radius: 5px; }
body.playbook #allSectionsWrapper .section.grid-text-section.quote { padding-inline: 20px; }
body.playbook #allSectionsWrapper .section.grid-text-section.quote .quote-avatar .section-title { width: auto; }
body.playbook #allSectionsWrapper .section.grid-text-section.quote .quote-avatar .section-title h2 { width: auto; max-width: none; }
body.playbook #allSectionsWrapper .section.grid-row-section[data-id="27994"] .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { padding-bottom: 80px; }
body.playbook #allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] { padding-bottom: 32px; padding-block: 0 40px; }
body.playbook #allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item { flex-direction: column-reverse; }
body.playbook #allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .one-row-text { flex-direction: column; flex: content; }
body.playbook #allSectionsWrapper .section.dynamicGrid.one-row[data-id="28056"] .dynamic-grid-item .dynamic-grid-field.field-iframe iframe { width: 170% !important; height: 190% !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); }
}
/*--------------------/*
RCMO PAGE
/*--------------------*/
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview { width: 100%; margin-inline: 0; padding: 0; position: relative; background: var(--black); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a { margin: 0; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero { position: sticky; top: 23%; z-index: 1; width: 100%; min-height: 60vh; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gap-48); padding-inline: var(--gap-200); padding-bottom: var(--gap-280); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero #headline { margin: 0; width: 65%; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero #headline h1 { color: var(--white); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText { display: flex; flex-direction: column; align-items: center; max-width: 25.833vw; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText p { margin: 0; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText p:last-child { margin-top: var(--gap-48); }
body.rcmo :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText { max-width: var(--gap-685); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo { position: relative; z-index: 3; }
@media(min-width: 1025px) {
/* QA 2: title 236 under the header (was 120 = #GridContent offset) and 1200 wide like the other inner pages */
body.rcmo :is(div,#LobbyModule) #lobbyview .rcmo-hero { justify-content: flex-start; padding-top: var(--gap-116); }
body.rcmo :is(div,#LobbyModule) #lobbyview .rcmo-hero #headline { width: var(--gap-1200); max-width: 100%; }
body.about :is(div,#LobbyModule) #lobbyview .rcmo-hero { top: 35%; }
}
@media(max-width: 1025px) {
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero { min-height: 100vh; gap: var(--gap-16); padding: var(--gap-40) var(--gap-20) var(--gap-64); top: 0; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero #headline { width: 100%; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText { max-width: 100%; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText p:last-child { margin-top: var(--gap-24); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim { height: var(--gap-48); padding-inline: var(--gap-20); /* margin-inline: var(--gap-48) !important; */ }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::before { width: var(--gap-48); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::after { content: ''; position: absolute; width: var(--gap-48); height: auto; aspect-ratio: 1; inset-inline-start: 100%; top: 50%; transform: translateY(-50%); background-color: var(--red); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: var(--gap-18); background-image: url(https://media.getmood.io/warehouse/dynamic/731725.svg); opacity: 0; display: none; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container { padding-block: var(--gap-200) 667px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes { position: relative; display: block; width: 100%; height: 1582px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div { position: absolute; margin: 0; padding: 0; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+1) { left: 8px; top: calc(0px + var(--cycle, 0) * 1782px); width: 228px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+2) { left: 178px; top: calc(534px + var(--cycle, 0) * 1782px); width: 177px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+3) { left: 8px; top: calc(961px + var(--cycle, 0) * 1782px); width: 228px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+4) { left: 178px; top: calc(1367px + var(--cycle, 0) * 1782px); width: 177px; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+1) .boxes-images-outer-image, body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+3) .boxes-images-outer-image { aspect-ratio: 228/276; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+2) .boxes-images-outer-image, body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div:nth-child(4n+4) .boxes-images-outer-image { aspect-ratio: 177/214; }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes > div .boxes-images-outer-image { width: 100%; height: auto; border-radius: 5px; }
/* image 5+ repeats slots 1-4 one cycle (1582 field + 200 gap = 1782) lower; height = last slot bottom (276/748/1237/1581) + cycles x 1782 */
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="1"] { height: calc(276px + var(--cycles, 0) * 1782px); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="2"] { height: calc(748px + var(--cycles, 0) * 1782px); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="3"] { height: calc(1237px + var(--cycles, 0) * 1782px); }
body:is(.rcmo,.about) :is(div,#LobbyModule) #lobbyview .section.grid-gallery-section.sticky-rcmo .gallery-container .gallery-cubes[data-tail="4"] { height: calc(1582px + var(--cycles, 0) * 1782px); }
}
/**/
/*--------------------/*
ABOUT PAGE
/*--------------------*/
body.about :is(div,#LobbyModule) #lobbyview { background: var(--red); }
body.about :is(div,#LobbyModule) #lobbyview #headline { font-size: unset; }
body.about :is(div,#LobbyModule) #lobbyview .rcmo-hero { background: var(--red); }
body.about :is(div,#LobbyModule) #lobbyview .rcmo-hero .lobbyTextContainer #lobbyText p:last-child { margin-top: 0; }
body.about #allSectionsWrapper { background: var(--bg); }
/* QA 2: 25618 "Hi, we are Richkid" paragraph = 17 running text, grey, 658 wide (the 24/black/1078 rules are the product-page intro, scoped out here) */
body.about #allSectionsWrapper .section.grid-text-section:not(.quote):not(.started):not([data-id="25696"]) > .grid-text { width: var(--gap-658); }
body.about #allSectionsWrapper .section.grid-text-section:not(.quote):not(.started):not([data-id="25696"]) .grid-text-content p { color: var(--grey); }
body.about #allSectionsWrapper .section.grid-gallery-section.wins { background: var(--bg); }
body.about #allSectionsWrapper .section.grid-gallery-section.wins .section-title h2 { color: var(--bg-black); }
body.about #allSectionsWrapper .section.grid-text-section { background: var(--bg); }
body.about #allSectionsWrapper .section.dynamicGrid.cards { background: var(--bg); }
body.about #allSectionsWrapper .section.grid-image-section { background: var(--bg); }
body.about #allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] { background: var(--black); }
body.about #allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .section-title { }
body.about #allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] .section-title h2 { color: var(--white); }
@media(min-width: 1025px) {
body.about #allSectionsWrapper .section.dynamicGrid.cards { padding-block: var(--gap-120); }
body.about :is(div,#LobbyModule) #lobbyview .rcmo-hero #headline { width: var(--gap-1364); max-width: 100%; }
}
@media(max-width: 1025px) {
body.about :is(div,#LobbyModule) #lobbyview { padding-inline: 0; padding-bottom: 0; }
body.about #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item { min-height: 365px; }
body.about #allSectionsWrapper .section.grid-gallery-section.wins[data-id="25611"] { margin: 0; }
}
/**/
/*--------------------/*
AI GUIDE PAGE
/*--------------------*/
body.ai-guide #GridContent { padding-top: 0; }
body.ai-guide :is(div,#LobbyModule) #lobbyview { background: var(--red); width: 100%; margin-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--gap-40); padding-block: calc(var(--headerHeight) + var(--gap-120)) var(--gap-240); }
body.ai-guide :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: 0; }
body.ai-guide :is(div,#LobbyModule) #lobbyview #headline h1 { color: var(--white); text-align: center; }
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer { display: flex; flex-direction: column; align-items: center; gap: var(--gap-40); width: 100%; }
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { max-width: var(--gap-685); display: flex; flex-direction: column; align-items: center; gap: var(--gap-40); }
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p:first-child { color: var(--white); text-align: center; margin: 0; }
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { margin: 0; justify-content: center; }
body:is(.ai-guide, .implement-ai, .playbook) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a { margin: 0; background: var(--white); color: var(--black); }
body:is(.ai-guide, .implement-ai, .playbook) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::before { background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
body:is(.ai-guide, .kickstart) :is(div,#LobbyModule) #lobbyview #GridTop { width: var(--gap-1400); height: auto; min-height: 0; aspect-ratio: 1400 / 745; margin: var(--gap-80) 0 0; border-radius: var(--gap-24); background-size: cover; background-position: center; background-repeat: no-repeat; }
body.ai-guide #allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-img { flex-basis: var(--gap-619); }
body.ai-guide .guide-body { position: relative; }
body.ai-guide .guide-body .share-rail { position: absolute; top: 0; bottom: 0; left: var(--gap-260); padding-block: var(--gap-120) var(--gap-180); z-index: 2; }
body.ai-guide .guide-body .share-rail .share-strip { position: sticky; top: calc(var(--headerHeight) + var(--gap-40)); display: flex; flex-direction: column-reverse; align-items: center; gap: var(--gap-24); }
@media(min-width: 1025px) {
body:is(.ai-guide, .implement-ai, .playbook) :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::after { background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
}
@media(max-width: 1025px) {
body.ai-guide :is(div,#LobbyModule) #lobbyview { gap: var(--gap-16); padding-inline: var(--gap-20); padding-block: calc(var(--headerHeight) + var(--gap-40)) 0; min-height: 100vh; }
body.ai-guide :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { gap: var(--gap-16); }
body:is(.ai-guide, .kickstart) :is(div,#LobbyModule) #lobbyview:has(> #GridTop) { padding-bottom: 108px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] { padding-block: 40px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] .share-strip { margin-bottom: 64px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] .section-title { margin-bottom: 24px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content > a.sec-button { margin-top: 48px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] .grid-text-content h3.grid-text-subhead + * { margin-top: 24px; }
body.ai-guide #allSectionsWrapper .section.grid-text-section[data-id="25696"] .share-strip .share-label { color: var(--grey-mid); }
body.ai-guide #allSectionsWrapper .section.dynamicGrid.one-row .dynamic-grid-item .dynamic-grid-field.field-img { flex-basis: unset; }
body:is(.ai-guide, .kickstart) :is(div,#LobbyModule) #lobbyview #GridTop { width: 255px; height: auto; aspect-ratio: 255 / 232; min-height: 0; margin: var(--gap-24) 0 0; border-radius: var(--gap-5); }
}
/**/
/*--------------------/*
IMPLEMENT AI PAGE
/*--------------------*/
body.implement-ai #GridContent { padding-top: 0; }
body.implement-ai :is(div,#LobbyModule) #lobbyview { background: var(--red); width: 100%; margin-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--gap-48); padding-block: calc(var(--headerHeight) + var(--gap-120)) var(--gap-120); }
body.implement-ai :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: 0; }
body.implement-ai :is(div,#LobbyModule) #lobbyview #headline h1 { color: var(--white); text-align: center; }
body.implement-ai :is(div,#LobbyModule) #lobbyview > h2 { color: var(--white); text-align: center; max-width: var(--gap-685); margin: 0; }
body.implement-ai :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { margin: 0; justify-content: center; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards { background: var(--black); padding: 0 var(--gap-260) var(--gap-120); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-30); position: sticky; top: 0; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening .section-title h2 { color: var(--white); display: inline-block; width: min-content; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening .section-topText { margin-top: 0; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening .section-topText p { color: var(--white); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-wrapper { margin-top: 0; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item { align-items: stretch; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap-64); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-head .dynamic-grid-field.field-text { flex: 1; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-head .dynamic-grid-field.field-text p { margin: 0; text-align: right; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-head .dynamic-grid-field.field-img.icon { flex-shrink: 0; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-number-wrapper { align-items: flex-start; gap: var(--gap-16); padding-inline-end: var(--gap-156); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-number-wrapper .dynamic-grid-field p { margin: 0; text-align: right; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .dynamic-grid-field.field-richtext.text p { text-align: right; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n) { background: var(--white); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n) .dynamic-grid-field p { color: var(--black); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n) .dynamic-grid-field.field-richtext.text p { color: var(--grey); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(4n) .dynamic-grid-field.field-img.icon img { filter: brightness(0); }
@media(min-width: 1025px) {
body.implement-ai :is(div,#LobbyModule) #lobbyview { min-height: 100vh; justify-content: center; position: sticky; top: 0; }
body.implement-ai #allSectionsWrapper { position: relative; z-index: 1; }
/* last card pins centered over the centered opening text; the matching room under the stack makes both release together (card height = 500x600 aspect = --gap-600) */
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-items { margin-bottom: calc((100vh - var(--gap-600)) / 2); }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:last-child { top: calc((100vh - var(--gap-600)) / 2); }
}
@media(max-width: 1025px) {
body.implement-ai :is(div,#LobbyModule) #lobbyview { gap: 16px; padding-bottom: 64px; }
body.implement-ai :is(div,#LobbyModule) #lobbyview > h2 { max-width: 100%; }
body.implement-ai :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { padding-top: 24px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards { padding: 0 20px 60px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening { gap: 16px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper { gap: 20px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.num-cards .num-cards-title-wrapper .dynamic-grid-field.field-button { margin-top: 12px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .cards-opening .section-topText p { max-width: 211px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item { padding: 24px; aspect-ratio: 335/405; gap: 16px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-head { gap: 24px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item .card-number-wrapper { gap: 16px; padding-inline-end: 124px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(n) { top: 167px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(1) { top: 131px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(2) { top: 143px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards .dynamic-grid-item:nth-child(3) { top: 155px; }
body.implement-ai #allSectionsWrapper .section.dynamicGrid.cards[data-id="28051"] { margin-bottom: 40px; }
}
/**/
/*--------------------/*
CONTACT PAGE
/*--------------------*/
body.contact #LobbyModule { display: flex; align-items: stretch; }
body.contact #GridContent { padding-top: 0; }
body.contact :is(div,#LobbyModule) #lobbyview { width: 50%; background: var(--black); min-height: 100vh; margin-inline: 0; padding: 0 var(--gap-140) 0; justify-content: center; gap: var(--gap-48); margin: 0; }
body.contact :is(div,#LobbyModule) #lobbyview #headline { text-align: start; margin: 0; }
body.contact :is(div,#LobbyModule) #lobbyview #headline h1 { color: var(--white); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer { text-align: end; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { max-width: none; display: flex; flex-direction: column; gap: var(--gap-48); text-align: start; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p:nth-child(2) { display: none; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-24); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li { text-align: start; display: flex; align-items: flex-start; gap: var(--gap-16); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-arrow { display: flex; padding-top: var(--gap-5); flex-shrink: 0; color: var(--white); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-arrow svg { width: var(--gap-18); height: auto; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-text { flex: 1; display: flex; flex-direction: column; gap: var(--gap-4); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-12); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links :is(.contact-sep, .contact-phone, .contact-wa) { display: flex; align-items: center; color: var(--white); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links .contact-sep { padding-top: var(--gap-4); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links .contact-sep svg { width: var(--gap-14); height: auto; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links .contact-phone a.button-with-anim { gap: var(--gap-8); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links .contact-wa svg { width: var(--gap-20); height: auto; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim { display: inline-flex; align-items: center; background: transparent; min-width: 0; height: auto; margin-inline: 0 !important; margin-block: 0; padding: 0; border-radius: 0; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim::before, body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim::after { content: none; display: none; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim .btn-text-wrapper { display: inline; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim .btn-text-wrapper span { color: var(--white); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li a.button-with-anim[href^="mailto:"] .btn-text-wrapper span { text-decoration: underline; }
body.contact #allSectionsWrapper { width: 50%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.contact #allSectionsWrapper .section.grid-form-section { height: 100%; /* padding-block: var(--gap-220); */ }
body.contact #allSectionsWrapper .section.grid-form-section { display: flex; align-items: center; justify-content: center; }
body.contact .form-container-wide { background: none; padding: 0; border-radius: 0; max-width: var(--gap-500); width: var(--gap-500); margin-inline: auto; }
body.contact .form-container-wide #DynamicFormObject { gap: var(--gap-40); }
body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { margin-top: var(--gap-32); }
body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { height: var(--gap-52); }
/* thanks mode - template adds .thanks-mode, hides the title + .top-form and fades the form out (also /tools/newsletter) */
body.contact .form-container-wide #DynamicFormObject.thanks-mode { gap: 0; }
body.contact .form-container-wide #DynamicFormObject.thanks-mode .dynamicFormObjectTitleAndText { display: none; }
body.contact .form-container-wide #DynamicFormObject.thanks-mode #form-thanks { display: flex !important; flex-direction: column; gap: var(--gap-16); width: 100%; max-width: 100%; margin: 0; padding: 0; }
body.contact .form-container-wide #DynamicFormObject.thanks-mode #form-thanks :is(#headline, #text1) { margin: 0; padding: 0; width: 100%; max-width: 100%; }
body.contact .form-container-wide #DynamicFormObject.thanks-mode #form-thanks #headline h3 { margin: 0; }
body.contact footer .section.grid-content-section.touch { display: none; }
/**/
@media(max-width: 1025px) {
body.contact #LobbyModule { flex-direction: column; }
body.contact :is(div,#LobbyModule) #lobbyview { width: 100%; background: var(--black); min-height: fit-content; margin-inline: 0; padding: calc(var(--headerHeight) + var(--gap-40)) var(--gap-20) var(--gap-64); justify-content: flex-start; gap: var(--gap-16); }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { gap: 40px; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li { gap: 12px; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links { gap: 8px; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul li .contact-links .contact-phone a.button-with-anim:has(.contact-wa) .btn-text-wrapper { display: none; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { width: 100%; text-align: start; }
body.contact :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText ul { gap: var(--gap-24); }
body.contact #allSectionsWrapper { width: 100%; min-height: unset; padding: var(--gap-40) var(--gap-20); }
body.contact .form-container-wide { max-width: 100%; width: 100%; margin-inline: 0; }
body.contact .form-container-wide #DynamicFormObject { gap: var(--gap-32); }
body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { margin-top: 32px; }
body.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { height: fit-content; }
body.contact .form-container-wide #DynamicFormObject.thanks-mode #form-thanks { gap: 8px; }
.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField input[type="checkbox"] { height: auto; aspect-ratio: 1; }
}
/*--------------------/*
NEWSLETTER PAGE
/*--------------------*/
body.contact.newsletter :is(div,#LobbyModule) #lobbyview #headline h1 { text-align: center; font-size: clamp(60px,var(--fs-90),300px); }
body.contact.newsletter :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { text-align: center; font-family: var(--font-1); width: var(--gap-500); max-width: 100%; margin-inline: auto; }
/* form (QA doc 18435126415): title->fields 40 (the empty .top-form + fields gap 32 stacked on the 40), checkbox->button 40, grey consent text */
body.contact.newsletter .form-container-wide #DynamicFormObject .dynamicFormObjectFields { gap: 0; }
body.contact.newsletter .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { margin-top: var(--gap-32); }
body.contact.newsletter .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField label { color: var(--grey); }
@media(max-width: 1025px) {
body.contact.newsletter :is(div,#LobbyModule) #lobbyview #headline h1 { font-size: 36px; text-align: start; }
body.contact.newsletter :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { width: 100%; text-align: start; }
body.contact.newsletter .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.textareaField { height: 50px; }
body.contact.newsletter .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) { height: 50px; border-radius: 5px; }
}
/*--------------------/*
BLOG LOBBY PAGE
/*--------------------*/
#GridContent { padding-top: var(--gap-96); }
.blogmain-header { display: flex; flex-direction: column; align-items: center; gap: var(--gap-48); padding: var(--gap-120) var(--gap-260) var(--gap-48); text-align: center; }
.blogmain-header #headline { font-size: unset; }
.blogmain-header #headline h1 { color: var(--black); text-transform: uppercase; }
.blog-tags { padding-top: var(--gap-24); }
.blog-tags nav.blog-tags-list ul { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gap-10); list-style: none; margin: 0; padding: 0; }
.blog-tags nav.blog-tags-list ul li.blog-tag { margin: 0; display: flex; align-items: center; gap: var(--gap-10); }
.blog-tags nav.blog-tags-list ul li.blog-tag:not(:first-child)::before { content: "/"; color: var(--grey); }
.blog-tags nav.blog-tags-list ul li.blog-tag a { color: var(--grey); transition: 0.3s ease color; }
.blog-tags nav.blog-tags-list ul li.blog-tag.active a { color: var(--red); }
.blog-tags nav.blog-tags-list ul li.blog-tag:first-child { display: none; }
.blog-tags nav.blog-tags-list ul li.blog-tag:nth-child(2)::before { display: none; }
#BlogModule .blog-posts { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-flow: row dense; grid-auto-rows: 1fr; gap: var(--gap-20); padding-inline: var(--gap-260); padding-bottom: var(--gap-140); }
#BlogModule .blog-posts .blog-post { aspect-ratio: 1; grid-column: span 1; grid-row: span 1; width: 100% !important; }
#BlogModule .blog-posts .blog-post:nth-child(12n+4) { grid-column: 1 / span 2; grid-row: span 2; aspect-ratio: auto; width: 100% !important; }
#BlogModule .blog-posts .blog-post:nth-child(12n+5) { grid-column: 3; }
#BlogModule .blog-posts .blog-post:nth-child(12n+6) { grid-column: 3; }
#BlogModule .blog-posts .blog-post:nth-child(12n+10) { grid-column: 2 / span 2; grid-row: span 2; aspect-ratio: auto; }
#BlogModule .blog-posts .blog-post:nth-child(12n+11) { grid-column: 1; }
#BlogModule .blog-posts .blog-post:nth-child(12n+12) { grid-column: 1; }
@media(max-width: 1025px) {
#GridContent { padding-top: var(--headerHeight); }
.blogmain-header { padding: var(--gap-80) var(--gap-20) var(--gap-64); gap: var(--gap-40); }
.blog-tags { display: none; }
}
/**/
/*--------------------/*
BLOG OUR BLOG PAGE LOBBY
/*--------------------*/
body.our-blog #BlogModule .blog-posts { grid-template-columns: repeat(4,1fr); grid-auto-flow: initial; grid-auto-rows: auto; column-gap: var(--gap-20); row-gap: var(--gap-56); padding-inline: var(--gap-260); padding-bottom: var(--gap-140); }
body.our-blog #BlogModule .blog-posts .blog-post { aspect-ratio: auto; grid-column: auto; grid-row: auto; width: 100% !important; }
/* position reset for ordinary posts only: the upcoming card is excluded so its full-row rule below wins at ANY dom position (it sat at nth-child 11 once 3 webinars were added and this reset out-specified it, collapsing the grid) */
body.our-blog #BlogModule .blog-posts .blog-post:not(:has(> .upcoming-wrapper)):is(:nth-child(12n+4), :nth-child(12n+5), :nth-child(12n+6), :nth-child(12n+10), :nth-child(12n+11), :nth-child(12n+12)) { grid-column: auto; grid-row: auto; aspect-ratio: auto; }
body.our-blog :is(div, #BlogModule) .blog-post:has(> .upcoming-wrapper) { grid-column: 1 / -1; order: -1; aspect-ratio: auto; }
body.our-blog .blogmain-header { padding-block: var(--gap-120); }
body.our-blog .blogmain-header #headline { margin: 0; }
body.our-blog .blogmain-header #text1 { }
body.our-blog .blogmain-header #text1 p { color: var(--grey); width: var(--gap-496); margin-inline: auto; }
body.our-blog .blogmain-header #text1 p:has(a.tiny-btn) { display: flex; justify-content: center; }
body.our-blog .blogmain-header #text1 p:has(a.tiny-btn) a.tiny-btn { min-width: var(--gap-180); margin-top: var(--gap-48); }
body.our-blog:not(.contentInnerPage) #BlogMain { padding-bottom: 0; }
body.our-blog #GridContent:has( .upcoming-wrapper) #text1 { display: none; }
@media(min-width: 1025px) {
body.our-blog:not(.contentInnerPage) #GridPage { padding-top: var(--headerHeight); }
body.our-blog:not(.contentInnerPage) #GridContent { padding-top: 0; }
body.our-blog:has(.blog-post > .upcoming-wrapper) .blogmain-header { padding-bottom: 0; }
body.our-blog:has(.blog-post > .upcoming-wrapper) .blogmain-header #text1 p:has(a.tiny-btn) { display: none; }
body.our-blog #BlogModule .blog-posts .blog-post:has(> .upcoming-wrapper) { margin-top: var(--gap-48); margin-bottom: var(--gap-64); }
}
@media(max-width: 1025px) {
body.our-blog #GridContent { padding: 0; }
body.our-blog #GridPage { margin-top: 0; padding-top: 78px; }
body.our-blog #BlogModule .blog-posts { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gap-20); padding-inline: var(--gap-20); padding-bottom: var(--gap-64); }
body.our-blog .blogmain-header { padding-top: var(--gap-40); padding-bottom: var(--gap-64); gap: 16px; }
body.our-blog .blogmain-header #text1 p { width: 100%; }
body.our-blog .blogmain-header #text1 p:has(a.tiny-btn) a.tiny-btn { min-width: 0; margin-top: var(--gap-24); }
}
/**/
/*--------------------/*
BLOG INNER PAGE
/*--------------------*/
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view { display: flex; flex-direction: column; align-items: center; position: relative; padding-block: var(--gap-160) var(--gap-120); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view a.blog-back { position: absolute; top: var(--gap-24); inset-inline-start: var(--gap-48); display: inline-flex; align-items: center; gap: var(--gap-5); color: var(--grey); border-bottom: 1px solid var(--grey); padding-bottom: var(--gap-4); text-decoration: none; transition: 0.3s ease color, 0.3s ease border-color; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view a.blog-back svg { width: var(--gap-8); height: var(--gap-10); flex-shrink: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view #headline { max-width: var(--gap-974); margin: 0; text-align: center; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view > h2 { max-width: var(--gap-496); text-align: center; color: var(--grey); margin: var(--gap-32) 0 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author { display: flex; align-items: center; justify-content: center; gap: var(--gap-16); margin-top: var(--gap-32); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author .author-image { width: var(--gap-53); height: var(--gap-54); border-radius: 50%; overflow: hidden; flex-shrink: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author .author-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author .author-details { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--gap-4); color: var(--black); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view #GridTop { width: var(--gap-1400); height: auto; min-height: 0; aspect-ratio: 1400 / 700; margin: var(--gap-100) auto var(--gap-120); border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: var(--gap-80); width: 100%; padding-inline: var(--gap-260); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .blog-promo { position: sticky; top: calc(var(--headerHeight) + var(--gap-40)); flex-shrink: 0; display: block; width: var(--gap-270); height: var(--gap-274); border-radius: 5px; border: 1px solid var(--stroke-white); overflow: hidden; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .blog-promo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.3s ease transform; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 { width: var(--gap-640); flex-shrink: 0; margin: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 > * { margin-block: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 :is(p, li) { color: var(--grey); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 :is(h3,h4,h5) { color: var(--black) !important; margin-block: var(--gap-32) var(--gap-16); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 > :first-child { margin-top: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 p { margin-bottom: var(--gap-16); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 p:has(> img) { margin-block: var(--gap-56); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ul { list-style: none; padding: 0; margin: 0 0 var(--gap-16); display: flex; flex-direction: column; gap: var(--gap-4); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ul li { display: flex; align-items: flex-start; gap: var(--gap-16); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ul li::before { content: ""; min-width: var(--gap-6); height: var(--gap-6); margin-top: var(--gap-10); background: var(--red); border-radius: 50%; flex-shrink: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol { counter-reset: item; list-style: none; padding: 0; margin: 0 0 var(--gap-16); display: flex; flex-direction: column; gap: var(--gap-4); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol li { counter-increment: item; display: flex; align-items: flex-start; gap: var(--gap-16); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol li::before { content: counter(item); min-width: var(--gap-10); flex-shrink: 0; color: var(--grey); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 img { width: 100%; height: auto; border-radius: 10px; display: block; margin: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip { flex-shrink: 0; float: none; margin: 0 auto 0 0; position: sticky; top: calc(var(--headerHeight) + var(--gap-40)); display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); width: fit-content; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip span { color: var(--grey-mid); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip a.share-icon { display: flex; align-items: center; justify-content: center; width: var(--gap-20); height: var(--gap-20); border: none; color: var(--black); transition: 0.3s ease color; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip a.share-icon svg { width: 100%; height: 100%; display: block; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip a.share-icon.copied { color: var(--red); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .gallery-container { display: none; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts { background: var(--white); display: flex; flex-direction: column; align-items: center; gap: var(--gap-72); padding: var(--gap-120) var(--gap-260); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts > h2 { width: 100%; margin: 0; text-align: center; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts { display: grid; grid-template-columns: repeat(3, var(--gap-335)); justify-content: center; grid-auto-flow: row; grid-auto-rows: auto; column-gap: var(--gap-20); row-gap: var(--gap-56); padding: 0; width: 100%; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts .blog-post { aspect-ratio: auto; grid-column: auto; grid-row: auto; width: 100% !important; }
@media(max-width: 1025px) {
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view { padding-block: 0 32px; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view #headline { padding-inline: var(--gap-20); margin-top: var(--gap-40); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view > h2 { max-width: 100%; padding-inline: var(--gap-20); margin-top: var(--gap-16); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-author { padding-inline: var(--gap-20); margin-top: var(--gap-24); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view a.blog-back { position: static; order: -1; align-self: flex-end; margin-inline: var(--gap-20); inset-inline-start: unset; margin-inline-end: auto; padding-bottom: 0; font-size: 14px; margin-top: 16px; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view #GridTop { width: 100%; height: auto; aspect-ratio: 375/245; margin: var(--gap-24) 0 0; border-radius: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row { flex-direction: column; gap: var(--gap-24); padding-inline: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .blog-promo { position: static; order: 1; width: 335px; height: 340px; margin-inline: auto; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 { width: 100%; padding-inline: var(--gap-20); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol { counter-reset: item; list-style: none; padding-inline-start: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol li { counter-increment: item; display: flex; align-items: flex-start; gap: var(--gap-8); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row #text1 ol li::before { content: counter(item); min-width: 10px; flex-shrink: 0; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip { order: -1; position: static; flex-direction: row-reverse; justify-content: flex-start; align-items: center; width: 100%; padding-inline: var(--gap-20); margin-top: 48px; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts { padding: var(--gap-40) 0; gap: var(--gap-32); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts > h2 { padding-inline: var(--gap-20); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gap-20); padding-inline: var(--gap-20); justify-content: flex-start; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts .blog-post { flex: 0 0 var(--gap-300); width: auto !important; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts .blog-post .blog-post-image { height: 361px; border-radius: 5px; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts .blog-post .blog-post-content > .tag { display: none; }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-related-posts .blog-posts .blog-post .blog-post-content { padding-left: 16px; }
}
/**/
@media(min-width: 1025px) {
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row .share-strip a.share-icon:hover { color: var(--red); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view a.blog-back:hover { color: var(--red); border-color: var(--red); }
body.our-blog.contentInnerPage:not(.webinar) #BlogView .blog-view .blog-body-row a.blog-promo:hover img { transform: scale(1.03); }
}
/*--------------------/*
WEBINAR PAGE
/*--------------------*/
body:has(.webinar-page) #GridContent { padding-top: 0; }
body.our-blog.contentInnerPage #GridWrapInner #GridHeader { display: none; }
.webinar-page { display: flex; flex-direction: column; }
.webinar-page .red-bg { background: var(--red); display: flex; flex-direction: column; align-items: center; gap: var(--gap-32); padding-block: var(--gap-96) var(--gap-100); padding-inline: var(--gap-40); min-height: 100vh; justify-content: center; position: relative; }
.webinar-page .red-bg a.webinar-back { position: absolute; top: calc(var(--headerHeight) + var(--gap-24)); inset-inline-start: var(--gap-48); z-index: 2; width: auto; max-width: none; display: inline-flex; align-items: center; gap: var(--gap-5); color: var(--white); border-bottom: 1px solid var(--white); transition: 0.3s ease opacity; }
.webinar-page .red-bg a.webinar-back .back-arrow { width: var(--gap-8); height: var(--gap-10); flex-shrink: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7 1L2 6L7 11' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.webinar-page .red-bg .vid-wrapper { display: flex; justify-content: center; width: fit-content; }
.webinar-page .red-bg .vid-wrapper iframe { width: 43.333vw; height: 21.323vw; }
/* video facade (JS): YouTube thumbnail + Figma black play (1250:15188) until clicked, then the real player is swapped in */
.webinar-page .red-bg .vid-wrapper .vid-facade { position: relative; display: block; width: 43.333vw; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--black); cursor: pointer; overflow: hidden; }
.webinar-page .red-bg .vid-wrapper .vid-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webinar-page .red-bg .vid-wrapper .vid-facade .vid-play { position: absolute; left: 50%; top: 50%; width: var(--gap-72); aspect-ratio: 1; transform: translate(-50%, -50%); transition: 0.3s ease transform; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 75 75' fill='none'%3E%3Crect width='75' height='75' rx='37.5' fill='%2317181C'/%3E%3Cpath d='M48.1856 37.0544C48.5114 37.2617 48.5114 37.7373 48.1856 37.9447L32.2852 48.063C31.934 48.2866 31.4744 48.0343 31.4744 47.6179L31.4744 27.3811C31.4744 26.9648 31.934 26.7125 32.2852 26.936L48.1856 37.0544Z' fill='white'/%3E%3C/svg%3E"); }
.webinar-page .red-bg .vid-wrapper .vid-facade:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.webinar-page .red-bg > * { max-width: var(--gap-974); width: 100%; }
.webinar-page .red-bg .headline { text-align: center; color: var(--white); }
.webinar-page .red-bg .sub-headline { text-align: center; color: var(--white); }
.webinar-page .red-bg .speakers { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--gap-48); padding-top: var(--gap-24); }
.webinar-page .red-bg .speakers .speaker { display: flex; flex-direction: row; align-items: center; gap: var(--gap-16); }
.webinar-page .red-bg .speakers .speaker .img-wrapper { width: var(--gap-64); height: var(--gap-64); border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.webinar-page .red-bg .speakers .speaker .img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webinar-page .red-bg .speakers .speaker .speaker-info { display: flex; flex-direction: column; align-items: flex-start; }
.webinar-page .red-bg .speakers .speaker .speaker-info :is(.speakerName, .speakerJob) h4 { margin: 0; }
.webinar-page .red-bg .speakers .speaker .speaker-info .speakerName h4, .webinar-page .red-bg .speakers .speaker .speaker-info .speakerJob h4 { color: var(--white); }
.webinar-page .red-bg .date-time { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--gap-8); }
.webinar-page .red-bg .date-time .date, .webinar-page .red-bg .date-time .dayNtime { color: var(--white); }
.webinar-page .red-bg .date-time .dayNtime { display: flex; align-items: center; gap: var(--gap-8); }
.webinar-page :is(.red-bg, .webinar-sticky-ticket) .date-time .dayNtime::before { content: ""; height: var(--gap-20); aspect-ratio: 9 / 19; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; flex-shrink: 0; }
.webinar-page .red-bg > .btn-wrapper { display: flex; justify-content: center; padding-top: var(--gap-16); }
:is(div, #LobbyModule) .red-bg a.open-form-btn.button-with-anim { background: var(--white); color: var(--black); min-width: var(--gap-180); }
:is(div, #LobbyModule) .red-bg a.open-form-btn.button-with-anim::before { background-color: var(--white); background-image: url(https://media.getmood.io/warehouse/dynamic/731523.svg); background-position: center; background-repeat: no-repeat; }
:is(div, #LobbyModule) .red-bg a.open-form-btn.button-with-anim::after { background-color: var(--white); background-image: url(/warehouse/dynamic/623930.svg); }
.webinar-page .white-bg { max-width: var(--gap-640); margin-inline: auto; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-32); padding-block: var(--gap-120) var(--gap-120); padding-inline: 0; position: relative; }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip a.share-icon svg { width: 100%; height: 100%; display: block; }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip a.share-icon.copied { color: var(--red); }
.webinar-page .white-bg .subheadline h4 { text-align: right; color: var(--black); }
.webinar-page .white-bg .text { text-align: right; }
.webinar-page .white-bg .text h3 { color: var(--black); margin: 0 0 var(--gap-16); }
.webinar-page .white-bg .text p { color: var(--grey); margin: 0; }
/* on-demand body (Figma 1250:15071): link rows + strong-only paragraphs are black bold headings, links red with a red underline */
.webinar-page .white-bg .text p:is(:has(> a), :has(> strong:only-child)) { color: var(--black); }
.webinar-page .white-bg .text p a { color: var(--red); border-bottom: 1px solid var(--red); }
.webinar-page .red-bg .publish-date { color: var(--white); text-align: center; }
.webinar-page .white-bg .when { display: flex; flex-direction: column; gap: var(--gap-16); text-align: right; }
.webinar-page .white-bg .when h4 { color: var(--black); margin: 0; }
.webinar-page .white-bg .when p { color: var(--black); margin: 0; }
.webinar-page .white-bg .speakers-title, .webinar-page .white-bg .steps-title { margin: 0; }
.webinar-page .white-bg .steps-wrapper { display: flex; flex-direction: column; }
.webinar-page .white-bg .speakers { display: flex; flex-direction: row; gap: var(--gap-12); }
.webinar-page .white-bg .speakers .speaker { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--gap-16); padding: var(--gap-20); border: 1px solid var(--stroke); border-radius: 5px; }
.webinar-page .white-bg .speakers .speaker .img-wrapper { width: var(--gap-64); height: var(--gap-64); border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.webinar-page .white-bg .speakers .speaker .img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webinar-page .white-bg .speakers .speaker .speaker-info { display: flex; flex-direction: column; align-items: flex-start; }
.webinar-page .white-bg .speakers .speaker .speaker-info .speakerName h4 { color: var(--black); }
.webinar-page .white-bg .speakers .speaker .speaker-info :is(.speakerName, .speakerJob) h4 { margin: 0; }
.webinar-page .white-bg .speakers .speaker .speaker-info .speakerJob h4 { color: var(--grey); }
.webinar-page .white-bg .step { display: flex; flex-direction: row; align-items: stretch; min-height: var(--gap-152); background: var(--white); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.webinar-page .white-bg .step:not(:last-of-type) { margin-bottom: var(--gap-4); }
.webinar-page .white-bg .step .step-ind { display: flex; align-items: center; justify-content: center; width: var(--gap-136); background: var(--red-light-2); border-radius: 5px; margin: var(--gap-8) var(--gap-8) var(--gap-8) 0; flex-shrink: 0; }
.webinar-page .white-bg .step .step-ind p { color: var(--red); margin: 0; }
.webinar-page .white-bg .step .step-info { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: right; padding-inline: var(--gap-56) var(--gap-120); }
.webinar-page .white-bg .close-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-16); text-align: right; }
.webinar-page .white-bg .close-text p { color: var(--black); margin: 0; }
.webinar-page .white-bg .close-text > p:last-child { color: var(--grey); }
.webinar-page .white-bg .close-text p a { display: inline-flex; color: var(--red); border-bottom: 1px solid var(--red); }
.webinar-page .white-bg .btn-wrapper a.open-form-btn { min-width: var(--gap-170); }
@media(min-width: 1025px) {
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: var(--gap-32) var(--gap-28); pointer-events: none; opacity: 0; transform: translateY(100%); transition: 0.4s ease opacity, 0.4s ease transform; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket.visible { opacity: 1; transform: none; pointer-events: auto; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-inner { display: flex; flex-direction: row-reverse; align-items: stretch; gap: 1px; height: var(--gap-88); box-shadow: var(--shadow); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket :is(.ticket-cta, .ticket-content) { display: flex; flex-direction: row-reverse; align-items: center; background: var(--white); border: 1px solid var(--grey-stroke); border-radius: 5px; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-cta { padding-inline-end: var(--gap-16); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-cta .btn-wrapper { display: flex; }
.webinar-sticky-ticket .ticket-cta :is(div, #LobbyModule) a.open-form-btn:hover { margin-inline-end: var(--gap-52) !important; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .date-time { display: flex; flex-direction: row; align-items: center; gap: var(--gap-8); padding-inline: var(--gap-32); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .date-time .date { color: var(--red); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .date-time .dayNtime { display: flex; align-items: center; gap: var(--gap-8); color: var(--black); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .date-time .dayNtime::before { background: var(--red); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-content .ticket-title { width: calc(var(--gap-211) + var(--gap-100)); max-width: none; flex-shrink: 0; box-sizing: border-box; padding-inline: var(--gap-32); text-align: start; color: var(--black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ai-guide .webinar-sticky-ticket .ticket-content .ticket-title { width: var(--gap-269); }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-content .ticket-img { width: auto; height: auto; padding: 0; padding-inline-start: var(--gap-4); flex-shrink: 0; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-content .ticket-img img { width: var(--gap-110); height: var(--gap-80); object-fit: cover; border-radius: 5px; display: block; }
.webinar-page .white-bg .share-strip { position: absolute; top: var(--gap-120); left: calc(var(--gap-260) - var(--gap-640)); display: flex; flex-direction: column-reverse; align-items: center; gap: var(--gap-24); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip .share-icons { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip a.share-icon { display: flex; align-items: center; justify-content: center; width: var(--gap-20); height: var(--gap-20); color: var(--black); transition: 0.3s ease color; }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip .share-label { color: var(--grey-mid); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip a.share-icon:hover { color: var(--red); }
.webinar-page .red-bg a.webinar-back:hover { opacity: 0.7; }
/* no-video hero: title pinned 148 under the header (QA 2), hero stays full screen height */
.webinar-page.no-video .red-bg { justify-content: flex-start; padding-top: calc(var(--headerHeight) + var(--gap-148)); }
/* on-demand hero (Figma 1349:17665): title 64 under the header, natural height (~952 with the date + 832x462 video) */
.webinar-page.with-video .red-bg { justify-content: flex-start; min-height: 0; padding-top: calc(var(--headerHeight) + var(--gap-64)); }
.webinar-page.with-video .red-bg .vid-wrapper { border-radius: 7px; overflow: hidden; }
.webinar-page.with-video .red-bg .vid-wrapper iframe { height: auto; aspect-ratio: 16 / 9; display: block; }
.webinar-page.with-video .webinar-sticky-ticket { display: none; }
.webinar-page .red-bg .vid-wrapper .vid-facade:hover .vid-play { transform: translate(-50%, -50%) scale(1.08); }
/* no date (on-demand): drop the empty date cell, 16 on each side of the button (card 257) */
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .date-time:empty { display: none; }
:is(.webinar-page, body.kickstart, body.ai-guide) .webinar-sticky-ticket .ticket-cta:has(> .date-time:empty) { padding-inline: var(--gap-16); }
}
@media(max-width: 1025px) {
:is(div, #LobbyModule) .red-bg a.open-form-btn.button-with-anim { min-width: 150px; padding-inline: 0; }
.webinar-page .red-bg > .btn-wrapper { margin-top: 24px; }
.webinar-page .red-bg .vid-wrapper { max-width: 100%; min-width: 100%; border-radius: 5px; overflow: hidden; }
.webinar-page .red-bg .vid-wrapper iframe { width: 335px; height: fit-content; }
.webinar-page .red-bg .vid-wrapper :is(iframe, .vid-facade) { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.webinar-page .red-bg .vid-wrapper .vid-facade .vid-play { width: 40px; }
.webinar-page .white-bg .step .step-ind p { font-size: 18px; }
.webinar-page .red-bg a.webinar-back { position: static; top: auto; inset-inline-start: auto; align-self: flex-start; margin-bottom: 40px; }
.webinar-page .white-bg .when { gap: 12px; }
.webinar-page .white-bg .speakers .speaker { padding: 16px; }
.webinar-page .webinar-sticky-ticket .date-time .dayNtime { white-space: nowrap; }
.webinar-page .white-bg .close-text > p:first-child { font-size: 16px; }
.webinar-page .white-bg .btn-wrapper { margin-top: 24px; }
}
/**/
/*------------------------------------------/*
FORM POPUP (webinar grid form + #GridPromo promo form - JS adds .grid-form-popup and portals it to body)
/*------------------------------------------*/
.webinar-page .white-bg .btn-wrapper { display: flex; }
.webinar-page .section.grid-form-section, body:not(.carrer) #GridPromo:not(.grid-form-popup) { visibility: hidden; }
.section.grid-form-section.grid-form-popup { position: fixed; inset: 0; z-index: 100001; float: none; background: var(--overlay); overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.section.grid-form-section.grid-form-popup.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.4s ease; }
.section.grid-form-section.grid-form-popup .form-container-wide { position: fixed; top: var(--gap-24); right: var(--gap-24); left: auto; bottom: var(--gap-24); width: var(--gap-512); max-width: calc(100% - var(--gap-48)); height: auto; margin: 0; background: var(--white); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; transform: translateX(calc(100% + var(--gap-24))); transition: transform 0.4s cubic-bezier(0.25,0.1,0.3,1); }
.section.grid-form-section.grid-form-popup .form-container-wide::-webkit-scrollbar { display: none; }
.section.grid-form-section.grid-form-popup.open .form-container-wide { transform: translateX(0); }
.section.grid-form-section.grid-form-popup .form-container-wide .form-popup-close { position: absolute; top: var(--gap-16); right: var(--gap-16); width: var(--gap-32); height: var(--gap-32); border-radius: 999px; background: var(--white); border: 1px solid var(--stroke); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.section.grid-form-section.grid-form-popup .form-container-wide .form-popup-close svg { width: var(--gap-16); height: var(--gap-16); display: block; }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) { border-color: var(--stroke); }
/* thanks mode - template adds .thanks-mode on #DynamicFormObject, hides the title + .top-form and fades the form out; #form-thanks text spacing is left to the CMS */
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject.thanks-mode #form-thanks { max-width: 100%; width: 100%; margin: 0; padding: 0; display: flex !important; flex-direction: column; gap: var(--gap-32); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject.thanks-mode #form-thanks :is(#headline, #text1) { margin: 0; padding: 0; width: 100%; max-width: 100%; }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject.thanks-mode #form-thanks #headline h3 { margin: 0; }
@media(max-width: 1025px) {
.section.grid-form-section.grid-form-popup .form-container-wide { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; max-height: calc(100% - 76px); padding: var(--gap-32); background: var(--bg); border-radius: 10px 10px 0 0; overflow: visible; display: flex; flex-direction: column; transform: translateY(calc(100% + 76px)); }
.section.grid-form-section.grid-form-popup.open .form-container-wide { transform: translateY(0); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject { overflow-y: auto; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; gap: var(--gap-24); max-width: 100% !important; }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject::-webkit-scrollbar { display: none; }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { display: block; }
.section.grid-form-section.grid-form-popup .form-container-wide .form-popup-close { top: -52px; right: 50%; transform: translate(50%, 0); width: var(--gap-40); height: var(--gap-40); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields { gap: var(--gap-24); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper, .select-wrapper) { height: var(--gap-50); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.textareaField { height: var(--gap-50); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField.checkboxField { margin-top: 0; }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { margin-top: var(--gap-24); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit button.form-submit { width: 100%; border-radius: 86px; }
.section.grid-form-section.grid-form-popup .form-container-wide:has(#DynamicFormObject.thanks-mode) { background: var(--white); }
.section.grid-form-section.grid-form-popup .form-container-wide #DynamicFormObject.thanks-mode #form-thanks { gap: var(--gap-24); }
}
/**/
/*------------------------------------------/*
AGENTS POPUP
/*------------------------------------------*/
.agent-popup { position: fixed; inset: 0; z-index: 100001; background: var(--overlay); overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.agent-popup.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.4s ease; }
.agent-popup .agent-popup-card { position: fixed; top: var(--gap-24); right: var(--gap-24); left: auto; bottom: var(--gap-24); width: var(--gap-428); max-width: calc(100% - var(--gap-48)); background: var(--white); border: 1px solid var(--stroke); border-radius: 10px; box-shadow: var(--shadow-2); transform: translateX(calc(100% + var(--gap-24))); transition: transform 0.4s cubic-bezier(0.25,0.1,0.3,1); }
.agent-popup.open .agent-popup-card { transform: translateX(0); }
.agent-popup .agent-popup-close { position: absolute; top: 0; right: 0; width: var(--gap-48); height: var(--gap-48); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.agent-popup .agent-popup-close svg { width: var(--gap-14); height: var(--gap-14); display: block; }
.agent-popup .agent-popup-inner { height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: var(--gap-48); display: flex; flex-direction: column; gap: var(--gap-40); }
.agent-popup .agent-popup-inner::-webkit-scrollbar { display: none; }
.agent-popup .agent-popup-head { display: flex; flex-direction: column; gap: var(--gap-24); }
.agent-popup .agent-popup-img { height: var(--gap-332); flex-shrink: 0; border-radius: 10px; overflow: hidden; position: relative; }
.agent-popup .agent-popup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-popup .agent-popup-img .agent-popup-video { position: absolute; inset: 0; pointer-events: none; }
.agent-popup .agent-popup-img .agent-popup-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.agent-popup .agent-popup-text { display: flex; flex-direction: column; gap: var(--gap-8); text-align: right; }
.agent-popup .agent-popup-name, .agent-popup .agent-popup-role { margin: 0; }
.agent-popup .agent-popup-role { color: var(--grey); }
.agent-popup .agent-popup-body { text-align: right; opacity: 0.8; }
.agent-popup .agent-popup-body p { color: var(--grey); margin: 0; }
@media(max-width: 1025px) {
.agent-popup .agent-popup-card { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; max-height: calc(100% - 132px); border-radius: 10px 10px 0 0; display: flex; flex-direction: column; transform: translateY(calc(100% + 76px)); }
.agent-popup.open .agent-popup-card { transform: translateY(0); }
.agent-popup .agent-popup-close { top: -52px; right: 50%; transform: translate(50%, 0); width: 40px; height: 40px; border-radius: 999px; background: var(--white); border: 1px solid var(--stroke); box-shadow: var(--shadow-2); }
.agent-popup .agent-popup-close svg { width: 12px; height: 12px; }
.agent-popup .agent-popup-inner { height: auto; min-height: 0; padding: 0; gap: 0; }
.agent-popup .agent-popup-head { gap: 0; }
.agent-popup .agent-popup-img { height: 359px; margin: 8px 8px 0; border-radius: 5px; }
.agent-popup .agent-popup-text { padding: 32px 32px 0; gap: 6px; }
.agent-popup .agent-popup-body { padding: 32px; }
}
/**/
@media(max-width: 1025px) {
.webinar-page .red-bg { padding-block: calc(var(--headerHeight) + var(--gap-16)) var(--gap-40); padding-inline: var(--gap-20); gap: 16px; min-height: auto; justify-content: flex-start; }
.webinar-page .red-bg .headline { font-size: 24px; }
.webinar-page .red-bg .speakers { gap: var(--gap-32); flex-direction: row; flex-wrap: nowrap; }
.webinar-page .red-bg .speakers .speaker { flex-direction: column; align-items: center; gap: var(--gap-16); }
.webinar-page .red-bg .speakers .speaker .img-wrapper { width: var(--gap-56); height: var(--gap-56); }
.webinar-page .red-bg .speakers .speaker .speaker-info { align-items: center; text-align: center; }
.webinar-page .red-bg .date-time { flex-direction: row-reverse; direction: ltr; }
.webinar-page .red-bg .date-time .dayNtime::before { content: none; }
.webinar-page .red-bg .date-time .dayNtime::after { content: ""; width: 2px; height: var(--gap-20); background: var(--white); border-radius: 1px; flex-shrink: 0; }
.webinar-page .white-bg { max-width: 100%; padding-block: var(--gap-64); padding-inline: var(--gap-20); gap: var(--gap-24); }
.webinar-page .white-bg .speakers { flex-direction: column; }
.webinar-page .white-bg .speakers .speaker { flex: none; flex-direction: row; justify-content: flex-start; }
.webinar-page .white-bg .speakers .speaker .speaker-info .speakerJob h4 { margin: 0; }
.webinar-page .white-bg .step { flex-direction: row; min-height: auto; }
.webinar-page .white-bg .step:not(:last-of-type) { margin-bottom: 0; }
.webinar-page .white-bg .step .step-ind { width: var(--gap-66); margin: var(--gap-4); margin-inline-end: 0; }
.webinar-page .white-bg .step .step-info { padding: var(--gap-16); }
.webinar-page .white-bg .steps-wrapper { gap: var(--gap-8); }
.webinar-page .white-bg .close-text p a { border-bottom: none; text-decoration: underline; }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--gap-24); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip .share-icons { display: flex; flex-direction: row; align-items: center; gap: var(--gap-16); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip .share-icon { width: var(--gap-20); height: var(--gap-20); display: flex; align-items: center; justify-content: center; color: var(--grey); }
.webinar-page .white-bg .share-strip .share-icon i { font-size: clamp(12px,var(--fs-16),300px); }
:is(.webinar-page .white-bg, body.ai-guide) .share-strip .share-label { color: var(--grey); }
.webinar-page .webinar-sticky-ticket { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white); border-top: 1px solid var(--stroke); box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.08), 2px 2px 4px 0px rgba(0,0,0,0.08); padding: var(--gap-14) var(--gap-16); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--gap-8); }
.webinar-page .webinar-sticky-ticket :is(div, #LobbyModule) a.open-form-btn { min-width: 0; height: var(--gap-38); font-size: 15px; margin-inline: 0 !important; padding-inline: var(--gap-14); display: inline-block; align-content: center; background: var(--red); color: var(--white); border-radius: 50px; }
.webinar-page .webinar-sticky-ticket .btn-wrapper a.open-form-btn::before, .webinar-page .webinar-sticky-ticket .btn-wrapper a.open-form-btn::after { content: none; display: none; }
.webinar-page .webinar-sticky-ticket .date-time { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-8); direction: ltr; }
.webinar-page .webinar-sticky-ticket .date-time .date { color: var(--red); font-family: var(--font-3); }
.webinar-page .webinar-sticky-ticket .date-time .dayNtime { display: flex; align-items: center; gap: var(--gap-8); color: var(--black); }
.webinar-page .webinar-sticky-ticket .date-time .dayNtime::after { content: ""; width: 2px; height: var(--gap-16); background: var(--red); border-radius: 1px; flex-shrink: 0; }
/* white strip above the red hero: the blog #GridPage header offset doubles the hero's own header padding */
body.our-blog:has(.webinar-page) #GridPage { padding-top: 0; }
/* on-demand hero (Figma 1660:17292): back -> 40 -> title -> 16 -> date -> 40 -> video */
.webinar-page.with-video .red-bg a.webinar-back { margin-bottom: 24px; }
.webinar-page.with-video .red-bg .vid-wrapper { margin-top: 24px; }
/* on-demand ticket (no date): title + image next to the button */
.webinar-page .webinar-sticky-ticket.no-date .ticket-content { flex: 1; min-width: 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; }
.webinar-page .webinar-sticky-ticket.no-date .ticket-content .ticket-title { min-width: 0; text-align: start; color: var(--black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.webinar-page .webinar-sticky-ticket.no-date .ticket-content .ticket-img { flex-shrink: 0; }
.webinar-page .webinar-sticky-ticket.no-date .ticket-content .ticket-img img { width: 56px; height: 40px; object-fit: cover; border-radius: 5px; display: block; }
}
/**/
@media(max-width: 1025px) {
:is(div,#LobbyModule) #lobbyview { width: 100%; margin-inline: 0; padding-inline: 20px; padding-block: var(--gap-64) var(--gap-64); margin-bottom: 40px; }
/* plain lobby with a subtitle (Figma 3010:16379): title -> 16 -> subtitle -> 40 -> button */
body:not(.kickstart):not(.ai-guide):not(.implement-ai):not(.contact) :is(div,#LobbyModule) #lobbyview #headline:has(+ h2) { margin-bottom: 16px; }
body:not(.kickstart):not(.ai-guide):not(.implement-ai):not(.contact) :is(div,#LobbyModule) #lobbyview > h2 + .lobbyTextContainer { margin-top: 40px; }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { flex-wrap: wrap; gap: 12px; }
:is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a { margin-top: 0; }
}
/**/
/*------------------------------------------/*
CAREER
/*------------------------------------------*/
body.career :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: var(--gap-48); }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText { max-width: var(--gap-496); }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p { color: var(--grey); }
/* hero buttons = plain pill pair (Figma 1349:18261): outline + fill, no arrow circles */
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { gap: var(--gap-12); padding-top: var(--gap-24); font-size: 0; }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim { margin: 0 !important; min-width: 0; height: var(--gap-52); padding-inline: var(--gap-24); border-radius: 86px; border: 2px solid var(--red); background: transparent; color: var(--black); }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim:first-of-type { background: var(--red); color: var(--white); }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim .btn-text-wrapper span { color: inherit; }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::before, body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim::after { content: none; display: none; }
body.career #allSectionsWrapper .section.grid-image-section { height: auto; }
body.career #allSectionsWrapper .section.grid-image-section .image-section-data { height: var(--gap-700); border-radius: var(--gap-10); overflow: hidden; }
body.career #allSectionsWrapper .section.grid-image-section .image-section-data img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
@media(min-width: 1025px) {
body.career :is(div,#LobbyModule) #lobbyview { margin-bottom: 0; }
}
@media(max-width: 1025px) {
body.career :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: 16px; }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText p:has(a) { gap: 12px; padding-top: 24px; }
body.career :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText a.button-with-anim { height: 48px; padding-inline: 20px; min-width: 150px; }
body.career #allSectionsWrapper .section.grid-image-section { padding-inline: 20px; }
body.career #allSectionsWrapper .section.grid-image-section .image-section-data { height: 245px; border-radius: 5px; }
body.career #allSectionsWrapper .section.grid-image-section[data-id="25708"] { margin-bottom: 40px; }
}
/**/
/*------------------------------------------/*
CAREER INNER PAGE
/*------------------------------------------*/
body.carrer.contentInnerPage #PageBreadCrumps { display: none; }
body.carrer.contentInnerPage #contentModuleNav { display: none; }
body.carrer.contentInnerPage #GridWrapInner { background: var(--bg); }
body.carrer.contentInnerPage #GridContent { width: 100%; padding: 0; }
body.carrer.contentInnerPage #ContentRegularModule, body.carrer.contentInnerPage #pageview, body.carrer.contentInnerPage .MainContent { width: 100%; padding: 0; margin: 0; }
body.carrer.contentInnerPage .MainContent { display: flex; flex-direction: column; }
/* HERO */
body.carrer.contentInnerPage #headline { position: relative; background: var(--red); margin: 0; padding-block: var(--gap-148); min-height: var(--gap-600); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--gap-32); }
body.carrer.contentInnerPage #headline h1 { max-width: var(--gap-974); margin: 0; padding-top: var(--gap-64); text-align: center; color: var(--white); }
body.carrer.contentInnerPage #headline a.career-back-link { position: absolute; top: calc(var(--headerHeight) + var(--gap-24)); inset-inline-start: var(--gap-48); color: var(--white); border-bottom: 1px solid var(--white); padding-bottom: var(--gap-2); display: inline-flex; align-items: center; gap: var(--gap-6); }
body.carrer.contentInnerPage #headline a.career-back-link .back-arrow { display: none; }
body.carrer.contentInnerPage #headline a.career-hero-cta { margin: var(--gap-16) 0 0; background: var(--white); color: var(--black); }
body.carrer.contentInnerPage #headline a.career-hero-cta.button-with-anim::before { background-color: var(--white); background-image: url(https://media.getmood.io/warehouse/dynamic/731523.svg); background-position: center; background-repeat: no-repeat; }
body.carrer.contentInnerPage #headline a.career-hero-cta.button-with-anim::after { background-color: var(--white); background-image: url(/warehouse/dynamic/623930.svg); }
body.carrer.contentInnerPage #text1 { max-width: var(--gap-974); width: 100%; margin-inline: auto; box-sizing: border-box; padding-block: var(--gap-120) var(--gap-40); padding-inline: 0; text-align: right; }
body.carrer.contentInnerPage #text1 > * { margin-block: 0; }
body.carrer.contentInnerPage #text1 :is(h3,h4,h5) { color: var(--black); margin-block: var(--gap-32) var(--gap-16); }
body.carrer.contentInnerPage #text1 > :is(h3,h4,h5):first-child { margin-top: 0; }
body.carrer.contentInnerPage #text1 :is(p,li) { color: var(--grey); }
body.carrer.contentInnerPage #text1 p { margin-bottom: var(--gap-16); }
body.carrer.contentInnerPage #text1 > p:last-child { color: var(--black); margin-block: var(--gap-32) 0; }
body.carrer.contentInnerPage #text1 ul { list-style: none; padding: 0; margin: 0 0 var(--gap-16); display: flex; flex-direction: column; gap: var(--gap-8); }
body.carrer.contentInnerPage #text1 ul li { display: flex; align-items: flex-start; gap: var(--gap-16); }
body.carrer.contentInnerPage #text1 ul li::before { content: ""; min-width: var(--gap-6); width: var(--gap-6); height: var(--gap-6); margin: var(--gap-10) 0 0; background: var(--red); border-radius: 50%; flex-shrink: 0; }
body.carrer.contentInnerPage #text1 ol { list-style: decimal; padding-inline-start: var(--gap-20); margin: 0 0 var(--gap-16); display: flex; flex-direction: column; gap: var(--gap-8); }
body.carrer.contentInnerPage #text1 ol li { display: list-item; list-style: decimal; }
body.carrer.contentInnerPage #text1 ol li::before { content: none; }
body.carrer.contentInnerPage #text1 ol li::marker { color: var(--grey); }
body.carrer.contentInnerPage #GridPromo { float: none; clear: both; width: 100%; max-width: var(--gap-974); margin-inline: auto; padding-block: var(--gap-48) var(--gap-140); box-sizing: border-box; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormEndText { display: none; }
/* BODY — .career-body wraps #text1 (JS) so the share rail + ticket stop at the end of the job text (Figma 1483:6795) */
body.carrer.contentInnerPage .career-body { position: relative; width: 100%; }
body.carrer.contentInnerPage .career-sticky-ticket { position: sticky; bottom: var(--gap-32); width: fit-content; margin-inline: auto; z-index: 60; display: flex; flex-direction: row; align-items: stretch; gap: 1px; height: var(--gap-88); }
body.carrer.contentInnerPage .career-sticky-ticket .ticket-title { text-align: center; align-content: center; padding-inline: var(--gap-32); padding-block: 0; background: var(--white); border: 1px solid var(--grey-stroke); border-radius: 5px; box-shadow: var(--shadow); color: var(--black); }
body.carrer.contentInnerPage .career-sticky-ticket a.ticket-cta { align-self: center; }
body.carrer.contentInnerPage .career-sticky-ticket .btn-wrapper { background: white; display: flex; min-width: var(--gap-260); justify-content: center; border-radius: 5px; border: 1px solid var(--grey-stroke); }
body.carrer.contentInnerPage .career-share-rail { position: absolute; top: var(--gap-120); bottom: 0; left: var(--gap-260); z-index: 5; }
body.carrer.contentInnerPage .career-share { position: sticky; top: calc(var(--headerHeight) + var(--gap-40)); display: flex; flex-direction: column-reverse; align-items: center; gap: var(--gap-24); }
body.carrer.contentInnerPage .career-share .share-icons { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); }
body.carrer.contentInnerPage .career-share .share-label { color: var(--grey-mid); }
body.carrer.contentInnerPage .career-share a.share-icon { display: flex; align-items: center; justify-content: center; width: var(--gap-20); height: var(--gap-20); color: var(--black); transition: 0.3s ease color; }
body.carrer.contentInnerPage .career-share a.share-icon svg { width: 100%; height: 100%; display: block; }
body.carrer.contentInnerPage .career-share a.share-icon.copied { color: var(--red); }
@media(min-width: 1025px) {
body.carrer.contentInnerPage .career-share a.share-icon:hover { color: var(--red); }
}
@media(max-width: 1025px) {
body.carrer.contentInnerPage #GridPromo #DynamicFormObject { flex-direction: column; gap: 32px; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .form-text-col { width: 100%; gap: 12px; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField .textarea-wrapper textarea::placeholder { line-height: 1.4; }
/* APPLY FORM CARD */
body.carrer.contentInnerPage #GridPromo { width: 100%; max-width: 100%; padding-block: var(--gap-16) var(--gap-64); padding-inline: var(--gap-20); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject { padding: var(--gap-32); border-radius: 5px; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField .input-wrapper { height: var(--gap-50); }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) { border-radius: 5px; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField :is(.input-wrapper, .textarea-wrapper) :is(input, textarea) { border-radius: 5px; }
/* the shared mobile FORM pins .textareaField / .textarea-wrapper to 52 / 100% — the career textareas are tall (min 160), so let them size */
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField.textareaField, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField .textarea-wrapper, body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectField .textarea-wrapper textarea { height: auto; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectSubmit { margin-top: 0; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .career-form-actions { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 16px; }
body.carrer.contentInnerPage #GridPromo #DynamicFormObject .dynamicFormObjectSubmit button.form-submit { height: var(--gap-48); padding-inline: var(--gap-20); }
/* HERO */
body.carrer.contentInnerPage #headline { flex-direction: column; align-items: center; gap: 0; padding: calc(var(--headerHeight) + 16px) 20px 40px; min-height: 0; }
body.carrer.contentInnerPage #headline a.career-back-link { order: 1; align-self: flex-end; position: static; top: unset; inset-inline-start: unset; margin-bottom: var(--gap-40); border-bottom: none; padding-bottom: 0; gap: var(--gap-8); }
body.carrer.contentInnerPage #headline a.career-back-link .back-arrow { display: inline-block; width: 7px; height: 10px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7 1L2 6L7 11' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.carrer.contentInnerPage #headline h1 { order: 2; margin-bottom: var(--gap-16); max-width: 100%; padding-top: 0; }
body.carrer.contentInnerPage #headline a.career-hero-cta { order: 3; height: var(--gap-48); padding-inline: var(--gap-20); margin-top: 0; }
/* TEXT1 */
body.carrer.contentInnerPage #text1 { max-width: 100%; padding-block: 48px 16px; padding-inline: 20px; }
body.carrer.contentInnerPage #text1 :is(h3,h4,h5) { margin-block: var(--gap-24) var(--gap-12); }
body.carrer.contentInnerPage #text1 ul li::before { min-width: var(--gap-4); width: var(--gap-4); height: var(--gap-4); }
body.carrer.contentInnerPage #text1 :is(ul, ol) { gap: 4px; }
/* STICKY APPLY TICKET */
body.carrer.contentInnerPage .career-sticky-ticket { position: sticky; bottom: 0; margin-inline: 0; width: 100%; height: auto; flex-direction: row; align-items: center; gap: var(--gap-20); padding: 14px 16px; background: var(--white); border-top: 1px solid var(--stroke); box-shadow: var(--shadow); z-index: 60; }
body.carrer.contentInnerPage .career-sticky-ticket .ticket-title { flex: 1; text-align: start; background: none; border: none; box-shadow: none; padding: 0; }
body.carrer.contentInnerPage .career-sticky-ticket .btn-wrapper { min-width: unset; border: none; background: none; }
body.carrer.contentInnerPage .career-sticky-ticket .btn-wrapper a.ticket-cta:before { display: none; }
body.carrer.contentInnerPage :is(.career-sticky-ticket, #LobbyModule) .button-with-anim { margin: 0 !important; height: 38px; padding-inline: 14px; }
/* SHARE ROW (Figma 1751:15876) — in-flow above the text, 48 above + below */
body.carrer.contentInnerPage .career-share-rail { position: static; padding: 48px 20px 0; }
body.carrer.contentInnerPage .career-share { position: static; flex-direction: row-reverse; justify-content: flex-end; gap: 24px; }
body.carrer.contentInnerPage .career-share .share-icons { flex-direction: row; gap: 16px; }
body.carrer.contentInnerPage .career-share a.share-icon { color: var(--grey); }
}
/**/
/*------------------------------------------/*
PORTFOLIO PAGE
/*------------------------------------------*/
body.portfolio .blogmain-header #headline { margin: 0; }
body.portfolio .blog-tags { padding-bottom: var(--gap-120); }
body.portfolio #BlogModule .blog-posts .blog-post { aspect-ratio: 453 / 443; }
body.portfolio #BlogModule .blog-posts .blog-post:is(:nth-child(12n+4), :nth-child(12n+10)) { aspect-ratio: auto; }
body.portfolio #BlogModule .blog-posts .blog-post .blog-post-image { position: absolute; inset: 0; }
body.portfolio #BlogModule .blog-posts .blog-post .blog-post-image a { height: 100%; }
body.portfolio #BlogModule .blog-posts .blog-post .blog-post-image a img { height: 100%; aspect-ratio: auto; }
@media(max-width: 1025px) {
body.portfolio .blog-tags { display: block; padding-block: 0 64px; }
body.portfolio .blog-tags nav.blog-tags-list { overflow-x: auto; scrollbar-width: none; }
body.portfolio .blog-tags nav.blog-tags-list::-webkit-scrollbar { display: none; }
body.portfolio .blog-tags nav.blog-tags-list ul { width: max-content; justify-content: flex-start; padding-inline: 20px; }
body.portfolio .blog-tags nav.blog-tags-list ul li.blog-tag { flex-shrink: 0; white-space: nowrap; }
body.portfolio .blogmain-header { padding-bottom: 24px; }
body.portfolio .blogmain-header #headline { margin-bottom: 16px; }
body.portfolio #BlogModule .blog-posts { grid-template-columns: repeat(1,1fr); grid-auto-flow: unset; grid-auto-rows: unset; padding-inline: 20px; gap: 20px; display: flex; flex-direction: column; padding-bottom: 0; }
body.portfolio #BlogModule .blog-posts .blog-post, body.portfolio #BlogModule .blog-posts .blog-post:is(:nth-child(12n+4), :nth-child(12n+10)) { aspect-ratio: 335 / 327; border-radius: 5px; }
}
/*--------------------/*
METHOD PAGE
/*--------------------*/
/* wheel journey: hero slot (27999) -> fixed at viewport centre -> through the quote lines (28000, verostudio large-quote) -> seat in .dynamicGrid.method; positions are set inline by JS (initMethodWheel) */
@media(min-width: 1025px) {
body.method-page :is(div,#LobbyModule) #lobbyview { padding-top: calc(var(--gap-180) - var(--headerHeight)); padding-bottom: var(--gap-96); }
body.method-page :is(div,#LobbyModule) #lobbyview .lobbyTextContainer #lobbyText > p { color: var(--grey); max-width: var(--gap-750); margin-inline: auto; text-align: center; }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] { height: auto; padding-inline: var(--gap-260); display: flex; justify-content: center; }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] .image-section-data { width: var(--gap-590); height: var(--gap-590); }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] .image-section-data img { display: none; }
body.method-page #allSectionsWrapper .section.grid-text-section[data-id="28000"] { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow-x: clip; }
body.method-page #allSectionsWrapper .section.grid-text-section[data-id="28000"] .method-line { display: block; white-space: nowrap; }
body.method-page #allSectionsWrapper .section.grid-text-section[data-id="28000"] .method-line > span { display: inline-block; will-change: transform; }
body.method-page .method-wheel { position: absolute; left: 0; top: 0; z-index: 10; width: var(--gap-590); height: var(--gap-590); pointer-events: none; will-change: transform; }
body.method-page .method-wheel.is-fixed { position: fixed; }
body.method-page .method-wheel .method-lottie { width: 100%; height: 100%; transform-origin: center; will-change: transform; }
body.method-page .method-wheel .method-lottie svg { display: block; width: 100% !important; height: 100% !important; }
}
@media(max-width: 1025px) {
/* mobile (Figma 2841-35393): same journey without the line split; the quote scrolls over the dimmed wheel (multiply keeps the text black); the seat is the top of the screen = wheel centre on the header bottom edge, lower half visible; the sticky .method-wheel-seat panel (--method-header = measured header, set by JS, + half wheel + 64) hides the station text sliding under the wheel; stations stay free-scrolling; the svg carries the dial counter-rotation (JS) so the active wedge points down */
body.method-page :is(div,#LobbyModule) #lobbyview #headline { margin-bottom: 16px; }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] { height: auto; padding-inline: 20px; display: flex; justify-content: center; }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] .image-section-data { width: 335px; max-width: 100%; height: auto; aspect-ratio: 1; }
body.method-page #allSectionsWrapper .section.grid-image-section[data-id="27999"] .image-section-data img { display: none; }
body.method-page #allSectionsWrapper .section.grid-text-section[data-id="28000"] { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 20px; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method { display: flex; flex-direction: column; padding: 0; background: var(--bg); }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .method-wheel-seat { order: -1; position: sticky; top: 0; z-index: 5; width: 100%; height: calc(var(--method-header, 78px) + 167.5px + 64px); margin-bottom: calc(-1 * calc(var(--method-header, 78px) + 167.5px + 64px)); background: var(--bg); pointer-events: none; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-wrapper { width: 100%; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-items { display: flex; flex-direction: column; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: calc(var(--method-header, 78px) + 167.5px + 64px) 20px 0; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field { width: 100%; }
body.method-page #allSectionsWrapper .section.dynamicGrid.method .dynamic-grid-item .dynamic-grid-field p { margin: 0; }
body.method-page .method-wheel { position: absolute; left: 0; top: 0; z-index: 10; width: min(335px, calc(100vw - 40px)); aspect-ratio: 1; pointer-events: none; will-change: transform, opacity; }
body.method-page .method-wheel.is-fixed { position: fixed; }
body.method-page .method-wheel.is-dim { mix-blend-mode: multiply; }
body.method-page .method-wheel .method-lottie { width: 100%; height: 100%; transform-origin: center; will-change: transform; }
body.method-page .method-wheel .method-lottie svg { display: block; width: 100% !important; height: 100% !important; transform-origin: center; will-change: transform; }
}
/*------------------------------------------/*
ANIMATIONS
/*------------------------------------------*/
@keyframes scrollText {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}