/* Sellva — shared navbar styles. Single source, rendered by /assets/nav.js. */
/* The navbar is a full-width bar, not a floating pill: it spans the viewport
   edge to edge and is separated from the page by a hairline rather than a
   shadow. The inner row is what stays aligned with the page's content. */
#site-nav { display: block; min-height: 68px; position: sticky; top: 0; z-index: 100; }
.nav-wrapper {
      display: flex;
      justify-content: center;
      padding: 0;
      background: #ffffff;
      border-bottom: 1px solid rgba(16,24,40,0.09);
      box-shadow: 0 1px 2px rgba(16,24,40,0.03);
    }
.nav {
      display: flex;
      align-items: center;
      gap: 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      padding: 0 2.5rem;
      height: 68px;
      width: 100%;
      max-width: 1600px;
      border: 0;
      overflow: visible;
    }
/* The links sit next to the wordmark rather than filling the bar, so the
   right-hand actions stay a distinct group at this width. */
.nav-logo { margin-right: 30px; }
.nav-links { gap: 6px; }
.nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      margin-right: 4px;
    }
.nav-logo-text {
      font: 700 17.5px/1 Poppins, sans-serif;
      color: #101828;
      letter-spacing: -0.4px;
    }
.nav-logo-img { display: none; }
.nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: none;
      margin-right: auto;
    }
.nav-menu { display: contents; }
.nav-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: #374151;
      font: 500 13.5px/1 Inter, system-ui, sans-serif;
      padding: 7px 11px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.13s, color 0.13s;
      white-space: nowrap;
      text-decoration: none;
    }
.nav-btn:hover { background: #eff1ea; color: #101828; }
.nav-chevron { font-size: 9px; transition: transform 0.15s; opacity: 0.6; }
.nav-dd {
      position: relative;
    }
.nav-dd.open .nav-chevron { transform: rotate(180deg); }
.nav-dd-panel {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.14);
      border: 1px solid rgba(0,0,0,0.07);
      padding: 8px;
      z-index: 300;
    }
.nav-dd.open .nav-dd-panel { display: block; }
.nav-dd-panel.features-panel {
      width: 560px;
      left: 0;
      transform: none;
      padding: 16px 16px 0;
    }
.nav-dd-panel a:hover { background: #F6F7F2; color: #3F7D4E; }
.nav-dd-panel.resources-panel {
      width: 660px;
      max-width: calc(100vw - 32px);
      left: 50%;
      transform: translateX(-50%);
      padding: 16px;
    }
.nav-dd.open .nav-dd-panel.resources-panel { display: block; }
.resources-menu { display: flex; gap: 14px; align-items: stretch; }
.resources-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; flex: 1; }
.resources-col h4 {
      font: 700 10.5px/1 Inter, system-ui, sans-serif;
      color: #94a3b8; letter-spacing: 0.09em; text-transform: uppercase;
      padding: 6px 10px 8px; margin: 0;
    }
a.res-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 10px; border-radius: 10px; text-decoration: none;
      transition: background 0.12s;
    }
a.res-item:hover { background: #f6f4ff; }
.res-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      background: #F6F7F2; color: #101828;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
a.res-item:hover .res-icon { background: #dce6d8; color: #3F7D4E; }
.res-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-title { font: 600 13px/1.2 Inter, system-ui, sans-serif; color: #1e293b; }
a.res-item:hover .res-title { color: #101828; }
.res-desc { font: 400 11.5px/1.45 Inter, system-ui, sans-serif; color: #64748b; }
a.res-item:hover .res-desc { color: #64748b; }
a.res-featured {
      width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 7px;
      padding: 16px; border-radius: 12px; text-decoration: none;
      background: linear-gradient(150deg, #F6F7F2 0%, #f5f7fb 100%);
      border: 1px solid rgba(16,24,40,0.08);
      transition: transform 0.15s, box-shadow 0.15s;
    }
a.res-featured:hover {
      background: linear-gradient(150deg, #e8eef7 0%, #f0f3fa 100%);
      transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,24,40,0.12);
    }
.res-featured-badge {
      width: 36px; height: 36px; border-radius: 10px; background: #fff;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08); color: #3F7D4E;
      display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
    }
.res-featured-label { font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: #101828; }
.res-featured-title { font: 600 13px/1.4 Inter, system-ui, sans-serif; color: #1e293b; }
.res-featured-cta { font: 600 12px/1 Inter, sans-serif; color: #3F7D4E; margin-top: 4px; }
.nav-right {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      flex-shrink: 0;
    }
.lang-switch {
      position: relative;
      display: flex;
      align-items: center;
    }
.lang-switch-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: #374151;
      font: 500 13.5px/1 Inter, system-ui, sans-serif;
      padding: 7px 10px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.13s, color 0.13s;
    }
.lang-switch-btn:hover { background: #eff1ea; color: #101828; }
.lang-switch-btn svg { flex-shrink: 0; opacity: 0.6; }
.lang-switch-btn .lang-code { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; }
.lang-switch-panel {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.13);
      border: 1px solid rgba(0,0,0,0.07);
      padding: 6px;
      min-width: 110px;
      z-index: 400;
    }
.lang-switch.open .lang-switch-panel { display: block; }
.lang-switch-panel button {
      appearance: none;
      border: 0;
      background: transparent;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      font: 500 13px/1 Inter, system-ui, sans-serif;
      color: #374151;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
.lang-switch-panel button:hover { background: #F6F7F2; color: #101828; }
.lang-switch-panel button.active { font-weight: 700; color: #101828; }
.nav-login {
      appearance: none;
      border: 1px solid rgba(0,0,0,0.15);
      background: transparent;
      color: #374151;
      font: 500 13px/1 Inter, system-ui, sans-serif;
      padding: 7px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.13s, color 0.13s, border-color 0.13s;
      white-space: nowrap;
      text-decoration: none;
    }
.nav-login:hover { background: #eff1ea; color: #101828; border-color: rgba(0,0,0,0.25); }
.nav-cta {
      appearance: none;
      border: 0;
      background: var(--sns-cta);
      color: #ffffff;
      font: 600 13px/1 Poppins, sans-serif;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
      text-decoration: none;
    }
.nav-cta:hover { background: var(--sns-cta-hover); }
/* Between the phone menu and full width there is a band where the longest
   locale (German) plus the right-hand group does not fit the row. Tighten the
   rail and the buttons there rather than letting the CTA push off-screen. */
@media (max-width: 1080px) {
.nav { padding: 0 1.25rem; }
.nav-logo { margin-right: 14px; }
.nav-links { gap: 0; }
.nav-btn { padding: 7px 8px; font-size: 13px; }
.nav-login { padding: 7px 10px; }
.nav-cta { padding: 8px 12px; font-size: 12.5px; }
}
.nav-hamburger { display: none; }
/* The full link row needs ~985px to hold the longest locale (German). Below
   that the hamburger takes over — a tablet gets the menu rather than a row
   whose CTA hangs off the right edge. */
@media (max-width: 1000px) {
.nav { max-width: 100%; }
.nav-logo { margin-right: 0; }
.nav-links { display: none; }
.nav-hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 36px; height: 36px;
        padding: 8px;
        background: #eff1ea;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-left: auto;
      }
.nav-hamburger span {
        display: block; height: 2px; width: 100%;
        background: #101828; border-radius: 2px;
      }
}
.footer-nav-links { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-links a {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.15s;
    }
.footer-nav-links a:hover { color: #fff; }
@media (max-width: 1000px) {
.nav { padding: 0 1.25rem; }
.nav-logo-img { margin-top: 0; border-radius: 11px; }
.nav-hamburger { display: flex; }
.nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: #101828; border-radius: 12px;
        box-shadow: 0 16px 32px rgba(0,0,0,0.35);
        padding: 10px; z-index: 300;
        opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top center;
        transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.33,0.1,0.25,1), display 0.24s allow-discrete;
      }
.nav.menu-open .nav-menu { display: flex; opacity: 1; transform: translateY(0) scale(1); }
@starting-style { .nav.menu-open .nav-menu { opacity: 0; transform: translateY(-8px) scale(0.985); } }
.nav-menu .nav-links,
      .nav-menu .nav-right {
        display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; flex: none;
      }
/* 44px minimum: these were 35px links and a 29px CTA in the drawer, under
   the tap-target guideline on the device where the drawer is the only nav. */
.nav-menu .nav-btn { justify-content: flex-start; color: rgba(255,255,255,0.85); padding: 13px 12px; width: 100%; min-height: 44px; align-items: center; }
.nav-menu .nav-cta, .nav-menu .nav-login { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.nav-menu .nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-menu .nav-btn, .nav-menu .nav-login { transition: background 0.16s ease, color 0.16s ease; }
.nav-menu .nav-btn:focus, .nav-menu .nav-login:focus, .nav-menu .lang-switch-btn:focus,
      .nav-menu .nav-btn:focus-visible, .nav-menu .nav-login:focus-visible, .nav-menu .lang-switch-btn:focus-visible { outline: none; }
.nav-menu .nav-btn:focus-visible, .nav-menu .nav-login:focus-visible { background: rgba(255,255,255,0.12); }
.nav-menu .nav-dd.open > .nav-btn { background: rgba(255,255,255,0.06); color: #fff; }
.nav-menu .nav-chevron { display: inline-flex; margin-left: auto; font-size: 11px; opacity: 0.55; transition: transform 0.28s cubic-bezier(0.33,0.1,0.25,1); }
.nav-menu .nav-dd { width: 100%; }
.nav-menu .nav-dd-panel.resources-panel {
        display: grid !important; grid-template-rows: 0fr; opacity: 0;
        transition: grid-template-rows 0.3s cubic-bezier(0.33,0.1,0.25,1), opacity 0.22s ease, padding 0.3s ease;
        position: static; transform: none; width: auto; max-width: none;
        background: transparent; border: 0; box-shadow: none;
        padding: 0 0 0 12px; margin: 2px 0 0;
      }
.nav-menu .nav-dd.open .nav-dd-panel.resources-panel { grid-template-rows: 1fr; opacity: 1; padding: 4px 0 6px 12px; }
.nav-menu .nav-dd-panel.resources-panel > .resources-menu { overflow: hidden; min-height: 0; }
.nav-menu .resources-menu, .nav-menu .resources-cols { display: block; }
.nav-menu .res-featured { display: none; }
.nav-menu .resources-col h4 { color: rgba(255,255,255,0.4); font-size: 9.5px; padding: 8px 10px 3px; }
.nav-menu .res-item { padding: 6px 10px; gap: 9px; }
.nav-menu .res-item:hover { background: rgba(255,255,255,0.06); }
.nav-menu .res-title { color: rgba(255,255,255,0.6); font-weight: 400; font-size: 12.5px; }
.nav-menu .res-item:hover .res-title { color: rgba(255,255,255,0.9); }
.nav-menu .res-desc { color: rgba(255,255,255,0.45); }
.nav-menu .res-icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.nav-menu .res-icon svg { width: 14px; height: 14px; }
.nav-menu .nav-right { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 8px; padding-top: 12px; }
.nav-menu .lang-switch { align-self: flex-start; }
.nav-menu .lang-switch-btn { color: rgba(255,255,255,0.85); }
.nav-menu .lang-switch-panel { position: static; box-shadow: none; }
.nav-menu .nav-login { color: rgba(255,255,255,0.85); padding: 11px 12px; }
.nav-menu .nav-login:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-menu .nav-cta { margin: 8px 0 0; text-align: center; justify-content: center; }
}
/* The base size for every viewport. This rule sits after the max-width:1000px
   block above, so it wins there — which is why the phone bar was stuck at
   28px however that block was edited. Desktop is set again further down. */
.nav-logo-img {
      display: block !important;
      height: 42px;
      width: 42px;
      object-fit: contain;
      flex-shrink: 0;
    }
.nav-logo-text {
      font: 700 17.5px/1 Poppins, sans-serif;
      color: #101828;
      letter-spacing: -0.4px;
      margin-left: 8px;
    }
.nav-logo-img {
      transition: width 0.35s ease, height 0.35s ease;
    }
.nav-logo-text {
      transition: opacity 0.25s ease, max-width 0.35s ease, margin-left 0.25s ease;
      overflow: hidden;
      max-width: 120px;
      white-space: nowrap;
    }
.nav.scrolled .nav-logo-img {
      width: 54px !important;
      height: 54px !important;
      opacity: 1 !important;
      margin-right: 10px;
    }
.nav.scrolled .nav-logo-text {
      opacity: 0;
      max-width: 0;
      margin-left: 0 !important;
    }
.nav {
      display: flex !important;
      align-items: center !important;
    }
.nav-logo { flex-shrink: 0; margin-right: 32px; }
.nav-links {
      display: flex !important;
      align-items: center !important;
      gap: 2px !important;
      flex: none !important;
      margin-right: auto !important;
    }
.nav-right { flex-shrink: 0; margin-left: 0 !important; }
.nav-hamburger { display: none; }
/* This block restores the desktop row with !important, so the hamburger switch
   has to happen here too — at the same 1000px the rules above use, or the
   restore wins and the tablet band gets neither links nor a menu. */
@media (max-width: 1000px) {
.nav-links { display: none !important; }
.nav-hamburger { display: flex !important; }
}

/* ==========================================================================
   Announcement bar.

   A full-width strip above the navbar, written as static HTML by
   components/announcement/build.mjs.

   The ground is Sellva Bracken with one elegant sweep towards Fern and a soft
   Fern glow above it, rather than a flat green. Every stop stays dark enough
   that white text clears 7:1 against it.
   ========================================================================== */

.anno {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  background:
    linear-gradient(101deg,
      #0C1F14 0%, #122A1C 22%, #183826 44%, #24503A 58%,
      #1A3C29 72%, #122A1C 88%, #0E2317 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* A soft Fern glow where the sweep peaks. */
.anno::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 180% at 58% 0%, rgba(121,174,124,0.22), transparent 70%);
  pointer-events: none;
}

/* (The brushed-steel grain was retired with the Sellva palette.) */
.anno::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

.anno-inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 11px 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  text-align: center;
}

/* Lighter than it was. At 600 the bar shouted; the weight drops to 500 and
   the tracking opens slightly, which is what makes small type on a dark
   ground read as considered rather than loud. */
.anno-label {
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.012em;
}
.anno-label::after {
  content: ':';
  color: rgba(255,255,255,0.45);
}
.anno-text {
  font: 300 13px/1.4 Inter, system-ui, sans-serif;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.012em;
}
.anno-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
  color: #FFFFFF;
  letter-spacing: 0.012em;
  white-space: nowrap;
}
.anno-arrow {
  width: 13px; height: 13px;
  transition: transform .18s ease;
}
.anno:hover .anno-cta { text-decoration: underline; text-underline-offset: 3px; }
.anno:hover .anno-arrow { transform: translate(1.5px, -1.5px); }

.anno:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
}

@media (max-width: 900px) {
  .anno-inner { padding: 9px 1.25rem; gap: 3px 8px; }
  .anno-label, .anno-text, .anno-cta { font-size: 12px; }
  .anno-arrow { width: 12px; height: 12px; }
}

/* On a phone the sentence would run to three lines. The label and the call to
   action carry it; the sub-line is the part that can go. */
@media (max-width: 560px) {
  .anno-text { display: none; }
  .anno-label::after { content: ''; }
  .anno-inner { padding: 8px 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .anno-arrow { transition: none; }
  .anno:hover .anno-arrow { transform: none; }
}

/* Phones only: a shorter bar and edge-to-edge padding. */
@media (max-width: 700px) {
  .nav-wrapper { padding: 0; }
  .nav { padding: 0 1rem; height: 60px; }
}

/* ------------------------------------------------------- scrolled state --- */

/* At rest the wordmark leads. Once the page scrolls, the wordmark collapses
   into the mark and the mark grows — so the header gets shorter and the brand
   stays present as an icon rather than a full lockup.

   Desktop only: below 1000px the mark is already the logo, at a fixed size. */
@media (min-width: 1001px) {
  /* The mark is present from the start, beside the wordmark. Scrolling grows
     it and collapses the wordmark into it, so the lockup becomes an icon
     rather than the mark appearing from nowhere. */
  .nav-logo-img {
    display: block;
    width: 42px;
    height: 42px;
    opacity: 1;
    margin-right: 10px;
    overflow: hidden;
    flex: none;
    transition: width .32s cubic-bezier(.22,.9,.3,1),
                height .32s cubic-bezier(.22,.9,.3,1),
                opacity .24s ease,
                margin-right .32s cubic-bezier(.22,.9,.3,1);
  }
  .nav-logo-text {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .22s ease,
                max-width .32s cubic-bezier(.22,.9,.3,1);
  }
  .nav.scrolled .nav-logo-text { opacity: 0; max-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo-img, .nav-logo-text { transition: none; }
}

/* ==========================================================================
   Sellva wordmark: the word in Urbanist ExtraBold, tracked −0.03em, in Bracken
   (the brand ink, never pure black),
   led by the green Agent orb. Both stay the same size in every state,
   including after scrolling (the old badge used to grow and the name hide).
   ========================================================================== */
.nav-logo-img,
.nav.scrolled .nav-logo-img {
      display: block !important;
      width: 46px !important;
      height: 46px !important;
      opacity: 1 !important;
      margin: 0 8px 0 -4px !important;
      border-radius: 0 !important;
    }
.nav-logo-text,
.nav.scrolled .nav-logo-text {
      font: 800 26px/1 Urbanist, Poppins, system-ui, sans-serif;
      letter-spacing: -0.03em;
      color: #122A1C;
      opacity: 1;
      max-width: none;
      margin-left: 0 !important;
    }