/* ==========================================================
   AMB360
   MAIN STYLESHEET
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --black: #030303;
    --black-soft: #070707;
    --white: #ffffff;

    --text-primary: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.84);
    --text-muted: rgba(255, 255, 255, 0.70);
    --text-faint: rgba(255, 255, 255, 0.52);

    --border: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.20);

    --brand-yellow: #ffd400;
    --brand-pink: #ff2f92;
    --brand-cyan: #00c8f8;

    --gradient:
        linear-gradient(
            90deg,
            var(--brand-yellow) 0%,
            var(--brand-pink) 50%,
            var(--brand-cyan) 100%
        );

    --font-sans:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --page-padding: 42px;

    --header-height: 98px;
    --header-height-scrolled: 82px;

}


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

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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: var(--black);
    color: var(--white);

    font-family: var(--font-sans);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

body.mobile-menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: var(--font-sans);
}


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

a:focus-visible,
button:focus-visible {
    outline:
        3px solid
        var(--brand-cyan);

    outline-offset: 4px;
}


/* ==========================================================
   WORDPRESS ADMIN BAR
========================================================== */

body.admin-bar
.site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {

    body.admin-bar
    .site-header {
        top: 46px;
    }

}


/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: fixed;

    z-index: 1000;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    background:
        rgba(3, 3, 3, 0.995);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.site-header--scrolled,
.site-header--mega-open {
    background:
        rgba(2, 2, 2, 0.998);

    box-shadow:
        0 22px 64px
        rgba(0, 0, 0, 0.50);
}


/* ==========================================================
   HEADER INNER
========================================================== */

.site-header__inner {
    display: grid;

    grid-template-columns:
        minmax(205px, 1fr)
        auto
        minmax(420px, 1fr);

    width: 100%;
    height: var(--header-height);

    align-items: center;

    padding:
        0
        var(--page-padding);

    transition:
        height 0.3s ease;
}

.site-header--scrolled
.site-header__inner {
    height:
        var(--header-height-scrolled);
}


/* ==========================================================
   BRAND
========================================================== */

.site-brand {
    display: inline-flex;

    width: fit-content;

    align-items: center;

    justify-self: start;
}

.site-brand__logo {
    width: 200px;
    max-width: none;
    height: auto;

    transition:
        width 0.3s ease,
        transform 0.3s ease;
}

.site-brand:hover
.site-brand__logo {
    transform:
        scale(1.015);
}

.site-header--scrolled
.site-brand__logo {
    width: 182px;
}


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

.desktop-nav {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 31px;

    justify-self: center;
}

.desktop-nav > a,
.desktop-nav__services {
    position: relative;

    display: inline-flex;

    min-height: 46px;

    align-items: center;

    gap: 8px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -0.035em;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color 0.2s ease;
}


/* ==========================================================
   NAV UNDERLINE
========================================================== */

.desktop-nav > a::after,
.desktop-nav__services::after {
    position: absolute;

    right: 0;
    bottom: -10px;
    left: 0;

    height: 2px;

    border-radius: 999px;

    background:
        var(--gradient);

    content: "";

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.25s ease;
}

.desktop-nav > a:hover,
.desktop-nav__services:hover,
.desktop-nav__services[aria-expanded="true"] {
    color: var(--white);
}

.desktop-nav > a:hover::after,
.desktop-nav__services:hover::after,
.desktop-nav__services[aria-expanded="true"]::after {
    transform:
        scaleX(1);
}


/* ==========================================================
   NAV CHEVRON
========================================================== */

.desktop-nav__chevron {
    width: 11px;
    height: 7px;

    color:
        rgba(255, 255, 255, 0.60);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.desktop-nav__services:hover
.desktop-nav__chevron,
.desktop-nav__services[aria-expanded="true"]
.desktop-nav__chevron {
    color: var(--white);
}

.desktop-nav__services[aria-expanded="true"]
.desktop-nav__chevron {
    transform:
        rotate(180deg);
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.site-header__actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    justify-self: end;
}


/* ==========================================================
   SHARED HEADER ACTIONS
========================================================== */

.header-studios-link,
.header-action--secondary,
.header-action--book {
    min-height: 48px;

    border-radius: 10px;
}

.header-studios-link,
.header-action--secondary,
.header-action__inner {
    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -0.03em;
}


/* ==========================================================
   AMB360 STUDIOS
========================================================== */

.header-studios-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.02);

    color:
        rgba(255, 255, 255, 0.86);

    white-space: nowrap;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.header-studios-link::before,
.header-studios-link::after {
    display: none;
}

.header-studios-link:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255, 255, 255, 0.36);

    background:
        rgba(255, 255, 255, 0.05);

    color:
        var(--white);
}

.header-studios-link__icon {
    width: 14px;
    height: 14px;

    flex:
        0
        0
        14px;

    color:
        rgba(255, 255, 255, 0.58);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.header-studios-link:hover
.header-studios-link__icon {
    color: var(--white);

    transform:
        translate(2px, -2px);
}


/* ==========================================================
   LET'S TALK
========================================================== */

.header-action--secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.02);

    color:
        rgba(255, 255, 255, 0.86);

    white-space: nowrap;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.header-action--secondary:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255, 255, 255, 0.36);

    background:
        rgba(255, 255, 255, 0.05);

    color:
        var(--white);
}


/* ==========================================================
   FREE MARKETING DIAGNOSIS
========================================================== */

.header-action--book {
    position: relative;

    display: inline-flex;

    padding: 1px;

    overflow: hidden;

    background:
        var(--gradient);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.header-action--book:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 34px
        rgba(255, 47, 146, 0.14),
        0 0 26px
        rgba(0, 200, 248, 0.08);
}

.header-action__inner {
    position: relative;

    z-index: 2;

    display: flex;

    min-height: 46px;

    align-items: center;
    justify-content: center;

    padding:
        0
        16px;

    border-radius: 9px;

    background:
        #070707;

    color:
        var(--white);

    white-space: nowrap;
}


/* ==========================================================
   HEADER GRADIENT
========================================================== */

.site-header__gradient {
    width: 100%;
    height: 2px;

    background:
        var(--gradient);
}


/* ==========================================================
   MEGA MENU
========================================================== */

.mega-menu {
    position: absolute;

    z-index: -1;

    top: 100%;
    right: 0;
    left: 0;

    width: 100%;

    visibility: hidden;

    border-bottom:
        1px solid
        var(--border);

    background:
        radial-gradient(
            circle at 3% 72%,
            rgba(255, 47, 146, 0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 97% 20%,
            rgba(0, 200, 248, 0.08),
            transparent 31%
        ),
        #050505;

    opacity: 0;

    transform:
        translateY(-12px);

    box-shadow:
        0 45px 90px
        rgba(0, 0, 0, 0.62);

    transition:
        visibility 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.site-header--mega-open
.mega-menu {
    z-index: 50;

    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   MEGA MENU GRID
========================================================== */

.mega-menu__inner {
    display: grid;

    grid-template-columns:
        minmax(285px, 0.66fr)
        minmax(630px, 1.50fr)
        minmax(365px, 0.90fr);

    gap: 52px;

    width: 100%;

    align-items: stretch;

    padding:
        52px
        var(--page-padding)
        56px;
}


/* ==========================================================
   MEGA INTRO
========================================================== */

.mega-menu__intro {
    display: flex;

    min-width: 0;

    flex-direction: column;
}

.mega-menu__eyebrow {
    display: block;

    margin-bottom: 20px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.20em;

    text-transform:
        uppercase;
}

.mega-menu__title {
    margin: 0;

    color:
        var(--white);

    font-size:
        clamp(
            36px,
            2.4vw,
            48px
        );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing:
        -0.055em;
}

.mega-menu__title > span {
    display: block;
}

.mega-menu__title-gradient {
    padding-bottom: 7px;

    background:
        var(--gradient);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.mega-menu__underline {
    width: 104px;
    height: 3px;

    margin-top: 22px;

    border-radius: 999px;

    background:
        var(--gradient);
}

.mega-menu__copy {
    max-width: 350px;

    margin:
        21px
        0
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 13px;
    font-weight: 450;

    line-height: 1.67;
}

.mega-menu__copy +
.mega-menu__copy {
    margin-top: 13px;
}

.mega-menu__copy--strong {
    color:
        rgba(255, 255, 255, 0.94);

    font-weight: 700;
}


/* ==========================================================
   PRODUCTS
========================================================== */

.mega-menu__services-column {
    display: flex;

    min-width: 0;

    flex-direction: column;
}

.mega-menu__section-heading {
    margin-bottom: 18px;
}

.mega-menu__section-heading h3 {
    margin: 0;

    color: var(--white);

    font-size: 15px;
    font-weight: 700;

    letter-spacing:
        -0.03em;
}

.mega-menu__section-line {
    width: 84px;
    height: 2px;

    margin-top: 12px;

    border-radius: 999px;

    background:
        var(--gradient);
}

.mega-menu__services {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            4,
            minmax(95px, 1fr)
        );

    column-gap: 36px;

    flex: 1;
}


/* ==========================================================
   PRODUCT ROW
========================================================== */

.mega-service {
    position: relative;

    display: flex;

    min-height: 95px;

    align-items: center;
    justify-content: space-between;

    padding:
        11px
        0;

    overflow: hidden;

    border-bottom:
        1px solid
        var(--border);

    transition:
        padding 0.22s ease,
        background 0.22s ease;
}

.mega-service:nth-child(1),
.mega-service:nth-child(2) {
    border-top:
        1px solid
        var(--border);
}

.mega-service::before {
    position: absolute;

    bottom: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        var(--gradient);

    content: "";

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.35s ease;
}

.mega-service:hover {
    padding-left: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026),
            transparent
        );
}

.mega-service:hover::before {
    transform:
        scaleX(1);
}


/* ==========================================================
   PRODUCT TYPE
========================================================== */

.mega-service__content {
    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 7px;

    padding-right: 14px;
}

.mega-service__name {
    display: block;

    color:
        var(--white);

    font-size: 21px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -0.045em;
}

.mega-service__description {
    display: block;

    max-width: 440px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 10.5px;
    font-weight: 450;

    line-height: 1.43;

    transition:
        color 0.22s ease;
}

.mega-service:hover
.mega-service__description {
    color:
        rgba(255, 255, 255, 0.86);
}


/* ==========================================================
   PRODUCT ARROW
========================================================== */

.mega-service__indicator {
    position: relative;

    width: 28px;
    height: 12px;

    flex:
        0
        0
        auto;

    margin-left: 10px;

    opacity: 0.48;

    transition:
        width 0.25s ease,
        opacity 0.25s ease;
}

.mega-service__indicator::before {
    position: absolute;

    top: 50%;
    right: 0;

    width: 100%;
    height: 1px;

    transform:
        translateY(-50%);

    background:
        var(--white);

    content: "";
}

.mega-service__indicator::after {
    position: absolute;

    top: 50%;
    right: 0;

    width: 7px;
    height: 7px;

    transform:
        translateY(-50%)
        rotate(45deg);

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

    border-right:
        1px solid
        var(--white);

    content: "";
}

.mega-service:hover
.mega-service__indicator {
    width: 40px;

    opacity: 0.95;
}


/* ==========================================================
   NEXUS PANEL
========================================================== */

.mega-subscription {
    position: relative;

    display: flex;

    height: 100%;

    flex-direction: column;

    overflow: hidden;

    padding: 30px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.045);
}

.mega-subscription__glow {
    position: absolute;

    right: -130px;
    bottom: -155px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        rgba(0, 200, 248, 0.08);

    filter: blur(35px);
}

.mega-subscription__top,
.mega-subscription__content,
.mega-subscription__statement,
.mega-subscription__cta {
    position: relative;

    z-index: 2;
}

.mega-subscription__eyebrow {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.mega-subscription__underline {
    width: 102px;
    height: 2px;

    margin-top: 14px;

    background:
        var(--gradient);
}

.mega-subscription__content {
    margin-top: 27px;
}

.mega-subscription__content h3 {
    margin: 0;

    color:
        var(--white);

    font-size:
        clamp(
            27px,
            2vw,
            36px
        );

    font-weight: 700;

    line-height: 1.07;

    letter-spacing:
        -0.055em;
}

.mega-subscription__content h3 span {
    display: block;

    padding-bottom: 4px;

    background:
        var(--gradient);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.mega-subscription__content p {
    max-width: 350px;

    margin:
        18px
        0
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 13px;
    font-weight: 450;

    line-height: 1.62;
}

.mega-subscription__content
p + p {
    margin-top: 14px;
}


/* ==========================================================
   NEXUS STATEMENTS
========================================================== */

.mega-subscription__statement {
    display: flex;

    flex-direction: column;

    margin-top: 22px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.mega-subscription__statement span {
    display: flex;

    min-height: 39px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.90);

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


/* ==========================================================
   NEXUS CTA
========================================================== */

.mega-subscription__cta {
    display: inline-flex;

    width: fit-content;

    flex-direction: column;

    gap: 8px;

    margin-top: auto;

    padding-top: 22px;

    color:
        var(--white);

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

.mega-subscription__cta-line {
    width: 100%;
    height: 2px;

    background:
        var(--gradient);

    transition:
        width 0.3s ease;
}

.mega-subscription__cta:hover
.mega-subscription__cta-line {
    width: 135%;
}


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

.mobile-toggle {
    display: none;

    position: relative;

    width: 50px;
    height: 50px;

    align-items: center;
    justify-content: center;

    padding: 0;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;
}

.mobile-toggle__line {
    position: absolute;

    width: 20px;
    height: 1.5px;

    border-radius: 999px;

    background:
        var(--white);

    transition:
        transform 0.3s ease;
}

.mobile-toggle__line:first-child {
    transform:
        translateY(-4px);
}

.mobile-toggle__line:last-child {
    transform:
        translateY(4px);
}

.site-header--mobile-open
.mobile-toggle__line:first-child {
    transform:
        rotate(45deg);
}

.site-header--mobile-open
.mobile-toggle__line:last-child {
    transform:
        rotate(-45deg);
}


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

.mobile-nav {
    position: fixed;

    z-index: 900;

    inset: 0;

    visibility: hidden;

    overflow-y: auto;

    padding-top:
        var(--header-height);

    background:
        var(--black);

    opacity: 0;

    transform:
        translateY(-14px);

    transition:
        visibility 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

body.admin-bar
.mobile-nav {
    padding-top:
        calc(
            var(--header-height) + 32px
        );
}

body.mobile-menu-open
.mobile-nav {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}

.mobile-nav__inner {
    display: flex;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    flex-direction: column;

    padding:
        34px
        24px
        26px;
}

.mobile-nav__top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 34px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.mobile-nav__main {
    border-top:
        1px solid
        var(--border);
}

.mobile-nav__main > a,
.mobile-services-toggle {
    display: flex;

    width: 100%;
    min-height: 80px;

    align-items: center;
    justify-content: space-between;

    padding: 0;

    border: 0;

    border-bottom:
        1px solid
        var(--border);

    background:
        transparent;

    color:
        var(--white);

    font-size:
        clamp(
            30px,
            8vw,
            42px
        );

    font-weight: 700;

    letter-spacing:
        -0.05em;

    text-align: left;
}

.mobile-services-toggle__symbol {
    color:
        rgba(255, 255, 255, 0.66);

    font-size: 32px;
    font-weight: 300;

    transition:
        transform 0.3s ease;
}

.mobile-services-toggle[aria-expanded="true"]
.mobile-services-toggle__symbol {
    transform:
        rotate(45deg);
}

.mobile-services {
    display: grid;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.45s ease,
        opacity 0.3s ease;
}

.mobile-services--open {
    max-height: 760px;

    opacity: 1;
}

.mobile-services a {
    display: flex;

    min-height: 58px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);

    color:
        rgba(255, 255, 255, 0.85);

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


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

.mobile-subscription {
    display: flex;

    flex-direction: column;

    margin-top: 30px;

    padding: 22px;

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

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.04);
}

.mobile-subscription__label {
    margin-bottom: 14px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;
}

.mobile-subscription strong {
    max-width: 320px;

    color:
        var(--white);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.1;

    letter-spacing:
        -0.04em;
}

.mobile-subscription__link {
    width: fit-content;

    margin-top: 20px;

    padding-bottom: 6px;

    border-bottom:
        2px solid transparent;

    border-image:
        var(--gradient)
        1;

    color:
        var(--white);

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


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

.mobile-nav__bottom {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 10px;

    margin-top: auto;

    padding-top: 30px;
}

.mobile-nav__account,
.mobile-nav__talk,
.mobile-nav__book {
    display: flex;

    min-height: 60px;

    align-items: center;
    justify-content: center;

    padding:
        0
        18px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}

.mobile-nav__account,
.mobile-nav__talk {
    border:
        1px solid
        var(--border);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        rgba(255, 255, 255, 0.88);
}

.mobile-nav__book {
    border:
        1px solid
        transparent;

    background:
        linear-gradient(
            #070707,
            #070707
        )
        padding-box,
        var(--gradient)
        border-box;

    color:
        var(--white);
}


/* ==========================================================
   PAGE FOUNDATION
========================================================== */

main {
    min-height: 100vh;

    padding-top:
        var(--header-height);

    background:
        var(--black);
}


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

.amb-hero {
    position: relative;

    width: 100%;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    overflow: hidden;

    background:
        #030303;

    color:
        var(--white);
}


/* ==========================================================
   HERO AMBIENT LIGHT
========================================================== */

.amb-hero__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(120px);
}

.amb-hero__ambient--pink {
    width: 560px;
    height: 560px;

    right: 28%;
    bottom: -320px;

    background:
        rgba(255, 61, 187, 0.18);
}

.amb-hero__ambient--cyan {
    width: 620px;
    height: 620px;

    right: -280px;
    top: 12%;

    background:
        rgba(35, 183, 255, 0.15);
}


/* ==========================================================
   HERO GRID
========================================================== */

.amb-hero__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.90fr)
        minmax(0, 1.10fr);

    gap:
        clamp(
            80px,
            7vw,
            140px
        );

    width: 100%;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    align-items: center;

    padding:
        90px
        var(--page-padding)
        100px;
}


/* ==========================================================
   HERO COPY
========================================================== */

.amb-hero__copy {
    position: relative;

    z-index: 4;

    max-width: 760px;

    min-width: 0;
}


/* ==========================================================
   HERO KICKER
========================================================== */

.amb-hero__kicker {
    margin:
        0
        0
        28px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}


/* ==========================================================
   HERO TITLE
========================================================== */

.amb-hero__title {
    max-width: 760px;

    margin:
        0
        0
        32px;

    color:
        var(--white);

    font-size:
        clamp(
            58px,
            5.5vw,
            102px
        );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing:
        -0.06em;
}

.amb-hero__title > span {
    display: block;
}


/* ==========================================================
   ANIMATED HERO GRADIENT
========================================================== */

.amb-hero__gradient-text {
    display: inline-block;

    width: fit-content;

    padding-right: 0.08em;

    background:
        linear-gradient(
            90deg,
            #FFD400,
            #FF3DBB,
            #9A5CFF,
            #2F6BFF,
            #00E5D4,
            #FFD400
        );

    background-size:
        300%
        100%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;

    animation:
        ambHeroGradientFlow
        7s
        linear
        infinite;
}

@keyframes ambHeroGradientFlow {

    0% {
        background-position:
            0%
            50%;
    }

    100% {
        background-position:
            300%
            50%;
    }

}


/* ==========================================================
   HERO INTRO
========================================================== */

.amb-hero__intro {
    max-width: 670px;

    margin:
        0
        0
        40px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size:
        clamp(
            18px,
            1.25vw,
            21px
        );

    font-weight: 450;

    line-height: 1.62;

    letter-spacing:
        -0.025em;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.amb-hero__actions {
    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}

.amb-hero__button,
.amb-hero__link {
    position: relative;

    display: inline-flex;

    min-height: 58px;

    align-items: center;
    justify-content: center;

    gap: 14px;

    padding:
        1px
        27px;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #8A5CFF 64%,
            #23B7FF 100%
        );

    color:
        var(--white);

    font-size: 13px;
    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.amb-hero__button::before,
.amb-hero__link::before {
    position: absolute;

    inset: 1px;

    z-index: 0;

    border-radius: 11px;

    background:
        #050505;

    content: "";
}

.amb-hero__button span,
.amb-hero__link span {
    position: relative;

    z-index: 2;
}

.amb-hero__button:hover,
.amb-hero__link:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 0 24px
        rgba(255, 61, 187, 0.16),
        0 0 34px
        rgba(35, 183, 255, 0.11);
}

.amb-hero__button-arrow,
.amb-hero__link-arrow {
    font-size: 20px;
    font-weight: 400;

    transition:
        transform 0.25s ease;
}

.amb-hero__button:hover
.amb-hero__button-arrow,
.amb-hero__link:hover
.amb-hero__link-arrow {
    transform:
        translateX(4px);
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.amb-hero__visual {
    position: relative;

    display: flex;

    min-width: 0;

    min-height: 620px;

    align-items: center;
    justify-content: center;

    padding-left:
        clamp(
            20px,
            3vw,
            60px
        );
}


/* ==========================================================
   LOOP GLOW
========================================================== */

.amb-hero__loop-glow {
    position: absolute;

    width: 88%;

    aspect-ratio:
        1 / 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 50%,
            rgba(255, 212, 0, 0.16),
            transparent 23%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 61, 187, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 70% 50%,
            rgba(35, 183, 255, 0.18),
            transparent 30%
        );

    filter:
        blur(65px);

    opacity:
        0.82;

    pointer-events:
        none;
}


/* ==========================================================
   LOOP SVG
========================================================== */

.amb-hero__loop {
    position: relative;

    z-index: 2;

    width:
        min(
            820px,
            48vw
        );

    max-width: 100%;

    height: auto;

    overflow: visible;

    filter:
        drop-shadow(
            0
            0
            16px
            rgba(255, 212, 0, 0.22)
        )
        drop-shadow(
            0
            0
            34px
            rgba(255, 61, 187, 0.32)
        )
        drop-shadow(
            0
            0
            64px
            rgba(35, 183, 255, 0.24)
        );
}

.amb-hero__loop-back {
    fill:
        none;

    stroke:
        url(#ambHeroLoopGradient);

    stroke-width:
        84;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        0.18;

    filter:
        url(#ambHeroLoopGlow);
}

.amb-hero__loop-main {
    fill:
        none;

    stroke:
        url(#ambHeroLoopGradient);

    stroke-width:
        34;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        1850;

    stroke-dashoffset:
        1850;

    filter:
        url(#ambHeroLoopGlow);

    animation:
        ambHeroLoopDraw
        2.3s
        ease
        forwards,

        ambHeroLoopSignal
        5.8s
        linear
        infinite
        2.3s;
}

.amb-hero__loop-dot {
    fill:
        #ffffff;

    filter:
        drop-shadow(
            0
            0
            8px
            #ffffff
        )
        drop-shadow(
            0
            0
            18px
            #23B7FF
        )
        drop-shadow(
            0
            0
            28px
            #FF3DBB
        );
}

@keyframes ambHeroLoopDraw {

    to {
        stroke-dashoffset:
            0;
    }

}

@keyframes ambHeroLoopSignal {

    0% {
        stroke-dasharray:
            310
            1540;

        stroke-dashoffset:
            0;
    }

    100% {
        stroke-dasharray:
            310
            1540;

        stroke-dashoffset:
            -1850;
    }

}


/* ==========================================================
   NEXT SECTION PLACEHOLDER
========================================================== */

.home-next-section {
    min-height: 300px;

    background:
        #030303;
}

.home-next-section__inner {
    width: 100%;

    padding:
        80px
        var(--page-padding);
}


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1500px) {

    :root {
        --page-padding: 34px;
    }

    .site-brand__logo {
        width: 190px;
    }

    .site-header--scrolled
    .site-brand__logo {
        width: 174px;
    }

    .site-header__inner {
        grid-template-columns:
            minmax(195px, 1fr)
            auto
            minmax(405px, 1fr);
    }

    .desktop-nav {
        gap: 27px;
    }

    .mega-menu__inner {
        grid-template-columns:
            minmax(265px, 0.63fr)
            minmax(590px, 1.46fr)
            minmax(350px, 0.90fr);

        gap: 42px;
    }

    .mega-service__name {
        font-size: 20px;
    }

    .mega-service__description {
        font-size: 10px;
    }


    /* HERO */

    .amb-hero__inner {
        gap: 70px;

        padding-top: 76px;
        padding-bottom: 86px;
    }

    .amb-hero__title {
        font-size:
            clamp(
                54px,
                5vw,
                88px
            );
    }

    .amb-hero__visual {
        min-height: 540px;
    }

    .amb-hero__loop {
        width:
            min(
                720px,
                46vw
            );
    }

}


/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1280px) {

    :root {
        --page-padding: 26px;
    }

    .site-header__inner {
        grid-template-columns:
            minmax(180px, 1fr)
            auto
            minmax(375px, 1fr);
    }

    .site-brand__logo {
        width: 172px;
    }

    .desktop-nav {
        gap: 20px;
    }

    .desktop-nav > a,
    .desktop-nav__services {
        font-size: 13px;
    }

    .site-header__actions {
        gap: 8px;
    }

    .header-studios-link,
    .header-action--secondary,
    .header-action__inner {
        font-size: 12px;
    }

    .header-studios-link,
    .header-action--secondary {
        padding:
            0
            13px;
    }

    .header-action__inner {
        padding:
            0
            13px;
    }


    /* HERO */

    .amb-hero__inner {
        gap: 48px;
    }

    .amb-hero__title {
        font-size:
            clamp(
                52px,
                4.8vw,
                76px
            );
    }

}


/* ==========================================================
   TABLET / MOBILE SWITCH
========================================================== */

@media (max-width: 1080px) {

    :root {
        --page-padding: 22px;

        --header-height: 86px;
        --header-height-scrolled: 76px;
    }

    .site-header__inner {
        display: flex;

        justify-content: space-between;
    }

    .site-brand__logo {
        width: 190px;
    }

    .site-header--scrolled
    .site-brand__logo {
        width: 175px;
    }

    .desktop-nav,
    .site-header__actions {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .mega-menu {
        display: none;
    }


    /* HERO */

    .amb-hero {
        min-height:
            auto;
    }

    .amb-hero__inner {
        grid-template-columns:
            1fr;

        min-height:
            auto;

        gap:
            52px;

        padding:
            80px
            var(--page-padding)
            90px;
    }

    .amb-hero__copy {
        max-width:
            820px;
    }

    .amb-hero__visual {
        min-height:
            460px;

        padding-left:
            0;
    }

    .amb-hero__loop {
        width:
            min(
                760px,
                92vw
            );
    }

}


/* ==========================================================
   WORDPRESS MOBILE ADMIN BAR
========================================================== */

@media screen and (max-width: 782px) {

    body.admin-bar
    .mobile-nav {
        padding-top:
            calc(
                var(--header-height) + 46px
            );
    }

}


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

@media (max-width: 620px) {

    :root {
        --page-padding: 18px;

        --header-height: 80px;
        --header-height-scrolled: 74px;
    }

    .site-brand__logo {
        width: 170px;
    }

    .site-header--scrolled
    .site-brand__logo {
        width: 158px;
    }

    .mobile-toggle {
        width: 46px;
        height: 46px;
    }

    .mobile-nav__inner {
        padding:
            28px
            var(--page-padding)
            20px;
    }

    .mobile-nav__main > a,
    .mobile-services-toggle {
        min-height: 72px;
    }


    /* HERO */

    .amb-hero__inner {
        gap:
            36px;

        padding:
            62px
            var(--page-padding)
            70px;
    }

    .amb-hero__kicker {
        margin-bottom:
            20px;

        font-size:
            10px;

        letter-spacing:
            0.18em;

        line-height:
            1.5;
    }

    .amb-hero__title {
        margin-bottom:
            24px;

        font-size:
            clamp(
                48px,
                14vw,
                70px
            );

        line-height:
            1;

        letter-spacing:
            -0.055em;
    }

    .amb-hero__intro {
        margin-bottom:
            30px;

        font-size:
            17px;

        line-height:
            1.55;
    }

    .amb-hero__actions {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            11px;
    }

    .amb-hero__button,
    .amb-hero__link {
        width:
            100%;
    }

    .amb-hero__visual {
        min-height:
            320px;
    }

    .amb-hero__loop {
        width:
            min(
                620px,
                105vw
            );
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    .amb-hero__gradient-text {
        animation:
            none;
    }

    .amb-hero__loop-main {
        animation:
            none;

        stroke-dashoffset:
            0;
    }

}
/* ==========================================================
   AMB360 HERO
========================================================== */

.amb-hero {
    position: relative;

    width: 100%;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    overflow: hidden;

    background:
        #030303;

    color:
        var(--white);
}


/* ==========================================================
   SUBTLE AMBIENT COLOUR
========================================================== */

.amb-hero__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(140px);
}


.amb-hero__ambient--pink {
    width: 520px;
    height: 520px;

    right: 36%;
    bottom: -390px;

    background:
        rgba(255, 47, 146, 0.10);
}


.amb-hero__ambient--cyan {
    width: 600px;
    height: 600px;

    right: -360px;
    top: 10%;

    background:
        rgba(0, 200, 248, 0.08);
}


/* ==========================================================
   HERO INNER
========================================================== */

.amb-hero__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(520px, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(
            40px,
            4vw,
            76px
        );

    width: 100%;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    align-items: center;

    padding:
        74px
        0
        84px
        var(--page-padding);
}


/* ==========================================================
   HERO COPY
========================================================== */

.amb-hero__copy {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 750px;

    min-width: 0;
}


/* ==========================================================
   KICKER
========================================================== */

.amb-hero__kicker {
    margin:
        0
        0
        28px;

    color:
        rgba(255, 255, 255, 0.62);

    font-family:
        var(--font-sans);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}


/* ==========================================================
   HERO TITLE
========================================================== */

.amb-hero__title {
    max-width: 750px;

    margin:
        0
        0
        32px;

    color:
        #ffffff;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            60px,
            5.3vw,
            100px
        );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing:
        -0.062em;
}


.amb-hero__title > span {
    display: block;
}


/* ==========================================================
   ANIMATED GRADIENT TEXT
   KEEP THIS MOVING
========================================================== */

.amb-hero__gradient-text {
    display: inline-block;

    width: fit-content;

    padding-right: 0.08em;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 18%,
            #9A5CFF 38%,
            #2F6BFF 58%,
            #00E5D4 78%,
            #FFD400 100%
        );

    background-size:
        300%
        100%;

    background-position:
        0%
        50%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;

    animation:
        ambHeroGradientFlow
        7s
        linear
        infinite;
}


@keyframes ambHeroGradientFlow {

    0% {
        background-position:
            0%
            50%;
    }

    100% {
        background-position:
            300%
            50%;
    }

}


/* ==========================================================
   INTRO
========================================================== */

.amb-hero__intro {
    max-width: 650px;

    margin:
        0
        0
        40px;

    color:
        rgba(255, 255, 255, 0.74);

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            18px,
            1.25vw,
            21px
        );

    font-weight: 450;

    line-height: 1.62;

    letter-spacing:
        -0.025em;
}


/* ==========================================================
   ACTIONS
========================================================== */

.amb-hero__actions {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


/* ==========================================================
   SHARED HERO BUTTON
========================================================== */

.amb-hero__button,
.amb-hero__link {
    position: relative;

    display: inline-flex;

    min-height: 58px;

    align-items: center;
    justify-content: center;

    gap: 14px;

    padding:
        1px
        26px;

    overflow: hidden;

    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #8A5CFF 64%,
            #23B7FF 100%
        );

    color:
        #ffffff;

    font-family:
        var(--font-sans);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.amb-hero__button::before,
.amb-hero__link::before {
    position: absolute;

    inset: 1px;

    z-index: 0;

    border-radius: 10px;

    background:
        #050505;

    content: "";
}


.amb-hero__button span,
.amb-hero__link span {
    position: relative;

    z-index: 2;
}


.amb-hero__button:hover,
.amb-hero__link:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 0 24px
        rgba(255, 61, 187, 0.14),
        0 0 32px
        rgba(35, 183, 255, 0.09);
}


/* ==========================================================
   BUTTON ARROWS
========================================================== */

.amb-hero__button-arrow,
.amb-hero__link-arrow {
    font-size: 20px;
    font-weight: 400;

    transition:
        transform 0.25s ease;
}


.amb-hero__button:hover
.amb-hero__button-arrow,
.amb-hero__link:hover
.amb-hero__link-arrow {
    transform:
        translateX(4px);
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.amb-hero__visual {
    position: relative;

    align-self: stretch;

    min-width: 0;
    min-height: 600px;

    overflow: hidden;
}


/* ==========================================================
   ARTWORK
========================================================== */

.amb-hero__visual-image {
    position: absolute;

    z-index: 1;

    top: 50%;
    right: -1px;

    width:
        max(
            860px,
            58vw
        );

    max-width: none;

    height:
        auto;

    transform:
        translateY(-50%);

    object-fit: contain;

    user-select: none;

    pointer-events: none;
}


/* ==========================================================
   IMAGE FADE INTO COPY
========================================================== */

.amb-hero__visual-fade {
    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #030303 0%,
            rgba(3, 3, 3, 0.94) 5%,
            rgba(3, 3, 3, 0.64) 13%,
            rgba(3, 3, 3, 0.18) 25%,
            rgba(3, 3, 3, 0) 40%
        );
}


/* ==========================================================
   SUBTLE RIGHT EDGE VIGNETTE
========================================================== */

.amb-hero__visual::after {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 3, 3, 0.20) 0%,
            transparent 16%,
            transparent 78%,
            rgba(3, 3, 3, 0.24) 100%
        );

    content: "";
}


/* ==========================================================
   NEXT SECTION
========================================================== */

.home-next-section {
    min-height: 300px;

    background:
        #030303;
}


.home-next-section__inner {
    width: 100%;

    padding:
        80px
        var(--page-padding);
}


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1500px) {

    .amb-hero__inner {
        grid-template-columns:
            minmax(470px, 0.88fr)
            minmax(0, 1.12fr);

        gap: 28px;

        padding-top: 68px;
        padding-bottom: 76px;
    }


    .amb-hero__title {
        font-size:
            clamp(
                56px,
                5vw,
                88px
            );
    }


    .amb-hero__visual {
        min-height: 540px;
    }


    .amb-hero__visual-image {
        width:
            max(
                760px,
                57vw
            );
    }

}


/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1280px) {

    .amb-hero__inner {
        grid-template-columns:
            minmax(430px, 0.92fr)
            minmax(0, 1.08fr);

        padding-left:
            var(--page-padding);
    }


    .amb-hero__title {
        font-size:
            clamp(
                52px,
                4.8vw,
                76px
            );
    }


    .amb-hero__intro {
        font-size:
            18px;
    }


    .amb-hero__visual-image {
        width:
            max(
                690px,
                57vw
            );
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1080px) {

    .amb-hero {
        min-height: auto;
    }


    .amb-hero__inner {
        grid-template-columns:
            1fr;

        min-height: auto;

        gap: 30px;

        padding:
            72px
            var(--page-padding)
            0;
    }


    .amb-hero__copy {
        max-width: 780px;
    }


    .amb-hero__visual {
        min-height: 500px;

        margin:
            0
            calc(
                var(--page-padding) * -1
            );
    }


    .amb-hero__visual-image {
        top: 50%;
        right: -80px;

        width:
            max(
                760px,
                92vw
            );
    }


    .amb-hero__visual-fade {
        background:
            linear-gradient(
                180deg,
                #030303 0%,
                rgba(3, 3, 3, 0.66) 10%,
                rgba(3, 3, 3, 0.08) 28%,
                transparent 44%
            );
    }

}


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

@media (max-width: 620px) {

    .amb-hero__inner {
        gap: 18px;

        padding:
            54px
            var(--page-padding)
            0;
    }


    .amb-hero__kicker {
        margin-bottom: 20px;

        font-size: 10px;

        line-height: 1.5;

        letter-spacing:
            0.18em;
    }


    .amb-hero__title {
        margin-bottom: 24px;

        font-size:
            clamp(
                46px,
                13.5vw,
                67px
            );

        line-height: 1;

        letter-spacing:
            -0.055em;
    }


    .amb-hero__intro {
        margin-bottom: 30px;

        font-size: 17px;

        line-height: 1.55;
    }


    .amb-hero__actions {
        align-items: stretch;

        flex-direction: column;

        gap: 10px;
    }


    .amb-hero__button,
    .amb-hero__link {
        width: 100%;

        min-height: 56px;
    }


    .amb-hero__visual {
        min-height: 360px;
    }


    .amb-hero__visual-image {
        right: -140px;

        width:
            max(
                650px,
                135vw
            );
    }

}


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

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

    .amb-hero__gradient-text {
        animation:
            none;
    }

}

/* ==========================================================
   AMB360 SUBSCRIPTIONS
========================================================== */

.home-proof,
.home-proof * {
    box-sizing: border-box;
}


.home-proof {
    position: relative;

    width: 100%;

    background: #050505;

    color: #ffffff;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   INNER
========================================================== */

.home-proof__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap:
        clamp(
            80px,
            8vw,
            150px
        );

    width: 100%;

    padding:
        clamp(
            110px,
            9vw,
            165px
        )
        var(--page-padding);
}


/* ==========================================================
   LEFT COLUMN
========================================================== */

.home-proof__intro {
    max-width: 660px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.home-proof__eyebrow {
    margin:
        0
        0
        24px;

    color:
        rgba(255, 255, 255, 0.58);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}


/* ==========================================================
   HEADING
========================================================== */

.home-proof__title {
    max-width: 660px;

    margin: 0;

    color: #ffffff;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(
            48px,
            4.4vw,
            78px
        );

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -0.055em;
}


.home-proof__title span {
    display: block;

    width: fit-content;

    padding-right: 0.05em;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #9A5CFF 52%,
            #2F6BFF 74%,
            #00E5D4 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    -webkit-text-fill-color: transparent;
}


/* ==========================================================
   GRADIENT LINE
========================================================== */

.home-proof__line {
    width: 110px;
    height: 3px;

    margin-top: 30px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #9A5CFF 52%,
            #2F6BFF 74%,
            #00E5D4 100%
        );
}


/* ==========================================================
   BODY COPY
========================================================== */

.home-proof__copy {
    max-width: 610px;

    margin-top: 36px;
}


.home-proof__copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(
            16px,
            1.1vw,
            18px
        );

    font-weight: 450;

    line-height: 1.72;

    letter-spacing: -0.018em;
}


.home-proof__copy p + p {
    margin-top: 24px;
}


/* ==========================================================
   CTA
========================================================== */

.home-proof__cta {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 38px;

    padding-bottom: 8px;

    color: #ffffff;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;
}


.home-proof__cta::after {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #9A5CFF 52%,
            #2F6BFF 74%,
            #00E5D4 100%
        );

    content: "";
}


.home-proof__cta-arrow {
    font-size: 18px;

    font-weight: 400;

    transition:
        transform 0.25s ease;
}


.home-proof__cta:hover
.home-proof__cta-arrow {
    transform:
        translateX(5px);
}


/* ==========================================================
   RIGHT COLUMN
========================================================== */

.home-proof__principles {
    display: flex;

    flex-direction: column;

    align-self: center;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.13);
}


/* ==========================================================
   PRINCIPLE
========================================================== */

.home-proof__principle {
    position: relative;

    display: grid;

    grid-template-columns:
        68px
        minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.13);
}


/* ==========================================================
   NUMBER
========================================================== */

.home-proof__number {
    padding-top: 44px;

    color:
        rgba(255, 255, 255, 0.35);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.14em;
}


/* ==========================================================
   PRINCIPLE CONTENT
========================================================== */

.home-proof__principle-content {
    max-width: 680px;

    padding:
        38px
        0
        40px;
}


.home-proof__principle-content h3 {
    margin:
        0
        0
        14px;

    color: #ffffff;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

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

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.home-proof__principle-content p {
    max-width: 640px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.70);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        15px;

    font-weight: 450;

    line-height: 1.68;

    letter-spacing: -0.012em;
}


/* ==========================================================
   HOVER ACCENT
========================================================== */

.home-proof__principle::after {
    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #FFD400 0%,
            #FF3DBB 32%,
            #9A5CFF 52%,
            #2F6BFF 74%,
            #00E5D4 100%
        );

    content: "";

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.35s ease;
}


.home-proof__principle:hover::after {
    transform:
        scaleX(1);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1080px) {

    .home-proof__inner {
        grid-template-columns:
            1fr;

        gap: 70px;

        padding:
            100px
            var(--page-padding);
    }


    .home-proof__intro {
        max-width: 760px;
    }


    .home-proof__copy {
        max-width: 720px;
    }


    .home-proof__principles {
        width: 100%;
    }

}


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

@media (max-width: 620px) {

    .home-proof__inner {
        gap: 58px;

        padding:
            76px
            var(--page-padding);
    }


    .home-proof__eyebrow {
        margin-bottom: 18px;
    }


    .home-proof__title {
        font-size:
            clamp(
                42px,
                12vw,
                58px
            );

        letter-spacing:
            -0.045em;
    }


    .home-proof__line {
        margin-top: 24px;
    }


    .home-proof__copy {
        margin-top: 28px;
    }


    .home-proof__copy p {
        font-size: 16px;

        line-height: 1.65;
    }


    .home-proof__cta {
        margin-top: 30px;
    }


    .home-proof__principle {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 16px;
    }


    .home-proof__number {
        padding-top: 32px;
    }


    .home-proof__principle-content {
        padding:
            28px
            0
            30px;
    }


    .home-proof__principle-content h3 {
        font-size: 25px;
    }


    .home-proof__principle-content p {
        font-size: 14px;

        line-height: 1.65;
    }

}

/* ==========================================================
   HOME PRODUCTS
========================================================== */

.home-products,
.home-products * {
	box-sizing: border-box;
}


.home-products {
	position: relative;

	width: 100%;

	background: #030303;

	color: #ffffff;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.home-products__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.42fr)
		minmax(420px, 0.78fr);

	gap:
		clamp(
			80px,
			8vw,
			150px
		);

	align-items: start;

	width: 100%;

	padding:
		clamp(
			110px,
			9vw,
			160px
		)
		var(--page-padding);
}


/* ==========================================================
   PRODUCT LIST
========================================================== */

.home-products__list {
	width: 100%;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.14);
}


/* ==========================================================
   INDIVIDUAL PRODUCT
========================================================== */

.home-product {
	position: relative;

	display: grid;

	grid-template-columns:
		50px
		minmax(150px, 0.7fr)
		minmax(260px, 1.35fr)
		42px;

	gap:
		clamp(
			18px,
			2vw,
			34px
		);

	align-items: center;

	width: 100%;

	min-height: 112px;

	padding:
		24px
		0;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.14);

	color: #ffffff;

	text-decoration: none;
}


/* ==========================================================
   SUBTLE GRADIENT LINE
========================================================== */

.home-product::after {
	position: absolute;

	right: 0;
	bottom: -1px;
	left: 0;

	height: 2px;

	background: var(--gradient);

	content: "";

	transform: scaleX(0);

	transform-origin: left center;

	transition:
		transform 0.35s ease;
}


.home-product:hover::after {
	transform: scaleX(1);
}


/* ==========================================================
   NUMBER
========================================================== */

.home-product__number {
	color:
		rgba(255, 255, 255, 0.34);

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
}


/* ==========================================================
   PRODUCT NAME
========================================================== */

.home-product__name {
	margin: 0;

	color: #ffffff;

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

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.045em;

	transition:
		transform 0.25s ease;
}


.home-product:hover
.home-product__name {
	transform:
		translateX(5px);
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.home-product__description {
	max-width: 520px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.68);

	font-size: 14px;

	font-weight: 450;

	line-height: 1.55;

	letter-spacing: -0.01em;
}


/* ==========================================================
   ARROW
========================================================== */

.home-product__arrow {
	position: relative;

	display: flex;

	align-items: center;

	justify-content: flex-end;

	color:
		rgba(255, 255, 255, 0.62);

	font-size: 21px;

	line-height: 1;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}


.home-product__arrow::before {
	position: absolute;

	right: 20px;

	width: 34px;

	height: 2px;

	background: var(--gradient);

	content: "";

	transform:
		scaleX(0.55);

	transform-origin:
		right center;

	transition:
		transform 0.25s ease;
}


.home-product:hover
.home-product__arrow {
	color: #ffffff;

	transform:
		translateX(5px);
}


.home-product:hover
.home-product__arrow::before {
	transform:
		scaleX(1);
}


/* ==========================================================
   RIGHT INTRO
========================================================== */

.home-products__intro {
	position: relative;

	height: 100%;
}


.home-products__intro-inner {
	position: sticky;

	top:
		calc(
			var(--header-height) + 70px
		);

	max-width: 540px;

	padding-top: 4px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.home-products__eyebrow {
	margin:
		0
		0
		28px;

	color:
		rgba(255, 255, 255, 0.55);

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.20em;

	text-transform: uppercase;
}


/* ==========================================================
   HEADING
========================================================== */

.home-products__title {
	margin: 0;

	font-size:
		clamp(
			48px,
			4.1vw,
			72px
		);

	font-weight: 700;

	line-height: 1.01;

	letter-spacing: -0.055em;
}


.home-products__title-white {
	display: block;

	color: #ffffff;
}


.home-products__title-gradient {
	display: block;

	width: fit-content;

	margin-top: 5px;

	padding-right: 0.06em;

	background: var(--gradient);

	-webkit-background-clip: text;

	background-clip: text;

	color: transparent;

	-webkit-text-fill-color: transparent;
}


/* ==========================================================
   ACCENT
========================================================== */

.home-products__accent {
	width: 90px;

	height: 3px;

	margin-top: 32px;

	border-radius: 999px;

	background: var(--gradient);
}


/* ==========================================================
   INTRO COPY
========================================================== */

.home-products__intro-copy {
	max-width: 500px;

	margin:
		34px
		0
		0;

	color:
		rgba(255, 255, 255, 0.74);

	font-size:
		clamp(
			16px,
			1.1vw,
			18px
		);

	font-weight: 450;

	line-height: 1.7;

	letter-spacing: -0.016em;
}


/* ==========================================================
   CTA
========================================================== */

.home-products__cta {
	position: relative;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 28px;

	width: 100%;

	max-width: 430px;

	margin-top: 46px;

	padding:
		0
		0
		12px;

	color: #ffffff;

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;

	text-decoration: none;

	text-transform: uppercase;
}


.home-products__cta::after {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 0;

	height: 2px;

	background: var(--gradient);

	content: "";
}


.home-products__cta-arrow {
	font-size: 20px;

	font-weight: 400;

	transition:
		transform 0.25s ease;
}


.home-products__cta:hover
.home-products__cta-arrow {
	transform:
		translateX(6px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1180px) {

	.home-products__inner {
		grid-template-columns:
			minmax(0, 1.25fr)
			minmax(360px, 0.75fr);

		gap: 60px;
	}


	.home-product {
		grid-template-columns:
			42px
			minmax(120px, 0.7fr)
			minmax(200px, 1.3fr)
			30px;

		gap: 18px;
	}


	.home-product__description {
		font-size: 13px;
	}

}


/* ==========================================================
   STACKED
========================================================== */

@media (max-width: 980px) {

	.home-products__inner {
		display: flex;

		flex-direction: column-reverse;

		gap: 70px;

		padding:
			100px
			var(--page-padding);
	}


	.home-products__intro {
		width: 100%;
	}


	.home-products__intro-inner {
		position: static;

		max-width: 720px;
	}


	.home-products__intro-copy {
		max-width: 620px;
	}


	.home-products__list {
		width: 100%;
	}

}


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

@media (max-width: 680px) {

	.home-products__inner {
		gap: 58px;

		padding:
			76px
			var(--page-padding);
	}


	.home-products__title {
		font-size:
			clamp(
				42px,
				12vw,
				58px
			);
	}


	.home-products__intro-copy {
		font-size: 16px;
	}


	.home-products__cta {
		max-width: 100%;

		margin-top: 34px;
	}


	.home-product {
		grid-template-columns:
			34px
			minmax(0, 1fr)
			28px;

		gap:
			14px;

		min-height:
			0;

		padding:
			28px
			0;
	}


	.home-product__number {
		align-self: start;

		padding-top: 5px;
	}


	.home-product__name {
		grid-column:
			2;

		font-size:
			28px;
	}


	.home-product__description {
		grid-column:
			2;

		max-width:
			100%;

		margin-top:
			-4px;

		font-size:
			14px;

		line-height:
			1.6;
	}


	.home-product__arrow {
		grid-column:
			3;

		grid-row:
			1 / span 2;

		align-self:
			center;
	}


	.home-product__arrow::before {
		display: none;
	}

}

/* ==========================================================
   HOME PRODUCTS
========================================================== */

.home-products,
.home-products * {
	box-sizing: border-box;
}


.home-products {
	position: relative;
	width: 100%;

	background: #030303;

	color: #ffffff;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.home-products__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.42fr)
		minmax(420px, 0.78fr);

	gap:
		clamp(
			80px,
			8vw,
			150px
		);

	align-items: start;

	width: 100%;

	padding:
		clamp(
			110px,
			9vw,
			160px
		)
		var(--page-padding);
}


/* ==========================================================
   PRODUCT LIST
========================================================== */

.home-products__list {
	width: 100%;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.14);
}


/* ==========================================================
   PRODUCT ROW
========================================================== */

.home-product {
	position: relative;

	display: grid;

	grid-template-columns:
		44px
		minmax(150px, 0.72fr)
		minmax(260px, 1.35fr)
		26px;

	gap:
		clamp(
			18px,
			2vw,
			34px
		);

	align-items: center;

	width: 100%;

	min-height: 112px;

	padding:
		24px
		0;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.14);

	color: #ffffff;

	text-decoration: none;
}


/* ==========================================================
   PRODUCT HOVER LINE
========================================================== */

.home-product::after {
	position: absolute;

	right: 0;
	bottom: -1px;
	left: 0;

	height: 2px;

	background: var(--gradient);

	content: "";

	transform: scaleX(0);

	transform-origin: left center;

	transition:
		transform 0.3s ease;
}


.home-product:hover::after {
	transform: scaleX(1);
}


/* ==========================================================
   PRODUCT NUMBER
========================================================== */

.home-product__number {
	color:
		rgba(255, 255, 255, 0.34);

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
}


/* ==========================================================
   PRODUCT NAME
========================================================== */

.home-product__name {
	margin: 0;

	color: #ffffff;

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

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.045em;

	transition:
		color 0.2s ease;
}


.home-product:hover
.home-product__name {
	color: #ffffff;
}


/* ==========================================================
   PRODUCT DESCRIPTION
========================================================== */

.home-product__description {
	max-width: 520px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.68);

	font-size: 14px;

	font-weight: 450;

	line-height: 1.55;

	letter-spacing: -0.01em;
}


/* ==========================================================
   PRODUCT ARROW
========================================================== */

.home-product__arrow {
	display: block !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: none !important;

	color:
		rgba(255, 255, 255, 0.54) !important;

	font-size: 18px !important;

	font-weight: 400 !important;

	line-height: 1 !important;

	text-align: right;

	box-shadow: none !important;

	transform: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease !important;
}


.home-product__arrow::before,
.home-product__arrow::after {
	display: none !important;

	content: none !important;
}


.home-product:hover
.home-product__arrow {
	color: #ffffff !important;

	transform:
		translateX(4px) !important;
}


/* ==========================================================
   RIGHT INTRO
========================================================== */

.home-products__intro {
	position: relative;

	height: 100%;
}


.home-products__intro-inner {
	position: sticky;

	top:
		calc(
			var(--header-height) + 70px
		);

	max-width: 540px;

	padding-top: 4px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.home-products__eyebrow {
	margin:
		0
		0
		28px;

	color:
		rgba(255, 255, 255, 0.55);

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.20em;

	text-transform: uppercase;
}


/* ==========================================================
   HEADING
========================================================== */

.home-products__title {
	margin: 0;

	font-size:
		clamp(
			48px,
			4.1vw,
			72px
		);

	font-weight: 700;

	line-height: 1.06;

	letter-spacing: -0.05em;

	overflow: visible;
}


.home-products__title-white {
	display: block;

	color: #ffffff;
}


.home-products__title-gradient {
	display: block;

	width: fit-content;

	margin-top: 5px;

	padding:
		0
		0.08em
		0.16em
		0;

	background: var(--gradient);

	-webkit-background-clip: text;

	background-clip: text;

	color: transparent;

	-webkit-text-fill-color: transparent;

	line-height: 1.1;

	overflow: visible;
}


/* ==========================================================
   SMALL ACCENT LINE
========================================================== */

.home-products__accent {
	width: 90px;

	height: 3px;

	margin-top: 28px;

	border-radius: 999px;

	background: var(--gradient);
}


/* ==========================================================
   INTRO COPY
========================================================== */

.home-products__intro-copy {
	max-width: 500px;

	margin:
		32px
		0
		0;

	color:
		rgba(255, 255, 255, 0.74);

	font-size:
		clamp(
			16px,
			1.1vw,
			18px
		);

	font-weight: 450;

	line-height: 1.7;

	letter-spacing: -0.016em;
}


/* ==========================================================
   MAIN CTA
========================================================== */

.home-products__cta {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	gap: 30px;

	align-items: center;

	width: 100%;

	max-width: 500px;

	margin-top: 48px;

	padding:
		24px
		8px
		22px
		0;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.16);

	border-bottom: 0;

	border-radius: 0;

	background: none;

	color: #ffffff;

	text-decoration: none;

	overflow: visible;
}


/* ==========================================================
   CTA GRADIENT RULE
========================================================== */

.home-products__cta::after {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 0;

	height: 3px;

	background: var(--gradient);

	content: "";
}


/* ==========================================================
   CTA COPY
========================================================== */

.home-products__cta > span:first-child {
	position: relative;

	z-index: 1;

	font-size:
		clamp(
			15px,
			1.2vw,
			18px
		);

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: -0.01em;

	text-transform: none;
}


/* ==========================================================
   CTA ARROW
========================================================== */

.home-products__cta-arrow {
	position: relative;

	z-index: 1;

	display: block;

	margin: 0;

	padding:
		0
		4px
		0
		0;

	color: #ffffff;

	font-size: 27px;

	font-weight: 400;

	line-height: 1;

	transition:
		transform 0.25s ease;
}


.home-products__cta:hover
.home-products__cta-arrow {
	transform:
		translateX(5px);
}


/* ==========================================================
   CTA HOVER
========================================================== */

.home-products__cta::before {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 0;

	height: 100%;

	background:
		linear-gradient(
			90deg,
			rgba(255, 212, 0, 0.035) 0%,
			rgba(255, 61, 187, 0.025) 45%,
			rgba(35, 183, 255, 0.035) 100%
		);

	content: "";

	opacity: 0;

	transition:
		opacity 0.25s ease;

	pointer-events: none;
}


.home-products__cta:hover::before {
	opacity: 1;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1180px) {

	.home-products__inner {
		grid-template-columns:
			minmax(0, 1.25fr)
			minmax(360px, 0.75fr);

		gap: 60px;
	}


	.home-product {
		grid-template-columns:
			40px
			minmax(120px, 0.7fr)
			minmax(200px, 1.3fr)
			24px;

		gap: 18px;
	}


	.home-product__description {
		font-size: 13px;
	}

}


/* ==========================================================
   STACKED
========================================================== */

@media (max-width: 980px) {

	.home-products__inner {
		display: flex;

		flex-direction: column-reverse;

		gap: 70px;

		padding:
			100px
			var(--page-padding);
	}


	.home-products__intro {
		width: 100%;
	}


	.home-products__intro-inner {
		position: static;

		max-width: 720px;
	}


	.home-products__intro-copy {
		max-width: 620px;
	}


	.home-products__list {
		width: 100%;
	}


	.home-products__cta {
		max-width: 520px;
	}

}


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

@media (max-width: 680px) {

	.home-products__inner {
		gap: 58px;

		padding:
			76px
			var(--page-padding);
	}


	.home-products__title {
		font-size:
			clamp(
				42px,
				12vw,
				58px
			);

		line-height: 1.07;
	}


	.home-products__title-gradient {
		padding-bottom: 0.18em;

		line-height: 1.11;
	}


	.home-products__intro-copy {
		font-size: 16px;
	}


	.home-products__cta {
		max-width: 100%;

		margin-top: 36px;

		padding:
			22px
			10px
			20px
			0;
	}


	.home-products__cta > span:first-child {
		font-size: 15px;
	}


	.home-products__cta-arrow {
		font-size: 24px;

		padding-right: 4px;
	}


	.home-product {
		grid-template-columns:
			34px
			minmax(0, 1fr)
			24px;

		gap: 14px;

		min-height: 0;

		padding:
			28px
			0;
	}


	.home-product__number {
		align-self: start;

		padding-top: 5px;
	}


	.home-product__name {
		grid-column: 2;

		font-size: 28px;
	}


	.home-product__description {
		grid-column: 2;

		max-width: 100%;

		margin-top: -4px;

		font-size: 14px;

		line-height: 1.6;
	}


	.home-product__arrow {
		grid-column: 3;

		grid-row:
			1 / span 2;

		align-self: center;
	}

}

/* ==========================================================
   SELECTED WORK
========================================================== */

.home-work,
.home-work * {
	box-sizing: border-box;
}

.home-work {
	position: relative;
	width: 100%;
	background: #050505;
	color: #ffffff;
	overflow: hidden;
}

.home-work__inner {
	width: 100%;
	padding:
		clamp(84px, 6vw, 110px)
		var(--page-padding)
		clamp(90px, 7vw, 120px);
}


/* ==========================================================
   INTRO
========================================================== */

.home-work__intro {
	width: 100%;
	max-width: 760px;
}

.home-work__eyebrow {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.50);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.home-work__title {
	margin: 0;
	font-size: clamp(48px, 4.6vw, 74px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.05em;
}

.home-work__title-white,
.home-work__title-gradient {
	display: block;
}

.home-work__title-white {
	color: #ffffff;
}

.home-work__title-gradient {
	width: fit-content;
	padding: 0 0.05em 0.08em 0;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.home-work__accent {
	width: 66px;
	height: 2px;
	margin-top: 24px;
	border-radius: 999px;
	background: var(--gradient);
}

.home-work__intro-copy {
	max-width: 620px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: clamp(15px, 1vw, 17px);
	font-weight: 450;
	line-height: 1.68;
	letter-spacing: -0.012em;
}


/* ==========================================================
   PROJECT GRID
========================================================== */

.home-work__projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 2.4vw, 40px);
	row-gap: clamp(64px, 6vw, 92px);
	width: 100%;
	margin-top: clamp(70px, 6vw, 96px);
}

.home-work__project {
	display: flex;
	min-width: 0;
	flex-direction: column;
}


/* ==========================================================
   PROJECT META
========================================================== */

.home-work__project-meta {
	display: flex;
	min-height: 18px;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.home-work__project-number {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.30);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
}

.home-work__project-discipline {
	min-width: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.52);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}


/* ==========================================================
   PROJECT IMAGE
========================================================== */

.home-work__project-image-link {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.home-work__project-image {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 4 / 3;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #080808;
}

.home-work__project-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition:
		transform 0.4s ease,
		opacity 0.3s ease;
}


.home-work__project:nth-child(2) .home-work__project-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transform: scale(1.045);
}

.home-work__project:nth-child(2) .home-work__project-image-link:hover .home-work__project-img {
	transform: scale(1.055);
}


/* ==========================================================
   PROJECT DETAILS
========================================================== */

.home-work__project-footer {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 18px;
}

.home-work__project-copy {
	width: 100%;
	max-width: none;
}

.home-work__project-title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(25px, 1.85vw, 32px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.home-work__project-title-link {
	color: inherit;
	text-decoration: none;
}

.home-work__project-title-link:hover {
	color: #ffffff;
}

.home-work__project-outcome {
	max-width: 420px;
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	font-weight: 450;
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.home-work__project-link {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.home-work__project-link:hover {
	border-color: rgba(255, 255, 255, 0.65);
}

.home-work__project-link span:last-child {
	font-size: 15px;
	transition: transform 0.2s ease;
}

.home-work__project-link:hover span:last-child {
	transform: translateX(3px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-work__projects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
		row-gap: 64px;
	}

	.home-work__project-title {
		font-size: 28px;
	}

}


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

@media (max-width: 680px) {

	.home-work__inner {
		padding:
			66px
			var(--page-padding)
			76px;
	}

	.home-work__eyebrow {
		margin-bottom: 18px;
	}

	.home-work__title {
		font-size: clamp(42px, 12vw, 54px);
	}

	.home-work__accent {
		margin-top: 22px;
	}

	.home-work__intro-copy {
		margin-top: 22px;
		font-size: 15px;
		line-height: 1.62;
	}

	.home-work__projects {
		grid-template-columns: 1fr;
		row-gap: 52px;
		margin-top: 56px;
	}

	.home-work__project-meta {
		margin-bottom: 11px;
	}

	.home-work__project-number,
	.home-work__project-discipline {
		font-size: 8px;
	}

	.home-work__project-image {
		aspect-ratio: 4 / 3;
	}
	.home-work__project-footer {
		padding-top: 17px;
	}

	.home-work__project-title {
		font-size: 30px;
	}

	.home-work__project-outcome {
		margin-top: 9px;
		font-size: 14px;
		line-height: 1.55;
	}

	.home-work__project-link {
		margin-top: 16px;
	}

}

/* ==========================================================
   HOME — WHERE NEXT
========================================================== */

.home-next,
.home-next * {
	box-sizing: border-box;
}

.home-next {
	position: relative;
	width: 100%;
	background: #050505;
	color: #ffffff;
	border-top: 1px solid rgba(255,255,255,.08);
}

.home-next__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(60px, 7vw, 120px);
	align-items: center;

	width: 100%;
	padding:
		clamp(90px, 7vw, 120px)
		var(--page-padding);
}


/* ==========================================================
   IMAGE
========================================================== */

.home-next__media {
	width: 100%;
}

.home-next__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}


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

.home-next__content {
	width: 100%;
	max-width: 720px;
	margin-left: auto;
}

.home-next__eyebrow {
	margin: 0 0 20px;

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

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .18em;
	text-transform: uppercase;
}

.home-next__title {
	margin: 0;

	font-size: clamp(48px, 4.2vw, 70px);
	font-weight: 700;
	line-height: 1.03;

	letter-spacing: -.05em;
}

.home-next__title-white,
.home-next__title-gradient {
	display: block;
}

.home-next__title-white {
	color: #ffffff;
}

.home-next__title-gradient {
	width: fit-content;

	margin-top: 8px;
	padding: 0 .06em .08em 0;

	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}

.home-next__accent {
	width: 66px;
	height: 2px;

	margin-top: 24px;

	background: var(--gradient);
	border-radius: 999px;
}


/* ==========================================================
   BODY COPY
========================================================== */

.home-next__copy {
	max-width: 620px;
	margin-top: 26px;
}

.home-next__copy p {
	margin: 0;

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

	font-size: clamp(15px, 1vw, 17px);
	font-weight: 450;
	line-height: 1.68;

	letter-spacing: -.012em;
}

.home-next__copy p + p {
	margin-top: 16px;
}


/* ==========================================================
   CTA
========================================================== */

.home-next__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	width: fit-content;

	margin-top: 28px;
	padding-bottom: 6px;

	border-bottom: 1px solid rgba(255,255,255,.20);

	color: #ffffff;

	font-size: 11px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	transition:
		border-color .2s ease;
}

.home-next__cta:hover {
	border-color: rgba(255,255,255,.65);
}

.home-next__cta-arrow {
	font-size: 15px;

	transition:
		transform .2s ease;
}

.home-next__cta:hover .home-next__cta-arrow {
	transform: translateX(3px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-next__inner {
		grid-template-columns: 1fr;
		gap: 52px;
	}

	.home-next__content {
		max-width: 760px;
		margin-left: 0;
	}

}


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

@media (max-width: 680px) {

	.home-next__inner {
		gap: 42px;

		padding:
			66px
			var(--page-padding)
			76px;
	}

	.home-next__title {
		font-size: clamp(42px, 12vw, 54px);
	}

	.home-next__copy p {
		font-size: 15px;
		line-height: 1.62;
	}

	.home-next__cta {
		margin-top: 24px;
	}

}

/* ==========================================================
   HOME — WHERE NEXT
   TIGHTER LAYOUT + IMAGE GRADIENT
========================================================== */

.home-next,
.home-next * {
	box-sizing: border-box;
}


.home-next {
	position: relative;
	width: 100%;
	background: #050505;
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.home-next__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(0, 0.95fr);

	gap: clamp(32px, 4vw, 70px);

	align-items: center;

	width: 100%;

	padding:
		clamp(90px, 7vw, 120px)
		var(--page-padding);
}


/* ==========================================================
   IMAGE
========================================================== */

.home-next__media {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;
}


.home-next__image-wrap {
	position: relative;

	width: 100%;
	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: #050505;
}


/* IMAGE */

.home-next__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.015);
}


/* DARK FADE INTO COPY */

.home-next__image-wrap::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 2;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(5, 5, 5, 0) 0%,
			rgba(5, 5, 5, 0) 58%,
			rgba(5, 5, 5, 0.25) 72%,
			rgba(5, 5, 5, 0.72) 88%,
			#050505 100%
		),
		linear-gradient(
			180deg,
			#050505 0%,
			rgba(5, 5, 5, 0) 12%,
			rgba(5, 5, 5, 0) 84%,
			#050505 100%
		);
}


/* SUBTLE AMB360 COLOUR WASH */

.home-next__media::after {
	content: "";

	position: absolute;

	left: 10%;
	right: -6%;
	bottom: -2px;

	height: 2px;

	z-index: 3;

	background: var(--gradient);

	opacity: 0.85;

	pointer-events: none;
}


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

.home-next__content {
	position: relative;
	z-index: 4;

	width: 100%;
	max-width: 700px;

	margin-left: 0;
}


.home-next__eyebrow {
	margin: 0 0 20px;

	color: rgba(255, 255, 255, 0.50);

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}


.home-next__title {
	margin: 0;

	font-size: clamp(46px, 4vw, 68px);
	font-weight: 700;
	line-height: 1.03;

	letter-spacing: -0.05em;
}


.home-next__title-white,
.home-next__title-gradient {
	display: block;
}


.home-next__title-white {
	color: #ffffff;
}


.home-next__title-gradient {
	width: fit-content;

	margin-top: 8px;
	padding: 0 0.06em 0.08em 0;

	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}


.home-next__accent {
	width: 66px;
	height: 2px;

	margin-top: 24px;

	border-radius: 999px;

	background: var(--gradient);
}


/* ==========================================================
   BODY COPY
========================================================== */

.home-next__copy {
	max-width: 610px;

	margin-top: 26px;
}


.home-next__copy p {
	margin: 0;

	color: rgba(255, 255, 255, 0.66);

	font-size: 15px;
	font-weight: 450;
	line-height: 1.68;

	letter-spacing: -0.012em;
}


.home-next__copy p + p {
	margin-top: 16px;
}


/* ==========================================================
   EXISTING PRODUCTS CTA
========================================================== */

.home-next .home-products__cta {
	margin-top: 30px;
}


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

@media (min-width: 1500px) {

	.home-next__inner {
		grid-template-columns:
			minmax(0, 1.08fr)
			minmax(0, 0.92fr);

		gap: 48px;
	}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-next__inner {
		grid-template-columns: 1fr;

		gap: 48px;
	}


	.home-next__content {
		max-width: 760px;
	}


	.home-next__image-wrap::after {
		background:
			linear-gradient(
				180deg,
				rgba(5, 5, 5, 0) 0%,
				rgba(5, 5, 5, 0) 68%,
				#050505 100%
			);
	}

}


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

@media (max-width: 680px) {

	.home-next__inner {
		gap: 36px;

		padding:
			66px
			var(--page-padding)
			76px;
	}


	.home-next__image-wrap {
		aspect-ratio: 4 / 3;
	}


	.home-next__title {
		font-size: clamp(42px, 12vw, 54px);
	}


	.home-next__copy {
		margin-top: 22px;
	}


	.home-next__copy p {
		font-size: 15px;
		line-height: 1.62;
	}


	.home-next .home-products__cta {
		margin-top: 26px;
	}

}

/* ==========================================================
   HOME — FREE MARKETING DIAGNOSIS
========================================================== */

.home-diagnosis,
.home-diagnosis * {
	box-sizing: border-box;
}


.home-diagnosis {
	position: relative;
	width: 100%;

	background: #0a0a0b;
	color: #ffffff;

	border-top: 1px solid rgba(255,255,255,.08);
}


.home-diagnosis__inner {
	display: grid;

	grid-template-columns:
		minmax(0, .9fr)
		minmax(0, 1.1fr);

	gap: clamp(70px, 9vw, 150px);

	align-items: start;

	width: 100%;

	padding:
		clamp(100px, 8vw, 145px)
		var(--page-padding)
		clamp(110px, 9vw, 155px);
}


/* ==========================================================
   LEFT
========================================================== */

.home-diagnosis__intro {
	position: sticky;
	top: calc(var(--header-height) + 55px);

	max-width: 700px;
}


.home-diagnosis__eyebrow {
	margin: 0 0 20px;

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

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .19em;
	text-transform: uppercase;
}


.home-diagnosis__title {
	margin: 0;

	font-size: clamp(48px, 4.2vw, 72px);
	font-weight: 700;
	line-height: 1.02;

	letter-spacing: -.052em;
}


.home-diagnosis__title-white,
.home-diagnosis__title-gradient {
	display: block;
}


.home-diagnosis__title-white {
	color: #ffffff;
}


.home-diagnosis__title-gradient {
	width: fit-content;

	margin-top: 7px;
	padding: 0 .06em .08em 0;

	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}


.home-diagnosis__accent {
	width: 66px;
	height: 2px;

	margin-top: 27px;

	border-radius: 999px;

	background: var(--gradient);
}


.home-diagnosis__copy {
	max-width: 610px;

	margin-top: 28px;
}


.home-diagnosis__copy p {
	margin: 0;

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

	font-size: 15px;
	font-weight: 450;
	line-height: 1.68;

	letter-spacing: -.012em;
}


.home-diagnosis__copy p + p {
	margin-top: 16px;
}


.home-diagnosis .home-products__cta {
	margin-top: 32px;
}


/* ==========================================================
   RIGHT
========================================================== */

.home-diagnosis__areas {
	width: 100%;

	border-top: 1px solid rgba(255,255,255,.12);
}


.home-diagnosis__area {
	display: grid;

	grid-template-columns: 52px minmax(0, 1fr);

	gap: 24px;

	padding: 34px 0;

	border-bottom: 1px solid rgba(255,255,255,.12);
}


.home-diagnosis__number {
	padding-top: 5px;

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

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .14em;
}


.home-diagnosis__area-content {
	max-width: 660px;
}


.home-diagnosis__area-content h3 {
	margin: 0 0 10px;

	color: #ffffff;

	font-size: clamp(24px, 2vw, 32px);
	font-weight: 700;
	line-height: 1.1;

	letter-spacing: -.035em;
}


.home-diagnosis__area-content p {
	max-width: 560px;

	margin: 0;

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

	font-size: 15px;
	font-weight: 450;
	line-height: 1.65;

	letter-spacing: -.01em;
}


/* ==========================================================
   HOVER
========================================================== */

.home-diagnosis__area {
	transition:
		padding-left .22s ease,
		border-color .22s ease;
}


.home-diagnosis__area:hover {
	padding-left: 12px;

	border-bottom-color: rgba(35,183,255,.42);
}


.home-diagnosis__area:hover .home-diagnosis__number {
	color: #23b7ff;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-diagnosis__inner {
		grid-template-columns: 1fr;

		gap: 70px;
	}


	.home-diagnosis__intro {
		position: relative;
		top: auto;

		max-width: 760px;
	}

}


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

@media (max-width: 680px) {

	.home-diagnosis__inner {
		gap: 54px;

		padding:
			72px
			var(--page-padding)
			82px;
	}


	.home-diagnosis__title {
		font-size: clamp(42px, 12vw, 56px);
	}


	.home-diagnosis__copy {
		margin-top: 24px;
	}


	.home-diagnosis__area {
		grid-template-columns: 36px minmax(0, 1fr);

		gap: 16px;

		padding: 26px 0;
	}


	.home-diagnosis__area:hover {
		padding-left: 0;
	}


	.home-diagnosis__area-content h3 {
		font-size: 24px;
	}


	.home-diagnosis__area-content p,
	.home-diagnosis__copy p {
		font-size: 15px;
	}

}

/* ==========================================================
   HOME — CLIENT REVIEWS
========================================================== */

.home-reviews,
.home-reviews * {
	box-sizing: border-box;
}


.home-reviews {
	position: relative;

	width: 100%;
	overflow: hidden;

	background: #050505;
	color: #ffffff;

	border-top: 1px solid rgba(255,255,255,.08);
}


.home-reviews__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(400px, .9fr);

	gap: clamp(70px, 8vw, 140px);

	align-items: center;

	width: 100%;

	padding:
		clamp(100px, 8vw, 145px)
		var(--page-padding)
		clamp(100px, 8vw, 145px);
}


/* ==========================================================
   LEFT — CAROUSEL
========================================================== */

.home-reviews__carousel {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);
}


.home-reviews__track {
	display: flex;

	width: 100%;

	transition: transform .55s cubic-bezier(.22,.61,.36,1);
}


.home-reviews__review {
	flex: 0 0 100%;

	width: 100%;

	padding:
		clamp(42px, 4vw, 64px)
		clamp(8px, 1vw, 16px)
		clamp(38px, 4vw, 58px);
}


.home-reviews__review blockquote {
	max-width: 760px;

	margin: 0;

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

	font-size: clamp(20px, 1.55vw, 26px);
	font-weight: 500;
	line-height: 1.52;

	letter-spacing: -.025em;
}


.home-reviews__name {
	margin: 30px 0 0;

	color: #ffffff;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: .02em;
}


/* ==========================================================
   CONTROLS
========================================================== */

.home-reviews__controls {
	display: flex;
	align-items: center;

	gap: 18px;

	padding:
		20px
		clamp(8px, 1vw, 16px);

	border-top: 1px solid rgba(255,255,255,.08);
}


.home-reviews__control {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	padding: 0;

	border: 1px solid rgba(255,255,255,.16);
	border-radius: 50%;

	background: transparent;
	color: rgba(255,255,255,.72);

	font-family: inherit;
	font-size: 16px;

	cursor: pointer;

	transition:
		color .2s ease,
		border-color .2s ease,
		transform .2s ease;
}


.home-reviews__control:hover {
	color: #ffffff;

	border-color: rgba(255,255,255,.5);
}


.home-reviews__control--prev:hover {
	transform: translateX(-2px);
}


.home-reviews__control--next:hover {
	transform: translateX(2px);
}


.home-reviews__count {
	display: flex;
	align-items: center;

	gap: 10px;

	margin-left: 4px;

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .12em;
}


.home-reviews__current {
	color: #ffffff;
}


.home-reviews__count-line {
	display: block;

	width: 32px;
	height: 1px;

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


/* ==========================================================
   RIGHT — INTRO
========================================================== */

.home-reviews__intro {
	width: 100%;
	max-width: 620px;

	margin-left: auto;
}


.home-reviews__eyebrow {
	margin: 0 0 20px;

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

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .19em;
	text-transform: uppercase;
}


.home-reviews__title {
	margin: 0;

	font-size: clamp(48px, 4.2vw, 72px);
	font-weight: 700;
	line-height: 1.02;

	letter-spacing: -.052em;
}


.home-reviews__title-white,
.home-reviews__title-gradient {
	display: block;
}


.home-reviews__title-white {
	color: #ffffff;
}


.home-reviews__title-gradient {
	display: block;

	width: fit-content;

	margin-top: 7px;
	padding: 0 .06em .08em 0;

	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;

	-webkit-text-fill-color: transparent;
}


.home-reviews__accent {
	width: 66px;
	height: 2px;

	margin-top: 27px;

	border-radius: 999px;

	background: var(--gradient);
}


.home-reviews__copy {
	max-width: 520px;
	margin-top: 27px;
}


.home-reviews__copy p {
	margin: 0;

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

	font-size: 15px;
	font-weight: 450;
	line-height: 1.68;

	letter-spacing: -.012em;
}


.home-reviews__copy p + p {
	margin-top: 16px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-reviews__inner {
		display: flex;
		flex-direction: column-reverse;

		gap: 58px;
	}


	.home-reviews__intro {
		max-width: 760px;

		margin-left: 0;
	}


	.home-reviews__carousel {
		width: 100%;
	}

}


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

@media (max-width: 680px) {

	.home-reviews__inner {
		gap: 46px;

		padding:
			72px
			var(--page-padding)
			82px;
	}


	.home-reviews__title {
		font-size: clamp(42px, 12vw, 56px);
	}


	.home-reviews__review {
		padding:
			34px
			0
			34px;
	}


	.home-reviews__review blockquote {
		font-size: 18px;
		line-height: 1.55;
	}


	.home-reviews__controls {
		padding:
			18px
			0;
	}

}

/* ==========================================================
   HOME — FINAL CTA
========================================================== */

.home-final,
.home-final * {
	box-sizing: border-box;
}


.home-final {
	position: relative;

	width: 100%;

	background: #0a0a0b;
	color: #ffffff;

	border-top: 1px solid rgba(255,255,255,.08);
}


.home-final__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(360px, .95fr);

	gap: clamp(70px, 8vw, 140px);

	align-items: end;

	width: 100%;

	padding:
		clamp(105px, 8vw, 150px)
		var(--page-padding)
		clamp(105px, 8vw, 150px);
}


/* ==========================================================
   LEFT
========================================================== */

.home-final__heading {
	max-width: 820px;
}


.home-final__eyebrow {
	margin: 0 0 20px;

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

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .19em;
	text-transform: uppercase;
}


.home-final__title {
	margin: 0;

	font-size: clamp(52px, 5vw, 86px);
	font-weight: 700;
	line-height: .98;

	letter-spacing: -.058em;
}


.home-final__title-white,
.home-final__title-gradient {
	display: block;
}


.home-final__title-white {
	color: #ffffff;
}


.home-final__title-gradient {
	width: fit-content;

	margin-top: 8px;
	padding: 0 .06em .08em 0;

	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}


/* ==========================================================
   RIGHT
========================================================== */

.home-final__content {
	max-width: 590px;

	margin-left: auto;
}


.home-final__content p {
	margin: 0;

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

	font-size: 15px;
	font-weight: 450;
	line-height: 1.7;

	letter-spacing: -.012em;
}


.home-final__content p + p {
	margin-top: 16px;
}


.home-final .home-products__cta {
	margin-top: 32px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.home-final__inner {
		grid-template-columns: 1fr;

		gap: 48px;
	}


	.home-final__content {
		max-width: 620px;

		margin-left: 0;
	}

}


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

@media (max-width: 680px) {

	.home-final__inner {
		gap: 38px;

		padding:
			72px
			var(--page-padding)
			82px;
	}


	.home-final__title {
		font-size: clamp(44px, 12vw, 58px);
	}


	.home-final .home-products__cta {
		margin-top: 28px;
	}

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer,
.site-footer * {
	box-sizing: border-box;
}


.site-footer {
	position: relative;

	width: 100%;
	overflow: hidden;

	background: #050505;
	color: #ffffff;

	border-top: 1px solid rgba(255,255,255,.08);
}


/* ==========================================================
   TOP GRADIENT
========================================================== */

.site-footer__gradient-line {
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 2px;

	background: var(--gradient);
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.site-footer__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.65fr)
		minmax(190px, .55fr)
		minmax(220px, .65fr);

	gap: clamp(70px, 8vw, 150px);

	width: 100%;

	padding:
		clamp(78px, 6vw, 110px)
		var(--page-padding)
		clamp(74px, 6vw, 100px);
}


/* ==========================================================
   BRAND
========================================================== */

.site-footer__brand {
	position: relative;

	width: 100%;
	max-width: 590px;
}


.site-footer__logo-link {
	display: inline-block;

	text-decoration: none;
}


.site-footer__logo {
	display: block;

	width: 210px;
	max-width: 100%;
	height: auto;
}


/* ==========================================================
   BRAND COPY
========================================================== */

.site-footer__description {
	max-width: 500px;

	margin: 32px 0 0;

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

	font-size: 15px;
	font-weight: 450;
	line-height: 1.7;

	letter-spacing: -.012em;
}


/* ==========================================================
   LET'S TALK
========================================================== */

.site-footer__contact {
	display: inline-flex;
	align-items: center;

	gap: 14px;

	margin-top: 30px;
	padding-bottom: 7px;

	border-bottom: 1px solid rgba(255,255,255,.24);

	color: #ffffff;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;

	transition:
		border-color .2s ease,
		gap .2s ease;
}


.site-footer__contact-arrow {
	transition: transform .2s ease;
}


.site-footer__contact:hover {
	gap: 19px;

	border-bottom-color: #23b7ff;
}


.site-footer__contact:hover .site-footer__contact-arrow {
	transform: translateX(2px);
}


/* ==========================================================
   COLUMNS
========================================================== */

.site-footer__column {
	position: relative;

	width: 100%;
}


.site-footer__heading {
	position: relative;

	margin: 4px 0 28px;
	padding-bottom: 17px;

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .19em;
	text-transform: uppercase;

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


.site-footer__heading::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -1px;

	width: 34px;
	height: 1px;

	background: var(--gradient);
}


/* ==========================================================
   LINKS
========================================================== */

.site-footer__links {
	display: flex;
	flex-direction: column;

	gap: 0;
}


.site-footer__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	width: 100%;

	padding: 9px 0;

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

	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;

	text-decoration: none;

	transition:
		color .2s ease,
		padding-left .2s ease;
}


.site-footer__link-arrow {
	color: rgba(255,255,255,.18);

	font-size: 11px;

	opacity: 0;

	transform: translateX(-5px);

	transition:
		opacity .2s ease,
		transform .2s ease,
		color .2s ease;
}


.site-footer__links a:hover {
	padding-left: 5px;

	color: #ffffff;
}


.site-footer__links a:hover .site-footer__link-arrow {
	opacity: 1;

	color: #23b7ff;

	transform: translateX(0);
}


/* ==========================================================
   STUDIOS
========================================================== */

.site-footer__studios {
	margin-top: 38px;
	padding-top: 22px;

	border-top: 1px solid rgba(255,255,255,.09);
}


.site-footer__studios-label {
	display: block;

	margin-bottom: 11px;

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

	font-size: 8px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .16em;
	text-transform: uppercase;
}


.site-footer__studios a {
	display: inline-flex;
	align-items: center;

	gap: 8px;

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

	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;

	text-decoration: none;

	transition: color .2s ease;
}


.site-footer__studios a span {
	font-size: 10px;

	transition: transform .2s ease;
}


.site-footer__studios a:hover {
	color: #ffffff;
}


.site-footer__studios a:hover span {
	transform: translate(2px, -2px);
}


/* ==========================================================
   BOTTOM
========================================================== */

.site-footer__bottom {
	width: 100%;

	padding:
		0
		var(--page-padding);

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


.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 40px;

	width: 100%;

	padding:
		25px
		0
		29px;

	border-top: 1px solid rgba(255,255,255,.08);
}


/* ==========================================================
   COPYRIGHT
========================================================== */

.site-footer__copyright {
	margin: 0;

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

	font-size: 9px;
	font-weight: 500;
	line-height: 1.5;

	letter-spacing: .015em;
}


/* ==========================================================
   STRAPLINE
========================================================== */

.site-footer__strapline {
	display: flex;
	align-items: center;

	gap: 7px;

	margin: 0;

	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;

	letter-spacing: .06em;
	text-transform: uppercase;
}


.site-footer__strapline span {
	color: rgba(255,255,255,.30);
}


.site-footer__strapline span:nth-child(2) {
	background: var(--gradient);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}


/* ==========================================================
   SUBTLE BACKGROUND DETAIL
========================================================== */

.site-footer::after {
	content: "";

	position: absolute;

	left: -120px;
	bottom: -240px;

	width: 520px;
	height: 320px;

	pointer-events: none;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255,61,187,.055) 0%,
			rgba(138,92,255,.025) 38%,
			transparent 72%
		);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

	.site-footer__inner {
		grid-template-columns:
			minmax(0, 1.25fr)
			minmax(160px, .55fr)
			minmax(190px, .65fr);

		gap: 50px;
	}


	.site-footer__logo {
		width: 190px;
	}

}


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

@media (max-width: 760px) {

	.site-footer__inner {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap:
			58px
			40px;

		padding:
			64px
			var(--page-padding)
			64px;
	}


	.site-footer__brand {
		grid-column: 1 / -1;

		max-width: 520px;
	}


	.site-footer__logo {
		width: 180px;
	}


	.site-footer__description {
		max-width: 440px;

		margin-top: 26px;

		font-size: 14px;
	}


	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;

		gap: 10px;
	}


	.site-footer__strapline {
		flex-wrap: wrap;
	}

}


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

@media (max-width: 480px) {

	.site-footer__inner {
		grid-template-columns: 1fr;

		gap: 48px;
	}


	.site-footer__brand {
		grid-column: auto;
	}


	.site-footer__logo {
		width: 170px;
	}


	.site-footer__heading {
		margin-bottom: 20px;
	}


	.site-footer__studios {
		margin-top: 30px;
	}

}

/* ==========================================================
   SUBSCRIPTIONS HERO
   EXACT MIRROR OF HOMEPAGE HERO
========================================================== */

.subscriptions-hero {
	position: relative;

	width: 100%;

	min-height:
		calc(
			100vh -
			var(--header-height)
		);

	overflow: hidden;

	background:
		#030303;

	color:
		var(--white);
}


/* ==========================================================
   SUBTLE AMBIENT COLOUR
   MIRRORED FROM HOMEPAGE
========================================================== */

.subscriptions-hero__ambient {
	position: absolute;

	border-radius: 50%;

	pointer-events: none;

	filter:
		blur(140px);
}


.subscriptions-hero__ambient--pink {
	width: 520px;
	height: 520px;

	left: 36%;
	bottom: -390px;

	background:
		rgba(255, 47, 146, 0.10);
}


.subscriptions-hero__ambient--cyan {
	width: 600px;
	height: 600px;

	left: -360px;
	top: 10%;

	background:
		rgba(0, 200, 248, 0.08);
}


/* ==========================================================
   HERO INNER
   HOMEPAGE GRID REVERSED
========================================================== */

.subscriptions-hero__inner {
	position: relative;

	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1.14fr)
		minmax(520px, 0.86fr);

	gap:
		clamp(
			40px,
			4vw,
			76px
		);

	width: 100%;

	min-height:
		calc(
			100vh -
			var(--header-height)
		);

	align-items: center;

	padding:
		74px
		var(--page-padding)
		84px
		0;
}


/* ==========================================================
   HERO COPY
========================================================== */

.subscriptions-hero__content {
	position: relative;

	z-index: 5;

	width: 100%;
	max-width: 750px;

	min-width: 0;
}


/* ==========================================================
   EYEBROW
   SAME TYPOGRAPHY/SPACING AS HOMEPAGE KICKER
========================================================== */

.subscriptions-hero__eyebrow {
	display: block;

	margin:
		0
		0
		28px;

	color:
		rgba(255, 255, 255, 0.62);

	font-family:
		var(--font-sans);

	font-size: 12px;
	font-weight: 700;

	line-height: 1;

	letter-spacing:
		0.25em;

	text-transform:
		uppercase;
}


.subscriptions-hero__eyebrow-line {
	display: none;
}


/* ==========================================================
   HERO TITLE
========================================================== */

.subscriptions-hero__title {
	max-width: 750px;

	margin:
		0
		0
		32px;

	color:
		#ffffff;

	font-family:
		var(--font-sans);

	font-size:
		clamp(
			60px,
			5.3vw,
			100px
		);

	font-weight: 700;

	line-height: 0.98;

	letter-spacing:
		-0.062em;
}


.subscriptions-hero__title > span {
	display: block;
}


/* ==========================================================
   ANIMATED GRADIENT TEXT
   SAME AS HOMEPAGE
========================================================== */

.subscriptions-hero__gradient-text {
	display: inline-block;

	width: fit-content;

	padding-right: 0.08em;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 18%,
			#9A5CFF 38%,
			#2F6BFF 58%,
			#00E5D4 78%,
			#FFD400 100%
		);

	background-size:
		300%
		100%;

	background-position:
		0%
		50%;

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;

	-webkit-text-fill-color:
		transparent;

	animation:
		ambHeroGradientFlow
		7s
		linear
		infinite;
}


/* ==========================================================
   INTRO
========================================================== */

.subscriptions-hero__intro {
	max-width: 650px;

	margin:
		0
		0
		40px;

	color:
		rgba(255, 255, 255, 0.74);

	font-family:
		var(--font-sans);

	font-size:
		clamp(
			18px,
			1.25vw,
			21px
		);

	font-weight: 450;

	line-height: 1.62;

	letter-spacing:
		-0.025em;
}


/* ==========================================================
   BUTTONS
   NO SUBSCRIPTIONS BUTTON STYLING
   USES EXISTING HOMEPAGE .amb-hero__* CLASSES
========================================================== */


/* ==========================================================
   HERO VISUAL
========================================================== */

.subscriptions-hero__visual {
	position: relative;

	align-self: stretch;

	min-width: 0;
	min-height: 600px;

	overflow: hidden;
}


/* ==========================================================
   ARTWORK
   HOMEPAGE IMAGE MIRRORED
========================================================== */

.subscriptions-hero__visual-image {
	position: absolute;

	z-index: 1;

	top: 50%;
	left: -1px;

	width:
		max(
			860px,
			58vw
		);

	max-width: none;

	height:
		auto;

	transform:
		translateY(-50%)
		scaleX(-1);

	object-fit: contain;

	user-select: none;

	pointer-events: none;
}


/* ==========================================================
   IMAGE FADE INTO COPY
   MIRROR OF HOMEPAGE FADE
========================================================== */

.subscriptions-hero__visual-fade {
	position: absolute;

	z-index: 3;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			270deg,
			#030303 0%,
			rgba(3, 3, 3, 0.94) 5%,
			rgba(3, 3, 3, 0.64) 13%,
			rgba(3, 3, 3, 0.18) 25%,
			rgba(3, 3, 3, 0) 40%
		);
}


/* ==========================================================
   SUBTLE EDGE VIGNETTE
========================================================== */

.subscriptions-hero__visual::after {
	position: absolute;

	z-index: 2;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(3, 3, 3, 0.20) 0%,
			transparent 16%,
			transparent 78%,
			rgba(3, 3, 3, 0.24) 100%
		);

	content: "";
}


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1500px) {

	.subscriptions-hero__inner {
		grid-template-columns:
			minmax(0, 1.12fr)
			minmax(470px, 0.88fr);

		gap: 28px;

		padding-top: 68px;
		padding-bottom: 76px;
	}


	.subscriptions-hero__title {
		font-size:
			clamp(
				56px,
				5vw,
				88px
			);
	}


	.subscriptions-hero__visual {
		min-height: 540px;
	}


	.subscriptions-hero__visual-image {
		width:
			max(
				760px,
				57vw
			);
	}

}


/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1280px) {

	.subscriptions-hero__inner {
		grid-template-columns:
			minmax(0, 1.08fr)
			minmax(430px, 0.92fr);

		padding-right:
			var(--page-padding);
	}


	.subscriptions-hero__title {
		font-size:
			clamp(
				52px,
				4.8vw,
				76px
			);
	}


	.subscriptions-hero__intro {
		font-size:
			18px;
	}


	.subscriptions-hero__visual-image {
		width:
			max(
				690px,
				57vw
			);
	}

}


/* ==========================================================
   TABLET
   SAME STACKING AS HOMEPAGE
========================================================== */

@media (max-width: 1080px) {

	.subscriptions-hero {
		min-height: auto;
	}


	.subscriptions-hero__inner {
		grid-template-columns:
			1fr;

		min-height: auto;

		gap: 30px;

		padding:
			72px
			var(--page-padding)
			0;
	}


	.subscriptions-hero__content {
		order: 1;

		max-width: 780px;
	}


	.subscriptions-hero__visual {
		order: 2;

		min-height: 500px;

		margin:
			0
			calc(
				var(--page-padding) * -1
			);
	}


	.subscriptions-hero__visual-image {
		top: 50%;
		left: -80px;

		width:
			max(
				760px,
				92vw
			);

		transform:
			translateY(-50%)
			scaleX(-1);
	}


	.subscriptions-hero__visual-fade {
		background:
			linear-gradient(
				180deg,
				#030303 0%,
				rgba(3, 3, 3, 0.66) 10%,
				rgba(3, 3, 3, 0.08) 28%,
				transparent 44%
			);
	}

}


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

@media (max-width: 620px) {

	.subscriptions-hero__inner {
		gap: 18px;

		padding:
			54px
			var(--page-padding)
			0;
	}


	.subscriptions-hero__eyebrow {
		margin-bottom:
			20px;

		font-size:
			10px;

		line-height:
			1.5;

		letter-spacing:
			0.18em;
	}


	.subscriptions-hero__title {
		margin-bottom:
			24px;

		font-size:
			clamp(
				46px,
				13.5vw,
				67px
			);

		line-height:
			1;

		letter-spacing:
			-0.055em;
	}


	.subscriptions-hero__intro {
		margin-bottom:
			30px;

		font-size:
			17px;

		line-height:
			1.55;
	}


	.subscriptions-hero__visual {
		min-height:
			360px;
	}


	.subscriptions-hero__visual-image {
		left:
			-140px;

		width:
			max(
				650px,
				135vw
			);
	}

}


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

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

	.subscriptions-hero__gradient-text {
		animation:
			none;
	}

}

/* ==========================================================
   SUBSCRIPTIONS - WHY SUBSCRIBE
========================================================== */

.subscriptions-why {
	position: relative;

	width: 100%;

	background:
		#050505;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.06);

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.08);
}


.subscriptions-why::before {
	position: absolute;

	top: 0;
	left: var(--page-padding);

	width: 110px;
	height: 2px;

	background:
		var(--gradient);

	content: "";
}


.subscriptions-why__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(420px, 0.62fr);

	gap:
		clamp(
			80px,
			9vw,
			170px
		);

	width: 100%;

	align-items: start;

	padding:
		clamp(
			115px,
			9vw,
			165px
		)
		var(--page-padding);
}


/* ==========================================================
   HEADING
========================================================== */

.subscriptions-why__heading {
	max-width: 860px;
}


.subscriptions-section__eyebrow {
	margin:
		0
		0
		24px;

	color:
		rgba(255, 255, 255, 0.50);

	font-family:
		var(--font-sans);

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		0.20em;

	text-transform:
		uppercase;
}


.subscriptions-section__title {
	margin: 0;

	color:
		#ffffff;

	font-family:
		var(--font-sans);

	font-size:
		clamp(
			52px,
			4.6vw,
			84px
		);

	font-weight:
		700;

	line-height:
		0.98;

	letter-spacing:
		-0.058em;
}


.subscriptions-section__title > span {
	display:
		block;
}


.subscriptions-section__title-gradient {
	display:
		inline-block;

	width:
		fit-content;

	padding-right:
		0.06em;

	padding-bottom:
		0.04em;

	background:
		var(--gradient);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;

	-webkit-text-fill-color:
		transparent;
}


/* ==========================================================
   COPY
========================================================== */

.subscriptions-why__content {
	max-width: 610px;

	padding-top:
		32px;
}


.subscriptions-why__content p {
	margin:
		0;

	color:
		rgba(255, 255, 255, 0.66);

	font-family:
		var(--font-sans);

	font-size:
		15px;

	font-weight:
		450;

	line-height:
		1.72;

	letter-spacing:
		-0.014em;
}


.subscriptions-why__content p + p {
	margin-top:
		20px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.subscriptions-why__inner {
		grid-template-columns:
			1fr;

		gap:
			44px;
	}


	.subscriptions-why__content {
		max-width:
			650px;

		padding-top:
			0;
	}

}


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

@media (max-width: 620px) {

	.subscriptions-why__inner {
		gap:
			34px;

		padding:
			78px
			var(--page-padding);
	}


	.subscriptions-section__eyebrow {
		margin-bottom:
			20px;

		font-size:
			9px;

		letter-spacing:
			0.18em;
	}


	.subscriptions-section__title {
		font-size:
			clamp(
				42px,
				12vw,
				58px
			);

		line-height:
			0.99;
	}


	.subscriptions-why__content p {
		font-size:
			15px;

		line-height:
			1.68;
	}

}

/* ==========================================================
   SUBSCRIPTIONS CAPABILITIES
========================================================== */

.subscriptions-capabilities {
	position: relative;
	width: 100%;
	background: #030303;
	color: #ffffff;
	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.08);
}


.subscriptions-capabilities__inner {
	width: 100%;
	padding:
		clamp(
			110px,
			9vw,
			165px
		)
		var(--page-padding);
}


/* ==========================================================
   INTRO
========================================================== */

.subscriptions-capabilities__intro {
	max-width: 980px;
	margin-bottom:
		clamp(
			70px,
			7vw,
			110px
		);
}


.subscriptions-capabilities__eyebrow {
	margin:
		0
		0
		24px;

	color:
		rgba(255, 255, 255, 0.58);

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		0.20em;

	text-transform:
		uppercase;
}


.subscriptions-capabilities__title {
	max-width: 900px;
	margin: 0;

	color: #ffffff;

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		clamp(
			52px,
			5vw,
			88px
		);

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		-0.058em;
}


.subscriptions-capabilities__title > span {
	display: block;
}


.subscriptions-capabilities__title-gradient {
	display: inline-block;
	width: fit-content;
	padding-right: 0.05em;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
}


.subscriptions-capabilities__copy {
	max-width: 700px;

	margin:
		34px
		0
		0;

	color:
		rgba(255, 255, 255, 0.72);

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		clamp(
			16px,
			1.1vw,
			18px
		);

	font-weight:
		450;

	line-height:
		1.72;

	letter-spacing:
		-0.018em;
}


/* ==========================================================
   LIST
========================================================== */

.subscriptions-capabilities__list {
	width: 100%;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.13);
}


/* ==========================================================
   CAPABILITY ROW
========================================================== */

.subscriptions-capability {
	position: relative;

	display: grid;

	grid-template-columns:
		70px
		minmax(180px, 0.42fr)
		minmax(0, 1fr)
		42px;

	gap:
		clamp(
			24px,
			3vw,
			56px
		);

	align-items: center;

	width: 100%;

	min-height: 118px;

	padding:
		28px
		0;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.13);

	color: #ffffff;

	text-decoration: none;

	transition:
		background-color 0.25s ease;
}


.subscriptions-capability::after {
	position: absolute;

	right: 0;
	bottom: -1px;
	left: 0;

	height: 2px;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);

	transform:
		scaleX(0);

	transform-origin:
		left center;

	transition:
		transform 0.3s ease;

	content: "";
}


.subscriptions-capability:hover::after {
	transform:
		scaleX(1);
}


/* ==========================================================
   NUMBER
========================================================== */

.subscriptions-capability__number {
	color:
		rgba(255, 255, 255, 0.34);

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		0.14em;
}


/* ==========================================================
   NAME
========================================================== */

.subscriptions-capability__name {
	color:
		#ffffff;

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		clamp(
			28px,
			2.6vw,
			42px
		);

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		-0.045em;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.subscriptions-capability__description {
	max-width:
		680px;

	color:
		rgba(255, 255, 255, 0.62);

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		15px;

	font-weight:
		450;

	line-height:
		1.6;

	letter-spacing:
		-0.012em;
}


/* ==========================================================
   ARROW
========================================================== */

.subscriptions-capability__arrow {
	justify-self: end;

	color:
		rgba(255, 255, 255, 0.46);

	font-family:
		'Plus Jakarta Sans',
		sans-serif;

	font-size:
		24px;

	font-weight:
		400;

	line-height:
		1;

	transition:
		transform 0.25s ease,
		color 0.25s ease;
}


.subscriptions-capability:hover
.subscriptions-capability__arrow {
	transform:
		translateX(5px);

	color:
		#ffffff;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.subscriptions-capability {
		grid-template-columns:
			50px
			minmax(150px, 0.45fr)
			minmax(0, 1fr)
			32px;

		gap:
			24px;

		min-height:
			105px;
	}


	.subscriptions-capability__name {
		font-size:
			clamp(
				25px,
				3vw,
				34px
			);
	}

}


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

@media (max-width: 700px) {

	.subscriptions-capabilities__inner {
		padding:
			78px
			var(--page-padding);
	}


	.subscriptions-capabilities__intro {
		margin-bottom:
			54px;
	}


	.subscriptions-capabilities__eyebrow {
		margin-bottom:
			20px;

		font-size:
			9px;

		letter-spacing:
			0.18em;
	}


	.subscriptions-capabilities__title {
		font-size:
			clamp(
				42px,
				12vw,
				60px
			);

		line-height:
			1;
	}


	.subscriptions-capabilities__copy {
		margin-top:
			28px;

		font-size:
			15px;

		line-height:
			1.68;
	}


	.subscriptions-capability {
		grid-template-columns:
			42px
			minmax(0, 1fr)
			28px;

		gap:
			16px;

		min-height:
			auto;

		padding:
			28px
			0;
	}


	.subscriptions-capability__number {
		align-self:
			start;

		padding-top:
			6px;
	}


	.subscriptions-capability__name {
		font-size:
			28px;
	}


	.subscriptions-capability__description {
		grid-column:
			2 / 4;

		margin-top:
			-4px;

		font-size:
			14px;

		line-height:
			1.6;
	}


	.subscriptions-capability__arrow {
		align-self:
			start;

		padding-top:
			1px;

		font-size:
			21px;
	}

}

/* ==========================================================
   POPULAR SUBSCRIPTIONS
========================================================== */

.subscriptions-popular,
.subscriptions-popular * {
	box-sizing: border-box;
}

.subscriptions-popular {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #050505;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   LAYOUT
========================================================== */

.subscriptions-popular__inner {
	display: grid;
	grid-template-columns:
		minmax(360px, 0.72fr)
		minmax(0, 1.62fr);
	gap: clamp(70px, 7vw, 130px);
	align-items: start;
	width: 100%;
	padding:
		clamp(110px, 9vw, 160px)
		var(--page-padding);
}


/* ==========================================================
   LEFT — INTRO
========================================================== */

.subscriptions-popular__intro {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.subscriptions-popular__intro-inner {
	position: sticky;
	top: calc(var(--header-height) + 60px);
	max-width: 520px;
}

.subscriptions-popular__eyebrow {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.42);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.subscriptions-popular__title {
	margin: 0;
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(48px, 4.3vw, 76px);
	font-weight: 700;
	line-height: 1.01;
	letter-spacing: -0.058em;
}

.subscriptions-popular__title > span {
	display: block;
}

.subscriptions-popular__title-gradient {
	display: inline-block;
	width: fit-content;
	padding-right: 0.06em;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.subscriptions-popular__intro-accent {
	width: 90px;
	height: 3px;
	margin-top: 30px;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);
}

.subscriptions-popular__copy {
	max-width: 500px;
	margin-top: 34px;
}

.subscriptions-popular__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	font-weight: 450;
	line-height: 1.72;
	letter-spacing: -0.012em;
}

.subscriptions-popular__copy p + p {
	margin-top: 22px;
}

.subscriptions-popular__intro .home-products__cta {
	margin-top: 36px;
}


/* ==========================================================
   RIGHT — SUBSCRIPTION CARDS
========================================================== */

.subscriptions-popular__cards {
	display: grid;
	grid-column: 2;
	grid-row: 1;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
	width: 100%;
}

.subscriptions-popular__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 760px;
	padding: 30px 28px 28px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: #090909;
}

.subscriptions-popular__card--featured {
	border-color: rgba(255, 255, 255, 0.19);
	background:
		linear-gradient(
			145deg,
			rgba(255, 61, 187, 0.055) 0%,
			rgba(138, 92, 255, 0.025) 46%,
			rgba(5, 5, 5, 0) 72%
		),
		#090909;
}

.subscriptions-popular__card--featured::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#8A5CFF 64%,
			#23B7FF 100%
		);
	content: "";
}

.subscriptions-popular__product {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.38);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.subscriptions-popular__level {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.58);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.subscriptions-popular__card-title {
	max-width: 280px;
	min-height: 68px;
	margin: 0;
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(20px, 1.45vw, 25px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.035em;
}


/* ==========================================================
   PRICE
========================================================== */

.subscriptions-popular__price {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	min-height: 96px;
	margin-top: 18px;
}

.subscriptions-popular__currency {
	padding-bottom: 10px;
	color: rgba(255, 255, 255, 0.65);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.subscriptions-popular__amount {
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(43px, 3vw, 58px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.065em;
}

.subscriptions-popular__period {
	padding-bottom: 8px;
	color: rgba(255, 255, 255, 0.38);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 8px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.subscriptions-popular__card-accent {
	width: 54px;
	height: 2px;
	margin: 22px 0 4px;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 38%,
			#8A5CFF 68%,
			#23B7FF 100%
		);
}


/* ==========================================================
   FEATURES
========================================================== */

.subscriptions-popular__features {
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.subscriptions-popular__features li {
	position: relative;
	margin: 0;
	padding: 15px 0 15px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.63);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: 450;
	line-height: 1.5;
}

.subscriptions-popular__features li::before {
	position: absolute;
	top: 21px;
	left: 1px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
	content: "";
}


/* ==========================================================
   CARD BUTTONS
========================================================== */

.subscriptions-popular__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	margin-top: auto;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9px;
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	transition:
		border-color 0.25s ease,
		background-color 0.25s ease,
		transform 0.25s ease;
}

.subscriptions-popular__button:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.025);
}

.subscriptions-popular__card--featured
.subscriptions-popular__button {
	border-color: transparent;
	background:
		linear-gradient(#090909, #090909) padding-box,
		linear-gradient(
			90deg,
			#FFD400,
			#FF3DBB,
			#8A5CFF,
			#23B7FF
		) border-box;
}


/* ==========================================================
   RESPONSIVE — 1380PX
========================================================== */

@media (max-width: 1380px) {

	.subscriptions-popular__inner {
		grid-template-columns:
			minmax(330px, 0.7fr)
			minmax(0, 1.55fr);
		gap: 60px;
	}

	.subscriptions-popular__card {
		padding-right: 22px;
		padding-left: 22px;
	}

}


/* ==========================================================
   RESPONSIVE — 1180PX
========================================================== */

@media (max-width: 1180px) {

	.subscriptions-popular__inner {
		grid-template-columns: 1fr;
	}

	.subscriptions-popular__intro {
		grid-column: auto;
		grid-row: auto;
	}

	.subscriptions-popular__intro-inner {
		position: static;
		max-width: 760px;
	}

	.subscriptions-popular__cards {
		grid-column: auto;
		grid-row: auto;
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

}


/* ==========================================================
   RESPONSIVE — 860PX
========================================================== */

@media (max-width: 860px) {

	.subscriptions-popular__cards {
		grid-template-columns: 1fr;
	}

	.subscriptions-popular__card {
		min-height: 0;
	}

	.subscriptions-popular__card-title {
		min-height: 0;
	}

}


/* ==========================================================
   RESPONSIVE — 620PX
========================================================== */

@media (max-width: 620px) {

	.subscriptions-popular__inner {
		gap: 54px;
		padding: 78px var(--page-padding);
	}

	.subscriptions-popular__title {
		font-size: clamp(42px, 12vw, 58px);
	}

	.subscriptions-popular__copy p {
		font-size: 14px;
	}

	.subscriptions-popular__card {
		padding: 26px 22px 22px;
		border-radius: 12px;
	}

}

/* ==========================================================
   WEBSITES — WHAT'S INCLUDED
   STICKY INTRO
========================================================== */

.websites-included .home-proof__inner {
	align-items: start;
}

.websites-included__intro {
	align-self: stretch;
}

.websites-included__intro-inner {
	position: sticky;
	top: calc(var(--header-height) + 60px);
	max-width: 660px;
}

.websites-included .home-proof__copy {
	max-width: 620px;
}

.websites-included .home-proof__principle-content {
	max-width: 700px;
	padding-top: 46px;
	padding-bottom: 48px;
}

.websites-included .home-proof__principle-content p {
	max-width: 680px;
}

.websites-included .home-proof__principle-content p + p {
	margin-top: 18px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

	.websites-included__intro {
		align-self: auto;
	}

	.websites-included__intro-inner {
		position: static;
		max-width: 760px;
	}

}


@media (max-width: 620px) {

	.websites-included .home-proof__principle-content {
		padding-top: 34px;
		padding-bottom: 36px;
	}

	.websites-included .home-proof__principle-content p + p {
		margin-top: 15px;
	}

}

.websites-included .home-proof__title span {
	padding-bottom: 0.08em;
}

/* ==========================================================
   WEBSITES — SELECTED WEBSITE WORK
========================================================== */

.websites-work {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #030303;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.websites-work .home-work__inner {
	width: 100%;
	padding-top: clamp(110px, 9vw, 160px);
	padding-bottom: clamp(110px, 9vw, 160px);
}


/* ==========================================================
   INTRO
========================================================== */

.websites-work .home-work__intro {
	max-width: 820px;
	margin-bottom: clamp(60px, 6vw, 100px);
}

.websites-work .home-work__eyebrow {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.48);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

.websites-work .home-work__title {
	max-width: 820px;
	margin: 0;
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(48px, 4.4vw, 78px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.055em;
}

.websites-work .home-work__title > span {
	display: block;
}

.websites-work .home-work__title-gradient {
	display: inline-block;
	width: fit-content;
	padding-right: 0.06em;
	padding-bottom: 0.06em;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.websites-work .home-work__line {
	width: 110px;
	height: 3px;
	margin-top: 30px;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#9A5CFF 52%,
			#2F6BFF 74%,
			#00E5D4 100%
		);
}

.websites-work .home-work__copy {
	max-width: 680px;
	margin-top: 34px;
}

.websites-work .home-work__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.70);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(16px, 1.1vw, 18px);
	font-weight: 450;
	line-height: 1.72;
	letter-spacing: -0.018em;
}

.websites-work .home-work__copy p + p {
	margin-top: 22px;
}

.websites-work .home-products__cta {
	margin-top: 36px;
}


/* ==========================================================
   PROJECT GRID
========================================================== */

.websites-work .home-work__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(40px, 4vw, 70px) clamp(18px, 2vw, 34px);
	width: 100%;
}


/* ==========================================================
   PROJECT
========================================================== */

.websites-work .home-work__project {
	min-width: 0;
}

.websites-work .home-work__project-link {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}


/* ==========================================================
   IMAGE
========================================================== */

.websites-work .home-work__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #090909;
}

.websites-work .home-work__image-file {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.35s ease;
}

.websites-work .home-work__project-link:hover .home-work__image-file {
	transform: scale(1.025);
}


/* ==========================================================
   PROJECT CONTENT
========================================================== */

.websites-work .home-work__project-content {
	position: relative;
	padding: 24px 42px 0 0;
}

.websites-work .home-work__discipline {
	margin: 0 0 11px;
	color: rgba(255, 255, 255, 0.40);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.websites-work .home-work__project-title {
	margin: 0;
	color: #ffffff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(22px, 1.7vw, 30px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.websites-work .home-work__outcome {
	max-width: 430px;
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.60);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 450;
	line-height: 1.6;
	letter-spacing: -0.012em;
}

.websites-work .home-work__arrow {
	position: absolute;
	top: 25px;
	right: 2px;
	color: rgba(255, 255, 255, 0.42);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 23px;
	font-weight: 400;
	line-height: 1;
	transition:
		transform 0.25s ease,
		color 0.25s ease;
}

.websites-work .home-work__project-link:hover .home-work__arrow {
	transform: translateX(5px);
	color: #ffffff;
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1100px) {

	.websites-work .home-work__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 700px) {

	.websites-work .home-work__inner {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.websites-work .home-work__intro {
		margin-bottom: 54px;
	}

	.websites-work .home-work__title {
		font-size: clamp(42px, 12vw, 58px);
	}

	.websites-work .home-work__copy p {
		font-size: 15px;
	}

	.websites-work .home-work__grid {
		grid-template-columns: 1fr;
		gap: 54px;
	}

	.websites-work .home-work__project-content {
		padding-top: 20px;
	}

	.websites-work .home-work__arrow {
		top: 21px;
	}

}

/* ==========================================================
   AMB360 — FINAL CORRECTIONS
   Scoped overrides only. Existing page styling above remains intact.
========================================================== */

/* ==========================================================
   WEBSITES — PRICING
   Left details / sticky right intro
========================================================== */

.websites-pricing .home-proof__inner {
	align-items: start;
}

.websites-pricing__principles {
	grid-column: 1;
	grid-row: 1;
}

.websites-pricing__intro {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
}

.websites-pricing__intro-inner {
	position: sticky;
	top: calc(var(--header-height) + 60px);
	max-width: 660px;
}

.websites-pricing .home-proof__principle-content {
	max-width: 700px;
	padding-top: 46px;
	padding-bottom: 48px;
}

.websites-pricing .home-proof__principle-content p {
	max-width: 670px;
}

.websites-pricing .home-proof__principle-content p + p {
	margin-top: 18px;
}

.websites-pricing .home-proof__copy strong {
	color: #fff;
	font-weight: 700;
}

.websites-pricing .home-proof__title span {
	padding-bottom: .08em;
}

@media (max-width: 980px) {
	.websites-pricing__principles,
	.websites-pricing__intro {
		grid-column: auto;
		grid-row: auto;
	}

	.websites-pricing__intro {
		order: -1;
		align-self: auto;
	}

	.websites-pricing__intro-inner {
		position: static;
		max-width: 760px;
	}
}

@media (max-width: 620px) {
	.websites-pricing .home-proof__principle-content {
		padding-top: 34px;
		padding-bottom: 36px;
	}

	.websites-pricing .home-proof__principle-content p + p {
		margin-top: 15px;
	}
}


/* ==========================================================
   WEBSITES — SELECTED WORK INTRO ONLY
   Project grid/image rules remain the homepage rules.
========================================================== */

.websites-page .home-work__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 920px);
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.websites-page .home-work__eyebrow {
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
}

.websites-page .home-work__title {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.websites-page .home-work__title-white,
.websites-page .home-work__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.websites-page .home-work__accent {
	margin: 26px auto 0;
}

.websites-page .home-work__intro-copy {
	width: min(100%, 720px);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.websites-page .home-work__accent + .home-work__intro-copy {
	margin-top: 26px;
}

.websites-page .home-work__intro-copy + .home-work__intro-copy {
	margin-top: 16px;
}


/* ==========================================================
   GLOBAL FINAL CTA — CENTRED
   Applies to every page using .home-final.
========================================================== */

.home-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.home-final__heading,
.home-final__intro {
	width: min(100%, 1050px);
	max-width: 1050px;
	margin: 0 auto;
	text-align: center;
}

.home-final__eyebrow {
	text-align: center;
}

.home-final__title {
	width: 100%;
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.home-final__title-white,
.home-final__title-gradient {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.home-final__content {
	width: min(100%, 720px);
	max-width: 720px;
	margin: clamp(30px, 3vw, 44px) auto 0;
	text-align: center;
}

.home-final__content p {
	margin-left: auto;
	margin-right: auto;
}

.home-final .home-products__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	width: min(100%, 500px);
	max-width: 500px;
	margin: 32px auto 0;
	text-align: left;
	background: none;
}

/* remove the soft coloured hover wash on final CTAs only */
.home-final .home-products__cta::before {
	display: none;
}

.home-final .home-products__cta:hover::before,
.home-final .home-products__cta:focus::before {
	display: none;
}


/* ==========================================================
   WEBSITES — CUSTOM FINAL CTA MARKUP
========================================================== */

.websites-final__inner {
	width: 100%;
	padding:
		clamp(105px, 8vw, 150px)
		var(--page-padding)
		clamp(105px, 8vw, 150px);
}

.websites-final__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 1050px);
	margin: 0 auto;
	text-align: center;
}

.websites-final .home-final__title {
	max-width: 1050px;
}

.websites-final__copy {
	width: min(100%, 720px);
	margin: clamp(30px, 3vw, 44px) auto 0;
	text-align: center;
}

.websites-final__copy p {
	margin: 0;
	color: rgba(255,255,255,.66);
	font-size: 15px;
	font-weight: 450;
	line-height: 1.7;
	letter-spacing: -.012em;
}

.websites-final__copy p + p {
	margin-top: 16px;
}

.websites-final .home-products__cta {
	margin-top: 32px;
}

@media (max-width: 680px) {
	.home-final__inner,
	.websites-final__inner {
		padding:
		72px
		var(--page-padding)
		82px;
	}

	.websites-page .home-work__intro,
	.websites-page .home-work__title,
	.websites-page .home-work__intro-copy,
	.home-final__heading,
	.home-final__intro,
	.home-final__title,
	.home-final__content,
	.websites-final__content,
	.websites-final__copy {
		width: 100%;
		max-width: 100%;
	}

	.home-final .home-products__cta,
	.websites-final .home-products__cta {
		width: min(100%, 500px);
		margin-top: 28px;
	}
}

/* ==========================================================
   SUBSCRIPTIONS — CAPABILITIES
   STICKY RIGHT / EXPANDED LEFT
========================================================== */

.subscriptions-capabilities .home-products__inner {
	align-items: start;
}


/* ==========================================================
   STICKY RIGHT INTRO
========================================================== */

.subscriptions-capabilities__intro {
	align-self: stretch;
}

.subscriptions-capabilities__intro .home-products__intro-inner {
	position: sticky;
	top: calc(var(--header-height) + 48px);
}


/* ==========================================================
   EXPANDED PRODUCT ROWS
========================================================== */

.subscriptions-capabilities .home-product {
	align-items: start;
}

.subscriptions-capabilities .home-product__content {
	min-width: 0;
}

.subscriptions-capabilities .home-product__description {
	max-width: 680px;
	line-height: 1.7;
}


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

@media (max-width: 980px) {

	.subscriptions-capabilities__intro {
		align-self: auto;
	}

	.subscriptions-capabilities__intro .home-products__intro-inner {
		position: static;
	}

}

/* ==========================================================
   SELECTED WORK — CENTRED INTRO
   HOMEPAGE + WORK PAGE
========================================================== */

.home-work__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 920px);
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.home-work__eyebrow {
	width: 100%;
	text-align: center;
}

.home-work__title {
	width: 100%;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.home-work__title-white,
.home-work__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.home-work__accent {
	margin-left: auto;
	margin-right: auto;
}

.home-work__intro-copy {
	width: min(100%, 760px);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ==========================================================
   WORK — CAPABILITY ROW WIDTHS
========================================================== */

.work-capabilities .home-product {
	grid-template-columns:
		40px
		minmax(0, 1fr)
		40px;
	column-gap: 28px;
}

.work-capabilities .home-product__content {
	width: 100%;
	max-width: none;
}

.work-capabilities .home-product__description {
	width: 100%;
	max-width: 760px;
}

.work-capabilities .home-product__description p {
	width: 100%;
	max-width: 760px;
}

.work-capabilities .home-product__arrow {
	justify-self: end;
	align-self: center;
}


/* Keep the two paragraphs nicely separated */

.work-capabilities .home-product__description p + p {
	margin-top: 18px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.work-capabilities .home-product__description,
	.work-capabilities .home-product__description p {
		max-width: 100%;
	}

}

/* ==========================================================
   ABOUT PAGE
========================================================== */


/* ==========================================================
   HERO — FIX DESCENDER CLIPPING
========================================================== */

.about-hero .amb-hero__title {
	overflow: visible;
}

.about-hero .amb-hero__gradient-text {
	display: inline-block;
	width: fit-content;
	overflow: visible;
	line-height: 1.08;
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
}


/* ==========================================================
   HOW AMB360 WORKS — SECTION ALIGNMENT
========================================================== */

.about-approach .home-products__inner {
	align-items: start;
}


/* ==========================================================
   HOW AMB360 WORKS — STICKY RIGHT
========================================================== */

.about-approach__intro {
	align-self: stretch;
}

.about-approach__intro .home-products__intro-inner {
	position: sticky;
	top: calc(var(--header-height) + 48px);
}


/* ==========================================================
   HOW AMB360 WORKS — MATCH WORK PAGE ROW LAYOUT
========================================================== */

.about-approach .home-product {
	grid-template-columns:
		40px
		minmax(0, 1fr)
		40px;
	column-gap: 28px;
	align-items: start;
}

.about-approach .home-product__content {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.about-approach .home-product__name {
	width: 100%;
	max-width: none;
}

.about-approach .home-product__description {
	width: 100%;
	max-width: 760px;
	line-height: 1.7;
}

.about-approach .home-product__description p {
	width: 100%;
	max-width: 760px;
}

.about-approach .home-product__description p + p {
	margin-top: 18px;
}

.about-approach .home-product__arrow {
	justify-self: end;
	align-self: center;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.about-approach__intro {
		align-self: auto;
	}

	.about-approach__intro .home-products__intro-inner {
		position: static;
	}

	.about-approach .home-product__description,
	.about-approach .home-product__description p {
		max-width: 100%;
	}

}


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

@media (max-width: 620px) {

	.about-hero .amb-hero__gradient-text {
		padding-bottom: 0.14em;
		margin-bottom: -0.14em;
	}

	.about-approach .home-product {
		column-gap: 18px;
	}

	.about-approach .home-product__description p + p {
		margin-top: 15px;
	}

}

/* ==========================================================
   INSIGHTS PAGE
========================================================== */


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

   IMPORTANT:
   The Insights hero uses the exact subscriptions-hero
   markup/classes, so we deliberately do NOT override:
   - hero width
   - hero grid
   - image size
   - image position
   - fade
   - content position
   - responsive hero behaviour

   This keeps it identical to Subscriptions.
========================================================== */


/* ==========================================================
   OUR THINKING — TITLE
   WHITE FIRST LINE / GRADIENT SECOND LINE
========================================================== */

.insights-intro .home-proof__title {
	background: none !important;

	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;

	-webkit-text-fill-color: #fff !important;
	color: #fff !important;

	overflow: visible;
}


/* FIRST LINE — WHITE */

.insights-intro .insights-intro__title-white {
	display: block;

	width: fit-content;
	max-width: 100%;

	background: none !important;

	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;

	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}


/* SECOND LINE — AMB360 GRADIENT */

.insights-intro .insights-intro__title-gradient {
	display: block;

	width: fit-content;
	max-width: 100%;

	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#8A5CFF 64%,
			#23B7FF 100%
		) !important;

	-webkit-background-clip: text !important;
	background-clip: text !important;

	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}


/* ==========================================================
   LATEST INSIGHTS
========================================================== */

.insights-feed {
	position: relative;

	width: 100%;

	overflow: hidden;

	background: #000;
}

.insights-feed__inner {
	width: 100%;

	padding:
		clamp(110px, 9vw, 165px)
		var(--page-padding);
}


/* ==========================================================
   LATEST INSIGHTS — INTRO
========================================================== */

.insights-feed__intro {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: min(100%, 920px);

	margin-left: auto;
	margin-right: auto;

	text-align: center;
}

.insights-feed__eyebrow {
	margin: 0 0 22px;

	color: rgba(255, 255, 255, 0.58);

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.insights-feed__title {
	width: 100%;

	margin: 0;

	color: #fff;

	font-size: clamp(52px, 5vw, 86px);
	font-weight: 700;
	line-height: 0.96;

	letter-spacing: -0.055em;

	overflow: visible;
}

.insights-feed__title-white,
.insights-feed__title-gradient {
	display: block;

	width: fit-content;
	max-width: 100%;

	margin-left: auto;
	margin-right: auto;
}

.insights-feed__title-white {
	color: #fff;
}

.insights-feed__title-gradient {
	padding-bottom: 0.08em;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#8A5CFF 64%,
			#23B7FF 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
	color: transparent;
}

.insights-feed__accent {
	width: 74px;
	height: 2px;

	margin: 32px auto 0;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#8A5CFF 64%,
			#23B7FF 100%
		);
}

.insights-feed__intro-copy {
	width: min(100%, 720px);

	margin:
		30px
		auto
		0;

	color: rgba(255, 255, 255, 0.68);

	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.75;
}


/* ==========================================================
   ARTICLE GRID
========================================================== */

.insights-feed__articles {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	column-gap: clamp(24px, 2.4vw, 40px);
	row-gap: clamp(70px, 7vw, 110px);

	width: 100%;

	margin-top: clamp(72px, 7vw, 110px);
}


/* ==========================================================
   INSIGHT CARD
========================================================== */

.insight-card {
	display: flex;
	flex-direction: column;

	min-width: 0;
}


/* ==========================================================
   CARD META
========================================================== */

.insight-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	padding-bottom: 17px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.16);
}

.insight-card__number {
	color: rgba(255, 255, 255, 0.42);

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.14em;
}

.insight-card__category {
	color: rgba(255, 255, 255, 0.68);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.08em;

	text-align: right;
	text-transform: uppercase;
}


/* ==========================================================
   CARD IMAGE
========================================================== */

.insight-card__image-link {
	display: block;

	width: 100%;

	margin-top: 22px;

	text-decoration: none;
}

.insight-card__image {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: #080808;
}

.insight-card__img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		transform 0.4s ease,
		opacity 0.3s ease;
}

.insight-card__image-link:hover
.insight-card__img,
.insight-card__image-link:focus-visible
.insight-card__img {
	transform: scale(1.025);
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.insight-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding-top: 25px;
}

.insight-card__date {
	margin-bottom: 13px;

	color: rgba(255, 255, 255, 0.42);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.insight-card__title {
	margin: 0;

	color: #fff;

	font-size: clamp(25px, 2vw, 34px);
	font-weight: 700;
	line-height: 1.08;

	letter-spacing: -0.035em;
}

.insight-card__title-link {
	color: inherit;

	text-decoration: none;

	transition:
		opacity 0.25s ease;
}

.insight-card__title-link:hover,
.insight-card__title-link:focus-visible {
	opacity: 0.72;
}

.insight-card__excerpt {
	margin:
		19px
		0
		0;

	color: rgba(255, 255, 255, 0.64);

	font-size: 16px;
	line-height: 1.72;
}

.insight-card__link {
	display: inline-flex;
	align-items: center;

	gap: 14px;

	width: fit-content;

	margin-top: auto;

	padding-top: 28px;

	color: #fff;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;
}

.insight-card__link span:last-child {
	transition:
		transform 0.25s ease;
}

.insight-card__link:hover span:last-child,
.insight-card__link:focus-visible span:last-child {
	transform:
		translateX(5px);
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.insights-feed__empty {
	grid-column: 1 / -1;

	width: min(100%, 760px);

	margin:
		0
		auto;

	padding:
		clamp(60px, 6vw, 90px)
		0;

	border-top:
		1px solid rgba(255, 255, 255, 0.14);

	border-bottom:
		1px solid rgba(255, 255, 255, 0.14);

	text-align: center;
}

.insights-feed__empty p {
	margin: 0;

	color: rgba(255, 255, 255, 0.65);

	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.7;
}


/* ==========================================================
   PAGINATION
========================================================== */

.insights-feed__pagination {
	grid-column: 1 / -1;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;

	padding-top: 10px;
}

.insights-feed__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 44px;
	height: 44px;

	padding:
		0
		15px;

	border:
		1px solid rgba(255, 255, 255, 0.18);

	color: rgba(255, 255, 255, 0.68);

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		border-color 0.25s ease,
		color 0.25s ease,
		background 0.25s ease;
}

.insights-feed__pagination .page-numbers:hover,
.insights-feed__pagination .page-numbers:focus-visible {
	border-color:
		rgba(255, 255, 255, 0.5);

	color: #fff;
}

.insights-feed__pagination
.page-numbers.current {
	border-color: transparent;

	background:
		linear-gradient(
			90deg,
			#FFD400 0%,
			#FF3DBB 32%,
			#8A5CFF 64%,
			#23B7FF 100%
		);

	color: #000;
}


/* ==========================================================
   WHAT WE WRITE ABOUT
========================================================== */

.insights-approach
.home-products__inner {
	align-items: start;
}


/* ==========================================================
   STICKY RIGHT
========================================================== */

.insights-approach__intro {
	align-self: stretch;
}

.insights-approach__intro
.home-products__intro-inner {
	position: -webkit-sticky;
	position: sticky;

	top:
		calc(
			var(--header-height, 90px)
			+ 48px
		);
}


/* ==========================================================
   LEFT ROWS
   MATCH WORK / ABOUT
========================================================== */

.insights-approach
.home-product {
	grid-template-columns:
		40px
		minmax(0, 1fr)
		40px;

	column-gap: 28px;

	align-items: start;
}

.insights-approach
.home-product__content {
	width: 100%;
	max-width: none;

	min-width: 0;
}

.insights-approach
.home-product__name {
	width: 100%;
	max-width: none;
}

.insights-approach
.home-product__description {
	width: 100%;
	max-width: 760px;

	line-height: 1.7;
}

.insights-approach
.home-product__description p {
	width: 100%;
	max-width: 760px;
}

.insights-approach
.home-product__description p + p {
	margin-top: 18px;
}

.insights-approach
.home-product__arrow {
	justify-self: end;
	align-self: center;
}


/* ==========================================================
   FINAL CTA
   CENTRED
========================================================== */

.insights-final
.home-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	text-align: center;
}

.insights-final
.home-final__intro {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: min(100%, 940px);

	margin:
		0
		auto;

	text-align: center;
}

.insights-final
.home-final__eyebrow {
	text-align: center;
}

.insights-final
.home-final__title {
	width: 100%;

	text-align: center;
}

.insights-final
.home-final__title-white,
.insights-final
.home-final__title-gradient {
	display: block;

	width: fit-content;
	max-width: 100%;

	margin-left: auto;
	margin-right: auto;
}

.insights-final
.home-final__content {
	width: min(100%, 720px);

	max-width: 720px;

	margin:
		clamp(30px, 3vw, 42px)
		auto
		0;

	text-align: center;
}

.insights-final
.home-products__cta {
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.insights-feed__articles {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.insights-approach__intro {
		align-self: auto;
	}

	.insights-approach__intro
	.home-products__intro-inner {
		position: static;
	}

	.insights-approach
	.home-product__description,
	.insights-approach
	.home-product__description p {
		max-width: 100%;
	}

}


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

@media (max-width: 680px) {

	.insights-feed__inner {
		padding:
			90px
			var(--page-padding);
	}

	.insights-feed__articles {
		grid-template-columns: 1fr;

		row-gap: 64px;

		margin-top: 64px;
	}

	.insights-feed__title {
		font-size:
			clamp(
				44px,
				13vw,
				62px
			);
	}

	.insight-card__title {
		font-size: 28px;
	}

	.insights-approach
	.home-product {
		column-gap: 18px;
	}

	.insights-approach
	.home-product__description p + p {
		margin-top: 15px;
	}

}

/* ==========================================================
   CONTACT PAGE
========================================================== */


/* ==========================================================
   CONTACT FORM SECTION
========================================================== */

.contact-form-section {
	position: relative;
	width: 100%;
	overflow: visible;
	background: #050505;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-form-section__inner {
	display: grid;
	grid-template-columns:
		minmax(390px, 0.78fr)
		minmax(560px, 1.22fr);
	gap: clamp(76px, 6.5vw, 118px);
	align-items: start;
	width: 100%;
	padding:
		clamp(110px, 9vw, 165px)
		var(--page-padding);
}


/* ==========================================================
   CONTACT INTRO
========================================================== */

.contact-form-section__intro {
	align-self: stretch;
}

.contact-form-section__intro-inner {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--header-height, 90px) + 48px);
	width: 100%;
	max-width: 540px;
}

.contact-form-section__eyebrow {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.contact-form-section__title {
	margin: 0;
	font-size: clamp(50px, 4.7vw, 82px);
	font-weight: 700;
	line-height: 0.97;
	letter-spacing: -0.055em;
	overflow: visible;
}

.contact-form-section__title-white,
.contact-form-section__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
}

.contact-form-section__title-white {
	color: #fff;
}

.contact-form-section__title-gradient {
	padding-bottom: 0.08em;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.contact-form-section__accent {
	width: 74px;
	height: 2px;
	margin-top: 34px;
	background: var(--gradient);
}

.contact-form-section__copy {
	width: 100%;
	max-width: 520px;
	margin-top: 32px;
	color: rgba(255, 255, 255, 0.66);
	font-size: 17px;
	line-height: 1.75;
}

.contact-form-section__copy p {
	margin: 0;
}

.contact-form-section__copy p + p {
	margin-top: 18px;
}


/* ==========================================================
   FORM WRAPPER
========================================================== */

.contact-form-section__form-wrap {
	position: relative;
	width: 100%;
	max-width: 780px;
	margin-left: clamp(22px, 2.1vw, 42px);
	margin-right: auto;
}


/* ==========================================================
   CONTACT FORM
========================================================== */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 34px;
	width: 100%;
}

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

.contact-form__field {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.contact-form__field label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.contact-form__field label span {
	color: rgba(255, 255, 255, 0.35);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ==========================================================
   INPUTS
========================================================== */

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	display: block;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	outline: 0;
	background: rgba(255, 255, 255, 0.025);
	color: #fff;
	font: inherit;
	transition:
		border-color 0.25s ease,
		background 0.25s ease;
}

.contact-form__field input,
.contact-form__field select {
	height: 62px;
	padding: 0 19px;
}

.contact-form__field textarea {
	min-height: 190px;
	padding: 18px 19px;
	resize: vertical;
	line-height: 1.7;
}

.contact-form__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 52px;
	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			rgba(255, 255, 255, 0.65) 50%
		),
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.65) 50%,
			transparent 50%
		);
	background-position:
		calc(100% - 23px) 27px,
		calc(100% - 17px) 27px;
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
}

.contact-form__field select option {
	background: #111;
	color: #fff;
}

.contact-form__field input:hover,
.contact-form__field select:hover,
.contact-form__field textarea:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
	border-color: rgba(255, 255, 255, 0.58);
	background: rgba(255, 255, 255, 0.04);
}


/* ==========================================================
   HONEYPOT
========================================================== */

.contact-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/* ==========================================================
   PRIVACY
========================================================== */

.contact-form__privacy {
	width: 100%;
	max-width: 680px;
	margin-top: -4px;
}

.contact-form__privacy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.42);
	font-size: 12px;
	line-height: 1.7;
}

.contact-form__privacy a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration-color: rgba(255, 255, 255, 0.28);
	text-underline-offset: 4px;
}

.contact-form__privacy a:hover {
	color: #fff;
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.contact-form__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 38px;
	width: fit-content;
	min-width: 290px;
	min-height: 58px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 0;
	background:
		linear-gradient(#050505, #050505) padding-box,
		var(--gradient) border-box;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.25s ease,
		transform 0.25s ease;
}

.contact-form__submit span:last-child {
	font-size: 18px;
	transition: transform 0.25s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background:
		linear-gradient(
			rgba(255, 255, 255, 0.05),
			rgba(255, 255, 255, 0.05)
		) padding-box,
		var(--gradient) border-box;
}

.contact-form__submit:hover span:last-child,
.contact-form__submit:focus-visible span:last-child {
	transform: translateX(5px);
}


/* ==========================================================
   FORM STATUS
========================================================== */

.contact-form-message {
	margin-bottom: 42px;
	padding: 30px 32px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.025);
}

.contact-form-message--success {
	border-image: var(--gradient) 1;
}

.contact-form-message__eyebrow {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.contact-form-message h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.035em;
}

.contact-form-message p:last-child {
	max-width: 620px;
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.7;
}


/* ==========================================================
   WHAT HAPPENS NEXT
========================================================== */

.contact-next .home-proof__title {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
	overflow: visible;
}

.contact-next__title-white {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}

.contact-next__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	padding-bottom: 0.08em;
	background: var(--gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}


/* ==========================================================
   WAYS TO WORK WITH US
========================================================== */

.contact-routes .home-products__inner {
	align-items: start;
}

.contact-routes__intro {
	align-self: stretch;
}

.contact-routes__intro .home-products__intro-inner {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--header-height, 90px) + 48px);
}

.contact-routes .home-product {
	grid-template-columns: 40px minmax(0, 1fr) 40px;
	column-gap: 28px;
	align-items: start;
}

.contact-routes .home-product__content {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.contact-routes .home-product__name {
	width: 100%;
	max-width: none;
}

.contact-routes .home-product__description {
	width: 100%;
	max-width: 760px;
	line-height: 1.7;
}

.contact-routes .home-product__description p {
	width: 100%;
	max-width: 760px;
}

.contact-routes .home-product__arrow {
	justify-self: end;
	align-self: center;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.contact-final .home-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
}

.contact-final .home-final__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 1040px);
	margin: 0 auto;
	text-align: center;
}

.contact-final .home-final__eyebrow {
	text-align: center;
}

.contact-final .home-final__title {
	width: 100%;
	text-align: center;
}

.contact-final .home-final__title-white,
.contact-final .home-final__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.contact-final .home-final__content {
	width: min(100%, 700px);
	max-width: 700px;
	margin:
		clamp(30px, 3vw, 42px)
		auto
		0;
	text-align: center;
}

.contact-final .home-products__cta {
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1180px) {

	.contact-form-section__inner {
		grid-template-columns:
			minmax(340px, 0.82fr)
			minmax(500px, 1.18fr);
		gap: 62px;
	}

	.contact-form-section__form-wrap {
		margin-left: 15px;
	}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.contact-form-section__inner {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.contact-form-section__intro {
		align-self: auto;
	}

	.contact-form-section__intro-inner {
		position: static;
		max-width: 760px;
	}

	.contact-form-section__form-wrap {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.contact-routes__intro {
		align-self: auto;
	}

	.contact-routes__intro .home-products__intro-inner {
		position: static;
	}

	.contact-routes .home-product__description,
	.contact-routes .home-product__description p {
		max-width: 100%;
	}

}


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

@media (max-width: 680px) {

	.contact-form-section__inner {
		padding:
			90px
			var(--page-padding);
	}

	.contact-form-section__title {
		font-size: clamp(44px, 13vw, 62px);
	}

	.contact-form__row {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.contact-form {
		gap: 30px;
	}

	.contact-form__field input,
	.contact-form__field select {
		height: 58px;
	}

	.contact-form__submit {
		width: 100%;
		min-width: 0;
	}

	.contact-routes .home-product {
		column-gap: 18px;
	}

}

/* ==========================================================
   FREE MARKETING DIAGNOSIS PAGE
========================================================== */

.diagnosis-intro .home-proof__title {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
	overflow: visible;
}

.diagnosis-intro__title-white {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: none !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}

.diagnosis-intro__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	padding-bottom: 0.08em;
	background: var(--gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

.diagnosis-assessment {
	position: relative;
	width: 100%;
	background: #050505;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.diagnosis-assessment__inner {
	width: 100%;
	padding:
		clamp(110px, 9vw, 165px)
		var(--page-padding);
}

.diagnosis-assessment__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 980px);
	margin: 0 auto;
	text-align: center;
}

.diagnosis-assessment__eyebrow {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.diagnosis-assessment__title {
	width: 100%;
	margin: 0;
	font-size: clamp(52px, 5vw, 86px);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.055em;
	overflow: visible;
}

.diagnosis-assessment__title-white,
.diagnosis-assessment__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.diagnosis-assessment__title-white {
	color: #fff;
}

.diagnosis-assessment__title-gradient {
	padding-bottom: 0.08em;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.diagnosis-assessment__intro {
	width: min(100%, 760px);
	margin: 30px auto 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.75;
}

.diagnosis-wizard {
	display: grid;
	grid-template-columns:
		minmax(280px, 0.32fr)
		minmax(0, 0.68fr);
	gap: clamp(55px, 6vw, 105px);
	align-items: start;
	width: min(100%, 1480px);
	margin:
		clamp(80px, 8vw, 125px)
		auto
		0;
}

.diagnosis-wizard__side {
	align-self: stretch;
}

.diagnosis-wizard__side-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--header-height, 90px) + 48px);
}

.diagnosis-wizard__side-label {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.42);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.diagnosis-wizard__count {
	color: rgba(255, 255, 255, 0.16);
	font-size: clamp(92px, 10vw, 164px);
	font-weight: 700;
	line-height: 0.78;
	letter-spacing: -0.09em;
}

.diagnosis-wizard__side-title {
	max-width: 460px;
	margin: 34px 0 0;
	color: #fff;
	font-size: clamp(30px, 3vw, 48px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.diagnosis-wizard__side-copy {
	max-width: 470px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-size: 16px;
	line-height: 1.7;
}

.diagnosis-wizard__progress {
	position: relative;
	width: 100%;
	max-width: 470px;
	height: 2px;
	margin-top: 38px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}

.diagnosis-wizard__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--gradient);
	transition: width 0.35s ease;
}

.diagnosis-wizard__progress-copy {
	margin: 13px 0 0;
	color: rgba(255, 255, 255, 0.38);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.diagnosis-wizard__main {
	min-width: 0;
	padding-left: clamp(0px, 1.5vw, 25px);
}

.diagnosis-screen {
	display: none;
	width: 100%;
	min-height: 650px;
}

.diagnosis-screen.is-active {
	display: flex;
	flex-direction: column;
	justify-content: center;
	animation: diagnosis-screen-in 0.3s ease both;
}

@keyframes diagnosis-screen-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.diagnosis-question__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-bottom: 25px;
	color: rgba(255, 255, 255, 0.42);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.diagnosis-question__meta span + span {
	position: relative;
	padding-left: 24px;
}

.diagnosis-question__meta span + span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-50%);
}

.diagnosis-question__title,
.diagnosis-result__title {
	max-width: 980px;
	margin: 0;
	color: #fff;
	font-size: clamp(44px, 4.7vw, 76px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.diagnosis-question__help,
.diagnosis-result__intro {
	max-width: 780px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	line-height: 1.72;
}

.diagnosis-answer-list {
	width: 100%;
	margin-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-answer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42px;
	gap: 30px;
	align-items: center;
	width: 100%;
	padding: 24px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	background: transparent;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition:
		padding-left 0.25s ease,
		border-color 0.25s ease;
}

.diagnosis-answer:hover,
.diagnosis-answer:focus-visible {
	padding-left: 12px;
	border-color: rgba(255, 255, 255, 0.35);
	outline: none;
}

.diagnosis-answer.is-selected {
	border-color: rgba(255, 255, 255, 0.42);
}

.diagnosis-answer__text {
	display: block;
}

.diagnosis-answer__text strong {
	display: block;
	color: #fff;
	font-size: clamp(19px, 1.55vw, 25px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.diagnosis-answer__text > span {
	display: block;
	max-width: 720px;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	line-height: 1.55;
}

.diagnosis-answer__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.48);
	font-size: 11px;
	font-weight: 700;
	transition:
		border-color 0.25s ease,
		color 0.25s ease;
}

.diagnosis-answer.is-selected .diagnosis-answer__marker {
	border-color: transparent;
	background: var(--gradient);
	color: #000;
}

.diagnosis-wizard__actions,
.diagnosis-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 38px;
}

.diagnosis-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 56px;
	padding: 0 20px;
	border-radius: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	transition:
		border-color 0.25s ease,
		background 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease;
}

.diagnosis-button--primary {
	border: 1px solid transparent;
	background:
		linear-gradient(#050505, #050505) padding-box,
		var(--gradient) border-box;
	color: #fff;
}

.diagnosis-button--secondary {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: rgba(255, 255, 255, 0.76);
}

.diagnosis-button--text {
	min-height: 40px;
	padding: 0 5px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.48);
}

.diagnosis-button:hover,
.diagnosis-button:focus-visible {
	color: #fff;
	outline: none;
}

.diagnosis-button--secondary:hover,
.diagnosis-button--secondary:focus-visible {
	border-color: rgba(255, 255, 255, 0.42);
}

.diagnosis-button[disabled] {
	opacity: 0.28;
	cursor: not-allowed;
}

.diagnosis-lead-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	margin-top: 40px;
}

.diagnosis-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.diagnosis-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.diagnosis-field label {
	margin-bottom: 11px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.diagnosis-field input,
.diagnosis-field select,
.diagnosis-field textarea {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	outline: 0;
	background: rgba(255, 255, 255, 0.025);
	color: #fff;
	font: inherit;
	transition:
		border-color 0.25s ease,
		background 0.25s ease;
}

.diagnosis-field input,
.diagnosis-field select {
	height: 60px;
	padding: 0 18px;
}

.diagnosis-field textarea {
	min-height: 130px;
	padding: 16px 18px;
	resize: vertical;
	line-height: 1.65;
}

.diagnosis-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 50px;
	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			rgba(255, 255, 255, 0.65) 50%
		),
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.65) 50%,
			transparent 50%
		);
	background-position:
		calc(100% - 22px) 26px,
		calc(100% - 16px) 26px;
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
}

.diagnosis-field select option {
	background: #111;
	color: #fff;
}

.diagnosis-field input:focus,
.diagnosis-field select:focus,
.diagnosis-field textarea:focus {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.04);
}

.diagnosis-field--honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.diagnosis-lead-form__privacy {
	max-width: 720px;
	margin: 0;
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
	line-height: 1.7;
}

.diagnosis-lead-form__privacy a {
	color: rgba(255, 255, 255, 0.7);
	text-underline-offset: 4px;
}

.diagnosis-status {
	display: none;
	padding: 15px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.5;
}

.diagnosis-status.is-visible {
	display: block;
}

.diagnosis-status.is-success {
	color: #fff;
}

.diagnosis-status.is-error {
	color: #fff;
	border-color: rgba(255, 61, 187, 0.5);
}

.diagnosis-result__title span {
	display: inline;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.diagnosis-result__summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-result__stat {
	min-width: 0;
	padding: 28px 28px 28px 0;
}

.diagnosis-result__stat + .diagnosis-result__stat {
	padding-left: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-result__stat small,
.diagnosis-route__item small {
	display: block;
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.diagnosis-result__stat strong {
	display: block;
	margin-top: 15px;
	color: #fff;
	font-size: clamp(28px, 2.7vw, 46px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
}

.diagnosis-result__section {
	width: 100%;
	margin-top: 70px;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-result__section-heading {
	display: grid;
	grid-template-columns: minmax(120px, 0.25fr) minmax(0, 0.75fr);
	gap: 30px;
	align-items: start;
	margin-bottom: 36px;
}

.diagnosis-result__section-heading p {
	margin: 5px 0 0;
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.diagnosis-result__section-heading h4 {
	max-width: 700px;
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.diagnosis-result__copy {
	max-width: 800px;
	margin-left: auto;
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	line-height: 1.75;
}

.diagnosis-result__copy p {
	margin: 0;
}

.diagnosis-result__copy p + p {
	margin-top: 20px;
}

.diagnosis-scorecard {
	display: flex;
	flex-direction: column;
	gap: 27px;
	width: 100%;
}

.diagnosis-score__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.diagnosis-score__top strong {
	font-size: 15px;
}

.diagnosis-score__track {
	position: relative;
	width: 100%;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}

.diagnosis-score__track span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--gradient);
}

.diagnosis-route {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-route__item {
	padding: 28px 28px 28px 0;
}

.diagnosis-route__item + .diagnosis-route__item {
	padding-left: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-route__item strong {
	display: block;
	margin-top: 14px;
	color: #fff;
	font-size: clamp(27px, 2.5vw, 42px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.diagnosis-result__route-copy {
	max-width: 800px;
	margin: 30px 0 0 auto;
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	line-height: 1.75;
}

.diagnosis-roadmap {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-roadmap__item {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	gap: 28px;
	padding: 28px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.diagnosis-roadmap__number {
	color: rgba(255, 255, 255, 0.32);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.diagnosis-roadmap__item strong {
	display: block;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.diagnosis-roadmap__item p {
	max-width: 760px;
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-size: 15px;
	line-height: 1.7;
}

.diagnosis-final .home-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
}

.diagnosis-final .home-final__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 1100px);
	margin: 0 auto;
	text-align: center;
}

.diagnosis-final .home-final__title {
	width: 100%;
	text-align: center;
}

.diagnosis-final .home-final__title-white,
.diagnosis-final .home-final__title-gradient {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.diagnosis-final .home-final__content {
	width: min(100%, 720px);
	max-width: 720px;
	margin:
		clamp(30px, 3vw, 42px)
		auto
		0;
	text-align: center;
}

.diagnosis-final .home-products__cta {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 980px) {

	.diagnosis-wizard {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.diagnosis-wizard__side {
		align-self: auto;
	}

	.diagnosis-wizard__side-sticky {
		position: static;
	}

	.diagnosis-wizard__count {
		font-size: 86px;
	}

	.diagnosis-wizard__side-title {
		margin-top: 25px;
	}

	.diagnosis-wizard__main {
		padding-left: 0;
	}

	.diagnosis-screen {
		min-height: 0;
	}

	.diagnosis-result__section-heading {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 680px) {

	.diagnosis-assessment__inner {
		padding:
			90px
			var(--page-padding);
	}

	.diagnosis-assessment__title {
		font-size: clamp(44px, 13vw, 62px);
	}

	.diagnosis-wizard {
		margin-top: 64px;
	}

	.diagnosis-question__title,
	.diagnosis-result__title {
		font-size: clamp(38px, 11vw, 58px);
	}

	.diagnosis-answer {
		grid-template-columns: minmax(0, 1fr) 34px;
		gap: 18px;
	}

	.diagnosis-answer__marker {
		width: 32px;
		height: 32px;
	}

	.diagnosis-form-row {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.diagnosis-wizard__actions,
	.diagnosis-result__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.diagnosis-button {
		width: 100%;
	}

	.diagnosis-result__summary,
	.diagnosis-route {
		grid-template-columns: 1fr;
	}

	.diagnosis-result__stat,
	.diagnosis-route__item {
		padding: 24px 0;
	}

	.diagnosis-result__stat + .diagnosis-result__stat,
	.diagnosis-route__item + .diagnosis-route__item {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.diagnosis-roadmap__item {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 18px;
	}
}

/* ==========================================================
   DIAGNOSIS HERO
   FIX GRADIENT DESCENDERS
========================================================== */

.diagnosis-hero .amb-hero__title {
	overflow: visible;
}

.diagnosis-hero .amb-hero__gradient-text {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	overflow: visible;
	line-height: 1.08;
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
}

/* ==========================================================
   SINGLE INSIGHT
   APPEND TO THE BOTTOM OF main.css
   Scoped to .single-insight only.
========================================================== */


/* ==========================================================
   HERO
   The layout, type and artwork positioning come from the
   existing .amb-hero system already in main.css.
========================================================== */

.single-insight .single-insight-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: -8px;
	color: rgba(255, 255, 255, 0.52);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.single-insight .single-insight-hero__image {
	height: auto;
	object-fit: cover;
	object-position: center;
}

.single-insight .single-insight-hero__placeholder {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: calc(var(--page-padding) * -1);
	width: max(900px, 62vw);
	aspect-ratio: 16 / 10;
	transform: translateY(-50%);
	background:
		radial-gradient(
			circle at 34% 44%,
			rgba(255, 61, 187, 0.18),
			transparent 33%
		),
		radial-gradient(
			circle at 72% 58%,
			rgba(35, 183, 255, 0.16),
			transparent 36%
		),
		#080808;
}


/* ==========================================================
   ARTICLE
========================================================== */

.single-insight-content {
	position: relative;
	width: 100%;
	background: #030303;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.single-insight-content__inner {
	display: grid;
	grid-template-columns:
		minmax(300px, 0.72fr)
		minmax(0, 1.28fr);
	gap: clamp(80px, 8vw, 150px);
	align-items: start;
	width: 100%;
	padding:
		clamp(110px, 9vw, 165px)
		var(--page-padding);
}


/* ==========================================================
   STICKY ARTICLE INTRO
========================================================== */

.single-insight-content__aside {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.single-insight-content__aside-inner {
	position: sticky;
	top: calc(var(--header-height) + 48px);
	width: 100%;
	max-width: 480px;
}

.single-insight-content__eyebrow {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

.single-insight-content__aside-title {
	max-width: 450px;
	margin: 0;
	color: #fff;
	font-size: clamp(42px, 3.7vw, 66px);
	font-weight: 700;
	line-height: 1.01;
	letter-spacing: -0.055em;
}

.single-insight-content__aside .home-products__cta {
	margin-top: 42px;
}


/* ==========================================================
   ARTICLE BODY
========================================================== */

.single-insight-content__article {
	width: 100%;
	min-width: 0;
}

.single-insight-content__body {
	width: 100%;
	max-width: 820px;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(17px, 1.22vw, 19px);
	font-weight: 450;
	line-height: 1.78;
	letter-spacing: -0.012em;
}

.single-insight-content__body > *:first-child {
	margin-top: 0;
}

.single-insight-content__body > *:last-child {
	margin-bottom: 0;
}

.single-insight-content__body p {
	margin: 0 0 28px;
}

.single-insight-content__body p + p {
	margin-top: 0;
}

.single-insight-content__body h2 {
	margin:
		clamp(64px, 6vw, 92px)
		0
		24px;
	color: #fff;
	font-size: clamp(36px, 3.8vw, 58px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.05em;
}

.single-insight-content__body h3 {
	margin:
		clamp(48px, 5vw, 70px)
		0
		20px;
	color: #fff;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.04em;
}

.single-insight-content__body h4 {
	margin: 42px 0 18px;
	color: #fff;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
}

.single-insight-content__body strong,
.single-insight-content__body b {
	color: #fff;
	font-weight: 700;
}

.single-insight-content__body a {
	color: #fff;
	text-decoration-line: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition:
		text-decoration-color 0.25s ease,
		color 0.25s ease;
}

.single-insight-content__body a:hover,
.single-insight-content__body a:focus-visible {
	text-decoration-color: #23B7FF;
}

.single-insight-content__body ul,
.single-insight-content__body ol {
	margin: 0 0 32px;
	padding-left: 25px;
}

.single-insight-content__body li {
	margin-bottom: 12px;
	padding-left: 5px;
}

.single-insight-content__body blockquote {
	margin:
		clamp(52px, 5vw, 76px)
		0;
	padding:
		4px
		0
		4px
		clamp(26px, 3vw, 42px);
	border-left: 3px solid #ff3dbb;
	color: #fff;
	font-size: clamp(25px, 2.6vw, 38px);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.035em;
}

.single-insight-content__body blockquote p {
	margin: 0;
}

.single-insight-content__body figure,
.single-insight-content__body .wp-block-image {
	width: 100%;
	margin:
		clamp(48px, 5vw, 72px)
		0;
}

.single-insight-content__body figure img,
.single-insight-content__body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.single-insight-content__body figcaption,
.single-insight-content__body .wp-element-caption {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.46);
	font-size: 13px;
	line-height: 1.55;
}

.single-insight-content__body hr,
.single-insight-content__body .wp-block-separator {
	width: 100%;
	height: 1px;
	margin:
		clamp(60px, 6vw, 88px)
		0;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
}


/* ==========================================================
   RELATED INSIGHTS
   Individual cards inherit the existing .insight-card
   styling already used by the Insights archive.
========================================================== */

.single-insight-related {
	position: relative;
	width: 100%;
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.single-insight-related__inner {
	width: 100%;
	padding:
		clamp(110px, 9vw, 165px)
		var(--page-padding);
}

.single-insight-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 2.4vw, 40px);
	row-gap: clamp(70px, 7vw, 110px);
	width: 100%;
	margin-top: clamp(72px, 7vw, 110px);
}

.single-insight-related__placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(
			circle at 24% 32%,
			rgba(255, 61, 187, 0.16),
			transparent 38%
		),
		radial-gradient(
			circle at 78% 70%,
			rgba(35, 183, 255, 0.14),
			transparent 40%
		),
		#080808;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

	.single-insight-content__inner {
		grid-template-columns: 1fr;
		gap: 64px;
		padding:
			100px
			var(--page-padding);
	}

	.single-insight-content__aside-inner {
		position: static;
		max-width: 720px;
	}

	.single-insight-content__aside-title {
		max-width: 650px;
	}

	.single-insight-content__body {
		max-width: 100%;
	}

	.single-insight-related__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


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

@media (max-width: 680px) {

	.single-insight .single-insight-hero__meta {
		margin-top: -2px;
		font-size: 10px;
		letter-spacing: 0.11em;
	}

	.single-insight-content__inner {
		gap: 50px;
		padding:
			76px
			var(--page-padding)
			86px;
	}

	.single-insight-content__eyebrow {
		margin-bottom: 22px;
	}

	.single-insight-content__aside-title {
		font-size:
			clamp(
				40px,
				12vw,
				56px
			);
	}

	.single-insight-content__aside .home-products__cta {
		margin-top: 34px;
	}

	.single-insight-content__body {
		font-size: 17px;
		line-height: 1.74;
	}

	.single-insight-content__body h2 {
		margin-top: 54px;
	}

	.single-insight-content__body h3 {
		margin-top: 44px;
	}

	.single-insight-content__body blockquote {
		margin: 44px 0;
		padding-left: 22px;
	}

	.single-insight-related__inner {
		padding:
			82px
			var(--page-padding)
			90px;
	}

	.single-insight-related__grid {
		grid-template-columns: 1fr;
		row-gap: 58px;
		margin-top: 58px;
	}

}

/* ==========================================================
   SIGNAL — PREVENT GRADIENT TITLE CLIPPING
========================================================== */

.signal-page .home-products__title {
	overflow: visible;
}

.signal-page .home-products__title-gradient {
	padding-bottom: 0.12em;
	overflow: visible;
}

.signal-page .home-final__title,
.signal-page .home-proof__title {
	overflow: visible;
}

/* ==========================================================
   SIGNAL HERO — FIX DESCENDER CLIPPING
========================================================== */

.signal-page .amb-hero__title {
	overflow: visible;
}

.signal-page .amb-hero__gradient-text {
	display: block;
	width: fit-content;
	max-width: 100%;

	line-height: 1.08;

	padding-bottom: 0.16em;
	margin-bottom: -0.10em;

	overflow: visible;
}

/* ==========================================================
   CIRCLE HERO — FIX DESCENDER CLIPPING
========================================================== */

.circle-page .amb-hero__title {
	overflow: visible;
}

.circle-page .amb-hero__gradient-text {
	display: block;
	width: fit-content;
	max-width: 100%;

	line-height: 1.08;

	padding-bottom: 0.16em;
	margin-bottom: -0.10em;

	overflow: visible;
}

/* =========================================================
   COOKIE CONSENT
========================================================= */

.amb-cookie[hidden],
.amb-cookie-settings[hidden] {
	display: none !important;
}

.amb-cookie {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 99990;

	width: min(680px, calc(100vw - 48px));

	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,.14);

	box-shadow:
		0 30px 90px rgba(0,0,0,.55);

	opacity: 0;
	transform: translateY(20px);

	transition:
		opacity .25s ease,
		transform .25s ease;
}

.amb-cookie--visible {
	opacity: 1;
	transform: translateY(0);
}

.amb-cookie__accent,
.amb-cookie-settings__accent {
	height: 2px;

	background: linear-gradient(
		90deg,
		#FFD400 0%,
		#FF3DBB 32%,
		#8A5CFF 64%,
		#23B7FF 100%
	);
}

.amb-cookie__inner {
	padding: 30px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 36px;
	align-items: end;
}

.amb-cookie__eyebrow,
.amb-cookie-settings__eyebrow {
	margin: 0 0 10px;

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;

	color: rgba(255,255,255,.38);
}

.amb-cookie__title {
	margin: 0 0 13px;

	font-size: 24px;
	line-height: 1.08;
	font-weight: 750;
	letter-spacing: -.035em;

	color: #fff;
}

.amb-cookie__copy,
.amb-cookie__policy {
	margin: 0;

	font-size: 13px;
	line-height: 1.65;

	color: rgba(255,255,255,.58);
}

.amb-cookie__policy {
	margin-top: 10px;
	font-size: 12px;
}

.amb-cookie__policy a {
	color: rgba(255,255,255,.82);
	text-underline-offset: 3px;
}

.amb-cookie__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.amb-cookie__button,
.amb-cookie-settings__save,
.amb-cookie-settings__reject {
	appearance: none;

	min-height: 44px;
	padding: 11px 16px;

	border: 1px solid rgba(255,255,255,.16);
	background: transparent;

	color: #fff;

	font: inherit;
	font-size: 12px;
	font-weight: 750;

	cursor: pointer;
}

.amb-cookie__button--primary,
.amb-cookie-settings__save {
	background: #fff;
	border-color: #fff;
	color: #050505;
}

.amb-cookie__manage {
	appearance: none;
	border: 0;
	background: transparent;

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 7px 0 0;

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

	font: inherit;
	font-size: 11px;
	font-weight: 700;

	cursor: pointer;
}


/* =========================================================
   COOKIE SETTINGS
========================================================= */

.amb-cookie-settings {
	position: fixed;
	inset: 0;
	z-index: 100000;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	background: rgba(0,0,0,.76);
	backdrop-filter: blur(8px);
}

.amb-cookie-settings__panel {
	width: min(620px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;

	background: #090909;
	border: 1px solid rgba(255,255,255,.14);

	box-shadow:
		0 40px 120px rgba(0,0,0,.7);

	outline: none;
}

.amb-cookie-settings__header {
	padding: 28px 30px 20px;

	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
}

.amb-cookie-settings__title {
	margin: 0;

	font-size: clamp(30px,4vw,42px);
	line-height: 1;
	letter-spacing: -.045em;

	color: #fff;
}

.amb-cookie-settings__close {
	appearance: none;
	border: 0;
	background: transparent;

	padding: 0;

	font-size: 32px;
	line-height: 1;

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

	cursor: pointer;
}

.amb-cookie-settings__intro {
	margin: 0;
	padding: 0 30px 28px;

	font-size: 14px;
	line-height: 1.7;

	color: rgba(255,255,255,.58);
}

.amb-cookie-settings__options {
	border-top: 1px solid rgba(255,255,255,.1);
}

.amb-cookie-option {
	padding: 24px 30px;

	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 30px;
	align-items: center;

	border-bottom: 1px solid rgba(255,255,255,.1);
}

.amb-cookie-option__name {
	display: block;

	margin: 0 0 7px;

	font-size: 15px;
	font-weight: 750;

	color: #fff;
}

.amb-cookie-option__description {
	margin: 0;

	max-width: 430px;

	font-size: 12px;
	line-height: 1.65;

	color: rgba(255,255,255,.5);
}

.amb-cookie-option__required {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;

	color: rgba(255,255,255,.38);
}


/* SWITCH */

.amb-cookie-switch {
	position: relative;
	display: block;
	cursor: pointer;
}

.amb-cookie-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amb-cookie-switch__track {
	position: relative;

	display: block;

	width: 48px;
	height: 26px;

	border-radius: 999px;

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

	transition: background .2s ease;
}

.amb-cookie-switch__thumb {
	position: absolute;
	top: 4px;
	left: 4px;

	width: 18px;
	height: 18px;

	border-radius: 50%;

	background: #fff;

	transition: transform .2s ease;
}

.amb-cookie-switch input:checked + .amb-cookie-switch__track {
	background: #23B7FF;
}

.amb-cookie-switch input:checked +
.amb-cookie-switch__track
.amb-cookie-switch__thumb {
	transform: translateX(22px);
}

.amb-cookie-switch input:focus-visible +
.amb-cookie-switch__track {
	outline: 2px solid #fff;
	outline-offset: 4px;
}


/* SETTINGS FOOTER */

.amb-cookie-settings__footer {
	padding: 24px 30px 30px;

	display: flex;
	justify-content: flex-end;
	gap: 10px;
}


/* =========================================================
   FOOTER COOKIE SETTINGS LINK
========================================================= */

.site-footer__cookie-settings {
	appearance: none;

	width: 100%;

	display: grid;
	grid-template-columns: minmax(0,1fr) 24px;
	gap: 18px;
	align-items: center;

	padding: 15px 0;

	border: 0;
	border-bottom: 1px solid rgba(255,255,255,.08);

	background: transparent;

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

	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;

	text-align: left;

	cursor: pointer;

	transition:
		color .2s ease,
		padding-left .2s ease;
}

.site-footer__cookie-settings:hover {
	color: #fff;
	padding-left: 5px;
}


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

@media (max-width: 640px) {

	.amb-cookie {
		left: 12px;
		right: 12px;
		bottom: 12px;

		width: auto;
	}

	.amb-cookie__inner {
		padding: 24px;

		grid-template-columns: 1fr;
		gap: 24px;
	}

	.amb-cookie__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.amb-cookie__manage {
		grid-column: 1 / -1;
	}

	.amb-cookie-settings {
		padding: 12px;
		align-items: flex-end;
	}

	.amb-cookie-settings__panel {
		max-height: calc(100vh - 24px);
	}

	.amb-cookie-settings__header {
		padding: 24px 22px 18px;
	}

	.amb-cookie-settings__intro {
		padding: 0 22px 24px;
	}

	.amb-cookie-option {
		padding: 22px;

		gap: 20px;
	}

	.amb-cookie-settings__footer {
		padding: 22px;

		display: grid;
		grid-template-columns: 1fr;
	}

}

/* =========================================================
   GLOBAL MOBILE HERO TYPOGRAPHY FIX
   Applies to every hero regardless of page/class naming
========================================================= */

@media (max-width: 767px) {

	/* Keep every hero inside the viewport */
	section[class*="hero"],
	div[class*="hero"] {
		max-width: 100vw;
		overflow: hidden;
	}


	/* Prevent grid/flex children creating horizontal overflow */
	section[class*="hero"] *,
	div[class*="hero"] * {
		min-width: 0;
		box-sizing: border-box;
	}


	/* =====================================================
	   MAIN HERO HEADINGS
	===================================================== */

	section[class*="hero"] h1,
	div[class*="hero"] h1 {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		font-size: clamp(46px, 12.5vw, 64px) !important;
		line-height: .98 !important;
		letter-spacing: -.055em !important;

		white-space: normal !important;

		overflow: visible !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}


	/* =====================================================
	   OVERRIDE DESKTOP FONT SIZES / NOWRAP ON TITLE SPANS
	===================================================== */

	section[class*="hero"] h1 span,
	div[class*="hero"] h1 span {
		width: auto !important;
		max-width: 100% !important;

		font-size: inherit !important;
		line-height: inherit !important;
		letter-spacing: inherit !important;

		white-space: normal !important;

		overflow: visible !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}


	/* Preserve deliberate line elements but stop them overflowing */
	section[class*="hero"] h1 > span,
	div[class*="hero"] h1 > span {
		max-width: 100% !important;
	}


	/* =====================================================
	   SUPPORTING HERO COPY
	===================================================== */

	section[class*="hero"] h1 + p,
	div[class*="hero"] h1 + p,
	section[class*="hero"] [class*="copy"],
	div[class*="hero"] [class*="copy"],
	section[class*="hero"] [class*="description"],
	div[class*="hero"] [class*="description"],
	section[class*="hero"] [class*="intro"],
	div[class*="hero"] [class*="intro"] {
		max-width: 100% !important;
	}


	/* =====================================================
	   REMOVE DESKTOP WIDTHS FROM HERO CONTENT WRAPPERS
	===================================================== */

	section[class*="hero"] [class*="inner"],
	div[class*="hero"] [class*="inner"],
	section[class*="hero"] [class*="content"],
	div[class*="hero"] [class*="content"] {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

}


/* =========================================================
   SMALLER MOBILES
========================================================= */

@media (max-width: 430px) {

	section[class*="hero"] h1,
	div[class*="hero"] h1 {
		font-size: clamp(42px, 12vw, 54px) !important;
		line-height: 1 !important;
	}

}