/*
Theme Name: Le Lauzon
Theme URI: https://agencem.ca
Author: agence m
Author URI: https://agencem.ca
Description: Thème sur mesure pour Le Lauzon
Version: 2.0
Text Domain: lauzon
*/


/* VARIABLES
   ----------------------------- */

:root {

   /* Colors */
   --dark-grey: #202323;
   --beige: #F9F5E4;
   --beige-dark: #F4F0DF;
   --blue: #B8CCCB;
   --sand: #ADA479;
   --olive: #666146;
   --brick-light: #D0A08C;
   --white: #FFFFFF;
   --red: #D00000;

   --line: rgba(32, 35, 35, 0.2);
   --surface: rgba(32, 35, 35, 0.05);
   --surface-strong: rgba(32, 35, 35, 0.06);
   --field-bg: rgba(32, 35, 35, 0.03);
   --field-border: rgba(32, 35, 35, 0.1);
   --field-placeholder: rgba(32, 35, 35, 0.75);
   --muted-opacity: 0.75;
   --overlay-bg: rgba(32, 35, 35, 0.6);
   --overlay-fade: rgba(32, 35, 35, 0.5);
   --overlay-soft: rgba(32, 35, 35, 0.35);
   --header-bg: var(--beige);
   --header-border: rgba(32, 35, 35, 0.1);
   --header-progress: 0;

   /* Type scale */
   --impact-size: clamp(3rem, calc(1.2713rem + 5.5319vw), 7rem);
   --h1-size: clamp(2.5rem, calc(1.5027rem + 3.1915vw), 4.875rem);
   --h2-size: clamp(2rem, calc(1.3351rem + 2.1277vw), 3.5rem);
   --h3-size: clamp(1.5rem, calc(1.1676rem + 1.0638vw), 2.25rem);
   --h4-size: clamp(1.3125rem, calc(1.0798rem + 0.7447vw), 1.75rem);
   --h5-size: clamp(1.0625rem, calc(0.8963rem + 0.5319vw), 1.375rem);
   --h6-size: clamp(0.9375rem, calc(0.9043rem + 0.1064vw), 1rem);
   --paragraph-size: clamp(0.9375rem, calc(0.8378rem + 0.3191vw), 1.125rem);
   --small-paragraph-size: clamp(0.875rem, calc(0.8418rem + 0.1064vw), 0.9375rem);
   --small-text-size: clamp(0.8125rem, calc(0.7793rem + 0.1064vw), 0.875rem);
   --subtitle-size: clamp(0.75rem, calc(0.6875rem + 0.2vw), 0.9375rem);
   --label-size: clamp(0.75rem, calc(0.7188rem + 0.1vw), 0.875rem);
   --field-label-size: clamp(0.75rem, calc(0.7168rem + 0.1064vw), 0.8125rem);
   --trim-title-top: 0.29em;
   --trim-title-bottom: 0.41em;
   --trim-mono-top: 0.35em;
   --trim-mono-bottom: 0.32em;
   --title-balance: calc(var(--trim-title-bottom) - var(--trim-title-top));
   --menu-size: 0.9375rem;
   --menu-mobile-size: clamp(2.125rem, calc(1.6596rem + 1.4894vw), 3rem);
   --field-size: var(--small-paragraph-size);
   --placeholder-size: var(--field-size);

   /* Button */
   --btn-size: clamp(0.8125rem, calc(0.746rem + 0.2128vw), 0.9375rem);
   --btn-padding: 0.9333em 1.4667em;
   --radius-pill: 999px;
   --btn-radius: var(--radius-pill);
   --btn-focus-inset: -0.125em;
   --btn-click-scale: 0.955 0.925;
   --btn-icon-size: clamp(2.125rem, calc(1.9255rem + 0.6383vw), 2.5rem);
   --btn-icon-glyph-size: var(--btn-size);
   --btn-square-size: clamp(2.375rem, calc(2.1755rem + 0.6383vw), 2.75rem);
   --btn-square-icon-size: clamp(1.125rem, calc(1.0585rem + 0.2128vw), 1.25rem);

   /* Radius */
   --radius-xs: 0.25rem;
   --radius-small: 0.5rem;
   --radius: 0.75rem;
   --radius-card: 1.375rem;
   --radius-big: 1.5rem;

   /* Spacing */
   --container-padding: clamp(1.25rem, calc(0.851rem + 1.2766vw), 2rem);
   --row-padding-xs: clamp(2rem, calc(1.2021rem + 2.5532vw), 3.5rem);
   --row-padding-s: clamp(2.5rem, calc(1.7021rem + 2.5532vw), 4rem);
   --row-padding-m: clamp(3.5rem, calc(2.1702rem + 4.2553vw), 6rem);
   --row-padding-l: clamp(4.5rem, calc(2.5718rem + 6.1702vw), 8.125rem);
   --top-wrap-gap: 1.9375rem;
   --content-gap: clamp(3.125rem, calc(2.6596rem + 1.4894vw), 4rem);
   --content-gap-l: clamp(3.5rem, calc(2.1702rem + 4.2553vw), 6rem);
   --glass-blur: 10px;
   --size-wrap: 100rem;

   /* Header */
   --logo-h: clamp(1.875rem, calc(1.609rem + 0.8511vw), 2.5rem);
   --logo-h-scrolled: 2rem;
   --header-padding: 1.5rem;
   --header-padding-scrolled: 0.875rem;
   --burger-size: 2.625rem;
   --bar-padding: 0.875rem;
   --header-h: calc(var(--logo-h) + var(--header-padding) * 2);

   /* Cursor */
   --cursor-size: 3rem;

   /* Layers */
   --z-header: 100;
   --z-cover: 101;
   --z-modal: 200;
   --z-consent: 300;
   --z-top: 9999;

   /* Fonts */
   --font-title: "forma-djr-text", sans-serif;
   --font-main: "forma-djr-micro", sans-serif;
   --font-mono: "config-mono-vf", monospace;
   --mono-medium: "wght" 500;

   /* Easing */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
   --ease-toggle: cubic-bezier(0.165, 0.84, 0.44, 1);
   --ease-drawer-open: linear(0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1);
   --ease-drawer-close: cubic-bezier(0.17, 0.84, 0.44, 1);
   --ease-link: cubic-bezier(0.625, 0.05, 0, 1);
   --ease-accordion: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-btn: cubic-bezier(0.675, 0.15, 0.1, 1);
   --ease-nav: cubic-bezier(0.5, 0.6, 0, 1);
   --ease-btn-click: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-btn-focus: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-fade: ease;
   --ease-fade-in-out: ease-in-out;
   --ease-fade-out: ease-out;
}

@media (max-width: 1024px) {
   :root {
      --header-h: calc(var(--burger-size) + var(--bar-padding) * 2);
   }
}

@media (max-width: 1024px), (pointer: coarse) {
   :root {
      --field-size: 1rem;
      --placeholder-size: 0.9375rem;
   }
}

@media (max-width: 767px) {
   :root {
      --burger-size: 2.25rem;
      --menu-size: 0.875rem;
   }
}

@media (max-width: 500px) {
   :root {
      --impact-size: clamp(2.625rem, calc(1.9583rem + 3.3333vw), 3rem);
      --menu-mobile-size: clamp(2rem, calc(1.6042rem + 1.6667vw), 2.125rem);
   }
}


/* BASE
   ----------------------------- */

html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   background-color: var(--beige);
   scrollbar-gutter: stable;
   scroll-padding-top: var(--header-h);
}

html[data-scroll-locked] {
   overflow: hidden;
   overscroll-behavior: none;
}

body {
   font-size: var(--paragraph-size);
   line-height: 1.333;
   font-family: var(--font-main);
   font-weight: 400;
   color: var(--dark-grey);
   background-color: var(--beige);
}

main {
   overflow-x: clip;
}

sup {
   font-size: 0.7em;
   font-style: normal;
   vertical-align: super;
   color: inherit;
}


/* TYPOGRAPHY
   ----------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
blockquote,
figcaption,
address,
.btn .text {
   overflow-wrap: break-word;
}

.impact {
   font-family: var(--font-title);
   font-size: var(--impact-size);
   line-height: 1;
   font-weight: 400;
   color: inherit;
}

h1, .h1 {
   font-family: var(--font-title);
   font-size: var(--h1-size);
   line-height: 1;
   font-weight: 400;
   color: inherit;
}

h2, .h2 {
   font-family: var(--font-title);
   font-size: var(--h2-size);
   line-height: 1.096;
   font-weight: 400;
   color: inherit;
}

h3, .h3 {
   font-family: var(--font-title);
   font-size: var(--h3-size);
   line-height: 1.118;
   font-weight: 400;
   color: inherit;
}

h4, .h4 {
   font-family: var(--font-title);
   font-size: var(--h4-size);
   line-height: 1.18;
   font-weight: 400;
   color: inherit;
}

h5, .h5 {
   font-family: var(--font-title);
   font-size: var(--h5-size);
   line-height: 1.273;
   font-weight: 400;
   color: inherit;
}

h6, .h6 {
   font-family: var(--font-title);
   font-size: var(--h6-size);
   line-height: 1.375;
   font-weight: 400;
   color: inherit;
}

p {
   font-size: var(--paragraph-size);
   line-height: 1.333;
   font-family: var(--font-main);
   font-weight: 400;
}

strong, b {
   font-weight: 500;
}

em, i {
   font-style: italic;
}

.subtitle {
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--subtitle-size);
   line-height: 1.143;
   text-transform: uppercase;
}

.label {
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--label-size);
   line-height: 1.154;
   text-transform: uppercase;
}

.small-text {
   font-family: var(--font-main);
   font-size: var(--small-text-size);
   line-height: 1.286;
   font-weight: 400;
}


/* ACCESSIBILITY
   ----------------------------- */

.skip-link {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
   z-index: var(--z-top);
   padding: var(--btn-padding);
   background: var(--dark-grey);
   color: var(--beige);
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--btn-size);
   line-height: 1;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: var(--btn-radius);
}

.skip-link:focus {
   position: fixed;
   top: 0.5rem;
   left: 0.5rem;
   width: auto;
   height: auto;
   overflow: visible;
}

:focus-visible {
   outline: 2px solid var(--dark-grey);
   outline-offset: 2px;
   box-shadow: 0 0 0 2px var(--white);
}

:is(.btn, .btn-icon):focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: none;
}

:where(#main-content, section[tabindex="-1"]):focus {
   outline: none;
}

.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;
}


/* REVEAL
   ----------------------------- */

html[data-reveal-pending][data-reveal-fade] :is([data-reveal], [data-reveal-group] > *) {
   opacity: 0;
}

html[data-reveal-pending] [data-reveal-lines] .line {
   transform: translateY(110%);
}

[data-reveal-lines] .mask {
   display: block;
   margin-bottom: -0.18em;
   overflow: hidden;
   overflow-x: visible;
   overflow-y: clip;
}

[data-reveal-lines] .line {
   display: block;
   padding-bottom: 0.18em;
}


/* GENERAL
   ----------------------------- */

a {
   color: inherit;
}

a[href^="tel"] {
   color: inherit;
   text-decoration: none;
}

:where(a, button, label, summary, input, select, textarea) {
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
}

:where(.paragraph) {
   font-size: var(--paragraph-size);
   line-height: 1.333;
}

.paragraph p {
   padding-bottom: 0.75rem;
   font-size: inherit;
   line-height: inherit;
}

.paragraph p:last-child {
   padding-bottom: 0;
}

.paragraph a {
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
   .paragraph a:hover {
      text-decoration: none;
   }
}

.c-wrap {
   max-width: var(--size-wrap);
   padding: 0 var(--container-padding);
   margin: 0 auto;
   width: 100%;
}

.button-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
}

.image {
   width: 100%;
}


/* 404
   ----------------------------- */

body.error404 :is(.site, .page-wrap) {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   min-height: 100svh;
}

body.error404 .page-wrap {
   flex: 1 0 auto;
}

body.error404 #main-content {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: var(--header-h);
}

body.error404 footer.footer {
   flex-shrink: 0;
}


/* BTN
   ----------------------------- */

.btn {
   --btn-color: var(--beige);
   --btn-bg-color: var(--dark-grey);
   color: var(--btn-color);
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--btn-size);
   line-height: 1;
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
   background-color: transparent;
   padding: 0;
   border: none;
   cursor: pointer;
   display: inline-grid;
   max-width: 100%;
   -webkit-user-select: none;
   user-select: none;
   transition: scale 0.15s var(--ease-btn-click);
}

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

.btn .hover::after {
   content: attr(data-text);
   display: block;
   color: var(--btn-color);
   grid-area: 1 / 1;
   padding: var(--btn-padding);
}

.btn .default .text {
   padding: var(--btn-padding);
   grid-area: 1 / 1;
}

:is(.btn, .btn-icon) .bg {
   background-color: var(--btn-bg-color);
   border-radius: var(--btn-radius);
   grid-area: 1 / 1;
   width: 100%;
   height: 100%;
   position: relative;
}

/* Variants */

.btn-blue {
   --btn-color: var(--dark-grey);
   --btn-bg-color: var(--blue);
}

@media (forced-colors: active) {
   .btn .bg {
      border: 1px solid ButtonText;
   }
}


/* BTN ICON
   ----------------------------- */

.btn-icon {
   --btn-color: var(--beige);
   --btn-bg-color: var(--dark-grey);
   width: var(--btn-icon-size);
   height: var(--btn-icon-size);
   width: round(var(--btn-icon-size), 2px);
   height: round(var(--btn-icon-size), 2px);
   color: var(--btn-color);
   background-color: transparent;
   padding: 0;
   border: none;
   cursor: pointer;
   display: inline-grid;
   flex-shrink: 0;
   text-decoration: none;
   transition: scale 0.15s var(--ease-btn-click);
}

.btn-icon:active {
   scale: var(--btn-click-scale);
}

.btn-icon .default {
   place-items: center;
}

.btn-icon .icon {
   display: grid;
   place-items: center;
}

.btn-icon .icon svg {
   display: block;
   width: 1.25rem;
   height: 1.25rem;
}

.btn-outline {
   --btn-color: currentColor;
   --btn-bg-color: transparent;
}

.btn-outline .bg {
   border: 1px solid rgba(128, 128, 128, 0.35);
   border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
   transition: border-color 0.4s var(--ease-fade);
}

.btn-square {
   --btn-radius: var(--radius-small);
   --btn-icon-size: var(--btn-square-size);
}

.btn-square .icon svg {
   width: var(--btn-square-icon-size);
   height: var(--btn-square-icon-size);
   width: round(var(--btn-square-icon-size), 2px);
   height: round(var(--btn-square-icon-size), 2px);
}

@media (hover: hover) and (pointer: fine) {
   .btn-outline:hover .bg {
      border-color: currentColor;
   }
}

@media (forced-colors: active) {
   .btn-icon .bg {
      border: 1px solid ButtonText;
   }
}


/* BTN FLIP
   ----------------------------- */

:is(.btn, .btn-icon) .inner {
   pointer-events: none;
   backface-visibility: hidden;
   perspective: 10em;
   border-radius: var(--btn-radius);
   z-index: 1;
   clip-path: inset(0 round var(--btn-radius));
   grid-area: 1 / 1;
   display: grid;
}

:is(.btn, .btn-icon) .hover {
   backface-visibility: hidden;
   transform-style: preserve-3d;
   grid-area: 1 / 1;
   justify-content: center;
   align-items: center;
   padding: 0;
   display: flex;
   translate: 0 65% 0;
   rotate: 1 0 0 -85deg;
   scale: 0.525;
   transition: translate 0.34s var(--ease-btn), rotate 0.34s var(--ease-btn), scale 0.34s var(--ease-btn);
}

:is(.btn, .btn-icon) .default {
   backface-visibility: hidden;
   transform-style: preserve-3d;
   grid-area: 1 / 1;
   display: grid;
   transition: translate 0.38s var(--ease-btn), rotate 0.4s var(--ease-btn), scale 0.3s var(--ease-btn);
}

:is(.btn, .btn-icon) .bg::after {
   content: "";
   display: block;
   position: absolute;
   inset: var(--btn-focus-inset);
   border-radius: var(--btn-radius);
   transition: box-shadow 0.3s var(--ease-btn-focus);
   pointer-events: none;
   z-index: 1;
}

:is(.btn, .btn-icon):focus-visible .bg::after {
   box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.25rem var(--dark-grey);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
   :is(.btn, .btn-icon):is(:hover, :focus-visible) .hover {
      translate: 0 0 0;
      rotate: 1 0 0 0deg;
      scale: 1;
      transition: translate 0.38s 0.04s var(--ease-btn), rotate 0.4s 0.04s var(--ease-btn), scale 0.3s 0.04s var(--ease-btn);
   }

   :is(.btn, .btn-icon):is(:hover, :focus-visible) .default {
      translate: 0 -65% 0;
      rotate: 1 0 0 85deg;
      scale: 0.525;
      transition: translate 0.34s 0.04s var(--ease-btn), rotate 0.34s 0.04s var(--ease-btn), scale 0.34s 0.04s var(--ease-btn);
   }
}


/* UNDERLINE LINKS
   ----------------------------- */

[data-underline-link] {
   text-decoration: none;
   position: relative;
}

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

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

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

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

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

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


/* CURSOR
   ----------------------------- */

[data-cursor] {
   cursor: pointer;
}

.cursor {
   position: fixed;
   top: 0;
   left: 0;
   opacity: 0;
   min-width: var(--cursor-size);
   height: var(--cursor-size);
   padding: 0 1.125rem;
   border-radius: var(--radius-pill);
   background-color: var(--dark-grey);
   color: var(--beige);
   pointer-events: none;
   z-index: var(--z-top);
   display: flex;
   align-items: center;
   justify-content: center;
   transform-origin: center;
}

.cursor .label {
   line-height: 1;
   white-space: nowrap;
}

@media (hover: none), (pointer: coarse), (max-width: 1024px) {
   .cursor {
      display: none;
   }
}


/* SLIDES
   ----------------------------- */

.slides {
   position: relative;
   overflow: hidden;
   isolation: isolate;
}

.slides .slide {
   position: absolute;
   inset: 0;
   overflow: hidden;
   clip-path: inset(0 0 0 100%);
}

.slides .slide.is-active {
   z-index: 1;
   clip-path: none;
}

.slides .slide .image,
.slides .slide .video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.slides .slide::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--shade-map, var(--dark-grey));
   opacity: var(--shade, 0);
   pointer-events: none;
}


/* THUMBS
   ----------------------------- */

.thumbs {
   --thumb-w: clamp(3.75rem, calc(3.484rem + 0.8511vw), 4.25rem);
   --thumb-gap: 0.3125rem;
   --thumb-fade: 2.5rem;
   display: flex;
   gap: var(--thumb-gap);
   min-width: 0;
   max-width: min(100% + 0.5rem, var(--thumb-w) * 5 + var(--thumb-gap) * 4 + 0.5rem);
   margin: -0.25rem;
   padding: 0.25rem;
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scrollbar-width: none;
}

.thumbs::-webkit-scrollbar {
   display: none;
}

.thumbs.is-fade-end {
   -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--thumb-fade)), transparent);
   mask-image: linear-gradient(to right, #000 calc(100% - var(--thumb-fade)), transparent);
}

.thumbs.is-fade-start {
   -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--thumb-fade)), transparent);
   mask-image: linear-gradient(to left, #000 calc(100% - var(--thumb-fade)), transparent);
}

.thumbs.is-fade-start.is-fade-end {
   -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--thumb-fade), #000 calc(100% - var(--thumb-fade)), transparent);
   mask-image: linear-gradient(to right, transparent, #000 var(--thumb-fade), #000 calc(100% - var(--thumb-fade)), transparent);
}

.thumbs .thumb {
   flex-shrink: 0;
   width: var(--thumb-w);
   aspect-ratio: 4 / 3;
   padding: 0;
   overflow: hidden;
   cursor: pointer;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-xs);
   -webkit-backdrop-filter: blur(var(--glass-blur));
   backdrop-filter: blur(var(--glass-blur));
   transition: border-color 0.3s var(--ease-fade);
}

.thumbs .thumb .image {
   height: 100%;
   object-fit: cover;
   opacity: 0.5;
   transition: opacity 0.3s var(--ease-fade);
}

.thumbs .thumb.is-active {
   border-color: var(--white);
}

.thumbs .thumb.is-active .image {
   opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
   .thumbs .thumb:hover .image {
      opacity: 1;
   }
}

@media (scripting: none) {
   [data-media-switch] .thumbs {
      display: none;
   }
}


/* SOCIALS
   ----------------------------- */

.socials {
   display: flex;
   gap: 0.625rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

.socials .icon svg {
   width: auto;
   height: var(--btn-icon-glyph-size);
}


/* ACCORDION
   ----------------------------- */

[data-accordion] {
   --accordion-padding-y: clamp(1.125rem, calc(1.0585rem + 0.2128vw), 1.25rem);
   --accordion-padding-x: clamp(1.25rem, calc(1.117rem + 0.4255vw), 1.5rem);
   --accordion-icon-line: 1px;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

[data-accordion] .item {
   background-color: var(--surface);
   border-radius: 0.375rem;
}

[data-accordion] .title {
   margin: 0;
   font-family: var(--font-main);
   font-size: var(--paragraph-size);
   line-height: 1.333;
}

[data-accordion] .summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   width: 100%;
   padding: var(--accordion-padding-y) var(--accordion-padding-x);
   border: none;
   border-radius: inherit;
   background: none;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
}

[data-accordion] .summary .icon {
   position: relative;
   flex-shrink: 0;
   width: clamp(0.875rem, calc(0.8418rem + 0.1064vw), 0.9375rem);
   aspect-ratio: 1;
}

[data-accordion] .summary .icon::before,
[data-accordion] .summary .icon::after {
   content: "";
   position: absolute;
   background-color: currentColor;
}

[data-accordion] .summary .icon::before {
   top: calc(50% - var(--accordion-icon-line) / 2);
   left: 0;
   width: 100%;
   height: var(--accordion-icon-line);
}

[data-accordion] .summary .icon::after {
   top: 0;
   left: calc(50% - var(--accordion-icon-line) / 2);
   width: var(--accordion-icon-line);
   height: 100%;
}

[data-accordion] [data-accordion-status="open"] .summary .icon::after {
   transform: scaleY(0);
}

[data-accordion] .answer {
   display: grid;
   grid-template-rows: 1fr;
}

html[data-reveal-pending] [data-accordion] [data-accordion-status="closed"] .answer,
[data-accordion].is-ready [data-accordion-status="closed"] .answer {
   grid-template-rows: 0fr;
}

[data-accordion].is-animated .answer {
   transition: grid-template-rows 0.6s var(--ease-accordion);
}

[data-accordion].is-animated .summary .icon::after {
   transition: transform 0.6s var(--ease-accordion);
}

[data-accordion] .answer > .inner {
   min-height: 0;
   overflow: hidden;
}

[data-accordion] .paragraph {
   padding: 0 var(--accordion-padding-x) var(--accordion-padding-y);
   opacity: var(--muted-opacity);
}

@media (forced-colors: active) {
   [data-accordion] .summary .icon::before,
   [data-accordion] .summary .icon::after {
      forced-color-adjust: none;
      background-color: CanvasText;
   }
}


/* CF7 FORMS
   ----------------------------- */

.wpcf7-form {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   column-gap: 1.25rem;
}

.wpcf7-form label,
.wpcf7-form legend {
   display: block;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--field-label-size);
   line-height: 1.154;
   text-transform: uppercase;
   color: var(--dark-grey);
}

.wpcf7-form fieldset {
   min-width: 0;
   margin: 0;
   padding: 0;
   border: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
   display: block;
   margin-top: 0.625rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
   display: block;
   width: 100%;
   font-family: var(--font-main);
   font-size: var(--field-size);
   font-weight: 400;
   line-height: 1.467;
   color: var(--dark-grey);
   background: var(--field-bg);
   padding: 0.8125rem 1.1875rem;
   border: 1px solid var(--field-border);
   border-radius: var(--radius-small);
   transition: border-color 0.3s var(--ease-fade), box-shadow 0.3s var(--ease-fade);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
   outline: 2px solid transparent;
   box-shadow: 0 0 0 1px var(--dark-grey);
   border-color: var(--dark-grey);
}

.wpcf7-form :is(.wpcf7-checkbox, .wpcf7-radio) {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem 1.5rem;
}

.wpcf7-form :is(.wpcf7-checkbox, .wpcf7-radio) .wpcf7-list-item {
   margin: 0;
}

.wpcf7-form :is(.wpcf7-checkbox, .wpcf7-radio) label {
   display: flex;
   align-items: center;
   gap: 0.625rem;
   min-height: 1.5rem;
   font-family: var(--font-main);
   font-variation-settings: normal;
   font-size: var(--small-paragraph-size);
   text-transform: none;
   cursor: pointer;
}

.wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
   -webkit-appearance: none;
   appearance: none;
   flex-shrink: 0;
   width: 1.125rem;
   height: 1.125rem;
   margin: 0;
   background: var(--field-bg) center / 0.625rem no-repeat;
   border: 1px solid var(--field-border);
   border-radius: 0.1875rem;
   cursor: pointer;
   transition: border-color 0.3s var(--ease-fade);
}

.wpcf7-form input[type="radio"] {
   border-radius: 50%;
}

.wpcf7-form input[type="checkbox"]:checked {
   background-color: var(--dark-grey);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.8 9 10 3.5' fill='none' stroke='%23F9F5E4' stroke-width='2'/%3E%3C/svg%3E");
   border-color: var(--dark-grey);
}

.wpcf7-form input[type="radio"]:checked {
   border-color: var(--dark-grey);
   box-shadow: inset 0 0 0 0.25rem var(--beige), inset 0 0 0 1rem var(--dark-grey);
}

.wpcf7-form :is(input[type="checkbox"], input[type="radio"]):focus-visible {
   outline: 2px solid var(--dark-grey);
   outline-offset: 2px;
}

.wpcf7-form textarea {
   height: 11.25rem;
   min-height: 11.25rem;
   resize: none;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
   color: var(--field-placeholder);
   font-size: var(--placeholder-size);
   opacity: 1;
}

.wpcf7-form .control-group {
   position: relative;
   width: 100%;
   margin: 0.75rem 0;
}

.wpcf7-form .control-group.mid {
   width: calc(50% - 0.625rem);
}

.wpcf7-form .submit-wrap {
   width: 100%;
   margin-top: 0.75rem;
   display: flex;
   align-items: center;
   gap: 1.25rem;
}

.wpcf7-form .submit-wrap .btn {
   order: 1;
}

.wpcf7-form .submit-wrap .wpcf7-spinner {
   order: 2;
}

.wpcf7-form .note {
   width: 100%;
   font-size: var(--small-text-size);
   opacity: var(--muted-opacity);
   margin: 0.625rem 0 1rem;
}

.wpcf7-form .wpcf7-not-valid-tip {
   display: block;
   margin-top: 0.375rem;
   overflow: hidden;
   font-size: var(--small-text-size);
   line-height: 1.286;
   color: var(--red);
}

.wpcf7-form .wpcf7-not-valid-tip .text {
   display: block;
}

.wpcf7-form :is(input, select, textarea).wpcf7-not-valid {
   border-color: var(--red);
}

.wpcf7-form .wpcf7-not-valid:focus {
   box-shadow: 0 0 0 1px var(--red);
}

.wpcf7 form .wpcf7-response-output {
   font-size: var(--small-text-size);
   line-height: 1.286;
   background: transparent;
   border: 0;
   padding: 2.5rem 0 0;
   margin: 0 auto;
   width: 100%;
   text-align: center;
}

.wpcf7-spinner::before {
   display: none;
}

.wpcf7-spinner {
   margin: 0;
   background-image: url('images/loader.svg');
   background-color: transparent;
   background-size: contain;
   background-repeat: no-repeat;
   display: block;
   flex-shrink: 0;
}

@media (max-width: 1024px) {
   .wpcf7-form input[type="text"],
   .wpcf7-form input[type="email"],
   .wpcf7-form input[type="tel"],
   .wpcf7-form select,
   .wpcf7-form textarea {
      padding: 0.75rem 1rem;
   }
}

@media (max-width: 767px) {
   .wpcf7-form input[type="text"],
   .wpcf7-form input[type="email"],
   .wpcf7-form input[type="tel"],
   .wpcf7-form select,
   .wpcf7-form textarea {
      padding-block: 0.625rem;
      line-height: 1.5;
   }

   .wpcf7-form .control-group.mid {
      width: 100%;
   }

   .wpcf7-form .control-group {
      margin: 0.5rem 0;
   }
}

@media (forced-colors: active) {
   .wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
      -webkit-appearance: auto;
      appearance: auto;
   }
}


/* COOKIEYES
   ----------------------------- */

body .cky-consent-bar [data-cky-tag="powered-by"],
body .cky-footer-wrapper [data-cky-tag="detail-powered-by"] {
   display: none !important;
}

body .cky-consent-bar > div:has(> [data-cky-tag="powered-by"]),
body .cky-footer-wrapper > div:has(> [data-cky-tag="detail-powered-by"]) {
   padding: 0 !important;
}

body .cky-consent-container {
   z-index: var(--z-consent);
   width: 32rem;
}

body .cky-btn-revisit-wrapper {
   z-index: 99;
}

body .cky-box-bottom-left {
   bottom: 1rem;
   left: 1rem;
}

body .cky-box-bottom-right {
   right: 1rem;
   bottom: 1rem;
}

body .cky-consent-container .cky-consent-bar {
   padding: 1.75rem;
   color: var(--dark-grey);
   background-color: var(--beige) !important;
   border: 1px solid var(--line) !important;
   border-radius: var(--radius-big);
   box-shadow: none;
}

body .cky-notice .cky-title,
body .cky-preference-header .cky-preference-title {
   margin: 0 0 0.5rem;
   color: var(--dark-grey);
   font-family: var(--font-title);
   font-size: var(--h5-size);
   font-weight: 400;
   line-height: 1.1;
}

body .cky-notice-des,
body .cky-notice-des *,
body .cky-preference-content-wrapper,
body .cky-preference-content-wrapper *,
body .cky-accordion-header-des,
body .cky-accordion-header-des * {
   color: var(--dark-grey);
   font-family: var(--font-main);
   font-size: var(--small-text-size);
   line-height: 1.5;
}

body .cky-notice-des a,
body .cky-preference-content-wrapper a,
body .cky-show-desc-btn {
   color: var(--dark-grey) !important;
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

body .cky-consent-container :is(.cky-custom-brand-logo-wrapper, .cky-title, .cky-notice-des, .cky-notice-btn-wrapper) {
   padding-right: 0;
   padding-left: 0;
}

body .cky-consent-container .cky-notice-content-wrapper {
   padding: 0;
}

body .cky-notice-btn-wrapper,
body .cky-prefrence-btn-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1.25rem;
}

body .cky-btn {
   flex: 1 1 0;
   min-width: max-content;
   height: auto;
   margin: 0;
   padding: 0.9333em 1em;
   color: var(--dark-grey) !important;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--small-text-size);
   font-weight: 400;
   line-height: 1;
   text-transform: uppercase;
   background-color: transparent !important;
   border: 1px solid var(--dark-grey) !important;
   border-radius: var(--btn-radius);
   opacity: 1;
   cursor: pointer;
   transition: color 0.3s var(--ease-fade), background-color 0.3s var(--ease-fade), border-color 0.3s var(--ease-fade);
}

body .cky-btn.cky-btn-accept {
   color: var(--beige) !important;
   background-color: var(--dark-grey) !important;
}

@media (hover: hover) and (pointer: fine) {
   body .cky-btn:hover {
      color: var(--dark-grey) !important;
      background-color: var(--blue) !important;
      border-color: var(--blue) !important;
      opacity: 1;
   }
}

body .cky-btn:focus-visible {
   outline: 2px solid var(--dark-grey);
   outline-offset: 3px;
}

body .cky-modal {
   left: 50%;
   opacity: 0;
   background-color: transparent !important;
   border-radius: var(--radius-big);
   transform: translate(-50%, -50%);
   transition: opacity 0.5s var(--ease-fade), visibility 0s 0.5s;
}

body .cky-modal.cky-modal-open {
   opacity: 1;
   transition: opacity 0.5s var(--ease-fade);
}

body .cky-modal .cky-preference-center {
   max-width: 100%;
   color: var(--dark-grey) !important;
   background-color: var(--beige) !important;
   border: 0 !important;
   border-radius: var(--radius-big);
}

body .cky-overlay {
   opacity: 1;
   background-color: var(--overlay-bg);
   transition: opacity 0.5s var(--ease-fade), display 0.5s;
   transition-behavior: allow-discrete;
}

body .cky-overlay.cky-hide {
   opacity: 0;
}

@starting-style {
   body .cky-overlay {
      opacity: 0;
   }
}

body .cky-preference-header,
body .cky-footer-wrapper {
   border-color: var(--line) !important;
}

body .cky-preference-header .cky-preference-title {
   margin: 0;
}

body .cky-preference-header .cky-btn-close img {
   filter: brightness(0);
}

body .cky-footer-wrapper {
   background: var(--beige) !important;
}

body .cky-footer-shadow {
   background: linear-gradient(180deg, rgba(249, 245, 228, 0) 0%, var(--beige) 100%) !important;
}

body .cky-accordion {
   border-color: var(--line) !important;
}

body .cky-accordion-btn {
   color: var(--dark-grey) !important;
   font-family: var(--font-main);
   font-size: var(--paragraph-size);
   font-weight: 500;
}

body .cky-always-active {
   color: var(--dark-grey) !important;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--small-text-size);
   font-weight: 400;
   text-transform: uppercase;
}

body .cky-chevron-right::before {
   border-color: var(--dark-grey) !important;
}

body .cky-switch input[type="checkbox"] {
   background-color: var(--line) !important;
}

body .cky-switch input[type="checkbox"]:checked {
   background-color: var(--dark-grey) !important;
}

body .cky-audit-table {
   color: var(--dark-grey) !important;
   background-color: var(--beige-dark) !important;
   border-radius: var(--radius);
}

body .cky-btn-revisit-wrapper {
   width: var(--btn-square-size);
   height: var(--btn-square-size);
   background-color: var(--dark-grey) !important;
}

body .cky-revisit-bottom-left {
   bottom: 1rem;
   left: 1rem;
}

body .cky-btn-revisit-wrapper:hover::before,
body .cky-btn-revisit-wrapper:hover::after {
   display: none;
}

html[data-scroll-locked] :is(.cky-consent-container, .cky-btn-revisit-wrapper) {
   visibility: hidden;
}

@media (max-width: 767px) {
   body .cky-consent-container {
      width: calc(100% - 2rem);
   }

   body .cky-consent-container .cky-consent-bar {
      padding: 1.5rem;
   }
}

@media (max-width: 479px) {
   body .cky-consent-container {
      width: 100%;
   }

   body .cky-box-bottom-left {
      bottom: 0;
      left: 0;
   }

   body .cky-box-bottom-right {
      right: 0;
      bottom: 0;
   }

   body .cky-consent-container .cky-consent-bar {
      padding: 2rem 1.25rem;
      border-width: 1px 0 0 !important;
      border-radius: var(--radius-big) var(--radius-big) 0 0;
   }

   body .cky-notice-btn-wrapper .cky-btn {
      flex: none;
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   body .cky-btn,
   body .cky-modal,
   body .cky-modal.cky-modal-open,
   body .cky-overlay {
      transition: none;
   }
}


/* HEADER
   ----------------------------- */

header.header,
.site .toggle {
   --header-color: var(--dark-grey);
   --header-btn-bg: var(--blue);
}

header.header.is-light,
.site .toggle.is-light {
   --header-color: var(--beige);
   --header-btn-bg: var(--beige);
}

@supports (color: color-mix(in srgb, red, blue)) {
   header.header.is-light,
   .site .toggle.is-light {
      --header-color: color-mix(in srgb, var(--dark-grey) calc(var(--header-progress) * 100%), var(--beige));
      --header-btn-bg: color-mix(in srgb, var(--blue) calc(var(--header-progress) * 100%), var(--beige));
   }
}

body.page-template-template-contact :is(header.header, .site .toggle) {
   --header-btn-bg: var(--sand);
}

header.header {
   --header-padding-current: calc(var(--header-padding) - (var(--header-padding) - var(--header-padding-scrolled)) * var(--header-progress));
   --logo-h-current: calc(var(--logo-h) - (var(--logo-h) - var(--logo-h-scrolled)) * var(--header-progress));
   position: fixed;
   inset: 0 0 auto;
   z-index: var(--z-header);
   color: var(--header-color);
   padding: var(--header-padding-current) 0;
}

header.header::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: var(--header-bg);
   border-bottom: 1px solid var(--header-border);
   opacity: var(--header-progress);
   pointer-events: none;
}

header.header[data-header-hidden] {
   pointer-events: none;
}

header.header .content-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   padding: 0 var(--container-padding);
}

header.header .nav-wrap {
   display: flex;
   align-items: center;
   gap: 2.5rem;
}

header.header .btn {
   --btn-color: var(--dark-grey);
   --btn-bg-color: var(--header-btn-bg);
}

figure.logo {
   display: flex;
   align-items: center;
   margin: 0;
   color: inherit;
}

figure.logo svg {
   width: auto;
   height: var(--logo-h);
   display: block;
}

header.header .logo svg {
   height: var(--logo-h-current);
}

.main-menu {
   display: flex;
   justify-content: center;
}

:where(.main-menu) .menu {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.375rem 2rem;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
}

:where(.main-menu) .menu a {
   color: inherit;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--menu-size);
   line-height: 1.2;
   text-transform: uppercase;
   padding: 0.25rem 0;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   position: relative;
}

:where(.main-menu) .menu a > span {
   display: block;
   position: relative;
}

header.header .menu > li > a {
   white-space: nowrap;
}

header.header .menu .roll {
   display: grid;
   perspective: 10em;
   clip-path: inset(0);
}

header.header .menu .roll .text {
   grid-area: 1 / 1;
   backface-visibility: hidden;
   transform-style: preserve-3d;
   transition: translate 0.4s var(--ease-nav), rotate 0.4s var(--ease-nav), scale 0.4s var(--ease-nav);
}

header.header .menu .roll .text + .text {
   translate: 0 65% 0;
   rotate: 1 0 0 -85deg;
   scale: 0.525;
}

header.header .menu > li > a:focus-visible .roll .text:first-child {
   translate: 0 -65% 0;
   rotate: 1 0 0 85deg;
   scale: 0.525;
   transition-delay: 0.05s;
}

header.header .menu > li > a:focus-visible .roll .text + .text {
   translate: 0 0 0;
   rotate: 1 0 0 0deg;
   scale: 1;
   transition-delay: 0.075s;
}

header.header .menu-item-has-children {
   --menu-link-h: calc(var(--menu-size) * 1.2 + 0.5rem);
   position: relative;
}

header.header .menu-item-has-children > a::after {
   content: "";
   width: 0.375em;
   height: 0.375em;
   margin-left: 0.5em;
   border-right: 1.25px solid currentColor;
   border-bottom: 1.25px solid currentColor;
   transform: translateY(-0.125em) rotate(45deg);
   transition: transform 0.4s var(--ease-out);
}

header.header .sub-menu {
   position: absolute;
   top: 100%;
   left: -0.875rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
   margin: 0;
   padding: calc(0.75rem + var(--header-progress) * (var(--header-padding-current) + (var(--logo-h-current) - var(--menu-link-h)) / 2)) 0 0;
   list-style: none;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(-0.5rem);
   transition: opacity 0.3s var(--ease-fade), transform 0.6s var(--ease-out), visibility 0s 0.6s;
}

header.header .menu-item-has-children:is(:hover, :focus-within):not(.is-dismissed) > .sub-menu {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(0);
   transition: opacity 0.3s var(--ease-fade), transform 0.6s var(--ease-out), visibility 0s;
}

header.header .menu-item-has-children:is(:hover, :focus-within):not(.is-dismissed) > a::after {
   transform: translateY(0.125em) rotate(-135deg);
}

header.header .sub-menu a {
   padding: 0.375rem 0.875rem;
   white-space: nowrap;
   color: var(--dark-grey);
   background-color: var(--beige);
   border-radius: var(--radius-small);
   isolation: isolate;
}

header.header .sub-menu a::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: var(--beige-dark);
   border-radius: inherit;
   opacity: 0;
   transition: opacity 0.3s var(--ease-fade);
}

header.header .sub-menu a:focus-visible::before {
   opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
   header.header .sub-menu a:hover::before {
      opacity: 1;
   }

   header.header .menu > li > a:hover .roll .text:first-child {
      translate: 0 -65% 0;
      rotate: 1 0 0 85deg;
      scale: 0.525;
      transition-delay: 0.05s;
   }

   header.header .menu > li > a:hover .roll .text + .text {
      translate: 0 0 0;
      rotate: 1 0 0 0deg;
      scale: 1;
      transition-delay: 0.075s;
   }
}

@media (max-width: 1024px) {
   header.header {
      padding: var(--bar-padding) 0;
   }

   header.header .content-wrap {
      min-height: var(--burger-size);
      padding-right: calc(var(--container-padding) + var(--toggle-w) + 1rem);
   }

   header.header .nav-wrap {
      display: none;
   }

   header.header .logo svg {
      height: var(--logo-h);
   }
}

@media (scripting: none) {
   header.header {
      --header-progress: 1;
   }

   header.header .content-wrap {
      flex-wrap: wrap;
   }

   header.header .nav-wrap {
      display: flex;
      flex-wrap: wrap;
   }
}


/* MOBILE MENU
   ----------------------------- */

.site {
   --toggle-w: 6.25rem;
   --toggle-icon-size: 1.125rem;
   --toggle-icon-box: 1.25rem;
   --drawer-w: 24.5rem;
   --drawer-gap: 1rem;
   --stack-step: 1rem;
   --page-shift: -6.25rem;
   --drawer-radius: var(--radius-big);
   position: relative;
   isolation: isolate;
   background-color: var(--dark-grey);
}

.site :is(.toggle, .drawer, .sheet),
.site .cover {
   display: none;
}

.site .page-wrap {
   position: relative;
   z-index: 4;
   background-color: var(--beige);
}

/* Toggle */

.site .toggle {
   position: fixed;
   z-index: 5;
   top: var(--bar-padding);
   right: var(--container-padding);
   width: var(--toggle-w);
   height: var(--burger-size);
   padding: 0;
   overflow: hidden;
   isolation: isolate;
   color: var(--dark-grey);
   background-color: var(--header-btn-bg);
   border: none;
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: width 0.6s var(--ease-toggle);
}

.site .toggle::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: var(--beige);
   opacity: 0;
   transition: opacity 0.4s var(--ease-fade-in-out);
}

.site .toggle:focus-visible {
   outline: 2px solid var(--dark-grey);
   outline-offset: 2px;
   box-shadow: 0 0 0 4px var(--beige);
}

.site .toggle .title {
   position: absolute;
   top: 50%;
   left: 1rem;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--menu-size);
   line-height: 1;
   text-transform: uppercase;
   transform: translateY(-50%);
   transition: opacity 0.35s var(--ease-fade-in-out);
}

.site .toggle .mask {
   display: block;
   height: 1em;
   overflow: hidden;
}

.site .toggle .text {
   display: block;
   transition: transform 0.6s var(--ease-toggle);
}

.site .toggle .text span {
   display: block;
}

.site .toggle .icon {
   position: absolute;
   top: 50%;
   right: 0.75rem;
   display: grid;
   place-items: center;
   width: var(--toggle-icon-box);
   height: var(--toggle-icon-box);
   transform: translateY(-50%) rotate(45deg);
   transition: transform 0.6s var(--ease-toggle);
}

.site .toggle .icon svg {
   width: var(--toggle-icon-size);
   height: var(--toggle-icon-size);
}

.site.is-open .toggle {
   width: var(--burger-size);
}

.site.is-open .toggle::before {
   opacity: 1;
}

.site.is-open .toggle .title {
   opacity: 0;
   transition: opacity 0.2s var(--ease-toggle);
}

.site.is-open .toggle .icon {
   right: calc((var(--burger-size) - var(--toggle-icon-box)) / 2);
   transform: translateY(-50%) rotate(0deg);
}

@media (hover: hover) and (pointer: fine) {
   .site .toggle:hover .text {
      transform: translateY(-1em);
   }

   .site .toggle:hover .icon {
      transform: translateY(-50%) rotate(135deg);
   }

   .site.is-open .toggle:hover .icon {
      transform: translateY(-50%) rotate(90deg);
   }
}

@media (forced-colors: active) {
   .site .toggle {
      border: 1px solid ButtonText;
   }
}

/* Drawer */

.site .drawer {
   position: fixed;
   inset: 0 0 0 auto;
   z-index: 1;
   width: var(--drawer-w);
   visibility: hidden;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   color: var(--beige);
   background-color: var(--dark-grey);
}

.site .drawer .content-wrap {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 1.5rem;
   min-height: 100%;
   padding: 6rem 2.5rem 12rem 3.5rem;
}

.site .drawer .subtitle {
   margin: 0;
   opacity: var(--muted-opacity);
}

.site .drawer .links {
   margin: 0;
   padding: 0;
   list-style: none;
}

.site .drawer .links a {
   position: relative;
   display: inline-block;
   color: inherit;
   font-family: var(--font-title);
   font-size: var(--menu-mobile-size);
   font-weight: 400;
   line-height: 1.15;
   text-decoration: none;
}

.site .drawer .links a span {
   display: block;
   padding: 0.375rem 0;
   border-radius: 2px;
}

.site .drawer .links a:focus-visible {
   outline: none;
   box-shadow: none;
}

.site .drawer .links a:focus-visible span {
   outline: 1px solid currentColor;
   outline-offset: 4px;
}

.site .drawer .divider {
   flex-shrink: 0;
   align-self: stretch;
   height: 1px;
   background-color: var(--beige);
   opacity: 0.2;
   transform-origin: right center;
}

.site .drawer .socials .btn-icon {
   --btn-color: var(--beige);
}

/* Sheets */

.site .sheet {
   position: fixed;
   inset: 0;
   pointer-events: none;
   clip-path: inset(calc(var(--drawer-gap) + var(--stack-step) * var(--sheet-depth)) 0px calc(var(--drawer-gap) + var(--stack-step) * var(--sheet-depth)) var(--drawer-gap) round var(--drawer-radius));
   transition: clip-path 0.51s var(--ease-drawer-close);
}

.site .sheet-back {
   --sheet-depth: 2;
   z-index: 2;
   background-color: var(--sand);
}

.site .sheet-front {
   --sheet-depth: 1;
   z-index: 3;
   background-color: var(--blue);
}

.site:not(.is-active) .sheet {
   visibility: hidden;
}

.site.is-open .sheet {
   clip-path: inset(calc(var(--drawer-gap) + var(--stack-step) * var(--sheet-depth)) calc(var(--drawer-w) + var(--drawer-gap) - var(--stack-step) * var(--sheet-depth)) calc(var(--drawer-gap) + var(--stack-step) * var(--sheet-depth)) var(--drawer-gap) round var(--drawer-radius));
   transition: clip-path 0.8s var(--ease-drawer-open);
   transition-delay: calc(0.035s * var(--sheet-depth));
}

/* Page */

.site .cover {
   position: fixed;
   inset: 0;
   z-index: var(--z-cover);
   width: 100%;
   height: 100%;
   padding: 0;
   background-color: var(--dark-grey);
   border: none;
   opacity: 0;
   pointer-events: none;
   cursor: pointer;
   transition: opacity 0.35s var(--ease-fade-out);
}

.site.is-active .page-wrap {
   clip-path: inset(var(--clip-top, 0px) 0px var(--clip-bottom, 0px) 0px round 0px);
   transition: clip-path 0.51s var(--ease-drawer-close);
}

.site.is-open .page-wrap {
   clip-path: inset(calc(var(--clip-top, 0px) + var(--drawer-gap)) calc(var(--drawer-w) + var(--drawer-gap)) calc(var(--clip-bottom, 0px) + var(--drawer-gap)) var(--drawer-gap) round var(--drawer-radius));
   transition: clip-path 0.8s var(--ease-drawer-open);
}

.site.is-active .drawer {
   visibility: visible;
}

.site.is-dismissing .drawer .content-wrap {
   opacity: 0;
   transition: opacity 0.2s var(--ease-fade-out);
}

.site.is-active .cover {
   pointer-events: auto;
}

.site.is-open .cover {
   opacity: 0.4;
}

@media (max-width: 1024px) {
   .site :is(.toggle, .drawer, .sheet),
   .site .cover {
      display: block;
   }

   .site .page-wrap > :not(.cover) {
      transition: transform 0.51s var(--ease-drawer-close);
   }

   .site.is-open .page-wrap > :not(.cover) {
      transform: translateX(var(--page-shift));
      transition: transform 0.8s var(--ease-drawer-open);
   }
}

@media (max-width: 767px) {
   .site {
      --toggle-w: 5.625rem;
      --toggle-icon-size: 1rem;
      --drawer-w: calc(100% - 10rem);
      --drawer-gap: 0.5rem;
      --stack-step: 0.5rem;
      --page-shift: -2.5rem;
   }

   .site .drawer .content-wrap {
      padding: 5.5rem 2rem 9rem;
   }
}

@media (max-width: 500px) {
   .site {
      --drawer-w: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   header.header .sub-menu,
   header.header .menu-item-has-children:is(:hover, :focus-within):not(.is-dismissed) > .sub-menu,
   header.header .menu-item-has-children > a::after,
   header.header .sub-menu a::before,
   .site .toggle,
   .site .toggle::before,
   .site .toggle .title,
   .site.is-open .toggle .title,
   .site .toggle .text,
   header.header .menu .roll .text,
   header.header .menu > li > a:is(:hover, :focus-visible) .roll .text,
   .site .toggle .icon,
   .site .sheet,
   .site.is-open .sheet,
   .site.is-active .page-wrap,
   .site.is-open .page-wrap,
   .site .page-wrap > :not(.cover),
   .site.is-open .page-wrap > :not(.cover),
   .site .cover,
   .site.is-dismissing .drawer .content-wrap,
   :is(.btn, .btn-icon),
   :is(.btn, .btn-icon) .bg::after,
   .btn-outline .bg,
   .thumbs .thumb,
   .thumbs .thumb .image,
   [data-accordion].is-animated .answer,
   [data-accordion].is-animated .summary .icon::after,
   .wpcf7-form :is(input, select, textarea),
   [data-underline-link]::before,
   [data-underline-link]::after {
      transition: none;
   }
}

@media (scripting: none) {
   .site .toggle {
      display: none;
   }
}


/* FOOTER
   ----------------------------- */

footer.footer {
   position: relative;
   overflow: hidden;
   background-color: var(--dark-grey);
   color: var(--beige);
   font-size: var(--small-text-size);
   line-height: 1.286;
}

footer.footer .watermark {
   position: absolute;
   inset: auto -0.28% 0;
   pointer-events: none;
   transform: translateY(32%);
}

footer.footer .c-wrap {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--content-gap-l);
   min-height: clamp(24rem, calc(21.7143rem + 6.4286vw), 32rem);
   padding-top: 2.625rem;
   padding-bottom: 1.75rem;
}

footer.footer .top-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1.5rem 2.5rem;
}

footer.footer .brand-wrap {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

footer.footer figure.logo svg {
   width: clamp(11.5rem, calc(9.9681rem + 4.8936vw), 14.375rem);
   height: auto;
}

footer.footer .socials .btn-icon {
   --btn-color: var(--beige);
}

footer.footer .contact-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem 1.875rem;
   font-size: var(--small-paragraph-size);
   line-height: 1.467;
}

footer.footer .contact-wrap .info a {
   display: inline-block;
   padding: 0.25rem 0;
   text-decoration: none;
}

footer.footer .contact-wrap .info {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
}

footer.footer .bottom-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem 3.75rem;
}

footer.footer .legal {
   --legal-gap: 0.75rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem var(--legal-gap);
   margin: 0;
   padding: 0;
   list-style: none;
}

footer.footer .legal li {
   display: flex;
   align-items: center;
   gap: var(--legal-gap);
}

footer.footer .legal li + li::before {
   content: "·";
}

html:not([data-consent-ready]) footer.footer .legal li:has(.cky-banner-element) {
   display: none;
}

footer.footer .bottom-wrap a {
   display: inline-block;
   padding: 0.25rem 0;
   text-decoration: none;
}

footer.footer .legal button {
   padding: 0.25rem 0;
   border: 0;
   background: none;
   color: inherit;
   font: inherit;
   cursor: pointer;
}

footer.footer :focus-visible {
   outline-color: var(--beige);
   box-shadow: 0 0 0 2px var(--dark-grey);
}

@media (max-width: 767px) {
   footer.footer .c-wrap {
      gap: 5.625rem;
      min-height: 0;
      padding-top: 2rem;
      padding-bottom: calc(11.26vw + 0.875rem);
      text-align: center;
   }

   footer.footer .top-wrap {
      flex-direction: column;
      align-items: center;
      gap: 2rem;
   }

   footer.footer .contact-wrap {
      justify-content: center;
   }

   footer.footer .contact-wrap .button-wrap {
      justify-content: center;
      width: 100%;
   }

   footer.footer .bottom-wrap {
      flex-direction: column;
      align-items: center;
      row-gap: 0.25rem;
   }

   footer.footer .legal {
      --legal-gap: 0.375rem;
      justify-content: center;
   }

   footer.footer .watermark {
      left: 50%;
      right: auto;
      width: 170%;
      transform: translate(-50%, 32%);
   }
}

@media (max-width: 500px) {
   footer.footer .brand-wrap {
      flex-direction: column;
      align-items: center;
   }
}