/*
 * Mechanik 80 — presentation refinement v9.9.0
 * Stable 1946/2026 comparison, raster dashboard and expanded footer.
 */

/* A single light sweep across the navy logo tile — never a second logo. */
.m80-header--dropdown .m80-brand__image::after,
.m80-header--dropdown.is-sticky .m80-brand__image::after {
  position: absolute !important;
  z-index: 4 !important;
  top: -32% !important;
  right: auto !important;
  bottom: -32% !important;
  left: -44% !important;
  width: 27% !important;
  height: auto !important;
  display: block !important;
  content: "" !important;
  background: linear-gradient(106deg,transparent 3%,rgba(255,255,255,.08) 28%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.1) 69%,transparent 96%) !important;
  -webkit-mask: none !important;
  mask: none !important;
  opacity: 0 !important;
  transform: skewX(-17deg) translateX(0) !important;
  pointer-events: none !important;
  transition: transform .82s cubic-bezier(.19,.8,.22,1),opacity .15s ease !important;
}
.m80-header--dropdown .m80-brand:hover .m80-brand__image::after,
.m80-header--dropdown .m80-brand:focus-visible .m80-brand__image::after {
  opacity: .82 !important;
  transform: skewX(-17deg) translateX(690%) !important;
}
.m80-header--dropdown .m80-brand:hover .m80-brand__image,
.m80-header--dropdown .m80-brand:focus-visible .m80-brand__image {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,.48) !important;
  box-shadow: 0 20px 45px rgba(7,23,44,.3),0 0 0 3px rgba(230,0,50,.1),inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/*
 * The range changes only the two photo masks and the dividing seam.
 * The control, anniversary mark and cog mechanism remain anchored.
 */
.m80-hero__photo--past,
.m80-hero__photo--now {
  transition: none !important;
  will-change: clip-path;
}
.m80-hero__seam {
  transition: none !important;
  will-change: left;
}
.m80-hero__mechanism,
.m80-hero__logo {
  left: 50% !important;
  transition: transform .35s ease,filter .35s ease !important;
}
.m80-hero__compare,
.m80-js .m80-hero__compare[data-reveal],
.m80-js .m80-hero__compare[data-reveal].is-inview {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.m80-hero__compare,
.m80-hero__compare label,
.m80-hero__compare input {
  touch-action: pan-y;
}
.m80-hero__compare input {
  user-select: none;
  -webkit-user-select: none;
}
.m80-hero__compare input::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,#b99b70 0 var(--m80-range-progress,50%),var(--m80-red) var(--m80-range-progress,50%) 100%) !important;
}
.m80-hero__compare input::-moz-range-track {
  background: linear-gradient(90deg,#b99b70 0 var(--m80-range-progress,50%),var(--m80-red) var(--m80-range-progress,50%) 100%) !important;
}

/* Four readable raster shortcuts per row on desktop. */
.m80-console { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.m80-console-tile,
.m80-console-tile--wide { min-height: 252px; grid-column: auto !important; }
.m80-console-tile--long h3 { max-width: 13ch; font-size: clamp(25px,1.75vw,32px) !important; line-height: .93; }
.m80-console-tile--long p { max-width: 29ch; }

/* Expanded school footer, with a real school mark and editor-owned menu. */
.m80-footer__logos {
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.m80-footer__brand,
.m80-footer__jubilee {
  position: relative;
  min-height: 106px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #071b33;
  transition: border-color .35s ease,transform .45s var(--m80-ease),box-shadow .45s ease;
}
.m80-footer__brand { width: min(320px,72%); }
.m80-footer__jubilee { width: 108px; background: #f7f4ee; }
.m80-footer__brand img { width: 92%; height: 92px; object-fit: contain; }
.m80-footer__jubilee img { width: 92%; height: 92px; object-fit: contain; }
.m80-footer__brand::after {
  position: absolute;
  inset: -35% auto -35% -40%;
  width: 23%;
  content: "";
  background: linear-gradient(105deg,transparent,rgba(255,255,255,.68),transparent);
  transform: skewX(-17deg);
  transition: transform .78s var(--m80-ease);
}
.m80-footer__brand:hover,
.m80-footer__brand:focus-visible,
.m80-footer__jubilee:hover,
.m80-footer__jubilee:focus-visible {
  border-color: rgba(255,255,255,.52);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  transform: translateY(-3px);
}
.m80-footer__brand:hover::after,
.m80-footer__brand:focus-visible::after { transform: skewX(-17deg) translateX(650%); }
.m80-footer__actions {
  width: min(610px,100%);
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.18);
}
.m80-footer-action {
  min-height: 60px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #fff !important;
  background: #07192d;
  font-family: "Barlow Condensed",sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color .35s ease,background .4s ease,transform .4s var(--m80-ease);
}
.m80-footer-action b { color: #fff; font-size: 12px; font-weight: 700; text-align: right; }
.m80-footer-action--primary { background: var(--m80-red); }
.m80-footer-action:hover,
.m80-footer-action:focus-visible {
  color: #06172c !important;
  background: #fff;
  transform: translateY(-2px);
}
.m80-footer-action:hover b,
.m80-footer-action:focus-visible b { color: var(--m80-red); }
.m80-footer__contact > div { position: relative; padding-left: 82px !important; }
.m80-footer__contact > div:nth-child(even) { padding-left: 82px !important; }
.m80-footer__contact > div > img {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 49px;
  height: 49px;
  object-fit: contain;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.3));
}
.m80-footer__contact > div:nth-child(odd) > img { left: 0; }
.m80-footer__nav {
  position: relative;
  grid-column: 1 / -1 !important;
  padding-top: 35px;
}
.m80-footer__nav-label {
  margin-bottom: 12px;
  display: block;
  color: var(--m80-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.m80-footer__nav > ul,
.m80-footer__nav .m80-footer-menu {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid rgba(255,255,255,.18);
}
.m80-footer__nav li { flex: 0 1 auto; }
.m80-footer__nav a { min-height: 54px; display: flex; align-items: center; }

@media (max-width: 1180px) {
  .m80-console { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .m80-hero__mechanism,
  .m80-hero__logo { left: 50% !important; }
  .m80-hero__compare,
  .m80-js .m80-hero__compare[data-reveal],
  .m80-js .m80-hero__compare[data-reveal].is-inview {
    right: 16px !important;
    left: 16px !important;
    transform: none !important;
  }
  .m80-footer__inner { grid-template-columns: 1fr !important; }
  .m80-footer__lead,
  .m80-footer__contact,
  .m80-footer__nav { grid-column: 1 !important; }
  .m80-footer__actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  html,
  body { overflow-x: clip; }
  .m80-header--dropdown .m80-brand:hover .m80-brand__image,
  .m80-header--dropdown .m80-brand:focus-visible .m80-brand__image { transform: none !important; }
  .m80-hero__mechanism { top: 176px !important; left: 50% !important; width: 172px !important; height: 198px !important; }
  .m80-hero__logo { top: 176px !important; left: 50% !important; width: 176px !important; height: 125px !important; }
  .m80-hero__compare,
  .m80-js .m80-hero__compare[data-reveal],
  .m80-js .m80-hero__compare[data-reveal].is-inview {
    top: 281px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    padding: 11px 10px 10px !important;
    gap: 8px !important;
    transform: none !important;
  }
  .m80-hero__compare input::-webkit-slider-thumb { width: 35px; height: 35px; margin-top: -16px; }
  .m80-hero__compare input::-moz-range-thumb { width: 35px; height: 35px; }
  .m80-hero__compare-hint { right: 0 !important; max-width: calc(100vw - 36px); }
  .m80-hero__compare-hint span { white-space: normal !important; text-align: right; }
  .m80-hero__photo { background-position: 50% 100% !important; }
  .m80-hero__content { padding-inline: 14px !important; }

  .m80-console { grid-template-columns: 1fr !important; }
  .m80-console-tile,
  .m80-console-tile--wide {
    min-height: 174px !important;
    padding: 14px 16px !important;
  }
  .m80-console-tile > div {
    margin: 8px 0 10px !important;
    display: grid;
    grid-template-columns: 78px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 13px;
    align-items: center;
  }
  .m80-console-tile i { grid-row: 1 / 3; width: 74px !important; height: 74px !important; }
  .m80-console-tile h3,
  .m80-console-tile--long h3 { max-width: none; margin: 0 0 5px !important; font-size: clamp(27px,8vw,35px) !important; line-height: .91; overflow-wrap: anywhere; }
  .m80-console-tile p { grid-column: 2; font-size: 11px !important; }
  .m80-console-tile > b { padding-top: 8px; }

  .m80-footer { padding-top: 68px !important; }
  .m80-footer__inner { width: calc(100vw - 28px) !important; gap: 42px !important; }
  .m80-footer__logos { margin-bottom: 25px; gap: 7px; }
  .m80-footer__brand { width: calc(100% - 82px); min-height: 84px; }
  .m80-footer__jubilee { width: 76px; min-height: 84px; }
  .m80-footer__brand img { height: 72px; }
  .m80-footer__jubilee img { height: 68px; }
  .m80-footer__lead h2 { margin-bottom: 27px; font-size: clamp(55px,17vw,78px) !important; }
  .m80-footer__actions { grid-template-columns: 1fr 1fr; }
  .m80-footer-action { min-height: 56px; padding: 10px 11px; font-size: 11px; }
  .m80-footer-action b { font-size: 10px; }
  .m80-footer__contact { grid-template-columns: 1fr !important; }
  .m80-footer__contact > div,
  .m80-footer__contact > div:nth-child(even) {
    min-height: 116px !important;
    padding: 20px 15px 20px 77px !important;
    border-left: 0 !important;
  }
  .m80-footer__contact > div > img,
  .m80-footer__contact > div:nth-child(odd) > img { top: 22px; left: 14px; width: 47px; height: 47px; }
  .m80-footer__nav { margin-top: 0 !important; padding-top: 27px; }
  .m80-footer__nav > ul,
  .m80-footer__nav .m80-footer-menu { display: grid !important; grid-template-columns: 1fr 1fr; }
  .m80-footer__nav li { min-width: 0; }
  .m80-footer__nav a { min-height: 50px; padding: 12px 10px !important; font-size: 10px !important; overflow-wrap: anywhere; }
  .m80-footer__bottom { gap: 9px; align-items: flex-start; }
}

@media (max-width: 390px) {
  .m80-footer__actions { grid-template-columns: 1fr; }
  .m80-footer__nav > ul,
  .m80-footer__nav .m80-footer-menu { grid-template-columns: 1fr; }
  .m80-hero__compare > span { font-size: 7px !important; }
  .m80-hero__compare b { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .m80-header--dropdown .m80-brand__image::after,
  .m80-footer__brand::after { display: none !important; }
  .m80-hero__photo--past,
  .m80-hero__photo--now,
  .m80-hero__seam { transition: none !important; }
}