/*
 * Thompson Excavating: css/site.css
 *
 * Compiled once from the live React site's Tailwind setup (same colours, fonts, spacing), so
 * the class names on the pages (bg-ink, text-accent, font-display, ...) do the styling. Only
 * classes the pages used when this file was made exist below: a NEW Tailwind class added to a
 * page does nothing unless a rule for it is added here too. The site's own rules (fonts,
 * scrollbar, header, menus, footer credit) are in the first part, in plain CSS.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

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

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

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

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

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

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

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

.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}

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

.bottom-0 {
  bottom: 0px;
}

.bottom-3 {
  bottom: 0.75rem;
}

.left-0 {
  left: 0px;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.top-4 {
  top: 1rem;
}

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

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

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

.m-0 {
  margin: 0px;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

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

.-mr-2 {
  margin-right: -0.5rem;
}

.-mt-0\.5 {
  margin-top: -0.125rem;
}

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

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

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

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

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

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

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

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

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

.ml-3 {
  margin-left: 0.75rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

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

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

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

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

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

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

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

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

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

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

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

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

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-7 {
  height: 1.75rem;
}

.h-9 {
  height: 2.25rem;
}

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

.h-full {
  height: 100%;
}

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

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-2 {
  width: 0.5rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-7 {
  width: 1.75rem;
}

.w-9 {
  width: 2.25rem;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

.max-w-5xl {
  max-width: 64rem;
}

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

.max-w-7xl {
  max-width: 80rem;
}

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

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

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

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

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

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

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

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

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

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

.translate-y-0 {
  --tw-translate-y: 0px;
  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-\[120\%\] {
  --tw-translate-y: 120%;
  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));
}

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

.resize-y {
  resize: vertical;
}

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

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

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

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

.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}

.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}

.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

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

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

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

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

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

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

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

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

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

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

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

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

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

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

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-bone\/15 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(230 220 196 / 0.15);
}

.divide-line\/15 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(29 28 26 / 0.15);
}

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

.border {
  border-width: 1px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

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

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

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

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

.border-accent\/50 {
  border-color: rgb(244 180 0 / 0.5);
}

.border-bone\/10 {
  border-color: rgb(230 220 196 / 0.1);
}

.border-bone\/15 {
  border-color: rgb(230 220 196 / 0.15);
}

.border-bone\/20 {
  border-color: rgb(230 220 196 / 0.2);
}

.border-bone\/40 {
  border-color: rgb(230 220 196 / 0.4);
}

.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(19 19 18 / var(--tw-border-opacity, 1));
}

.border-ink\/25 {
  border-color: rgb(19 19 18 / 0.25);
}

.border-ink\/30 {
  border-color: rgb(19 19 18 / 0.3);
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(29 28 26 / var(--tw-border-opacity, 1));
}

.border-line\/15 {
  border-color: rgb(29 28 26 / 0.15);
}

.border-line\/20 {
  border-color: rgb(29 28 26 / 0.2);
}

.border-line\/30 {
  border-color: rgb(29 28 26 / 0.3);
}

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

.bg-accent\/20 {
  background-color: rgb(244 180 0 / 0.2);
}

.bg-bone {
  --tw-bg-opacity: 1;
  background-color: rgb(230 220 196 / var(--tw-bg-opacity, 1));
}

.bg-bone\/15 {
  background-color: rgb(230 220 196 / 0.15);
}

.bg-boneDark {
  --tw-bg-opacity: 1;
  background-color: rgb(216 203 168 / var(--tw-bg-opacity, 1));
}

.bg-concrete {
  --tw-bg-opacity: 1;
  background-color: rgb(110 105 98 / var(--tw-bg-opacity, 1));
}

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

.bg-ink\/5 {
  background-color: rgb(19 19 18 / 0.05);
}

.bg-inkSoft {
  --tw-bg-opacity: 1;
  background-color: rgb(42 40 37 / var(--tw-bg-opacity, 1));
}

.bg-line\/15 {
  background-color: rgb(29 28 26 / 0.15);
}

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

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-ink\/70 {
  --tw-gradient-from: rgb(19 19 18 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(19 19 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-ink\/85 {
  --tw-gradient-from: rgb(19 19 18 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(19 19 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-ink\/10 {
  --tw-gradient-to: rgb(19 19 18 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(19 19 18 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-ink\/40 {
  --tw-gradient-to: rgb(19 19 18 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(19 19 18 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-ink\/80 {
  --tw-gradient-to: rgb(19 19 18 / 0.8) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

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

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

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

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

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

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

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

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

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

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

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

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

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

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

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

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

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

.pb-24 {
  padding-bottom: 6rem;
}

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

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

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-12 {
  padding-right: 3rem;
}

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

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

.pt-10 {
  padding-top: 2.5rem;
}

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

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

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

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

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

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

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

.font-body {
  font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
}

.font-display {
  font-family: Oswald, "Oswald Fallback", system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

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

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

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

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

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

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

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

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

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

.text-\[3\.4rem\] {
  font-size: 3.4rem;
}

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

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

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

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

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

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

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

.uppercase {
  text-transform: uppercase;
}

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

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[0\.85\] {
  line-height: 0.85;
}

.leading-\[1\.02\] {
  line-height: 1.02;
}

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

.leading-relaxed {
  line-height: 1.625;
}

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

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

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-widest2 {
  letter-spacing: 0.18em;
}

.tracking-widest3 {
  letter-spacing: 0.28em;
}

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

.text-bone {
  --tw-text-opacity: 1;
  color: rgb(230 220 196 / var(--tw-text-opacity, 1));
}

.text-bone\/40 {
  color: rgb(230 220 196 / 0.4);
}

.text-bone\/65 {
  color: rgb(230 220 196 / 0.65);
}

.text-bone\/70 {
  color: rgb(230 220 196 / 0.7);
}

.text-bone\/75 {
  color: rgb(230 220 196 / 0.75);
}

.text-bone\/80 {
  color: rgb(230 220 196 / 0.8);
}

.text-bone\/85 {
  color: rgb(230 220 196 / 0.85);
}

.text-bone\/90 {
  color: rgb(230 220 196 / 0.9);
}

.text-concrete {
  --tw-text-opacity: 1;
  color: rgb(110 105 98 / var(--tw-text-opacity, 1));
}

.text-earth {
  --tw-text-opacity: 1;
  color: rgb(138 58 31 / var(--tw-text-opacity, 1));
}

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

.text-ink\/30 {
  color: rgb(19 19 18 / 0.3);
}

.text-inkSoft {
  --tw-text-opacity: 1;
  color: rgb(42 40 37 / var(--tw-text-opacity, 1));
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

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

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

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

/* ---------- Fonts: self-hosted (Oswald for headings, IBM Plex Sans for text) ---------- */

@font-face {
  font-family: "Oswald";

  font-style: normal;

  font-weight: 200 700;

  font-display: swap;

  src: url(../fonts/oswald-latin.woff2) format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";

  font-style: normal;

  font-weight: 100 700;

  font-stretch: 100%;

  font-display: swap;

  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stand-ins sized to match the two fonts, shown for the moment before they arrive, so the
   text already takes the same room and nothing jumps when the real fonts swap in. */

@font-face {
  font-family: "Oswald Fallback";

  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");

  font-weight: 100 450;

  size-adjust: 76.3%;

  ascent-override: 156.3%;

  descent-override: 37.9%;

  line-gap-override: 0%;

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald Fallback";

  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");

  font-weight: 451 900;

  size-adjust: 72.7%;

  ascent-override: 164.1%;

  descent-override: 39.8%;

  line-gap-override: 0%;

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Fallback";

  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");

  size-adjust: 100.9%;

  ascent-override: 101.6%;

  descent-override: 27.3%;

  line-gap-override: 0%;

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- From the React site's index.css ---------- */

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #131312 #e6dcc4;
}

/* WebKit scrollbar: square, bone track, ink thumb, accent on hover */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #e6dcc4;
  border-left: 1px solid #1d1c1a;
}

::-webkit-scrollbar-thumb {
  background: #131312;
  border: 2px solid #e6dcc4;
}

::-webkit-scrollbar-thumb:hover {
  background: #f4b400;
}

::-webkit-scrollbar-thumb:active {
  background: #cc9400;
}

::-webkit-scrollbar-corner {
  background: #e6dcc4;
}

body {
  background-color: #e6dcc4;
  color: #131312;
  font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Topographic contour line motif: subtle background SVG */

.topo-bg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23131312' stroke-width='1' opacity='0.06'><path d='M-20 90 Q120 60 260 110 T560 90 T820 130'/><path d='M-20 150 Q140 120 280 170 T580 150 T820 190'/><path d='M-20 220 Q160 180 300 240 T600 220 T820 260'/><path d='M-20 300 Q180 250 320 320 T620 300 T820 340'/><path d='M-20 380 Q200 330 340 400 T640 380 T820 420'/><path d='M-20 460 Q220 410 360 480 T660 460 T820 500'/><path d='M-20 540 Q240 490 380 560 T680 540 T820 580'/></g></svg>");
  background-repeat: repeat;
  background-size: 600px 600px;
}

.topo-bg-dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23e6dcc4' stroke-width='1' opacity='0.05'><path d='M-20 90 Q120 60 260 110 T560 90 T820 130'/><path d='M-20 150 Q140 120 280 170 T580 150 T820 190'/><path d='M-20 220 Q160 180 300 240 T600 220 T820 260'/><path d='M-20 300 Q180 250 320 320 T620 300 T820 340'/><path d='M-20 380 Q200 330 340 400 T640 380 T820 420'/><path d='M-20 460 Q220 410 360 480 T660 460 T820 500'/><path d='M-20 540 Q240 490 380 560 T680 540 T820 580'/></g></svg>");
  background-repeat: repeat;
  background-size: 600px 600px;
}

/* Dual-tone focus ring: dark outline + yellow halo so it reads on both bone and ink. */

:focus-visible {
  outline: 2px solid #131312;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #f4b400;
}

/* Fluid headline sizes */

.fluid-display {
  font-size: clamp(2.4rem, 7.2vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.fluid-h1 {
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.fluid-h2 {
  font-size: clamp(1.85rem, 4.4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
}

/* Hero gradient: narrow band on desktop so the photo reads clean;
   uniform dim on phones where the headline stacks on top of the image. */

.hero-gradient {
  background: linear-gradient(
    to bottom,
    rgba(19, 19, 18, 0.88) 0%,
    rgba(19, 19, 18, 0.55) 60%,
    rgba(19, 19, 18, 0.85) 100%
  );
}

@media (min-width: 768px) {
  .hero-gradient {
    background: linear-gradient(
      to right,
      #131312 0%,
      rgba(19, 19, 18, 0.7) 30%,
      rgba(19, 19, 18, 0.28) 55%,
      transparent 70%
    );
  }
}

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

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

/* ---------- Added for the multi-page site ---------- */

/* Anchored sections land below the fixed header. */

section[id], article[id] {
  scroll-margin-top: 4.5rem;
}

@media (min-width: 768px) {
  section[id], article[id] {
    scroll-margin-top: 5.5rem;
  }
}

/* Skip link for keyboard users */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: #f4b400;
  color: #131312;
  border: 1px solid #131312;
  padding: 0.75rem 1rem;
  font-family: Oswald, "Oswald Fallback", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
}

.skip-link:focus {
  top: 1rem;
}

/* Header: see-through over the dark hero at the top of the page, solid bone once the page
   scrolls (js/site.js adds .is-scrolled). Without JavaScript it is solid ink at all times.
   Never give the header a backdrop-filter, transform or filter: the phone menu inside it is
   position:fixed and would be clipped to the header's height. */

.site-header {
  background-color: rgba(19, 19, 18, 0);
  /* a soft dark shade at the very top keeps the menu readable over the bright sky in the photos */
  background-image: linear-gradient(to bottom, rgba(19, 19, 18, 0.55), rgba(19, 19, 18, 0));
  border-bottom: 1px solid rgba(230, 220, 196, 0.18);
  transition: background-color 300ms ease, border-color 300ms ease;
}

.site-header.is-scrolled {
  background-color: #e6dcc4;
  background-image: none;
  border-bottom: 1px solid rgba(29, 28, 26, 0.14);
}

html:not(.js) .site-header {
  background-color: #131312;
}

.hdr-ink {
  color: #e6dcc4;
}

.site-header.is-scrolled .hdr-ink {
  color: #131312;
}

.hdr-link {
  color: #e6dcc4;
}

.hdr-link:hover {
  color: #f4b400;
}

.site-header.is-scrolled .hdr-link {
  color: #131312;
}

.site-header.is-scrolled .hdr-link:hover {
  color: #8a3a1f;
}

/* Desktop drop-down menus (Services, Service Area): open on hover, or with the arrow button. */

.nav-dd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.75rem;
}

.nav-dd-btn svg {
  transition: transform 200ms ease;
}

.nav-dd-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: -1.25rem;
  min-width: 21rem;
  padding-top: 1.35rem;
  z-index: 10;
}

.nav-dd-panel > ul {
  background: #131312;
  border: 1px solid rgba(230, 220, 196, 0.15);
  box-shadow: 0 18px 40px rgba(19, 19, 18, 0.35);
}

.nav-dd:hover .nav-dd-panel,
.nav-dd.is-open .nav-dd-panel,
html:not(.js) .nav-dd:focus-within .nav-dd-panel {
  display: block;
}

.nav-dd:hover .nav-dd-btn svg,
.nav-dd.is-open .nav-dd-btn svg {
  transform: rotate(180deg);
}

/* Phone and tablet menu: a full-screen solid panel, opened by the menu button. */

.mm-panel {
  display: none;
}

.mm-panel.is-open {
  display: flex;
}

/* Footer credit line (house standard): one line on desktop, natural wrapping on phones. */

.foot-credit {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(42, 40, 37, 0.45);
  transition: color 150ms ease;
}

.foot-credit:hover {
  color: #8a3a1f;
  text-decoration-color: currentColor;
}

@media (min-width: 821px) {
  .foot-copy-line {
    white-space: nowrap;
  }
}

.placeholder\:text-inkSoft\/60::-moz-placeholder {
  color: rgb(42 40 37 / 0.6);
}

.placeholder\:text-inkSoft\/60::placeholder {
  color: rgb(42 40 37 / 0.6);
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.hover\:border-bone:hover {
  --tw-border-opacity: 1;
  border-color: rgb(230 220 196 / var(--tw-border-opacity, 1));
}

.hover\:border-earth:hover {
  --tw-border-opacity: 1;
  border-color: rgb(138 58 31 / var(--tw-border-opacity, 1));
}

.hover\:bg-bone:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 220 196 / var(--tw-bg-opacity, 1));
}

.hover\:bg-boneDark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(216 203 168 / var(--tw-bg-opacity, 1));
}

.hover\:bg-earth:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(138 58 31 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-inkSoft:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 40 37 / var(--tw-bg-opacity, 1));
}

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

.hover\:text-bone:hover {
  --tw-text-opacity: 1;
  color: rgb(230 220 196 / var(--tw-text-opacity, 1));
}

.hover\:text-earth:hover {
  --tw-text-opacity: 1;
  color: rgb(138 58 31 / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(19 19 18 / var(--tw-text-opacity, 1));
}

.focus\:border-ink:focus {
  --tw-border-opacity: 1;
  border-color: rgb(19 19 18 / var(--tw-border-opacity, 1));
}

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

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}

.group:hover .group-hover\:border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(19 19 18 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:text-earth {
  --tw-text-opacity: 1;
  color: rgb(138 58 31 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:h-\[320px\] {
    height: 320px;
  }

  .sm\:w-auto {
    width: auto;
  }

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

  .sm\:flex-row {
    flex-direction: row;
  }

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

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

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

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

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

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

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

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

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

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

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

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

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

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

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

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

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:aspect-\[16\/10\] {
    aspect-ratio: 16/10;
  }

  .md\:aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }

  .md\:h-10 {
    height: 2.5rem;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:h-5 {
    height: 1.25rem;
  }

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

  .md\:w-10 {
    width: 2.5rem;
  }

  .md\:w-12 {
    width: 3rem;
  }

  .md\:w-5 {
    width: 1.25rem;
  }

  .md\:max-w-xs {
    max-width: 20rem;
  }

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

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

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

  .md\:flex-row {
    flex-direction: row;
  }

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

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

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

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

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

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

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

  .md\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

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

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

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

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

  .md\:pt-2 {
    padding-top: 0.5rem;
  }

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

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

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

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

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

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

  .md\:text-\[5\.5rem\] {
    font-size: 5.5rem;
  }

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

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

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-\[16\/19\] {
    aspect-ratio: 16/19;
  }

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

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

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

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

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

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

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

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

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pb-36 {
    padding-bottom: 9rem;
  }

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

  .lg\:pt-28 {
    padding-top: 7rem;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .lg\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
}