@media (max-width: 1280px) {
	:root {
		--page-padding: 48px;
	}

	.why-section__layout,
	.contact-section__layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-footer__grid {
		flex-direction: column;
	}

	.site-footer__columns {
		flex-wrap: wrap;
		gap: 40px;
	}
}

@media (max-width: 1024px) {
	:root {
		--container-gutter: 24px;
		--page-padding: 24px;
	}

	.primary-navigation,
	.site-header__cta {
		display: none !important;
	}

	.site-header__toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative;
		z-index: 5;
		flex-shrink: 0;
	}

	.site-header__inner {
		width: 100%;
		justify-content: space-between;
		gap: 16px;
		min-height: var(--header-height-mobile);
		padding: 12px var(--page-padding);
	}

	.site-branding {
		flex: 0 0 auto;
		min-width: 0;
	}

	.site-branding__logo {
		width: 150px;
		height: 48px;
		max-width: 150px;
		max-height: 48px;
		flex-shrink: 0;
	}

	.site-branding__logo-img--desktop {
		display: none;
	}

	.site-branding__logo-img--mobile {
		display: block;
		width: 150px;
		height: 48px;
	}

	.mobile-navigation__logo {
		width: 150px;
		height: 48px;
		display: block;
		line-height: 0;
	}

	.mobile-navigation__logo img {
		width: 150px;
		height: 48px;
		object-fit: contain;
	}

	.webob-container {
		width: min(100% - (var(--container-gutter) * 2), 100%);
		max-width: none;
	}

	.hero-video {
		margin-top: -180px;
	}

	.studio-section {
		padding-inline: 0;
	}

	.studio-section__navy {
		padding-inline: 0;
	}

	.workflow-section {
		padding-block: 40px 80px;
	}

	.home-portfolio {
		padding-block: 40px 64px;
	}

	.home-portfolio__slide {
		flex-basis: min(340px, 85vw);
	}

	.why-section {
		padding-block: 40px 80px;
	}

	.workflow-section__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 24px;
	}

	.workflow-section__grid .webob-workflow-card:nth-child(-n+3),
	.workflow-section__grid .webob-workflow-card:nth-child(n+4) {
		grid-column: span 1;
	}

	.webob-workflow-card {
		min-height: 360px;
	}

	.webob-workflow-card::after {
		background: linear-gradient(
			180deg,
			rgba(250, 251, 252, 0) 0%,
			rgba(250, 251, 252, 0) 78%,
			rgba(250, 251, 252, 0.25) 90%,
			var(--color-grey-50) 100%
		);
	}

	.webob-workflow-card__number {
		top: 16px !important;
		left: 17px !important;
		font-size: 36px;
		line-height: 54px;
		height: 54px;
		min-width: 27px;
	}

	.webob-workflow-card--step-1 .webob-workflow-card__number,
	.webob-workflow-card--step-2 .webob-workflow-card__number,
	.webob-workflow-card--step-3 .webob-workflow-card__number,
	.webob-workflow-card--step-4 .webob-workflow-card__number,
	.webob-workflow-card--step-5 .webob-workflow-card__number {
		top: 16px !important;
		left: 17px !important;
	}

	.webob-workflow-card__content,
	.webob-workflow-card--step-1 .webob-workflow-card__content,
	.webob-workflow-card--step-2 .webob-workflow-card__content,
	.webob-workflow-card--step-3 .webob-workflow-card__content,
	.webob-workflow-card--step-4 .webob-workflow-card__content,
	.webob-workflow-card--step-5 .webob-workflow-card__content {
		padding: 64px 17px 24px !important;
		max-width: none;
	}

	.webob-workflow-card__title {
		font-size: 20px;
		line-height: 1.5;
		margin-bottom: 8px;
	}

	.webob-workflow-card__illus,
	.webob-workflow-card--step-1 .webob-workflow-card__illus,
	.webob-workflow-card--step-2 .webob-workflow-card__illus,
	.webob-workflow-card--step-3 .webob-workflow-card__illus,
	.webob-workflow-card--step-4 .webob-workflow-card__illus,
	.webob-workflow-card--step-5 .webob-workflow-card__illus {
		transform: none;
		left: 4% !important;
		right: 4%;
		top: auto !important;
		bottom: 0 !important;
		width: 92% !important;
		height: 48% !important;
	}

	.webob-workflow-card__illus::after {
		display: none;
	}

	.webob-workflow-card__illus img,
	.webob-workflow-card--step-1 .webob-workflow-card__illus img,
	.webob-workflow-card--step-2 .webob-workflow-card__illus img,
	.webob-workflow-card--step-3 .webob-workflow-card__illus img,
	.webob-workflow-card--step-4 .webob-workflow-card__illus img,
	.webob-workflow-card--step-5 .webob-workflow-card__illus img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
		opacity: 1;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.studio-section {
		padding-bottom: 40px;
	}

	.studio-section__navy {
		min-height: 444px;
		padding-top: 40px;
	}

	.studio-section__cards {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: -185px;
	}

	.why-section {
		padding-top: 40px;
	}

	.why-section__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.why-section__visual {
		min-height: 592px;
	}

	.why-section__visual-content {
		left: 32px;
		right: 32px;
		bottom: 24px;
		max-width: 281px;
		width: auto;
		margin-inline: 0;
	}

	.why-section__visual-content .webob-section-header,
	.why-section__visual-content .webob-eyebrow,
	.why-section__visual-content .webob-kicker {
		align-items: flex-start;
		text-align: left;
		margin-inline: 0;
	}

	.why-section__visual-content .webob-h2 {
		font-size: 36px;
		line-height: 1.5;
	}

	.why-section__features {
		gap: 24px;
	}

	.contact-section {
		padding-block: 40px 80px;
	}

	.contact-section__intro .webob-h2 {
		font-size: 36px;
		line-height: 1.5;
	}

	.contact-section__form {
		padding: 24px 16px;
		gap: 24px;
	}

	.why-section__visual-content .webob-body-lg {
		font-size: 16px;
	}

	.contact-section__layout {
		gap: 24px;
	}

	.site-footer__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 16px;
		width: 100%;
	}

	.site-footer__brand {
		max-width: none;
		width: 100%;
	}

	.site-footer__logo {
		width: 200px;
		height: 64px;
	}

	.cta-section {
		padding-bottom: 80px;
	}

	.cta-banner {
		padding: 60px 24px 180px;
		min-height: 389px;
	}

	.cta-banner__content {
		max-width: 297px;
	}

	.cta-banner__title {
		font-size: 36px;
		line-height: 1.5;
	}

	.cta-banner__action {
		bottom: 60px;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: 0 12px 0;
		overflow-x: clip;
	}

	.hero-section__title-desktop {
		display: none;
	}

	.hero-section__title-mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.hero-section__panel {
		min-height: 720px;
		border-radius: var(--radius-xl);
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		/* Figma mobile: white top → soft blue only in the lower hero */
		background:
			radial-gradient(
				120% 70% at 50% 100%,
				rgba(176, 214, 255, 0.85) 0%,
				rgba(230, 242, 255, 0.55) 38%,
				rgba(255, 255, 255, 0) 72%
			),
			linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f5f9ff 70%, rgb(230, 242, 255) 100%);
	}

	/* Decorative SVGs sit too high on mobile — hide and use CSS bloom above */
	.hero-section__gradients {
		display: none;
	}

	.hero-section__content {
		position: relative;
		z-index: 2;
		padding: 72px 12px 240px;
		gap: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		min-width: 0;
	}

	.hero-section__title {
		width: 100%;
		max-width: 344px;
		min-width: 0;
	}

	.hero-section__title-mobile {
		max-width: 344px;
	}

	.hero-section__title-line,
	.hero-section__title-row .hero-section__title-line {
		display: block;
		width: 100%;
		max-width: 100%;
		font-size: 32px;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.hero-section__badge,
	.hero-section__badge--mobile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		max-width: 100%;
		margin-top: 8px;
		font-size: 24px;
		line-height: 1.5;
		padding: 8px 16px;
		border-radius: var(--radius-md);
		box-sizing: border-box;
	}

	.hero-section__subtitle {
		max-width: 345px;
		width: 100%;
		font-size: 14px;
		line-height: 1.5;
		margin-top: 20px;
		color: var(--color-grey-200);
		box-sizing: border-box;
		padding-inline: 4px;
	}

	.hero-section__actions {
		flex-direction: column;
		width: 100%;
		max-width: 345px;
		margin-top: 24px;
		gap: 16px;
		box-sizing: border-box;
	}

	.hero-section__actions .webob-btn {
		width: 100%;
		min-height: 45px;
		padding: 12px 24px;
		border-radius: var(--radius-md);
		font-size: 16px;
		box-sizing: border-box;
	}

	.hero-video {
		margin-top: -180px;
		padding: 0 40px 40px;
		position: relative;
		z-index: 3;
		overflow-x: clip;
	}

	.hero-video .webob-container {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.hero-video__frame {
		padding: 8px;
		border-radius: var(--radius-xl);
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.hero-video__thumb {
		aspect-ratio: 329 / 200;
		border-radius: var(--radius-md);
		width: 100%;
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Snippets sit at bottom corners behind the dashboard (Figma mobile). */
	.hero-section__snippet {
		display: block;
		z-index: 1;
		width: 152px;
		padding: 10px 12px;
		font-size: 7.5px;
		line-height: 1.35;
		opacity: 0.95;
		pointer-events: none;
		box-sizing: border-box;
	}

	.hero-section__snippet--left {
		left: 0;
		right: auto;
		top: auto;
		bottom: 20px;
		transform: rotate(5deg);
	}

	.hero-section__snippet--right {
		left: auto;
		right: 0;
		top: auto;
		bottom: 20px;
		width: 160px;
		transform: rotate(-3deg);
	}

	.hero-section__snippet-dots {
		height: 6px;
		margin-bottom: 8px;
	}

	.workflow-section {
		padding-block: 40px 80px;
	}

	.workflow-section .webob-section-header {
		text-align: center;
		align-items: center;
	}

	.workflow-section .webob-section-header .webob-eyebrow,
	.workflow-section .webob-section-header .webob-kicker {
		margin-inline: auto;
	}

	/* Figma mobile: step number text box is 27×36 → 24px / 1.5 */
	.webob-workflow-card__number {
		font-size: 24px;
		line-height: 36px;
		height: 36px;
		min-width: 27px;
	}

	.webob-workflow-card__title {
		font-size: 20px;
		line-height: 1.5;
	}

	.webob-workflow-card__desc {
		font-size: 14px;
		line-height: 1.5;
	}

	.studio-section__header .webob-h2 {
		font-size: 24px;
		line-height: 1.5;
	}

	.studio-section__header .webob-section-header__desc {
		font-size: 16px;
		line-height: 1.5;
	}

	.studio-section__decor {
		width: 164px;
		height: 164px;
		top: -7px;
		left: -19px;
	}

	.studio-section__navy {
		min-height: 444px;
		padding-top: 40px;
	}

	.studio-section__cards {
		margin-top: -185px;
		gap: 16px;
	}

	.webob-card {
		min-height: 350px;
	}

	.webob-card__media {
		height: 181px;
		margin: 4px 4px 0;
		width: calc(100% - 8px);
	}

	.webob-card__body {
		padding: 16px;
		gap: 8px;
	}

	.webob-card__title {
		font-size: 16px;
		line-height: 1.5;
	}

	.webob-card__desc {
		font-size: 12px;
		line-height: 1.5;
	}

	.webob-card .webob-btn {
		min-height: 37px;
		padding: 8px 0;
		font-size: 14px;
	}

	.webob-feature-row {
		gap: 16px;
	}

	.webob-feature-row__icon {
		width: 32px;
		height: 32px;
	}

	.webob-feature-row__title {
		font-size: 16px;
		line-height: 1.5;
	}

	.webob-feature-row__desc {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Figma mobile section titles: 24px (e.g. workflow 345×72 = 2 lines) */
	.webob-h2,
	.webob-section-header__title {
		font-size: 24px;
		line-height: 1.5;
	}

	/* Why Founders overlay title: 281×96 = 2 lines at 32px */
	.why-section__visual-content .webob-h2 {
		font-size: 32px;
		line-height: 1.5;
	}

	.contact-section__intro .webob-h2 {
		font-size: 24px;
		line-height: 1.5;
	}

	.why-section__visual-content .webob-body-lg {
		font-size: 16px;
		line-height: 1.5;
	}

	.webob-section-header__desc {
		font-size: 16px;
		line-height: 1.5;
	}

	.webob-eyebrow,
	.webob-kicker {
		font-size: 12px;
	}

	.contact-section__form > p {
		font-size: 16px;
		line-height: 1.5;
	}

	.site-footer__tagline {
		font-size: 14px;
		line-height: 1.5;
	}

	.site-footer__column-title,
	.site-footer__column a,
	.site-footer__legal a {
		font-size: 14px;
		line-height: 1.5;
	}

	.site-footer__copyright {
		font-size: 12px;
		line-height: 1.5;
	}

	.contact-section__fields .webob-form-row {
		grid-template-columns: 1fr;
	}

	.contact-section__form .webob-btn {
		width: 100%;
		min-height: 45px;
	}

	.mobile-navigation__logo {
		width: 150px;
		height: 48px;
	}

	.site-footer {
		padding-top: 120px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.site-footer__legal {
		order: 1;
		width: 100%;
		justify-content: space-between;
	}

	.site-footer__copyright {
		order: 2;
		width: 100%;
		text-align: center;
	}

	.webob-form-control,
	.webob-form-select {
		padding: 8px 16px;
		min-height: 40px;
	}

	.cta-banner {
		padding: 80px 24px 180px;
		min-height: 389px;
	}

	.cta-banner__content {
		max-width: 297px;
		margin-inline: auto;
	}

	.cta-banner__title {
		font-size: 24px;
		line-height: 1.5;
	}

	.cta-banner__desc {
		font-size: 14px;
		line-height: 1.5;
	}

	.cta-banner__action .webob-btn {
		width: auto;
		min-width: 167px;
		min-height: 45px;
		padding: 12px 24px;
	}
}

@media (max-width: 390px) {
	.hero-section__title-row {
		gap: 16px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.hero-section__snippet {
		display: block;
		width: 200px;
		padding: 12px;
		font-size: 9px;
	}

	.hero-section__snippet--left {
		left: 20px;
		bottom: 28px;
		transform: rotate(5deg);
	}

	.hero-section__snippet--right {
		right: 20px;
		bottom: 28px;
		width: 210px;
		transform: rotate(-3deg);
	}
}

@media (min-width: 1025px) {
	.mobile-navigation {
		display: none !important;
	}
}