/* =========================================================
   RGS HEADER H4 — CLEAN ONE-PASTE (NO TRUST BAR)
   Drop-in replacement for all header-related CSS
   ========================================================= */

/* ---------- Global safety (stops the mobile left shift) ---------- */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

*{ box-sizing: border-box; }

/* IMPORTANT:
   Prevent "global svg/img rules" from nuking the header.
   (We keep general responsiveness, but tightly control header SVGs below.)
*/
img{ max-width: 100%; height: auto; }

/* ---------- Header variables ---------- */
:root{
  --h4-max: 1240px;
  --h4-green: #1F3A2D;
  --h4-green-dark: #14261E;
  --h4-tan: #F5F3EE;
  --h4-text: #1A1A1A;
  --h4-border: rgba(0,0,0,0.10);
  --h4-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* ---------- Header wrapper ---------- */
header.rgsH4{
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* keeps any accidental overflow from bleeding */
}

/* Container */
.rgsH4-inner{
  width: 100%;
  max-width: var(--h4-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* =======================
   TOP BAR
   ======================= */
.rgsH4-top{
  background: var(--h4-green-dark);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.rgsH4-top-inner{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.rgsH4-contact{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}
.rgsH4-contact a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rgsH4-contact a:hover{
  color: #fff;
  text-decoration: underline;
}
.rgsH4-sep{ color: rgba(255,255,255,0.35); }

/* Social pills */
.rgsH4-social{
  display: flex;
  align-items: center;
  gap: 10px;
}
.rgsH4-social a{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: lowercase;
}
.rgsH4-social a:hover{
  background: rgba(255,255,255,0.20);
}

/* =======================
   SPONSOR STRIP (STATIC, MOBILE SAFE)
   ======================= */
.rgsH4-sponsors{
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.rgsH4-sponsors-inner{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;             /* key: prevents horizontal overflow */
}

/* Lock sponsor images so they never go huge */
.rgsH4-sponsors-inner img{
  display: block;
  height: 44px;                /* key: fixes “AEIOK huge” */
  width: auto;
  max-width: 190px;
  object-fit: contain;
  background: rgba(255,255,255,0.10);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* =======================
   MAIN NAV ROW
   ======================= */
.rgsH4-main{
  background: var(--h4-green);
}
.rgsH4-main-inner{
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Desktop navs */
.rgsH4-nav{
  display: flex;
  align-items: center;
  gap: 12px;
}
.rgsH4-nav a{
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform .15s ease, background .15s ease;
}
.rgsH4-nav a:hover{
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

/* Center logo */
.rgsH4-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.rgsH4-logo img{
  display: block;
  height: 64px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

/* Book button */
.rgsH4-book{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #F5D46A;
  color: #1A1A1A;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.rgsH4-book:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* =======================
   MOBILE BURGER + DRAWER
   ======================= */
.rgsH4-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Burger button */
.rgsH4-burger{
  display: none; /* shown on mobile */
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.rgsH4-burger span{
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 10px;
}

/* Backdrop + drawer default (hidden) */
.rgsH4-backdrop{
  display: none;
}
.rgsH4-drawer{
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  max-width: 86vw;
  height: 100vh;
  background: #fff;
  box-shadow: -18px 0 40px rgba(0,0,0,0.22);
  z-index: 9999;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: right .22s ease;
}

/* Drawer header */
.rgsH4-drawerhead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 6px;
}
.rgsH4-close{
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.06);
}

/* Drawer links */
.rgsH4-drawer a{
  text-decoration: none;
  color: #1A1A1A;
  font-weight: 900;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(31,58,45,0.06);
  border: 1px solid rgba(31,58,45,0.12);
}
.rgsH4-drawer a:hover{
  background: rgba(31,58,45,0.10);
}

/* Drawer book */
.rgsH4-drawerbook{
  margin-top: 10px;
  background: #F5D46A !important;
  border: 1px solid rgba(0,0,0,0.16) !important;
}

/* Toggle open states */
.rgsH4-toggle:checked ~ .rgsH4-backdrop{
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 9998;
}
.rgsH4-toggle:checked ~ .rgsH4-drawer{
  right: 0;
}

/* =======================
   MOBILE LAYOUT RULES
   ======================= */
@media (max-width: 860px){

  /* Hide desktop navs + desktop book in row (we use drawer) */
  .rgsH4-nav,
  .rgsH4-book{
    display: none !important;
  }

  /* Show burger */
  .rgsH4-burger{
    display: inline-flex;
  }

  /* Slightly smaller logo */
  .rgsH4-logo img{
    height: 54px;
    max-width: 210px;
  }

  /* Make top bar stack cleaner */
  .rgsH4-top-inner{
    justify-content: center;
    text-align: center;
  }
  .rgsH4-contact{
    justify-content: center;
  }
}

/* =======================
   HEADER-SCOPED SVG SAFETY
   (stops the “giant fish icon” inside the HEADER)
   ======================= */
header.rgsH4 svg{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}
/* =========================================================
   TRUST STRIP (rgs-trust-strip) — SAFE + PRO
   Fixes giant SVG icon issue by clamping sizes inside strip only
   ========================================================= */

.rgs-trust-strip{
  padding: 18px 0;
  background: transparent;
}

.rgs-trust-strip .rgs2-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* layout */
.rgs-trust-strip .rgs-trust-items{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* pill */
.rgs-trust-strip .rgs-trust-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 999px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);

  color: #1A1A1A;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
}

/* icon bubble */
.rgs-trust-strip .rgs-trust-ic{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,58,45,0.10);
  flex: 0 0 34px;
}

/* 🔥 HARD CLAMP SVG SIZE (prevents the giant black icon bug) */
.rgs-trust-strip .rgs-trust-ic svg{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  fill: currentColor;
  color: #1F3A2D;
}

/* if any global CSS tries to force svg width:100%, this overrides it */
.rgs-trust-strip svg{
  width: auto;
  height: auto;
}

/* mobile tuning */
@media (max-width: 900px){
  .rgs-trust-strip{
    padding: 14px 0;
  }
  .rgs-trust-strip .rgs2-wrap{
    padding: 0 14px;
  }
  .rgs-trust-strip .rgs-trust-items{
    gap: 10px;
  }
  .rgs-trust-strip .rgs-trust-item{
    padding: 10px 14px;
    font-size: 14px;
  }
  .rgs-trust-strip .rgs-trust-ic{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .rgs-trust-strip .rgs-trust-ic svg{
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
/* =========================================================
   HOME: HERO 2 + TESTIMONIALS (HERO 3)
   Restores layout + typography + cards + slider styling
   ========================================================= */

/* Shared container used across your home HTML */
.rgs2-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* -----------------------------
   HERO 2 (rgs-hero2)
   ----------------------------- */
.rgs-hero2{
  position: relative;
  padding: 64px 0;
  color: #111;
  background: #F5F3EE; /* clean tan */
  overflow: hidden;
}

.rgs-hero2-overlay{
  position: absolute;
  inset: 0;
  /* subtle depth without needing an image */
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(31,58,45,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(0,0,0,0.06), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

.rgs-hero2-inner{
  position: relative;
  z-index: 1;
}

.rgs-hero2-head{
  max-width: 900px;
  margin: 0 auto 26px;
  text-align: center;
}

.rgs-hero2-head h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: -0.6px;
  color: #111;
}

.rgs-hero2-head p{
  margin: 0 auto;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
  color: rgba(0,0,0,0.72);
}

.rgs-hero2-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* card */
.rgs-hero2-box{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.rgs-hero2-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.10);
}

.rgs-hero2-box h4{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 1000;
  color: #1F3A2D;
}

.rgs-hero2-box p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(0,0,0,0.72);
}

/* Responsive */
@media (max-width: 980px){
  .rgs-hero2{ padding: 52px 0; }
  .rgs-hero2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .rgs-hero2{ padding: 44px 0; }
  .rgs-hero2-grid{ grid-template-columns: 1fr; }
  .rgs-hero2-head{ text-align: left; }
}


/* -----------------------------
   TESTIMONIALS (rgs-t3)  — “Hero 3”
   ----------------------------- */
.rgs-t3{
  padding: 64px 0;
  background: #fff;
  overflow: hidden;
}

.rgs-t3-head{
  text-align: center;
  margin: 0 auto 18px;
  max-width: 900px;
}

.rgs-t3-head h2{
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: -0.5px;
  color: #111;
}

.rgs-t3-head p{
  margin: 0;
  color: rgba(0,0,0,0.66);
  font-size: 16px;
  line-height: 1.45;
}

/* slider frame */
.rgs-t3-slider{
  position: relative;
  margin-top: 18px;
}

/* viewport/track = horizontal scroll (works even if JS is off) */
.rgs-t3-viewport{
  overflow: hidden;
  border-radius: 18px;
}

.rgs-t3-track{
  display: flex;
  gap: 14px;
  padding: 8px 2px 16px;
  will-change: transform;
}

/* card */
.rgs-t3-card{
  flex: 0 0 calc((100% - 28px) / 3);
  background: #F5F3EE;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.06);
}

.rgs-t3-stars{
  font-weight: 1000;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.rgs-t3-verified{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,0.55);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.rgs-t3-card p{
  margin: 0 0 10px;
  color: rgba(0,0,0,0.72);
  line-height: 1.55;
  font-size: 14.5px;
}

.rgs-t3-card span{
  display: block;
  font-weight: 900;
  color: #1F3A2D;
}

/* Prev/Next buttons */
.rgs-t3-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 22px rgba(0,0,0,0.10);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
  color: #111;
  z-index: 2;
}

.rgs-t3-prev{ left: -8px; }
.rgs-t3-next{ right: -8px; }

@media (max-width: 980px){
  .rgs-t3{ padding: 54px 0; }
  .rgs-t3-card{ flex: 0 0 calc((100% - 14px) / 2); }
  .rgs-t3-prev{ left: 0; }
  .rgs-t3-next{ right: 0; }
}

@media (max-width: 620px){
  .rgs-t3{ padding: 44px 0; }
  .rgs-t3-head{ text-align: left; }
  .rgs-t3-card{ flex: 0 0 100%; }
  .rgs-t3-btn{ display: none; } /* mobile: swipe/scroll instead */
  .rgs-t3-viewport{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rgs-t3-track{ padding-bottom: 10px; }
}

/* dots (if your JS renders them) */
.rgs-t3-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.rgs-t3-dots button,
.rgs-t3-dots span{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  display: inline-block;
}
.rgs-t3-dots .is-active{
  background: #1F3A2D;
}

/* "Read more reviews" row */
.rgs-t3-more{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.rgs-t3-more a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #1F3A2D;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 14px 26px rgba(0,0,0,0.14);
}
.rgs-t3-more a:hover{ filter: brightness(1.03); }

.rgs-t3-fb{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* clamp FB svg so it never blows up */
.rgs-t3-fb svg{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  fill: currentColor;
/* 
/* Chrome/Edge modern: hide any element that contains that exact CTA text */
body *:has(> a):has(a[href*="/become-a-sponsor"]){
  display:none !important;
}
/* 
/* Anchor the bubble to the actual hero video section inside your Code block */
.rgs-hero-anchor,
.rgs-hero-anchor .rgs-hero1-video{
  position: relative;
}