/* ============================================================
   NUDANES — SHARED STYLESHEET
   Concept 03: Modern Scandinavian Luxury
   Single source of truth for every page. Link this, don't fork it.
   Motion: "The Settle" system.
   ============================================================ */

@font-face {
  font-family:'Noe Display';
  src:url('assets/fonts/NoeDisplay-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Söhne';
  src:url('assets/fonts/soehne-buch.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root {
  --onyx:#0B0B0D; --chalk:#F6F5F2; --greige:#CEC7BE; --slate:#5D646B; --aubergine:#4B2E47;

  --dur-instant:120ms; --dur-quick:240ms; --dur-base:480ms; --dur-slow:720ms; --dur-page:900ms;
  --ease-settle:cubic-bezier(0.16,1,0.3,1);
  --ease-quiet:cubic-bezier(0.22,0.61,0.36,1);
  --lift:18px;

  --step--1:0.8rem; --step-0:1rem; --step-1:1.25rem; --step-2:1.563rem;
  --step-3:1.953rem; --step-4:2.441rem; --step-5:3.052rem; --step-6:clamp(2.8rem,7vw,5.4rem);

  --maxw:1200px; --gutter:40px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--chalk); color:var(--onyx);
  font-family:'Söhne','Helvetica Neue',system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection { background:var(--aubergine); color:var(--chalk); }

h1,h2,h3,h4 { font-family:'Noe Display',Georgia,serif; font-weight:400; letter-spacing:-0.01em; }
h1 { font-size:var(--step-6); line-height:1.04; }
h2 { font-size:var(--step-4); line-height:1.1; }
h3 { font-size:var(--step-2); line-height:1.2; }

.eyebrow { font-size:var(--step--1); letter-spacing:0.26em; text-transform:uppercase;
  color:var(--aubergine); font-weight:600; margin-bottom:20px; }
.lede { font-size:var(--step-1); color:var(--slate); max-width:56ch; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.wrap-narrow { max-width:760px; margin:0 auto; padding:0 var(--gutter); }
section { padding:clamp(72px,10vw,132px) 0; }
a { color:inherit; }

/* Skip link (a11y) */
.skip { position:absolute; left:-9999px; top:8px; background:var(--onyx); color:var(--chalk);
  padding:10px 18px; z-index:2000; text-decoration:none; }
.skip:focus { left:8px; }

/* ---------- LOADER ---------- */
.loader { position:fixed; inset:0; z-index:1000; background:var(--onyx);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-page) var(--ease-settle); }
.loader.done { transform:translateY(-100%); pointer-events:none; }
.loader-mark { display:flex; gap:0.42em; font-size:clamp(1.4rem,4vw,2.4rem);
  letter-spacing:0.55em; color:var(--chalk); font-weight:300; }
.loader-mark span { opacity:0; transform:translateY(12px);
  animation:markRise var(--dur-slow) var(--ease-settle) forwards; }
.loader-mark span:nth-child(1){animation-delay:60ms}.loader-mark span:nth-child(2){animation-delay:130ms}
.loader-mark span:nth-child(3){animation-delay:200ms}.loader-mark span:nth-child(4){animation-delay:270ms}
.loader-mark span:nth-child(5){animation-delay:340ms}.loader-mark span:nth-child(6){animation-delay:410ms}
.loader-mark span:nth-child(7){animation-delay:480ms}
@keyframes markRise { to { opacity:1; transform:translateY(0);} }

/* ---------- NAV ---------- */
nav { position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter);
  background:rgba(246,245,242,0); backdrop-filter:blur(0); border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-quiet), backdrop-filter var(--dur-base) var(--ease-quiet),
             padding var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet); }
nav.scrolled { background:rgba(246,245,242,0.82); backdrop-filter:blur(14px);
  padding:14px var(--gutter); border-bottom-color:rgba(11,11,13,0.06); }
/* On dark-hero pages the nav starts light-on-dark, flips when scrolled */
nav.on-dark .nav-mark, nav.on-dark .nav-link { color:var(--chalk); }
nav.on-dark.scrolled .nav-mark { color:var(--onyx); }
nav.on-dark.scrolled .nav-link { color:var(--slate); }
nav.on-dark .nav-cta { border-color:var(--chalk); color:var(--chalk); }
nav.on-dark .nav-cta::before { background:var(--chalk); }
nav.on-dark .nav-cta:hover { color:var(--onyx); }
nav.on-dark.scrolled .nav-cta { border-color:var(--onyx); color:var(--onyx); }
nav.on-dark.scrolled .nav-cta::before { background:var(--onyx); }
nav.on-dark.scrolled .nav-cta:hover { color:var(--chalk); }
.nav-mark { font-size:0.95rem; letter-spacing:0.4em; font-weight:600; text-decoration:none; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-link { position:relative; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--slate); text-decoration:none; padding:4px 0;
  transition:color var(--dur-quick) var(--ease-quiet); }
.nav-link::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--aubergine); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-quick) var(--ease-settle); }
.nav-link:hover { color:var(--onyx); }
.nav-link:hover::after { transform:scaleX(1); }
.nav-link[aria-current="page"]::after { transform:scaleX(1); }
.nav-cta { font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; padding:10px 20px;
  border:1px solid var(--onyx); text-decoration:none; position:relative; overflow:hidden; color:var(--onyx);
  transition:color var(--dur-quick) var(--ease-quiet); }
.nav-cta::before { content:''; position:absolute; inset:0; background:var(--onyx);
  transform:translateY(101%); transition:transform var(--dur-base) var(--ease-settle); z-index:0; }
.nav-cta span { position:relative; z-index:1; }
.nav-cta:hover { color:var(--chalk); }
.nav-cta:hover::before { transform:translateY(0); }
:focus-visible { outline:2px solid var(--aubergine); outline-offset:3px; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.burger span { width:24px; height:2px; background:currentColor; transition:var(--dur-quick); }
nav.on-dark .burger span { background:var(--chalk); }
nav.on-dark.scrolled .burger span { background:var(--onyx); }

.mobile-menu { position:fixed; inset:0; z-index:99; background:var(--onyx); color:var(--chalk);
  display:flex; flex-direction:column; justify-content:center; padding:40px;
  transform:translateY(-100%); transition:transform var(--dur-page) var(--ease-settle); }
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a { font-family:'Noe Display',Georgia,serif; font-size:var(--step-3);
  text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(246,245,242,0.1); }

/* ---------- BUTTONS ---------- */
.btn { position:relative; display:inline-flex; align-items:center; gap:12px; padding:16px 32px;
  border:1px solid var(--onyx); background:transparent; color:var(--onyx); cursor:pointer;
  font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; overflow:hidden;
  font-family:inherit; text-decoration:none;
  transition:color var(--dur-quick) var(--ease-quiet), transform var(--dur-instant) var(--ease-quiet); }
.btn::before { content:''; position:absolute; inset:0; background:var(--onyx); transform:translateY(101%);
  transition:transform var(--dur-base) var(--ease-settle); z-index:0; }
.btn > * { position:relative; z-index:1; }
.btn:hover { color:var(--chalk); }
.btn:hover::before { transform:translateY(0); }
.btn:active { transform:translateY(1px); }
.btn .arrow { transition:transform var(--dur-quick) var(--ease-settle); }
.btn:hover .arrow { transform:translateX(5px); }
.btn.ghost { border-color:var(--greige); color:var(--slate); }
.btn.ghost::before { background:var(--aubergine); }
.btn.ghost:hover { color:var(--chalk); border-color:var(--aubergine); }
.btn.on-dark { border-color:var(--chalk); color:var(--chalk); }
.btn.on-dark::before { background:var(--chalk); }
.btn.on-dark:hover { color:var(--onyx); }
.btn.solid { background:var(--onyx); color:var(--chalk); }
.btn.solid::before { background:var(--aubergine); }
.btn.solid:hover { color:var(--chalk); }

/* ---------- REVEALS ---------- */
[data-reveal] { opacity:0; transform:translateY(var(--lift));
  transition:opacity var(--dur-slow) var(--ease-settle), transform var(--dur-slow) var(--ease-settle); }
[data-reveal].in { opacity:1; transform:translateY(0); }
[data-reveal-group] > * { opacity:0; transform:translateY(var(--lift));
  transition:opacity var(--dur-slow) var(--ease-settle), transform var(--dur-slow) var(--ease-settle); }
[data-reveal-group].in > * { opacity:1; transform:translateY(0); }
[data-reveal-group].in > *:nth-child(1){transition-delay:0ms}[data-reveal-group].in > *:nth-child(2){transition-delay:70ms}
[data-reveal-group].in > *:nth-child(3){transition-delay:140ms}[data-reveal-group].in > *:nth-child(4){transition-delay:210ms}
[data-reveal-group].in > *:nth-child(5){transition-delay:280ms}[data-reveal-group].in > *:nth-child(6){transition-delay:350ms}
[data-reveal-group].in > *:nth-child(7){transition-delay:420ms}[data-reveal-group].in > *:nth-child(8){transition-delay:490ms}
[data-reveal-group].in > *:nth-child(9){transition-delay:560ms}
.rule { height:1px; background:var(--onyx); margin:8px 0 44px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-settle); }
.rule.in { transform:scaleX(1); }
.rule.on-dark { background:var(--greige); }

/* ---------- FOOTER ---------- */
footer { background:var(--onyx); color:var(--chalk); padding:70px var(--gutter) 40px; }
.foot-inner { max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.foot-mark { font-size:1.1rem; letter-spacing:0.4em; font-weight:600; }
.foot-tag { color:var(--greige); font-size:0.84rem; margin-top:14px; max-width:32ch; }
.foot-col h4 { font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--greige);
  margin-bottom:16px; font-weight:600; }
.foot-col a { display:block; color:rgba(246,245,242,0.7); text-decoration:none; font-size:0.88rem;
  margin-bottom:10px; transition:color var(--dur-quick) var(--ease-quiet); }
.foot-col a:hover { color:var(--chalk); }
.foot-bottom { max-width:var(--maxw); margin:48px auto 0; padding-top:24px;
  border-top:1px solid rgba(246,245,242,0.1); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; color:var(--slate); font-size:0.76rem; letter-spacing:0.06em; }

/* ---------- SHARED: text link ---------- */
.tlink { color:var(--onyx); text-decoration:none; position:relative; font-weight:500; }
.tlink::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--aubergine); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-quick) var(--ease-settle); }
.tlink:hover::after { transform:scaleX(1); transform-origin:left; }

/* ---------- RESPONSIVE (shared) ---------- */
@media (max-width:640px) {
  :root { --gutter:22px; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .foot-inner { grid-template-columns:1fr; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; }
  [data-reveal],[data-reveal-group] > *,.rule,.hero-line > span { opacity:1 !important; transform:none !important; }
  .loader { display:none; }
}