/* ==========================================================================
   Vote John Bruce — Melbourne City Council, District 4
   Brand layer over Bootstrap 5.3.8

   Design direction is taken directly from the yard-sign draft:
     - deep navy field with a white keyline frame
     - ultra-condensed heavy display type for the name
     - seafoam eyebrow type, letterspaced, flanked by rules and stars
     - seafoam rules, a layered wave mark, and a seafoam disclaimer band

   TWO COLOURS ONLY, plus white:
     navy #011D4B · seafoam #76C6C0 · white #FDFDFD

   The mid-teal that used to sit between them has been removed. Everything
   that reads as a further shade is a tint of navy or of seafoam. See the
   token block below for the one accessibility rule that governs the system.

   Load order matters: bootstrap.min.css first, then this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------
     TWO INKS AND THE PAPER

     The entire site is built from navy and seafoam, plus white. Anything
     that looks like a third colour is a tint of one of the two, the way a
     two-colour print job screens its inks. That is the right mental model
     here, because this identity started life as a printed yard sign.

     One measurement governs the whole system:

         seafoam on white  =  1.95:1

     That is nowhere near the 4.5:1 that body text needs, or even the 3:1
     that a control or meaningful graphic needs. So the rule is absolute:

         On a light background, seafoam is a FILL or a DECORATION.
         It never carries text, a link, a focus ring, or a state.

     Navy does the reading. Seafoam does the pointing. Where seafoam needs
     to carry meaning, it becomes the background and navy sits on top of it
     (navy on seafoam is 8.3:1, which is comfortable).
     ------------------------------------------------------------------ */

  --jb-navy:        #011D4B;
  --jb-sea:         #76C6C0;
  --jb-white:       #FDFDFD;

  /* Tints of navy over white: text hierarchy, rules, borders */
  --jb-ink:         var(--jb-navy);
  --jb-ink-mute:    #485C7D;              /* navy at 72%  ->  6.8:1 on white */
  --jb-ink-faint:   #61728F;              /* navy at 62%  ->  4.9:1, placeholders */
  --jb-navy-soft:   #20385F;              /* navy at 88%, a lifted navy surface */
  --jb-line:        rgba(1, 29, 75, 0.18);
  --jb-line-soft:   rgba(1, 29, 75, 0.10);
  --jb-shadow:      rgba(1, 29, 75, 0.14);

  /* Tints of seafoam over white: section grounds */
  --jb-wash:        #E7F4F3;              /* seafoam at 16% */
  --jb-wash-2:      #D7EEEC;              /* seafoam at 28% */

  /* Older names, kept so every existing rule keeps working, now pointed at
     the two-ink palette. The teal that used to sit between navy and seafoam
     is gone; those roles collapse onto seafoam (as a fill) or navy (as ink). */
  --jb-navy-deep:   var(--jb-navy);
  --jb-teal:        var(--jb-sea);
  --jb-teal-band:   var(--jb-sea);
  --jb-teal-deep:   var(--jb-navy);
  --jb-sea-soft:    var(--jb-white);
  --jb-paper:       var(--jb-wash);
  --jb-paper-2:     var(--jb-wash-2);

  /* Type */
  --jb-font-display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --jb-font-head:    "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jb-font-body:    "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --jb-section-y:   clamp(3.5rem, 7vw, 6.5rem);
  --jb-radius:      4px;       /* the sign is squared off — keep corners tight */
  --jb-radius-lg:   6px;

  /* Height of the sticky site header. Anything that has to sit clear of it
     reads this: the sticky platform sidebar and the scroll offset for in-page
     anchors.

     The header is not a fixed height. It is ~70px on a wide screen, but the
     navbar wraps to two lines between 992px and ~1200px and grows to ~92px.
     6rem (96px) clears the tallest case on its own, so the layout is correct
     with CSS alone. site.js then measures the header and overwrites this with
     the real value, which keeps the gap even at every width. */
  --jb-header-h:    6rem;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--jb-font-body);
  --bs-body-color: var(--jb-ink);
  --bs-body-bg: var(--jb-white);
  --bs-border-color: var(--jb-line);
  --bs-emphasis-color: var(--jb-navy);

  /* Bootstrap 5.3 paints links from the *-rgb custom properties
     (`color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1))`),
     so overriding --bs-link-color alone does nothing and links fall back to
     Bootstrap blue. These must be raw "r, g, b" triplets.

     Links on light backgrounds are navy, not seafoam. Seafoam link text on
     white would be illegible, so the hover cue is a seafoam highlight behind
     the navy text instead of a colour change (see .prose a further down). */
  --bs-link-color-rgb: 1, 29, 75;         /* navy #011D4B */
  --bs-link-hover-color-rgb: 1, 29, 75;
  --bs-link-color: var(--jb-navy);
  --bs-link-hover-color: var(--jb-navy);

  /* Bootstrap ships red/green/amber for form validation and muted greys for
     secondary text. Those are extra colours the palette does not allow, so
     they are folded back onto navy. Errors stay obvious through weight, an
     icon-free heavy border and the message text itself, never colour alone. */
  --bs-secondary-color: var(--jb-ink-mute);
  --bs-tertiary-color: var(--jb-ink-faint);
  --bs-form-invalid-color: var(--jb-navy);
  --bs-form-invalid-border-color: var(--jb-navy);
  --bs-form-valid-color: var(--jb-navy);
  --bs-form-valid-border-color: var(--jb-line);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

/* The navbar carries data-bs-theme="dark", and Bootstrap's dark theme swaps in
   its own link blue (#6EA8FE) plus grey borders. Left alone that blue is
   inherited by the brand lockup and by any plain link added to the header or
   footer later. Point the dark theme at the two inks as well. */
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 118, 198, 192;        /* seafoam */
  --bs-link-hover-color-rgb: 253, 253, 253;  /* white */
  --bs-link-color: var(--jb-sea);
  --bs-link-hover-color: var(--jb-white);
  --bs-body-color: rgba(253, 253, 253, 0.86);
  --bs-emphasis-color: var(--jb-white);
  --bs-border-color: rgba(253, 253, 253, 0.2);
  --bs-secondary-color: rgba(253, 253, 253, 0.7);
}

/* The honeypot sits off screen, so it is never seen, but it should not carry
   user-agent greys into the page either. */
.hp-field input { color: var(--jb-navy); border: 1px solid var(--jb-line); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--jb-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--jb-ink);
  background: var(--jb-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--jb-header-h) + 2rem); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jb-font-head);
  font-weight: 700;
  color: var(--jb-navy);
  letter-spacing: -0.005em;
  line-height: 1.18;
}

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

a { text-underline-offset: 0.18em; }

strong, b { font-weight: 700; color: var(--jb-navy); }

::selection { background: var(--jb-sea); color: var(--jb-navy); }

/* Visible focus ring everywhere.

   Navy by default, because a focus indicator is a meaningful control cue and
   has to clear 3:1 against its background. Seafoam on white is 1.95:1 and
   would fail, so seafoam is used only where the ring sits on navy. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid var(--jb-navy);
  outline-offset: 2px;
  box-shadow: none;
}

/* On navy grounds the ring flips to seafoam, which is 8.3:1 there */
.on-navy a:focus-visible,
.on-navy button:focus-visible,
.on-navy .btn:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .btn:focus-visible,
.site-footer a:focus-visible,
.site-footer .btn:focus-visible,
.photo-band a:focus-visible,
.pledge a:focus-visible,
.btn-sun:focus-visible,
.sms-disclosure a:focus-visible,
.footer-legal a:focus-visible { outline-color: var(--jb-sea); }

/* The seafoam disclaimer band is a light ground, so the ring stays navy */
.disclaimer-band a:focus-visible { outline-color: var(--jb-navy); }

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--jb-sea);
  color: var(--jb-navy);
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: var(--jb-radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Display type — the yard-sign lockup
   -------------------------------------------------------------------------- */

.display-sign {
  font-family: var(--jb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--jb-white);
  margin: 0;
}

.display-sign--hero  { font-size: clamp(3.5rem, 11vw, 8.5rem); }
.display-sign--page  { font-size: clamp(2.5rem, 7vw, 5rem); }
.display-sign--ink   { color: var(--jb-navy); }

/* "MELBOURNE CITY COUNCIL" — wide, bold, letterspaced */
.sign-office {
  font-family: var(--jb-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.95rem, 2.1vw, 1.6rem);
  color: var(--jb-white);
  margin: 0;
}
.sign-district {
  font-family: var(--jb-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.85rem, 1.8vw, 1.35rem);
  color: var(--jb-sea);
  margin: 0;
}

/* Section headings */
.section-title {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  letter-spacing: -0.015em;
  color: var(--jb-navy);
  margin: 0 0 0.75rem;
}
.on-navy .section-title { color: var(--jb-white); }

/* The one-line promise that sits under each platform heading */
.section-promise {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.35;
  color: var(--jb-teal-deep);
  margin: 0 0 1.25rem;
}
.on-navy .section-promise { color: var(--jb-sea); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--jb-ink);
}
.on-navy .lede { color: rgba(253, 253, 253, 0.88); }

/* --------------------------------------------------------------------------
   4. Eyebrow — the "★ ——— VOTE ——— ★" treatment from the sign
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jb-teal-deep);
}
/* The text is navy so it stays readable, but the flanking rules are seafoam.
   That keeps the sign's accent on light sections without asking seafoam to
   carry anything a reader has to decipher. */
.eyebrow::before,
.eyebrow::after {
  content: "";
  flex: 0 1 3.5rem;
  height: 2px;
  background: var(--jb-sea);
  opacity: 1;
}
.on-navy .eyebrow { color: var(--jb-sea); }
.on-navy .eyebrow::before,
.on-navy .eyebrow::after { background: currentColor; opacity: 0.75; }

/* Left-aligned variant */
.eyebrow--start { justify-content: flex-start; }
.eyebrow--start::before { display: none; }
.eyebrow--start::after { flex-basis: 2.5rem; }

/* Star variant used in the hero, mirroring the sign */
.eyebrow__star { flex: none; width: 0.85rem; height: 0.85rem; fill: currentColor; }
.eyebrow--star::before,
.eyebrow--star::after { flex-basis: 2.75rem; }

/* Standalone teal rule, as under the name on the sign */
.rule-teal {
  height: 3px;
  width: 100%;
  max-width: 22rem;
  background: var(--jb-teal);
  border: 0;
  opacity: 1;
  margin: 1.25rem 0;
}
.on-navy .rule-teal { background: var(--jb-sea); }
.rule-teal--center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */

.section { padding-block: var(--jb-section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.bg-navy  { background-color: var(--jb-navy); }
.bg-navy-deep { background-color: var(--jb-navy-deep); }
.bg-paper { background-color: var(--jb-paper); }
.bg-paper-2 { background-color: var(--jb-paper-2); }

.on-navy { color: rgba(253, 253, 253, 0.86); }
.on-navy h1, .on-navy h2, .on-navy h3,
.on-navy h4, .on-navy h5, .on-navy h6 { color: var(--jb-white); }
.on-navy strong, .on-navy b { color: var(--jb-white); }
/* :not(.btn) is load-bearing. Without it this rule (0,1,1) outranks .btn-sun
   (0,1,0) and paints seafoam text onto seafoam buttons, making every CTA
   inside a navy section unreadable. Buttons carry their own colours. */
.on-navy a:not(.btn) { color: var(--jb-sea); }
.on-navy a:not(.btn):hover { color: var(--jb-sea-soft); }

/* The white keyline frame that borders the yard sign */
.sign-frame {
  position: relative;
  border: 2px solid rgba(253, 253, 253, 0.55);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.sign-frame--ink { border-color: rgba(1, 29, 75, 0.22); }

/* --------------------------------------------------------------------------
   6. Wave divider — the sign's water motif, reused between sections
   -------------------------------------------------------------------------- */

.wave-divider {
  display: block;
  width: 100%;
  height: clamp(48px, 6.5vw, 104px);
  background: var(--wd-from, var(--jb-navy));
  margin: 0;
}
.wave-divider .wd-teal  { fill: var(--jb-teal); }
.wave-divider .wd-to    { fill: var(--wd-to, var(--jb-white)); }
.wave-divider .wd-crest {
  fill: none;
  stroke: var(--wd-crest, var(--jb-white));
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}

/* Direction modifiers */
.wave--navy-to-white  { --wd-from: var(--jb-navy);      --wd-to: var(--jb-white); }
.wave--navy-to-paper  { --wd-from: var(--jb-navy);      --wd-to: var(--jb-paper); }
.wave--white-to-navy  { --wd-from: var(--jb-white);     --wd-to: var(--jb-navy);      --wd-crest: var(--jb-white); }
.wave--paper-to-navy  { --wd-from: var(--jb-paper);     --wd-to: var(--jb-navy);      --wd-crest: var(--jb-white); }
.wave--white-to-paper { --wd-from: var(--jb-white);     --wd-to: var(--jb-paper);     --wd-crest: var(--jb-white); }
.wave--paper-to-white { --wd-from: var(--jb-paper);     --wd-to: var(--jb-white);     --wd-crest: var(--jb-white); }
.wave--deep-to-navy   { --wd-from: var(--jb-navy-deep); --wd-to: var(--jb-navy);      --wd-crest: var(--jb-white); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--jb-radius);
  font-family: var(--jb-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  padding: 0.85rem 1.6rem;
  border-width: 2px;
  border-radius: var(--jb-radius);
  transition: background-color 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-lg { font-size: 0.95rem; padding: 1rem 2rem; }
.btn-sm { font-size: 0.78rem; padding: 0.6rem 1.1rem; }

/* Seafoam — primary call to action on navy */
.btn-sun {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
}
.btn-sun:hover, .btn-sun:focus {
  background: var(--jb-sea-soft);
  border-color: var(--jb-sea-soft);
  color: var(--jb-navy);
}

/* Navy — primary call to action on light */
.btn-navy {
  background: var(--jb-navy);
  border-color: var(--jb-navy);
  color: var(--jb-white);
}
/* Hovering the primary button flips the two inks rather than reaching for a
   third shade. Navy-on-seafoam is 8.3:1, so it stays perfectly readable. */
.btn-navy:hover, .btn-navy:focus {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
}

/* Seafoam fill on a light ground. Navy text, never white. */
.btn-teal {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
}
.btn-teal:hover, .btn-teal:focus {
  background: var(--jb-navy);
  border-color: var(--jb-navy);
  color: var(--jb-white);
}

.btn-outline-sun {
  background: transparent;
  border-color: var(--jb-sea);
  color: var(--jb-sea);
}
.btn-outline-sun:hover, .btn-outline-sun:focus {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
}

.btn-outline-navy {
  background: transparent;
  border-color: var(--jb-navy);
  color: var(--jb-navy);
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
  background: var(--jb-navy);
  border-color: var(--jb-navy);
  color: var(--jb-white);
}

/* Quiet text link with an arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jb-teal-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.link-more:hover { color: var(--jb-navy); border-bottom-color: var(--jb-teal); }
.link-more::after { content: "\2192"; transition: transform 0.16s ease; }
.link-more:hover::after { transform: translateX(3px); }
.on-navy .link-more { color: var(--jb-sea); }
.on-navy .link-more:hover { color: var(--jb-white); border-bottom-color: var(--jb-sea); }

/* --------------------------------------------------------------------------
   8. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--jb-navy);
  border-bottom: 3px solid var(--jb-teal);
}
.site-header .navbar { padding-block: 0.75rem; }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand-lockup__mark { width: 42px; height: 42px; flex: none; }
.brand-lockup__name {
  font-family: var(--jb-font-display);
  font-size: 1.5rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--jb-white);
  display: block;
}
.brand-lockup__office {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jb-sea);
  display: block;
  margin-top: 2px;
}

.site-nav .nav-link {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 253, 253, 0.82);
  padding: 0.6rem 0.9rem;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus { color: var(--jb-white); border-bottom-color: var(--jb-sea); }
.site-nav .nav-link.active { color: var(--jb-sea); border-bottom-color: var(--jb-sea); }

.navbar-toggler {
  border: 2px solid rgba(253, 253, 253, 0.5);
  border-radius: var(--jb-radius);
  padding: 0.4rem 0.6rem;
}

@media (max-width: 991.98px) {
  .site-nav { padding-block: 0.75rem; }
  .site-nav .nav-link {
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding: 0.6rem 0 0.6rem 0.85rem;
  }
  .site-nav .nav-link:hover,
  .site-nav .nav-link.active { border-left-color: var(--jb-sea); }
  .site-header .btn { margin-top: 0.75rem; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--jb-navy);
  padding-block: clamp(2.75rem, 6vw, 5rem);
  overflow: hidden;
}
/* Faint seafoam glow behind the lockup */
.hero::before {
  content: "";
  position: absolute;
  inset: auto auto -35% -12%;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle, rgba(118, 198, 192, 0.16) 0%, rgba(118, 198, 192, 0) 62%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__tagline {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.45;
  color: rgba(253, 253, 253, 0.9);
  margin: 1.5rem 0 0;
  max-width: 34rem;
}

/* Framed portrait, echoing the sign's keyline */
.hero__portrait { position: relative; padding: 0.9rem 0.9rem 0 0; }
.hero__portrait::before {
  content: "";
  position: absolute;
  inset: 0 0 2.5rem 2.5rem;
  border: 2px solid var(--jb-sea);
  opacity: 0.7;
}
.hero__portrait img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--jb-white);
  border-radius: 2px;
}

/* Compact page banner used on interior pages */
.page-head {
  background: var(--jb-navy);
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(118, 198, 192, 0.14) 0%, rgba(118, 198, 192, 0) 62%);
  pointer-events: none;
}
.page-head > * { position: relative; }

/* --------------------------------------------------------------------------
   10. Quote band
   -------------------------------------------------------------------------- */

/* Full seafoam block with navy type. With only two inks the site needs one
   strong seafoam moment in the light sections, and the campaign's thesis line
   is the right place for it. */
.quote-band {
  background: var(--jb-sea);
  border-top: 0;
  border-bottom: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.quote-band__text, .quote-band__attr { color: var(--jb-navy); }
.quote-band__text {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2.05rem);
  line-height: 1.32;
  color: var(--jb-navy);
  margin: 0;
  text-wrap: balance;
}
.quote-band__attr {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jb-teal-deep);
  margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   11. Issue cards (home) + platform planks
   -------------------------------------------------------------------------- */

.issue-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--jb-white);
  border: 1px solid var(--jb-line);
  border-top: 5px solid var(--jb-teal);
  border-radius: var(--jb-radius);
  padding: 1.75rem 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.issue-card:hover,
.issue-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(1, 29, 75, 0.13);
  border-top-color: var(--jb-navy);
  color: inherit;
}
/* Seafoam cannot be the ink on a white card, so it becomes the ground and the
   numeral is knocked out of it in navy. Reads as a printed block, and the
   pairing measures 8.3:1. */
.issue-card__num {
  font-family: var(--jb-font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--jb-navy);
  background: var(--jb-sea);
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.6rem 0.22rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
}
.issue-card__title {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--jb-navy);
  margin: 0 0 0.5rem;
}
.issue-card__promise {
  font-size: 1rem;
  color: var(--jb-teal-deep);
  font-weight: 600;
  margin: 0 0 1rem;
}
.issue-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--jb-ink-mute);
}
.issue-card__list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.issue-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--jb-teal);
  border-radius: 50%;
}
.issue-card .link-more { margin-top: auto; align-self: flex-start; }

/* Standalone variant.

   The base .issue-card is height:100% so a row of cards lines up along the
   bottom. That rule misfires when a single card sits in a column which a
   taller neighbour has already stretched: 100% resolves to the full column
   height, not the leftover space, and the card overruns the section below it.
   This modifier lets the card size to its own content instead, and drops the
   hover lift since a static card is not clickable. */
.issue-card--static {
  height: auto;
  cursor: default;
}
.issue-card--static:hover,
.issue-card--static:focus-within {
  transform: none;
  box-shadow: none;
  border-top-color: var(--jb-teal);
}

/* Numbered platform section header */
.plank-group { scroll-margin-top: calc(var(--jb-header-h) + 3rem); }

.plank-group__num {
  font-family: var(--jb-font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.85;
  color: var(--jb-sea);
  display: block;
}
/* Same treatment on the platform page: a seafoam block, navy numeral */
.plank-group__num--ink {
  color: var(--jb-navy);
  background: var(--jb-sea);
  display: inline-block;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1;
  padding: 0.32rem 0.65rem 0.24rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

/* An individual plank */
.plank {
  border-left: 4px solid var(--jb-teal);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin-bottom: 2.25rem;
}
.plank:last-child { margin-bottom: 0; }
.plank__title {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  color: var(--jb-navy);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.plank__body { margin: 0; color: var(--jb-ink); }
/* Attribution under a statement set in a .plank, e.g. the candidate responding
   to an endorsement. Same uppercase voice as .quote-band__attr. */
.plank__attr {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jb-ink-mute);
  margin: 0.85rem 0 0;
}
.on-navy .plank__attr { color: rgba(253, 253, 253, 0.72); }
.on-navy .plank { border-left-color: var(--jb-sea); }
.on-navy .plank__title { color: var(--jb-white); }
.on-navy .plank__body { color: rgba(253, 253, 253, 0.86); }

/* Sticky in-page nav on the platform page.

   The offset has to clear the sticky site header, which sits above this at
   z-index 1020. A bare `top: 1.5rem` pins the nav underneath it and swallows
   the first item or two whole. */
.platform-nav {
  position: sticky;
  top: calc(var(--jb-header-h) + 1.5rem);
  border-left: 2px solid var(--jb-line);
  padding-left: 1.1rem;
}
.platform-nav .nav-link {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--jb-ink-mute);
  padding: 0.5rem 0;
  border-left: 3px solid transparent;
  margin-left: -1.2rem;
  padding-left: 1.2rem;
}
.platform-nav .nav-link:hover { color: var(--jb-navy); }
.platform-nav .nav-link.active {
  color: var(--jb-navy);
  font-weight: 700;
  border-left-color: var(--jb-navy);   /* an active-state marker needs 3:1 */
}

/* --------------------------------------------------------------------------
   12. Photo bands
   -------------------------------------------------------------------------- */

.photo-band {
  position: relative;
  background-color: var(--jb-navy);
  background-size: cover;
  background-position: center;
  padding-block: clamp(4rem, 10vw, 8rem);
  isolation: isolate;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              rgba(1, 20, 58, 0.93) 0%,
              rgba(1, 29, 75, 0.82) 45%,
              rgba(1, 29, 75, 0.55) 100%);
}
.photo-band--lagoon { background-image: url("../img/lagoon-band.jpg"); }

.photo-band__quote {
  font-family: var(--jb-font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 0.98;
  color: var(--jb-white);
  margin: 0 0 1.25rem;
  max-width: 18ch;
}

/* Framed photo used in body content */
.framed-photo { position: relative; padding: 0 0.9rem 0.9rem 0; }
.framed-photo::before {
  content: "";
  position: absolute;
  inset: 2rem 0 0 2rem;
  border: 2px solid var(--jb-teal);
  opacity: 0.55;
}
.framed-photo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.framed-photo--navy::before { border-color: var(--jb-sea); opacity: 0.75; }

.photo-caption {
  font-size: 0.86rem;
  color: var(--jb-ink-mute);
  margin-top: 0.85rem;
  font-style: italic;
}
.on-navy .photo-caption { color: rgba(253, 253, 253, 0.7); }

/* --------------------------------------------------------------------------
   13. Stats
   -------------------------------------------------------------------------- */

.stat {
  text-align: center;
  padding: 1.25rem 0.75rem;
  border-top: 3px solid var(--jb-teal);
  height: 100%;
}
.stat__num {
  font-family: var(--jb-font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.1rem);
  line-height: 1;
  color: var(--jb-navy);
  display: block;
  margin-bottom: 0.4rem;
}
.stat__label {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--jb-ink-mute);
  display: block;
}
.on-navy .stat { border-top-color: var(--jb-sea); }
.on-navy .stat__num { color: var(--jb-sea); }
.on-navy .stat__label { color: rgba(253, 253, 253, 0.8); }

/* Pledge callout — the salary-donation promise */
.pledge {
  background: var(--jb-navy);
  color: var(--jb-white);
  border-left: 6px solid var(--jb-sea);
  border-radius: var(--jb-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pledge__text {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  margin: 0;
  color: var(--jb-white);
}

/* --------------------------------------------------------------------------
   14. Endorsements
   -------------------------------------------------------------------------- */

.endorsement-card {
  background: var(--jb-white);
  border: 1px solid var(--jb-line);
  border-radius: var(--jb-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.endorsement-card__media {
  background: var(--jb-paper-2);
  padding: 1.25rem;
  display: flex;
  justify-content: center;
}
.endorsement-card__media img {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(1, 29, 75, 0.12);
  border-radius: 2px;
}
/* Home page shows two cards side by side, and their artwork is different shapes
   (a portrait certificate next to a square social graphic). Capping the height
   rather than the width makes both occupy the same band, so the card bodies
   start on the same line. */
.endorsement-card__media--cap img { max-height: 340px; width: auto; }

.endorsement-card__body { padding: 1.6rem; flex: 1; }
.endorsement-card__org {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--jb-navy);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.badge-endorse {
  display: inline-block;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jb-navy);
  background: var(--jb-sea);
  border-radius: 100px;
  padding: 0.35rem 0.8rem;
  margin-bottom: 0.75rem;
}
.on-navy .badge-endorse { color: var(--jb-navy); background: var(--jb-sea); }

/* Placeholder tile for endorsements still to come */
.endorse-pending {
  border: 2px dashed var(--jb-line);
  border-radius: var(--jb-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--jb-ink-mute);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form-label {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jb-navy);
  margin-bottom: 0.35rem;
}
.form-control, .form-select {
  border: 2px solid var(--jb-line);
  border-radius: var(--jb-radius);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  color: var(--jb-ink);
  background-color: var(--jb-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--jb-navy);   /* a focus cue must clear 3:1; seafoam cannot here */
  box-shadow: none;
}
.form-control::placeholder { color: var(--jb-ink-faint); }

/* Sized to clear the 24px minimum touch target (WCAG 2.5.8).
   Bootstrap pairs padding-left:1.5em on .form-check with margin-left:-1.5em on
   the input; both are widened together so the box doesn't crowd the label. */
.form-check { padding-block: 0.2rem; padding-left: 2em; }
.form-check-input {
  width: 1.45em;
  height: 1.45em;
  margin-top: 0.12em;
  margin-left: -2em;
  border: 2px solid var(--jb-line);
}
/* Navy, not seafoam: Bootstrap draws a white tick inside, and a white tick on
   seafoam would be 1.95:1. Navy gives the tick 16:1. */
.form-check-input:checked {
  background-color: var(--jb-navy);
  border-color: var(--jb-navy);
}
.form-check-label {
  font-size: 0.98rem;
  padding-top: 0.15em;
  cursor: pointer;
}

.form-note {
  font-size: 0.88rem;
  color: var(--jb-ink-mute);
}

/* Honeypot spam trap. Positioned off screen rather than display:none, because
   some bots deliberately skip fields that are hidden that way. Anything typed
   into it means the submission was automated. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-panel {
  background: var(--jb-white);
  border: 1px solid var(--jb-line);
  border-top: 5px solid var(--jb-teal);
  border-radius: var(--jb-radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Text message opt-in, sat next to the phone field */
.sms-optin {
  background: var(--jb-paper);
  border: 1px solid var(--jb-line);
  border-radius: var(--jb-radius);
  padding: 1rem 1.15rem;
}
.sms-optin__terms {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--jb-ink-mute);
  margin-top: 0.6rem;
  padding-left: 2em;   /* line up under the checkbox label */
}
@media (max-width: 575.98px) {
  .sms-optin__terms { padding-left: 0; }
}

/* Contact list */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(253, 253, 253, 0.14);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: var(--jb-sea); }
.contact-list__label {
  display: block;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jb-sea);
  margin-bottom: 0.1rem;
}

/* --------------------------------------------------------------------------
   16. Footer — closes with the sign's teal disclaimer band
   -------------------------------------------------------------------------- */

.site-footer { background: var(--jb-navy-deep); color: rgba(253, 253, 253, 0.78); }
.site-footer .footer-main { padding-block: clamp(2.75rem, 5vw, 4rem); }

/* The footer sits on navy, so the light-background link colour would fail here.
   Same :not(.btn) guard as .on-navy above — the footer holds a .btn-sun CTA. */
.site-footer a:not(.btn) { color: var(--jb-sea); }
.site-footer a:not(.btn):hover { color: var(--jb-sea-soft); }

.footer-heading {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jb-sea);
  margin: 0 0 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a {
  color: rgba(253, 253, 253, 0.78);
  text-decoration: none;
  font-size: 0.98rem;
}
.footer-links a:hover { color: var(--jb-sea); text-decoration: underline; }

.social-row { display: flex; gap: 0.6rem; }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(253, 253, 253, 0.28);
  border-radius: var(--jb-radius);
  color: var(--jb-white);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.social-row a:hover {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
}
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

/* SMS program disclosure. Sits on the footer's own background rather than
   introducing another colour, separated by a hairline rule. */
.sms-disclosure {
  border-top: 1px solid rgba(253, 253, 253, 0.1);
  color: rgba(253, 253, 253, 0.72);
  font-size: 0.8rem;
  line-height: 1.6;
  padding-block: 1.15rem;
}
.sms-disclosure a { color: var(--jb-sea); }

.footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.footer-legal__links a { color: rgba(253, 253, 253, 0.7); text-decoration: none; }
.footer-legal__links a:hover { color: var(--jb-sea); text-decoration: underline; }

/* The band lifted straight from the bottom of the yard sign. It used to be
   teal with white text; now it is the site's one solid block of seafoam, with
   navy text on top at 8.3:1. Same role, same weight, two colours. */
.disclaimer-band {
  background: var(--jb-sea);
  color: var(--jb-navy);
  padding-block: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
}
.disclaimer-band strong { color: var(--jb-navy); font-weight: 700; }
.disclaimer-band a { color: var(--jb-navy); }

.footer-legal {
  font-size: 0.82rem;
  color: rgba(253, 253, 253, 0.55);
  padding-block: 1rem;
  border-top: 1px solid rgba(253, 253, 253, 0.1);
}

/* --------------------------------------------------------------------------
   17. Misc
   -------------------------------------------------------------------------- */

.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }

/* --------------------------------------------------------------------------
   Legal pages (privacy policy, terms of service)
   -------------------------------------------------------------------------- */

.legal { max-width: 72ch; }
.legal h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--jb-line);
}
.legal h2:first-of-type { margin-top: 1rem; }
.legal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jb-navy);
  margin: 1.75rem 0 0.5rem;
}
.legal ul, .legal ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.legal li { margin-bottom: 0.5rem; }
.legal p { margin-bottom: 1.1rem; }

.legal-updated {
  font-family: var(--jb-font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jb-teal-deep);
}

/* Jump list at the top of a long legal page */
.legal-toc {
  background: var(--jb-paper);
  border-left: 5px solid var(--jb-teal);
  border-radius: var(--jb-radius);
  padding: 1.35rem 1.5rem;
  margin-bottom: 2.5rem;
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.35rem; break-inside: avoid; }
@media (max-width: 575.98px) { .legal-toc ol { columns: 1; } }

.prose p { margin-bottom: 1.15rem; }
.prose h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin: 2.25rem 0 0.85rem;
}

.alert-brand {
  background: var(--jb-paper);
  border: 1px solid var(--jb-line);
  border-left: 5px solid var(--jb-sea);
  border-radius: var(--jb-radius);
  color: var(--jb-ink);
  padding: 1.1rem 1.35rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Bootstrap colours the palette does not allow
   -------------------------------------------------------------------------- */

/* Bootstrap paints validation states red and green, and injects a red or green
   SVG icon as a background image on the control. Both are extra colours, so
   the icons are suppressed and the states are carried by border weight plus
   the message text. Error identification never relied on colour alone here. */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:invalid,
.was-validated .form-select:valid {
  background-image: none;
  padding-right: 0.9rem;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--jb-navy);
  border-width: 3px;
}
.invalid-feedback { color: var(--jb-navy); font-weight: 600; }
.was-validated .form-check-input:invalid,
.form-check-input.is-invalid { border-color: var(--jb-navy); }
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label { color: var(--jb-navy); }

/* Bootstrap's utility shadows are black; tint them navy instead */
.shadow-sm { box-shadow: 0 4px 14px var(--jb-shadow) !important; }
.shadow    { box-shadow: 0 10px 28px var(--jb-shadow) !important; }

/* Small wave mark used as a section ornament */
.mark-ornament { width: 56px; height: 56px; display: block; }
.mark-ornament--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   17b. Contributions — amount picker, contribution rules, help recap
   -------------------------------------------------------------------------- */

/* Label above the amount grid, same voice as .form-label */
.give-label {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jb-ink-mute);
  margin: 0 0 0.85rem;
}

/* Six preset amounts, two clean rows of three at every width.

   Each tile is a real link into ActBlue with ?amount= already applied, which
   ActBlue reads and preselects. One tap is therefore one decision, not two. */
.give-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.give-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.6rem 0.4rem;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--jb-navy);
  background: var(--jb-white);
  border: 2px solid var(--jb-line);
  border-radius: var(--jb-radius);
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
/* Seafoam cannot carry the figure on white, so on hover it becomes the ground
   and the amount stays navy on top of it (8.3:1). Same move as
   .issue-card__num and .btn-navy:hover. */
.give-amount:hover,
.give-amount:focus-visible {
  background: var(--jb-sea);
  border-color: var(--jb-sea);
  color: var(--jb-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px var(--jb-shadow);
}
.give-amount:active { transform: translateY(0); box-shadow: none; }

/* Security / monthly note under the primary button */
.give-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--jb-ink-mute);
}
.give-note__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  fill: var(--jb-navy);
}
.give-note strong { color: var(--jb-ink); }

/* Contribution rules and the fine print that sits with them */
.give-subhead {
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--jb-navy);
  margin: 0 0 0.75rem;
}
.give-fine {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--jb-ink-mute);
}
.give-rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--jb-ink-mute);
}
.give-rules li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
}
/* A drawn check rather than a glyph, so it lines up with the first line of
   text at any size. Navy, not seafoam: this one is doing reading, not
   pointing, and seafoam on white is 1.95:1. */
.give-rules li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.3em;
  width: 0.8rem;
  height: 0.42rem;
  border-left: 2px solid var(--jb-navy);
  border-bottom: 2px solid var(--jb-navy);
  transform: rotate(-45deg);
}
.give-rules strong { color: var(--jb-ink); }

/* Recap of the three asks, in the navy panel at the foot of the page */
.help-recap { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.help-recap li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 1rem;
}
.help-recap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--jb-sea);
  border-radius: 50%;
}
.help-recap a {
  display: block;
  font-family: var(--jb-font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
.help-recap span {
  display: block;
  font-size: 0.9rem;
  color: rgba(253, 253, 253, 0.72);
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   18. Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .issue-card:hover { transform: none; }
  .give-amount:hover { transform: none; box-shadow: none; }
}

@media print {
  .site-header, .site-footer, .wave-divider, .photo-band,
  .btn, .platform-nav, .skip-link, .give-grid { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .page-head { background: #fff !important; padding-block: 0 !important; }
  .page-head *, .display-sign, .sign-office { color: #000 !important; }
  .sign-district, .eyebrow, .section-promise { color: #333 !important; }
  .plank { border-left: 2px solid #999; break-inside: avoid; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}