/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

:root {
    --wp--preset--font-size--xxx-large: clamp(40px, 5vw, 60px);
}

* {
    box-sizing: border-box;
 }
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

:where(.wp-site-blocks *:focus) {
    outline: none; /* Remove default focus */
}

:where(.wp-site-blocks *:focus-visible) {
    outline: 2px solid #000; /* Or use your preferred color/style */
}


/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

:is(h1, h2, h3, h4, h5, h6) strong {
	font-weight: 500;
}


:root p, p, .is-layout-constrained > p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}



:root h1,
:root .wp-block-heading h1,
.is-layout-constrained > h1 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
}

:root h2,
:root .wp-block-heading h2,
.is-layout-constrained > h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    margin-left: 0;
    margin-right: 0;
}

:root h3,
:root .wp-block-heading h3,
.is-layout-constrained > h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    margin-left: 0;
    margin-right: 0;
}

:root h4,
:root .wp-block-heading h4,
.is-layout-constrained > h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0;
    margin-right: 0;
}

:root h5,
:root .wp-block-heading h5,
.is-layout-constrained > h5 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0;
    margin-right: 0;
}

:root h6,
:root .wp-block-heading h6,
.is-layout-constrained > h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0;
    margin-right: 0;
	text-transform: uppercase;
    letter-spacing: 0.05em;
}

/*
 * Headings inside an article run one step down the preset scale. The global
 * sizes are display sizes, tuned for landing pages, and overpower the 800px
 * article column — h2 at 60px sits next to 18px body copy.
 *
 * Scoped to single posts on purpose: pages render through the same
 * post-content block, but are built from display blocks that do want the
 * larger sizes. A size picked explicitly on a heading in the editor still
 * wins, since core emits those has-*-font-size classes with !important.
 */
.single-post .wp-block-post-content h2 {
    font-size: var(--wp--preset--font-size--xx-large);
}

.single-post .wp-block-post-content h3 {
    font-size: var(--wp--preset--font-size--x-large);
}

.single-post .wp-block-post-content h4 {
    font-size: var(--wp--preset--font-size--large);
}

/* First heading in any container shouldn't have top margin */
div > :is(h1, h2, h3, h4, h5, h6):first-child,
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child,
.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Supertitle heading followed by a main heading — tighten the gap */
:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0.5rem;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.has-times-now-font-family {                                                                                                                                                                                                    
  letter-spacing: -0.0275em;                                                                                                                                                                                                  
}   
.has-xxxx-large-font-size .has-times-now-font-family {                                                                                                                                                                                                    
  letter-spacing: -0.0325em;                                                                                                                                                                                                  
}    

.has-medium-font-size {
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
}
.has-large-font-size {
  line-height: 1.1;
  letter-spacing: 0;
}


.has-medium-font-weight {
  font-weight: 500;
}

h1.wp-block-heading.has-xxxx-large-font-size {
    font-size: clamp(110px, 20vw, 340px) !important;
    line-height: 80%;
    margin-top: calc(120px + 4rem) !important;
    margin-bottom: 4rem !important;
    max-width: unset;
  }

/* Alignment */
.alignfull:not(.entry-content) > * {
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
        box-sizing: content-box;
}

.alignfull:not(.entry-content) > .alignwide {
}

.alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

.alignwidest {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}

:root :where(.is-layout-constrained) > * {
    margin-block-start: 1rem;
    margin-block-end: 3rem;
}


/* Page Template Dark */
.page-template-pages-dark {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
}

.work-template-default {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
}


/* .page-template-pages-dark .entry-content:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 300px;
    left: 0;
    top: 0;
    background: linear-gradient(rgb(3 83 83), rgb(3 83 83 / 0%));
    z-index: -1;
} */



/* Rounded border  */
.has-rounded-border {
  border-radius: 10px;
  overflow: hidden;
}

.has-large-rounded-border {
  border-radius: 40px;
  overflow: hidden;
}

/* Has Brackets */

.has-brackets {
    display: inline-flex;
}

.has-brackets:before {
  content: "〔";
  margin-left: -0.5em;
  white-space: nowrap;
}

.has-brackets:after {
  content: "〕";
  margin-right: -0.5em;
  white-space: nowrap;
}
/* Progressive blur  */
.progressive-blur {
    pointer-events: none;
    position: fixed;
    left: 0;
    width: 100vw;
    max-width: unset;
    height: 200px;
    z-index: 50;
        margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.progressive-blur--top { top: 0; margin: 0;}
.progressive-blur--bottom { bottom: 0; margin: 0; }

.progressive-blur::before,
.progressive-blur::after,
.progressive-blur > span:nth-child(1),
.progressive-blur > span:nth-child(2),
.progressive-blur > span:nth-child(3) {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Top: each layer covers a slice, blur increases toward edge */
.progressive-blur--top::before {
    top: 0; height: 20%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    mask-image: linear-gradient(to bottom, #f9f8e8, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #f9f8e8, transparent);
}
.progressive-blur--top::after {
    top: 0; height: 40%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to bottom, #f9f8e8 20%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #f9f8e8 20%, transparent);
}

.progressive-blur--bottom::before {
    bottom: 0; height: 20%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    mask-image: linear-gradient(to top, #f9f8e8, transparent);
    -webkit-mask-image: linear-gradient(to top, #f9f8e8, transparent);
}
.progressive-blur--bottom::after {
    bottom: 0; height: 40%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to top, #f9f8e8 20%, transparent);
    -webkit-mask-image: linear-gradient(to top, #f9f8e8 20%, transparent);
}

.progressive-blur--top span:nth-child(1) {
    top: 0; height: 60%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to bottom, #f9f8e8 10%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #f9f8e8 10%, transparent);
}
.progressive-blur--top span:nth-child(2) {
    top: 0; height: 80%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    mask-image: linear-gradient(to bottom, #f9f8e8 5%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #f9f8e8 5%, transparent);
}
.progressive-blur--top span:nth-child(3) {
    top: 0; height: 100%;
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    mask-image: linear-gradient(to bottom, #f9f8e8 2%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #f9f8e8 2%, transparent);
}

.progressive-blur--bottom span:nth-child(1) {
    bottom: 0; height: 60%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to top, #f9f8e8 10%, transparent);
    -webkit-mask-image: linear-gradient(to top, #f9f8e8 10%, transparent);
}
.progressive-blur--bottom span:nth-child(2) {
    bottom: 0; height: 80%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    mask-image: linear-gradient(to top, #f9f8e8 5%, transparent);
    -webkit-mask-image: linear-gradient(to top, #f9f8e8 5%, transparent);
}
.progressive-blur--bottom span:nth-child(3) {
    bottom: 0; height: 100%;
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    mask-image: linear-gradient(to top, #f9f8e8 2%, transparent);
    -webkit-mask-image: linear-gradient(to top, #f9f8e8 2%, transparent);
}



/* Toggle Button  */
.btn-group {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  justify-content: center;
  display: flex;
      margin-bottom: 1rem;
}

.btn-bubble-arrow {
    border-radius: 10em;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
    position: relative;
    background-color: var(--wp--preset--color--accent-5);
    padding: 0.5rem;
    background-image: url(http://localhost:8893/wp-content/uploads/2026/04/background-button.png);
    background-size: 110% 110%;
    background-repeat: no-repeat;
    background-position: -5em 2em;
    transition: 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    font-weight: 500;
}

.page-template-pages-dark .btn-bubble-arrow {
    background-image: url(http://localhost:8893/wp-content/uploads/2026/05/background-button-yellow.png);
}

.btn-bubble-arrow__arrow {
  border-radius: 10em;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 3.75em;
  height: 3.75em;
  display: flex;
  position: relative;
  transition:  0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0) rotate(0.001deg);
  transform-origin: left;
}

.btn-bubble-arrow__arrow.is--duplicate {
  z-index: 2;
  position: absolute;
  right: 0;
  border: 1px solid;
}

.btn-bubble-arrow__arrow-svg {
  width: 40%;
  height: 40%;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(0.001deg);
}
.btn-bubble-arrow__arrow-svg path {
    fill: currentColor;
}

.btn-bubble-arrow__arrow.is--duplicate {
  position: absolute;
  z-index: 2;
  right: 0;
  transform-origin: right;

   transform: scale(1) rotate(0.001deg) translateX(100%);
    right: 0;
    margin-right: calc(100% - 0.5rem);
        backdrop-filter: blur(10px);
}

.btn-bubble-arrow__content {
  justify-content: center;
  align-items: center;
     padding-left: 2rem;
    padding-right: 2rem;
  display: flex;
  position: relative;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
   transform: translateX(0em) rotate(0.001deg);
}

.btn-bubble-arrow__content-text {
  line-height: 1;
  font-weight: 500;
}

/* Hover */
.btn-bubble-arrow:hover {
    background-position: -10px 0;
}

.btn-bubble-arrow:hover .btn-bubble-arrow__content {
  transform: translateX(-3.75em) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg {
  transform: rotate(-45deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow {
  transform: scale(1) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate {
     transform: scale(1) rotate(0.001deg);
     margin-right: 0.5rem;
}



/* Links */
[data-underline-link] {
  text-decoration: none;
  position: relative;
      font-weight: 500;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after,
[data-underline-link="active"]::before,
[data-underline-link="active"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

/* alt */
[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transition-delay: 0s;
}

/* active — before starts visible, after starts hidden */
[data-underline-link="active"]::before {
  transform-origin: right;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0s;
}

[data-underline-link="active"]::after {
  transform-origin: left;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

/* parent a hover */
a:hover [data-underline-link]::before,
a:hover [data-underline-link] span::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  /* default */
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  /* alt */
  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }

  /* active — before slides out to right, after comes in from left */
  [data-underline-link="active"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-underline-link="active"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}


/* ==========================================================================
   Button 009 — Slide Arrow
   ========================================================================== */

:root {
  --button-009-color: var(--wp--preset--color--base, #fff);
  --button-009-color-background: var(--wp--preset--color--contrast, #202333);
  --button-009-color-focus: var(--wp--preset--color--contrast, #202333);
  --button-009-border-radius: 2.5em;
  --button-009-icon-size: 1.3em;
  --button-009-padding-top: 1em;
  --button-009-padding-right: 1.75em;
  --button-009-padding-bottom: 1em;
  --button-009-padding-left: 1.75em;
  --button-009-gap: 0.75em;
  --button-009-overflow: clip;
  --button-009-focus-inset: -0.125em;
  --button-009-click-scale: 0.955 0.925;
  --button-009-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
  --button-009-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --button-009-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-009 {
  color: var(--button-009-color);
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.15s var(--button-009-ease-click);
}

.wp-element-button.button-009 {
  background-color: transparent !important;
  padding: 0 !important;
}

:root :where(.wp-element-button, .wp-block-button__link)::after {
  content: none;
}

.button-009:active {
  scale: var(--button-009-click-scale);
}

.button-009__inner {
  pointer-events: none;
  grid-column-gap: var(--button-009-gap);
  grid-row-gap: var(--button-009-gap);
  padding-top: var(--button-009-padding-top);
  padding-right: var(--button-009-padding-right);
  padding-bottom: var(--button-009-padding-bottom);
  padding-left: var(--button-009-padding-left);
  z-index: 1;
  border-radius: var(--button-009-border-radius);
  overflow: var(--button-009-overflow);
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.button-009__icon {
  width: var(--button-009-icon-size);
  height: var(--button-009-icon-size);
  flex: none;
  transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out;
}

.button-009__icon.is--left {
  left: var(--button-009-padding-right);
  position: absolute;
  opacity: 0;
  translate: -1.5em 0 0;
}

.button-009__text {
  flex: none;
  transition: translate 0.5s var(--button-009-ease-hover);
}

.button-009__bg {
  background-color: var(--button-009-color-background);
  border-radius: var(--button-009-border-radius);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* Outline variant */
.button-009.is-style-outline {
  --button-009-color: var(--wp--preset--color--contrast, #202333);
  --button-009-color-background: transparent;
}

.button-009.is-style-outline .button-009__bg {
  border: 1.5px solid var(--button-009-color);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-009:is(:hover, :focus-visible) .button-009__text,
  [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__text {
    translate: calc(var(--button-009-icon-size) + var(--button-009-gap) + var(--button-009-padding-right) - var(--button-009-padding-left)) 0 0;
    transition: translate 0.5s 0.075s var(--button-009-ease-hover);
  }

  .button-009:is(:hover, :focus-visible) .button-009__icon.is--left,
  [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__icon.is--left {
    translate: 0 0 0;
    opacity: 1;
    transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }

  .button-009:is(:hover, :focus-visible) .button-009__icon.is--right,
  [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__icon.is--right {
    translate: 1.5em 0 0;
    opacity: 0;
    transition: translate 0.5s 0.05s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }
}


/* ==========================================================================
   Scroll Hint — Slide Effect
   ========================================================================== */

.scroll-hint-slide {
  overflow: clip;
  position: relative;
}

.scroll-hint-slide__icon {
  flex-shrink: 0;
  transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out;
}

.scroll-hint-slide__icon.is--top {
  position: absolute;
  opacity: 0;
  translate: 0 -1.5em 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .scroll-hint-slide:is(:hover, :focus-visible) .scroll-hint-slide__icon.is--top {
    translate: 0 0 0;
    opacity: 1;
    transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }

  .scroll-hint-slide:is(:hover, :focus-visible) .scroll-hint-slide__icon.is--center {
    translate: 0 1.5em 0;
    opacity: 0;
    transition: translate 0.5s 0.05s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }
}


/* ==========================================================================
   Arrow Slide — Horizontal (CTA cards, Grid links)
   ========================================================================== */

.arrow-slide-h {
  overflow: clip;
  position: relative;
}

.arrow-slide-h__icon {
  flex-shrink: 0;
  transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out;
}

.arrow-slide-h__icon.is--left {
  position: absolute;
  opacity: 0;
  translate: -1.5em 0 0;
}

/* Override existing hover transforms */
.block-call-to-action__card:hover .block-call-to-action__card-arrow.arrow-slide-h {
  transform: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a:is(:hover, :focus-visible) .arrow-slide-h .arrow-slide-h__icon.is--left,
  .arrow-slide-h:is(:hover, :focus-visible) .arrow-slide-h__icon.is--left {
    translate: 0 0 0;
    opacity: 1;
    transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }

  a:is(:hover, :focus-visible) .arrow-slide-h .arrow-slide-h__icon.is--center,
  .arrow-slide-h:is(:hover, :focus-visible) .arrow-slide-h__icon.is--center {
    translate: 1.5em 0 0;
    opacity: 0;
    transition: translate 0.5s 0.05s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
  }
}


/* Modal */
#sidebar-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

#sidebar-modal.is-active {
  visibility: visible;
  pointer-events: all;
}

#sidebar-modal.is-closing {
  visibility: visible;
  pointer-events: none;
}

.sidebar-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  backdrop-filter: blur(20px);
}

#sidebar-modal.is-active .sidebar-modal__backdrop {
  opacity: 1;
}

#sidebar-modal.is-closing .sidebar-modal__backdrop {
  opacity: 0;
}

.sidebar-modal__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
  background: #fff;
  overflow-y: auto;
  padding: 40px;
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

#sidebar-modal.is-active .sidebar-modal__panel {
  transform: translateX(0);
}

#sidebar-modal.is-closing .sidebar-modal__panel {
  transform: translateX(100%);
}

.sidebar-modal__close {
    background-color: var(--wp--preset--color--accent-5);
    padding: 1rem 1rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    color: inherit;
    font-size: inherit;
    border: none;
    font-family: inherit;
    display: block;
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 100000;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

#sidebar-modal.is-active .sidebar-modal__close {
    opacity: 1;
}

#sidebar-modal.is-closing .sidebar-modal__close {
    opacity: 0;
}

body.modal-open {
  overflow: hidden;
}


.sidebar-modal__panel h1.wp-block-heading.has-xxxx-large-font-size {
    font-size: clamp(110px, 20vw, 160px) !important;
    margin-top: 4rem ! IMPORTANT;
}


/* Blocks  */
/* Gallery */
.wp-block-gallery {
  gap: 0.75rem !important;
  margin-block-end: 0.75rem;
}

/* Image  */
figure.wp-block-image img {
    border-radius: 0.25em;
}



/* Image  */
figure.wp-block-image img {
    width: 100%;
}

/* Media & Text block images */
.wp-block-media-text__media img,
.wp-block-media-text__media video {
    border-radius: 10px;
}

.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content {
    padding-left: 0;
}

/* Stacked-on-mobile: drop the side padding, keep only vertical spacing */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
        padding: 2rem 0;
    }
}


/* Global image hover */
a img,
a figure img,
[data-hover] img {
    transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

a:hover img,
a:focus-visible img,
[data-hover]:hover img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    a img,
    a figure img,
    [data-hover] img {
        transition: none;
    }
}

.is-content-justification-center {
    justify-content: center;
}



@media (max-width: 800px) {

    .footer-bar {
        padding-bottom: 5px;
        font-size: 75%;
    }


    .btn-bubble-arrow__arrow {
        width: 2.75em;
        height: 2.75em;
    }

    .btn-bubble-arrow__content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .btn-bubble-arrow:hover .btn-bubble-arrow__content {
      transform: translateX(-2.75em) rotate(0.001deg);
    }

    h1.wp-block-heading.has-xxxx-large-font-size {
    margin-top: 6rem !important;
}
.progressive-blur {
  height: 6rem;
}

:root :where(.is-layout-constrained) > * {
    margin-block-start: 1rem;
    margin-block-end: 7rem;
}

}