.wp-block-brandspeak-hero-section { width:100vw; min-height:100vh; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; overflow:hidden; background-color:#423385; display:flex; align-items:center; justify-content:center; } .hero-expand-group { position:relative; --fx-video-peek:100px; min-height:100vh; padding-bottom:var(--fx-video-peek); background-color:#faf9f6; transform:translate3d(0, 0, 0); will-change:transform; } .hero-expand-group .wp-block-brandspeak-hero-section { padding-bottom:var(--fx-video-peek); } .hero-expand-group--teaser .hero-expand-group__video { pointer-events:none; } .hero-expand-group--active { position:relative; z-index:50; background-color:#000; transition:background-color 0.3s ease; backface-visibility:hidden; -webkit-backface-visibility:hidden; }  .editor-styles-wrapper .wp-block-brandspeak-hero-section, .block-editor-block-list__block .wp-block-brandspeak-hero-section { width:100%; min-height:auto; left:auto; right:auto; margin-left:0; margin-right:0; } .hero-section-editor-wrapper { width:100%; max-width:100%; display:block; margin:0 auto; } .hero-section-background { position:absolute; top:0; left:0; background-color:#423385; width:100%; height:100%; z-index:1; } .hero-section-background-image { position:absolute; top:-12px; left:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; mix-blend-mode:multiply; opacity:0.9; transform-origin:center; min-width:110%; min-height:110%; } .hero-section-content-wrapper { position:relative; z-index:2; width:100%; max-width:1400px; margin:0 auto; padding:4rem 1.5rem; color:#fff; filter:blur(0px); transition:filter 0.3s ease; will-change:filter; } .hero-section-image-wrapper { text-align:center; margin-bottom:2rem; } .hero-section-content-image { max-width:200px; height:auto; display:inline-block; } .hero-section-heading { display:flex !important; font-size:clamp(2.5rem, 4.7vw, 5rem); font-weight:500; line-height:1.1; margin:0 0 1.5rem; text-align:center; color:#fff; overflow:hidden; justify-content:center; } .hero-section-heading .reveal-up__inner { display:inline-block; } .hero-section-content { font-size:clamp(1.125rem, 2vw, 1.275rem); line-height:1.6; margin:0 0 2.5rem; text-align:center; color:#fff; max-width:900px; margin-left:auto; margin-right:auto; } .hero-section-content p { margin:0 0 1rem; } .hero-section-content p:last-child { margin-bottom:0; } .hero-section-content strong { font-weight:normal; } .hero-section-pages { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:0 0 2.5rem; list-style:none; padding:0; } .hero-section-page-link { display:inline-block; padding:0.5rem 0.5rem; border:2px solid rgba(255, 255, 255, 0.9); border-radius:4px; color:#fff; text-decoration:none; font-weight:400; font-size:0.8rem; transition:all 0.3s ease; background:rgba(255, 255, 255, 0.1); backdrop-filter:blur(10px); position:relative; } .hero-section-page-link:hover, .hero-section-page-link:focus { background:#9185ff; border-color:#9185ff; color:#fff; transform:translateY(-2px); } .hero-section-button-wrapper { text-align:center; margin-top:2.5rem; } .hero-section-bubble-button.btn-group { display:inline-flex; gap:0; font-size:clamp(0.9rem, 2vw, 1.1rem); } .hero-section-bubble-button .btn-bubble-arrow { font-size:clamp(0.9rem, 2vw, 1.05rem); } .hero-section-bubble-button .btn-bubble-arrow__content { backdrop-filter:blur(16px); } .hero-section-bubble-button .btn-bubble-arrow:hover .btn-bubble-arrow__arrow:not(.is--duplicate) { background-color:#9084fe; color:#ffffff; }  @media (max-width:768px) { .wp-block-brandspeak-hero-section {  min-height:80vh; }  .hero-section-content-wrapper {  padding:3rem 1.5rem; }  .hero-section-pages {  gap:0.75rem; }  .hero-section-page-link {  padding:0.625rem 1.5rem;  font-size:0.9375rem; } } @media (max-width:480px) { .hero-section-content-wrapper {  padding:2rem 1rem; }  .hero-section-page-link {  padding:0.5rem 1.25rem;  font-size:0.875rem; } }  .hero-section-rating { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-bottom:1.5rem; } .hero-section-stars { display:flex; gap:0.25rem; color:#FFE999; font-size:1.5rem; } .hero-section-rating-text { color:#fff; font-size:1.25rem; font-weight:600; }  .fx-expandVideo { position:relative; padding:0; z-index:1; } .fx-expandVideo.fx-expandVideo--active { z-index:30; } .hero-expand-group__video { position:relative; z-index:5; display:flex; justify-content:center; will-change:transform; transform:translateY(calc(var(--fx-video-peek, 100px) * -1)); transition:transform 0.35s ease; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .hero-expand-group--active .hero-expand-group__video { transform:none; } .fx-expandVideo__pin { position:fixed; top:0; left:0; width:100%; height:100vh; pointer-events:none; z-index:1; transform:translate3d(0, 0, 0); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .fx-expandVideo__frame { --fx-br:16px; --fx-shadow:0.18; width:clamp(320px, 60vw, 960px); aspect-ratio:16 / 9; margin:0 auto; border-radius:var(--fx-br); box-shadow:0 20px 60px rgba(0, 0, 0, var(--fx-shadow)); overflow:hidden; transform:translate3d(0, 0, 0); will-change:transform, border-radius, box-shadow; background:#000; position:relative; pointer-events:auto; } .fx-expandVideo__el { width:100%; height:100%; object-fit:cover; display:block; } .fx-expandVideo__a11yPlay { position:absolute; top:1rem; right:1rem; z-index:3; padding:0.5rem 1rem; border-radius:999px; background:rgba(53, 199, 201, 0.9); color:#fff; border:none; font-weight:600; cursor:pointer; transition:opacity 0.3s ease; } .fx-expandVideo__a11yPlay.is-visible { clip:auto; width:auto; height:auto; margin:0; overflow:visible; } .fx-expandVideo__frame::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.1); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 100%); pointer-events:none; z-index:1; } .fx-expandVideo.fx-expandVideo--hidden { opacity:0; pointer-events:none; transition:opacity 0.35s ease; } .fx-expandVideo.fx-expandVideo--hidden .fx-expandVideo__frame { opacity:0; } .fx-expandVideo--reducedMotion .fx-expandVideo__frame { transition:border-radius 0.3s ease, box-shadow 0.3s ease; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }  @media (max-width:768px) { .fx-expandVideo__frame {  width:clamp(280px, 90vw, 600px) !important; } } @media (prefers-reduced-motion:reduce) { .fx-expandVideo, .fx-expandVideo__frame {  transition:none !important; }  .fx-expandVideo--reducedMotion .fx-expandVideo__frame {  transform:none !important;  border-radius:0;  box-shadow:none; } } .hero-section-intro { position:absolute; left:50%; bottom:clamp(1.25rem, 3vw, 3rem); width:min(72%, 90vw); max-width:960px; color:#fff; z-index:2; opacity:0; transform:translate(-50%, 40px); transition:opacity 0.6s ease, transform 0.6s ease; display:flex; flex-direction:column; gap:0.75rem; pointer-events:none; padding:clamp(1rem, 3vw, 1.5rem); align-items:flex-start; text-align:left; } .hero-section-intro.is-visible { opacity:1; transform:translate(-50%, 0); pointer-events:auto; } .fx-expandVideo__frame .hero-section-intro { transform-origin:center center; transform:translate(-50%, 40px); } .fx-expandVideo__frame .hero-section-intro.is-visible { transform:translate(-50%, 0); } .hero-section-intro--overlay { left:-0.5rem; width:85%; max-width:1400px; bottom:30px; transform-origin:left bottom; padding-left:0; padding-right:0; transform:translateX(-10%); } .hero-section-intro__heading { margin:0; font-size:clamp(2.6rem, 3.9vw, 3.64rem); font-weight:600; } .hero-section-intro__content { margin:0; font-size:clamp(1.3rem, 2.6vw, 1.625rem); line-height:1.6; color:rgba(255, 255, 255, 0.9); }  .hero-section-intro--overlay .hero-section-intro__heading { font-size:3.25rem; } .hero-section-intro--overlay .hero-section-intro__content { font-size:1.625rem; } .hero-section-intro__cta { margin-top:0.5rem; } .hero-section-intro__cta .btn-bubble-arrow { min-width:0; max-width:none; width:auto; align-self:flex-start; }  .hero-section-intro--overlay .hero-section-intro__cta.btn-group { font-size:1rem; transform-origin:left center; } .hero-section-intro--overlay .btn-bubble-arrow { font-size:1rem; } .hero-section-intro--overlay .btn-bubble-arrow__arrow { width:3.75em; height:3.75em; } .hero-section-intro--overlay .btn-bubble-arrow__content { height:3.75em; padding-left:2em; padding-right:2em; }  @media (min-width:769px) { .fx-expandVideo__frame .hero-section-intro--overlay {  transform:translateX(-10%) scale(0.6);  bottom:-30px; }  .fx-expandVideo__frame .hero-section-intro--overlay.is-visible {  transform:translateX(-10%) scale(0.6);  bottom:-30px; } }  @media (max-width:768px) { .fx-expandVideo__frame .hero-section-intro--overlay {  transform:translateX(-10%) scale(0.77);  bottom:-30px; }  .fx-expandVideo__frame .hero-section-intro--overlay.is-visible {  transform:translateX(-10%) scale(0.77);  bottom:-30px; }  .hero-section-intro--overlay {  width:90%;  bottom:-30px; } } @media (max-width:900px) { .hero-section-intro {  display:none; } }