/* Keep the selected area and its visible result together. */
#design.design-section{padding-top:54px;padding-bottom:54px}
#design .section-heading{margin-bottom:25px;gap:24px}
#design .section-heading h2{font-size:clamp(28px,2.6vw,37px);line-height:1.45}
#design .section-heading .eyebrow{font-size:9px;margin-bottom:10px}
#design .section-intro{font-size:13px}
#design .concern-options{gap:0;border-bottom:0}
#design .concern{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:14px;row-gap:3px;min-height:112px;padding:17px 24px!important;transition:background .2s,color .2s;border-bottom:1px solid var(--line)}
#design .concern-index{position:absolute;top:10px;right:14px;font-size:8px;opacity:.55}
#design .concern [data-icon]{grid-row:1/3;width:48px;height:48px;margin:0}
#design .concern strong{font-size:21px;line-height:1.45}
#design .concern>span:last-of-type{font-size:11px;margin:0;line-height:1.6}
#design .concern b{display:none}
#design .concern.selected{background:#263f32;color:#f3f0e9;border-color:#263f32}
#design .concern.selected .concern-index,#design .concern.selected>span:last-of-type{color:#d1d9c8}
#design .concern.selected svg [stroke]{stroke:#e4e8d7}
#design .concern.selected svg [fill]:not([fill="none"]){fill:#e4e8d7}
#design .concern.selected [data-icon]{transform:none}
.concern-detail{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);border:1px solid var(--line);border-top:0;background:#e8eadf;min-height:285px}
.concern-preview-media{min-width:0;background:#dedfd4;position:relative;padding:16px;display:flex;align-items:center;justify-content:center}
.concern-photo-button{display:block;position:relative;padding:0;width:100%;background:none;border:0;text-align:left}
.concern-photo-button[hidden],.concern-area-diagram[hidden],.concern-record-link[hidden]{display:none}
.concern-preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.concern-preview-pair figure{position:relative;min-width:0;background:#d4d8cc}
.concern-preview-pair img{width:100%;height:232px;object-fit:contain}
.concern-preview-pair figcaption{position:absolute;top:8px;left:8px;font-size:10px;line-height:1.6;background:#f3f0e9ec;padding:3px 8px;color:#263f32}
.concern-photo-hint{position:absolute;right:9px;bottom:8px;font-size:10px;line-height:1.6;padding:4px 9px;background:#263f32e8;color:#f3f0e9}
.concern-detail-copy{padding:25px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.concern-selection-label{font-size:9px;letter-spacing:.13em;color:#5b6b56;margin-bottom:9px}
.concern-detail h3{font:400 29px/1.45 var(--serif);letter-spacing:-.045em}
#concern-description{font-size:13px;color:#53604f;line-height:1.8;margin-top:11px;max-width:430px}
.concern-record-caption{font-size:10px;color:#65705e;line-height:1.7;margin-top:12px}
.concern-detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin-top:17px}
.concern-detail-actions .text-link{font-size:12px;min-height:31px;gap:18px}
.concern-result-note{font-size:10px;line-height:1.65;color:#65705e;margin-top:11px}
.concern-area-diagram{text-align:center;width:100%;height:232px;display:grid;justify-items:center;align-content:center;gap:6px}
.concern-area-diagram svg{width:190px;height:190px;max-height:calc(100% - 22px)}
.concern-area-diagram figcaption{font-size:10px;color:#53604f}
.concern-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.concern-detail.is-changing .concern-detail-copy,.concern-detail.is-changing .concern-preview-media{animation:concern-arrive .3s ease both}
.motion-paused .concern-detail.is-changing *{animation:none!important}
@keyframes concern-arrive{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1000px){#design .concern{padding-inline:15px!important;grid-template-columns:39px 1fr;column-gap:10px}#design .concern [data-icon]{width:39px;height:39px}#design .concern strong{font-size:19px}#design .concern>span:last-of-type{font-size:10px}.concern-detail-copy{padding:22px}.concern-detail h3{font-size:25px}}
@media(max-width:760px){
  #design.design-section{padding:32px 6vw}
  #design .section-heading{margin-bottom:17px}
  #design .section-heading h2{font-size:27px;line-height:1.4}
  #design .section-heading .eyebrow{font-size:7px;margin-bottom:8px}
  #design .section-intro{display:none}
  #design .concern-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  #design .concern{display:flex;align-items:center;justify-content:center;min-height:74px;padding:10px 4px!important;gap:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  #design .concern:last-child{border-right:0}
  #design .concern [data-icon]{width:27px;height:27px;margin:0}
  #design .concern strong{font:500 13px/1.5 var(--sans);white-space:nowrap}
  #design .concern-index,#design .concern>span:last-of-type{display:none}
  .concern-detail{grid-template-columns:1fr;min-height:0}
  .concern-preview-media{padding:10px 10px 0}
  .concern-preview-pair img{height:170px}
  .concern-preview-pair figcaption{font-size:9px;top:6px;left:6px;padding:2px 6px}
  .concern-photo-hint{font-size:9px;right:6px;bottom:6px;padding:3px 7px}
  .concern-detail-copy{padding:16px 19px 17px}
  .concern-selection-label{font-size:7px;margin-bottom:6px}
  .concern-detail h3{font-size:24px}
  #concern-description{font-size:12px;line-height:1.7;margin-top:6px}
  .concern-record-caption{font-size:9px;margin-top:7px}
  .concern-detail-actions{gap:8px 19px;margin-top:9px}
  .concern-detail-actions .text-link{font-size:11px;min-height:30px;gap:9px}
  .concern-result-note{font-size:9px;line-height:1.55;margin-top:7px}
  .concern-area-diagram{height:170px;gap:0}
  .concern-area-diagram svg{width:145px;height:145px}
  .concern-area-diagram figcaption{font-size:9px}
}
@media(max-width:359px){#design .concern strong{font-size:12px}.concern-preview-pair img{height:145px}.concern-detail-copy{padding:13px 15px}.concern-detail h3{font-size:22px}.concern-area-diagram{height:145px}.concern-area-diagram svg{width:120px;height:120px}}
@media(prefers-reduced-motion:reduce){.concern-detail.is-changing *{animation:none!important}}