/* ==========================================================================
   JobOoro Global CSS
   Global design system
   Bootstrap-free
   Mobile-first
   ========================================================================== */

:root {
    --jv-blue-950: #071b49;
    --jv-blue-900: #09245c;
    --jv-blue-800: #0d3b8f;
    --jv-blue-700: #155eef;
    --jv-blue-600: #2878f0;
    --jv-blue-100: #eaf2ff;
    --jv-blue-50: #f4f8ff;

    --jv-white: #ffffff;
    --jv-text: #172033;
    --jv-heading: #101828;
    --jv-muted: #667085;

    --jv-border: #e4e7ec;
    --jv-surface: #f8fafc;

    --jv-success: #067647;
    --jv-danger: #b42318;

    --jv-container: 1180px;
    --jv-content: 820px;

    --jv-radius-sm: 6px;
    --jv-radius-md: 10px;
    --jv-radius-lg: 16px;
    --jv-radius-xl: 24px;

    --jv-shadow-sm:
        0 1px 3px rgba(16, 24, 40, .06);

    --jv-shadow-md:
        0 10px 30px rgba(16, 24, 40, .09);

    --jv-font:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--jv-white);
    color: var(--jv-text);
    font-family: var(--jv-font);
    font-size: 16px;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--jv-blue-700);
    text-decoration: none;
}

a:hover {
    color: var(--jv-blue-800);
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--jv-heading);
    line-height: 1.2;
}


/* ==========================================================================
   GLOBAL CONTAINER
   ========================================================================== */

.site-container {
    width: min(
        calc(100% - 32px),
        var(--jv-container)
    );

    margin-inline: auto;
}


/* ==========================================================================
   COOKIE POLICY HERO
   ========================================================================== */

.policy-hero {
    position: relative;
    isolation: isolate;
    min-height: 470px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--jv-blue-950) 0%,
            var(--jv-blue-800) 48%,
            var(--jv-blue-600) 100%
        );

    color: var(--jv-white);
}

.policy-hero__container {
    position: relative;
    z-index: 5;
}

.policy-hero__content {
    max-width: 760px;
    padding: 92px 0 150px;
}

.policy-eyebrow {
    display: inline-flex;
    align-items: center;

    padding: 7px 13px;
    margin-bottom: 20px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;

    background: rgba(255,255,255,.10);

    color: rgba(255,255,255,.94);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.policy-hero h1 {
    margin-bottom: 22px;

    color: var(--jv-white);

    font-size: clamp(
        42px,
        6vw,
        70px
    );

    font-weight: 800;
    letter-spacing: -.04em;
}

.policy-hero__lead {
    max-width: 690px;
    margin-bottom: 25px;

    color: rgba(255,255,255,.91);

    font-size: clamp(
        17px,
        2vw,
        21px
    );

    line-height: 1.65;
}

.policy-hero__meta {
    display: inline-flex;

    padding: 10px 15px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--jv-radius-md);

    background: rgba(0,0,0,.12);

    color: rgba(255,255,255,.86);

    font-size: 14px;
}


/* ==========================================================================
   CITY SKYLINE
   ========================================================================== */

.policy-hero__skyline {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}

.skyline {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 190px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;

    opacity: .82;
}

.building {
    position: relative;
    display: block;

    width: clamp(42px, 7vw, 100px);

    border-radius: 4px 4px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.07)
        );

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03);
}

.building::before {
    content: "";

    position: absolute;
    inset: 18px 9px 12px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,.62) 0 5px,
            transparent 5px 15px
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.55) 0 5px,
            transparent 5px 16px
        );

    opacity: .55;
}

.building--one {
    height: 88px;
}

.building--two {
    height: 142px;
}

.building--three {
    height: 112px;
}

.building--four {
    width: clamp(55px, 9vw, 125px);
    height: 180px;
}

.building--five {
    height: 128px;
}

.building--six {
    height: 158px;
}

.building--seven {
    height: 96px;
}

.skyline-cloud {
    position: absolute;

    width: 180px;
    height: 55px;

    border-radius: 100px;

    background: rgba(255,255,255,.07);
}

.skyline-cloud::before,
.skyline-cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}

.skyline-cloud::before {
    width: 65px;
    height: 65px;
    left: 35px;
    bottom: 10px;
}

.skyline-cloud::after {
    width: 90px;
    height: 90px;
    right: 25px;
    bottom: 0;
}

.skyline-cloud--one {
    top: 75px;
    right: 14%;
}

.skyline-cloud--two {
    top: 145px;
    left: 8%;
    transform: scale(.7);
}


/* ==========================================================================
   HERO WAVE
   ========================================================================== */

.policy-hero__wave {
    position: absolute;
    right: -5%;
    bottom: -85px;
    left: -5%;

    height: 145px;

    z-index: 4;

    border-radius: 50% 50% 0 0;

    background: var(--jv-white);
}


/* ==========================================================================
   POLICY CONTENT
   ========================================================================== */

.policy-content {
    position: relative;
    padding: 75px 0 90px;
    background: var(--jv-white);
}

.policy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
}

.policy-article {
    max-width: var(--jv-content);
}

.policy-introduction {
    padding-bottom: 20px;
}

.policy-article p {
    margin: 0 0 20px;
    color: var(--jv-text);
    line-height: 1.8;
}

.policy-section {
    margin-top: 55px;
    scroll-margin-top: 100px;
}

.policy-section h2 {
    margin-bottom: 18px;

    font-size: clamp(
        25px,
        3vw,
        34px
    );

    font-weight: 750;
    letter-spacing: -.02em;
}

.policy-section h3 {
    margin: 34px 0 12px;

    font-size: 20px;
    font-weight: 700;
}


/* ==========================================================================
   LISTS
   ========================================================================== */

.policy-list {
    margin: 22px 0;
    padding-left: 25px;
}

.policy-list li {
    margin-bottom: 10px;
    padding-left: 4px;
}


/* ==========================================================================
   TABLE
   ========================================================================== */

.policy-table-wrap {
    margin: 28px 0;

    overflow-x: auto;

    border: 1px solid var(--jv-border);
    border-radius: var(--jv-radius-lg);

    box-shadow: var(--jv-shadow-sm);
}

.policy-table {
    width: 100%;
    min-width: 560px;

    border-collapse: collapse;
}

.policy-table caption {
    padding: 15px 18px;

    background: var(--jv-blue-50);

    color: var(--jv-muted);

    font-size: 14px;
    text-align: left;
}

.policy-table th,
.policy-table td {
    padding: 15px 18px;

    border-top: 1px solid var(--jv-border);

    text-align: left;
    vertical-align: top;
}

.policy-table th {
    background: #f9fafb;
    color: var(--jv-heading);
    font-weight: 700;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.policy-sidebar {
    display: none;
}

.policy-sidebar__card {
    position: sticky;
    top: 100px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--jv-border);
    border-radius: var(--jv-radius-lg);

    background: var(--jv-white);

    box-shadow: var(--jv-shadow-md);
}

.policy-sidebar__accent {
    width: 45px;
    height: 4px;

    margin-bottom: 18px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--jv-blue-800),
            var(--jv-blue-600)
        );
}

.policy-sidebar__card h2 {
    margin-bottom: 16px;
    font-size: 19px;
}

.policy-sidebar__nav {
    display: grid;
    gap: 2px;
}

.policy-sidebar__nav a {
    display: block;

    padding: 9px 11px;

    border-radius: 7px;

    color: var(--jv-muted);

    font-size: 14px;
    line-height: 1.4;
}

.policy-sidebar__nav a:hover,
.policy-sidebar__nav a:focus-visible {
    background: var(--jv-blue-50);
    color: var(--jv-blue-800);
}


/* ==========================================================================
   CONTACT PANEL
   ========================================================================== */

.contact-panel {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-top: 28px;
    padding: 24px;

    border: 1px solid #d9e5ff;
    border-radius: var(--jv-radius-lg);

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #ffffff
        );
}

.contact-panel__icon {
    display: grid;
    flex: 0 0 46px;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: var(--jv-blue-700);

    color: var(--jv-white);

    font-size: 19px;
    font-weight: 800;
}

.contact-panel h3 {
    margin-bottom: 10px;
}

.contact-panel p {
    margin-bottom: 8px;
}

.contact-panel__last {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .site-container {
        width: min(
            calc(100% - 64px),
            var(--jv-container)
        );
    }

    .policy-grid {
        grid-template-columns:
            minmax(0, 1fr)
            285px;
    }

    .policy-sidebar {
        display: block;
    }

    .policy-hero {
        min-height: 510px;
    }

    .policy-hero__content {
        padding-top: 105px;
    }

    .policy-content {
        padding-top: 85px;
    }
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .policy-grid {
        grid-template-columns:
            minmax(0, 820px)
            300px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 599px) {

    .policy-hero {
        min-height: 455px;
    }

    .policy-hero__content {
        padding-top: 72px;
        padding-bottom: 130px;
    }

    .policy-hero__lead {
        font-size: 16px;
    }

    .skyline {
        height: 135px;
    }

    .building--one {
        height: 65px;
    }

    .building--two {
        height: 105px;
    }

    .building--three {
        height: 80px;
    }

    .building--four {
        height: 125px;
    }

    .building--five {
        height: 92px;
    }

    .building--six {
        height: 110px;
    }

    .building--seven {
        height: 70px;
    }

    .policy-content {
        padding-top: 55px;
    }

    .contact-panel {
        flex-direction: column;
    }

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(40,120,240,.35);
    outline-offset: 3px;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

    .policy-hero {
        min-height: auto;
        background: none;
        color: #000;
    }

    .policy-hero h1,
    .policy-hero__lead,
    .policy-eyebrow,
    .policy-hero__meta {
        color: #000;
    }

    .policy-hero__skyline,
    .policy-hero__wave,
    .policy-sidebar {
        display: none;
    }

    .policy-content {
        padding: 0;
    }

    .policy-grid {
        display: block;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}