/**
 * Serficor — presentation layer.
 *
 * Organised as: tokens → reset → base → layout → components → sections →
 * blog → accessibility → responsive. Every colour and measure used more than
 * once is a custom property so the palette can be retuned in one place.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
	/* Brand palette, sampled from the live site. */
	--serficor-navy: #002162;
	--serficor-navy-deep: #023f54;
	--serficor-navy-soft: #0b1f3a;
	--serficor-blue: #005e8e;
	--serficor-blue-mid: #0083b6;
	--serficor-blue-light: #508fb9;
	--serficor-blue-pale: #75a8d0;
	--serficor-gold: #f9b866;
	--serficor-gold-deep: #e49001;
	--serficor-orange: #f08900;
	--serficor-purple: #5d1173;
	--serficor-purple-dark: #4a1864;
	--serficor-blue-dark: #001B4B;

	--serficor-white: #fff;
	--serficor-ink: #333;
	--serficor-post-text: #7a7a7a;
	--serficor-article-text: #374151;
	--serficor-post-link: #c36;
	--serficor-grey-100: #f3f4f6;
	--serficor-grey-200: #ededed;
	--serficor-grey-500: #6b7280;

	/* Typography */
	--serficor-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, sans-serif;
	--serficor-fs-display: 50px;
	--serficor-fs-section: clamp(1.75rem, 1.1rem + 2.1vw, 3.125rem);
	--serficor-fs-card: 20px;
	--serficor-fs-body: 1rem;
	--serficor-fs-small: 0.8125rem;

	/* Layout */
	--serficor-container: 1140px;
	--serficor-container-wide: 1240px;
	--serficor-container-narrow: 820px;
	--serficor-gutter: 20px;
	--serficor-header-height: 106px;
	--serficor-radius: 3px;
	--serficor-radius-card: 8px;

	--serficor-transition: 0.25s ease;
}

/*
 * The display size steps at the same breakpoints the live site uses
 * (50 / 40 / 30px) rather than scaling fluidly, so every heading matches it
 * exactly at any width — and long words stop overflowing on small screens.
 */
@media (max-width: 1024px) {
	:root {
		--serficor-fs-display: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--serficor-fs-display: 30px;
	}
}

/* ------------------------------------------------------------- Anchor links */

/*
 * The header is sticky, so a section linked to by its id has to keep clear of
 * it.
 *
 * No `scroll-behavior: smooth` here on purpose: with it, the jump that follows
 * a cross-page link lands a few hundred pixels short, because the animation is
 * cut off while the rest of the homepage is still settling.
 */
#servicios,
#imap,
#industrias,
#testimoniales {
	scroll-margin-top: calc(var(--serficor-header-height) + 24px);
}

/* ------------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--serficor-white);
	color: var(--serficor-ink);
	font-family: var(--serficor-font);
	font-size: var(--serficor-fs-body);
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--serficor-transition);
}

a:hover,
a:focus-visible {
	color: var(--serficor-gold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 600;
	line-height: 1.02;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

.site-header ul,
.site-footer ul,
.service-cards,
.client-wall,
.industry-grid,
.news-grid,
.post-grid,
.testimonials__people,
.testimonials__dots,
.social-links {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Honour the visitor's motion preference across every animated element. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ Layout */

.serficor-container {
	width: 100%;
	max-width: var(--serficor-container);
	margin-inline: auto;
	padding-inline: var(--serficor-gutter);
}

.serficor-container--wide {
	max-width: var(--serficor-container-wide);
}

.serficor-container--narrow {
	max-width: var(--serficor-container-narrow);
}

/* -------------------------------------------------------------- Components */

.serficor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: var(--serficor-radius);
	color: var(--serficor-white);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	transition: background-color var(--serficor-transition), transform var(--serficor-transition);
}

.serficor-button:hover,
.serficor-button:focus-visible {
	color: var(--serficor-white);
	transform: translateY(-1px);
}

.serficor-button--purple {
	background-color: var(--serficor-purple);
}

.serficor-button--blue {
	background-color: var(--serficor-blue-dark);
}

.serficor-button--purple:hover,
.serficor-button--purple:focus-visible {
	background-color: var(--serficor-purple-dark);
}

.serficor-button--gold {
	background-color: var(--serficor-gold);
}

.serficor-button--gold:hover,
.serficor-button--gold:focus-visible {
	background-color: var(--serficor-gold-deep);
}

/* The two-weight headline treatment: light word + bold word. */
.serficor-heading {
	font-size: var(--serficor-fs-section);
	font-weight: 200;
	letter-spacing: 0.01em;
}

.serficor-heading strong,
.serficor-heading b {
	font-weight: 700;
}

.serficor-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
}

/* ------------------------------------------------------------------ Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background-color: rgb(0 26 74 / 97%);
	color: var(--serficor-white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--serficor-container-wide);
	min-height: var(--serficor-header-height);
	margin-inline: auto;
	padding-inline: var(--serficor-gutter);
}

.site-branding {
	flex: none;
}

.site-title {
	margin: 0;
	font-size: 1rem;
	line-height: 0;
}

.site-branding img,
.custom-logo {
	width: auto;
	max-height: 40px;
}

/* --- Primary navigation --- */

/* Nav and items reach the bottom of the header, so the pointer never crosses
   a gap on its way down into a submenu. */
.main-navigation {
	display: flex;
	align-self: stretch;
	align-items: stretch;
}

.primary-menu {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.primary-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.primary-menu a {
	display: block;
	padding: 13px 12px;
	color: var(--serficor-white);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.33;
	white-space: nowrap;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus-visible,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a,
.primary-menu > li.current_page_item > a {
	color: var(--serficor-gold);
}

/* Submenu toggle sits inside the parent item, next to its label. */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0 8px 0 0;
	color: var(--serficor-white);
	transition: transform var(--serficor-transition), color var(--serficor-transition);
}

.submenu-toggle .serficor-icon {
	width: 1rem;
	height: 1rem;
}

.primary-menu > li:hover > .submenu-toggle,
.submenu-toggle[aria-expanded="true"] {
	color: var(--serficor-gold);
}

.submenu-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 950;
	min-width: 260px;
	padding: 8px 0;
	background-color: var(--serficor-navy);
	box-shadow: 0 12px 30px rgb(0 0 0 / 25%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--serficor-transition), transform var(--serficor-transition), visibility var(--serficor-transition);
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu,
.primary-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The last items sit against the right edge, so their panel opens inwards
   instead of pushing the document wider. */
.primary-menu > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: 0;
}

.primary-menu .sub-menu a {
	padding: 10px 20px;
	font-size: 0.875rem;
	white-space: normal;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	color: var(--serficor-gold);
	background-color: rgb(255 255 255 / 6%);
}

/*
 * Full-width submenu panel (Servicios, Newsletter), as on the live site: the
 * links, the firm's tagline over a purple-to-blue rule, and animated ripples in
 * the corner. The parent item gives up its positioning so the panel anchors to
 * the header and spans the viewport.
 *
 * The panel starts at the top of the header, not below it, and sits at
 * z-index -1: above the header's own background but under the logo and menu,
 * so header and panel read as one surface instead of two navy bands.
 */
.primary-menu > .menu-item--mega {
	position: static;
}

.mega-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	min-height: calc(var(--serficor-header-height) + 400px);
	padding-top: var(--serficor-header-height);
	overflow: hidden;
	background-color: rgb(0 26 74 / 97%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--serficor-transition), visibility var(--serficor-transition);
}

.primary-menu > li:hover > .mega-menu,
.primary-menu > li:focus-within > .mega-menu,
.primary-menu > li.is-open > .mega-menu {
	opacity: 1;
	visibility: visible;
}

.mega-menu__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	max-width: 1054px;
	margin-inline: auto;
	padding: 24px var(--serficor-gutter) 56px;
}

.mega-menu .sub-menu {
	position: static;
	display: grid;
	grid-column: 2;
	gap: 9px;
	min-width: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transform: none;
}

.mega-menu .sub-menu a {
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	transition: color 0.3s;
}

.mega-menu .sub-menu a:hover,
.mega-menu .sub-menu a:focus-visible {
	background: none;
}

.mega-menu__quote {
	grid-column: 1 / -1;
	justify-self: end;
	width: 100%;
	max-width: 340px;
	margin: 90px 0 0;
	color: var(--serficor-white);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	text-align: right;
}

.mega-menu__quote::after {
	content: "";
	display: block;
	height: 6px;
	margin-top: 30px;
	background-image: linear-gradient(90deg, #541970, #035586);
}

/* Concentric circles centred on the panel's bottom-right corner. */
.mega-menu__ripples {
	position: absolute;
	right: 0;
	bottom: 0;
}

.mega-menu__ripples span {
	--ripple: 400px;

	position: absolute;
	top: calc(var(--ripple) / -2);
	left: calc(var(--ripple) / -2);
	width: var(--ripple);
	height: var(--ripple);
	border-radius: 50%;
	background-color: rgb(203 203 203 / 70%);
	box-shadow: 0 0 1px 0 var(--serficor-blue-light);
	opacity: 0.2;
	animation: serficor-ripple 50s infinite;
}

.mega-menu__ripples span:nth-child(2) {
	--ripple: 320px;

	opacity: 0.5;
}

.mega-menu__ripples span:nth-child(3) {
	--ripple: 240px;

	opacity: 0.7;
}

.mega-menu__ripples span:nth-child(4) {
	--ripple: 160px;

	opacity: 0.8;
}

.mega-menu__ripples span:nth-child(5) {
	--ripple: 80px;

	opacity: 0.9;
}

@keyframes serficor-ripple {

	0%,
	100% {
		transform: scale(0.8);
	}

	50% {
		transform: scale(1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega-menu__ripples span {
		animation: none;
	}
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--serficor-white);
}

.menu-toggle .serficor-icon--close,
.menu-toggle[aria-expanded="true"] .serficor-icon--menu {
	display: none;
}

.menu-toggle[aria-expanded="true"] .serficor-icon--close {
	display: block;
}

.main-navigation__empty {
	margin: 0;
	font-size: 0.875rem;
}

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

.home-hero {
	position: relative;
	height: 850px;
	max-height: calc(100vh - var(--serficor-header-height));
	overflow: hidden;
	background-color: var(--serficor-navy);
}

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

/* --------------------------------------------------------------- Servicios */

.home-services {
	position: relative;
	padding-block: 96px 96px;
	background-color: var(--serficor-navy);
	background-image: linear-gradient(180deg, #002162 0%, #062d5d 20%, #00619b 52%, #9dd2e8 84%, #fff 100%);
	color: var(--serficor-white);
}


.home-services__inner {
	position: relative;
	width: 100%;
	/* max-width: var(--serficor-container-wide);*/
	margin-inline: auto;
	padding-inline: var(--serficor-gutter);
}

.home-services__title {
	margin-bottom: 64px;
	font-size: var(--serficor-fs-display);
	font-weight: 600;
	text-align: center;
	color: white;
}

.service-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 200px;
}

.service-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	min-height: 320px;
	padding: 40px 12px 36px;
	border-radius: var(--serficor-radius-card);
	background-color: #001A4AB0;
	color: var(--serficor-white);
	text-align: center;
	transition: background-color var(--serficor-transition), transform var(--serficor-transition);
}

.service-card__link:hover,
.service-card__link:focus-visible {
	background-color: rgb(1 32 82 / 80%);
	color: var(--serficor-white);
	transform: translateY(-4px);
}

.service-card__icon img {
	width: 60%;
	height: auto;
	margin-inline: auto;
}

.service-card__title {
	display: block;
	font-size: var(--serficor-fs-card);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --- Trayectoria + muro de clientes --- */

/*
 * This band breaks out of the centred container: on the live site the copy is
 * indented from the viewport edge, not from a 1140px column, and the headline
 * and the paragraph sit on two different measures (40% and 81% of the section).
 */
.home-legacy {
	width: 100%;
	padding-inline: 10px;
	margin-bottom: 150px;
}

.home-legacy__title,
.home-legacy__cta,
.home-legacy__intro {
	padding-left: var(--legacy-indent, 80px);
}

.home-legacy__title {
	width: 40%;
	margin-bottom: 40px;
	color: var(--serficor-white);
	font-size: var(--serficor-fs-display);
	font-weight: 200;
	line-height: 1.02;
	text-transform: uppercase;
}

/* On the live site the emphasised words are 400 against a 200 base — a step
   up in weight, not a true bold. */
.home-legacy__title b,
.home-legacy__title strong {
	font-weight: 400;
}

.home-legacy__cta {
	margin-bottom: 28px;
}

.home-legacy__intro {
	width: 81%;
	margin-bottom: 0;
	color: #000;
	font-size: 1.4375rem;
	line-height: 1.5;
}

.client-wall {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 92px 48px;
	align-items: center;
	margin-bottom: 72px;
}

.client-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.client-wall__item img {
	width: auto;
	max-width: 100%;
	max-height: 190px;
	object-fit: contain;
}

.client-wall__disclaimer {
	margin: 0;
	color: var(--serficor-ink);
	font-size: var(--serficor-fs-small);
	text-align: center;
}

/* ------------------------------------------------------------ Somos IMAP */

.home-imap {
	padding: 80px 170px 140px 170px;
	background-color: var(--serficor-navy-deep);
	background-image:
		linear-gradient(180deg, #023f54 0%, rgb(0 30 60 / 94%) 55%, rgb(0 26 74 / 99%) 100%),
		url("../images/bg/imap-bg.jpg");
	background-position: center, center top;
	background-size: cover, cover;
	color: var(--serficor-white);
	text-align: center;
}

.home-imap__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 56px;
	font-size: var(--serficor-fs-display);
	font-weight: 200;
	text-transform: uppercase;
}

/*
 * Decorative brand marks that bracket the headline. On the live site they do
 * not sit on the text's centre line — each hangs lower by a fixed share of its
 * own height (42/130 and 12/105), which is what lines the left mark's bar and
 * the arrow up with the type. Expressing the shift as a percentage of the
 * element keeps that relationship at every breakpoint.
 */
.home-imap__flourish {
	width: 130px;
	height: 130px;
	flex: none;
	background-image: url("../images/flourish-1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(32.3%);
}

.home-imap__flourish--end {
	width: 105px;
	height: 105px;
	margin-left: 2px;
	background-image: url("../images/flourish-2.png");
	transform: translateY(11.4%);
}

.home-imap__title b,
.home-imap__title strong {
	font-weight: 400;
}

.home-imap__text {
	padding: 80px;
	margin-inline: auto;
	margin-bottom: 40px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.home-imap__cta {
	margin-bottom: 90px;
}

.home-imap__numbers-title {
	margin-bottom: 190px;
	font-size: var(--serficor-fs-display);
	font-weight: 400;
	text-transform: uppercase;
}

.home-imap__stat {
	margin-inline: auto;
	margin-bottom: 135px;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	font-weight: 300;
	line-height: 1.35;
}

.home-imap__stat-figure {
	color: var(--serficor-gold);
	font-size: 1.75em;
	font-weight: 400;
}

.home-imap__testimonials-title {
	margin-bottom: 64px;
	font-size: var(--serficor-fs-display);
	font-weight: 700;
	text-transform: uppercase;
}

/* --- Testimoniales --- */

.testimonials {
	position: relative;
	text-align: left;
}

.testimonials__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.testimonials__slide[hidden] {
	display: none;
}

.testimonials__people {
	display: grid;
	gap: 12px;
}

/* Each name is a real button so the quote can be picked by pointer, keyboard
   or screen reader; the selected one drops its card to read as "open". */
.testimonials__person {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border-radius: var(--serficor-radius-card);
	background-color: var(--serficor-blue-light);
	color: inherit;
	text-align: left;
	transition: background-color var(--serficor-transition);
}

.testimonials__person:hover {
	background-color: var(--serficor-blue-pale);
}

.testimonials__person.is-active,
.testimonials__person.is-active:hover {
	background-color: rgb(0 26 74 / 55%);
	cursor: default;
}

.testimonials__quotes {
	height: 100%;
}

.testimonials__name {
	display: block;
	margin: 0 0 2px;
	color: var(--serficor-gold);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.testimonials__role {
	display: block;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.testimonials__quote[hidden] {
	display: none;
}

.testimonials__quote {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	margin: 0;
	padding: 48px 40px;
	border-radius: var(--serficor-radius-card);
	background-color: var(--serficor-blue-light);
	text-align: center;
}

.testimonials__quote blockquote {
	margin: 0;
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1.35;
}

.testimonials__quote figcaption {
	display: grid;
	gap: 4px;
}

.testimonials__quote-author {
	color: var(--serficor-gold);
	font-weight: 700;
}

.testimonials__quote-source {
	font-size: 0.9375rem;
}

.testimonials__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
}

.testimonials__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 35%);
	transition: background-color var(--serficor-transition), transform var(--serficor-transition);
}

.testimonials__dot.is-active,
.testimonials__dot:hover {
	background-color: var(--serficor-gold);
	transform: scale(1.2);
}

/* ---------------------------------------------------------------- Our Crew */

.home-crew {
	background-color: var(--serficor-navy);
	background-image: url("../images/bg/our-crew.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}

.home-crew__inner {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--serficor-container-wide);
	min-height: 960px;
	margin-inline: auto;
	padding: 0 var(--serficor-gutter);
}

.home-crew__content {
	align-self: center;
	width: min(100%, 380px);
	margin-top: 300px;
	color: var(--serficor-navy);
	text-align: center;
}

.home-crew__title {
	margin-bottom: 16px;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	text-transform: uppercase;
}

.home-crew__text {
	margin-bottom: 28px;
	font-size: 1.0625rem;
	line-height: 1.45;
}

/* -------------------------------------------------------------- Industrias */

.home-industries {
	padding-block: 84px 70px;
	background-color: var(--serficor-white);
}

.home-industries__title {
	margin-bottom: 56px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.industry-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 32px;
	max-width: 1200px;
	margin-inline: auto;
}

.industry-grid__item {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 84px;
}

.industry-grid__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--serficor-gold-deep);
}

.industry-grid__icon svg {
	width: 100%;
	height: 100%;
}

.industry-grid__label {
	color: var(--serficor-navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.home-industries__cta {
	margin: 56px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------ Latest news */

.home-news {
	padding-block: 60px 100px;
	background-color: var(--serficor-white);
}

.home-news__title {
	margin-bottom: 48px;
	color: var(--serficor-navy);
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
}

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

.news-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--serficor-radius-card);
	background-color: var(--serficor-grey-200);
}

.news-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.news-card__inner:hover .news-card__media img {
	transform: scale(1.04);
}

.news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px 28px 32px;
}

.news-card__title {
	margin: 0;
	color: var(--serficor-navy);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.32;
}

.news-card__excerpt {
	margin: 0;
	color: var(--serficor-grey-500);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.news-card__more {
	margin-top: auto;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 0.875rem;
	text-transform: none;
}

/* ----------------------------------------------------------- Banner cierre */

.home-banner {
	display: flex;
	align-items: center;
	min-height: 506px;
	padding-block: 80px;
	background-color: var(--serficor-navy);
	background-image: url("../images/bg/banner-leading.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}

/* Base copy is white at 400; only the opening clause is brand blue and bold,
   matching the live site rather than colouring the whole sentence. */
.home-banner__text {
	max-width: 593px;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--serficor-white);
	font-size: var(--serficor-fs-display);
	font-weight: 400;
	line-height: 1.06;
}

.home-banner__text b,
.home-banner__text strong {
	color: var(--serficor-blue-mid);
	font-weight: 700;
}

/* ------------------------------------------------------------------ Footer */

.site-footer {
	background-color: var(--serficor-blue);
	color: var(--serficor-white);
}

.site-footer__main {
	padding-block: 46px 110px;
}

.site-footer .serficor-container {
	max-width: 1320px;
}

.site-footer__title {
	margin-bottom: 40px;
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: start;
}

.footer-menu {
	display: grid;
	gap: 12px;
}

.footer-menu a {
	font-size: 0.9375rem;
	line-height: 1.35;
	text-transform: uppercase;
}

.site-footer__connect {
	display: grid;
	gap: 20px;
}

.social-links {
	display: flex;
	gap: 28px;
	justify-content: center;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--serficor-white);
}

.social-links .serficor-icon {
	width: 32px;
	height: 32px;
}

.social-links a:hover,
.social-links a:focus-visible {
	color: var(--serficor-gold);
}

.newsletter-form {
	display: grid;
	gap: 12px;
	justify-items: start;
}

.newsletter-form__label {
	font-size: 1rem;
}

.newsletter-form__input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 2px;
	background-color: var(--serficor-white);
	color: var(--serficor-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.newsletter-form__submit {
	padding: 10px 20px;
	border-radius: 2px;
	font-size: var(--serficor-fs-small);
	text-transform: none;
}

.newsletter-form__legal {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: center;
}

.site-footer__bar {
	padding-block: 18px;
	background-color: var(--serficor-blue);
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--serficor-fs-small);
	text-align: center;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- Blog */

.site-main--archive,
.site-main--single,
.site-main--page,
.site-main--error {
	padding-block: 72px 96px;
}

.page-header {
	margin-bottom: 48px;
}

.page-title,
.entry-title {
	color: var(--serficor-navy);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
}

.entry-meta {
	color: var(--serficor-grey-500);
	font-size: 0.875rem;
}

.entry-header {
	margin-bottom: 28px;
	text-align: center;
}

.entry-media {
	margin: 0 0 32px;
}

.entry-media img {
	width: 100%;
	border-radius: var(--serficor-radius-card);
}

.entry-content {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.site-main--single .entry-content {
	color: var(--serficor-post-text);
}

.site-main--single .entry-content a {
	color: var(--serficor-post-link);
	text-decoration: none;
}

.entry-content :is(h2, h3, h4) {
	margin-block: 1.6em 0.5em;
	color: var(--serficor-navy);
}

.entry-content a {
	color: var(--serficor-blue);
	text-decoration: underline;
}

.entry-content blockquote {
	margin: 2em 0;
	padding-left: 24px;
	border-left: 4px solid var(--serficor-gold);
	font-style: italic;
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin-top: 32px;
}

.entry-tags li a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--serficor-grey-100);
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-small);
}

.pagination,
.post-navigation {
	margin-top: 56px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border-radius: var(--serficor-radius);
	background-color: var(--serficor-grey-100);
	color: var(--serficor-navy);
	font-size: 0.9375rem;
}

.pagination .page-numbers.current {
	background-color: var(--serficor-purple);
	color: var(--serficor-white);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.nav-label {
	display: block;
	color: var(--serficor-grey-500);
	font-size: var(--serficor-fs-small);
	text-transform: uppercase;
}

.nav-title {
	color: var(--serficor-navy);
	font-weight: 600;
}

.related-posts {
	margin-top: 96px;
	padding-top: 72px;
	border-top: 1px solid var(--serficor-grey-200);
}

.related-posts__title {
	margin-bottom: 48px;
	color: var(--serficor-navy);
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
	text-align: center;
	text-transform: uppercase;
}

.related-posts .entry-meta {
	margin-top: -6px;
}

.search-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
}

.search-field {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid #d5d8de;
	border-radius: var(--serficor-radius);
	font: inherit;
}

.comments-area {
	margin-top: 72px;
}

.comments-title {
	margin-bottom: 24px;
	color: var(--serficor-navy);
	font-size: 1.5rem;
}

.comment-list {
	display: grid;
	gap: 24px;
	list-style: none;
}

.widget-area {
	display: grid;
	gap: 32px;
}

.widget-title {
	color: var(--serficor-navy);
	font-size: 1.125rem;
}

/* ----------------------------------------------------------- Accesibilidad */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 1000;
	padding: 12px 20px;
	background-color: var(--serficor-white);
	color: var(--serficor-navy);
	transition: top var(--serficor-transition);
}

.skip-link:focus {
	top: 12px;
	width: auto;
	height: auto;
	clip-path: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--serficor-gold);
	outline-offset: 2px;
}

.alignwide {
	max-width: var(--serficor-container-wide);
}

.alignfull {
	max-width: none;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1200px) {
	.primary-menu a {
		padding-inline: 8px;
		font-size: 0.875rem;
	}

	.home-crew__inner {
		min-height: 720px;
	}
}

@media (max-width: 1024px) {
	:root {
		--serficor-header-height: 84px;
	}

	.menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 100%;
		max-height: calc(100vh - var(--serficor-header-height));
		overflow-y: auto;
		background-color: var(--serficor-navy);
		clip-path: inset(0 0 100% 0);
		transition: clip-path var(--serficor-transition);
	}

	.main-navigation.is-open {
		clip-path: inset(0 0 0 0);
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0 24px;
	}

	.primary-menu > li {
		flex-wrap: wrap;
		border-bottom: 1px solid rgb(255 255 255 / 8%);
	}

	.primary-menu > li > a {
		flex: 1;
		padding: 16px 20px;
	}

	.submenu-toggle {
		padding: 16px 20px;
	}

	/* On touch the submenu is a disclosure panel, not a hover drop-down. */
	.primary-menu > li:nth-last-child(-n+2) > .sub-menu {
		right: auto;
	}

	.primary-menu .sub-menu {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		padding: 0 0 8px;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.primary-menu > li.is-open > .sub-menu {
		display: block;
	}

	.primary-menu > li:hover > .sub-menu:not(.is-open) {
		display: none;
	}

	.primary-menu > li.is-open > .sub-menu {
		display: block;
	}

	.primary-menu .sub-menu a {
		padding-left: 36px;
	}

	/* Inside the mobile panel the full-width submenu is a plain disclosure list. */
	/* z-index back to auto: as a flex item the panel would still honour the
	   desktop -1 and sink under the page, swallowing every tap on its links. */
	.mega-menu {
		position: static;
		z-index: auto;
		display: none;
		width: 100%;
		min-height: 0;
		padding-top: 0;
		background: none;
		opacity: 1;
		visibility: visible;
	}

	.primary-menu > li.is-open > .mega-menu {
		display: block;
	}

	.mega-menu__inner {
		display: block;
		max-width: none;
		padding: 0 0 8px;
	}

	.mega-menu .sub-menu {
		display: block;
	}

	.mega-menu .sub-menu a {
		padding: 10px 20px 10px 36px;
		font-size: 0.875rem;
		font-weight: 400;
	}

	.mega-menu__quote,
	.mega-menu__ripples {
		display: none;
	}

	.service-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: 80px;
	}

	.home-legacy {
		--legacy-indent: 40px;
	}

	/* The 170px side inset the section carries on desktop leaves almost no
	   room once the viewport narrows, so it steps down here and hands the job
	   back to the container's own gutter on phones. */
	.home-imap {
		padding-inline: 48px;
	}

	.home-imap__text {
		padding: 0;
	}

	.home-legacy__title {
		width: 70%;
	}

	.home-legacy__intro {
		width: 100%;
		font-size: 1.25rem;
	}

	.client-wall {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px 28px;
	}

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

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

	.home-crew {
		background-position: 28% top;
	}

	.home-crew__inner {
		min-height: 620px;
	}

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

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

@media (max-width: 767px) {
	.home-hero {
		height: 62vh;
		min-height: 420px;
	}

	.home-services {
		padding-block: 64px 48px;
		background-size: 200px auto, cover;
	}

	.home-services__title {
		margin-bottom: 40px;
	}

	.service-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.service-card__link {
		min-height: 0;
		padding: 32px 20px;
	}

	.home-legacy {
		--legacy-indent: 10px;
		margin-bottom: 64px;
	}

	.home-legacy__title,
	.home-legacy__intro {
		width: 100%;
	}

	.home-legacy__intro {
		font-size: 1.0625rem;
	}

	.client-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.home-imap {
		padding-block: 72px;
		padding-inline: 0;
	}

	.home-imap__title {
		gap: 12px;
	}

	.home-imap__flourish {
		width: 64px;
		height: 64px;
	}

	.home-imap__flourish--end {
		width: 52px;
		height: 52px;
	}

	.home-imap__numbers-title {
		margin-bottom: 72px;
	}

	.home-imap__stat {
		margin-bottom: 72px;
	}

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

	.testimonials__quote {
		padding: 32px 24px;
	}

	.home-crew {
		background-image: none;
		background-color: #cfe4ef;
	}

	.home-crew__inner {
		min-height: 0;
		justify-content: center;
	}

	.home-crew__content {
		width: 100%;
		margin-top: 0;
		padding-block: 64px;
	}

	.home-industries {
		padding-block: 64px 56px;
	}

	.home-industries__title {
		margin-bottom: 40px;
	}

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

	.industry-grid__item {
		min-height: 0;
		gap: 18px;
	}

	.industry-grid__icon {
		width: 56px;
		height: 56px;
	}

	.home-industries__cta {
		margin-top: 48px;
	}

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

	.home-banner {
		min-height: 320px;
	}

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

	.post-navigation .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Keep the services content above the wave watermark. */
.home-services__inner {
	z-index: 1;
}

/* ------------------------------------------------------ Reveal on scroll */

/*
 * Elements marked with `data-reveal` drop in from above once they enter the
 * viewport. The hidden start state is scoped to `.js-reveal`, a flag printed
 * in <head> before first paint, so the content is never left invisible when
 * JavaScript is unavailable and never flashes in before being hidden.
 */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-from, -48px));
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--reveal-delay, 0) * 80ms);
	will-change: opacity, transform;
}

/*
 * Direction variants. Bare `data-reveal` drops from above, `up` rises from
 * below, and `fade` cancels the travel so only the opacity animates.
 */
.js-reveal [data-reveal="up"] {
	--reveal-from: 48px;
}

.js-reveal [data-reveal="fade"] {
	--reveal-from: 0px;
}

.js-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal],
	.js-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------ Página Nosotros */

.about-hero {
	display: flex;
	align-items: center;
	min-height: 560px;
	padding-block: 60px;
	background-color: var(--serficor-navy-deep);
	background-image: url("../images/bg/nosotros-hero.png");
	background-position: center;
	background-size: cover;
	text-align: center;
}

.about-hero__title {
	margin-bottom: 32px;
	color: var(--serficor-white);
	font-size: var(--serficor-fs-display);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

/* The emphasised clause sits on its own line, as on the live site. */
.about-hero__title b,
.about-hero__title strong {
	display: block;
	color: var(--serficor-blue-mid);
	font-weight: 700;
}

.about-hero__text {
	max-width: 1093px;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--serficor-white);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.125;
}

.about-history {
	padding-block: 96px 120px;
	background-color: var(--serficor-white);
}

.about-history__title {
	margin-bottom: 156px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
}

/*
 * One row of three milestones. The picture, the accent bar, the connector and
 * the copy are separate boxes so the connector can hang between the bar and
 * the text without disturbing either.
 */
/* The timeline sits on a 1040px measure, narrower than the page container,
   which is what gives each picture its 347px column on the live site. */
.history-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	min-height: 760px;
	max-width: 1040px;
	margin-inline: auto;
	list-style: none;
}

.history-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.history-item__media {
	position: relative;
	width: 100%;
	aspect-ratio: 347 / 380;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Sits over the photograph, which is the upper third of the artwork. */
.history-item__year {
	position: absolute;
	top: 32%;
	left: 50%;
	color: var(--serficor-white);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.history-item__text {
	width: 287px;
	max-width: 100%;
	margin: 30px 0 0;
	color: var(--serficor-ink);
	font-size: 1.0625rem;
	line-height: 1.5;
	text-align: justify;
}

.about-content {
	padding-block: 0 96px;
}

@media (max-width: 1024px) {
	.about-hero {
		min-height: 440px;
	}

	.about-hero__text {
		font-size: 1.25rem;
	}

	.about-history {
		padding-block: 72px 88px;
	}

	.about-history__title {
		margin-bottom: 64px;
	}

	.history-item__text {
		width: 100%;
		padding-inline: 12px;
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	.about-hero {
		min-height: 380px;
		padding-block: 48px;
	}

	.about-history {
		padding-block: 56px 64px;
	}

	.about-history__title {
		margin-bottom: 40px;
	}

	/* Stacked: each milestone becomes a full-width card of its own. */
	.history-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-bottom: 40px;
	}

	.history-item__media {
		aspect-ratio: 16 / 10;
	}

	.history-item__text {
		margin-top: 36px;
		text-align: left;
	}
}

/* ------------------------------------------------------- Páginas de servicio */

/* Shared banner for the interior pages: 560px of artwork with the title on top. */
.service-hero,
.page-hero {
	display: flex;
	align-items: center;
	min-height: 560px;
	padding-block: 60px;
	background-color: var(--serficor-navy-deep);
	background-position: center;
	background-size: cover;
	text-align: center;
}

.service-hero__title {
	margin: 0;
	color: var(--serficor-white);
	line-height: 1.05;
	text-transform: uppercase;
}

.service-hero__kicker,
.service-hero__name {
	display: block;
	font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.875rem);
}

.service-hero__kicker {
	font-weight: 300;
}

.service-hero__name {
	font-weight: 700;
}

.service-lead {
	padding-block: 64px 0;
	background-color: var(--serficor-white);
}

.service-lead__text {
	max-width: 1040px;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--serficor-ink);
	font-size: 1.25rem;
	line-height: 1.5;
	text-align: center;
}

.service-features {
	padding-block: 72px 96px;
	background-color: var(--serficor-white);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 40px;
	max-width: 1040px;
	margin-inline: auto;
	list-style: none;
}

.feature-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * The pictogram artwork is white line-work on transparency; the navy disc
 * behind it is a separate image, exactly as the live site composes it.
 */
.feature-grid__icon {
	width: 164px;
	height: 164px;
	padding: 10px;
	margin-bottom: 20px;
	background-image: url("../images/servicios/circulo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
}

.feature-grid__label {
	max-width: 274px;
	margin: 0;
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
}

.service-content {
	padding-block: 0 96px;
}

.page-hero__title {
	margin: 0;
	color: var(--serficor-white);
	font-size: var(--serficor-fs-display);
	font-weight: 700;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.service-hero,
	.page-hero {
		min-height: 420px;
	}

	.service-lead__text {
		font-size: 1.125rem;
	}

	.feature-grid {
		gap: 44px 28px;
	}

	.feature-grid__icon {
		width: 140px;
		height: 140px;
	}
}

@media (max-width: 767px) {
	.service-hero,
	.page-hero {
		min-height: 320px;
		padding-block: 48px;
	}

	.service-lead {
		padding-block: 48px 0;
	}

	.service-features {
		padding-block: 48px 64px;
	}

	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
	}

	.feature-grid__icon {
		width: 120px;
		height: 120px;
	}

	.feature-grid__label {
		font-size: 0.875rem;
	}
}

/* ------------------------------------------------------------- Our Crew */

.crew-banner {
	height: 591px;
	background-color: var(--serficor-navy);
	background-position: center;
	background-size: cover;
}

.crew-intro {
	padding-block: 113px 0;
	background-color: var(--serficor-white);
}

.crew-intro__title {
	margin: 0;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	font-weight: 200;
	text-align: center;
	text-transform: uppercase;
}

/* A step up in weight, not a true bold — as on the live site. */
.crew-intro__title strong,
.crew-intro__title b {
	font-weight: 400;
}

.crew-list {
	padding-block: 186px 96px;
	background-color: var(--serficor-white);
}

/* Rows are laid out one at a time — three across, then pairs — and each row
   centres itself, so the short final rows sit under the middle of the first. */
.crew-row {
	display: flex;
	flex-wrap: wrap;
	gap: 110px 41px;
	justify-content: center;
	list-style: none;
}

.crew-row + .crew-row {
	margin-top: 110px;
}

.crew-card {
	width: 292px;
	max-width: 100%;
}

.crew-card__photo {
	width: 100%;
	aspect-ratio: 292 / 377;
	object-fit: cover;
	margin-bottom: 16px;
}

.crew-card__name {
	margin: 0 0 4px;
	color: var(--serficor-navy);
	font-size: 1.25rem;
	font-weight: 700;
}

.crew-card__role {
	margin: 0;
	color: var(--serficor-blue);
	font-size: 1rem;
}

/* Cards link through to each person's page; the anchor carries the whole card
   so the photo, name and role are one target. */
.crew-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.crew-card__link:hover .crew-card__photo,
.crew-card__link:focus-visible .crew-card__photo {
	opacity: 0.88;
}

.crew-card__link:hover .crew-card__name,
.crew-card__link:focus-visible .crew-card__name {
	color: var(--serficor-blue-mid);
}

.crew-card__photo {
	transition: opacity var(--serficor-transition);
}

.crew-card__name {
	transition: color var(--serficor-transition);
}

/* --------------------------------------------------- Our Crew: one member */

.crew-profile {
	padding-block: 80px 93px;
	background-color: var(--serficor-white);
}

/* Two equal halves, as on the live site: the story on the left, the portrait
   and the contact details on the right, each holding 50px off the centre line
   so the gutter between them reads as 100px. */
.crew-profile__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

/* The live site stacks these blocks in a flex column with a 20px gap, and the
   rhythm of the page depends on it, so the gap is reproduced rather than
   spread across per-element margins. */
.crew-profile__main,
.crew-profile__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.crew-profile__main {
	padding-right: 50px;
}

.crew-profile__name {
	margin: 0;
	color: var(--serficor-blue-dark);
	font-size: 40px;
	font-weight: 400;
	line-height: 51px;
	text-transform: uppercase;
}

.crew-profile__name b {
	font-weight: 700;
}

.crew-profile__role {
	margin: 0;
	color: var(--serficor-blue-mid);
	font-size: 30px;
	font-weight: 400;
	line-height: 51px;
	text-transform: uppercase;
}

.crew-profile__quote {
	margin: 30px 0;
	color: var(--serficor-blue-dark);
	font-size: 27px;
	font-style: italic;
	font-weight: 600;
	line-height: 34px;
	text-align: center;
}

.crew-profile__bio {
	color: var(--serficor-blue-dark);
	font-size: 16px;
	font-weight: 300;
	text-align: justify;
}

.crew-profile__bio p {
	margin: 0 0 1em;
}

.crew-profile__bio p:last-child {
	margin-bottom: 0;
}

.crew-profile__aside {
	padding-left: 50px;
}

.crew-profile__photo {
	display: block;
	width: 100%;
	max-width: 388px;
	height: auto;
}

.crew-profile__subtitle {
	margin: 0;
	color: var(--serficor-blue-mid);
	font-size: 30px;
	font-weight: 400;
	line-height: 51px;
	text-transform: uppercase;
}

.crew-profile__contact {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	list-style: none;
}

.crew-profile__contact a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--serficor-blue-dark);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}

.crew-profile__contact a:hover,
.crew-profile__contact a:focus-visible {
	color: var(--serficor-blue-mid);
}

.crew-profile__contact .serficor-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.crew-profile__hobbies {
	margin: 0;
	color: var(--serficor-blue-dark);
	font-size: 16px;
	font-style: italic;
	font-weight: 300;
}

.crew-nav {
	padding-bottom: 50px;
	background-color: var(--serficor-white);
}

.crew-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 96px;
}

.crew-nav__link {
	min-width: 80px;
	color: var(--serficor-blue-mid);
	font-size: 15px;
	font-weight: 400;
	line-height: 51px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.crew-nav__link--prev {
	text-align: end;
}

.crew-nav__link--next {
	text-align: start;
}

a.crew-nav__link:hover,
a.crew-nav__link:focus-visible {
	color: var(--serficor-navy);
}

/* Six dots in a 3×2 block — the live site's shorthand for "back to everyone". */
.crew-nav__grid {
	display: grid;
	grid-template-columns: repeat(3, 10px);
	gap: 5px;
	flex: none;
}

.crew-nav__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--serficor-blue-mid);
	transition: background-color var(--serficor-transition);
}

.crew-nav__grid:hover .crew-nav__dot,
.crew-nav__grid:focus-visible .crew-nav__dot {
	background-color: var(--serficor-navy);
}

.crew-profile__content {
	padding-bottom: 80px;
	background-color: var(--serficor-white);
}

/* ----------------------------------------------------------- The Anchor */

.anchor-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 890px;
	background-color: #001948;
	text-align: center;
}

.anchor-hero > div {
	padding-bottom: 300px;
}

/*
 * Wave that hands the navy hero over to the white section below. The SVG is
 * drawn a fraction wider than its box and re-centred, so sub-pixel widths
 * never leave a hairline of background showing at either edge.
 */
.shape-divider {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 144px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;

	/* The path fills the top of its viewBox, so the whole wrapper is turned
	   over to sit the wave against the section below. */
	transform: rotate(180deg);
}

.shape-divider svg {
	position: relative;
	left: 50%;
	display: block;
	width: calc(100% + 1.3px);

	/* The global reset clamps every svg to max-width:100%, which would undo
	   the fractional overhang this divider needs. */
	max-width: none;
	height: 100%;
	transform: translateX(-50%);
}

.shape-divider path {
	fill: var(--serficor-white);
}

.anchor-hero__welcome {
	margin-bottom: 24px;
	color: var(--serficor-white);
	font-size: 1.75rem;
	font-weight: 300;
}

.anchor-hero__logo {
	width: min(100%, 795px);
	height: auto;
	margin-inline: auto;
}

.anchor-intro {
	padding-block: 72px;
	background-color: var(--serficor-white);
}

.anchor-intro__text {
	max-width: 935px;
	margin-inline: auto;
	color: #000;
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: center;
}

/* Brand-blue emphasis, the same treatment the note below uses. */
.anchor-intro__text b,
.anchor-intro__text strong,
.anchor-pillars__note b,
.anchor-pillars__note strong {
	color: var(--serficor-blue-mid);
	font-weight: 700;
}

.anchor-pillars {
	padding-block: 0 72px;
	background-color: var(--serficor-white);
}

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	max-width: 1040px;
	margin-inline: auto;
	list-style: none;
}

.pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pillar__icon {
	width: 100px;
	height: 100px;
	margin-bottom: 16px;
}

/* Both lines share one weight and the same grey; the live site does not
   emphasise the second word here. */
.pillar__label {
	margin: 0;
	color: #7a7a7a;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
}

.pillar__title,
.pillar__text {
	display: block;
}

.anchor-pillars__note {
	max-width: 935px;
	margin: 56px auto 0;
	color: #1a1a1a;
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: center;
}

.anchor-quote {
	display: flex;
	align-items: center;
	min-height: 500px;
	padding-block: 72px;
	background-color: #225580;
	text-align: center;
}

.anchor-quote__text {
	max-width: 1026px;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--serficor-white);
	font-size: var(--serficor-fs-display);
	font-weight: 400;
	line-height: 1.04;
	text-transform: uppercase;
}

.anchor-quote__text b,
.anchor-quote__text strong {
	font-weight: 700;
}

/* ------------------------------------------ Banner «actualiza tu contacto» */

.contact-update {
	display: flex;
	align-items: center;
	min-height: 670px;
	padding-block: 72px;
	background-color: var(--serficor-navy-deep);
	background-position: center;
	background-size: cover;
	text-align: center;
}

.contact-update__icon {
	width: 80px;
	height: auto;
	margin-inline: auto;
	margin-bottom: 16px;
}

.contact-update__title {
	margin-bottom: 40px;
	color: var(--serficor-gold);
	font-size: var(--serficor-fs-display);
	font-weight: 400;
	text-transform: uppercase;
}

.contact-update__title b,
.contact-update__title strong {
	font-weight: 700;
}

.contact-update__feedback {
	margin-bottom: 24px;
	color: var(--serficor-white);
	font-size: 1.0625rem;
}

.contact-update__feedback--error {
	color: var(--serficor-gold);
}

/* Two columns so Nombre and Apellidos share a row, everything else spans. */
.contact-update__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 36px;
	max-width: 505px;
	margin-inline: auto;
}

.contact-update__field {
	margin: 0;
	min-width: 0;
}

.contact-update__field--full {
	grid-column: 1 / -1;
}

.contact-update__form input[type="email"],
.contact-update__form input[type="text"] {
	width: 100%;
	max-width: 100%;
	height: 43px;
	padding: 8px 16px;
	border: 1px solid #69727d;
	border-radius: 3px;
	background-color: var(--serficor-white);
	color: var(--serficor-ink);
	font-family: inherit;
	font-size: 1.125rem;
}

.contact-update__actions {
	text-align: center;
}

.contact-update__submit {
	min-width: 149px;
	padding: 11px 24px;
	border-radius: 3px;
	background-color: #8cbcd5;
	color: var(--serficor-white);
	font-size: 1rem;
	transition: background-color var(--serficor-transition);
}

.contact-update__submit:hover,
.contact-update__submit:focus-visible {
	background-color: var(--serficor-blue-pale);
}

/* Kept in the layout but out of sight; `display:none` is skipped by some bots. */
.contact-update__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------- Newsletter */

.newsletter-intro {
	padding-block: 80px 96px;
	background-color: var(--serficor-white);
}

/* Widened so the content measures a full 1140px once the gutter is taken. */
.newsletter-intro .serficor-container {
	max-width: calc(1140px + var(--serficor-gutter) * 2);
}

.newsletter-intro__title {
	margin-bottom: 66px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * Cover on the left, copy and the calls to action on the right. The left
 * column is wider than the cover and the cover hugs its right edge, which is
 * what gives the pair the off-centre balance the live page has.
 */
.newsletter-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 456fr) minmax(0, 550fr);
	gap: 134px;
	align-items: start;
	max-width: 1140px;
	margin-inline: auto;
}

.newsletter-cover {
	justify-self: end;
	margin: 0;
}

/*
 * The white frame is the image's own padding over a white background — the
 * photo is inset within the 343px box rather than filling it.
 */
.newsletter-cover__image {
	display: block;
	width: 343px;
	max-width: 100%;
	height: auto;
	padding: 10px;
	border-radius: 16px;
	background-color: var(--serficor-white);
	box-shadow: 0 10px 26px rgb(0 0 0 / 18%);
}

.newsletter-cover__link {
	display: block;
}

.newsletter-body__text {
	margin-bottom: 28px;
	color: #7a7a7a;
	font-size: 1.25rem;
	line-height: 1.5;
	text-align: justify;
}

.newsletter-body__cta,
.newsletter-body__more {
	margin: 0;
	text-align: center;
}

.newsletter-body__cta {
	margin-bottom: 12px;
}

.newsletter-body__download {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 6px;
	background-color: var(--serficor-purple);
	color: var(--serficor-white);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	transition: background-color var(--serficor-transition);
}

.newsletter-body__download:hover,
.newsletter-body__download:focus-visible {
	background-color: var(--serficor-purple-dark);
	color: var(--serficor-white);
}

.newsletter-body__more a {
	color: #4caf50;
	font-size: 0.8125rem;
	font-weight: 500;
}

/* ------------------------------------------------------------ Insights */

.insights-list {
	padding-block: 72px 96px;
	background-color: var(--serficor-white);
}

/* ------------------------------------------------------------ Contacto */

.contact-main {
	padding-block: 90px 96px;
	background-color: #f5f5f5;
}

.contact-main__title {
	margin-bottom: 76px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
}

/* Phone and e-mail stack on the left, the address sits on the right. */
.contact-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
	margin-bottom: 96px;
	list-style: none;
}

.contact-details__group {
	display: grid;
	gap: 18px;
}

.contact-details__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--serficor-ink);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.contact-details .serficor-icon {
	flex: none;
	color: var(--serficor-navy);
}

.contact-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 596fr) minmax(0, 605fr);
	gap: 30px;
	align-items: start;
}

.contact-form__legend {
	margin: 0 0 24px;
	color: var(--serficor-navy);
	font-size: 1.75rem;
	font-weight: 700;
}

.contact-form {
	display: grid;
	gap: 10px;
	min-width: 0;
}

/* Flat white fields with no border, as on the live site. */
.contact-form input,
.contact-form textarea,
.jobs-form input[type="text"],
.jobs-form input[type="email"],
.jobs-form input[type="tel"] {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background-color: var(--serficor-white);
	color: var(--serficor-ink);
	font-family: inherit;
	font-size: 1rem;
}

.contact-form input,
.jobs-form input[type="text"],
.jobs-form input[type="email"],
.jobs-form input[type="tel"] {
	height: 40px;
}

.contact-form textarea {
	min-height: 199px;
	resize: vertical;
}

.contact-form__submit {
	width: 100%;
	height: 40px;
	background-color: var(--serficor-navy);
	color: var(--serficor-white);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color var(--serficor-transition);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background-color: var(--serficor-navy-soft);
}

.contact-main__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 605 / 451;
	height: auto;
	border: 0;
}

/* --------------------------------------------------------- Work with us */

.contact-jobs {
	padding-block: 0 96px;
	background-color: #f5f5f5;
}

.contact-jobs__title {
	margin-bottom: 56px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	font-weight: 200;
	text-align: center;
	text-transform: uppercase;
}

.contact-jobs__title b,
.contact-jobs__title strong {
	font-weight: 700;
}

.contact-jobs__text {
	max-width: 945px;
	margin-inline: auto;
	margin-bottom: 72px;
	color: var(--serficor-ink);
	font-size: 1.0625rem;
	line-height: 1.5;
	text-align: center;
}

.jobs-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 26px;
}

.jobs-form__field {
	margin: 0;
	min-width: 0;
}

.jobs-form__field--file,
.jobs-form__field--submit {
	grid-column: 1;
}

.jobs-form__field--file label {
	display: block;
	margin-bottom: 4px;
	color: var(--serficor-navy);
	font-size: 0.9375rem;
}

.jobs-form__field--file span {
	color: #d63638;
}

/* --------------------------------------------------------------- Legal */

.legal-hero {
	padding-block: 72px 32px;
	background-color: var(--serficor-white);
}

.legal-hero__title {
	margin: 0;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	text-transform: uppercase;
}

.legal-body {
	padding-block: 0 96px;
	background-color: var(--serficor-white);
}

.legal-body .entry-content {
	font-size: 1rem;
	line-height: 1.7;
	text-align: justify;
}

@media (max-width: 1024px) {
	.crew-banner {
		height: 380px;
	}

	.crew-row {
		gap: 72px 28px;
	}

	.crew-profile__main {
		padding-right: 24px;
	}

	.crew-profile__aside {
		padding-left: 24px;
	}

	.crew-nav__inner {
		gap: 56px;
	}

	.crew-row + .crew-row {
		margin-top: 72px;
	}

	.newsletter-intro__grid {
		gap: 64px;
	}

	.anchor-hero {
		min-height: 620px;
	}

	.shape-divider {
		height: 96px;
	}

	.contact-main__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.contact-details {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.crew-banner {
		height: 240px;
	}

	.crew-intro {
		padding-block: 56px 0;
	}

	.crew-row {
		gap: 40px 16px;
	}

	.crew-row + .crew-row {
		margin-top: 40px;
	}

	.crew-card {
		width: calc(50% - 8px);
	}

	/* The portrait leads on a phone, as it does on the live site. */
	.crew-profile {
		padding-block: 32px 56px;
	}

	.crew-profile__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.crew-profile__main,
	.crew-profile__aside {
		padding-inline: 0;
	}

	.crew-profile__name {
		font-size: 30px;
		line-height: 40px;
	}

	.crew-profile__role {
		font-size: 22px;
		line-height: 34px;
	}

	.crew-profile__quote {
		font-size: 20px;
		line-height: 28px;
	}

	.crew-profile__bio {
		text-align: start;
	}

	.crew-profile__subtitle {
		font-size: 24px;
		line-height: 40px;
	}

	.crew-profile__photo {
		max-width: 100%;
	}

	.crew-nav__inner {
		gap: 24px;
	}

	.crew-nav__link {
		min-width: 0;
	}

	.anchor-hero {
		min-height: 420px;
	}

	.shape-divider {
		height: 56px;
	}

	.anchor-hero__welcome {
		font-size: 1.25rem;
	}

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

	.anchor-quote {
		min-height: 360px;
	}

	.contact-update {
		min-height: 460px;
	}

	.newsletter-intro,
	.contact-main {
		padding-block: 56px;
	}

	.newsletter-intro__title {
		margin-bottom: 40px;
	}

	.newsletter-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		justify-items: center;
	}

	.newsletter-body__text {
		text-align: left;
	}

	.contact-details {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 56px;
	}

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

	.jobs-form__field--file,
	.jobs-form__field--submit {
		grid-column: auto;
	}

	.contact-main__title {
		margin-bottom: 48px;
	}
}

/* ------------------------------------------------------- Casos de éxito */

.cases-intro {
	padding-block: 72px 0;
	background-color: var(--serficor-white);
	text-align: center;
}

.cases-intro__title {
	margin-bottom: 32px;
	color: var(--serficor-navy);
	font-size: var(--serficor-fs-display);
	text-transform: uppercase;
}

.cases-intro__title b {
	font-weight: 400;
}

.cases-wall {
	padding-block: 56px 96px;
	background-color: var(--serficor-white);
}

.cases-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	list-style: none;
}

.cases-grid img {
	width: 100%;
	height: auto;
	border-radius: var(--serficor-radius-card);
}

@media (max-width: 1024px) {
	.cases-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cases-intro {
		padding-block: 56px 0;
	}

	.cases-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
}

/* ---------------------------------------------------- Boletín (News) */

.site-main--issue {
	padding-block: 60px 96px;
	background-color: var(--serficor-white);
}

.issue__title {
	margin-bottom: 30px;
	color: var(--serficor-navy-soft);
	font-size: 2.5rem;
	font-weight: 800;
	text-align: center;
}

.issue__intro {
	margin-bottom: 44px;
	color: var(--serficor-navy-soft);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.issue-sections {
	display: grid;
	gap: 22px;
	list-style: none;
}

/*
 * Copy and picture swap sides on every other card, with the image flush to the
 * card edge. The order is set on the media so the markup can stay in reading
 * order for anyone not seeing the layout.
 */
.issue-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: stretch;
	overflow: hidden;
	border-radius: 4px;
	background-color: #f1f2f4;
}

.issue-section:nth-child(even) {
	grid-template-columns: 300px minmax(0, 1fr);
}

.issue-section:nth-child(even) .issue-section__media {
	order: -1;
}

.issue-section__body {
	padding: 30px 40px;
}

.issue-section__title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 14px;
	color: var(--serficor-navy-soft);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
}

.issue-section__number {
	color: #c9b27a;
	font-size: 2.125rem;
	font-weight: 800;
	line-height: 1;
}

.issue-section__text {
	color: var(--serficor-grey-500);
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: justify;
}

.issue-section__text p {
	margin-bottom: 0.9em;
}

.issue-section__cta {
	margin: 18px 0 0;
}

.issue-section__more {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 6px;
	background-color: var(--serficor-navy-soft);
	color: var(--serficor-white);
	font-size: 0.8125rem;
	line-height: 1;
	transition: background-color var(--serficor-transition);
}

.issue-section__more:hover,
.issue-section__more:focus-visible {
	background-color: var(--serficor-navy);
	color: var(--serficor-white);
}

.issue-section__media {
	min-height: 300px;
	background-position: center;
	background-size: cover;
}

.issue__content {
	margin-top: 56px;
}

/* --------------------------------------------------------- Una reseña */

/*
 * The newsletter sections follow the live site's own article layout: a centred
 * headline, the picture floated into the first paragraphs and a single way
 * back to the issue.
 */

.newsletter-detail {
	padding-block: 90px;
	background-color: var(--serficor-white);
}

.newsletter-detail-wrap {
	max-width: 1050px;
	margin-inline: auto;
	padding-inline: 32px;
}

.newsletter-detail-title {
	margin: 8px 0 50px;
	color: var(--serficor-navy-soft);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 48px;
	text-align: center;
}

/* The picture sits inside the text rather than above it, so the article opens
   on the words. `clear` is left alone on the body so nothing pushes it down. */
.newsletter-detail-hero {
	float: right;
	width: 38%;
	max-width: 420px;
	margin: 0 0 24px 40px;
}

.newsletter-detail-hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.newsletter-detail-body {
	color: var(--serficor-article-text);
	font-size: 17px;
	line-height: 1.85;
	text-align: justify;
}

.newsletter-detail-body p {
	margin: 0 0 0.9rem;
}

.newsletter-detail-body p:last-child {
	margin-bottom: 0;
}

/* The closing pull quote is a bold run inside the copy, not its own block. */
.newsletter-detail-body strong,
.newsletter-detail-body b {
	font-size: 20px;
	font-weight: 700;
}

/* The float has to be enclosed, or a short article would spill past the footer. */
.newsletter-detail-footer {
	display: flex;
	clear: both;
	justify-content: center;
	margin-top: 60px;
}

.newsletter-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 8px;
	background-color: var(--serficor-navy-soft);
	color: var(--serficor-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--serficor-transition),
		transform 0.15s ease;
}

.newsletter-back-btn:hover,
.newsletter-back-btn:focus-visible {
	background-color: #071529;
	color: var(--serficor-white);
	transform: translateY(-1px);
}

/* Below this width the column is too narrow to wrap text beside the picture. */
@media (max-width: 900px) {
	.newsletter-detail {
		padding-block: 56px;
	}

	.newsletter-detail-title {
		font-size: 30px;
		line-height: 38px;
		margin-bottom: 32px;
	}

	.newsletter-detail-hero {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 20px;
	}
}

@media (max-width: 768px) {
	.newsletter-detail-wrap {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.issue-section,
	.issue-section:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
	}

	.issue-section__media,
	.issue-section:nth-child(even) .issue-section__media {
		order: -1;
		min-height: 220px;
	}

	.issue-section__body {
		padding: 24px 20px;
	}

}