/*
Theme Name: Recruit Pro
Theme URI: https://example.com/recruit-pro
Author: Your Agency
Author URI: https://example.com
Description: A clean, informative custom WordPress theme built for recruitment / staffing firms. Includes editable custom meta fields for the homepage, team members, services and testimonials — no job-board functionality.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: recruitpro
*/

/* ==========================================================================
   The block below is ported verbatim (selector-for-selector, value-for-value)
   from the approved homepage mockup so the live theme renders pixel-for-pixel
   identical to it. Do not "clean up" or merge these rules — anything added
   after this block is additive only, for pages the mockup didn't cover.
   ========================================================================== */
:root { color-scheme: light only; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2430; line-height: 1.6; background: #fff; }
img { max-width: 100%; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 16px; font-weight: 700; }
.btn { display: inline-block; padding: 12px 26px; border-radius: 6px; background: #1a56db; color: #fff; font-weight: 600; border: none; }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }

.site-header { border-bottom: 1px solid #eaecef; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.site-branding { font-size: 1.4rem; font-weight: 800; color: #1a56db; }
.site-branding span { color: #5b6472; font-weight: 400; }
.main-navigation ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.main-navigation a { color: #1f2430; font-weight: 600; text-decoration: none; }
.main-navigation .current { color: #1a56db; }

.hero { background: linear-gradient(135deg, #1a56db 0%, #123b96 100%); color: #fff; padding: 90px 0; }
.hero .container { display: flex; gap: 40px; align-items: center; }
.hero-text { flex: 1.1; }
.hero h1 { font-size: 2.8rem; color: #fff; }
.hero p.subtitle { font-size: 1.15rem; opacity: .92; margin-bottom: 32px; max-width: 480px; }
.hero-actions { display: flex; gap: 16px; }
.hero-image { flex: 1; background: rgba(255,255,255,.12); border-radius: 12px; height: 280px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 14px; }

.stats-bar { background: #f5f7fb; padding: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid > div { padding: 32px 20px; text-align: center; border-right: 1px solid #eaecef; }
.stats-grid > div:last-child { border-right: none; }
.stat-number { font-size: 2.2rem; font-weight: 800; color: #1a56db; }
.stat-label { color: #5b6472; font-weight: 600; font-size: .95rem; }

.section { padding: 80px 0; background: #fff; }
.section-alt { background: #f9fafc; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-header p { color: #5b6472; }
.eyebrow { color: #1a56db; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }

.about-split { display: flex; gap: 48px; align-items: center; }
.about-split .image-block { flex: 1; background: #f0f3fa; border: 1px solid #e3e8f5; border-radius: 12px; height: 260px; display: flex; align-items: center; justify-content: center; color: #9aa4b8; }
.about-split .text-block { flex: 1; }
.about-split .text-block p { max-width: 460px; line-height: 1.7; }
.about-split a.link { color: #1a56db; font-weight: 700; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { background: #fff; border: 1px solid #eaecef; border-radius: 10px; padding: 28px; }
.service-icon { width: 52px; height: 52px; border-radius: 10px; background: #e8effd; color: #1a56db; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 18px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.team-grid > div { border-bottom: 3px solid #1a56db; border-radius: 8px 8px 0 0; padding: 24px 16px 20px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; background: #f0f3fa; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: #9aa4b8; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-grid .position { color: #5b6472; font-weight: 500; font-size: .82rem; }
.team-social { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.team-social a { width: 30px; height: 30px; border-radius: 50%; background: #e8effd; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.team-social a:hover { background: #1a56db; }
.team-social a:hover svg { stroke: #fff; }
.team-social svg { width: 15px; height: 15px; stroke: #1a56db; transition: stroke .2s ease; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card .rating { color: #f5a623; margin-bottom: 10px; }
.testimonial-card .quote { font-style: italic; color: #333; font-size: .95rem; }
.testimonial-card .name { font-weight: 700; margin-top: 16px; }
.testimonial-card .role { color: #5b6472; font-size: .85rem; }

.cta-band { background: #10192e; color: #fff; padding: 64px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #c4cbdb; }

.site-footer { background: #0c1424; color: #c4cbdb; padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 32px; margin-bottom: 36px; }
.site-footer h4 { color: #fff; font-size: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; text-align: center; font-size: .85rem; color: #7c88a3; }

/* ==========================================================================
   Everything below is additive: convenience resets and styles for pages
   the homepage mockup doesn't cover (About, Contact, Team/Service single
   & archive pages, mobile nav). Selectors here are either more specific
   than the block above, or target elements the block above never touches,
   so none of this changes the homepage's pixel output.
   ========================================================================== */
a { color: #1a56db; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
.main-navigation a:hover { color: #1a56db; text-decoration: none; }
.main-navigation .current-menu-item > a { color: #1a56db; }
.site-branding img { max-height: 44px; }
.site-branding a { text-transform: uppercase; }
.site-header { position: sticky; top: 0; background: #fff; z-index: 100; }

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.6rem;
	cursor: pointer;
}

/* Stats bar count-up: numbers rise + fade in as they animate (JS toggles
   .in-view on scroll-into-view). No-JS visitors never see the initial
   hidden state, since this only applies once JS has already run. */
.js-ready .stats-grid > div {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}
.js-ready .stats-grid > div.in-view {
	opacity: 1;
	transform: translateY(0);
}

.hero .hero-image img { border-radius: 12px; width: 100%; height: 100%; object-fit: cover; }

.card { transition: box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow: 0 12px 28px rgba(20,30,60,.08); transform: translateY(-4px); }
.service-icon svg { width: 24px; height: 24px; }
.card .learn-link { display: inline-block; margin-top: 14px; color: #1a56db; font-weight: 700; font-size: .88rem; text-decoration: none; }
.card .learn-link:hover { text-decoration: underline; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.dashicons { font-size: 24px; width: 24px; height: 24px; }

/* Page header banner (About / Contact / archive pages — not part of the homepage mockup) */
.page-header-banner {
	background: linear-gradient(135deg, #1a56db 0%, #123b96 100%);
	color: #fff;
	padding: 60px 0;
	text-align: center;
}
.page-header-banner h1 { color: #fff; margin-bottom: 8px; }
.page-header-banner .breadcrumb { color: #9fb0d6; }
.page-header-banner .breadcrumb a { color: #9fb0d6; }

.entry-content { padding: 60px 0; background: #fff; }
.entry-content .container { max-width: 960px; }

/* Contact page */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.contact-info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info-item .icon {
	width: 40px; height: 40px; border-radius: 8px;
	background: #e8effd; color: #1a56db;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.contact-info-item .icon svg { width: 19px; height: 19px; }
.contact-quicklinks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.office-card { background: #fff; border: 1px solid #eaecef; border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.office-card .eyebrow { margin-bottom: 12px; }
.office-card .contact-info-item { margin-bottom: 0; }
.contact-form-card { background: #fff; border: 1px solid #eaecef; border-radius: 12px; padding: 28px; }
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d7dbe3;
	border-radius: 6px;
	margin-bottom: 16px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: #1f2430;
}
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form .form-status { margin-top: 14px; font-weight: 600; }
.map-embed { border: 0; width: 100%; height: 200px; border-radius: 8px; margin-top: 16px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* Testimonial slider — shows 3 cards at a time on desktop, 2 on tablet,
   1 on mobile, and scrolls one slide at a time within that window. */
.testimonial-slider { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 56px; }
.testimonial-slider .ts-track { display: flex; overflow: hidden; }
.testimonial-slider .ts-track { transition: transform .5s ease; }
.testimonial-slider .ts-slide { flex: 0 0 33.3333%; box-sizing: border-box; padding: 0 12px; }
.testimonial-slider .testimonial-card { max-width: 100%; height: 100%; box-sizing: border-box; }
.ts-prev, .ts-next {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%;
	background: #fff; border: 1px solid #eaecef; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(20,30,60,.08);
	color: #1a56db; font-size: 1.1rem;
}
.ts-prev { left: 0; }
.ts-next { right: 0; }
.ts-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.ts-dots button { width: 8px; height: 8px; border-radius: 4px; background: #d7dbe3; border: none; padding: 0; cursor: pointer; transition: width .2s ease, background .2s ease; }
.ts-dots button.is-active { background: #1a56db; width: 22px; }
.ts-source { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #9aa4b8; font-size: .78rem; }

/* "Why Choose Us" benefits list (About page) */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-item .why-icon { width: 40px; height: 40px; border-radius: 8px; background: #e8effd; color: #1a56db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-item .why-icon svg { width: 20px; height: 20px; }
.why-item h4 { font-size: .97rem; font-weight: 700; color: #1f2430; margin: 0 0 4px; }
.why-item p { margin: 0; color: #5b6472; font-size: .85rem; line-height: 1.55; }
@media (max-width: 700px) {
	.why-grid { grid-template-columns: 1fr; }
}

/* FAQ page */
.faq-layout { max-width: 780px; margin: 0 auto; }
.faq-categories { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.faq-categories button {
	padding: 9px 20px; border-radius: 20px; border: 1px solid #eaecef;
	background: #fff; color: #3a4150; font-weight: 600; font-size: .85rem;
	cursor: pointer; font-family: inherit;
}
.faq-categories button.is-active { background: #1a56db; color: #fff; border-color: #1a56db; }
.faq-item { border: 1px solid #eaecef; border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: #fff; }
.faq-item[hidden] { display: none; }
.faq-question {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; text-align: left; padding: 16px 20px; cursor: pointer;
	background: none; border: none; font-family: inherit;
	font-weight: 700; color: #1f2430; font-size: .94rem;
}
.faq-chevron { flex-shrink: 0; color: #1a56db; transition: transform .2s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-answer-inner { padding: 0 20px 18px; color: #5b6472; font-size: .88rem; line-height: 1.6; }
@media (max-width: 900px) {
	.testimonial-slider .ts-slide { flex: 0 0 50%; }
}
@media (max-width: 700px) {
	.testimonial-slider { padding: 0 44px; }
	.testimonial-slider .ts-slide { flex: 0 0 100%; }
}

/* Responsive collapse — the mockup was desktop-only; these breakpoints
   only activate below the design width, so desktop pixels are untouched. */
@media (max-width: 900px) {
	.grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.main-navigation { display: none; width: 100%; }
	.main-navigation.is-open { display: block; }
	.main-navigation ul { flex-direction: column; gap: 0; }
	.main-navigation li { border-top: 1px solid #eaecef; }
	.main-navigation a { display: block; padding: 12px 0; }
	.menu-toggle { display: block; }
	.site-header .container { flex-wrap: wrap; }
}
@media (max-width: 860px) {
	.hero .container { flex-direction: column; }
	.hero h1 { font-size: 2.2rem; }
	.about-split { flex-direction: column; }
}
@media (max-width: 700px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-grid > div:nth-child(2) { border-right: none; }
	.footer-grid { grid-template-columns: 1fr; }
	.grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage redesign (v2) — ports the uploaded "Creation Infotech Homepage"
   design file exactly: Inter + Source Serif 4, navy/oklch color system,
   72px-gutter layout. Fonts are enqueued in functions.php.

   Scope: shared site chrome (header, footer) is restyled to match since
   it's part of the uploaded design and appears on every page. The
   content SECTIONS below (hero, stats, how-it-works, industries, trusted,
   testimonials, CTA) use new "hp2-" prefixed classes and only apply to
   home.php, so they don't touch the existing About/Services/FAQ/Contact
   page styling above — those keep their current look until asked
   otherwise.
   ========================================================================== */
html { width: 100%; overflow-x: hidden; background: oklch(0.985 0.003 90); }
body { width: 100%; max-width: 100%; overflow-x: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: oklch(0.985 0.003 90); }

/* Page canvas — the uploaded design is a fixed 1440px-wide layout: header,
   every homepage section (including colored section backgrounds like the
   stats bar, industries, testimonials and CTA band) and the footer are all
   confined to this single centered column, not stretched edge-to-edge.
   .hp2-page reproduces that exactly; opened in header.php right after
   wp_body_open(), closed in footer.php right before wp_footer(). */
.hp2-page { max-width: 1440px; margin: 0 auto; background: oklch(0.985 0.003 90); overflow: hidden; }

/* Shared header — bar itself is full width (edge to edge); inner content
   is centered/boxed to the same 1440px column as the rest of the page. */
.site-header { border-bottom: 1px solid oklch(0.9 0.005 90); }
.site-header .container { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 28px 72px; }
.site-branding { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: oklch(0.22 0.01 90); text-transform: none; }
.site-branding a { text-transform: none; color: inherit; }
.site-branding-mark { width: 36px; height: 36px; background: oklch(0.32 0.09 250); border-radius: 8px; display: inline-block; flex-shrink: 0; }
.main-navigation ul { gap: 40px; }
.main-navigation a { font-weight: 500; font-size: 15px; color: oklch(0.22 0.01 90); }
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: oklch(0.32 0.09 250); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.btn-header-outline,
.btn-header-solid {
	padding: 11px 22px; border-radius: 6px; font-weight: 600; font-size: 14px;
	display: inline-block;
}
.btn-header-outline { border: 1px solid oklch(0.32 0.09 250); color: oklch(0.32 0.09 250); }
.btn-header-outline:hover { background: oklch(0.94 0.03 250); text-decoration: none; }
.btn-header-solid { background: oklch(0.32 0.09 250); color: #fff; }
.btn-header-solid:hover { background: oklch(0.45 0.13 250); color: #fff; text-decoration: none; }

.hp2-wrap { width: 100%; box-sizing: border-box; padding: 0 72px; }

/* Hero */
.hp2-hero { padding: 88px 0 96px; }
.hp2-hero .hp2-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hp2-hero-badge {
	display: inline-block; padding: 7px 14px; background: oklch(0.94 0.03 250);
	color: oklch(0.32 0.09 250); border-radius: 20px; font-size: 13px; font-weight: 600;
	margin-bottom: 24px;
}
.hp2-hero h1 {
	font-family: 'Source Serif 4', serif; font-size: 56px; line-height: 1.08;
	font-weight: 600; letter-spacing: -0.01em; margin: 0 0 24px; color: oklch(0.22 0.01 90);
}
.hp2-hero-subtitle { font-size: 18px; line-height: 1.6; color: oklch(0.4 0.01 90); max-width: 520px; margin: 0 0 36px; }
.hp2-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hp2-btn-primary,
.hp2-btn-outline {
	padding: 15px 28px; border-radius: 7px; font-weight: 600; font-size: 16px; display: inline-block;
}
.hp2-btn-primary { background: oklch(0.32 0.09 250); color: #fff; }
.hp2-btn-primary:hover { background: oklch(0.45 0.13 250); color: #fff; text-decoration: none; }
.hp2-btn-outline { border: 1.5px solid oklch(0.8 0.005 90); color: oklch(0.32 0.09 250); }
.hp2-btn-outline:hover { background: oklch(0.96 0.006 90); text-decoration: none; }
.hp2-hero-image {
	aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
}
.hp2-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hp2-hero-image span { font-family: monospace; font-size: 14px; color: oklch(0.55 0.01 90); }

/* Stats */
.hp2-stats { padding: 56px 0; background: oklch(0.32 0.09 250); color: #fff; }
.hp2-stats .hp2-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.hp2-stat-number { font-family: 'Source Serif 4', serif; font-size: 40px; font-weight: 600; color: #fff; }
.hp2-stat-label { font-size: 15px; opacity: .8; margin-top: 6px; }
/* Count-up + fade/slide in on scroll (JS toggles .in-view — see functions.php). */
.js-ready .hp2-stats .hp2-wrap > div { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-ready .hp2-stats .hp2-wrap > div.in-view { opacity: 1; transform: translateY(0); }

/* Section header (shared by how-it-works / industries / testimonials) —
   the source design uses margin-bottom:64px under "How it works" but
   margin-bottom:56px under "Industries"/"Testimonials"; .hp2-how relies
   on the default 64px, the other two override to 56px below. */
.hp2-section-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.hp2-section-header h2 { font-family: 'Source Serif 4', serif; font-size: 38px; font-weight: 600; margin: 0 0 16px; color: oklch(0.22 0.01 90); }
.hp2-section-header p { font-size: 17px; color: oklch(0.4 0.01 90); line-height: 1.6; margin: 0; }
.hp2-industries .hp2-section-header,
.hp2-testimonials .hp2-section-header { margin-bottom: 56px; }

/* How it works */
.hp2-how { padding: 96px 0; }
.hp2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.hp2-step { padding: 36px 32px; background: #fff; border: 1px solid oklch(0.91 0.005 90); border-radius: 12px; }
.hp2-step-number {
	width: 44px; height: 44px; border-radius: 10px; background: oklch(0.94 0.03 250);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: oklch(0.32 0.09 250); font-size: 17px; margin-bottom: 20px;
}
.hp2-step h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: oklch(0.22 0.01 90); }
.hp2-step p { font-size: 15px; color: oklch(0.45 0.01 90); line-height: 1.6; margin: 0; }

/* Industries */
.hp2-industries { padding: 96px 0; background: oklch(0.96 0.006 90); }
.hp2-industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hp2-industry { padding: 28px 24px; background: #fff; border-radius: 10px; border: 1px solid oklch(0.91 0.005 90); font-weight: 600; font-size: 16px; color: oklch(0.22 0.01 90); }

/* Trusted by */
.hp2-trusted { padding: 88px 0; }
.hp2-trusted-label { text-align: center; margin-bottom: 48px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.5 0.01 90); }
.hp2-trusted-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center; }
.hp2-logo-placeholder { height: 44px; background: oklch(0.92 0.005 90); border-radius: 6px; }

/* Testimonials */
.hp2-testimonials { padding: 96px 0; background: oklch(0.96 0.006 90); }
.hp2-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hp2-testimonial-card { padding: 32px; background: #fff; border-radius: 12px; border: 1px solid oklch(0.91 0.005 90); }
.hp2-testimonial-card p { font-size: 15px; line-height: 1.7; color: oklch(0.3 0.01 90); margin: 0 0 20px; }
.hp2-testimonial-name { font-weight: 700; font-size: 14px; color: oklch(0.22 0.01 90); }
.hp2-testimonial-role { font-size: 13px; color: oklch(0.5 0.01 90); }

/* CTA band */
.hp2-cta-wrap { width: 100%; box-sizing: border-box; padding: 96px 72px; }
.hp2-cta {
	padding: 64px 72px; background: oklch(0.32 0.09 250); border-radius: 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.hp2-cta h2 { font-family: 'Source Serif 4', serif; color: #fff; font-size: 32px; font-weight: 600; margin: 0 0 12px; }
.hp2-cta p { color: oklch(0.9 0.02 250); font-size: 16px; margin: 0; max-width: 480px; }
.hp2-cta-actions { display: flex; gap: 16px; flex-shrink: 0; flex-wrap: wrap; }
.hp2-btn-cta-solid,
.hp2-btn-cta-outline {
	padding: 15px 28px; border-radius: 7px; font-weight: 700; font-size: 15px; display: inline-block;
}
.hp2-btn-cta-solid { background: #fff; color: oklch(0.32 0.09 250); }
.hp2-btn-cta-solid:hover { background: oklch(0.94 0.03 250); text-decoration: none; }
.hp2-btn-cta-outline { border: 1.5px solid oklch(0.6 0.05 250); color: #fff; }
.hp2-btn-cta-outline:hover { background: oklch(0.45 0.13 250); text-decoration: none; }

/* Shared footer — bar itself is full width; inner content is centered/
   boxed to the same 1440px column as the header and homepage sections. */
.site-footer { background: oklch(0.985 0.003 90); color: oklch(0.22 0.01 90); padding: 64px 0 40px; border-top: 1px solid oklch(0.91 0.005 90); }
.site-footer .container { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 0 72px; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand-mark { width: 28px; height: 28px; background: oklch(0.32 0.09 250); border-radius: 6px; display: inline-block; }
.footer-brand-name { font-size: 17px; font-weight: 800; }
.site-footer .footer-blurb { font-size: 14px; color: oklch(0.5 0.01 90); line-height: 1.6; max-width: 280px; margin: 0; }
.site-footer h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(0.5 0.01 90); margin: 0 0 16px; }
.site-footer ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer li { margin-bottom: 0; font-size: 14px; }
.site-footer a { color: oklch(0.22 0.01 90); }
.site-footer a:hover { color: oklch(0.32 0.09 250); }
.footer-newsletter { display: flex; gap: 8px; }
.footer-newsletter input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid oklch(0.85 0.005 90); border-radius: 6px; font-size: 14px; font-family: inherit; }
.footer-newsletter button { padding: 11px 18px; background: oklch(0.32 0.09 250); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid oklch(0.91 0.005 90); font-size: 13px; color: oklch(0.55 0.01 90); text-align: left; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: oklch(0.55 0.01 90); }

@media (max-width: 1100px) {
	.hp2-wrap,
	.hp2-cta-wrap,
	.site-footer .container,
	.site-header .container { padding-left: 40px; padding-right: 40px; }
	.hp2-hero .hp2-wrap { grid-template-columns: 1fr; }
	.hp2-hero-image { max-width: 480px; }
	.hp2-steps { grid-template-columns: 1fr; }
	.hp2-industries-grid { grid-template-columns: repeat(2, 1fr); }
	.hp2-testimonial-grid { grid-template-columns: 1fr; }
	.hp2-trusted-logos { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.hp2-stats .hp2-wrap { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.hp2-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
	.hp2-wrap,
	.hp2-cta-wrap,
	.site-footer .container,
	.site-header .container { padding-left: 24px; padding-right: 24px; }
	.hp2-hero h1 { font-size: 36px; }
	.hp2-industries-grid { grid-template-columns: 1fr; }
	.hp2-trusted-logos { grid-template-columns: repeat(2, 1fr); }
	.hp2-cta { padding: 40px 28px; }
	.footer-grid { grid-template-columns: 1fr; }
}