/* Edstar Analytics — brand stylesheet (per EDSTAR_LOOK_PROMPT.md)
   Navy dominant, Work Sans, white/Snow surfaces, quiet accents, no shadows. */

:root{ --coral-text:#C14B30; --gray-text:#5A6B7D;
  --navy:#1B3A5C; --azure:#2B6CB0; --coral:#E76F51; --amber:#F4A261;
  --silver:#A0AEC0; --mist:#D4DBDF; --snow:#F9FAFB; --slate:#4A5568; --white:#fff;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--slate);
  font:400 17px/1.65 "Work Sans","Source Sans 3","Open Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--navy); font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0}
a{color:var(--azure); text-decoration:none}
a:hover{color:var(--navy)}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- header pattern: eyebrow / title / three dashes ---------- */
.eyebrow{color:var(--coral-text); font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin:0 0 12px}
.dashes{display:flex; gap:6px; margin:18px 0 0}
.dashes span{width:26px; height:4px; display:block}
.dashes span:nth-child(1){background:var(--navy)}
.dashes span:nth-child(2){background:var(--coral)}
.dashes span:nth-child(3){background:var(--amber)}
.lead{color:var(--slate); font-size:18px; max-width:60ch; margin:16px 0 0}
.hair{height:1px; background:var(--mist); border:0; margin:0}

/* ---------- site header / nav ---------- */
.site-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--mist)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{width:34px; height:34px; flex:none}
.wordmark{display:flex; flex-direction:column; line-height:1}
.wordmark .n{color:var(--navy); font-weight:700; font-size:19px; letter-spacing:.02em}
.wordmark .a{color:var(--silver); font-weight:600; font-size:10px; letter-spacing:.34em; margin-top:3px}
.nav{display:flex; align-items:center; gap:30px}
.nav > a, .nav .menu > a{color:var(--navy); font-weight:600; font-size:15px}
.nav > a:hover, .nav .menu > a:hover{color:var(--azure)}
.menu{position:relative}
.menu .caret{color:var(--gray-text); font-size:11px; margin-left:4px}
.menu .drop{position:absolute; top:100%; left:0; min-width:230px; background:var(--white); border:1px solid var(--mist); padding:8px 0; display:none}
.menu:hover .drop,.menu:focus-within .drop{display:block}
.menu .drop a{display:block; padding:8px 18px; color:var(--slate); font-size:14.5px; font-weight:400}
.menu .drop a:hover{color:var(--navy); background:var(--snow)}
.nav-cta{border:1px solid var(--navy); color:var(--navy); font-weight:600; font-size:14.5px; padding:9px 18px; border-radius:3px}
.nav-cta:hover{background:var(--navy); color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block; background:var(--navy); color:#fff; font-weight:600; font-size:15px; padding:13px 24px; border-radius:3px; border:1px solid var(--navy)}
.btn:hover{background:#12293f; color:#fff}
.btn-ghost{background:#fff; color:var(--navy); border:1px solid var(--navy)}
.btn-ghost:hover{background:var(--snow); color:var(--navy)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}

/* ---------- sections ---------- */
section{padding:76px 0}
.section-head{margin-bottom:44px}
.section-head h2{font-size:34px}
.snow{background:var(--snow); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist)}

/* ---------- hero ---------- */
.hero{padding:90px 0 78px; position:relative; overflow:hidden}
.hero h1{font-size:56px; letter-spacing:-.02em; max-width:15ch}
.hero .lead{font-size:20px; max-width:56ch}
.hero-constellation{position:absolute; right:-40px; top:40px; width:420px; opacity:.5; pointer-events:none}
@media(max-width:820px){ .hero h1{font-size:40px} .hero-constellation{display:none} }

/* ---------- stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr)}
.stats .stat{padding:30px 28px; border-left:1px solid var(--mist)}
.stats .stat:first-child{border-left:0; padding-left:0}
.stat .num{color:var(--navy); font-weight:700; font-size:40px; line-height:1}
.stat .lbl{color:var(--gray-text); font-size:15px; margin-top:8px; display:block}

/* ---------- node grid (callouts split by hairlines, no boxes) ---------- */
.nodes{display:grid; gap:0}
.nodes.cols-4{grid-template-columns:repeat(4,1fr)}
.nodes.cols-2{grid-template-columns:repeat(2,1fr)}
.node{padding:26px 30px; border-left:1px solid var(--mist)}
.nodes.cols-4 .node:nth-child(4n+1), .nodes.cols-2 .node:nth-child(2n+1){border-left:0; padding-left:6px}
.node .dot{width:11px; height:11px; border-radius:50%; display:inline-block; margin-bottom:14px}
.node h3{font-size:19px; margin-bottom:8px}
.node p{margin:0; font-size:15.5px; color:var(--slate)}
.node .more{display:inline-block; margin-top:14px; color:var(--azure); font-weight:600; font-size:14.5px}
.node .more:hover{color:var(--navy)}
.dot-navy{background:var(--navy)} .dot-azure{background:var(--azure)}
.dot-coral{background:var(--coral)} .dot-amber{background:var(--amber)}
@media(max-width:820px){ .nodes.cols-4{grid-template-columns:1fr 1fr} .nodes.cols-4 .node,.nodes.cols-2 .node{border-left:0; padding-left:6px} }
@media(max-width:520px){ .stats,.nodes.cols-4,.nodes.cols-2{grid-template-columns:1fr} .stats .stat{border-left:0; padding-left:0} }

/* ---------- cards (white, 1px mist, no shadow) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.card{background:var(--white); border:1px solid var(--mist); border-radius:3px; padding:26px}
.card .kicker{color:var(--gray-text); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.card h3{font-size:20px; margin:10px 0 10px}
.card p{margin:0; font-size:15.5px}
.card .more{display:inline-block; margin-top:16px; color:var(--azure); font-weight:600; font-size:14.5px}
@media(max-width:820px){ .cards{grid-template-columns:1fr} }

/* ---------- inline callout (replaces the old coral-left-border card) ---------- */
.callout{display:flex; gap:16px; align-items:flex-start; padding:24px 0; border-top:1px solid var(--mist); border-bottom:1px solid var(--mist)}
.callout .dot{width:12px; height:12px; border-radius:50%; background:var(--coral); flex:none; margin-top:7px}
.callout h3{font-size:19px; margin:0 0 6px}
.callout p{margin:0; font-size:15.5px}

/* ---------- quote ---------- */
.quote{max-width:80ch}
.quote p{font-size:20px; color:var(--navy); line-height:1.5}
.quote .who{margin-top:16px; color:var(--slate); font-size:15px}
.quote .who b{color:var(--navy)}
.quote .bar{width:40px; height:4px; background:var(--coral); margin-bottom:22px}

/* ---------- CTA band (the one intentional dark surface) ---------- */
.cta{background:var(--navy); color:var(--snow)}
.cta h2{color:#fff; font-size:32px}
.cta .lead{color:#cbd5e1}
.cta .eyebrow{color:var(--amber)}
.cta .btn{background:#fff; color:var(--navy); border-color:#fff}
.cta .btn:hover{background:var(--snow)}
.cta .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.08); color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--navy); color:#cbd5e1; padding:56px 0 0}
.foot .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
.foot .wordmark .n{color:#fff}
.foot p{font-size:14.5px; color:#9fb3c8; max-width:44ch; margin:16px 0 0}
.foot h2,.foot h4{color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:9px}
.foot a{color:#cbd5e1; font-size:14.5px}
.foot a:hover{color:var(--amber)}
.foot .base{border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding:18px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:#7f96ab}
@media(max-width:820px){ .foot .cols{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .foot .cols{grid-template-columns:1fr} }

/* a11y: skip link (visible on keyboard focus only) */
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;z-index:1000;border-radius:3px}
.skip-link:focus{left:16px}

/* a11y helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav a:focus-visible,.btn:focus-visible,.card:focus-visible,.more:focus-visible,.foot a:focus-visible{outline:3px solid var(--azure);outline-offset:3px}