/* ==========================================================================
   SECTIONS — home page
   Every value here was measured from the live Framer build (see
   tools/capture/sections.json). Source geometry is noted inline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED SECTION FURNITURE
   -------------------------------------------------------------------------- */

.section__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 60px;
}

/* Measured Title Section: flex row, gap 50px, align flex-start. */
.section__head--split {
	flex-direction: row;
	align-items: flex-start;
	gap: 50px;
}

/*
 * Header bar: heading block left, CTA flush right. Measured on the blog
 * section — the button sits at x=1172 with its 148px width ending on the
 * 1320px container edge, vertically centred against the title row.
 */
.section__head--bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.section__head-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.section__head-cta {
	flex: 0 0 auto;
}

@media (max-width: 809.98px) {
	.section__head--bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

.section__title {
	font-size: var(--fs-54);
	line-height: var(--lh-snug);
	max-width: 20ch;
}

/* Measured eyebrow: DM Sans 14px/500, tracking 0.28px (0.02em), accent. */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	line-height: 1.2em;
	letter-spacing: var(--ls-2);
	color: var(--c-accent);
}

.section__action {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

/* ==========================================================================
   HERO
   Measured: 1440x900 full viewport. Cover padding 250px 50px 50px,
   overlay rgba(27,29,31,0.6), content aligned flex-end (bottom).
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	/* Fallback for mobile browsers where 100vh includes the URL bar. */
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--c-ink);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__video,
.hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The measured overlay tint that keeps the white text legible. */
.hero__cover {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: 250px 50px 50px;
	background-color: rgba(27, 29, 31, 0.6);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	max-width: var(--container-max);
	color: var(--c-surface);
}

/* Measured Title: flex row, justify space-between, align flex-end. */
.hero__title {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
}

.hero__heading {
	flex: 1 1 auto;
	/* Measured: 64px at 70.4px line-height (1.1em), column width 650px. */
	max-width: 650px;
	font-size: var(--fs-64);
	line-height: var(--lh-tight);
	color: var(--c-surface);
}

/* --- Vertical word ticker ------------------------------------------------
   Measured: container 350x89, items exactly 80px apart, one step per cycle,
   ~900ms ease-out travel with a ~2.6s dwell. The 80px step is the value the
   Phase 8 GSAP loop animates against, so item height is pinned here.
   ------------------------------------------------------------------------- */

/* Small "for" connector sits above the rotating word, right-aligned. */
.hero__ticker-label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-medium);
	line-height: 1.2em;
	/* Measured rgba(255,255,255,0.5). */
	color: var(--c-white-50);
}

.hero__ticker-wrap {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero__ticker {
	flex: 0 0 auto;
	/*
	 * Width follows the longest word rather than the measured 350px box.
	 * `overflow: hidden` clips on BOTH axes — a fixed 350px truncated
	 * "Fund Accounting", which is wider than that at 54px type. A minimum
	 * keeps the column from collapsing on the short words.
	 */
	width: max-content;
	/* Capped to the container: a flat 350px overflowed the 390px phone
	   viewport once the 20px gutters were taken into account. */
	max-width: 100%;
	min-width: min(350px, 100%);
	/* One item tall — the rest are clipped and revealed by the loop.
	   This is the PITCH (measured 80 / 72 / 62), not the glyph box; the
	   GSAP loop reads this height as its per-advance step. */
	height: 80px;
	overflow: hidden;
}

.hero__ticker-list {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.hero__ticker-item {
	display: flex;
	align-items: center;
	/* Must match the ticker height exactly or the loop drifts. */
	height: 80px;
	font-family: var(--font-display);
	font-size: var(--fs-54);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	white-space: nowrap;
	color: var(--c-surface);
}

/* Horizontal rule under the heading / ticker row. */
.hero__rule {
	width: 100%;
	height: 1px;
	margin-block: 0px;
	/* Measured rgba(255,255,255,0.2). */
	background-color: rgba(255, 255, 255, 0.2);
	border: 0;
}

.hero__intro {
	/* Measured: 18px, rgba(255,255,255,0.7), 500px column. */
	max-width: 500px;
	font-size: var(--fs-18);
	line-height: var(--lh-body);
	color: var(--c-white-70);
}

/* Measured Action row: flex row, gap 30px. */
.hero__action {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
	width: 100%;
	margin-top: 30px;
}

/* --- "Trusted by" pill ---------------------------------------------------
   Measured: padding 10px 30px, gap 30px, bg rgba(255,255,255,0.05),
   radius 10px.
   ------------------------------------------------------------------------- */

.trusted {
	display: flex;
	/*
	 * Must shrink so the pill and the contact card share the 1200px track:
	 * measured 790 + 30 gap + 380 = 1200. Without min-width:0 the marquee
	 * inside refuses to shrink and pushes the pill past the container.
	 */
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: row;
	align-items: center;
	gap: 30px;
	/* Measured: 790x73, padding 10px 30px, radius 10px. */
	padding: 10px 30px;
	min-height: 73px;
	background-color: var(--c-white-05);
	border-radius: var(--r-sm);
}

.trusted__label {
	flex: 0 0 auto;
	/* Measured: 16px, rgba(255,255,255,0.7), sentence case. */
	font-size: var(--fs-16);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-0);
	color: var(--c-white-70);
	white-space: nowrap;
	/* Separator between the label and the scrolling logos. */
	padding-right: 30px;
	border-right: 1px solid var(--c-white-05);
}

.trusted__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

.trusted__logo {
	width: auto;
	/*
	 * The original sizes each logo individually (24-54px tall, 61-110px wide).
	 * Capping both axes lets aspect ratio decide which limit binds, which
	 * recovers most of that variation without storing per-logo dimensions.
	 */
	/*
	 * Constrain on WIDTH, not height. The original's logos vary from 24px to
	 * 54px tall because each is sized to its own artwork; capping height
	 * flattens them all to one size. Capping width instead lets each logo's
	 * aspect ratio set its height, which recovers that variation.
	 */
	width: auto;
	height: auto;
	max-width: 110px;
	max-height: 54px;
	object-fit: contain;
}

.trusted__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* --- Contact card --------------------------------------------------------
   Measured: 380x61, padding 10px 15px, bg #fff, radius 10px.
   Avatar 36x36 radius 100px. Status dot 8x8 radius 50px.
   ------------------------------------------------------------------------- */

.contact-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* Measured 380x61, fixed — it does not flex. */
	/* flex: 0 0 380px; */
	min-width: 380px;
	padding: 10px 15px;
	min-height: 61px;
	background-color: var(--c-surface);
	border-radius: var(--r-sm);
	color: var(--c-body);
}

.contact-card__admin {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;    white-space: nowrap;
}

.contact-card__profile {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: var(--r-xl);
}

.contact-card__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-card__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-card__name {
	font-size: var(--fs-16);
	line-height: 1.2em;
	color: var(--c-ink);
}

.contact-card__status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-12);
	line-height: 1.2em;
	color: var(--c-muted);
}

.contact-card__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--r-lg);
	/* Green presence indicator — the only non-palette colour on the page. */
	background-color: #3fbf5f;
}

.btn--sm {
	/* Measured card button: 129x41, padding 12px 20px, radius 100px. */
	padding: 12px 20px;
	font-size: var(--fs-13);
}

/*
 * The contact card's call to action is the accent orange, not the ink used by
 * every other pill on the site. Measured rgb(232,72,28).
 */
.contact-card .btn {
	color: var(--c-surface);
	background-color: var(--c-accent);
}

.site-header--light .contact-card .btn {
	color: var(--c-surface);
	background-color: var(--c-accent);
}
.contact-card .btn:hover{background-color: #000;}
/* ==========================================================================
   ABOUT
   Measured: section padding 100px 50px; Image Content flex row gap 50px;
   Content column 575px, flex column gap 30px; Value gap 20px;
   Mission/Approach gap 10px; Fact Number row gap 30px.
   ========================================================================== */

.about__intro {
	display: flex;
	flex-direction: column;
	gap: 20px; 
	margin-bottom: 60px;
}

.about__lead {
	font-size: var(--fs-42);
	line-height: var(--lh-snug);
}

.about__grid {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 50px;
}

.about__media {
	flex: 1 1 50%;
	overflow: hidden;
	border-radius: var(--r-md);
}

.about__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about__content {
	display: flex;
	flex: 1 1 50%;
	flex-direction: column;
	gap: 30px;
	max-width: 575px;
}

.about__body {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

.about__values {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.about__value {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Measured: h6-equivalent at 24px Instrument Sans 500. */
.about__value-title {
	font-size: var(--fs-24);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

.about__value-text {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

/* Measured Fact Number: flex row, gap 30px. Static text — no count-up. */
.about__stats {
	display: flex;
	flex-direction: row;
	gap: 30px;
	margin: 0;
}

.about__stat {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Vertical rule between the two figures, as in the original. */
.about__stat + .about__stat {
	padding-left: 30px;
	border-left: 1px solid var(--c-body-20);
}

.about__stat-value {
	font-family: var(--font-display);
	font-size: var(--fs-64);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	color: var(--c-ink);
}

.about__stat-label {
	margin: 0;
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

/* ==========================================================================
   PROJECTS
   Measured: List grid gap 30px on a 1200px track; card 380px
   (380*3 + 30*2 = 1200); card flex column gap 20px; Details gap 10px.
   ========================================================================== */

.projects__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.project-card__media {
	overflow: hidden;
	border-radius: var(--r-md);
	/* Locks the ratio so cards cannot shift as images load. */
	aspect-ratio: 380 / 460;
	background-color: var(--c-body-20);
}

.project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.project-card__details {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Measured: DM Sans 14px/400, rgba(27,29,31,0.8). */
.project-card__category {
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	color: var(--c-ink-80);
}

/* Measured: Instrument Sans 28px/500. */
.project-card__title {
	font-size: var(--fs-28);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

.project-card__summary {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

/* --------------------------------------------------------------------------
   SERVICES SECTION HEADER
   Measured: Title Section 1200x170, flex row, gap 50px, align flex-start.
   Left column 575px (eyebrow + heading, gap 5px), right column 575px at
   x=745 (intro paragraphs + CTA, gap 30px). 575 + 50 + 575 = 1200.
   -------------------------------------------------------------------------- */

.services__head {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 50px;
	margin-bottom: 60px;
}

.services__head-left {
	display: flex;
	flex: 0 0 575px;
	flex-direction: column;
	/* Measured 5px between the eyebrow and the heading. */
	gap: 5px;
	max-width: 575px;
}

.services__head-right {
	display: flex;
	flex: 0 0 575px;
	flex-direction: column;
	align-items: flex-start;
	/* Measured 30px between paragraphs and down to the button. */
	gap: 30px;
	max-width: 575px;
}

/* Measured: DM Sans 16px/400 at 22.4px, rgba(27,29,31,0.8). */
.services__intro {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink-80);
}

@media (min-width: 810px) and (max-width: 1199.98px) {
	.services__head { gap: 30px; }
	.services__head-left,
	.services__head-right { flex: 1 1 50%; max-width: none; }
}

@media (max-width: 809.98px) {
	.services__head {
		flex-direction: column;
		gap: 30px;
		margin-bottom: 40px;
	}

	.services__head-left,
	.services__head-right { flex: 1 1 auto; max-width: none; }
	.services__head-right { gap: 20px; }
}

/* ==========================================================================
   SERVICES ACCORDION
   Measured: exactly one panel open at a time, open 588px, closed 110px.
   Built on <details name> so the exclusive behaviour is native.
   ========================================================================== */

.services {
	border-top: 1px solid var(--c-body-20);
}

.service {
	border-bottom: 1px solid var(--c-body-20);
}

/*
 * Measured closed height is exactly 110px = 50px title row + 30px padding
 * top and bottom. The title row is 50px because Instrument Sans 42px at
 * line-height 1.2em computes to 50.4px.
 */
.service__summary {
	/*
	 * Measured 3-column track: number 250px at x=120, title 660px at x=390,
	 * action column 250px with the icon right-aligned at x=1288.
	 * 250 + 20 + 660 + 20 + 250 = 1200.
	 */
	display: grid;
	grid-template-columns: 250px 660px 1fr;
	align-items: center;
	gap: 20px;
	padding-block: 30px;
	min-height: 110px;
	cursor: pointer;
	list-style: none;
	/*
	 * Open and closed rows compute the SAME colour on the live site; the grey
	 * of a closed row comes from opacity applied to the whole row, which dims
	 * the number, title and icon together.
	 */
	opacity: 0.4;
	transition: opacity var(--dur-base) var(--ease-out);
}

.service[open] .service__summary {
	opacity: 1;
}

/* Remove the native disclosure triangle in every engine. */
.service__summary::-webkit-details-marker { display: none; }
.service__summary::marker { content: ''; }

/*
 * The wrapper is transparent to the grid on desktop/tablet so the number and
 * title land in their own measured columns; on phone it becomes a column
 * block again (the number sits above the title there).
 */
.service__heading {
	display: contents;
}

.service__number {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-medium);
	color: var(--c-ink-80);
}

/* Measured: Instrument Sans 42px/500. */
.service__title {
	/* Measured 660px column at x=390. */
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--fs-42);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

/* Plus icon that becomes a minus when the panel is open. */
.service__icon {
	position: relative;
	/* Measured: 32x32, background rgb(27,29,31), radius 100px, right-aligned. */
	justify-self: end;
	width: 32px;
	height: 32px;
	border-radius: var(--r-xl);
	background-color: var(--c-ink);
}

.service__icon-line {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Measured stroke: 18px long, 1.5px thick. */
	width: 18px;
	height: 1.5px;
	background-color: var(--c-surface);
	transform: translate(-50%, -50%);
	transition: transform var(--dur-base) var(--ease-out),
	            opacity var(--dur-base) var(--ease-out);
}

.service__icon-line:last-child {
	transform: translate(-50%, -50%) rotate(90deg);
}

.service[open] .service__icon-line:last-child {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.service__panel {
	overflow: hidden;
}

/*
 * Measured open panel: 588px total.
 *   30px padding-top + 50px title + 30px gap + 417px details + 30px padding
 * The Details block is a flex ROW, not a column — the description occupies a
 * 660px column with the bullet list alongside it. Stacking them vertically
 * collapses the panel to roughly half the original height.
 */
.service__content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	/*
	 * Measured: the description and image start at x=390, i.e. aligned with
	 * the title column (250px number column + 20px gap), not the left edge.
	 */
	padding-left: 270px;
	padding-bottom: 30px;
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

/*
 * Measured Description block: 660x417, flex column, gap 20px. It holds the
 * body copy AND a 300x200 image — the image is what accounts for most of the
 * 417px height, so the panel collapses to roughly half size without it.
 */
.service__description {
	display: flex;
	flex: 0 0 660px;
	flex-direction: column;
	gap: 20px;
	max-width: 660px;
}

.service__image {
	/* Measured 300x200 at x=390. */
	width: 300px;
	height: 200px;
	object-fit: cover;
	border-radius: var(--r-sm);
	order: -1; /* Image sits above the copy in the original. */
}

.service__content p { margin-bottom: 20px; }
.service__content p:last-child { margin-bottom: 0; }

.service__content ul {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
}

.service__content li {
	position: relative;
	padding-left: 20px;
}

/*
 * Bullets are checkmarks in the original, not dots. Inlined as a data URI so
 * there is no extra request and the mark inherits no colour surprises.
 */
.service__content li::before {
	content: '';
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.service__content li {
	padding-left: 28px;
}

/* ==========================================================================
   TESTIMONIALS
   Measured: outer section padding 100px 0; dark band on #1b1d1f.
   Layout is a carousel, not a marquee — a staggered wall of author photos on
   the left, one quote at a time on the right, pagination dots beneath.
   ========================================================================== */

.testimonials {
	padding-block: 100px;
	color: var(--c-surface);
	background-color: var(--c-ink);
}

.testimonials__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 60px;
}

/* --- Photo wall -----------------------------------------------------------
   The wall is taller than the band and deliberately bleeds past the top and
   bottom edges; this wrapper clips it. The inner track is scrolled by JS so
   the active author stays centred.
   -------------------------------------------------------------------------- */

.testimonials__wall {
	position: relative;
	flex: 0 0 auto;
	width: 400px;
	/*
	 * Deliberately shorter than the face track so the wall bleeds past the
	 * top and bottom edges and has room to travel. Track height is
	 * 3 rows x 190px + 2 x 20px gap = 610px, so this leaves ~190px of scroll
	 * spread across the slides — visible on every advance.
	 */
	height: 620px; 
}

.testimonials__faces {
	display: grid;
	grid-template-columns: repeat(2, 190px);
	gap: 20px;
	will-change: transform;
}

/* Offset the second column so the grid reads as staggered, as in the original. */
.testimonials__faces > *:nth-child(even) {
	transform: translateY(-60px);
}

.testimonials__face {
	position: relative;
	width: 190px;
	height: 190px;
	overflow: hidden;
	border-radius: 50%;
	/* Inactive faces sit back in the dark rather than going flat grey. */
	opacity: 0.45;
	filter: grayscale(1) brightness(0.5);
	transition: opacity var(--dur-slow) var(--ease-out),
	            filter var(--dur-slow) var(--ease-out);
}

.testimonials__face.is-active {
	opacity: 1;
	filter: none;
}

.testimonials__face-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonials__face-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Quote --------------------------------------------------------------- */

.testimonials__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 60px;
	border-left: 1px solid var(--c-white-05);
	/* Claim horizontal gestures for the carousel, leave vertical to scroll. */
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}

.testimonials__viewport.is-dragging {
	cursor: grabbing;
}

/* Quotes can differ in length; reserve height so the dots do not jump. */
.testimonials__slides {
	min-height: 320px;
}

.testimonials__mark {
	display: block;
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-size: 64px;
	line-height: 0.6;
	color: var(--c-surface);
}			.testimonials__mark svg {
    width: 52px !important;
}

.testimonial[hidden] {
	display: none;
}

.testimonial {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 0;
}

.testimonial__quote {
	margin: 0;
	font-family: var(--font-display);
	/* Measured quote: 36px Instrument Sans 500. */
	font-size: var(--fs-36);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--c-surface);
}

.testimonial__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.testimonial__avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--r-xl);
}

.testimonial__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.testimonial__name {
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-medium);
	font-style: normal;
	line-height: var(--lh-snug);
	color: var(--c-surface);
}

.testimonial__role {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-white-70);
}

/* --- Pagination dots ----------------------------------------------------- */

.testimonials__dots {
	display: flex;
	flex-direction: row;
	/* 16px gap + 8px dot = 24px pitch, matching the hit-area size below. */
	gap: 16px;
	margin-top: 50px;
}

.testimonials__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--c-white-50);
	opacity: 0.4;
	cursor: pointer;
	transition: opacity var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out);
}

.testimonials__dot.is-active {
	background-color: var(--c-surface);
	opacity: 1;
}

/*
 * Dots are 8px, which is well under the 24px minimum target size. The hit
 * area is enlarged with a centred pseudo-element rather than by growing the
 * dot itself.
 *
 * The target must not exceed the dot pitch, or neighbouring targets overlap
 * and the topmost one swallows clicks meant for its neighbour. Pitch here is
 * 8px dot + 16px gap = 24px, so the target is capped at 24px.
 */
.testimonials__dot {
	position: relative;
}

.testimonials__dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

@media (hover: hover) {
	.testimonials__dot:hover { opacity: 0.8; }
}

/* ==========================================================================
   BLOG CARDS
   ========================================================================== */

.blog__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

.post-card__media {
	overflow: hidden;
	border-radius: var(--r-md);
	aspect-ratio: 380 / 260;
	background-color: var(--c-body-20);
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.post-card__details {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.post-card__date {
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	color: var(--c-muted);
}

.post-card__title {
	font-size: var(--fs-24);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

.post-card__excerpt {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

.post-card__more {
	margin-top: auto;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-2);
	color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   HOVER — additions, not present in the Framer original. See components.css
   for the rationale. Delete for a strict 1:1 clone.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.project-card:hover .project-card__image,
	.post-card__link:hover .post-card__image {
		transform: scale(1.03);
	}

	.post-card__link:hover .post-card__title {
		color: var(--c-accent);
	}
}

/* ==========================================================================
   RESPONSIVE — Framer's exact tiers
   ========================================================================== */

@media (min-width: 810px) and (max-width: 1199.98px) {
	.hero__cover { padding: 180px 30px 40px; }
	.hero__title { flex-direction: column; align-items: flex-start; gap: 20px; }
	.hero__action { flex-direction: column; align-items: flex-start; gap: 20px; }

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

	.about__grid { gap: 30px; }
	/* Carousel at tablet: smaller photo wall, quote below-right. */
	.testimonials__inner { gap: 40px; }
	.testimonials__faces { grid-template-columns: repeat(2, 130px); gap: 16px; }
	.testimonials__face { width: 130px; height: 130px; }
	.testimonials__viewport { padding-left: 40px; }
	.section__head--split { flex-direction: column; gap: 20px; }

	/* Measured tablet pitch: 72px (font 42px). */
	.hero__ticker { height: 72px; }
	.hero__ticker-item { height: 72px; }

	/* Number column shrinks with the track; content stays aligned to it. */
	.service__summary { grid-template-columns: 160px 1fr auto; }
	.service__content { padding-left: 180px; }

	/*
	 * Framer keeps the Details row horizontal at 900px — measured as
	 * details 840 wide, description column 500, image 300x200 alongside.
	 * Stacking here made the open panel 801px against the original's 628px.
	 */
	.service__description { flex: 0 0 500px; max-width: 500px; }
}

@media (max-width: 809.98px) {
	.hero__cover { padding: 140px 20px 40px; }

	.hero__title {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.hero__heading { max-width: none; }

	/* Measured phone pitch: 62px (font 38px). The GSAP loop reads the
	   rendered height, so it stays in sync automatically. */
	.hero__ticker { width: 100%; min-width: 0; max-width: 100%; height: 62px; }
	.hero__ticker-item { height: 62px; }

	.hero__action {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.trusted {
		flex-direction: column;
		/*
		 * `flex-start` makes children size to their own content, which let the
		 * marquee track expand to 1080px and blew out the page width. Stretch
		 * keeps it bound to the container.
		 */
		align-items: stretch;
		gap: 15px;
		min-height: 0;
	}

	.trusted__marquee {
		width: 100%;
		min-width: 0;
	}

	.trusted__label {
		padding-right: 0;
		border-right: 0;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--c-white-05);
	}

	.trusted__list { flex-wrap: wrap; gap: 20px; }

	.contact-card { min-width: 0; width: 100%; }

	.about__grid { flex-direction: column; align-items: stretch; gap: 30px; }
	.about__content { max-width: none; }
	.about__stats { flex-direction: row; flex-wrap: wrap; gap: 30px; }

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

	.section__head--split { flex-direction: column; gap: 15px; }
	.section__head { margin-bottom: 40px; }
	.section__action { margin-top: 40px; }

	.service__summary {
		gap: 15px;
		/* Measured: 30px block at every breakpoint. Phone titles wrap to two
		   lines, which is why the closed panel is 135px here vs 110px on
		   desktop — taller, not shorter. */
		padding-block: 30px;
		min-height: 0;
	}

	/*
	 * Measured phone Title block: flex column, gap 10px — the number label
	 * sits above the title. 24px label + 10px gap + 41px title = 75px, which
	 * with 30px padding either side gives the 135px closed panel.
	 */
	.service__summary {
		/* Heading block + icon; the 250px number column does not fit here. */
		grid-template-columns: 1fr auto;
	}

	/*
	 * `display: contents` lets the grid position number and title on larger
	 * screens; on phone they regroup into a column block, with the number
	 * above the title (measured 24px label + 10px gap + 41px title = 75px).
	 */
	.service__heading {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-width: 0;
	}

	/* No number column to align to at this width. */
	.service__content { padding-left: 0; }

	.service__content {
		flex-direction: column;
		gap: 20px;
		padding-bottom: 30px;
	}

	/* Measured: the panel image goes full-width on phone, not 300x200. */
	.service__image {
		width: 100%;
		height: auto;
		aspect-ratio: 350 / 200;
	}

	.service__content > p:first-child { flex: 1 1 auto; max-width: none; }

	.testimonials { padding-block: 60px; }

	/*
	 * Phone: the photo wall would crowd the quote, so it drops to a single
	 * row of smaller circles above the text and the divider rule is removed.
	 */
	.testimonials__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}

	/* The wall is a fixed 400px on desktop, which overflows a 390px viewport. */
	.testimonials__wall {
		width: 100%;
		height: auto;
	}

	.testimonials__faces {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}

	.testimonials__faces > *:nth-child(even) { transform: none; }
	.testimonials__faces > *:nth-child(n+5) { display: none; }

	.testimonials__face { width: 100%; height: auto; aspect-ratio: 1; }

	.testimonials__viewport {
		padding-left: 0;
		border-left: 0;
	}

	.testimonials__mark { font-size: 44px; }
	.testimonial { gap: 24px; }
	.testimonials__dots { margin-top: 30px; }
}

/* ==========================================================================
   INNER PAGES — page header, breadcrumbs, archives, single views
   ========================================================================== */

/* Inner pages sit below the fixed header, which the hero handles itself. */
.page-header {
	padding-top: calc(var(--header-h) + 80px);
	padding-bottom: 60px;
}

.breadcrumbs__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

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

.breadcrumbs__sep {
	color: var(--c-body-20);
}

.breadcrumbs__item--current {
	color: var(--c-ink);
}

.page-header__title {
	/* Measured h1: 64 / 54 / 42 across the three tiers. */
	font-size: var(--fs-64);
	line-height: var(--lh-snug); 
}

.page-header__intro {
	max-width: 60ch;
	margin-top: 20px;
	font-size: var(--fs-18);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

/* The archive sections follow a page header, so they lose their top padding. */
.section--archive {
	padding-top: 0;
}

.archive__empty {
	font-size: var(--fs-18);
	color: var(--c-body-80);
}

/* --------------------------------------------------------------------------
   PROJECT CARD — wrapper element varies (div by default, a when linked)
   -------------------------------------------------------------------------- */

.project-card__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	color: inherit;
}

/* --------------------------------------------------------------------------
   SINGLE POST
   -------------------------------------------------------------------------- */

.post-single__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

.post-single__author {
	color: var(--c-ink);
}

.post-single__reading {
	color: var(--c-muted);
}

.post-single__cover {
	margin-bottom: 60px;
	overflow: hidden;
	border-radius: var(--r-md);
	/* Reserves space before the image loads — protects CLS. */
	aspect-ratio: 1200 / 640;
	background-color: var(--c-body-20);
}

.post-single__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Article body: a readable measure regardless of the 1200px container. */
.post-single__content {
	max-width: 75ch;
	font-size: var(--fs-18);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

.post-single__content h2,
.post-single__content h3,
.post-single__content h4 {
	margin-top: 50px;
	margin-bottom: 20px;
	color: var(--c-ink);
}

.post-single__content h2 { font-size: var(--fs-42); }
.post-single__content h3 { font-size: var(--fs-32); }
.post-single__content h4 { font-size: var(--fs-24); }

.post-single__content > *:first-child { margin-top: 0; }

.post-single__content p,
.post-single__content ul,
.post-single__content ol {
	margin-bottom: 24px;
}

.post-single__content ul,
.post-single__content ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 0;
}

.post-single__content li {
	position: relative;
	padding-left: 24px;
}

.post-single__content ul li::before {
	content: '';
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--c-accent);
}

.post-single__content ol {
	counter-reset: latent-ol;
}

.post-single__content ol li {
	counter-increment: latent-ol;
}

.post-single__content ol li::before {
	content: counter(latent-ol) '.';
	position: absolute;
	left: 0;
	color: var(--c-accent);
	font-weight: var(--fw-medium);
}

.post-single__content a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-single__content figure {
	margin: 40px 0;
}

.post-single__content img {
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.post-single__content blockquote {
	margin: 40px 0;
	padding-left: 24px;
	border-left: 2px solid var(--c-accent);
	font-family: var(--font-display);
	font-size: var(--fs-24);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

/* --- Post footer: author + prev/next -------------------------------------
   Measured: author block flex row gap 20px with a 75px circular photo;
   nav block flex row gap 20px with 116x41 pills, both between two rules.
   -------------------------------------------------------------------------- */

.post-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 60px;
	padding-block: 40px;
	border-top: 1px solid var(--c-body-20);
	border-bottom: 1px solid var(--c-body-20);
}

.post-author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.post-author__photo {
	flex: 0 0 auto;
	/* Measured 75x75, fully rounded. */
	width: 75px;
	height: 75px;
	overflow: hidden;
	border-radius: 50%;
}

.post-author__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-author__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.post-author__name {
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--c-ink);
}

/* Measured: DM Sans 16px/400 at 22.4px, rgba(27,29,31,0.8). */
.post-author__role {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink-80);
}

.post-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

@media (max-width: 809.98px) {
	.post-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		margin-top: 40px;
		padding-block: 30px;
	}

	.post-author__photo { width: 60px; height: 60px; }
	.post-nav { width: 100%; }
	.post-nav .btn { flex: 1 1 0; }
}

/* --------------------------------------------------------------------------
   SINGLE PROJECT
   -------------------------------------------------------------------------- */

.project-single__cover {
	margin-bottom: 60px;
	overflow: hidden;
	border-radius: var(--r-md);
	aspect-ratio: 1200 / 640;
	background-color: var(--c-body-20);
}

.project-single__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-single__body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 60px;
}

.project-single__content {
	flex: 1 1 auto;
	max-width: 70ch;
	font-size: var(--fs-18);
	line-height: var(--lh-body);
	color: var(--c-body-80);
}

.project-single__content p { margin-bottom: 24px; }

.project-single__link { margin-top: 30px; }

.project-single__facts {
	flex: 0 0 300px;
}

.project-facts__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 16px;
	border-bottom: 1px solid var(--c-body-20);
}

.project-facts__row:first-child { border-top: 1px solid var(--c-body-20); }

.project-facts__label {
	font-size: var(--fs-13);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-4);
	color: var(--c-muted);
	text-transform: uppercase;
}

.project-facts__value {
	margin: 0;
	font-size: var(--fs-16);
	color: var(--c-ink);
}

.project-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	margin-top: 60px;
}

.project-gallery__image {
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

.pagination .nav-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	font-size: var(--fs-14);
	color: var(--c-body-80);
	transition: background-color var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out);
}

.pagination .page-numbers.current {
	color: var(--c-surface);
	background-color: var(--c-ink);
}

@media (hover: hover) {
	.pagination .page-numbers:not(.current):hover {
		color: var(--c-accent);
	}
}

/* --------------------------------------------------------------------------
   INNER PAGE RESPONSIVE
   -------------------------------------------------------------------------- */

@media (min-width: 810px) and (max-width: 1199.98px) {
	.page-header { padding-top: calc(var(--header-h) + 60px); }
	.project-single__body { flex-direction: column; gap: 40px; }
	.project-single__facts { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 809.98px) {
	.page-header {
		padding-top: calc(var(--header-h) + 40px);
		padding-bottom: 40px;
	}

	.page-header__title { max-width: none; }

	.post-single__cover,
	.project-single__cover { margin-bottom: 40px; }

	.post-single__content { font-size: var(--fs-16); }
	.post-single__content h2 { font-size: var(--fs-28); }
	.post-single__content h3 { font-size: var(--fs-24); }
	.post-single__content h4 { font-size: var(--fs-20); }
	.post-single__content h2,
	.post-single__content h3,
	.post-single__content h4 { margin-top: 32px; }

	.project-single__body { flex-direction: column; gap: 30px; }
	.project-single__facts { flex: 1 1 auto; width: 100%; }
	.project-single__content { font-size: var(--fs-16); }

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

/* ==========================================================================
   CONTACT PAGE + FORM
   Measured on the live site: message textarea 550x200, submit 550x40,
   inputs 526px wide inside a 550px column.
   ========================================================================== */

/* Heading block shown only in the home page contact section — the contact
   page renders these in its page header instead. */
.contact__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact__heading {
	/* Matches the contact page's h1 treatment. */
	font-size: var(--fs-64);
	line-height: var(--lh-tight);
	color: var(--c-ink);
}

/*
 * Measured: details column 550px at x=120, form column 550px at x=770 —
 * a 100px gap on the 1200px track.
 */
.contact__grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 100px;
}

.contact__details {
	display: flex;
	flex: 0 0 550px;
	flex-direction: column;
	/* Measured 50px between the intro and the detail list. */
	gap: 50px;
	max-width: 550px;
}

.contact__form-wrap {
	flex: 0 0 550px;
	max-width: 550px;
}

/* Measured detail list: grid, 260px + 30px + 260px = 550px. */
.contact__list {
	display: grid;
	grid-template-columns: 260px 260px;
	gap: 30px;
}

.contact-detail {
	display: flex;
	flex-direction: column;
	/* Measured label y=378 -> value y=417. */
	gap: 10px;
}

/* Locations and Business Hours span the full 550px row. */
.contact-detail--wide {
	grid-column: 1 / -1;
}

/* Measured: Instrument Sans 24px/500 at 28.8px, solid ink. */
.contact-detail__label {
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-0);
	color: var(--c-ink);
	text-transform: none;
}

/* Measured: DM Sans 16px/400 at 22.4px. */
.contact-detail__value {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink);
	font-style: normal;
}

/*
 * Business hours sit in two sub-columns (measured x=120 and x=310, i.e. a
 * 190px pitch), with the days solid and the time at 80% opacity.
 */
.contact-hours {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 10px 0;
}

.contact-hours__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-hours__days {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink);
}

.contact-hours__time {
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink-80);
}

/* Email and phone are links; Locations is an <address> and stays static. */
a.contact-detail__value {
	position: relative;
	display: inline-block;
	transition: color var(--dur-base) var(--ease-out);    width: fit-content;
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */

.form {
	display: flex;
	flex-direction: column;
	/* Measured 30px between fields. */
	gap: 30px;
}

.form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form__label {
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-2);
	color: var(--c-ink);
}

.form__required {
	color: var(--c-accent);
}

.form__input {
	width: 100%;
	/* Filled field style, matching the original: grey box, rounded, no rule. */
	padding: 16px 18px;
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	color: var(--c-ink);
	background-color: #f4f4f4;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	transition: border-color var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out);
}

.form__input::placeholder {
	color: var(--c-muted);
}

.form__input:focus {
	outline: none;
	border-color: var(--c-ink);
	background-color: var(--c-surface);
}

.form__input.has-error {
	border-color: var(--c-accent);
}

/* Keyboard focus still gets a visible ring, since the border alone is subtle. */
.form__input:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 4px;
}

.form__textarea {
	/* Measured textarea: 550x200. */
	min-height: 200px;
	resize: vertical;
}

.form__error {
	font-size: var(--fs-13);
	line-height: var(--lh-body);
	color: var(--c-accent);
}

.form__notice {
	padding: 16px 20px;
	border-radius: var(--r-sm);
	font-size: var(--fs-14);
	line-height: var(--lh-body);
}

.form__notice--success {
	color: #1c6b33;
	background-color: rgba(63, 191, 95, 0.12);
	border: 1px solid rgba(63, 191, 95, 0.35);
}

.form__notice--error {
	color: var(--c-accent);
	background-color: rgba(232, 72, 28, 0.08);
	border: 1px solid rgba(232, 72, 28, 0.3);
}

/*
 * Honeypot. Must be reachable in the DOM for bots to find and fill, but
 * never visible or focusable for a real user. display:none is avoided
 * because some bots skip hidden inputs — this stays "rendered" but off-canvas.
 */
.form__trap {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form button[type="submit"] {
	margin-top: 8px;
	min-height: 48px; /* Comfortable touch target. */
}

@media (min-width: 810px) and (max-width: 1199.98px) {
	.contact__grid { gap: 40px; }
	.contact__details,
	.contact__form-wrap { flex: 1 1 50%; max-width: none; }
	.contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
}

@media (max-width: 809.98px) {
	.contact__grid {
		flex-direction: column;
		gap: 40px;
	}

	.contact__details,
	.contact__form-wrap { flex: 1 1 auto; width: 100%; max-width: none; }
	.contact__details { gap: 30px; }

	/* Two 260px columns will not fit a 390px viewport. */
	.contact__list { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.contact-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
	.contact-detail__label { font-size: var(--fs-20); }
}

/* Marquee viewport — clips the duplicated track so the wrap is invisible. */
.trusted__marquee,
.testimonials__marquee {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.trusted__list {
	flex-wrap: nowrap;
	will-change: transform;
}