/* ==========================================================================
   Responsive layouts
   1366/1280 desktop Â· 1100 small desktop Â· 1023 tablet landscape (mobile nav)
   900 tablet portrait Â· 640 large phone Â· 420 small phone (390/375/360)
   ========================================================================== */

/* ---------- â‰¤1279: compact desktop ---------- */
@media (max-width: 1279px) {
	.domain-card {
		padding-inline: 22px;
	}

	.pivot-point {
		padding: 28px;
	}

	.about__grid {
		column-gap: 40px;
	}

	.about__media {
		padding-left: 0;
	}

	.cta__content {
		max-width: min(680px, calc(100% - 480px));
	}
}

/* ---------- â‰¤1100: domains aside moves above the cards ---------- */
@media (max-width: 1100px) {
	.domains__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.domains__aside {
		order: -1;
		align-items: flex-start;
		padding-bottom: 0;
		text-align: left;
	}

	.domains__heading .section-heading__title br {
		display: none;
	}

	.voice-card {
		padding: 24px 24px 26px;
	}
}

/* ---------- â‰¤1023: tablet â€” mobile navigation ---------- */
@media (max-width: 1023px) {
	:root {
		--header-h: 72px;
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
	}

	.site-header__brand {
		position: relative;
		z-index: 2;
	}

	.nav-toggle {
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: var(--r-sm);
		background: transparent;
		color: var(--c-ink);
	}

	.nav-toggle__bars {
		display: grid;
		gap: 5px;
		width: 22px;
	}

	.nav-toggle__bars span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
		opacity: 0;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: min(360px, 86vw);
		padding: calc(var(--header-h) + var(--admin-bar) + 16px) 28px 32px;
		background: var(--c-white);
		box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
		overflow-y: auto;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.4s var(--ease), visibility 0.4s;
	}

	.nav-open .site-nav {
		visibility: visible;
		transform: none;
	}

	.site-nav__menu {
		display: block;
	}

	.site-nav__menu a {
		padding: 14px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		font-size: 1.25rem;
	}

	.site-nav__menu > li > a::after {
		display: none;
	}

	.site-nav__menu .current-menu-item > a {
		color: var(--c-green);
		font-weight: 700;
	}

	.site-nav__menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: inherit;
		transform: none;
	}

	.site-nav__menu .sub-menu a {
		font-size: 1.0625rem;
	}

	.nav-overlay {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: block;
		background: rgba(25, 25, 25, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--ease), visibility 0.4s;
	}

	.nav-open .nav-overlay {
		opacity: 1;
		visibility: visible;
	}

	html.nav-open,
	html.nav-open body {
		overflow: hidden;
	}

	.site-header__brand img {
		height: 40px;
	}

	.fronts__track,
	.testimonials__track {
		--per-view: 2;
		--gap: 24px;
	}

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

	.single-post__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.single-post__sidebar {
		max-width: 640px;
	}

	.cta__media {
		width: 420px;
	}

	.cta__image {
		height: 496px;
	}

	.cta__content {
		max-width: calc(100% - 400px);
	}

	.cta__text br {
		display: none;
	}
}

/* ---------- â‰¤900: tablet portrait â€” stacked two-column sections ---------- */
@media (max-width: 900px) {
	.section {
		padding-block: 72px;
	}

	.hero__slide {
		min-height: 540px;
	}

	.hero__media::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.05) 100%);
	}

	.hero__image {
		object-position: 72% center;
	}

	.hero__content {
		padding-block: 88px 80px;
	}

	.hero__list {
		padding-left: 26px;
	}

	.about__grid,
	.career__grid,
	.pivot__grid,
	.contact-form-section__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about__grid {
		row-gap: 40px;
	}

	.about__media {
		padding-left: 0;
	}

	.about__image {
		max-width: 100%;
		aspect-ratio: 4 / 3.4;
		object-position: center 20%;
	}

	.about__content {
		max-width: none;
	}

	.career {
		padding-top: 0;
	}

	.career__heading,
	.career__intro,
	.career__accordion,
	.career__media {
		grid-column: 1;
		grid-row: auto;
	}

	.career__intro {
		max-width: none;
		margin-top: 14px;
	}

	.career__accordion {
		margin-top: 32px;
	}

	.career__media {
		margin-top: 32px;
	}

	.domains {
		padding-block: 80px;
	}

	.pivot__grid {
		row-gap: 40px;
	}

	.pivot__heading .section-heading__text {
		max-width: none;
	}

	.pivot__media {
		margin-top: 32px;
	}

	.pivot__image {
		aspect-ratio: 4 / 4.2;
		object-position: center 30%;
	}

	.pivot__points {
		gap: 20px;
		padding-top: 0;
	}

	.pivot-point {
		min-height: 0;
	}

	.voice > .container {
		padding-top: 72px;
	}

	.voice__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 48px;
	}

	.voice__col--left,
	.voice__col--right {
		display: contents;
	}

	.voice__col--center {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	.voice-card {
		min-height: 0;
		border-radius: var(--r-md);
	}

	.voice-card--center {
		text-align: left;
	}

	.voice__media {
		min-height: 220px;
	}

	.fronts {
		padding-block: 64px 40px;
	}

	.fronts__carousel {
		margin-top: 48px;
	}

	.carousel-controls {
		margin-top: 40px;
	}

	.insights {
		padding-block: 72px;
	}

	.insights__grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	.testimonials {
		padding-block: 80px 96px;
	}

	.cta {
		padding-top: 72px;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
		padding-block: 56px 72px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

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

	.site-footer__bar-inner {
		padding-inline: 0;
	}

	.contact-form-section__image {
		aspect-ratio: 16 / 11;
	}

	.contact-form-section__grid {
		row-gap: 40px;
	}
}

/* ---------- â‰¤700: CTA stacks, portrait sits under the text ---------- */
@media (max-width: 700px) {
	.cta__inner {
		flex-direction: column;
		min-height: 0;
	}

	.cta__content {
		max-width: none;
		padding-block: 56px 0;
	}

	.cta__content .btn {
		margin-top: 28px;
	}

	.cta__media {
		position: relative;
		right: auto;
		align-self: center;
		width: min(340px, 86%);
		margin-top: 24px;
	}

	.cta__image {
		height: auto;
		aspect-ratio: 523 / 560;
		object-position: center top;
	}
}

/* ---------- â‰¤640: phones ---------- */
@media (max-width: 640px) {
	.section {
		padding-block: 56px;
	}

	.section-heading__text {
		font-size: 1.0625rem;
	}

	.hero__slide {
		align-items: flex-end;
		min-height: min(720px, calc(100svh - var(--header-h)));
	}

	.hero__media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 0, 0.78) 100%);
	}

	.hero__image {
		object-position: 80% top;
	}

	.hero__content {
		padding-block: 220px 64px;
	}

	.hero__text {
		margin-top: 16px;
	}

	.hero__list {
		margin-top: 18px;
	}

	.hero__controls {
		bottom: 14px;
	}

	.about__text {
		font-size: 1.0625rem;
	}

	.about__text p + p {
		margin-top: 18px;
	}

	.accordion__trigger {
		gap: 12px;
		min-height: 64px;
		padding: 14px 16px 14px 14px;
	}

	.accordion__label {
		font-size: 1.125rem;
	}

	.accordion__panel-inner > * {
		margin: -4px 20px 24px 46px;
	}

	.career__intro {
		font-size: 1.0625rem;
	}

	.domains {
		padding-block: 64px;
	}

	.domains__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.domain-card {
		min-height: 0;
		padding: 26px 22px 30px;
	}

	.domains__logo {
		width: 140px;
		margin-bottom: 20px;
	}

	.pivot-point {
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		padding: 22px 20px;
	}

	.pivot-point__number {
		width: 40px;
		height: 40px;
		font-size: 1.25rem;
	}

	.pivot-point__text {
		font-size: 1.0625rem;
	}

	.voice > .container {
		padding-top: 56px;
	}

	.voice__grid,
	.voice__col--center {
		grid-template-columns: minmax(0, 1fr);
	}

	.voice__heading .section-heading__text {
		font-size: 1.0625rem;
	}

	.voice-card__text,
	.card__text {
		font-size: 1rem;
	}

	.fronts__track,
	.testimonials__track {
		--per-view: 1.12;
		--gap: 16px;
	}

	.card {
		min-height: 0;
		padding: 16px;
	}

	.post-card--row {
		flex-direction: column;
		min-height: 0;
	}

	.post-card--row .post-card__media {
		flex-basis: auto;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
	}

	.post-card--row .post-card__media img {
		aspect-ratio: 538 / 298;
		object-position: center 25%;
	}

	.post-card--row .post-card__body {
		border-left: 0.5px solid var(--c-line);
		border-top: 0;
		border-radius: 0 0 var(--r-lg) var(--r-lg);
	}

	.post-card--feature .post-card__body,
	.post-card--row .post-card__body {
		min-height: 0;
		padding: 20px 20px 22px;
	}

	.post-card__subtitle {
		font-size: 1.0625rem;
	}

	.post-card__btn {
		margin-top: 16px;
	}

	.testimonials {
		padding-block: 64px 72px;
	}

	.testimonial {
		min-height: 0;
	}

	.testimonial__quote {
		margin-top: 28px;
		font-size: 1.0625rem;
	}

	.cta__text {
		font-size: 1.125rem;
	}

	.btn--dark {
		min-height: 54px;
		padding-inline: 32px;
		font-size: 1.25rem;
	}

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

	.site-footer__text {
		font-size: 1.0625rem;
	}

	.site-footer__logo img {
		width: 170px;
	}

	.site-footer__bar-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.page-banner {
		padding-top: 72px;
	}

	.page-banner--image {
		min-height: 260px;
	}

	.archive-page__header,
	.single-post__header {
		padding-block: 72px 40px;
	}

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

	.post-nav {
		flex-direction: column;
	}

	.post-nav__link--next {
		align-self: flex-end;
	}

	.contact-form {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 28px;
	}

	.contact-form__submit {
		width: 100%;
	}

	.contact-cards {
		padding-block: 56px;
	}

	.contact-cards__list {
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.quote-banner {
		min-height: 260px;
	}
}

/* ---------- â‰¤420: small phones (390 / 375 / 360) ---------- */
@media (max-width: 420px) {
	.hero__content {
		padding-top: 180px;
	}

	.hero__title {
		font-size: 2rem;
	}

	.hero__text,
	.hero__list {
		font-size: 1.0625rem;
	}

	.domain-card__label {
		font-size: 1.125rem;
		letter-spacing: 0.02em;
	}

	.pivot-point {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}

	.btn--dark {
		width: 100%;
	}
}

/* ---------- Large screens: keep the hero from growing too tall ---------- */
@media (min-width: 1680px) {
	.hero__slide {
		min-height: 680px;
	}
}
