/* Lead Box Cards - Hero Section */
.hero-lead-box .lead-step {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}
.hero-lead-box .hidden {
    display: none !important;
}
.hero-lead-box {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 12px !important;
    border-radius: 28px !important;
    flex: 1;
    width: 100%;
    height: 100%;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
    transform-origin: center bottom;
    position: relative;
    overflow: hidden;
}
.hero-lead-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    pointer-events: none;
}
.hero-lead-box:hover {
    transform: scale(1.03);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.04),
        0 8px 24px rgba(0,0,0,0.06),
        0 20px 48px rgba(0,0,0,0.08);
}
.hero-lead-box:focus-within {
    box-shadow:
        0 0 0 2px var(--hero-accent, #3462ea),
        0 4px 8px rgba(0,0,0,0.05),
        0 12px 32px rgba(0,0,0,0.08),
        0 24px 56px rgba(0,0,0,0.1);
    z-index: 20;
}
.hi-wrap:has(.hero-lead-box:focus-within) .hi-circle {
    z-index: 30;
}
.hero-lead-box h3 {
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    hyphens: auto;
}
.hero-lead-box .lead-step-0 {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}
.hero-lead-box .lead-step-0 > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}
.hero-lead-box input {
    font-size: 15px !important;
    height: 42px !important;
    padding: 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0,0,0,0.06) !important;
    background: rgba(255,255,255,0.9) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Phone + Name pair-row — CSS Grid with explicit 1fr 1fr is more rigid than
   flex when children have `width: 100% !important`; the card stays at its
   original width regardless of the input contents. */
.hero-lead-box .lead-pair-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.hero-lead-box .lead-pair-row > input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Tailwind didn't compile the arbitrary class `w-[620px]` from the hero
   template into theme-style.min.css, so the parent wrapper has no width and
   the grid expands with its content. Add the rule manually here. */
.w-\[620px\] {
    width: 620px;
}

/* Hard width-lock: the hero-card-grid lives inside a fixed-width 620px column.
   When the form transitions to the multi-input step, default min-content sizing
   on grid items can let a column expand. Force 50/50 columns and zero min-widths
   so the card never grows beyond its cell, no matter what step is showing.
   `max-width: 620px` is a belt-and-suspenders fallback in case the parent
   wrapper still ends up unconstrained. */
.hero-card-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 620px !important;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}
.hero-card-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}
.hero-lead-box {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.hero-lead-box .lead-step,
.hero-lead-box .lead-step > * {
    min-width: 0 !important;
    max-width: 100% !important;
}
.hero-lead-box input:focus {
    border-color: var(--hero-accent, currentColor) !important;
    outline: none !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02), 0 0 0 3px color-mix(in srgb, var(--hero-accent, #3462ea) 10%, transparent) !important;
}
.hero-lead-box button {
    font-size: 14px !important;
    height: 40px !important;
    border-radius: 80px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}
.hero-lead-box button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
    pointer-events: none;
    border-radius: 80px 80px 0 0;
}
.hero-lead-box button:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);
    filter: brightness(1.05);
}
.hero-lead-box button:active {
    transform: scale(0.97);
    filter: brightness(0.97);
}
.hero-lead-box .lead-step-0 .lead-cta-btn {
    margin-top: 0;
}
.hero-lead-box .lead-step-0 .relative.w-full {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}
.hero-lead-box .lead-step-0 > div > .flex.flex-col:last-child {
    margin-top: auto !important;
}
.hero-lead-box .lead-check-item {
    gap: 4px;
}
.hero-lead-box .lead-check-circle {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}
.hero-lead-box .lead-check-circle svg {
    width: 8px;
    height: 8px;
}
.hero-lead-box .lead-progress-bar {
    transition: width 0.5s ease-out;
}

/* Subpage Lead Boxes - Enlarged */
.subpage-lead .hero-lead-box {
    padding: 40px 24px 20px !important;
    border-radius: 32px !important;
}
.subpage-lead .hero-lead-box h3 {
    font-size: 24px !important;
    line-height: 30px !important;
}
.subpage-lead .hero-lead-box p,
.subpage-lead .hero-lead-box .lead-step-0 span {
    font-size: 18px !important;
    line-height: 22px !important;
}
.subpage-lead .hero-lead-box input {
    font-size: 18px !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
}
.subpage-lead .hero-lead-box button {
    font-size: 18px !important;
    height: 52px !important;
}
.subpage-lead .hi-circle {
    width: 56px;
    height: 56px;
}
.subpage-lead .hi-circle svg {
    width: 28px;
    height: 28px;
}
.subpage-lead .hero-proof-badge {
    padding: 8px 16px;
}
.subpage-lead .hero-proof-badge .proof-number {
    font-size: 14px;
}
.subpage-lead .hero-proof-badge .proof-label {
    font-size: 13px;
}
.subpage-lead .hero-lead-box .g-badge img {
    width: 22px;
}
.subpage-lead .hero-lead-box .lead-step-2 span,
.subpage-lead .hero-lead-box .lead-step-2 h4 {
    font-size: 18px !important;
    line-height: 24px !important;
}
.subpage-lead .hero-lead-box .lead-check-circle {
    width: 18px;
    height: 18px;
}
.subpage-lead .hero-lead-box .lead-check-circle svg {
    width: 10px;
    height: 10px;
}

/* Card Color Variants */
.hb-1 {
    --hero-accent: #3462ea;
    background: linear-gradient(145deg, #f4f7ff 0%, #e6eefe 50%, #dde6fd 100%);
    border: 1px solid rgba(52, 98, 234, 0.1);
}
.hb-1:hover {
    border-color: rgba(52, 98, 234, 0.25);
    box-shadow: 0 0 0 1px rgba(52, 98, 234, 0.06), 0 8px 24px rgba(52, 98, 234, 0.15), 0 20px 48px rgba(52, 98, 234, 0.08);
}
.hb-2 {
    --hero-accent: #78590a;
    background: linear-gradient(145deg, #fffef5 0%, #fdf8e0 50%, #faf3d0 100%);
    border: 1.5px solid rgba(210, 180, 40, 0.2);
}
.hb-2:hover {
    border-color: rgba(210, 180, 40, 0.4);
    box-shadow: 0 0 0 1px rgba(210, 180, 40, 0.06), 0 8px 24px rgba(210, 180, 40, 0.15), 0 20px 48px rgba(210, 180, 40, 0.08);
}
.hb-3 {
    --hero-accent: #2e7d32;
    background: linear-gradient(145deg, #f2fbf2 0%, #e4f5e4 50%, #d8efd8 100%);
    border: 1px solid rgba(76, 175, 80, 0.1);
}
.hb-3:hover {
    border-color: rgba(76, 175, 80, 0.25);
    box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.06), 0 8px 24px rgba(76, 175, 80, 0.15), 0 20px 48px rgba(76, 175, 80, 0.08);
}
.hb-3 .lead-cta-btn {
    background: linear-gradient(135deg, #81c784, #4caf50) !important;
    color: #fff !important;
    opacity: 1 !important;
}
.hb-4 {
    --hero-accent: #f48638;
    background: linear-gradient(145deg, #fff7f0 0%, #fee8d6 50%, #fddcc4 100%);
    border: 1px solid rgba(244, 134, 56, 0.1);
}
.hb-4:hover {
    border-color: rgba(244, 134, 56, 0.25);
    box-shadow: 0 0 0 1px rgba(244, 134, 56, 0.06), 0 8px 24px rgba(244, 134, 56, 0.15), 0 20px 48px rgba(244, 134, 56, 0.08);
}

/* Icon Circle Badges */
.hi-wrap {
    position: relative;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.hi-circle {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hi-wrap:hover .hi-circle {
    transform: translate(-50%, -50%) scale(1.1);
}
.hi-circle svg {
    width: 24px;
    height: 24px;
}
@media (max-width: 640px) {
    .hi-wrap { padding-top: 24px; }
    .hi-circle { width: 44px; height: 44px; top: 24px; }
    .hi-circle svg { width: 20px; height: 20px; }
    .hero-lead-box { min-height: 0; padding: 28px 10px 10px !important; }
    .hero-lead-box input { height: 36px !important; }
    .hero-lead-box button { height: 36px !important; }
}
.hi-1 {
    background: linear-gradient(180deg, #6db3f8, #3462ea);
    border: 6px solid #d4e2fb;
    box-shadow: 0 8px 24px rgba(52, 98, 234, 0.18);
}
.hi-2 {
    background: linear-gradient(180deg, #fef192, #ffeb5b);
    border: 6px solid #fef9d4;
    box-shadow: 0 8px 24px rgba(255, 235, 91, 0.2);
}
.hi-3 {
    background: linear-gradient(180deg, #93cf96, #4caf50);
    border: 6px solid #d4ecd5;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.18);
}
.hi-4 {
    background: linear-gradient(180deg, #fdbc8e, #f48638);
    border: 6px solid #fde0c9;
    box-shadow: 0 8px 24px rgba(244, 134, 56, 0.18);
}

/* Mobile Scroll-Snap Slider */
.mobile-scroll-wrapper {
    position: relative;
}
.mobile-scroll-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-left: 40px;
    padding-right: 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-scroll-slider::-webkit-scrollbar {
    display: none;
}
.mobile-card {
    flex-shrink: 0;
    width: 280px;
    scroll-snap-align: center;
    opacity: 0.45;
    transform: scale(0.88);
    transform-origin: center center;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.mobile-card.is-active {
    opacity: 1;
    transform: scale(1.06);
    z-index: 5;
    position: relative;
}
.mobile-card .hi-wrap {
    padding-top: 26px;
}
.mobile-card .hi-circle {
    width: 48px;
    height: 48px;
    top: 26px;
}
.mobile-card .hi-circle svg {
    width: 24px;
    height: 24px;
}
.mobile-card .hero-lead-box {
    padding: 28px 16px 12px !important;
    border-radius: 24px !important;
}
.mobile-card .hero-lead-box h3 {
    font-size: 16px !important;
    line-height: 20px !important;
}
.mobile-card .hero-lead-box input {
    font-size: 14px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
}
.mobile-card .hero-lead-box button {
    font-size: 13px !important;
    height: 40px !important;
}
.mobile-card .hero-proof-badge .proof-number {
    font-size: 11px;
}
.mobile-card .hero-proof-badge .proof-label {
    font-size: 10px;
}
.mobile-card .hero-lead-box:hover {
    transform: none !important;
}

/* Google Places Autocomplete */
.pac-container {
    z-index: 100000 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-top: 6px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
    font-size: 10px !important;
    line-height: 13px !important;
    max-height: 220px !important;
    overflow: auto !important;
}
.pac-item {
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 13px !important;
}
.pac-item-query {
    font-size: 10px !important;
}
.pac-icon {
    margin-right: 8px !important;
    transform: scale(0.9);
}

/* Google Badge */
.hero-lead-box .g-badge {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.hero-lead-box .g-badge img {
    width: 18px;
}

/* Proof Badge */
.hero-proof-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 999px;
    padding: 6px 12px;
    margin-top: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    width: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-proof-badge .proof-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}
.hero-proof-badge .proof-number {
    color: #111;
    font-weight: 700;
    font-size: 12px;
}
.hero-proof-badge .proof-label {
    color: #666;
    font-size: 11px;
    font-weight: 500;
}
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}

/* Decorative Floating Shapes */
.hero-card-grid::before,
.hero-card-grid::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: floatIn 1s ease-out forwards;
}
.hero-card-grid::before {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(52, 98, 234, 0.06) 0%, transparent 70%);
    top: -40px;
    right: -30px;
    animation-delay: 1.2s;
}
.hero-card-grid::after {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.06) 0%, transparent 70%);
    bottom: -20px;
    left: -20px;
    animation-delay: 1.5s;
}
@keyframes floatIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobile Slider Navigation Buttons */
.mobile-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    padding: 0;
}
.mobile-slider-nav svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #333;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobile-slider-prev { left: 4px; }
.mobile-slider-next { right: 4px; }

/* Hide iOS native video play button overlay */
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}
video::-webkit-media-controls-panel {
    display: none !important;
}
video::-webkit-media-controls {
    display: none !important;
}
video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}
/* Removed deprecated `video::-internal-media-controls-overlay-cast-button` selector.
   The Cast button is now disabled via the `disableRemotePlayback` attribute on <video>. */
#mobile-hero-video {
    pointer-events: none;
}

/* ===== Street View: benefits + calculator two-column (image2) ===== */
.sv-benefit-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 8px auto 0;
    position: relative;
    z-index: 10;
}
.sv-benefit-left {
    flex: 1 1 55%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.05);
}
.sv-benefit-right {
    flex: 1 1 45%;
    min-width: 0;
    display: flex;
}
.sv-benefit-right .subpage-lead {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex: 1;
}
.sv-benefit-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(180deg, #fef192, #ffeb5b);
    border: 5px solid #fef9d4;
    box-shadow: 0 8px 20px rgba(255, 235, 91, 0.25);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.sv-benefit-icon svg { width: 22px; height: 22px; }
.sv-benefit-title { font-size: 24px; line-height: 30px; font-weight: 700; color: #111; }
.sv-benefit-desc { font-size: 15.5px; line-height: 23px; color: #555; font-weight: 400; }
.sv-benefit-desc strong { font-weight: 700; color: #333; }
.sv-benefit-list { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.sv-benefit-item { display: flex; align-items: flex-start; gap: 12px; }
.sv-benefit-item-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
    background: rgba(255, 235, 91, 0.2); color: #78590a;
    display: flex; align-items: center; justify-content: center;
}
.sv-benefit-item-ico svg { width: 19px; height: 19px; }
.sv-benefit-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv-benefit-item-title { font-size: 15px; font-weight: 700; color: #111; }
.sv-benefit-item-sub { font-size: 13.5px; line-height: 18px; color: #666; }
.sv-benefit-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .sv-benefit-row { flex-direction: column; gap: 16px; }
    .sv-benefit-left, .sv-benefit-right { flex: 1 1 auto; width: 100%; }
    .sv-benefit-left { padding: 28px; }
}

/* image2 fix: let the calculator card size to its own content (no bottom clip),
   while still filling to equal height beside the benefits card. The widget's
   height:100% chain made it ignore its own content height, so the row sized to
   the left card and the taller widget content got clipped by overflow:hidden. */
.sv-benefit-right .subpage-lead,
.sv-benefit-right .hi-wrap { height: auto !important; }
.sv-benefit-right .hero-lead-box {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
}
/* Tighten the fill-to-height gaps so spacing matches the mockup instead of
   spreading the whole card. */
.sv-benefit-right .hero-lead-box .lead-step-0 .relative.w-full {
    margin-top: 14px !important;
    margin-bottom: 4px !important;
}

/* image2 spacing: put the single flexible gap between the bullets and the search
   input; keep input / size buttons / CTA / proof badge grouped together lower
   down, matching the mockup (overrides the earlier fixed-margin attempt). */
.sv-benefit-right .hero-lead-box .lead-step-0 .relative.w-full {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}
.sv-benefit-right .hero-lead-box .lead-step-0 > div > .flex.flex-col:last-child {
    margin-top: 14px !important;
}

/* image2 spacing v2: split the free space into two even gaps — one between the
   bullets and the search input, one between the size buttons and the CTA —
   matching the mockup's even rhythm instead of a single large gap. */
.sv-benefit-right .hero-lead-box .lead-step-0 > div > .flex.flex-col:last-child {
    margin-top: auto !important;
}

/* image2 breathing room: more generous inner padding — especially at the bottom —
   so the buttons (left card) and the proof badge (right card) aren't flush to the
   rounded edge. Matches the comfortable padding in the mockup. */
.sv-benefit-left {
    padding: 40px 40px 48px !important;
}
.sv-benefit-right .subpage-lead .hero-lead-box {
    padding: 40px 28px 44px !important;
}

/* image2 width: the section was locked to the 873px hero column, making the cards
   narrow + tall (text wrapped to 4 lines) so the equal-height stretch dumped huge
   gaps into the calculator. Break out to a mockup-width ~1120px, centered inside
   the 1600px main-container (overflow-hidden clips nothing at this width). Wider
   cards => less wrapping => shorter cards => moderate, even gaps. */
.sv-benefit-row {
    width: 1120px !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}
/* comfortable base gap between the calculator rows */
.sv-benefit-right .hero-lead-box .lead-step-0 > div { gap: 14px !important; }

/* image2: breathing space below the two cards before the next section. */
.sv-benefit-row { margin-bottom: 80px !important; }

/* ===== Street View benefits redesign (mockup: alternating cards, serif titles,
   numbered eyebrows, icon bullets, gold "Mehr erfahren" + arrow) ===== */
.sv2-card {
    display: flex;
    align-items: center;
    gap: 48px;
    background: #fff;
    border-radius: 32px;
    padding: 36px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.04);
}
.sv2-card.sv2-rev { flex-direction: row-reverse; }
.sv2-media { position: relative; flex: 0 0 46%; min-width: 0; }
.sv2-media img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}
.sv2-media::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    background: linear-gradient(to top, rgba(10,17,40,.34) 0%, rgba(10,17,40,0) 100%);
    border-radius: 0 0 20px 20px;
    pointer-events: none;
}
.sv2-media > span { z-index: 1; }
.sv2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv2-eyebrow {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a07a1d;
    border: 1px solid rgba(160,122,29,.35);
    background: rgba(255,251,235,.7);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 14px;
}
.sv2-title {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1A2038;
    margin-bottom: 24px;
}
.sv2-features { display: flex; flex-direction: column; gap: 18px; }
.sv2-feature { display: flex; align-items: flex-start; gap: 14px; }
.sv2-fico {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255,235,91,.18);
    border: 1px solid rgba(160,122,29,.18);
    display: flex; align-items: center; justify-content: center;
}
.sv2-fico svg { width: 20px; height: 20px; }
.sv2-fico-green { background: rgba(58,204,58,.1); border-color: rgba(46,125,50,.18); }
.sv2-step {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #E9EBFA;
    color: #5560C9;
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.sv2-feature > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv2-ftitle { font-size: 15.5px; font-weight: 700; color: #1A2038; }
.sv2-fdesc { font-size: 14px; line-height: 20px; color: #6b7280; }
.sv2-more-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 28px;
}
.sv2-more { font-size: 14px; font-weight: 600; color: #a07a1d; cursor: pointer; }
.sv2-more:hover { text-decoration: underline; }
.sv2-arrow {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #E3B23C, #C9962B);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(201,150,43,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sv2-arrow:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(201,150,43,.45); }
.sv2-arrow svg { width: 18px; height: 18px; }

/* image overlays */
.sv2-media-icon {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,.95);
    border-radius: 50%;
    width: 54px; height: 54px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.sv2-media-icon svg { width: 20px; height: 20px; }
.sv2-media-icon span { font-size: 8.5px; font-weight: 700; color: #1A2038; letter-spacing: .04em; }
.sv2-imgbadge {
    position: absolute; bottom: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.95);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #1A2038;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.sv2-imgbadge svg { width: 14px; height: 14px; }
.sv2-caption {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    width: calc(100% - 28px);
    display: flex; align-items: center; gap: 10px;
    background: rgba(253,249,237,.96);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.sv2-caption-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,235,91,.35);
    display: flex; align-items: center; justify-content: center;
}
.sv2-caption-ico svg { width: 17px; height: 17px; }
.sv2-caption-txt { display: flex; flex-direction: column; min-width: 0; }
.sv2-caption-txt strong { font-size: 13px; color: #1A2038; }
.sv2-caption-txt em { font-style: normal; font-size: 12px; color: #6b7280; }
.sv2-pillrow {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    display: flex; align-items: stretch; justify-content: space-between; gap: 6px;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 16px;
    padding: 10px 8px;
    box-shadow: 0 6px 18px rgba(10,17,40,.22);
}
.sv2-pillrow span {
    flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #1A2038; text-align: center; line-height: 1;
}
.sv2-pillrow svg { width: 17px; height: 17px; }
.sv2-pillrow i { width: 1px; align-self: center; height: 26px; background: rgba(10,17,40,.10); flex: 0 0 auto; }
@media (max-width: 767px){
    .sv2-pillrow span { font-size: 9.5px; }
    .sv2-pillrow svg { width: 16px; height: 16px; }
}

/* stack below desktop */
@media (max-width: 1100px) {
    .sv2-card, .sv2-card.sv2-rev { flex-direction: column; gap: 20px; padding: 20px; border-radius: 24px; }
    .sv2-media { flex: 1 1 auto; width: 100%; }
    .sv2-media img { height: 230px; border-radius: 16px; }
    .sv2-title { font-size: 26px; margin-bottom: 16px; }
    .sv2-features { gap: 14px; }
    .sv2-more-row { margin-top: 20px; }
    .sv2-pillrow { gap: 8px; padding: 8px 12px; }
    .sv2-pillrow span { font-size: 9px; }
}

/* ===== Left benefit card theme variants — match the page's lead-widget color
   (default = yellow/street). The big icon svg uses currentColor. ===== */
.sv-benefit-icon { color: #78590a; }
.sv-theme-blue .sv-benefit-icon {
    background: linear-gradient(180deg, #6db3f8, #3462ea);
    border-color: #d4e2fb;
    box-shadow: 0 8px 20px rgba(52, 98, 234, 0.25);
    color: #fff;
}
.sv-theme-blue .sv-benefit-item-ico { background: rgba(52, 98, 234, 0.1); border-color: rgba(52, 98, 234, 0.18); color: #3462ea; }
.sv-theme-orange .sv-benefit-icon {
    background: linear-gradient(180deg, #fdbc8e, #f48638);
    border-color: #fde0c9;
    box-shadow: 0 8px 20px rgba(244, 134, 56, 0.25);
    color: #fff;
}
.sv-theme-orange .sv-benefit-item-ico { background: rgba(244, 134, 56, 0.12); border-color: rgba(244, 134, 56, 0.2); color: #c2410c; }
.sv-theme-green .sv-benefit-icon {
    background: linear-gradient(180deg, #93cf96, #4caf50);
    border-color: #d4ecd5;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.25);
    color: #fff;
}
.sv-theme-green .sv-benefit-item-ico { background: rgba(76, 175, 80, 0.12); border-color: rgba(76, 175, 80, 0.2); color: #2e7d32; }

/* Left benefit card: icon and title on one line. */
.sv-benefit-head { display: flex; align-items: center; gap: 14px; }
.sv-benefit-head .sv-benefit-title { margin: 0; }

/* Equal card heights, always: the row stretches both cards to the same height,
   whichever side has more content. */
.sv-benefit-row { align-items: stretch !important; }
.sv-benefit-left { height: auto; }
.sv-benefit-right .subpage-lead { align-self: stretch !important; }

/* Align card tops: the widget column reserves 24px at the top for the floating
   icon circle, which made the right card start lower than the left. Give the
   left card the same offset so both tops and bottoms line up exactly. */
.sv-benefit-row .sv-benefit-left { margin-top: 24px; }
@media (max-width: 1100px) {
    .sv-benefit-row .sv-benefit-left { margin-top: 0; }
}

/* Yellow fill-up hover (same effect as the hero Referenzen/Kontakt buttons). */
.pnl-yellow-fill { position: relative; z-index: 1; overflow: hidden; }
.pnl-yellow-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFEB5B;
    transform: translateY(100%) scale(0);
    border-radius: 9999px;
    z-index: -1;
    transition: transform .35s ease, border-radius .35s ease;
    pointer-events: none;
}
.pnl-yellow-fill:hover::before {
    transform: translateY(0) scale(1);
    border-radius: 0;
}

/* ===== References showcase (homepage + /referenzen) ===== */
.shc-logobar{background:#fff;border:1px solid #EEF1F6;border-radius:20px;box-shadow:0 10px 30px rgba(16,24,40,.05);padding:10px 22px}
.shc-badge{display:inline-flex;align-items:center;gap:8px;background:#EDF2FF;color:#2563EB;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:9999px;margin-bottom:16px}
.shc-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.shc-title{font-size:28px;line-height:1.22;font-weight:800;color:#0F172A;margin:0 0 14px}
.shc-title .shc-blue{display:block;color:#2563EB}
.shc-sub{font-size:15px;line-height:1.65;color:#64748B;max-width:760px;margin:0 auto 26px}
@media(min-width:1024px){.shc-title{font-size:40px}.shc-sub{font-size:16px}}
.shc-industries{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin-bottom:26px;-webkit-overflow-scrolling:touch}
.shc-industries::-webkit-scrollbar{display:none}
.shc-ind-card{position:relative;overflow:hidden;border-radius:16px;flex:0 0 150px;aspect-ratio:3/4;cursor:pointer;text-align:left;padding:0;border:0;background:#0F172A}
@media(min-width:1280px){.shc-industries{display:grid;grid-template-columns:repeat(9,1fr);overflow:visible}.shc-ind-card{flex:auto}}
.shc-ind-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.shc-ind-card:hover>img{transform:scale(1.07)}
.shc-ind-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,28,.10) 0%,rgba(8,14,28,.55) 55%,rgba(8,14,28,.92) 100%)}
.shc-ind-count{position:absolute;top:8px;right:8px;z-index:2;background:rgba(10,16,30,.72);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:9999px;border:1px solid rgba(255,255,255,.28)}
.shc-ind-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:11px 12px}
.shc-ind-body svg{color:#fff;opacity:.92;margin-bottom:6px}
.shc-ind-name{color:#fff;font-size:13.5px;font-weight:700;line-height:1.25}
.shc-ind-meta{color:rgba(255,255,255,.72);font-size:11px;margin-top:3px}
/* filter pills v2 — bigger, pastel, wrapping into rows (client request) */
.shc-filter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:100%;margin-top:8px}
@media(max-width:767px){.shc-filter{margin-top:18px}}
.shc-filter .project-item,.shc-filter .reference-category-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:15.5px;font-weight:600;line-height:1;color:#0F172A;padding:14px 26px!important;border-radius:15px;cursor:pointer;border:1.5px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .2s ease,color .2s ease;user-select:none;background:transparent}
.shc-filter .project-item:hover,.shc-filter .reference-category-item:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,24,40,.12)}
.shc-filter svg{flex:0 0 auto;width:19px;height:19px}
/* pills: clean white, colored icons (client mockup v3) */
.shc-hue-mint,.shc-hue-orange,.shc-hue-blue,.shc-hue-pink,.shc-hue-teal,.shc-hue-yellow,.shc-hue-purple,.shc-hue-coral,.shc-hue-slate{background:#fff!important;border-color:#E5E9F0!important;color:#111827!important}
.shc-hue-mint svg{color:#1D9E5F}
.shc-hue-orange svg{color:#EA8A2B}
.shc-hue-blue svg{color:#2563EB}
.shc-hue-pink svg{color:#DB2777}
.shc-hue-teal svg{color:#0D9488}
.shc-hue-yellow svg{color:#D99F0B}
.shc-hue-purple svg{color:#7C3AED}
.shc-hue-coral svg{color:#F0653C}
.shc-hue-slate svg{color:#475569}
/* active pill: blue outline + light blue fill (mockup) */
.shc-filter .bg-bg-gray-1{background:#fff!important;border-color:#2563EB!important;color:#1D4ED8!important;box-shadow:0 4px 12px rgba(37,99,235,.14)}
.shc-filter .bg-bg-gray-1 svg{color:#1D4ED8!important}
/* "Alle" pill: always dark */
.shc-filter .shc-alle{background:#0F172A!important;border-color:#0F172A!important;color:#fff!important}
.shc-filter .shc-alle svg{color:#fff!important}
@media(max-width:767px){
.shc-filter,.shc-cityrow{gap:8px}
.shc-filter .project-item,.shc-filter .reference-category-item{font-size:14px;padding:12px 16px!important;gap:7px}
.shc-filter svg{width:16px;height:16px}
}
/* city photo cards — "Städteübersicht" v2 (client mockup): photo, badge, blue CTA */
.shc-cityrow{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:14px;width:100%;overflow-x:auto;padding:4px 4px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.shc-cityrow::-webkit-scrollbar{display:none}
.shc-citypc{position:relative;flex:0 0 212px;height:152px;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;border:0;cursor:pointer;scroll-snap-align:start;box-shadow:0 6px 16px rgba(16,24,40,.14);transition:transform .18s ease,box-shadow .18s ease;padding:0;text-align:left;font-family:inherit}
.shc-citypc:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(16,24,40,.24)}
.shc-citypc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,40,.10) 0%,rgba(10,17,40,.20) 45%,rgba(10,17,40,.80) 100%)}
.shc-cp-badge{position:absolute;top:9px;left:9px;z-index:2;width:29px;height:29px;border-radius:9px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:#334155;box-shadow:0 2px 6px rgba(16,24,40,.25)}
.shc-cp-body{position:absolute;left:11px;right:8px;bottom:9px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.shc-cp-name{font-size:15px;font-weight:800;letter-spacing:.03em;line-height:1.05;color:#fff;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.shc-cp-sub{font-size:8px;font-weight:600;letter-spacing:.12em;color:#D5DDEA;text-transform:uppercase;margin:2px 0 7px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.shc-cp-btn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(180deg,#3B82F6 0%,#1D4ED8 100%);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:9999px;box-shadow:0 3px 8px rgba(37,99,235,.45)}
.shc-citypc.shc-city-on{box-shadow:0 0 0 3px #2563EB,0 14px 28px rgba(37,99,235,.30)}
.shc-citypc.shc-city-on .shc-cp-btn{background:#111827}
@media(max-width:767px){
.shc-cityrow{gap:10px}
.shc-citypc{flex:0 0 172px;height:128px;border-radius:13px}
.shc-cp-name{font-size:13px}
}
/* advanced search row (Erweiterte Suche) */
.shc-advrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:100%}
@media(min-width:1280px){
.shc-filter .project-item,.shc-filter .reference-category-item{flex:1 1 0;justify-content:center}
.shc-advrow .shc-adv-sel{flex:1 1 0}
.shc-advrow select{width:100%;max-width:none;min-width:0}
.shc-advrow .shc-adv-apply{flex:0 0 auto}
}
.shc-adv-label{font-size:16px;font-weight:700;color:#111827;margin-right:4px}
.shc-advrow select{appearance:none;-webkit-appearance:none;height:46px;min-width:170px;max-width:230px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23495568' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;border:1.5px solid #E2E7EE;border-radius:12px;padding:0 36px 0 14px;font-size:14.5px;font-weight:500;color:#111827;cursor:pointer}
.shc-adv-flag{position:relative}
.shc-adv-flag select{padding-left:38px}
.shc-adv-flag .shc-flag{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:19px;height:14px;border-radius:3px;overflow:hidden;pointer-events:none;box-shadow:0 0 0 1px rgba(16,24,40,.08);display:flex}
.shc-adv-apply{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;border:1.5px solid #2563EB;background:#F5F9FF;color:#1D4ED8;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .18s ease;font-family:inherit}
.shc-adv-apply:hover{background:#E4EEFF}
@media(max-width:767px){.shc-advrow select{min-width:140px;height:42px}.shc-adv-apply{height:42px}}
.shc-pcard{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid #ECEFF4;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(16,24,40,.05);transition:transform .25s ease,box-shadow .25s ease}
.shc-pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,24,40,.10)}
.shc-pcard-media{position:relative;aspect-ratio:43/29;overflow:hidden;background:#F1F5F9}
.shc-pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.shc-pcard:hover .shc-pcard-media img{transform:scale(1.05)}
.shc-360{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0F172A;font-size:12px;font-weight:700;padding:5px 11px;border-radius:9999px;box-shadow:0 4px 12px rgba(16,24,40,.18)}
.shc-pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px}
.shc-pcard-name{font-size:15px;font-weight:700;color:#0F172A;line-height:1.3;margin-bottom:3px}
.shc-pcard-city{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#64748B}
.shc-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:9999px;border:1.5px solid #DBE4FF;color:#2563EB;display:flex;align-items:center;justify-content:center;transition:all .2s ease;cursor:pointer}
.shc-pcard:hover .shc-arrow{background:#2563EB;color:#fff;border-color:#2563EB}
@media(min-width:768px){.shc-pcard-name{font-size:16px}.shc-pcard-foot{padding:15px 17px}}
.shc-logobar .splide{margin-bottom:0!important}
.shc-logobar .splide__slide{align-items:center!important}

/* ===== Homepage service card 1: Street View browser+phone illustration ===== */
.svc1-visual{position:relative;width:100%;max-width:560px;margin:0 auto 26px;padding-bottom:40px}
@media(min-width:1024px){.svc1-visual{margin:0 0 0 auto}}
.svc1-browser{background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(16,24,40,.14);overflow:hidden;border:1px solid #EEF1F6}
.svc1-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid #F1F4F9}
.svc1-dots{display:flex;gap:5px;flex:0 0 auto}
.svc1-dots span{width:10px;height:10px;border-radius:50%}
.svc1-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0F172A;white-space:nowrap}
.svc1-bar-right{margin-left:auto;display:flex;align-items:center;gap:8px;color:#64748B}
.svc1-pill{font-size:11px;font-weight:600;color:#0F172A;background:#F1F4F9;border-radius:9999px;padding:5px 11px;white-space:nowrap}
.svc1-pano{position:relative;aspect-ratio:16/10;background:#E2E8F0}
.svc1-pano>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc1-nav{position:absolute;top:14px;left:14px;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 4px 14px rgba(16,24,40,.2);display:flex;align-items:center;justify-content:center;color:#334155}
.svc1-zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;background:rgba(255,255,255,.95);border-radius:10px;box-shadow:0 4px 14px rgba(16,24,40,.2);overflow:hidden}
.svc1-zoom span{width:34px;height:31px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0F172A;font-size:17px}
.svc1-zoom span:first-child{border-bottom:1px solid #E2E8F0}
.svc1-thumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;background:rgba(255,255,255,.92);padding:6px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,.2)}
.svc1-thumbs img{width:56px;height:40px;object-fit:cover;border-radius:7px;display:block}
.svc1-mapcard{position:absolute;right:14px;bottom:14px;width:150px;height:110px;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,.22);background:#EDF0EA}
.svc1-mapcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc1-map-road{position:absolute;background:#fff;opacity:.95}
.svc1-map-label{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#fff;font-size:10px;font-weight:600;color:#0F172A;border-radius:9999px;padding:3px 8px;white-space:nowrap;box-shadow:0 2px 8px rgba(16,24,40,.15)}
.svc1-pin{position:absolute;left:50%;top:30%;transform:translate(-50%,-55%)}
.svc1-bizcard{position:absolute;left:-12px;bottom:-4px;z-index:3;background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(16,24,40,.18);padding:13px 15px;min-width:270px}
@media(max-width:640px){.svc1-bizcard{left:4px;min-width:0;max-width:80%}}
.svc1-bizname{font-size:14.5px;font-weight:700;color:#0F172A;margin-bottom:4px}
.svc1-bizmeta{display:flex;align-items:center;gap:6px;font-size:12px;color:#475569;margin-bottom:9px;flex-wrap:wrap}
.svc1-stars{color:#FBBC05;letter-spacing:1.5px;font-size:12px}
.svc1-verified{display:inline-flex;align-items:center;gap:4px;color:#1A73E8;font-weight:600}
.svc1-actions{display:flex;gap:6px;flex-wrap:wrap}
.svc1-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#1A73E8;background:#fff;border:1px solid #E2E8F0;border-radius:9999px;padding:5px 10px}
.svc1-phone{position:absolute;right:-12px;bottom:-30px;z-index:4;width:200px;background:linear-gradient(150deg,#FFFFFF 0%,#F1F5F9 55%,#D5DCE7 100%);border-radius:34px;padding:7px;outline:1px solid #E2E8F0;box-shadow:-26px 38px 60px rgba(16,24,40,.26),0 10px 24px rgba(16,24,40,.14),inset 0 1.5px 2px #fff,inset -2px -3px 6px rgba(15,23,42,.13);transform:perspective(1400px) rotateY(-10deg) rotateX(2deg) rotateZ(3.5deg);transform-origin:right center;transition:transform .5s ease;display:none}
@media(min-width:768px){.svc1-phone{display:block}}
.svc1-ph-head{padding:15px 12px 6px}
.svc1-ph-name{font-size:12.5px;font-weight:700;color:#0F172A;margin-top:4px}
.svc1-ph-meta{display:flex;align-items:center;gap:4px;font-size:10px;color:#475569;margin-top:2px}
.svc1-ph-verified{display:flex;align-items:center;gap:4px;font-size:9px;color:#188038;font-weight:600;margin-top:4px}
.svc1-ph-tabs{display:flex;gap:2px;border-bottom:1px solid #F1F4F9;padding:0 8px;margin-top:6px}
.svc1-ph-tabs span{font-size:7.5px;font-weight:700;color:#5F6368;letter-spacing:.04em;padding:6px 4px}
.svc1-ph-tabs span.on{color:#1A73E8;border-bottom:2px solid #1A73E8}
.svc1-ph-img{position:relative;aspect-ratio:16/11;background:#E2E8F0}
.svc1-ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc1-ph-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(16,24,40,.25)}
.svc1-ph-lbl{position:absolute;left:8px;bottom:8px;background:rgba(15,23,42,.75);color:#fff;font-size:8.5px;font-weight:600;border-radius:9999px;padding:3px 8px}
.svc1-ph-actions{display:flex;justify-content:space-between;padding:8px 10px 10px}
.svc1-ph-act{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:6.8px;font-weight:700;color:#1A73E8;letter-spacing:.03em}
.svc1-ph-act i{width:22px;height:22px;border-radius:50%;border:1px solid #DBE4FF;display:flex;align-items:center;justify-content:center;font-style:normal}
.svc1-presence{position:absolute;right:-6px;bottom:-30px;z-index:2;display:flex;align-items:center;gap:9px;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(16,24,40,.16);padding:10px 13px}
@media(min-width:768px){.svc1-presence{right:-20px;bottom:-80px;z-index:5;padding:12px 16px}}
.svc1-presence b{display:block;font-size:11.5px;color:#0F172A}
.svc1-presence small{font-size:9.5px;color:#64748B}

.svc1-phone:hover{transform:perspective(1400px) rotateY(-4deg) rotateX(1deg) rotateZ(1.5deg)}
.svc1-ph-screen{position:relative;background:#fff;border-radius:27px;overflow:hidden}
.svc1-ph-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:58px;height:7px;border-radius:9999px;background:#0B0F19;z-index:6;opacity:.9}
.svc1-ph-btn{position:absolute;left:-2.5px;width:3px;border-radius:2px;background:#B6BFCD;box-shadow:-1px 0 2px rgba(15,23,42,.25)}

.svc1-ph-tabs span.b{color:#1A73E8}
.svc1-ph-topline{display:flex;align-items:center;justify-content:space-between}
.svc1-gword{font-size:13px;font-weight:700;letter-spacing:-.2px}
.svc1-ph-metarow{display:flex;align-items:center;justify-content:space-between}

/* ===== Homepage service card 2: Business Profile composition ===== */
.svc2-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:640px;margin:0 auto 26px;padding-bottom:18px}
@media(min-width:1024px){.svc2-visual{margin:0 0 0 auto}}
.svc2-chipcol{display:none;flex-direction:column;gap:10px;align-items:flex-start}
.svc2-cardcol{display:none;flex-direction:column;gap:12px;width:188px;flex:0 0 auto}
@media(min-width:768px){.svc2-chipcol,.svc2-cardcol{display:flex}}
.svc2-chip{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(160deg,#FFFFFF 0%,#F7FAFF 60%,#EAF1FB 100%);border:1px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 14px 28px rgba(16,24,40,.13),inset 0 1.5px 1.5px #fff,inset 0 -2px 5px rgba(120,150,200,.18);padding:9px 14px;font-size:11.5px;font-weight:600;color:#0F172A;white-space:nowrap;transform:perspective(700px) rotateY(14deg);transform-origin:left center;transition:transform .3s ease,box-shadow .3s ease}
.svc2-chip:hover{transform:perspective(700px) rotateY(5deg) translateY(-2px);box-shadow:0 18px 34px rgba(16,24,40,.17),inset 0 1.5px 1.5px #fff}
.svc2-chip img{width:17px;height:17px;object-fit:contain;flex:0 0 auto}
.svc2-chipcol .svc2-chip:nth-of-type(1){margin-left:30px}
.svc2-chipcol .svc2-chip:nth-of-type(2){margin-left:20px}
.svc2-chipcol .svc2-chip:nth-of-type(3){margin-left:10px}
.svc2-pinwrap{position:relative;margin:34px 0 0 30px;width:150px;height:150px}
.svc2-disk{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:54px;border-radius:50%;background:linear-gradient(180deg,#FFFFFF 0%,#ECF2FB 55%,#DCE7F6 100%);box-shadow:0 20px 34px rgba(26,115,232,.20),inset 0 2px 6px #fff,inset 0 -4px 10px rgba(120,150,200,.28)}
.svc2-disk::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72%;height:72%;border-radius:50%;border:1.5px dashed rgba(46,124,246,.28)}
.svc2-disk::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,rgba(46,124,246,.14),transparent 70%)}
.svc2-pindrop{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:36px;height:11px;border-radius:50%;background:rgba(20,60,140,.28);filter:blur(3px)}
.svc2-pinwrap>svg{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);filter:drop-shadow(0 12px 14px rgba(26,115,232,.35))}
.svc2-ki{position:absolute;left:-24px;bottom:10px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.95) 0%,rgba(160,200,255,.65) 20%,rgba(46,124,246,.9) 62%,rgba(16,76,185,.98) 100%);border:1px solid rgba(255,255,255,.55);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 30px rgba(26,115,232,.38),inset 0 2px 6px rgba(255,255,255,.85),inset 0 -5px 12px rgba(10,50,120,.4)}
.svc2-ki::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1.5px dashed rgba(46,124,246,.38)}
.svc2-phone{position:relative;z-index:3;width:240px;flex:0 0 auto;background:linear-gradient(160deg,#3A3F47 0%,#15181D 55%,#2A2F36 100%);border-radius:38px;padding:8px;box-shadow:-22px 36px 58px rgba(16,24,40,.32),0 10px 24px rgba(16,24,40,.18),inset 0 1.5px 1.5px rgba(255,255,255,.22);transform:perspective(1400px) rotateY(-7deg) rotateZ(5deg);transform-origin:center;transition:transform .5s ease}
.svc2-phone:hover{transform:perspective(1400px) rotateY(-3deg) rotateZ(2deg)}
.svc2-ph-btn{position:absolute;right:-2.5px;width:3px;border-radius:2px;background:#2A2F36;box-shadow:1px 0 2px rgba(0,0,0,.4)}
.svc2-screen{position:relative;background:#fff;border-radius:31px;overflow:hidden;clip-path:inset(0 round 31px);transform:translateZ(0)}
.svc2-status{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 2px;font-size:9.5px;font-weight:700;color:#0F172A}
.svc2-island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:64px;height:14px;border-radius:9999px;background:#0B0F19;z-index:6}
.svc2-cover{position:relative;margin-top:4px;height:104px}
.svc2-cover>img{width:100%;height:100%;object-fit:cover}
.svc2-x{position:absolute;top:7px;right:9px;color:#fff;font-size:12px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.svc2-avatar{position:absolute;left:14px;bottom:-24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#2E7CF6,#1A5FD0);border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(16,24,40,.25)}
.svc2-bizrow{display:flex;align-items:center;gap:5px;padding:30px 13px 0;font-size:13.5px;font-weight:700;color:#0F172A}
.svc2-meta{padding:3px 13px 0;font-size:10px;color:#475569}
.svc2-sub{padding:2px 13px 0;font-size:9.5px;color:#64748B}
.svc2-tabs{display:flex;gap:2px;border-bottom:1px solid #F1F4F9;padding:0 9px;margin-top:7px}
.svc2-tabs span{font-size:7.6px;font-weight:700;color:#5F6368;letter-spacing:.03em;padding:6px 4px;white-space:nowrap}
.svc2-tabs span.on{color:#1A73E8;border-bottom:2px solid #1A73E8}
.svc2-acts{display:flex;justify-content:space-between;padding:8px 12px}
.svc2-row{display:flex;align-items:center;gap:6px;padding:7px 11px;border-top:1px solid #F4F6FA;font-size:9.3px;color:#334155;min-width:0}
.svc2-row>span{min-width:0}
.svc2-row .g{color:#188038;font-weight:700}
.svc2-row .lnk{color:#1A73E8;font-weight:600}
.svc2-minimap{margin-left:auto;width:56px;height:42px;border-radius:8px;object-fit:cover;box-shadow:0 2px 6px rgba(16,24,40,.18);flex:0 0 auto}
.svc2-hl{padding:7px 13px 2px;border-top:1px solid #F4F6FA;font-size:9.5px;font-weight:700;color:#0F172A}
.svc2-hlrow{display:flex;align-items:center;gap:8px;padding:5px 13px 13px}
.svc2-hlico{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#2E7CF6;display:flex;align-items:center;justify-content:center}
.svc2-hlrow b{display:block;font-size:9.3px;color:#0F172A}
.svc2-hlrow small{font-size:8.3px;color:#64748B}
.svc2-fcard{background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(16,24,40,.12);padding:11px 13px}
.svc2-fhead{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#0F172A;margin-bottom:4px}
.svc2-ftext{font-size:9px;color:#64748B;line-height:1.45}
.svc2-fbox{margin-top:7px;background:#EFF4FE;border-radius:10px;padding:8px 9px}
.svc2-fbox b{display:block;font-size:10px;color:#1A73E8;margin-bottom:2px}
.svc2-fbox .svc1-stars{font-size:9px}
.svc2-big{font-size:16px;font-weight:800;color:#0F172A;display:flex;align-items:center;gap:5px}
.svc2-quote{font-size:8.8px;color:#475569;line-height:1.5;margin-top:5px}
.svc2-avatar-sm{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#F2994A,#EB5757);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;vertical-align:middle}
.svc2-stat{font-size:17px;font-weight:800;color:#1A73E8}
.svc2-statsub{font-size:8.5px;color:#64748B;margin-bottom:5px}
.svc2-growth{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:9999px;box-shadow:0 14px 34px rgba(16,24,40,.16);padding:10px 18px;font-size:12px;font-weight:700;color:#0F172A;white-space:nowrap}
.svc2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border:1.5px solid #1A73E8;border-radius:9999px;color:#1A73E8;font-weight:600;font-size:15px;background:#fff;transition:background .2s ease}
.svc2-btn:hover{background:#EFF4FF}
@media(max-width:767px){.svc2-btn{width:100%}}

.svc2-ki::before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:32px -22px 0 -22px #9EC1F7,-30px -16px 0 -22px #9EC1F7,-22px 28px 0 -23px #BAD3F9,34px 20px 0 -23px #BAD3F9,2px -34px 0 -23px #BAD3F9,-6px 34px 0 -23px #C9DCFA}
.svc2-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98) 0%,rgba(225,238,255,.55) 35%,rgba(165,198,246,.3) 70%,rgba(125,168,236,.18) 100%);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 3px #fff,0 10px 18px rgba(26,115,232,.14)}
.svc2-qrow{display:flex;gap:8px;align-items:flex-start;margin-top:5px}
.svc2-qimg{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-top:2px;box-shadow:0 2px 6px rgba(16,24,40,.2)}

/* ===== Homepage service card 3: Hotel website composition ===== */
.svc3-visual{position:relative;width:100%;max-width:640px;margin:0 auto 30px;padding-bottom:78px}
@media(min-width:1024px){.svc3-visual{margin:0 0 0 auto}}
.svc3-browser{position:relative;z-index:2;width:100%;max-width:480px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(16,24,40,.16);overflow:hidden;border:1px solid #EEF1F6}
.svc3-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #F1F4F9}
.svc3-url{flex:1;display:flex;align-items:center;gap:6px;background:#F1F4F9;border-radius:9999px;padding:6px 12px;font-size:10.5px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden}
.svc3-nav{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #F4F6FA}
.svc3-logo{font-family:Georgia,'Times New Roman',serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:#1E2A1F;line-height:1.05}
.svc3-logo small{display:block;font-size:6.5px;letter-spacing:.22em;color:#7A8B7C;font-weight:400}
.svc3-menu{margin-left:auto;display:flex;gap:11px;font-size:8.8px;font-weight:600;color:#334155;white-space:nowrap}
.svc3-book{flex:0 0 auto;background:#1F9D4D;color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:7px 12px;white-space:nowrap}
.svc3-hero{position:relative;height:242px;background:#26313B}
.svc3-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc3-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,28,.28) 0%,rgba(12,20,28,.05) 45%,rgba(12,20,28,.42) 100%)}
.svc3-hero-txt{position:absolute;left:16px;top:26px;z-index:2;color:#fff}
.svc3-hero-txt b{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:24px;line-height:1.28;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.svc3-hero-txt span{display:block;margin-top:5px;font-size:10px;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.svc3-booking{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px 10px;box-shadow:0 10px 26px rgba(16,24,40,.22)}
.svc3-bk{min-width:0}
.svc3-bk small{display:block;font-size:7.4px;color:#8FA3B8;font-weight:600}
.svc3-bk b{display:flex;align-items:center;gap:4px;font-size:9.6px;color:#0F172A;white-space:nowrap}
.svc3-bk+.svc3-bk{border-left:1px solid #EEF1F6;padding-left:8px}
.svc3-check{margin-left:auto;flex:0 0 auto;background:#1F9D4D;color:#fff;font-size:9px;font-weight:700;border-radius:9px;padding:9px 12px;white-space:nowrap}
.svc3-feats{display:flex;gap:8px;padding:13px 14px 15px}
.svc3-feat{flex:1;text-align:center;min-width:0}
.svc3-feat svg{color:#1F9D4D;margin-bottom:5px}
.svc3-feat b{display:block;font-size:10px;color:#0F172A;line-height:1.3}
.svc3-feat small{display:block;font-size:8.3px;color:#64748B;line-height:1.4;margin-top:2px}
.svc3-chat{position:absolute;right:-8px;top:-6px;z-index:4;display:none;align-items:flex-start;gap:7px;width:196px}
@media(min-width:768px){.svc3-chat{display:flex}}
.svc3-bot{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 10px 22px rgba(16,24,40,.16);display:flex;align-items:center;justify-content:center}
.svc3-chatcard{background:#fff;border-radius:14px;border-top-left-radius:4px;box-shadow:0 16px 36px rgba(16,24,40,.16);padding:10px 11px}
.svc3-chatcard p{font-size:9.5px;font-weight:600;color:#0F172A;line-height:1.4;margin:0 0 7px}
.svc3-cpill{display:inline-block;border:1px solid #E2E8F0;border-radius:9999px;padding:4px 9px;font-size:8.3px;font-weight:600;color:#334155;margin:0 3px 4px 0;background:#fff;box-shadow:0 2px 6px rgba(16,24,40,.05)}
.svc3-ctime{display:block;text-align:right;font-size:7.5px;color:#94A3B8}
.svc3-ctime i{color:#3B82F6;font-style:normal}
.svc3-phone{position:absolute;right:6px;bottom:34px;z-index:5;width:158px;background:linear-gradient(160deg,#3A3F47 0%,#15181D 55%,#2A2F36 100%);border-radius:26px;padding:6px;box-shadow:-18px 28px 48px rgba(16,24,40,.3),inset 0 1.5px 1.5px rgba(255,255,255,.2);transform:perspective(1200px) rotateY(-6deg) rotateZ(3deg);transition:transform .5s ease;display:none}
@media(min-width:768px){.svc3-phone{display:block}}
.svc3-phone:hover{transform:perspective(1200px) rotateY(-2deg) rotateZ(1deg)}
.svc3-ph-scr{position:relative;background:#fff;border-radius:21px;overflow:hidden;clip-path:inset(0 round 21px)}
.svc3-ph-nav{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 6px}
.svc3-ph-nav .svc3-logo{font-size:9px}
.svc3-ph-nav .svc3-logo small{font-size:5.2px}
.svc3-ph-scr>img{width:100%;height:74px;object-fit:cover;display:block}
.svc3-ph-card{background:#1E2A1F;color:#fff;padding:10px 11px}
.svc3-ph-card b{display:block;font-family:Georgia,serif;font-size:10.5px;margin-bottom:4px}
.svc3-ph-card p{font-size:7.6px;line-height:1.45;color:rgba(255,255,255,.82);margin:0 0 7px}
.svc3-ph-btn2{display:inline-block;background:#1F9D4D;color:#fff;font-size:7.8px;font-weight:700;border-radius:6px;padding:5px 9px}
.svc3-servers{position:absolute;left:2px;bottom:-10px;z-index:3;display:none}
@media(min-width:768px){.svc3-servers{display:block}}
.svc3-chips{position:absolute;left:160px;bottom:-26px;z-index:4;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
@media(max-width:767px){.svc3-chips{position:static;margin-top:14px;flex-direction:row;flex-wrap:wrap}}
.svc3-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:9999px;box-shadow:0 12px 26px rgba(16,24,40,.13);padding:8px 14px;font-size:11px;font-weight:700;color:#0F172A;white-space:nowrap}
.svc3-chip svg{flex:0 0 auto}
.svc3-wcag{position:absolute;right:2px;bottom:-16px;z-index:6;filter:drop-shadow(0 12px 22px rgba(16,24,40,.18));display:none}
@media(min-width:768px){.svc3-wcag{display:block}}

/* ===== Homepage service card 4: Google Ads composition ===== */
.svc4-visual{position:relative;width:100%;max-width:640px;margin:0 auto 26px;min-height:540px;padding-bottom:30px}
@media(min-width:1024px){.svc4-visual{margin:0 0 0 auto}}
@media(max-width:767px){.svc4-visual{min-height:0;display:flex;flex-direction:column;gap:14px}}
.svc4-arrow{position:absolute;right:36px;top:10px;z-index:0;opacity:.85;display:none}
@media(min-width:768px){.svc4-arrow{display:block}}
.svc4-serp{background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(16,24,40,.13);padding:13px 14px;border:1px solid #F0F2F7}
@media(min-width:768px){.svc4-serp{position:absolute;top:0;left:0;width:415px;z-index:2}}
.svc4-serp-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.svc4-gword{font-size:17px;font-weight:700;letter-spacing:-.4px}
.svc4-search{flex:1;display:flex;align-items:center;gap:7px;border:1px solid #E2E8F0;border-radius:9999px;padding:7px 12px;font-size:10.5px;color:#0F172A;box-shadow:0 2px 6px rgba(16,24,40,.05)}
.svc4-search b{font-weight:500}
.svc4-adwrap{display:flex;gap:12px}
.svc4-ad{flex:1;background:#fff;border:1px solid #F0F2F7;border-radius:12px;box-shadow:0 8px 22px rgba(16,24,40,.08);padding:11px 12px}
.svc4-spon{font-size:9px;font-weight:700;color:#0F172A;margin-bottom:6px}
.svc4-adhead{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.svc4-alogo{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:#D3232A;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif}
.svc4-adhead b{display:block;font-size:9.5px;color:#0F172A;font-weight:600}
.svc4-adhead small{display:block;font-size:8.3px;color:#64748B}
.svc4-adtitle{font-size:12.5px;font-weight:600;color:#1A0DAB;line-height:1.3;margin-bottom:4px}
.svc4-addesc{font-size:9.3px;color:#334155;line-height:1.45;margin-bottom:6px}
.svc4-adrow{display:flex;align-items:center;gap:5px;font-size:9px;color:#475569;margin-bottom:3px}
.svc4-adrow .g{color:#188038;font-weight:700}
.svc4-adchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.svc4-adchip{border:1px solid #DBE4FF;border-radius:9999px;padding:4px 9px;font-size:8.6px;font-weight:600;color:#1A73E8;background:#fff}
.svc4-skel{width:64px;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.svc4-skel span{height:8px;border-radius:9999px;background:#EDF0F5}
.svc4-dash{background:#fff;border-radius:14px;box-shadow:0 20px 48px rgba(16,24,40,.15);padding:12px 14px;border:1px solid #F0F2F7}
@media(min-width:768px){.svc4-dash{position:absolute;top:238px;left:64px;width:452px;z-index:3}}
.svc4-tabs{display:flex;align-items:center;gap:12px;border-bottom:1px solid #F1F4F9;padding-bottom:8px;margin-bottom:10px;overflow:hidden}
.svc4-tab{display:inline-flex;align-items:center;gap:4px;font-size:8.8px;font-weight:700;color:#5F6368;white-space:nowrap}
.svc4-tab.on{color:#E8710A;position:relative}
.svc4-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2.5px;border-radius:2px;background:#E8710A}
.svc4-tiles{display:flex;gap:7px;margin-bottom:10px}
.svc4-tile{flex:1;border-radius:9px;padding:8px 9px;border:1px solid #F0F2F7;background:#fff}
.svc4-tile small{display:block;font-size:7.6px;font-weight:600;color:#64748B;margin-bottom:2px}
.svc4-tile b{display:block;font-size:13px;font-weight:800;color:#0F172A;line-height:1.1}
.svc4-tile i{font-style:normal;display:block;font-size:7.8px;font-weight:700;margin-top:2px}
.svc4-tile.blue{background:#1A73E8;border-color:#1A73E8}
.svc4-tile.blue small,.svc4-tile.blue b,.svc4-tile.blue i{color:#fff}
.svc4-tile.orange{background:#E8710A;border-color:#E8710A}
.svc4-tile.orange small,.svc4-tile.orange b,.svc4-tile.orange i{color:#fff}
.svc4-tile .up{color:#188038}.svc4-tile .down{color:#188038}
.svc4-statcard{background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(16,24,40,.13);padding:11px 14px;border:1px solid #F0F2F7;display:none}
@media(min-width:768px){.svc4-statcard{display:block;position:absolute;z-index:2}}
.svc4-statcard .h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#0F172A}
.svc4-big{font-size:19px;font-weight:800;color:#E8710A;line-height:1.15}
.svc4-big.dark{color:#0F172A}
.svc4-sub{font-size:8.3px;color:#64748B}
.svc4-up{color:#E8710A;font-size:10px;font-weight:800}
.svc4-target{position:absolute;left:-16px;top:300px;z-index:4;display:none;flex-direction:column;align-items:center;gap:5px}
@media(min-width:768px){.svc4-target{display:flex}}
.svc4-target i{width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 12px 26px rgba(16,24,40,.16);display:flex;align-items:center;justify-content:center}
.svc4-target b{font-size:9.5px;font-weight:700;color:#0F172A;text-align:center;line-height:1.2;background:#fff;border-radius:8px;padding:3px 8px;box-shadow:0 6px 16px rgba(16,24,40,.1)}
.svc4-creative{display:none;border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(16,24,40,.22)}
@media(min-width:768px){.svc4-creative{display:flex;position:absolute;right:-6px;bottom:-14px;width:342px;z-index:5}}
.svc4-cleft{flex:1.15;background:#151A22;color:#fff;padding:13px 13px 12px}
.svc4-cleft .lg{display:flex;align-items:center;gap:6px;font-size:8.6px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:7px}
.svc4-cleft h5{font-size:14px;font-weight:800;line-height:1.25;margin:0 0 8px}
.svc4-check{display:flex;align-items:center;gap:5px;font-size:8.6px;color:rgba(255,255,255,.92);margin-bottom:4px}
.svc4-cta{display:inline-block;margin-top:7px;background:#E8710A;color:#fff;font-size:9.5px;font-weight:800;border-radius:8px;padding:7px 13px}
.svc4-cright{flex:1;position:relative;background:#EEF1F5;display:flex;flex-direction:column}
.svc4-cright img{width:100%;height:96px;object-fit:cover;display:block}
.svc4-cright .cap{padding:8px 10px 6px;font-size:9.3px;font-weight:700;color:#0F172A;line-height:1.35}
.svc4-cright .go{display:flex;align-items:center;justify-content:space-between;padding:0 10px 9px;font-size:8.2px;font-weight:600;color:#475569}
.svc4-goarr{width:20px;height:20px;border-radius:50%;background:#E8710A;display:flex;align-items:center;justify-content:center}
.svc4-budget{position:absolute;left:96px;bottom:-18px;z-index:4;display:none;align-items:center;gap:8px;background:#fff;border-radius:9999px;box-shadow:0 14px 34px rgba(16,24,40,.15);padding:10px 16px;font-size:11px;font-weight:700;color:#0F172A;white-space:nowrap}
@media(min-width:768px){.svc4-budget{display:inline-flex}}

/* ===== Homepage service card 5: KI-Mitarbeiter composition ===== */
.svc5-visual{position:relative;width:100%;max-width:640px;margin:0 auto 26px;min-height:560px;padding-bottom:26px}
@media(min-width:1024px){.svc5-visual{margin:0 0 0 auto}}
@media(max-width:767px){.svc5-visual{min-height:0;display:flex;flex-direction:column;gap:14px;align-items:center}}
.svc5-phone{background:linear-gradient(160deg,#3A3F47 0%,#15181D 55%,#2A2F36 100%);border-radius:34px;padding:7px;box-shadow:-20px 32px 54px rgba(16,24,40,.28),inset 0 1.5px 1.5px rgba(255,255,255,.2);width:238px}
@media(min-width:768px){.svc5-phone{position:absolute;left:198px;top:0;z-index:3}}
.svc5-scr{position:relative;background:#F7F8FA;border-radius:28px;overflow:hidden;clip-path:inset(0 round 28px);padding-bottom:6px}
.svc5-head{display:flex;align-items:center;gap:8px;background:#fff;padding:14px 12px 10px}
.svc5-bot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#F5C518;display:flex;align-items:center;justify-content:center}
.svc5-head b{display:block;font-size:11px;color:#0F172A}
.svc5-on{display:flex;align-items:center;gap:4px;font-size:8.3px;color:#188038;font-weight:600}
.svc5-on::before{content:'';width:5px;height:5px;border-radius:50%;background:#34A853}
.svc5-lbl{font-size:8.6px;font-weight:700;color:#64748B;padding:8px 12px 5px}
.svc5-tiles{display:flex;gap:6px;padding:0 10px}
.svc5-tile{flex:1;background:#fff;border-radius:10px;padding:7px 6px;text-align:center;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.svc5-tile b{display:block;font-size:13px;font-weight:800;color:#0F172A}
.svc5-tile small{font-size:7px;color:#64748B}
.svc5-act{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 4px}
.svc5-act b{font-size:8.6px;font-weight:700;color:#64748B}
.svc5-live{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;font-weight:800;color:#E8A400}
.svc5-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#F5C518}
.svc5-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:11px;margin:0 10px 6px;padding:8px 9px;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.svc5-rico{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.svc5-row b{display:block;font-size:8.8px;color:#0F172A}
.svc5-row small{display:block;font-size:7.6px;color:#64748B}
.svc5-row .t{margin-left:auto;font-size:7px;color:#94A3B8;white-space:nowrap}
.svc5-tabbar{display:flex;justify-content:space-around;background:#fff;border-radius:12px;margin:4px 10px 4px;padding:7px 4px;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.svc5-tb{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6.6px;font-weight:700;color:#94A3B8}
.svc5-tb.on{color:#E8A400}
.svc5-call{position:absolute;left:64px;top:44px;z-index:2;width:78px;height:78px;border-radius:50%;background:#fff;box-shadow:0 16px 36px rgba(16,24,40,.16);display:none;align-items:center;justify-content:center}
.svc5-call::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px solid #EEF1F6}
@media(min-width:768px){.svc5-call{display:flex}}
.svc5-wave{position:absolute;left:6px;top:158px;z-index:2;width:212px;background:#fff;border-radius:9999px;box-shadow:0 12px 28px rgba(16,24,40,.13);padding:11px 16px;display:none;align-items:center;justify-content:center}
@media(min-width:768px){.svc5-wave{display:flex}}
.svc5-chat{background:#fff;border-radius:16px;box-shadow:0 18px 42px rgba(16,24,40,.15);width:232px;overflow:hidden}
@media(min-width:768px){.svc5-chat{position:absolute;left:0;bottom:-4px;z-index:4}}
.svc5-chead{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid #F4F6FA;font-size:10px;font-weight:700;color:#0F172A}
.svc5-chead::before{content:'';width:7px;height:7px;border-radius:50%;background:#F5C518}
.svc5-chead svg{margin-left:auto}
.svc5-msgs{padding:10px 12px}
.svc5-m1{background:#F1F4F9;border-radius:11px;border-top-left-radius:4px;padding:7px 9px;font-size:8.8px;color:#334155;line-height:1.4;max-width:82%;margin-bottom:8px}
.svc5-m2{display:flex;gap:6px;justify-content:flex-end}
.svc5-m2 .bub{background:#FFF3C4;border-radius:11px;border-top-right-radius:4px;padding:7px 9px;font-size:8.8px;color:#3B3A2E;line-height:1.4;max-width:78%}
.svc5-m2 .av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#F5C518;display:flex;align-items:center;justify-content:center;order:-1;align-self:flex-end}
.svc5-input{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F4F6FA;padding:9px 12px;font-size:8.8px;color:#94A3B8}
.svc5-247{position:absolute;right:6px;top:2px;z-index:2;width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:0 16px 38px rgba(16,24,40,.14);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.svc5-247::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1.5px dashed #F1D77E}
@media(min-width:768px){.svc5-247{display:flex}}
.svc5-247 b{font-size:23px;font-weight:800;color:#E8A400}
.svc5-247 small{font-size:8px;color:#64748B;max-width:86px;line-height:1.3}
.svc5-mail{background:#fff;border-radius:14px;box-shadow:0 16px 38px rgba(16,24,40,.14);width:212px;padding:11px 13px}
@media(min-width:768px){.svc5-mail{position:absolute;right:-6px;top:172px;z-index:2}}
@media(max-width:767px){.svc5-mail{display:none}}
.svc5-mh{display:flex;align-items:center;gap:8px;border-bottom:1px solid #F4F6FA;padding-bottom:8px;margin-bottom:7px}
.svc5-mico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#FFF3C4;display:flex;align-items:center;justify-content:center}
.svc5-mh b{display:block;font-size:9.6px;color:#0F172A}
.svc5-mh small{display:block;font-size:7.8px;color:#64748B}
.svc5-mrow{margin-bottom:6px}
.svc5-mrow small{display:block;font-size:7.6px;color:#94A3B8}
.svc5-mrow b{display:block;font-size:9px;color:#0F172A;font-weight:600}
.svc5-ticket{display:flex;align-items:center;justify-content:center;gap:5px;background:#FDEDB1;border-radius:9999px;padding:7px 10px;font-size:9px;font-weight:700;color:#7A5D00}
.svc5-robot{position:absolute;right:26px;bottom:-16px;z-index:3;display:none}
@media(min-width:768px){.svc5-robot{display:block;filter:drop-shadow(0 16px 26px rgba(16,24,40,.2))}}

/* ===== Homepage service card 6: Bewertungsmanagement composition ===== */
.svc6-visual{position:relative;width:100%;max-width:640px;margin:0 auto 26px;min-height:560px;padding-bottom:26px}
@media(min-width:1024px){.svc6-visual{margin:0 0 0 auto}}
@media(max-width:767px){.svc6-visual{min-height:0;display:flex;flex-direction:column;gap:14px;align-items:center}}
.svc6-phone{background:linear-gradient(160deg,#3A3F47 0%,#15181D 55%,#2A2F36 100%);border-radius:34px;padding:7px;box-shadow:-20px 32px 54px rgba(16,24,40,.28),inset 0 1.5px 1.5px rgba(255,255,255,.2);width:244px}
@media(min-width:768px){.svc6-phone{position:absolute;left:200px;top:0;z-index:3}}
.svc6-scr{position:relative;background:#fff;border-radius:28px;overflow:hidden;clip-path:inset(0 round 28px)}
.svc6-h{display:flex;align-items:center;justify-content:space-between;padding:14px 13px 4px;font-size:12px;font-weight:800;color:#0F172A}
.svc6-meta{padding:0 13px;font-size:9.5px;color:#475569;display:flex;align-items:center;gap:5px}
.svc6-sub{padding:2px 13px 0;font-size:8.6px;color:#64748B}
.svc6-tabs{display:flex;gap:2px;border-bottom:1px solid #F1F4F9;padding:0 9px;margin-top:7px}
.svc6-tabs span{font-size:7.6px;font-weight:700;color:#5F6368;letter-spacing:.03em;padding:6px 5px}
.svc6-tabs span.on{color:#1A73E8;border-bottom:2px solid #1A73E8}
.svc6-glabel{padding:9px 13px 0;font-size:9.6px;font-weight:700;color:#0F172A}
.svc6-score{display:flex;align-items:center;gap:7px;padding:2px 13px 1px}
.svc6-score b{font-size:20px;font-weight:800;color:#0F172A}
.svc6-link{padding:0 13px 6px;font-size:8.4px;color:#1A73E8;font-weight:600}
.svc6-rev{display:flex;gap:7px;padding:7px 13px;border-top:1px solid #F6F8FB}
.svc6-av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.svc6-rev .n{display:flex;align-items:center;gap:5px;font-size:8.8px;font-weight:700;color:#0F172A}
.svc6-rev .n small{font-size:7.3px;color:#94A3B8;font-weight:500}
.svc6-rev p{margin:2px 0 0;font-size:8.2px;color:#475569;line-height:1.4}
.svc6-foot{display:flex;align-items:center;gap:7px;padding:9px 13px 12px;border-top:1px solid #F6F8FB;font-size:8.8px;font-weight:600;color:#334155}
.svc6-card{background:#fff;border-radius:14px;box-shadow:0 16px 38px rgba(16,24,40,.14);padding:12px 14px}
.svc6-rleft{width:196px}
@media(min-width:768px){.svc6-rleft{position:absolute;left:0;top:8px;z-index:2}}
.svc6-rleft b{display:block;font-size:10.5px;color:#0F172A;margin:6px 0 3px}
.svc6-rleft p{margin:0;font-size:8.6px;color:#64748B;line-height:1.45}
.svc6-checkbadge{position:absolute;right:-10px;bottom:-10px;width:34px;height:34px;border-radius:50%;background:#34A853;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(52,168,83,.35)}
.svc6-qr{width:186px;text-align:center}
@media(min-width:768px){.svc6-qr{position:absolute;left:6px;top:220px;z-index:2}}
@media(max-width:767px){.svc6-qr{display:none}}
.svc6-qr b{display:block;font-size:10.5px;color:#0F172A;margin-top:7px;line-height:1.3}
.svc6-qr small{display:block;font-size:8.4px;color:#64748B;margin-top:3px;line-height:1.35}
.svc6-newrev{width:206px;position:relative}
@media(min-width:768px){.svc6-newrev{position:absolute;right:-4px;top:0;z-index:2}}
.svc6-bell{position:absolute;right:-12px;top:-12px;width:36px;height:36px;border-radius:50%;background:#34A853;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(52,168,83,.35)}
.svc6-newrev b{display:block;font-size:11px;color:#0F172A;margin-bottom:5px}
.svc6-newrev small{display:block;font-size:8.6px;color:#64748B;margin-top:4px}
.svc6-shield{display:none;align-items:center;gap:10px}
@media(min-width:768px){.svc6-shield{display:flex;position:absolute;right:0;top:158px;z-index:2}}
.svc6-shield .tx{font-size:10.5px;font-weight:700;color:#0F172A;line-height:1.45}
.svc6-shield .tx .g{color:#1F9D4D}
.svc6-answer{width:232px;position:relative}
@media(min-width:768px){.svc6-answer{position:absolute;right:-8px;bottom:-10px;z-index:4}}
@media(max-width:767px){.svc6-answer{display:none}}
.svc6-ah{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.svc6-ah b{font-size:10.5px;color:#0F172A}
.svc6-vis{background:#DFF3E6;color:#1F9D4D;font-size:7.6px;font-weight:700;border-radius:9999px;padding:3px 8px}
.svc6-atext{background:#F8FAFC;border:1px solid #EEF1F6;border-radius:10px;padding:8px 9px;font-size:8.5px;color:#334155;line-height:1.5;margin-bottom:8px}
.svc6-send{display:inline-block;border:1.5px solid #1A73E8;color:#1A73E8;font-size:9px;font-weight:700;border-radius:9999px;padding:6px 12px}
.svc6-plane{position:absolute;right:-10px;bottom:-10px;width:34px;height:34px;border-radius:50%;background:#34A853;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(52,168,83,.35)}
.svc6-stars-g{color:#34A853;letter-spacing:2px;font-size:14px}
.svc6-stars-y{color:#FBBC05;letter-spacing:1px;font-size:9px}
.svc6-stars-o{color:#C9CDD3;letter-spacing:3px;font-size:13px}

/* ===== Realistic iPhone frames (shared) ===== */
.pnl-if-silver{background:linear-gradient(145deg,#F5F6F8 0%,#C9CDD5 20%,#EEF0F3 44%,#A9AFBA 72%,#E7E9ED 100%)!important;padding:3px!important;border-radius:47px!important;box-shadow:-22px 36px 60px rgba(16,24,40,.26),0 6px 18px rgba(16,24,40,.15),inset 0 0 2px rgba(255,255,255,.9)!important}
.pnl-if-graphite{background:linear-gradient(145deg,#4A4F58 0%,#15181D 24%,#3A4048 48%,#0E1116 74%,#2E333B 100%)!important;padding:3px!important;border-radius:47px!important;box-shadow:-22px 36px 60px rgba(16,24,40,.32),0 6px 18px rgba(16,24,40,.18),inset 0 0 2px rgba(255,255,255,.25)!important}
.pnl-if-screen{border:7px solid #0B0D12!important;border-radius:44px!important;clip-path:inset(0 round 37px)!important}
.pnl-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:62px;height:16px;border-radius:9999px;background:#0B0D12;z-index:9}
.pnl-ifbtn{position:absolute;width:3px;border-radius:2px;z-index:0}
.pnl-ifbtn.s{background:#AAB0BB;box-shadow:-1px 0 2px rgba(15,23,42,.3)}
.pnl-ifbtn.g{background:#3A4048;box-shadow:-1px 0 2px rgba(0,0,0,.45)}
.pnl-ifstatus{display:flex;align-items:center;justify-content:space-between;padding:9px 17px 2px;font-size:9.5px;font-weight:700;color:#0F172A}

/* homepage: trim gap after the last service card */
.gs_main_container{padding-bottom:48px!important}
.gs_main_container .gs-section:last-of-type{margin-bottom:0!important}

/* service cards: right visual = cropped + upscaled client mockup (feathered alpha edges) */
.svc-mockimg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
@media(min-width:1024px){.svc-mockimg{width:auto;max-width:100%;max-height:500px;margin:0 auto}}

/* wide screens: dropdowns fill the row (override the 230px cap above) */
@media(min-width:1280px){.shc-advrow .shc-adv-sel select{width:100%;max-width:none;min-width:0}}

.svc-mockimg-link{display:block;cursor:pointer}
.svc-mockimg-link:hover .svc-mockimg{transform:scale(1.01);transition:transform .25s ease}

/* service subpage mobile stats: 2-up compact */
.pnl-statgrid .pnl-stat3{grid-column:1/-1}
.pnl-statgrid .counter,.pnl-statgrid .text-subtitle4{font-size:17px!important}
.pnl-statgrid .text-body3{font-size:12px}

/* service subpage lead widget: tighter on mobile */
@media(max-width:767px){
.subpage-lead{padding:6px!important;max-width:100%!important}
.subpage-lead .lead-step h3{font-size:17px!important;line-height:21px!important}
.subpage-lead .lead-cta-btn{font-size:15px!important;padding:11px 14px!important}
.subpage-lead .hero-lead-box{padding-top:20px!important}
}

/* member names rendered as images (SEO privacy): invert to white on card hover */
.pnl-nameimg{display:inline-block}
.group:hover .pnl-nameimg{filter:brightness(0) invert(1)}

/* ---- Lead generators on mobile: everything was oversized (client feedback).
   Selectors mirror the .subpage-lead rules above so they win on specificity. ---- */
@media(max-width:767px){
.hero-lead-box h3,
.subpage-lead .hero-lead-box h3{font-size:15.5px!important;line-height:19px!important}
.hero-lead-box p,
.hero-lead-box .lead-step-0 span,
.subpage-lead .hero-lead-box p,
.subpage-lead .hero-lead-box .lead-step-0 span{font-size:12px!important;line-height:15.5px!important}
.hero-lead-box input,
.subpage-lead .hero-lead-box input{font-size:14px!important;height:40px!important;padding:0 12px!important;border-radius:12px!important}
.hero-lead-box button,
.subpage-lead .hero-lead-box button{font-size:14px!important;height:40px!important}
.hero-lead-box .lead-sqm-option,
.subpage-lead .hero-lead-box .lead-sqm-option{font-size:11px!important;padding:5px 7px!important;height:auto!important}
.hero-lead-box .lead-sqm-label,
.subpage-lead .hero-lead-box .lead-sqm-label{font-size:10px!important}
.subpage-lead .hero-lead-box .lead-step-2 span,
.subpage-lead .hero-lead-box .lead-step-2 h4{font-size:13px!important;line-height:17px!important}
.hero-lead-box .hero-proof-badge,
.subpage-lead .hero-proof-badge{padding:5px 10px!important}
.subpage-lead .hero-proof-badge .proof-number{font-size:11.5px!important}
.subpage-lead .hero-proof-badge .proof-label{font-size:11px!important}
.subpage-lead .hero-lead-box{padding:26px 14px 14px!important;border-radius:22px!important}
.subpage-lead .hi-circle{width:44px!important;height:44px!important}
.subpage-lead .hi-circle svg{width:22px!important;height:22px!important}
.subpage-lead{padding:4px!important}
}

/* Bewertungsmanagement hero: coloured badge + headline that fits on one line */
.pnl-mgmt-badge{display:inline-flex;align-items:center;gap:8px;background:#E6F4EA;color:#15803D;border:1px solid #C6E7D2;font-size:15px;font-weight:600;padding:9px 18px;border-radius:9999px;text-align:center}
.pnl-mgmt-wrap{max-width:873px}
.pnl-mgmt-h1{font-size:34px;line-height:1.2}
@media(min-width:1280px){
.pnl-mgmt-wrap{max-width:1160px}
.pnl-mgmt-h1{font-size:35px;line-height:1.15;white-space:nowrap}
}
@media(min-width:1440px){
.pnl-mgmt-wrap{max-width:1280px}
.pnl-mgmt-h1{font-size:40px}
}
@media(max-width:767px){.pnl-mgmt-badge{font-size:13.5px;padding:8px 15px}}

/* ---- Service subpages on mobile: sections were far too airy (client feedback).
   Scoped to .pnl-svc-m so desktop and other pages are untouched. ---- */
@media(max-width:767px){
.pnl-svc-m .pt-16{padding-top:34px!important}
.pnl-svc-m .pb-20{padding-bottom:38px!important}
.pnl-svc-m .mb-20{margin-bottom:38px!important}
.pnl-svc-m .mb-16{margin-bottom:30px!important}
.pnl-svc-m .pb-\[108px\]{padding-bottom:48px!important}
.pnl-svc-m .pt-10{padding-top:22px!important}
.pnl-svc-m .pb-10{padding-bottom:22px!important}
.pnl-svc-m .my-10{margin-top:20px!important;margin-bottom:20px!important}
.pnl-svc-m .mb-10{margin-bottom:20px!important}
.pnl-svc-m .my-8{margin-top:16px!important;margin-bottom:16px!important}
.pnl-svc-m .mb-12{margin-bottom:24px!important}
.pnl-svc-m .mt-12{margin-top:24px!important}
.pnl-svc-m .gap-10{gap:20px!important}
.pnl-svc-m .gap-8{gap:16px!important}
}

/* The theme's Tailwind build is purged: `my-6` and `py-2.5` were never
   compiled, so these elements ended up with zero margin/padding. Set them
   explicitly on our own classes. */
.pnl-statgrid{margin:20px 0!important}
.pnl-statgrid > div{padding-top:11px!important;padding-bottom:11px!important}
.pnl-svc-m .pnl-statgrid + p,
.pnl-svc-m .pnl-statgrid + div{margin-top:4px}

/* ---- Mobile showcase (client feedback) ----
   1) headline must sit on exactly two lines (one per sentence)
   2) all city cards visible at once instead of a horizontal scroller */
@media(max-width:767px){
.shc-title{font-size:min(5.5vw,22px)!important;line-height:1.3!important;white-space:nowrap;margin-bottom:10px!important}
.shc-title .shc-blue{white-space:nowrap}
.shc-sub{font-size:13px!important;line-height:1.55!important;margin-bottom:18px!important}
.shc-cityrow{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;overflow:visible!important;padding:2px 0 4px!important}
.shc-citypc{flex:none!important;width:100%!important;height:96px!important;border-radius:13px!important;scroll-snap-align:none!important}
.shc-cp-name{font-size:10.5px!important;letter-spacing:.01em!important;line-height:1.05!important}
.shc-cp-sub{display:none!important}
.shc-cp-btn{font-size:6.5px!important;padding:3px 7px!important;gap:3px!important;margin-top:4px!important}
.shc-cp-btn svg{width:7px!important;height:7px!important}
.shc-cp-badge{width:21px!important;height:21px!important;border-radius:6px!important;top:6px!important;left:6px!important}
.shc-cp-badge svg{width:12px!important;height:12px!important}
.shc-cp-body{left:7px!important;right:5px!important;bottom:7px!important}
}
@media(max-width:359px){
.shc-cp-name{font-size:9.5px!important}
.shc-citypc{height:88px!important}
.shc-cp-btn{font-size:6px!important;padding:3px 5px!important}
}

/* ---- Mobile filter block: fewer rows (client feedback) ----
   pills get compact so 4 fit per row, and the advanced search collapses from
   4 stacked rows to label + 2 rows. */
@media(max-width:767px){
.shc-filter{gap:6px!important;margin-top:14px!important}
.shc-filter .project-item,
.shc-filter .reference-category-item{font-size:11.5px!important;padding:8px 10px!important;gap:5px!important;border-radius:11px!important;border-width:1px!important}
.shc-filter svg{width:13px!important;height:13px!important}
.shc-advrow{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:stretch!important;justify-content:stretch!important}
.shc-advrow > *{min-width:0!important;align-self:stretch!important}
.shc-adv-label{grid-column:1/-1!important;font-size:12.5px!important;text-align:left!important;margin:0 0 -2px!important}
.shc-advrow .shc-adv-sel{width:100%!important;height:40px!important;display:flex!important;align-items:center!important}
.shc-advrow select{height:40px!important;font-size:12.5px!important;min-width:0!important;width:100%!important;max-width:none!important;padding:0 28px 0 11px!important;background-position:right 9px center!important;border-radius:10px!important}
.shc-adv-flag select{padding-left:32px!important}
.shc-adv-flag .shc-flag{left:9px!important;width:16px!important;height:12px!important}
.shc-adv-apply{height:40px!important;font-size:12.5px!important;padding:0 10px!important;justify-content:center!important;border-radius:10px!important;gap:6px!important}
.shc-adv-apply svg{width:14px!important;height:14px!important}
}

/* team member name images: smaller and uniform (client: "einheitlicher und kleinere Schrift wie früher") */
.pnl-nameimg{height:auto;max-height:17px;width:auto;max-width:100%;display:block;margin:0 auto}
@media(min-width:1024px){.pnl-nameimg{max-height:19px}}
.lg\:hidden .pnl-nameimg{margin:0}
/* homepage mobile hero: white CTA (matches "Referenzen") + more air above the title */
.pnl-hero-cta{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0F172A!important;box-shadow:0 6px 18px rgba(16,24,40,.14)}
.pnl-hero-cta:hover{background:#F4F6FA;color:#0F172A}
.pnl-mhero{padding-top:104px}
@media(min-width:768px){.pnl-mhero{padding-top:88px}}
/* header: logo and burger a touch larger */
@media(max-width:767px){
#mobile-menu > a svg{width:116px!important;height:22px!important}
.pnl-burger{width:36px!important;height:36px!important}
.pnl-burger svg{width:24px!important;height:24px!important}
.pnl-burger .pnl-burger-label{display:none!important}
}

/* contact form: "Fragen? Wir sind für Sie da." — chips instead of a cramped row
   (the Tailwind gap utilities used here are not in the purged build, so the
   items had zero spacing and ran into each other). */
.pnl-help{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.pnl-help-title{font-size:14.5px;font-weight:700;color:#0F172A}
.pnl-help-row{display:flex;flex-wrap:wrap;gap:8px}
.pnl-help-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E6E9F0;border-radius:9999px;padding:8px 15px 8px 8px;font-size:13.5px;font-weight:600;color:#334155!important;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.pnl-help-chip:hover{border-color:#C7D2FE;box-shadow:0 4px 12px rgba(16,24,40,.08);color:#0F172A!important}
.pnl-help-chip i{flex:0 0 auto;width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-style:normal}
@media(max-width:767px){
.pnl-help-row{flex-direction:column;align-items:stretch}
.pnl-help-chip{justify-content:flex-start;font-size:13px}
}

/* contact form: Kostenlos / Unverbindlich / 30 Sekunden — real spacing
   (the Tailwind gap utilities on this row are not in the purged build). */
.pnl-benefits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:14px 0 2px}
.pnl-benefit{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E6E9F0;border-radius:9999px;padding:7px 15px 7px 9px;font-size:13.5px;font-weight:600;color:#1F2937;white-space:nowrap}
.pnl-benefit svg{flex:0 0 auto}
@media(max-width:767px){
.pnl-benefits{gap:8px}
.pnl-benefit{font-size:12.5px;padding:6px 12px 6px 8px}
}

/* Service subpages, mobile "Ablauf" timeline: the absolutely-positioned road
   steps had no width cap, so the left-anchored headings/paragraphs ran off the
   right edge and got clipped. Cap each step to the viewport and let text wrap. */
@media(max-width:767px){
.mobile-road-item{max-width:calc(100vw - 30px)!important}
.mobile-road-item .flex{max-width:100%!important}
.mobile-road-item span,
.mobile-road-item p{white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
.mobile-road-item img{flex:0 0 auto}
.mobile-road-item .pl-\[30px\]{padding-left:18px!important}
.mobile-road-item .pr-\[30px\]{padding-right:18px!important}
}

/* touch devices: the yellow before-fill hover sticks after a tap — disable it */
@media (hover: none){
.pnl-tap-btn::before{display:none!important}
.pnl-tap-btn:hover{background-color:inherit}
}

/* Service hero backgrounds: each hero has a tinted Hero.webp positioned at
   z-index:-10. Without a stacking context on .main-container the image renders
   BEHIND the body's white background and is invisible (street page showed
   plain white). isolation creates that context, so the tint shows on every
   service page. */
.main-container{isolation:isolate}

/* --- city-row scroll arrows (desktop; mobile uses the 3-per-row grid) --- */
.shc-cityrow-wrap{position:relative;width:100%;min-width:0}
.shc-cr-btn{display:none;position:absolute;top:42%;transform:translateY(-50%);z-index:6;width:30px;height:30px;border-radius:9999px;background:rgba(255,255,255,.92);border:1px solid #E2E8F0;box-shadow:0 6px 16px rgba(16,24,40,.18);color:#334155;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.shc-cr-btn svg{width:14px;height:14px}
.shc-cr-btn:hover{background:#101A34;color:#fff;transform:translateY(-50%) scale(1.08)}
.shc-cr-prev{left:6px}
.shc-cr-next{right:6px}
@media(min-width:768px){.shc-cr-btn{display:flex}}
/* industry-row arrows — same look as the city-row ones; hidden ≥1280 where the row is a 9-col grid without scroll */
.shc-indrow-wrap{position:relative}
.shc-ir-btn{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:30px;height:30px;border-radius:9999px;background:rgba(255,255,255,.92);border:1px solid #E2E8F0;box-shadow:0 6px 16px rgba(16,24,40,.18);color:#334155;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.shc-ir-btn svg{width:14px;height:14px}
.shc-ir-btn:hover{background:#101A34;color:#fff;transform:translateY(-50%) scale(1.08)}
.shc-ir-prev{left:6px}
.shc-ir-next{right:6px}
@media(min-width:768px){.shc-ir-btn{display:flex}}
@media(min-width:1280px){.shc-ir-btn{display:none}}

/* Service hero headline — same prominence as the Bewertungsmanagement reference */
.pnl-svc-h1{font-size:34px;line-height:1.2}
@media(min-width:1280px){.pnl-svc-h1{font-size:36px;line-height:1.15}}
@media(min-width:1440px){.pnl-svc-h1{font-size:40px}}

/* gs-section top spacing (was purged-class xs:pt-[100px]/lg:pt-[120px]) */
.pnl-gs-top{padding-top:52px}
@media(min-width:1024px){.pnl-gs-top{padding-top:120px}}

/* Homepage services: the heading band matches the hero blue. The container's
   own background is animated per card by home-gsap-action.js — never set it
   with !important here, that blocks the scroll colour change. */
.pnl-gs-top{background:#D4E3FB!important}


/* Desktop header (client 04.08): menu bar a touch larger — and it must not get
   tighter than it already was on narrow laptops. At 1280 the row's three pills
   (logo + nav + icons) already exceeded the space inside the 80px side padding,
   so the bump is tiered and the row's own padding shrinks below 1440.
   Utility classes (h-12, text-button) are overridden via the #id, which wins on
   specificity — no new Tailwind classes, which would be purged. */
@media(min-width:1024px){
  #menu-desktop{padding-left:12px;padding-right:12px}
  #menu-desktop > div > a,
  #menu-desktop > div > ul,
  #menu-desktop > div > div > div,
  #menu-desktop a[href*="/kontakt"]{height:52px}
  #menu-desktop > div > ul{padding-left:12px;padding-right:12px;gap:10px;margin-right:12px}
  #menu-desktop > div > ul .text-button{font-size:16.5px;line-height:16.5px}
  #menu-desktop > div > a > svg{width:145px;height:27px}
  #menu-desktop > div > div > div svg{width:25px;height:25px}
  #menu-desktop a[href*="/kontakt"]{font-size:16.5px}
}
@media(min-width:1280px){
  #menu-desktop{padding-left:40px;padding-right:40px}
  #menu-desktop > div > ul{padding-left:14px;padding-right:14px;gap:12px;margin-right:12px}
  #menu-desktop > div > a > svg{width:132px}
}
@media(min-width:1440px){
  #menu-desktop{padding-left:80px;padding-right:80px}
  #menu-desktop > div > a,
  #menu-desktop > div > ul,
  #menu-desktop > div > div > div,
  #menu-desktop a[href*="/kontakt"]{height:56px}
  #menu-desktop > div > ul{padding-left:16px;padding-right:16px;gap:14px;margin-right:16px}
  #menu-desktop > div > ul .text-button{font-size:17.5px;line-height:17.5px}
  #menu-desktop > div > a > svg{width:140px;height:26px}
  #menu-desktop > div > div > div svg{width:26px;height:26px}
  #menu-desktop a[href*="/kontakt"]{font-size:17px;width:104px}
}