/* Great Roofing & Building — Meta quote funnel. A recreation of the Perspective solar funnel
   (solarquote.perspectivefunnel.com/madola), measured at 375px: navy 72px header with a 40px
   CTA button, Poppins, 24px gutters, 20/25 question + 16/24 hint, 156x169 cards (4px radius,
   image area + 52px label strip), 54px inputs, full-width 52px CTA, 4px bottom progress bar.
   Reference green -> Great blue. Additions (Vince): full-bleed gradient hero with the headline +
   trust ticks overlaid, Back on every later step. */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --navy:#0F2437; --blue:#1579D4; --blue-dk:#0F5498; --blue-edge:#0B3F73; --blue-hi:#3B9BF0; --ink:#000; --sub:#1F2937;
  --line:#E5E7EB; --err:#C8312B; --gut:24px; --col:448px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:24px;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
/* app shell: the page never scrolls; only the step area does when a step is taller than the screen,
   and pulling past either end stretches then springs back (JS) so the step always stays in view */
.top{flex:0 0 auto}
.scroller{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.elastic{min-height:100%;display:flex;flex-direction:column;overflow:hidden}   /* entrance transforms must never extend the scroll area */
.elastic.snap{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.elastic .wrap{flex:0 0 auto}
.elastic .foot{margin-top:auto}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}   /* step titles get programmatic focus for screen readers — no visible box */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header — 72px navy bar, logo left, CTA right (reference proportions) */
.top{background:var(--navy);position:relative;z-index:20}
.top__in{max-width:calc(var(--col) + 2 * var(--gut));margin:0 auto;padding:8px var(--gut);height:72px;display:flex;align-items:center;gap:10px}
.top__logo{margin-right:auto}
.hback{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 10px 0 4px;margin-left:-8px;border-radius:4px;color:#fff;font-weight:600;font-size:15px;
  transition:background-color .15s,transform .28s var(--spring);-webkit-tap-highlight-color:transparent}
.hback svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.hback:hover{background:rgba(255,255,255,.08)}} .hback.is-pressed,.hback:active{transform:translate3d(0,2px,0) scale(.97);transition-duration:.07s}
.top__logo img{width:60px;height:60px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:var(--blue);color:#F5F5F5;font-weight:700;text-decoration:none;
  box-shadow:0 4px 0 var(--blue-edge);transition:background-color .15s,transform .28s var(--spring),box-shadow .28s var(--spring);will-change:transform;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.btn:hover{background:var(--blue-dk)}}
.btn.is-pressed,.btn:active{transform:translate3d(0,4px,0);box-shadow:0 0 0 var(--blue-edge);transition:transform .07s ease-out,box-shadow .07s ease-out}
.btn--top{height:40px;padding:8px 16px;font-size:16px;white-space:nowrap}
.btn--top .sm{display:none}
.top.has-back .btn--top .lg{display:none}
.top.has-back .btn--top .sm{display:inline}
.btn--main{width:calc(100% - 26px);margin:6px 13px 0;height:52px;padding:16px 24px;font-size:16px}
.btn[disabled]{opacity:.7;cursor:progress}

.wrap{width:100%;max-width:calc(var(--col) + 2 * var(--gut));margin:0 auto;position:relative}
.pad{padding:0 var(--gut)}
/* HD motion: transform + opacity only (compositor, no layout), long expo-out curves, GPU layers */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.js .rv{opacity:0}   /* entrances are Web Animations (funnel.js); CSS only holds the hidden/shown states */
.js .rv.in{opacity:1}
.js .opt.rv.in.is-pressed{transform:translate3d(0,5px,0);transition:transform .07s ease-out,box-shadow .07s ease-out}
.js .btn.rv.in.is-pressed{transform:translate3d(0,4px,0);transition:transform .07s ease-out,box-shadow .07s ease-out}
.js .top{opacity:0}
.js .top.in{opacity:1}
.step[data-step]:not([data-step="1"]){padding-top:16px}

/* headline + offer panel — reference: 24/30 headline (accent words coloured), then a full-width
   image band holding a rounded colour panel with two white product tiles and a bold caption */
.headline{font-size:24px;line-height:30px;font-weight:700;padding:14px var(--gut) 0;text-align:center}
.headline strong{color:var(--blue);font-weight:700}
.offer{margin:18px 12px 0;padding:7px 7px 6px;border-radius:12px;background:var(--blue)}
.ohero{position:relative;display:block;height:122px;border-radius:8px;overflow:hidden;background:#cfd6de}
.ohero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ohero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,20,32,.10) 0%,rgba(9,20,32,0) 35%,rgba(9,20,32,.15) 70%,rgba(9,20,32,.45) 100%)}
.offer__cap{margin-top:6px;text-align:center;color:#fff;font-weight:700;font-size:15.5px;line-height:20px}
.offer__sub{display:block;width:100%;text-align:center;color:rgba(255,255,255,.92);font-weight:500;font-size:12px;line-height:16px;margin:1px auto 0}

/* questions */
.qh{font-size:20px;line-height:25px;font-weight:700;margin-top:7px}
.qs{font-size:16px;line-height:24px;font-weight:400;margin-top:1px}
.qh--c{text-align:center;font-size:24px;line-height:30px;margin-top:10px}
.qs--c{text-align:center;color:var(--sub);margin-top:12px}

/* answer cards — reference 156x169 geometry: art area + 52px label strip, 4px radius */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:24px;padding-bottom:6px}
.step[data-step="1"] .qh{font-size:25px;line-height:31px;margin-top:18px;text-align:center}
.step[data-step="1"] .qs{font-size:17px;text-align:center;margin-top:4px}
.step[data-step="1"] .grid{margin-top:18px}
.step[data-step="1"] .opt__lbl{font-size:19px;min-height:58px}
.step[data-step="1"] .opt__art--icon{aspect-ratio:156/120}
.opt{display:flex;flex-direction:column;border-radius:4px;overflow:hidden;background:var(--blue);text-align:center;box-shadow:0 5px 0 var(--blue-edge);
  transition:background-color .15s,transform .28s var(--spring),box-shadow .28s var(--spring);-webkit-tap-highlight-color:transparent;will-change:transform}
.opt__art{display:block;aspect-ratio:156/117;background:linear-gradient(180deg,#d9dde2,#b9bfc6)}
.opt__art img{width:100%;height:100%;object-fit:cover}
.opt__art--icon{background:var(--blue);display:grid;place-items:center}
.tile{width:68%;aspect-ratio:1/1;max-height:76%;border-radius:6px;background:#fff;display:grid;place-items:center}
.tile svg{width:84%;height:84%;fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.opt__lbl{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 10px;color:#fff;font-weight:600;font-size:16px;line-height:20px}
.opt--wide{grid-column:1/-1}
.step[data-step="2"] .opt__art{aspect-ratio:auto;height:76px}   /* shorter service photos so step 2 fits step 1's height */
.opt[data-key="reroof"] .opt__art img{object-position:50% 18%}
.opt[data-key="repairs"] .opt__art img{object-position:50% 28%}
.step[data-step]{min-height:var(--stepH,0)}                       /* every step = step 1's height (JS measures it) */
.opt--strip .opt__lbl{min-height:46px;font-size:15px}
@media (hover:hover){.opt:hover{background:var(--blue-dk)}}
.opt.is-pressed,.opt:active{transform:translate3d(0,5px,0);box-shadow:0 0 0 var(--blue-edge);transition:transform .07s ease-out,box-shadow .07s ease-out}


/* final step title */
.qh .ok{color:#16A34A}
.fin-tick{display:grid;place-items:center;width:46px;height:46px;margin:12px auto 0;border-radius:8px;background:#16A34A;box-shadow:0 4px 0 #0F7A35}
.fin-tick svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* final CTA attention loop — every effect is transform/opacity only (GPU), so it stays at full frame rate */
.btn--cta{position:relative;isolation:isolate}
.btn--cta>span{position:relative;z-index:2}
.cta__ring{position:absolute;inset:-3px;border-radius:7px;border:2.5px solid var(--blue);opacity:0;z-index:0;pointer-events:none;transform:translate3d(0,0,0)}
.cta__sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:1;pointer-events:none}
.cta__sheen::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;transform:translate3d(-140%,0,0) skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))}
.js .btn--cta.rv.in{animation:ctaWiggle 2.6s cubic-bezier(.36,.07,.19,.97) 1.2s infinite}
.js .btn--cta.rv.in .cta__ring{animation:ctaRing 1.3s cubic-bezier(.16,1,.3,1) 1.2s infinite}
.js .btn--cta.rv.in .cta__sheen::after{animation:ctaSheen 2.6s cubic-bezier(.45,0,.2,1) 1.2s infinite}
.btn--cta.is-pressed,.btn--cta[disabled],.btn--cta.is-pressed *,.btn--cta[disabled] *,.btn--cta[disabled] .cta__sheen::after{animation:none!important}
@keyframes ctaWiggle{
  0%,58%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  61%{transform:translate3d(-2px,0,0) rotate(-2.4deg) scale(1.035)}
  65%{transform:translate3d(3px,0,0) rotate(2.6deg) scale(1.045)}
  69%{transform:translate3d(-3px,0,0) rotate(-2.2deg) scale(1.045)}
  73%{transform:translate3d(2px,0,0) rotate(1.5deg) scale(1.03)}
  77%{transform:translate3d(-1px,0,0) rotate(-.6deg) scale(1.01)}
  81%{transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes ctaRing{0%{opacity:.75;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(0,0,0) scale(1.12,1.32)}}
@keyframes ctaSheen{0%,40%{transform:translate3d(-140%,0,0) skewX(-20deg)}78%,100%{transform:translate3d(330%,0,0) skewX(-20deg)}}

/* inputs — 54px, icon left, light border (reference) */
.inp{position:relative;display:flex;align-items:center;margin-top:16px;border:1px solid var(--line);border-radius:4px;background:#fff;transition:border-color .15s,box-shadow .15s}
.inp:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,121,212,.15)}
.inp__ico{width:53px;flex:0 0 53px;text-align:center;font-size:17px}
.inp input,.inp textarea{flex:1;min-width:0;height:54px;border:0;outline:0;background:none;font:inherit;font-size:16px;font-weight:300;color:var(--ink);padding:0 16px 0 0}
.inp--ta{align-items:flex-start}.inp--ta .inp__ico{padding-top:15px}
.inp textarea{height:auto;min-height:74px;padding:15px 16px 12px 0;resize:vertical;line-height:22px}
.inp input::placeholder,.inp textarea::placeholder{color:#6B7280}
#postcode{text-transform:uppercase}#postcode::placeholder{text-transform:none}
.inp.has-err{border-color:var(--err)}
.err{font-size:14px;line-height:20px;color:var(--err);font-weight:500;margin-top:6px}
.err:empty{display:none}
.err--form{text-align:center}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#loc .btn--main,#lead .btn--main{margin-top:18px}
.privacy{font-size:12px;line-height:18px;color:rgba(0,0,0,.6);text-align:center;margin-top:14px}
.linkish{font-size:12px;text-decoration:underline;color:rgba(0,0,0,.7)}
.privacy-box{margin-top:10px;padding:12px 14px;border-radius:4px;background:#F5F6F8;font-size:12px;line-height:18px;color:rgba(0,0,0,.7);display:grid;gap:6px}

.back{display:inline-flex;align-items:center;height:32px;padding:0 8px;margin-left:-8px;border-radius:4px;font-size:14px;font-weight:500;color:rgba(0,0,0,.6)}
.back:hover{color:#000;background:#F5F6F8}

/* success — the whole step area becomes the photo with a deep navy→blue gradient; white minimal copy */
body.is-done .scroller{background:
  linear-gradient(180deg,rgba(9,22,40,.55) 0%,rgba(9,22,40,.35) 30%,rgba(10,40,80,.62) 62%,rgba(8,20,38,.94) 100%),
  url(/assets/thankyou-bg.webp) center 35%/cover no-repeat #0F2437}
.done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px 28px 40px!important}
.done:focus{outline:none}
.done__badge{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#16A34A;
  box-shadow:0 0 0 10px rgba(22,163,74,.22),0 12px 30px rgba(0,0,0,.35)}
.done__badge{position:relative}
.done__badge svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done__badge path{stroke-dasharray:24;stroke-dashoffset:24}
.done__badge.in path{animation:tickDraw .55s cubic-bezier(.65,0,.35,1) .45s forwards}
/* permanent pulse: two staggered rings ripple out forever + the badge gently breathes */
.done__badge::before,.done__badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(34,197,94,.8);opacity:0;pointer-events:none}
.done__badge.in::before{animation:tickRing 2s cubic-bezier(.16,1,.3,1) 1s infinite}
.done__badge.in::after{animation:tickRing 2s cubic-bezier(.16,1,.3,1) 2s infinite}
.done__badge.in{animation:tickBreathe 2s ease-in-out 1s infinite}
@keyframes tickBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@keyframes tickRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
.done__h{font-size:34px;line-height:40px;font-weight:700;margin-top:22px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.done__sub{font-size:18px;line-height:27px;font-weight:500;margin-top:12px;max-width:330px;color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.done__sub strong{color:#fff;font-weight:700;padding-bottom:2px;background:linear-gradient(var(--blue-hi),var(--blue-hi)) left bottom/0% 3px no-repeat}
.done__sub.in strong{animation:svcLine .7s cubic-bezier(.16,1,.3,1) 1.1s forwards}
@keyframes svcLine{to{background-size:100% 3px}}
body.is-done .rated{color:rgba(255,255,255,.85)}

/* footer + progress */
.foot{padding:10px var(--gut) 12px}
.rated{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}
.rated img{width:54px;height:auto}
.progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:rgba(21,121,212,.2);z-index:5}
.progress span{display:block;height:100%;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}

@media (min-width:520px){
  .wrap{padding-top:16px}
  .offer{margin-left:0;margin-right:0}
  .headline,.step[data-step="1"] .pad{padding-left:0;padding-right:0}
  .wrap{padding-left:var(--gut);padding-right:var(--gut)}
  .pad{padding:0}
}
@media (max-width:340px){
  :root{--gut:16px}
  .btn--top{font-size:14px;padding:8px 12px}
  .headline{font-size:22px;line-height:28px}
  .offer__cap{font-size:16px;line-height:21px}
  .opt__lbl{font-size:14.5px}
  .qh--c{font-size:22px;line-height:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.done__badge path{stroke-dashoffset:0}.done__sub strong{background-size:100% 3px}}