.elementor-509 .elementor-element.elementor-element-3aa1969{--display:flex;}.elementor-509 .elementor-element.elementor-element-a906600{--display:flex;}.elementor-509 .elementor-element.elementor-element-a906600.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-509 .elementor-element.elementor-element-290a125{--display:flex;}@media(min-width:768px){.elementor-509 .elementor-element.elementor-element-a906600{--width:81.009%;}}/* Start custom CSS *//* ==========================================================================
   Shared Blogs Stylesheet — used by ALL /blogs/ posts, not just one.
   Load it once, sitewide, scoped to the "post" post type (or the /blogs/
   URL pattern) via WPCode's "Insert CSS" snippet type set to Site Wide /
   Post Type: post — not per-page Custom CSS. That way every new blog post
   gets these classes automatically without re-pasting CSS each time.

   Why a separate file: every box below (e.g. .blog-tailor-card) sets its
   own max-width and centers itself, so it can never stretch full-bleed
   regardless of what Content Width/Boxed setting the wrapping Elementor
   Container has — this sidesteps the nested-container width bug entirely
   instead of fighting it.

   Reuses the site's existing CSS variables (--color-navy, --color-accent,
   etc.) already defined in assets/css/style.css, which every page also
   loads — so colors stay in sync with the rest of the site automatically.
   ========================================================================== */

.blog-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Disclosure callout ---------- */
.blog-disclosure {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin: 24px 0;
  font-size: .92rem;
  color: var(--color-text-muted);
}
.blog-disclosure a { color: var(--color-accent-dark); }

/* ---------- Generic prose section ---------- */
.blog-section { margin: 40px 0; }
.blog-section h2 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.blog-section p { color: var(--color-text); margin: 0 0 16px; }
.blog-section ul { margin: 0 0 16px; padding-left: 20px; }
.blog-section li { margin-bottom: 8px; color: var(--color-text); }

/* ---------- Tailor profile card (the box from the screenshot) ---------- */
.blog-tailor-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(20, 20, 30, .08);
  padding: 32px;
  margin: 0 0 28px;
}
.blog-tailor-card h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.4rem;
  margin: 0 0 14px;
}
.blog-tailor-card p {
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.6;
}
.blog-tailor-card p:last-child { margin-bottom: 0; }
.blog-tailor-card strong { color: var(--color-navy); }
.blog-tailor-card a { color: var(--color-accent-dark); font-weight: 600; }
.blog-tailor-card a:hover { text-decoration: underline; }

/* ---------- "What separates bespoke" 4-up grid ---------- */
.blog-flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.blog-flag-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.blog-flag-card h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.blog-flag-card p { color: var(--color-text-muted); margin: 0; font-size: .94rem; }

/* ---------- Sources list ---------- */
.blog-sources {
  font-size: .85rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin-top: 40px;
}
.blog-sources li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .blog-tailor-card { padding: 22px; }
}

/* ---------- Blogs hub: flat card grid (no border/shadow) ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin: 8px 0 40px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
}
.blog-card-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}
.blog-card-title {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 10px;
}
.blog-card:hover .blog-card-title { color: var(--color-accent-dark); }
.blog-card-excerpt {
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-readmore {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-navy);
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; gap: 32px; }
}/* End custom CSS */