/* Scalus hero quiz — the default lead capture on every concept site.
   Liquid glass, sits in the right of the hero, adopts the host page's accent.
   Everything is namespaced .hq- and the root uses all:initial, because this is
   injected into unrelated design systems and must never inherit or leak. */

/* The pinned mobile bar and any in page link target this by id, and it is
   injected rather than authored, so the sticky header offset has to live here
   or every concept lands it behind its own header. */
#hero-quiz,.hq{scroll-margin-top:96px}
@media (max-width:640px){#hero-quiz,.hq{scroll-margin-top:88px}}

.hq{
  --hq-accent:#C2703D;
  --hq-on-accent:#fff;
  --hq-ink:#12181C;
  --hq-fg:#12181C;
  --hq-fg-2:rgba(18,24,28,.66);
  --hq-fg-3:rgba(18,24,28,.44);
  --hq-line:rgba(18,24,28,.13);
  --hq-line-2:rgba(18,24,28,.26);
  --hq-glass:rgba(255,255,255,.62);
  --hq-glass-2:rgba(255,255,255,.82);
  --hq-glass-line:rgba(255,255,255,.85);
  --hq-glass-hi:rgba(255,255,255,.95);
  --hq-field:rgba(255,255,255,.9);
  --hq-shadow:0 30px 70px -30px rgba(10,20,28,.42),0 4px 14px -6px rgba(10,20,28,.2);
  --hq-s:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hq-e:cubic-bezier(.16,1,.3,1);
  --hq-r:26px;

  all:initial;
  display:block;
  box-sizing:border-box;
  font-family:var(--hq-s);
  color:var(--hq-fg);
  text-align:left;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  width:100%;
  max-width:470px;
  margin-inline:auto;
  border-radius:var(--hq-r);
  overflow:hidden;
  position:relative;
  z-index:5;
  background:var(--hq-glass);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid var(--hq-glass-line);
  box-shadow:inset 0 1px 0 var(--hq-glass-hi),var(--hq-shadow);
  animation:hqIn 1.2s var(--hq-e) both;
}
@keyframes hqIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

/* on a dark hero the glass flips */
.hq.hq-dark{
  --hq-fg:#F2F5F4;
  --hq-fg-2:rgba(242,245,244,.68);
  --hq-fg-3:rgba(242,245,244,.44);
  --hq-line:rgba(242,245,244,.15);
  --hq-line-2:rgba(242,245,244,.3);
  --hq-glass:rgba(255,255,255,.07);
  --hq-glass-2:rgba(255,255,255,.12);
  --hq-glass-line:rgba(255,255,255,.17);
  --hq-glass-hi:rgba(255,255,255,.22);
  --hq-field:rgba(255,255,255,.07);
  --hq-shadow:0 30px 70px -28px rgba(0,0,0,.78),0 4px 14px -6px rgba(0,0,0,.6);
}

.hq *,.hq *::before,.hq *::after{box-sizing:border-box}
.hq p,.hq h2,.hq h3,.hq ul,.hq li{margin:0;padding:0}
.hq ul{list-style:none}
.hq img{max-width:100%;height:auto;display:block;border:0}
.hq button{font:inherit;color:inherit}

/* the client's own logo tops the form */
.hq-brand{
  display:flex;align-items:center;justify-content:center;
  padding:18px 20px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hq-accent) 14%,transparent),transparent);
  border-bottom:1px solid var(--hq-line);
}
.hq-brand img{max-height:44px;width:auto;object-fit:contain}
.hq-brand span{
  font:600 15px/1.2 var(--hq-s);letter-spacing:.02em;color:var(--hq-fg);
}

/* Michael's film, directly under the logo, full bleed inside the glass.
   It hands over to stills when it ends, so the frame is never dead. */
.hq-media{
  position:relative;
  aspect-ratio:16/9;
  background:#0A1017;
  border-bottom:1px solid var(--hq-line);
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
}
/* the shared .hq img rule sets height:auto, so these need the extra class to
   win, otherwise every still collapses to its natural height */
.hq-media .hq-vid,
.hq-media .hq-stills,
.hq-media .hq-still{
  position:absolute;inset:0;width:100%;height:100%;
}
.hq-media .hq-vid{object-fit:cover;display:block;transition:opacity 1s var(--hq-e)}
.hq-media .hq-stills{opacity:0;transition:opacity 1s var(--hq-e);pointer-events:none}
.hq-media .hq-still{object-fit:cover;opacity:0;transition:opacity 1.4s var(--hq-e)}
.hq-media .hq-still.on{opacity:1}
.hq-media[data-state="stills"] .hq-vid{opacity:0}
.hq-media[data-state="stills"] .hq-stills{opacity:1}

/* A light scrim at the top only, so the white sound pill always has something
   under it whatever the frame is doing. Nothing along the bottom: the film
   carries its own burned in captions down there and the pills there bring
   their own background. */
.hq-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,16,.5),transparent 30%);
}

.hq-sound,.hq-replay{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:0 14px;border-radius:999px;cursor:pointer;
  background:rgba(9,15,21,.5);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  color:#fff;font:600 12.5px/1 var(--hq-s);letter-spacing:.005em;white-space:nowrap;
  transition:opacity .7s var(--hq-e),transform .6s var(--hq-e),background .4s,border-color .4s;
}
/* the film's own captions sit along the bottom, so the sound pill lives up
   top where it can never land on a word */
.hq-sound{left:12px;top:12px}
.hq-replay{right:12px;bottom:12px}
.hq-sound:hover,.hq-replay:hover{background:rgba(9,15,21,.68);border-color:rgba(255,255,255,.46)}
.hq-sound:active,.hq-replay:active{transform:scale(.97)}
.hq-ic{display:block;width:15px;height:15px;flex:0 0 auto}
.hq-ic svg{width:100%;height:100%;display:block}

/* one control at a time: the pill while the film runs, the replay after it */
.hq-media[data-state="stills"] .hq-sound{opacity:0;visibility:hidden;transform:translateY(-6px)}
.hq-media[data-state="video"] .hq-replay{opacity:0;visibility:hidden;transform:translateY(6px)}
.hq-media[data-state="video"] .hq-sound{
  opacity:1;visibility:visible;transform:none;animation:hqPillTop .9s var(--hq-e) both;
}
.hq-media[data-state="stills"] .hq-replay{
  opacity:1;visibility:visible;transform:none;animation:hqPill .9s var(--hq-e) both;
}
@keyframes hqPill{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hqPillTop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:420px){
  .hq-sound,.hq-replay{font-size:12px;padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  .hq-media .hq-vid,.hq-media .hq-stills,.hq-media .hq-still{transition-duration:.01ms}
  .hq-media[data-state="video"] .hq-sound,
  .hq-media[data-state="stills"] .hq-replay{animation:none}
}

.hq-live{padding:20px 22px 22px}

.hq-prog{display:flex;gap:5px;margin-bottom:14px}
.hq-prog i{
  flex:1;height:3px;border-radius:3px;background:var(--hq-line);
  transition:background .8s var(--hq-e);
}
.hq-prog i.on{background:var(--hq-accent)}

.hq-step{
  font:600 10.5px/1.4 var(--hq-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hq-fg-3);margin-bottom:9px;
}
.hq-q{font:600 20px/1.28 var(--hq-s);letter-spacing:-.015em;color:var(--hq-fg)}
.hq-hint{font-size:13.5px;color:var(--hq-fg-2);margin-top:7px}

.hq-opts{display:grid;gap:8px;margin:17px 0 4px}
.hq-opt{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:13px 15px;border-radius:15px;
  background:var(--hq-glass-2);border:1px solid var(--hq-line);
  font-size:14.5px;line-height:1.45;color:var(--hq-fg);
  transition:border-color .5s,background .5s,transform .6s var(--hq-e);
}
.hq.hq-dark .hq-opt{background:rgba(255,255,255,.05)}
.hq-opt:hover{border-color:var(--hq-line-2);transform:translateY(-1px)}
.hq-opt:active{transform:scale(.985)}
.hq-opt.on{
  border-color:var(--hq-accent);
  background:color-mix(in srgb,var(--hq-accent) 13%,transparent);
}
.hq-dot{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  border:1.6px solid var(--hq-line-2);position:relative;transition:border-color .5s;
}
.hq-opt.on .hq-dot{border-color:var(--hq-accent)}
.hq-opt.on .hq-dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--hq-accent);
  animation:hqPop .5s var(--hq-e) both;
}
@keyframes hqPop{from{transform:scale(0)}to{transform:scale(1)}}

.hq-fields{display:grid;gap:11px;margin:17px 0 4px}
.hq-f label{
  display:block;font:600 10.5px/1.4 var(--hq-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--hq-fg-3);margin-bottom:6px;
}
.hq-f input{
  width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--hq-line);
  background:var(--hq-field);color:var(--hq-fg);
  font:400 15px/1.4 var(--hq-s);
  transition:border-color .5s,box-shadow .6s var(--hq-e);
}
.hq-f input::placeholder{color:var(--hq-fg-3)}
.hq-f input:focus{
  outline:none;border-color:var(--hq-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--hq-accent) 16%,transparent);
}

.hq-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.hq-back{
  background:none;border:0;padding:6px 2px;cursor:pointer;
  font:400 13px/1 var(--hq-s);color:var(--hq-fg-3);text-decoration:underline;
  text-underline-offset:3px;transition:color .5s;
}
.hq-back:hover{color:var(--hq-fg)}
.hq-next{
  margin-left:auto;cursor:pointer;border:0;
  padding:14px 24px;border-radius:100px;
  background:var(--hq-accent);color:var(--hq-on-accent);
  font:600 14px/1 var(--hq-s);
  box-shadow:0 8px 24px -8px color-mix(in srgb,var(--hq-accent) 70%,transparent);
  transition:transform .7s var(--hq-e),filter .4s,opacity .4s;
}
.hq-next:hover{transform:translateY(-2px);filter:brightness(1.06)}
.hq-next:active{transform:scale(.97)}
.hq-next:disabled{
  cursor:not-allowed;transform:none;box-shadow:none;
  background:transparent;color:var(--hq-fg-3);
  border:1px solid var(--hq-line);
}

.hq-priv{margin-top:13px;font-size:11.5px;line-height:1.55;color:var(--hq-fg-3)}

/* result */
.hq-res{padding:22px}
.hq-badge{
  display:inline-block;font:600 10px/1 var(--hq-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hq-on-accent);background:var(--hq-accent);padding:7px 12px;border-radius:100px;
}
.hq-res h3{font:600 21px/1.25 var(--hq-s);letter-spacing:-.015em;margin-top:14px;color:var(--hq-fg)}
.hq-res > p{font-size:14.5px;line-height:1.7;color:var(--hq-fg-2);margin-top:10px}
.hq-list{display:grid;gap:9px;margin:16px 0 18px}
.hq-list li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--hq-fg-2)}
.hq-list svg{flex:0 0 auto;width:15px;height:15px;margin-top:3px;color:var(--hq-accent)}
.hq-res-cta{display:flex;gap:10px;flex-wrap:wrap}
.hq-again{
  background:none;cursor:pointer;padding:14px 20px;border-radius:100px;
  border:1px solid var(--hq-line-2);color:var(--hq-fg);
  font:600 14px/1 var(--hq-s);transition:background .5s,transform .6s var(--hq-e);
}
.hq-again:hover{background:var(--hq-glass-2)}
.hq-disc{margin-top:15px;font-size:11.5px;line-height:1.6;color:var(--hq-fg-3)}

.hq-fade{animation:hqFade .55s var(--hq-e) both}
@keyframes hqFade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .hq,.hq-fade,.hq-opt.on .hq-dot::after{animation:none}
  .hq *{transition:none !important}
}

/* the host hero becomes two columns when it was not already */
.hq-host-2col{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr) !important;
  gap:clamp(28px,4vw,60px) !important;
  align-items:center !important;
}
@media(max-width:900px){
  .hq-host-2col{grid-template-columns:minmax(0,1fr) !important}
  .hq{max-width:none;margin-top:28px}
}