/* ============================================================================
   CCAPP Elections — public page design system
   ----------------------------------------------------------------------------
   Loaded only when a [cce_*] public shortcode is on the page.

   Scoping rule: everything is namespaced under .cce-x. Divi's own stylesheet is
   loaded after ours on most installs, so anything that must win against a Divi
   default is written with a .cce-x ancestor (two classes) rather than !important
   wherever that is enough to raise specificity.

   Colour: one dominant colour, PANTONE 321 C #008C95. No other CCAPP company
   colour appears — on a child site the colour IS the wayfinding.
   Contrast: white body text never sits on #008C95 (4.05:1, fails AA). It sits on
   #017B83 or darker. Large display type on #008C95 is fine (3:1 applies).
   Type: system stack, no webfonts, per the CCAPP house rule.
   ========================================================================== */

.cce-x {
  --cce-brand: #008C95;
  --cce-600: #017B83;
  --cce-700: #016068;
  --cce-800: #014A50;
  --cce-050: #F2F9FA;
  --cce-100: #E0F1F2;
  --cce-200: #C2E4E6;
  --cce-mint: #4FD8CE;
  --cce-ink: #2D2926;
  --cce-ink-70: #5A5450;
  --cce-ink-45: #6E6862;
  --cce-line: #D6E7E9;
  --cce-shell: min(1180px, 92vw);
  --cce-ease: cubic-bezier(.22, 1, .36, 1);

  box-sizing: border-box;
  color: var(--cce-ink);
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cce-x *,
.cce-x *::before,
.cce-x *::after { box-sizing: border-box; }

/* Reset through :where() so it carries ZERO specificity.
   Written as `.cce-x p { margin:0 }` it was specificity 0-1-1 and silently beat
   every single-class rule below it — `.cce-sub{margin-top:16px}`,
   `.cce-tl-cite{margin-top:48px}` and friends all computed to 0 and collapsed
   into the block above them. The reset only exists to undo the theme's default
   paragraph and list margins; it should never outrank our own layout. */
:where(.cce-x) :where(h1, h2, h3) { line-height: 1.05; margin: 0; padding: 0; letter-spacing: -.022em; }
:where(.cce-x) :where(p) { margin: 0; padding: 0; }
:where(.cce-x) :where(ul) { margin: 0; padding: 0; list-style: none; }
:where(.cce-x) :where(a) { text-decoration: none; }

.cce-shell { width: var(--cce-shell); margin-inline: auto; }

/* ----------------------------------------------------------------------------
   Full-bleed escape hatch.

   Divi wraps every module in section > row > column, each with its own width and
   padding. These blocks paint their own backgrounds edge to edge, so the wrapper
   chrome has to get out of the way. Add the class "cce-bleed" to the section,
   row and column in the builder — the layout JSON ships with it already set.
   -------------------------------------------------------------------------- */
.cce-bleed,
.cce-bleed > .et_pb_row,
.cce-bleed > .et_pb_column,
.cce-bleed > .et_pb_module {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
.cce-bleed .et_pb_module { margin-bottom: 0 !important; }

/* ============================================================ 1. phase bar */
.cce-util {
  background: var(--cce-800);
  color: #fff;
  position: relative;
  z-index: 40;
}
.cce-util .cce-shell {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 0;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.cce-util b { font-weight: 700; }
.cce-util .cce-when { opacity: .75; }
.cce-util .cce-spacer { margin-left: auto; }
.cce-util a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
}
.cce-util a:hover { border-bottom-color: #fff; }
.cce-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7BE3C9;
  box-shadow: 0 0 0 0 rgba(123, 227, 201, .7);
  animation: cce-pulse 2.4s infinite;
  flex: 0 0 auto;
}
@keyframes cce-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(123, 227, 201, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 227, 201, 0); }
}
.cce-util.is-closed .cce-dot { background: #E8C87A; animation: none; }

/* ================================================================= 2. hero */
.cce-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 104px 0 96px;
  background:
    radial-gradient(120% 90% at 88% 8%, #0AA6AE 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, #014A50 0%, transparent 60%),
    linear-gradient(160deg, #017B83 0%, #016068 55%, #014A50 100%);
}
.cce-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 70% at 80% 10%, #000, transparent 70%);
  mask-image: radial-gradient(80% 70% at 80% 10%, #000, transparent 70%);
  opacity: .5;
}
.cce-blob {
  position: absolute; border-radius: 50%;
  filter: blur(2px); opacity: .16; background: #fff;
}
.cce-blob.a { width: 520px; height: 520px; right: -140px; top: -190px; }
.cce-blob.b { width: 300px; height: 300px; right: 180px; bottom: -150px; opacity: .09; }
.cce-hero .cce-shell {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 56px; align-items: center;
}
.cce-x .cce-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cce-x .cce-hero h1 {
  font-size: clamp(46px, 7.4vw, 92px);
  font-weight: 800; margin: 22px 0 0; color: #fff;
}
.cce-x .cce-hero h1 .cce-year {
  display: block;
  font-size: clamp(64px, 11vw, 140px);
  line-height: .86;
  background: linear-gradient(180deg, #fff 30%, #9FE8E4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cce-hero .cce-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  max-width: 52ch; margin-top: 22px;
  color: rgba(255, 255, 255, .9);
}
.cce-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.cce-x .cce-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 16px 30px;
  font-weight: 800; font-size: 16px; line-height: 1.2;
  border: 0; cursor: pointer;
  transition: transform .18s var(--cce-ease), box-shadow .18s var(--cce-ease), background-color .18s;
}
.cce-x .cce-btn--solid { background: #fff; color: var(--cce-800); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.cce-x .cce-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 0, 0, .3); color: var(--cce-800); }
.cce-x .cce-btn--ghost { border: 2px solid rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.cce-x .cce-btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); color: #fff; }
.cce-x .cce-btn--brand { background: var(--cce-600); color: #fff; }
.cce-x .cce-btn--brand:hover { background: var(--cce-700); color: #fff; transform: translateY(-3px); }
.cce-x .cce-btn[aria-disabled="true"] {
  background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8);
  box-shadow: none; cursor: default; pointer-events: none;
}

/* countdown */
.cce-count {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 22px; padding: 26px 28px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cce-x .cce-count h3 {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); font-weight: 700;
}
.cce-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.cce-unit { background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 14px 6px; text-align: center; }
.cce-unit b {
  display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; color: #fff;
}
.cce-unit span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.cce-count .cce-foot { margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }

/* ============================================================ 3. stat band */
.cce-stats { background: var(--cce-ink); color: #fff; }
.cce-stats .cce-shell { display: grid; grid-template-columns: repeat(3, 1fr); }
.cce-stat { padding: 36px 26px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .12); }
.cce-stat:last-child { border-right: 0; }
.cce-stat b {
  display: block; font-size: clamp(38px, 5vw, 58px);
  font-weight: 800; line-height: 1; color: var(--cce-mint);
}
.cce-stat span {
  display: block; margin-top: 10px; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; color: #fff; line-height: 1.35;
}
.cce-stat em {
  display: block; margin-top: 6px; font-size: 13px; font-style: normal;
  letter-spacing: .05em; color: rgba(255, 255, 255, .62);
}

/* ============================================================== 4. section */
.cce-sec { padding: 96px 0; background: #fff; }
.cce-sec--tight { padding-top: 0; }
.cce-x .cce-kicker {
  font-size: 12.5px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--cce-600); display: block;
}
.cce-x .cce-sec h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; margin-top: 14px; }
.cce-sub { margin-top: 16px; font-size: 17.5px; color: var(--cce-ink-70); max-width: 62ch; }

/* ========================================================= 4b. how it works */
.cce-overview { background: #fff; }
.cce-ov-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; margin-top: 36px; align-items: start; }
.cce-ov-main p { font-size: 17.5px; color: var(--cce-ink-70); }
.cce-ov-main p + p { margin-top: 18px; }
.cce-ov-main strong { color: var(--cce-ink); }

.cce-ov-aside {
  background: var(--cce-050); border: 1px solid var(--cce-line);
  border-radius: 24px; padding: 30px 30px 26px;
}
.cce-ov-quote {
  font-size: 17px; font-weight: 700; color: var(--cce-700);
  line-height: 1.45; padding-bottom: 20px; border-bottom: 1px solid var(--cce-200);
}
.cce-ov-dl { margin: 20px 0 0; display: grid; gap: 4px; }
.cce-ov-dl dt {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cce-ink-45);
}
.cce-ov-dl dd { margin: 0 0 14px; font-size: 15.5px; font-weight: 700; color: var(--cce-ink); }
.cce-ov-dl dd:last-child { margin-bottom: 0; }
.cce-ov-note { margin-top: 18px; font-size: 14px; color: var(--cce-ink-70); }

/* ============================================================= 5. timeline */
.cce-tl { margin-top: 52px; position: relative; }
.cce-tl-track { position: absolute; left: 0; right: 0; top: 19px; height: 3px; background: var(--cce-line); border-radius: 2px; }
.cce-tl-fill {
  position: absolute; left: 0; top: 19px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cce-brand), var(--cce-mint));
  transition: width .9s var(--cce-ease);
}
.cce-tl-items { display: grid; gap: 8px; position: relative; }
.cce-tl-i { text-align: center; }
.cce-tl-node {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--cce-line);
  margin: 12px auto 0; transition: transform .2s var(--cce-ease);
}
.cce-tl-i.is-done .cce-tl-node { background: var(--cce-brand); border-color: var(--cce-brand); }
.cce-tl-i.is-now .cce-tl-node {
  background: #fff; border-color: var(--cce-brand);
  box-shadow: 0 0 0 7px var(--cce-100); transform: scale(1.2);
}
.cce-tl-d { margin-top: 14px; font-weight: 800; font-size: 15px; }
.cce-tl-l { font-size: 13px; color: var(--cce-ink-70); margin-top: 3px; line-height: 1.35; }
.cce-tl-i.is-now .cce-tl-d { color: var(--cce-700); }
.cce-tl-i.is-now .cce-tl-l { color: var(--cce-ink); }
.cce-tl-cite {
  margin-top: 48px; font-size: 13.5px; color: var(--cce-ink-70);
  border-left: 3px solid var(--cce-200); padding-left: 14px; max-width: 84ch;
}
.cce-nowrap { white-space: nowrap; }

/* =========================================================== 6. categories */
.cce-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 52px; }
.cce-cat {
  position: relative; overflow: hidden; border-radius: 26px;
  padding: 44px 40px 40px; color: #fff;
  background: linear-gradient(150deg, var(--cce-600), var(--cce-800));
  transition: transform .25s var(--cce-ease), box-shadow .25s var(--cce-ease);
}
.cce-cat--b { background: linear-gradient(150deg, #0F5F66, #0B3E44); }
.cce-cat:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(1, 74, 80, .28); }
.cce-cat .cce-mark {
  position: absolute; right: -18px; top: -34px;
  font-size: 170px; font-weight: 800; color: rgba(255, 255, 255, .09); line-height: 1;
}
.cce-x .cce-cat h3 { font-size: 29px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.cce-cat .cce-who { font-size: 15px; color: rgba(255, 255, 255, .86); min-height: 52px; }
.cce-cat ul { margin: 22px 0 26px; }
.cce-cat li {
  display: flex; gap: 11px; padding: 8px 0; font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.cce-cat li::before { content: "\2192"; opacity: .75; }
.cce-x .cce-cat .cce-btn { background: #fff; color: var(--cce-800); padding: 13px 24px; font-size: 15px; }

/* ============================================================ 7. districts */
.cce-dist {
  background: var(--cce-050);
  border-top: 1px solid var(--cce-line);
  border-bottom: 1px solid var(--cce-line);
}
/* Header and map stack rather than sit side by side: the finder is itself a
   two-column widget, and nesting it in a half-width column squeezed California
   to a thumbnail. Full width gives the map the room the interaction needs. */
.cce-dist-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: end; }
.cce-dist-finder { margin-top: 52px; }
.cce-numerals { display: flex; gap: 14px; flex-wrap: wrap; }
.cce-num {
  flex: 1 1 120px; background: #fff; border: 1px solid var(--cce-line);
  border-radius: 22px; padding: 22px 12px; text-align: center;
  transition: transform .2s var(--cce-ease), border-color .2s;
}
.cce-num:hover { transform: translateY(-5px); border-color: var(--cce-brand); }
.cce-num b { display: block; font-size: 52px; font-weight: 800; color: var(--cce-700); line-height: 1; }
.cce-num span {
  display: block; margin-top: 6px; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cce-ink-45); line-height: 1.35;
}
.cce-dist-note { margin-top: 28px; font-size: 14px; color: var(--cce-ink-70); max-width: 56ch; }

/* ================================================================ 8. steps */
.cce-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.cce-step {
  background: #fff; border: 1px solid var(--cce-line); border-radius: 22px;
  padding: 32px 28px; position: relative;
  transition: transform .2s var(--cce-ease), box-shadow .2s var(--cce-ease);
}
.cce-step:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(1, 74, 80, .1); }
.cce-step .cce-n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--cce-050); color: var(--cce-700);
  font-size: 19px; font-weight: 800; border: 1px solid var(--cce-200);
}
.cce-x .cce-step h3 { font-size: 20px; margin: 18px 0 9px; font-weight: 800; }
.cce-step p { font-size: 15px; color: var(--cce-ink-70); }

/* The seat, in four facts. A definition list rather than more cards: these are
   term/answer pairs, and four more of the same card would read as four more
   steps. */
.cce-role {
  margin-top: 40px; background: var(--cce-050);
  border: 1px solid var(--cce-line); border-radius: 24px; padding: 34px 36px 30px;
}
.cce-x .cce-role-h { font-size: 21px; font-weight: 800; }
.cce-role-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; margin: 22px 0 0; }
.cce-role-dl dt {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cce-600);
}
.cce-role-dl dd { margin: 6px 0 0; font-size: 15px; color: var(--cce-ink-70); line-height: 1.55; }

/* =========================================================== 9. candidates */
.cce-locked {
  margin-top: 44px; border: 2px dashed var(--cce-line); border-radius: 26px;
  padding: 56px 40px; text-align: center; background: var(--cce-050);
}
.cce-locked b { display: block; font-size: 20px; font-weight: 800; }
.cce-locked p { margin-top: 10px; color: var(--cce-ink-70); font-size: 15.5px; max-width: 60ch; margin-inline: auto; }
.cce-locked .cce-away {
  display: inline-block; margin-top: 18px; background: #fff;
  border: 1px solid var(--cce-line); border-radius: 999px;
  padding: 9px 20px; font-weight: 800; color: var(--cce-700); font-size: 14px;
}

.cce-galgroup { margin-top: 48px; }
.cce-x .cce-galgroup-h { font-size: 24px; font-weight: 800; }
.cce-galgroup-p { margin-top: 7px; font-size: 15px; color: var(--cce-ink-70); }

/* Category A is a set of district races. Each district gets its own labelled
   block so a member can find their own race without reading every seat line. */
.cce-galdist { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px;
	padding-bottom: 9px; border-bottom: 1px solid var(--cce-line, #e3e8ee); }
.cce-galdist-h { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.cce-galdist-n { font-size: 13px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--cce-ink-70); }
.cce-galdist + .cce-gal { margin-top: 0; }
/* the card's own seat chip only repeats the heading inside a district block */
.cce-galdist + .cce-gal .cce-seat { display: none; }
.cce-galdist + .cce-gal .cce-cand-body h3 { margin-top: 0; }
@media (max-width: 640px) {
	.cce-galdist { flex-direction: column; gap: 2px; margin-top: 26px; }
}
.cce-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 22px; margin-top: 22px; }
.cce-cand {
  background: #fff; border: 1px solid var(--cce-line); border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s var(--cce-ease), box-shadow .2s var(--cce-ease);
}
.cce-cand:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(1, 74, 80, .12); }
.cce-cand-photo {
  /* Portrait, matching both the source and the board cards. The headshots are
     150x200 portraits (ratio .75). A SQUARE window had to crop 25% of the
     height off every one of them to fill, which is what was taking the tops of
     faces - Larry, twice. 4/5 (.8) overflows the source by under 7%, and the
     bias below keeps that off the chin, not the forehead. */
  aspect-ratio: 4 / 5; background: linear-gradient(150deg, var(--cce-100), var(--cce-200));
  display: grid; place-items: center; overflow: hidden; position: relative;
}
/* height:100% against a box whose height comes from aspect-ratio is not a
   definite length - the image fell back to its natural height and was cropped
   top and bottom. Pinning it to the box is unambiguous. */
.cce-cand-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 18%;
}
.cce-cand-photo .cce-initials { font-size: 44px; font-weight: 800; color: var(--cce-700); letter-spacing: .04em; }
.cce-cand-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cce-x .cce-cand h3 { font-size: 21px; font-weight: 800; }
.cce-cand .cce-seat {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cce-600);
}
.cce-cand .cce-city { font-size: 14.5px; color: var(--cce-ink-70); }
.cce-cand .cce-stmt-link { margin-top: auto; padding-top: 14px; font-weight: 800; font-size: 14.5px; color: var(--cce-700); }
.cce-cand .cce-stmt-link:hover { color: var(--cce-brand); }
.cce-cand.is-winner { border-color: var(--cce-brand); box-shadow: 0 0 0 3px var(--cce-100); }
/* The badge sits on the portrait rather than in the text column: in the text
   column it pushed the name down, so an elected card and a defeated one had
   their names on different lines and the row stopped scanning cleanly. */
.cce-cand .cce-elected {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--cce-700); color: #fff; border-radius: 999px;
  padding: 6px 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(1, 74, 80, .3);
}

/* statement dialog */
.cce-stmt { border: 0; border-radius: 24px; padding: 0; max-width: min(680px, 92vw); }
.cce-stmt::backdrop { background: rgba(1, 74, 80, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cce-stmt-inner { padding: 38px 40px 34px; }
.cce-stmt-close {
  position: absolute; top: 14px; right: 16px; border: 0; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--cce-ink-45);
}
.cce-stmt-body { margin-top: 18px; font-size: 16px; color: var(--cce-ink-70); white-space: pre-wrap; }

/* =============================================================== 10. facts */
.cce-facts { background: var(--cce-ink); color: #fff; }
.cce-x .cce-facts h2 { color: #fff; }
.cce-facts .cce-kicker { color: var(--cce-mint); }
.cce-facts .cce-sub { color: rgba(255, 255, 255, .72); }
.cce-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 46px; }
.cce-fact {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px; padding: 28px;
}
.cce-fact b { display: block; font-size: 16.5px; font-weight: 800; color: var(--cce-mint); }
.cce-fact p { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .8); }

/* =============================================================== 11. close */
.cce-close {
  background: linear-gradient(150deg, var(--cce-600), var(--cce-800));
  color: #fff; text-align: center;
}
.cce-x .cce-close h2 { color: #fff; }
.cce-close p { margin: 16px auto 0; max-width: 56ch; color: rgba(255, 255, 255, .88); font-size: 17.5px; }
.cce-close .cce-ctas { justify-content: center; }

/* ============================================================= 12. results */
.cce-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 44px; }
.cce-result {
  background: #fff; border: 1px solid var(--cce-line); border-radius: 22px; padding: 28px;
}
.cce-result .cce-seat { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cce-600); }
.cce-x .cce-result h3 { font-size: 23px; font-weight: 800; margin-top: 6px; }
.cce-result .cce-term { margin-top: 8px; font-size: 14.5px; color: var(--cce-ink-70); }

/* =============================================================== 13. notes */
.cce-empty {
  border: 1px dashed var(--cce-line); border-radius: 18px;
  padding: 26px; background: var(--cce-050); color: var(--cce-ink-70); font-size: 15px;
}
.cce-admin-note {
  border-left: 4px solid #B3261E; background: #FDF3F2; color: #7A1C15;
  padding: 14px 18px; margin: 12px 0; font-size: 14px; border-radius: 0 10px 10px 0;
}

/* ============================================================== 14. reveal */
.cce-r { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--cce-ease), transform .7s var(--cce-ease); }
.cce-r.is-in { opacity: 1; transform: none; }
.cce-x.no-js .cce-r { opacity: 1; transform: none; }

/* ========================================================== 15. responsive */
@media (max-width: 980px) {
  .cce-hero .cce-shell,
  .cce-ov-grid,
  .cce-dist-head,
  .cce-dist .cce-shell { grid-template-columns: 1fr; gap: 40px; }
  .cce-cats,
  .cce-role-dl,
  .cce-steps,
  .cce-fgrid,
  .cce-stats .cce-shell { grid-template-columns: 1fr; }
  .cce-stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .cce-tl-items { grid-template-columns: 1fr !important; gap: 22px; text-align: left; }
  .cce-tl-track,
  .cce-tl-fill { display: none; }
  /* Node spans both rows so the date and its label share one text column;
     otherwise the label wraps back under the node and the list loses its spine. */
  .cce-tl-i {
    display: grid; grid-template-columns: 26px 1fr; column-gap: 14px;
    align-items: start; text-align: left;
  }
  .cce-tl-node { margin: 4px 0 0; grid-row: 1 / span 2; grid-column: 1; }
  .cce-tl-d { grid-column: 2; grid-row: 1; margin-top: 0; }
  .cce-tl-l { grid-column: 2; grid-row: 2; }
  .cce-tl-cite { margin-top: 34px; }
  .cce-sec { padding: 66px 0; }
  .cce-hero { padding: 72px 0 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .cce-x *,
  .cce-x *::before,
  .cce-x *::after { animation: none !important; transition: none !important; }
  .cce-r { opacity: 1; transform: none; }
}

/* ================================================================ 16. print */
@media print {
  .cce-util, .cce-count, .cce-ctas { display: none; }
  .cce-hero, .cce-stats, .cce-facts, .cce-close { background: #fff !important; color: #000 !important; }
  .cce-x .cce-hero h1 .cce-year { -webkit-text-fill-color: #000; color: #000; }
}

/* ============================================ 17. refinement pass — v0.9.1
   Additive only. Nothing above this line was removed; rules here win by
   source order at equal specificity.

   Four things this pass fixes, in order of how much they cost a member:
   1. No visible focus ring anywhere on the public page. Keyboard and
      screen-magnifier users had no idea where they were.
   2. One breakpoint (980px) for the whole page, so a 375px phone got the
      tablet layout with desktop padding. A real small tier below.
   3. The nomination steps read as three unrelated cards; they are a sequence.
   4. The candidates band — the one the committee looks at hardest — was a
      dashed grey box that said "not yet".
   ========================================================================== */

/* -------------------------------------------------------- 17.1 focus rings */
/* :focus-visible only, so a mouse click never paints a ring, but tab always
   does. Two tones because half these bands are dark. */
.cce-x :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cce-700);
  outline-offset: 3px;
  border-radius: 6px;
}
.cce-util :where(a, button):focus-visible,
.cce-hero :where(a, button):focus-visible,
.cce-stats :where(a, button):focus-visible,
.cce-facts :where(a, button):focus-visible,
.cce-close :where(a, button):focus-visible {
  outline-color: #7BE3C9;
}

/* Skip-safe: a focused element inside a band that clips its own decoration
   must not have the ring cropped by the blob overflow. */
.cce-hero { isolation: isolate; }

/* ------------------------------------------------- 17.2 steps read in order */
.cce-steps { position: relative; }
.cce-step { position: relative; z-index: 1; }

/* Dashed rail behind the three cards, level with the number chips. The cards
   are opaque, so it only shows in the two gaps — which is the whole point:
   it connects them without drawing a line through them. */
.cce-steps::before {
  content: "";
  position: absolute;
  top: 54px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--cce-200) 0 7px, transparent 7px 15px);
  z-index: 0;
}

/* The chip was a pale tile on a white card — the weakest element in the band
   despite being the thing that says "step 1". White on #017B83 is 5.05:1. */
.cce-x .cce-step .cce-n {
  background: var(--cce-600);
  border-color: var(--cce-600);
  color: #fff;
  box-shadow: 0 6px 16px rgba(1, 96, 104, .26);
}

/* --------------------------------------- 17.3 candidates: the waiting state */
/* Replaces the dashed box. Same information, but it shows the nomination
   moving through the committee rather than announcing an absence. */
.cce-prog {
  margin-top: 44px;
  border: 1px solid var(--cce-line);
  border-radius: 26px;
  background: linear-gradient(180deg, #fff 0%, var(--cce-050) 100%);
  padding: 40px 38px 34px;
  box-shadow: 0 18px 44px rgba(1, 74, 80, .06);
}
.cce-x .cce-prog-h { font-size: clamp(21px, 2.4vw, 26px); font-weight: 800; }
.cce-prog-p { margin-top: 10px; font-size: 16px; color: var(--cce-ink-70); max-width: 64ch; }

.cce-prog-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 34px;
  position: relative;
}
.cce-prog-s { position: relative; padding: 0 18px; }
/* Connector drawn per-cell so it stops at the last one without a :not() list. */
.cce-prog-s::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--cce-line);
}
.cce-prog-s:last-child::before { display: none; }
.cce-prog-s.is-done::before { background: var(--cce-brand); }

.cce-prog-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cce-line);
}
.cce-prog-s.is-done .cce-prog-dot { background: var(--cce-brand); border-color: var(--cce-brand); }
.cce-prog-s.is-now .cce-prog-dot {
  border-color: var(--cce-brand);
  border-width: 5px;
  box-shadow: 0 0 0 0 rgba(0, 140, 149, .45);
  animation: cce-prog-pulse 2.6s infinite;
}
@keyframes cce-prog-pulse {
  70%  { box-shadow: 0 0 0 11px rgba(0, 140, 149, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 140, 149, 0); }
}
.cce-prog-t {
  display: block; margin-top: 14px;
  font-size: 15.5px; font-weight: 800; color: var(--cce-ink);
}
.cce-prog-s.is-next .cce-prog-t { color: var(--cce-ink-45); }
.cce-prog-d { display: block; margin-top: 4px; font-size: 13.5px; color: var(--cce-ink-70); }
.cce-prog-s.is-now .cce-prog-d { color: var(--cce-700); font-weight: 700; }

.cce-prog-foot {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cce-line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cce-prog-count {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--cce-800); color: #fff;
  border-radius: 999px; padding: 9px 20px;
  font-size: 14.5px; font-weight: 800;
}
.cce-prog-count b { font-size: 19px; }
.cce-prog-note { font-size: 14.5px; color: var(--cce-ink-70); }

/* ------------------------------------------------- 17.4 small-screen tier */
/* Below 640px the 980px rules are already in force — this only tightens the
   things that were still sized for a tablet. */
@media (max-width: 640px) {
  .cce-x { --cce-shell: min(1180px, 89vw); }

  .cce-sec  { padding: 52px 0; }
  .cce-hero { padding: 54px 0 50px; }

  /* The strip was three stacked lines and a rule of its own height; the
     auto-margin spacer is what forced the link onto line three. */
  .cce-util .cce-shell { gap: 4px 12px; padding: 11px 0; font-size: 12.5px; }
  .cce-util .cce-spacer { display: none; }
  .cce-util .cce-when { flex-basis: 100%; }

  .cce-x .cce-sec h2 { font-size: clamp(26px, 7.6vw, 34px); }
  .cce-sub { font-size: 16.5px; }

  .cce-stat { padding: 24px 18px; }
  .cce-stat b { font-size: 42px; }

  .cce-steps::before { display: none; }
  .cce-step { padding: 24px 20px; border-radius: 18px; }
  .cce-role { padding: 26px 22px; border-radius: 20px; }
  .cce-fact { padding: 22px 20px; border-radius: 16px; }

  /* The waiting panel goes vertical: three across at 375px gives each stage
     about 100px, which cannot hold "Candidates announced". */
  .cce-prog { padding: 28px 22px 24px; border-radius: 20px; }
  .cce-prog-rail { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
  .cce-prog-s { padding: 0 0 0 34px; }
  .cce-prog-s::before {
    top: 24px; left: 9px; width: 2px; height: calc(100% + 22px);
  }
  .cce-prog-dot { position: absolute; left: 0; top: 2px; }
  .cce-prog-t { margin-top: 0; }

  .cce-gal { grid-template-columns: 1fr; }
  .cce-locked { padding: 34px 22px; border-radius: 20px; }
  .cce-close p { font-size: 16.5px; }
}

/* ============================================================ board roster
   The seated board. Same card the page has always used - portrait left, the
   name and what the seat represents right - rendered from the roster and
   sorted by office then surname instead of being dragged into place.
   ======================================================================== */
.cce-board { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
.cce-board-h { grid-column: 1 / -1; margin: 0; font-size: 24px; font-weight: 800; }

.cce-dir {
  display: flex; align-items: center; gap: 28px; padding: 24px;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 15px;
  box-shadow: 0 15px 30px rgba(212, 212, 212, 0);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.cce-dir:hover {
  box-shadow: 0 15px 30px rgba(212, 212, 212, .5);
  border-color: #d6dde4; transform: translateY(-2px);
}
.cce-dir-photo {
  position: relative; flex: 0 0 170px; width: 170px; aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, #eef3f5, #dfe8ec);
}
.cce-dir-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%; display: block;
}
.cce-dir-body { min-width: 0; }
.cce-board .cce-dir h3 {
  margin: 0 0 4px; font-size: 26px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; color: #333;
}
.cce-dir-position { margin: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 300; color: #666; }
.cce-dir-kind     { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #2d2926; }
.cce-dir-detail   { margin: 0; font-size: 15px; color: #666; }

.cce-dir.is-vacant { border-style: dashed; background: #fcfdfe; }
.cce-dir.is-vacant:hover { transform: none; box-shadow: none; }
.cce-dir.is-vacant h3 { color: #8d9aa5; }
.cce-dir.is-vacant .cce-initials { font-size: 30px; color: #b6c2cc; }

@media (max-width: 980px) {
  .cce-board { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 520px) {
  .cce-dir { gap: 18px; padding: 18px; }
  .cce-dir-photo { flex-basis: 118px; width: 118px; }
  .cce-board .cce-dir h3 { font-size: 21px; }
  .cce-dir-position { margin-bottom: 12px; font-size: 14.5px; }
}

/* ===================================================== the board, treatment 2
   Portrait cards. The office sits on the photograph so a face and a title read
   as one thing, and every director gets the same card - the board is not a
   hierarchy of importance, only of office.
   ========================================================================= */
.cce-boardtop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
  margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid #e7ecf1;
}
.cce-boardtop-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #017b83; margin-right: auto;
}
.cce-boardtop-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #6b7177; }
.cce-boardtop-facts strong { font-size: 19px; font-weight: 800; color: #2d2926; margin-right: 5px; }

.cce-board { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 26px; }
.cce-board .cce-dir {
  position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  overflow: hidden; border-radius: 22px; border: 1px solid #ecf0f4; background: #fff;
  box-shadow: 0 18px 40px -30px rgba(7, 26, 30, .55);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.cce-board .cce-dir::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, #008C95, #2AD2C9);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cce-board .cce-dir:hover {
  transform: translateY(-6px); border-color: #dbe3ea;
  box-shadow: 0 34px 60px -34px rgba(7, 26, 30, .55);
}
.cce-board .cce-dir:hover::after { transform: scaleX(1); }

.cce-board .cce-dir-photo {
  position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden;
}
/* the scrim exists to carry the office chip, so it only appears where there
   is one - a director with no office gets a clean photograph */
.cce-board .cce-dir-photo:has(.cce-dir-office)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,23,26,0) 42%, rgba(7,23,26,.18) 62%, rgba(7,23,26,.82) 100%);
}
.cce-board .cce-dir-photo img {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cce-board .cce-dir:hover .cce-dir-photo img { transform: scale(1.06); }

/* the office, on the photograph */
.cce-board .cce-dir-office {
  position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cce-board .cce-dir-body { padding: 17px 19px 20px; display: flex; flex-direction: column; gap: 5px; }
.cce-board .cce-dir h3 { margin: 0; font-size: 20.5px; font-weight: 800; letter-spacing: -.015em; color: #2d2926; line-height: 1.22; }
.cce-board .cce-dir-position { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: #017b83; }
.cce-board .cce-dir-seat { margin: 3px 0 0; font-size: 13px; color: #6b7177; line-height: 1.45; }
.cce-board .cce-dir-kind { font-weight: 700; color: #4a4845; }
.cce-board .cce-dot { margin: 0 5px; color: #b9c2cb; }

.cce-board .cce-dir.is-vacant { border-style: dashed; box-shadow: none; background: #fbfcfd; }
.cce-board .cce-dir.is-vacant:hover { transform: none; box-shadow: none; }
.cce-board .cce-dir.is-vacant::after { display: none; }
.cce-board .cce-dir.is-vacant .cce-dir-photo { background: #f1f4f7; }
.cce-board .cce-dir.is-vacant .cce-dir-photo::after { display: none; }
.cce-board .cce-dir.is-vacant h3 { color: #94a0ab; }

@media (max-width: 600px) {
  .cce-board { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .cce-board .cce-dir-body { padding: 13px 14px 16px; }
  .cce-board .cce-dir h3 { font-size: 17px; }
  .cce-board .cce-dir-position, .cce-board .cce-dir-seat { font-size: 12.5px; }
}

/* what else a director carries: a seat on another CCAPP board, and committees */
.cce-board .cce-dir-boards,
.cce-board .cce-dir-committees {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: #5b6166;
}
.cce-board .cce-lbl {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #9aa4ad; margin-top: 7px;
}
.cce-board .cce-dir-boards { color: #2d2926; font-weight: 600; }

/* ---- contacting the board ------------------------------------------------
   One address for all of them, reached through a form so nobody's personal
   inbox or home town ends up on a public page. */
.cce-board .cce-dir-contact {
  margin-top: 12px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: #0b5f66; background: rgba(0, 140, 149, .09);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cce-board .cce-dir-contact::after { content: "\2192"; font-size: 13px; }
.cce-board .cce-dir-contact:hover {
  background: #008C95; color: #fff; transform: translateY(-1px);
}

.cce-contact { max-width: 720px; }
.cce-contact-about { margin: 0 0 18px; font-size: 15.5px; color: #5b6166; }
.cce-form { display: flex; flex-direction: column; gap: 14px; }
.cce-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cce-f { display: flex; flex-direction: column; gap: 6px; }
.cce-f > span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7177; }
.cce-f input, .cce-f textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15.5px; color: #2d2926;
  background: #fff; border: 1px solid #dde4ea; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease;
}
.cce-f input:focus, .cce-f textarea:focus {
  outline: none; border-color: #008C95; box-shadow: 0 0 0 4px rgba(0, 140, 149, .12);
}
.cce-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cce-contact .cce-btn {
  align-self: flex-start; padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #008C95, #017b83);
  box-shadow: 0 14px 30px -16px rgba(0, 140, 149, .95);
  transition: transform .2s ease, filter .2s ease;
}
.cce-contact .cce-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.cce-notice.is-ok { padding: 16px 18px; border-radius: 14px; background: rgba(0,140,149,.08); color: #0b5f66; }
.cce-notice.is-warn { padding: 14px 16px; border-radius: 12px; background: #fff4f4; color: #8c2f2f; margin-bottom: 14px; }
.cce-map-contact {
  display: inline-block; margin-top: 10px; padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: #0b5f66; background: rgba(0, 140, 149, .1);
}
.cce-map-contact:hover { background: #008C95; color: #fff; }
@media (max-width: 560px) { .cce-f-row { grid-template-columns: 1fr; } }
.cce-boardtop-updated {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #6b7177;
  padding: 5px 12px; border-radius: 999px; background: #f1f5f8; margin-right: 4px;
}

/* Every card the same height, whatever a director carries: the grid rows are
   equal and the contact button is pushed to the bottom of the body, so a long
   committee list does not leave its neighbours looking clipped. */
.cce-board { grid-auto-rows: 1fr; align-items: stretch; }
.cce-board .cce-dir { height: 100%; }
.cce-board .cce-dir-body { flex: 1 1 auto; }
.cce-board .cce-dir-contact { margin-top: auto; }

/* representation leads, then what else they sit on */
.cce-board .cce-dir-seat { margin-bottom: 2px; }
.cce-board .cce-dir-seat + .cce-dir-boards .cce-lbl,
.cce-board .cce-dir-seat + .cce-dir-committees .cce-lbl { margin-top: 10px; }

/* Every name on one line, and all of them the same size.
   The longest on the board is "Guillermo Rodriguez" - about 10.4em at this
   weight - so the size is tied to the card's own width rather than the
   viewport's, and the cap is what the widest name can take without wrapping.
   The theme sets an h3 scale for page content, hence the !important. */
.cce-board .cce-dir { container-type: inline-size; }
body .cce-board .cce-dir h3 {
  font-size: clamp(13px, 7.4cqw, 23px) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* no container query support: fall back to the viewport, still one line */
@supports not (width: 1cqw) {
  body .cce-board .cce-dir h3 { font-size: clamp(14px, 1.45vw, 23px) !important; }
}

/* ------------------------------------------------- where the cycle is today
   A call to action, not a hero. One card: what is happening now on the left,
   how long is left on the right, and a way through to the portal.
   ========================================================================= */
.cce-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px 36px;
  padding: 26px 30px; background: #fff;
  border: 1px solid #e3e8ee; border-left: 4px solid #008C95; border-radius: 18px;
  box-shadow: 0 18px 44px -34px rgba(7, 26, 30, .55);
}
.cce-cta-main { min-width: 0; }
.cce-cta-kicker {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #017b83;
}
.cce-cta-step {
  margin: 0 0 6px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 800;
  line-height: 1.25; letter-spacing: -.015em; color: #2d2926;
}
.cce-cta-line { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #5b6166; max-width: 58ch; }
.cce-cta-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; white-space: nowrap;
  border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #008C95, #017b83);
  box-shadow: 0 14px 30px -16px rgba(0, 140, 149, .95);
  transition: transform .2s ease, filter .2s ease;
}
.cce-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff; }
.cce-cta-btn span { transition: transform .2s ease; }
.cce-cta-btn:hover span { transform: translateX(3px); }

/* the clock for the step we are in */
.cce-cta-clock {
  display: grid; justify-items: center; align-content: center; gap: 1px;
  min-width: 190px; padding: 20px 24px; border-radius: 16px; text-align: center;
  background: linear-gradient(145deg, #07171A, #024548 70%, #016A71);
  color: #fff; box-shadow: 0 20px 40px -26px rgba(0, 140, 149, .9);
}
.cce-clock-n { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #2AD2C9; }
.cce-clock-u { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.cce-clock-l { margin-top: 9px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.88); max-width: 20ch; }
.cce-clock-d {
  margin-top: 7px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #07171A; background: rgba(42, 210, 201, .9);
}

@media (max-width: 820px) {
  .cce-cta { grid-template-columns: 1fr; padding: 22px 20px; gap: 20px; }
  .cce-cta-clock { justify-self: stretch; grid-auto-flow: column; justify-items: start;
    align-items: center; gap: 12px; text-align: left; padding: 16px 20px; }
  .cce-clock-n { font-size: 34px; }
  .cce-clock-l { margin-top: 0; }
  .cce-clock-d { margin-top: 0; }
}

/* a candidate who did not send a statement says so, in the same place the
   link would have been, so every card ends the same way */
.cce-cand .cce-stmt-none{
  margin-top: auto; padding-top: 14px;
  font-size: 14.5px; font-style: italic; color: var(--cce-ink-70, #6b7177);
}