/* ---- scope everything under .md-quote so it can't clash with your site ---- */
    @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

    .md-quote{
      --ink:#15171C; --ink-soft:#3A3F49; --steel:#717783; --steel-2:#9aa0ab;
      --line:#E5E8EE; --line-soft:#EEF1F5;
      --surface:#F4F6F9; --card:#FFFFFF; --card-2:#FBFCFE;
      --electric:#1257FF; --electric-ink:#0B3CB8; --electric-wash:#ECF1FF;
      --radius:16px; --radius-sm:11px;
      --shadow:0 1px 2px rgba(21,23,28,.05), 0 10px 30px -12px rgba(21,23,28,.18);
      box-sizing:border-box; max-width:640px; margin:0 auto; padding:0;
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    .md-quote *,.md-quote *::before,.md-quote *::after{box-sizing:border-box;}

    .md-panel{
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:30px 30px 22px; overflow:hidden;
    }

    /* ---- header ---- */
    .md-eyebrow{
      margin:0 0 10px; font-size:11.5px; font-weight:600; letter-spacing:.14em;
      text-transform:uppercase; color:var(--electric);
    }
    .md-title{
      margin:0; font-family:'Archivo',sans-serif; font-weight:800; font-size:30px;
      letter-spacing:-.02em; line-height:1.05;
    }
    .md-head{text-align:center;}
    .md-logo{width:84px; height:84px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; background:#15171C; box-shadow:0 0 0 1px rgba(21,23,28,.06), 0 8px 20px -8px rgba(21,23,28,.45);}
    .md-sub{margin:9px auto 0; font-size:14.5px; line-height:1.5; color:var(--steel); max-width:44ch;}

    /* ---- progress ---- */
    .md-progress{display:flex; align-items:center; gap:14px; margin:22px 0 4px;}
    .md-progress-track{flex:1; height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden;}
    .md-progress-fill{height:100%; width:0%; border-radius:99px;
      background:linear-gradient(90deg,var(--electric),#3D74FF);
      transition:width .4s cubic-bezier(.4,0,.2,1);}
    .md-progress-label{font-size:12px; font-weight:600; color:var(--steel-2); white-space:nowrap; letter-spacing:.01em;}
    .md-estimate{font-size:12px; font-weight:700; color:var(--electric); background:var(--electric-wash); border-radius:99px; padding:4px 10px; white-space:nowrap;}
    .md-estimate[hidden]{display:none;}

    /* ---- stage / step ---- */
    .md-stage{margin-top:22px; min-height:230px;}
    .md-step-q{margin:0 0 4px; font-family:'Archivo',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.01em;}
    .md-step-hint{margin:0 0 18px; font-size:13.5px; color:var(--steel);}

    .md-step{animation:mdIn .32s cubic-bezier(.2,.7,.3,1) both;}
    @keyframes mdIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

    /* ---- option cards ---- */
    .md-grid{display:grid; gap:12px;}
    .md-grid.cols-2{grid-template-columns:repeat(2,1fr);}
    .md-grid.cols-3{grid-template-columns:repeat(3,1fr);}

    .md-card{
      position:relative; overflow:hidden; cursor:pointer; text-align:left;
      background:var(--card-2); border:1.5px solid var(--line); border-radius:var(--radius-sm);
      padding:16px 16px 15px; display:flex; flex-direction:column; gap:9px;
      transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
      font-family:inherit; color:var(--ink);
    }
    .md-card:hover{transform:translateY(-2px); border-color:#C9D4EE; box-shadow:0 8px 20px -12px rgba(18,87,255,.35);}
    .md-card:focus-visible{outline:3px solid var(--electric-wash); outline-offset:2px; border-color:var(--electric);}
    /* gloss sweep — a single light streak across the card, like light on fresh paint */
    .md-card::after{
      content:""; position:absolute; top:-60%; left:-75%; width:55%; height:220%;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
      transform:skewX(-18deg); transition:left .55s cubic-bezier(.2,.7,.3,1); pointer-events:none;
    }
    .md-card:hover::after{left:140%;}

    .md-card.is-selected{border-color:var(--electric); background:var(--electric-wash);}
    .md-card.is-selected .md-card-ic{color:var(--electric);}
    .md-card-ic{color:var(--ink-soft); height:46px; display:flex; align-items:flex-end; transition:color .18s;}
    .md-card-ic svg{display:block;}
    .md-card-photo{width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--line-soft); margin-bottom:1px;}
    .md-card-photo img{width:100%; height:100%; object-fit:cover; display:block;}
    .md-card-photo.is-contain{background:#F3F5F9; border:1px solid var(--line-soft);}
    .md-card-photo.is-contain img{object-fit:contain; padding:4%;}
    .md-card-t{font-weight:600; font-size:15px; letter-spacing:-.01em;}
    .md-card-s{font-size:12.5px; color:var(--steel); line-height:1.35; margin-top:-3px;}
    .md-card-check{
      position:absolute; top:11px; right:11px; width:20px; height:20px; border-radius:50%;
      background:var(--electric); color:#fff; display:none; align-items:center; justify-content:center;
    }
    .md-card.is-selected .md-card-check{display:flex;}

    /* compact yes/no cards centre their content */
    .md-grid.is-binary .md-card{flex-direction:row; align-items:center; gap:13px; padding:16px 18px;}
    .md-grid.is-binary .md-card-ic{height:auto;}
    .md-grid.is-binary .md-card-body{display:flex; flex-direction:column; gap:1px;}
    .md-card-thumb{flex:0 0 auto; width:132px; height:104px; border-radius:10px; overflow:hidden; background:var(--line-soft);}
    .md-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

    /* ---- nav / footer ---- */
    .md-nav{display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft);}
    .md-foot-note{font-size:12px; color:var(--steel-2); margin-left:auto;}
    .md-btn{
      font-family:inherit; font-weight:600; font-size:14px; border-radius:10px; cursor:pointer;
      padding:11px 18px; border:1.5px solid transparent; transition:background .16s,border-color .16s,transform .12s,color .16s;
    }
    .md-btn:active{transform:translateY(1px);}
    .md-btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-soft);}
    .md-btn-ghost:hover{border-color:var(--steel-2); background:var(--card-2);}
    .md-btn-ghost[hidden]{display:none;}
    .md-btn-primary{background:var(--electric); color:#fff;}
    .md-btn-primary:hover{background:var(--electric-ink);}
    .md-btn-primary:focus-visible{outline:3px solid var(--electric-wash); outline-offset:2px;}
    .md-btn-block{width:100%; padding:14px; font-size:15px;}

    /* ---- work order / quote ---- */
    .md-ticket{
      border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--card-2); overflow:hidden;
      animation:mdIn .32s cubic-bezier(.2,.7,.3,1) both;
    }
    .md-ticket-top{padding:16px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px;}
    .md-ticket-label{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2);}
    .md-chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;}
    .md-chip{font-size:11.5px; font-weight:600; color:var(--electric-ink); background:var(--electric-wash); border-radius:99px; padding:4px 10px;}
    .md-lines{padding:6px 18px;}
    .md-line{display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line);}
    .md-line:last-child{border-bottom:0;}
    .md-line-label{font-size:14px; color:var(--ink-soft);}
    .md-line-amt{margin-left:auto; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;}
    /* perforation above total */
    .md-perf{height:14px; position:relative; background:
        radial-gradient(circle at 7px 50%, transparent 0 5px, var(--card-2) 5px) repeat-x;
        background-size:14px 14px; border-top:1px dashed var(--line);}
    .md-total{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 18px; background:var(--card);}
    .md-total-k{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);}
    .md-total-v{font-family:'Archivo',sans-serif; font-weight:800; font-size:34px; letter-spacing:-.02em; color:var(--ink);
      font-variant-numeric:tabular-nums;}

    /* ---- booking form ---- */
    .md-form{margin-top:18px; display:grid; gap:12px;}
    .md-book{margin-top:18px;}
    .md-contact-fields{display:grid; gap:12px; margin-bottom:14px;}
    .md-textarea{min-height:62px; resize:vertical; font-family:inherit; line-height:1.4;}
    .md-opt{font-weight:400; color:var(--steel-2);}
    .md-book-alt{display:flex; gap:10px; margin-top:10px;}
    .md-book-alt .md-btn{flex:1; text-align:center; text-decoration:none;}
    .md-contact{margin:12px 0 0; text-align:center; font-size:13px; color:var(--steel);}
    .md-contact a{color:var(--steel); text-decoration:underline; text-underline-offset:2px;}
    .md-contact a:hover{color:var(--electric);}
    @media (max-width:560px){ .md-book-alt{flex-direction:column;} }
    .md-field{display:flex; flex-direction:column; gap:6px;}
    .md-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
    .md-label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
    .md-input{
      font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--card);
      border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; transition:border-color .16s,box-shadow .16s;
    }
    .md-input::placeholder{color:var(--steel-2);}
    .md-input:focus{outline:none; border-color:var(--electric); box-shadow:0 0 0 3px var(--electric-wash);}
    .md-input.is-error{border-color:#E0413B; box-shadow:0 0 0 3px rgba(224,65,59,.12);}
    .md-fineprint{font-size:12px; color:var(--steel); line-height:1.45; margin:2px 0 0;}
    .md-book-sub{margin:10px 0 0; text-align:center; font-size:13px; color:var(--steel);}
    .md-startover{display:block; margin:14px auto 2px; background:none; border:none; cursor:pointer;
      font-family:inherit; font-size:13px; font-weight:600; color:var(--steel-2); text-decoration:underline; text-underline-offset:2px;}
    .md-startover:hover{color:var(--electric);}

    .md-confirm{text-align:center; padding:14px 8px 8px; animation:mdIn .32s ease both;}
    .md-confirm-ic{width:54px; height:54px; border-radius:50%; background:var(--electric-wash); color:var(--electric);
      display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
    .md-confirm h3{margin:0 0 6px; font-family:'Archivo',sans-serif; font-weight:700; font-size:21px;}
    .md-confirm p{margin:0 auto; font-size:14px; color:var(--steel); max-width:38ch; line-height:1.5;}
    .md-confirm-actions{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;}
    .md-confirm-actions a{text-decoration:none;}

    /* ---- responsive ---- */
    @media (max-width:560px){
      .md-panel{padding:22px 18px 16px;}
      .md-title{font-size:25px;}
      .md-grid.cols-3{grid-template-columns:1fr;}
      .md-total-v{font-size:30px;}
      .md-foot-note{display:none;}
    }
    @media (prefers-reduced-motion:reduce){
      .md-step,.md-ticket,.md-confirm{animation:none;}
      .md-card,.md-card::after,.md-progress-fill,.md-btn{transition:none;}
      .md-card:hover{transform:none;}
    }