/*
 * Stone Cliff Digital — About Us
 * Page-specific layout/decoration only. Colors, type, spacing, radii, and
 * motion all come from tokens.css; surfaces/typography/eyebrow/CTA/timeline/
 * FAQ come from components.css and their shared component stylesheets.
 * Loaded only on page-about-us.php.
 */

.au-main {
	overflow-x: hidden;
}

.au-section {
	position: relative;
	overflow: hidden;
}

.au-section__inner {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

.au-hero {
	background: linear-gradient(170deg, var(--sc-ink) 0%, #14171C 45%, #171B22 100%);
	padding: 104px 0 120px;
	min-height: 860px;
}

.au-hero__glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.au-hero__glow--top {
	left: -220px;
	top: -260px;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle, var(--sc-blue-light) 0%, transparent 70%);
	opacity: 0.08;
}

.au-hero__glow--bottom {
	right: -180px;
	bottom: -260px;
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.22;
	mix-blend-mode: screen;
}

.au-hero__art {
	position: absolute;
	right: 4%;
	bottom: 20px;
	width: 46%;
	max-width: 650px;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	z-index: 1;
}

.au-hero__art-glow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 92%;
	height: 92%;
	background: radial-gradient(ellipse 62% 62% at 55% 60%, var(--sc-blue) 0%, transparent 72%);
	opacity: 0.33;
	mix-blend-mode: screen;
}

.au-hero__art img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
	filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.5));
}

.au-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 60px;
}

.au-hero__breadcrumb-current {
	font-family: var(--sc-font-mono);
	font-size: 11.5px;
	color: var(--sc-slate-300);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.au-hero__breadcrumb-current--accent {
	color: var(--sc-blue-light);
}

.au-hero__breadcrumb-sep {
	color: var(--sc-slate-700);
	font-size: 11.5px;
}

.au-hero__content {
	max-width: 720px;
	position: relative;
	z-index: 2;
}

.au-hero__content .c-eyebrow {
	margin-bottom: 28px;
}

.au-hero__title {
	font-family: var(--sc-font-heading);
	font-size: 60px;
	line-height: 1.12;
	letter-spacing: -1.9px;
	font-weight: 800;
	color: var(--sc-text-ondark);
	margin: 0 0 34px;
	max-width: 700px;
}

.au-hero__lede {
	font-size: 17px;
	line-height: 1.75;
	color: var(--sc-text-ondark-mute);
	margin: 0 0 40px;
	max-width: 520px;
}

.au-hero__actions {
	display: flex;
	gap: 28px;
	align-items: center;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------- */
/* Who We Are (relationship)                                            */
/* -------------------------------------------------------------------- */

.au-relationship {
	padding-block: var(--sc-section-padding-max);
}

.au-relationship__bg {
	position: absolute;
	right: -200px;
	top: -200px;
	width: 1300px;
	max-width: none;
	opacity: 0.6;
	filter: saturate(0.7) brightness(1.08) contrast(0.95) hue-rotate(18deg) saturate(1.3);
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 800px 500px at 80% 0%, black 55%, transparent 95%);
	mask-image: radial-gradient(ellipse 800px 500px at 80% 0%, black 55%, transparent 95%);
}

.au-relationship__heading {
	margin: 0 0 60px;
	line-height: 1.2;
	max-width: 820px;
}

.au-relationship__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
}

.au-relationship__copy p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--sc-text-onlight-mute);
	margin: 0 0 26px;
}

.au-relationship__copy p:last-child {
	margin-bottom: 0;
}

.au-relationship__list {
	display: flex;
	flex-direction: column;
}

.au-relationship__item {
	padding: 24px 0;
	border-top: 1px solid var(--sc-slate-200);
}

.au-relationship__item--last {
	border-bottom: 1px solid var(--sc-slate-200);
}

.au-relationship__item h3 {
	font-family: var(--sc-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--sc-text-onlight);
	margin: 0 0 8px;
}

.au-relationship__item p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sc-text-onlight-mute);
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* What Guides the Work (principles)                                    */
/* -------------------------------------------------------------------- */

.au-principles {
	padding: var(--sc-section-padding-max) 0 140px;
}

.au-principles__glow {
	position: absolute;
	left: -260px;
	top: -220px;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 68%);
	opacity: 0.14;
	mix-blend-mode: screen;
	pointer-events: none;
}

.au-principles__heading {
	margin: 0 0 70px;
	max-width: 700px;
}

.au-principles__row {
	display: flex;
	gap: 56px;
	align-items: stretch;
}

.au-principles__feature {
	flex-shrink: 0;
	width: 520px;
	min-height: 320px;
	background: linear-gradient(150deg, #131619 0%, #161A22 60%, #12151C 100%);
	border-radius: var(--sc-radius-2xl);
	padding: 48px 44px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(108, 134, 255, 0.14), 0 40px 90px -40px rgba(0, 0, 0, 0.5);
}

.au-principles__feature::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -90px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.16;
	pointer-events: none;
}

.au-principles__eyebrow {
	font-family: var(--sc-font-mono);
	font-size: 11.5px;
	letter-spacing: 1.6px;
	color: var(--sc-blue-light);
	text-transform: uppercase;
	margin-bottom: 16px;
	display: block;
	position: relative;
}

.au-principles__feature h3 {
	font-family: var(--sc-font-heading);
	font-size: 27px;
	font-weight: 700;
	color: var(--sc-text-ondark);
	margin: 0 0 16px;
	letter-spacing: -0.5px;
	position: relative;
}

.au-principles__feature p {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--sc-text-ondark-mute);
	margin: 0;
	position: relative;
	max-width: 400px;
}

.au-principles__list {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.au-principles__item {
	display: flex;
	align-items: baseline;
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid var(--sc-slate-700);
}

.au-principles__item--last {
	border-bottom: 1px solid var(--sc-slate-700);
}

.au-principles__num {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	color: var(--sc-blue-light);
	width: 26px;
	flex-shrink: 0;
}

.au-principles__item h3 {
	font-family: var(--sc-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--sc-text-ondark);
	margin: 0 0 8px;
}

.au-principles__item p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sc-text-ondark-mute);
	margin: 0;
	max-width: 520px;
}

/* -------------------------------------------------------------------- */
/* One Connected Digital Partner (lifecycle)                            */
/* -------------------------------------------------------------------- */

.au-lifecycle {
	padding: var(--sc-section-padding-max) 0 140px;
}

.au-lifecycle__glow {
	position: absolute;
	right: -180px;
	bottom: -200px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.07;
	pointer-events: none;
}

.au-lifecycle__heading {
	margin: 0 0 24px;
	max-width: 760px;
}

.au-lifecycle__lede {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--sc-text-onlight-mute);
	margin: 0 0 90px;
}

/* -------------------------------------------------------------------- */
/* How We Work With Clients                                             */
/* -------------------------------------------------------------------- */

.au-relationship-work {
	padding: var(--sc-section-padding-max) 0 140px;
}

.au-relationship-work__bg {
	position: absolute;
	left: -100px;
	bottom: -200px;
	width: 1100px;
	max-width: none;
	opacity: 0.3;
	mix-blend-mode: screen;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
	mask-image: linear-gradient(to top, transparent 0%, black 30%);
}

.au-relationship-work__heading {
	margin: 0 0 90px;
	max-width: 760px;
	line-height: 1.22;
}

.au-relationship-work__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.au-relationship-work__item {
	padding: 0 36px;
	border-right: 1px solid var(--sc-slate-700);
}

.au-relationship-work__item:first-child {
	padding-left: 0;
}

.au-relationship-work__item--last {
	padding-right: 0;
	border-right: none;
}

.au-relationship-work__num {
	font-family: var(--sc-font-heading);
	font-size: 44px;
	font-weight: 800;
	color: var(--sc-blue-light);
	letter-spacing: -1.5px;
	display: block;
	margin-bottom: 22px;
}

.au-relationship-work__item h3 {
	font-family: var(--sc-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--sc-text-ondark);
	margin: 0 0 10px;
}

.au-relationship-work__item p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sc-text-ondark-mute);
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Why Stone Cliff Digital                                              */
/* -------------------------------------------------------------------- */

.au-why {
	padding-block: var(--sc-section-padding-max);
}

.au-why__glow {
	position: absolute;
	left: -160px;
	top: 120px;
	width: 440px;
	height: 440px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.06;
	pointer-events: none;
}

.au-why__heading {
	margin: 0 0 70px;
	max-width: 700px;
}

.au-why__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 60px;
}

.au-why__item {
	display: flex;
	align-items: baseline;
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid var(--sc-slate-200);
}

.au-why__item--border-bottom {
	border-bottom: 1px solid var(--sc-slate-200);
}

.au-why__num {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	color: var(--sc-blue);
	width: 22px;
	flex-shrink: 0;
}

.au-why__item h3 {
	font-family: var(--sc-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--sc-text-onlight);
	margin: 0 0 8px;
}

.au-why__item p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sc-text-onlight-mute);
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* What We Do / Services Path                                           */
/* -------------------------------------------------------------------- */

.au-services {
	padding-block: 130px;
}

.au-services__glow {
	position: absolute;
	right: -200px;
	top: -180px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.12;
	mix-blend-mode: screen;
	pointer-events: none;
}

.au-services__heading {
	font-size: 38px;
	letter-spacing: -1px;
	margin: 0 0 70px;
}

.au-services__list {
	display: flex;
	flex-direction: column;
}

.au-services__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32px 24px;
	margin: 0 -24px;
	border-top: 1px solid var(--sc-slate-700);
	color: var(--sc-text-ondark);
	transition: background var(--sc-transition-base), color var(--sc-transition-base), border-top-color var(--sc-transition-base);
}

.au-services__link--last {
	border-bottom: 1px solid var(--sc-slate-700);
}

.au-services__link:hover,
.au-services__link:focus-visible {
	color: var(--sc-blue-light);
	background: rgba(108, 134, 255, 0.05);
	border-top-color: var(--sc-blue-border-emphasis);
}

.au-services__link:hover + .au-services__link,
.au-services__link:focus-visible + .au-services__link {
	border-top-color: var(--sc-blue-border-emphasis);
}

.au-services__link h3 {
	font-family: var(--sc-font-heading);
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}

.au-services__arrow {
	font-family: var(--sc-font-mono);
	font-size: 20px;
	display: inline-block;
	transition: transform var(--sc-transition-base);
}

.au-services__link:hover .au-services__arrow,
.au-services__link:focus-visible .au-services__arrow {
	transform: translateX(6px);
}

/* -------------------------------------------------------------------- */
/* FAQ                                                                   */
/* -------------------------------------------------------------------- */

.au-faq {
	padding-block: var(--sc-section-padding-max);
}

.au-faq__row {
	display: flex;
	gap: 100px;
}

.au-faq__copy {
	flex-shrink: 0;
	width: 380px;
}

.au-faq__heading {
	margin: 0;
	line-height: 1.22;
}

.au-faq__list {
	flex: 1;
}

/* -------------------------------------------------------------------- */
/* Final CTA                                                             */
/* -------------------------------------------------------------------- */

.au-cta {
	padding-block: var(--sc-section-padding-max);
	text-align: center;
}

.au-cta__bg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1600px;
	max-width: none;
	opacity: 0.4;
	mix-blend-mode: screen;
	pointer-events: none;
}

.au-cta__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 800px;
	height: 800px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.28;
	pointer-events: none;
}

.au-cta .cta-final__actions {
	justify-content: center;
}

/* -------------------------------------------------------------------- */
/* Responsive — tablet (<=1024px)                                       */
/* -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Hero */
	.au-hero {
		padding: 88px 0 64px;
		min-height: 0;
	}

	.au-hero__art {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(70%, 460px);
		margin: 40px auto 0;
	}

	.au-hero__breadcrumb {
		margin-bottom: 40px;
	}

	.au-hero__content {
		max-width: 100%;
	}

	.au-hero__title {
		font-size: 42px;
		letter-spacing: -1.3px;
		max-width: 100%;
	}

	.au-hero__lede {
		max-width: 100%;
	}

	/* Who We Are */
	.au-relationship__row {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.au-relationship__heading {
		margin-bottom: 40px;
	}

	.au-relationship__bg {
		opacity: 0.35;
	}

	/* What Guides the Work */
	.au-principles {
		padding: 96px 0 100px;
	}

	.au-principles__heading {
		margin-bottom: 40px;
	}

	.au-principles__row {
		flex-direction: column;
	}

	.au-principles__feature {
		width: 100%;
		padding: 40px 36px;
	}

	/* One Connected Digital Partner */
	.au-lifecycle {
		padding: 96px 0 100px;
	}

	.au-lifecycle__lede {
		margin-bottom: 48px;
	}

	/* How We Work With Clients */
	.au-relationship-work {
		padding: 96px 0 100px;
	}

	.au-relationship-work__heading {
		margin-bottom: 48px;
	}

	.au-relationship-work__bg {
		opacity: 0.18;
	}

	.au-relationship-work__grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 40px;
	}

	.au-relationship-work__item {
		border-right: none;
		padding: 0;
	}

	/* Why Stone Cliff Digital */
	.au-why__heading {
		margin-bottom: 40px;
	}

	.au-why__grid {
		grid-template-columns: 1fr;
	}

	/* What We Do / Services Path */
	.au-services {
		padding-block: 96px;
	}

	.au-services__heading {
		font-size: 30px;
		margin-bottom: 40px;
	}

	/* FAQ */
	.au-faq__row {
		flex-direction: column;
		gap: 40px;
	}

	.au-faq__copy {
		width: 100%;
	}

	/* Final CTA */
	.au-cta__bg {
		width: 1100px;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — phone (<=600px)                                         */
/* -------------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Hero */
	.au-hero {
		padding: 64px 0 48px;
	}

	.au-hero__breadcrumb {
		margin-bottom: 28px;
	}

	.au-hero__title {
		font-size: 32px;
		letter-spacing: -1px;
	}

	.au-hero__lede {
		font-size: 15.5px;
	}

	.au-hero__art {
		width: 84%;
		margin-top: 32px;
	}

	.au-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.au-hero__actions .c-btn--primary,
	.au-hero__actions .c-link--editorial {
		text-align: center;
	}

	/* Who We Are */
	.au-relationship__heading {
		margin-bottom: 28px;
	}

	.au-relationship__item {
		padding: 20px 0;
	}

	/* What Guides the Work */
	.au-principles {
		padding: 72px 0 80px;
	}

	.au-principles__heading {
		margin-bottom: 28px;
	}

	.au-principles__feature {
		padding: 32px 28px;
	}

	/* One Connected Digital Partner */
	.au-lifecycle {
		padding: 72px 0 80px;
	}

	.au-lifecycle__lede {
		margin-bottom: 32px;
	}

	/* How We Work With Clients */
	.au-relationship-work {
		padding: 72px 0 80px;
	}

	.au-relationship-work__heading {
		margin-bottom: 32px;
	}

	.au-relationship-work__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	/* Why Stone Cliff Digital */
	.au-why__heading {
		margin-bottom: 28px;
	}

	/* What We Do / Services Path */
	.au-services {
		padding-block: 72px;
	}

	.au-services__heading {
		font-size: 26px;
		margin-bottom: 28px;
	}

	.au-services__link {
		padding: 24px 20px;
		margin: 0 -20px;
	}

	.au-services__link h3 {
		font-size: 20px;
	}

	/* FAQ */
	.au-faq__row {
		gap: 28px;
	}

	/* Final CTA */
	.au-cta__bg {
		width: 800px;
	}

	.au-cta__glow {
		width: 500px;
		height: 500px;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — small phone (<=480px)                                   */
/* -------------------------------------------------------------------- */

@media (max-width: 480px) {
	.au-hero__title {
		font-size: 28px;
	}

	.au-relationship__item h3,
	.au-principles__item h3,
	.au-relationship-work__item h3,
	.au-why__item h3 {
		font-size: 16px;
	}

	.au-relationship-work__num {
		font-size: 34px;
	}
}