/* FIN V2 - header: the /services pills. Floating glass pills over the hero
   (wordmark, language, "+" menu) instead of a navbar, ported from services.css
   onto V2's tokens. Two deliberate differences: the pills are sticky, because a
   multi-page site needs navigation while you scroll, and the glass is a little
   darker, because here it sits over running text, not only over the hero. */

.svc-nav{ position:sticky; top:0; z-index:80; height:0; overflow:visible; }
.svc-nav-pills{ display:flex; justify-content:center; align-items:center; gap:10px; padding:16px; pointer-events:none; }
.svc-nav-pills > *{ pointer-events:auto; }
main{ padding-top:76px; }
.hero{ padding-top:clamp(20px,4vw,44px); }

.svc-nav-pill{
  display:flex; align-items:center; gap:8px; height:44px; padding:0 18px;
  border-radius:999px; background:rgba(19,19,22,.62);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); cursor:pointer; color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:border-color .2s ease, background .2s ease, transform .2s var(--ease-spring), box-shadow .2s ease, height .2s ease;
}
.svc-nav-pill:hover{ border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.12); transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,197,94,.22); }
.svc-nav-scrolled .svc-nav-pill{ height:38px; }
.svc-nav-pill-brand{ gap:9px; }
.svc-nav-brand-word{ font-family:var(--num); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }

.svc-nav-pill-menu{ list-style:none; }
.svc-nav-pill-menu::-webkit-details-marker{ display:none; }
.svc-nav-menu-label{ font-weight:700; font-size:13.5px; }
.svc-nav-mini{ position:relative; }
.svc-nav-mini[open] .svc-nav-pill-menu{ border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.14); }
.svc-nav-plus{ position:relative; width:12px; height:12px; display:inline-block; transition:transform .3s var(--ease-spring); }
.svc-nav-plus::before,.svc-nav-plus::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; }
.svc-nav-plus::before{ left:0; right:0; top:50%; height:2px; margin-top:-1px; }
.svc-nav-plus::after{ top:0; bottom:0; left:50%; width:2px; margin-left:-1px; }
.svc-nav-mini[open] .svc-nav-plus{ transform:rotate(45deg); }

.svc-nav-mobile-panel{
  position:absolute; left:50%; top:56px; transform:translateX(-50%); z-index:85;
  width:min(300px,90vw); max-height:calc(100dvh - 96px); overflow:auto;
  background:var(--panel-2); border:1px solid var(--line-strong); border-radius:var(--r-m);
  box-shadow:0 24px 60px rgba(0,0,0,.55); padding:8px;
  display:flex; flex-direction:column; gap:2px;
  animation:svcNavPanelIn .22s var(--ease-spring);
}
@keyframes svcNavPanelIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px) scale(.97); } to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
.svc-nav-mobile-panel a{ color:rgba(242,244,247,.72); font-weight:600; font-size:14.5px; padding:11px 14px; border-radius:8px; text-align:center; transition:background .16s ease, color .16s ease; }
.svc-nav-mobile-panel a:not(.btn):hover{ background:rgba(34,197,94,.14); color:#fff; }
.svc-nav-mobile-panel a[aria-current="page"]{ color:var(--ink); background:rgba(34,197,94,.1); }
.svc-nav-mobile-panel a.btn{ margin-top:4px; min-height:46px; }
.svc-nav-mobile-panel a.btn-primary{ color:#04140b; }
.svc-nav-mobile-panel a.btn-ghost{ color:var(--ink); }

/* language switcher: the site's own (.dd > button + .ddmenu, with a <details>
   group for the Swiss dialects). Styled here because V2 loads none of the v1
   sheets. */
.svc-nav-lang{ position:relative; }
.svc-nav-lang .dd{ position:relative; }
.svc-nav-lang .dd > button{
  all:unset; box-sizing:border-box;
  display:flex; align-items:center; gap:2px; height:44px; padding:0 16px;
  border-radius:999px; background:rgba(19,19,22,.62);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); color:var(--ink); cursor:pointer;
  font-family:var(--num); font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:border-color .2s ease, background .2s ease, transform .2s var(--ease-spring), box-shadow .2s ease, height .2s ease;
}
.svc-nav-lang .dd > button:hover{ border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.12); transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,197,94,.22); }
.svc-nav-lang .dd.open > button{ border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.14); }
.svc-nav-scrolled .svc-nav-lang .dd > button{ height:38px; }
.svc-nav-lang :focus-visible{ outline:2px solid var(--green-light); outline-offset:2px; }

.svc-nav-lang .ddmenu{
  display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:85;
  min-width:240px; max-height:min(70vh,520px); overflow-y:auto; padding:8px;
  background:rgba(19,19,22,.98); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.svc-nav-lang .dd.open .ddmenu{ display:block; animation:svcLangIn .2s var(--ease-spring); }
@keyframes svcLangIn{ from{ opacity:0; transform:translateX(-50%) translateY(-6px) scale(.98); } to{ opacity:1; transform:translateX(-50%) none; } }
.svc-nav-lang .ddmenu a,
.svc-nav-lang .lang-switcher-ch > summary{
  display:flex; align-items:center; padding:10px 12px; border-radius:10px;
  color:rgba(242,244,247,.82); font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0;
  cursor:pointer; transition:background .16s ease, color .16s ease;
}
.svc-nav-lang .ddmenu a:hover,
.svc-nav-lang .lang-switcher-ch > summary:hover{ background:rgba(34,197,94,.12); color:var(--green-light); }
.svc-nav-lang .ddmenu a.active{ background:rgba(34,197,94,.16); color:var(--green-light); }
.svc-nav-lang .lang-switcher-ch{ border:0; padding:0; margin:0; }
.svc-nav-lang .lang-switcher-ch > summary{ list-style:none; font-weight:700; justify-content:flex-start; }
.svc-nav-lang .lang-switcher-ch > summary::-webkit-details-marker{ display:none; }
.svc-nav-lang .lang-switcher-ch > summary::after{
  content:""; margin-left:auto; width:8px; height:8px;
  border-right:1.6px solid var(--green); border-bottom:1.6px solid var(--green);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease);
}
.svc-nav-lang .lang-switcher-ch[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.svc-nav-lang .lang-switcher-ch a{ padding-left:34px; }

/* scroll hairline rides the very top of the window */
.v2-progress{ position:fixed; top:0; left:0; right:0; bottom:auto; height:2px; z-index:90; }

@media (max-width:640px){
  .svc-nav-pills{ padding:12px; gap:8px; }
  .svc-nav-pill{ padding:0 14px; }
  .svc-nav-brand-word{ font-size:11px; letter-spacing:.04em; }
  .svc-nav-lang .dd > button{ font-size:0; gap:6px; padding:0 13px; }
  .svc-nav-lang .dd > button::after{ content:"\25BE"; font-size:11px; color:var(--muted); }
  .svc-nav-lang .dd > button img{ margin-right:0 !important; }
  .svc-nav-lang .ddmenu{ position:fixed; left:12px; right:12px; top:68px; transform:none; margin:0 auto; max-width:340px; min-width:0; }
  @keyframes svcLangIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
}
@media (max-width:420px){ .svc-nav-menu-label{ display:none; } }
@media (max-width:370px){ .svc-nav-brand-word{ display:none; } }
@media (prefers-reduced-motion:reduce){ .svc-nav-mobile-panel,.svc-nav-lang .dd.open .ddmenu{ animation:none; } }

/* ==========================================================================
   MENU SHEETS — the fix for narrow screens

   The "+" menu and the language list used to be centred on their own button.
   On a phone that button sits at the right edge, so the panel ran off the
   screen. Now both anchor to the pill row and take the screen's width, with a
   dimmed, blurred page behind them and the items arriving one after another.
   ========================================================================== */

.svc-nav-pills{ position:relative; }

/* the links: an icon in the same green ring the site uses, a label, a chevron */
.svc-nav-mobile-panel a:not(.btn){
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:9px 10px 9px 9px; border-radius:14px;
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:rgba(242,244,247,.78);
}
.svc-nav-mobile-panel .mi{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(34,197,94,.1); border:1px solid rgba(120,225,173,.28);
  color:var(--green); font-size:14px;
  transition:background .2s ease, box-shadow .2s ease, transform .2s var(--ease-spring);
}
.svc-nav-mobile-panel .ml{ flex:1 1 auto; min-width:0; }
.svc-nav-mobile-panel .mc{
  flex:0 0 auto; width:8px; height:8px;
  border-right:1.6px solid rgba(255,255,255,.3); border-top:1.6px solid rgba(255,255,255,.3);
  transform:rotate(45deg); transition:transform .2s var(--ease), border-color .2s ease;
}
.svc-nav-mobile-panel a:not(.btn):hover .mc,
.svc-nav-mobile-panel a[aria-current="page"] .mc{ border-color:var(--green-light); transform:rotate(45deg) translate(2px,-2px); }
.svc-nav-mobile-panel a:not(.btn):hover .mi,
.svc-nav-mobile-panel a[aria-current="page"] .mi{ background:rgba(34,197,94,.2); box-shadow:0 0 18px var(--green-glow); }
.svc-nav-mobile-panel a[aria-current="page"]{ background:linear-gradient(90deg, rgba(34,197,94,.14), rgba(34,197,94,.03)); color:var(--ink); }
.svc-nav-actions{ display:flex; flex-direction:column; gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.svc-nav-actions .btn{ width:100%; margin:0; min-height:50px; font-size:15px; }

/* items arrive in order rather than all at once */
@keyframes menuItemIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(-10px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  .svc-nav-mini[open] .svc-nav-mobile-panel > *{ animation:menuItemIn .45s var(--ease-out-expo) both; animation-delay:calc(var(--i,0) * 40ms + 70ms); }
}

/* the page dims and blurs behind whichever sheet is open */
.svc-nav-mini[open]::after,
.svc-nav-lang .dd.open::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:auto;
  background:rgba(4,6,8,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fadeIn .25s ease;
}

@media (max-width:720px){
  /* anchor to the pill row, not to the button */
  .svc-nav-mini,.svc-nav-lang,.svc-nav-lang .dd{ position:static; }

  .svc-nav-mobile-panel{
    position:absolute; top:calc(100% - 6px); left:12px; right:12px; transform:none;
    width:auto; max-width:none; max-height:calc(100dvh - 140px); overflow-y:auto;
    padding:10px; border-radius:22px; gap:2px;
    box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    animation:sheetIn .3s var(--ease-out-expo);
  }
  .svc-nav-mobile-panel a:not(.btn){ font-size:19px; font-weight:700; letter-spacing:-.028em; padding:10px 12px 10px 10px; }
  .svc-nav-mobile-panel .mi{ width:40px; height:40px; font-size:15px; }

  /* the language list becomes a two-column sheet: 21 languages in one long
     column would need scrolling, in two it almost fits */
  .svc-nav-lang .ddmenu{
    position:absolute; top:calc(100% - 6px); left:12px; right:12px; transform:none; margin:0;
    width:auto; min-width:0; max-width:none; max-height:calc(100dvh - 140px);
    padding:10px; border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .svc-nav-lang .dd.open .ddmenu{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
    animation:sheetIn .3s var(--ease-out-expo);
  }
  .svc-nav-lang .lang-switcher-ch{ grid-column:1 / -1; }
  .svc-nav-lang .lang-switcher-ch[open]{ background:rgba(255,255,255,.03); border-radius:12px; padding-bottom:6px; }
  .svc-nav-lang .lang-switcher-ch[open] a{ margin:0 6px; }
  .svc-nav-lang .ddmenu a{ padding:12px; font-size:14.5px; min-width:0; }
  .svc-nav-lang .ddmenu a img{ margin-right:10px !important; }

  /* with a sheet open the page behind must not scroll */
  body:has(.svc-nav-mini[open]),
  body:has(.svc-nav-lang .dd.open){ overflow:hidden; }
}

/* very small phones: keep both sheets inside the screen's own margins */
@media (max-width:360px){
  .svc-nav-mobile-panel,.svc-nav-lang .ddmenu{ left:8px; right:8px; }
  .svc-nav-mobile-panel a:not(.btn){ font-size:17.5px; }
  .svc-nav-lang .dd.open .ddmenu{ grid-template-columns:1fr; }
}

/* ribbon: one short line on phones so it stops pushing the pills down */
.v2-ribbon .rib-long{ display:inline; }
@media (max-width:640px){
  .v2-ribbon{ padding:5px 0; font-size:10.5px; letter-spacing:.04em; }
  .v2-ribbon .rib-long{ display:none; }
}