/* Reviewed philosophy additions. Existing page sections and brand assets remain in use. */
.home-principles,
.brand-design-philosophy {
  background: #f8f6f1;
  border-block: 1px solid #e6ddcd;
}

.philosophy-centered-heading {
  display: block;
  text-align: center;
}

.philosophy-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.principle-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid #cbb280;
  background: #fff;
  color: #163758;
}

.principle-number {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 17px;
  color: #856127;
  font-size: 1rem;
  font-weight: 700;
}

.principle-number::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #bca16b;
}

.principle-card h3 {
  color: #163758;
  font-size: 1.3rem;
  line-height: 1.55;
}

.principle-card p {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.9;
  color: #334e65;
}

.philosophy-more {
  margin-top: 26px;
  text-align: center;
}

.philosophy-more .text-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 44px;
  color: #755821;
}

.brand-philosophy-intro {
  text-align: center;
  margin: 0 auto 35px;
  max-width: 850px;
}

.brand-philosophy-intro h3 {
  color: #163758;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.5;
}

.brand-philosophy-intro p {
  margin-top: 19px;
  color: #334e65;
  font-size: 1.0625rem;
  line-height: 1.9;
}

.brand-design-philosophy .philosophy-card-ivory { background: #f2ebdd; }
.brand-design-philosophy .philosophy-card-champagne { background: #ead8b9; }
.brand-design-philosophy .philosophy-card-blue { background: #e4ebf2; border-color: #a9bdce; }

.page-about #story .story-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 54px;
}

.page-about #story .story-grid > div { min-width: 0; }
.page-about #story .story-grid > div > p { font-size: 1rem; line-height: 1.95; }
.page-about #story .story-grid > div > p + p { margin-top: 17px; }

.management-motto-section {
  background: #f8f5ee;
  border-block: 1px solid #dcc8a2;
}

.management-motto-layout {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.8fr);
  align-items: start;
  gap: 60px;
}

.management-motto-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.management-motto-portrait { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.management-motto-portrait > img {
  width: 100%;
  height: auto;
  border: 1px solid #bda16b;
  object-fit: contain;
}

.management-motto-portrait figcaption { padding-top: 15px; font-size: .9375rem; line-height: 1.8; color: #40576b; }
.management-motto-portrait figcaption p + p { margin-top: 5px; }
.management-motto-portrait .motto-person-name { font-size: 1.125rem; font-weight: 700; color: #163758; }
.management-motto-portrait figcaption .motto-book-recognition {
  border-top: 1px solid #d8c5a0;
  padding-top: 14px;
  margin-top: 14px;
  font-size: .875rem;
}
.motto-book-recognition a { text-decoration: underline; text-underline-offset: 4px; }

.management-motto-quote { margin: 0; color: #163758; }
.management-motto-quote::before { content: "“"; display: block; height: 56px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: #b18a47; }
.management-motto-quote > p { font-size: clamp(1.65rem, 2.65vw, 2.6rem); line-height: 1.65; font-weight: 700; letter-spacing: -.045em; }
.management-motto-quote cite { display: block; margin-top: 18px; text-align: right; font-style: normal; font-size: 1rem; }
.management-motto-application { margin-top: 32px; padding-top: 25px; border-top: 1px solid #d8c5a0; }
.management-motto-application h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.6; color: #163758; }
.management-motto-application p { margin-top: 19px; font-size: 1.0625rem; line-height: 1.95; color: #334e65; }

.symbol-philosophy-section { background: #fff; border-bottom: 1px solid #dcc8a2; }
.symbol-philosophy-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); align-items: center; gap: 70px; }
.symbol-philosophy-summary { min-width: 0; }
.symbol-philosophy-summary > img { width: min(100%, 480px); height: auto; margin-inline: auto; object-fit: contain; }
.symbol-philosophy-summary h3 { margin-top: 25px; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.5; color: #163758; }
.symbol-philosophy-summary p { margin-top: 21px; font-size: 1rem; line-height: 1.95; color: #334e65; }
.symbol-meaning-list { list-style: none; padding: 0; margin: 0; min-width: 0; }
.symbol-meaning-list > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 25px 0; border-bottom: 1px solid #d5bf98; }
.symbol-meaning-list > li:first-child { padding-top: 0; }
.symbol-meaning-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.symbol-meaning-number { color: #94703a; font-family: Georgia, serif; font-size: 2.1rem; line-height: 1.3; }
.symbol-meaning-list h3 { font-size: 1.45rem; line-height: 1.5; color: #163758; }
.symbol-meaning-list p { margin-top: 13px; font-size: 1rem; line-height: 1.95; color: #334e65; }
.page-websites .website-service .heading-aside p + p { margin-top: 12px; }

@media (max-width: 1100px) {
  .philosophy-cards { gap: 18px; }
  .principle-card { padding: 24px; }
  .principle-card h3 { font-size: 1.2rem; }
  .management-motto-layout { grid-template-columns: minmax(220px, .85fr) minmax(0, 1.6fr); gap: 36px; }
  .symbol-philosophy-layout { gap: 38px; }
  .symbol-meaning-list > li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .symbol-meaning-list h3 { font-size: 1.3rem; }
}

@media (max-width: 800px) {
  .philosophy-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .principle-card { padding: 26px; }
  .principle-card h3 { font-size: 1.3rem; }
  .page-about #story .story-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .page-about #story .story-image { max-width: 650px; width: 100%; margin-inline: auto; }
  .management-motto-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .management-motto-copy, .management-motto-portrait { grid-column: auto; grid-row: auto; }
  .management-motto-portrait { width: min(100%, 360px); justify-self: center; }
  .management-motto-application { margin-top: 25px; }
  .symbol-philosophy-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .symbol-philosophy-summary > img { width: min(100%, 390px); }
  .symbol-philosophy-summary h3, .symbol-philosophy-summary p { text-align: center; }
  .symbol-philosophy-summary p { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .principle-card { padding: 23px; }
  .brand-philosophy-intro p { font-size: 1rem; }
  .brand-philosophy-intro p br { display: none; }
  .management-motto-quote > p { font-size: 1.6rem; }
  .management-motto-quote > p br { display: none; }
  .management-motto-quote cite { font-size: .9375rem; }
  .management-motto-application p { font-size: 1rem; }
  .symbol-meaning-list > li { grid-template-columns: 35px minmax(0, 1fr); gap: 13px; padding-block: 23px; }
  .symbol-meaning-number { font-size: 1.8rem; }
  .symbol-meaning-list h3 { font-size: 1.25rem; }
}

/* Five core values: successive shades of gold and a larger love statement. */
.page-about #values .values-grid > article {
  border-color: #cfb782;
  border-top-color: #b89443;
}
.page-about #values .values-grid > article:nth-child(1) { background: #f7f1e5; }
.page-about #values .values-grid > article:nth-child(2) { background: #f0e5cf; }
.page-about #values .values-grid > article:nth-child(3) { background: #e8d7b4; }
.page-about #values .values-grid > article:nth-child(4) { background: #dec698; }
.page-about #values .values-grid > article:nth-child(5) { background: #d4b67d; }
.page-about #values .values-grid > article::before { color: #5b431b; }
.page-about #values .values-grid p { color: #213e57; }
.page-about #values .values-grid h3,
.page-about #values .values-root { font-size: 1.3rem; }
.page-about #values .values-root {
  align-items: center;
  gap: 16px;
  line-height: 1.7;
}
.page-about #values .values-root > .values-root-label {
  flex: 0 0 auto;
  font-size: inherit;
  letter-spacing: .12em;
}
.page-about #values .values-root > .values-root-message {
  flex: 1 1 auto;
  min-width: 0;
  color: #163758;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
}
@media (max-width: 560px) {
  .page-about #values .values-root { align-items: flex-start; gap: 9px; }
  .page-about #values .values-root > .values-root-message { flex: 0 1 auto; width: 100%; }
}

/* Home principles: three gold shades with a brief, user-triggered movement. */
.home-principles .principle-card {
  position: relative;
  border-color: #c7aa70;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-principles .principle-card:nth-child(1) { background: #f7f1e5; }
.home-principles .principle-card:nth-child(2) { background: #e8d7b4; }
.home-principles .principle-card:nth-child(3) { background: #d4b67d; }
.home-principles .principle-card p { color: #213e57; }
.home-principles .principle-number { color: #5b431b; }
.home-principles .principle-card:hover,
.home-principles .principle-card:focus-within {
  border-color: #99743b;
  box-shadow: 0 9px 22px #1637581a;
}
/* Website service cards share the same brief click interaction. */
.page-websites #website-service .detail-card {
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-websites #website-service .detail-card:hover,
.page-websites #website-service .detail-card:focus-within {
  border-color: #99743b;
  box-shadow: 0 9px 22px #1637581a;
}
.home-principles .principle-card-trigger,
.page-websites #website-service .principle-card-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.home-principles .principle-card-trigger:focus-visible,
.page-websites #website-service .principle-card-trigger:focus-visible {
  outline: 3px solid #76551f;
  outline-offset: 4px;
}
.home-principles .principle-card.is-bouncing,
.page-websites #website-service .detail-card.is-bouncing {
  animation: principle-card-tap .38s ease-out both;
}
@keyframes principle-card-tap {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-8px) scale(1.012); }
  70% { transform: translateY(2px) scale(.995); }
}
@media (prefers-reduced-motion: reduce) {
  .home-principles .principle-card,
  .home-principles .principle-card.is-bouncing,
  .page-websites #website-service .detail-card,
  .page-websites #website-service .detail-card.is-bouncing {
    animation: none;
    transition: none;
  }
}