/* ============================================================
   GLENRISE INVESTMENTS — base.css
   Variables, reset, typography, layout primitives
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap');

/* -------- Design tokens — Glenrise navy & steel -------- */
:root {
  /* Palette — drawn from the Glenrise logo (navy + silver) */
  --ink:        #0f1430;   /* deep navy near-black */
  --ink-soft:   #1c2350;
  --bone:       #f5f6fa;   /* cool off-white */
  --bone-deep:  #e6e8f0;
  --paper:      #fbfcfe;
  --stone:      #8a90a3;   /* cool steel grey */
  --stone-soft: #b8bccb;
  --rust:       #2a2f66;   /* PRIMARY — Glenrise navy */
  --rust-deep:  #1b2050;
  --ochre:      #c0c4d0;   /* SECONDARY — silver highlight from logo */
  --moss:       #2a2f66;   /* alias to navy */
  --gold:       #c0c4d0;   /* light steel highlight */
  --accent-glow: #6a73c2;  /* lighter navy glow */

  /* Type */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-mono:    'Poppins', system-ui, sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Layout */
  --max-width: 1400px;
  --gutter: clamp(1.75rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Subtle paper grain — adds warmth, avoids flat AI look */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* -------- Typography -------- */
.display, h1.display, .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 6.5vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }

.italic { font-style: italic; }
em { font-style: italic; color: var(--rust-deep); }

p { max-width: 65ch; }
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Eyebrow — small uppercase labels with monospaced register */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rust);
}
.eyebrow.no-line::before { display: none; }

/* Section number — large editorial markers */
.section-no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--stone);
}

/* -------- Layout primitives -------- */
.shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: 1.5rem 0;
  position: relative;
}
.section--tight { padding: 1.5rem 0; }
.section--xl    { padding: 1.5rem 0; }

.divider {
  height: 1px;
  background: var(--ink);
  opacity: 0.15;
  width: 100%;
}
.divider--rust { background: var(--rust); opacity: 0.4; }

/* Grid system */
.grid { display: grid; gap: var(--s-6); }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: var(--s-5); }
@media (max-width: 880px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 540px) {
  .grid-12 { grid-template-columns: repeat(2, 1fr); }
}

/* -------- Inverted / dark sections -------- */
.dark {
  background: var(--ink);
  color: var(--bone);
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--bone); }
.dark .lead { color: var(--stone-soft); }
.dark .eyebrow { color: var(--ochre); }
.dark .eyebrow::before { background: var(--ochre); }
.dark .divider { background: var(--bone); opacity: 0.18; }

/* -------- Buttons (unified pill style — matches hero) -------- */
.btn,
.btn--pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.9rem 1rem 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--ochre);
  background: var(--ochre);
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.3s var(--ease),
              color 0.3s var(--ease),
              border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
  position: relative;
}
.btn .arrow,
.btn--pill .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ochre);
  font-size: 0.85rem;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover,
.btn--pill:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  transform: translateY(-2px);
}
.btn:hover .arrow,
.btn--pill:hover .arrow {
  transform: translateX(4px);
  background: var(--rust);
  color: var(--bone);
}

/* Ghost variant — outlined pill */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost .arrow { background: var(--ink); color: var(--ochre); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--ghost:hover .arrow { background: var(--ochre); color: var(--ink); }

/* Rust/navy variant */
.btn--rust { background: var(--rust); border-color: var(--rust); color: var(--bone); }
.btn--rust .arrow { background: var(--bone); color: var(--rust); }
.btn--rust:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--bone); }
.btn--rust:hover .arrow { background: var(--ochre); color: var(--ink); }

/* Dark sections */
.dark .btn,
.dark .btn--pill { background: var(--ochre); color: var(--ink); border-color: var(--ochre); }
.dark .btn:hover,
.dark .btn--pill:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.dark .btn--ghost { background: transparent; border-color: var(--bone); color: var(--bone); }
.dark .btn--ghost .arrow { background: var(--bone); color: var(--ink); }
.dark .btn--ghost:hover { background: var(--bone); color: var(--ink); }

/* Link with underline animation */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap 0.3s var(--ease);
}
.link-arrow:hover { gap: var(--s-4); }

/* -------- Helpers -------- */
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.serif { font-family: var(--font-display); }
.upper { text-transform: uppercase; letter-spacing: 0.12em; }
.rust { color: var(--rust); }
.stone { color: var(--stone); }
.center { text-align: center; }

/* Animate-in on load */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: reveal 1.1s var(--ease) forwards;
  animation-delay: calc(0.9s + var(--reveal-offset, 0s));
}
.reveal[data-delay="1"] { --reveal-offset: 0.05s; }
.reveal[data-delay="2"] { --reveal-offset: 0.18s; }
.reveal[data-delay="3"] { --reveal-offset: 0.32s; }
.reveal[data-delay="4"] { --reveal-offset: 0.46s; }
.reveal[data-delay="5"] { --reveal-offset: 0.6s; }
.reveal[data-delay="6"] { --reveal-offset: 0.74s; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* -------- Intro loader -------- */
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  animation: intro-out 0.9s cubic-bezier(0.76,0,0.24,1) forwards;
  animation-delay: 1.6s;
  pointer-events: none;
}
.intro-loader__mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--bone);
  display: flex;
  overflow: hidden;
  text-transform: uppercase;
}
/* Each letter slides up individually */
.intro-loader__mark .l {
  display: inline-block;
  transform: translateY(115%);
  animation: intro-letter 0.65s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.intro-loader__mark .l:nth-child(1) { animation-delay: 0.05s; }
.intro-loader__mark .l:nth-child(2) { animation-delay: 0.10s; }
.intro-loader__mark .l:nth-child(3) { animation-delay: 0.15s; }
.intro-loader__mark .l:nth-child(4) { animation-delay: 0.20s; }
.intro-loader__mark .l:nth-child(5) { animation-delay: 0.25s; }
.intro-loader__mark .l:nth-child(6) { animation-delay: 0.30s; }
.intro-loader__mark .l:nth-child(7) { animation-delay: 0.35s; }
.intro-loader__mark .l:nth-child(8) { animation-delay: 0.40s; }

.intro-loader__bar {
  width: 48px;
  height: 1px;
  background: rgba(245,246,250,0.25);
  position: relative;
  overflow: hidden;
}
.intro-loader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  animation: intro-bar 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.5s forwards;
}

@keyframes intro-letter {
  to { transform: translateY(0); }
}
@keyframes intro-bar {
  to { transform: scaleX(1); }
}
@keyframes intro-out {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .intro-loader { display: none; }
}