/* GENERATED by scripts/x/compile-tailwind.mjs
   [0] converge.tokens.css — the design tokens, hand-written
   [1] compiled Tailwind utilities (replacing the Play-CDN runtime)
   [2] converge.base.css — the hand-written <style> block, kept last so it wins */

/* ===========================================================================
   converge design tokens
   ===========================================================================

   HAND-WRITTEN AND TRACKED. This is deliberately NOT part of
   converge.base.css, which is regenerated from the source template by
   scripts/x/extract-converge.mjs - anything written there is wiped the next
   time that runs. compile-tailwind.mjs concatenates this file ahead of the
   compiled utilities.

   ── CHANNELS, NOT HEX ─────────────────────────────────────────────────────
   Every value is `R G B` with no rgb() wrapper, because the Tailwind config
   consumes them as `rgb(var(--theme-x) / <alpha-value>)`. That is what keeps
   the sixty-eight existing opacity modifiers working: `border-ink/10` becomes
   `rgb(6 28 21 / 0.1)`. A hex in these variables would silently break every
   one of them.

   ── NAMES ─────────────────────────────────────────────────────────────────
   These follow the ten `x_sites.theme_*` columns, which already exist with
   exactly these defaults and are named in the PRD, TOKEN-COLUMN-MAP.md and
   TOKENS.md. Nothing reads those columns yet; when something does, it plugs
   straight in rather than competing with a second vocabulary.

   ── ACCENT AND BAND ARE TWO TOKENS ────────────────────────────────────────
   They hold the same value today, so nothing changes. They are separate
   because they do different jobs:

     --theme-accent   buttons, links, badges, the text selection. A later
                      stage may make this as bold as the business's real
                      brand colour.
     --theme-band     the FOUR whole <section> backgrounds - the stat row,
                      the journey, and two inner-page sections. This must
                      stay pale whatever the accent becomes, because body
                      copy sits directly on it.

   Set a roofer's navy as a single --primary and those four sections become
   full-bleed navy bands with dark text on them. Splitting the token is what
   stops that.

   ── THE INKS ON THE BAND ARE THEIR OWN TOKENS ─────────────────────────────
   --theme-on-band* default to today's values and are deliberately NOT fixed
   hex anywhere in the templates. A later stage derives them from
   --theme-band; hardcoding them would be wrong the moment the band is not
   pale green, which is the whole point of the split.
   =========================================================================== */

:root {
  /* set per business */
  --theme-surface:          243 250 249;  /* #F3FAF9  page canvas            */
  --theme-panel-dark:         7  29  22;  /* #071D16  dark section panels    */
  --theme-ink:                6  28  21;  /* #061C15  body text, dark cards  */
  --theme-accent:           177 224 157;  /* #B1E09D  buttons, links         */
  --theme-band:             177 224 157;  /* #B1E09D  the four section bands */
  --theme-on-dark-muted:    130 168 156;  /* #82A89C  muted text on dark     */
  --theme-accent-deep:       53 114  79;  /* #35724F  strong accent text     */

  /* neutral across every palette */
  --theme-ink-lead:          49  75  67;  /* #314B43  lead paragraphs        */
  --theme-muted:             86 112 104;  /* #567068  muted body text        */
  --theme-on-dark:          225 245 238;  /* #E1F5EE  headings on dark       */

  /* the inks that sit on the band */
  --theme-on-band:          var(--theme-ink);
  --theme-on-band-muted:     44  76  61;  /* #2C4C3D                         */
  --theme-on-band-eyebrow:   49  91  75;  /* #315B4B                         */
}


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

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

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

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

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.-left-32 {
  left: -8rem;
}

.-right-24 {
  right: -6rem;
}

.-right-40 {
  right: -10rem;
}

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

.-top-32 {
  top: -8rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-\[-10\%\] {
  bottom: -10%;
}

.left-5 {
  left: 1.25rem;
}

.left-\[-20\%\] {
  left: -20%;
}

.top-0 {
  top: 0px;
}

.top-24 {
  top: 6rem;
}

.top-5 {
  top: 1.25rem;
}

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

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

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

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

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

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

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

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

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

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

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

.ml-auto {
  margin-left: auto;
}

.mr-3 {
  margin-right: 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-14 {
  margin-top: 3.5rem;
}

.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-9 {
  margin-top: 2.25rem;
}

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

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

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

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

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3 {
  height: 0.75rem;
}

.h-72 {
  height: 18rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[15rem\] {
  height: 15rem;
}

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

.h-\[32rem\] {
  height: 32rem;
}

.h-\[35rem\] {
  height: 35rem;
}

.h-\[36rem\] {
  height: 36rem;
}

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

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

.h-\[calc\(100svh-10rem\)\] {
  height: calc(100svh - 10rem);
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[30rem\] {
  min-height: 30rem;
}

.w-0 {
  width: 0px;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

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

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

.w-\[50vw\] {
  width: 50vw;
}

.w-\[calc\(\(100\%-0\.5rem\)\/2\)\] {
  width: calc((100% - 0.5rem) / 2);
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

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

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

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

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

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

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

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

.max-w-sm {
  max-width: 24rem;
}

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

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

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

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

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.scroll-mt-28 {
  scroll-margin-top: 7rem;
}

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

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

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

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

.grid-rows-\[minmax\(6rem\2c 1fr\)_auto\] {
  grid-template-rows: minmax(6rem,1fr) auto;
}

.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-baseline {
  align-items: baseline;
}

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

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

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

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

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.space-y-\[26vh\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(26vh * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(26vh * var(--tw-space-y-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-ink\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--theme-ink) / 0.1);
}

.divide-ink\/15 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--theme-ink) / 0.15);
}

.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}

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

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

.overflow-hidden {
  overflow: hidden;
}

.break-all {
  word-break: break-all;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[1\.5rem\] {
  border-radius: 1.5rem;
}

.rounded-\[1\.75rem\] {
  border-radius: 1.75rem;
}

.rounded-\[2\.5rem\] {
  border-radius: 2.5rem;
}

.rounded-\[2rem\] {
  border-radius: 2rem;
}

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

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

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

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

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

.\!border-white\/10 {
  border-color: rgb(255 255 255 / 0.1) !important;
}

.border-accent\/25 {
  border-color: rgb(var(--theme-accent) / 0.25);
}

.border-ink\/10 {
  border-color: rgb(var(--theme-ink) / 0.1);
}

.border-ink\/15 {
  border-color: rgb(var(--theme-ink) / 0.15);
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.\!bg-ink {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--theme-ink) / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#040f0c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(4 15 12 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0b2b21\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 43 33 / var(--tw-bg-opacity, 1));
}

.bg-\[\#183a2f\]\/40 {
  background-color: rgb(24 58 47 / 0.4);
}

.bg-\[\#4c8b67\] {
  --tw-bg-opacity: 1;
  background-color: rgb(76 139 103 / var(--tw-bg-opacity, 1));
}

.bg-\[\#a2d48d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(162 212 141 / var(--tw-bg-opacity, 1));
}

.bg-\[\#dcefe7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 239 231 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e8f7f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 247 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f7fbf9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 251 249 / var(--tw-bg-opacity, 1));
}

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

.bg-accent-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-deep) / var(--tw-bg-opacity, 1));
}

.bg-accent\/20 {
  background-color: rgb(var(--theme-accent) / 0.2);
}

.bg-accent\/35 {
  background-color: rgb(var(--theme-accent) / 0.35);
}

.bg-accent\/50 {
  background-color: rgb(var(--theme-accent) / 0.5);
}

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

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

.bg-ink\/10 {
  background-color: rgb(var(--theme-ink) / 0.1);
}

.bg-ink\/15 {
  background-color: rgb(var(--theme-ink) / 0.15);
}

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

.bg-on-dark-muted\/25 {
  background-color: rgb(var(--theme-on-dark-muted) / 0.25);
}

.bg-panel-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-panel-dark) / var(--tw-bg-opacity, 1));
}

.bg-panel-dark\/95 {
  background-color: rgb(var(--theme-panel-dark) / 0.95);
}

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

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

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}

.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

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

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

.from-ink\/90 {
  --tw-gradient-from: rgb(var(--theme-ink) / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--theme-ink) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-panel-dark\/95 {
  --tw-gradient-from: rgb(var(--theme-panel-dark) / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--theme-panel-dark) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.to-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}

.to-panel-dark\/60 {
  --tw-gradient-to: rgb(var(--theme-panel-dark) / 0.6) var(--tw-gradient-to-position);
}

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

.p-10 {
  padding: 2.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

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

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.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;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

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

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

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

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

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

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

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

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

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

.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-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

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

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

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

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

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

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

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

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[16vh\] {
  padding-bottom: 16vh;
}

.pb-\[18vh\] {
  padding-bottom: 18vh;
}

.pb-\[8vh\] {
  padding-bottom: 8vh;
}

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

.pl-\[3\.25rem\] {
  padding-left: 3.25rem;
}

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

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

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

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

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

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

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

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

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

.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-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

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

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

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[0\.68rem\] {
  font-size: 0.68rem;
}

.text-\[0\.6rem\] {
  font-size: 0.6rem;
}

.text-\[0\.8rem\] {
  font-size: 0.8rem;
}

.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-medium {
  font-weight: 500;
}

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-8 {
  line-height: 2rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[0\.94\] {
  line-height: 0.94;
}

.leading-\[0\.95\] {
  line-height: 0.95;
}

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

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

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

.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}

.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}

.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

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

.\!text-on-dark-muted {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--theme-on-dark-muted) / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#164532\] {
  --tw-text-opacity: 1;
  color: rgb(22 69 50 / var(--tw-text-opacity, 1));
}

.text-\[\#223c34\] {
  --tw-text-opacity: 1;
  color: rgb(34 60 52 / var(--tw-text-opacity, 1));
}

.text-\[\#466058\] {
  --tw-text-opacity: 1;
  color: rgb(70 96 88 / var(--tw-text-opacity, 1));
}

.text-\[\#5e7b72\] {
  --tw-text-opacity: 1;
  color: rgb(94 123 114 / var(--tw-text-opacity, 1));
}

.text-\[\#9bb1aa\] {
  --tw-text-opacity: 1;
  color: rgb(155 177 170 / var(--tw-text-opacity, 1));
}

.text-\[\#a6bbb4\] {
  --tw-text-opacity: 1;
  color: rgb(166 187 180 / var(--tw-text-opacity, 1));
}

.text-\[\#abc0b9\] {
  --tw-text-opacity: 1;
  color: rgb(171 192 185 / var(--tw-text-opacity, 1));
}

.text-\[\#b3c9c1\] {
  --tw-text-opacity: 1;
  color: rgb(179 201 193 / var(--tw-text-opacity, 1));
}

.text-\[\#b42318\] {
  --tw-text-opacity: 1;
  color: rgb(180 35 24 / var(--tw-text-opacity, 1));
}

.text-\[\#b7cfc6\] {
  --tw-text-opacity: 1;
  color: rgb(183 207 198 / var(--tw-text-opacity, 1));
}

.text-\[\#e8f7f2\] {
  --tw-text-opacity: 1;
  color: rgb(232 247 242 / var(--tw-text-opacity, 1));
}

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

.text-accent-deep {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}

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

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

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

.text-muted\/75 {
  color: rgb(var(--theme-muted) / 0.75);
}

.text-on-band {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-on-band) / var(--tw-text-opacity, 1));
}

.text-on-band-eyebrow {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-on-band-eyebrow) / var(--tw-text-opacity, 1));
}

.text-on-band-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-on-band-muted) / var(--tw-text-opacity, 1));
}

.text-on-dark {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-on-dark) / var(--tw-text-opacity, 1));
}

.text-on-dark-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-on-dark-muted) / var(--tw-text-opacity, 1));
}

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

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

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

.underline-offset-4 {
  text-underline-offset: 4px;
}

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

.opacity-25 {
  opacity: 0.25;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-shadow: 0 10px 30px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12\.5px_10px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0_41\.8px_33\.4px_rgba\(0\2c 0\2c 0\2c 0\.086\)\2c 0_100px_80px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 12.5px 10px rgba(0,0,0,0.06),0 41.8px 33.4px rgba(0,0,0,0.086),0 100px 80px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 12.5px 10px var(--tw-shadow-color), 0 41.8px 33.4px var(--tw-shadow-color), 0 100px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_40px_-24px_rgba\(6\2c 28\2c 21\2c 0\.45\)\] {
  --tw-shadow: 0 20px 40px -24px rgba(6,28,21,0.45);
  --tw-shadow-colored: 0 20px 40px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_24px_70px_-28px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
  --tw-shadow: 0 24px 70px -28px rgba(0,0,0,0.8);
  --tw-shadow-colored: 0 24px 70px -28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0px_12px_12px_-6px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0px_24px_24px_-12px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.04),0px 12px 12px -6px rgba(0,0,0,0.06),0px 24px 24px -12px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 12px 12px -6px var(--tw-shadow-color), 0px 24px 24px -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);
}

.shadow-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0px_12px_12px_-6px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.04),0px 12px 12px -6px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 12px 12px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0px_12px_12px_-6px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0px_24px_24px_-12px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.06),0px 12px 12px -6px rgba(0,0,0,0.06),0px 24px 24px -12px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 12px 12px -6px var(--tw-shadow-color), 0px 24px 24px -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);
}

.shadow-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0px_24px_24px_-12px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.06),0px 24px 24px -12px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 24px 24px -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);
}

.shadow-\[0px_24px_24px_-12px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0px 24px 24px -12px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0px 24px 24px -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);
}

.shadow-\[0px_2px_3px_-1px_rgba\(0\2c 0\2c 0\2c 0\.08\)\2c 0px_0px_0px_1px_rgba\(25\2c 28\2c 33\2c 0\.06\)\] {
  --tw-shadow: 0px 2px 3px -1px rgba(0,0,0,0.08),0px 0px 0px 1px rgba(25,28,33,0.06);
  --tw-shadow-colored: 0px 2px 3px -1px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_2px_3px_-1px_rgba\(0\2c 0\2c 0\2c 0\.1\)\2c 0px_0px_0px_1px_rgba\(25\2c 28\2c 33\2c 0\.08\)\] {
  --tw-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1),0px 0px 0px 1px rgba(25,28,33,0.08);
  --tw-shadow-colored: 0px 2px 3px -1px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_2px_3px_-1px_rgba\(0\2c 0\2c 0\2c 0\.1\)\2c 0px_1px_0px_0px_rgba\(25\2c 28\2c 33\2c 0\.02\)\2c 0px_0px_0px_1px_rgba\(25\2c 28\2c 33\2c 0\.08\)\] {
  --tw-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1),0px 1px 0px 0px rgba(25,28,33,0.02),0px 0px 0px 1px rgba(25,28,33,0.08);
  --tw-shadow-colored: 0px 2px 3px -1px var(--tw-shadow-color), 0px 1px 0px 0px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_2px_3px_-1px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0px 2px 3px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.blur-3xl {
  --tw-blur: blur(64px);
  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);
}

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

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

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

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

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

.transition-\[width\] {
  transition-property: width;
  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-1000 {
  transition-duration: 1000ms;
}

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

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

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

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

.selection\:bg-accent *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}

.selection\:bg-accent *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}

.selection\:text-ink *::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-ink) / var(--tw-text-opacity, 1));
}

.selection\:text-ink *::selection {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-ink) / var(--tw-text-opacity, 1));
}

.selection\:bg-accent::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}

.selection\:bg-accent::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}

.selection\:text-ink::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-ink) / var(--tw-text-opacity, 1));
}

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

.placeholder\:text-\[\#789087\]::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(120 144 135 / var(--tw-text-opacity, 1));
}

.placeholder\:text-\[\#789087\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(120 144 135 / var(--tw-text-opacity, 1));
}

.open\:bg-white\/\[0\.07\][open] {
  background-color: rgb(255 255 255 / 0.07);
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  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));
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  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));
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  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));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.hover\:border-accent-deep\/30:hover {
  border-color: rgb(var(--theme-accent-deep) / 0.3);
}

.hover\:border-accent-deep\/40:hover {
  border-color: rgb(var(--theme-accent-deep) / 0.4);
}

.hover\:border-ink\/25:hover {
  border-color: rgb(var(--theme-ink) / 0.25);
}

.hover\:border-white\/40:hover {
  border-color: rgb(255 255 255 / 0.4);
}

.hover\:bg-\[\#12392d\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 57 45 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#9fd28b\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(159 210 139 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#c4ecb3\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(196 236 179 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#e8f7f2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 247 242 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/80:hover {
  background-color: rgb(255 255 255 / 0.8);
}

.hover\:pl-2:hover {
  padding-left: 0.5rem;
}

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

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

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-ink) / 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;
}

.focus\:border-accent-deep:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-deep) / var(--tw-border-opacity, 1));
}

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

.focus\:ring-accent\/40:focus {
  --tw-ring-color: rgb(var(--theme-accent) / 0.4);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

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

.focus-visible\:ring-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-accent-deep:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent-deep) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ink:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-ink) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-4:focus-visible {
  --tw-ring-offset-width: 4px;
}

.focus-visible\:ring-offset-ink:focus-visible {
  --tw-ring-offset-color: rgb(var(--theme-ink) / 1);
}

.focus-visible\:ring-offset-panel-dark:focus-visible {
  --tw-ring-offset-color: rgb(var(--theme-panel-dark) / 1);
}

.active\:translate-y-0:active {
  --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));
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  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\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  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\: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));
}

.group:hover .group-hover\:rotate-6 {
  --tw-rotate: 6deg;
  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\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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\:bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:pl-2 {
  padding-left: 0.5rem;
}

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

@media not all and (min-width: 640px) {
  .max-sm\:\!text-\[24px\] {
    font-size: 24px !important;
  }

  .max-sm\:\!leading-\[1\.05\] {
    line-height: 1.05 !important;
  }
}

@media (min-width: 640px) {
  .sm\:absolute {
    position: absolute;
  }

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

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

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

  .sm\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

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

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-\[16\/11\] {
    aspect-ratio: 16/11;
  }

  .sm\:aspect-auto {
    aspect-ratio: auto;
  }

  .sm\:h-\[18rem\] {
    height: 18rem;
  }

  .sm\:h-\[38rem\] {
    height: 38rem;
  }

  .sm\:min-h-\[42rem\] {
    min-height: 42rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

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

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

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

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

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

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

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

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

  .sm\:gap-3 {
    gap: 0.75rem;
  }

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

  .sm\:gap-7 {
    gap: 1.75rem;
  }

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

  .sm\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .sm\:border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
  }

  .sm\:bg-white\/95 {
    background-color: rgb(255 255 255 / 0.95);
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-14 {
    padding: 3.5rem;
  }

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

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

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

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

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

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

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

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

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

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pt-14 {
    padding-top: 3.5rem;
  }

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

  .sm\:pt-32 {
    padding-top: 8rem;
  }

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

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

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

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

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

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

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

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

  .sm\:leading-10 {
    line-height: 2.5rem;
  }

  .sm\:backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

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

  .md\:col-start-9 {
    grid-column-start: 9;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:mt-14 {
    margin-top: 3.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

  .md\:overflow-visible {
    overflow: visible;
  }

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

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

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

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

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

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

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

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

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

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

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

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

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

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

  .lg\:mt-0 {
    margin-top: 0px;
  }

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

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

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

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

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

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

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

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

  .lg\:\!block {
    display: block !important;
  }

  .lg\:block {
    display: block;
  }

  .lg\:\!flex {
    display: flex !important;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

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

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

  .lg\:h-\[22rem\] {
    height: 22rem;
  }

  .lg\:h-\[min\(84vh\2c 44rem\)\] {
    height: min(84vh,44rem);
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-\[32rem\] {
    min-height: 32rem;
  }

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

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

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

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

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

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

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

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

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

  .lg\:gap-16 {
    gap: 4rem;
  }

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

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

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

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

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

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

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

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:rounded-\[1\.5rem\] {
    border-radius: 1.5rem;
  }

  .lg\:rounded-\[3rem\] {
    border-radius: 3rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:p-3 {
    padding: 0.75rem;
  }

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

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

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

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

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

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

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

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

  .lg\:pb-32 {
    padding-bottom: 8rem;
  }

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

  .lg\:pb-\[10vh\] {
    padding-bottom: 10vh;
  }

  .lg\:pb-\[16vh\] {
    padding-bottom: 16vh;
  }

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

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

  .lg\:pt-32 {
    padding-top: 8rem;
  }

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

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:pt-\[4\.5rem\] {
    padding-top: 4.5rem;
  }

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

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

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

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

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

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

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

  .lg\:leading-7 {
    line-height: 1.75rem;
  }

  .lg\:leading-normal {
    line-height: 1.5;
  }

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

@media (min-width: 1280px) {
  .xl\:p-12 {
    padding: 3rem;
  }

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

  .xl\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }
}


/* ===== converge base styles (was inline <style>) ===== */
/* GENERATED by scripts/x/extract-converge.mjs — the hand-written <style> block
   from index.html, extracted verbatim. compile-tailwind.mjs concatenates the
   compiled Tailwind utilities BEFORE this file to produce converge.css. */
/* hide the main page scrollbar everywhere, permanently, while keeping
         the page fully scrollable by wheel, touch, keyboard and drag.
         overflow-x lives on html (not body) so sticky header still works —
         overflow on body makes body its own scroll container and kills sticky. */
      html{ overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; }
      html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }

      /* sticky glass header — glass is a sibling layer so it can fade without
         changing header height. Sticky only at >=1024px (phones use the bottom bar). */
      .cv-hd-glass{
        position:absolute; inset:0; opacity:0; pointer-events:none;
        background:rgba(243,250,249,.86);
        border-bottom:1px solid rgba(6,28,21,.07);
        box-shadow:0 12px 32px -18px rgba(6,28,21,.45);
        transition:opacity .45s cubic-bezier(.16,1,.3,1);
      }
      @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
        .cv-hd-glass{
          background:rgba(243,250,249,.55);
          -webkit-backdrop-filter:blur(16px) saturate(165%);
          backdrop-filter:blur(16px) saturate(165%);
        }
      }
      @media (min-width:1024px){
        #siteHeader{ position:sticky; top:0 }
        #siteHeader.is-stuck .cv-hd-glass{ opacity:1 }
        #about, #areas, #services, #estimate, #materials, #included, #work, #journey, #reviews, #faq, #contact{ scroll-margin-top:7rem }
      }
      html.cv-locked, html.cv-locked body { overflow: hidden !important; height: 100%; }
      /* Round 13f: the menu's own lock. overflow only, so the page keeps its
         scroll position (cv-locked's height:100% threw it back to the top), and
         the scrollbar's gutter stays, so nothing shifts sideways on desktop. */
      html.cv-menu-locked { overflow: hidden !important; scrollbar-gutter: stable; }
      .cv-loader{
        position:fixed; inset:0; z-index:200; display:grid; place-items:center;
        background:radial-gradient(120% 90% at 50% 40%, #0a2820 0%, #061c15 62%);
        color:#e1f5ee;
      }
      .cv-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.6rem }

      .cv-loader-markwrap{ position:relative; display:grid; place-items:center }
      .cv-loader-glow{
        position:absolute; width:13rem; height:13rem; border-radius:999px;
        background:radial-gradient(circle, rgba(177,224,157,.35) 0%, rgba(177,224,157,0) 68%);
        opacity:0; filter:blur(6px); pointer-events:none;
      }
      .cv-loader-mark-svg{ position:relative; width:7.5rem; height:6.5rem; overflow:visible }
      /* the strokes must be invisible on the very first paint, otherwise the
         finished mark flashes up before the script gets a chance to hide it.
         400 is longer than any path here, so the whole stroke sits in the gap.
         The script overwrites both values inline with the real lengths. */
      .cv-loader-mark-svg [data-draw]{ stroke-dasharray:400; stroke-dashoffset:400 }
      @media (min-width:640px){
        .cv-loader-mark-svg{ width:9.5rem; height:8.25rem }
        .cv-loader-glow{ width:16rem; height:16rem }
      }

      /* WRAPS AT THE SPACES. This was one non-wrapping flex row of per-letter
         spans, so a business name longer than the viewport ran straight off
         the side of a phone screen. It now wraps, and `.cv-lw-word` keeps each
         word whole so the break can only land between words — a row of single
         letters gives CSS no word boundary to find on its own. Type size is
         unchanged, so a short name looks exactly as it always did; a long one
         stacks instead of shrinking to fit. */
      .cv-loader-word{
        display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center;
        column-gap:0.5em; row-gap:0.45em;
        max-width:min(88vw,30rem); text-align:center;
        font-family:'Syne',sans-serif; font-size:0.95rem; font-weight:600;
        text-transform:uppercase; letter-spacing:0.2em; line-height:1;
      }
      @media (min-width:640px){ .cv-loader-word{ font-size:1.15rem } }
      /* One word, one unbreakable unit — until the word alone is wider than the
         line, where wrapping between its letters still beats overflowing. */
      .cv-lw-word{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center }
      .cv-lw{ display:inline-block; overflow:hidden; padding-bottom:0.12em }
      .cv-lw i{
        display:inline-block; font-style:normal; transform:translateY(115%);
        transition:transform .8s cubic-bezier(.16,1,.3,1);
      }
      .cv-loader-word.on .cv-lw i{ transform:none }
      .cv-lw-sp{ display:inline-block; width:0.5em }

      .cv-loader-num{
        font-family:'JetBrains Mono',monospace; font-size:0.7rem;
        letter-spacing:0.28em; color:rgba(225,245,238,.42);
        font-variant-numeric:tabular-nums; transition:opacity .4s ease;
      }
      /* the whole stack lifts a touch faster than the curtain, so the exit
         reads as layered rather than one flat slide */
      .cv-loader-inner{ transition:transform .75s cubic-bezier(.7,0,.84,0), opacity .5s ease }
      .cv-loader.is-out .cv-loader-inner{ transform:translateY(-40px); opacity:0 }
      /* ROUND 12: the loader's mark in the site's own colours, only where the
         page asks (data-theme, section_layout options.hero.loader "theme").
         The curtain, glow and counter already follow the theme (overrides.ts
         THEME_RULES); the mark is the pack's SVG, drawn in the template's
         greens, so those exact strokes and fills are re-coloured here. */
      .cv-loader[data-theme] [stroke="#b1e09d"]{ stroke:rgb(var(--theme-accent)) }
      .cv-loader[data-theme] [stroke="#6d9e85"]{ stroke:rgb(var(--theme-on-dark-muted)) }
      .cv-loader[data-theme] [stroke="#3f6b57"]{ stroke:rgb(var(--theme-on-dark-muted) / .45) }
      .cv-loader[data-theme] [fill="#b1e09d"]{ fill:rgb(var(--theme-accent)) }

      .cv-marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
      .cv-marquee-track{ display:flex; width:max-content; align-items:center; gap:2.5rem; will-change:transform; animation:cv-marquee 46s linear infinite }
      @keyframes cv-marquee{ to{ transform:translateX(-50%) } }
      /* once the velocity loop takes over, the CSS animation steps aside.
         The keyframes stay as the no-JS fallback. */
      .cv-marquee-track.cv-marquee-js{ animation:none }
      .cv-chip{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; color:#61736d;
        font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em }
      .cv-chip-sep{ width:1px; height:1rem; background:rgba(6,28,21,.18); flex:none }
      .cv-carousel{
        display:flex; align-items:stretch; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-x pan-y;
        /* an overflow-x:auto box clips vertically too, so the cards need real
           room here or the hover lift and the soft shadows get sliced off the
           top and bottom edges */
        padding-block:1rem 1.75rem;
      }
      .cv-carousel::-webkit-scrollbar{ display:none }
      .cv-carousel > *{ scroll-snap-align:center; flex:0 0 min(85vw, 20rem); position:relative; z-index:1 }
      /* the card being touched or hovered sits above its neighbours */
      .cv-carousel > *:hover, .cv-carousel > *:focus-within, .cv-carousel > *:active{ z-index:2 }
      .cv-carousel-hint{
        display:flex; align-items:center; gap:0.4rem; margin-top:0;
        font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase;
        color:#567068; font-family:'JetBrains Mono',monospace;
      }
      /* once a carousel turns into a static grid it is no longer a scroll
         container, so it does not need the anti-clipping padding */
      @media (min-width:768px){
        .cv-carousel-md{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem;
          overflow:visible; scroll-snap-type:none; padding-block:0 }
        .cv-carousel-md > *{ flex:unset; width:auto; max-width:none }
      }
      @media (min-width:1024px){
        .cv-carousel-reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; gap:1.25rem; padding-block:0 }
        .cv-carousel-reviews > *{ flex:unset; width:auto; max-width:none }
        .cv-carousel-hint{ display:none }
      }
      /* Full-screen menu */
      .cv-burger{
        width:2.75rem; height:2.75rem; display:grid; place-content:center; gap:5px;
        border-radius:999px; border:1px solid rgb(var(--theme-ink) / .12);
        background:rgba(255,255,255,.78); backdrop-filter:blur(10px);
        color:#061c15; transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
      }
      .cv-burger:hover{ background:#fff; border-color:rgb(var(--theme-ink) / .22) }
      .cv-burger i{ display:block; width:1rem; height:1.5px; background:currentColor; border-radius:999px; transition:transform .4s cubic-bezier(.16,1,.3,1) }
      @media (hover:hover){ .cv-burger:hover i:first-child{ transform:translateX(3px) } }
      @media (hover:hover){ .cv-burger:hover i:last-child{ transform:translateX(-3px) } }
      .cv-menu{ position:fixed; inset:0; z-index:160; display:flex; flex-direction:column; pointer-events:none }
      .cv-menu.on{ pointer-events:auto }
      .cv-menu-bd{ position:absolute; inset:0; background:#061c15; opacity:0; will-change:opacity }
      .cv-menu-panel{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; color:#e1f5ee; padding:0.5rem; opacity:0; will-change:opacity,transform }
      @media (min-width:640px){ .cv-menu-panel{ padding:0.75rem } }
      .cv-menu-inner{
        height:100%; display:flex; flex-direction:column; padding:1.25rem 1.5rem 1.5rem; border-radius:1.75rem;
        background:linear-gradient(165deg,#071d16 0%,#0a2820 55%,#061c15 100%);
        border:1px solid rgba(177,224,157,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      }
      @media (min-width:640px){ .cv-menu-inner{ padding:2rem 2.5rem; border-radius:2rem } }
      .cv-menu-top{ display:flex; align-items:center; justify-content:space-between }
      .cv-menu-brand{ display:flex; align-items:center; gap:0.75rem; color:#e1f5ee }
      .cv-menu-brand-mark{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:999px; background:#b1e09d; color:#061c15; flex:none }
      .cv-menu-brand-text{ font-family:'Syne',sans-serif; font-size:0.95rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; line-height:1.1 }
      .cv-menu-brand-text small{ display:block; margin-top:0.2rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.65rem; font-weight:500; letter-spacing:0.2em; color:#82a89c }
      .cv-menu-x{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.1); color:#e1f5ee; transition:background-color .3s ease, transform .35s ease }
      @media (hover:hover){ .cv-menu-x:hover{ background:rgba(255,255,255,.18); transform:rotate(90deg) } }
      .cv-menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:0.1rem; padding:1rem 0 }
      .cv-menu-nav a{ display:block; font-family:'Syne',sans-serif; font-size:2.1rem; font-weight:500; letter-spacing:-0.03em; line-height:1.15; color:#e1f5ee; transition:color .3s ease, transform .5s cubic-bezier(.16,1,.3,1) }
      @media (min-width:640px){ .cv-menu-nav a{ font-size:3.5rem } }
      .cv-menu-nav a:hover{ color:#b1e09d; transform:translateX(1rem) }
      .cv-menu-bot{ border-top:1px solid rgba(225,245,238,.12); padding-top:1.75rem; display:flex; flex-direction:column; gap:1.25rem }
      @media (min-width:640px){ .cv-menu-bot{ flex-direction:row; justify-content:space-between; align-items:center } }
      .cv-menu-cta{ display:inline-flex; align-items:center; gap:0.65rem; border-radius:999px; background:#b1e09d; color:#061c15; padding:0.95rem 1.5rem; font-size:0.8rem; font-weight:600; letter-spacing:0.04em; transition:transform .3s ease, background-color .3s ease }
      .cv-menu-cta:hover{ background:#c6ebb5; transform:translateY(-2px) }
      .cv-menu-bot nav{ display:flex; flex-wrap:wrap; gap:1.25rem; font-size:0.875rem; color:#82a89c }
      .cv-menu-bot nav a:hover{ color:#e1f5ee }
      /* Hero word reveal */
      .word-mask{ display:inline-block; overflow:hidden; padding-bottom:0.14em; vertical-align:bottom; margin-right:0.22em }
      .word-mask [data-word]{ display:inline-block; transform:translate3d(0,115%,0); opacity:0; will-change:transform,opacity;
        transition:transform 1.15s cubic-bezier(0.16,1,0.3,1), opacity 1.05s cubic-bezier(0.16,1,0.3,1) }
      .word-mask [data-word].in{ transform:translate3d(0,0,0); opacity:1 }
      [data-hero-fade]{ opacity:0; transform:translate3d(0,22px,0); will-change:transform,opacity;
        transition:transform 0.95s cubic-bezier(0.16,1,0.3,1), opacity 0.95s cubic-bezier(0.16,1,0.3,1) }
      [data-hero-fade].in{ opacity:1; transform:translate3d(0,0,0) }

      /* ===== SERVICES ===== */
      .svc-ghost{ position:absolute; right:.25rem; top:-1.5rem; font-family:'Syne',sans-serif; font-weight:600;
        font-size:3.5rem; line-height:1; color:#e1f5ee; opacity:.035; pointer-events:none; user-select:none; z-index:0 }
      @media (min-width:1024px){ .svc-ghost{ font-size:11rem; top:-6.5rem; right:-1.5rem; opacity:.035 } }
      .svc-media{ position:relative; overflow:hidden; background:#0a2820 }
      .svc-media img{ width:100%; height:100%; object-fit:cover; will-change:transform }
      .svc-tag{ font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase }

      /* ===== BEFORE / AFTER ===== */
      .ba{ position:relative; overflow:hidden; border-radius:2rem; isolation:isolate }
      .ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
      .ba-before{ position:absolute; inset:0; clip-path:inset(0 50% 0 0); z-index:2 }
      .ba-divider{ position:absolute; top:0; bottom:0; width:2px; background:#b1e09d; z-index:3; transform:translateX(-1px); pointer-events:none }
      .ba-knob{ position:absolute; top:50%; left:50%; z-index:4; width:2.75rem; height:2.75rem; margin:-1.375rem 0 0 -1.375rem;
        border-radius:999px; background:#b1e09d; color:#061c15; display:grid; place-items:center; pointer-events:none;
        box-shadow:0 8px 24px rgba(0,0,0,.35) }
      .ba-range{ position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize }
      .ba-label{ position:absolute; z-index:3; bottom:1rem; font-family:'JetBrains Mono',monospace; font-size:.6rem;
        letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(6,28,21,.6); padding:.3rem .7rem; border-radius:999px; backdrop-filter:blur(6px) }

      /* ===== FAQ ===== */
      details.cv-faq summary::-webkit-details-marker{ display:none }
      details.cv-faq summary{ list-style:none }
      details.cv-faq[open] .cv-faq-body{ animation:cvFaq .45s cubic-bezier(.16,1,.3,1) }
      details.cv-smooth[open] .cv-faq-body{ animation:none }
      details.cv-smooth summary{ list-style:none }
      details.cv-smooth summary::-webkit-details-marker{ display:none }
      @keyframes cvFaq{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }


      /* ===== SERVICES: the same scroll stack on every breakpoint.
         Sticky cards at one shared top offset with a rising z-index,
         separated by scroll room, each fading out as the next covers it. ===== */
      :root{ --svc-top: 4.5rem }
      @media (min-width:1024px){ :root{ --svc-top: 6.5rem } }
      .svc-track{ display:block }
      .svc-row{ position:sticky; top:var(--svc-top) }
      .svc-card{ will-change:transform }
      .svc-media, .svc-copy{ min-width:0 }
      #svcHead{ position:sticky; top:0; z-index:30 }
      .svc-progress{ transform-origin:left; transform:scaleX(0) }

      /* ===== STACKING CARDS (journey) ===== */
      :root{ --jrn-top: 11.5rem }
      @media (min-width:1024px){ :root{ --jrn-top: 7rem } }
      .jrn-item{ position:sticky }
      .jrn-progress{ transform-origin:left; transform:scaleX(0) }

      /* ===== BEFORE/AFTER: stacked scroll reveal on mobile, grid from lg ===== */
      /* clears the pinned before/after header (86px) with a little air */
      :root{ --work-top: 5.75rem }
      .work-item{ position:sticky; top:var(--work-top) }
      @media (min-width:1024px){ .work-item{ position:static } }
      #workHead{ position:sticky; top:0; z-index:30 }

      /* ===== MASTER MATERIALS TOGGLE ===== */
      .cv-mat-all summary::-webkit-details-marker{ display:none }
      .cv-mat-all summary{ list-style:none }
      .cv-mat-all[open] > summary > span:last-child{ transform:rotate(180deg) }

      /* ===== DUAL BANNER (areas) ===== */
      .cv-marquee-track.rev{ animation-direction:reverse }
      .area-chip{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
        border-radius:999px; border:1px solid rgba(6,28,21,.1); background:#fff; padding:.6rem 1rem;
        font-size:.8rem; font-weight:500 }
      .area-chip small{ font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.14em;
        text-transform:uppercase; color:#35724f; background:#e8f7f2; border-radius:999px; padding:.15rem .5rem }

      /* ===== CALC STEP OVERLAY ===== */
      #calcSteps{ position:relative; overflow:hidden; transition:height .42s cubic-bezier(.16,1,.3,1) }
      #calcSteps > .cv-step{ margin-top:0 }
      /* outgoing step leaves first and fast, incoming waits for it, so the two
         are never on screen together at half opacity */
      .cv-step.leaving{
        position:absolute; top:0; left:0; right:0; pointer-events:none;
        opacity:0; transform:translateY(-8px);
        transition:opacity .16s ease-out, transform .16s ease-out;
      }

      /* ===== CALCULATOR ===== */
      .cv-step{
        opacity:0; transform:translateY(14px);
        transition:opacity .34s cubic-bezier(.16,1,.3,1) .16s, transform .34s cubic-bezier(.16,1,.3,1) .16s;
      }
      .cv-step.in{ opacity:1; transform:none }
      /* photo blocks hold a tinted placeholder and cross fade in once the
         file has actually decoded, instead of snapping in half drawn */
      /* the mobile bar swaps its label as you move down the page */
      .cv-bar-label{ display:inline-block; transition:opacity .18s ease }
      .cv-bar-label.out{ opacity:0 }
      .cv-photo{ background:#dcefe7 }
      .cv-photo img{ opacity:0; transition:opacity .7s cubic-bezier(.16,1,.3,1) }
      .cv-photo img.is-in{ opacity:1 }

      /* the dark result panel rises into the space the questions vacate */
      #calcCard{
        opacity:0; transform:translateY(16px);
        transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
      }
      #calcCard.in{ opacity:1; transform:none }
      .cv-opt{ position:relative }
      .cv-opt.is-on{ background:#b1e09d; border-color:#061c15 }
      .cv-opt.is-on .cv-opt-ico{ background:rgba(6,28,21,.12) }
      .cv-opt.is-on .cv-opt-tick{ opacity:1; transform:scale(1) }
      .cv-opt-tick{ opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1) }
      .cv-line{ opacity:0; transform:translateY(8px); animation:cvLineIn .45s cubic-bezier(.16,1,.3,1) forwards }
      @keyframes cvLineIn{ to{ opacity:1; transform:none } }
      .cv-flash{ animation:cvFlash 1.2s ease }
      @keyframes cvFlash{ 0%,100%{ box-shadow:0 0 0 0 rgba(177,224,157,0) } 30%{ box-shadow:0 0 0 6px rgba(177,224,157,.55) } }

      @media (prefers-reduced-motion: reduce){
        .cv-marquee-track{ animation:none }
        .word-mask [data-word], [data-hero-fade]{ opacity:1 !important; transform:none !important; transition:none !important; will-change:auto }
        .cv-step{ opacity:1; transform:none; transition:none }
        #calcCard{ opacity:1; transform:none; transition:none }
        #calcSteps{ transition:none }
        .cv-line{ opacity:1; transform:none; animation:none }
        .cv-photo img{ transition:none }
        details.cv-faq[open] .cv-faq-body{ animation:none }
        .svc-row, .jrn-item, .work-item{ position:static; min-height:0 }
        .svc-track{ }
        .cv-hd-glass{ transition:none }
      }

      /* iOS Safari ZOOMS THE PAGE when a focused form control has a font-size
         below 16px, and every field in the enquiry form computes to 14px. The
         page then stays zoomed after the field is dismissed, which reads as the
         site being broken on a phone.
         Fixed by raising the CONTROL to 16px under the sm breakpoint, not by
         adding maximum-scale to the viewport meta: that would stop a user
         pinch-zooming the page at all, which is an accessibility regression and
         a much worse trade than one step in type size. */
      @media (max-width: 639px) {
        input, select, textarea { font-size: 16px !important }
      }