.directions-section { padding: 80px clamp(22px,7vw,110px); background: #f5f2e9; }
.directions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.direction-card { min-width: 0; display: flex; flex-direction: column; background: #fffef9; border: 1px solid #c5cdbf; border-radius: 4px; overflow: hidden; }
.direction-copy { display: flex; flex-direction: column; padding: 32px; flex: 1; }
.direction-number { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #766455; }
.direction-card h3 { color: #173e32; font: 34px/1.23 Prata,Georgia,serif; margin: 20px 0 10px; }
.direction-card p { color: #536158; font-size: 14px; line-height: 1.75; }
.direction-card .direction-inspiration { color: #6f584b; font-size: 12px; margin: 0 0 20px; }
.direction-card figure { margin: 0; }
.direction-card img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.direction-card figcaption { font-size: 11px; padding: 10px 22px; color: #536158; }
.direction-render { background: #eef1e8; border-bottom: 1px solid #d5ddd1; }
.direction-render > a { display: block; }
.direction-render img { aspect-ratio: 75/56; object-fit: contain; }
.direction-render figcaption { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; }
.direction-render figcaption a { color: #173e32; min-height: 36px; display: inline-flex; align-items: center; }
.direction-drawing-details { border: 1px solid #c5cdbf; border-radius: 4px; overflow: hidden; margin: 4px 0 12px; }
.direction-drawing-details summary { padding: 14px; min-height: 48px; font-size: 13px; color: #173e32; cursor: pointer; }
.direction-drawing-details summary:hover { background: #e8eddf; }
.direction-drawing-details summary:focus-visible, .direction-render a:focus-visible { outline: 3px solid #40634b; outline-offset: -3px; }
.direction-drawing-details[open] summary { border-bottom: 1px solid #c5cdbf; }
.direction-drawing-details .direction-drawing { border-bottom: 0; }
.direction-drawing { background: #fff; border-bottom: 1px solid #d5ddd1; }
.direction-drawing > a { display: block; }
.direction-drawing img { aspect-ratio: 10/7; object-fit: contain; }
.direction-drawing figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.direction-drawing figcaption a { color: #173e32; min-height: 32px; display: inline-flex; align-items: center; }
.drawing-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.drawing-downloads a { border: 1px solid #b6c4b3; padding: 10px 12px; border-radius: 4px; font-size: 12px; color: #173e32; min-height: 44px; display: flex; align-items: center; }
.drawing-downloads a:hover { background: #e8eddf; }
.direction-card .drawing-scope { font-size: 11px; line-height: 1.6; color: #64715e; }
.drawing-workflow { margin-top: 28px; padding: 28px 30px; background: #173e32; color: white; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 30px; }
.drawing-workflow h3 { font: 27px/1.3 Prata,Georgia,serif; margin: 0 0 12px; }
.drawing-workflow p { font-size: 13px; line-height: 1.8; margin: 0; color: #d3dfd3; }
.drawing-workflow .button { background: #d9ff65; color: #173e32; justify-self: end; }
.direction-principles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0; list-style: none; }
.direction-principles li { border: 1px solid #c8d0c2; border-radius: 30px; padding: 7px 11px; color: #2b4937; font-size: 11px; }
.direction-card .direction-consideration { font-size: 12px; border-top: 1px solid #d9ddcf; padding-top: 18px; }
.direction-fluid-parametric { border-top: 4px solid #a891b2; }
.direction-structural-high-tech { border-top: 4px solid #7d9999; }
.direction-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; }
.direction-actions > a:not(.button) { color: #264a3c; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.direction-source { margin-top: 20px; font-size: 11px; color: #626d60; align-self: flex-start; }
.direction-note { color: #677064; font-size: 12px; line-height: 1.75; margin-top: 22px; max-width: 960px; }
.direction-note p { margin: 8px 0; }
.direction-card.is-selected { outline: 3px solid #40634b; outline-offset: 3px; }
.direction-card button[aria-pressed="true"] { background: #d9ff65; color: #173e32; }
.visualization-section { padding: 45px clamp(22px,5vw,80px); background: #e8eddf; }
.visualization-section h2 { color: #173e32; font-size: clamp(30px,3vw,43px); }
.visual-brief-controls { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 36px; }
.visual-brief-controls label { display: block; font-size: 13px; color: #173e32; margin: 16px 0 8px; }
.visual-brief-controls select { width: 100%; max-width: 460px; padding: 14px; font: 16px Manrope,Arial,sans-serif; color: #173e32; background: #fff; border: 1px solid #aab9a4; border-radius: 4px; }
.visual-brief-controls p { font-size: 13px; line-height: 1.7; color: #586853; }
.visual-brief-controls a { font-size: 13px; color: #173e32; }
.visual-brief-status { color: #755032; font-size: 14px; line-height: 1.7; }
.visual-brief-output { margin-top: 24px; background: #fffef9; padding: 24px; border: 1px solid #afbea4; }
.visual-brief-output h3 { color: #173e32; font-size: 24px; }
.visual-brief-output p { color: #536158; font-size: 13px; line-height: 1.7; }
.visual-brief-output textarea { width: 100%; padding: 16px; border: 1px solid #b5c0ad; font: 15px/1.8 Manrope,Arial,sans-serif; color: #304333; resize: vertical; background: white; }
.selected-direction-notice { padding: 15px clamp(22px,7vw,110px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: #f4ecd9; color: #4d563f; font-size: 13px; line-height: 1.7; }
.selected-direction-notice a { color: #173e32; }
@media(max-width:1050px) { .topbar nav { gap: 12px; } .topbar nav a { font-size: 12px; } }
@media(max-width:760px) {
  .directions-section, .visualization-section { padding: 46px 22px; }
  .directions-grid, .visual-brief-controls { grid-template-columns: 1fr; }
  .drawing-workflow { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .drawing-workflow .button { justify-self: start; }
  .direction-copy { padding: 24px; }
  .direction-card h3 { font-size: 30px; }
  .visual-brief-output { padding: 18px; }
  .visual-brief-output textarea { font-size: 16px; }
}
@media print { .visualization-section, .selected-direction-notice { display: none !important; } }