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

  :root{
    --ink: #3A362E;
    --olive: #625C50;
    --olive-dark: #4A4639;
    --sand: #D6CCB4;
    --sand-light: #EFEAE0;
    --cream: #F7F4EE;
    --gold: #A1812E;
    --gold-light: #C4A052;
    --white: #FDFCFA;
    --line: rgba(58,54,46,0.14);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Jost', sans-serif;
    background: #171310 url("../assets/img/background.jpg") center / cover no-repeat fixed;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  .display{font-family:'Poppins', sans-serif;}

  #app{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 32px 16px;
  }

  .card{
    width:100%;
    max-width:640px;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 40px 80px -25px rgba(0,0,0,0.55);
    overflow:hidden;
    position:relative;
  }

  /* Progress */
  .progress-wrap{
    height:3px;
    width:100%;
    background: var(--sand-light);
    position:relative;
  }
  .progress-bar{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: width .5s cubic-bezier(.65,0,.35,1);
  }
  .step-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 18px 28px 0;
    font-size:11px;
    letter-spacing: .14em;
    text-transform:uppercase;
    color: var(--olive);
    opacity:.7;
  }
  .step-label .brand{
    font-family:'Poppins', sans-serif;
    font-size:15px;
    letter-spacing:.08em;
    color: var(--ink);
    opacity:1;
    font-weight:600;
  }

  .screen{
    display:none;
    padding: 22px 28px 32px;
    animation: fadeIn .5s ease;
  }
  .screen.active{display:block;}
  @keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }

  h1.q-title{
    font-family:'Poppins', sans-serif;
    font-size: 26px;
    font-weight:500;
    line-height:1.15;
    margin-top: 10px;
    margin-bottom:6px;
    color: var(--ink);
  }
  .q-sub{
    font-size:14px;
    color: var(--olive);
    line-height:1.5;
    margin-bottom: 20px;
    max-width: 48ch;
  }

  /* ===== Section A: typology selectable cards (block layout) ===== */
  .typ-cards{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:22px;
  }
  .typ-card{
    position:relative;
    display:flex;
    align-items:stretch;
    background: var(--sand-light);
    border:2px solid transparent;
    border-radius:5px;
    cursor:pointer;
    overflow:hidden;
    transition: all .25s ease;
  }
  .typ-card:hover{ border-color: var(--gold-light); }
  .typ-card.selected{
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(161,129,46,0.55);
  }
  .typ-card-info{
    flex: 1 1 55%;
    padding: 20px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    min-width:0;
  }
  .typ-eyebrow{
    font-size:10.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--gold);
    font-weight:600;
    margin-bottom:2px;
  }
  .typ-card-info .typ-name{
    font-family:'Poppins', sans-serif;
    font-size:21px;
    font-weight:600;
    color: var(--ink);
    line-height:1.15;
  }
  .typ-card-info .typ-meta{
    font-size:11.5px;
    color: var(--olive);
    margin-top:2px;
  }
  .typ-card-info .typ-price{
    font-family:'Poppins', sans-serif;
    font-size:16px;
    font-weight:600;
    color: var(--ink);
  }
  .typ-card-info .typ-price-label{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color: var(--olive);
    opacity:.75;
  }
  .typ-card-image{
    position:relative;
    flex: 1 1 45%;
    min-height:140px;
    background: var(--sand);
    overflow:hidden;
  }
  .typ-card-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .typ-check{
    position:absolute;
    top:-12px;
    right:-12px;
    width:32px;
    height:32px;
    border-radius:50%;
    background: linear-gradient(135deg, #b9b9b9, #6f6f6f);
    border:2.5px solid #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: all .2s ease;
  }
  .typ-card.selected .typ-check{
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
  }
  .typ-check::after{
    content:"";
    width:7px;height:12px;
    border-right:2.5px solid white;
    border-bottom:2.5px solid white;
    transform: rotate(45deg) translate(-1px,-2px);
    opacity:0;
    transition: opacity .2s ease;
  }
  .typ-card.selected .typ-check::after{ opacity:1; }

  @media (max-width:460px){
    .typ-card{ flex-direction:column; }
    .typ-card-image{ min-height:120px; order:-1; }
    .typ-check{ top:10px; right:10px; }
  }

  /* Single choice list (contact) */
  .opt-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:24px;
  }
  .opt-card{
    border:1.5px solid var(--line);
    border-radius:3px;
    padding:16px 18px;
    cursor:pointer;
    transition:all .25s ease;
    background:var(--white);
    display:flex;
    align-items:center;
    gap:14px;
  }
  .opt-card:hover{border-color:var(--gold-light);}
  .opt-card.selected{
    border-color:var(--gold);
    background: rgba(161,129,46,0.06);
  }
  .opt-card .opt-emoji{
    font-size:22px;
    line-height:1;
    flex-shrink:0;
  }
  .opt-card .opt-title{
    font-family:'Poppins', sans-serif;
    font-size:19px;
    font-weight:600;
  }
  .opt-card .opt-desc{
    font-size:12.5px;
    color:var(--olive);
    margin-top:3px;
  }

  /* Buttons */
  .btn-primary{
    width:100%;
    padding:15px;
    background: var(--olive);
    color: var(--white);
    border:none;
    border-radius:2px;
    font-family:'Jost', sans-serif;
    font-size:13.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition: background .25s ease, transform .15s ease;
  }
  .btn-primary:hover:not(:disabled){ background: var(--olive-dark); }
  .btn-primary:active:not(:disabled){ transform: scale(.98); }
  .btn-primary:disabled{
    background: var(--sand);
    color: var(--olive);
    cursor:not-allowed;
    opacity:.7;
  }
  .btn-back{
    display:inline-block;
    margin-top:14px;
    font-size:12px;
    color:var(--olive);
    text-decoration:none;
    cursor:pointer;
    letter-spacing:.03em;
    opacity:.75;
  }
  .btn-back:hover{opacity:1;}

  /* Form inputs */
  .field{ margin-bottom:16px; }
  .field label{
    display:block;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--olive);
    margin-bottom:6px;
  }
  .field input{
    width:100%;
    padding:13px 14px;
    border:1.5px solid var(--line);
    border-radius:2px;
    font-family:'Jost', sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--white);
    transition:border-color .2s ease;
  }
  .field input:focus{
    outline:none;
    border-color:var(--gold);
  }
  .field input.invalid{ border-color:#B0453D; }

  /* End screens */
  .end-screen{ text-align:center; padding: 40px 28px 36px; }
  .end-icon{
    width:56px;height:56px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:26px;
  }
  .end-icon.ok{ background: rgba(161,129,46,0.12); color: var(--gold); }

  .brandmark{
    text-align:center;
    padding: 16px 0 4px;
  }
  .brandmark span{
    font-family:'Poppins', sans-serif;
    letter-spacing:.18em;
    font-size:12px;
    color: var(--olive);
    text-transform:uppercase;
    opacity:.55;
  }

  @media (max-width:420px){
    h1.q-title{ font-size:22px; }
  }