/* One navigation treatment for the website and the web application. */
.site-header, .app-header {
    background: linear-gradient(115deg, #d6e3d8 0%, #e5ede6 35%, #edddcb 65%, #d3e4e0 100%);
    background-size: 240% 100%;
    animation: tuttd-header-flow 18s ease-in-out infinite;
    border-bottom-color: rgba(32, 42, 38, .18);
    box-shadow: 0 5px 24px rgba(32, 42, 38, .06);
    transition: box-shadow .3s ease;
}
.site-header.is-scrolled, .app-header:focus-within { box-shadow: 0 5px 24px rgba(32, 42, 38, .13); }
.app-brand, .brand { position: relative; display: inline-block; text-decoration: none; }
.app-brand > img, .brand > img {
    transform-origin: 15% 75%;
    animation: tuttd-brand-arrive 1.15s cubic-bezier(.22,.7,.3,1);
    transition: transform .35s cubic-bezier(.22,.7,.3,1);
}
.app-brand::after, .brand::after {
    content: ""; position: absolute; height: 2px; left: 1px; right: 1px; bottom: -2px;
    background: linear-gradient(90deg, transparent, #b76345, transparent);
    opacity: 0; transform: scaleX(.25); transform-origin: 15% center;
    transition: opacity .35s ease, transform .45s cubic-bezier(.22,.7,.3,1);
}
.app-brand:hover > img, .brand:hover > img,
.app-brand:focus-visible > img, .brand:focus-visible > img { transform: translateY(-.5px) rotate(-.3deg) scale(1.012); }
.app-brand:hover::after, .brand:hover::after,
.app-brand:focus-visible::after, .brand:focus-visible::after { opacity: .8; transform: scaleX(1); }
@keyframes tuttd-brand-arrive {
    0% { opacity: 0; transform: translateY(2px) scale(.985); }
    60% { opacity: 1; transform: translateY(-.5px) scale(1.005); }
    100% { opacity: 1; transform: none; }
}
@keyframes tuttd-header-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
    .site-header, .app-header, .app-brand > img, .brand > img { animation: none; }
    .app-brand > img, .brand > img, .app-brand::after, .brand::after { transition: none; }
    .app-brand:hover > img, .brand:hover > img, .app-brand:focus-visible > img, .brand:focus-visible > img { transform: none; }
}

/* Cropped vector wordmark sits comfortably in the header without transparent artboard padding. */
.app-header .app-brand, .site-header .brand { display:flex;align-items:center;flex:0 0 auto;width:auto;height:50%; }
.app-header .app-brand > img, .site-header .brand > img { display:block;width:auto;height:100%;max-width:none; }
.app-nav-shell { gap:26px; }
.account-link span { max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.brand-band { display:flex;align-items:center;justify-content:center;flex:none;min-height:80px;padding:22px 26px;background:linear-gradient(110deg,#202a26,#344c40);border-top:1px solid rgba(183,99,69,.45);color:#f3efe5;text-align:center; }
.brand-band p { margin:0;font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:.055em;word-spacing:.18em;line-height:1.3; }
.app-body { display:flex;flex-direction:column;min-height:100dvh; }
.app-body > #app-main { flex:1; }
.app-header { flex:none; }
@media(max-width:1200px){
 .app-menu-button{margin-left:auto;width:42px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;}
 .app-menu-button span{position:absolute;width:1px;height:1px;overflow:hidden;}
 .app-menu-button i{width:21px;height:2px;background:#202a26;}
 .app-menu-button[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg);}
 .app-menu-button[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg);}
 .app-nav{position:absolute;top:84px;right:0;left:0;padding:12px 25px 22px;display:none;flex-direction:column;background:#e5ede6;border-bottom:1px solid rgba(32,42,38,.16);}
 .app-nav.is-open{display:flex;}.app-nav a{min-height:48px;border-bottom:1px solid rgba(32,42,38,.16);}.app-nav a img{display:block;}.app-nav a::after{display:none;}
 .account-link span{display:none;}.account-link{width:44px;padding:0;justify-content:center;}.app-nav-actions{margin-left:0;}
}
@media(max-width:900px){.app-nav-shell,.nav-shell{height:72px;}.app-nav,.site-nav{top:72px;}}
@media(max-width:640px){.app-nav-shell{gap:8px;}.app-nav-actions{gap:6px;}.app-menu-button,.account-link{width:36px;height:36px;}.app-language summary{height:36px;padding-inline:5px;}.nav-shell{gap:12px;}.nav-actions{gap:8px;}.brand-band{min-height:68px;padding:20px 16px;}.brand-band p{font-size:23px;letter-spacing:.03em;}}
@media(max-width:360px){.app-nav-shell,.nav-shell{height:62px;}.app-nav,.site-nav{top:62px;}.app-menu-button,.account-link{width:30px;height:32px;}.app-nav-shell{gap:6px;}.app-language summary{padding-inline:3px;font-size:11px;}.app-nav-actions{gap:4px;}.nav-shell{padding-inline:16px;gap:8px;}.nav-actions{gap:4px;}}

/* Color moves through the original vector letterforms on hover and keyboard focus. */
@supports ((mask-image:url("/assets/vector/tuttd-wordmark.svg")) or (-webkit-mask-image:url("/assets/vector/tuttd-wordmark.svg"))) {
 .app-brand::before,.brand::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,#b76345 0%,#46755a 25%,#3e6d8c 50%,#b47d38 75%,#b76345 100%);background-size:300% 100%;-webkit-mask:url("/assets/vector/tuttd-wordmark.svg") center/contain no-repeat;mask:url("/assets/vector/tuttd-wordmark.svg") center/contain no-repeat;opacity:0;transform-origin:15% 75%;transition:opacity .3s ease,transform .35s cubic-bezier(.22,.7,.3,1);}
 .app-brand:hover::before,.brand:hover::before,.app-brand:focus-visible::before,.brand:focus-visible::before{opacity:1;animation:tuttd-letter-colors 3s linear infinite;transform:translateY(-.5px) rotate(-.3deg) scale(1.012);}
 @keyframes tuttd-letter-colors{0%{background-position:0% 50%;}100%{background-position:100% 50%;}}
 @media(prefers-reduced-motion:reduce){.app-brand::before,.brand::before{transition:none;}.app-brand:hover::before,.brand:hover::before,.app-brand:focus-visible::before,.brand:focus-visible::before{animation:none;transform:none;}}
}