/* ==========================================================================
   ACE - Responsive overrides (enqueued last)
   Breakpoints: <=640 mobile, 641-1024 tablet, >=1025 desktop, >=1441 wide
   ========================================================================== */

/* Wide ------------------------------------------------------------------- */
@media (min-width: 1441px) {
	:root {
		--header-h: 92px;
	}

	.hero__title {
		max-width: 14ch;
	}
}

/* Below desktop ---------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--header-h: 72px;
	}

	.header__nav,
	.header__cta {
		display: none;
	}

	.burger {
		display: inline-flex;
	}

	.header.is-scrolled {
		height: var(--header-h);
	}

	/* Hero */
	.hero__monogram {
		font-size: clamp(9rem, 30vw, 16rem);
		top: auto;
		bottom: 18%;
		opacity: 0.5;
	}

	/* Statement / overview */
	.statement__grid,
	.service-overview__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.statement__label {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.statement__body,
	.service-overview__prose {
		margin-right: 0;
	}

	/* Process: un-stick and stack */
	.process__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.process__sticky {
		position: static;
	}

	.process__nav {
		display: none;
	}

	.process__step {
		min-height: auto;
	}

	/* Services list */
	.services-list__row {
		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	}

	.services-list__tags {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		text-align: left;
	}

	.services-list__arrow {
		grid-column: 3;
		grid-row: 1;
	}

	/* Team */
	.team-card--row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--space-5);
	}

	.team-card--row:nth-child(even) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	/* Grids */
	.insights__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps-strip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps-strip__item:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

	.principles__grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.contact__grid {
		grid-template-columns: 1fr;
	}

	/* CTA */
	.cta__panel {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	/* Footer */
	.footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer__brand {
		grid-column: 1 / -1;
	}

	/* Section head */
	.section-head--split {
		grid-template-columns: 1fr;
	}
}

/* Tablet only ------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 1024px) {
	.slider__track {
		grid-auto-columns: max(280px, calc((100% - var(--gutter)) / 1.6));
	}
}

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--header-h: 64px;
		--fs-body: 1rem;
	}

	.wordmark__mark {
		font-size: 1.6rem;
	}

	.wordmark__tag {
		font-size: 0.4375rem;
	}

	.section-head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.section-head__aside {
		justify-content: flex-start;
	}

	.slider__controls {
		display: none;
	}

	/* Hero */
	.hero {
		min-height: 100svh;
	}

	.hero__monogram {
		font-size: 46vw;
		bottom: 30%;
		opacity: 0.35;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.hero__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero__services {
		flex-direction: column;
		gap: var(--space-2);
	}

	.hero__scroll {
		display: none;
	}

	/* Statement */
	.statement__facts {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	/* Slider */
	.slider__track {
		grid-auto-columns: 84vw;
	}

	/* Process */
	.process__step {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	/* Services list */
	.services-list__row {
		grid-template-columns: minmax(0, 1fr) 2.75rem;
		gap: var(--space-3);
	}

	.services-list__num {
		grid-column: 1 / -1;
	}

	.services-list__main {
		grid-column: 1;
	}

	.services-list__tags {
		grid-column: 1;
		grid-row: auto;
		white-space: normal;
	}

	.services-list__arrow {
		grid-column: 2;
		grid-row: 2;
		width: 2.75rem;
		height: 2.75rem;
	}

	/* Team */
	.team__grid {
		grid-template-columns: 1fr;
	}

	.team-card--row,
	.team-card--row:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.team-card--row:nth-child(even) .team-card__media {
		order: 0;
	}

	/* Pillars */
	.pillars__grid {
		grid-template-columns: 1fr;
	}

	.pillar,
	.pillar + .pillar {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-bottom: var(--hairline-inverse);
	}

	/* Deliverables, steps, offices */
	.deliverables__grid,
	.steps-strip__list,
	.offices__grid {
		grid-template-columns: 1fr;
	}

	.deliverable:nth-child(even),
	.steps-strip__item + .steps-strip__item,
	.office + .office {
		padding-left: 0;
		border-left: 0;
	}

	.office {
		border-bottom: var(--hairline);
	}

	/* Insights */
	.insights__grid {
		grid-template-columns: 1fr;
	}

	/* Contact */
	.contact__direct li {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}

	/* CTA */
	.cta__panel {
		grid-template-columns: 1fr;
	}

	.cta__media {
		aspect-ratio: 16 / 10;
		order: -1;
	}

	.cta .btn {
		width: 100%;
	}

	/* Footer */
	.footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.footer__col:last-child {
		grid-column: 1 / -1;
	}

	.footer__bottom,
	.footer__fine {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.footer__legal {
		margin-inline: 0;
	}

	.footer__top-link,
	.footer__legal + .footer__top-link {
		margin-left: 0;
	}

	.btn-group .btn {
		flex: 1 1 auto;
	}
}

/* Admin bar offset ------------------------------------------------------- */
.admin-bar .header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .header {
		top: 0;
	}

	.admin-bar .header.is-scrolled {
		top: 0;
	}
}
