/*=============================================================================
 * Roots to Rise - design layer
 *
 * WHAT THIS FILE IS
 * The site still runs on Porto (css/theme.css + css/theme-elements.css) over
 * Bootstrap 5, because that is what every include's markup and every vendor
 * plugin in /vendor expects. This file is the layer that turns Porto's look
 * into the "Roots to Rise - Therapy & Liberation" design comp: serif display
 * type, small-caps eyebrows, pill buttons, 16px cards on warm paper, and deep
 * forest bands.
 *
 * LOAD ORDER (see includes/css.php)
 *   theme.css -> theme-elements.css -> colors.css -> skins/default.css
 *   -> roots.css -> custom.css
 * Everything here therefore wins over Porto and over the generated color
 * system, and custom.css still gets the last word for site-specific tweaks.
 *
 * TWO KINDS OF RULE LIVE HERE
 *   1. "Design components" - the comp's own classes (.eyebrow, .stitle,
 *      .pquote, .roots-card, ...) which the includes now use directly.
 *   2. "Porto overrides" - restyling framework classes that appear in markup
 *      we do not want to rewrite (.btn, .section, #header, #footer, .card,
 *      .form-control, .counter, .testimonial, .owl-*).
 *
 * Color names come from the comp. Do not hardcode hex values below the token
 * block - use the variables so a palette change is one edit.
 *===========================================================================*/

/*-----------------------------------------------------------------------------
 * 1. Design tokens
 *---------------------------------------------------------------------------*/
:root {
	/* Greens, dark to light */
	--forest: #1c2b1a;
	--canopy: #2e5e2a;
	--sage: #6b9e65;
	--fern: #a8c49a;
	--leaf-tint: #e4ede0;

	/* Earth and bloom */
	--bark: #7a4a28;
	--bark-lt: #b8825a;
	--blush: #e8b4a0;
	--bloom: #d4887a;

	/* Gold */
	--gold: #c9a84c;
	--gold-lt: #e8d5a0;

	/* Paper */
	--cream: #f5f0e6;
	--warm: #faf7f2;
	--parchment: #f0ead8;

	/* Type */
	--ink: #2a3528;
	--muted: #5a6e58;

	/* Fonts */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Shape */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--pill: 40px;

	/* Elevation */
	--shadow-sm: 0 2px 16px rgba(28, 43, 26, 0.04);
	--shadow: 0 4px 24px rgba(28, 43, 26, 0.06);
	--shadow-lg: 0 16px 48px rgba(28, 43, 26, 0.1);

	/* Hairlines */
	--rule: rgba(168, 196, 154, 0.28);
	--rule-strong: rgba(168, 196, 154, 0.5);

	/* Retire the generated blue link color from colors.css - a bright blue
	   link on parchment fights every other color in the palette. Redefining
	   the variables fixes every rule colors.css generated from them. */
	--hyperlinks: #2e5e2a;
	--hover: #1c2b1a;
}

/*-----------------------------------------------------------------------------
 * 2. Foundations
 *---------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

body,
html body,
.body {
	background: var(--warm);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.88;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Display type. Porto sets its own family/weight/tracking on headings, so
   these need the html prefix to outrank it. */
html h1,
html h2,
html h3,
html h4,
html h5,
html .h1,
html .h2,
html .h3,
html .h4,
html .h5 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--forest);
	letter-spacing: -0.005em;
	line-height: 1.16;
	text-transform: none;
}

html h1,
html .h1 {
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 300;
}

html h2,
html .h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 300;
}

html h3,
html .h3 {
	font-size: 26px;
	font-weight: 500;
}

html h4,
html .h4 {
	font-size: 21px;
	font-weight: 500;
}

html h5,
html .h5 {
	font-size: 18px;
	font-weight: 500;
}

/* h6 is used all over the includes as the subtitle/kicker slot, so it is a
   small-caps label rather than a heading. */
html h6,
html .h6 {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bark-lt);
	line-height: 1.6;
}

p,
li,
label,
input,
select,
textarea,
button,
.btn,
table {
	font-family: var(--font-body);
}

p {
	line-height: 1.88;
	font-weight: 300;
	color: var(--muted);
}

a {
	color: var(--canopy);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--forest);
}

strong,
b,
.font-weight-bold:not(a),
.font-weight-semi-bold:not(a),
.font-weight-extra-bold:not(a) {
	font-weight: 500 !important;
	color: var(--ink);
}

a.font-weight-bold,
a.font-weight-semi-bold,
a.font-weight-extra-bold {
	font-weight: 500 !important;
}

/* Porto's inline "read more" pattern: an uppercase-free link at the end of a
   truncated paragraph. Keep it in canopy so it reads as a link. */
html a.text-decoration-none.font-weight-semi-bold {
	color: var(--canopy);
}

html a.text-decoration-none.font-weight-semi-bold:hover {
	color: var(--forest);
}

blockquote {
	font-family: var(--font-display);
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	opacity: 1;
	margin: 2.25rem 0;
}

hr.solid {
	border-top-color: var(--rule-strong);
}

::selection {
	background: var(--fern);
	color: var(--forest);
}

:focus-visible {
	outline: 2px solid var(--canopy);
	outline-offset: 2px;
}

/* Porto's text-N size scale, retuned to the comp's rhythm. Only the sizes the
   includes actually use are listed. */
html .text-1 { font-size: 10px !important; }
html .text-2 { font-size: 11px !important; }
html .text-2-3 { font-size: 13px !important; }
html .text-3 { font-size: 13px !important; }
html .text-3-4 { font-size: 15px !important; }
html .text-4 { font-size: 16px !important; }
html .text-4-5 { font-size: 17px !important; }
html .text-5 { font-size: 13px !important; }
html .text-5-6 { font-size: clamp(30px, 3.4vw, 46px) !important; }
html .text-6 { font-size: 24px !important; }
html .text-8 { font-size: clamp(30px, 3.6vw, 46px) !important; }
html .text-10 { font-size: clamp(36px, 4.4vw, 58px) !important; }
html .text-12-5 { font-size: clamp(42px, 5.4vw, 72px) !important; }

html .line-height-2 { line-height: 1.2 !important; }
html .line-height-3 { line-height: 1.08 !important; }
html .line-height-5 { line-height: 1.6 !important; }
html .line-height-9 { line-height: 1.8 !important; }

/* Porto letter-spacing helpers, mapped to the comp's tracking. */
html .positive-ls-1 { letter-spacing: 0.14em !important; }
html .ls-0 { letter-spacing: -0.005em !important; }

/*-----------------------------------------------------------------------------
 * 3. Design components
 *
 * These are the comp's own classes. The includes use them directly, so they
 * are the vocabulary to reach for when adding new sections.
 *---------------------------------------------------------------------------*/

/* Small-caps kicker with a hairline. Sits above a .stitle. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bark-lt);
	line-height: 1.4;
}

.eyebrow::after {
	content: "";
	flex: 0 0 36px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.eyebrow-light {
	color: var(--gold);
}

.eyebrow-center {
	justify-content: center;
}

.eyebrow-center::before {
	content: "";
	flex: 0 0 36px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Section headline. The italic <em> in canopy is the comp's signature. */
.stitle {
	max-width: 26ch;
	font-family: var(--font-display);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--forest);
	margin: 0 0 22px;
	letter-spacing: -0.01em;
	text-transform: none;
}

.stitle em,
.stitle i {
	font-style: italic;
	color: var(--canopy);
}

.stitle-light {
	color: var(--cream);
}

.stitle-light em {
	color: var(--gold-lt);
}

/* A capped measure is left-aligned by default; center it when the block is. */
.text-center .stitle,
.text-center .sbody,
.text-center .roots-rte p,
.coming-soon .stitle,
.coming-soon .sbody {
	margin-left: auto;
	margin-right: auto;
}

/* A step down from .stitle - list-item questions, sub-headings inside a page
   whose page-header already carries the big display line. */
.stitle-sm {
	font-family: var(--font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--forest);
	margin: 0 0 14px;
	letter-spacing: -0.005em;
	text-transform: none;
}

.stitle-sm em {
	font-style: italic;
	color: var(--canopy);
}

/* A .stitle / .stitle-sm whose text is a link (list views). Inherits the
   heading's size and family, only the color reacts. */
.stitle-link,
html .stitle-link {
	color: var(--forest);
	text-decoration: none;
	border-bottom: 0;
	transition: color 0.25s ease;
}

.stitle-link:hover,
.stitle-link:focus,
html .stitle-link:hover {
	color: var(--canopy);
	border-bottom: 0;
}

/* Headings on a dark band. */
.section-secondary .stitle,
.section-primary .stitle,
.section-text-light .stitle,
.section-secondary .stitle-sm,
.section-primary .stitle-sm,
.section-text-light .stitle-sm {
	color: var(--cream);
}

.section-secondary .stitle em,
.section-primary .stitle em,
.section-text-light .stitle em {
	color: var(--gold-lt);
}

/* On a dark band the eyebrow turns gold. The extra `section.section` prefix is
   there to outrank theme-elements' own
   `section.section.section-text-light h6 { color: var(--light) }`, which would
   otherwise flatten every eyebrow to cream. */
html section.section.section-secondary .eyebrow,
html section.section.section-primary .eyebrow,
html section.section.section-text-light .eyebrow,
.section-secondary .eyebrow,
.section-primary .eyebrow,
.section-text-light .eyebrow,
html #footer .eyebrow {
	color: var(--gold);
}

/* Body copy at reading width. */
.sbody {
	font-size: 15px;
	line-height: 1.88;
	font-weight: 300;
	color: var(--muted);
	max-width: 68ch;
}

.sbody-light {
	color: rgba(245, 240, 230, 0.82);
}

/* Pull quote - dark slab with an oversized decorative quote mark. */
.pquote {
	position: relative;
	overflow: hidden;
	margin: 3rem 0;
	padding: 44px 56px;
	background: var(--forest);
	border-radius: var(--radius);
}

.pquote::before {
	content: "\201C";
	position: absolute;
	top: -24px;
	left: 28px;
	font-family: var(--font-display);
	font-size: 200px;
	line-height: 1;
	color: var(--canopy);
	opacity: 0.18;
	pointer-events: none;
}

.pquote p,
.pquote blockquote p {
	position: relative;
	z-index: 1;
	font-family: var(--font-display);
	font-size: clamp(18px, 2.2vw, 26px);
	line-height: 1.72;
	font-style: italic;
	font-weight: 300;
	color: var(--cream);
	margin: 0;
}

.pquote cite,
.pquote .pquote-cite {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 18px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sage);
	font-style: normal;
}

@media (max-width: 767px) {
	.pquote {
		padding: 32px 26px;
	}

	.pquote::before {
		font-size: 130px;
		top: -14px;
		left: 12px;
	}
}

/* The comp's white card on parchment, used for services, resources, "who this
   is for", staff, and anywhere a Porto .card would otherwise appear. */
.roots-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 36px 32px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roots-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

/* 4px gradient rule across the top - the comp's service card treatment. */
.roots-card-accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--canopy), var(--gold));
}

.roots-card h2,
.roots-card h3 {
	font-size: 24px;
	font-weight: 500;
	color: var(--forest);
	margin-bottom: 14px;
	line-height: 1.2;
}

.roots-card p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--muted);
	font-weight: 300;
}

.roots-card-icon {
	display: block;
	margin-bottom: 18px;
	font-size: 28px;
	color: var(--canopy);
}

/* Pill tags. */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 18px;
	padding: 0;
	list-style: none;
}

.tag {
	background: var(--leaf-tint);
	color: var(--canopy);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid rgba(107, 158, 101, 0.28);
}

/* Credential list - a canopy dot beside each line. */
.creds {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.cred {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.cred::before {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	margin-top: 0.6em;
	border-radius: 50%;
	background: var(--canopy);
}

.cred p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	font-weight: 400;
}

/* Detail row with a round tinted icon - contact page, event location. */
.c-detail {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.c-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--leaf-tint);
	color: var(--canopy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.c-detail p {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
	font-weight: 400;
}

/* Numbered phase badge. */
.phase-badge {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 300;
	color: #fff;
	background: var(--canopy);
}

/* Paper panel - lifts a block of content off a textured background, the way
   the comp's About page does. */
.roots-panel {
	background: var(--warm);
	border-radius: var(--radius-lg);
	padding: 48px 56px;
	box-shadow: var(--shadow);
}

@media (max-width: 991px) {
	.roots-panel {
		padding: 28px 22px;
		border-radius: var(--radius);
	}
}

/*-----------------------------------------------------------------------------
 * 4. Sections
 *
 * Porto's .section is a 50px-padded gray band with border rules. The comp
 * breathes far more and never shows a section border.
 *---------------------------------------------------------------------------*/
html .section {
	padding: 84px 0;
	margin: 0;
	border: 0;
	background: var(--warm);
}

html .section.section-no-border,
html .section.section-height-1,
html .section.section-height-2 {
	border: 0;
}

html .section-light,
html .section.section-light {
	background: var(--warm);
}

/* Alternating band. Add .section-parchment in the markup wherever two light
   sections would otherwise run together with no seam. */
html .section-parchment,
html .section.section-parchment {
	background: var(--parchment);
}

html .section-primary,
html .section.section-primary {
	background: var(--canopy);
}

html .section-secondary,
html .section.section-secondary {
	background: var(--forest);
}

html .section-tertiary,
html .section.section-tertiary {
	background: var(--gold);
}

html .section-color,
html .section.section-color {
	background: var(--parchment);
}

/* Text on the dark/colored bands. */
html .section-primary,
html .section-secondary,
html .section-text-light {
	color: rgba(245, 240, 230, 0.82);
}

html .section-primary h1,
html .section-primary h2,
html .section-primary h3,
html .section-primary h4,
html .section-secondary h1,
html .section-secondary h2,
html .section-secondary h3,
html .section-secondary h4,
html .section-text-light h1,
html .section-text-light h2,
html .section-text-light h3,
html .section-text-light h4 {
	color: var(--cream);
}

html .section-primary .stitle em,
html .section-secondary .stitle em,
html .section-text-light .stitle em {
	color: var(--gold-lt);
}

html .section-primary p,
html .section-secondary p,
html .section-text-light p {
	color: rgba(245, 240, 230, 0.78);
}

html .section-tertiary,
html .section-tertiary h1,
html .section-tertiary h2,
html .section-tertiary h3,
html .section-tertiary p {
	color: var(--forest);
}

/* Porto's background-color utilities, repointed at the palette. */
html .bg-color-light,
html .bg-light { background-color: var(--warm) !important; }
html .bg-color-primary,
html .bg-primary { background-color: var(--canopy) !important; }
html .bg-color-secondary,
html .bg-secondary { background-color: var(--forest) !important; }
html .bg-color-tertiary { background-color: var(--gold) !important; }
html .bg-color-quaternary { background-color: var(--bark) !important; }
html .bg-color-dark,
html .bg-dark { background-color: var(--forest) !important; }
html .bg-parchment { background-color: var(--parchment) !important; }
html .bg-cream { background-color: var(--cream) !important; }
html .bg-leaf-tint { background-color: var(--leaf-tint) !important; }

/* Porto's text-color utilities. */
html .text-primary,
html .text-color-primary { color: var(--canopy) !important; }
html .text-secondary,
html .text-color-secondary { color: var(--forest) !important; }
html .text-tertiary,
html .text-color-tertiary { color: var(--gold) !important; }
html .text-quaternary,
html .text-color-quaternary { color: var(--bark) !important; }
html .text-dark,
html .text-color-dark { color: var(--forest) !important; }
html .text-light,
html .text-color-light,
html .text-white { color: var(--cream) !important; }
html .text-muted { color: var(--muted) !important; }
html .text-black { color: var(--ink) !important; }
html .text-warning { color: var(--gold) !important; }
html .text-hover-secondary:hover { color: var(--canopy) !important; }
html .text-color-hover-dark:hover { color: var(--forest) !important; }

/* On a dark band, "secondary" would be invisible - lift it to sage. */
html .section-secondary .text-secondary,
html .section-primary .text-secondary,
html .section-text-light .text-secondary {
	color: var(--fern) !important;
}

html .section-primary .text-primary,
html .section-secondary .text-primary {
	color: var(--gold-lt) !important;
}

/* Wide-but-contained shell used by every include. */
html .container-xl-custom {
	max-width: 1180px;
}

/*-----------------------------------------------------------------------------
 * 5. Buttons
 *
 * The comp uses one shape everywhere: a pill with 11px uppercase letterspaced
 * type that lifts on hover.
 *---------------------------------------------------------------------------*/
/* Porto declares its button colors as `html body .btn-primary`,
   `html body .btn-outline.btn-light` and so on - two elements plus two classes.
   Anything here that recolors a button has to carry the same `html body`
   prefix or Porto wins and, for example, an outline-light button keeps dark
   text on a photo. */
html .btn,
html [class*="btn-"],
html .fsubmit {
	display: inline-block;
	padding: 13px 30px;
	border-radius: var(--pill);
	border-width: 1.5px;
	border-style: solid;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease,
		color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

html .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(28, 43, 26, 0.18);
}

html .btn:active {
	transform: translateY(0);
}

html .btn.btn-sm,
html .btn.btn-xs,
html .btn-sm,
html .btn-xs {
	padding: 9px 20px;
	font-size: 10px;
	line-height: 1.4;
}

html .btn.btn-lg,
html .btn-lg {
	padding: 16px 40px;
	font-size: 12px;
	line-height: 1.4;
}

/* Porto ships spacing helpers on buttons that fight the pill padding. */
html .btn.btn-px-5,
html .btn.py-3,
html .btn.px-4 {
	padding: 14px 32px !important;
}

html body .btn-primary {
	background-color: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
	background-color: var(--forest);
	border-color: var(--forest);
	color: #fff;
}

html body .btn-secondary {
	background-color: var(--forest);
	border-color: var(--forest);
	color: var(--cream);
}

html body .btn-secondary:hover,
html body .btn-secondary:focus {
	background-color: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

html body .btn-tertiary {
	background-color: var(--gold);
	border-color: var(--gold);
	color: var(--forest);
}

html body .btn-tertiary:hover,
html body .btn-tertiary:focus {
	background-color: var(--gold-lt);
	border-color: var(--gold-lt);
	color: var(--forest);
}

html body .btn-quaternary {
	background-color: var(--bark);
	border-color: var(--bark);
	color: #fff;
}

html body .btn-quaternary:hover {
	background-color: var(--bark-lt);
	border-color: var(--bark-lt);
	color: #fff;
}

html body .btn-light {
	background-color: var(--cream);
	border-color: var(--cream);
	color: var(--forest);
}

html body .btn-light:hover,
html body .btn-light:focus {
	background-color: #fff;
	border-color: #fff;
	color: var(--canopy);
}

html body .btn-dark {
	background-color: var(--forest);
	border-color: var(--forest);
	color: var(--cream);
}

/* Bootstrap's contextual buttons, kept in the palette so an "Info" or
   "Success" button on a CMS-driven page never breaks the scheme. */
html body .btn-info {
	background-color: var(--sage);
	border-color: var(--sage);
	color: #fff;
}

html body .btn-info:hover {
	background-color: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

html body .btn-success {
	background-color: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

html body .btn-success:hover {
	background-color: var(--forest);
	border-color: var(--forest);
	color: #fff;
}

/* Ghost / outline on paper. */
html body .btn.btn-outline,
html body .btn-outline-primary,
html body .btn-outline.btn-primary {
	background-color: transparent;
	border-color: var(--canopy);
	color: var(--canopy);
}

html body .btn.btn-outline:hover,
html body .btn-outline-primary:hover,
html body .btn-outline.btn-primary:hover {
	background-color: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

/* Ghost / outline on a dark band or a photo. */
html body .btn-outline.btn-light,
html body .btn-light.btn-outline,
html body .section-text-light .btn.btn-outline,
html body .section-secondary .btn.btn-outline,
html body .section-primary .btn.btn-outline {
	background-color: transparent;
	border-color: rgba(245, 240, 230, 0.8);
	color: var(--cream);
}

html body .btn-outline.btn-light:hover,
html body .btn-light.btn-outline:hover,
html body .section-text-light .btn.btn-outline:hover,
html body .section-secondary .btn.btn-outline:hover,
html body .section-primary .btn.btn-outline:hover {
	background-color: var(--cream);
	border-color: var(--cream);
	color: var(--forest);
}

/* .btn-group of pills - square the inner edges so they still read as a set. */
html .btn-group .btn:not(:first-child):not(:last-child) {
	border-radius: 0;
}

html .btn-group .btn:first-child:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html .btn-group .btn:last-child:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

html .btn-group .btn:hover {
	transform: none;
	box-shadow: none;
	z-index: 2;
}

/* Inline text link with an uppercase micro-label - the comp's "read more". */
.roots-link {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--canopy);
	border-bottom: 1px solid var(--canopy);
	padding-bottom: 1px;
	text-decoration: none;
}

.roots-link:hover {
	color: var(--forest);
	border-bottom-color: var(--forest);
}

/* Truncated excerpt on a list page: body copy at reading width, with the
   "read the rest" link running on at the end of it. */
.excerpt {
	max-width: 78ch;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.88;
	font-weight: 300;
	color: var(--muted);
}

/*-----------------------------------------------------------------------------
 * 6. Header and navigation
 *
 * The comp's nav is a 72px translucent bar over blurred paper with a hairline
 * bottom rule, 11px letterspaced links that grow an underline, and a pill CTA.
 *---------------------------------------------------------------------------*/
html #header .header-body {
	background: rgba(250, 247, 242, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 0;
	border-bottom: 1px solid var(--rule);
	box-shadow: none;
	transition: box-shadow 0.3s ease;
}

html #header.sticky-header-active .header-body,
html #header .header-body.sticky-header-active {
	box-shadow: 0 4px 32px rgba(28, 43, 26, 0.08);
}

html #header .header-container {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

html #header .header-row {
	min-height: 72px;
}

/* Top utility strip - deep forest, tiny letterspaced type. */
html #header .header-top,
html #header .header-top.header-top-primary {
	background: var(--forest);
	border: 0;
	min-height: 0;
}

html #header .header-top .header-row {
	min-height: 0;
}

html #header .header-top .header-column {
	min-height: 0;
	padding: 0;
}

html #header .header-top .nav-link,
html #header .header-top .header-nav-top .nav-pills .nav-link {
	padding: 0.35rem 0.9rem;
	font-family: var(--font-body);
	font-size: 10px !important;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fern) !important;
	background: transparent;
}

html #header .header-top .nav-link:hover,
html #header .header-top .nav-link:hover i {
	color: var(--gold-lt) !important;
}

html #header .header-top .nav-link i {
	color: var(--gold) !important;
}

/* Logo. */
html #header .header-logo img {
	max-height: 52px;
	width: auto;
	transition: max-height 0.3s ease;
}

html #header.sticky-header-active .header-logo img {
	max-height: 42px;
}

/* Wordmark fallback / lockup beside the logo. */
.brand-lockup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
}

.brand-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--forest);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.brand-sub {
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 400;
	color: var(--bark-lt);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Main nav links. */
html #header .header-nav-main nav > ul > li > a,
html #header .header-nav-main nav > ul > li > a.dropdown-item {
	position: relative;
	padding: 10px 0;
	margin: 0 16px;
	background: transparent !important;
	font-family: var(--font-body) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--muted) !important;
	border: 0;
	border-radius: 0;
}

html #header .header-nav-main nav > ul > li > a::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--canopy);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

html #header .header-nav-main nav > ul > li > a:hover,
html #header .header-nav-main nav > ul > li.active > a,
html #header .header-nav-main nav > ul > li > a.active {
	color: var(--canopy) !important;
}

html #header .header-nav-main nav > ul > li > a:hover::after,
html #header .header-nav-main nav > ul > li.active > a::after,
html #header .header-nav-main nav > ul > li > a.active::after {
	transform: scaleX(1);
}

/* Porto's dropdown caret - the design has no arrow glyph, the sweep is enough. */
html #header .header-nav-main nav > ul > li.dropdown > a::before,
html #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle::after {
	display: none;
}

/* The single pill item in the nav (Contact). */
html #header .header-nav-main nav > ul > li > a.nav-cta {
	margin-left: 22px;
	padding: 10px 22px;
	border-radius: var(--pill);
	background: var(--canopy) !important;
	color: #fff !important;
}

html #header .header-nav-main nav > ul > li > a.nav-cta:hover {
	background: var(--forest) !important;
	transform: translateY(-1px);
}

html #header .header-nav-main nav > ul > li > a.nav-cta::after {
	display: none;
}

/* Dropdowns. */
html #header .header-nav-main nav > ul > li > .dropdown-menu {
	padding: 10px 0;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	min-width: 250px;
}

html #header .header-nav-main nav > ul > li > .dropdown-menu li a,
html #header .header-nav-main nav .dropdown-menu .dropdown-item {
	padding: 9px 20px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--muted);
	border: 0;
	background: transparent;
}

html #header .header-nav-main nav > ul > li > .dropdown-menu li a:hover,
html #header .header-nav-main nav .dropdown-menu .dropdown-item:hover {
	background: var(--leaf-tint);
	color: var(--canopy);
}

html #header .header-nav-main nav .dropdown-menu i {
	color: var(--sage) !important;
}

/* Mobile hamburger. */
html #header .header-btn-collapse-nav {
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	padding: 8px 13px;
	color: var(--canopy);
	box-shadow: none;
}

html #header .header-btn-collapse-nav:hover {
	background: var(--leaf-tint);
	transform: none;
	box-shadow: none;
}

/* Collapsed mobile menu.
   Porto's mobile rules paint the active item as
   `color: var(--light) !important; background: var(--grey-500)`, so the active
   link needs !important here or it turns cream-on-parchment. */
@media (max-width: 991px) {
	html #header .header-nav-main nav {
		background: var(--warm);
		border-top: 1px solid var(--rule);
		padding: 6px 0 18px;
	}

	html #header .header-nav-main nav > ul {
		padding: 0 4px;
	}

	html #header .header-nav-main nav > ul > li > a,
	html #header .header-nav-main nav > ul > li > a.dropdown-item {
		display: block;
		width: 100%;
		margin: 0;
		padding: 14px 16px;
		border-bottom: 1px solid var(--rule);
		border-radius: 0;
		background: transparent !important;
	}

	html #header .header-nav-main nav > ul > li > a.active,
	html #header .header-nav-main nav > ul:not(:hover) > li > a.active,
	html #header .header-nav-main nav > ul > li.active > a {
		color: var(--canopy) !important;
		background: var(--leaf-tint) !important;
	}

	html #header .header-nav-main nav > ul > li > a.nav-cta {
		display: inline-block;
		width: auto;
		margin: 18px 16px 0;
		padding: 12px 26px;
		border-bottom: 0;
		border-radius: var(--pill);
		background: var(--canopy) !important;
		color: #fff !important;
	}

	html #header .header-nav-main nav > ul > li > a::after {
		display: none;
	}

	/* Porto's chevron for a mobile submenu. */
	html #header .header-nav-main nav > ul > li.dropdown > a .fa-chevron-down,
	html #header .header-nav-main nav > ul > li.dropdown > a::after {
		color: var(--sage);
	}

	html #header .header-nav-main nav .dropdown-menu {
		border: 0;
		box-shadow: none;
		padding: 4px 0 8px 16px;
		background: transparent;
	}
}

/* The booking button that lives in the top strip. */
html #header .header-nav-features-button .btn {
	padding: 8px 18px;
	font-size: 10px;
}

/* Social icons in the header strip. */
html #header .header-social-icons a {
	color: var(--fern);
	background: transparent;
	border: 0;
}

html #header .header-social-icons li:hover a {
	color: var(--gold-lt);
	background: transparent;
}

/* "Side Logo With Menu Bar" puts the nav on a forest band, so the link color
   has to flip or it disappears. */
html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li > a,
html #header .header-nav-force-light-text .header-nav-main nav > ul > li > a {
	color: rgba(232, 237, 224, 0.82) !important;
}

html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li > a:hover,
html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li.active > a,
html #header .header-nav-force-light-text .header-nav-main nav > ul > li > a:hover {
	color: var(--gold-lt) !important;
}

html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li > a::after,
html #header .header-nav-force-light-text .header-nav-main nav > ul > li > a::after {
	background: var(--gold);
}

html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li > a.nav-cta,
html #header .header-nav-force-light-text .header-nav-main nav > ul > li > a.nav-cta {
	background: var(--gold) !important;
	color: var(--forest) !important;
}

html #header .header-nav-bar.bg-color-secondary .header-nav-main nav > ul > li > a.nav-cta:hover {
	background: var(--gold-lt) !important;
	color: var(--forest) !important;
}

/* "Side Logo With Menu Bar" also carries an email/phone block beside the logo. */
html #header .header-extra-info li {
	margin-left: 1.6rem;
}

html #header .header-extra-info label {
	margin-bottom: 2px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--bark-lt);
}

html #header .header-extra-info strong,
html #header .header-extra-info strong a {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--canopy);
}

html #header .header-extra-info .header-extra-info-icon i {
	color: var(--sage) !important;
}

/* Porto's own bottom-line nav decorations duplicate our underline sweep. */
html #header .header-nav-line-under-text .header-nav-main nav > ul > li > a::before,
html #header .header-nav-bottom-line-effect-1 .header-nav-main nav > ul > li > a::before {
	display: none;
}

/*-----------------------------------------------------------------------------
 * 7. Page header (interior page hero)
 *---------------------------------------------------------------------------*/
html .page-header {
	padding: 96px 0 84px;
	margin: 0;
	border: 0;
	background: var(--parchment);
}

html .page-header h1 {
	font-family: var(--font-display) !important;
	font-size: clamp(36px, 4.4vw, 58px) !important;
	font-weight: 300 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--forest);
	margin: 0;
}

html .page-header .breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bark-lt);
}

html .page-header .breadcrumb li,
html .page-header .breadcrumb li.active {
	color: var(--bark-lt);
}

html .page-header .breadcrumb li + li::before {
	color: var(--fern);
}

/* Photographic page headers. The comp keeps its imagery muted enough for
   cream type to read, so the overlay is a deep forest wash rather than black. */
html .page-header.page-header-background,
html .page-header.parallax {
	background-color: var(--forest);
}

/* Left alone, Porto's parallax layer can end up shorter than the band. */
html .page-header .parallax-background {
	background-size: cover !important;
	background-position: center 35% !important;
}

html .page-header.page-header-background h1,
html .page-header.parallax h1,
html .page-header.section-text-light h1,
html .page-header.bg-secondary h1 {
	color: var(--cream);
}

html .page-header.page-header-background .breadcrumb,
html .page-header.parallax .breadcrumb,
html .page-header.section-text-light .breadcrumb,
html .page-header.bg-secondary .breadcrumb,
html .page-header .breadcrumb-light li,
html .page-header .breadcrumb-light li.active {
	color: var(--gold);
}

html .page-header.bg-secondary,
html .page-header.section-text-light {
	background: var(--forest);
}

/* Same directional wash as the hero, and the same opacity reset - see the
   note in section 8. */
html .page-header.overlay::before,
html .page-header.overlay.overlay-show::before {
	background-color: transparent !important;
	background-image: linear-gradient(160deg, rgba(15, 22, 14, 0.76) 0%,
			rgba(20, 30, 18, 0.64) 55%, rgba(24, 38, 21, 0.52) 100%);
	opacity: 1;
}

html .page-header-classic h1[data-title-border]::before,
html .page-header-classic h1::after {
	background: var(--gold);
}

/*-----------------------------------------------------------------------------
 * 8. Hero / slider
 *
 * slider.php renders an owl carousel of full-bleed photos. The comp's hero is
 * the same idea: a forest photo, a warm directional scrim, cream serif display
 * type, and a gold eyebrow.
 *---------------------------------------------------------------------------*/
/* Porto's .overlay paints a flat var(--dark) at 80%. The comp instead uses a
   directional wash - dense behind the type on the left, nearly clear on the
   right so the forest photo still reads. The gradient carries its own alpha,
   so the element's opacity has to go back to 1. */
/* theme-elements declares `.overlay-color-dark:not(.no-skin):before
   { background-color: var(--dark) !important }`, so any wash that has to show
   the photo through it needs !important on the color as well. The page-header
   markup no longer asks for that class, but other CMS-driven markup might. */
html .roots-hero .owl-item.overlay::before,
html .roots-hero .owl-item.overlay.overlay-show::before {
	background-color: transparent !important;
	background-image: linear-gradient(105deg, rgba(15, 22, 14, 0.78) 0%,
			rgba(20, 30, 18, 0.56) 48%, rgba(28, 43, 26, 0.24) 100%);
	opacity: 1;
}

/* Centered ("Static Hero") variant: the type sits mid-frame, so the wash has
   to be even rather than directional. */
html .roots-hero.dots-inside .owl-item.overlay::before,
html .roots-hero.dots-inside .owl-item.overlay.overlay-show::before {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(15, 22, 14, 0.62) 0%,
			rgba(20, 30, 18, 0.5) 50%, rgba(15, 22, 14, 0.68) 100%);
	opacity: 1;
}

html .roots-hero {
	min-height: 520px;
	margin-bottom: 0;
}

html .roots-hero .owl-item {
	min-height: 520px;
}

/* Hero CTA row. */
.hero-ctas {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}

.hero-eyebrow::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--gold);
}

.hero-title {
	font-family: var(--font-display);
	font-size: clamp(42px, 5.2vw, 72px);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--cream);
	margin-bottom: 24px;
}

.hero-title em {
	font-style: italic;
	color: #c8e8a8;
}

.hero-body {
	font-size: 15px;
	line-height: 1.88;
	font-weight: 300;
	color: rgba(245, 240, 230, 0.85);
	max-width: 52ch;
	margin-bottom: 34px;
}

/* Scroll cue. */
.hero-scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(245, 240, 230, 0.72);
	pointer-events: none;
}

.hero-scroll .scroll-line {
	width: 1px;
	height: 36px;
	background: var(--fern);
	animation: rootsScroll 2.2s ease infinite;
}

@keyframes rootsScroll {
	0% { transform: scaleY(0); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
	51% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 767px) {
	.hero-scroll {
		display: none;
	}
}

/* Owl nav and dots in palette. */
html .owl-carousel .owl-nav button.owl-prev,
html .owl-carousel .owl-nav button.owl-next {
	color: var(--cream);
}

html .owl-carousel .owl-dots .owl-dot span,
html .owl-theme .owl-dots .owl-dot span {
	width: 8px;
	height: 8px;
	margin: 5px;
	background: rgba(168, 196, 154, 0.45);
	border: 0;
}

html .owl-carousel .owl-dots .owl-dot.active span,
html .owl-carousel .owl-dots .owl-dot:hover span,
html .owl-theme .owl-dots .owl-dot.active span,
html .owl-theme .owl-dots .owl-dot:hover span {
	background: var(--gold);
}

html .owl-carousel.nav-style-3 .owl-nav button.owl-prev,
html .owl-carousel.nav-style-3 .owl-nav button.owl-next {
	color: var(--canopy);
}

/*-----------------------------------------------------------------------------
 * 9. Call to action band
 *---------------------------------------------------------------------------*/
html .call-to-action {
	padding: 80px 0;
	margin: 0;
	border: 0;
	background: var(--canopy);
}

html .call-to-action.call-to-action-secondary,
html .call-to-action.call-to-action-primary {
	background: var(--canopy);
	border: 0;
}

html .call-to-action .container > .row > [class*="col-"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

html .call-to-action .call-to-action-content {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

html .call-to-action .call-to-action-content p {
	margin: 0;
}

/* The two CTA lines: an italic gold lead-in over a cream display line. */
html .call-to-action .cta-lead {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.3;
	color: var(--gold-lt);
	letter-spacing: -0.005em;
	text-transform: none;
}

html .call-to-action .cta-line {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 300;
	line-height: 1.12;
	color: var(--cream);
	letter-spacing: -0.005em;
	text-transform: none;
}

html .call-to-action .btn {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--forest);
}

html .call-to-action .btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--canopy);
}

/*-----------------------------------------------------------------------------
 * 10. Counters
 *---------------------------------------------------------------------------*/
html .counters .counter strong {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 300;
	line-height: 1;
	color: var(--gold-lt);
}

html .counters .counter label {
	display: block;
	margin-top: 10px;
	font-family: var(--font-body) !important;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--fern) !important;
}

html .counters .counter i {
	font-size: 26px;
	color: var(--sage);
	--fa-primary-color: var(--fern);
	--fa-secondary-color: var(--sage);
	--fa-secondary-opacity: 1;
}

/*-----------------------------------------------------------------------------
 * 11. Cards, thumbnails, image frames
 *---------------------------------------------------------------------------*/
html .card {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

html .card.card-border,
html .card.card-border-bottom {
	border-left: 0;
	border-bottom: 1px solid var(--rule);
}

html .card.card-border-bottom::after,
html .card.card-border::after {
	background: linear-gradient(90deg, var(--canopy), var(--gold));
}

html .card-body {
	padding: 28px 30px;
}

html .card h3,
html .card h4,
html .card-title {
	color: var(--forest);
}

html .img-thumbnail,
html .thumb-info,
html .thumb-info img,
html .image-frame,
html .image-frame-wrapper {
	border-radius: var(--radius);
	border-color: var(--rule);
	background: #fff;
	padding: 0;
}

html .img-thumbnail {
	padding: 5px;
	box-shadow: var(--shadow-sm);
}

html .thumb-info {
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

html .thumb-info:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

html .thumb-info .thumb-info-wrapper::after {
	background: linear-gradient(to top, rgba(15, 22, 14, 0.85) 0%,
			rgba(15, 22, 14, 0.15) 60%, rgba(15, 22, 14, 0) 100%);
}

html .thumb-info .thumb-info-title {
	font-family: var(--font-display);
	text-transform: none;
	letter-spacing: 0;
}

html .thumb-info .thumb-info-title h2,
html .thumb-info .thumb-info-title h3 {
	color: var(--cream);
	font-weight: 500;
}

/* Badges - small caps pills in palette. */
html .badge {
	padding: 5px 12px;
	border-radius: 20px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

html .badge-primary { background: var(--canopy); color: #fff; }
html .badge-secondary { background: var(--forest); color: var(--cream); }
html .badge-tertiary { background: var(--gold); color: var(--forest); }

/*-----------------------------------------------------------------------------
 * 12. Testimonials
 *---------------------------------------------------------------------------*/
/* The comp keeps the quote and its attribution inside one white card, so the
   card lives on .testimonial and the blockquote Porto styles becomes a plain
   transparent wrapper. Each Porto testimonial-style-N re-declares its own
   blockquote background, family and size - some with !important - so the
   styles the includes actually use have to be named explicitly. */
html .testimonial,
html .testimonial.testimonial-style-2,
html .testimonial.testimonial-style-3,
html .testimonial.testimonial-style-5 {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 34px 32px 28px;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

html .testimonial:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

html .testimonial blockquote,
html .testimonial.testimonial-style-2 blockquote,
html .testimonial.testimonial-style-3 blockquote,
html .testimonial.testimonial-style-5 blockquote {
	flex: 1 1 auto;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

html .testimonial blockquote::before,
html .testimonial blockquote::after,
html .testimonial.testimonial-style-2 blockquote::before,
html .testimonial.testimonial-style-3 blockquote::before {
	display: none;
}

html .testimonial blockquote p,
html .testimonial.testimonial-style-2 blockquote p,
html .testimonial.testimonial-style-3 blockquote p,
html .testimonial.testimonial-style-5 blockquote p {
	font-family: var(--font-display);
	font-size: 17px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.72;
	color: var(--ink);
	text-align: left;
}

html .testimonial .testimonial-author,
html .testimonial.testimonial-style-5 .testimonial-author,
html .testimonial.testimonial-style-2 .testimonial-author,
html .testimonial.testimonial-style-3 .testimonial-author {
	display: block;
	flex: 0 0 auto;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--rule);
	background: transparent;
}

html .testimonial .testimonial-author p,
html .testimonial .testimonial-author strong,
html .testimonial .testimonial-author span,
html .testimonial.testimonial-style-5 .testimonial-author p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.8;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
}

html .testimonial .testimonial-author strong {
	display: block;
	color: var(--forest);
	font-weight: 500 !important;
	letter-spacing: 0.14em;
}

/* Porto's speech-bubble tail belongs to a look this design does not use. */
html .testimonial .testimonial-arrow-down {
	display: none;
}

/* Star rows read as gold, not amber. */
.review-stars {
	display: block;
	margin-top: 14px;
	letter-spacing: 0.2em;
	font-size: 12px;
	color: var(--gold);
	--fa-primary-color: var(--gold);
	--fa-secondary-color: var(--gold-lt);
	--fa-secondary-opacity: 1;
}

.review-stars-light {
	color: var(--gold-lt);
	--fa-primary-color: var(--gold-lt);
	--fa-secondary-color: var(--gold);
}

html .testimonial .text-warning i,
html .text-warning .fa-stars {
	color: var(--gold) !important;
	--fa-primary-color: var(--gold);
	--fa-secondary-color: var(--gold-lt);
	--fa-secondary-opacity: 1;
}

/* Full-width quote with no card behind it - the "Centered" style. */
.quote-plain p {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 28px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cream);
	margin: 0;
}

.quote-plain cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sage);
	font-style: normal;
}

/* The parallax "Background" style hosts a .pquote, whose own dark slab would
   double up on the section wash. Let the photo show through it instead. */
html .section-parallax .pquote cite,
html .section-secondary .pquote cite {
	color: var(--fern);
}

html .section-parallax .pquote {
	background: rgba(28, 43, 26, 0.42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(168, 196, 154, 0.2);
}

html .section-parallax.overlay::before,
html .section-parallax.overlay.overlay-show::before {
	background-color: rgba(15, 22, 14, 0.62) !important;
	background-image: none;
	opacity: 1;
}

/* Quote glyphs. */
html .fa-quote-left,
html .fa-quote-right {
	color: var(--fern) !important;
	--fa-primary-color: var(--fern);
	--fa-secondary-color: var(--sage);
}

/*-----------------------------------------------------------------------------
 * 13. Forms
 *
 * The comp's form: warm field on a fern hairline, 10px radius, a soft canopy
 * focus ring, and a small-caps label above.
 *---------------------------------------------------------------------------*/
html .form-control,
html .form-select,
html textarea.form-control,
html .cms-form .form-control,
html .cms-form .form-select {
	padding: 13px 16px;
	background-color: var(--warm);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	color: var(--ink);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html .form-control:focus,
html .form-select:focus,
html .cms-form .form-control:focus,
html .cms-form .form-select:focus {
	background-color: #fff;
	border-color: var(--canopy);
	box-shadow: 0 0 0 3px rgba(46, 94, 42, 0.09);
	color: var(--ink);
}

html .form-control::placeholder {
	color: rgba(90, 110, 88, 0.55);
}

html textarea.form-control {
	min-height: 130px;
	resize: vertical;
}

html .form-label,
html .cms-form .form-label,
html label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

html .form-text,
html .cms-form .form-text {
	font-size: 12px;
	font-weight: 300;
	color: var(--muted);
	letter-spacing: 0;
	text-transform: none;
}

html .form-check-label {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

html .form-check-input:checked {
	background-color: var(--canopy);
	border-color: var(--canopy);
}

html .form-check-input:focus {
	border-color: var(--canopy);
	box-shadow: 0 0 0 3px rgba(46, 94, 42, 0.09);
}

html .form-control.is-invalid,
html .was-validated .form-control:invalid {
	border-color: var(--bloom);
}

html .invalid-feedback,
html .cms-form .invalid-feedback {
	font-size: 12px;
	color: #a8443a;
	letter-spacing: 0;
	text-transform: none;
}

/* Submit button in a CMS form is a full-width pill. */
html .cms-form button[type="submit"],
html .cms-form .btn-primary {
	width: 100%;
	padding: 15px;
	margin-top: 6px;
}

@media (min-width: 768px) {
	html .cms-form button[type="submit"],
	html .cms-form .btn-primary {
		width: auto;
		min-width: 260px;
	}
}

/* A form on a light page reads better inside the comp's white card. */
.roots-form-card {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 44px;
}

@media (max-width: 767px) {
	.roots-form-card {
		padding: 26px 22px;
		border-radius: var(--radius);
	}
}

/*-----------------------------------------------------------------------------
 * 14. Alerts and notices
 *---------------------------------------------------------------------------*/
html .alert {
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--sage);
	border-radius: var(--radius-sm);
	background: var(--cream);
	color: var(--ink);
	font-size: 14px;
	font-weight: 300;
	box-shadow: var(--shadow-sm);
}

html .alert p:last-child {
	margin-bottom: 0;
}

html .alert .alert-heading {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-body);
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bark);
}

html .alert-primary,
html .alert-success {
	background: var(--leaf-tint);
	border-left-color: var(--canopy);
}

html .alert-info {
	background: var(--cream);
	border-left-color: var(--sage);
}

html .alert-warning {
	background: #f9f2df;
	border-left-color: var(--gold);
}

html .alert-danger {
	background: #fbf0ec;
	border-left-color: var(--bloom);
}

html .alert-danger .alert-heading {
	color: #a8443a;
}

html .alert-secondary,
html .alert-dark {
	background: var(--forest);
	border-left-color: var(--gold);
	color: rgba(245, 240, 230, 0.85);
}

html .alert-secondary .alert-heading,
html .alert-dark .alert-heading {
	color: var(--gold);
}

/*-----------------------------------------------------------------------------
 * 15. Footer
 *---------------------------------------------------------------------------*/
html #footer {
	margin: 0;
	padding: 72px 0 0;
	border: 0;
	background: var(--forest);
	color: var(--fern);
}

html #footer h5,
html #footer h6 {
	font-family: var(--font-body) !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--gold) !important;
	margin-bottom: 18px;
	line-height: 1.6;
}

html #footer p,
html #footer li,
html #footer span,
html #footer a {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--fern);
}

html #footer a {
	text-decoration: none;
}

html #footer a:hover,
html #footer a:hover span {
	color: var(--cream);
}

html #footer .list li {
	margin-bottom: 9px;
}

html #footer i {
	color: var(--sage) !important;
	--fa-primary-color: var(--fern);
	--fa-secondary-color: var(--sage);
	--fa-secondary-opacity: 1;
}

html #footer .text-tertiary,
html #footer .text-5 {
	color: var(--gold-lt) !important;
}

html #footer hr {
	border-top-color: rgba(168, 196, 154, 0.14);
}

html #footer .footer-logo img {
	max-width: 180px;
	margin-top: 18px;
}

html #footer .footer-social-icons a,
html #footer .social-icons a {
	background: rgba(245, 240, 230, 0.07);
	border: 1px solid rgba(168, 196, 154, 0.2);
	border-radius: 50%;
	color: var(--fern);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

html #footer .social-icons li:hover a {
	background: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

/* Wordmark in the footer brand column. */
.footer-wordmark {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--gold-lt);
	line-height: 1.1;
}

html #footer .footer-copyright {
	margin-top: 52px;
	padding: 24px 0;
	border-top: 1px solid rgba(168, 196, 154, 0.14);
	background: transparent;
}

html #footer .footer-copyright p {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sage);
}

/* Word rotator (the hashtag ticker) in the footer. */
html #footer .word-rotator .word-rotator-words b {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold) !important;
}

/* Back-to-top button. */
html .scroll-to-top {
	background: var(--canopy);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	opacity: 0;
}

html .scroll-to-top.visible {
	opacity: 1;
}

html .scroll-to-top:hover {
	background: var(--forest);
}

html .scroll-to-top i {
	color: var(--cream) !important;
	--fa-primary-color: var(--cream);
	--fa-secondary-color: var(--fern);
	--fa-secondary-opacity: 1;
}

/*-----------------------------------------------------------------------------
 * 16. Rich text from the CMS
 *
 * Every "content" field is editor HTML dropped into a .text-3-4 wrapper. It
 * has to look like the comp without any classes to hang styling on.
 *---------------------------------------------------------------------------*/
.roots-rte p,
.text-3-4 p {
	font-size: 15px;
	line-height: 1.88;
	font-weight: 300;
	color: var(--muted);
	margin-bottom: 1.15rem;
	/* A full 1180px line of 15px type is roughly 160 characters, which is
	   unreadable. Cap the measure on text only - images, tables and galleries
	   below still get the whole column. */
	max-width: 78ch;
}

/* Inside a card the author already chose the measure by choosing the card
   width, so the cap would just leave a ragged gap on the right. */
.roots-rte .card p,
.roots-rte .card li,
.roots-rte .roots-card p,
.text-3-4 .card p,
.text-3-4 .card li,
.text-3-4 .roots-card p {
	max-width: none;
}

.roots-rte h2,
.roots-rte h3,
.roots-rte h4,
.text-3-4 h2,
.text-3-4 h3,
.text-3-4 h4 {
	font-family: var(--font-display);
	color: var(--forest);
	margin: 2rem 0 0.75rem;
}

.roots-rte h2, .text-3-4 h2 { font-size: 30px; font-weight: 400; }
.roots-rte h3, .text-3-4 h3 { font-size: 24px; font-weight: 500; }
.roots-rte h4, .text-3-4 h4 { font-size: 19px; font-weight: 500; }

.roots-rte ul,
.roots-rte ol,
.text-3-4 ul,
.text-3-4 ol {
	margin: 0 0 1.15rem 1.2rem;
	padding: 0;
}

.roots-rte li,
.text-3-4 li {
	font-size: 15px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--muted);
	margin-bottom: 0.4rem;
	max-width: 78ch;
}

.roots-rte ul,
.text-3-4 ul {
	list-style: none;
	margin-left: 0;
}

.roots-rte ul > li,
.text-3-4 ul > li {
	position: relative;
	padding-left: 1.3rem;
}

.roots-rte ul > li::before,
.text-3-4 ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.78em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sage);
}

.roots-rte a,
.text-3-4 a {
	color: var(--canopy);
	border-bottom: 1px solid rgba(46, 94, 42, 0.35);
}

.roots-rte a:hover,
.text-3-4 a:hover {
	color: var(--forest);
	border-bottom-color: var(--forest);
}

.roots-rte blockquote,
.text-3-4 blockquote {
	margin: 2rem 0;
	padding: 1.25rem 0 1.25rem 1.75rem;
	border-left: 2px solid var(--fern);
	background: transparent;
}

.roots-rte blockquote p,
.text-3-4 blockquote p {
	font-family: var(--font-display);
	font-size: 20px;
	font-style: italic;
	line-height: 1.7;
	color: var(--forest);
	margin: 0;
}

.roots-rte img,
.text-3-4 img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.roots-rte table,
.text-3-4 table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
	font-size: 14px;
}

.roots-rte th,
.text-3-4 th {
	padding: 12px 14px;
	background: var(--parchment);
	border-bottom: 1px solid var(--rule-strong);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bark);
	text-align: left;
}

.roots-rte td,
.text-3-4 td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
	font-weight: 300;
}

/* Text on a dark band. */
.section-secondary .text-3-4 p,
.section-primary .text-3-4 p,
.section-text-light .text-3-4 p,
.section-secondary .text-3-4 li,
.section-primary .text-3-4 li,
.section-text-light .text-3-4 li {
	color: rgba(245, 240, 230, 0.78);
}

.section-secondary .text-3-4 a,
.section-primary .text-3-4 a,
.section-text-light .text-3-4 a {
	color: var(--gold-lt);
	border-bottom-color: rgba(232, 213, 160, 0.4);
}

/*-----------------------------------------------------------------------------
 * 17. Misc components used by the includes
 *---------------------------------------------------------------------------*/

/* list-icons (contact page) - swap Porto's small filled dot for the round
   tinted chip from the comp.
   Porto targets these with `[class*="fa-"]:first-child` inside three chained
   classes, which outweighs a plain `i:first-child` selector - so this has to
   mirror that shape rather than name the element. */
html .list.list-icons li {
	position: relative;
	margin-bottom: 1.15rem;
	font-size: 14px;
	font-weight: 300;
	color: var(--muted);
	line-height: 1.7;
}

html .list.list-icons.list-icons-style-3 li {
	padding-top: 8px;
	padding-left: 54px;
}

html .list.list-icons li > [class*="fa-"]:first-child,
html .list.list-icons li > .icons:first-child,
html .list.list-icons.list-icons-style-3 li > [class*="fa-"]:first-child,
html .list.list-icons.list-icons-style-3 li > .icons:first-child {
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	line-height: 38px;
	text-align: center;
	font-size: 14px;
	border: 0;
	border-radius: 50%;
	background-color: var(--leaf-tint);
	color: var(--canopy);
	--fa-primary-color: var(--canopy);
	--fa-secondary-color: var(--sage);
	--fa-secondary-opacity: 0.45;
}

/* Read-more collapse on the FAQ list. The plugin parks the button absolutely
   over the faded-out tail of the text, so the button needs its own ground or
   the label sits on top of a half-visible line. */
html .readmore-button-wrapper {
	padding-top: 10px;
	background: var(--warm);
}

html .readmore-button-wrapper a,
html .readmore-button-wrapper .btn {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--canopy);
}

/* Google map embed - the comp's imagery is warm, so drop the gray filter that
   custom.css applies and just soften the map instead. */
html .google-map,
html #googlemaps {
	border-top: 1px solid var(--rule);
}

/* Accordion / collapse chrome, if a section adds one later. */
html .accordion .card-header a {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--forest);
}

/* Pagination. */
html .pagination .page-link {
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	margin: 0 3px;
	color: var(--canopy);
	font-size: 12px;
	letter-spacing: 0.08em;
}

html .pagination .page-item.active .page-link {
	background: var(--canopy);
	border-color: var(--canopy);
	color: #fff;
}

/* Office hours list on the contact page. */
.hours-row {
	padding: 9px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 14px;
	font-weight: 300;
	color: var(--muted);
}

.hours-row:last-child {
	border-bottom: 0;
}

.hours-row-today {
	color: var(--canopy);
	font-weight: 500;
}

/* Coming-soon holding page. */
.coming-soon {
	background: var(--parchment);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.coming-soon .main {
	width: 100%;
	padding: 72px 0;
}

.soon-inner {
	background: var(--warm);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 56px 48px;
}

.soon-mark {
	max-height: 96px;
	width: auto;
	margin-bottom: 22px;
}

.soon-wordmark {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: var(--forest);
}

.soon-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
}

.coming-soon .stitle,
.coming-soon .sbody {
	text-align: center;
}

@media (max-width: 767px) {
	.soon-inner {
		padding: 34px 24px;
	}
}

/*-----------------------------------------------------------------------------
 * 18. Reveal on scroll
 *
 * Porto's appear-animation plugin does the work; these keep the motion in the
 * comp's register (short, soft, no bounce).
 *---------------------------------------------------------------------------*/
html .appear-animation {
	animation-duration: 0.9s;
	animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html .appear-animation,
	.hero-scroll .scroll-line,
	html .btn {
		animation: none !important;
		transition: none !important;
	}

	html .btn:hover,
	html .roots-card:hover,
	html .thumb-info:hover {
		transform: none;
	}
}

/*-----------------------------------------------------------------------------
 * 19. Responsive
 *---------------------------------------------------------------------------*/
@media (max-width: 991px) {
	html .section,
	html .call-to-action {
		padding: 60px 0;
	}

	html .page-header {
		padding: 68px 0 56px;
	}

	html #footer {
		padding-top: 52px;
	}

	.pquote {
		margin: 2rem 0;
	}
}

@media (max-width: 767px) {
	body,
	html body {
		font-size: 14.5px;
	}

	html .section {
		padding: 48px 0;
	}

	.roots-card {
		padding: 28px 24px;
	}

	html .card-body {
		padding: 22px 22px;
	}

	.eyebrow {
		letter-spacing: 0.22em;
	}
}