/* =========================================================================
   ArchiMass — header.css  (scoped to the reusable site-header component)
   ========================================================================= */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}

/* scrolled state — the header compresses and a glass plane slides under it */
.site-header.is-stuck{
  height:56px;
  background:color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line-1);
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header{ transition:transform .45s var(--ease-io), height .4s var(--ease),
              background-color .4s var(--ease), border-color .4s var(--ease); }

/* --- Logo ---------------------------------------------------------------- */
.logo{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.logo__mark{
  width:28px; height:28px; flex:0 0 auto; object-fit:contain;
  filter:invert(1) brightness(1.6); opacity:.94;
  transition:filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.logo:hover .logo__mark{ opacity:1; transform:translateY(-1px); }
:root[data-theme="light"] .logo__mark{ filter:none; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .logo__mark{ filter:none; }
}
.logo__word{
  font-weight:400; font-size:15px; letter-spacing:.2em;
  line-height:1; white-space:nowrap; color:var(--paper-dim);
}
/* ARCHI is quiet, MASS carries the name */
.logo__word em{ font-style:normal; font-weight:700; letter-spacing:.2em; color:var(--paper); }

/* --- Primary nav --------------------------------------------------------- */
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--paper-dim);
  transition:color .25s var(--ease);
}
.nav__link:hover,.nav__item.is-open .nav__link{ color:var(--paper); }
.nav__link .caret{ width:7px; height:7px; opacity:.5; transition:transform .3s var(--ease); }
.nav__item.is-open .caret{ transform:rotate(180deg); }

/* mega panel — a drafting sheet dropping on a nearer Z-plane */
.nav__panel{
  position:fixed; top:calc(var(--header-h) - 4px); left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.99);
  width:min(940px, calc(100vw - 48px));
  max-height:calc(100vh - var(--header-h) - 24px);
  padding:18px; display:grid; gap:18px;
  grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .35s var(--ease), visibility .28s;
  background:color-mix(in srgb, var(--graphite) 94%, transparent);
  border:1px solid var(--line-2);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.45);
  overflow:auto;
}
.site-header.is-stuck .nav__panel{ top:52px; }
.nav__item.is-open .nav__panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav__groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; min-width:0; }
.nav__group{ min-width:0; }
.nav__group h3{
  margin:3px 14px 9px;
  color:var(--instrument-d); font:500 9px/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
}
.nav__group > a{
  display:block; padding:12px 14px;
  border:1px solid transparent;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav__group > a:hover{ background:color-mix(in srgb, var(--paper) 5%, transparent); border-color:var(--line-1); }
.nav__panel .t{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.nav__panel .d{ font-size:11.5px; color:var(--paper-mute); font-family:var(--f-mono); line-height:1.5; margin-top:4px; }
.nav__panel .idx{ font-family:var(--f-mono); font-size:10px; color:var(--instrument-d); }
.nav__visual{
  position:relative; display:block; min-height:330px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--deep);
  isolation:isolate;
}
.nav__visual::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 26%,rgba(2,12,20,.22) 52%,rgba(2,12,20,.96) 100%);
  transition:background .35s var(--ease);
}
.nav__visual:hover::after{ background:linear-gradient(180deg,transparent 18%,rgba(2,12,20,.16) 44%,rgba(2,12,20,.9) 100%); }
.nav__visual img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-io), filter .35s var(--ease);
}
.nav__visual:hover img{ transform:scale(1.035); filter:saturate(1.08); }
.nav__visual-copy{
  position:absolute; inset:auto 0 0; z-index:2; display:grid; gap:7px; padding:22px;
  color:#eaf7ff;
}
.nav__visual-copy small{
  font:500 9px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:#45d9ff;
}
.nav__visual-copy strong{ max-width:15ch; font-size:21px; line-height:1.04; letter-spacing:-.035em; }
.nav__visual-copy i{
  display:flex; justify-content:space-between; align-items:center; margin-top:5px;
  font:500 10px/1 var(--f-mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase;
}
.nav__visual-copy b{ font-size:14px; font-weight:400; }

/* --- Header actions ------------------------------------------------------ */
.header__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header__actions .btn--sm{ height:34px; }
.header__account{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--paper-dim); padding:9px 6px;
  transition:color .25s var(--ease);
}
.header__account:hover{ color:var(--paper); }
.header__account{ white-space:nowrap; }
.social-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.social-links .social-links__item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid var(--line-2);color:var(--paper-mute);background:transparent;transition:color .2s,border-color .2s,background-color .2s}
.social-links__item svg{width:18px;height:18px}
.social-links a:hover,.social-links a:focus-visible{color:var(--instrument);border-color:var(--instrument);background:var(--carbon)}
.social-links a:focus-visible{outline:2px solid var(--instrument);outline-offset:3px}
.social-links .social-links__item--inactive{opacity:.45}
.nav__group .social-links{margin:12px 14px 0}
.account-legal .social-links{margin:0}

/* --- Mobile -------------------------------------------------------------- */
.burger{
  display:none; width:42px; height:42px; position:relative;
  border:1px solid var(--line-2); flex:0 0 auto; margin-left:auto;
}
.burger i{
  position:absolute; left:12px; right:12px; height:1px; background:var(--paper);
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ bottom:16px; }
.burger.is-active i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.is-active i:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; left:auto; z-index:99;
  width:min(86vw,420px);
  background:color-mix(in srgb, var(--void) 97%, transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--line-1);
  box-shadow:-24px 0 70px color-mix(in srgb, #000 42%, transparent);
  padding:0 var(--gutter) 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateX(100%);
  transition:opacity .35s var(--ease), transform .45s var(--ease-io), visibility .35s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateX(0); }
.mobile-nav__backdrop{
  position:fixed; inset:0; z-index:98;
  background:color-mix(in srgb, #02080d 46%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.mobile-nav__backdrop.is-open{ opacity:1; visibility:visible; }
.mobile-nav__head{
  position:sticky; top:0; z-index:2;
  height:calc(var(--header-h) + 18px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:color-mix(in srgb, var(--void) 97%, transparent);
}
.mobile-nav__close{
  position:relative; width:42px; height:42px; flex:0 0 42px;
  border:1px solid var(--line-2);
}
.mobile-nav__close i{
  position:absolute; left:12px; right:12px; top:20px; height:1px; background:var(--paper);
}
.mobile-nav__close i:first-child{ transform:rotate(45deg); }
.mobile-nav__close i:last-child{ transform:rotate(-45deg); }
.mobile-nav__section{ border-bottom:1px solid var(--line-1); }
.mobile-nav__toggle{
  width:100%; min-height:58px; padding:15px 0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  color:var(--paper); text-align:left;
  font-size:19px; font-weight:300; letter-spacing:-.02em;
}
.mobile-nav__toggle svg{
  width:12px; height:12px; flex:0 0 12px; color:var(--paper-mute);
  transition:transform .25s var(--ease), color .25s var(--ease);
}
.mobile-nav__section.is-open .mobile-nav__toggle svg{ transform:rotate(180deg); color:var(--instrument); }
.mobile-nav__panel{ padding:0 0 18px; }
.mobile-nav__panel[hidden]{ display:none; }
.mobile-nav__group+ .mobile-nav__group{ margin-top:18px; }
.mobile-nav__group h5{
  margin:4px 0 6px; color:var(--paper-mute);
  font:500 9px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
}
.mobile-nav a.m-link{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-left:1px solid var(--line-1);
  color:var(--paper-dim); font-size:15px; font-weight:500; letter-spacing:-.01em;
}
.mobile-nav a.m-link:hover{ color:var(--paper); border-left-color:var(--instrument); }
.mobile-nav a.m-link span{ font-family:var(--f-mono); font-size:10px; color:var(--paper-mute); }
.mobile-nav__cta{ display:grid; gap:10px; margin-top:34px; }
.mobile-nav__cta .btn{ width:100%; }

@media (max-width:1180px){
  .nav,.header__actions{ display:none; }
  .burger{ display:block; }
}

/* --- Theme toggle -------------------------------------------------------- */
.header__theme{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 11px; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--paper-dim);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.header__theme:hover{
  color:var(--paper); border-color:var(--line-3);
  background:color-mix(in srgb, var(--paper) 5%, transparent);
}
.header__theme svg{
  width:13px; height:13px; flex:0 0 13px;
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round;
}
.header__theme .i-moon{ display:none; }
.header__theme .i-sun{ display:block; }
/* in light mode the button offers dark, so it shows the moon */
:root[data-theme="light"] .header__theme .i-sun{ display:none; }
:root[data-theme="light"] .header__theme .i-moon{ display:block; fill:currentColor; stroke:none; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .header__theme .i-sun{ display:none; }
  :root:not([data-theme="dark"]) .header__theme .i-moon{ display:block; fill:currentColor; stroke:none; }
}
@media (max-width:1240px){
  .header__theme span{ display:none; }
  .header__theme{ padding:0 9px; }
}

/* --- Countries: dynamic jurisdictions plus the navigation visual -------- */
.nav__country-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; align-content:start; }
.nav__country{
  display:block; padding:10px 11px; min-width:0;
  border:1px solid transparent;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav__country:hover{ background:color-mix(in srgb, var(--paper) 5%, transparent); border-color:var(--line-1); }
.nav__country .t{ font-size:12.5px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; }
.nav__country .d{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; color:var(--paper-mute); font-family:var(--f-mono); margin-top:2px; }
.nav__country .idx{ font-family:var(--f-mono); font-size:10px; color:var(--instrument-d); }
.nav__panel--countries{ width:min(1060px, calc(100vw - 48px)); grid-template-columns:minmax(0,1fr) minmax(260px,320px); }
.nav__panel--countries .nav__visual{ min-height:330px; height:330px; align-self:start; }
.nav__empty{ grid-column:1/-1; margin:0; padding:16px; color:var(--paper-mute); font-family:var(--f-mono); font-size:11px; }
.mobile-nav__countries{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line-1); background:var(--line-1); }
.m-country{ min-width:0; padding:11px; background:var(--void); color:var(--paper-dim); font-size:13px; overflow-wrap:anywhere; }
.m-country b{ display:block; margin-bottom:4px; color:var(--instrument); font:500 9px/1 var(--f-mono); letter-spacing:.14em; }
@media (max-width:520px){ .mobile-nav__countries{ grid-template-columns:1fr; } }

/* Shared product availability tag: navigation, account and workspace chooser. */
.product-status{display:inline-flex;align-items:center;vertical-align:middle;margin-inline-start:6px;padding:4px 6px;border:1px solid var(--line-3);color:var(--instrument);font:500 9px/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.product-launcher__copy strong{display:flex;align-items:center;flex-wrap:wrap;gap:6px}

.mobile-nav__group .m-link:has(.product-status){flex-wrap:wrap;gap:8px}.mobile-nav__group .m-link .product-status{font-size:9px}

/* Reserve one stable slot while the account session is checked. */
.header__actions [data-header-account]{width:126px;min-width:126px;flex:0 0 126px;white-space:nowrap}