/* Sahtain About page — matched to sahtain.sa/about.html (px units) */

.sahtain-about-page {
  width: 100%;
  background: #fbfdff;
  color: var(--about-heading, #0b2340);
  font-family: inherit;
  font-size: 16px;
  --about-heading-scale: var(--about-heading-scale-web, 1);
  --about-text-scale: var(--about-text-scale-web, 1);
  --about-accent-scale: var(--about-accent-scale-web, 1);
  --about-btn-scale: var(--about-btn-scale-web, 1);
  --about-heading-lh: var(--about-heading-lh-web, 1);
  --about-text-lh: var(--about-text-lh-web, 1);
  --about-accent-lh: var(--about-accent-lh-web, 1);
  --about-btn-lh: var(--about-btn-lh-web, 1);
}

.sahtain-about-page *,
.sahtain-about-page *::before,
.sahtain-about-page *::after {
  box-sizing: border-box;
}

.about-section-label {
  color: var(--about-accent, #0756a8);
  font-size: calc(10.88px * var(--about-accent-scale, 1));
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: calc(1 * var(--about-accent-lh, 1));
  padding-top: 12px;
  font-family: inherit;
}

.about-section-label--static {
  position: static;
  padding: 0 0 14px;
}

.about-section-label--story {
  position: sticky;
  top: 120px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* —— Hero —— (matched to sahtain.sa/about.html desktop + mobile) */
.sahtain-about-hero {
  position: relative;
  min-height: 100svh;
  padding: 130px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 24%, rgba(83, 182, 241, 0.17), transparent 448px),
    radial-gradient(circle at 82% 76%, rgba(38, 133, 211, 0.1), transparent 544px),
    linear-gradient(#ffffff 0%, #f6fbff 62%, #eef7ff 100%);
}

.sahtain-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background: linear-gradient(90deg, transparent 49.92%, rgba(14, 92, 162, 0.03) 50%, transparent 50.08%) 0 0 / 220px 100%;
  mask-image: linear-gradient(transparent, #000 16%, #000 82%, transparent);
}

.sahtain-about-hero.has-banner {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.86%), transparent) 0%,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.55%), transparent) 46%,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.22%), transparent) 100%),
    var(--about-hero-banner) center / cover no-repeat;
}

.sahtain-about-hero.has-banner.is-ltr {
  background:
    linear-gradient(270deg,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.86%), transparent) 0%,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.55%), transparent) 46%,
      color-mix(in srgb, var(--about-overlay-color, #fff) calc(var(--about-overlay-opacity, 100) * 0.22%), transparent) 100%),
    var(--about-hero-banner) center / cover no-repeat;
}

.sahtain-about-hero.has-banner::before {
  opacity: 0.18;
}

.about-hero__shell {
  position: relative;
  z-index: 1;
  width: min(1380px, calc(100% - 48px));
  min-height: calc(100svh - 210px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
  direction: rtl;
}

.sahtain-about-hero.is-ltr .about-hero__shell {
  direction: ltr !important;
}

.about-hero__copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  text-align: right;
}

.sahtain-about-hero.is-ltr .about-hero__copy {
  text-align: left;
  direction: ltr;
}

.about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--about-accent, #0756a8);
  font-size: calc(13.44px * var(--about-accent-scale, 1));
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.about-hero__eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: currentColor;
}

.sahtain-about-hero.is-ltr .about-hero__eyebrow {
  justify-content: flex-start;
}

.sahtain-about-hero.is-ltr .about-hero__eyebrow::after {
  order: -1;
}

.about-hero__title {
  margin: 0;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(48px, 6.4vw, 108.8px) * var(--about-heading-scale, 1));
  font-weight: 300;
  line-height: calc(1.16 * var(--about-heading-lh, 1));
  letter-spacing: -0.012em;
}

.sahtain-about-hero.is-ltr .about-hero__title {
  font-size: calc(clamp(48px, 4.7vw, 89.6px) * var(--about-heading-scale, 1));
}

.about-hero__line {
  display: block;
  white-space: nowrap;
}

.about-hero__title strong {
  display: block;
  margin-top: 0.08em;
  color: var(--about-accent, #0756a8);
  font-weight: 900;
  white-space: nowrap;
}

.sahtain-about-hero.is-ltr .about-hero__line,
.sahtain-about-hero.is-ltr .about-hero__title strong {
  white-space: normal;
}

.about-hero__lead {
  margin: 28px 0 0;
  max-width: 48ch;
  color: var(--about-text, #5d7892);
  font-size: calc(clamp(16px, 1.22vw, 18.88px) * var(--about-text-scale, 1));
  line-height: calc(1.95 * var(--about-text-lh, 1));
}

.sahtain-about-hero.is-ltr .about-hero__lead {
  text-align: left;
}

.about-hero__points {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sahtain-about-hero.is-ltr .about-hero__points {
  justify-content: flex-start;
  direction: ltr;
}

.about-hero__point {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(16, 91, 160, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(8, 55, 98, 0.04);
  color: var(--about-text, #41627f);
  font-size: calc(11.84px * var(--about-text-scale, 1));
  font-weight: 700;
}

.about-hero__point svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--about-accent, #0756a8);
}

.about-hero__product {
  position: relative;
  min-height: 680px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  isolation: isolate;
}

.about-hero__product::before {
  content: "";
  position: absolute;
  width: min(460px, 90%);
  aspect-ratio: 1 / 1;
  bottom: 11%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 195, 245, 0.24), rgba(104, 195, 245, 0.08) 44%, transparent 72%);
  filter: blur(4px);
  z-index: -2;
}

.about-hero__product::after {
  content: "";
  position: absolute;
  bottom: 7%;
  width: 66%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(rgba(14, 83, 144, 0.17), rgba(14, 83, 144, 0) 70%);
  filter: blur(10px);
  z-index: -1;
}

.about-hero__product img {
  display: block;
  width: auto;
  height: min(73svh, 700px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 34px rgba(8, 64, 114, 0.16));
}

/* —— Story —— (matched to sahtain.sa/about.html #story) */
.sahtain-about-story {
  padding: 111px 0;
  background: #fff;
  font-family: inherit;
}

.about-story__shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, 0.48fr) minmax(0, 1.52fr);
  gap: 86px;
  align-items: start;
  direction: rtl;
}

.sahtain-about-story.is-ltr .about-story__shell {
  direction: ltr !important;
}

.about-story__main {
  min-width: 0;
}

.about-story__shell h2 {
  margin: 0;
  max-width: 8ch;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(52.8px, 5.6vw, 104px) * var(--about-heading-scale, 1));
  font-weight: 900;
  line-height: calc(1.14 * var(--about-heading-lh, 1));
  letter-spacing: -0.015em;
  font-family: inherit;
}

.about-story__copy {
  margin-top: 30px;
  display: grid;
  gap: 20px;
  max-width: 780px;
  color: var(--about-text, #5f7890);
  font-size: calc(clamp(16px, 1.18vw, 18.08px) * var(--about-text-scale, 1));
  line-height: calc(2 * var(--about-text-lh, 1));
  font-family: inherit;
}

.about-story__copy p {
  margin: 0;
}

.about-story__copy strong {
  color: var(--about-heading, #061b36);
}

/* —— Values —— */
.sahtain-about-values {
  padding: 0 0 clamp(80px, 9vw, 132px);
  background: linear-gradient(180deg, #fff 0%, #f5faff 100%);
  font-family: inherit;
}

.about-values__shell {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-value-card {
  min-height: 410px;
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(16, 91, 160, 0.13);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 60px rgba(7, 57, 104, 0.07);
}

.about-value-card__body {
  min-width: 0;
}

.about-value-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(7, 86, 168, 0.08);
  background: #eef7ff;
  color: var(--about-accent, #0756a8);
}

.about-value-card__icon svg {
  width: 29px;
  height: 29px;
}

.about-value-card h3 {
  margin: 32px 0 0;
  max-width: 9ch;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(32px, 3vw, 52.8px) * var(--about-heading-scale, 1));
  font-weight: 900;
  line-height: calc(1.18 * var(--about-heading-lh, 1));
  letter-spacing: -0.01em;
  font-family: inherit;
}

.about-value-card p {
  margin: 24px 0 0;
  color: var(--about-text, #6c8198);
  font-size: calc(15.52px * var(--about-text-scale, 1));
  line-height: calc(1.88 * var(--about-text-lh, 1));
  font-family: inherit;
}

.about-value-card__no {
  margin-top: 28px;
  color: rgba(7, 86, 168, 0.28);
  font-family: Arial, sans-serif;
  font-size: 10.88px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  direction: ltr;
}

/* —— Quality —— (matched to sahtain.sa/about.html #quality) */
.sahtain-about-quality {
  padding: clamp(82px, 9vw, 140px) 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(84, 181, 240, 0.14), transparent 448px),
    linear-gradient(180deg, #f2f9ff 0%, #eaf5fd 100%);
  font-family: inherit;
}

.about-quality__shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
  gap: clamp(36px, 7vw, 90px);
  align-items: center;
  direction: rtl;
}

.sahtain-about-quality.is-ltr .about-quality__shell {
  direction: ltr !important;
}

.about-quality__copy {
  min-width: 0;
}

.about-quality__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--about-accent, #0756a8);
  font-size: calc(13.44px * var(--about-accent-scale, 1));
  font-weight: 900;
  font-family: inherit;
}

.about-quality__eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: currentColor;
}

.sahtain-about-quality.is-ltr .about-quality__eyebrow::after {
  order: -1;
}

.about-quality__shell h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(51.2px, 5.4vw, 100.8px) * var(--about-heading-scale, 1));
  font-weight: 900;
  line-height: calc(1.14 * var(--about-heading-lh, 1));
  letter-spacing: -0.012em;
  font-family: inherit;
}

.about-quality__lead {
  margin: 26px 0 0;
  max-width: 720px;
  color: var(--about-text, #627b93);
  font-size: calc(clamp(16px, 1.16vw, 17.92px) * var(--about-text-scale, 1));
  line-height: calc(2 * var(--about-text-lh, 1));
  font-family: inherit;
}

.about-quality__list {
  display: grid;
  gap: 13px;
}

.about-quality__item {
  min-height: 78px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(16, 91, 160, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(7, 59, 105, 0.05);
}

.about-quality__item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--about-accent, #0756a8);
  background: #edf7ff;
}

.about-quality__item-icon svg {
  width: 22px;
  height: 22px;
}

.about-quality__item-text {
  min-width: 0;
}

.about-quality__item strong {
  display: block;
  color: var(--about-heading, #061b36);
  margin-bottom: 3px;
  font-size: calc(30px * var(--about-heading-scale, 1));
  font-family: inherit;
}

.about-quality__item span {
  color: var(--about-text, #6c8198);
  font-size: calc(16.48px * var(--about-text-scale, 1));
  line-height: calc(1.55 * var(--about-text-lh, 1));
  font-family: inherit;
}

/* —— Signature —— (matched to sahtain.sa/about.html .signature) */
.sahtain-about-signature {
  padding: clamp(74px, 8vw, 118px) 0;
  background: #fff;
  text-align: center;
  font-family: inherit;
}

.about-signature__shell {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
}

.about-signature__shell strong {
  display: block;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(38.4px, 4.2vw, 76.8px) * var(--about-heading-scale, 1));
  font-weight: 900;
  line-height: calc(1.25 * var(--about-heading-lh, 1));
  text-wrap: balance;
  font-family: inherit;
}

.about-signature__shell span {
  display: block;
  margin-top: 24px;
  color: var(--about-accent, #0756a8);
  font-size: calc(19.2px * var(--about-accent-scale, 1));
  font-weight: 900;
  font-family: inherit;
}

/* —— Contact —— (matched to sahtain.sa/about.html #contact) */
.sahtain-about-contact {
  padding: 0 0 clamp(74px, 8vw, 112px);
  background: #fff;
  font-family: inherit;
}

.about-contact__shell {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.78fr);
  gap: 42px;
  align-items: center;
  border: 1px solid rgba(16, 91, 160, 0.13);
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 18%, rgba(104, 194, 244, 0.14), transparent 352px),
    linear-gradient(135deg, #f7fbff, #eef7ff);
  direction: rtl;
}

.sahtain-about-contact.is-ltr .about-contact__shell {
  direction: ltr !important;
}

.about-contact__copy {
  min-width: 0;
}

.about-contact__shell h2 {
  margin: 0;
  color: var(--about-heading, #061b36);
  font-size: calc(clamp(41.6px, 4.6vw, 80px) * var(--about-heading-scale, 1));
  font-weight: 900;
  line-height: calc(1.07 * var(--about-heading-lh, 1));
  font-family: inherit;
}

.about-contact__shell p {
  margin: 18px 0 0;
  max-width: 45ch;
  color: var(--about-text, #6c8198);
  line-height: calc(1.8 * var(--about-text-lh, 1));
  font-family: inherit;
}

.about-contact__actions {
  display: grid;
  gap: 12px;
}

.about-contact__link {
  min-height: 68px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(16, 91, 160, 0.13);
  border-radius: 18px;
  background: var(--about-btn-bg, #fff);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 28px rgba(7, 57, 104, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-contact__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(7, 57, 104, 0.08);
}

.about-contact__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: var(--about-accent, #0756a8);
  background: #eef7ff;
}

.about-contact__icon svg {
  width: 21px;
  height: 21px;
}

.about-contact__link-text {
  min-width: 0;
}

.about-contact__link small {
  display: block;
  color: var(--about-text, #6c8198);
  margin-bottom: 3px;
  font-size: calc(11px * var(--about-text-scale, 1));
  font-family: inherit;
}

.about-contact__link strong {
  display: block;
  color: var(--about-btn-fg, #061b36);
  font-family: Arial, sans-serif;
  direction: ltr;
  unicode-bidi: embed;
  font-size: calc(15px * var(--about-btn-scale, 1));
  line-height: calc(1.2 * var(--about-btn-lh, 1));
}

@media (max-width: 1000px) {
  .about-hero__shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
    gap: 22px;
  }

  .about-values__shell {
    grid-template-columns: 1fr;
  }

  .about-value-card {
    min-height: 0;
  }

  .about-quality__shell,
  .about-contact__shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .about-story__shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-section-label--story {
    position: static;
    padding: 0;
  }

  .about-story__shell h2,
  .about-quality__shell h2 {
    font-size: calc(42px * var(--about-heading-scale, 1));
    max-width: none;
  }

  .about-contact__shell {
    padding: 28px;
  }

  .about-contact__shell h2 {
    font-size: calc(34px * var(--about-heading-scale, 1));
  }
}

@media (max-width: 700px) {
  .sahtain-about-hero {
    min-height: auto;
    padding: 102px 0 58px;
  }

  .about-hero__shell {
    width: min(calc(100% - 24px), 1380px);
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-hero__copy {
    order: 1;
    text-align: center;
  }

  .sahtain-about-hero.is-ltr .about-hero__copy {
    text-align: center;
  }

  .about-hero__eyebrow {
    justify-content: center;
  }

  .about-hero__title {
    margin-inline: auto;
    max-width: 100%;
    font-size: calc(clamp(46.4px, 12vw, 71.2px) * var(--about-heading-scale, 1));
    line-height: calc(1.18 * var(--about-heading-lh, 1));
    letter-spacing: -0.008em;
  }

  .sahtain-about-hero.is-ltr .about-hero__title {
    font-size: calc(clamp(46.4px, 12vw, 71.2px) * var(--about-heading-scale, 1));
  }

  .about-hero__line,
  .about-hero__title strong {
    white-space: normal;
  }

  .about-hero__title strong {
    margin-top: 0.1em;
  }

  .about-hero__lead {
    margin: 20px auto 0;
    max-width: 31ch;
    font-size: calc(14.56px * var(--about-text-scale, 1));
    line-height: calc(1.82 * var(--about-text-lh, 1));
    text-align: center;
  }

  .sahtain-about-hero.is-ltr .about-hero__lead {
    text-align: center;
  }

  .about-hero__points {
    justify-content: center;
    margin-top: 23px;
    gap: 8px;
  }

  .about-hero__point {
    min-height: 40px;
    padding: 0 11px;
    font-size: calc(10.72px * var(--about-text-scale, 1));
  }

  .about-hero__product {
    order: 2;
    min-height: 430px;
    margin-top: 2px;
  }

  .about-hero__product img {
    height: min(56svh, 500px);
  }

  .sahtain-about-values {
    padding-bottom: 68px;
  }

  .about-values__shell {
    width: min(1260px, calc(100% - 24px));
    gap: 13px;
  }

  .about-value-card {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .about-value-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .about-value-card h3 {
    margin-top: 26px;
    font-size: calc(44.8px * var(--about-heading-scale, 1));
  }

  .about-value-card p {
    margin-top: 18px;
    font-size: calc(14.56px * var(--about-text-scale, 1));
  }

  .sahtain-about-quality {
    padding: 68px 0;
  }

  .about-quality__shell {
    width: min(1180px, calc(100% - 24px));
    gap: 30px;
  }

  .about-quality__shell h2 {
    font-size: calc(56.8px * var(--about-heading-scale, 1));
  }

  .about-quality__lead {
    font-size: calc(14.88px * var(--about-text-scale, 1));
  }

  .about-quality__item {
    min-height: 72px;
  }

  .sahtain-about-signature {
    padding: 66px 0;
  }

  .about-signature__shell {
    width: min(900px, calc(100% - 24px));
  }

  .about-signature__shell strong {
    font-size: calc(43.2px * var(--about-heading-scale, 1));
  }

  .sahtain-about-contact {
    padding-bottom: 68px;
  }

  .about-contact__shell {
    width: min(1120px, calc(100% - 24px));
    padding: 28px 20px;
    border-radius: 26px;
  }

  .about-contact__shell h2 {
    font-size: calc(48px * var(--about-heading-scale, 1));
  }

  .about-contact__link {
    min-height: 64px;
    padding: 0 13px;
  }

  .about-contact__link strong {
    font-size: calc(13.92px * var(--about-btn-scale, 1));
  }
}

@media (max-width: 600px) {
  .about-story__shell {
    width: min(1180px, calc(100% - 24px));
    gap: 18px;
  }

  .sahtain-about-story {
    padding: 68px 0;
  }

  .about-section-label--story {
    text-align: center;
  }

  .about-story__shell h2 {
    margin-inline: auto;
    font-size: calc(59.2px * var(--about-heading-scale, 1));
    text-align: center;
  }

  .about-story__copy {
    margin-top: 24px;
    font-size: calc(14.88px * var(--about-text-scale, 1));
    line-height: calc(1.9 * var(--about-text-lh, 1));
    text-align: right;
  }

  .sahtain-about-story.is-ltr .about-story__copy {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-contact__link {
    transition: none;
  }

  .about-contact__link:hover {
    transform: none;
  }
}

@media (max-width: 700px) {
  .sahtain-about-page {
    --about-heading-scale: var(--about-heading-scale-m, 1);
    --about-text-scale: var(--about-text-scale-m, 1);
    --about-accent-scale: var(--about-accent-scale-m, 1);
    --about-btn-scale: var(--about-btn-scale-m, 1);
    --about-heading-lh: var(--about-heading-lh-m, 1);
    --about-text-lh: var(--about-text-lh-m, 1);
    --about-accent-lh: var(--about-accent-lh-m, 1);
    --about-btn-lh: var(--about-btn-lh-m, 1);
  }
}