/* =====================================================
   ORANGE TREE – HOMEPAGE MODULES
   Scoped with .ot-* to avoid conflicts
   ===================================================== */


/* =====================================================
   HERO
   ===================================================== */
.ot-hero {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/images/Home/Home-Hero1.jpg") center / cover no-repeat;
  margin: 30px 0;
  padding: 80px 0;
  overflow: visible;
}

.ot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

.ot-bubbles-top,
.ot-bubbles-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1920px;
  height: 160px;
  background: url("/images/Home/circles.png") center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
}

.ot-bubbles-top { top: -80px; }

.ot-bubbles-bottom {
  bottom: -80px;
  transform: translateX(-50%) rotate(180deg);
}

.ot-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0px 18px;
  max-width: 980px;
}

.ot-content h1,
.ot-content p {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.ot-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 18px;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ot-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ot-btn--pink { background: #e61f78; }
.ot-btn--orange { background: #f08a00; }

@media (max-width: 600px) {
  .ot-hero { padding: 60px 0; }

  .ot-bubbles-top,
  .ot-bubbles-bottom { height: 120px; }

  .ot-bubbles-top { top: -60px; }
  .ot-bubbles-bottom { bottom: -60px; }

  .ot-buttons {
    flex-direction: column;
    align-items: center;
  }

  .ot-buttons .ot-btn {
    width: 100%;
    max-width: 320px;
  }
}


/* =====================================================
   VALUES CARDS
   ===================================================== */
.ot-values { padding: 40px 0; }

.ot-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  align-items: stretch;
}

.ot-value-card {
  background: #fff;
  border-radius: 48px;
  padding: 32px 26px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 10px 30px rgba(240,138,0,0.18);
}

.ot-value-icon-wrap {
  height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 18px;
}

.ot-value-icon {
  width: 110px;
  height: auto;
  display: block;
}

.ot-value-title {
  margin: 0 0 16px;
  min-height: 48px;
  font-weight: 900;
  text-transform: lowercase;
  color: #592d06;
}

.ot-value-text {
  font-weight: 400;
  color: #592d06;
  margin: 0;
}

@media (max-width: 980px) {
  .ot-values-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}


/* =====================================================
   HOME: ABOUT BLOCK
   Supports BOTH versions of markup
   ===================================================== */
.ot-about{
  padding: 30px 18px;
  margin: 30px 0;
}

.ot-about-inner,
.ot-about-panel{
  max-width: 1150px;
  margin: 0 auto;
  background: #fcecdf;
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
}

.ot-about-inner h2,
.ot-about-panel h2{
  color: #592d06;
  font-weight: 900;
  /*margin: 0 0 6px; 
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.1;*/
}

.ot-about-sub{
  margin: 0 0 16px;
  color: #592d06;
  /*font-size: clamp(16px, 1.6vw, 20px);*/
  font-weight: 700;
}

.ot-about-text{
  margin: 0 auto 18px;
  max-width: 920px;
  color: #592d06;
  /*font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.45;*/
}

.ot-about-btn,
.ot-about-cta{
  display: inline-block;
  background: #db2164;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 12px;
}

.faqs-page .ot-faqs-cta {
  display: none;
}


.ot-about-cta:hover { background-color : #592d06;}
.ot-jacqui-btn:hover  { background-color : #592d06;}

.ot-about-btn:hover,
.ot-about-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

@media (max-width: 600px){
  .ot-about-inner,
  .ot-about-panel{
    padding: 22px 16px;
  }

  .ot-value-icon-wrap {
    height: 90px;
  }
}

.howtojoin { margin : 0px;}

/* =====================================================
   WHY FAMILIES CHOOSE
   ===================================================== */
.ot-why,
.ot-why * { box-sizing: border-box; }

.ot-why {
  background: #fdebd6;
  padding: 40px 18px;
  overflow-x: hidden;
}

.ot-why h2 {
  color: #592d06;
  font-weight: 900;
}

.ot-why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: center;
}

.ot-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ot-why-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 18px;
  line-height: 1.45;
}

.ot-why-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #f08a00;
  font-weight: 900;
}

.ot-why-image {
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: 24px;
  margin-left: auto;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  display: block;
}

@media (max-width: 900px) {
  .ot-why-inner { grid-template-columns: 1fr; gap: 22px; }
  .ot-why-image { margin: 0 auto; max-width: 520px; }
}

@media (max-width: 600px) {
  .ot-why { padding-left: 16px; padding-right: 16px; }
  .ot-why-list li { padding-left: 30px; margin-bottom: 14px; font-size : 21px; }
}


/* =====================================================
   MEET JACQUI
   ===================================================== */
.ot-jacqui,
.ot-jacqui * { box-sizing: border-box; }

.ot-jacqui {
  background: #f58220;
  padding: 50px 18px 60px;
  overflow-x: hidden;
}

.ot-jacqui h2 {
  color: #592d06;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 18px;
}

.ot-jacqui-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 46px;
  align-items: center;
}

.ot-jacqui-photo {
  width: 320px;
  heightchauo-?; /* no */
  height: 320px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  margin-bottom: 18px;
}

.ot-jacqui-panel {
  background: #fff;
  border-radius: 26px;
  padding: 26px 24px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.ot-jacqui-cta { text-align: center; margin-top: 36px; }

.ot-jacqui-btn {
  padding: 12px 22px;
  border-radius: 14px;
  background: #e61f78;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .ot-jacqui-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
  }

  .ot-jacqui-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ot-jacqui-photo {
    width: min(260px, 80vw);
    height: min(260px, 80vw);
    margin: 0 auto 14px;
  }

  .ot-jacqui-panel {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
  }

  .ot-jacqui-cta { padding: 0 16px; }
}

@media (max-width: 600px) {
  .ot-jacqui { padding-left: 16px; padding-right: 16px; }
  .ot-jacqui-panel { padding: 18px 16px; }
}


/* =====================================================
   HOW TO JOIN (FULL WIDTH DESKTOP, SAFE MOBILE)
   ===================================================== */

/* remove template container width for this module position only */
.bottom1.box.howtojoin > .box-wrap > .container,
.bottom1.box.howtojoin > .box-wrap > .container > .content {
  max-width: none !important;
  padding: 0 !important;
}

/* Desktop/tablet full-bleed */
.ot-join {
  background: #fff6e8;
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
  position: relative;
  padding: 50px 0;
  overflow-x: clip; /* prevent tiny horizontal scrollbars */
}

.ot-join-inner {
  /* max-width: 1200px; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 60px;
  box-sizing: border-box;
}

.ot-join-image {
  margin-left: -60px;
}

.ot-join-image img {
  width: 100%;
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  display: block;
}

.ot-join-content h2 { 
   text-align: center; 
   color : #592d06;
  font-weight : 900;
}

.ot-join-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  margin-bottom: 26px;
}

.ot-join-number {
  font-size: 64px;
  font-weight: 900;
  color: #f08a00;
  line-height: 1;
}

.ot-join-cta {
  margin-top: 30px;
  text-align: center;
}

.ot-join-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  background: #f08a00;
  color: #fff !important;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ot-join-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ot-join-link {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #592d06;
  text-decoration: underline;
}

/* Mobile fixes:
   - Stop the full-bleed 100vw/left trick on small screens
   - Apply your working Joomla wrapper fix
   - Lock inner width to 390px (but never exceed viewport) */
@media (max-width: 900px) {

  /* YOUR WORKING FIX (keep, but add !important so template can't override it) */
  #mod-custom202 {
    width: 30% !important;
  }

  .ot-join {
    /* width: 100% !important; */
    left: 0 !important;
    margin-left: 0 !important;
    padding: 40px 0 !important;
    overflow-x: hidden !important;
  }

  .ot-join-inner {
    width: 390px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    box-sizing: border-box !important;
  }

  .ot-join-image {
    margin-left: 0 !important;
  }

  .ot-join-image img {
    width: 100% !important;
    height: auto !important;
  }

  .ot-join-step {
    grid-template-columns: 44px 1fr !important;
    gap: 14px !important;
  }

  .ot-join-number {
    font-size: 44px !important;
  }

  .ot-join-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .ot-join-cta a {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }
}


/* =====================================================
   FAQs (2x2 ACCORDION)
   ===================================================== */
.ot-faqs{
  padding: 70px 18px;
  background: #fff;
}

.ot-faqs-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.ot-faqs-inner h2{
  margin: 0 0 34px;
  text-align: center;
  color: #592d06 !important;
  font-size: xx-large;
  font-weight: 900;
}

.ot-faqs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 90px;
  row-gap: 34px;
  align-items: start;
}

.ot-faq{
  border-bottom: 2px solid rgba(89,45,6,0.55);
  padding-bottom: 16px;
  background: transparent !important;
}

.ot-faq-btn{
  width: 100%;
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  color: #592d06;
  font: inherit;
  outline: none;
  box-shadow: none !important;
}

.ot-faq-btn:focus,
.ot-faq-btn:active{
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ot-faq-question{
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 800;
  color: #592d06;
}

.ot-faq-plus{
  font-size: 28px;
  font-weight: 900;
  color: #592d06;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.18s ease;
}

.ot-faq.is-open .ot-faq-plus{
  transform: rotate(45deg);
}

.ot-faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.24s ease;
}

.ot-faq-answer-inner{
  padding-top: 14px;
  color: #592d06;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.45;
}

.ot-faqs-cta{
  text-align: center;
  margin-top: 34px;
}

.ot-faqs-btn{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  background: #f08a00;
  color: #fff !important;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ot-faqs-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

@media (max-width: 900px){
  .ot-faqs-grid{ grid-template-columns: 1fr; column-gap: 0; }
}


/* =====================================================
   HOME: Fix large beige gap between Testimonials + FAQs (mobile only)
   (safe clamp — won’t affect desktop)
   ===================================================== */
@media (max-width: 600px) {

    .ot-join-inner { padding : 0px !important; width : 100% !important }

  
  .ot-testimonials,
  .custom-carousel-scope {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .heroimagemobile { margin-top : 50px; }  
  .custom-carousel-scope .testimonial-card-main,
  .ot-testimonials .testimonial-card-main {
    margin-bottom: 12px !important;
  }

  .ot-testimonials .ot-testimonials-below,
  .custom-carousel-scope + div {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }

  .ot-faqs {
    padding-top: 28px !important;
    margin-top: 0 !important;
  }
}


/* =====================================================
   How to Join — mobile portrait vs landscape (final)
   ===================================================== */

/* Mobile portrait (default): readable fixed width */
@media (max-width: 900px) {
  .ot-join-inner {
    width: 390px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Mobile landscape: fill more of the screen */
@media (max-width: 900px) and (orientation: landscape) {
  .ot-join-inner {
    width: 100% !important;     /* ✅ your working value */
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  #mod-custom202 { width : 100% !important}
}

/* =====================================================
   MOBILE: How to Join – centre text + stack numbers
   ===================================================== */
@media (max-width: 900px) {

  /* Centre everything */
  .ot-join-content {
    text-align: center;
  }

  /* Stack number above text */
  .ot-join-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 32px;
  }

  /* Big number centred */
  .ot-join-number {
    font-size: 64px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Headings & text centred */
  .ot-join-step h3,
  .ot-join-step p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Prevent any leftover grid behaviour */
  .ot-join-step > div {
    width: 100%;
  }
}


/* =====================================================
   MOBILE HOTFIX: stop How To Join causing horizontal scroll
   Put this at the END of homepage.css
   ===================================================== */
@media (max-width: 900px) {

  /* stop the page itself from scrolling sideways */
  html, body {
    overflow-x: hidden !important;
  }

  /* the full-bleed trick (100vw + left:50% + negative margin) is the usual cause */
  .ot-join {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  /* ensure nothing inside can force extra width */
  .ot-join,
  .ot-join * {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* remove desktop negative offset on the image column */
  .ot-join-image {
    margin-left: 0 !important;
  }

  .ot-join-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* =====================================================
   FIX BURTON SLIDER - Match Derby and Burnaston
   ===================================================== */
#djslider191 .dj-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#slider191 li {
  height: 306px !important;
}

/* =====================================================
   MEET JACQUI - DESKTOP
   ===================================================== */
.ot-jacqui-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 46px;
  align-items: center;
}

/* Left column on desktop */
.ot-jacqui-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Right column (h2) on desktop - top right */
.ot-jacqui-right {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

/* Content (panel) on desktop - bottom right, spans full right column */
.ot-jacqui-content {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-top :120px;
}

/* Keep existing mobile styles but simplify */
@media (max-width: 900px) {
  .ot-jacqui-inner {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: center;
  }
  
  /* Stack in order: h2, photo, panel */
  .ot-jacqui-right {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  .ot-jacqui-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  .ot-jacqui-content {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top : 0px;
  }

  .ot-jacqui-panel {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
  }
}

html, body {
  overflow-x: hidden;
}


/* =====================================================
   MEET JACQUI – decorative bubbles image (device positioned)
   ===================================================== */

.ot-jacqui-left { 
  position: relative; 
}

/* Decorative bubbles behind the photo */
.ot-jacqui-bubbles{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;

  /* DESKTOP default */
  width: 130px;
  top: -10px;
  left: 25%;
  transform: translateX(-72%);
}

.ot-jacqui-bubbles2 {float: right;
    top: -10px;
    position: relative;
    left: 10px;
}

/* Ensure photo + quote are above */
.ot-jacqui-photo,
.ot-jacqui-quote{
  position: relative;
  z-index: 1;
}

/* TABLET */
@media (max-width: 900px) {
  .ot-jacqui-bubbles {
    width: 110px;
    top: -8px;
    left: 30%;
    transform: translateX(-68%);
  }

  .ot-jacqui-bubbles2 {float: right;
    top: -10px;
    position: relative;
    left: 10px;
}
}


/* MOBILE */
@media (max-width: 600px) {
  .ot-jacqui-bubbles {
    width: 95px;
    top: -25px;
    left: 18%;
    transform: translateX(-60%);
  }
  .ot-jacqui-bubbles2 {
    float: right;
    width : 40%;
    top: 0px;
    position: relative;
    left: 10px;
  }
}

/* iPHONE LANDSCAPE ONLY */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .ot-jacqui-bubbles {
    width: 110px;        /* adjust size here */
    top: -15px;         /* adjust vertical position */
    left: 35%;          /* adjust horizontal anchor */
    transform: translateX(-68%);
  }
  .ot-jacqui-bubbles2 {float: right;
    width : 27%;
    top: -10px;
    position: relative;
    left: 10px;
  }
}