/* Shared spacing rhythm. Keep related items close and sections clearly apart. */
:root{--space-small:8px;--space-text:16px;--space-group:24px;--space-block:32px;--card-space:32px}
@media(max-width:800px){:root{--card-space:24px}}

/* Section edges and introductions. */
.work-section,body .directory-main{padding-block:var(--section-space)}
.section-head{gap:var(--space-block);margin-bottom:var(--space-block)}
.section-head .eyebrow,.page-intro>.eyebrow,.article-intro>.eyebrow,.work-section>.wrap>.eyebrow{margin:0 0 var(--space-text)}
.page-intro{margin-bottom:var(--space-block)}
.page-intro h1,.article-intro h1,.work-section h1{margin:0 0 var(--space-group)}
.page-intro>.page-lead,.work-intro{margin:0}
.article-intro{margin:var(--space-block) 0}
.article-intro .page-lead{margin-top:var(--space-group)}
.page-actions{gap:var(--space-group);margin-block:var(--space-group) var(--space-block)}

/* Matching card padding and gaps across service, directory, blog, and work cards. */
.service-grid,.property-services,.directory-grid,.blog-grid,.customer-review-grid,.work-grid{gap:var(--space-group)}
.service-card,.plan-summary,.directory-card,.directory-note,.directory-search,.blog-card,.property-guide,.customer-review-grid figure{padding:var(--card-space)}
.directory-grid{margin-block:var(--space-block)}
.directory-search{margin-block:var(--space-block)}
.directory-note{margin-top:var(--space-block)}
.directory-card h2,.directory-note h2{margin:0 0 var(--space-text)}
.directory-card p,.directory-note p{margin:0 0 var(--space-text)}
.directory-card p:last-child,.directory-note p:last-child{margin-bottom:0}
.directory-search label,.directory-card label{margin-bottom:var(--space-small)}
.blog-card{gap:var(--space-text)}
.blog-card p{margin:0}
.blog-card .guide-link,.property-guide .guide-link{padding-top:var(--space-group)}
.scene-grid figcaption{padding-top:var(--space-text);gap:var(--space-small)}
.customer-review-grid{margin-top:var(--space-block)}
.customer-review-grid blockquote{margin:var(--space-text) 0 var(--space-group)}
.review-invitation{gap:var(--space-group);margin-top:var(--space-block)}

/* Photos and Instagram invitations follow the same text-to-action rhythm. */
.work-follow{margin:var(--space-block) 0}
.work-follow>h2{margin:0 0 var(--space-text)}
.work-follow>p{margin:0 0 var(--space-group)}
.work-follow>.instagram-follow+p{margin:var(--space-text) 0 0}
.work-grid{margin:var(--space-block) 0}
.work-grid+.work-follow{margin-top:var(--space-block);margin-bottom:0}
.work-card figcaption{padding:var(--card-space)}
.work-card h3{margin:0 0 var(--space-small)}
.work-card p{margin:0}

/* Pop-up headings need breathing room on both sides. */
#info-dialog{padding:var(--space-block)}
#info-dialog>.eyebrow{margin:0 0 var(--space-text)}
#info-dialog>h2{margin:0 32px 0 0}
#info-body{margin-top:var(--space-group)}
#info-body>:is(p,ul,ol){margin:0}
#info-body>:is(p,ul,ol)+:is(p,ul,ol){margin-top:var(--space-text)}
#info-body>:is(h2,h3,h4){margin:var(--space-block) 0 var(--space-text);line-height:1.25}
#info-body>:first-child{margin-top:0}
#info-body li+li{margin-top:var(--space-small)}
#info-dialog>.dialog-done{margin-top:var(--space-block)}

/* Form fields and reading blocks use measured gaps, without changing their content. */
.form-grid{gap:var(--space-group);margin-block:var(--space-group)}
.form-grid label{gap:var(--space-small)}
.ack-fields{gap:var(--space-text);margin-top:var(--space-group)}
.ack-fields label{gap:var(--space-small)}
.terms-document-notice{margin-block:var(--space-block);padding:var(--card-space)}
.terms-copy{margin-block:var(--space-block)}
.blog-body h2{margin:var(--space-block) 0 var(--space-text)}
.blog-body p{margin:0 0 var(--space-group)}
.related-guides{padding-top:var(--space-block)}
.related-guides h2{margin-bottom:var(--space-group)}
.related-guides>a{margin-block:var(--space-text)}
@media(max-width:800px){.section-head>p{margin-top:var(--space-text)}}
@media(max-width:580px){#info-dialog{padding:var(--space-group)}.page-actions{gap:var(--space-text)}}

/* Simple pricing stays readable without interacting with the space planner. */
.pricing-summary{max-width:900px}.simple-price-table{border-collapse:collapse;width:100%;margin:24px 0;table-layout:fixed}.simple-price-table caption{text-align:start;color:var(--muted);font-size:.85em;padding-bottom:16px}.simple-price-table th,.simple-price-table td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:start;overflow-wrap:normal}.simple-price-table thead{background:var(--soft)}.simple-price-table th:first-child{width:60%}.simple-price-table td:last-child,.simple-price-table th:last-child{text-align:end}.simple-price-table td{font-weight:800;font-variant-numeric:tabular-nums}.pricing-summary .text-link{display:inline-block;margin-top:8px}@media(max-width:580px){.simple-price-table{font-size:.85em}.simple-price-table th,.simple-price-table td{padding:16px 8px}.header #navigation.open{align-items:stretch;text-align:start;gap:12px}.header #navigation.open a{display:block;line-height:1.35;padding-block:4px}}

/* A constrained column must scroll vertically, never wrap into another column. */
@media(max-width:800px){.header #navigation.open{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;max-height:min(60dvh,calc(100dvh - 280px));min-height:0}.header #navigation.open>a{flex:0 0 auto;width:100%;min-width:0;white-space:normal;overflow-wrap:break-word}}
