Harveyのデザインシステム

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <div class="c-button-ghost__group">
      <span class="c-button-ghost__label">lorem ip</span>
      <span class="c-button-ghost__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-ghost__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">
    <span class="c-button-primary__label">lorem</span>
    <span class="c-button-primary__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-primary-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-primary {
  display: flex;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-button-primary__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-primary__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-primary:hover {
  background-color: #0F0E0D;
  color: #FAFAF9;
}

.c-button-primary:focus {
  background-color: #0F0E0D;
  color: #FAFAF9;
}

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <div class="c-button-secondary__group">
      <span class="c-button-secondary__label">lorem ipsum d</span>
      <span class="c-button-secondary__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 20px;
  background-color: transparent;
  color: #8F8B85;
  border: 1px solid #33312C;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-secondary__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-secondary__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-secondary:hover {
  color: #FAFAF9;
}

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <span class="c-button-ghost-2__label">lorem ip</span>
      <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-2__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-ghost-2__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">
    <span class="c-button-secondary-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-secondary-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 72px;
  aspect-ratio: 1 / 1;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FAFAF933;
  color: #0F0E0D;
  border: 1px solid #FAFAF94D;
  border-radius: 3.35544e+07px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-button-ghost-3 {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

<div class="c-button-primary-2-scope">
  <button class="c-button-primary-2" type="button">lorem</button>
</div>

.c-button-primary-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  padding: 0px 20px;
  background-color: #0F0E0D;
  color: #FAFAF9;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.2s ease-in-out;
}

.c-button-primary-2:hover {
  background-color: #33312C;
}

.c-button-primary-2:focus {
  box-shadow: #8F8B85 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px;
  outline: none;
}

<div class="c-card-scope">
  <div class="c-card">
    <a class="c-card__link" href="#">
      <span class="c-card__media" aria-hidden="true"></span>
    </a>
  </div>
</div>

.c-card-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 96px;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card__link {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 82px;
  height: 58px;
  max-width: 66.6667%;
  max-height: 60%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
  margin-top: 19.2031px;
  margin-bottom: 19.2031px;
}

<div class="c-card-2-scope">
  <a class="c-card-2" href="#">
    <div class="c-card-2__group">
      <span class="c-card-2__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-2__group-2">
      <h3 class="c-card-2__title">
        <strong class="c-card-2__text">lorem ipsum dolor sit amet c</strong>
      </h3>
    </div>
  </a>
</div>

.c-card-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-2__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 4px;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 448px;
  height: 252px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: scale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card-2__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  margin-right: 16px;
}

.c-card-2__title {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 24px;
  font-weight: 400;
  line-height: 31.2px;
  letter-spacing: -0.24px;
}

.c-card-2__text {
  display: inline;
  box-sizing: border-box;
  font-weight: 500;
}

<div class="c-card-3-scope">
  <a class="c-card-3" href="#">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3">
          <div class="c-card-3__group-3"></div>
        </div>
      </div>
      <span class="c-card-3__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-3__group-4"></div>
    <div class="c-card-3__group-5">
      <span class="c-card-3__media-2" aria-hidden="true"></span>
      <div class="c-card-3__group-6">
        <div class="c-card-3__group-7">
          <h4 class="c-card-3__title">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit</h4>
        </div>
      </div>
    </div>
  </a>
</div>

.c-card-3-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #0F0E0D;
  color: #FAFAF9;
  border-radius: 8px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__group-3 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 448px;
  height: 448px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(to top, #000000 0%, #00000033 20%);
}

.c-card-3__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 57px;
  max-width: 120px;
  min-height: 32px;
  max-height: 80px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 32px;
  margin-left: 32px;
}

.c-card-3__group-6 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  box-sizing: border-box;
  padding: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.2px;
}

<div class="c-card-4-scope">
  <a class="c-card-4" href="#">
    <figure class="c-card-4__group">
      <div class="c-card-4__group-2"></div>
      <span class="c-card-4__media" aria-hidden="true"></span>
    </figure>
    <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</p>
  </a>
</div>

.c-card-4-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAF9;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-4__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 4px;
}

.c-card-4__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #1F1D1A;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card-4__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 84px;
  height: 100px;
  max-width: 300px;
  max-height: 100px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
}

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <p class="c-card-5__body">lorem ipsum dolor sit</p>
    </div>
    <p class="c-card-5__body-2">lor</p>
  </div>
</div>

.c-card-5-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5 {
  display: grid;
  align-items: center;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 32px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 16px;
}

.c-card-5__body {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 20px;
  line-height: 26px;
}

.c-card-5__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 72px;
  line-height: 75.6px;
  letter-spacing: -0.9px;
}

.c-card-5:hover {
  padding: 32px 0px;
}

.c-card-5:focus {
  padding: 32px 0px;
}

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__group-2">
        <h3 class="c-card-6__title">lorem ipsum dolor s</h3>
      </div>
      <p class="c-card-6__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</p>
    </div>
    <div class="c-card-6__group-3">
      <div class="c-card-6__group-2">
        <div class="c-card-6__group-4">
          <span class="c-card-6__media" aria-hidden="true"></span>
          <span class="c-card-6__media-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-card-6__group-5">
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum do</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet c</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor sit amet</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur</p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-6-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  max-height: 778px;
  position: sticky;
  top: 106px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6__group {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-bottom: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-6__group-2 {
  display: block;
  box-sizing: border-box;
  width: 50%;
}

.c-card-6__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 32px;
  font-weight: 500;
  line-height: 35.2px;
  letter-spacing: -0.32px;
}

.c-card-6__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.c-card-6__group-3 {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-6__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1.33399 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
}

.c-card-6__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 688px;
  height: 516px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-6__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 688px;
  height: 516px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-6__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  box-sizing: border-box;
  width: 40%;
  padding-right: 64px;
}

.c-card-6__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding-top: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-6__title-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.16px;
}

.c-card-6__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  line-height: 20.8px;
}

.c-card-6:hover {
  z-index: 1;
}

.c-card-6:focus {
  z-index: 1;
}

<div class="c-card-7-scope">
  <div class="c-card-7">
    <h4 class="c-card-7__title">lorem ipsum do</h4>
    <p class="c-card-7__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet c</p>
  </div>
</div>

.c-card-7-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-7 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-7__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.16px;
}

.c-card-7__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  line-height: 20.8px;
}

<div class="c-hero-scope">
  <div class="c-hero">
    <section class="c-hero__group">
      <div class="c-hero__group-2">
        <div class="c-hero__group-3">
          <h1 class="c-hero__title">lorem ipsum dolor sit amet consecte</h1>
          <div class="c-hero__group-4"></div>
        </div>
      </div>
      <div class="c-hero__group-5">
        <div class="c-hero__group-2">
          <div class="c-hero__group-6"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-hero-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-hero {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-hero__group {
  display: block;
  box-sizing: border-box;
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-hero__group-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1728px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-hero__group-3 {
  box-sizing: border-box;
}

.c-hero__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 75.6px;
  letter-spacing: -0.9px;
}

.c-hero__group-4 {
  display: flex;
  box-sizing: border-box;
}

.c-hero__group-5 {
  display: block;
  box-sizing: border-box;
  margin-top: 64px;
}

.c-hero__group-6 {
  display: block;
  box-sizing: border-box;
}

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <div class="c-navigation__group-2"></div>
        </a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <div class="c-navigation__group-2"></div>
        </a>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-navigation__item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-navigation__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-navigation__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-navigation__link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #0F0E0D;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-navigation__group-2 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <div class="c-navigation-2__group">
      <h3 class="c-navigation-2__title">lorem ip</h3>
      <ul class="c-navigation-2__list">
        <a class="c-navigation-2__link" href="#">lorem ip</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum do</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum dolo</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum d</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-navigation-2__group">
      <h3 class="c-navigation-2__title">lorem ips</h3>
      <ul class="c-navigation-2__list">
        <a class="c-navigation-2__link" href="#">lorem ipsu</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum d</a>
        <a class="c-navigation-2__link" href="#">lorem ipsu</a>
        <a class="c-navigation-2__link" href="#">lorem ip</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <li class="c-navigation-2__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2 {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-navigation-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-navigation-2__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation-2__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation-2__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-close-button-scope">
  <button class="c-close-button" type="button">
    <span class="c-close-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-close-button-scope {
  background-color: #C7C7C6;
  color: #424140;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-close-button {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-close-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <div class="c-header-landing__group"></div>
    <div class="c-header-landing__group-2">
      <div class="c-header-landing__group-3">
        <div class="c-header-landing__group-4">
          <div class="c-header-landing__group-5">
            <a class="c-header-landing__logo" href="#">
              <span class="c-header-landing__logo-text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</span>
              <span class="c-header-landing__logo-text-2">lorem ipsu</span>
            </a>
          </div>
          <button class="c-header-landing__menu-toggle" type="button">
            <span class="c-header-landing__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <div class="c-header-landing__inner">
        <div class="c-header-landing__group-6">
          <div class="c-header-landing__group-7">
            <div class="c-header-landing__text">lorem ip</div>
          </div>
          <nav class="c-header-landing__nav">
            <ul class="c-header-landing__nav-list">
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <a class="c-header-landing__nav-link" href="#">
                  <div class="c-header-landing__group-9"></div>
                </a>
              </li>
              <li class="c-header-landing__nav-item">
                <a class="c-header-landing__nav-link" href="#">
                  <div class="c-header-landing__group-9"></div>
                </a>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__menu-toggle-2" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
            </ul>
          </nav>
          <div class="c-header-landing__group-10">
            <div class="c-header-landing__group-11">
              <div class="c-header-landing__group-12">
                <div class="c-header-landing__group-13">
                  <button class="c-header-landing__menu-toggle-3" type="button"></button>
                </div>
              </div>
              <a class="c-header-landing__cta-2" href="#">
                <p class="c-header-landing__text-2">lorem ipsum do</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-landing__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-header-landing__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-landing__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing__logo-text-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  font-weight: 500;
}

.c-header-landing__menu-toggle {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-header-landing__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

.c-header-landing__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__group-6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-landing__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-landing__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-header-landing__nav-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-landing__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing__group-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-landing__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-9 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__menu-toggle-2 {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-landing__group-11 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
}

.c-header-landing__group-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-13 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__menu-toggle-3 {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #FAFAF9;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 12px;
  padding-left: 12px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-header-landing__menu-toggle-3:hover {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-landing__menu-toggle-3:focus {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-landing__cta-2:hover {
  background-color: #8F8B85;
}

.c-header-landing__cta-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__group"></div>
    <div class="c-header-landing-mobile__group-2">
      <div class="c-header-landing-mobile__group-3">
        <div class="c-header-landing-mobile__group-4">
          <div class="c-header-landing-mobile__group-5">
            <div class="c-header-landing-mobile__group-6">
              <a class="c-header-landing-mobile__logo" href="#">
                <span class="c-header-landing-mobile__group-7">
                  <span class="c-header-landing-mobile__group-8"></span>
                  <span class="c-header-landing-mobile__logo-text">lorem ipsu</span>
                </span>
                <span class="c-header-landing-mobile__group-7">
                  <span class="c-header-landing-mobile__group-8"></span>
                  <span class="c-header-landing-mobile__logo-text">lorem ipsu</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-landing-mobile__inner">
        <div class="c-header-landing-mobile__group-9">
          <div class="c-header-landing-mobile__group-10">
            <div class="c-header-landing-mobile__text">lorem ip</div>
          </div>
          <div class="c-header-landing-mobile__group-11">
            <div class="c-header-landing-mobile__group-12">
              <button class="c-header-landing-mobile__menu-toggle" type="button">
                <span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing-mobile__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing-mobile__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: left;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-landing-mobile__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 390px;
  background-color: #0F0E0D;
}

.c-header-landing-mobile__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-landing-mobile__group-6 {
  display: flex;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__logo {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  color: #FAFAF9;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -221.88, 0);
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-landing-mobile__group-7 {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-landing-mobile__group-8 {
  display: block;
  box-sizing: border-box;
}

.c-header-landing-mobile__logo-text {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  font-weight: 500;
}

.c-header-landing-mobile__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 28px;
  padding-left: 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__group-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-landing-mobile__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-landing-mobile__group-11 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-landing-mobile__group-12 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-landing-mobile__menu-toggle {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  z-index: 30;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__logo:focus {
  transform: matrix(1, 0, 0, 1, -276.884, 0);
}

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group"></div>
    <ul class="c-header-inner__nav">
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ip</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ips</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <a class="c-header-inner__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-inner__nav-item">
        <a class="c-header-inner__nav-link" href="#">lorem ip</a>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ips</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__button" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem i</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner__group {
  display: block;
  box-sizing: border-box;
  width: 79.8125px;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 535.312px;
  z-index: 10001;
  background-color: #0F0E0D;
  opacity: 0.359248;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner__group-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #0F0E0D;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

<div class="c-header-inner-2-scope">
  <header class="c-header-inner-2">
    <div class="c-header-inner-2__group"></div>
    <div class="c-header-inner-2__group-2">
      <div class="c-header-inner-2__group-3">
        <div class="c-header-inner-2__group-4">
          <div class="c-header-inner-2__group-5">
            <a class="c-header-inner-2__logo" href="#">
              <span class="c-header-inner-2__logo-text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</span>
              <span class="c-header-inner-2__logo-text-2">lorem ipsu</span>
            </a>
          </div>
          <button class="c-header-inner-2__menu-toggle" type="button">
            <span class="c-header-inner-2__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <div class="c-header-inner-2__inner">
        <div class="c-header-inner-2__group-6">
          <div class="c-header-inner-2__group-7">
            <div class="c-header-inner-2__text">lorem ip</div>
          </div>
          <nav class="c-header-inner-2__nav">
            <ul class="c-header-inner-2__nav-list">
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <a class="c-header-inner-2__nav-link" href="#">
                  <div class="c-header-inner-2__group-9"></div>
                </a>
              </li>
              <li class="c-header-inner-2__nav-item">
                <a class="c-header-inner-2__nav-link" href="#">
                  <div class="c-header-inner-2__group-9"></div>
                </a>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__menu-toggle-2" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
            </ul>
          </nav>
          <div class="c-header-inner-2__group-10">
            <div class="c-header-inner-2__group-11">
              <div class="c-header-inner-2__group-12">
                <div class="c-header-inner-2__group-13">
                  <button class="c-header-inner-2__cta-2" type="button"></button>
                </div>
              </div>
              <a class="c-header-inner-2__cta-3" href="#">
                <p class="c-header-inner-2__text-2">lorem ipsum do</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-2__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-inner-2__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-header-inner-2__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-inner-2__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-2__logo-text-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  font-weight: 500;
}

.c-header-inner-2__menu-toggle {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-header-inner-2__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

.c-header-inner-2__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__group-6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-2__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-header-inner-2__nav-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner-2__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2__group-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner-2__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-9 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__menu-toggle-2 {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner-2__group-11 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner-2__group-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-13 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__cta-2 {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #FAFAF9;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 12px;
  padding-left: 12px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-header-inner-2__cta-2:hover {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-inner-2__cta-2:focus {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-inner-2__cta-3:hover {
  background-color: #8F8B85;
}

.c-header-inner-2__cta-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-inner-2-mobile-scope">
  <header class="c-header-inner-2-mobile">
    <div class="c-header-inner-2-mobile__group"></div>
    <div class="c-header-inner-2-mobile__group-2">
      <div class="c-header-inner-2-mobile__group-3">
        <div class="c-header-inner-2-mobile__group-4">
          <div class="c-header-inner-2-mobile__group-5">
            <div class="c-header-inner-2-mobile__group-6">
              <a class="c-header-inner-2-mobile__logo" href="#">
                <span class="c-header-inner-2-mobile__group-7">
                  <span class="c-header-inner-2-mobile__group-8"></span>
                  <span class="c-header-inner-2-mobile__logo-text">lorem ipsu</span>
                </span>
                <span class="c-header-inner-2-mobile__group-7">
                  <span class="c-header-inner-2-mobile__group-8"></span>
                  <span class="c-header-inner-2-mobile__logo-text">lorem ipsu</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-inner-2-mobile__inner">
        <div class="c-header-inner-2-mobile__group-9">
          <div class="c-header-inner-2-mobile__group-10">
            <div class="c-header-inner-2-mobile__text">lorem ip</div>
          </div>
          <div class="c-header-inner-2-mobile__group-11">
            <div class="c-header-inner-2-mobile__group-12">
              <button class="c-header-inner-2-mobile__menu-toggle" type="button">
                <span class="c-header-inner-2-mobile__menu-toggle-icon" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2-mobile__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-2-mobile__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: left;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-inner-2-mobile__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 390px;
  background-color: #0F0E0D;
}

.c-header-inner-2-mobile__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2-mobile__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-inner-2-mobile__group-6 {
  display: flex;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2-mobile__logo {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  color: #FAFAF9;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -134.083, 0);
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-inner-2-mobile__group-7 {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-inner-2-mobile__group-8 {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__logo-text {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  font-weight: 500;
}

.c-header-inner-2-mobile__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 28px;
  padding-left: 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2-mobile__group-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-2-mobile__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-inner-2-mobile__group-11 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner-2-mobile__group-12 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__menu-toggle {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  z-index: 30;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__logo:focus {
  transform: matrix(1, 0, 0, 1, -188.31, 0);
}

<div class="c-header-inner-3-scope">
  <nav class="c-header-inner-3">
    <ul class="c-header-inner-3__nav">
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__cta" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ip</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__cta" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ips</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <a class="c-header-inner-3__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-inner-3__nav-item">
        <a class="c-header-inner-3__nav-link" href="#">lorem ip</a>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__button" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ips</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__button" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem i</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-3-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-3 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-3__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner-3__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-3__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-3__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-header-inner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-3__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-3__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__inner">
      <section class="c-footer-landing__columns">
        <h3 class="c-footer-landing__heading">lorem ipsum dolor sit amet consectetur adipiscing</h3>
        <a class="c-footer-landing__link" href="#">
          <p class="c-footer-landing__text">lorem ipsum do</p>
        </a>
      </section>
      <div class="c-footer-landing__columns-2">
        <div class="c-footer-landing__group">
          <span class="c-footer-landing__logo" aria-hidden="true"></span>
          <div class="c-footer-landing__group-2">
            <p class="c-footer-landing__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed d</p>
          </div>
        </div>
        <nav class="c-footer-landing__nav">
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ip</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dolor sit</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dolo</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ips</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsu</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsu</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dol</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem i</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem i</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ips</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lore</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__nav-link-icon" aria-hidden="true"></span>
                <span class="c-footer-landing__text-2">lorem ipsum dolor si</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem</h3>
          </div>
        </nav>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1728px;
  padding: 64px 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 64px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #33312C;
}

.c-footer-landing__heading {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.24px;
}

.c-footer-landing__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-footer-landing__columns-2 {
  display: flex;
  box-sizing: border-box;
  margin-top: 64px;
}

.c-footer-landing__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  margin-right: 32px;
}

.c-footer-landing__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 224px;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  line-height: 18.2px;
}

.c-footer-landing__nav {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-left: auto;
}

.c-footer-landing__group-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-footer-landing__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-landing__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__nav-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing__group-4 {
  display: block;
  box-sizing: border-box;
  width: 12px;
  position: relative;
  margin-left: 4px;
}

.c-footer-landing__nav-link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-right: 4px;
}

.c-footer-landing__link:hover {
  background-color: #8F8B85;
}

.c-footer-landing__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing__nav-link:hover {
  color: #CCCAC6;
}

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__inner">
      <section class="c-footer-landing-mobile__group">
        <h3 class="c-footer-landing-mobile__heading">lorem ipsum dolor sit amet consectetur adipiscing</h3>
        <a class="c-footer-landing-mobile__link" href="#">
          <p class="c-footer-landing-mobile__text">lorem ipsum do</p>
        </a>
      </section>
      <div class="c-footer-landing-mobile__group-2">
        <div class="c-footer-landing-mobile__group-3">
          <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
        </div>
        <nav class="c-footer-landing-mobile__nav">
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ip</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dolor sit</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dolo</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ips</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsu</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsu</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dol</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem i</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem i</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ips</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lore</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">
                <span class="c-footer-landing-mobile__nav-link-icon" aria-hidden="true"></span>
                <span class="c-footer-landing-mobile__text-2">lorem ipsum dolor si</span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">l</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem i</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
            </ul>
          </div>
        </nav>
      </div>
      <div class="c-footer-landing-mobile__group-5">
        <p class="c-footer-landing-mobile__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed d</p>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1728px;
  padding: 56px 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding-bottom: 56px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #33312C;
}

.c-footer-landing-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px 0px 28px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.24px;
}

.c-footer-landing-mobile__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-footer-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-footer-landing-mobile__group-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 56px;
}

.c-footer-landing-mobile__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 56px;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__nav {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-bottom: 56px;
}

.c-footer-landing-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__nav-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing-mobile__nav-link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-right: 4px;
}

.c-footer-landing-mobile__group-5 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  margin-top: 28px;
}

.c-footer-landing-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 224px;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  line-height: 18.2px;
}

.c-footer-landing-mobile__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing-mobile__nav-link:hover {
  color: #CCCAC6;
}

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <a class="c-footer-inner__link" href="#">lorem ip</a>
    <a class="c-footer-inner__link" href="#">lorem</a>
    <span class="c-footer-inner__text">lorem ipsum dolor sit amet c</span>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px;
  position: relative;
  z-index: 10;
  background-color: #FAFAF9;
  color: #706D66;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-footer-inner__link {
  display: block;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  font-weight: 500;
}

.c-footer-inner__link:hover {
  color: #0F0E0D;
}

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
    <a class="c-footer-inner-mobile__link" href="#">lorem</a>
    <span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet c</span>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 28px;
  position: relative;
  z-index: 10;
  background-color: #FAFAF9;
  color: #706D66;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-footer-inner-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  font-weight: 500;
}

.c-footer-inner-mobile__link:hover {
  color: #0F0E0D;
}

<div class="c-footer-link-column-scope">
  <nav class="c-footer-link-column">
    <div class="c-footer-link-column__group">
      <h3 class="c-footer-link-column__title">lorem ip</h3>
      <ul class="c-footer-link-column__list">
        <a class="c-footer-link-column__link" href="#">lorem ip</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum do</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum dolo</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum d</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-footer-link-column__group">
      <h3 class="c-footer-link-column__title">lorem ips</h3>
      <ul class="c-footer-link-column__list">
        <a class="c-footer-link-column__link" href="#">lorem ipsu</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum d</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsu</a>
        <a class="c-footer-link-column__link" href="#">lorem ip</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <li class="c-footer-link-column__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-footer-link-column-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-link-column {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-link-column__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-footer-link-column__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-link-column__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-link-column__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-link-column__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-announcement-banner-scope">
  <header class="c-announcement-banner">
    <div class="c-announcement-banner__group"></div>
    <div class="c-announcement-banner__group-2">
      <div class="c-announcement-banner__group-3">
        <div class="c-announcement-banner__group-4">
          <div class="c-announcement-banner__group-5"></div>
          <button class="c-announcement-banner__button" type="button"></button>
        </div>
      </div>
      <div class="c-announcement-banner__group-6">
        <div class="c-announcement-banner__group-7">
          <div class="c-announcement-banner__group-8"></div>
          <nav class="c-announcement-banner__group-9"></nav>
          <div class="c-announcement-banner__group-10"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-announcement-banner-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-announcement-banner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-announcement-banner__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-announcement-banner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-announcement-banner__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-announcement-banner__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #0F0E0D;
}

.c-announcement-banner__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-announcement-banner__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-announcement-banner__button {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-announcement-banner__group-6 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-announcement-banner__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-announcement-banner__group-8 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-announcement-banner__group-9 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-announcement-banner__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

<div class="c-announcement-banner-2-scope">
  <button class="c-announcement-banner-2" type="button">
    <span class="c-announcement-banner-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-announcement-banner-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-announcement-banner-2 {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-announcement-banner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

<div class="c-input-scope">
  <input class="c-input" type="search" placeholder="lorem ipsum dolor sit amet">
</div>

.c-input-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 298px;
  height: 63px;
  padding: 20px 40px 20px 20px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #33312C;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input:focus {
  border: 1px solid #FAFAF9;
  outline: none;
}

<div class="c-input-2-scope">
  <input class="c-input-2" type="text" placeholder="lorem ipsu">
</div>

.c-input-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-input-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-input-2:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-input-2:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

<div class="c-play-button-scope">
  <button class="c-play-button" type="button"></button>
</div>

.c-play-button-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-play-button {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

<div class="c-logo-carousel-scope">
  <li class="c-logo-carousel">
    <span class="c-logo-carousel__media" aria-hidden="true"></span>
  </li>
</div>

.c-logo-carousel-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo-carousel {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
  padding-right: 24px;
  padding-left: 24px;
}

.c-logo-carousel__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 93px;
  height: 60px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-pagination-scope">
  <nav class="c-pagination">
    <a class="c-pagination__link" href="#">
      <span class="c-pagination__icon" aria-hidden="true"></span>
    </a>
    <ul class="c-pagination__list">
      <a class="c-pagination__link-active" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
    </ul>
    <span class="c-pagination__icon-2" aria-hidden="true"></span>
  </nav>
</div>

.c-pagination-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-pagination {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-right: 24px;
}

.c-pagination__link {
  display: block;
  box-sizing: border-box;
  color: #33312C;
  cursor: auto;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-pagination__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-pagination__list {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-pagination__link-active {
  display: inline;
  box-sizing: border-box;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 8px;
  padding-left: 8px;
}

.c-pagination__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #8F8B85;
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 8px;
  padding-left: 8px;
}

.c-pagination__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

<div class="c-video-player-scope">
  <button class="c-video-player" type="button">
    <div class="c-video-player__group"></div>
  </button>
</div>

.c-video-player-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-video-player {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-video-player__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
  line-height: 0px;
}

<div class="c-link-list-scope">
  <nav class="c-link-list">
    <div class="c-link-list__group">
      <h3 class="c-link-list__title">lorem ip</h3>
      <ul class="c-link-list__list">
        <a class="c-link-list__link" href="#">lorem ip</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem ipsum do</a>
        <a class="c-link-list__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-link-list__link" href="#">lorem ipsum dolo</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <a class="c-link-list__link" href="#">lorem ipsum d</a>
        <a class="c-link-list__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-link-list__group">
      <h3 class="c-link-list__title">lorem ips</h3>
      <ul class="c-link-list__list">
        <a class="c-link-list__link" href="#">lorem ipsu</a>
        <a class="c-link-list__link" href="#">lorem ipsum d</a>
        <a class="c-link-list__link" href="#">lorem ipsu</a>
        <a class="c-link-list__link" href="#">lorem ip</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <li class="c-link-list__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-link-list-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-link-list {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-link-list__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-link-list__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-link-list__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-link-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-link-list__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-banner-scope">
  <header class="c-banner">
    <div class="c-banner__group"></div>
    <div class="c-banner__group-2">
      <div class="c-banner__group-3">
        <div class="c-banner__group-4">
          <div class="c-banner__group-5"></div>
          <button class="c-banner__button" type="button"></button>
        </div>
      </div>
      <div class="c-banner__group-6">
        <div class="c-banner__group-7">
          <div class="c-banner__group-8"></div>
          <nav class="c-banner__group-9"></nav>
          <div class="c-banner__group-10"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-banner-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-banner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-banner__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-banner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-banner__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-banner__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-banner__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-banner__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-banner__button {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-banner__group-6 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-banner__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-banner__group-8 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-banner__group-9 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-banner__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

<div class="c-breadcrumb-scope">
  <nav class="c-breadcrumb">
    <ol class="c-breadcrumb__list">
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="#">
          <span class="c-breadcrumb__text">lorem ip</span>
          <span class="c-breadcrumb__text">l</span>
        </a>
      </li>
      <li class="c-breadcrumb__item">
        <span class="c-breadcrumb__text-active">lorem ipsum do</span>
      </li>
    </ol>
  </nav>
</div>

.c-breadcrumb-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-breadcrumb {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-breadcrumb__item {
  display: list-item;
  box-sizing: border-box;
  color: #706D66;
  font-weight: 500;
  line-height: 20.8px;
}

.c-breadcrumb__link {
  display: inline;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-breadcrumb__text-active {
  display: inline;
  box-sizing: border-box;
  color: #0F0E0D;
}

<div class="c-select-scope">
  <select class="c-select"><option>lorem ips</option></select>
</div>

.c-select-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-select {
  display: block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 736px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 40px 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: default;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-select:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-select:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

<div class="c-select-2-scope">
  <select class="c-select-2"><option>lorem ips</option></select>
</div>

.c-select-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-select-2 {
  display: block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 40px 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: default;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-select-2:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-select-2:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

<div class="c-form-field-group-scope">
  <div class="c-form-field-group">
    <div class="c-form-field-group__group">
      <div class="c-form-field-group__group-2">
        <label class="c-form-field-group__group-3">
          <div class="c-form-field-group__text">l</div>
          <span class="c-form-field-group__text-2">lorem ipsum</span>
        </label>
        <div class="c-form-field-group__field"></div>
      </div>
    </div>
    <div class="c-form-field-group__group-4">
      <div class="c-form-field-group__group-2">
        <label class="c-form-field-group__group-3">
          <div class="c-form-field-group__text">l</div>
          <span class="c-form-field-group__text-2">lorem ipsu</span>
        </label>
        <div class="c-form-field-group__field"></div>
      </div>
    </div>
  </div>
</div>

.c-form-field-group-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-form-field-group {
  display: inline-grid;
  justify-content: center;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  text-align: left;
}

.c-form-field-group__group {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 26px;
  position: relative;
}

.c-form-field-group__group-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  margin-top: auto;
  margin-bottom: 16px;
}

.c-form-field-group__group-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: fit-content;
  position: relative;
  color: #0F0E0D;
  cursor: default;
  font-size: 16px;
  line-height: 20.8px;
  margin-bottom: 8px;
}

.c-form-field-group__text {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  right: -10px;
  padding-left: 5px;
}

.c-form-field-group__field {
  display: block;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-form-field-group__group-4 {
  box-sizing: border-box;
}

<div class="c-logo-item-scope">
  <li class="c-logo-item">
    <span class="c-logo-item__media" aria-hidden="true"></span>
  </li>
</div>

.c-logo-item-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
  padding-right: 24px;
  padding-left: 24px;
}

.c-logo-item__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 93px;
  height: 60px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-checkbox-scope">
  <input class="c-checkbox" type="text" placeholder="lor">
</div>

.c-checkbox-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-checkbox {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: border-color 0.2s ease-in-out;
}

.c-checkbox:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-checkbox:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  outline: none;
}