/* ==========================================================================
   Bellhop-inspired theme for DomiVise (editorial pass)
   Loads last so it re-themes the existing build. Original implementation.
   ========================================================================== */

:root {
  --cream: #f4f4f2;
  --brand-black: #1b150a;
  --deep-green: #164032;
  --green: #4b7f66;
  --sage: #7fa392;
  --orange: #e54e27;
  --blue: #54659c;
  --tan: #e9deca;
  --light-gray: #eaeaea;

  --white: #f4f4f2;
  --black: #1b150a;
  --dark-grey: #164032;
  --yellow: #e54e27;
  --paper-yellow: #f4f4f2;
  --grey-750: #3f3a2f;
  --grey-550: #6f6a5c;
  --grey-350: #c4bead;
  --grey-250: #d9d3c2;
  --grey-150: #eae7dc;
  --grey-100: #f3f1e9;
  --stroke-dark: rgba(27, 21, 10, 0.16);
  --stroke-white: rgba(244, 244, 242, 0.18);

  --font-display: "Lexend", sans-serif;
  --font-body: "Raleway", sans-serif;
  --font-hand: "Caveat", cursive;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 4px; /* sharp, editorial corner */
}

/* --------------------------------------------------------------------------
   Base + typography
   -------------------------------------------------------------------------- */

html { background-color: var(--brand-black); }

body {
  font-family: var(--font-body);
  background-color: var(--brand-black);
  color: var(--brand-black);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .h2, .h3, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 500;
}
.display-1 { letter-spacing: -0.035em; }
.display-2 { letter-spacing: -0.035em; }
.h2, .h3 { letter-spacing: -0.025em; }
.h5, .h6 { letter-spacing: -0.02em; }

.subtitle-1 { font-family: var(--font-body); font-weight: 500; }
.subtitle-2 { font-family: var(--font-body); }
.body-medium { font-family: var(--font-body); }

.label, .category-label, .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
.category-label { gap: 0.75rem; }
.category-label_square {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--orange);
}

.handwritten {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.28em;
  line-height: 0.85;
  letter-spacing: 0;
  color: var(--orange);
  transform: rotate(-2deg);
  display: inline-block;
  vertical-align: -0.06em;
  padding-inline: 0.06em;
}

::selection { background: var(--orange); color: var(--cream); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--deep-green); border-radius: 0; }

/* --------------------------------------------------------------------------
   Background tokens
   -------------------------------------------------------------------------- */

.bg-paper-yellow { background-color: var(--cream); }
.bg-grey-150 { background-color: var(--light-gray); }
.bg-primary-yellow { background-color: var(--tan); }
.bg-dark-grey { background-color: var(--deep-green); }
.bg-black { background-color: var(--brand-black); }
.text-white { color: var(--cream); }
.text-dark-grey { color: var(--deep-green); }
.page-wrapper { background-color: var(--cream); }

/* --------------------------------------------------------------------------
   Buttons — sharp, editorial (no pills)
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1.125rem 2rem;
  border-radius: 0;
}
.btn_primary { background-color: var(--deep-green); color: var(--cream); }
.btn_primary:hover { background-color: var(--orange); color: var(--cream); }
.btn_secondary {
  border: 1px solid var(--stroke-dark);
  background: transparent;
  color: var(--deep-green);
  border-radius: 0;
}
.btn_secondary:hover { background-color: var(--deep-green); color: var(--cream); }

.btn_nav-cta {
  background-color: var(--orange);
  color: var(--cream);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}
.btn_nav-cta:hover { background-color: var(--deep-green); color: var(--cream); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav_brand { color: var(--brand-black); }
.nav_bar {
  background-color: var(--cream);
  color: var(--brand-black);
  border: 1px solid var(--stroke-dark);
  border-radius: 0;
}
.nav_links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-black);
}
.nav_links a:hover { color: var(--orange); }
.nav_background { background-color: var(--deep-green); }
.nav_overlay-ul a { font-family: var(--font-display); color: var(--cream); }
.nav_overlay-ul a:hover { color: var(--orange); }
.nav.menu-open .nav_brand,
.nav.menu-open .nav_cta { color: var(--cream); }

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.loader_layer.bg-primary-yellow { background-color: var(--cream); }
.loader_layer.bg-dark-grey { background-color: var(--green); }
.loader_layer.bg-black { background-color: var(--brand-black); }

/* --------------------------------------------------------------------------
   Hero — editorial, layered
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.hero_media-bg { position: absolute; inset: 0; z-index: 0; }
.hero_media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  transform: scale(1.05);
}
.hero_media-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 244, 242, 0.9), rgba(244, 244, 242, 0.96) 55%, var(--cream));
}

.hero_top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 4rem;
  align-items: center;
  padding-top: 11rem;
  padding-bottom: 7rem;
  min-height: 100vh;
}

.hero_copy .display-1 { margin-bottom: 2rem; }
.hero_subtitle {
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 500;
  max-width: 34ch;
  margin-top: 1.5rem;
  color: var(--brand-black);
}
.hero_ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero_list { margin-top: 3rem; }
.hero_list li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--stroke-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand-black);
}
.hero_list li:last-child { border-bottom: 1px solid var(--stroke-dark); }
.hero_list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
  flex: none;
}

.hero_media { position: relative; }
.hero_media-main {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 0;
}
.hero_media-main video { width: 100%; height: 100%; object-fit: cover; }
.hero_media-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: var(--deep-green);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero_media-card {
  position: absolute;
  left: -3.5rem;
  bottom: -3.5rem;
  width: 44%;
  overflow: hidden;
  border: 5px solid var(--cream);
}
.hero_media-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero_media-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.625rem 0.75rem;
  background: rgba(27, 21, 10, 0.82);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero_stat {
  position: absolute;
  top: -1.5rem;
  right: -1rem;
  background: var(--orange);
  color: var(--cream);
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.hero_stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 600;
}
.hero_stat span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.hero_scroll {
  position: absolute;
  left: 2.5rem;
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-black);
  text-decoration: none;
}
.hero_scroll-line {
  width: 1px;
  height: 3rem;
  background: var(--brand-black);
  display: block;
  overflow: hidden;
  position: relative;
}
.hero_scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: var(--orange);
  animation: hero-scroll 2s var(--ease) infinite;
}
@keyframes hero-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(300%); }
}

/* --------------------------------------------------------------------------
   Collage
   -------------------------------------------------------------------------- */

.collage { padding-block: 7rem; }
.collage_head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
.collage_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 11rem;
  gap: 1rem;
}
.collage_item {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.collage_item img { width: 100%; height: 100%; object-fit: cover; }
.collage_item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(27, 21, 10, 0.75));
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
}
.c-wide { grid-column: span 2; grid-row: span 2; }
.c-tall { grid-row: span 2; }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee_band { padding-block: 4rem; }
.marquee--big { padding-block: 2.5rem; border-block: 1px solid var(--grey-250); }
.dv-marquee-track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-black);
}
.dv-marquee-track span::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Difference (before / after)
   -------------------------------------------------------------------------- */

.difference { padding-block: 7rem; }
.difference_intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: start;
  margin-top: 0;
}
.difference_intro .h2 { margin-bottom: 0; }

.dv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.dv-card {
  background-color: var(--white);
  border: 1px solid var(--grey-250);
  border-radius: 0;
  padding: 2rem;
}
.dv-card_dark { background-color: var(--deep-green); color: var(--cream); border-color: var(--deep-green); }
.dv-card_dark .label { color: var(--sage); }
.dv-card .label { margin-bottom: 1.25rem; color: inherit; opacity: 0.6; }
.dv-card-list { display: grid; gap: 0.875rem; }
.dv-card-list li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.4; }
.dv-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4375rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   Cine (full-bleed video)
   -------------------------------------------------------------------------- */

.cine { position: relative; padding: 0; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.cine_media { position: absolute; inset: 0; overflow: hidden; }
.cine_media video { width: 100%; height: 100%; object-fit: cover; }
.cine_veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 21, 10, 0.05), rgba(27, 21, 10, 0.72));
}
.cine_copy { position: relative; z-index: 2; padding-bottom: 6rem; color: var(--cream); }
.cine_copy .label { color: var(--sage); }
.cine_copy .display-2 { max-width: 20ch; margin-block: 1.25rem; }
.cine_copy .subtitle-2 { max-width: 46ch; color: rgba(244, 244, 242, 0.85); }

/* --------------------------------------------------------------------------
   Product mock
   -------------------------------------------------------------------------- */

.product { background: var(--deep-green); color: var(--cream); padding-block: 8rem; }
.product_grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 5rem;
  align-items: center;
}
.product_copy .category-label { color: var(--sage); }
.product_copy .subtitle-1 { margin-top: 1.5rem; color: rgba(244, 244, 242, 0.9); max-width: 44ch; }

.dv-mock {
  width: min(30rem, 100%);
  margin-inline: auto;
  border: 1px solid var(--stroke-white);
  background-color: rgba(244, 244, 242, 0.06);
  padding: 1.75rem;
  display: grid;
  gap: 0.875rem;
  border-radius: 0;
}
.dv-mock_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dv-mock_head strong { display: block; font-size: 1.125rem; font-weight: 500; }
.dv-mock_head span { font-size: 0.875rem; color: rgba(244, 244, 242, 0.55); }
.dv-mock_score { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.5rem; }
.dv-score-ring {
  width: 4.5rem; height: 4.5rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--orange) 0 86%, rgba(244, 244, 242, 0.16) 86% 100%);
}
.dv-score-ring b {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--deep-green); color: var(--cream); font-size: 1.25rem; font-weight: 500;
}
.dv-mock_score strong { display: block; font-weight: 500; }
.dv-mock_score div span { font-size: 0.875rem; color: rgba(244, 244, 242, 0.55); }
.dv-mock_row { display: flex; align-items: center; gap: 0.875rem; padding-block: 0.75rem; border-top: 1px solid var(--stroke-white); }
.dv-square { width: 0.625rem; height: 0.625rem; background: var(--orange); flex: none; }
.dv-mock_row > div { min-width: 0; }
.dv-mock_row strong { display: block; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-mock_row span { font-size: 0.8125rem; color: rgba(244, 244, 242, 0.5); }
.dv-pill {
  margin-left: auto; flex: none; font-style: normal;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3125rem 0.625rem; border: 1px solid var(--stroke-white); border-radius: 0;
}
.dv-pill_yellow { background: var(--orange); color: var(--cream); border-color: var(--orange); }
.dv-mock_tip { border-left: 2px solid var(--orange); padding: 0.25rem 0 0.25rem 1rem; }
.dv-mock_tip p { font-size: 0.9375rem; line-height: 1.45; color: rgba(244, 244, 242, 0.75); margin: 0; }
.dv-mock_tip strong { color: var(--cream); font-weight: 500; }

/* --------------------------------------------------------------------------
   Feature / benefit tabs — full opacity (no fading)
   -------------------------------------------------------------------------- */

.tab { opacity: 1; }
.tab p { color: var(--grey-750); }
.tab_icon {
  fill: var(--cream);
  stroke: var(--brand-black);
  stroke-opacity: 0.22;
  border-radius: 0;
}
.tab:hover { opacity: 1; }
.tab.is-active .rule { background: var(--orange); }
.dv-feature-grid .tab .label { color: var(--orange); }
.how_header { max-width: 62rem; }

/* Features — close the airy gap between the header text and the card grid */
.tabs .how_header { gap: 1.25rem; }
.tabs_grid .tab { padding-top: 1.25rem; }
.tabs_grid .rule { margin-top: -1.25rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */

.dv-chips li {
  border-radius: 0;
  background: var(--white);
  border: 1px solid var(--grey-250);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Health check
   -------------------------------------------------------------------------- */

.dv-hc_arc { stroke: var(--deep-green); }
.dv-hc_center strong { font-family: var(--font-display); }
.dv-status {
  background-color: var(--tan);
  border: 1px solid var(--grey-250);
  border-radius: 0;
  padding: 2rem 2.5rem;
}

/* --------------------------------------------------------------------------
   Join form
   -------------------------------------------------------------------------- */

.dv-form { background-color: var(--white); border: 1px solid var(--grey-250); border-radius: 0; padding: 2.5rem; }
.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.field input, .field select, .field textarea {
  background-color: var(--white);
  border: 1px solid var(--grey-250);
  border-radius: 0;
  font-family: var(--font-body);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--deep-green); }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.accordion_item { border-top: 1px solid var(--grey-250); }
.accordion_item:last-child { border-bottom: 1px solid var(--grey-250); }
.accordion_icon { border: 1px solid var(--stroke-dark); border-radius: 0; }
.accordion_item[open] .accordion_icon { background-color: var(--orange); color: var(--cream); }

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.testimonial_quote { font-family: var(--font-display); }
.testimonial_cover { background-color: var(--cream); }
.testimonial_bg img { border-radius: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background-color: var(--deep-green); color: var(--cream); }
.footer_nav-main { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.footer_nav-main li:nth-child(even) { color: var(--sage); }
.footer_nav-main a:hover { color: var(--orange); }
.footer_nav-small a { color: rgba(244, 244, 242, 0.72); font-family: var(--font-body); }
.footer_nav-small a:hover { color: var(--orange); }
.footer_contact .label { color: var(--sage); }
.footer_credentials { color: rgba(244, 244, 242, 0.6); }
.footer_contact p,
.footer_credentials p { overflow-wrap: anywhere; }
.footer_credits { border-top: 1px solid var(--stroke-white); color: rgba(244, 244, 242, 0.55); }
.footer_brand { background-color: var(--tan); color: var(--deep-green); }
.footer_brand .label { color: var(--deep-green); }

/* --------------------------------------------------------------------------
   Custom cursor — square (no pills)
   -------------------------------------------------------------------------- */

html.bell-cursor-active, html.bell-cursor-active * { cursor: none !important; }

.bell-cursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.bell-cursor_dot, .bell-cursor_ring { position: absolute; top: 0; left: 0; display: block; will-change: transform; }
.bell-cursor_dot { width: 8px; height: 8px; background: var(--orange); }
.bell-cursor_ring {
  width: 34px; height: 34px;
  border: 1.5px solid var(--orange);
  opacity: 0.55;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s ease,
    background-color 0.3s ease, border-color 0.3s ease;
}
.bell-cursor.is-active .bell-cursor_ring {
  width: 52px; height: 52px;
  background: var(--orange);
  border-color: var(--orange);
  opacity: 0.18;
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll media
   -------------------------------------------------------------------------- */

[data-reveal] { will-change: transform, clip-path; }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.dv-legal-draft { background-color: var(--white); border: 1px solid var(--grey-250); border-radius: 0; }
.dv-legal-body p, .dv-legal-body li, .dv-legal-list { color: var(--grey-750); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .hero_top { grid-template-columns: 1fr; min-height: 0; padding-top: 9rem; gap: 3rem; }
  .hero_media-card { left: -1rem; bottom: -1rem; }
  .hero_stat { right: 0; }
  .collage_grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
  .c-wide { grid-column: span 2; }
  .collage_head { grid-template-columns: 1fr; }
  .product_grid { grid-template-columns: 1fr; gap: 3rem; }
  .difference_intro { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media screen and (max-width: 767px) {
  .container { max-width: calc(100% - 2.5rem); }
  .hero_scroll { display: none; }
  .hero_copy .display-1 {
    font-size: 2.25rem;
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .hero_copy .display-1 .line-inner {
    white-space: normal;
  }
  .hero_copy .subtitle-2,
  .hero_subtitle {
    overflow-wrap: anywhere;
  }
  .hero_copy .subtitle-2 { max-width: 22ch; }
  .hero_subtitle {
    font-size: 1.125rem;
    max-width: 29ch;
  }
  .hero_scope {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }
  .hero_ctas .btn {
    width: 100%;
    padding-inline: 0.875rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }
  .hero_ctas .btn_text { width: 100%; }
  .hero_ctas .btn_label {
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .hero_list li {
    justify-content: flex-start;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .hero_media-card { display: none; }
  .hero_stat { position: static; display: inline-flex; gap: 0.75rem; align-items: baseline; text-align: left; margin-top: 1rem; }
  .hero_stat strong { font-size: 2rem; }
  .collage_grid { grid-template-columns: 1fr; grid-auto-rows: 14rem; }
  .c-wide, .c-tall { grid-column: span 1; grid-row: span 1; }
  .dv-marquee-track span { font-size: 1.75rem; }
  .dv-compare { grid-template-columns: 1fr; }
  .cine { min-height: 70vh; }
  .cine_copy .display-2 { font-size: 2.5rem; }
}
