/*
 * JUMCOURVIC NIGERIA LIMITED
 * Motion system
 *
 * Purpose:
 * - Shared reveal transitions for page sections and cards
 * - Cinematic requirement dropdown entrance/exit
 * - Respect reduced-motion preferences
 *
 * Keep layout, typography and static visual styling in style.css.
 */


/* Scroll-reveal states: main.js adds .reveal and .is-visible. */
.js .reveal,
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Subtle stagger for groups as they reveal. */
.enable-card.reveal,
.capability-item.reveal,
.system-stage.reveal,
.sector-item.reveal {
  transition-delay: var(--reveal-delay, 0ms);
}

/* Header response while scrolling. */
#siteHeader {
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease,
    padding 360ms ease;
}

/* Full-screen navigation: smooth fade and architectural rise. */
#menuOverlay {
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 520ms ease;
}

#menuOverlay .menu-content,
#menuOverlay .menu-links,
#menuOverlay .menu-link {
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cinematic requirement dropdown. */
#requirementSelect .cinema-select-trigger,
#requirementSelect .cinema-select-arrow {
  transition:
    border-color 320ms ease,
    background-color 320ms ease,
    color 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#requirementSelect .cinema-select-arrow {
  transform: rotate(0deg);
}

#requirementSelect.is-open .cinema-select-arrow {
  transform: rotate(180deg);
}

#requirementSelect .cinema-select-panel {
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

#requirementSelect .cinema-select-panel.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

#requirementSelect .cinema-select-option {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 240ms ease,
    color 240ms ease;
}

#requirementSelect .cinema-select-panel.is-visible .cinema-select-option {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(1) { transition-delay: 35ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(2) { transition-delay: 65ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(3) { transition-delay: 95ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(4) { transition-delay: 125ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(5) { transition-delay: 155ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(6) { transition-delay: 185ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(7) { transition-delay: 215ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(8) { transition-delay: 245ms; }
#requirementSelect .cinema-select-panel.is-visible .cinema-select-option:nth-child(9) { transition-delay: 275ms; }

/* Interactive surfaces should respond smoothly without feeling playful. */
.enable-card,
.capability-item,
.system-stage,
.sector-item,
a,
button {
  transition:
    color 260ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Accessibility: disable motion when requested by the visitor. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal,
  .reveal.is-visible,
  #requirementSelect .cinema-select-option {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Extracted existing animation rules retained from style.css */
.site-header {

    position: fixed;

    inset: 0 0 auto;

    z-index: 1000;

    padding: 30px 0;

    transition: padding .45s var(--ease),background .45s ease,border-color .45s ease;

    border-bottom: 1px solid transparent;

}

.main-navigation a:after,.menu-button:after {

    content: "";

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--silver);

    transition: width .35s var(--ease);

}

.menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: clamp(28px,7vw,100px);

    background: var(--black);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-12px);

    transition: opacity .4s ease,transform .5s var(--ease),visibility .4s;

}

.menu-navigation a {

    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    font-size: clamp(27px,5.2vw,72px);

    line-height: .98;

    font-weight: 500;

    letter-spacing: -.055em;

    transition: color .25s ease,transform .35s var(--ease);

}

.menu-navigation a span {

    color: var(--grey);

    font-size: .32em;

    opacity: 0;

    transform: translate(-8px,8px);

    transition: opacity .25s ease,transform .25s ease;

}

.hero-background {

    position: absolute;

    z-index: -3;

    inset: 0;

    background-color: var(--black);

    background-image: linear-gradient(90deg, rgba(11, 11, 11, .96) 0%, rgba(11, 11, 11, .78) 38%, rgba(11, 11, 11, .20) 100%), linear-gradient(0deg, rgba(11, 11, 11, .42), transparent 42%), url("../images/hero-architecture.jpg");

    background-position: center, center, 58% center;

    background-size: cover, cover, cover;

    background-repeat: no-repeat;

    transform: scale(1.02);

    animation: heroAtmosphere 18s ease-in-out infinite alternate;

}

.scroll-line {

    width: 1px;

    height: 46px;

    background: linear-gradient(var(--silver),transparent);

    transform-origin: top;

    animation: scrollPulse 2.2s ease-in-out infinite;

}

.enable-card {

    position: relative;

    min-height: 365px;

    padding: 24px 22px;

    overflow: hidden;

    background: #101010;

    transition: background .45s ease;

}

.enable-card:after {

    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 2px;

    background: var(--silver);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .5s var(--ease);

}

.capability-item {

    display: grid;

    grid-template-columns: 45px minmax(260px,1.2fr) minmax(160px,.8fr) 22px;

    align-items: center;

    gap: 22px;

    padding: 27px 0;

    border-bottom: 1px solid var(--line-light);

    transition: padding .35s var(--ease);

}

.capability-arrow {

    color: var(--grey);

    font-size: 17px;

    transition: transform .3s var(--ease),color .3s ease;

}

.system-stage {

    position: relative;

    min-height: 195px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 22px 20px;

    border-right: 1px solid var(--line-dark);

    border-bottom: 1px solid var(--line-dark);

    transition: background .35s ease;

}

.sector-item {

    display: grid;

    grid-template-columns: 45px 1fr 1fr 22px;

    align-items: center;

    gap: 24px;

    padding: 32px 0;

    border-bottom: 1px solid var(--line-dark);

    transition: padding .35s var(--ease);

}

.reveal {

    opacity: 0;

    transform: translateY(22px);

    transition: opacity .8s var(--ease),transform .8s var(--ease);

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}

.hero-content.reveal {

    animation: heroEnter 1.1s .15s var(--ease) both;

}

@keyframes heroEnter {

    from {

        opacity: 0;

        transform: translateY(24px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroAtmosphere {

    from {

        transform: scale(1.02) translateX(0);

    }

    to {

        transform: scale(1.08) translateX(-1%);

    }

}

@keyframes scrollPulse {

    0%,100% {

        transform: scaleY(.65);

        opacity: .55;

    }

    50% {

        transform: scaleY(1);

        opacity: 1;

    }

}

@media (prefers-reduced-motion:reduce) {

    *,*:before,*:after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

    .reveal {

        opacity: 1;

        transform: none;

    }

}

.capability-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.72);
  transition: transform 600ms ease, filter 600ms ease;
}

.cinema-select {
    position: relative;
    z-index: 5;
    width: 100%;
}

.cinema-select-trigger {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    border: 1px solid #c9c9c9;
    border-radius: 0;
    background: #fff;
    color: #777;
    text-align: left;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .35s ease, color .35s ease, background .35s ease;
}

.cinema-select.is-open .cinema-select-trigger {
    border-color: #0b0b0b;
    color: #0b0b0b;
}

.cinema-select-trigger:focus-visible {
    outline: 2px solid #a7a7a7;
    outline-offset: 3px;
}

.cinema-select-value { flex: 1; }

.cinema-select-value.has-value { color: #0b0b0b; }

.cinema-select-arrow {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border: 1px solid #d2d2d2;
    border-radius: 50%;
    transition: background .4s ease, border-color .4s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.cinema-select-arrow span {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1px solid #0b0b0b;
    border-bottom: 1px solid #0b0b0b;
    transform: rotate(45deg);
    transition: transform .4s ease, margin .4s ease;
}

.cinema-select.is-open .cinema-select-arrow {
    transform: rotate(180deg);
    background: #0b0b0b;
    border-color: #0b0b0b;
}

.cinema-select.is-open .cinema-select-arrow span {
    border-color: #fff;
}

.cinema-select-line {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #0b0b0b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.cinema-select.is-open .cinema-select-line { transform: scaleX(1); }

.cinema-select-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    left: 0;
    z-index: 30;
    max-height: min(390px, 58vh);
    overflow: auto;
    padding: 8px 12px 12px;
    border: 1px solid rgba(245,245,245,.2);
    background: #0b0b0b;
    color: #f5f5f5;
    box-shadow: 0 24px 55px rgba(0,0,0,.24), 0 5px 14px rgba(0,0,0,.12);
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, transform .48s cubic-bezier(.16,1,.3,1), visibility .28s;
    scrollbar-color: #6b6b6b #0b0b0b;
}

.cinema-select-panel[hidden] { display: none; }

.cinema-select-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.cinema-select-panel-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 7px 14px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(245,245,245,.2);
    color: #a7a7a7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

.cinema-select-option {
    display: grid;
    grid-template-columns: 27px minmax(0,1fr) 17px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 43px;
    padding: 10px 7px;
    border: 0;
    border-bottom: 1px solid rgba(245,245,245,.09);
    background: transparent;
    color: #f5f5f5;
    text-align: left;
    font: inherit;
    font-size: 11px;
    line-height: 1.45;
    cursor: pointer;
    opacity: 0;
    transform: translateY(9px);
    transition: background .25s ease, color .25s ease, opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}

.cinema-select-panel.is-visible .cinema-select-option {
    opacity: 1;
    transform: translateY(0);
}

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(2) { transition-delay: .025s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(3) { transition-delay: .05s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(4) { transition-delay: .075s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(5) { transition-delay: .1s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(6) { transition-delay: .125s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(7) { transition-delay: .15s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(8) { transition-delay: .175s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(9) { transition-delay: .2s; }

.cinema-select-panel.is-visible .cinema-select-option:nth-of-type(10) { transition-delay: .225s; }

.cinema-select-option[aria-selected="true"] {
    outline: none;
    background: #202020;
    color: #fff;
}

.cinema-select-option:focus-visible .option-check {
    opacity: 1;
    transform: translate(0,0);
}

.cinema-select.is-invalid .cinema-select-trigger { border-color: #8b2d2d; }

@media (prefers-reduced-motion: reduce) {
    .cinema-select *, .cinema-select-panel, .cinema-select-option { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0ms !important; }
}




/* Oblique Dossier motion accents */
.hero::after {
  animation: dossier-stamp-in 900ms 420ms both cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dossier-stamp-in {
  from { opacity: 0; transform: translateY(-8px) rotate(180deg); }
  to { opacity: 1; transform: translateY(0) rotate(180deg); }
}

.section-topline::before {
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none !important;
  }
}



/* CINEMATIC MENU — Oblique Dossier Edition */
.menu-overlay{--menu-red:#9D4337;position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:clamp(22px,3vw,46px) clamp(22px,5.3vw,82px) 22px;background:#0B0B0B;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:none;isolation:isolate;transition:opacity .65s cubic-bezier(.22,1,.36,1),visibility .65s ease}
.menu-overlay:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(245,245,245,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,245,245,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 95%);opacity:.46}
.menu-overlay:after{content:"JCL";position:absolute;z-index:-2;right:-.04em;bottom:-.31em;font-size:clamp(240px,38vw,620px);line-height:1;font-weight:700;letter-spacing:-.12em;color:rgba(245,245,245,.022);pointer-events:none}
.menu-overlay.active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.menu-atmosphere{position:absolute;z-index:-1;top:0;right:0;width:52%;height:100%;background:radial-gradient(ellipse at 60% 45%,rgba(157,67,55,.12),transparent 55%),linear-gradient(115deg,transparent 48%,rgba(245,245,245,.025) 48.1%,transparent 48.3%);pointer-events:none;opacity:0;transition:opacity 1s ease .2s}
.menu-overlay.active .menu-atmosphere{opacity:1}
.menu-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;border-bottom:1px solid rgba(245,245,245,.18);padding-bottom:20px}
.menu-brand{display:flex;align-items:center;gap:12px;color:#F5F5F5;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.12em}
.menu-brand img{width:26px;height:30px;object-fit:contain}.menu-brand small{display:block;margin-top:5px;color:#A7A7A7;font-size:7px;font-weight:400;letter-spacing:.17em}
.menu-classification{display:flex;align-items:center;gap:9px;color:#8A8A8A;font-size:8px;letter-spacing:.18em}.menu-classification i{width:5px;height:5px;background:var(--menu-red);border-radius:50%;box-shadow:0 0 12px rgba(157,67,55,.65)}
.menu-close{position:static;display:flex;align-items:center;gap:15px;border:1px solid rgba(245,245,245,.24);padding:11px 13px;background:transparent;color:#F5F5F5;cursor:pointer;font-size:8px;letter-spacing:.18em}.menu-close span{margin:0;color:#A7A7A7;font-size:20px;line-height:.7}.menu-close:hover{border-color:var(--menu-red);background:rgba(157,67,55,.09)}
.menu-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:clamp(38px,8vw,130px);align-items:center;flex:1;min-height:0;padding:clamp(28px,5vh,60px) 0}
.menu-left{min-width:0}.menu-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px;color:#8D8D8D;font-size:8px;letter-spacing:.2em}.menu-heading span:last-child{white-space:nowrap}.menu-heading b{color:var(--menu-red);font-size:14px;font-weight:400;margin-left:8px}
.menu-navigation{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
.menu-navigation .menu-link{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:15px;width:100%;padding:clamp(10px,1.65vh,19px) 0;border-bottom:1px solid rgba(245,245,245,.15);color:#F5F5F5;text-decoration:none;transform:none;transition:color .3s ease,padding .45s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.menu-navigation .menu-link:before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:2px;background:var(--menu-red);transform:scaleY(0);transform-origin:center;transition:transform .35s ease}
.menu-link-number{font-size:8px;letter-spacing:.1em;color:#777;transition:color .3s ease}.menu-link-name{font-size:clamp(20px,2.55vw,38px);font-weight:500;line-height:1.06;letter-spacing:-.055em;transition:transform .45s cubic-bezier(.22,1,.36,1),color .3s ease}.menu-link-arrow{justify-self:end;font-size:17px;color:var(--menu-red);opacity:0;transform:translate(-8px,8px);transition:opacity .3s ease,transform .35s ease}
.menu-navigation .menu-link:hover,.menu-navigation .menu-link:focus-visible,.menu-navigation .menu-link.is-current{padding-left:9px;border-color:rgba(157,67,55,.75);color:#F5F5F5;outline:none}.menu-navigation .menu-link:hover:before,.menu-navigation .menu-link:focus-visible:before,.menu-navigation .menu-link.is-current:before{transform:scaleY(1)}.menu-link:hover .menu-link-name,.menu-link:focus-visible .menu-link-name,.menu-link.is-current .menu-link-name{transform:translateX(3px);color:#fff}.menu-link:hover .menu-link-number,.menu-link.is-current .menu-link-number{color:#C57A6F}.menu-link:hover .menu-link-arrow,.menu-link:focus-visible .menu-link-arrow,.menu-link.is-current .menu-link-arrow{opacity:1;transform:translate(0,0)}
.menu-intel{position:relative;align-self:center;width:100%;max-width:430px;justify-self:end;padding-top:0;opacity:0;transform:translateY(18px);transition:opacity .65s ease .2s,transform .75s cubic-bezier(.22,1,.36,1) .2s}.menu-overlay.active .menu-intel{opacity:1;transform:translateY(0)}
.menu-intel-image{position:relative;aspect-ratio:1.24/1;overflow:hidden;border:1px solid rgba(245,245,245,.18);background:linear-gradient(0deg,rgba(11,11,11,.82),rgba(11,11,11,.08) 70%),linear-gradient(90deg,rgba(11,11,11,.2),rgba(11,11,11,.15)),url('../assets/images/hero-architecture.jpg') center/cover no-repeat;filter:grayscale(.55);transition:filter .5s ease,background-position .8s ease}.menu-intel-image:after{content:"";position:absolute;inset:12px;border:1px solid rgba(245,245,245,.13);pointer-events:none}.menu-overlay:has(.menu-link:hover) .menu-intel-image{filter:grayscale(.2)}
.intel-coordinate,.intel-image-caption{position:absolute;z-index:1;left:25px;color:#E0E0E0;font-size:7px;letter-spacing:.17em}.intel-coordinate{top:24px}.intel-image-caption{bottom:23px;color:#B9B9B9}.intel-crosshair{position:absolute;top:50%;left:50%;color:rgba(245,245,245,.65);font-size:25px;font-weight:200;transform:translate(-50%,-50%)}
.menu-intel-meta{display:flex;justify-content:space-between;gap:15px;margin-top:22px;color:#C57A6F;font-size:8px;letter-spacing:.2em}.menu-intel-meta span:last-child{color:#777}.menu-intel h2{max-width:410px;margin:18px 0 10px;color:#F5F5F5;font-size:clamp(25px,3vw,44px);line-height:.99;font-weight:500;letter-spacing:-.06em}.menu-intel p{max-width:340px;margin:0;color:#A7A7A7;font-size:12px;line-height:1.7}.menu-contact-link{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:27px;padding:14px 0;border-top:1px solid rgba(245,245,245,.2);color:#F5F5F5;text-decoration:none;font-size:8px;letter-spacing:.17em}.menu-contact-link span{color:#C57A6F;font-size:16px;transition:transform .3s ease}.menu-contact-link:hover span{transform:translate(4px,-4px)}
.menu-bottomline{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid rgba(245,245,245,.18);color:#777;font-size:7px;letter-spacing:.14em}.menu-bottomline b{color:var(--menu-red);font-weight:400}.menu-bottomline span:nth-child(2){color:#A7A7A7}
.menu-overlay.active .menu-link{animation:menuLinkReveal .65s cubic-bezier(.22,1,.36,1) both}.menu-overlay.active .menu-link:nth-child(1){animation-delay:.08s}.menu-overlay.active .menu-link:nth-child(2){animation-delay:.13s}.menu-overlay.active .menu-link:nth-child(3){animation-delay:.18s}.menu-overlay.active .menu-link:nth-child(4){animation-delay:.23s}.menu-overlay.active .menu-link:nth-child(5){animation-delay:.28s}.menu-overlay.active .menu-link:nth-child(6){animation-delay:.33s}.menu-overlay.active .menu-link:nth-child(7){animation-delay:.38s}
@keyframes menuLinkReveal{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@media(max-width:900px){.menu-main{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:30px}.menu-link-name{font-size:clamp(18px,2.7vw,28px)}.menu-intel-image{aspect-ratio:1/1}.menu-bottomline span:last-child{display:none}}
@media(max-width:650px){.menu-overlay{padding:18px 22px 16px;gap:0}.menu-topbar{padding-bottom:15px}.menu-brand{font-size:9px}.menu-brand img{width:22px;height:26px}.menu-classification{display:none}.menu-close{padding:9px 10px}.menu-main{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px;padding:22px 0 18px}.menu-heading{font-size:7px;margin-bottom:10px}.menu-navigation .menu-link{grid-template-columns:23px minmax(0,1fr) 20px;gap:10px;padding:10px 0}.menu-link-name{font-size:clamp(19px,5.4vw,27px)}.menu-link-number{font-size:7px}.menu-intel{display:grid;grid-template-columns:94px minmax(0,1fr);column-gap:15px;align-items:start;max-width:none;padding-top:4px}.menu-intel-image{grid-row:1 / span 4;aspect-ratio:3/4;min-height:112px}.menu-intel-image:after{inset:6px}.intel-coordinate,.intel-image-caption{left:10px;font-size:5px;letter-spacing:.1em}.intel-coordinate{top:11px}.intel-image-caption{bottom:11px}.intel-crosshair{font-size:17px}.menu-intel-meta{grid-column:2;margin-top:0;font-size:6px;letter-spacing:.12em}.menu-intel h2{grid-column:2;margin:8px 0 6px;font-size:clamp(19px,5vw,24px)}.menu-intel p{grid-column:2;font-size:10px;line-height:1.45}.menu-contact-link{grid-column:2;margin-top:10px;padding:9px 0;font-size:6px}.menu-bottomline{font-size:6px;line-height:1.5;letter-spacing:.08em;padding-top:12px}.menu-bottomline span:nth-child(2){display:none}}
@media(max-width:390px){.menu-overlay{padding-left:17px;padding-right:17px}.menu-link-name{font-size:18px}.menu-main{gap:16px}.menu-intel{grid-template-columns:78px minmax(0,1fr);column-gap:12px}.menu-intel h2{font-size:18px}.menu-intel p{font-size:9px}}
@media(max-height:760px) and (min-width:651px){.menu-overlay{padding-top:18px;padding-bottom:14px}.menu-main{padding:20px 0;gap:40px}.menu-navigation .menu-link{padding:9px 0}.menu-link-name{font-size:clamp(19px,2.3vw,30px)}.menu-intel-image{aspect-ratio:1.45/1}.menu-intel-meta{margin-top:13px}.menu-intel h2{font-size:clamp(24px,2.6vw,34px);margin:10px 0 6px}.menu-contact-link{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.menu-overlay.active .menu-link{animation:none}.menu-overlay,.menu-intel,.menu-atmosphere,.menu-navigation .menu-link,.menu-link-name,.menu-link-arrow{transition:none!important}}

body.menu-open{overflow:hidden}