/* ── Background Pattern Classes ── */
/* All patterns are subtle (5-15% opacity) and sit behind content */

/* 1. Ledger lines — faint horizontal ruled lines (accounting paper) */
.bg-ledger-lines {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 23px,
        rgba(41, 142, 82, 0.08) 23px,
        rgba(41, 142, 82, 0.08) 24px
    );
    background-size: 100% 24px;
}

/* 2. Subtle dot-grid / graph-paper pattern */
.bg-dot-grid {
    background-image: radial-gradient(circle, rgba(46, 158, 91, 0.12) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

/* 3. Thin diagonal line pattern for footer */
.bg-diagonal-lines {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 12px,
        rgba(255, 255, 255, 0.04) 12px,
        rgba(255, 255, 255, 0.04) 13px
    );
    background-size: 18px 18px;
}

/* 4. Very faint currency symbols pattern (Services/Contact) */
.bg-currency-pattern {
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(41, 142, 82, 0.05) 0, transparent 50px),
        radial-gradient(circle at 85% 40%, rgba(41, 142, 82, 0.04) 0, transparent 60px),
        radial-gradient(circle at 50% 80%, rgba(41, 142, 82, 0.05) 0, transparent 50px);
}

/* 5. Graph-paper with smaller dots for Quality page */
.bg-graph-paper {
    background-image: 
        linear-gradient(rgba(41, 142, 82, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 142, 82, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ── Corner Accent Shapes (inline SVG positioned absolutely) ── */
.bg-accent-wrap {
    position: relative;
}

.bg-accent-triangle {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
}

.bg-accent-triangle.top-right {
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

.bg-accent-triangle.bottom-right {
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
}

.bg-accent-triangle.top-left {
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
}

.bg-accent-triangle.bottom-left {
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
}

/* Bar chart silhouette for hero */
.bg-chart-accent {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    bottom: 10%;
    right: 5%;
    width: 260px;
    height: 180px;
    opacity: 0.05;
}

/* Pie chart accent for corner */
.bg-pie-accent {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.04;
}

.bg-pie-accent.top-right {
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
}

/* ── Service card background icons ── */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    font-size: 8rem;
    right: -10px;
    bottom: -15px;
    line-height: 1;
    color: var(--green-dark);
    transition: transform var(--transition-standard);
}

.service-card:hover .service-card-bg {
    transform: scale(1.1) rotate(-3deg);
}

.service-card > *:not(.service-card-bg) {
    position: relative;
    z-index: 1;
}

/* ── Photo Backgrounds ── */
/* Each photo gets a green brand overlay via ::before pseudo-element.
   Text legibility is maintained via an additional dark layer. */

/* Shared overlay mixin pattern:
   .photo-bg uses ::before for the green gradient + dark overlay,
   and all content inside needs position: relative; z-index: 1 to sit above it. */

.photo-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.photo-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.photo-bg > * {
    position: relative;
    z-index: 1;
}

/* ── 1. Hero photo background ── */
.hero.photo-hero {
    background:
        linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.82) 0%,
            rgba(27, 42, 74, 0.55) 35%,
            rgba(41, 142, 82, 0.45) 65%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        url('../img/backgrounds/pexels-photo-4514086.jpeg.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
    filter: saturate(0.85);
}

/* On touch screens fixed attachment is janky/unsupported — stay static */
@media (max-width: 768px) {
    .hero.photo-hero {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.photo-hero {
        background-attachment: scroll;
    }
}

.hero.photo-hero .hero-title {
    color: var(--white);
}

.hero.photo-hero .hero-subtitle {
    color: var(--green-light);
}

.hero.photo-hero .hero-desc {
    color: rgba(255, 255, 255, 0.9);
}

.hero.photo-hero .hero-tagline {
    color: rgba(255, 255, 255, 0.8);
}

.hero.photo-hero .hero-logo {
    filter: brightness(0) invert(1);
}

/* ── 2. Page header photo banners ── */
.page-header.photo-header-about {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.7) 0%,
        rgba(41, 142, 82, 0.55) 100%
    ),
    url('../img/backgrounds/about.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    filter: saturate(0.85);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header.photo-header-services {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.7) 0%,
        rgba(41, 142, 82, 0.55) 100%
    ),
    url('../img/backgrounds/services.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    filter: saturate(0.85);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header.photo-header-quality {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.7) 0%,
        rgba(41, 142, 82, 0.55) 100%
    ),
    url('../img/backgrounds/quality.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    filter: saturate(0.85);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header.photo-header-team {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.7) 0%,
        rgba(41, 142, 82, 0.55) 100%
    ),
    url('../img/backgrounds/team.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    filter: saturate(0.85);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header.photo-header-clients {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.7) 0%,
        rgba(41, 142, 82, 0.55) 100%
    ),
    url('../img/backgrounds/clients.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    filter: saturate(0.85);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header.photo-header-about h1,
.page-header.photo-header-services h1,
.page-header.photo-header-quality h1,
.page-header.photo-header-team h1,
.page-header.photo-header-clients h1 {
    color: var(--white);
}

.page-header.photo-header-about p,
.page-header.photo-header-services p,
.page-header.photo-header-quality p,
.page-header.photo-header-team p,
.page-header.photo-header-clients p {
    color: rgba(255, 255, 255, 0.9);
}

.page-header.photo-header-about::after,
.page-header.photo-header-services::after,
.page-header.photo-header-quality::after,
.page-header.photo-header-team::after,
.page-header.photo-header-clients::after {
    display: none;
}

/* ── 3. Contact section photo background ── */
.contact-section.photo-contact {
    background: linear-gradient(
        135deg,
        rgba(27, 42, 74, 0.75) 0%,
        rgba(41, 142, 82, 0.6) 100%
    ),
    url('../img/backgrounds/contact.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
    filter: saturate(0.8);
}

.contact-section.photo-contact .contact-form-wrap {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}

.contact-section.photo-contact .contact-info h2 {
    color: var(--white);
}

.contact-section.photo-contact .contact-detail strong {
    color: rgba(255, 255, 255, 0.95);
}

.contact-section.photo-contact .contact-detail p {
    color: rgba(255, 255, 255, 0.8);
}

/* ── 4. Services tab panel photo backgrounds ── */
.tab-panel-bg-audit {
    background-image: url('../img/backgrounds/calculator-calculation-insurance-finance-53621.jpeg.jpg');
}

.tab-panel-bg-taxation {
    background-image: url('../img/backgrounds/calculator.jpg');
}

.tab-panel-bg-consultancy {
    background-image: url('../img/backgrounds/finance-charts.jpg');
}

.tab-panel-bg-accounting {
    background-image: url('../img/backgrounds/accounting-desk.jpg');
}

/* ── WebP photo backgrounds (JPEG fallbacks above) ──
   Browsers that can decode WebP use the ~50-60% smaller .webp files. */
@supports (background-image: url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAFAJiWkAANwAP79NmgA")) {
    .hero.photo-hero {
        background-image:
            linear-gradient(
                135deg,
                rgba(27, 42, 74, 0.82) 0%,
                rgba(27, 42, 74, 0.55) 35%,
                rgba(41, 142, 82, 0.45) 65%,
                rgba(0, 0, 0, 0.55) 100%
            ),
            url('../img/backgrounds/pexels-photo-4514086.jpeg.webp');
    }

    .page-header.photo-header-about {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(41, 142, 82, 0.55) 100%
        ),
        url('../img/backgrounds/about.webp');
    }

    .page-header.photo-header-services {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(41, 142, 82, 0.55) 100%
        ),
        url('../img/backgrounds/services.webp');
    }

    .page-header.photo-header-quality {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(41, 142, 82, 0.55) 100%
        ),
        url('../img/backgrounds/quality.webp');
    }

    .page-header.photo-header-team {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(41, 142, 82, 0.55) 100%
        ),
        url('../img/backgrounds/team.webp');
    }

    .page-header.photo-header-clients {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.7) 0%,
            rgba(41, 142, 82, 0.55) 100%
        ),
        url('../img/backgrounds/clients.webp');
    }

    .contact-section.photo-contact {
        background-image: linear-gradient(
            135deg,
            rgba(27, 42, 74, 0.75) 0%,
            rgba(41, 142, 82, 0.6) 100%
        ),
        url('../img/backgrounds/contact.webp');
    }

    .tab-panel-bg-audit {
        background-image: url('../img/backgrounds/calculator-calculation-insurance-finance-53621.jpeg.webp');
    }

    .tab-panel-bg-taxation {
        background-image: url('../img/backgrounds/calculator.webp');
    }

    .tab-panel-bg-consultancy {
        background-image: url('../img/backgrounds/finance-charts.webp');
    }

    .tab-panel-bg-accounting {
        background-image: url('../img/backgrounds/accounting-desk.webp');
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bg-accent-triangle.top-right { width: 120px; height: 120px; }
    .bg-accent-triangle.bottom-right { width: 90px; height: 90px; }
    .bg-accent-triangle.top-left { width: 90px; height: 90px; }
    .bg-accent-triangle.bottom-left { width: 70px; height: 70px; }
    .bg-chart-accent { width: 160px; height: 110px; }
    .bg-pie-accent.top-right { width: 90px; height: 90px; top: -20px; right: -20px; }

    .page-header.photo-header-about,
    .page-header.photo-header-services,
    .page-header.photo-header-quality,
    .page-header.photo-header-team,
    .page-header.photo-header-clients {
        min-height: 240px;
    }
}

@media (max-width: 480px) {
    .bg-accent-triangle.top-right { width: 80px; height: 80px; }
    .bg-accent-triangle.bottom-right { width: 60px; height: 60px; }
    .bg-chart-accent { display: none; }

    .page-header.photo-header-about,
    .page-header.photo-header-services,
    .page-header.photo-header-quality,
    .page-header.photo-header-team,
    .page-header.photo-header-clients {
        min-height: 200px;
    }
}