* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol,
ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

a {
  text-decoration: none;
  color: inherit;
}

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

button,
input[type=submit],
input[type=reset] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/**
 * ALGORITHM BY: walbo
 * https://github.com/walbo/font-size-clamp/blob/main/utils/clamp-builder.ts
 * -------------------------------------------------------------------------------

 * Generates the clamp for font-size.
 *
 * @param {Number} $minFont - Minimum font size (px)
 * @param {Number} $maxFont - Maximum font size (px)
 * @param {Number} $preferredVwHard - Hard setting the preferred VW part
 * @param {Number} $minWidth - Minimum viewport width for the minimum font size - defaulted to 360px
 * @param {Number} $maxWidth - Maximum viewport width for the maximum font size - defaulted to 1920px
 * @return {Number} - The clamp for font-size
 */
html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
  --scrollbar-color-thumb: rgb(49.6078431373%, 49.6078431373%, 49.6078431373%);
  --scrollbar-color-track: #0a0a0a;
  --scrollbar-width: thin;
  --scrollbar-width-legacy: 10px;
  /* Modern browsers with `scrollbar-*` support */
}
@supports (scrollbar-width: auto) {
  html,
  body {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
    scrollbar-width: var(--scrollbar-width);
  }
}
html,
body {
  /* Legacy browsers with `::-webkit-scrollbar-*` support */
}
@supports selector(::-webkit-scrollbar) {
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
  }
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    max-width: var(--scrollbar-width-legacy);
    max-height: var(--scrollbar-width-legacy);
  }
}
html:has(#price-offer[open]),
body:has(#price-offer[open]) {
  overflow: hidden;
}

body {
  background: #0a0a0a;
  color: #f8f8f8;
  font-family: "Urbanist", sans-serif;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  overflow-x: clip;
}

.button {
  --bg-color: #18181a;
  --text-color: #f8f8f8;
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.93em 2em;
  border-radius: 4em;
  font-weight: var(--font-weight, 500);
}
.button svg path,
.button img {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
.button.long {
  padding: 1.125em 2em;
}
.button.xxl-long {
  padding: 1.125em 4em;
}
.button.green, .button.orange, .button.white {
  --font-weight: 600;
}
.button.green {
  --bg-color: #029800;
}
.button.outline {
  --bg-color: transparent;
  outline: 1px solid #f8f8f8;
}
.button.outline svg path {
  fill: var(--text-color);
}
@media (hover: none) {
  .button.outline {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .button.outline:active {
    --bg-color: #f8f8f8;
    --text-color: #0a0a0a;
  }
  .button.outline:active img {
    filter: invert(1);
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .button.outline:hover {
    --bg-color: #f8f8f8;
    --text-color: #0a0a0a;
  }
  .button.outline:hover img {
    filter: invert(1);
  }
}
.button.orange {
  --bg-color: #ff9800;
}
.button.orange svg path {
  fill: #f8f8f8;
}
.button.white {
  --bg-color: #f8f8f8;
  --text-color: #0a0a0a;
}
.button span.order-1 {
  order: -1;
}

a,
button,
.can-click {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
@media (hover: none) {
  a,
  button,
  .can-click {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  a:active,
  button:active,
  .can-click:active {
    opacity: 0.9;
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  a:hover,
  button:hover,
  .can-click:hover {
    opacity: 0.9;
  }
}

video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

section:not(.wide):not(.default):not(.splide), section.wide > .inner {
  max-width: 1594px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  box-sizing: content-box;
}
section.gray {
  background: #17171a;
}

.section-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: min(0.9em, 20px) min(1.5em, 24px);
  border-radius: 4em;
  border: 1px solid #3d3d3d;
  font-size: 1rem;
  line-height: 1;
}

.split {
  display: grid;
  grid-template-columns: 6.54fr 9.14fr;
  grid-template-rows: auto 1fr;
  gap: 0 clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  grid-template-areas: "pill rightcontent" "leftcontent rightcontent";
}
.split .section-pill {
  grid-area: pill;
}
.split .right .heading {
  font-size: clamp(1.375rem, 1.058rem + 1.41vw, 2.75rem);
  line-height: 1.4;
  font-weight: 600;
  max-width: 34ch;
  text-transform: uppercase;
}
.split .right {
  grid-area: rightcontent;
}
.split .left {
  grid-area: leftcontent;
}
@media only screen and (width <= 48rem) {
  .split {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    grid-template-areas: "pill" "rightcontent" "leftcontent";
  }
  .split:not(:has(.left)) {
    grid-template-areas: "pill" "rightcontent";
  }
  .split:not(:has(.left)) > .left {
    display: none;
  }
  .split .section-pill {
    margin-block-end: 0rem !important;
  }
}

.socials-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.socials-row a {
  padding: 0.625rem;
  border-radius: 100%;
  aspect-ratio: 1;
  height: auto;
  width: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
.socials-row a.x svg,
.socials-row a.x img {
  width: 22px;
}
.socials-row a svg,
.socials-row a img {
  max-width: 100%;
  width: 18px;
  height: auto;
}
@media (hover: none) {
  .socials-row a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .socials-row a:active {
    opacity: 1;
    border-width: 1px;
    border-color: #f8f8f8;
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .socials-row a:hover {
    opacity: 1;
    border-width: 1px;
    border-color: #f8f8f8;
  }
}
@media only screen and (width <= 48rem) {
  .socials-row a {
    width: 2.75rem;
  }
}
@media only screen and (width <= 36rem) {
  .socials-row a {
    width: 2.625rem;
  }
}

hr {
  border: none;
  height: 1px;
  background: #818181;
}

strong {
  font-weight: 700;
}

.no-break {
  white-space: nowrap;
}

.orange-highlight {
  color: #ff9800;
}

.green-highlight {
  color: #029800;
}

.gray-highlight {
  color: #989898;
}

.stats {
  display: grid;
  grid-auto-flow: column;
}
.stats .stat {
  border-left: 1px solid #3d3d3d;
  padding-inline: clamp(1.25rem, 1.077rem + 0.769vw, 2rem) clamp(0.625rem, 0.481rem + 0.641vw, 1.25rem);
  padding-block: clamp(0.5rem, 0.385rem + 0.513vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
}
.stats .stat.gap-sm {
  gap: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
}
.stats .stat .number {
  color: #029800;
  font-size: clamp(1.75rem, 1.462rem + 1.282vw, 3rem);
  line-height: 1.12;
  font-weight: 600;
}
.stats .stat svg {
  height: clamp(3.125rem, 2.837rem + 1.282vw, 4.375rem);
  width: fit-content;
}
.stats .stat small {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
  opacity: 0.7;
}
.stats .stat p {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 26ch;
}

button {
  touch-action: manipulation;
  user-select: none;
}

.splide .splide-track-padding {
  transition: padding-left 0.3s ease-in-out, padding-right 0.3s ease-in-out;
}
.splide.floating-buttons .buttons-group {
  position: absolute;
  width: 100%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  padding-inline: clamp(0.25rem, 0.077rem + 0.769vw, 1rem);
}
.splide.floating-buttons .buttons-group button {
  box-shadow: 0 0 16px rgba(248, 248, 248, 0.07);
}
.splide.floating-buttons .buttons-group button[disabled] {
  visibility: hidden;
}
.splide .slider-controls {
  margin-block-start: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
  display: grid;
  grid-template-columns: 1fr clamp(6.25rem, 3.365rem + 12.821vw, 18.75rem);
  align-items: center;
  gap: 1.25rem;
}
.splide .slider-controls .slider-progress {
  background: #3d3d3d;
  border-radius: 4px;
  overflow: clip;
}
.splide .slider-controls .slider-progress-bar {
  background: #029800;
  height: 6px;
  transition: width 400ms ease;
  width: 0;
  border-radius: 4px;
}
.splide .slider-controls.v2 {
  grid-template-columns: clamp(4.375rem, 2.212rem + 9.615vw, 13.75rem) 1fr clamp(4.375rem, 2.212rem + 9.615vw, 13.75rem);
}
.splide .slider-controls.v2.vertical {
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  margin-block-start: 0;
  gap: 0.875rem;
}
.splide .slider-controls.v2.vertical .slider-progress {
  height: 100%;
  width: 6px;
  margin-inline: auto;
}
.splide .slider-controls.v2.vertical .slider-progress-bar {
  height: 0;
  width: 100%;
  transition: height 400ms ease;
}
.splide .slider-controls.v2.vertical button {
  aspect-ratio: 1;
  rotate: 90deg;
}
.splide .slider-controls.v2 button {
  max-width: clamp(4.375rem, 4.087rem + 1.282vw, 5.625rem);
  padding-block: clamp(0.5rem, 0.428rem + 0.321vw, 0.8125rem);
  outline-color: rgba(248, 248, 248, 0.24);
}
.splide .slider-controls.v2 button svg,
.splide .slider-controls.v2 button img {
  width: clamp(1.25rem, 1.192rem + 0.256vw, 1.5rem);
  height: auto;
  z-index: 2;
  position: relative;
}
.splide .slider-controls.v2 button svg path,
.splide .slider-controls.v2 button img path {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
@media (hover: none) {
  .splide .slider-controls.v2 button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .splide .slider-controls.v2 button:active svg path {
    stroke: #0a0a0a;
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .splide .slider-controls.v2 button:hover svg path {
    stroke: #0a0a0a;
  }
}
.splide .slider-controls.v2 button.slider-prev svg,
.splide .slider-controls.v2 button.slider-prev img {
  transform: scaleX(-1);
}
.splide .slider-controls.v2 button.slider-next {
  margin-inline-start: auto;
}
@media only screen and (width <= 48rem) {
  .splide .slider-controls.v2 button {
    width: 100%;
    padding-inline: 0;
  }
}
.splide button {
  touch-action: manipulation;
}
.splide .buttons-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}
.splide .buttons-group button {
  pointer-events: auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color, #17171a);
  width: clamp(2.5rem, 2.212rem + 1.282vw, 3.75rem);
  height: auto;
  border-radius: 50%;
}
.splide .buttons-group button[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}
.splide .buttons-group button:not(.slider-next) svg {
  transform: scaleX(-1);
}
.splide .buttons-group button svg path {
  stroke: var(--color, #f8f8f8);
}
.splide .buttons-group button.slider-next {
  --bg-color: #f8f8f8;
  --color: #0a0a0a;
}

.animate-inside:not(:has(span.animate-item)) {
  opacity: 0;
}

.marquee {
  --gap: 0.5rem;
  overflow: hidden;
  user-select: none;
  display: flex;
  gap: var(--gap);
  position: relative;
}
@media (hover: none) {
  .marquee.hover-stop {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .marquee.hover-stop:active .content {
    animation-play-state: paused;
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .marquee.hover-stop:hover .content {
    animation-play-state: paused;
  }
}
.marquee .content {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-shrink: 0;
  min-width: 100%;
  animation: scroll var(--speed, 30s) linear infinite;
}
.marquee .content .one-brand {
  aspect-ratio: 9/4;
  width: auto;
  max-height: clamp(5rem, 4.423rem + 2.564vw, 7.5rem);
  background: #17171a;
  border-radius: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  display: flex;
  padding: clamp(0.875rem, 0.731rem + 0.641vw, 1.5rem) clamp(2.188rem, 1.971rem + 0.962vw, 3.125rem);
}
.marquee .content .one-brand img,
.marquee .content .one-brand svg {
  place-self: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: min(200px, 20%);
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to left, transparent, #0a0a0a);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to right, transparent, #0a0a0a);
}

.bw {
  filter: grayscale(1);
}

.half-star {
  position: relative;
  display: grid;
  grid-template-areas: "area";
}
.half-star .bw,
.half-star .half {
  grid-area: area;
}
.half-star .half {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.right-belt,
.down-belt,
.left-belt {
  position: relative;
  overflow: clip;
}
.right-belt svg,
.right-belt img,
.right-belt span,
.down-belt svg,
.down-belt img,
.down-belt span,
.left-belt svg,
.left-belt img,
.left-belt span {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
  display: block;
  line-height: 1.2;
}

.down-belt svg:nth-child(2),
.down-belt img:nth-child(2),
.down-belt span:nth-child(2) {
  --mb: 8px;
  margin-block-end: var(--mb);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.right-belt svg:nth-child(2),
.right-belt img:nth-child(2),
.right-belt span:nth-child(2),
.left-belt svg:nth-child(2),
.left-belt img:nth-child(2),
.left-belt span:nth-child(2) {
  --mr: 0px;
  margin-inline-end: var(--mr);
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}

.left-belt {
  transform: scaleX(-1);
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

button.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: clamp(1.25rem, 1.106rem + 0.641vw, 1.875rem);
  aspect-ratio: 1;
  background: rgba(248, 248, 248, 0.2);
  border-radius: 50%;
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
  font-weight: 600;
  backdrop-filter: blur(3px);
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
  transform-origin: top left;
}

.swal2-confirm.swal2-styled {
  background: #ff9800;
}

.swal2-popup {
  color: #f8f8f8;
}

*:focus-visible {
  outline: 2px solid lightblue;
  outline-offset: 4px;
}

main {
  overflow-x: clip;
}
main section.landing .section-pill {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.1;
}
main section.landing > *:not(.bg) {
  z-index: 2;
}
main section.landing .bg {
  z-index: 1;
}

.landing-edges-gradient::after, .landing-edges-gradient::before {
  z-index: -1;
  content: "";
  position: absolute;
}
.landing-edges-gradient::after {
  top: 0;
  right: 0;
  background: #ff9800;
  width: clamp(12.5rem, 9.615rem + 12.821vw, 25rem);
  height: clamp(18.75rem, 14.423rem + 19.231vw, 37.5rem);
  filter: blur(clamp(5rem, 4.567rem + 1.923vw, 6.875rem));
  transform: translate3d(60%, -30%, 0) rotate(-45deg);
}
.landing-edges-gradient::before {
  bottom: -29vh;
  left: 0;
  background: #029800;
  width: clamp(20rem, 16.683rem + 14.744vw, 34.375rem);
  height: clamp(34.375rem, 30.048rem + 19.231vw, 53.125rem);
  filter: blur(clamp(7.5rem, 6.923rem + 2.564vw, 10rem)) brightness(1.2) contrast(1.7);
  border-radius: 50%;
  transform: translate3d(-50%, 0, 0);
}

.bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  z-index: 2;
}
.bottom-row.align-bottom {
  align-items: flex-end;
}

.rotating-circle-container {
  width: clamp(5.625rem, 5.12rem + 2.244vw, 7.8125rem);
  height: clamp(5.625rem, 5.12rem + 2.244vw, 7.8125rem);
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  --time: 30s;
  --state: playing;
}
.rotating-circle-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 40%;
  height: auto;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating-circle-container svg,
.rotating-circle-container img {
  pointer-events: none;
}
.rotating-circle-container svg {
  animation: rotate var(--time) linear infinite;
  animation-play-state: var(--state, running);
}
.rotating-circle-container text {
  transform-origin: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
}

.effect {
  position: relative;
}
.effect::after {
  content: "";
  height: 100%;
  width: 30%;
  background: #ff9800;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate3d(87%, 0, 0);
  filter: blur(90px);
  z-index: -1;
  rotate: -4deg;
  opacity: 0.5;
}

.hero-more {
  width: min(42.5rem, 100%);
  margin-inline-start: auto;
  margin-block-start: min(4vh, clamp(0.75rem, -0.808rem + 6.923vw, 7.5rem));
  display: flex;
  flex-direction: column;
  gap: min(clamp(1.25rem, 0.846rem + 1.795vw, 3rem), 4vh);
  padding-block-end: min(clamp(2.5rem, 1.779rem + 3.205vw, 5.625rem), 3vh);
}
.hero-more .hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hero-more p {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
}

h1#landing-title {
  font-size: clamp(2.375rem, 1.481rem + 3.974vw, 6.25rem);
  font-weight: 500;
  line-height: 1.08;
  font-weight: 500;
  text-transform: uppercase;
}
h1#landing-title:has(+ span.section-pill) + span.section-pill {
  order: -1;
}

.tags {
  position: absolute;
  top: 0;
  right: 0;
  padding: clamp(0.625rem, 0.538rem + 0.385vw, 1rem);
  font-size: 0.875rem;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}
.tags .tag {
  padding: clamp(0.375rem, 0.317rem + 0.256vw, 0.625rem) clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  background: rgba(10, 10, 10, 0.4);
  border-radius: 2.5rem;
  display: block;
  text-align: center;
  font-weight: 500;
}

.one-study {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  position: relative;
  height: 100%;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
.one-study:has(a:hover) {
  opacity: 0.91;
}
.one-study .visual {
  border-radius: clamp(0.5rem, 0.442rem + 0.256vw, 0.75rem);
  overflow: clip;
  height: 100%;
}
.one-study .visual img,
.one-study .visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}
.one-study h3 {
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
  font-weight: 600;
}
.one-study h3 a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
.one-study .desc {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  color: rgba(248, 248, 248, 0.82);
}
.one-study:hover .right-belt svg:nth-child(1),
.one-study:hover .right-belt img:nth-child(1),
.one-study:hover .right-belt span:nth-child(1),
.one-study:hover .left-belt svg:nth-child(1),
.one-study:hover .left-belt img:nth-child(1),
.one-study:hover .left-belt span:nth-child(1) {
  transform: translate3d(100%, 0, 0);
}
.one-study:hover .right-belt svg:nth-child(2),
.one-study:hover .right-belt img:nth-child(2),
.one-study:hover .right-belt span:nth-child(2),
.one-study:hover .left-belt svg:nth-child(2),
.one-study:hover .left-belt img:nth-child(2),
.one-study:hover .left-belt span:nth-child(2) {
  right: calc(-1 * var(--mr));
}
.one-study:hover .down-belt svg:nth-child(1),
.one-study:hover .down-belt img:nth-child(1),
.one-study:hover .down-belt span:nth-child(1) {
  transform: translate3d(0, 100%, 0);
}
.one-study:hover .down-belt svg:nth-child(2),
.one-study:hover .down-belt img:nth-child(2),
.one-study:hover .down-belt span:nth-child(2) {
  bottom: calc(-1 * var(--mb, 0));
}
.one-study .out-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  font-weight: 600;
  margin-inline-start: auto;
  margin-block-start: -0.625rem;
  --padding-amount: 1rem;
  padding: var(--padding-amount);
  margin-bottom: calc(-1 * var(--padding-amount));
  margin-right: calc(-1 * var(--padding-amount));
}
.one-study .out-link svg path {
  fill: #ff9800;
}
.one-study .title-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

section.case-studies .split .right p {
  font-size: clamp(1.375rem, 1.058rem + 1.41vw, 2.75rem);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
}
section.case-studies .split .right .filtering {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.25rem, 0.846rem + 1.795vw, 3rem);
}
section.case-studies .split .right .filtering button {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
}
section.case-studies .case-studies-splide {
  margin-block-start: clamp(1.25rem, 0.385rem + 3.846vw, 5rem);
}
section.case-studies .case-studies-splide .hidden-slides {
  display: none;
}
section.case-studies .case-studies-splide .project-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
  position: relative;
}
section.case-studies .case-studies-splide .project-card:has(a:hover) img {
  opacity: 0.85;
}
section.case-studies .case-studies-splide .project-card h3 {
  text-transform: uppercase;
  font-size: clamp(1.125rem, 0.923rem + 0.897vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
}
section.case-studies .case-studies-splide .project-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
section.case-studies .case-studies-splide .project-card .visual {
  position: relative;
  overflow: clip;
  border-radius: 0.75rem;
  aspect-ratio: 3/4;
}
section.case-studies .case-studies-splide .project-card .visual img {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
@media only screen and (width <= 48rem) {
  section.case-studies .button:not(.view-more) {
    padding: 0.7em 1.8em;
  }
}
@media only screen and (width <= 36rem) {
  section.case-studies .button:not(.view-more) {
    padding: 0.55em 1.55em;
  }
}
section.case-studies a.view-more {
  justify-self: center;
  margin-block-start: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
  margin-inline: auto;
}

[type=submit]:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.swal2-title,
.swal2-html-container {
  color: black !important;
}

.mt-30 {
  margin-top: 2rem;
}

.right-belt.orange svg {
  fill: #ff9800;
}

.cookies_brand.visible {
  display: none !important;
}

.can-roll-down {
  position: relative;
}

.animation-roll-down img {
  scale: 1.3;
  animation: --zoom-out 700ms ease-in-out forwards;
  animation-delay: 100ms;
}
.animation-roll-down.visual::after,
.animation-roll-down .visual::after {
  animation: --roll-down 800ms ease-in-out forwards;
}

@media (hover: none) {
  *:has(> .down-belt) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  *:has(> .down-belt):active .down-belt svg:nth-child(1),
  *:has(> .down-belt):active .down-belt img:nth-child(1),
  *:has(> .down-belt):active .down-belt span:nth-child(1) {
    transform: translate3d(0, 100%, 0);
  }
  *:has(> .down-belt):active .down-belt svg:nth-child(2),
  *:has(> .down-belt):active .down-belt img:nth-child(2),
  *:has(> .down-belt):active .down-belt span:nth-child(2) {
    bottom: calc(-1 * var(--mb, 0));
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  *:has(> .down-belt):hover .down-belt svg:nth-child(1),
  *:has(> .down-belt):hover .down-belt img:nth-child(1),
  *:has(> .down-belt):hover .down-belt span:nth-child(1) {
    transform: translate3d(0, 100%, 0);
  }
  *:has(> .down-belt):hover .down-belt svg:nth-child(2),
  *:has(> .down-belt):hover .down-belt img:nth-child(2),
  *:has(> .down-belt):hover .down-belt span:nth-child(2) {
    bottom: calc(-1 * var(--mb, 0));
  }
}

@media (hover: none) {
  *:has(> .right-belt),
  *:has(> .left-belt) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  *:has(> .right-belt):active .right-belt svg:nth-child(1),
  *:has(> .right-belt):active .right-belt img:nth-child(1),
  *:has(> .right-belt):active .right-belt span:nth-child(1),
  *:has(> .right-belt):active .left-belt svg:nth-child(1),
  *:has(> .right-belt):active .left-belt img:nth-child(1),
  *:has(> .right-belt):active .left-belt span:nth-child(1),
  *:has(> .left-belt):active .right-belt svg:nth-child(1),
  *:has(> .left-belt):active .right-belt img:nth-child(1),
  *:has(> .left-belt):active .right-belt span:nth-child(1),
  *:has(> .left-belt):active .left-belt svg:nth-child(1),
  *:has(> .left-belt):active .left-belt img:nth-child(1),
  *:has(> .left-belt):active .left-belt span:nth-child(1) {
    transform: translate3d(100%, 0, 0);
  }
  *:has(> .right-belt):active .right-belt svg:nth-child(2),
  *:has(> .right-belt):active .right-belt img:nth-child(2),
  *:has(> .right-belt):active .right-belt span:nth-child(2),
  *:has(> .right-belt):active .left-belt svg:nth-child(2),
  *:has(> .right-belt):active .left-belt img:nth-child(2),
  *:has(> .right-belt):active .left-belt span:nth-child(2),
  *:has(> .left-belt):active .right-belt svg:nth-child(2),
  *:has(> .left-belt):active .right-belt img:nth-child(2),
  *:has(> .left-belt):active .right-belt span:nth-child(2),
  *:has(> .left-belt):active .left-belt svg:nth-child(2),
  *:has(> .left-belt):active .left-belt img:nth-child(2),
  *:has(> .left-belt):active .left-belt span:nth-child(2) {
    right: calc(-1 * var(--mr));
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  *:has(> .right-belt):hover .right-belt svg:nth-child(1),
  *:has(> .right-belt):hover .right-belt img:nth-child(1),
  *:has(> .right-belt):hover .right-belt span:nth-child(1),
  *:has(> .right-belt):hover .left-belt svg:nth-child(1),
  *:has(> .right-belt):hover .left-belt img:nth-child(1),
  *:has(> .right-belt):hover .left-belt span:nth-child(1),
  *:has(> .left-belt):hover .right-belt svg:nth-child(1),
  *:has(> .left-belt):hover .right-belt img:nth-child(1),
  *:has(> .left-belt):hover .right-belt span:nth-child(1),
  *:has(> .left-belt):hover .left-belt svg:nth-child(1),
  *:has(> .left-belt):hover .left-belt img:nth-child(1),
  *:has(> .left-belt):hover .left-belt span:nth-child(1) {
    transform: translate3d(100%, 0, 0);
  }
  *:has(> .right-belt):hover .right-belt svg:nth-child(2),
  *:has(> .right-belt):hover .right-belt img:nth-child(2),
  *:has(> .right-belt):hover .right-belt span:nth-child(2),
  *:has(> .right-belt):hover .left-belt svg:nth-child(2),
  *:has(> .right-belt):hover .left-belt img:nth-child(2),
  *:has(> .right-belt):hover .left-belt span:nth-child(2),
  *:has(> .left-belt):hover .right-belt svg:nth-child(2),
  *:has(> .left-belt):hover .right-belt img:nth-child(2),
  *:has(> .left-belt):hover .right-belt span:nth-child(2),
  *:has(> .left-belt):hover .left-belt svg:nth-child(2),
  *:has(> .left-belt):hover .left-belt img:nth-child(2),
  *:has(> .left-belt):hover .left-belt span:nth-child(2) {
    right: calc(-1 * var(--mr));
  }
}

.can-roll-down .visual,
.animation-roll-down .visual,
.animation-roll-down.visual,
.can-roll-down.visual {
  position: relative;
  overflow: clip;
}

.js .can-roll-down .visual::after,
.js .can-roll-down.visual::after,
.animation-roll-down .visual::after,
.animation-roll-down.visual::after {
  content: "";
  position: absolute;
  background: #0a0a0a;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes --zoom-out {
  from {
    scale: 1.3;
  }
  to {
    scale: 1;
  }
}
@keyframes --roll-down {
  to {
    height: 0;
  }
}
.js .can-fade-up {
  opacity: 0 !important;
}

.animation-fade-up {
  animation: --fade-in-up 400ms ease-in-out forwards;
}

@keyframes --fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, min(20%, 50px), 0);
    filter: blur(8px);
  }
  85% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 14;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
header > .inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  max-width: 1594px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  box-sizing: content-box;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
header > .inner .left a {
  display: block;
}
header > .inner .left img,
header > .inner .left svg {
  width: clamp(8.75rem, 7.143rem + 4.464vw, 12.5rem);
  height: auto;
}
header > .inner .left img #txt,
header > .inner .left svg #txt {
  fill: #f8f8f8;
}
header > .inner .right {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
}
@media (hover: none) {
  header > .inner .right .button.green {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  header > .inner .right .button.green:active {
    opacity: 1;
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  header > .inner .right .button.green:hover {
    opacity: 1;
  }
}
header > .inner .right .nav-menu {
  position: relative;
}
header > .inner .right .nav-menu .open-menu {
  position: relative;
  overflow: clip;
  z-index: 3;
  touch-action: manipulation;
}
header > .inner .right .nav-menu .open-menu .menu-closed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
header > .inner .right .nav-menu .open-menu .menu-open {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
header > .inner .right .nav-menu .open-menu .menu-open svg {
  max-width: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
}
header > .inner .right .nav-menu .open-menu .menu-open.show {
  transform: translate(-50%, -50%);
}
header > .inner .right .nav-menu .open-menu:has(.menu-open.show) {
  --bg-color: transparent;
  border-radius: clamp(0.5rem, 0.413rem + 0.385vw, 0.875rem);
}
header > .inner .right .nav-menu .open-menu:has(.menu-open.show) .menu-closed {
  transform: translateY(-185%);
}
header > .inner .right .nav-menu .menu {
  position: absolute;
  top: 0;
  right: 0;
  width: max-content;
  min-width: 18.125rem;
  background: #18181a;
  padding: clamp(2rem, 1.885rem + 0.513vw, 2.5rem) clamp(2rem, 1.885rem + 0.513vw, 2.5rem) clamp(1.25rem, 1.163rem + 0.385vw, 1.625rem);
  border-radius: clamp(0.5rem, 0.413rem + 0.385vw, 0.875rem);
  scale: 0;
  opacity: 0;
  transform-origin: 90% 10%;
  flex-direction: column;
  gap: 1.875rem;
  display: none;
  transition-property: display, opacity, scale;
  transition-duration: 250ms;
  transition-behavior: allow-discrete;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.03);
  max-width: calc(100vw - 50px);
}
header > .inner .right .nav-menu .menu.show {
  scale: 1;
  opacity: 1;
  display: flex;
}
@starting-style {
  header > .inner .right .nav-menu .menu.show {
    opacity: 0;
    scale: 0;
  }
}
header > .inner .right .nav-menu .menu .button.orange {
  text-align: center;
}
header > .inner .right .nav-menu .menu .top {
  display: flex;
  gap: 1.25rem;
}
header > .inner .right .nav-menu .menu .top small {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.6em;
  opacity: 0.7;
  letter-spacing: 0.4px;
  margin-block-end: 6px;
  display: block;
}
header > .inner .right .nav-menu .menu .top nav.main-nav a {
  width: max-content;
  display: block;
}
header > .inner .right .nav-menu .menu .follow-us {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
header > .inner .right .nav-menu .menu .follow-us small {
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.6;
}
header > .inner .right .nav-menu .menu ul {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.788rem + 0.385vw, 1.25rem);
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
}
header > .inner .right .nav-menu .menu ul li {
  max-width: 12.5rem;
}
@media only screen and (width <= 36rem) {
  header > .inner .right .nav-menu .top {
    flex-direction: column;
  }
  header > .inner .right .nav-menu .menu {
    width: 15rem;
    min-width: unset;
  }
}
@media only screen and (width <= 36rem) {
  header > .inner .right > :not(.nav-menu) {
    display: none;
  }
}
header.scrolled {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(7px);
  box-shadow: 0 2px 20px rgba(248, 248, 248, 0.05);
}
header.scrolled.dir-down .inner {
  padding-block: clamp(0.5rem, 0.413rem + 0.385vw, 0.875rem);
}

main.home + footer,
main.contact + footer,
main.about + footer {
  overflow: clip;
}

footer {
  position: relative;
}
footer .contact-us-component, footer > .inner {
  z-index: 2;
  position: relative;
  overflow: clip;
}
footer > .inner {
  display: flex;
  flex-direction: column;
  max-width: 1594px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  box-sizing: content-box;
  padding-block: clamp(1.875rem, 1.587rem + 1.282vw, 3.125rem) 0;
}
footer > .inner hr {
  margin-block: clamp(2.5rem, 1.923rem + 2.564vw, 5rem) clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
}
footer > .inner .content {
  display: flex;
  gap: clamp(2.5rem, 1.429rem + 2.976vw, 5rem);
  justify-content: space-between;
  container-type: inline-size;
}
footer > .inner .content .left {
  display: flex;
  flex-direction: column;
  gap: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
}
footer > .inner .content .left > svg {
  width: clamp(7.5rem, 6.346rem + 5.128vw, 12.5rem);
  height: auto;
}
footer > .inner .content .right {
  display: flex;
  gap: clamp(2rem, 0.714rem + 3.571vw, 5rem);
}
@container (width < 950px) {
  footer > .inner .content .right {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (width <= 36rem) {
  footer > .inner .content {
    flex-direction: column;
  }
  footer > .inner .content .right {
    grid-template-columns: 1fr;
  }
  footer > .inner .content .left {
    gap: clamp(1.25rem, 0.208rem + 4.63vw, 1.875rem);
  }
}
footer > .inner .content .chunk {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
}
footer > .inner .content .chunk h2 {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  font-weight: 500;
  text-transform: uppercase;
}
footer > .inner .content .chunk .chunk-content {
  color: #b5b6b5;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
footer > .inner .content .chunk .chunk-content .contact-person p {
  line-height: 1.4;
}
footer > .inner .content .chunk .chunk-content .contact-person p:not(:last-child) {
  margin-block-end: clamp(0.25rem, 0.192rem + 0.256vw, 0.5rem);
}
footer > .inner .content .chunk.contact-people .chunk-content .contact-person a {
  padding: 0.25rem;
  margin: -0.25rem;
  white-space: nowrap;
}
footer > .inner .content .chunk nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
footer > .inner .content .chunk nav a {
  padding: 0.25rem 0.375rem;
  margin-inline: -0.375rem;
  width: fit-content;
}
footer > .inner .content .chunk address {
  line-height: 1.4;
}
footer > .inner .footnote {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}
footer > .inner .footnote > * {
  flex: 1;
}
footer > .inner .footnote p:nth-child(2) {
  text-align: center;
}
footer > .inner .footnote p:nth-child(3) {
  text-align: end;
}
@media only screen and (width <= 36rem) {
  footer > .inner .footnote {
    flex-direction: column;
  }
  footer > .inner .footnote p, footer > .inner .footnote p:nth-child(2), footer > .inner .footnote p:nth-child(3) {
    text-align: center;
  }
}
footer .swirl {
  position: absolute;
  top: 2%;
  right: 0;
  width: 100%;
  height: 98%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.24;
}
@media only screen and (width <= 36rem) {
  footer .swirl {
    height: 50%;
    object-position: top center;
  }
}
footer .footerGradientPattern-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translate3d(-50%, 50%, 0);
  opacity: 0.9;
  width: 17.5rem;
  height: 17.5rem;
  filter: blur(90px);
  background: #029800;
  pointer-events: none;
}
footer:has(.footerGradientPattern-2) {
  padding-block-start: 1.25rem;
}
footer:has(.footerGradientPattern-2) .contact-us-component {
  margin-block-start: clamp(0rem, -2.679rem + 7.44vw, 6.25rem);
}
footer .footerGradientPattern-2 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: translate3d(-20%, -35%, 0);
  backface-visibility: hidden;
}
footer .footerGradientPattern-2 img {
  max-width: unset;
}
footer .pattern-type4 svg {
  backface-visibility: hidden;
}
footer .pattern-type4 svg:nth-child(1) {
  transform: translate3d(-55%, -60%, 0);
}
footer .pattern-type4 svg:nth-child(2) {
  transform: translate3d(22%, 56%, 0);
}
@media only screen and (width <= 48rem) {
  footer .pattern-type4 {
    opacity: 0.8;
  }
}
@media only screen and (width <= 36rem) {
  footer .pattern-type4 svg {
    scale: 1.1;
  }
}
footer:has(.pattern-type4) {
  padding-block-start: clamp(0.625rem, -0.096rem + 3.205vw, 3.75rem);
}
footer:has(.footerGradientPattern-3) {
  --top-spacing: clamp(18.75rem, 17.596rem + 5.128vw, 23.75rem);
  padding-block-start: var(--top-spacing);
  margin-block-start: calc(-1 * var(--top-spacing));
}
@media only screen and (width <= 36rem) {
  footer:has(.footerGradientPattern-3) .footerGradientPattern-3 {
    opacity: 0.7;
  }
}
footer .footer-green-blob {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 85%;
}
footer .footer-orange-blob {
  position: absolute;
  bottom: 1.875rem;
  right: 0;
  height: 2400px;
}
footer .logo-typography {
  width: 100%;
  height: auto;
  translate: 0 3%;
  margin-block-start: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
}

section.landing:has(.bg) {
  position: relative;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bg.pattern-type1 .mesh {
  --size: clamp(3.125rem, 2.981rem + 0.641vw, 3.75rem);
  background-size: var(--size) var(--size);
  background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
  width: 100%;
  height: calc(80% + 150px);
  z-index: -1;
  opacity: 0.3;
  position: relative;
}
.bg.pattern-type1 .mesh.mesh-1 {
  transform: translateY(-150px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(black 0%, transparent 48%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 20% 20%;
}
.bg.pattern-type1 .mesh.mesh-2 {
  transform: translateY(-215px);
  -webkit-mask-image: radial-gradient(#0a0a0a 0%, transparent 90%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 57% 57%;
  mask-position: -10% 20%;
}
.bg.pattern-type1 .top-ring {
  --size: 500px;
  width: var(--size);
  height: calc(var(--size) * 1.5);
  border-radius: 50%;
  border: 46px solid #029800;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate3d(-10%, -80%, 0) rotate(13deg) scaleX(5);
  filter: blur(50px);
  opacity: 0.55;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
.bg.pattern-type1 .bottom-glow {
  width: 50%;
  height: 15%;
  bottom: 0;
  left: 0;
  background: #029800;
  position: absolute;
  opacity: 0.6;
  transform: rotate(10deg) translate3d(0, 50%, 0);
  filter: blur(150px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
.bg.pattern-type2 svg,
.bg.pattern-type2 img {
  max-width: unset;
  width: 180%;
  height: 180%;
  position: absolute;
  top: 40%;
  left: 35%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
}
@media only screen and (width <= 48rem) {
  .bg.pattern-type2 svg,
  .bg.pattern-type2 img {
    width: 75rem;
    scale: 1.1;
    transform-origin: top left;
  }
}
.bg.pattern-type3 {
  display: flex;
  flex-direction: column;
  height: fit-content;
  min-height: 100%;
  gap: clamp(1.875rem, 1.01rem + 3.846vw, 5.625rem);
}
.bg.pattern-type3 .line {
  --bg-color: #ff9800;
  opacity: 0.05;
  height: clamp(7.5rem, 6.346rem + 5.128vw, 12.5rem);
  width: 100%;
  background: linear-gradient(to top, transparent, var(--bg-color));
  rotate: -45deg;
  transform-origin: top left;
  mask-image: linear-gradient(to right, transparent 0%, #0a0a0a 15%, #0a0a0a 85%, transparent 100%);
}
.bg.pattern-type3 .line.green {
  --bg-color: #029800;
}
.bg.pattern-type3 .line:nth-child(1) {
  transform: translate3d(-41%, 97%, 0);
}
.bg.pattern-type3 .line:nth-child(2) {
  transform: translate3d(-81%, 130%, 0);
}
.bg.pattern-type3 .line:nth-child(3) {
  transform: translate3d(36%, 110%, 0);
}
.bg.pattern-type3 .line:nth-child(4) {
  transform: translate3d(-44%, 130%, 0);
}
.bg.pattern-type3 .line:nth-child(5) {
  transform: translate3d(70%, 90%, 0);
}
.bg.pattern-type3 .line:nth-child(6) {
  transform: translate3d(-10%, 160%, 0);
}
@media only screen and (width <= 48rem) {
  .bg.pattern-type3 .line {
    opacity: 0.08;
  }
}
.bg.pattern-type4 svg,
.bg.pattern-type4 img {
  position: absolute;
  scale: 1.2;
  transform-origin: top left;
  backface-visibility: hidden;
}
.bg.pattern-type4 svg:nth-child(1),
.bg.pattern-type4 img:nth-child(1) {
  left: 0;
  top: 100%;
  transform: translate3d(-50%, -60%, 0);
}
.bg.pattern-type4 svg:nth-child(2),
.bg.pattern-type4 img:nth-child(2) {
  right: 0;
  bottom: 100%;
  transform: translate3d(15%, 35%, 0);
}
@media only screen and (width <= 48rem) {
  .bg.pattern-type4 {
    opacity: 0.75;
  }
}
.bg.pattern-type6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
}
.bg.pattern-type6 img,
.bg.pattern-type6 svg {
  width: 100%;
  height: auto;
  object-fit: cover;
}

dialog#consultation-reservation {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 950px);
  border-radius: clamp(0.625rem, 0.481rem + 0.641vw, 1.25rem);
  padding: clamp(2rem, 1.769rem + 1.026vw, 3rem) clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  background: #0a0a0a;
  color: #f8f8f8;
  border: none;
  box-shadow: 0 0 10px rgba(248, 248, 248, 0.17);
  flex-direction: column;
  gap: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
  text-align: center;
  container-type: inline-size;
  transition-property: display opacity;
  transition-duration: 200ms;
  transition-behavior: allow-discrete;
  opacity: 0;
}
dialog#consultation-reservation p {
  font-size: clamp(1.75rem, 1.462rem + 1.282vw, 3rem);
  line-height: 1.12;
  line-height: 1.35;
}
dialog#consultation-reservation::backdrop {
  transition: all 250ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
  opacity: 0;
  backdrop-filter: blur(2px);
  transform: translate3d(0, 0, 0);
}
dialog#consultation-reservation[open] {
  display: flex;
  opacity: 1;
}
@starting-style {
  dialog#consultation-reservation[open] {
    opacity: 0;
  }
}
dialog#consultation-reservation[open]::backdrop {
  opacity: 1;
}
dialog#consultation-reservation h2 {
  font-size: clamp(1.375rem, 1.115rem + 1.154vw, 2.5rem);
  line-height: 1.16;
  font-weight: 600;
  text-transform: uppercase;
}
dialog#consultation-reservation button.close-dialog {
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;
  right: clamp(1.5rem, 1.327rem + 0.769vw, 2.25rem);
  top: clamp(1.75rem, 1.577rem + 0.769vw, 2.5rem);
}
dialog#consultation-reservation button.close-dialog .inner {
  position: relative;
  display: block;
}
dialog#consultation-reservation button.close-dialog .line {
  width: 100%;
  height: 3px;
  border-radius: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #f8f8f8;
}
dialog#consultation-reservation button.close-dialog .line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
dialog#consultation-reservation button.close-dialog .line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
dialog#consultation-reservation form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  height: fit-content;
}
dialog#consultation-reservation form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  color: #f8f8f8;
}
dialog#consultation-reservation form .form-group.wide {
  grid-column: 1/-1;
}
dialog#consultation-reservation form .form-group:has(textarea), dialog#consultation-reservation form .form-group:has(input[name=accept]) {
  grid-column: 1/-1;
}
dialog#consultation-reservation form .form-group p,
dialog#consultation-reservation form .form-group label {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
  font-weight: 700;
  text-align: start;
}
dialog#consultation-reservation form .form-group p.consultation-reservation-accept,
dialog#consultation-reservation form .form-group label.consultation-reservation-accept {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
}
dialog#consultation-reservation form .form-group p:has(+ *:required), dialog#consultation-reservation form .form-group p:has(+ div *:required), dialog#consultation-reservation form .form-group p.required,
dialog#consultation-reservation form .form-group label:has(+ *:required),
dialog#consultation-reservation form .form-group label:has(+ div *:required),
dialog#consultation-reservation form .form-group label.required {
  position: relative;
}
dialog#consultation-reservation form .form-group p:has(+ *:required)::after, dialog#consultation-reservation form .form-group p:has(+ div *:required)::after, dialog#consultation-reservation form .form-group p.required::after,
dialog#consultation-reservation form .form-group label:has(+ *:required)::after,
dialog#consultation-reservation form .form-group label:has(+ div *:required)::after,
dialog#consultation-reservation form .form-group label.required::after {
  content: "*";
  color: #d04e4e;
  margin-left: 1px;
}
dialog#consultation-reservation form .form-group input,
dialog#consultation-reservation form .form-group textarea,
dialog#consultation-reservation form .form-group select {
  font: inherit;
  background: rgb(9.9215686275%, 9.9215686275%, 9.9215686275%);
  border: 1px solid #0a0a0a;
  border-radius: 0.8em;
  color: #f8f8f8;
  font-size: 1rem;
  padding: 1.125rem 0.875rem;
  width: 100%;
  line-height: 1.2;
}
dialog#consultation-reservation form .form-group input:focus-visible,
dialog#consultation-reservation form .form-group textarea:focus-visible,
dialog#consultation-reservation form .form-group select:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 4px;
}
dialog#consultation-reservation form .form-group input[type=radio],
dialog#consultation-reservation form .form-group input[type=checkbox] {
  appearance: none;
  aspect-ratio: 1;
  padding: 0;
  position: relative;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
  width: clamp(1.25rem, 1.106rem + 0.641vw, 1.875rem);
  min-width: 20px;
  min-height: 20px;
  background: rgb(9.9215686275%, 9.9215686275%, 9.9215686275%);
}
dialog#consultation-reservation form .form-group input[type=radio]::after,
dialog#consultation-reservation form .form-group input[type=checkbox]::after {
  --size: 76%;
  content: "";
  width: var(--size);
  height: var(--size);
  background: #f8f8f8;
  border-radius: clamp(0.063rem, 0.019rem + 0.192vw, 0.25rem);
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform-origin: top left;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
dialog#consultation-reservation form .form-group input[type=radio]:checked,
dialog#consultation-reservation form .form-group input[type=checkbox]:checked {
  border: 1px solid rgba(248, 248, 248, 0.5);
}
dialog#consultation-reservation form .form-group input[type=radio]:checked::after,
dialog#consultation-reservation form .form-group input[type=checkbox]:checked::after {
  opacity: 1;
}
dialog#consultation-reservation form .form-group input[type=radio]::after {
  border-radius: 50%;
}
dialog#consultation-reservation form .form-group input[type=checkbox] {
  border-radius: clamp(0.188rem, 0.115rem + 0.321vw, 0.5rem);
}
dialog#consultation-reservation form .form-group input[type=checkbox]::after {
  border-radius: clamp(0.063rem, 0.019rem + 0.192vw, 0.25rem);
}
dialog#consultation-reservation form .form-group:has(input[name=accept]) {
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.625rem;
  color: #f8f8f8;
}
dialog#consultation-reservation form .form-group:has(input[name=accept]) a {
  text-decoration: underline;
  color: #f8f8f8;
}
dialog#consultation-reservation form .form-group:has(input[name=accept]) input {
  order: -1;
}
dialog#consultation-reservation form .form-group .services-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
dialog#consultation-reservation form .form-group .services-wrapper label {
  align-items: center;
  gap: 0.625rem;
  display: grid;
  grid-template-columns: auto 1fr;
  font-size: clamp(0.938rem, 0.909rem + 0.128vw, 1.0625rem);
  line-height: 1.5;
}
dialog#consultation-reservation form .form-group .select-wrapper {
  position: relative;
}
dialog#consultation-reservation form .form-group .select-wrapper select {
  appearance: none;
}
dialog#consultation-reservation form .form-group .select-wrapper::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%) scaleY(-1);
  background-image: url("/assets/svg/arrow-dropdown.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}
dialog#consultation-reservation form .form-group textarea {
  resize: vertical;
  min-height: 140px;
  max-height: 250px;
}
dialog#consultation-reservation form .form-group:has(button) {
  grid-column: 1/-1;
}
dialog#consultation-reservation form .form-group:has(button) button {
  margin-inline-start: auto;
}
@container (width < 600px) {
  dialog#consultation-reservation form {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  dialog#consultation-reservation form button {
    margin-block-start: 1.25rem;
  }
}
dialog#consultation-reservation form .double {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
}
@container (width < 600px) {
  dialog#consultation-reservation form .double {
    grid-template-columns: 1fr;
  }
}
dialog#consultation-reservation form .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  background: rgb(9.9215686275%, 9.9215686275%, 9.9215686275%);
  border: 1px solid #0a0a0a;
  border-radius: 8px;
  color: #f8f8f8;
  font-size: 1rem;
  padding: 1.125rem 0.875rem;
  width: 100%;
  line-height: 1.2;
}
dialog#consultation-reservation form .input-wrap:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 4px;
}
dialog#consultation-reservation form .input-wrap .flatpickr-wrapper {
  position: absolute;
  inset: 0;
  display: block;
}
dialog#consultation-reservation form .input-wrap > span {
  flex: 1;
  pointer-events: none;
  color: #f8f8f8;
}
dialog#consultation-reservation form .input-wrap > svg {
  color: #f8f8f8;
  flex-shrink: 0;
  pointer-events: none;
}
dialog#consultation-reservation form .input-wrap input.flatpickr-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
dialog#consultation-reservation form .date-display,
dialog#consultation-reservation form .time-display {
  text-align: left;
}
dialog#consultation-reservation form .flatpickr-calendar {
  background: rgb(11.9215686275%, 11.9215686275%, 11.9215686275%);
  border: 1px solid rgba(248, 248, 248, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #f8f8f8;
}
dialog#consultation-reservation form .flatpickr-calendar.arrowTop::after {
  border-bottom-color: rgb(11.9215686275%, 11.9215686275%, 11.9215686275%);
}
dialog#consultation-reservation form .flatpickr-calendar.arrowBottom::after {
  border-top-color: rgb(11.9215686275%, 11.9215686275%, 11.9215686275%);
}
dialog#consultation-reservation form .flatpickr-calendar.arrowTop::before {
  border-bottom-color: rgba(248, 248, 248, 0.12);
}
dialog#consultation-reservation form .flatpickr-calendar.arrowBottom::before {
  border-top-color: rgba(248, 248, 248, 0.12);
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 0.5rem 0.375rem;
  gap: 0.5rem;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position: static;
  height: auto;
  padding: 0.25rem;
  line-height: 0;
  flex: 0 0 auto;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: rgba(248, 248, 248, 0.7);
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #029800;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-month {
  flex: 1 1 auto;
  height: auto;
  color: #f8f8f8;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month {
  position: static;
  width: auto;
  left: auto;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  padding-top: 2px;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: rgb(11.9215686275%, 11.9215686275%, 11.9215686275%);
  color: #f8f8f8;
  font-weight: 600;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  flex: 0 0 60%;
  border: 1px solid black inset;
  height: 1.75rem;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible {
  outline: none;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: rgb(11.9215686275%, 11.9215686275%, 11.9215686275%);
  color: #f8f8f8;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper {
  width: auto;
  flex: 0 0 30%;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input.cur-year {
  color: #f8f8f8;
  font-weight: 600;
  background: transparent;
  padding: 0 0.125rem;
  border: 1px solid black inset;
  border-radius: 0.25rem;
  height: 1.75rem;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input.cur-year:focus-visible {
  outline: none;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-weekday {
  color: rgba(248, 248, 248, 0.55);
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day {
  color: #f8f8f8;
  border-radius: 6px;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day:hover, dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day:focus {
  background: rgb(17.9215686275%, 17.9215686275%, 17.9215686275%);
  border-color: transparent;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.today {
  border-color: #029800;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.today:hover {
  background: rgb(17.9215686275%, 17.9215686275%, 17.9215686275%);
  color: #f8f8f8;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.selected, dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.selected:hover {
  background: #029800;
  border-color: #029800;
  color: #0a0a0a;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.prevMonthDay, dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: rgba(248, 248, 248, 0.35);
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.flatpickr-disabled, dialog#consultation-reservation form .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: rgba(248, 248, 248, 0.2);
  background: transparent;
}
dialog#consultation-reservation form .flatpickr-calendar .numInputWrapper:hover {
  background: rgba(248, 248, 248, 0.06);
}
dialog#consultation-reservation form .flatpickr-calendar .numInputWrapper span {
  border-color: rgba(248, 248, 248, 0.2);
}
dialog#consultation-reservation form .flatpickr-calendar .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgba(248, 248, 248, 0.6);
}
dialog#consultation-reservation form .flatpickr-calendar .numInputWrapper span.arrowDown::after {
  border-top-color: rgba(248, 248, 248, 0.6);
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-hour:focus-visible,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-minute:focus-visible {
  outline: none;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time {
  border-top: 0;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time:focus {
  outline: 0;
  border: 0;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .numInput,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
  color: #f8f8f8;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .numInput:hover,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .numInput:focus,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus {
  background: rgb(17.9215686275%, 17.9215686275%, 17.9215686275%);
  border-radius: 0.25rem;
}
dialog#consultation-reservation form .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  color: #f8f8f8;
}

main.cstudios-select {
  --content-maxw: calc(1594px / 1.3);
}
main.cstudios-select .title,
main.cstudios-select .description,
main.cstudios-select .subtitle,
main.cstudios-select .index,
main.cstudios-select .section-title,
main.cstudios-select .text-box-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
main.cstudios-select .section-title {
  font-size: clamp(1.875rem, 1.5rem + 1.667vw, 3.5rem);
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 0.5em;
}
main.cstudios-select .section-sub {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
  opacity: 0.8;
  max-width: 58ch;
}
main.cstudios-select .section-header {
  margin-bottom: clamp(2.5rem, 2.212rem + 1.282vw, 3.75rem);
}
main.cstudios-select .bg.pattern-type6 {
  pointer-events: none;
  touch-action: none;
  z-index: 0;
}
main.cstudios-select section.hero {
  padding-top: clamp(7.188rem, 5.5rem + 7.5vw, 14.5rem);
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
  position: relative;
}
main.cstudios-select section.hero .top {
  display: flex;
  flex-direction: column;
  gap: clamp(1.875rem, 1.731rem + 0.641vw, 2.5rem);
  max-width: clamp(25rem, 13.317rem + 51.923vw, 75.625rem);
}
main.cstudios-select section.hero .top h1 {
  font-size: clamp(2.375rem, 1.481rem + 3.974vw, 6.25rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap-style: balance;
}
main.cstudios-select section.hero .bottom {
  display: grid;
  grid-template-columns: 525fr 983fr;
  gap: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
  margin-bottom: clamp(2rem, 1.538rem + 2.051vw, 4rem);
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.hero .bottom {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.hero .text-container {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
  padding-top: clamp(4rem, 3.077rem + 4.103vw, 8rem);
  width: 100%;
  min-width: 0;
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.hero .text-container {
    padding-top: 0;
  }
}
main.cstudios-select section.hero .subtitle {
  font-size: clamp(1.125rem, 0.923rem + 0.897vw, 2rem);
  line-height: 1.2;
  font-weight: 500;
}
main.cstudios-select section.hero .description {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
  opacity: 0.8;
}
main.cstudios-select section.hero .buttons-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media only screen and (width <= 48rem) {
  main.cstudios-select section.hero .buttons-container {
    flex-direction: column;
    align-items: stretch;
  }
  main.cstudios-select section.hero .buttons-container .button {
    width: 100%;
  }
}
main.cstudios-select section.hero .reminder {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  color: #b5b6b5;
  border-left: 2px solid #ff9800;
  padding-left: 1rem;
  max-width: 52ch;
}
main.cstudios-select .point-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.163rem + 0.385vw, 1.625rem);
}
main.cstudios-select .point-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
main.cstudios-select .point-list .mark,
main.cstudios-select .point-list .dot {
  width: 0.625rem;
  height: 0.625rem;
  background: #029800;
  margin-top: 0.55em;
  flex-shrink: 0;
}
main.cstudios-select .point-list .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
main.cstudios-select .point-list strong {
  display: block;
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
main.cstudios-select .point-list span {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  color: #b5b6b5;
}
main.cstudios-select section.brand {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.brand .brand-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 2.269rem + 1.026vw, 3.5rem);
  align-items: start;
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.brand .brand-grid {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.brand .analogy {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
  opacity: 0.85;
  font-style: italic;
  color: #b5b6b5;
  max-width: 42ch;
}
main.cstudios-select section.problem {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.problem .problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 0.673rem + 2.564vw, 3.75rem);
  background: #17171a;
  border: 1px solid rgba(255, 255, 255, 0.0274509804);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 1.462rem + 1.282vw, 3rem) clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
}
@media only screen and (width <= 48rem) {
  main.cstudios-select section.problem .problem-grid {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.problem .description {
  font-size: clamp(1.188rem, 1.144rem + 0.192vw, 1.375rem);
  line-height: 1.4;
  opacity: 0.8;
  text-box-trim: none;
}
main.cstudios-select section.problem .point-list {
  margin-top: clamp(1.5rem, 1.385rem + 0.513vw, 2rem);
}
main.cstudios-select section.steps {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.steps .section-pill {
  margin-bottom: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
}
main.cstudios-select section.steps .section-sub {
  margin-bottom: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
}
main.cstudios-select section.steps ol {
  display: grid;
  gap: 1.875rem;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.steps ol {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (width <= 36rem) {
  main.cstudios-select section.steps ol {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.steps li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.1;
  background-color: #17171a;
  border-radius: clamp(0.5rem, 0.442rem + 0.256vw, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.0274509804);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
@media (hover: none) {
  main.cstudios-select section.steps li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  main.cstudios-select section.steps li:active {
    transform: translateY(-4px);
    border-color: rgba(2, 152, 0, 0.35);
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  main.cstudios-select section.steps li:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 152, 0, 0.35);
  }
}
main.cstudios-select section.steps .index {
  color: #029800;
}
main.cstudios-select section.steps strong {
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
}
main.cstudios-select section.steps .description {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  opacity: 0.8;
}
main.cstudios-select section.eligibility {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.eligibility .inner {
  background-color: #17171a;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.875rem, 1.558rem + 1.41vw, 3.25rem);
  padding: clamp(1.75rem, 1.462rem + 1.282vw, 3rem) clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.eligibility .inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
main.cstudios-select section.eligibility .elig-figure {
  font-size: clamp(2.5rem, 2.038rem + 2.051vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  color: #ff9800;
  white-space: nowrap;
}
main.cstudios-select section.eligibility .elig-figure .prefix {
  margin-right: 0.12em;
}
main.cstudios-select section.eligibility .elig-figure .label {
  display: block;
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  color: #b5b6b5;
  font-weight: 400;
  margin-top: 0.625rem;
  white-space: normal;
}
main.cstudios-select section.catalog {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.catalog .section-pill {
  margin-bottom: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
}
main.cstudios-select section.catalog .section-title {
  max-width: 18ch;
}
main.cstudios-select section.catalog .catalog-copy p + p {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
  opacity: 0.75;
  max-width: 56ch;
  margin-top: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  margin-bottom: clamp(1.75rem, 1.577rem + 0.769vw, 2.5rem);
}
main.cstudios-select section.pricing {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.pricing .section-pill {
  margin-bottom: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
}
main.cstudios-select section.pricing .pricing-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.75rem, 1.462rem + 1.282vw, 3rem);
  align-items: start;
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.pricing .pricing-grid {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.pricing .base-card,
main.cstudios-select section.pricing .calc {
  background: #17171a;
  border: 1px solid rgba(255, 255, 255, 0.0274509804);
  border-radius: clamp(0.625rem, 0.481rem + 0.641vw, 1.25rem);
  padding: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem) clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
}
main.cstudios-select section.pricing .base-price {
  font-size: clamp(2.25rem, 1.962rem + 1.282vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
main.cstudios-select section.pricing .base-price .sup {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  color: #b5b6b5;
  font-weight: 400;
}
main.cstudios-select section.pricing .base-subtitle {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
  opacity: 0.75;
  margin: 0.5rem 0 clamp(1.25rem, 1.135rem + 0.513vw, 1.75rem);
}
main.cstudios-select section.pricing .benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
}
main.cstudios-select section.pricing .benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
main.cstudios-select section.pricing .benefits svg {
  width: 1em;
  height: 1em;
  color: #029800;
  flex-shrink: 0;
  margin-top: 0.2em;
}
main.cstudios-select section.pricing .calc h3 {
  font-size: clamp(1.125rem, 0.923rem + 0.897vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
main.cstudios-select section.pricing .calc-hint {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  color: #b5b6b5;
  margin-bottom: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
}
main.cstudios-select section.pricing .calc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.625rem;
  align-items: start;
  padding: 1rem 0.875rem;
  margin-inline: -0.875rem;
  border-top: 1px solid #3d3d3d;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
@media (hover: none) {
  main.cstudios-select section.pricing .calc-row {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  main.cstudios-select section.pricing .calc-row:active {
    background-color: rgba(248, 248, 248, 0.03);
  }
}
@media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  main.cstudios-select section.pricing .calc-row:hover {
    background-color: rgba(248, 248, 248, 0.03);
  }
}
main.cstudios-select section.pricing .calc-row input[type=checkbox] {
  appearance: none;
  aspect-ratio: 1;
  padding: 0 !important;
  position: relative;
  width: clamp(1.25rem, 1.106rem + 0.641vw, 1.875rem);
  min-width: 20px;
  min-height: 20px;
  background: #242424;
  border: 1px solid #0a0a0a;
  border-radius: clamp(0.188rem, 0.115rem + 0.321vw, 0.5rem);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.pricing .calc-row input[type=checkbox]::after {
  --size: 76%;
  content: "";
  width: var(--size);
  height: var(--size);
  background: #f8f8f8;
  border-radius: clamp(0.063rem, 0.019rem + 0.192vw, 0.25rem);
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform-origin: top left;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.pricing .calc-row input[type=checkbox]:checked {
  border: 1px solid rgba(248, 248, 248, 0.5);
}
main.cstudios-select section.pricing .calc-row input[type=checkbox]:checked::after {
  opacity: 1;
}
main.cstudios-select section.pricing .calc-row input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 3px;
}
main.cstudios-select section.pricing .calc-row input[type=checkbox] {
  margin-top: 3px;
}
main.cstudios-select section.pricing .calc-row .text-container {
  min-width: 0;
}
main.cstudios-select section.pricing .calc-row .rowtitle {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  font-weight: 500;
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
}
main.cstudios-select section.pricing .calc-row .rowdesc {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  color: #b5b6b5;
  margin-top: 0.25rem;
  display: block;
}
main.cstudios-select section.pricing .calc-row .rowprice {
  color: #029800;
  white-space: nowrap;
  font-weight: 600;
}
main.cstudios-select section.pricing .calc-total {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3d3d3d;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
main.cstudios-select section.pricing .calc-total .label {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  color: #b5b6b5;
}
main.cstudios-select section.pricing .calc-total .label small {
  display: block;
  font-size: 0.875rem;
  line-height: 1.6;
}
main.cstudios-select section.pricing .calc-total .amount {
  font-size: clamp(1.75rem, 1.577rem + 0.769vw, 2.5rem);
  font-weight: 500;
  color: #ff9800;
}
main.cstudios-select section.pricing .calc-cta {
  margin-top: 1.25rem;
  width: 100%;
}
main.cstudios-select section.compare {
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
main.cstudios-select section.compare .table-wrap {
  width: 100%;
  overflow-x: auto;
}
main.cstudios-select section.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  min-width: 40rem;
}
main.cstudios-select section.compare th,
main.cstudios-select section.compare td {
  text-align: left;
  padding: 1rem 0.875rem;
  border-bottom: 1px solid #3d3d3d;
  vertical-align: top;
}
main.cstudios-select section.compare th {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
  font-weight: 600;
}
main.cstudios-select section.compare th:last-child {
  color: #029800;
}
main.cstudios-select section.compare td:first-child,
main.cstudios-select section.compare th:first-child {
  color: #b5b6b5;
  font-weight: 500;
}
main.cstudios-select section.compare td.hi {
  color: #029800;
  font-weight: 500;
}
@media only screen and (width <= 48rem) {
  main.cstudios-select section.compare .table-wrap {
    overflow-x: visible;
  }
  main.cstudios-select section.compare table,
  main.cstudios-select section.compare tbody,
  main.cstudios-select section.compare tbody tr,
  main.cstudios-select section.compare tbody th,
  main.cstudios-select section.compare tbody td {
    display: block;
  }
  main.cstudios-select section.compare table {
    min-width: 0;
  }
  main.cstudios-select section.compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  main.cstudios-select section.compare tbody tr {
    border: 1px solid #3d3d3d;
    border-radius: 0.75rem;
    padding: 1rem;
  }
  main.cstudios-select section.compare tbody tr:not(:last-child) {
    margin-bottom: 1rem;
  }
  main.cstudios-select section.compare tbody th,
  main.cstudios-select section.compare tbody td {
    padding: 0;
    border-bottom: 0;
  }
  main.cstudios-select section.compare tbody th {
    font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
    line-height: 1.4;
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #3d3d3d;
  }
  main.cstudios-select section.compare tbody td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.625rem 0;
  }
  main.cstudios-select section.compare tbody td::before {
    content: attr(data-label);
    color: #818181;
    font-weight: 500;
    flex-shrink: 0;
  }
}
main.cstudios-select section.faq {
  display: grid;
  grid-template-columns: 530fr 1014fr;
  gap: 2.5rem;
  margin-bottom: clamp(3.875rem, 3.038rem + 3.718vw, 7.5rem);
}
@media only screen and (width <= 75rem) {
  main.cstudios-select section.faq {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
main.cstudios-select section.faq .section-header .section-pill {
  margin-bottom: clamp(1.5rem, 1.269rem + 1.026vw, 2.5rem);
}
main.cstudios-select section.faq ol li {
  display: flex;
  gap: clamp(1.563rem, 1.202rem + 1.603vw, 3.125rem);
  width: 100%;
}
main.cstudios-select section.faq ol li:not(:last-child) {
  margin-bottom: 1.625rem;
}
main.cstudios-select section.faq .index {
  border-radius: 31.25rem;
  border: 1px solid #029800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
  background-color: #0a0a0a;
  width: 3.75rem;
  height: 3.75rem;
  max-width: 3.75rem;
  max-height: 3.75rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  transition: background-color 200ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.faq .index.highlight {
  background-color: #029800;
}
main.cstudios-select section.faq .accordion-container {
  width: 99%;
  display: block;
}
main.cstudios-select section.faq .accordion-title {
  font-size: clamp(1.125rem, 0.923rem + 0.897vw, 2rem);
  line-height: 1.2;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1.875rem;
  border-bottom: 1px solid #3d3d3d;
  padding-bottom: 1rem;
  text-align: left;
}
main.cstudios-select section.faq .accordion-title:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 4px;
}
main.cstudios-select section.faq .accordion-title .arrow-dropdown {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  transform: rotateZ(180deg);
  flex-shrink: 0;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.faq .accordion-title .arrow-dropdown.rotate {
  transform: rotateZ(0deg);
}
main.cstudios-select section.faq .accordion-content .inner {
  font-size: clamp(0.938rem, 0.923rem + 0.064vw, 1rem);
  line-height: 1.5;
  padding-top: 1rem;
  opacity: 0.85;
  max-width: 64ch;
}
main.cstudios-select section.final {
  margin-bottom: clamp(3.75rem, 2.019rem + 7.692vw, 11.25rem);
  position: relative;
  z-index: 2;
}
main.cstudios-select section.final .inner {
  display: grid;
  grid-template-columns: 766fr 749fr;
  gap: clamp(2.5rem, 2.125rem + 1.667vw, 4.125rem);
}
@media only screen and (width <= 62rem) {
  main.cstudios-select section.final .inner {
    grid-template-columns: 1fr;
  }
}
main.cstudios-select section.final .text-container .description {
  font-size: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);
  line-height: 1.24;
  color: #b5b6b5;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: clamp(1.75rem, 1.577rem + 0.769vw, 2.5rem);
}
main.cstudios-select section.final .form-container {
  border-radius: 1.5rem;
  background-color: #17171a;
  padding-block: clamp(2rem, 1.769rem + 1.026vw, 3rem);
  padding-inline: clamp(1rem, 0.654rem + 1.538vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
main.cstudios-select section.final .form-container > label {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  line-height: 1.4;
  font-weight: 600;
}
main.cstudios-select section.final .form-container > label span:has(+ input:required)::after,
main.cstudios-select section.final .form-container > label span:has(+ textarea:required)::after {
  content: "*";
  color: #d04e4e;
  margin-left: 2px;
}
main.cstudios-select section.final .form-container input[type=text],
main.cstudios-select section.final .form-container input[type=email],
main.cstudios-select section.final .form-container input[type=tel],
main.cstudios-select section.final .form-container textarea {
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid hsla(0, 0%, 100%, 0.24);
  padding-block: 1.125rem;
  padding-inline: 1rem;
  color: white;
  font-size: 1rem;
  font: inherit;
  transition: border-color 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.final .form-container input[type=text]:focus-visible,
main.cstudios-select section.final .form-container input[type=email]:focus-visible,
main.cstudios-select section.final .form-container input[type=tel]:focus-visible,
main.cstudios-select section.final .form-container textarea:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 4px;
}
main.cstudios-select section.final .form-container textarea {
  min-height: 8.75rem;
  resize: vertical;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.625rem;
  align-items: start;
  color: #f8f8f8;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox] {
  appearance: none;
  aspect-ratio: 1;
  padding: 0 !important;
  position: relative;
  width: clamp(1.25rem, 1.106rem + 0.641vw, 1.875rem);
  min-width: 20px;
  min-height: 20px;
  background: #242424;
  border: 1px solid #0a0a0a;
  border-radius: clamp(0.188rem, 0.115rem + 0.321vw, 0.5rem);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox]::after {
  --size: 76%;
  content: "";
  width: var(--size);
  height: var(--size);
  background: #f8f8f8;
  border-radius: clamp(0.063rem, 0.019rem + 0.192vw, 0.25rem);
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform-origin: top left;
  transition: all 150ms ease, outline-offset 1ms, outline 1ms, transform-origin 1ms;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox]:checked {
  border: 1px solid rgba(248, 248, 248, 0.5);
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox]:checked::after {
  opacity: 1;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(248, 248, 248, 0.95);
  outline-offset: 3px;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) input[type=checkbox] {
  margin: 0;
  grid-column: 1;
  grid-row: 1;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) label {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  line-height: 1.5;
  font-weight: 400;
  display: block;
  text-align: start;
  grid-column: 2;
  grid-row: 1;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) label a {
  text-decoration: underline;
  color: #f8f8f8;
}
main.cstudios-select section.final .form-container .form-group:has(input[name=accept]) label:has(+ *:required)::after {
  content: "*";
  color: #d04e4e;
  margin-left: 1px;
}
main.cstudios-select section.final .form-container .button {
  width: 100%;
}
main.cstudios-select .custom-footer-decoration {
  position: absolute;
  left: 0;
  width: 100vw;
  height: auto;
  aspect-ratio: 1728/680;
  opacity: 24%;
  transform: translateY(-380px);
  z-index: -1;
  pointer-events: none;
}
@media only screen and (width <= 48rem) {
  main.cstudios-select .custom-footer-decoration {
    transform: translateY(0);
  }
}
main.cstudios-select .custom-footer-decoration img {
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  main.cstudios-select section.steps li {
    transition: none;
  }
  main.cstudios-select section.steps li:hover {
    transform: none;
  }
}

.thank-you {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 1.106rem + 0.641vw, 1.875rem);
  padding-inline: 1rem;
}
.thank-you .checkmark-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-check 0.8s ease-in-out forwards;
  animation-delay: 0.5s;
}
@keyframes draw-check {
  to {
    stroke-dashoffset: 0;
  }
}
.thank-you .checkmark {
  color: #029800;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}
.thank-you h1 {
  font-size: clamp(1.5rem, 1.212rem + 1.282vw, 2.75rem);
  font-weight: 600;
  text-wrap-style: balance;
  text-align: center;
}
.thank-you p {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  text-wrap-style: balance;
  text-align: center;
}
.thank-you .toast {
  position: fixed;
  bottom: 1rem;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.thank-you .toast .inner {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem;
  border-radius: 0.75rem;
  background-color: rgba(23, 23, 26, 0.5647058824);
  width: max-content;
  transition: width 100ms ease-out;
}
.thank-you .toast p {
  font-size: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  display: flex;
  gap: 0.25em;
}
.thank-you .toast .timeout-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(0);
  height: 2px;
  background-color: #029800;
  transition: transform 0.8s ease-out;
}