/*-----------------------------------------------------------------------------------
    Creed Farms - Additional Styles
    Loaded after the page specific css. Contains:
      1. Section styles borrowed from other Creedfarm pages (process, cta, counter, contact info)
      2. New Creed only components (cut tabs, price table, product label, seal chips)
-----------------------------------------------------------------------------------*/

/*=========================
    01# Borrowed - CTA Section
==========================*/
.creedfarm-cta-sec {
  position: relative;
  z-index: 1;
}

.creedfarm-cta-sec:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(5, 27, 13, 0.7);
  z-index: -1;
}

/*=========================
    02# Borrowed - Process Section
==========================*/
.creedfarm-item-wrapper {
  gap: 0 30px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.creedfarm-process-item {
  padding: 30px;
  border-radius: 10px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 175px;
  flex: 1 1 175px;
}

.creedfarm-process-item .icon {
  margin-bottom: 10px;
  font-size: 30px;
  color: var(--primary-color);
}

.creedfarm-process-item .content span {
  font-weight: 500;
  color: var(--primary-color);
}

.creedfarm-process-item.bg_one {
  background-color: #EDFFE8;
}

.creedfarm-process-item.bg_two {
  background-color: #EDFFE8;
}

.creedfarm-process-item.bg_three {
  background-color: #EDFFE8;
}

.creedfarm-process-item.bg_four {
  background-color: #EDFFE8;
}

.creedfarm-process-item.bg_five {
  background-color: #EDFFE8;
}

/*=========================
    03# Borrowed - Counter Section
==========================*/
.counter-wrapper {
  background-color: var(--heading-color);
  border-radius: 16px;
  padding: 50px 50px 20px;
  position: relative;
  z-index: 1;
}

.counter-wrapper .counter-inner-wrap {
  padding: 0;
}

@media (max-width: 767.98px) {
  .counter-wrapper {
    padding: 40px 25px 10px;
  }
}

.creedfarm-counter-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.creedfarm-counter-item .icon {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  font-size: 26px;
}

.creedfarm-counter-item .content h2 {
  font-size: 42px;
  line-height: 1.1;
  margin-bottom: 2px;
}

.creedfarm-counter-item .content>span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-color);
}

@media (min-width: 1200px) {
  .creedfarm-counter-sec .col-xl-3:not(:first-child) .creedfarm-counter-item {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 30px;
  }
}

/*=========================
    04# Borrowed - Iconic Left Box (certifications)
==========================*/
.creedfarm-iconic-left-box-two {
  padding: 30px;
  border-radius: 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  border: 1px solid var(--border-color);
  height: 100%;
}

@media (max-width: 767.98px) {
  .creedfarm-iconic-left-box-two {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.creedfarm-iconic-left-box-two .icon {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* background-color: var(--secondary-color); */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 20px;
  color: #fff;
      border: 2px solid transparent;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box, var(--gold-gradient) border-box;
  font-size: 30px;
}

@media (max-width: 767.98px) {
  .creedfarm-iconic-left-box-two .icon {
    margin-bottom: 25px;
  }
}

.creedfarm-iconic-left-box-two .content h4 {
  margin-bottom: 7px;
}

.creedfarm-iconic-left-box-two .content .cert-meta {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary-color);
}

/*=========================
    05# Borrowed - Contact Info Boxes
==========================*/
.contact-info-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

.contact-info-wrapper .column-border:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

@media screen and (max-width: 991.98px) {
  .contact-info-wrapper .column-border:not(:last-child) {
    border-right: none;
  }
}

.creedfarm-contact-info-box {
  background-color: #EDFFE8;
  text-align: center;
  padding: 30px 40px;
  height: 100%;
}

.creedfarm-contact-info-box .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: var(--secondary-color);
  font-size: 30px;
  color: var(--heading-color);
  border: 3px solid var(--primary-color);
}

.creedfarm-contact-info-box .content h5 {
  margin-bottom: 15px;
}

/*=========================
    06# Creed - Cut Tabs (dark section)
==========================*/
.creed-cuts-tabs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  margin-bottom: 50px;
}

.creed-cuts-tabs .nav-item {
  margin: 0 8px 15px;
}

.creed-cuts-tabs .nav-link {
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 12px 30px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.creed-cuts-tabs .nav-link i {
  margin-right: 10px;
  color: var(--secondary-color);
}

.creed-cuts-tabs .nav-link:hover {
  border-color: var(--secondary-color);
  color: var(--white-color);
}

.creed-cuts-tabs .nav-link.active {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--heading-color);
}

.creed-cuts-tabs .nav-link.active i {
  color: var(--heading-color);
}

.creed-cuts-sec .cut-column {
  margin-bottom: 30px;
}

.creed-cuts-sec .creedfarm-choose-item {
  text-align: left;
  height: 100%;
  margin-bottom: 0;
}

.creed-cuts-sec .creedfarm-choose-item .icon {
  margin-bottom: 25px;
}

.creed-cuts-sec .creedfarm-choose-item .content .cut-list {
  display: block;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--text-color);
  color: var(--secondary-color);
  font-weight: 500;
  line-height: 28px;
}

/*=========================
    07# Creed - Processing Price Table
==========================*/
.creed-price-wrapper {
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.creed-price-wrapper>.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.creed-price-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  min-width: 640px;
}

.creed-price-table thead th {
  background-color: var(--primary-black-color);
  color: var(--white-color);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  padding: 20px 30px;
  white-space: nowrap;
}

.creed-price-table tbody td {
  padding: 20px 30px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  vertical-align: middle;
}

.creed-price-table tbody tr:last-child td {
  border-bottom: none;
}

.creed-price-table tbody tr:nth-child(even) {
  background-color: var(--gray-color);
}

.creed-price-table .service-name {
  font-family: var(--body-font);
  font-weight: 600;
  color: var(--heading-color);
}

.creed-price-table .service-rate {
  text-align: right;
  font-weight: 600;
  color: var(--primary-color);
  white-space: nowrap;
}


/*=========================
    08# Creed - Product Label Mock
==========================*/
.creed-label-mock {
  background-color: var(--white-color);
  border: 2px solid #000000;
  border-radius: 10px;
  padding: 35px 40px 40px;
}

@media (max-width: 575.98px) {
  .creed-label-mock {
    padding: 25px 20px 30px;
  }
}

.creed-label-mock .label-brand {
  font-family: var(--body-font);
  font-weight: 800;
  font-size: 26px;
  line-height: 34px;
  color: var(--heading-color);
  margin-bottom: 2px;
}

.creed-label-mock .label-product {
  display: block;
  margin-bottom: 20px;
  color: var(--text-color);
}

.creed-label-mock .label-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-top: 1px dashed var(--border-color);
  font-size: 15px;
  line-height: 24px;
}

.creed-label-mock .label-row span:last-child {
  font-weight: 600;
  color: var(--heading-color);
  text-align: right;
}

.creed-label-mock .label-seal {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 20px;
  border-radius: 6px;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.creed-label-mock .label-seal+.label-seal {
  margin-left: 8px;
  background-color: var(--secondary-color);
  color: var(--heading-color);
}

/*=========================
    09# Creed - Seal Chips (on dark cta)
==========================*/
.creed-seal-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 15px;
  padding: 0;
  margin: 0 0 50px;
  list-style: none;
}

.creed-seal-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 12px 22px;
  color: var(--white-color);
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .creed-seal-list li {
    white-space: normal;
    padding: 10px 18px;
  }
}

.creed-seal-list li i {
  margin-right: 12px;
  font-size: 20px;
  color: var(--secondary-color);
}

/*=========================
    10# Creed - Misc helpers
==========================*/
.creed-tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}

.creed-tag-list li {
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 5px 16px;
  font-size: 14px;
  line-height: 24px;
  /* green reads poorly as small text — carry it as the fill instead */
  color: #ffffff;
  background-color: var(--primary-color);
}

/*=========================
    11# Borrowed - Choose Section (dark cards, used by the Cuts tabs)
==========================*/
.creedfarm-choose-sec {
  position: relative;
  z-index: 1;
  background-color: var(--primary-black-color);
  overflow: hidden;
}

.creedfarm-choose-sec .bottom-img {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: auto;
  z-index: -1;
}

.creedfarm-choose-item {
  border-radius: 5px;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  background-color: rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
  padding: 30px 30px 25px;
}

.creedfarm-choose-item .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--primary-color);
  font-size: 40px;
  color: var(--white-color);
  margin-bottom: 20px;
}

.creedfarm-choose-item .content h4 {
  color: #000;
  margin-bottom: 15px;
}

.creedfarm-choose-item .content p {
  color: #000;
}

/*=========================
    12# Borrowed - Iconic Left Box (process steps, notes)
==========================*/
.creedfarm-iconic-left-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  padding: 30px;
  background-color: var(--white-color);
}

@media (max-width: 575.98px) {
  .creedfarm-iconic-left-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.creedfarm-iconic-left-box .icon {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 30px;
  color: var(--heading-color);
  background-color: var(--secondary-color);
  margin-right: 20px;
}

@media (max-width: 575.98px) {
  .creedfarm-iconic-left-box .icon {
    margin-bottom: 20px;
  }
}

.creedfarm-iconic-left-box .content h4,
.creedfarm-iconic-left-box .content h5 {
  margin-bottom: 6px;
}

.creedfarm-iconic-left-box .content p {
  margin-bottom: 0;
}

.creedfarm-iconic-left-box .icon .step-no {
  font-family: var(--body-font);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

/*=========================
    13# No left-border rules anywhere
==========================*/
.accordion-card .accordion-content p,
.accordion-card-two .accordion-content p {
  border-left: none;
  padding-left: 0;
}

/*=========================
    14# Creed - Contact form on the dark inner-page wrapper
==========================*/
.contact-wrapper.on-dark h3,
.contact-wrapper.on-dark h4 {
  color: #000;
}

.contact-wrapper.on-dark>p {
 color: var(--text-color);
}

/*=========================
    15# Creed - One vertical rhythm
==========================*/
/* Sections carry top padding only, so two neighbours never stack 130 + 130.
   Sections that paint their own background keep padding on both sides. */

/* card grids leave a trailing margin under the last row - pull it back so the
   section really does end where its padding says it does */
.creedfarm-service-sec>.container>.row:last-child,
.creedfarm-project-sec>.container>.row:last-child,
.creedfarm-choose-sec>.container>.row:last-child,
.service-details-sec>.container>.row:last-child {
  margin-bottom: -40px;
}

.creed-cuts-sec .tab-content {
  margin-bottom: -30px;
}

.creedfarm-counter-sec .counter-inner-wrap>.row {
  margin-bottom: -30px;
}

.creedfarm-contact-sec .container>.row:last-child {
  margin-bottom: -50px;
}

/* the last section on any page owns the gap down to the footer, and has to
   clear the newsletter band that the footer pulls upwards */
main>section:last-of-type {
  padding-bottom: 160px;
}

.creedfarm-map-sec {
  padding-top: var(--rhythm);
  padding-bottom: 0;
}

main>section.creedfarm-map-sec:last-of-type {
  padding-bottom: 120px;
}

.default-footer .footer-newsletter {
  margin-top: -90px;
}

/* the features strip is pulled up over the hero on purpose */
.creedfarm-features-sec {
  padding-bottom: 0;
}

/*=========================
    16# Creed - Seven-item menu fits without wrapping
==========================*/
@media screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .header-navigation .main-menu ul>li {
    margin-left: 11px;
    margin-right: 11px;
  }

  .header-navigation .main-menu ul>li>a {
    font-size: 16px;
  }

  .creedfarm-hero .hero-content h1 {
    font-size: 80px !important;
    line-height: 110px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .header-navigation .main-menu ul>li {
    margin-left: 8px;
    margin-right: 8px;
  }

  .header-navigation .main-menu ul>li>a {
    font-size: 15px;
  }

  .header-navigation .nav-right-item .nav-button .theme-btn {
    padding: 14px 22px;
  }
}




/* a section that paints    .creedfarm-hero .hero-content h1 {
        font-size: 88px;
    } its own background needs clear air above it, otherwise
   the previous section's last card butts straight against the colour block */
main>section+.creedfarm-choose-sec,
main>section+.creedfarm-cta-sec {
  margin-top: 130px;
}

/* certification portrait fills its column, and on wide screens it also matches
   the height of the copy beside it rather than sitting short */
.creedfarm-certification-sec .creedfarm-image img {
  width: 100%;
  border-radius: 10px;
}

@media screen and (min-width: 1200px) {
  .creedfarm-certification-sec .creedfarm-image {
    height: 100%;
  }

  .creedfarm-certification-sec .creedfarm-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/* once the columns stack, the tall portrait would run to ~1000px - cap it */
@media screen and (max-width: 1199.98px) {
  .creedfarm-certification-sec .creedfarm-image img {
    height: 420px;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media (max-width: 767.98px) {
  .creedfarm-certification-sec .creedfarm-image img {
    height: 300px;
  }
}

/* the accordion arrow badge is only defined on the home stylesheet - carry it
   over so the inner pages match */
.accordion-card .accordion-header .accordion-title .icon-btn {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 14px;
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--white-color);
}

.accordion-card .accordion-header .accordion-title .icon-btn i {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.34s;
  transition: all 0.34s;
}

.accordion-card .accordion-header .accordion-title[aria-expanded=true] .icon-btn {
  background-color: #fff;
  color: #000;
}

.accordion-card .accordion-header .accordion-title[aria-expanded=true] .icon-btn i {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

/*=========================
    17# Creed - Hero slider controls
==========================*/
.creedfarm-hero .hero-slider .slick-arrow,
.creedfarm-hero .hero-slider .prev,
.creedfarm-hero .hero-slider .next {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 62px;
  height: 62px;
  margin-top: -31px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white-color);
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.creedfarm-hero .hero-slider .prev:hover,
.creedfarm-hero .hero-slider .next:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--heading-color);
}

.creedfarm-hero .hero-slider .prev {
  left: 45px;
  right: auto;
}

.creedfarm-hero .hero-slider .next {
  right: 45px;
  left: auto;
}

@media screen and (max-width: 1199.98px) {

  .creedfarm-hero .hero-slider .slick-arrow,
  .creedfarm-hero .hero-slider .prev,
  .creedfarm-hero .hero-slider .next {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 16px;
  }

  .creedfarm-hero .hero-slider .slick-prev {
    left: 18px;
  }

  .creedfarm-hero .hero-slider .slick-next {
    right: 18px;
  }
}

@media (max-width: 575.98px) {

  .creedfarm-hero .hero-slider .slick-arrow,
  .creedfarm-hero .hero-slider .prev,
  .creedfarm-hero .hero-slider .next {
    display: none !important;
  }
}

.creedfarm-hero .hero-slider .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 175px;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.creedfarm-hero .hero-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.45);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.creedfarm-hero .hero-slider .slick-dots li.slick-active button {
  width: 34px;
  border-radius: 6px;
  background-color: var(--secondary-color);
}

/*=========================
    18# Creed - Primal cut charts
==========================*/
.creed-cuts-sec .creedfarm-choose-item .cut-chart {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--text-color);
}

.creed-cuts-sec .creedfarm-choose-item .cut-chart img {
  display: block;
  width: 100%;
  height: auto;
}

/*=========================
    19# Creed - Responsive vertical rhythm
==========================*/
/* spacings.css has no media queries, so pt-130/pb-130 stayed a hard 130px even
   on a 390px phone. One variable drives the whole rhythm instead, and every
   section-level rule below is expressed in terms of it. */
:root {
  --rhythm: 130px;
}

@media screen and (max-width: 1399.98px) {
  :root {
    --rhythm: 110px;
  }
}

@media screen and (max-width: 1199.98px) {
  :root {
    --rhythm: 95px;
  }
}

@media screen and (max-width: 991.98px) {
  :root {
    --rhythm: 80px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --rhythm: 65px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --rhythm: 55px;
  }
}

/* section padding - the attribute selectors outrank the flat utility classes */
main>section[class*="pt-130"] {
  padding-top: var(--rhythm);
}

main>section[class*="pb-130"] {
  padding-bottom: var(--rhythm);
}

main>section[class*="pb-100"] {
  padding-bottom: calc(var(--rhythm) - 30px);
}

main>section[class*="pb-90"] {
  padding-bottom: calc(var(--rhythm) - 40px);
}

/* clear air above a section that paints its own background */
main>section+.creedfarm-choose-sec,
main>section+.creedfarm-cta-sec {
  margin-top: var(--rhythm);
}

.thumbnail img {
  width: 100%;
}

/* last section carries the gap down to the footer */
main>section:last-of-type {
  padding-bottom: calc(var(--rhythm));
}

main>section.creedfarm-map-sec:last-of-type {
  padding-bottom: calc(var(--rhythm));
}

/* page banner follows the same rhythm */
.page-banner {
  padding: var(--rhythm) 0 calc(var(--rhythm));
}

@media (max-width: 767.98px) {
  .page-banner {
    padding: var(--rhythm) 0 calc(var(--rhythm));
  }
}

/* hero needs a mid step - it only had a phone breakpoint */
@media screen and (max-width: 1199.98px) {
  .creedfarm-hero .single-slider {
    padding: 100px 0 220px;
  }
}

@media (max-width: 767.98px) {
  .creedfarm-hero .single-slider {
    padding: 80px 0 200px;
  }
}

/* footer newsletter stacks and grows on small screens - overlap less */
@media screen and (max-width: 991.98px) {
  .default-footer .footer-newsletter {
    margin-top: -60px;
  }
}

@media (max-width: 767.98px) {
  .default-footer .footer-newsletter {
    margin-top: -40px;
  }
}

/* section headings tighten with the rhythm */
@media (max-width: 767.98px) {

  main>section .section-title[class*="mb-60"],
  main>section .section-title[class*="mb-55"],
  main>section .section-title[class*="mb-50"] {
    margin-bottom: 32px;
  }

  main>section .section-title[class*="mb-40"] {
    margin-bottom: 26px;
  }

  .creed-cuts-tabs {
    margin-bottom: 32px;
  }
}

/*=========================
    20# Creed - Small screen overflow fixes
==========================*/
/* the rotating seal is authored at 240px; pin its display size so it can never
   push past the column on a phone */
.creedfarm-about-sec .creedfarm-image-box .circle-image img {
  width: 150px;
  height: 150px;
}

@media screen and (max-width: 991.98px) {
  .creedfarm-about-sec .creedfarm-image-box .circle-image img {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 575.98px) {
  .creedfarm-about-sec .creedfarm-image-box .circle-image {
    right: 10px;
  }

  .creedfarm-about-sec .creedfarm-image-box .circle-image img {
    width: 88px;
    height: 88px;
  }
}

/* nothing may push the document wider than the viewport */
html,
body {
  overflow-x: hidden;
}

/* on a phone the rate table scrolls sideways - say so */
@media (max-width: 767.98px) {
  .creed-price-wrapper+.creed-scroll-hint {
    display: block;
  }
}

.creed-scroll-hint {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-color);
}

.creed-scroll-hint i {
  margin-right: 8px;
  color: var(--primary-color);
}

/*=========================
    21# Creed - Footer never overlaps a dark last section
==========================*/
/* the newsletter band is meant to straddle a light section and the dark footer.
   If a page ends on a section that paints its own dark background the two dark
   blocks merge, so drop the overlap and give the section normal clearance. */
main:has(> section.creedfarm-cta-sec:last-of-type)~footer .footer-newsletter,
main:has(> section.creedfarm-choose-sec:last-of-type)~footer .footer-newsletter {
  margin-top: 0;
}

main>section.creedfarm-cta-sec:last-of-type,
main>section.creedfarm-choose-sec:last-of-type {
  padding-bottom: var(--rhythm);
}

/*=========================
    22# Creed - FAQ image sits beside the accordion, not past it
==========================*/
/* the left column is title + intro + photo; keep the photo short enough that it
   finishes near the accordion instead of leaving dead space under the answers */
.creedfarm-faq-sec .creedfarm-content-box .creedfarm-image img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

@media screen and (max-width: 1199.98px) {
  .creedfarm-faq-sec .creedfarm-content-box .creedfarm-image img {
    height: 260px;
  }
}

@media (max-width: 767.98px) {
  .creedfarm-faq-sec .creedfarm-content-box .creedfarm-image img {
    height: 220px;
  }
}

/*=========================
    23# Creed - Product blocks: image fills its column
==========================*/
/* the source images were narrower than the column, so all the slack collected
   between the picture and the copy on the image-left block and at the outer
   edge on the image-right one. Filling the column makes both gaps identical. */
.service-details-sec .creedfarm-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/*=========================
    24# Creed - Contact block: photo fills its column
==========================*/
/* the photo was narrower than its column, so it read as small next to the form.
   The form's height is fixed by its fields, so the photo gets a fixed height too
   - otherwise it keeps growing with the column and overhangs on wide screens. */
.creedfarm-contact-sec .creedfarm-image img {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

@media screen and (max-width: 1199.98px) {
  .creedfarm-contact-sec .creedfarm-image img {
    height: 420px;
  }
}

@media (max-width: 767.98px) {
  .creedfarm-contact-sec .creedfarm-image img {
    height: 300px;
  }
}

/* Header logo sizing */
.brand-logo img {
  height: 100px;
  margin: 30px 0;
  width: auto;
}

/* Footer logo sizing */
.footer-about-widget .widget-content img {
  max-width: 200px;
  height: auto;
}

/* Whiten content on secondary-color (#9C0001) backgrounds */
.footer-newsletter,
.footer-newsletter *,
.counter-wrapper,
.counter-wrapper *,
.creedfarm-contact-info-box .icon,
.creedfarm-contact-info-box .icon *,
.creed-cuts-tabs .nav-link.active,
.creed-cuts-tabs .nav-link.active *,
.creed-label-mock .label-seal+.label-seal,
.creed-label-mock .label-seal+.label-seal *,
.creedfarm-iconic-left-box .icon,
.creedfarm-iconic-left-box .icon *,
.creedfarm-hero .hero-slider .prev:hover,
.creedfarm-hero .hero-slider .prev:hover *,
.creedfarm-hero .hero-slider .next:hover,
.creedfarm-hero .hero-slider .next:hover *,
.creedfarm-hero .hero-slider .slick-dots li.slick-active button,
.creedfarm-hero .hero-slider .slick-dots li.slick-active button *,
.creedfarm-counter-box.bg_one,
.creedfarm-counter-box.bg_one *,
.creedfarm-team-item .member-image .member-info .position,
.creedfarm-team-item .member-image .member-info .position *,
.creedfarm-post-item .post-thumbnail .category-btn,
.creedfarm-post-item .post-thumbnail .category-btn *,
.sidebar-widget.sidebar-search-widget .widget-content .search-btn,
.sidebar-widget.sidebar-search-widget .widget-content .search-btn *,
.creedfarm-hero .hero-content h1 span,
.creedfarm-hero .hero-content h1 span *,
.creedfarm-feature-item .icon,
.creedfarm-feature-item .icon *,
.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two .play-btn .video-popup,
.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two .play-btn .video-popup * {
  color: #ffffff;
  fill: #ffffff;
}

/* Hero: single static slide (slider removed) — keep image un-zoomed */
.creedfarm-hero .single-slider .image-layer {
  transform: scale(1);
}

/* Page-banner supporting subtitle */
.page-banner .page-content p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 auto 24px;
  font-size: 18px;
  line-height: 30px;
}

@media (max-width: 767.98px) {
  .page-banner .page-content p {
    font-size: 16px;
    line-height: 27px;
  }
}

/* Contact page — left-aligned contact detail rows */
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-detail:not(:last-child) {
  margin-bottom: 26px;
}

.contact-detail .icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: #ffffff;
  font-size: 20px;
}

.contact-detail .content h5 {
  margin-bottom: 4px;
}

.contact-detail .content p {
  margin: 0;
  line-height: 27px;
}

.contact-detail .content p a:hover {
  color: var(--secondary-color);
}

.contact-detail .content p .label {
  color: var(--heading-color);
  font-weight: 600;
}

/* Breathing room between the form intro and the first field */
.contact-wrapper>p {
  margin-bottom: 32px;
}

/* Channel/service card titles — force solid white for contrast on the green overlay */
.creedfarm-service-item .thumbnail .hover-content-wrap .content h4,
.creedfarm-service-item .thumbnail .hover-content-wrap .content h4 a {
  color: #ffffff;
}

/* Hero supporting subtitle */
.creedfarm-hero .hero-content .hero-text {
  color: #ffffff;
  font-size: 26px;
  line-height: 38px;
  font-weight: 600;
  /* fills the col-lg-10 the hero content sits in */
  max-width: 100%;
  margin: 26px auto 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767.98px) {
  .creedfarm-hero .hero-content .hero-text {
    font-size: 19px;
    line-height: 30px;
    margin: 20px auto 32px;
  }
}

/* Order page form */
.order-form .form_control {
  color-scheme: dark;
}

.order-form select.form_control {
  cursor: pointer;
}

.order-form-heading {
 color: var(--text-color);
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 6px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(22, 22, 22, 0.15);
}

.order-phone {
  color: var(--secondary-color);
  font-weight: 600;
}

.order-phone:hover {
  text-decoration: underline;
}

/*=========================
    Gold gradient borders — buttons + icon rings
==========================*/
.theme-btn.style-one,
.theme-btn.style-two {
  border-color: transparent;
}

/* .theme-btn.style-one:hover {
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gold-gradient) border-box;
} */



/* Gold ring around the red icon circles */
.creedfarm-feature-item .icon {
  border-color: transparent;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box, var(--gold-gradient) border-box;
}

.creedfarm-counter-item .icon,
.contact-detail .icon {
  border: 2px solid transparent;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box, var(--gold-gradient) border-box;
}

/* Hero boxed word — gold gradient background with dark text */
.creedfarm-hero .hero-content h1 span {
  background: var(--gold-gradient);
  color: #000000;
}

/* Hero eyebrow pill — gold gradient background with dark text */
.creedfarm-hero .hero-content span.tag-line {
  background: var(--gold-gradient);
  border-color: transparent;
  color: #000000;
}

/* Where We Sell section — closes with the same rhythm it opens with. The gray
   band now comes from the shared .bg-alt class in block 26. */
.creedfarm-service-sec {
  padding-bottom: var(--rhythm);
}

/* Processing step number circles — red fill with gold gradient ring */
.creedfarm-iconic-left-box .icon {
  border: 2px solid transparent;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box, var(--gold-gradient) border-box;
}

/*=========================
    25# Creed - About image box (shared by the home and About pages)
==========================*/
/* The About page loads innerpage.css, which styles this block differently from
   the home page: image-two sits flush in the corner with a white border, and
   there is no badge or outline shape at all. These rules live in creed.css so
   both pages render the identical composition and only the photos differ. */
.creedfarm-about-sec .creedfarm-image-box {
  position: relative;
  z-index: 1;
  margin-right: 0;
}

.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-one {
  text-align: left;
}

.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-one img {
  width: 78%;
  height: auto;
  border: none;
  border-radius: 10px;
}

.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two {
  position: absolute;
  bottom: 60px;
  right: 30px;
  max-width: 52%;
}

.creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two img {
  width: 100%;
  height: auto;
  border: none;
  border-radius: 10px;
}

/* red outline shape, top right, behind the main photo */
.creedfarm-about-sec .creedfarm-image-box .border-shape {
  position: absolute;
  top: 60px;
  right: 80px;
  width: 185px;
  height: 300px;
  border: 7px solid var(--secondary-color);
  z-index: -1;
}

/* green USDA badge with the folded corner, top left */
.creedfarm-about-sec .creedfarm-image-box .experience-box {
  position: absolute;
  top: 60px;
  left: -35px;
  max-width: 180px;
  padding: 30px 10px;
  text-align: center;
  background-color: var(--primary-color);
}

.creedfarm-about-sec .creedfarm-image-box .experience-box::after {
  position: absolute;
  bottom: -35px;
  left: 0;
  content: "";
  width: 0;
  height: 0;
  border-top: 35px solid var(--primary-color);
  border-left: 35px solid transparent;
}

.creedfarm-about-sec .creedfarm-image-box .experience-box i {
  font-size: 50px;
  color: var(--white-color);
}

.creedfarm-about-sec .creedfarm-image-box .experience-box h4 {
  color: var(--white-color);
}

.creedfarm-about-sec .creedfarm-image-box .experience-box h4 span {
  display: block;
  font-size: 16px;
  line-height: 25px;
  color: var(--white-color);
}

/* the badge would overhang the column once it sits inside the page gutter */
@media screen and (max-width: 1199.98px) {
  .creedfarm-about-sec .creedfarm-image-box .experience-box h4 {
    font-size: 16px
  }

  .creedfarm-about-sec .creedfarm-image-box .experience-box {
    padding: 15px 10px;
    top: 30px;
  }

  .contact-wrapper {
    padding: 30px 30px 30px;
  }
}

/* once the columns stack, drop the overlap composition entirely */
@media (max-width: 767.98px) {
  .creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-one img {
    width: 100%;
  }

  .brand-logo img {
    height: 60px;
    margin: 0px;
  }

  .creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two {
    bottom: -30px;
    right: 0;
    max-width: 38%;
    margin-top: 30px;
  }

  .creedfarm-about-sec .creedfarm-image-box .experience-box,
  .creedfarm-about-sec .creedfarm-image-box .border-shape {
    display: none;
  }
}

/*=========================
    26# Creed - Alternating section backgrounds
==========================*/
/* Sections alternate between the page white and #EDEDED. The class is applied
   in the markup rather than by :nth-of-type so that sections which paint their
   own background (the black Why Creed Farms band, the full-bleed image CTAs)
   can sit in the sequence without breaking the alternation. */
main>section.bg-alt {
  background-color: #EDEDED;
}

/* Blocks 16 and 19 put the clear air above a self-coloured section on that
   section's own margin-top. A margin shows the body white through it, which
   would cut a white stripe between a gray section and the dark band below it.
   Moving the same distance onto the previous section's padding keeps the gap
   the exact size it was, but paints it in the previous section's colour. */
main>section+.creedfarm-choose-sec,
main>section+.creedfarm-cta-sec {
  margin-top: 0;
}

main>section:has(+ .creedfarm-choose-sec),
main>section:has(+ .creedfarm-cta-sec) {
  padding-bottom: var(--rhythm);
}

/*=========================
    27# Creed - CTA banner
==========================*/
/* Rebuilt without the photograph. The card is now a flat gray panel sitting on
   a white band, so it reads as an object on the page rather than as a second
   dark block. A gold hairline runs the top edge, a large gold ring is drawn
   behind the action column, and the width the photo used to hold is filled by
   three assurance chips carrying the same claims used everywhere else on the
   site. The band under a .creedfarm-cta section has to stay white - a gray
   band would swallow the card. */
.creedfarm-cta .cta-wrapper {
  position: relative;
  z-index: 1;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--gray-color);
  transition: box-shadow 0.35s ease;
}

/* the dark wash existed to rescue text sitting on the photo - nothing sits on
   a photo any more, so it goes */
.creedfarm-cta .cta-wrapper:after {
  display: none;
}


.creedfarm-cta .creedfarm-cta-item {
  position: relative;
  overflow: hidden;
  padding: 64px 70px;
  gap: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* faint gold ring behind the action column, bleeding off the right edge */
.creedfarm-cta .creedfarm-cta-item:before {
  position: absolute;
  top: 50%;
  right: -110px;
  content: "";
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(187, 150, 55, 0.3);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

/* --- copy column --- */
.creedfarm-cta .creedfarm-cta-item .content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.creedfarm-cta .creedfarm-cta-item .content .cta-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-color);
}

.creedfarm-cta .creedfarm-cta-item .content h3 {
  display: block;
  font-family: var(--accent-font);
  color: #000;
  font-size: 26px;
  line-height: 40px;
  font-weight: 600;

}

/* assurance chips - they hold the width the photograph used to */
.creedfarm-cta .creedfarm-cta-item .content .cta-assurance {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
  padding: 26px 0 0;
  margin: 26px 0 0;
  border-top: 1px solid rgba(43, 71, 32, 0.14);
  list-style: none;
}

.creedfarm-cta .creedfarm-cta-item .content .cta-assurance li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 9px 20px 9px 9px;
  border-radius: 30px;
  border: 1px solid #DEDEDE;
  background-color: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--heading-color);
  white-space: nowrap;
}

.creedfarm-cta .creedfarm-cta-item .content .cta-assurance li i {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 11px;
  font-size: 14px;
  color: var(--secondary-color);
  background-color: rgba(156, 0, 1, 0.08);
}

/* --- action column --- */
.creedfarm-cta .creedfarm-cta-item .cta-action {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 18px;
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 19px 38px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--secondary-color);
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;

  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn i {
  margin-left: 12px;
  font-size: 15px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
  display: none;
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn:hover i {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-mail {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-color);
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-mail i {
  margin-right: 9px;
  font-size: 15px;
  color: var(--secondary-color);
}

.creedfarm-cta .creedfarm-cta-item .cta-action .cta-mail:hover {
  color: var(--secondary-color);
}

@media screen and (max-width: 1399.98px) {
  .creedfarm-cta .creedfarm-cta-item {
    padding: 56px 55px;
    gap: 40px;
  }

  .creedfarm-hero .hero-content h1 {
    font-size: 88px;
  }

  .creedfarm-cta .creedfarm-cta-item .content h3 {
    font-size: 27px;
    line-height: 42px;
  }
}

@media sc5een and (max-width: 1199.98px) {
  .creedfarm-cta .creedfarm-cta-item {
    padding: 48px 42px;
    gap: 32px;
  }

  .creedfarm-cta .creedfarm-cta-item .content883 {
    font-size: 24px;
    line-height: 38px;
  }

  .creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn {
    padding: 17px 32px;
  }
}

/* stacked: copy first, then the action row beneath it */
@media screen and (max-width: 991.98px) {
  .creedfarm-cta .cta-wrapper {
    border-radius: 18px;
  }

  .brand-logo img {
    height: 70px;
    margin: 0;
  }

  .mb-100 {
    margin-bottom: 50px;
  }

  #food-service {
    position: relative;
    padding: 80px 0 50px !important;
  }

  #export-international {
    padding-top: 40px;
  }

  .creedfarm-hero .hero-content h1 {
    font-size: 66px;
  }

  .creedfarm-cta .creedfarm-cta-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 44px 38px 46px;
    gap: 30px;
  }

  .creedfarm-cta .creedfarm-cta-item:before {
    top: auto;
    bottom: -170px;
    right: -140px;
    width: 300px;
    height: 300px;
    -webkit-transform: none;
    transform: none;
  }

  .creedfarm-cta .creedfarm-cta-item .content {
    max-width: none;
    margin-bottom: 0;
  }

  .creedfarm-cta .creedfarm-cta-item .cta-action {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px 26px;
  }
}

@media (max-width: 767.98px) {
  .creedfarm-cta .creedfarm-cta-item {
    padding: 36px 24px 40px;
    gap: 26px;
  }

  .footer-about-widget .widget-content img {
    max-width: 120px !important;
  }

  .theme-btn {
    width: 100%;
  }

  .pt-100 {
    padding-top: 60px;
  }

  .creedfarm-cta .creedfarm-cta-item .content h3 {
    font-size: 21px;
    line-height: 33px;
  }

  .creedfarm-cta .creedfarm-cta-item .content .cta-assurance {
    gap: 10px;
    padding-top: 22px;
    margin-top: 22px;
  }

  .creedfarm-cta .creedfarm-cta-item .content .cta-assurance li {
    font-size: 14px;
    padding: 8px 16px 8px 8px;
  }

  .creedfarm-cta .creedfarm-cta-item .content .cta-assurance li i {
    width: 26px;
    height: 26px;
    margin-right: 9px;
    font-size: 12px;
  }
}

@media (max-width: 575.98px) {
  .creedfarm-cta .creedfarm-cta-item .cta-action {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    gap: 16px;
  }

  .creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn {
    width: 100%;
    padding: 17px 24px;
  }

  .creedfarm-cta .creedfarm-cta-item .cta-action .cta-mail {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

/*=========================
    28# Creed - Counter strip
==========================*/
/* The single banded strip is gone. Each figure is now its own raised card, so
   the four read as separate facts rather than one striped bar, and they stack
   cleanly on a phone instead of squeezing into quarters. Inside a card the
   figure leads at the left, the icon sits opposite it, and a gold hairline
   separates the figure from its label. */
.counter-wrapper {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow: visible;
}

.counter-wrapper:before {
  display: none;
}

.counter-wrapper .counter-inner-wrap>.row>[class*=col-] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.counter-wrapper .creedfarm-counter-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 34px 32px 32px;
  border-radius: 18px;
  border: 1px solid rgba(187, 150, 55, 0.35);
  background-color: var(--heading-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}


.counter-wrapper .creedfarm-counter-item .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 21px;
  color: #FDDB85;
  background: rgba(253, 219, 133, 0.08);
}

.counter-wrapper .creedfarm-counter-item .icon i {
  color: #FDDB85;
}

.counter-wrapper .creedfarm-counter-item .content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

.counter-wrapper .creedfarm-counter-item .content h2 {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(253, 219, 133, 0.22);
}

@media screen and (max-width: 1399.98px) {
  .counter-wrapper .creedfarm-counter-item .content h2 {
    font-size: 42px;
  }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .counter-wrapper .creedfarm-counter-item .content h2 {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .counter-wrapper .creedfarm-counter-item .content h2 span {
    -webkit-text-fill-color: transparent;
  }
}

.counter-wrapper .creedfarm-counter-item .content>span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
}

/* the divider rules belonged to the old single band */
@media (min-width: 1200px) {
  .creedfarm-counter-sec .col-xl-3:not(:first-child) .creedfarm-counter-item {
    border-left: 1px solid rgba(187, 150, 55, 0.35);
    padding-left: 32px;
  }
}

/*=========================
    29# Creed - Equal height cards
==========================*/
/* The Why Creed Farms and cut cards sat at their natural heights, so a card
   with one line less of copy ended shorter than the one beside it. Making the
   column a flex container lets the card stretch to the row height, margins
   included, and letting the description absorb the leftover height lines the
   cut list dividers up across the row however long each description runs. */
.creedfarm-choose-sec .row:not(.justify-content-center)>[class*=col-] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.creedfarm-choose-sec .creedfarm-choose-item {
  width: 100%;
}

.creedfarm-choose-sec .creedfarm-choose-item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

/* the description can only take up the slack if the card is itself a column and
   the content block is allowed to grow inside it. Scoped to the cuts grid on
   purpose: the Why Creed Farms cards centre their icon with text-align, which a
   flex column would throw back to the left edge. */
.creed-cuts-sec .creedfarm-choose-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* the description takes the slack rather than the cut list being pushed to the
   bottom: that aligns the divider itself across the row, which still holds when
   a narrower column wraps one card's cut list onto a second line and
   bottom-aligning would knock its rule out of line with its neighbours. */
.creed-cuts-sec .creedfarm-choose-item .content p {
  margin-bottom: 15px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.creed-cuts-sec .creedfarm-choose-item .content .cut-list {
  padding-top: 15px;
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .brand-logo img {
    height: 75px;
    margin: 0;
  }

  .creedfarm-hero .hero-content h1 {
    font-size: 65px;
  }

  .mb-100 {
    margin-bottom: 60px;
  }

  #food-service {
    position: relative;
    padding: 80px 0 40px !important;
  }

  #export-international {
    padding-top: 30px;
  }

  .mb-90 {
    margin-bottom: 40px;
  }

  .creed-label-mock {
    padding: 35px 25px 30px;
  }

  .creedfarm-about-sec .creedfarm-image-box .creedfarm-image.image-two {
    position: absolute;
    bottom: -60px;
    right: 30px;
    max-width: 40%;
  }

  .theme-btn.style-one {
    padding: 16px 12px;
  }
}

/*=========================
    30# Creed - Cut list contrast
==========================*/
/* The sub-cut line was set in --secondary-color, which is a dark red on a near
   black card and failed contrast badly. Gold reads cleanly on the dark band and
   matches the accent used elsewhere. */
.creed-cuts-sec .creedfarm-choose-item .content .cut-list {
     color: #000;
  font-size: 15px;
  letter-spacing: 0.01em;
  /* border-top-color: rgba(253, 219, 133, 0.25); */
}

/* all six charts are the same 1226x700 artwork, so a fixed box keeps the
   headings level across the row */
.creed-cuts-sec .creedfarm-choose-item .cut-chart img {
  aspect-ratio: 1226/700;
  -o-object-fit: contain;
  object-fit: contain;
}

/*=========================
    31# Creed - Compliance seal chips
==========================*/
/* The icons were --secondary-color on a dark photo, effectively invisible.
   Each one now sits in its own gold ring at a readable size. */
.creed-seal-list li {
  padding: 12px 24px 12px 12px;
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.creed-seal-list li i {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 14px;
  font-size: 17px;
  color: #FDDB85;
  background-color: rgba(253, 219, 133, 0.12);
  border: 1px solid rgba(253, 219, 133, 0.5);
}

@media (max-width: 575.98px) {
  .creed-seal-list li {
    padding: 10px 18px 10px 10px;
  }

  .creed-seal-list li i {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    font-size: 15px;
  }
}

/*=========================
    32# Creed - Where We Sell alternating rows
==========================*/
.creed-channels-sec .creedfarm-image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

@media screen and (max-width: 1199.98px) {
  .creed-channels-sec .creedfarm-image img {
    min-height: 320px;
  }

  .footer-about-widget .widget-content img {
    max-width: 120px;
  }

  h1 {
    font-size: 62px;
    line-height: 80px;
  }

  .creedfarm-iconic-left-box .icon {
    width: 50px;
    height: 50px;

  }

  .creedfarm-iconic-left-box .icon .step-no {
    font-size: 20px;
  }

  .mb-90 {
    margin-bottom: 20px;
  }

  .contact-wrapper.on-dark {
    margin-bottom: 50px;
  }
}

@media (max-width: 767.98px) {
  .creed-channels-sec .creedfarm-image img {
    min-height: 240px;
  }

  .creedfarm-hero .hero-content h1 {
    font-size: 40px;
  }
}

/* Homepage intro section */
.creed-brand-intro .intro-lead {
  font-size: 20px;
  line-height: 34px;
  color: var(--text-color);

}

@media (max-width: 767.98px) {
  .creed-brand-intro .intro-lead {
    font-size: 17px;
    line-height: 29px;
  }

  .hero-button .theme-btn.style-two {
    margin-top: 10px;
  }
}

/* Homepage "Why Creed Farms" cards */
.creed-why-sec .item-column {
  margin-bottom: 30px;
}

.creed-why-card {
  height: 100%;
  padding: 38px 32px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.creed-why-card:hover {
  border-color: transparent;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.creed-why-card .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 24px;
  border: 2px solid transparent;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box, var(--gold-gradient) border-box;
}

.creed-why-card h5 {
  margin-bottom: 12px;
}

.creed-why-card p {
  margin: 0;
}

/* Legal pages (privacy / terms) */
.creed-legal .legal-updated {
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.creed-legal h3 {
  margin: 42px 0 14px;
}

.creed-legal p {
  margin-bottom: 18px;
  color: var(--text-color);
}

.creed-legal a {
  color: var(--secondary-color);
  font-weight: 500;
}

.creed-legal a:hover {
  text-decoration: underline;
}

/*=========================
    Accessibility (WCAG 2.1 AA)
==========================*/
/* Visible keyboard focus on every interactive element (restores the outline the
   base theme removed with outline:none). Light gold reads on both light and dark. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.theme-btn:focus-visible,
.navbar-toggler:focus-visible,
.accordion-title:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid #8A6D1F !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* On dark backgrounds use the lighter gold so the ring stays visible */
.default-footer a:focus-visible,
.creedfarm-hero a:focus-visible,
.contact-wrapper a:focus-visible,
.contact-wrapper button:focus-visible,
.contact-wrapper input:focus-visible,
.contact-wrapper textarea:focus-visible,
.contact-wrapper select:focus-visible,
.creed-cuts-sec a:focus-visible {
  outline-color: #FDDB85 !important;
}

/* Footer link hovers: readable on the near-black footer + non-colour cue */
.default-footer .copyright-area .copyright-link a:hover,
.default-footer .copyright-area .copyright-link a:focus-visible {
  color: #FDDB85;
  text-decoration: underline;
}

.default-footer .footer-nav-widget .widget-nav a:hover,
.default-footer .footer-nav-widget .widget-nav a:focus-visible,
.default-footer .footer-widget .widget-content .creedfarm-info-box a:hover {
  color: #FDDB85;
}

/* Screen-reader-only utility + skip link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: absolute;
  top: -60px;

  .creedfarm-process-sec .creedfarm-image img {
    height: auto;
  }

  left: 16px;
  z-index: 9999;
  background: #333333;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
  color: #ffffff;
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;

    .creedfarm-process-sec .creedfarm-image img {
      height: auto;
    }
  }

  .spin {
    animation: none !important;
  }
}

/*=========================
    WordPress: pricing table, rich text, form note
==========================*/
.creed-swipe-note {
  display: none;
  font-size: 13px;
  color: var(--secondary-color);
  margin-bottom: 12px;
}

.creed-price-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.creed-price-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.creed-price-table thead th {
  background-color: #000;
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
}

.creed-price-table tbody td {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

.creed-price-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(15px);
}

.creed-price-table tbody td:first-child {
  font-weight: 600;
  color: var(--heading-color);
}

.creed-price-table tbody td:last-child {
  white-space: nowrap;
  color: var(--primary-color);
  font-weight: 600;
}

.creed-price-note {
  background-color: #fff;
  border-radius: 12px;
  padding: 28px 32px;
}

.creed-price-note h5 {
  margin-bottom: 8px;
}

.cf-richtext p {
  margin-bottom: 18px;
}

.cf-form-note {
  color: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 22px;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .creed-swipe-note {
    display: block;
  }

  .mb-100 {
    margin-bottom: 20px;
  }

  #food-service {
    position: relative;
    padding: 60px 0 20px !important;
  }

  .contact-wrapper.on-dark {
    margin-bottom: 50px;
  }
}

.creedfarm-project-sec .creedfarm-service-item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*=========================
    Contact / Order forms — works with Contact Form 7 markup
    CF7 outputs <form class="wpcf7-form">, not .contact-form, so the dark-wrapper
    field styles are scoped to .contact-wrapper.on-dark instead of the form class.
==========================*/
.contact-wrapper.on-dark {
  background-color: var(--gray-color);
}

.contact-wrapper.on-dark label {
    color: var(--heading-color);
  margin-bottom: 15px;
  display: block;
}

.contact-wrapper.on-dark .form_control,
.contact-wrapper.on-dark input[type="text"],
.contact-wrapper.on-dark input[type="email"],
.contact-wrapper.on-dark input[type="tel"],
.contact-wrapper.on-dark input[type="number"],
.contact-wrapper.on-dark input[type="date"],
.contact-wrapper.on-dark select,
.contact-wrapper.on-dark textarea {
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  line-height: 20px;
  padding: 17px 20px;
  margin-bottom: 30px;
  color: var(--text-color);
  
}

.contact-wrapper.on-dark .form_control::placeholder,
.contact-wrapper.on-dark textarea::placeholder,
.contact-wrapper.on-dark input::placeholder,
.contact-wrapper.on-dark select.form_control:invalid {
  color: #aaaaaa;
  opacity: 1;
}

.contact-wrapper.on-dark select option {
  color: #000000;
}

.contact-wrapper.on-dark .theme-btn,
.contact-wrapper.on-dark input[type="submit"],
.contact-wrapper.on-dark .wpcf7-submit {
  width: 100%;
  background: linear-gradient(#9C0001, #9C0001);
  border: 2px solid transparent;
  color: #fff;
  font-family: var(--body-font);
  font-weight: 600;
  padding: 16px 34px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-wrapper.on-dark .theme-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* CF7 wraps fields in <p> and adds its own spans — neutralise the extra margins */
.contact-wrapper .wpcf7-form-control-wrap {
  display: block;
}

.contact-wrapper .wpcf7 p {
  margin: 0;
}

.contact-wrapper .wpcf7-not-valid-tip {
  color: #FDDB85;
  font-size: 14px;
  margin-top: -20px;
  margin-bottom: 20px;
}

.contact-wrapper .wpcf7-response-output {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .3) !important;
  border-radius: 6px;
}



#food-service {
  position: relative;
  padding: 100px 0 90px;
}

#food-service::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ededed;
  z-index: 0;
}

#food-service>div {
  position: relative;
  z-index: 1;
}

.check-list.style-one li {
  line-height: 24px;
}

.creedfarm-process-sec .creedfarm-image img {
  height: auto;
}

.nice-select .option {
  color: #000;
}




















/* --- the closed control --- */
.nice-select.form_control,
.contact-wrapper .nice-select {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  line-height: 20px;
  padding-right: 48px;
  white-space: nowrap;
  cursor: pointer;
}

.nice-select.form_control .current,
.contact-wrapper .nice-select .current {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- arrow: pinned to the right edge, drawn from borders --- */
.nice-select.form_control:after,
.contact-wrapper .nice-select:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  bottom: auto;
  left: auto;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: none;
  font-size: 0;
  -webkit-transform: translateY(-70%) rotate(45deg);
  transform: translateY(-70%) rotate(45deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.nice-select.form_control.open:after,
.contact-wrapper .nice-select.open:after {
  -webkit-transform: translateY(-25%) rotate(-135deg);
  transform: translateY(-25%) rotate(-135deg);
}

/* --- the open list: solid white panel, no inherited blur --- */
.nice-select.form_control .list,
.contact-wrapper .nice-select .list {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100%;
  max-height: 260px;
  margin-top: 6px;
  padding: 6px 0;
  overflow-y: auto;
  border-radius: 6px;
  background-color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.nice-select.form_control .list .option,
.contact-wrapper .nice-select .list .option {
  display: block;
  min-height: 42px;
  padding: 10px 20px;
  line-height: 22px;
  white-space: normal;
  color: #1A1A1A;
  background-color: transparent;
  cursor: pointer;
}

.nice-select.form_control .list .option:hover,
.nice-select.form_control .list .option.focus,
.nice-select.form_control .list .option.selected,
.nice-select.form_control .list .option.selected.focus,
.contact-wrapper .nice-select .list .option:hover,
.contact-wrapper .nice-select .list .option.focus,
.contact-wrapper .nice-select .list .option.selected,
.contact-wrapper .nice-select .list .option.selected.focus {
  color: #000000;
  background-color: #EDEDED;
}

.nice-select.form_control .list .option.disabled,
.contact-wrapper .nice-select .list .option.disabled {
  color: #8A8A8A;
  background-color: transparent;
  cursor: default;
}



.contact-wrapper.on-dark .nice-select.form_control,
.nice-select.form_control {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
      background-color: rgba(255, 255, 255, 1);
  color: #000;
}

.contact-wrapper.on-dark .nice-select.form_control.open,
.nice-select.form_control.open {
  z-index: 60;
}

.contact-wrapper.on-dark .nice-select.form_control .list,
.nice-select.form_control .list {
  z-index: 61;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: #ffffff;
}

/* the closed control's own text stays white; the arrow follows it */
.contact-wrapper.on-dark .nice-select.form_control .current,
.nice-select.form_control .current {
  color: var(--text-color);
}

.contact-wrapper.on-dark .nice-select.form_control:after,
.nice-select.form_control:after {
  border-right-color: var(--text-color);
  border-bottom-color: var(--text-color);
  opacity: 0.85;
}

/* option text, at a specificity the theme sheet can't undercut */
.contact-wrapper.on-dark .nice-select.form_control .list .option,
.nice-select.form_control .list .option {
  color: #1A1A1A;
  background-color: #ffffff;
}

.contact-wrapper.on-dark .nice-select.form_control .list .option:hover,
.contact-wrapper.on-dark .nice-select.form_control .list .option.focus,
.contact-wrapper.on-dark .nice-select.form_control .list .option.selected,
.contact-wrapper.on-dark .nice-select.form_control .list .option.selected.focus,
.nice-select.form_control .list .option:hover,
.nice-select.form_control .list .option.focus,
.nice-select.form_control .list .option.selected,
.nice-select.form_control .list .option.selected.focus {
  color: #000000;
  background-color: #EDEDED;
}

/*=========================
    33# Creed - Hero background crossfade (3 images)
==========================*/
/* The hero used to be a slick slider, then a single static image. It is now a
   stack of background frames that crossfade on a CSS loop - no JS, and the
   heading and buttons never move, so only the photograph changes.
   Timing: 18s loop, each frame holds ~5s with a 1s crossfade.
   The negative delay on the first frame means it is already at full opacity on
   load, so there is no black flash before the animation starts. */
.creedfarm-hero .single-slider .hero-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background-color: var(--primary-color);
}

.creedfarm-hero .hero-fade .hero-frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-animation: heroFade 18s linear infinite;
  animation: heroFade 18s linear infinite;
}

.creedfarm-hero .hero-fade .hero-frame:nth-child(1) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.creedfarm-hero .hero-fade .hero-frame:nth-child(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.creedfarm-hero .hero-fade .hero-frame:nth-child(3) {
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}

/* the dark wash carried by the old .image-layer:after - one copy, above all
   three frames, so a crossfade never doubles the overlay and goes black */
.creedfarm-hero .hero-fade:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 2;
  background: -webkit-gradient(linear, left top, right top, color-stop(0.13%, rgba(0, 0, 0, 0.6)), color-stop(52.05%, rgba(0, 0, 0, 0.3)), color-stop(99.83%, rgba(0, 0, 0, 0.6)));
  /* flat wash first (sits on top), then the original edge vignette under it */
  background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0.13%, rgba(0, 0, 0, 0.3) 52.05%, rgba(0, 0, 0, 0.6) 99.83%);
}

@-webkit-keyframes heroFade {
  0% {
    opacity: 0;
  }

  5.55% {
    opacity: 1;
  }

  33.3% {
    opacity: 1;
  }

  38.9% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes heroFade {
  0% {
    opacity: 0;
  }

  5.55% {
    opacity: 1;
  }

  33.3% {
    opacity: 1;
  }

  38.9% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* The global reduced-motion block collapses every animation to 0.001ms, which
   would run this one straight to its last keyframe and leave the hero with no
   photograph at all. Hold the first frame instead. */
@media (prefers-reduced-motion: reduce) {
  .creedfarm-hero .hero-fade .hero-frame {
    -webkit-animation: none !important;
    animation: none !important;
    opacity: 0;
  }

  .creedfarm-hero .hero-fade .hero-frame:nth-child(1) {
    opacity: 1;
  }
}
/*=========================
    Cut cards — chart by default, real photo on hover
==========================*/
.creed-cuts-sec .cut-chart.has-photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.creed-cuts-sec .cut-chart.has-photo .cut-diagram,
.creed-cuts-sec .cut-chart.has-photo .cut-photo {
  display: block;
  width: 100%;
  transition: opacity 0.35s ease;
}
.creed-cuts-sec .cut-chart.has-photo .cut-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
/* Reveal on hover, on keyboard focus within the card, and on tap (touch) */
.creed-cuts-sec .creedfarm-choose-item:hover .cut-chart.has-photo .cut-photo,
.creed-cuts-sec .creedfarm-choose-item:focus-within .cut-chart.has-photo .cut-photo,
.creed-cuts-sec .cut-chart.has-photo:hover .cut-photo {
  opacity: 1;
}
.creed-cuts-sec .creedfarm-choose-item:hover .cut-chart.has-photo .cut-diagram,
.creed-cuts-sec .creedfarm-choose-item:focus-within .cut-chart.has-photo .cut-diagram,
.creed-cuts-sec .cut-chart.has-photo:hover .cut-diagram {
  opacity: 0;
}
/* Hint that the card is interactive */
.creed-cuts-sec .cut-chart.has-photo::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/14px no-repeat;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.creed-cuts-sec .creedfarm-choose-item:hover .cut-chart.has-photo::after {
  opacity: 0;
}
/* Touch devices can't hover — show the photo alongside instead of hiding it */
@media (hover: none) {
  .creed-cuts-sec .cut-chart.has-photo .cut-photo { position: static; opacity: 1; height: auto; margin-top: 10px; }
  .creed-cuts-sec .cut-chart.has-photo::after { display: none; }
}

/*=========================
    Gallery page — simple responsive grid, no lightbox
==========================*/
.creed-gallery-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.creed-gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.creed-gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.creed-gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.creed-gallery-item {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #EDFFE8;
  position: relative;
}
.creed-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.creed-gallery-item:hover img {
  transform: scale(1.04);
}
.creed-gallery-item figcaption {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-color);
  background-color: #ffffff;
}
.creed-gallery-empty {
  color: var(--text-color);
  padding: 60px 0;
}

@media (max-width: 1199.98px) {
  .creed-gallery-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .creed-gallery-grid,
  .creed-gallery-grid.cols-3,
  .creed-gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .creed-gallery-grid,
  .creed-gallery-grid.cols-2,
  .creed-gallery-grid.cols-3,
  .creed-gallery-grid.cols-4 { grid-template-columns: 1fr; }
  .creed-gallery-grid { gap: 16px; }
}

/*=========================================================
    2026-09 LAYOUT REWORK
    Hero: photo on top, copy beneath, together filling one screen.
    No dark overlay anywhere — photographs run full colour.
=========================================================*/
:root {
  --cf-header-h: 160px;   /* measured height of the site header */
}
@media (max-width: 1199.98px) { :root { --cf-header-h: 120px; } }
@media (max-width: 991.98px)  { :root { --cf-header-h: 92px;  } }

/* ---------- Hero ---------- */
.creedfarm-hero.hero-stacked {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--cf-header-h));
  padding: 0;
  background-color: #ffffff;
}
/* svh is respected by modern mobile browsers; this is the fallback */
@supports not (height: 100svh) {
  .creedfarm-hero.hero-stacked { min-height: calc(100vh - var(--cf-header-h)); }
}

.hero-stacked .hero-media {
  position: relative;
  /* takes whatever height the copy does not need, so the pair always
     add up to exactly one screen */
  flex: 1 1 auto;
  min-height: 200px;
  overflow: hidden;
}
.hero-stacked .hero-copy {
  flex: 0 0 auto;       /* sized by its content */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) 0;
  background-color: #ffffff;
}

/* The photograph itself — overlay removed */
.hero-stacked .hero-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #EDFFE8;
}
.hero-stacked .hero-fade:after { display: none !important; }
.hero-stacked .hero-frame { z-index: 0; }

/* Copy now sits on white, so it can no longer be white text */
.creedfarm-hero.hero-stacked .hero-content h1 {
  color: #000000;
  text-shadow: none;
  margin-bottom: 0;
  /* scales with both width and height so the hero holds one screen
     on a laptop and on a tall desktop alike */
  font-size: clamp(26px, min(3.6vw, 5.1vh), 48px) !important;
  line-height: 1.08 !important;
}
.creedfarm-hero.hero-stacked .hero-content .hero-text {
  color: var(--text-color);
  text-shadow: none;
  font-size: clamp(14px, min(1.15vw, 1.8vh), 17px) !important;
  line-height: 1.5 !important;
  font-weight: 500;
  max-width: 700px;
  margin: clamp(8px, 1.2vh, 14px) auto clamp(12px, 1.8vh, 20px);
}
.hero-stacked .hero-content .tag-line { margin-bottom: 16px; }
.hero-stacked .hero-button { margin-top: 4px; }

@media (max-width: 991.98px) {
  .hero-stacked .hero-media { flex: 5 1 0; }
  .hero-stacked .hero-copy  { flex: 5 1 0; padding: 26px 0; }
  .hero-stacked .hero-content .hero-text { font-size: 17px; line-height: 27px; margin: 12px auto 20px; }
}
@media (max-width: 575.98px) {
  .hero-stacked .hero-content .hero-text { font-size: 16px; line-height: 25px; }
  .hero-stacked .hero-button .theme-btn { padding: 13px 22px; font-size: 14px; }
}

/* ---------- Trust strip: fluid, 4 equal, 2x2 on mobile ---------- */
.creed-trust-strip {
  padding: 0;
  background-color: #ffffff;
}
/* dividers should not run the full cell height — inset them like the reference */
.creed-trust-item { position: relative; border-right: 0 !important; }
.creed-trust-item::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  right: 0;
  width: 1px;
  background-color: var(--border-color);
}
.creed-trust-item:last-child::after { display: none; }
.creed-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  /* rules sit inside the container so they line up with the hero above */
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.creed-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 18px;
  padding: 32px 26px;
  background-color: #ffffff;
  border-right: 1px solid var(--border-color);
}


.creed-trust-item .icon {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  background: linear-gradient(var(--secondary-color), var(--secondary-color)) padding-box,
              var(--gold-gradient) border-box;
  border: 2px solid transparent;
}
.creed-trust-item h4 {
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  max-width: 14ch;
}

@media (max-width: 767.98px) {
  .creed-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .creed-trust-item { padding: 24px 16px; gap: 12px; }
  .creed-trust-item:nth-child(2n)::after { display: none; }
  .creed-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }
  .creed-trust-item .icon { width: 56px; height: 56px; font-size: 23px; }
  .creed-trust-item h4 { font-size: 15px; line-height: 22px; }
}

/* ---------- Inner page banners: full colour, heading beneath ---------- */
.page-banner.page-banner--stacked {
  padding: 0;
  background: none;
}
.page-banner--stacked:after,
.page-banner--stacked:before { display: none !important; }

.page-banner--stacked .page-banner__media {
  width: 100%;
  height: clamp(260px, 42vh, 460px);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.page-banner--stacked .page-banner__head {
  padding: 54px 0 46px;
  background-color: #ffffff;
}
.page-banner--stacked .page-content h1 {
  color: #000000;
  margin: 0;
}
.page-banner--stacked .page-content p {
  color: var(--text-color);
  font-size: 18px;
  line-height: 30px;
  max-width: 780px;
  margin: 16px auto 0;
}
/* breadcrumb above the heading, quiet */
.page-banner--stacked .page-crumbs ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-banner--stacked .page-crumbs li { color: var(--text-color); }
.page-banner--stacked .page-crumbs li + li:before {
  content: "/";
  margin-right: 10px;
  color: var(--border-color);
}
.page-banner--stacked .page-crumbs a { color: var(--secondary-color); }
.page-banner--stacked .page-crumbs a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .page-banner--stacked .page-banner__media { height: clamp(200px, 32vh, 300px); }
  .page-banner--stacked .page-banner__head { padding: 34px 0 30px; }
  .page-banner--stacked .page-content p { font-size: 16px; line-height: 27px; }
}

/*=========================================================
    Order form — package chooser
=========================================================*/
.creed-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.creed-package { display: block; margin: 0; cursor: pointer; height: 100%; }
.creed-package input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.creed-package__body {
  display: block;
  height: 100%;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 18px 16px;
  background-color: #ffffff;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.creed-package:hover .creed-package__body { border-color: #BB9637; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.creed-package input:checked + .creed-package__body {
  border-color: transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gold-gradient) border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.creed-package input:focus-visible + .creed-package__body {
  outline: 3px solid #8A6D1F;
  outline-offset: 2px;
}
.creed-package__name {
  display: block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #000000;
  margin-bottom: 6px;
}
.creed-package__detail {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-color);
}
.creed-custom-order[hidden] { display: none !important; }

@media (max-width: 991.98px) { .creed-packages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .creed-packages { grid-template-columns: 1fr; } }

/*=========================================================
    Heading face: Besley
    A Clarendon-style slab serif, variable 400-900. Slabs carry
    weight in the serifs themselves, so 600 reads as heavy as 700
    does on a Didone - and the brackets want slight negative
    tracking so they do not collide at display size.
=========================================================*/
h1, h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.creedfarm-hero .hero-content h1,
.creedfarm-hero.hero-stacked .hero-content h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-banner--stacked .page-content h1 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/*=========================================================
    Hero copy — two columns: headline left, support right
=========================================================*/
.hero-stacked .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: 100%;
}
.hero-stacked .hero-grid__support {
  border-left: 1px solid var(--border-color);
  padding-left: clamp(28px, 4vw, 56px);
}
/* everything reads left-aligned now, not centred */
.hero-stacked .hero-content,
.hero-stacked .hero-grid,
.hero-stacked .hero-grid__lead,
.hero-stacked .hero-grid__support { text-align: left; }

.hero-stacked .hero-grid__lead .tag-line { margin-bottom: 18px; }
.creedfarm-hero.hero-stacked .hero-grid__lead h1 { margin: 0; }

.creedfarm-hero.hero-stacked .hero-grid__support .hero-text {
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  max-width: 100%;
}
.hero-stacked .hero-grid__support .hero-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
/* the legacy hero button rules add their own spacing and sizing */
.hero-stacked .hero-grid__support .hero-button .theme-btn {
  margin: 0;
  white-space: nowrap;
  padding: 14px 24px;
  font-size: 15px;
}

/* The highlighted word is gold *type* now, not a gold box.
   The existing gradient runs dark-light-dark, so clipping it to the
   glyphs gives the lighter centre and deeper edges by itself. */
.creedfarm-hero.hero-stacked .hero-grid__lead h1 span {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* if background-clip:text is unsupported, fall back to solid gold */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .creedfarm-hero.hero-stacked .hero-grid__lead h1 span {
    background: none;
    color: #BB9637;
    -webkit-text-fill-color: #BB9637;
  }
}

@media (max-width: 991.98px) {
  .hero-stacked .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-stacked .hero-grid__support {
    border-left: 0;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 20px;
  }
  .creedfarm-hero.hero-stacked .hero-grid__support .hero-text { max-width: none; }
}

/*=========================================================
    Header — nav sits beside the logo, cart pinned right
=========================================================*/
@media (min-width: 1200px) {
  .header-one .primary-menu { justify-content: flex-start; }
  /* the menu takes the space left between the logo and the cart and
     centres itself in it, so the nav reads as balanced rather than
     hard against the logo */
  .header-one .theme-nav-menu { margin-left: clamp(16px, 1.8vw, 34px); }
  .header-one .nav-right-item { margin-left: auto; }
  .header-one .main-menu > ul { justify-content: center; }
}

/* The menu is the only flexible part of the header row: the logo and the
   cart keep their size and the links absorb what is left, shrinking their
   spacing rather than dropping onto a second row. */
@media (min-width: 1200px) {
  .header-one .primary-menu {
    flex-wrap: nowrap;
  }
  .header-one .site-branding,
  .header-one .nav-right-item {
    flex: 0 0 auto;
  }
  .header-one .theme-nav-menu {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-one .main-menu > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .header-one .main-menu > ul > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Spacing is what gives once the links run out of room. The theme put a
     flat 17px margin on each li above 1400px, which is why the row broke on
     wide screens first: eight top-level items carried 272px of pure gap.
     One clamped control on the link padding instead, so the rhythm scales
     with the viewport and the row always fits. */
  .header-one .main-menu > ul > li {
    margin-left: 0;
    margin-right: 0;
  }
  .header-one .main-menu > ul > li > a {
    padding-left: clamp(6px, 0.75vw, 15px);
    padding-right: clamp(6px, 0.75vw, 15px);
  }
  /* dropdown parents need a little more room for the caret */
  .header-one .main-menu > ul > li.menu-item-has-children > a,
  .header-one .main-menu > ul > li.has-children > a {
    padding-right: clamp(15px, 1.35vw, 23px);
  }
}

.nav-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 19px;
  color: #ffffff;
  background-color: var(--secondary-color);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.nav-cart:hover,
.nav-cart:focus-visible {
  background-color: #7d0001;
  color: #ffffff;
  transform: translateY(-1px);
}
.nav-cart i { line-height: 1; }

@media (max-width: 1199.98px) {
  .nav-cart { width: 42px; height: 42px; font-size: 17px; margin-right: 14px; }
}

/*=========================================================
    Form placeholders
    The contact/order fields still carried rgba(255,255,255,.8)
    from when the form sat on a dark panel — barely visible now
    the panel is light. Each vendor prefix needs its own rule:
    grouped selectors are dropped wholesale if a browser does not
    recognise one of them.
=========================================================*/
.contact-wrapper .form_control::placeholder,
.contact-form .form_control::placeholder,
.xlnc-form .form_control::placeholder,
.contact-wrapper textarea::placeholder,
.contact-wrapper input::placeholder { color: #aaaaaa; opacity: 1; }

.contact-wrapper .form_control::-webkit-input-placeholder,
.contact-form .form_control::-webkit-input-placeholder,
.xlnc-form .form_control::-webkit-input-placeholder { color: #aaaaaa; }

.contact-wrapper .form_control::-moz-placeholder,
.contact-form .form_control::-moz-placeholder,
.xlnc-form .form_control::-moz-placeholder { color: #aaaaaa; opacity: 1; }

.contact-wrapper .form_control:-ms-input-placeholder,
.contact-form .form_control:-ms-input-placeholder,
.xlnc-form .form_control:-ms-input-placeholder { color: #aaaaaa; }

.contact-wrapper .form_control::-ms-input-placeholder,
.contact-form .form_control::-ms-input-placeholder,
.xlnc-form .form_control::-ms-input-placeholder { color: #aaaaaa; }

/* selects show their first option rather than a placeholder */
.contact-wrapper select.form_control:invalid,
.contact-wrapper select.form_control option[value=""] { color: #aaaaaa; }

/*=========================================================
    Heading band beneath the banner photo
    A red glow drifting in from the top-right and a green one from
    the top-left — both pulled from the brand palette at low alpha —
    over a pale ground that lifts slightly toward the photo above.
=========================================================*/
:root {
  --st-ground:      #FFFFFF;   /* resolves to pure white at the bottom */
  --st-ground-deep: #ECEDF1;   /* very slightly deeper, meets the photo */
}

.page-banner--stacked .page-banner__head,
.creedfarm-hero.hero-stacked .hero-copy {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(159, 0, 1, .1) 0%, rgba(159, 0, 1, 0) 62%),
    radial-gradient(90% 70% at 4% 0%, rgba(43, 71, 32, .20) 0%, rgba(43, 71, 32, 0) 58%),
    linear-gradient(180deg, var(--st-ground-deep) 0%, var(--st-ground) 70%);
  background-repeat: no-repeat;
}

/* the hero divider needs a touch more presence on the wash */
.hero-stacked .hero-grid__support { border-left-color: rgba(20, 20, 15, 0.14); }
@media (max-width: 991.98px) {
  .hero-stacked .hero-grid__support { border-top-color: rgba(20, 20, 15, 0.14); }
}

/*=========================================================
    Breadcrumb on the stacked banner
    The theme's original crumb was a translucent white pill with
    white text, built for a dark photo background. The heading band
    is light now, so the pill reads as a grey blob and the text
    all but disappears. Reset the container and restate the colours.
=========================================================*/
.page-banner--stacked .page-content .page-crumbs ul {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
}
.page-banner--stacked .page-content .page-crumbs ul li {
  color: #5A5F55;
}
.page-banner--stacked .page-content .page-crumbs ul li a {
  color: var(--secondary-color);
  font-weight: 600;
}
.page-banner--stacked .page-content .page-crumbs ul li a:hover,
.page-banner--stacked .page-content .page-crumbs ul li a:focus-visible {
  color: #7d0001;
  text-decoration: underline;
}
/* the theme draws its own "|" separator in near-transparent white */
.page-banner--stacked .page-content .page-crumbs ul li:not(:last-child):after {
  content: "/";
  margin-left: 10px;
  margin-right: 10px;
  color: #B9BDB4;
}
.page-banner--stacked .page-content .page-crumbs ul li + li:before { content: none; }

/*=========================================================
    Navigation — black links
    The theme set these to --heading-color (the dark green).
=========================================================*/
.header-area .header-navigation .main-menu ul > li > a,
.header-area .header-navigation .main-menu ul > li .sub-menu li a {
  color: #000000;
}
/* black-on-black gives no hover feedback, so lift to the brand red */
.header-area .header-navigation .main-menu ul > li:hover > a,
.header-area .header-navigation .main-menu ul > li > a:focus-visible,
.header-area .header-navigation .main-menu ul > li .sub-menu li a:hover,
.header-area .header-navigation .main-menu ul > li .sub-menu li a:focus-visible {
  color: var(--secondary-color);
}
/* the dropdown carets inherit their own colour */
.header-area .header-navigation .main-menu ul > li.has-children > a:after,
.header-area .header-navigation .main-menu ul > li.menu-item-has-children > a:after {
  color: currentColor;
}

/*=========================================================
    Black utility bar above the header
=========================================================*/
.creed-topbar {
  background-color: #000000;
  color: #ffffff;
  font-family: var(--body-font);
}
.creed-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 8px 0;
}
.creed-topbar__msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.creed-topbar__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  white-space: nowrap;
}
.creed-topbar__contact a {
  color: #ffffff;
  text-decoration: none;
}
.creed-topbar__contact a:hover,
.creed-topbar__contact a:focus-visible {
  color: #FDDB85;
  text-decoration: underline;
}
.creed-topbar__contact span { color: rgba(255, 255, 255, 0.35); }

@media (max-width: 767.98px) {
  .creed-topbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 9px 0;
  }
  .creed-topbar__msg,
  .creed-topbar__contact { font-size: 12px; }
  .creed-topbar__contact { gap: 8px; }
}

/*=========================================================
    H1 sizing
    75/85 is the desktop setting. It is stepped down below that —
    a fixed 75px overflows a phone screen — and the home hero keeps
    its own clamp so the banner + copy still fit one viewport.
=========================================================*/
h1 {
  font-size: 75px;
  line-height: 85px;
}
@media (max-width: 1399.98px) {
  h1 { font-size: 62px; line-height: 72px; }
}
@media (max-width: 1199.98px) {
  h1 { font-size: 52px; line-height: 62px; }
}
@media (max-width: 767.98px) {
  h1 { font-size: 38px; line-height: 46px; }
}
@media (max-width: 479.98px) {
  h1 { font-size: 32px; line-height: 40px; }
}

/* Rule closing the heading band on inner pages */
.page-banner--stacked .page-banner__head {
  border-bottom: 1px solid var(--border-color);
}

/* The theme gives hero buttons a 15px left margin to space a pair apart.
   With a single button that just indents it past the paragraph above. */
.creedfarm-hero.hero-stacked .hero-grid__support .hero-button {
  justify-content: flex-start;
}
.creedfarm-hero.hero-stacked .hero-grid__support .hero-button .theme-btn {
  margin-left: 0;
  margin-right: 0;
}

/* Form labels were also set in the brand green; small green text reads
   muddy, so they go black like the rest of the copy. */
.contact-wrapper label,
.contact-wrapper.on-dark label,
.xlnc-form label {
  color: #000000;
}

/*=========================================================
    Eyebrows — one gold treatment everywhere
    The hero pill already carried the gold gradient; the section
    eyebrows (.sub-title) were a plain outlined chip. Same
    treatment now applies to both.
=========================================================*/
.sub-title,
.creedfarm-hero .hero-content span.tag-line {
  background: var(--gold-gradient);
  border: 1px solid transparent;
  color: #000000;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* the dark sections invert their eyebrow — keep the gold there too */
.creedfarm-choose-sec .section-title .sub-title,
.creed-cuts-sec .section-title .sub-title,
.section-title.text-white .sub-title {
  background: var(--gold-gradient);
  color: #000000;
  border-color: transparent;
}

/*=========================================================
    Home contact section — image sits on the baseline of the form
=========================================================*/
@media (min-width: 992px) {
  .creedfarm-contact-sec > .container > .row { align-items: stretch; }
  /* both columns carry mb-50; on a stretched row that margin inflates the
     column and drops the photo below the form. Move the gap to the section. */
  .creedfarm-contact-sec .creedfarm-content-box,
  .creedfarm-contact-sec .contact-wrapper { margin-bottom: 0; }
  .creedfarm-contact-sec { padding-bottom: 50px; }
  .creedfarm-contact-sec .creedfarm-content-box {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* push the photo to the bottom of the column so its lower edge
     lines up with the bottom of the form panel opposite */
  .creedfarm-contact-sec .creedfarm-content-box .creedfarm-image {
    margin-top: auto;
  }
  .creedfarm-contact-sec .creedfarm-content-box .creedfarm-image img {
    display: block;
    width: 100%;
  }
}

/*=========================================================
    CTA band — ring out, colour wash in
    Replaces the decorative gold circle with the same brand-colour
    splash used on the heading band: red drifting from the top-right,
    green from the top-left, over a pale ground.
=========================================================*/
.creedfarm-cta .creedfarm-cta-item:before { display: none; }

.creedfarm-cta .cta-wrapper {
  background-color: var(--st-ground);
  background-image:
    radial-gradient(120% 90% at 88% 8%, rgba(159, 0, 1, .1) 0%, rgba(159, 0, 1, 0) 62%),
    radial-gradient(90% 70% at 4% 0%, rgba(43, 71, 32, .20) 0%, rgba(43, 71, 32, 0) 58%),
    linear-gradient(180deg, var(--st-ground-deep) 0%, var(--st-ground) 70%);
  background-repeat: no-repeat;
}

/*=========================================================
    About — assurance list (replaces the 100% progress bars)
    A percentage bar implies a measurement; these are absolutes,
    so they read better as a ticked list.
=========================================================*/
.creed-assurance-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
}
.creed-assurance-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: #000000;
}
.creed-assurance-list li i {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  /* gold, matching the eyebrow pills and the "Standards" highlight */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .creed-assurance-list li i { background: none; color: #BB9637; -webkit-text-fill-color: #BB9637; }
}

/*=========================================================
    Homepage intro — handshake watermark
    Drawn on a pseudo-element rather than the section itself so its
    opacity can be tuned without touching the text sitting over it.
=========================================================*/
.creed-brand-intro {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.creed-brand-intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 82%);
  aspect-ratio: 1 / 1;
  background-image: url("../images/bg/handshake-watermark.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  mix-blend-mode: multiply;   /* drops the white ground, keeps the pencil lines */
  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
}
.creed-brand-intro > .container { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .creed-brand-intro::before { width: 100%; opacity: 0.5; }
}
@media (prefers-reduced-motion: no-preference) {
  /* nothing animated here — declared so the rule set stays explicit */
}

@media (max-width: 575.98px) {
  /* stack again once there is no room for two across */
  .creed-assurance-list { flex-direction: column; gap: 12px; }
}

/*=========================================================
    Rounded corners on content imagery
    Applied to the image containers rather than the <img> itself,
    so overlays and hover panels are clipped by the same radius.
    Full-bleed imagery (hero, page banner) is deliberately excluded.
=========================================================*/
.creedfarm-service-item .thumbnail,
.creedfarm-project-item-two .thumbnail,
.creedfarm-project-item .thumbnail,
.creed-gallery-item,
.creedfarm-image,
.creedfarm-image-box .creedfarm-image,
.creedfarm-contact-sec .creedfarm-content-box .creedfarm-image,
.page-banner--stacked .page-banner__media {
  border-radius: 10px;
  overflow: hidden;
}
/* the <img> can carry its own radius from the theme — keep them in step */
.creedfarm-service-item .thumbnail img,
.creedfarm-project-item-two .thumbnail img,
.creedfarm-project-item .thumbnail img,
.creed-gallery-item img,
.creedfarm-image img {
  border-radius: 10px;
}
/* overlays and hover panels sit inside the clipped container */
.creedfarm-service-item .thumbnail .hover-overlay,
.creedfarm-project-item-two .thumbnail .hover-overlay {
  border-radius: 10px;
}

/* Footer: order button in place of the social row */
.footer-order-cta { margin-top: 24px; }
.footer-order-cta .theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-size: 15px;
}
.footer-order-cta .theme-btn i { font-size: 17px; line-height: 1; }

/* The utility bar stacks to two rows on a phone and eats real estate that the
   hero needs. Hidden below tablet — the same email and phone are in the footer
   and on the Contact page. The header-height script measures the bar's real
   height, so hiding it is picked up automatically and the hero still fits. */
@media (max-width: 767.98px) {
  .creed-topbar { display: none; }
}

/*=========================================================
    Stats on phones: one card at a time in a slider
    Four cards stacked ran the full screen twice over, and squeezing
    them 2x2 broke the numbers ("100%", "1 Day") onto two lines. One
    per view keeps the figure on one line and the section short.
    Slick is initialised in inc/enqueue.php below 768px only.
=========================================================*/
@media (max-width: 767.98px) {
  .creed-counter-slider.slick-initialized {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
  .creed-counter-slider.slick-initialized .slick-track {
    display: flex;
    align-items: stretch;
  }
  .creed-counter-slider.slick-initialized .slick-slide {
    height: auto;
    float: none;
  }
  /* slick sets each slide's width inline; `flex: 0 0 auto` keeps that,
     whereas 0 0 100% would resolve against the whole track */
  .creed-counter-slider.slick-initialized .slick-slide {
    flex: 0 0 auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .creed-counter-slider.slick-initialized .creedfarm-counter-item {
    height: 100%;
    margin-bottom: 0;
    padding: 26px 24px;
  }
  .creed-counter-slider.slick-initialized .creedfarm-counter-item .content h2 {
    font-size: 42px;
    line-height: 1.05;
    white-space: nowrap;
  }
  .creed-counter-slider.slick-initialized .creedfarm-counter-item .content > span {
    font-size: 14px;
    line-height: 1.4;
  }

  /* dots sit under the card, gold for the active one */
  .creed-counter-slider .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
  }
  .creed-counter-slider .slick-dots li { line-height: 0; }
  .creed-counter-slider .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 71, 32, 0.25);
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
  }
  .creed-counter-slider .slick-dots li.slick-active button {
    width: 22px;
    border-radius: 4px;
    background: var(--gold-color, #BB9637);
  }
  .creed-counter-slider .slick-dots li button:focus-visible {
    outline: 2px solid var(--gold-color, #BB9637);
    outline-offset: 3px;
  }
}

/*=========================================================
    Footer on mobile
    Rebuilt to the approved layout: logo and blurb centred, a
    full-width order button, then every link — site and compliance
    together — as one centred list of hairline-separated rows. The
    two widget headings are dropped so the lists read continuously,
    and the address rows put label and value on one line.
=========================================================*/
@media (max-width: 767.98px) {
  .default-footer .footer-widget-area {
    padding-top: 44px;
    padding-bottom: 8px;
  }

  /* Flatten the nested column so the four blocks become siblings of the
     outer row and can be ordered: about, site links, compliance, address.
     Site and address live inside one wrapper column, so without this the
     compliance list cannot be placed between them. */
  .default-footer .footer-widget-area > .row > .col-xl-6,
  .default-footer .footer-widget-area .row.px-xl-5 {
    display: contents;
  }
  .default-footer .footer-widget-area > .row > .col-xl-3.order-1 { order: 1; }
  .default-footer .footer-widget-area .row.px-xl-5 > .col-md-6:first-child { order: 2; }
  .default-footer .footer-widget-area > .row > .col-xl-3.order-2 { order: 3; }
  .default-footer .footer-widget-area .row.px-xl-5 > .col-md-6:last-child { order: 4; }

  .default-footer .footer-widget { margin-bottom: 0 !important; }

  /* ---- brand block ---- */
  .default-footer .footer-about-widget { text-align: center; }
  .default-footer .footer-about-widget img {
    max-width: 190px;
    margin: 0 auto 18px !important;
  }
  .default-footer .footer-about-widget p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 auto 22px;
    max-width: 34ch;
  }
  .footer-order-cta { margin: 0 0 30px; }
  .footer-order-cta .theme-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  /* ---- one continuous link list ---- */
  .default-footer .footer-nav-widget .widget-title { display: none; }
  .default-footer .widget-nav {
    column-count: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .default-footer .footer-widget .widget-nav li {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* The theme spaces these with
     `.footer-nav-widget .widget-content .widget-nav li:not(:last-child)`,
     which outranks a shorter selector. The rows have to butt together:
     the last item of the site list has no margin, so the join with the
     compliance list would otherwise read tighter than every other row. */
  .default-footer .footer-nav-widget .widget-content .widget-nav li:not(:last-child) {
    margin-bottom: 0;
  }
  /* close the top of the list, under the button */
  .default-footer .footer-widget-area .row.px-xl-5 > .col-md-6:first-child .widget-nav li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .default-footer .widget-nav li a {
    display: block;
    padding: 12px 8px;
    font-size: 16px;
    line-height: 1.3;
  }

  /* ---- address ---- */
  .default-footer .footer-contact-info-widget { margin-top: 34px !important; }
  .default-footer .footer-contact-info-widget .widget-title {
    display: block;
    text-align: center;
    font-size: 19px;
    margin-bottom: 20px;
  }
  .default-footer .footer-contact-info-widget .widget-content { display: block; }
  .default-footer .creedfarm-info-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px !important;
  }
  .default-footer .creedfarm-info-box:last-child { margin-bottom: 0 !important; }
  .default-footer .creedfarm-info-box .icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  /* label and value share a line rather than stacking */
  .default-footer .creedfarm-info-box .content .title {
    display: inline;
    font-size: 15px;
    font-weight: 700;
  }
  .default-footer .creedfarm-info-box .content .title::after { content: ":"; }
  .default-footer .creedfarm-info-box .content p {
    display: inline;
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 0 4px;
    word-break: break-word;
  }

  /* ---- bottom bar ---- */
  .default-footer .copyright-area { padding: 16px 0; }
  .default-footer .copyright-area .copyright-text { margin-bottom: 4px; }
  .default-footer .copyright-area .copyright-text p { font-size: 14px; }
  .default-footer .copyright-link {
    float: none !important;
    text-align: center;
  }
  .default-footer .copyright-link a { font-size: 15px; }
}

}

/*=========================================================
    Homepage intro — the five convictions
    Client copy (Homepage site contents.docx, comment #0) adds a
    lead-in line and a five-item list under the intro paragraph.
    The section is centre-aligned, so the list is centred as a block
    but its rows read left-aligned — five centred rows of differing
    length would look ragged.
=========================================================*/
.creed-convictions {
  max-width: 940px;
  margin: 34px auto 0;
  text-align: left;
}
.creed-convictions__lead {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--heading-color);
}
.creed-convictions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}
.creed-convictions__list li {
  position: relative;
  padding-left: 30px;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
}
/* gold tick, matching the assurance list and the eyebrow pills */
.creed-convictions__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid #BB9637;
  border-bottom: 2.5px solid #BB9637;
  transform: rotate(-45deg);
}
.creed-convictions__label {
  font-weight: 700;
  color: var(--heading-color);
}
.creed-convictions__label::after {
  content: ": ";
}

@media (max-width: 991.98px) {
  .creed-convictions__list { grid-template-columns: 1fr; gap: 14px; }
  .creed-convictions { margin-top: 28px; }
}
@media (max-width: 575.98px) {
  .creed-convictions__lead { font-size: 16px; margin-bottom: 18px; }
  .creed-convictions__list li { font-size: 15px; padding-left: 26px; }
}

/*=========================================================
    About — the five Creed pillars
    Five cards run three-up then two centred, so the cards in a
    row have to square off at the bottom; left to themselves they
    sized to their own copy and the row ended ragged.
=========================================================*/
.creedfarm-choose-sec .row > [class*="col-"] {
  display: flex;
}
.creedfarm-choose-sec .creedfarm-choose-item {
  width: 100%;
}

/*=========================================================
    Species cuts pages (Lamb, Goat, Beef)
    A long list read top to bottom, so the cards stay quiet:
    a hairline card, the cut name, the description, and the
    package/cooking lines only where the source copy has them.
=========================================================*/
.creed-cutlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.creed-cut {
  display: flex;
  flex-direction: column;
  padding: 28px 30px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.creed-cut:hover {
  border-color: #BB9637;
  box-shadow: 0 10px 30px rgba(20, 20, 15, 0.07);
  transform: translateY(-2px);
}
.creed-cut__name {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--heading-color);
}
.creed-cut__desc {
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-color);
}

/* package / cooking sit at the foot of the card, so cards in a row
   line their meta up even when the descriptions differ in length */
.creed-cut__meta {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: grid;
  gap: 8px;
}
.creed-cut__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: baseline;
}
.creed-cut__row dt {
  margin: 0;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8a7433;
}
.creed-cut__row dd {
  margin: 0;
  font-family: var(--body-font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-color);
}

.creed-cutsnote {
  max-width: 860px;
  margin: 54px auto 0;
  text-align: center;
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-color);
  opacity: 0.85;
}

@media (max-width: 991.98px) {
  .creed-cutlist { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575.98px) {
  .creed-cut { padding: 24px 22px; }
  .creed-cut__name { font-size: 21px; }
  .creed-cut__row { grid-template-columns: 1fr; gap: 2px; }
  .creed-cutsnote { margin-top: 40px; font-size: 14px; }
}

/* Cut card photography — the card padding is dropped to the top so the
   image can run edge to edge under the rounded corner. */
.creed-cut.has-media {
  padding-top: 0;
  overflow: hidden;
}
.creed-cut__media {
  margin: 0 -30px 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--st-ground-deep, #ECEDF1);
}
.creed-cut__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.creed-cut:hover .creed-cut__media img { transform: scale(1.03); }

@media (max-width: 575.98px) {
  .creed-cut__media { margin: 0 -22px 18px; }
}

/*=========================================================
    About — the process steps
    Was a photo grid with the caption in a hover overlay. Now that
    each tile carries a step description, the copy sits in a panel
    under the photo: a paragraph cannot be read on hover, and on
    touch it would never be reachable at all.
=========================================================*/
.creed-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.creed-step:hover {
  border-color: #BB9637;
  box-shadow: 0 10px 30px rgba(20, 20, 15, 0.07);
  transform: translateY(-2px);
}
.creed-step__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--st-ground-deep, #ECEDF1);
}
.creed-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.creed-step:hover .creed-step__media img { transform: scale(1.03); }

/* Row spacing goes on the column, not the card: the cards stretch to fill
   their column so a margin on them is swallowed and the rows close up. */
.creed-steps__col { padding-bottom: 60px; }

.creed-step__body { padding: 26px 26px 30px; }
.creed-step__title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
  color: var(--heading-color);
}
.creed-step__text {
  margin: 0;
  font-family: var(--body-font);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-color);
}

@media (max-width: 991.98px) {
  .creed-steps__col { padding-bottom: 40px; }
}
@media (max-width: 575.98px) {
  .creed-step__body { padding: 20px 22px 24px; }
  .creed-step__title { font-size: 19px; }
}

/* the three assurance checks under the process heading */
.creed-steps__checks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
}
.creed-steps__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--heading-color);
}
.creed-steps__checks li i {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: #BB9637;
}
@media (max-width: 767.98px) {
  .creed-steps__checks { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .creed-steps__checks li { font-size: 15px; }
}