/* ==========================================================================
   Grace Valley Stables
   Tokens: tailwind.config.js. Figma mapping: docs/TAILWIND-TOKENS.md.
   ========================================================================== */

/* Self-hosted brand faces. Paths are relative to css/tailwind-output.css. */

@font-face {
  font-family: 'Nyse';

  src: url('../fonts/Nyse-Demi.woff2') format('woff2');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'FKT Ashmore';

  src: url('../fonts/FKTAshmore-Medium.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';

  src: url('../fonts/InstrumentSans-Variable.woff2') format('woff2-variations'),
	     url('../fonts/InstrumentSans-Variable.woff2') format('woff2');

  font-weight: 400 700;

  font-stretch: 75% 100%;

  font-style: normal;

  font-display: swap;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

select:where([multiple]),select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

input:where([type='checkbox']),input:where([type='radio']) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

input:where([type='checkbox']) {
  border-radius: 0px;
}

input:where([type='radio']) {
  border-radius: 100%;
}

input:where([type='checkbox']):focus,input:where([type='radio']):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

input:where([type='checkbox']):checked,input:where([type='radio']):checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input:where([type='checkbox']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='radio']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='radio']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='file']) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

input:where([type='file']):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

html {
  --tw-bg-opacity: 1;
  background-color: rgb(236 230 217 / var(--tw-bg-opacity, 1));
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(236 230 217 / var(--tw-bg-opacity, 1));
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(30 53 30 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --focus-ring: #1E351E;
}

::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(30 53 30 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(236 230 217 / var(--tw-text-opacity, 1));
}

::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(30 53 30 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(236 230 217 / var(--tw-text-opacity, 1));
}

h1 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  h1 {
    font-size: 52px;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

h2 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1.11;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  h2 {
    font-size: 46px;
    line-height: 1.11;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 56px;
    line-height: 1.11;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

h3 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  h3 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  h3 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

h4 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  h4 {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  h4 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

h5 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  h5 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

h6 {
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
}

p {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 400;
}

@media (min-width: 768px) {
  p {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

ul, ol, li {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 400;
}

@media (min-width: 768px) {
  ul, ol, li {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

strong, b {
  font-weight: 600;
}

p a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

p a:hover {
  --tw-text-opacity: 1;
  color: rgb(89 47 47 / var(--tw-text-opacity, 1));
}

/* One visible focus treatment everywhere. Dark surfaces flip the ring
	   colour through --focus-ring (see .on-dark). */

:focus-visible {
  outline: 2px solid var(--focus-ring, #1E351E);
  outline-offset: 3px;
}

/* The skip link lands focus on <main tabindex="-1">, so the next Tab starts inside the
	   page in every browser. It is a landing point, not a control: no ring around the page. */

main[tabindex="-1"]:focus {
  outline: none;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

/* ---------- Type classes (face + size + weight + tracking) ---------- */

.text-h1 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .text-h1 {
    font-size: 52px;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .text-h1 {
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.text-h2 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1.11;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .text-h2 {
    font-size: 46px;
    line-height: 1.11;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .text-h2 {
    font-size: 56px;
    line-height: 1.11;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.text-h3 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .text-h3 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .text-h3 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.text-h4 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .text-h4 {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .text-h4 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.text-h5 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .text-h5 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.text-h6 {
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
}

.text-p {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .text-p {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

.text-p-xs {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0px;
  font-weight: 400;
}

/* ---------- Containers ---------- */

.full {
  width: 100%;
}

.content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 72rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Header and footer width: 1300px inner at 1400 (50px gutters). */

.content-wide {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1400px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .content-wide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .content-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .content-wide {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* ---------- Dark surfaces ---------- */

.on-dark {
  --focus-ring: #ECE6D9;
}

/* ---------- Notched corners ----------
	   Concave quarter-circle notches at all four corners, any width.
	   The fill lives on ::before so the mask never clips focus outlines or
	   children. Set the fill with a .notched-* colour class. */

.notched,
	.btn {
  position: relative;
  isolation: isolate;
  --notch: 6px;
  --notch-bg: #1E351E;
}

.notched::before,
	.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--notch-bg);
  transition: background-color 200ms ease;
  /* Four full-size layers, each opaque except one corner circle,
		   intersected. No tile overlap, so no seams at any size. */
  --notch-mask:
			radial-gradient(circle var(--notch) at 0 0, #0000 calc(100% - 0.5px), #000 100%),
			radial-gradient(circle var(--notch) at 100% 0, #0000 calc(100% - 0.5px), #000 100%),
			radial-gradient(circle var(--notch) at 0 100%, #0000 calc(100% - 0.5px), #000 100%),
			radial-gradient(circle var(--notch) at 100% 100%, #0000 calc(100% - 0.5px), #000 100%);
  -webkit-mask: var(--notch-mask);
  -webkit-mask-composite: source-in;
  -webkit-mask: var(--notch-mask);
          mask: var(--notch-mask);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}

.notched-lg        {
  --notch: 12px;
}

.notched-forest    {
  --notch-bg: #1E351E;
}

.notched-sand      {
  --notch-bg: #D8D2C7;
}

.notched-ivory     {
  --notch-bg: #ECE6D9;
}

.notched-rosewood  {
  --notch-bg: #592F2F;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration-line: none;
  min-height: 54px;
  padding: 0 34px;
  color: var(--btn-fg);
  --btn-fg: #ECE6D9;
  --notch-bg: #592F2F;
  transition: color 200ms ease;
}

.btn:hover {
  --notch-bg: #1E351E;
}

/* For Forest / photo backgrounds. */

.btn--on-dark {
  --btn-fg: #1E351E;
  --notch-bg: #ECE6D9;
  --focus-ring: #ECE6D9;
}

.btn--on-dark:hover {
  --notch-bg: #D8D2C7;
}

/* Hero treatment from the comp: 25px background blur behind the fill. */

.btn--blur::before {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

/* ---------- Ornamental rules (Sage, diamond caps) ----------
	   Every rule (these, the ruled labels, .rule-h and the newsletter's
	   Submit rule) draws out from its middle, then its diamonds grow in
	   (js/motion.js section 6). The script sets two numbers
	   from 0 to 1 on the rule: --rule-draw, the line's length, and
	   --rule-cap, the diamonds' size. Both default to 1, so with no script,
	   reduced motion or an error every rule is whole, exactly as drawn. */

.rule-v,
	.rule-frame {
  /* 1 while the line draws (--rule-draw under 1), 0 at rest. At rest
		   these paint exactly as before, a solid fill and a border; while
		   drawing, that gives way to a line of the drawn length. Never a
		   gradient at rest: Chrome dithers gradients a level off the sage. */
  --rule-drawing: clamp(0, (1 - var(--rule-draw, 1)) * 10000, 1);
  --rule-resting: calc(1 - var(--rule-drawing));
}

.rule-v {
  position: relative;
  display: block;
  width: 1px;
  flex-shrink: 0;
  background: linear-gradient(#778169, #778169) center / 100% calc(var(--rule-draw, 1) * var(--rule-drawing) * 100%) no-repeat rgb(119 129 105 / var(--rule-resting));
}

.rule-v::before,
	.rule-v::after,
	.rule-frame::before,
	.rule-frame::after,
	.rule-frame > span::before,
	.rule-frame > span::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #778169;
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--rule-cap, 1));
}

.rule-v::before {
  left: 50%;
  top: 0;
}

.rule-v::after  {
  left: 50%;
  top: 100%;
}

/* The header dividers draw in the header links' Ivory, then ease back
	   to Sage (Eric 10/15: "the same color white as the underlines for the
	   header and then faded back"). While js/motion.js has .is-inked on,
	   --rule-ink runs from 1 (Ivory) to 0 (Sage) and the rule paints in
	   that mix, its line as the drawn line. Off, everything above stands. */

.rule-v.is-inked {
  --rule-ink-color: color-mix(in srgb, #ECE6D9 calc(var(--rule-ink, 0) * 100%), #778169);
  background: linear-gradient(var(--rule-ink-color), var(--rule-ink-color)) center / 100% calc(var(--rule-draw, 1) * 100%) no-repeat;
}

.rule-v.is-inked::before,
	.rule-v.is-inked::after {
  background-color: var(--rule-ink-color);
}

/* Inset hairline frame with a diamond at each corner. Markup:
	   <span class="rule-frame" aria-hidden="true"><span></span></span>
	   While it draws, the border goes clear and four 1px lines under it (one
	   per side, each out from its middle) stand in for it. */

.rule-frame {
  position: absolute;
  inset: 17px 19px;
  border: 1px solid rgb(119 129 105 / var(--rule-resting));
  background:
			linear-gradient(#778169, #778169) top / calc(var(--rule-draw, 1) * var(--rule-drawing) * 100%) 1px no-repeat border-box,
			linear-gradient(#778169, #778169) bottom / calc(var(--rule-draw, 1) * var(--rule-drawing) * 100%) 1px no-repeat border-box,
			linear-gradient(#778169, #778169) left / 1px calc(var(--rule-draw, 1) * var(--rule-drawing) * 100%) no-repeat border-box,
			linear-gradient(#778169, #778169) right / 1px calc(var(--rule-draw, 1) * var(--rule-drawing) * 100%) no-repeat border-box;
  pointer-events: none;
}

.rule-frame > span {
  position: absolute;
  inset: -1px;
}

.rule-frame::before       {
  left: -0.5px;
  top: -0.5px;
}

.rule-frame::after        {
  left: calc(100% + 0.5px);
  top: -0.5px;
}

.rule-frame > span::before {
  left: 0;
  top: 100%;
}

.rule-frame > span::after  {
  left: 100%;
  top: 100%;
}

/* ---------- Ruled label ----------
	   Label with a 1px rule above and below (308px max, diamond caps).
	   Figma: "A little bit about us" and the active Ride/Train/Belong point.
	   .rule-label--toggle hides the rules until [aria-pressed="true"] or
	   .is-active, keeping their space so nothing shifts. */

.rule-label {
  position: relative;
  display: block;
  padding: 12px 0;
  --rule-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' fill='%237E807B'/%3E%3C/svg%3E");
}

.rule-label::before,
	.rule-label::after {
  content: '';
  position: absolute;
  left: 50%;
  width: min(308px, 100%);
  height: 7px;
  transform: translateX(-50%);
  /* Each diamond keeps its centre 3.5px in from its end at any size. */
  background:
			var(--rule-diamond) left calc(3.5px - var(--rule-cap, 1) * 3.5px) center / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			var(--rule-diamond) right calc(3.5px - var(--rule-cap, 1) * 3.5px) center / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			linear-gradient(#7E807B, #7E807B) center / calc((100% - 6px) * var(--rule-draw, 1)) 1px no-repeat;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.rule-label::before {
  top: -3px;
}

/* Horizontal rule with diamond caps, full width of its box. Markup:
	   <div class="rule-h" aria-hidden="true"></div> */

.rule-h {
  display: block;
  width: 100%;
  height: 7px;
  background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' fill='%237E807B'/%3E%3C/svg%3E") left calc(3.5px - var(--rule-cap, 1) * 3.5px) center / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' fill='%237E807B'/%3E%3C/svg%3E") right calc(3.5px - var(--rule-cap, 1) * 3.5px) center / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			linear-gradient(#7E807B, #7E807B) center / calc((100% - 6px) * var(--rule-draw, 1)) 1px no-repeat;
}

.rule-label::after  {
  bottom: -3px;
}

.rule-label--toggle::before,
	.rule-label--toggle::after {
  opacity: 0;
}

.rule-label--toggle[aria-pressed="true"]::before,
	.rule-label--toggle[aria-pressed="true"]::after,
	.rule-label--toggle.is-active::before,
	.rule-label--toggle.is-active::after {
  opacity: 1;
}

/* Until js/motion.js takes the rules over, the <head> script's
	   .gvs-rules-wait (inc/motion.php) holds every rule at zero, so a rule on
	   screen at first paint never shows whole and then draws. The head script
	   lets go after 4s if motion.js never runs. */

.gvs-rules-wait .rule-v,
	.gvs-rules-wait .rule-frame,
	.gvs-rules-wait .rule-label,
	.gvs-rules-wait .rule-h,
	.gvs-rules-wait .newsletter-form .gform_footer {
  --rule-draw: 0;
  --rule-cap: 0;
}

/* Reduced motion: every rule whole, whatever the script last set. */

@media (prefers-reduced-motion: reduce) {
  .rule-v,
		.rule-frame,
		.rule-label,
		.rule-h,
		.newsletter-form .gform_footer {
    --rule-draw: 1 !important;
    --rule-cap: 1 !important;
    --rule-ink: 0 !important;
  }
}

/* ---------- Link draw (hover), C3 ----------
	   The rules' draw as a link hover (Eric's pick 10/15, "Underline with
	   diamonds"). On hover, or keyboard focus, a 1px line draws out from the
	   middle of the text to its full width, 6px under the baseline (the old
	   underline offset; 0.28em on display type), then a diamond grows in
	   solid at each end with a small pop. Leaving, the diamonds shrink, then
	   the line pulls back. In the link's own colour, CSS only: --link-draw
	   (the line) and --link-cap (the diamonds), 0 to 1 on the pseudo-
	   elements, are registered so they tween.
	   The line finds the baseline from the box: the text is centred in it
	   (one line: even padding or flex-centred), and all three of the site's
	   faces sit their baseline 0.36em under the middle of the line. A link
	   that can wrap sets --link-draw-pb to its bottom padding, and the line
	   goes under its last line. .link-draw-host draws a .link-draw inside it
	   (a full-width link, the line under its text only). */

@property --link-draw {
  syntax: '<number>';

  inherits: false;

  initial-value: 0;
}

@property --link-cap {
  syntax: '<number>';

  inherits: false;

  initial-value: 0;
}

.link-draw {
  position: relative;
}

/* The line (::before, a plain fill, so it lands on whole pixels) and the
	   diamonds (::after, a mask over the link's colour). --link-base is the
	   line's top, measured up from the bottom of the link's box. */

.link-draw::before,
	.link-draw::after {
  --link-base: calc(var(--link-draw-pb, (100% - 1lh) / 2) + 0.5lh - 0.36em - var(--link-draw-offset, max(6px, 0.28em)));
  content: '';
  position: absolute;
  background-color: currentColor;
  pointer-events: none;
}

.link-draw::before {
  /* A width, not a right edge: two rounded halves left a hairline that
		   showed as a dot under some links at rest. */
  left: calc(50% - var(--link-draw, 0) * 50%);
  width: calc(var(--link-draw, 0) * 100%);
  bottom: calc(var(--link-base) - 1px);
  height: 1px;
  /* Arriving: out from the middle (the rules' power3.out, quicker).
		   Leaving: back to the middle once the diamonds have gone. */
  --link-in: --link-draw 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: --link-draw 0.2s ease-in-out 0.08s;
}

/* Two 7px diamonds centred on the line's ends, in a box 4.5px wider
	   each side so the pop is never clipped. */

.link-draw::after {
  --link-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z'/%3E%3C/svg%3E");
  --link-mask:
			var(--link-diamond) left calc(4.5px - var(--link-cap, 0) * 3.5px) center / calc(var(--link-cap, 0) * 7px) calc(var(--link-cap, 0) * 7px) no-repeat,
			var(--link-diamond) right calc(4.5px - var(--link-cap, 0) * 3.5px) center / calc(var(--link-cap, 0) * 7px) calc(var(--link-cap, 0) * 7px) no-repeat;
  left: -4.5px;
  right: -4.5px;
  bottom: calc(var(--link-base) - 5px);
  height: 9px;
  -webkit-mask: var(--link-mask);
  mask: var(--link-mask);
  /* Arriving: a pop (the rules' back.out(2)) as the line reaches them.
		   Leaving: they shrink first. */
  --link-in: --link-cap 0.24s cubic-bezier(0.34, 1.64, 0.64, 1) 0.17s;
  transition: --link-cap 0.1s ease-in;
}

.link-draw:focus-visible::before,
	.link-draw:focus-visible::after,
	.link-draw-host:focus-visible .link-draw::before,
	.link-draw-host:focus-visible .link-draw::after {
  --link-draw: 1;
  --link-cap: 1;
  transition: var(--link-in);
}

/* Hover only where it is real, so a tap never leaves a line behind. */

@media (hover: hover) {
  .link-draw:hover::before,
		.link-draw:hover::after,
		.link-draw-host:hover .link-draw::before,
		.link-draw-host:hover .link-draw::after {
    --link-draw: 1;
    --link-cap: 1;
    transition: var(--link-in);
  }
}

/* The header's you-are-here underline: the line stays, and hover only
	   pops the diamonds (no wait for a line). */

.link-draw--current[aria-current="page"]::before {
  --link-draw: 1;
}

.link-draw--current[aria-current="page"]::after {
  --link-in: --link-cap 0.24s cubic-bezier(0.34, 1.64, 0.64, 1);
}

/* Reduced motion: the line and diamonds come and go at once. */

@media (prefers-reduced-motion: reduce) {
  .link-draw::before,
		.link-draw::after {
    transition: none !important;
  }
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .gvs-text-wait #main-content :is(
		.title-band > .content,
		.module-hero-video > .content,
		[data-rtb] .rtb__side,
		.module-story-intro > .content,
		.module-card-grid > div > div:not(.grid),
		.module-card-grid .card,
		.module-feature-list .grid > div > div,
		.photo-collage > .content:not(.photo-collage__photos),
		.module-form-embed .content .space-y-2,
		.module-form-embed .gform_heading,
		.module-image-text .grid > :not(figure),
		.image-text__overlay .content-wide > div,
		.module-split-text > .grid,
		.split-feature__panel,
		.module-tour-cta > .content,
		.module-text-block > .content > div
	) > :not(img, picture, svg, video, iframe, [aria-hidden="true"],.skip-link, .screen-reader-text, [data-expand], .card__media) {
    opacity: 0;
  }

  .gvs-text-late #main-content :is(
		.title-band > .content,
		.module-hero-video > .content,
		[data-rtb] .rtb__side,
		.module-story-intro > .content,
		.module-card-grid > div > div:not(.grid),
		.module-card-grid .card,
		.module-feature-list .grid > div > div,
		.photo-collage > .content:not(.photo-collage__photos),
		.module-form-embed .content .space-y-2,
		.module-form-embed .gform_heading,
		.module-image-text .grid > :not(figure),
		.image-text__overlay .content-wide > div,
		.module-split-text > .grid,
		.split-feature__panel,
		.module-tour-cta > .content,
		.module-text-block > .content > div
	) > :not(img, picture, svg, video, iframe, [aria-hidden="true"],.skip-link, .screen-reader-text, [data-expand], .card__media) {
    transition: opacity 0.6s ease;
  }
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  --tw-bg-opacity: 1;
  background-color: rgb(30 53 30 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(236 230 217 / var(--tw-text-opacity, 1));
  --focus-ring: #ECE6D9;
}

/* Placeholder styles */

.module-placeholder {
  border-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(126 128 123 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(216 210 199 / var(--tw-bg-opacity, 1));
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.left-0 {
  left: 0px;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.order-2 {
  order: 2;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.row-start-1 {
  grid-row-start: 1;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mt-px {
  margin-top: -1px;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[21px\] {
  margin-top: 21px;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[23px\] {
  margin-top: 23px;
}

.mt-\[25px\] {
  margin-top: 25px;
}

.mt-\[27px\] {
  margin-top: 27px;
}

.mt-\[30px\] {
  margin-top: 30px;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[420\/446\] {
  aspect-ratio: 420/446;
}

.aspect-\[640\/448\] {
  aspect-ratio: 640/448;
}

.aspect-\[690\/831\] {
  aspect-ratio: 690/831;
}

.aspect-\[726\/439\] {
  aspect-ratio: 726/439;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.h-0 {
  height: 0px;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[164px\] {
  height: 164px;
}

.h-\[44vw\] {
  height: 44vw;
}

.h-\[54px\] {
  height: 54px;
}

.h-\[57vw\] {
  height: 57vw;
}

.h-\[63px\] {
  height: 63px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-\[600px\] {
  max-height: 600px;
}

.max-h-\[800px\] {
  max-height: 800px;
}

.min-h-6 {
  min-height: 1.5rem;
}

.min-h-\[100svh\] {
  min-height: 100svh;
}

.min-h-\[220px\] {
  min-height: 220px;
}

.min-h-\[260px\] {
  min-height: 260px;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.min-h-\[460px\] {
  min-height: 460px;
}

.min-h-\[520px\] {
  min-height: 520px;
}

.min-h-\[70svh\] {
  min-height: 70svh;
}

.min-h-\[88svh\] {
  min-height: 88svh;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-4 {
  width: 1rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-\[140px\] {
  width: 140px;
}

.w-\[58px\] {
  width: 58px;
}

.w-\[87px\] {
  width: 87px;
}

.w-\[94px\] {
  width: 94px;
}

.w-full {
  width: 100%;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.min-w-\[820px\] {
  min-width: 820px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-\[1400px\] {
  max-width: 1400px;
}

.max-w-\[290px\] {
  max-width: 290px;
}

.max-w-\[295px\] {
  max-width: 295px;
}

.max-w-\[308px\] {
  max-width: 308px;
}

.max-w-\[315px\] {
  max-width: 315px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[474px\] {
  max-width: 474px;
}

.max-w-\[519px\] {
  max-width: 519px;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[591px\] {
  max-width: 591px;
}

.max-w-\[597px\] {
  max-width: 597px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[758px\] {
  max-width: 758px;
}

.max-w-\[764px\] {
  max-width: 764px;
}

.max-w-\[860px\] {
  max-width: 860px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-header {
  max-width: 1201px;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-wide {
  max-width: 1400px;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[21px\] {
  gap: 21px;
}

.gap-\[22px\] {
  gap: 22px;
}

.gap-\[25px\] {
  gap: 25px;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-12 {
  row-gap: 3rem;
}

.gap-y-16 {
  row-gap: 4rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-y-9 {
  row-gap: 2.25rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-\[1em\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1em * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1em * var(--tw-space-y-reverse));
}

.space-y-\[27px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(27px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(27px * var(--tw-space-y-reverse));
}

.self-start {
  align-self: flex-start;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-brand-forest {
  --tw-border-opacity: 1;
  border-color: rgb(30 53 30 / var(--tw-border-opacity, 1));
}

.border-brand-sage {
  --tw-border-opacity: 1;
  border-color: rgb(119 129 105 / var(--tw-border-opacity, 1));
}

.border-brand-sand {
  --tw-border-opacity: 1;
  border-color: rgb(216 210 199 / var(--tw-border-opacity, 1));
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(126 128 123 / var(--tw-border-opacity, 1));
}

.bg-brand-forest {
  --tw-bg-opacity: 1;
  background-color: rgb(30 53 30 / var(--tw-bg-opacity, 1));
}

.bg-brand-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(107 95 74 / var(--tw-bg-opacity, 1));
}

.bg-brand-ivory {
  --tw-bg-opacity: 1;
  background-color: rgb(236 230 217 / var(--tw-bg-opacity, 1));
}

.bg-brand-rosewood {
  --tw-bg-opacity: 1;
  background-color: rgb(89 47 47 / var(--tw-bg-opacity, 1));
}

.bg-brand-sage {
  --tw-bg-opacity: 1;
  background-color: rgb(119 129 105 / var(--tw-bg-opacity, 1));
}

.bg-brand-sage-light {
  --tw-bg-opacity: 1;
  background-color: rgb(165 174 154 / var(--tw-bg-opacity, 1));
}

.bg-brand-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(216 210 199 / var(--tw-bg-opacity, 1));
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
}

.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(126 128 123 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[10\%_0\%\] {
  -o-object-position: 10% 0%;
     object-position: 10% 0%;
}

.object-\[50\%_45\%\] {
  -o-object-position: 50% 45%;
     object-position: 50% 45%;
}

.object-bottom {
  -o-object-position: bottom;
     object-position: bottom;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[60px\] {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-\[260px\] {
  padding-bottom: 260px;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-\[calc\(var\(--header-top\2c 16px\)\+64px\+32px\)\] {
  padding-top: calc(var(--header-top,16px) + 64px + 32px);
}

.pt-\[calc\(var\(--header-top\2c 16px\)\+64px\+48px\)\] {
  padding-top: calc(var(--header-top,16px) + 64px + 48px);
}

.pt-\[var\(--header-top\)\] {
  padding-top: var(--header-top);
}

.pt-px {
  padding-top: 1px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-body {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.font-display {
  font-family: Nyse, Georgia, "Times New Roman", serif;
}

.font-label {
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-size-h3 {
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

.text-size-h6 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 500;
}

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

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.not-italic {
  font-style: normal;
}

.leading-snug {
  line-height: 1.375;
}

.tracking-\[1px\] {
  letter-spacing: 1px;
}

.text-brand-forest {
  --tw-text-opacity: 1;
  color: rgb(30 53 30 / var(--tw-text-opacity, 1));
}

.text-brand-gold {
  --tw-text-opacity: 1;
  color: rgb(107 95 74 / var(--tw-text-opacity, 1));
}

.text-brand-ivory {
  --tw-text-opacity: 1;
  color: rgb(236 230 217 / var(--tw-text-opacity, 1));
}

.text-brand-sand {
  --tw-text-opacity: 1;
  color: rgb(216 210 199 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(30 30 30 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.opacity-90 {
  opacity: 0.9;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-\[450ms\] {
  transition-duration: 450ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[--gvs-it-pt\:80px\] {
  --gvs-it-pt: 80px;
}

.\[--gvs-it-pull\:22\.57vw\] {
  --gvs-it-pull: 22.57vw;
}

.\[--link-draw-offset\:0\.36em\] {
  --link-draw-offset: 0.36em;
}

.\[--link-draw-pb\:0px\] {
  --link-draw-pb: 0px;
}

.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Base: semantic tags carry the type scale. Never add text-size classes to
   h1-h6 or p in templates; use a .text-h* class only to decouple level from
   size (see docs/TAILWIND-TOKENS.md).
   ========================================================================== */

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  --header-top: 16px;
}

@media (min-width: 1024px) {
  .site-header {
    --header-top: 25px;
  }
}

/* Pages without a full-bleed hero reserve the header's space. A hero
   module adds body.has-hero to let the bar float over it. */

.header-spacer {
  height: calc(var(--header-top, 16px) + 64px + 16px);
}

@media (min-width: 1024px) {
  .header-spacer {
    height: calc(25px + 78px + 32px);
  }
}

body.has-hero .header-spacer {
  display: none;
}

/* Mobile menu open: lock the page behind the overlay and pin the bar so
   the close control stays reachable after scrolling. */

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header {
  position: fixed;
}

/* Footer over a photo (tour module, later pass). The focus ring follows the
   text: a Forest ring over the dark grass measured 1.04 to 1.21:1. */

.site-footer--on-photo .site-legal {
  color: #ECE6D9;
  --focus-ring: #ECE6D9;
}

/* Admin bar accommodation */

body.admin-bar .site-header,
body.admin-bar .mobile-menu {
  top: 32px;
}

/* The home video fills the screen below the toolbar, so a signed-in reviewer
   sees its copy where a visitor does (Brooke 10/19, C16: "falling off the
   bottom of the screen" was the toolbar's 32px). */

body.admin-bar .module-hero-video {
  min-height: calc(100svh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
	body.admin-bar .mobile-menu {
    top: 46px;
  }

  body.admin-bar .module-hero-video {
    min-height: calc(100svh - 46px);
  }
}

/* ==========================================================================
   Newsletter (Gravity Forms, gravity-theme markup)
   ========================================================================== */

.newsletter-form .gform_wrapper,
.newsletter-form .gform_wrapper form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.newsletter-form .gform_wrapper form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 768px) {
  .newsletter-form .gform_wrapper form {
    flex-direction: row;
    align-items: center;
  }
}

.newsletter-form .gform_body {
  flex: 1 1 auto;
  min-width: 0;
}

body .newsletter-form .gform_fields {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .newsletter-form .gfield {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Visually hidden, still announced (never display:none). */

body .newsletter-form .gfield_label,
body .newsletter-form .gform_required_legend,
body .newsletter-form .gfield_required {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body .newsletter-form .ginput_container {
  margin: 0 !important;
  position: relative;
}

/* The comp draws a caret line at the start of the prompt. Hidden once the
   visitor focuses or types, when the real caret takes over. */

body .newsletter-form .ginput_container_email::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 35px;
  transform: translateY(-50%);
  background-color: #1E351E;
  pointer-events: none;
}

body .newsletter-form .ginput_container_email:has(input:not(:-moz-placeholder-shown))::before {
  display: none;
}

body .newsletter-form .gfield:focus-within .ginput_container_email::before,
body .newsletter-form .ginput_container_email:has(input:not(:placeholder-shown))::before {
  display: none;
}

body .newsletter-form input[type="email"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 0 8px 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Nyse, Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: #1E351E !important;
}

@media (min-width: 1024px) {
  body .newsletter-form input[type="email"] {
    font-size: 28px !important;
  }
}

body .newsletter-form input[type="email"]::-moz-placeholder {
  color: #1E351E;
  opacity: 1;
}

body .newsletter-form input[type="email"]::placeholder {
  color: #1E351E;
  opacity: 1;
}

body .newsletter-form input[type="email"]:focus {
  outline: none;
}

body .newsletter-form .ginput_container:focus-within {
  outline: 2px solid #1E351E;
  outline-offset: 6px;
}

/* No resting edge on the newsletter field at any width: Eric, 10/15, "remove
   the outline from the email signup... put it back to what it was
   originally" (he knows it misses WCAG 1.4.11 and passed on it). The tour
   form keeps its "Field edge". md+: after a failed submit the error line sat
   flush on the field and its message 6px under it, so the focus ring (8px
   out) ran through them; they clear it now. The summary keeps 5px past its
   own 4px focus ring. */

@media (min-width: 768px) {
  body .newsletter-form .gform_wrapper .gform_validation_errors {
    margin-bottom: 16px !important;
  }

  body .newsletter-form .gfield_error .validation_message {
    margin-top: 14px !important;
  }
}

body .newsletter-form .gform_footer {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

/* Sage rule with diamond caps before Submit (md+), same ornament as .rule-v:
   a 54px line between two 7px diamonds, centred on the bar. Three layers, so
   the line can draw from its middle and the diamonds grow in about their
   centres (--rule-draw, --rule-cap: see "Ornamental rules"). */

@media (min-width: 768px) {
  body .newsletter-form .gform_footer {
    --rule-sage-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' fill='%23778169'/%3E%3C/svg%3E");
    /* A solid Sage fill, not a gradient (Chrome dithers those). */
    --rule-sage-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1' fill='%23778169'/%3E%3C/svg%3E");
    margin: 0 0 0 24px !important;
    padding: 0 28px 0 24px !important;
    background:
			var(--rule-sage-diamond) calc(3.5px - var(--rule-cap, 1) * 3.5px) calc(50% - 27px) / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			var(--rule-sage-diamond) calc(3.5px - var(--rule-cap, 1) * 3.5px) calc(50% + 27px) / calc(var(--rule-cap, 1) * 7px) calc(var(--rule-cap, 1) * 7px) no-repeat,
			var(--rule-sage-fill) 3px center / 1px calc(var(--rule-draw, 1) * 54px) no-repeat;
    min-height: 61px;
  }
}

body .newsletter-form .gform_footer input[type="submit"],
body .newsletter-form .gform_footer button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
  margin: 0 !important;
  min-width: 78px;
  align-self: center !important;
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: #1E351E !important;
  cursor: pointer;
  transition: color 200ms ease;
}

body .newsletter-form .gform_footer input[type="submit"]:hover,
body .newsletter-form .gform_footer button:hover {
  color: #592F2F !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body .newsletter-form .gform_validation_errors,
body .newsletter-form .gfield_validation_message,
body .newsletter-form .validation_message {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px !important;
  line-height: 1.4;
  color: #592F2F !important;
}

body .newsletter-form .gform_validation_errors > h2 {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px !important;
  line-height: 1.4;
  color: #592F2F !important;
  margin: 0;
}

body .newsletter-form .gform_validation_errors > h2 .gform-icon {
  display: none !important;
  /* the plugin's .gform_wrapper.gravity-theme rule outranks this one */
}

/* The plugin focuses this line after a failed submit and rings it. At its
   full width (the plugin sets 100%) the ring ran past the bar's right edge
   (md:pr-0), so the box hugs its text. */

body .newsletter-form .gform_validation_errors {
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100%;
}

/* The ring in Rosewood, as on the page forms, not the plugin's orange
   (#C02B0A). Its 2px offset stays: the bar has no room for more. */

body .newsletter-form .gform_validation_errors:focus {
  outline-color: #592F2F !important;
}

/* After a failed submit (md+) the error line and the field message would sit
   on the bar's edges (md:py-0), so the bar opens up 18px either side. */

@media (min-width: 768px) {
  .newsletter-bar:has(.gform_validation_errors) {
    padding-top: 12px;
    padding-bottom: 18px;
  }
}

body .newsletter-form .gform_confirmation_message {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #1E351E;
  padding: 8px 0;
}

@media (min-width: 1024px) {
  body .newsletter-form .gform_confirmation_message {
    font-size: 22px;
  }
}

body .newsletter-form .gform_ajax_spinner {
  margin-left: 8px;
}

/* Below md the prompt sits above the field as text (a placeholder cannot
   wrap), so the field becomes a plain underlined input. */

@media (max-width: 767px) {
  body .newsletter-form input[type="email"] {
    font-size: 18px !important;
    border-bottom: 1px solid #1E351E !important;
  }

  body .newsletter-form input[type="email"]::-moz-placeholder {
    color: transparent;
  }

  body .newsletter-form input[type="email"]::placeholder {
    color: transparent;
  }

  body .newsletter-form .ginput_container_email::before {
    display: none;
  }
}

/* ==========================================================================
   Hero video module
   ========================================================================== */

/* Figma: black 0 to 100% alpha from 37% to 97%, layer at 50% opacity. */

.hero-video__scrim {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 37%, rgb(0 0 0 / 0.5) 97%);
}

/* A soft shade behind the copy only. Over the gravel-drive shot (about 26-32s of the
   loop) the scrim alone left the subhead at 2.9:1 and the labels at 1.8:1. With this,
   the loop's worst frame measures labels 4.9, subhead 5.3, headline 5.8:1 at 375 wide,
   and more at 900 and 1280 (95th-percentile background pixel, 2026-10-20). The box
   reaches above the labels and past the sides so no edge shows. Deepened 2026-11-04
   (WCAG 1.4.3): on the brightest pixel, 12 frames 5s apart, "Kennard Nebr." still
   fell to 4.29:1 at 30s at 1280. */

.module-hero-video > .content::before {
  content: "";
  position: absolute;
  inset: -20% -25% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5) 40%, rgb(0 0 0 / 0.3) 75%, rgb(0 0 0 / 0));
}

/* The poster <img> underneath is the still; the video fades in once it is
   actually playing, so there is never a blank frame or a layout shift. */

.hero-video__media {
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-video__media.is-playing {
  opacity: 1;
}

.hero-video__toggle[data-state="paused"] .hero-video__icon-pause {
  display: none;
}

.hero-video__toggle[data-state="paused"] .hero-video__icon-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__media,
	.hero-video__toggle {
    display: none !important;
  }
}

/* ==========================================================================
   Story intro module
   ========================================================================== */

.story-intro__bg--left   {
  -o-object-position: 30% 100%;
     object-position: 30% 100%;
}

.story-intro__bg--center {
  -o-object-position: 50% 100%;
     object-position: 50% 100%;
}

.story-intro__bg--right  {
  -o-object-position: 70% 100%;
     object-position: 70% 100%;
}

/* Whole-pixel height (lg+), so the pinned Ride / Train / Belong stage right
   after it lands on a whole pixel. 60.25vw is 843.5px at 1400, and the vw
   paddings part pixels below about 1440: the stage then pinned at -0.5px,
   with a 1px line of the hero below along the bottom of the screen. Two
   classes, so these beat the utilities; a browser without round() keeps
   them. */

@supports (min-height: round(1px, 1px)) {
  @media (min-width: 1024px) {
    .story-intro.module-story-intro {
      min-height: round(60.25vw, 1px);
      padding-top: round(clamp(120px, 14.8vw, 207px), 1px);
      padding-bottom: round(clamp(250px, 18.7vw, 262px), 1px);
    }
  }
}

/* ==========================================================================
   Ride / Train / Belong module
   ========================================================================== */

.rtb__oval {
  width: min(72.4vw, 291px);
  aspect-ratio: 640 / 785;
  border-radius: 424px;
  transform: translateZ(0);
  /* keeps the rounded clip crisp while photos fade */
}

@media (min-width: 768px) {
  .rtb__oval {
    width: 420px;
  }
}

/* The new photo fades in over the old one, which stays whole underneath
   until it is covered, so the sand behind never shows mid-change
   (Brooke 10/19, C15). */

.rtb__photo {
  opacity: 0;
  transition: opacity 0s 400ms;
}

/* First Ride photo: a blurred rider fills the left 19% of the frame. The
   oval crop has the oval's own aspect, so object-position can't move it;
   a 1.25 zoom anchored at 95% shows 19% to 99% of the width instead. */

.rtb__photo--focus-right {
  transform: scale(1.25);
  transform-origin: 95% 50%;
}

.rtb__photo.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity 400ms ease;
}

/* Below lg the points are plain text: only the first photo shows, and the
   others are display:none so their lazy images never download. */

@media (max-width: 1023px) {
  .rtb__photo {
    opacity: 0;
  }

  .rtb__photo:first-child {
    opacity: 1;
  }

  .rtb__photo:not(:first-child) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .rtb {
    /* Oval is 640 x 785 at 1400; scales with width and never exceeds the viewport height. */
    --oval-w: min(640px, calc((100vw - 140px) * 0.508), calc((100svh - 80px) * 0.8153));
    --oval-h: calc(var(--oval-w) * 1.2266);
  }

  .rtb__grid {
    grid-template-columns: minmax(0, 1fr) var(--oval-w) minmax(0, 1fr);
  }

  .rtb__oval {
    width: var(--oval-w);
    height: var(--oval-h);
  }

  /* Side columns start 209/785 of the way down the oval, as in the comp. */

  .rtb__side {
    padding-top: calc(var(--oval-h) * 0.266);
  }

  /* Static build (reduced motion, or before js/motion.js stages the module):
	   each panel is its own screen. The clip is the hard guarantee that no
	   part of the horse's box leaves its panel: outside it, the PNG's faint
	   white box would paint over the next section, because multiply blends
	   only inside this section. */

  .rtb:not(.rtb--staged) .rtb__panel {
    overflow: clip;
  }

  /* Walking horse (static build): the comp's spot relative to the oval
	   (x -20, y 383, 335 wide at an oval height of 785), out of flow so long
	   text never grows the row. Its containing block is the copy column, so
	   100% here is the column's height, down to its last copy line. Visible
	   pixels of the PNG (670 x 759): head 25.6% down the box, hooves 73%.
	   - Height: the comp's size, or smaller (to 70%) so the hooves stay 16px
	     inside the panel when the head sits 28px under the copy. The panel
	     centres a row of max(oval, column) in at least 100svh with 40px
	     padding, so its bottom is (panel + row) / 2 below the column top.
	   - Top: the comp's spot, or lower when the copy runs longer than the
	     comp's, so the head clears the copy by exactly 28px.
	   The module script hides it in each panel (data-rtb-horse="off") where
	   even that cannot keep the hooves within 5% of the oval height below
	   the oval.
	   multiply drops the PNG's faint white box; its 25% alpha is baked in. */

  .rtb__horse {
    --rtb-row: max(var(--oval-h), 100%);
    --rtb-horse-h: clamp(
			calc(var(--oval-h) * 0.3399),
			calc(((max(100svh, var(--rtb-row) + 80px) + var(--rtb-row)) / 2 - 100% - 44px) / 0.474),
			calc(var(--oval-h) * 0.4834)
		);
    position: absolute;
    left: calc(var(--oval-h) * -0.0255);
    top: max(calc(var(--oval-h) * 0.4879), calc(100% + 28px - var(--rtb-horse-h) * 0.256));
    width: auto;
    height: var(--rtb-horse-h);
    aspect-ratio: 670 / 759;
  }

  /* No room to sit the horse beside the oval's lower part (module script,
	   both modes, panel by panel): no horse there rather than one crammed
	   into the corner. A panel marked off hides its own horse; the stage
	   horse is hidden outright only when no panel has room (motion.js keeps
	   it faded out on the panels marked off). */

  .rtb__panel[data-rtb-horse="off"] .rtb__horse,
	.rtb[data-rtb-horse="off"] .rtb__horse-stage {
    display: none;
  }
}

/* Paper grain from the comp, whose fills carry a noise texture: a fine grey
   noise multiplied into the fill, about 5% darker on average (the comp
   renders Ivory #ECE6D9 as #E0DBCE and Sand #D8D2C7 as #CDC8BD, with a
   spread of about 3 levels, which the .11 / .895 matrix matches). On the
   page itself, every Ivory and Sand section (on the pulled Image and Text
   opener, only its fill below the drawing), the Ride / Train / Belong
   panels, the newsletter and footer fills, and the Schedule a Tour fields
   (their own rules, which need !important). Each surface carries its own
   tile, so a sticky section slides over with its paper. Never on photos,
   video, buttons or the header bar, and not on Gold or Forest sections: the
   comp draws those flat. The sections are matched by attribute, not as
   .bg-brand-*: Tailwind copies any rule naming a utility class into every
   rule that @applies it.
   image-rendering: pixelated keeps the tile on whole pixels. A surface that
   starts on a half pixel (anything after a section of part-pixel height)
   would otherwise resample the tile and soften the spread by
   a third. It inherits, so the surfaces' children get auto back: photos
   inside them scale smoothly as before. */

:root {
  --gvs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.11 0 0 0 .895 .11 0 0 0 .895 .11 0 0 0 .895 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  /* The newsletter bar's own, stronger grain: V3 draws the Ivory bar as
	   #DBD5C9 with a spread of about 4.5 (.16 / .848). */
  --gvs-grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.16 0 0 0 .848 .16 0 0 0 .848 .16 0 0 0 .848 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Dark fills' own grain (the footer panel's Forest): the comp darkens
	   Forest #1E351E to #1A2F1A with a spread of about 1.5 levels on every
	   frame, deeper and stronger than the light fills' 5%, which left it at
	   #1C321C and 0.6. The rows differ a little so the average lands on the
	   comp's colour exactly; tuned on Forest. Measured 10/15 at 1400. */
  --gvs-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.276 0 0 0 .738 .276 0 0 0 .752 .276 0 0 0 .741 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

html,
body,
section[class~="bg-brand-ivory"],
section[class~="bg-brand-sand"],
.rtb__panel,
.image-text--pull:not(.on-dark)::before,
.newsletter-bar::before,
.footer-panel::before {
  background-image: var(--gvs-grain);
  background-size: 240px 240px;
  background-blend-mode: multiply;
  image-rendering: pixelated;
}

.newsletter-bar::before {
  background-image: var(--gvs-grain-strong);
}

.footer-panel::before {
  background-image: var(--gvs-grain-dark);
}

:where(html, body, section[class~="bg-brand-ivory"], section[class~="bg-brand-sand"], .rtb__panel) > * {
  image-rendering: auto;
}

@media (prefers-reduced-motion: reduce) {
  .rtb__photo,
	.rule-label::before,
	.rule-label::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Motion (js/motion.js). Everything below needs html.gvs-motion, which the
   script adds only when motion is allowed, so a failed or skipped script
   leaves the static build untouched.
   ========================================================================== */

/* Stage horse and phone horse: never shown in the static build. */

.rtb__horse-stage,
.rtb__horse-phone {
  display: none;
}

/* Phone horse (below lg, where the panels stack and there is no stage): the
   walk cropped to the horse (456 x 384), centred under each panel's copy,
   at the stage horse's opacity and blend. */

@media (prefers-reduced-motion: no-preference) and (max-width: 1023.98px) {
  .gvs-motion .rtb__horse-phone {
    display: block;
    width: min(200px, 52vw);
    height: auto;
    aspect-ratio: 456 / 384;
    margin: 32px auto 0;
    opacity: var(--gvs-horse-opacity, 0.25);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Slide-over: each flagged section sticks when its BOTTOM meets the bottom
	   of the small viewport (svh, so the mobile address bar never moves it),
	   and the next section in the flow slides up over it. --gvs-h is the
	   section height, kept current by motion.js. */

  .gvs-motion [data-slide-under] {
    position: sticky;
    top: min(0px, calc(100svh - var(--gvs-h, 100svh)));
  }

  /* Anything after a stuck section must paint above it (the stuck
	   sections stay pinned until the end of the article). */

  .gvs-motion [data-slide-under] ~ :not([data-slide-under]) {
    position: relative;
    z-index: 20;
  }

  /* Staged photos (motion.js section 4; Eric's pick 10/15, version C).
	   The stage is one screen tall; its holder sticks while the photo grows
	   and the empty .gvs-stage-hold after it scrolls past (a spacer, not a
	   margin: a sticky box never moves into its own margin). Then the next
	   section, or the footer, slides up over it. lvh, so the photo still
	   fills the screen when the mobile toolbars collapse. */

  .gvs-motion [data-expand-hold] {
    top: min(0px, calc(100lvh - var(--gvs-h, 100lvh)));
    z-index: 15;
    /* over earlier stuck sections (Home's intro is 10), under later ones (20) */
    /* Tucked 1px under the section before it (Mike 10/19, C28): two sections
		   meeting on a part pixel each paint that row only in part, and a stuck
		   section's photo behind them showed through as a thin line. */
    margin-top: -1px;
  }

  /* An Image Band with no stage (screens taller than wide, motion.js): the
	   same tuck at both edges, so while the bars beside the growing photo
	   show, neither part-pixel seam lets the page behind through as a light
	   row. The band paints over the section after it. */

  .gvs-motion .module-image-band--in-place {
    margin-top: -1px;
    margin-bottom: -1px;
    padding-bottom: 1px;
  }

  .gvs-motion .gvs-stage-hold {
    height: var(--gvs-stage-hold, 70svh);
    pointer-events: none;
    /* it lies over the held photo and its button */
  }

  .gvs-motion [data-expand-stage] {
    height: 100lvh;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }

  .gvs-motion .module-image-band[data-expand-stage] img {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .gvs-motion .tour-cta[data-expand-stage] {
    padding-bottom: 0;
  }

  .gvs-motion .tour-cta[data-expand-stage] .tour-cta__media {
    height: 100%;
  }

  /* A stage that ends the page holds through the footer too, and the
	   footer is pulled up over it. */

  .gvs-motion .gvs-stage-hold--footer {
    height: calc(var(--gvs-stage-hold, 70svh) + var(--gvs-footer-h, 640px));
  }

  .gvs-motion.gvs-footer-over-stage .site-footer--on-photo {
    margin-top: calc(-1 * var(--gvs-footer-h, 640px));
  }

  /* Pinned Ride / Train / Belong stage (lg+, set by motion.js). */

  .rtb.rtb--staged {
    height: 100vh;
    overflow: clip;
  }

  .rtb--staged .rtb__panel {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
  }

  /* Its own layer only while it waits below the stage or slides (motion.js
	   sets the class): a layer is drawn as a texture, which softens the paper
	   grain to about two thirds of its spread, so a panel at rest is painted
	   straight onto the page. */

  .rtb--staged .rtb__panel--layer {
    will-change: transform;
  }

  .rtb--staged .rtb__panel .rtb__horse {
    display: none;
  }

  /* One horse over all panels, at the comp's spot beside the oval. Its
	   size and top are derived from its width W, so clearance is exact by
	   construction. Visible pixels of the footage (670 x 758): the head
	   0.2896W below the box top, the hooves 0.825W. --rtb-copy-bottom is the
	   deepest right-hand copy bottom of all panels in stage coordinates
	   (measured by the module template's script).
	   - W: the comp's size, or smaller (to 70%) so the hooves stay 16px
	     inside the 100vh stage with the head 28px under that copy:
	     (100vh - 16px - copy - 28px) / (0.825 - 0.2896).
	   - Top: the comp's spot, or lower so the head clears the copy by
	     exactly 28px. Only the transparent box can reach the clip. */

  .rtb--staged .rtb__horse-stage {
    --rtb-horse-w: clamp(
			calc(var(--oval-h) * 0.3),
			calc((100vh - 44px - var(--rtb-copy-bottom, 0px)) / 0.5354),
			calc(var(--oval-h) * 0.4268)
		);
    display: block;
    position: absolute;
    z-index: 10;
    left: calc(50% + var(--oval-w) / 2 + 20px - var(--oval-h) * 0.0255);
    top: max(
			calc(50vh - var(--oval-h) / 2 + var(--oval-h) * 0.4879),
			calc(var(--rtb-copy-bottom, 0px) + 28px - var(--rtb-horse-w) * 0.2896)
		);
    width: var(--rtb-horse-w);
    height: auto;
    aspect-ratio: 670 / 758;
    opacity: var(--gvs-horse-opacity, 0.25);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
}

/* Footer monogram canvas (js/footer-emblem.js). */

.footer-emblem__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

.footer-emblem.is-live .footer-emblem__still {
  opacity: 0;
}

/* ==========================================================================
   Page Header (photo), Split Feature, Tour Call to Action
   ========================================================================== */

.page-hero__wash {
  /* The title and subtitle sit between 37.5% and 62.5% of the hero height
	   at every width (375 to 1920). 0.48 there keeps Ivory above 3:1 (large
	   text) on the brightest photo pixel under any of their lines, on all
	   four photo heroes, on every served file and the upload original. At
	   0.45 Training's title measured 2.92 to 3.0 on phones (the white arena
	   wall) and Boarding's subtitle 2.94; 0.47 left two pixels of Training's
	   original at 2.98 at 360x640. The sky above has no text, so it lightens
	   toward the comp's (about 0.25 at 17% down). Measured 10/15. */
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.15) 0%, rgb(0 0 0 / 0.48) 35%, rgb(0 0 0 / 0.48) 67%, rgb(0 0 0 / 0.3) 100%);
}

/* Whole-pixel hero heights. 88svh of an 812px phone is 714.56px, so every
   section below would start on a part pixel, and two Sand sections then
   show a 1px line of the Ivory page between them. Two classes, so these
   beat the min-h utilities; a browser without round() keeps the utilities. */

@supports (min-height: round(1px, 1px)) {
  .page-hero.page-hero--tall {
    min-height: round(88svh, 1px);
  }

  .page-hero.page-hero--medium {
    min-height: round(70svh, 1px);
  }

  @media (min-width: 1024px) {
    .page-hero.page-hero--tall {
      min-height: round(min(1000px, 100svh), 1px);
    }

    .page-hero.page-hero--medium {
      min-height: round(min(720px, 85svh), 1px);
    }
  }
}

/* Figma: black 50% -> 0 from the top left (handles 0.09,0.09 -> 0.87,0.58), the
   second layer. The first layer (Ink, 2026-11-04) darkens only the copy's corner:
   the Figma wash alone left "Our Trainer" at 2.7:1 and the fence behind the
   sub-lines at 1.6:1 (WCAG 1.4.3 wants 4.5:1, 3:1 for the heading). Measured on
   the photo's brightest pixels with the text hidden: label 6.2, heading 3.5,
   sub-lines 4.7 at 1280. It clears before the trainer's face. */

.split-feature__wash {
  background:
		linear-gradient(120deg, rgb(30 30 30 / 0.56) 0%, rgb(30 30 30 / 0.54) 48%, rgb(30 30 30 / 0) 70%),
		linear-gradient(120deg, rgb(0 0 0 / 0.5) 6%, rgb(0 0 0 / 0) 72%);
}

/* Figma: rustic redraw, layer 0.5 x fill 0.5, multiply (desaturation baked in). */

.split-feature__drawing {
  opacity: 0.25;
  mix-blend-mode: multiply;
}

/* Phones: the copy sits on the photo (Brooke 10/19, C34), so the wash runs
   from the left edge, where the copy is, and is clear by the face. */

@media (max-width: 639px) {
  /* First layer: Ink over the copy column, for WCAG 1.4.3 (2026-11-04). The
	   sub-lines sat at 2.5:1 on the fence at 375; now 4.5:1 or better at 375
	   and 430 on the brightest pixels, fading out before the face. */

  .split-feature__wash {
    background:
			linear-gradient(90deg, rgb(30 30 30 / 0.24) 0%, rgb(30 30 30 / 0.44) 50%, rgb(30 30 30 / 0.44) 66%, rgb(30 30 30 / 0) 80%),
			linear-gradient(90deg, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.45) 50%, rgb(0 0 0 / 0) 85%);
  }
}

/* From xl the panels grow with the screen like the Guest Forms cards (Brooke
   10/19, C19: "Match how you have the similar cards on the Guest Forms page"):
   637px tall up to 1400, the comp's 1400 x 637, and in proportion above it.
   The copy stays 33px and 47px in from each panel's left edge. 100cqw is the
   section's width, which leaves out a classic scrollbar (100vw would not). */

@media (min-width: 1280px) {
  .split-feature {
    container-type: inline-size;
  }

  .split-feature > .split-feature__panel {
    min-height: max(637px, 45.5cqw);
  }
}

/* Above 1400 a two-column photo grid (Boarding Options, Amenities) grows with
   the screen instead of stopping at the 1400 column (Brooke 10/19, C22: "The
   text goes wider, and the image grows bigger proportionally"): the 1400
   layout scaled, 50px sides and a 20px gap at 1400. */

@media (min-width: 1400px) {
  .content-wide.card-grid--grow {
    max-width: none;
    padding-inline: calc(50% / 14);
  }

  .card-grid--grow > .grid {
    -moz-column-gap: calc(20vw / 14);
         column-gap: calc(20vw / 14);
  }
}

.tour-cta__media {
  height: 100%;
}

/* Figma: black 0 -> 50% over the last 14% of the photo (under the legal row).
   Deepened (0 at 80% -> 70%) so the 12px Ivory legal row holds 4.5:1 on the
   brightest grass. */

.tour-cta__wash {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 80%, rgb(0 0 0 / 0.55) 93%, rgb(0 0 0 / 0.7) 100%);
}

.tour-cta--under-footer {
  padding-bottom: 120px;
}

@media (min-width: 1024px) {
  /* Comp: 64px Nysé on a 53px line in this block. */

  .tour-cta h2 {
    line-height: 53px;
  }
}

.tour-cta--under-footer .tour-cta__media {
  height: calc(100% + var(--gvs-footer-h, 640px));
}

@media (min-width: 1024px) {
  /* 1400 comp: section 3532 -> footer 4101, content 3664-3879. */

  .tour-cta--under-footer {
    padding-bottom: 222px;
  }
}

/* ==========================================================================
   Page Header entrance (Eric's pick 10/15, option B "The Frame Opens",
   https://gvs-hero-intro.vercel.app/?v=b). On a page that opens with a
   photo Page Header (.page-hero--intro), js/hero-intro.js opens the photo
   from a square window in the header bar's column to full bleed while the
   picture settles back from 1.10, and the title and subtitle rise out of
   their own slots. Here: the first frame, held from the first paint, and
   the fallback that eases it to rest if the script never takes over.
   ========================================================================== */

/* Every scale settles toward the centre of the title block, so the photo
   under the type is only ever a magnified part of what sits there at rest,
   never brighter than the wash was measured against. */

.page-hero--intro .page-hero__media img {
  transform-origin: 50% 53%;
}

/* First frame. html.gvs-hero-wait comes from the <head> script in
   inc/motion.php, only under reduced motion: no-preference; hero-intro.js
   sets the same values inline (its WINDOW_*, PICTURE_FROM*, TEXT_FROM,
   TEXT_MASK, BUTTON_Y: change both) and lets go of the class in the same
   task. Screen only, so a print is always the static page. The photo is
   never hidden: it paints at once, inside the window. */

@media screen and (prefers-reduced-motion: no-preference) {
  /* Phones: the window starts 16px under the header bar (16 + 64 + 16)
	   and 16px in from the sides and the bottom. */

  .gvs-hero-wait .page-hero--intro .page-hero__media {
    clip-path: inset(96px 16px 16px);
  }

  .gvs-hero-wait .page-hero--intro .page-hero__media img {
    transform: scale(1.1);
  }

  /* The h1 and the subtitle are their own masks: each line waits below its
	   slot. The extra room keeps the descenders in Boarding, Property and
	   Training. Kept through the fallback, so the lines still rise out of
	   their slots. */

  .gvs-hero-wait .page-hero--intro .page-hero__title,
	.gvs-hero-wait .page-hero--intro .page-hero__sub,
	.gvs-hero-late .page-hero--intro .page-hero__title,
	.gvs-hero-late .page-hero--intro .page-hero__sub {
    clip-path: inset(-0.2em -0.15em -0.3em);
  }

  .gvs-hero-wait .page-hero--intro .page-hero__line {
    transform: translateY(130%);
  }

  .gvs-hero-wait .page-hero--intro .page-hero__cta {
    opacity: 0;
    transform: translateY(8px);
  }

  /* The header dividers need no hold here: js/motion.js holds them at zero
	   itself until gvs:hero-start (section 6). */
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .gvs-hero-wait .page-hero--intro .page-hero__media img {
    transform: scale(1.08);
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (min-width: 640px) {
  .gvs-hero-wait .page-hero--intro .page-hero__media {
    clip-path: inset(96px 24px 24px);
  }
}

/* lg+: from 24px under the bar (25 + 78 + 24) to 24px above the hero's
   bottom, the sides on the bar's edges (.content-wide gutters, then
   .max-w-header's 1201px centred). */

@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .gvs-hero-wait .page-hero--intro .page-hero__media {
    clip-path: inset(127px max(32px, calc((100% - 1201px) / 2)) 24px);
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
  .gvs-hero-wait .page-hero--intro .page-hero__media {
    clip-path: inset(127px max(50px, calc((100% - 1201px) / 2)) 24px);
  }
}

/* The script never took over: at 2.5s the head script swaps gvs-hero-wait
   for gvs-hero-late and everything eases to rest, then it drops the class.
   The transitions live only here, so they never fight GSAP. */

@media (prefers-reduced-motion: no-preference) {
  .gvs-hero-late .page-hero--intro .page-hero__media {
    clip-path: inset(0);
    transition: clip-path 0.6s ease;
  }

  .gvs-hero-late .page-hero--intro .page-hero__media img {
    transition: transform 0.6s ease;
  }

  .gvs-hero-late .page-hero--intro .page-hero__line,
	.gvs-hero-late .page-hero--intro .page-hero__cta {
    transition: transform 0.6s ease, opacity 0.6s ease;
  }
}

/* The title band's drawing entrance, "Paint In" (Eric 10/18, card C9, in
   place of 10/15's "Horizon First"): on a page that opens with a title band
   with a line drawing (.title-band--intro, Our Story), js/hero-intro.js
   spreads the drawing out from the barn through a soft-edged mask while it
   settles back from 1.03. The same head class and fallback as the photo:
   held unpainted from the first paint, and if the script never takes over
   the drawing fades in. */

@media screen and (prefers-reduced-motion: no-preference) {
  .gvs-hero-wait .title-band--intro .title-band__illustration img {
    opacity: 0;
  }

  .gvs-hero-late .title-band--intro .title-band__illustration img {
    transition: opacity 0.6s ease;
  }
}

/* ==========================================================================
   Text reveal hold (Eric 10/18, card C8: "Anywhere there are text blocks,
   I expected them to animate in just like this"). The first screen's copy
   reveals as the page opens, so it is held from the first paint: the
   <head> script in inc/motion.php adds .gvs-text-wait, and js/text-reveal.js
   holds what it reveals inline and drops the class in the same task. The
   groups below are its GROUPS and SKIP: change both together. If the script
   has not taken over by 3s, the head script swaps the class for
   .gvs-text-late and the copy fades in here.
   ========================================================================== */

@media screen and (prefers-reduced-motion: no-preference) {
  .gvs-text-wait #main-content :is(
		.title-band > .content,
		.module-hero-video > .content,
		[data-rtb] .rtb__side,
		.module-story-intro > .content,
		.module-card-grid > div > div:not(.grid),
		.module-card-grid .card,
		.module-feature-list .grid > div > div,
		.photo-collage > .content:not(.photo-collage__photos),
		.module-form-embed .content .space-y-2,
		.module-form-embed .gform_heading,
		.module-image-text .grid > :not(figure),
		.image-text__overlay .content-wide > div,
		.module-split-text > .grid,
		.split-feature__panel,
		.module-tour-cta > .content,
		.module-text-block > .content > div
	) > :not(img, picture, svg, video, iframe, [aria-hidden="true"], .sr-only, .screen-reader-text, [data-expand], .card__media),
	.gvs-text-wait #main-content :is(
		.module-image-text > .content-wide > h2,
		.module-feature-list > .content-wide > h2,
		.module-form-embed > .content > div > h2
	) {
    opacity: 0;
  }

  .gvs-text-late #main-content :is(
		.title-band > .content,
		.module-hero-video > .content,
		[data-rtb] .rtb__side,
		.module-story-intro > .content,
		.module-card-grid > div > div:not(.grid),
		.module-card-grid .card,
		.module-feature-list .grid > div > div,
		.photo-collage > .content:not(.photo-collage__photos),
		.module-form-embed .content .space-y-2,
		.module-form-embed .gform_heading,
		.module-image-text .grid > :not(figure),
		.image-text__overlay .content-wide > div,
		.module-split-text > .grid,
		.split-feature__panel,
		.module-tour-cta > .content,
		.module-text-block > .content > div
	) > :not(img, picture, svg, video, iframe, [aria-hidden="true"], .sr-only, .screen-reader-text, [data-expand], .card__media),
	.gvs-text-late #main-content :is(
		.module-image-text > .content-wide > h2,
		.module-feature-list > .content-wide > h2,
		.module-form-embed > .content > div > h2
	) {
    transition: opacity 0.6s ease;
  }
}

/* ==========================================================================
   Lists: diamond markers. Forest on light grounds (V3 Training skills
   list), Sand under .on-dark (V3 Boarding).
   ========================================================================== */

/* No margin here: this rule sits outside the layers, so it would beat the
   mt-* utilities the templates set on each list. */

.list-diamond {
  list-style: none;
  padding: 0;
}

.list-diamond > li {
  position: relative;
  padding-left: 20px;
}

.list-diamond > li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: #1E351E;
  transform: rotate(45deg);
}

.on-dark .list-diamond > li::before {
  background: #D8D2C7;
}

/* ==========================================================================
   Rich text (Text Block module)
   ========================================================================== */

.gvs-prose > * + * {
  margin-top: 1rem;
}

.gvs-prose h2 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .gvs-prose h2 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .gvs-prose h2 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.gvs-prose h2 {
  margin-top: 3rem;
}

.gvs-prose h3 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .gvs-prose h3 {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 1024px) {
  .gvs-prose h3 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.gvs-prose h3 {
  margin-top: 2.5rem;
}

.gvs-prose h4 {
  font-family: Nyse, Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .gvs-prose h4 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.gvs-prose h4 {
  margin-top: 2rem;
}

/* A heading that opens the block starts at the top, like a paragraph (its
   margin would otherwise collapse through .gvs-prose and push the block down). */

.gvs-prose > :first-child {
  margin-top: 0;
}

.gvs-prose ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.gvs-prose ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.gvs-prose li + li {
  margin-top: 0.4rem;
}

.gvs-prose a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.gvs-prose a:hover {
  --tw-text-opacity: 1;
  color: rgb(89 47 47 / var(--tw-text-opacity, 1));
}

/* A phone number never breaks at its hyphen (Web Accessibility, 375 wide). */

.gvs-prose a[href^="tel:"] {
  white-space: nowrap;
}

.gvs-prose table {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .gvs-prose table {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

.gvs-prose table {
  width: 100%;
  border-collapse: collapse;
}

.gvs-prose th,
.gvs-prose td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(126 128 123 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.gvs-prose th {
  border-color: currentColor;
  font-weight: 600;
}

.gvs-prose th:first-child,
.gvs-prose td:first-child {
  padding-left: 0px;
}

.gvs-prose th:last-child,
.gvs-prose td:last-child {
  padding-right: 0px;
}

/* On phones a table scrolls sideways inside its own box, so the page never
   does. The column floor leaves part of the next column in view. */

@media (max-width: 639px) {
  .gvs-prose table {
    display: block;
    overflow-x: auto;
  }

  .gvs-prose th,
	.gvs-prose td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: min(40vw, 11rem);
  }
}

/* ==========================================================================
   Page forms (Form module): Gravity Forms gravity-theme markup
   ========================================================================== */

body .gvs-form .gform_wrapper {
  margin: 0 !important;
}

body .gvs-form .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 22px 20px !important;
}

body .gvs-form .gfield {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  body .gvs-form .gfield--width-half {
    grid-column: span 6 !important;
  }
}

body .gvs-form .gfield_label,
body .gvs-form legend.gfield_label {
  display: block;
  margin: 0 0 8px !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: #1E351E;
}

body .gvs-form .gfield_required {
  color: #592F2F !important;
  margin-left: 2px;
}

body .gvs-form .gform_required_legend {
  font-size: 14px;
  margin-bottom: 18px;
}

body .gvs-form input[type="text"],
body .gvs-form input[type="email"],
body .gvs-form input[type="tel"],
body .gvs-form textarea {
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #7E807B !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #1E351E !important;
}

body .gvs-form textarea {
  min-height: 140px !important;
}

/* Forest at 75% (the comp sets it in Forest): 5.98:1 on the white field. */

body .gvs-form ::-moz-placeholder {
  color: rgb(30 53 30 / 75%);
  opacity: 1;
}

body .gvs-form ::placeholder {
  color: rgb(30 53 30 / 75%);
  opacity: 1;
}

body .gvs-form input:focus-visible,
body .gvs-form textarea:focus-visible {
  outline: 2px solid #1E351E !important;
  outline-offset: 2px;
}

body .gvs-form .gfield_checkbox {
  display: grid;
  gap: 10px;
}

body .gvs-form .gchoice {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

body .gvs-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 !important;
  accent-color: #1E351E;
}

body .gvs-form .gchoice label {
  font-size: 18px;
  max-width: none !important;
}

body .gvs-form .gfield_validation_message,
body .gvs-form .validation_message,
body .gvs-form .gform_validation_errors {
  margin-top: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  color: #592F2F !important;
}

/* line-height: the plugin sets 17.6px, which packs a two-line summary (375)
   tighter than the field messages; 1.4 as in the newsletter form. */

body .gvs-form .gform_validation_errors > h2 {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #592F2F !important;
}

/* The forms plugin places this icon over the heading's first letters (it
   expects padding the theme removes). The text carries the meaning, as in
   the newsletter form. */

body .gvs-form .gform_validation_errors > h2 .gform-icon,
body .gvs-form-schedule .gform_validation_errors > h2 .gform-icon {
  display: none !important;
  /* the plugin's .gform_wrapper.gravity-theme rule outranks this one */
}

/* After a failed submit the plugin focuses the summary and rings it in its
   orange (#C02B0A), 2px off a box with no padding, so the ring hugged the
   text and sat 4px over the first label. Rosewood instead (7.46:1 on Sand),
   6px clear while the text stays flush with the fields. The margin leaves
   the ring's outer edge (8px out) the form's 16px row gap above the first
   label. !important: the plugin's .gform_wrapper.gravity-theme rules
   outrank these. */

body .gvs-form .gform_validation_errors,
body .gvs-form-schedule .gform_validation_errors {
  margin-bottom: 24px !important;
}

body .gvs-form .gform_validation_errors:focus,
body .gvs-form-schedule .gform_validation_errors:focus {
  outline: 2px solid #592F2F !important;
  outline-offset: 6px !important;
}

/* The summary lists each failed field as a link to it (the form's Validation
   Summary setting, on 2026-11-04 for WCAG 3.3.1). The plugin sets the list in
   its orange (3.89:1 on Sand) at 13.2px with no underline; Rosewood (7.46:1),
   15px and underlined, like the field messages. */

body .gvs-form .gform_validation_errors ol,
body .gvs-form-schedule .gform_validation_errors ol {
  margin: 10px 0 0 !important;
  padding-left: 1.1em !important;
}

body .gvs-form .gform_validation_errors li,
body .gvs-form-schedule .gform_validation_errors li {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #592F2F !important;
}

body .gvs-form .gform_validation_errors a,
body .gvs-form-schedule .gform_validation_errors a {
  font-size: inherit !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

body .gvs-form .gform_validation_errors a:hover,
body .gvs-form-schedule .gform_validation_errors a:hover {
  text-decoration-thickness: 2px !important;
}

/* A summary link scrolls to its field and focuses the box; the margin keeps
   the field's label in view above it. */

body .gvs-form .gfield,
body .gvs-form input,
body .gvs-form textarea,
body .gvs-form select {
  scroll-margin-top: 48px;
}

/* Failed fields: the forms plugin's orange (#C02B0A) is 3.89:1 on Sand;
   Rosewood is 7.46:1, the same as the error messages. */

body .gvs-form .gfield_error .gfield_label,
body .gvs-form-schedule .gfield_error .gfield_label,
body .gvs-form-schedule .gfield_error .gfield_required {
  color: #592F2F !important;
}

body .gvs-form .gform_footer {
  margin: 28px 0 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: flex-start;
}

/* === Property + Schedule a Tour (V2 pass 2026-09-29) === */

/* Form fields: full width, stacked. Comp rhythm at 1400: label line 21,
   9 to the input, input 58, 16 to the next label (a 104px pitch). */

body .gvs-form-schedule .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px 0 !important;
}

body .gvs-form-schedule .gfield {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels and required indicators */

/* block !important: GF's .gform_wrapper.gravity-theme .gfield_label makes it
   an inline-block, which sits 2.5px down a 24px line. */

body .gvs-form-schedule .gfield_label,
body .gvs-form-schedule legend.gfield_label {
  display: block !important;
  margin: 0 0 9px !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 21px;
  color: #1E351E;
}

/* Comp: 8 from "I'm interested in..." to the first choice. */

body .gvs-form-schedule legend.gfield_label {
  margin-bottom: 8px !important;
}

/* Comp: 32 from the last choice to the Message label (16 gap + 16). */

body .gvs-form-schedule .gfield.gfield--type-checkbox {
  margin-bottom: 16px !important;
}

/* Comp: "First Name*" is one 15px run. GF's smaller inline-block asterisk
   also grew the label line by half a pixel. */

body .gvs-form-schedule .gfield_required {
  display: inline !important;
  font-size: inherit !important;
  color: #1E351E !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Comp has no legend; keep it for screen readers (never display:none). */

body .gvs-form-schedule .gform_required_legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Inputs: filled (Ivory background, no visible border) */

body .gvs-form-schedule input[type="text"],
body .gvs-form-schedule input[type="email"],
body .gvs-form-schedule input[type="tel"],
body .gvs-form-schedule textarea {
  width: 100% !important;
  min-height: 0 !important;
  padding: 15px 12px 16px !important;
  /* 58 tall, text 15 from the top, as the comp */
  border: none !important;
  border-radius: 4px !important;
  background: #ECE6D9 !important;
  /* Paper grain (see "Paper grain"); the white focus fill below drops it. */
  background-image: var(--gvs-grain) !important;
  background-size: 240px 240px !important;
  background-blend-mode: multiply !important;
  image-rendering: pixelated;
  box-shadow: none !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #1E351E !important;
}

/* GF renders rows=10; the comp's box is 140px. Block, so no line-box
   descender space sits under it. */

body .gvs-form-schedule textarea {
  display: block;
  height: 140px !important;
  min-height: 140px !important;
  resize: vertical;
}

/* Placeholder text: Forest at 75% (the comp sets it in Forest), 5.32:1 on
   the Ivory field and 5.98:1 on the white focus fill. */

body .gvs-form-schedule ::-moz-placeholder {
  color: rgb(30 53 30 / 75%);
  opacity: 1;
}

body .gvs-form-schedule ::placeholder {
  color: rgb(30 53 30 / 75%);
  opacity: 1;
}

/* Focus state: visible ring */

body .gvs-form-schedule input:focus-visible,
body .gvs-form-schedule textarea:focus-visible {
  outline: 2px solid #1E351E !important;
  outline-offset: 2px;
  background: #fff !important;
}

/* Checkboxes: small filled squares */

body .gvs-form-schedule .gfield_checkbox {
  display: grid;
  gap: 14px;
}

/* Comp: choice text starts 41px in from the field edge (24 box + 17). */

body .gvs-form-schedule .gchoice {
  display: flex !important;
  align-items: center;
  gap: 17px;
}

/* Comp: 24px Ivory squares, no border. The forms plugin's gray-500 border
   is dropped; the focus ring carries keyboard visibility. */

body .gvs-form-schedule input[type="checkbox"] {
  flex-shrink: 0;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px;
  accent-color: #1E351E;
  color: #1E351E;
  background-color: #ECE6D9 !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Paper grain on the empty square only, so the tick's own image and size
   below stay as they are. */

body .gvs-form-schedule input[type="checkbox"]:not(:checked) {
  background-image: var(--gvs-grain);
  background-size: 240px 240px;
  background-blend-mode: multiply;
  image-rendering: pixelated;
}

body .gvs-form-schedule input[type="checkbox"]:checked {
  background-color: #1E351E !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ECE6D9'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body .gvs-form-schedule input[type="checkbox"]:focus-visible {
  outline: 2px solid #1E351E !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* A 1px Gold edge on the tour form's fields and empty checkboxes (Eric,
   2026-11-04, for WCAG 1.4.11: Ivory on Sand is 1.21:1, the edge is 3.7:1 on
   Sand). It replaces his 10/15 no-edge call ("the outlines on the forms...
   you need to remove those"). Drawn as an inset shadow so nothing moves; the
   focus ring above still marks the field being typed in. */

body .gvs-form-schedule input[type="text"],
body .gvs-form-schedule input[type="email"],
body .gvs-form-schedule input[type="tel"],
body .gvs-form-schedule textarea,
body .gvs-form-schedule input[type="checkbox"]:not(:checked) {
  box-shadow: inset 0 0 0 1px #6B5F4A !important;
}

body .gvs-form-schedule .gchoice label {
  margin: 0 !important;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 27px !important;
  max-width: none !important;
  cursor: pointer;
}

/* Validation messages */

body .gvs-form-schedule .gfield_validation_message,
body .gvs-form-schedule .validation_message,
body .gvs-form-schedule .gform_validation_errors {
  margin-top: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  color: #592F2F !important;
}

body .gvs-form-schedule .gform_validation_errors > h2 {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px !important;
  color: #592F2F !important;
}

/* Submit button: inc/gravity-forms.php renders it as a notched .btn
   (button.gform_button.btn), so .btn carries the fill, hover and focus.
   Comp: 44 below the Message box, 144 wide (41px either side of SUBMIT). */

body .gvs-form-schedule .gform_footer {
  margin: 44px 0 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: flex-start;
}

body .gvs-form-schedule .gform_footer .gform_button {
  padding: 0 41px;
}

/* === Lead: interiors V2 pass (2026-09-29) === */

/* Notched corners cut straight into a photo (the .notched surfaces put the
   fill on ::before, which an <img> can't carry). Same mask, larger notch. */

.notched-media {
  --notch: 14px;
  -webkit-mask:
		radial-gradient(circle var(--notch) at 0 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 0 100%, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 100%, #0000 calc(100% - 0.5px), #000 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask:
		radial-gradient(circle var(--notch) at 0 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 0 100%, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 100%, #0000 calc(100% - 0.5px), #000 100%);
          mask:
		radial-gradient(circle var(--notch) at 0 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 0, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 0 100%, #0000 calc(100% - 0.5px), #000 100%),
		radial-gradient(circle var(--notch) at 100% 100%, #0000 calc(100% - 0.5px), #000 100%);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}

/* Text Block contact links (Schedule a Tour): the phone number in a heading
   reads as a display line, not a link; the email is set at 600. */

.module-text-block h3 a {
  text-decoration: none;
}

.module-text-block p a[href^="mailto:"] {
  font-weight: 600;
}

/* Photo Collage: two-column grid below lg, the comp's arrangement at lg+. */

.photo-collage__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* 9999px, not 50%: the comp's radius is clamped to a stadium (straight sides). */

.photo-collage__item--oval {
  border-radius: 9999px;
}

/* Below lg an odd last photo sits centred at one column's width. */

@media (max-width: 1023px) {
  .photo-collage__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .photo-collage__item:last-child:nth-child(odd) {
    width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1024px) {
  .photo-collage__item {
    position: absolute;
    left: var(--pc-l);
    top: var(--pc-t);
    width: var(--pc-w);
    aspect-ratio: var(--pc-ar);
  }
}

/* Photo parallax (motion.js section 7, Heather 10/15): each photo drifts
   inside its frame and is its own layer while it does. Safari can let a
   composited child slip out of a border-radius + overflow clip unless the
   frame is its own stacking context, so the ovals isolate. The notched
   frames clip with a mask, which already does. No change at rest. */

.photo-collage__item--oval {
  isolation: isolate;
}

/* Image and Text opener pulled up over a title band's drawing (image_text.php,
   V3 Our Story): see-through for the pull, so the drawing shows under the
   text, then its fill (--gvs-it-fill) from 2px above the band's foot (the
   overlap hides the sub-pixel seam). The fill sits on ::before so the light
   fills can take the paper grain without it covering the drawing. */

.image-text--pull::before {
  content: '';
  position: absolute;
  inset: calc(var(--gvs-it-pt) + var(--gvs-it-pull) - 2px) 0 0;
  z-index: -1;
  background-color: var(--gvs-it-fill);
}

/* Image and Text overlay row: text sits on the left, so the wash is deepest there. */

.image-text__wash {
  background: linear-gradient(to right, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.55) 40%, rgb(0 0 0 / 0.15) 75%, rgb(0 0 0 / 0.05) 100%);
}

@media (max-width: 1023px) {
  .image-text__wash {
    background: rgb(0 0 0 / 0.55);
  }
}

/* Card Grid overlay cards (Guest Forms): text at the top, so the wash is deepest there. */

.card-grid__wash {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0.2) 100%);
}

/* Card hovers, A "Settle" (Eric's pick 10/16 from https://gvs-hover.vercel.app;
   10/15: "the hover is real lame and not premium at all"). A card that is one
   link (Our Story's team: the email, card_grid.php .card--link) eases its
   photo to 1.05 inside the notched frame over 0.9s, and back on the same
   curve, while the email draws the header's line (C3, the .link-draw rules).
   The link's box covers the card, so the whole card hovers and clicks as one,
   and it is still one link and one tab stop, named by the address. Cards that
   are not links (Boarding's options, Property's amenities) and Lisa's photo
   on Training get no hover. Real hover only, so a tap never leaves it on.
   Reduced motion: no zoom, the photo's tone lifts a touch. */

.card--link {
  position: relative;
}

.card--link .card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__media {
  overflow: hidden;
}

.card__img {
  transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
}

.card--link:has(.card__link:focus-visible) .card__img {
  transform: scale(1.05);
}

@media (hover: hover) {
  .card--link:hover .card__img {
    transform: scale(1.05);
  }
}

/* The emails (a team card's, Lisa's caption on Training): C3 in place of the
   old underline and its instant Rosewood flip. The link's box runs 4px past
   the text at the sides and 6px under it (the margins take it back, so
   nothing moves), so the focus ring clears the diamonds. The text is
   inline-block, so a wrapped address draws under its last line, and
   initEmailWrap() in js/main.js narrows a wrapped one to its widest line,
   so the line ends at the text. */

.card__link,
.caption__link {
  display: inline-block;
  padding: 0 4px 6px;
  margin: 0 -4px -6px;
}

.card__link .link-draw,
.caption__link .link-draw {
  display: inline-block;
  --link-draw-pb: 0px;
}

.card__link:focus-visible,
.caption__link:focus-visible {
  outline-offset: 4px;
}

/* Reduced motion: nothing moves. The line shows at once (C3's own rule),
   the photo's tone lifts and the email eases to Rosewood. */

@media (prefers-reduced-motion: reduce) {
  .card__img {
    transition: filter 0.4s ease;
  }

  .card--link:has(.card__link:focus-visible) .card__img {
    transform: none;
    filter: brightness(1.05) saturate(1.06);
  }

  .card__link,
	.caption__link {
    transition: color 0.3s ease;
  }

  .card__link:focus-visible,
	.caption__link:focus-visible {
    color: #592F2F;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .card--link:hover .card__img {
    transform: none;
    filter: brightness(1.05) saturate(1.06);
  }

  .card__link:hover,
	.caption__link:hover {
    color: #592F2F;
  }
}

/* Title band illustration (Our Story): a line drawing on white, multiplied into
   the Sand band and softened so it reads as the comp's faint engraving. */

.title-band__illustration img {
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.32;
}

/* ==========================================================================
   Back to top (C12, Hallmark)
   Eric's pick 10/18, option C of https://gvs-back-to-top.vercel.app. The
   hero mark's frame as a button: a Sand oval with a Forest band just inside
   its edge, a hand-drawn Forest horseshoe and a small Top label
   (template-parts/back-to-top.php). Fixed bottom right, above the footer and
   under the mobile menu (z-40). Hidden until js/back-to-top.js adds
   .is-shown past the hero; each time it shows, the band draws round from the
   top and the shoe draws itself in heel to heel, then the label settles.
   Hover and keyboard focus: band, shoe and label turn Rosewood (the links'
   hover colour) and the shoe lifts 2px. Motion: docs/ANIMATIONS.md item 13.
   ========================================================================== */

.gvs-btt {
  /* The frame is drawn at 58 x 72; --k keeps the band its weight when the
	   oval is drawn smaller on phones. */
  --w: 48px;
  --h: 60px;
  --k: 1.2083;
  --shoe: 23px;
  --fg: #1E351E;
  --lift: 0px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-pop: cubic-bezier(0.34, 1.64, 0.64, 1);
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  border-radius: 50%;
  background: #D8D2C7;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
		opacity 0.3s ease,
		transform 0.5s var(--ease-out),
		visibility 0s linear 0.5s,
		color 0.25s ease;
}

.gvs-btt.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
		opacity 0.4s ease,
		transform 0.6s var(--ease-out),
		visibility 0s,
		color 0.25s ease;
}

@media (min-width: 1024px) {
  .gvs-btt {
    --w: 58px;
    --h: 72px;
    --k: 1;
    --shoe: 28px;
    right: 28px;
    bottom: 28px;
    gap: 4px;
  }
}

/* A ring that shows on any background: Ivory inside, Forest outside. */

.gvs-btt:focus-visible {
  outline: 2px solid #1E351E;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ECE6D9;
}

@media (hover: hover) {
  .gvs-btt:hover {
    --fg: #592F2F;
    --lift: 2px;
  }
}

.gvs-btt:focus-visible {
  --fg: #592F2F;
  --lift: 2px;
}

.gvs-btt__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gvs-btt__band {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(2.4 * var(--k));
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

.gvs-btt__shoe {
  display: block;
  width: var(--shoe);
  height: auto;
  transform: translateY(calc(var(--lift) * -1));
  transition: transform 0.4s var(--ease-pop);
}

.gvs-btt__draw {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

.gvs-btt__label {
  display: block;
  font-family: "FKT Ashmore", "Instrument Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  /* optical centring: tracking adds space after the last letter */
  transform: translateY(calc(var(--lift) * -0.5));
  transition: transform 0.4s var(--ease-pop);
}

@media (min-width: 1024px) {
  .gvs-btt__label {
    font-size: 10px;
  }
}

/* Body focused after the trip up (a click, not a key): no ring on the page. */

body[tabindex="-1"]:focus {
  outline: none;
}

/* The draw-in, replayed every time the button shows. */

.gvs-btt.is-shown .gvs-btt__band {
  animation: gvs-btt-draw 0.7s var(--ease-out) 0.1s both;
}

.gvs-btt.is-shown .gvs-btt__draw {
  animation: gvs-btt-draw 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.25s both;
}

.gvs-btt.is-shown .gvs-btt__label {
  animation: gvs-btt-label 0.5s var(--ease-out) 0.85s both;
}

@keyframes gvs-btt-draw {
  from {
    stroke-dashoffset: 1;
  }

  to   {
    stroke-dashoffset: 0;
  }
}

@keyframes gvs-btt-label {
  from {
    opacity: 0;
    letter-spacing: 0.4em;
  }

  to   {
    opacity: 1;
    letter-spacing: 0.14em;
  }
}

/* Reduced motion: it shows and goes at once, whole, and nothing moves. */

@media (prefers-reduced-motion: reduce) {
  .gvs-btt,
	.gvs-btt.is-shown,
	.gvs-btt *,
	.gvs-btt *::before,
	.gvs-btt *::after {
    transition: none !important;
    animation: none !important;
  }

  .gvs-btt {
    transform: none;
    --lift: 0px !important;
  }
}

.first\:border-t:first-child {
  border-top-width: 1px;
}

.hover\:text-brand-rosewood:hover {
  --tw-text-opacity: 1;
  color: rgb(89 47 47 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-sage-light:hover {
  --tw-text-opacity: 1;
  color: rgb(165 174 154 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-75:hover {
  opacity: 0.75;
}

.focus-visible\:text-brand-sage-light:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(165 174 154 / var(--tw-text-opacity, 1));
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-brand-forest:focus-visible {
  outline-color: #1E351E;
}

.group[aria-expanded="true"] .group-aria-expanded\:block {
  display: block;
}

.group[aria-expanded="true"] .group-aria-expanded\:hidden {
  display: none;
}

@media not all and (min-width: 1280px) {
  .max-xl\:text-balance {
    text-wrap: balance;
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:object-\[0\%_50\%\] {
    -o-object-position: 0% 50%;
       object-position: 0% 50%;
  }

  .max-lg\:object-\[100\%_50\%\] {
    -o-object-position: 100% 50%;
       object-position: 100% 50%;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:max-w-\[70\%\] {
    max-width: 70%;
  }

  .max-sm\:text-size-m-h5 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-start-1 {
    grid-column-start: 1;
  }

  .sm\:col-start-2 {
    grid-column-start: 2;
  }

  .sm\:col-start-3 {
    grid-column-start: 3;
  }

  .sm\:row-start-1 {
    grid-row-start: 1;
  }

  .sm\:w-\[max\(100\%\2c 1090px\)\] {
    width: max(100%, 1090px);
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:object-\[0\%_0\%\] {
    -o-object-position: 0% 0%;
       object-position: 0% 0%;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .md\:flex {
    display: flex;
  }

  .md\:aspect-\[700\/637\] {
    aspect-ratio: 700/637;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:min-h-\[97px\] {
    min-height: 97px;
  }

  .md\:max-w-\[520px\] {
    max-width: 520px;
  }

  .md\:grid-flow-col {
    grid-auto-flow: column;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[140px_1fr\] {
    grid-template-columns: 140px 1fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:items-baseline {
    align-items: baseline;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .md\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .md\:gap-x-\[18px\] {
    -moz-column-gap: 18px;
         column-gap: 18px;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .md\:pb-\[240px\] {
    padding-bottom: 240px;
  }

  .md\:pl-\[39px\] {
    padding-left: 39px;
  }

  .md\:pr-0 {
    padding-right: 0px;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }

  .md\:pt-5 {
    padding-top: 1.25rem;
  }

  .md\:\[grid-template-columns\:repeat\(2\2c minmax\(0\2c 1fr\)\)\] {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .md\:\[grid-template-rows\:repeat\(var\(--gvs-rows\)\2c auto\)\] {
    grid-template-rows: repeat(var(--gvs-rows),auto);
  }
}

@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:bottom-6 {
    bottom: 1.5rem;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:right-6 {
    right: 1.5rem;
  }

  .lg\:top-\[8\.4\%\] {
    top: 8.4%;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-none {
    order: 0;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:col-start-3 {
    grid-column-start: 3;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:m-0 {
    margin: 0px;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:-mr-\[10px\] {
    margin-right: -10px;
  }

  .lg\:-mt-\[10px\] {
    margin-top: -10px;
  }

  .lg\:mb-20 {
    margin-bottom: 5rem;
  }

  .lg\:mb-9 {
    margin-bottom: 2.25rem;
  }

  .lg\:mb-\[101px\] {
    margin-bottom: 101px;
  }

  .lg\:mb-\[19px\] {
    margin-bottom: 19px;
  }

  .lg\:mb-\[33px\] {
    margin-bottom: 33px;
  }

  .lg\:mb-\[38px\] {
    margin-bottom: 38px;
  }

  .lg\:mb-\[5px\] {
    margin-bottom: 5px;
  }

  .lg\:mb-\[61px\] {
    margin-bottom: 61px;
  }

  .lg\:mb-\[68px\] {
    margin-bottom: 68px;
  }

  .lg\:mb-\[75px\] {
    margin-bottom: 75px;
  }

  .lg\:ml-\[10px\] {
    margin-left: 10px;
  }

  .lg\:ml-\[12px\] {
    margin-left: 12px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-1\.5 {
    margin-top: 0.375rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-7 {
    margin-top: 1.75rem;
  }

  .lg\:mt-\[106px\] {
    margin-top: 106px;
  }

  .lg\:mt-\[15px\] {
    margin-top: 15px;
  }

  .lg\:mt-\[18px\] {
    margin-top: 18px;
  }

  .lg\:mt-\[22px\] {
    margin-top: 22px;
  }

  .lg\:mt-\[30px\] {
    margin-top: 30px;
  }

  .lg\:mt-\[50px\] {
    margin-top: 50px;
  }

  .lg\:mt-\[55px\] {
    margin-top: 55px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-\[1400\/1668\] {
    aspect-ratio: 1400/1668;
  }

  .lg\:h-\[241px\] {
    height: 241px;
  }

  .lg\:h-\[78px\] {
    height: 78px;
  }

  .lg\:h-\[min\(914px\2c 65\.29vw\)\] {
    height: min(914px, 65.29vw);
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-\[100svh\] {
    min-height: 100svh;
  }

  .lg\:min-h-\[60\.25vw\] {
    min-height: 60.25vw;
  }

  .lg\:min-h-\[min\(1000px\2c 100svh\)\] {
    min-height: min(1000px, 100svh);
  }

  .lg\:min-h-\[min\(720px\2c 85svh\)\] {
    min-height: min(720px, 85svh);
  }

  .lg\:w-\[205px\] {
    width: 205px;
  }

  .lg\:w-\[34\%\] {
    width: 34%;
  }

  .lg\:w-\[82px\] {
    width: 82px;
  }

  .lg\:max-w-\[310px\] {
    max-width: 310px;
  }

  .lg\:max-w-\[330px\] {
    max-width: 330px;
  }

  .lg\:max-w-\[566px\] {
    max-width: 566px;
  }

  .lg\:max-w-\[850px\] {
    max-width: 850px;
  }

  .lg\:max-w-\[860px\] {
    max-width: 860px;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_205px_1fr\] {
    grid-template-columns: 1fr 205px 1fr;
  }

  .lg\:grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }

  .lg\:grid-cols-\[1fr_minmax\(0\2c 420px\)\] {
    grid-template-columns: 1fr minmax(0,420px);
  }

  .lg\:grid-cols-\[minmax\(0\2c 366px\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,366px) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 560px\)_1fr\] {
    grid-template-columns: minmax(0,560px) 1fr;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-x-0 {
    -moz-column-gap: 0px;
         column-gap: 0px;
  }

  .lg\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }

  .lg\:gap-x-\[29px\] {
    -moz-column-gap: 29px;
         column-gap: 29px;
  }

  .lg\:gap-y-\[113px\] {
    row-gap: 113px;
  }

  .lg\:gap-y-\[118px\] {
    row-gap: 118px;
  }

  .lg\:gap-y-\[123px\] {
    row-gap: 123px;
  }

  .lg\:justify-self-start {
    justify-self: start;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-\[33px\] {
    padding-left: 33px;
    padding-right: 33px;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-\[35px\] {
    padding-top: 35px;
    padding-bottom: 35px;
  }

  .lg\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pb-28 {
    padding-bottom: 7rem;
  }

  .lg\:pb-40 {
    padding-bottom: 10rem;
  }

  .lg\:pb-\[100px\] {
    padding-bottom: 100px;
  }

  .lg\:pb-\[121px\] {
    padding-bottom: 121px;
  }

  .lg\:pb-\[122px\] {
    padding-bottom: 122px;
  }

  .lg\:pb-\[136px\] {
    padding-bottom: 136px;
  }

  .lg\:pb-\[146px\] {
    padding-bottom: 146px;
  }

  .lg\:pb-\[18px\] {
    padding-bottom: 18px;
  }

  .lg\:pb-\[49px\] {
    padding-bottom: 49px;
  }

  .lg\:pb-\[69px\] {
    padding-bottom: 69px;
  }

  .lg\:pb-\[76px\] {
    padding-bottom: 76px;
  }

  .lg\:pb-\[98px\] {
    padding-bottom: 98px;
  }

  .lg\:pb-\[calc\(25px\+78px\)\] {
    padding-bottom: calc(25px + 78px);
  }

  .lg\:pb-\[clamp\(250px\2c 18\.7vw\2c 262px\)\] {
    padding-bottom: clamp(250px, 18.7vw, 262px);
  }

  .lg\:pl-6 {
    padding-left: 1.5rem;
  }

  .lg\:pl-\[54px\] {
    padding-left: 54px;
  }

  .lg\:pr-\[23px\] {
    padding-right: 23px;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }

  .lg\:pt-28 {
    padding-top: 7rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:pt-\[132px\] {
    padding-top: 132px;
  }

  .lg\:pt-\[160px\] {
    padding-top: 160px;
  }

  .lg\:pt-\[21px\] {
    padding-top: 21px;
  }

  .lg\:pt-\[53px\] {
    padding-top: 53px;
  }

  .lg\:pt-\[68px\] {
    padding-top: 68px;
  }

  .lg\:pt-\[69px\] {
    padding-top: 69px;
  }

  .lg\:pt-\[78px\] {
    padding-top: 78px;
  }

  .lg\:pt-\[88px\] {
    padding-top: 88px;
  }

  .lg\:pt-\[97px\] {
    padding-top: 97px;
  }

  .lg\:pt-\[calc\(25px\+78px\+38px\)\] {
    padding-top: calc(25px + 78px + 38px);
  }

  .lg\:pt-\[calc\(25px\+78px\+66px\)\] {
    padding-top: calc(25px + 78px + 66px);
  }

  .lg\:pt-\[calc\(25px\+78px\+87px\)\] {
    padding-top: calc(25px + 78px + 87px);
  }

  .lg\:pt-\[clamp\(120px\2c 14\.8vw\2c 207px\)\] {
    padding-top: clamp(120px, 14.8vw, 207px);
  }

  .lg\:\[--gvs-it-pt\:112px\] {
    --gvs-it-pt: 112px;
  }

  .lg\:\[--gvs-it-pull\:calc\(var\(--gvs-it-draw\)_-_max\(200px\2c _min\(var\(--gvs-it-draw\)_-_25\.71vw\2c _100svh_-_512px\)\)\)\] {
    --gvs-it-pull: calc(var(--gvs-it-draw) - max(200px, min(var(--gvs-it-draw) - 25.71vw, 100svh - 512px)));
  }

  .group:nth-child(even) .lg\:group-even\:pl-\[52px\] {
    padding-left: 52px;
  }
}

@media (min-width: 1280px) {
  .xl\:w-\[449px\] {
    width: 449px;
  }

  .xl\:max-w-\[492px\] {
    max-width: 492px;
  }

  .xl\:grid-cols-\[1fr_minmax\(0\2c 690px\)\] {
    grid-template-columns: 1fr minmax(0,690px);
  }

  .xl\:grid-cols-\[707fr_693fr\] {
    grid-template-columns: 707fr 693fr;
  }

  .xl\:grid-cols-\[minmax\(0\2c 690px\)_1fr\] {
    grid-template-columns: minmax(0,690px) 1fr;
  }

  .xl\:gap-12 {
    gap: 3rem;
  }

  .xl\:px-\[33px\] {
    padding-left: 33px;
    padding-right: 33px;
  }

  .xl\:pt-\[52px\] {
    padding-top: 52px;
  }

  .xl\:text-size-h3 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

@media not all and (min-width: 640px) {
  @media (orientation: portrait) {
    .max-sm\:portrait\:h-\[calc\(100\%\+100px\)\] {
      height: calc(100% + 100px);
    }
  }
}

@media (min-width: 1280px) {
  .xl\:\[\&\:nth-child\(2\)\]\:pl-\[47px\]:nth-child(2) {
    padding-left: 47px;
  }
}

@media (min-width: 1024px) {
  .lg\:\[\&_\.gvs-prose\>h3\+p\]\:mt-\[21px\] .gvs-prose>h3+p {
    margin-top: 21px;
  }
}

.\[\&_\.gvs-prose\>h3\:first-child\]\:mt-5 .gvs-prose>h3:first-child {
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  .lg\:\[\&_\.gvs-prose\>h3\:first-child\]\:mt-0 .gvs-prose>h3:first-child {
    margin-top: 0px;
  }
}