* { box-sizing: border-box; }
body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; line-height: 1.6; }
h1,h2,h3,p { margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.skip-link { position: absolute; left: 20px; top: -100px; background: white; color: #262626; padding: 12px; z-index: 1000; }
.skip-link:focus { top: 10px; }
.quiet-hero { position: relative; isolation: isolate; }
.quiet-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .075; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h220v220H0z'/%3E%3C/svg%3E"); }
.hero-layout { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60px; padding-top: 85px; padding-bottom: 75px; }
.quiet-hero h1 { font-size: clamp(44px, 4.9vw, 68px); line-height: 1.1; }
.quiet-hero .subtitle { font-size: 18px; line-height: 1.75; margin: 28px 0 30px; max-width: 480px; }
.hero-cta { display: flex; align-items: center; gap: 28px; }
.quiet-hero .cta-button { display: inline-block; padding: 14px 28px; background: #f5f5f5; color: #262626; text-decoration: none; font-weight: 600; font-size: 15px; }
.quiet-hero .cta-button:hover { background: white; }
.quiet-link { color: #eee; font-size: 14px; }
.hero-note { color: #bbb; font-size: 13px; margin-top: 25px; }
.quietdrawing { width: 100%; height: auto; }
.chalk { fill: none; stroke: #dedede; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.chalklabel { fill: #d9d9d9; font: 19px 'MuseoModerno', sans-serif; }
.hero-foot { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; color: #bbb; font-size: 12px; border-top: 1px solid #ffffff20; }
.possibilities { background: #f5f5f5; padding: 36px 0; }
.possibilities-layout { display: flex; gap: 35px; justify-content: space-between; align-items: center; }
.possibilities h2 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.possibilities p { font-size: 13px; color: #555; }
.space-examples { display: flex; gap: 12px; flex-wrap: wrap; }
.space-example { padding: 14px 17px; border-radius: 10px; font-size: 12px; }
.garden { background: #e6eddf; color: #385844; }
.bakery { background: #f0dfd8; color: #843e32; }
.idea { background: #e7e2f4; color: #4e4481; }
.hub-section { padding: 70px 30px 60px; background: white; }
.hub-hero { text-align: center; margin: 0 auto 45px; }
.hub-hero h2 { font-family: 'MuseoModerno', sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; }
.hub-hero p { color: #555; font-size: 16px; margin-top: 18px; }
.hub-ring { display: grid; grid-template-columns: repeat(3,1fr); max-width: 1000px; margin: auto; gap: 0 30px; }
.hub-node { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 28px 0; border-bottom: 1px solid #e3e3e3; color: #262626; text-decoration: none; border-radius: 4px; }
.hub-node:hover { background: #f7f7f7; }
.icon-wrap { grid-row: span 2; font-size: 29px; color: #444; display: flex; align-items: start; padding-top: 2px; }
.hub-node h3 { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.hub-node p { font-size: 13px; color: #555; line-height: 1.6; }
.hub-bottom { text-align: center; margin-top: 42px; }
.hub-cta { display: inline-block; background: #303030; color: #fff; padding: 13px 25px; border-radius: 28px; text-decoration: none; font-size: 14px; }
.homescreen-band { background: #282828; color: #F5F5F5; padding: 72px 0; }
.homescreen-layout { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.homescreen-copy { max-width: 520px; }
.homescreen-band h2 { font: 500 40px/1.15 'MuseoModerno', sans-serif; letter-spacing: -.03em; margin-bottom: 18px; }
.homescreen-band h2 span { display: block; color: #BBBBBB; }
.homescreen-band p { color: #DDDDDD; font-size: 18px; line-height: 1.6; }
.homescreen-art { position: relative; flex: 0 0 auto; margin: 0 150px 0 0; }
.homescreen-art img { display: block; width: 240px; height: auto; }
.homescreen-art figcaption { position: absolute; left: 100%; top: 34%; margin-left: 4px; white-space: nowrap; font: 22px/1 'Architects Daughter', cursive; color: #D9D9D9; transform: rotate(-6deg); }
@media(max-width: 900px) { .hero-layout { gap: 20px; } .possibilities-layout { flex-direction: column; align-items: start; } .hub-ring { grid-template-columns: repeat(2,1fr); } }
@media(max-width: 600px) {
 .container { padding-left: 24px; padding-right: 24px; }
 .hero-layout { grid-template-columns: 1fr; padding-top: 45px; padding-bottom: 28px; gap: 15px; }
 .quiet-hero .subtitle { font-size: 16px; }
 .quietdrawing { max-height: 275px; }
 .hero-foot { flex-direction: column; gap: 6px; font-size: 11px; }
 .space-examples { gap: 8px; } .space-example { padding: 11px; }
 .hub-section { padding: 45px 24px; } .hub-hero { text-align: left; margin-bottom: 20px; }
 .hub-hero h2 { font-size: 28px; } .hub-ring { grid-template-columns: 1fr; }
 .hub-node { padding: 20px 0; } .hero-cta { gap: 22px; }
}
@media (max-width: 760px) {
 .homescreen-layout { flex-direction: column; align-items: flex-start; gap: 32px; }
 .homescreen-band { padding: 56px 0; } .homescreen-band h2 { font-size: 30px; }
 .homescreen-art { margin: 0; } .homescreen-art img { width: 200px; }
 .homescreen-art figcaption { position: static; display: block; margin-top: 10px; transform: rotate(-4deg); }
}