/* ===========================================================================
   Station Bus Nation — STUDENT TRANSPORTATION
   ---------------------------------------------------------------------------
   A third skin. The main site is charter navy + gold; the Transit Guide is
   civic slate; this is a school-district transportation department — deep
   institutional blue, school-bus yellow used ONLY for emphasis and safety
   warnings (never decoration), generous type, and a calm, official tone.
   Parents arrive here worried. Nothing should feel like marketing.
   =========================================================================== */

:root{
  --sc-navy:#0E2A47;         /* district letterhead blue */
  --sc-navy-2:#16385C;
  --sc-bg:#F6F7F9;
  --sc-surface:#FFFFFF;
  --sc-line:#D9DEE5;
  --sc-line-dk:#26405E;

  --sc-ink:#12202F;
  --sc-mute:#556577;
  --sc-inv:#EAF0F6;
  --sc-inv-mute:#9FB3C8;

  /* school-bus yellow — emphasis and safety only, never decoration */
  --sc-bus:#F4B400;
  --sc-bus-dk:#8A6100;

  --sc-ok:#1B6E3C;
  --sc-warn:#8A5A00;
  --sc-alert:#A8261E;
  --sc-focus:#2E9BFF;

  --sc-max:1140px;
  --sc-r:8px;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--sc-bg); color:var(--sc-ink);
  font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:"Bitter","Georgia",serif; margin:0; line-height:1.2; font-weight:700;
  color:var(--sc-navy)}
h1{font-size:clamp(2rem,4vw,2.85rem)}
h2{font-size:1.7rem} h3{font-size:1.2rem} h4{font-size:1.05rem}
p{margin:0 0 .8rem}
a{color:var(--sc-navy-2)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--sc-focus); outline-offset:2px}
.sc-wrap{width:100%; max-width:var(--sc-max); margin:0 auto; padding:0 20px}
.sc-num{font-variant-numeric:tabular-nums}
.sc-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sc-navy);color:#fff;
  padding:12px 18px;font-weight:600;text-decoration:none}
.sc-skip:focus{left:8px;top:8px}
.sc-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --------------------------------------------------------------- chrome */
.sc-util{background:var(--sc-navy-2); color:var(--sc-inv-mute); font-size:.8125rem}
.sc-util .sc-wrap{display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; min-height:40px; padding-block:6px}
.sc-util a{color:var(--sc-inv); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px}
.sc-util a:hover{text-decoration:underline}

.sc-head{background:var(--sc-navy); color:var(--sc-inv);
  border-bottom:5px solid var(--sc-bus)}
.sc-head .sc-wrap{display:flex; align-items:center; gap:16px; min-height:76px; flex-wrap:wrap}
.sc-mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--sc-inv)}
.sc-crest{width:46px;height:46px;border-radius:50%;background:var(--sc-bus);color:var(--sc-navy);
  display:grid;place-items:center;font-size:24px;flex:0 0 auto}
.sc-mark b{font-family:"Bitter",serif; font-size:1.3rem; color:#fff; display:block; line-height:1.15}
.sc-mark span span{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sc-inv-mute)}
.sc-nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.sc-nav a{color:var(--sc-inv-mute); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:10px 13px; border-radius:var(--sc-r); min-height:44px; display:inline-flex;
  align-items:center; gap:7px}
.sc-nav a:hover{background:var(--sc-navy-2); color:#fff}
.sc-nav a.on{background:var(--sc-bus); color:var(--sc-navy)}

/* ----------------------------------------------------------------- hero */
.sc-hero{position:relative; background:var(--sc-navy); color:var(--sc-inv); overflow:hidden}
.sc-hero .sc-wrap{position:relative; z-index:2; padding-block:44px 52px}
.sc-hero h1{color:#fff; max-width:20ch}
.sc-hero p{color:var(--sc-inv-mute); font-size:1.125rem; max-width:58ch; margin-top:12px}
.sc-kick{display:inline-flex; align-items:center; gap:9px; font-size:.75rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--sc-bus); margin-bottom:12px}
.sc-kick::before{content:""; width:26px; height:3px; background:var(--sc-bus)}
/* photo sits behind, feathered into the navy on every edge.
   Two layers do the blending: a radial mask eats the outer edges to nothing,
   then a navy wash comes back over the left so the headline stays legible at
   any width. Nothing is baked into the file, so one JPEG serves every page. */
.sc-hero-photo{position:absolute; inset:0; z-index:1; opacity:.5;
  background-size:cover; background-position:72% 45%;
  -webkit-mask-image:radial-gradient(125% 115% at 78% 48%, #000 22%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image:radial-gradient(125% 115% at 78% 48%, #000 22%, rgba(0,0,0,.55) 52%, transparent 82%)}
/* navy wash: solid behind the text, clearing as it moves right */
.sc-hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--sc-navy) 0%, var(--sc-navy) 24%, rgba(14,42,71,.80) 46%,
    rgba(14,42,71,.40) 68%, rgba(14,42,71,.28) 100%)}
/* soft vignette so the top and bottom edges never end on a hard line */
.sc-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    var(--sc-navy) 0%, rgba(14,42,71,0) 20%, rgba(14,42,71,0) 76%, var(--sc-navy) 100%)}
@media(max-width:860px){
  .sc-hero-photo{opacity:.3; background-position:70% 45%}
  .sc-hero::before{background:linear-gradient(180deg,
    rgba(14,42,71,.86) 0%, rgba(14,42,71,.80) 60%, var(--sc-navy) 100%)}
}

/* -------------------------------------------------------------- sections */
.sc-sec{padding:44px 0}
.sc-sec.alt{background:var(--sc-surface); border-block:1px solid var(--sc-line)}
.sc-sec-head{margin-bottom:22px; max-width:70ch}
.sc-sec-head p{color:var(--sc-mute); margin-top:8px}

/* cut-out bus artwork — transparent PNG, no card, sits on the page */
.sc-cutout{display:block; width:100%; max-width:560px; height:auto; margin:0 auto;
  filter:drop-shadow(0 18px 26px rgba(14,42,71,.18))}
.sc-cutout.sm{max-width:340px}
.sc-split{display:grid; gap:30px; grid-template-columns:1.1fr .9fr; align-items:center}
@media(max-width:860px){.sc-split{grid-template-columns:1fr}}

/* scene photo — feathered so it blends instead of ending in a hard box.
   margin:0 is load-bearing: <figure> carries a 40px UA side margin that
   otherwise squeezes the image inside its grid column. */
.sc-photo{position:relative; margin:0; border-radius:var(--sc-r)}
.sc-photo img{display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 55%, transparent 92%);
          mask-image:radial-gradient(115% 115% at 50% 50%, #000 55%, transparent 92%)}
.sc-photo figcaption{font-size:.8125rem; color:var(--sc-mute); margin-top:8px; text-align:center}

/* ----------------------------------------------------------------- cards */
.sc-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.sc-card{background:var(--sc-surface); border:1px solid var(--sc-line); border-radius:var(--sc-r);
  padding:18px 20px; display:flex; flex-direction:column; gap:9px}
.sc-card h3{margin:0}
.sc-card p{margin:0; font-size:.9375rem; color:var(--sc-mute)}
.sc-meta{font-size:.8125rem; color:var(--sc-mute)}
.sc-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.sc-tag{font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--sc-bg); border:1px solid var(--sc-line); color:var(--sc-mute);
  border-radius:999px; padding:3px 9px; white-space:nowrap}

/* the phone number is the whole point of this page — make it unmissable */
.sc-phone{display:inline-flex; align-items:center; gap:10px; font-size:1.2rem; font-weight:700;
  color:var(--sc-navy); text-decoration:none; font-variant-numeric:tabular-nums;
  background:var(--sc-bg); border:1px solid var(--sc-line); border-left:5px solid var(--sc-bus);
  border-radius:var(--sc-r); padding:11px 15px; min-height:52px}
.sc-phone:hover{background:#fff; border-color:var(--sc-navy)}
.sc-phone i{font-size:20px; color:var(--sc-bus-dk)}
.sc-phone-lbl{display:block; font-size:.75rem; font-weight:600; color:var(--sc-mute);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px}
.sc-nophone{font-size:.875rem; color:var(--sc-mute); font-style:italic}

/* -------------------------------------------------------------- pickers */
.sc-panel{background:var(--sc-surface); border:1px solid var(--sc-line);
  border-radius:var(--sc-r); padding:20px; box-shadow:0 2px 10px rgba(14,42,71,.06)}
.sc-fields{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.sc-fields{grid-template-columns:1fr}}
.sc-field label{display:block; font-weight:700; font-size:.8125rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sc-mute); margin-bottom:6px}
.sc-field select,.sc-field input{width:100%; min-height:50px; padding:12px 14px; font-size:1rem;
  font-family:inherit; color:var(--sc-ink); background:#fff; border:1px solid var(--sc-line);
  border-radius:6px}

/* --------------------------------------------------------------- buttons */
.sc-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
  padding:12px 18px; font:600 .9375rem/1 inherit; border-radius:6px; text-decoration:none;
  cursor:pointer; border:1px solid var(--sc-navy); background:var(--sc-navy); color:#fff}
.sc-btn:hover{background:var(--sc-navy-2)}
.sc-btn.ghost{background:#fff; color:var(--sc-navy); border-color:var(--sc-line)}
.sc-btn.bus{background:var(--sc-bus); border-color:var(--sc-bus); color:var(--sc-navy)}
.sc-btn.sm{min-height:42px; padding:9px 14px; font-size:.875rem}
.sc-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}

/* ---------------------------------------------------------------- notes */
.sc-note{display:flex; gap:12px; align-items:flex-start; background:var(--sc-surface);
  border:1px solid var(--sc-line); border-left:5px solid var(--sc-navy);
  border-radius:var(--sc-r); padding:15px 18px; margin-top:18px; font-size:.9375rem;
  color:var(--sc-mute); line-height:1.6}
.sc-note i{font-size:20px; color:var(--sc-navy); flex:0 0 auto}
.sc-note b{color:var(--sc-ink)}
/* yellow = safety. Used here and nowhere decorative. */
.sc-note.safety{border-left-color:var(--sc-bus); background:#FFFCF2}
.sc-note.safety i{color:var(--sc-bus-dk)}
.sc-note.alert{border-left-color:var(--sc-alert)} .sc-note.alert i{color:var(--sc-alert)}

.sc-steps{counter-reset:s; list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.sc-steps li{counter-increment:s; position:relative; padding-left:46px; line-height:1.6}
.sc-steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:32px; height:32px;
  border-radius:50%; background:var(--sc-bus); color:var(--sc-navy); display:grid; place-items:center;
  font:700 .9375rem/1 "Bitter",serif}

.sc-table-wrap{overflow-x:auto; border:1px solid var(--sc-line); border-radius:var(--sc-r);
  background:var(--sc-surface)}
.sc-table{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:560px}
.sc-table th,.sc-table td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--sc-line);
  vertical-align:top}
.sc-table th{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sc-mute);
  background:var(--sc-bg); font-weight:700}
.sc-table tr:last-child td{border-bottom:0}

.sc-empty{text-align:center; padding:50px 20px; color:var(--sc-mute)}
.sc-empty i{font-size:44px; opacity:.3; display:block; margin-bottom:12px}
.sc-count{font-size:.9375rem; color:var(--sc-mute); margin-bottom:14px}
.sc-legal{font-size:.8125rem; color:var(--sc-mute); line-height:1.7}

/* ------------------------------------------------ I-95 corridor line map
   A transit-diagram of the coverage area: one line running Maine to Florida,
   each state a station. Built from the live data, so the counts can't go
   stale. Two states we cover sit off the interstate (VT, WV) and hang off
   the line as branch stops rather than pretending to be on it. */
.sc-corridor{position:relative; padding-left:34px}
.sc-corridor::before{content:""; position:absolute; left:11px; top:10px; bottom:10px; width:4px;
  border-radius:2px;
  background:linear-gradient(to bottom, var(--sc-bus) 0%, var(--sc-navy) 12%,
    var(--sc-navy) 88%, var(--sc-bus) 100%)}
.sc-stop{position:relative; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; text-decoration:none; color:inherit; border-radius:6px}
.sc-stop::before{content:""; position:absolute; left:-28px; top:14px; width:12px; height:12px;
  border-radius:50%; background:var(--sc-surface); border:3px solid var(--sc-navy);
  box-shadow:0 0 0 3px var(--sc-surface)}
.sc-stop:hover{background:var(--sc-bg)}
.sc-stop:hover::before{background:var(--sc-bus); border-color:var(--sc-bus-dk)}
.sc-stop-ab{font:700 .8125rem/1 "Bitter",serif; letter-spacing:.06em; color:var(--sc-navy);
  background:var(--sc-bg); border:1px solid var(--sc-line); border-radius:4px;
  padding:4px 7px; min-width:38px; text-align:center; flex:0 0 auto}
.sc-stop-nm{font-weight:600; color:var(--sc-ink)}
.sc-stop-ct{font-size:.8125rem; color:var(--sc-mute); margin-left:auto;
  font-variant-numeric:tabular-nums; white-space:nowrap}
/* branch stops: offset dot on a short spur so they read as "covered, not on I-95" */
.sc-stop.branch{margin-left:20px}
.sc-stop.branch::before{left:-48px; width:10px; height:10px; border-style:dashed}
.sc-stop.branch::after{content:""; position:absolute; left:-40px; top:19px; width:20px; height:2px;
  background:var(--sc-line-dk); opacity:.45}
.sc-corridor-cap{display:flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sc-mute); margin:0 0 6px -34px}
.sc-corridor-cap i{color:var(--sc-bus-dk); font-size:16px}
/* on phones the count pushed long state names onto a second line and made a
   row twice as tall as its neighbours — let it sit inline instead */
@media(max-width:560px){
  .sc-corridor{padding-left:30px}
  .sc-stop-ct{margin-left:0}
  .sc-stop-ct::before{content:"\00b7\00a0"}
  .sc-stop-nm{font-size:.9375rem}
}

/* ---------------------------------------------------------------- modal */
.sc-modal{position:fixed; inset:0; background:rgba(14,42,71,.7); display:none;
  place-items:center; padding:20px; z-index:100}
.sc-modal.open{display:grid}
.sc-modal-box{background:#fff; border-radius:var(--sc-r); max-width:500px; width:100%; padding:24px}
.sc-modal-box h3{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.sc-modal-url{background:var(--sc-bg); border:1px solid var(--sc-line); border-radius:6px;
  padding:10px 12px; font-family:ui-monospace,Menlo,monospace; font-size:.8125rem;
  word-break:break-all; margin:12px 0 16px}
.sc-modal-acts{display:flex; gap:10px; flex-wrap:wrap}
.sc-modal-acts .sc-btn{flex:1 1 150px}

/* --------------------------------------------------------------- footer */
.sc-foot{background:var(--sc-navy); color:var(--sc-inv-mute); padding:34px 0 26px; margin-top:44px;
  font-size:.9rem; border-top:5px solid var(--sc-bus)}
.sc-foot a{color:var(--sc-inv); text-decoration:none}
.sc-foot a:hover{text-decoration:underline}
.sc-foot-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sc-foot h4{color:#fff; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:10px; font-family:inherit}
.sc-foot-links{display:flex; flex-direction:column; gap:8px}
.sc-foot-bottom{border-top:1px solid var(--sc-line-dk); margin-top:26px; padding-top:18px;
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; font-size:.8125rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}