/* About page: interactive Mission/Vision only */
.about-refined .mission-vision-pair {align-items:stretch;}
.about-refined .mission-frame,
.about-refined .vision-frame {cursor:pointer;box-sizing:border-box;transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease;}
.about-refined .mission-frame:focus-visible,
.about-refined .vision-frame:focus-visible {outline:3px solid #a47b15;outline-offset:5px;}
/* Mission remains black, with a quiet premium highlight like the Values cards. */
.about-refined .mission-frame:hover,
.about-refined .mission-frame.is-active {transform:translateY(-4px);border-color:#d6ac2b;box-shadow:8px 12px 0 rgba(214,172,43,.21),0 9px 22px rgba(0,0,0,.12);}
.about-refined .mission-frame .mission-black {background:#0b0b0b;transition:background .24s ease;}
.about-refined .mission-frame:hover .mission-black,
.about-refined .mission-frame.is-active .mission-black {background:linear-gradient(130deg,#151208,#0b0b0b 74%);}
/* Vision is cream by default, rich gold on hover/focus or tap selection. */
.about-refined .vision-frame {background:#fcf9f2;}
.about-refined .vision-frame:hover,
.about-refined .vision-frame.is-active {background:#d6ac2b;border-color:#0b0b0b;transform:translateY(-4px);box-shadow:0 14px 26px rgba(11,11,11,.12);}
.about-refined .vision-frame:hover h3,
.about-refined .vision-frame.is-active h3 {color:#ffffff;}
.about-refined .vision-frame:hover p,
.about-refined .vision-frame.is-active p {color:#0b0b0b;}
.about-refined .vision-frame h3,
.about-refined .vision-frame p {transition:color .24s ease;}
/* Both panels share equal heading positions and padding */
.about-refined .mission-black,
.about-refined .vision-frame {justify-content:flex-start;}
@media(hover:none) {
 .about-refined .mission-frame:hover {transform:none;}
 .about-refined .vision-frame:hover:not(.is-active) {transform:none;background:#fcf9f2;border-color:#d6ac2b;box-shadow:none;}
 .about-refined .vision-frame:hover:not(.is-active) h3 {color:var(--about-antique);}
}
@media(prefers-reduced-motion:reduce) {
 .about-refined .mission-frame,.about-refined .vision-frame,
 .about-refined .vision-frame h3,.about-refined .vision-frame p {transition:none!important;transform:none!important;}
}

/* Precision correction: matching internal content start, line-height and padding. */
.about-refined .mission-vision-pair {
  align-items: stretch;
}
.about-refined .mission-frame {
  padding: 7px;
}
.about-refined .mission-frame .mission-black {
  box-sizing: border-box;
  padding: 39px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 14px;
  text-align: left;
}
.about-refined .vision-frame {
  box-sizing: border-box;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  position: relative;
  text-align: left;
}
.about-refined .vision-frame::before {
  position: absolute;
  top: 18px;
  left: 46px;
  margin: 0;
  width: 60px;
  height: 2px;
}
.about-refined .mission-black h3,
.about-refined .vision-frame h3 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
}
.about-refined .mission-black p,
.about-refined .vision-frame p {
  margin: 0;
  font-size: clamp(1.02rem,1.4vw,1.22rem);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  hyphens: none;
  overflow-wrap: break-word;
}
@media (max-width: 950px) {
  .about-refined .mission-frame .mission-black {padding: 27px;}
  .about-refined .vision-frame {padding: 34px;}
  .about-refined .vision-frame::before {left: 34px;top: 10px;}
}
@media (max-width: 720px) {
  .about-refined .mission-frame .mission-black {padding: 24px;}
  .about-refined .vision-frame {padding: 31px;}
  .about-refined .vision-frame::before {left: 31px;top: 9px;}
}

/* Align copy consistently within both cards without changing approved design. */
@media (min-width: 951px) {
 .about-refined .mission-black p,
 .about-refined .vision-frame p {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    word-spacing: normal;
    overflow-wrap: normal;
 }
}
@media (max-width: 950px) {
 .about-refined .mission-black p,
 .about-refined .vision-frame p { text-align:left; hyphens:none; word-spacing:normal; }
}