/* One navigation system for every public page. Loaded last. */

:root {
  --nav-v2-height: 86px;
  --nav-v2-current-height: var(--nav-v2-height);
  /* One canvas shared by the home page and every generated template. */
  --site-canvas: 1520px;
  --site-gutter: clamp(18px, 3.3vw, 62px);
  --site-section-space: clamp(96px, 9.5vw, 160px);
  --nav-v2-paper: #fbfcfa;
  --nav-v2-ink: #0c1328;
  --nav-v2-blue: #2948e8;
  --nav-v2-line: #cdd5e2;
  --nav-v2-grid: rgb(41 72 232 / 8%);
}

.site-header,
.home-page .site-header,
.inner-page .site-header {
  --header-height: var(--nav-v2-current-height);
  position: sticky;
  isolation: isolate;
  block-size: var(--nav-v2-current-height);
  border-block-end: 0;
  background:
    linear-gradient(to left, rgb(41 72 232 / 5%) 1px, transparent 1px),
    rgb(251 252 250 / 94%);
  background-size: min(8.333vw, 128px) 100%, 100% 100%;
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(118%);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset-block-end: 0;
  pointer-events: none;
}

.site-header::before {
  inset-inline: 0;
  block-size: 1px;
  background: rgb(31 49 88 / 17%);
}

.site-header::after {
  inset-inline-start: 50%;
  inline-size: 118px;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-v2-blue) 28% 72%, transparent);
  transform: translateX(-50%);
}

.container,
.home-page .container,
.inner-page .container {
  inline-size: min(calc(100% - (var(--site-gutter) * 2)), var(--site-canvas));
  margin-inline: auto;
}

.site-header.is-scrolled,
.home-page .site-header.is-scrolled,
.inner-page .site-header.is-scrolled {
  --nav-v2-current-height: var(--nav-v2-height);
  --header-height: var(--nav-v2-current-height);
  block-size: var(--nav-v2-current-height);
  border-color: transparent;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 16px 38px rgb(19 35 75 / 7%);
}

.home-page main > .section:not(.hero):not(.final-cta),
.inner-page .content-band,
.inner-page main > .section:not(.page-hero):not(.landing-hero):not(.final-cta):not(.content-band) {
  padding-block: var(--site-section-space);
}

.inner-page :is(.page-hero, .landing-hero)::after {
  inset-inline-start: max(var(--site-gutter), calc((100vw - var(--site-canvas)) / 2));
}

.header-shell,
.home-page .header-shell,
.inner-page .header-shell {
  position: relative;
  block-size: 100%;
  display: grid;
  grid-template-columns: minmax(156px, 1fr) auto minmax(156px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
}

.header-shell::before,
.header-shell::after {
  content: "";
  position: absolute;
  inset-block: 13px 12px;
  inline-size: 1px;
  background: linear-gradient(transparent, rgb(41 72 232 / 34%), transparent);
  pointer-events: none;
}

.header-shell::before { inset-inline-start: 82px; }
.header-shell::after { inset-inline-end: 144px; }

.header-shell > .brand,
.home-page .header-shell > .brand,
.inner-page .header-shell > .brand {
  grid-column: 1;
  justify-self: start;
}

.brand,
.home-page .brand,
.inner-page .brand {
  position: relative;
  direction: ltr;
  display: grid;
  inline-size: 64px;
  block-size: 64px;
  min-block-size: 64px;
  place-items: center;
  isolation: isolate;
  outline-offset: 5px;
}

.brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid rgb(41 72 232 / 18%);
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(236 242 255 / 72%));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color 200ms ease, background-color 200ms ease, transform 280ms cubic-bezier(.2,.8,.2,1);
}

.brand::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-inline-end: 1px;
  inset-block-start: 1px;
  inline-size: 6px;
  aspect-ratio: 1;
  background: #7fe5f1;
  box-shadow: 0 0 0 4px rgb(127 229 241 / 14%);
}

.brand-mark {
  position: relative;
  z-index: 2;
  inline-size: 54px;
  block-size: 54px;
  display: grid;
  place-items: center;
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
}

.brand-mark img,
.brand img,
.home-page .brand img,
.inner-page .brand img {
  inline-size: 54px;
  block-size: 54px;
  object-fit: contain;
  filter: none;
  transform: none;
}

.brand:hover::before,
.brand:focus-visible::before { border-color: rgb(41 72 232 / 48%); transform: rotate(-2deg); }
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark { transform: translateY(-2px) scale(1.035); }

.desktop-nav,
.home-page .desktop-nav,
.inner-page .desktop-nav {
  position: static;
  grid-column: 2;
  justify-self: center;
  min-block-size: 54px;
  padding-inline: 10px;
  border-block: 1px solid rgb(31 49 88 / 16%);
  background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(244 247 252 / 72%));
  clip-path: none;
  gap: 0;
  transform: none;
}

.desktop-nav::before,
.desktop-nav::after {
  content: "";
  inline-size: 5px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  background: var(--nav-v2-blue);
}
.desktop-nav::after { background: #7fe5f1; }

.header-cta,
.home-page .header-cta,
.inner-page .header-cta {
  position: static;
  grid-column: 3;
  justify-self: end;
  min-inline-size: 124px;
  min-block-size: 48px;
  padding-inline: 23px 19px;
  border: 1px solid var(--nav-v2-blue);
  border-radius: 0;
  background: var(--nav-v2-blue);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  box-shadow: 8px 8px 0 rgb(41 72 232 / 9%);
}

.header-cta::after { content: "←"; margin-inline-start: 9px; font-size: .9rem; transition: transform 180ms ease; }
.header-cta:hover::after { transform: translateX(-4px); }

.nav-link,
.home-page .nav-link,
.inner-page .nav-link {
  position: relative;
  min-block-size: 44px;
  padding-inline: 13px;
  color: #303b52;
  font-size: .76rem;
  font-weight: 650;
}

.nav-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 5px;
  inline-size: 4px;
  aspect-ratio: 1;
  background: var(--nav-v2-blue);
  opacity: 0;
  transform: translateX(50%) rotate(45deg) scale(0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.nav-link::after,
.home-page .nav-link::after,
.inner-page .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 11px;
  inset-block-end: 4px;
  block-size: 1px;
  background: var(--nav-v2-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}

.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-current::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:hover::before,
.nav-link[aria-expanded="true"]::before,
.nav-link.is-current::before,
.nav-link[aria-current="page"]::before { opacity: 1; transform: translateX(50%) rotate(45deg) scale(1); }

.nav-link.is-current,
.nav-link[aria-current="page"] {
  color: var(--nav-v2-blue);
}

.mega-menu a.is-current,
.mega-menu a[aria-current="page"] {
  color: var(--nav-v2-blue);
  background: rgb(41 72 232 / 6%);
}

.header-cta.is-current,
.header-cta[aria-current="page"] {
  outline: 2px solid #7fe5f1;
  outline-offset: 3px;
}

/* Architectural mega panel shared by home and every internal route. */
.mega-menu,
.home-page .mega-menu,
.inner-page .mega-menu {
  position: fixed;
  z-index: 65;
  inset-block-start: var(--nav-v2-current-height);
  inset-inline: 0;
  inline-size: 100vw;
  min-block-size: 390px;
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(180px, 1fr));
  gap: 0;
  padding: 0 max(32px, calc((100vw - 1480px) / 2));
  overflow: hidden;
  border: 0;
  border-block: 1px solid var(--nav-v2-line);
  border-radius: 0;
  background:
    linear-gradient(to left, var(--nav-v2-grid) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(50 68 106 / 4%) 1px, transparent 1px),
    rgb(251 252 250 / 99%);
  background-size: min(8.333vw, 128px) 100%, 100% 56px, 100% 100%;
  box-shadow: 0 30px 70px rgb(19 35 75 / 10%);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transform-origin: top;
  transition: opacity 180ms ease, clip-path 520ms cubic-bezier(.16, 1, .3, 1), visibility 180ms;
  counter-reset: mega-group;
}

.mega-menu::after {
  content: "SD / NAVIGATION — STRUCTURE 01";
  position: absolute;
  inset-inline-start: max(32px, calc((100vw - 1480px) / 2));
  inset-block-end: 18px;
  color: var(--nav-v2-blue);
  font: 700 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.nav-dropdown.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transform: none;
}

.mega-intro,
.home-page .mega-intro,
.inner-page .mega-intro {
  position: relative;
  min-block-size: 390px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(28px, 4vw, 64px) 58px 24px;
  border-inline-end: 0;
}

.mega-intro::before {
  content: "01";
  position: absolute;
  inset-block-start: 28px;
  inset-inline-start: 24px;
  color: var(--nav-v2-blue);
  font: 700 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mega-intro strong { max-inline-size: 19ch; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.6; }
.mega-intro p { max-inline-size: 38ch; font-size: .78rem; }
.mega-intro .eyebrow { font-size: .64rem; }

.mega-column {
  position: relative;
  counter-increment: mega-group;
  min-block-size: 390px;
  padding: 72px clamp(24px, 3vw, 44px) 56px;
  border-inline-start: 1px solid var(--nav-v2-line);
}

.mega-column::before {
  content: "0" counter(mega-group);
  position: absolute;
  inset-block-start: 29px;
  inset-inline-start: clamp(24px, 3vw, 44px);
  color: var(--nav-v2-blue);
  font: 700 .56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mega-title { margin-block-end: 18px; color: #697389; font-size: .64rem; letter-spacing: .03em; }

.mega-column a {
  position: relative;
  padding-block: 8px;
  padding-inline-start: 0;
  border-block-end: 1px solid transparent;
  color: #29344a;
  font-size: .78rem;
  transition: color 180ms, padding 220ms var(--ease), border-color 180ms;
}

.mega-column a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 6px;
  aspect-ratio: 1;
  background: var(--nav-v2-blue);
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: opacity 180ms, transform 220ms var(--ease);
}

.mega-column a:hover {
  padding-inline-start: 16px;
  border-color: var(--nav-v2-line);
  color: var(--nav-v2-blue);
  transform: none;
}
.mega-column a:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }

.menu-toggle {
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--nav-v2-line);
  border-radius: 2px;
  background: transparent;
  clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 16% 100%, 0 84%);
}

.menu-toggle span { inline-size: 19px; block-size: 1px; border-radius: 0; }

.mobile-header-actions,
.mobile-whatsapp { display: none; }

.mobile-menu { background: var(--nav-v2-paper); }
.mobile-menu-inner {
  padding: 20px max(18px, calc((100vw - 660px) / 2)) 28px;
  background:
    linear-gradient(to left, var(--nav-v2-grid) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(50 68 106 / 4%) 1px, transparent 1px),
    var(--nav-v2-paper);
  background-size: 84px 100%, 100% 56px, 100% 100%;
}

.mobile-menu-top { min-block-size: 60px; padding-block: 0; font: .65rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mobile-close { border: 1px solid var(--nav-v2-line); border-radius: 2px; background: rgb(255 255 255 / 72%); }
.mobile-menu nav { counter-reset: mobile-nav; }
.mobile-menu nav > a,
.mobile-menu summary {
  position: relative;
  counter-increment: mobile-nav;
  min-block-size: 66px;
  padding-inline-start: 44px;
  border-color: var(--nav-v2-line);
  font-size: .98rem;
}
.mobile-menu nav > a::before,
.mobile-menu summary::before {
  content: counter(mobile-nav, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  color: var(--nav-v2-blue);
  font: 700 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mobile-menu nav a.is-current,
.mobile-menu nav a[aria-current="page"],
.mobile-menu summary.is-current {
  color: var(--nav-v2-blue);
  background: linear-gradient(90deg, transparent, rgb(41 72 232 / 8%));
  box-shadow: inset -3px 0 0 var(--nav-v2-blue);
}
.mobile-menu nav a.is-current::after,
.mobile-menu nav a[aria-current="page"]::after,
.mobile-menu summary.is-current::after {
  content: "";
  inline-size: 6px;
  aspect-ratio: 1;
  margin-inline-start: auto;
  background: #7fe5f1;
  box-shadow: 0 0 0 4px rgb(127 229 241 / 14%);
  transform: rotate(45deg);
}
.mobile-subnav { border-color: var(--nav-v2-line); }
.mobile-menu-contact .button { border-radius: 2px; }

@media (max-width: 1180px) {
  .header-shell,
  .home-page .header-shell,
  .inner-page .header-shell { grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr); gap: 16px; }
  .header-shell::before { inset-inline-start: 72px; }
  .header-shell::after { inset-inline-end: 130px; }
  .nav-link { padding-inline: 9px; font-size: .73rem; }
  .mega-menu { grid-template-columns: 1.2fr repeat(3, 1fr); padding-inline: 20px; }
  .mega-intro { padding-inline: 26px; }
  .mega-column { padding-inline: 24px; }
}

@media (max-width: 980px) {
  :root { --nav-v2-height: 70px; }
  .header-shell,
  .home-page .header-shell,
  .inner-page .header-shell { display: flex; justify-content: space-between; }
  .header-shell::before,
  .header-shell::after { display: none; }
  .desktop-nav,
  .header-cta { display: none; }
  .mobile-header-actions { display: flex; align-items: center; gap: 8px; }
  .mobile-whatsapp {
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--nav-v2-blue);
    background: var(--nav-v2-blue);
    color: #fff;
    clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 16% 100%, 0 84%);
  }
  .mobile-whatsapp svg { inline-size: 21px; block-size: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .menu-toggle,
  .mobile-menu { display: flex; }
  .floating-contact { display: none; }
  .brand,
  .home-page .brand,
  .inner-page .brand { inline-size: 56px; block-size: 56px; min-block-size: 56px; }
  .brand img,
  .home-page .brand img,
  .inner-page .brand img,
  .brand-mark { inline-size: 48px; block-size: 48px; }
  .brand::before { inset: 3px; }
}

@media (max-width: 700px) {
  :root {
    --nav-v2-height: 70px;
    --site-gutter: 18px;
    --site-section-space: 86px;
  }
  .brand,
  .home-page .brand,
  .inner-page .brand { inline-size: 56px; block-size: 56px; min-block-size: 56px; }
  .brand img,
  .home-page .brand img,
  .inner-page .brand img,
  .brand-mark { inline-size: 48px; block-size: 48px; }
  .mobile-subnav { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  :root { --site-gutter: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu { transition: none; }
  .brand-mark,
  .brand::before { transition: none; }
}

@media print {
  .mega-menu,
  .mobile-menu { display: none !important; }
}