/* All new styles are scoped to PHILOSOPHY. Frozen HEADER/HERO is untouched. */
.philosophy {
  position: relative; height: 238px;
  @media (max-width: 760px) { height: auto; padding: 35px 7% 30px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px 20px; }
}
.philosophy-copy {
  position: absolute; left: 13.1676%; top: 35px; width: 385px;
  @media (max-width: 1000px) and (min-width: 761px) { left: 6%; width: 330px; }
  @media (max-width: 760px) { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; }
}
.philosophy-eyebrow { margin: 0; font-size: 10px; line-height: 18px; letter-spacing: 1.4px; }
.philosophy h2 {
  margin: 8px 0 13px; font-size: 18px; line-height: 32px; font-weight: 300; letter-spacing: 1.4px;
  @media (max-width: 760px) { font-size: 18px; letter-spacing: 1.8px; }
}
.philosophy-description {
  margin: 0; font-size: 9.2px; line-height: 18px; letter-spacing: .55px; white-space: nowrap;
  @media (max-width: 1000px) { white-space: normal; }
}
.philosophy-link { margin-top: 14px; padding: 0 0 4px; border: 0; border-bottom: 1px solid #bfb7ab; background: none; font-size: 10px; line-height: 17px; letter-spacing: 1px; }
.philosophy-link span { margin-left: 6px; font-size: 14px; }
.philosophy-message {
  position: absolute; z-index: 1; left: 50.64%; top: -7px; width: 245px; height: 214px; margin: 0;
  background: linear-gradient(#fffdfbde, #fbf9f5c9), url('../assets/paper-texture.png') center / 245px 405px;
  transform: rotate(-1.6deg); box-shadow: 3px 6px 8px #66594332, 0 1px 2px #83776420;
  @media (max-width: 1000px) and (min-width: 761px) { left: 51%; width: 25%; }
  @media (max-width: 760px) { position: relative; left: auto; top: auto; width: 100%; height: 214px; }
}
.philosophy-pin {
  position: absolute; top: 13px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #eee1b6 0 8%, #b59b60 17%, #7b6535 38%, #453519 60%, #b49e6d 75%, #715934 90%);
  box-shadow: 1px 3px 3px #42331d66;
}
.philosophy-quote-mark { position: absolute; top: 17px; left: 28px; color: #c5c0b9; opacity: .65; font: 42px Georgia, serif; }
.philosophy-message blockquote {
  position: absolute; left: 50px; top: 50px; margin: 0; font-size: 14px; line-height: 26px; letter-spacing: 2px; font-weight: 300; text-indent: -7px;
  @media (max-width: 1000px) { left: 18px; font-size: 12px; letter-spacing: .6px; }
}
.philosophy-message figcaption { position: absolute; right: 66px; bottom: 28px; font: 10px Georgia, serif; letter-spacing: .3px; }
.philosophy-message-sprig { position: absolute; left: 198px; top: 82px; width: 48px; height: 165px; background: #857455; opacity: .68; mask: url('../assets/hero-botanical.png') center / 100% 100% no-repeat; transform: rotate(8deg); transform-origin: left bottom;
  @media (max-width: 1000px) { left: auto; right: -4px; }
}
.philosophy-material {
  position: absolute; left: 76.52%; top: 35px; width: 166px; height: 184px; margin: 0;
  background: linear-gradient(#ffffffbf, #fbf9f7d9), url('../assets/paper-texture.png') center / 230px 380px;
  box-shadow: 3px 5px 8px #66594332, 0 1px 2px #83776418;
  @media (max-width: 1000px) and (min-width: 761px) { left: 79%; width: 18%; }
  @media (max-width: 760px) { position: relative; left: auto; top: 35px; width: 100%; height: 175px; }
}
.philosophy-material-photo { position: absolute; left: 13px; right: 18px; top: 20px; height: 113px; background: #e6e0d4 url('../assets/philosophy-material.png') center / cover; box-shadow: 1px 3px 4px #79664a33; }
.philosophy-material .philosophy-pin { top: 25px; left: calc(50% - 10px); }
.philosophy-material figcaption { position: absolute; left: 16px; top: 142px; font: 6px/11px Georgia, serif; letter-spacing: .65px; }
.philosophy-edge-sprig { position: absolute; left: -24px; top: 0; width: 67px; height: 92px; background: #97866c; opacity: .48; mask: url('../assets/hero-botanical.png') center 58% / 75px 218px no-repeat;
  @media (max-width: 760px) { display: none; }
}