/* ==========================================================================
   Responsive — breakpoints & mobile layout
   Mobile: 0–767px | Tablet: 768–1199px | Desktop: 1200px+
   ========================================================================== */

/* Prevent horizontal overflow */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

img,
video,
iframe,
table,
pre {
	max-width: 100%;
}

/* ---- Mobile (max 767px) ---- */
@media (max-width: 47.9375rem) {
	:root {
		--header-height: 4.25rem;
		--container-pad: 1.5rem; /* 24px horizontal */
		--space-section: 5rem; /* 80px section rhythm */
		--space-section-lg: 6.25rem; /* 100px CTA sections */
		--space-section-cta: var(--space-section-lg);
		--mobile-card-pad: 1.5rem; /* 24px */
		--mobile-card-pad-lg: 2rem; /* 32px */
		--page-hero-pad-top: var(--space-6);
		--page-hero-pad-bottom: var(--space-10);
	}

	.container,
	.cs-layout,
	.case-study-layout {
		width: 100%;
		max-width: 100%;
	}

	.site-main {
		overflow-x: clip;
	}

	/* Readable measure — no edge-to-edge text */
	.section__lead,
	.hero__description,
	.hub-hero__sub,
	.services-hero__sub,
	.about-hero__sub,
	.contact-hero__sub,
	.process-hero__sub,
	.blog-hub-hero__sub,
	.cs-hero__sub,
	.about-layout__text,
	.cta-block__text,
	.pre-footer-cta__text,
	.home-insights__lead {
		max-width: 100%;
	}

	/* Section rhythm */
	.section {
		padding-block: var(--space-section);
	}

	.section--cta,
	.section--cta-block {
		padding-block: var(--space-section-lg);
	}

	.section__header {
		margin-bottom: var(--space-8);
	}

	.section__lead {
		margin-top: var(--space-4);
	}

	.section__eyebrow,
	.hero .badge,
	.hub-hero .badge,
	.services-hero .badge,
	.about-hero .badge,
	.contact-hero .badge,
	.discovery-hero .badge,
	.process-hero .badge,
	.blog-hub-hero .badge,
	.cs-hero .badge,
	.legal-page__hero .badge {
		margin-bottom: var(--space-4);
	}

	/* Page heroes — consistent vertical rhythm */
	.hero__title,
	.hub-hero__title,
	.services-hero__title,
	.about-hero__title,
	.contact-hero__title,
	.discovery-hero__title,
	.process-hero__title,
	.blog-hub-hero__title,
	.blog-single-hero__title,
	.legal-page__title,
	.cs-hero__title,
	.cs-hero__headline {
		margin-bottom: var(--space-5);
	}

	.hero__description,
	.hub-hero__sub,
	.services-hero__sub,
	.about-hero__sub,
	.contact-hero__sub,
	.discovery-hero__sub,
	.process-hero__sub,
	.blog-hub-hero__sub,
	.cs-hero__sub {
		margin-bottom: var(--space-6);
	}

	.hero__actions,
	.services-hero__actions,
	.about-hero__actions,
	.process-hero__actions,
	.cs-hero__actions {
		margin-top: var(--space-2);
	}

	/* Typography */
	.heading-2,
	.hero__title,
	.hub-hero__title,
	.services-hero__title,
	.about-hero__title,
	.contact-hero__title,
	.process-hero__title,
	.legal-page__title,
	.blog-hub-hero__title,
	.blog-single-hero__title,
	.discovery-hero__title,
	.cs-hero__headline {
		font-size: clamp(1.75rem, 8vw, 2.625rem);
		line-height: 1.12;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.heading-3 {
		font-size: var(--text-lg);
	}

	.hero__actions {
		margin-bottom: var(--space-8);
	}

	.trust-bar {
		padding-top: var(--space-10);
	}

	.trust-bar__title {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}

	.trust-bar__sub {
		font-size: 1rem;
	}

	.trust-bar__stat {
		padding: var(--space-4) var(--space-3);
		font-size: 0.8125rem;
	}

	.hero__description,
	.hub-hero__sub,
	.services-hero__sub,
	.about-hero__sub,
	.contact-hero__sub,
	.process-hero__sub,
	.section__lead,
	.legal-document__text {
		font-size: 1.0625rem;
		line-height: 1.7;
	}

	/* Buttons */
	.hero__actions,
	.services-hero__actions,
	.about-hero__actions,
	.cs-hero__actions,
	.cta-block__actions,
	.services-cta__actions,
	.about-cta__actions,
	.process-hero__actions,
	.contact-cta__actions,
	.process-cta__actions,
	.services-cta__actions {
		flex-direction: column;
		width: 100%;
	}

	.hero__actions .btn,
	.services-hero__actions .btn,
	.about-hero__actions .btn,
	.cs-hero__actions .btn,
	.cta-block__actions .btn,
	.services-cta__actions .btn,
	.about-cta__actions .btn {
		width: 100%;
		justify-content: center;
		min-height: 3rem;
	}

	.btn {
		min-height: 2.75rem;
	}

	.btn--lg {
		min-height: 3.25rem;
	}

	/* Header glass on mobile */
	.site-header {
		background: rgba(9, 9, 9, 0.88);
		border-bottom-color: var(--color-border);
	}

	.site-header__inner {
		gap: var(--space-3);
	}

	/* Grids → single column */
	.grid--expertise,
	.grid--testimonials,
	.portfolio-grid,
	.portfolio-grid--home,
	.portfolio-grid--hub,
	.compare-grid,
	.process-track,
	.about-approach__grid,
	.about-experience__expertise,
	.about-projects__grid,
	.about-tech__grid,
	.services-audience__grid,
	.services-tech__grid,
	.contact-next__steps,
	.process-duration__grid {
		grid-template-columns: 1fr;
	}

	/* Cards — 24px padding system */
	.card--glass,
	.compare-card,
	.services-audience__card,
	.services-tech__item,
	.about-approach__card,
	.about-experience__expertise-item,
	.process-step__content,
	.process-duration__card,
	.contact-next__step,
	.testimonial,
	.blog-toc__inner,
	.blog-hub-sidebar__inner {
		padding: var(--mobile-card-pad);
	}

	.portfolio-card__body,
	.portfolio-card--home .portfolio-card__body {
		padding: var(--mobile-card-pad);
	}

	.blog-card__body {
		padding: var(--mobile-card-pad);
	}

	.blog-featured__content {
		padding: var(--mobile-card-pad);
	}

	/* Grids — consistent gaps */
	.grid--expertise,
	.grid--testimonials,
	.portfolio-grid,
	.portfolio-grid--home,
	.portfolio-grid--hub,
	.compare-grid,
	.process-track,
	.about-approach__grid,
	.about-experience__expertise,
	.about-projects__grid,
	.about-tech__grid,
	.services-audience__grid,
	.services-tech__grid,
	.contact-next__steps,
	.process-duration__grid,
	.home-insights__grid,
	.blog-grid,
	.blog-hub-layout,
	.blog-related__grid {
		gap: var(--space-5);
	}

	/* About hero stack */
	.about-hero__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.about-hero__media {
		max-width: 18rem;
	}

	.about-hero__brand-mark {
		width: min(9rem, 40vw);
		top: 8%;
		right: 0;
		opacity: 0.05;
	}

	/* Contact & forms */
	.contact-panel {
		padding: var(--mobile-card-pad-lg);
	}

	.contact-panel__layout {
		gap: var(--space-6);
	}

	.contact-main,
	.contact-trust,
	.contact-faq,
	.contact-next {
		padding-block: var(--space-section);
	}

	.sofiane-fluent-form-wrap .ff-el-group {
		margin-bottom: var(--space-5);
	}

	.sofiane-fluent-form-wrap .ff-el-form-control,
	.sofiane-fluent-form-wrap select.ff-el-form-control {
		min-height: 3rem;
		padding-inline: var(--space-4);
	}

	.sofiane-fluent-form-wrap textarea.ff-el-form-control {
		min-height: 10rem;
	}

	/* Services list */
	.services-list .container {
		max-width: 100%;
		gap: var(--space-6);
	}

	.service-block {
		padding: var(--mobile-card-pad-lg);
	}

	/* Homepage */
	.section--services .card__title,
	.compare-card__title {
		margin-bottom: var(--space-3);
		font-size: var(--text-lg);
		line-height: 1.3;
	}

	.section--services .card__text,
	.compare-card__list li {
		font-size: var(--text-sm);
		line-height: 1.65;
	}

	.section--services .section-services__footer,
	.section-process__footer,
	.home-insights__footer {
		margin-top: var(--space-8);
	}

	.home-insights {
		padding-block: var(--space-section);
	}

	.home-insights__grid {
		margin-top: var(--space-8);
	}

	.cta-block {
		padding: var(--mobile-card-pad-lg) var(--mobile-card-pad);
	}

	.cta-block__title {
		margin-bottom: var(--space-4);
	}

	.cta-block__text {
		font-size: var(--text-lg);
		margin-bottom: var(--space-8);
	}

	.trust-bar {
		margin-top: var(--space-6);
		padding-top: var(--space-10);
	}

	.trust-bar__header {
		padding-top: var(--space-5);
		margin-bottom: var(--space-6);
	}

	/* Process timeline */
	.process-step {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		padding: var(--space-6) 0;
	}

	.process-timeline::before {
		display: none;
	}

	.process-step__marker {
		justify-content: flex-start;
		padding-top: 0;
	}

	.process-step__content {
		padding: var(--space-6);
	}

	.process-duration__grid {
		grid-template-columns: 1fr;
	}

	.process-hero__actions {
		flex-direction: column;
		width: 100%;
	}

	.process-hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Blog hub & single */
	.blog-hub-hero,
	.blog-single-hero {
		padding-block: var(--page-hero-pad-top) var(--space-8);
	}

	.blog-featured {
		padding-block: var(--space-8) var(--space-6);
	}

	.blog-hub-body {
		padding-block: var(--space-8) var(--space-section);
	}

	.blog-filters {
		margin-bottom: var(--space-6);
	}

	.blog-filters__list {
		gap: var(--space-2);
	}

	.blog-filters__btn {
		min-height: 2.75rem;
		padding-inline: var(--space-4);
	}

	.blog-prose {
		font-size: 1.0625rem;
		line-height: 1.75;
	}

	.blog-prose > * + * {
		margin-top: var(--space-5);
	}

	.blog-prose h2 {
		margin-top: var(--space-10);
		margin-bottom: var(--space-3);
	}

	.blog-prose h3 {
		margin-top: var(--space-8);
	}

	.blog-single-body {
		padding-block: var(--space-8) var(--space-section);
	}

	.blog-single-hero__meta {
		gap: var(--space-4);
		margin-bottom: var(--space-6);
		padding-bottom: var(--space-6);
	}

	.blog-single-hero__title {
		margin-bottom: var(--space-6);
	}

	.blog-single-after {
		margin-top: var(--space-10);
		padding-bottom: var(--space-section);
	}

	.blog-single-after .blog-related {
		margin-top: var(--space-10);
		padding-top: var(--space-8);
	}

	.blog-author,
	.blog-related,
	.blog-single-cta {
		padding-inline: 0;
	}

	.blog-pagination {
		margin-top: var(--space-8);
	}

	/* Project discovery */
	.discovery-main {
		padding-block: var(--space-5) var(--space-section);
	}

	.discovery-trust {
		margin-bottom: var(--space-4);
	}

	.discovery-wizard {
		padding: var(--space-5);
	}

	.discovery-wizard__panel-head {
		margin-bottom: var(--space-6);
	}

	.discovery-wizard__actions {
		margin-top: var(--space-6);
		padding-top: var(--space-5);
	}

	/* FAQ blocks */
	.services-faq__question,
	.process-faq__question,
	.contact-faq__question {
		padding: var(--space-4) var(--mobile-card-pad);
		font-size: var(--text-sm);
	}

	.services-faq__answer,
	.process-faq__answer,
	.contact-faq__answer {
		padding: 0 var(--mobile-card-pad) var(--space-4);
	}

	.services-faq__list,
	.process-faq__list,
	.contact-faq__list {
		gap: var(--space-3);
	}

	/* Footer */
	.pre-footer-cta {
		padding-block: var(--space-section) var(--space-10);
	}

	.pre-footer-cta__inner {
		padding: var(--mobile-card-pad-lg) var(--mobile-card-pad);
	}

	.site-footer {
		padding-block: var(--space-10) var(--space-6);
	}

	.site-footer__main {
		gap: var(--space-8);
	}

	.site-footer__bottom {
		padding-top: var(--space-6);
		gap: var(--space-4);
	}

	/* Legal */
	.legal-page__body {
		padding-block: var(--space-section) var(--space-16);
	}

	.legal-document {
		gap: var(--space-8);
	}

	.legal-document__section {
		padding-bottom: var(--space-6);
	}

	.legal-document__heading {
		margin-bottom: var(--space-4);
		font-size: var(--text-lg);
	}

	.legal-document__text {
		font-size: var(--text-sm);
		line-height: 1.75;
	}

	/* Case studies */
	.cs-layout,
	.case-study-layout {
		gap: var(--space-8);
		padding-bottom: var(--space-section);
	}

	.cs-split {
		gap: var(--space-8);
	}

	.cs-showcase {
		padding-block: var(--space-5) var(--space-8);
	}

	.cs-section {
		padding-block: var(--space-section);
	}

	.cs-related {
		padding-block: var(--space-10);
	}

	.cs-details-grid {
		padding: var(--mobile-card-pad);
		margin-bottom: var(--space-8);
		gap: var(--space-5);
	}

	.cs-sidebar__inner {
		padding: var(--mobile-card-pad);
	}

	.cs-content img,
	.case-study-content img {
		width: 100%;
		height: auto;
		border-radius: var(--radius-md);
	}

	.cs-media--full-page .cs-media__scroll {
		max-height: min(58vh, 28rem);
	}

	.cs-media--mobile {
		max-width: min(100%, 16rem);
	}

	.cs-block,
	.case-study-block,
	.cs-card,
	.cs-takeaway {
		padding: var(--mobile-card-pad);
	}

	.cs-content h2,
	.case-study-content h2 {
		margin-top: var(--space-10);
		margin-bottom: var(--space-4);
	}

	/* About / process page blocks */
	.about-hero__layout {
		gap: var(--space-6);
	}

	.about-credibility {
		gap: var(--space-3);
	}

	.process-step__content {
		padding: var(--mobile-card-pad);
	}

	.about-cta,
	.services-cta,
	.process-cta,
	.contact-cta {
		padding-block: var(--space-section-lg);
	}

	.services-cta__inner,
	.about-cta__inner,
	.process-cta__inner,
	.contact-cta__inner {
		padding: var(--mobile-card-pad-lg) var(--mobile-card-pad);
		gap: var(--space-5);
	}

	.thank-you__inner {
		padding: var(--mobile-card-pad-lg) var(--mobile-card-pad);
	}

	/* Overflow guards */
	pre,
	code,
	table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-table {
		display: block;
		overflow-x: auto;
	}

	.portfolio-card__title,
	.blog-card__title,
	.testimonial__quote {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* Small phones — 430px, 390px, 375px, 360px */
@media (max-width: 26.875rem) {
	:root {
		--space-section: 5rem;
		--space-section-cta: 5.5rem;
	}

	.heading-2,
	.hero__title,
	.hub-hero__title,
	.services-hero__title,
	.about-hero__title,
	.contact-hero__title,
	.process-hero__title,
	.legal-page__title,
	.blog-hub-hero__title,
	.blog-single-hero__title,
	.cs-hero__headline {
		font-size: clamp(1.625rem, 7.2vw, 2.375rem);
	}

	.btn--lg {
		padding-inline: var(--space-4);
		font-size: var(--text-sm);
	}
}

@media (max-width: 22.5rem) {
	:root {
		--container-pad: 1.5rem;
	}

	.trust-bar__stats {
		grid-template-columns: 1fr;
	}

	.trust-bar__stat {
		border-right: none;
	}
}

/* ---- Tablet (768px – 1199px) ---- */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
	:root {
		--header-height: 4.5rem;
		--space-section: 7rem;
		--space-section-lg: 10rem;
	}

	.portfolio-grid--hub {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--expertise,
	.grid--testimonials {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-hero__layout {
		grid-template-columns: 1fr;
	}

	.contact-panel__layout {
		grid-template-columns: 1fr;
	}

	.hero-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- Desktop (1200px+) ---- */
@media (min-width: 75rem) {
	.site-nav {
		display: block;
	}

	.site-header__cta {
		display: inline-flex;
		align-items: center;
	}
}

/* Case study sidebar layout — see case-study.css */