/*
 * WordPress / GeneratePress overrides for migrated HubSpot content.
 *
 * The HubSpot pages are designed full-width — hero strips, CTA bands,
 * footer CTAs go edge-to-edge. WordPress + GeneratePress wraps post
 * content in a max-width container (~1200px by default), which crops
 * those full-width sections and centers the hero in a narrow column.
 *
 * Two things to fix:
 *   1. Widen the content container on migrated marketing pages so the
 *      whole post body has full-viewport width to play with.
 *   2. "Breakout" pattern for sections that should escape any remaining
 *      content padding and span 100vw regardless of parent width.
 *
 * Loaded last in functions.php so these rules win against the upstream
 * GeneratePress + legacy-templates CSS.
 */

/* ── Full-width post body for ALL pages + migrated CPTs ───────────────────
   Brute force for now — every GeneratePress wrapping container goes
   100% width with no padding. This catches every body class WP might
   assign (template, post type, page slug etc.) without us having to
   guess at the exact normalized class name.
   Affects every page on the site, which is what we want for the
   marketing-page redesign. If blog post readability suffers later we
   re-introduce a max-width on text elements via descendant selectors. */

body .site-content,
body .content-area,
body .site-main,
body .inside-article,
body .entry-content,
body article.post,
body article.page,
body article[id^="post-"] {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* GP's outer grid-container sets a max-width via inline styles on
   .container or via .grid-container utility classes. Override at every
   nesting level. */
body .grid-container,
body .grid-container.grid-parent,
body .grid-container.container,
body div.container,
body .site.grid-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* GP's article also has its own padding/border set in the customizer.
   Strip them on migrated marketing pages. */
body .inside-article {
	box-shadow: none !important;
	border: 0 !important;
}

/* Kill the bottom padding/margin GP applies to the page wrappers — the
   .pre-footer is the last block inside .service-body__content, and any
   wrapper bottom-padding shows as a white gap between the pre-footer
   and the dark site footer. */
body .site-main.service-template,
body .service-body,
body .service-body__content,
body .industry-body,
body .case-study-body,
body article.page,
body article[id^="post-"] {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Custom-template body wrappers were sized for ACF-only content (narrow
   text column ~768px). For migrated content carrying its own full-width
   layout (.location-hero, .ns-cta-band, etc.), those wrappers pinch the
   page into a center column. Override to full width — internal max-width
   constraints inside the migrated content (e.g., the legacy CSS's own
   .container divs) keep readable line lengths.

   FAQ + other default-template pages don't have these wrappers and
   were already rendering correctly — that's how this bug was found. */

.service-body,
.service-body__content,
.industry-body,
.case-study-section,
.case-study-body,
.case-study-section__content {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Force hero content centering. The legacy CSS sets
   .location-hero { text-align: center } and
   .location-hero .hero-sub { margin: 0 auto; max-width: 720px }, but
   GeneratePress's default rules can override the inherited text-align
   on direct <p> children, leaving paragraphs like .hero-sub
   left-aligned. Explicit !important rules here defend against that.

   IMPORTANT: original draft used `.entry-content .location-hero ...`
   selectors, which do NOT match. Our service template renders the
   body inside <section class="service-body"><div class="service-body__content">,
   not .entry-content — so those overrides never applied. Match the
   bare class chain instead. */

.location-hero,
.location-hero h1,
.location-hero h2,
.location-hero p,
.location-hero > div {
	text-align: center !important;
}

.location-hero .hero-sub,
.location-hero .hero-tagline {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 720px !important;
	text-align: center !important;
	display: block !important;
}

/* Same defense for the section bands below the hero. The legacy CSS sets
   .section-gray-inner { max-width:1200px; margin:0 auto; text-align:center },
   but GP-injected margin/padding may push them. */

.section-gray-inner,
.section-dark-inner,
.section-white {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── Full-width sections without horizontal scrollbar ──────────────────
   Earlier this used the classic breakout trick (width:100vw +
   margin-left:calc(50% - 50vw)). Problem: 100vw includes the
   vertical-scrollbar gutter while the body width does not, so the page
   gained a stray horizontal scrollbar at the bottom. Since the outer
   container chain (.site, .grid-container, .site-content,
   .service-body, etc.) is already forced to 100% width above, these
   sections naturally span edge-to-edge inside their parent — no vw
   math needed. Just guarantee full width without touching margins. */

.location-hero,
.location-body,
.ns-cta-band,
.footer-cta-band,
.ns-section--full,
.full-width-section {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Belt-and-suspenders: kill any leftover horizontal scrollbar caused
   by descendants overflowing their parent. The marketing pages are
   designed to span 100% width but contain inner max-width:1200px
   wrappers — nothing should cause horizontal overflow legitimately. */
html, body {
	overflow-x: hidden;
}

/* ── Add an inner-container to constrain the TEXT inside full-width strips
   so paragraphs don't span 1200+ px on wide monitors (unreadable). The
   legacy template CSS already does this in many places via inner divs;
   this is a safety net. */

.location-body > .container,
.location-hero > .container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ── Defend the .service-grid card layout against GP defaults ───────
   GP's .entry-content rules can inject extra margin/padding on
   <p>/<h3> children, which inside the cards looks like uneven
   spacing or content escaping the card box. Re-assert the legacy
   layout so cards lay out as a 2-column grid (1-col on mobile),
   centered inside .section-gray-inner, with consistent inner
   spacing. Also explicit padding on .section-gray-inner so the
   cards don't kiss the viewport edges on wide screens. */

.section-gray,
.section-dark,
.section-white {
	width: 100%;
	box-sizing: border-box;
}

.section-gray-inner,
.section-dark-inner {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	padding-top: 64px !important;
	padding-bottom: 64px !important;
	box-sizing: border-box;
}

/* When a gray section sits directly above a dark section (case-study and
   service-page FAQ → intent gate is the canonical case), the default
   64px padding-bottom on .section-gray-inner reads as a pale "bar"
   between the two colored bands. Trim it to a tighter 32px — enough
   breathing room so the last Q/A doesn't butt against the gate
   heading, but small enough that it doesn't read as a stray bar. */
.section-gray:has(+ .section-dark) > .section-gray-inner {
	padding-bottom: 32px !important;
}

/* ── Contact-us page: How-can-we-help tile pair + inline form panel ───
   The /contact-us right column is a 2-tile decision: the prospect tile
   reveals a FluentForms inquiry form below the contact-split (full
   width); the client tile is a direct link to /support so support-
   seekers route there rather than submitting the wrong form here.
   Larger and more descriptive than the homepage gate's .lt-tile pair
   on purpose — the contact page has the room, and extended copy
   clarifies which path applies before the user clicks. */
.contact-help-col {
	background: #ffffff;
	padding: 64px 48px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.contact-help-col > h2 {
	margin: 0 0 8px !important;
	text-align: left !important;
	color: #0f172a;
	font-size: 1.5rem;
}
/* The prospect tile is a <button>, and GeneratePress sets a global
   button rule (background:#55555e, color:#fff, -webkit-appearance:button)
   in main.min.css. That dark-gray native button face survived after the
   click — the user-reported "stays dark" was the browser's native button
   chrome reasserting itself on :focus/:active. Explicit appearance reset
   plus pinned colors on every interactive state stops it. */
.ct-tile {
	display: block;
	text-align: left;
	width: 100%;
	background: #f8fafc !important;
	color: inherit !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px;
	padding: 32px 32px 28px !important;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease;
}
.ct-tile:hover {
	background: #f8fafc !important;
	color: inherit !important;
	border-color: #0a77ba !important;
}
.ct-tile:focus,
.ct-tile:active {
	background: #f8fafc !important;
	color: inherit !important;
	border-color: #e2e8f0 !important;
	outline: none;
	box-shadow: none;
}
.ct-tile:focus-visible {
	outline: 2px solid #0a77ba;
	outline-offset: 2px;
}
/* Standard-sized icon — no colored pill, just the stroke glyph in brand
   blue at 28px. Sits above the eyebrow row. */
.ct-tile__icon {
	display: block;
	color: #0a77ba;
	margin-bottom: 14px;
	line-height: 0;
}
.ct-tile__icon svg {
	width: 28px;
	height: 28px;
}
.ct-tile__eyebrow {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #0a77ba;
	margin-bottom: 6px;
}
.ct-tile__title {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 10px;
	line-height: 1.3;
}
.ct-tile__desc {
	display: block;
	font-size: 0.95rem;
	color: #475569;
	line-height: 1.65;
	margin-bottom: 16px;
}
.ct-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0a77ba;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Form panel below the contact-split reuses the gate's .lt-form-panel
   shell — see the .lt-form-panel rules further down. No separate
   styles needed here. */

@media (max-width: 900px) {
	.contact-help-col { padding: 48px 24px; }
}

.service-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 32px 40px !important;
	margin: 32px auto 0 !important;
	max-width: 1000px !important;
	text-align: left !important;
	width: 100%;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.service-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

/* Card body has zero padding so the .learn-more link can run edge-to-edge
   as a full-width blue clickable strip at the bottom. Inner content gets
   its padding via per-element margins instead. overflow:hidden + flex
   column makes every card the same height (within a grid row) and clips
   the blue strip cleanly to the card's bottom border-radius. */
.service-grid .service-card {
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.service-grid .service-card .card-icon {
	margin: 28px 24px 16px 24px !important;
}
.service-grid .service-card h3 {
	margin: 0 24px 10px 24px !important;
	max-width: calc(100% - 48px) !important;
}
.service-grid .service-card p {
	margin: 0 24px 24px 24px !important;
	max-width: calc(100% - 48px) !important;
	flex: 1; /* pushes the .learn-more strip to the bottom */
}

/* "Learn more" reads as a full-width brand-blue clickable strip at
   the bottom of the card (text left, arrow right). The whole strip
   is the link, not just the text — entire blue area is clickable. */
.service-grid .service-card .learn-more {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	background: #0a77ba !important;
	color: #ffffff !important;
	padding: 14px 24px !important;
	margin: 0 !important;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	width: 100%;
	box-sizing: border-box;
	transition: background 0.15s ease;
	gap: 12px !important;
}
.service-grid .service-card .learn-more:hover {
	background: #065a8c !important;
	color: #ffffff !important;
	gap: 12px !important;
}
.service-grid .service-card .learn-more::after {
	content: "\2192" !important;
	color: #ffffff !important;
	font-size: 1.2em;
	margin-left: auto;
}

/* ── Section background texture ────────────────────────────────────
   The migrated marketing pages alternate white and textured-gray
   sections to break up what would otherwise read as one long white
   page. Texture is a subtle dot grid on top of the existing
   #f8fafc gray base so it stays professional, not busy. Applied
   site-wide via .section-gray so any page picking up that class
   gets the pattern automatically. */

.section-gray {
	background-color: #f4f7fa;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 14px,
		rgba(10, 119, 186, 0.06) 14px,
		rgba(10, 119, 186, 0.06) 15px
	);
	border-top: 1px solid #e5eaf0;
	border-bottom: 1px solid #e5eaf0;
}

/* ── Hero trust signal row ──────────────────────────────────────────
   Three short trust signals below the CTA button. White outline SVG
   icons (1.5px stroke, no fill) with a one-line label each. Sits at
   ~85% white opacity so it reads as supporting text, not competing
   with the H1 / CTA. Wraps to a stacked column on narrow screens. */

.location-hero .hero-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 16px 40px;
	margin: 32px auto 0;
	max-width: 760px;
	padding: 0;
	list-style: none;
}

.location-hero .hero-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

.location-hero .hero-trust__icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: #ffffff;
	stroke: currentColor;
}

@media (max-width: 600px) {
	.location-hero .hero-trust {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
}

/* ── Hero typography ────────────────────────────────────────────────
   The H1 names the page (e.g. "Managed IT Services") — biggest text
   on the page, anchors the visitor in what they're looking at. The
   .hero-tagline below it carries the benefit-led promise the H1
   used to carry. .hero-sub stays small for the credibility line. */

/* Eyebrow tag above the H1: uppercase label naming the page topic. No
   CSS rule existed for this class anywhere, so it fell back to the
   default dark paragraph color and rendered unreadable on the dark
   hero overlay. Sized large enough to feel like a section identifier,
   not a footnote. */
.location-hero .hero-eyebrow {
	display: block;
	margin: 0 0 18px !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1.2 !important;
}

.location-hero h1 {
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	margin: 0 0 16px 0 !important;
	letter-spacing: -0.01em;
}

.location-hero .hero-tagline {
	color: #ffffff;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
	font-weight: 500;
	line-height: 1.35;
	margin: 0 auto 16px;
	max-width: 820px;
	text-align: center;
}

.location-hero .hero-sub {
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem) !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 auto 32px !important;
	max-width: 720px !important;
}

/* ── Carolinas service-area SVG map ─────────────────────────────────
   Replaces the long comma-separated "serving 27 cities" text list
   with a visual: simplified NC + SC outlines, dots at each city we
   serve. Inline SVG in the migrated content so we can style state
   shapes / dots via CSS and use native <title> tooltips on hover. */

/* Service-area block: map (left) + city list (right) two-column.
   Stacks on mobile (≤ 768px). */
.service-area {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.service-area {
		grid-template-columns: 1fr;
	}
}

.service-area__map .carolinas-map {
	margin: 0;
	max-width: 100%;
}

.service-area__list h4 {
	margin: 0 0 8px 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #0a77ba;
}
.service-area__list .city-cols {
	column-count: 2;
	column-gap: 16px;
	margin: 0 0 24px 0;
	padding: 0;
	list-style: none;
}
.service-area__list .city-cols--single {
	column-count: 1;
}
.service-area__list .city-cols li {
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.7;
	break-inside: avoid;
}

.carolinas-map {
	width: 100%;
	height: auto;
	display: block;
	margin: 16px auto 0;
}
.carolinas-map .state {
	fill: #e2e8ef;
	stroke: #94a3b8;
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: fill 0.2s ease;
}
.carolinas-map .state--nc { fill: #dbe6ef; }
.carolinas-map .state--sc { fill: #e6edf4; }

.carolinas-map .state-label {
	fill: #64748b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
	text-anchor: middle;
	pointer-events: none;
}

.carolinas-map .city circle {
	fill: #0a77ba;
	stroke: #ffffff;
	stroke-width: 2;
	cursor: pointer;
	transition: stroke-width 0.15s ease, fill 0.15s ease;
}
.carolinas-map .city:hover circle {
	fill: #065a8c;
	stroke-width: 4;
}
.carolinas-map .city--anchor circle {
	fill: #0a77ba;
	stroke: #ffffff;
	stroke-width: 3;
}
.carolinas-map .city--anchor:hover circle {
	stroke-width: 5;
}

/* ── Testimonials section ───────────────────────────────────────────
   3-card grid showing curated Google Reviews. Aggregate badge (5.0
   ★★★★★ + total review count) sits above the grid; "See all reviews"
   link to the Google Business profile sits below. Cards stack to a
   single column on mobile. */

.testimonials-aggregate {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 8px auto 36px;
	font-size: 1rem;
	color: #475569;
}
.testimonials-aggregate__stars {
	color: #fbbc04;
	font-size: 1.4rem;
	letter-spacing: 2px;
	line-height: 1;
}
.testimonials-aggregate__rating {
	font-weight: 700;
	color: #191a1a;
	font-size: 1.15rem;
}
.testimonials-aggregate__count {
	color: #64748b;
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}
@media (max-width: 768px) {
	.testimonials-grid {
		grid-template-columns: 1fr;
	}
}

.testimonial {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.testimonial__stars {
	color: #fbbc04;
	font-size: 1.1rem;
	letter-spacing: 2px;
	line-height: 1;
	margin-bottom: 16px;
}

.testimonial__quote {
	font-size: 1rem;
	line-height: 1.65;
	color: #374151;
	margin: 0 0 24px 0;
	font-style: normal;
	flex: 1;
	max-width: 100% !important;
	text-align: left !important;
}
.testimonial__quote::before {
	content: open-quote;
}
.testimonial__quote::after {
	content: close-quote;
}

.testimonial__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-style: normal;
}
.testimonial__name {
	font-weight: 600;
	color: #191a1a;
	font-size: 0.95rem;
}
.testimonial__date {
	font-size: 0.8rem;
	color: #6b7280;
}

.testimonials-link {
	color: #0a77ba;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: color 0.15s ease;
}
.testimonials-link:hover {
	color: #065a8c;
	text-decoration: underline;
}

/* ── Pre-footer (other services band) ───────────────────────────────
   Sits below the service-area map/list block. Light grey background
   visually separates it from the page content above. Holds the full
   list of cross-link service pills so visitors can find the other
   services NetSafe offers from any service page. */

.pre-footer {
	background: #e6ecf2;
	border-top: 1px solid #d4dde6;
	padding: 56px 20px;
}
.pre-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.pre-footer__heading {
	margin: 0 0 28px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1.8px;
	color: #475569;
	text-transform: uppercase;
}
.pre-footer__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Pill links: subtle when at rest, brand-blue on hover. */
.related-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: #ffffff;
	border: 1px solid #e2e8ef;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	line-height: 1.2;
}
.related-pill:hover {
	background: #ffffff;
	border-color: #0a77ba;
	color: #0a77ba;
	box-shadow: 0 2px 8px rgba(10, 119, 186, 0.10);
}

/* ── Hide the empty Service-template ACF sections when ACF is empty ──
   The page-templates/service.php template renders hero, pillars,
   testimonial, related sections from ACF fields. While migrated drafts
   have empty ACF fields, those template sections have already collapsed
   to nothing via the !empty() guards in the PHP. This selector is just
   belt-and-suspenders against a template variant that might output an
   empty wrapper. */

.service-hero:empty,
.service-pillars:empty,
.service-testimonial:empty,
.service-related:empty {
	display: none;
}

/* ── "Let's Talk" intent gate (Option B decision card) ────────────────
   Two-tile router on landing-page CTA sections. Prospect tile expands a
   Fluent Forms panel inline; client tile redirects to /support so the
   HubSpot ticket form handles support intake. Replaces the white
   placeholder card on the right of the .split-row inside .section-dark. */

.lt-decision {
	background: #ffffff;
	border-radius: 12px;
	padding: 36px 32px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08);
}
.lt-decision__heading {
	position: relative;
	margin: 0 0 26px;
	padding-bottom: 14px;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	text-align: center;
	line-height: 1.25;
}
.lt-decision__heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 36px;
	height: 3px;
	background: #0a77ba;
	border-radius: 2px;
}
.lt-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) {
	.lt-tiles {
		grid-template-columns: 1fr;
	}
}
.lt-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	padding: 26px 20px 22px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	font: inherit;
	width: 100%;
}
.lt-tile:hover {
	border-color: #0a77ba;
	background: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(10, 119, 186, 0.12);
}
/* Suppress the lingering browser focus outline that appears after a mouse
   click without a keyboard interaction — keyboard users still get the
   focus-visible ring below. */
.lt-tile:focus {
	outline: none;
}
.lt-tile:focus-visible {
	outline: 2px solid #0a77ba;
	outline-offset: 2px;
}
.lt-tile[aria-expanded="true"] {
	border-color: #0a77ba;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(10, 119, 186, 0.10);
}
.lt-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 12px;
	color: #0a77ba;
}
.lt-tile__icon svg {
	width: 100%;
	height: 100%;
}
.lt-tile__title {
	display: block;
	margin: 0 0 4px;
	font-size: 0.98rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.lt-tile__desc {
	display: block;
	margin: 0 0 12px;
	font-size: 0.82rem;
	color: #64748b;
	line-height: 1.45;
}
.lt-tile__cta {
	display: inline-block;
	margin-top: auto;
	font-size: 0.84rem;
	font-weight: 700;
	color: #0a77ba;
}
/* ── Sales form panel (full-width, opens below the split-row) ─────────
   The panel sits inside the dark blue section, below the .split-row
   (Let's talk + decision card). When the prospect tile is clicked it
   gets the .is-open class and animates open. Two-column field grid
   keeps the form short and horizontal instead of cramming into a
   narrow card. */

.lt-form-panel {
	max-width: 1200px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-12px);
	transition:
		max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.3s ease 0.05s,
		transform 0.35s ease,
		margin-top 0.4s ease,
		padding 0.4s ease;
	padding: 0 36px;
}
.lt-form-panel.is-open {
	max-height: 1600px;
	opacity: 1;
	transform: translateY(0);
	margin-top: 28px;
	padding: 36px;
}
.lt-form-panel .fluentform {
	margin: 0;
}
/* Form-level helper: tells the user how required is marked, so we don't
   need a per-field "(Optional)" hint on the others. */
.lt-form-helper {
	margin: 0 0 18px;
	font-size: 0.85rem;
	color: #64748b;
	line-height: 1.4;
}
.lt-required-mark {
	color: #c1272d;
	font-weight: 700;
}
/* Placeholder-as-label pattern: hide the label heading above each field
   entirely, let the in-field placeholder serve as the field name.
   Required fields are signaled by red placeholder text; optional by the
   default muted gray. Uniform — every field's identifier is in the same
   place (inside the input). The helper line at the top of the panel
   explains the convention. */
.lt-form-panel .fluentform .ff-el-input--label {
	display: none !important;
}
.lt-form-panel .fluentform input[aria-required="true"]::placeholder,
.lt-form-panel .fluentform textarea[aria-required="true"]::placeholder {
	color: #c1272d !important;
	opacity: 1;
}
/* Selects don't have a placeholder pseudo, so we drive the red-while-empty
   state via :invalid. The inline script in the section copies aria-required
   to the HTML required attribute, which is what makes :invalid actually
   fire. Once a non-empty option is picked, :valid takes over and reverts. */
.lt-form-panel .fluentform select[aria-required="true"] {
	color: #1f2937;
}
.lt-form-panel .fluentform select[aria-required="true"]:invalid {
	color: #c1272d !important;
}
.lt-form-panel .fluentform select[aria-required="true"] option:not([value=""]) {
	color: #1f2937;
}
/* Two-column grid on the rendered fields. Hidden inputs and screen-reader
   legend collapse to nothing; the textarea and submit row span full width. */
.lt-form-panel form fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 22px;
	border: none;
	padding: 0;
	margin: 0;
	min-inline-size: 100%;
}
.lt-form-panel form fieldset > input[type="hidden"],
.lt-form-panel form fieldset > legend {
	display: none;
}
.lt-form-panel form .ff-el-group {
	margin: 0;
}
.lt-form-panel form fieldset > .ff-el-group:has(textarea),
.lt-form-panel form fieldset > .ff_submit_btn_wrapper,
.lt-form-panel form fieldset > .ff-el-group--submit {
	grid-column: 1 / -1;
}
.lt-form-panel form .ff-btn-submit {
	background: #0a77ba !important;
	border-color: #0a77ba !important;
	color: #ffffff !important;
	font-weight: 700;
	border-radius: 50px;
	padding: 12px 32px;
	font-size: 16px;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 18px rgba(10, 119, 186, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lt-form-panel form .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(10, 119, 186, 0.35);
}
@media (max-width: 700px) {
	.lt-form-panel form fieldset {
		grid-template-columns: 1fr;
	}
	.lt-form-panel.is-open {
		padding: 24px;
	}
}

/* ── Hero primary CTA — solid filled with sliding arrow ───────────────
   Override the legacy ghost/outline treatment in
   legacy-templates-shared.css and legacy-templates-inline.css. Higher
   specificity (a.cta-btn vs .cta-btn) lets this win without !important. */

.location-hero a.cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	color: #0a77ba;
	border: 2px solid #ffffff;
	border-radius: 50px;
	padding: 16px 36px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.location-hero a.cta-btn::after {
	content: "\2192";
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.2s ease;
}
.location-hero a.cta-btn:hover,
.location-hero a.cta-btn:focus-visible {
	background: #ffffff;
	color: #0a77ba;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
	outline: none;
}
.location-hero a.cta-btn:hover::after,
.location-hero a.cta-btn:focus-visible::after {
	transform: translateX(5px);
}

/* ── Hide GeneratePress's auto-rendered page title (.entry-title) ──────
   GeneratePress renders <header class="entry-header"><h1 class="entry-title">
   Page Title</h1></header> above page content on every page. Marketing
   landing pages have their own hero with H1, so the entry-title creates
   a duplicate H1 above the hero (bad for SEO and visually redundant).
   Scoped to .page so blog posts (.single-post) keep their normal title. */

body.page .entry-header,
body.page-template-default .entry-header {
	display: none !important;
}

/* Collapse the vertical padding/margin GeneratePress applies to the
   article + content wrappers on pages. With .entry-header hidden, the
   wrapper's top padding leaves a grey strip between the site header and
   the hero (the body background showing through). Zero it out so the
   hero sits flush against the nav. Pages only — blog posts (.single-post)
   keep their natural top spacing for readability. */
body.page .content-area,
body.page .site-main,
body.page article.page,
body.page .inside-article,
body.page .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.page .entry-content > *:first-child {
	margin-top: 0 !important;
}

/* ── Homepage service cards: full-width blue button at bottom ──────────
   Restructures the .home-service-card so the link bottom-anchors as a
   full-width brand-blue strip with white text. Card body holds title +
   description; bottom strip is the call-to-action. */
.home-service-card {
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
}
.home-service-card h3 {
	padding: 24px 24px 0 !important;
	margin: 0 0 10px !important;
}
.home-service-card p {
	padding: 0 24px !important;
	margin: 0 0 20px !important;
	flex-grow: 1;
}
.home-service-card a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	background: #0a77ba !important;
	color: #ffffff !important;
	padding: 14px 20px !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	margin-top: auto;
	gap: 0 !important;
	transition: background 0.18s ease;
}
.home-service-card a:hover {
	background: #095e96 !important;
	color: #ffffff !important;
	gap: 0 !important;
}
.home-service-card a::after {
	content: "\2192";
	margin-left: 12px;
	transition: transform 0.18s ease;
}
.home-service-card a:hover::after {
	transform: translateX(4px);
}

/* ── Homepage pricing section: banner + iconized cards ────────────────
   Banner: "No onboarding fees, ever." callout above the cards. Green
   accent reinforces the positive differentiator on the brand-blue band.
   Cards: each has a distinct icon (monitor / cloud / shield) so they
   read as different things at a glance, without leaning on price. */
.pricing-banner {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 760px;
	margin: 0 auto 40px;
	padding: 18px 28px;
	background: rgba(34, 197, 94, 0.10);
	border: 1px solid rgba(34, 197, 94, 0.32);
	border-radius: 12px;
}
.pricing-banner__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: #16a34a;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
.pricing-banner__icon svg {
	width: 22px;
	height: 22px;
}
.pricing-banner__text {
	display: flex;
	flex-direction: column;
}
.pricing-banner__head {
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.2px;
	line-height: 1.3;
}
.pricing-banner__sub {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.45;
	margin-top: 2px;
}
@media (max-width: 600px) {
	.pricing-banner {
		flex-direction: column;
		text-align: center;
		padding: 22px 20px;
	}
}

/* Pricing card icon: positioned in the header gradient, top-left so the
   title + price-label still sit in their familiar spot. */
.pricing-card-box__header {
	position: relative;
	padding-top: 24px !important;
}
.pricing-card-box__icon {
	width: 32px;
	height: 32px;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 12px;
	display: block;
}

/* Homepage pricing grid: 2-col on desktop, 1-col on mobile. The grid
   itself is set inline (so the boxes use the same dark-navy + white-on-
   navy treatment as the costSection() helper on service pages); only
   the responsive collapse needs a media query, which inline styles
   can't express. */
@media (max-width: 768px) {
	.home-pricing-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Pricing-guide price-row: 200px axis column + 1fr description on
   desktop, stacks to a single column on mobile so the axis label and
   description don't get squeezed. */
@media (max-width: 768px) {
	.price-row {
		grid-template-columns: 1fr !important;
		gap: 4px !important;
	}
}

/* Case studies grid (rendered by the [ns_case_studies] shortcode):
   single-column feature-card stack. Tighten inner padding and stack
   the metrics row on phones so values stay readable. */
@media (max-width: 768px) {
	.case-studies-grid {
		grid-template-columns: 1fr !important;
	}
	.case-studies-grid article > a > div:last-child {
		padding: 28px 22px !important;
	}
	.case-studies-grid article h3 {
		font-size: 1.4rem !important;
	}
	.case-studies-grid article > a > div:last-child > div[style*="grid-template-columns:repeat"] {
		grid-template-columns: 1fr !important;
	}
	.case-studies-grid article > a > div:last-child > div[style*="grid-template-columns:repeat"] > div {
		border-right: none !important;
		border-bottom: 1px solid #e2e8f0 !important;
		padding: 18px 0 !important;
	}
	.case-studies-grid article > a > div:last-child > div[style*="grid-template-columns:repeat"] > div:last-child {
		border-bottom: none !important;
	}
}

/* ── Case study Engagement Snapshot card ──────────────────────────────
   Legacy CSS used auto-fit minmax(220px, 1fr) which crammed 4–5 narrow
   columns at full width and made the dt/dd pairs feel bunched. Override
   to a clean 2-column grid (1-column on phones), generous row spacing,
   bigger value text, and a subtle divider between rows so the eye can
   track each label/value pair on its own. Keeps the existing rounded-
   card chrome (.cs-snapshot-card) untouched. */
.cs-snapshot-card {
	padding: 44px 48px !important;
	margin-top: -56px !important;
}
.cs-snapshot-card h2 {
	font-size: 0.78rem !important;
	letter-spacing: 0.18em !important;
	color: #0a77ba !important;
	margin: 0 0 26px !important;
	font-weight: 700 !important;
}
.cs-snapshot-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
}
.cs-snapshot-grid > div {
	padding: 18px 28px 18px 0;
	border-bottom: 1px solid #eef1f5;
}
/* Right column: shift padding so the divider runs flush across both
   columns and the value text doesn't kiss the right edge. */
.cs-snapshot-grid > div:nth-child(2n) {
	padding-right: 0;
	padding-left: 28px;
}
/* Drop the bottom border on the last full row (last two items on a
   2-col layout) so the card doesn't end with a stray line. */
.cs-snapshot-grid > div:nth-last-child(-n+2) {
	border-bottom: 0;
	padding-bottom: 4px;
}
.cs-snapshot-grid dt {
	font-size: 0.72rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: #64748b !important;
	font-weight: 700 !important;
	margin-bottom: 8px !important;
}
.cs-snapshot-grid dd {
	margin: 0 !important;
	color: #0f172a !important;
	font-weight: 500 !important;
	font-size: 1.05rem !important;
	line-height: 1.55 !important;
}

@media (max-width: 768px) {
	.cs-snapshot-card {
		padding: 28px 24px !important;
		margin-top: -32px !important;
	}
	.cs-snapshot-grid {
		grid-template-columns: 1fr !important;
	}
	.cs-snapshot-grid > div,
	.cs-snapshot-grid > div:nth-child(2n) {
		padding: 16px 0 !important;
		border-bottom: 1px solid #eef1f5 !important;
	}
	.cs-snapshot-grid > div:last-child {
		border-bottom: 0 !important;
		padding-bottom: 4px !important;
	}
}

/* ── Cybersecurity-services page specifics ────────────────────────────
   Sections introduced for the cybersecurity-services landing page that
   don't appear on the managed-IT page. Keeps the two pages visually
   distinct. */

/* Lead paragraph — the punchy line that opens the gap-statement section. */
.lead {
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 0 16px;
}

/* Stats bar — dark variant for use on the brand-blue band. White cards
   with brand-blue numbers; reads cleanly against the blue background
   (translucent-on-blue washed out). */
.stats-bar--dark .stat-item {
	background: #ffffff;
	border: none;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.stats-bar--dark .stat-number {
	color: #0a77ba;
}
.stats-bar--dark .stat-label {
	color: #475569;
}

/* Defense stack — six numbered "layer" cards. Different visual idiom
   than the .service-grid used on managed-IT. The big number is the
   point of difference: it reinforces the "layered" framing. */
.defense-stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.defense-stack {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.defense-stack {
		grid-template-columns: 1fr;
	}
}
.defense-layer {
	position: relative;
	padding: 28px 24px 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.defense-layer:hover {
	border-color: #0a77ba;
	box-shadow: 0 10px 28px rgba(10, 119, 186, 0.12);
	transform: translateY(-2px);
}
.defense-layer__icon {
	display: block;
	width: 36px;
	height: 36px;
	color: #0a77ba;
	margin-bottom: 16px;
}
.defense-layer h3 {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.defense-layer p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #475569;
}

/* Threat comparison — "what most have" vs "what we add" two-column.
   Subtle red-tinted left column (warning), brand-blue right column
   (relief). Feels like a balance scale visually. */
.threat-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 768px) {
	.threat-comparison {
		grid-template-columns: 1fr;
	}
}
.threat-comparison__col {
	padding: 32px 28px;
	border-radius: 12px;
	background: #ffffff;
}
.threat-comparison__col h3 {
	margin: 0 0 18px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.3;
}
.threat-comparison__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.threat-comparison__col li {
	padding: 10px 0 10px 30px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #334155;
	position: relative;
	border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.threat-comparison__col li:first-child {
	border-top: none;
}
/* Uniform glyph bullets — same size, same position, only color + glyph
   differ. Unicode ✗ for "before" (problem), ✓ for "after" (solution).
   Both use the same font-size and absolute positioning so they line up
   identically across the two columns. */
.threat-comparison__col li::before {
	position: absolute;
	left: 4px;
	top: 8px;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.threat-comparison__col--before {
	border-top: 4px solid #c1272d;
}
.threat-comparison__col--before h3 {
	color: #c1272d;
}
.threat-comparison__col--before li::before {
	content: "\2715";
	color: #c1272d;
}
.threat-comparison__col--after {
	border-top: 4px solid #0a77ba;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(10, 119, 186, 0.12);
}
.threat-comparison__col--after h3 {
	color: #0a77ba;
}
.threat-comparison__col--after li::before {
	content: "\2713";
	color: #0a77ba;
}

/* Why-grid — 4 differentiator cards in a 2x2. Different from managed-IT's
   .diff-grid (which uses a left-icon + right-text layout). Here the card
   is straightforward: heading + description, anchored by a thin top
   accent rule. */
.why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.why-grid {
		grid-template-columns: 1fr;
	}
}
.why-card {
	padding: 28px 28px 26px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 3px solid #0a77ba;
	border-radius: 8px;
}
.why-card h3 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.why-card p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #475569;
}



/* ── Blog listing (home.php) and single (single.php) ──────────────
   Ported from the HubSpot blog template tokens — same class names so
   the design carries over visually. .blog-list-* powers /blog/, the
   .blog-hero / .blog-featured-image / .blog-body-wrap / .blog-author-bio
   block powers each individual /blog/<slug>/ post. Both templates use
   native WP fields (post title, the_content, post_thumbnail, etc.) so
   all 51 posts render identically and the hero/style is centralized
   here, not in 51 record bodies. */

/* Listing — hero band */
.blog-list-hero {
	background: #1a2332;
	color: #ffffff;
	padding: 80px 20px 64px;
	text-align: center;
}
.blog-list-hero__inner { max-width: 820px; margin: 0 auto; }
.blog-list-hero__eyebrow {
	color: #60a5fa;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 16px;
}
.blog-list-hero h1 {
	color: #ffffff;
	font-size: 2.6rem;
	line-height: 1.2;
	margin: 0 0 16px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.blog-list-hero p {
	color: #cbd5e1;
	font-size: 18px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 auto;
}

/* Listing — outer wrap + 3-up grid */
.blog-list-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 20px; }
.blog-list-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.blog-list-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	border: 1px solid #eef0f3;
}
.blog-list-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(10,119,186,0.12);
}
.blog-list-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #e8f4fb;
	display: block;
}
.blog-list-card__body {
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.blog-list-card__topic {
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #0a77ba;
	font-weight: 600;
	margin-bottom: 10px;
}
.blog-list-card__title {
	font-size: 19px;
	margin: 0 0 12px;
	color: #191a1a;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.2px;
}
.blog-list-card__excerpt {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 16px;
	flex: 1;
}
.blog-list-card__meta {
	color: #64748b;
	font-size: 13px;
	padding-top: 16px;
	border-top: 1px solid #f1f5f9;
}
.blog-list-card__meta strong { color: #1f2937; font-weight: 600; }

/* Listing — pagination */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.blog-pagination--top { margin-bottom: 40px; }
.blog-pagination--bottom { margin-top: 56px; }
.blog-pagination a,
.blog-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 6px;
	text-decoration: none;
	color: #1f2937;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid #e5e7eb;
}
.blog-pagination a:hover {
	background: #0a77ba;
	color: #ffffff;
	border-color: #0a77ba;
}
.blog-pagination .current {
	background: #0a77ba;
	color: #ffffff;
	border-color: #0a77ba;
}

/* Single post — hero band */
.blog-hero {
	background: #1a2332;
	color: #ffffff;
	padding: 72px 20px 56px;
	text-align: center;
}
.blog-hero__inner { max-width: 820px; margin: 0 auto; }
.blog-hero__meta {
	color: #94a3b8;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.blog-hero__meta a { color: #60a5fa; text-decoration: none; }
.blog-hero__meta a:hover { text-decoration: underline; }
.blog-hero h1 {
	color: #ffffff;
	font-size: 2.4rem;
	line-height: 1.2;
	margin: 0 0 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.blog-hero__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
	color: #cbd5e1;
	font-size: 15px;
}
.blog-hero__author strong { color: #ffffff; font-weight: 600; }

/* Single post — featured image overlapping the hero seam */
.blog-featured-image {
	max-width: 940px;
	margin: -40px auto 48px;
	padding: 0 20px;
}
.blog-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 940 / 495;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

/* Single post — body column */
.blog-body-wrap {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px 80px;
	color: #1f2937;
	font-size: 18px;
	line-height: 1.75;
}
.blog-body-wrap h2 {
	font-size: 1.8rem;
	color: #191a1a;
	margin: 48px 0 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
}
.blog-body-wrap h3 {
	font-size: 1.4rem;
	color: #191a1a;
	margin: 36px 0 12px;
	font-weight: 600;
}
.blog-body-wrap h4 {
	font-size: 1.15rem;
	color: #191a1a;
	margin: 28px 0 10px;
	font-weight: 600;
}
.blog-body-wrap p { margin: 0 0 20px; }
.blog-body-wrap a { color: #0a77ba; text-decoration: underline; }
.blog-body-wrap a:hover { color: #085d94; }
.blog-body-wrap ul, .blog-body-wrap ol { padding-left: 24px; margin: 0 0 24px; }
.blog-body-wrap li { margin-bottom: 10px; }
.blog-body-wrap img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 24px 0;
}
.blog-body-wrap blockquote {
	border-left: 4px solid #0a77ba;
	padding: 8px 0 8px 24px;
	margin: 28px 0;
	color: #4b5563;
	font-style: italic;
}
.blog-body-wrap pre {
	background: #f3f4f6;
	padding: 20px;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 14px;
}
.blog-body-wrap code {
	background: #f3f4f6;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}
.blog-body-wrap table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}
.blog-body-wrap th,
.blog-body-wrap td {
	border: 1px solid #e5e7eb;
	padding: 12px;
	text-align: left;
}
.blog-body-wrap th { background: #f3f4f6; font-weight: 600; }

/* Single post — author bio block */
.blog-author-bio {
	max-width: 820px;
	margin: 48px auto 0;
	padding: 28px;
	background: #f8fafc;
	border-radius: 12px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.blog-author-bio__avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #0a77ba;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 22px;
}
.blog-author-bio__text { flex: 1; }
.blog-author-bio__name {
	color: #191a1a;
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 4px;
}
.blog-author-bio__role {
	color: #64748b;
	font-size: 14px;
	margin: 0 0 8px;
}
.blog-author-bio__blurb {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* Mobile breakpoints */
@media (max-width: 900px) {
	.blog-list-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
	.blog-list-hero { padding: 56px 20px 40px; }
	.blog-list-hero h1 { font-size: 2rem; }
	.blog-list-grid { grid-template-columns: 1fr; }
	.blog-hero { padding: 56px 20px 40px; }
	.blog-hero h1 { font-size: 1.8rem; }
	.blog-featured-image { margin: -24px auto 32px; }
	.blog-body-wrap { font-size: 17px; }
	.blog-body-wrap h2 { font-size: 1.5rem; }
	.blog-body-wrap h3 { font-size: 1.25rem; }
	.blog-author-bio { flex-direction: column; }
}