/* ==========================================================================
   Homepage — Figma 130:6 (1440 wide). Large distances scale with --u.
   ========================================================================== */

/* Salient/WPBakery plugin CSS still loads a clearfix on .container (::before/::after
   with display:table), which would become grid items. */
.home-expertise__grid::before, .home-expertise__grid::after,
.home-adv__grid::before, .home-adv__grid::after { content: none; display: none; }

/* --- Hero (title at y324, over navy; header sits on top) ------------------ */
.home-hero { padding-top: calc(324 * var(--u)); }
.home-hero__title { max-width: 856px; }
.home-hero__sub { margin-top: 40px; }
.home-hero__cta { margin-top: 40px; }

/* --- Company cards (rules at y847 / y1630) -------------------------------- */
.home-companies { padding-top: calc(223 * var(--u)); }
.home-companies__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: calc(31.5 * var(--u));
}
.co-card { position: relative; display: flex; flex-direction: column; }
.co-card__rule { display: block; }
.co-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.co-card__name { margin-top: 29px; font-weight: 400; transition: color 0.3s; }
.co-card__media { margin-top: 31px; height: calc(543 * var(--u)); }
.co-card__media img { position: absolute; inset: 0; }
.co-card__badge { position: absolute; right: 10px; bottom: 17px; z-index: 1; }
.co-card__caption { min-height: 75px; margin-top: 41px; margin-bottom: 44px; max-width: 411px; padding-right: 8px; }
.co-card__caption span { display: block; color: var(--brand-tint); }
.co-card__rule--end { margin-top: auto; }
@media (hover: hover) {
	.co-card__link:hover .co-card__name { color: var(--brand-tint); }
}

/* --- About (label y1773, statement y1872, buttons y2252) ------------------ */
.home-about { padding-top: calc(142 * var(--u)); }
.home-about .btn--arrow { padding-left: 9px; gap: 11px; }
.home-about .label, .home-expertise .label { font-weight: 400; }
.home-about__statement { margin-top: calc(80 * var(--u)); max-width: 1296px; }
.home-about__statement p + p { margin-top: 1.25em; } /* one 50px blank line */
.home-about__actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: calc(80 * var(--u)); }

/* --- Expertise (label x72 y2426, text x515 y2423 w853) -------------------- */
.home-expertise { padding-top: calc(141 * var(--u)); }
.home-expertise__grid {
	display: grid;
	grid-template-columns: calc(443 * var(--u)) minmax(0, 853px);
	justify-content: space-between;
}
.home-expertise__side .label { margin-top: 3px; }
.home-expertise__btn { margin-top: 44px; }
.home-expertise__text { font-size: 16px; line-height: 25px; text-align: left; }
.home-expertise__text p + p { margin-top: 25px; }
.home-expertise__lead { font-family: var(--serif); font-size: 24px; line-height: 25px; }

/* --- Advantages accordion (image 520x746). Follows Expertise directly on the
   same navy, so the gap above the title repeats the design's 142px rhythm
   between navy sections (companies → About, About → Expertise). ---------- */
.home-adv { padding: calc(120 * var(--u)) 0 calc(207 * var(--u)); }
.home-adv__grid {
	display: grid;
	grid-template-columns: minmax(0, 632fr) minmax(0, 520fr);
	column-gap: calc(144 * var(--u));
	align-items: start;
}
.home-adv__title { margin-top: calc(22 * var(--u)); max-width: 632px; }
.home-adv__media { height: calc(746 * var(--u)); }
.home-adv__img { position: absolute; inset: -4% 0; }
.home-adv__img img { width: 100%; height: 100%; object-fit: cover; }

.accordion { margin-top: calc(126 * var(--u)); }
.accordion__item { border-bottom: 1px solid var(--line-light); }
.accordion__heading { font: inherit; }
.accordion__btn {
	display: grid;
	grid-template-columns: 85px minmax(0, 1fr) 15px;
	align-items: start;
	width: 100%;
	padding: 27px 32px 27px 26px;
	font-size: 18px;
	line-height: 25px;
	text-align: left;
	color: var(--white);
}
.accordion__item:first-child .accordion__btn { padding-top: 0; }
.accordion__num { color: var(--brand-tint); }
.accordion__title { padding-right: 24px; transition: color 0.3s; }
.accordion__icon { display: block; width: 15px; height: 18px; margin-top: 1px; transition: transform 0.6s var(--ease-out); }
.accordion__icon svg { width: 15px; height: 18px; }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
@media (hover: hover) {
	.accordion__btn:hover .accordion__title { color: var(--brand-tint); }
	.accordion__item:not(.is-open) .accordion__btn:hover .accordion__icon { transform: translateY(3px); }
}
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; min-height: 0; }
.accordion__body {
	max-width: 632px;
	padding: 0 0 27px 111px;
	font-size: 16px;
	line-height: 25px;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.accordion__body p + p { margin-top: 12px; }
.accordion__points { display: grid; gap: 12px; }
.accordion__points li { position: relative; padding-left: 22px; }
.accordion__points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--brand-tint); }
.accordion__item.is-open .accordion__body { opacity: 1; transform: none; transition-delay: 0.08s; }
.accordion__item:not(.is-open) .accordion__panel { visibility: hidden; transition: grid-template-rows 0.6s var(--ease-out), visibility 0s linear 0.6s; }
.accordion__btn { margin-bottom: 0; }
.accordion__item.is-open .accordion__btn { padding-bottom: 27px; }

/* ==========================================================================
   Tablet / phone
   ========================================================================== */
@media (max-width: 1023px) {
	.home-hero { padding-top: calc(var(--header-h) + 120px); }
	.home-companies { padding-top: 96px; }
	.home-companies__list { grid-template-columns: 1fr; row-gap: 0; }
	.co-card:not(:last-child) .co-card__rule--end { display: none; }
	.co-card + .co-card { margin-top: 12px; }
	.co-card__media { height: auto; aspect-ratio: 4 / 3; }
	.co-card__caption { min-height: 0; margin-top: 24px; margin-bottom: 28px; }
	.co-card__name { margin-top: 22px; }
	.co-card__media { margin-top: 20px; }

	.home-about { padding-top: 96px; }
	.home-about__statement { margin-top: 32px; }
	.home-about__actions { margin-top: 40px; }

	.home-expertise { padding: 96px 0 0; }
	.home-expertise__grid { grid-template-columns: 1fr; row-gap: 28px; }
	.home-expertise__side { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
	.home-expertise__side .label { margin-top: 0; }
	.home-expertise__btn { margin-top: 0; }
	.home-expertise__lead { font-size: 22px; line-height: 28px; }


	.home-adv { padding: 80px 0 96px; }
	.home-adv__grid { grid-template-columns: 1fr; row-gap: 48px; }
	.home-adv__title { margin-top: 0; }
	.home-adv__media { height: auto; aspect-ratio: 4 / 3; }
	.accordion { margin-top: 48px; }
}
@media (max-width: 599px) {
	.home-hero { padding-top: calc(var(--header-h) + 88px); }
	.home-hero__sub, .home-hero__cta { margin-top: 28px; }
	.home-companies { padding-top: 72px; }
	.co-card__media { aspect-ratio: 5 / 4.6; }
	.home-about__statement { font-size: 26px; line-height: 34px; }
	.home-adv__media { aspect-ratio: 4 / 5; }
	.accordion__btn { grid-template-columns: 44px minmax(0, 1fr) 15px; padding: 22px 4px 22px 0; font-size: 17px; }
	.accordion__item.is-open .accordion__btn { padding-bottom: 16px; }
	.accordion__body { padding: 0 4px 24px 44px; }
}
.co-card__media img { object-position: var(--pos, 50% 50%); }