@import url('./brand-palette.css');
@import url('./senshi-original-logo.css');
@import url('./platforms-navigation.css');
@import url('./contact-form.css');
@import url('./cognition.css');

/* Scoped additions to the original animated website.
   Original compiled page, scene and animation styles remain untouched. */

header.nav.xn-expanded-nav .xn-expansion-nav-link {
  white-space: nowrap;
}

/* Keep the existing SENSHI link in place; its family control is a sibling. */
header.nav.xn-expanded-nav .xn-family-menu {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  margin-left: -18px;
}

header.nav.xn-expanded-nav .xn-family-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-height: 44px;
  color: var(--text-secondary);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

header.nav.xn-expanded-nav .xn-family-menu > summary::-webkit-details-marker {
  display: none;
}

header.nav.xn-expanded-nav .xn-family-menu > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .6;
  transition: transform var(--fade) var(--ease);
}

header.nav.xn-expanded-nav .xn-family-menu[open] > summary::after {
  transform: rotate(180deg);
}

header.nav.xn-expanded-nav .xn-family-menu > summary:hover,
header.nav.xn-expanded-nav .xn-family-menu[open] > summary {
  color: var(--text);
}

header.nav.xn-expanded-nav .xn-family-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: -68px;
  z-index: 120;
  min-width: 208px;
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  background: var(--bg);
  border: 1px solid var(--line-bright);
  border-top-color: var(--accent-deep);
}

header.nav.xn-expanded-nav .xn-family-menu:not([open]) .xn-family-dropdown {
  display: none;
}

/* A small bridge keeps pointer travel into the dropdown uninterrupted. */
header.nav.xn-expanded-nav .xn-family-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
}

header.nav.xn-expanded-nav .xn-family-dropdown a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  touch-action: manipulation;
  transition: color var(--fade) var(--ease), background var(--fade) var(--ease);
}

header.nav.xn-expanded-nav .xn-family-dropdown a:hover,
header.nav.xn-expanded-nav .xn-family-dropdown a:focus-visible {
  color: var(--text);
  background: var(--accent-wash);
}

header.nav.xn-expanded-nav .xn-family-dropdown a[aria-current="page"] {
  color: var(--accent);
}

/* The original centered menu needs more room with the additional FATUM link. */
@media (max-width: 1120px) {
  header.nav.xn-expanded-nav .links.center.svelte-o3lmea,
  header.nav.xn-expanded-nav .navgroup.company.svelte-o3lmea {
    display: none;
  }

  header.nav.xn-expanded-nav .burger.svelte-o3lmea {
    display: inline-flex;
  }
}

/* Retain the existing full-screen mobile sheet and its original controls. */
body.xn-expanded-site .sheet.svelte-o3lmea {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) var(--bg);
}

body.xn-expanded-site .sheet-links.svelte-o3lmea,
body.xn-expanded-site .sheet-foot.svelte-o3lmea {
  flex-shrink: 0;
}

body.xn-expanded-site .xn-family-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: calc(-1 * var(--s-6));
  margin-left: calc(var(--s-8) + var(--s-2));
  padding-left: var(--s-6);
  border-left: 1px solid var(--line-bright);
}

body.xn-expanded-site .xn-family-mobile a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  touch-action: manipulation;
}

body.xn-expanded-site .xn-family-mobile a:hover,
body.xn-expanded-site .xn-family-mobile a:focus-visible,
body.xn-expanded-site .xn-family-mobile a[aria-current="page"] {
  color: var(--accent);
}

body.xn-expanded-site .xn-expansion-mobile-link {
  min-height: 44px;
  padding-left: var(--s-8);
}

@media (prefers-reduced-motion: reduce) {
  header.nav.xn-expanded-nav .xn-family-menu > summary::after,
  header.nav.xn-expanded-nav .xn-family-dropdown a {
    transition: none;
  }
}

/* ---- footer v2 on the original Svelte routes (2026-10-02) ---- */
footer.footer.xf-replaced{display:none!important}
footer.xf-main{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line,rgba(255,255,255,.12));padding-block:clamp(72px,9vw,128px) 24px;background:#000;color:#fff}
footer.xf-main .xn-container{position:relative;z-index:1}
footer.xf-main .xf-horizon{position:absolute;z-index:0;left:50%;width:140vw;aspect-ratio:1;bottom:calc(230px - 140vw);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,#020405 0,#03080a 97%,rgba(154,204,198,.10) 99.4%,transparent 100%);box-shadow:0 0 0 1px rgba(154,204,198,.30),0 0 36px 4px rgba(154,204,198,.16),0 0 180px 50px rgba(97,143,138,.10);pointer-events:none}
footer.xf-main .xf-statement{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,6.2vw,92px);line-height:.98;letter-spacing:0;word-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 clamp(48px,6vw,88px)}
footer.xf-main .xf-statement span{color:#9accc6}
footer.xf-main .xf-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
footer.xf-main .xf-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
footer.xf-main .xf-wordmark img{height:40px;width:auto;display:block}
footer.xf-main .xf-tag{margin:0;max-width:34ch;color:rgba(255,255,255,.72);font-family:var(--font-sans)}
footer.xf-main .xf-cta{display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#000;background:#9accc6;padding:12px 18px;text-decoration:none}
footer.xf-main .xf-cta:hover{background:#c4e4df}
footer.xf-main .xf-mail{display:block;font-family:var(--font-mono);font-size:.8125rem;color:#9accc6;text-decoration:none}
footer.xf-main .xf-h{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line,rgba(255,255,255,.12))}
footer.xf-main .xf-col a{display:block;padding-block:7px;color:#fff;text-decoration:none;font-size:.9375rem;font-family:var(--font-sans)}
footer.xf-main .xf-col a b{font-weight:600;letter-spacing:.02em}
footer.xf-main .xf-col a span{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-top:2px}
footer.xf-main .xf-col a:hover,footer.xf-main .xf-col a:hover b{color:#c4e4df}
footer.xf-main .xf-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(96px,12vw,190px);padding-top:16px;border-top:1px solid rgba(154,204,198,.22);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
footer.xf-main .xf-zulu time{color:#9accc6}
@media(max-width:860px){footer.xf-main .xf-grid{grid-template-columns:1fr 1fr}footer.xf-main .xf-brand{grid-column:1/-1}}
@media(max-width:520px){footer.xf-main .xf-grid{grid-template-columns:1fr}footer.xf-main .xf-strip{flex-direction:column}}
/* phones: the tactical-drone scene draws a 16:9 picture, so its frame is 16:9 too (no black bands above the closing line) */
@media (max-width:880px){.xn-scene:has(.xn-scene-cap) .anim[src*="tactical-drone"]:not(.is-interactive){height:auto;min-height:0;aspect-ratio:16/9}}
/* one footer everywhere (2026-10-03): the homepage's closing slogan steps aside for it */
main section.closing.xf-dup{display:none}
/* the homepage cognition animation runs without a pause button (founder, 2026-10-03) */
.xn-cognition-motion{display:none!important}
/* the Credits link in the footer strip (2026-10-03) */
.xf-strip a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(154,204,198,.35)}
.xf-strip a:hover{color:#eef3f7}
/* footer icons: LinkedIn (2026-10-03) */
footer.xf-main .xf-icons{display:flex;gap:10px;margin-top:14px}footer.xf-main .xf-icon{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid rgba(154,204,198,.35);color:#9accc6;transition:color .2s,border-color .2s,background .2s}footer.xf-main .xf-icon:hover{color:#eef3f7;border-color:#eef3f7;background:rgba(154,204,198,.08)}footer.xf-main .xf-icon svg{width:18px;height:18px;fill:currentColor;display:block}
/* one mobile menu everywhere (2026-10-03): the product pages' compact panel replaces the original full-screen sheet */
div.sheet.svelte-o3lmea,div.sheet:has(> nav.sheet-links){display:none!important}
.xm-panel{position:fixed;left:0;right:0;z-index:200;background:#000;border-bottom:1px solid #2a3231;max-height:calc(100vh - 60px);overflow-y:auto}
.xm-panel[hidden]{display:none}
.xm-links{display:grid;grid-template-columns:1fr;gap:0;padding:24px 24px 32px}
.xm-links>a{display:block;min-height:48px;padding:12px 0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #171b1b;color:#9aa8a6;text-decoration:none}
.xm-links a:hover{color:#fff}
.xm-links .add-navgroup{position:relative;border-bottom:1px solid #171b1b}
.xm-links .add-navgroup>summary{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:48px;cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:#9aa8a6}
.xm-links .add-navgroup>summary::-webkit-details-marker{display:none}
.xm-links .add-navgroup>summary:after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.6}
.xm-links .add-navgroup[open]>summary:after{transform:rotate(180deg)}
.xm-links .add-dropdown{display:flex;flex-direction:column;margin-bottom:16px;padding:0 0 0 12px;border-left:1px solid #2a3231}
.xm-links .add-dropdown a{padding:10px 8px;font-family:var(--font-mono);font-size:.72rem;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:#9aa8a6;text-decoration:none;white-space:normal}