/* Fixed card positions. Details replace the artwork, never repack neighbours. */
.material-page[data-site-page="home"] .why-us-section {
  --why-art-height:clamp(240px,17vw,260px);
  background:#191919;
  color:#f2f2f2;
  border-top:1px solid #555;
}
.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:clamp(24px,3vw,44px); }
.why-us-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; 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:22px 24px 26px; }
.why-card-title { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; font:700 clamp(24px,1.9vw,30px)/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 23px; color:#ff7b39; text-align:center; font:400 28px/1 var(--sans); }
.why-card-toggle::after { content:'+'; }
.why-card[open] .why-card-toggle::after { content:'−'; }
.why-card-benefit { display:block; margin-top:13px; font:400 var(--type-body)/1.45 var(--sans); color:#e2e2df; }
.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:14px;
  padding:24px;
  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 var(--type-body)/1.42 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 var(--type-caption)/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) { .why-us-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .material-page[data-site-page="home"] .why-us-section { --why-art-height:250px; }
  .why-us-grid { grid-template-columns:1fr; gap:22px; }
  .why-card-copy { padding:20px; }
  .why-card-title { font-size:26px; }
  .why-card-content { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .why-card { transition:none; } .why-card[open] > .why-card-content { animation:none; } }