/* ═══════════════════════════════════════════════════════════════
   PARK CITY 3 & 4 — FORMS PAGE STYLES
   Extends styles.css (loaded first). Same tokens, same fonts.
   ═══════════════════════════════════════════════════════════════ */

/* ──────────── 0b. EYEBROW OVERRIDE ──────────── */
/* Main page's .hero__eyebrow is translucent cream — legible on the dark video
   hero. On our cream hero we need dark text instead. */
.forms-hero .hero__eyebrow {
  color: var(--brass-deep);
}
.forms-hero .hero__eyebrow-line {
  background: var(--brass);
}

/* ──────────── 1. FORMS HERO ──────────── */
.forms-hero {
  position: relative;
  min-height: 86vh;
  min-height: 86dvh;
  padding: 180px var(--pad-x) 140px;
  background: linear-gradient(180deg, var(--bone) 0%, var(--cream-50) 60%, var(--cream-100) 100%);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* Animated background orbs — Mediterranean warmth */
.forms-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.forms-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orbDrift 28s ease-in-out infinite;
}
.forms-hero__orb--1 {
  top: -10%;
  right: -5%;
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brass) 35%, transparent), transparent 70%);
  animation-delay: 0s;
}
.forms-hero__orb--2 {
  bottom: -15%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--terracotta) 22%, transparent), transparent 70%);
  animation-delay: -10s;
}
.forms-hero__orb--3 {
  top: 30%;
  left: 40%;
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--olive) 18%, transparent), transparent 70%);
  animation-delay: -18s;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* Floating paper leaves — decorative, drifting upward */
.forms-hero__papers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.paper-leaf {
  position: absolute;
  width: 80px;
  height: 100px;
  background: var(--bone);
  border: 1px solid var(--hairline-2);
  box-shadow:
    var(--sh-soft),
    inset 0 1px 0 color-mix(in srgb, var(--bone) 50%, transparent);
  opacity: 0;
  animation: paperDrift 22s linear infinite;
}
.paper-leaf::before,
.paper-leaf::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  height: 1px;
  background: var(--hairline-2);
}
.paper-leaf::before { top: 28%; }
.paper-leaf::after  { top: 50%; right: 30%; }

.paper-leaf--1 {
  top: 70%; left: 8%;
  transform: rotate(-12deg);
  animation-delay: 0s;
  animation-duration: 24s;
}
.paper-leaf--2 {
  top: 78%; left: 28%;
  width: 60px; height: 78px;
  transform: rotate(8deg);
  animation-delay: -7s;
  animation-duration: 28s;
}
.paper-leaf--3 {
  top: 84%; right: 18%;
  width: 70px; height: 88px;
  transform: rotate(-6deg);
  animation-delay: -14s;
  animation-duration: 26s;
}
.paper-leaf--4 {
  top: 90%; right: 38%;
  width: 50px; height: 64px;
  transform: rotate(14deg);
  animation-delay: -3s;
  animation-duration: 30s;
}
@keyframes paperDrift {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--r, 0deg)); }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-130vh) rotate(calc(var(--r, 0deg) + 24deg)); }
}

/* Hero content */
.forms-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.forms-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 32px 0 36px;
}
.forms-hero__title .hero__line {
  display: block;
  font-size: clamp(48px, 9vw, 132px);
  overflow: visible;
}
.forms-hero__line--accent {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
  margin-top: -0.05em;
}
.forms-hero__line--tail {
  font-family: var(--f-display);
  color: color-mix(in srgb, var(--ink) 75%, var(--bone));
}

.forms-hero__lede {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 56px;
}

.forms-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition: gap 0.4s var(--e-soft);
}
.forms-hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--e-soft);
}
.forms-hero__cta > * { position: relative; z-index: 2; }
.forms-hero__cta:hover { gap: 22px; }
.forms-hero__cta:hover::before { transform: translateY(0); }
.forms-hero__cta svg {
  transition: transform 0.4s var(--e-soft);
}
.forms-hero__cta:hover svg { transform: translateY(2px); }

@media (max-width: 700px) {
  .forms-hero { padding: 140px var(--pad-x) 100px; }
}

/* ──────────── 2. FORMS GRID SECTION ──────────── */
.forms-grid-section {
  padding: var(--pad-section) var(--pad-x);
  background: var(--bone);
  position: relative;
}

.forms-grid__head {
  max-width: var(--max-w);
  margin: 0 auto 80px;
  text-align: center;
}
.forms-grid__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 76px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 18px 0 24px;
}
.forms-grid__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
}
.forms-grid__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}
.forms-grid__lede a {
  color: var(--brass-deep);
  border-bottom: 1px solid var(--brass);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.forms-grid__lede a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* The grid */
.forms-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

/* ──────────── 3. FORM TILE ──────────── */
.form-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 44px 36px 36px;
  background: var(--bone);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 0.45s var(--e-soft), transform 0.5s var(--e-soft);
  font-family: inherit;
  color: inherit;
  isolation: isolate;
  overflow: hidden;
}

/* Subtle brass corner accent on hover */
.form-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brass);
  transition: width 0.6s var(--e-soft);
  z-index: 2;
}
.form-tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: var(--brass);
  transition: height 0.6s var(--e-soft) 0.1s;
  z-index: 2;
}
.form-tile:hover {
  background: var(--cream-50);
  transform: translateY(-2px);
}
.form-tile:hover::before { width: 100%; }
.form-tile:hover::after  { height: 100%; }

.form-tile__num {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--brass);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.form-tile__category {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 24px;
}
.form-tile__title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
  transition: transform 0.5s var(--e-soft);
  transform-origin: left bottom;
}
.form-tile__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
  display: inline-block;
}
.form-tile:hover .form-tile__title {
  transform: translateY(-2px);
}
.form-tile__desc {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 28px;
  flex-grow: 1;
}
.form-tile__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--hairline-2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.form-tile__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: translateX(-101%);
  transition: transform 0.6s var(--e-soft);
}
.form-tile:hover .form-tile__rule::after { transform: translateX(0); }

.form-tile__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.form-tile__tag {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
}
.form-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--brass-deep);
  letter-spacing: -0.005em;
  transition: gap 0.4s var(--e-soft), color 0.3s ease;
}
.form-tile:hover .form-tile__cta {
  gap: 14px;
  color: var(--ink);
}
.form-tile__cta svg {
  transition: transform 0.4s var(--e-soft);
}
.form-tile:hover .form-tile__cta svg { transform: translateX(3px); }

/* Reveal stagger — works with [data-reveal] from main script.js */
.form-tile[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--e-soft), transform 0.9s var(--e-soft), background 0.45s var(--e-soft); }
.form-tile[data-reveal].is-in { opacity: 1; transform: translateY(0); }
.form-tile[data-reveal].is-in:hover { transform: translateY(-2px); }

@media (max-width: 980px) {
  .forms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .forms-grid { grid-template-columns: 1fr; }
  .form-tile { padding: 36px 28px 28px; }
}

/* ──────────── 4. HELP BLOCK ──────────── */
.forms-grid__help {
  max-width: var(--max-w);
  margin: 80px auto 0;
  padding: 60px;
  background: var(--cream-50);
  border: 1px solid var(--hairline-2);
  text-align: center;
  position: relative;
}
.forms-grid__help::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--brass);
}
.forms-grid__help-eyebrow {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--brass-deep);
  margin-bottom: 14px;
}
.forms-grid__help p {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.forms-grid__help-links {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--taupe);
}
.forms-grid__help-links a {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.forms-grid__help-links a:hover { color: var(--brass-deep); }
.forms-grid__help-rule {
  width: 1px;
  height: 16px;
  background: var(--hairline);
}

@media (max-width: 600px) {
  .forms-grid__help { padding: 40px 28px; margin-top: 60px; }
  .forms-grid__help-links { gap: 14px; flex-direction: column; }
  .forms-grid__help-rule { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FORM OVERLAY — fullscreen modal containing the paper form
   ═══════════════════════════════════════════════════════════════ */

.form-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--e-soft), visibility 0.5s var(--e-soft);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.form-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.form-overlay__backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  pointer-events: none;
  z-index: 0;
}

/* Close button — top-right, fixed in viewport */
.form-overlay__close {
  position: fixed;
  top: calc(28px + env(safe-area-inset-top));
  right: clamp(24px, 4vw, 56px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bone) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
  border-radius: 100px;
  color: var(--bone);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--e-soft) 0.2s, transform 0.5s var(--e-soft) 0.2s, background 0.3s ease, border-color 0.3s ease;
}
.form-overlay.is-open .form-overlay__close {
  opacity: 1;
  transform: translateY(0);
}
.form-overlay__close:hover {
  background: color-mix(in srgb, var(--bone) 18%, transparent);
  border-color: var(--brass-pale);
}
.form-overlay__close-label { color: inherit; }
.form-overlay__close svg {
  transition: transform 0.4s var(--e-soft);
}
.form-overlay__close:hover svg { transform: rotate(90deg); }

/* Progress indicator — top-left of overlay */
.form-overlay__progress {
  position: fixed;
  top: calc(36px + env(safe-area-inset-top));
  left: clamp(24px, 4vw, 56px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  width: clamp(180px, 22vw, 280px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--e-soft) 0.25s, transform 0.5s var(--e-soft) 0.25s;
}
.form-overlay.is-open .form-overlay__progress {
  opacity: 1;
  transform: translateY(0);
}
.form-overlay__progress-track {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--bone) 18%, transparent);
  position: relative;
  overflow: hidden;
}
.form-overlay__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--brass-pale);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s var(--e-soft);
}
.form-overlay__progress-text {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 12px;
  color: color-mix(in srgb, var(--bone) 70%, transparent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 36px;
  text-align: right;
}

/* Container — wraps the paper, centers it, handles scroll */
.form-overlay__container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  padding: clamp(80px, 10vh, 120px) clamp(20px, 4vw, 48px) 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
}
.form-overlay__container > .paper {
  cursor: auto;
}

@media (max-width: 600px) {
  .form-overlay__close {
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    padding: 10px 14px;
    font-size: 12px;
  }
  .form-overlay__close-label { display: none; }
  .form-overlay__progress {
    top: calc(20px + env(safe-area-inset-top));
    left: 14px;
    width: calc(100% - 130px);
  }
  .form-overlay__container {
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAPER — the form itself, styled like an editorial document
   ═══════════════════════════════════════════════════════════════ */

.paper {
  width: 100%;
  max-width: 880px;
  background: var(--bone);
  position: relative;
  box-shadow:
    0 60px 140px -40px color-mix(in srgb, #000 60%, transparent),
    0 30px 80px -30px color-mix(in srgb, #000 40%, transparent);
  transform: translateY(40px) scale(0.98);
  opacity: 0;
  transition: opacity 0.6s var(--e-soft) 0.15s, transform 0.7s var(--e-soft) 0.15s;
}
.form-overlay.is-open .paper:not([hidden]) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Subtle top edge — like document tape */
.paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-deep));
}

.paper__form {
  padding: clamp(48px, 6vw, 80px) clamp(36px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Letterhead ── */
.paper__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.paper__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.paper__logo {
  height: 48px;
  width: auto;
}
.paper__co {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.paper__co-sub {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--taupe);
  margin-top: 2px;
}
.paper__form-tag {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--brass-deep);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 6px;
}

/* ── Title ── */
.paper__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.paper__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
}
.paper__sub {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: -16px;
}

/* ── Rows ── */
.paper__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.paper__row--2 { grid-template-columns: 1fr 1fr; }
.paper__row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 700px) {
  .paper__row--2,
  .paper__row--3 { grid-template-columns: 1fr; }
}

/* ── Fields ── */
.paper__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.paper__field--narrow {
  max-width: 100%;
}
.paper__field--full {
  grid-column: 1 / -1;
}
.paper__field > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color 0.3s ease;
}

.paper__input,
.paper__textarea {
  width: 100%;
  padding: 14px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color 0.4s var(--e-soft);
  letter-spacing: -0.005em;
}
.paper__input::placeholder,
.paper__textarea::placeholder {
  color: color-mix(in srgb, var(--taupe) 70%, transparent);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 16px;
}
.paper__input:focus,
.paper__textarea:focus {
  border-bottom-color: var(--brass);
}
.paper__field:focus-within > span {
  color: var(--brass-deep);
}
.paper__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
  font-family: var(--f-serif);
  font-size: 17px;
}

/* Date inputs — subtle calendar icon on right */
.paper__input.date-input {
  appearance: none;
  position: relative;
  cursor: pointer;
}
.paper__input.date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(2) hue-rotate(0deg) brightness(0.6);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.paper__input.date-input:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ── Groups (radio/checkbox sections) ── */
.paper__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}
.paper__group-label {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--brass-deep);
  letter-spacing: 0.02em;
}
.paper__choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.paper__choice-row--wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

/* ── Choices (radio + checkbox) ── */
.paper__choice {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 16px;
  border: 1px solid var(--hairline);
  background: var(--bone);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: border-color 0.4s var(--e-soft), background 0.3s ease, transform 0.3s ease;
  user-select: none;
}
.paper__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paper__choice-mark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--linen);
  background: var(--bone);
  transition: border-color 0.3s ease, background 0.3s ease;
}
/* Make radios circular */
.paper__choice input[type="radio"] + .paper__choice-mark {
  border-radius: 50%;
}
/* Inner dot/check */
.paper__choice-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--brass);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s var(--e-elastic);
}
.paper__choice input[type="radio"] + .paper__choice-mark::after {
  border-radius: 50%;
}
.paper__choice input[type="checkbox"] + .paper__choice-mark::after {
  background: transparent;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  inset: 1px 4px 4px 1px;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
}
.paper__choice:hover {
  border-color: var(--brass-pale);
  background: var(--cream-50);
}
.paper__choice:has(input:checked),
.paper__choice input:checked ~ * {
  /* fallback covered below */
}
.paper__choice:has(input:checked) {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, var(--bone));
}
.paper__choice:has(input:checked) .paper__choice-mark {
  border-color: var(--brass);
}
.paper__choice:has(input[type="radio"]:checked) .paper__choice-mark::after {
  opacity: 1;
  transform: scale(1);
}
.paper__choice:has(input[type="checkbox"]:checked) .paper__choice-mark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.paper__choice:has(input:focus-visible) {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Checklist — vertical, hairlined */
.paper__checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hairline-2);
}
.paper__checklist .paper__choice {
  border: 0;
  border-bottom: 1px solid var(--hairline-2);
  background: transparent;
  padding: 14px 8px 14px 4px;
  width: 100%;
  justify-content: flex-start;
  font-family: var(--f-serif);
  font-size: 16px;
  color: var(--ink-soft);
  transition: padding-left 0.4s var(--e-soft), color 0.3s ease;
}
.paper__checklist .paper__choice:hover {
  padding-left: 12px;
  color: var(--ink);
  background: transparent;
}
.paper__checklist .paper__choice:has(input:checked) {
  background: transparent;
  color: var(--ink);
}

/* ── Agreement (large terms checkbox) ── */
.paper__agreement {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: var(--cream-50);
  border: 1px solid var(--hairline-2);
  cursor: pointer;
  position: relative;
  transition: border-color 0.4s var(--e-soft), background 0.3s ease;
}
.paper__agreement input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paper__choice-mark--lg {
  width: 22px;
  height: 22px;
  border: 1px solid var(--linen);
  background: var(--bone);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.3s ease;
}
.paper__choice-mark--lg::after {
  content: '';
  position: absolute;
  inset: 4px 6px 6px 4px;
  background: transparent;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.3s var(--e-elastic);
}
.paper__agreement:has(input:checked) {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 6%, var(--cream-50));
}
.paper__agreement:has(input:checked) .paper__choice-mark--lg {
  border-color: var(--brass);
}
.paper__agreement:has(input:checked) .paper__choice-mark--lg::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.paper__agreement:hover { border-color: var(--brass-pale); }
.paper__agreement-text {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.paper__agreement-text strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── Notice block (informational callout) ── */
.paper__notice {
  padding: 20px 24px;
  background: color-mix(in srgb, var(--brass) 8%, var(--bone));
  border-left: 2px solid var(--brass);
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-radius: 0;
}
.paper__notice strong {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--ink);
}

/* ── Actions row ── */
.paper__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

.paper__submit {
  flex: 1;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s ease;
}
.paper__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--e-soft);
}
.paper__submit:hover::before { transform: translateY(0); }
.paper__submit-label {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.paper__submit-arrow {
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--e-soft), opacity 0.3s ease;
}
.paper__submit:hover .paper__submit-arrow {
  transform: translateX(6px);
}
.paper__submit-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--bone) 30%, transparent);
  border-top-color: var(--bone);
  border-radius: 50%;
  opacity: 0;
  z-index: 3;
  animation: paperSpin 0.8s linear infinite;
}
.paper__submit.is-loading .paper__submit-label,
.paper__submit.is-loading .paper__submit-arrow { opacity: 0; }
.paper__submit.is-loading .paper__submit-loader { opacity: 1; }
.paper__submit:disabled { cursor: wait; }
@keyframes paperSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.paper__cancel {
  padding: 18px 24px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--taupe);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.paper__cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--cream-50);
}

@media (max-width: 600px) {
  .paper__actions { flex-direction: column; align-items: stretch; }
  .paper__submit { min-width: 0; }
  .paper__cancel { width: 100%; text-align: center; }
}

/* ── Letterhead footer ── */
.paper__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--taupe);
  letter-spacing: 0.02em;
}

/* ── Header responsive ── */
@media (max-width: 600px) {
  .paper__header { flex-direction: column; gap: 16px; }
  .paper__form-tag { padding-top: 0; }
  .paper__brand { gap: 14px; }
  .paper__logo { height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.form-success {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--e-soft), visibility 0.6s var(--e-soft);
  padding: 24px;
}
.form-success.is-shown {
  opacity: 1;
  visibility: visible;
}

.form-success__card {
  max-width: 540px;
  padding: clamp(48px, 6vw, 72px);
  background: var(--bone);
  text-align: center;
  position: relative;
  transform: translateY(40px) scale(0.94);
  opacity: 0;
  transition: opacity 0.6s var(--e-soft) 0.15s, transform 0.7s var(--e-soft) 0.15s;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,0.6);
}
.form-success.is-shown .form-success__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.form-success__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-deep));
}

.form-success__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  margin: 0 auto 32px;
  color: var(--brass-deep);
  position: relative;
}
.form-success.is-shown .form-success__mark {
  animation: successMark 0.8s var(--e-elastic) 0.4s both;
}
.form-success__mark svg {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.form-success.is-shown .form-success__mark svg {
  animation: checkDraw 0.7s var(--e-soft) 0.7s forwards;
}
@keyframes successMark {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.form-success__title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 18px;
}
.form-success__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
}
.form-success__lede {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 auto 36px;
}

.form-success__dismiss {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: gap 0.4s var(--e-soft);
}
.form-success__dismiss::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--e-soft);
}
.form-success__dismiss > * { position: relative; z-index: 2; }
.form-success__dismiss:hover { gap: 18px; }
.form-success__dismiss:hover::before { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   BODY LOCK — when overlay is open
   ═══════════════════════════════════════════════════════════════ */
body.form-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .forms-hero__orb,
  .paper-leaf { animation: none !important; }
  .paper-leaf { opacity: 0; }
  .paper { transform: none !important; }
  .form-success__card { transform: none !important; }
}