/* ============================================================
   EliteMD — Premium Enhancement Layer (site-wide, additive)
   Loaded after styles.css on every page. Pure polish; never
   changes layout. Respects prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   MOBILE OVERFLOW GUARD (deploy-critical)
   Stops any single wide element from forcing horizontal scroll,
   which iOS "fixes" by zooming the whole page out (the 60%-width
   bug). Clip at the root + keep media/embeds within the viewport.
   ============================================================ */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; position: relative; }
img, video, iframe, canvas, svg, table { max-width: 100%; }
/* grid/flex children may keep intrinsic min-width and blow past the
   viewport — let them shrink */
.svc-grid > *, .ben-grid > *, .ba-grid > *, .team-grid > *, .pay-grid > *,
.cat-grid > *, .sig-grid > *, .feat-grid > *, .rx-grid > *, .stats > *,
.hours-grid > *, .rfx-ben-grid > *, .hero-inner > *, .wrap > * { min-width: 0; }

/* The header's "FREE CONSULTATION" pill (.btn-primary) never collapsed on
   phones — at 230px it forced the whole header to ~644px and made iOS zoom
   the page out. Hide it on phones; the bottom sticky bar already has a
   "Book Free Consult" action. Keep the hamburger + logo. */
@media (max-width: 760px) {
  .nav-cta .btn-primary, .nav-cta .btn-gold, .nav-cta .nav-phone { display: none !important; }
  .nav-cta { gap: 0 !important; }
}

/* User wants a plain, regular website — remove ALL floating UI
   (sticky bottom Call/Visit/Book bar, back-to-top button, scroll
   progress bar) and the bottom padding that was reserved for the bar. */
.mobile-bar { display: none !important; }
.to-top { display: none !important; }
#emd-progress { display: none !important; }
body { padding-bottom: 0 !important; }

/* Page-load fade-in */
body { animation: emdPageIn .7s var(--ease, ease) both; }
@keyframes emdPageIn { from { opacity: 0; } to { opacity: 1; } }

/* Gold scroll-progress bar */
#emd-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, var(--gold, #C3A24C), var(--gold-light, #E3C880));
  box-shadow: 0 0 14px rgba(195,162,76,.55); pointer-events: none;
  transition: width .12s linear;
}

/* Cursor spotlight glow for dark hero bands */
.svc-hero, .page-hero { --emx: 70%; --emy: 28%; }
.svc-hero .emd-spot, .page-hero .emd-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity .5s var(--ease, ease);
  background: radial-gradient(420px circle at var(--emx) var(--emy), rgba(227,200,128,.16), transparent 62%);
}
.svc-hero:hover .emd-spot, .page-hero:hover .emd-spot { opacity: 1; }

/* Framed hero image — gentle zoom on hover */
.hero-figure { overflow: hidden; }
.hero-figure img { transition: transform 1.1s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.hero-figure:hover img { transform: scale(1.045); }

/* Unified premium hover for content cards that lacked one
   (box-shadow + border only — no transform, so it never fights
   existing card animations) */
.ben-card, .pay-card, .proc-step, .spec-wrap .offer-card {
  transition: box-shadow .45s var(--ease, ease), border-color .45s var(--ease, ease), transform .45s var(--ease, ease);
}
.ben-card:hover, .pay-card:hover, .proc-step:hover {
  border-color: rgba(195,162,76,.5);
  box-shadow: 0 26px 56px -36px rgba(0,0,0,.45);
}

/* Buttons feel responsive */
.btn-lg { will-change: transform; }

/* Slow sheen sweep across dark / accent CTA bands */
.consult-strip, .ghl-embed { position: relative; overflow: hidden; }
.consult-strip::after {
  content: ""; position: absolute; top: 0; left: -65%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg); animation: emdSheen 7.5s ease-in-out infinite; pointer-events: none;
}
@keyframes emdSheen { 0%,100% { left: -65%; } 55%,100% { left: 130%; } }

/* Eyebrows get a subtle shimmer */
.eyebrow { background-size: 200% auto; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  #emd-progress { display: none; }
  .hero-figure:hover img { transform: none; }
  .consult-strip::after { animation: none; display: none; }
  .svc-hero:hover .emd-spot, .page-hero:hover .emd-spot { opacity: 0; }
}

/* Remove decorative gold icon overlays on featured / blog cards (per request) */
.rx-ic { display: none !important; }

/* Cards flagged .rx-fit show the full photo (contain, no crop, no dark overlay) */
.rx-fit::after { display: none !important; }
.rx-fit .rx-bg { background-size: contain !important; background-repeat: no-repeat; background-position: center; background-color: #f4f2ec; transform: none !important; }
.feat-card:hover .rx-fit .rx-bg { transform: none !important; }

/* ---- Premium team (About) ---- */
.team-photo img, .team-portrait img { transition: transform 1s var(--ease), filter .6s var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s !important; }
.team-card:hover { border-color: rgba(195,162,76,.55) !important; box-shadow: 0 34px 58px -32px rgba(0,0,0,.42) !important; }
.team-photo::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, transparent 48%, rgba(13,12,10,.55)); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.team-card:hover .team-photo::before { opacity: 1; }
.team-feature .team-portrait img { transition: transform 1.1s var(--ease); }
.team-feature:hover .team-portrait img { transform: scale(1.045); }

/* Show the full branded "MEET" portraits in the team section */
#team .team-photo { aspect-ratio: 3/4 !important; background: #5e1620; }
#team .team-photo img, #team .team-portrait img { object-position: center !important; }
#team .team-portrait { background: #5e1620; }
#team .team-portrait .role-pill { display: none; }

/* ---- Team remodel: premium polish + staggered reveal ---- */
#team .team-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); z-index: 4; }
#team .team-card:hover::after { transform: scaleX(1); }
#team .team-photo img { filter: saturate(.93) contrast(1.02); }
#team .team-card:hover .team-photo img { filter: saturate(1.06); }
#team .team-body .t-tag { color: var(--gold); letter-spacing: .14em; }
#team .team-feature .team-portrait::after { border-width: 2px; transition: border-color .5s var(--ease); }
#team .team-feature:hover .team-portrait::after { border-color: rgba(195,162,76,.75); }
#team .cred-pills span { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
#team .cred-pills span:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(195,162,76,.6); }
@media (prefers-reduced-motion: no-preference) {
  #team .team-grid:not(.in) .team-card { opacity: 0; }
  #team .team-grid.in .team-card { animation: emdTeamRise .75s var(--ease) backwards; }
  #team .team-grid.in .team-card:nth-child(2) { animation-delay: .1s; }
  #team .team-grid.in .team-card:nth-child(3) { animation-delay: .2s; }
  #team .team-grid.in .team-card:nth-child(4) { animation-delay: .32s; }
}
@keyframes emdTeamRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Homepage hero — fill full-bleed instead of letterboxing with black bars */
.hero-video-bg { object-fit: cover !important; }

/* ---- Mobile safety guards ---- */
.px-spot-grid > *, .pd-kit > *, .calc > *, .bf-gal > *, .px-gal > *, .pd-grid > *, .hero-split > *, .tl > * { min-width: 0; }
@media (max-width: 560px) {
  .consult-strip .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .calc-result .calc-mo { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .px-spot-media { height: clamp(300px, 78vw, 440px); }
}
