/*
 * Site theme on Bootstrap 6.
 *
 * Bootstrap 6 is loaded first (css/bootstrap.min.css, trimmed to the classes
 * these pages use by tools/assets.mjs). This file keeps the site's own design:
 *   1. the self-hosted fonts;
 *   2. Bootstrap's design tokens (--bs-*) pointed at the site's palette and type;
 *   3. in the "custom" cascade layer Bootstrap reserves for a site's styles
 *      (so a Bootstrap utility class on an element still wins):
 *      a. the element defaults the pages were designed on,
 *      b. the site's layout and components,
 *      c. Bootstrap's navbar, drawer, buttons, form fields and accordion in
 *         that design.
 */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/lato-latin-ext-300.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/lato-latin-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/lato-latin-ext-900.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/lato-latin-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:host {
  color-scheme: light;
  /* Bootstrap reserves the scrollbar's width on every page; these pages were
     designed without that. */
  scrollbar-gutter: auto;
  --bs-body-font-family: Lato, sans-serif;
  --bs-body-color: var(--riv-ink);
  --bs-fg-body: var(--riv-ink);
  --bs-heading-color: inherit;
  --bs-link-color: inherit;
  --bs-link-hover-color: inherit;
  --bs-bg-body: #fff;
  --bs-primary-base: var(--riv-accent);
  --bs-primary-bg: var(--riv-accent);
  --bs-primary-fg: var(--riv-accent);
  --bs-primary-border: var(--riv-accent);
  --bs-primary-contrast: #fff;
  --bs-primary-focus-ring: color-mix(in srgb, var(--riv-accent) 40%, transparent);
  --bs-focus-ring-color: color-mix(in srgb, var(--riv-accent) 40%, transparent);
}

@layer custom {

/* ---- a. Element defaults ------------------------------------------------ */

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden] {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
/**
 * Address inconsistent and variable font size in all browsers.
 */
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
/**
 * Contain overflow in all browsers.
 */
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.btn-solid {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.btn-solid {
  -webkit-appearance: button;
}
h1,
h2,
h3 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.embed:before,
.embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
button,
[type='button'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.lead-form {
  margin: 0 0 15px;
}
.lead-form_done {
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.lead-form_fail {
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-control,
.form-control {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.form-control::placeholder,
.form-control::placeholder {
  color: #999;
}
.form-control:focus,
.form-control:focus {
  border-color: #3898EC;
  outline: 0;
}
textarea.form-control,
textarea.form-control {
  height: auto;
}
.form-control {
  background-color: #f3f3f3;
}
/**
 * ## Note
 * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
 * For example percentage units do not work on descendants of elements that
 * have any dimensions expressed in viewport units. It also doesn’t handle them at
 * all in `calc()`.
 */
/**
 * Wrapper around all lightbox elements
 *
 * 1. Since the lightbox can receive focus, IE also gives it an outline.
 * 2. Fixes flickering on Chrome when a transition is in progress
 *    underneath the lightbox.
 */
/**
 * Neat trick to bind the rubberband effect to our canvas instead of the whole
 * document on iOS. It also prevents a bug that causes the document underneath to scroll.
 */
/* .w-lightbox-content */
/*
 * 1. Remove default margin set by user-agent on the <figure> element.
 */
/**
 * IE adds image dimensions as width and height attributes on the IMG tag,
 * but we need both width and height to be set to auto to enable scaling.
 */
/**
 * 1. Reset if style is set by user on "All Images"
 */
/*
 * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
 * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
 * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
 */
/**
 * 1. All IE versions add extra space at the bottom without this.
 */
/*
 * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
 *    which doesn’t work in Safari anyway.
 * 2. Chrome renders images pixelated when switching to GPU. Making sure
 *    the parent is also rendered on the GPU (by setting translate3d for
 *    example) fixes this behavior.
 */
/*
 * Spinner
 *
 * Absolute pixel values are used to avoid rounding errors that would cause
 * the white spinning element to be misaligned with the track.
 */
/*
 * Utility classes
 */
@media (min-width: 768px) {
  /* .w-lightbox-content */
}
.rich-text:before,
.rich-text:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.rich-text:after {
  clear: both;
}

.rich-text ul {
  overflow: hidden;
}
.rich-text figure {
  position: relative;
  max-width: 60%;
}
.rich-text figure > div:before {
  cursor: default!important;
}
.rich-text figure img {
  width: 100%;
}
.rich-text figure div {
  /* fix incorrectly sized selection border in the data manager */
  font-size: 0px;
  color: transparent;
}
/**
 * NOTE: These rules are overridden in site-designer.less to use container queries instead of media queries
 * when the navbar is inside a Frame on the Open Canvas.
 */
.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

/* Bootstrap's components reset to the defaults these pages were designed on.
   :where() keeps these at zero specificity, so every rule of the site's own,
   which follows, wins wherever it says otherwise. */
:where(.container) {
  padding-inline: 0;
}
:where(.navbar) {
  --bs-navbar-padding-y: 0;
  --bs-navbar-min-height: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-brand-font-size: inherit;
  --bs-navbar-brand-font-weight: inherit;
  --bs-navbar-brand-color: inherit;
  --bs-navbar-brand-hover-color: inherit;
  --bs-navbar-color: inherit;
  --bs-navbar-hover-color: inherit;
  --bs-navbar-active-color: inherit;
  position: relative;
  z-index: 1000;
  flex-wrap: nowrap;
  justify-content: normal;
  color: inherit;
  background-color: transparent;
  container-type: normal;
}
:where(.navbar > .container) {
  flex-wrap: nowrap;
}
:where(.navbar-brand) {
  position: relative;
  color: inherit;
  white-space: normal;
}
:where(.navbar-nav) {
  --bs-nav-gap: 0;
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-border-width: 0;
  display: block;
  padding: 0;
  margin: 0;
}
:where(.nav-link) {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-weight: inherit;
  white-space: normal;
  border: 0;
  border-radius: 0;
}
:where(.menu-icon),
:where(.menu-icon span) {
  display: block;
}
:where(.btn-solid) {
  --bs-theme-bg: var(--bs-primary-bg);
  --bs-theme-contrast: var(--bs-primary-contrast);
  min-height: 0;
  gap: 0;
  align-items: normal;
  justify-content: normal;
  font-weight: inherit;
  white-space: normal;
  vertical-align: baseline;
  border-radius: 0;
  -webkit-user-select: auto;
  user-select: auto;
}
:where(button.btn-solid) {
  font-family: inherit;
}
:where(.form-control) {
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}
:where(.form-control:focus) {
  box-shadow: none;
}
:where(.accordion-item) {
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  color: inherit;
  background-color: transparent;
}
:where(.accordion-item:not(:first-of-type)) {
  margin-block-start: 0;
}
:where(.accordion-header) {
  width: auto;
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

/* ---- b. The site's layout and components -------------------------------- */

/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}
/* Set color style to inherit */
/* Get rid of top margin on first element in any rich text element */
.rich-text > :not(div):first-child, .rich-text > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.rich-text>:last-child, .rich-text ul li:last-child {
	margin-bottom: 0 !important;
}
/* Make sure containers never lose their center alignment */
/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/
/* Apply "..." after 3 lines of text */
/* Apply "..." after 2 lines of text */
/* These classes are never overwritten */
.hide {
  display: none !important;
}
@media screen and (max-width: 991px) {
    .hide {
        display: none !important;
    }
}

/* Lato, self-hosted (latin + latin-ext). */
/* Playfair Display, self-hosted (latin + latin-ext). */

:root {
  --base-color-brand--purple: #2d2f55;
  --base-color-neutral--white: #fff;
  --link-color--link-primary: var(--base-color-brand--purple-light);
  --background-color--background-primary: var(--base-color-brand--purple);
  --text-color--text-alternate: var(--base-color-neutral--white);
  --text-color--text-primary: var(--base-color-brand--purple);
  --text-color--text-secondary: var(--base-color-brand--gold);
  --background-color--background-success\<deleted\|variable-879e2a57-3170-38fd-0ae7-d0e890873ab2\>: var(--base-color-system--success-green\<deleted\|variable-8fc09a81-a1c7-3c5b-2cf2-835ad5d96212\>);
  --text-color--text-success\<deleted\|variable-17518f72-fb93-45b5-ad9e-fdd3f2b1833a\>: var(--base-color-system--success-green-dark\<deleted\|variable-70ae3530-1c64-4d15-f2af-205678316683\>);
  --border-color--border-primary: var(--base-color-brand--gold);
  --background-color--background-secondary: var(--base-color-brand--purple-light);
  --background-color--background-tertiary: var(--base-color-brand--gold);
  --background-color--background-error\<deleted\|variable-89aecd3e-2fe8-312c-65a2-e3e7c57d326c\>: var(--base-color-system--error-red\<deleted\|variable-ad7a5e8d-bd95-fba4-5110-cbccfa2520c4\>);
  --text-color--text-error\<deleted\|variable-4a51c5d2-820c-a0d9-b49e-0e5d273c964f\>: var(--base-color-system--error-red-dark\<deleted\|variable-f7a8b234-8033-a5d6-4d85-0326277c2bf8\>);
  --base-color-brand--gold: #d1b35b;
  --link-color--link-alternate: var(--base-color-neutral--white);
  --link-color--link-secondary: var(--base-color-brand--gold);
  --border-color--border-secondary: var(--base-color-brand--purple-light);
  --base-color-brand--purple-light: #383e8a;
  --base-color-system--success-green\<deleted\|variable-8fc09a81-a1c7-3c5b-2cf2-835ad5d96212\>: #cef5ca;
  --base-color-system--success-green-dark\<deleted\|variable-70ae3530-1c64-4d15-f2af-205678316683\>: #114e0b;
  --base-color-system--error-red\<deleted\|variable-ad7a5e8d-bd95-fba4-5110-cbccfa2520c4\>: #f8e4e4;
  --base-color-system--error-red-dark\<deleted\|variable-f7a8b234-8033-a5d6-4d85-0326277c2bf8\>: #3b0b0b;
}

.grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  background-color: var(--base-color-brand--purple);
  color: var(--base-color-neutral--white);
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Playfair Display, sans-serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Playfair Display, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Playfair Display, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--link-color--link-primary);
  transition: all .25s;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: .25rem;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  margin-bottom: .25rem;
  font-weight: 500;
}

figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

figcaption {
  text-align: center;
  margin-top: .25rem;
}

.utility-page_component {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
}

.utility-page_wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 20rem;
  display: flex;
}

.utility-page_image {
  margin-left: auto;
  margin-right: auto;
}

.form_message-success {
  background-color: var(--background-color--background-success\<deleted\|variable-879e2a57-3170-38fd-0ae7-d0e890873ab2\>);
  color: var(--text-color--text-success\<deleted\|variable-17518f72-fb93-45b5-ad9e-fdd3f2b1833a\>);
  padding: 1.25rem;
}

.heading-style-h3 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.text-rich-text h1, .text-rich-text h2, .text-rich-text h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.text-rich-text p {
  margin-bottom: 1rem;
}

.text-rich-text ul {
  margin-bottom: 1.5rem;
}

.heading-style-h1 {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
}

.text-size-regular {
  font-size: 1rem;
}

.text-weight-bold {
  font-weight: 700;
}

.max-width-large {
  width: 100%;
  max-width: 48rem;
}

.form_input {
  border: 1px solid var(--border-color--border-primary);
  background-color: var(--base-color-neutral--white);
  min-height: 3rem;
  color: var(--text-color--text-primary);
  margin-bottom: 0;
  padding: .5rem 1rem;
  font-size: 1rem;
}

.form_input::placeholder {
  color: var(--link-color--link-primary);
}

.form_input.is-text-area {
  min-height: 8rem;
  padding-top: .75rem;
  font-size: 1rem;
}

.heading-style-h2 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
}

.page-wrapper {
  filter: none;
  max-width: 256rem;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.container.is-nav {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.form_message-error {
  background-color: var(--background-color--background-error\<deleted\|variable-89aecd3e-2fe8-312c-65a2-e3e7c57d326c\>);
  color: var(--text-color--text-error\<deleted\|variable-4a51c5d2-820c-a0d9-b49e-0e5d273c964f\>);
  margin-top: .75rem;
  padding: .75rem;
}

.button {
  background-color: var(--base-color-brand--gold);
  color: var(--text-color--text-primary);
  text-align: center;
  padding: .75rem 1.5rem;
  font-weight: 600;
}

.button:hover {
  background-color: var(--background-color--background-secondary);
  color: var(--text-color--text-alternate);
}

.button.is-small {
  padding: .5rem 1.25rem;
}

.text-size-medium {
  font-size: 1.125rem;
}

.text-size-medium.text-weight-bold {
  font-weight: 700;
}

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.button-group.is-right {
  justify-content: flex-end;
  align-items: center;
}

.hide {
  display: none;
}

.spacer-medium {
  width: 100%;
  padding-top: 2rem;
}

.spacer-xsmall {
  width: 100%;
  padding-top: .5rem;
}

.spacer-small {
  width: 100%;
  padding-top: 1rem;
}

.navbar, .nav_drawer-bar {
  background-color: #ddd0;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 4.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  display: flex;
}

.nav_logo-link {
  width: 12.5rem;
  padding-left: 0;
}

.nav_logo-link:hover {
  opacity: .7;
}

.nav_menu {
  align-items: center;
  display: flex;
  position: static;
}

.nav_menu.is-page-height-tablet {
  flex-flow: wrap;
  justify-content: flex-end;
  align-items: center;
}

.nav_link {
  color: var(--link-color--link-alternate);
  padding: .25rem .5rem .25rem .75rem;
  font-size: 1rem;
}

.nav_link:hover {
  color: var(--text-color--text-secondary);
}

.nav_link.active {
  color: var(--link-color--link-secondary);
}

.nav_menu-buttons {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  margin-left: 1rem;
  display: flex;
}

.nav_menu-button {
  padding: 0;
}

.section {
  padding: 4rem 2.5rem;
}

.hero_component {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.hero_image {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.contact_component {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: stretch stretch;
  display: grid;
}

.text-style-tagline {
  color: var(--background-color--background-tertiary);
  letter-spacing: .2em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.contact_form_component {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

.contact_form {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.form_form_label {
  margin-bottom: .5rem;
  font-weight: 400;
}

.form_message-success-wrapper {
  margin-top: 1rem;
  padding: 0;
}

.success-text {
  font-weight: 600;
}

.form_message-error-wrapper {
  margin-top: 1rem;
  padding: 0;
}

.error-text {
  color: #e23939;
}

.overview_component {
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.gallery_grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.gallery_image {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.master_content-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.master_image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.feature_content {
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.feature_image {
  object-fit: cover;
  width: 100%;
}

.faq_component {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: start stretch;
  display: grid;
}

.faq_accordion {
  border: 1px solid var(--border-color--border-secondary);
  background-color: var(--base-color-brand--purple-light);
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.faq_question {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  display: flex;
}

.faq5_icon-wrapper {
  align-self: flex-start;
  width: 2rem;
  display: flex;
}

.icon-embed-small {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  display: flex;
}

.faq_answer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  overflow: hidden;
}

.cta_card {
  grid-column-gap: 5rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr max-content;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 3rem;
  display: grid;
  overflow: hidden;
}

.footer {
  background-image: linear-gradient(#fff0, #000);
  padding: 3rem 2.5rem;
}

.footer_grid {
  grid-column-gap: 4vw;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 12.5rem 4fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: start;
  display: grid;
}

.footer_logo-link {
  float: none;
  width: 12.5rem;
  padding-left: 0;
}

.footer_link-list {
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: flex-start start;
  display: flex;
}

.footer_link {
  color: var(--link-color--link-alternate);
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .875rem;
  font-weight: 400;
  text-decoration: none;
}

.footer_link:hover {
  color: var(--link-color--link-secondary);
}

.table_cell {
  padding: .75rem 1.25rem;
}

.table_row.is-purple {
  background-color: var(--base-color-brand--purple-light);
}

.table_header {
  color: var(--text-color--text-alternate);
  text-align: left;
  padding: .75rem 1.25rem;
  font-family: Playfair Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.table_component {
  width: 100%;
}

.text-size-tiny {
  font-size: .75rem;
}

.feature_image-wrapper:hover {
  opacity: .7;
}

.heading {
  flex-flow: column;
  display: flex;
}

@media screen and (max-width: 991px) {

  .spacer-medium {
    padding-top: 1.5rem;
  }

  .navbar, .nav_drawer-bar {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .nav_menu {
    border-bottom: 1px solid var(--border-color--border-primary);
    background-color: var(--background-color--background-primary);
    -webkit-text-fill-color: inherit;
    background-clip: border-box;
    padding: 1rem 5% 2rem;
    position: absolute;
    overflow: auto;
  }

  .nav_menu.is-page-height-tablet {
    height: 100dvh;
    padding-bottom: 6.5rem;
    transition: height .5s;
  }

  .nav_link {
    width: auto;
    padding: .75rem 0;
    font-size: 1.125rem;
  }

  .nav_menu-buttons {
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 1.5rem;
    margin-left: 0;
  }

  .nav_menu-button {
    width: 3rem;
    height: 3rem;
  }

  .nav_menu-button[aria-expanded="true"] {
    background-color: #0000;
  }

  .menu-icon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon1_line-top {
    background-color: var(--base-color-neutral--white);
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon1_line-middle {
    background-color: var(--base-color-neutral--white);
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon1_line-middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon1_line-bottom {
    background-color: var(--base-color-neutral--white);
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .section {
    padding: 4rem 2rem;
  }

  .hero_component {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }

  .contact_component {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }

  .overview_component, .master_content-wrapper {
    grid-column-gap: 3rem;
    grid-row-gap: 2rem;
  }

  .feature_content {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }

  .cta_card {
    grid-column-gap: 3rem;
    padding-bottom: 2rem;
  }

  .footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .footer_grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .heading-style-h3 {
    font-size: 1.5rem;
  }

  .heading-style-h1 {
    font-size: 2.5rem;
  }

  .heading-style-h2 {
    font-size: 2rem;
  }

  .spacer-medium {
    padding-top: 1.25rem;
  }

  .navbar, .nav_drawer-bar {
    height: auto;
    min-height: 4rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .nav_logo-link {
    padding-left: 0;
  }

  .nav_menu.is-page-height-tablet {
    padding-bottom: 6rem;
  }

  .section {
    padding: 2.5rem 1.5rem;
  }

  .hero_component {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .contact_component {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .overview_component {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: 1fr;
  }

  .gallery_grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .master_content-wrapper {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: 1fr;
  }

  .feature_content {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .faq_question {
    padding: 1rem 1.25rem;
  }

  .faq5_icon-wrapper {
    width: 1.75rem;
  }

  .faq_answer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .cta_card {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-direction: column;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer {
    padding: 2.5rem 1.25rem;
  }

  .footer_grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }
}

@media screen and (max-width: 479px) {

  .button {
    width: 100%;
  }

  .section {
    padding-left: 1.25rem;
  }

  .hero_component, .contact_component, .overview_component, .master_content-wrapper, .feature_content {
    grid-template-columns: 1fr;
  }
}

#w-node-_111e9fb1-5a5e-115e-908b-30d07cf66e7d-7cf66e5d {
  justify-self: start;
}

@media screen and (max-width: 991px) {
  #w-node-_1789869a-0f36-d99c-8a44-d52c45e660c2-45e660bd {
    order: 9999;
  }
}

/* ---- SEO/CRO additions -------------------------------------------------- */

/* Required by the width/height attributes added to every <img>.
   webflow.css sets `img { max-width: 100% }` but never `height: auto`, so a
   height attribute is taken literally and the image stretches: the logo went
   200x27 -> 200x280 and the contact render 568x757 -> 568x1468 before this rule
   existed. Bare `img` is lower specificity than every class rule in the sheet,
   so the two components that deliberately set `height: 100%` keep it. */
img {
  height: auto;
}

/* The contact form measured 1.4x-3.7x below the first screen on every interior
   page at 390px. This keeps the conversion path one tap away. 48px tall, above
   the 44px minimum tap target. Desktop is untouched: the form is in view there. */
.mobile-cta {
  display: none;
}

@media screen and (max-width: 767px) {
  .mobile-cta {
    z-index: 900;
    background-color: var(--base-color-brand--gold);
    color: var(--base-color-brand--purple);
    text-align: center;
    letter-spacing: .04em;
    border-radius: .4rem;
    justify-content: center;
    align-items: center;
    height: 48px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
  }

  /* So the bar never covers the last line of the footer. */
  footer {
    padding-bottom: 76px;
  }
}

/* The answer block under each H1: a direct response to the page's own question,
   which is what an answer engine lifts. */
.aeo-answer-q {
  font-size: 1.5rem;
}

/* ---- KNS Samooha --------------------------------------------------------------- ---- */
/* A card per plot size where the template had a drawing gallery. Plots have no
   floor plan, so each card carries the numbers instead: the metric dimension,
   the area and the quoted price. Six cards rather than two or three, so the
   minimum column is narrower than the villa builds used. */
/* The template puts a picture beside the enquiry form and beside the location
   copy. Where a project has no file good enough for a slot, the picture is
   removed and the column it sat in collapses, rather than the row rendering as
   one column of content beside an empty one. Which rules appear here depends on
   which slots this project actually emptied - collapsing a column that still
   has a picture in it stretches that picture across the full width, which is
   how a 675px render once came to be painted at 1200px. */
.contact_component {
  grid-template-columns: 1fr;
}

/* A published unit drawing and the areas printed on it. contain, not cover: a
   plan cropped to fill a box is a plan with rooms missing. */
.plan-sheet {
  margin: 0 0 2rem;
}

.plan-sheet img {
  width: auto;
  max-width: 100%;
  height: auto;
  /* .plan-image squares its box for the card grid; a sheet shown on its own
     keeps its own proportions, or a landscape drawing sits between two blank
     bands a third of its height each. */
  aspect-ratio: auto;
  display: block;
  outline: 1px solid var(--riv-hairline);
  outline-offset: 0;
  border-radius: .4rem;
  background: #fff;
}

.plan-sheet figcaption {
  color: var(--riv-ink-muted);
  padding-top: .6rem;
  max-width: 44rem;
}

/* The "what has not been published" table. It is the most important block on
   these pages, so it gets the accent rule the other tables do not. */

/* Floor plans are line drawings on white: contain them so no room is cropped,
   and give the box a fixed ratio so the grid stays even whether or not a unit
   type has a drawing. */
.plan-image {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  background: #fff;
}

/* The mirrored plan is published on its own, so it gets the page width rather
   than a card, capped by height so a tall drawing does not push everything
   else off the screen. */

/* Unlike the previous two builds, this project has a drawing for ONE of its
   three unit types. A short band next to a full 1:1 plan image makes the row
   ragged - the card with the drawing pushes its text a picture-height below the
   other two - so the empty box matches the plan image's ratio instead. */

/* The qualifier next to a row's name, here "3.5 BHK (built unit)". */

/* The template's master-plan slot is a 16:9 box with object-fit:cover, which
   suits a landscape rendering and destroys anything else - on a portrait crop it
   throws most of the image away and magnifies a corner. Contain it instead,
   centred and height-capped, so whatever ships in this slot is shown whole. */
/* The thumbnail strip.
   These projects publish their galleries at 436 to 512 pixels wide. The cap
   below is the whole point of the component: max-width 230px means none of them
   is ever asked for more pixels than it has, so nothing here is a blurred
   enlargement. justify-content keeps the row from stretching the cells to fill
   the container. */
.thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

.thumb-cell {
  flex: 0 1 230px;
  max-width: 230px;
  margin: 0;
}

/* A fixed picture box so the captions share a baseline. contain, not cover:
   the widest of these is a 585x228 letterbox and cropping it to a 230x165 box
   would throw away most of the layout it shows. The bands left over take the
   surface colour. */
.thumb-cell img {
  width: 100%;
  height: 165px;
  object-fit: contain;
  object-position: center;
  border-radius: .3rem;
  display: block;
  background: var(--riv-surface);
}

.thumb-cell figcaption {
  color: var(--riv-ink-muted);
  padding-top: .5rem;
}

.master_image {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  display: block;
}

/* Section headings added by the build, matched to the answer-block heading so
   they do not outweigh the page H1. */
.heading.is-xsmall {
  font-size: 1.25rem;
}

.container > .heading.is-small {
  font-size: 1.5rem;
}

/* ---- Stand-in captions and the unlinked map wrapper -------------------------- */

.standin-note {
  margin: .5rem 0 0;
  opacity: .72;
  color: inherit;
}

/* Holds the picture and its caption in the single grid cell the picture had. */
.standin-wrap {
  display: block;
}

/* What is left where the template's Google Maps anchor was. It keeps the
   anchor's place in the grid but is not clickable, because no source
   establishes this project's location precisely enough to link to a pin. */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nav_logo-link,
.footer_logo-link {
  width: auto;
}

.brandmark {
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  display: inline-flex;
}

/* A filled navy chip with a white letter: 12.63:1, and it puts the brand
   colour on every page at the largest size it appears. */
.brandmark_badge {
  color: #fff;
  background-color: var(--base-color-brand--gold);
  border: 2px solid var(--base-color-brand--gold);
  border-radius: .4rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding-bottom: .06em;
  font-family: Playfair Display, Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
}

.brandmark_name {
  color: var(--text-color--text-alternate);
  white-space: nowrap;
  font-family: Playfair Display, Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.1;
}

@media screen and (max-width: 479px) {
  .brandmark_badge {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.3rem;
  }

  .brandmark_name {
    font-size: 1rem;
  }
}

/* ---- light theme -------------------------------------------------------- */

/* The palette is the project's own. Its landing page declares one in a :root
   block, so this build reuses it rather than inventing a colour for a project
   that already has one. The export was built dark: purple page, white type,
   gold accent. Rather than edit Webflow's generated rules - which would have to
   be redone every time the template is re-exported - the palette is repointed
   at its source and only the rules that hard-code a dark-background assumption
   are overridden below.

   So the hex values in the :root at the top of this file (#2d2f55, #d1b35b)
   are dead - they are what the export shipped, and the :root below supersedes
   them. Edit the palette here, not there.

   Contrast, measured rather than assumed:
     #000000 on #ffffff  21.0:1   body copy, headings, eyebrows and labels
     #000000 on #e8edf5  17.9:1   the same on the deeper stripe
     #2553a1 on #ffffff   7.4:1   links and text buttons (AA at any size)
     #2553a1 on #e8edf5   6.3:1   the same on the deeper stripe
     #ffffff on #2553a1   7.4:1   button text
     #ffffff on #1a3c78  10.7:1   button text on hover
     #555555 on #ffffff   7.5:1   captions and the footer disclaimer
     #555555 on #e8edf5   6.3:1   the same on the deeper stripe
   White type on the accent and the accent on white measure the same 7.4:1, so
   one token does links and button fills alike. */

:root {
  /* Brand blue #2553a1 carries every button, link, rule and fill. Text is
     black, not tinted with the brand: headings, body copy, the uppercase
     eyebrows and form labels all read the ink. The neutrals carry a faint cool
     cast so they sit with the blue rather than against it. */
  --riv-accent: #2553a1;
  --riv-accent-text: #2553a1;
  --riv-accent-dark: #1a3c78;   /* button hover */
  --riv-gold: #2553a1;          /* the rule under the hero heading */
  --riv-ink: #000000;
  --riv-ink-muted: #555555;
  --riv-surface: #f5f7fb;       /* FAQ panels */
  --riv-surface-strong: #e8edf5;/* table stripes */
  --riv-hairline: #dde3ee;      /* borders and rules */
}

:root {
  --base-color-brand--purple: var(--riv-ink);
  --base-color-brand--purple-light: var(--riv-surface-strong);
  --base-color-brand--gold: var(--riv-accent);
  --link-color--link-primary: var(--riv-accent-text);
  --link-color--link-alternate: var(--riv-ink);
  --border-color--border-secondary: var(--riv-hairline);
}

body {
  background-color: #fff;
  color: var(--riv-ink);
}

/* Buttons. The generated rule paints the label with text-primary, which is now
   the ink - unreadable on the accent - and hovers to a background that is now a
   pale tint. Both states are restated. */
.button {
  background-color: var(--riv-accent);
  color: #fff;
}

.button:hover {
  background-color: var(--riv-accent-dark);
  color: #fff;
}

/* Inputs sat on an accent-coloured border, which on a white page reads as an
   error state. Hairline at rest, accent on focus. */
.form_input {
  border-color: var(--riv-hairline);
  color: var(--riv-ink);
}

.form_input:focus {
  border-color: var(--riv-accent);
  outline: 2px solid #2553a133;
  outline-offset: 0;
}

.form_input::placeholder {
  color: var(--riv-ink-muted);
}

/* The export's success message is a system green; it reads the brand tint and
   the ink like every other panel. */
.form_message-success {
  background-color: var(--riv-surface-strong);
  color: var(--riv-ink);
}

/* The mobile menu drops out of a bar that is now white on white. */
.nav_menu {
  background-color: #fff;
  border-bottom-color: var(--riv-hairline);
}

.menu-icon1_line-top,
.menu-icon1_line-middle,
.menu-icon1_line-bottom {
  background-color: var(--riv-ink);
}

.brandmark_name {
  color: var(--riv-ink);
}

/* A project name of three or more words overruns the footer's logo column, and
   nowrap then pushes it under the disclaimer. The nav has room; the footer does
   not, so only the footer lets it wrap. */
.footer_logo-link .brandmark {
  align-items: flex-start;
}

.footer_logo-link .brandmark_name {
  white-space: normal;
  line-height: 1.25;
}

/* Panels that were dark blocks on a dark page become tinted blocks on a white
   one; their text now inherits the ink from body. */
.faq_accordion {
  background-color: var(--riv-surface);
}

.table_row.is-purple {
  background-color: var(--riv-surface-strong);
}

.table_header {
  color: var(--riv-ink);
  border-bottom: 1px solid var(--riv-hairline);
}

/* The footer faded to black to close a dark page. On white it needs a rule,
   not a gradient. */
.footer {
  background-image: none;
  border-top: 1px solid var(--riv-hairline);
}

.footer .text-size-tiny {
  color: var(--riv-ink-muted);
}

/* White cards on a white page need an edge to be cards at all. */

.text-style-tagline {
  color: var(--riv-ink);
}

.standin-note {
  color: var(--riv-ink-muted);
  opacity: 1;
}

.mobile-cta {
  background-color: var(--riv-accent);
  color: #fff;
  border-top: 1px solid var(--riv-accent-dark);
}

/* Form field labels are text, so they read the ink like the eyebrows above. */
.form_form_label {
  color: var(--riv-ink);
}

/* ---- cross-links to the operator's other project sites ---------------------- */
.net-cols {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem 2rem;
  display: grid;
}

.net-group h3 {
  margin: 0 0 .35rem;
}

.net-list {
  margin: 0;
}

.net-list li {
  margin-bottom: .35rem;
}

/* The locality is context, not part of the link, so it is visibly quieter. */
.net-loc {
  color: var(--riv-ink-muted);
  font-size: .85em;
}

.net-loc:before {
  content: " \2014 ";
}

/* The brand blue is 7.4:1 behind white text, so the template's own
   white-on-accent buttons are correct and only the hover needs stating. */
.button,
.button.btn-solid,
.btn-solid {
  background-color: var(--riv-accent);
  color: #fff;
}

.button:hover,
.button.btn-solid:hover,
.btn-solid:hover {
  background-color: var(--riv-accent-dark);
  color: #fff;
}

.brandmark_badge {
  background: var(--riv-accent);
  color: #fff;
  border-color: var(--riv-accent-dark);
}

/* The brand blue as a rule under the hero heading. */
.hero_content .heading-style-h1:after {
  content: "";
  background: var(--riv-gold);
  width: 4.5rem;
  height: 3px;
  margin-top: 1.1rem;
  display: block;
}

/* Room-dimension and specification columns. */

/* FAQ answers start closed. webflow.js collapses them (inline height 0)
   only after it loads, so the open answers painted first and then jumped
   shut: a layout shift on /faqs. w-mod-js is set by the inline script in
   <head> before first paint; w-mod-ix is set once webflow.js has applied its
   own closed state, and from then on its click interaction opens an answer by
   removing the inline height, so this rule must stop applying (a plain
   height: 0 would hold every answer shut). Without JavaScript the answers
   stay readable. */

/* ---- c. Bootstrap components in the site's design ----------------------- */

/* The menu toggler and the close button: the template's three-line icon,
   which turns into an X while the menu is open. */
.navbar .navbar-toggler,
.nav_menu-button.is-close {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.navbar .navbar-toggler:focus-visible,
.nav_menu-button.is-close:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}
.menu-icon1_line-top,
.menu-icon1_line-bottom {
  transition: transform .4s cubic-bezier(.86, 0, .07, 1);
}
.menu-icon1_line-middle {
  transition: width .2s cubic-bezier(.86, 0, .07, 1);
}
.menu-icon.is-open .menu-icon1_line-top {
  transform: translateY(8px) rotate(-45deg);
}
.menu-icon.is-open .menu-icon1_line-bottom {
  transform: translateY(-8px) rotate(45deg);
}
.menu-icon.is-open .menu-icon1_line-middle {
  width: 0;
}

/* Wide screens: the menu sits in the bar (the template's breakpoint, 992px;
   these are the rules of Bootstrap's navbar-expand). */
@media screen and (min-width: 992px) {
  .navbar .nav_menu.drawer {
    inset: auto;
    z-index: auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: visible;
    color: inherit;
    visibility: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .navbar .nav_menu > .drawer-header {
    display: none;
  }
  .navbar .nav_menu > .drawer-body {
    display: contents;
  }
}

/* Narrow screens: Bootstrap's drawer, over the whole screen, with a copy of
   the bar at its top so it opens just as the template's menu did. */
@media screen and (max-width: 991px) {
  .navbar .navbar-toggler {
    display: flex;
  }
  .nav_menu-button.is-close {
    display: flex;
  }
  .navbar .nav_menu.drawer {
    --bs-drawer-inset: 0;
    --bs-drawer-height: 100dvh;
    --bs-drawer-transition-duration: .4s;
    position: fixed;
    inset: 0 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .navbar .nav_menu::backdrop {
    background: transparent;
  }
  .nav_menu > .nav_drawer-bar {
    flex: none;
    display: flex;
  }
  /* The menu overlapped the bar's bottom rule by a pixel; so does this. */
  .nav_menu > .nav_drawer-body {
    position: relative;
    flex: 1 1 auto;
    display: block;
    margin-top: -1px;
    padding: 1rem 5% 2rem;
    overflow: auto;
    background-color: inherit;
  }
  .nav_menu .navbar-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .nav_menu .nav-link {
    display: block;
  }
}

/* Thank-you and error messages start hidden (form-handler.js shows them). */
.lead-form_done[hidden],
.lead-form_fail[hidden] {
  display: none;
}

/* FAQ: Bootstrap's accordion (details and summary); the plus icon turns 45
   degrees as an answer opens, as before. */
.faq_question.accordion-header::-webkit-details-marker {
  display: none;
}
.faq5_icon-wrapper {
  transition: transform .2s ease;
}
.faq_accordion[open] .faq5_icon-wrapper {
  transform: rotate(45deg);
}

}