/* houstonfirsttimehomebuyer.com — high-end editorial elevation layer (2026-06-02).
   Loaded AFTER styles-marcia. Refines typography (Cormorant Garamond + Raleway),
   spacing rhythm, hero/video legibility, and tactile detail — without changing the
   funnel structure, forms, or CRM/Supabase JS. Marcia Smith Websites. */

:root{
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Raleway','Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Typography ---- */
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:.004em}
h1,h2,h3,h4,.display-xl,.display-lg,.hero-title,.modal-title,.speaker-name,.section-title{
  font-family:var(--serif);font-weight:500;letter-spacing:-.008em;line-height:1.08}
.display-xl,.hero-title{font-size:clamp(2.7rem,5.2vw,4.7rem)!important;line-height:1.04!important}
.display-lg{font-size:clamp(1.95rem,3.6vw,3.05rem)!important;line-height:1.1!important}
.hero-title em,.display-lg em,.display-xl em{font-style:italic;color:var(--gold)}
.label-gold,.hero-eyebrow .label-gold{letter-spacing:.24em;text-transform:uppercase;font-weight:600;font-size:.72rem}
.body-lg{font-size:1.05rem;line-height:1.65}

/* ---- Generous editorial section rhythm ---- */
/* tightened vertical rhythm — was too airy */
.section{padding-top:clamp(38px,4.6vw,68px)!important;padding-bottom:clamp(38px,4.6vw,68px)!important}
.hero-title-rule{height:2px;width:84px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border:0;border-radius:2px}

/* ---- Hero + video: visible, cinematic, legible ---- */
.hero{min-height:82vh;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* readable scrim over the video (kept light so footage still reads bright) */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,24,40,.74),rgba(15,24,40,.42) 55%,rgba(15,24,40,.30));z-index:1}
.hero-content{position:relative;z-index:2}
.hero-title,.hero-subtitle,.hero-price-anchor,.hero-eyebrow,.hero-meta{text-shadow:0 1px 16px rgba(0,0,0,.4)}

/* ---- Buttons ---- */
.btn{font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:4px;transition:all var(--transition)}
.btn-primary{background:var(--gold);color:#14110a;border:1.5px solid var(--gold);box-shadow:0 8px 24px rgba(201,169,110,.28)}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,169,110,.38)}

/* ---- Tactile cards ---- */
.card,.audience-card,.speaker-card,.testimonial-card,.feature-card,.price-card,.pricing-card{
  transition:transform .3s var(--transition),box-shadow .3s var(--transition),border-color .3s var(--transition)}
.card:hover,.audience-card:hover,.testimonial-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-luxury)}

/* ---- Imagery: graceful, no broken/empty look ---- */
img{max-width:100%;height:auto}
figure img,.media img,.audience-card img,.testimonial-card img{border-radius:var(--radius);box-shadow:var(--shadow-card)}

/* ---- Sticky nav refinement ---- */
.sticky-nav{backdrop-filter:saturate(120%) blur(10px)}
.nav-brand{font-family:var(--serif);letter-spacing:.02em}

/* ---- Reduced motion: hold the poster, calm transitions ---- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   PREMIUM POLISH LAYER — pushes the funnel toward true luxury.
   Additive only; no structural/JS/form changes. 2026-06-02b
   ============================================================ */

/* Subtle gold "frame" line at the very top (luxury masthead cue) */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--gold-muted),var(--gold) 45%,var(--gold-light) 70%,var(--gold-muted));pointer-events:none}

/* Refined sticky nav */
.sticky-nav{backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border-subtle);box-shadow:0 2px 24px rgba(15,24,40,.05)}
.nav-brand{font-family:var(--serif);font-weight:600;letter-spacing:.03em;font-size:1.2rem}

/* Section eyebrows: a refined gold tick before the label */
.label-gold{display:inline-flex;align-items:center;gap:.7em}
.label-gold::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));display:inline-block;flex:0 0 auto}
.hero .label-gold::before,.editorial-break .label-gold::before{background:linear-gradient(90deg,transparent,var(--gold-light))}

/* Premium framed imagery */
.editorial-break-photo img,.editorial-break-photo{border-radius:var(--radius-lg)}
.editorial-break-photo{box-shadow:var(--shadow-luxury);overflow:hidden}
.editorial-break-photo::after{content:"";position:absolute;inset:0;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);pointer-events:none}
.editorial-break-photo{position:relative}

/* Testimonials → editorial, serif, refined */
.testimonial-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  background:var(--warm-white);transition:transform .3s var(--transition),box-shadow .3s var(--transition)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-luxury)}
.testimonial-text{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--text-primary)}
.testimonial-featured .testimonial-text{font-size:1.5rem;line-height:1.4}
.testimonial-quote-mark{font-family:var(--serif);color:var(--gold);opacity:.85}
.testimonial-avatar{border:2px solid var(--gold-light);box-shadow:0 4px 14px rgba(201,169,110,.25)}
.testimonial-name{font-family:var(--serif);font-weight:600}

/* FAQ → calm, editorial accordion */
.faq-item{border-bottom:1px solid var(--border-subtle)}
.faq-trigger{font-family:var(--serif);font-size:1.18rem;font-weight:500;letter-spacing:-.005em;padding-top:1.1em;padding-bottom:1.1em}
.faq-body{color:var(--text-body)}

/* Pricing + registration cards → premium */
.pricing,.reg-card,.reg-summary,.speaker-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-luxury)}
.speaker-card{position:relative;overflow:hidden}
.speaker-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}

/* Richer dark/navy sections (subtle gold dot texture, like a finished editorial spread) */
.section-bg-navy,.section-bg-dark,.final-cta{background-image:radial-gradient(circle at center,rgba(201,169,110,.06) 1px,transparent 1.6px);background-size:15px 15px}

/* Buttons: refined luxury press */
.btn{border-radius:4px}
.btn-lg{padding:1.05rem 2.2rem;letter-spacing:.08em}
.btn-outline,.btn-ghost{border:1.5px solid currentColor;background:transparent}

/* Hero proof chips / meta → refined */
.hero-meta-item,.hero-proof>div{letter-spacing:.02em}

/* Generous, confident headings */
h2.display-lg{margin-bottom:.5em}

/* ============================================================
   HERO PREMIUM REFINEMENT — crisp, editorial, expensive.
   Overrides earlier hero rules (later in source). 2026-06-02c
   ============================================================ */

/* Stronger, cleaner directional scrim so white type is razor-crisp
   over the skyline (kills the muddy, low-contrast look). */
.hero-bg::after{
  background:linear-gradient(102deg,
    rgba(13,20,33,.46) 0%, rgba(13,20,33,.28) 38%,
    rgba(13,20,33,.11) 66%, rgba(13,20,33,.02) 100%) !important}
/* second pass: gentle bottom anchor for the action area */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(13,20,33,.24),transparent 34%)}

/* Clean type — drop the heavy halo, keep a whisper of depth */
.hero-title,.hero-subtitle,.hero-price-anchor,.hero-eyebrow,.hero-meta{text-shadow:0 1px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4) !important}
.hero-title{color:#fdfcf9 !important}
.hero-title em{color:var(--gold-light) !important;font-style:italic}
.hero-subtitle{color:rgba(250,248,244,.92) !important}

/* Remove glyph clutter: the leading dash tick + diamond meta icons */
.hero .label-gold::before{display:none !important}
.hero-meta-icon{width:5px;height:5px;border-radius:50%;background:var(--gold-light);
  font-size:0 !important;display:inline-block;margin-right:.55em;vertical-align:middle;line-height:0}
.hero-eyebrow-dot{background:var(--gold-light)}

/* The CTA no longer floats on a cheap translucent slab */
.hero-action-panel{background:transparent !important;backdrop-filter:none !important;border:0 !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}

/* Confident primary CTA */
.hero-action-panel .btn-primary{box-shadow:0 14px 38px rgba(201,169,110,.42)}
.hero-included-link{color:var(--gold-light) !important;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem}
.hero-trust-line{color:rgba(250,248,244,.66);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem}

/* A touch more presence on the headline */
.hero-title.display-xl{font-weight:600 !important;letter-spacing:-.012em}

/* ============================================================
   HERO STILL (Ken Burns) + REFINED HIGH-END PALETTE. 2026-06-02d
   ============================================================ */

/* Slightly-moving still: slow cinematic zoom/drift */
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:60% 45%;animation:houKenburns 32s ease-in-out infinite alternate;will-change:transform}
@keyframes houKenburns{from{transform:scale(1.03)}to{transform:scale(1.13) translate(-1.4%,-1.2%)}}
@media (prefers-reduced-motion: reduce){.hero-still{animation:none;transform:scale(1.04)}}

/* Refined, more expensive palette (deeper near-black + cleaner warm ivory + champagne gold) */
:root{
  --navy:#0c1017; --charcoal:#15161c; --charcoal-2:#0c1017;
  --cream:#f7f3ea; --warm-white:#fdfbf6;
  --gold:#c8a868; --gold-light:#e6cf9c; --gold-muted:#806a38;
  --border-subtle:rgba(200,168,104,.20);
  --shadow-luxury:0 10px 50px rgba(12,16,23,.16), 0 2px 10px rgba(12,16,23,.07);
  --shadow-card:0 6px 28px rgba(12,16,23,.09);
}
/* keep the hero scrim aligned to the deeper base */
.hero-bg::after{background:linear-gradient(102deg,
  rgba(12,16,23,.46) 0%, rgba(12,16,23,.28) 38%,
  rgba(12,16,23,.11) 66%, rgba(12,16,23,.02) 100%) !important}

/* ============================================================
   CLIENT REVISION LAYER — included curriculum + testimonials.
   2026-06-03
   ============================================================ */
.included-list{
  counter-reset:included;
  display:grid;
  gap:12px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.included-list li{
  counter-increment:included;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:14px;
  align-items:center;
  min-height:58px;
  padding:14px 16px;
  border:1px solid rgba(201,169,110,.22);
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:var(--text-primary);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.included-list li strong,
.included-list li span{
  color:var(--text-primary);
}
.included-list li:before{
  content:counter(included, decimal-leading-zero);
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
}
.included-bonus{
  margin-top:18px;
  padding:18px 20px;
  border:1px solid rgba(128,106,56,.26);
  background:rgba(201,169,110,.12);
  color:var(--text-primary);
  font-family:var(--serif);
  font-size:1.1rem;
  line-height:1.45;
  text-align:center;
}
.included-bonus span{
  display:block;
  margin-bottom:4px;
  font-family:var(--sans);
  color:var(--gold-muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.included-actions{
  margin-top:26px;
  text-align:center;
}
.registration-side{
  align-self:center;
}
.reg-modal-box{
  max-width:min(760px, calc(100vw - 28px));
  max-height:calc(100svh - 32px);
  overflow:auto;
}
.reg-modal-box .modal-body{
  padding-top:0;
}
.reg-modal-box .form-submit{
  width:100%;
}
.modal-offer-copy{
  color:var(--text-body);
  line-height:1.62;
  margin:0 0 18px;
}
.faq-micro-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  text-align:center;
}
.faq-micro-cta span{
  flex-basis:100%;
  color:var(--text-primary);
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:600;
}
.testimonial-slider{
  position:relative;
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}
.testimonial-track{
  position:relative;
  min-height:390px;
}
.testimonial-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.testimonial-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.testimonial-slider .testimonial-card{
  padding:42px;
}
.testimonial-slider .testimonial-text{
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.58;
  color:var(--text-primary);
}
.testimonial-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:22px;
}
.testimonial-control{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(201,169,110,.38);
  background:#fff;
  color:var(--gold-muted);
  font-size:1.8rem;
  line-height:1;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
}
.testimonial-control:hover,
.testimonial-control:focus-visible{
  transform:translateY(-1px);
  border-color:var(--gold);
  color:var(--navy);
  outline:2px solid rgba(201,169,110,.28);
  outline-offset:3px;
}
.testimonial-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.testimonial-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(201,169,110,.35);
  transition:width .2s ease, background .2s ease;
}
.testimonial-dot.is-active{
  width:28px;
  border-radius:999px;
  background:var(--gold);
}
.testimonial-dot:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media(max-width:760px){
  .included-list li{grid-template-columns:34px 1fr;padding:12px 14px}
  .included-list li:before{width:34px;height:34px}
  .testimonial-track{min-height:560px}
  .testimonial-slider .testimonial-card{padding:30px 22px}
  .testimonial-slider .testimonial-text{font-size:1rem;line-height:1.62}
}

/* 2026-06-03 audit: keep hero images premium and visible, not over-darkened. */
.hero-bg::after{
  background:linear-gradient(102deg,
    rgba(12,16,23,.30) 0%,
    rgba(12,16,23,.18) 38%,
    rgba(12,16,23,.07) 66%,
    rgba(12,16,23,0) 100%) !important;
}
.hero-bg::before{
  background:linear-gradient(0deg,rgba(12,16,23,.10),transparent 34%) !important;
}
.hero-content:before{
  background:linear-gradient(100deg,
    rgba(8,13,23,.58),
    rgba(8,13,23,.30),
    rgba(8,13,23,.10) 48%,
    rgba(8,13,23,0) 66%) !important;
}
.hero-title{
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.24) !important;
}
.hero-subtitle,
.hero-meta-item,
.hero-eyebrow,
.hero-price-anchor{
  text-shadow:0 1px 5px rgba(0,0,0,.34) !important;
}
.hero-still{
  filter:brightness(1.08) saturate(1.05);
}
.mobile-sticky-cta.is-hidden{
  opacity:0;
  transform:translateY(calc(120% + env(safe-area-inset-bottom)));
  pointer-events:none;
}
.mobile-sticky-cta{
  display:none !important;
}
@media(max-width:640px){
  .hero-bg::before{
    background:linear-gradient(180deg,rgba(10,12,16,.18),rgba(25,22,20,.08) 48%,rgba(245,240,232,.06)) !important;
  }
  .hero-content:before{
    inset:-8% 5% -8% -8% !important;
    background:linear-gradient(100deg,rgba(8,13,23,.36),rgba(8,13,23,.20),rgba(8,13,23,.07) 62%,rgba(8,13,23,0) 82%) !important;
  }
  .hero-bg::after{
    background:linear-gradient(180deg,rgba(12,16,23,.20),rgba(12,16,23,.08) 48%,rgba(12,16,23,.02)) !important;
  }
  .hero-still{
    filter:brightness(1.18) saturate(1.07);
  }
  .hero-title{
    text-shadow:0 1px 2px rgba(0,0,0,.50),0 8px 22px rgba(0,0,0,.20) !important;
  }
  .included-list li{
    background:rgba(255,255,255,.58);
    color:var(--text-primary) !important;
  }
}