/* Solar Sales funnel template. Colours and fonts come from config.brand via CSS variables set in script.js.
   Layout is responsive at template level: phone first, then tablet (>=720px) and desktop (>=1024px).
   Every client funnel gets all three sizes from the same config: never style a size per client. */
:root{--bg:#1E1F22;--card:#2C2F34;--card-line:#565B62;--line:#3A3D42;--text:#FFFFFF;--muted:#9AA0A8;--btn:#FFFFFF;--btn-text:#121212;--glow:#2E6BFF;--glow2:#7B4DFF;--neon:#38B6FF;--radius:8px;--head:'Barlow Condensed','Arial Narrow',sans-serif;--body:Barlow,Arial,sans-serif;
  /* Small viewport height: stays fixed while the phone's browser bar grows and shrinks, so nothing jumps. */
  --vh:100vh;
  /* Logo row at the top of each page (in the page, not a separate bar) */
  --bar:0px}
@supports (height:100svh){:root{--vh:100svh}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:var(--vh);background:var(--bg);color:var(--text);font:400 16px/1.5 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
/* The glow is sized to the LARGEST viewport (lvh), so it never resizes when Safari/Chrome bars move.
   It sits in the upper half only: the bottom edge stays plain background, because iOS Safari's floating
   toolbar shows whatever is behind it and a bright glow there reads as a coloured band over the page. */
#glow{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:0;pointer-events:none;transition:background .4s ease;
  background:radial-gradient(90% 45% at 50% 18%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 72%),
             radial-gradient(70% 35% at 100% 0%,color-mix(in srgb,var(--glow2) 28%,transparent),transparent 70%)}
@supports (height:100lvh){#glow{height:100lvh}}
#app{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;min-height:calc(var(--vh) - var(--bar));display:flex;flex-direction:column}
/* Logo: top left of every page, above Back or the headline; scrolls with the page */
.brandrow{display:flex;margin:0 0 6px}
.brandlogo{height:25px;width:auto;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--neon) 75%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--neon) 35%,transparent))}

/* Neon (config.brand.neon): Yes/No boxes, logo, base county, and [[text]] in questions */
.neon-text{color:#fff;font-weight:700;white-space:nowrap;text-shadow:0 0 4px color-mix(in srgb,var(--neon) 85%,transparent),0 0 11px color-mix(in srgb,var(--neon) 45%,transparent)}
a{color:inherit}
img{max-width:100%;display:block}
.page{padding:calc(14px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;flex:1;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}

/* Ticker: full width of the screen at every size. script.js repeats the items to cover any width
   and sets --shift (one set's width) and --dur, so the loop is seamless and never runs out. */
.ticker{position:relative;overflow:hidden;height:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(18,18,18,.8);display:flex;align-items:center;width:100vw;margin-left:calc(50% - 50vw)}
.ticker .track{display:flex;align-items:center;white-space:nowrap;animation:tick var(--dur,38s) linear infinite;will-change:transform}
.ticker .set{display:flex;align-items:center;gap:18px;padding-left:18px;flex:none}
.ticker span{font:500 14px/1 var(--body);color:var(--muted)}
.ticker b{font:600 17px/1 var(--head);color:var(--text);margin-right:3px}
.ticker i{width:5px;height:5px;border-radius:50%;background:var(--muted);flex:none}
@keyframes tick{to{transform:translateX(calc(-1 * var(--shift,50%)))}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* Landing */
/* Landing column: headline, hero image and first question all held to the image's width,
   so the text starts and ends where the van does. --col is the image width at each screen size. */
.landing{padding-top:16px;--col:100%}
.landing .intro,.landing .panel{width:100%;max-width:var(--col);margin-left:auto;margin-right:auto}
.intro{display:flex;flex-direction:column}
.h-land{font:600 34px/1.08 var(--head);text-align:center;margin:8px 0 0;letter-spacing:-.005em}
.align-left .h-land,.align-left .panel .q,.align-left .panel .sub{text-align:left}
.roles{margin:14px auto 0;width:100%;max-width:440px}
.roles .lbl{font:600 13px/1 var(--body);color:var(--muted);text-align:center;margin-bottom:10px}
.roles .row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.roles .row div{text-align:center;padding:10px 4px}
.roles .row div+div{border-left:1px solid var(--line)}
.roles b{display:block;font:600 19px/1.1 var(--head)}
.roles span{font-size:13px;color:var(--muted)}
.roles .note{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0}
/* The first question: no box around it. It sits on the page on its own and takes at least half the screen. */
.panel{margin-top:22px;flex:1;min-height:calc(var(--vh) * .5);display:flex;flex-direction:column}
.panel .q{text-align:center;font-size:30px;margin-top:0}
.panel .sub{text-align:center}
.panel-body{margin:0}
.panel .foot{margin-top:auto;padding-top:28px}

/* Hero image. Three presentations, picked with config.assets.heroStyle */
.hero{position:relative;width:100%;margin:16px auto 0}
.hero img{width:100%;height:auto}
/* "ground": van stands on a lit floor line, so the cropped wheels read as sitting on the ground */
/* --lift raises the line to where the tyres visibly end (config.assets.heroLift, share of the image height).
   The line sits BEHIND the van, so the tyres stand on it rather than floating above it. */
.hero.ground{padding-bottom:10px;z-index:0;--lift:0%}
.hero.ground::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:calc(9px + var(--lift));height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 55%,transparent) 20%,color-mix(in srgb,var(--text) 55%,transparent) 80%,transparent)}
/* Drives in at a steady pace, eases off and brakes gently (1.8 seconds). */
.hero.drive img{animation:drive 1.8s both}
@keyframes drive{0%{transform:translateX(var(--x0,-115vw));animation-timing-function:cubic-bezier(.3,.3,.45,1)}94%{transform:translateX(.6%);animation-timing-function:ease-in-out}100%{transform:none}}
.hero.drive::after{transform-origin:left;animation:linein 1.6s cubic-bezier(.3,.3,.45,1) both}
.hero.drive::before{animation:fadein .5s 1.4s both}
/* Wiggle every 2 seconds to draw the eye: Yes/No tiles (first wiggle as the van stops) and the Next / Send buttons. */
@keyframes wiggle{0%,20%,100%{transform:none}4%{transform:rotate(-2deg)}8%{transform:rotate(2deg)}12%{transform:rotate(-1.5deg)}16%{transform:rotate(1deg)}}
.yesno .opt,.inputstep .btn,.form .btn{animation:wiggle 2s ease-in-out 1s infinite}
.landing.drive .yesno .opt{animation-delay:1.8s}
.yesno .opt:hover,.inputstep .btn:hover,.form .btn:hover{animation-play-state:paused}
.btn[disabled]{animation:none}
@keyframes linein{from{transform:scaleX(0)}}
@keyframes fadein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero.drive img,.hero.drive::after,.hero.drive::before,.yesno .opt,.inputstep .btn,.form .btn{animation:none}}
.hero.ground::before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:22px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 55%,transparent),transparent);filter:blur(4px)}
/* "tile": van inside a card, wheels resting on the card's bottom edge */
.hero.tile{width:100%;padding:18px 18px 0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-bottom:2px solid color-mix(in srgb,var(--text) 35%,var(--line));overflow:hidden}
.hero.tile img{width:88%;margin:0 auto}
/* "fade": wheels fade into the page */
.hero.fade img{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}

/* Step header */
.top{display:flex;justify-content:space-between;align-items:center;font:600 13px/1 var(--body);color:var(--muted);min-height:44px}
.back{background:none;border:0;color:var(--muted);font:inherit;padding:12px 12px 12px 0;margin:-12px 0;cursor:pointer}
.back:hover{color:var(--text)}
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--text);border-radius:2px;transition:width .3s ease}

/* Question */
.q{font:600 34px/1.1 var(--head);margin:28px 0 0;letter-spacing:-.005em}
.sub{color:var(--muted);margin:8px 0 0;font-size:16px;line-height:1.45}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.opt{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:56px;padding:14px 16px;text-align:left;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-line);color:var(--text);font:500 16px/1.3 var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover,.opt:focus-visible{border-color:var(--text);outline:none}
.opt.on{border-color:var(--text);background:color-mix(in srgb,var(--card) 80%,#fff 8%)}
.opt small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.yesno .opt{align-items:center;text-align:center;min-height:122px;gap:12px;padding:18px 8px;font-size:17px;border:1.5px solid color-mix(in srgb,var(--neon) 85%,transparent);background:color-mix(in srgb,var(--card) 85%,transparent);
  box-shadow:0 0 4px color-mix(in srgb,var(--neon) 55%,transparent),0 0 12px color-mix(in srgb,var(--neon) 22%,transparent),inset 0 0 10px color-mix(in srgb,var(--neon) 12%,transparent);
  transition:box-shadow .2s,transform .1s}
/* Yes / No words: big and lit */
.yesno .opt .lbl{font:600 24px/1 var(--head);color:#fff;text-shadow:0 0 4px color-mix(in srgb,var(--neon) 85%,transparent),0 0 12px color-mix(in srgb,var(--neon) 45%,transparent)}
.yesno .opt:hover,.yesno .opt:focus-visible{border-color:var(--neon);box-shadow:0 0 6px color-mix(in srgb,var(--neon) 75%,transparent),0 0 18px color-mix(in srgb,var(--neon) 35%,transparent),inset 0 0 14px color-mix(in srgb,var(--neon) 20%,transparent)}
.yesno .opt:active{transform:scale(.985)}
.panel .yesno .opt{min-height:150px}
.ico{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ico.y{background:var(--btn);color:var(--btn-text);box-shadow:0 0 6px color-mix(in srgb,var(--neon) 65%,transparent),0 0 14px color-mix(in srgb,var(--neon) 28%,transparent)}
.ico.n{background:transparent;color:var(--text);border:2px solid color-mix(in srgb,var(--neon) 85%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--neon) 55%,transparent),inset 0 0 6px color-mix(in srgb,var(--neon) 30%,transparent)}
.ico.n svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--neon) 70%,transparent))}
.ico svg{width:28px;height:28px}

/* Job specs (steps with showRoles), shown under the answers. Phone: tabs, one role at a time. Tablet and up: three cards side by side. */
.specs{margin-top:28px}
.spec-lbl{font:600 13px/1 var(--body);color:var(--muted);margin-bottom:10px}
.spec-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:rgba(18,18,18,.45);border:1px solid var(--line)}
.spec-tabs button{border:0;border-radius:7px;background:transparent;color:var(--muted);font:600 15px/1.1 var(--head);padding:9px 4px;cursor:pointer}
.spec-tabs button[aria-selected=true]{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--card-line)}
.spec-cards{margin-top:8px}
.spec{padding:14px 14px 12px;border-radius:var(--radius);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line)}
.spec[hidden]{display:none}
.spec h3{margin:0;font:600 20px/1.1 var(--head)}
.spec .lvl{font-size:13px;color:var(--muted);margin-top:2px}
.spec ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.spec li{display:flex;gap:9px;font-size:14px;line-height:1.35}
.spec li::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}

/* Map */
.map{display:block;margin:18px auto 0;height:auto;max-width:48%}
.legend{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--muted);pointer-events:none;user-select:none}
.legend-title{font:600 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legend-items{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:8px;border-radius:1px}
.legend i.glow{box-shadow:0 0 3px color-mix(in srgb,var(--neon) 80%,transparent),0 0 6px color-mix(in srgb,var(--neon) 40%,transparent)}

/* Text-box steps (layout "input", e.g. Eircode) */
.inputstep{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.inputstep .inp{height:58px;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.inputstep .inp::placeholder{text-transform:none;letter-spacing:0}
.inputstep .help{margin:0;font-size:13px;color:var(--muted)}
.inputstep .help a{color:var(--text)}

/* Form */
.form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.fld{display:flex;flex-direction:column;gap:8px;font:600 14px/1 var(--body)}
.inp{height:50px;padding:0 14px;border-radius:6px;border:1px solid var(--card-line);background:var(--card);color:var(--text);font:400 16px var(--body)}
.inp::placeholder{color:#6E747C}
.inp:focus{outline:none;border-color:var(--text)}
.inp[aria-invalid=true]{border-color:#E08A70}
/* Phones: first and last name share a row, so the submit button sits above Safari's floating toolbar */
@media (max-width:719px){
  .form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:12px}
  .form>*{grid-column:1/-1;min-width:0}
  .form .inp{width:100%;min-width:0}
  .form>.fld:has(input[name=firstName]),.form>.fld:has(input[name=lastName]){grid-column:auto}
}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);margin-top:4px;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#fff}
.consent.need{padding:10px;margin:0 -10px;border-radius:var(--radius);outline:1.5px solid #E08A70;color:var(--text)}
.err{margin:0;padding:12px 14px;border-radius:var(--radius);background:rgba(200,80,60,.14);border:1px solid rgba(224,138,112,.5);font-size:14px}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 18px;border-radius:var(--radius);background:var(--btn);color:var(--btn-text);border:1px solid var(--btn);font:700 17px/1.2 var(--body);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(.92)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn[disabled]{opacity:.7;cursor:progress}
.btn.outline{background:transparent;color:var(--text);border-color:var(--text)}
.btn.outline:hover{background:rgba(255,255,255,.06)}

/* End pages */
.h-end{font:600 44px/1.05 var(--head);margin:26px 0 0}
.end p{margin:12px 0 0}
.end .m{color:var(--muted)}
.end .note{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.end .gap{margin-top:22px}
.foot{margin-top:auto;padding-top:28px;text-align:center;font-size:12px;line-height:1.7;color:var(--muted)}
.end .foot{margin-top:28px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}

/* ---------- Phones (<720px) ----------
   iOS Safari's floating toolbar covers the bottom of the screen. Extra bottom room means the last
   answer and the footer can always be scrolled clear of it. */
@media (max-width:719px){
  .page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---------- Tablet (>=720px) ---------- */
@media (min-width:720px){
  #app{max-width:680px}
  .page{padding:32px 40px calc(48px + env(safe-area-inset-bottom))}
  .q{font-size:42px}
  .sub{font-size:17px}
  .h-land{font-size:40px}
  .landing{--col:448px}
  .panel{margin-top:30px}
  .panel .q{font-size:34px}
  .ico{width:100px;height:100px}
  .ico svg{width:56px;height:56px}
  .panel .yesno .opt{min-height:230px;font-size:20px}
  .yesno .opt .lbl{font-size:30px}
  .opt{min-height:60px;font-size:17px}
  .yesno .opt{min-height:150px}
  .spec-tabs{display:none}
  .spec-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:0}
  .spec[hidden]{display:block}
  .map{max-width:37%}
  .end{max-width:560px;margin:0 auto;width:100%}
}

/* ---------- Desktop (>=1024px) ---------- */
@media (min-width:1024px){
  #app{max-width:1160px}
  /* Landing: one column, top to bottom: headline, van, question. Everything held to the van's width. */
  .landing{--col:512px;padding:40px 56px calc(56px + env(safe-area-inset-bottom))}
  .landing .h-land{font-size:48px;margin-top:0}
  .landing .hero{margin-top:24px}
  .landing .panel{margin-top:36px;min-height:0}
  .landing .panel .q{font-size:38px}
  .landing .panel .sub{font-size:18px}
  .landing .yesno{gap:16px;margin-top:24px}
  .landing .panel .yesno .opt{min-height:220px;font-size:24px;gap:16px}
  .landing .yesno .opt .lbl{font-size:36px}
  .landing .ico{width:150px;height:150px}
  .landing .ico svg{width:84px;height:84px}
  .landing .panel .foot{margin-top:40px}
  /* Question pages: one comfortable centred column */
  .page:not(.landing):not(.end){max-width:760px;margin:0 auto;width:100%;padding-top:28px}
  .brandlogo{height:32px}
  .q{font-size:48px}
  .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .opts .opt:last-child:nth-child(odd){grid-column:1/-1}
  /* Map step: map beside the answers */
  .mapstep{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;margin-top:12px}
  .mapstep .map{max-width:100%;margin:0 auto}
  .mapstep .legend{flex-direction:column;align-items:center;gap:6px}
  .mapstep .legend-items{flex-direction:column;align-items:flex-start;gap:6px}
  .mapstep .opts{grid-template-columns:1fr;margin-top:0}
  .mapstep .inputstep{margin-top:0}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .form .consent,.form .err,.form .btn{grid-column:1/-1}
}

/* Cookie choice bar (tracking.consent). Accept and Reject look the same on purpose: Irish/EU guidance
   says rejecting must be as easy as accepting. Sits over the bottom of the page until a choice is made. */
.cookiebar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;max-width:560px;margin:0 auto;
  background:var(--card);border:1px solid var(--card-line);border-radius:calc(var(--radius) + 4px);padding:14px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:13px;line-height:1.5;color:var(--muted)}
.cookiebar p{margin:0;flex:1 1 260px}
.cookiebar a{color:var(--text)}
.cb-btns{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.cb-btn{font:600 14px var(--body);padding:10px 18px;border-radius:var(--radius);border:1px solid var(--card-line);background:transparent;color:var(--text);cursor:pointer;min-width:92px}
.cb-btn:hover{border-color:var(--text)}

/* Privacy notice page (config.privacyNotice) */
.privacy{max-width:640px}
.privacy h2{font:600 22px/1.2 var(--head);margin:28px 0 0}
.privacy ul{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.privacy li{margin:6px 0;line-height:1.5}
.privacy p{line-height:1.6}