/**
 * Sketch Suite — Blog Post (redesigned single post / resource).
 * Light editorial article + sticky Table of Contents, with a dark
 * "Related insights" band that reuses the Posts Grid cards.
 *
 * Palette follows the Sketch house style used across the suite:
 *   indigo  #6552ff   navy  #2b2563 / #14143a   ink  #1a1a1a
 * Headings inherit Saans from the suite-wide font rule (modules/typography).
 */

.skbp {
	--skbp-bg: #ffffff;
	--skbp-ink: #14143a;
	--skbp-muted: #6b7280;
	--skbp-line: #e7e7ea;
	--skbp-accent: #6552ff;
	--skbp-radius: 24px;
	--skbp-pad-x: clamp(20px, 5vw, 72px);
	--skbp-maxw: 1180px;
	/* Width of the sticky rail. The article column takes whatever's left. */
	--skbp-aside-w: 320px;
	--skbp-gap: clamp(32px, 4.5vw, 68px);
	/* The pale wash from the shared light hero ([sketch_services_hero_list],
	   modules/services-hero-list) — itself the project template's gradient
	   turned through 180°. Painted from the same two colours at the same angle
	   so /services, /our-work, /blog and an article all open the same way. */
	--skbp-wash: linear-gradient(340deg, #ffffff 0%, #dce9f7 100%);
	/* How far down the page the wash reaches before it's masked away. */
	--skbp-wash-h: 620px;
	/* Clears the floating global header so the meta line never hides behind it. */
	--skbp-header-clear: 96px;

	position: relative;
	isolation: isolate;
	background: var(--skbp-bg);
	color: var(--skbp-ink);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 18px;
	line-height: 1.6;
}

.skbp * { box-sizing: border-box; }

/* The wash itself. Faded out well before the article body so the text sits on
   flat white — same masked-gradient trick as .skshl::before. */
.skbp::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--skbp-wash-h);
	z-index: -1;
	background-image: var(--skbp-wash);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
	pointer-events: none;
}

/* ============================================================ *
 *  HERO — left-aligned meta line, title, byline
 * ============================================================ */

.skbp-hero {
	padding: calc(var(--skbp-header-clear) + clamp(28px, 4vw, 56px)) var(--skbp-pad-x) clamp(26px, 3.5vw, 44px);
}

.skbp-hero__inner {
	max-width: var(--skbp-maxw);
	margin: 0 auto;
	text-align: left;
}

/* "Last updated on: … | Reading time: …" — labels muted, values in ink, so the
   line scans as data rather than a sentence. */
.skbp-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 clamp(18px, 2.4vw, 28px);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--skbp-ink);
}

.skbp-hero__metalabel {
	font-weight: 500;
	color: var(--skbp-muted);
}

.skbp-hero__metabar {
	width: 1px;
	height: 16px;
	background: rgba(20, 20, 58, 0.18);
}

/* The shared heading scale — eyebrow #98a2b3 / .14em, heading w600 #101326 at
   -0.035em, subtext #4b5a6b — as set by the About and Services heroes. Every
   heading in this module follows it so an article opens like the rest of the
   site. The gradient sweep is the shared primitive (modules/sweep). */
.skbp-hero__title {
	--sk-sweep-fg: #101326;
	margin: 0;
	max-width: 16ch;
	color: #101326;
	font-size: clamp(2.4rem, 5.6vw, 4.5rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.skbp-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: clamp(26px, 3.5vw, 44px) 0 0;
}

.skbp-byline__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}

.skbp-byline__avatar--placeholder {
	background: var(--skbp-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}

.skbp-byline__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.skbp-byline__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--skbp-ink);
	line-height: 1.3;
}

.skbp-byline__role {
	font-size: 15px;
	font-weight: 500;
	color: var(--skbp-muted);
	line-height: 1.3;
}

/* ---- The separator closing the hero ------------------------ */

/* The gutter goes on the wrapper and the measure on the rule itself — putting
   both on one element would subtract the gutter from the max-width and leave
   the rule visibly short of the title above it and the columns below. */
.skbp-rule__wrap { padding: 0 var(--skbp-pad-x); }

.skbp-rule {
	width: 100%;
	max-width: var(--skbp-maxw);
	margin: 0 auto;
	border: 0;
	border-top: 1px solid var(--skbp-line);
}

/* ============================================================ *
 *  BODY — sticky sidebar + article sections
 * ============================================================ */

.skbp-body {
	padding: clamp(30px, 4vw, 54px) var(--skbp-pad-x) clamp(56px, 8vw, 110px);
}

/* align-items is deliberately left at `stretch`. With `start` the sidebar track
   is only as tall as the rail itself, and a sticky child can never travel
   further than its own parent — so the rail would unstick the moment its own
   box scrolled past, a few hundred pixels in. Stretched, the track is as tall
   as the article beside it and the rail stays pinned the whole way down. */
.skbp-body__inner {
	max-width: var(--skbp-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--skbp-aside-w) minmax(0, 1fr);
	gap: var(--skbp-gap);
}

.skbp--no-aside .skbp-body__inner { grid-template-columns: minmax(0, 1fr); }

/* ---- Sticky rail (left) ------------------------------------ */

/* Everything in the rail pins as one block, so share / promo / contents keep
   their spacing while the article scrolls past. The track is stretched (see
   above); the rail is only as tall as its own content, which is what leaves the
   room for it to travel. */
.skbp-aside { min-width: 0; }

.skbp-aside__sticky {
	position: sticky;
	top: clamp(96px, 12vh, 132px);
	max-height: calc(100vh - clamp(112px, 14vh, 152px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* No visible scrollbar track until it's actually needed. */
.skbp-aside__sticky::-webkit-scrollbar { width: 6px; }
.skbp-aside__sticky::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background: rgba(20, 20, 58, 0.14);
}

.skbp-aside__label {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #98a2b3;
}

/* ---- Share row --------------------------------------------- */
.skbp-share { margin-bottom: 26px; }

.skbp-share__row {
	display: flex;
	gap: 10px;
}

.skbp-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--skbp-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--skbp-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skbp-share__btn svg { width: 17px; height: 17px; }

.skbp-share__btn:hover,
.skbp-share__btn:focus-visible {
	border-color: #d8d4ff;
	color: var(--skbp-accent);
	transform: translateY(-2px);
}

/* ---- The tinted rail panel (promo + contents) --------------- */
.skbp-aside__panel {
	padding: 12px;
	border-radius: 20px;
	background: #f5f5f5;
}

/* ---- Call card ---------------------------------------------- *
 *
 *  The same card as the /faqs rail's (modules/service-pages,
 *  .sksp-faqs-index__promo): portrait, heading, copy, dark button, then the
 *  header's availability line. Metrics are matched to it deliberately — the two
 *  rails sit one click apart and read as the same widget.
 * -------------------------------------------------------------- */
.skbp-promo { margin-top: 12px; }

.skbp-promo__card {
	padding: 22px 20px 20px;
	border: 1px solid #ececef;
	border-radius: 14px;
	background: #ffffff;
	text-align: center;
}

/* Cropped from the top: these are portraits, so centring the box on the image
   tends to cut the chin rather than the hair. */
.skbp-promo__avatar {
	display: block;
	width: 72px !important;
	height: 72px !important;
	margin: 0 auto 14px !important;
	border: 0 !important;
	border-radius: 50% !important;
	object-fit: cover;
	object-position: center top;
}

/* A wrapped grid of client wordmarks, not the reference's overlapping coins:
   these logos are wide lockups (roughly 250×43), so a circular crop turns each
   one into an unreadable smudge. Fixed boxes with `contain` keep every mark
   whole and on a common baseline; two per row is what a 320px rail fits at a
   legible size. */
.skbp-promo__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px 18px;
	margin: 4px 0 14px;
	padding: 0;
	list-style: none;
}

.skbp-promo__logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 24px;
}

.skbp-promo__logo,
.skbp-promo__logos img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: contain;
	/* Muted so the row reads as quiet proof rather than competing with the
	   heading and the button below it. */
	filter: grayscale(1);
	opacity: 0.55;
}

.skbp-promo__caption {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #98a2b3;
}

.skbp-promo__figure {
	width: 118px !important;
	margin: 0 auto 18px !important;
	padding: 0;
}

.skbp-promo__img,
.skbp-promo__figure img {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.skbp-promo__heading {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: #101326;
}

.skbp-promo__text {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #5b6472;
}

.skbp-promo__cta {
	display: block;
	padding: 13px 20px;
	border-radius: 10px;
	background: #101326;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skbp-promo__cta:hover,
.skbp-promo__cta:focus-visible {
	background: var(--skbp-accent);
	color: #ffffff;
	transform: translateY(-1px);
}

/* ---- Availability line -------------------------------------- *
 *
 *  Matching the header's own (modules/global-header) and the /faqs card's:
 *  phone glyph, then the status over the number, with the pulsing green dot.
 *  Restated rather than borrowed because the header hides its copy below 981px
 *  and tints it against the header's own background — neither applies in here.
 * -------------------------------------------------------------- */
.skbp-promo__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	padding: 8px 12px;
	border-radius: 10px;
	color: #101326;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease;
}

.skbp-promo__phone:hover,
.skbp-promo__phone:focus-visible { background: #f5f5f5; color: #101326; }

.skbp-promo__phone-icon { display: inline-flex; flex-shrink: 0; }

.skbp-promo__phone-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.skbp-promo__phone-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: #98a2b3;
}

/* Same live dot as the header, the floating CTA and the /faqs card. */
.skbp-promo__phone-status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: skbp-phone-pulse 1.8s ease-in-out infinite;
}

@keyframes skbp-phone-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	50%      { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
}

.skbp-promo__phone-number {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* ---- Table of Contents ------------------------------------- *
 *
 *  Leads the panel, with the call card underneath — the order the services
 *  list and the call card sit in on /faqs. The padding is the top of the panel
 *  now, so it's the /faqs nav's rather than the old gap under the card.
 * -------------------------------------------------------------- */
.skbp-toc {
	padding: 12px 10px 6px;
}

.skbp-toc .skbp-aside__label { margin-bottom: 10px; padding-left: 10px; }

.skbp-toc__nav {
	display: flex;
	flex-direction: column;
}

.skbp-toc__link {
	position: relative;
	display: block;
	padding: 10px 8px 10px 12px;
	border-radius: 8px;
	color: #6b7280;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
}

.skbp-toc__link:hover { color: var(--skbp-ink); background: rgba(255, 255, 255, 0.7); }

.skbp-toc__link.is-active {
	color: #101326;
	font-weight: 600;
	background: #ffffff;
}

/* ---- Article content (right) ------------------------------- */
.skbp-content {
	max-width: 760px;
	min-width: 0; /* allow the grid item to shrink below its image's intrinsic width */
}

/* ---- "Summarize with AI" bar ------------------------------- */
.skbp-ai {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 clamp(30px, 4vw, 48px);
	padding: 14px 16px 14px 22px;
	border: 1px solid var(--skbp-line);
	border-radius: 14px;
	background: #ffffff;
}

.skbp-ai__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #98a2b3;
}

.skbp-ai__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.skbp-ai__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: #4b5563;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skbp-ai__btn svg { width: 22px; height: 22px; }

.skbp-ai__btn:hover,
.skbp-ai__btn:focus-visible {
	background: #f3f3f6;
	color: #101326;
	transform: translateY(-1px);
}

/* ---- Opening paragraph (was the hero intro) ----------------
   The subheader slot of the shared type system: #4b5a6b, a step up in size
   from body copy, so it reads as the article's standfirst. */
.skbp-intro {
	margin: 0 0 clamp(34px, 4.5vw, 56px);
	color: #4b5a6b;
	font-size: clamp(1.12rem, 1.35vw, 1.3rem);
	font-weight: 500;
	line-height: 1.55;
}

.skbp-intro p { margin: 0 0 1.1em; color: inherit; }
.skbp-intro p:last-child { margin-bottom: 0; }

.skbp-section {
	scroll-margin-top: clamp(90px, 12vh, 130px);
	min-width: 0;
	max-width: 100%;
}

.skbp-section + .skbp-section { margin-top: clamp(40px, 5vw, 68px); }

/* Same heading system as the hero, one step down the scale. */
.skbp-section__title {
	margin: 0 0 0.55em;
	color: #101326;
	font-size: clamp(1.7rem, 2.9vw, 2.5rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.skbp-section__body {
	color: #33333f;
	font-size: clamp(1.02rem, 1.2vw, 1.18rem);
	line-height: 1.72;
}

.skbp-section__body :first-child { margin-top: 0; }
.skbp-section__body :last-child { margin-bottom: 0; }
.skbp-section__body p { margin: 0 0 1.2em; color: inherit; }
.skbp-section__body h3,
.skbp-section__body h4 {
	margin: 1.6em 0 0.5em;
	color: var(--skbp-ink);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.skbp-section__body h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.skbp-section__body h4 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.skbp-section__body ul,
.skbp-section__body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.skbp-section__body li { margin: 0 0 0.5em; }
.skbp-section__body a {
	color: var(--skbp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.skbp-section__body strong { color: var(--skbp-ink); font-weight: 700; }
.skbp-section__body blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--skbp-accent);
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--skbp-ink);
}

/* Rounded section image — same radius / treatment across the suite.
   width / margin forced so Betheme's default <figure> sizing (which adds side
   margins and can make figures wider than their column) can't win. */
.skbp-section__figure {
	width: 100% !important;
	max-width: 100% !important;
	margin: clamp(24px, 3vw, 40px) 0 0 !important;
	box-sizing: border-box;
	border-radius: var(--skbp-radius);
	overflow: hidden;
	background: #ecebe6;
}

.skbp-section__img,
.skbp-section__figure img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

/* Optional per-section button — matches the header "Get In Touch" CTA. */
.skbp-section__cta {
	margin-top: clamp(22px, 3vw, 32px);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: var(--skgh-radius-cta, 13px);
	background: var(--skgh-cta, var(--skbp-accent));
	color: var(--skgh-cta-text, #fff);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.skbp-section__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(101, 82, 255, 0.28);
}
.skbp-section__cta svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.skbp-section__cta:hover svg { transform: translate(2px, -2px); }

/* ============================================================ *
 *  RELATED INSIGHTS — white band, reusing the Posts Grid cards
 * ============================================================ */

.skbp-related {
	background: #ffffff;
	padding: clamp(56px, 8vw, 120px) var(--skbp-pad-x);
}

.skbp-related__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.skbp-related__eyebrow {
	margin: 0 0 14px;
	color: var(--skbp-accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.skbp-related__title {
	margin: 0 0 clamp(32px, 4vw, 56px);
	color: var(--skbp-ink);
	font-size: clamp(2.4rem, 5vw, 4.5rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.025em;
}

/* Betheme's single-post content styles links (position:relative), which
   collapses the Posts Grid card link to 0×0 and hides the image + overlay.
   Force the card's link + image back to the full-tile absolute fill they use
   everywhere else. Scoped to the related grid so nothing else is affected. */
.skbp-related .skp-card__link,
.skbp-related .skp-card__image {
	position: absolute !important;
	inset: 0 !important;
}
.skbp-related .skp-card__image {
	width: 100% !important;
	height: 100% !important;
}

/* The reused .skp-grid defaults to 3 columns via the inline --skp-cols. */
.skbp-related__grid { margin: 0; }

/* ============================================================ *
 *  BETHEME OVERRIDES
 *
 *  Betheme's single-post content styles every <a> inside the article as
 *  `display: block; position: relative`, and it wins on specificity. That
 *  silently turns each icon button from a flex container back into a block, so
 *  the glyph parks in the top-left corner instead of centring — which is why
 *  the share and assistant icons sat off inside their circles.
 *
 *  Same root cause as the related-band fix further up (where it collapses the
 *  card's absolute link to 0×0), so the same remedy: re-force what the layout
 *  needs, scoped to this module.
 * ============================================================ */

.skbp-share__btn,
.skbp-ai__btn,
.skbp-section__cta,
.skbp-promo__phone {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Blockified by the same rule, which would drop the status onto the number's
   line and lose the column. */
.skbp-promo__phone-text {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* Blockified as flex items anyway; declared so the glyph's box is the icon
   itself rather than an inline box carrying the parent's line-height. */
.skbp-share__btn svg,
.skbp-ai__btn svg {
	display: block;
	flex: 0 0 auto;
}

/* ============================================================ *
 *  WPBAKERY TEMPLATE-WRAPPER OVERRIDES
 *
 *  The article is delivered through [wpba_mega_menu id=3650], so it renders
 *  inside `.wpba-mega-menu`. That widget prints a <style class="sk_wpba_style">
 *  block which paints EVERY link inside the wrapper `#7f8a97 !important` and
 *  hangs an animated 3px underline off each one. Inside a mega menu that is the
 *  intent; inside an article it repaints the buttons — the section CTA's white
 *  label turns a muddy grey-green against the indigo, and the rail's dark
 *  button loses its white text — and slides a bar under them on hover.
 *
 *  Only `!important` beats `!important`, so the module's own controls re-state
 *  their colours here. Prose links inside `.skbp-section__body` are left to the
 *  wrapper's grey on purpose: that is the site's content-link style, and it is
 *  the same on every other template this widget delivers.
 * ============================================================ */

/* The same block also declares `display: inline-block` on every link, and
   `.wpba-mega-menu a` outweighs a single class — which is why the rail's button
   shrink-wrapped its label instead of filling the card, and the contents' rows
   stopped being full-width targets. */
.skbp-promo__cta,
.skbp-toc__link { display: block !important; }

/* The two solid buttons. The section CTA's pair comes from the header CTA
   (Sketch → Global Header) so the label always suits its own background. */
.skbp-section__cta,
.skbp-section__cta:link,
.skbp-section__cta:visited,
.skbp-section__cta:hover,
.skbp-section__cta:focus { color: var(--skgh-cta-text, #ffffff) !important; }

.skbp-promo__cta,
.skbp-promo__cta:link,
.skbp-promo__cta:visited,
.skbp-promo__cta:hover,
.skbp-promo__cta:focus { color: #ffffff !important; }

/* The rail's quieter controls. */
.skbp-toc__link,
.skbp-toc__link:link,
.skbp-toc__link:visited { color: #6b7280 !important; }

.skbp-toc__link:hover,
.skbp-toc__link:focus,
.skbp-toc__link.is-active { color: #101326 !important; }

.skbp-share__btn,
.skbp-share__btn:link,
.skbp-share__btn:visited { color: var(--skbp-ink) !important; }

.skbp-share__btn:hover,
.skbp-share__btn:focus-visible { color: var(--skbp-accent) !important; }

.skbp-ai__btn,
.skbp-ai__btn:link,
.skbp-ai__btn:visited { color: #4b5563 !important; }

.skbp-ai__btn:hover,
.skbp-ai__btn:focus-visible { color: #101326 !important; }

.skbp-promo__phone,
.skbp-promo__phone:link,
.skbp-promo__phone:visited,
.skbp-promo__phone:hover { color: #101326 !important; }

.skbp-promo__phone-status { color: #98a2b3 !important; }

/* The sliding underline belongs on a menu item, not on a button, a rail link
   or a card that fills its whole tile. */
.skbp-section__cta::after,
.skbp-promo__cta::after,
.skbp-promo__phone::after,
.skbp-toc__link::after,
.skbp-share__btn::after,
.skbp-ai__btn::after,
.skbp-related .skp-card__link::after { display: none !important; }

/* ============================================================ *
 *  RESPONSIVE
 * ============================================================ */

@media (max-width: 1080px) {
	.skbp { --skbp-aside-w: 268px; }
	.skbp-hero__title { max-width: none; }
}

@media (max-width: 900px) {
	.skbp-body__inner {
		/* minmax(0,1fr) — not a bare 1fr — so a wide section image can't blow the
		   single column out past the viewport (grid min-content blowout). */
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	/* Nothing to pin against in a single column: the rail becomes a block that
	   sits above the article and scrolls away with it. */
	.skbp-aside__sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.skbp-content { max-width: none; }
	/* The share row reads better beside its label than under it once it's full
	   width rather than a 320px rail. */
	.skbp-share {
		display: flex;
		align-items: center;
		gap: 18px;
	}
	.skbp-share .skbp-aside__label { margin: 0; }
}

@media (max-width: 600px) {
	.skbp { font-size: 17px; --skbp-wash-h: 460px; }
	.skbp-hero__meta { font-size: 14px; gap: 6px 12px; }
	/* The bar's label and its four buttons stop fitting side by side. */
	.skbp-ai {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 16px;
	}
}

/* ============================================================ *
 *  FULL-BLEED — break out of the theme's centered post container.
 *  Keyed to body.skbp-on-page (added by SKBP_Plugin). Mirrors the
 *  case-study module's overlap mechanism.
 * ============================================================ */

/* `clip`, not `hidden` — and the two declarations are a pair, not a leftover.
   `overflow-x: hidden` forces the other axis to compute to `auto`, which turns
   the body into a scroll container; the sidebar's `position: sticky` is then
   measured against a box that never scrolls, so it silently never pins. `clip`
   clips the same overflow without creating that scroll container. The `hidden`
   line stays first as the fallback for browsers without `clip` — they lose the
   sticky rail but keep the horizontal clipping, which is the right way round. */
body.skbp-on-page {
	overflow-x: hidden;
	overflow-x: clip;
}

/* The article is placed deep inside two nested WPBakery rows (the post's own row
   + template 3650's row, joined through the wpba-mega-menu widget). Those rows /
   columns carry gutter margins + inner padding that add up to more than the
   viewport on small screens and push the content off the right edge.
   Neutralise the whole Betheme → WPBakery wrapper chain so every ancestor is
   exactly its container's width with no gutters; the article then fills the
   viewport cleanly and its own inner max-widths keep the text centered.
   All scoped to body.skbp-on-page, so only this article page is affected. */
body.skbp-on-page .post-wrapper-content,
body.skbp-on-page .mfn-builder-content,
body.skbp-on-page .the_content.mcb-section,
body.skbp-on-page .the_content .section_wrapper,
body.skbp-on-page .the_content_wrapper,
body.skbp-on-page .wpb-content-wrapper,
body.skbp-on-page .the_content_wrapper .vc_row,
body.skbp-on-page .the_content_wrapper .wpb_column,
body.skbp-on-page .the_content_wrapper .vc_column_container,
body.skbp-on-page .the_content_wrapper .vc_column-inner,
body.skbp-on-page .the_content_wrapper .wpb_wrapper,
body.skbp-on-page .the_content_wrapper .wpb_raw_code,
body.skbp-on-page .the_content_wrapper .wpba-mega-menu,
body.skbp-on-page .the_content_wrapper .wpba-mega-menu-inner {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	left: 0 !important;
	right: 0 !important;
}

/* Betheme + WPBakery stack their own padding above the first row — #Content
   alone carries 30px — which leaves a white strip above the hero and stops the
   wash reaching the top of the viewport. Same override the shared light hero
   uses (modules/services-hero-list), pointed at the single-post wrapper chain
   rather than the page one. */
body.skbp-on-page #Content,
body.skbp-on-page .post-wrapper-content,
body.skbp-on-page .post-wrapper-content > .section:first-of-type,
body.skbp-on-page .post-wrapper-content > .section:first-of-type > .section_wrapper,
body.skbp-on-page .the_content_wrapper > .vc_row:first-child,
body.skbp-on-page .the_content_wrapper > .vc_row:first-child .vc_column-inner {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Hide the theme's post header / featured image / post nav above the article. */
body.skbp-on-page .single-post .post-header,
body.skbp-on-page .single-photo-wrapper,
body.skbp-on-page .post-nav {
	display: none !important;
}

/* ---- Header integration -----------------------------------------------
   Float the global header over the article so the hero wash runs to the very
   top of the viewport, exactly as the shared light hero does on /services and
   /our-work. Lifted from modules/services-hero-list (body.skshl-on-page) —
   same two rules, keyed to this module's body class. The hero is light, so the
   header keeps its own ink; only the frosted pill dissolves while unscrolled,
   and its own JS re-frosts it past 30px. */
body.skbp-on-page .skgh {
	position: fixed !important;
	top: var(--skgh-sticky-offset, 10px) !important;
	left: var(--skgh-side-gap, 10px) !important;
	right: var(--skgh-side-gap, 10px) !important;
	margin: 0 !important;
}

body.skbp-on-page .skgh:not(.skgh--scrolled) .skgh__pill {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* With the chain neutralised, the article simply fills its (now viewport-wide)
   parent — no fragile 100vw breakout needed. */
body.skbp-on-page .skbp { width: 100%; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.skbp-toc__link,
	.skbp-share__btn,
	.skbp-ai__btn,
	.skbp-promo__cta,
	.skbp-section__cta,
	.skbp-section__cta svg { transition: none !important; }
	.skbp-share__btn:hover,
	.skbp-ai__btn:hover,
	.skbp-promo__cta:hover { transform: none; }
}