/* Page-specific mockup components kept separate from the shared concept styles. */
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1}
nav .contact.active{background:#111;color:#fff;border-color:#111}
.about-intro,.contact-intro{padding:100px 32px 64px;border-bottom:1px solid var(--line)}
.contact-intro{padding-bottom:40px;border-bottom:0}
.about-intro>div,.contact-intro>div,.about-principles>div,.about-people>div,.contact-layout,.prototype-intro>div{max-width:1200px;margin:0 auto}
.about-intro small,.contact-intro small,.prototype-intro small{display:block;font:12px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--muted);margin-bottom:16px}
.about-intro h1,.contact-intro h1,.prototype-intro h1{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.02em;margin:0 0 24px}
.contact-intro h1,.prototype-intro h1{margin-bottom:16px}
.about-intro p{max-width:640px;font-size:18px;line-height:1.6;margin:0;color:rgba(0,0,0,.78)}
.contact-intro p,.prototype-intro p{max-width:560px;font-size:17px;line-height:1.5;margin:0;color:rgba(0,0,0,.7)}
.about-principles{padding:64px 32px;border-bottom:1px solid var(--line)}
.about-principles h2,.section-title h2{font:12px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 32px}
.about-principles>div>div{display:flex;flex-direction:column;gap:28px;max-width:680px}
.about-principles p{margin:0;font-size:16px;line-height:1.6;color:rgba(0,0,0,.78)}
.about-people{padding:64px 32px 100px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.section-title h2{margin:0}.section-title p{margin:0;font:14px 'Architects Daughter',cursive;color:rgba(0,0,0,.6)}
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.person-card{border:1px dashed rgba(0,0,0,.5);padding:24px}
.person-mark{display:block;width:56px;height:56px;border:1.5px solid var(--line);margin-bottom:16px;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 10px)}
.person-card h2{font-size:15px;margin:0 0 4px}.person-card p{margin:0;font:11px 'IBM Plex Mono',monospace;color:rgba(0,0,0,.45);text-transform:uppercase;letter-spacing:.05em}
.contact-section{padding:40px 32px 100px}.contact-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.contact-form{position:relative;border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:20px}
.contact-form:before{content:none}.contact-form .honeypot{position:absolute;left:-9999px}.form-label,.contact-panel h2{font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.45)}
.form-label{margin-bottom:4px}.field label{display:block;font:11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.contact-form .field input,.contact-form .field textarea{font:15px Helvetica,Arial,sans-serif}.contact-form textarea{resize:none}.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(0,0,0,.4)}
.contact-form input:focus,.contact-form textarea:focus{outline:none}.contact-submit{display:flex;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap}.contact-submit span{font:13px 'Architects Daughter',cursive;color:var(--muted)}
.contact-form .notice{margin:0}.contact-aside{display:flex;flex-direction:column;gap:24px}.contact-panel{border:1px dashed rgba(0,0,0,.5);padding:24px}.contact-panel h2{margin:0 0 12px}.contact-panel>div{font-size:15px;line-height:1.8}.contact-panel a{text-decoration:underline;text-underline-offset:2px}.contact-panel p{margin:0;color:rgba(0,0,0,.6);font-size:15px;line-height:1.8}.contact-panel .contact-links{font:13px 'IBM Plex Mono',monospace;color:var(--ink)}.contact-note{margin:0;font:13px 'Architects Daughter',cursive;color:rgba(0,0,0,.5);transform:rotate(-1.5deg)}
.prototype-intro{padding:64px 32px 48px;border-bottom:1px solid var(--line)}.prototype-section{padding:56px 32px 100px}.prototype-list{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.prototype-empty{position:relative;border:1px solid var(--line);display:grid;grid-template-columns:340px 1fr;min-height:220px}.prototype-visual{border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 12px);font:11px 'IBM Plex Mono',monospace;color:rgba(0,0,0,.5)}
.prototype-copy{padding:24px 28px;display:flex;flex-direction:column;gap:10px}.prototype-copy h2{font-size:20px;margin:0}.prototype-copy p{margin:0;font-size:14px;line-height:1.5;color:rgba(0,0,0,.7)}.prototype-copy span{margin-top:6px;font:13px 'Architects Daughter',cursive;color:var(--muted)}
@media(max-width:900px){.contact-layout{gap:28px}.prototype-empty{grid-template-columns:280px 1fr}}
@media(max-width:620px){.about-intro,.contact-intro{padding:72px 20px 40px}.about-intro h1,.contact-intro h1,.prototype-intro h1{font-size:48px}.about-intro p{font-size:17px}.about-principles,.about-people{padding:52px 20px}.about-people{padding-bottom:72px}.about-principles>div>div{gap:22px}.contact-section{padding:32px 20px 72px}.contact-layout{grid-template-columns:1fr;gap:28px}.contact-form{padding:24px 20px}.prototype-intro{padding:52px 20px 32px}.prototype-section{padding:40px 20px 72px}.prototype-empty{grid-template-columns:1fr}.prototype-visual{min-height:180px;border-right:0;border-bottom:1px solid var(--line)}.prototype-copy{padding:22px 20px}.contact-submit{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:390px){.about-intro,.contact-intro,.about-principles,.about-people,.contact-section,.prototype-intro,.prototype-section{padding-left:16px;padding-right:16px}}