/* ============================================================
   Arenex Digital — responsive.css

   Rule 4 (00 §5): this file contains ONLY @media blocks. There
   is not a single standalone rule below. Loaded after main.css.
============================================================ */

/* ------------------------------------------------ large screens */

@media (min-width: 1441px) {
	:root {
		--container-padding: 2.5rem;
	}
}

/* ------------------------------------- below 1024 — tablet down */

@media (max-width: 1023px) {
	:root {
		--container-padding: 1.5rem;
		--section-padding: clamp(3.5rem, 9vw, 5.5rem);
	}

	.site-nav__links {
		display: none;
	}

	.site-nav__toggle {
		display: flex;
	}

	.site-nav__panel {
		display: block;
	}

	.site-nav__panel[hidden] {
		display: none;
	}

	.services__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-lg);
	}

	.industries {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.industries__copy {
		margin-left: 0;
		max-width: none;
		padding-inline: var(--container-padding);
	}

	.industries__media {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-inline: var(--container-padding);
	}

	.about__inner,
	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-xl);
	}

	.work-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.process-terminal__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stat-grid__items,
	.results-grid__items,
	.spec-list__grid,
	.design-system__swatches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------- below 768 — mobile down */

@media (max-width: 767px) {
	:root {
		--container-padding: 1rem;
		--section-padding: clamp(3rem, 12vw, 4.5rem);
		--media-frame-height: clamp(320px, 74vw, 460px);
	}

	.site-main section[id] {
		scroll-margin-top: 4.5rem;
	}

	.hero {
		min-height: 0;
		padding-top: var(--gap-xl);
	}

	.hero__wall {
		opacity: 0.2;
	}

	.hero__stats {
		gap: var(--gap-lg);
	}

	.hero__actions .btn,
	.field-cta__actions .btn,
	.case-cta__actions .btn,
	.case-hero__actions .btn {
		flex: 1 1 100%;
	}

	.film-strip__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.film-strip__slide {
		flex-basis: 82vw;
	}

	.gather-cta {
		height: 150vh;
	}

	.gather-cta__words {
		max-width: 18ch;
	}

	.work-index__grid,
	.feature-cards__grid,
	.pillar-grid__items,
	.audit-list__items,
	.speed-comparison__pair,
	.design-system__fonts,
	.process-terminal__steps,
	.stat-grid__items,
	.results-grid__items,
	.spec-list__grid,
	.design-system__swatches,
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mobile-triptych__screens {
		/* Kept horizontal but swipeable — three phones stacked is a very long page. */
		display: flex;
		gap: var(--gap-sm);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.mobile-triptych__phone {
		flex: 0 0 68vw;
		scroll-snap-align: center;
	}

	.testimonials__item {
		flex-basis: 84vw;
	}

	.testimonials__eyebrow-full {
		display: none;
	}

	.testimonials__eyebrow-short {
		display: inline;
	}

	.numbered-steps__step,
	.page-list__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-xs);
	}

	.next-project__link {
		flex-wrap: wrap;
		gap: var(--gap-sm);
	}

	.next-project__media {
		width: 100%;
		margin-left: 0;
	}

	.case-hero {
		min-height: 0;
		padding-top: var(--gap-lg);
	}

	.contact__form {
		padding: var(--gap-md);
	}

	.whatsapp-float {
		right: var(--gap-sm);
		bottom: var(--gap-sm);
	}
}

/* ---------------------------------------- below 480 — small phones */

@media (max-width: 479px) {
	.hero__stats {
		flex-direction: column;
		gap: var(--gap-md);
	}

	.film-strip__slide {
		flex-basis: 88vw;
	}

	.work-index__chip {
		flex: 1 1 auto;
	}
}

/* --------------------------------- WordPress admin bar, mobile */

@media screen and (max-width: 782px) {
	/* Pre-Flight 1.5 — the admin bar is 46px tall below this width. */
	.admin-bar .site-header {
		top: 46px;
	}
}

/* ------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.hero__wall-track,
	.marquee__track,
	.process-terminal__caret {
		animation: none;
	}

	.site-main section {
		opacity: 1;
		transform: none;
	}

	.gather-cta {
		height: auto;
	}

	.gather-cta__sticky {
		position: static;
		height: auto;
		padding-block: var(--section-padding);
	}

	.gather-cta__word {
		color: var(--foreground);
	}
}

/* ---------------------------------------------------------- print */

@media print {
	.site-header,
	.site-nav__panel,
	.whatsapp-float,
	.grain,
	.hero__wall,
	.film-strip__nav,
	.work-index__filters,
	.testimonials__dots,
	.before-after__range,
	.before-after__handle,
	.video-embed__play,
	.next-project {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.site-main {
		padding-top: 0;
	}

	.site-main section {
		opacity: 1;
		transform: none;
		page-break-inside: avoid;
		border: 0;
	}

	.site-frame__viewport,
	.seo-showcase__viewport {
		height: auto;
		max-height: none;
		overflow: visible;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		word-break: break-all;
	}
}

/* ============================================================
   SECTION CORRECTIONS — breakpoints for the re-ported hero,
   film strip and services. Still @media blocks only (Rule 4).
============================================================ */

/* ------------------------------- sm and up (640px) — stats bar */

@media (min-width: 640px) {
	.hero__inner {
		padding-top: 6rem;
		padding-bottom: 13rem;
	}

	.hero__strip-link {
		width: 220px;
	}

	/* The bar becomes a single flex row and the active cell grows. */
	.hero-stats__bar {
		display: flex;
	}

	.hero-stats__item {
		flex-direction: row;
		gap: 0.75rem;
		padding-block: 1.5rem;
		border-top: 0;
		flex-grow: 1;
		flex-basis: 0;
	}

	.hero-stats__item:nth-child(odd) {
		border-left: 1px solid var(--line);
	}

	.hero-stats__item:first-child {
		border-left: 0;
	}

	.hero-stats__item.is-active {
		flex-grow: 2.4;
	}

	.hero-stats__label {
		max-width: 0;
		opacity: 0;
		white-space: nowrap;
		text-align: left;
		font-size: 0.75rem;
	}

	.hero-stats__item.is-active .hero-stats__label {
		max-width: 240px;
		opacity: 1;
	}
}

/* --------------------------------- md and up (768px) — services */

@media (min-width: 768px) {
	.hero-stats {
		padding: 0 2rem 2.25rem;
	}

	.hero-stats__item {
		padding: 1.75rem 1.25rem;
	}

	.hero-stats__label {
		font-size: 0.875rem;
	}

	.hero-stats__item.is-active .hero-stats__value {
		font-size: 1.875rem;
	}

	.services {
		padding: 9rem 2rem 6rem;
	}

	.services__list {
		margin-top: 5rem;
		gap: 7rem;
	}

	.services__item {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 4rem;
	}

	/* The zig-zag itself. */
	.services__media--reverse {
		order: 2;
	}

	.services__ghost-number {
		top: -4rem;
		font-size: 6rem;
	}

	.site-frame--scroll .site-frame__viewport {
		height: 500px;
	}

	.site-frame__live {
		display: block;
	}

	.film-strip {
		padding-block: 8rem;
	}

	.film-strip__inner {
		padding: 5rem 2rem 0;
	}
}

/* ------------------------- lg and up (1024px) — wall + spotlight */

@media (min-width: 1024px) {
	/* The tilted wall needs width it does not have below this. */
	.hero__wall {
		display: block;
	}

	.hero__scrim--right {
		display: block;
	}

	/* Phones get the drifting strip instead; desktop gets the wall. */
	.hero__strip-wrap {
		display: none;
	}

	.film-strip__backdrop-word {
		display: block;
	}

	.film-strip__slide {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3.5rem;
	}

	.film-strip__meta {
		grid-column: span 5 / span 5;
	}

	.film-strip__media {
		grid-column: span 7 / span 7;
	}
}

/* -------------------------- testimonials + process terminal (md+) */

@media (min-width: 768px) {
	.testimonials {
		padding-block: 8rem;
	}

	.testimonials__quotes {
		min-height: 260px;
	}

	.process-terminal {
		padding-block: 9rem;
	}

	.process-terminal__inner {
		padding-inline: 2rem;
	}

	.process-terminal__window {
		padding: 3rem;
	}

	.process-terminal__step {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.process-terminal__step-head {
		grid-column: span 4 / span 4;
	}

	.process-terminal__step-body {
		grid-column: span 8 / span 8;
		font-size: 1rem;
	}
}

/* ------------------------- hero / industries / gather (md+, lg+) */

@media (min-width: 768px) {
	.hero__inner {
		padding-inline: 2rem;
	}

	.industries__copy {
		padding: 7rem 2rem;
	}

	.industries__body {
		font-size: 1rem;
	}

	.industries__stat-value {
		font-size: 1.875rem;
	}

	.industries__stat-label {
		font-size: 0.875rem;
	}

	.industries__media-inner {
		padding: 2rem;
	}

	.gather-cta__sticky {
		padding-inline: 2rem;
	}

	.review-card--compact {
		padding: 1.25rem;
	}
}

@media (min-width: 1024px) {
	/* Two halves of the viewport, full height. */
	.industries {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 100dvh;
	}

	/*
	 * Asymmetric on purpose: the left padding lines the copy up with the site
	 * container edge even though the column is only half the viewport.
	 */
	.industries__copy {
		padding: 6rem 4rem 6rem max(2rem, calc((100vw - 1400px) / 2));
	}

	.industries__media-inner {
		padding: 2.5rem;
	}
}

/* ------------------------------------------- field CTA (md+, lg+) */

@media (min-width: 768px) {
	.field-cta__inner {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {
	/* Heading left, body + buttons right and right-aligned, both bottom-aligned. */
	.field-cta__inner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4rem;
	}

	.field-cta__aside {
		align-items: flex-end;
		text-align: right;
	}

	.field-cta__actions {
		justify-content: flex-end;
	}
}

@media (min-width: 768px) {
	.contact {
		padding-block: 8rem;
	}
}

/* ------------------------------------ work archive: two-up from md */

@media (min-width: 768px) {
	.work-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

/* --------------------------------- nav brand + CTA on small screens */

@media (max-width: 639px) {
	/* Swap the lockup for the icon so the row has room. */
	.site-nav__logo,
	.site-nav__wordmark {
		display: none;
	}

	.site-nav__mark {
		display: block;
	}

	/*
	 * The source hides this CTA below 640px — the hamburger panel carries
	 * its own full-width one, so nothing is lost and the row stops fighting
	 * for space.
	 */
	.site-nav__cta {
		display: none;
	}
}

/* -------------------------------- mobile: close the hero top gap */

@media (max-width: 767px) {
	/*
	 * The hero carried 5rem of top padding on top of the 4rem fixed header,
	 * leaving a dead band above the headline on phones. The header already
	 * provides the clearance via .site-main's padding-top.
	 */
	.hero {
		padding-top: 0;
	}

	.hero__inner {
		padding-top: 1.5rem;
		padding-bottom: 15rem;
	}

	.case-hero {
		min-height: 0;
	}

	.case-hero__inner {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.case-study__body > section {
		padding-block: 1.25rem;
	}
}

/* ------------------------------- stat grid: four across from md */

@media (min-width: 768px) {
	.stat-grid__items,
	.results-grid__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* With one row, only the vertical rules apply. */
	.stat-grid__item,
	.results-grid__item {
		border-top: 0;
		border-left: 1px solid var(--line);
	}

	.stat-grid__item:first-child,
	.results-grid__item:first-child {
		border-left: 0;
	}

	.stat-grid__item:nth-child(odd),
	.results-grid__item:nth-child(odd) {
		border-left: 1px solid var(--line);
	}

	.stat-grid__item:first-child {
		border-left: 0;
	}

	.stat-grid__value,
	.results-grid__value {
		font-size: 1.875rem;
	}

	.stat-grid__label,
	.results-grid__label {
		font-size: 0.875rem;
	}
}

/*
 * The scroll-capture / before-after pair is NOT done here any more.
 *
 * The source is ONE section: a full-width header followed by a two-column
 * media grid. Gluing two sibling Flexible Content layouts into columns with
 * :has() put the header inside a half-width cell, and making it span requires
 * explicit grid-row placement that breaks the moment a section is added or
 * reordered — which is the whole point of the library.
 *
 * The correct fix is a single `screenshots` layout holding the capture and the
 * pairs together. Left stacked and full-width until that exists.
 */

/* ----------------- stat + results rails: four across, and the pair nav */

@media (min-width: 768px) {
	.case-study__body .stat-grid__items,
	.case-study__body .results-grid__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.next-project__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--gap-xl);
	}

	.next-project__link + .next-project__link {
		border-top: 0;
		border-left: 1px solid var(--line);
		padding-left: var(--gap-xl);
	}
}

@media (min-width: 768px) {
	.case-cta {
		padding-block: 7rem;
	}
}

@media (min-width: 768px) {
	/* Divider sits centre-screen; each half carries its own gutter. */
	.next-project__inner {
		column-gap: 0;
	}

	.next-project__link + .next-project__link {
		padding-left: var(--container-padding);
	}
}

/* --------------------------------- mobile triptych: two columns at lg */

@media (min-width: 768px) {
	.mobile-triptych__screens {
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.mobile-triptych__inner {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

@media (max-width: 767px) {
	/* Keep all three visible side by side rather than reflowing to a swipe. */
	.mobile-triptych__screens {
		display: flex;
		overflow-x: visible;
	}

	.mobile-triptych__phone {
		flex: 0 1 33.3333%;
	}
}

/* ------------------- paired section: two media columns from lg */

@media (min-width: 1024px) {
	.case-pair__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3.5rem;
		align-items: start;
	}

	/* Flatten the wrappers so header and figure become pair-grid items. */
	.case-pair__inner > .screenshot-scroll,
	.case-pair__inner > .screenshot-scroll > .screenshot-scroll__inner,
	.case-pair__inner > .before-after-section,
	.case-pair__inner > .before-after-section > .before-after-section__inner {
		display: contents;
	}

	/* Header across both columns; the two frames share row two. */
	.case-pair .screenshot-scroll__head,
	.case-pair .before-after-section__head {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.before-after__stage {
		height: 420px;
	}
}

/* ------------------------ spec-list / checklist: source breakpoints */

@media (min-width: 640px) {
	.spec-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.spec-list__item {
		padding: 1.5rem;
	}
}

@media (min-width: 768px) {
	.numbered-steps--cards .numbered-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.numbered-steps--cards .numbered-steps__step {
		padding: 2rem;
	}
}

/* -------------------------- spec-list + checklist breakpoints */

@media (min-width: 640px) {
	.spec-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.spec-list__item {
		padding: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.checklist__inner {
		grid-template-columns: 0.95fr 1.05fr;
	}
}