/* ==========================================================================
   Erik Gordon for Ward 4, Whitchurch-Stouffville
   Palette sampled directly from the printed campaign sign so the site, the
   lawn signs and the postcards read as one piece of material.
     navy   #001E44   bright blue  #2591F4   stripe blue  #1571D8
   All brand colour lives in :root. Swap those tokens and the site re-skins.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand: sampled from the sign artwork */
  --brand-deep:   #001E44;
  --brand:        #0F4C97;
  --brand-mid:    #1571D8;
  --brand-accent: #2591F4;
  --accent-ink:   #0D5AB8;   /* accessible accent for small text on light */

  /* Ground and ink */
  --paper:    #F7F9FC;
  --paper-2:  #EDF2F9;
  --paper-3:  #DCE6F2;
  --ink:      #0C1728;
  --ink-soft: #48586E;
  --ink-mute: #5A6678;   /* was #7A8AA0, which failed WCAG AA on every paper
                            tone: captions and form notes sat at 3.1 to 3.3 */
  --rule:     rgba(12, 23, 40, .13);
  --rule-2:   rgba(12, 23, 40, .07);
  --on-dark:  #EFF4FA;
  --on-dark-soft: rgba(239, 244, 250, .70);

  /* Type: a bold grotesque to echo the sign, a humanist sans for reading */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Scale, fluid */
  --step--1: clamp(.8rem, .77rem + .14vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1:  clamp(1.18rem, 1.1rem + .38vw, 1.42rem);
  --step-2:  clamp(1.42rem, 1.28rem + .7vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.85rem);
  --step-4:  clamp(2.2rem, 1.6rem + 2.7vw, 4.2rem);
  --step-5:  clamp(2.9rem, 1.85rem + 4.8vw, 6.4rem);

  /* Space */
  --gut: clamp(1.25rem, .8rem + 2.2vw, 3rem);
  --sec: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --maxw: 1240px;
  --measure: 68ch;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

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

::selection { background: var(--brand-accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fine paper grain for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gut) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gut) * 2), 760px); }

.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }

.section--navy {
  background: var(--brand-deep);
  color: var(--on-dark);
}
.section--navy h2, .section--navy h3 { color: var(--on-dark); }

.section--paper2 { background: var(--paper-2); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { font-size: var(--step-0); }
.prose h3 { font-size: var(--step-2); margin: 2.1em 0 .5em; }
.prose h3:first-child { margin-top: 0; }

/* --- Eyebrow and the ballot-check motif --------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D5AB8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
  background-size: 78%;
  background-position: center;
  background-repeat: no-repeat;
}
.section--navy .eyebrow { color: var(--brand-accent); }
.section--navy .eyebrow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232591F4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .88em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 30, 68, .55);
}
.btn--accent { --btn-bg: var(--brand-mid); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.section--navy .btn--ghost { --btn-fg: var(--on-dark); border-color: rgba(239,244,250,.32); }
.section--navy .btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }

.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with a drawn underline */
.tlink {
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-block: 4px;      /* keeps the tap target at 24px+ */
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --- Header ------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 252, .9);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--rule-2);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.hdr.is-stuck {
  border-color: var(--rule);
  box-shadow: 0 8px 30px -22px rgba(0, 30, 68, .5);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.mark {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding-block: .35rem;   /* lifts the tap target over the 24px minimum */
}
.mark__ward {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--brand-mid);
  padding: .3em .5em;
  border-radius: 2px;
  line-height: 1;
}

/* The logo plus burger is tight at 320px, so ease both down */
@media (max-width: 380px) {
  .hdr__in { gap: .75rem; }
  .mark { font-size: 1.08rem; }
  .mark__ward { font-size: .76rem; }
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-mid);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.hdr .btn { padding: .7em 1.15em; }

/* Mobile toggle */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 19px;
  height: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* Six nav items need ~950px to sit comfortably beside the wordmark, so the
   burger takes over below 1040px rather than the old 900px. At 901px the
   desktop nav had one pixel of headroom, which is not headroom. */
@media (max-width: 1040px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gut) 2rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav__link {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--ink);
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule-2);
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.4rem; justify-content: center; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(37, 145, 244, .14), transparent 68%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero__name {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 .5em;
}
.hero__name em {
  display: block;
  font-style: normal;
  color: var(--brand);
}
.hero__slogan {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-mid);
  padding: .35em .75em;
  border-radius: 2px;
  margin: 0 0 1.3rem;
  line-height: 1.25;
}
.hero__tag {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.hero__why { max-width: 46ch; margin-bottom: 2.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Portrait sits inside its frame, with an even mat on all four sides */
.portrait {
  position: relative;
  padding: clamp(9px, .75vw, 14px);
  background: var(--paper);
  border: 2px solid var(--brand-mid);
  border-radius: 4px;
  box-shadow: 0 26px 54px -36px rgba(0, 30, 68, .55);
}
.portrait .media {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
}
@media (max-width: 880px) {
  .portrait { max-width: 420px; margin-inline: auto; }
}

/* Ballot strip under the hero */
.ballot-strip {
  border-block: 1px solid var(--rule);
  background: var(--paper-2);
}
.ballot-strip__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, .5rem + 2.5vw, 2.75rem);
  padding-block: 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.ballot-strip__in strong { color: var(--brand); font-weight: 700; }
.ballot-strip__dot { color: var(--brand-mid); }
@media (max-width: 760px) { .ballot-strip__dot { display: none; } }

/* --- Media -------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.media--zoom:hover img { transform: scale(1.04); }
.media--contain { background: var(--brand-deep); }
.media--contain img { object-fit: contain; }

/* Shown only when a photo file is missing. Designed, not broken. */
.media.is-placeholder { background: var(--brand-deep); }
.media.is-placeholder img { display: none; }
.media.is-placeholder::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  text-align: center;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(239, 244, 250, .5);
  background-image:
    repeating-linear-gradient(-45deg,
      rgba(239, 244, 250, .045) 0 10px,
      transparent 10px 20px);
}

.caption {
  font-size: .78rem;
  color: var(--ink-mute);
  margin-top: .7rem;
  line-height: 1.5;
}
.section--navy .caption { color: var(--on-dark-soft); }

/* --- Pillars ------------------------------------------------------------ */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pillar {
  background: var(--paper);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  transition: background .45s var(--ease);
}
.pillar:hover { background: var(--paper-2); }
.pillar__num {
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--brand-mid);
  display: block;
  margin-bottom: 1rem;
}
.pillar h3 { font-size: var(--step-2); margin-bottom: .55rem; }
.pillar p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 0; }

.section--navy .pillars { background: rgba(239,244,250,.16); border-color: rgba(239,244,250,.16); }
.section--navy .pillar { background: var(--brand-deep); }
.section--navy .pillar:hover { background: #04264F; }
.section--navy .pillar p { color: var(--on-dark-soft); }
.section--navy .pillar__num { -webkit-text-stroke-color: var(--brand-accent); }

/* Row layout with an image */
.pillar-row {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.pillar-row:nth-child(even) .pillar-row__media { order: 2; }
.pillar-row__media { aspect-ratio: 5 / 4; border-radius: 3px; }
@media (max-width: 820px) {
  .pillar-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .pillar-row:nth-child(even) .pillar-row__media { order: 0; }
}

/* --- Plank list (his five platform themes) ------------------------------ */
.planks { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.plank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, .6rem + 2vw, 2.75rem);
  align-items: start;
  background: var(--paper);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) 0;
  transition: background .4s var(--ease);
}
.plank:hover { background: var(--paper-2); }
/* Erik asked for checkmarks in place of the 01-05 numbering */
.plank__check {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  margin-top: .28em;
  border: 2px solid var(--brand-mid);
  border-radius: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231571D8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
}
.plank h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.plank p { color: var(--ink-soft); max-width: 60ch; margin-bottom: 0; }
.plank blockquote {
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand-accent);
  font-size: .96rem;
  color: var(--ink-soft);
  font-style: italic;
}
@media (max-width: 620px) {
  .plank { grid-template-columns: 1fr; gap: .5rem; }
  .plank__check { margin-top: 0; }
}

/* --- Priority buttons (home) --------------------------------------------
   A wrapping row of buttons that size to their own label, rather than five
   equal columns where the longer titles wrapped onto two lines and the whole
   thing read as a card grid instead of a set of buttons.                  */
.plank-grid {
  /* Erik asked for 3 buttons on the first line and 2 on the second, rather than
     the 4 + 1 that natural flex wrapping produced. A 3-column grid gives exactly
     that with five items. minmax(0, auto) lets a column shrink on narrow screens
     instead of overflowing. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: clamp(.55rem, .4rem + .5vw, .8rem);
}
@media (max-width: 900px) {
  .plank-grid { grid-template-columns: repeat(2, minmax(0, auto)); }
}
@media (max-width: 560px) {
  .plank-grid { grid-template-columns: minmax(0, 1fr); }
}
.plank-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.25rem;
  background: var(--brand);
  border: 2px solid var(--brand);
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  transition: transform .35s var(--ease), background .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.plank-btn__check {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color .35s var(--ease);
}
.plank-btn__title {
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.plank-btn__arrow {
  font-size: 1rem;
  color: rgba(255, 255, 255, .8);
  transition: transform .35s var(--ease), color .35s var(--ease);
  margin-left: auto;
}
.plank-btn:hover,
.plank-btn:focus-visible {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px rgba(0, 30, 68, .7);
}
.plank-btn:hover .plank-btn__check,
.plank-btn:focus-visible .plank-btn__check { border-color: var(--brand-accent); }
.plank-btn:hover .plank-btn__arrow,
.plank-btn:focus-visible .plank-btn__arrow { transform: translateX(4px); color: #fff; }

/* --- Checklist ---------------------------------------------------------- */
.checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.checks li { position: relative; padding-left: 2.1rem; line-height: 1.55; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid var(--brand-mid);
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231571D8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
}
.section--navy .checks li::before {
  border-color: var(--brand-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232591F4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
}

/* --- Testimonials ------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.quote {
  display: flex;
  flex-direction: column;
  padding-top: 1.7rem;
  border-top: 3px solid var(--brand-accent);
}
.quote__mark {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 800;
  line-height: .6;
  color: var(--brand-accent);
  opacity: .35;
  margin-bottom: .55rem;
}
.quote__body {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 1.4rem;
  flex: 1;
}
.section--navy .quote__body { color: var(--on-dark); }
.quote__by {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section--navy .quote__by { color: var(--on-dark-soft); }

.quote--feature { grid-column: 1 / -1; }
.quote--feature .quote__body {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -.015em;
  max-width: 32ch;
}

/* --- Timeline ----------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(var(--brand-mid), transparent);
}
.timeline li { position: relative; padding: 0 0 2.2rem 2.6rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--brand-mid);
}
.timeline li.is-key::before { background: var(--brand-accent); border-color: var(--brand-accent); }
.timeline__date {
  display: block;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: .3rem;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.timeline p { color: var(--ink-soft); font-size: .95rem; }

/* --- Cards -------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
}
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-mid);
  box-shadow: 0 22px 44px -30px rgba(0, 30, 68, .5);
}
.card__icon { width: 40px; height: 40px; margin-bottom: 1.15rem; color: var(--brand); }
.card__icon svg { width: 100%; height: 100%; }
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .94rem; flex: 1; margin-bottom: 1.4rem; }

/* --- Form --------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(21, 113, 216, .16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }

.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-block;
  padding: .55rem 1.05rem;
  font-size: .85rem;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.choice input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.choice input:focus-visible + span { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

.form__note { font-size: .82rem; color: var(--ink-mute); line-height: 1.55; }

/* --- Split feature ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__media { aspect-ratio: 4 / 3; border-radius: 3px; }
.split__media--tall { aspect-ratio: 4 / 5; }

/* --- Photo strip -------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(.6rem, .4rem + .8vw, 1rem);
}
.strip .media { aspect-ratio: 4 / 5; border-radius: 3px; }

/* --- Stats -------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.stat__n {
  display: block;
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand-accent);
  margin-bottom: .5rem;
}
.stat p { font-size: .92rem; color: var(--on-dark-soft); margin: 0; }

/* --- Page head ---------------------------------------------------------- */
.phead {
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.phead h1 { font-size: var(--step-4); font-weight: 800; margin-bottom: .5rem; }
.phead .lede { margin-top: 1.1rem; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 {
  font-size: var(--step-3);
  font-weight: 800;
  max-width: 19ch;
  margin-inline: auto;
  margin-bottom: 1rem;
}
/* :not(.eyebrow) matters. The eyebrow is a <p>, so the bare selector beat
   .eyebrow on specificity and painted it near-white, which is invisible on
   a light cta-band. */
.cta-band p:not(.eyebrow) { color: var(--on-dark-soft); max-width: 52ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-band .hero__cta { justify-content: center; }

/* --- Footer ------------------------------------------------------------- */
.ftr {
  background: var(--brand-deep);
  color: var(--on-dark);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(239, 244, 250, .16);
}
@media (max-width: 780px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ftr__grid { grid-template-columns: 1fr; } }

.ftr .mark { color: var(--on-dark); font-size: 1.4rem; }
.ftr__blurb { color: var(--on-dark-soft); font-size: .92rem; max-width: 34ch; margin-top: 1rem; }
.ftr h4 {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 1.1rem;
}
.ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ftr__list a, .ftr__list li {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: .92rem;
  transition: color .3s var(--ease);
}
/* Inline links need a real box, or the tap target is only as tall as the text */
.ftr__list a {
  display: inline-block;
  padding-block: .32rem;
}
.ftr__list a:hover { color: var(--on-dark); }

.socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(239, 244, 250, .24);
  border-radius: 2px;
  color: var(--on-dark-soft);
  transition: all .35s var(--ease);
}
.socials a:hover {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
  color: #fff;
  transform: translateY(-2px);
}
.socials svg { width: 17px; height: 17px; }

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: .78rem;
  color: rgba(239, 244, 250, .55);
}
.ftr__base a { color: inherit; }

/* --- Reveal -------------------------------------------------------------
   Scoped to .js so the page is fully visible if JavaScript never runs.
   Without this guard a script failure leaves the whole site blank.        */
.js .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Utilities ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 999;
  text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.center { text-align: center; }

/* Anchor targets must clear the sticky header */
:target, [id] { scroll-margin-top: 96px; }

/* --- Ornamental rule ---------------------------------------------------- */
.rule {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  color: var(--brand-mid);
}
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.rule svg { width: 15px; height: 15px; flex: none; }
.section--navy .rule::before,
.section--navy .rule::after { background: rgba(239, 244, 250, .2); }
.section--navy .rule { color: var(--brand-accent); }

/* --- Draft flag: remove class="draft" once Erik confirms the copy ------- */
.draft { position: relative; }
.draft::before {
  content: "DRAFT \00b7 FOR YOUR APPROVAL";
  position: absolute;
  top: -.5rem;
  left: 0;
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  background: #C2410C;
  padding: .2rem .5rem;
  border-radius: 2px;
  z-index: 5;
}
body.no-draft .draft::before { display: none; }

/* --- Contact form: honeypot and success state --------------------------- */
/* Positioned off-screen rather than display:none. Bots that fill forms often
   skip display:none fields, and this one only works if they fill it in. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__done {
  margin: 0;
  padding: 1.6rem 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--brand-mid);
  border-radius: 2px;
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.form__done strong { color: var(--ink); }

/* --- Print -------------------------------------------------------------- */
@media print {
  @page { margin: 16mm; }

  body { background: #fff; color: #000; font-size: 11pt; }
  body::after { display: none; }

  .hdr, .burger, .nav, .ftr .socials, .cta-band .hero__cta,
  .skip, .btn, form, [data-verify-banner] { display: none !important; }

  .rv { opacity: 1 !important; transform: none !important; }

  .section, .phead { padding-block: 1.2rem; break-inside: avoid; }
  .section--navy, .section--paper2, .ballot-strip {
    background: #fff !important;
    color: #000 !important;
  }
  .section--navy h2, .section--navy h3,
  .quote__body, .stat p, .cta-band p { color: #000 !important; }
  .stat__n, .eyebrow, .timeline__date, .hero__slogan { color: #000 !important; background: none !important; }

  .media { display: none; }
  .split, .hero__grid, .pillar-row { display: block; }
  .pillars, .planks { display: block; border: 0; }
  .pillar, .plank { padding: 0 0 1rem; }

  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --- Cutout portrait -----------------------------------------------------
   A background-removed subject sitting directly on a section colour. The
   .media default grey would show through the alpha channel, so clear it.  */
.media--cutout {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.media--cutout img {
  object-fit: contain;
  /* Without this the jacket ends in a hard horizontal slice and the cutout
     reads as a sticker. Fading the base dissolves him into the section.
     The JPEG fallback has navy baked in, so the fade reveals the same navy. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

/* A landscape group photo cannot survive a 4:5 portrait crop, so it takes two
   columns of the strip. Grid clamps the span on single-column layouts. */
.strip .media--wide { grid-column: span 2; aspect-ratio: 8 / 5; }