/* ===========================================================
   BIG STAR RVs — content sections
   =========================================================== */

/* ---------- Problem / pain ---------- */
.problem{position:relative}
.problem .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.problem__media{position:relative}
.problem__media .ph{aspect-ratio:4/3}
.problem__badge{position:absolute;left:-18px;bottom:-18px;background:linear-gradient(165deg,var(--navy-700),var(--navy-850));
  border:1px solid var(--hair-strong);border-radius:var(--r-md);padding:18px 22px;
  box-shadow:0 30px 60px -38px rgba(0,0,0,1);display:flex;gap:14px;align-items:center;max-width:280px}
.problem__badge svg{width:34px;height:34px;color:var(--red-bright);flex:none}
.problem__badge b{font-family:var(--ff-disp);font-size:1.05rem;text-transform:uppercase;display:block;line-height:1.1}
.problem__badge span{font-size:.82rem;color:var(--muted)}
.problem h2{margin-bottom:1.1rem}
.problem .pull{font-family:var(--ff-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.05;color:#fff;
  border-left:3px solid var(--red);padding-left:18px;margin:1.6rem 0}
@media (max-width:880px){.problem .wrap{grid-template-columns:1fr}.problem__media{order:-1}}

/* ---------- Service grid (8) ---------- */
.svc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.svc{padding:24px;display:flex;flex-direction:column;overflow:hidden}
.svc__top{height:128px;margin:-24px -24px 18px;position:relative}
.svc__top .ph{height:100%;border-radius:0;border-left:0;border-right:0;border-top:0}
.svc__ic{position:absolute;left:18px;bottom:-20px;width:46px;height:46px;border-radius:11px;
  display:grid;place-items:center;background:linear-gradient(165deg,var(--navy-600),var(--navy-800));
  border:1px solid var(--hair-strong);box-shadow:0 12px 24px -12px rgba(0,0,0,.9)}
.svc__ic svg{width:23px;height:23px;color:var(--red-bright)}
.svc h3{font-size:1.16rem;margin:14px 0 .5rem}
.svc p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;flex:1}
@media (max-width:1080px){.svc__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc__grid{grid-template-columns:1fr}}

/* ---------- Featured roof/water ---------- */
.feat{background:
   linear-gradient(180deg,rgba(7,14,34,.4),rgba(7,14,34,.4)),
   linear-gradient(120deg,var(--navy-850),var(--navy-900));
  border-block:1px solid var(--hair)}
.feat .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,68px);align-items:center}
.feat__media .ph{aspect-ratio:3/4;height:100%}
.feat h2{margin-bottom:1.2rem}
.feat>.wrap>div>p{color:var(--muted);margin-bottom:1.4rem}
.signs{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem}
.signs li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;color:var(--ink)}
.signs svg{width:18px;height:18px;color:var(--red-bright);flex:none;margin-top:.18em}
.feat__actions{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:880px){.feat .wrap{grid-template-columns:1fr}.feat__media{order:-1}.feat__media .ph{aspect-ratio:16/10}}
@media (max-width:480px){.signs{grid-template-columns:1fr}}

/* ---------- Before / after gallery ---------- */
.ba__tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:34px 0 28px;justify-content:center}
.ba__tab{font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:.92rem;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--hair);
  border-radius:999px;padding:.7em 1.3em;transition:all .2s var(--ease)}
.ba__tab[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  border-color:transparent;box-shadow:0 10px 24px -12px rgba(42,147,255,.7)}
.ba__tab:hover{color:#fff;border-color:var(--blue)}
.ba__stage{max-width:920px;margin:0 auto}
.ba__compare{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hair-strong);user-select:none;touch-action:none;cursor:ew-resize;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1)}
.ba__compare .ph{position:absolute;inset:0;border-radius:0;border:0}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__tagbefore,.ba__tagafter{position:absolute;top:16px;font-family:var(--ff-disp);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;padding:.45em .9em;border-radius:6px;
  background:rgba(5,10,24,.7);border:1px solid var(--hair-strong);z-index:3}
.ba__tagbefore{left:16px;color:var(--muted)}
.ba__tagafter{right:16px;color:var(--blue-bright)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(var(--blue-bright),var(--blue));
  transform:translateX(-50%);z-index:4;box-shadow:0 0 22px var(--blue-glow)}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:linear-gradient(165deg,#fff,#cdd8e6);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.6);z-index:5}
.ba__knob svg{width:22px;height:22px;color:var(--navy-800)}
.ba__cap{text-align:center;color:var(--muted);margin-top:18px;font-size:.95rem}
.ba__foot{text-align:center;margin-top:26px}

/* ---------- Why choose ---------- */
.why{position:relative}
.why .lede{margin-bottom:8px}
.why__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:46px}
.why__item{padding:26px 22px}
.why__item .n{font-family:var(--ff-disp);font-weight:700;color:var(--blue-bright);font-size:1.1rem;
  letter-spacing:.1em;margin-bottom:14px;display:flex;align-items:center;gap:.5rem}
.why__item .n::before{content:"";width:28px;height:28px;border-radius:8px;flex:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e01f2b' d='M12 2l2.47 6.9H22l-5.76 4.18 2.2 6.92L12 15.8l-6.44 4.2 2.2-6.92L2 8.9h7.53z'/%3E%3C/svg%3E") center/15px 15px no-repeat,
    linear-gradient(165deg,rgba(42,147,255,.22),rgba(42,147,255,.04));
  border:1px solid var(--hair-strong);
  display:inline-block;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.why__item:hover .n::before{box-shadow:0 0 16px rgba(224,31,43,.5);transform:translateY(-1px)}
.why__item h3{font-size:1.12rem;margin-bottom:.5rem;text-transform:none;letter-spacing:0}
.why__item p{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:1080px){.why__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:680px){.why__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.why__grid{grid-template-columns:1fr}}

/* ---------- Process ---------- */
.proc{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));border-block:1px solid var(--hair)}
.proc__rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px;position:relative}
.proc__step{padding:28px 22px 24px;position:relative}
.proc__num{font-family:var(--ff-disp);font-weight:700;font-size:2.6rem;line-height:1;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:12px}
.proc__step h3{font-size:1.1rem;margin-bottom:.5rem;text-transform:none;letter-spacing:0}
.proc__step p{color:var(--muted);font-size:.88rem;margin:0}
.proc__foot{text-align:center;margin-top:40px}
@media (max-width:980px){.proc__rail{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.proc__rail{grid-template-columns:1fr}}

/* ---------- Upload / lead capture ---------- */
.upload{background:
  radial-gradient(700px 400px at 80% 0%,rgba(42,147,255,.14),transparent 60%),
  linear-gradient(180deg,var(--navy-850),var(--navy-900));border-block:1px solid var(--hair)}
.upload .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
.upload h2{margin-bottom:1.1rem}
.upload__intro p{color:var(--muted);margin-bottom:1.2rem}
.upload__assure{display:flex;flex-direction:column;gap:.9rem;margin-top:1.6rem}
.upload__assure .a{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem}
.upload__assure svg{width:22px;height:22px;color:var(--blue-bright);flex:none;margin-top:.1em}
.form{background:linear-gradient(165deg,rgba(20,42,82,.55),rgba(8,16,38,.7));
  border:1px solid var(--hair-strong);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);
  box-shadow:0 40px 90px -55px rgba(0,0,0,1)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);
  font-weight:600;margin-bottom:.4rem}
.field label .req{color:var(--red-bright)}
.field input,.field select,.field textarea{background:rgba(5,10,24,.6);border:1px solid var(--hair-strong);
  border-radius:9px;color:#fff;padding:.8em .9em;font-family:inherit;font-size:.96rem;
  transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(42,147,255,.2)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,31,43,.18)}
.field .msg{font-size:.78rem;color:var(--red-bright);margin-top:.35rem;display:none}
.field.err .msg{display:block}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{flex:1;min-width:80px;text-align:center;cursor:pointer;border:1px solid var(--hair-strong);
  border-radius:9px;padding:.7em .4em;font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.04em;
  font-size:.9rem;color:var(--muted);transition:all .2s;margin:0}
.seg input:checked+label{color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-deep));border-color:transparent}
/* dropzone */
.drop{grid-column:1/-1;border:1.5px dashed var(--hair-strong);border-radius:12px;padding:26px;
  text-align:center;background:rgba(5,10,24,.4);transition:all .2s var(--ease);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--blue);background:rgba(42,147,255,.08)}
.drop svg{width:34px;height:34px;color:var(--blue-bright);margin:0 auto .6rem}
.drop b{font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.04em;display:block;font-size:1.05rem}
.drop span{font-size:.85rem;color:var(--muted-2)}
.thumbs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:-4px}
.thumbs:empty{display:none}
.thumb{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--hair-strong)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(5,10,24,.85);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1}
.form .btn{width:100%;margin-top:6px}
.form__ok{text-align:center;padding:30px 10px}
.form__ok svg{width:64px;height:64px;color:var(--blue-bright);margin:0 auto 16px}
.form__ok h3{font-size:1.7rem;margin-bottom:.5rem}
.form__ok p{color:var(--muted)}
@media (max-width:980px){.upload .wrap{grid-template-columns:1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- Reviews ---------- */
.rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.rev{padding:30px 26px;display:flex;flex-direction:column}
.rev__stars{display:flex;gap:3px;margin-bottom:14px;color:var(--red-bright)}
.rev__stars svg{width:18px;height:18px}
.rev p{font-size:1.02rem;color:var(--ink);line-height:1.55;margin:0 0 18px}
.rev__by{margin-top:auto;display:flex;align-items:center;gap:12px}
.rev__av{width:42px;height:42px;border-radius:50%;background:linear-gradient(165deg,var(--red-bright),var(--red));
  border:1px solid var(--red-bright);display:grid;place-items:center;font-family:var(--ff-disp);
  font-weight:700;color:#fff}
.rev__by b{font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.03em;font-size:.96rem}
.rev__by span{font-size:.8rem;color:var(--muted-2);display:block}
@media (max-width:880px){.rev__grid{grid-template-columns:1fr}}

/* ---------- Insurance / protection ---------- */
.ins .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.ins h2{margin-bottom:1.1rem}
.ins p{color:var(--muted);margin-bottom:1.5rem}
.ins__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ins__list li{display:flex;gap:.6rem;align-items:center;font-size:.95rem;
  background:rgba(255,255,255,.02);border:1px solid var(--hair);border-radius:9px;padding:.7em .9em}
.ins__list svg{width:18px;height:18px;color:var(--blue-bright);flex:none}
@media (max-width:880px){.ins .wrap{grid-template-columns:1fr}}
@media (max-width:420px){.ins__list{grid-template-columns:1fr}}

/* ---------- Sales / consignment ---------- */
.sales{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));border-block:1px solid var(--hair)}
.sales__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.path{padding:28px 24px;display:flex;flex-direction:column;min-height:210px}
.path__ic{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(165deg,rgba(224,31,43,.2),rgba(224,31,43,.04));border:1px solid var(--hair-strong)}
.path__ic svg{width:25px;height:25px;color:var(--red-bright)}
.path h3{font-size:1.18rem;margin-bottom:.5rem}
.path p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;flex:1}
.sales__foot{text-align:center;margin-top:40px}
@media (max-width:980px){.sales__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sales__grid{grid-template-columns:1fr}}

/* ---------- Service area ---------- */
.area .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.area h2{margin-bottom:1.1rem}
.area p{color:var(--muted);margin-bottom:1.5rem}
.area__chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.area__chips span{font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;
  color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:999px;padding:.5em 1em}
.area__map .ph{aspect-ratio:4/3}
@media (max-width:880px){.area .wrap{grid-template-columns:1fr}}

/* ---------- SEO links ---------- */
.seo__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.seo a.card{padding:26px 24px;display:flex;flex-direction:column}
.seo h3{font-size:1.12rem;margin-bottom:.5rem}
.seo p{color:var(--muted);font-size:.88rem;margin:0 0 1rem;flex:1}
.seo .txtlink{margin-top:auto}
@media (max-width:980px){.seo__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.seo__grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq__wrap{max-width:860px;margin:40px auto 0}
.faq__item{border:1px solid var(--hair);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;
  background:rgba(255,255,255,.02);transition:border-color .2s}
.faq__item[open]{border-color:var(--hair-strong)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  padding:20px 22px;font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.08rem;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q .pm{width:26px;height:26px;flex:none;position:relative}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--blue-bright);
  border-radius:2px;transition:transform .25s var(--ease)}
.faq__q .pm::before{top:12px;left:4px;width:18px;height:2px}
.faq__q .pm::after{top:4px;left:12px;width:2px;height:18px}
.faq__item[open] .faq__q .pm::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 22px 22px;color:var(--muted);max-width:74ch}

/* ---------- Final CTA ---------- */
.final{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--hair)}
.final__bg{position:absolute;inset:0;z-index:0}
.final__bg .ph{position:absolute;inset:0;border:0;border-radius:0}
.final__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,14,34,.78),rgba(5,10,24,.92)),
  radial-gradient(700px 400px at 50% 0%,rgba(42,147,255,.2),transparent 60%)}
.final .wrap{position:relative;z-index:2}
.final h2{margin:0 auto 1.2rem;max-width:18ch}
.final p{color:var(--muted);max-width:60ch;margin:0 auto 2rem;font-size:1.1rem}
.final__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-950);border-top:1px solid var(--hair);padding-top:64px}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px}
.foot__brand img{height:58px;margin-bottom:18px}
.foot__brand p{color:var(--muted);font-size:.95rem;max-width:34ch;margin:0 0 18px}
.foot__phone{font-family:var(--ff-disp);font-weight:700;font-size:1.5rem;color:#fff;display:inline-flex;
  align-items:center;gap:.5rem}
.foot__phone svg{width:22px;height:22px;color:var(--blue-bright)}
.foot__meta{margin-top:18px;display:grid;gap:12px}
.foot__meta div{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.9rem;line-height:1.45;max-width:34ch}
.foot__meta svg{width:18px;height:18px;color:var(--blue-bright);flex:none;margin-top:2px}
.foot__meta b{display:block;font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:#fff;margin-bottom:2px}
.foot__col h4{font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  color:var(--muted-2);margin:0 0 16px;font-weight:600}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot__col a{color:var(--ink);font-size:.95rem;transition:color .2s}
.foot__col a:hover{color:var(--blue-bright)}
.foot__bar{border-top:1px solid var(--hair);padding-block:24px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;font-size:.85rem;color:var(--muted-2)}
.foot__bar a{color:var(--muted-2)}.foot__bar a:hover{color:var(--blue-bright)}
@media (max-width:880px){.foot__top{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot__top{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 140%;
  background:linear-gradient(165deg,var(--navy-700),var(--navy-850));border:1px solid var(--hair-strong);
  border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:.7rem;z-index:90;
  box-shadow:0 30px 60px -28px rgba(0,0,0,1);transition:translate .4s var(--ease);max-width:90vw}
.toast.show{translate:-50% 0}
.toast svg{width:20px;height:20px;color:var(--blue-bright);flex:none}
.toast b{font-family:var(--ff-disp);text-transform:uppercase;letter-spacing:.03em}