/* Start custom CSS */<!-- ══════════════════════════════════════════════════════
  ROCKSTARS OF REALTY — Cain & Company Real Estate LLC
  Paste this entire block into an Elementor "Custom HTML" widget
  or the WordPress Code Editor for the Rockstars of Realty page.
═══════════════════════════════════════════════════════ -->
<style>
:root{
  --black:#0c0c0e;
  --charcoal:#1a1a1d;
  --cream:#f7f3ec;
  --red:#b3372c;
  --gold:#c9a86a;
  --line:rgba(255,255,255,0.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;}

/* ── HEADER ── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
}
.header-inner img{height:42px;}
.header-nav{display:flex;align-items:center;gap:28px;}
.nav-a{
  color:rgba(255,255,255,.78);text-decoration:none;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  transition:color .2s;
}
.nav-a:hover{color:#fff;}
.nav-cta{
  background:var(--red);color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:11px 22px;border-radius:2px;transition:background .2s;
}
.nav-cta:hover{background:#962c23;}

/* ── HERO ── */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(179,55,44,0.30) 0%, rgba(12,12,14,0) 60%),
    linear-gradient(180deg, var(--black) 0%, #161618 100%);
  padding:96px 32px 80px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:'★ ★ ★ ★ ★';
  display:block;
  color:var(--gold);
  font-size:14px;
  letter-spacing:.5em;
  margin-bottom:24px;
  opacity:.85;
}
.hero-eyebrow{
  color:rgba(255,255,255,.6);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:14px;
}
.hero h1{
  color:#fff;font-size:76px;font-weight:600;font-style:italic;
  letter-spacing:-.01em;line-height:1.05;margin-bottom:18px;
}
.hero h1 span{color:var(--red);font-style:normal;}
.hero p{
  color:rgba(255,255,255,.72);
  max-width:560px;margin:0 auto;
  font-size:16px;line-height:1.7;
}
.hero-rule{
  width:54px;height:2px;background:var(--gold);
  margin:28px auto 0;
}

/* ── ROSTER INTRO ── */
.roster-intro{
  max-width:760px;margin:0 auto;
  padding:64px 32px 24px;
  text-align:center;
}
.roster-intro .card-eyebrow{
  color:var(--red);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;margin-bottom:10px;
}
.roster-intro h2{
  font-size:40px;font-weight:600;color:var(--black);margin-bottom:14px;
}
.roster-intro p{
  font-size:16px;line-height:1.75;color:#54514c;
}

/* ── CAROUSEL ── */
.carousel-wrap{
  position:relative;
  padding:36px 0 76px;
}
.carousel-track{
  display:flex;gap:28px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 32px 24px;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}

/* ── BACKSTAGE-PASS AGENT CARD ── */
.pass-card{
  scroll-snap-align:center;
  flex:0 0 auto;
  width:340px;
  display:flex;
  background:#fff;
  border-radius:6px;
  box-shadow:0 18px 48px rgba(0,0,0,0.10);
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
}

/* left "ticket stub" */
.pass-stub{
  flex:0 0 46px;
  background:var(--black);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background-image: radial-gradient(circle at 50% 0, transparent 7px, var(--black) 7.5px),
                     radial-gradient(circle at 50% 100%, transparent 7px, var(--black) 7.5px);
  background-size:100% 26px;
  background-repeat: repeat-y;
  border-right:1px dashed rgba(255,255,255,.25);
}
.pass-stub-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:var(--gold);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}

/* right content */
.pass-body{
  flex:1;
  padding:28px 26px 26px;
  display:flex;flex-direction:column;
}
.pass-roster-no{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.2em;color:var(--red);
  text-transform:uppercase;font-weight:600;margin-bottom:16px;
}
.pass-photo{
  width:84px;height:84px;border-radius:50%;
  background:linear-gradient(135deg, var(--charcoal), var(--black));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  border:2px solid var(--gold);
  overflow:hidden;
}
.pass-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pass-photo .monogram{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;color:#fff;font-weight:600;font-style:italic;
}
.pass-name{
  font-size:26px;font-weight:600;color:var(--black);line-height:1.15;
  margin-bottom:4px;
}
.pass-title{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin-bottom:14px;
}
.pass-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;
}
.pass-tags span{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#6b6862;border:1px solid #e2ddd3;border-radius:20px;
  padding:5px 12px;font-weight:500;
}
.pass-bio{
  font-size:14px;line-height:1.7;color:#54514c;
  margin-bottom:22px;flex-grow:1;
}
.pass-footer{
  border-top:1px dashed #e2ddd3;
  padding-top:16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.pass-email{
  font-size:12.5px;color:#6b6862;text-decoration:none;
  word-break:break-all;
}
.pass-email:hover{color:var(--red);}
.btn-pass{
  flex:0 0 auto;
  background:var(--black);color:#fff;text-decoration:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:11px 18px;border-radius:2px;white-space:nowrap;
  transition:background .2s;
}
.btn-pass:hover{background:var(--red);}

/* OPEN SLOT variant */
.pass-card.open-slot .pass-stub{background:#e2ddd3;border-right:1px dashed #cfc8bc;}
.pass-card.open-slot .pass-stub-text{color:#a8a195;}
.pass-card.open-slot{border-style:dashed;border-color:#d9d3c8;box-shadow:none;background:#fbf9f5;}
.pass-card.open-slot .pass-photo{
  background:#fff;border:2px dashed #cfc8bc;
}
.pass-card.open-slot .pass-photo .monogram{color:#cfc8bc;}
.pass-card.open-slot .pass-name{color:#a8a195;}
.pass-card.open-slot .pass-title{color:#cfc8bc;}
.pass-card.open-slot .btn-pass{background:var(--red);}
.pass-card.open-slot .btn-pass:hover{background:var(--black);}

/* arrows */
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid #e2ddd3;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;box-shadow:0 6px 20px rgba(0,0,0,0.08);
  transition:background .2s;
}
.carousel-arrow:hover{background:var(--cream);}
.carousel-arrow.prev{left:8px;}
.carousel-arrow.next{right:8px;}
.carousel-arrow svg{stroke:var(--black);}

/* ── CTA STRIP ── */
.cta-strip{
  background:var(--black);
  text-align:center;
  padding:64px 32px;
}
.cta-strip .card-eyebrow{
  color:var(--gold);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;margin-bottom:12px;
}
.cta-strip h2{
  color:#fff;font-size:38px;font-weight:600;margin-bottom:14px;
}
.cta-strip p{
  color:rgba(255,255,255,.68);max-width:520px;margin:0 auto 28px;
  font-size:15px;line-height:1.7;
}
.btn-red{
  background:var(--red);color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:15px 32px;border-radius:2px;display:inline-block;
  transition:background .2s;
}
.btn-red:hover{background:#962c23;}

/* ── FOOTER ── */
.site-footer{
  background:var(--black);border-top:1px solid var(--line);
  padding:32px;
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-inner img{height:30px;opacity:.85;}
.footer-links{display:flex;gap:22px;}
.footer-links a{
  color:rgba(255,255,255,.55);text-decoration:none;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
}
.footer-links a:hover{color:#fff;}
.footer-copy{color:rgba(255,255,255,.4);font-size:12px;}

/* ── RESPONSIVE ── */
@media (max-width:768px){
  .header-nav{display:none;}
  .hero h1{font-size:48px;}
  .roster-intro h2{font-size:30px;}
  .carousel-arrow{display:none;}
  .pass-card{width:280px;}
  .footer-inner{flex-direction:column;text-align:center;}
}
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,600&family=Jost:wght@400;500;600&display=swap" rel="stylesheet">

<!-- HEADER -->
<header class="site-header">
  <div class="header-inner">
    <a href="https://caincompany.net">
      <img src="https://caincompany.net/wp-content/uploads/cain-logo-white.png" alt="Cain &amp; Company Real Estate LLC">
    </a>
    <nav class="header-nav">
      <a class="nav-a" href="https://caincompany.net">Home</a>
      <a class="nav-a" href="https://caincompany.net/about">About</a>
      <a class="nav-a" href="https://caincompany.net/buy/">Buying</a>
      <a class="nav-a" href="https://caincompany.net/sell/">Selling</a>
      <a class="nav-a" href="https://www.har.com" target="_blank" rel="noopener">Search Listings</a>
      <a class="nav-cta" href="https://caincompany.net/agent-sign-up/">Join Our Team</a>
    </nav>
  </div>
</header>

<!-- HERO -->
<section class="hero">
  <div class="hero-eyebrow">Cain &amp; Company Real Estate LLC &nbsp;&middot;&nbsp; Houston, TX</div>
  <h1>Rockstars <span>of</span> Realty</h1>
  <p>Meet the agents who bring energy, expertise, and an unwavering commitment to results to every client they serve. This is the team that makes Cain &amp; Company a name Houston trusts.</p>
  <div class="hero-rule"></div>
</section>

<!-- ROSTER INTRO -->
<div class="roster-intro">
  <div class="card-eyebrow">The Lineup</div>
  <h2>Our Featured Agents</h2>
  <p>Swipe or scroll through the roster below to learn more about each Cain &amp; Company professional &mdash; their specialties, their story, and how to get in touch directly.</p>
</div>

<!-- CAROUSEL -->
<div class="carousel-wrap">
  <button class="carousel-arrow prev" onclick="scrollRoster(-1)" aria-label="Previous agent">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
  </button>
  <button class="carousel-arrow next" onclick="scrollRoster(1)" aria-label="Next agent">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  </button>

  <div class="carousel-track" id="rosterTrack">

    <!-- ══ AGENT 01 — Robert Wright (replace details only if needed) ══ -->
    <div class="pass-card">
      <div class="pass-stub"><span class="pass-stub-text">All Access</span></div>
      <div class="pass-body">
        <div class="pass-roster-no">Roster No. 01</div>
        <div class="pass-photo">
          <!-- Replace with: <img src="PHOTO_URL" alt="Robert Wright"> -->
          <span class="monogram">RW</span>
        </div>
        <div class="pass-name">Robert Wright</div>
        <div class="pass-title">REALTOR&reg; &middot; Buyer&rsquo;s Agent</div>
        <div class="pass-tags">
          <span>Houston Metro</span>
          <span>Katy / Sugar Land</span>
          <span>First-Time Buyers</span>
        </div>
        <div class="pass-bio">Brings fresh energy, sharp market insight, and an unwavering dedication to helping Houston families find the home they&rsquo;ve always imagined.</div>
        <div class="pass-footer">
          <a class="pass-email" href="mailto:RWright@Caincompany.net">RWright@Caincompany.net</a>
          <a class="btn-pass" href="https://caincompany.net/robert-wright/">View Profile</a>
        </div>
      </div>
    </div>

    <!-- ══ AGENT 02 — Roquel Mayfield (replace details only if needed) ══ -->
    <div class="pass-card">
      <div class="pass-stub"><span class="pass-stub-text">All Access</span></div>
      <div class="pass-body">
        <div class="pass-roster-no">Roster No. 02</div>
        <div class="pass-photo">
          <!-- Replace with: <img src="PHOTO_URL" alt="Roquel Mayfield"> -->
          <span class="monogram">RM</span>
        </div>
        <div class="pass-name">Roquel Mayfield</div>
        <div class="pass-title">REALTOR&reg; &middot; Listing Specialist</div>
        <div class="pass-tags">
          <span>Luxury Homes</span>
          <span>Seller Representation</span>
          <span>The Woodlands</span>
        </div>
        <div class="pass-bio">Pairs a refined eye for luxury properties with hands-on, personalized guidance &mdash; helping sellers position their homes to stand out in any market.</div>
        <div class="pass-footer">
          <a class="pass-email" href="mailto:RMayfield@Caincompany.net">RMayfield@Caincompany.net</a>
          <a class="btn-pass" href="https://caincompany.net/roquel-mayfield/">View Profile</a>
        </div>
      </div>
    </div>

    <!-- ══ AGENT 03 — PLACEHOLDER (duplicate this block for each new rockstar) ══ -->
    <div class="pass-card open-slot">
      <div class="pass-stub"><span class="pass-stub-text">Open Slot</span></div>
      <div class="pass-body">
        <div class="pass-roster-no">Roster No. 03</div>
        <div class="pass-photo">
          <span class="monogram">?</span>
        </div>
        <div class="pass-name">Agent Name</div>
        <div class="pass-title">REALTOR&reg; &middot; Title Here</div>
        <div class="pass-tags">
          <span>Specialty One</span>
          <span>Specialty Two</span>
          <span>Specialty Three</span>
        </div>
        <div class="pass-bio">Add a short bio highlighting this agent&rsquo;s strengths, market focus, and what makes them a Cain &amp; Company rockstar.</div>
        <div class="pass-footer">
          <a class="pass-email" href="mailto:Agent@Caincompany.net">Agent@Caincompany.net</a>
          <a class="btn-pass" href="https://caincompany.net/agent-sign-up/">This Could Be You</a>
        </div>
      </div>
    </div>

    <!-- ══ AGENT 04 — PLACEHOLDER ══ -->
    <div class="pass-card open-slot">
      <div class="pass-stub"><span class="pass-stub-text">Open Slot</span></div>
      <div class="pass-body">
        <div class="pass-roster-no">Roster No. 04</div>
        <div class="pass-photo">
          <span class="monogram">?</span>
        </div>
        <div class="pass-name">Agent Name</div>
        <div class="pass-title">REALTOR&reg; &middot; Title Here</div>
        <div class="pass-tags">
          <span>Specialty One</span>
          <span>Specialty Two</span>
          <span>Specialty Three</span>
        </div>
        <div class="pass-bio">Add a short bio highlighting this agent&rsquo;s strengths, market focus, and what makes them a Cain &amp; Company rockstar.</div>
        <div class="pass-footer">
          <a class="pass-email" href="mailto:Agent@Caincompany.net">Agent@Caincompany.net</a>
          <a class="btn-pass" href="https://caincompany.net/agent-sign-up/">This Could Be You</a>
        </div>
      </div>
    </div>

    <!-- ══ AGENT 05 — PLACEHOLDER ══ -->
    <div class="pass-card open-slot">
      <div class="pass-stub"><span class="pass-stub-text">Open Slot</span></div>
      <div class="pass-body">
        <div class="pass-roster-no">Roster No. 05</div>
        <div class="pass-photo">
          <span class="monogram">?</span>
        </div>
        <div class="pass-name">Agent Name</div>
        <div class="pass-title">REALTOR&reg; &middot; Title Here</div>
        <div class="pass-tags">
          <span>Specialty One</span>
          <span>Specialty Two</span>
          <span>Specialty Three</span>
        </div>
        <div class="pass-bio">Add a short bio highlighting this agent&rsquo;s strengths, market focus, and what makes them a Cain &amp; Company rockstar.</div>
        <div class="pass-footer">
          <a class="pass-email" href="mailto:Agent@Caincompany.net">Agent@Caincompany.net</a>
          <a class="btn-pass" href="https://caincompany.net/agent-sign-up/">This Could Be You</a>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- CTA STRIP -->
<section class="cta-strip">
  <div class="card-eyebrow">Now Casting</div>
  <h2>Want a Spot on the Roster?</h2>
  <p>Cain &amp; Company is always looking for driven, client-first agents to join the team. If you've got the talent, we'll help you build the platform.</p>
  <a class="btn-red" href="https://caincompany.net/agent-sign-up/">Apply to Join &rarr;</a>
</section>

<!-- FOOTER -->
<footer class="site-footer">
  <div class="footer-inner">
    <img src="https://caincompany.net/wp-content/uploads/cain-logo-white.png" alt="Cain &amp; Company Real Estate LLC">
    <div class="footer-links">
      <a href="https://caincompany.net">Home</a>
      <a href="https://caincompany.net/about">About</a>
      <a href="https://caincompany.net/eviction-services">Eviction Services</a>
      <a href="https://caincompany.net/agent-sign-up/">Agent Sign-Up</a>
    </div>
    <div class="footer-copy">&copy; 2026 Cain &amp; Company Real Estate LLC. All rights reserved.</div>
  </div>
</footer>

<script>
function scrollRoster(dir){
  var track = document.getElementById('rosterTrack');
  var card = track.querySelector('.pass-card');
  var gap = 28;
  var amount = (card.offsetWidth + gap) * dir;
  track.scrollBy({left: amount, behavior: 'smooth'});
}
</script>/* End custom CSS */