@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("./fonts/Manrope-Variable.ttf") format("truetype-variations");
}

:root {
    --pelling-white: #ffffff;
    --pelling-black: #000000;
    --pelling-charcoal: #1d252c;
    --pelling-navy-900: #0f2027;
    --pelling-navy-700: #203a43;
    --pelling-navy-500: #2c5364;
    --pelling-cyan: #63d7dc;
    --pelling-teal: #0099a8;
    --pelling-pink: #ff0084;
    --pelling-purple: #b182e0;
    --pelling-neon-green: #92fe9d;
    --pelling-grey-200: #d9d9d9;
    --pelling-grey-100: #f4f7f8;

    --pelling-gradient-blue: linear-gradient(90deg, #0f2027 0.24%, #203a43 49.49%, #2c5364 99.69%);
    --pelling-gradient-purple-blue: linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%);
    --pelling-gradient-red-purple: linear-gradient(90deg, #c31432 0%, #240b36 100%);
    --pelling-gradient-purple-pink: linear-gradient(90deg, #33001b 0%, #ff0084 100%);
    --pelling-gradient-blue-light-blue: linear-gradient(90deg, #000046 0%, #1cb5e0 100%);
    --pelling-gradient-orange-yellow: linear-gradient(90deg, #f12711 0%, #f5af19 100%);
    --pelling-gradient-green-light-green: linear-gradient(90deg, #007c5e 0%, #92fe9d 100%);

    --pelling-font: "Manrope", Arial, sans-serif;
    --pelling-space-0: 0;
    --pelling-space-1: 4px;
    --pelling-space-2: 8px;
    --pelling-space-3: 12px;
    --pelling-space-4: 16px;
    --pelling-space-5: 20px;
    --pelling-space-6: 24px;
    --pelling-space-8: 32px;
    --pelling-space-9: 36px;
    --pelling-space-10: 40px;
    --pelling-space-12: 48px;
    --pelling-space-16: 64px;
    --pelling-space-18: 72px;
    --pelling-space-20: 80px;
    --pelling-space-24: 96px;
    --pelling-space-36: 144px;
    --pelling-section-half: clamp(1.25rem, 2.5vw, 2.5rem);
    --pelling-section-standard: clamp(2.5rem, 5vw, 5rem);
    --pelling-section-double: clamp(5rem, 10vw, 10rem);
    --pelling-container-sm: 540px;
    --pelling-container-md: 720px;
    --pelling-container-lg: 960px;
    --pelling-container-xl: 1140px;
    --pelling-container-xxl: 1320px;
    --pelling-gutter-desktop: 12px;
    --pelling-gutter-mobile: 16px;
    --pelling-radius-none: 0;
    --pelling-radius-small: 4px;
    --pelling-radius-button: 5px;
    --pelling-radius-pill: 999px;
    --pelling-brush-opacity: 0.25;
}

.pelling-type-display {
    font: 600 clamp(1.75rem, 3.333vw, 3rem) / 1.2 var(--pelling-font);
}

.pelling-type-section-title {
    font: 600 2rem / 1.4 var(--pelling-font);
}

.pelling-type-feature-title {
    font: 500 clamp(1.25rem, 1.806vw, 1.625rem) / 1.2 var(--pelling-font);
}

.pelling-type-subheading {
    font: 600 1.25rem / 1.2 var(--pelling-font);
}

.pelling-type-body {
    font: 400 1rem / 1.5 var(--pelling-font);
}

.pelling-type-body-large {
    font: 300 1.25rem / 1.5 var(--pelling-font);
}

.pelling-type-body-small {
    font: 400 0.875rem / 1.43 var(--pelling-font);
}

.pelling-type-label {
    font: 800 1rem / 1.2 var(--pelling-font);
}

.pelling-type-navigation {
    font: 500 0.875rem / 1.5 var(--pelling-font);
    letter-spacing: 2.8px;
    text-transform: lowercase;
}

.pelling-type-micro {
    font: 400 0.75rem / 1.4 var(--pelling-font);
}

.pelling-surface-dark {
    background: var(--pelling-charcoal);
    color: var(--pelling-white);
}

.pelling-background {
    background: var(--pelling-background-gradient, var(--pelling-gradient-blue));
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.pelling-background::before {
    background-image: var(--pelling-background-brush);
    background-position: var(--pelling-background-position, center right);
    background-repeat: no-repeat;
    background-size: var(--pelling-background-size, auto);
    content: "";
    inset: 0;
    mix-blend-mode: var(--pelling-background-blend, overlay);
    opacity: var(--pelling-background-opacity, var(--pelling-brush-opacity));
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.pelling-background--blue-horizontal {
    --pelling-background-gradient: var(--pelling-gradient-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_hpbs-dark.svg");
    --pelling-background-position: center left;
    --pelling-background-blend: normal;
}

.pelling-background--blue-zigzag {
    --pelling-background-gradient: var(--pelling-gradient-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_zzas-dark.svg");
    --pelling-background-position: top right;
    --pelling-background-blend: soft-light;
}

.pelling-background--orange-ribbon {
    --pelling-background-gradient: var(--pelling-gradient-orange-yellow);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_lrsp-light.svg");
    --pelling-background-position: bottom left;
    --pelling-background-blend: overlay;
}

.pelling-background--green-wave {
    --pelling-background-gradient: var(--pelling-gradient-green-light-green);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_wsp-light.svg");
    --pelling-background-position: center right;
    --pelling-background-blend: soft-light;
}

.pelling-background--purple-pink-zigzag {
    --pelling-background-gradient: var(--pelling-gradient-purple-pink);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_zzas-light.svg");
    --pelling-background-position: top right;
    --pelling-background-blend: overlay;
}

.pelling-background--purple-blue-zigzag {
    --pelling-background-gradient: var(--pelling-gradient-purple-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_zzas-light.svg");
    --pelling-background-position: top right;
    --pelling-background-blend: overlay;
}

.pelling-background--green-patch {
    --pelling-background-gradient: var(--pelling-gradient-green-light-green);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_dpbp-light.svg");
    --pelling-background-position: center right;
    --pelling-background-size: cover;
    --pelling-background-blend: overlay;
}

.pelling-background--red-purple-wave {
    --pelling-background-gradient: var(--pelling-gradient-red-purple);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_wsp-light.svg");
    --pelling-background-position: center right;
    --pelling-background-size: cover;
    --pelling-background-blend: overlay;
}

.pelling-background--red-purple-arch {
    --pelling-background-gradient: var(--pelling-gradient-red-purple);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_rp-light.svg");
    --pelling-background-position: top right;
    --pelling-background-size: cover;
    --pelling-background-blend: overlay;
}

.pelling-background--blue-lightblue-arch {
    --pelling-background-gradient: var(--pelling-gradient-blue-light-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_rp-light.svg");
    --pelling-background-position: top right;
    --pelling-background-size: cover;
    --pelling-background-blend: overlay;
}

.pelling-background--blue-patch {
    --pelling-background-gradient: var(--pelling-gradient-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_dpbp-light.svg");
    --pelling-background-position: center right;
    --pelling-background-blend: overlay;
}

.pelling-background--blue-wave {
    --pelling-background-gradient: var(--pelling-gradient-blue);
    --pelling-background-brush: url("./assets/brushstrokes/pattern_wsp-light.svg");
    --pelling-background-position: top right;
    --pelling-background-size: contain;
    --pelling-background-blend: overlay;
}

.pelling-cta-line {
    color: currentColor;
    display: inline-block;
    font: 800 1rem / 1.1 var(--pelling-font);
    max-width: fit-content;
    position: relative;
    text-decoration: none;
}

.pelling-cta-line::after {
    background: var(--pelling-cta-accent, var(--pelling-cyan));
    content: "";
    height: 1px;
    left: -1rem;
    position: absolute;
    top: 50%;
    transform: translate(-100%, 50%);
    transition: left 200ms ease-out;
    width: min(30vw, 18rem);
}

.pelling-cta-line:hover::after,
.pelling-cta-line:focus-visible::after {
    left: calc(100% + 1rem);
}

.pelling-button-campaign {
    background: var(--pelling-neon-green);
    border: 1px solid var(--pelling-neon-green);
    border-radius: 5px;
    color: var(--pelling-charcoal);
    display: inline-flex;
    font: 700 0.875rem / 1 var(--pelling-font);
    justify-content: center;
    min-height: 38px;
    min-width: 124px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.pelling-button-campaign:hover,
.pelling-button-campaign:focus-visible {
    background: #b6febe;
    border-color: #b6febe;
}

.pelling-project-card {
    background: var(--pelling-charcoal);
    color: var(--pelling-white);
    min-height: 230px;
    overflow: hidden;
    position: relative;
}

.pelling-project-card > img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.pelling-project-card::after {
    background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.82));
    content: "";
    inset: 0;
    position: absolute;
}

.pelling-project-card__content {
    bottom: 24px;
    left: 24px;
    position: absolute;
    right: 24px;
    z-index: 1;
}