/* ============ WORK WITH US PAGE ============ */
body.wwu-page {
  background: #f4f1ea;
}

.wwu-section {
  /* top padding clears the floating nav (~92px) with a little breathing room —
     no big empty band before the heading. Small bottom padding keeps the form
     close to the footer. */
  padding: 104px 32px 28px;
  max-width: 1280px;
  margin: 0 auto;
  color: #0a0a0a;
}
.wwu-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.wwu-section .section-label {
  display: inline-flex;
  align-items: center;
  /* the global .section-label adds 48px below; the .wwu-inner gap already spaces
     things, so drop it to avoid a big empty band under the eyebrow */
  margin-bottom: 0;
  gap: 16px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5f5b50;
}
.wwu-section .section-label .num { color: #807c72; }
.wwu-section .section-label .line {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: rgba(10,10,10,0.2);
}

/* ---- Head: copy + toggle card ---- */
.wwu-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}

.wwu-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  margin-bottom: 24px;
}
.wwu-title .it { font-style: italic; }

.wwu-sub {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  line-height: 1.5;
  color: #3a3833;
  max-width: 560px;
  margin-bottom: 28px;
}

.wwu-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.wwu-bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: #3a3833;
}
.wwu-bullets .bul {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0a0a0a;
  flex-shrink: 0;
}

/* ---- Toggle card ---- */
.wwu-toggle-card {
  background: #0a0a0a;
  color: #f4f1ea;
  border-radius: 24px;
  padding: 24px;
  position: sticky;
  top: 100px;
}
.wwu-toggle-card__label {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #807c72;
  margin-bottom: 14px;
}

.wwu-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(244,241,234,0.06);
  border-radius: 999px;
  padding: 5px;
  border: 1px solid rgba(244,241,234,0.08);
}
.wwu-toggle__pill {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background: #f4f1ea;
  border-radius: 999px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.wwu-toggle__pill.right { transform: translateX(100%); }

.wwu-toggle__btn {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 14px 10px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #c8c4ba;
  border-radius: 999px;
  transition: color .25s ease;
}
.wwu-toggle__btn .it {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
}
.wwu-toggle__btn.active { color: #0a0a0a; }

.wwu-toggle-card__hint {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: #b8b4a8;
  margin-top: 16px;
  min-height: 44px;
}

/* ---- Form shell ---- */
.wwu-form-shell {
  background: #f4f1ea;
}
.wwu-form-shell__chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  background: #fbfaf6;
}
.wwu-form-shell__chrome .dots {
  display: inline-flex; gap: 6px;
}
.wwu-form-shell__chrome .dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(10,10,10,0.12);
}
.wwu-form-shell__chrome .dots span:nth-child(1) { background: #f7a8a0; }
.wwu-form-shell__chrome .dots span:nth-child(2) { background: #f3d27a; }
.wwu-form-shell__chrome .dots span:nth-child(3) { background: #a8cf9e; }
.wwu-form-shell__tag {
  font-family: 'Geist Mono', 'Geist', monospace;
  font-size: 12px;
  color: #5f5b50;
  letter-spacing: 0.02em;
}
.wwu-form-shell__meta {
  margin-left: auto;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #807c72;
}
.wwu-form-shell__body {
  position: relative;
  background: #f4f1ea;
  /* Breathing room so the form isn't flush against the window edges. */
  padding: 18px 26px;
}
.wwu-iframe {
  width: 100%;
  /* Sized to fit the form so there's no empty band before the footer. (If Tally's
     dynamicHeight resize kicks in it sets an inline height that overrides this.) */
  height: 530px;
  border: 0;
  display: block;
}
/* The creator application is a longer form than the brand brief, so it needs
   a taller frame to show every field on the page without an inner scrollbar. */
.wwu-iframe--creator { height: 760px; }
.wwu-form-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
  color: #807c72;
  pointer-events: none;
}
.wwu-form-shell__footer {
  padding: 18px 22px;
  border-top: 1px solid rgba(10,10,10,0.08);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: #5f5b50;
  text-align: center;
  background: #f4f1ea;
}
.wwu-form-shell__footer a {
  color: #0a0a0a;
  border-bottom: 1px solid rgba(10,10,10,0.3);
  padding-bottom: 1px;
  text-decoration: none;
}
.wwu-form-shell__footer a:hover { border-color: #0a0a0a; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .wwu-head { grid-template-columns: 1fr; gap: 28px; }
  /* stack the "Who are you?" toggle box ABOVE the headline + copy */
  .wwu-toggle-card { position: static; order: 1; }
  .wwu-head__copy { order: 2; }
}
@media (max-width: 720px) {
  .wwu-section { padding: 88px 20px 24px; }
  .wwu-inner { gap: 28px; }
  /* Mobile nav sits as a transparent bar over the cream page, so the white logo
     and cream hamburger are invisible. Make them dark while the bar is light
     (i.e. not scrolled into its dark state and not in the open takeover). */
  body.wwu-page .nav:not(.scrolled):not(.nav--open) .nav-logo img { filter: brightness(0); }
  body.wwu-page .nav:not(.scrolled):not(.nav--open) .nav-toggle { background: #0a0a0a; }
  body.wwu-page .nav:not(.scrolled):not(.nav--open) .nav-toggle__bar { background: #f4f1ea; }
  /* fit the form so there's no empty band before the footer on mobile (tall
     enough not to clip the form near the 480px boundary where fields stack) */
  .wwu-iframe { height: 660px; }
  .wwu-iframe--creator { height: 820px; }
  .wwu-toggle__btn { font-size: 13px; padding: 12px 8px; }
  .wwu-toggle__btn .it { font-size: 15px; }
  .wwu-bullets li { font-size: 15px; }
  .wwu-form-shell__chrome { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .wwu-form-shell__meta { font-size: 11px; }
  .wwu-form-shell__footer { padding: 14px 16px; font-size: 12px; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
  .wwu-section { padding: 80px 14px 24px; }
  .wwu-title { font-size: clamp(34px, 9vw, 52px); }
  .wwu-sub { font-size: 16px; }
  .wwu-iframe { height: 700px; }
  .wwu-iframe--creator { height: 1080px; }
  .wwu-form-shell { border-radius: 16px; }
  .wwu-form-shell__chrome .dots span { width: 8px; height: 8px; }
  .wwu-form-shell__tag { font-size: 11px; }
  .wwu-toggle-card { padding: 18px; }
  .wwu-toggle__btn { font-size: 12px; padding: 11px 6px; }
  .wwu-toggle__btn .it { font-size: 14px; }
  .wwu-toggle-card__hint { font-size: 11px; }
}