/* ========================================
   CIVIC FORECAST — WORK WITH US (BunnyCDN)
   Pair with: cf-workwithus.js
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---- Full block wrapper (use in HTML) ---- */
.cf-wwu-page {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  isolation: isolate;
  background: #07070B;
  color: #f5f0e8;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Film grain — absolute to this block only (not viewport-fixed) */
.cf-wwu-page::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.024;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.cf-wwu-page > * {
  position: relative;
  z-index: 1;
}

/* ---- Hero zone: ambient glow + rings ---- */
.cf-workwithus {
  position: relative;
  overflow: hidden;
}

.cf-wwu-ambient {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(212,162,67,0.065) 0%, rgba(184,134,45,0.02) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cf-wwu-ring {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(212,162,67,0.035);
  pointer-events: none;
  z-index: 0;
}
.cf-wwu-ring--1 { width: 380px; height: 380px; top: -60px; }
.cf-wwu-ring--2 { width: 560px; height: 560px; top: -150px; border-color: rgba(212,162,67,0.022); }
.cf-wwu-ring--3 { width: 760px; height: 760px; top: -240px; border-color: rgba(212,162,67,0.014); }

.cf-workwithus > .cf-wrap {
  position: relative;
  z-index: 1;
}

.cf-workwithus .cf-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Glass hero — layered over ambient */
.cf-workwithus .cf-hero {
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 40%, transparent 72%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 162, 67, 0.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 56px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,0,0,.25);
}

/* Card / panel elevation */
.cf-workwithus .cf-card,
.cf-workwithus .cf-panel {
  box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 12px 40px rgba(0,0,0,.2);
  transition: border-color 0.25s ease, box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.cf-workwithus .cf-card:hover,
.cf-workwithus .cf-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,.4), 0 28px 72px rgba(0,0,0,.25);
}

.cf-sponsor-strip .cf-package {
  box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 12px 40px rgba(0,0,0,.18);
  transition: border-color 0.25s ease, box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.cf-sponsor-strip .cf-package:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.38), 0 32px 80px rgba(0,0,0,.22);
}

.cf-workwithus .cf-section {
  border-top-color: rgba(212,162,67,0.1);
}

.cf-sponsor-strip {
  border-top: 1px solid rgba(212,162,67,0.1);
  box-shadow: 0 -20px 48px rgba(0,0,0,.18);
}

.cf-partner-row {
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Partner marquee (was inline in HTML) */
.cf-partner-row .cf-marquee-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px) 0;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-radius: var(--cf-radius, 14px);
  border: 1px solid rgba(255,255,255,.06);
}
.cf-partner-row .cf-marquee-wrap::before,
.cf-partner-row .cf-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}
.cf-partner-row .cf-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--cf-bg) 0%, transparent 100%);
}
.cf-partner-row .cf-marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--cf-bg) 0%, transparent 100%);
}
.cf-partner-row .cf-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: cfMarqueeWWU 38s linear infinite;
}
.cf-partner-row .cf-marquee-wrap:hover .cf-marquee-track {
  animation-play-state: paused;
}
.cf-partner-row .cf-marquee-track img {
  height: clamp(36px, 6vw, 52px);
  width: auto;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(0.25) brightness(1.12);
  transition: opacity 0.35s ease, filter 0.35s ease;
  flex-shrink: 0;
}
.cf-partner-row .cf-marquee-track img:hover {
  opacity: 0.92;
  filter: grayscale(0) brightness(1.05);
}
@keyframes cfMarqueeWWU {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .cf-partner-row .cf-marquee-track { gap: 44px; }
  .cf-partner-row .cf-marquee-wrap::before,
  .cf-partner-row .cf-marquee-wrap::after { width: 40px; }
}

/* ===== 15-LOGO MARQUEE SPEED FIX ===== */
/* With 15 logos the track is ~2.5x wider. Slow the animation so logos
   scroll at the same visual speed as before. Add to cf-workwithus.css
   or paste into WP Additional CSS. */

.cf-partner-row .cf-marquee-track {
  animation-duration: 60s;
}

/* Scroll-in motion (cf-workwithus.js adds .cf-reveal) */
.cf-wwu-page .cf-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1), transform 0.65s cubic-bezier(0, 0, 0.2, 1);
}
.cf-wwu-page .cf-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Civic Forecast Work With Us – Design Tokens ===== */
.cf-workwithus,
.cf-sponsor-strip,
.cf-partner-row {
  --cf-bg: #07070B;
  --cf-surface: #111118;
  --cf-surface-2: #16161f;
  --cf-panel: #13131a;
  --cf-text: #f2f2f5;
  --cf-muted: rgba(242,242,245,.82);
  --cf-faint: rgba(242,242,245,.55);
  --cf-border: rgba(242,242,245,.12);
  --cf-accent: #D4A243;
  --cf-accent-hover: #E8B955;
  --cf-accent-subtle: rgba(212,162,67,.18);
  --cf-radius: 14px;
  --cf-radius-sm: 10px;
  --cf-max: 1100px;
  --cf-transition: 0.2s ease;

  background: var(--cf-bg);
  color: var(--cf-text);
}

/* ===== Layout & Structure ===== */
.cf-wrap {
  max-width: var(--cf-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

.cf-workwithus { padding: clamp(32px, 5vw, 64px) 0; }
.cf-sponsor-strip, .cf-partner-row { padding: clamp(32px, 5vw, 64px) 0; }

/* Typography resets (scoped to avoid theme overrides) */
.cf-workwithus, .cf-workwithus p, .cf-workwithus li,
.cf-sponsor-strip, .cf-sponsor-strip p, .cf-sponsor-strip li,
.cf-partner-row, .cf-partner-row p, .cf-partner-row li { color: var(--cf-text); }
.cf-workwithus .cf-lead, .cf-workwithus .cf-note, .cf-workwithus .cf-form-note,
.cf-workwithus .cf-card p, .cf-workwithus .cf-panel p, .cf-workwithus .cf-list li,
.cf-workwithus .cf-bullets, .cf-sponsor-strip .cf-sub, .cf-sponsor-strip .cf-package-desc,
.cf-sponsor-strip .cf-package-bullets, .cf-sponsor-strip .cf-footnote,
.cf-partner-row .cf-sub { color: var(--cf-muted); }

/* ===== Hero ===== */
.cf-hero {
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(165deg, rgba(255,255,255,.04) 0%, transparent 60%);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  margin-bottom: clamp(32px, 5vw, 48px);
}
.cf-eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin: 0 0 12px;
}
.cf-title {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--cf-text);
  font-weight: 700;
}
.cf-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  max-width: 65ch;
  margin: 0 0 24px;
  color: var(--cf-muted);
}
.cf-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===== Buttons ===== */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,67,.50);
  background: transparent;
  color: var(--cf-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--cf-transition), border-color var(--cf-transition), color var(--cf-transition);
}
.cf-btn:hover {
  background: var(--cf-accent-subtle);
  border-color: rgba(212,162,67,.75);
  color: #ffffff;
}
.cf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,162,67,.16);
}
.cf-btn-ghost {
  background: transparent;
  color: var(--cf-text);
  border-color: rgba(212,162,67,.50);
}
.cf-btn-ghost:hover {
  background: var(--cf-accent-subtle);
  border-color: rgba(212,162,67,.75);
  color: #ffffff;
}

/* ===== Links ===== */
.cf-link {
  color: var(--cf-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,162,67,.5);
  transition: border-color var(--cf-transition);
}
.cf-link:hover { border-bottom-color: var(--cf-accent); }

/* ===== Sections ===== */
.cf-section {
  margin: clamp(28px, 4vw, 40px) 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--cf-border);
}
.cf-section-head h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 0 0 8px;
  color: var(--cf-text);
  font-weight: 600;
}
.cf-section-head p {
  margin: 0 0 20px;
  max-width: 70ch;
  color: var(--cf-muted);
}

/* ===== Grid & Cards ===== */
.cf-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .cf-grid-2 { grid-template-columns: 1fr; }
}

.cf-card, .cf-panel {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: clamp(18px, 2.5vw, 22px);
  transition: border-color var(--cf-transition), background var(--cf-transition);
}
.cf-card:hover, .cf-panel:hover {
  border-color: rgba(242,242,245,.2);
}
.cf-card h3, .cf-panel h3 {
  font-size: clamp(15px, 1.2vw, 17px);
  margin: 0 0 10px;
  color: var(--cf-text);
  font-weight: 600;
}
.cf-card p, .cf-panel p {
  margin: 0;
  line-height: 1.6;
  color: var(--cf-muted);
}
.cf-card-wide { padding: clamp(22px, 3vw, 28px); }

/* ===== Split Layout ===== */
.cf-split {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.25fr .75fr;
  align-items: start;
}
@media (max-width: 768px) {
  .cf-split { grid-template-columns: 1fr; }
}
.cf-panel-accent { background: var(--cf-surface-2); }

/* ===== Lists ===== */
.cf-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 14px;
}
.cf-list li { color: var(--cf-muted); line-height: 1.6; }
.cf-list strong { color: var(--cf-text); }
.cf-bullets {
  margin: 10px 0 0;
  padding-left: 20px;
  line-height: 1.65;
  color: var(--cf-muted);
}
.cf-bullets li { margin: 6px 0; }

/* ===== Notes & Rules ===== */
.cf-note, .cf-form-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cf-faint);
}
.cf-rule {
  height: 1px;
  background: var(--cf-border);
  margin: 18px 0;
}

/* ===== Mini Card ===== */
.cf-mini {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  background: rgba(255,255,255,.02);
}
.cf-mini-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-faint);
}
.cf-mini-title { margin: 0 0 8px; font-weight: 700; color: var(--cf-text); }
.cf-mini-text { margin: 0; color: var(--cf-muted); }

/* ===== Form ===== */
.cf-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.cf-form label span {
  display: block;
  font-size: 12px;
  color: var(--cf-muted);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.cf-form input, .cf-form select, .cf-form textarea {
  width: 100%;
  border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-border);
  background: rgba(255,255,255,.03);
  color: var(--cf-text);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--cf-transition);
}
.cf-form input::placeholder, .cf-form textarea::placeholder {
  color: var(--cf-faint);
}
.cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus {
  border-color: rgba(212,162,67,.5);
}
.cf-form button.cf-btn { cursor: pointer; }

.cf-contact-form { margin-top: 16px; }

/* Ninja Forms skin (scoped) */
.cf-form-skin .nf-form-cont,
.cf-form-skin .nf-form-layout,
.cf-form-skin .nf-before-form-content {
  color: var(--cf-text);
}
.cf-form-skin .nf-field-label label {
  font-size: 12px;
  color: var(--cf-muted);
  letter-spacing: .02em;
}
.cf-form-skin input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.cf-form-skin select,
.cf-form-skin textarea {
  width: 100%;
  border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-border);
  background: rgba(255,255,255,.03);
  color: var(--cf-text);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--cf-transition);
}
.cf-form-skin input::placeholder,
.cf-form-skin textarea::placeholder { color: var(--cf-faint); }
.cf-form-skin input:focus,
.cf-form-skin select:focus,
.cf-form-skin textarea:focus {
  border-color: rgba(212,162,67,.5);
  box-shadow: 0 0 0 4px rgba(212,162,67,.12);
}
.cf-form-skin button,
.cf-form-skin input[type="submit"],
.cf-form-skin input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,67,.50);
  background: transparent;
  color: var(--cf-text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--cf-transition), border-color var(--cf-transition), color var(--cf-transition);
}
.cf-form-skin button:hover,
.cf-form-skin input[type="submit"]:hover,
.cf-form-skin input[type="button"]:hover {
  background: var(--cf-accent-subtle);
  border-color: rgba(212,162,67,.75);
  color: #ffffff;
}

/* ===== Packages Section (Sponsor Strip) ===== */
.cf-strip-head {
  margin-bottom: clamp(24px, 4vw, 36px);
}
.cf-strip-head .cf-h2 {
  font-size: clamp(18px, 2vw, 22px);
  margin: 0 0 8px;
  color: var(--cf-text);
  font-weight: 600;
}
.cf-strip-head .cf-sub { color: var(--cf-muted); font-size: 14px; }

.cf-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .cf-packages { grid-template-columns: 1fr; }
}

.cf-package {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: clamp(20px, 2.5vw, 26px);
  transition: border-color var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-package:hover {
  border-color: rgba(242,242,245,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.cf-package-featured {
  border-color: rgba(212,162,67,.35);
  background: linear-gradient(180deg, rgba(212,162,67,.06) 0%, var(--cf-surface) 40%);
}
.cf-package-featured:hover {
  border-color: rgba(212,162,67,.5);
}

.cf-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-accent);
  background: var(--cf-surface-2);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,67,.4);
}

.cf-package-top { margin-bottom: 16px; }
.cf-package-kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-faint);
  margin: 0 0 6px;
}
.cf-package-title {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  color: var(--cf-text);
  margin: 0 0 10px;
}
.cf-package-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--cf-muted);
  margin: 0;
}
.cf-package-bullets {
  margin: 0 0 18px;
  padding-left: 18px;
  line-height: 1.65;
  color: var(--cf-muted);
}
.cf-package-bullets li { margin: 6px 0; }
.cf-package-cta { margin-top: auto; }
.cf-footnote {
  font-size: 13px;
  color: var(--cf-faint);
  line-height: 1.55;
}

/* ===== Partner Logos ===== */
.cf-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  align-items: center;
}
.cf-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 160px;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  transition: border-color var(--cf-transition), background var(--cf-transition);
}
.cf-logo:hover {
  border-color: rgba(242,242,245,.25);
  background: rgba(255,255,255,.05);
}
.cf-logo img {
  max-height: 36px;
  max-width: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0.95);
}

  /* Optional marquee (use wrapper .cf-marquee in HTML — not partner strip) */
  .cf-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .cf-marquee .cf-marquee-track {
    display: flex;
    gap: 32px;
    animation: cf-marquee 30s linear infinite;
  }
  @keyframes cf-marquee {
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cf-marquee .cf-marquee-track { animation: none; }
    .cf-card, .cf-panel, .cf-btn { transition: none; }
  }


/* ===== Shared: About page helpers (if same CSS is enqueued globally) ===== */
.about-api ul {
  margin: 10px 0 16px;
  padding-left: 18px;
}
.about-api li {
  margin: 6px 0;
}

@media (prefers-reduced-motion: reduce) {
  .cf-wwu-page .cf-reveal,
  .cf-wwu-page .cf-reveal-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cf-partner-row .cf-marquee-track {
    animation: none !important;
  }
}