/* ==========================================================================
   Birchtech landing pages
   Everything the two lead-gen landing pages need on top of the Webflow page
   styles: sticky header, hero rhythm, video frame, slim footer and the
   lead-capture modal. Loaded last so it can refine the page CSS.
   Pages: /pfas-solutions, /clean-water/water-treatment-solutions-landing-page
   ========================================================================== */

/* ---------- Header ----------
   The site header is already sticky, light and 76px tall; leave its look alone.
   These pages only drop the nav, so the brand and CTA just need to sit right. */
.lp-nav{justify-content:space-between}
.lp-brand{display:inline-flex;align-items:center}
.lp-brand img{display:block;height:58px;width:auto}

.lp-header .btn-primary{padding:12px 24px;border-radius:8px;font-weight:650;letter-spacing:.1px;
  box-shadow:0 10px 26px -14px rgba(23,138,143,.9);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.lp-header .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(23,138,143,1)}
.lp-header .btn-primary:focus-visible{outline:2px solid #7fd0db;outline-offset:3px}

/* ---------- Hero: calmer rhythm, readable measure ---------- */
.wt2-hero-inner{padding:clamp(40px,5.2vw,72px) 32px clamp(44px,5.6vw,76px);
  gap:clamp(32px,4.4vw,64px);align-items:center}
.wt2-hero-left{max-width:620px}
.wt2-hero-title{font-size:clamp(34px,4.4vw,56px);letter-spacing:-1.6px;line-height:1.06;
  margin:0 0 18px;text-wrap:balance}
.wt2-hero-text{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.68;max-width:56ch;margin:0 0 28px}

/* Hero buttons: bigger target, moving arrow, gentle lift */
.wt2-hero-btns{gap:12px;flex-wrap:wrap}
.wt2-btn{padding:14px 24px;border-radius:9px;font-weight:650;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
.wt2-btn:hover{transform:translateY(-1px)}
.wt2-btn-primary{box-shadow:0 12px 28px -14px rgba(23,138,143,.95)}
.wt2-btn-primary:hover{box-shadow:0 18px 36px -14px rgba(23,138,143,1)}
.wt2-btn .wt2-arrow{transition:transform .18s ease}
.wt2-btn:hover .wt2-arrow{transform:translateX(3px)}
.wt2-btn:focus-visible{outline:2px solid #7fd0db;outline-offset:3px}

/* ---------- Hero video: framed, sized to itself ---------- */
/* Image hero (integrator): keep the cropped frame, but lighter than the stock 700px
   and rounded to match the rest of the landing furniture. */
.wt2-hero-media{height:clamp(360px,42vw,580px);border-radius:14px;overflow:hidden}
.wt2-hero-media .wt2-img{height:100%;object-fit:cover}
.wt2-hero-badge{border-radius:12px;box-shadow:0 18px 44px -18px rgba(6,18,22,.45)}
/* Video hero (PFAS): a 16:9 video sets its own height, so the box must not force one. */
.wt2-hero-media.has-video{height:auto;overflow:visible;border-radius:0}
.pf-hero-video{width:100%;height:auto;display:block;border-radius:14px;background:#0b0f10;
  box-shadow:0 26px 60px -26px rgba(6,18,22,.6);
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.pf-hero-vcap{margin:14px 2px 0;font-size:13.5px;line-height:1.55;color:#5b6b6e;max-width:52ch}

/* ---------- Footer: air for the slim landing footer ---------- */
.lp-foot-top{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:8px 0 30px}
.lp-foot-logo{height:36px;display:block}
.site-footer .btn-getintouch{border:0;font:inherit;cursor:pointer;
  transition:transform .16s ease,opacity .16s ease}
.site-footer .btn-getintouch:hover{transform:translateY(-1px)}
.site-footer .footer-bottom{padding-top:22px}
.site-footer .footer-end{gap:22px}
.site-footer .footer-end a{transition:color .15s ease}
.site-footer .footer-end a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Lead-capture modal ---------- */
.lp-modal[hidden]{display:none}
.lp-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.lp-modal-bg{position:absolute;inset:0;background:rgba(10,22,25,.62);backdrop-filter:blur(2px)}
.lp-modal-card{position:relative;width:min(460px,100%);background:#fff;border-radius:16px;
  padding:32px 32px 28px;box-shadow:0 40px 90px -30px rgba(6,18,22,.62);animation:lpPop .28s ease}
@keyframes lpPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lp-modal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;
  background:#eef3f4;color:#33474c;font-size:19px;line-height:1;cursor:pointer;transition:.15s}
.lp-modal-x:hover{background:#dde6e8}
.lp-modal-card h3{margin:0 0 6px;font-size:23px;letter-spacing:-.01em;color:#12262b}
.lp-modal-sub{margin:0 0 18px;font-size:14px;line-height:1.6;color:#5b6b6e}
.lp-lead-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:#5b6b6e;margin:12px 0 6px}
.lp-lead-form input{width:100%;padding:13px 14px;border:1px solid #d9e3e5;border-radius:9px;
  font:inherit;font-size:15px;color:#12262b;background:#fff;transition:.15s}
.lp-lead-form input:focus{outline:0;border-color:#1D7686;box-shadow:0 0 0 3px rgba(29,118,134,.14)}
.lp-submit{width:100%;justify-content:center;margin-top:20px;display:inline-flex;align-items:center;
  padding:14px 22px;border:0;border-radius:9px;background:#1D7686;color:#fff;font:inherit;
  font-weight:650;cursor:pointer;box-shadow:0 12px 28px -14px rgba(29,118,134,.9);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.lp-submit:hover{background:#13565f;transform:translateY(-1px);box-shadow:0 18px 36px -14px rgba(29,118,134,1)}
.lp-lead-form .form-result{margin:12px 0 0;font-size:14px;color:#1D7686;text-align:center}
.lp-modal-card *:focus-visible{outline:2px solid #1D7686;outline-offset:2px}
body.lp-modal-open{overflow:hidden}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .wt2-hero-inner{flex-direction:column;align-items:flex-start}
  .wt2-hero-left,.wt2-hero-right{flex:1 1 auto;width:100%;max-width:none}
  .wt2-hero-title{letter-spacing:-1px}
  .lp-foot-top{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:560px){
  .lp-brand img{height:42px}
  .lp-header .btn-primary{padding:10px 16px;font-size:14px}
  .wt2-hero-btns .wt2-btn{flex:1 1 100%;justify-content:center}
  .lp-modal-card{padding:26px 22px 22px}
}

/* ---------- Dark mode (site accessibility widget) ---------- */
html.a11y-dark .pf-hero-vcap{color:#cdd5d6}
html.a11y-dark .pf-hero-video{outline-color:rgba(255,255,255,.12)}
html.a11y-dark .lp-modal-card{background:#23292b}
html.a11y-dark .lp-modal-card h3{color:#f1f3f3}
html.a11y-dark .lp-modal-sub,html.a11y-dark .lp-lead-form label{color:#cdd5d6}
html.a11y-dark .lp-lead-form input{background:#1b2122;border-color:#3a4244;color:#e7eaea}
html.a11y-dark .lp-modal-x{background:#333b3d;color:#dfe6e7}

/* anchor jump: clear the sticky 76px header */
#case-study{scroll-margin-top:92px}
html{scroll-behavior:smooth}