/* Official silhouettes: Ceneris in orange, Grupo Cervetto in silver and light. */
.brand img { filter: none; }
.brand-lockup { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav { gap: 24px; }
.nav .brand { width: 200px; }
.nav .menu { gap: 18px; }
.nav-actions { gap: 10px; }
.nav .btn { padding-inline: 15px; }
.cervetto-logo {
  --metal-opacity: 1;
  --edge-opacity: 0;
  --logo-lift: 0px;
  position: relative;
  display: block;
  width: clamp(140px, 10.8vw, 184px);
  aspect-ratio: 2775 / 629;
  flex: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cervetto-logo:focus-visible { outline: 1px solid var(--orange); outline-offset: 9px; border-radius: 4px; }
.cervetto-art { position: absolute; inset: 0; transform: translateY(var(--logo-lift)); transition: transform .35s ease; pointer-events: none; }
.cervetto-art > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cervetto-base { opacity: var(--metal-opacity); object-fit: contain; transition: opacity .35s ease; }
.cervetto-sweep {
  -webkit-mask-image: var(--cervetto-mask);
  mask-image: var(--cervetto-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cervetto-outline { overflow: visible; stroke: none; fill: none; opacity: var(--edge-opacity); filter: drop-shadow(0 0 2px #dcecff80) drop-shadow(0 0 6px #9fcaff4d); transition: opacity .35s ease; }
.cervetto-sweep { background: linear-gradient(110deg, transparent 40%, #ffffff99 48%, #fff 50%, transparent 59%); background-size: 300% 100%; background-position: 100% 0; opacity: 0; }
.cervetto-logo:is(.is-lit, :focus-visible) { --metal-opacity: 0; --edge-opacity: 1; --logo-lift: -1px; }
.cervetto-logo:is(.is-lit, :focus-visible) .cervetto-sweep { animation: electric-sweep 1.25s ease-out both; }
@media (hover: hover) {
  .cervetto-logo:hover { --metal-opacity: 0; --edge-opacity: 1; --logo-lift: -1px; }
  .cervetto-logo:hover .cervetto-sweep { animation: electric-sweep 1.25s ease-out both; }
}
@keyframes electric-sweep {
  0% { opacity: 0; background-position: 100% 0; }
  15% { opacity: .85; }
  85% { opacity: .65; }
  100% { opacity: 0; background-position: 0 0; }
}
.footer-social {
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: -8px 0 16px;
  padding: 0;
}
.footer .footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--orange);
  border: 1px solid #ffffff26;
  border-radius: 8px;
}
.footer .footer-social a:hover,
.footer .footer-social a:focus-visible {
  color: var(--orange);
  border-color: currentColor;
  background: rgb(255 120 40 / 10%);
}
.footer-social svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.footer .footer-bottom { align-items: center; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.footer-affiliation { display: grid; justify-items: end; gap: 6px; margin-inline-start: auto; }
.footer-affiliation .cervetto-logo { width: min(210px, 62vw); }
@media (max-width: 600px) {
  .footer .footer-bottom { flex-direction: column; align-items: stretch; gap: 16px; }
}
@media (max-width: 1280px) and (min-width: 1101px) { .nav-actions .btn { display: none; } }
@media (max-width: 1100px) {
  .nav .nav-links { display: none; }
  .nav .nav-links.open { display: block; position: fixed; inset: 85px 0 0; height: calc(100svh - 85px); overflow: auto; background: var(--petrol); color: #fff; padding: 20px 24px 80px; }
  .nav-links .menu { display: block; }
  .nav .menu > li { font-size: 17px; white-space: normal; border-bottom: 1px solid #ffffff25; padding-block: 4px; }
  .nav .sub-menu { position: static; color: #fff; background: transparent; box-shadow: none; padding-left: 18px; }
  .nav .menu li:hover > .sub-menu { display: none; }
  .nav .menu li.submenu-open > .sub-menu, .nav .menu li:focus-within > .sub-menu { display: block; }
  .nav .submenu-toggle { float: right; font-size: 22px; padding: 10px; }
  .nav .menu-toggle { display: grid; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn { display: none; }
  .nav .brand { width: 180px; }
  .nav { min-height: 85px; padding-block: 15px; }
  .internal { padding-top: 85px; }
  .nav .menu-contact { display: block; }
  html:not(.js) .nav { position: relative; flex-wrap: wrap; background: var(--petrol); }
  html:not(.js) .nav .nav-links { display: block; order: 3; width: 100%; }
  html:not(.js) .nav .menu { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  html:not(.js) .nav .menu > li { font-size: 13px; border: 0; }
  html:not(.js) .internal { padding-top: 0; }
}
@media (max-width: 600px) {
  .nav { padding-inline: 18px; gap: 10px; }
  .brand-lockup { gap: 10px; }
  .nav .brand { width: clamp(116px, 35.9vw, 160px); }
  .nav .cervetto-logo { width: clamp(98px, 27.2vw, 145px); }
  .nav-actions { gap: 4px; }
  .nav .icon-btn { width: 30px; height: 38px; padding: 4px; }
}
@media (max-width: 360px) {
  .nav { padding-inline: 14px; gap: 8px; }
  .brand-lockup { gap: 8px; }
  .nav .icon-btn { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cervetto-art, .cervetto-base, .cervetto-outline { transition: none; }
  .cervetto-art { transform: none; }
  .cervetto-logo .cervetto-sweep { animation: none !important; }
}
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .cervetto-sweep { display: none; }
}
:root {
  --orange: #ff7828;
  --charcoal: #181b1d;
  --petrol: var(--charcoal);
  --ink: var(--charcoal);
}
.nav { background: var(--charcoal); }
.js .nav.over-story {
  background: rgb(24 27 29 / 28%);
  text-shadow: 0 1px 4px rgb(24 27 29 / 72%);
}
.nav .btn { text-shadow: none; }
.nav-link[aria-current=page] { color: var(--orange); }
.btn:not(.dark, .white, .outline):hover {
  background: var(--orange);
  box-shadow: 0 0 0 2px rgb(255 120 40 / 28%);
}
.card small {
  color: var(--ink);
  border-inline-start: 2px solid var(--orange);
  padding-inline-start: 8px;
}
.brand-tint { display: block; position: relative; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .brand-tint img { opacity: 0; }
  .brand-tint::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--orange);
    -webkit-mask: var(--brand-mask) center / contain no-repeat;
    mask: var(--brand-mask) center / contain no-repeat;
  }
}
.footer { background: var(--charcoal); }