@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/neue-machina-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/neue-machina-ultrabold.woff") format("woff");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("../fonts/stolzl-light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("../fonts/stolzl-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("../fonts/stolzl-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #ebe6d9;
  --rose: #a62a4f;
  --green: #36694d;
  --ink: #050505;
  --muted: #74716b;
  --line: #c1c5c8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #171717;
  color: var(--ink);
  font-family: "Stolzl", Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link {
  background: #000;
  color: #fff;
  left: 12px;
  padding: 10px 14px;
  position: fixed;
  top: -100px;
  z-index: 99999;
}
.skip-link:focus { top: 12px; }

.site-shell {
  background: var(--paper);
  margin-inline: auto;
  max-width: 760px;
  min-height: 100vh;
  overflow: hidden;
}

.campaign-hero {
  aspect-ratio: 602 / 400;
  display: grid;
  grid-template-columns: 49% 51%;
  min-height: 238px;
}
.hero-photo {
  border-bottom-right-radius: clamp(12px, 2.8vw, 22px);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hero-photo img {
  height: 100%;
  object-fit: cover;
  object-position: 53% 50%;
  width: 100%;
}
.hero-panel {
  background: var(--rose);
  color: #fff;
  padding: 6.2% 5.8%;
  position: relative;
}
.brand-logo {
  filter: brightness(0) invert(1);
  height: auto;
  width: clamp(62px, 17vw, 126px);
}
.hero-panel h1 {
  bottom: 7.4%;
  font-family: "Stolzl", Arial, sans-serif;
  font-size: clamp(13px, 3.85vw, 28px);
  font-weight: 300;
  left: 6.2%;
  letter-spacing: -.04em;
  line-height: 1.04;
  margin: 0;
  position: absolute;
  right: 6.2%;
}

.product-section {
  padding: clamp(40px, 9vw, 70px) clamp(16px, 4vw, 30px) clamp(26px, 5vw, 40px);
}
.product-copy {
  margin-inline: clamp(20px, 6.6vw, 50px);
  max-width: 560px;
}
.product-copy h2,
.entry-section > h2,
.campaign-rules h2 {
  font-family: "Stolzl", Arial, sans-serif;
  font-weight: 700;
}
.product-copy h2 {
  font-size: clamp(23px, 4.1vw, 31px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.product-copy p {
  font-size: clamp(12px, 2.25vw, 16px);
  line-height: 1.22;
  margin: 0 0 16px;
}
.product-image { margin-top: clamp(38px, 8.5vw, 64px); }
.product-image img {
  border-radius: clamp(26px, 6.5vw, 50px);
  width: 100%;
  max-height: 400px;
}

.entry-section { padding: 0 clamp(18px, 3.8vw, 30px) clamp(54px, 9vw, 72px); }
.section-rule { border-top: 1px solid var(--line); height: 1px; width: 100%; }
.entry-section > h2 {
  font-size: clamp(25px, 4.7vw, 35px);
  line-height: 1.1;
  margin: clamp(22px, 4vw, 31px) 0 clamp(24px, 4.5vw, 34px);
  text-align: center;
}
.entry-form { margin-inline: auto; max-width: 400px; }
.form-field { display: block; margin: 0 0 7px; }
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.form-field input,
.form-field select {
  appearance: none;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink);
  font-size: 13px;
  min-height: 40px;
  outline: none;
  padding: 8px 12px;
  width: 100%;
}
.form-field input::placeholder { color: #818181; opacity: 1; }
.form-field input:focus,
.form-field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(54, 105, 77, .18);
}
.council-fieldset { border: 0; margin: 21px 0 8px; padding: 0; }
.council-fieldset legend {
  color: #727272;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 0;
}
.council-options { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); }
.council-options label {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #626262;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 40px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.council-options label:hover { transform: translateY(-1px); }
.council-options label.selected { background: var(--green); color: #fff; }
.council-options input { opacity: 0; pointer-events: none; position: absolute; }
.council-options span { font-size: 13px; font-weight: 700; }
.registry-field { margin-top: 7px; }
.entry-form small { color: var(--muted); display: block; font-size: 9px; margin: 4px 3px 0; }
.state-field[hidden],
.form-error[hidden] { display: none !important; }
.consent {
  align-items: flex-start;
  color: #5d5b56;
  display: flex;
  font-size: 9px;
  gap: 8px;
  line-height: 1.35;
  margin: 13px 2px 0;
}
.consent input { accent-color: var(--green); flex: 0 0 auto; margin: 1px 0 0; }
.honeypot {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.form-error {
  background: #f7d9d9;
  border-radius: 8px;
  color: #791b1b;
  font-size: 11px;
  line-height: 1.45;
  margin: 10px 0 0;
  padding: 10px 12px;
}
.entry-form button {
  background: var(--green);
  border: 0;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font-family: "Neue Machina", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
  min-height: 40px;
  padding: 8px 16px;
  width: 100%;
}
.entry-form button:disabled { cursor: wait; opacity: .65; }
.entry-form button:focus-visible,
.council-options label:has(input:focus-visible) { outline: 3px solid rgba(54, 105, 77, .4); outline-offset: 2px; }
.form-note { color: var(--muted); font-size: 9px; line-height: 1.4; margin: 8px 0 0; text-align: center; }

.campaign-context { padding: 0 clamp(18px, 3.8vw, 30px) clamp(17px, 3vw, 24px); }
.campaign-context p {
  font-size: clamp(8px, 1.65vw, 11px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  margin: clamp(15px, 3vw, 22px) 0 0;
}
.campaign-rules {
  background: #000;
  color: #fff;
  padding: 10px clamp(14px, 3.5vw, 28px) clamp(20px, 4vw, 32px);
  text-align: center;
}
.campaign-rules h2 { font-size: clamp(10px, 1.9vw, 13px); margin: 0 0 12px; }
.campaign-rules p {
  font-size: clamp(8px, 1.55vw, 10.5px);
  line-height: 1.55;
  margin: 8px auto;
  max-width: 700px;
}
.campaign-rules address {
  font-size: clamp(9px, 1.75vw, 12px);
  font-style: normal;
  line-height: 1.8;
  margin-top: 14px;
}

body.thanks-page {
  background: var(--paper);
  border-top: 1px solid var(--rose);
  margin-inline: auto;
  max-width: 760px;
  min-height: 100vh;
}
.site-header { background: var(--rose); color: #fff; padding: 24px clamp(22px, 6vw, 46px); }
.site-header a { color: inherit; text-decoration: none; }
.site-header .brand-logo { width: clamp(78px, 18vw, 132px); }
.thanks-main { padding: clamp(44px, 9vw, 72px) clamp(22px, 7vw, 54px); }
.thanks-card { background: #fff; border-radius: 22px; padding: clamp(28px, 7vw, 52px); }
.check-wrap {
  align-items: center;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  height: 72px;
  justify-content: center;
  margin: 0 auto 28px;
  width: 72px;
}
.check-icon { fill: none; height: 34px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; width: 34px; }
.check-icon path { animation: draw-check .8s .15s cubic-bezier(.65,0,.35,1) both; stroke-dasharray: 60; stroke-dashoffset: 60; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
.eyebrow { color: var(--rose); font-size: 10px; font-weight: 700; letter-spacing: .12em; margin: 0 0 10px; text-align: center; text-transform: uppercase; }
.thanks-copy h1 { font-size: clamp(30px, 7vw, 50px); line-height: 1.02; margin: 0; text-align: center; }
.thanks-copy > p { font-size: 13px; line-height: 1.6; margin: 20px auto; max-width: 500px; text-align: center; }
.thanks-rule { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 8px; margin-block: 24px; padding-block: 18px; text-align: center; }
.thanks-rule span { font-size: 10px; }
.thanks-rule strong { color: var(--rose); font-family: "Neue Machina"; font-size: 28px; }
.thanks-back { color: var(--green); display: block; font-size: 11px; font-weight: 700; text-align: center; text-underline-offset: 4px; }
.thanks-image { margin-top: 20px; overflow: hidden; }
.thanks-image img { border-radius: 22px; width: 100%; max-height:400px;}

@media (min-width: 900px) {
  body { background: var(--paper); }
  .site-shell { max-width: none; width: 100%; }

  .campaign-hero {
    aspect-ratio: auto;
    grid-template-columns: 52% 48%;
    height: clamp(640px, 80vh, 840px);
    min-height: 0;
  }
  .hero-photo { border-bottom-right-radius: 42px; }
  .hero-photo img { object-position: 53% 60%; }
  .hero-panel {
    padding: clamp(58px, 5.8vw, 110px);
  }
  .hero-panel .brand-logo { width: clamp(150px, 11vw, 210px); }
  .hero-panel h1 {
    bottom: clamp(64px, 8vh, 96px);
    font-size: clamp(36px, 2.7vw, 52px);
    left: clamp(58px, 5.8vw, 110px);
    max-width: 620px;
    right: clamp(58px, 5.8vw, 110px);
  }

  .product-section {
    align-items: center;
    display: grid;
    gap: clamp(60px, 7vw, 140px);
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
    min-height: 760px;
    padding: clamp(96px, 8vw, 150px) max(5vw, calc((100vw - 1560px) / 2));
  }
  .product-copy { margin: 0; max-width: 560px; }
  .product-copy h2 {
    font-size: clamp(38px, 3.2vw, 54px);
    margin-bottom: 24px;
  }
  .product-copy p {
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.45;
    margin-bottom: 22px;
  }
  .product-image { margin-top: 0; }
  .product-image img { border-radius: clamp(46px, 4vw, 72px);max-height: 600px; }

  .entry-section {
    column-gap: clamp(70px, 10vw, 190px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, .85fr);
    padding: 0 max(5vw, calc((100vw - 1560px) / 2)) clamp(100px, 9vw, 150px);
  }
  .entry-section .section-rule { grid-column: 1 / -1; }
  .entry-section > h2 {
    font-size: clamp(48px, 4.1vw, 72px);
    margin: clamp(72px, 7vw, 112px) 0 0;
    max-width: 560px;
    text-align: left;
  }
  .entry-form {
    margin: clamp(68px, 6vw, 96px) 0 0 auto;
    max-width: 560px;
    width: 100%;
  }
  .form-field input,
  .form-field select {
    font-size: 14px;
    min-height: 48px;
    padding: 11px 16px;
  }
  .council-options label { min-height: 48px; }
  .council-options span { font-size: 14px; }
  .entry-form button { font-size: 16px; min-height: 48px; }

  .campaign-context {
    padding: 0 max(5vw, calc((100vw - 1560px) / 2)) 40px;
  }
  .campaign-context p {
    font-size: 12px;
    line-height: 1.7;
    margin: 28px auto 0;
    max-width: 1380px;
  }
  .campaign-rules {
    padding: 30px max(5vw, calc((100vw - 1560px) / 2)) 42px;
  }
  .campaign-rules h2 { font-size: 16px; margin-bottom: 18px; }
  .campaign-rules p { font-size: 12px; max-width: 1100px; }
  .campaign-rules address { font-size: 14px; margin-top: 20px; }

  body.thanks-page { max-width: none; width: 100%; }
  .site-header { padding: 30px max(5vw, calc((100vw - 1560px) / 2)); }
  .site-header .brand-logo { width: 165px; }
  .thanks-main {
    align-items: stretch;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    margin-inline: auto;
    max-width: 1500px;
    padding: clamp(70px, 7vw, 110px) clamp(50px, 7vw, 100px);
  }
  .thanks-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .thanks-image { margin-top: 0; }
  .thanks-image img { height: 100%; object-fit: cover;max-height: fit-content;}
}

@media (max-width: 370px) {
  .hero-panel h1 { font-size: 12px; }
  .brand-logo { width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .check-icon path { animation: none; stroke-dashoffset: 0; }
  .council-options label { transition: none; }
}