/* ===================================================================
 * Luther Main Stylesheet (Reduced)
 * ------------------------------------------------------------------ */

/* ===================================================================
 * # SETTINGS
 * ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
 * ## fonts
 * ------------------------------------------------------------------- */
:root {
    --font-1: "Public Sans", sans-serif;
    --font-2: "DM Serif Display", serif;
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* -------------------------------------------------------------------
 * ## colors
 * ------------------------------------------------------------------- */
:root {
    --color-1: hsla(36, 72%, 70%, 1);
    --color-2: hsla(168, 62%, 36%, 1);
    --color-1-lighter: hsla(36, 72%, 90%, 1);
    --color-1-light: hsla(36, 72%, 80%, 1);
    --color-1-dark: hsla(36, 72%, 60%, 1);
    --color-1-darker: hsla(36, 72%, 50%, 1);
    --color-2-lighter: hsla(168, 62%, 56%, 1);
    --color-2-light: hsla(168, 62%, 46%, 1);
    --color-2-dark: hsla(168, 62%, 26%, 1);
    --color-2-darker: hsla(168, 62%, 16%, 1);
    --color-error: hsla(359, 100%, 91%, 1);
    --color-success: hsla(76, 69%, 68%, 1);
    --color-info: hsla(205, 82%, 91%, 1);
    --color-notice: hsla(51, 100%, 80%, 1);
    --color-error-content: hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content: hsla(205, 32%, 31%, 1);
    --color-notice-content: hsla(51, 30%, 30%, 1);
    --color-black: #000000;
    --color-gray-19: #020202;
    --color-gray-18: #040404;
    --color-gray-17: #060607;
    --color-gray-16: #080809;
    --color-gray-15: #0a0b0b;
    --color-gray-14: #0c0d0d;
    --color-gray-13: #0e0f0f;
    --color-gray-12: #101112;
    --color-gray-11: #121314;
    --color-gray-10: #141516;
    --color-gray-9: #2c2c2d;
    --color-gray-8: #434445;
    --color-gray-7: #5b5b5c;
    --color-gray-6: #727373;
    --color-gray-5: #8a8a8b;
    --color-gray-4: #a1a1a2;
    --color-gray-3: #b9b9b9;
    --color-gray-2: #d0d0d0;
    --color-gray-1: #e8e8e8;
    --color-white: #ffffff;
    --color-text: var(--color-gray-4);
    --color-text-dark: var(--color-white);
    --color-text-light: var(--color-gray-7);
    --color-placeholder: var(--color-gray-7);
    --color-btn: var(--color-gray-9);
    --color-btn-text: var(--color-1);
    --color-btn-hover: var(--color-white);
    --color-btn-hover-text: var(--color-black);
    --color-btn-primary: var(--color-1-dark);
    --color-btn-primary-text: var(--color-black);
    --color-btn-primary-hover: var(--color-1-darker);
    --color-btn-primary-hover-text: var(--color-black);
    --color-btn-stroke: var(--color-white);
    --color-btn-stroke-text: var(--color-white);
    --color-btn-stroke-hover: var(--color-white);
    --color-btn-stroke-hover-text: var(--color-black);
    --color-body: var(--color-gray-10);
    --color-border: rgba(255, 255, 255, .05);
    --border-radius: 3px;
}

/* -------------------------------------------------------------------
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {
    --base-size: 62.5%;
    --multiplier: 1;
    --base-font-size: calc(1.9rem * var(--multiplier));
    --space: calc(3.2rem * var(--multiplier));
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25: calc(0.25 * var(--space));
    --vspace-0_375: calc(0.375 * var(--space));
    --vspace-0_5: calc(0.5 * var(--space));
    --vspace-0_625: calc(0.625 * var(--space));
    --vspace-0_75: calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1: calc(var(--space));
    --vspace-1_25: calc(1.25 * var(--space));
    --vspace-1_5: calc(1.5 * var(--space));
    --vspace-1_75: calc(1.75 * var(--space));
    --vspace-2: calc(2 * var(--space));
    --vspace-2_5: calc(2.5 * var(--space));
    --vspace-3: calc(3 * var(--space));
    --vspace-3_5: calc(3.5 * var(--space));
    --vspace-4: calc(4 * var(--space));
    --vspace-4_5: calc(4.5 * var(--space));
    --vspace-5: calc(5 * var(--space));
    --text-scale-ratio: 1.2;
    --text-size: var(--base-font-size);
    --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));
    --vspace-btn: var(--vspace-2);
}

@media screen and (max-width: 600px) {
    :root {
        --multiplier: .875;
    }
}

/* -------------------------------------------------------------------
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {
    --width-full: 100%;
    --width-max: 1200px;
    --width-wide: 1400px;
    --width-wider: 1600px;
    --width-widest: 1800px;
    --width-narrow: 1000px;
    --width-narrower: 800px;
    --width-grid-max: var(--width-max);
    --gutter: 2rem;
}

@media screen and (max-width: 1200px) {
    :root {
        --gutter: 1.6rem;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --gutter: 1rem;
    }
}

/* ====================================================================
 * # NORMALIZE
 * -------------------------------------------------------------------- */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* ===================================================================
 * # BASE SETUP
 * ------------------------------------------------------------------- */
html {
    font-size: var(--base-size);
    box-sizing: border-box;
}

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

html,
body {
    height: 100%;
}

body {
    background-color: var(--color-body);
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-size: inherit;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
}

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

pre { /* Kept for potential future use, though not directly in HTML content */
    overflow: auto;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

/* input[type="email"], ... textarea: (Removed as no forms) */

.no-scroll {
    overflow: hidden;
    padding-right:15px;
}

/* ===================================================================
 * # GRID
 * ------------------------------------------------------------------- */
.row {
    width: 92%;
    max-width: var(--width-grid-max);
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}

.row .row {
    width: auto;
    max-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.column {
    display: block;
    flex: 1 1 0%;
    padding: 0 var(--gutter);
}

/* .collapse>.column, .column.collapse (Not used) */

/* .row utility classes (Keep if any are used, e.g. row-x-center, row-y-center if used by JS or complex layouts) */
/* For simplicity, only keeping essential structure. Add back if specific alignment utilities are needed. */

/* --------------------------------------------------------------------
 * ## large screen devices
 * -------------------------------------------------------------------- */
.lg-3 { flex: none; width: 25%;}
.lg-4 { flex: none; width: 33.33333%;}
.lg-8 { flex: none; width: 66.66667%;}
.lg-12 { flex: none; width: 100%;}

.block-lg-one-half>.column { flex: none; width: 50%;}

/* --------------------------------------------------------------------
 * ## medium screen devices
 * -------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .md-5 { flex: none; width: 41.66667%;}
    .md-12 { flex: none; width: 100%;}
    /* .hide-on-md (Not used) */
}

/* --------------------------------------------------------------------
 * ## tablet devices
 * -------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .tab-6 { flex: none; width: 50%;}
    .tab-12 { flex: none; width: 100%;}
    /* .hide-on-tab (Not used) */
}

/* --------------------------------------------------------------------
 * ## mobile devices
 * -------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .row {
        width: 100%;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .row .row {
        padding-left: 0;
        padding-right: 0;
    }
    /* .mob-X (Not used) */
    /* .hide-on-mob (Not used) */
}

/* --------------------------------------------------------------------
 * ## small screen devices
 * --------------------------------------------------------------------*/
@media screen and (max-width: 400px) {
    .row .row {
        margin-left: 0;
        margin-right: 0;
    }
    .column { /* General stacking rule for columns */
        flex: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    /* .hide-on-sm (Not used) */
}

/* --------------------------------------------------------------------
 * ## additional column stackpoints
 * -------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
    .stack-on-1000, /* Applies to .folio-list__item.stack-on-1000 */
    .block-stack-on-1000>.column { /* Applies to .folio-list.block-stack-on-1000 > .column */
        flex: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 550px) {
    .stack-on-550, /* Applies to .contact-block.stack-on-550 */
    .block-stack-on-550>.column {
        flex: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ===================================================================
 * # UTILITY CLASSES
 * ------------------------------------------------------------------- */
.u-fullwidth {
    width: 100%;
}

/* ===================================================================
 * # TYPOGRAPHY
 * ------------------------------------------------------------------- */
body {
    font-family: var(--font-1);
    font-size: var(--base-font-size);
    font-weight: 300;
    line-height: var(--vspace-1);
    color: var(--color-text);
}

a {
    color: var(--color-1);
    transition: all 0.3s ease-in-out;
}

a:focus,
a:hover,
a:active {
    color: var(--color-2);
}

a:hover,
a:active {
    outline: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-2);
    font-weight: 400;
    color: var(--color-text-dark);
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

h1, .h1 { margin-top: var(--vspace-2_5); margin-bottom: var(--vspace-0_75); }
h2, .h2, h3, .h3, h4, .h4 { margin-top: var(--vspace-2); margin-bottom: var(--vspace-0_5); }
h5, .h5, h6, .h6 { margin-top: var(--vspace-1_5); margin-bottom: var(--vspace-0_5); }

h1, .h1 { font-size: var(--text-display-1); line-height: var(--vspace-2); letter-spacing: -.01em; }
@media screen and (max-width: 500px) {
    h1, .h1 { font-size: var(--text-xxxl); line-height: calc(1.625 * var(--space)); }
}
h2, .h2 { font-size: var(--text-xxl); line-height: var(--vspace-1_5); }
h3, .h3 { font-size: var(--text-xl); line-height: var(--vspace-1_25); }
h4, .h4 { font-size: var(--text-lg); line-height: var(--vspace-1); }
h5, .h5 { font-size: var(--text-md); line-height: var(--vspace-0_875); }
h6, .h6 { font-family: var(--font-1); font-weight: 600; font-size: var(--text-sm); line-height: var(--vspace-0_75); text-transform: uppercase; letter-spacing: .2rem; }

em, i, strong, b { font-size: inherit; line-height: inherit; }
em, i { font-style: italic; }
strong, b { font-weight: 600; }
small { font-size: 75%; font-weight: 400; line-height: var(--vspace-0_5); }

blockquote { margin: 0 0 var(--vspace-1) 0; padding: var(--vspace-1) var(--vspace-1_5); border-left: 2px solid var(--color-text-light); position: relative; }
@media screen and (max-width: 400px) {
    blockquote { padding: var(--vspace-0_75) var(--vspace-0_75); }
}
blockquote p { font-family: var(--font-1); font-weight: 400; font-size: var(--text-lg); font-style: normal; line-height: var(--vspace-1_25); color: var(--color-text-dark); padding: 0; }
blockquote cite { display: block; font-family: var(--font-1); font-weight: 400; font-size: var(--text-sm); line-height: var(--vspace-0_75); font-style: normal; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite, blockquote cite a, blockquote cite a:visited { color: var(--color-text-light); border: none; }

figure img, p img { margin: 0; vertical-align: bottom; }
figure { display: block; margin-left: 0; margin-right: 0; }
/* figure img+figcaption (Not used) */
/* figcaption (Not used) */

var, kbd, samp, code, pre { font-family: var(--font-mono); }
pre { padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1); background: var(--color-gray-9); overflow-x: auto; }
code { font-size: var(--text-sm); line-height: 1.6rem; margin: 0 .2rem; padding: calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem); white-space: nowrap; background: var(--color-gray-9); border: 1px solid var(--color-gray-8); color: var(--color-text-dark); border-radius: 3px; }
pre>code { display: block; white-space: pre; line-height: var(--vspace-1); padding: 0; margin: 0; border: none; }

del { text-decoration: line-through; }
abbr { font-family: var(--font-1); font-weight: 600; font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; text-decoration: none; }
mark { background: var(--color-white); color: var(--color-black); }

hr { border: solid var(--color-border); border-width: .1rem 0 0; clear: both; margin: var(--vspace-2) 0 calc(var(--vspace-2) - 1px); height: 0; }
/* hr.fancy (Not used) */

.attention-getter {
    font-family: var(--font-1);
    font-weight: 300;
    font-size: var(--text-md);
    line-height: var(--vspace-1_25);
    color: var(--color-text-dark);
}

ul { list-style: disc; } /* Default for used ULs */
li { display: list-item; }
ol, ul { margin-left: 1.6rem; } /* Applied to skills-list, intro-social, folio-list, modal-popup__cat, contact-social */
ul li { padding-left: .4rem; } /* Fine for default UL item padding */
ul ul, ul ol, ol ol, ol ul { margin: 1.6rem 0 1.6rem 1.6rem; } /* For nested lists, if any */

dt { margin: 0; color: var(--color-1); } /* Keep for potential future definition lists */
dd { margin: 0 0 0 2rem; }

/* Spacing */
button, .btn { margin-bottom: var(--vspace-0_5); }
pre, blockquote, figure, p, ul, img { margin-bottom: var(--vspace-1); } /* Simplified from original list */


/* ===================================================================
 * # BUTTONS
 * ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    --btn-height: var(--vspace-btn);
    display: inline-block;
    font-family: var(--font-1);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .35em;
    height: var(--btn-height);
    line-height: calc(var(--btn-height) - 2px);
    padding: 0 3.6rem;
    margin: 0 0.4rem var(--vspace-0_5) 0;
    color: var(--color-btn-text);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
    background-color: var(--color-btn);
    border: 1px solid var(--color-btn);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus,
.btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    background-color: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
    color: var(--color-btn-hover-text);
    outline: 0;
}

.btn.u-fullwidth,
button.u-fullwidth {
    width: 100%;
    margin-right: 0;
}

.btn--medium,
button.btn--medium {
    --btn-height: calc(var(--vspace-btn) + .8rem);
}

/* ===================================================================
 * # PROJECT-WIDE SHARED STYLES
 * ------------------------------------------------------------------- */
.wide {
    max-width: var(--width-wide);
}

[data-animate-el] {
    /* opacity : 0; */ /* Kept as original, assuming GSAP handles it */
}

.text-pretitle {
    font-family: var(--font-1);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .3em;
    margin-top: 0;
    margin-left: .2rem;
    margin-bottom: var(--vspace-0_5);
    position: relative;
}

.text-pretitle.with-line {
    color: var(--color-1);
    padding-left: 6rem;
    transform: translateX(-6rem);
}

.text-pretitle.with-line::before {
    content: "";
    display: block;
    height: 1px;
    width: 4rem;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 50%;
    left: 0;
}

.text-huge-title {
    --text-huge: 9.8rem;
    font-size: var(--text-huge);
    line-height: 1.0740;
    margin-top: 0;
}

/* MailtoUI style overrides */
.mailtoui-modal {
    --mailtoui-modal-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.08);
    --mailtoui-modal-head-bgcolor: var(--color-gray-18);
    --mailtoui-modal-head-title-color: white;
    --mailtoui-modal-body-bgcolor: var(--color-gray-11);
    --mailtoui-button-bgcolor: rgba(255, 255, 255, .04);
    --mailtoui-button-text-color: white;
    --mailtoui-button-bgcolor-hover: var(--color-1-dark);
    --mailtoui-button-text-color-hover: black;
    --mailtoui-button-text-size: 16px;
    --mailtoui-email-address-bgcolor: var(--color-gray-13);
    --mailtoui-email-address-text-color: var(--text-color); /* Assuming --text-color is defined, if not, use a fallback like var(--color-text) */
    /* --border-radius: 0; */ /* This was in original MailtoUI, but local --border-radius is 3px. Keeping local. */
    font-family: var(--font-1);
    background-color: var(--color-body); /* Fallback, or ensure this is what's intended */
    color: white;
}
.mailtoui-modal-content { background-color: var(--mailtoui-modal-body-bgcolor); border-radius: var(--border-radius); box-shadow: var(--mailtoui-modal-box-shadow); }
.mailtoui-modal-content button { font-weight: 400; font-size: 16px; margin: 0; padding: 0; }
.mailtoui-modal-head { background-color: var(--mailtoui-modal-head-bgcolor); }
.mailtoui-modal-title { font-family: var(--font-1); font-weight: 400; font-size: 16px; color: var(--mailtoui-modal-head-title-color); }
.mailtoui-modal-close { font: 0/0 a; text-shadow: none; color: transparent; font-size: 32px; font-weight: 300; color: rgba(255, 255, 255, 0.5); }
.mailtoui-modal-close:hover, .mailtoui-modal-close:focus { color: white; font-weight: 300; }
.mailtoui-modal-body { background-color: var(--mailtoui-modal-body-bgcolor); }
.mailtoui-button-text { font-size: var(--mailtoui-button-text-size); text-transform: none; letter-spacing: 0; }
.mailtoui-button:focus .mailtoui-button-content { background-color: var(--mailtoui-button-bgcolor-hover); color: var(--mailtoui-button-text-color-hover); }
.mailtoui-button-content, .mailtoui-button-copy { background-color: var(--mailtoui-button-bgcolor); color: var(--mailtoui-button-text-color); border-radius: var(--border-radius); box-shadow: none; }
.mailtoui-button-content:hover, .mailtoui-button-content:focus, .mailtoui-button-copy:hover, .mailtoui-button-copy:focus { background-color: var(--mailtoui-button-bgcolor-hover); color: var(--mailtoui-button-text-color-hover); }
.mailtoui-copy { border-radius: var(--border-radius); box-shadow: none; }
.mailtoui-button-icon-copy { line-height: var(--vspace-1); }
.mailtoui-button-copy-clicked, .mailtoui-button-copy-clicked:hover, .mailtoui-button-copy-clicked:focus { background-color: #1F9D55; color: white; }
.mailtoui-email-address { background-color: var(--mailtoui-email-address-bgcolor); color: var(--mailtoui-email-address-text-color); font-size: 16px; line-height: 1; border-radius: var(--border-radius); }
.mailtoui-brand a { color: rgba(255, 255, 255, 0.12); }
.mailtoui-brand a:focus, .mailtoui-brand a:hover { font-weight: 300; color: white; }

@media screen and (max-width: 800px) {
    .text-pretitle.with-line {
        padding-left: 3rem;
        transform: none; /* Adjusted from translateX(-3rem) to none based on original */
    }
    .text-pretitle.with-line::before {
        width: 2rem;
    }
}

/* ===================================================================
 * # PAGE WRAP
 * ------------------------------------------------------------------- */
.s-pagewrap {
    --circle-width: 70vw;
    --header-height: 6.4rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

.s-pagewrap .circles,
.s-pagewrap .circles span {
    position: absolute;
}
.s-pagewrap .circles {
    width: var(--circle-width);
    height: var(--circle-width);
    top: calc(100vh - var(--circle-width));
    left: calc(100% - 33vw);
}
.s-pagewrap .circles span { display: block; border: 1px solid var(--color-1); border-radius: 50%; opacity: .1; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.s-pagewrap .circles span:nth-child(1) { height: 100%; width: 100%; }
.s-pagewrap .circles span:nth-child(2) { height: 80%; width: 80%; }
.s-pagewrap .circles span:nth-child(3) { height: 60%; width: 60%; }
.s-pagewrap .circles span:nth-child(4) { height: 40%; width: 40%; }
.s-pagewrap .circles span:nth-child(5) { height: 20%; width: 20%; }

/* .ss-preload .s-pagewrap (Kept for initial load behavior) */
.ss-preload .s-pagewrap {
    /* visibility: hidden; */ /* Original was commented, keeping it so */
}

@media screen and (max-width: 800px) {
    .s-pagewrap .circles {
        top: calc(var(--header-height) + 5vh);
    }
}

/* ===================================================================
 * # SITE HEADER
 * ------------------------------------------------------------------- */
.s-header {
    --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06);
    z-index: 100;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.header-mobile {
    z-index: 101;
    display: none;
    height: var(--header-height);
    background-color: var(--color-body);
    box-shadow: var(--box-shadow);
    border-bottom: 1px solid var(--color-border);
}

/* Main Navigation */
.main-nav a { /* Combined .mobile-home-link a and .main-nav a as they are very similar */
    display: block;
    font-size: 10px;
    font-weight: 400;
    line-height: var(--header-height);
    text-transform: uppercase;
    letter-spacing: .35em;
    color: white;
    transition-property: color, background-color;
    transition-duration: 0.3s; /* Added for consistency */
    transition-timing-function: ease-in-out; /* Added for consistency */
}
.main-nav a:focus,
.main-nav a:hover {
    color: var(--color-1);
}
.main-nav { padding: 0; }
.main-nav a { padding: 0 2rem 0 2.4rem; }
.main-nav .current a { background-color: var(--color-gray-9); }
.main-nav ul { list-style: none; display: flex; flex-flow: row nowrap; margin: 0; padding: 0; background-color: var(--color-body); border-width: 1px; border-color: var(--color-border); border-style: none solid solid solid; }
.main-nav li { flex: 1 1 0%; padding-left: 0; border-right: 1px solid var(--color-border); }
.main-nav li:last-child { border-right: none; }

/* Mobile Menu Toggle */
.mobile-menu-toggle { display: block; width: var(--header-height); height: var(--header-height); position: absolute; top: 0; right: .8rem; }
.mobile-menu-toggle span { display: block; background-color: white; width: 24px; height: 1px; margin-top: -1px; font: 0/0 a; text-shadow: none; color: transparent; position: absolute; right: 20px; top: 50%; bottom: auto; left: auto; transition: background-color 0.2s ease-in-out; }
.mobile-menu-toggle span::before, .mobile-menu-toggle span::after { content: ""; width: 100%; height: 100%; background-color: inherit; transition-duration: 0.2s, 0.2s; transition-delay: 0.2s, 0s; position: absolute; left: 0; }
.mobile-menu-toggle span::before { top: -8px; transition-property: top, transform; }
.mobile-menu-toggle span::after { bottom: -8px; transition-property: bottom, transform; }
.mobile-menu-toggle.is-clicked span { background-color: rgba(255, 255, 255, 0); }
.mobile-menu-toggle.is-clicked span::before, .mobile-menu-toggle.is-clicked span::after { background-color: white; transition-delay: 0s, 0.2s; }
.mobile-menu-toggle.is-clicked span::before { top: 0; transform: rotate(45deg); }
.mobile-menu-toggle.is-clicked span::after { bottom: 0; transform: rotate(-45deg); }

@media screen and (max-width: 1000px) {
    .main-nav-wrap { width: 100%; }
}
@media screen and (max-width: 800px) {
    .s-header { height: var(--header-height); }
    .header-mobile { display: block; }
    .main-nav-wrap { transform: scaleY(0); transform-origin: center top; background-color: var(--color-body); border-bottom: 1px solid var(--color-border); box-shadow: var(--box-shadow); }
    .main-nav { padding: var(--vspace-1) 0 var(--vspace-1_5); transform: translateY(-2rem); opacity: 0; visibility: hidden; }
    .main-nav a { font-family: var(--font-2); font-size: var(--text-md); font-weight: 400; line-height: var(--vspace-0_875); text-transform: none; letter-spacing: 0; padding: var(--vspace-0_5) 2.8rem; color: var(--color-text); }
    .main-nav a:focus, .main-nav a:hover { color: white; }
    .main-nav .current a { background-color: transparent; color: var(--color-1); }
    .main-nav ul { display: block; background-color: transparent; text-align: left; margin: 0; border: none; }
    .main-nav ul li { display: block; border: none; }
    .main-nav ul li:first-child { display: none; } /* Assuming this hides a "Home" link duplicated by a logo */
    .menu-is-open .s-header { height: auto; }
    .menu-is-open .header-mobile { box-shadow: none; }
    .menu-is-open .main-nav-wrap { transform: scaleY(1); transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 0s; }
    .menu-is-open .main-nav { transform: translateY(0); opacity: 1; visibility: visible; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: .4s; }
}
@media screen and (max-width: 600px) {
    .main-nav-wrap { padding: 0; }
}

/* ===================================================================
 * # INTRO
 * ------------------------------------------------------------------- */
.s-intro {
    --gutter: 6rem;
    --text-huge-multiplier: 1;
    position: relative;
}
.intro-content { min-height: calc(25.5 * var(--space)); justify-content: center; align-items: center; padding-top: calc(16vh + var(--header-height)); padding-bottom: var(--vspace-3); }
.intro-content .text-huge-title { font-size: calc(var(--text-huge) * var(--text-huge-multiplier)); padding-right: 5vw; }

.intro-social { z-index: 1; list-style: none; display: flex; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: .3em; margin: 0; padding: 0 0 0 9.6rem; transform: rotate(-90deg) translateX(-50%); transform-origin: left bottom; position: absolute; top: 50%; left: calc(100% - 6rem); }
.intro-social li { padding: 0 1.2rem; }
.intro-social a { color: var(--color-text-light); }
.intro-social a:focus, .intro-social a:hover { color: white; }

.intro-scrolldown { display: block; height: var(--vspace-1); width: var(--vspace-1); display: flex; justify-content: center; align-items: center; position: absolute; bottom: 4.8rem; right: 5.8rem; }
.intro-scrolldown svg { height: var(--vspace-0_75); width: var(--vspace-0_75); }
.intro-scrolldown svg path { fill: white; transition: all .3s ease-in-out; }
.intro-scrolldown:focus svg path, .intro-scrolldown:hover svg path { fill: var(--color-1); }

@media screen and (max-width: 1600px) { .s-intro { --text-huge-multiplier: .92; } }
@media screen and (max-width: 1200px) { .s-intro { --text-huge-multiplier: .85; } .intro-social { left: calc(100% - 4rem); } .intro-scrolldown { right: 4rem; } }
@media screen and (max-width: 1000px) { .s-intro { --text-huge-multiplier: .8; } .intro-content { padding-top: calc(14vh + var(--header-height)); } }
@media screen and (max-width: 900px) { .s-intro { --text-huge-multiplier: .75; } .intro-content .text-huge-title br { display: none; } }
@media screen and (max-width: 800px) { .s-intro { --gutter: 4rem; --text-huge-multiplier: .7; } .intro-content { min-height: 0; align-items: flex-start; padding-top: calc(9.6rem + var(--header-height)); } .intro-content .text-huge-title { padding-right: 0; margin-bottom: var(--vspace-1_5); } .intro-social { width: 100%; flex-wrap: wrap; padding-left: 0; padding-right: 8rem; transform: none; position: relative; left: var(--gutter); } .intro-social li { padding: 0 .6rem; } }
@media screen and (max-width: 600px) { .s-intro { --gutter: 2rem; --text-huge-multiplier: .58; } .intro-scrolldown { right: 2.4rem; } }
@media screen and (max-width: 500px) { .s-intro { --text-huge-multiplier: .55; } .intro-social { left: 1.4rem; } }
@media screen and (max-width: 400px) { .intro-content .text-huge-title { font-size: var(--text-display-1); line-height: var(--vspace-2); } .intro-social { left: 0; } }
@media screen and (max-width: 350px) { .intro-social { display: none; } }

/* ===================================================================
 * # ABOUT
 * ------------------------------------------------------------------- */
.s-about { /* padding-top: var(--vspace-4); padding-bottom: var(--vspace-3); */ } /* Original paddings commented out */
.about-info { --gutter: 0; width: 100%; align-items: center; } /* --gutter local override for this specific row */
.about-info__pic { object-fit: cover; margin: 0; vertical-align: bottom; }
.about-info__text { padding: var(--vspace-3_5) 10vw var(--vspace-2) 0; margin-left: -4rem; }
.about-info__text .text-pretitle { margin-bottom: var(--vspace-1); }
.about-info__text .btn { margin-top: var(--vspace-1); margin-bottom: 0; }

.about-expertise { padding-top: calc(4 * var(--space)); }
.about-expertise .skills-list { list-style: none; margin-top: var(--vspace-1); margin-left: 0; }
.about-expertise .skills-list li { display: inline-block; padding-left: 0; }
.about-expertise .skills-list li:not(:last-child)::after { content: ", "; }

.about-timelines { --timeline-left-padding: var(--vspace-1_75); --timeline-top-adjust: var(--vspace-0_5); padding-top: var(--vspace-3); }
.about-timelines .text-pretitle { margin-left: var(--timeline-left-padding); }
.timeline { margin-top: var(--vspace-1_25); padding-right: 1vw; position: relative; }
.timeline::before { content: ""; display: block; width: 1px; height: calc(100% - var(--timeline-top-adjust)); background-color: var(--color-border); position: absolute; top: var(--timeline-top-adjust); left: 3px; }
.timeline__block { padding-left: var(--timeline-left-padding); padding-bottom: var(--vspace-0_5); position: relative; }
.timeline__block:last-child { padding-bottom: 0; }
.timeline__bullet { display: block; height: 8px; width: 8px; border-radius: 50%; background-color: var(--color-1); position: absolute; top: var(--timeline-top-adjust); left: 0; }
.timeline__title { font-family: var(--font-1); font-weight: 500; font-size: var(--text-lg); margin-top: 0; margin-bottom: var(--vspace-0_125); }
.timeline__meta { font-family: var(--font-1); font-weight: 300; font-size: calc(var(--text-size) * 1.1053); margin-top: 0; margin-bottom: var(--vspace-0_125); }
.timeline__timeframe { font-size: var(--text-xs); line-height: var(--vspace-0_75); text-transform: uppercase; letter-spacing: .2em; color: var(--color-text-light); margin-top: -.2rem; }
/* .timeline__desc is styled by base p styles */

@media screen and (max-width: 1300px) { .about-info__text { padding: var(--vspace-2) 8rem var(--vspace-1_5) 0; } }
@media screen and (max-width: 1200px) { .about-info { --gutter: 1.6rem; width: 92%; max-width: 800px; } .about-info__text { padding: var(--vspace-1) 0 0 0; margin-left: 0; } }
@media screen and (max-width: 1000px) { .about-timelines { --timeline-left-padding: var(--vspace-1_25); } }
@media screen and (max-width: 800px) { .about-timelines { --timeline-left-padding: var(--vspace-1_5); } .about-timelines .column+.column { margin-top: var(--vspace-1_5); } }
@media screen and (max-width: 600px) { .about-info { width: 100%; } }
@media screen and (max-width: 400px) { .about-timelines { --timeline-left-padding: var(--vspace-1); } }

/* ===================================================================
 * # WORKS
 * ------------------------------------------------------------------- */
.s-works { padding-top: var(--vspace-4); /* padding-bottom: var(--vspace-3_5); */ }
.s-works .h1 { margin-top: 0; }

.folio-list { --item-min-height: var(--vspace-4_5); list-style: none; margin-top: var(--vspace-4); margin-bottom: var(--vspace-1); margin-left: 0; }
.folio-list__item { margin-bottom: var(--vspace-1); position: relative; }
.folio-list__item-link { display: block; width: 100%; padding-left: calc(5.5 * var(--space)); color: white; transition-duration: .5s; position: relative; }
.folio-list__item-link:focus, .folio-list__item-link:hover { color: var(--color-1); outline: 0; }
.folio-list__item-link:focus .folio-list__item-pic::before, .folio-list__item-link:hover .folio-list__item-pic::before { opacity: 1; visibility: visible; }
.folio-list__item-link:focus .folio-list__item-pic::after, .folio-list__item-link:hover .folio-list__item-pic::after { opacity: 1; visibility: visible; transform: scale(1); }
.folio-list__item-link:focus .folio-list__item-text::before, .folio-list__item-link:hover .folio-list__item-text::before { width: 100%; }
.folio-list__item-pic { display: block; position: absolute; top: 0; left: 0; }
.folio-list__item-pic img { vertical-align: bottom; object-fit: cover; width: var(--item-min-height); height: var(--item-min-height); margin: 0; }
.folio-list__item-pic::before, .folio-list__item-pic::after { transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
.folio-list__item-pic::before { z-index: 1; content: ""; display: block; background-color: rgba(255, 255, 255, 0.75); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; }
.folio-list__item-pic::after { z-index: 2; display: block; content: "+"; font-family: var(--font-1); font-weight: 300; font-size: 2.2rem; color: black; text-align: center; height: var(--vspace-1); width: var(--vspace-1); line-height: var(--vspace-1); transform: scale(0.2); opacity: 0; visibility: hidden; position: absolute; top: calc(50% - var(--vspace-0_5)); left: calc(50% - var(--vspace-0_5)); }
.folio-list__item-text::before, .folio-list__item-title, .folio-list__item-cat { transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
.folio-list__item-text { padding-top: var(--vspace-0_5); border-top: 1px solid var(--color-border); min-height: var(--item-min-height); position: relative; }
.folio-list__item-text::before { content: ""; display: block; width: 0; height: 1px; background-color: var(--color-text-light); position: absolute; top: 0; left: 0; }
.folio-list__item-title { font-family: var(--font-1); font-weight: 500; font-size: var(--text-md); }
.folio-list__item-cat { font-size: var(--text-sm); color: var(--color-text-light); line-height: var(--vspace-0_75); margin-left: .2rem; }

/* .folio-list__proj-link (Commented out in HTML, kept styles in case it's re-enabled) */
.folio-list__proj-link { display: block; height: var(--vspace-1); width: var(--vspace-1); position: absolute; top: .8rem; right: var(--vspace-0_75); }
.folio-list__proj-link svg { height: var(--vspace-0_5); width: var(--vspace-0_5); transform: translate(-50%, -50%) rotate(-45deg); position: absolute; top: 50%; left: 50%; }
.folio-list__proj-link svg path { fill: white; }
.folio-list__proj-link:hover { transform: scale(1.2); }

/* Modal Popup */
.modal { z-index: 102; display: flex; inset: 0; position: fixed; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.8); }
.modal.hidden { display: none; }
.modal::after { content: ""; position: absolute; top: 1.8rem; right: 1.8rem; width: 2em; height: 2em; background: url(../images/icons/icon-close.svg); background-position: center; background-size: 1.8rem 1.8rem; background-repeat: no-repeat; cursor: pointer; }
.modal-popup { max-width: 680px; max-height: 700px; overscroll-behavior: contain; background-color: white; font-size: calc(var(--text-size) * 0.9447); line-height: var(--vspace-0_875); color: rgba(0, 0, 0, 0.75); overflow-y: auto; position: relative; }
.modal-popup img, .modal-popup__video { margin-bottom: var(--vspace-0_75); justify-content: center; align-items: center; display: flex; aspect-ratio:16/9; }
.modal-popup__video .video-js { width:100%; height:100%; }
/* .my-video-dimensions (Applied to .video-js in original CSS, this is effectively merged with .video-js styling for aspect ratio) */
.modal-popup__video .video-js { aspect-ratio:16/9 !important; }
.modal-popup h5 { font-family: var(--font-1); font-size: var(--text-size); line-height: var(--vspace-1); font-weight: 500; margin-top: 0; margin-bottom: var(--vspace-0_25); color: black; }
.modal-popup__desc { padding: 0 var(--vspace-1_25) var(--vspace-0_25); font-size: medium; }
.modal-popup__desc p { margin-bottom: var(--vspace-0_5); }
.modal-popup__desc h6 { font-style: italic; margin-top: 0; margin-bottom: 0; color: black; text-transform: none; font-weight: initial; }
.modal-popup__cat { list-style: none; margin-left: 0; font-size: var(--text-sm); line-height: var(--vspace-0_5); color: rgba(0, 0, 0, 0.6); margin-top: var(--vspace-1); padding-left: calc(0.875 * var(--space)); position: relative; }
.portfolio__cat { color: grey !important; font-style: italic; }
.modal-popup__cat::before { content: ""; display: block; height: calc(0.625 * var(--space)); width: calc(0.625 * var(--space)); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../images/icons/icon-tag.svg); position: absolute; left: 0; top: -0.15em; }
.modal-popup__cat li { display: inline; padding-left: 0; }
.modal-popup__cat li::after { content: " | "; }
.modal-popup__cat li:last-child::after { display: none; }
.modal-popup__details { background-color: rgba(0, 0, 0, 0.3); font-size: var(--text-xs); line-height: var(--vspace-1_25); color: white; padding: 0 1.2rem; position: absolute; top: var(--vspace-1); left: var(--vspace-1); }
.modal-popup__details:focus, .modal-popup__details:hover { background-color: var(--color-body); color: white; }

@media screen and (max-width: 1200px) { .folio-list__item-title { font-size: var(--text-md); line-height: var(--vspace-0_875); } .folio-list__item-cat { font-size: var(--text-xs); } }
@media screen and (max-width: 1000px) { .folio-list__item-title { font-size: var(--text-lg); line-height: var(--vspace-1); } .folio-list__item-cat { font-size: var(--text-sm); } }
@media screen and (max-width: 800px) { .s-works { padding-top: var(--vspace-4); padding-bottom: var(--vspace-3); } }
@media screen and (max-width: 600px) { .folio-list__item-title { font-size: var(--text-md); line-height: var(--vspace-0_875); } .folio-list__proj-link { right: var(--vspace-0_5); } }
@media screen and (max-width: 500px) {
    .folio-list { --item-min-height: var(--vspace-3_5); }
    .folio-list__item { margin-bottom: var(--vspace-0_75); }
    .folio-list__item-link { padding-left: calc(4.25 * var(--space)); }
}
@media screen and (max-width: 400px) {
    /* Removed rules that made .folio-list a grid of images without text. */
    /* .folio-list__item (which is a .column) will take full width due to general .column rule at this breakpoint. */
    /* Styles from max-width: 500px (for padding-left, image size via --item-min-height) will now apply, ensuring list view. */
    .modal-popup__desc { padding: 0 var(--vspace-1) var(--vspace-0_25); }
}

/* ===================================================================
 * # CONTACT
 * ------------------------------------------------------------------- */
.contact-top { padding-top: var(--vspace-5); border-top: 1px solid var(--color-border); }
.contact-top .h1 { margin-top: 0; }
.contact-bottom { padding-bottom: var(--vspace-3); margin-top: var(--vspace-3); border-bottom: 1px solid var(--color-border); }
.contact-bottom .text-pretitle { margin-bottom: var(--vspace-0_125); }
.contact-links, .contact-social { font-size: var(--text-md); font-weight: 300; line-height: var(--vspace-1_25); color: var(--color-text-light); }
.contact-links a, .contact-social a { color: var(--color-text-light); }
.contact-links a:focus, .contact-links a:hover, .contact-social a:focus, .contact-social a:hover { color: var(--color-1); }
.contact-social { list-style: none; margin-left: 0; }
.contact-social li { display: inline-block; padding-left: 0; }
.contact-social li::after { content: ",  "; }
.contact-social li:last-child::after { display: none; }
.contact-btn { margin-left: auto; margin-right: 5vw; }

@media screen and (max-width: 1200px) { .contact-btn { margin-top: var(--vspace-0_5); margin-left: 0; margin-right: 0; } }
@media screen and (max-width: 800px) { .contact-top { padding-top: var(--vspace-4); } }

/* ===================================================================
 * # FOOTER
 * ------------------------------------------------------------------- */
.s-footer { margin-top: auto; padding-top: var(--vspace-1); padding-bottom: var(--vspace-3); color: var(--color-text-light); }
.s-footer>.row { position: relative; }
.s-footer a { color: var(--color-text); }
.s-footer a:focus, .s-footer a:hover { color: white; }

.ss-copyright { margin-top: calc(var(--vspace-0_25) * -1); margin-right: 5.2rem; line-height: var(--vspace-0_875); }
.ss-copyright span { font-size: var(--text-sm); display: inline-block; }
.ss-copyright span::after { content: "|"; display: inline-block; padding: 0 .8rem 0 1rem; color: rgba(255, 255, 255, 0.1); }
.ss-copyright span:last-child::after { display: none; }

.ss-go-top { z-index: 2; position: absolute; top: calc(var(--vspace-1) * -1); right: var(--gutter); }
.ss-go-top a { display: flex; align-items: center; justify-content: center; text-decoration: none; border: 0 none; height: calc(1.625 * var(--space)); width: var(--vspace-1_5); background-color: var(--color-body); position: relative; border: 1px solid var(--color-text); }
.ss-go-top a:focus, .ss-go-top a:hover { background-color: white; border-color: white; }
.ss-go-top a:focus svg path, .ss-go-top a:hover svg path { fill: black; }
.ss-go-top svg { height: var(--vspace-0_5); width: var(--vspace-0_5); transition: all 0.3s ease-in-out; }
.ss-go-top svg path { fill: white; }

@media screen and (max-width: 600px) { .ss-copyright span { display: block; } .ss-copyright span::after { display: none; } .ss-go-top { top: calc(var(--vspace-0_25) * -1); right: calc(6vw + var(--gutter)); } }
@media screen and (max-width: 400px) { .ss-go-top { right: 6vw; } }