/*
 * Phone layout from the Figma frame "iPhone 16 & 17 Pro - 3" (402 px)
 * and the tablet in-between state.
 */

@media (max-width: 720px) {

	:root {
		--aitio-gutter: 16px;
	}

	/* ---- hero/header: keep the logo and menu readable on the image --- */
	.aitio-header__scrim {
		height: 80px;
	}

	.aitio-header[data-theme="light"] .custom-logo {
		filter: brightness(0);
	}

	body.has-service-hero .aitio-header__inner {
		align-items: flex-start;
		width: min(362px, calc(100% - 40px));
		min-height: 205px;
		margin: 27px auto 0;
		padding: 0;
	}

	body.has-service-hero .aitio-header__brand {
		position: absolute;
		top: 10px;
		left: 0;
	}

	body.has-service-hero .aitio-header__right {
		position: static;
		display: block;
		width: auto;
		margin: 0;
	}

	body.has-service-hero .aitio-header__end {
		position: absolute;
		top: 43.8px;
		right: 0;
		display: flex;
		align-items: flex-end;
	}

	body.has-service-hero .aitio-header__end .aitio-btn {
		display: inline-flex;
		width: 162.8px;
		height: 35px;
	}

	body.has-service-hero .aitio-header__email {
		display: inline-block;
		margin-top: 29.6px;
	}

	body.has-service-hero .aitio-header__online {
		display: inline-flex;
		margin-top: 12px;
	}

	body.has-service-hero .aitio-burger {
		position: absolute;
		top: 4px;
		right: 0;
	}

	body.has-service-hero .aitio-burger__label {
		font-size: 16px;
		line-height: 24px;
		text-transform: none;
	}

	body.has-service-hero .aitio-burger__icon {
		display: none;
	}

	.aitio-hero {
		--aitio-hero-h: 860px;
	}

	.aitio-hero__content {
		top: 36.5%;
	}

	.aitio-floating {
		display: none;
	}

	/* ---- selected work: one card + the next one peeking ------------- */
	.aitio-work-band {
		padding: 70px 0 64px;
	}

	.aitio-work-band__head {
		margin-bottom: 36px;
	}

	.aitio-work-band__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		max-width: none;
		margin-right: -16px;
		padding-bottom: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.aitio-work-band__grid::-webkit-scrollbar {
		display: none;
	}

	.aitio-work-card {
		flex: 0 0 calc(100vw - 80px);
		max-width: 420px;
		scroll-snap-align: start;
	}

	.aitio-work-card__media {
		aspect-ratio: 322 / 328;
	}

	.aitio-work-card__title {
		margin-top: 18px;
		font-size: 24px;
		line-height: 1.3;
	}

	.aitio-work-card__meta {
		font-size: 12px;
		line-height: 18px;
	}

	/* ---- client logo wall: three tiles per row ---------------------- */
	.aitio-logos.aitio-pad {
		padding: 40px 0 56px;
	}

	.aitio-logos__label {
		margin-bottom: 38px;
		font-size: 14px;
		line-height: 1.5;
	}

	.aitio-logos__sentence {
		margin-bottom: 24px;
	}

	.aitio-logos__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		max-width: none;
	}

	.aitio-logos__item {
		aspect-ratio: 119 / 80;
	}

	.aitio-logos__item a {
		padding: 8px;
	}

	.aitio-logos__logo {
		max-width: 72%;
		max-height: 88%;
	}

	/* ---- services: compact closed accordion rows ---------------------- */
	.aitio-front-section--service_hubs .aitio-hubs {
		padding-top: 40px;
		padding-bottom: 50px;
	}

	.aitio-hubs__heading {
		max-width: 300px;
		font-size: 24px;
		line-height: 1.3;
	}

	.aitio-hubs__heading + .aitio-hubs__list {
		margin-top: 40px;
	}

	.aitio-hubs__list {
		max-width: none;
	}

	.aitio-hub__head {
		min-height: 62px;
		padding: 16px 0;
		gap: 12px;
	}

	.aitio-hub__name {
		font-size: 20px;
		line-height: 1.3;
	}

	.aitio-hub__sign {
		font-size: 24px;
	}

	.aitio-hubs__foot {
		display: block;
		margin-top: 40px;
	}

	.aitio-hubs__foot .aitio-hubs__heading {
		font-size: 24px;
	}

	.aitio-hubs__more {
		margin-top: 24px;
	}

	.aitio-hub__top {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* ---- team: three small faces, two columns of details ------------- */
	.aitio-team {
		padding: 56px 0 48px;
	}

	.aitio-team__inner {
		display: block;
	}

	.aitio-team__lead {
		margin-bottom: 24px;
	}

	.aitio-team__heading {
		max-width: 200px;
		font-size: 16px;
		line-height: 1.5;
	}

	.aitio-team__lead .aitio-btn {
		display: none;
	}

	.aitio-team__photos {
		gap: 12px;
	}

	.aitio-team__photo {
		aspect-ratio: 115 / 150;
	}

	.aitio-team__columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"people note"
			"people polaroid";
		gap: 20px 16px;
		margin-top: 28px;
	}

	.aitio-team__people {
		grid-area: people;
	}

	.aitio-team__person {
		margin-bottom: 14px;
	}

	.aitio-team__name {
		font-size: 16px;
	}

	.aitio-team__role {
		font-size: 9px;
	}

	.aitio-team__note {
		grid-area: note;
		margin: 0;
		font-size: 16px;
		line-height: 1.3;
		transform: rotate(4deg);
	}

	.aitio-team__polaroid {
		grid-area: polaroid;
		align-self: end;
		justify-self: end;
		width: 92px;
		height: 99px;
		margin: 0;
	}

	/* ---- blog: one 320 px card + the next one peeking ---------------- */
	.aitio-digest {
		padding: 56px 0 80px;
	}

	.aitio-digest__label {
		margin-bottom: 72.9px;
		font-size: 14px;
		line-height: 21px;
	}

	.aitio-digest__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		margin-right: -16px;
		padding-bottom: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.aitio-digest__grid::-webkit-scrollbar {
		display: none;
	}

	.aitio-digest__card {
		flex: 0 0 320px;
		max-width: calc(100vw - 64px);
		scroll-snap-align: start;
	}

	.aitio-digest__media {
		aspect-ratio: 320 / 210;
	}

	.aitio-digest__title {
		font-size: 22px;
		line-height: 1.4;
	}

	.aitio-digest__more {
		margin-top: 37.8px;
	}

	.aitio-digest__action {
		margin-top: 52.4px;
	}

	.aitio-digest__tag {
		right: 12px;
		width: auto;
		max-width: 130px;
	}

	/* ---- contact: shorter rows, names still side by side ------------- */
	.aitio-contact {
		padding: 56px 0 128px;
	}

	.aitio-contact__inner {
		gap: 36px;
	}

	.aitio-contact__label {
		margin-bottom: 28px;
	}

	.aitio-contact__heading {
		font-size: 32px;
		line-height: 1.2;
	}

	.aitio-contact__intro {
		max-width: none;
		margin-top: 16px;
	}

	.aitio-contact__details {
		display: none;
	}

	.aitio-form__row {
		margin-bottom: 24px;
	}

	.aitio-form__row--names {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin-top: 40px;
		margin-bottom: 28px;
	}

	.aitio-form__row--names > .aitio-form__field:nth-child(3) {
		grid-column: 1 / -1;
	}

	.aitio-form__row--second {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 28px;
	}

	.aitio-form__field--message {
		margin-bottom: 32px;
	}

	.aitio-form__field label,
	.aitio-form__files-label {
		font-size: 18px;
		line-height: 22px;
	}

	.aitio-consent {
		margin-bottom: 16px;
	}

	.aitio-form__row .aitio-consent__label {
		align-items: flex-start;
	}

	/* ---- founder: portrait and signature sit at the bottom ----------- */
	.aitio-founder {
		padding: 31px 0 0;
	}

	.aitio-founder__panel {
		min-height: 0;
		max-width: none;
		padding: 33px 13px 40px;
	}

	.aitio-founder__text {
		position: relative;
		z-index: 1;
		display: block;
		flex: none;
		max-width: 355px;
	}

	.aitio-founder__title {
		margin-bottom: 31px;
	}

	.aitio-founder__heading {
		max-width: 355px;
		margin-bottom: 42px;
		font-size: 22px;
		line-height: 1.45;
	}

	.aitio-founder__body {
		max-width: 330px;
		font-size: 16px;
		line-height: 24px;
	}

	.aitio-founder__bottom {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		padding-top: 40px;
	}

	.aitio-founder__portrait {
		flex-shrink: 0;
		width: 254px;
		margin: 0;
	}

	.aitio-founder__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 254 / 288;
		object-fit: cover;
		object-position: center top;
	}

	.aitio-founder__sign {
		margin: 0;
		padding: 0 0 24px;
	}

	.aitio-founder__signature img {
		width: 219px;
	}

	.aitio-founder__signer {
		margin: 13px 0 0 24px;
		font-size: 11px;
		line-height: 16px;
	}

	/* ---- footer: static strip and two-column service/contact lists --- */
	.aitio-footer__strip {
		height: auto;
		padding: 28px 20px;
	}

	.aitio-footer__strip-track {
		width: 100%;
		animation: none;
		transform: none;
	}

	.aitio-footer__strip-group {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 20px;
		flex: 0 0 100%;
		width: 100%;
		height: auto;
	}

	.aitio-footer__strip-group:not(:first-child) {
		display: none;
	}

	.aitio-footer__strip-coords,
	.aitio-footer__strip-tag {
		position: static;
		font-size: 14px;
		line-height: 21px;
	}

	.aitio-footer__main {
		display: flex;
		flex-direction: column;
		padding: 48px 16px 48px;
	}

	.aitio-footer__left,
	.aitio-footer__right,
	.aitio-footer__bottom-left {
		display: contents;
	}

	.aitio-footer__years {
		order: 1;
		font-size: 67px;
		line-height: 1;
	}

	.aitio-footer__copyright {
		order: 2;
		margin-bottom: 32px;
	}

	.aitio-footer__left > .aitio-footer__block:not(.aitio-footer__block--language) {
		order: 3;
	}

	.aitio-footer__right > .aitio-footer__block {
		order: 4;
	}

	.aitio-footer__contact {
		order: 5;
	}

	.aitio-footer__social-row {
		order: 6;
	}

	.aitio-footer__block--language {
		order: 7;
	}

	.aitio-footer__logo {
		order: 8;
	}

	.aitio-footer__mark {
		margin-bottom: 16px;
	}

	.aitio-footer__menu {
		gap: 0 14px;
	}

	.aitio-footer__menu-link {
		font-size: 15px;
		line-height: 22px;
	}

	.aitio-footer__block--language {
		margin-top: 28px;
	}

	.aitio-footer__logo {
		margin-top: 24px;
	}

	.aitio-footer__logo img {
		width: 110px;
	}

	.aitio-footer__services {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
		max-width: none;
	}

	.aitio-footer__services li {
		margin-bottom: 0;
		font-size: 16px;
		line-height: 24px;
	}

	.aitio-footer__contact {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-top: 32px;
	}

	.aitio-footer__social-row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		margin-top: 28px;
	}

	.aitio-footer__right .aitio-footer__mark {
		margin-bottom: 16px;
	}

	.aitio-footer__photo {
		margin-top: 0;
	}
}

@media (min-width: 721px) and (max-width: 1024px) {

	.aitio-floating {
		display: none;
	}

	.aitio-work-band__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}

	.aitio-logos__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: none;
	}

	.aitio-team__columns {
		gap: 24px;
	}
}