.igrow-slider{ position:relative !important; background:transparent !important; color:#dbe8ee; padding:40px 20px 56px; overflow:hidden; }
.igrow-slide-view{ display:none; opacity:0; transition:opacity 400ms ease; }
.igrow-slide-view.active{ display:block; opacity:1; }
.igrow-wrap{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:360px 1fr; gap:28px; align-items:center; }
.igrow-photo{ width:100%; border-radius:14px; overflow:hidden; height: clamp(260px, 38vw, 420px) !important; }
.igrow-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.igrow-panel{ border-radius:16px; padding:24px; }
.igrow-name{ font-size:22px; font-weight:700; }
.igrow-title{ font-size:12px; opacity:.85; text-transform:uppercase; margin-bottom:4px; }
.igrow-stars{ margin:6px 0 12px; }
.igrow-stars .star{ font-size:18px; opacity:.45; margin-right:4px; }
.igrow-stars .star.filled{ opacity:1; }
.igrow-quote{ line-height:1.7; }
.igrow-nav{ position:absolute; top:20px; right:72px; background:rgba(0,0,0,0.15) !important; border:1px solid rgba(255,255,255,.25) !important; width:40px !important; height:40px !important; border-radius:50% !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:18px; cursor:pointer; box-shadow:none !important; line-height:1 !important; }
.igrow-nav.prev{ right:116px !important; }
.igrow-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; gap:8px; justify-content:center; }
.igrow-dots .dot{ width:12px !important; height:12px !important; border-radius:50% !important; border:none !important; padding:0 !important; background:#95a9b3; opacity:.5; cursor:pointer; display:inline-block; }
.igrow-dots .dot.active{ opacity:1; }
/* Enhanced mobile layout */
@media (max-width: 768px){
  .igrow-slider{ padding:22px 10px 50px !important; }
  .igrow-wrap{ grid-template-columns:1fr !important; gap:0 !important; position:relative !important; }
  .igrow-photo{ height: clamp(240px, 70vw, 380px) !important; margin:0 14px !important; }
  .igrow-panel{ width:auto !important; max-width:none !important; margin:-56px 14px 0 14px !important; padding:16px 16px 18px !important; border-radius:16px !important; background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; color:#eef6f9 !important; height:auto !important; min-height:220px !important; }
  .igrow-name{ font-size:18px !important; } .igrow-title{ font-size:10.5px !important; } .igrow-quote{ font-size:14.5px !important; line-height:1.6 !important; }
  .igrow-nav{ top:8px !important; bottom:auto !important; } .igrow-nav.prev{ right:66px !important; left:auto !important; } .igrow-nav.next{ right:22px !important; }
  .igrow-dots{ bottom:8px !important; }
}

/* === Mobile side-by-side row: image 40%, text panel 360px === */
@media (max-width: 768px){
  .igrow-slider .igrow-wrap{
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
    /* Allow horizontal scroll if viewport is narrower than (40% + 360px) */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Image column */
  .igrow-slider .igrow-photo{
    flex: 0 0 40% !important;
    width: 40% !important;
    min-width: 140px !important;
    /* Approximate 70% height of the viewport for a bold visual */
    height: 70vh !important;
    max-height: 520px !important;
    min-height: 260px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .igrow-slider .igrow-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Text panel fixed width */
  .igrow-slider .igrow-panel{
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
    padding: 16px 16px 18px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    color: #eef6f9 !important;
  }

  /* Keep arrows accessible */
  .igrow-slider .igrow-nav{
    position: absolute !important;
    top: 8px !important;
    bottom: auto !important;
  }
  .igrow-slider .igrow-nav.prev{ right: 66px !important; left: auto !important; }
  .igrow-slider .igrow-nav.next{ right: 22px !important; }
}

/* === Mobile refinements: image ratio + vertical centering === */
@media (max-width: 768px){
  /* Center both columns vertically within the slider row */
  .igrow-slider .igrow-wrap{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   /* vertical centering of image + panel */
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Image keeps aspect ratio; no forced vh height */
  .igrow-slider .igrow-photo{
    flex: 0 0 40% !important;
    width: 40% !important;
    min-width: 140px !important;
    aspect-ratio: 3 / 4 !important;   /* portrait ratio to match desktop look */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .igrow-slider .igrow-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Text panel: fixed 360px width and vertically centered content */
  .igrow-slider .igrow-panel{
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* vertical center the text inside */
    align-items: flex-start !important;   /* keep left aligned text */
    height: auto !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    padding: 16px 16px 18px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    color: #eef6f9 !important;
  }

  /* Optional: tighten typographic spacing on smaller screens */
  .igrow-slider .igrow-name{ margin-bottom: 4px !important; }
  .igrow-slider .igrow-title{ margin-bottom: 6px !important; }
  .igrow-slider .igrow-quote{ margin-top: 6px !important; }
}

/* === Mobile look & feel fixes === */
@media (max-width: 768px){
  .igrow-slider .igrow-wrap{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;     /* vertical center both columns */
    gap: 12px !important;
    position: relative !important;
    overflow-x: auto !important;        /* keep exact widths without squish */
    -webkit-overflow-scrolling: touch !important;
  }

  /* Image column remains with rounded edges */
  .igrow-slider .igrow-photo{
    flex: 0 0 40% !important;
    width: 40% !important;
    min-width: 140px !important;
    aspect-ratio: 3 / 4 !important;     /* consistent portrait look */
    height: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .igrow-slider .igrow-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Text panel: rounded, auto-height, overlap slightly into the image */
  .igrow-slider .igrow-panel{
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    height: auto !important;            /* allow all text to fit */
    margin: 0 0 0 -22px !important;     /* overlap to the left over the image */
    border-radius: 16px !important;     /* make sure corners are visible */
    padding: 18px 18px 20px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    color: #eef6f9 !important;
    position: relative !important;
    z-index: 2 !important;              /* sit above the image */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* center inner text vertically */
    align-items: flex-start !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; /* subtle lift so corners read clearly */
  }

  /* Make sure long words don't overflow and text wraps neatly */
  .igrow-slider .igrow-name,
  .igrow-slider .igrow-title,
  .igrow-slider .igrow-quote{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .igrow-slider .igrow-quote{ line-height: 1.6 !important; }

  /* Keep controls accessible */
  .igrow-slider .igrow-nav{ top: 8px !important; bottom: auto !important; z-index: 3 !important; }
  .igrow-slider .igrow-nav.prev{ right: 66px !important; left: auto !important; }
  .igrow-slider .igrow-nav.next{ right: 22px !important; }
}

/* === Mobile one-row FIX (clamped panel width, no overflow, proper centering) === */
@media (max-width: 768px){
  .igrow-slider .igrow-wrap{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: visible !important;        /* avoid forcing horizontal scroll */
    max-width: 100% !important;
  }

  /* Image: fixed to 40% of available width, maintains portrait ratio */
  .igrow-slider .igrow-photo{
    flex: 0 0 40% !important;
    width: 40% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    margin: 0 0 0 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .igrow-slider .igrow-photo img{
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }

  /* Panel: clamp width so it never exceeds viewport; overlap slightly left */
  .igrow-slider .igrow-panel{
    flex: 1 1 auto !important;
    width: clamp(220px, 60vw, 360px) !important;
    max-width: clamp(220px, 60vw, 360px) !important;
    margin: 0 12px 0 -18px !important;    /* slight overlap over image */
    padding: 16px !important;
    height: auto !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* vertically center inner text */
    align-items: flex-start !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    color: #eef6f9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }

  /* Avoid text overflow */
  .igrow-slider .igrow-name,
  .igrow-slider .igrow-title,
  .igrow-slider .igrow-quote{ 
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Controls */
  .igrow-slider .igrow-nav{
    position: absolute !important;
    top: 8px !important;
    bottom: auto !important;
    z-index: 4 !important;
  }
  .igrow-slider .igrow-nav.prev{ right: 66px !important; left: auto !important; }
  .igrow-slider .igrow-nav.next{ right: 22px !important; }
  .igrow-slider .igrow-dots{ bottom: 8px !important; }
}

/* === Mobile: prioritize text space (smaller image, wider panel) === */
@media (max-width: 768px){
  .igrow-slider .igrow-photo{
    flex: 0 0 30% !important;
    width: 30% !important;
    aspect-ratio: 3 / 4 !important;
  }
  .igrow-slider .igrow-panel{
    width: clamp(260px, 70vw, 440px) !important;
    max-width: clamp(260px, 70vw, 440px) !important;
    padding: 14px 14px 16px !important;
  }
  .igrow-slider .igrow-name{ font-size: 17px !important; }
  .igrow-slider .igrow-title{ font-size: 10px !important; }
  .igrow-slider .igrow-quote{ font-size: 15px !important; line-height: 1.55 !important; }
}

/* === Mobile: maximize text space in panel === */
@media (max-width: 768px){
  /* Remove left/right margins & tighten padding */
  .igrow-slider .igrow-panel{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* increase vertical room */
    min-height: clamp(320px, 65vh, 560px) !important;
    box-sizing: border-box !important;
  }

  /* Reduce internal spacing slightly */
  .igrow-slider .igrow-name{ margin-bottom: 2px !important; }
  .igrow-slider .igrow-title{ margin-bottom: 4px !important; }
  .igrow-slider .igrow-quote{ margin-top: 6px !important; }

  /* Ensure content wraps and never overflows horizontally */
  .igrow-slider .igrow-name,
  .igrow-slider .igrow-title,
  .igrow-slider .igrow-quote{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}

/* === Mobile: larger panel height so long text fits === */
@media (max-width: 768px){
  .igrow-slider .igrow-panel{
    min-height: clamp(420px, 85vh, 720px) !important;
    padding-bottom: 22px !important;
    box-sizing: border-box !important;
  }
}

/* === Mobile: allow full height and increase baseline === */
@media (max-width: 768px){
  .igrow-slider{
    height: auto !important;          /* let container expand with content */
    min-height: clamp(520px, 95vh, 1200px) !important;
    overflow: visible !important;
  }
  .igrow-slider .igrow-panel{
    height: auto !important;
    min-height: clamp(520px, 95vh, 1200px) !important;
  }
}

.igrow-slider{ will-change: height; }

/* === Mobile anti-jump: stack slides absolutely so only one affects layout === */
@media (max-width: 768px){
  .igrow-slider{ overflow: hidden !important; }
  .igrow-slider .igrow-slide-view{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;        /* allow crossfade without reflow */
    pointer-events: none !important;  /* only active slide receives events */
  }
  .igrow-slider .igrow-slide-view.active{
    pointer-events: auto !important;
  }
}

/* === Mobile crop fix: let content overflow container (no clipping) === */
@media (max-width: 768px){
  .igrow-slider{
    overflow: visible !important;   /* was hidden; allow tall text panels */
    padding-bottom: 48px !important; /* room for dots under absolute slides */
  }
}

/* === Mobile: widen panel and overlap image by 10px to the left === */
@media (max-width: 768px){
  .igrow-slider .igrow-panel{
    margin-left: -10px !important;    /* overlap into the photo */
    z-index: 2 !important;            /* ensure it sits above the image */
  }
}

/* === Mobile overlap: ensure the text panel overlaps the image by 10px === */
@media (max-width: 768px){
  .igrow-slider .igrow-wrap{
    gap: 0 !important;
    column-gap: 0 !important;
  }
  .igrow-slider .igrow-photo{
    margin-right: 0 !important;
  }
  .igrow-slider .igrow-panel{
    margin-left: -10px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  /* Optional: if parent padding interferes, reduce left padding on the slider */
  .igrow-slider{
    padding-left: 0 !important;
  }
}

/* === Override: increase mobile overlap to 20px === */
@media (max-width: 768px){
  .igrow-slider .igrow-panel{
    margin-left: -20px !important;
  }
}

/* === User override: mobile panel sizing and offsets === */
@media (max-width: 768px) {
  body .igrow-slider .igrow-panel {
    margin-left: -20px !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 220px !important;
    margin-top: -56px !important;
  }
}

/* === User override: adjust mobile image margins === */
@media (max-width: 768px) {
  .igrow-slider .igrow-photo {
    margin-top: -50px !important;
    margin-right: 0 !important;
  }
}