/* ==========================================================================
   M&M Insulation Ltd: "Free Insulation Check" quiz form
   Shared by free-survey.html, contact.html and get-a-free-survey.html (snippet: partials/snippets/quiz-form.html).
   Load this AFTER the page stylesheet so it wins where both style the same field.
   ========================================================================== */
/* The one-question-at-a-time form ------------------------------------------ */
.quiz__head{text-align:center;margin-bottom:1rem;}
.quiz__head h2{font-size:clamp(1.35rem,1vw + 1.1rem,1.75rem);letter-spacing:.07em;text-transform:uppercase;margin:0 0 .3rem;}
.quiz__head .lp-form__sub{margin:0;}
.quiz__progress{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:0 0 1.4rem;}
.quiz__progress span{height:6px;border-radius:99px;background:rgba(22,35,61,.14);transition:background-color .35s ease;}
.quiz__progress span.is-done{background:var(--accent);}
.quiz__step{display:none;border:0;margin:0;padding:0;min-width:0;}
.quiz__step.is-current{display:block;animation:quizIn .32s ease both;}
@keyframes quizIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.quiz__step legend{display:block;width:100%;padding:0;text-align:center;margin:0 0 1.1rem;}
.quiz__count{display:block;font-size:.85rem;font-weight:600;color:var(--accent-deep);margin-bottom:.3rem;}
.quiz__q{display:block;font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:clamp(1.3rem,1vw + 1.05rem,1.65rem);line-height:1.2;color:var(--ink);}
.quiz__field{display:block;}
.quiz .quiz__field input[type=text],.quiz .quiz__field input[type=tel],.quiz .quiz__field input[type=email]{
  width:100%;min-height:58px;padding:.9rem 1.1rem;font-size:1.08rem;border-radius:var(--radius-s);
}
.quiz__tiles{display:grid;gap:.7rem;}
.quiz__tiles--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.quiz__tiles--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.quiz__tile{display:flex;position:relative;cursor:pointer;}
.quiz__tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.quiz__tile-body{
  display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  min-height:96px;padding:.85rem .5rem;border:1.5px solid var(--border);border-radius:var(--radius-s);background:#F7F8F6;
  color:var(--ink);transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s;
}
.quiz__tile-body svg{width:30px;height:30px;color:var(--ink);flex:none;}
.quiz__tile-label{font-weight:700;font-size:.92rem;line-height:1.25;}
.quiz__tile:hover .quiz__tile-body{border-color:var(--accent-deep);background:#fff;}
.quiz__tile input:checked + .quiz__tile-body{border-color:var(--accent-deep);background:var(--accent-tint);box-shadow:0 0 0 3px var(--accent-tint);}
.quiz__tile input:checked + .quiz__tile-body svg{color:var(--accent-deep);}
.quiz__tile input:focus-visible + .quiz__tile-body{outline:3px solid var(--accent-deep);outline-offset:2px;}
.quiz .btn{margin-top:1rem;}
.quiz__back{
  display:block;margin:1.1rem auto 0;background:none;border:0;padding:.5rem .8rem;cursor:pointer;
  font:600 .92rem 'Public Sans',sans-serif;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.quiz__back[hidden]{display:none;}
.quiz__back:hover{color:var(--accent-deep);}
.quiz__back:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px;}
@media (max-width:420px){
  .quiz__tiles--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (prefers-reduced-motion: reduce){
  .quiz__step.is-current{animation:none;}
  .quiz__progress span,.quiz__tile-body{transition:none;}
}
.quiz__tiles--2 .quiz__tile:last-child:nth-child(odd){grid-column:1/-1;}   /* a lone last tile spans the full width */

/* quiz: consent wording and tick-box on the phone and email questions */
.quiz__note{margin:.7rem 0 0;max-width:none;font-size:.86rem;line-height:1.45;color:var(--slate);text-align:center;}
.quiz__consent-field{margin-top:1rem;}
.quiz__consent{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.9rem;line-height:1.45;color:var(--ink);}
.quiz__consent input{flex:none;width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--accent-deep);cursor:pointer;}
.quiz__consent-field.has-error .quiz__consent input{outline:2px solid var(--flag);outline-offset:2px;}
.quiz__consent-field .field-error{margin-top:.4rem;}
@media (max-width:420px){.quiz__tiles--3 .quiz__tile:last-child:nth-child(odd){grid-column:1/-1;}}   /* five property types: the last one spans the row on phones */
.quiz .quiz__consent{font-weight:500;font-size:.9rem;}

.quiz__sub{margin:0;font-size:.92rem;color:var(--ink-soft);}

/* ==========================================================================
   Stand-out styling (owner feedback: make it grab attention and fit the desktop page better)
   ========================================================================== */
.quiz__head{
  position:relative;overflow:hidden;background:var(--ink);border-radius:var(--radius-s);
  padding:1.05rem 1.2rem 1.15rem;margin:0 0 1.4rem;
}
.quiz__head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 170px at 100% 0%,rgba(200,146,63,.38),transparent 70%);
}
.quiz__head > *{position:relative;}
.quiz__head h2{display:flex;align-items:center;justify-content:center;gap:.65rem;color:var(--accent-on-dark);margin:0 0 .3rem;}
.quiz__head-icon{flex:none;width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:50%;background:var(--accent);color:var(--on-accent);}
.quiz__head .quiz__sub{color:rgba(255,255,255,.9);}
.quiz__progress{gap:6px;}
.quiz__progress span{height:8px;}
.quiz__count{
  display:inline-block;margin-bottom:.65rem;padding:.3rem .9rem;border-radius:99px;
  background:var(--accent-tint);color:var(--accent-deep);font-size:.84rem;font-weight:700;
}
.form-card{border-top:5px solid var(--accent);}
/* an arrow on the main buttons */
.quiz__next::after,.quiz button[type=submit]::after{
  content:"";flex:none;width:20px;height:20px;margin-left:.15rem;transition:transform .25s var(--ease-out,ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316233D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
.quiz__next:hover::after,.quiz button[type=submit]:hover::after{transform:translateX(4px);}
.quiz button[type=submit]:disabled::after{display:none;}

/* desktop: bigger and bolder, but compact enough that every question fits the first screen */
@media (min-width:1000px){
  .quiz__head{padding:1rem 1.5rem 1.1rem;margin-bottom:1.15rem;}
  .quiz__head h2{font-size:1.5rem;gap:.8rem;margin-bottom:.2rem;}
  .quiz__head-icon{width:38px;height:38px;padding:8px;}
  .quiz__sub{font-size:1rem;}
  .quiz__progress{gap:8px;margin-bottom:.95rem;}
  .quiz__progress span{height:9px;}
  .quiz__count{font-size:.86rem;padding:.3rem .95rem;margin-bottom:.5rem;}
  .quiz__q{font-size:1.9rem;}
  .quiz__step legend{margin-bottom:1.1rem;}
  .quiz .quiz__field input[type=text],.quiz .quiz__field input[type=tel],.quiz .quiz__field input[type=email]{
    min-height:62px;font-size:1.15rem;padding:.9rem 1.2rem;
  }
  .quiz__tiles{gap:.8rem;}
  .quiz__tiles--2{grid-template-columns:repeat(6,minmax(0,1fr));}                /* five insulation types: three, then two wider */
  .quiz__tiles--2 .quiz__tile{grid-column:span 2;}
  .quiz__tiles--2 .quiz__tile:nth-child(n+4){grid-column:span 3;}
  .quiz__tiles--2 .quiz__tile:last-child:nth-child(odd){grid-column:span 3;}
  .quiz__tile-body{min-height:104px;gap:.5rem;padding:.8rem .5rem;}
  .quiz__tile-body svg{width:34px;height:34px;}
  .quiz__tile-label{font-size:.98rem;}
  .quiz .btn{min-height:58px;font-size:1.1rem;margin-top:1.1rem;}
  .quiz__note{font-size:.9rem;margin-top:.6rem;}
  .quiz .quiz__consent{font-size:.95rem;}
  .quiz__consent-field{margin-top:.8rem;}
  .quiz__consent input{width:24px;height:24px;}

  /* all six questions share one card height, so the card never jumps as people move through it */
  .quiz form{position:relative;display:grid;}
  .quiz__step{display:block;grid-area:1/1;visibility:hidden;pointer-events:none;}
  .quiz__step.is-current{visibility:visible;pointer-events:auto;}
  .quiz__back{position:absolute;left:0;top:0;margin:0;padding:.35rem .6rem;font-size:.95rem;z-index:2;}
}

/* ==========================================================================
   Free Survey page (get-a-free-survey.html): the quiz sits beside the headline in the first screen
   ========================================================================== */
.qhero .wrap.qhero__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;justify-items:stretch;
  column-gap:clamp(2.5rem,5vw,5rem);row-gap:0;padding-block:.85rem 3.25rem;
}
.qhero__copy{display:grid;justify-items:start;}
.qhero h1{max-width:16ch;}
.qhero__talk{margin:1.4rem 0 0;max-width:44ch;font-size:.97rem;color:rgba(255,255,255,.86);}
.qhero__talk a{color:var(--accent-on-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.qhero__card.form-card{
  background:#fff;color:var(--ink);border:0;border-top:6px solid var(--accent);border-radius:var(--radius-m);
  padding:clamp(1.1rem,1.8vw,1.8rem);scroll-margin-top:90px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 8px rgba(200,146,63,.16),0 34px 70px -18px rgba(0,0,0,.6);
  animation:qCardIn .7s cubic-bezier(.22,.61,.36,1) both,qCardGlow 3.4s ease-in-out 1.2s 3;
}
@keyframes qCardIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes qCardGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 8px rgba(200,146,63,.16),0 34px 70px -18px rgba(0,0,0,.6);}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 0 15px rgba(200,146,63,.3),0 34px 70px -18px rgba(0,0,0,.6);}
}
@media (prefers-reduced-motion: reduce){.qhero__card.form-card{animation:none;}}
.qsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);}
@media (max-width:900px){
  .qhero .wrap.qhero__grid{grid-template-columns:1fr;row-gap:2rem;padding-bottom:3rem;}
  .qhero h1{max-width:none;}
}
@media (max-width:640px){.qsteps{grid-template-columns:1fr;}}