/*
Theme Name: Bjiffy Tech
Theme URI: https://bjiffytech.com
Description: Bjiffytech brand child theme for Roneous. Agentic AI adoption & enablement consulting. Implements Brand Book v2.0.
Author: Bjiffytech
Author URI: https://bjiffytech.com
Version: 2.0.0
Template: roneous
Text Domain: bjiffytech
*/

/* ==========================================================================
   Brand Book v2.0 tokens
   Type: Poppins 600 (headings) + Inter 400/500/600 (text, UI), self-hosted.
     Role            Desktop   Mobile
     Home hero       56/64     36/44
     H1 page title   48/56     32/40
     H2 section      36/44     28/36
     H3 sub-heading  28/36     22/30
     H4 card title   20/28     18/26
     Lead / intro    20/30     18/28
     Body            16/26     16/26
     Small           14/21     14/21   (nothing smaller, except labels)
     Label           12/16 caps +0.1em, Inter 600
     Button, menu    16
   Spacing: 4 8 12 16 24 32 48 64 96. Sections 96 desktop / 64 mobile.
   Grid: 1200px max, 24px gutters.
   ========================================================================== */
:root {
	--bjt-navy: #0B1533;
	--bjt-indigo: #5B4BFF;
	--bjt-indigo-hover: #4A3AE6;
	--bjt-indigo-press: #3B2DC4;
	--bjt-cyan: #00C2D1;
	--bjt-cyan-light: #7CF0F7;
	--bjt-teal: #007A85;
	--bjt-periwinkle: #A9B8FF;
	--bjt-mist: #F4F6FB;
	--bjt-text: #4A5068;
	--bjt-ink: #08102A;
	--bjt-border: #D5DAE6;
	--bjt-input: #868CA6;
	--bjt-success: #1E7A4C;
	--bjt-error: #C42B3B;
	--bjt-disabled-bg: #E3E6EE;
	--bjt-gradient: linear-gradient(120deg, #0B1533 0%, #2A1F8F 55%, #0E7C93 100%);
	--bjt-radius-card: 0; /* square cards */
	--bjt-radius-input: 10px;
	--bjt-radius-btn: 999px;
	--bjt-btn-h: 48px;
	--bjt-max: 1200px;
	--bjt-ease: 200ms ease-out;
	--bjt-font-head: "Poppins", "Segoe UI", Arial, sans-serif;
	--bjt-font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Accessibility ----------------------------------------------------------- */
.bjt-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10000;
	background: var(--bjt-navy);
	color: #fff !important;
	font-family: var(--bjt-font-body);
	font-weight: 600;
	font-size: 16px;
	padding: 12px 20px;
	border-radius: var(--bjt-radius-btn);
	text-decoration: none;
}
.bjt-skip-link:focus { top: 16px; outline: 2px solid var(--bjt-cyan); outline-offset: 2px; }
#bjt-main:focus { outline: none; }

/* Visible focus ring everywhere: indigo on light, cyan on dark */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bjt-indigo);
	outline-offset: 2px;
}
.header-single :focus-visible,
.bjt-cta-band :focus-visible,
.bg-dark :focus-visible,
nav.transparent :focus-visible,
footer :focus-visible { outline-color: var(--bjt-cyan) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Typography ---------------------------------------------------------------- */
html body {
	font-family: var(--bjt-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--bjt-text);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: lining-nums;
}

h1, h2, h3, h4, h5 {
	font-family: var(--bjt-font-head);
	color: var(--bjt-navy);
	font-weight: 600;
	font-style: normal;
	text-transform: none;
	text-wrap: balance;
}
h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.015em; }
h2 { font-size: 36px; line-height: 44px; letter-spacing: -0.015em; }
h3 { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
h4, h5 { font-size: 20px; line-height: 28px; letter-spacing: 0; }
/* Visual sizes for headings whose level is set by document order */
.bjt-as-h3 { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
.bjt-card-title { font-size: 20px; line-height: 28px; letter-spacing: 0; margin-bottom: 8px; }

p { max-width: 68ch; text-wrap: pretty; }
.text-center p { margin-left: auto; margin-right: auto; }
small { font-size: 14px; line-height: 21px; }
/* Emphasis is weight 600, not italic */
em { font-style: normal; font-weight: 600; }
strong, b { font-weight: 600; }

/* The parent uses italic 'Droid Serif' for accents; keep everything on the brand fonts */
.lead,
.subtitle,
.widgetsubtitle,
.textwidget a,
.entry-meta,
.entry-data,
.droid-text,
.breadcrumb-style li,
.breadcrumb-style li a {
	font-family: var(--bjt-font-body) !important;
	font-style: normal !important;
}
.lead { font-size: 20px; line-height: 30px; font-weight: 400; max-width: 60ch; }

/* Label: the one uppercase style */
.bjt-eyebrow {
	display: inline-block;
	font-family: var(--bjt-font-body);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bjt-teal);
	margin-bottom: 16px;
}
.bg-dark .bjt-eyebrow { color: var(--bjt-cyan-light); }
/* On the gradient every word is white */
.header-single .bjt-eyebrow,
.bjt-cta-band .bjt-eyebrow { color: #fff; }

/* Links: indigo and underlined in text, periwinkle on navy */
.wpb_text_column a:not(.btn):not(.bjt-card-link),
.entry-content a:not(.btn) {
	color: var(--bjt-indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.wpb_text_column a:not(.btn):not(.bjt-card-link):hover { color: var(--bjt-indigo-hover); text-decoration-thickness: 2px; }
.bg-dark .wpb_text_column a:not(.btn) { color: var(--bjt-periwinkle); }

/* Text link with arrow ("Learn more →") */
.bjt-card-link,
.bjt-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-family: var(--bjt-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--bjt-indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bjt-card-link:hover,
.bjt-text-link:hover { color: var(--bjt-indigo-hover); }

/* Section headings (tlg_headings) */
.headings-title .widgettitle {
	font-family: var(--bjt-font-head);
	font-size: 36px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--bjt-navy);
	margin-bottom: 16px !important;
}
.headings-title .widgetsubtitle {
	font-size: 20px;
	line-height: 30px;
	color: var(--bjt-text);
	opacity: 1;
	max-width: 60ch;
	margin: 0 auto;
	text-wrap: balance;
}

/* Navigation: parent sets 11px uppercase */
nav .menu > li > a {
	font-family: var(--bjt-font-body);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	/* parent dims links to 50% */
	opacity: 1 !important;
	color: var(--bjt-navy);
}
nav .menu > li > a:hover { color: var(--bjt-indigo); }
/* Current page: indigo plus underline, so colour is not the only cue */
nav .menu > li.current-menu-item > a,
nav .menu > li.active > a {
	color: var(--bjt-indigo);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
/* Logo: compact lockup (mark + name) on a white bar, since the lettering is black */
nav .logo { max-height: 40px; width: auto; }
nav:not(.transparent) { background: #fff; border-bottom: 1px solid var(--bjt-border); }
.bjt-footer-logo img { width: 240px; max-width: 100%; height: auto; }
.bjt-footer-logo { margin-bottom: 16px; }
.bjt-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
nav.transparent .bjt-menu-btn { color: #fff; }
.site-scrolled nav.transparent .bjt-menu-btn,
nav:not(.transparent) .bjt-menu-btn { color: var(--bjt-navy); }

/* Layout: 1200px grid, 24px gutters, 96/64 section rhythm ------------------- */
@media (min-width: 1280px) {
	.main-container .container { width: var(--bjt-max); }
}
.main-container .container { padding-left: 12px; padding-right: 12px; }
.main-container .row { margin-left: -12px; margin-right: -12px; }
.main-container .vc_column_container > .vc_column-inner,
.main-container [class*="col-"]:not(.vc_column_container) { padding-left: 12px; padding-right: 12px; }
.main-container .vc_column_container { padding-left: 0; padding-right: 0; }

/* Page header ----------------------------------------------------------------- */
/* section.image-bg in the parent sets background-image:none !important, so match its specificity */
section.header-single,
section.header-single.image-bg {
	background-color: var(--bjt-navy) !important;
	background-image: var(--bjt-gradient) !important;
	position: relative;
}
/* Glows: 25% opacity at most, never animated */
.header-single::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 20%, rgba(0, 194, 209, .25), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(91, 75, 255, .25), transparent 50%);
	pointer-events: none;
}
.header-single .container { position: relative; z-index: 2; }
/* The header bar sits above the page header, so 96px section padding */
section.header-single:not(.fullscreen) { padding-top: 96px; padding-bottom: 96px; }

/* parent .heading-title-bold sets weight 400, a 64px size and -0.7px tracking with !important */
.header-single h1,
.header-single h1.heading-title-bold {
	font-weight: 600;
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -0.015em !important;
	max-width: 20ch;
	margin: 0 auto 16px;
	color: #fff !important;
	text-shadow: none !important;
}
.header-single.fullscreen h1,
.header-single.fullscreen h1.heading-title-bold { font-size: 56px; line-height: 64px; max-width: 18ch; }
/* parent: .heading-title-bold + .lead is 25px with a text shadow. White only on the gradient. */
.header-single .heading-title-bold + .lead,
.header-single .lead {
	font-family: var(--bjt-font-body) !important;
	font-style: normal !important;
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	color: #fff !important;
	text-shadow: none;
	opacity: 1;
	max-width: 60ch;
	margin: 0 auto 8px;
}
/* Label sits in the content area (after the lead); show it above the title */
.header-single .standard-slide { display: flex; flex-direction: column; align-items: center; }
.header-single .standard-slide > * { width: 100%; }
.header-single .standard-slide .heading-content { order: -1; }
.header-single .heading-content p { margin-bottom: 0; max-width: none; }
.header-single .heading-content,
.header-single .heading-content p { color: #fff !important; }
.header-single .mt24 { margin-top: 32px !important; }

/* Inner pages: left-aligned header */
.header-single .standard-slide.text-left { align-items: flex-start; }
.header-single .text-left h1,
.header-single .text-left .lead { margin-left: 0 !important; margin-right: 0; }

/* Light section background */
.bg-secondary { background-color: var(--bjt-mist) !important; }

/* Buttons --------------------------------------------------------------------- */
/* 48px pill, Inter 600 16px, sentence case. Parent uses the heading font in tracked caps. */
.btn,
.btn-lg,
.btn-filled,
.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--bjt-btn-h);
	min-width: 0;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: var(--bjt-radius-btn);
	font-family: var(--bjt-font-body) !important;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none;
	transition: background-color var(--bjt-ease), border-color var(--bjt-ease), color var(--bjt-ease);
}
.btn-sm { height: 40px; padding: 0 20px; }

/* Hover and pressed states use !important because the parent's
   .image-bg .btn:hover / .bg-light .btn:hover rules repaint the
   background (white or #1d1d1d), which hid the label. */

/* Primary */
.btn-filled,
.wpcf7 input[type="submit"] { background: var(--bjt-indigo); border-color: var(--bjt-indigo); color: #fff !important; }
.btn-filled:hover,
.btn-filled:focus-visible,
.wpcf7 input[type="submit"]:hover {
	background: var(--bjt-indigo-hover) !important;
	border-color: var(--bjt-indigo-hover) !important;
	color: #fff !important;
}
.btn-filled:active,
.wpcf7 input[type="submit"]:active {
	background: var(--bjt-indigo-press) !important;
	border-color: var(--bjt-indigo-press) !important;
	color: #fff !important;
}

/* Secondary on dark: white outline; hover fills white with navy text */
.btn-light,
.header-single .btn:not(.btn-filled),
.bjt-cta-band .btn:not(.btn-filled) { background: transparent; border-color: #fff; color: #fff !important; }
.btn-light:hover,
.header-single .btn:not(.btn-filled):hover,
.bjt-cta-band .btn:not(.btn-filled):hover {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--bjt-navy) !important;
}
.btn-light:active,
.header-single .btn:not(.btn-filled):active { background: #E3E8F6 !important; border-color: #E3E8F6 !important; color: var(--bjt-navy) !important; }

/* Secondary on light: indigo outline; hover tints the fill, text stays indigo */
.bjt-btn-secondary { background: #fff; border-color: var(--bjt-indigo); color: var(--bjt-indigo) !important; }
.bjt-btn-secondary:hover {
	background: var(--bjt-mist) !important;
	border-color: var(--bjt-indigo-hover) !important;
	color: var(--bjt-indigo-hover) !important;
}

/* Disabled */
.btn[disabled],
.btn.disabled,
.wpcf7 input[type="submit"]:disabled {
	background: var(--bjt-disabled-bg) !important;
	border-color: var(--bjt-disabled-bg) !important;
	color: var(--bjt-text) !important;
	cursor: not-allowed;
}

/* Cards ------------------------------------------------------------------------- */
.bjt-cards .wpb_column > .vc_column-inner > .wpb_wrapper {
	position: relative;
	background: #fff;
	border: 1px solid var(--bjt-border);
	border-radius: var(--bjt-radius-card);
	padding: 32px 24px;
	height: 100%;
	transition: border-color var(--bjt-ease), box-shadow var(--bjt-ease);
}
/* Card grid: 24px gutters both ways (Brand Book v2.0), equal-height cards */
.bjt-cards .vc_column_container { margin-bottom: 0; }
.bjt-cards > .container > .row { display: flex; flex-wrap: wrap; row-gap: 24px; }
.bjt-cards .vc_column_container > .vc_column-inner { padding-top: 0; padding-bottom: 0; }
.bjt-cards .wpb_wrapper > .wpb_content_element:last-child { margin-bottom: 0; }
/* Two card rows in a row: keep the 24px gap between them */
section.bjt-cards + section.bjt-cards { padding-top: 24px !important; }
.bjt-cards > .container > .row::before,
.bjt-cards > .container > .row::after { display: none; }
.bjt-cards .wpb_column { display: flex; float: none; }
.bjt-cards .vc_column-inner,
.bjt-cards .vc_column-inner > .wpb_wrapper { width: 100%; }
.bjt-cards p,
.bjt-cards li { font-size: 16px; line-height: 26px; }
.bjt-cards .wpb_text_column p:last-child { margin-bottom: 0; }

/* Linked cards: the whole card is one link; hover adds an indigo border and soft shadow */
.bjt-cards-link .bjt-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--bjt-radius-card); }
.bjt-cards-link .bjt-card-link:focus-visible { outline: none; }
.bjt-cards-link .wpb_column > .vc_column-inner > .wpb_wrapper:focus-within { outline: 2px solid var(--bjt-indigo); outline-offset: 2px; }
.bjt-cards-link .wpb_column > .vc_column-inner > .wpb_wrapper:hover {
	border-color: var(--bjt-indigo);
	box-shadow: 0 12px 32px rgba(11, 21, 51, .08);
}

/* Icons: Lucide SVG, 1.75px stroke. 40px on cards, 24px in UI. Indigo on light, cyan on dark. */
.bjt-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.bjt-card-icon { color: var(--bjt-indigo); line-height: 0; margin-bottom: 16px; }
.bg-dark .bjt-card-icon,
.header-single .bjt-icon,
.bjt-cta-band .bjt-icon { color: var(--bjt-cyan); }
.bjt-tag {
	display: inline-block;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bjt-teal);
	margin-bottom: 12px;
}

/* Process steps */
.bjt-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bjt-indigo);
	color: #fff;
	font-family: var(--bjt-font-body);
	font-weight: 600;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	margin-bottom: 16px;
}
.bjt-steps p { font-size: 16px; line-height: 26px; }

/* Checklists: Lucide circle-check */
ul.bjt-check { list-style: none; padding-left: 0; }
ul.bjt-check li { position: relative; padding-left: 32px; margin-bottom: 12px; }
ul.bjt-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	background-color: var(--bjt-indigo);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bg-dark ul.bjt-check li::before { background-color: var(--bjt-cyan); }

/* Gradient call-to-action band: white only */
section.bjt-cta-band,
section.bjt-cta-band.image-bg {
	background-color: var(--bjt-navy) !important;
	background-image: var(--bjt-gradient) !important;
}
.bjt-cta-band h2,
.bjt-cta-band h3,
.bjt-cta-band p { color: #fff !important; }
.bjt-cta-band .lead { margin-left: auto; margin-right: auto; }

/* Contact form ------------------------------------------------------------------- */
.wpcf7 label,
.bjt-field-label {
	display: block;
	font-family: var(--bjt-font-body);
	font-size: 14px;
	line-height: 21px;
	font-weight: 600;
	color: var(--bjt-navy);
	margin-bottom: 8px;
	/* parent styles labels as tracked caps */
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	height: var(--bjt-btn-h);
	padding: 0 16px;
	margin: 0;
	font-family: var(--bjt-font-body);
	font-size: 16px;
	color: var(--bjt-navy);
	background: #fff;
	border: 1px solid var(--bjt-input);
	border-radius: var(--bjt-radius-input);
	box-shadow: none;
	transition: border-color var(--bjt-ease), box-shadow var(--bjt-ease);
}
.wpcf7 textarea { height: 144px; padding: 12px 16px; resize: vertical; }
.wpcf7 ::placeholder { color: #6B7290; opacity: 1; }
/* Focus: 2px indigo border + soft indigo ring */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--bjt-indigo);
	box-shadow: 0 0 0 1px var(--bjt-indigo), 0 0 0 5px rgba(91, 75, 255, .18);
}
.bjt-field { margin-bottom: 24px; }
/* Errors: error colour, icon and how to fix it */
.wpcf7 .wpcf7-not-valid { border-color: var(--bjt-error) !important; box-shadow: 0 0 0 1px var(--bjt-error); }
.wpcf7 .wpcf7-not-valid-tip {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	margin-top: 8px;
	font-size: 14px;
	line-height: 21px;
	color: var(--bjt-error);
}
.wpcf7 .wpcf7-not-valid-tip::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border-radius: var(--bjt-radius-input);
	font-size: 14px;
	line-height: 21px;
}
.wpcf7 form.sent .wpcf7-response-output { border: 1px solid var(--bjt-success); color: var(--bjt-success); background: #EEF7F2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border: 1px solid var(--bjt-error); color: var(--bjt-error); background: #FCEFF1; }
.wpcf7 input[type="submit"] { width: auto; cursor: pointer; }
.bjt-form-note { font-size: 14px; line-height: 21px; color: var(--bjt-text); margin: 16px 0 0; }

/* Footer (ink) --------------------------------------------------------------- */
footer.footer-widget,
footer.footer-widget.bg-graydark { background-color: var(--bjt-ink) !important; }
footer.footer-widget .widget .title {
	font-family: var(--bjt-font-head);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: #fff !important;
	margin-bottom: 12px;
}
footer.footer-widget p,
footer.footer-widget li { font-size: 15px; line-height: 24px; }
footer.footer-widget .widget .textwidget a {
	color: var(--bjt-periwinkle) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
footer.footer-widget .widget .textwidget a:hover { color: #fff !important; }
ul.bjt-footer-links { list-style: none; padding: 0; margin: 0; }
ul.bjt-footer-links li { margin: 0; }
/* 44px tap targets */
ul.bjt-footer-links a,
.bjt-footer-contact a { display: inline-block; padding: 10px 0; }
.sub-footer,
footer.bg-graydark .sub-footer {
	background-color: var(--bjt-ink) !important;
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
}

/* Back to top: 44px button */
.back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bjt-navy);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(11, 21, 51, .18);
}
.back-to-top:hover { background: var(--bjt-indigo); }

/* Responsive ------------------------------------------------------------------- */
/* parent forces .lead to 16/21 and 15/19 with !important at these widths */
@media (max-width: 1024px) {
	.lead,
	.header-single .lead,
	.header-single .heading-title-bold + .lead { font-size: 18px !important; line-height: 28px !important; }
	/* parent forces header titles to 45/50 here */
	.header-single h1.heading-title-bold { font-size: 42px !important; line-height: 50px !important; margin-bottom: 16px !important; }
}
@media (max-width: 767px) {
	section.header-single:not(.fullscreen) { padding-top: 64px; padding-bottom: 64px; }
	/* scale the lockup down to fit beside the menu button */
	nav .logo { max-height: none !important; max-width: none !important; height: auto !important; width: min(232px, calc(100vw - 104px)) !important; }
	nav .nav-bar > .module.left { width: calc(100% - 64px); max-width: none; overflow: visible; }
	/* parent forces header titles to 25/30 here */
	h1, .header-single h1.heading-title-bold { font-size: 32px !important; line-height: 40px !important; margin-bottom: 16px !important; }
	.header-single.fullscreen h1.heading-title-bold { font-size: 36px !important; line-height: 44px !important; }
	/* parent shrinks section headings to 16px, intros to 13px and paragraphs to 15px here */
	h2, .headings-title .widgettitle { font-size: 28px !important; line-height: 36px !important; }
	h3, .bjt-as-h3 { font-size: 22px; line-height: 30px; }
	h4, h5, .bjt-card-title { font-size: 18px; line-height: 26px; }
	.headings-title .widgetsubtitle { font-size: 18px !important; line-height: 28px !important; }
	footer.footer-widget .widget .title { font-size: 16px !important; line-height: 24px !important; }
	html body p { font-size: 16px; line-height: 26px; }
	html body p.lead { font-size: 18px; line-height: 28px; }
	/* Sections 64px on mobile */
	.main-container .pt96 { padding-top: 64px !important; }
	.main-container .pb96 { padding-bottom: 64px !important; }
	.main-container .pb48 { padding-bottom: 32px !important; }
	.header-single .vertical-flex-column .row > [class*="col-"] { min-width: 0; }
	/* parent hides all header paragraphs below 600px; keep the label */
	.header-single .heading-content p { display: block !important; }
	.bjt-cards .wpb_column { width: 100%; padding-bottom: 0 !important; }
	/* parent fixes .container at 295px and zeroes row margins here; use a 16px side gutter */
	.main-container .container { width: auto !important; max-width: none; margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
	.main-container .row { margin-left: 0 !important; margin-right: 0 !important; }
	.main-container .vc_column_container > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
	.header-single .container { padding-left: 16px !important; padding-right: 16px !important; }
	section.header-single, section.header-single.p0 { padding-left: 0 !important; padding-right: 0 !important; }
	.header-single .standard-slide { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 600px) {
	/* parent shrinks .btn-filled to 10px here */
	.btn, .btn-filled, .btn-lg { font-size: 16px !important; }
}

/* In-page links (e.g. Services "Jump to"): clear the 72px sticky header */
.main-container [id] { scroll-margin-top: 88px; }
/* Left-aligned section headings: keep the intro on the same left edge */
.headings-title .text-left .widgetsubtitle { margin-left: 0; text-align: left; }

/* Page-title subtitles: parent .fade-color is #bcbcbc (1.9:1); use slate (7.9:1) */
.fade-color { color: var(--bjt-text) !important; opacity: 1 !important; }

/* 404 and empty states */
.bjt-404 h1 { margin-bottom: 16px; }
.bjt-404 .lead { margin-left: auto; margin-right: auto; }
.bjt-404-actions { margin-top: 32px; }
.bjt-404-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin-top: 8px; }
.bjt-empty { max-width: 680px; }
.bjt-empty .bjt-404-links { justify-content: flex-start; }

.bjt-nowrap { white-space: nowrap; }

/* Small uppercase labels (eyebrows, tags): always 16px above the text that follows.
   Eyebrows sit in a <p> added by WordPress, so that wrapper's margin is removed. */
.bjt-eyebrow,
.bjt-tag { display: block; margin: 0 0 16px; line-height: 16px; }
/* WPBakery zeroes the margin of a block's last child, so the gap goes on the wrapper */
.wpb_text_column p:has(> .bjt-eyebrow:only-child),
.wpb_text_column p:has(> .bjt-tag:only-child) { margin: 0 0 16px !important; }
.wpb_text_column p > .bjt-eyebrow:only-child,
.wpb_text_column p > .bjt-tag:only-child { margin-bottom: 0; }
.header-single .bjt-eyebrow { margin-bottom: 16px; }

/* Inner-page header background (assets/js/page-hero.js): very faint orbit and
   drifting stars, kept to the right of the title on wider screens */
.bjt-page-hero-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
	-webkit-mask-image: linear-gradient(270deg, #000 0%, #000 40%, rgba(0, 0, 0, .25) 60%, transparent 80%);
	        mask-image: linear-gradient(270deg, #000 0%, #000 40%, rgba(0, 0, 0, .25) 60%, transparent 80%);
}
.bjt-page-hero-canvas.is-ready { opacity: 1; }
@media (max-width: 767px) {
	.bjt-page-hero-canvas {
		-webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%);
		        mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.bjt-page-hero-canvas { transition: none; }
}
