/* Mechanik 80 — presentation-safe cascade, v9.7.0. */

:root { --m80-header-h: 209px; }

html {
  scrollbar-width: thin;
  scrollbar-color: #e60032 #07172c;
}
html::-webkit-scrollbar,
.m80-present-mega__inner::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track,
.m80-present-mega__inner::-webkit-scrollbar-track { background: #07172c; }
html::-webkit-scrollbar-thumb,
.m80-present-mega__inner::-webkit-scrollbar-thumb {
  border: 3px solid #07172c;
  border-radius: 20px;
  background: linear-gradient(#f0003c,#b90029);
}
html::-webkit-scrollbar-thumb:hover,
.m80-present-mega__inner::-webkit-scrollbar-thumb:hover { background: #ff234e; }

body.m80-present-menu-open { overflow: hidden; }

/* Stable institutional header. It does not reuse the legacy dropdown selectors. */
.m80-header--presentation { z-index: 9980; overflow: visible !important; }
.m80-header--presentation .m80-header-container { width: min(1460px,calc(100vw - 32px)); }
.m80-header--presentation .m80-identity-bar { height: 116px; overflow: visible !important; }
.m80-header--presentation .m80-identity-bar__inner { overflow: visible !important; }
.m80-header--presentation .m80-identity-lockup,
.m80-header--presentation .m80-brand,
.m80-header--presentation .m80-brand__image {
  min-width: 0;
  height: auto;
  overflow: visible !important;
  clip-path: none !important;
}
.m80-header--presentation .m80-brand__image,
.m80-header--presentation.is-sticky .m80-brand__image {
  position: relative;
  width: 244px !important;
  height: 106px !important;
  padding: 8px 13px !important;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  clip-path: none !important;
  overflow: visible !important;
  background: linear-gradient(135deg,#041326,#0c3159);
  box-shadow: 0 16px 34px rgba(7,23,44,.22),inset 0 0 0 1px rgba(255,255,255,.04);
  isolation: isolate;
  transition: transform .55s cubic-bezier(.18,.8,.18,1),box-shadow .55s,border-color .4s;
}
.m80-header--presentation .m80-brand__image::before { display: none !important; }
.m80-header--presentation .m80-brand__image::after {
  position: absolute;
  inset: 8px 13px;
  z-index: 2;
  display: block !important;
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg,transparent 27%,rgba(255,255,255,.96) 46%,transparent 65%);
  -webkit-mask: url("../images/logo-mechanik-original.png") center / contain no-repeat;
  mask: url("../images/logo-mechanik-original.png") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-155%);
  transition: transform .8s cubic-bezier(.18,.8,.18,1),opacity .2s;
}
.m80-header--presentation .m80-brand__image img,
.m80-header--presentation.is-sticky .m80-brand__image img {
  position: relative;
  z-index: 1;
  width: 218px !important;
  max-width: 218px !important;
  height: 90px !important;
  max-height: 90px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
}
.m80-header--presentation .m80-brand:hover .m80-brand__image,
.m80-header--presentation .m80-brand:focus-visible .m80-brand__image {
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 22px 48px rgba(7,23,44,.31),0 0 0 4px rgba(230,0,50,.11),inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(-3px);
}
.m80-header--presentation .m80-brand:hover .m80-brand__image::after,
.m80-header--presentation .m80-brand:focus-visible .m80-brand__image::after { opacity: .85; transform: translateX(155%); }
.m80-header--presentation .m80-header-jubilee { width: 118px; height: 103px; }

.m80-present-bar {
  position: relative;
  height: 62px;
  color: #fff;
  background: linear-gradient(90deg,#041326 0%,#082744 66%,#06172c 100%);
  border-bottom: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 16px 34px rgba(7,23,44,.24);
}
.m80-present-bar::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg,transparent 0 24%,rgba(255,255,255,.035) 24% 24.08%,transparent 24.08% 72%,rgba(255,255,255,.035) 72% 72.08%,transparent 72.08%);
}
.m80-present-bar__inner { position: relative; z-index: 3; height: 100%; display: flex; align-items: stretch; }
.m80-present-nav { min-width: 0; display: flex; align-items: stretch; }
.m80-present-nav > a {
  position: relative;
  padding: 0 clamp(13px,1.35vw,23px);
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,.1);
  color: #fff !important;
  font-family: "Barlow Condensed",sans-serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s,background .4s;
}
.m80-present-nav > a::after {
  position: absolute;
  right: 100%; bottom: 0; left: 0;
  height: 4px;
  content: "";
  background: var(--m80-red);
  transition: right .45s cubic-bezier(.18,.8,.18,1);
}
.m80-present-nav > a:hover,
.m80-present-nav > a:focus-visible { color: #fff !important; background: rgba(255,255,255,.075); }
.m80-present-nav > a:hover::after,
.m80-present-nav > a:focus-visible::after { right: 0; }
.m80-present-nav__jubilee { gap: 8px; background: rgba(230,0,50,.11); }
.m80-present-nav__jubilee b { color: #ff244f; font-size: 21px; line-height: 1; }
.m80-present-actions { height: 100%; margin-left: auto; display: flex; align-items: stretch; }
.m80-present-toggle {
  min-width: 164px;
  padding: 0 20px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  background: var(--m80-red);
  cursor: pointer;
  font-family: "Barlow Condensed",sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .35s,box-shadow .35s;
}
.m80-present-toggle i,
.m80-present-toggle i::before,
.m80-present-toggle i::after { width: 22px; height: 2px; display: block; background: currentColor; content: ""; transition: transform .35s; }
.m80-present-toggle i { position: relative; }
.m80-present-toggle i::before { position: absolute; top: -7px; }
.m80-present-toggle i::after { position: absolute; top: 7px; }
.m80-present-toggle:hover,
.m80-present-toggle:focus-visible { color: #fff; background: #ff1747; box-shadow: inset 0 -4px 0 #fff; }
.m80-present-menu-open .m80-present-toggle i { background: transparent; }
.m80-present-menu-open .m80-present-toggle i::before { top: 0; transform: rotate(45deg); }
.m80-present-menu-open .m80-present-toggle i::after { top: 0; transform: rotate(-45deg); }
.m80-present-facebook,
.m80-present-bip {
  width: 60px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255,255,255,.11);
  color: #fff !important;
  font-family: "Barlow Condensed",sans-serif;
  font-size: 18px;
  font-weight: 900;
  transition: color .3s,background .35s,transform .35s;
}
.m80-present-facebook:hover,
.m80-present-facebook:focus-visible,
.m80-present-bip:hover,
.m80-present-bip:focus-visible { color: #fff !important; background: #174a7b; }
.m80-present-bip { width: 70px; background: rgba(255,255,255,.045); }
.m80-present-bar .m80-mobile-search,
.m80-present-bar .m80-menu-trigger { display: none; }

/* One deliberate dropdown mega panel instead of twelve fragile flyouts. */
.m80-present-mega {
  position: absolute;
  z-index: 2;
  top: 100%; left: 0;
  width: 100%;
  max-height: calc(100vh - var(--m80-header-h));
  visibility: hidden;
  overflow: hidden;
  color: #fff;
  background: rgba(4,19,38,.985);
  border-top: 4px solid var(--m80-red);
  box-shadow: 0 35px 80px rgba(0,0,0,.42);
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity .26s,transform .42s cubic-bezier(.18,.8,.18,1),visibility 0s .43s;
}
.m80-present-mega::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 110px 110px;
  opacity: .72;
}
.m80-present-menu-open .m80-present-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.m80-present-mega__inner {
  position: relative;
  max-height: calc(100vh - var(--m80-header-h));
  padding: 25px 8px 30px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--m80-red) #07172c;
}
.m80-header--presentation.is-sticky .m80-present-mega,
.m80-header--presentation.is-sticky .m80-present-mega__inner { max-height: calc(100vh - 62px); }
.m80-present-mega__head { min-height: 68px; margin-right: 14px; padding: 0 0 20px; display: grid; grid-template-columns: minmax(250px,.75fr) 1fr auto; align-items: center; gap: 30px; border-bottom: 1px solid rgba(255,255,255,.16); }
.m80-present-mega__head > div { display: grid; }
.m80-present-mega__head small { color: #ff3157; font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.m80-present-mega__head strong { font-family: "Barlow Condensed",sans-serif; font-size: clamp(26px,2.2vw,38px); line-height: 1; text-transform: uppercase; }
.m80-present-mega__head > span { color: rgba(255,255,255,.58); font-size: 11px; }
.m80-present-mega__head button { min-width: 118px; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: space-between; color: #fff; background: transparent; cursor: pointer; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; transition: color .3s,background .3s,border-color .3s; }
.m80-present-mega__head button b { font-size: 24px; font-weight: 400; transition: transform .35s; }
.m80-present-mega__head button:hover,
.m80-present-mega__head button:focus-visible { color: var(--m80-navy); border-color: #fff; background: #fff; }
.m80-present-mega__head button:hover b { transform: rotate(90deg); }
.m80-present-mega__nav { padding: 24px 14px 7px 0; }
.m80-v97-menu,
.m80-v97-menu ul { margin: 0; padding: 0; list-style: none; }
.m80-v97-menu { counter-reset: present-menu; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 10px; }
.m80-v97-menu > li {
  counter-increment: present-menu;
  position: relative;
  min-width: 0;
  min-height: 94px;
  padding: 14px 14px 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  transition: border-color .35s,background .35s,transform .4s cubic-bezier(.18,.8,.18,1),box-shadow .4s;
}
.m80-v97-menu > li::before { position: absolute; top: 15px; right: 14px; color: #ff3157; content: "0" counter(present-menu); font-family: "Barlow Condensed",sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.m80-v97-menu > li:hover { z-index: 2; border-color: rgba(255,255,255,.42); background: rgba(18,59,101,.48); box-shadow: 0 20px 45px rgba(0,0,0,.2); transform: translateY(-3px); }
.m80-v97-menu > li > a { min-height: 42px; padding: 0 34px 12px 0; display: block; border-bottom: 2px solid var(--m80-red); color: #fff !important; font-family: "Barlow Condensed",sans-serif; font-size: 20px; font-weight: 850; line-height: 1; letter-spacing: .015em; text-transform: uppercase; }
.m80-v97-menu > li > a::after { float: right; color: #ff3157; content: "↗"; font-size: 14px; }
.m80-v97-menu > li.menu-item-has-children > a::after { content: "+"; }
.m80-v97-menu > li.m80-nav-jubilee { border-color: rgba(230,0,50,.52); background: linear-gradient(135deg,rgba(230,0,50,.3),rgba(230,0,50,.08)); }
.m80-v97-menu > li.m80-nav-jubilee::before { content: "80"; color: #fff; font-size: 16px; }
.m80-v97-menu > li.m80-nav-education,
.m80-v97-menu > li.m80-nav-students { grid-column: span 2; }
.m80-v97-menu > li.m80-nav-education > .sub-menu,
.m80-v97-menu > li.m80-nav-students > .sub-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
.m80-v97-menu .sub-menu { margin-top: 7px; }
.m80-v97-menu .sub-menu li { min-width: 0; }
.m80-v97-menu .sub-menu a { position: relative; padding: 7px 20px 7px 0; display: block; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.74) !important; font-size: 10px; font-weight: 650; line-height: 1.28; transition: color .25s,padding .3s,background .3s; }
.m80-v97-menu .sub-menu a::after { position: absolute; top: 7px; right: 2px; color: #ff3157; content: "›"; }
.m80-v97-menu .sub-menu a:hover,
.m80-v97-menu .sub-menu a:focus-visible { padding-left: 7px; color: #fff !important; background: rgba(255,255,255,.055); }
.m80-v97-menu .sub-menu .sub-menu { margin: 0 0 5px 8px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.12); }
.m80-v97-menu .sub-menu .sub-menu a { padding-block: 5px; color: rgba(255,255,255,.58) !important; font-size: 9px; }
.m80-present-mega__foot { margin: 13px 14px 0 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.m80-present-mega__foot a { min-height: 49px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.14); color: #fff !important; font-family: "Barlow Condensed",sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; transition: background .3s; }
.m80-present-mega__foot a:last-child { border-right: 0; }
.m80-present-mega__foot a:hover { background: rgba(255,255,255,.07); }
.m80-present-mega__foot span { color: #ff3157; font-size: 9px; letter-spacing: .1em; }

/* New rasters already contain the low camera perspective; never crop it from above. */
.m80-hero__photo img,
.m80-hero__photo--past img,
.m80-hero__photo--now img {
  object-position: 50% 100% !important;
  transform: scale(1.01) translate3d(calc(var(--pointer-x) * -3px),calc(var(--pointer-y) * -2px),0) !important;
}
.m80-hero__photo--past img { filter: sepia(.08) saturate(.92) contrast(1.08) brightness(.77); }

/* Article content first, category console only once and only on the right. */
.m80-news-single .m80-article-layout { grid-template-columns: minmax(0,920px) minmax(250px,300px); gap: clamp(42px,5vw,76px); justify-content: center; align-items: start; }
.m80-news-single .m80-article-main { min-width: 0; grid-column: 1; }
.m80-news-single .m80-article-rail { grid-column: 2; position: sticky; top: 92px; }
.m80-news-single .m80-article-featured img { width: 100%; height: auto; max-height: 620px; object-fit: cover; object-position: 50% 42%; }
.m80-news-single .m80-related > .m80-news-controls { display: none !important; }

@media (max-width: 1280px) and (min-width: 1181px) {
  .m80-present-nav > a { padding-inline: 11px; font-size: 12px; }
  .m80-present-toggle { min-width: 148px; padding-inline: 16px; }
  .m80-header--presentation .m80-brand__image,
  .m80-header--presentation.is-sticky .m80-brand__image { width: 220px !important; }
  .m80-header--presentation .m80-brand__image img,
  .m80-header--presentation.is-sticky .m80-brand__image img { width: 194px !important; max-width: 194px !important; }
}

@media (max-width: 1180px) {
  :root { --m80-header-h: 82px; }
  .m80-header--presentation .m80-utility-bar { display: none; }
  .m80-header--presentation .m80-identity-bar,
  .m80-header--presentation.is-sticky .m80-identity-bar { height: 82px; overflow: visible !important; opacity: 1; background: #fff; }
  .m80-header--presentation .m80-identity-bar__inner { justify-content: flex-start; }
  .m80-header--presentation .m80-header-contacts { display: none; }
  .m80-header--presentation .m80-brand__image,
  .m80-header--presentation.is-sticky .m80-brand__image { width: 164px !important; height: 74px !important; padding: 5px 8px !important; }
  .m80-header--presentation .m80-brand__image img,
  .m80-header--presentation.is-sticky .m80-brand__image img { width: 148px !important; max-width: 148px !important; height: 64px !important; max-height: 64px !important; }
  .m80-header--presentation .m80-header-jubilee { width: 75px; height: 70px; }
  .m80-present-bar,
  .m80-header--presentation.is-sticky .m80-present-bar { position: absolute; top: 0; right: max(16px,calc((100vw - var(--m80-container))/2)); width: auto; height: 82px; display: flex; align-items: center; background: transparent; border: 0; box-shadow: none; }
  .m80-present-bar::before,
  .m80-present-nav,
  .m80-present-toggle,
  .m80-present-mega { display: none !important; }
  .m80-present-bar__inner { width: auto !important; margin: 0; display: flex; align-items: center; }
  .m80-present-actions { height: 48px; margin: 0; }
  .m80-present-facebook,
  .m80-present-bip,
  .m80-present-bar .m80-mobile-search { display: flex; align-items: center; justify-content: center; }
  .m80-present-bar .m80-menu-trigger { display: grid; align-items: center; }
  .m80-present-facebook,
  .m80-present-bip { width: 48px; color: #fff !important; background: var(--m80-navy); border-right: 1px solid rgba(255,255,255,.16); }
  .m80-present-bar .m80-mobile-search { width: 48px; height: 48px; min-height: 48px; padding: 12px; color: #fff; background: #123b67; }
  .m80-present-bar .m80-menu-trigger { width: 92px; height: 48px; }
  .m80-news-single .m80-article-layout { grid-template-columns: 1fr; }
  .m80-news-single .m80-article-main { grid-column: 1; }
  .m80-news-single .m80-article-rail { display: none !important; }
}

@media (max-width: 620px) {
  :root { --m80-header-h: 74px; }
  .m80-header--presentation .m80-header-container { width: calc(100vw - 12px); }
  .m80-header--presentation .m80-identity-bar,
  .m80-header--presentation.is-sticky .m80-identity-bar { height: 74px; }
  .m80-header--presentation .m80-brand__image,
  .m80-header--presentation.is-sticky .m80-brand__image { width: 127px !important; height: 66px !important; padding: 3px 5px !important; }
  .m80-header--presentation .m80-brand__image img,
  .m80-header--presentation.is-sticky .m80-brand__image img { width: 117px !important; max-width: 117px !important; height: 60px !important; max-height: 60px !important; }
  .m80-header--presentation .m80-header-jubilee,
  .m80-present-facebook { display: none; }
  .m80-present-bar,
  .m80-header--presentation.is-sticky .m80-present-bar { right: 6px; height: 74px; }
  .m80-present-actions { height: 46px; }
  .m80-present-bip,
  .m80-present-bar .m80-mobile-search { width: 43px; height: 46px; min-height: 46px; }
  .m80-present-bar .m80-menu-trigger { width: 82px; height: 46px; }
  .m80-hero__photo img,
  .m80-hero__photo--past img,
  .m80-hero__photo--now img { object-position: 53% 100% !important; transform: scale(1.02) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .m80-present-mega,
  .m80-present-toggle *,
  .m80-v97-menu > li,
  .m80-header--presentation .m80-brand__image,
  .m80-header--presentation .m80-brand__image::after { transition-duration: .01ms !important; }
}