/* Homepage-only CSS — hero, honeycomb service grid, about, before/after gallery,
     reviews marquee. Shared nav/buttons/footer/etc. come from styles.css. */
  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:120px 0 100px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 15% 0%, rgba(217,167,51,0.10), transparent 60%),
      linear-gradient(var(--black), var(--black));
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 75%);
    pointer-events:none;
  }
  .hero .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px;}
  .hero-inner{position:relative; max-width:620px;}
  .hero-badge{
    position:relative; flex-shrink:0; width:340px; display:none;
    margin-top:36px;
  }
  .hero-badge img{
    width:100%; height:auto; border-radius:50%;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  }
  .hero-badge::after{
    content:"";
    position:absolute; inset:-30px;
    background:radial-gradient(circle, rgba(70,130,180,0.22), transparent 65%);
    z-index:-1;
  }
  @media (min-width:1000px){ .hero-badge{display:block;} }

  .hero-divider{
    position:absolute; left:0; right:0; bottom:-1px; height:90px; z-index:4;
    line-height:0; pointer-events:none;
  }
  .hero-divider svg{display:block; width:100%; height:100%;}
  .hero-divider-fill{fill:var(--black);}
  .hero-divider-line{fill:none; stroke:var(--accent-bright); stroke-width:2.5; vector-effect:non-scaling-stroke;}
  .hero-divider-line-soft{fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0.55; vector-effect:non-scaling-stroke;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent);
    letter-spacing:0.12em; text-transform:uppercase; margin-bottom:22px;
    display:flex; align-items:center; gap:12px;
  }
  .eyebrow-icon{width:34px; height:auto; display:block; flex-shrink:0;}
  .hero h1{
    font-size:clamp(42px, 7vw, 76px);
    line-height:0.98;
    margin-bottom:26px;
  }
  .hero h1 em{font-style:normal; color:var(--accent);}
  .hero p{
    display:inline-block;
    font-size:18px; font-weight:500; color:var(--ivory);
    max-width:520px; margin-bottom:40px;
    background:rgba(23,26,31,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    padding:12px 16px; border-radius:10px;
  }
  /* Bottom margin dropped with the hero stats block it used to space against. */
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap;}

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:110px 0;}
  .section-alt{background:var(--graphite);}
  .sec-head{max-width:640px; margin-bottom:64px;}
  .sec-eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
    letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px;
  }
  .sec-head h2{font-size:clamp(30px,4vw,44px); line-height:1.05; margin-bottom:16px;}
  .sec-head p{color:var(--steel); font-size:16px;}
  /* ---------- SERVICE BUTTON LIST ---------- */
  .hero > .wrap{position:relative; z-index:2;}
  .section-bg-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  .section-bg-overlay{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse 800px 550px at 100% 100%, rgba(111,163,208,0.4), transparent 60%),
      linear-gradient(90deg, rgba(23,26,31,0.95) 0%, rgba(23,26,31,0.6) 40%, rgba(23,26,31,0.25) 100%);
  }
  /* Service honeycomb now lives in styles.css (shared with city pages) */
  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  }
  @media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
  /* The About photo uses the shared .pframe treatment; 2:3 keeps its native portrait shape
     so object-fit:cover doesn't slice a band out of the middle and cut their heads off. */
  .about-grid .pframe{max-width:440px;}
  .about-text .sec-eyebrow{margin-bottom:14px;}
  .about-text h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:22px;}
  .about-copy{font-size:15px; color:var(--steel); line-height:1.7; margin-bottom:18px;}
  .about-cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
  /* Before/after gallery + slider CSS now lives in styles.css (shared with gallery.html) */

  /* ---------- REVIEWS CAROUSEL ---------- */
  .reviews-band{
    background:var(--graphite-light);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:90px 0 100px;
    overflow:hidden;
  }
  .reviews-head{max-width:640px; margin:0 auto 56px; text-align:center;}
  .reviews-stars-summary{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:18px;
  }
  .reviews-stars-summary .stars{color:var(--accent-bright); font-size:20px; letter-spacing:2px;}
  .reviews-stars-summary .score{font-family:'Oswald',sans-serif; font-size:20px; color:var(--ivory);}
  .reviews-stars-summary .count{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--steel);}

  .review-track-wrap{
    position:relative; width:100%; overflow:hidden;
    mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .review-track{
    display:flex; align-items:flex-start; gap:20px; width:max-content;
    animation:scroll-reviews 55s linear infinite;
  }
  .review-track-wrap:hover .review-track{animation-play-state:paused;}
  @keyframes scroll-reviews{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .review-card{
    flex-shrink:0; width:320px;
    background:var(--graphite-2); border:1px solid var(--accent);
    padding:26px 24px 22px;
    display:flex; flex-direction:column;
    position:relative; z-index:1;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, z-index 0s;
  }
  .review-card:hover{
    border-color:var(--accent-bright);
    box-shadow:0 20px 45px -12px rgba(0,0,0,0.5);
    transform:translateY(-3px);
    z-index:5;
  }
  .review-top{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .review-avatar{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:var(--graphite); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald',sans-serif; font-size:15px; color:var(--accent-bright);
  }
  .review-name{font-size:14.5px; color:var(--ivory); font-weight:500;}
  .review-age{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--steel); margin-top:2px;}
  .review-text{
    position:relative;
    font-size:14px; color:var(--ivory); line-height:1.6; margin-bottom:18px;
    height:157px; overflow:hidden;
    transition:height .35s ease;
  }
  .review-text::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:34px;
    background:linear-gradient(to bottom, transparent, var(--graphite-2));
    transition:opacity .25s ease;
  }
  .review-card:hover .review-text::after{opacity:0;}
  .review-badge{
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--line); padding-top:14px;
    font-family:'JetBrains Mono',monospace; font-size:12px;
  }
  .review-badge .stars{color:var(--accent-bright); letter-spacing:1.5px; font-size:13px;}
  .review-badge .verified{color:var(--steel); text-transform:uppercase; letter-spacing:0.05em; font-size:10.5px;}

  /* ---------- CTA BANNER (slightly roomier than the service-page version) ---------- */
  .cta-banner{padding:70px 0;}
  .cta-banner h2{font-size:clamp(26px,3.6vw,38px);}

  /* ---------- TRUST BADGES (pulled up to overlap the CTA banner above it) ---------- */
  .trust-section{padding:0 0 70px; margin-top:-46px; position:relative; z-index:2;}

  /* ---------- FOOTER (no top border here — the overlapping trust section already separates it) ---------- */
  footer{border-top:none;}