/* ==========================================================================
   Big Skill - interior sections, photography treatment, footer
   Loaded after bs-home.css. Depends on its custom properties.
   ========================================================================== */

/* Interior hero ----------------------------------------------------------- */
.bsx__hero--sm { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.bsx__hero--sm .bsx__h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); max-width: 18ch; }

/* Photography ------------------------------------------------------------- */
/* Real photos used as atmosphere, never as the thing you read over.
   The image sits behind a heavy scrim so type contrast never depends on it. */
.bsx__photo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.bsx__photo > .bsx__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.bsx__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6,11,36,.93) 0%, rgba(6,11,36,.86) 55%, rgba(6,11,36,.95) 100%);
}
/* A tint keeps the photo in the brand world rather than reading as stock. */
.bsx__photo--tint::after {
	background:
		linear-gradient(155deg, rgba(6,11,36,.94) 0%, rgba(12,20,54,.88) 45%, rgba(27,79,196,.78) 100%);
}

/* Small inset portrait, used beside copy */
.bsx__portrait {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--mist-2);
}
.bsx__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsx__portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6,11,36,0) 55%, rgba(6,11,36,.42) 100%);
	pointer-events: none;
}

/* Role grid --------------------------------------------------------------- */
.bsx__roles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1px;
	margin-top: 2.6rem;
	background: var(--edge-light);
	border: 1px solid var(--edge-light);
	border-radius: 16px;
	overflow: hidden;
}
.bsx__section--dark .bsx__roles { background: var(--edge); border-color: var(--edge); }

.bsx__role {
	background: var(--paper);
	padding: 1.5rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.bsx__section--dark .bsx__role { background: var(--ink-2); }

.bsx__role-t {
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.012em;
	color: var(--on-light);
}
.bsx__section--dark .bsx__role-t { color: var(--on-dark); }

.bsx__role-d { font-size: .9rem; line-height: 1.5; color: var(--on-light-2); }
.bsx__section--dark .bsx__role-d { color: var(--on-dark-2); }

.bsx__role--more {
	background: var(--mist);
	justify-content: center;
}
.bsx__section--dark .bsx__role--more { background: rgba(95,214,210,.07); }
.bsx__role--more .bsx__role-t { color: var(--brand); }
.bsx__section--dark .bsx__role--more .bsx__role-t { color: var(--cyan); }

/* Engagement models ------------------------------------------------------- */
.bsx__models {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.1rem;
	margin-top: 2.6rem;
}
.bsx__model {
	border: 1px solid var(--edge-light);
	border-radius: 18px;
	padding: 1.7rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	background: var(--paper);
}
.bsx__section--dark .bsx__model { background: var(--ink-2); border-color: var(--edge); }
.bsx__section--mist .bsx__model { background: var(--paper); }

.bsx__model-tag {
	font-family: "IBM Plex Mono", monospace;
	font-size: .66rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 500;
}
.bsx__section--dark .bsx__model-tag { color: var(--cyan); }
.bsx__model-t { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; }
.bsx__model-d { font-size: .93rem; line-height: 1.6; color: var(--on-light-2); }
.bsx__section--dark .bsx__model-d { color: var(--on-dark-2); }
.bsx__model-best {
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px dashed var(--edge-light);
	font-size: .84rem;
	color: var(--on-light-2);
}
.bsx__section--dark .bsx__model-best { border-top-color: var(--edge); color: var(--on-dark-2); }
.bsx__model-best b { color: var(--on-light); font-weight: 700; }
.bsx__section--dark .bsx__model-best b { color: var(--on-dark); }

/* Cost comparison --------------------------------------------------------- */
.bsx__compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.1rem;
	margin-top: 2.4rem;
}
.bsx__compare-col {
	padding: 1.5rem 1.5rem 1.6rem;
	border-radius: 16px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--edge);
}
.bsx__compare-col--win {
	background: rgba(95,214,210,.09);
	border-color: rgba(95,214,210,.35);
}
.bsx__compare-h {
	font-family: "IBM Plex Mono", monospace;
	font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--on-dark-2); margin-bottom: 1rem;
}
.bsx__compare-col--win .bsx__compare-h { color: var(--cyan); }
.bsx__compare-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bsx__compare-l li { font-size: .92rem; line-height: 1.5; color: var(--on-dark-2); padding-left: 1.1rem; position: relative; }
.bsx__compare-l li::before { content: "—"; position: absolute; left: 0; opacity: .5; }
.bsx__compare-col--win .bsx__compare-l li::before { content: "✓"; color: var(--cyan); opacity: 1; }

/* Contact form ------------------------------------------------------------ */
/* Styles WPForms so it belongs to the design rather than sitting in it. */
.bsx__form .wpforms-field-label {
	font-family: Manrope, sans-serif !important;
	font-size: .88rem !important;
	font-weight: 700 !important;
	color: var(--on-light) !important;
	margin-bottom: .45rem !important;
}
.bsx__form input[type="text"],
.bsx__form input[type="email"],
.bsx__form input[type="tel"],
.bsx__form input[type="url"],
.bsx__form select,
.bsx__form textarea {
	font-family: Manrope, sans-serif !important;
	font-size: 1rem !important;
	padding: .85rem 1rem !important;
	border: 1.5px solid var(--edge-light) !important;
	border-radius: 10px !important;
	background: var(--paper) !important;
	color: var(--on-light) !important;
	max-width: 100% !important;
	transition: border-color .18s ease;
}
.bsx__form input:focus,
.bsx__form select:focus,
.bsx__form textarea:focus {
	border-color: var(--brand) !important;
	outline: 2px solid rgba(40,114,250,.2) !important;
	outline-offset: 1px;
}
.bsx__form .wpforms-submit {
	font-family: Manrope, sans-serif !important;
	background: var(--brand) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 100px !important;
	padding: 1rem 1.9rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.bsx__form .wpforms-submit:hover {
	background: var(--brand-lift) !important;
	transform: translateY(-2px);
}
.bsx__form .wpforms-required-label { color: #B8283F !important; }

@media (prefers-reduced-motion: reduce) {
	.bsx__form input,
	.bsx__form textarea,
	.bsx__form .wpforms-submit { transition: none !important; }
	.bsx__form .wpforms-submit:hover { transform: none !important; }
}

/* ==========================================================================
   Footer - harmonise with the new design
   These target Blocksy's footer markup, so they sit outside .bsx.
   ========================================================================== */

/* The footer logo was rendering far larger than the header one. */
.site-footer .ct-footer-logo img,
.site-footer .site-logo-container img {
	max-width: 190px !important;
	height: auto !important;
}

@media (max-width: 600px) {
	.site-footer .ct-footer-logo img,
	.site-footer .site-logo-container img { max-width: 150px !important; }
}

/* Footer section menu ----------------------------------------------------- */
.bsx-footer-nav {
	background: var(--bsx-footer-bg, #F3F6FD);
	border-top: 1px solid #DCE4F5;
	padding: clamp(2.4rem, 5vw, 3.4rem) 0;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.bsx-footer-nav__wrap {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 2rem 1.5rem;
}
.bsx-footer-nav__col h3 {
	font-family: "IBM Plex Mono", monospace;
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #2872FA;
	margin: 0 0 1rem;
	font-weight: 500;
}
.bsx-footer-nav__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bsx-footer-nav__col a {
	color: #060B24;
	text-decoration: none;
	font-size: .94rem;
	font-weight: 500;
	transition: color .18s ease;
}
.bsx-footer-nav__col a:hover { color: #2872FA; }
.bsx-footer-nav__col a:focus-visible { outline: 2px solid #2872FA; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.bsx-footer-nav__col a { transition: none; }
}

/* Portrait-orientation photos used as wide backgrounds: keep the faces in
   frame instead of letting object-fit centre on torsos. */
/* Portrait photo in a wide band: cover overflows vertically, so anchor to
   the top edge. Anything lower clips the heads of whoever is standing. */
.bsx__photo--faces > .bsx__photo-img { object-position: center top; }

/* The team shot is the one place a real face should read through the scrim,
   so this section gets a lighter veil than the others. */
.bsx__photo--team::after {
	background:
		linear-gradient(165deg, rgba(6,11,36,.90) 0%, rgba(12,20,54,.82) 40%, rgba(27,79,196,.72) 100%);
}

/* Recognition cases ------------------------------------------------------- */
.bsx__cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1.1rem;
	margin-top: 2.8rem;
}
.bsx__case {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--edge-light);
	border-radius: 16px;
	background: var(--paper);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bsx__case:hover { border-color: transparent; box-shadow: 0 16px 38px -20px rgba(6,11,36,.28); }
.bsx__case-n {
	flex: 0 0 auto;
	font-family: "IBM Plex Mono", monospace;
	font-size: .78rem;
	font-weight: 600;
	color: var(--brand);
	padding-top: .15rem;
	font-variant-numeric: tabular-nums;
}
.bsx__case-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.bsx__case-t { font-size: 1.04rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--on-light); }
.bsx__case-pain { font-size: .93rem; line-height: 1.55; color: var(--on-light-2); }
.bsx__case-fix {
	font-size: .91rem; line-height: 1.55; color: var(--on-light);
	padding-top: .75rem; border-top: 1px dashed var(--edge-light);
}
.bsx__case-fix-l {
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--brand); margin-bottom: .35rem;
}
.bsx__note {
	margin-top: 2.2rem; font-size: .86rem; line-height: 1.6;
	color: var(--on-light-2); max-width: 62ch; font-style: italic;
}

/* Tech chips -------------------------------------------------------------- */
.bsx__stack-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }

/* FAQ --------------------------------------------------------------------- */
.bsx__faq { margin-top: 2.6rem; display: flex; flex-direction: column; gap: 0; }
.bsx__faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--edge-light); }
.bsx__faq-item:first-child { border-top: 1px solid var(--edge-light); }
.bsx__faq-q { font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em; color: var(--on-light); margin-bottom: .6rem; }
.bsx__faq-a { font-size: .96rem; line-height: 1.62; color: var(--on-light-2); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) { .bsx__case { transition: none; } }

/* Framed team photo ------------------------------------------------------- */
/* A portrait group shot cannot be full-bleed across a wide band: cover always
   clips somebody, top or bottom. Shown contained instead, so all six faces
   survive, with a soft brand glow behind it to keep it in the design. */
.bsx__teamshot {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--edge);
	background: var(--ink-2);
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
.bsx__teamshot img {
	display: block;
	width: 100%;
	height: auto;
	/* A touch of brand tint so the photo reads as part of the page, not pasted on. */
	filter: saturate(.92) contrast(1.02);
}
.bsx__teamshot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(170deg, rgba(40,114,250,.10) 0%, rgba(6,11,36,.22) 100%);
	pointer-events: none;
}
.bsx__teamshot-cap {
	margin-top: .9rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--on-dark-2);
}