/* A layered brand portrait; every label in the art is decorative. */
.about-section {
  position: relative;
  background: radial-gradient(ellipse at 12% 20%, #e4ede2 0, transparent 45%), #f4f1e9;
  border-block: 1px solid #ddd9cf;
}
.about-layout { gap: clamp(34px, 6vw, 90px); }
.about-art.about-art-layered {
  min-width: 0;
  height: 540px;
  overflow: hidden;
  border: 1px solid #d7bd9666;
  border-radius: 24px 24px 70px 24px;
  background: radial-gradient(ellipse at 75% 15%, #245c4e88, transparent 62%), linear-gradient(155deg, #102d39 0%, #071c2c 74%);
  box-shadow: 0 25px 50px #071c2c17, inset 0 1px 0 #ffffff15;
  isolation: isolate;
}
.about-art.about-art-layered::before {
  inset: 22px;
  width: auto;
  height: auto;
  border: 1px solid #d8b99c26;
  border-radius: 15px 15px 52px 15px;
  z-index: -1;
}
.about-art.about-art-layered::after {
  width: 360px;
  height: 360px;
  inset: -220px auto auto -90px;
  border: 1px solid #bad9c22e;
  box-shadow: 0 0 0 32px #bad9c20b, 0 0 0 64px #bad9c208;
  z-index: -1;
}
.about-art-layered .art-grid {
  opacity: .55;
  background: linear-gradient(90deg, #ffffff07 1px, transparent 1px) 0 0/38px 38px, linear-gradient(#ffffff07 1px, transparent 1px) 0 0/38px 38px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
}
.about-art.about-art-layered > img {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 154px;
  height: 154px;
  margin: 0;
  padding: 24px;
  border: 1px solid #c5e6d43b;
  border-radius: 30px;
  transform: translateX(-50%) rotate(-8deg);
  background: linear-gradient(145deg, #195046, #0a2d32);
  filter: drop-shadow(0 20px 16px #00000030);
  transition: transform 450ms ease;
  z-index: 3;
}
.al-layer-orbit {
  position: absolute;
  width: 230px;
  height: 230px;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  border: 1px dashed #ddba9638;
  border-radius: 50%;
}
.al-layer-cards { position: absolute; inset: 0; pointer-events: none; }
.al-layer-sheet {
  position: absolute;
  display: block;
  width: 190px;
  min-height: 154px;
  padding: 22px 20px;
  border: 1px solid #e5d7c4;
  border-radius: 14px;
  background: #fcfaf4;
  box-shadow: 0 16px 32px #00000026;
  color: #122f3a;
  transition: transform 450ms ease;
}
.al-layer-sheet-1 { top: 210px; right: 34px; transform: rotate(-9deg); z-index: 2; }
.al-layer-sheet-2 { top: 176px; left: 30px; transform: rotate(9deg); background: #d6e8d9; border-color: #b1cdbb; }
.al-layer-icon {
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #1d69534d;
  border-radius: 50%;
  color: #16654f;
  font-family: Arial, sans-serif;
  font-size: 17px;
  margin-bottom: 12px;
}
.al-layer-sheet strong { display: block; font-size: 14px; margin-bottom: 12px; }
.al-layer-sheet i { display: block; height: 4px; margin-top: 7px; border-radius: 3px; background: #213f3421; width: 90%; }
.al-layer-sheet i:last-child { width: 55%; background: #b8795266; }
.al-layer-stamp {
  position: absolute;
  top: 340px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #a5c5b553;
  border-radius: 30px;
  background: #102e36ed;
  padding: 8px 13px;
  color: #dcecdf;
  font-size: 11px;
  z-index: 4;
}
.al-layer-stamp i { width: 6px; height: 6px; border-radius: 50%; background: #9ad5a7; box-shadow: 0 0 0 4px #9ad5a71a; }
.about-art-layered .art-caption { bottom: 57px; right: 36px; max-width: calc(100% - 65px); font-size: 26px; line-height: 1.7; color: #c0d8cb; }
.about-art-layered .art-caption strong { color: #fff7ea; }
.about-art-layered .art-label { bottom: 25px; left: 34px; font-size: 8px; letter-spacing: 2.5px; color: #b99c80; }
.about-copy .value-list > div { border-radius: 10px; padding-inline: 44px 12px; margin-inline: -12px; transition: background 220ms ease, transform 220ms ease; }
.about-copy .value-list > div > span { right: 12px; }
.about-copy .value-list h3 { color: #153f36; }
.about-values > article { border-radius: 16px; background: #fcfaf5; border-color: #d9ded0; border-top: 3px solid #1e6652; transition: transform 220ms ease, box-shadow 220ms ease; }
.about-art.about-art-standalone { height: 300px; margin: 0 0 48px; }
.about-art-standalone.about-art-layered > img { top: 70px; left: 73%; width: 150px; height: 150px; }
.about-art-standalone .al-layer-orbit { top: 30px; left: 73%; }
.about-art-standalone .al-layer-sheet-1 { top: 70px; right: auto; left: 24%; }
.about-art-standalone .al-layer-sheet-2 { top: 43px; left: 12%; }
.about-art-standalone .al-layer-stamp { top: auto; bottom: 23px; right: 30px; }
.about-art-standalone .art-caption { bottom: 29px; right: auto; left: 35px; font-size: 20px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-art-layered:hover > img { transform: translateX(-50%) rotate(0); }
  .about-art-layered:hover .al-layer-sheet-1 { transform: translateY(-6px) rotate(-5deg); }
  .about-art-layered:hover .al-layer-sheet-2 { transform: translateY(-4px) rotate(5deg); }
  .about-copy .value-list > div:hover { background: #ffffff90; transform: translateX(-4px); }
  .about-values > article:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #071c2c0c; }
}
@media (max-width: 1100px) and (min-width: 651px) {
  .about-art.about-art-layered { height: 510px; }
  .al-layer-sheet { width: 166px; padding: 19px 15px; }
  .al-layer-sheet-1 { right: 19px; }
  .al-layer-sheet-2 { left: 15px; }
  .about-art-layered .art-caption { font-size: 24px; }
  .about-art.about-art-standalone { height: 300px; }
}
@media (max-width: 650px) {
  .about-art.about-art-layered { height: 470px; width: 100%; order: 2; border-radius: 22px 22px 54px 22px; }
  .about-art.about-art-layered > img { width: 126px; height: 126px; top: 37px; left: 50%; padding: 20px; }
  .al-layer-orbit { width: 192px; height: 192px; top: 5px; }
  .al-layer-sheet { width: 164px; min-height: 139px; padding: 18px 15px; }
  .al-layer-sheet-1 { top: 185px; right: 22px; }
  .al-layer-sheet-2 { top: 155px; left: 19px; }
  .al-layer-sheet strong { font-size: 12px; }
  .al-layer-stamp { top: 307px; right: 25px; font-size: 10px; }
  .about-art-layered .art-caption { font-size: 24px; bottom: 48px; right: 28px; }
  .about-art-layered .art-label { left: 27px; bottom: 22px; font-size: 7px; }
  .about-art.about-art-standalone { height: 440px; margin-bottom: 36px; }
  .about-art-standalone .al-layer-sheet-1 { top: 170px; left: auto; right: 22px; }
  .about-art-standalone .al-layer-sheet-2 { top: 141px; left: 19px; }
  .about-art-standalone .al-layer-stamp { top: 299px; bottom: auto; }
  .about-art-standalone .art-caption { left: auto; bottom: 37px; font-size: 20px; }
}
@media (max-width: 359px) {
  .al-layer-sheet { width: 144px; padding-inline: 12px; }
  .al-layer-sheet-1 { right: 15px; }
  .al-layer-sheet-2 { left: 15px; }
  .about-art-layered .art-caption { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-art-layered *, .about-copy .value-list > div, .about-values > article { transition: none; }
}
@media print {
  .about-art.about-art-layered { display: none; }
  .about-section { background: #fff; }
  .about-values > article { background: #fff; box-shadow: none; }
}