/*
   TOM.COOL STUDIO LAUNCHER
   The shared service switcher. Each studio supplies only --launcher-accent
   and --launcher-accent-rgb so the behaviour stays identical while the
   surrounding site keeps its own character.
*/
:root {
    --launcher-accent: #a5b4fc;
    --launcher-accent-rgb: 165, 180, 252;
    --public-shell-max: 1400px;
    --public-shell-gutter: 32px;
}

/* Every full public header keeps its background full-bleed while placing all
   interactive content on the same centred rail. */
.public-shell-frame {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--public-shell-max);
    margin-inline: auto;
    padding-inline: var(--public-shell-gutter);
}

.public-shell-brand-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    transform: none;
}

.public-shell-brand-link:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.public-shell-brand-link:hover img { transform: none; }

.public-shell-brand-link:focus-visible,
.public-shell-local-link:focus-visible {
    outline: 2px solid var(--launcher-accent);
    outline-offset: 3px;
    border-radius: .5rem;
}

.public-shell-brand-link[data-brand-surface="light"]:focus-visible {
    outline-color: #211e29;
}

.public-shell-local-link {
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

.public-shell-local-link::before { content: none !important; }
.public-shell-local-link:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.site-apps {
    --launcher-accent: #a5b4fc;
    --launcher-accent-rgb: 165, 180, 252;
    position: relative;
    z-index: 3201;
}

/* One service-aware wordmark on every header. The domain stays adjacent to
   its leading dot and remains white; only the active service carries colour. */
.service-brand {
    --service-brand-start: #a5b4fc;
    --service-brand-end: #62c7ee;
    display: inline-flex !important;
    min-width: 0;
    align-items: baseline;
    gap: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    /* Keep descenders (notably the `g` in design.tom.cool) inside the same
       44px brand control on every service shell. */
    font: 850 1rem/1.15 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.service-brand[data-current-service="web"] { --service-brand-start: #62c7ee; --service-brand-end: #7c8ff7; }
.service-brand[data-current-service="ai"] { --service-brand-start: #d59cff; --service-brand-end: #62c7ee; }
.service-brand[data-current-service="bedrijf"] { --service-brand-start: #79b8ff; --service-brand-end: #6fd4b1; }
.service-brand[data-current-service="help"] { --service-brand-start: #6fd4b1; --service-brand-end: #ffd166; }
.service-brand[data-current-service="design"] { --service-brand-start: #ffb765; --service-brand-end: #ef8b78; }
.service-brand[data-current-service="shop"] { --service-brand-start: #ff875d; --service-brand-end: #ffb765; }
.service-brand[data-current-service="home"][data-brand-surface="light"] {
    --service-brand-start: #5b46ce;
    --service-brand-end: #1f6fa8;
}

.service-brand[data-current-service="web"][data-brand-surface="light"] {
    --service-brand-start: #0b668f;
    --service-brand-end: #3f51b5;
}

.service-brand[data-current-service="ai"][data-brand-surface="light"] {
    --service-brand-start: #7a2f9e;
    --service-brand-end: #176d8e;
}

.service-brand[data-current-service="bedrijf"][data-brand-surface="light"] {
    --service-brand-start: #1f5d9e;
    --service-brand-end: #2c7054;
}

.service-brand[data-current-service="help"][data-brand-surface="light"] {
    --service-brand-start: #1f7350;
    --service-brand-end: #8a5a00;
}

.service-brand[data-current-service="design"][data-brand-surface="light"] {
    --service-brand-start: #a64214;
    --service-brand-end: #8d3d55;
}

.service-brand[data-current-service="shop"][data-brand-surface="light"] {
    --service-brand-start: #b83b12;
    --service-brand-end: #8f4700;
}

.service-brand[data-brand-surface="light"] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.service-brand-prefix {
    color: var(--service-brand-start);
    background: linear-gradient(135deg, var(--service-brand-start), var(--service-brand-end));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-brand-domain {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.service-brand[data-brand-surface="light"] .service-brand-domain {
    color: #211e29 !important;
    -webkit-text-fill-color: #211e29;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* A compact entry point for special-purpose root pages that intentionally do
   not use the standard full header (errors, portal and transactional flows). */
.utility-apps-launcher {
    position: fixed !important;
    z-index: 10000 !important;
    top: max(.75rem, env(safe-area-inset-top));
    right: max(.75rem, env(safe-area-inset-right));
}

.site-apps-toggle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 4px;
    place-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #343242;
    border-radius: 14px;
    color: rgba(255, 255, 255, .88);
    background: linear-gradient(145deg, #29283b, #121219);
    box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 8px 22px rgba(0, 0, 0, .24);
    cursor: pointer;
    isolation: isolate;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.site-apps-toggle::before {
    position: absolute;
    z-index: -1;
    inset: 5px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 20%, rgba(var(--launcher-accent-rgb), .24), transparent 62%);
    content: '';
    opacity: 0;
    transform: scale(.82);
    transition: opacity .2s ease, transform .2s ease;
}

.site-apps-toggle span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 1.25px;
    background: currentColor;
    box-shadow: none;
    transition: background .2s ease, box-shadow .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

.site-apps-toggle span:nth-child(5) {
    border-radius: 1px;
    background: var(--launcher-accent);
    transform: rotate(45deg) scale(.92);
}

.site-apps-toggle:hover,
.site-apps-toggle[aria-expanded="true"] {
    border-color: rgba(var(--launcher-accent-rgb), .72);
    color: #fff;
    background: linear-gradient(145deg, #3a344a, #17151f);
    box-shadow: 0 12px 30px rgba(var(--launcher-accent-rgb), .18), inset 0 1px rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

/* Opening the panel must not move its anchor by one pixel. */
.site-apps-toggle[aria-expanded="true"] { transform: none; }

.site-apps-toggle:hover::before,
.site-apps-toggle[aria-expanded="true"]::before { opacity: 1; transform: scale(1); }
.site-apps-toggle:hover span,
.site-apps-toggle[aria-expanded="true"] span {
    background: #fff;
    transform: scale(1.12);
}

.site-apps-toggle:hover span:nth-child(5),
.site-apps-toggle[aria-expanded="true"] span:nth-child(5) {
    background: var(--launcher-accent);
    transform: rotate(45deg) scale(1.12);
}

.site-apps-toggle:focus-visible,
.site-apps-menu a:focus-visible {
    outline: 2px solid var(--launcher-accent);
    outline-offset: 3px;
}

.site-apps-menu {
    position: absolute;
    z-index: 3200;
    display: block !important;
    top: calc(100% + 12px);
    right: 0;
    width: min(26.5rem, calc(100vw - 24px));
    padding: .85rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1.25rem;
    color: #f8f8ff;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--launcher-accent-rgb), .16), transparent 38%),
        rgba(12, 13, 25, .97);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

.site-apps-menu[hidden] { display: none !important; }
.site-apps-menu::before { content: none !important; }
.site-apps-menu .site-apps-tile::before { content: none !important; display: none !important; }

.site-apps-intro {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: .7rem;
    align-items: center;
    margin: .1rem .15rem .8rem;
}

.site-apps-intro-mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgba(var(--launcher-accent-rgb), .33);
    border-radius: .82rem;
    color: var(--launcher-accent);
    background: rgba(var(--launcher-accent-rgb), .12);
    font-size: 0;
}

.site-apps-eyebrow {
    display: block;
    margin-bottom: .1rem;
    color: var(--launcher-accent);
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-apps-intro p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .79rem; line-height: 1.25; }

.site-apps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    width: 100%;
}

.site-apps-tile {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) .8rem;
    gap: .58rem;
    align-items: center;
    min-width: 0;
    min-height: 3.9rem;
    padding: .58rem;
    border: 1px solid transparent;
    border-radius: .88rem;
    color: #f8f8ff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

/* Override the previous studio-specific menu grids without touching the rest
   of each studio's navigation. */
.site-apps-menu .site-apps-tile {
    grid-template-columns: 2.2rem minmax(0, 1fr) .8rem;
    grid-template-rows: none;
    column-gap: .58rem;
    row-gap: 0;
}

.site-apps-menu .site-apps-copy b,
.site-apps-menu .site-apps-copy small { grid-column: auto; }

.site-apps-tile:first-child { grid-column: 1 / -1; min-height: 3.55rem; }
.site-apps-tile:hover {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transform: translateY(-1px);
}

.site-apps-tile[aria-current="page"] {
    border-color: rgba(var(--launcher-accent-rgb), .28);
    background: rgba(var(--launcher-accent-rgb), .12);
}

.site-apps-mark {
    --app-icon: #a99dff;
    --app-icon-rgb: 169, 157, 255;
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid rgba(var(--app-icon-rgb), .3);
    border-radius: .7rem;
    color: var(--app-icon);
    background: linear-gradient(145deg, rgba(var(--app-icon-rgb), .2), rgba(var(--app-icon-rgb), .06));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .16);
    font-size: 0;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.site-apps-intro-mark,
.site-apps-mark {
    --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 4 4-4 4-4-4 4-4Zm-5 5 4 4-4 4-4-4 4-4Zm10 0 4 4-4 4-4-4 4-4Zm-5 5 4 4-4 4-4-4 4-4Z'/%3E%3C/svg%3E");
}

.site-apps-intro-mark::before,
.site-apps-mark::before {
    width: 1.14rem;
    height: 1.14rem;
    background: currentColor;
    content: '';
    -webkit-mask: var(--app-icon-mask) center / contain no-repeat;
    mask: var(--app-icon-mask) center / contain no-repeat;
}

.site-apps-intro-mark::before { width: 1.28rem; height: 1.28rem; }
.site-apps-tile:hover .site-apps-mark {
    border-color: rgba(var(--app-icon-rgb), .52);
    background: linear-gradient(145deg, rgba(var(--app-icon-rgb), .28), rgba(var(--app-icon-rgb), .1));
    transform: translateY(-1px) scale(1.03);
}

.site-apps-copy { display: grid; min-width: 0; gap: .06rem; }
.site-apps-copy b,
.site-apps-copy small {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}
.site-apps-copy b { font-size: .8rem; line-height: 1.15; letter-spacing: -.01em; }
.site-apps-copy small { color: rgba(255, 255, 255, .55); font-size: .65rem; line-height: 1.2; }
.site-apps-arrow { display: block; width: .82rem; height: .82rem; color: rgba(255, 255, 255, .35); background: currentColor; font-size: 0; transition: color .18s ease, transform .18s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.site-apps-tile:hover .site-apps-arrow { color: var(--launcher-accent); transform: translate(1px, -1px); }

.site-apps-tile[data-app-tone="home"] .site-apps-mark { --app-icon: #a99dff; --app-icon-rgb: 169, 157, 255; }
.site-apps-tile[data-app-tone="web"] .site-apps-mark { --app-icon: #62c7ee; --app-icon-rgb: 98, 199, 238; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='3'/%3E%3Cpath d='M2.5 8.5h19M7.5 13l-2 2 2 2m9-4 2 2-2 2m-5.5 1 2-6'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="shop"] .site-apps-mark { --app-icon: #ef8b78; --app-icon-rgb: 239, 139, 120; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M8.5 9V6.5a3.5 3.5 0 0 1 7 0V9m-5 5h3'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="design"] .site-apps-mark { --app-icon: #ffb765; --app-icon-rgb: 255, 183, 101; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8 4.4v9.6l-8 4.4-8-4.4V7.2l8-4.4Z'/%3E%3Cpath d='m4 7.2 8 4.5 8-4.5M12 11.7v9.5'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="help"] .site-apps-mark { --app-icon: #6fd4b1; --app-icon-rgb: 111, 212, 177; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='m5.6 5.6 4 4m4.8 4.8 4 4m0-12.8-4 4m-4.8 4.8-4 4'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="bedrijf"] .site-apps-mark { --app-icon: #79b8ff; --app-icon-rgb: 121, 184, 255; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V7l8-4 8 4v14M8 9h2m4 0h2M8 13h2m4 0h2M9 21v-4h6v4M2 21h20'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="ai"] .site-apps-mark { --app-icon: #d59cff; --app-icon-rgb: 213, 156, 255; --app-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='12' rx='3'/%3E%3Cpath d='M9 3h6M12 3v4M8.5 12h.01M15.5 12h.01M8 16c1.1.7 2.43 1 4 1s2.9-.3 4-1M2 11v4M22 11v4'/%3E%3C/svg%3E"); }
.site-apps-tile[data-app-tone="security"] .site-apps-mark { --app-icon: #ef8b78; --app-icon-rgb: 239, 139, 120; }

.site-apps-contact {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin-top: .65rem;
    border: 1px solid rgba(var(--launcher-accent-rgb), .27);
    border-radius: .76rem;
    color: var(--launcher-accent);
    background: rgba(var(--launcher-accent-rgb), .08);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.site-apps-contact:hover { color: #fff; background: rgba(var(--launcher-accent-rgb), .18); transform: translateY(-1px); }

/* The central site has one panel shared by its desktop and mobile buttons. */
.site-apps-menu--root {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
}
.site-apps-contact svg,
.site-apps-contact i {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

@media (max-width: 760px) {
    :root { --public-shell-gutter: 16px; }
}

@media (max-width: 760px) {
    .site-apps-menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: min(26.5rem, calc(100vw - 32px));
        max-height: calc(100svh - 5.5rem);
        padding: .7rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-apps-intro { margin-bottom: .65rem; }
    .site-apps-tile { min-height: 3.65rem; padding: .5rem; }
    .site-apps-mark { width: 2rem; height: 2rem; }
}

@media (max-width: 480px) {
    .site-apps-menu .site-apps-tile { grid-template-columns: 2rem minmax(0, 1fr); }
    .site-apps-arrow { display: none; }
}

@media (max-width: 370px) {
    .site-apps-menu { padding: .55rem; }
    .site-apps-grid { gap: .3rem; }
    .site-apps-menu .site-apps-tile { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .42rem; min-height: 3.45rem; }
    .site-apps-mark { width: 1.9rem; height: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .site-apps-toggle,
    .site-apps-toggle::before,
    .site-apps-toggle span,
    .site-apps-tile,
    .site-apps-arrow,
    .site-apps-contact { transition: none; }
}