/*
 * ══════════════════════════════════════════════════════════════════════════════
 *  services.css — Scott Landau Team (scottlandauteam.com)
 *  Styles for all service pages: services/*.html
 *
 *  APPLIES TO:
 *  services/home-buying.html
 *  services/home-selling.html
 *  services/divorce-real-estate.html
 *  services/relocation.html
 *  services/investment-properties.html
 *  services/cash-offer.html
 *  services/rentals.html
 *  services/market-analysis.html
 *
 *  SECTIONS:
 *  1. Service Page Hero              — .sp-hero, .sp-hero-inner, .sp-num, .sp-eyebrow
 *  2. Service Page Content           — .sp-main, .sp-points, .sp-point
 *  3. Service Page Quote             — .sp-quote
 *  4. Service Page CTA               — .sp-cta, .sp-cta-label, .sp-cta-btns
 *  5. Return Button                  — .sp-return-btn (← Back to Services)
 *  6. Floating Action Buttons        — .float-actions, .fab, .fab-primary, .fab-secondary
 *     (Call Us / Message Us bubbles — fixed bottom-right)
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ══ 1. SERVICE PAGE HERO ════════════════════════════════════════════════════
 * Applies to: <section class="sp-hero"> in all services/*.html
 * Full-width dark gradient hero with large number, eyebrow, title, intro text
 * ══════════════════════════════════════════════════════════════════════════ */

    /* ── Service page overrides ── */
    .sp-hero {
      padding: 140px 80px 80px;
      background: linear-gradient(135deg, #0e1a2e 0%, #050a12 100%);
      position: relative; overflow: hidden;
    }

    .sp-hero::before {
      content: ''; position: absolute; top: -20%; right: -5%;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(200,169,110,0.1) 0%, transparent 70%);
    }

    .sp-hero-inner { max-width: 860px; position: relative; z-index: 1; }
    .sp-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 6rem; font-weight: 300;
      color: var(--gold2); opacity: 0.6;
      line-height: 1; margin-bottom: 8px;
    }

    .sp-eyebrow {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--gold);
      display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    }

    .sp-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--gold); }
    .sp-hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300;
      color: var(--white); line-height: 1.1; margin-bottom: 12px;
    }

    .sp-hero h1 em { color: var(--gold2); font-style: italic; }
    .sp-intro {
      font-size: 1rem; color: rgba(255,255,255,0.65);
      line-height: 1.9; max-width: 680px; margin-top: 20px;
    }

    /* Main content */
    
/* ══ 2. SERVICE PAGE CONTENT ════════════════════════════════════════════════
 * Applies to: <main class="sp-main"> — main content area with points list
 * ══════════════════════════════════════════════════════════════════════════ */
.sp-main { max-width: 900px; margin: 0 auto; padding: 80px 48px; }
    /* Points */
    .sp-points { display: flex; flex-direction: column; gap: 0; margin-bottom: 64px; }

    .sp-point {
      display: grid; grid-template-columns: 72px 1fr; gap: 32px;
      padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
      align-items: start;
    }

    .sp-point:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
    .sp-point-num {
      font-family: 'Cormorant Garamond', serif; font-size: 2.8rem;
      font-weight: 300; color: var(--gold2);
      line-height: 1; padding-top: 2px;
    }

    .sp-point-title {
      font-family: 'Cormorant Garamond', serif; font-size: 1.35rem;
      font-weight: 500; color: var(--white); margin-bottom: 10px;
    }

    .sp-point-desc {
      font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.85;
    }

    /* Quote */
    
/* ══ 3. SERVICE PAGE QUOTE ══════════════════════════════════════════════════
 * Applies to: <div class="sp-quote"> — client testimonial quote block
 * ══════════════════════════════════════════════════════════════════════════ */
.sp-quote {
      background: rgba(212,175,114,0.07);
      border-left: 2px solid var(--gold2);
      padding: 28px 36px; margin-bottom: 56px;
      border-radius: 0 4px 4px 0;
    }

    .sp-quote p {
      font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
      font-style: italic; color: rgba(255,255,255,0.7); line-height: 1.8;
    }

    /* CTA */
    
/* ══ 4. SERVICE PAGE CTA ════════════════════════════════════════════════════
 * Applies to: <div class="sp-cta"> — call to action box at bottom of page
 * ══════════════════════════════════════════════════════════════════════════ */
.sp-cta {
      display: flex; flex-direction: column; align-items: center;
      gap: 20px; padding: 56px 48px;
      border: 1px solid rgba(212,175,114,0.2);
      border-radius: 4px;
      background: linear-gradient(135deg, rgba(212,175,114,0.06) 0%, transparent 100%);
    }

    .sp-cta-label {
      font-family: 'Jost', sans-serif; font-size: 0.65rem;
      font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--gold); display: flex; align-items: center; gap: 12px;
    }

    .sp-cta-label::before, .sp-cta-label::after {
      content: ''; flex: 1; height: 1px; background: rgba(212,175,114,0.3);
      min-width: 40px;
    }

    .sp-cta h2 {
      font-family: 'Cormorant Garamond', serif; font-size: 1.8rem;
      font-weight: 300; color: var(--white); text-align: center;
    }

    .sp-cta-btns {
      display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
    }

    @media(max-width: 768px) {
      .sp-hero { padding: 120px 24px 60px; }

      
/* ══ 2. SERVICE PAGE CONTENT ════════════════════════════════════════════════
 * Applies to: <main class="sp-main"> — main content area with points list
 * ══════════════════════════════════════════════════════════════════════════ */
.sp-main { padding: 60px 24px; }
      .sp-point { grid-template-columns: 1fr; gap: 8px; }

      .sp-point-num { font-size: 2rem; }
    }


    /* Return button */
    
/* ══ 5. RETURN BUTTON ═══════════════════════════════════════════════════════
 * Applies to: <a class="sp-return-btn"> — "← Back to Services" link in hero
 * ══════════════════════════════════════════════════════════════════════════ */
.sp-return-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Jost', sans-serif; font-size: 0.68rem;
      font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); text-decoration: none;
      margin-bottom: 24px; transition: color 0.2s;
    }

    .sp-return-btn:hover { color: var(--gold); }
    .sp-return-btn i { font-size: 0.65rem; }

    /* Floating action buttons */
    
/* ══ 6. FLOATING ACTION BUTTONS ═════════════════════════════════════════════
 * Applies to: <div class="float-actions"> — fixed Call Us / Message Us bubbles
 * Position: fixed bottom-right corner of all service pages
 * ══════════════════════════════════════════════════════════════════════════ */
.float-actions {
      position: fixed; bottom: 36px; right: 36px;
      z-index: 998;
      display: flex; flex-direction: column;
      align-items: flex-end; gap: 12px;
      animation: fabSlideIn 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s both;
    }

    @keyframes fabSlideIn {
      from { opacity: 0; transform: translateY(20px); }

      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes dotPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }

      50%       { opacity: 1;   transform: scale(1.4); }
    }

    .fab {
      display: flex; align-items: center; justify-content: center;
      gap: 10px; width: 172px; height: 48px; padding: 0 22px;
      font-family: 'Jost', sans-serif; font-size: 0.65rem;
      font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      text-decoration: none; border-radius: 100px;
      transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
      cursor: pointer;
    }

    .fab i { font-size: 0.75rem; }
    .fab-primary {
      background: var(--gold); color: var(--ink);
      border: 1.5px solid #1a2a4a;
      box-shadow: 0 6px 24px rgba(184,150,90,0.25), 0 2px 8px rgba(0,0,0,0.2);
    }

    .fab-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(184,150,90,0.4), 0 4px 12px rgba(0,0,0,0.25);
      background: #d4af72;
    }

    .fab-primary::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%;
      background: #1a2a4a; flex-shrink: 0;
      animation: dotPulse 2s ease-in-out infinite;
    }

    .fab-secondary {
      background: rgba(13,31,60,0.92); color: #d4af72;
      border: 1.5px solid rgba(212,175,114,0.6);
      box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
      backdrop-filter: blur(12px);
    }

    .fab-secondary:hover {
      transform: translateY(-3px);
      border-color: #d4af72;
      box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 4px 12px rgba(184,150,90,0.15);
      background: rgba(13,31,60,0.98);
    }