@charset "UTF-8";
/* ========================================
   Clover Residence - Promo LP Styles
   Figma design implementation
   ======================================== */

:root {
  --color-black: #35353a;
  --color-gold: #d3a925;
  --color-gold-light: #e0c382;
  --color-white: #fdfdff;
  --width-contents: 1280px;
  --font-serif-jp: "Noto Serif JP", serif;
  --font-serif-en: "Roboto Serif", "DM Serif Display", Georgia, serif;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}

.c-br_sp, .p-sp-only {
  display: none;
}
@media (max-width: 520px) {
  .c-br_sp, .p-sp-only {
    display: block;
  }
}
.p-promo {
  background: #fff;
  width: 100%;
  /* min-width: var(--width-contents); */
}
@media (max-width: 768px) {
  .p-promo {
    background-color: #f5f5f7;
  }
}

.p-promo__contents {
  /* max-width: var(--width-contents); */
  margin: 0 auto;
  overflow: hidden;
}
@media (max-width: 768px) {
  .p-promo__contents {
    overflow: visible;
  }
}

/* ----------------------------------------
   MV - Annotation (Campaign bar)
   ---------------------------------------- */
.p-promo__annotation {
  /* height: 100px; */
  background: linear-gradient(to right, #fff 0%, var(--color-gold-light) 51.442%, #fff 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 10px;
  gap: 20px;
}
@media (max-width: 520px) {
  .p-promo__annotation {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 12px;
    box-sizing: border-box;
    gap: 0px;
  }
}

.p-promo__annotation-date {
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
  white-space: nowrap;
  /* flex-basis: 10%; */
  align-self: end;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .p-promo__annotation-date {
    font-size: 3vw;
    margin-bottom: 0px;
    align-self: end;
    margin-bottom: 10px;
  }
}
@media (max-width: 520px) {
  .p-promo__annotation-date {
    font-size: 6vw;
    align-self: center;
    margin-bottom: 0px;
  }
}

.p-promo__annotation-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px 20px;
  /* flex-wrap: wrap; */
  /* flex-basis: 35%; */
}
@media (max-width: 520px) {
  .p-promo__annotation-inner {
    flex-basis: auto;
    gap: 0 8px;
    margin-top: -10px;
  }
}

.p-promo__annotation-label {
  font-family: var(--font-serif-jp);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  .p-promo__annotation-label {
    font-size: 5vw;
  }
}
@media (max-width: 520px) {
  .p-promo__annotation-label {
    font-size: 7vw;
  }
}

.p-promo__annotation-zero {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--color-gold);
  letter-spacing: -3.84px;
  text-shadow: 0 0 15px var(--color-white);
  margin: 0 -10px -7px 0;
}
@media (max-width: 768px) {
  .p-promo__annotation-zero {
    font-size: 10vw;
  }
}
@media (max-width: 520px) {
  .p-promo__annotation-zero {
    font-size: 14vw;
    margin: 0 -4px -5px 0;
    letter-spacing: 0px;
  }
}

/* ----------------------------------------
   MV - Main visual image
   ---------------------------------------- */
.p-promo__mv {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  .p-promo__mv {
    align-items: stretch;
  }
}

.p-promo__mv-image-wrap {
  width: 100%;
  background-color: #d8d8da;
}
@media (max-width: 768px) {
  .p-promo__mv-image-wrap {
    background-color: #151517;
  }
}

.p-promo__mv-image {
  max-width: var(--width-contents);
  margin: auto;
}
@media (max-width: 768px) {
  .p-promo__mv-image {
    max-width: 768px;
  }
}

/* ----------------------------------------
   Gallery
   ---------------------------------------- */
.p-promo__gallery {
  width: 100%;
  max-width: var(--width-contents);
  background: #fff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  .p-promo__gallery {
    padding: 48px 16px 56px;
    box-sizing: border-box;
    align-items: center;
  }
}

.p-promo__gallery-title {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--color-black);
  text-align: center;
  margin: 0 0 24px;
}
@media (max-width: 768px) {
  .p-promo__gallery-title {
    font-size: 32px;
    margin-bottom: 20px;
  }
}

.p-promo__gallery-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 24px;
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}
@media (max-width: 768px) {
  .p-promo__gallery-note {
    font-size: 10px;
    margin-bottom: 20px;
    align-items: center;
    text-align: center;
  }
}

.p-promo__gallery-note p {
  margin: 0;
}

.p-promo__gallery-grid {
  width: 100%;
  max-width: 1135px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .p-promo__gallery-grid {
    max-width: 343px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }
}

.p-promo__gallery-item {
  position: relative;
  aspect-ratio: 976 / 601;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 768px) {
  .p-promo__gallery-item {
    aspect-ratio: 159 / 106;
  }
}

.p-promo__gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.p-promo__gallery-item--05::before,
.p-promo__gallery-item--10::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(53, 53, 58, 0.1);
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------
   Detail wrapper
   ---------------------------------------- */
.p-promo__detail {
  background: #fff;
  width: 100%;
}

/* ----------------------------------------
   Floor plan
   ---------------------------------------- */
.p-promo__floorplan {
  background: var(--color-black);
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (max-width: 768px) {
  .p-promo__floorplan {
    padding: 48px 16px 56px;
    box-sizing: border-box;
    gap: 24px;
  }
}

.p-promo__floorplan-title {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: #fff;
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  .p-promo__floorplan-title {
    font-size: 32px;
  }
}
.p-promo__floorplan-note {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  .p-promo__floorplan-note {
    font-size: 14px;
  }
}
/* slick のレイアウトと競合するので SP では flex を解除 */
.p-promo__floorplan-list {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 960px;
}
@media (max-width: 768px) {
  .p-promo__floorplan-list {
    display: block;
    width: 100%;
    max-width: 343px;
    margin: 0 auto;
  }
}

/* slick が 1 スライド = 1 card として slidesToShow: 2 で横に並べる */
.p-promo__floorplan-card {
  width: 116px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  .p-promo__floorplan-card {
    width: auto;
    max-width: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
  }
}

.p-promo__floorplan-image {
  width: 100%;
  height: 238px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-promo__floorplan-image img {
  max-width: 86px;
  max-height: 207px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .p-promo__floorplan-image img {
    max-width: 100%;
    max-height: 100%;
  }
}

.p-promo__floorplan-info {
  width: 100%;
  padding-top: 0;
  position: relative;
  text-align: center;
}

.p-promo__floorplan-info::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: url("../images/line.svg") center no-repeat;
  background-size: 100% 1px;
  margin-bottom: 10px;
}

.p-promo__floorplan-type {
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  margin: 0 0 5px;
}

.p-promo__floorplan-num {
  font-size: 48px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .p-promo__floorplan-num {
    font-size: 40px;
  }
}

.p-promo__floorplan-room {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 32px;
  color: var(--color-white);
  letter-spacing: 3.6px;
  margin: 0 0 5px;
}
@media (max-width: 768px) {
  .p-promo__floorplan-room {
    font-size: 26px;
  }
}

.p-promo__floorplan-room .p-promo__floorplan-num {
  font-size: 36px;
  letter-spacing: 3.6px;
}
@media (max-width: 768px) {
  .p-promo__floorplan-room .p-promo__floorplan-num {
    font-size: 26px;
  }
}

.p-promo__floorplan-area {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-white);
  margin: 0;
}

/* slick dots (Floor plan SP) */
@media (max-width: 768px) {
  .p-promo__floorplan .slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    list-style: none;
  }

  .p-promo__floorplan .slick-dots li {
    width: 8px;
    height: 8px;
  }

  .p-promo__floorplan .slick-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    /* opacity: 0.3; */
    border: none;
    padding: 0;
    text-indent: -9999px;
  }

  .p-promo__floorplan .slick-dots .slick-active button {
    background: #d3a925;
    opacity: 1;
  }
}

/* CTA button */
.p-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 410px;
  max-width: 100%;
  padding: 10px 24px;
  background: var(--color-black);
  color: #fff;
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
@media (max-width: 768px) {
  .p-promo__cta {
    width: 100%;
    max-width: 335px;
    font-size: 16px;
    padding-block: 14px;
  }
}

.p-promo__cta:hover {
  opacity: 0.9;
}

.p-promo__cta--outline {
  border: 1px solid #fff;
  background: transparent;
}
@media (max-width: 768px) {
  .p-promo__cta--outline {
    width: 100%;
    max-width: 335px;
    font-size: 16px;
    padding-block: 14px;
  }
}

.p-promo__cta--outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

.p-promo__cta-arrow {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: url("../images/arrow.svg") center no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .p-promo__cta-arrow {
    width: 6px;
    height: 10px;
  }
}

/* ----------------------------------------
   Access
   ---------------------------------------- */
.p-promo__access {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (max-width: 768px) {
  .p-promo__access {
    padding: 48px 16px 56px;
    box-sizing: border-box;
    gap: 24px;
    align-items: stretch;
  }
}

.p-promo__access-title {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--color-black);
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  .p-promo__access-title {
    font-size: 32px;
  }
}

/* stations wrapper */
.p-promo__access-stations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 821px;
  line-height: normal;
}
@media (max-width: 768px) {
  .p-promo__access-stations {
    flex-direction: column;
    width: 100%;
    gap: 32px;
  }
}
@media (max-width: 520px) {
  .p-promo__access-stations {
    gap: 0px;
  }
}

/* ---- 左側: 放出駅（Figma inline-grid overlap） ---- */
.p-promo__access-main {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  white-space: nowrap;
  color: var(--color-black);
}
@media (max-width: 768px) {
  .p-promo__access-main {
    transform: scale(0.7);
    /* transform-origin: left top; */
  }
}

/* すべての子を同一セル(col1/row1)に重ねる */
.p-promo__access-main > p {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.p-promo__access-main__line {
  margin-top: 1px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.96px;
}

.p-promo__access-main__name {
  margin-top: 50px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -1.92px;
}

.p-promo__access-main__walk {
  margin-top: 50px !important;
  margin-left: 220px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -1.92px;
}

.p-promo__access-main__num {
  margin-top: 0 !important;
  margin-left: 319px !important;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-size: 96px;
  letter-spacing: -3.84px;
  color: var(--color-gold);
}

.p-promo__access-main__unit {
  margin-top: 50px !important;
  margin-left: 368px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -1.92px;
}

/* ---- 右側: 今福鶴見・深江橋（Figma inline-grid overlap） ---- */
.p-promo__access-sub {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}
@media (max-width: 768px) {
  .p-promo__access-sub {
    transform: scale(0.8);
    /* transform-origin: left top; */
  }
}
@media (max-width: 520px) {
  .p-promo__access-sub {
    margin-top: -30px;
  }
}
/* 両サブアイテムを同一セルに重ねる */
.p-promo__access-sub-item {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  white-space: nowrap;
  color: var(--color-black);
}

/* 深江橋駅は mt-87px でオフセット */
.p-promo__access-sub-item--2 {
  margin-top: 87px;
}

/* 各サブアイテム内も子要素を同一セルに重ねる */
.p-promo__access-sub-item > p {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

/* 今福鶴見駅 */
.p-promo__access-sub-item__line {
  margin-top: 13px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.64px;
}

.p-promo__access-sub-item__name {
  margin-top: 38px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.96px;
}

.p-promo__access-sub-item__walk {
  margin-top: 38px !important;
  margin-left: 180px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.96px;
}

.p-promo__access-sub-item__num {
  margin-top: 0 !important;
  margin-left: 242px !important;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-size: 64px;
  color: var(--color-gold);
}

.p-promo__access-sub-item__num.u-black_color {
  color: var(--color-black);
}

.p-promo__access-sub-item__unit {
  margin-top: 38px !important;
  margin-left: 310px !important;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.96px;
}

/* 深江橋駅: mt は +1px、num の letter-spacing と ml が異なる */
.p-promo__access-sub-item--2 .p-promo__access-sub-item__line {
  margin-top: 14px !important;
}

.p-promo__access-sub-item--2 .p-promo__access-sub-item__name {
  margin-top: 39px !important;
}

.p-promo__access-sub-item--2 .p-promo__access-sub-item__walk {
  margin-top: 39px !important;
  margin-left: 179px !important;
}

.p-promo__access-sub-item--2 .p-promo__access-sub-item__num {
  margin-left: 235px !important;
}

.p-promo__access-sub-item__num--20 {
  letter-spacing: -2.56px;
}

.p-promo__access-sub-item--2 .p-promo__access-sub-item__unit {
  margin-top: 39px !important;
  margin-left: 309px !important;
}

.p-promo__access-bottom {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .p-promo__access-bottom {
    flex-direction: column;
    gap: 16px;
  }
}

.p-promo__access-map {
  width: 407px;
  height: 391px;
  border: 1px solid var(--color-black);
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .p-promo__access-map {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 322;
  }
}

.p-promo__access-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-promo__access-detail {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-black);
}
@media (max-width: 768px) {
  .p-promo__access-detail {
    font-size: 11px;
  }
}

.p-promo__access-detail p {
  margin: 0 0 0.25em;
}

.p-promo__access-detail p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   Gallery Modal (Figma: node 143:986)
   ---------------------------------------- */

/* モーダル全体: fixed で viewport を覆う */
.p-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
}

.p-modal[hidden] {
  display: none;
}

/* 暗いオーバーレイ */
.p-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(53, 53, 58, 0.9);
  cursor: pointer;
}

/* モーダル内コンテンツ: flex column で高さ全体を使う */
.p-modal__inner {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* モバイルブラウザのアドレスバーを考慮 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 上: 閉じるボタン領域 / 下・左右: 余白 */
  padding: 70px 24px 20px;
  gap: 16px;
  pointer-events: none;
}
@media (max-width: 520px) {
  .p-modal__inner {
    padding: 52px 8px 16px;
    gap: 10px;
  }
}

/* 閉じるボタン (Figma: right 129px, top 60px) */
.p-modal__close:focus {
  outline: none;
}

.p-modal__close {
  position: absolute;
  top: clamp(12px, 1vh, 60px);
  right: clamp(12px, 1vw, 129px);
  width: 33px;
  height: 33px;
  background: none;
  border: none;
  padding: 8px;
  box-sizing: content-box;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
}

.p-modal__close::before,
.p-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 33px;
  height: 5px;
  background: #fff;
  border-radius: 1px;
}
@media (max-width: 520px) {
  .p-modal__close::before,
  .p-modal__close::after {
    height: 3px;
  }
}

.p-modal__close::before {
  transform: translateY(-50%) rotate(45deg);
}

.p-modal__close::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* 画像 + ナビ矢印エリア: 残りの縦スペースを使う */
.p-modal__nav-area {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 40px);
  pointer-events: auto;
  /* flex: 1 1 0; */
  min-height: 0;
  justify-content: center;
  width: 100%;
}
@media (max-width: 520px) {
  .p-modal__nav-area {
    gap: 6px;
    /* flex: 0 0 auto; */
  }
}

/*
 * 画像ラッパー: 幅・高さ両軸の制約を min() で同時計算
 *
 * 横制約: 画面幅 − 左右padding(48px) − 矢印+gap(132px) ≒ 100vw − 180px
 * 縦制約: 画面高 − 上padding(70px) − gap(16px) − キャプション(55px) − 下padding(20px) = 100dvh − 161px
 *         縦制約を横幅に換算: × (887/546)
 * アスペクト比 887:546 は height = width × (546/887) で自動維持
 */
.p-modal__image-wrap {
  aspect-ratio: 887 / 546;
  width: min(887px, calc(100vw - 180px), calc((100dvh - 161px) * 887 / 546));
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .p-modal__image-wrap {
    width: min(887px, calc(100vw - 80px), calc((100dvh - 130px) * 887 / 546));
  }
}

.p-modal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 前へ / 次へ ボタン (Figma: 26x42px の矢印) */
.p-modal__prev,
.p-modal__next {
  width: 26px;
  height: 42px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  pointer-events: auto;
}
@media (max-width: 520px) {
  .p-modal__prev,
  .p-modal__next {
    width: 20px;
    height: 32px;
  }
}

.p-modal__prev::before,
.p-modal__next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border: 5px solid #fff;
  border-right: none;
  border-bottom: none;
  border-radius: 1px;
}
@media (max-width: 520px) {
  .p-modal__prev::before,
  .p-modal__next::before {
    width: 13px;
    height: 13px;
  }
}

.p-modal__prev::before {
  transform: translate(-25%, -50%) rotate(-45deg);
}

.p-modal__next::before {
  transform: translate(-75%, -50%) rotate(135deg);
}

/* キャプション (Figma: centered, white, 16px bold) */
.p-modal__caption {
  text-align: center;
  font-family: var(--font-serif-jp);
  font-weight: 700;
  font-size: clamp(10px, 1.3vw, 16px);
  line-height: 1.5;
  color: #fff;
  pointer-events: none;
  flex-shrink: 0;
  max-width: 900px;
  padding: 0 8px;
}
@media (max-width: 520px) {
  .p-modal__caption {
    font-size: clamp(9px, 2.5vw, 13px);
  }
}

.p-modal__caption p {
  margin: 0;
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */
.p-promo__footer {
  background: var(--color-black);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .p-promo__footer {
    padding-inline: 16px;
  }
}

.p-promo__footer-copy {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: -0.4px;
  color: #fff;
  text-align: center;
  margin: 0;
  max-width: 573px;
}
@media (max-width: 768px) {
  .p-promo__footer-copy {
    font-size: 9px;
  }
}
/* ----------------------------------------
   Component: Accessibility Hidden
   ---------------------------------------- */

.c-accessibility__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}