@font-face {
    font-family: "Quando";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Quando-Regular"),
        
        url("/assets/PH1InQe0rvp-yN3TzIuyyQ.d87c2b6e54350ec2.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F,
        U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Quicksand Regular"),
        local("Quicksand-Regular"),
        
        url("/assets/6xKtdSZaM9iE8KbpRA-hK1QN.067e74fbff616dcf.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}





article.about-page {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}


.about-hero {
    text-align: center;
    margin: 16px auto 40px;
    padding: 0 8px;
}

.about-hero h2 {
    margin: 0;
    font-size: 2.6em;
    line-height: 1.05;
}


.about-tagline {
    font-size: 1.05em;
    line-height: 1.4;
    font-weight: 500;
    color: #555;
    max-width: 700px;
    margin: 10px auto 0;
    text-align: center;
}


.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.pill-list li {
    background: #fff7f6;
    border: 1px solid #ffd9d3;
    color: #b53a2b;
    padding: 6px 12px 5px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.7px;
    border-radius: 24px;
    text-transform: uppercase;
    white-space: normal;
}


.fact-badges .fact {
    background: #fff7f6;
    border: 1px solid #ffe3dd;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.fact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}


.exp-bullets {
    list-style: disc;
    margin-left: 1.25em;
}

.exp-title {
    font-weight: 600;
}

.exp-dates,
.exp-company {
    font-size: 0.75em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.75;
}


.lang-block {
    font-size: 0.8em;
}


.header-cta {
    text-align: center;
}

.header-cta a {
    display: inline-block;
    background: #d64937;
    color: #fff;
    padding: 10px 22px 9px;
    border-radius: 28px;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(214, 73, 55, 0.45);
}


@media (max-width: 640px) {
    article.about-page {
        padding: 0 18px;
    }

    .about-hero h2 {
        font-size: 2.05em;
    }

    .about-tagline {
        font-size: 0.95em;
    }

    .pill-list li,
    .fact-badges .fact {
        font-size: 0.64em;
        padding: 5px 10px 4px;
    }

    .exp-bullets {
        font-size: 0.82em;
    }

    .exp-title {
        font-size: 0.9em;
    }

    .exp-dates,
    .exp-company {
        font-size: 0.58em;
    }

    .lang-block {
        font-size: 0.66em;
    }
}


.mt-4 {
    margin-top: 4px;
}

.mt-64 {
    margin-top: 64px;
}

.center {
    text-align: center;
}

.pill-neutral {
    background: #f9f9f9;
    border: 1px solid #eee;
    color: #666;
    padding: 6px 12px 5px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.7px;
    border-radius: 24px;
    text-transform: uppercase;
}

.connect-grid.stretch {
    align-items: stretch;
}

.no-top-margin {
    margin-top: 0;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

.btn-primary,
.btn-secondary,
.btn-outline {
    text-decoration: none;
    padding: 9px 18px 8px;
    border-radius: 24px;
    font-size: 0.75em;
    letter-spacing: 1px;
    font-weight: 600;
    display: inline-block;
}

.btn-primary {
    background: #d64937;
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(214, 73, 55, 0.45);
    border: none;
}

.btn-secondary {
    background: #fff7f6;
    color: #b53a2b;
    border: 1px solid #ffd9d3;
}

.btn-outline {
    background: #ffffff;
    color: #d64937;
    border: 1px solid #d64937;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
    filter: brightness(1.05);
}

.author {
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 1.05em;
    font-weight: 600;
}

* {
    -webkit-tap-highlight-color: transparent;
}


article h1,
section h1,
main h1,
aside h1,
nav h1 {
    font-size: 2.5rem;
    
    line-height: 1.1;
}



blockquote {
    color: #666666;
    margin: 0;
    padding-left: 3em;
    border-left: 0.5em #eee solid;
    font-size: 1.5em;
}

.footnote-back {
    margin-left: 16px;
}



hr {
    width: 820px;
    transform: translateX(-45px);
    display: block;
    height: 1px;
    border: 0;
    border-top: 3px solid #eee;
    
    margin-top: 2.1em;
    margin-bottom: 2.1em;
    padding: 0;
}

ul li p {
    margin-left: 6px;
}

pre,
code,
kbd,
samp {
    color: #000;
    font-family: monospace, monospace;
    
    font-size: 0.98em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul,
ol {
    margin: 0.5em 0;
    padding: 0 0 0 2.1em;
}

li p:last-child {
    margin-bottom: 0;
}

ul ul,
ol ol {
    margin: 0.3em 0;
}

dl {
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding: 16px 16px;
    border: 1px solid #eee;
    border-radius: 21px;
    filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.1));
}

dt {
    font-weight: bold;
    margin-left: 0.8em;
    margin-bottom: 0.8em;
    font-size: 1.25em;
}

dd {
    margin: 0 0 0.8em 2em;
}

dd:last-child {
    margin-bottom: 0;
}

figure {
    display: block;
    text-align: center;
    margin: 1.5em 0;
}




figcaption {
    font-size: 0.8em;
    font-style: italic;
    margin: 0 0 0.8em;
}

table {
    margin-bottom: 2em;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-spacing: 0;
    border-collapse: collapse;
}

table th {
    padding: 0.2em 1em;
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

table td {
    padding: 0.2em 1em;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    vertical-align: top;
}




html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    color: #444;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    
    font-family: "Quicksand";
    font-weight: 400;
    
    background: white;
    background-position: center;
    background-size: cover;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.nav {
    padding: 8px;
}

.logo {
    float: left;
    padding: 8px;
    margin-left: 32px;
    margin-top: 2px;
}

.logo a,
.logo a:hover,
.logo a:active {
    color: #d64937;
    font-family: "Quando";
    
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 1px;
    
    text-decoration: none;
}

.nav ul {
    float: right;
}

.nav ul li {
    display: inline-block;
    
}

.nav ul li:not(:first-child) {
    margin-left: 48px;
}

.nav ul li:last-child {
    
    margin-right: 3vw;
}

.nav ul li a {
    display: inline-block;
    outline: none;
    color: #d64937;
    font-family: "Quicksand";
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1.2px;
    font-weight: 600;
}


@media screen and (max-width: 864px) {
    .logo {
        
        padding: 0;
        margin-top: 10px;
        margin-left: 0vw;
    }

    .nav-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #fff;
        opacity: 0;
        transition: all 0.2s ease;
    }

    .nav-wrapper ul {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }

    .nav-wrapper ul li {
        display: block;
        float: none;
        width: 90%;
        text-align: right;
        margin-bottom: 10px;
    }

    .nav-wrapper ul li:nth-child(1) a {
        transition-delay: 0.2s;
    }

    .nav-wrapper ul li:nth-child(2) a {
        transition-delay: 0.3s;
    }

    .nav-wrapper ul li:nth-child(3) a {
        transition-delay: 0.4s;
    }

    .nav-wrapper ul li:nth-child(4) a {
        transition-delay: 0.5s;
    }

    
    
    .nav-wrapper ul li:not(:first-child) {
        margin-left: 0;
    }

    .nav-wrapper ul li a {
        padding: 10px 24px;
        opacity: 0;
        color: #d64937;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1.2px;
        transform: translateX(-20px);
        transition: all 0.2s ease;
    }

    .nav-btn {
        position: fixed;
        background: white;
        
        right: 5vw;
        top: 10px;
        display: block;
        width: 48px;
        height: 48px;
        cursor: pointer;
        z-index: 9999;
        border-radius: 50%;
    }

    .nav-btn i {
        display: block;
        width: 20px;
        height: 2px;
        background: #d64937;
        border-radius: 2px;
        margin-left: 14px;
    }

    .nav-btn i:nth-child(1) {
        margin-top: 16px;
    }

    .nav-btn i:nth-child(2) {
        margin-top: 4px;
        opacity: 1;
    }

    .nav-btn i:nth-child(3) {
        margin-top: 4px;
    }

    hr {
        width: 100%;
        transform: translateX(0);
    }
}

#nav:checked+.nav-btn {
    transform: rotate(45deg);
}

#nav:checked+.nav-btn i {
    background: #d64937;
    transition: transform 0.2s ease;
}

#nav:checked+.nav-btn i:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}

#nav:checked+.nav-btn i:nth-child(2) {
    opacity: 0;
}

#nav:checked+.nav-btn i:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}

#nav:checked~.nav-wrapper {
    z-index: 9990;
    opacity: 1;
}

#nav:checked~.nav-wrapper ul li a {
    opacity: 1;
    transform: translateX(0);
}

.hidden {
    display: none;
}






.home-box {
    width: 100%;
    height: 90vh;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Quicksand", Arial, Helvetica, sans-serif;
}

.home-box h1 {
    padding: 0px;
    margin: 0 0;
    margin-bottom: -18px;
    font-size: 128px;
    color: #d64937;
    text-align: center;
}

.home-box h1 span {
    opacity: 0.75;
}

.home-box p:nth-of-type(1) {
    margin-top: 24px;
}

.home-box p {
    margin: 0 0;
    padding: 0 0;
    font-size: 32px;
}

a {
    text-decoration: none;
    color: #d64937;
}

a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 864px) {
    .home-box {
        width: 100%;
    }

    .home-box h1 {
        font-size: 64px;
    }

    .home-box p {
        font-size: 24px;
        padding-top: 24px;
        margin-left: 48px;
        margin-right: 48px;
    }
}




.title {
    width: 740px;
    margin-top: 92px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    display: flex;
    font-size: 3em;
    
    align-items: center;
    justify-content: center;
    font-family: "Quicksand", Arial, Helvetica, sans-serif;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.date,
.author {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 42px;
    font-family: "Quicksand", Arial, Helvetica, sans-serif;
    text-align: center;
}

article {
    width: 740px;
    
    font-size: 16px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 125px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    font-family: "Quicksand", Arial, Helvetica, sans-serif;
}


article input[type="checkbox"].cbi {
    display: none;
}

article input[type="checkbox"].cbi+label:before {
    font-family: "FontAwesome";
    display: inline-block;
}

article input[type="checkbox"].cbi:not(:checked)+label:before {
    color: #d64937;
    letter-spacing: 10px;
    content: "\f096"
        
    ;
}

article input[type="checkbox"].cbi:checked+label:before {
    color: #228b22;
    letter-spacing: 7px;
    content: "\f046";
    
    transition-property: opacity;
}

article input[type="checkbox"].cbi:checked:disabled+label:before {
    margin-left: 0px;
}

article input[type="checkbox"].cbi:not(:checked):disabled+label:before {
    margin-left: 21px;
}

.cbl {
    cursor: pointer;
    padding: 16px 16px 16px 16px;
    z-index: 0;
    font-size: 18px;
}

article li {
    margin-top: 5px;
}

article h1 {
    font-size: 2.666em;
    margin-top: 64px;
}

article h2 {
    font-size: 2em;
    margin-top: 64px;
}

article h3 {
    font-size: 1.55em;
    margin-top: 42px;
}

article h3 {
    font-size: 1.111em;
    margin-top: 42px;
}

article p {
    font-size: 1em;
    text-align: justify;
}

.up-btn {
    font-family: "Quando";
    font-size: 32px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 72px;
    bottom: 0;
}

.article {
    display: flex;
    width: 480px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.article:first-of-type {
    margin-top: 64px;
}

.article:last-of-type {
    padding-bottom: 34px;
}

.article span {
    width: 200px;
    text-align: right;
    padding-right: 0.5em;
}

img {
    width: 770px;
    margin-top: 10px;
    margin-bottom: 10px;
    transform: translateX(-15px);
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));
    
}

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

    .title,
    article,
    article p {
        width: 98%;
    }

    .article span {
        display: none;
    }

    .article {
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 16px;
        justify-content: center;
    }

    img {
        width: 100%;
        transform: none;
    }
}

#TOC {
    
    margin-top: 64px;
    margin-bottom: 64px;
}

#TOC ul li {
    font-weight: bold;
    list-style: none;
    margin-top: 0.666em;
    margin-bottom: 0.666em;
}

#TOC ul li ul li {
    font-size: 0.95em;
    font-weight: 300;
    list-style: none;
    margin-top: 0.42em;
    margin-bottom: 0.42em;
}

#TOC ul li ul li ul li {
    font-size: 0.9em;
}

#TOC ul li ul li ul li ul li {
    font-size: 0.85em;
}

#TOC ul li ul li ul li ul li ul li {
    font-size: 0.8em;
}

#TOC>ul {
    counter-reset: htoc_1;
}

#TOC>ul>li::before {
    counter-increment: htoc_1;
    content: counter(htoc_1) "\2006  ";
}

#TOC>ul ul {
    counter-reset: htoc_2;
}

#TOC>ul ul li::before {
    counter-increment: htoc_2;
    content: counter(htoc_1) "." counter(htoc_2) "\2006  ";
}

#TOC>ul ul ul {
    counter-reset: htoc_3;
}

#TOC>ul ul ul li::before {
    counter-increment: htoc_3;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "\2006  ";
}

#TOC>ul ul ul ul {
    counter-reset: htoc_4;
}

#TOC>ul ul ul ul li::before {
    counter-increment: htoc_4;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "."
        counter(htoc_4) "\2006  ";
}

#TOC>ul ul ul ul ul {
    counter-reset: htoc_5;
}

#TOC>ul ul ul ul ul li::before {
    counter-increment: htoc_5;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "."
        counter(htoc_4) "." counter(htoc_5) "\2006  ";
}

#TOC>ul ul ul ul ul ul {
    counter-reset: htoc_6;
}

#TOC>ul ul ul ul ul ul li::before {
    counter-increment: htoc_6;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "."
        counter(htoc_4) "." counter(htoc_5) "." counter(htoc_6) "\2006  ";
}

#TOC ul li::before {
    margin-right: 0.2em;
    width: 12ch;
    text-align: right;
    font-weight: normal;
    opacity: 0.4;
    pointer-events: none;
}

#TOC ul li:hover::before {
    opacity: 0.7;
}

p code {
    background: rgba(255, 242, 0, 0.1);
    text-shadow:
        -3px 0px 3px rgba(255, 242, 0, 0.1),
        3px 0px 3px rgba(255, 242, 0, 0.1),
        6px 0px 6px rgba(255, 242, 0, 0.1),
        -6px 0px 6px rgba(255, 242, 0, 0.1);
    padding: 3px 3px;
    border-radius: 7px;
}

::selection {
    
    color: black;
    background: rgba(255, 242, 0, 0.5);
    text-shadow:
        -3px 0px 3px rgba(255, 242, 0, 0.5),
        3px 0px 3px rgba(255, 242, 0, 0.5),
        6px 0px 6px rgba(255, 242, 0, 0.5),
        -6px 0px 6px rgba(255, 242, 0, 0.5);
}








code {
    width: 100%;
    white-space: pre-wrap;
}

span.smallcaps {
    font-variant: small-caps;
}

span.underline {
    text-decoration: underline;
}

div.column {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

a.sourceLine {
    display: inline-block;
    line-height: 1.25;
}

a.sourceLine {
    pointer-events: none;
    color: inherit;
    text-decoration: inherit;
}

a.sourceLine:empty {
    height: 1.2em;
}

.sourceCode {
    overflow: auto;
    border-radius: 21px;
}

.sourceCode pre {
    overflow: hidden;
}

code.sourceCode {
    white-space: pre;
    position: relative;
}

div.sourceCode {
    margin: 1em 0;
}

pre.sourceCode {
    padding: 21px 21px;
    
    margin: 0;
}

@media print {
    code.sourceCode {
        white-space: pre-wrap;
    }

    a.sourceLine {
        text-indent: -1em;
        padding-left: 1em;
    }
}

pre.numberSource a.sourceLine {
    position: relative;
    left: -4em;
}

pre.numberSource a.sourceLine::before {
    text-decoration: none;
    content: attr(title);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    
    border: none;
    pointer-events: all;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 7em;
    
    color: #ccc;
}

pre.numberSource {
    
    border-left: none;
    padding-left: 4px;
}

div.sourceCode {
    color: #1f1c1b;
    background-color: #f6f6f6;
    
}

@media screen {
    a.sourceLine::before {
        text-decoration: underline;
    }
}

code span {
    color: #1f1c1b;
}


code span.al {
    color: #bf0303;
    background-color: #f7e6e6;
    font-weight: bold;
}


code span.an {
    color: #ca60ca;
}


code span.at {
    color: #0057ae;
}


code span.bn {
    color: #b08000;
}


code span.bu {
    color: #644a9b;
    font-weight: bold;
}


code span.cf {
    color: #1f1c1b;
    font-weight: bold;
}


code span.ch {
    color: #924c9d;
}


code span.cn {
    color: #aa5500;
}


code span.co {
    color: #898887;
}


code span.cv {
    color: #0095ff;
}


code span.do {
    color: #607880;
}


code span.dt {
    color: #0057ae;
}


code span.dv {
    color: #b08000;
}


code span.er {
    color: #bf0303;
    text-decoration: underline;
}


code span.ex {
    color: #0095ff;
    font-weight: bold;
}


code span.fl {
    color: #b08000;
}


code span.fu {
    color: #644a9b;
}


code span.im {
    color: #ff5500;
}


code span.in {
    color: #b08000;
}


code span.kw {
    color: #1f1c1b;
    font-weight: bold;
}


code span.op {
    color: #1f1c1b;
}


code span.ot {
    color: #006e28;
}


code span.pp {
    color: #006e28;
}


code span.re {
    color: #0057ae;
    background-color: #e0e9f8;
}


code span.sc {
    color: #3daee9;
}


code span.ss {
    color: #ff5500;
}


code span.st {
    color: #bf0303;
}


code span.va {
    color: #0057ae;
}


code span.vs {
    color: #bf0303;
}


code span.wa {
    color: #bf0303;
}





@media screen and (max-width: 864px) {
    .sourceCode {
        width: 100vw;
        transform: translateX(-1.25vw);
        border-radius: 0px;
        
    }

    code,
    pre.sourceCode {
        font-size: 0.75em;
    }
}






.about-hero {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 56px;
}

.about-hero h1,
.about-hero h2 {
    margin: 0;
    font-size: 3em;
}

.about-tagline {
    font-size: 1.1em;
    font-weight: 500;
    color: #555;
    max-width: 640px;
    margin: 12px auto 0;
    text-align: center;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 24px;
}

.about-card {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 12px;
    padding: 24px 26px 28px;
    position: relative;
    box-shadow:
        0 4px 12px -4px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition:
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.about-card:hover {
    box-shadow:
        0 10px 28px -6px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.about-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.15em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #d64937;
}

.about-card p,
.about-card li {
    text-align: left;
    line-height: 1.45em;
    font-size: 0.95em;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.pill-list li {
    background: #fff7f6;
    border: 1px solid #ffd9d3;
    color: #b53a2b;
    padding: 6px 12px 5px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.7px;
    border-radius: 24px;
    text-transform: uppercase;
    white-space: normal;
}

.experience-item:not(:last-child) {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e6e6e6;
}

.experience-item strong {
    font-size: 0.95em;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 24px;
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 0.95em;
    line-height: 1.4em;
}

.about-values li {
    margin: 0;
    break-inside: avoid;
}

@media screen and (max-width: 864px) {
    .about-grid {
        display: block;
    }

    .about-card {
        margin-bottom: 28px;
    }

    .about-values {
        grid-template-columns: 1fr;
    }

    .about-hero h1,
    .about-hero h2 {
        font-size: 2.15em;
    }
}



.about-section {
    
    
    padding: 0px 0 0px;
    position: relative;
    background: #ffffff;
}


.about-section:last-of-type {
    padding-bottom: 32px;
    
}




.about-section:nth-of-type(even) {
    background: linear-gradient(180deg, #ffffff 0%, #fff8f6 100%);
}

.about-section:nth-of-type(odd) {
    background: #ffffff;
}

.fw-block {
    width: 100%;
}


.about-section>* {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
}

.about-section-head h3 {
    margin: 0 0 20px;
    font-size: 0.95em;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: #d64937;
    position: relative;
}

.about-section-head h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 54px;
    height: 2px;
    background: #d64937;
    border-radius: 2px;
}

.about-summary-intro p {
    font-size: 0.95em;
    line-height: 1.5em;
    margin-top: 0;
}

.about-glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 28px;
    margin-top: 12px;
}

.glance-item {
    background: #fff7f6;
    border: 1px solid #ffe3dd;
    border-radius: 10px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.glance-label {
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #b53a2b;
}

.glance-value {
    font-size: 0.88em;
    line-height: 1.35em;
    font-weight: 500;
}

.competency-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-top: 8px;
    padding-bottom: 8px;
}

.competency-col {
    padding: 8px;
}

.competency-col h3 {
    padding-top: 0;
    margin-top: 0;
}

.competency-col h4 {
    margin: 0 0 8px;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #444;
}

.competency-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.competency-col ul li {
    position: relative;
    padding-left: 14px;
    font-size: 0.88em;
    line-height: 1.45em;
}

.competency-col ul li:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d64937;
    position: absolute;
    left: 0;
    top: 0.55em;
    opacity: 0.8;
}

.timeline {
    position: relative;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.timeline:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(#ffd0c9, #d64937);
    opacity: 0.4;
}

.timeline-item {
    position: relative;
    padding-left: 32px;
}

.timeline-item:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 3px solid #d64937;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.ti-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ti-role {
    font-weight: 600;
    font-size: 0.95em;
}

.ti-period {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b53a2b;
}

.ti-org {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    margin-top: 2px;
}

.ti-points {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 0.85em;
    line-height: 1.4em;
}

.ti-points li {
    margin: 4px 0;
}

.edu-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 4px;
    font-size: 0.9em;
    line-height: 1.5em;
}

.edu-block {
    flex: 1 1 260px;
}

.lang-block {
    flex: 1 1 260px;
}

.values-list {
    margin: 8px 0 8px;
    padding-left: 18px;
    column-width: 200px;
    
    columns: 2;
    column-gap: 32px;
    font-size: 0.88em;
    line-height: 1.5em;
}

.values-list li {
    margin: 2px 0 4px;
    break-inside: avoid;
}

.connect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 12px;
    align-items: start;
}

.tooling-note {
    background: #fffdfc;
    border: 1px solid #f5e2de;
    padding: 18px 20px 20px;
    border-radius: 10px;
    font-size: 0.85em;
    line-height: 1.4em;
}

@media screen and (max-width: 864px) {
    .about-section {
        
        padding: 0; 
    }

    .timeline {
        gap: 28px;
    }

    .timeline-item {
        padding-left: 30px;
    }

    .timeline:before {
        left: 7px;
    }

    .timeline-item:before {
        left: 1px;
    }

    .values-list {
        columns: 1;
    }

    .impact-highlights {
        gap: 8px;
    }

    .impact-highlights li {
        font-size: 0.72em;
    }

    .fact-badges .fact {
        font-size: 0.68em;
        padding: 5px 10px 4px;
    }

    .principle-tags li {
        font-size: 0.68em;
        padding: 5px 10px 4px;
    }

    .connect-grid {
        gap: 28px;
    }
}





.impact-highlights li {
    position: relative;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
    cursor: default;
}

.impact-highlights li:hover {
    background: #ffe9e5;
    border-color: #ffc7bd;
}

.fact-badges .fact {
    display: inline-block;
    line-height: 1.2em;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.fact-badges .fact:hover {
    background: #ffe9e5;
    border-color: #ffcfc6;
}

.key-pills li {
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s;
}

.key-pills li:hover {
    background: #ffe9e5;
    border-color: #ffcfc6;
}

.principle-tags li {
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.principle-tags li:hover {
    background: #ffe9e5;
    border-color: #ffcfc6;
}

.header-cta a {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s;
}

.header-cta a:hover {
    background: #c74231;
    box-shadow: 0 6px 16px -6px rgba(214, 73, 55, 0.55);
    transform: translateY(-2px);
}

.header-cta a:active {
    transform: translateY(0);
}

.timeline-item:hover .ti-role {
    color: #d64937;
}

.timeline-item:hover:before {
    box-shadow: 0 0 0 3px #ffe1dc;
}

.principle-tags,
.fact-badges,
.impact-highlights {
    -webkit-user-select: none;
    user-select: none;
}

.connect-grid a {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.connect-grid a:hover {
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.18);
}

.connect-grid a[href*="linkedin"]:hover {
    background: #ffd8d1;
    border-color: #ffb7aa;
}

.tooling-note ul li {
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.tooling-note ul li:hover {
    background: #f9f9f9;
    border-color: #e3e3e3;
}


.impact-highlights li:focus,
.fact-badges .fact:focus,
.principle-tags li:focus,
.connect-grid a:focus {
    outline: 2px solid #d64937;
    outline-offset: 2px;
}


@media print {

    .impact-highlights li,
    .fact-badges .fact,
    .principle-tags li,
    .connect-grid a {
        box-shadow: none !important;
        background: #fff !important;
        border-color: #ccc !important;
        color: #000 !important;
    }
}





.experience-resume {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 8px;
    border-left: 2px solid #f4c5bd;
    padding-left: 28px;
    position: relative;
}

.exp-role {
    position: relative;
    padding-left: 8px;
    padding-top: 2px;
}

.exp-role:before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: #d64937;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffe1dc;
}

.exp-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.exp-title {
    font-weight: 600;
    font-size: 0.95em;
}

.exp-company {
    font-size: 0.7em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    margin-top: 2px;
}

.exp-dates {
    font-size: 0.65em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b53a2b;
    margin-top: 2px;
}

.exp-bullets {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.85em;
    line-height: 1.4em;
}

.exp-bullets li {
    margin: 4px 0;
}


.experience-resume .exp-role:hover .exp-title {
    color: #d64937;
}

.experience-resume .exp-role:hover:before {
    box-shadow: 0 0 0 3px #ffd9d3;
}

@media screen and (max-width: 864px) {
    .experience-resume {
        gap: 32px;
        padding-left: 20px;
    }

    .exp-role:before {
        left: -12px;
    }
}






.fact-badges,
.fact-badges .fact {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}


.edu-lang {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    background: #fffdfd;
    border: 1px solid #f2e2de;
    padding: 24px 28px;
    border-radius: 12px;
    gap: 24px 48px;
    margin-top: 16px;
    font-size: 0.9em;
    line-height: 1.55em;
    position: relative;
}

.edu-lang:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #d64937;
    border-radius: 12px 0 0 12px;
    opacity: 0.9;
}

.edu-block {
    padding-right: 8px;
}

.edu-block strong {
    font-size: 1em;
    display: block;
    margin-bottom: 4px;
}

.lang-block {
    align-self: start;
    font-size: 0.8em;
    letter-spacing: 0.4px;
    text-transform: none;
    background: #fff7f6;
    border: 1px solid #ffe3dd;
    padding: 12px 16px 12px;
    border-radius: 10px;
    line-height: 1.55em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
}

.lang-block br {
    line-height: 0;
}


@media screen and (max-width: 864px) {
    .edu-lang {
        padding: 20px 18px;
        gap: 18px 24px;
    }

    .lang-block {
        font-size: 0.68em;
        letter-spacing: 0.6px;
    }
}


@media screen and (max-width: 520px) {
    .pill-list li {
        font-size: 0.6em;
        padding: 4px 9px 4px;
    }

    .fact-badges .fact {
        font-size: 0.6em;
        padding: 4px 9px 4px;
    }

    .exp-bullets {
        font-size: 0.78em;
    }

    .exp-title {
        font-size: 0.85em;
    }
}