/* Site chrome (package B): floating navigation, company and language menus, the mobile sheet,
   footer, cookie banner, form result details and scrollbars.
   Loaded after system.css and before effects.css. Values come from the tokens in system.css :root.
   Motion here is state-change transitions only; the global keyframes live in effects.css. */

/* ---------- Scrollbars ---------- */
html { scrollbar-gutter: stable; scrollbar-color: #4a4a52 var(--band); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--band); }
::-webkit-scrollbar-thumb { background: #4a4a52; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); }

/* ---------- Floating navigation ---------- */
.site-nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); padding: var(--nav-top) var(--gutter) 0; }
.site-nav::before {
    content: '';
    position: absolute;
    inset: 0 0 -1.5rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--canvas) 45%, rgba(9, 9, 9, 0));
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard);
}
.site-nav.is-scrolled::before { opacity: 1; }

/* The only backdrop-filter on the site. */
.site-nav .site-nav-panel {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem 0.75rem;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-md);
    background: rgba(12, 12, 11, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: none;
    transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.site-nav.is-scrolled .site-nav-panel { background: rgba(12, 12, 11, 0.92); border-color: var(--line-2); box-shadow: var(--shadow-float); }
@media (min-width: 1280px) {
    .site-nav .site-nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

.site-nav .site-nav-logo { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: var(--radius-sm); transition: opacity var(--dur-fast) var(--ease-standard); }
.site-nav .site-nav-logo:hover { opacity: 0.8; }

.site-nav-links { display: flex; align-items: center; gap: 0.125rem; }
.site-nav .site-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    background: transparent;
    font: 500 var(--fs-ui)/1 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.site-nav .site-nav-link[aria-current="location"] { color: var(--ink-1); background: transparent; }
.site-nav .site-nav-link[aria-current="location"]::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.375rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-accent);
}
.site-nav .site-nav-link:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }

.site-nav .site-nav-actions { justify-self: end; align-items: center; gap: 0.75rem; padding-left: 1.25rem; border-left: 1px solid var(--line-1); }

/* Reading progress along the bottom edge of the pill (motion in effects.css). */
.nav-progress {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-accent);
    transform-origin: left center;
    transform: scaleX(var(--progress, 0));
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-standard);
}
html.mobile-menu-locked .nav-progress { opacity: 0; }

/* ---------- Company menu: "Company" stays a link; the chevron button discloses the panel ---------- */
.site-nav .company-nav { display: inline-flex; align-items: center; }
.site-nav .company-nav > .site-nav-link { padding-right: 0.25rem; }
.site-nav .company-nav > .site-nav-link[aria-current="location"]::after { right: 0.25rem; }
.site-nav .nav-disclosure {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-4);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.site-nav .nav-disclosure:hover,
.site-nav .company-nav.is-open .nav-disclosure { color: var(--ink-1); }
.site-nav .nav-disclosure:hover { background: rgba(255, 255, 255, 0.04); }
.site-nav .nav-disclosure svg { width: 0.875rem; height: 0.875rem; transition: rotate var(--dur-fast) var(--ease-out); }
.site-nav .nav-disclosure[aria-expanded="true"] svg { rotate: 180deg; }

.site-nav .company-nav-menu,
.site-nav .nav-lang-menu {
    position: absolute;
    top: calc(100% + 1.1875rem); /* 8px below the pill */
    z-index: 1;
    margin: 0;
    background: var(--surface-4);
    border: 1px solid var(--line-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}
.site-nav .company-nav-menu {
    left: 50%;
    width: 28rem;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    translate: -50% -4px;
    transition: opacity 120ms var(--ease-in), translate 120ms var(--ease-in), visibility 0s linear 120ms;
}
/* A bridge over the gap so the pointer can travel from the link to the panel. */
.site-nav .company-nav-menu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.25rem; }
.site-nav .company-nav.is-open .company-nav-menu {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), visibility 0s;
}
/* Without JavaScript the panel still opens on hover and keyboard focus. */
html:not(.js) .site-nav .company-nav:is(:hover, :focus-within) .company-nav-menu { opacity: 1; visibility: visible; translate: -50% 0; }
.company-nav-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.company-nav-columns > div { display: grid; align-content: start; gap: 0.125rem; }
.site-nav .nav-menu-heading { margin: 0; padding: 0.5rem 0.75rem 0.25rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }

.site-nav .nav-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.125rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.site-nav .nav-menu-item:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
@media (pointer: coarse) { .site-nav .nav-menu-item { min-height: 2.75rem; } }
.nav-menu-title { font: 500 var(--fs-ui)/1.3 var(--font-sans); letter-spacing: -0.005em; }
.nav-menu-detail { font: 400 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }
.site-nav .company-nav-menu .nav-menu-item[aria-current] { color: var(--ink-1); box-shadow: inset 2px 0 var(--brand-accent); }
.site-nav .company-nav-menu .nav-menu-item--cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
    border-top: 1px solid var(--line-1);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--ink-1);
}
.site-nav .nav-menu-item--cta > span[aria-hidden] { color: var(--brand-accent); transition: translate var(--dur-fast) var(--ease-out); }
.site-nav .nav-menu-item--cta:is(:hover, :focus-visible) > span[aria-hidden] { translate: 3px 0; }

/* ---------- Language menu ---------- */
.site-nav .nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.site-nav .nav-lang svg { width: 1rem; height: 1rem; flex: none; }
.site-nav .nav-lang:hover,
.site-nav .nav-lang[aria-expanded="true"] { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
.nav-lang-code { font: 500 var(--fs-meta)/1 var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase; }
.site-nav .nav-lang-menu {
    right: 0;
    display: grid;
    gap: 0.125rem;
    width: 13rem;
    padding: 0.375rem;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete;
}
@starting-style {
    .site-nav .nav-lang-menu:not([hidden]) { opacity: 0; translate: 0 -4px; }
}
.site-nav .nav-lang-menu[hidden] {
    display: none;
    opacity: 0;
    translate: 0 -4px;
    transition-duration: 120ms;
    transition-timing-function: var(--ease-in);
}
.site-nav .nav-lang-item { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; }
.nav-lang-tag { min-width: 1.5rem; font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: 0.02em; color: var(--ink-4); }
.site-nav .nav-lang-item > span:last-child { font: 500 var(--fs-ui)/1.3 var(--font-sans); }
.site-nav .nav-lang-item[aria-current] { color: var(--ink-1); }
.site-nav .nav-lang-item[aria-current]::after { content: ''; width: 0.375rem; height: 0.375rem; margin-left: auto; border-radius: 50%; background: var(--brand-accent); }

.site-nav .nav-cta { margin-left: 0.25rem; }

/* ---------- Menu toggle (below 1280px): three lines that fold into a cross ---------- */
.site-nav .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.site-nav .nav-toggle:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; overflow: visible; }
.nav-toggle-line { transform-box: view-box; transform-origin: 12px 12px; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line--top { transform: rotate(45deg) translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line--middle { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-line--bottom { transform: rotate(-45deg) translateY(-6px); }

/* ---------- Mobile sheet ---------- */
#mobile-navigation {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    padding: 5.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background: var(--canvas);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: calc(var(--nav-bottom) + 0.75rem) 1rem; /* a focused link never scrolls under the nav bar */
    opacity: 1;
    translate: 0 0;
    transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), display 200ms allow-discrete;
}
@starting-style {
    #mobile-navigation:not([hidden]) { opacity: 0; translate: 0 -8px; }
    #mobile-navigation:not([hidden]) .mobile-nav-link { opacity: 0; translate: 0 -4px; }
}
#mobile-navigation[hidden] {
    display: none;
    opacity: 0;
    translate: 0 -8px;
    transition-duration: 140ms;
    transition-timing-function: var(--ease-in);
}
/* While the sheet is open the bar is opaque and its scrim is on, so links scrolled under it never show through. */
html.mobile-menu-locked .site-nav .site-nav-panel { background: var(--canvas); border-color: var(--line-2); }
html.mobile-menu-locked .site-nav::before { opacity: 1; }
@media (min-width: 768px) { .mobile-nav-inner { max-width: 40rem; margin-inline: auto; } }
.mobile-nav-group { display: grid; padding-block: 1rem; }
.mobile-nav-group:first-child { padding-top: 0; }
.mobile-nav-group + .mobile-nav-group { border-top: 1px solid var(--line-1); }
.mobile-nav-label { display: block; margin: 0 0 0.25rem; padding-inline: 0.75rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.mobile-nav-link {
    --stagger-delay: min(calc(var(--i, 0) * 20ms), 200ms);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    font: 500 1.0625rem/1.3 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), opacity 200ms var(--ease-out) var(--stagger-delay), translate 200ms var(--ease-out) var(--stagger-delay);
}
.mobile-nav-link--sub { font-size: var(--fs-small); }
.mobile-nav-link:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
.mobile-nav-link[aria-current] { color: var(--ink-1); }
.mobile-nav-link[aria-current]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    width: 2px;
    border-radius: 2px;
    background: var(--brand-accent);
}
.mobile-nav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; }
/* Nine language links, three to a row, under a full-width label. */
.mobile-nav-lang { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.5rem; }
.mobile-nav-lang .mobile-nav-label { grid-column: 1 / -1; }
#mobile-navigation .mobile-nav-cta { width: 100%; margin-top: 1rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: clip; padding-inline: var(--gutter); background: var(--canvas); border-top: 1px solid var(--line-1); }
.site-footer-inner { max-width: var(--container); margin-inline: auto; padding-block: 3.5rem 0; }
.site-footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--grid-gap); align-items: start; }
.site-footer-brand { grid-column: 1 / -1; max-width: 28rem; }
@media (min-width: 768px) {
    .site-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .site-footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .site-footer-brand { grid-column: 1 / span 5; }
    .site-footer-nav:nth-of-type(1) { grid-column: 7 / span 2; }
    .site-footer-nav:nth-of-type(2) { grid-column: 9 / span 2; }
    .site-footer-nav:nth-of-type(3) { grid-column: 11 / span 2; }
}
.site-footer-logo { display: inline-flex; align-items: center; margin-bottom: 1.25rem; border-radius: var(--radius-sm); transition: opacity var(--dur-fast) var(--ease-standard); }
.site-footer-logo:hover { opacity: 0.8; }
.site-footer-intro { margin: 0 0 1.25rem; font: 400 var(--fs-small)/1.65 var(--font-sans); letter-spacing: var(--tr-body); color: var(--ink-3); text-wrap: pretty; }
.site-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.site-footer .site-footer-social { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font: 500 var(--fs-ui)/1.2 var(--font-sans); color: var(--ink-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.site-footer .site-footer-social:hover { color: var(--ink-1); }
.site-footer-social svg { width: 1rem; height: 1rem; flex: none; }
.footer-heading { margin: 0 0 0.75rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.footer-links { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-links a { display: inline-block; padding-block: 0.25rem; font: 400 var(--fs-ui)/1.5 var(--font-sans); color: var(--ink-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.site-footer .footer-links a:hover { color: var(--ink-1); }
.site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line-1); }
.footer-meta { margin: 0; font: 400 var(--fs-meta)/1.5 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.site-footer .footer-top { margin-left: auto; font-size: var(--fs-ui); }
.footer-wordmark {
    display: block;
    height: 0.74em; /* the crop lands on the baseline, so U and E keep their bottoms and it reads TUNET */
    overflow: hidden;
    margin-top: 2rem;
    font: 600 clamp(5rem, 19vw, 17rem)/0.74 var(--font-display);
    letter-spacing: -0.04em;
    white-space: nowrap;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, rgba(247, 244, 236, 0.09)) 20%, color-mix(in srgb, var(--accent) 6%, rgba(247, 244, 236, 0.035)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* ---------- Cookie banner ---------- */
#cookie-banner {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-cookie);
    padding: 0 var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
    pointer-events: none;
    animation: rise 240ms var(--ease-out);
    transition: opacity 140ms var(--ease-in), translate 140ms var(--ease-in);
}
#cookie-banner.is-leaving { opacity: 0; translate: 0 12px; }
html.mobile-menu-locked #cookie-banner { visibility: hidden; }
#cookie-banner .cookie-banner-panel {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem 1.5rem;
    max-width: 56rem;
    margin-inline: auto;
    padding: 1rem 1.125rem;
    background: var(--surface-4);
    border: 1px solid var(--line-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}
@media (min-width: 768px) {
    #cookie-banner .cookie-banner-panel { flex-direction: row; align-items: center; padding: 1rem 1.25rem 1rem 1.5rem; }
}
#cookie-banner .cookie-banner-text { flex: 1 1 auto; margin: 0; max-width: none; font: 400 var(--fs-ui)/1.55 var(--font-sans); color: var(--ink-2); }
#cookie-banner .cookie-banner-text a { color: var(--ink-1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-accent) 60%, transparent); text-underline-offset: 0.2em; }
#cookie-banner .cookie-banner-text a:hover { color: var(--ink-1); text-decoration-color: var(--brand-accent); }
.cookie-banner-actions { display: flex; flex-shrink: 0; gap: 0.5rem; }
/* Buttons share the row by their labels, so "Necessary only" stays on one line at 320px. */
.cookie-banner-actions > * { flex: 1 1 auto; }
@media (min-width: 640px) { .cookie-banner-actions > * { flex: none; } }
/* Later pages of a visit keep the banner still (cookie_banner.html adds the class), so a page transition never blinks it. */
#cookie-banner.is-repeat { animation: none; }
/* While the banner is up, focus and anchor scrolling keep their target above it (--cookie-h is its measured height),
   and the footer grows by the same amount so its last links can scroll clear of it. The two match, so view()
   timelines, which inset by the scroll padding, still finish at the foot of the page (the wordmark settles). */
html:has(#cookie-banner) { scroll-padding-bottom: calc(var(--cookie-h, 12rem) + 1rem); }
html:has(#cookie-banner) .site-footer { padding-bottom: calc(var(--cookie-h, 12rem) + 1rem); }

/* ---------- Form results (the panels are .form-result in system.css) ---------- */
/* The result slot holds focus only while a request is in flight (base.html), then hands it to the result heading;
   it is not a control, so it draws no ring of its own around an empty box. */
[data-form-result]:focus,
[data-form-result]:focus-visible { outline: none; }
.form-result h3 { display: flex; align-items: center; gap: 0.5rem; }
.form-result-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent); }
.form-result--error .form-result-icon { color: #f87171; }
.form-result .form-result-text { margin: 0 0 0.5rem; font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--ink-2); }
.form-result .form-result-text:last-child { margin-bottom: 0; }
.form-result .text-link { min-height: 2.75rem; }

/* Copy buttons are hidden by effects.js when the clipboard API is missing. */
[data-copy][hidden] { display: none; }

/* ---------- Reduced motion: state changes are instant ---------- */
@media (prefers-reduced-motion: reduce) {
    .site-nav::before,
    .site-nav .site-nav-panel,
    .site-nav .company-nav-menu,
    .site-nav .company-nav.is-open .company-nav-menu,
    .site-nav .nav-lang-menu,
    .site-nav .nav-disclosure svg,
    .nav-toggle-line,
    #mobile-navigation,
    .mobile-nav-link,
    #cookie-banner { transition: none; }
    #cookie-banner { animation: none; }
}

/* ---------- Print: the page content only ---------- */
@media print {
    .site-nav,
    #mobile-navigation,
    #cookie-banner,
    .footer-wordmark,
    .skip-link,
    main .section-nav[data-section-nav] { display: none; }
    #main-content { padding-top: 0; }
    html:has(#cookie-banner) .site-footer { padding-bottom: 0; }
}