*, ::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:  ;
}

::-ms-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:  ;
}

::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.18 | 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 {
  -webkit-box-sizing: border-box;
          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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  -webkit-font-feature-settings: normal;
          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 */
  -webkit-font-feature-settings: normal;
          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 */
  -webkit-font-feature-settings: inherit;
          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::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

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

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

input::-ms-input-placeholder, textarea::-ms-input-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;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(226 222 209 / var(--tw-bg-opacity, 1));
  font-family: Aleo, Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.85;
  --tw-text-opacity: 1;
  color: rgb(58 55 51 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(143 94 65 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(143 94 65 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

:focus-visible {
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #8F5E41;
}

/* WYSIWYG output — ACF returns raw <p> tags with no classes */

/* full black (not the softer ink tone) so body copy stays readable on
     cream bands without the extra font weight; dark bands override this
     with their own text-chalk utility, which wins over this component. */

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

.rte > p + p {
  margin-top: 1.35em;
}

.rte a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rte strong {
  font-weight: 500;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* --- section wrapper ---------------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
  padding-top: clamp(76px, 10vw, 130px);
  padding-bottom: clamp(76px, 10vw, 130px);
  padding-left: clamp(22px, 5.2vw, 100px);
  padding-right: clamp(22px, 5.2vw, 100px);
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
}

/* --- type roles --------------------------------------------------------- */

.display {
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-weight: 300;
  letter-spacing: .005em;
  text-wrap: balance;
}

.eyebrow {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.75;
}

.measure {
  max-width: 38rem;
}

.sec-h {
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-weight: 300;
  letter-spacing: .005em;
  text-wrap: balance;
  margin-top: 1.3rem;
  margin-bottom: 1.8rem;
  font-size: clamp(1.8rem, 3.7vw, 2.75rem);
  line-height: 1.06;
}

.sign {
  margin-top: 2rem;
  display: block;
  height: auto;
  width: clamp(150px,20vw,230px);
}

/* --- framed image: mat + hairline rule ---------------------------------- */

.plate {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(201 184 166 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(217 212 198 / var(--tw-bg-opacity, 1));
  padding: 15px;
}

.plate img {
  width: 100%;
}

.cap {
  margin-top: 1rem;
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(107 100 89 / var(--tw-text-opacity, 1));
}

.cap--stone {
  --tw-text-opacity: 1;
  color: rgb(107 100 84 / var(--tw-text-opacity, 1));
}

.cap--light {
  color: rgb(226 222 209 / 0.6);
}

/* --- bordered note, used in service cards and on About ------------------ */

.callout {
  margin-top: 1.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(137 127 108 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 100 83 / var(--tw-bg-opacity, 1));
  padding: 1.4rem 1.7rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

.callout--chalk {
  --tw-border-opacity: 1;
  border-color: rgb(201 184 166 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(217 212 198 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(92 86 72 / var(--tw-text-opacity, 1));
}

/* --- links and buttons -------------------------------------------------- */

.link {
  margin-top: 2rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  border-color: currentColor;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  -webkit-transition-property: gap;
  transition-property: gap;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
}

.link:hover {
  gap: 1.25rem;
}

.link--light {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

.cta {
  margin-top: 2.5rem;
  display: inline-block;
  --tw-bg-opacity: 1;
  background-color: rgb(143 94 65 / var(--tw-bg-opacity, 1));
  padding-left: 42px;
  padding-right: 42px;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  -webkit-transition-property: background-color,-webkit-transform;
  transition-property: background-color,-webkit-transform;
  transition-property: background-color,transform;
  transition-property: background-color,transform,-webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
}

.cta:hover {
  --tw-translate-y: -0.125rem;
  -webkit-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));
          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));
  --tw-bg-opacity: 1;
  background-color: rgb(124 79 54 / var(--tw-bg-opacity, 1));
}

.cta--ghost {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(143 94 65 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(58 55 51 / var(--tw-text-opacity, 1));
}

.cta--ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(143 94 65 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

/* --- inline contact links in the closing section ------------------------ */

.direct-link {
  border-bottom-width: 1px;
  border-color: rgb(58 55 51 / 0.3);
  padding-bottom: 0.125rem;
  text-decoration-line: none;
  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}

.direct-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(58 55 51 / var(--tw-border-opacity, 1));
}

.band.bg-olive .direct-link,
  .band.bg-char  .direct-link {
  border-color: rgb(226 222 209 / 0.3);
}

.band.bg-olive .direct-link:hover,
  .band.bg-char  .direct-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(204 188 165 / var(--tw-border-opacity, 1));
}

/* --- two-column: text beside a framed image ----------------------------- */

.duo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .duo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: clamp(40px,6vw,88px);
  }

  .duo--flip {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

.duo__text {
  min-width: 0px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}

@media (min-width: 768px) {
  .duo__text {
    -ms-flex-preferred-size: 34rem;
        flex-basis: 34rem;
  }
}

.duo__fig {
  -webkit-box-ordinal-group: -9998;
      -ms-flex-order: -9999;
          order: -9999;
  width: 100%;
  max-width: 36rem;
  -ms-flex-item-align: center;
      align-self: center;
}

@media (min-width: 768px) {
  .duo__fig {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    width: auto;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }

  .duo--wide .duo__fig {
    -ms-flex-preferred-size: 36rem;
        flex-basis: 36rem;
  }
}

/* --- service card ------------------------------------------------------- */

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(137 127 108 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 100 83 / var(--tw-bg-opacity, 1));
  padding: clamp(28px,3vw,40px);
}

.card h3 {
  margin-bottom: 1rem;
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-size: 1.65rem;
  line-height: 1.15;
  font-weight: 300;
}

.card p {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.72;
  color: rgb(226 222 209 / .88);
}

.card .link {
  margin-top: auto;
  padding-top: 1.5rem;
}

.card--soon {
  opacity: 0.6;
}

/* --- service card colour variants: separate cards within a row.
     Cycles through the same mat/rule tokens used for framed images
     (.plate--stone/--olive/--char) so it stays inside the existing
     palette. Dark bands only — light bands already get their own
     chalk-mat override from service_cards.php. --------------------- */

/* on an olive band, the default card tone (mat-olive) reads too close
     to the bg-olive section behind it — swap it for clay so cards stand
     apart from the band. Scoped to .card, which only service_cards.php
     renders, so this doesn't touch olive anywhere else on the site. */

.band.bg-olive .card {
  --tw-border-opacity: 1;
  border-color: rgb(124 79 54 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(143 94 65 / var(--tw-bg-opacity, 1));
}

.band.bg-olive .card:nth-child(3n+2),
  .band.bg-char  .card:nth-child(3n+2) {
  --tw-border-opacity: 1;
  border-color: rgb(185 167 143 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(195 178 155 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.band.bg-olive .card:nth-child(3n+2) p,
  .band.bg-char  .card:nth-child(3n+2) p {
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}

.band.bg-olive .card:nth-child(3n+2) .link,
  .band.bg-char  .card:nth-child(3n+2) .link {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}

.band.bg-olive .card:nth-child(3n+2) .card__note,
  .band.bg-char  .card:nth-child(3n+2) .card__note {
  border-color: rgb(47 46 45 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}

.band.bg-olive .card:nth-child(3n+3),
  .band.bg-char  .card:nth-child(3n+3) {
  --tw-border-opacity: 1;
  border-color: rgb(94 89 81 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(58 55 51 / var(--tw-bg-opacity, 1));
}

/* --- banner ------------------------------------------------------------- */


  .band.hero  .direct-link {
  border-color: rgb(226 222 209 / 0.3);
}


  .band.hero  .direct-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(204 188 165 / var(--tw-border-opacity, 1));
}


  .band.hero  .card:nth-child(3n+2) {
  --tw-border-opacity: 1;
  border-color: rgb(185 167 143 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(195 178 155 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}


  .band.hero  .card:nth-child(3n+2) p {
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}


  .band.hero  .card:nth-child(3n+2) .link {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}


  .band.hero  .card:nth-child(3n+2) .card__note {
  border-color: rgb(47 46 45 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}


  .band.hero  .card:nth-child(3n+3) {
  --tw-border-opacity: 1;
  border-color: rgb(94 89 81 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(58 55 51 / var(--tw-bg-opacity, 1));
}

.hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(47 46 45 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

.hero--full  {
  min-height: min(100svh, 900px);
}

.hero--compact {
  min-height: min(62svh, 560px);
}

.hero__media {
  position: absolute;
  inset: 0px;
  --tw-scale-x: 1.12;
  --tw-scale-y: 1.12;
  -webkit-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));
          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));
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 2600ms;
          transition-duration: 2600ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
}


.interlude > .hero__media {
  top: -1px;
  bottom: -1px;
}

.hero__veil {
  position: absolute;
  inset: 0px;
}


.interlude > .hero__veil {
  top: -1px;
  bottom: -1px;
}

.hero__inner {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  padding-left: clamp(22px, 5.2vw, 100px);
  padding-right: clamp(22px, 5.2vw, 100px);
}

.is-loaded .hero__media {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  -webkit-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));
          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));
}

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

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.\!absolute {
  position: absolute !important;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.right-0 {
  right: 0px;
}

.right-\[10px\] {
  right: 10px;
}

.right-\[2\%\] {
  right: 2%;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-\[8\%\] {
  top: 8%;
}

.top-\[8px\] {
  top: 8px;
}

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

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

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

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

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

.z-\[5000\] {
  z-index: 5000;
}

.col-span-full {
  grid-column: 1 / -1;
}

.clear-both {
  clear: both;
}

.m-0 {
  margin: 0px;
}

.m-auto {
  margin: auto;
}

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

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

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

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

.mb-7 {
  margin-bottom: 1.75rem;
}

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

.mb-\[\.7rem\] {
  margin-bottom: .7rem;
}

.mb-\[\.8rem\] {
  margin-bottom: .8rem;
}

.mb-\[\.9rem\] {
  margin-bottom: .9rem;
}

.mb-\[1\.1rem\] {
  margin-bottom: 1.1rem;
}

.mb-\[1\.4rem\] {
  margin-bottom: 1.4rem;
}

.mb-\[10px\] {
  margin-bottom: 10px;
}

.mb-\[30px\] {
  margin-bottom: 30px;
}

.mb-\[40px\] {
  margin-bottom: 40px;
}

.mb-\[50px\] {
  margin-bottom: 50px;
}

.mb-\[clamp\(16px\2c 2\.6vh\2c 28px\)\] {
  margin-bottom: clamp(16px,2.6vh,28px);
}

.mb-\[clamp\(28px\2c 4vw\2c 44px\)\] {
  margin-bottom: clamp(28px,4vw,44px);
}

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

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

.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-\[1\.1rem\] {
  margin-top: 1.1rem;
}

.mt-\[1\.2rem\] {
  margin-top: 1.2rem;
}

.mt-\[1\.3rem\] {
  margin-top: 1.3rem;
}

.mt-\[clamp\(20px\2c 3vh\2c 32px\)\] {
  margin-top: clamp(20px,3vh,32px);
}

.mt-\[clamp\(24px\2c 3\.4vh\2c 40px\)\] {
  margin-top: clamp(24px,3.4vh,40px);
}

.mt-\[clamp\(30px\2c 4vw\2c 46px\)\] {
  margin-top: clamp(30px,4vw,46px);
}

.mt-\[clamp\(32px\2c 4vw\2c 46px\)\] {
  margin-top: clamp(32px,4vw,46px);
}

.mt-\[clamp\(34px\2c 4\.5vw\2c 52px\)\] {
  margin-top: clamp(34px,4.5vw,52px);
}

.mt-\[clamp\(48px\2c 7vw\2c 96px\)\] {
  margin-top: clamp(48px,7vw,96px);
}

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

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

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

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

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

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

.h-\[90vh\] {
  height: 90vh;
}

.h-\[calc\(var\(--vh\2c 1vh\)\*100-84px\)\] {
  height: calc(var(--vh,1vh) * 100 - 84px);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-16 {
  max-height: 4rem;
}

.min-h-96 {
  min-height: 24rem;
}

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

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

.min-h-full {
  min-height: 100%;
}

.w-32 {
  width: 8rem;
}

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

.w-\[min\(400px\2c 40vw\)\] {
  width: min(400px,40vw);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-36 {
  min-width: 9rem;
}

.max-w-20 {
  max-width: 5rem;
}

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

.max-w-\[19ch\] {
  max-width: 19ch;
}

.max-w-\[20ch\] {
  max-width: 20ch;
}

.max-w-\[20rem\] {
  max-width: 20rem;
}

.max-w-\[24rem\] {
  max-width: 24rem;
}

.max-w-\[26ch\] {
  max-width: 26ch;
}

.max-w-\[34rem\] {
  max-width: 34rem;
}

.max-w-\[40rem\] {
  max-width: 40rem;
}

.max-w-\[44rem\] {
  max-width: 44rem;
}

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

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

.max-w-inner {
  max-width: 1240px;
}

.max-w-measure {
  max-width: 38rem;
}

.max-w-prose {
  max-width: 52rem;
}

.grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.basis-full {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  -webkit-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));
          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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  -webkit-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));
          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));
}

.transform {
  -webkit-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));
          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));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

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

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

.items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.justify-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-7 {
  gap: 1.75rem;
}

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

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

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

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

.gap-\[clamp\(20px\2c 2\.4vw\2c 30px\)\] {
  gap: clamp(20px,2.4vw,30px);
}

.gap-\[clamp\(28px\2c 4vw\2c 72px\)\] {
  gap: clamp(28px,4vw,72px);
}

.gap-x-11 {
  -webkit-column-gap: 2.75rem;
     -moz-column-gap: 2.75rem;
          column-gap: 2.75rem;
}

.gap-x-\[26px\] {
  -webkit-column-gap: 26px;
     -moz-column-gap: 26px;
          column-gap: 26px;
}

.gap-x-\[clamp\(36px\2c 5vw\2c 64px\)\] {
  -webkit-column-gap: clamp(36px,5vw,64px);
     -moz-column-gap: clamp(36px,5vw,64px);
          column-gap: clamp(36px,5vw,64px);
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

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

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

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

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

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-chalk\/20 {
  border-color: rgb(226 222 209 / 0.2);
}

.border-chalk\/30 {
  border-color: rgb(226 222 209 / 0.3);
}

.border-chalk\/\[\.14\] {
  border-color: rgb(226 222 209 / .14);
}

.border-char\/20 {
  border-color: rgb(47 46 45 / 0.2);
}

.border-char\/25 {
  border-color: rgb(47 46 45 / 0.25);
}

.border-rule-chalk {
  --tw-border-opacity: 1;
  border-color: rgb(201 184 166 / var(--tw-border-opacity, 1));
}

.border-sky-500 {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}

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

.bg-chalk {
  --tw-bg-opacity: 1;
  background-color: rgb(226 222 209 / var(--tw-bg-opacity, 1));
}

.bg-char {
  --tw-bg-opacity: 1;
  background-color: rgb(47 46 45 / var(--tw-bg-opacity, 1));
}

.bg-mat-chalk {
  --tw-bg-opacity: 1;
  background-color: rgb(217 212 198 / var(--tw-bg-opacity, 1));
}

.bg-olive {
  --tw-bg-opacity: 1;
  background-color: rgb(93 86 70 / var(--tw-bg-opacity, 1));
}

.bg-stone {
  --tw-bg-opacity: 1;
  background-color: rgb(204 188 165 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

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

.bg-gradient-to-b {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tw-gradient-stops)));
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-chalk {
  --tw-gradient-from: #E2DED1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(226 222 209 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-char {
  --tw-gradient-from: #2F2E2D var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(47 46 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-olive {
  --tw-gradient-from: #5D5646 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(93 86 70 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-stone {
  --tw-gradient-from: #CCBCA5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(204 188 165 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-chalk {
  --tw-gradient-to: #E2DED1 var(--tw-gradient-to-position);
}

.to-char {
  --tw-gradient-to: #2F2E2D var(--tw-gradient-to-position);
}

.to-olive {
  --tw-gradient-to: #5D5646 var(--tw-gradient-to-position);
}

.to-stone {
  --tw-gradient-to: #CCBCA5 var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-bottom {
  background-position: bottom;
}

.bg-center {
  background-position: center;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

.bg-top {
  background-position: top;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

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

.p-12 {
  padding: 3rem;
}

.p-\[10px\] {
  padding: 10px;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-\[20px\] {
  padding-left: 20px;
  padding-right: 20px;
}

.px-gutter {
  padding-left: clamp(22px, 5.2vw, 100px);
  padding-right: clamp(22px, 5.2vw, 100px);
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

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

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

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

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

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

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

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

.pb-\[clamp\(34px\2c 4vw\2c 48px\)\] {
  padding-bottom: clamp(34px,4vw,48px);
}

.pb-\[clamp\(44px\2c 6vh\2c 72px\)\] {
  padding-bottom: clamp(44px,6vh,72px);
}

.pb-\[clamp\(52px\2c 7vh\2c 88px\)\] {
  padding-bottom: clamp(52px,7vh,88px);
}

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

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

.pt-\[1\.1rem\] {
  padding-top: 1.1rem;
}

.pt-\[30px\] {
  padding-top: 30px;
}

.pt-\[clamp\(130px\2c 16vh\2c 180px\)\] {
  padding-top: clamp(130px,16vh,180px);
}

.pt-\[clamp\(140px\2c 18vh\2c 200px\)\] {
  padding-top: clamp(140px,18vh,200px);
}

.pt-\[clamp\(48px\2c 6vw\2c 64px\)\] {
  padding-top: clamp(48px,6vw,64px);
}

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

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

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

.align-middle {
  vertical-align: middle;
}

.font-display {
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[\.75rem\] {
  font-size: .75rem;
}

.text-\[\.8125rem\] {
  font-size: .8125rem;
}

.text-\[\.9375rem\] {
  font-size: .9375rem;
}

.text-\[1\.0625rem\] {
  font-size: 1.0625rem;
}

.text-\[1\.5rem\] {
  font-size: 1.5rem;
}

.text-\[1\.6rem\] {
  font-size: 1.6rem;
}

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

.text-\[clamp\(1\.3rem\2c 2\.4vw\2c 1\.85rem\)\] {
  font-size: clamp(1.3rem,2.4vw,1.85rem);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-cap {
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.22em;
}

.text-eyebrow {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
}

.text-h-hero {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.06;
}

.text-h-page {
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  line-height: 1.04;
}

.text-h-sec {
  font-size: clamp(1.8rem, 3.7vw, 2.75rem);
  line-height: 1.06;
}

.text-h-sub {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

.text-italic {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.35;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-black {
  font-weight: 900;
}

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

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-\[1\.35\] {
  line-height: 1.35;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.65\] {
  line-height: 1.65;
}

.leading-\[1\.72\] {
  line-height: 1.72;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.leading-\[1\.9\] {
  line-height: 1.9;
}

.leading-\[2\.4\] {
  line-height: 2.4;
}

.leading-\[2\] {
  line-height: 2;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

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

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-chalk {
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

.text-chalk\/60 {
  color: rgb(226 222 209 / 0.6);
}

.text-chalk\/70 {
  color: rgb(226 222 209 / 0.7);
}

.text-chalk\/90 {
  color: rgb(226 222 209 / 0.9);
}

.text-chalk\/\[\.85\] {
  color: rgb(226 222 209 / .85);
}

.text-chalk\/\[\.86\] {
  color: rgb(226 222 209 / .86);
}

.text-chalk\/\[\.88\] {
  color: rgb(226 222 209 / .88);
}

.text-chalk\/\[\.8\] {
  color: rgb(226 222 209 / .8);
}

.text-clay {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

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

.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(107 100 89 / var(--tw-text-opacity, 1));
}

.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}

.text-stone {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

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

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

.opacity-100 {
  opacity: 1;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-\[\.07\] {
  opacity: .07;
}

.blur {
  --tw-blur: blur(8px);
  -webkit-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: 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%);
  -webkit-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: 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 {
  -webkit-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: 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 {
  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
}

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

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

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

.duration-300 {
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}

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

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

.\[backface-visibility\:hidden\] {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.\[transform\:translate3d\(0\)\] {
  -webkit-transform: translate3d(0);
          transform: translate3d(0);
}

/* ===========================================================================
   FONTS
   Files live in src/fonts/ and are copied to dist/fonts/ by the gulp "fonts"
   task (see gulpfile.js) — paths below are relative to dist/css/output.css.
   =========================================================================== */

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

  src: url('../fonts/soligant/Soligant.otf') format('opentype');

  font-weight: 300 400;

  font-style: normal;

  font-display: swap;

  /* Soligant only has ink for space, digits, @, and A-Z/a-z — every other
     mapped codepoint (all punctuation, symbols, accented letters) is an
     empty glyph, so the browser won't fall back on its own. Restricting
     the range to what's actually drawn forces fallback for the rest. */

  unicode-range: U+0020, U+0030-0039, U+0040-005A, U+0061-007A;
}

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

  src: url('../fonts/Aleo/static/Aleo-Light.ttf') format('truetype');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

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

  src: url('../fonts/Aleo/static/Aleo-Regular.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

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

  src: url('../fonts/Aleo/static/Aleo-Bold.ttf') format('truetype');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

/* ===========================================================================
   BASE
   =========================================================================== */

/* ===========================================================================
   COMPONENTS
   Anything that repeats across two or more section templates lives here, so
   the templates stay readable and a change lands in one place.
   =========================================================================== */

/* ===========================================================================
   MOTION
   Hand-written rather than utilities — these are stateful reveals driven by
   an IntersectionObserver, and expressing them as utilities makes them worse.
   =========================================================================== */

/* hairline draws left to right as its section enters view */

.hair {
  height: 1px;
  background: currentColor;
  opacity: .3;
  margin-bottom: 1.75rem;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 1400ms cubic-bezier(.16,.72,.24,1);
  transition: -webkit-transform 1400ms cubic-bezier(.16,.72,.24,1);
  transition: transform 1400ms cubic-bezier(.16,.72,.24,1);
  transition: transform 1400ms cubic-bezier(.16,.72,.24,1), -webkit-transform 1400ms cubic-bezier(.16,.72,.24,1);
}

.is-in .hair {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

/* content rises as its section enters view */

.rise {
  opacity: 0;
  -webkit-transform: translateY(1em);
          transform: translateY(1em);
  -webkit-transition: opacity 1200ms cubic-bezier(.16,.72,.24,1),
              -webkit-transform 1200ms cubic-bezier(.16,.72,.24,1);
  transition: opacity 1200ms cubic-bezier(.16,.72,.24,1),
              -webkit-transform 1200ms cubic-bezier(.16,.72,.24,1);
  transition: opacity 1200ms cubic-bezier(.16,.72,.24,1),
              transform 1200ms cubic-bezier(.16,.72,.24,1);
  transition: opacity 1200ms cubic-bezier(.16,.72,.24,1),
              transform 1200ms cubic-bezier(.16,.72,.24,1),
              -webkit-transform 1200ms cubic-bezier(.16,.72,.24,1);
}

.is-in .rise,
.is-loaded .hero .rise {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

/* plain fade, no movement — used for card rows so each card settles in
   without the travel-distance of .rise reading as a "slide" */

.fade {
  opacity: 0;
  -webkit-transition: opacity 1200ms cubic-bezier(.16,.72,.24,1);
  transition: opacity 1200ms cubic-bezier(.16,.72,.24,1);
}

.fade.is-in,
.is-loaded .hero .fade {
  opacity: 1;
}

/* stagger cards within a row so they don't all fade in at once */

.card:nth-child(1) {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.card:nth-child(2) {
  -webkit-transition-delay: 140ms;
          transition-delay: 140ms;
}

.card:nth-child(3) {
  -webkit-transition-delay: 280ms;
          transition-delay: 280ms;
}

.card:nth-child(4) {
  -webkit-transition-delay: 420ms;
          transition-delay: 420ms;
}

/* staggered banner entrance */

.d1 {
  -webkit-transition-delay: .50s;
          transition-delay: .50s;
}

.d2 {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}

.d3 {
  -webkit-transition-delay: 1.60s;
          transition-delay: 1.60s;
}

.d4 {
  -webkit-transition-delay: 2.10s;
          transition-delay: 2.10s;
}

/* banner tonal veils — gradients over the photograph so type stays legible.
   Not expressible as Tailwind utilities without arbitrary-value soup. */

.hero__veil--full {
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(rgba(35,32,29,.80)),  color-stop(20%, rgba(35,32,29,.34)),
    color-stop(44%, rgba(35,32,29,.46)), to(rgba(35,32,29,.90)));
  background: linear-gradient(180deg,
    rgba(35,32,29,.80) 0%,  rgba(35,32,29,.34) 20%,
    rgba(35,32,29,.46) 44%, rgba(35,32,29,.90) 100%);
}

.hero__veil--compact {
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(rgba(35,32,29,.82)),  color-stop(34%, rgba(35,32,29,.42)),
    color-stop(68%, rgba(35,32,29,.50)), to(rgba(35,32,29,.84)));
  background: linear-gradient(180deg,
    rgba(35,32,29,.82) 0%,  rgba(35,32,29,.42) 34%,
    rgba(35,32,29,.50) 68%, rgba(35,32,29,.84) 100%);
}

/* small-screen menu overlay */

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 24px;
    background: #2F2E2D;
    color: #E2DED1;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 380ms ease;
    transition: opacity 380ms ease;
  }

  .nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav a {
    font-size: .8125rem;
    letter-spacing: .2em;
  }

  .mast__toggle {
    display: block;
    position: relative;
    z-index: 2;
  }

  .mast.is-menu {
    color: #E2DED1;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .mast.is-menu .mast__logo .ink-logo {
    display: none;
  }

  .mast.is-menu .mast__logo .chalk-logo {
    display: block;
  }
}

@media (min-width: 901px) {
  .mast__toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }

  .rise {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  .fade {
    opacity: 1;
  }

  .hair {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }

  .hero__media {
    -webkit-transform: none;
            transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===========================================================================
   MASTHEAD
   Add this inside the existing @layer components { } block in input.css,
   replacing the shorter .mast rules that are already there.

   Behaviour: transparent chalk-on-photo over the banner, then solid chalk
   with ink text once scrolled past it. On small screens the nav becomes a
   full-screen charcoal overlay and the hamburger becomes a cross.
   =========================================================================== */

.mast {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 1000;
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
  -webkit-transition-property: background-color,color,padding,-webkit-box-shadow;
  transition-property: background-color,color,padding,-webkit-box-shadow;
  transition-property: background-color,color,padding,box-shadow;
  transition-property: background-color,color,padding,box-shadow,-webkit-box-shadow;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
  padding-block: 22px;
}

.mast.is-stuck {
  --tw-bg-opacity: 1;
  background-color: rgb(226 222 209 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(58 55 51 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 0 rgba(58,55,51,.14);
  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-block: 13px;
}

.mast__inner {
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1240px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.25rem;
  padding-left: clamp(22px, 5.2vw, 100px);
  padding-right: clamp(22px, 5.2vw, 100px);
}

/* --- logo: chalk over the banner, ink once stuck ------------------------ */

.mast__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mast__logo img {
  height: auto;
  width: clamp(140px,14vw,172px);
}

.mast__logo .logo-ink {
  display: none;
}

.mast.is-stuck .mast__logo .logo-chalk {
  display: none;
}

.mast.is-stuck .mast__logo .logo-ink {
  display: block;
}

/* menu open on mobile: force the chalk logo back, the overlay is dark */

.mast.is-menu .mast__logo .logo-ink {
  display: none;
}

.mast.is-menu .mast__logo .logo-chalk {
  display: block;
}

/* --- navigation --------------------------------------------------------- */

.nav > ul {
  margin: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(14px,2vw,30px);
  padding: 0px;
}

.nav li {
  position: relative;
}

.nav a {
  display: block;
  border-bottom-width: 1px;
  border-color: transparent;
  padding-bottom: 3px;
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration-line: none;
  opacity: 0.9;
  -webkit-transition-property: border-color,opacity;
  transition-property: border-color,opacity;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}

.nav a:hover {
  border-color: currentColor;
  opacity: 1;
}

.nav .current-menu-item > a,
  .nav .current_page_item > a {
  border-color: currentColor;
  opacity: 1;
}

/* last item reads as the call to action */

.nav > ul > li:last-child > a {
  border-color: currentColor;
  opacity: 1;
}

/* --- submenu ------------------------------------------------------------ */

.nav .sub-wrap {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  min-width: 15rem;
  --tw-translate-y: 0.25rem;
  -webkit-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));
          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));
  padding-top: 1rem;
  opacity: 0;
  -webkit-transition-property: opacity,visibility,-webkit-transform;
  transition-property: opacity,visibility,-webkit-transform;
  transition-property: opacity,visibility,transform;
  transition-property: opacity,visibility,transform,-webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
}


.interlude > .nav .sub-wrap {
  top: -1px;
  bottom: -1px;
}

.nav li:hover > .sub-wrap,
  .nav li:focus-within > .sub-wrap {
  visibility: visible;
  --tw-translate-y: 0px;
  -webkit-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));
          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));
  opacity: 1;
}


  .band.nav .sub-menu  .direct-link {
  border-color: rgb(226 222 209 / 0.3);
}


  .band.nav .sub-menu  .direct-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(204 188 165 / var(--tw-border-opacity, 1));
}


  .band.nav .sub-menu  .card:nth-child(3n+2) {
  --tw-border-opacity: 1;
  border-color: rgb(185 167 143 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(195 178 155 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}


  .band.nav .sub-menu  .card:nth-child(3n+2) p {
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}


  .band.nav .sub-menu  .card:nth-child(3n+2) .link {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}


  .band.nav .sub-menu  .card:nth-child(3n+2) .card__note {
  border-color: rgb(47 46 45 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(47 46 45 / var(--tw-text-opacity, 1));
}


  .band.nav .sub-menu  .card:nth-child(3n+3) {
  --tw-border-opacity: 1;
  border-color: rgb(94 89 81 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(58 55 51 / var(--tw-bg-opacity, 1));
}

.nav .sub-menu {
  margin: 0px;
  list-style-type: none;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(94 89 81 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(47 46 45 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 30px rgba(35,32,29,.18);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.nav .sub-menu li + li {
  margin-top: 0.75rem;
}

.nav .sub-menu a {
  opacity: 0.8;
}

.nav .sub-menu a:hover {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
  opacity: 1;
}

/* --- hamburger ---------------------------------------------------------- */

.mast__toggle {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1.25rem;
  width: 1.75rem;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}

@media (min-width: 1024px) {
  .mast__toggle {
    display: none;
  }
}

.mast__toggle .line {
  display: block;
  height: 1px;
  width: 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
  background-color: currentColor;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: cubic-bezier(.16,.72,.24,1);
          transition-timing-function: cubic-bezier(.16,.72,.24,1);
}

.mast.is-menu .line-top {
  --tw-translate-y: 9px;
  --tw-rotate: 45deg;
  -webkit-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));
          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));
}

.mast.is-menu .line-center {
  opacity: 0;
}

.mast.is-menu .line-bottom {
  --tw-translate-y: -9px;
  --tw-rotate: -45deg;
  -webkit-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));
          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));
}

/* --- 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;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1100;
  --tw-bg-opacity: 1;
  background-color: rgb(226 222 209 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(58 55 51 / var(--tw-text-opacity, 1));
}

/* ===========================================================================
   MOBILE MENU OVERLAY
   Outside @layer components — plain CSS, because it is a stateful overlay
   rather than a style utility.
   =========================================================================== */

@media (max-width: 1023px) {
  .nav {
    position: fixed;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: #2F2E2D;
    color: #E2DED1;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 380ms ease;
    transition: opacity 380ms ease;
  }

  .nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 22px;
    padding: 0 24px;
  }

  .nav a {
    font-size: .8125rem;
    letter-spacing: .2em;
  }

  /* submenus sit open beneath their parent rather than hovering */

  .nav .sub-wrap {
    position: static;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
    padding-top: 14px;
    min-width: 0;
  }

  .nav .sub-menu {
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0;
    text-align: center;
  }

  .nav .sub-menu li + li {
    margin-top: 12px;
  }

  .nav .sub-menu a {
    opacity: .65;
  }

  /* the masthead stays transparent while the overlay is open */

  .mast.is-menu {
    background: transparent;
    color: #E2DED1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

/* ===========================================================================
   FAQ ACCORDION
   Add the @layer components block inside the existing
   @layer components { } in input.css. The plain CSS below it goes outside,
   at the bottom of the file with the other motion rules.
   =========================================================================== */

/* ---- inside @layer components { } ---------------------------------------- */

.faq__item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.faq__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  list-style-type: none;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-size: clamp(1.125rem,1.9vw,1.375rem);
  font-weight: 300;
  line-height: 1.35;
  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}

.faq__question:hover {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}

.band--olive .faq__question:hover,
  .band--char  .faq__question:hover {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

.faq__answer {
  max-width: 38rem;
  padding-bottom: 1.5rem;
  padding-right: 1.5rem;
}

.faq__answer p {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.8;
}

.faq__answer p + p {
  margin-top: 1.1em;
}

.faq__answer strong {
  font-weight: 500;
}

/* the marker: a clay cross that becomes a minus when open */

.faq__marker {
  position: relative;
  margin-top: 0.5rem;
  height: 1rem;
  width: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* ---- outside the layer, at the bottom of input.css ----------------------- */

/* strip the native disclosure triangle */

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::marker {
  content: "";
}

/* marker strokes */

.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #8F5E41;
  /* clay */
  -webkit-transition: -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: transform 300ms cubic-bezier(.16,.72,.24,1), -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
}

.faq__marker::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

details[open] .faq__marker::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/* on dark bands the marker follows the stone tint */

.band--olive .faq__marker::before,
.band--olive .faq__marker::after,
.band--char  .faq__marker::before,
.band--char  .faq__marker::after {
  background: #CCBCA5;
}

/* answers unfold rather than snapping open */

.faq__answer {
  -webkit-animation: faq-unfold 420ms cubic-bezier(.16,.72,.24,1);
          animation: faq-unfold 420ms cubic-bezier(.16,.72,.24,1);
}

@-webkit-keyframes faq-unfold {
  from {
    opacity: 0;
    -webkit-transform: translateY(-.4em);
            transform: translateY(-.4em);
  }

  to   {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes faq-unfold {
  from {
    opacity: 0;
    -webkit-transform: translateY(-.4em);
            transform: translateY(-.4em);
  }

  to   {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer {
    -webkit-animation: none;
            animation: none;
  }

  .faq__marker::before,
  .faq__marker::after {
    -webkit-transition: none;
    transition: none;
  }
}

/* ===========================================================================
   CONTACT FORM 7
   Scoped to .contact-form so it can't leak into other plugin output.
   All of this goes at the bottom of input.css, outside @layer components —
   CF7 ships its own stylesheet and these need to win without !important
   soup, which plain CSS after the layers handles cleanly.

   If CF7's own stylesheet is fighting you, disable it in functions.php:
     add_filter( 'wpcf7_load_css', '__return_false' );
   =========================================================================== */

.contact-form {
  /* the form sits in a mat and hairline frame, like the image plates */
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #C9B8A6;
  /* rule-chalk */
  background: #D9D4C6;
  /* mat-chalk  */
}

.band--stone .contact-form {
  border-color: #B9A78F;
  background: #C3B29B;
}

.band--olive .contact-form {
  border-color: #897F6C;
  background: #6B6453;
  color: #E2DED1;
}

.band--char  .contact-form {
  border-color: #5E5951;
  background: #3A3733;
  color: #E2DED1;
}

/* --- labels --------------------------------------------------------------- */

.contact-form label,
.contact-form .label {
  display: block;
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6B6459;
  margin-bottom: .55rem;
}

.band--olive .contact-form label,
.band--char  .contact-form label {
  color: #CCBCA5;
}

/* --- fields --------------------------------------------------------------- */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: 'Aleo', Georgia, serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: #3A3733;
  background: #E2DED1;
  border: 1px solid #C9B8A6;
  border-radius: 0;
  padding: 14px 16px;
  -webkit-transition: border-color 300ms cubic-bezier(.16,.72,.24,1),
              -webkit-box-shadow 300ms cubic-bezier(.16,.72,.24,1);
  transition: border-color 300ms cubic-bezier(.16,.72,.24,1),
              -webkit-box-shadow 300ms cubic-bezier(.16,.72,.24,1);
  transition: border-color 300ms cubic-bezier(.16,.72,.24,1),
              box-shadow 300ms cubic-bezier(.16,.72,.24,1);
  transition: border-color 300ms cubic-bezier(.16,.72,.24,1),
              box-shadow 300ms cubic-bezier(.16,.72,.24,1),
              -webkit-box-shadow 300ms cubic-bezier(.16,.72,.24,1);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input::-webkit-input-placeholder, .contact-form textarea::-webkit-input-placeholder {
  color: #8B8478;
  opacity: 1;
}

.contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder {
  color: #8B8478;
  opacity: 1;
}

.contact-form input:-ms-input-placeholder, .contact-form textarea:-ms-input-placeholder {
  color: #8B8478;
  opacity: 1;
}

.contact-form input::-ms-input-placeholder, .contact-form textarea::-ms-input-placeholder {
  color: #8B8478;
  opacity: 1;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #8B8478;
  opacity: 1;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #8F5E41;
  /* clay */
  -webkit-box-shadow: 0 0 0 1px #8F5E41;
          box-shadow: 0 0 0 1px #8F5E41;
}

.band--olive .contact-form input,
.band--olive .contact-form select,
.band--olive .contact-form textarea,
.band--char  .contact-form input,
.band--char  .contact-form select,
.band--char  .contact-form textarea {
  color: #E2DED1;
  background: rgba(226, 222, 209, .06);
  border-color: rgba(226, 222, 209, .28);
}

.band--olive .contact-form input:focus,
.band--olive .contact-form textarea:focus,
.band--char  .contact-form input:focus,
.band--char  .contact-form textarea:focus {
  border-color: #CCBCA5;
  -webkit-box-shadow: 0 0 0 1px #CCBCA5;
          box-shadow: 0 0 0 1px #CCBCA5;
}

/* spacing between fields — CF7 wraps each in a <p> by default */

.contact-form form > p {
  margin: 0 0 1.4rem;
}

.contact-form form > p:last-of-type {
  margin-bottom: 0;
}

/* --- consent checkbox ----------------------------------------------------- */

.contact-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.contact-form .wpcf7-acceptance label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: #5C5648;
  margin-bottom: 0;
}

.band--olive .contact-form .wpcf7-acceptance label,
.band--char  .contact-form .wpcf7-acceptance label {
  color: rgba(226,222,209,.8);
}

.contact-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 2px;
  accent-color: #8F5E41;
}

/* --- submit --------------------------------------------------------------- */

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
  display: inline-block;
  width: auto;
  font-family: 'Aleo', Georgia, serif;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #E2DED1;
  background: #8F5E41;
  border: 0;
  border-radius: 0;
  padding: 20px 42px;
  margin-top: .6rem;
  cursor: pointer;
  -webkit-transition: background-color 300ms ease, -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: background-color 300ms ease, -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: background-color 300ms ease, transform 300ms cubic-bezier(.16,.72,.24,1);
  transition: background-color 300ms ease, transform 300ms cubic-bezier(.16,.72,.24,1), -webkit-transform 300ms cubic-bezier(.16,.72,.24,1);
}

.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
  background: #7C4F36;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.contact-form input[type="submit"]:disabled {
  opacity: .5;
  cursor: wait;
  -webkit-transform: none;
          transform: none;
}

/* --- CF7 messages --------------------------------------------------------- */

.contact-form .wpcf7-response-output {
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid #C9B8A6;
  background: rgba(143, 94, 65, .06);
  font-size: .9375rem;
  line-height: 1.6;
  border-radius: 0;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  color: #8F5E41;
  letter-spacing: 0;
  text-transform: none;
}

.band--olive .contact-form .wpcf7-not-valid-tip,
.band--char  .contact-form .wpcf7-not-valid-tip {
  color: #CCBCA5;
}

.contact-form .wpcf7-not-valid {
  border-color: #8F5E41;
}

.contact-form .wpcf7-spinner {
  margin: 0 0 0 14px;
}

/* --- layout --------------------------------------------------------------- */

@media (min-width: 768px) {
  /* the form column is wider than an image plate would be */

  .contact-form {
    -ms-flex-preferred-size: 30rem;
        flex-basis: 30rem;
  }
}

@media (max-width: 767px) {
  /* keep the form below the copy on small screens, not above it */

  .contact-form {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form textarea,
  .contact-form input[type="submit"] {
    -webkit-transition: none;
    transition: none;
  }
}

/* --- success message, shown as a centred popup ----------------------------
   CF7's own success text is hidden (see wpcf7mailsent handler in scripts.js)
   and re-shown here instead, so it can't be missed below the fold. */

.form-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  /* above the fixed masthead (1000) and its focus states (1100) */
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 24px;
}

.form-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.form-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(58, 55, 51, .6);
  /* ink */
}

.form-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid #C9B8A6;
  /* rule-chalk */
  background: #D9D4C6;
  /* mat-chalk  */
  text-align: center;
  -webkit-animation: form-modal-in 320ms cubic-bezier(.16,.72,.24,1);
          animation: form-modal-in 320ms cubic-bezier(.16,.72,.24,1);
}

.form-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #6B6459;
  /* ink-soft */
  cursor: pointer;
}

.form-modal__close:hover {
  color: #3A3733;
}

.form-modal__message {
  margin: 0;
  font-family: 'Aleo', Georgia, serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #3A3733;
  /* ink */
}

.form-modal__sign {
  display: block;
  width: clamp(120px, 30%, 170px);
  height: auto;
  margin: 20px auto 0;
}

@-webkit-keyframes form-modal-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(8px) scale(.98);
            transform: translateY(8px) scale(.98);
  }

  to   {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes form-modal-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(8px) scale(.98);
            transform: translateY(8px) scale(.98);
  }

  to   {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-modal__box {
    -webkit-animation: none;
            animation: none;
  }
}

/* ===========================================================================
   RICH TEXT
   Restores typography inside WYSIWYG output, which Tailwind's Preflight
   strips. Scoped to .rte so it can't affect anything else.
   Placed at the end of the file so it beats the base layer without
   depending on layer order.
   =========================================================================== */

.rte > *:first-child {
  margin-top: 0px;
}

.rte > *:last-child {
  margin-bottom: 0px;
}

.rte h2 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-size: clamp(1.5rem,2.6vw,2rem);
  font-weight: 300;
  line-height: 1.25;
}

.rte h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: Soligant, Cormorant Garamond, Georgia, serif;
  font-size: clamp(1.25rem,2.1vw,1.6rem);
  font-weight: 300;
  line-height: 1.25;
}

.rte h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.rte p {
  line-height: 1.85;
}

.rte p + p {
  margin-top: 1.35em;
}

.rte ul,
.rte ol {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  list-style-type: none;
  padding-left: 0px;
}

.rte li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  line-height: 1.65;
}

.rte ul li::before {
  content: "—";
  position: absolute;
  left: 0px;
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}


.interlude > .rte ul li::before {
  top: -1px;
  bottom: -1px;
}

.rte ol       {
  counter-reset: rte-list;
}

.rte ol li    {
  counter-increment: rte-list;
}

.rte ol li::before {
  content: counter(rte-list) ".";
  position: absolute;
  left: 0px;
  font-size: .875em;
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
}


.interlude > .rte ol li::before {
  top: -1px;
  bottom: -1px;
}

.rte strong {
  font-weight: 500;
}

.rte em {
  font-style: italic;
}

.rte a {
  --tw-text-opacity: 1;
  color: rgb(143 94 65 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}

.rte a:hover {
  --tw-text-opacity: 1;
  color: rgb(124 79 54 / var(--tw-text-opacity, 1));
}

.rte blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-left-width: 1px;
  padding-left: 1.5rem;
  font-style: italic;
  border-color: #C9B8A6;
}

.rte hr {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  height: 1px;
  border-width: 0px;
  background: #C9B8A6;
}

/* on the dark bands, links and list markers follow the stone tint */

.band--olive .rte a,
.band--char  .rte a {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

.band--olive .rte a:hover,
.band--char  .rte a:hover {
  --tw-text-opacity: 1;
  color: rgb(226 222 209 / var(--tw-text-opacity, 1));
}

.band--olive .rte ul li::before,
.band--olive .rte ol li::before,
.band--char  .rte ul li::before,
.band--char  .rte ol li::before {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

/* ===========================================================================
   INTERLUDE
   Add the @layer components block inside the existing
   @layer components { } in input.css. The plain CSS below it goes at the
   bottom of the file, outside the layers, with the other motion rules.
   =========================================================================== */

/* ---- inside @layer components { } ---------------------------------------- */

.interlude {
  position: relative;
  overflow: hidden;
}

/* ---- outside the layers, at the bottom of input.css ---------------------- */

/*  The gradient handles the two ends. The mask softens the photograph itself
    so its edges dissolve rather than stopping — this is what stops a faint
    horizontal line appearing where the image begins and ends.              */

.interlude__media {
  -webkit-mask-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(transparent),
    color-stop(28%, rgba(0,0,0,1)),
    color-stop(72%, rgba(0,0,0,1)),
    to(transparent)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,1) 72%,
    transparent 100%
  );
  mask-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(transparent),
    color-stop(28%, rgba(0,0,0,1)),
    color-stop(72%, rgba(0,0,0,1)),
    to(transparent)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,1) 72%,
    transparent 100%
  );
}

/*  Safari on iOS occasionally shows a hairline where two full-bleed
    backgrounds meet. A sub-pixel outset removes it.                        */

.interlude__media,
.interlude > .absolute {
  top: -1px;
  bottom: -1px;
}

/*  A slow drift as the section passes through the viewport. Very small —
    it should read as the page breathing, not as a parallax effect.         */

.interlude__media {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
  -webkit-transition: -webkit-transform 2400ms cubic-bezier(.16,.72,.24,1);
  transition: -webkit-transform 2400ms cubic-bezier(.16,.72,.24,1);
  transition: transform 2400ms cubic-bezier(.16,.72,.24,1);
  transition: transform 2400ms cubic-bezier(.16,.72,.24,1), -webkit-transform 2400ms cubic-bezier(.16,.72,.24,1);
}

.is-in .interlude__media {
  -webkit-transform: scale(1);
          transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .interlude__media {
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
    transition: none;
  }
}

/*  An interlude should read as continuous with the bands either side of it,
    not as a gap between them. Halve the shared edge's vertical padding on
    whichever band sits immediately before or after one, so the imagery can
    bleed nearer the text instead of leaving a big band of empty space.     */

.interlude + .band      {
  padding-top: calc(clamp(76px, 10vw, 130px) / 2);
}

.band:has(+ .interlude) {
  padding-bottom: calc(clamp(76px, 10vw, 130px) / 2);
}

.hover\:border-stone:hover {
  --tw-border-opacity: 1;
  border-color: rgb(204 188 165 / var(--tw-border-opacity, 1));
}

.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.hover\:text-stone:hover {
  --tw-text-opacity: 1;
  color: rgb(204 188 165 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

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

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

@media not all and (min-width: 768px) {
  .max-md\:bottom-\[3\%\] {
    bottom: 3%;
  }

  .max-md\:top-auto {
    top: auto;
  }

  .max-md\:w-\[60vw\] {
    width: 60vw;
  }

  .max-md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .max-md\:opacity-5 {
    opacity: 0.05;
  }
}

@media (min-width: 640px) {
  .sm\:flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

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

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

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

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:basis-\[15rem\] {
    -ms-flex-preferred-size: 15rem;
        flex-basis: 15rem;
  }

  .md\:basis-\[20rem\] {
    -ms-flex-preferred-size: 20rem;
        flex-basis: 20rem;
  }

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

  .md\:text-right {
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .lg\:max-w-\[450px\] {
    max-width: 450px;
  }

  .lg\:max-w-\[50\%\] {
    max-width: 50%;
  }

  .lg\:grid-flow-col {
    grid-auto-flow: column;
  }

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

  .lg\:grid-cols-\[3fr_2fr\] {
    grid-template-columns: 3fr 2fr;
  }

  .lg\:gap-\[100px\] {
    gap: 100px;
  }
}