/* Prime Inspections — "custom experience" pop-up form.
   Mobile-first. Typography + geometry follow ventures/_design-spec/midstream-design-spec.md:
   Titillium Web display (light at scale, tight tracking) + Inter body, one accent used
   sparingly, flat surfaces, hairline rules, square corners, no drop shadows as decoration.
   Brand values sampled off the live primeinspections.com. */

:root{
  --ink:#070f17;
  --panel:#0b1620;
  --panel-2:#101f2b;
  --fg:#eef3f7;
  --fg-dim:#c4ced7;
  --muted:#8fa3b1;
  --line:rgba(174,185,195,.18);
  --line-strong:rgba(174,185,195,.34);
  --cyan:#00a9ce;            /* Prime logo cyan */
  --cyan-deep:#0880a6;       /* Prime button fill on the live site */
  --danger:#ff9b8a;
  --display:"Titillium Web","Segoe UI",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
html{overflow-x:hidden}
body{
  background:var(--ink); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; overscroll-behavior:none;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.nojs{color:#c4ced7;font:16px/1.5 Inter,sans-serif;padding:24px}

/* ───────────────────────────── site backdrop ───────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;background:var(--ink);overflow:hidden}
/* stage = the 1600x1000 (phone 390x844) capture, scaled like object-fit:cover, top-anchored */
.bg__stage{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:max(100vw,calc(100vh * 1.6));aspect-ratio:1600/1000}
.bg__hero{position:absolute;left:0;width:100%;top:11.5%;height:88.6%;overflow:hidden;
  background:#0b1620 url("https://primeinspections.com/media/prime-hero-poster.jpg?v=3") center/cover no-repeat}
/* desktop: the site plays the 1920x1080 file at natural size centred in the hero (1600 wide = 120%) */
.bg__vid{position:absolute;left:50%;top:50%;width:120%;height:auto;aspect-ratio:16/9;
  transform:translate(-50%,-50%);object-fit:cover}
.bg__over{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:719px){
  .bg__stage{width:max(100vw,calc(100vh * 390 / 844));aspect-ratio:390/844}
  .bg__hero{top:7.7014%;height:92.4171%}
  .bg__vid{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
}
@media (prefers-reduced-motion:reduce){.bg__vid{display:none}}
.scrim{
  position:fixed;inset:0;z-index:10;
  background:rgba(4,8,12,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .36s var(--ease);
}
.scrim.is-on{opacity:1}

/* ───────────────────────── persistent trigger tab ──────────────────────── */
.tab{
  position:fixed;z-index:20;
  right:calc(16px + var(--safe-r));
  bottom:calc(86px + var(--safe-b));   /* clears the site's own chat bubble */
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 15px 0 13px;
  background:rgba(11,22,32,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--cyan);
  color:var(--fg);
  font-size:13px;font-weight:500;letter-spacing:.01em;
  transition:transform .28s var(--ease),opacity .28s var(--ease),border-color .2s;
}
.tab:hover{border-color:var(--cyan)}
.tab:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tab__spark{
  width:7px;height:7px;flex:none;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,169,206,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,70%,100%{box-shadow:0 0 0 0 rgba(0,169,206,.5)}
  35%{box-shadow:0 0 0 7px rgba(0,169,206,0)}
}
.tab.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none}

/* ─────────────────────────────── the pop-up ────────────────────────────── */
.invite{
  position:fixed;z-index:30;
  left:0;right:0;bottom:0;
  width:100%;
  max-height:calc(100dvh - 16px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#0e1d28 0%,#091219 100%);
  border-top:1px solid var(--line-strong);
  padding:20px calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l));
  opacity:0;transform:translateY(26px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.invite.is-on{opacity:1;transform:none}
.invite__rule{
  position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-deep) 46%,transparent 92%);
}
.invite__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.invite__brand{
  margin:0;display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);
}
.invite__brand span{color:var(--muted);letter-spacing:.14em}
.invite__brand::before{content:"";width:16px;height:2px;background:var(--cyan);flex:none}
.invite__x{
  width:44px;height:44px;margin:-10px -12px -10px 0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.invite__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.invite__x:hover{color:var(--fg)}
.invite__x:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}

.invite__h{
  font-family:var(--display);font-weight:200;
  font-size:clamp(29px,7.9vw,34px);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 6px;color:#fff;
}
.invite__sub{
  margin:0 0 18px;color:var(--fg-dim);font-size:14.5px;line-height:1.45;
  max-width:34ch;
}

/* ──────────────────────────────── the form ─────────────────────────────── */
.f{margin:0}
.lbl{
  display:block;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 7px;
}

/* segmented Operator / Contractor */
.seg{border:0;padding:0;margin:0 0 15px;min-width:0}
.seg__legend{padding:0}
.seg__row{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong)}
.seg__in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg__opt{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 10px;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);background:rgba(255,255,255,.02);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.seg__opt + .seg__in + .seg__opt,
.seg__row > .seg__opt:last-of-type{border-left:1px solid var(--line)}
.seg__opt:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.seg__in:checked + .seg__opt{
  background:var(--cyan-deep);color:#fff;
  box-shadow:inset 0 2px 0 0 var(--cyan);
}
.seg__in:focus-visible + .seg__opt{outline:2px solid var(--cyan);outline-offset:-3px}

.fld{margin:0 0 12px}
.in{
  display:block;width:100%;height:50px;
  padding:0 14px;
  color:var(--fg);background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:0;
  font-size:16px;line-height:50px;   /* 16px keeps iOS from zooming the field */
  transition:border-color .18s,background .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;
}
.in::placeholder{color:#6b7d8b}
.in:hover{border-color:var(--line-strong)}
.in:focus{
  outline:none;border-color:var(--cyan);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 -2px 0 0 var(--cyan);
}
.in[aria-invalid="true"]{border-color:rgba(255,155,138,.75);box-shadow:inset 0 -2px 0 0 var(--danger)}
.err{
  margin:7px 0 0;font-size:13px;line-height:1.45;color:var(--danger);
  display:flex;gap:7px;align-items:flex-start;
}
.err::before{content:"";flex:none;width:2px;align-self:stretch;background:var(--danger);opacity:.7}

.go{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;margin-top:18px;
  background:var(--cyan-deep);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--cyan-deep);
  transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s;
}
.go i{font-style:normal;font-size:17px;line-height:1;transition:transform .24s var(--ease)}
.go:hover{background:var(--cyan);border-color:var(--cyan)}
.go:hover i{transform:translateX(3px)}
.go:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.go[disabled]{opacity:.62;cursor:default}
.go[disabled]:hover i{transform:none}

.consent{
  margin:12px 0 0;color:var(--muted);
  font-size:11.5px;line-height:1.5;max-width:44ch;
}

/* ────────────────────────── player overlay ───────────────────────────── */
.ovl{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,12,.86);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s var(--ease);
}
.ovl.is-on{opacity:1}
.ovl__frame{width:100%;height:100%;background:var(--ink);position:relative}
.ovl__frame iframe{display:block;width:100%;height:100%;border:0}
/* The player renders its own close control inside the iframe, so this one is a
   keyboard-only fallback: clipped out of the artwork until it takes focus. */
.ovl__x{
  position:fixed;z-index:62;
  top:calc(10px + var(--safe-t));
  left:calc(10px + var(--safe-l));
  width:1px;height:1px;padding:0;overflow:hidden;opacity:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,15,23,.86);border:0;color:var(--fg-dim);
}
.ovl__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.ovl__x:focus{
  width:44px;height:44px;opacity:1;
  border:1px solid var(--cyan);color:#fff;
  outline:2px solid var(--cyan);outline-offset:2px;
}

/* ───────────────────────────── tablet / desktop ────────────────────────── */
@media (min-width:720px){
  .tab{right:calc(26px + var(--safe-r));bottom:calc(84px + var(--safe-b));font-size:13.5px}

  .invite{
    left:auto;right:26px;bottom:26px;top:auto;
    width:min(432px,calc(100vw - 52px));
    max-height:calc(100vh - 52px);
    border:1px solid var(--line-strong);
    padding:26px 30px 28px;
    transform:translateY(20px) scale(.985);transform-origin:100% 100%;
  }
  .invite.is-on{transform:none}
  .invite__h{font-size:34px}
  .invite__sub{font-size:15px;margin-bottom:20px}

  .ovl{padding:0}
  .ovl__frame{
    width:min(1600px,94vw);height:min(1000px,92vh);
    border:1px solid var(--line-strong);
  }

}

@media (min-width:1180px){
  /* a generous centred card reads better than a corner toast on a big screen */
  .invite{
    right:auto;bottom:auto;
    left:50%;top:50%;
    width:472px;max-height:88vh;
    transform:translate(-50%,-50%) translateY(22px) scale(.985);transform-origin:50% 50%;
    padding:30px 34px 32px;
  }
  .invite.is-on{transform:translate(-50%,-50%)}
  .invite__h{font-size:38px}
}

/* ───────────────────────────── reduced motion ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .invite{transform:none !important}
  .invite.is-on{transform:none !important}
  .tab__spark{animation:none}
  .scrim{-webkit-backdrop-filter:none;backdrop-filter:none}
}