@font-face {
  font-family: "FoundersGroteskWeb-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("FoundersGroteskWeb-Regular.woff2") format("woff2");
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}

:root {
  --black: #000;
  --white: #FFF;
  --gray: #808080;
  --gray-dark: #333132;
  --gray-darkest: #1A1A1A;
  --beige-light: #EDECEA;
  --beige: #E4DCDA;
  --beige-dark: #D8CBC5;
  --beige-darkest: #BDA8A3;
  --pad-small: 4rem;
  --pad-large: 6rem;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}
@media (orientation: portrait) {
  :root {
    --pad-small: 2rem;
    --pad-large: 4rem;
  }
}

html {
  font-size: 1vw;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (orientation: portrait) {
  html {
    font-size: 2.5vw;
  }
}

body {
  font-family: "FoundersGroteskWeb-Regular", sans-serif;
  background-color: #f5f5f5;
  color: #333;
  font-size: 1.4rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

.line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
  transform-origin: left;
}
.line.sm::after {
  width: 7rem;
}
.line.md::after {
  width: 9rem;
}
.line.lg::after {
  width: 12rem;
}

.offwhite {
  background: var(--beige-light);
}

.gray {
  background: var(--gray);
}

.black {
  background: var(--black);
}

.beige {
  background: var(--beige);
}

.beige-darkest {
  background: var(--beige-darkest);
}

.beige-dark {
  background: var(--beige-dark);
}

input {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 0;
  color: var(--gray-dark);
}
input::placeholder {
  color: var(--gray);
}

input, ::placeholder {
  font-family: "FoundersGroteskWeb-Regular", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

button, a.btn {
  font-size: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}
button.plus, a.btn.plus {
  background: var(--beige-darkest);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
button.plus::before, button.plus::after, a.btn.plus::before, a.btn.plus::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 2px;
  background: white;
}
button.plus::before, a.btn.plus::before {
  transform: rotate(90deg);
}
button.close, a.btn.close {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
button.close::before, button.close::after, a.btn.close::before, a.btn.close::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 2px;
  background: black;
  transform: rotate(45deg);
}
button.close::before, a.btn.close::before {
  transform: rotate(-45deg);
}

a, button {
  text-decoration: none;
  color: inherit;
}
a:hover .line::after, button:hover .line::after {
  transform: scaleX(1.2);
}

p {
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
p.line {
  padding-bottom: 1.2rem;
}

small {
  font-size: 1rem;
}

h1, h2, h3, h4, h5, small, button {
  font-family: "FoundersGroteskWeb-Regular", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

h1, h2, h3, small {
  text-transform: uppercase;
}

h1 {
  font-size: 2.5rem;
}
h1.line {
  padding-bottom: 1.2rem;
}

h2 {
  font-size: 1.6rem;
}
h2.line {
  padding-bottom: 1.6rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.4rem;
}

.weight-600 {
  font-weight: 600;
}

.weight-800 {
  font-weight: 800;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.splide .splide__arrow {
  background: transparent;
}
.splide .splide__arrow svg {
  height: 0.8em;
  width: 0.8em;
}

body > nav {
  position: fixed;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-small);
  --color: white;
  transition: transform 0.6s var(--ease);
}
body > nav:not(:has(input:checked)).hide {
  transform: translateY(-100%);
}
body > nav:not(:has(input:checked)).inverted-colors > label, body > nav:not(:has(input:checked)).inverted-colors .logo {
  filter: invert(1);
}
body > nav:not(:has(input:checked)).intermediate-scroll {
  background: var(--black);
  padding: 1rem var(--pad-small);
}
body > nav:not(:has(input:checked)).intermediate-scroll .logo {
  height: 1.5rem;
}
body > nav:not(:has(input:checked)).intermediate-scroll label[for=menu], body > nav:not(:has(input:checked)).intermediate-scroll label[for=search] {
  transform: scale(0.75);
}
body > nav:not(:has(input:checked)).intermediate-scroll.inverted-colors > label, body > nav:not(:has(input:checked)).intermediate-scroll.inverted-colors .logo {
  filter: none;
}
body > nav > label {
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
  z-index: 3;
}
body > nav > label input {
  display: none;
}
body > nav label[for=menu] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body > nav label[for=menu] span {
  width: 100%;
  height: 2px;
  background: var(--color);
  transition: transform 0.3s ease-in-out;
}
body > nav label[for=menu] span:nth-of-type(1) {
  transform-origin: top left;
}
body > nav label[for=menu] span:nth-of-type(3) {
  transform-origin: bottom left;
}
body > nav label[for=search]::before {
  content: "";
  display: block;
  height: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--color);
  transition: 0.6s var(--ease);
}
body > nav label[for=search]::after {
  content: "";
  display: block;
  height: 2px;
  width: 37%;
  background: var(--color);
  transform: rotate(29deg);
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: bottom right;
  transition: 0.6s var(--ease);
}
body > nav > a {
  display: flex;
}
body > nav .logo {
  height: 2rem;
  fill: var(--color);
  z-index: 3;
}
body > nav .fj {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem var(--pad-large);
  background: var(--gray-darkest);
  opacity: 1;
}
body > nav .fj img {
  height: 2.5rem;
}
body > nav menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gray-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4vh;
  padding: 10rem var(--pad-large) var(--pad-large) var(--pad-large);
  color: white;
  transform: translateY(-100vh);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s ease;
}
body > nav menu .hidden-element {
  position: absolute;
  top: 10rem;
  z-index: 5;
  width: 50rem;
  height: 30rem;
  align-self: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s var(--ease);
}
body > nav menu .hidden-element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body > nav menu .hover-show-up:hover + .hidden-element {
  pointer-events: all;
  opacity: 1;
}
body > nav menu details span {
  position: absolute;
  top: 0;
  left: 20rem;
  z-index: 4;
}
@media (orientation: portrait) {
  body > nav menu details span {
    left: 15rem;
  }
}
body > nav menu details span.cols {
  column-count: 2;
  column-gap: 1rem;
}
@media (orientation: portrait) {
  body > nav menu details span.cols {
    column-count: 1;
  }
}
body > nav menu details span.rows {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 62rem;
}
@media (orientation: portrait) {
  body > nav menu details span.rows {
    width: 18rem;
  }
}
body > nav menu details img {
  width: 30rem;
  aspect-ratio: 16/9;
  object-fit: cover;
}
@media (orientation: portrait) {
  body > nav menu details img {
    width: 100%;
  }
}
body > nav menu details[open] summary {
  opacity: 1;
}
body > nav menu a, body > nav menu summary {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  opacity: 0.5;
  display: block;
  white-space: nowrap;
  user-select: none;
}
body > nav menu a:hover, body > nav menu summary:hover {
  opacity: 1;
}
body > nav menu summary {
  cursor: pointer;
}
body > nav menu summary::marker {
  content: none;
}
body > nav menu summary::after {
  content: " +";
}
body > nav form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 10rem var(--pad-small) var(--pad-small) var(--pad-small);
  background: var(--gray-darkest);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s ease;
}
body > nav form > div {
  display: flex;
  height: 3.5rem;
  gap: 2rem;
  padding: 0 20rem;
}
body > nav form > div input {
  height: 100%;
}
body > nav form > div button {
  height: 100%;
  background: var(--black);
  color: var(--white);
  padding: 1rem 1rem;
  font-size: 1.2rem;
}
@media (orientation: portrait) {
  body > nav form div {
    padding: 0 var(--pad-small);
  }
}

body:has(#menu:checked) > nav {
  mix-blend-mode: normal;
}
body:has(#menu:checked) > nav label[for=menu] span:nth-of-type(1) {
  transform: translateX(15%) rotate(45deg);
}
body:has(#menu:checked) > nav label[for=menu] span:nth-of-type(2) {
  transform: scaleX(0);
}
body:has(#menu:checked) > nav label[for=menu] span:nth-of-type(3) {
  transform: translateX(15%) rotate(-45deg);
}
body:has(#menu:checked) > nav label[for=search] {
  opacity: 0;
  pointer-events: none;
}
body:has(#menu:checked) > nav menu {
  transform: translateY(0);
  opacity: 1;
}
body:has(#menu:checked) > nav .logo {
  opacity: 0.5;
}

body:has(#search:checked) > nav {
  mix-blend-mode: normal;
}
body:has(#search:checked) > nav label[for=search]::before, body:has(#search:checked) > nav label[for=search]::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2px;
  background: white;
  border: 0;
  border-radius: 0;
  transform: translate(-0.3rem, -0.1rem) rotate(45deg);
}
body:has(#search:checked) > nav label[for=search]::before {
  transform: translate(0rem, 0.6rem) rotate(-45deg);
}
body:has(#search:checked) > nav label[for=menu] {
  opacity: 0;
  pointer-events: none;
}
body:has(#search:checked) > nav form {
  transform: translateY(0);
  opacity: 1;
}

div.accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: min-content;
  width: 100%;
}
div.accordion details {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
div.accordion details summary {
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beige-light);
  transition: opacity 0.4s var(--ease);
  padding-top: 0.5rem;
}
div.accordion details summary::marker, div.accordion details summary::-webkit-details-marker {
  content: none;
  display: none;
}
div.accordion > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
  width: 100%;
}
div.accordion > div > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--beige-light);
  padding-block: 0 0.5rem;
  overflow: hidden;
  color: var(--beige-light);
}
div.accordion > div > div img, div.accordion > div > div a, div.accordion > div > div p, div.accordion > div > div small {
  opacity: 0;
}
div.accordion > div > div a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
div.accordion > div > div a img {
  width: 1.1rem;
  height: 1.1rem;
}
div.accordion:has(details[open]) > div {
  grid-template-rows: 1fr;
}
div.accordion:has(details[open]) > div img, div.accordion:has(details[open]) > div a, div.accordion:has(details[open]) > div p, div.accordion:has(details[open]) > div small {
  opacity: 1;
}
div.accordion.align-center {
  align-items: center;
}
div.accordion.align-center details {
  text-align: center;
}
div.accordion.align-center > div > div {
  align-items: center;
}
div.accordion.black-color details summary {
  color: var(--black);
}
div.accordion.black-color > div > div {
  border-bottom: 1px solid var(--black);
  color: var(--black);
}

section.abertura {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: black;
}
@media (orientation: portrait) {
  section.abertura {
    grid-template-columns: 1fr;
  }
}
section.abertura a {
  display: flex;
  justify-content: center;
  align-items: center;
}
section.abertura a:hover .bg {
  opacity: 0.5;
}
section.abertura a:hover p {
  opacity: 1;
}
section.abertura a:first-of-type .logo {
  height: 2rem;
}
section.abertura a:first-of-type p::before {
  content: "";
  display: block;
  width: 85%;
  height: 2px;
  margin-bottom: 1rem;
  background: white;
}
section.abertura a:last-of-type .logo {
  height: 5rem;
}
section.abertura .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transition: opacity 0.6s;
}
section.abertura p {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  bottom: 4rem;
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s;
}

section.video {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  padding: 8rem 6rem;
  height: 100vh;
  color: white;
}
section.video h4 {
  padding-top: 1.5rem;
}
section.video img, section.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
section.video.align-content-left {
  justify-content: flex-start;
}
section.video.align-content-center {
  justify-content: center;
}
section.video.align-content-right {
  justify-content: flex-end;
}

section.video-only {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--pad-large) var(--pad-small);
}
section.video-only img, section.video-only video, section.video-only iframe {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  cursor: pointer;
}
section.video-only.lg-side-pad {
  padding: var(--pad-large) var(--pad-large);
}
section.video-only:has(.video-thumbnail)::before, section.video-only:has(.video-thumbnail)::after {
  content: "";
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
section.video-only:has(.video-thumbnail)::before {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--beige-darkest);
}
section.video-only:has(.video-thumbnail)::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 1rem solid var(--white);
  transform: translateX(0.15rem);
}

section.slider {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: var(--pad-small);
  align-items: center;
  padding: var(--pad-large);
}
@media (orientation: portrait) {
  section.slider {
    grid-template-columns: 1fr;
  }
  section.slider div:last-of-type {
    order: -1;
  }
}
section.slider.inverted {
  grid-template-columns: 5fr 1fr;
}
section.slider.inverted div:last-of-type {
  order: -1;
}
@media (orientation: portrait) {
  section.slider.inverted {
    grid-template-columns: 1fr;
  }
}
section.slider img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
section.slider p {
  margin-top: 1rem;
}
section.slider .splide__pagination {
  justify-content: flex-end;
}

section.links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 0 var(--pad-large) 0;
}
@media (orientation: portrait) {
  section.links {
    grid-template-columns: 1fr;
    gap: var(--pad-small);
  }
}
section.links a {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 60rem;
  transition: background 0.6s, opacity 0.6s;
}
@media (orientation: portrait) {
  section.links a {
    height: 35rem;
  }
}
section.links a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
}
section.links a:first-of-type img {
  padding: var(--pad-large) var(--pad-small);
}
section.links a:first-of-type h2 {
  margin-left: var(--pad-small);
}
section.links a:last-of-type h2 {
  margin: var(--pad-small);
}

section.grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: var(--pad-large) var(--pad-small);
  background: var(--beige);
}
section.grid > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  padding-top: 2rem;
}
section.grid > div > a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
section.grid > div > a.column-span-2 {
  grid-column: span 2;
}
@media (orientation: portrait) {
  section.grid > div {
    grid-template-columns: 1fr;
  }
  section.grid > div > a.column-span-2 {
    grid-column: span 1;
  }
}
section.grid img {
  width: 100%;
  height: 30rem;
  object-fit: cover;
}
section.grid h4 {
  padding-bottom: 1.5rem;
}
section.grid button, section.grid a.btn {
  align-self: center;
  margin-top: 2rem;
}
section.grid .filter {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
section.grid .filter a {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.4;
}
section.grid .filter a.selected {
  opacity: 1;
}
section.grid .filter div {
  height: 0.8rem;
  width: 2px;
  background: var(--black);
  opacity: 0.4;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (orientation: portrait) {
  footer {
    grid-template-columns: 1fr;
  }
}
footer > a, footer > button {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--pad-large);
  text-align: left;
}
footer p {
  text-align: left;
}
footer > button {
  background: var(--beige);
}
footer > menu {
  background: var(--gray-darkest);
  display: flex;
  justify-content: space-between;
  gap: 6rem;
  padding: var(--pad-large) var(--pad-large) 12rem var(--pad-large);
}
@media (orientation: landscape) {
  footer > menu {
    grid-column: span 2;
  }
}
@media (orientation: portrait) {
  footer > menu {
    flex-direction: column;
  }
}
footer nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
footer nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  opacity: 0.5;
}
footer nav a:hover {
  opacity: 1;
}
footer > div {
  background: black;
  color: gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem var(--pad-large);
}
@media (orientation: landscape) {
  footer > div {
    grid-column: span 2;
  }
}
@media (orientation: portrait) {
  footer > div {
    flex-direction: column;
    gap: 2rem;
  }
}
footer > div small {
  text-transform: none;
  letter-spacing: 0.06em;
}
footer > div img {
  height: 3rem;
}
footer .social {
  display: flex;
  gap: 1rem;
  flex: 1;
}
footer .social a {
  opacity: 0.5;
}
footer .social a:hover {
  opacity: 1;
}
footer .social img {
  width: 2rem;
  height: 2rem;
}
footer .logo {
  height: 2rem;
}

span.filter {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem var(--pad-small) 0;
}
span.filter a {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.4;
}
span.filter a.selected {
  opacity: 1;
}
span.filter div {
  height: 0.8rem;
  width: 2px;
  background: var(--black);
  opacity: 0.4;
}
span.filter.padding-bottom {
  padding-bottom: var(--pad-large);
}
@media (orientation: portrait) {
  span.filter {
    flex-wrap: wrap;
  }
}

section.intro {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 13rem var(--pad-small) 0;
}
section.intro h1, section.intro p {
  color: var(--black);
}
section.intro.black h1, section.intro.black p {
  color: var(--white);
}
@media (orientation: portrait) {
  section.intro br {
    display: none;
  }
}

section.text-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 5rem;
}
section.text-image .product-image-wrapper > div {
  justify-items: center;
  align-items: center;
}
section.text-image .product-image-wrapper > div img, section.text-image .product-image-wrapper > div video, section.text-image .product-image-wrapper > div iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.text-image .product-image-wrapper > div:has(.video-thumbnail) img, section.text-image .product-image-wrapper > div:has(.video-thumbnail) video, section.text-image .product-image-wrapper > div:has(.video-thumbnail) iframe {
  cursor: pointer;
}
section.text-image .product-image-wrapper > div:has(.video-thumbnail)::before, section.text-image .product-image-wrapper > div:has(.video-thumbnail)::after {
  content: "";
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
section.text-image .product-image-wrapper > div:has(.video-thumbnail)::before {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--beige-darkest);
}
section.text-image .product-image-wrapper > div:has(.video-thumbnail)::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 1rem solid var(--white);
  transform: translateX(0.15rem);
}
section.text-image .text-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 60rem;
  padding: var(--pad-small) 0;
}
section.text-image .text-wrapper h2 {
  align-self: flex-start;
  margin-bottom: 0.85rem;
}
section.text-image .text-wrapper p + p {
  margin-top: 2rem;
}
section.text-image .text-wrapper p a {
  text-decoration: underline;
}
section.text-image .image-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
section.text-image .image-wrapper small {
  text-transform: none;
  color: var(--gray);
}
section.text-image .image-wrapper > img {
  width: 45rem;
  height: auto;
}
section.text-image .image-wrapper > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 70rem;
  gap: 3rem;
  overflow: hidden;
}
section.text-image .image-wrapper > div > img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
}
section.text-image .image-wrapper > div > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
section.text-image .image-wrapper > div > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.text-image .image-wrapper.large-image > img {
  width: 70rem;
}
section.text-image .image-wrapper.very-large-image {
  width: 100%;
  align-items: center;
}
section.text-image .image-wrapper.very-large-image > img {
  width: 73%;
  height: auto;
}
section.text-image .image-wrapper.extra-large-image {
  width: 100%;
}
section.text-image .image-wrapper.extra-large-image > img {
  width: 100%;
  height: auto;
}
section.text-image > div.padding-bottom {
  padding-bottom: var(--pad-large);
}
section.text-image > div.padding-top {
  padding-top: var(--pad-large);
}
section.text-image.padding-bottom {
  padding-bottom: var(--pad-large);
}
section.text-image.padding-top {
  padding-top: var(--pad-large);
}
@media (orientation: portrait) {
  section.text-image .text-wrapper {
    max-width: 100%;
  }
  section.text-image .image-wrapper {
    width: 100%;
  }
  section.text-image .image-wrapper > img {
    width: 100%;
    height: auto;
  }
  section.text-image .image-wrapper > div {
    grid-template-columns: 1fr;
    width: 100%;
  }
  section.text-image .image-wrapper.large-image > img {
    width: 100%;
  }
  section.text-image .image-wrapper.very-large-image > img {
    width: 100%;
  }
}

section.full-image {
  width: 100%;
  height: 100vh;
  background: var(--beige);
}
section.full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.full-image.padding-bottom {
  padding-bottom: var(--pad-large);
}
section.full-image.padding-top {
  padding-top: var(--pad-large);
}
@media (orientation: portrait) {
  section.full-image {
    height: 50vh;
  }
}

section.variable-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6rem;
  padding: var(--pad-small) var(--pad-small) var(--pad-large);
  overflow: hidden;
}
section.variable-grid > div {
  display: grid;
  width: 100%;
  gap: 3rem;
}
section.variable-grid > div.grid-2 {
  grid-template-columns: 1fr 1fr;
}
section.variable-grid > div.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
section.variable-grid > div.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
section.variable-grid > div > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}
section.variable-grid > div > div > a {
  text-transform: uppercase;
  color: var(--white);
}
section.variable-grid > div > div.col-2 {
  grid-column: span 2;
}
@media (orientation: portrait) {
  section.variable-grid > div.grid-2, section.variable-grid > div.grid-3, section.variable-grid > div.grid-4 {
    grid-template-columns: 1fr;
  }
  section.variable-grid > div > div.col-2 {
    grid-column: span 1;
  }
}

section.image-only {
  width: 100%;
  aspect-ratio: 3/2;
  padding: var(--pad-small) var(--pad-small);
}
section.image-only > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.small-text-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: center;
  padding: 1.5rem var(--pad-small);
}
section.small-text-sec h2 {
  font-weight: 200;
}
section.small-text-sec small {
  text-transform: none;
}
section.small-text-sec img {
  height: 2.5rem;
  width: auto;
}

section.full-screen-banner {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  padding: 8rem 6rem;
  height: 100vh;
  width: 100%;
  color: var(--black);
}
section.full-screen-banner img, section.full-screen-banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
section.full-screen-banner h4 {
  padding-top: 1.5rem;
}
section.full-screen-banner.color-white > div {
  color: var(--white);
}
section.full-screen-banner.align-content-left {
  justify-content: flex-start;
}
section.full-screen-banner.align-content-center {
  justify-content: center;
}
section.full-screen-banner.align-content-right {
  justify-content: flex-end;
}

section.product-description {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  width: 100%;
  padding: var(--pad-small) var(--pad-large) 0;
  gap: 4rem;
}
section.product-description > div {
  display: flex;
  flex-direction: column;
}
section.product-description > div:first-of-type {
  justify-content: center;
  gap: 4rem;
}
section.product-description > div:last-of-type {
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 2/3;
}
section.product-description > div:last-of-type img, section.product-description > div:last-of-type video, section.product-description > div:last-of-type iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
section.product-description > div:last-of-type:has(.video-thumbnail)::before, section.product-description > div:last-of-type:has(.video-thumbnail)::after {
  content: "";
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
section.product-description > div:last-of-type:has(.video-thumbnail)::before {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--beige-darkest);
}
section.product-description > div:last-of-type:has(.video-thumbnail)::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 1rem solid var(--white);
  transform: translateX(0.15rem);
}
section.product-description div.accordion {
  width: 17rem;
}
section.product-description div.accordion > div {
  border-bottom: 1px solid var(--black);
}
section.product-description div.accordion > div > div {
  border-bottom: none;
  width: 30rem;
}
section.product-description div.accordion > div > div p, section.product-description div.accordion > div > div a {
  font-size: 1.1rem;
  text-transform: none;
}
@media (orientation: portrait) {
  section.product-description {
    grid-template-columns: 1fr;
  }
}

section.slide-only {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  padding: var(--pad-small) calc(var(--pad-large) * 2);
}
section.slide-only .splide, section.slide-only .splide__track {
  width: 100%;
  height: 100%;
}
section.slide-only .splide__pagination {
  justify-content: flex-start;
  bottom: 3rem;
  padding: 0 3rem;
}
section.slide-only .splide__pagination__page {
  background: var(--gray-darkest);
  opacity: 0.4;
}
section.slide-only .splide__pagination__page.is-active {
  opacity: 1;
  transform: scale(1);
}
section.slide-only .splide__slide {
  width: 100%;
  height: 100%;
}
section.slide-only .splide__slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.slide-only {
    padding: var(--pad-small) var(--pad-large);
  }
}

section.grid-stores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 3rem;
  padding: var(--pad-small) var(--pad-small) var(--pad-large);
}
section.grid-stores > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  color: var(--black);
}
section.grid-stores > div p {
  line-height: 1.3;
}
section.grid-stores > div > h4 {
  line-height: 3;
}
section.grid-stores > div .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1/1;
}
section.grid-stores > div .image-wrapper::after, section.grid-stores > div .image-wrapper::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 1px;
  background: transparent;
  z-index: 2;
}
section.grid-stores > div .image-wrapper::before {
  rotate: 90deg;
}
section.grid-stores > div .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.grid-stores > div .image-wrapper:hover::after, section.grid-stores > div .image-wrapper:hover::before {
  background: var(--white);
}
section.grid-stores > div .image-wrapper:hover img {
  filter: brightness(0.5);
}
section.grid-stores > div .address p:first-of-type {
  text-decoration: underline;
}
section.grid-stores > div .contact-accordion details {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
section.grid-stores > div .contact-accordion details summary::marker, section.grid-stores > div .contact-accordion details summary::-webkit-details-marker {
  content: none;
  display: none;
}
section.grid-stores > div .contact-accordion > div:first-of-type {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
  width: 100%;
}
section.grid-stores > div .contact-accordion > div:first-of-type > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  color: var(--black);
  transition: opacity 0.4s var(--ease);
}
section.grid-stores > div .contact-accordion > div:first-of-type > div a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
}
section.grid-stores > div .contact-accordion > div:first-of-type > div a:last-of-type {
  margin-top: 1rem;
}
section.grid-stores > div .contact-accordion > div:first-of-type > div a img {
  width: 1.1rem;
  height: 1.1rem;
}
section.grid-stores > div .contact-accordion:has(details[open]) > div:first-of-type {
  grid-template-rows: 1fr;
}
section.grid-stores > div .contact-accordion:has(details[open]) > div:last-of-type span:first-of-type {
  rotate: 0deg;
}
section.grid-stores > div .contact-accordion > div:last-of-type {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 1rem;
  cursor: pointer;
}
section.grid-stores > div .contact-accordion > div:last-of-type > span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--black);
}
section.grid-stores > div .contact-accordion > div:last-of-type > span:first-of-type {
  rotate: 90deg;
  transition: rotate 0.4s var(--ease);
}
@media (orientation: portrait) {
  section.grid-stores {
    grid-template-columns: 1fr 1fr;
  }
}

section.modal-slider {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
section.modal-slider .splide-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--pad-small) calc(var(--pad-large) * 2);
  gap: 1rem;
}
section.modal-slider .splide-wrapper .close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  rotate: 45deg;
  align-self: flex-end;
  cursor: pointer;
  flex-shrink: 0;
}
section.modal-slider .splide-wrapper .close-button span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--white);
}
section.modal-slider .splide-wrapper .close-button span:first-of-type {
  rotate: 90deg;
}
section.modal-slider .splide, section.modal-slider .splide__track {
  width: 100%;
  height: 100%;
}
section.modal-slider .splide__list {
  width: 100%;
  height: 100%;
}
section.modal-slider .splide__list .splide__slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  height: 100%;
}
section.modal-slider .splide__list .splide__slide img {
  width: 100%;
  height: 95%;
  object-fit: cover;
}
section.modal-slider .splide__list .splide__slide small {
  text-transform: none;
  color: var(--beige-light);
}
section.modal-slider .splide__arrows {
  position: absolute;
  width: 100%;
  top: 45%;
  opacity: 1;
}
section.modal-slider .splide__arrows .splide__arrow {
  opacity: 1;
}
section.modal-slider .splide__arrows .splide__arrow--prev {
  left: -3em;
  transform: scaleX(-1);
}
section.modal-slider .splide__arrows .splide__arrow--next {
  right: -3em;
}
section.modal-slider.show-up {
  opacity: 1;
  pointer-events: all;
}
@media (orientation: portrait) {
  section.modal-slider .splide__arrows {
    display: none;
  }
  section.modal-slider .splide-wrapper {
    height: 60%;
    padding: var(--pad-small) var(--pad-small);
  }
}

body:has(section.modal-slider.show-up) {
  overflow-y: hidden;
}

section.alternated-fr-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3rem;
  padding: 0 var(--pad-small) var(--pad-large);
}
section.alternated-fr-grid > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  gap: 3rem;
}
section.alternated-fr-grid > div:nth-child(odd) {
  grid-template-columns: 2fr 1fr;
}
section.alternated-fr-grid > div > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 0.3rem;
  color: var(--beige-darkest);
  cursor: pointer;
}
section.alternated-fr-grid > div > div small {
  text-transform: none;
}
section.alternated-fr-grid > div > div > img {
  width: 100%;
  height: 45rem;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.alternated-fr-grid > div {
    grid-template-columns: 1fr;
  }
  section.alternated-fr-grid > div:nth-child(odd) {
    grid-template-columns: 1fr;
  }
}

section.branch-info {
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 13rem var(--pad-large) var(--pad-small);
  gap: 6rem;
}
section.branch-info > div {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}
section.branch-info > div:first-of-type {
  width: 30%;
}
section.branch-info > div:first-of-type p {
  line-height: 1.3;
}
section.branch-info > div:first-of-type .address p:first-of-type {
  text-decoration: underline;
}
section.branch-info > div:first-of-type .contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
section.branch-info > div:first-of-type .contact a {
  line-height: 1.3;
}
section.branch-info > div:first-of-type .contact a:last-of-type {
  margin: 1rem 0;
}
section.branch-info > div:last-of-type {
  width: 100%;
  height: 40rem;
}
section.branch-info > div:last-of-type img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.branch-info {
    flex-direction: column;
  }
  section.branch-info > div:first-of-type {
    width: 100%;
  }
}

section.our-brands {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 var(--pad-small);
}
section.our-brands a {
  padding: 1rem 2rem;
  text-transform: uppercase;
  color: var(--black);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray);
  font-size: 1rem;
  letter-spacing: 0.12em;
}

#newsletter {
  position: fixed;
  margin: auto 0 auto auto;
  animation: fadeIn 1s var(--ease);
}
#newsletter:popover-open {
  border: 0;
  background: var(--beige-dark);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: var(--pad-large);
}
#newsletter::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
#newsletter > button {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
#newsletter form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
#newsletter form fieldset {
  width: 100%;
  display: flex;
  gap: 1rem;
  appearance: none;
  outline: none;
  border: 0;
}
#newsletter form fieldset input {
  flex: 1;
}
#newsletter form small {
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
#newsletter form button {
  margin-top: 2rem;
  text-transform: uppercase;
  color: white;
}
#newsletter form button:hover {
  color: black;
}

#contacts-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  gap: 5rem;
  padding: 13rem var(--pad-small);
}
#contacts-banner > h1 {
  color: var(--beige-light);
  align-self: flex-start;
}
#contacts-banner > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 50rem;
}
#contacts-banner > div > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 5rem;
  gap: 1rem;
}
#contacts-banner > div > div > span {
  display: flex;
  align-items: center;
  height: 6rem;
}
#contacts-banner > div > div > span img {
  margin-bottom: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease);
  max-width: 100%;
  height: 3rem;
  object-fit: contain;
}
#contacts-banner > div > div:has(details[open]) > span img {
  opacity: 1;
}
#contacts-banner .accordion details summary {
  opacity: 0.5;
}
#contacts-banner .accordion > div > div {
  opacity: 0.5;
}
#contacts-banner .accordion:has(details[open]) summary {
  opacity: 1;
}
#contacts-banner .accordion:has(details[open]) > div > div {
  opacity: 1;
}
#contacts-banner.offwhite > h1 {
  color: var(--black);
}
#contacts-banner.offwhite .accordion details summary {
  color: var(--black);
}
#contacts-banner.offwhite .accordion > div > div {
  color: var(--black);
  border-bottom: 1px solid var(--black);
}
@media (orientation: portrait) {
  #contacts-banner > div {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

#inspiracao-grid.grid {
  padding-top: 3rem;
}
#inspiracao-grid.grid > div {
  gap: 6rem 3rem;
}
#inspiracao-grid.grid h4 {
  padding-bottom: 0;
  text-transform: uppercase;
}

#sobre-video-only {
  background: var(--beige);
}

#lancamentos-grid .splide .splide__track .splide__list .splide__slide {
  width: 100%;
}
#lancamentos-grid .grid-2 .splide__slide img, #lancamentos-grid .grid-4 .splide__slide img {
  width: 100%;
  height: 30rem;
  object-fit: cover;
}
#lancamentos-grid .grid-3 .splide__slide img {
  width: 100%;
  height: 45rem;
  object-fit: cover;
}
#lancamentos-grid .splide__pagination__page {
  background: var(--gray);
}
#lancamentos-grid .splide__pagination__page.is-active {
  background: var(--gray-darkest);
  transform: scale(1);
}

#internal-branch-variable-grid.variable-grid .grid-3 img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.splide .splide__arrows {
  position: absolute;
  width: 100%;
  top: 50%;
  opacity: 0;
}
.splide:hover .splide__arrows {
  opacity: 1;
}/*# sourceMappingURL=style.css.map */