@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- v3: Soft & Elevated Neutrals (Euro-summer pass) ----
     Traded the saturated jewel-tone gradient for a quiet, restorative warm
     neutral palette -- sandy beige, dusty plaster pink, linen -- instead of
     a vivid accent doing the work, the *warmth and texture* of the neutrals
     themselves carry the personality. Structure is unchanged: every rule
     that reads var(--gold*) still inherits this palette automatically. */
  --ink: #2E2620;
  --ink-2: #3A2F27;
  --cream: #F3ECE0;
  --cream-2: #FBF8F3;
  --gold: #C9A08A;
  --gold-light: #E9D6C3;
  --gold-dim: rgba(201,160,138,0.38);
  /* Deeper dusty terracotta for small text on the light linen background --
     clears WCAG AA (4.5:1) against --cream while staying in the same warm,
     muted family as --gold rather than jumping to a bright accent. */
  --gold-text: #8C5A45;
  --muted: #6B5D4E;
  --muted-2: #8A7862;
  --border: rgba(54,45,37,0.14);
  --radius: 14px;
  /* The signature gradient is now sandy beige -> dusty plaster pink -> soft
     blush linen -- low-contrast between its own stops on purpose, so it
     reads as a warm, sun-washed surface rather than a loud accent. Used for
     hero type, primary buttons, and the active step in the progress rail. */
  --grad: linear-gradient(135deg, #DCC7A6 0%, #C9A08A 50%, #E8D2C0 100%);
  --grad-soft: linear-gradient(135deg, rgba(201,160,138,0.16), rgba(220,199,166,0.14));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: #3A2F27;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--ink-2); }
input, button { font-family: 'Space Grotesk', sans-serif; }
input:focus, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

h1, h2, h3, .serif { font-family: 'Fraunces', Georgia, serif; }
/* Gradient text utility -- used on the hero headline and a couple of other
   hero-weight moments so the signature pink/violet/sky gradient shows up
   as type, not just backgrounds and borders. */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@keyframes gfFall { 0% { transform: translateY(-8vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
@keyframes gfPulse { 0% { opacity: 0.45; } 50% { opacity: 1; } 100% { opacity: 0.45; } }
@keyframes gfBob { 0% { transform: translateY(0); } 50% { transform: translateY(6px); } 100% { transform: translateY(0); } }
@keyframes gfShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes gfIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gfSelectPop { 0% { transform: scale(1); } 45% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes gfDrift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,-6%) scale(1.12); } 100% { transform: translate(0,0) scale(1); } }
@keyframes gfDrift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,5%) scale(1.08); } 100% { transform: translate(0,0) scale(1); } }
@keyframes gfWordUp { from { opacity: 0; transform: translateY(0.5em) rotate(1.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes gfCardUp { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gfSegFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Loader ---------- */
#pageLoader {
  position: fixed; inset: 0; z-index: 300; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease;
}
#pageLoader.hide { opacity: 0; pointer-events: none; }
.loader-ring { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; }
.loader-ring-inner { width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(230,215,188,0.35); display: flex; align-items: center; justify-content: center; }
.loader-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); animation: gfPulse 1.6s ease-in-out infinite; }
.loader-brand { margin-top: 26px; font-size: 22px; letter-spacing: 0.32em; color: var(--gold-light); text-transform: uppercase; text-align: center; }
.loader-sub { margin-top: 10px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(230,215,188,0.55); text-align: center; }

/* ---------- Hero (typographic, no photography) ---------- */
.hero { position: relative; height: 92vh; min-height: 560px; overflow: hidden;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(220,199,166,0.22) 0%, rgba(220,199,166,0) 55%),
    radial-gradient(ellipse at 80% 85%, rgba(201,160,138,0.24) 0%, rgba(201,160,138,0) 50%),
    radial-gradient(ellipse at 85% 15%, rgba(233,214,195,0.18) 0%, rgba(233,214,195,0) 45%),
    linear-gradient(160deg, #2E2620 0%, #3A2F27 55%, #2E2620 100%);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border: 1px solid rgba(233,214,195,0.16); pointer-events: none;
}
.hero::before { top: 28px; left: 28px; right: 28px; bottom: 28px; border-radius: 22px; }
.hero::after { top: 40px; left: 40px; right: 40px; bottom: 40px; border-color: rgba(201,160,138,0.2); border-radius: 16px; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: 0.55; }
.hero-orb-1 { width: 42vw; height: 42vw; max-width: 520px; max-height: 520px; top: -8%; left: -6%; background: radial-gradient(circle, rgba(220,199,166,0.5), transparent 70%); animation: gfDrift1 16s ease-in-out infinite; }
.hero-orb-2 { width: 36vw; height: 36vw; max-width: 460px; max-height: 460px; bottom: -10%; right: -4%; background: radial-gradient(circle, rgba(201,160,138,0.45), transparent 70%); animation: gfDrift2 19s ease-in-out infinite; }
.hero-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(46,38,32,0.3) 0%, rgba(46,38,32,0.05) 40%, rgba(46,38,32,0.5) 100%); }
.hero-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.hero-eyebrow { font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-light); text-shadow: 0 1px 20px rgba(0,0,0,0.5); font-weight: 600; opacity: 0; animation: gfWordUp 0.7s ease 0.05s forwards; }
.hero-rule { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(233,214,195,0), rgba(233,214,195,0.8), rgba(233,214,195,0)); margin: 22px auto; opacity: 0; animation: gfWordUp 0.7s ease 0.15s forwards; }
.hero-title { font-weight: 700; font-size: clamp(42px, 8vw, 92px); line-height: 1.02; letter-spacing: -0.01em; color: var(--cream); margin: 0; max-width: 940px; text-shadow: 0 2px 50px rgba(201,160,138,0.25); }
.hero-title span.word { display: inline-block; opacity: 0; animation: gfWordUp 0.65s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-sub { margin: 26px auto 0; max-width: 560px; font-weight: 400; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; color: rgba(243,236,224,0.85); text-shadow: 0 1px 16px rgba(0,0,0,0.5); opacity: 0; animation: gfWordUp 0.7s ease 0.55s forwards; }
.hero-note { margin: 16px auto 0; max-width: 480px; font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; line-height: 1.6; color: var(--gold-light); text-shadow: 0 1px 14px rgba(0,0,0,0.7); opacity: 0; animation: gfWordUp 0.7s ease 0.68s forwards; }
.hero-cta {
  margin-top: 40px; background: var(--grad); border: none;
  color: #3A2318; padding: 18px 42px; border-radius: 999px; cursor: pointer; font-size: 14px; letter-spacing: 0.06em; font-weight: 700;
  text-transform: none; transition: all 0.3s ease; box-shadow: 0 10px 34px rgba(201,160,138,0.35);
}
.hero-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 46px rgba(220,199,166,0.45); }
.hero-secondary { display: block; margin-top: 20px; font-size: 13px; letter-spacing: 0.05em; color: rgba(243,236,224,0.68); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(233,214,195,0.35); transition: color 0.25s ease; }
.hero-secondary:hover { color: var(--gold-light); }
.hero-scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(233,214,195,0.6); animation: gfBob 2.4s ease-in-out infinite; }

/* A slow-drifting ticker instead of a static row -- the same short-form-feed
   cue as a TikTok/Reels caption bar, and it lets the strip carry five short
   lines without ever feeling crowded or wrapping awkwardly on phones. The
   list is doubled in the markup so the loop seams invisibly. */
.trust-strip { background: var(--ink-2); padding: 18px 0; overflow: hidden; }
.trust-inner {
  display: flex; align-items: center; gap: 14px 36px; font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(233,214,195,0.75); font-weight: 500; white-space: nowrap;
  width: max-content; animation: gfTicker 26s linear infinite;
}
.trust-strip:hover .trust-inner { animation-play-state: paused; }
.trust-dot { color: rgba(201,160,138,0.85); }
@keyframes gfTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-inner { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ---------- Progress rail ---------- */
.rail { position: sticky; top: 0; z-index: 60; background: rgba(246,241,231,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.rail-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; overflow-x: auto; }
.rail-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 9px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.3s ease; color: var(--muted-2); white-space: nowrap; }
.rail-btn.active { color: #3A2318; background: var(--grad); box-shadow: 0 6px 18px rgba(201,160,138,0.4); font-weight: 700; }
.rail-btn.done { color: var(--gold-text); }
.rail-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.rail-dot { width: 8px; height: 8px; border-radius: 50%; transition: all 0.4s ease; background: transparent; border: 1px solid #C79BC4; flex-shrink: 0; }
.rail-btn.active .rail-dot { background: #2E2620; box-shadow: none; border: none; }
.rail-btn.done .rail-dot { background: var(--gold); border: none; }
/* Instagram-Stories-style segmented progress: each gap between steps reads as
   a thin bar that fills solid once that step is behind you, instead of a
   plain divider line -- a glance tells you how far through the flow you are. */
.rail-line { flex: 1; height: 3px; margin: 0 6px; background: var(--border); border-radius: 3px; transition: background 0.5s ease; min-width: 16px; overflow: hidden; position: relative; }
.rail-line::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; border-radius: 3px; }
.rail-line.done::after { animation: gfSegFill 0.5s ease forwards; }

/* ---------- Main layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 56px 24px 140px; position: relative; z-index: 2; }
.main-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 56px; align-items: start; }
@media (max-width: 899px) { .main-grid { display: block; } .summary-aside { display: none; } }
.form-col { display: flex; flex-direction: column; gap: 64px; min-width: 0; }

.step { opacity: 0; transform: translateY(18px) scale(0.99); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; scroll-margin-top: 90px; }
.step.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* Cards pop in one after another instead of appearing all at once -- a
   cheap, no-JS way to make every re-render (tapping a tier, adding a
   deliverable) feel alive rather than a flat instant swap. */
.tier-grid .opt-card, .deliv-grid .deliv-card { animation: gfCardUp 0.42s cubic-bezier(.2,.8,.2,1) backwards; }
.tier-grid .opt-card:nth-child(1), .deliv-grid .deliv-card:nth-child(1) { animation-delay: 0s; }
.tier-grid .opt-card:nth-child(2), .deliv-grid .deliv-card:nth-child(2) { animation-delay: 0.04s; }
.tier-grid .opt-card:nth-child(3), .deliv-grid .deliv-card:nth-child(3) { animation-delay: 0.08s; }
.tier-grid .opt-card:nth-child(4), .deliv-grid .deliv-card:nth-child(4) { animation-delay: 0.12s; }
.tier-grid .opt-card:nth-child(5), .deliv-grid .deliv-card:nth-child(5) { animation-delay: 0.16s; }
.tier-grid .opt-card:nth-child(n+6), .deliv-grid .deliv-card:nth-child(n+6) { animation-delay: 0.2s; }
.opt-card:active, .deliv-card:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .step { opacity: 1; transform: none; } }

.step-head { display: flex; align-items: baseline; gap: 16px; }
.step-num { font-size: 20px; color: var(--gold); }
.step-title { font-weight: 500; font-size: 34px; margin: 0; color: #201C17; }
.step-desc { margin: 12px 0 28px; max-width: 560px; color: var(--muted); font-weight: 400; line-height: 1.7; font-size: 16px; }

/* ---------- Details form ---------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); }
.field-optional { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 400; color: #A39274; }
.field-error { display: none; font-size: 12.5px; color: #A34A3E; font-weight: 400; letter-spacing: 0; text-transform: none; }
.field-error.show { display: block; margin-top: 2px; }
.field-nudge { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gold-text); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number] {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; font-size: 15px; color: #201C17;
  transition: border-color 0.25s ease;
}
.field input:focus { border-color: var(--gold); }
.field select {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; font-size: 15px; color: #201C17;
  transition: border-color 0.25s ease; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23A9853B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer;
}
.field select:focus { border-color: var(--gold); }
.field select:invalid, .field select.placeholder { color: var(--muted-2); }
.stepper { display: flex; align-items: center; background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; }
.stepper button { border: none; background: none; cursor: pointer; padding: 14px 18px; font-size: 18px; color: var(--gold-text); }
.stepper button:hover { color: var(--ink-2); }
.stepper span { flex: 1; text-align: center; font-size: 15px; color: #201C17; }
.field-hint { margin: 14px 0 0; font-size: 14.5px; color: #5C5343; font-weight: 400; line-height: 1.6; }
.data-safety-note {
  display: flex; align-items: center; gap: 7px; margin: 16px 0 0; font-size: 13px; font-weight: 500;
  color: var(--gold-text); letter-spacing: 0.01em;
}
.data-safety-note svg { flex-shrink: 0; color: var(--gold); }

/* ---------- Investment framing note (Details step) ---------- */
.investment-note {
  max-width: 640px; margin: 8px 0 28px; padding: 20px 24px; background: linear-gradient(135deg, rgba(169,133,59,0.1), rgba(169,133,59,0.03));
  border-left: 2px solid var(--gold); border-radius: 3px;
}
.investment-note p { margin: 0; font-size: 15px; font-weight: 400; color: #4A4335; line-height: 1.7; }
.investment-note strong { color: var(--gold-text); font-weight: 600; }

/* ---------- Details -> continue gate ---------- */
.details-gate { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); max-width: 560px; }
.details-continue-btn {
  background: var(--grad); color: #3A2318; border: none; border-radius: 999px; padding: 17px 36px;
  cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; transition: all 0.3s ease;
}
.details-continue-btn:hover { box-shadow: 0 14px 36px rgba(220,199,166,0.4); transform: translateY(-2px) scale(1.01); }
.details-gate-hint { margin: 14px 0 0; font-size: 13px; font-weight: 400; color: var(--muted-2); line-height: 1.6; }
.details-gate-error { display: none; margin: 12px 0 0; font-size: 13.5px; color: #A34A3E; font-weight: 400; }
.details-gate-error.show { display: block; }

/* ---------- Gated (locked) steps until contact captured ---------- */
.gated-wrap { position: relative; }
.gated-wrap.locked > section, .gated-wrap.locked > .studio-note, .gated-wrap.locked > .ogilvy-block, .gated-wrap.locked > .ornamental-divider {
  filter: blur(4px); opacity: 0.42; pointer-events: none; user-select: none;
}
.gated-overlay { display: none; }
.gated-wrap.locked .gated-overlay {
  display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 30; padding: 24px;
}
.gated-overlay-inner {
  max-width: 380px; text-align: center; background: var(--cream-2); border: 1px solid rgba(169,133,59,0.4); border-radius: 6px;
  padding: 32px 30px; box-shadow: 0 30px 70px rgba(32,28,23,0.22);
}
.gated-overlay-inner svg { color: var(--gold); margin-bottom: 14px; }
.gated-overlay-title { font-size: 22px; color: #201C17; }
.gated-overlay-sub { margin: 10px 0 20px; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.6; }
.gated-overlay-btn {
  background: var(--grad); color: #3A2318; border: none; border-radius: 999px; padding: 13px 28px; cursor: pointer;
  font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 700;
}
.gated-overlay-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------- Guidance panel ---------- */
.guidance { background: #EFE7D8; border: 1px solid rgba(169,133,59,0.28); border-radius: 4px; padding: 20px 24px; margin-bottom: 32px; max-width: 640px; }
.guidance-toggle { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.guidance-chevron { transition: transform 0.3s ease; display: inline-block; }
.guidance-chevron.open { transform: rotate(180deg); }
.guidance-body { margin-top: 16px; display: none; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; font-size: 14px; font-weight: 400; color: #5C5343; line-height: 1.6; }
.guidance-body.open { display: grid; }
.guidance-body strong { font-weight: 500; color: #201C17; }
.guidance-tier-item { display: flex; align-items: flex-start; gap: 10px; }
.guidance-tier-item > div { display: flex; flex-direction: column; gap: 2px; }
.guidance-tier-item strong { font-size: 14.5px; }
.guidance-tier-item span { font-size: 12.5px; color: var(--muted-2); line-height: 1.4; }
.guidance-tier-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
  background: rgba(201,160,138,0.16); color: var(--gold-text);
}

/* ---------- Recommendation panel ---------- */
.recommend-panel { display: none; align-items: baseline; gap: 10px; flex-wrap: wrap; background: rgba(169,133,59,0.08); border-left: 2px solid var(--gold); border-radius: 2px; padding: 14px 18px; margin-bottom: 26px; max-width: 640px; }
.recommend-panel.show { display: flex; }
.recommend-kicker { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
.recommend-text { margin: 0; font-size: 14.5px; font-weight: 400; color: #5C5343; line-height: 1.6; }
.recommend-text-extra { margin: 8px 0 0; font-size: 14.5px; font-weight: 400; color: #5C5343; line-height: 1.6; }

/* ---------- Studio note (scarcity / trust insert) ---------- */
.studio-note {
  max-width: 640px; margin: 32px 0 0; padding: 14px 20px; background: rgba(239,231,216,0.45);
  border: 1px dashed rgba(169,133,59,0.35); border-radius: 4px;
  display: flex; align-items: center; gap: 10px; color: var(--gold-text);
}
.studio-note span { font-size: 13.5px; font-weight: 400; color: #4A4335; line-height: 1.5; }
.studio-note strong { color: var(--gold-text); font-weight: 600; }

/* ---------- Ogilvy value block: the heirloom argument ---------- */
.ogilvy-block { max-width: 720px; margin: 28px 0 0; padding: 28px 30px; background: var(--cream-2); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 10px 30px rgba(32,28,23,0.06); }
.ogilvy-kicker { display: block; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.ogilvy-block h3 { margin: 0 0 12px; font-size: 22px; font-weight: 500; color: #201C17; }
.ogilvy-block p { margin: 0 0 14px; font-size: 15px; font-weight: 400; color: #4A4335; line-height: 1.75; }
.ogilvy-block p:last-child { margin-bottom: 0; }
.ogilvy-block strong { color: #201C17; font-weight: 600; }

/* ---------- Estimate step reassurance ---------- */
.step-desc-note { margin: -18px 0 26px; font-size: 14px; font-weight: 400; font-style: italic; color: var(--muted-2); max-width: 560px; line-height: 1.6; }

/* ---------- Delivery timelines ---------- */
.delivery-note { background: #FBF7EE; border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin: 0 0 26px; max-width: 640px; }
.delivery-note-title { font-size: 14.5px; margin: 0 0 10px; color: #201C17; }
.delivery-list { margin: 0 0 12px; padding-left: 20px; font-size: 14px; color: #3A342A; line-height: 1.8; }
.delivery-list li { margin: 0; }
.delivery-note-fine { margin: 0; font-size: 13px; font-style: italic; color: var(--muted-2); line-height: 1.6; }

/* ---------- Pricing privacy reassurance (crew / deliverables) ---------- */
.pricing-privacy-note { margin: 20px 0 0; font-size: 13.5px; font-weight: 400; font-style: italic; color: var(--muted-2); max-width: 640px; line-height: 1.6; }

/* ---------- Inline mid-funnel callback variant ---------- */
.callback-row-inline { margin-top: 28px; border-top: none; padding-top: 0; }

/* ---------- Per-day crew cards ---------- */
/* Each shoot-day is just a normal card stacked in the page's own scroll --
   no separate scrollable container, snap-points, or dot navigation. */
.day-crew-block {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px 28px 30px;
  margin: 0 0 20px;
  box-shadow: 0 6px 20px rgba(30,25,45,0.06);
  box-sizing: border-box;
  position: relative;
}
.day-crew-block:last-child { margin-bottom: 0; }
.day-crew-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(169,133,59,0.3);
}
.day-crew-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  color: #201C17;
  letter-spacing: 0.01em;
}
.day-crew-events {
  font-size: 15px;
  font-weight: 500;
  color: var(--gold-text);
  letter-spacing: 0.02em;
}
.day-crew-counter {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  white-space: nowrap;
}
.day-crew-recommend {
  background: rgba(169,133,59,0.09);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 13px 18px;
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A4335;
}
.day-crew-recommend strong { color: var(--gold-text); }
.day-crew-nudge {
  margin: 24px 0 0;
  padding: 12px 16px;
  background: rgba(169,133,59,0.06);
  border: 1px dashed rgba(169,133,59,0.35);
  border-radius: 4px;
  font-size: 13.5px;
  font-style: italic;
  color: #6B5E45;
  line-height: 1.6;
}
/* ---------- Roles / tier cards ---------- */
.role-block { margin-bottom: 36px; }
.role-block:last-child { margin-bottom: 0; }
.role-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px; background: rgba(201,160,138,0.16); color: var(--gold-text);
}
.role-name { font-weight: 500; font-size: 23px; margin: 0; color: #201C17; }
.role-tag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #A39274; }
.role-desc { margin: 6px 0 16px; font-size: 14.5px; font-weight: 400; color: var(--muted); max-width: 560px; line-height: 1.6; }
/* Compact tier cards: a dense row of small pill-like cards (icon-free, just
   name + selected check + optional micro-badge). The old design put a full
   sentence of description inside every card, which made a 3-4 tier row very
   tall and visually heavy. Now the grid stays short, and the description for
   whichever tier is selected appears once, as a single caption line below --
   see .tier-caption. */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 9px; max-width: 780px; }
.opt-card {
  position: relative; text-align: left; border-radius: 14px; padding: 11px 34px 11px 14px; cursor: pointer; transition: all 0.2s ease;
  background: rgba(255,255,255,0.7); border: 1px solid var(--border); box-shadow: none; min-height: 42px; display: flex; align-items: center; gap: 8px;
}
.opt-card:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(201,160,138,0.14); transform: translateY(-1px); }
/* Selected state: a strong, unmistakable fill instead of a subtle ring --
   the signature warm gradient becomes the card's own surface, with dark
   ink text and a solid check, so a couple can tell what's picked at a
   glance instead of squinting for a thin border change. */
.opt-card.on {
  background: var(--grad); border: 1.5px solid var(--gold-text);
  box-shadow: 0 12px 28px rgba(140,90,69,0.32), 0 0 0 1px rgba(140,90,69,0.12);
  transform: translateY(-1px) scale(1.02); animation: gfSelectPop 0.42s ease;
}
.opt-tier-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; color: var(--gold-text); }
.opt-card.on .opt-tier-icon { color: #3A2318; }
.opt-check { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; background: transparent; border: 1px solid rgba(32,28,23,0.25); flex-shrink: 0; }
.opt-card.on .opt-check { background: #3A2318; border: 1px solid #3A2318; box-shadow: 0 0 0 3px rgba(58,35,24,0.16); }
.opt-name { display: block; font-size: 14px; font-weight: 500; color: #201C17; line-height: 1.3; }
.opt-card.on .opt-name { color: #3A2318; font-weight: 700; }
.opt-badge { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.opt-card.on .opt-badge { color: rgba(58,35,24,0.75); }
.tier-caption { margin: 10px 0 0; font-size: 13.5px; font-weight: 400; color: var(--muted); line-height: 1.55; max-width: 780px; min-height: 1.55em; }
.tier-caption strong { color: #201C17; font-weight: 500; }

/* ---------- Ornamental divider (typographic, replaces photography band) ---------- */
.ornamental-divider { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0; color: var(--gold); }
.ornamental-divider span { flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, rgba(169,133,59,0), rgba(169,133,59,0.55), rgba(169,133,59,0)); }

/* ---------- Deliverables ---------- */
.deliv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.deliv-card { position: relative; text-align: left; border-radius: 18px; padding: 18px 20px; cursor: pointer; transition: all 0.25s ease; background: rgba(255,255,255,0.7); border: 1px solid var(--border); }
.deliv-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(201,160,138,0.14); transform: translateY(-1px); }
/* Same strong-fill treatment as the tier cards: selection reads instantly
   as a filled, elevated card rather than a faint border tint. */
.deliv-card.on {
  background: var(--grad); border: 1.5px solid var(--gold-text);
  box-shadow: 0 16px 38px rgba(140,90,69,0.3), 0 0 0 1px rgba(140,90,69,0.12);
  transform: translateY(-2px) scale(1.015); animation: gfSelectPop 0.42s ease;
}
.deliv-card.on .opt-name { color: #3A2318; font-weight: 700; }
.deliv-card.on .opt-check { background: #3A2318; border-color: #3A2318; box-shadow: 0 0 0 3px rgba(58,35,24,0.16); }
.deliv-icon {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  margin-bottom: 12px; background: rgba(201,160,138,0.16); color: var(--gold-text);
}
.deliv-card.on .deliv-icon { background: rgba(58,35,24,0.16); color: #3A2318; }
.opt-blurb {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.5;
}
.deliv-card.on .opt-blurb { color: rgba(58,35,24,0.72); }
.deliv-qty-row {
  display: none; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px;
  padding: 12px 16px; background: rgba(169,133,59,0.1); border: 1px solid rgba(169,133,59,0.4); border-radius: 5px;
}
.deliv-qty-row.show { display: flex; }
.deliv-qty-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.deliv-qty-controls { display: flex; align-items: center; gap: 4px; }
.deliv-qty-controls button { width: 30px; height: 30px; border: 1px solid rgba(32,28,23,0.2); background: var(--cream-2); border-radius: 2px; cursor: pointer; font-size: 15px; color: var(--gold); }
.deliv-qty-controls button:hover { border-color: var(--gold); }
.deliv-qty-controls span { min-width: 32px; text-align: center; font-size: 15px; color: #201C17; }

/* ---------- Crew units stepper (how many of this tier) ---------- */
.crew-units-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px;
  padding: 14px 18px; background: rgba(169,133,59,0.1); border: 1px solid rgba(169,133,59,0.4); border-radius: 5px;
}
.crew-units-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.crew-units-row .deliv-qty-controls, .deliv-qty-row .deliv-qty-controls { gap: 2px; background: var(--cream-2); border: 1px solid rgba(169,133,59,0.45); border-radius: 4px; padding: 2px; }
.crew-units-row .deliv-qty-controls button, .deliv-qty-row .deliv-qty-controls button {
  width: 38px; height: 38px; font-size: 19px; font-weight: 600; border-radius: 3px; border: none; background: transparent; color: var(--gold);
}
.crew-units-row .deliv-qty-controls button:hover, .deliv-qty-row .deliv-qty-controls button:hover { background: var(--gold); color: #17140F; }
.crew-units-row .deliv-qty-controls span, .deliv-qty-row .deliv-qty-controls span { min-width: 40px; font-size: 17px; font-weight: 600; color: #201C17; }

.suggestions { margin-top: 32px; border: 1px dashed rgba(169,133,59,0.45); border-radius: 4px; padding: 20px 24px; background: rgba(239,231,216,0.5); display: none; }
.suggestions.show { display: block; }
.suggestions-title { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.suggestions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.suggest-chip { display: flex; align-items: center; gap: 8px; background: var(--cream-2); border: 1px solid rgba(169,133,59,0.4); border-radius: 20px; padding: 9px 16px; cursor: pointer; font-size: 13px; color: #5C5343; transition: all 0.25s ease; }
.suggest-chip:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 4px 14px rgba(169,133,59,0.15); }
.suggest-chip span.plus { color: var(--gold); font-size: 15px; }
.suggestions-reason { margin: 12px 0 0; font-size: 12.5px; font-weight: 400; color: var(--muted-2); }

/* ---------- Travel ---------- */
.travel-toggle { display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; padding: 0; }
.travel-track { display: inline-flex; align-items: center; width: 46px; height: 26px; border-radius: 13px; padding: 3px; box-sizing: border-box; transition: background 0.3s ease; background: rgba(32,28,23,0.2); }
.travel-track.on { background: var(--gold); }
.travel-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--cream-2); transition: transform 0.3s ease; }
.travel-track.on .travel-knob { transform: translateX(20px); }
.travel-label-text { font-size: 15px; color: #201C17; }
.travel-amount-wrap { margin-top: 20px; max-width: 560px; display: none; }
.travel-amount-wrap.show { display: block; }
.travel-note { padding: 18px 22px; background: rgba(169,133,59,0.08); border-left: 2px solid var(--gold); border-radius: 3px; }
.travel-note p { margin: 0 0 10px; font-size: 14px; font-weight: 400; color: #4A4335; line-height: 1.7; }
.travel-note p:last-child { margin-bottom: 0; }
.travel-note strong { color: var(--gold-text); font-weight: 600; }

/* ---------- Generate ---------- */
.error-box { margin-bottom: 20px; border: 1px solid rgba(155,74,74,0.4); background: rgba(185,136,136,0.12); color: #8A4A4A; border-radius: 3px; padding: 14px 18px; font-size: 14px; max-width: 560px; display: none; }
.error-box.show { display: block; }
.generate-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-width: 300px;
  background: var(--grad); color: #3A2318; border: none; border-radius: 999px; padding: 20px 42px;
  cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: none; transition: all 0.3s ease;
}
.generate-btn:hover { box-shadow: 0 16px 48px rgba(220,199,166,0.42); transform: translateY(-2px) scale(1.01); }
.generate-btn:disabled { cursor: wait; background: #4A4459; color: rgba(255,255,255,0.7); }
.generate-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); background-size: 200% 100%; animation: gfShimmer 1.4s linear infinite; display: none; }
.generate-btn:disabled .generate-shimmer { display: block; }
.generate-hint { margin: 14px 0 0; font-size: 13px; font-weight: 400; color: var(--muted-2); min-height: 18px; }

.callback-row { margin-top: 44px; border-top: 1px solid var(--border); padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.callback-title { font-size: 22px; color: #201C17; }
.callback-sub { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.callback-btn { border: 1px solid rgba(32,28,23,0.3); color: #201C17; padding: 13px 26px; border-radius: 2px; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.callback-btn:hover { border-color: var(--gold); color: var(--gold-text); }

/* ---------- Summary sidebar ---------- */
.summary-aside { position: relative; align-self: stretch; height: 100%; }
.summary-box { position: sticky; top: 78px; z-index: 45; background: var(--ink-2); border-radius: 20px; padding: 30px 30px 26px; box-shadow: 0 26px 64px rgba(46,38,32,0.4), 0 0 0 1px rgba(201,160,138,0.16); overflow: hidden; }
.summary-box::before { content: ''; position: absolute; top: 0; left: 30px; right: 30px; height: 2px; background: var(--grad); opacity: 0.8; }
.summary-kicker { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(230,215,188,0.6); }
.summary-title { font-size: 24px; color: var(--cream); margin-top: 8px; }
.summary-lines { margin: 22px 0; display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.summary-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 3px 0; }
.summary-line-name { color: rgba(246,241,231,0.9); font-weight: 400; }
.summary-line-meta { color: rgba(230,215,188,0.6); font-size: 13px; white-space: nowrap; }
.summary-section-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; color: var(--gold-text); font-weight: 600; margin: 16px 0 6px; }
.summary-section-label:first-child { margin-top: 0; }
.summary-empty { font-size: 14.5px; font-weight: 400; color: rgba(246,241,231,0.45); line-height: 1.6; }
.summary-totals { border-top: 1px solid rgba(230,215,188,0.14); padding-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14.5px; color: rgba(246,241,231,0.7); font-weight: 400; }
.summary-row-hidden { display: none; }
.summary-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.summary-grand-label { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(230,215,188,0.7); }
.summary-grand-value { font-size: 34px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.summary-foot { margin: 16px 0 0; font-size: 13px; font-weight: 400; color: rgba(246,241,231,0.45); line-height: 1.6; }

/* ---------- Mobile bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(23,20,15,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  display: none !important; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 -12px 34px rgba(32,28,23,0.3);
  transition: transform 0.3s ease;
}
@media (max-width: 899px) { .mobile-bar.show { display: flex !important; } }
.mobile-bar-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(230,215,188,0.6); }
.mobile-bar-total { font-size: 24px; color: var(--gold-light); line-height: 1.15; }
.mobile-bar-btn { background: var(--grad); color: #3A2318; border: none; border-radius: 999px; padding: 14px 24px; cursor: pointer; font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 700; min-height: 46px; transition: filter 0.2s ease, transform 0.15s ease; white-space: nowrap; }
.mobile-bar-btn:hover { filter: brightness(1.06); }
.mobile-bar-btn:active { transform: scale(0.96); }

/* ---------- Success ---------- */
#successScreen { position: fixed; inset: 0; z-index: 120; background: var(--ink); overflow: auto; display: none; }
#successScreen.show { display: block; }
.success-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.success-confetti span { position: absolute; top: 0; opacity: 0; border-radius: 1px; animation: gfFall linear infinite; }
.success-inner { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; position: relative; }
.success-check { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(169,133,59,0.6); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.success-eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(230,215,188,0.6); }
.success-title { font-weight: 500; font-size: clamp(34px, 5vw, 54px); color: var(--cream); margin: 16px 0 8px; max-width: 640px; line-height: 1.15; }
.success-msg { color: rgba(246,241,231,0.66); font-weight: 400; font-size: 17px; max-width: 520px; line-height: 1.65; margin: 0 0 28px; }
.success-portfolio-link { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 36px; padding: 12px 22px; border: 1px solid rgba(169,133,59,0.55); border-radius: 3px; color: var(--gold-light); font-size: 13px; letter-spacing: 0.05em; background: rgba(169,133,59,0.08); transition: all 0.3s ease; }
.success-portfolio-link:hover { background: rgba(169,133,59,0.18); border-color: var(--gold-light); color: #F6F1E7; }
.after-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; max-width: 620px; width: 100%; margin: 0 0 40px; }
.after-step { text-align: left; padding: 16px 4px 0; border-top: 1px solid rgba(230,215,188,0.2); }
.after-num { display: block; font-size: 20px; color: var(--gold-light); margin-bottom: 8px; }
.after-label { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.55; color: rgba(246,241,231,0.62); }
@media (max-width: 640px) { .after-steps { grid-template-columns: 1fr 1fr; } }

.success-card { background: var(--cream); border-radius: 20px; padding: 32px 36px; max-width: 420px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.45); text-align: left; transform: translateY(34px); opacity: 0; transition: all 0.9s cubic-bezier(0.22,1,0.36,1); }
.success-card.in { transform: translateY(0); opacity: 1; }
.success-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.success-card-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A7B5E; }
.success-card-ref { font-size: 22px; color: #201C17; }
.success-card-rule { height: 1px; background: linear-gradient(90deg, rgba(169,133,59,0.5), rgba(169,133,59,0.08)); margin: 18px 0; }
.success-card-total-label { font-size: 13px; color: #5C5343; }
.success-card-total-value { font-size: 30px; color: #201C17; }
.success-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.success-btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink-2); color: var(--gold-light); padding: 14px 18px; border-radius: 4px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.success-btn-primary:hover { background: #332C22; color: #F0E5CF; }
.success-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(32,28,23,0.25); color: #201C17; padding: 13px 18px; border-radius: 4px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; display: none; }
.success-btn-secondary.show { display: flex; }
.success-btn-secondary:hover { border-color: var(--gold); color: var(--gold-text); }
.success-btn-tertiary { display: block; text-align: center; margin-top: 4px; font-size: 12.5px; letter-spacing: 0.1em; color: #8A7B5E; text-decoration: underline; text-underline-offset: 3px; }
.success-btn-tertiary:hover { color: var(--gold-text); }
.success-reset { margin-top: 34px; background: none; border: none; cursor: pointer; color: rgba(230,215,188,0.65); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px; border-bottom: 1px solid rgba(230,215,188,0.25); }
.success-reset:hover { color: var(--gold-light); border-color: rgba(230,215,188,0.6); }

.loading, .error-state { text-align: center; padding: 70px 20px; color: var(--muted); font-size: 15px; }
.error-state { color: #b3261e; display: none; }
.error-state.show { display: block; }

/* ---------- Local draft restore banner ---------- */
.draft-restored-banner {
  display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: rgba(169,133,59,0.1); border: 1px solid rgba(169,133,59,0.35); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 40px; font-size: 14px; color: var(--ink-2);
}
.draft-restored-banner.show { display: flex; }
.draft-restored-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-restored-banner button {
  background: none; border: 1px solid rgba(32,28,23,0.25); color: var(--ink-2); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease;
}
.draft-restored-banner button:hover { border-color: var(--gold); color: var(--gold-text); }
.draft-restored-banner button.primary {
  background: var(--grad); border-color: var(--gold-text); color: #3A2318; font-weight: 700;
}
.draft-restored-banner button.primary:hover { color: #3A2318; opacity: 0.9; }

footer.site-footer { background: var(--ink); padding: 44px 24px; text-align: center; }
.footer-brand { font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light); }
.footer-sub { margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0.14em; color: rgba(230,215,188,0.5); }

/* ---------- Grouped quick-add event picker ---------- */
.event-picker { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 28px; max-width: 960px; }
.event-picker-group-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin-bottom: 8px;
}
.event-picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.event-chip {
  position: relative;
  background: var(--cream-2); border: 1px solid rgba(169,133,59,0.4); border-radius: 20px; padding: 9px 16px 9px 30px;
  cursor: pointer; font-size: 13px; color: #5C5343; transition: all 0.25s ease;
}
.event-chip::before {
  content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(169,133,59,0.5); background: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
}
.event-chip:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 4px 14px rgba(169,133,59,0.15); transform: translateY(-1px); }
.event-chip.selected { background: rgba(169,133,59,0.14); border-color: var(--gold); color: #6B4E19; font-weight: 500; }
.event-chip.selected::before {
  background: var(--gold); border-color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(253,251,246,0.9);
}
.event-picker-action-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.event-picker-build-btn {
  background: var(--grad); border: none; color: #3A2318; border-radius: 999px;
  padding: 13px 22px; cursor: pointer; font-size: 13.5px; letter-spacing: 0.02em; font-weight: 700; transition: all 0.25s ease;
}
.event-picker-build-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(220,199,166,0.35); }
.event-picker-build-btn:disabled { background: none; border: 1px dashed rgba(169,133,59,0.4); color: var(--muted-2); font-weight: 400; cursor: default; }

/* ---------- Itinerary / schedule-of-events builder ---------- */
.itinerary-list { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }
.itinerary-row {
  display: grid; grid-template-columns: 1.2fr 0.85fr 0.75fr 0.9fr 1.15fr auto; gap: 12px 14px; align-items: end;
  background: rgba(253,251,246,0.6); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px;
}
.itinerary-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.itinerary-field-label {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.itinerary-field-hint {
  display: block; margin-top: 6px; font-size: 11.5px; font-style: italic; color: var(--muted-2); line-height: 1.5; white-space: normal;
}
.itinerary-date-hint {
  grid-column: 1 / -1; font-size: 11.5px; font-style: italic; color: var(--muted-2); line-height: 1.5;
}
.itinerary-row select, .itinerary-row input {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; padding: 11px 12px; font-size: 15px; color: #201C17; width: 100%; min-width: 0;
}
/* No outline:none here -- the global input:focus rule already supplies a
   visible gold outline, and keyboard users need that ring, not just the
   subtler border-color shift, to reliably see which field is focused. */
.itinerary-row select:focus, .itinerary-row input:focus { border-color: var(--gold); }
.itinerary-custom-event { grid-column: 1 / -1; }
.itinerary-remove-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(163,74,62,0.35); background: none; color: #A34A3E;
  cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.itinerary-remove-btn:hover { background: rgba(163,74,62,0.1); }
@media (max-width: 980px) {
  .itinerary-row { grid-template-columns: 1fr 1fr; }
  .itinerary-remove-btn { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 560px) {
  .itinerary-row { grid-template-columns: 1fr; }
}
.itinerary-add-btn {
  margin-top: 16px; background: none; border: 1px dashed rgba(169,133,59,0.5); color: var(--gold-text); border-radius: 4px;
  padding: 13px 22px; cursor: pointer; font-size: 13.5px; letter-spacing: 0.06em; font-weight: 500; transition: all 0.25s ease;
}
.itinerary-add-btn:hover { background: rgba(169,133,59,0.08); border-color: var(--gold); }
.itinerary-empty-hint { font-size: 14.5px; color: var(--muted-2); font-style: italic; }
.itinerary-notes-field { margin-top: 26px; max-width: 640px; }
.itinerary-notes-field textarea {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; font-size: 14.5px; color: #201C17;
  font-family: 'Jost', sans-serif; resize: vertical;
}
.itinerary-notes-field textarea:focus { border-color: var(--gold); }

/* ---------- Investment ally popup (fires past Rs 2L) ---------- */
.investment-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.investment-modal.show { display: flex; }
.investment-modal-backdrop { position: absolute; inset: 0; background: rgba(20,17,13,0.7); backdrop-filter: blur(2px); }
.investment-modal-card {
  position: relative; max-width: 480px; width: 100%; background: var(--cream-2); border-radius: 6px; padding: 36px 34px 30px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.4); text-align: left; transform: translateY(16px) scale(0.98); opacity: 0;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.investment-modal.show .investment-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.investment-modal-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
  color: var(--muted-2); font-size: 20px; cursor: pointer; line-height: 1;
}
.investment-modal-close:hover { color: #201C17; }
.investment-modal-kicker { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
.investment-modal-title { font-size: 26px; color: #201C17; margin: 10px 0 14px; }
.investment-modal-body { font-size: 14.5px; font-weight: 400; color: #4A4335; line-height: 1.7; margin: 0 0 24px; }
.investment-modal-cta {
  background: var(--ink-2); color: var(--gold-light); border: 1px solid rgba(169,133,59,0.55); border-radius: 2px; padding: 14px 26px;
  cursor: pointer; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.investment-modal-cta:hover { box-shadow: 0 10px 30px rgba(169,133,59,0.35); }