/* ARM Motion — signature page sections.
 *
 * Lives in the plugin rather than Breakdance's selector store on purpose:
 * insert-stylesheet rejects descendant selectors and drops @keyframes, so
 * gradient fields, marquees and reveal choreography cannot be expressed there.
 * Breakdance still owns the markup and the copy; this file owns the feel.
 *
 * Every gradient is built from the brand tokens — no borrowed stock hues.
 */

/* ------------------------------------------------- reveal choreography --- */

/* Gated on html.arm-js, which menu.js sets synchronously. If the script never
 * runs, nothing is ever hidden and the page ships fully visible — a reveal must
 * enhance a working default, never gate content on a transition that may not
 * fire (hidden tabs, headless renderers, JS errors). */
.arm-js .arm-rise {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.arm-js .arm-rise.is-in { opacity: 1; transform: none; }

/* Children stagger off the parent's own reveal. */
.arm-js .arm-stagger > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.arm-js .arm-stagger.is-in > * { opacity: 1; transform: none; }
.arm-js .arm-stagger.is-in > *:nth-child(1) { transition-delay: 40ms; }
.arm-js .arm-stagger.is-in > *:nth-child(2) { transition-delay: 120ms; }
.arm-js .arm-stagger.is-in > *:nth-child(3) { transition-delay: 200ms; }
.arm-js .arm-stagger.is-in > *:nth-child(4) { transition-delay: 280ms; }
.arm-js .arm-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
.arm-js .arm-stagger.is-in > *:nth-child(6) { transition-delay: 440ms; }

/* ------------------------------------------------------------ hero ------- */

.arm-hero-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--arm-slate-ink, #1c2422);
	padding-top: calc(84px + clamp(2.5rem, 6vw, 5rem));
	padding-bottom: 0;
}

/* Layered gradient field: two clay blooms, one slate bloom, all in-palette.
   Sits behind content via z-index, not opacity, so text contrast is exact. */
.arm-hero-dark::before {
	content: "";
	position: absolute;
	inset: -20% -10% -10%;
	z-index: -2;
	background:
		radial-gradient(46% 42% at 74% 18%, rgba(196, 141, 115, 0.55) 0%, rgba(196, 141, 115, 0) 68%),
		radial-gradient(40% 44% at 22% 8%, rgba(169, 115, 91, 0.34) 0%, rgba(169, 115, 91, 0) 70%),
		radial-gradient(60% 60% at 12% 92%, rgba(73, 90, 88, 0.72) 0%, rgba(73, 90, 88, 0) 66%);
	animation: arm-drift 26s ease-in-out infinite alternate;
}

/* The glossy pass: a slow conic sheen, heavily blurred, that keeps the field
   from reading as a flat CSS gradient. */
.arm-hero-dark::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -18%;
	width: 68vw;
	height: 68vw;
	max-width: 900px;
	max-height: 900px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(
		from 210deg,
		rgba(232, 205, 191, 0) 0deg,
		rgba(232, 205, 191, 0.30) 78deg,
		rgba(196, 141, 115, 0.16) 168deg,
		rgba(232, 205, 191, 0) 262deg
	);
	filter: blur(64px);
	animation: arm-spin 44s linear infinite;
}

@keyframes arm-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

@keyframes arm-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.arm-hero-shell {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.arm-hero-text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* A byline, not a tracked eyebrow: sentence case, real information, and it
   appears once on the page rather than above every section. */
.arm-byline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(245, 233, 227, 0.78);
}

.arm-byline::before {
	content: "";
	width: 26px;
	height: 1px;
	background-color: var(--arm-clay, #c48d73);
	flex-shrink: 0;
}

.arm-hero-h1 {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.9rem, 6.4vw, 5.6rem);
	line-height: 0.98;
	letter-spacing: -0.014em;
	color: var(--arm-paper, #fff);
	text-wrap: balance;
}

.arm-hero-lead {
	margin: 0;
	max-width: 46ch;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
	line-height: 1.62;
	color: rgba(245, 233, 227, 0.86);
	text-wrap: pretty;
}

/* --------------------------------------------------- hero portrait ------- */

/* A framed photograph, not a keyed-out cutout.
 *
 * The source shots are lit against flat cream, so an automated key is tempting —
 * but machine-cut hair edges halo badly at hero scale. An arch-topped frame is
 * the stronger editorial move regardless: it reads as a magazine plate and lets
 * the gradient field sit behind it rather than fighting a silhouette. */
.arm-hero-figure {
	position: relative;
	margin: 0;
	align-self: end;
	justify-self: end;
	isolation: isolate;
	width: 100%;
	max-width: 460px;
}

/* Glossy orb, offset behind the frame so it breaks the rectangle's silhouette. */
.arm-hero-figure::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -16%;
	top: -7%;
	width: 84%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 48%),
		linear-gradient(148deg, var(--arm-clay-tint, #e8cdbf) 0%, var(--arm-clay, #c48d73) 54%, var(--arm-clay-deep, #a9735b) 100%);
}

.arm-hero-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 230px 230px 16px 16px;
	box-shadow: 0 50px 90px -34px rgba(0, 0, 0, 0.62);
}

/* Oversized and inset so the parallax drift never exposes an edge. */
.arm-hero-portrait {
	position: absolute;
	inset: -7% 0;
	display: block;
	width: 100%;
	height: 114%;
	object-fit: cover;
	object-position: 50% 22%;
	will-change: transform;
}

/* ------------------------------------------------------ hero trust ------- */

.arm-hero-trust {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.arm-trust-fact {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	color: rgba(245, 233, 227, 0.92);
}

.arm-trust-bbb {
	height: 34px;
	width: auto;
	display: block;
	/* The badge art is dark-on-white; lifting it keeps it legible on the field
	   without shipping a second asset. */
	background-color: var(--arm-paper, #fff);
	border-radius: 4px;
	padding: 3px 6px;
}

/* --------------------------------------------------- logo marquee -------- */

.arm-marquee-sec {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background-color: var(--arm-paper, #fff);
	border-bottom: 1px solid var(--arm-line, #e4dbd6);
}

.arm-marquee-label {
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	max-width: 1180px;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 0.9375rem;
	color: var(--arm-ink-muted, #5b6462);
}

.arm-marquee {
	position: relative;
	overflow: hidden;
	/* Fade the ends so logos enter and leave instead of being cut. */
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.arm-marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	width: max-content;
	animation: arm-marquee 42s linear infinite;
}

.arm-marquee:hover .arm-marquee-track { animation-play-state: paused; }

/* Translating -50% works because menu.js duplicates the track exactly once. */
@keyframes arm-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.arm-marquee-track img {
	height: clamp(34px, 4vw, 46px);
	width: auto;
	flex-shrink: 0;
	opacity: 0.62;
	filter: grayscale(100%);
	transition: opacity 400ms ease, filter 400ms ease;
}

.arm-marquee-track img:hover { opacity: 1; filter: grayscale(0%); }

/* ------------------------------------------------- services index -------- */

.arm-index { display: flex; flex-direction: column; }

.arm-index-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--arm-line, #e4dbd6);
	text-decoration: none;
}

.arm-index-row:last-child { border-bottom: 1px solid var(--arm-line, #e4dbd6); }

.arm-index-name {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.012em;
	color: var(--arm-slate-ink, #1c2422);
	/* Indent on hover via transform, not padding — compositor-only, no reflow. */
	transition: color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.arm-index-row:hover .arm-index-name {
	color: var(--arm-clay-deep, #a9735b);
	transform: translateX(14px);
}

.arm-index-out {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--arm-ink-muted, #5b6462);
	max-width: 30ch;
	text-align: right;
}

/* Floating thumbnail that tracks the cursor across the row. */
.arm-index-peek {
	position: absolute;
	top: 50%;
	left: 0;
	width: 230px;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.94) rotate(-3deg);
	transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 3;
}

.arm-index-peek img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 26px 60px -20px rgba(28, 36, 34, 0.5);
}

.arm-index-row:hover .arm-index-peek {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1) rotate(-3deg);
}

/* ------------------------------------------------------ manifesto -------- */

.arm-manifesto {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 9vw, 8.5rem);
	background-color: var(--arm-clay, #c48d73);
}

.arm-manifesto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(52% 60% at 84% 12%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(60% 70% at 8% 96%, rgba(169, 115, 91, 0.52) 0%, rgba(169, 115, 91, 0) 66%);
}

.arm-manifesto-inner {
	width: 100%;
	max-width: 940px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	align-items: flex-start;
}

/* Dark ink on clay is 5.27:1. White on clay is 2.84:1 and is never used. */
.arm-manifesto-quote {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 3.35rem);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--arm-slate-ink, #1c2422);
	text-wrap: balance;
}

.arm-manifesto-body {
	margin: 0;
	max-width: 62ch;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #272727;
	text-wrap: pretty;
}

/* ----------------------------------------------------- testimonials ------ */

/* Deliberately asymmetric: one featured quote plus a stack of three, rather
   than another row of identical cards. */
.arm-voices {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.arm-voice-lead {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: clamp(1.75rem, 3.5vw, 3rem);
	border-radius: 18px;
	background-color: var(--arm-slate-ink, #1c2422);
	background-image:
		radial-gradient(70% 60% at 88% 6%, rgba(196, 141, 115, 0.42) 0%, rgba(196, 141, 115, 0) 64%),
		radial-gradient(70% 70% at 4% 98%, rgba(73, 90, 88, 0.62) 0%, rgba(73, 90, 88, 0) 62%);
}

.arm-voice-lead-quote {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 2.3vw, 2rem);
	line-height: 1.26;
	letter-spacing: -0.008em;
	color: var(--arm-paper, #fff);
	text-wrap: pretty;
}

.arm-voice-who {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
}

.arm-voice-face {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.28);
}

.arm-voice-name {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--arm-paper, #fff);
}

.arm-voice-co {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.3;
	color: rgba(245, 233, 227, 0.7);
}

.arm-voice-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.25rem); }

.arm-voice {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	border-radius: 14px;
	background-color: var(--arm-paper, #fff);
	border: 1px solid var(--arm-line, #e4dbd6);
	flex: 1;
}

.arm-voice-text {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #272727;
	text-wrap: pretty;
}

.arm-voice .arm-voice-face { border-color: var(--arm-clay-tint, #e8cdbf); width: 42px; height: 42px; }
.arm-voice .arm-voice-name { color: var(--arm-slate-ink, #1c2422); }
.arm-voice .arm-voice-co { color: var(--arm-ink-muted, #5b6462); }

/* ---------------------------------------------------- founder letter ----- */

.arm-letter {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.arm-letter-figure {
	position: relative;
	margin: 0;
	isolation: isolate;
}

.arm-letter-figure::before {
	content: "";
	position: absolute;
	inset: 4% 0 0 4%;
	z-index: -1;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--arm-sand, #f5e9e3) 0%, var(--arm-clay-tint, #e8cdbf) 100%);
}

.arm-letter-figure img { display: block; width: 100%; height: auto; }

.arm-letter-body { display: flex; flex-direction: column; gap: 1.375rem; align-items: flex-start; }

.arm-sign {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--arm-clay-deep, #a9735b);
}

/* ------------------------------------------------------- closing CTA ----- */

.arm-close {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 9vw, 8rem);
	background-color: var(--arm-slate-ink, #1c2422);
}

.arm-close::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	background:
		radial-gradient(44% 50% at 50% 4%, rgba(196, 141, 115, 0.50) 0%, rgba(196, 141, 115, 0) 66%),
		radial-gradient(60% 60% at 92% 96%, rgba(73, 90, 88, 0.68) 0%, rgba(73, 90, 88, 0) 62%);
	animation: arm-drift 30s ease-in-out infinite alternate;
}

.arm-close-inner {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	text-align: center;
}

.arm-close-h {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.014em;
	color: var(--arm-paper, #fff);
	text-wrap: balance;
}

.arm-close-p {
	margin: 0;
	max-width: 54ch;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.65;
	color: rgba(245, 233, 227, 0.86);
	text-wrap: pretty;
}

/* ------------------------------------------------------- responsive ------ */

@media (max-width: 1119px) {
	.arm-index-peek { display: none; }
}

@media (max-width: 1023px) {
	.arm-hero-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.arm-hero-text { padding-bottom: clamp(2rem, 5vw, 3rem); }
	.arm-hero-figure { max-width: 380px; }
	.arm-voices { grid-template-columns: minmax(0, 1fr); }
	.arm-letter { grid-template-columns: minmax(0, 1fr); }
	.arm-letter-figure { max-width: 420px; }
	.arm-index-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
	.arm-index-out { text-align: left; max-width: 46ch; }
}

@media (max-width: 767px) {
	.arm-hero-dark { padding-top: calc(68px + clamp(2rem, 6vw, 3rem)); }
	.arm-hero-trust { gap: 1rem; }
	.arm-trust-fact { font-size: 0.875rem; }
}

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

@media (prefers-reduced-motion: reduce) {
	.arm-hero-dark::before,
	.arm-hero-dark::after,
	.arm-close::before,
	.arm-marquee-track {
		animation: none;
	}

	/* The marquee is the one element whose content depends on its animation, so
	   it becomes a plain wrapping row instead of a frozen overflow. */
	.arm-marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}
	.arm-marquee-track {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.75rem 2.5rem;
	}

	.arm-js .arm-rise,
	.arm-js .arm-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.arm-index-row,
	.arm-index-name,
	.arm-index-peek,
	.arm-marquee-track img {
		transition-duration: 1ms;
	}

	.arm-hero-portrait { will-change: auto; }
}

/* ==========================================================================
   Section shell, buttons and the editorial spread.
   Appended after the responsive block above on purpose: these rules carry
   their own media queries, so source order stays readable per-component
   rather than splitting every component across three places.
   ========================================================================== */

/* --------------------------------------------------------- section shell -- */

.arm-sec {
	padding-block: clamp(4rem, 8vw, 7.5rem);
	background-color: var(--arm-paper, #fff);
}

.arm-sec--sand { background-color: var(--arm-sand, #f5e9e3); }
.arm-sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.arm-shell {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.arm-sec-head {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	max-width: 60ch;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.arm-sec-h {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--arm-slate-ink, #1c2422);
	text-wrap: balance;
}

.arm-sec-lead,
.arm-p {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #3a4441;
	text-wrap: pretty;
}

.arm-sec-lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; }

/* A thin clay rule used to open a block without resorting to a tracked eyebrow. */
.arm-rule {
	display: block;
	width: 44px;
	height: 2px;
	border: 0;
	margin: 0;
	background-color: var(--arm-clay, #c48d73);
}

/* -------------------------------------------------------------- buttons --- */

.arm-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.arm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: -0.005em;
	padding: 1.0625rem 1.75rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
		color 400ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.arm-btn:hover { transform: translateY(-2px); }

.arm-btn:focus-visible {
	outline: 3px solid var(--arm-clay, #c48d73);
	outline-offset: 3px;
}

/* On the dark field. Paper on slate-ink is 15.8:1. */
.arm-btn--light {
	background-color: var(--arm-paper, #fff);
	border-color: var(--arm-paper, #fff);
	color: var(--arm-slate-ink, #1c2422);
}

.arm-btn--light:hover {
	background-color: var(--arm-clay-tint, #e8cdbf);
	border-color: var(--arm-clay-tint, #e8cdbf);
	color: var(--arm-slate-ink, #1c2422);
}

.arm-btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--arm-paper, #fff);
}

.arm-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--arm-paper, #fff);
	color: var(--arm-paper, #fff);
}

/* On paper. Slate, not clay: white on clay is 2.84:1 and fails. */
.arm-btn--dark {
	background-color: var(--arm-slate, #495a58);
	border-color: var(--arm-slate, #495a58);
	color: var(--arm-paper, #fff);
}

.arm-btn--dark:hover {
	background-color: var(--arm-slate-deep, #2f3b39);
	border-color: var(--arm-slate-deep, #2f3b39);
	color: var(--arm-paper, #fff);
}

.arm-btn--outline {
	background-color: transparent;
	border-color: rgba(28, 36, 34, 0.28);
	color: var(--arm-slate-ink, #1c2422);
}

.arm-btn--outline:hover {
	background-color: var(--arm-slate-ink, #1c2422);
	border-color: var(--arm-slate-ink, #1c2422);
	color: var(--arm-paper, #fff);
}

/* ------------------------------------------------- the editorial spread --- */

/* Magazine pacing: a tall plate, a pull quote set against it, and a wide plate
   beneath — three different shapes in one band, so the eye does not settle into
   the card-grid rhythm the rest of the industry ships. */
.arm-editorial {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

.arm-ed-tall { grid-column: 1 / span 5; grid-row: 1 / span 2; margin: 0; }
.arm-ed-copy {
	grid-column: 7 / span 6;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	align-items: flex-start;
	padding-top: clamp(0.5rem, 3vw, 2.5rem);
}
.arm-ed-wide { grid-column: 7 / span 6; grid-row: 2; margin: 0; }

.arm-ed-tall img,
.arm-ed-wide img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	object-fit: cover;
}

.arm-ed-tall img { aspect-ratio: 3 / 4; }
.arm-ed-wide img { aspect-ratio: 16 / 10; }

.arm-pull {
	margin: 0;
	font-family: var(--arm-font-display, "Instrument Serif"), Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -0.012em;
	color: var(--arm-slate-ink, #1c2422);
	text-wrap: balance;
}

.arm-attrib {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--arm-ink-muted, #5b6462);
}

/* ------------------------------------------------- manifesto attribution -- */

.arm-manifesto-cite {
	margin: 0;
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.5;
	/* On clay, #272727 is 5.5:1. */
	color: #272727;
}

/* ---------------------------------------------------- letter refinements -- */

.arm-letter-figure img { border-radius: 14px; }

/* --------------------------------------------------------- index heading -- */

.arm-index-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1023px) {
	.arm-editorial { grid-template-columns: minmax(0, 1fr); }
	.arm-ed-tall,
	.arm-ed-copy,
	.arm-ed-wide { grid-column: 1 / -1; grid-row: auto; }
	.arm-ed-tall { max-width: 460px; }
	.arm-ed-copy { padding-top: 0; }
}

@media (max-width: 767px) {
	.arm-hero-figure { max-width: 340px; justify-self: start; }
	.arm-hero-frame { border-radius: 170px 170px 14px 14px; }
	.arm-btn { width: 100%; }
	.arm-cta-row { gap: 0.625rem; }
}

@media (prefers-reduced-motion: reduce) {
	.arm-btn { transition-duration: 1ms; }
	.arm-btn:hover { transform: none; }
}

/* ------------------------------------------------- service row link ------- */

/* The row is a grid of a heading, a description and a floating preview, so it
   cannot itself be an <a> — html-to-page would flatten a link wrapping block
   content into a single text link. A stretched overlay link keeps the whole row
   clickable while the accessible name stays real text, not an aria-label. */
.arm-index-link {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

.arm-index-link:focus-visible {
	outline: 3px solid var(--arm-clay, #c48d73);
	outline-offset: -3px;
	border-radius: 6px;
}

/* Keyboard users get the same indent cue the mouse gets on hover. */
.arm-index-row:focus-within .arm-index-name {
	color: var(--arm-clay-deep, #a9735b);
	transform: translateX(14px);
}

.arm-index-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--arm-font-body, Inter), system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--arm-slate-ink, #1c2422);
	text-decoration: none;
	border-bottom: 1.5px solid var(--arm-clay, #c48d73);
	padding-bottom: 2px;
	transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.arm-index-more:hover {
	color: var(--arm-clay-deep, #a9735b);
	border-bottom-color: var(--arm-clay-deep, #a9735b);
}

.arm-index-more:focus-visible {
	outline: 3px solid var(--arm-clay, #c48d73);
	outline-offset: 4px;
	color: var(--arm-slate-ink, #1c2422);
}

/* ------------------------------------------------- testimonial byline ----- */

.arm-voice-id {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
	.arm-index-row:focus-within .arm-index-name { transform: none; }
	.arm-index-more { transition-duration: 1ms; }
}