/* Navigation and contact panel - written by hand from the capture of the live
   site (docs/menu-capture/), taken before the Framer bundle was removed.
   Measurements: panel x=490 w=950 at 1440; items 850x90 from y=185, Barlow 700
   50px uppercase; CLOSE Noto Sans 18px/500; full screen on mobile, items
   66px. */

.nc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
}
.nc-overlay.nc-open { display: block; }
.nc-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.nc-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(950px, 100vw);
  background: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.nc-close {
  position: absolute;
  top: 42px;
  right: 56px;
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #000;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

/* menu */
.nc-menu-list {
  list-style: none;
  margin: 150px 0 0;
  padding: 0 50px;
}
.nc-menu-list a {
  display: flex;
  align-items: center;
  height: 90px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
  font-family: "Barlow", sans-serif;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}
.nc-menu-list a:hover { opacity: 0.6; }

/* contact */
.nc-contact-title {
  margin: 34px 0 0;
  padding: 0 120px 0 26px;
  font-family: "Barlow", sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}
.nc-contact-frame {
  flex: 1;
  border: 0;
  width: 100%;
  min-height: 480px;
}

@media (max-width: 809.98px) {
  .nc-panel { width: 100vw; }
  .nc-close { top: 22px; right: 24px; }
  .nc-menu-list { margin-top: 100px; padding: 0 20px; }
  .nc-menu-list a { height: 66px; font-size: 28px; }
  .nc-contact-title { font-size: 28px; padding-right: 90px; }

  .nc-panel-dialog {
    width: 92vw;
    height: 86vh;
    padding: 0 14px 20px;
  }
  .nc-panel-dialog .nc-close { top: 22px; right: 24px; }
  .nc-panel-dialog .nc-contact-title { margin: 58px 0 18px; font-size: 28px; }
}

/* The application form is a dialog in the middle of the page - dark, with the
   form itself as a light card inside it. CONTACT US keeps the side panel; this
   is how the two differed on the live site. */
.nc-panel-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 92vw);
  height: min(720px, 88vh);
  padding: 0 50px 50px;
  background: #000;
  display: flex;
  flex-direction: column;
}
.nc-panel-dialog .nc-close {
  top: 28px;
  right: 34px;
  color: #fff;
}
.nc-panel-dialog .nc-contact-title {
  margin: 56px 0 22px;
  padding: 0;
  color: #fff;
}
.nc-panel-dialog .nc-contact-frame {
  flex: 1;
  min-height: 0;
  background: #fff;
}

/* the page underneath must not scroll while a panel is open */
.nc-no-scroll { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   End state of scroll animations

   Framer animated these blocks in on scroll through the Web Animations API,
   which never writes to the inline style, so the HTML kept the start state of
   the animation (opacity:0 plus an offset). Without the bundle the blocks stay
   invisible: the section heading renders, the content below it does not. These
   two rules put them in their end state.

   Deliberately hidden variants (hover copies of partner logos and names,
   second-state icons) carry no will-change and are left alone. Matching on
   "opacity:0;" never catches "opacity:0.5;".
   -------------------------------------------------------------------------- */
[style*="will-change"][style*="opacity:0;"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Framer Ticker (EXPERTISE, testimonials): the container stayed hidden until
   the bundle started it. The content is static now; the marquee no longer
   scrolls. */
section[style*="text-indent:none"][style*="opacity:0;"] {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Process steps on /mobile-and-web

   Each numbered row opens into four cards. Framer drew them on click, so the
   export has only the closed row; the text comes from content/Collection.csv
   and the build writes it into every breakpoint copy of the row.
   -------------------------------------------------------------------------- */
.nc-acc-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 44px;
  padding: 4px 0 18px;
}
.nc-acc-open .nc-acc-panel { display: grid; }
.nc-acc-card {
  border: 1px solid rgb(108, 108, 108);
  padding: 28px 26px 30px;
}
.nc-acc-card h3 {
  margin: 0 0 26px;
  font-family: "Barlow", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}
.nc-acc-card p {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
/* the plus turns into a cross while the row is open */
.nc-acc-open .framer-1trhysx { transform: rotate(45deg); }
.framer-1trhysx { transition: transform 0.2s ease; }

@media (max-width: 809.98px) {
  .nc-acc-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
  .nc-acc-card { padding: 22px 20px 24px; }
  .nc-acc-card h3 { font-size: 20px; margin-bottom: 18px; }
}