/*
 * Rico public site — base layer (fonts, tokens, Divi neutralisation, header, buttons, footer).
 * Ported from the approved EN v1.2 prototype styles.css; colours re-sampled from the
 * approved renders. Everything is scoped under body.rico-site so Divi-built pages are
 * unaffected and Divi's element rules never leak into the approved templates.
 */

/* ---------- Fonts (SIL OFL 1.1, self-hosted, see assets/fonts/OFL-*.txt) ---------- */
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/roboto-condensed-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/roboto-condensed-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/roboto-condensed-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/roboto-condensed-latin-wght-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* Barlow Condensed: closest OFL match to the approved hero lettering (decision A-2). */
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-800-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
.rico-site {
	--page: #101112;
	--ink: #060707;
	--gold: #f3bd37;
	--gold-bright: #ffe16a;
	--gold-dim: #6a5420;
	/* Text-bearing red: sampled #fb0a14 darkened to reach 4.65:1 with white text (WCAG AA). */
	--red: #e8101c;
	--red-hover: #c40d18;
	/* Decorative red (brush, rules) keeps the vivid sampled value. */
	--red-vivid: #fb0a14;
	/* Gold text on the cream interior panels: #f3bd37 is 1.7:1 there, so text darkens
	   to reach WCAG AA (small text 4.98:1, large text 3.7:1). Gold on dark is unchanged. */
	--gold-ink: #8f670e;
	--gold-ink-large: #a87a12;
	--error: #b3121f;
	--white: #fbfaf7;
	--sans: "Inter", Arial, sans-serif;
	--display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--hero: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	--frame: 1199px;
}

/* ---------- Divi neutralisation and base ---------- */
html:has(body.rico-site) {
	scroll-behavior: smooth;
	background: #101112;
}
body.rico-site {
	margin: 0;
	background: var(--page);
	color: var(--white);
	font: 400 15px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body.rico-site *,
body.rico-site *::before,
body.rico-site *::after {
	box-sizing: border-box;
}
/* body.rico-site (0,1,2) outranks Divi's element rules even if Divi's CSS loads later. */
body.rico-site :is(h1, h2, h3, p, ul, ol, li, summary, details) {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
}
body.rico-site :is(ul, ol) {
	list-style: none;
}
body.rico-site a {
	color: inherit;
	text-decoration: none;
}
body.rico-site :is(img, svg) {
	display: block;
	max-width: 100%;
}
body.rico-site strong {
	font-weight: 700;
}
body.rico-site button {
	font: inherit;
	cursor: pointer;
}
.rico-site :is(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gold-bright);
	outline-offset: 3px;
}
.rico-site main:focus {
	outline: none;
}
.rico-site [id] {
	scroll-margin-top: 16px;
}
.rico-site .gold {
	color: var(--gold);
}
.rico-site [hidden] {
	display: none !important;
}
.rico-site .eyebrow {
	font: 700 13px/1.2 var(--display);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 12px;
}
.rico-site .rico-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

.rico-site .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.rico-site .skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100;
	background: var(--gold);
	color: #111;
	font-weight: 800;
	padding: 12px 18px;
	border-radius: 4px;
}
.rico-site .skip-link:focus {
	top: 12px;
}

/* Approved desktop and mobile renders use slightly different wording in places. */
.rico-site .copy-narrow {
	display: none;
}

/* ---------- Buttons ---------- */
.rico-site .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 4px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.rico-site .btn--red {
	background: var(--red);
}
.rico-site .btn--red:hover {
	background: var(--red-hover);
}
.rico-site .outline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 23px;
	min-height: 48px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	color: var(--gold);
	font-weight: 800;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.rico-site .outline-btn:hover {
	background: #3a2b0f;
}

/* ---------- Header (interior default, from prototype .site-header) ---------- */
.rico-site .site-header {
	position: relative;
	z-index: 20;
	background: var(--ink);
	border-bottom: 1px solid var(--gold-dim);
}
.rico-site .header-inner {
	max-width: 1320px;
	height: 91px;
	margin: 0 auto;
	padding: 0 34px;
	display: flex;
	align-items: center;
	gap: 22px;
}
.rico-site .brand {
	position: relative;
	z-index: 22;
	flex: none;
	align-self: stretch;
	width: 240px;
}
.rico-site .brand img {
	position: absolute;
	top: -9px;
	left: 0;
	width: 195px;
	max-width: none;
	height: auto;
	filter: drop-shadow(0 4px 5px #0009);
}
.rico-site .desktop-nav {
	margin-left: auto;
}
.rico-site .desktop-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
}
.rico-site .desktop-nav a {
	position: relative;
	display: block;
	padding: 12px 0;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: #fff;
	transition: color 0.2s;
}
.rico-site .desktop-nav a:hover {
	color: var(--gold);
}
.rico-site .desktop-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 3px;
	border-radius: 3px;
	background: var(--gold);
}
.rico-site .header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rico-site .call-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 47px;
	padding: 0 16px;
	border: 1px solid var(--gold);
	border-radius: 5px;
	background: #0b0c0d;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.2px;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.rico-site .call-btn:hover {
	background: #1c1609;
}
.rico-site .call-btn .rico-icon {
	color: var(--gold);
	font-size: 22px;
}
.rico-site .header-request {
	min-height: 48px;
	font-size: 13.5px;
	font-weight: 600;
	padding: 0 17px 0 18px;
}
.rico-site .nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 30px;
}
.rico-site .nav-toggle__close,
.rico-site .nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}
.rico-site .nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}
/* Interior header at desktop widths. CP-25 (founder): the same restrained, contained treatment
   as Home on all five other pages — the bar sits inside the 1200px page frame (its gold side and
   bottom rules continue the interior frame), and the regular-weight navigation is grouped next
   to the actions instead of centred. The action buttons keep the interior masters' 14px/800 type
   and the phone spacing. The Home header keeps its own measured values in rico-home.css. */
@media (min-width: 881px) {
	.rico-site .site-header:not(.site-header--home) {
		background: transparent;
		border-bottom: 0;
	}
	.rico-site .site-header:not(.site-header--home) .header-inner {
		max-width: 1200px;
		background: var(--ink);
		border: 1px solid var(--gold-dim);
		border-top: 0;
	}
	.rico-site .site-header:not(.site-header--home) .desktop-nav {
		margin-right: 7px; /* With the 22px row gap: Home's 29px between the nav and the actions. */
	}
	.rico-site .site-header:not(.site-header--home) .call-btn {
		min-height: 46px;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 800;
	}
	.rico-site .site-header:not(.site-header--home) .header-request {
		gap: 26px;
		min-height: 46px;
		font-size: 14px;
		font-weight: 800;
	}
}
@media (min-width: 1131px) {
	.rico-site .site-header:not(.site-header--home) .desktop-nav ul {
		gap: 30px;
	}
	.rico-site .site-header:not(.site-header--home) .call-btn {
		padding: 0 15px;
	}
	.rico-site .site-header:not(.site-header--home) .header-request {
		padding: 0 24px;
	}
}
.rico-site .mobile-nav:not([hidden]) {
	display: block;
	background: #111;
	border-bottom: 1px solid var(--gold);
	padding: 16px 22px;
}
.rico-site .mobile-nav a {
	display: block;
	padding: 12px 5px;
	border-bottom: 1px solid #32302d;
	font-weight: 600;
}

/* ---------- Interior page frame (Services, Request Service; prototype .interior-shell) ---------- */
.rico-site .interior-shell {
	max-width: 1200px;
	min-height: 100vh;
	margin: 0 auto;
	border-left: 1px solid var(--gold-dim);
	border-right: 1px solid var(--gold-dim);
}
.rico-site .rule {
	width: 60px;
	height: 4px;
	border-radius: 9px;
	background: var(--red-vivid);
}

/* ---------- Footer (prototype .site-footer) ---------- */
.rico-site .site-footer {
	background: #080909;
	border-top: 1px solid #423b2c;
}
.rico-site .footer-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 46px 48px;
	display: grid;
	grid-template-columns: 1.4fr 0.9fr 0.9fr;
	gap: 70px;
}
.rico-site .footer-brand img {
	width: 118px;
	height: auto;
}
.rico-site .footer-brand p {
	margin: 13px 0;
	max-width: 310px;
	color: #b7b4b0;
	font-size: 13px;
}
.rico-site .footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
}
.rico-site .footer-col__title {
	margin-bottom: 4px;
	font: 700 14px/1.55 var(--sans);
	color: var(--gold);
}
.rico-site .footer-col a:hover {
	color: var(--gold);
}
.rico-site .footer-col span {
	color: #aeb0b0;
}
.rico-site .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 46px;
	border-top: 1px solid #282625;
	color: #9b9790;
	font-size: 11px;
}
/* Privacy Policy link (CP-27), shown once the page is published: next to the ©, the language
   switch stays on the right. */
.rico-site .footer-privacy {
	margin-right: auto;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* CP-21 language switcher (footer placement, for founder review). */
.rico-site .lang-switch {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--gold);
	font: 700 13px/1.2 var(--display);
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rico-site .lang-switch:hover {
	color: var(--gold-bright);
}

/* ---------- Responsive (prototype breakpoints) ---------- */
@media (max-width: 1130px) {
	.rico-site .brand {
		width: 190px;
	}
	.rico-site .brand img {
		width: 175px;
	}
	.rico-site .desktop-nav ul {
		gap: 16px;
	}
	.rico-site .header-inner {
		padding: 0 23px;
	}
	.rico-site .header-actions {
		gap: 8px;
	}
	.rico-site .call-btn {
		padding: 0 10px;
	}
	.rico-site .header-request {
		padding: 0 13px;
	}
}

@media (max-width: 880px) {
	.rico-site .header-inner {
		height: 72px;
		padding: 0 18px;
	}
	.rico-site .brand {
		width: 120px;
	}
	.rico-site .brand img {
		top: -1px;
		width: 127px;
	}
	.rico-site .desktop-nav,
	.rico-site .header-request {
		display: none;
	}
	.rico-site .header-actions {
		margin-left: auto;
		gap: 22px;
	}
	.rico-site .nav-toggle {
		display: inline-flex;
	}
	.rico-site .call-btn {
		min-height: 44px;
		padding: 0 12px;
	}
	.rico-site .call-btn__number {
		display: none;
	}
	.rico-site .copy-wide {
		display: none;
	}
	.rico-site .copy-narrow {
		display: inline;
	}
	.rico-site .footer-main {
		gap: 30px;
		padding: 38px 25px;
	}
}

@media (max-width: 610px) {
	.rico-site .footer-main {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 35px 24px;
	}
	.rico-site .footer-bottom {
		padding: 20px 24px;
	}
}

@media (max-width: 370px) {
	.rico-site .brand img {
		width: 117px;
	}
	.rico-site .brand {
		width: 112px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.rico-site) {
		scroll-behavior: auto;
	}
	.rico-site *,
	.rico-site *::before,
	.rico-site *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* CP-23 header language switch: EN | ES at every width; CP-25: between Request Service and the
   phone on desktop (the phone stays last). The current language is filled and announced with
   aria-current. */
.rico-site .lang-toggle {
	display: flex;
	flex: none;
	border: 1px solid var(--gold-dim);
	border-radius: 5px;
	overflow: hidden;
}
.rico-site .lang-toggle__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 36px;
	padding: 0 9px;
	background: #0b0c0d;
	color: #ebe6dc;
	font: 800 12.5px/1 var(--display);
	letter-spacing: 0.08em;
	transition: background-color 0.2s, color 0.2s;
}
.rico-site .lang-toggle__link + .lang-toggle__link {
	border-left: 1px solid var(--gold-dim);
}
.rico-site .lang-toggle__link:hover {
	background: #1c1609;
	color: var(--gold);
}
.rico-site .lang-toggle__link.is-current {
	background: var(--gold);
	color: #111;
}
.rico-site .lang-toggle__link:focus-visible {
	outline-offset: -3px;
}
.rico-site .mobile-nav__lang a {
	color: var(--gold);
}
@media (max-width: 880px) {
	.rico-site .header-actions {
		gap: 14px;
	}
	.rico-site .lang-toggle__link {
		min-width: 40px;
		min-height: 44px;
		font-size: 13px;
	}
}
@media (max-width: 370px) {
	.rico-site .header-actions {
		gap: 8px;
	}
	/* Very narrow phones: only the other language is shown, so the logo keeps its space. */
	.rico-site .lang-toggle__link.is-current {
		display: none;
	}
	.rico-site .lang-toggle {
		border-color: var(--gold);
	}
	.rico-site .lang-toggle__link + .lang-toggle__link {
		border-left: 0;
	}
}