/* ===============================================
   FONTS & IMPORTS
   =============================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap");

/* ===============================================
   CSS VARIABLES & ROOT CONFIGURATION
   =============================================== */
:root {
  --base: #1f3245;
  --c1: #f4d35e;
  --c2: #f19939;
  --c3: #e54873;
  --c4: #4eb96f;
  --c5: #3c97d2;
  --lift: -4px;
  --band-w: 160%;
  --band-h: 160%;
}

/* ===============================================
   GLOBAL TYPOGRAPHY & BASE STYLES
   =============================================== */
/* Root defaults */
html {
  font-size: 16px;
}

/* Headings: mobile → desktop via clamp(min, a + b*vw, max) */
body.home .sf-hero h1,
h1 {
  font-size: clamp(
    2.625rem,
    calc(1.5833rem + 5.2083vw),
    5.75rem
  ); /* 42 → 92px */
  line-height: 1.1;
}

h2 {
  font-size: clamp(2rem, calc(1.3333rem + 3.3333vw), 4rem); /* 32 → 64px */
  line-height: 1.25;
}

h3 {
  font-size: clamp(1.625rem, calc(1.25rem + 1.875vw), 2.75rem); /* 26 → 44px */
  line-height: 1.2;
}

h4 {
  font-size: clamp(1.375rem, calc(1.1667rem + 1.0417vw), 2rem); /* 22 → 32px */
  line-height: 1.3;
}

h5 {
  font-size: clamp(
    1.125rem,
    calc(1.0417rem + 0.4167vw),
    1.375rem
  ); /* 18 → 22px */
  line-height: 1.35;
}

h6 {
  font-size: 0.875rem; /* 14px fixed (no need to scale) */
  line-height: 1.4;
}

/* ===============================================
   HEADER & NAVIGATION
   =============================================== */
/* Blurred header styling */
.header.fixed {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: #f1f0eb solid 1px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(10px);
}

/* Main navigation styling */
nav#full-menu {
  background: #ffffff40;
  backdrop-filter: blur(16px);
  border-radius: 10000px;
  padding: 0 40px;
  color: #fff !important;
}
.thb-full-menu.thb-underline > li > a:before {
  background: #1f3245 !important;
}

nav#full-menu a {
  color: #1f3245;
}

.fixed nav#full-menu {
  background: unset;
  backdrop-filter: unset;
}

/* Dropdown Menu Styles */
.thb-dropdown-color-light .thb-full-menu .sub-menu {
  background: #fff;
  padding: 4px;
}

.thb-full-menu .sub-menu li {
  background-color: unset;
  border: solid 1px white;
  border-radius: 4px;
  margin-bottom: 0px;
}

.thb-full-menu .sub-menu li:hover {
  background-color: #f8e399;
  border: solid 1px #f4d35e;
  border-radius: 4px;
  margin-bottom: 0px;
}

/* Animated left chevron on hover */
.thb-full-menu .sub-menu li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Chevron: initial state */
.thb-full-menu .sub-menu li > a::after {
  content: "›";
  margin-left: 6px; /* constant spacing to avoid layout jump */
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
  display: inline-block;
}

/* Animate when the LI is hovered */
.thb-full-menu .sub-menu li:hover > a::after {
  opacity: 1;
  transform: translateX(0);
}

/* Donation tab fade effects */
#fs-donation-tab {
  transition: color 0.3s ease-out;
}

#fs-donation-tab.tab-text-hidden {
  color: transparent !important;
  text-shadow: none !important; /* prevent ghosting */
}

#fs-donation-tab:hover {
  color: inherit !important;
}

/* The text wrapper for donation tab */
#fs-donation-tab .tab-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
  transition: opacity 0.3s ease-out, max-width 0.3s ease-out,
    max-height 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
}

/* Collapse when hidden (shrinks width+height) */
#fs-donation-tab.tab-text-hidden .tab-label {
  opacity: 0;
  max-width: 0;
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Always show on hover as a fallback */
#fs-donation-tab:hover .tab-label {
  opacity: 1;
  max-width: 20rem; /* enough to fit the text */
  max-height: 3rem; /* enough to fit the line */
}

/* ===============================================
   HERO SECTION STYLES
   =============================================== */
.sf-hero h1,
body.home .sf-hero h1 {
  font-size: clamp(2.625rem, calc(1.5833rem + 5.2083vw), 4rem); /* 42 → 92px */
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sf-hero a {
  background-color: #f4d35e;
  color: #2d3e50;
  transform: translate(0px, 0px);
  transition: all ease-out 0.3s;
  margin: 0 8px 0 0;
}

.sf-hero a:hover {
  transform: translate(0px, -4px) !important;
  background-color: #dab647;
  color: #2d3e50;
}

.hero-light .thb-row-overlay {
  background: linear-gradient(
    -90deg,
    rgb(10 10 10 / 0%) 0%,
    rgb(10 10 10 / 0%) 40%,
    rgb(10 10 10 / 100%) 100%,
    #0a0a0a 100%
  ) !important;
}

/* ===============================================
   DIVIDERS & DECORATIVE ELEMENTS
   =============================================== */
.divider.adjust-upwards-013 {
  margin-top: unset;
  z-index: 10;
  position: absolute;
}

.divider.adjust-upwards-013 img {
  height: 56px;
  margin-top: -45px;
  transform: unset;
}

.sf-hero-divider {
  height: 0px;
}

.adjust-upwards-right {
  margin-top: -0.6%;
}

.divider.adjust-upwards-right img {
  content: url("/wp-content/uploads/2025/08/navy-divider-right.svg");
}

/* ===============================================
   BLOG & POST STYLING
   =============================================== */
.sf-homepage-blog {
  display: flex;
  justify-content: center;
  padding: 8vh 0 6vh;
}

.sf-homepage-blog .medium-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 95%;
  max-width: 100%;
}

.sf-homepage-blog .medium-2 {
  display: none;
}

.sf-homepage-blog a.rounded-button-inverse {
  border: 0px;
}

a.rounded-button-inverse:hover {
  background: #1f3245;
  color: white;
}

.tags-list {
  padding: 0px 2px;
  display: none;
}

/* Tag color schemes */
.tags-list .tag.health,
.posts-insight-style .tag.health {
  background-color: #3c97d2 !important;
  color: #ffffff !important;
}

.latest-news-wrapper .tag-hawaii .post-tags,
.post-container .tag.hawaii,
.tags-list .tag.hawaii,
.posts-insight-style .tag.hawaii,
.posts-insight-style .tag.hawaii a,
.stupski-external-link-block .tag.hawaii {
  background-color: #c05630 !important;
  color: #ffffff !important;
}

.latest-news-wrapper .tag-perspectives .post-tags,
.post-container .tag.perspectives,
.tags-list .tag.perspectives,
.posts-insight-style .tag.perspectives,
.posts-insight-style .tag.perspectives a,
.stupski-external-link-block .tag.perspectives {
  background-color: #b6e97f !important;
  color: #1f3245 !important;
}

.latest-news-wrapper .tag-food-justice .post-tags,
.post-container .tag.food-justice,
.tags-list .tag.food-justice,
.posts-insight-style .tag.food-justice,
.posts-insight-style .tag.food-justice a,
.stupski-external-link-block .tag.food-justice {
  background-color: #50b971 !important;
  color: #fff !important;
}

.latest-news-wrapper .tag-bay-area .post-tags,
.post-container .tag.bay-area,
.tags-list .tag.bay-area,
.posts-insight-style .tag.bay-area,
.posts-insight-style .tag.bay-area a,
.stupski-external-link-block .tag.bay-area {
  background-color: #f4d35e !important;
  color: #1f3245 !important;
}

/* ===============================================
   FEATURED CONTENT & SLIDER STYLES
   =============================================== */
.sf-homepage-featured {
  padding: 14vh 0 6vh;
}

.sf-homepage-featured a:hover {
  color: #1f3245;
  transform: translateX(4px);
}

.sf-homepage-featured img.thb_image.attachment-full {
  border-radius: 8px;
}

.sf-homepage-featured h2,
.sf-homepage-featured h3,
.sf-homepage-featured p,
.sf-homepage-featured span,
.sf-homepage-featured a {
  color: #fff;
}

.btn-text.style4 .arrow svg:first-child {
  fill: #fff;
}

.sf-homepage-featured .btn-text.style4 {
  font-size: 24px;
}

/* Slider-specific styles */
.sf-homepage-slider .slick-slide {
  display: flex; /* make slider horiz */
  flex-direction: row;
  align-items: center;
}

.sf-homepage-slider.thb-content-carousel.center-arrows.row {
  padding: 0;
}

.sf-homepage-slider .slider-content .vc_column-inner {
  max-width: 80%;
}

.sf-homepage-slider .slider-content {
  display: flex;
  justify-content: center;
}

.sf-homepage-slider .btn-text.style5 {
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  border-bottom: solid white 1px;
  padding-bottom: 8px;
}

/* Slider controls styling */
.thb-content-carousel.center-arrows.row .slick-nav {
  border-color: #fff;
}

.thb-content-carousel.center-arrows.row .slick-nav.slick-next {
  right: 20px;
  bottom: 20px !important;
  top: unset;
  left: unset;
}

.thb-content-carousel.center-arrows.row .slick-nav.slick-prev {
  right: 72px;
  bottom: 20px !important;
  top: unset;
  left: unset;
}

.thb-content-carousel.center-arrows.row .slick-nav svg {
  fill: #fff;
}

.thb-content-carousel.center-arrows.row .slick-nav:hover {
  border-color: #fff;
}

/* Uniform image sizing for slides */
.slick-slide .thb-image-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* pick your ratio: 16/9, 4/3, 1/1, etc. */
  overflow: hidden;
}

.slick-slide .thb-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills box consistently; crops edges if needed */
  display: block;
}

.slick-track {
  display: block;
}

.slick-slide {
  height: auto;
}

/* Hide any side peeking, even if centerMode/centerPadding is set */
.slick-slider .slick-list {
  overflow: hidden !important;
  padding: 0 !important; /* defeats inline centerPadding */
}

/* Remove theme slide margins that can cause bleed */
.slick-slider .slick-slide {
  margin: 0 !important;
}

/* Make sure the track doesn't extend visually beyond the viewport */
.slick-slider .slick-track {
  margin: 0 !important;
}

.your-slider-wrapper,
.your-slider-wrapper .slick-slider {
  overflow: hidden; /* optional: if a parent is leaking */
}

/* Make slide fullwidth */
.row.max_width {
  max-width: 100vw !important;
}

.col-img.columns {
  padding-right: 0;
  padding-left: 0;
}

/* ===============================================
   INITIATIVES SECTION
   =============================================== */
.sf-initiatives .wpb_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  align-self: center;
}

.sf-initiatives .vc_column-inner {
  padding: 10% 5% !important;
}

.sf-initiatives a {
  transform: translate(0px, 0px);
  transition: all ease-out 0.3s;
  color: #fff !important;
}

.sf-initiatives a:hover {
  transform: translate(0px, -4px) !important;
  background-color: #2d3e50 !important;
}

.sf-initiatives h2 {
  color: #2d3e50 !important;
  line-height: 1;
  margin-bottom: 8px;
}

.sf-initiatives .thb_image_link .thb-image-inner {
  display: block;
  width: 100%;
  position: relative;
  height: 268px;
  width: 268px;
  display: flex;
}

.sf-initiatives img.thb_image {
  width: 100%;
  height: auto;
}

.sf-initiatives .thb_image_link .thb-image-inner .hp-clear-img {
  height: unset;
  width: unset;
}

.sf-initiatives .hp-img-clear.thb_image_link .thb-image-inner {
  height: unset;
  width: unset;
}

/* ===============================================
   SPLIT PANELS & WEDGES
   =============================================== */
/* base panels */
.sf-split-l,
.sf-split-r {
  position: relative;
  overflow: visible; /* allow wedge to sit -11px outside */
}

/* wedge pseudos */
.sf-split-l::before,
.sf-split-r::before {
  content: "";
  position: absolute;
  width: 100%; /* half the screen */
  height: 22px; /* fixed height */
  background-repeat: no-repeat;
  background-size: 100% 22px; /* scale horizontally only */
  pointer-events: none;
  z-index: 2;
}

/* left panel: wedge at top-left, optically centered with -11px */
.sf-split-l::before {
  top: 0;
  left: 0; /* uses the image as-is */
  transform-origin: left top;
  background-position: left top;
  background-image: url("https://stupski.org/wp-content/uploads/2025/08/hp-wedge-left-1.svg");
}

/* right panel: wedge at bottom-right, mirrored horizontally */
.sf-split-r::before {
  bottom: 0;
  right: 0; /* reuse same image mirrored */
  transform-origin: right bottom;
  background-position: right bottom;
  background-image: url("https://stupski.org/wp-content/uploads/2025/08/hp-wedge-right-1.svg");
}

/* ===============================================
   SF-CYCLE BUTTON ANIMATION SYSTEM
   =============================================== */
/* HOST (works for <a.sf-cycle> and VC button inside .sf-cycle) */
.sf-cycle,
.sf-cycle a,
.sf-cycle button.vc_btn3,
a.sf-cycle {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(0) !important;
  transition: transform 400ms cubic-bezier(0.16, 0.84, 0.44, 1) !important;
  /* force our base bg so domes read clearly */
  background-color: var(--base) !important;
  border-radius: 9999px !important;
}

/* label */
.sf-cycle .rb-label {
  position: relative;
  z-index: 5;
}

/* DOMES (injected spans) */
.sf-cycle .band,
.sf-cycle .cover {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--band-w) !important;
  height: var(--band-h) !important;
  transform: translate(-50%, 110%) !important; /* start below */
  border-radius: 50% 50% 0 0 / 90% 90% 0 0 !important; /* dome cap */
  pointer-events: none !important;
  will-change: transform !important;
  z-index: 1 !important;
  /* default = no transition (so hover-out snaps cleanly) */
  transition: none !important;
}

.sf-cycle .cover {
  z-index: 4 !important;
  background: var(--base) !important;
}

.sf-cycle .b1 {
  background: var(--c1) !important;
}

.sf-cycle .b2 {
  background: var(--c2) !important;
}

.sf-cycle .b3 {
  background: var(--c3) !important;
}

.sf-cycle .b4 {
  background: var(--c4) !important;
}

.sf-cycle .b5 {
  background: var(--c5) !important;
}

/* HOVER (intro only; outro snaps down) */
.sf-cycle:hover,
.sf-cycle:hover a,
.sf-cycle:hover button.vc_btn3 {
  transform: translateY(var(--lift)) !important;
}

/* apply transforms + per-band timing ONLY while hovered */
.sf-cycle:hover .b1 {
  transform: translate(-50%, -140%) !important;
  transition: transform 1200ms cubic-bezier(0.4, 0.8, 0.4, 1) -50ms !important;
}

.sf-cycle:hover .b2 {
  transform: translate(-50%, -140%) !important;
  transition: transform 1000ms cubic-bezier(0.4, 0.8, 0.4, 1) 100ms !important;
}

.sf-cycle:hover .b3 {
  transform: translate(-50%, -140%) !important;
  transition: transform 900ms cubic-bezier(0.4, 0.8, 0.4, 1) 250ms !important;
}

.sf-cycle:hover .b4 {
  transform: translate(-50%, -140%) !important;
  transition: transform 950ms cubic-bezier(0.4, 0.8, 0.4, 1) 400ms !important;
}

.sf-cycle:hover .b5 {
  transform: translate(-50%, -140%) !important;
  transition: transform 1800ms cubic-bezier(0.4, 0.8, 0.4, 1) 350ms !important;
}

.sf-cycle:hover .cover {
  transform: translate(-50%, -140%) !important;
  transition: transform 1100ms cubic-bezier(0.4, 0.8, 0.4, 1) 850ms !important;
}

/* ===============================================
   FIGURES & COUNTERS SECTION
   =============================================== */
.sf-hp-figures-intro {
  display: flex;
  justify-content: center;
  padding: 14vh 35px 6vh !important;
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.sf-hp-figures-intro span,
.sf-hp-figures-intro p {
  color: #1f3245;
}

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

.sf-hp-figures h4 {
  padding-bottom: 4vh;
}

.narrow-column .align-center span.lines {
  text-align: center;
  padding-bottom: 4vh;
}

/* Background decorative icons */
.sf-hp-figures-intro::before,
.sf-hp-figures-intro::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  width: clamp(160px, 30vw, 450px);
  height: clamp(160px, 30vw, 450px);
  background: none;
  -webkit-mask: url("/wp-content/uploads/2025/09/icon-thought-leadership.svg")
    no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/09/icon-thought-leadership.svg") no-repeat
    center / contain;
  background-color: #1f3245 !important;
  opacity: 1;
  z-index: 1;
}

.sf-hp-figures-intro::before {
  top: 40% !important;
  right: -10% !important;
}

.sf-hp-figures-intro::after {
  bottom: 40% !important;
  left: -6% !important;
}

.sf-hp-figures-intro .btn span {
  color: #fff;
}

/* Main figures layout */
.sf-hp-figures {
  display: flex;
  justify-content: center;
}

.sf-hp-figures .thb-counter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* counter | text */
  grid-template-areas:
    "count title"
    "count desc";
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  margin-bottom: 0; /* remove default gap between counters */
}

/* map children to grid areas */
.sf-hp-figures .thb-counter > .counter-container {
  grid-area: count;
  display: inline-block;
}

.sf-hp-figures .thb-counter > h6 {
  grid-area: title;
  margin: 0;
}

.sf-hp-figures .thb-counter > .thb-description {
  grid-area: desc;
  margin: 0;
}

/* tighten heading/desc alignment */
.sf-hp-figures .thb-counter h6 {
  max-width: 166px;
  white-space: break-spaces;
  color: #1f3245;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-transform: none !important;
  letter-spacing: normal !important;
  align-self: end; /* bottom of title cell */
  text-align: left;
}

.sf-hp-figures .thb-description {
  align-self: start; /* top of desc cell */
  text-align: left;
}

/* counter disk */
.sf-hp-figures .odometer-inside {
  width: 200px; /* single source of truth */
  height: 200px; /* single source of truth */
  padding: 15px;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center; /* center in its grid column */
}

/* color each counter */
.thb-counter:nth-of-type(2) .odometer-inside {
  background: unset !important;
}

.thb-counter:nth-of-type(3) .odometer-inside {
  background: #3c97d2;
}

.thb-counter:nth-of-type(4) .odometer-inside {
  background: #f19939;
}

/* number color */
.sf-hp-figures .thb-counter .h1 {
  color: #1f3245 !important;
}

/* optional style2 tweaks kept (no duplicates) */
.sf-hp-figures .thb-counter.counter-style2 .counter-container {
  min-width: min-content;
  padding: 1vh 0;
}

.sf-hp-figures .thb-counter.counter-style2.left .counter-container {
  padding-right: 0;
  border-right: 0; /* no color set previously, so make it explicit/no-op */
}

/* counter positioning */
.counter-container {
  position: relative;
}

/* Dollar badge (top-left of disk) */
.odometer-inside::before {
  content: "$";
  position: absolute;
  top: 20px;
  left: 10px;
  height: 32px;
  width: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 25px/1 Arial, sans-serif;
  color: #1f3145;
  background: #f5d35eb3;
  backdrop-filter: blur(32px);
  z-index: 2;
}

/* "Thousand" label centered under digits */
.odometer-inside::after {
  content: "Thousand";
  position: absolute;
  bottom: 36px; /* tweak to taste */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #1f3145;
  height: 32px;
  width: 32px;
  border-radius: 9999px;
  z-index: 2;
}

/* small nudge to digits if desired */
span.odometer-digit {
  margin-top: -16px;
}

.sf-hp-figures .thb_image_link .thb-image-inner img {
  max-width: 74%;
}

.sf-hp-figures .specialties {
  margin-bottom: 4vh;
}

.sf-hp-figures span.lines {
  color: #1f3145;
}

/* ===============================================
   XL COUNTER STYLES (Large Format Counters)
   =============================================== */
.xl-counter .left.thb-counter {
  display: flex;
  flex-direction: row;
  row-gap: 0px;
  flex-wrap: wrap;
  align-items: flex-end;
  grid-template-columns: auto auto;
  justify-content: flex-start;
  justify-items: start;
  column-gap: 8px;
  padding-bottom: 3vh;
  padding-top: 3vh;
}

/* large counter figure */
.xl-counter .thb-counter.counter-style1 .counter-container {
  margin-bottom: 0px;
  flex: 0 0 auto;
}

/* counter unit of measure */
.xl-counter .thb-counter h6 {
  text-align: left;
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 35px;
  text-transform: unset !important;
  margin-bottom: 14px;
  flex: 0 0 auto;
}

/* brief description or title of counter */
.xl-counter .thb-counter .thb-description p {
  text-align: right;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
  margin-bottom: 0px;
}

.xl-counter .h1.odometer.odometer-theme-minimal,
.xl-counter .thb-counter .h1 {
  color: var(--dark-navy, #1f3245);
  font-size: 153px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 90%;
}

.xl-counter span.odometer-digit-inner {
  align-items: flex-end;
}

.xl-counter .odometer-inside::before {
  content: "$";
  position: absolute;
  top: 36px;
  left: -40px;
  justify-content: center;
  color: #1f3245;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 88px;
  font-style: normal;
  font-weight: 400;
  line-height: 58px;
  background: unset;
}

.xl-counter .odometer-inside::after {
  display: none !important;
  content: "";
}

.xl-counter .thb-description {
  flex-basis: 100%;
}

.xl-counter .row-flex {
  justify-content: space-around !important;
  padding-top: 6vh !important;
}

/* ===============================================
   PRE-FOOTER & SUBSCRIPTION SECTION
   =============================================== */
.sf-prefooter {
  position: relative;
  overflow: hidden;
  height: 80vh;
  display: flex;
  padding: clamp(16px, 3vw, 40px);
  align-items: flex-end;
  justify-content: center;
  margin-top: -25px;
  z-index: 0;
}

/* Top gradient band */
.row.wpb_row.sf-prefooter.thb_video_bg::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0;
  top: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    #f4d35f 0%,
    rgba(244, 211, 95, 0) 100%
  );
  z-index: 10 !important;
  pointer-events: none;
}

/* Bottom gradient band */
.wpb_row.sf-prefooter.thb_video_bg::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 199px !important;
  background: linear-gradient(
    0deg,
    #413570 0%,
    rgba(65, 53, 112, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
}

.row.wpb_row.sf-prefooter.thb_video_bg,
.row.wpb_row.sf-prefooter.thb_video_bg .row {
  position: relative !important;
  overflow: hidden;
  isolation: isolate;
}

.row.wpb_row.sf-prefooter.thb_video_bg > div[style*="background-position"] {
  position: absolute !important;
  z-index: 0 !important;
}

.sf-prefooter .thb-slidetype {
  visibility: unset;
}

/* Glassy content card */
.sf-prefooter .sf-card {
  width: min(92vw, 900px);
  background: #f4d35f;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  padding: 20px 20px 24px;
  color: #1f3245;
}

.sf-prefooter .sf-card h2 {
  margin: 0 0 12px;
  line-height: 1;
}

/* Colorful heading spans */
.sf-card h2.colorful span:nth-child(1) {
  color: #413570;
}

.sf-card h2.colorful span:nth-child(2) {
  color: #d2714f;
}

.sf-card h2.colorful span:nth-child(3) {
  color: #e54873;
}

.sf-card h2.colorful span:nth-child(4) {
  color: #309b73;
}

.sf-card h2.colorful span:nth-child(5) {
  color: #f08e24;
}

.sf-card h2.colorful span:nth-child(6) {
  color: #3c97d2;
}

.sf-card h2.colorful span:nth-child(7) {
  color: #4eb96f;
}

.sf-card h2.colorful span:nth-child(8) {
  color: #74c6d1;
}

.sf-card h2.colorful span:nth-child(9) {
  color: #6956b8;
}

.sf-card h2.colorful span:nth-child(10) {
  color: #e54d3c;
}

/* Purple-themed pre-footer variant */
.stupski-purple-prefooter {
  padding-top: 6vh !important;
  padding-bottom: 4vh !important;
}

.stupski-purple-prefooter div#gform_wrapper_4 {
  max-width: 70%;
  margin: auto;
}

.stupski-purple-prefooter .sf-card label {
  display: block;
}

.stupski-purple-prefooter .gform_wrapper.gravity-theme input[type="email"] {
  font-size: 20px;
}

/* ===============================================
   FORM STYLING (GRAVITY FORMS)
   =============================================== */
.sf-prefooter label.gfield_label.gform-field-label {
  display: none;
}

.wpb_raw_code.wpb_content_element.wpb_raw_html {
  margin-bottom: 0px;
}

/* Form grid layout */
#gform_4 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: end;
}

#gform_4 .gform-body {
  grid-column: 1 / 2;
}

#gform_4 .gform_footer {
  grid-column: 2 / 3;
  margin: 0;
  padding: 0;
}

#gform_fields_4 {
  display: block;
}

#field_4_1 .gfield_label {
  margin-bottom: 6px;
  color: #1f3245;
  font-weight: 600;
}

.sf-card #field_4_1 .gfield_label {
  display: none;
}

/* Input styling */
#input_4_1 {
  width: 100%;
  height: 62px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: white;
  color: #1f3245;
  outline: none;
}

#input_4_1::placeholder {
  color: #1f3245d5;
}

input#gform_submit_button_4 {
  height: 62px;
}

/* Submit button styling */
#gform_submit_button_4,
a.rounded-button-inverse {
  height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  background: #1f3245;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.sf-card #gform_submit_button_4 {
  background: #f5d35e;
  color: #1f3245;
}

#gform_submit_button_4:hover,
a.rounded-button-inverse:hover {
  transform: translateY(-4px);
}

#gform_wrapper_4.gform_wrapper {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

.gform_wrapper.gravity-theme .gform_footer input {
  margin-bottom: 0px;
}

.gform_wrapper.gravity-theme .gfield_required {
  display: none;
}

/* ===============================================
   FOOTER STYLES
   =============================================== */
#footer li {
  line-height: 1.4;
}

#footer a {
  font-size: 18px;
}

#footer .wp-block-social-link a {
  font-size: 32px;
}

#footer li.wp-social-link.wp-block-social-link {
  background: none !important;
}

footer .column,
.columns {
  padding-right: 1em;
  padding-left: 1em;
}

#footer
  ul.wp-block-social-links.has-normal-icon-size.is-style-default.is-content-justification-center.is-layout-flex.wp-container-core-social-links-is-layout-16018d1d.wp-block-social-links-is-layout-flex {
  gap: 4px;
}

.masonry_btn {
  display: inline-block;
  margin-top: 8px;
}

#footer p.p1 {
  display: flex;
  flex-direction: column;
}

.row.footer-row {
  padding-bottom: 8vh;
  column-gap: 1.2vw;
}

#footer .footer-row img {
  height: 18vh;
}

#footer .footer-row .large-2 {
  flex: 0 0 20%;
  max-width: unset;
}

#footer .footer-row div:nth-child(2) {
  flex: 0 0 auto;
  margin-left: auto;
}

#footer .footer-row div:nth-child(3) {
  flex: 0 0 auto;
}

#footer .footer-row div:nth-child(4) {
  flex: 0 0 auto;
}

#footer .footer-row div:nth-child(5) {
  flex: 0 0 auto;
}

#footer .footer-row div:nth-child(6) {
  flex: 0 0 auto;
}

#footer .footer-row div:nth-child(2),
#footer .footer-row div:nth-child(3),
#footer .footer-row div:nth-child(4),
#footer .footer-row div:nth-child(5),
#footer .footer-row div:nth-child(6),
footer#footer .footer-row > div:last-child {
  padding-top: 6vh;
}

#footer .footer-row p,
#footer .footer-row .menu-footer-container,
#footer .footer-row .menu-footer-signup-container,
#footer .footer-row .menu-footer-legal-container,
#footer .menu-footer-newsletter-legal-container {
  margin-top: unset;
}

.fixed-footer-container #footer p,
.fixed-footer-container #footer p span,
.fixed-footer-container #footer a {
  font-size: 16px;
}

.wp-block-social-links .wp-social-link svg {
  height: 2em;
  width: 2em;
}

/* Footer slogan styling */
#footer .footer-slogan {
  display: inline-block;
  white-space: nowrap;
  transform-origin: left center;
  letter-spacing: unset !important;
  font-size: calc(100vw / 13.25);
  word-spacing: -0.5rem;
}

#footer .footer-slogan span {
  display: inline-block;
}

/* ===============================================
   UTILITY & MISCELLANEOUS STYLES
   =============================================== */
.lead p {
  font-size: 24px;
}

.btn.style2:hover {
  transform: translate(0px, -4px) !important;
}

input[type="submit"],
.button,
.btn {
  padding: 0 32px;
}

/* ===============================================
   ACCESSIBILITY & REDUCED MOTION
   =============================================== */
/* Optional: reduced motion users get instant change */
@media (prefers-reduced-motion: reduce) {
  #fs-donation-tab,
  #fs-donation-tab .tab-label {
    transition: none;
  }

  .sf-cycle,
  .sf-cycle a,
  .sf-cycle button.vc_btn3,
  .sf-cycle .band,
  .sf-cycle .cover {
    transition: none !important;
    transform: none !important;
  }
}

/* ===============================================
   RESPONSIVE BREAKPOINTS
   =============================================== */

@media (max-width: 1600px) and (min-width: 1366px) {
  nav#full-menu {
    background: #ffffff3b;
  }
}

@media (max-width: 1365px) and (min-width: 1200px) {
  .wp-block-social-links .wp-social-link svg {
    height: 1.8em;
    width: 1.8em;
  }
  #footer .footer-row .large-2:first-child {
    align-content: center;
  }
  #footer .footer-row img {
    height: 12vh;
  }
  #footer
    ul.wp-block-social-links.has-normal-icon-size.is-style-default.is-content-justification-center.is-layout-flex.wp-container-core-social-links-is-layout-16018d1d.wp-block-social-links-is-layout-flex {
    gap: 0px;
  }
}

/* ~1024px (Tablet) */
@media (max-width: 64rem) {
  .divider.adjust-upwards-013 img {
    height: 56px;
    margin-top: -46px;
    transform: unset;
  }
}

/* ~768px (Mobile) */
@media (max-width: 48rem) {
  /* Hero adjustments */
  .sf-hero .thb-row-overlay {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.01),
      #0a0a0a
    ) !important;
  }

  .sf-hp-figures-intro .medium-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Remove decorative icons on small screens */
  .sf-hp-figures-intro.sf-hp-figures-intro::before,
  .sf-hp-figures-intro.sf-hp-figures-intro::after {
    content: none !important;
    display: none !important;
  }

  header.header:not(.fixed) {
    background: linear-gradient(to bottom, #0000006b 0%, transparent 100%);
  }

  .sf-hero {
    padding-top: 40vh !important;
    padding-bottom: 6vh !important;
  }

  .sf-hero .wpb_content_element {
    margin-bottom: 16px;
  }

  .sf-hero br {
    display: none;
  }

  /* Divider adjustments */
  .divider.adjust-upwards-013 {
    margin-top: unset;
  }

  .divider.adjust-upwards-013 img {
    height: 56px;
    margin-top: -35px;
    transform: none;
  }

  .adjust-upwards-right {
    margin-top: unset;
  }

  .divider.adjust-upwards-right img {
    height: 56px;
    margin-top: -17px;
  }

  /* Post listing adjustments */
  .stupski-recent-posts-block .posts-list {
    max-width: 100%;
  }

  /* Featured content adjustments */
  .sf-homepage-featured {
    padding: 6vh 0 0;
  }

  /* Slider adjustments */
  .sf-homepage-slider .alignleft {
    margin: unset;
  }

  .sf-homepage-slider .slider-content .vc_column-inner {
    max-width: 100%;
  }

  .slider-content.wpb_column {
    padding: 24px 0;
  }

  .sf-homepage-slider .lead p {
    font-size: 18px;
  }

  .sf-homepage-slider .wpb_content_element {
    margin-bottom: 16px;
  }

  .sf-homepage-slider {
    margin: unset !important;
  }

  .slick-slide {
    padding: 0 16px !important;
  }

  .slick-list {
    margin: 0 -12px;
  }

  .sf-homepage-slider.thb-content-carousel.center-arrows.row {
    padding: 0 0 5rem;
  }

  /* Figures section adjustments */
  .sf-hp-figures .thb-counter {
    grid-template-columns: 1fr;
    grid-template-areas:
      "count"
      "title"
      "desc";
    row-gap: 8px;
  }

  /* Hide bug reporting on mobile */
  bugherd-sidebar {
    display: none !important;
    color: red;
  }
}

/* 640px - 768px (Small tablet range) */
@media (640px <= width <= 768px) {
  .slider-content.wpb_column {
    padding: 24px 0 0 24px;
  }
}

/* ~375px (Small mobile) */
@media (max-width: 375px) {
  .lead p {
    font-size: 22px;
    line-height: 2.1rem;
    letter-spacing: -0.2px;
  }

  /* XL counter adjustments */
  .xl-counter .h1.odometer.odometer-theme-minimal,
  .xl-counter .thb-counter .h1 {
    font-size: 143px;
  }

  .xl-counter .left.thb-counter {
    padding-left: 52px;
  }

  .xl-counter .thb-counter .thb-description p {
    font-size: 20px;
  }

  .xl-counter .thb-counter h6 {
    font-size: 16px;
  }

  .xl-counter .odometer-inside::before {
    top: 23px;
    left: -35px;
    font-size: 65px;
    line-height: 58px;
  }

  /* Pre-footer form adjustments */
  .stupski-purple-prefooter {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .stupski-purple-prefooter div#gform_wrapper_4 {
    max-width: 100%;
  }

  /* Form layout adjustments */
  #gform_4 .gform_footer {
    grid-column: 1 !important;
    width: 100% !important;
  }

  #gform_4 .gform-body {
    grid-column: 1 !important;
  }

  .sf-card #gform_submit_button_4 {
    padding: 0 48px !important;
    width: 100% !important;
  }

  /* Footer adjustments */
  #footer .wp-block-social-link a {
    font-size: 24px !important;
  }

  #footer .footer-row img {
    height: 22vh !important;
  }
}

/* ~320px (Very small mobile) */
@media (max-width: 23.44rem) {
  .divider.adjust-upwards-right img {
    margin-top: -24px;
  }

  .divider.adjust-upwards-013 img {
    margin-top: -33px;
  }
}

/* ~320px (Tiny screens) */
@media (max-width: 20rem) {
  .divider.adjust-upwards-right img {
    margin-top: -22px;
  }
}