/* ============================================================================
   Cookie Consent - Fluxr Works
   ----------------------------------------------------------------------------
   Styles for the consent banner and the small "Cookie settings" link it leaves
   behind so a visitor can change their mind.

   Everything is scoped under .cc- so nothing can collide with style.css.
   Colours follow the site: #FF6A3A accent, near-black panel, Poppins.
   ========================================================================== */

.cc-banner {
    --cc-panel: #14161a;
    --cc-line: rgba(255, 255, 255, .12);
    --cc-text: #e8e9ec;
    --cc-muted: #9aa0ab;
    --cc-accent: #FF6A3A;

    position: fixed;
    z-index: 99999;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 620px;

    padding: 26px 28px;
    border: 1px solid var(--cc-line);
    border-radius: 14px;
    background: var(--cc-panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);

    font-family: 'Poppins', sans-serif;
    color: var(--cc-text);

    /* Hidden until the script decides it is needed, so it can never flash up
       for a visitor who has already answered. */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.cc-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cc-banner__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.cc-banner__text {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--cc-muted);
}

.cc-banner__text a {
    color: var(--cc-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cc-banner__text a:hover {
    color: var(--cc-accent);
}

.cc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cc-btn {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 11px 22px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cc-btn:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

.cc-btn--accept {
    border: 1px solid var(--cc-accent);
    background: var(--cc-accent);
    color: #fff;
}

.cc-btn--accept:hover {
    background: #ff7d52;
    border-color: #ff7d52;
}

.cc-btn--decline {
    border: 1px solid var(--cc-line);
    background: transparent;
    color: var(--cc-text);
}

.cc-btn--decline:hover {
    border-color: var(--cc-muted);
}

/* The persistent way back in, bottom-left, deliberately quiet. Consent has to
   be as easy to withdraw as it was to give. */
.cc-reopen {
    position: fixed;
    z-index: 99998;
    left: 18px;
    bottom: 18px;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(20, 22, 26, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 8px 14px;

    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    color: #9aa0ab;
    cursor: pointer;

    opacity: 0;
    transition: opacity .3s ease, color .2s ease, border-color .2s ease;
    pointer-events: none;
}

.cc-reopen.is-visible {
    opacity: .55;
    pointer-events: auto;
}

.cc-reopen.is-visible:hover {
    opacity: 1;
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

@media (max-width: 575px) {
    .cc-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 22px 20px;
    }

    .cc-banner__actions {
        flex-direction: column;
    }

    .cc-btn {
        width: 100%;
        padding: 13px 22px;
    }

    .cc-reopen {
        left: 12px;
        bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-banner,
    .cc-reopen {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Consent-gated Google Map (contact page)
   The .google-map wrapper is greyscaled for the real embed; .is-gated turns
   that off so the placeholder reads properly. Height comes from .google-map,
   so the page does not shift when the map loads.
   -------------------------------------------------------------------------- */

.google-map.is-gated {
    -webkit-filter: none;
    filter: none;
    background: #14161a;
    border-radius: 30px;
    overflow: hidden;
}

.gmap-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.gmap-placeholder__text {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.7;
    color: #9aa0ab;
}

.gmap-placeholder__link {
    font-size: 12.5px;
    color: #9aa0ab;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gmap-placeholder__link:hover {
    color: #FF6A3A;
}

@media (max-width: 575px) {
    .gmap-placeholder {
        padding: 24px 18px;
    }

    .gmap-placeholder .cc-btn {
        width: auto;
    }
}

/* ----------------------------------------------------------------------------
   Service page "What's Included" icons
   Circular chip using the theme accent (#ef534b, the .main-color for
   body.marketing-agency). Font Awesome is already loaded via plugins.css.
   -------------------------------------------------------------------------- */

.icon-inc {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 83, 75, 0.1);
    border: 1px solid rgba(239, 83, 75, 0.25);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.icon-inc i {
    font-size: 22px;
    line-height: 1;
    color: #ef534b;
    transition: color .3s ease;
}

/* The whole card lifts slightly on hover, so the grid feels interactive
   rather than static. */
.item:hover .icon-inc {
    background: #ef534b;
    border-color: #ef534b;
    transform: translateY(-4px);
}

.item:hover .icon-inc i {
    color: #fff;
}

@media (max-width: 575px) {
    .icon-inc {
        width: 48px;
        height: 48px;
    }

    .icon-inc i {
        font-size: 19px;
    }
}