/* =============================================================
   index.css — Homepage-specific styles for Mercury Integrated
   Manufacturing. Loaded only on index.html.

   Depends on: mercury-override.css (brand tokens defined there)
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   BRAND TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
    --c-primary:   #454646;
    --c-secondary: #b0ce5a;
    --c-light:     #dcdfdf;
    --c-white:     #ffffff;
    --c-black:     #0c0a0c;

    /* Legacy aliases kept for backwards compatibility */
    --c-dark:  #454646;
    --c-green: #b0ce5a;
}


/* ─────────────────────────────────────────────────────────────
   SHARED TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────────── */
.hp-section-header {
    text-align: center;
    padding-bottom: 48px;
}

.hp-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--c-secondary);
    margin-bottom: 14px;
}

.hp-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--c-black);
    line-height: 1.18;
    margin-bottom: 18px;
    text-align: center;
}
.hp-title .highlight    { color: var(--c-secondary) !important; }
.hp-title--light        { color: #ffffff !important; }
.hp-title--left         { text-align: left !important; }

/* Body copy helper — replaces recurring inline paragraph styles */
.hp-body-copy {
    font-size: 15px;
    color: #454646;
    line-height: 1.9;
    margin-bottom: 28px;
}

/* Push spacing for buttons/links that follow sections */
.hp-btn--push    { margin-top: 32px; display: inline-block; }
.hp-link--push   { margin-top: 28px; display: inline-flex; }

/* Capabilities grid footer link spacing */
.hp-cap-footer   { margin-top: 12px; }

/* Video description text (light on dark bg) */
.hp-video__desc {
    font-size: 15px;
    color: rgba(220, 221, 223, 0.70);
    line-height: 1.85;
    margin-bottom: 32px;
}

/* Video caption flex row */
.hp-video__caption-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-subtitle {
    font-size: 16px;
    color: #334155;
    line-height: 1.85;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, gap 0.2s;
}
.view-all-link:hover {
    border-color: var(--c-secondary);
    color: var(--c-secondary);
    gap: 10px;
    text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 1 — CAPABILITIES
   ───────────────────────────────────────────────────────────── */
.hp-capabilities {
    background: #F8FAFC;
    padding: 90px 0 60px;
}

/* 7-col grid, collapses to 5 → 4 → 3 → 2 at breakpoints */
.hp-cap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.hp-cap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px 18px;
    background: var(--c-white);
    border: 1.5px solid var(--c-light);
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: var(--c-black);
    box-shadow: 0 2px 8px rgba(12, 10, 12, 0.04);
    transition: all 0.22s ease;
}
.hp-cap-card:hover {
    border-color: var(--c-secondary);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(176, 206, 90, 0.22);
    text-decoration: none;
    color: var(--c-black);
}

.hp-cap-card__icon {
    width: 52px;
    height: 52px;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--c-primary);
    transition: background 0.22s, color 0.22s;
}
.hp-cap-card:hover .hp-cap-card__icon {
    background: var(--c-secondary);
    color: var(--c-black);
}

.hp-cap-card__name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: #1E293B;
}


/* ─────────────────────────────────────────────────────────────
   STATS BAR
   ───────────────────────────────────────────────────────────── */
/* The headline figure here is years in business, counted from 1920,
   so the bar sits on the archive plant photo. Washed in brand grey
   rather than black so it still reads as a light band between the
   two white sections either side of it. */
.hp-stats-bar {
    background:
        linear-gradient(
            rgba(69, 70, 70, 0.88),
            rgba(69, 70, 70, 0.88)
        ),
        url('../img/history/history_hero.webp') center center / cover no-repeat,
        var(--c-primary);
}

.hp-stats-bar__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}

.hp-stats-bar__divider {
    width: 1px;
    background: rgba(220, 223, 223, 0.15);
    margin: 20px 0;
    flex-shrink: 0;
}

.hp-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 36px 20px;
}

.hp-stat-item__num {
    font-size: 42px;
    font-weight: 900;
    color: var(--c-secondary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.hp-stat-item__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 223, 223, 0.65);
}


/* ─────────────────────────────────────────────────────────────
   SECTION 2 — PRODUCTS & PARTNERS
   ───────────────────────────────────────────────────────────── */
.hp-products {
    background: var(--c-white);
    padding: 100px 0;
}

.hp-products__text {
    padding-right: 20px;
}

.hp-market-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.hp-market-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #F1F5F9;
    border: 1px solid var(--c-light);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-primary);
    transition: background 0.2s, border-color 0.2s;
}
.hp-market-item i            { font-size: 10px; color: var(--c-secondary); }
.hp-market-item:hover        { background: var(--c-secondary); border-color: var(--c-secondary); color: var(--c-black); }
.hp-market-item:hover i      { color: var(--c-black); }

/* Partners card */
.hp-partners-card {
    background: var(--c-white);
    border: 1.5px solid var(--c-light);
    border-radius: 14px;
    padding: 28px 30px 32px;
    box-shadow: 0 8px 32px rgba(12, 10, 12, 0.07);
}

.hp-partners-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-light);
}

.hp-partners-card__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-black);
}

.hp-partners-card__count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-secondary);
    padding: 4px 12px;
    border-radius: 20px;
}

/* Logo grid — 4 cols × 3 rows */
.hp-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.hp-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    border-radius: 6px;
    overflow: hidden;
    transition: background 0.2s;
}
.hp-logo-cell:hover { background: #F8FAFC; }

.hp-logo-cell img {
    max-height: 68px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(80%) opacity(0.78);
    transition: filter 0.25s, transform 0.25s;
}
.hp-logo-cell:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06);
}


/* ─────────────────────────────────────────────────────────────
   SECTION 3 — VIDEO / FACILITIES
   ───────────────────────────────────────────────────────────── */
/* "Our Facilities & Team — real processes, real people", so this sits
   on the shop-floor photo of the crew rather than a machine close-up. */
.hp-video {
    background:
        linear-gradient(
            rgba(12, 10, 12, 0.86),
            rgba(12, 10, 12, 0.86)
        ),
        url('../img/about/about_hero.webp') center center / cover no-repeat,
        var(--c-black);
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}

/* Green glow dropped at client request; the neutral gray wash stays so the
   section still has depth over the background photo. */
.hp-video__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 95% 20%, rgba(69, 70, 70, 0.50) 0%, transparent 70%);
    pointer-events: none;
}

.hp-video__copy             { padding-right: 30px; }
.hp-video__copy .hp-title   { text-align: left; }

.hp-video-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hp-video-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hp-video-feature__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--c-secondary);
    border-radius: 50%;
    margin-top: 6px;
}

.hp-video-feature strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 2px;
}

.hp-video-feature span {
    font-size: 13px;
    color: rgba(220, 223, 223, 0.55);
    line-height: 1.5;
}

.hp-video__embed-col    { padding-left: 24px; }
.hp-video__frame-wrap   { position: relative; }

/* green halo behind the video frame removed at client request */
.hp-video__glow {
    display: none;
}

/* YouTube 16:9 responsive embed */
.yt-embed-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 32px 80px rgba(12, 10, 12, 0.65),
        0 0 0 1px rgba(176, 206, 90, 0.15);
    z-index: 1;
}
.yt-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Decorative corner accents */
.yt-corner-accent {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 52px;
    height: 52px;
    border-top: 3px solid var(--c-secondary);
    border-left: 3px solid var(--c-secondary);
    border-radius: 12px 0 0 0;
    pointer-events: none;
    z-index: 2;
}
.yt-corner-accent-br {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 52px;
    height: 52px;
    border-bottom: 3px solid var(--c-secondary);
    border-right: 3px solid var(--c-secondary);
    border-radius: 0 0 12px 0;
    pointer-events: none;
    z-index: 2;
}

.hp-video__caption {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(220, 223, 223, 0.55);
    z-index: 1;
}

.hp-video__live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--c-secondary);
    border-radius: 50%;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.3); }
}

.hp-video__yt-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-secondary);
    text-decoration: none;
    transition: opacity 0.2s;
}
.hp-video__yt-link:hover {
    opacity: 0.75;
    color: var(--c-secondary);
    text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 4 — MISSION / PURPOSE
   ───────────────────────────────────────────────────────────── */
.hp-mission {
    background: var(--c-white);
    padding: 100px 0;
}

.hp-mission__img-col    { padding-right: 16px; }

.hp-mission__img-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(12, 10, 12, 0.14);
}
.hp-mission__img-wrap img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}
/* green overlay tint removed at client request */
.hp-mission__img-wrap::after {
    content: none;
}

/* Floating badge over image */
.hp-mission__img-badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: var(--c-secondary);
    color: var(--c-black);
    padding: 18px 22px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(176, 206, 90, 0.35);
    z-index: 2;
}
.hp-mission__img-badge__num {
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}
.hp-mission__img-badge__text {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-top: 4px;
}

.hp-mission__content .hp-eyebrow  { display: block; }
.hp-mission__content .hp-title    { text-align: left; }

/* Checklist */
.hp-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.hp-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    border-bottom: 1px solid #F1F5F9;
}
.hp-check-list li:last-child { border-bottom: none; }

.hp-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--c-secondary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--c-black);
    border-bottom: 2px solid var(--c-black);
    transform: rotate(40deg) translate(-1px, -1px);
}

/* Stats trio */
.hp-mission__stats {
    display: flex;
    gap: 0;
    margin-bottom: 36px;
    border: 1.5px solid var(--c-light);
    border-radius: 10px;
    overflow: hidden;
}
.hp-mission__stat {
    flex: 1;
    text-align: center;
    padding: 20px 12px;
    border-right: 1.5px solid var(--c-light);
}
.hp-mission__stat:last-child { border-right: none; }

.hp-mission__stat-num {
    display: block;
    font-size: 30px;
    font-weight: 900;
    color: var(--c-secondary);
    line-height: 1;
}
.hp-mission__stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
    margin-top: 5px;
}

.hp-mission__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}


/* ─────────────────────────────────────────────────────────────
   CTA STRIP
   ───────────────────────────────────────────────────────────── */
/* Uses the banner supplied specifically for call-to-action strips —
   the same artwork behind the pre-footer CTA on the interior pages,
   so the two read as one recurring element across the site. */
.hp-cta-strip {
    background:
        linear-gradient(
            rgba(12, 10, 12, 0.86),
            rgba(12, 10, 12, 0.86)
        ),
        url('../img/backgrounds/cta-banner.webp') center center / cover no-repeat,
        var(--c-black);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
/* green corner glow removed at client request */
.hp-cta-strip::after {
    content: none;
}

.hp-cta-strip__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--c-secondary);
}

.hp-cta-strip__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--c-secondary);
    margin-bottom: 10px;
}

.hp-cta-strip__title {
    font-size: 36px;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.2;
    margin: 0;
}

.hp-cta-strip__btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .hp-cap-grid    { grid-template-columns: repeat(5, 1fr); }
    .hp-title       { font-size: 32px; }
}

@media (max-width: 991px) {
    .hp-capabilities            { padding: 70px 0 50px; }
    .hp-cap-grid                { grid-template-columns: repeat(4, 1fr); }
    .hp-products                { padding: 70px 0; }
    .hp-products__text          { padding-right: 0; margin-bottom: 40px; }
    .hp-video                   { padding: 70px 0 80px; }
    .hp-video__copy             { padding-right: 0; margin-bottom: 40px; }
    .hp-video__embed-col        { padding-left: 0; }
    .hp-mission                 { padding: 70px 0; }
    .hp-mission__img-col        { padding-right: 0; margin-bottom: 40px; }
    .hp-mission__img-wrap img   { height: 380px; }
    .hp-cta-strip__title        { font-size: 28px; }
    .hp-cta-strip__btns         { justify-content: center; margin-top: 24px; }
}

@media (max-width: 767px) {
    .hp-cap-grid                { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .hp-title                   { font-size: 26px; }
    .hp-stats-bar__inner        { flex-wrap: wrap; }
    .hp-stats-bar__divider      { display: none; }
    .hp-stat-item               { flex: 1 1 45%; border-bottom: 1px solid rgba(220, 223, 223, 0.10); }
    .hp-stat-item__num          { font-size: 30px; }
    .hp-logo-grid               { grid-template-columns: repeat(3, 1fr); }
    .hp-mission__img-wrap img   { height: 280px; }
    .hp-cta-strip               { padding: 52px 0; }
    .hp-cta-strip__title        { font-size: 22px; }
    .hp-cta-strip__btns         { justify-content: center; }
}

@media (max-width: 480px) {
    .hp-cap-grid    { grid-template-columns: repeat(2, 1fr); }
    .hp-logo-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE-ONLY HERO CTA STACK
   Reliable fallback for the slider CTAs which don't lay out
   well on small screens due to absolute positioning.
   ───────────────────────────────────────────────────────────── */
.hp-hero-mobile-cta { display: none; }

@media (max-width: 767px) {
    /* Hide the Revolution Slider buttons on mobile — they overlap or
       go off-screen at narrow widths */
    .hero-slider-area #s1-cta1,
    .hero-slider-area #s1-cta2,
    .hero-slider-area #s2-cta1,
    .hero-slider-area #s2-cta2,
    .hero-slider-area #s3-cta1,
    .hero-slider-area #s3-cta2 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Show the stacked HTML CTA strip below the hero instead */
    .hp-hero-mobile-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px 20px;
        background: #1a1a1a;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .hp-hero-mobile-cta__btn {
        display: block;
        width: 100%;
        padding: 14px 20px;
        text-align: center;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border-radius: 2px;
        text-decoration: none !important;
        line-height: 1.3;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
    .hp-hero-mobile-cta__btn--primary {
        background: #b0ce5a;
        color: #1a1a1a;
        border: 2px solid #b0ce5a;
    }
    .hp-hero-mobile-cta__btn--primary:hover,
    .hp-hero-mobile-cta__btn--primary:focus {
        background: #9bb84a;
        border-color: #9bb84a;
        color: #1a1a1a;
    }
    .hp-hero-mobile-cta__btn--outline {
        background: transparent;
        color: #ffffff;
        border: 2px solid #ffffff;
    }
    .hp-hero-mobile-cta__btn--outline:hover,
    .hp-hero-mobile-cta__btn--outline:focus {
        background: #ffffff;
        color: #1a1a1a;
    }
}

/* ── Global Locations Section ───────────────────────────────── */
.hp-locations {
    background: #f8f8f6;
    padding: 80px 0 72px;
    border-top: 1px solid #eaeaea;
}
.hp-loc-map-wrap {
    margin: 48px 0 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.hp-loc-map-pins {
    position: relative;
    width: 100%;
    background: #eef1ea;
    line-height: 0;
}
/* The SVG sets the container height, so pin percentages match its viewBox exactly. */
.hp-loc-map-pins__bg {
    display: block;
    width: 100%;
    height: auto;
}
.hp-loc-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    text-decoration: none;
    z-index: 1;
}
/* 44px tap target without moving the 14px dot off its coordinate. */
.hp-loc-pin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.hp-loc-pin__dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #7a9c2e;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(122,156,46,0.30), 0 2px 6px rgba(0,0,0,0.25);
    transition: background 0.15s, box-shadow 0.15s;
}
.hp-loc-pin__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s, transform 0.15s;
}
.hp-loc-pin:hover,
.hp-loc-pin:focus {
    z-index: 2;
}
.hp-loc-pin:focus-visible .hp-loc-pin__dot {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}
.hp-loc-pin:hover .hp-loc-pin__dot,
.hp-loc-pin:focus .hp-loc-pin__dot {
    background: #b0ce5a;
    box-shadow: 0 0 0 5px rgba(176,206,90,0.35), 0 2px 8px rgba(0,0,0,0.3);
}
.hp-loc-pin:hover .hp-loc-pin__label,
.hp-loc-pin:focus .hp-loc-pin__label {
    opacity: 1;
    transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
    .hp-loc-pin__dot,
    .hp-loc-pin__label {
        transition: none;
    }
}
@media (max-width: 767px) {
    .hp-loc-pin__label {
        font-size: 10px;
        padding: 2px 6px;
    }
    .hp-loc-pin {
        width: 11px;
        height: 11px;
    }
}
@media (max-width: 575px) {
    .hp-loc-pin {
        width: 9px;
        height: 9px;
    }
    .hp-loc-pin__dot {
        border-width: 1.5px;
    }
    .hp-loc-pin__label {
        display: none;
    }
}
.hp-loc-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hp-loc-card {
    background: #ffffff;
    border: 1px solid #e8e8e6;
    border-radius: 6px;
    padding: 28px 24px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.hp-loc-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
    border-color: #b0ce5a;
}
.hp-loc-card__flag {
    font-size: 28px;
    margin-bottom: 12px;
    line-height: 1;
}
.hp-loc-card__name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}
.hp-loc-card__role {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.4;
}
.hp-loc-card__link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #454646;
    text-decoration: none;
}
.hp-loc-card__link:hover {
    color: #b0ce5a;
}
@media (max-width: 991px) {
    .hp-loc-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .hp-locations {
        padding: 56px 0 48px;
    }
    .hp-loc-map-wrap {
        margin: 32px 0 28px;
    }
}
@media (max-width: 575px) {
    .hp-loc-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .hp-locations {
        padding: 44px 0 36px;
    }
    .hp-loc-card {
        padding: 18px 16px;
    }
    .hp-loc-card__flag {
        font-size: 22px;
        margin-bottom: 8px;
    }
    .hp-loc-card__name {
        font-size: 15px;
    }
    .hp-loc-card__role {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .hp-loc-card__link {
        font-size: 11px;
    }
}