/*
 * Real project fonts (files present in this folder):
 *   PPNeueMontreal-Book.otf     -> weight 400 ("Book" is PP Neue Montreal's regular text weight)
 *   PPNeueMontreal-Medium.otf   -> weight 500
 *   Silka Mono.ttf              -> weight 400
 */

@font-face {
  font-family: "PP Neue Montreal";
  src: url(https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2Fcd21cf351f4da50cf75d-PPNeueMontreal-Book.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url(https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2F0f34f4714f1b26e0dedc-PPNeueMontreal-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Silka Mono";
  src: url("https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2Fef34305747d8d63cb745-Silka%20Mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:host {
  --nsk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nsk-dur: 0.7s;

  /* exact Figma tokens (node 312:2 / Niseko Projects) */
  --nsk-bg: #E6E7E8;              /* dropdown / header panel */
  --nsk-ink: #000000;            /* logo + nav */
  --nsk-crest: #201600;
  --nsk-rule: rgba(190, 191, 191, 0.5); /* #BEBFBF @ 50% */
  --nsk-muted: #6e6e6e;          /* card description */
  --nsk-overlay: rgba(230, 231, 232, 0.5); /* page dim behind */

  --nsk-font: "PP Neue Montreal", "Inter", "Helvetica Neue", Arial, sans-serif;
  --nsk-mono: "Silka Mono", "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --nsk-pad: 2rem; /* matches site global padding (.padding-global) */
}

/* This component renders inside a shadow DOM (Webflow code-island), so the
   page's global box-sizing reset does not reach it. Without this, width:100%
   + side padding overflows the viewport and clips the last nav link. */
.nsk-nav,
.nsk-nav *,
.nsk-nav *::before,
.nsk-nav *::after {
  box-sizing: border-box;
}

.nsk-container {
  width: 100%;
  padding-left: var(--nsk-pad);
  padding-right: var(--nsk-pad);
}

/* ---------- Shell ---------- */
.nsk-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  font-family: var(--nsk-font);
  color: var(--nsk-ink);
  transform: translateY(0);
  transition: transform var(--nsk-dur) var(--nsk-ease);
}
.nsk-nav.is-hidden { transform: translateY(-100%); }
.nsk-nav--dark { --nsk-bg: #14110f; --nsk-ink: #fff; --nsk-rule: rgba(255,255,255,0.16); --nsk-muted: rgba(255,255,255,0.6); }

/* ---------- Backdrop ---------- */
.nsk-backdrop {
  position: fixed;
  inset: 0;
  height: 100dvh;
  background: var(--nsk-overlay);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--nsk-dur) var(--nsk-ease);
}
.nsk-backdrop.is-active { opacity: 1; pointer-events: auto; }

/* ---------- Announcement strip ---------- */
.nsk-strip {
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nsk-ink);
  color: var(--nsk-bg);
  font-family: var(--nsk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.nsk-strip.is-collapsed {
  height: 0;
  transition: height 0.6s cubic-bezier(0.64, 0, 0.78, 0);
}

/* ---------- Nav bar ---------- */
.nsk-nav__bar {
  position: relative; /* creates stacking context so bar stays above the drawer */
  z-index: 2;
  background: var(--nsk-bg);
  border-bottom: none;
}
.nsk-nav.is-open .nsk-nav__bar {
  border-bottom: 1px solid var(--nsk-rule);
}
.nsk-nav.has-bottom-line .nsk-nav__bar {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
}
.nsk-nav.has-bottom-line.is-open .nsk-nav__bar {
  border-bottom: 1px solid var(--nsk-rule);
}
.nsk-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 107px; /* Figma header height */
  transition: height var(--nsk-dur) var(--nsk-ease);
}
.nsk-nav.is-scrolled .nsk-bar__inner { height: 84px; }

.nsk-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--nsk-ink);
}
.nsk-crest { width: 30px; height: 30px; display: block; }
.nsk-logo__text {
  font-family: var(--nsk-font);
  font-size: 28px;   /* Figma */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

/* ---------- Links ---------- */
.nsk-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.nsk-links__item { position: static; }
.nsk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--nsk-ink);
  font-family: var(--nsk-mono);
  font-size: 14px;   /* Figma */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.4s var(--nsk-ease);
}
.nsk-link:hover,
.nsk-link.is-active { opacity: 1; }

/* Rollover underline animation via ::after + clip-path (reliable in shadow DOM) */
.nsk-link span {
  display: inline-block; /* predictable geometry for ::after positioning */
  position: relative;
  padding-bottom: 2px;
}
.nsk-link span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  /* start fully clipped from the right → invisible */
  clip-path: inset(0 100% 0 0);
  /* exit: ease-in — quick retract left-to-right disappear */
  transition: clip-path 0.35s cubic-bezier(0.4, 0, 1, 1);
}
/* enter: ease-out — smooth reveal left to right */
.nsk-link:hover span::after {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.35s cubic-bezier(0, 0, 0.2, 1);
}
/* Current page: always fully underlined, no animation */
.nsk-link.is-current span::after {
  clip-path: inset(0 0% 0 0);
  transition: none;
}
.nsk-navarrow { width: 12px; height: 12px; transform: rotate(145deg); transition: transform 0.5s var(--nsk-ease); }
.nsk-navarrow.is-open { transform: rotate(0deg); }

/* ---------- Mega panel ---------- */
.nsk-panel {
  overflow: hidden;
  height: 0;
  background: var(--nsk-bg);
  max-width: 100vw;
}
.nsk-panel__inner { padding-bottom: 0rem; }

/* service cards row with vertical rules */
.nsk-services {
  display: flex;
  align-items: stretch;
  gap: 0;
  justify-content: flex-end;
}
.nsk-services__spacer { display: none; }
.nsk-card {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
  border-left: 1px solid var(--nsk-rule);
  text-decoration: none;
  color: var(--nsk-ink);
}
.nsk-card:first-child {
  border-left: none;
  padding-left: 0;
}
.nsk-card__media {
  flex: 0 0 180px;
  aspect-ratio: 201 / 293;   /* Figma card image */
  overflow: hidden;
  border-radius: 2px;
}
.nsk-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--nsk-ease);
}
.nsk-card:hover .nsk-card__media img { transform: scale(1.07); }
.nsk-card__text { flex: 1 1 auto; }
.nsk-card__text h3 {
  margin: 0 0 1.25rem;
  font-family: var(--nsk-font);
  font-size: 16px;   /* Figma */
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.nsk-card__text p {
  margin: 0;
  font-family: var(--nsk-font);
  font-size: 12px;   /* Figma */
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--nsk-muted);
  max-width: 24ch;
}

/* featured banner */
.nsk-banner {
  position: relative;
  display: block;
  margin-top: 0.5rem;
  aspect-ratio: 1353 / 400;   /* Figma banner width */
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.nsk-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1s var(--nsk-ease);
}
.nsk-banner:hover img { transform: scale(1.06); }
.nsk-banner__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
/* title + subtitle share the exact 44px Figma size */
.nsk-banner__overlay h2,
.nsk-banner__sub {
  margin: 0;
  font-family: var(--nsk-font);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 46px;
}
.nsk-banner__sub { margin-bottom: 1rem; }
.nsk-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--nsk-font);
  font-size: 16px;
  letter-spacing: 0.01em;
  opacity: 0.95;
}
.nsk-diag { width: 18px; height: 18px; }
.nsk-banner:hover .nsk-diag { transform: translate(2px, -2px); transition: transform 0.4s var(--nsk-ease); }

/* ---------- Burger + mobile drawer ---------- */
.nsk-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  color: inherit;
}
.nsk-burger span { width: 24px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--nsk-ease); }
.nsk-burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nsk-burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nsk-drawer {
  position: fixed;
  inset: 0;
  /* nsk-nav has transform: translateY() for hide-on-scroll, which makes it the
     CSS containing block for fixed descendants. inset: 0 alone only gives the
     drawer the nav bar's height (~84px). height: 100dvh overrides bottom: 0
     so the drawer spans the full viewport regardless of the parent's size. */
  height: 100dvh;
  z-index: 1;
  background: var(--nsk-bg);
  color: var(--nsk-ink);
  padding: 6rem var(--nsk-pad) 2rem;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--nsk-dur) var(--nsk-ease), opacity var(--nsk-dur) var(--nsk-ease);
  overflow-y: auto;
}
.nsk-drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nsk-drawer nav { display: grid; gap: 0.25rem; }
.nsk-drawer__link,
.nsk-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  text-decoration: none;
  font-family: var(--nsk-font);
  font-size: 1.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--nsk-rule);
  cursor: pointer;
}
.nsk-drawer__chev {
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--nsk-ease);
}
.nsk-drawer__toggle.is-open .nsk-drawer__chev { transform: rotate(-135deg); }
.nsk-drawer__sub { display: grid; gap: 0.25rem; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--nsk-ease); }
.nsk-drawer__sub.is-open { max-height: 600px; }
.nsk-drawer__sublink { color: inherit; text-decoration: none; opacity: 0.65; font-family: var(--nsk-mono); text-transform: uppercase; font-size: 0.95rem; padding: 0.85rem 0 0.85rem 1rem; min-height: 44px; display: flex; align-items: center; }

/* Narrow desktop (992–1200): tighten so the horizontal nav always fits,
   and give the two cards the full width by dropping the empty first column. */
@media (min-width: 992px) and (max-width: 1200px) {
  .nsk-links { gap: 1.4rem; }
  .nsk-link { font-size: 13px; }
  .nsk-logo__text { font-size: 24px; }
  .nsk-services { grid-template-columns: 1fr 1fr; }
  .nsk-services__spacer { display: none; }
  .nsk-banner__overlay h2,
  .nsk-banner__sub { font-size: 38px; line-height: 40px; }
}

/* Tablet and below (<=991px, Webflow's tablet breakpoint): use the drawer. */
@media (max-width: 991px) {
  .nsk-links { display: none; }
  .nsk-burger { display: flex; }
  .nsk-panel { display: none !important; }
  .nsk-bar__inner { height: 84px; }
  .nsk-logo__text { font-size: 22px; }
}

/* Mobile portrait: smaller drawer type and logo. */
@media (max-width: 478px) {
  .nsk-logo__text { font-size: 20px; }
  .nsk-crest { width: 26px; height: 26px; }
  .nsk-drawer__link,
  .nsk-drawer__toggle { font-size: 1.35rem; }
}

/* Never allow the header to cause horizontal page scroll. */
.nsk-nav,
.nsk-nav__bar { max-width: 100vw; overflow-x: clip; }

/* When the mobile drawer is open, relax overflow-x on the nav so the drawer's
   hit-test region is not clipped by its transformed containing block.
   overflow-x: clip on a transformed ancestor restricts pointer events for
   fixed descendants in spec-compliant engines (Chrome 112+, Safari 17+). */
.nsk-nav.is-drawer-open { overflow-x: visible; }