:root{--ink:#111820;--green:#286c35;--green2:#4e9b3c;--paper:#f6f5ef;--red:#a82424;--red2:#761616;--muted:#56616b;--gold:#f1c84b;--navy:#101a3b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:#175f2d}a:hover{text-decoration-thickness:3px}header{background:#0e1418;color:white;position:sticky;top:0;z-index:10;box-shadow:0 2px 12px #0005}
nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:20px}.brand{font-weight:900;letter-spacing:.5px;font-size:1.25rem}.brand span{color:#67b647}
nav .links{display:flex;gap:16px;flex-wrap:wrap}nav a{color:white;text-decoration:none;font-weight:700}
main{min-height:70vh}.hero{max-width:1180px;margin:auto;padding:54px 22px 36px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero.flyer{grid-template-columns:.9fr 1.1fr}.hero img{width:100%;border-radius:12px;box-shadow:0 18px 55px #0004}
h1{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.92;margin:0 0 24px;text-transform:uppercase;letter-spacing:-2px}h1 span{color:var(--green)}
.lead{font-size:1.24rem;max-width:760px}.warning{font-weight:850;color:var(--red)}section{max-width:1040px;margin:auto;padding:46px 22px}
h2{font-size:2.05rem;line-height:1.1;margin:0 0 18px;text-transform:uppercase;color:#214d29}h3{margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:white;border:1px solid #d8ddd5;border-radius:10px;padding:22px;box-shadow:0 6px 18px #0000000b}.card strong.big{display:block;font-size:2.2rem;color:var(--red)}
.source{margin-top:12px;padding:11px 13px;background:#f0f4ef;border-left:5px solid var(--green);font-size:.92rem}.source a{font-weight:800}
.cta{display:inline-block;margin:10px 8px 0 0;padding:13px 18px;border-radius:7px;background:var(--green);color:white;text-decoration:none;font-weight:850}.cta.alt{background:#202a31}.cta.red{background:var(--red)}
.band{background:#162018;color:white;max-width:none}.band>div{max-width:1040px;margin:auto;padding:48px 22px}.band h2{color:white}
.evidence{background:#ecebe4}.official{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-bottom:1px solid #d5d9d3}.official b{font-size:1.05rem}
.notice{padding:18px;border:2px solid var(--gold);background:#fff9df;border-radius:10px}.peace{background:#e9f4e8;border:2px solid var(--green);padding:20px;border-radius:10px}
.moses{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}.moses img{width:100%;border-radius:12px}
footer{background:#0e1418;color:#d8dedb;padding:32px 22px;text-align:center}.small{font-size:.88rem;color:#68727a}
@media(max-width:780px){.hero,.hero.flyer,.grid,.grid.two,.moses{grid-template-columns:1fr}.links{font-size:.85rem}.official{grid-template-columns:1fr}}

/* 2026-08-18 refresh */
nav{max-width:1280px}.hero-art{max-width:1280px;margin:0 auto;background:#0e1418}.hero-art img{display:block;width:100%;height:auto}.video{aspect-ratio:16/9;width:100%;border:0;border-radius:10px}.flyer-download{text-align:center}.flyer-download img{display:block;max-width:760px;width:100%;height:auto;margin:22px auto;border-radius:10px;box-shadow:0 10px 28px #0002}.facebook-callout{display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:center;background:#eef5ff;border:2px solid #174ea6;border-radius:12px;padding:20px;margin:30px auto;max-width:1040px}.fb-mark,.fb-mini{display:inline-grid;place-items:center;background:#1769e0;color:white;border-radius:50%;font-family:Arial,sans-serif;font-weight:900}.fb-mark{width:72px;height:72px;font-size:58px;line-height:1}.fb-mini{width:34px;height:34px;font-size:27px;vertical-align:middle;margin-right:8px}.facebook-callout h2{margin:0 0 8px;color:#173f82}.facebook-callout p{margin:4px 0}.facebook-callout a{font-weight:850}.footer-fb{margin-bottom:14px}.footer-fb a{color:white;text-decoration:none}.contact-form{display:grid;gap:10px;max-width:760px}.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:12px;border:1px solid #aeb7b0;border-radius:6px;background:white}.contact-form textarea{min-height:180px;resize:vertical}.contact-form button{border:0;cursor:pointer;font-size:1rem}.policy-highlight{border-left:6px solid var(--red);background:#fff;padding:20px;border-radius:8px;margin:18px 0}.policy-highlight strong{color:var(--red2)}
@media(max-width:780px){nav{align-items:flex-start;flex-direction:column}.facebook-callout{grid-template-columns:58px 1fr}.fb-mark{width:54px;height:54px;font-size:43px}}

/* 2026-08-18 evidence/glance refresh */
.glance-wrap{overflow-x:auto}.glance{width:100%;border-collapse:collapse;background:white;box-shadow:0 6px 18px #0000000b}.glance th,.glance td{padding:15px 14px;border:1px solid #cfd6cf;vertical-align:top;text-align:left}.glance th{background:#162018;color:white}.glance td:first-child{min-width:170px}.glance tbody td{background:#fff}.glance .retention-row td{background:#fff}.retention-feature{background:#fff;border:4px solid var(--red);border-radius:12px;margin-top:42px;margin-bottom:42px;box-shadow:0 10px 28px #0001}.retention-number{font-size:clamp(3.2rem,9vw,7rem);font-weight:950;line-height:.9;color:var(--red);letter-spacing:-3px;margin-bottom:18px}.retention-feature h2{color:var(--red2)}

/* v2.2 — reliable Moses thumbnail */
.video-link{position:relative;display:block;width:100%;max-width:1100px;margin:18px auto 12px;overflow:hidden;border-radius:12px;background:#0b1622;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.video-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:82px;height:58px;border-radius:14px;background:rgba(200,0,0,.92);color:#fff;font-size:32px;line-height:1;padding-left:5px;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.video-link:hover .video-thumb{filter:brightness(.88)}

/* v2.3 — California ALPR sharing-law sections */
.sharing-law,.sharing-feature{
  border-left:6px solid #1b4f9c;
}
.sharing-number{
  display:inline-block;
  margin-bottom:10px;
  padding:8px 14px;
  border-radius:8px;
  background:#071b3c;
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.04em;
}


/* v2.4 — reusable compact local camera-map component */
.local-map-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:34px;
  align-items:center;
}
.local-map-frame{
  width:100%;
  max-width:440px;
  justify-self:end;
}
.local-map-frame iframe{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border:1px solid #cfd6cf;
  border-radius:12px;
  background:#eef1ed;
  box-shadow:0 8px 24px #0002;
}
.map-fallback{
  margin:8px 0 0;
  font-size:.88rem;
  text-align:center;
}
@media(max-width:780px){
  .local-map-section{grid-template-columns:1fr}
  .local-map-frame{max-width:440px;justify-self:center}
}

/* v2.5 — site-wide accuracy disclaimer and campaign callout */
.accuracy-disclaimer{display:inline-block;margin-top:10px;max-width:1050px;line-height:1.45}
.campaign-line{margin-top:14px;font-size:1.08em}

/* v2.6 — Contact-page campaign callout */
.contact-campaign-callout{
  margin:28px 0;
  padding:22px 24px;
  border-left:5px solid currentColor;
  background:#f7f7f4;
}
.contact-campaign-callout h2{margin-top:0}
.contact-campaign-callout p{margin-bottom:0}

/* v2.7 — centered Action-page campaign callout */
.action-campaign-callout{
  max-width:900px;
  margin:32px auto 24px;
  padding:24px 28px;
  text-align:center;
  background:#f7f7f4;
  border-radius:12px;
}
.action-campaign-callout h2{margin:0 auto 12px}
.action-campaign-callout p{margin:0 auto}

/* v2.8 — Action-page tagline directly below decision-maker heading */
.decision-makers-tagline{
  margin:6px 0 18px;
  text-align:center;
  font-size:.92rem;
  font-style:italic;
  line-height:1.4;
}

/* v2.9 — align Action decision-maker heading and tagline */
.decision-makers-heading{
  text-align:center;
}
.decision-makers-tagline{
  text-align:center;
  font-size:1.02rem;
  font-style:italic;
  font-weight:700;
}

/* v2.10 — homepage campaign line alongside Take Action */
.home-action-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.home-action-tagline{
  max-width:560px;
  font-size:1.05rem;
  font-style:italic;
  line-height:1.35;
}
@media (max-width:700px){
  .home-action-row{gap:12px}
  .home-action-tagline{text-align:center}
}

/* v2.11 — central homepage Take Action pairing */
.home-action-cta{text-align:center}
.center-action-row{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin:20px auto}
.center-action-tagline{max-width:620px;font-size:1.08rem;font-style:italic;line-height:1.4;text-align:center}

/* v2.13 — canonical Action-page decision-maker header treatment */
main .decision-makers-heading,
.decision-makers-heading{
  display:block;
  width:100%;
  margin:0 auto 6px;
  text-align:center !important;
}
main .decision-makers-tagline,
.decision-makers-tagline{
  display:block;
  width:100%;
  margin:0 auto 20px;
  text-align:center !important;
  font-size:1.08rem;
  font-style:italic !important;
  font-weight:700 !important;
  line-height:1.4;
}

/* v2.13 — standard version/revision footer metadata */
.site-version{
  display:block;
  margin-top:8px;
  font-size:.78rem;
  opacity:.75;
  line-height:1.3;
}

.community-row{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1040px;margin:30px auto;padding:26px 28px;background:#eef5ff;border:2px solid #174ea6;border-radius:12px}
.community-row-copy{min-width:0}.community-row-copy h2{margin:0 0 6px;color:#173f82}.community-row-copy p{margin:0}.community-row .cta{flex:0 0 auto;margin:0}
@media(max-width:780px){.community-row{flex-direction:column;text-align:center}.community-row .cta{margin-top:4px}}

.meeting-link{margin:14px auto 22px;text-align:center}

/* Full-width hero for pages without hero artwork */
.hero.no-image {
    grid-template-columns: 1fr;
}
.hero.no-image > div {
    max-width: 1040px;
}

/* Full-width hero for pages without hero artwork */
.hero.no-image {
    grid-template-columns: 1fr;
}
.hero.no-image > div {
    max-width: 1040px;
}

/* v3.3 — localized China 2.0 homepage campaign tagline */
.campaign-break{
  display:block;
  content:"";
  margin-top:18px;
}

.china-campaign-tagline{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:12px auto 24px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:1.08rem;
  font-style:italic;
  font-weight:700;
  line-height:1.4;
}

.china-campaign-tagline strong{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

.china-campaign-tagline em{
  display:inline !important;
}

/* ============================================================
   BEGIN APPROVED COFFEE COMPONENT
   Source: approved DeFlock Livermore implementation
   ============================================================ */
/* ============================================================
   Livermore footer coffee support button
   ============================================================ */

.footer-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto 16px;
}

.footer-actions .footer-fb{
  margin:0;
}

.coffee-support{
  flex:0 0 auto;
  margin:0;
  padding:0;
}

.coffee-support-button{
  position:relative;

  display:block;

  width:94px;
  height:94px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 32% 25%,
      #5e87af 0%,
      #376b9d 28%,
      #235783 58%,
      #153d64 82%,
      #0e2d4d 100%
    );

  border:2px solid rgba(205,215,225,.72);

  box-shadow:
    inset 5px 6px 9px rgba(255,255,255,.24),
    inset -6px -8px 11px rgba(0,0,0,.28),
    0 3px 4px rgba(0,0,0,.24),
    0 8px 13px rgba(0,0,0,.22);

  text-decoration:none;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.coffee-support-button:hover{
  transform:translateY(-2px) scale(1.025);

  box-shadow:
    inset 5px 6px 9px rgba(255,255,255,.27),
    inset -6px -8px 11px rgba(0,0,0,.28),
    0 4px 6px rgba(0,0,0,.25),
    0 10px 16px rgba(0,0,0,.24);
}


/* Entire artwork rotates 22.5 degrees counter-clockwise. */

.coffee-button-art{
  position:absolute;
  inset:7px;

  display:block;

  transform:rotate(-22.5deg);
  transform-origin:center center;
}


/* ------------------------------------------------------------
   Silver coffee cup
   ------------------------------------------------------------ */

.coffee-cup{
  position:absolute;

  left:26px;
  top:25px;

  width:29px;
  height:18px;

  border:2px solid #d4d9df;

  border-radius:2px 2px 8px 8px;

  box-shadow:
    0 1px 1px rgba(0,0,0,.45);
}

.coffee-cup:after{
  content:"";

  position:absolute;

  left:2px;
  bottom:-6px;

  width:29px;
  height:2px;

  background:#d4d9df;

  border-radius:50%;
}

.coffee-handle{
  position:absolute;

  right:-10px;
  top:2px;

  width:10px;
  height:11px;

  border:2px solid #d4d9df;
  border-left:0;

  border-radius:0 8px 8px 0;
}


/* ------------------------------------------------------------
   Steam
   ------------------------------------------------------------ */

.coffee-steam{
  position:absolute;

  width:7px;
  height:13px;

  border-left:2px solid #d4d9df;

  border-radius:50%;

  opacity:.95;
}

.steam-one{
  left:31px;
  top:8px;
  transform:rotate(12deg);
}

.steam-two{
  left:40px;
  top:5px;
  height:15px;
  transform:rotate(-8deg);
}

.steam-three{
  left:49px;
  top:9px;
  height:12px;
  transform:rotate(14deg);
}


/* ------------------------------------------------------------
   Silver button lettering
   ------------------------------------------------------------ */

.coffee-support-text{
  position:absolute;

  left:5px;
  right:5px;
  top:53px;

  color:#d4d9df;

  text-align:center;

  font-size:11px;
  line-height:1.02;
  font-weight:800;
  letter-spacing:.015em;

  text-shadow:
    0 1px 1px rgba(0,0,0,.75),
    0 -1px 0 rgba(255,255,255,.18);
}


/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

.coffee-support-button:focus-visible{
  outline:3px solid #c7a65a;
  outline-offset:4px;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:650px){

  .footer-actions{
    gap:10px;
    padding:0 8px;
  }

  .coffee-support-button{
    width:84px;
    height:84px;
  }

  .coffee-button-art{
    transform:
      scale(.89)
      rotate(-22.5deg);

    transform-origin:center center;
  }

}




/* ============================================================
   Livermore coffee button v4.2
   Larger button; text left of cup; wider Facebook separation
   ============================================================ */

.footer-actions{
  gap:144px;
}


/* 94px x 1.25 = 117.5px */

.coffee-support-button{
  width:118px;
  height:118px;
}


/*
 * Larger artwork area.
 * Entire assembly remains rotated 22.5 degrees CCW.
 */

.coffee-button-art{
  inset:8px;
  transform:rotate(-22.5deg);
}


/* Text now sits LEFT of the coffee cup. */

.coffee-support-text{
  left:3px;
  right:auto;
  top:44px;

  width:47px;

  font-size:12px;
  line-height:1.05;

  text-align:center;
}


/* Move cup to right half of button. */

.coffee-cup{
  left:61px;
  top:43px;

  width:31px;
  height:20px;
}

.coffee-cup:after{
  width:31px;
}


/* Move steam above relocated cup. */

.steam-one{
  left:66px;
  top:24px;
}

.steam-two{
  left:75px;
  top:20px;
}

.steam-three{
  left:84px;
  top:25px;
}


/*
 * Mobile:
 * don't attempt to preserve a literal 1.5-inch gap on a
 * narrow screen. Keep both controls comfortably side-by-side.
 */

@media(max-width:650px){

  .footer-actions{
    gap:24px;
  }

  .coffee-support-button{
    width:106px;
    height:106px;
  }

  .coffee-button-art{
    inset:6px;
    transform:scale(.92) rotate(-22.5deg);
  }

}



/* ============================================================
   Livermore coffee button v4.3
   Larger, thinner, rounded, vertically-centered lettering
   ============================================================ */

.coffee-support-text{
  left:1px;
  right:auto;

  /*
   * Vertically center the two-line label on the left side
   * of the rotated artwork.
   */
  top:50%;
  transform:translateY(-50%);

  width:55px;

  color:#d4d9df;

  font-family:
    "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:15px;
  line-height:1.02;
  font-weight:600;
  letter-spacing:0;

  text-align:center;

  text-shadow:
    0 1px 1px rgba(0,0,0,.65),
    0 -1px 0 rgba(255,255,255,.16);
}


/*
 * Preserve the same visual relationship on mobile.
 */

@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;
    width:55px;
  }

}



/* ============================================================
   Livermore coffee button v4.4
   Taller, thinner lettering
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:16px;
  font-weight:400;

  /*
   * Slight vertical stretch gives the lettering a taller,
   * narrower appearance while preserving its centered position.
   */
  transform:
    translateY(-50%)
    scaleY(1.12);

  line-height:.95;
  letter-spacing:-.25px;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:16px;

    transform:
      translateY(-50%)
      scaleY(1.12);
  }

}



/* ============================================================
   Livermore coffee button v4.5
   Taller letters without increasing width
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  /*
   * Keep nominal width at the previous 15px size.
   * Stretch vertically ONLY.
   */
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  line-height:.92;

  transform:
    translateY(-50%)
    scaleY(1.30);

  transform-origin:center center;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;

    transform:
      translateY(-50%)
      scaleY(1.30);
  }

}



/* ============================================================
   Livermore coffee button v4.6
   Exaggerated tall / narrow lettering
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  line-height:.82;

  transform:
    translateY(-50%)
    scaleY(1.55);

  transform-origin:center center;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;
    line-height:.82;

    transform:
      translateY(-50%)
      scaleY(1.55);
  }

}



/* ============================================================
   Livermore coffee button v4.8
   Center three-line lettering
   ============================================================ */

.coffee-support-text{
  text-align:center;
}



/* ============================================================
   Livermore coffee button v4.9-fixed
   Three-line label with true horizontal centering
   ============================================================ */

.coffee-support-text{
  left:1px;
  right:auto;
  top:50%;

  width:55px;

  display:block;

  color:#d4d9df;

  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  font-size:14px;
  font-weight:300;
  letter-spacing:-.25px;
  line-height:.70;

  text-align:center;

  transform:
    translateY(-50%)
    scaleX(.82)
    scaleY(1.90);

  transform-origin:center center;

  text-shadow:
    0 1px 1px rgba(0,0,0,.65),
    0 -1px 0 rgba(255,255,255,.16);
}

.coffee-support-text > span{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
  white-space:nowrap;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:14px;
    line-height:.70;

    transform:
      translateY(-50%)
      scaleX(.82)
      scaleY(1.90);
  }

}



/* ============================================================
   Livermore coffee button v5.1
   Looser, swirly steam wisps
   ============================================================ */

.coffee-steam{
  width:9px;
  height:19px;

  border:0;
  border-left:2px solid rgba(255,255,255,.92);
  border-top:1.5px solid rgba(255,255,255,.72);

  border-radius:
    70% 35% 65% 40% /
    45% 70% 35% 65%;

  transform-origin:center bottom;
}


/* Left wisp — curls gently left */

.steam-one{
  left:65px;
  top:19px;

  height:18px;

  transform:
    rotate(-19deg)
    skewY(-12deg);
}


/* Center wisp — taller S-like curl */

.steam-two{
  left:74px;
  top:14px;

  width:10px;
  height:23px;

  border-radius:
    35% 75% 30% 70% /
    70% 35% 75% 30%;

  transform:
    rotate(8deg)
    skewY(15deg);
}


/* Right wisp — curls back the other direction */

.steam-three{
  left:84px;
  top:20px;

  width:8px;
  height:17px;

  border-radius:
    75% 30% 70% 35% /
    35% 70% 40% 75%;

  transform:
    rotate(23deg)
    skewY(-15deg);
}


/*
 * Add a small secondary curl to the center wisp.
 * This gives the steam more of a hand-sketched swirl.
 */

.steam-two::after{
  content:"";

  position:absolute;

  left:-5px;
  top:3px;

  width:8px;
  height:10px;

  border-top:1.5px solid rgba(255,255,255,.70);
  border-right:1.5px solid rgba(255,255,255,.70);

  border-radius:60%;

  transform:rotate(-30deg);
}



/* ============================================================
   Livermore coffee button v5.2
   More line spacing + vertical back-and-forth steam
   ============================================================ */


/* ------------------------------------------------------------
   More breathing room between:
       Buy us
         a
       coffee
   ------------------------------------------------------------ */

.coffee-support-text{
  line-height:1.02;

  transform:
    translateY(-50%)
    scaleX(.90)
    scaleY(1.90);
}

@media(max-width:650px){

  .coffee-support-text{
    line-height:1.02;

    transform:
      translateY(-50%)
      scaleX(.90)
      scaleY(1.90);
  }

}


/* ------------------------------------------------------------
   Steam

   Mostly vertical, with a small alternating left/right curve.
   ------------------------------------------------------------ */

.coffee-steam{
  width:8px;
  height:22px;

  border:0;
  border-left:2px solid rgba(255,255,255,.92);
  border-radius:50%;

  transform-origin:center bottom;
}


/*
 * Each steam line gets a second curved segment.
 * Together the two segments make a shallow vertical S.
 */

.coffee-steam::after{
  content:"";

  position:absolute;

  width:7px;
  height:12px;

  left:-7px;
  top:-7px;

  border:0;
  border-right:2px solid rgba(255,255,255,.82);
  border-radius:50%;
}


/* Left steam */

.steam-one{
  left:66px;
  top:16px;

  height:20px;

  transform:rotate(3deg);
}

.steam-one::after{
  transform:rotate(-5deg);
}


/* Center steam — slightly taller */

.steam-two{
  left:76px;
  top:10px;

  width:9px;
  height:26px;

  transform:rotate(-2deg);
}

.steam-two::after{
  width:8px;
  height:14px;

  left:-8px;
  top:-8px;

  transform:rotate(4deg);
}


/* Right steam */

.steam-three{
  left:87px;
  top:16px;

  height:20px;

  transform:rotate(3deg);
}

.steam-three::after{
  transform:rotate(-5deg);
}



/* ============================================================
   Livermore coffee button v5.3
   Shift complete text block slightly right
   ============================================================ */

.coffee-support-text{
  left:5px;
}



/* ============================================================
   Livermore coffee button v5.5
   Subtle periodic shimmer
   ============================================================ */

.coffee-support-button{
  overflow:hidden;
}

/*
 * Soft diagonal reflection.
 * Long animation duration keeps this from looking flashy.
 */
.coffee-support-button::after{
  content:"";

  position:absolute;
  z-index:20;

  top:-35%;
  left:-65%;

  width:28%;
  height:170%;

  pointer-events:none;

  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.04) 75%,
    rgba(255,255,255,0) 100%
  );

  transform:
    rotate(10deg)
    translateX(0);

  animation:
    coffee-button-shimmer 6.5s ease-in-out infinite;
}


/*
 * Most of each animation cycle is deliberately idle.
 * The shimmer makes one quick, gentle pass.
 */

@keyframes coffee-button-shimmer{

  0%,
  68%{
    left:-65%;
    opacity:0;
  }

  72%{
    opacity:.45;
  }

  82%{
    opacity:.75;
  }

  91%{
    left:135%;
    opacity:.35;
  }

  100%{
    left:135%;
    opacity:0;
  }
}


/*
 * Respect reduced-motion preferences.
 */

@media(prefers-reduced-motion:reduce){

  .coffee-support-button::after{
    animation:none;
    display:none;
  }

}



/* ============================================================
   Support page — 2X finished coffee button
   ============================================================ */

.support-page-coffee{
  position:relative;

  /*
   * Finished button is approximately 100px.
   * Give the 2X rendering its own 220px square.
   */
  width:220px;
  height:220px;

  margin:32px auto 38px;
}

.support-page-coffee .coffee-support-button{
  position:absolute;

  left:50%;
  top:50%;

  /*
   * Scale the COMPLETE finished component.
   * This preserves every internal proportion exactly.
   */
  transform:
    translate(-50%,-50%)
    scale(2);

  transform-origin:center center;
}

.support-page-coffee .coffee-support-button:hover{
  transform:
    translate(-50%,-50%)
    scale(2.04);
}


/* ============================================================
   Coffee-button shimmer
   ============================================================ */

.coffee-support-button{
  overflow:hidden;
  isolation:isolate;
}


/*
 * The shimmer sits over the complete face of the button.
 */

.coffee-support-button::after{
  content:"";

  position:absolute;

  z-index:999;

  top:-35%;
  left:-55%;

  width:20px;
  height:175%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.12) 80%,
    rgba(255,255,255,0) 100%
  );

  filter:blur(1px);

  transform:
    rotate(18deg)
    translateX(0);

  animation:
    deflock-coffee-shimmer 6s ease-in-out infinite;
}


/*
 * Pass immediately at the beginning of the cycle,
 * then remain quiet until the next cycle.
 */

@keyframes deflock-coffee-shimmer{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  3%{
    opacity:.8;
  }

  15%{
    opacity:.9;
  }

  25%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}


@media(prefers-reduced-motion:reduce){

  .coffee-support-button::after{
    animation:none;
  }

}



/* ============================================================
   Coffee button — slower shimmer interval
   ============================================================ */

.coffee-support-button::after{
  animation-duration:12s;
}



/* ============================================================
   Livermore coffee button v5.8
   Original shimmer speed, twice the frequency
   ============================================================ */

.coffee-support-button::after{
  animation:
    deflock-coffee-shimmer-v58 3s ease-in-out infinite;
}


/*
 * Original:
 *   6-second cycle
 *   sweep completed at 25% = 1.5 seconds
 *
 * New:
 *   3-second cycle
 *   sweep completed at 50% = 1.5 seconds
 *
 * Therefore the visible sweep moves at the same speed,
 * but begins twice as often.
 */

@keyframes deflock-coffee-shimmer-v58{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  6%{
    opacity:.8;
  }

  30%{
    opacity:.9;
  }

  50%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}



/* ============================================================
   Livermore coffee button v5.9
   2-second shimmer cycle + text 4px toward cup
   ============================================================ */


/* Move Buy us / a / coffee together 4px toward the cup. */

.coffee-support-text{
  left:18px !important;
}


/*
 * 2-second cycle.
 *
 * Preserve approximately the same 1.5-second sweep:
 * 75% of 2 seconds = 1.5 seconds.
 */

.coffee-support-button::after{
  animation:
    deflock-coffee-shimmer-v59 2s ease-in-out infinite;
}


@keyframes deflock-coffee-shimmer-v59{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  4%{
    opacity:.8;
  }

  45%{
    opacity:.9;
  }

  75%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}



/* ============================================================
   Livermore coffee button v6.0
   Restore previous text position
   ============================================================ */

.coffee-support-text{
  left:14px !important;
}

/* ============================================================
   END APPROVED COFFEE COMPONENT
   ============================================================ */

/* BEGIN BASTARD PROJECT FOOTER */
.bastard-project {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .82rem;
    line-height: 1.4;
}

.bastard-project a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    opacity: .88;
}

.bastard-project a:hover,
.bastard-project a:focus {
    opacity: 1;
    text-decoration: underline;
}

.bastard-project strong {
    display: block;
    font-size: .94rem;
}

.bastard-project span {
    display: block;
}
/* END BASTARD PROJECT FOOTER */

/* BEGIN BASTARD COMPACT FOOTER */
.bastard-project {
    margin-top: 4px !important;
    padding-top: 0 !important;
}

.bastard-project a {
    display: inline !important;
}

.bastard-project strong,
.bastard-project span,
.bastard-project em {
    display: inline !important;
}

.bastard-project + .site-revision {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}
/* END BASTARD COMPACT FOOTER */

/* BEGIN FINAL CANONICAL FOOTER */
.footer-line {
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.45;
}
.accuracy-disclaimer.footer-line {
    display:block !important;
    margin:0 !important;
    max-width:none !important;
}
.peaceful-lawful.footer-line {
    margin:0 !important;
}
.bastard-project.footer-line {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}
.bastard-project.footer-line a,
.bastard-project.footer-line strong,
.bastard-project.footer-line em,
.bastard-project.footer-line span {
    display:inline !important;
}
.site-revision.footer-line {
    margin:0 !important;
    padding:0 !important;
}
/* END FINAL CANONICAL FOOTER */


/* BEGIN ALPR DENSITY FEATURE */
.alpr-density-feature {
    display: block;
    width: auto;
    max-width: 1040px;
    margin: 18px auto 8px;
    padding: 0 22px;
    box-sizing: border-box;
    font-size: 1.12rem;
    line-height: 1.55;
    font-weight: 800;
    font-style: italic;
    white-space: normal;
    overflow-wrap: normal;
}

@media(max-width:780px) {
    .alpr-density-feature {
        width: auto;
        max-width: 100%;
        padding: 0 18px;
    }
}
/* END ALPR DENSITY FEATURE */


/* BEGIN ALPR DENSITY SOURCE ALIGNMENT */
.alpr-density-source {
    width: calc(100% - 44px);
    max-width: 996px;
    margin: 12px auto 18px;
    box-sizing: border-box;
}

@media(max-width:780px) {
    .alpr-density-source {
        width: calc(100% - 36px);
        max-width: none;
    }
}
/* END ALPR DENSITY SOURCE ALIGNMENT */

/* Pleasanton canonical Main Street hero artwork */
.pleasanton-hero-art {
  width: 100%;
}

.pleasanton-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 55px #0004;
}

@media (max-width:780px) {
  .pleasanton-hero-art {
    margin-top: 10px;
  }
}

/* Pleasanton canonical full-width banner */
.pleasanton-banner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  background: #0e1418;
}

.pleasanton-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Back-to-county control over Pleasanton banner */
.pleasanton-back-overlay {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: max(18px, calc((100% - 1280px) / 2 + 18px));
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 7px;
  background: rgba(14,20,24,.82);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}

.pleasanton-back-overlay:hover {
  background: rgba(14,20,24,.95);
  color: #fff;
}

@media (max-width:780px) {
  .pleasanton-back-overlay {
    top: 10px;
    left: 10px;
    padding: 8px 11px;
    font-size: .82rem;
  }
}

/* Pleasanton banner — align outer edges with 1280px navigation */
.pleasanton-banner {
  width: calc(100% - 44px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.pleasanton-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Banner is already constrained to the nav width, so the back button
 * is positioned relative to the banner itself.
 */
.pleasanton-back-overlay {
  left: 18px;
}

@media (max-width:780px) {
  .pleasanton-banner {
    width: calc(100% - 20px);
  }

  .pleasanton-back-overlay {
    left: 10px;
  }
}

/* Pleasanton hierarchical back controls */
.pleasanton-back-stack {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.2;
}

.pleasanton-back-stack .pleasanton-back-overlay,
.pleasanton-back-stack .pleasanton-bayarea-overlay {
  position: static;
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 7px;
  background: rgba(14,20,24,.82);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}

.pleasanton-back-stack .pleasanton-back-overlay:hover,
.pleasanton-back-stack .pleasanton-bayarea-overlay:hover {
  background: rgba(14,20,24,.95);
  color: #fff;
}

@media (max-width:780px) {
  .pleasanton-back-stack {
    top: 10px;
    left: 10px;
    gap: 6px;
  }

  .pleasanton-back-stack .pleasanton-back-overlay,
  .pleasanton-back-stack .pleasanton-bayarea-overlay {
    padding: 7px 10px;
    font-size: .76rem;
  }
}

/* Pleasanton banner navigation — compact side-by-side controls */
.pleasanton-back-stack {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

@media (max-width:780px) {
  .pleasanton-back-stack {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .pleasanton-back-stack .pleasanton-back-overlay,
  .pleasanton-back-stack .pleasanton-bayarea-overlay {
    padding: 6px 8px;
    font-size: .70rem;
    white-space: nowrap;
  }
}

/* Pleasanton banner — jurisdiction jumpers opposite back controls */
.pleasanton-banner-jumpers {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.pleasanton-banner-select {
  height: 42px;
  min-width: 190px;
  max-width: 220px;
  box-sizing: border-box;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 7px;
  background: rgba(14,20,24,.82);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
}

.pleasanton-banner-select option {
  background: #11181d;
  color: #fff;
}

@media (max-width: 1050px) {
  .pleasanton-banner-jumpers {
    top: 68px;
  }
}

@media (max-width: 780px) {
  .pleasanton-banner-jumpers {
    top: 54px;
    left: 10px;
    right: 10px;
    gap: 5px;
  }

  .pleasanton-banner-select {
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
    height: 34px;
    padding: 0 22px 0 7px;
    font-size: .66rem;
  }
}