/* ========================================= */

/* Import Component Styles                   */

/* ========================================= */

/* ========================================= */

/* Button Component Styles                   */

/* ========================================= */

/* ------------------------------------------------------------------
   Solid-button palette — change these three values and every solid
   button on the site follows: the header CTA, the hero primary, and
   the filled hover state of the outlined button on the dark band.

   Contrast of the label against --btn-solid-bg (WCAG AA wants 4.5:1
   for a 14px label):
     #A17402  4.19:1   current — marginally under AA
     #8F6702  5.11:1
     #8A6302  5.43:1
   ------------------------------------------------------------------ */

:root {
  --btn-solid-bg: #A17402;
  --btn-solid-bg-hover: #8A6302;
  --btn-solid-text: #FFFFFF;
  --btn-font-size: 16px;
}

/* ---- Elementor button widgets ----
   Elementor writes per-widget values into its own stylesheet at a higher
   specificity, so these have to be !important to stay token-driven. */

.elementor-widget-button .elementor-button {
  font-size: var(--btn-font-size) !important;
}

.button-primary .elementor-button {
  color: var(--btn-solid-text) !important;
  background-color: var(--btn-solid-bg) !important;
  border-color: var(--btn-solid-bg) !important;
}

.button-primary .elementor-button:hover,
.button-primary .elementor-button:focus {
  color: var(--btn-solid-text) !important;
  background-color: var(--btn-solid-bg-hover) !important;
  border-color: var(--btn-solid-bg-hover) !important;
}

/* Outlined button on the dark band — fills with the solid palette on hover. */

.button-solid-hover .elementor-button:hover,
.button-solid-hover .elementor-button:focus {
  color: var(--btn-solid-text) !important;
  background-color: var(--btn-solid-bg) !important;
  border-color: var(--btn-solid-bg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-cta,
  .btn-ghost {
    transition: none;
  }

  .btn-primary:hover,
  .btn-primary:active,
  .btn-secondary:hover,
  .btn-secondary:active,
  .btn-cta:hover,
  .btn-cta:active,
  .btn-ghost:active {
    transform: none;
  }
}

/* ========================================= */

/* Header & Navigation Styles                */

/* ========================================= */

/* ---- Ukrainian flag accent strip ---- */

.top-flag {
  display: flex;
  width: 100%;
}

.top-flag__blue,
.top-flag__yellow {
  height: 4px;
  width: 50%;
}

#header {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 80;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  &.h-fixed {
    position: fixed;
  }
  &.h-fixed {
    .top-header {
      display: none;
    }
    > .container {
      > * {
        border-style: none;
      }
    }
  }
}

#header.h-fixed {
  position: fixed;
}

.top-flag__blue {
  background-color: #0057B7;
  /* flag-blue */
}

.top-flag__yellow {
  background-color: #FFD700;
  /* flag-yellow */
}

/* Keep clear of the WordPress admin bar */

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  transition: min-height 0.3s ease;
}

.site-header.is-scrolled .site-header__inner {
  min-height: 62px;
}

/* ---- Brand / logo lockup ---- */

.brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration-line: none;
}

.brand-logo {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 3rem;
    width: 3rem;
  }
}

.brand-logo img,
.brand-logo svg {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.brand-logo--mark {
  color: #F5A524;
  /* accent-orange — SVG uses currentColor */
  filter: drop-shadow(0 0 10px rgba(245, 165, 36, 0.35));
}

.brand-name {
  display: none;
  flex-direction: column;
  text-decoration-line: none;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .brand-name {
    display: flex;
  }
}

.brand-title {
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 17px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.brand-sub {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
  letter-spacing: 0.16em;
}

.brand-name:hover .brand-title {
  color: #8A5A12;
  /* primary */
}

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

.primary-nav {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}

.main-menu {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.main-menu ul,
.main-menu .menu {
  margin: 0px;
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0px;
}

.main-menu li {
  list-style-type: none;
}

.main-menu a,
.main-menu .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  font-size: 0.94rem;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.main-menu a:hover,
.main-menu .nav-link:hover {
  color: #8A5A12;
  /* primary */
}

.main-menu a::after,
.main-menu .nav-link::after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0.25rem;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  transform-origin: center;
  border-radius: 9999px;
  background-color: #F5A524;
  /* accent-orange */
  box-shadow: 0 0 8px rgba(245, 165, 36, 0.55);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.main-menu a:hover::after,
.main-menu .nav-link:hover::after,
.main-menu .current-menu-item > a::after,
.main-menu .current-menu-ancestor > a::after,
.main-menu .current_page_item > a::after,
.main-menu .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.main-menu .current-menu-item > a,
.main-menu .current-menu-ancestor > a,
.main-menu .current_page_item > a,
.main-menu .nav-link[aria-current="page"] {
  color: #8A5A12;
  /* primary */
}

.main-menu a svg,
.main-menu .nav-link svg {
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
}

/* ---- Header actions ---- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__cta {
    display: inline-flex;
  }
}

/* ---- Burger toggle ---- */

#nav-main--toggle .nav-toggle {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: transparent;
  padding: 0px;
}

@media (min-width: 1024px) {
  #nav-main--toggle .nav-toggle {
    display: none;
  }
}

#nav-main--toggle .nav-toggle {
  border: none;
  color: #8A5A12;
  /* primary — brown */
  transition: background-color 0.2s ease, color 0.2s ease;
}

#nav-main--toggle .nav-toggle:hover {
  background-color: rgba(255, 231, 194, 0.6);
  color: #6F4A12;
  /* darker brown */
}

/* ---- Mobile side drawer ---- */

.nav-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0px;
  z-index: 55;
  background-color: rgb(0 0 0 / 0.5);
  opacity: 0;
}

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

.nav-overlay {
  transition: opacity 0.3s ease;
}

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

.primary-nav__head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #FFE7C2;
  /* surface-warm */
}

.primary-nav__title {
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}

#primary-nav .nav-close {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0px;
  border: none;
  color: #8A5A12;
  /* primary — brown */
  transition: color 0.2s ease;
}

#primary-nav .nav-close:hover {
  color: #6F4A12;
  /* darker brown */
}

/* The off-canvas drawer is parked outside the viewport; without this the page
   scrolls horizontally by the drawer's width and every full-bleed band stops
   short of the right edge. `clip` (not `hidden`) keeps position:sticky working. */

html {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  .primary-nav {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 60;
    height: 100%;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1));
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 40px;
    padding-top: 28px;
    transform: translateX(100%);
    box-shadow: -18px 0 50px rgba(36, 28, 16, 0.18);
    transition: transform 0.32s ease, visibility 0.32s ease;
    visibility: hidden;
  }

  body.nav-open .primary-nav {
    transform: translateX(0);
    visibility: visible;
  }

  .main-menu,
  .main-menu ul,
  .main-menu .menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .main-menu a,
  .main-menu .nav-link {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .main-menu a:hover,
  .main-menu .nav-link:hover,
  .main-menu .current-menu-item > a,
  .main-menu .current-menu-ancestor > a,
  .main-menu .current_page_item > a,
  .main-menu .nav-link[aria-current="page"] {
    background-color: rgba(255, 231, 194, 0.7);
  }

  .main-menu a::after,
  .main-menu .nav-link::after {
    display: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .primary-nav,
  .nav-overlay,
  .main-menu a::after,
  .main-menu .nav-link::after,
  .brand-title {
    transition: none;
  }
}

/* ========================================= */

/* Footer Styles                              */

/* ========================================= */

/* Dark band: the page's closing anchor, after the light CTA above it.
   Every colour below is scoped to .wrap-footer so the shared .brand-* and
   utility classes coming from the markup flip with it. */

.wrap-footer {
  display: flex;
  flex-direction: column;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: #1F2320;
  /* field green */
}

/* Ukrainian flag accent strip — mirrors the header */

.footer-flag {
  display: flex;
  height: 0.25rem;
  width: 100%;
}

.footer-flag span {
  display: block;
  height: 100%;
  width: 50%;
}

.footer-flag span:first-child {
  background-color: #0057B7;
  /* flag-blue */
}

.footer-flag span:last-child {
  background-color: #FFD700;
  /* flag-yellow */
}

/* Brand lockup inherits the header's classes — repaint it for the dark ground */

.wrap-footer .brand-title {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.wrap-footer .brand-sub {
  color: #E8A33D;
  /* accent-orange */
}

.wrap-footer .brand-name:hover .brand-title {
  color: #E8A33D;
}

/* Body copy set with ink utilities in the markup */

.wrap-footer .text-text-dark\/70,
.wrap-footer .text-text-dark\/55,
.wrap-footer address {
  color: rgba(255, 255, 255, 0.72);
}

/* Column layout */

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-heading {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #E8A33D;
  /* accent-orange */
}

.footer-link {
  font-size: 14px;
  line-height: 1.4;
  text-decoration-line: none;
  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;
  color: rgba(255, 255, 255, 0.72);
}

.footer-link:hover {
  color: #E8A33D;
}

/* Footer navigation (managed in Appearance -> Menus) */

.footer-menu {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0px;
}

.footer-menu a {
  font-size: 14px;
  line-height: 1.4;
  text-decoration-line: none;
  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;
  color: rgba(255, 255, 255, 0.72);
}

.footer-menu a:hover,
.footer-menu .current-menu-item > a,
.footer-menu .current_page_item > a {
  color: #E8A33D;
}

/* Social buttons */

.footer-social {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.footer-social: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));
}

.footer-social {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.8);
}

.footer-social:hover {
  border-color: #E8A33D;
  color: #E8A33D;
  background-color: rgba(232, 163, 61, 0.08);
}

/* Bottom legal bar */

.footer-bottom {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 28px;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .footer-social {
    transition-property: none;
  }
}

/* ========================================= */

/* Card Component Styles                     */

/* ========================================= */

/* Raise Cards (Project Cards) */

/* The track the cards sit in. It used to be a wrapping flex row, which had two
   faults: `min-w-0` let all three squeeze onto one line at ~96px wide on a
   phone, and a card left alone on the last line stretched to the full width.
   A grid fixes both — columns keep their size and an orphan stays one column
   wide. `min(280px, 100%)` keeps the track from overflowing very narrow
   screens. */

.raise-grid {
  margin-top: 2rem;
  display: grid;
  width: 100%;
  gap: 28px;
  /* auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so a lone
     card stretched across the whole row. auto-fill keeps the columns, so one
     card sits in one column and the rest of the row stays empty. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.raise {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  border-radius: 16px !important;
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  padding: 28px;
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07) !important;
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.raise:hover {
  --tw-translate-y: -0.25rem !important;
  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)) !important;
  --tw-shadow: 0 10px 24px rgba(36,28,16,0.12) !important;
  --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.raise {
  .button-primary {
    max-width: 100%;
  }
}

.raise-media {
  margin-left: -28px !important;
  margin-right: -28px !important;
  margin-top: -28px !important;
  height: 13rem !important;
  width: calc(100% + 56px) !important;
  max-width: none !important;
  border-radius: 16px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  object-fit: cover !important;
}

.raise-body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 6px;
}

.raise-body h3 {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 23px;
  line-height: 1.2;
}

/* Belt to the word-trim's braces: even a hand-written excerpt of very long
   words cannot push one card taller than its neighbours in the row. */

.raise-body p {
  margin: 0px;
  font-size: 17px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.raise-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.raise-figures {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.raise-figures .raise-collected {
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}

.raise-goal {
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  opacity: 0.55;
}

.raise-track {
  margin-top: 0.25rem !important;
  display: flex;
  height: 10px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 231 194 / var(--tw-bg-opacity, 1)) !important;
}

/* At 0.2% the inline width rounds to nothing on screen, so a collection that
   has taken its first donation would show an empty track. A minimum width
   keeps any non-zero progress visible; :not([style*="width: 0%"]) leaves a
   genuinely empty collection genuinely empty. */

.raise-bar {
  display: block !important;
  height: 100% !important;
  border-radius: 999px;
  background-image: linear-gradient(120deg, #FFD68F 0%, #F5A524 100%) !important;
}

.raise-bar:not([style*="width: 0%"]) {
  min-width: 6px;
}

.raise-note {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/* .raise .btn-primary rules live in ./buttons.css */

/* Project Cards */

.card-project {
  display: flex;
  min-width: 300px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 18px;
  border-radius: 16px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1));
  padding: 28px;
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card-project: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));
  --tw-shadow: 0 10px 24px rgba(36,28,16,0.12);
  --tw-shadow-colored: 0 10px 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);
}

.card-project h3 {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 20px;
  line-height: 1.2;
}

/* Stats Card */

.card-stat {
  border-radius: 16px !important;
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1)) !important;
  padding: 28px !important;
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07) !important;
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Project Grid Cards */

.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.project-thumb img {
  display: block;
  height: 10rem;
  width: 100%;
  object-fit: cover;
}

.project-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding: 28px;
}

.project-title {
  margin-top: 0px;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

.project-excerpt {
  margin-bottom: 28px;
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.4;
}

.project-stats {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 500;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-value {
  font-size: 17px;
  line-height: 1.65;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

.stat-divider {
  color: rgb(0 0 0 / 0.3);
}

.stat-percent {
  --tw-text-opacity: 1;
  color: rgb(245 165 36 / var(--tw-text-opacity, 1));
}

.stat-goal {
  font-size: 14px;
  line-height: 1.4;
  color: rgb(0 0 0 / 0.55);
}

.progress-bar-wrap {
  margin-bottom: 12px;
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 231 194 / var(--tw-bg-opacity, 1));
}

.progress-bar {
  height: 100%;
  border-radius: 999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 165 36 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* News Cards */

/* `relative` is what the stretched title link anchors to — see .news-link. */

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The cover has to clip the hover zoom, so the rounding and the gap below it
   moved off the <img> and onto this wrapper. */

.news-card .news-thumb {
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 16px;
}

/* Elementor's frontend.min.css ships `.elementor img { height: auto }` and
   loads after the theme, so a single-class selector here loses on order and a
   portrait cover rendered at its natural 395px, throwing the row out of line.
   Two classes (0-2-1) put the fixed band back. */

.news-card .news-thumb img {
  display: block;
  height: 15rem;
  width: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* Zoom is driven from the card, not the image, so it also fires when the
   title link is focused by keyboard. */

.news-card:hover .news-thumb img,
.news-card:focus-within .news-thumb img {
  transform: scale(1.04);
}

.news-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.news-date {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}

.news-title {
  margin-top: 0px;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

.news-excerpt {
  margin-bottom: 28px;
  flex-grow: 1;
  font-size: 16px;
  line-height: 1.6;
}

/* Whole-card link. The title holds the only anchor and its ::after covers the
   card, which keeps one descriptive link in the markup instead of wrapping the
   card in an <a> and nesting the read-more inside it. */

.news-title .news-link {
  color: inherit;
  text-decoration-line: none;
  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;
}

.news-title .news-link::after {
  position: absolute;
  inset: 0px;
  z-index: 10;
  content: "";
}

/* Keyboard users get the ring around the whole card, since that is the hit area. */

.news-title .news-link:focus-visible::after {
  outline: 2px solid #F5A524;
  outline-offset: 3px;
  border-radius: 16px;
}

.news-title .news-link:focus-visible {
  outline: none;
}

/* "Читати далі" is a span now, so its hover state has to come from the card. */

.news-read-more {
  margin-top: auto;
  display: inline-block;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  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;
}

.news-card:hover .news-title .news-link,
.news-card:focus-within .news-title .news-link,
.news-card:hover .news-read-more,
.news-card:focus-within .news-read-more {
  --tw-text-opacity: 1;
  color: rgb(245 165 36 / var(--tw-text-opacity, 1));
}

/* ---- Timeline milestone ----
   The rail is a 2px top border set per milestone in Elementor. Elementor free
   has no hover control for a container's border colour, so the hover state
   (the same 2px lift the cards use) lives here. */

.milestone {
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.milestone:hover {
  transform: translateY(-2px);
  border-top-color: #E8A33D;
  /* accent-orange */
}

@media (prefers-reduced-motion: reduce) {
  .milestone,
  .milestone:hover {
    transition: none;
    transform: none;
  }

  .news-card .news-thumb img,
  .news-card:hover .news-thumb img,
  .news-card:focus-within .news-thumb img {
    transition: none;
    transform: none;
  }
}

/* ---- Status / category chips on a fundraiser card ---- */

.raise-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.raise-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  background-color: #FFE7C2;
  /* surface-warm */
  color: #4A2F07;
  /* espresso — 9:1 on surface-warm */
  border: 1px solid #A17402;
}

/* A finished collection steps back to a quiet outline: the page should not
   keep shouting for money that is no longer needed. */

.raise-status.is-closed {
  background-color: transparent;
  color: #6B5A42;
  border-color: #D9CBB5;
}

.raise-cat {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9C7B2E;
  /* Brass */
}

/* ---- Card actions: «Детальніше» + «Задонатити» ---- */

/* The pair sits on one line while both fit and wraps to a stack on a narrow
   card, so neither label ever gets squeezed onto two lines. */

.raise-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.raise-actions > * {
  min-width: 132px;
  flex: 1 1 0%;
}

/* Secondary action: quiet outline, so the donate button stays the loud one. */

.raise-more {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration-line: none;
  color: #4A2F07;
  /* espresso */
  background-color: transparent;
  border: 1px solid #D9CBB5;
  /* hairline */
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.raise-more:hover {
  background-color: rgba(255, 231, 194, 0.55);
  /* surface-warm */
  border-color: #A17402;
  transform: translateY(-2px);
}

.raise-more:focus-visible {
  outline: 2px solid #F5A524;
  outline-offset: 2px;
}

.raise-empty {
  margin: 0px;
  font-size: 16px;
  line-height: 1.6;
  color: #6B5A42;
}

/* ---- Cover placeholder ---- */

/* Warm panel with the brand rhombus, filling the same band a real cover would.
   Decorative only — it stands in for a missing image, never for a subject. */

.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background-image: linear-gradient(135deg, #FFF3DE 0%, #FFE7C2 100%);
  border: 1px solid #F0E4CE;
  color: #9C7B2E;
  /* Brass — the SVG strokes use currentColor */
}

.media-placeholder svg {
  height: 4rem;
  width: 4rem;
}

/* Match the height of a real news cover so rows stay level. The gap below now
   belongs to .news-thumb, so it is not repeated here. */

.news-card .news-thumb .media-placeholder {
  height: 15rem;
  width: 100%;
}

/* The fundraiser card bleeds its cover past the padding; the stand-in has to
   do the same or it would sit inset from the image on the card beside it. */

.raise .media-placeholder.raise-media {
  margin-left: -28px !important;
  margin-right: -28px !important;
  margin-top: -28px !important;
  height: 13rem !important;
  width: calc(100% + 56px) !important;
  max-width: none !important;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* ========================================= */

/* Section Component Styles                  */

/* ========================================= */

/* Hero Section */

/* Page Single Project */

.page-single-project {
  padding: 64px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.section-white {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 40px;
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1));
  padding-bottom: 18px;
}

.head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.head h2 {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 36px;
  line-height: 1.2;
}

@media (max-width: 834px) {
  .head h2 {
    font-size: 28px;
    line-height: 1.1;
  }

  .row-split {
    flex-direction: column;
  }

  .head-row.no-border {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .head-row.no-border .muted.measure {
    max-width: 100% !important;
  }

  .head-row.no-border h2 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .section-person {
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* Grid Layouts */

.projects-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}

@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.row-split {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.col {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 18px;
}

/* Background Utilities */

.bg-warm {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 231 194 / var(--tw-bg-opacity, 1)) !important;
}

.bg-dark {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(36 28 16 / var(--tw-bg-opacity, 1)) !important;
}

.bg-blue {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(6 64 105 / var(--tw-bg-opacity, 1)) !important;
}

.bg-accent {
  background-image: linear-gradient(120deg, #FFD68F 0%, #F5A524 100%) !important;
}

/* ========================================= */

/* Form Component Styles                     */

/* ========================================= */

/* Input Fields */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  border-radius: 16px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  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;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 165 36 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-color: rgb(245 165 36 / 0.2);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Labels */

label {
  margin-bottom: 6px;
  display: block;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

/* Form Groups */

.form-group {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group:last-child {
  margin-bottom: 0px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.form-row-col {
  min-width: 16rem;
  flex: 1 1 0%;
}

/* Checkbox and Radio */

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  margin-bottom: 0px;
  margin-left: 12px;
  display: inline-block;
  cursor: pointer;
}

/* Help Text */

.form-help {
  margin-top: 6px;
  display: block;
  font-size: 14px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  opacity: 0.7;
}

.form-error {
  margin-top: 6px;
  display: block;
  font-size: 14px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

/* Disabled State */

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0.6;
}

/* File Input */

input[type="file"] {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

input[type="file"]::file-selector-button {
  margin-right: 18px;
  cursor: pointer;
  border-radius: 16px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 165 36 / var(--tw-bg-opacity, 1));
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

input[type="file"]::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(138 90 18 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* =========================================================
   Contact Form 7 — «Звернення з сайту» (form 443)
   ---------------------------------------------------------
   CF7 emits its own wrapper markup, so the layout classes in
   the form template (.cform*) carry the design and these
   rules only need to neutralise CF7's defaults. Everything is
   scoped to .contact-form (the Elementor shortcode widget) so
   no other form on the site inherits it.
   ========================================================= */

.contact-form .cform {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CF7 wraps every control in <p>; strip the paragraph rhythm. */

.contact-form .cform-field,
.contact-form .cform-submit-row {
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-form .cform-field > label,
.contact-form .cform-chips legend {
  margin-bottom: 0px;
  padding: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #221E1B;
  /* Ink */
}

/* CF7 inserts a <span class="wpcf7-form-control-wrap"> around each control;
   it is inline by default, which breaks the field's block layout. */

.contact-form .wpcf7-form-control-wrap {
  display: block;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  border: 1px solid #FFE7C2;
  /* surface-warm */
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder {
  color: rgba(36, 28, 16, 0.45);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(36, 28, 16, 0.45);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #A17402;
  /* brass — same as the solid button */
  box-shadow: 0 0 0 3px rgba(161, 116, 2, 0.14);
}

/* Sized so the whole form column lands level with the contacts column beside
   it; the slack left over after the other fields goes to the message box. */

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

/* ---- «Тема звернення» chips ---- */

.contact-form .cform-chips {
  margin: 0px;
  border-width: 0px;
  padding: 0px;
}

.contact-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

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

.contact-form .wpcf7-list-item label {
  margin: 0px;
  cursor: pointer;
  padding: 0px;
}

/* The radio itself is visually hidden but still focusable and announced. */

.contact-form .wpcf7-list-item input[type="radio"] {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
  border: 1px solid #D9CBB5;
  /* hairline */
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease;
}

.contact-form .wpcf7-list-item-label:hover {
  border-color: #A17402;
  background-color: rgba(255, 231, 194, 0.55);
}

.contact-form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
  font-weight: 600;
  background-color: #FFE7C2;
  /* surface-warm */
  border-color: #A17402;
  /* brass */
  color: #4A2F07;
  /* espresso — 9:1 on surface-warm */
}

.contact-form .wpcf7-list-item input[type="radio"]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid #F5A524;
  outline-offset: 2px;
}

/* ---- Submit ---- */

.contact-form .cform-submit-row {
  margin-top: 0px;
}

/* The `btn btn-cta` classes CF7 puts on the submit input lose to the theme's
   `input[type="submit"]` rule (0-1-1 beats a single class), so the solid-button
   treatment is restated here at 0-2-1. Values come from the same tokens as
   .btn-cta in buttons.css — change the colour there, not here. */

.contact-form input[type="submit"] {
  height: 46px;
  width: 100%;
  cursor: pointer;
  border-radius: 999px;
  border-width: 0px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  font-size: var(--btn-font-size);
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg);
  box-shadow: 0 6px 18px -6px rgba(74, 47, 7, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease;
}

.contact-form input[type="submit"]:hover {
  background-color: var(--btn-solid-bg-hover);
  box-shadow: 0 12px 28px -8px rgba(74, 47, 7, 0.5);
  transform: translateY(-1px);
}

.contact-form input[type="submit"]:active {
  background-color: var(--btn-solid-bg-hover);
  box-shadow: 0 3px 10px -6px rgba(74, 47, 7, 0.4);
  transform: translateY(1px);
}

.contact-form input[type="submit"]:focus-visible {
  outline: 2px solid #F5A524;
  outline-offset: 2px;
}

/* CF7 disables the button while submitting. */

.contact-form input[type="submit"]:disabled {
  pointer-events: none;
  opacity: 0.55;
}

/* CF7 leaves the spinner in the DOM at all times (visibility:hidden), so it
   has to be display:none or it reserves a band of empty space. */

.contact-form .wpcf7-spinner {
  display: none;
}

.contact-form form.submitting .wpcf7-spinner {
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  display: block;
}

/* ---- Validation + response ---- */

.contact-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  display: block;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #B3261E;
}

.contact-form input.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid {
  border-color: #B3261E;
}

.contact-form .wpcf7-response-output {
  margin-top: 18px;
  border-radius: 16px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #D9CBB5;
  background-color: #FFF8EC;
  color: #221E1B;
}

.contact-form form.sent .wpcf7-response-output {
  border-color: #A17402;
  background-color: #FFE7C2;
  color: #4A2F07;
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output {
  border-color: #B3261E;
  background-color: rgba(179, 38, 30, 0.06);
  color: #8A1C16;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form textarea,
  .contact-form .wpcf7-list-item-label {
    transition: none;
  }
}

/* ========================================= */

/* Document rows — /docs/                     */

/* ========================================= */

/* The band background, kicker and heading are Elementor options; only the
   repeating rows come from [fenrir_documents], so these rules stay confined
   to the list itself. */

.docs-list {
  margin: 0px;
  display: flex;
  width: 100%;
  list-style-type: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0px;
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
  border: 1px solid #F0E4CE;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
              transform 0.18s ease;
}

.doc-row:hover {
  border-color: #D9CBB5;
  box-shadow: 0 4px 16px -6px rgba(36, 28, 16, 0.14);
  transform: translateY(-1px);
}

.doc-row__info {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}

.doc-row__name {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #221E1B;
  /* Ink */
}

.doc-row__name a {
  text-decoration-line: none;
  color: inherit;
  transition: color 0.18s ease;
}

.doc-row__name a:hover {
  color: #A17402;
  /* brass */
}

/* Mono, letterspaced, uppercase — the "PDF · 1,2 МБ · 13.03.2026" line. */

.doc-row__meta {
  margin: 0px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B5A42;
  /* Muted */
}

.doc-row__desc {
  margin: 0px;
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.4;
  color: #6B5A42;
}

/* Outlined pill, deliberately quieter than the site's solid CTA so a list of
   ten of them does not read as ten calls to action. */

.doc-row__download {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration-line: none;
  color: #4A2F07;
  /* espresso */
  background-color: transparent;
  border: 1px solid #D9CBB5;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease;
}

.doc-row__download:hover {
  background-color: #A17402;
  /* brass — matches the solid button token */
  border-color: #A17402;
  color: #FFFFFF;
}

.doc-row__download:focus-visible {
  outline: 2px solid #F5A524;
  outline-offset: 2px;
}

/* ---- Full-list mode ([fenrir_documents] with no section) ---- */

.docs-group {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.docs-group:last-child {
  margin-bottom: 0px;
}

.docs-group__title {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 600;
  color: #221E1B;
}

.docs-group__desc {
  margin: 0px;
  font-size: 16px;
  line-height: 1.6;
  color: #6B5A42;
}

@media (max-width: 640px) {
  .doc-row {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .doc-row__download {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-row,
  .doc-row__download,
  .doc-row__name a {
    transition: none;
  }

  .doc-row:hover {
    transform: none;
  }
}

/* ========================================= */

/* Single fundraiser page                     */

/* ========================================= */

/* Shared width shell — matches the boxed content width used by the Elementor
   pages (kit container 1180) so this template lines up with the rest. */

.project-shell {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1180px;
  padding-left: 40px;
  padding-right: 40px;
}

/* ---- Hero band ---- */

.project-hero {
  width: 100%;
  background-color: #FFF8EC;
  /* Cream */
  border-bottom: 1px solid #D9CBB5;
  padding-top: 56px;
  padding-bottom: 56px;
}

.project-back {
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration-line: none;
  color: #6B5A42;
  /* Muted */
  transition: color 0.18s ease;
}

.project-back:hover {
  color: #A17402;
  /* brass */
}

.project-hero__meta {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.project-kicker {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9C7B2E;
  /* Brass */
}

/* Live collections read as open; closed ones step back to a quiet outline so
   the page does not keep shouting for money that is no longer needed. */

.project-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  background-color: #FFE7C2;
  /* surface-warm */
  color: #4A2F07;
  /* espresso — 9:1 on surface-warm */
  border: 1px solid #A17402;
}

.project-status.is-closed {
  background-color: transparent;
  color: #6B5A42;
  border-color: #D9CBB5;
}

.project-title {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 42px;
  color: #221E1B;
  /* Ink */
}

.project-lead {
  margin-top: 18px;
  margin-bottom: 0px;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: #221E1B;
}

/* ---- Main band ---- */

.project-main {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 56px;
  padding-bottom: 72px;
}

/* Story left, donation card right. The card is declared first in the markup
   so that on a phone — where the columns collapse — the amounts and the
   donate button sit above a long read instead of below it. */

.project-layout {
  display: grid;
  align-items: flex-start;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
}

.project-aside {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 96px;
}

.project-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* ---- Donation card ---- */

.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  padding: 28px;
  background-color: #FFF8EC;
  border: 1px solid #D9CBB5;
  box-shadow: 0 2px 10px rgba(36, 28, 16, 0.07);
}

.project-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: "Geist Mono", monospace;
  font-weight: 600;
}

.project-collected {
  font-size: 20px;
  line-height: 1.2;
  color: #221E1B;
}

.project-percent {
  font-size: 17px;
  line-height: 1.65;
  color: #A17402;
  /* brass */
}

.project-goal {
  margin: 0px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B5A42;
}

.project-donate {
  margin-top: 12px;
  width: 100%;
}

.project-facts {
  margin: 0px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0px;
  border-top: 1px solid #E8DCC6;
  padding-top: 16px;
}

.project-fact {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.project-fact dt {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6B5A42;
}

.project-fact dd {
  margin: 0px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: #221E1B;
}

/* ---- Story column ---- */

.project-media {
  margin: 0px;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #D9CBB5;
}

.project-media img {
  display: block;
  height: auto;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.project-body {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.65;
  color: #221E1B;
}

.project-body > * + * {
  margin-top: 18px;
}

.project-body h2 {
  margin-top: 40px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
}

.project-body h3 {
  margin-top: 28px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.project-body ul,
.project-body ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
}

.project-body ul {
  list-style-type: disc;
}

.project-body ol {
  list-style-type: decimal;
}

.project-body li::marker {
  color: #A17402;
}

.project-body a {
  color: #A17402;
  text-underline-offset: 3px;
}

.project-body strong {
  font-weight: 600;
}

/* The sitkomet collection is the first fundraiser to carry images and an
   embedded payment widget in its body, so the block editor's default output
   needed house styling. Images are capped to the text column and share the
   rounding the hero cover already uses. */

.project-body figure {
  margin-top: 28px;
  margin-bottom: 28px;
}

.project-body img {
  display: block;
  height: auto;
  width: 100%;
  border-radius: 16px;
}

.project-body figcaption {
  margin-top: 0.5rem;
  font-size: 16px;
  line-height: 1.6;
  color: #6B5A42;
}

/* Privat24 renders the donation QR as a fixed ~210px square inside the frame,
   so the iframe is sized to it rather than stretched to the column. */

.donate-qr {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.donate-qr iframe {
  display: block;
  height: 15rem;
  width: 15rem;
  max-width: 100%;
  border-radius: 16px;
  border-width: 0px;
}

.donate-qr-note {
  font-size: 16px;
  line-height: 1.6;
  color: #6B5A42;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .project-layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 32px;
  }

  /* Single column: card first, story second — the donate button should not be
     a scroll away on a phone. */

  .project-aside,
  .project-content {
    grid-column: 1;
  }

  .project-aside {
    grid-row: 1;
    position: static;
  }

  .project-content {
    grid-row: 2;
  }

  .project-title {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .project-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .project-hero {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .project-main {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .project-title {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-back {
    transition: none;
  }
}

/* ========================================= */

/* WordPress post/page content               */

/* ========================================= */

/* hello-elementor wraps single posts in .page-content and resets list markers
   to none, so a perfectly valid <ul> renders as unmarked lines. Everything
   here restores readable typography for content written in the editor — news
   posts today, any future page that is not built in Elementor. */

/* Page shell for anything hello-elementor renders itself (legal pages, blog
   posts). Two defaults needed fixing: `main.site-main` begins flush against
   the sticky header and stops ~14px above the footer, and its .page-header
   spans the full 1140 track while the body text is capped at 800 — so the
   title hung 170px to the left of the paragraphs beneath it. */

.site-main {
  padding-top: 56px;
  padding-bottom: 80px;
}

.site-main > .page-header,
.site-main > .page-content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 800px;
}

.site-main > .page-header {
  margin-bottom: 28px;
}

.site-main .entry-title {
  margin: 0px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 38px;
  color: #221E1B;
  /* Ink */
}

@media (max-width: 767px) {
  .site-main {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  .site-main .entry-title {
    font-size: 28px;
  }
}

.page-content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  font-size: 17px;
  line-height: 1.65;
  max-width: 800px;
  color: #221E1B;
  /* Ink */
}

.page-content > * + * {
  margin-top: 18px;
}

.page-content h2 {
  margin-top: 40px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  color: #221E1B;
}

.page-content h3 {
  margin-top: 28px;
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #221E1B;
}

.page-content ul,
.page-content ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
}

.page-content ul {
  list-style-type: disc;
}

.page-content ol {
  list-style-type: decimal;
}

.page-content li::marker {
  color: #A17402;
  /* brass */
}

.page-content a {
  color: #A17402;
  text-underline-offset: 3px;
}

.page-content strong {
  font-weight: 600;
}

.page-content blockquote {
  padding-left: 18px;
  font-style: italic;
  border-left: 3px solid #E8A33D;
  color: #6B5A42;
}

/* Editor images get room to breathe and the site's card radius. */

.page-content .wp-block-image {
  margin-top: 28px;
  margin-bottom: 28px;
}

.page-content .wp-block-image img {
  display: block;
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #D9CBB5;
}

.page-content figcaption {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #6B5A42;
}

/* Phone footage is portrait, and stretching it to the 800px text column made a
   40-second clip 1462px tall. Cap the height and let the width follow the
   aspect ratio instead. */

.page-content .wp-block-video {
  margin-top: 28px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-content .wp-block-video video {
  display: block;
  height: auto;
  width: auto;
  overflow: hidden;
  border-radius: 16px;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid #D9CBB5;
  background-color: #241C10;
}

.page-content .wp-block-video figcaption {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #6B5A42;
}

/* Featured image above a single news post. Covers arrive both as landscape
   photos and as 4:5 social posters, so — as with video — the cap is on height:
   a poster stretched to the 800px text column ran a full screen tall before
   the article even started. */

.site-main > .post-media {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  display: flex;
  width: 100%;
  justify-content: center;
  max-width: 800px;
}

.site-main > .post-media img {
  display: block;
  height: auto;
  width: auto;
  overflow: hidden;
  border-radius: 16px;
  max-width: 100%;
  max-height: 520px;
  border: 1px solid #D9CBB5;
}

@media (max-width: 767px) {
  .site-main > .post-media img {
    max-height: 380px;
  }
}

/* ========================================= */

/* Tailwind CSS - Main Entry Point            */

/* ========================================= */

*, ::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 */
  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: "Geist Mono", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html, body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1));
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
}

a {
  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;
}

.container {
  width: 100%;
}

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

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

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

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

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

/* ---- Base ---- */

.btn {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

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

.btn:disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

.btn > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

/* ---- Primary — amber gradient, the signature action ---- */

.btn-primary {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-primary:disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn-primary {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn-primary:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

.btn-primary > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

.btn-primary {
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition: none;
  }
}

.btn-primary {
  background-image: linear-gradient(120deg, #FFD68F 0%, #F5A524 100%);
  border: 1px solid rgba(138, 90, 18, 0.20);
  /* primary @ 20% */
  box-shadow: 0 6px 18px -6px rgba(245, 165, 36, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  background-image: linear-gradient(120deg, #FFE0A6 0%, #F7B23F 100%);
  box-shadow: 0 12px 26px -8px rgba(245, 165, 36, 0.60),
                inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: 0 3px 10px -6px rgba(245, 165, 36, 0.50),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(1px);
}

/* ---- Secondary — quiet outline ---- */

.btn-secondary {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-secondary:disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn-secondary {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn-secondary:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

.btn-secondary > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

.btn-secondary {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .btn-secondary {
    transition: none;
  }
}

.btn-secondary {
  border: 1.5px solid rgba(138, 90, 18, 0.30);
  /* primary @ 30% */
}

.btn-secondary:hover {
  background-color: rgba(255, 231, 194, 0.55);
  /* surface-warm */
  border-color: rgba(138, 90, 18, 0.75);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background-color: rgba(255, 231, 194, 0.85);
  transform: translateY(1px);
}

/* ---- CTA — solid, used in the header ---- */

.btn-cta {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

.btn-cta:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-cta:disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn-cta {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn-cta:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

.btn-cta > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta {
    transition: none;
  }
}

.btn-cta {
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg);
  box-shadow: 0 6px 18px -6px rgba(74, 47, 7, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-cta:hover {
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg-hover);
  box-shadow: 0 12px 28px -8px rgba(74, 47, 7, 0.5);
  transform: translateY(-1px);
}

.btn-cta:active {
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg-hover);
  box-shadow: 0 3px 10px -6px rgba(74, 47, 7, 0.4);
  transform: translateY(1px);
}

/* ---- Ghost — text only ---- */

.btn-ghost {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

.btn-ghost:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-ghost:disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn-ghost {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn-ghost:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

.btn-ghost > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

.btn-ghost {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .btn-ghost {
    transition: none;
  }
}

.btn-ghost:hover {
  background-color: rgba(255, 231, 194, 0.50);
  /* surface-warm */
  color: #241C10;
  /* text-dark */
}

.btn-ghost:active {
  background-color: rgba(255, 231, 194, 0.80);
  transform: translateY(1px);
}

/* ---- Modifiers ---- */

.btn-sm {
  height: 2.5rem;
  gap: 0.375rem;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 12px;
  line-height: 1.2;
}

.btn-lg {
  height: 52px;
  padding-left: 40px;
  padding-right: 40px;
  font-size: 16px;
  line-height: 1.6;
}

.btn-block {
  width: 100%;
}

/* ---- Contextual: raise-card button pins to the bottom of the card ---- */

.raise .btn-primary {
  margin-top: auto;
}

/* The fundraiser shortcode emits <a class="button-primary">, not an Elementor
     widget — give it the same solid treatment. */

a.button-primary {
  display: inline-flex;
  height: 46px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration-line: none;
}

a.button-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

a.button-primary:disabled {
  pointer-events: none;
  opacity: 0.55;
}

a.button-primary {
  font-size: var(--btn-font-size);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, background-image 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

a.button-primary:focus-visible {
  outline: 2px solid #F5A524;
  /* accent-orange */
  outline-offset: 2px;
}

a.button-primary > svg {
  height: 1.15em;
  width: 1.15em;
  flex-shrink: 0;
}

a.button-primary {
  margin-top: auto;
  align-self: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  a.button-primary {
    transition: none;
  }
}

a.button-primary {
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg);
  border: 1px solid var(--btn-solid-bg);
}

a.button-primary:hover {
  color: var(--btn-solid-text);
  background-color: var(--btn-solid-bg-hover);
  border-color: var(--btn-solid-bg-hover);
  transform: translateY(-2px);
}

/* Buttons live in ./components/buttons.css */

/* Cards */

.card {
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card: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));
  --tw-shadow: 0 10px 24px rgba(36,28,16,0.12);
  --tw-shadow-colored: 0 10px 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);
}

/* Headers and Typography */

/* Tags and Badges */

.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(138 90 18 / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

/* Progress bar */

.progress-bar {
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(120deg, #FFD68F 0%, #F5A524 100%);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Section containers */

.section-container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-left: 28px;
  padding-right: 28px;
}

/* Flex utilities */

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

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

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

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

.-mx-7 {
  margin-left: -1.75rem;
  margin-right: -1.75rem;
}

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

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

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

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

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

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

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

.block {
  display: block;
}

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

.inline {
  display: inline;
}

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

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.table-caption {
  display: table-caption;
}

.table-cell {
  display: table-cell;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

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

.hidden {
  display: none;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-btn {
  height: 46px;
}

.w-5 {
  width: 1.25rem;
}

.w-\[calc\(100\%\+56px\)\] {
  width: calc(100% + 56px);
}

.w-full {
  width: 100%;
}

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

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

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

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

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

.-translate-x-full {
  --tw-translate-x: -100%;
  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-x-0 {
  --tw-translate-x: 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-x-full {
  --tw-translate-x: 100%;
  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-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));
}

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

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

.resize {
  resize: both;
}

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

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

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

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

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

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

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

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

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

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

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

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

.gap-sp-4 {
  gap: 28px;
}

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

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

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-card {
  border-radius: 16px;
}

.rounded-pill {
  border-radius: 999px;
}

.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.border {
  border-width: 1px;
}

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

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

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

.border-accent-orange {
  --tw-border-opacity: 1;
  border-color: rgb(245 165 36 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-surface-warm {
  --tw-border-opacity: 1;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

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

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

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

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-amber-gradient {
  background-image: linear-gradient(120deg, #FFD68F 0%, #F5A524 100%);
}

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

.p-7 {
  padding: 1.75rem;
}

.p-sp-3 {
  padding: 18px;
}

.px-sp-3 {
  padding-left: 18px;
  padding-right: 18px;
}

.px-sp-4 {
  padding-left: 28px;
  padding-right: 28px;
}

.py-sp-2 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-sp-6 {
  padding-top: 64px;
  padding-bottom: 64px;
}

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

.font-body {
  font-family: "Geist", "Geist Fallback", "Arial", sans-serif;
}

.font-mono {
  font-family: "Geist Mono", monospace;
}

.text-3xl {
  font-size: 23px;
  line-height: 1.1;
}

.text-base {
  font-size: 16px;
  line-height: 1.6;
}

.text-sm {
  font-size: 14px;
  line-height: 1.4;
}

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

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

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

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-accent-orange {
  --tw-text-opacity: 1;
  color: rgb(245 165 36 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-text-dark {
  --tw-text-opacity: 1;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1));
}

.text-text-dark\/55 {
  color: rgb(36 28 16 / 0.55);
}

.text-text-dark\/70 {
  color: rgb(36 28 16 / 0.7);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-60 {
  opacity: 0.6;
}

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

.shadow-card {
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.\!invert {
  --tw-invert: invert(100%) !important;
  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) !important;
}

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

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

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

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

/* Custom transition utilities */

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

/* Text utilities */

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

/* Spacing utilities */

/* Border utilities */

/* Animation utilities */

/* Grid utilities */

.grid-projects {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}

@media (min-width: 768px) {
  .grid-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ========================================= */

/* Custom Component Layers                   */

/* ========================================= */

/* ========================================= */

/* Global Styles and Overrides               */

/* ========================================= */

/* ========================================= */

/* Elementor Overrides (WordPress-specific) */

/* ========================================= */

.elementor-widget-container {
  padding: 0px !important;
}

/* Elementor buttons carry their colours per-widget; the shared part of the hover
   language — the 2px lift and its easing — belongs here so every button matches. */

.elementor-widget-button .elementor-button {
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
  transform: translateY(-2px);
}

.elementor-widget-button .elementor-button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-button .elementor-button,
  .elementor-widget-button .elementor-button:hover,
  .elementor-widget-button .elementor-button:focus-visible,
  .elementor-widget-button .elementor-button:active {
    transition: none;
    transform: none;
  }
}

.section-hero .elementor-heading-title,
.section-hero .elementor-widget-text-editor,
.section-hero .elementor-widget-text-editor * {
  --tw-text-opacity: 1 !important;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1)) !important;
}

.card-stat {
  border-radius: 16px !important;
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 231 194 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1)) !important;
  padding: 28px !important;
  --tw-shadow: 0 2px 10px rgba(36,28,16,0.07) !important;
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.card-stat .elementor-heading-title,
.card-stat .elementor-widget-text-editor {
  --tw-text-opacity: 1 !important;
  color: rgb(36 28 16 / var(--tw-text-opacity, 1)) !important;
}

.bg-dark .elementor-heading-title,
.bg-dark .elementor-widget-text-editor,
.bg-dark .elementor-widget-text-editor * {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.bg-blue .elementor-heading-title,
.bg-blue .elementor-widget-text-editor,
.bg-blue .elementor-widget-text-editor * {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.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\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

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

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:shadow-card-hover:hover {
  --tw-shadow: 0 10px 24px rgba(36,28,16,0.12);
  --tw-shadow-colored: 0 10px 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);
}

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

.focus\:ring-2: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(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\:ring-accent-orange:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 165 36 / var(--tw-ring-opacity, 1));
}

@media (min-width: 768px) {
  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

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

  .md\:w-\[35\%\] {
    width: 35%;
  }

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

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

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .md\:gap-x-\[20px\] {
    -moz-column-gap: 20px;
         column-gap: 20px;
  }

  .md\:p-sp-4 {
    padding: 28px;
  }

  .md\:text-5xl {
    font-size: 31px;
    line-height: 1.08;
  }
}

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

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:auto-cols-max {
    grid-auto-columns: max-content;
  }

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

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

  .lg\:grid-cols-none {
    grid-template-columns: none;
  }

  .lg\:p-sp-6 {
    padding: 64px;
  }

  .lg\:text-6xl {
    font-size: 36px;
    line-height: 1.1;
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }

  .dark\:border-transparent {
    border-color: transparent;
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:bg-opacity-80 {
    --tw-bg-opacity: 0.8;
  }

  .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

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

  .dark\:hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:text-gray-300:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
}