@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --ivory:#F8F4EE;
  --stone:#EAE3D8;
  --white:#FFFFFF;
  --charcoal:#2A2622;
  --charcoal-soft:#4A443E;
  --gold:#C79A5F;
  --gold-soft:#DCC9A8;
  --line:rgba(42,38,34,0.12);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--charcoal-soft);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:500; color:var(--charcoal); }
h1{ font-size:clamp(42px,6vw,72px); line-height:1.08; letter-spacing:0.005em; }
h2{ font-size:clamp(30px,3.6vw,42px); line-height:1.2; }
h3{ font-size:clamp(22px,2.6vw,28px); line-height:1.3; }
em{ font-style:italic; color:var(--gold); font-weight:400; }

.eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.lede{
  font-size:19px;
  line-height:1.75;
  color:var(--charcoal-soft);
  font-weight:300;
}

.section{ padding:130px 32px; }
.container{ max-width:1100px; margin:0 auto; }
.prose{ max-width:640px; margin:0 auto; }
.center{ text-align:center; }

.divider{
  width:157px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  margin:24px auto;
  border:none;
  opacity:0.85;
}

.btn{
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:500;
  padding:18px 40px;
  border-radius:100px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.btn-gold{ background:var(--gold); color:var(--white); }
.btn-gold:hover{ background:var(--charcoal); transform:translateY(-2px); box-shadow:0 12px 28px rgba(42,38,34,0.18); }
.btn-gold:disabled{ opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-gold:disabled:hover{ background:var(--gold); }
.btn-outline{ background:transparent; border:1px solid var(--charcoal); color:var(--charcoal); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.card{
  background:var(--white);
  border-radius:4px;
  padding:56px;
  box-shadow:0 2px 24px rgba(42,38,34,0.05);
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- HERO ---------------- */
.hero-wrap{ padding:150px 6vw 90px; }
.hero-inner{ max-width:620px; margin:0 auto; text-align:center; }

/* ---------------- APPLICATION SHELL ---------------- */
.app-shell{ display:none; padding:0 6vw 150px; }
.app-shell.is-active{ display:block; }
.app-frame{ max-width:640px; margin:0 auto; }

/* progress indicator */
.progress-wrap{ max-width:640px; margin:0 auto 56px; }
.progress-track{
  position:relative;
  height:1px;
  background:var(--line);
  margin-bottom:18px;
}
.progress-fill{
  position:absolute; top:0; left:0; height:1px;
  background:var(--gold);
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.progress-labels{
  display:flex; justify-content:space-between;
}
.progress-step{
  font-family:'Montserrat', sans-serif;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--line);
  color:rgba(42,38,34,0.32);
  transition:color 0.4s ease;
  text-align:center;
  flex:1;
}
.progress-step.done,
.progress-step.active{ color:var(--gold); }

/* step panels */
.step-panel{ display:none; }
.step-panel.is-active{ display:block; animation:stepIn 0.6s cubic-bezier(0.16,1,0.3,1); }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.step-eyebrow{ margin-bottom:10px; }
.step-title{ margin-bottom:14px; }
.step-sub{ font-size:16px; color:var(--charcoal-soft); margin-bottom:44px; font-weight:300; }

.field-group{ margin-bottom:28px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
label.field-label{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--charcoal-soft);
  margin-bottom:10px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea{
  width:100%;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  color:var(--charcoal);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 2px;
  transition:border-color 0.3s ease;
  outline:none;
}
input:focus, select:focus, textarea:focus{ border-color:var(--gold); }
textarea{ resize:vertical; min-height:120px; line-height:1.7; }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C79A5F' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; padding-right:20px; }
::placeholder{ color:rgba(74,68,62,0.4); font-weight:300; }

/* question groups */
.question-block{ margin-bottom:48px; }
.question-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(20px,2.2vw,24px);
  color:var(--charcoal);
  margin-bottom:22px;
  line-height:1.4;
}
.option-list{ display:flex; flex-direction:column; gap:12px; }
.option-card{
  display:flex; align-items:center; gap:16px;
  border:1px solid rgba(199,154,95,0.4);
  padding:18px 22px;
  cursor:pointer;
  transition:border-color 0.3s ease, background 0.3s ease;
  background:var(--white);
}
.option-card:hover{ border-color:var(--gold); }
.option-card.selected{ border-color:var(--gold); background:rgba(199,154,95,0.08); }
.option-marker{
  flex:0 0 18px; width:18px; height:18px;
  border:1px solid var(--gold);
  position:relative;
  transition:background 0.3s ease;
}
.option-list.single .option-marker{ border-radius:50%; }
.option-list.multi .option-marker{ border-radius:3px; }
.option-card.selected .option-marker{ background:var(--gold); }
.option-marker::after{
  content:'';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:8px; height:8px;
  border-radius:50%;
  background:var(--white);
  transition:transform 0.25s ease;
}
.option-list.multi .option-marker::after{
  width:9px; height:6px; border-radius:0;
  border-left:1.5px solid var(--white); border-bottom:1.5px solid var(--white);
  background:transparent;
  transform:translate(-50%,-65%) rotate(-45deg) scale(0);
}
.option-card.selected .option-marker::after{ transform:translate(-50%,-50%) scale(1); }
.option-list.multi .option-card.selected .option-marker::after{ transform:translate(-50%,-65%) rotate(-45deg) scale(1); }
.option-text{ font-size:15.5px; color:var(--charcoal-soft); }
.option-card.selected .option-text{ color:var(--charcoal); }

.other-input{ margin-top:14px; display:none; }
.other-input.is-visible{ display:block; }

/* slider */
.slider-wrap{ padding-top:8px; }
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:1px;
  background:var(--line);
  outline:none;
  margin:32px 0 12px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--gold);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(42,38,34,0.2);
  transition:transform 0.25s ease;
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border:none; border-radius:50%; background:var(--gold); cursor:pointer;
}
.slider-scale{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:0.08em; color:rgba(74,68,62,0.45); margin-bottom:6px; }
.slider-value{
  text-align:center; margin-top:18px;
  font-family:'Cormorant Garamond', serif;
  font-size:40px; color:var(--gold);
}

/* nav buttons */
.step-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:56px; }
.step-back{
  font-family:'Montserrat', sans-serif;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--charcoal-soft); background:none; border:none; cursor:pointer;
  transition:color 0.3s ease;
}
.step-back:hover{ color:var(--gold); }
.step-back.is-hidden{ visibility:hidden; }

.step-footer-quote{
  text-align:center; margin-top:64px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:19px; color:var(--charcoal); opacity:0.85;
}

/* thank you */
.thankyou-shell{ display:none; padding:170px 6vw 170px; }
.thankyou-shell.is-active{ display:block; animation:stepIn 0.8s cubic-bezier(0.16,1,0.3,1); }
.thankyou-inner{ max-width:560px; margin:0 auto; text-align:center; }
.signature{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:22px; color:var(--charcoal); margin-top:36px; }

@media(max-width:700px){
  .hero-wrap{ padding:110px 24px 60px; }
  .section{ padding:90px 24px; }
  .app-shell{ padding:0 20px 100px; }
  .card{ padding:36px 26px; }
  .field-row{ grid-template-columns:1fr; }
  .step-nav{ flex-direction:column-reverse; gap:24px; align-items:stretch; }
  .step-nav .btn{ text-align:center; }
  .progress-labels .progress-step:not(.active){ display:none; }
  .progress-labels{ justify-content:center; }
}