* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  background: #f4efe8;

  color: #111;

  font-family: "Inter", sans-serif;

  overflow-x: hidden;

}

a {

  color: inherit;

  text-decoration: none;

}

/* NAV */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 76px;

  padding: 0 28px;

  display: grid;

  grid-template-columns: 44px 44px 1fr 44px 44px;

  align-items: center;

  z-index: 50;

  background: rgba(12, 11, 9, 0.28);

  backdrop-filter: blur(14px);

  color: white;

}

.logo {

  text-align: center;

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(1.1rem, 3vw, 2rem);

  letter-spacing: 0.18em;

}

.nav-icon {

  background: none;

  border: none;

  color: white;

  font-size: 1rem;

  cursor: pointer;

}

.sideMenu {

  position: fixed;

  top: 0;

  left: -100%;

  width: 82%;

  max-width: 390px;

  height: 100vh;

  background: #f2eadf;

  color: #111;

  z-index: 100;

  padding: 90px 38px;

  transition: left 0.45s ease;

}

.sideMenu.open {

  left: 0;

}

.sideMenu a {

  display: block;

  font-family: "Cormorant Garamond", serif;

  font-size: 2.3rem;

  margin-bottom: 24px;

}

.closeMenu {

  position: absolute;

  top: 24px;

  right: 28px;

  border: none;

  background: none;

  font-size: 2.5rem;

  cursor: pointer;

}

/* HERO */

.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  background: #0e0d0b;

}

.slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  background-size: cover;

  background-position: center;

  transition: opacity 1.2s ease;

}

.slide.active {

  opacity: 1;

  z-index: 2;

}

.heroOverlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.15), rgba(0,0,0,.58));

}

.heroContent {

  position: absolute;

  left: 7%;

  bottom: 14%;

  z-index: 3;

  color: white;

}

.heroContent p {

  font-size: .72rem;

  letter-spacing: .35em;

  margin-bottom: 18px;

}

.heroContent h1 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(4rem, 10vw, 9rem);

  font-weight: 300;

  line-height: .82;

}

.arrow {

  position: absolute;

  top: 50%;

  z-index: 10;

  transform: translateY(-50%);

  border: 1px solid rgba(255,255,255,.35);

  background: rgba(255,255,255,.08);

  color: white;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  cursor: pointer;

}

.arrow.left {

  left: 26px;

}

.arrow.right {

  right: 26px;

}

.dots {

  position: absolute;

  bottom: 34px;

  left: 50%;

  z-index: 10;

  transform: translateX(-50%);

  display: flex;

  gap: 12px;

}

.dot {

  width: 34px;

  height: 2px;

  border: none;

  background: rgba(255,255,255,.45);

  cursor: pointer;

}

.dot.active {

  background: white;

}

/* BRAND INTRO */

.brandIntro {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 78vh;

  background: #efe8dd;

  color: #111;

}

.brandText {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 80px 30px;

}

.brandText h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(4rem, 9vw, 8rem);

  font-weight: 300;

  line-height: .82;

}

.flower {

  font-size: 3rem;

  margin: 42px 0 24px;

}

.brandText p {

  letter-spacing: .35em;

  font-size: .82rem;

}

.brandPhoto {

  overflow: hidden;

}

.brandPhoto img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* COLLECTION */

.collectionClean {

  background: #f4efe8;

  color: #111;

}

.collectionCleanHero {

  min-height: 70vh;

  background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.45)), url("images/hero-1.jpg");

  background-size: cover;

  background-position: center;

  color: white;

  padding: 120px 7vw;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.collectionCleanHero p,

.collectionCleanHero span,

.collectionCleanHero a {

  letter-spacing: .25em;

  font-size: .75rem;

}

.collectionCleanHero h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(4rem, 9vw, 8rem);

  font-weight: 300;

  line-height: .9;

  max-width: 850px;

  margin: 24px 0;

}

.collectionCleanHero a {

  margin-top: 40px;

  width: fit-content;

  border-bottom: 1px solid white;

  padding-bottom: 8px;

}

.collectionCleanCards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

}

.cleanCard {

  min-height: 330px;

  padding: 60px;

  border: 1px solid rgba(0,0,0,.08);

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.cleanCard h3 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(2.5rem, 4vw, 4.5rem);

  font-weight: 300;

  line-height: .95;

}

.cleanCard p {

  margin-top: 35px;

  letter-spacing: .2em;

  font-size: .75rem;

}

/* SWIM FIT */

.swimFit {

  display: grid;

  grid-template-columns: 45% 55%;

  align-items: center;

  gap: 60px;

  background: #f5efe7;

  color: #111;

  padding: 100px 7vw;

}

.swimVideo {

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}

.swimVideo video {

  width: 420px;

  max-width: 100%;

  height: 600px;

  object-fit: cover;

  display: block;

  border-radius: 18px;

}

.swimText {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.swimText > p:first-child {

  letter-spacing: .35em;

  font-size: .8rem;

  margin-bottom: 20px;

}

.swimText h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(4rem, 8vw, 7rem);

  font-weight: 300;

  line-height: .9;

}

.line {

  width: 80px;

  height: 1px;

  background: #111;

  margin: 35px 0;

}

.bodyText {

  line-height: 2;

  color: #444;

  margin-bottom: 40px;

}

.swimText a {

  display: inline-block;

  border-bottom: 1px solid #111;

  width: max-content;

  padding-bottom: 6px;

  letter-spacing: .15em;

}

/* FITTING ROOM */

.fitRoom {

  background: #f4efe8;

  color: #111;

  padding: 100px 7vw 120px;

  text-align: center;

}

.fitRoom > p {

  letter-spacing: .28em;

  font-size: .75rem;

  margin-bottom: 14px;

}

.fitRoom h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(3.5rem, 8vw, 7rem);

  font-weight: 300;

  line-height: .9;

}

.fitRoomLink {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 42px auto 72px;

  padding: 14px 34px;

  border: 1px solid #111;

  border-radius: 999px;

  font-size: .72rem;

  letter-spacing: .18em;

  transition: all .35s ease;

}

.fitCards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;

}

.fitCard {

  color: #111;

  text-align: center;

}

.fitImageWrap {

  position: relative;

  height: 430px;

  overflow: hidden;

  background: #111;

  color: white;

}

.fitImageWrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: opacity .4s ease, transform .8s ease;

}

.fitImageWrap::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.65));

  pointer-events: none;

}

.fitImageWrap span,

.fitImageWrap h3 {

  position: absolute;

  z-index: 2;

  left: 24px;

  text-align: left;

}

.fitImageWrap span {

  bottom: 94px;

  font-size: .75rem;

}

.fitImageWrap h3 {

  bottom: 28px;

  font-size: .95rem;

  letter-spacing: .08em;

  line-height: 1.35;

}

.fitHoverText {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;

  text-align: center;

  opacity: 0;

  color: white;

  letter-spacing: .12em;

  font-size: .85rem;

  line-height: 1.8;

  transition: opacity .35s ease;

}

.fitCard:hover img {

  opacity: .35;

  transform: scale(1.05);

}

.fitCard:hover .fitHoverText {

  opacity: 1;

}

.fitType {

  margin-top: 22px;

  font-family: "Cormorant Garamond", serif;

  font-size: 2rem;

  letter-spacing: .08em;

}

.fitBottomButton {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 85px;

  padding: 16px 42px;

  border: 1px solid #111;

  border-radius: 999px;

  font-size: .75rem;

  letter-spacing: .2em;

  transition: all .35s ease;

}

.fitRoomLink:hover,

.fitBottomButton:hover {

  background: #111;

  color: #f4efe8;

}

/* NEWSLETTER */

.newsletter {

  background: #f4efe8;

  color: #111;

  padding: 100px 7vw;

  text-align: center;

  display: flex;

  justify-content: center;

}

.newsletter > div {

  width: min(900px, 92vw);

  background: rgba(255,255,255,.45);

  padding: 60px 40px;

}

.mailIcon {

  font-size: 2rem;

  margin-bottom: 22px;

}

.newsletter p {

  letter-spacing: .25em;

  font-size: .72rem;

  margin-bottom: 18px;

}

.newsletter h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(3rem, 7vw, 6rem);

  font-weight: 300;

  line-height: .9;

}

.newsletter span {

  display: block;

  margin: 22px 0 36px;

}

.newsletter form {

  width: min(520px, 90vw);

  margin: auto;

  display: flex;

  border-bottom: 1px solid #111;

}

.newsletter input {

  flex: 1;

  border: none;

  background: transparent;

  padding: 14px 0;

  outline: none;

}

.newsletter button {

  border: none;

  background: transparent;

  font-size: 1.5rem;

}

/* FOOTER */

.footer {

  background: #f4efe8;

  color: #111;

  padding: 70px 6vw;

  display: grid;

  grid-template-columns: 2fr repeat(4, 1fr);

  gap: 40px;

}

.footer h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: 2rem;

  font-weight: 300;

  line-height: .9;

}

.footer p,

.footer h4 {

  letter-spacing: .18em;

  font-size: .72rem;

  margin-bottom: 18px;

}

.footer a {

  display: block;

  margin-bottom: 10px;

  font-size: .85rem;

}

/* MOBILE */

@media (max-width: 500px) {

  .navbar {

    grid-template-columns: 38px 38px 1fr 38px 38px;

    padding: 0 14px;

  }

  .arrow {

    display: none;

  }

  .brandIntro,

  .swimFit,

  .collectionCleanCards,

  .fitCards,

  .footer {

    grid-template-columns: 1fr;

  }

  .brandPhoto {

    min-height: 60vh;

  }

  .swimVideo video {

    width: 330px;

    height: 500px;

  }

  .fitImageWrap {

    height: 420px;

  }

  .footer {

    text-align: center;

  }

}

.searchPage {

  background: #f4efe8;

  color: #111;

}

.backHome {

  position: fixed;

  top: 30px;

  left: 30px;

  font-size: .8rem;

  letter-spacing: .18em;

  z-index: 10;

}

.searchSection {

  min-height: 100vh;

  padding: 130px 8vw;

  text-align: center;

}

.searchSection > p {

  letter-spacing: .35em;

  font-size: .75rem;

  margin-bottom: 20px;

}

.searchSection h1 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(4rem, 10vw, 8rem);

  font-weight: 300;

  margin-bottom: 50px;

}

#searchInput {

  width: min(680px, 90vw);

  border: none;

  border-bottom: 1px solid #111;

  background: transparent;

  padding: 18px;

  font-size: 1.1rem;

  text-align: center;

  outline: none;

}

.searchResults {

  width: min(760px, 90vw);

  margin: 60px auto 0;

  display: grid;

  gap: 20px;

}

.searchResult {

  display: block;

  padding: 30px;

  border: 1px solid rgba(0,0,0,.12);

  text-align: left;

  transition: .3s ease;

}

.searchResult:hover {

  background: #111;

  color: #f4efe8;

}

.searchResult h3 {

  font-family: "Cormorant Garamond", serif;

  font-size: 2rem;

  font-weight: 300;

}

.searchResult p {

  margin-top: 10px;

  line-height: 1.7;

}

/* FITTING ROOM PAGE */

.fittingPage {

  background: #0e0d0b;

  color: white;

}

.fittingLanding {

  position: relative;

  min-height: 100vh;

  overflow: hidden;

}

.fittingBg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1s ease;

}

.fittingShade {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,.22);

  z-index: 1;

}

.fittingNav {

  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  padding: 34px 42px;

  letter-spacing: .22em;

  font-size: .72rem;

}

.fittingNav span {

  text-align: center;

}

.fittingNav a:last-child {

  text-align: right;

}

.fittingTitle {

  position: relative;

  z-index: 3;

  text-align: center;

  padding-top: 85px;

  max-width: 900px;

  margin: 0 auto;

}

.fittingTitle p,

.fittingTitle span {

  letter-spacing: .18em;

  font-size: .82rem;

}

.fittingTitle h1 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(3.4rem, 7vw, 6rem);

  font-weight: 300;

  line-height: 1;

  letter-spacing: .06em;

  margin: 18px 0 24px;

}

.fittingDivider {

  position: absolute;

  top: 95px;

  bottom: 60px;

  left: 50%;

  width: 1px;

  background: rgba(255,255,255,.45);

  z-index: 2;

}

.fittingCenter {

  position: absolute;

  z-index: 5;

  left: 50%;

  top: 56%;

  transform: translate(-50%, -50%);

  width: 125px;

  height: 125px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.75);

  overflow: hidden;

  background: transparent;

  cursor: pointer;

  transition: transform .45s ease;

}

.fittingCenter img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.fittingChoice {

  position: absolute;

  z-index: 4;

  top: 58%;

  transform: translateY(-50%);

  width: 34%;

  text-align: center;

  transition: transform .45s ease, opacity .45s ease;

}

.fittingChoice:hover {

  transform: translateY(-50%) scale(1.04);

}

.fittingLeft {

  left: 9%;

}

.fittingRight {

  right: 9%;

}

.fittingChoice p {

  font-family: "Cormorant Garamond", serif;

  font-size: 1.4rem;

}

.fittingChoice h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(2.3rem, 4vw, 4.4rem);

  font-weight: 300;

  line-height: 1.05;

  letter-spacing: .12em;

  margin: 18px 0 20px;

}

.fittingChoice span {

  display: block;

  max-width: 320px;

  margin: 0 auto;

  line-height: 1.8;

  font-size: .95rem;

}

.fitQuizIntro {

  background: #f4efe8;

  color: #111;

  min-height: 70vh;

  padding: 130px 7vw;

  text-align: center;

}

.fitQuizIntro p {

  letter-spacing: .28em;

  font-size: .75rem;

}

.fitQuizIntro h2 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(3.5rem, 8vw, 7rem);

  font-weight: 300;

  line-height: .9;

  max-width: 900px;

  margin: 24px auto;

}

.fitQuizIntro span {

  line-height: 1.8;

}

/* Fitting room hover movement */

.fittingLanding.leanLeft .fittingBg {

  transform: scale(1.04) translateX(14px);

}

.fittingLanding.leanRight .fittingBg {

  transform: scale(1.04) translateX(-14px);

}

@media (max-width: 700px) {

  .fittingNav {

    grid-template-columns: 1fr;

    gap: 12px;

    text-align: center;

  }

  .fittingNav a:last-child {

    text-align: center;

  }

  .fittingDivider,

  .fittingCenter {

    display: none;

  }

  .fittingChoice {

    position: relative;

    top: auto;

    left: auto;

    right: auto;

    transform: none;

    width: 90%;

    margin: 60px auto;

  }

  .fittingChoice:hover {

    transform: none;

  }

  .fittingLanding {

    padding-bottom: 80px;

  }

}