/* One viewport-aligned grid across all section backgrounds. */
body{background-image:none!important;overflow-x:clip}
.brief,html[data-theme="dark"] .brief,.seo,html[data-theme="dark"] .seo{background:transparent}
.seo{color:var(--ink)}
.seo .eyebrow,.seo .fine{color:var(--muted)}
.seo .lead,.seo .checklist{color:var(--ink)}
.seo .checklist li{border-color:var(--line)}
.seo .seo-price{background:var(--surface2);color:var(--ink);border-color:var(--line);border-radius:12px}
.seo .seo-price span{color:var(--cyber);font-size:14px}
html[data-theme="light"] .matrix-rain{opacity:.35}
/* A clean, full-width header in both themes. */
body>header{position:relative;z-index:11;isolation:isolate;background:var(--paper)}
body>header:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);pointer-events:none}
/* Keep the city hero above the decorative grid. */
.hero{z-index:10}
.hero .herofoot{border-top:0}
/* Animated code stays behind all page content. */
.matrix-rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;contain:strict}
body>main,body>footer{position:relative;z-index:1}
.matrix-toggle{border:1px solid #38c97966;border-radius:24px;background:transparent;color:inherit;font:inherit;font-size:13px;padding:9px 15px;cursor:pointer}
.matrix-toggle:hover{border-color:#55e795}
@media(prefers-reduced-motion:reduce){.matrix-rain{opacity:.55}}

/* Blend the city into the page before revealing the grid. */
.hero>.city-bottom-fade{position:absolute;inset:auto 0 0;height:clamp(140px,22vw,280px);z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,var(--paper) 100%)}
.hero+.intro{position:relative;margin-top:0;border-top:0}
.hero+.intro:before{content:"";position:absolute;inset:0 0 auto;height:90px;z-index:10;pointer-events:none;background:linear-gradient(to bottom,var(--paper),transparent)}
@media(max-width:720px){.hero+.intro:before{height:55px}}