.community-hero-gradient {
    background: radial-gradient(ellipse at 30% 20%, rgba(120, 188, 200, 0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(0, 30, 40, 0.55), transparent 60%), linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-deep-hi) 100%);
}

.community-hero-gradient::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 30, 40, 0.25) 0%, rgba(0, 30, 40, 0.1) 35%, rgba(0, 30, 40, 0.55) 100%);}
.blog-hero {height: 60vh; min-height: 460px;}
.community-hero-overlay {padding: 0 var(--pad-x);}
.community-hero-eyebrow {color: var(--accent) !important; margin-bottom: 1rem;}
.community-hero-title {color: #fff; margin: 0 0 1.4rem; max-width: 900px;}
.community-hero-title em {color: var(--accent);}
.community-hero-lede {font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.6; color: rgba(255, 255, 255, 0.92); max-width: 44rem; margin: 0 0 2.2rem;}

.section {padding: var(--pad-y) var(--pad-x); max-width: var(--max-w); scroll-margin-top: 6rem;}
.blog-featured-section {padding-top: 4rem; padding-bottom: 2rem;}
.blog-featured {grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); max-width: var(--max-w);}
.blog-featured-image {aspect-ratio: 4 / 3;}

.blog-card-image img, .blog-featured-image img, .blog-article-hero > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;}
.blog-category-pill{top: 1rem; left: 1rem; padding: 0.4rem 0.85rem; font-size: 0.66rem; letter-spacing: 0.18em; background: rgba(0, 30, 40, 0.85); backdrop-filter: blur(8px);}
.blog-category-live-local {background: rgba(31, 61, 53, 0.95);}
.blog-category-designed-by-you {background: rgba(46, 42, 34, 0.95);}
.blog-category-built-better {background: rgba(0, 62, 81, 0.95);}
.blog-featured-eyebrow {color: var(--accent); margin-bottom: 0.6rem;}
.blog-featured-title {margin: 0 0 1.25rem;}
.blog-featured-excerpt {font-size: 1rem; line-height: 1.65; color: var(--ink-mute); margin: 0 0 1rem;}
.blog-featured-meta .blog-meta {margin: 1.25rem 0 1.75rem;}
.blog-meta {font-size: 0.74rem; letter-spacing: 0.06em; color: rgba(0, 62, 81, 0.55); margin: 0.3rem 0 0;}
.blog-featured-meta .btn-ghost {display: inline-block;}


.blog-filters {gap: 0.6rem; padding: 0 var(--pad-x); margin: 2rem auto 0; max-width: var(--max-w);}
.blog-filter {font-size: 0.72rem; letter-spacing: 0.16em; padding: 0.6rem 1.1rem; background: transparent; color: var(--ink-deep); border: 1px solid rgba(0, 62, 81, 0.25); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;}
.blog-filter.active {background: var(--ink-deep); color: #fff; border-color: var(--ink-deep);}
.blog-grid-section {padding-top: 2rem;}
.blog-grid {grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.75rem; max-width: var(--max-w);}
.blog-card{display: flex;}
.blog-card.is-hidden {display: none;}
.blog-card-image {aspect-ratio: 4 / 3; margin-bottom: 1.1rem;}
.blog-card-title {font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.3; margin: 0;}
.blog-card-title a {color: var(--ink-deep); text-decoration: none; transition: color .15s ease;}
.blog-card-title a:hover { color: var(--ink-deep-hi);}
.blog-card-excerpt {font-size: 0.92rem; line-height: 1.55; color: var(--ink-mute); margin: 0;}
.blog-meta {font-size: 0.74rem; letter-spacing: 0.06em; color: rgba(0, 62, 81, 0.55); margin: 0.3rem 0 0;}

.brochure-section {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ink-deep); color: #fff; min-height: 600px;}
.brochure-image-gradient {background: radial-gradient(ellipse at 25% 25%, rgba(120, 188, 200, 0.45), transparent 55%), linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-deep-hi) 100%);}

.brochure-form {padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);}
.brochure-eyebrow {color: var(--accent) !important; margin-bottom: 0.5rem;}
.brochure-title {font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; color: #fff; margin: 0 0 0.5rem; letter-spacing: -0.01em; line-height: 1.1;}
.brochure-title em {color: var(--accent);}
.brochure-sub {font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 1.2rem; line-height: 1.5;}

.form-row {grid-template-columns: 1fr 1fr; gap: 0.75rem;}
.form-field {gap: 0.35rem;}
.form-field span {font-size: 0.62rem; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.6);}
.form-field input, .form-field select {padding: 0.85rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: #fff; border-radius: 4px; font-family: var(--font-body); font-size: 0.95rem; transition: border-color .2s ease, background .2s ease;}
.form-field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.form-field input:focus,
.form-field select:focus {outline: none; border-color: var(--accent);background: rgba(255, 255, 255, 0.08);}
.form-field select option { background: var(--ink-deep); color: #fff; }

.brochure-submit {margin-top: 0.5rem; padding: 1.1rem 1.6rem; background: var(--accent); color: var(--ink-deep); border: none; border-radius: 7px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, transform .15s ease;}
.brochure-submit:hover {background: #b9e0e8; transform: translateY(-1px);}
.form-meta {margin: 0.4rem 0 0; font-family: var(--font-body); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em;}



/* Blog details */
.blog-article {
    max-width: 760px;
    margin: 0 auto 3rem;
    padding: 9rem var(--pad-x) 0;
}
.blog-article-header {
    margin-bottom: 2.5rem;
}
.blog-article-breadcrumb {
    gap: 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    margin: 0 0 1.5rem;
}
.blog-article-breadcrumb a {
    color: var(--ink-deep);
}
.blog-article-breadcrumb a:hover {
    color: var(--ink-deep-hi);
}
.blog-article-breadcrumb .blog-category-pill {
    position: static;
}
.blog-article-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
}
.blog-article-byline {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
}
.blog-article-hero {
    margin: 0 calc(-1 * var(--pad-x)) 3rem;
    aspect-ratio: 16 / 9;
}
.blog-article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-deep);
}
.blog-article-body .blog-lead {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    color: var(--ink-deep);
    margin: 0 0 2rem;
}
.blog-article-body .blog-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-deep);
  margin: 0 0 2rem;
}
.blog-article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 400;
  margin: 2.5rem 0 1rem;
  color: var(--ink-deep);
}
.blog-article-body p { margin: 0 0 1.4rem; }
.blog-article-body ul {
  margin: 0 0 1.6rem;
  padding-left: 1.4rem;
}
.blog-article-body li { margin: 0 0 0.7rem; }
.blog-article-body a {
  color: var(--ink-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.blog-pullquote {
  margin: 2.5rem -1rem;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--ink-deep);
  background: rgba(0, 62, 81, 0.04);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-deep);
}
.blog-pullquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.blog-article-cta-line {
  margin-top: 2.5rem;
  text-align: center;
}

.blog-related-section { background: rgba(0, 62, 81, 0.03); padding: 5rem var(--pad-x); }
.section-intro {
    margin-bottom: 3rem;
    max-width: 60rem;
}


@media (max-width: 1100px) {
    .brochure-section {grid-template-columns: 1fr;}
    .brochure-image {aspect-ratio: 16 / 9; min-height: 0;}
}

@media (max-width: 960px) {
    .blog-featured, .form-row {grid-template-columns: 1fr;}
}

@media (max-width: 640px) {
    .blog-grid {grid-template-columns: 1fr;}
    .blog-article{padding: 6rem var(--pad-x) 0;}
}