/* CycleStop project page — urban, street signage, red */
html body.p-cyclestop { background: #E3242B !important; }
body.p-cyclestop .navbar-default,
body.p-cyclestop .navbar-fixed-top.navbar-shrink { background: rgba(255,255,255,.95) !important; box-shadow: 0 2px 0 #16161a; }
body.p-cyclestop .navbar-default .navbar-nav>li>a { color: #16161a !important; }
body.p-cyclestop .navbar-default .navbar-nav>li>a:hover { color: #E3242B !important; }
body.p-cyclestop .navbar-default .navbar-toggle { border-color: #16161a !important; }
body.p-cyclestop .navbar-default .navbar-toggle .icon-bar { background-color: #16161a !important; }

.cs { --pg-display: "Big Shoulders Display", "Montserrat", sans-serif; --red: #E3242B; --red-dark: #b5161c; --ink: #16161a;
      --asphalt: #232328; --paper: #f4f1ea; --muted: #5e6270; --sign: #1d5fbf; --lane: #1faf6e; --yellow: #ffcf00;
      background: var(--paper); color: var(--ink); font-family: "Montserrat", "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.65; }
.cs h1, .cs h2, .cs h3 { line-height: .92; color: var(--ink); font-weight: 900; }
.cs h2 { font-size: clamp(46px, 7vw, 96px) !important; text-transform: uppercase !important; margin-bottom: 22px !important; }
.cs h2 em { font-style: normal; color: var(--red); }
.cs h1 *, .cs h2 *, .cs h3 * { text-transform: inherit !important; }
.cs h3 { font-size: 30px !important; font-weight: 800; text-transform: uppercase !important; margin-bottom: 8px !important; }
.cs-kick { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .12em !important; text-transform: uppercase !important;
           background: var(--ink); color: #fff; padding: 6px 12px; margin-bottom: 18px; transform: rotate(-1.5deg); }
.cs-lead { font-size: 20px; color: var(--muted); max-width: 36em; }
.cs-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 700;
          font-size: 17px; background: var(--ink); color: #fff !important; transition: transform .15s; }
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn-white { background: #fff; color: var(--red) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.cs-btn-line { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.cs-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- hero ---------- */
.cs-hero { background: var(--red); color: #fff; padding: 140px 0 0; position: relative; overflow: hidden; }
.cs-hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
                   background:
                     linear-gradient(90deg, transparent 49.6%, #fff 49.6%, #fff 50.4%, transparent 50.4%) 0 0 / 220px 220px,
                     linear-gradient(0deg, transparent 49.6%, #fff 49.6%, #fff 50.4%, transparent 50.4%) 0 0 / 160px 160px,
                     linear-gradient(32deg, transparent 49.7%, #fff 49.7%, #fff 50.3%, transparent 50.3%) 0 0 / 300px 300px; }
.cs-hero .pg-wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.cs-word { width: 250px; margin-bottom: 26px; filter: brightness(0) invert(1); }
.cs-hero h1 { font-size: clamp(72px, 12vw, 170px) !important; color: #fff; text-transform: uppercase !important; line-height: .82;
              letter-spacing: -.01em; margin-bottom: 26px !important; }
.cs-hero h1 span { display: block; color: var(--ink); }
.cs-hero .cs-lead { color: #ffe3e4; font-size: 21px; }
.cs-hero .pj-mock { box-shadow: 0 30px 60px rgba(60,0,0,.4); transform: rotate(-2deg); }
.cs-road { position: relative; margin-top: 70px; height: 110px; background: var(--asphalt); overflow: hidden; }
.cs-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px;
                   background: repeating-linear-gradient(90deg, #fff 0 60px, transparent 60px 110px); background-size: 110px 6px;
                   animation: cs-dash 1.2s linear infinite; }
.cs-road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: var(--yellow); opacity: .8; }
@keyframes cs-dash { to { background-position: -110px 0; } }
.cs-bike { position: absolute; top: 14px; left: -80px; color: #fff; font-size: 46px; animation: cs-ride 9s linear infinite; }
.cs-bike .fa { color: #fff; }
@keyframes cs-ride { to { left: 105%; } }

/* ---------- 2015 ---------- */
.cs-origin { padding: 120px 0; background: var(--paper); position: relative; }
.cs-origin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.cs-years { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: clamp(64px, 9vw, 130px); line-height: .85; color: var(--ink); }
.cs-years span { color: var(--red); display: block; }
.cs-years small { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; display: block; color: var(--muted); margin: 8px 0 30px; }
.cs-polas { position: relative; height: 560px; }
.cs-pola { position: absolute; background: #fff; padding: 10px 10px 34px; box-shadow: 0 16px 34px rgba(22,22,26,.18); width: 210px; }
.cs-pola img { display: block; width: 100%; }
.cs-pola figcaption { position: absolute; bottom: 8px; left: 10px; right: 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.cs-p1 { left: 0; top: 40px; transform: rotate(-7deg); }
.cs-p2 { left: 170px; top: 0; transform: rotate(3deg); z-index: 2; }
.cs-p3 { left: 340px; top: 60px; transform: rotate(-2deg); }
.cs-p4 { right: 0; top: 230px; width: 190px; transform: rotate(6deg); z-index: 3; }
.cs-stamp { position: absolute; left: 30px; bottom: 10px; z-index: 4; border: 4px solid var(--red); color: var(--red); padding: 6px 16px;
            font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 34px; transform: rotate(-10deg);
            border-radius: 6px; background: rgba(244,241,234,.85); }

/* ---------- problem + types ---------- */
.cs-types { padding: 120px 0; background: #fff; }
.cs-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.cs-sign { text-align: center; }
.cs-disc { width: 150px; height: 150px; margin: 0 auto 24px; border-radius: 50%; background: var(--sign); display: grid; place-items: center;
           box-shadow: 0 0 0 7px #fff, 0 0 0 9px #c9cdd6, 0 18px 30px rgba(29,95,191,.3); transition: transform .3s; }
.cs-disc .fa { color: #fff; font-size: 64px; }
.cs-sign:nth-child(2) .cs-disc { background: var(--lane); box-shadow: 0 0 0 7px #fff, 0 0 0 9px #c9cdd6, 0 18px 30px rgba(31,175,110,.3); }
.cs-sign:nth-child(3) .cs-disc { background: #f28c1b; box-shadow: 0 0 0 7px #fff, 0 0 0 9px #c9cdd6, 0 18px 30px rgba(242,140,27,.3); }
.cs-sign:hover .cs-disc { transform: rotate(-8deg) scale(1.04); }
.cs-sign p { color: var(--muted); max-width: 22em; margin: 0 auto; }

/* ---------- how ---------- */
.cs-how { padding: 120px 0; background: var(--paper); }
.cs-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cs-steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: s; }
.cs-steps li { position: relative; padding: 0 0 26px 76px; counter-increment: s; }
.cs-steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 54px; height: 54px; background: var(--yellow);
                       color: var(--ink); font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 34px;
                       display: grid; place-items: center; transform: rotate(45deg); border-radius: 6px; }
.cs-steps li::after { content: counter(s); position: absolute; left: 0; top: -4px; width: 54px; height: 54px; display: grid; place-items: center;
                      font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 30px; }
.cs-steps li::before { color: transparent; }
.cs-steps b { display: block; font-size: 20px; }
.cs-steps p { color: var(--muted); margin: 0; }
.cs-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cs-phones .pj-mock { margin: 0; max-width: none; box-shadow: 0 20px 40px rgba(22,22,26,.14); }
.cs-phones .pj-mock:nth-child(2) { margin-top: 60px; }

/* ---------- features: info signs ---------- */
.cs-feat { padding: 120px 0; background: var(--ink); color: #fff; }
.cs-feat h2 { color: #fff; }
.cs-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 46px; }
.cs-info { background: var(--sign); border-radius: 10px; padding: 20px; border: 3px solid #fff; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px rgba(255,255,255,.4);
           transition: transform .2s; }
.cs-info:hover { transform: translateY(-4px) rotate(-1deg); }
.cs-info .fa { font-size: 30px; color: #fff; margin-bottom: 12px; display: block; }
.cs-info h3 { color: #fff; font-size: 24px !important; }
.cs-info p { color: #dbe6f7; font-size: 14.5px; margin: 0; line-height: 1.5; }
.cs-info.cs-red { background: var(--red); box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px rgba(255,255,255,.4); }
.cs-info.cs-green { background: var(--lane); box-shadow: inset 0 0 0 3px var(--lane), inset 0 0 0 5px rgba(255,255,255,.4); }

/* ---------- host ---------- */
.cs-host { padding: 120px 0; background: #fff; }
.cs-host-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.cs-host ul { padding: 0; list-style: none; margin: 24px 0 0; }
.cs-host li { padding: 10px 0 10px 40px; position: relative; border-bottom: 1px dashed #d9d4c8; }
.cs-host li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 9px; width: 26px; height: 26px; border-radius: 50%;
                      background: var(--lane); color: #fff; font-size: 13px; display: grid; place-items: center; }

/* ---------- case ---------- */
.cs-case { padding: 120px 0 0; background: var(--asphalt); color: #e8e8ec; position: relative; overflow: hidden; }
.cs-case h2 { color: #fff; }
.cs-case .cs-lead { color: #b9bac4; }
.cs-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 46px 0 0; }
.cs-nums div { background: rgba(255,255,255,.05); border-left: 6px solid var(--red); padding: 18px 20px; }
.cs-nums b { display: block; font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 64px; line-height: .9; color: #fff; }
.cs-nums span { font-size: 14px; color: #b9bac4; }
.cs-route { position: relative; margin-top: 80px; padding: 50px 0 70px; }
.cs-stops::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 6px; z-index: -1;
                    background: repeating-linear-gradient(90deg, var(--yellow) 0 40px, transparent 40px 70px); }
.cs-route h3 { color: #fff; font-size: 26px !important; margin-bottom: 26px !important; }
.cs-stops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; position: relative; z-index: 0; }
.cs-stops li { padding-top: 34px; position: relative; font-size: 14.5px; color: #c9cad2; }
.cs-stops li::before { content: ""; position: absolute; top: -2px; z-index: 1; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--asphalt);
                       border: 5px solid var(--yellow); }
.cs-stops li:first-child::before { background: var(--lane); border-color: var(--lane); box-shadow: 0 0 0 6px rgba(31,175,110,.3); }
.cs-stops b { display: block; color: #fff; font-size: 16px; }

/* ---------- final ---------- */
.cs-final { background: var(--red); color: #fff; padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.cs-final h2 { color: #fff; }
.cs-final h2 em { color: var(--ink); }
.cs-final .cs-lead { color: #ffe3e4; margin: 0 auto; }
.cs-final .cs-ctas { justify-content: center; }

@media (max-width: 991px) {
  .cs-hero .pg-wrap, .cs-origin-grid, .cs-how-grid, .cs-host-grid { grid-template-columns: 1fr; }
  .cs-board { grid-template-columns: 1fr 1fr; }
  .cs-nums { grid-template-columns: 1fr 1fr; }
  .cs-stops { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; }
  .cs-stops::after { display: none; }
  .cs-polas { height: 520px; max-width: 560px; }
}
@media (max-width: 600px) {
  .cs-hero { padding-top: 110px; }
  .cs-signs, .cs-board { grid-template-columns: 1fr; }
  .cs-phones { grid-template-columns: 1fr; }
  .cs-phones .pj-mock:nth-child(2) { margin-top: 0; }
  .cs-stops { grid-template-columns: 1fr 1fr; }
  .cs-polas { height: 470px; }
  .cs-pola { width: 150px; }
  .cs-p2 { left: 110px; } .cs-p3 { left: auto; right: 0; top: 40px; }
  .cs-p4 { width: 150px; right: 30px; top: 250px; }
  .cs-origin, .cs-types, .cs-how, .cs-feat, .cs-host, .cs-final { padding: 80px 0; }
  .cs-case { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .cs-road::before, .cs-bike { animation: none; } .cs-bike { left: 40%; } }