/*
Theme Name: Salvation Roofing
Theme URI: https://www.salvationroofingllc.com/
Author: Salvation Roofing
Description: Custom classic theme migrated from the Salvation Roofing Wix design. Dark navy/blue palette, Inter font, block-editor friendly content, built-in SEO meta, LocalBusiness (RoofingContractor) and FAQPage schema, and a one-click content setup (Appearance > Salvation Setup).
Version: 1.0.12.41
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: salvation-roofing
*/

    :root {
      --primary: #1e90ff;
      --primary-dark: #0a4d8c;
      --accent: #4aa3ff;
      --accent-light: #7ec0ff;
      --dark: #e8eef7;
      --gray: #94a3b8;
      --light: #111827;
      --white: #0b1220;
      --card: #151d2e;
      --card-border: rgba(30, 144, 255, 0.12);
      --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
      --radius: 12px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--dark);
      line-height: 1.6;
      background: var(--white);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .container {
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ========== HEADER ========== */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(11, 18, 32, 0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(30, 144, 255, 0.12);
      transition: box-shadow 0.3s ease;
    }

    header.scrolled {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo img {
      height: 68px;
      width: auto;
      object-fit: contain;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-weight: 500;
      font-size: 0.95rem;
      color: #e2e8f0;
      transition: color 0.2s;
      position: relative;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--primary);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width 0.25s;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .phone-btn {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: white !important;
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 14px rgba(10, 77, 140, 0.3);
    }

    .phone-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(10, 77, 140, 0.4);
    }

    .phone-btn::after {
      display: none !important;
    }

    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .menu-toggle span {
      display: block;
      width: 26px;
      height: 3px;
      background: #e2e8f0;
      margin: 5px 0;
      border-radius: 2px;
      transition: 0.3s;
    }

    /* ========== HERO ========== */
    .hero {
      position: relative;
      background: linear-gradient(135deg, #0a4d8c 0%, #063a6b 50%, #0c2d4a 100%);
      color: white;
      padding: 100px 0 120px;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      opacity: 0.6;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 700px;
    }

    .hero-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 500;
      margin-bottom: 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .hero h1 {
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 18px;
      letter-spacing: -0.02em;
    }

    .hero p {
      font-size: 1.2rem;
      opacity: 0.9;
      margin-bottom: 32px;
      max-width: 540px;
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.25s ease;
      cursor: pointer;
      border: none;
    }

    .btn-primary {
      background: #ffffff;
      color: #0a4d8c;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.5);
    }

    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: white;
    }

    /* ========== TRUST BAR ========== */
    .trust-bar {
      background: #0f172a;
      padding: 28px 0;
      border-bottom: 1px solid rgba(30, 144, 255, 0.1);
    }

    .trust-items {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 40px;
      text-align: center;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      color: var(--gray);
      font-size: 0.95rem;
    }

    .trust-item svg {
      width: 22px;
      height: 22px;
      color: var(--primary);
      flex-shrink: 0;
    }

    /* ========== SECTIONS ========== */
    section {
      padding: 90px 0;
    }

    .section-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 50px;
    }

    .section-header .label {
      display: inline-block;
      color: var(--primary);
      font-weight: 600;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .section-header h2 {
      font-size: clamp(1.9rem, 4vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
      color: #f1f5f9;
    }

    .section-header p {
      color: var(--gray);
      font-size: 1.1rem;
    }

    /* ========== ABOUT ========== */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .about-content h3 {
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--primary);
    }

    .about-content p {
      color: var(--gray);
      margin-bottom: 18px;
      font-size: 1.05rem;
    }

    .about-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 28px;
    }

    .feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: var(--card);
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--card-border);
    }

    .feature svg {
      width: 24px;
      height: 24px;
      color: var(--primary);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature span {
      font-weight: 600;
      font-size: 0.95rem;
      color: #e2e8f0;
    }

    .about-image {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .about-image img {
      border-radius: 12px;
      width: 100%;
      max-width: 420px;
      filter: drop-shadow(0 12px 30px rgba(10, 77, 140, 0.18));
    }

    .about-badge {
      position: absolute;
      bottom: -20px;
      left: 30px;
      background: white;
      padding: 18px 24px;
      border-radius: 12px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .about-badge strong {
      font-size: 1.6rem;
      color: var(--primary);
      display: block;
      line-height: 1;
    }

    .about-badge span {
      font-size: 0.85rem;
      color: var(--gray);
    }

    /* ========== SERVICES ========== */
    .services {
      background: #0f172a;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .service-card {
      background: var(--card);
      border-radius: 16px;
      padding: 32px 28px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      transition: transform 0.25s, box-shadow 0.25s;
      border: 1px solid var(--card-border);
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(10, 77, 140, 0.12);
    }

    .service-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .service-icon svg {
      width: 28px;
      height: 28px;
      color: white;
    }

    .service-card h3 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: #f1f5f9;
    }

    .service-card p {
      color: var(--gray);
      font-size: 0.98rem;
    }

    /* ========== GALLERY ========== */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .gallery-item {
      background: var(--card);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--card-border);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .gallery-item:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(30, 144, 255, 0.15);
    }

    .gallery-visual {
      height: 180px;
      background: linear-gradient(160deg, #1a2744 0%, #0f1a2e 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 0;
      position: relative;
      overflow: hidden;
    }

    .gallery-visual svg {
      width: 140px;
      height: auto;
      display: block;
    }

    .gallery-info {
      padding: 20px 22px 24px;
      text-align: center;
      border-top: 1px solid rgba(30, 144, 255, 0.1);
    }

    .gallery-info h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #f1f5f9;
      margin-bottom: 6px;
    }

    .gallery-info p {
      font-size: 0.9rem;
      color: var(--gray);
      margin: 0;
    }

    .gallery-item img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
    }

    .gallery-note {
      text-align: center;
      margin-top: 40px;
      color: var(--gray);
      font-size: 0.95rem;
    }

    .gallery-note a {
      color: var(--primary);
      font-weight: 600;
    }

    .gallery-note a:hover {
      text-decoration: underline;
    }

    @media (max-width: 900px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ========== REVIEWS ========== */
    .reviews {
      background: #0f172a;
      padding: 90px 0;
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }

    .review-card {
      background: var(--card);
      border-radius: 16px;
      padding: 28px 26px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--card-border);
      display: flex;
      flex-direction: column;
    }

    .review-stars {
      color: #f59e0b;
      font-size: 1.15rem;
      letter-spacing: 2px;
      margin-bottom: 14px;
    }

    .review-card blockquote {
      font-size: 1.05rem;
      color: #e2e8f0;
      line-height: 1.6;
      flex-grow: 1;
      margin-bottom: 18px;
      font-style: italic;
    }

    .review-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    .review-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .review-author strong {
      display: block;
      font-size: 0.95rem;
      color: #f1f5f9;
    }

    .review-author span {
      font-size: 0.85rem;
      color: var(--gray);
    }

    .reviews-cta {
      text-align: center;
      background: var(--card);
      border-radius: 16px;
      padding: 32px 28px;
      border: 1px solid var(--card-border);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    .reviews-cta p {
      color: var(--gray);
      margin-bottom: 18px;
      font-size: 1.05rem;
    }

    .reviews-cta .btn-facebook {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #1877f2;
      color: white;
      padding: 14px 28px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .reviews-cta .btn-facebook:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35);
    }

    .reviews-cta .btn-facebook svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    /* ========== CTA BANNER ========== */
    .cta-banner {
      background: var(--dark);
      color: white;
      padding: 70px 0;
      text-align: center;
    }

    .cta-banner h2 {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .cta-banner p {
      opacity: 0.85;
      margin-bottom: 28px;
      font-size: 1.1rem;
    }

    /* ========== CONTACT ========== */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 50px;
      align-items: start;
    }

    .contact-info h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: #f1f5f9;
    }

    .contact-info p {
      color: var(--gray);
      margin-bottom: 28px;
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .contact-item svg {
      width: 22px;
      height: 22px;
      color: var(--primary);
      flex-shrink: 0;
    }

    .contact-item a {
      color: var(--primary);
      font-weight: 600;
    }

    .contact-item a:hover {
      text-decoration: underline;
    }

    .contact-form {
      background: var(--card);
      padding: 36px;
      border-radius: 16px;
      box-shadow: var(--shadow);
      border: 1px solid var(--card-border);
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-weight: 500;
      font-size: 0.9rem;
      margin-bottom: 6px;
      color: #e2e8f0;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid rgba(30, 144, 255, 0.2);
      border-radius: 10px;
      font-family: inherit;
      font-size: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: #0f172a;
      color: #e2e8f0;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.2);
      background: #111827;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 110px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .submit-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: white;
      padding: 15px;
      border: none;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1.05rem;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-top: 8px;
    }

    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(10, 77, 140, 0.35);
    }

    /* ========== FOOTER ========== */
    footer {
      background: #0b1424;
      color: rgba(255, 255, 255, 0.8);
      padding: 50px 0 30px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-brand img {
      height: 70px;
      margin-bottom: 16px;
      filter: brightness(1.1);
    }

    .footer-brand p {
      font-size: 0.95rem;
      max-width: 300px;
      line-height: 1.6;
    }

    .footer-col h4 {
      color: white;
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 10px;
    }

    .footer-col a {
      color: rgba(255, 255, 255, 0.7);
      transition: color 0.2s;
    }

    .footer-col a:hover {
      color: white;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 24px;
      font-size: 0.9rem;
      text-align: left;
    }

    /* ========== MOBILE ========== */
    @media (max-width: 900px) {
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .about-image {
        order: -1;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }

    @media (max-width: 768px) {
      .nav-links {
        position: fixed;
        top: 88px;
        left: 0;
        right: 0;
        background: #0f172a;
        flex-direction: column;
        padding: 24px;
        gap: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        transform: translateY(-120%);
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
      }

      .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .menu-toggle {
        display: block;
      }

      .phone-btn {
        display: none;
      }

      .hero {
        padding: 70px 0 90px;
      }

      .hero-ctas {
        flex-direction: column;
      }

      .btn {
        width: 100%;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .trust-items {
        gap: 20px;
      }

      .about-features {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .logo img {
        height: 48px;
      }

      .nav {
        height: 70px;
      }

      section {
        padding: 60px 0;
      }
    }

    /* ========== ADVANCED EFFECTS ========== */
    /* Scroll reveal */
    /* Fail-safe reveal: content is visible by default; it only animates once JS adds .sr-anim to <html>. */
    .reveal { opacity: 1; transform: none; }
    .sr-anim .reveal:not(.visible) { opacity: 0; transform: translateY(40px); }
    .sr-anim .reveal { transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
    @media print { .sr-anim .reveal:not(.visible) { opacity: 1 !important; transform: none !important; } }
    .reveal-delay-1 { transition-delay: 0.08s; }
    .reveal-delay-2 { transition-delay: 0.16s; }
    .reveal-delay-3 { transition-delay: 0.24s; }
    .reveal-delay-4 { transition-delay: 0.32s; }
    .reveal-delay-5 { transition-delay: 0.40s; }
    .reveal-delay-6 { transition-delay: 0.48s; }

    /* Hero entrance + glow */
    .hero-content {
      animation: heroIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes heroIn {
      from { opacity: 0; transform: translateY(32px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .hero::after {
      content: '';
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(30, 144, 255, 0.22) 0%, transparent 70%);
      top: -140px;
      right: -120px;
      animation: floatBlob 14s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    .hero::before {
      content: '';
      position: absolute;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(10, 77, 140, 0.25) 0%, transparent 70%);
      bottom: -80px;
      left: -60px;
      animation: floatBlob 18s ease-in-out infinite reverse;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes floatBlob {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-50px, 35px) scale(1.1); }
    }

    /* 3D tilt cards */
    .tilt-card {
      transform-style: preserve-3d;
      transition: transform 0.25s ease, box-shadow 0.35s ease;
    }
    .service-card, .gallery-item, .review-card {
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    }
    .service-card:hover, .gallery-item:hover, .review-card:hover {
      box-shadow: 0 20px 45px rgba(10, 77, 140, 0.18);
    }

    /* Shine sweep on primary buttons */
    .btn-primary, .submit-btn, .phone-btn {
      position: relative;
      overflow: hidden;
    }
    .btn-primary::after, .submit-btn::after, .phone-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
      transform: skewX(-20deg);
      transition: none;
      pointer-events: none;
    }
    .btn-primary:hover::after, .submit-btn:hover::after, .phone-btn:hover::after {
      animation: shineSweep 0.7s ease;
    }
    @keyframes shineSweep {
      0% { left: -100%; }
      100% { left: 150%; }
    }

    /* Soft pulse */
    .btn-primary {
      animation: softPulse 3.5s ease-in-out infinite;
    }
    @keyframes softPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
      50% { box-shadow: 0 8px 32px rgba(255, 255, 255, 0.4); }
    }

    /* Button press */
    .btn, .phone-btn, .submit-btn, .btn-facebook {
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .btn:active, .phone-btn:active, .submit-btn:active, .btn-facebook:active {
      transform: scale(0.96);
    }

    /* Trust items */
    .trust-item {
      transition: transform 0.3s ease, color 0.3s ease;
    }
    .trust-item:hover {
      transform: translateY(-4px);
      color: var(--primary);
    }

    /* Logo subtle float */
    .logo img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .logo:hover img {
      transform: scale(1.05);
      filter: drop-shadow(0 4px 12px rgba(10, 77, 140, 0.25));
    }

    /* About logo glow */
    .about-image img {
      transition: transform 0.5s ease, filter 0.5s ease;
    }
    .about-image:hover img {
      transform: scale(1.03);
      filter: drop-shadow(0 12px 28px rgba(10, 77, 140, 0.2));
    }

    /* Gradient text on section labels */
    .section-header .label {
      background: linear-gradient(90deg, var(--primary), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Smooth underline grow on nav */
    .nav-links a::after {
      transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Form focus glow already exists; enhance success */
    .form-success {
      animation: successPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes successPop {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Floating call button (mobile) */
    .float-call {
      display: none;
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 999;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: white;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 28px rgba(10, 77, 140, 0.4);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      animation: floatCall 2.5s ease-in-out infinite;
    }
    .float-call:hover {
      transform: scale(1.1);
      box-shadow: 0 12px 36px rgba(10, 77, 140, 0.5);
    }
    .float-call svg {
      width: 26px;
      height: 26px;
    }
    @keyframes floatCall {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    @media (max-width: 768px) {
      .float-call { display: flex; }
    }

    /* Header glass intensify on scroll */
    header.scrolled {
      background: rgba(11, 18, 32, 0.95);
      backdrop-filter: blur(16px);
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .reveal, .hero-content, .hero::after, .hero::before,
      .btn-primary, .float-call, .logo img, .about-image img {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .btn-primary::after, .submit-btn::after, .phone-btn::after {
        display: none;
      }
    }
  
/* Contrast correction: estimate CTA must remain legible in dark theme. */
.cta-banner { background: linear-gradient(135deg,#0b1b31 0%,#12375c 100%) !important; color:#ffffff !important; }
.cta-banner h2 { color:#ffffff !important; }
.cta-banner p { color:#e2ecf8 !important; opacity:1 !important; }
.cta-banner .btn-primary { background:#228ee8 !important; color:#ffffff !important; }
.cta-banner .btn-outline, .cta-banner .btn-secondary { color:#ffffff !important; border-color:rgba(255,255,255,.85) !important; background:transparent !important; }
.cta-banner .btn-outline:hover, .cta-banner .btn-secondary:hover { background:rgba(255,255,255,.14) !important; }

/* 2026 visual refresh — cohesive, responsive, accessible */
:root{--primary:#42a5ff;--primary-dark:#1779cc;--accent:#64b5ff;--dark:#edf5ff;--gray:#a5b5c9;--light:#111c2c;--white:#091321;--card:#132238;--card-border:rgba(117,178,240,.2);--radius:18px}
body{background:#091321;color:#edf5ff}
.container{max-width:1220px}
header{background:rgba(8,19,34,.94);border-bottom:1px solid rgba(255,255,255,.09)}
.hero{position:relative;background:linear-gradient(90deg,rgba(5,16,30,.95) 0%,rgba(5,16,30,.84) 48%,rgba(5,16,30,.37) 100%),var(--hero-bg,url('assets/images/project-01.jpg')) center 50%/cover no-repeat!important;min-height:640px;display:flex;align-items:center}
.hero .container{position:relative;z-index:1}.hero-content{max-width:760px}.hero h1{font-size:clamp(2.9rem,5.6vw,5.8rem);letter-spacing:-.055em;line-height:1.07}.hero p{font-size:clamp(1.05rem,1.65vw,1.3rem);max-width:630px;color:#e0e9f5}
.hero-badge{letter-spacing:.11em;font-size:.78rem;font-weight:800}
.btn,.phone-btn,.submit-btn{border-radius:12px!important;font-weight:750}
.btn-primary,.submit-btn{background:#228ee8!important;color:#fff!important}
section{scroll-margin-top:95px}.section-header h2{letter-spacing:-.035em}.service-card,.review-card,.contact-form,.gallery-photo{border-radius:18px!important}
.gallery-photo{aspect-ratio:5/4}.gallery-photo img{filter:saturate(1.05)}.gallery-zoom{opacity:1;background:linear-gradient(transparent,rgba(0,0,0,.75))}
:focus-visible{outline:3px solid #81c8ff!important;outline-offset:3px}
@media(max-width:768px){.hero{min-height:590px;background-position:center,right 40% center!important}.hero h1{font-size:clamp(2.65rem,10vw,4rem)}.hero-content{padding:30px 0}.hero-ctas{gap:12px}.hero-ctas .btn{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

  

.gallery-photo-grid{gap:18px}.gallery-photo{position:relative;display:block;width:100%;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;cursor:pointer;background:#17243a;aspect-ratio:4/3;box-shadow:0 5px 20px rgba(0,0,0,.18)}.gallery-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.gallery-photo:hover img,.gallery-photo:focus-visible img{transform:scale(1.06)}.gallery-photo:focus-visible{outline:3px solid #55aaff;outline-offset:3px}.gallery-zoom{position:absolute;bottom:0;left:0;right:0;padding:14px;color:white;font-weight:600;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .2s}.gallery-photo:hover .gallery-zoom,.gallery-photo:focus-visible .gallery-zoom{opacity:1}.gallery-lightbox{position:fixed;inset:0;background:rgba(3,8,17,.96);z-index:99999;display:none;align-items:center;justify-content:space-between;gap:8px;padding:65px 12px 30px}.gallery-lightbox.is-open{display:flex}.gallery-lightbox figure{margin:0;min-width:0;flex:1;text-align:center}.gallery-lightbox figure img{display:block;max-width:100%;max-height:calc(100dvh - 135px);width:auto;height:auto;object-fit:contain;margin:auto;border-radius:5px}.gallery-lightbox #galleryCounter{display:block;color:#eee;padding:10px;font-size:14px}.gallery-lightbox button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:46px;height:46px;font-size:34px;cursor:pointer;flex-shrink:0;line-height:1}.gallery-lightbox button:hover,.gallery-lightbox button:focus-visible{background:rgba(255,255,255,.3)}.gallery-lightbox .gallery-close{position:absolute;right:18px;top:14px;font-size:30px}@media(max-width:560px){.gallery-lightbox{padding:70px 6px 20px}.gallery-lightbox button{width:34px;height:42px;border-radius:8px;font-size:28px}.gallery-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-zoom{opacity:1;font-size:12px;padding:8px}}


.cta-banner{background:linear-gradient(135deg,#0b1b31,#12375c)!important;color:#fff!important}
.cta-banner h2,.cta-banner h3{color:#fff!important}.cta-banner p{color:#e2ecf8!important;opacity:1!important}
.cta-banner .btn-primary{background:#228ee8!important;color:#fff!important}
.cta-banner .btn-outline,.cta-banner .btn-secondary{background:transparent!important;color:#fff!important;border-color:#e2ecf8!important}
footer{background:#0b1424!important;color:#e2e8f0!important}
footer p,footer li,footer a,footer span,footer .footer-brand p,footer .footer-bottom{color:#e2e8f0!important}
footer h2,footer h3,footer h4,footer .footer-col h4{color:#fff!important}
footer a:hover,footer a:focus-visible{color:#64b5ff!important}


#gallery{background:linear-gradient(180deg,#0b1424 0%,#101e32 100%);padding:90px 0}
#gallery .section-header{max-width:740px;margin:0 auto 42px;text-align:center}
#gallery .section-header h2{font-size:clamp(2rem,4vw,3rem);color:#fff}
#gallery .section-header p{color:#c6d4e6;line-height:1.7}
#gallery .gallery-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#gallery .gallery-photo{aspect-ratio:4/3;border-radius:18px;border:1px solid rgba(132,180,229,.22);box-shadow:0 12px 30px rgba(0,0,0,.23);transition:transform .25s,border-color .25s,box-shadow .25s}
#gallery .gallery-photo:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:360px}
#gallery .gallery-photo:nth-child(6),#gallery .gallery-photo:nth-child(11){grid-column:span 2;aspect-ratio:2/1}
#gallery .gallery-photo:hover{transform:translateY(-3px);border-color:#55aaff;box-shadow:0 18px 40px rgba(0,0,0,.36)}
#gallery .gallery-zoom{opacity:1;padding:28px 14px 14px;font-size:.88rem;letter-spacing:.01em;background:linear-gradient(transparent,rgba(4,10,20,.78))}
#gallery .gallery-photo img{transition:transform .45s ease}
#gallery .gallery-cta{text-align:center;margin-top:34px}
#gallery .gallery-cta p{color:#c6d4e6;margin-bottom:16px}
@media(max-width:850px){#gallery .gallery-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#gallery .gallery-photo:nth-child(1){min-height:300px}#gallery .gallery-photo:nth-child(6),#gallery .gallery-photo:nth-child(11){grid-column:span 1;aspect-ratio:4/3}}
@media(max-width:560px){#gallery{padding:62px 0}#gallery .gallery-photo-grid{gap:9px}#gallery .gallery-photo{border-radius:11px}#gallery .gallery-photo:nth-child(1){grid-column:span 2;grid-row:span 1;aspect-ratio:16/10;min-height:0}#gallery .gallery-zoom{font-size:11px;padding:18px 8px 8px}}


.roof-animation-wrap{max-width:880px;margin:0 auto 38px;padding:22px 24px;background:linear-gradient(115deg,#13233b,#0d192d);border:1px solid rgba(102,172,239,.22);border-radius:20px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.2fr);align-items:center;gap:24px;overflow:hidden}
.roof-animation-copy .label{display:block;color:#68b7ff;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.roof-animation-copy h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0 0 8px}
.roof-animation-copy p{color:#c8d7e9;line-height:1.6;margin:0;font-size:.94rem}
.roof-scene{width:100%;height:auto;max-height:210px;overflow:visible}
.roof-new-shingle{opacity:0;animation:roofInstall 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.roof-new-shingle:nth-of-type(2){animation-delay:.4s}.roof-new-shingle:nth-of-type(3){animation-delay:.8s}.roof-new-shingle:nth-of-type(4){animation-delay:1.2s}.roof-new-shingle:nth-of-type(5){animation-delay:1.6s}
.roof-damage{animation:roofDamage 7s ease-in-out infinite}.roof-sparkle{opacity:0;animation:roofSparkle 7s ease-in-out infinite}
@keyframes roofInstall{0%,12%{opacity:0;transform:translateY(-24px) rotate(-4deg)}24%,78%{opacity:1;transform:translateY(0) rotate(0)}93%,100%{opacity:0;transform:translateY(0)}}
@keyframes roofDamage{0%,15%{opacity:1}33%,80%{opacity:0}92%,100%{opacity:1}}
@keyframes roofSparkle{0%,37%,70%,100%{opacity:0;transform:scale(.7)}47%,61%{opacity:1;transform:scale(1)}}
@media(max-width:700px){.roof-animation-wrap{grid-template-columns:1fr;padding:22px;gap:12px}.roof-scene{max-height:190px}}
@media(prefers-reduced-motion:reduce){.roof-new-shingle{animation:none;opacity:1;transform:none}.roof-damage{animation:none;opacity:0}.roof-sparkle{animation:none;opacity:1}}


.roof-worker{animation:rooferClimb 9s ease-in-out infinite;transform:translate(136px,198px)}
.roof-row{opacity:0;transform:translateX(-14px);animation:layRoofRow 9s ease-in-out infinite}
.roof-row-one{animation-delay:0s}.roof-row-two{animation-delay:0s}.roof-row-three{animation-delay:0s}.roof-row-four{animation-delay:0s}
.roof-repair-rows .roof-row-one{animation-name:layRoofOne}.roof-repair-rows .roof-row-two{animation-name:layRoofTwo}.roof-repair-rows .roof-row-three{animation-name:layRoofThree}.roof-repair-rows .roof-row-four{animation-name:layRoofFour}
@keyframes rooferClimb{0%,8%{transform:translate(136px,198px)}30%{transform:translate(163px,108px)}42%{transform:translate(190px,101px)}56%{transform:translate(239px,92px)}72%{transform:translate(283px,95px)}85%,100%{transform:translate(136px,198px)}}
@keyframes layRoofOne{0%,33%{opacity:0;transform:translateX(-14px)}42%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@keyframes layRoofTwo{0%,43%{opacity:0;transform:translateX(-14px)}52%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@keyframes layRoofThree{0%,54%{opacity:0;transform:translateX(-14px)}63%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@keyframes layRoofFour{0%,65%{opacity:0;transform:translateX(-14px)}74%,90%{opacity:1;transform:translateX(0)}100%{opacity:0}}
.roof-sparkle{animation:roofWorkerSparkle 9s ease-in-out infinite}
@keyframes roofWorkerSparkle{0%,73%,96%,100%{opacity:0;transform:scale(.75);transform-origin:343px 55px}80%,90%{opacity:1;transform:scale(1);transform-origin:343px 55px}}
@media(prefers-reduced-motion:reduce){.roof-worker{animation:none;transform:translate(220px,96px)}.roof-row{animation:none;opacity:1;transform:none}.roof-sparkle{animation:none;opacity:1}}


#roof-repair-animation .rr-clouds{animation:rrClouds 14s ease-in-out infinite}
#roof-repair-animation .rr-rain{animation:rrStorm 14s linear infinite}
#roof-repair-animation .rr-wind{animation:rrStorm 14s linear infinite}
#roof-repair-animation .rr-blown{animation:rrBlow 14s ease-in-out infinite;transform-origin:250px 105px}
#roof-repair-animation .rr-damage{animation:rrDamage 14s linear infinite}
#roof-repair-animation .rr-worker{animation:rrClimbFix 14s ease-in-out infinite}
#roof-repair-animation .rr-course{opacity:0;transform:translateY(-8px)}
#roof-repair-animation .rr-course-1{animation:rrLay1 14s ease-in-out infinite}
#roof-repair-animation .rr-course-2{animation:rrLay2 14s ease-in-out infinite}
#roof-repair-animation .rr-course-3{animation:rrLay3 14s ease-in-out infinite}
#roof-repair-animation .rr-course-4{animation:rrLay4 14s ease-in-out infinite}
#roof-repair-animation .rr-course-5{animation:rrLay5 14s ease-in-out infinite}
#roof-repair-animation .rr-done{animation:rrComplete 14s ease-in-out infinite;transform-origin:432px 53px}
@keyframes rrClouds{0%,35%{opacity:1;transform:translateX(-14px)}50%,90%{opacity:.2;transform:translateX(22px)}100%{opacity:1;transform:translateX(-14px)}}
@keyframes rrStorm{0%,7%,38%,100%{opacity:0}12%,31%{opacity:1}}
@keyframes rrBlow{0%,13%{opacity:0;transform:translate(0,0) rotate(0)}18%{opacity:1}31%,100%{opacity:0;transform:translate(145px,-65px) rotate(44deg)}}
@keyframes rrDamage{0%,10%{opacity:0}19%,52%{opacity:1}77%,100%{opacity:0}}
@keyframes rrClimbFix{0%,34%{opacity:0;transform:translate(134px,221px)}36%{opacity:1;transform:translate(134px,221px)}48%{opacity:1;transform:translate(180px,114px)}56%{transform:translate(220px,109px)}66%{transform:translate(275px,102px)}76%{transform:translate(307px,89px)}84%{opacity:1;transform:translate(160px,175px)}88%,100%{opacity:0;transform:translate(134px,221px)}}
@keyframes rrLay1{0%,51%{opacity:0;transform:translateY(-8px)}56%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes rrLay2{0%,58%{opacity:0;transform:translateY(-8px)}63%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes rrLay3{0%,65%{opacity:0;transform:translateY(-8px)}70%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes rrLay4{0%,72%{opacity:0;transform:translateY(-8px)}77%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes rrLay5{0%,79%{opacity:0;transform:translateY(-8px)}84%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes rrComplete{0%,83%,98%,100%{opacity:0;transform:scale(.7)}87%,95%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#roof-repair-animation .rr-clouds,#roof-repair-animation .rr-rain,#roof-repair-animation .rr-wind,#roof-repair-animation .rr-blown,#roof-repair-animation .rr-damage,#roof-repair-animation .rr-worker,#roof-repair-animation .rr-course,#roof-repair-animation .rr-done{animation:none!important}#roof-repair-animation .rr-rain,#roof-repair-animation .rr-wind,#roof-repair-animation .rr-blown,#roof-repair-animation .rr-damage{opacity:0}#roof-repair-animation .rr-course,#roof-repair-animation .rr-done{opacity:1;transform:none}#roof-repair-animation .rr-worker{opacity:1;transform:translate(230px,110px)}}

#roof-repair-animation{min-height:335px!important;grid-template-columns:minmax(200px,1fr) minmax(360px,1.45fr)!important;align-items:center!important;overflow:visible!important}#roof-repair-animation .roof-scene{width:100%!important;max-height:none!important;height:auto!important;min-height:260px!important;overflow:visible!important;display:block!important}#roof-repair-animation .rr-high-visibility-features{opacity:1!important;visibility:visible!important}@media(max-width:850px){#roof-repair-animation{grid-template-columns:1fr!important}#roof-repair-animation .roof-scene{min-height:0!important;max-width:600px;margin:0 auto}}
#roof-repair-animation{overflow:visible!important;grid-template-columns:minmax(190px,1fr) minmax(380px,1.5fr)!important}#roof-repair-animation .roof-scene{display:block!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:500/270!important;overflow:visible!important}#roof-repair-animation #rr-house-facade{visibility:visible!important;opacity:1!important}@media(max-width:850px){#roof-repair-animation{grid-template-columns:1fr!important}#roof-repair-animation .roof-scene{width:100%!important;max-width:640px!important;margin:auto!important}}
#roof-repair-animation .rr-sun{opacity:0;animation:rrSunRise 14s ease-in-out infinite}#roof-repair-animation .rr-garden{opacity:0;animation:rrGardenReveal 14s ease-in-out infinite}#roof-repair-animation .rr-flower{transform-box:fill-box;transform-origin:center bottom;animation:rrFlowerGrow 14s ease-in-out infinite}@keyframes rrSunRise{0%,79%{opacity:0;transform:translate(420px,80px) scale(.65)}86%,95%{opacity:1;transform:translate(420px,50px) scale(1)}100%{opacity:0;transform:translate(420px,50px) scale(1)}}@keyframes rrGardenReveal{0%,82%{opacity:0}87%,95%{opacity:1}100%{opacity:0}}@keyframes rrFlowerGrow{0%,82%{scale:1 .05}90%,95%{scale:1 1}100%{scale:1 .05}}@media(prefers-reduced-motion:reduce){#roof-repair-animation .rr-sun{animation:none!important;opacity:1!important;transform:translate(420px,50px)!important}#roof-repair-animation .rr-garden{animation:none!important;opacity:1!important}#roof-repair-animation .rr-flower{animation:none!important;scale:1 1!important}}
#roof-repair-animation .rr-ladder-removal{animation:rrRemoveLadder 14s ease-in-out infinite;transform-origin:140px 245px}@keyframes rrRemoveLadder{0%,79%{opacity:1;transform:translateX(0)}85%{opacity:1;transform:translateX(-20px)}89%,96%{opacity:0;transform:translateX(-155px)}100%{opacity:1;transform:translateX(0)}}@media(prefers-reduced-motion:reduce){#roof-repair-animation .rr-ladder-removal{animation:none!important;opacity:0!important}}
#roof-repair-animation #rr-ladder-foreground{animation:srLadderSequence 16s ease-in-out infinite!important;transform-origin:140px 245px!important}#roof-repair-animation .rr-worker{animation:srWorkerSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-clouds{animation:srCloudSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-rain,#roof-repair-animation .rr-wind{animation:srStormSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-blown{animation:srBlowSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-damage{animation:srDamageSequence 16s linear infinite!important}#roof-repair-animation .rr-course-1{animation:srCourse1 16s ease-in-out infinite!important}#roof-repair-animation .rr-course-2{animation:srCourse2 16s ease-in-out infinite!important}#roof-repair-animation .rr-course-3{animation:srCourse3 16s ease-in-out infinite!important}#roof-repair-animation .rr-course-4{animation:srCourse4 16s ease-in-out infinite!important}#roof-repair-animation .rr-course-5{animation:srCourse5 16s ease-in-out infinite!important}#roof-repair-animation .rr-sun{animation:srSunSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-garden{animation:srGardenSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-flower{animation:srFlowerSequence 16s ease-in-out infinite!important}#roof-repair-animation .rr-done{display:none!important}@keyframes srLadderSequence{0%,30%{opacity:0;transform:translateX(-130px)}36%,80%{opacity:1;transform:translateX(0)}84%{opacity:1;transform:translateX(-12px)}90%,100%{opacity:0;transform:translateX(-150px)}}@keyframes srWorkerSequence{0%,35%{opacity:0;transform:translate(134px,221px)}38%{opacity:1;transform:translate(134px,221px)}49%{opacity:1;transform:translate(180px,114px)}56%{transform:translate(218px,108px)}65%{transform:translate(272px,101px)}74%{transform:translate(304px,90px)}79%{opacity:1;transform:translate(180px,114px)}86%{opacity:1;transform:translate(134px,221px)}89%,100%{opacity:0;transform:translate(134px,221px)}}@keyframes srCloudSequence{0%,30%{opacity:1;transform:translateX(-14px)}48%,95%{opacity:.12;transform:translateX(26px)}100%{opacity:1;transform:translateX(-14px)}}@keyframes srStormSequence{0%,7%,34%,100%{opacity:0}12%,28%{opacity:1}}@keyframes srBlowSequence{0%,13%{opacity:0;transform:translate(0,0) rotate(0)}18%{opacity:1}31%,100%{opacity:0;transform:translate(145px,-65px) rotate(44deg)}}@keyframes srDamageSequence{0%,12%{opacity:0}20%,54%{opacity:1}83%,100%{opacity:0}}@keyframes srCourse1{0%,52%{opacity:0;transform:translateY(-8px)}57%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}@keyframes srCourse2{0%,58%{opacity:0;transform:translateY(-8px)}63%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}@keyframes srCourse3{0%,64%{opacity:0;transform:translateY(-8px)}69%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}@keyframes srCourse4{0%,70%{opacity:0;transform:translateY(-8px)}75%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}@keyframes srCourse5{0%,76%{opacity:0;transform:translateY(-8px)}81%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}@keyframes srSunSequence{0%,88%{opacity:0;transform:translate(420px,80px) scale(.65)}94%,98%{opacity:1;transform:translate(420px,50px) scale(1)}100%{opacity:0;transform:translate(420px,50px) scale(1)}}@keyframes srGardenSequence{0%,89%{opacity:0}94%,98%{opacity:1}100%{opacity:0}}@keyframes srFlowerSequence{0%,89%{scale:1 .05}95%,98%{scale:1 1}100%{scale:1 .05}}@media(prefers-reduced-motion:reduce){#roof-repair-animation #rr-ladder-foreground,#roof-repair-animation .rr-worker,#roof-repair-animation .rr-rain,#roof-repair-animation .rr-wind,#roof-repair-animation .rr-blown,#roof-repair-animation .rr-damage{animation:none!important;opacity:0!important}#roof-repair-animation .rr-course-1,#roof-repair-animation .rr-course-2,#roof-repair-animation .rr-course-3,#roof-repair-animation .rr-course-4,#roof-repair-animation .rr-course-5{animation:none!important;opacity:1!important;transform:none!important}#roof-repair-animation .rr-sun{animation:none!important;opacity:1!important;transform:translate(420px,50px)!important}#roof-repair-animation .rr-garden{animation:none!important;opacity:1!important}#roof-repair-animation .rr-flower{animation:none!important;scale:1 1!important}}
#roof-repair-animation #rr-ladder-foreground{animation:srLadderInstant 16s steps(1,end) infinite!important;transform:none!important;transition:none!important;opacity:0}@keyframes srLadderInstant{0%,35.99%{opacity:0;transform:none}36%,87.99%{opacity:1;transform:none}88%,100%{opacity:0;transform:none}}@media(prefers-reduced-motion:reduce){#roof-repair-animation #rr-ladder-foreground{animation:none!important;opacity:0!important}}
#roof-repair-animation #rr-ladder-foreground{opacity:0;visibility:hidden;animation:srLadderVisibility 16s linear infinite!important;transform:none!important;transition:none!important}@keyframes srLadderVisibility{0%,35.9%{opacity:0;visibility:hidden}36%,87.9%{opacity:1;visibility:visible}88%,100%{opacity:0;visibility:hidden}}@media(prefers-reduced-motion:reduce){#roof-repair-animation #rr-ladder-foreground{animation:none!important;opacity:0!important;visibility:hidden!important}}
/* ========== WordPress additions (multi-page) ========== */
.hero.hero-sub{min-height:440px;padding:80px 0}
.hero.hero-sub h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.sr-breadcrumbs{font-size:.85rem;color:#c3d3e6;margin-bottom:14px}
.sr-breadcrumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sr-prose{max-width:820px;margin:0 auto}
.sr-prose h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:#f1f5f9;margin:42px 0 14px}
.sr-prose h3{font-size:1.25rem;font-weight:700;color:var(--primary);margin:28px 0 10px}
.sr-prose p,.sr-prose li{color:var(--gray);font-size:1.06rem;margin-bottom:16px}
.sr-prose ul,.sr-prose ol{padding-left:22px;margin-bottom:18px}
.sr-prose a,.sr-link{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.sr-prose strong{color:#e2e8f0}
.sr-prose img{border-radius:18px;margin:24px 0}
.service-card a.card-link{display:inline-block;margin-top:14px;color:var(--primary);font-weight:700}
.service-card h3 a{color:inherit}
.sr-faq details{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 22px;margin-bottom:14px}
.sr-faq summary{cursor:pointer;font-weight:700;color:#f1f5f9;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.sr-faq summary::after{content:'+';color:var(--primary);font-size:1.4rem;line-height:1}
.sr-faq details[open] summary::after{content:'–'}
.sr-faq details p{margin:12px 0 0;color:var(--gray)}
.sr-alt{background:#0f172a}
.sr-two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.sr-two-col img{border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.sr-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;padding:0;list-style:none}
.sr-related li{margin:0}
.sr-related a{display:inline-block;padding:8px 16px;border:1px solid var(--card-border);border-radius:999px;color:#e2e8f0;text-decoration:none;font-size:.92rem;background:var(--card)}
.sr-related a:hover{border-color:var(--primary);color:var(--primary)}
.sr-notice{background:rgba(66,165,255,.08);border-left:4px solid var(--primary);padding:16px 20px;border-radius:10px;color:#c9d7ea;font-size:.95rem;margin:24px 0}
.sr-form-msg{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-weight:600}
.sr-form-msg.ok{background:rgba(77,166,108,.15);color:#9be3b3;border:1px solid #4da66c}
.sr-form-msg.err{background:rgba(255,99,99,.12);color:#ffb4b4;border:1px solid #ff6b6b}
.sr-hp{position:absolute!important;left:-9999px!important}
.wpcf7 input,.wpcf7 select,.wpcf7 textarea{width:100%}
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.footer-col ul{list-style:none}
@media(max-width:900px){.sr-two-col{grid-template-columns:1fr}}
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr!important}@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:560px){.footer-grid{grid-template-columns:1fr!important}}
/* Logo aspect-ratio safety (header + footer) */
.logo img,.footer-brand img{width:auto!important;max-width:100%;object-fit:contain;aspect-ratio:auto}
.footer-brand img{height:auto!important;max-height:90px;max-width:min(100px,100%)}
.footer-brand img{display:block}
.sr-prose .wp-block-image img{width:100%;max-height:480px;object-fit:cover}
.sr-weather{background:var(--card);border:1px solid var(--card-border);border-left:4px solid #42a5ff;border-radius:16px;padding:22px 24px;margin:28px 0}
.sr-weather-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sr-weather-head h3{margin:0!important;color:#f1f5f9!important;font-size:1.15rem}
.sr-weather-src{font-size:.78rem;color:#8ea2ba}
.sr-weather-now{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.sr-weather-now img{border-radius:10px;margin:0!important;flex-shrink:0}
.sr-weather-now strong{display:block;color:#e2e8f0}
.sr-weather-now span{display:block;font-size:.92rem;color:var(--gray)}
.sr-weather-alerts{list-style:none!important;padding:0!important;margin:0 0 14px}
.sr-weather-alerts li{background:rgba(255,170,0,.1);border:1px solid rgba(255,170,0,.45);color:#ffd88a!important;border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:.95rem}
.sr-weather-alerts strong{color:#ffc04d!important}
.sr-weather-ok{font-size:.92rem;margin-bottom:14px!important}
.sr-weather .btn{text-decoration:none!important;color:#fff!important}
.sr-prose .wp-block-image img{width:100%;max-height:480px;object-fit:cover}
.sr-storm-banner{background:linear-gradient(90deg,#3a2400,#5a3200);border-bottom:2px solid #ffb020;color:#fff3d6;padding:14px 0}
.sr-storm-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sr-storm-title{display:block;color:#ffc04d;font-size:1.02rem;margin-bottom:4px}
.sr-storm-banner ul{list-style:none;margin:0 0 4px;padding:0}
.sr-storm-banner li{font-size:.95rem;color:#fff3d6}
.sr-storm-banner small{color:#e8cf9c;font-size:.78rem}
.sr-storm-banner .btn{flex-shrink:0}
/* Small native-resolution photo strips (v1.0.6) – images are never upscaled beyond 206px */
.sr-thumbs-wrap{margin:26px 0}
.sr-thumbs-title{margin-bottom:12px!important;color:#e2e8f0}
.sr-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,206px));gap:16px;justify-content:start}
.sr-alt .sr-thumbs{justify-content:center}
.sr-thumb{margin:0;background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;max-width:206px}
.sr-thumb img{display:block;width:100%;max-width:206px;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0!important;border-radius:0!important}
.sr-prose .sr-thumb img{max-height:none}
.sr-thumb figcaption{font-size:.82rem;color:#c3d3e6;padding:8px 10px;line-height:1.35}
.sr-thumbs-note{font-size:.85rem!important;color:#8ea2ba!important;margin-top:10px!important}
@media(max-width:480px){.sr-thumbs{grid-template-columns:repeat(2,1fr)}}

/* v1.0.7 address row: City / State / ZIP */
.form-row:has(> .form-group:nth-child(3)) { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) { .form-row:has(> .form-group:nth-child(3)) { grid-template-columns: 1fr; } }

/* v1.0.9 self-hosted roof estimator */
.sr-est{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}.sr-est-panel{min-height:560px}/* fixed panel height; steps swap in place to limit CLS */
.sr-est h3{margin-top:0}
.sr-est-steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.sr-est-steps span{flex:1;min-width:90px;text-align:center;font-size:.8rem;font-weight:600;padding:6px 4px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--gray)}
.sr-est-steps span.on{background:var(--primary);color:#fff}
.sr-est .form-group.has-ac > input{display:none}
.sr-est gmp-place-autocomplete{width:100%;color-scheme:dark}
.sr-est-err{margin:10px 0;padding:10px 14px;border-radius:10px;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.4);color:#ffd2d2}
.sr-est-err.out{background:rgba(255,180,0,.1);border-color:rgba(255,180,0,.45);color:#ffe7b0}
.sr-est-spin{width:46px;height:46px;margin:20px auto 10px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--primary);animation:srspin 1s linear infinite}
.sr-est-step[data-s="3"]{text-align:center;padding:30px 0}
@keyframes srspin{to{transform:rotate(360deg)}}
.sr-est-addrline{color:var(--gray);margin:0 0 14px}
.sr-est-mock{color:#ffcf6b;font-style:normal;font-size:.85em}
.sr-est-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.sr-est-stats div{background:rgba(255,255,255,.04);border-radius:10px;padding:12px;text-align:center}
.sr-est-stats strong{display:block;font-size:1.5rem;color:var(--accent)}
.sr-est-stats span{font-size:.8rem;color:var(--gray)}
.sr-est-price{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;margin:8px 0;border-radius:10px;background:rgba(30,144,255,.1);border:1px solid rgba(30,144,255,.3)}
.sr-est-price strong{font-size:1.35rem;color:#fff}
.sr-est-note{font-size:.8rem;color:var(--gray)}
.sr-est-insure{font-size:.88rem;margin:12px 0 0;padding:12px 14px;border-radius:10px;background:rgba(34,142,232,.1);border:1px solid rgba(34,142,232,.35);color:var(--text,#edf5ff)}
.sr-est-insure a{color:var(--accent,#42a5ff);font-weight:600}
.sr-est-disclaimer{font-size:.88rem;padding:12px 14px;border-left:3px solid #ffcf6b;background:rgba(255,207,107,.08);border-radius:6px}
.sr-est-back{background:none;border:0;color:var(--accent);cursor:pointer;margin-top:10px;font:inherit;text-decoration:underline}
.sr-est .submit-btn{width:100%}
.sr-est-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sr-est-hint{font-size:.85rem;color:var(--gray);margin:10px 0 0;text-align:center;line-height:1.45}
.sr-est-privacy{font-size:.85rem;color:var(--gray);margin:4px 0 12px}
.sr-est-privacy-link{color:var(--accent,#42a5ff);text-decoration:underline}
.sr-est-for{color:var(--gray);margin:0 0 10px}
.sr-est-confirm{margin-top:14px;padding:14px;border-radius:10px;background:rgba(77,166,108,.12);border:1px solid rgba(77,166,108,.35)}
.sr-est-credit{margin:18px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.75rem;line-height:1.4;color:var(--gray);text-align:center;opacity:.85}
.sr-est-form.prefilled .form-row:has([name="your-zip"]),.sr-est-form.prefilled .form-group:has([name="street-address"]),.sr-est-form.prefilled .form-group:has([name="your-service"]),
.sr-est-form.prefilled .form-row:has([name="sr_zip"]),.sr-est-form.prefilled .form-group:has([name="sr_street"]),.sr-est-form.prefilled .form-group:has([name="sr_service"]){display:none}
@media(max-width:600px){.sr-est{padding:18px}.sr-est-stats strong{font-size:1.15rem}.sr-est-price{flex-direction:column;align-items:flex-start}}

.sr-notice-legal{border-left:4px solid #f59e0b;background:rgba(245,158,11,.1);padding:14px 16px;border-radius:10px;margin:16px 0;font-size:.95rem;line-height:1.5}

/* v1.0.10.9 estimator trust signals */
.sr-est-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:0 0 14px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:.8rem;line-height:1.35;color:var(--gray)}
.sr-est-trust a{color:inherit;text-decoration:none}
.sr-est-trust a:hover{color:var(--accent,#42a5ff)}
.sr-est-trust-google{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.sr-est-stars{color:#fbbc04;letter-spacing:1px;font-size:.85rem}
.sr-est-trust-sep{opacity:.5}
.sr-est-private{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:10px 0 0;font-size:.8rem;line-height:1.4;color:var(--gray);text-align:left}
.sr-est-private .sr-est-lock{flex:0 0 auto;margin-top:2px;opacity:.85}
.sr-est-nocall{margin:0 0 10px;font-size:.85rem;color:var(--gray)}
@media(max-width:600px){.sr-est-trust{flex-direction:column;gap:4px}.sr-est-trust-sep{display:none}}

/* v1.0.12.0: gallery service captions, FAQ topic headings, facts block */
.gallery-photo .gallery-cap{position:absolute;top:10px;left:10px;background:rgba(4,10,20,.78);color:#fff;font-size:.78rem;font-weight:600;padding:4px 9px;border-radius:999px;pointer-events:none}
.sr-faq-topic{margin:44px 0 16px;font-size:1.5rem;scroll-margin-top:96px}
.sr-faq-more{margin:4px 0 0;color:var(--gray)}
.sr-faq-more a,.section-header p a{color:var(--primary)}
.sr-facts{border-left:3px solid var(--primary);padding-left:14px}

/* v1.0.12.12: uniform gallery tiles (RJ) - same 4:3 tile everywhere on /gallery/, 3/2/1 columns */
#gallery .gallery-photo-grid,.sr-gallery-more .sr-thumbs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;justify-content:stretch!important}
#gallery .gallery-photo,#gallery .gallery-photo:nth-child(n){grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important;min-height:0!important}
.sr-gallery-more .sr-thumb{max-width:none!important;display:flex;flex-direction:column}
.sr-gallery-more .sr-thumb img{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover}
@media(max-width:1024px){#gallery .gallery-photo-grid,.sr-gallery-more .sr-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){#gallery .gallery-photo-grid,.sr-gallery-more .sr-thumbs{grid-template-columns:1fr!important;gap:12px!important}}

/* v1.0.12.12: plain gallery page header (no hero, no badge) */
.sr-gallery-page{padding:150px 0 70px}
.sr-gallery-head{background:none!important;border:0!important;box-shadow:none!important;text-align:center;max-width:760px;margin:18px auto 34px}
.sr-gallery-head h1{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;margin:0 0 14px;color:#fff}
.sr-gallery-head p{font-size:1.1rem;color:#c3d3e6;margin:0}
@media(max-width:600px){.sr-gallery-page{padding:110px 0 50px}}
.sr-gallery-head .sr-gallery-areas{font-size:.95rem;font-weight:600;color:#7cc0ff;margin:0 0 12px}

/* v1.0.12.12: small estimate button inside the cost FAQ answer (inside <details>, so hidden until opened) */
.sr-faq .sr-faq-cta{margin:14px 0 2px!important}
.sr-faq .sr-faq-btn{display:inline-block;padding:9px 18px!important;font-size:.92rem!important;border-radius:999px}

/* v1.0.12.18: siding repair photo grid - same uniform 4:3 tiles as /gallery/, 3/2/1 columns, opens in the shared lightbox */
.sr-siding-photos .gallery-photo-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.sr-siding-photos .gallery-photo,.sr-siding-photos .gallery-photo:nth-child(n){grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important;min-height:0!important}
@media(max-width:1024px){.sr-siding-photos .gallery-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.sr-siding-photos .gallery-photo-grid{grid-template-columns:1fr!important;gap:12px!important}}

/* v1.0.12.23: home hero tagline badge - drop the prefix on small screens so it stays short */
@media(max-width:600px){.hero-badge .sr-tag-pre{display:none}}

/* v1.0.12.26: mobile floating instant-estimate circle (stacked above the call circle) */
.float-call{bottom:calc(24px + env(safe-area-inset-bottom))}
/* same flat green as the header Instant Estimate button (critical.css .nav-cta-btn / .nav-cta-mobile: #4da66c, hover #3f8f5b) */
.float-call.float-estimate{bottom:calc(24px + 58px + 14px + env(safe-area-inset-bottom));background:#4da66c;box-shadow:0 8px 28px rgba(15,80,40,.45);animation-delay:-1.25s}
.float-call.float-estimate:hover{background:#3f8f5b;box-shadow:0 12px 36px rgba(15,80,40,.55)}
@media (max-width:768px){
  footer{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
  body.sr-lightbox-open .float-call,body:has(.gallery-lightbox.is-open) .float-call{display:none!important}
}
@media (prefers-reduced-motion: reduce){.float-call.float-estimate{animation:none!important}}

/* v1.0.12.32: static Google review cards */
.sr-rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 32px}
@media(max-width:900px){.sr-rv-grid{grid-template-columns:1fr}}
.sr-rv-card{gap:14px}
.sr-rv-stars{display:flex;gap:3px;color:#fbbc04}
.review-card .sr-rv-quote{margin:0;font-style:normal;font-size:1rem;flex-grow:1}
.sr-rv-quote p{margin:0}
.sr-rv-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0;font-size:.88rem;color:var(--gray)}
.sr-rv-meta strong{color:#f1f5f9;font-size:.95rem}
.sr-rv-topic{flex-basis:100%;font-size:.82rem}
.sr-rv-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:center}
.sr-rv-section .section-header p.sr-google-rating{margin-top:6px}
.sr-rv-single{margin:40px 0 0}
.sr-rv-label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin:0 0 10px}
.sr-rv-more{margin:14px 0 0}

/* v1.0.12.32: footer bottom, one divider, same on every page */
.footer-bottom p{margin:0}
footer .footer-bottom .footer-copy{font-size:.9rem;line-height:1.5}
footer .footer-bottom .footer-disclaimer{margin-top:6px;font-size:.78rem;line-height:1.5;color:#94a3b8!important;max-width:900px}
@media(max-width:768px){.footer-bottom{text-align:center;padding-bottom:calc(130px + env(safe-area-inset-bottom))}footer .footer-bottom .footer-disclaimer{margin:8px auto 0}}

/* v1.0.12.33: mobile floating buttons wait until the hero buttons have scrolled away */
@media(max-width:768px){.float-call{transition:opacity .25s ease,visibility .25s}html.sr-js body:not(.sr-past-hero) .float-call{opacity:0;visibility:hidden;pointer-events:none}}
/* v1.0.12.33: /reviews/ tighter gap between the summary card and "Latest Google Reviews" */
.sr-reviews-summary{padding-bottom:40px}.sr-reviews-summary .reviews-grid{margin-bottom:0}.sr-reviews-summary+.sr-reviews-embed,.sr-reviews-embed{padding-top:40px}
.sr-review-cta{margin-top:22px}.sr-prose .sr-review-cta a.btn{text-decoration:none;color:#fff}
/* v1.0.12.33: inner-page heroes without buttons (e.g. /reviews/) don't need the tall mobile hero */
@media(max-width:768px){.hero.hero-sub:not(:has(.hero-ctas)){min-height:0;padding:44px 0}.hero.hero-sub:not(:has(.hero-ctas)) .hero-content{padding:0}.hero.hero-sub:not(:has(.hero-ctas)) .hero-content>:last-child{margin-bottom:0}}

/* v1.0.12.38: gallery photo slider ([sr_photo_compare]). Fixed 4:3 box, CSS clip, native range input on top. */
.sr-compare{position:relative;max-width:1000px;margin:26px auto 34px;aspect-ratio:4/3;overflow:hidden;border-radius:18px;border:1px solid rgba(132,180,229,.22);box-shadow:0 12px 30px rgba(0,0,0,.23);background:#17243a;--pos:50%;user-select:none;-webkit-user-select:none}
.sr-compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.sr-compare-two{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.sr-compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.sr-compare-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%230b1630' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.sr-compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.sr-compare-range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100vh;cursor:ew-resize}
.sr-compare-range::-moz-range-thumb{width:48px;height:100vh;border:0;cursor:ew-resize}
.sr-compare:has(.sr-compare-range:focus-visible) .sr-compare-handle::after{outline:3px solid #55aaff;outline-offset:3px}
.sr-compare-tag{position:absolute;top:50%;transform:translateY(-50%);font:600 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#fff;background:rgba(4,10,20,.72);padding:5px 8px;border-radius:999px;white-space:nowrap}
.sr-compare-tag-one{right:32px}.sr-compare-tag-two{left:32px}
@media(max-width:560px){.sr-compare{margin:18px auto 24px;border-radius:11px}.sr-compare-handle::after{width:38px;height:38px;margin:-19px 0 0 -19px;background-size:19px}.sr-compare-tag{font-size:.66rem;padding:4px 7px}.sr-compare-tag-one{right:27px}.sr-compare-tag-two{left:27px}}
/* v1.0.12.38: gallery is 9 photos, so keep 3 columns (3x3, no ragged row) down to 601px; 1 column at 600px and below. */
@media(min-width:601px) and (max-width:1024px){#gallery .gallery-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}}