/* Approved four-layer explanation mockup, 2026-10-09. */
@font-face { font-family:"Entrust Display"; src:url("./assets/fonts/entrust-serif-black.ttf") format("truetype"); font-style:normal; font-weight:700 900; font-display:swap; }
#why { padding-block:36px; background:#f5f1e6; color:#183b30; }
#why .entrust-heading { display:block; text-align:center; margin:0 0 28px; }
#why .entrust-heading .section-kicker { justify-content:center; margin:0 0 10px; font-size:14px; }
#why .entrust-heading .section-title { max-width:none; margin:0; color:#082d28; font-size:clamp(32px,5vw,72px); line-height:1.3; letter-spacing:0; }
#why .entrust-subtitle { margin:10px 0 0; color:#163b31; font:700 clamp(18px,2.3vw,32px)/1.5 var(--serif); font-synthesis:weight; }
#why .entrust-layers { container-type:inline-size; display:grid; grid-auto-rows:1fr; justify-items:center; gap:20px; list-style:none; margin:0; padding:0; }
#why .entrust-tier { --tier-inset:0%; position:relative; display:grid; grid-template-columns:172px 232px minmax(0,1fr); align-items:center; gap:28px; width:calc(100% - var(--tier-inset)); min-width:0; min-height:230px; margin:0; padding:22px 32px; color:#fffbed; background:#174937; }
#why .entrust-tier:nth-child(2) { --tier-inset:4%; background:#3d684e; }
#why .entrust-tier:nth-child(3) { --tier-inset:8%; background:#d6b361; color:#082d28; }
#why .entrust-tier:nth-child(4) { --tier-inset:12%; background:#eee0b5; color:#082d28; }
#why .entrust-tier + .entrust-tier::before { position:absolute; content:""; width:1px; height:20px; left:50%; bottom:100%; background:#345343; }
#why .entrust-image { position:relative; width:100%; aspect-ratio:1; min-width:0; margin:0; overflow:hidden; border:4px solid #f7f0dd; background:#d9ceb1; }
#why .entrust-image img { display:block; width:100%; height:100%; object-fit:contain; }
#why .entrust-image--altar img { object-fit:cover; object-position:18% center; }
#why .entrust-image--kukai img { object-fit:cover; object-position:center 63%; }
#why .entrust-identity { min-width:0; text-align:left; }
#why .entrust-scope { display:inline-block; padding:2px 10px; border:1px solid currentColor; color:inherit; font:700 22px/1.5 var(--serif); font-synthesis:weight; letter-spacing:.03em; }
#why .entrust-scope > span { margin-right:4px; font-variant-numeric:tabular-nums; }
#why .entrust-name { margin:8px 0 0; color:inherit; font:700 56px/1.25 var(--serif); letter-spacing:0; white-space:nowrap; }
#why .entrust-description { min-width:0; padding-left:30px; border-left:1px solid currentColor; }
#why .entrust-role { margin:0 0 9px; color:inherit; font:700 30px/1.45 var(--serif); font-synthesis:weight; letter-spacing:0; text-wrap:wrap; }
#why .entrust-copy p { margin:0 0 9px; color:inherit; font:500 20px/1.65 var(--sans); text-wrap:wrap; }
#why .entrust-copy > :last-child { margin-bottom:0; }
#why .entrust-copy .scripture { margin:0 0 9px; padding:0; border:0; color:inherit; }
#why .entrust-copy .scripture p { margin:0 0 2px; font-family:var(--serif); font-size:21px; }
#why .entrust-copy cite { display:block; color:inherit; font:500 16px/1.6 var(--sans); }
#why .entrust-close { margin:28px 0 0; text-align:center; color:#183b30; font:700 clamp(23px,2.5vw,34px)/1.5 var(--serif); font-synthesis:weight; }
#why .entrust-toggle { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:44px; padding:6px 0 0 12px; border:0; color:inherit; background:transparent; font:500 14px/1.5 var(--sans); cursor:pointer; transition:opacity 140ms ease; }
#why .entrust-toggle:hover { opacity:.8; }
#why .entrust-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
#why .entrust-toggle-sign { font-size:19px; line-height:1; }
#why .entrust-copy[hidden], #why .entrust-toggle[hidden] { display:none; }
@media (max-width:1250px) and (min-width:1101px) {
  #why .entrust-tier { grid-template-columns:144px 188px minmax(0,1fr); padding-inline:24px; gap:22px; }
  #why .entrust-name { font-size:46px; }
  #why .entrust-scope { font-size:19px; }
  #why .entrust-role { font-size:26px; }
  #why .entrust-copy p { font-size:18px; }
  #why .entrust-description { padding-left:22px; }
}
@media (max-width:1100px) {
  #why .entrust-layers { grid-auto-rows:auto; gap:20px; }
  #why .entrust-tier { grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto; column-gap:20px; row-gap:8px; min-height:0; padding:16px 18px 8px; }
  #why .entrust-tier:nth-child(2) { --tier-inset:2%; }
  #why .entrust-tier:nth-child(3) { --tier-inset:4%; }
  #why .entrust-tier:nth-child(4) { --tier-inset:6%; }
  #why .entrust-image { grid-column:1; grid-row:1/3; }
  #why .entrust-identity { grid-column:2; grid-row:1; align-self:end; text-align:left; }
  #why .entrust-name { margin-top:6px; font-size:34px; }
  #why .entrust-scope { font-size:17px; }
  #why .entrust-description { display:contents; }
  #why .entrust-role { grid-column:2; grid-row:2; align-self:start; margin:0; font-size:18px; line-height:1.6; text-wrap:balance; }
  #why .entrust-copy { grid-column:1/-1; margin-top:8px; padding-top:14px; border-top:1px solid currentColor; }
  #why .entrust-copy p { font-size:16px; line-height:1.75; }
  #why .entrust-copy .scripture p { font-size:18px; }
  #why .entrust-toggle { grid-column:1/-1; justify-self:end; margin-top:-4px; }
}
@media (max-width:500px) {
  #why .entrust-heading { margin-bottom:22px; }
  #why .entrust-heading .section-title { font-size:30px; }
  #why .entrust-subtitle { font-size:17px; }
  #why .entrust-tier { grid-template-columns:96px minmax(0,1fr); column-gap:14px; padding:14px 14px 6px; }
  #why .entrust-image { border-width:3px; }
  #why .entrust-scope { padding:1px 5px; font-size:16px; letter-spacing:0; }
  #why .entrust-name { font-size:30px; }
  #why .entrust-role { font-size:18px; }
  #why .entrust-close { font-size:23px; text-wrap:balance; }
}
@media (max-width:350px) {
  #why .entrust-tier { grid-template-columns:80px minmax(0,1fr); column-gap:12px; padding-inline:12px; }
  #why .entrust-name { font-size:28px; }
  #why .entrust-role { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #why .entrust-toggle { transition:none; }
}
/* Use the real Black face for the mockup's strong serif hierarchy. */
#why :is(.section-title,.entrust-subtitle,.entrust-name,.entrust-role,.entrust-scope,.entrust-close) { font-family:"Entrust Display",var(--serif); font-synthesis:none; }
