/* A focused desktop collection, with compact disclosure rows on phones. */
.material-page[data-site-page="home"] .why-us-section {
  --why-art-height:210px;
  background:#191919;
  color:#f2f2f2;
  border-top:1px solid #555;
}
.material-page[data-site-page="home"] .why-us-section .wrap { max-width:1080px; }
.why-us-section .section-heading-bar { background:#191919; }
.material-page[data-site-page="home"] .why-us-section #why-us-title {
  font:700 clamp(34px,3.2vw,54px)/1.12 var(--sans);
  letter-spacing:-.045em;
  margin:0;
}
.why-us-section > .wrap { padding-top:28px; }
.why-us-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.why-card {
  position:relative;
  min-width:0;
  margin:0;
  border:1px solid #6b6b68;
  background:#242424;
  color:#f2f2f2;
  box-shadow:4px 5px 0 #090909;
  transition:border-color 180ms ease,box-shadow 180ms ease;
}
.why-card > summary { display:block; height:100%; list-style:none; cursor:pointer; position:relative; }
.why-card > summary::-webkit-details-marker { display:none; }
.why-card-visual { display:flex; align-items:center; justify-content:center; height:var(--why-art-height); background:#fff; overflow:hidden; }
.why-card-visual img { display:block; width:100%; height:100%; object-fit:contain; }
.why-card-copy { display:block; padding:18px 20px 20px; }
.why-card-title { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; font:700 24px/1.15 var(--sans); letter-spacing:-.025em; }
.why-card-title > span:first-child { min-width:0; max-width:22ch; overflow-wrap:anywhere; }
.why-card-toggle { flex:0 0 20px; color:#ff7b39; text-align:center; font:400 24px/1 var(--sans); }
.why-card-toggle::after { content:'+'; }
.why-card[open] .why-card-toggle::after { content:'−'; }
.why-card-benefit { display:block; margin-top:10px; font:400 20px/1.4 var(--sans); color:#e2e2df; overflow-wrap:anywhere; }
.why-card-content {
  position:absolute;
  inset:0 0 auto;
  height:var(--why-art-height);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  justify-content:safe center;
  gap:10px;
  padding:18px 20px;
  overflow:auto;
  background:#f1f0eb;
  color:#191919;
  border-bottom:3px solid #ff7b39;
}
.why-card:not([open]) > .why-card-content { display:none; }
.why-card[open] .why-card-visual img { visibility:hidden; }
.why-card-content p { margin:0; font:400 20px/1.4 var(--sans); letter-spacing:-.015em; }
.why-card-content .text-link { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-shrink:0; min-height:44px; margin:0; font:600 18px/1.35 var(--sans); color:#191919; border-bottom:1px solid #777; }
.why-card .disclosure-trace { color:#ff7b39; }
.why-card .disclosure-trace-edge { box-shadow:0 0 7px #ff7b3940; }
.why-card .disclosure-trace-head { box-shadow:0 0 9px 2px #ff7b3970; }
.why-card[open], .why-card:has(:focus-visible) { border-color:#ff7b39; box-shadow:4px 5px 0 #ff7b39; }
.why-card-content .text-link:focus-visible { outline:2px solid #a43e19; outline-offset:4px; }
.why-card[open] > .why-card-content { animation:why-detail-in 180ms ease-out; }
@keyframes why-detail-in { from { opacity:0; } to { opacity:1; } }
@media(hover:hover) and (pointer:fine) {
  .why-card:hover { border-color:#ff7b39; box-shadow:4px 5px 0 #ff7b39; }
}
@media(max-width:1100px) {
  .material-page[data-site-page="home"] .why-us-section .wrap { max-width:760px; }
  .why-us-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .why-us-section > .wrap { padding-top:20px; }
  .why-us-grid { grid-template-columns:1fr; gap:12px; }
  .why-card > summary { display:grid; grid-template-columns:clamp(64px,20vw,88px) minmax(0,1fr); align-items:center; gap:14px; height:auto; padding:14px; }
  .why-card-visual { width:100%; height:auto; aspect-ratio:1; }
  .why-card-copy { padding:0; }
  .why-card-title { font-size:20px; gap:6px; }
  .why-card-title > span:first-child { max-width:none; }
  .why-card-toggle { flex-basis:16px; font-size:22px; }
  .why-card-benefit { margin-top:7px; font-size:18px; line-height:1.35; }
  .why-card-content { position:static; height:auto; padding:16px 18px; gap:10px; overflow:visible; border-top:1px solid #777; border-bottom:2px solid #ff7b39; }
  .why-card-content p { font-size:18px; line-height:1.4; }
  .why-card[open] .why-card-visual img { visibility:visible; }
}
@media(prefers-reduced-motion:reduce) { .why-card { transition:none; } .why-card[open] > .why-card-content { animation:none; } }