/* ============================================================
   RNS Medical Supply & Equipment — Design System
   Palette drawn from the Bahamian flag (aquamarine / gold / black)
   reframed as a clinical-distribution identity.
   ============================================================ */

:root{
  --ink:        #0A1A18;   /* near-black, teal undertone — primary text */
  --ink-soft:   #35443F;   /* secondary text on paper */
  --paper:      #F7F6F1;   /* warm neutral background, not cream/terracotta */
  --paper-dim:  #EFEDE5;
  --teal-900:   #06403A;
  --teal-700:   #0B6A5D;
  --teal-600:   #0E8C7F;
  --aqua-400:   #33D8C0;
  --aqua-300:   #7CEBDA;
  --gold-500:   #D9A62E;
  --gold-400:   #E9C463;
  --line:       #D9D4C6;
  --line-strong:#C3BCA9;
  --shadow-soft: 0 8px 30px -12px rgba(6,64,58,0.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-0.02em;
}

.font-mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* Eyebrow / manifest-style labels */
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-700);
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:0.5rem;
  height:0.5rem;
  margin-right:0.55rem;
  background:var(--gold-500);
  border-radius:1px;
  transform:rotate(45deg);
  position:relative;
  top:-1px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.6rem;
  border-radius:0.35rem;
  font-weight:600;
  font-size:0.95rem;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--teal-900);
  color:var(--paper);
  border:1px solid var(--teal-900);
}
.btn-primary:hover{
  background:var(--teal-700);
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}
.btn-gold{
  background:var(--gold-500);
  color:var(--teal-900);
  border:1px solid var(--gold-500);
}
.btn-gold:hover{
  background:var(--gold-400);
  transform:translateY(-1px);
  box-shadow:0 8px 30px -12px rgba(217,166,46,0.5);
}
.btn-ghost{
  background:transparent;
  color:var(--teal-900);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{
  border-color:var(--teal-900);
  background:rgba(6,64,58,0.04);
}

/* Nav */
#site-nav{
  border-bottom:1px solid transparent;
  transition:all .25s ease;
}
#site-nav.scrolled{
  background:rgba(247,246,241,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-link{
  position:relative;
  color:var(--ink-soft);
  font-weight:500;
  font-size:0.92rem;
}
.nav-link.active{ color:var(--ink); }
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--gold-500);
  transition:width .2s ease;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }

/* Cards */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0.5rem;
  transition:all .25s ease;
}
.card:hover{
  border-color:var(--teal-600);
  box-shadow:var(--shadow-soft);
  transform:translateY(-3px);
}

/* Divider */
.hairline{ border-top:1px solid var(--line); }

/* Route-map dashed line draw animation */
.route-path{
  stroke-dasharray:6 7;
  animation:dash-flow 22s linear infinite;
}
@keyframes dash-flow{
  to{ stroke-dashoffset:-500; }
}
.route-dot{ animation:pulse-dot 2.6s ease-in-out infinite; }
.route-dot.d1{ animation-delay:.2s; }
.route-dot.d2{ animation-delay:.6s; }
.route-dot.d3{ animation-delay:1s; }
.route-dot.d4{ animation-delay:1.4s; }
@keyframes pulse-dot{
  0%,100%{ opacity:0.55; r:3.2; }
  50%{ opacity:1; r:4.4; }
}

/* Marquee */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Manifest timeline connector */
.manifest-line{
  background:repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 6px,
    transparent 6px 12px
  );
  width:1px;
}

/* Form elements */
.field-label{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.field-input{
  width:100%;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:0.3rem;
  padding:0.7rem 0.85rem;
  font-size:0.95rem;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus{
  outline:none;
  border-color:var(--teal-600);
  box-shadow:0 0 0 3px rgba(14,140,127,0.15);
}
.field-checkbox{
  accent-color:var(--teal-700);
}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Mobile nav panel */
#mobile-nav{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
#mobile-nav.open{ max-height:26rem; }