/* ============================================================
   NICHE-AWARE STYLESHEET — Home Services
   Generated: 2026-09-20 02:25:33
   ============================================================ */

:root {
    --primary:     #15803d;
    --secondary:   #14532d;
    --accent:      #f59e0b;
    --gold:        #D4AF37;
    --gold-secondary: #B8960C;
    --gold-text:   #7A5C00;
    --dark:        #0f172a;
    --text-dark:   #0f172a;
    --text-gray:   #64748b;
    --light-bg:    #f8fafc;
    --white:       #ffffff;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 25px rgba(0,0,0,0.1);
    --border-radius:   8px;
    --transition:      all 0.3s ease;
    --container-width: 1200px;
    --font-primary:    'Atkinson Hyperlegible', sans-serif;
    --font-secondary:  'Atkinson Hyperlegible', sans-serif;
    --hero-overlay:    rgba(15, 25, 40, 0.88);
    --sec0: #ffffff; --sec1: #ECF5EF; --sec2: #ffffff; --sec3: #ECF1EE;
}

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

body {
    font-family: var(--font-secondary);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--white);
}

h1, h2, h3 { font-family: var(--font-primary); }

#v360-wrapper .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ── SECTION ALTERNATING BACKGROUNDS ── */
#v360-wrapper .section:nth-child(4n+1) { background: var(--sec0); }
#v360-wrapper .section:nth-child(4n+2) { background: var(--sec1); }
#v360-wrapper .section:nth-child(4n+3) { background: var(--sec2); }
#v360-wrapper .section:nth-child(4n+4) { background: var(--sec3); }
#v360-wrapper .section { padding: 60px 0; position: relative; }

/* ── HERO ── */
#v360-wrapper .hero {
    position: relative;
    padding: 70px 0 90px;
    background-size: cover;
    background-position: center;
    color: white;
    min-height: 620px;
    display: flex;
    align-items: center;
}

#v360-wrapper .hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
}

#v360-wrapper .hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

#v360-wrapper .hero-title {
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#v360-wrapper .hero-sub {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 25px;
    color: rgba(255,255,255,0.92);
}

/* ══ HERO VARIANT: centered_cta (no form, big centered headline) ══ */
#v360-wrapper .hero.hv-centered_cta .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}
#v360-wrapper .hero.hv-centered_cta .text-col { width: 100%; }
#v360-wrapper .hero.hv-centered_cta .hero-gold-badge,
#v360-wrapper .hero.hv-overlay_band .hero-gold-badge { margin-left: auto; margin-right: auto; }
#v360-wrapper .hero.hv-centered_cta .hero-features,
#v360-wrapper .hero.hv-centered_cta .btn-group { justify-content: center; }

/* ══ HERO VARIANT: left_form_wide (text top, wide form band below) ══ */
#v360-wrapper .hero.hv-left_form_wide .hero-content {
    grid-template-columns: 1fr;
    gap: 30px;
}
#v360-wrapper .hero.hv-left_form_wide .form-col { width: 100%; }
#v360-wrapper .hero.hv-left_form_wide .glass-card {
    max-width: 100%;
}
#v360-wrapper .hero.hv-left_form_wide .glass-card form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}
#v360-wrapper .hero.hv-left_form_wide .glass-card form input,
#v360-wrapper .hero.hv-left_form_wide .glass-card form select,
#v360-wrapper .hero.hv-left_form_wide .glass-card form button {
    margin-bottom: 0;
}
#v360-wrapper .hero.hv-left_form_wide .glass-card h3 { grid-column: 1 / -1; text-align: left; }

/* ══ HERO VARIANT: overlay_band (centered text + slim band) ══ */
#v360-wrapper .hero.hv-overlay_band .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
}
#v360-wrapper .hero.hv-overlay_band .hero-features,
#v360-wrapper .hero.hv-overlay_band .btn-group { justify-content: center; }
#v360-wrapper .hero.hv-overlay_band .form-col { width: 100%; margin-top: 10px; }
#v360-wrapper .hero.hv-overlay_band .glass-card { max-width: 680px; margin: 0 auto; }

/* ── 🎨 DI HERO VARIANTS: trust_card_right / stats_hero / minimal_center / diagonal_split ── */
#v360-wrapper .hero.hv-trust_card_right .glass-card.trust-card { text-align: center; max-width: 340px; margin: 0 auto; }
#v360-wrapper .trust-card .tc-rating { font-size: 3.2rem; font-weight: 800; color: #FFD700; line-height: 1; font-family: var(--font-primary); }
#v360-wrapper .trust-card .tc-line { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.92); font-size: .9rem; margin: 7px 0; }
#v360-wrapper .trust-card .tc-call { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; padding: 13px; border-radius: 10px; font-weight: 800; text-decoration: none; margin-top: 14px; }
#v360-wrapper .trust-card .tc-wa { display: flex; align-items: center; justify-content: center; gap: 8px; background: #0F766E; color: #fff; padding: 11px; border-radius: 10px; font-weight: 700; text-decoration: none; margin-top: 8px; }

#v360-wrapper .hero.hv-stats_hero .hero-content { grid-template-columns: 1fr; gap: 26px; }
#v360-wrapper .hero-stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; }
#v360-wrapper .hsb-cell { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px 10px; text-align: center; }
#v360-wrapper .hsb-num { display: block; font-family: var(--font-primary); font-size: 1.6rem; font-weight: 800; color: #FFD700; }
#v360-wrapper .hsb-lbl { font-size: .78rem; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 768px) { #v360-wrapper .hero-stats-band { grid-template-columns: repeat(2, 1fr); } }

#v360-wrapper .hero.hv-minimal_center .hero-content { grid-template-columns: 1fr; text-align: center; max-width: 820px; margin: 0 auto; }
#v360-wrapper .hero.hv-minimal_center .hero-gold-badge,
#v360-wrapper .hero.hv-minimal_center .text-col > div:nth-of-type(2),
#v360-wrapper .hero.hv-minimal_center .text-col > div:nth-of-type(3) { display: none; }
#v360-wrapper .hero.hv-minimal_center .hero-title { font-size: 3.3rem; }
#v360-wrapper .hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
/* primary, not accent: --accent is a soft background wash in every niche
   profile (#FFF5F8, #E8F4FD, #F8FAFC...). Against the white label it scored
   1.0-1.8:1 in all 12 profiles sampled — WCAG AA wants 4.5 — so the main hero
   CTA was white text on near-white and read as an empty pill. --primary is
   what .btn-primary already uses and scores 4.2-17.9:1. */
#v360-wrapper .hero-cta-main { display: inline-flex; align-items: center; gap: 9px; background: var(--primary); color: #fff; padding: 15px 34px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; }
#v360-wrapper .hero-cta-sub { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 15px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; }

/* diagonal_split: asli tirchi line — heading TOP-LEFT, form BOTTOM-RIGHT,
   accent diagonal band overlay ke andar (hard-stop gradient = crisp line) */
#v360-wrapper .hero.hv-diagonal_split .hero-overlay {
    background: linear-gradient(115deg,
        rgba(15,23,42,.96) 0%, rgba(15,23,42,.93) 51.5%,
        var(--accent) 51.5%, var(--accent) 52.3%,
        rgba(15,23,42,.30) 52.3%, rgba(15,23,42,.12) 100%);
}
#v360-wrapper .hero.hv-diagonal_split { min-height: 680px; }
#v360-wrapper .hero.hv-diagonal_split .hero-content { align-items: stretch; }
#v360-wrapper .hero.hv-diagonal_split .text-col {
    max-width: 560px;
    align-self: flex-start;
    padding-bottom: 90px;
}
#v360-wrapper .hero.hv-diagonal_split .form-col {
    align-self: flex-end;
    margin-top: 110px;
}
#v360-wrapper .hero.hv-diagonal_split .glass-card {
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
#v360-wrapper .hero-cta-row.hero-cta-left { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 768px) {
    #v360-wrapper .hero.hv-diagonal_split .text-col { padding-bottom: 20px; }
    #v360-wrapper .hero.hv-diagonal_split .form-col { margin-top: 10px; }
    #v360-wrapper .hero.hv-diagonal_split .hero-overlay {
        background: linear-gradient(160deg, rgba(15,23,42,.95) 0%, rgba(15,23,42,.88) 100%);
    }
}

/* ── 🎈 DI FLOATING BADGE — transform-only float (GPU), absolute = zero CLS ── */
#v360-wrapper .form-col { position: relative; }
#v360-wrapper .di-float-badge {
    position: absolute; top: -18px; right: -10px; z-index: 5;
    background: linear-gradient(135deg, var(--accent), #15803d);
    color: #fff; border-radius: 14px; padding: 10px 16px; text-align: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    animation: di-float 4s ease-in-out infinite;
}
#v360-wrapper .di-float-badge .dfb-num { display: block; font-family: var(--font-primary); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
#v360-wrapper .di-float-badge .dfb-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; opacity: .92; white-space: nowrap; }
@keyframes di-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { #v360-wrapper .di-float-badge { animation: none; } }
@media (max-width: 768px) { #v360-wrapper .di-float-badge { right: 4px; top: -14px; } }

/* ── NICHE-SPECIFIC TRUST BADGE ── */
#v360-wrapper .hero-gold-badge {
    background: linear-gradient(135deg, var(--accent) 0%, #15803d 100%);
    color: white;
    padding: 8px 22px;
    border-radius: 30px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* ── NICHE-SPECIFIC BUTTONS ── */
#v360-wrapper .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--font-secondary);
    font-size: 1rem;
}

#v360-wrapper .btn-primary {
    background: #15803d;
    color: white;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

#v360-wrapper .btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

#v360-wrapper .btn-accent {
    background: #f59e0b;
    color: #15803d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* ── GLASS CARD (HERO FORM) ── */
#v360-wrapper .glass-card {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

#v360-wrapper .glass-card h3 {
    margin-bottom: 20px;
    color: white;
    font-size: 1.45rem;
    text-align: center;
    font-family: var(--font-primary);
}

#v360-wrapper .glass-card input,
#v360-wrapper .glass-card select {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.92);
    font-size: 0.97rem;
    color: var(--text-dark);
    font-family: var(--font-secondary);
}

#v360-wrapper .glass-card button {
    width: 100%;
    padding: 15px;
    background: #15803d;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-secondary);
}

#v360-wrapper .glass-card button:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

/* ── SERVICE CARDS (base — overridden by niche card style) ── */
#v360-wrapper .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

#v360-wrapper .service-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 3px solid #15803d;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

#v360-wrapper .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.11);
}

#v360-wrapper .service-card-img { height: 200px; overflow: hidden; }
#v360-wrapper .service-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 16/9;
    transition: transform 0.5s ease;
}
#v360-wrapper .zigzag-img-wrap { aspect-ratio: 4/3; min-height: unset; }
#v360-wrapper .service-card:hover img { transform: scale(1.05); }

#v360-wrapper .service-card-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#v360-wrapper .service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #15803d;
    font-family: var(--font-primary);
}

#v360-wrapper .service-card p, #v360-wrapper .v360-desc-text {
    color: var(--text-gray);
    margin-bottom: 18px;
    flex-grow: 1;
    font-size: 0.96rem;
    line-height: 1.65;
}

/* ══ CARD VARIANT: icon_left (no image, icon beside text — fast & clean) ══ */
#v360-wrapper .service-card.cv-icon_left {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 26px;
}
#v360-wrapper .service-card.cv-icon_left .cv-icon-box {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #15803d 100%);
    display: flex; align-items: center; justify-content: center;
    color: white;
}
#v360-wrapper .service-card.cv-icon_left .service-card-content { padding: 0; }

/* ══ CARD VARIANT: minimal_border (flat, thin border, premium) ══ */
#v360-wrapper .service-card.cv-minimal_border {
    box-shadow: none;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
#v360-wrapper .service-card.cv-minimal_border:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #15803d;
    transform: translateY(-4px);
}
#v360-wrapper .service-card.cv-minimal_border .service-card-img { height: 170px; }

/* ── INFOGRAPHIC / WHY CHOOSE US ── */

/* ── INFOGRAPHIC / WHY CHOOSE US ── */
#v360-wrapper .infographic-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
    margin-top: 40px;
}

#v360-wrapper .infographic-item {
    background: white;
    border-radius: 18px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s ease;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#v360-wrapper .infographic-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

#v360-wrapper .infographic-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #f59e0b 0%, #15803d 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem; color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#v360-wrapper .infographic-number {
    font-size: 2.5rem; font-weight: 800;
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    font-family: var(--font-primary);
}

#v360-wrapper .infographic-item h4 {
    margin: 10px 0 12px; color: var(--text-dark);
    font-size: 1.25rem; font-family: var(--font-primary);
}

/* ── ZIGZAG ── */
#v360-wrapper .zigzag-item {
    /* stretch, not center: a centred image column leaves dead space above and
       below itself whenever the text runs taller, which is what made the
       desktop row look broken. Stretching lets the image fill the row instead. */
    display: flex; align-items: stretch; gap: 50px; margin-bottom: 40px;
    padding: 28px 32px; border-radius: 16px;
    background: #15803d0d;
    border-left: 4px solid #15803d;
}
#v360-wrapper .zigzag-item.reverse {
    flex-direction: row-reverse;
    background: #14532d0d;
    border-left: none;
    border-right: 4px solid #14532d;
}
#v360-wrapper .zigzag-content, #v360-wrapper .zigzag-img-wrap { flex: 1; min-width: 0; }
/* with the row stretched, short copy would sit at the top of a tall row */
#v360-wrapper .zigzag-content { display: flex; flex-direction: column; justify-content: center; }
#v360-wrapper .zigzag-img-wrap { min-height: 320px; }
#v360-wrapper .zigzag-img-wrap .zigzag-img { height: 100%; width: 100%; object-fit: cover; }

/* ── ZIGZAG BULLETS: checkmark in primary color ── */
#v360-wrapper .zigzag-bullets { list-style: none; padding: 0; margin: 0 0 16px 0; }
#v360-wrapper .zigzag-bullets li {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 8px; font-size: 1rem;
    color: var(--text-dark); line-height: 1.6;
}
#v360-wrapper .zigzag-bullets li .zb-check {
    color: #15803d; font-weight: 700; font-size: 1rem;
    flex-shrink: 0; margin-top: 2px;
}
#v360-wrapper .zigzag-item.reverse .zigzag-bullets li .zb-check {
    color: #14532d;
}

#v360-wrapper .zigzag-img {
    width: 100%; border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    height: auto; min-height: 320px; max-height: 500px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
#v360-wrapper .zigzag-img-wrap {
    display: flex;
    align-items: stretch;
}
#v360-wrapper .zigzag-img:hover { transform: scale(1.02); }

/* ── 🎨 DI ZIGZAG SKINS — seed-picked looks (skin-0 = classic, koi rule nahi) ── */
#v360-wrapper .zz-skin-1 .zigzag-img-wrap { position: relative; }
#v360-wrapper .zz-skin-1 .zigzag-img-wrap::before {
    content: ''; position: absolute; top: 14px; right: -14px; bottom: -14px; left: 14px;
    border: 3px solid var(--accent); border-radius: 16px; z-index: 0;
}
#v360-wrapper .zz-skin-1 .zigzag-img { position: relative; z-index: 1; }
#v360-wrapper .zz-skin-1 .zigzag-item.reverse .zigzag-img-wrap::before {
    right: 14px; left: -14px;
}
/* The wrapper carries an inline overflow:hidden (for the hover zoom), which
   clips this offset frame down to a single stray vertical line beside a tall
   text column -- reported on the Lawton build. Frame off; image fills. */
#v360-wrapper .zz-skin-1 .zigzag-img-wrap::before { display: none !important; }
@media (min-width: 901px) {
    #v360-wrapper .zigzag-img-wrap .zigzag-img { aspect-ratio: auto !important; height: 100% !important; }
}

#v360-wrapper .zz-skin-2 .zigzag-content {
    background: white; border-radius: 16px; padding: 30px;
    box-shadow: 0 16px 40px rgba(15,23,42,.10);
    margin-left: -60px; position: relative; z-index: 2;
}
#v360-wrapper .zz-skin-2 .zigzag-item.reverse .zigzag-content { margin-left: 0; margin-right: -60px; }
@media (max-width: 900px) {
    #v360-wrapper .zz-skin-2 .zigzag-content,
    #v360-wrapper .zz-skin-2 .zigzag-item.reverse .zigzag-content { margin-left: 0; margin-right: 0; }
}

/* ── 🎨 DI GRID SKINS ── */
#v360-wrapper .gs-skin-1 .service-card { border-top: 4px solid var(--accent); border-radius: 0 0 14px 14px; }
#v360-wrapper .gs-skin-2 .service-card { border: none; box-shadow: 0 14px 34px rgba(15,23,42,.09); border-radius: 18px; }
#v360-wrapper .zigzag-content h3 {
    font-size: 1.9rem; margin-bottom: 20px;
    color: #15803d; font-family: var(--font-primary);
}

/* ── FAQ ── */
#v360-wrapper .faq-item {
    margin-bottom: 12px; background: white;
    border-radius: 12px; overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
}
#v360-wrapper .faq-question {
    padding: 22px 24px; cursor: pointer;
    font-weight: 600; display: flex;
    justify-content: space-between; align-items: center;
    background: #f8fafc; font-size: 1.05rem;
    font-family: var(--font-primary);
}
#v360-wrapper .faq-answer {
    padding: 0 24px 22px; display: none;
    color: var(--text-gray); border-top: 1px solid #f1f5f9;
    padding-top: 18px; line-height: 1.8;
}

/* ── REVIEWS ── */
#v360-wrapper .review-card {
    background: white; padding: 28px;
    border-radius: 14px; margin-bottom: 20px;
    border-left: 5px solid #15803d;
    box-shadow: var(--shadow-sm);
}

/* ── FOOTER ── */
#v360-wrapper .site-footer {
    background: #1e293b;
    color: white; padding: 60px 0 20px;
}
#v360-wrapper .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
    gap: 40px; margin-bottom: 40px;
}

/* ── INTERNAL LINKS ── */
#v360-wrapper .internal-links-section {
    background: linear-gradient(135deg, #15803d08 0%, white 100%);
    border-radius: 20px; padding: 40px;
    margin: 40px 0; border: 1px solid #15803d22;
}
#v360-wrapper .internal-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* ── AREAS SERVED ── */
#v360-wrapper .pill-container { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
#v360-wrapper .pill {
    background: white; border: 1px solid #e2e8f0;
    padding: 10px 22px; border-radius: 50px;
    font-size: 0.9rem; color: var(--text-gray);
    transition: all 0.3s; font-weight: 500;
}
#v360-wrapper .pill:hover {
    background: #15803d; color: white;
    border-color: #15803d; transform: translateY(-2px);
}

/* ── MOBILE ── */
@media (max-width: 991px) {
    #v360-wrapper .footer-grid { grid-template-columns: repeat(2, 1fr); }
    #v360-wrapper .service-grid,
    #v360-wrapper .infographic-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    #v360-wrapper .hero { padding: 40px 0 60px; min-height: auto; }
    #v360-wrapper .hero-content {
        display: flex !important; flex-direction: column !important; gap: 0 !important;
    }
    #v360-wrapper .text-col {
        order: 1 !important; width: 100% !important;
        text-align: center !important; margin-bottom: 28px !important;
    }
    #v360-wrapper .form-col {
        order: 2 !important; width: 100% !important;
        display: block !important; visibility: visible !important;
    }
    #v360-wrapper .glass-card {
        margin: 0 auto !important; width: 100% !important;
        padding: 22px 18px !important; box-sizing: border-box !important;
    }
    #v360-wrapper .hero-title {
        text-align: center !important;
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    }
    #v360-wrapper .hero-sub { text-align: center !important; }
    #v360-wrapper .hero-gold-badge {
        margin: 0 auto 14px auto !important; display: table !important;
    }
    #v360-wrapper .hero-features, #v360-wrapper .btn-group {
        justify-content: center !important;
    }
    #v360-wrapper .zigzag-item,
    #v360-wrapper .zigzag-item.reverse {
        flex-direction: column !important; gap: 20px !important;
        margin-bottom: 20px !important; padding: 20px 18px !important;
        border-right: none !important; border-left: 4px solid #15803d !important;
    }
    #v360-wrapper .zigzag-img { height: auto !important; min-height: 200px !important; max-height: 280px !important; }
    #v360-wrapper .service-grid,
    #v360-wrapper .infographic-grid,
    #v360-wrapper .footer-grid {
        grid-template-columns: 1fr !important;
    }
    #v360-wrapper .service-card.cv-icon_left { flex-direction: row !important; }
    #v360-wrapper .section { padding: 28px 0 !important; }
    #v360-wrapper .container { padding: 0 14px !important; }
}

@media (max-width: 480px) {
    #v360-wrapper .hero-title { font-size: 1.75rem !important; }
    #v360-wrapper .zigzag-content h3 { font-size: 1.4rem !important; }
    #v360-wrapper .infographic-number { font-size: 2rem; }
}

/* FORM SKIN: SOLID WHITE — premium clean look */
#v360-wrapper .glass-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 24px 50px rgba(0,0,0,0.28) !important;
}
#v360-wrapper .glass-card h3 { color: var(--primary) !important; }
#v360-wrapper .glass-card p { color: #64748b !important; }
#v360-wrapper .glass-card input,
#v360-wrapper .glass-card select {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 🎨 Design Intelligence — UX baseline */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:focus-visible { outline: 2px solid var(--accent, #2563EB); outline-offset: 2px; }

/* 🎨 Design Intelligence — motion layer (data: motion.csv, zero-library) */
.di-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.di-reveal.di-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .di-reveal { opacity: 1; transform: none; transition: none; }
}

/* 🎨 Design Intelligence — material layer: 'soft' (style: Conversion-Optimized) */
#v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.08);
}
#v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card:hover { box-shadow: 0 4px 8px rgba(15,23,42,0.08), 0 18px 44px rgba(15,23,42,0.13); }

@media (hover: hover) {
  #v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card { transition: transform .25s ease, box-shadow .25s ease; }
  #v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card:hover { transform: perspective(900px) rotateX(1.5deg) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  #v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card, #v360-wrapper .service-card, #v360-wrapper .review-card, #v360-wrapper .glass-card, .service-card, .review-card:hover { transform: none !important; }
}
/* ppcx-layout */
:root{--primary-rgb:21,128,61}
.ppcx-sec{padding:56px 0}
.ppcx-head{margin:0 0 6px;font-size:clamp(1.5rem,3vw,2rem);color:var(--primary);font-weight:800}
.ppcx-sub{margin:0 0 28px;color:#64748b;font-size:1rem;max-width:62ch;line-height:1.6}
.ppcx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.ppcx-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:14px;
padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.04);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ppcx-card:hover,.ppcx-card:focus-within{transform:translateY(-4px);
box-shadow:0 12px 32px rgba(0,0,0,.10);border-color:var(--primary)}
.ppcx-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;margin:0 0 14px;color:var(--primary);background:#f1f5f9;
background:color-mix(in srgb,var(--primary) 13%,transparent)}
.ppcx-card h3{margin:0 0 8px;font-size:1.06rem;font-weight:700;color:#0f172a;line-height:1.35}
.ppcx-card p{margin:0 0 14px;color:#475569;font-size:.94rem;line-height:1.6}
.ppcx-read{display:block;margin-top:8px;position:relative;z-index:6;color:#64748b;
font-size:.85rem;text-decoration:none;border-top:1px solid #e2e8f0;padding-top:10px}
.ppcx-read:hover,.ppcx-read:focus-visible{color:var(--primary);text-decoration:underline}
.ppcx-go{color:var(--primary);font-weight:600;font-size:.92rem;text-decoration:none}
.ppcx-card a.ppcx-stretch{position:absolute;inset:0;z-index:5;border-radius:14px}
.ppcx-card a.ppcx-stretch:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ppcx-sym{background:#f8fafc}
.ppcx-sym .ppcx-card{border-left:3px solid var(--primary)}
@media (prefers-reduced-motion:reduce){.ppcx-card{transition:none}.ppcx-card:hover{transform:none}}
/* ppcx-zero */
@font-face{font-family:'PpcxNum';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('Liberation Sans'),local('DejaVu Sans');unicode-range:U+0030-0039;font-display:swap}
:root{--font-primary:'PpcxNum','Atkinson Hyperlegible', sans-serif;--font-secondary:'PpcxNum','Atkinson Hyperlegible', sans-serif}
/* ppcx-call */
.ppcx-mobcall,.ppcx-callbar{display:none}
@media(max-width:768px){
.ppcx-mobcall{display:inline-flex;align-items:center;gap:6px;color:var(--primary);
font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap;margin:0 auto}
.ppcx-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99998;
align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
background:#0f172a;box-shadow:0 -4px 18px rgba(0,0,0,.28)}
.ppcx-callbar a{text-decoration:none}
.ppcx-callbar-num{display:flex;flex-direction:column;line-height:1.15;color:#fff}
.ppcx-callbar-label{font-size:11px;opacity:.75;letter-spacing:.02em}
.ppcx-callbar-digits{font-size:19px;font-weight:800}
.ppcx-callbar-btn{display:inline-flex;align-items:center;gap:7px;background:var(--primary);
color:#fff;font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px;
box-shadow:0 4px 14px rgba(0,0,0,.3)}
.v360-sticky-btn{display:none!important}
body{padding-bottom:74px}
}