.hood-dialog{padding:0;border:1px solid #b6a17e;background:#f3eee3;color:#30291e;width:min(1100px,94vw);max-width:none;height:min(840px,92dvh);max-height:none;overflow:hidden;box-shadow:0 24px 100px #30251440}
.hood-dialog::backdrop{background:#30291eb8;backdrop-filter:blur(9px)}
.hood-dialog-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 30px;border-bottom:1px solid #d6c9b3;background:#f8f4eb}
.hood-dialog-header span{color:#806335;font-size:.875rem;letter-spacing:.07em}
.hood-dialog-header h2{font-size:1.15rem;letter-spacing:0;line-height:1.3;margin-top:4px}
.hood-close{display:flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;background:#433321;border:1px solid #806335;color:#fffaf0;font-size:1.7rem;line-height:1}
.hood-scroll{height:calc(100% - 76px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#9a7c48 #e8dfce;scroll-behavior:auto}
.hood-scroll-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:start;padding:0 30px;gap:35px}
.hood-diagram-wrap{position:sticky;top:20px;margin:0;align-self:start;padding:18px 0 8px}
.hood-diagram-wrap svg{display:block;width:100%;height:auto;max-height:510px;overflow:visible}
.hood-diagram-wrap figcaption{font-size:.8125rem;color:#6c6253;text-align:center;margin-top:8px}
.hood-stage-readout{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#71562d;font-size:.875rem;border-bottom:1px solid #d6c9b3;padding:0 0 13px;margin-bottom:12px}
.hood-progress{display:flex;gap:6px;padding:16px 0}
.hood-progress span{flex:1;height:3px;background:#d9cdb8}
.hood-progress span.active{background:#8a682f}
.hood-step{min-height:400px;display:flex;flex-direction:column;justify-content:center;padding:55px 0;border-bottom:1px solid #d6c9b3}
.hood-step .eyebrow{font-size:.875rem;margin-bottom:18px;color:#806335}
.hood-step h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.08;margin-bottom:20px}
.hood-step p{font-size:1rem;color:#554b3d;margin-bottom:18px}
.hood-step small{color:#6c6253;font-size:.875rem}
.hood-step:last-child{border-bottom:0;padding-bottom:70px;min-height:440px}
.hood-step .btn{align-self:start;margin-top:5px}
.hood-source{display:inline-block;font-size:.875rem;color:#71562d;text-decoration:underline;text-underline-offset:4px;margin-top:22px}
.hood-diagram .shell,.hood-diagram .filters,.hood-diagram .duct,.hood-diagram .fan{transform-box:fill-box;transform-origin:center}
.hood-diagram .grease-coat,.hood-diagram .fire-risk,.hood-diagram .clean-sweep{opacity:0}
.hood-diagram .flow-line{stroke-dasharray:5 15;animation:exhaust-flow 1.5s linear infinite}
.hood-diagram .diagram-label{font-family:Arial,sans-serif;font-size:17px;fill:#40372b}
.hood-diagram .leader{stroke:#8b7755;stroke-width:1;fill:none}
.hood-diagram .fire-risk{filter:drop-shadow(0 0 10px #ff6b3055)}
.hood-dialog[data-paused=true] .flow-line{animation:none}
@keyframes exhaust-flow{to{stroke-dashoffset:-40}}
@media(max-width:700px){
 .hood-dialog{width:100%;height:100dvh;border:0;margin:0;inset:0;max-height:100dvh}
 .hood-dialog-header{height:74px;padding:12px 20px}.hood-dialog-header span{font-size:.8125rem}.hood-dialog-header h2{font-size:1.05rem}
 .hood-scroll{height:calc(100% - 74px)}
 .hood-scroll-grid{display:block;padding:0 22px}
 .hood-diagram-wrap{top:0;margin:0 -22px;padding:12px 22px 8px;z-index:2;background:linear-gradient(#f3eee3 94%,#f3eee300);border-bottom:1px solid #d6c9b3}
 .hood-diagram-wrap svg{height:235px;width:100%;max-height:32dvh}
 .hood-stage-readout{margin-bottom:3px;padding-bottom:8px;font-size:.8125rem}
 .hood-progress{padding:8px 0 0}.hood-diagram-wrap figcaption{font-size:.75rem;margin:3px 0 0}
 .hood-step{min-height:360px;padding:42px 0;scroll-margin-top:350px}.hood-step h3{font-size:1.9rem}.hood-step .eyebrow{margin-bottom:12px}.hood-step:last-child{padding-bottom:70px;min-height:480px}
}
@media(max-height:600px) and (max-width:700px){.hood-diagram-wrap svg{height:150px}.hood-dialog-header{height:62px}.hood-scroll{height:calc(100% - 62px)}.hood-diagram-wrap figcaption{display:none}}
@media(prefers-reduced-motion:reduce){.hood-diagram .flow-line{animation:none}.hood-diagram *{transition:none!important}}
body.hood-open{overflow:hidden}
/* Let the dialog heading grow on narrow screens and with enlarged text. */
.hood-dialog[open]{display:flex;flex-direction:column}
.hood-dialog-header{height:auto;min-height:76px;flex-shrink:0}
.hood-dialog-header>div{min-width:0}
.hood-close{flex-shrink:0}
.hood-scroll{height:auto;min-height:0;flex:1}
@media(max-width:700px){.hood-dialog-header{min-height:74px;padding-top:calc(12px + env(safe-area-inset-top))}.hood-diagram-wrap svg{height:260px;max-height:34dvh}.hood-diagram .diagram-label{font-size:28px}}
@media(max-height:600px) and (max-width:700px){.hood-diagram-wrap svg{height:150px}.hood-diagram .diagram-label{font-size:32px}}

/* Match the ivory / espresso site while preserving the scroll-driven cutaway. */
.hood-dialog-header h2{color:#30291e;font-family:Georgia,'Times New Roman',serif;font-weight:400}
.hood-dialog .hood-step h3{color:#30291e;font-family:Georgia,'Times New Roman',serif;font-weight:400}
.hood-dialog .hood-close{border-radius:0;box-shadow:none;transition:background .2s}
.hood-dialog .hood-close:hover{background:#6b502d}
.hood-dialog .hood-close:focus-visible{outline:2px solid #806335;outline-offset:4px}
.hood-dialog .hood-diagram .vapor-flow{stroke:#746955;opacity:.7}
.hood-dialog .hood-diagram .clean-sweep{stroke:#5b806b}
.hood-dialog .hood-step .btn{background:#433321;color:#fffaf0;border:1px solid #433321}
.hood-dialog .hood-step .btn:hover{background:#6b502d}
.hood-dialog .hood-source{color:#71562d}
.hood-dialog .hood-diagram-wrap{background:#f3eee3}
@media(max-width:700px){.hood-dialog-header{gap:12px}.hood-dialog-header span{font-size:.68rem;letter-spacing:.08em}.hood-dialog-header h2{margin-bottom:0}.hood-dialog .hood-close{width:44px;height:44px;min-width:44px;min-height:44px}.hood-dialog .hood-step{padding:34px 0}.hood-dialog .hood-step h3{font-size:1.9rem}.hood-diagram-wrap{box-shadow:0 5px 12px #49351d08}}