/* ============================================================
   NAS View Developers — Design System
   Pure white · soft off-white · charcoal · warm grey
   ============================================================ */

:root {
  --white:    #FFFFFF;
  --offwhite: #F8F8F8;
  --ink:      #1A1A1A;
  --ink-90:   #2A2A2A;
  --grey:     #777777;
  --grey-soft:#9A9A9A;
  --line:     #E7E7E4;
  --line-strong: #DAD9D4;

  --gold:      #A98C5C;
  --gold-deep: #8C7245;
  --gold-line: rgba(169,140,92,0.55);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --fs-eyebrow: clamp(11px, 0.78vw, 12.5px);
  --fs-body:    clamp(15px, 1.05vw, 17px);
  --fs-lead:    clamp(18px, 1.5vw, 22px);
  --fs-h3:      clamp(22px, 2.1vw, 30px);
  --fs-h2:      clamp(30px, 4.2vw, 56px);
  --fs-display: clamp(40px, 7vw, 104px);

  --header-h: 78px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--white); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(72px, 11vw, 160px);
}
.section--tight { padding-block: clamp(56px, 8vw, 110px); }

.bg-off { background: var(--offwhite); }
.bg-ink { background: var(--ink); color: var(--white); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; }

.display {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display em {
  font-style: normal;
  font-weight: 300;
}

.h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-90);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-line);
  display: inline-block;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--grey); }
.text-balance { text-wrap: balance; }

.intro__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(30px,6vw,80px); }
.intro__mark {
  position: relative; flex-shrink: 0;
  width: clamp(220px, 28vw, 420px); height: clamp(220px, 28vw, 420px);
}
.intro__mark-base, .intro__mark-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity .5s var(--ease);
}
.intro__mark-base { object-fit: contain; }
.intro__mark-fill {
  opacity: 0;
  background: var(--gold);
  -webkit-mask-image: url("images/logo/nvd-mark-black.png");
  mask-image: url("images/logo/nvd-mark-black.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.intro__mark:hover .intro__mark-base { opacity: 0; }
.intro__mark:hover .intro__mark-fill { opacity: 1; }
@media (max-width: 720px) { .intro__mark { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink);
  --fg: var(--white);
  appearance: none;
  border: 1px solid var(--bg);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { --bg: var(--ink); --fg: var(--white); border-color: var(--ink); }

.btn--solid:hover { background: var(--ink-90); }

.btn--light {
  --bg: var(--white);
  --fg: var(--ink);
  border-color: var(--white);
}
.btn--light:hover { --bg: transparent; --fg: var(--white); }

.btn--ghost-light {
  --bg: transparent;
  --fg: var(--white);
  border-color: rgba(255,255,255,.32);
}
.btn--ghost-light:hover { --bg: var(--white); --fg: var(--ink); border-color: var(--white); }

/* text link with underline sweep */
.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  transition: color .35s var(--ease);
}
.link:hover { color: var(--gold-deep); }
.link__line {
  width: 30px; height: 1px; background: currentColor;
  transition: width .45s var(--ease);
}
.link:hover .link__line { width: 46px; }

/* ---------- Image placeholder (architectural stand-in) ---------- */
image-slot::part(frame) {
  background:
    linear-gradient(180deg, rgba(26,26,26,0.0) 40%, rgba(26,26,26,0.16) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.028) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 56px),
    linear-gradient(155deg, #ECEBE7 0%, #E2E1DC 48%, #D6D5CF 100%);
}
.ph-caption {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(26,26,26,0.5);
  pointer-events: none;
}

/* ---------- Reveal animation ----------
   Base state is VISIBLE so content can never be trapped hidden if motion
   is throttled/paused. The entrance is a keyframe (not a transition-from-0)
   applied only when motion is welcome and the element is in view. */
.reveal { opacity: 1; transform: none; }

.js-active .reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }
.reveal.is-in { animation: revealUp 0.85s var(--ease-out) forwards; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}