/*-----------------------------------------------------------------------------------
    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: rgba(255, 255, 255, 0.72);
}
@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: rgba(24, 39, 30, 0.1);
  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: var(--heading-color);
  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 rgba(255, 255, 255, 0.2);
  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 var(--primary-black-color);
  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: 30px;
  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 var(--border-color);
  border-radius: 30px;
  padding: 5px 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--heading-color);
  background-color: var(--gray-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, 0.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: var(--white-color);
  margin-bottom: 13px;
}
.creedfarm-choose-item .content p {
  color: rgba(255, 255, 255, 0.8);
}

/*=========================
    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: var(--white-color);
}
.contact-wrapper.on-dark > p {
  color: rgba(255, 255, 255, 0.75);
}

/*=========================
    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: var(--primary-black-color);
  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: var(--primary-color);
}
.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 rgba(255, 255, 255, 0.14);
}
.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;
  max-width: 720px;
  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: #ffffff;
  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(255, 255, 255, 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 {
  background: linear-gradient(#000000, #000000) padding-box, var(--gold-gradient) border-box;
}
.theme-btn.style-one:hover {
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gold-gradient) border-box;
}
.theme-btn.style-two {
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gold-gradient) border-box;
}
.theme-btn.style-two:hover {
  background: linear-gradient(#000000, #000000) 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 {
    left: 0;
  }
}
/* 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: 30px;
  border: 1px solid transparent;
  background: var(--gold-gradient);
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--primary-black-color);
  white-space: nowrap;
  -webkit-box-shadow: 0 14px 30px -16px rgba(187, 150, 55, 0.9);
          box-shadow: 0 14px 30px -16px rgba(187, 150, 55, 0.9);
  -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;
}
.creedfarm-cta .creedfarm-cta-item .cta-action .cta-btn:hover {
  background: var(--heading-color);
  color: #FDDB85;
  -webkit-box-shadow: 0 16px 34px -18px rgba(43, 71, 32, 0.95);
          box-shadow: 0 16px 34px -18px rgba(43, 71, 32, 0.95);
}
.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;
  }
      .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-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: #FDDB85;
  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: 65px;
      line-height: 80px;}
    .creedfarm-iconic-left-box .icon{
          width: 60px;
    height: 60px;
    }
}
@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);
  max-width: 840px;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .creed-brand-intro .intro-lead {
    font-size: 17px;
    line-height: 29px;
  }
}

/* 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;
  left: 16px;
  z-index: 9999;
  background: #000000;
  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;
  }
  .spin { animation: none !important; }
}