/* ============================================================
   FRAMELINE MEDIA — UPGRADES
   Track gate · Package builder · Offers · Assistant polish
   Mobile-first throughout.
   ============================================================ */

/* ────────────────────────────────────────────────
   1. TRACK GATE — the choice on the landing page
   ──────────────────────────────────────────────── */
.track-gate {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}

@media (min-width: 860px) {
  .track-gate { grid-template-columns: 1fr 1fr; }
}

.track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 58vh;
  padding: clamp(1.75rem, 5vw, 4rem);
  background: var(--bg-2);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 860px) { .track-card { min-height: 72vh; } }

.track-card-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) brightness(0.74);
  transform: scale(1.04);
  transition: transform 900ms var(--ease-out), filter 600ms var(--ease-out);
}

.track-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8,8,9,0.92) 0%, rgba(8,8,9,0.30) 48%, rgba(8,8,9,0.08) 100%);
  transition: background var(--t-mid);
}

.track-card:hover .track-card-media,
.track-card:focus-visible .track-card-media {
  transform: scale(1);
  filter: grayscale(0) brightness(0.88);
}

.track-card:hover::after { background: linear-gradient(to top, rgba(8,8,9,0.86) 0%, rgba(8,8,9,0.18) 52%, rgba(8,8,9,0) 100%); }

.track-card-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.track-card h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.track-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.track-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}

.track-card-cta svg { transition: transform var(--t-mid); }
.track-card:hover .track-card-cta svg { transform: translateX(6px); }

.track-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.track-card-meta span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.7rem;
  background: rgba(8,8,9,0.4);
  backdrop-filter: blur(6px);
}

/* Third, quieter route for couples already married */
.track-aside {
  text-align: center;
  padding: clamp(var(--space-8), 5vw, var(--space-16)) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.track-aside p { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }

.track-aside a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(201,167,106,0.35);
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.track-aside a:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* ────────────────────────────────────────────────
   2. HERO — track switching + video fade-in
   ──────────────────────────────────────────────── */
.hero-video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero-video.is-loaded { opacity: 1; }
/* If JS never runs, don't hide the film. */
html:not(.js) .hero-video { opacity: 1; }

/* Small pill showing which side of the studio you're on */
.track-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,167,106,0.3);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
  margin-bottom: var(--space-5);
  background: rgba(201,167,106,0.06);
}

.track-pill a {
  color: var(--text-muted);
  text-decoration: none;
  border-left: 1px solid rgba(201,167,106,0.25);
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  transition: color var(--t-fast);
}
.track-pill a:hover { color: var(--text); }

/* ────────────────────────────────────────────────
   3. PACKAGE BUILDER
   ──────────────────────────────────────────────── */
.pb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1000px) {
  .pb-grid { grid-template-columns: minmax(0,1fr) 340px; gap: var(--space-10); }
}

.pb-step + .pb-step { margin-top: var(--space-12); }

.pb-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pb-step-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pb-step-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pb-step-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
  max-width: 54ch;
}

.pb-step-addons { opacity: 0.4; pointer-events: none; transition: opacity var(--t-mid); }
.pb-step-addons.is-live { opacity: 1; pointer-events: auto; }

/* ─── Package cards ─── */
.pb-packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--t-mid);
}

@media (min-width: 760px)  { .pb-packages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .pb-packages { grid-template-columns: repeat(3, 1fr); } }

.pb-packages.pb-nudge { box-shadow: 0 0 0 2px var(--gold); }

.pb-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-6);
  padding-top: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.pb-pkg:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.pb-pkg.is-selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,167,106,0.07), var(--bg-card) 60%);
}

.pb-pkg.is-recommended { border-color: rgba(201,167,106,0.35); }

.pb-badge {
  position: absolute;
  top: -1px; right: var(--space-5);
  transform: translateY(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--gold);
  color: #14100a;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
}

.pb-pkg-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pb-pkg-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.pb-pkg-tagline { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }

.pb-pkg-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.pb-pkg-features li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.pb-pkg-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-dark);
}

.pb-pkg-check {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 22px; height: 22px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  transition: all var(--t-fast);
}

.pb-pkg.is-selected .pb-pkg-check {
  background: var(--gold);
  border-color: var(--gold);
}
.pb-pkg.is-selected .pb-pkg-check::after {
  content: '';
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #14100a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── Add-on rows ─── */
.pb-addons {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pb-addon {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding-right: var(--space-4);
  flex-wrap: wrap;
}
.pb-addon:last-child { border-bottom: none; }
.pb-addon.is-on { background: rgba(201,167,106,0.06); }
.pb-addon.is-included { opacity: 0.55; }

.pb-addon-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pb-check {
  flex-shrink: 0;
  position: relative;
  width: 20px; height: 20px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.pb-addon.is-on .pb-check { background: var(--gold); border-color: var(--gold); }
.pb-addon.is-on .pb-check::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #14100a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pb-addon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-addon-name { font-size: var(--text-sm); font-weight: 500; }
.pb-addon-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

.pb-addon-price {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--gold);
  white-space: nowrap;
  padding-left: var(--space-3);
}

.pb-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.pb-qty-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border-hover);
  background: var(--bg-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color var(--t-fast);
}
.pb-qty-btn:hover { border-color: var(--gold); }
.pb-qty-val { min-width: 1.5ch; text-align: center; font-size: var(--text-sm); }

/* ─── Summary rail ─── */
.pb-summary { position: relative; }

@media (min-width: 1000px) {
  .pb-summary-inner { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
}

.pb-summary-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.pb-summary-label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pb-lines { display: flex; flex-direction: column; gap: var(--space-3); }

.pb-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.pb-line.is-strong { color: var(--text); font-weight: 500; }
.pb-line.is-muted { opacity: 0.6; }
.pb-line span:last-child { white-space: nowrap; }

.pb-empty { color: var(--text-faint); font-size: var(--text-sm); }

.pb-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pb-total {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.pb-disclaimer { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.6; }

.btn-ghost {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--t-fast);
}
.btn-ghost:hover { color: var(--text); }

/* Sticky mobile total bar */
.pb-mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: rgba(8,8,9,0.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}

.pb-mobile-bar[hidden] { display: none; }
.pb-mobile-label { display: block; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.pb-mobile-total { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--gold); }

@media (min-width: 1000px) { .pb-mobile-bar { display: none !important; } }
@media (max-width: 999px)  { .pb-summary .btn.pb-send { display: none; } }

/* Quote carried into the contact page */
.quote-recap {
  border: 1px solid rgba(201,167,106,0.35);
  background: linear-gradient(180deg, rgba(201,167,106,0.07), transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
.quote-recap h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.quote-recap .pb-line { margin-bottom: var(--space-2); }
.quote-recap-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.quote-copy {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ────────────────────────────────────────────────
   4. OFFER POPUP
   ──────────────────────────────────────────────── */
.offer-pop {
  position: fixed;
  z-index: 120;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  max-width: 380px;
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px solid rgba(201,167,106,0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
}

.offer-pop.visible { opacity: 1; transform: none; pointer-events: auto; }

@media (min-width: 700px) {
  .offer-pop { left: auto; right: var(--space-6); bottom: var(--space-6); margin-inline: 0; }
}

.offer-close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
}
.offer-close:hover { color: var(--text); background: var(--bg-2); }

.offer-eyebrow {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
  padding-right: var(--space-8);
}

.offer-headline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  padding-right: var(--space-6);
}

.offer-body { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; margin-bottom: var(--space-4); }

.offer-code {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-4);
}
.offer-code strong { color: var(--gold); letter-spacing: 0.12em; }

.offer-pop .offer-cta { width: 100%; justify-content: center; }
.offer-expiry { font-size: 0.68rem; color: var(--text-faint); text-align: center; margin-top: var(--space-3); letter-spacing: 0.06em; }

/* ────────────────────────────────────────────────
   5. ASSISTANT POLISH
   ──────────────────────────────────────────────── */
.assistant-launcher.nudge .assistant-toggle-btn {
  animation: fl-nudge 1.2s var(--ease-out) 2;
}

@keyframes fl-nudge {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-8px); }
  60%      { transform: translateY(0); }
}

.msg-typing { display: flex; gap: 4px; align-items: center; padding: 0.8rem 1rem !important; }
.msg-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: fl-dot 1.3s infinite ease-in-out;
}
.msg-typing span:nth-child(2) { animation-delay: 0.18s; }
.msg-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes fl-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.assistant-questions.used { display: none; }

/* Chat should be full-height on a phone, not a cramped card */
@media (max-width: 640px) {
  .assistant-window {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 82vh !important;
    max-height: 82vh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .assistant-messages { max-height: none !important; flex: 1 1 auto; }
}

/* ────────────────────────────────────────────────
   6. MOBILE HOUSEKEEPING
   ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .track-card { min-height: 52vh; }
  .pb-addon-toggle { flex-wrap: wrap; gap: var(--space-3); }
  .pb-addon-price { margin-left: auto; }
  body.has-mobile-bar { padding-bottom: 84px; }
}

/* Respect reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .track-card-media { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   V2 ADDITIONS
   Logo lockup · Showcase · Sticky total · Reviews · Trusted by
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────
   7. LOGO LOCKUP
   ──────────────────────────────── */
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0.96;
  transition: opacity var(--t-fast);
}
.nav-logo:hover .nav-logo-img { opacity: 1; }

@media (max-width: 480px) {
  .nav-logo-img { height: 28px; }
  .nav-logo-wordmark { font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* Footer signature — the full mark, given room to breathe */
.footer-logo {
  display: block;
  width: clamp(140px, 22vw, 200px);
  height: auto;
  margin: 0 auto var(--space-8);
  opacity: 0.42;
  transition: opacity var(--t-mid);
}
.footer-logo:hover { opacity: 0.7; }

/* ────────────────────────────────
   8. PACKAGE SHOWCASE
   ──────────────────────────────── */
.pb-showcase {
  margin-top: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  animation: pb-fade 500ms var(--ease-out);
}

@keyframes pb-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.pb-showcase-inner { display: grid; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .pb-showcase-inner { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}

.pb-showcase-media { cursor: pointer; position: relative; margin: 0; }
.pb-showcase-media .work-card-thumb { aspect-ratio: 16/9; height: 100%; }
.pb-showcase-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
}

.pb-showcase-body {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.pb-showcase-eyebrow {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.pb-showcase-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pb-showcase-quote {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid var(--gold-dark);
  padding-left: var(--space-4);
}

.pb-showcase-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.18em; }

.pb-showcase-cite {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "See an example" on package cards — a real control, not a hint.
   It sits inside the package button, so it needs to look and behave
   like something you can press in its own right. */
.pb-pkg-film {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(201, 167, 106, 0.35);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pb-pkg-film:hover,
.pb-pkg-film:focus-visible {
  background: rgba(201, 167, 106, 0.14);
  border-color: var(--gold);
  color: #f4e6c9;
  outline: none;
}

.pb-pkg-benefit {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  background: rgba(201,167,106,0.05);
  border-left: 2px solid var(--gold-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The custom / "something else" tile reads differently on purpose */
.pb-pkg.is-custom {
  border-style: dashed;
  background: transparent;
}
.pb-pkg.is-custom .pb-pkg-price { font-size: var(--text-lg); color: var(--text-muted); }
.pb-pkg.is-custom.is-selected {
  border-style: solid;
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,167,106,0.07), transparent 60%);
}

/* ────────────────────────────────
   9. STICKY TOTAL
   ──────────────────────────────── */
@media (min-width: 1000px) {
  .pb-summary-inner {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-4));
    max-height: calc(100vh - var(--nav-h) - var(--space-8));
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .pb-summary-inner::-webkit-scrollbar { width: 4px; }
  .pb-summary-inner::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }
}

.pb-summary-minor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: calc(var(--space-2) * -1);
}
.pb-summary-minor .btn-ghost { padding-inline: 0; }
.pb-summary-minor .btn-ghost[hidden] { display: none; }

/* Applied offer chip */
.pb-offer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(46,139,122,0.1);
  border: 1px solid rgba(46,139,122,0.35);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  animation: pb-fade 400ms var(--ease-out);
}
.pb-offer[hidden] { display: none; }
.pb-offer-tick { color: var(--teal-light); font-size: 0.9rem; line-height: 1.4; flex-shrink: 0; }
.pb-offer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pb-offer-text strong { font-size: var(--text-xs); font-weight: 600; line-height: 1.4; }
.pb-offer-text em { font-style: normal; font-size: 0.68rem; color: var(--text-muted); }
.pb-offer-x {
  background: none; border: none; color: var(--text-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0 0 var(--space-2);
}
.pb-offer-x:hover { color: var(--text); }

.pb-line.is-credit { color: var(--teal-light); }
.pb-line.is-credit span:last-child { font-weight: 600; }

/* Mobile bar becomes expandable */
.pb-mobile-peek {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.pb-mobile-peek .pb-mobile-label { display: block; }
.pb-mobile-peek > div { min-width: 0; }

.pb-mobile-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--text-muted);
  transition: transform var(--t-fast);
  flex-shrink: 0;
  margin-left: var(--space-1);
}
.pb-mobile-caret.is-open { transform: rotate(180deg); }

.pb-mobile-sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 89;
  background: rgba(8,8,9,0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: var(--space-5);
  max-height: 45vh;
  overflow-y: auto;
  animation: pb-fade 260ms var(--ease-out);
}
.pb-mobile-sheet[hidden] { display: none; }
.pb-mobile-lines { display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 1000px) {
  .pb-mobile-sheet { display: none !important; }
}

body.has-mobile-bar { padding-bottom: 84px; }
@media (min-width: 1000px) { body.has-mobile-bar { padding-bottom: 0; } }

/* ────────────────────────────────
   10. REVIEWS
   ──────────────────────────────── */
.reviews-section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.reviews-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-3);
}

.reviews-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  max-width: 46ch;
  line-height: 1.7;
}

.reviews-google {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.reviews-google[hidden] { display: none; }
.reviews-stars { color: var(--gold); letter-spacing: 0.14em; }
.reviews-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,167,106,0.3);
  padding-bottom: 1px;
  transition: color var(--t-fast);
}
.reviews-link:hover { color: var(--gold-light); }

/* Cards are stacked in a single grid cell rather than absolutely
   positioned. The track then sizes itself to the TALLEST card, so a
   long review can never overlap the one behind it or spill into the
   section below — which is what caused the jumbled text. */
.reviews-track {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.review-card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.review-card.is-active { opacity: 1; visibility: visible; transform: none; }

/* Long quotes and long names must wrap, not run off the edge. */
.review-quote,
.review-author,
.review-meta {
  overflow-wrap: anywhere;
  word-break: normal;
}
.review-attrib { min-width: 0; }
.review-source { margin-left: auto; }
@media (max-width: 520px) {
  .review-source { margin-left: 0; }
}

.review-stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.2em; }

.review-quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 62ch;
}

.review-attrib {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.review-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-hover);
}

.review-author {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.review-meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.review-source {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  padding: 0.22rem 0.65rem;
}

.reviews-dots { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.reviews-dot {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  transition: color var(--t-fast);
}
.reviews-dot:hover { color: var(--text-muted); }
.reviews-dot.on { color: var(--gold); }

/* ────────────────────────────────
   11. TRUSTED BY
   ──────────────────────────────── */
.clients-section {
  padding-block: clamp(var(--space-10), 6vw, var(--space-20));
  text-align: center;
}

.clients-head {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.clients-sub {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: var(--space-8);
}

.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 6vw, var(--space-16));
}

.clients-section.is-type .client-item {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-mid);
  white-space: nowrap;
}
.clients-section.is-type .client-item:hover { color: var(--text); }

.clients-section.is-logos .client-item img {
  height: clamp(24px, 3.5vw, 36px);
  width: auto;
  filter: grayscale(1) brightness(1.8);
  opacity: 0.55;
  transition: opacity var(--t-mid), filter var(--t-mid);
}
.clients-section.is-logos .client-item:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

/* ────────────────────────────────
   12. VIDEO MODAL — iframe support
   ──────────────────────────────── */
.video-modal-inner iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* ────────────────────────────────
   13. CONTACT — quote recap placement
   ──────────────────────────────── */
.quote-recap-wrap {
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-4);
}
.quote-recap-wrap:empty,
.quote-recap-wrap[hidden] { display: none; }

.quote-recap { max-width: var(--content-default); margin-inline: auto; }
.quote-recap .pb-total-row { margin-top: var(--space-4); }

/* Native fallback form */
.fallback-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fallback-form label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.fallback-form input,
.fallback-form select,
.fallback-form textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--t-fast);
}
.fallback-form input:focus,
.fallback-form select:focus,
.fallback-form textarea:focus { outline: none; border-color: var(--gold); }
.fallback-form textarea { min-height: 130px; resize: vertical; font-family: var(--font-body); }
.fallback-form .row2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .fallback-form .row2 { grid-template-columns: 1fr 1fr; } }
.form-status { font-size: var(--text-sm); line-height: 1.7; }
.form-status.ok  { color: var(--teal-light); }
.form-status.err { color: #e06c6c; }
.form-toggle {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.7;
}
.form-toggle button {
  background: none; border: none; padding: 0;
  color: var(--gold); font: inherit; font-size: inherit;
  cursor: pointer; text-decoration: underline;
}

/* ────────────────────────────────
   14. STUDIO LOGIN LINK
   Deliberately quiet. This is not a security measure — the real
   protection is the login and the database rules. It just keeps
   the control panel out of a visitor's way.
   ──────────────────────────────── */
.admin-link {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.4;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.admin-link:hover { opacity: 1; color: var(--gold); }

/* THE STUDIO LINK WAS UNCLICKABLE ON A LAPTOP.

   The chat launcher is position:fixed at bottom-right with z-index
   150. "Studio" is the last item in the footer's bottom row, so on a
   wide screen it lands directly underneath the bubble and every click
   went to the bubble instead. On a phone the footer stacks, Studio
   moves out from under it, and it worked \u2014 which is exactly the
   backwards-looking symptom reported.

   Two fixes, because either alone is fragile: lift the link above the
   launcher, and keep the footer row clear of that corner so they
   never occupy the same pixels in the first place. */
.admin-link {
  position: relative;
  z-index: 160;
  padding: 0.5rem 0.25rem;   /* a real hit area, not 10px of text */
}

@media (min-width: 700px) {
  .footer-bottom {
    /* Room for the launcher: its width plus both margins. */
    padding-right: calc(var(--space-6) * 2 + 64px);
  }
}

/* ════════════════════════════════════════════════════════════
   15. OFFER v2 — never fights the chat bubble for the corner
   ════════════════════════════════════════════════════════════ */

/* The offer sits bottom-RIGHT, where John wants it. The original
   problem was the chat launcher sitting on top of the Claim button
   and swallowing the click — so instead of moving the offer away,
   the chat now gets out of its way and the offer is layered above. */
@media (min-width: 700px) {
  .offer-pop {
    left: auto;
    right: var(--space-6);
    bottom: var(--space-6);
    margin-inline: 0;
  }
}

/* The offer always wins the corner while it is showing. */
.offer-pop { z-index: 140; }
.assistant-launcher { z-index: 100; }

/* Chat launcher slides down and out while an offer is up, then
   comes back the moment it is dismissed. */
body.offer-open .assistant-launcher {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.assistant-launcher { transition: transform var(--t-mid), opacity var(--t-mid); }

/* Never hide the chat if it is already open mid-conversation. */
body.offer-open .assistant-launcher.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 699px) {
  /* On a phone the offer takes the full width above the sticky
     total bar — one decision on screen at a time. */
  .offer-pop { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  body.has-mobile-bar .offer-pop {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* The number does the talking */
.offer-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.offer-amount span {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* When it fires mid-build it is a reward, so let it feel like one */
.offer-pop.is-builder {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(201,167,106,0.22);
}
.offer-pop.is-builder.visible { animation: offer-land 620ms var(--ease-out); }

@keyframes offer-land {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); }
  55%  { transform: translateY(-5px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

.offer-pop .offer-cta {
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The credit landing in the summary — the payoff moment */
.pb-offer { animation: offer-flash 900ms var(--ease-out); }
@keyframes offer-flash {
  0%   { background: rgba(46,139,122,0.4); transform: scale(0.97); }
  100% { background: rgba(46,139,122,0.1); transform: none; }
}

.pb-total.just-dropped { animation: total-drop 700ms var(--ease-out); }
@keyframes total-drop {
  0%   { color: var(--teal-light); transform: scale(1.12); }
  100% { color: var(--gold); transform: none; }
}

/* ────────────────────────────────
   16. CHAT LINKS
   ──────────────────────────────── */
.msg-link {
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,167,106,0.4);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.msg-link:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* A link on its own line becomes a proper tappable button —
   thumbs on phones need a target, not a hairline underline. */
.msg-bot br + .msg-link,
.msg-bot > .msg-link:only-child {
  border: 1px solid rgba(201,167,106,0.4);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.msg-bot br + .msg-link:hover,
.msg-bot > .msg-link:only-child:hover {
  background: rgba(201,167,106,0.12);
  border-color: var(--gold);
}

/* Countdown on the applied credit — makes the deadline real */
.pb-offer-clock {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 3px;
  font-weight: 600;
}
.pb-offer-clock.is-gone { color: #e06c6c; }
.pb-offer-clock[hidden] { display: none; }

/* Fallback tile when someone has no photo yet */
.team-card-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
  color: var(--border-hover);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
}

/* Optional banner image above the package builder */
.pb-banner {
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.pb-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.pb-banner figcaption {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-card);
}
@media (max-width: 640px) {
  .pb-banner img { aspect-ratio: 16 / 9; }
}

/* ════════════════════════════════════════════════════════════
   17. ONE LAST LOOK — the pre-send add-on nudge
   ════════════════════════════════════════════════════════════ */
.pb-lastlook {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(8,8,9,0.82);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t-mid);
  overflow-y: auto;
}
.pb-lastlook.visible { opacity: 1; }

.pb-lastlook-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--t-mid);
  margin-block: auto;
}
.pb-lastlook.visible .pb-lastlook-card { transform: none; }

.pb-lastlook-x {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: none;
  color: var(--text-faint);
  font-size: 1.35rem; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
}
.pb-lastlook-x:hover { color: var(--text); background: var(--bg-2); }

.pb-lastlook-eyebrow {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.pb-lastlook-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  padding-right: var(--space-6);
}

.pb-lastlook-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.pb-lastlook-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.pb-lastlook-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pb-lastlook-item:hover { border-color: var(--gold); background: rgba(201,167,106,0.06); }
.pb-lastlook-item.is-added {
  border-color: var(--teal);
  background: rgba(46,139,122,0.1);
  cursor: default;
}

.pb-lastlook-plus {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  font-size: 0.95rem;
  color: var(--gold);
}
.pb-lastlook-item.is-added .pb-lastlook-plus {
  border-color: var(--teal-light);
  color: var(--teal-light);
}

.pb-lastlook-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pb-lastlook-text strong { font-size: var(--text-sm); font-weight: 500; }
.pb-lastlook-text em { font-style: normal; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

.pb-lastlook-price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--gold);
  white-space: nowrap;
}

/* THE BUG THIS FIXES: the two buttons sat in a fixed row, and
   "Let me add something" is wide. Inside a 520px card the pair
   overflowed and the left button was clipped off the edge.
   They now shrink, wrap, and never exceed the card. */
.pb-lastlook-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

@media (min-width: 520px) {
  .pb-lastlook-actions {
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
  .pb-lastlook-actions .btn {
    flex: 1 1 auto;
    min-width: 0;          /* allow shrinking below content width */
    justify-content: center;
    text-align: center;
    white-space: normal;   /* wrap rather than overflow */
    padding-inline: var(--space-4);
  }
}

/* Every button in the dialog stays inside it */
.pb-lastlook-card .btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════
   18. PROACTIVE ASSISTANT PROMPT
   ════════════════════════════════════════════════════════════ */
.assistant-prompt {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 62px);
  z-index: 99;
  max-width: 270px;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-mid), transform var(--t-mid);
  cursor: pointer;
}
.assistant-prompt.visible { opacity: 1; transform: none; }
.assistant-prompt p { font-size: var(--text-sm); line-height: 1.6; color: var(--text); margin: 0; }
.assistant-prompt small {
  display: block;
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: var(--space-2);
  letter-spacing: 0.04em;
}
.assistant-prompt-x {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: none;
  color: var(--text-faint);
  font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 2px 4px;
}
.assistant-prompt-x:hover { color: var(--text); }
.assistant-prompt::after {
  content: '';
  position: absolute;
  bottom: -6px; right: 22px;
  width: 11px; height: 11px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-hover);
  border-bottom: 1px solid var(--border-hover);
  transform: rotate(45deg);
}
body.offer-open .assistant-prompt { display: none; }

@media (max-width: 699px) {
  .assistant-prompt { right: var(--space-4); left: var(--space-4); max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   26. HEROES ON SHORT SCREENS

   THE BUG THIS FIXES: the hero pins its content to the bottom
   (align-items: flex-end) with no top padding. The anniversary
   headline runs to three lines — "Still / Choosing / Each Other."
   — one more than the others, so on a laptop the block grew
   taller than the space available and pushed up UNDER the fixed
   nav, which is why it looked jammed against the top.

   The hero now always reserves room for the nav, and the type
   scales down on short viewports rather than overflowing.
   ════════════════════════════════════════════════════════════ */
.hero {
  padding-top: calc(var(--nav-h) + var(--space-6));
}

/* Laptops and short windows */
@media (max-height: 860px) {
  .hero {
    min-height: 560px;
    padding-bottom: clamp(2.5rem, 5vh, 4rem);
  }
  .hero-title    { font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: 0.94; }
  .hero-subtitle { font-size: var(--text-base); margin-block: var(--space-4); }
  .hero-reel-strip { margin-top: var(--space-3); }
  .track-pill      { margin-bottom: var(--space-3); }
}

@media (max-height: 780px) {
  .hero-content { max-width: 720px; }
}

/* Genuinely short — 13" laptops with browser chrome, or split screens */
@media (max-height: 720px) {
  .hero { min-height: 520px; }
  .hero-title { font-size: clamp(2rem, 5.5vw, 3.6rem); }
  .hero-subtitle {
    font-size: var(--text-sm);
    max-width: 52ch;
    margin-block: var(--space-3);
  }
  .hero-scroll     { display: none; }
  .hero-reel-strip { display: none; }   /* chips are the first thing to go */
}

/* The scroll cue must never intercept a click meant for the buttons */
.hero-scroll { pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   27. LAST-LOOK MODAL ON SHORT SCREENS
   Belt and braces: the whole overlay scrolls, the card is capped
   to the visible viewport on taller screens, and on short ones
   the contents compress rather than running off the bottom.
   ════════════════════════════════════════════════════════════ */
.pb-lastlook {
  align-items: flex-start;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pb-lastlook-card {
  margin: clamp(0.75rem, 3vh, 3rem) auto;
  max-height: none;                 /* the overlay scrolls instead */
  width: calc(100% - 2rem);
  max-width: 520px;
}

@media (min-height: 640px) {
  .pb-lastlook { align-items: center; }
  .pb-lastlook-card {
    max-height: calc(100dvh - 3rem);
    display: flex;
    flex-direction: column;
  }
  .pb-lastlook-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
}

/* Short viewport: tighten everything so the buttons stay reachable */
@media (max-height: 700px) {
  .pb-lastlook-card { padding: var(--space-5); }
  .pb-lastlook-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
  .pb-lastlook-note { font-size: var(--text-xs); margin-bottom: var(--space-4); }
  .pb-lastlook-eyebrow { margin-bottom: var(--space-2); }
  .pb-lastlook-item { padding: var(--space-3); }
  .pb-lastlook-text em { display: none; }   /* descriptions go first */
  .pb-lastlook-list { gap: var(--space-2); margin-bottom: var(--space-4); }
}

@media (max-height: 560px) {
  .pb-lastlook-card h3 { font-size: var(--text-base); }
  .pb-lastlook-note { display: none; }
}

/* A plain, findable way to decline. The credit can now appear at the
   moment someone presses Send, so saying no must be effortless. */
.offer-skip {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  background: none;
  border: none;
  color: var(--text-faint);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--t-fast);
}
.offer-skip:hover { color: var(--text-muted); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   19. HERO EMBED — YouTube / Vimeo as a background film
   A 16:9 iframe scaled to cover any viewport shape, sitting
   exactly where the <video> would have been.
   ════════════════════════════════════════════════════════════ */
.hero-embed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;   /* the hero buttons stay clickable */
}

.hero-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover: whichever dimension is short, overshoot the other. */
  width: 100vw;
  height: 56.25vw;        /* 16:9 of the width */
  min-height: 100%;
  min-width: 177.78vh;    /* 16:9 of the height */
  transform: translate(-50%, -50%);
  border: 0;
}

/* Keep the hero content above the film */
.hero-overlay { z-index: 1; }
.hero-content { position: relative; z-index: 2; }
.hero-scroll  { z-index: 2; }

/* The pricing page hero uses the same trick */
.pricing-hero-media .hero-embed { position: absolute; inset: 0; }


/* ════════════════════════════════════════════════════════════
   20. TEXT SAFETY
   Long words, pasted URLs and long client names should wrap
   rather than overlap or overflow their container.
   ════════════════════════════════════════════════════════════ */
.pb-pkg-name, .pb-pkg-tagline, .pb-pkg-benefit,
.pb-pkg-features li, .pb-addon-name, .pb-addon-desc,
.pb-line span, .pb-showcase-quote, .pb-showcase-cite,
.client-item, .team-card-bio, .team-card-name,
.offer-headline, .offer-body,
.msg, .msg-bot, .msg-user {
  overflow-wrap: anywhere;
}

/* Grid and flex children need this or they refuse to shrink,
   which is what pushes text on top of its neighbour. */
.pb-grid, .pb-main, .pb-summary,
.pb-lines, .pb-line,
.pb-showcase-inner, .pb-showcase-body,
.team-card, .team-card-body,
.reviews-head, .reviews-head > div {
  min-width: 0;
}

.pb-line {
  align-items: baseline;
  gap: var(--space-4);
}
.pb-line span:first-child { flex: 1 1 auto; min-width: 0; }
.pb-line span:last-child  { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════
   21. HERO CHIPS
   THE BUG THIS FIXES: these styles only existed in the inline
   <style> of index.html and anniversary.html. When the weddings
   and commercial heroes were rebuilt, the chips inherited no
   styling at all — so they rendered as one run-on line reading
   "Full-day coverageDrone included8–10 week delivery…".
   Defining them here means every page gets them, always.
   ════════════════════════════════════════════════════════════ */
.hero-reel-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.reel-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(8,8,9,0.35);
  backdrop-filter: blur(4px);
}

@media (max-width: 480px) {
  .reel-chip { font-size: 0.62rem; padding: 0.25rem 0.6rem; letter-spacing: 0.06em; }
}

/* ════════════════════════════════════════════════════════════
   22. PORTFOLIO CARDS — live from the control panel
   ════════════════════════════════════════════════════════════ */
.work-card[role="button"] { cursor: pointer; }
.work-card[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.work-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
  color: var(--text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wc-plus {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  font-size: 1.3rem;
}

.work-card-empty { opacity: 0.6; }

/* The grids themselves — used by both service pages */
.wedding-grid,
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .wedding-grid, .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wedding-grid, .work-grid { grid-template-columns: repeat(3, 1fr); } }

/* A still underneath the hero embed. If YouTube refuses to play
   (private video, or embedding disabled by its owner — errors 150
   and 153) the visitor sees this frame rather than an error card. */
.hero-embed-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-embed iframe { z-index: 1; }

/* ════════════════════════════════════════════════════════════
   23. HERO PHOTO
   A still can fill any hero slot. Previously only the pricing
   page had an <img> to put it in, so choosing a photo anywhere
   else silently did nothing.
   ════════════════════════════════════════════════════════════ */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.hero-image.is-loaded { opacity: 1; }
.hero-image[hidden] { display: none; }

/* Builder steps clear the sticky header when scrolled to */
.pb-step, .pb-packages, .pb-showcase {
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}

/* ════════════════════════════════════════════════════════════
   24. CREDIT COUNTDOWN ON THE CONTACT PAGE
   The deadline is genuine and tied to their reference, so this
   is real urgency rather than a manufactured timer.
   ════════════════════════════════════════════════════════════ */
.quote-timer {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: rgba(46,139,122,0.12);
  border: 1px solid rgba(46,139,122,0.4);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}
.quote-timer .qt-label { color: var(--text); font-weight: 500; }
.quote-timer .qt-clock {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-light);
  font-variant-numeric: tabular-nums;
}

.quote-timer.is-urgent {
  background: rgba(201,167,106,0.12);
  border-color: rgba(201,167,106,0.5);
  animation: qt-pulse 2.5s ease-in-out infinite;
}
.quote-timer.is-urgent .qt-clock { color: var(--gold); }

@keyframes qt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,167,106,0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(201,167,106,0); }
}

.quote-timer.is-over {
  background: rgba(224,108,108,0.1);
  border-color: rgba(224,108,108,0.4);
  animation: none;
}
.quote-timer.is-over .qt-label { color: #e06c6c; }
.quote-timer.is-over .qt-clock { color: var(--text-muted); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .quote-timer.is-urgent { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   25. LAST-LOOK MODAL — must never run off screen
   ════════════════════════════════════════════════════════════ */
.pb-lastlook {
  align-items: start;
  padding: clamp(var(--space-3), 4vh, var(--space-8)) var(--space-4);
}

.pb-lastlook-card {
  max-height: calc(100vh - clamp(1.5rem, 8vh, 4rem));
  max-height: calc(100dvh - clamp(1.5rem, 8vh, 4rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Only the list scrolls; the heading and buttons stay put, so the
   actions are always reachable however many add-ons are shown. */
.pb-lastlook-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 2px;
  scrollbar-width: thin;
}
.pb-lastlook-list::-webkit-scrollbar { width: 4px; }
.pb-lastlook-list::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 2px;
}

.pb-lastlook-actions { flex-shrink: 0; }

@media (max-width: 479px) {
  .pb-lastlook-actions .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   28. WHEN HONEYBOOK IS BLOCKED
   Not a second form — just a clear route to email, so there is
   never more than one thing to fill in on the page.
   ════════════════════════════════════════════════════════════ */
.hb-down {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.hb-down[hidden] { display: none; }

.hb-down-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.hb-down-body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
.hb-down .btn { margin: 0 var(--space-2) var(--space-2); }

/* While the third-party widget is on its way in. Something has to
   occupy the panel or it reads as broken during the second or two
   HoneyBook takes to answer. */
.hb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 320px;
  color: var(--text-faint);
  font-size: var(--text-sm);
}
.hb-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--border-hover);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: hb-spin 700ms linear infinite;
}
@keyframes hb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hb-spinner { animation-duration: 2.4s; }
}

/* ════════════════════════════════════════════════════════════
   29. WHEN YOUTUBE REFUSES TO EMBED
   Codes 101, 150 and 153 mean the owner has disabled playback on
   other sites. YouTube renders a grey error card; we replace it
   with the film's own still and an honest way out.
   ════════════════════════════════════════════════════════════ */
.embed-blocked {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: var(--bg-2);
}
.embed-blocked img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.34) saturate(0.8);
}
.embed-blocked-body {
  position: relative;
  text-align: center;
  padding: var(--space-6);
  max-width: 34ch;
}
.embed-blocked-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.embed-blocked-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   30. CLIENT UPLOAD PAGE
   ════════════════════════════════════════════════════════════ */
.up-lede { color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   31. MODAL SHELL

   The overlay every builder dialog sits inside. Without this the
   panel is just ordinary page content and lands wherever the flow
   leaves it — bottom-left, unstyled, half off the screen.

   Centring uses flex rather than a transform so that a tall panel
   on a short phone scrolls, instead of having its top half cut off
   above the viewport with no way to reach it.
   ════════════════════════════════════════════════════════════ */
.pb-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(4, 4, 6, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pb-modal.visible { opacity: 1; visibility: visible; }

.pb-modal-inner {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-modal.visible .pb-modal-inner { transform: none; }

/* On a phone it rises from the bottom, where the thumb already is. */
@media (max-width: 560px) {
  .pb-modal { padding: var(--space-4); align-items: flex-end; }
  .pb-modal-inner { padding: var(--space-6) var(--space-5); }
}

/* Clear of the heading, and a full 44px touch target. */
.pb-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
}
.pb-modal-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.pb-modal-eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
  padding-right: var(--space-8);
}

/* ════════════════════════════════════════════════════════════
   32. "WHERE SHOULD WE SEND THIS?"
   Three optional fields between the builder and the contact page.
   Deliberately small and skippable — it exists to catch the people
   who would otherwise vanish before the HoneyBook form, not to
   gate anybody out.
   ════════════════════════════════════════════════════════════ */
.pb-who .pb-modal-inner { max-width: 460px; }

.pb-who h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.pb-who-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.pb-who-field { display: block; margin-bottom: var(--space-4); }
.pb-who-field span {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.pb-who-field span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}
.pb-who-field input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--t-fast);
}
.pb-who-field input:focus {
  outline: none;
  border-color: var(--gold);
}
/* Date inputs render an almost-invisible dark picker icon on Chrome. */
.pb-who-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}

.pb-who-err {
  font-size: var(--text-xs);
  color: #e06c6c;
  margin-bottom: var(--space-4);
}
.pb-who-err[hidden] { display: none; }

.pb-who-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.pb-who-actions .btn-ghost { font-size: var(--text-xs); }