/* =========================================================
       CONTACT PAGE
       Page-specific styles
       ========================================================= */

        .contact-page {
            background:
                radial-gradient(circle at 15% 12%, rgba(249, 115, 22, 0.08), transparent 28%),
                linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
        }

        .contact-page main {
            flex: 1;
        }

        .contact-hero {
            position: relative;
            overflow: hidden;
            padding: clamp(64px, 8vw, 112px) 0 clamp(52px, 7vw, 92px);
            background:
                linear-gradient(110deg, rgba(7, 14, 29, 0.96), rgba(15, 23, 42, 0.84)),
                url("assets/images/1.webp") center / cover no-repeat;
            color: #ffffff;
        }

        .contact-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 76% 30%, rgba(249, 115, 22, 0.23), transparent 30%),
                linear-gradient(90deg, rgba(7, 14, 29, 0.2), transparent 55%);
        }

        .contact-hero::after {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -190px;
            width: 480px;
            height: 480px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            pointer-events: none;
        }

        .contact-hero__inner {
            position: relative;
            z-index: 2;
            max-width: 820px;
        }

        .contact-breadcrumbs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 24px;
            color: rgba(255, 255, 255, 0.67);
            font-size: 0.84rem;
            font-weight: 600;
        }

        .contact-breadcrumbs a {
            color: rgba(255, 255, 255, 0.82);
            transition: color 0.2s ease;
        }

        .contact-breadcrumbs a:hover {
            color: #fb923c;
        }

        .contact-breadcrumbs i {
            font-size: 0.65rem;
            opacity: 0.65;
        }

        .contact-hero__eyebrow {
            width: fit-content;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 18px;
            padding: 8px 13px;
            border: 1px solid rgba(251, 146, 60, 0.38);
            border-radius: 999px;
            background: rgba(249, 115, 22, 0.12);
            color: #fed7aa;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .contact-hero h1 {
            max-width: 760px;
            margin: 0 0 20px;
            color: #ffffff;
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-size: clamp(2.8rem, 6vw, 5.4rem);
            font-weight: 750;
            line-height: 0.98;
            letter-spacing: -0.05em;
        }

        .contact-hero__lead {
            max-width: 690px;
            margin: 0;
            color: rgba(255, 255, 255, 0.78);
            font-size: clamp(1rem, 1.6vw, 1.18rem);
            line-height: 1.65;
        }

        .contact-hero__notice {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            max-width: 700px;
            margin-top: 28px;
            padding: 15px 17px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 17px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.79);
            font-size: 0.88rem;
            line-height: 1.5;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .contact-hero__notice i {
            flex: 0 0 auto;
            margin-top: 2px;
            color: #fb923c;
        }

        .contact-main {
            padding: clamp(56px, 7vw, 96px) 0;
        }

        .contact-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
            gap: clamp(28px, 5vw, 72px);
            align-items: start;
        }

        .contact-section-heading {
            margin-bottom: 30px;
        }

        .contact-section-heading__overline {
            margin-bottom: 10px;
            color: #f97316;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }

        .contact-section-heading h2 {
            margin: 0 0 13px;
            color: #0f172a;
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1.05;
            letter-spacing: -0.035em;
        }

        .contact-section-heading p {
            max-width: 670px;
            margin: 0;
            color: #64748b;
            font-size: 1rem;
            line-height: 1.65;
        }

        .contact-methods {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .contact-method {
            position: relative;
            min-height: 215px;
            overflow: hidden;
            padding: 25px;
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
        }

        .contact-method::after {
            content: "";
            position: absolute;
            right: -48px;
            bottom: -62px;
            width: 145px;
            height: 145px;
            border-radius: 50%;
            background: rgba(249, 115, 22, 0.055);
            transition: transform 0.3s ease;
        }

        .contact-method:hover {
            transform: translateY(-5px);
            border-color: rgba(249, 115, 22, 0.28);
            box-shadow: 0 24px 56px rgba(15, 23, 42, 0.11);
        }

        .contact-method:hover::after {
            transform: scale(1.18);
        }

        .contact-method__icon {
            position: relative;
            z-index: 2;
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            margin-bottom: 19px;
            border-radius: 15px;
            background: rgba(249, 115, 22, 0.11);
            color: #f97316;
            font-size: 1.08rem;
        }

        .contact-method h3 {
            position: relative;
            z-index: 2;
            margin: 0 0 9px;
            color: #0f172a;
            font-size: 1.18rem;
        }

        .contact-method p {
            position: relative;
            z-index: 2;
            margin: 0 0 16px;
            color: #64748b;
            font-size: 0.91rem;
            line-height: 1.55;
        }

        .contact-method a {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #ea580c;
            font-size: 0.91rem;
            font-weight: 750;
            word-break: break-word;
        }

        .contact-method a:hover {
            color: #c2410c;
        }

        .contact-method--wide {
            grid-column: 1 / -1;
            min-height: auto;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 19px;
            align-items: start;
        }

        .contact-method--wide .contact-method__icon {
            margin: 0;
        }

        .contact-method address {
            position: relative;
            z-index: 2;
            margin: 0;
            color: #334155;
            font-size: 0.93rem;
            font-style: normal;
            line-height: 1.65;
        }

        .contact-company-card {
            position: sticky;
            top: 112px;
            overflow: hidden;
            padding: clamp(25px, 4vw, 36px);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 27px;
            background:
                radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.2), transparent 34%),
                linear-gradient(145deg, #0f172a, #172033);
            color: #ffffff;
            box-shadow: 0 28px 65px rgba(15, 23, 42, 0.2);
        }

        .contact-company-card__label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            color: #fdba74;
            font-size: 0.73rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .contact-company-card h2 {
            margin: 0 0 12px;
            color: #ffffff;
            font-family: var(--font-heading, "Outfit", sans-serif);
            font-size: clamp(1.75rem, 3vw, 2.45rem);
            line-height: 1.08;
            letter-spacing: -0.035em;
        }

        .contact-company-card__intro {
            margin: 0 0 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.92rem;
            line-height: 1.6;
        }

        .company-details {
            margin: 0;
        }

        .company-details__row {
            display: grid;
            grid-template-columns: 128px minmax(0, 1fr);
            gap: 14px;
            padding: 15px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.09);
        }

        .company-details dt {
            color: rgba(255, 255, 255, 0.52);
            font-size: 0.73rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .company-details dd {
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.87rem;
            font-weight: 600;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }

        .company-details a {
            color: #fdba74;
        }

        .company-details a:hover {
            color: #ffffff;
        }

        .contact-company-card__actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 11px;
            margin-top: 25px;
        }

        .contact-company-card__actions .btn {
            width: 100%;
        }

        .contact-company-card__secondary {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 18px;
            border: 1px solid rgba(255, 255, 255, 0.17);
            border-radius: 999px;
            color: #ffffff;
            font-size: 0.84rem;
            font-weight: 700;
            transition:
                background 0.2s ease,
                border-color 0.2s ease;
        }

        .contact-company-card__secondary:hover {
            border-color: rgba(255, 255, 255, 0.33);
            background: rgba(255, 255, 255, 0.08);
        }

        .contact-guidance {
            padding: 0 0 clamp(60px, 8vw, 100px);
        }

        .contact-guidance__panel {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 22px;
            align-items: center;
            padding: clamp(24px, 4vw, 38px);
            border: 1px solid #fed7aa;
            border-radius: 25px;
            background:
                radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 35%),
                #fff7ed;
        }

        .contact-guidance__icon {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            background: #f97316;
            color: #ffffff;
            font-size: 1.15rem;
            box-shadow: 0 12px 25px rgba(249, 115, 22, 0.25);
        }

        .contact-guidance h2 {
            margin: 0 0 7px;
            color: #0f172a;
            font-size: 1.35rem;
        }

        .contact-guidance p {
            margin: 0;
            color: #7c2d12;
            font-size: 0.92rem;
            line-height: 1.55;
        }

        .contact-guidance__link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            color: #c2410c;
            font-size: 0.86rem;
            font-weight: 800;
        }

        .contact-guidance__link:hover {
            color: #9a3412;
        }

        .contact-footer-note {
            margin-top: 17px;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.78rem;
            line-height: 1.5;
        }

        .footer__contacts a {
            color: inherit;
        }

        .footer__contacts a:hover {
            color: var(--accent-glow, #fb923c);
        }

        @media (max-width: 980px) {
            .contact-layout {
                grid-template-columns: 1fr;
            }

            .contact-company-card {
                position: relative;
                top: auto;
            }
        }

        @media (max-width: 768px) {
            .contact-hero {
                padding: 50px 0 58px;
            }

            .contact-hero h1 {
                font-size: clamp(2.6rem, 13vw, 4rem);
            }

            .contact-methods {
                grid-template-columns: 1fr;
            }

            .contact-method--wide {
                grid-column: auto;
                grid-template-columns: 1fr;
            }

            .contact-method--wide .contact-method__icon {
                margin-bottom: 2px;
            }

            .contact-guidance__panel {
                grid-template-columns: auto 1fr;
            }

            .contact-guidance__link {
                grid-column: 1 / -1;
                padding-left: 78px;
                white-space: normal;
            }
        }

        @media (max-width: 520px) {
            .contact-main {
                padding-top: 45px;
            }

            .contact-method,
            .contact-company-card {
                border-radius: 20px;
            }

            .contact-method {
                min-height: auto;
                padding: 21px;
            }

            .company-details__row {
                grid-template-columns: 1fr;
                gap: 5px;
            }

            .contact-guidance__panel {
                grid-template-columns: 1fr;
            }

            .contact-guidance__link {
                grid-column: auto;
                padding-left: 0;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .contact-method,
            .contact-method::after {
                transition: none;
            }

            .contact-method:hover {
                transform: none;
            }
        }