/* ═══════════════════════════════════════════════════════════════
   SIGNAL ATLAS — RSM Consulting
   A cartographic / celestial-navigation visual system.
   Ink on aged paper. Constellations, meridian grids, compass rose.
   Deliberately NOT a dark SaaS template or a card grid.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* paper / ink palette */
  --paper:        #f2ead8;   /* aged chart paper */
  --paper-deep:   #e9dfc6;
  --paper-light:  #faf5e8;
  --ink:          #1c2733;   /* deep chart ink */
  --ink-soft:     #3a4550;
  --ink-faint:    #6b7480;
  --line:         #c9bda1;   /* subtle grid line */
  --line-strong:  #a99c7e;
  --accent:       #c8442c;   /* vermilion / compass accent */
  --accent-deep:  #a3351f;
  --navy:         #1f2d3f;   /* dark section field */
  --navy-soft:    #2a3a4f;
  --cream-on-navy:#efe6d2;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
  position:relative;
}

/* faint paper grain + vignette */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,240,.55), rgba(0,0,0,0) 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(140,118,74,.12), rgba(0,0,0,0) 55%);
  mix-blend-mode:multiply;
}
main, header, footer{ position:relative; z-index:1; }

.mono{ font-family:var(--mono); letter-spacing:.06em; }
.mono-right{ font-family:var(--mono); text-align:right; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ───────────────────────── Links & buttons ───────────────────────── */
.atlas-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-light);
  background:var(--accent);
  padding:.95rem 1.5rem;
  border:1px solid var(--accent);
  text-decoration:none;
  box-shadow:3px 3px 0 rgba(28,39,51,.18);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.atlas-btn:hover{
  background:var(--accent-deep);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(28,39,51,.22);
}
.atlas-btn--outline{
  background:transparent; color:var(--ink);
  border-color:var(--line-strong);
  box-shadow:none;
}
.atlas-btn--outline:hover{ background:var(--paper-deep); color:var(--ink); }

/* ───────────────────────── Header ───────────────────────── */
.atlas-header__rule{
  height:1px; background:var(--line-strong); width:100%;
}
.atlas-header__bar{
  max-width:var(--maxw); margin:0 auto; padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap;
}
.atlas-brand{
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
}
.atlas-brand svg{ width:42px; height:42px; }
.brand-ring{ stroke:var(--ink); stroke-width:1.4; }
.brand-node{ fill:var(--accent); stroke:var(--ink); stroke-width:.8; }
.brand-node--core{ fill:var(--ink); }
.brand-const path{ stroke:var(--ink); stroke-width:1.1; stroke-dasharray:3 3; }
.atlas-brand__word{
  font-family:var(--serif); font-weight:700; font-size:1.35rem; letter-spacing:.02em;
}
.atlas-brand__word em{ font-style:normal; color:var(--accent); }
.atlas-brand__sub{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); align-self:flex-end; padding-bottom:.2rem;
}
.atlas-nav{ display:flex; gap:1.6rem; }
.atlas-nav a{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); position:relative; padding:.2rem 0;
}
.atlas-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--accent); transition:width .15s ease;
}
.atlas-nav a:hover::after, .atlas-nav a.is-active::after{ width:100%; }
.atlas-nav a.is-active{ color:var(--ink); }
.atlas-cta{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-light); background:var(--ink);
  padding:.7rem 1.15rem; text-decoration:none;
  transition:background .12s ease;
}
.atlas-cta:hover{ background:var(--accent); }

/* ───────────────────────── Hero ───────────────────────── */
.hero{ max-width:var(--maxw); margin:0 auto; padding:3.5rem var(--pad) 2rem; }
.hero__meta{ font-size:.72rem; letter-spacing:.18em; color:var(--ink-faint); padding-bottom:.6rem; }
.hero__wrap{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:3rem; align-items:center;
}
.hero__eyebrow{ font-size:.72rem; letter-spacing:.16em; color:var(--accent-deep); margin-bottom:1.2rem; }
.hero h1{
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  line-height:1.05; font-weight:600; letter-spacing:-.01em; margin-bottom:1.4rem;
}
.ink-hl{
  position:relative; white-space:nowrap;
}
.ink-hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em;
  background:rgba(200,68,44,.28); z-index:-1;
}
.hero__lede{
  font-size:1.12rem; color:var(--ink-soft); max-width:34rem; margin-bottom:2rem;
}
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__baseline{
  margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; gap:2rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.14em; color:var(--ink-faint);
}

/* ───────────────────────── The Plot (hero signal map) ───────────────────────── */
.plot{
  position:relative; width:100%;
  filter:drop-shadow(6px 8px 0 rgba(28,39,51,.10));
}
.plot__frame{
  position:relative; background:var(--paper-light);
  border:1px solid var(--ink);
  padding:2.4rem 1.4rem 1.2rem;
}
.plot__corner{ position:absolute; width:14px; height:14px; }
.plot__corner--tl{ top:6px; left:6px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.plot__corner--tr{ top:6px; right:6px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
.plot__corner--bl{ bottom:6px; left:6px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
.plot__corner--br{ bottom:6px; right:6px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
.plot__title{
  position:absolute; top:8px; left:2rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:var(--ink);
  background:var(--paper-light); padding:0 .35rem;
}
.plot__subtitle{
  position:absolute; top:8px; right:1rem;
  font-family:var(--mono); font-size:.54rem; letter-spacing:.1em; color:var(--accent-deep);
}
@media(max-width:560px){
  .plot__title{left:1.5rem;font-size:.56rem;letter-spacing:.11em}
  .plot__subtitle{display:none}
}
.plot__svg{ width:100%; height:auto; display:block; }
.plot__grid line{ stroke:var(--line); stroke-width:.8; }
.plot__rings circle{ fill:none; stroke:var(--line-strong); stroke-width:.9; stroke-dasharray:2 3; }
.plot__links path{ fill:none; stroke:var(--ink); stroke-width:1.3; stroke-dasharray:4 3; }
.plot__labels .pin{ fill:var(--accent); font-size:20px; }
.plot__labels .anchor{
  fill:var(--ink); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-anchor:middle;
}
.plot__labels .note{ fill:var(--ink-faint); font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-anchor:middle; }
.plot__axis text{ fill:var(--ink-faint); font-family:var(--mono); font-size:9px; }
.plot__legend{
  display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center;
  margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--line-strong);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-soft);
}
.swatch{ display:inline-block; width:10px; height:10px; margin-right:.35rem; vertical-align:middle; }
.swatch--node{ background:var(--accent); border-radius:50%; }
.swatch--link{ background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 6px); }
.swatch--ring{ background:var(--line-strong); border-radius:50%; }

/* ───────────────────────── Compass ribbon ───────────────────────── */
.compass{
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--paper-deep);
  margin:2rem 0;
  overflow:hidden;
}
.compass__inner{
  max-width:var(--maxw); margin:0 auto; padding:.8rem var(--pad);
  display:flex; align-items:center; justify-content:space-around; gap:1rem; flex-wrap:wrap;
}
.compass__rose{
  font-family:var(--mono); font-size:1.1rem; font-weight:600; color:var(--accent);
}
.compass__line{ height:1px; flex:1 1 2rem; background:var(--line-strong); }
.compass__word{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
}

/* ───────────────────────── Section scaffolding ───────────────────────── */
section{ padding:4.5rem var(--pad); max-width:var(--maxw); margin:0 auto; }
.section-head{ max-width:36rem; margin-bottom:3rem; }
.section-head .mono{ font-size:.72rem; letter-spacing:.2em; color:var(--accent-deep); margin-bottom:1rem; display:block; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); font-weight:600; line-height:1.1; margin-bottom:1rem; }
.section-head__lede{ color:var(--ink-soft); font-size:1.08rem; }
.section-head--light .mono{ color:var(--cream-on-navy); }
.section-head--light h2{ color:var(--cream-on-navy); }
.section-head--light .section-head__lede{ color:rgba(239,230,210,.78); }

/* ───────────────────────── Plates (services) ───────────────────────── */
.plates__map{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(169,156,126,.25) 39px 40px);
}
.plate{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding:2rem; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  background:rgba(242,234,216,.55);
  transition:background .15s ease;
}
.plate:hover{ background:var(--paper-light); }
.plate__tick{ color:var(--accent); font-size:1.1rem; padding-top:.2rem; }
.plate__num{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; color:var(--accent-deep); }
.plate h3{ font-size:1.35rem; font-weight:600; margin:.35rem 0 .5rem; }
.plate p{ color:var(--ink-soft); font-size:.98rem; }
.plate__coords{ display:block; margin-top:.9rem; font-size:.66rem; letter-spacing:.1em; color:var(--ink-faint); }

/* ───────────────────────── Course (process) ───────────────────────── */
.course{ background:var(--navy); max-width:none; color:var(--cream-on-navy); }
.course > .section-head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.route{ max-width:var(--maxw); margin:0 auto; }
.route__track{ margin-bottom:2.5rem; }
.route__track svg{ width:100%; height:auto; }
.route__base{ fill:none; stroke:rgba(239,230,210,.25); stroke-width:1.4; stroke-dasharray:2 4; }
.route__line{ fill:none; stroke:var(--accent); stroke-width:2.4; }
.route__node{ fill:var(--navy); stroke:var(--accent); stroke-width:2; }
.route__legs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
}
.leg{ border-top:2px solid var(--accent); padding-top:1.2rem; }
.leg__num{ font-size:.68rem; letter-spacing:.2em; color:var(--accent); }
.leg h3{ font-family:var(--serif); font-size:1.4rem; font-weight:500; margin:.5rem 0 .6rem; color:var(--cream-on-navy); }
.leg p{ color:rgba(239,230,210,.75); font-size:.96rem; margin-bottom:1rem; }
.leg__tags{ font-size:.62rem; letter-spacing:.08em; color:rgba(239,230,210,.5); line-height:1.8; }

/* ───────────────────────── Signal Log ───────────────────────── */
.log__entries{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.entry{
  border-top:2px solid var(--ink); padding-top:1.2rem;
}
.entry__sn{ font-size:.62rem; letter-spacing:.16em; color:var(--accent-deep); display:block; }
.entry__date{ font-size:.62rem; letter-spacing:.12em; color:var(--ink-faint); display:block; margin:.2rem 0 .8rem; }
.entry h3{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; line-height:1.3; }
.entry p{ color:var(--ink-soft); font-size:.95rem; }

/* ───────────────────────── Triangulate ───────────────────────── */
.position{ background:var(--navy); max-width:none; color:var(--cream-on-navy); }
.position > .section-head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.position__panel{
  max-width:680px; margin:0 auto; background:rgba(42,58,79,.6);
  border:1px solid rgba(239,230,210,.25); padding:2.2rem;
}
.dial{ margin-bottom:1.8rem; }
.dial label{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--cream-on-navy);
}
.dial output{ font-family:var(--serif); font-size:1.3rem; color:var(--accent); }
.dial input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:3px;
  background:rgba(239,230,210,.3); border-radius:0; outline:none;
}
.dial input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px;
  background:var(--accent); border:2px solid var(--paper-light); cursor:pointer;
  transform:rotate(45deg);
}
.dial input[type=range]::-moz-range-thumb{
  width:14px; height:14px; background:var(--accent); border:2px solid var(--paper-light); cursor:pointer;
  transform:rotate(45deg);
}
.position__out{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px dashed rgba(239,230,210,.3); padding-top:1.4rem;
}
.position__out-lbl{ font-size:.72rem; letter-spacing:.18em; color:var(--cream-on-navy); }
.position__out-val{ font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--accent); }
.position__out-note{ font-size:.6rem; letter-spacing:.1em; color:rgba(239,230,210,.45); }

/* ───────────────────────── Junction (final CTA) ───────────────────────── */
.junction{
  display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center;
}
.junction__actions{ display:flex; gap:1rem; margin-top:1.8rem; flex-wrap:wrap; }
.junction__seal{ position:relative; width:150px; height:150px; }
.junction__seal svg{ width:100%; height:100%; }
.junction__seal circle{ fill:none; stroke:var(--accent); stroke-width:1.6; }
.junction__seal path{ stroke:var(--line-strong); stroke-width:.8; }
.junction__seal circle:last-child{ fill:var(--accent); }
.junction__seal-text{
  position:absolute; bottom:-1.4rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--ink-faint); white-space:nowrap;
}

/* ───────────────────────── Footer ───────────────────────── */
.atlas-footer{ margin-top:2rem; }
.atlas-footer__rule{ height:1px; background:var(--line-strong); }
.atlas-footer__grid{
  max-width:var(--maxw); margin:0 auto; padding:3rem var(--pad);
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
}
.atlas-footer__brand b{ font-family:var(--serif); font-size:1.1rem; }
.atlas-footer__brand p{ color:var(--ink-soft); font-size:.9rem; margin-top:.5rem; max-width:24rem; }
.atlas-footer__col{ display:flex; flex-direction:column; gap:.5rem; }
.atlas-footer__col h4{ font-size:.68rem; letter-spacing:.18em; color:var(--accent-deep); margin-bottom:.4rem; }
.atlas-footer__col a{ color:var(--ink-soft); font-size:.9rem; text-decoration:none; }
.atlas-footer__col a:hover{ color:var(--accent); }
.atlas-footer__bottom{
  max-width:var(--maxw); margin:0 auto; padding:1rem var(--pad);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.1em; color:var(--ink-faint);
}

/* ───────────────────────── Reveal on scroll ───────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1000px){
  .hero__wrap{ grid-template-columns:1fr; }
  .route__legs{ grid-template-columns:1fr 1fr; }
  .log__entries{ grid-template-columns:1fr 1fr; }
  .atlas-footer__grid{ grid-template-columns:1fr 1fr; }
  .junction{ grid-template-columns:1fr; }
  .junction__seal{ display:none; }
}

@media (max-width: 600px){
  :root{ --pad:1.15rem; }
  section{ padding:3rem var(--pad); }
  .atlas-header__bar{ gap:.8rem; }
  .atlas-nav{ order:3; width:100%; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
  .atlas-nav a{ font-size:.72rem; }
  .atlas-cta{ font-size:.7rem; padding:.6rem .9rem; }
  .hero h1{ font-size:2.1rem; }
  .hero__baseline{ gap:1rem; }
  .plates__map{ grid-template-columns:1fr; }
  .route__legs{ grid-template-columns:1fr; gap:1.6rem; }
  .log__entries{ grid-template-columns:1fr; }
  .atlas-footer__grid{ grid-template-columns:1fr; }
  .compass__inner{ justify-content:center; }
  .plot__legend{ gap:.8rem; }
  .plot__subtitle{ display:none; }
  .position__panel{ padding:1.5rem 1rem; }
}