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

:root {
  --white:    #FFFFFF;
  --offwhite: #F4F5F9;
  --ink:      #16181F;
  --ink-90:   #262A36;
  --grey:     #6E7280;
  --grey-soft:#9A9DA8;
  --line:     #E4E5EC;
  --line-strong: #D4D6DF;

  /* ---- Royal blue accent ---- */
  --royal:      #2440D6;
  --royal-deep: #1A2FA8;
  --royal-soft: #5C73EC;
  --royal-tint: rgba(36, 64, 214, 0.09);
  --royal-glow: rgba(36, 64, 214, 0.30);

  /* ---- Neumorphism (soft UI) ---- */
  --neu-bg:        #EEF0F7;
  --neu-light:     #FFFFFF;
  --neu-shadow-d:  rgba(40, 52, 96, 0.16);
  --neu-out:  6px 6px 14px var(--neu-shadow-d), -6px -6px 14px var(--neu-light);
  --neu-out-lg: 10px 10px 26px var(--neu-shadow-d), -10px -10px 24px var(--neu-light);
  --neu-in:   inset 4px 4px 9px var(--neu-shadow-d), inset -4px -4px 9px var(--neu-light);

  --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(--royal); 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: 2px;
  background: var(--royal);
  display: inline-block;
  transform-origin: left center;
}
.eyebrow--plain::before { display: none; }
.reveal.is-in .eyebrow::before,
.eyebrow.reveal.is-in::before { animation: lineDraw 0.7s var(--ease-out) 0.05s both; }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

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

/* ---------- 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(--royal); --fg: var(--white); border-color: var(--royal); }

.btn--solid { --bg: var(--royal); border-color: var(--royal); }
.btn--solid:hover { background: var(--royal-deep); border-color: var(--royal-deep); box-shadow: 0 10px 26px var(--royal-glow); transform: translateY(-1px); }

.btn--light {
  --bg: var(--white);
  --fg: var(--ink);
  border-color: var(--white);
}
.btn--light:hover { --bg: var(--royal); --fg: var(--white); border-color: var(--royal); box-shadow: 0 10px 26px rgba(36,64,214,0.45); }

.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(--royal); }
.link__line {
  width: 30px; height: 2px; background: currentColor;
  transition: width .45s var(--ease), background .35s var(--ease);
}
.link:hover .link__line { width: 46px; background: var(--royal); }

/* ---------- 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; }

@media (prefers-reduced-motion: no-preference) {
  /* No fill-mode: during the delay and after completion the element rests on its
     visible base style, so a frozen/throttled timeline never hides content
     (e.g. a background tab where the animation timeline never advances).
     The keyframe only dips opacity while actively animating. */
  .reveal.is-in { animation: revealUp 0.9s var(--ease-out) var(--d, 0s); }
}
@keyframes revealUp {
  from { opacity: 0.35; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}