/* Barrowridge — landing page
   Restrained, typographic, no dependencies. Light and dark. */

:root {
  --paper:      #f7f5f1;
  --ink:        #17181a;
  --ink-soft:   #4a4c50;
  --ink-faint:  #8a8880;
  --rule:       #ddd8ce;
  --accent:     #6b5f4c;
  --measure:    36rem;
  /* Real US currency is cream/tan paper with black ink, not green paper —
     "greenback" comes from accent ink (seal, serial numbers), not the base.
     Fixed regardless of site theme: a prop bill shouldn't change with dark mode. */
  --bill-paper: #d9c9a0;
  --bill-shadow: #7a6a45;
  --bill-hi: #f0e6c8;
  --bill-ink-accent: #6b4f28;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #131414;
    --ink:       #e9e6e0;
    --ink-soft:  #b0aca4;
    --ink-faint: #7c786f;
    --rule:      #2c2d2c;
    --accent:    #c2b394;
  }
}

:root[data-theme="light"] {
  --paper:     #f7f5f1;
  --ink:       #17181a;
  --ink-soft:  #4a4c50;
  --ink-faint: #8a8880;
  --rule:      #ddd8ce;
  --accent:    #6b5f4c;
}

:root[data-theme="dark"] {
  --paper:     #131414;
  --ink:       #e9e6e0;
  --ink-soft:  #b0aca4;
  --ink-faint: #7c786f;
  --rule:      #2c2d2c;
  --accent:    #c2b394;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* balloons drift sideways off their spawn point */
}

#page-root { transition: filter 0.35s ease; }
#page-root.blurred { filter: blur(14px); }

h1, h2, h3 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { color: var(--ink-soft); }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

/* ---------- masthead ---------- */

.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 0 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: ui-serif, Georgia, serif;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--accent);
}

.wordmark-suffix { color: var(--ink-faint); }

/* ---------- layout ---------- */

main {
  max-width: var(--measure);
  margin: 0 auto;
  position: relative;
}

section { margin: 3.5rem 0; }

.rule {
  max-width: var(--measure);
  margin: 4rem auto;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ---------- hero ---------- */

.hero { margin-top: 4.5rem; }

.hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- body sections ---------- */

h2 {
  font-size: 1.1875rem;
  margin: 0 0 0.85rem;
}

section > p { margin: 0 0 1rem; }
section > p:last-child { margin-bottom: 0; }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 2.25rem;
}

.steps > li:last-child { margin-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: ui-serif, Georgia, serif;
  font-size: 0.875rem;
  color: var(--accent);
}

.steps h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.4rem;
}

.steps p { margin: 0; }

/* ---------- contact ---------- */

.contact .email {
  margin: 1.25rem 0 0;
  font-family: ui-serif, Georgia, serif;
  font-size: 1.3125rem;
}

.contact .email a {
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ---------- footer ---------- */

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 0 3rem;
  border-top: 1px solid var(--rule);
  margin-top: 5rem;
}

footer p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ---------- peek ---------- */

.peek { position: fixed; right: 1.25rem; bottom: 1.25rem; max-width: 18rem; z-index: 30; }
.peek-trigger {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.16);
  padding: 0.75rem 1.1rem; font: inherit; font-family: ui-serif, Georgia, serif;
  font-size: 0.9375rem; color: var(--ink);
}
@media (max-width: 26rem) {
  .peek { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 1rem); }
  .peek-trigger { padding: 0.45rem 0.9rem; }
}

/* ---------- mobile wind-gust button ---------- */
/* Desktop clears balloons for free via cursor-driven wind; mobile has no
   hover, so this is the equivalent "get them out of my way" affordance. */

.gust-btn {
  position: fixed; left: 1rem; bottom: 1.25rem; z-index: 30;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--ink-faint); opacity: 0.5;
  transition: opacity 0.2s ease;
}
.gust-btn:active, .gust-btn.active { opacity: 0.85; }
.gust-btn svg { width: 1.6rem; height: 1.6rem; }
@media (min-width: 768px) {
  .gust-btn { display: none; } /* desktop already has cursor wind */
}

.balloon-field--mobile.gust-paused .balloon { animation-play-state: paused; }

/* ---------- balloon field ---------- */

.balloon-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.balloon-field--mobile { display: block; }
.balloon-field--desktop { display: none; }
@media (min-width: 768px) {
  .balloon-field--mobile { display: none; }
  .balloon-field--desktop { display: block; }
}

.balloon {
  position: absolute; bottom: -20vh; left: var(--x, 50%);
  opacity: 0; /* matches the drift keyframe's own 0% state, so the positive
                 delay below has nothing to visually pop out of before it elapses */
  animation: drift var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}
.balloon-inner { will-change: transform; pointer-events: auto; cursor: pointer; }
.balloon-inner.is-popped { visibility: hidden; pointer-events: none; }

.balloon-shape {
  position: relative;
  width: calc(62px * var(--scale, 1));
  height: calc(76px * var(--scale, 1));
  margin: 0 auto;
}
.bl-skin { width: 100%; height: 100%; display: block; }

/* Pin cursor, desktop only, page-wide (not just over balloons) — the same
   header mark, at the head of a pin tilted 45° clockwise as if stuck in at
   an angle, point tip at the actual click hotspot. Purely a cosmetic cursor
   image; the wind physics tracks real cursor position regardless of this. */
@media (min-width: 768px) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg transform='translate(-12,-1.645) rotate(45,16,41)'%3E%3Cline x1='16' y1='21' x2='16' y2='41' stroke='%236b5f4c' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='13' r='11' fill='%23f7f5f1' stroke='%236b5f4c' stroke-width='1.5'/%3E%3Cg transform='translate(8.3,5.1) scale(0.48)'%3E%3Cpath fill='%236b5f4c' d='M3,25.1 C7,24.1 12,23.9 16,24.0 C20,24.1 25,24.3 29,24.9 C25.5,25.7 20,25.9 16,25.85 C12,25.8 7,25.6 3,25.1 Z M8.3,25.4 C8.6,21.2 11.7,17.8 16,17.5 C20.3,17.8 23.4,21.2 23.7,25.4 C22.6,24.6 21.2,20.7 16,20.4 C10.8,20.7 9.4,24.6 8.3,25.4 Z M19.8,25.2 C19.9,19.8 20.1,13 20.7,8.6 L21.5,8.5 C21.9,13 22.0,19.8 22.1,25.2 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 4 39, pointer;
  }
}

@keyframes pop-burst {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  30%  { transform: scale(1.15) rotate(-5deg); opacity: 1; }
  100% { transform: scale(0) rotate(12deg); opacity: 0; }
}
.balloon-shape.is-popping { animation: pop-burst 0.3s cubic-bezier(0.32,0,0.67,0) forwards; }

@keyframes confetti-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}
.pop-particle {
  position: fixed; width: 6px; height: 6px; border-radius: 1px;
  pointer-events: none; z-index: 90; animation: confetti-burst 0.5s ease-out forwards;
}

.bl-note {
  position: absolute; inset: 16%;
  display: grid; place-items: center;
  /* currency-evoking treatment: bold engraved-feeling serif, slight spacing —
     a generic nod, not a clone of the actual banknote typeface */
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700; letter-spacing: 0.015em;
  font-size: 0.8125rem; line-height: 1.28;
  color: var(--bill-ink-accent); text-align: center;
}

.balloon-knot {
  width: 0; height: 0; margin: -1px auto 0;
  border-left: calc(5px * var(--scale, 1)) solid transparent;
  border-right: calc(5px * var(--scale, 1)) solid transparent;
  border-top: calc(7px * var(--scale, 1)) solid var(--bill-shadow);
}
.balloon-string { width: 1px; height: calc(46px * var(--scale, 1)); margin: 0 auto; background: var(--ink-faint); opacity: 0.4; }
.balloon-tag {
  margin: 0 auto; width: max-content; max-width: 7.7rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0.375rem;
  padding: 0.25rem 0.42rem; font-size: 0.57rem; color: var(--ink-soft); line-height: 1.3;
  font-family: ui-serif, Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0.01em;
  text-align: center; box-shadow: 0 0.25rem 0.6rem rgba(0,0,0,0.08);
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(var(--tilt-a)); opacity: 0; }
  6%   { opacity: 0.95; }
  94%  { opacity: 0.95; }
  100% { transform: translate(var(--drift-x), -128vh) rotate(var(--tilt-c)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .balloon-field { display: none; }
  .gust-btn { display: none; } /* nothing to blow away */
}

/* ---------- pop dialog ---------- */

.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 95;
  pointer-events: none; transition: background 0.35s ease;
}
.scrim.visible { background: rgba(0,0,0,0.22); }

.pop-dialog {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 1.5rem; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
}
.pop-dialog.open { opacity: 1; pointer-events: auto; }

.pop-dialog-card {
  background: var(--paper); color: var(--ink); border-radius: 1rem;
  padding: 2rem 1.75rem; max-width: 26rem; width: 100%;
  min-width: 0; /* grid items default to min-width:auto, which ignores
    max-width/width and lets a long <select> option (Safari sizes selects by
    their longest option more aggressively than Chrome) push the card wider
    than the viewport on narrow screens */
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.28); position: relative;
  transform: scale(0.94); transition: transform 0.35s cubic-bezier(0.2,0.9,0.3,1.2);
}
.pop-dialog.open .pop-dialog-card { transform: scale(1); }

.pop-dialog-close {
  position: absolute; top: 0.6rem; right: 0.75rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--ink-faint); padding: 0.3rem;
}
.pop-dialog-close:hover { color: var(--ink); }

.pop-dialog-intro {
  font-family: ui-serif, Georgia, serif; font-size: 1.3rem; line-height: 1.42;
  text-align: center; margin: 0.5rem 0 1.1rem; min-height: 3.4rem;
}

.pop-dialog-survey {
  /* box is already full-size the instant it opens (see openDialog) -- this
     area just sits blank in place and fades in, it never grows/expands */
  display: grid; gap: 0.85rem; opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
}
.pop-dialog-survey.visible { opacity: 1; pointer-events: auto; }
.pop-dialog-survey label { display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--ink-soft); }
.pop-dialog-survey [hidden] { display: none; } /* same specificity as the rule above, placed after it to win the tie -- otherwise [hidden] on a label (bizOtherWrap) is a no-op */
.pop-dialog-survey select, .pop-dialog-survey textarea, .pop-dialog-survey input {
  font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--rule); border-radius: 0.4rem;
  background: var(--paper); color: var(--ink);
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.pop-dialog-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.2rem; }
.pop-dialog-submit {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 0.4rem;
  padding: 0.6rem; font: inherit; font-weight: 600; cursor: pointer;
}
.pop-dialog-submit:disabled { opacity: 0.6; cursor: default; }
.pop-dialog-email-link {
  background: none; border: 0; color: var(--ink-soft); text-decoration: underline;
  font-size: 0.8125rem; cursor: pointer; padding: 0.2rem;
}
.pop-dialog-savenote { font-size: 0.8125rem; color: var(--ink-faint); text-align: center; margin: 0.4rem 0 0; }
.pop-dialog-thanks { text-align: center; font-family: ui-serif, Georgia, serif; font-size: 1.15rem; padding: 1rem 0; }

/* placed last on purpose: these all set their own cursor:pointer earlier in
   this sheet (same specificity as a plain class selector), so on ties the
   later rule wins the cascade -- this has to out-order all of them to keep
   the page-wide pin from reverting to the browser hand over any of them */
@media (min-width: 768px) {
  .balloon-inner, .peek-trigger, .pop-dialog-close, .pop-dialog-submit, .pop-dialog-email-link {
    cursor: inherit;
  }
}