/* ===================================================================
   Gorillo — modern upgrade layer.  Loads AFTER the Webflow stylesheet
   and refines it: readable typography, sleeker components, better
   rhythm & contrast. Brand (gold #D4AF37 on black) is kept intact.
   =================================================================== */
:root{ --gold:#D4AF37; --gold-2:#e7c860; --line:rgba(212,175,55,.22); }

/* -- 1. Readable body copy: left-aligned, comfortable measure, brighter -- */
.tab-para, .card-para, .paragraph-2, .paragraph-3, .service-p{
  text-align:left !important;
  line-height:1.8 !important;
  color:rgba(255,255,255,.8) !important;
  font-weight:400 !important;
  letter-spacing:.2px;
}
.tab-para, .paragraph-2, .paragraph-3{
  max-width:640px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.banner-para{ line-height:1.75 !important; }

/* -- 2. Section headings: refined hierarchy -- */
.heading-3, .heading-4, .heading-5, .heading-16, .card-heading{
  letter-spacing:.5px;
}
/* small gold eyebrow accent under section headings via a thin rule */
.my-mission-section .heading-3::after,
.services-section-product .heading-4::after{
  content:""; display:block; width:54px; height:2px;
  background:var(--gold); margin:18px auto 0; opacity:.9;
}

/* -- 3. Modern flat buttons (replace glossy gold gradients) -- */
.button, .button-primary-3, .submit-button, .checkout-button{
  background:var(--gold) !important;
  background-image:none !important;
  color:#000 !important;
  border:1px solid var(--gold) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase;
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease !important;
}
.button:hover, .button-primary-3:hover, .submit-button:hover, .checkout-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(212,175,55,.3) !important;
  background:var(--gold-2) !important;
}

/* -- 4. Flatten the glossy "pill" tabs (Beschrijving/Gebruik/Samenstelling) -- */
.w-tab-link{
  background:transparent !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  transition:all .25s ease !important;
}
.w-tab-link:hover{ border-color:var(--gold) !important; }
.w-tab-link.w--current{ background:var(--gold) !important; border-color:var(--gold) !important; }
.w-tab-link.w--current .tab-text{ color:#000 !important; }
.tab-text{ color:var(--gold) !important; letter-spacing:1.5px !important; font-weight:800 !important; }

/* -- 5. Cards: subtle modern framing -- */
.card, .service-card-wrap, .gorillo-table-container{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.015);
}

/* -- 6. Tighter, consistent section rhythm (trim dead space) -- */
.my-mission-section, .services-section-product, .join-me-section-product{
  padding-top:96px !important; padding-bottom:96px !important;
}
@media(max-width:767px){
  .my-mission-section, .services-section-product, .join-me-section-product{
    padding-top:60px !important; padding-bottom:60px !important;
  }
  .tab-para, .paragraph-2, .paragraph-3{ text-align:left !important; }
}

/* -- 7. Links & subtle polish -- */
a{ transition:color .2s ease; }

/* ===================================================================
   Iteration 2 — layout density, rhythm & structure
   =================================================================== */
/* Tighter, consistent vertical rhythm on the content sections */
.my-mission-section, .services-section-product,
.join-me-section-product, .cart-details-section-product,
.footer-subscribe-product{
  padding-top:84px !important; padding-bottom:84px !important;
}
/* Structured, centered content containers (not edge-to-edge sprawl) */
.container-2, .w-container, .my-mission-wrapper,
.cart-details-wrapper, .join-us-wrapper{
  max-width:1120px !important; margin-left:auto !important; margin-right:auto !important;
}
/* Section headings: clear label-style hierarchy + spacing */
.heading-3, .heading-4, .heading-16{
  margin-bottom:26px !important; line-height:1.1;
}
/* Trim oversized gaps inside stacked blocks */
.my-mission-wrapper > *{ margin-top:0; }
/* Reduce dead space around large product/hero imagery */
.cart-details-section-product img{ max-height:560px; width:auto; }
/* Refine dividers/borders to hairline gold */
hr, .divider{ border-color:rgba(212,175,55,.2) !important; }

/* Mobile polish */
@media(max-width:767px){
  .my-mission-section, .services-section-product, .join-me-section-product,
  .cart-details-section-product, .footer-subscribe-product{
    padding-top:56px !important; padding-bottom:56px !important;
  }
  .heading, .heading-3, .heading-4{ line-height:1.05; }
  .tab-para, .card-para, .paragraph-2, .paragraph-3, .service-p{ font-size:15px !important; }
}

/* ===================================================================
   Iteration 3 — service-card alignment + contact section upgrade
   =================================================================== */
/* Service cards: equal-height, aligned 3-up grid (fix the sticking-out one) */
.service-card-wrap{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:26px !important;
  align-items:stretch !important;
  max-width:1120px; margin-left:auto; margin-right:auto;
}
.service-card-wrap .card-link-block-product{ height:100% !important; }
.service-card-wrap .service-card{ height:100% !important; display:flex !important; flex-direction:column !important; }
.service-card-wrap .card-des{ flex:1 1 auto !important; }
@media(max-width:900px){ .service-card-wrap{ grid-template-columns:1fr !important; max-width:460px; } }

/* Contact: remove the empty left column, center the content */
.join-us-wrapper{ display:block !important; max-width:700px !important; margin-left:auto !important; margin-right:auto !important; }
.join-me-left{ display:none !important; }
.join-me-right{ width:100% !important; max-width:none !important; }
.join-me-header{ text-align:left; }

/* Contact form: modern dark fields with gold focus */
.text-field.w-input, .textarea.w-input{
  background:#000 !important; border:1px solid #222 !important; border-radius:6px !important;
  color:#fff !important; padding:15px 16px !important; font-size:15px !important;
  transition:border-color .25s ease !important; box-shadow:none !important;
}
.text-field.w-input:focus, .textarea.w-input:focus{ border-color:var(--gold) !important; }
.text-field.w-input::placeholder, .textarea.w-input::placeholder{ color:rgba(255,255,255,.3) !important; }
.field-label{
  color:var(--gold) !important; font-size:11px !important; text-transform:uppercase !important;
  letter-spacing:1.5px !important; font-weight:700 !important; margin-bottom:8px !important;
}

/* Service cards: flow the gold text box into normal layout so all 3 are equal height */
.service-card-wrap .service-card{ height:auto !important; }
.service-card-wrap .card-image{ height:auto !important; }
.service-card-wrap .card-des{
  position:relative !important; top:auto !important; bottom:auto !important;
  left:auto !important; right:auto !important; height:auto !important;
  width:100% !important; box-sizing:border-box; margin-top:-40px;
}
.service-card-wrap .card-overlay{ display:none !important; }
.service-card-wrap .card-heading{ min-height:auto !important; }

/* ===================================================================
   Iteration 4 — kill leftover underline on coaching service blocks
   (an older cached build underlined the headings + body copy; the
   real inline "contact" link keeps its own underline)
   =================================================================== */
.training-section .heading-6,
.training-section .service-des,
.training-section .text-block-28,
.services-header .heading-6,
.service-card-wrap .card-heading,
.service-card-wrap .card-para,
.service-card-wrap .service-p{
  text-decoration:none !important;
}