/* ==========================================================================
   MARI Research — design tokens, reset and typography.
   Loaded on every request. No rule in this file is page specific.
   ========================================================================== */

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/nunito-sans-latin.woff2?mari=1.0.4") format("woff2");
}

@font-face {
	font-family: "Nunito Sans";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/nunito-sans-latin-italic.woff2?mari=1.0.4") format("woff2");
}

/* The old site set body copy in a subsetted Cambria webfont; kept so the
   serif headings do not shift between the two faces. */
@font-face {
	font-family: "CambriaLocal";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cambria-latin.woff?mari=1.0.4") format("woff");
}

:root {
	/* Brand — #009494 is only 3.71:1 on white, so it stays decorative and
	   every text-bearing fill uses the dark step. */
	--mari-teal:        #009aad;
	--mari-teal-bright: #009494;
	--mari-teal-dark:   #00707a;
	--mari-teal-deep:   #00565e;
	--mari-teal-soft:   #e4f6f5;
	--mari-teal-line:   #bfe6e4;
	--mari-navy:        #0d1b2a;
	--mari-navy-soft:   #14293c;

	/* Neutrals */
	--mari-ink:      #212121;
	--mari-body:     #55606a;
	--mari-muted:    #7b8794;
	--mari-line:     #e3e8ea;
	--mari-surface:  #f6fafa;
	--mari-surface2: #eef4f4;
	--mari-white:    #ffffff;

	/* Type */
	--mari-sans:  "Nunito Sans", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
	--mari-serif: "CambriaLocal", Cambria, Georgia, "Times New Roman", serif;

	--mari-fs-h1: clamp(1.9rem, 1.24rem + 2.6vw, 2.6rem);
	--mari-fs-h2: clamp(1.6rem, 1.16rem + 1.8vw, 2.15rem);
	--mari-fs-h3: clamp(1.3rem, 1.06rem + 1vw, 1.85rem);
	--mari-fs-h4: clamp(1.1rem, 1rem + .5vw, 1.4rem);
	--mari-fs-h5: 1.15rem;
	--mari-fs-body: 1rem;
	--mari-fs-sm:   .875rem;

	--mari-lh-tight: 1.25;
	--mari-lh:       1.7;

	/* Space and shape */
	--mari-wrap:      1280px;
	--mari-wrap-wide: 1600px;
	--mari-gutter:    clamp(1rem, 3vw, 2.5rem);
	--mari-section:   clamp(3.5rem, 6vw, 6.5rem);
	--mari-radius:    14px;
	--mari-radius-sm: 8px;
	--mari-radius-lg: 22px;

	/* Elevation */
	--mari-shadow-1: 0 1px 2px rgba(13, 27, 42, .05), 0 2px 10px rgba(13, 27, 42, .05);
	--mari-shadow-2: 0 6px 24px rgba(13, 27, 42, .09);
	--mari-shadow-3: 0 18px 48px rgba(13, 27, 42, .13);

	/* Motion */
	--mari-ease: cubic-bezier(.22, .61, .36, 1);
	--mari-fast: 160ms;
	--mari-slow: 320ms;

	--mari-header-h: 88px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mari-header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--mari-white);
	color: var(--mari-body);
	font-family: var(--mari-sans);
	font-size: var(--mari-fs-body);
	line-height: var(--mari-lh);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.mari-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--mari-ink);
	font-family: var(--mari-sans);
	font-weight: 700;
	line-height: var(--mari-lh-tight);
	letter-spacing: -.01em;
	text-wrap: balance;
}

h1 { font-size: var(--mari-fs-h1); }
h2 { font-size: var(--mari-fs-h2); }
h3 { font-size: var(--mari-fs-h3); }
h4 { font-size: var(--mari-fs-h4); }
h5 { font-size: var(--mari-fs-h5); }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--mari-teal-dark);
	text-decoration: none;
	transition: color var(--mari-fast) var(--mari-ease);
}
a:hover, a:focus-visible { color: var(--mari-teal); }

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

/* Stroke icons ship fill="none" themselves; only the line-art variant needs
   the paint suppressed, and a blanket rule here would blank the solid glyphs. */
.mari-icon--line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

blockquote {
	margin: 0 0 1.4em;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 4px solid var(--mari-teal-line);
	color: var(--mari-ink);
	font-family: var(--mari-serif);
	font-size: 1.1rem;
}

hr {
	height: 1px;
	margin: 2rem 0;
	border: 0;
	background: var(--mari-line);
}

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { padding: .7rem .85rem; border-bottom: 1px solid var(--mari-line); text-align: left; }
th { color: var(--mari-ink); font-weight: 700; background: var(--mari-surface); }

code, pre, kbd { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .92em; }
pre { overflow-x: auto; padding: 1rem; background: var(--mari-surface); border-radius: var(--mari-radius-sm); }

:focus-visible {
	outline: 2px solid var(--mari-teal);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--mari-teal-soft); color: var(--mari-teal-deep); }

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

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

.mari-wrap--wide { max-width: var(--mari-wrap-wide); }

.mari-main { min-height: 50vh; }

.mari-section { padding-block: var(--mari-section); }
.mari-section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.mari-section--surface { background: var(--mari-surface); }
.mari-section--dark { background: var(--mari-navy); color: #c9d6e2; }
.mari-section--dark h1, .mari-section--dark h2, .mari-section--dark h3, .mari-section--dark h4 { color: #fff; }

.mari-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.mari-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mari-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.mari-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.mari-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 900px) {
	.mari-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mari-split--38 { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
	.mari-split--62 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.mari-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .9rem;
	color: var(--mari-teal-dark);
	font-size: var(--mari-fs-sm);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mari-eyebrow::before {
	width: 26px;
	height: 2px;
	background: var(--mari-teal-bright);
	content: "";
}

.mari-lede {
	max-width: 62ch;
	color: var(--mari-ink);
	font-size: 1.12rem;
	line-height: 1.65;
}

.mari-center { text-align: center; }
.mari-center .mari-lede { margin-inline: auto; }

/* Utilities used by the templates. Kept here so no template ever needs a
   style="" attribute. */
.mari-u-narrow { max-width: 56rem; margin-inline: auto; }
.mari-u-mid { max-width: 68rem; margin-inline: auto; }
.mari-u-mt-s { margin-top: .75rem; }
.mari-u-mt-m { margin-top: 1.5rem; }
.mari-u-mt-l { margin-top: 2.25rem; }
.mari-u-mb-0 { margin-bottom: 0; }

/* WordPress and several plugins emit this class; core used to supply the
   rule from the block stylesheet this theme dequeues. */
.mari-sr,
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	word-wrap: normal !important;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	z-index: 200;
	display: block;
	width: auto; height: auto;
	padding: .8rem 1.2rem;
	background: #fff;
	color: var(--mari-ink);
	clip-path: none;
	box-shadow: var(--mari-shadow-2);
	font-weight: 700;
	line-height: 1.3;
}

/* Text that sits on the dark bands. */
.mari-section--dark .mari-lede,
.mari-section--dark .mari-check li,
.mari-section--dark p { color: #b9c9d8; }
.mari-section--dark .mari-check li::before {
	background: rgba(0, 148, 148, .3);
	color: #58dccd;
}
.mari-section--dark .mari-eyebrow { color: #58dccd; }
.mari-section--dark .mari-eyebrow::before { background: #58dccd; }

.mari-skip {
	position: absolute;
	top: -100px; left: 1rem;
	z-index: 200;
	padding: .7rem 1.1rem;
	background: var(--mari-teal-dark);
	color: #fff;
	border-radius: 0 0 var(--mari-radius-sm) var(--mari-radius-sm);
	font-weight: 700;
}
.mari-skip:focus { top: 0; color: #fff; }

/* Buttons --------------------------------------------------------------- */

.mari-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .72rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--mari-radius-sm);
	color: #fff;
	background: var(--mari-teal-dark);
	font-family: inherit;
	font-size: .97rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background var(--mari-fast) var(--mari-ease),
	            border-color var(--mari-fast) var(--mari-ease),
	            color var(--mari-fast) var(--mari-ease),
	            transform var(--mari-fast) var(--mari-ease),
	            box-shadow var(--mari-fast) var(--mari-ease);
}
.mari-btn:hover, .mari-btn:focus-visible {
	background: var(--mari-teal-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--mari-shadow-2);
}
.mari-btn:active { transform: translateY(0); box-shadow: var(--mari-shadow-1); }

.mari-btn--outline {
	background: transparent;
	border-color: var(--mari-teal-line);
	color: var(--mari-teal-dark);
}
.mari-btn--outline:hover, .mari-btn--outline:focus-visible {
	background: var(--mari-teal-soft);
	border-color: var(--mari-teal-bright);
	color: var(--mari-teal-deep);
	box-shadow: none;
}

.mari-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
}
.mari-btn--ghost:hover, .mari-btn--ghost:focus-visible { background: rgba(255, 255, 255, .14); }

.mari-btn--light { background: #fff; color: var(--mari-teal-deep); }
.mari-btn--light:hover, .mari-btn--light:focus-visible { background: var(--mari-teal-soft); color: var(--mari-teal-deep); }

.mari-btn--sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .88rem; }
.mari-btn--block { width: 100%; }

.mari-btn .mari-icon { width: 17px; height: 17px; }

/* Text link with an arrow, used in cards and section footers. */
.mari-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--mari-teal-dark);
	font-weight: 700;
}
.mari-link-arrow .mari-icon { transition: transform var(--mari-fast) var(--mari-ease); }
.mari-link-arrow:hover .mari-icon { transform: translateX(4px); }

/* Forms ---------------------------------------------------------------- */

.mari-field { margin-bottom: 1.1rem; }
.mari-field__label {
	display: block;
	margin-bottom: .4rem;
	color: var(--mari-ink);
	font-size: var(--mari-fs-sm);
	font-weight: 700;
}
.mari-field input,
.mari-field select,
.mari-field textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--mari-line);
	border-radius: var(--mari-radius-sm);
	background: #fff;
	color: var(--mari-ink);
	font: inherit;
	transition: border-color var(--mari-fast) var(--mari-ease), box-shadow var(--mari-fast) var(--mari-ease);
}
.mari-field input:focus,
.mari-field select:focus,
.mari-field textarea:focus {
	border-color: var(--mari-teal-bright);
	box-shadow: 0 0 0 3px var(--mari-teal-soft);
	outline: none;
}

/* Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Print ---------------------------------------------------------------- */

@media print {
	.mari-header, .mari-header__spacer, .mari-drawer, .mari-footer, .mari-to-top, .mari-pagination { display: none !important; }
	body { color: #000; }
	a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
 * Long-form reading type. The site set its body copy in a subsetted Cambria
 * webfont; that is kept for article and page prose, while the interface
 * (navigation, buttons, card titles, metadata) stays on Nunito Sans.
 * ----------------------------------------------------------------------- */
.mari-prose,
.mari-prose p,
.mari-prose li,
.mari-prose td,
.mari-prose th,
.mari-quote__text {
	font-family: var(--mari-serif);
	font-size: 1.06rem;
	line-height: 1.8;
}
.mari-prose h1, .mari-prose h2, .mari-prose h3,
.mari-prose h4, .mari-prose h5, .mari-prose h6 {
	font-family: var(--mari-sans);
}

/* -----------------------------------------------------------------------
 * Chrome states the carried stylesheet describes only at rest: the bar is
 * 88px tall in the flow and 88px once it is stuck, and a mobile sub-menu is
 * hidden until its row is opened.
 * --------------------------------------------------------------------- */
.header-placeholder { height: 88px; }
.mobile-menu .menu-item-has-children.is-open > ul { display: block; }
.owl-stage { transition: transform 300ms ease-out; }