/* 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}