/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header,menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	quotes: none;
	content: '';
	content: none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* The display-role reset above beats the hidden attribute */
[hidden] {display:none !important;}


/* #Variables
================================================== */
:root {
	/* Brand */
	--color-primary:#165260;
	--color-primary-hover:#1E8A9A;
	--color-accent:#177C8B;
	--color-accent-tint:#E8F5F7;
	--color-accent-wash:#F5FBFC;
	--color-accent-line:#B9DFE4;
	--color-coral:#C4553A;
	--color-coral-hover:#A8452B;
	--color-coral-tint:#FBEEEA;
	--color-error:#B2412A;
	--color-star:#E0704C;
	--color-available:#1F8A4C;

	/* On the dark teal bands */
	--color-dark-text:#D2E6E9;
	--color-dark-line:#4D8691;
	--color-dark-hover:#1E6472;

	/* Neutrals */
	--color-ink:#0E0F12;
	--color-text:#3A3B40;
	--color-muted:#55565C;
	--color-subtle:#8A8B90;
	--color-faint:#A3A4A8;
	--color-line:#EEEEEC;
	--color-line-strong:#E2E2DF;
	--color-line-soft:#F1F1EF;
	--color-input:#D5D9DB;
	--color-disabled:#E3E7E8;
	--color-surface:#F3F7F8;
	--color-white:#FFFFFF;

	/* Type */
	--font-body:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Shape */
	--radius-xs:6px;
	--radius-sm:8px;
	--radius:10px;
	--radius-md:15px;
	--radius-lg:20px;
	--radius-xl:25px;
	--radius-pill:999px;

	--shadow-sm:0 8px 25px rgba(14,15,18,.06);
	--shadow:0 15px 40px rgba(14,15,18,.08);
	--shadow-focus:0 0 0 4px rgba(23,124,139,.14);

	--transition:all .2s ease;
}

/* NOTE
html is set to 62.5% so rem is 10px based: 1.6rem = 16px. Rem for type, px for spacing. */
html {font-size:62.5%;}
body {font-size:1.7rem; line-height:1.65; font-weight:400; font-family:var(--font-body); color:var(--color-text); background:var(--color-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%;}

/* #Typography
================================================== */
p {margin-bottom:20px; text-wrap:pretty;}

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:20px; font-weight:600; color:var(--color-primary); text-wrap:balance;}
h1 {font-size:4.0rem; line-height:1.05; letter-spacing:-.04em;}
h2 {font-size:3.0rem; line-height:1.1; letter-spacing:-.03em;}
h3 {font-size:2.0rem; line-height:1.3; letter-spacing:-.02em; color:var(--color-ink);}
h4 {font-size:1.8rem; line-height:1.35; letter-spacing:-.01em; color:var(--color-ink);}
h5 {font-size:1.6rem; line-height:1.5; color:var(--color-ink);}
h6 {font-size:1.5rem; line-height:1.6; color:var(--color-ink);}

em {font-style:italic;}
strong {font-weight:600; color:var(--color-ink);}
a strong {color:inherit;}
small {font-size:1.3rem;}

.entry ul,
.entry ol {margin:0 0 20px 20px;}
.entry ul {list-style:disc;}
.entry ol {list-style:decimal;}
.entry li {margin-bottom:10px;}

code {padding:2px 5px; margin:0 2px; font-family:var(--font-mono); font-size:90%; white-space:nowrap; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-xs);}
pre > code {display:block; padding:10px 15px; white-space:pre;}

hr {margin-top:40px; margin-bottom:40px; border-width:0; border-top:1px solid var(--color-line);}

sup {font-size:1.1rem;}

/* Type utilities */
.title-display {font-size:4.5rem; line-height:1.02; letter-spacing:-.045em;}
.title-xl {font-size:3.5rem; line-height:1.05; letter-spacing:-.035em;}
.title-lg {font-size:3.5rem; line-height:1.05; letter-spacing:-.04em;}
.title-md {font-size:3.0rem; line-height:1.1; letter-spacing:-.03em;}
.title-sm {font-size:2.5rem; line-height:1.2; letter-spacing:-.025em;}
.lead {font-size:1.7rem; line-height:1.55; color:var(--color-muted);}
.text-large {font-size:1.8rem;}
.text-small {font-size:1.6rem;}
.text-xs {font-size:1.4rem;}
.text-tiny {font-size:1.2rem; line-height:1.6;}
.eyebrow {margin:0; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-subtle);}
.text-muted {color:var(--color-muted);}
.text-subtle {color:var(--color-subtle);}
.text-ink {color:var(--color-ink);}
.mono {font-family:var(--font-mono);}
.eyebrow {display:block; font-size:1.2rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-subtle);}

/* #Forms
================================================== */
label {display:block; margin-bottom:10px; font-size:1.4rem; font-weight:500; color:var(--color-ink);}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {width:100%; height:50px; padding:0 15px; font-family:inherit; font-size:1.5rem; color:var(--color-ink); background-color:var(--color-white); border:1.5px solid var(--color-input); border-radius:var(--radius); box-shadow:none; box-sizing:border-box; transition:var(--transition);}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
button,
.button,
input[type=button],
input[type=submit] {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
textarea {min-height:120px; padding-top:15px; padding-bottom:15px; line-height:1.55;}
::placeholder {color:var(--color-subtle); opacity:1;}
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {border-color:var(--color-subtle);}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {border-color:var(--color-accent); box-shadow:var(--shadow-focus); outline:0;}
input:disabled,
textarea:disabled,
select:disabled {background:var(--color-surface); color:var(--color-subtle); border-color:var(--color-disabled); cursor:not-allowed;}
.field-error input,
.field-error textarea,
.field-error select {border-color:var(--color-error);}
.field-error-text {display:block; margin-top:5px; font-size:1.3rem; color:var(--color-error);}
.field-help {display:block; margin-top:5px; font-size:1.3rem; color:var(--color-subtle);}
.required {color:var(--color-coral);}

input[type="checkbox"] {flex:none; width:20px; height:20px; margin:0; border:1.5px solid #B9BDC0; border-radius:var(--radius-xs); background:var(--color-white) center / 15px no-repeat; -webkit-appearance:none; appearance:none; cursor:pointer; transition:var(--transition);}
input[type="checkbox"]:checked {border-color:var(--color-accent); background-color:var(--color-accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
input[type="checkbox"]:focus-visible {box-shadow:var(--shadow-focus); outline:0;}
label.checkbox {display:inline-flex; align-items:center; gap:10px; margin:0; font-weight:400; color:var(--color-text); cursor:pointer;}

/* Notices */
.notice {padding:15px 20px; border-radius:var(--radius); background:var(--color-accent-tint); color:var(--color-primary);}
.notice-error {background:var(--color-coral-tint); color:var(--color-error);}

/* #Buttons
================================================== */
.button,
button.button,
input[type=submit] {--button-sweep:var(--color-primary-hover); position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:45px; padding:0 20px; font-family:inherit; font-size:1.5rem; font-weight:500; line-height:1; color:var(--color-white); background:var(--color-primary); border:0; border-radius:var(--radius); text-align:center; white-space:nowrap; cursor:pointer; box-sizing:border-box; transition:var(--transition);}
/* Hover: a skewed panel in --button-sweep slides in from the left, behind the label */
.button:before {content:""; position:absolute; top:0; left:-25px; z-index:-1; width:calc(100% + 50px); height:100%; background:var(--button-sweep); transform:translate3d(-100%,0,0) skew(45deg); transition:transform .3s ease;}
.button:hover:before {transform:translate3d(0,0,0) skew(45deg);}
.button:hover {color:var(--color-white);}
input[type=submit]:hover {background:var(--color-primary-hover);}
.button.button-coral {--button-sweep:var(--color-coral-hover); background:var(--color-coral);}
/* Light and transparent buttons need an edge: inset shadow, which the sweep covers on hover */
.button.button-outline {--button-sweep:var(--color-accent); color:var(--color-ink); background:var(--color-white); box-shadow:inset 0 0 0 1px var(--color-line-strong);}
.button.button-ghost {--button-sweep:var(--color-line-soft); color:var(--color-muted); background:transparent;}
.button-ghost:hover {color:var(--color-ink);}
.button.button-on-dark {--button-sweep:var(--color-dark-hover); color:var(--color-white); background:transparent; box-shadow:inset 0 0 0 1px var(--color-dark-line);}
.button.button-outline:hover {color:var(--color-white);}
.button-large {height:50px;}
.button-small {height:35px; padding:0 15px; font-size:1.3rem; border-radius:var(--radius-sm);}
.button-block {display:flex; width:100%;}
.button:disabled,
.button.is-disabled {color:var(--color-subtle); background:var(--color-disabled); box-shadow:none; cursor:not-allowed;}
.button:disabled:before,
.button.is-disabled:before {display:none;}

/* #Icons (images/icons.svg sprite, wpnm_icon())
================================================== */
.icon {display:inline-block; flex:none; width:15px; height:15px; vertical-align:middle;}

/* #Images
================================================== */
img {max-width:100%; height:auto;}

/* #Misc
================================================== */
a {color:var(--color-accent); text-decoration:none; transition:var(--transition);}
a:hover {color:var(--color-primary);}
:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}
::selection {background:var(--color-accent-tint); color:var(--color-primary);}

.screen-reader-only {border:0; clip:rect(0, 0, 0, 0); height:1px; overflow:hidden; position:absolute !important; width:1px; word-wrap:normal !important;}
.skip-links li {height:0; list-style:none; width:0;}
.skip-links a:focus {position:fixed !important; top:10px; left:10px; width:auto; height:auto; padding:10px 15px; clip:auto; overflow:visible; background:#fff; color:#000; z-index:999999999;}

.anchor {scroll-margin-top:100px;}

.remove-bottom {margin-bottom:0;}
.add-bottom {margin-bottom:20px;}
.half-bottom {margin-bottom:10px;}
.double-bottom {margin-bottom:40px;}
.spacer {padding-top:60px; padding-bottom:60px;}
.spacer-top {padding-top:60px;}
.spacer-btm {padding-bottom:60px;}

.left {float:left;}
.right {float:right;}
.alignleft {display:inline; float:left; margin-right:15px;}
.alignright {display:inline; float:right; margin-left:15px;}
.aligncenter {clear:both; display:block; margin-left:auto; margin-right:auto;}
.nofloat {float:none !important;}

.tal {text-align:left;}
.tar {text-align:right;}
.tac {text-align:center;}
.cap {text-transform:uppercase;}

.bg-cover {background-position:center center; background-repeat:no-repeat; background-size:cover;}

.frame-container {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.frame-container iframe,
.frame-container object,
.frame-container embed,
.frame-container video {position:absolute; top:0; left:0; width:100%; height:100%;}