/* North River Group — landing page (northrivergroup.ca)
   Loads AFTER styles.css; reuses its :root tokens. All rules are nrg-* scoped
   so the consulting / aerospace / privacy pages are untouched. */

/* NOTE: do NOT put overflow-x:hidden on body — it makes body its own scroll
   container and window scrolling stops working. Nothing here overflows
   horizontally (the aurora is position:fixed, the glows sit inside
   overflow:hidden cards), so no clipping is needed. */
.nrg-body {
  min-height: 100vh;
}

/* --- ambient background ------------------------------------------------ */
.nrg-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 78% -12%, rgba(58, 84, 130, 0.30), transparent 62%),
    radial-gradient(760px 560px at 12% 8%,  rgba(160, 108, 42, 0.22), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(201, 164, 92, 0.14), transparent 60%);
}
.nrg-aurora::after {
  /* fine grain so the large gradients don't band on wide displays */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.nrg-page { position: relative; z-index: 1; }

/* --- hero -------------------------------------------------------------- */
.nrg-hero {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem 4rem;
}

/* Sized so the artwork reads at the same optical size as the old PNG: the
   shared viewBox carries less padding than the PNG canvas did, so this width
   is smaller than it looks. It must stay an <img> of assets/nrg-lockup.svg —
   the splash flies its own copy of that exact artwork onto this box. */
.nrg-mark {
  width: min(196px, 41vw);
  height: auto;
  margin-bottom: 2.2rem;
  animation: nrg-fade 900ms ease-out both;
}

/* While the splash owns the logo the hero's copy stays hidden, with its
   entrance animation off so getBoundingClientRect reports the real landing
   spot rather than the translateY(14px) first frame of nrg-fade. */
.nrg-splash-pending .nrg-mark { opacity: 0 !important; animation: none !important; }

/* Handed over: it is simply already there. No fade — the splash copy was
   sitting on this exact box the frame before. */
.nrg-handoff .nrg-mark { opacity: 1 !important; animation: none !important; }

.nrg-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  animation: nrg-fade 900ms ease-out 120ms both;
}

.nrg-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  animation: nrg-fade 900ms ease-out 200ms both;
}

.nrg-lede {
  max-width: 46ch;
  margin: 1.6rem auto 0;
  color: var(--ink-dim);
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  animation: nrg-fade 900ms ease-out 300ms both;
}

.nrg-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 3rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: nrg-fade 900ms ease-out 420ms both;
  transition: color 0.25s;
}
.nrg-scroll:hover { color: var(--gold); }
.nrg-scroll svg { animation: nrg-nudge 2.4s ease-in-out infinite; }

/* while the splash is on screen the hero waits, so its entrance plays as the
   splash fades rather than finishing unseen behind it (class set by splash.js) */
.nrg-booting :is(.nrg-mark, .nrg-kicker, .nrg-title, .nrg-lede, .nrg-scroll) {
  animation-play-state: paused;
}

@keyframes nrg-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nrg-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* --- division cards ---------------------------------------------------- */
.nrg-divisions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1rem 1.5rem 6rem;
}

.nrg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  padding: 3.3rem 2.8rem 2.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(18, 18, 20, 0.72);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1),
              border-color 0.4s, box-shadow 0.4s;
}
.nrg-card:hover,
.nrg-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--gold-soft);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
}
.nrg-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* per-division accent bloom, revealed on hover */
.nrg-card-glow {
  position: absolute;
  inset: -40% 0 auto 0;
  height: 70%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.nrg-card:hover .nrg-card-glow { opacity: 1; }
.nrg-card--consulting .nrg-card-glow { background: radial-gradient(closest-side, rgba(58, 84, 130, 0.55), transparent); }
.nrg-card--aero      .nrg-card-glow { background: radial-gradient(closest-side, rgba(160, 108, 42, 0.50), transparent); }
.nrg-card--vantage   .nrg-card-glow { background: radial-gradient(closest-side, rgba(201, 164, 92, 0.42), transparent); }

/* top hairline that fills in on hover */
.nrg-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.5s cubic-bezier(.2,.7,.3,1);
}
.nrg-card:hover::before,
.nrg-card:focus-visible::before { width: 100%; }

.nrg-card-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 104px;
  margin-bottom: 2.1rem;
}
.nrg-card-logo img {
  max-height: 100%;
  /* min(...) matters: at the narrow end of the three-across range the slot is
     ~242px, so a flat 252px cap lets the two wide logos overflow and the card's
     overflow:hidden clips them. */
  max-width: min(282px, 100%);
  width: auto;
  object-fit: contain;
}

.nrg-card-label {
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.nrg-card-copy {
  font-size: 1.13rem;
  line-height: 1.62;
  color: var(--ink);
}

.nrg-card-list {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nrg-card-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.35rem;
  font-size: 1rem;
  color: var(--ink-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nrg-card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.42rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

.nrg-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 2.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.nrg-card-cta svg { transition: transform 0.35s cubic-bezier(.2,.7,.3,1); }
.nrg-card:hover .nrg-card-cta svg { transform: translateX(4px); }

/* --- method band ------------------------------------------------------- */
.nrg-band {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(11, 11, 12, 0.55);
}
.nrg-band-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.nrg-band h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 1rem;
}
.nrg-band p { color: var(--ink-dim); font-size: 1rem; }

/* --- scroll reveal ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1120px) {
  .nrg-divisions { grid-template-columns: 1fr; max-width: 660px; gap: 1.15rem; }
  .nrg-card { padding: 2.5rem 2.1rem 2.2rem; }
  .nrg-card-logo { height: 84px; }
  .nrg-hero { min-height: 88vh; padding-top: 4rem; }
}

@media (max-width: 560px) {
  .nrg-divisions { padding: 1rem 1.25rem 4rem; }
  .nrg-card { padding: 2rem 1.6rem 1.8rem; }
  .nrg-card-logo { height: 66px; }
  .nrg-card-copy { font-size: 1rem; }
}

@media (max-width: 430px) {
  /* keep "CONSULTING · AEROSPACE · GEOSCIENCE" on one line */
  .nrg-kicker { font-size: 0.58rem; letter-spacing: 0.2em; }
  .nrg-mark { width: min(230px, 54vw); }
}

@media (prefers-reduced-motion: reduce) {
  .nrg-mark, .nrg-kicker, .nrg-title, .nrg-lede, .nrg-scroll { animation: none; }
  .nrg-scroll svg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nrg-card { transition: border-color 0.3s; }
  .nrg-card:hover { transform: none; }
}