/* =============================================================================
   CSS Reset
   ============================================================================= */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
    vertical-align: baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote::before,blockquote::after,q::before,q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; }
mark { background-color: transparent; color: inherit; }
input::-moz-focus-inner { border: 0; padding: 0; }
input[type="text"],input[type="email"],select,textarea {
    -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none;
}
*,*::before,*::after { box-sizing: border-box; }

/* =============================================================================
   CSS Custom Properties
   ============================================================================= */
:root {
    --background-height: 100vh;
    --site-language-alignment: left;
    --site-language-direction: ltr;
    --site-language-flex-alignment: flex-start;
    --site-language-indent-left: 1;
    --site-language-indent-right: 0;
    --site-language-margin-left: 0;
    --site-language-margin-right: auto;
    --viewport-height: 100vh;
}

/* =============================================================================
   Base Typography & Helpers
   ============================================================================= */
html { font-size: 14pt; }
u { text-decoration: underline; }
strong { color: inherit; font-weight: bolder; }
em { font-style: italic; }
a { color: inherit; text-decoration: underline; transition: color 0.25s ease; }

/* =============================================================================
   Body & Background
   ============================================================================= */
body {
    line-height: 1.0;
    min-height: var(--viewport-height);
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
    background-color: #FFFFFF;
}

/* Right-side background panel: bg image + diagonal gradient overlay + film-grain noise */
body::before {
    content: '';
    display: block;
    background-attachment: scroll;
    height: var(--background-height);
    left: auto;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    width: calc(100vw - 32rem);
    z-index: 0;
    right: 0;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.29296875%200%200%200%200%200%200.24609375%200%200%200%200%200%200.5859375%200%200%200%200%200%200.25%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(335deg, rgba(27,28,31,0.561) 25%, transparent 52%),
        url('../images/bg.jpg');
    background-size: 512px, cover, cover;
    background-position: center, 0% 0%, right;
    background-repeat: repeat, repeat, no-repeat;
}

/* Dark loading overlay — fades out on page ready */
body::after {
    background-color: #1B1C1F;
    content: '';
    display: block;
    pointer-events: none;
    position: fixed;
    transform: scale(1);
    z-index: 1;
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    transition: opacity 3s ease-in-out 1.5s, visibility 3s 1.5s;
    visibility: hidden;
    width: 100%;
}
body.is-loading::after { opacity: 1; visibility: visible; }

/* =============================================================================
   Layout
   ============================================================================= */
.site-wrapper {
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-height: var(--viewport-height);
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding: 0 3rem 0 0;
}

.site-main {
    --alignment: var(--site-language-alignment);
    --flex-alignment: var(--site-language-flex-alignment);
    --indent-left: var(--site-language-indent-left);
    --indent-right: var(--site-language-indent-right);
    --margin-left: var(--site-language-margin-left);
    --margin-right: var(--site-language-margin-right);
    --border-radius-tl: 0;
    --border-radius-tr: 0;
    --border-radius-br: 0;
    --border-radius-bl: 0;

    align-items: flex-end;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    max-width: 100%;
    position: relative;
    text-align: var(--alignment);
    z-index: 1;

    background-image: linear-gradient(45deg, rgba(27,28,31,1) 0%, rgba(27,28,31,1) 87%);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: cover;
    box-shadow: 0rem 1.75rem 2rem 0rem rgba(0,0,0,0.051);
    -webkit-backdrop-filter: blur(0.7rem);
    backdrop-filter: blur(0.7rem);
    transition: opacity 1.5s ease 0.125s, filter 1.5s ease 0.125s;
}

.site-main > .inner {
    --padding-horizontal: 4rem;
    --padding-vertical: 4rem;
    --spacing: 1.75rem;
    --width: 32rem;

    border-radius: var(--border-radius-tl) var(--border-radius-tr)
                   var(--border-radius-br) var(--border-radius-bl);
    max-width: 100%;
    position: relative;
    width: var(--width);
    z-index: 1;
    padding: var(--padding-vertical) var(--padding-horizontal);
}

.site-main > .inner > * {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
}
.site-main > .inner > :first-child { margin-top: 0 !important; }
.site-main > .inner > :last-child  { margin-bottom: 0 !important; }

/* =============================================================================
   Loading States
   ============================================================================= */
body.is-loading .site-main { filter: blur(0.2375rem); opacity: 0; }
body.is-loading { pointer-events: none; }

body.is-instant .site-main,
body.is-instant .site-main > .inner > *,
body.is-instant .site-main > .inner > section > * { transition: none !important; }
body.is-instant::after { display: none !important; transition: none !important; }

/* Loader spinner (injected by JS) */
body #loader {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 3rem;
    left: calc(50% - 1.5rem);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: calc(50% - 1.5rem);
    transition: opacity 1s ease, visibility 1s;
    visibility: hidden;
    width: 3rem;
    z-index: 100000;
}
body.with-loader #loader {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5jaXJjbGUgeyBmaWxsOiB0cmFuc3BhcmVudDsgc3Ryb2tlOiAjRkZGRkZGMTQ7IHN0cm9rZS13aWR0aDogMnB4OyB9PC9zdHlsZT48ZGVmcz48Y2xpcFBhdGggaWQ9ImNvcm5lciI+PHBvbHlnb24gcG9pbnRzPSIwLDAgNDgsMCA0OCw0OCA5Niw0OCA5Niw5NiAwLDk2IiAvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjb3JuZXIpIj48Y2lyY2xlIGN4PSI0OCIgY3k9IjQ4IiByPSIzMiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgNDggNDgiIHRvPSIzNjAgNDggNDgiIGR1cj0iMXMiIHJlcGVhdER1cj0iaW5kZWZpbml0ZSIgLz48L2c+PC9zdmc+");
    opacity: 1;
    transform: scale(1.0);
    visibility: visible;
}
body.is-playing.with-loader #loader {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s ease, transform 0.75s ease, visibility 0.25s;
    visibility: hidden;
}

/* =============================================================================
   Image Component
   ============================================================================= */
.image-component {
    display: block;
    line-height: 0;
    max-width: 100%;
    position: relative;
}
.image-component > .frame {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: top;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.image-component > .frame > img {
    border-radius: 0 !important;
    max-width: 100%;
    vertical-align: top;
    width: inherit;
}
.image-component.instance-1 > .frame { width: 15rem; }

/* =============================================================================
   Text Component
   ============================================================================= */
.text-component {
    direction: var(--site-language-direction);
    position: relative;
}
.text-component span.p { display: block; position: relative; }

.text-component.style-2 {
    color: #FFFFFF;
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: 0.175rem;
    width: calc(100% + 0.175rem);
    font-size: 1.875em;
    line-height: 1.25;
    font-weight: 200;
}
.text-component.style-2 mark  { color: #F07701; background-color: transparent; }
.text-component.style-2 a     { color: #33ADA9; text-decoration: underline; }
.text-component.style-2 a:hover { text-decoration: none; }
.text-component.style-2 span.p:nth-child(n + 2) { margin-top: 2.5rem; }

/* =============================================================================
   Buttons Component
   ============================================================================= */
.buttons-component {
    cursor: default;
    display: flex;
    justify-content: var(--flex-alignment);
    letter-spacing: 0;
    padding: 0;
}
.buttons-component > li { max-width: 100%; text-align: var(--alignment); }
.buttons-component > li > a {
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

.buttons-component.style-1 {
    gap: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
}
.buttons-component.style-1:not(:first-child) { margin-top: 4rem !important; }
.buttons-component.style-1:not(:last-child)  { margin-bottom: 4rem !important; }

.buttons-component.style-1 > li > a {
    display: inline-flex;
    width: 100vw;
    height: 3.75rem;
    line-height: calc(3.75rem - 2px);
    padding: 0 1.875rem;
    vertical-align: middle;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.075rem;
    padding-left: calc(0.075rem + 1.875rem);
    font-size: 1em;
    font-weight: 300;
    border-radius: 0.5rem;
    border: solid 1px #FFFFFF;
    flex-direction: row-reverse;
    justify-content: flex-end;
    background-color: transparent;
    color: #FFFFFF;
    transition: transform 0.25s ease, color 0.25s ease,
                background-color 0.25s ease, border-color 0.25s ease;
}
.buttons-component.style-1 > li > a > svg {
    display: block;
    fill: #FFFFFF;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    min-width: 16px;
    pointer-events: none;
    width: 1.25em;
    margin-left: 1rem;
    margin-right: calc(-0.125em + 0.075rem);
    transition: fill 0.25s ease;
}
.buttons-component.style-1 > li > a > .label {
    direction: var(--site-language-direction);
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: left;
    width: 100%;
}
.buttons-component.style-1 > li > a:hover { transform: scale(1.025); }

/* Button variants */
.buttons-component.instance-2 > li > a.n01 { background-color: #FFFFFF; color: #000000; }
.buttons-component.instance-2 > li > a.n01 > svg { fill: #000000; }

.buttons-component.instance-2 > li > a.n02 { color: #9C8E8E; border-color: #6E2626; }
.buttons-component.instance-2 > li > a.n02 > svg { fill: transparent; }

/* =============================================================================
   Icons Component (social links)
   ============================================================================= */
.icons-component {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--flex-alignment);
    letter-spacing: 0;
    padding: 0;
}
.icons-component > li { position: relative; z-index: 1; }
.icons-component > li > a { align-items: center; display: flex; justify-content: center; }
.icons-component > li > a > svg { display: block; pointer-events: none; position: relative; }
.icons-component > li > a + svg {
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.icons-component > li > a > .label { display: none; }

.icons-component.style-1 { font-size: 1.125em; gap: 1.625rem; }
.icons-component.style-1:not(:first-child) { margin-top: 3rem !important; }
.icons-component.style-1:not(:last-child)  { margin-bottom: 3rem !important; }

.icons-component.style-1 > li > a {
    border-radius: 100%;
    height: 2em;
    width: 2em;
    border: solid 1px #FFFFFF;
    transition: transform 0.5s ease, color 0.5s ease,
                background-color 0.5s ease, border-color 0.5s ease;
}
.icons-component.style-1 > li > a > svg {
    height: 60%;
    width: 60%;
    fill: #FFFFFF;
    transition: fill 0.5s ease;
}
.icons-component.style-1 > li > a + svg {
    transition: transform 0.5s ease, fill 0.5s ease, stroke 0.5s ease;
}
.icons-component.style-1 > li > a:hover { transform: scale(1.165); }
.icons-component.style-1 > li > a:hover + svg { transform: scale(1.165); }

/* =============================================================================
   Responsive — Desktop wide
   ============================================================================= */
@media (max-width: 1920px) {
    body::before { width: calc(100vw - 32rem); }
    .site-main > .inner { --width: 32rem; }
}
@media (max-width: 1680px) {
    html { font-size: 10pt; }
}
@media (max-width: 1280px) {
    body::before { width: calc(100vw - 32rem); }
    html { font-size: 10pt; }
    .site-main > .inner { --width: 32rem; }
}
@media (max-width: 1024px) {
    body::before { width: calc(100vw - 32rem); }
    .site-main > .inner { --width: 32rem; }
}

/* =============================================================================
   Responsive — Mobile (stacked layout)
   ============================================================================= */
@media (max-width: 980px) {
    html { font-size: 9pt; }
    body {
        display: flex;
        flex-direction: column;
        background-color: #1B1C1F;
    }
    body::before {
        flex-grow: 1;
        flex-shrink: 0;
        max-height: 45vh;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .site-main {
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        background-image: linear-gradient(45deg, rgba(27,28,31,1) 0%, rgba(27,28,31,1) 87%);
        background-size: cover;
    }
    .site-main > .inner {
        background: none;
        max-width: 75%;
        width: auto;
        transition: opacity 1.5s ease-in-out 0.125s;
    }
    .site-wrapper {
        height: auto !important;
        min-height: 0;
        padding: 0;
        box-shadow: -0rem -1.75rem 2rem 0rem rgba(0,0,0,0.051);
    }
    body.is-loading .site-main { opacity: 1; transform: none; }
    body.is-loading .site-main > .inner { opacity: 0; }
}

@media (max-width: 736px) {
    html { font-size: 11pt; }
    .site-wrapper { padding: 0; }
    .site-main > .inner {
        --padding-horizontal: 2rem;
        --padding-vertical: 3rem;
        --spacing: 1.75rem;
        max-width: 100%;
    }
    .image-component.instance-1 > .frame { width: 15rem; }
    .text-component.style-2 {
        letter-spacing: 0.153125rem;
        width: calc(100% + 0.153125rem);
        font-size: 2.625em;
        line-height: 1.25;
    }
    .buttons-component.style-1 { gap: 1.5rem; }
    .buttons-component.style-1:not(:first-child) { margin-top: 2.625rem !important; }
    .buttons-component.style-1:not(:last-child)  { margin-bottom: 2.625rem !important; }
    .buttons-component.style-1 > li > a {
        letter-spacing: 0.075rem;
        padding-left: calc(0.075rem + 1.875rem);
        font-size: 1em;
    }
    .buttons-component.style-1 > li > a > svg { width: 1.25em; }
    .icons-component.style-1 { font-size: 1.125em; gap: 1.625rem; }
    .icons-component.style-1:not(:first-child) { margin-top: 2.25rem !important; }
    .icons-component.style-1:not(:last-child)  { margin-bottom: 2.25rem !important; }
}

@media (max-width: 480px) {
    .site-wrapper { padding: 0; }
    .site-main > .inner { --spacing: 1.53125rem; }
    .buttons-component.style-1 { flex-direction: column; flex-wrap: nowrap; }
    .buttons-component.style-1 > li > a { max-width: 100%; width: 100%; }
}

@media (max-width: 360px) {
    .site-wrapper { padding: 0; }
    .site-main > .inner {
        --padding-horizontal: 1.5rem;
        --padding-vertical: 2.25rem;
        --spacing: 1.3125rem;
    }
    .text-component.style-2 { font-size: 2.625em; }
    .buttons-component.style-1 { gap: 1.125rem; }
    .icons-component.style-1 { gap: 1.21875rem; }
}