/* Black Friday layer on top of the landing page styles. Brand: green #5dbd71, red-orange #f44625, Inter. */
:root {
    --bf-ink: oklch(0.2 0.018 150);
    --bf-ink-2: oklch(0.25 0.022 150);
    --bf-line: oklch(0.38 0.02 150);
    --bf-text: oklch(0.97 0.005 150);
    --bf-muted: oklch(0.84 0.012 150);
    --bf-red: #f44625;
    --bf-green: #5dbd71;
    --bf-strip-h: 42px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Promo strip (inside the fixed header) */
.bf-strip {
    min-height: var(--bf-strip-h);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 16px;
    background: var(--bf-ink);
    color: var(--bf-text);
    font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center;
}
.bf-strip-tag {
    flex-shrink: 0;
    background: var(--bf-red); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px;
}
.bf-strip-link { color: var(--bf-green); font-weight: 700; white-space: nowrap; }
.bf-strip-link:hover, .bf-strip-link:focus-visible { color: #8fd9a0; }
main { padding-top: var(--bf-strip-h); }

/* Hero */
.bf-hero { background: var(--bf-ink); }
.bf-hero .hero-title, .bf-hero .hero-stat strong { color: var(--bf-text); }
.bf-hero .hero-description { color: var(--bf-muted); }
.bf-hero .trust-point { color: var(--bf-text); }
.bf-hero .trust-point i { color: var(--bf-green); }
.bf-hero .hero-stats { border-top-color: var(--bf-line); }
.bf-hero .hero-stat span { color: var(--bf-muted); }
.bf-hero .hero-input-group { border-color: transparent; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.bf-hero .hero-input-group:focus-within { border-color: var(--bf-green); }
.bf-hero .hero-image { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

.bf-badge { background: rgba(255, 177, 45, 0.14); color: #ffd58a; }
.bf-badge i { color: #ffb12d; }

.bf-title { font-size: 44px; font-weight: 800; letter-spacing: -0.01em; }
.bf-pct {
    display: block;
    color: var(--bf-red);
    font-size: clamp(64px, 8.5vw, 116px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
}

.bf-icon-red { background: #fde8e4; color: var(--bf-red); }

/* Countdown */
.bf-countdown { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 28px; }
.bf-countdown-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd58a; }
.bf-countdown-units { display: flex; gap: 8px; }
.bf-unit {
    display: flex; flex-direction: column; align-items: center; min-width: 58px;
    padding: 8px 6px; border: 1px solid var(--bf-line); border-radius: 8px; background: var(--bf-ink-2);
}
.bf-unit strong { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--bf-text); font-variant-numeric: tabular-nums; }
.bf-unit span { font-size: 11px; color: var(--bf-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bf-countdown-ended { color: #ffd58a; font-weight: 600; }

/* Form section */
.bf-form-section.cta-form-section { background: var(--bf-ink) !important; }
.bf-form-section .cta-form-box h2 { color: #1a1a2e !important; }
.bf-form-section .bf-form-pct { color: var(--bf-red); }
.bf-form-section .cta-subtitle { text-align: center; }
.bf-form-section .cta-badges span { color: #3a8a4b !important; }
.bf-field label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; }
.bf-field label .bf-opt { font-weight: 400; color: #666; }
.bf-field input[aria-invalid="true"] { border-color: #c62828 !important; }
.bf-field-error { color: #b42318; font-size: 13px; margin-top: 6px; }
.bf-form-status { margin-top: 16px; padding: 14px 16px; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.bf-form-status.error { background: #fdecea; color: #8a1c13; }
.bf-form-status.success { background: #e8f5eb; color: #1f5a2c; }
.bf-form-status a { text-decoration: underline; }
.bf-captcha { min-height: 0; margin-top: 4px; }
.cta-form-section button[type="submit"][disabled] { opacity: 0.6; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
.bf-success { text-align: center; padding: 10px 0; }
.bf-success i { font-size: 44px; color: var(--bf-green); margin-bottom: 12px; display: block; }
.bf-success h3 { font-size: 24px; margin-bottom: 8px; }
.bf-success p { color: #555; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--bf-green); outline-offset: 2px; }

@media (max-width: 1024px) {
    .bf-title { font-size: 36px; }
}
@media (max-width: 768px) {
    .bf-strip { font-size: 13px; gap: 8px; }
    .bf-countdown { justify-content: center; }
    .bf-title { font-size: 30px; }
    .bf-pct { font-size: 64px; }
}
.bf-short { display: none; }
@media (max-width: 600px) {
    .bf-long { display: none; }
    .bf-short { display: inline; }
    .bf-strip { gap: 8px; padding: 8px 10px; white-space: nowrap; }
    .bf-strip-tag { font-size: 11px; padding: 3px 7px; }
}
@media (max-width: 480px) {
    .bf-title { font-size: 26px; }
    .bf-pct { font-size: 56px; }
    .bf-unit { min-width: 52px; }
    .bf-unit strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.bf-call-alt { text-align: center; font-size: 14px; color: #555; margin-top: 12px; }
.bf-call-alt a { color: #2f7a40; font-weight: 600; text-decoration: underline; }

/* Red bow from the Black Friday ad creative: wraps the hero image's corner like a gift (decorative). */
.bf-bow { position: absolute; pointer-events: none; height: auto; }
.bf-bow-desktop {
    top: 0; right: 0; width: 200px; z-index: 2; border-top-right-radius: 12px;
    transform: scaleX(-1);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.bf-bow-mobile { display: none; }
@media (max-width: 1024px) { .bf-bow-desktop { width: 150px; } }
@media (max-width: 768px) {
    /* The fixed header covers the hero's first 80px on phones: start the bow just below it. */
    .bf-bow-mobile { display: block; top: 80px; left: 0; width: 84px; z-index: 1; }
    .bf-hero { padding-top: 136px; }
}

/* Comfortable tap targets on phones for small text links. */
@media (max-width: 768px) {
    .bf-strip-link { padding: 10px 0; }
    .footer-nav-col a, .footer-legal a, .footer-contact-info a { display: inline-block; padding: 6px 0; }
}

/* In-page jumps land below the fixed header (strip + header). */
#success, #hero, #portfolio, #reviews, #expertise { scroll-margin-top: 150px; }
@media (max-width: 768px) { #success, #hero, #portfolio, #reviews, #expertise { scroll-margin-top: 130px; } }

/* Moving logo strip pauses on hover; with reduced motion nothing moves or fades in. */
.trust-bar-logos:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .trust-bar-logos { animation: none !important; }
    .service-card, .portfolio-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}