/* ===========================================================
   NRFAQ — ayomac.com design system + Emil Kowalski motion craft.

   Layout rules ported from C:\Realtor_Website\ayomac\src:
     SectionWrapper.tsx  py-16 md:py-32 lg:py-40 / max-w-6xl px-6 md:px-8
     Hero.tsx            min-h-svh, clamp(2.5rem,6vw,5rem), chevron wave
     Guides.tsx          eyebrow / h2 / lede / card grid
     Contact.tsx         clamp(2rem,5vw,3.5rem), pill buttons, wipe fill

   Motion rules from emilkowalski/skills -> emil-design-eng:
     - custom ease-out curve, never `ease-in` on UI
     - UI transitions stay under 300ms; buttons 100-160ms
     - never `transition: all`; name the properties
     - never animate layout properties (padding/height/margin)
     - gate :hover behind (hover:hover) and (pointer:fine)
     - reduced motion = fewer animations, not zero: keep opacity
       and colour, drop movement
     - stagger grouped entrances 30-80ms
   =========================================================== */

:root {
  --nr-cream: #F3EDE5;
  --nr-ink: #1A1A1A;
  --nr-clay: #A34B2C;
  --nr-clay-deep: #8A4A33;
  --nr-sage: #4F6B5E;
  --nr-warm-gray: #D4CFC9;
  --nr-warm-gray-light: #E8E4DF;
  --nr-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nr-body: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Emil's curves. ease-out for anything entering; ease-in-out for
     things moving on screen. `ease-in` is never used. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Section rhythm ─────────────────────────────────────── */
.nr-section { padding-block: 4rem; padding-inline: 1.5rem; }
@media (min-width: 768px)  { .nr-section { padding-block: 8rem; padding-inline: 2rem; } }
@media (min-width: 1024px) { .nr-section { padding-block: 10rem; } }
.nr-container { margin-inline: auto; max-width: 72rem; }
.nr-narrow    { margin-inline: auto; max-width: 48rem; text-align: center; }
.nr-tight     { margin-inline: auto; max-width: 36rem; text-align: center; }

/* ── Type scale ─────────────────────────────────────────── */
.nr-eyebrow {
  font-family: var(--nr-body); font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(26,26,26,.6); margin: 0 0 .75rem;
}
.nr-h1 {
  font-family: var(--nr-heading); font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
  color: var(--nr-ink); margin: 0;
}
.nr-h2 {
  font-family: var(--nr-heading); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
  color: var(--nr-ink); margin: 0 0 1.5rem;
}
.nr-h2 .nr-soft { color: rgba(26,26,26,.7); }
.nr-lede { font-size: 1.125rem; line-height: 1.7; color: rgba(26,26,26,.75); margin: 0 0 4rem; }
.nr-sub  { font-size: 1.125rem; color: rgba(26,26,26,.55); margin: 2rem auto 0; max-width: 34rem; }
.nr-note { text-align: center; font-size: 1rem; color: rgba(26,26,26,.5); margin: 2.5rem 0 0; }
.nr-intro { font-size: 1.125rem; color: rgba(26,26,26,.55); margin: 0 0 1.5rem; }
@media (min-width: 768px) { .nr-intro { font-size: 1.25rem; } }

/* ── Hero ───────────────────────────────────────────────── */
.nr-hero {
  position: relative; min-height: 88svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, var(--nr-cream) 0%, var(--nr-cream) 70%, rgba(232,228,223,.35) 100%);
}
.nr-hero .nr-h1 { max-width: 56rem; }

/* Entrance: opacity + transform only. Staggered 60ms apart. */
.nr-hero .nr-h1,
.nr-hero .nr-sub {
  animation: nrRise 700ms var(--ease-out) both;
}
.nr-hero .nr-sub { animation-delay: 60ms; }
@keyframes nrRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nr-chevrons {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .25rem;
}
.nr-chevrons svg { color: rgba(26,26,26,.15); animation: nrChevWave 2.4s var(--ease-in-out) infinite; }
.nr-chevrons svg:nth-child(2) { animation-delay: .2s; }
.nr-chevrons svg:nth-child(3) { animation-delay: .4s; }
@keyframes nrChevWave {
  0%, 60%, 100% { color: rgba(26,26,26,.15); }
  30%           { color: rgba(26,26,26,.5); }
}

/* ── Grids ──────────────────────────────────────────────── */
.nr-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px)  { .nr-grid-2, .nr-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nr-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Cards ──────────────────────────────────────────────── */
.nr-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(212,207,201,.5);
  border-radius: .5rem;
  background: rgba(232,228,223,.3);
  padding: 1.5rem; text-decoration: none;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
@media (min-width: 768px) { .nr-card { padding: 2rem; } }
.nr-card h3 { font-family: var(--nr-heading); font-size: 1.375rem; line-height: 1.3; color: var(--nr-ink); margin: 0 0 .75rem; }
.nr-card p  { font-size: 1rem; line-height: 1.7; color: rgba(26,26,26,.75); margin: 0 0 1.5rem; flex: 1; }
.nr-card .nr-more {
  font-size: .875rem; font-weight: 500; color: rgba(26,26,26,.7);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color 160ms var(--ease-out);
}
.nr-card .nr-more svg { transition: transform 160ms var(--ease-out); }

/* Hover gated to real pointers — prevents sticky states on touch. */
@media (hover: hover) and (pointer: fine) {
  .nr-card:hover { border-color: var(--nr-clay); background: rgba(232,228,223,.6); }
  .nr-card:hover .nr-more { color: var(--nr-clay); }
  .nr-card:hover .nr-more svg { transform: translateX(4px); }
}

/* ── Path cards (ChooseYourPath.tsx) ────────────────────── */
.nr-path {
  display: flex; flex-direction: column;
  border: 1px solid rgba(212,207,201,.5);
  border-radius: .5rem; background: rgba(232,228,223,.3);
  padding: 2rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.nr-path:active { transform: scale(.97); }
.nr-path[aria-pressed="true"] { border-color: var(--nr-clay); background: rgba(163,75,44,.06); }
.nr-path h3 { font-family: var(--nr-heading); font-size: 1.75rem; line-height: 1.25; color: var(--nr-ink); margin: 0 0 .75rem; }
.nr-path p  { font-size: 1rem; line-height: 1.7; color: rgba(26,26,26,.75); margin: 0 0 1.75rem; flex: 1; }
.nr-path .nr-choose {
  font-size: .875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(26,26,26,.55); display: inline-flex; align-items: center; gap: .5rem;
  transition: color 160ms var(--ease-out);
}
.nr-path[aria-pressed="true"] .nr-choose { color: var(--nr-clay); }
.nr-path[aria-pressed="true"] .nr-choose::after { content: "\2713"; }
@media (hover: hover) and (pointer: fine) {
  .nr-path:hover { border-color: var(--nr-clay); background: rgba(232,228,223,.6); }
  .nr-path:hover .nr-choose { color: var(--nr-clay); }
}

/* ── Roadmap ────────────────────────────────────────────── */
.nr-roadmap[hidden] { display: none; }
.nr-roadmap h2 { text-align: left; }
.nr-roadmap .nr-roadmap-sub { color: rgba(26,26,26,.5); max-width: 32rem; margin: 1rem 0 4rem; }
.nr-steps { display: grid; gap: 2.5rem; }
@media (min-width: 768px)  { .nr-steps { grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; } }
@media (min-width: 1024px) { .nr-steps { grid-template-columns: repeat(3, 1fr); } }

/* Staggered entrance, 45ms apart — Emil's 30-80ms band. */
.nr-step {
  border-top: 1px solid rgba(212,207,201,.7); padding-top: 1.25rem;
  animation: nrRise 500ms var(--ease-out) both;
}
.nr-step:nth-child(1) { animation-delay: 0ms; }
.nr-step:nth-child(2) { animation-delay: 45ms; }
.nr-step:nth-child(3) { animation-delay: 90ms; }
.nr-step:nth-child(4) { animation-delay: 135ms; }
.nr-step:nth-child(5) { animation-delay: 180ms; }
.nr-step:nth-child(6) { animation-delay: 225ms; }
.nr-step .nr-num { display: block; font-family: var(--nr-heading); font-size: 1.125rem; color: var(--nr-clay); margin-bottom: .5rem; }
.nr-step h3 { font-family: var(--nr-heading); font-size: 1.5rem; line-height: 1.25; color: var(--nr-ink); margin: 0 0 .5rem; }
.nr-step p  { font-size: 1rem; line-height: 1.7; color: rgba(26,26,26,.7); margin: 0; }

/* ── About ──────────────────────────────────────────────── */
.nr-about { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .nr-about { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.nr-about-copy p { font-size: 1.125rem; line-height: 1.8; color: rgba(26,26,26,.75); margin: 0 0 1.5rem; }
.nr-about-figure { border-radius: .5rem; overflow: hidden; background: rgba(232,228,223,.5); }
.nr-about-figure img { display: block; width: 100%; height: auto; }

/* ── Pill buttons with the left-origin wipe ─────────────── */
.nr-actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (min-width: 640px) { .nr-actions { flex-direction: row; justify-content: center; } }

.nr-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem; overflow: hidden;
  border: 1px solid rgba(26,26,26,.15); border-radius: 9999px;
  padding: 1.125rem 2.25rem;
  font-family: var(--nr-body); font-size: 1rem; font-weight: 500;
  color: var(--nr-ink); text-decoration: none; width: 100%;
  transition: transform 160ms var(--ease-out), color 300ms var(--ease-out);
}
@media (min-width: 640px) { .nr-btn { width: auto; min-width: 13.75rem; } }
.nr-btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--nr-clay);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.nr-btn > * { position: relative; }
/* Press feedback — Emil's 0.97 at 160ms. Applies on touch too. */
.nr-btn:active { transform: scale(.97); }
.nr-btn-wa::before   { background: #25D366; }
.nr-btn-sage::before { background: var(--nr-sage); }
@media (hover: hover) and (pointer: fine) {
  .nr-btn:hover::before { transform: scaleX(1); }
  .nr-btn:hover { color: var(--nr-cream); }
}

/* ── Quiet back-link to ayomac.com ──────────────────────── */
.nr-backlink {
  display: inline-block; font-size: .9375rem; color: var(--nr-sage);
  text-decoration: none; border-bottom: 1px solid rgba(79,107,94,.35);
  padding-bottom: 1px;
  transition: border-color 160ms var(--ease-out);
}
.nr-backlink:hover { border-bottom-color: var(--nr-sage); }

/* ── Reduced motion ─────────────────────────────────────────
   Emil: fewer animations, not zero. Opacity and colour stay
   (they aid comprehension); movement goes. */
@media (prefers-reduced-motion: reduce) {
  .nr-hero .nr-h1,
  .nr-hero .nr-sub,
  .nr-step { animation: nrFadeOnly 300ms ease both; }
  .nr-chevrons svg { animation: none; }
  .nr-card .nr-more svg,
  .nr-path:active,
  .nr-btn:active { transform: none !important; }
}
@keyframes nrFadeOnly { from { opacity: 0; } to { opacity: 1; } }