/* A compact menu of destinations with a changing, drawn preview. */
@media (min-width:1151px) {
  .desktop-nav .nav-dropdown[open] > .nav-services-panel.nav-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .85fr);
    gap: 17px clamp(28px, 4vw, 70px);
    max-height: calc(100dvh - 82px);
    padding: 29px clamp(28px, 5.2vw, 90px) 34px;
    background: #e8f0e3;
  }
  .desktop-nav .nav-services-panel .nav-panel-intro {
    grid-column: 1 / -1;
    padding-bottom: 21px;
    gap: 20px;
  }
  .desktop-nav .nav-services-panel .nav-panel-intro strong {
    font-size: clamp(22px, 2vw, 32px);
    letter-spacing: -.055em;
  }
  .desktop-nav .nav-services-panel .nav-panel-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start;
    gap: 0 23px;
    margin: 0;
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a {
    position: relative;
    display: grid !important;
    grid-template-columns: 25px minmax(0, 1fr) 20px !important;
    grid-template-rows: 1fr !important;
    align-items: center;
    gap: 10px;
    min-height: 73px;
    padding: 10px 3px;
    border: 0;
    border-bottom: 1px solid #b7cbb6;
    background: transparent;
    transition: color .2s, padding .2s, background .2s;
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a::after {
    content: '↗︎';
    grid-column: 3;
    color: #326a43;
    font-size: 20px;
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity .2s, transform .2s;
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a:hover,
  .desktop-nav .nav-services-panel .nav-panel-links > a:focus-visible {
    padding: 10px 8px;
    background: #d8eacb;
    color: #235633;
    transform: none;
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a:hover::after,
  .desktop-nav .nav-services-panel .nav-panel-links > a:focus-visible::after {
    opacity: 1;
    transform: translate(0, 0);
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a small {
    grid-column: 1;
    grid-row: 1;
    color: #658e66;
    font: 500 11px 'DM Mono', monospace;
  }
  .desktop-nav .nav-services-panel .nav-panel-links > a strong {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.27;
    letter-spacing: -.025em;
  }
  .nav-service-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 365px;
    padding: 22px 25px 25px;
    overflow: hidden;
    background: #cbe8b8;
    transition: background .3s;
  }
  .nav-preview-kicker, .nav-preview-caption small {
    position: relative;
    z-index: 2;
    font: 500 10px 'DM Mono', monospace;
    letter-spacing: .05em;
  }
  .nav-preview-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .nav-preview-art::before {
    content: '';
    position: absolute;
    width: 73%;
    aspect-ratio: 1;
    top: -27%;
    right: -12%;
    border: 2px solid #2b6436;
    border-radius: 50%;
    box-shadow: 0 0 0 28px #fff8, 0 0 0 56px #2b643626;
    animation: nav-orbit 8s ease-in-out infinite alternate;
  }
  .nav-preview-sun {
    position: absolute;
    right: 25%;
    top: 10%;
    color: #427d3f;
    font: 100px/1 Georgia, serif;
    transform: rotate(-15deg);
    animation: nav-spin 20s linear infinite;
  }
  .nav-preview-sheet {
    position: absolute;
    left: 23%;
    top: 19%;
    width: 55%;
    height: 41%;
    padding: 23px;
    border: 2px solid #244933;
    border-radius: 3px;
    background: #f8faf1;
    box-shadow: 13px 13px 0 #275839;
    transform: rotate(-8deg);
    transition: transform .4s;
  }
  .nav-preview-sheet span { display: block; height: 3px; margin: 10px 0; background: #8bb98a; }
  .nav-preview-sheet span:nth-child(2) { width: 75%; }
  .nav-preview-sheet span:nth-child(3) { width: 48%; }
  .nav-preview-sheet i {
    position: absolute;
    right: 18px;
    bottom: 5px;
    font: normal 65px Georgia, serif;
    color: #357447;
  }
  .nav-preview-spark { position: absolute; left: 13%; top: 17%; color: #305f36; font-size: 32px; }
  .nav-preview-caption { position: relative; z-index: 2; }
  .nav-preview-caption strong { display: block; margin-top: 5px; font-size: clamp(24px, 2.3vw, 38px); line-height: 1.05; letter-spacing: -.07em; }
  .nav-preview-caption p { max-width: 280px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
  .nav-services-panel[data-nav-scene='1'] .nav-service-preview,
  .nav-services-panel[data-nav-scene='4'] .nav-service-preview { background: #f4db99; }
  .nav-services-panel[data-nav-scene='2'] .nav-service-preview,
  .nav-services-panel[data-nav-scene='7'] .nav-service-preview { background: #b7d9cc; }
  .nav-services-panel[data-nav-scene='3'] .nav-service-preview,
  .nav-services-panel[data-nav-scene='8'] .nav-service-preview { background: #e4d5ee; }
  .nav-services-panel[data-nav-scene='5'] .nav-service-preview,
  .nav-services-panel[data-nav-scene='6'] .nav-service-preview { background: #deebad; }
  .nav-services-panel[data-nav-scene='1'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='3'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='5'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='7'] .nav-preview-sheet { transform: rotate(7deg) translateY(-8px); }
  .nav-services-panel[data-nav-scene='2'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='4'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='6'] .nav-preview-sheet,
  .nav-services-panel[data-nav-scene='8'] .nav-preview-sheet { transform: rotate(-3deg) translateX(12px); }
}
@keyframes nav-orbit { to { transform: translate(-18px, 17px) scale(1.07); } }
@keyframes nav-spin { to { transform: rotate(345deg); } }
@media (max-width:1150px) {
  .mobile-nav .nav-service-preview { display: none; }
  .mobile-nav .nav-services-panel .nav-panel-links > a { border-bottom: 1px solid #b7cbb6; padding: 13px 0; }
  .mobile-nav .nav-services-panel .nav-panel-links > a small { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-preview-art::before, .nav-preview-sun { animation: none; }
  .nav-preview-sheet, .nav-service-preview { transition: none; }
}