/* Shared public-site theme. */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #929687 #f8f7f2;
}
html::-webkit-scrollbar { width:6px; }
html::-webkit-scrollbar-track { background:#f8f7f2; }
html::-webkit-scrollbar-thumb { background:#929687; border-radius:6px; }
html::-webkit-scrollbar-thumb:hover { background:#555e41; }
/* Keep the accessibility panel inside this site's viewport, including its padding. */
html .lwa-root {
    box-sizing:border-box;
    max-width:min(var(--lwa-min-width),calc(100vw - 50px));
}
html .lwa-root.lwa-root-mobile {
    max-width:min(var(--lwa-min-width),100vw);
}
.h2-page{
    --h2-orange:#ff8c2f;
    --h2-ink:#262720;
    --h2-paper:#f8f7f2;
    --h2-muted:#66675d;
    background:var(--h2-paper);
    color:var(--h2-ink);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow:clip;
}
.h2-page *,.h2-page *::before,.h2-page *::after{
    box-sizing:border-box
}
.h2-page h1,.h2-page h2,.h2-page h3,.h2-page p,.h2-page figure{
    margin:0;
    font-family:inherit;
    color:inherit
}
.h2-page a{
    color:inherit;
    text-decoration:none
}
.h2-page .h2-arrow{
    display:inline-block;
    width:1em;
    height:1em;
    flex-shrink:0;
    vertical-align:-.12em
}
.h2-page button{
    font:inherit;
    color:inherit;
    cursor:pointer
}
.h2-page a,.h2-page button{
    -webkit-tap-highlight-color:transparent
}
.h2-page a:focus-visible,.h2-page button:focus-visible{
    outline:3px solid #414dd3;
    outline-offset:6px
}
.h2-page ::selection{
    background:#262720;
    color:#fff8eb
}
.h2-wrap{
    width:min(1280px,calc(100% - 112px));
    margin-inline:auto
}
.h2-page .h2-eyebrow{
    font:11px/1.5 "Courier New",monospace;
    letter-spacing:1.7px;
    font-weight:700
}
.h2-dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
    margin-right:9px;
    vertical-align:1px
}
.h2-header{
    padding: 20px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.h2-brand{
    display:flex;
    align-items:center;
    gap:10px;
    line-height:1.15;
    flex-shrink:0
}
.h2-brand>span{
    font-size:24px;
    font-weight:800;
    letter-spacing:-1.1px
}
.h2-brand-light{
    font-weight:400
}
.h2-brand small{
    display:block;
    font:8px/1.5 "Courier New",monospace;
    letter-spacing:1.85px;
    margin-top:5px
}
.h2-nav{
    display:flex;
    align-items:center;
    gap:38px;
    font-size:13px;
    font-weight:600
}
.h2-nav>a{
    position:relative;
    display:inline-flex;
    align-items:center;
    line-height:20px;
    padding-block:12px;
    white-space:nowrap
}
.h2-nav>a:hover{
    text-decoration:none
}
.h2-nav-contact span{
    margin-left:25px;
    font-size:20px;
    line-height:20px
}
.h2-menu-toggle{
    display:none
}
.h2-skip{
    position:absolute;
    top:-100px;
    left:20px;
    background:#fff;
    padding:12px;
    z-index:20
}
.h2-skip:focus{
    top:10px
}
.h2-hero{
    background:var(--h2-orange);
    position:relative
}
.h2-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    align-items:center;
    padding-top:40px;
    padding-bottom:55px
}
.h2-hero-copy{
    position:relative;
    z-index:1;
    min-width:0;
    container-type:inline-size
}
.h2-page h1{
    font-size:70px;
    line-height:1.025;
    letter-spacing:-4px;
    font-weight:500;
    margin:30px 0 30px
}
.h2-title-underlined{
    position:relative;
    display:inline-block;
    margin-bottom:14px
}
.h2-title-underlined svg{
    position:absolute;
    bottom:-14px;
    left:0;
    width:100%;
    height:18px;
    fill:none;
    stroke:var(--h2-ink);
    stroke-width:2.5
}
.h2-page .h2-hero-tagline{
    font-size:clamp(24px,6.4cqi,40px);
    font-weight:500;
    line-height:1.2;
    letter-spacing:-.055em;
    text-wrap:pretty
}
.h2-page .h2-hero-description{
    max-width:430px;
    font-size:16px;
    line-height:1.8;
    margin-top:36px;
    color:#3d2d20
}
.h2-actions{
    display:flex;
    align-items:center;
    gap:29px;
    margin-top:32px
}
.h2-actions .projects-link {
    position: relative;
    padding-right: 20px;
}
.h2-actions .projects-link:after {
    content: '↓';
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(50%);
    transition: transform 0.2s;
}
.h2-actions .projects-link:hover:after {
    transform: translateY(5px);
}
.h2-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height:55px;
    padding:14px 22px;
    font-size:13px;
    font-weight:600;
    transition:transform .2s,background .2s
}
.h2-page .h2-button-dark{
    background:var(--h2-ink);
    color:var(--h2-paper)
}
.h2-button:hover{
    transform:translateY(-3px);
    background:#414236
}
.h2-button span{
    font-size:23px;
    line-height:1
}
.h2-text-link{
    display:inline-flex;
    align-items:center;
    gap:22px;
    font-size:13px;
    font-weight:600;
    min-height:44px;
    position: relative;
}
.h2-text-link.has-arrow {
    padding-right: 20px;
}
.h2-text-link.contact-link {
    position: relative;
    padding-right: 20px;
}
.h2-text-link.contact-link:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width:16px;
    height:16px;
    transform: translateY(-50%);
    transition: transform 0.2s;
}
.h2-text-link.contact-link:hover:after{
    transform: translate(3px,-3px) translateY(-50%);
}
.h2-text-link>span{
    font-size:21px;
    transition:transform .2s;
    position: absolute;
    top: 0;
    right: 0;
}
.h2-text-link:hover>span{
    transform:translate(3px,-3px);
}
.h2-text-link:hover{
    text-decoration:underline;
    text-underline-offset:5px;
}
.h2-system{
    min-width:0;
    align-self:center;
    position:relative
}
.h2-system-svg{
    display:block;
    width:calc(100% + 35px);
    max-width:none;
    margin-left:-15px;
    height:auto;
    overflow:visible
}
.h2-art-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 -10px 35px;
    font:9px/1.5 "Courier New",monospace;
    letter-spacing:1.3px
}
.h2-art-top .h2-dot{
    width:5px;
    height:5px
}
.h2-motion{
    display:none;
    width:36px;
    height:36px;
    border:1px solid #9c521c;
    background:transparent;
    border-radius:50%;
    padding:0;
    align-items:center;
    justify-content:center
}
.h2-motion:hover{
    background:#ffffff30
}
.h2-motion svg{
    display:block;
    width:16px;
    height:16px;
    flex-shrink:0;
    fill:currentColor
}
.h2-enhanced .h2-motion{
    display:flex
}
.h2-art-bottom{
    position:relative;
    z-index:2;
    text-align:center;
    margin-top:0
}
.h2-mode-switch{
    display:none;
    justify-content:center;
    gap:5px
}
.h2-enhanced .h2-mode-switch{
    display:flex
}
.h2-mode-switch button{
    background:transparent;
    border:1px solid transparent;
    border-radius:30px;
    padding:9px 13px;
    font:11px/1.5 "Courier New",monospace;
    transition:background .2s,border-color .2s;
    min-height:38px
}
.h2-mode-switch button[aria-pressed=true]{
    border-color:var(--h2-ink);
    background:#ffffff24
}
.h2-mode-switch button:hover{
    background:#ffffff40
}
.h2-page .h2-art-caption{
    font:10px/1.6 "Courier New",monospace;
    margin-top:13px;
    color:#50321b;
    min-height:32px
}
.h2-scene{
    opacity:0;
    transition:opacity .4s
}
.h2-system[data-mode=web] .h2-scene-web,.h2-system[data-mode=security] .h2-scene-security,.h2-system[data-mode=mobile] .h2-scene-mobile{
    opacity:1
}
.h2-float{
    animation:h2-float 7s ease-in-out infinite;
    animation-play-state:paused
}
.h2-enhanced .h2-float,.h2-enhanced .h2-packets path,.h2-enhanced .h2-status-lights{
    animation-play-state:running
}
.h2-float-back{
    animation-delay:-2s
}
.h2-node-code{
    animation-delay:-3.5s;
    animation-duration:6s
}
.h2-node-data{
    animation-delay:-1.5s;
    animation-duration:8s
}
.h2-node-check{
    animation-delay:-4s;
    animation-duration:9s
}
.h2-packets path{
    animation:h2-flow 5s linear infinite;
    animation-play-state:paused
}
.h2-packets path:nth-child(2){
    animation-delay:-1.8s
}
.h2-packets path:nth-child(3){
    animation-delay:-3s
}
.h2-status-lights{
    animation:h2-pulse 4s ease-in-out infinite;
    animation-play-state:paused
}
.h2-system.h2-paused *,.h2-system.h2-offscreen *{
    animation-play-state:paused!important
}
@keyframes h2-float{
    0%,100%{
        transform:translateY(0)
    }
    50%{
        transform:translateY(-10px)
    }
}
@keyframes h2-flow{
    to{
        stroke-dashoffset:-518
    }
}
@keyframes h2-pulse{
    0%,100%{
        opacity:1
    }
    50%{
        opacity:.35
    }
}
.h2-hero-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid #a65d2759;
    padding-block:20px;
    font:9px/1.5 "Courier New",monospace;
    letter-spacing:1px
}
.h2-hero-foot a{
    font-family:Arial,sans-serif;
    font-size:11px;
    letter-spacing:0
}
.h2-hero-foot a span{
    margin-left:20px;
    font-size:18px
}
.h2-proof{
    display:grid;
    grid-template-columns:1.3fr repeat(3,1fr);
    gap:40px;
    padding-block:48px;
    border-bottom:1px solid #d9d9ce;
    align-items:center
}
.h2-proof>p{
    font-size:14px;
    color:var(--h2-muted);
    line-height:1.8
}
.h2-proof>p strong{
    color:var(--h2-ink);
    font-weight:500
}
.h2-proof>div{
    padding-left:32px;
    border-left:1px solid #d9d9ce
}
.h2-proof>div>strong{
    display:block;
    font-size:42px;
    font-weight:500;
    line-height:1.15;
    letter-spacing:-2px
}
.h2-proof strong>span{
    color:#be5200;
    font-size:26px;
    margin-left:4px
}
.h2-proof>div>span{
    display:block;
    font-size:11px;
    color:var(--h2-muted);
    margin-top:9px
}
.h2-expertise,.h2-work{
    padding-block:70px;
}
.h2-section-heading{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
    margin-bottom:60px
}
.h2-section-heading>.h2-eyebrow{
    padding-top:13px
}
.h2-page h2{
    font-size:clamp(35px,3.6vw,53px);
    font-weight:500;
    letter-spacing:-2.2px;
    line-height:1.1
}
.h2-section-heading>div>p{
    color:var(--h2-muted);
    font-size:15px;
    max-width:440px;
    margin-top:23px;
    line-height:1.8
}
.h2-services{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:32px
}
.h2-service{
    min-width:0;
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--h2-ink);
    padding-top:24px
}
.h2-service-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:42px
}
.h2-service-top>span{
    font:11px/1.5 "Courier New",monospace;
    color:var(--h2-muted)
}
.h2-service-top svg{
    width:58px;
    height:58px;
    fill:none;
    stroke:var(--h2-ink);
    stroke-width:1.6;
    transition:transform .3s
}
.h2-service:hover svg{
    transform:translateY(-5px);
    stroke:#be5200
}
.h2-page .h2-service h3{
    font-size:23px;
    line-height:1.25;
    font-weight:500;
    letter-spacing:-.7px;
    margin-bottom:19px
}
.h2-service>p{
    font-size:14px;
    color:var(--h2-muted);
    line-height:1.8;
    min-height:101px
}
.h2-service ul{
    list-style:none;
    padding:26px 0 0;
    margin:auto 0 0;
    font:11px/1.7 "Courier New",monospace
}
.h2-service li{
    padding:5px 0
}
.h2-service li::before{
    content:"";
    display:inline-block;
    width:1em;
    height:1em;
    vertical-align:-.08em;
    margin-right:12px;
    color:#be5200
}
.h2-page .h2-arrow,.h2-text-link.contact-link::after,.h2-service li::before{
    background-color:currentColor;
    -webkit-mask:url("../images/arr-tr.svg") center/contain no-repeat;
    mask:url("../images/arr-tr.svg") center/contain no-repeat
}
.h2-security{
    padding-bottom:80px
}
.h2-security-band{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) minmax(220px,.65fr);
    align-items:center;
    gap:32px;
    padding:36px;
    background:#f0e9dd;
    border:1px solid #dfd7c8;
    border-radius:18px
}
.h2-security-icon{
    display:block;
    width:72px;
    height:81px;
    color:var(--h2-ink)
}
.h2-page .h2-security h2{
    font-size:clamp(24px,2.3vw,32px);
    line-height:1.15;
    letter-spacing:-1px
}
.h2-page .h2-security-copy p{
    margin-top:16px;
    color:var(--h2-muted);
    font-size:14px;
    line-height:1.8
}
.h2-security-features{
    display:grid;
    gap:18px;
    list-style:none;
    padding:0 0 0 28px;
    margin:0;
    border-left:1px solid #d7cdbb
}
.h2-security-features li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    line-height:1.5
}
.h2-security-features svg{
    flex:0 0 24px;
    width:24px;
    height:24px;
    fill:none;
    stroke:var(--h2-ink);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round
}
@media(max-width:1000px){
    .h2-security-band{
        grid-template-columns:64px minmax(0,1fr);
        gap:24px
    }
    .h2-security-icon{
        width:64px;
        height:72px
    }
    .h2-security-features{
        grid-column:2;
        display:flex;
        flex-wrap:wrap;
        gap:16px 24px;
        padding:0;
        border:0
    }
}
@media(max-width:560px){
    .h2-security{
        padding-bottom:48px
    }
    .h2-security-band{
        grid-template-columns:1fr;
        gap:20px;
        padding:24px
    }
    .h2-security-icon{
        width:48px;
        height:54px
    }
    .h2-security-features{
        grid-column:1;
        display:grid;
        padding-top:20px;
        border-top:1px solid #d7cdbb
    }
}
/* AI band: reuses the security band. The space above it mirrors the space under the security band. */
.h2-ai{
    padding-top:80px;
    padding-bottom:0
}
/* The AI icon cycles: AI (orange spark) -> a slash cuts through and the spark goes out -> AI again. */
.h2-ai-spark{
    animation:h2-ai-spark 8s ease-in-out infinite
}
.h2-ai-slash{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:h2-ai-slash 8s ease-in-out infinite
}
@keyframes h2-ai-spark{
    0%,40%{fill:#ff8c2f}
    50%,88%{fill:#fff8eb}
    98%,100%{fill:#ff8c2f}
}
@keyframes h2-ai-slash{
    0%,40%{stroke-dashoffset:1}
    50%,88%{stroke-dashoffset:0}
    98%,100%{stroke-dashoffset:-1}
}
body.lwa-disable-animations .h2-ai-icon *{
    animation:none
}
@media(max-width:560px){
    .h2-ai{
        padding-top:48px;
        padding-bottom:0
    }
}
.h2-approach{
    background:var(--h2-ink);
    color:var(--h2-paper);
    padding-block:85px
}
.h2-approach-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:100px;
    align-items:center
}
.h2-approach .h2-eyebrow{
    color:#ffac6b;
    margin-bottom:27px
}
.h2-approach h2{
    font-size:clamp(34px,3.5vw,48px)
}
.h2-approach h2 span{
    color:#a1a496
}
.h2-approach-grid>div>p:not(.h2-eyebrow){
    color:#bbbdb2;
    font-size:14px;
    line-height:1.85;
    max-width:425px;
    margin-top:23px
}
.h2-approach .h2-text-link{
    margin-top:23px;
    color:#ffac6b
}
.h2-process{
    list-style:none;
    margin:0;
    padding:0
}
.h2-process li{
    display:flex;
    align-items:center;
    gap:24px;
    padding-block:28px;
    border-top:1px solid #52544a
}
.h2-process li:last-child{
    border-bottom:1px solid #52544a
}
.h2-process li>span:first-child{
    color:#ffac6b;
    font:11px "Courier New",monospace
}
.h2-process li>span:last-child{
    margin-left:auto;
    font-size:25px;
    color:#a1a496
}
.h2-process h3{
    font-size:22px;
    font-weight:400
}
.h2-process p{
    color:#bbbdb2;
    font-size:12px;
    margin-top:4px
}
/* Selected projects: full-width features and supporting cases. */
.h2-projects{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
}
.h2-case{
    display:flex;
    flex-direction:column;
    min-width:0;
    border-radius:18px;
    overflow:hidden;
    background:#f0eee6;
    border:1px solid #e4e2d8
}
.h2-case-featured{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    background:#e9efeb;
    border-color:#dce5de
}
.h2-case-media{
    position:relative;
    aspect-ratio:1.65;
    overflow:hidden;
    isolation:isolate
}
.h2-case-media-medical{
    background:#dce8e2
}
.h2-case-media-signature{
    background:#ece7ee
}
.h2-case-media-clinic{
    background:#e5ead9
}
.h2-case-media img{
    position:absolute;
    bottom:0;
    left:8%;
    display:block;
    width:84%;
    height:auto;
    max-width:none;
    transition:transform .45s ease;
    transform-origin:center bottom
}
.h2-case-featured .h2-case-media{
    min-height:420px;
    aspect-ratio:auto
}
.h2-case-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:30px 32px 26px;
    flex:1
}
.h2-case-featured .h2-case-copy{
    padding:46px 42px;
    justify-content:center
}
.h2-page .h2-case-category{
    font-size:10px;
    font-weight:600;
    letter-spacing:1.4px;
    color:#60665b;
    margin-bottom:13px
}
.h2-case h3{
    font-size:32px;
    line-height:1.1;
    font-weight:500;
    letter-spacing:-1.2px
}
.h2-case-featured:not(.h2-case-liteboard) h3{
    font-size:43px;
    letter-spacing:-1.8px
}
.h2-page .h2-case-summary{
    font-size:15px;
    line-height:1.7;
    margin-top:17px;
    max-width:420px
}
.h2-case-featured:not(.h2-case-liteboard) .h2-case-summary{
    font-size:20px;
    line-height:1.45;
    max-width:330px
}
.h2-page .h2-case-contribution{
    font-size:13px;
    line-height:1.75;
    color:var(--h2-muted);
    margin-top:17px;
    max-width:310px
}
.h2-case-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    width:100%;
    font-size:12px;
    font-weight:600;
    padding-top:26px;
    margin-top:auto;
    position:relative;
}
.h2-case-cta>span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex-shrink:0;
    border:1px solid #c8cdc2;
    border-radius:50%;
    font-size:22px;
    transition:background .2s,border-color .2s,transform .2s;
    position: absolute;
    right: 0;
}
.h2-case-featured .h2-case-cta{
    margin-top:7px;
    max-width:260px
}
.h2-case:hover .h2-case-cta>span,.h2-case:focus-visible .h2-case-cta>span{
    background:var(--h2-orange);
    border-color:var(--h2-orange);
    transform:rotate(5deg)
}
.h2-case:hover .h2-case-cta,.h2-case:focus-visible .h2-case-cta{
    text-decoration:underline;
    text-underline-offset:4px
}
.h2-case:hover .h2-case-media img,.h2-case:focus-visible .h2-case-media img{
    transform:translateY(-5px) scale(1.015)
}
.h2-work-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:25px;
    gap:25px
}
@media(max-width:1100px){
    .h2-projects{
        gap:24px
    }
    .h2-case-featured .h2-case-copy{
        padding:34px 30px
    }
    .h2-case-featured:not(.h2-case-liteboard) h3{
        font-size:37px
    }
    .h2-case-featured .h2-case-media{
        min-height:390px
    }
}
@media(max-width:800px){
    .h2-case-featured{
        grid-template-columns:1fr 1fr
    }
    .h2-case-featured .h2-case-copy{
        padding:28px 24px
    }
    .h2-case-featured:not(.h2-case-liteboard) h3{
        font-size:32px
    }
    .h2-case-featured:not(.h2-case-liteboard) .h2-case-summary{
        font-size:18px
    }
    .h2-case-featured .h2-case-media{
        min-height:380px;
        display:flex;
        align-items:center
    }
    .h2-case-featured .h2-case-media img{
        position:relative;
        bottom:auto;
        margin-top:-12%;
        width:94%;
        left:3%
    }
    .h2-case-copy{
        padding:24px
    }
    .h2-case h3{
        font-size:28px
    }
    .h2-page .h2-case-summary{
        font-size:14px
    }
}
@media(max-width:600px){
    .h2-projects{
        grid-template-columns:1fr;
        gap:28px
    }
    .h2-case-featured{
        grid-column:auto;
        display:flex
    }
    .h2-case-featured .h2-case-media{
        order:-1;
        min-height:0;
        aspect-ratio:1.5;
        display:block
    }
    .h2-case-media{
        aspect-ratio:1.5
    }
    .h2-case-featured .h2-case-media img{
        position:absolute;
        bottom:0;
        left:6%;
        width:88%;
        margin-top:0
    }
    .h2-case-featured .h2-case-copy,.h2-case-copy{
        padding:26px 23px
    }
    .h2-case-featured:not(.h2-case-liteboard) h3{
        font-size:32px
    }
    .h2-page .h2-case-category{
        font-size:9px
    }
    .h2-case-featured:not(.h2-case-liteboard) .h2-case-summary{
        font-size:18px
    }
    .h2-case-featured .h2-case-cta{
        max-width:none;
        margin-top:0
    }
    .h2-case-cta{
        padding-top:20px
    }
}

.h2-case-liteboard{
    background:#f0eee6;
    border-color:#e4e2d8
}
.h2-case-liteboard .h2-case-media{
    background:#fff;
    min-height:0;
    aspect-ratio:3/2
}
.h2-case-liteboard .h2-case-media img{
    position:absolute;
    inset:0 0 auto;
    width:100%;
    height:calc(100% + 28px);
    margin:0;
    object-fit:cover;
    object-position:center top
}
.h2-contact{
    background:var(--h2-orange);
    padding-block:68px 38px
}
.h2-contact-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin:27px 0 32px
}
.h2-contact-link h2{
    font-size:clamp(50px,6.6vw,90px);
    letter-spacing:-4px;
    line-height:1.05
}
.h2-contact-link>span{
    font-size:120px;
    line-height:1;
    transition:transform .3s;
    font-weight:300
}
.h2-contact-link:hover>span{
    transform:translate(8px,-8px)
}
.h2-contact-bottom{
    border-top:1px solid #a65d2759;
    padding-top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.h2-contact-bottom p{
    font-size:12px
}
/* Homepage contact: keep the invitation beside the heading, within the site grid. */
.h2-contact-editorial{
    padding-block:68px
}
.h2-contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    align-items:center;
    column-gap:clamp(40px,5vw,80px);
    margin-top:27px
}
.h2-contact-editorial .h2-contact-link{
    min-width:0;
    margin:0
}
.h2-contact-editorial .h2-contact-bottom{
    min-width:0;
    max-width:425px;
    border:0;
    padding:0;
    flex-direction:column;
    align-items:flex-start;
    gap:24px
}
.h2-contact-editorial .h2-contact-bottom p{
    font-size:16px;
    line-height:1.8;
    text-wrap:pretty
}
.h2-contact-editorial .h2-text-link{
    font-size:15px;
    line-height:1.5;
    gap:16px;
    padding:0;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:6px
}
.h2-contact-editorial .h2-text-link>span{
    position:static;
    font-size:23px
}
.h2-footer{
    padding: 30px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.h2-footer img{
    max-width: 120px;
}
.h2-footer-name{
    font-size:19px;
    font-weight:800;
    letter-spacing:-1px
}
.h2-footer-name span{
    font-weight:400
}
.h2-footer p,.h2-footer>div{
    font-size:10px;
    color:var(--h2-muted)
}
.h2-footer>div{
    display:flex;
    gap:25px
}
.h2-footer>div a:hover{
    text-decoration:underline
}
@media(min-width:1200px){
    .h2-hero h1{
        font-size:76px
    }
}
@media(min-width:1600px){
    .h2-hero-grid{
        padding-bottom:70px
    }
}
@media(max-width:1100px){
    .h2-wrap{
        width:calc(100% - 64px)
    }
    .h2-page h1{
        font-size:70px;
        letter-spacing:-4px
    }
    .h2-hero-grid{
        gap:0;
        padding-bottom:45px
    }
    .h2-actions{
        gap:18px
    }
    .h2-button{
        padding:13px 17px;
        gap:15px
    }
    .h2-hero-description{
        font-size:15px!important
    }
    .h2-nav{
        gap:25px
    }
    .h2-approach-grid{
        gap:50px
    }
    .h2-services{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px
    }
    .h2-service>p{
        min-height:126px
    }
    .h2-proof{
        gap:25px
    }
    .h2-proof>div{
        padding-left:22px
    }
    .h2-mode-switch button{
        padding-inline:9px;
        font-size:10px
    }
}
@media(max-width:800px){
    .h2-contact-editorial{
        padding-block:56px
    }
    .h2-contact-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        column-gap:32px
    }
    .h2-contact-editorial .h2-contact-link h2{
        font-size:clamp(46px,7.2vw,58px);
        letter-spacing:-2.5px
    }
    .h2-contact-editorial .h2-contact-bottom{
        gap:20px
    }
    .h2-contact-editorial .h2-contact-bottom p{
        font-size:15px
    }
    .h2-header{
        /*        height:88px*/
    }
    .h2-brand>span{
        font-size:21px
    }
    .h2-brand small{
        font-size:7px;
        letter-spacing:1.5px
    }
    .h2-brand svg{
        width:33px
    }
    .h2-nav{
        gap:20px;
        font-size:12px
    }
    .h2-nav-contact span{
        margin-left:10px
    }
    .h2-hero-grid{
        grid-template-columns:1fr;
        padding-bottom:30px
    }
    .h2-page h1{
        font-size:70px;
        letter-spacing:-4px
    }
    .h2-page .h2-hero-description{
        max-width:470px
    }
    .h2-system{
        width:min(540px,100%);
        margin:36px auto 0!important
    }
    .h2-system-svg{
        width:100%;
        margin:0
    }
    .h2-art-top{
        margin-left:25px
    }
    .h2-art-bottom{
        margin-top:-15px
    }
    .h2-hero-foot>span{
        display:none
    }
    .h2-hero-foot{
        justify-content:center
    }
    .h2-proof{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
        padding-block:32px
    }
    .h2-proof>p{
        grid-column:1/-1
    }
    .h2-proof>div{
        padding-left:20px
    }
    .h2-proof>div:nth-child(2){
        padding-left:0;
        border-left:0
    }
    .h2-proof>div>strong{
        font-size:35px
    }
    .h2-expertise,.h2-work{
        padding-block:75px
    }
    .h2-section-heading{
        grid-template-columns:1fr;
        gap:22px;
        margin-bottom:40px
    }
    .h2-services{
        gap:24px
    }
    .h2-page .h2-service h3{
        font-size:21px
    }
    .h2-service>p{
        min-height:0;
        font-size:13px
    }
    .h2-service ul{
        font-size:10px
    }
    .h2-service-top{
        margin-bottom:30px
    }
    .h2-approach-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .h2-approach{
        padding-block:60px
    }
    .h2-contact-link h2{
        font-size:64px;
        letter-spacing:-3px
    }
    .h2-contact-link>span{
        font-size:85px
    }
    .h2-contact-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }
    .h2-footer{
        flex-wrap:wrap;
        padding-block:30px;
        gap:18px
    }
    .h2-footer>div{
        width:100%;
        justify-content:space-between
    }
}
@media(max-width:560px){
    .h2-contact-editorial{
        padding-block:44px
    }
    .h2-contact-grid{
        grid-template-columns:minmax(0,1fr);
        gap:28px;
        margin-top:24px
    }
    .h2-contact-editorial .h2-contact-link h2{
        font-size:clamp(40px,10vw,56px);
        letter-spacing:-2px
    }
    .h2-contact-editorial .h2-contact-bottom{
        gap:18px
    }
    .h2-contact-editorial .h2-contact-bottom p{
        font-size:14px
    }
    .h2-wrap{
        width:calc(100% - 40px)
    }
    .h2-header{
        /*        height:auto;
                min-height:84px;*/
        padding: 8px 0;
        gap:0;
        position:relative;
        /*padding-block:20px*/
    }
    .h2-brand>span{
        font-size:20px
    }
    .h2-brand small{
        font-size:6px;
        letter-spacing:1.6px
    }
    .h2-brand {
        width: 45%;
    }
    .h2-brand img{
        width: 100%;
        height: auto;
    }
    .h2-brand svg{
        width:30px
    }
    .h2-enhanced .h2-menu-toggle{
        display:flex;
        align-items:center;
        gap:8px;
        border:0;
        padding:9px 0 9px 10px;
        background:none;
        font-size:12px
    }
    .h2-menu-toggle span{
        font-size:20px
    }
    .h2-nav{
        width:100%;
        justify-content:space-between;
        margin-top:20px;
        padding-top:15px;
        border-top:1px solid #d9d9ce;
        gap:10px
    }
    .h2-enhanced .h2-nav:not(.h2-open){
        display:none
    }
    .h2-nav-contact span{
        display:none
    }
    .h2-page .h2-eyebrow{
        font-size:9px;
        letter-spacing:1.3px
    }
    .h2-page h1{
        font-size:clamp(55px,13.8vw,70px);
        letter-spacing:-3.5px;
        margin-top:25px
    }
    .h2-page .h2-hero-description{
        font-size:14px!important;
        line-height:1.8;
        margin-top:35px
    }
    .h2-actions{
        gap:21px;
        margin-top:25px;
        flex-wrap:wrap
    }
    .h2-button{
        font-size:12px;
        padding-inline:17px;
        gap:18px;
        min-height:51px
    }
    .h2-text-link{
        font-size:12px;
        gap:13px
    }
    .h2-system{
        margin-top:40px!important
    }
    .h2-art-top{
        font-size:8px;
        margin-left:5px;
        letter-spacing:1px
    }
    .h2-system-svg{
        width:calc(100% + 16px);
        margin-left:-8px
    }
    .h2-mode-switch{
        gap:2px
    }
    .h2-mode-switch button{
        padding:8px 10px;
        font-size:10px
    }
    .h2-page .h2-art-caption{
        font-size:9px
    }
    .h2-hero-foot{
        padding-block:15px
    }
    .h2-proof{
        gap:15px;
        padding-block:28px
    }
    .h2-proof>p{
        font-size:13px
    }
    .h2-proof>div{
        padding-left:15px
    }
    .h2-proof>div>strong{
        font-size:29px;
        letter-spacing:-1px
    }
    .h2-proof strong>span{
        font-size:19px
    }
    .h2-proof>div>span{
        font-size:10px;
        max-width:80px
    }
    .h2-expertise,.h2-work{
        padding-block:58px
    }
    .h2-page h2{
        font-size:37px;
        letter-spacing:-1.7px
    }
    .h2-section-heading>div>p{
        font-size:14px
    }
    .h2-services{
        grid-template-columns:1fr;
        gap:38px
    }
    .h2-service-top{
        margin-bottom:18px
    }
    .h2-service-top svg{
        width:50px;
        height:50px
    }
    .h2-page .h2-service h3{
        font-size:25px
    }
    .h2-service>p{
        font-size:14px
    }
    .h2-service ul{
        font-size:11px;
        padding-top:17px
    }
    .h2-approach h2{
        font-size:35px
    }
    .h2-process li{
        gap:19px;
        padding-block:22px
    }
    .h2-work-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }
    .h2-contact{
        padding-top:45px
    }
    .h2-contact-link{
        gap:5px;
        margin-top:25px
    }
    .h2-contact-link h2{
        font-size:clamp(36px,9.3vw,50px);
        letter-spacing:-2px
    }
    .h2-contact-link>span{
        font-size:60px;
        align-self:flex-end
    }
    .h2-contact-bottom p{
        font-size:12px
    }
    .h2-footer p{
        font-size:9px
    }
    .h2-footer-name{
        font-size:18px
    }
}
/* Small brand accents keep the existing layout while softening the technical illustration. */
.h2-expertise{
    position:relative;
    isolation:isolate
}
.h2-brand-pattern{
    position:absolute;
    right:calc((100vw - 100%)/-2);
    top:-50px;
    width:250px;
    height:auto;
    max-width:none;
    z-index:-1;
    pointer-events:none;
    user-select:none
}
.h2-button{
    border-radius:12px
}
.h2-mode-switch button{
    font-family:Arial,Helvetica,sans-serif;
    min-width:73px
}
.h2-page .h2-art-caption{
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    letter-spacing:0
}
@media(min-width:801px){
    .h2-page .h2-art-caption{
        line-height:16px
    }
}
.h2-service-top svg{
    padding:9px;
    border-radius:17px;
    background:#f0e9dd
}
.h2-service:nth-child(2) .h2-service-top svg{
    background:#ede8f8
}
@media(max-width:800px){
    .h2-brand-pattern{
        width:230px;
        top:65px;
        opacity:.85
    }
}
@media(max-width:560px){
    .h2-brand-pattern{
        width:min(28vw,150px);
        top:30px;
        opacity:.75
    }
    .h2-page .h2-art-caption{
        font-size:11px
    }
}
/* Compact game feature, separate from the larger client project gallery. */
.h2-play{
    padding-bottom:70px;
    scroll-margin-top:24px
}
.h2-game-card{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    overflow:hidden;
    min-height:230px;
    border-radius:18px;
    background:#24292d
}
.h2-page .h2-game-card{
    color:#f8f7f2
}
.h2-game-art{
    position:relative;
    overflow:hidden;
    background:#11234a;
    min-height:230px
}
.h2-game-art img{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    object-fit:cover;
    object-position:50% 45%;
    transition:transform .45s ease
}
.h2-game-copy{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:36px 42px
}
.h2-page .h2-game-label{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:9px;
    line-height:1.4;
    letter-spacing:1.5px;
    font-weight:600;
    color:#f5b680
}
.h2-game-label svg{
    width:25px;
    height:19px;
    flex-shrink:0
}
.h2-play .h2-game-copy h2{
    font-size:35px;
    line-height:1.15;
    letter-spacing:-1.1px;
    margin-top:14px;
    font-weight:500
}
.h2-game-copy h2 span{
    color:#ffac6b
}
.h2-page .h2-game-description{
    font-size:14px;
    line-height:1.65;
    color:#d0d2ce;
    margin-top:12px
}
.h2-game-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    flex-shrink:0;
    min-height:48px;
    padding:12px 19px;
    border:1px solid #64675e;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    transition:background .2s,color .2s,border-color .2s
}
.h2-game-cta>span{
    font-size:21px;
    line-height:1;
    transition:transform .2s
}
.h2-game-card:hover .h2-game-cta,.h2-game-card:focus-visible .h2-game-cta{
    background:var(--h2-orange);
    border-color:var(--h2-orange);
    color:var(--h2-ink)
}
.h2-game-card:hover .h2-game-cta>span,.h2-game-card:focus-visible .h2-game-cta>span{
    transform:translate(2px,-2px)
}
.h2-game-card:hover .h2-game-art img,.h2-game-card:focus-visible .h2-game-art img{
    transform:scale(1.035)
}
@media(max-width:1100px){
    .h2-game-card{
        grid-template-columns:280px minmax(0,1fr)
    }
    .h2-game-copy{
        padding:30px;
        gap:22px
    }
    .h2-play .h2-game-copy h2{
        font-size:31px
    }
    .h2-game-cta{
        gap:17px
    }
}
@media(max-width:900px){
    .h2-game-card{
        grid-template-columns:38% minmax(0,1fr)
    }
    .h2-game-copy{
        display:block;
        padding:26px 30px
    }
    .h2-game-cta{
        margin-top:18px
    }
    .h2-game-art img{
        object-position:50% 47%
    }
}
@media(max-width:560px){
    .h2-play{
        padding-bottom:50px
    }
    .h2-game-card{
        grid-template-columns:1fr;
        min-height:0
    }
    .h2-game-art{
        min-height:0;
        aspect-ratio:2.2
    }
    .h2-game-art img{
        object-position:50% 43%
    }
    .h2-game-copy{
        padding:23px 25px 25px
    }
    .h2-play .h2-game-copy h2{
        font-size:31px;
        margin-top:10px
    }
    .h2-page .h2-game-description{
        font-size:13px;
        margin-top:10px
    }
    .h2-game-description br{
        display:none
    }
    .h2-game-cta{
        margin-top:18px;
        min-height:44px
    }
}
@media(prefers-reduced-motion:reduce){
    .h2-page *,.h2-page *::before,.h2-page *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}

/* Shared navigation remains available across the public pages. */
.h2-site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--h2-paper);
    border-bottom:1px solid #d9d9ce
}
.h2-nav>a:hover::after,.h2-nav>a[aria-current=page]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:5px;
    height:2px;
    background:#be5200
}
.h2-page [id]{
    scroll-margin-top:128px
}
@media(max-width:800px){
    .h2-page [id]{
        scroll-margin-top:108px
    }
}
.h2-counter{
    display:inline-grid;
    font:inherit;
    font-variant-numeric:tabular-nums
}
.h2-counter>span,.h2-counter::after{
    grid-area:1/1
}
.h2-counter::after{
    content:attr(data-count);
    visibility:hidden
}
.h2-counter-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}

@media (min-width:801px) and (max-height:850px) {
    .h2-hero-grid {
        padding-bottom:clamp(24px,4vh,34px);
    }
    .h2-hero h1 {
        margin-top:20px;
        margin-bottom:26px;
    }
    .h2-page .h2-hero-description {
        margin-top:26px;
    }
    .h2-hero .h2-actions {
        margin-top:22px;
    }
}

/* Homepage illustration and animation states. */
.h2-system {
    color:#292922;
    font-family:Arial, sans-serif;
    max-width:620px;
    margin:auto;
}
.h2-art-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 8px 12px;
    font-family:monospace;
    font-size:11px;
    letter-spacing:2px;
}
.h2-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:#292922;
    border-radius:50%;
    margin-right:10px;
    vertical-align:middle
}
.h2-motion {
    width:38px;
    height:38px;
    border:1px solid #30251e;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:transparent;
    cursor:pointer;
    color:#292922
}
.h2-motion svg {
    width:15px;
    height:15px;
    fill:currentColor
}
.h2-system-svg {
    width:100%;
    height:auto;
    display:block;
    overflow:visible
}
.h2-scene,.h2-node-scene,.h2-label-scene,.h2-route-set {
    transition:opacity .3s ease;
    opacity:0;
    pointer-events:none
}
.h2-system[data-mode=web] .h2-scene-web,.h2-system[data-mode=security] .h2-scene-security,.h2-system[data-mode=mobile] .h2-scene-mobile,
.h2-system[data-mode=web] .h2-node-scene-web,.h2-system[data-mode=security] .h2-node-scene-security,.h2-system[data-mode=mobile] .h2-node-scene-mobile,
.h2-system[data-mode=web] .h2-label-scene-web,.h2-system[data-mode=security] .h2-label-scene-security,.h2-system[data-mode=mobile] .h2-label-scene-mobile,
.h2-system[data-mode=web] .h2-route-web,.h2-system[data-mode=security] .h2-route-security,.h2-system[data-mode=mobile] .h2-route-mobile {
    opacity:1
}

.h2-sign-check {
    display:none !important
}
.h2-shield-pending,.h2-shield-checking,.h2-security-check {
    transition:opacity .24s ease,transform .3s ease;
    transform-origin:279px 253px
}
.h2-shield-pending {
    opacity:1
}
.h2-shield-checking {
    opacity:0
}
.h2-shield-checking circle:nth-child(1) {
    animation:h2-dot-bounce .8s ease-in-out infinite
}
.h2-shield-checking circle:nth-child(2) {
    animation:h2-dot-bounce .8s ease-in-out .16s infinite
}
.h2-shield-checking circle:nth-child(3) {
    animation:h2-dot-bounce .8s ease-in-out .32s infinite
}
@keyframes h2-dot-bounce {
    0%,70%,100% {
        transform:translateY(0)
    }
    35% {
        transform:translateY(-5px)
    }
}
.h2-security-check {
    opacity:0;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:opacity .2s ease,stroke-dashoffset .65s ease
}
.h2-system[data-mode=security][data-checking="true"] .h2-shield-pending {
    opacity:0
}
.h2-system[data-mode=security][data-checking="true"] .h2-shield-checking {
    opacity:1
}
.h2-system[data-mode=security][data-verified="true"] .h2-shield-pending,.h2-system[data-mode=security][data-verified="true"] .h2-shield-checking {
    opacity:0
}
.h2-system[data-mode=security][data-verified="true"] .h2-security-check {
    opacity:1;
    stroke-dashoffset:0
}
.h2-web-login,.h2-web-email,.h2-web-password,.h2-web-menu,.h2-web-response-primary,.h2-web-dashboard,.h2-web-menu-pointer {
    transition:opacity .3s ease
}
.h2-web-menu,.h2-web-response-primary,.h2-web-dashboard,.h2-web-menu-pointer {
    opacity:0
}
.h2-system[data-web-page=intro] .h2-web-email,.h2-system[data-web-page=intro] .h2-web-password,.h2-system[data-web-page=email] .h2-web-password {
    opacity:0
}
.h2-system:is([data-web-page=profile],[data-web-page=menu],[data-web-page=dashboard]) .h2-web-login {
    opacity:0
}
.h2-system:is([data-web-page=profile],[data-web-page=menu],[data-web-page=dashboard]) .h2-web-menu,
.h2-system:is([data-web-page=profile],[data-web-page=menu]) .h2-web-response-primary,
.h2-system[data-web-page=menu] .h2-web-menu-pointer,
.h2-system[data-web-page=dashboard] .h2-web-dashboard {
    opacity:1
}
.h2-web-sales-item {
    transition:fill .2s ease
}
.h2-system:is([data-web-page=menu],[data-web-page=dashboard]) .h2-web-sales-item {
    fill:#ff8c2f
}
.h2-web-sales-trend {
    stroke-dasharray:140;
    stroke-dashoffset:140;
    transition:stroke-dashoffset .8s ease .15s
}
.h2-web-sales-bars {
    transform:scaleY(0);
    transform-origin:0 136px;
    transition:transform .55s ease .45s
}
.h2-system[data-web-page=dashboard] .h2-web-sales-trend {
    stroke-dashoffset:0
}
.h2-system[data-web-page=dashboard] .h2-web-sales-bars {
    transform:none
}
.h2-web-submit-bg {
    transition:fill .3s ease
}
.h2-web-submit {
    transition:transform .25s ease
}
.h2-web-otp {
    opacity:0;
    transition:opacity .25s ease
}
.h2-system:is([data-web-page=otp],[data-web-page=signed-in]) .h2-web-submit {
    transform:translateY(26px)
}
.h2-system:is([data-web-page=otp],[data-web-page=signed-in]) .h2-web-otp {
    opacity:1
}
.h2-web-submit-label {
    transition:opacity .25s ease
}
.h2-web-form-confirm {
    opacity:0;
    stroke-dasharray:36;
    stroke-dashoffset:36;
    transition:opacity .2s ease,stroke-dashoffset .45s ease
}
.h2-system[data-web-page=signed-in] .h2-web-submit-bg {
    fill:#ff8c2f
}
.h2-system[data-web-page=signed-in] .h2-web-submit-label {
    opacity:0
}
.h2-system[data-web-page=signed-in] .h2-web-form-confirm {
    opacity:1;
    stroke-dashoffset:0
}
.h2-mobile-progress,.h2-mobile-complete {
    transition:opacity .35s ease,transform .35s ease
}
.h2-mobile-complete {
    opacity:0;
    transform:translateY(8px) scale(.9);
    transform-origin:282px 236px
}
.h2-system[data-mode=mobile][data-mobile-state="complete"] .h2-mobile-complete {
    opacity:1;
    transform:none
}
.h2-system[data-mode=mobile][data-mobile-state="complete"] .h2-mobile-progress {
    opacity:0
}
.h2-mobile-progress-bar {
    transition:stroke-dasharray .4s ease
}
.h2-system[data-mode=mobile] .h2-mobile-progress-label {
    font-variant-numeric:tabular-nums
}
.h2-flow-packet {
    fill:none;
    stroke:#fff8eb;
    stroke-width:3.5;
    stroke-linecap:round;
    stroke-dasharray:9 509
}
.h2-wire {
    stroke:#30251e;
    stroke-width:2;
    fill:none;
    stroke-linejoin:miter;
    stroke-linecap:butt;
    opacity:.9
}
.h2-wire-return {
    stroke-dasharray:5 6;
    opacity:.82
}
.h2-wire-request {
    stroke-width:2.2
}
.h2-wire-emphasis {
    stroke:#2b2722;
    stroke-width:3.1;
    stroke-dasharray:7 6;
    opacity:1;
    filter:drop-shadow(0 0 1.5px rgba(48,37,30,.22))
}
.h2-system[data-mode=web] .h2-route-web .h2-wire-emphasis {
    stroke:#30251e
}
.h2-system[data-mode=security] .h2-route-security .h2-wire-emphasis {
    stroke:#30251e
}
.h2-system[data-mode=mobile] .h2-route-mobile .h2-wire-emphasis {
    stroke:#30251e
}
.h2-token {
    fill:#fff8eb;
    stroke:#30251e;
    stroke-width:1.2
}
.h2-react {
    transition:transform .3s ease, opacity .3s ease, fill .3s ease, stroke .3s ease, filter .3s ease
}
.h2-server-lights circle {
    transition:r .3s ease, opacity .3s ease, filter .3s ease
}
.h2-art-bottom {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:-4px
}
.h2-mode-switch {
    display:flex;
    gap:5px
}
.h2-mode-switch button {
    font:12px Arial,sans-serif;
    color:#292922;
    background:transparent;
    border:1px solid transparent;
    padding:10px 18px;
    border-radius:30px;
    cursor:pointer
}
.h2-mode-switch button[aria-pressed=true] {
    border-color:#292922
}
.h2-art-caption {
    max-width:480px;
    line-height:1.5;
    font-size:13px;
    margin:0;
    min-height:22px;
    text-align:center
}
@media (prefers-reduced-motion:reduce) {
    .h2-system * {
        transition:none !important;
        animation:none !important
    }
    .h2-flow-packet {
        display:none
    }
}

/* Match the static illustration used for reduced motion when LWA disables animations. */
body.lwa-disable-animations .h2-system .h2-flow-packet {
    display:none;
}

/* Language links remain visible beside the menu on small screens. */
.h2-header .h2-nav { margin-left:auto; }
.h2-language { display:flex; align-items:center; gap:0; flex-shrink:0; font-size:12px; }
.h2-language a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:44px; font-weight:400; }
.h2-language a + a::before { content:"|"; position:absolute; margin-left:-36px; color:#77766d; font-weight:400; }
.h2-language a[aria-current="true"] { font-weight:800; text-decoration:underline; text-underline-offset:5px; }
.h2-language a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
@media(max-width:800px) {
    .h2-header { gap:16px; }
    .h2-header .h2-nav { gap:18px; }
}
@media(max-width:560px) {
    .h2-header { flex-wrap:wrap; column-gap:8px; }
    .h2-header .h2-brand { order:0; margin-right:auto; }
    .h2-header .h2-language { order:1; }
    .h2-header .h2-menu-toggle { order:2; }
    .h2-header .h2-nav { order:3; margin-left:0; }
    .h2-language a { min-width:30px; }
    .h2-language a + a::before { margin-left:-30px; }
}