/* =============================================================
   Crop Consultant Conference — Exhibitor & Sponsor sales page.
   A reskin of the JCS booth-sales layout (cf. /row-crop) in the
   CCC brand: royal blue + silver + charcoal on cool ivory.
   Single static stylesheet. No build step, no runtime CDN.
   ============================================================= */

/* ---- Self-hosted variable fonts (latin subset) ---- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root {
  /* CCC brand: royal blue (from the logo) + silver + charcoal, on cool
     ivory. Variable NAMES are inherited from the Row Crop base so every
     downstream rule re-themes from these values alone. */
  --red: #1d4ed8;          /* CCC royal blue — primary CTA + accents */
  --red-deep: #1637a6;     /* hover / pressed */
  --green: #16356f;        /* CCC navy — eyebrows, links, bands, checks */
  --green-deep: #0e2350;   /* deep navy band */
  --green-mid: #2f548f;
  --leaf-tint: #dbe4f2;    /* pale steel */
  --leaf-light: #b9cdec;   /* silver-blue, legible on dark */
  --sage: #9fb6d8;
  --blueberry: #1d4ed8;    /* accent (footer stitch) */
  --blueberry-light: #93a9e2;
  --cream: #f5f7fb;        /* cool ivory background (no pure white) */
  --cream-deep: #e8eef7;
  --ink: #15202e;          /* cool charcoal */
  --ink-soft: #52606f;

  --hair: rgba(21, 32, 46, 0.14);
  --hair-strong: rgba(21, 32, 46, 0.3);
  --hair-on-dark: rgba(245, 247, 251, 0.22);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 70rem;
  --measure: 40rem;
  --radius: 6px;
  --bar-h: 4.25rem;

  --noise-dark: url("img/grain-dark.png");
  --noise-light: url("img/grain-light.png");
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.18rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-deep); }

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

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

/* Accessibility: skip link + visually hidden */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--green-deep);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ---- Texture utilities ---- */
.tex-paper, .tex-print { position: relative; }
.tex-paper::before, .tex-print::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise-dark);
  background-size: 128px 128px;
  opacity: 0.6;
}
.tex-print::before { background-image: var(--noise-light); opacity: 0.5; }
.tex-paper > *, .tex-print > * { position: relative; }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4.5vw, 3rem);
}
.section { padding-block: clamp(3.25rem, 8vw, 6.5rem); }
.measure { max-width: var(--measure); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); }

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--green);
  opacity: 0.7;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.85rem);
  color: var(--ink);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  color: var(--ink);
}
p { max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.microcopy {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  min-height: 2.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(33, 30, 28, 0.16); }
.btn--primary:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(157, 15, 25, 0.32); }
.btn--primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(33, 30, 28, 0.16); }
.btn--cream-red { background: var(--cream); color: var(--red-deep); box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.btn--cream-red:hover { background: #fff; color: var(--red-deep); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.btn--cream-green { background: var(--cream); color: var(--green-deep); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.btn--cream-green:hover { background: #fff; color: var(--green-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--sm { font-size: 0.82rem; padding: 0.6rem 1rem; min-height: 2.4rem; }
.btn--lg { font-size: 1.05rem; padding: 1.1rem 2rem; min-height: 3.3rem; }
.section--band .btn--primary { box-shadow: 0 0 0 1px rgba(250, 246, 239, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25); }
.section--band .btn--primary:hover { box-shadow: 0 0 0 1px rgba(250, 246, 239, 0.32), 0 8px 22px rgba(0, 0, 0, 0.35); }

/* ---- Top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.topbar__inner {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}
.wordmark { text-decoration: none; color: var(--ink); line-height: 1; display: block; }
.wordmark__kicker {
  display: block;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.3em;
}
.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.topbar .btn { flex: none; }
.cta-full { display: none; }
.cta-short { display: inline; }
@media (min-width: 30em) {
  .cta-full { display: inline; }
  .cta-short { display: none; }
}

/* ---- Hero: full-bleed editorial ---- */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(33rem, 84vh, 52rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0a1a33;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
  transform-origin: center;
  animation: heroDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-1.4%, -1.2%, 0); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(176deg, rgba(8,16,33,0) 18%, rgba(8,16,33,0.46) 52%, rgba(6,12,26,0.9) 100%),
    linear-gradient(92deg, rgba(6,12,26,0.58) 0%, rgba(6,12,26,0.16) 48%, rgba(6,12,26,0) 72%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: var(--cream);
  text-shadow: 0 1px 20px rgba(8, 10, 6, 0.42);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(250, 246, 239, 0.92);
  margin-bottom: 1.35rem;
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 1px;
  background: rgba(250, 246, 239, 0.55);
}
.hero__logo {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(0.9rem, 3vw, 1.7rem) clamp(1.3rem, 4vw, 2.2rem);
  line-height: 0;
  /* The logo art (dark-green "ROW CROP" wordmark, white CCC badge) is drawn for
     a light ground, so over the bright green field its lettering disappears.
     Darkening behind it makes the dark-green type worse, so we do the opposite:
     a soft cream glow that fades to transparent (no hard panel edge) gives the
     dark text something light to sit on, and a white halo on the art lifts the
     edges off the photo. */
  background: radial-gradient(ellipse at 50% 50%,
                rgba(250, 246, 239, 0.88) 0%,
                rgba(250, 246, 239, 0.66) 40%,
                rgba(250, 246, 239, 0) 72%);
}
.hero__logo picture { display: block; }
.hero__logo img {
  width: min(80vw, 440px);
  height: auto;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.55))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}
.hero__lead {
  margin-top: 1.6rem;
  max-width: 34rem;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  color: rgba(250, 246, 239, 0.94);
}
.hero__actions {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.hero__note {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(250, 246, 239, 0.82);
  max-width: 19rem;
  text-shadow: none;
}

/* ---- Section separation on cream ---- */
.bleed-top { border-top: 1px solid var(--hair); }

/* ---- Why / Who ---- */
.prose > * + * { margin-top: 1.1rem; }
.prose p { color: var(--ink); }

.why-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); align-items: center; }
.why-feature { margin: 0; }
.why-feature img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  border: 6px solid var(--cream);
  box-shadow: 0 0 0 2px var(--green), 0 12px 26px rgba(33, 30, 28, 0.18);
}
.why-feature figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
@media (min-width: 48em) {
  .why-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.who {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--hair);
  padding-top: clamp(2rem, 5vw, 3rem);
}
.who-grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; margin-top: 1.75rem; }
.who-card { text-align: center; }
.medal {
  position: relative;
  width: clamp(116px, 17vw, 140px);
  aspect-ratio: 1;
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--green), 0 0 0 3.5px var(--ink), 0 8px 18px rgba(33, 30, 28, 0.2);
}
.medal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-card__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green);
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  position: relative;
}
.who-card__title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 2.2rem; height: 1px;
  background: var(--green);
  opacity: 0.7;
}
.who-card__body { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; max-width: 21rem; margin-inline: auto; }

.who-note {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--hair);
  text-align: center;
}
.who-note__lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.12;
  color: var(--ink);
  max-width: 24rem;
  margin: 0 auto;
}
.who-note__lead em { font-style: italic; color: var(--green); }
.who-note__sub { font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink-soft); margin: 0.85rem auto 0; max-width: 26rem; }

/* ---- Deep green band (how it works) ---- */
.section--band { background: var(--green-deep); color: var(--cream); }
.section--band h2 { color: #fff; }
.section--band .eyebrow { color: var(--leaf-light); }
.section--band .eyebrow::before { background: var(--leaf-light); }

.steps { display: grid; grid-template-columns: 1fr; margin-top: 1rem; }
.step {
  padding-block: 1.6rem;
  border-top: 1px solid var(--hair-on-dark);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2rem);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--hair-on-dark); }
.step__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
  line-height: 1;
  color: var(--leaf-light);
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #fff; margin-bottom: 0.4rem; }
.step__body { color: rgba(250, 246, 239, 0.85); font-size: 1.02rem; line-height: 1.55; max-width: 34rem; }
.steps-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.steps-cta .microcopy { color: rgba(250, 246, 239, 0.7); }

/* ---- Featured full-bleed field band ---- */
.field-band { position: relative; width: 100%; line-height: 0; }
.field-band img { width: 100%; height: clamp(220px, 40vh, 460px); object-fit: cover; object-position: center 55%; display: block; }
.field-band figcaption {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(0.85rem, 2vw, 1.4rem);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--hair); max-width: 48rem; }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2.75rem 1.4rem 0;
  position: relative;
  transition: color 0.15s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green-deep); }
.faq__q::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.42rem;
  background:
    linear-gradient(var(--green), var(--green)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--green), var(--green)) center / 1.5px 100% no-repeat;
}
.faq__item[open] .faq__q::after { background: linear-gradient(var(--green), var(--green)) center / 100% 1.5px no-repeat; }
.faq__item[open] .faq__q { color: var(--green-deep); }
.faq__a { padding: 0 2.75rem 1.6rem 0; }
.faq__a p { color: var(--ink-soft); font-size: 1.02rem; }
.faq__a p + p { margin-top: 0.8rem; }

/* ---- Updates: deep green band ---- */
.updates__inner { max-width: 46rem; }
.updates__inner h2 { margin-bottom: 0.75rem; }
.updates__inner .microcopy { margin-bottom: 1.6rem; max-width: 32rem; font-size: 0.92rem; color: rgba(250, 246, 239, 0.82); }
.signup { display: grid; grid-template-columns: 1fr; gap: 0.9rem 1rem; max-width: 34rem; }
.signup .field { display: flex; flex-direction: column; gap: 0.4rem; }
.signup .field--full { grid-column: 1 / -1; }
.updates-submit { grid-column: 1 / -1; justify-self: start; margin-top: 0.4rem; }
.field-label { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--leaf-tint); }
input[type="email"], input[type="text"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(33, 30, 28, 0.35);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-height: 2.95rem;
  width: 100%;
}
input[type="email"]:focus-visible, input[type="text"]:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); }
.form-fineprint { margin-top: 0.9rem; font-size: 0.78rem; color: var(--leaf-tint); font-family: var(--font-ui); }

/* ---- Final call: full-bleed strawberry red ---- */
.finale { background: var(--red); color: var(--cream); text-align: center; }
.finale__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 2.25rem); }
.finale h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); max-width: 18em; line-height: 1.08; }
.finale__note { font-family: var(--font-ui); font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }

/* ---- Footer ---- */
.footer { background: var(--ink); color: rgba(250, 246, 239, 0.78); border-top: 3px solid var(--green); }
.footer__inner { padding-block: clamp(2.75rem, 7vw, 4rem); display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff; margin-bottom: 0.5rem; }
.footer__about { font-size: 0.95rem; line-height: 1.6; max-width: 34rem; color: rgba(250, 246, 239, 0.78); }
.footer__contact { font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.8; }
.footer__contact a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--hair-on-dark); }
.footer__contact a:hover { color: #fff; border-color: #fff; }
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-on-dark);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(250, 246, 239, 0.6);
}
.footer__stitch { text-transform: uppercase; letter-spacing: 0.16em; }
.footer__stitch a { color: var(--blueberry-light); text-decoration: none; font-weight: 600; }
.footer__stitch a:hover { color: #fff; }

/* ---- Thanks page ---- */
.confirm { min-height: 60vh; display: flex; align-items: center; }
.confirm__inner { max-width: 40rem; }
.confirm__seal {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: rgba(56, 102, 65, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.75rem;
}
.confirm__seal svg { width: 2.1rem; height: 2.1rem; }
.confirm h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.04;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem);
  margin-bottom: 1.25rem;
}
.confirm .prose > * + * { margin-top: 1.1rem; }
.statement { margin-top: 1.5rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-soft); }
.statement code { font-family: var(--font-ui); background: var(--cream-deep); border: 1px solid var(--hair); border-radius: 4px; padding: 0.1em 0.45em; font-size: 0.92em; letter-spacing: 0.05em; color: var(--ink); }
.confirm__photo { margin: 2.25rem 0 0; width: 100%; }
.confirm__photo img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  border: 6px solid var(--cream);
  box-shadow: 0 0 0 2px var(--green), 0 12px 26px rgba(33, 30, 28, 0.18);
}
.share { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hair); }
.share h3 { margin-bottom: 0.9rem; }

/* ---- Responsive ---- */
@media (min-width: 40em) {
  .who-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .signup { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 56em) {
  .footer__inner { grid-template-columns: 1.6fr 1fr; gap: 3rem 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero__img { animation: none; }
}

/* =============================================================
   Exhibitor sales page additions (exhibit.html).
   A reskin of the JCS booth-sales layout (cf. /events/pistachio-day)
   in the Row Crops design system. Page-specific classes only;
   nothing here changes index.html except .who-card__link.
   ============================================================= */

/* Heading emphasis (italic accent inside h2 / hero title) */
h2 em, .h2 em { font-style: italic; color: var(--red); }
.section--band h2 em { color: var(--leaf-light); }
.finale h2 em { color: #fff; }
.hero__title em { font-style: italic; color: var(--leaf-light); }

/* Intro copy under a section heading */
.lead-copy { margin-top: 1rem; max-width: 44rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem); color: var(--ink-soft); }
.lead-copy--band { color: rgba(250, 246, 239, 0.85); }

/* Light link for use on color bands */
.link-light { color: var(--leaf-light); text-decoration: underline; text-underline-offset: 2px; }
.link-light:hover { color: #fff; }

/* ---- Urgency strip (above the sticky bar) ---- */
.urgency-strip { background: var(--red); color: #fff; font-family: var(--font-ui); }
.urgency-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.25rem; padding-block: 0.5rem; font-size: 0.78rem; letter-spacing: 0.02em; text-align: center; }
.urgency-strip__msg { font-weight: 600; }
.urgency-strip__phone { color: #fff; text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.urgency-strip__phone:hover { color: #fff; border-color: #fff; }

/* ---- Hero: sales variant ---- */
.hero--sales { min-height: clamp(34rem, 82vh, 50rem); }
/* Premium "B2B temperature": a deeper, more cinematic scrim than the shared base.
   Darkens the top (gravitas) and the bottom-left text zone (legibility) while
   leaving a clear window for the sunrise glow. Scoped to the sales hero only, so
   the welcoming attendee hero (myaglife.com/row-crop) keeps the lighter base scrim. */
.hero--sales .hero__scrim {
  background:
    linear-gradient(180deg,
      rgba(6, 12, 26, 0.46) 0%,
      rgba(6, 12, 26, 0.08) 20%,
      rgba(6, 12, 26, 0) 40%,
      rgba(6, 12, 26, 0.28) 62%,
      rgba(4, 9, 20, 0.96) 100%),
    linear-gradient(90deg,
      rgba(4, 9, 20, 0.7) 0%,
      rgba(4, 9, 20, 0.2) 45%,
      rgba(4, 9, 20, 0) 72%),
    radial-gradient(130% 110% at 72% 33%,
      rgba(3, 7, 16, 0) 45%,
      rgba(3, 7, 16, 0.42) 100%);
}
.hero__logo--mark { margin-bottom: clamp(0.9rem, 2.5vw, 1.3rem); }
.hero__logo--mark { padding: clamp(0.7rem, 2.4vw, 1.3rem) clamp(1rem, 3vw, 1.7rem); }
.hero__logo--mark img { width: min(54vw, 290px); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.06;
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.3rem);
  color: #fff;
  max-width: 16em;
}
.snapshot { list-style: none; padding: 0; margin: clamp(1.5rem, 4vw, 2rem) 0 0; display: grid; grid-template-columns: repeat(2, auto); gap: 0.9rem 2.25rem; max-width: 32rem; }
.snapshot li { display: flex; flex-direction: column; gap: 0.15rem; }
.snapshot__k { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.62rem; font-weight: 600; color: rgba(250, 246, 239, 0.72); }
.snapshot__v { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--cream); }
@media (min-width: 44em) { .snapshot { grid-template-columns: repeat(4, auto); } }

/* ---- Stat band ---- */
.statband { background: var(--cream-deep); border-bottom: 1px solid var(--hair); }
.statband__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; padding-block: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.05rem); color: var(--red); line-height: 1; letter-spacing: -0.01em; }
.stat__label { font-family: var(--font-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); line-height: 1.3; }
@media (min-width: 48em) { .statband__inner { grid-template-columns: repeat(4, 1fr); } }

/* ---- Why exhibit: six benefits ---- */
.benefits { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3.5vw, 2rem); }
.benefit { border-top: 2px solid var(--green); padding-top: 1.1rem; }
.benefit__num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.4rem; color: var(--green); line-height: 1; margin-bottom: 0.5rem; }
.benefit__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink); margin-bottom: 0.45rem; }
.benefit__body { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
@media (min-width: 38em) { .benefits { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
@media (min-width: 60em) { .benefits { grid-template-columns: repeat(3, 1fr); } }

/* ---- JCS difference: three segments (green band) ---- */
.segments { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.segment { border-top: 1px solid var(--hair-on-dark); padding-top: 1.2rem; }
.segment__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #fff; margin-bottom: 0.5rem; }
.segment__body { color: rgba(250, 246, 239, 0.85); font-size: 1rem; line-height: 1.55; }
@media (min-width: 48em) { .segments { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---- Who's in the room ---- */
.room-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); align-items: center; }
@media (min-width: 48em) { .room-grid { grid-template-columns: 1fr 1fr; } }

/* Checklist with drawn checkmarks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.checklist li { position: relative; padding-left: 1.9rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--green); }
.checklist li::after { content: ""; position: absolute; left: 0.35rem; top: 0.42rem; width: 0.46rem; height: 0.24rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.checklist--band li { color: var(--cream); }
.checklist--band li::before { background: var(--leaf-light); }
.checklist--band li::after { border-color: var(--green-deep); }

/* ---- Program note + CE callout ---- */
.program-note { background: var(--cream-deep); border: 1px solid var(--hair); border-left: 4px solid var(--green); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); max-width: 46rem; }
.program-note__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin-bottom: 0.5rem; }
.program-note__sub { color: var(--ink-soft); font-size: 1rem; margin: 0; max-width: none; }
.ce-callout { margin-top: clamp(1.5rem, 3.5vw, 2rem); background: var(--leaf-tint); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); max-width: 46rem; }
.ce-callout__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 600; color: var(--green-deep); margin-bottom: 0.5rem; }
.ce-callout__body { color: var(--ink); font-size: 1rem; margin: 0; max-width: none; }

/* ---- Founding band ---- */
.founding { max-width: 46rem; }
.founding h2 { margin-bottom: 0.75rem; }
.founding .btn { margin-top: clamp(1.5rem, 3.5vw, 2rem); }

/* ---- Sponsorship tiers ---- */
.tiers { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.tier { background: var(--cream); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; }
.tier--feature { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 12px 26px rgba(33, 30, 28, 0.12); }
.tier__flag { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; font-weight: 700; color: var(--red); margin-bottom: 0.7rem; }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--ink); margin-bottom: 0.4rem; }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.tier__price-note { font-family: var(--font-ui); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.tier__benefits { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.6rem; }
.tier__benefits li { position: relative; padding-left: 1.4rem; font-size: 0.96rem; line-height: 1.45; color: var(--ink-soft); }
.tier__benefits li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); }
.tier__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tier__actions .btn { flex: 1 1 auto; }
.tiers__more { margin-top: 1.5rem; }
@media (min-width: 52em) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* ---- Exhibit booths (green band) ---- */
.booths { display: grid; border-top: 1px solid var(--hair-on-dark); }
.booth-row { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--hair-on-dark); }
.booth-row__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #fff; }
.booth-row__desc { grid-column: 1; font-family: var(--font-ui); font-size: 0.85rem; color: rgba(250, 246, 239, 0.75); }
.booth-row__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--leaf-light); }
.booths__note { margin-top: 1rem; color: rgba(250, 246, 239, 0.8) !important; }
.includes-block, .addons { margin-top: clamp(2rem, 4vw, 3rem); }
.includes-block__title, .addons__title { color: #fff; margin-bottom: 1.1rem; }
.addons__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: rgba(250, 246, 239, 0.08); border: 1px solid var(--hair-on-dark); border-radius: var(--radius); padding: 0.75rem 1rem; }
.addon__name { font-family: var(--font-ui); font-size: 0.9rem; color: var(--cream); }
.addon__price { font-family: var(--font-display); font-weight: 700; color: var(--leaf-light); }
@media (min-width: 40em) { .addons__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Complete menu ---- */
.menu-cols { display: grid; grid-template-columns: 1fr; gap: 1.75rem 2rem; }
.menu-col__title { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 700; color: var(--green); padding-bottom: 0.6rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--hair); }
.menu-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.menu-col li { font-size: 0.98rem; color: var(--ink-soft); }
.menu-col--custom p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 1rem; max-width: none; }
.menu-col--custom .btn { width: 100%; }
@media (min-width: 40em) { .menu-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }

/* ---- Finale additions ---- */
.finale__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.finale__lead { font-family: var(--font-body); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: rgba(255, 255, 255, 0.92); max-width: 40rem; }
.finale__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---- Reserve / contact cards ---- */
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(1.5rem, 3.5vw, 2rem); }
.contact-card { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; background: var(--cream); border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.25rem 1.4rem; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.contact-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(33, 30, 28, 0.12); color: var(--ink); }
.contact-card__k { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 700; color: var(--green); }
.contact-card__v { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink); }
@media (min-width: 48em) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card--soon { cursor: default; }
.contact-card--soon:hover { border-color: var(--hair); transform: none; box-shadow: none; }
.contact-card--soon .contact-card__v { color: var(--ink-soft); font-size: 1.05rem; }

/* ---- Footer address + event lines ---- */
.footer__address { font-family: var(--font-ui); font-size: 0.82rem; color: rgba(250, 246, 239, 0.6); margin-top: 0.75rem; }
.footer__event { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: rgba(250, 246, 239, 0.85); margin-top: 0.75rem; }

/* Cross-link from the index "Industry" card to the exhibitor page */
.who-card__link { margin-top: 0.85rem; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; }
.who-card__link a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* =============================================================
   Exhibitor page motion: scroll-reveal + hover micro-interactions.
   Reveal is gated by .reveal-on (added by an inline script only when
   the visitor has not requested reduced motion). Shared-class hovers
   are scoped under .exhibit so index.html is unaffected.
   ============================================================= */
@keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.reveal-on :is(.section-head, .benefit, .segment, .stat, .tier, .booth-row, .addon, .contact-card, .program-note, .ce-callout, .field-band, .quote, .faq__item, .hero__content > *):not(.is-visible) { opacity: 0; transform: translateY(22px); }
.reveal-on .is-visible { animation: revealUp 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) var(--rd, 0ms) both; }
.reveal-on .reveal-done { animation: none; opacity: 1; transform: none; }

/* Hover: benefits */
.benefit { transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease; }
.benefit:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(33, 30, 28, 0.12); border-top-color: var(--red); }
.benefit__num, .benefit__title { transition: color 0.25s ease; }
.benefit:hover .benefit__num { color: var(--red); }
.benefit:hover .benefit__title { color: var(--red-deep); }

/* Hover: sponsorship tiers */
.tier { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.tier:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(33, 30, 28, 0.16); }
.tier--feature:hover { box-shadow: 0 0 0 2px var(--red), 0 18px 40px rgba(157, 15, 25, 0.22); }
.tier__name { transition: color 0.2s ease; }
.tier:hover .tier__name { color: var(--red-deep); }

/* Hover: JCS-difference segments (green band) */
.segment { transition: transform 0.25s ease, border-top-color 0.25s ease; }
.segment:hover { transform: translateY(-3px); border-top-color: var(--leaf-light); }
.segment__title { transition: color 0.2s ease; }
.segment:hover .segment__title { color: var(--leaf-light); }

/* Hover: menu columns */
.menu-col__title { transition: color 0.2s ease, border-color 0.2s ease; }
.menu-col:hover .menu-col__title { color: var(--red); border-bottom-color: var(--red); }

/* Hover: booth rows (green band) */
.booth-row { transition: background-color 0.2s ease, padding-left 0.2s ease; }
.booth-row:hover { background: rgba(250, 246, 239, 0.06); padding-left: 0.6rem; }
.booth-row__price { transition: color 0.2s ease; }
.booth-row:hover .booth-row__price { color: #fff; }

/* Hover: contact cards */
.contact-card__v { transition: color 0.18s ease; }
.contact-card:hover .contact-card__v { color: var(--green-deep); }

/* Hover: stat figures */
.stat__big { transition: transform 0.25s ease, color 0.25s ease; }
.stat:hover .stat__big { transform: scale(1.05); color: var(--red-deep); }

/* Add-on chips: prominent cream pills that link to the reserve section */
.addon { background: var(--cream); border-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.addon__name { color: var(--ink); transition: color 0.2s ease; }
.addon__price { color: var(--red); transition: color 0.2s ease; }
.addon:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); color: var(--ink); }
.addon:hover .addon__price { color: var(--red-deep); }
.addon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Hover: feature images (scoped to the sales page) */
.exhibit .field-band { overflow: hidden; }
.exhibit .field-band img { transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.exhibit .field-band:hover img { transform: scale(1.05); }
.exhibit .why-feature img { transition: transform 0.5s ease, box-shadow 0.5s ease; }
.exhibit .why-feature:hover img { transform: scale(1.02); box-shadow: 0 0 0 2px var(--green), 0 18px 40px rgba(33, 30, 28, 0.24); }

/* Sticky bar elevation once scrolled (sales page) */
.exhibit .topbar { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.exhibit .topbar.is-stuck { box-shadow: 0 6px 22px rgba(33, 30, 28, 0.1); }

/* =============================================================
   Premium B2B temperature — pass 2.
   Charcoal accents that set the exhibitor page apart from the light
   attendee page: a dark "stats deck" flowing out of the cinematic hero,
   and an inverted (dark) Title Sponsor card so the marquee, category-
   exclusive buy visually stands apart from the two cream tiers.
   Palette is CCC royal-blue / silver / charcoal on cool ivory.
   ============================================================= */

/* Stats deck: dark, reads as a continuation of the hero */
.statband {
  background: var(--ink);
  border-top: 2px solid var(--red);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.statband .stat__big {
  color: var(--cream);
  position: relative;
  padding-bottom: 0.6rem;
}
.statband .stat__big::after {       /* refined red underline accent under each figure */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 1.4rem; height: 2px;
  border-radius: 1px;
  background: var(--red);
  opacity: 0.9;
}
.statband .stat__label { color: rgba(250, 246, 239, 0.64); }
.statband .stat:hover .stat__big { color: #fff; }

/* Title Sponsor: inverted dark card = the premium, category-exclusive buy */
.tier--feature {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 0 0 2px var(--red), 0 16px 34px rgba(33, 30, 28, 0.28);
}
.tier--feature .tier__name,
.tier--feature .tier__price { color: #fff; }
.tier--feature .tier__price-note { color: rgba(250, 246, 239, 0.66); }
.tier--feature .tier__benefits li { color: rgba(250, 246, 239, 0.84); }
.tier--feature .tier__benefits li::before { background: var(--red); }
.tier--feature .tier__flag {        /* turn the scarcity flag into a red "badge" pill */
  align-self: flex-start;
  color: #fff;
  background: var(--red);
  padding: 0.28rem 0.66rem;
  border-radius: 3px;
}
.tier--feature .btn--ghost { color: var(--cream); border-color: rgba(250, 246, 239, 0.5); }
.tier--feature .btn--ghost:hover { color: #fff; border-color: #fff; }
.tier--feature:hover { box-shadow: 0 0 0 2px var(--red), 0 20px 44px rgba(157, 15, 25, 0.3); }
.tier--feature:hover .tier__name { color: #fff; }

/* Closing CTA: give the flat brand-red band subtle vertical depth so the final
   call feels crafted (and distinct from the attendee site's flat-red finale). */
.finale { background: linear-gradient(180deg, #2a5be8 0%, var(--red) 38%, var(--red-deep) 100%); }

/* =============================================================
   Premium B2B temperature — pass 3: depth + conversion focus.
   ============================================================= */

/* Green bands: subtle top-lit depth so the three deep-green bands read as
   dimensional and crafted (same idea as the finale) instead of flat repeats. */
.section--band {
  background: linear-gradient(180deg, #1b3a78 0%, var(--green-deep) 58%, #0a1e47 100%);
}

/* Reserve step: "Call to reserve" becomes the weighted primary action —
   a charcoal card among the cream ones, matching the premium accent language. */
.contact-card--primary { background: var(--ink); border-color: var(--ink); }
.contact-card--primary .contact-card__k { color: var(--leaf-light); }
.contact-card--primary .contact-card__v { color: #fff; }
.contact-card--primary:hover {
  border-color: var(--red);
  background: #131c28;
  box-shadow: 0 12px 26px rgba(33, 30, 28, 0.24);
}
.contact-card--primary:hover .contact-card__v { color: #fff; }

/* =============================================================
   Premium B2B temperature — pass 4: the "pricing zone".
   Turn the Exhibit booths band charcoal so it pairs with the (also
   charcoal) Title Sponsor card just above it into one premium buying
   zone. Shares the stats deck's red top rule as a charcoal-section
   signature. Inner content was already built light-on-dark, so it
   carries over; only the band background + rule change here.
   ============================================================= */
.section--ink {
  background: var(--ink);
  border-top: 2px solid var(--red);
}

/* =============================================================
   CCC-specific components (not in the Row Crop base):
   hero wordmark lockup, crop-tag row, advertiser logo wall,
   deep-linked booth rows. CCC brand = royal blue + silver.
   ============================================================= */

/* Hero wordmark lockup — live-text CCC mark (white name + silver
   "CONFERENCE" bar) so it reads crisply over the dark hero without a
   white logo box. Mirrors the printed CCC logo's structure. */
.ccc-lockup { margin: 0 0 clamp(1.1rem, 3vw, 1.6rem); line-height: 1; }
.ccc-lockup__name {
  display: block;
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 1.2rem + 3.9vw, 4rem);
  color: #fff;
  text-shadow: 0 2px 24px rgba(4, 9, 20, 0.55);
}
.ccc-lockup__bar {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.34em 0.95em 0.34em calc(0.95em + 0.42em);
  background: linear-gradient(180deg, #f4f7fb 0%, #c4d0e1 47%, #9eb0c7 53%, #dbe3ee 100%);
  border-radius: 3px;
  box-shadow: 0 2px 12px rgba(4, 9, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ccc-lockup__bar span {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: clamp(0.7rem, 0.5rem + 0.7vw, 1.05rem);
  color: #15202e;
}

/* Crop-tag row — the crops this audience advises on */
.crop-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.crop-tag {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green);
  background: var(--cream-deep);
  border: 1px solid var(--hair);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.crop-tag:hover { background: var(--green); color: #fff; transform: translateY(-1px); }

/* Advertiser logo wall — proof of the JCS network. Framed as brands that
   advertise across JCS publications, NOT a claim of past CCC exhibiting. */
.logo-wall { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-cell {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.9rem, 3vw, 1.6rem);
  min-height: 6rem;
}
.logo-cell img {
  max-height: 2.9rem;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.logo-cell:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }
@media (min-width: 34em) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52em) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 72em) { .logo-grid { grid-template-columns: repeat(6, 1fr); } }

/* Booth rows that deep-link to live pricing / checkout */
a.booth-row { text-decoration: none; cursor: pointer; }
a.booth-row .booth-row__name { transition: color 0.2s ease; }
a.booth-row:hover .booth-row__name { color: var(--leaf-light); }
.booth-row__price--cta { font-size: 1.05rem !important; display: inline-flex; align-items: center; gap: 0.3em; }

/* Topbar logo (replaces the text wordmark) — sized to fill the bar */
.wordmark__logo { display: block; height: clamp(2.5rem, 2rem + 1.6vw, 3rem); width: auto; }

/* =============================================================
   Feedback pass: reversed hero logo, charcoal-band contrast,
   priced booth rows with buy buttons, clickable priced rate card.
   ============================================================= */

/* Hero brand: the real reversed (white) CCC logo over the dark hero */
.hero__brand { margin: 0 0 clamp(1.1rem, 3vw, 1.6rem); line-height: 0; }
.hero__brand img { width: min(82vw, 460px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }

/* Charcoal (section--ink) headings need light text, like the green band */
.section--ink h2 { color: #fff; }
.section--ink h2 em { color: var(--leaf-light); }
.section--ink .eyebrow { color: var(--leaf-light); }
.section--ink .eyebrow::before { background: var(--leaf-light); }

/* Booth rows: info on the left, price + buy button on the right */
.booths .booth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem 1.5rem; flex-wrap: wrap; }
.booth-row__info { display: flex; flex-direction: column; gap: 0.2rem; }
.booth-row__action { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.booth-row__action .booth-row__price { color: var(--leaf-light); }

/* Complete menu → clickable, priced rate card (light background) */
.rate-card { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem) 2.75rem; }
@media (min-width: 46em) { .rate-card { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rate-card { grid-template-columns: repeat(3, 1fr); } }
.rate-group__title { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 700; color: var(--green); padding-bottom: 0.7rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--hair); }
.rate { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); transition: color 0.16s ease, padding-left 0.16s ease; }
.rate:hover { color: var(--red); padding-left: 0.3rem; }
.rate__name { font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.3; }
.rate__price { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); white-space: nowrap; }
.rate:hover .rate__price { color: var(--red); }

/* Social-proof pull quotes (replaces the removed logo wall) */
.proof { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 48em) { .proof { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.quote { background: var(--cream); border: 1px solid var(--hair); border-left: 3px solid var(--red); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.quote:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(21, 32, 46, 0.12); }
.quote__mark { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 0.5; color: var(--red); opacity: 0.45; margin: 0 0 0.6rem; max-width: none; }
.quote__text { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1rem + 0.45vw, 1.22rem); line-height: 1.45; color: var(--ink); margin: 0 0 1.2rem; max-width: none; }
.quote__cite { margin-top: auto; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.quote__cite span { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.8rem; margin-top: 0.15rem; }

/* Slim section nav in the sticky header (desktop only; mobile keeps logo + Reserve) */
.topnav { display: none; }
@media (min-width: 56em) {
  .topnav { display: flex; align-items: center; gap: 1.5rem; }
  .topnav a {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .topnav a:hover { color: var(--red); border-bottom-color: var(--red); }
}