/* ============================================
    FAQ PAGE
    ============================================ */
            nav a.active { color: var(--blue); border-color: var(--blue); }

            .breadcrumb {
            font-family: var(--font-body);
            font-size: 13px;
            color: var(--blue-deep);
            opacity: 0.65;
            margin-bottom: 22px;
            }
            .breadcrumb a { color: var(--blue-deep); text-decoration: none; }
            .breadcrumb a:hover { color: var(--blue); }

            .faq-hero {
                display: grid;
                grid-template-columns: 1fr 1fr;

                min-height: calc(100vh - 82px);
            }

            .faq-hero-media {
            position: relative;
            min-height: 400px;

            display: flex;
            align-items: flex-end;

            padding: 28px;

            overflow: hidden;
            }

            .faq-hero-media img {
            position: absolute;
            inset: 0;

            width: 100%;
            height: 100%;

            display: block;
            object-fit: cover;
            object-position: center;
            }

            /* Subtle overlay so the label remains readable */
            .faq-hero-media::after {
            content: "";

            position: absolute;
            inset: 0;

            pointer-events: none;
            }

            .faq-hero-media-label {
            position: relative;
            z-index: 2;

            padding: 8px 14px;

            border: 1px solid rgba(255, 255, 255, 0.4);
            background: rgba(6, 62, 82, 0.35);

            color: #ffffff;

            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: 0.1em;
            text-transform: uppercase;

            backdrop-filter: blur(6px);
            }

            .faq-hero-content {
            padding: 56px clamp(20px, 5vw, 60px) 44px clamp(20px, 5vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            }

            .faq-hero-content h1 {
            font-size: clamp(26px, 3vw, 34px);
            line-height: 1.02;
            margin-bottom: 22px;
            }

            .faq-hero-sub {
            font-size: 16px;
            line-height: 1.65;
            color: var(--back);
            max-width: 480px;
            margin-bottom: 32px;
            }

            @media (max-width: 860px) {
            .faq-hero { grid-template-columns: 1fr; }
            .faq-hero-media { min-height: 240px; }
            .faq-hero-content { padding: 60px clamp(20px, 6vw, 60px); }
            }

            /* ---- FAQ list ---- */
            .faq-list {
            max-width: 880px;
            margin: 0 auto;
            padding: 90px clamp(20px, 4vw, 60px) 40px;
            }

            .faq-group { margin-bottom: 56px; }
            .faq-group:last-child { margin-bottom: 0; }

            .faq-group-label {
            border-bottom: 1px solid var(--blue-line);
            padding-bottom: 16px;
            margin-bottom: 6px;
            }

            .faq-row {
            border-bottom: 1px solid var(--blue-line);
            }

            .faq-row summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 24px 4px;
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 17px;
            color: var(--blue-deep);
            }
            .faq-row summary::-webkit-details-marker { display: none; }
            .faq-row summary:hover { color: var(--blue); }

            .faq-icon {
            position: relative;
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            }
            .faq-icon::before, .faq-icon::after {
            content: "";
            position: absolute;
            background: var(--blue);
            transition: transform 0.25s ease;
            }
            .faq-icon::before {
            left: 0; top: 50%;
            width: 100%; height: 2px;
            transform: translateY(-50%);
            }
            .faq-icon::after {
            top: 0; left: 50%;
            width: 2px; height: 100%;
            transform: translateX(-50%);
            }
            .faq-row[open] .faq-icon::after { transform: translateX(-50%) scaleY(0); }

            .faq-answer {
            padding: 0 4px 26px;
            max-width: 640px;
            }
            /* Actions under an answer - same side padding as the copy */
            .faq-answer-actions {
            padding: 0 4px 26px;
            }

            /* Long labels wrap instead of overflowing on narrow screens */
            .faq-answer-actions .btn {
            max-width: 100%;
            text-align: center;
            }

            .faq-answer p {
            font-size: 15px;
            line-height: 1.7;
            color: var(--blue-deep);
            opacity: 0.9;
            }

            /* ---- CTA band ---- */
            .faq-cta {
            background: var(--blue-pale);
            text-align: center;
            padding: 90px clamp(20px, 6vw, 60px);
            }
            .faq-cta h2 {
            font-size: clamp(19px, 1.8vw, 23px);
            margin-bottom: 14px;
            }
            .faq-cta p {
            color: var(--blue-deep);
            font-size: 16px;
            margin-bottom: 30px;
            }