*
{
    margin: 0;
    padding: 0;
}

:root
{
    /* Keep this uppercase because it is used in generated heading labels. */
    --brand-name: "SYNTRAWEB";

    --roundness: 0px;
    --button-roundness: 6px;

    --red: #B9434A;
    --red-hover: #C0464D;
    --black: #090D12;
    --white: #F4F7FA;
    --gray: #141B23;
    --gray-2: #A7B0BC;
    --gray-3: #354252;

    --background: #090D12;
    --surface: #10161D;
    --surface-raised: #171F29;
    --surface-soft: #1C2631;
    --text: #F4F7FA;
    --text-muted: #A7B0BC;
    --border: #2A3644;
    --shadow: rgba(0, 0, 0, 0.38);
}

a
{
    text-decoration: none;
    font-weight: bold;
}

#menu
{
    display: none;
}

html
{
    background-color: var(--background);
    color-scheme: dark;
    overflow-x: clip;
    scroll-behavior: smooth;
}

html, a
{
    color: var(--text);
    font-family: "Lexend", sans-serif;
}

body
{
    background:
        radial-gradient(circle at 10% 0%, rgba(185, 67, 74, 0.09), transparent 28rem),
        var(--background);
    overflow-x: clip;
}

::selection
{
    color: var(--white);
    background-color: var(--red);
}

h1, h2, h3, h4
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p
{
    line-height: 2em;
    margin-top: 1.6em;
    color: var(--text-muted);
}

.cap-paragraph p
{
    width: 80%;
}

.hero p
{
    width: 90%;
}

#home h1
{
    text-align: left;
}

h1
{
    font-size: 2.875em;
    text-align: center;
}

h2
{
    display: inline-block;
    background-color: var(--red);
    font-size: 2.375em;
    border-radius: var(--roundness);
    color: #eee;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: medium;
    margin-bottom: 1.6em;
}

h3
{
    width: 70%;
    max-width: 800px;
}

.hero h3
{
    max-width: 320px;
}

header#home
{
    padding-bottom: 80px;
}

header
{
    position: relative;
    padding-bottom: 0;
    background: linear-gradient(180deg, rgba(185, 67, 74, 0.055), transparent 80%);
}

#portfolio-gradient
{
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(240px, 40vh, 520px);
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(60% 80% at 50% 0%, rgba(var(--glow), 0.7) 0%, rgba(var(--glow), 0.36) 35%, rgba(var(--glow), 0.16) 60%, rgba(var(--glow), 0) 75%);
    filter: blur(10px);
}

header p
{
    text-align: center;
}

.document
{
    max-width: 832px;
    margin: auto;

    line-height: 2em;
}

.document h1:first-child
{
    margin-top: 0;
}

.document h1
{
    text-align: left;
    font-size: 2em;
    max-width: unset;
    margin-top: 3em;
    margin-bottom: 1.2em;
}

.document h2
{
    font-size: 1.5em;
    display: block;
    background-color: unset;
    color: unset;
    border-radius: unset;
    padding: 0;
    margin-bottom: 0;
    margin-top: 1em;
}

.document p
{
    margin-top: 0.5em;
}

.box
{
    width: 100%;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    padding: 50px;
    box-sizing: border-box;
    border-radius: var(--roundness);
    box-shadow: 0 20px 60px var(--shadow);
}

.box .cta
{
    display: flex;
    margin-top: 5em;
}

.box .cta .main-button
{
    margin-right: 30px;
    margin-top: 0;
}

.box .cta .main-button:last-child
{
    margin-right: 0;
}

.column img
{
    width: 90%;
    margin-left: 5%;
}

.container
{
    max-width: 1800px !important;
    margin: auto;
    width: 80%;
}

.row.container
{
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
}

.row.container.wide, .row.container
{
    width: 100%;
}

.row.container.wide
{
    padding-left: 5%;
    padding-right: 5%;
}

.container.wide
{
    width: 90%;
}

nav
{
    width: 100%;
}

nav a
{
    font-weight: normal;
}

header nav ul li img
{
    max-width: 100px;
}

header nav img
{
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.25));
}

#brands ul
{
    display: flex;
    width: 70%;
    list-style: none;
    justify-content: space-between;
    margin-left: auto;
}

#brands img
{
    width: 100px;
    filter: invert(1);
    opacity: 0.72;
}

.hero
{
    background:
        radial-gradient(circle at 85% 10%, rgba(185, 67, 74, 0.14), transparent 24rem),
        var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.hero ul
{
    list-style: none;
    margin-top: 2.5em;
    width: 90%;
}

.hero ul li
{
    margin-top: 3em;
}

.hero p
{
    margin-top: 0.7em;
    color: var(--text-muted);
}

.hero img
{
    width: 90%;
    margin-left: 5%;
}

nav ul
{    
    width: 100%;
    height: 140px;

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

    list-style-type: none;
}

nav ul li
{
    margin-left: 40px;
}

nav ul li:first-child
{
    margin-right: auto;
    margin-left: 0 !important;
}

h1, header p
{
    max-width: 600px;
}

header#display p
{
    max-width: 650px;
    width: 80%;
}

header#home p
{
    max-width: 400px;
    text-align: left;
}

header nav img
{
    margin-left: auto;
    margin-right: 0;
    width: 90%;
}

.main-button
{
    display: inline-block;
    margin-top: 5em;
    padding: 10px 20px;

    color: var(--text);
    border: 2px solid var(--red);
    border-radius: var(--button-roundness);
    box-sizing: border-box;

    transition: all ease-in-out 0.1s;
}

.main-button:hover, .hero .main-button:hover
{
    color: var(--white);
    background-color: var(--red-hover);
    border-color: var(--red-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(185, 67, 74, 0.24);
}

.hero .main-button, footer .main-button
{
    color: var(--white);
    margin-top: 5em;
    border: 2px solid var(--red);
}

.row
{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 120px 0;
}

.row.short
{
    padding-top: 60px;
    padding-bottom: 60px;
}

.row.short-bottom
{
    padding-bottom: 60px;
}

.row.short-top
{
    padding-top: 60px;
}

.row.tall
{
    padding-top: 200px;
    padding-bottom: 200px;
}

.row.tall-bottom
{
    padding-bottom: 200px;
}

.row.no-top
{
    padding-top: 0;
}

#offerings
{
    display: flex;
    width: 100%;
    list-style: none;
    margin-top: 125px;
    justify-content: space-between;
}

#offerings li
{
    display: flex;
    position: relative;
    width: 31%;
    max-width: 440px;

    justify-content: center;

    color: var(--text);

    z-index: 1;
}

#offerings li .wrapper
{
    width: 100%;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--roundness);

    padding-bottom: 120px !important;
    box-sizing: border-box;
}

#offerings li .wrapper, .items ul li
{
    padding: 50px;
}

#offerings li::before
{
    content: '';
    position: absolute;
    top: -25px;

    border-radius: var(--roundness);

    width: 75%;
    height: 200px;

    background: linear-gradient(135deg, var(--red), #732F39);
    z-index: -2;
}

#offerings li p, .items ul li p
{
    width: 100%;
    font-size: 0.9em;
    line-height: 2.5em;
}

.items
{
    display: flex;
    width: 100%;
    
    flex-direction: column;
    padding-top: 100px;
    align-items: center;
    overflow: hidden;
}

.items ul
{
    width: 95%;
    margin-left: 5%;
    list-style: none;
    display: flex;
}

.items ul .wrapper
{
    display: flex;
    align-items: flex-end;
}

.items ul .wrapper
{
    transition: transform 0.3s ease-in-out;
}

.items .buttons
{
    margin-top: 3em;
}

.items .buttons a:last-child
{
    margin-left: 30px;
}

.items .buttons a img
{
    width: 32px;
    filter: invert(1);
}

.items .buttons a.inactive
{
    cursor: default;
    opacity: 0.2;
}

.items ul li
{
    position: relative;
    width: 30%;
    max-width: 400px;
    flex-shrink: 0;
    /*border: 1px solid #111;*/
    border-radius: var(--roundness);
    margin-right: 40px;
    box-sizing: border-box;
    background: rgba(23, 31, 41, 0.86);
    border: 1px solid var(--border);

    /* Blurry shadow effect */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 16px 48px var(--shadow);
    
    backdrop-filter: blur(4px); /* optional if using translucent backgrounds */
    -webkit-backdrop-filter: blur(4px); /* for Safari */
}

.items ul li p:first-child
{
    margin-top: 0;
}

.items ul li .highlight
{
    font-weight: bold;
    padding-top: 3em;
}

.items ul li .details
{
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-top: 5em;
}

.items ul li .details .highlight
{
    padding-top: 0;
}

.items ul li .details a
{
    float: right;
}

ul.questions
{
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    list-style: none;
    margin-top: 100px;

    flex-wrap: wrap;
}

.questions li
{
    width: 45%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;

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

    cursor: pointer;
}

.questions li .wrapper
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.questions p.answer
{
    display: none;
}

.questions li .wrapper p
{
    width: 90%;
    margin-top: 0;
}

.questions img
{
    width: 30px;
    height: 30px;

    transition: transform linear 0.1s;
    filter: invert(1);
    opacity: 0.8;
}

.questions img.open
{
    transform: rotate(180deg);
}

.portfolio #popup
{
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.portfolio #popup img
{
    max-width: 90%;
    z-index: 2001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),   /* soft drop shadow */
        0 10px 40px rgba(0, 0, 0, 0.3);  /* more spread and blur */
    border-radius: var(--roundness);
}

.portfolio #popup .blocker
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--black);
    opacity: 0.88;
}

.portfolio .column img
{
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px var(--shadow);
}

footer
{
    position: relative;
    margin-top: 40px;
    padding-top: 150px;
    padding-bottom: 40px;
}

footer img.logo
{
    width: 200px;
    margin-left: 0;
    filter: brightness(0) invert(1);
}

footer ul
{
    list-style: none;
    margin-right: 100px;
    margin-top: 2em;
    line-height: 2em;
}

footer .main-button
{
    margin-top: 0;
    margin-left: 3em;
}

footer a
{
    font-weight: normal;
}

footer a:hover
{
    text-decoration: underline;
}

footer a.main-button:hover
{
    text-decoration: none;
}

#footer-cta
{
    color: var(--white);
    background:
        linear-gradient(110deg, rgba(185, 67, 74, 0.24), transparent 58%),
        var(--surface-soft);
    border: 1px solid rgba(185, 67, 74, 0.4);
    box-shadow: 0 20px 60px var(--shadow);
    border-radius: var(--roundness);
    text-align: center;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position: absolute;
    width: 90%;
    max-width: 1800px;
    top: -50px;
    left: 5%;
    padding: 45px 0;

    margin: auto;
}

#footer-cta h3
{
    width: auto;
}

.highlight
{
    display: block;
    font-size: 1.12em;
    color: var(--text);
}

.center-padding
{
    padding-left: 2%;
    padding-right: 2%;
    box-sizing: border-box;
}

#home .row
{
    padding-bottom: 100px;
}

.portfolio .wrapper
{
    width: 90%;
    margin-left: 5%;
    margin-top: 3em;
}

.portfolio .wrapper .main-button
{
    margin-top: 1.5em;
}

.row.dark, footer
{
    background-color: var(--surface);
}

.row.dark
{
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.column
{
    width: 50%;
}

.flex
{
    display: flex;
}

.align-center
{
    align-items: center;
}

.align-top
{
    align-items: flex-start;
}

.center
{
    text-align: center;
}

.margin-center
{
    margin-left: auto;
    margin-right: auto;
}

.bold
{
    font-weight: bold;
}

.flex-dir-column
{
    flex-direction: column;
}

.mobile-only
{
    display: none !important;
}

.no-align
{
    align-items: unset !important;
}

.pointer
{
    cursor: pointer;
}

.uppercase
{
    text-transform: uppercase;
}

.pad-top-3
{
    padding-top: 3em;
}

.categories
{
    padding: 8px 20px;
    color: var(--text);
    background-color: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--roundness);
}

.price
{
    color: var(--red-hover);
}

a:hover
{
    color: var(--red-hover);
}

a:focus-visible,
.questions li:focus-visible,
#hamburger:focus-visible
{
    outline: 2px solid var(--red-hover);
    outline-offset: 4px;
}

@media (min-width: 2250px)
{
    #footer-cta
    {
        left: 50%;
        margin-left: -900px;
    }
}

/* mobile design */

@media (max-width: 768px)
{
    header
    {
        padding-bottom: 20px;
    }

    #portfolio-gradient
    {
        background: radial-gradient(80% 80% at 50% 0%, rgba(var(--glow), 0.7) 0%, rgba(var(--glow), 0.36) 35%, rgba(var(--glow), 0.16) 60%, rgba(var(--glow), 0) 75%);
    }

    .container
    {
        width: 90%;
    }

    .box .cta
    {
        justify-content: space-between;
        flex-direction: column;
    }

    .box .cta .main-button
    {
        margin-right: 0;
        margin-bottom: 1em;
    }

    .box .cta .main-button:last-child
    {
        margin-bottom: 0;
    }

    #menu
    {
        position: fixed;
        top: -100vh;
        left: 0;

        width: 100%;
        font-size: 1.3em;

        z-index: 1000;
        transition: top 0.5s cubic-bezier(0.25, 1.25, 0.5, 1);

    }

    #menu .blocker
    {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s ease-in-out;
    }

    #menu.open .blocker
    {
        pointer-events: all;
        opacity: 0.3;
    }

    #menu.open
    {
        top: 0;
    }

    #menu ul
    {
        position: relative;
        width: 100%;
        list-style: none;

        padding: 30px;
        box-sizing: border-box;

        background-color: var(--surface-raised);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 20px 50px var(--shadow);

        z-index: 2;
    }

    #menu a
    {
        color: var(--text);
    }

    #menu li
    {
        margin-top: 1.2em;
    }

    nav
    {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 80px;
    }

    nav ul
    {
        display: none;
    }

    nav a
    {
        font-size: 1.2em;
    }

    nav ul li
    {
        margin-top: 2em;
        margin-left: 0;
    }

    #hamburger
    {
        display: flex;
        width: 30px;
        height: 21px;
        flex-direction: column;
        justify-content: space-between;
    }

    #hamburger .bar
    {
        display: block;
        background-color: var(--text);
        width: 100%;
        height: 3px;
    }

    header#home .logo, header img.logo
    {
        width: 120px;
        margin: 0;
        margin-left: 0;
    }

    .row
    {
        flex-direction: column;
        padding: 40px 0;
    }

    .row .column
    {
        width: 100%;
    }

    .row.short
    {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .row.short-top
    {
        padding-top: 20px;
    }

    .row.tall
    {
        padding-top: 70px;
    }

    .row.tall-bottom, .row.tall
    {
        padding-bottom: 70px;
    }

    .row.container, .row.container.wide
    {
        padding-left: 5%;
        padding-right: 5%;
    }

    .row .column:last-child
    {
        margin-top: 60px;
    }

    .column img
    {
        width: 100%;
        margin-left: 0;
    }

    #brands ul
    {
        width: 100%;
        margin: 0;
        padding-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #brands ul li
    {
        padding-top: 5px;
    }

    #brands img
    {
        width: 80px;
    }

    #home .row
    {
        padding-bottom: 40px;
    }

    .main-button
    {
        width: 100%;
        margin-top: 3em;
        padding: 15px 25px;
    }

    #home img
    {
        width: 100%;
        margin-left: 0;
    }

    #offerings
    {
        margin-top: 60px;
        flex-direction: column;
    }

    #offerings li
    {
        width: 100%;
        max-width: unset;
        margin: auto;
        margin-top: 2em;
        padding: 30px;
        padding-bottom: 60px;
        box-sizing: border-box;
    }

    #offerings li:first-child
    {
        margin-top: 0;
    }

    .items
    {
        width: 100%;
    }

    .items ul li
    {
        width: 80%;
    }

    .items .buttons a img
    {
        width: 24px;
    }

    .items .buttons a:last-child
    {
        margin-left: 20px;
    }

    .hero ul
    {
        width: 100%;
    }

    .hero p
    {
        width: 100%;
    }

    .hero h3
    {
        max-width: unset;
    }

    .portfolio .wrapper
    {
        width: 100%;
        margin-left: 0;
    }

    .questions li
    {
        width: 100%;
    }

    footer
    {
        padding-top: 240px;
        padding-bottom: 120px;
    }

    #footer-cta
    {
        top: -50px;
        flex-direction: column;
    }

    #footer-cta h3
    {
        width: 70%;
    }

    #footer-cta .main-button
    {
        width: 70%;
        margin-top: 3em;
        margin-left: 0;
    }

    #menu
    {
        display: flex;
    }

    h3
    {
        width: 100%;
        text-align: center;
    }

    .center-padding
    {
        padding-left: 0;
        padding-right: 0;
    }

    .no-mobile
    {
        display: none !important;
    }

    .mobile-center
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-only
    {
        display: block !important;
    }

    .mobile-only-flex
    {
        display: flex !important;
    }
}

/* Homepage header redesign
   Source of truth: STYLE-GUIDE.md */

#home
{
    --home-canvas: #F2EFE7;
    --home-ink: #151816;
    --home-cobalt: #2449E8;
    --home-orange: #FF5A36;
    --home-rule: #C9C6BD;
    --home-muted: #62655F;

    min-height: 100vh;
    padding-bottom: 0;
    color: var(--home-ink);
    background: var(--home-canvas);
}

#home .container.wide
{
    width: min(92%, 1680px);
}

#home nav
{
    border-bottom: 1px solid var(--home-rule);
}

#home nav ul
{
    height: 108px;
}

#home nav ul li
{
    margin-left: 34px;
}

#home nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#home nav a
{
    position: relative;
    color: var(--home-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#home nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--home-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#home nav ul li:last-child a:hover
{
    color: var(--home-canvas);
    background-color: var(--home-ink);
}

#home .home-header
{
    min-height: calc(100vh - 109px);
    padding: clamp(70px, 9vh, 130px) 0;
    align-items: center;
    gap: clamp(40px, 7vw, 120px);
    box-sizing: border-box;
}

#home .home-header-copy
{
    width: 52%;
    padding-left: clamp(0px, 2vw, 34px);
    box-sizing: border-box;
}

#home .home-header-copy::before
{
    content: var(--brand-name) " / DIGITAL STUDIO";
    display: block;
    margin-bottom: clamp(30px, 5vh, 60px);
    color: var(--home-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#home h1
{
    max-width: 820px;
    color: var(--home-ink);
    font-size: clamp(4rem, 7.1vw, 8.2rem);
    font-weight: 520;
    line-height: 0.92;
    letter-spacing: -0.065em;
}

#home .home-header-copy p
{
    max-width: 510px;
    margin-top: clamp(28px, 4vh, 48px);
    color: var(--home-muted);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.75;
}

#home .home-header-copy .main-button
{
    min-width: 168px;
    margin-top: clamp(35px, 5vh, 58px);
    padding: 15px 22px;
    color: var(--home-canvas);
    background-color: var(--home-ink);
    border: 1px solid var(--home-ink);
    border-radius: 0;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#home .home-header-copy .main-button:hover
{
    color: var(--home-ink);
    background-color: var(--home-orange);
    border-color: var(--home-orange);
    box-shadow: none;
    transform: none;
}

#home .home-header-visual
{
    width: 48%;
    justify-content: center;
}

#home .home-header-art
{
    position: relative;
    width: min(100%, 660px);
    aspect-ratio: 0.94;
    display: grid;
    place-items: center;
    background: var(--home-cobalt);
    isolation: isolate;
}

#home .home-header-art::before
{
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(242, 239, 231, 0.48);
    z-index: -1;
}

#home .home-header-art img
{
    width: 92%;
    max-width: none;
    margin: 0;
    filter: none;
    mix-blend-mode: normal;
}

#home .art-shape
{
    position: absolute;
    display: block;
    pointer-events: none;
}

#home .art-shape-top
{
    top: -22px;
    right: -22px;
    width: clamp(68px, 8vw, 118px);
    aspect-ratio: 1;
    background: var(--home-orange);
}

#home .art-shape-bottom
{
    bottom: -28px;
    left: -28px;
    width: clamp(82px, 10vw, 148px);
    aspect-ratio: 1.45;
    background: var(--home-ink);
}

/* Homepage trusted partners */

.partners-section
{
    position: relative;
    min-height: 440px;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(540px, 1.5fr);
    gap: clamp(50px, 8vw, 140px);
    padding: clamp(80px, 10vw, 150px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: stretch;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.12) 1px, transparent 1px),
        #2449E8 !important;
    background-size: 48px 48px !important;
    border: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

.partners-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    width: clamp(70px, 8vw, 120px);
    height: 18px;
    background: #FF5A36;
}

.partners-section .partner-heading
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 0;
}

.partners-section .partner-heading span
{
    color: rgba(242, 239, 231, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.partners-section .partner-heading h4
{
    max-width: 520px;
    color: #F2EFE7;
    font-size: clamp(3rem, 5.4vw, 6.3rem);
    font-weight: 520;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

#brands.partners-section .partner-grid
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid rgba(242, 239, 231, 0.48);
    border-left: 1px solid rgba(242, 239, 231, 0.48);
}

#brands.partners-section .partner-grid li
{
    position: relative;
    min-height: 150px;
    display: grid;
    padding: 30px;
    place-items: center;
    border-right: 1px solid rgba(242, 239, 231, 0.48);
    border-bottom: 1px solid rgba(242, 239, 231, 0.48);
    box-sizing: border-box;
    transition: background-color 180ms ease;
}

#brands.partners-section .partner-grid li:hover
{
    background: rgba(242, 239, 231, 0.1);
}

#brands.partners-section .partner-grid li::before
{
    content: attr(data-index);
    position: absolute;
    top: 12px;
    left: 14px;
    color: rgba(242, 239, 231, 0.56);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

#brands.partners-section .partner-grid img
{
    width: min(150px, 82%);
    margin: 0;
    filter: invert(1);
    opacity: 0.88;
    transition: opacity 180ms ease, transform 180ms ease;
}

#brands.partners-section .partner-grid li:hover img
{
    opacity: 1;
    transform: scale(1.04);
}

/* Homepage expertise */

.expertise-section
{
    position: relative;
    min-height: 900px;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.1fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 210px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: center;
    color: #151816;
    background: #F2EFE7;
    box-sizing: border-box;
}

.expertise-section::before
{
    content: "";
    position: absolute;
    top: 0;
    right: max(5%, calc((100% - 1680px) / 2));
    width: 42%;
    height: 1px;
    background: #C9C6BD;
}

.expertise-section .expertise-visual,
.expertise-section .expertise-copy
{
    width: 100%;
}

.expertise-image-frame
{
    position: relative;
    min-height: 680px;
    display: grid;
    place-items: center;
    background: #151816;
    overflow-x: clip;
    overflow-y: visible;
}

.expertise-image-frame::before
{
    content: "";
    position: absolute;
    top: -24px;
    right: -24px;
    width: clamp(78px, 8vw, 120px);
    aspect-ratio: 1;
    background: #FF5A36;
    z-index: 0;
}

.expertise-image-frame::after
{
    content: "";
    position: absolute;
    right: -34px;
    bottom: 52px;
    width: 68px;
    height: 42%;
    background: #2449E8;
    z-index: 0;
}

.expertise-image-frame img
{
    position: relative;
    width: 96%;
    height: auto;
    margin: 0;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    z-index: 1;
}

.expertise-index
{
    position: absolute;
    top: 24px;
    left: 26px;
    color: #F2EFE7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    z-index: 2;
}

.expertise-caption
{
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 26px;
    color: rgba(242, 239, 231, 0.68);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    z-index: 2;
}

.expertise-copy
{
    max-width: 720px;
}

.expertise-copy h2
{
    margin-bottom: clamp(30px, 4vw, 52px);
    padding: 0;
    color: #2449E8;
    background: transparent;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.expertise-copy h2::before
{
    content: "";
    display: inline-block;
    width: 34px;
    height: 2px;
    margin-right: 14px;
    vertical-align: middle;
    background: #FF5A36;
}

.expertise-copy h3
{
    width: 100%;
    max-width: 720px;
    color: #151816;
    font-size: clamp(3rem, 5vw, 6rem);
    font-weight: 520;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.expertise-copy p
{
    width: 100%;
    max-width: 640px;
    margin-top: 1.5rem;
    color: #62655F;
    font-size: 1rem;
    line-height: 1.8;
}

.expertise-copy h3 + p
{
    margin-top: clamp(36px, 5vw, 58px);
}

.expertise-list
{
    width: 100%;
    max-width: 640px;
    margin-top: clamp(38px, 5vw, 62px);
    list-style: none;
    border-top: 1px solid #C9C6BD;
}

.expertise-list li
{
    display: grid;
    grid-template-columns: 54px 1fr;
    padding: 16px 0;
    align-items: center;
    color: #151816;
    border-bottom: 1px solid #C9C6BD;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.expertise-list li span
{
    color: #FF5A36;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
}

.expertise-copy .main-button
{
    min-width: 176px;
    margin-top: clamp(38px, 5vw, 58px);
    padding: 15px 22px;
    color: #F2EFE7;
    background: #151816;
    border: 1px solid #151816;
    border-radius: 0;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.expertise-copy .main-button:hover
{
    color: #151816;
    background: #FF5A36;
    border-color: #FF5A36;
    box-shadow: none;
    transform: none;
}

/* Homepage core values */

.core-values-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.5fr);
    gap: clamp(60px, 9vw, 150px);
    padding: clamp(110px, 13vw, 210px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        #151816;
    background-size: 52px 52px;
    border: 0;
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;
}

.core-values-section::before
{
    content: "";
    position: absolute;
    top: 0;
    right: 5%;
    width: clamp(80px, 10vw, 160px);
    height: 18px;
    background: #2449E8;
}

.core-values-section::after
{
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: clamp(150px, 18vw, 300px);
    aspect-ratio: 1;
    border: clamp(24px, 3vw, 50px) solid #FF5A36;
    border-radius: 50%;
    opacity: 0.92;
    clip-path: inset(0 60px 0 0);
    pointer-events: none;
    z-index: 2;
}

.core-values-heading
{
    position: sticky;
    top: 40px;
    z-index: 1;
}

.core-values-heading .section-marker
{
    display: block;
    margin-bottom: clamp(32px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.core-values-heading h2
{
    margin: 0 0 32px;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.4rem, 6vw, 7rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.core-values-heading h3
{
    width: 100%;
    max-width: 520px;
    color: #F2EFE7;
    font-size: clamp(1.45rem, 2.2vw, 2.4rem);
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.core-values-heading p
{
    max-width: 440px;
    margin-top: 32px;
    color: rgba(242, 239, 231, 0.58);
    font-size: 0.92rem;
    line-height: 1.75;
}

.core-values-list
{
    position: relative;
    width: 100%;
    margin: 0;
    list-style: none;
    border-top: 1px solid rgba(242, 239, 231, 0.34);
    z-index: 1;
}

.core-values-list > li
{
    width: 100%;
    max-width: none;
    color: #F2EFE7;
    border-bottom: 1px solid rgba(242, 239, 231, 0.34);
}

.core-values-list > li .wrapper
{
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(180px, 0.65fr) minmax(360px, 1.35fr);
    gap: clamp(22px, 4vw, 60px);
    padding: clamp(42px, 6vw, 78px) 0;
    align-items: start;
    background: transparent;
    border: 0;
    box-sizing: border-box;
}

.core-values-list .value-number
{
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.core-values-list .highlight
{
    color: #F2EFE7;
    font-size: clamp(1.55rem, 2.5vw, 2.7rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.core-values-list .value-copy
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
}

.core-values-list .value-copy p
{
    width: 100%;
    margin: 0;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.86rem;
    line-height: 1.85;
}

/* Homepage process */

.process-section
{
    position: relative;
    min-height: 920px;
    display: grid;
    grid-template-columns: minmax(460px, 1fr) minmax(380px, 0.82fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 210px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: center;
    color: #151816;
    background: #F2EFE7;
    box-sizing: border-box;
    z-index: 0;
}

.process-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: 36%;
    height: 1px;
    background: #C9C6BD;
}

.process-section .process-copy,
.process-section .process-visual
{
    width: 100%;
}

.process-copy .section-marker
{
    display: block;
    margin-bottom: clamp(30px, 5vw, 58px);
    color: #2449E8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.process-copy h2
{
    margin: 0 0 30px;
    padding: 0;
    color: #151816;
    background: transparent;
    font-size: clamp(3.5rem, 6vw, 7rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.process-copy h3
{
    width: 100%;
    max-width: 600px;
    color: #62655F;
    font-size: clamp(1.5rem, 2.4vw, 2.7rem);
    font-weight: 450;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.process-steps
{
    width: 100%;
    max-width: 720px;
    margin-top: clamp(52px, 7vw, 86px);
    list-style: none;
    border-top: 1px solid #C9C6BD;
}

.process-steps li
{
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(150px, 0.55fr) minmax(260px, 1fr);
    gap: clamp(16px, 3vw, 42px);
    padding: 26px 0;
    align-items: start;
    border-bottom: 1px solid #C9C6BD;
}

.process-steps .process-number
{
    color: #FF5A36;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.process-steps .highlight
{
    color: #151816;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.process-steps p
{
    width: 100%;
    margin: 0;
    color: #62655F;
    font-size: 0.86rem;
    line-height: 1.75;
}

.process-copy .main-button
{
    min-width: 170px;
    margin-top: clamp(38px, 5vw, 58px);
    padding: 15px 22px;
    color: #F2EFE7;
    background: #151816;
    border: 1px solid #151816;
    border-radius: 0;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.process-copy .main-button:hover
{
    color: #151816;
    background: #FF5A36;
    border-color: #FF5A36;
    box-shadow: none;
    transform: none;
}

.process-image-frame
{
    position: relative;
    min-height: 710px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(242, 239, 231, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.16) 1px, transparent 1px),
        #2449E8;
    background-size: 46px 46px;
    isolation: isolate;
}

.process-image-frame::before
{
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(242, 239, 231, 0.52);
    z-index: -1;
}

.process-image-frame img
{
    width: 94%;
    max-width: none;
    margin: 3% 0 0;
    filter: none;
}

.process-image-label
{
    position: absolute;
    top: 24px;
    left: 28px;
    padding: 9px 12px;
    color: #151816;
    background: #F2EFE7;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

.process-image-shape
{
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: clamp(90px, 10vw, 150px);
    aspect-ratio: 1;
    background: #FF5A36;
    z-index: -2;
}

/* Homepage testimonials */

.testimonials-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(650px, 1.55fr);
    gap: clamp(60px, 8vw, 140px);
    padding: clamp(110px, 13vw, 200px) 0 clamp(120px, 14vw, 220px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #F2EFE7;
    background: #2449E8;
    box-sizing: border-box;
    overflow: hidden;
}

.testimonials-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #FF5A36;
}

.testimonials-section::after
{
    content: "“";
    position: absolute;
    right: 2%;
    bottom: -18%;
    color: rgba(242, 239, 231, 0.08);
    font-family: Georgia, serif;
    font-size: clamp(24rem, 45vw, 50rem);
    line-height: 1;
    pointer-events: none;
}

.testimonials-heading
{
    position: relative;
    padding-right: 20px;
    z-index: 1;
}

.testimonials-heading .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #F2EFE7;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.testimonials-heading h2
{
    margin: 0 0 32px;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.2rem, 5.7vw, 6.6rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.testimonials-heading h3
{
    width: 100%;
    max-width: 520px;
    color: #F2EFE7;
    font-size: clamp(1.5rem, 2.3vw, 2.6rem);
    font-weight: 450;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.testimonials-heading p
{
    max-width: 430px;
    margin-top: 30px;
    color: rgba(242, 239, 231, 0.66);
    font-size: 0.9rem;
    line-height: 1.75;
}

.testimonials-section .testimonials-slider
{
    position: relative;
    width: 100%;
    padding-top: 0;
    align-items: flex-start;
    overflow: hidden;
    z-index: 1;
}

.testimonials-section .testimonials-slider ul
{
    width: 100%;
    margin-left: 0;
}

.testimonials-section .testimonials-slider ul .wrapper
{
    align-items: stretch;
}

.testimonials-section .testimonials-slider ul li
{
    width: min(42vw, 520px);
    max-width: 520px;
    min-height: 480px;
    display: flex;
    padding: clamp(38px, 4vw, 62px);
    flex-direction: column;
    margin-right: 26px;
    color: #151816;
    background: #F2EFE7;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.testimonials-section .testimonial-number
{
    display: block;
    margin-bottom: clamp(60px, 8vw, 105px);
    color: #FF5A36;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.testimonials-section .testimonials-slider li p
{
    width: 100%;
    margin: 0;
    color: #3F433E;
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.85;
}

.testimonials-section .testimonials-slider li p + p
{
    margin-top: 1.4rem;
}

.testimonials-section .testimonials-slider li .highlight
{
    margin-top: auto;
    padding-top: 52px;
    color: #151816;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.testimonials-section .testimonials-slider li .highlight::before
{
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    margin-right: 12px;
    vertical-align: middle;
    background: #2449E8;
}

.testimonials-section .testimonials-slider .buttons
{
    display: flex;
    margin-top: 34px;
    align-self: flex-start;
}

.testimonials-section .testimonials-slider .buttons a
{
    display: grid;
    width: 52px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(242, 239, 231, 0.58);
    transition: background-color 180ms ease, opacity 180ms ease;
}

.testimonials-section .testimonials-slider .buttons a:hover
{
    background: rgba(242, 239, 231, 0.12);
}

.testimonials-section .testimonials-slider .buttons a:last-child
{
    margin-left: 10px;
}

.testimonials-section .testimonials-slider .buttons a img
{
    width: 21px;
    filter: invert(1);
}

.testimonials-section .testimonials-slider .buttons a.inactive
{
    opacity: 0.28;
}

#home a:focus-visible,
#home #hamburger:focus-visible
{
    outline-color: var(--home-cobalt);
}

@media (max-width: 1050px)
{
    #home .home-header
    {
        gap: 50px;
    }

    #home h1
    {
        font-size: clamp(3.7rem, 7.5vw, 6rem);
    }
}

@media (max-width: 768px)
{
    #home
    {
        min-height: auto;
        padding-bottom: 0;
    }

    #home nav
    {
        height: 82px;
    }

    #home #hamburger .bar
    {
        background-color: var(--home-ink);
    }

    #home .home-header
    {
        min-height: auto;
        padding: 64px 0 100px;
        gap: 0;
    }

    #home .home-header-copy,
    #home .home-header-visual
    {
        width: 100%;
    }

    #home .home-header-copy
    {
        padding-left: 0;
    }

    #home .home-header-copy::before
    {
        margin-bottom: 34px;
    }

    #home h1
    {
        font-size: clamp(3.5rem, 17vw, 5.1rem);
    }

    #home .home-header-copy p
    {
        max-width: 92%;
    }

    #home .home-header-copy .main-button
    {
        width: auto;
    }

    #home .home-header-visual
    {
        margin-top: 86px !important;
    }

    #home .home-header-art
    {
        width: calc(100% - 20px);
        aspect-ratio: 0.96;
    }

    #home .home-header-art img
    {
        width: 94%;
        margin-left: 0;
    }

    #home .art-shape-top
    {
        top: -14px;
        right: -14px;
    }

    #home .art-shape-bottom
    {
        bottom: -18px;
        left: -10px;
    }

    .partners-section
    {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 80px 5% 90px !important;
    }

    .partners-section .partner-heading
    {
        min-height: 180px;
    }

    .partners-section .partner-heading h4
    {
        max-width: 330px;
    }

    #brands.partners-section .partner-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 0;
    }

    #brands.partners-section .partner-grid li
    {
        min-height: 120px;
        padding: 24px 16px;
    }

    #brands.partners-section .partner-grid img
    {
        width: min(105px, 82%);
    }

    .expertise-section
    {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 80px;
        padding: 100px 5% 110px !important;
    }

    .expertise-section::before
    {
        right: 5%;
        width: 60%;
    }

    .expertise-image-frame
    {
        min-height: 520px;
        width: calc(100% - 18px);
    }

    .expertise-image-frame::before
    {
        top: -14px;
        right: -14px;
    }

    .expertise-image-frame::after
    {
        right: -18px;
        width: 36px;
    }

    .expertise-copy
    {
        margin-top: 0 !important;
    }

    .expertise-copy h3
    {
        text-align: left;
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .expertise-copy .main-button
    {
        width: auto;
    }

    .core-values-section
    {
        grid-template-columns: 1fr;
        gap: 75px;
        padding: 100px 5% 130px !important;
    }

    .core-values-heading
    {
        position: static;
    }

    .core-values-heading h3
    {
        text-align: left;
    }

    .core-values-heading p
    {
        max-width: 92%;
    }

    .core-values-list > li .wrapper
    {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 18px 10px;
        padding: 44px 0;
    }

    .core-values-list .value-copy
    {
        grid-column: 2;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .core-values-section::after
    {
        right: -70px;
        bottom: -70px;
        clip-path: inset(0 70px 0 0);
    }

    .process-section
    {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 80px;
        padding: 100px 5% 120px !important;
    }

    .process-copy h3
    {
        text-align: left;
    }

    .process-steps li
    {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px 8px;
        padding: 24px 0;
    }

    .process-steps p
    {
        grid-column: 2;
    }

    .process-copy .main-button
    {
        width: auto;
    }

    .process-visual
    {
        order: -1;
        margin-top: 0 !important;
    }

    .process-image-frame
    {
        width: calc(100% - 12px);
        min-height: 520px;
    }

    .process-image-frame::before
    {
        inset: 16px;
    }

    .process-image-frame img
    {
        width: 96%;
    }

    .process-image-shape
    {
        right: -12px;
        bottom: -16px;
    }

    .testimonials-section
    {
        grid-template-columns: 1fr;
        gap: 70px;
        padding: 100px 0 120px 5% !important;
    }

    .testimonials-heading
    {
        padding-right: 5%;
    }

    .testimonials-heading h3
    {
        text-align: left;
    }

    .testimonials-heading p
    {
        max-width: 92%;
    }

    .testimonials-section .testimonials-slider ul li
    {
        width: 84vw;
        max-width: 420px;
        min-height: 500px;
        padding: 34px 28px;
        margin-right: 18px;
    }

    .testimonials-section .testimonial-number
    {
        margin-bottom: 65px;
    }
}

/* Portfolio header redesign
   Source of truth: STYLE-GUIDE.md */

#portfolio-header
{
    --portfolio-canvas: #F2EFE7;
    --portfolio-ink: #151816;
    --portfolio-cobalt: #2449E8;
    --portfolio-orange: #FF5A36;
    --portfolio-rule: #C9C6BD;
    --portfolio-muted: #62655F;

    position: relative;
    min-height: 92vh;
    padding-bottom: 0;
    color: var(--portfolio-ink);
    background: var(--portfolio-canvas);
    overflow: hidden;
}

#portfolio-header::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    background: var(--portfolio-orange);
}

#portfolio-header .container.wide
{
    width: min(92%, 1680px);
}

#portfolio-header nav
{
    border-bottom: 1px solid var(--portfolio-rule);
}

#portfolio-header nav ul
{
    height: 108px;
}

#portfolio-header nav ul li
{
    margin-left: 34px;
}

#portfolio-header nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#portfolio-header nav a
{
    position: relative;
    color: var(--portfolio-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#portfolio-header nav ul li:nth-child(3) a::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 2px;
    background: var(--portfolio-cobalt);
}

#portfolio-header nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--portfolio-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#portfolio-header nav ul li:last-child a:hover
{
    color: var(--portfolio-canvas);
    background: var(--portfolio-ink);
}

#portfolio-header .portfolio-header-layout
{
    min-height: calc(92vh - 109px);
    padding: clamp(70px, 8vh, 120px) 0 clamp(90px, 11vh, 150px);
    align-items: center;
    gap: clamp(50px, 8vw, 140px);
    box-sizing: border-box;
}

#portfolio-header .portfolio-header-copy
{
    width: 40%;
    align-self: center;
}

#portfolio-header .portfolio-header-copy::before
{
    content: "SELECTED WORK / 01—03";
    display: block;
    margin-bottom: clamp(30px, 5vh, 58px);
    color: var(--portfolio-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#portfolio-header h1
{
    max-width: none;
    color: var(--portfolio-ink);
    font-size: clamp(4.8rem, 8vw, 9rem);
    font-weight: 520;
    line-height: 0.88;
    letter-spacing: -0.07em;
    text-align: left;
}

#portfolio-header .portfolio-header-copy p
{
    max-width: 500px;
    margin-top: clamp(32px, 5vh, 56px);
    color: var(--portfolio-muted);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.75;
    text-align: left;
}

#portfolio-header .portfolio-header-visual
{
    width: 60%;
}

#portfolio-header .portfolio-collage
{
    position: relative;
    width: min(100%, 810px);
    aspect-ratio: 1.18;
    margin-left: auto;
    background:
        linear-gradient(rgba(242, 239, 231, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.2) 1px, transparent 1px),
        var(--portfolio-cobalt);
    background-size: 42px 42px;
}

#portfolio-header .portfolio-collage::before
{
    content: "";
    position: absolute;
    top: -24px;
    right: 52px;
    width: clamp(65px, 7vw, 108px);
    aspect-ratio: 1;
    background: var(--portfolio-orange);
}

#portfolio-header .portfolio-collage::after
{
    content: "";
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 42%;
    height: 22%;
    background: var(--portfolio-ink);
    z-index: 0;
}

#portfolio-header .portfolio-preview
{
    position: absolute;
    display: block;
    padding: 8px;
    background: var(--portfolio-canvas);
    border: 1px solid rgba(21, 24, 22, 0.22);
    box-shadow: 0 22px 50px rgba(21, 24, 22, 0.18);
    box-sizing: border-box;
    transition: transform 220ms ease, box-shadow 220ms ease;
    z-index: 1;
}

#portfolio-header .portfolio-preview:hover
{
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(21, 24, 22, 0.24);
}

#portfolio-header .portfolio-preview img
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

#portfolio-header .portfolio-preview span
{
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--portfolio-canvas);
    background: var(--portfolio-ink);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

#portfolio-header .portfolio-preview-one
{
    top: 10%;
    left: 7%;
    width: 62%;
    height: 50%;
    transform: rotate(-2.5deg);
}

#portfolio-header .portfolio-preview-one:hover
{
    transform: rotate(-2.5deg) translateY(-8px);
}

#portfolio-header .portfolio-preview-two
{
    top: 25%;
    right: 5%;
    width: 48%;
    height: 39%;
    transform: rotate(3deg);
    z-index: 3;
}

#portfolio-header .portfolio-preview-two:hover
{
    transform: rotate(3deg) translateY(-8px);
}

#portfolio-header .portfolio-preview-three
{
    bottom: 7%;
    left: 24%;
    width: 55%;
    height: 44%;
    transform: rotate(-0.8deg);
    z-index: 2;
}

#portfolio-header .portfolio-preview-three:hover
{
    transform: rotate(-0.8deg) translateY(-8px);
}

#portfolio-header a:focus-visible,
#portfolio-header #hamburger:focus-visible
{
    outline-color: var(--portfolio-cobalt);
}

@media (max-width: 1050px)
{
    #portfolio-header .portfolio-header-layout
    {
        gap: 50px;
    }

    #portfolio-header h1
    {
        font-size: clamp(4.4rem, 8.5vw, 7rem);
    }
}

@media (max-width: 768px)
{
    #portfolio-header
    {
        min-height: auto;
    }

    #portfolio-header nav
    {
        height: 82px;
    }

    #portfolio-header #hamburger .bar
    {
        background-color: var(--portfolio-ink);
    }

    #portfolio-header .portfolio-header-layout
    {
        min-height: auto;
        padding: 64px 0 110px;
        gap: 0;
    }

    #portfolio-header .portfolio-header-copy,
    #portfolio-header .portfolio-header-visual
    {
        width: 100%;
    }

    #portfolio-header .portfolio-header-copy::before
    {
        margin-bottom: 34px;
    }

    #portfolio-header h1
    {
        font-size: clamp(4.2rem, 21vw, 6.2rem);
    }

    #portfolio-header .portfolio-header-copy p
    {
        max-width: 94%;
    }

    #portfolio-header .portfolio-header-visual
    {
        margin-top: 80px !important;
    }

    #portfolio-header .portfolio-collage
    {
        width: calc(100% - 12px);
        aspect-ratio: 0.95;
        margin-right: auto;
    }

    #portfolio-header .portfolio-collage::before
    {
        top: -14px;
        right: 20px;
    }

    #portfolio-header .portfolio-collage::after
    {
        right: -12px;
        bottom: -18px;
    }

    #portfolio-header .portfolio-preview
    {
        padding: 5px;
    }

    #portfolio-header .portfolio-preview-one
    {
        top: 7%;
        left: 5%;
        width: 64%;
        height: 36%;
    }

    #portfolio-header .portfolio-preview-two
    {
        top: 30%;
        right: 4%;
        width: 48%;
        height: 29%;
    }

    #portfolio-header .portfolio-preview-three
    {
        bottom: 14%;
        left: 6%;
        width: 54%;
        height: 31%;
    }

}

/* Services, FAQ, and Contact headers
   Source of truth: STYLE-GUIDE.md */

#services-header,
#faq-header,
#contact-header
{
    --page-canvas: #F2EFE7;
    --page-ink: #151816;
    --page-cobalt: #2449E8;
    --page-orange: #FF5A36;
    --page-rule: #C9C6BD;
    --page-muted: #62655F;

    position: relative;
    min-height: 88vh;
    padding-bottom: 0;
    color: var(--page-ink);
    background: var(--page-canvas);
    overflow: hidden;
}

#services-header::after,
#faq-header::after,
#contact-header::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
}

#services-header::after
{
    background: var(--page-cobalt);
}

#faq-header::after
{
    background: var(--page-orange);
}

#contact-header::after
{
    background: var(--page-ink);
}

#services-header .container.wide,
#faq-header .container.wide,
#contact-header .container.wide
{
    width: min(92%, 1680px);
}

#services-header nav,
#faq-header nav,
#contact-header nav
{
    border-bottom: 1px solid var(--page-rule);
}

#services-header nav ul,
#faq-header nav ul,
#contact-header nav ul
{
    height: 108px;
}

#services-header nav ul li,
#faq-header nav ul li,
#contact-header nav ul li
{
    margin-left: 34px;
}

#services-header nav ul li img,
#faq-header nav ul li img,
#contact-header nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#services-header nav a,
#faq-header nav a,
#contact-header nav a
{
    position: relative;
    color: var(--page-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#services-header nav ul li:nth-child(4) a::after,
#faq-header nav ul li:nth-child(5) a::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 2px;
    background: var(--page-cobalt);
}

#services-header nav ul li:last-child a,
#faq-header nav ul li:last-child a,
#contact-header nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--page-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#services-header nav ul li:last-child a:hover,
#faq-header nav ul li:last-child a:hover
{
    color: var(--page-canvas);
    background: var(--page-ink);
}

#contact-header nav ul li:last-child a
{
    color: var(--page-canvas);
    background: var(--page-ink);
}

#contact-header nav ul li:last-child a:hover
{
    color: var(--page-ink);
    background: var(--page-orange);
    border-color: var(--page-orange);
}

#services-header .services-header-layout,
#faq-header .faq-header-layout,
#contact-header .contact-header-layout
{
    min-height: calc(88vh - 109px);
    padding: clamp(70px, 8vh, 120px) 0 clamp(90px, 11vh, 145px);
    align-items: center;
    gap: clamp(50px, 8vw, 140px);
    box-sizing: border-box;
}

#services-header .services-header-copy,
#faq-header .faq-header-copy,
#contact-header .contact-header-copy
{
    width: 42%;
}

#services-header .services-header-copy::before,
#faq-header .faq-header-copy::before,
#contact-header .contact-header-copy::before
{
    display: block;
    margin-bottom: clamp(30px, 5vh, 58px);
    color: var(--page-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#services-header .services-header-copy::before
{
    content: "WHAT WE BUILD / 01—06";
}

#faq-header .faq-header-copy::before
{
    content: "USEFUL ANSWERS / COMMON QUESTIONS";
}

#contact-header .contact-header-copy::before
{
    content: "NEW BUSINESS / SAY HELLO";
}

#services-header h1,
#faq-header h1,
#contact-header h1
{
    max-width: none;
    color: var(--page-ink);
    font-size: clamp(4.8rem, 8vw, 9rem);
    font-weight: 520;
    line-height: 0.88;
    letter-spacing: -0.07em;
    text-align: left;
}

#services-header .services-header-copy p,
#faq-header .faq-header-copy p,
#contact-header .contact-header-copy p
{
    max-width: 510px;
    margin-top: clamp(32px, 5vh, 56px);
    color: var(--page-muted);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.75;
    text-align: left;
}

#services-header .services-header-visual,
#faq-header .faq-header-visual,
#contact-header .contact-header-visual
{
    width: 58%;
}

/* Services illustration */

#services-header .services-illustration
{
    position: relative;
    width: min(100%, 780px);
    min-height: 590px;
    display: grid;
    margin-left: auto;
    padding: clamp(34px, 4vw, 58px);
    place-items: center;
    background:
        linear-gradient(rgba(242, 239, 231, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.18) 1px, transparent 1px),
        var(--page-cobalt);
    background-size: 44px 44px;
    box-sizing: border-box;
    isolation: isolate;
}

#services-header .services-illustration::before
{
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(242, 239, 231, 0.5);
    z-index: -1;
}

#services-header .services-illustration img
{
    width: 104%;
    max-width: none;
    margin: 2% -2% 0 0;
}

#services-header .services-illustration-label
{
    position: absolute;
    top: 24px;
    left: 28px;
    padding: 9px 12px;
    color: var(--page-ink);
    background: var(--page-canvas);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    z-index: 2;
}

#services-header .services-illustration-shape
{
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: clamp(88px, 10vw, 145px);
    aspect-ratio: 1;
    background: var(--page-orange);
    z-index: -2;
}

/* FAQ card stack */

#faq-header .faq-stack
{
    position: relative;
    width: min(100%, 750px);
    min-height: 570px;
    margin-left: auto;
    background: var(--page-orange);
}

#faq-header .faq-stack::before
{
    content: "?";
    position: absolute;
    right: 5%;
    bottom: -10%;
    color: rgba(21, 24, 22, 0.12);
    font-size: clamp(16rem, 26vw, 28rem);
    font-weight: 700;
    line-height: 1;
}

#faq-header .faq-card
{
    position: absolute;
    left: 8%;
    display: flex;
    width: 78%;
    min-height: 76px;
    padding: 20px 24px;
    align-items: center;
    justify-content: space-between;
    color: var(--page-ink);
    background: var(--page-canvas);
    border: 1px solid var(--page-ink);
    box-shadow: 10px 10px 0 rgba(21, 24, 22, 0.17);
    box-sizing: border-box;
    font-size: clamp(0.82rem, 1vw, 0.96rem);
    line-height: 1.45;
}

#faq-header .faq-card b
{
    margin-left: 24px;
    color: var(--page-cobalt);
    font-size: 1.5rem;
    font-weight: 400;
}

#faq-header .faq-card-one
{
    top: 11%;
    transform: rotate(-1.2deg);
}

#faq-header .faq-card-two
{
    top: 31%;
    left: 14%;
    transform: rotate(1deg);
}

#faq-header .faq-card-three
{
    top: 51%;
    left: 9%;
    transform: rotate(-0.6deg);
}

#faq-header .faq-card-four
{
    top: 71%;
    left: 15%;
    transform: rotate(1.4deg);
}

/* Contact signal panel */

#contact-header .contact-signal
{
    position: relative;
    width: min(100%, 760px);
    min-height: 540px;
    display: flex;
    margin-left: auto;
    padding: clamp(36px, 5vw, 72px);
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(rgba(242, 239, 231, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.14) 1px, transparent 1px),
        var(--page-cobalt);
    background-size: 46px 46px;
    box-sizing: border-box;
}

#contact-header .contact-signal::before
{
    content: "";
    position: absolute;
    top: -22px;
    right: -22px;
    width: clamp(76px, 8vw, 118px);
    aspect-ratio: 1;
    background: var(--page-orange);
}

#contact-header .contact-signal::after
{
    content: "";
    position: absolute;
    top: 12%;
    left: -26px;
    width: 52px;
    height: 46%;
    background: var(--page-ink);
}

#contact-header .contact-signal-label
{
    margin-bottom: 26px;
    color: rgba(242, 239, 231, 0.78);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#contact-header .contact-signal a
{
    max-width: 650px;
    color: var(--page-canvas);
    font-size: clamp(1.6rem, 3.1vw, 3.6rem);
    font-weight: 500;
    line-height: 1.05;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

#contact-header .contact-signal a:hover
{
    color: var(--page-orange);
}

#contact-header .contact-signal-arrow
{
    position: absolute;
    top: 38px;
    left: 42px;
    color: var(--page-canvas);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 200;
    line-height: 1;
}

#services-header a:focus-visible,
#services-header #hamburger:focus-visible,
#faq-header a:focus-visible,
#faq-header #hamburger:focus-visible,
#contact-header a:focus-visible,
#contact-header #hamburger:focus-visible
{
    outline-color: var(--page-cobalt);
}

@media (max-width: 1050px)
{
    #services-header .services-header-layout,
    #faq-header .faq-header-layout,
    #contact-header .contact-header-layout
    {
        gap: 50px;
    }

    #services-header h1,
    #faq-header h1,
    #contact-header h1
    {
        font-size: clamp(4.4rem, 8.5vw, 7rem);
    }

}

@media (max-width: 768px)
{
    #services-header,
    #faq-header,
    #contact-header
    {
        min-height: auto;
    }

    #services-header nav,
    #faq-header nav,
    #contact-header nav
    {
        height: 82px;
    }

    #services-header #hamburger .bar,
    #faq-header #hamburger .bar,
    #contact-header #hamburger .bar
    {
        background-color: var(--page-ink);
    }

    #services-header .services-header-layout,
    #faq-header .faq-header-layout,
    #contact-header .contact-header-layout
    {
        min-height: auto;
        padding: 64px 0 110px;
        gap: 0;
    }

    #services-header .services-header-copy,
    #services-header .services-header-visual,
    #faq-header .faq-header-copy,
    #faq-header .faq-header-visual,
    #contact-header .contact-header-copy,
    #contact-header .contact-header-visual
    {
        width: 100%;
    }

    #services-header .services-header-copy::before,
    #faq-header .faq-header-copy::before,
    #contact-header .contact-header-copy::before
    {
        margin-bottom: 34px;
    }

    #services-header h1,
    #faq-header h1,
    #contact-header h1
    {
        font-size: clamp(4.1rem, 21vw, 6rem);
    }

    #services-header .services-header-copy p,
    #faq-header .faq-header-copy p,
    #contact-header .contact-header-copy p
    {
        max-width: 94%;
    }

    #services-header .services-header-visual,
    #faq-header .faq-header-visual,
    #contact-header .contact-header-visual
    {
        margin-top: 80px !important;
    }

    #services-header .services-illustration
    {
        width: calc(100% - 8px);
        min-height: 470px;
        margin-right: auto;
        padding: 28px 18px;
    }

    #services-header .services-illustration::before
    {
        inset: 16px;
    }

    #services-header .services-illustration img
    {
        width: 112%;
        margin-right: -5%;
    }

    #services-header .services-illustration-label
    {
        top: 16px;
        left: 18px;
        max-width: 210px;
        line-height: 1.45;
    }

    #services-header .services-illustration-shape
    {
        right: -10px;
        bottom: -16px;
    }

    #faq-header .faq-stack
    {
        width: calc(100% - 8px);
        min-height: 500px;
        margin-right: auto;
    }

    #faq-header .faq-card
    {
        width: 84%;
        min-height: 72px;
        padding: 16px 18px;
        font-size: 0.76rem;
    }

    #contact-header .contact-signal
    {
        width: calc(100% - 12px);
        min-height: 460px;
        margin-right: auto;
        padding: 32px 26px;
    }

    #contact-header .contact-signal::before
    {
        top: -14px;
        right: -12px;
    }

    #contact-header .contact-signal::after
    {
        left: -10px;
        width: 20px;
    }

    #contact-header .contact-signal-arrow
    {
        top: 30px;
        left: 26px;
    }

    #contact-header .contact-signal a
    {
        font-size: clamp(1.35rem, 7vw, 2.15rem);
    }
}

/* About page
   Source of truth: STYLE-GUIDE.md */

#about-header
{
    --about-canvas: #F2EFE7;
    --about-ink: #151816;
    --about-cobalt: #2449E8;
    --about-orange: #FF5A36;
    --about-rule: #C9C6BD;
    --about-muted: #62655F;

    position: relative;
    min-height: 88vh;
    padding-bottom: 0;
    color: var(--about-ink);
    background: var(--about-canvas);
    overflow: hidden;
}

#about-header::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    background: var(--about-orange);
}

#about-header .container.wide
{
    width: min(92%, 1680px);
}

#about-header nav
{
    border-bottom: 1px solid var(--about-rule);
}

#about-header nav ul
{
    height: 108px;
}

#about-header nav ul li
{
    margin-left: 34px;
}

#about-header nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#about-header nav a
{
    position: relative;
    color: var(--about-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#about-header nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--about-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#about-header nav ul li:last-child a:hover
{
    color: var(--about-canvas);
    background: var(--about-ink);
}

#about-header .about-header-layout
{
    min-height: calc(88vh - 109px);
    padding: clamp(70px, 8vh, 120px) 0 clamp(90px, 11vh, 145px);
    align-items: center;
    gap: clamp(50px, 8vw, 140px);
    box-sizing: border-box;
}

#about-header .about-header-copy
{
    width: 42%;
}

#about-header .about-header-copy::before
{
    content: "ABOUT " var(--brand-name) " / HOW WE WORK";
    display: block;
    margin-bottom: clamp(30px, 5vh, 58px);
    color: var(--about-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#about-header h1
{
    max-width: none;
    color: var(--about-ink);
    font-size: clamp(4.8rem, 8vw, 9rem);
    font-weight: 520;
    line-height: 0.88;
    letter-spacing: -0.07em;
    text-align: left;
}

#about-header .about-header-copy p
{
    max-width: 510px;
    margin-top: clamp(32px, 5vh, 56px);
    color: var(--about-muted);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.75;
    text-align: left;
}

#about-header .about-header-visual
{
    width: 58%;
}

#about-header .about-map
{
    position: relative;
    width: min(100%, 760px);
    min-height: 560px;
    margin-left: auto;
    background:
        linear-gradient(rgba(242, 239, 231, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.16) 1px, transparent 1px),
        var(--about-cobalt);
    background-size: 46px 46px;
    isolation: isolate;
}

#about-header .about-map::before
{
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(242, 239, 231, 0.52);
    z-index: -1;
}

#about-header .about-map::after
{
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: clamp(90px, 10vw, 145px);
    aspect-ratio: 1;
    background: var(--about-orange);
    z-index: -2;
}

#about-header .about-map-label
{
    position: absolute;
    top: 24px;
    left: 28px;
    padding: 9px 12px;
    color: var(--about-ink);
    background: var(--about-canvas);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    z-index: 3;
}

#about-header .about-map-node
{
    position: absolute;
    display: grid;
    width: clamp(102px, 11vw, 150px);
    aspect-ratio: 1;
    place-items: center;
    color: var(--about-ink);
    background: var(--about-canvas);
    border: 1px solid var(--about-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

#about-header .about-map-node-one
{
    top: 24%;
    left: 12%;
}

#about-header .about-map-node-two
{
    top: 15%;
    right: 15%;
}

#about-header .about-map-node-three
{
    right: 9%;
    bottom: 17%;
    background: var(--about-ink);
    color: var(--about-canvas);
}

#about-header .about-map-node-four
{
    bottom: 12%;
    left: 20%;
}

#about-header .about-map-line
{
    position: absolute;
    height: 2px;
    background: rgba(242, 239, 231, 0.72);
    transform-origin: left center;
    z-index: 1;
}

#about-header .about-map-line-one
{
    top: 34%;
    left: 30%;
    width: 38%;
    transform: rotate(-15deg);
}

#about-header .about-map-line-two
{
    top: 47%;
    left: 68%;
    width: 26%;
    transform: rotate(84deg);
}

#about-header .about-map-line-three
{
    bottom: 27%;
    left: 34%;
    width: 41%;
    transform: rotate(-7deg);
}

#about-header .about-map-shape
{
    position: absolute;
    top: 45%;
    left: -26px;
    width: 52px;
    height: 32%;
    background: var(--about-ink);
}

.about-notes-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.38fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 200px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        #151816;
    background-size: 52px 52px;
    box-sizing: border-box;
    overflow: hidden;
}

.about-notes-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #2449E8;
}

.about-notes-section::after
{
    content: "04";
    position: absolute;
    right: -3%;
    bottom: -14%;
    color: rgba(242, 239, 231, 0.045);
    font-size: clamp(22rem, 38vw, 44rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.about-notes-heading
{
    position: sticky;
    top: 40px;
    z-index: 1;
}

.about-notes-heading .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-notes-heading h2
{
    margin: 0 0 34px;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.3rem, 5.8vw, 6.8rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.about-notes-heading p
{
    max-width: 460px;
    margin-top: 26px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.92rem;
    line-height: 1.82;
}

.about-notes-list
{
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    border-top: 1px solid rgba(242, 239, 231, 0.3);
    list-style: none;
    z-index: 1;
}

.about-notes-list li
{
    display: grid;
    grid-template-columns: 58px minmax(190px, 0.58fr) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 56px);
    padding: clamp(36px, 5vw, 70px) 0;
    align-items: start;
    border-bottom: 1px solid rgba(242, 239, 231, 0.3);
}

.about-notes-list li > span
{
    color: #FF5A36;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.about-notes-list h3
{
    width: 100%;
    max-width: none;
    color: #F2EFE7;
    font-size: clamp(1.45rem, 2.15vw, 2.3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.about-notes-list p
{
    grid-column: 3;
    margin: 0;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.82;
}

.about-notes-list p + p
{
    margin-top: 22px;
}

@media (max-width: 1050px)
{
    #about-header .about-header-layout
    {
        gap: 50px;
    }

    #about-header h1
    {
        font-size: clamp(4.4rem, 8.5vw, 7rem);
    }

    .about-notes-list li
    {
        grid-template-columns: 48px minmax(160px, 0.5fr) minmax(0, 1fr);
    }
}

@media (max-width: 768px)
{
    #about-header
    {
        min-height: auto;
    }

    #about-header nav
    {
        height: 82px;
    }

    #about-header #hamburger .bar
    {
        background-color: var(--about-ink);
    }

    #about-header .about-header-layout
    {
        min-height: auto;
        padding: 64px 0 110px;
        gap: 0;
    }

    #about-header .about-header-copy,
    #about-header .about-header-visual
    {
        width: 100%;
    }

    #about-header .about-header-copy::before
    {
        margin-bottom: 34px;
    }

    #about-header h1
    {
        font-size: clamp(4.1rem, 21vw, 6rem);
    }

    #about-header .about-header-copy p
    {
        max-width: 94%;
    }

    #about-header .about-header-visual
    {
        margin-top: 80px !important;
    }

    #about-header .about-map
    {
        width: calc(100% - 12px);
        min-height: 500px;
        margin-right: auto;
    }

    #about-header .about-map::before
    {
        inset: 16px;
    }

    #about-header .about-map::after
    {
        right: -12px;
        bottom: -16px;
    }

    #about-header .about-map-label
    {
        top: 16px;
        left: 18px;
        max-width: 210px;
        line-height: 1.45;
    }

    #about-header .about-map-node
    {
        width: 104px;
        font-size: 0.62rem;
    }

    #about-header .about-map-node-one
    {
        left: 8%;
    }

    #about-header .about-map-node-two
    {
        right: 7%;
    }

    #about-header .about-map-node-three
    {
        right: 7%;
    }

    #about-header .about-map-node-four
    {
        left: 12%;
    }

    #about-header .about-map-shape
    {
        left: -10px;
        width: 20px;
    }

    .about-notes-section
    {
        grid-template-columns: 1fr;
        gap: 72px;
        padding: 100px 5% 120px !important;
    }

    .about-notes-heading
    {
        position: static;
    }

    .about-notes-heading p
    {
        max-width: 92%;
    }

    .about-notes-list li
    {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .about-notes-list h3
    {
        grid-column: 2;
    }

    .about-notes-list p
    {
        grid-column: 2;
    }
}

/* Legal header
   Source of truth: STYLE-GUIDE.md */

#legal-header
{
    --legal-canvas: #F2EFE7;
    --legal-ink: #151816;
    --legal-cobalt: #2449E8;
    --legal-orange: #FF5A36;
    --legal-rule: #C9C6BD;
    --legal-muted: #62655F;

    position: relative;
    min-height: 82vh;
    padding-bottom: 0;
    color: var(--legal-ink);
    background: var(--legal-canvas);
    overflow: hidden;
}

#legal-header::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    background: var(--legal-ink);
}

#legal-header .container.wide
{
    width: min(92%, 1680px);
}

#legal-header nav
{
    border-bottom: 1px solid var(--legal-rule);
}

#legal-header nav ul
{
    height: 108px;
}

#legal-header nav ul li
{
    margin-left: 34px;
}

#legal-header nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#legal-header nav a
{
    position: relative;
    color: var(--legal-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#legal-header nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--legal-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#legal-header nav ul li:last-child a:hover
{
    color: var(--legal-canvas);
    background: var(--legal-ink);
}

#legal-header .legal-header-layout
{
    min-height: calc(82vh - 109px);
    padding: clamp(70px, 8vh, 115px) 0 clamp(90px, 11vh, 140px);
    align-items: center;
    gap: clamp(50px, 8vw, 140px);
    box-sizing: border-box;
}

#legal-header .legal-header-copy
{
    width: 42%;
}

#legal-header .legal-header-copy::before
{
    content: "LEGAL REFERENCE / PRIVACY + COOKIES";
    display: block;
    margin-bottom: clamp(30px, 5vh, 58px);
    color: var(--legal-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#legal-header h1
{
    max-width: none;
    color: var(--legal-ink);
    font-size: clamp(4.8rem, 8vw, 9rem);
    font-weight: 520;
    line-height: 0.88;
    letter-spacing: -0.07em;
    text-align: left;
}

#legal-header .legal-header-copy p
{
    max-width: 510px;
    margin-top: clamp(32px, 5vh, 56px);
    color: var(--legal-muted);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.75;
    text-align: left;
}

#legal-header .legal-header-visual
{
    width: 58%;
}

#legal-header .legal-dossier
{
    position: relative;
    width: min(100%, 760px);
    min-height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    margin-left: auto;
    padding: clamp(34px, 4vw, 58px);
    color: var(--legal-canvas);
    background:
        linear-gradient(rgba(242, 239, 231, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.055) 1px, transparent 1px),
        var(--legal-ink);
    background-size: 46px 46px;
    box-sizing: border-box;
    isolation: isolate;
}

#legal-header .legal-dossier::before
{
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(242, 239, 231, 0.24);
    z-index: -1;
}

#legal-header .legal-dossier::after
{
    content: "";
    position: absolute;
    top: -22px;
    right: -22px;
    width: clamp(82px, 9vw, 128px);
    aspect-ratio: 1;
    background: var(--legal-cobalt);
    z-index: -2;
}

#legal-header .legal-dossier-label
{
    position: absolute;
    top: 24px;
    left: 28px;
    padding: 9px 12px;
    color: var(--legal-ink);
    background: var(--legal-orange);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    z-index: 3;
}

#legal-header .legal-dossier-card
{
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 22px;
    width: min(100%, 600px);
    min-height: 94px;
    padding: 22px 24px;
    align-items: center;
    color: var(--legal-canvas);
    background: rgba(242, 239, 231, 0.055);
    border: 1px solid rgba(242, 239, 231, 0.3);
    box-sizing: border-box;
    z-index: 2;
}

#legal-header .legal-dossier-card-two
{
    margin-left: auto;
}

#legal-header .legal-dossier-card-three
{
    margin-left: 8%;
}

#legal-header .legal-dossier-card span
{
    grid-row: span 2;
    color: var(--legal-orange);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

#legal-header .legal-dossier-card strong
{
    font-size: clamp(1.08rem, 1.5vw, 1.35rem);
    font-weight: 520;
    line-height: 1.15;
}

#legal-header .legal-dossier-card small
{
    color: rgba(242, 239, 231, 0.58);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

#legal-header .legal-dossier-mark
{
    position: absolute;
    top: 5%;
    right: 7%;
    color: rgba(242, 239, 231, 0.08);
    font-size: clamp(11rem, 18vw, 20rem);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

#legal-header .legal-dossier-shape
{
    position: absolute;
    bottom: -24px;
    left: -24px;
    width: clamp(70px, 8vw, 112px);
    height: clamp(130px, 15vw, 210px);
    background: var(--legal-orange);
    z-index: -2;
}

@media (max-width: 1050px)
{
    #legal-header .legal-header-layout
    {
        gap: 50px;
    }

    #legal-header h1
    {
        font-size: clamp(4.4rem, 8.5vw, 7rem);
    }
}

@media (max-width: 768px)
{
    #legal-header
    {
        min-height: auto;
    }

    #legal-header nav
    {
        height: 82px;
    }

    #legal-header #hamburger .bar
    {
        background-color: var(--legal-ink);
    }

    #legal-header .legal-header-layout
    {
        min-height: auto;
        padding: 64px 0 110px;
        gap: 0;
    }

    #legal-header .legal-header-copy,
    #legal-header .legal-header-visual
    {
        width: 100%;
    }

    #legal-header .legal-header-copy::before
    {
        margin-bottom: 34px;
    }

    #legal-header h1
    {
        font-size: clamp(4.1rem, 21vw, 6rem);
    }

    #legal-header .legal-header-copy p
    {
        max-width: 94%;
    }

    #legal-header .legal-header-visual
    {
        margin-top: 80px !important;
    }

    #legal-header .legal-dossier
    {
        width: calc(100% - 12px);
        min-height: 520px;
        margin-right: auto;
        padding: 76px 18px 28px;
    }

    #legal-header .legal-dossier::before
    {
        inset: 16px;
    }

    #legal-header .legal-dossier::after
    {
        top: -14px;
        right: -12px;
    }

    #legal-header .legal-dossier-label
    {
        top: 16px;
        left: 18px;
        max-width: 220px;
        line-height: 1.45;
    }

    #legal-header .legal-dossier-card
    {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px 14px;
        min-height: 88px;
        padding: 18px;
    }

    #legal-header .legal-dossier-card-three
    {
        margin-left: 0;
    }

    #legal-header .legal-dossier-shape
    {
        bottom: -16px;
        left: -10px;
        width: 20px;
    }
}

/* Legal document section
   Source of truth: STYLE-GUIDE.md */

.legal-document-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(290px, 0.55fr) minmax(640px, 1.45fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(100px, 12vw, 185px) max(5%, calc((100% - 1680px) / 2)) clamp(120px, 14vw, 220px) !important;
    align-items: start;
    color: #151816;
    background:
        linear-gradient(rgba(36, 73, 232, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 73, 232, 0.055) 1px, transparent 1px),
        #E8EBF4;
    background-size: 58px 58px;
    box-sizing: border-box;
}

.legal-document-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #FF5A36;
}

.legal-document-index
{
    position: sticky;
    top: 40px;
    min-height: 470px;
    padding: clamp(34px, 4vw, 54px);
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.05) 1px, transparent 1px),
        #151816;
    background-size: 42px 42px;
    box-sizing: border-box;
}

.legal-document-index::after
{
    content: "§";
    position: absolute;
    right: 24px;
    bottom: 8px;
    color: rgba(242, 239, 231, 0.065);
    font-size: clamp(8rem, 12vw, 14rem);
    line-height: 1;
    pointer-events: none;
}

.legal-document-index .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.legal-document-index h2
{
    margin: 0;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(2.4rem, 4vw, 4.7rem);
    font-weight: 520;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-transform: none;
}

.legal-document-index p
{
    max-width: 320px;
    margin-top: 26px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.75;
}

.legal-document-index nav
{
    position: relative;
    width: 100%;
    display: block;
    margin-top: clamp(48px, 7vw, 82px);
    border-top: 1px solid rgba(242, 239, 231, 0.28);
    z-index: 1;
}

.legal-document-index nav a
{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    align-items: center;
    color: #F2EFE7;
    border-bottom: 1px solid rgba(242, 239, 231, 0.28);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.legal-document-index nav a span
{
    color: #FF5A36;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.legal-document-index nav a:hover
{
    color: #FF5A36;
}

.legal-document
{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(44px, 6vw, 90px);
    color: #151816;
    background: #F2EFE7;
    border: 1px solid rgba(36, 73, 232, 0.2);
    box-sizing: border-box;
    line-height: 1.85;
}

.legal-document h1
{
    max-width: none;
    margin: clamp(74px, 8vw, 120px) 0 34px;
    padding: 0 0 26px;
    color: #151816;
    border-bottom: 2px solid #2449E8;
    font-size: clamp(2.7rem, 4.6vw, 5.6rem);
    font-weight: 520;
    line-height: 0.95;
    letter-spacing: -0.06em;
    text-align: left;
}

.legal-document h1:first-child
{
    margin-top: 0;
}

.legal-document h2
{
    display: block;
    margin: clamp(36px, 5vw, 64px) 0 0;
    padding: 0;
    color: #151816;
    background: transparent;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-weight: 560;
    line-height: 1.25;
    letter-spacing: -0.035em;
    text-transform: none;
}

.legal-document h1,
.legal-document h2
{
    scroll-margin-top: 40px;
}

.legal-document p
{
    max-width: 830px;
    margin-top: 14px;
    color: #555B68;
    font-size: 0.95rem;
    line-height: 1.9;
}

.legal-document ul
{
    max-width: 830px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.legal-document li
{
    position: relative;
    margin-top: 12px;
    padding-left: 28px;
    color: #555B68;
    font-size: 0.95rem;
    line-height: 1.75;
}

.legal-document li::before
{
    content: "";
    position: absolute;
    top: 0.8em;
    left: 0;
    width: 10px;
    height: 2px;
    background: #FF5A36;
}

.legal-document a
{
    color: #2449E8;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.legal-document strong
{
    color: #151816;
}

@media (max-width: 900px)
{
    .legal-document-section
    {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 100px 5% 120px !important;
    }

    .legal-document-index
    {
        position: relative;
        top: auto;
        min-height: auto;
    }

    .legal-document
    {
        padding: 38px 24px 54px;
    }

    .legal-document h1
    {
        font-size: clamp(2.6rem, 12vw, 4.6rem);
    }
}

/* Shared site footer
   Source of truth: STYLE-GUIDE.md */

.site-footer
{
    position: relative;
    margin-top: 0;
    padding: 0 0 42px;
    color: #F2EFE7;
    background: #151816;
    border-top: 0;
}

.site-footer #footer-cta
{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(50px, 8vw, 140px);
    margin: 0;
    padding: clamp(70px, 9vw, 145px) max(5%, calc((100% - 1680px) / 2));
    align-items: end;
    color: #151816;
    background:
        linear-gradient(rgba(21, 24, 22, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 24, 22, 0.09) 1px, transparent 1px),
        #FF5A36;
    background-size: 48px 48px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
}

.site-footer #footer-cta::before
{
    content: "";
    position: absolute;
    top: 0;
    right: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #2449E8;
}

.site-footer .footer-cta-copy
{
    position: relative;
    z-index: 1;
}

.site-footer .footer-cta-copy > span
{
    display: block;
    margin-bottom: clamp(30px, 5vw, 58px);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer #footer-cta h3
{
    width: 100%;
    max-width: 1050px;
    color: #151816;
    font-size: clamp(3.3rem, 7vw, 8rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.065em;
    text-align: left;
}

.site-footer #footer-cta .main-button
{
    position: relative;
    min-width: 180px;
    margin: 0 0 8px;
    padding: 16px 24px;
    color: #F2EFE7;
    background: #151816;
    border: 1px solid #151816;
    border-radius: 0;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
}

.site-footer #footer-cta .main-button:hover
{
    color: #151816;
    background: #F2EFE7;
    border-color: #F2EFE7;
    box-shadow: none;
    transform: none;
}

.site-footer .footer-cta-arrow
{
    position: absolute;
    top: 12%;
    right: 5%;
    color: rgba(21, 24, 22, 0.12);
    font-size: clamp(10rem, 20vw, 23rem);
    font-weight: 200;
    line-height: 1;
    pointer-events: none;
}

.site-footer .footer-main
{
    width: min(90%, 1680px);
    max-width: 1680px !important;
    display: grid;
    grid-template-columns: minmax(320px, 1.4fr) minmax(320px, 0.8fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(90px, 10vw, 155px) 0 0;
}

.site-footer .footer-brand
{
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-footer .footer-logo-link
{
    display: inline-block;
    width: min(100%, 470px);
}

.site-footer img.logo
{
    display: block;
    width: 100%;
    max-width: 470px;
    margin: 0;
    filter: brightness(0) invert(1);
}

.site-footer ul
{
    margin: 0;
    list-style: none;
    line-height: 1;
}

.site-footer .footer-contact
{
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
}

.site-footer a
{
    color: rgba(242, 239, 231, 0.7);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.site-footer a:hover
{
    color: #FF5A36;
    text-decoration: none;
}

.site-footer .footer-links
{
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 50px;
}

.site-footer .footer-label
{
    display: block;
    margin-bottom: 34px;
    color: #F2EFE7;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer .footer-links li
{
    margin-top: 17px;
}

.site-footer .footer-links li:first-child
{
    margin-top: 0;
}

.site-footer .footer-bottom
{
    grid-column: 1 / -1;
    display: flex;
    margin-top: clamp(50px, 7vw, 100px);
    padding-top: 24px;
    align-items: center;
    justify-content: space-between;
    color: rgba(242, 239, 231, 0.42);
    border-top: 1px solid rgba(242, 239, 231, 0.22);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer .footer-bottom a
{
    color: #F2EFE7;
    font-size: inherit;
    letter-spacing: inherit;
}

@media (max-width: 768px)
{
    .site-footer
    {
        padding-top: 0;
        padding-bottom: 32px;
    }

    .site-footer #footer-cta
    {
        min-height: 520px;
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 80px 5% 72px;
        align-items: end;
    }

    .site-footer #footer-cta h3
    {
        width: 100%;
        font-size: clamp(3.3rem, 16vw, 5.2rem);
        text-align: left;
    }

    .site-footer #footer-cta .main-button
    {
        width: auto;
        margin: 0;
        justify-self: start;
    }

    .site-footer .footer-cta-arrow
    {
        top: 26%;
        right: -5%;
    }

    .site-footer .footer-main
    {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 70px;
        padding-top: 90px;
    }

    .site-footer .footer-brand
    {
        min-height: 250px;
    }

    .site-footer .footer-logo-link
    {
        width: min(100%, 350px);
    }

    .site-footer .footer-links
    {
        gap: 35px;
    }

    .site-footer .footer-bottom
    {
        margin-top: 10px;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        line-height: 1.5;
    }
}

/* Portfolio project listing
   Source of truth: STYLE-GUIDE.md */

.portfolio-projects
{
    position: relative;
    padding: clamp(80px, 10vw, 150px) max(5%, calc((100% - 1680px) / 2)) clamp(110px, 13vw, 210px);
    color: #151816;
    background:
        linear-gradient(rgba(36, 73, 232, 0.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 73, 232, 0.065) 1px, transparent 1px),
        #E8EBF4;
    background-size: 58px 58px;
    box-sizing: border-box;
}

/* Services offerings
   Source of truth: STYLE-GUIDE.md */

.offerings-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(650px, 1.55fr);
    gap: clamp(60px, 8vw, 140px);
    padding: clamp(110px, 13vw, 200px) 0 clamp(120px, 14vw, 220px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #151816;
    background:
        linear-gradient(rgba(36, 73, 232, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 73, 232, 0.07) 1px, transparent 1px),
        #E8EBF4;
    background-size: 52px 52px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Services popular questions
   Source of truth: STYLE-GUIDE.md */

.services-faq-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(600px, 1.35fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 200px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        #151816;
    background-size: 48px 48px;
    box-sizing: border-box;
}

/* FAQ common questions index
   Source of truth: STYLE-GUIDE.md */

.faq-index-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(290px, 0.68fr) minmax(620px, 1.42fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 200px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: start;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        #151816;
    background-size: 52px 52px;
    box-sizing: border-box;
    counter-reset: faq-item;
}

/* Contact details
   Source of truth: STYLE-GUIDE.md */

.contact-details-section
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(380px, 0.85fr) minmax(500px, 1.15fr);
    gap: clamp(70px, 10vw, 170px);
    padding: clamp(110px, 13vw, 200px) max(5%, calc((100% - 1680px) / 2)) !important;
    align-items: center;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.045) 1px, transparent 1px),
        #151816;
    background-size: 52px 52px;
    box-sizing: border-box;
}

.contact-details-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #2449E8;
}

.contact-details-section .contact-details-visual,
.contact-details-section .contact-details-copy
{
    width: 100%;
}

.contact-details-image
{
    position: relative;
    min-height: 680px;
    display: grid;
    place-items: center;
    background: #F2EFE7;
    isolation: isolate;
}

.contact-details-image::before
{
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(21, 24, 22, 0.24);
    z-index: -1;
}

.contact-details-image img
{
    width: 94%;
    max-width: none;
    margin: 0;
    filter: none;
    opacity: 1;
}

.contact-details-index
{
    position: absolute;
    top: 25px;
    left: 28px;
    padding: 8px 11px;
    color: #F2EFE7;
    background: #151816;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

.contact-details-shape
{
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: clamp(90px, 10vw, 145px);
    aspect-ratio: 1;
    background: #FF5A36;
    z-index: -2;
}

.contact-details-copy .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.contact-details-copy h2
{
    max-width: 760px;
    margin: 0;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.4rem, 6vw, 7rem);
    font-weight: 520;
    line-height: 0.92;
    letter-spacing: -0.06em;
    text-transform: none;
}

.contact-details-text
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 52px);
    max-width: 760px;
    margin-top: clamp(50px, 7vw, 82px);
}

.contact-details-text p
{
    margin: 0;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.85;
}

.contact-details-actions
{
    max-width: 760px;
    margin-top: clamp(48px, 7vw, 82px);
    border-top: 1px solid rgba(242, 239, 231, 0.3);
}

.contact-details-actions a
{
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 30px;
    gap: 20px;
    min-height: 88px;
    padding: 20px 0;
    align-items: center;
    color: #F2EFE7;
    border-bottom: 1px solid rgba(242, 239, 231, 0.3);
}

.contact-details-actions a > span
{
    color: #FF5A36;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-details-actions a strong
{
    font-size: clamp(0.94rem, 1.4vw, 1.18rem);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.contact-details-actions a b
{
    color: #2449E8;
    font-size: 1.1rem;
    font-weight: 500;
}

.contact-details-actions a:hover strong
{
    color: #FF5A36;
}

@media (max-width: 768px)
{
    .contact-details-section
    {
        grid-template-columns: 1fr;
        gap: 82px;
        padding: 100px 5% 120px !important;
    }

    .contact-details-image
    {
        min-height: 520px;
        width: calc(100% - 12px);
    }

    .contact-details-image::before
    {
        inset: 15px;
    }

    .contact-details-shape
    {
        right: -12px;
        bottom: -16px;
    }

    .contact-details-text
    {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .contact-details-actions a
    {
        grid-template-columns: 65px minmax(0, 1fr) 24px;
        gap: 12px;
    }
}

.faq-index-section::before
{
    content: "?";
    position: absolute;
    bottom: -10%;
    left: -2%;
    color: rgba(242, 239, 231, 0.045);
    font-size: clamp(22rem, 40vw, 46rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.faq-index-heading
{
    position: sticky;
    top: 40px;
    z-index: 1;
}

.faq-index-heading .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.faq-index-heading h2
{
    margin: 0 0 28px;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.3rem, 5.8vw, 6.8rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.faq-index-heading h3
{
    width: 100%;
    max-width: 480px;
    color: #F2EFE7;
    font-size: clamp(1.45rem, 2.3vw, 2.5rem);
    font-weight: 450;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.faq-index-heading p
{
    max-width: 420px;
    margin-top: 30px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.75;
}

.faq-count
{
    display: inline-block;
    margin-top: 42px;
    padding: 9px 13px;
    color: #151816;
    background: #FF5A36;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

ul.questions.faq-index
{
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    border-top: 1px solid rgba(242, 239, 231, 0.28);
    z-index: 1;
}

.faq-index li
{
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(242, 239, 231, 0.28);
    counter-increment: faq-item;
}

.faq-index li .wrapper
{
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 36px;
    gap: 20px;
    min-height: 102px;
    padding: 27px 0;
    align-items: center;
    box-sizing: border-box;
}

.faq-index li .wrapper::before
{
    content: counter(faq-item, decimal-leading-zero);
    color: #FF5A36;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.faq-index li .wrapper p
{
    width: 100%;
    color: #F2EFE7;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    font-weight: 550;
    line-height: 1.45;
}

.faq-index img
{
    width: 25px;
    height: 25px;
    filter: invert(1);
    opacity: 0.72;
}

.faq-index p.answer
{
    max-width: 720px;
    margin: 0 36px 34px 78px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.92rem;
    line-height: 1.85;
}

.faq-index li:focus-visible
{
    outline: 2px solid #FF5A36;
    outline-offset: 5px;
}

@media (max-width: 768px)
{
    .faq-index-section
    {
        grid-template-columns: 1fr;
        gap: 72px;
        padding: 100px 5% 120px !important;
    }

    .faq-index-heading
    {
        position: static;
    }

    .faq-index-heading h3
    {
        text-align: left;
    }

    .faq-index-heading p
    {
        max-width: 92%;
    }

    .faq-index li .wrapper
    {
        grid-template-columns: 40px minmax(0, 1fr) 27px;
        gap: 10px;
        min-height: 90px;
    }

    .faq-index p.answer
    {
        margin: 0 27px 30px 50px;
    }
}

.services-faq-section::before
{
    content: "?";
    position: absolute;
    bottom: -18%;
    left: -3%;
    color: rgba(242, 239, 231, 0.055);
    font-size: clamp(22rem, 38vw, 43rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.services-faq-heading
{
    position: sticky;
    top: 40px;
    z-index: 1;
}

.services-faq-heading .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.services-faq-heading h2
{
    margin: 0 0 32px;
    padding: 0;
    color: #F2EFE7;
    background: transparent;
    font-size: clamp(3.2rem, 5.6vw, 6.5rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.services-faq-heading h3
{
    width: 100%;
    max-width: 480px;
    color: #F2EFE7;
    font-size: clamp(1.4rem, 2.2vw, 2.4rem);
    font-weight: 450;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.services-faq-heading p
{
    max-width: 420px;
    margin-top: 30px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.75;
}

.services-faq-heading > a
{
    display: inline-block;
    margin-top: 42px;
    padding-bottom: 7px;
    color: #F2EFE7;
    border-bottom: 1px solid rgba(242, 239, 231, 0.58);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: padding 180ms ease;
}

.services-faq-heading > a:hover
{
    padding-right: 8px;
    color: #FF5A36;
    border-color: #FF5A36;
}

ul.questions.services-questions
{
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    border-top: 1px solid rgba(242, 239, 231, 0.3);
    z-index: 1;
}

.services-questions li
{
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(242, 239, 231, 0.3);
}

.services-questions li .wrapper
{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    gap: 18px;
    min-height: 92px;
    padding: 24px 0;
    align-items: center;
    box-sizing: border-box;
}

.services-questions li .wrapper > span
{
    color: #FF5A36;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.services-questions li .wrapper p
{
    width: 100%;
    color: #F2EFE7;
    font-size: clamp(0.96rem, 1.3vw, 1.18rem);
    font-weight: 550;
    line-height: 1.45;
}

.services-questions img
{
    width: 24px;
    height: 24px;
    filter: invert(1);
    opacity: 0.72;
}

.services-questions p.answer
{
    max-width: 680px;
    margin: 0 34px 30px 66px;
    color: rgba(242, 239, 231, 0.62);
    font-size: 0.9rem;
    line-height: 1.8;
}

.services-questions li:focus-visible
{
    outline: 2px solid #FF5A36;
    outline-offset: 5px;
}

@media (max-width: 768px)
{
    .services-faq-section
    {
        grid-template-columns: 1fr;
        gap: 70px;
        padding: 100px 5% 120px !important;
    }

    .services-faq-heading
    {
        position: static;
    }

    .services-faq-heading h3
    {
        text-align: left;
    }

    .services-faq-heading p
    {
        max-width: 92%;
    }

    .services-questions li .wrapper
    {
        grid-template-columns: 36px minmax(0, 1fr) 26px;
        gap: 10px;
        min-height: 84px;
    }

    .services-questions p.answer
    {
        margin: 0 26px 28px 46px;
    }
}

.offerings-section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: max(5%, calc((100% - 1680px) / 2));
    width: clamp(90px, 11vw, 170px);
    height: 18px;
    background: #FF5A36;
}

.offerings-heading
{
    position: relative;
    padding-right: 20px;
    z-index: 1;
}

.offerings-heading .section-marker
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #2449E8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.offerings-heading h2
{
    margin: 0 0 32px;
    padding: 0;
    color: #151816;
    background: transparent;
    font-size: clamp(3.3rem, 5.8vw, 6.8rem);
    font-weight: 520;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: none;
}

.offerings-heading h3
{
    width: 100%;
    max-width: 530px;
    color: #151816;
    font-size: clamp(1.5rem, 2.3vw, 2.6rem);
    font-weight: 450;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.offerings-heading p
{
    max-width: 440px;
    margin-top: 30px;
    color: #62655F;
    font-size: 0.9rem;
    line-height: 1.75;
}

.offerings-section .offerings-slider
{
    position: relative;
    width: 100%;
    padding-top: 0;
    align-items: flex-start;
    overflow: hidden;
    z-index: 1;
}

.offerings-section .offerings-slider ul
{
    width: 100%;
    margin-left: 0;
}

.offerings-section .offerings-slider ul .wrapper
{
    align-items: stretch;
}

.offerings-section .offerings-slider ul li
{
    width: min(42vw, 520px);
    max-width: 520px;
    min-height: 610px;
    display: flex;
    padding: clamp(38px, 4vw, 58px);
    flex-direction: column;
    margin-right: 26px;
    color: #F2EFE7;
    background: #151816;
    border-top: 8px solid #2449E8;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.offerings-section .offering-number
{
    display: block;
    margin-bottom: clamp(48px, 6vw, 82px);
    color: #FF5A36;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.offerings-section .offerings-slider li > p
{
    width: 100%;
    margin: 0;
    color: rgba(242, 239, 231, 0.66);
    font-size: 0.91rem;
    line-height: 1.8;
}

.offerings-section .offerings-slider li > p + p
{
    margin-top: 1.35rem;
}

.offerings-section .offerings-slider .details
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    margin-top: auto;
    padding-top: 52px;
    align-items: end;
    border-top: 1px solid rgba(242, 239, 231, 0.28);
}

.offerings-section .offerings-slider .details .price
{
    display: block;
    margin-bottom: 10px;
    color: #FF5A36;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.offerings-section .offerings-slider .details .highlight
{
    max-width: 280px;
    padding-top: 0;
    color: #F2EFE7;
    font-size: clamp(1.35rem, 2vw, 2.15rem);
    font-weight: 520;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.offerings-section .offerings-slider .details > a
{
    padding-bottom: 3px;
    color: #F2EFE7;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.offerings-section .offerings-slider .details > a::after
{
    content: " ↗";
    color: #2449E8;
}

.offerings-section .offerings-slider .details > a:hover
{
    color: #FF5A36;
}

.offerings-section .offerings-slider .buttons
{
    display: flex;
    margin-top: 34px;
    align-self: flex-start;
}

.offerings-section .offerings-slider .buttons a
{
    display: grid;
    width: 52px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #151816;
    transition: background-color 180ms ease, opacity 180ms ease;
}

.offerings-section .offerings-slider .buttons a:hover
{
    background: rgba(36, 73, 232, 0.1);
}

.offerings-section .offerings-slider .buttons a:last-child
{
    margin-left: 10px;
}

.offerings-section .offerings-slider .buttons a img
{
    width: 21px;
    filter: none;
}

.offerings-section .offerings-slider .buttons a.inactive
{
    opacity: 0.28;
}

@media (max-width: 768px)
{
    .offerings-section
    {
        grid-template-columns: 1fr;
        gap: 70px;
        padding: 100px 0 120px 5% !important;
    }

    .offerings-heading
    {
        padding-right: 5%;
    }

    .offerings-heading h3
    {
        text-align: left;
    }

    .offerings-heading p
    {
        max-width: 92%;
    }

    .offerings-section .offerings-slider ul li
    {
        width: 84vw;
        max-width: 420px;
        min-height: 620px;
        padding: 34px 28px;
        margin-right: 18px;
    }

    .offerings-section .offering-number
    {
        margin-bottom: 58px;
    }

    .offerings-section .offerings-slider .details
    {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .offerings-section .offerings-slider .details > a
    {
        justify-self: start;
    }
}

.portfolio-projects-heading
{
    display: grid;
    grid-template-columns: minmax(220px, 0.6fr) minmax(500px, 1.4fr);
    gap: clamp(50px, 8vw, 140px);
    margin-bottom: clamp(100px, 13vw, 190px);
    align-items: start;
}

.portfolio-projects-heading > span
{
    padding-top: 12px;
    color: #2449E8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.portfolio-projects-heading h2
{
    max-width: 1040px;
    margin: 0;
    padding: 0;
    color: #151816;
    background: transparent;
    font-size: clamp(3rem, 5.7vw, 6.8rem);
    font-weight: 520;
    line-height: 0.95;
    letter-spacing: -0.06em;
    text-transform: none;
}

.project-list
{
    width: 100%;
    margin: 0;
    list-style: none;
}

.project-entry
{
    display: grid;
    grid-template-columns: minmax(520px, 1.5fr) minmax(300px, 0.65fr);
    gap: clamp(50px, 8vw, 140px);
    padding: clamp(70px, 9vw, 140px) 0;
    align-items: center;
    border-bottom: 1px solid rgba(36, 73, 232, 0.24);
}

.project-entry > *
{
    min-width: 0;
}

.project-entry:nth-child(even) .project-image
{
    order: 2;
}

.project-entry:nth-child(even)
{
    grid-template-columns: minmax(300px, 0.65fr) minmax(520px, 1.5fr);
}

.project-entry:nth-child(even) .project-details
{
    order: 1;
}

.project-image
{
    position: relative;
    display: block;
    width: 100%;
    height: clamp(360px, 42vw, 680px);
    padding: clamp(12px, 1.2vw, 20px);
    background: #2449E8;
    box-sizing: border-box;
    overflow: hidden;
}

.project-entry:nth-child(even) .project-image
{
    background: #151816;
}

.project-image::before
{
    content: "";
    position: absolute;
    inset: clamp(12px, 1.2vw, 20px);
    border: 1px solid rgba(242, 239, 231, 0.62);
    z-index: 1;
    pointer-events: none;
}

.project-image img
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 420ms ease;
}

.project-image:hover img
{
    filter: saturate(0.82);
    transform: scale(1.025);
}

.project-view
{
    position: absolute;
    right: clamp(24px, 2.5vw, 42px);
    bottom: clamp(24px, 2.5vw, 42px);
    padding: 12px 15px;
    color: #F2EFE7;
    background: #FF5A36;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}

.project-details
{
    max-width: 480px;
}

.project-number
{
    display: block;
    margin-bottom: clamp(34px, 5vw, 62px);
    color: #FF5A36;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.project-details h3
{
    width: 100%;
    color: #151816;
    font-size: clamp(2.6rem, 4.6vw, 5.7rem);
    font-weight: 520;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.project-details p
{
    max-width: 440px;
    margin-top: clamp(30px, 4vw, 48px);
    color: #555B68;
    font-size: 0.96rem;
    line-height: 1.8;
}

.project-link
{
    display: flex;
    width: 100%;
    max-width: 440px;
    margin-top: clamp(38px, 5vw, 62px);
    padding: 16px 0;
    align-items: center;
    justify-content: space-between;
    color: #151816;
    border-top: 1px solid rgba(36, 73, 232, 0.24);
    border-bottom: 1px solid rgba(36, 73, 232, 0.24);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 180ms ease, padding 180ms ease;
}

.project-link span
{
    color: #2449E8;
    font-size: 1rem;
}

.project-link:hover
{
    padding-right: 10px;
    padding-left: 10px;
    color: #2449E8;
}

@media (max-width: 1050px)
{
    .project-entry
    {
        grid-template-columns: minmax(420px, 1.25fr) minmax(260px, 0.75fr);
        gap: 55px;
    }

    .project-entry:nth-child(even)
    {
        grid-template-columns: minmax(260px, 0.75fr) minmax(420px, 1.25fr);
    }
}

@media (max-width: 768px)
{
    .portfolio-projects
    {
        padding: 70px 5% 120px;
    }

    .portfolio-projects-heading
    {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 90px;
    }

    .portfolio-projects-heading h2
    {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .project-entry
    {
        grid-template-columns: 1fr;
        gap: 52px;
        padding: 70px 0 85px;
    }

    .project-entry:nth-child(even)
    {
        grid-template-columns: 1fr;
    }

    .project-entry:nth-child(even) .project-image,
    .project-entry:nth-child(even) .project-details
    {
        order: initial;
    }

    .project-image
    {
        width: 100%;
        height: clamp(280px, 72vw, 470px);
        padding: 10px;
    }

    .project-image::before
    {
        inset: 10px;
    }

    .project-view
    {
        right: 20px;
        bottom: 20px;
    }

    .project-details
    {
        max-width: none;
    }

    .project-details h3
    {
        text-align: left;
    }

    .project-link
    {
        max-width: none;
    }
}

/* Portfolio detail header
   Source of truth: STYLE-GUIDE.md */

#display
{
    --case-canvas: #F2EFE7;
    --case-ink: #151816;
    --case-cobalt: #2449E8;
    --case-orange: #FF5A36;
    --case-rule: #C9C6BD;
    --case-muted: #62655F;

    position: relative;
    min-height: 94vh;
    padding-bottom: 0;
    color: var(--case-ink);
    background: var(--case-canvas);
    overflow: hidden;
}

#display::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    background: var(--case-cobalt);
}

#display .container.wide
{
    width: min(92%, 1680px);
}

#display nav
{
    border-bottom: 1px solid var(--case-rule);
}

#display nav ul
{
    height: 108px;
}

#display nav ul li
{
    margin-left: 34px;
}

#display nav ul li img
{
    width: 124px;
    max-width: 124px;
    filter: none;
}

#display nav a
{
    position: relative;
    color: var(--case-ink);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#display nav ul li:nth-child(3) a::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 2px;
    background: var(--case-cobalt);
}

#display nav ul li:last-child a
{
    padding: 11px 17px;
    border: 1px solid var(--case-ink);
    transition: color 180ms ease, background-color 180ms ease;
}

#display nav ul li:last-child a:hover
{
    color: var(--case-canvas);
    background: var(--case-ink);
}

#display .case-study-hero
{
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
    min-height: calc(94vh - 109px);
    padding: clamp(60px, 7vh, 100px) 0 clamp(90px, 10vh, 140px);
    align-items: center;
    gap: clamp(60px, 8vw, 140px);
    box-sizing: border-box;
}

#display .case-study-copy
{
    position: relative;
    align-self: start;
    z-index: 2;
}

#display .case-study-back
{
    display: inline-flex;
    margin-bottom: clamp(42px, 6vh, 72px);
    align-items: center;
    gap: 10px;
    color: var(--case-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 180ms ease, gap 180ms ease;
}

#display .case-study-back span
{
    color: var(--case-orange);
    font-size: 1rem;
}

#display .case-study-back:hover
{
    gap: 15px;
    color: var(--case-ink);
}

#display p.case-study-kicker
{
    width: auto;
    max-width: none;
    margin-bottom: 22px;
    color: var(--case-cobalt);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
}

#display .case-study-kicker span
{
    color: var(--case-orange);
}

#display h1
{
    max-width: 680px;
    color: var(--case-ink);
    font-size: clamp(4.4rem, 7.2vw, 8.6rem);
    font-weight: 520;
    line-height: 0.88;
    letter-spacing: -0.07em;
    text-align: left;
}

#display p.case-study-description
{
    width: 100%;
    max-width: 590px;
    margin-top: clamp(30px, 4vh, 46px);
    color: var(--case-muted);
    font-size: clamp(0.94rem, 1.1vw, 1.08rem);
    line-height: 1.75;
    text-align: left;
}

#display .case-study-categories
{
    display: flex;
    margin-top: clamp(34px, 5vh, 52px);
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

#display .case-study-categories li
{
    padding: 9px 13px;
    color: var(--case-ink);
    border: 1px solid var(--case-rule);
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#display .case-study-visual
{
    position: relative;
    width: 100%;
    min-width: 0;
    align-self: start;
    padding: clamp(34px, 4vw, 64px);
    background:
        linear-gradient(rgba(242, 239, 231, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.22) 1px, transparent 1px),
        var(--case-cobalt);
    background-size: 42px 42px;
    box-sizing: border-box;
    isolation: isolate;
}

#display .case-study-visual::before
{
    content: "";
    position: absolute;
    top: -22px;
    right: clamp(26px, 5vw, 82px);
    width: clamp(60px, 7vw, 108px);
    aspect-ratio: 1;
    background: var(--case-orange);
    z-index: -1;
}

#display .case-study-visual::after
{
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 34%;
    height: 18%;
    background: var(--case-ink);
    z-index: -1;
}

#display #portfolio-gradient
{
    position: absolute;
    inset: 0;
    height: auto;
    background: radial-gradient(circle at 78% 16%, rgba(var(--project-rgb), 0.78), rgba(var(--project-rgb), 0) 43%);
    filter: none;
    opacity: 0.72;
    z-index: -1;
}

#display .case-study-image
{
    position: relative;
    aspect-ratio: 1080 / 740;
    padding: clamp(8px, 0.8vw, 12px);
    background: var(--case-canvas);
    border: 1px solid rgba(21, 24, 22, 0.22);
    box-shadow: 0 28px 70px rgba(21, 24, 22, 0.24);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}

#display .case-study-image img
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

#display .case-study-number
{
    position: absolute;
    top: clamp(48px, 5vw, 78px);
    left: clamp(48px, 5vw, 78px);
    display: grid;
    width: 46px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--case-canvas);
    background: var(--case-ink);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    z-index: 2;
}

#display .case-study-caption
{
    position: absolute;
    right: clamp(34px, 4vw, 64px);
    bottom: 13px;
    color: var(--case-canvas);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

#display .case-study-missing
{
    display: grid;
    aspect-ratio: 1080 / 740;
    place-items: center;
    color: var(--case-canvas);
    border: 1px solid rgba(242, 239, 231, 0.55);
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 600;
    letter-spacing: -0.07em;
}

#display a:focus-visible,
#display #hamburger:focus-visible
{
    outline-color: var(--case-cobalt);
}

@media (max-width: 1050px)
{
    #display .case-study-hero
    {
        grid-template-columns: minmax(280px, 0.72fr) minmax(430px, 1.28fr);
        gap: 48px;
    }

    #display h1
    {
        font-size: clamp(4rem, 8.5vw, 6.7rem);
    }
}

@media (max-width: 768px)
{
    #display
    {
        min-height: auto;
    }

    #display nav
    {
        height: 82px;
    }

    #display #hamburger .bar
    {
        background-color: var(--case-ink);
    }

    #display .case-study-hero
    {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 52px 0 105px;
        gap: 72px;
    }

    #display .case-study-back
    {
        margin-bottom: 42px;
    }

    #display h1
    {
        font-size: clamp(4rem, 19vw, 6.2rem);
    }

    #display p.case-study-description
    {
        max-width: 96%;
    }

    #display .case-study-visual
    {
        width: calc(100% - 8px);
        padding: 24px;
    }

    #display .case-study-visual::before
    {
        top: -16px;
        right: 28px;
        width: 68px;
    }

    #display .case-study-visual::after
    {
        right: -8px;
        bottom: -14px;
    }

    #display .case-study-number
    {
        top: 34px;
        left: 34px;
        width: 38px;
    }

    #display .case-study-caption
    {
        display: none;
    }
}

/* Portfolio detail project showcase
   Source of truth: STYLE-GUIDE.md */

.case-study-content
{
    margin: 0;
    color: #F2EFE7;
    background:
        linear-gradient(rgba(242, 239, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 231, 0.035) 1px, transparent 1px),
        #151816;
    background-size: 64px 64px;
}

.project-showcase
{
    position: relative;
    padding: clamp(100px, 12vw, 190px) 0 clamp(130px, 15vw, 230px);
    overflow: hidden;
}

.project-showcase::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    width: clamp(70px, 9vw, 150px);
    height: 10px;
    background: #FF5A36;
}

.project-showcase-intro
{
    display: flex;
    margin-bottom: clamp(70px, 10vw, 150px);
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.project-showcase-intro p
{
    margin: 0;
    text-align: left;
}

.project-showcase-intro p:first-child
{
    color: #F2EFE7;
    font-size: clamp(2.8rem, 5vw, 6rem);
    font-weight: 520;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.project-showcase-intro p:first-child span
{
    display: block;
    margin-top: 20px;
    color: #FF5A36;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.project-showcase-intro p:last-child
{
    max-width: 270px;
    padding-bottom: 8px;
    color: rgba(242, 239, 231, 0.58);
    font-size: 0.76rem;
    line-height: 1.65;
}

.project-showcase-grid
{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(80px, 11vw, 170px) clamp(24px, 3.5vw, 58px);
}

.project-shot
{
    min-width: 0;
    margin: 0;
}

.project-shot-1,
.project-shot-4
{
    grid-column: 1 / -1;
}

.project-shot-2,
.project-shot-5
{
    grid-column: 1 / span 6;
}

.project-shot-3,
.project-shot-6
{
    grid-column: 7 / -1;
    margin-top: clamp(70px, 9vw, 140px);
}

.project-shot-image
{
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1080 / 740;
    padding: clamp(8px, 0.8vw, 14px);
    color: inherit;
    background: #F2EFE7;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    cursor: zoom-in;
    overflow: hidden;
}

.project-shot-1 .project-shot-image,
.project-shot-4 .project-shot-image
{
    padding: clamp(12px, 1vw, 18px);
}

.project-shot-image::before
{
    content: "";
    position: absolute;
    inset: 0;
    border-top: 8px solid #2449E8;
    z-index: 2;
    pointer-events: none;
}

.project-shot-4 .project-shot-image::before
{
    border-top-color: #FF5A36;
}

.project-shot-image img
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: cover;
    box-shadow: none;
    transition: filter 320ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.project-shot-image:hover img
{
    filter: brightness(0.78);
    transform: scale(1.015);
}

.project-shot-action
{
    position: absolute;
    right: clamp(22px, 2vw, 34px);
    bottom: clamp(22px, 2vw, 34px);
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 18px;
    color: #F2EFE7;
    background: #151816;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 3;
}

.project-shot-action b
{
    color: #FF5A36;
    font-size: 0.9rem;
    font-weight: 500;
}

.project-shot-image:hover .project-shot-action,
.project-shot-image:focus-visible .project-shot-action
{
    opacity: 1;
    transform: translateY(0);
}

.project-shot-image:focus-visible
{
    outline: 3px solid #FF5A36;
    outline-offset: 6px;
}

.project-shot figcaption
{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    margin-top: 24px;
    padding-top: 18px;
    gap: 20px;
    border-top: 1px solid rgba(242, 239, 231, 0.24);
}

.project-shot figcaption > span
{
    color: #FF5A36;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.project-shot figcaption p
{
    width: 100%;
    max-width: 680px;
    margin: 0;
    color: rgba(242, 239, 231, 0.68);
    font-size: 0.78rem;
    line-height: 1.7;
    text-align: left;
}

.portfolio #popup
{
    padding: clamp(22px, 4vw, 64px);
    box-sizing: border-box;
}

.portfolio #popup img
{
    max-width: min(92%, 1500px);
    max-height: 88vh;
    border: 8px solid #F2EFE7;
    border-radius: 0;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
    object-fit: contain;
}

.portfolio #popup .blocker
{
    background: #151816;
    opacity: 0.96;
}

.portfolio-popup-close
{
    position: fixed;
    top: clamp(18px, 3vw, 38px);
    right: clamp(18px, 3vw, 42px);
    display: flex;
    padding: 10px 0;
    align-items: center;
    gap: 12px;
    color: #F2EFE7;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2002;
}

.portfolio-popup-close span
{
    color: #FF5A36;
    font-size: 1.5rem;
    font-weight: 300;
}

.portfolio-popup-close:focus-visible
{
    outline: 2px solid #FF5A36;
    outline-offset: 5px;
}

@media (max-width: 768px)
{
    .project-showcase
    {
        padding: 90px 0 130px;
    }

    .project-showcase::before
    {
        left: 5%;
        height: 8px;
    }

    .project-showcase-intro
    {
        margin-bottom: 75px;
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .project-showcase-intro p:first-child
    {
        font-size: clamp(3rem, 14vw, 4.6rem);
    }

    .project-showcase-grid
    {
        display: flex;
        flex-direction: column;
        gap: 85px;
    }

    .project-shot-3,
    .project-shot-6
    {
        margin-top: 0;
    }

    .project-shot-image,
    .project-shot-1 .project-shot-image,
    .project-shot-4 .project-shot-image
    {
        padding: 7px;
    }

    .project-shot-image::before
    {
        border-top-width: 5px;
    }

    .project-shot-action
    {
        right: 16px;
        bottom: 16px;
        opacity: 1;
        transform: none;
    }

    .project-shot figcaption
    {
        grid-template-columns: 32px minmax(0, 1fr);
        margin-top: 18px;
        gap: 12px;
    }

    .portfolio #popup
    {
        padding: 62px 14px 20px;
    }

    .portfolio #popup img
    {
        max-width: 100%;
        max-height: 82vh;
        border-width: 5px;
    }
}