/* Breakpoints follow the layout, not device names. The navigation collapses at
   1024px because the mega menu needs the width; grids step down before that. */

@media (max-width: 1280px) {
	:root { --shell: 1120px; }
	.hero__inner { gap: 44px; }
}

@media (max-width: 1024px) {
	/* --- Mobile / tablet navigation: full-screen panel + clean accordion --- */
	.nav {
		position: fixed;
		inset: 0;
		padding: 90px var(--gutter) 48px;
		background: var(--ink);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { position: static; border-bottom: 1px solid var(--line); }
	.nav__item:first-child { border-top: 1px solid var(--line); }

	.nav__link {
		display: flex;
		align-items: center;
		padding: 17px 4px;
		font-size: var(--step-1);
		font-family: var(--font-display);
		font-weight: 600;
		color: var(--text);
		border-radius: 0;
	}

	/* Parent row: label on the left, expander on the right. */
	.nav__item--mega { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.nav__item--mega > .nav__link { grid-column: 1; }

	.nav__toggle {
		grid-column: 2;
		display: grid; place-items: center;
		width: 46px; height: 46px;
		background: none; border: 0; cursor: pointer;
		color: var(--muted);
	}
	.nav__chevron {
		width: 9px; height: 9px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .3s var(--ease);
	}
	.nav__item.is-open > .nav__toggle { color: var(--accent-2); }
	.nav__item.is-open .nav__chevron { transform: rotate(-135deg) translate(-1px, -1px); }
	.nav__caret { display: none; }

	/* The panel becomes an in-flow accordion that slides open. */
	.mega {
		grid-column: 1 / -1;
		position: static;
		width: auto;
		padding-top: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s var(--ease);
	}
	.mega::before { display: none; }
	.nav__item--mega:hover > .mega,
	.nav__item--mega.is-open > .mega { transform: none; }
	.nav__item.is-open > .mega { max-height: 1600px; }

	.mega__inner { position: static; background: none; border: 0; box-shadow: none; padding: 2px 0 20px; }
	.mega__inner::before, .mega__inner::after { display: none; }

	/* One column, indented under the parent with a guide line. */
	.mega__columns { grid-template-columns: 1fr; gap: 18px; padding-left: 14px; border-left: 2px solid var(--line); }
	.mega__column + .mega__column::before { display: none; }
	.mega__heading { margin-bottom: 6px; }

	/* Links align as icon · title · arrow, whether or not an icon is present. */
	.mega__anchor {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-inline: 0;
		padding: 11px 6px;
		border-radius: 10px;
	}
	.mega__anchor::before { display: none; }
	.mega__anchorTitle { flex: 1; }
	.nav .mega__go { opacity: .5; transform: none; }
	.nav .mega__anchor:hover .mega__go { opacity: 1; }

	.mega__foot { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
	.mega__foot .btn { justify-content: center; }

	.menu-toggle { display: grid; place-items: center; }

	.hero__inner,
	.industries,
	.article,
	.cta__inner,
	.contact-grid,
	.faq-layout,
	.split,
	.servicehero,
	.site-footer__top { grid-template-columns: 1fr; }

	.faq-layout__intro { position: static; }
	.hero__panel { min-height: 340px; }
	.site-footer__column--wide { grid-column: span 1; }

	.cta__actions { justify-content: flex-start; }
	.toc { position: static; }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.section__head { grid-template-columns: 1fr; align-items: start; }
	.cursor { display: none; }
}

/* On tablets there is room to lay the open submenu out in two columns. */
@media (min-width: 620px) and (max-width: 1024px) {
	.mega__columns { grid-template-columns: 1fr 1fr; gap: 18px 26px; }
}

@media (max-width: 860px) {
	.grid--3, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.grid--2, .grid--3, .grid--4, .quotes { grid-template-columns: 1fr; }
	.form__row { grid-template-columns: 1fr; }
	.hero { padding-top: 120px; }
	.hero__stats { grid-template-columns: 1fr; text-align: left; }
	.process__step { grid-template-columns: 1fr; gap: 8px; }
	.site-header__actions .btn--primary { display: none; }
	.marquee__track { animation-duration: 26s; }
	.hero__viz { max-height: 320px; }
	.faq__item { padding-inline: 16px; }
	.ambient__grid { background-size: 54px 54px; }

	/* Parallax and the cell field cost more than they add on small screens. */
	[data-parallax] { transform: none !important; }
	.hero__field { display: none; }
}

@media (max-width: 400px) {
	.site-footer__columns { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile behaviour: collapsible footer, swipeable card rails, safer text
   ========================================================================== */

@media (max-width: 860px) {
	/* ------------------------------------------------ footer accordion */
	.site-footer__columns { grid-template-columns: 1fr; gap: 0; }

	.site-footer__column { border-bottom: 1px solid var(--line); }
	.site-footer__column--wide { grid-column: span 1; }

	.site-footer__heading { margin: 0; }

	.site-footer__toggle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 0;
		background: none;
		border: 0;
		color: var(--muted);
		font: inherit;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}

	.site-footer__sign { display: block; position: relative; width: 16px; height: 16px; flex: none; }
	.site-footer__sign::before,
	.site-footer__sign::after {
		content: "";
		position: absolute;
		inset: 50% 0 auto;
		height: 1.5px;
		background: var(--accent-2);
		transition: transform .3s var(--ease);
	}
	.site-footer__sign::after { transform: rotate(90deg); }
	.site-footer__column.is-open .site-footer__sign::after { transform: rotate(0); }
	.site-footer__column.is-open .site-footer__toggle { color: var(--text); }

	/* The panel is closed by default and opens on tap. */
	.site-footer__list,
	.site-footer__column .contact-list {
		display: none;
		padding-bottom: 22px;
	}
	.site-footer__column.is-open .site-footer__list,
	.site-footer__column.is-open .contact-list { display: grid; }

	/* --------------------------------------------- swipeable card rails */
	.grid.is-slider {
		display: grid;
		/* The grid's own column template would still size the first few items,
		   squeezing them; clearing it lets every card take a full view. */
		grid-template-columns: none;
		grid-auto-flow: column;
		/* One card per view; the dots below carry the "there is more" signal. */
		grid-auto-columns: 100%;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		/* Bleed to the screen edges so the rail feels native. */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.grid.is-slider::-webkit-scrollbar { display: none; }
	.grid.is-slider > * { scroll-snap-align: start; }
}

@media (max-width: 620px) {
	/* Long unbroken strings (emails, URLs) should wrap rather than overflow. */
	body { overflow-wrap: break-word; }

	.shell { padding-inline: 20px; }
	.page-head__title, .hero__title { max-width: none; }
	.hero__actions .btn { flex: 1 1 auto; justify-content: center; }

	.contact-line__value { font-size: 13px; }
	.contact-badges { gap: 8px; }
	.social-row { flex-wrap: wrap; }

	.form { padding: 20px; }
	.form__title { font-size: var(--step-1); }

	.faq__question { font-size: var(--step--1); gap: 14px; }

	.mega { width: 100%; padding-top: 0; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
	.site-footer__legal { gap: 14px; }

	.pagination .page-numbers { min-width: 38px; height: 38px; }

	/* Tables and code blocks scroll instead of pushing the layout wide. */
	.article__body table { display: block; overflow-x: auto; }
}

@media (max-width: 380px) {
	.brand__name { font-size: 15px; }
}

/* ==========================================================================
   Mobile polish pass — sizing, touch targets and the visuals
   ========================================================================== */

@media (max-width: 860px) {
	/* Cards in a rail should match height so the row does not look ragged. */
	.grid.is-slider > .card { height: 100%; }
	.grid.is-slider { align-items: stretch; }

	/* The reveal transition fights the horizontal scroll; skip it in a rail. */
	.grid.is-slider > [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
	/* Stack the visual under the copy, at a size that still reads well. */
	.hero__panel { order: 2; margin-top: 10px; }
	.hero__viz { max-height: 320px; margin-top: 0; }
	.vizframe__canvas { aspect-ratio: 1 / .7; }
}

@media (max-width: 620px) {
	.hero { padding-top: 104px; padding-bottom: 44px; }
	.hero__viz { max-height: 260px; }
	.hero__tags { gap: 6px; }
	.hero__tag { font-size: 10px; padding: 6px 10px; }

	.vizframe { padding: 16px; }
	.vizframe__canvas { aspect-ratio: 1 / .8; }
	.vizframe__legend { font-size: 10px; }

	.split__copy .article__body { font-size: var(--step-0); }
	.ticklist li { padding-left: 26px; }

	/* Give every tap target a comfortable height. */
	.btn { padding: 13px 20px; }
	.social { width: 44px; height: 44px; }
	.faq__question { min-height: 56px; }

	.section__head { gap: 14px; }
	.insight__facts { grid-template-columns: 1fr; gap: 14px; }
	.article__aside .toc { position: static; }
	.article { gap: 26px; }
}

@media (max-width: 480px) {
	.hero__actions { width: 100%; }
	.hero__actions .btn { width: 100%; }
	.contact-badges .social-row { width: 100%; }
	.form__head { margin-bottom: 2px; }
}

/* -------------------------------------------------- carousel indicator */
.rail-nav { display: none; }

@media (max-width: 860px) {
	.rail-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 18px;
	}

	.rail-nav__dots { display: flex; align-items: center; gap: 8px; }

	.rail-nav__dot {
		width: 7px; height: 7px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--line-strong);
		cursor: pointer;
		transition: width .3s var(--ease), background .3s var(--ease);
	}
	.rail-nav__dot.is-current { width: 24px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

	.rail-nav__count {
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: .1em;
		color: var(--muted);
	}
}