/* Black Water Environmental LLC - bweus.com
   v2 2026-09-25: black-canvas look (layout language inspired by SpaceX; no SpaceX marks, fonts or assets).
   Canonical design tokens: 05_SALES-MARKETING\Brand-Standards\Black Water Environmental\DESIGN.md
   Pre-v2 stylesheet: bweus.com\archive\site-pre-spacex-2026-09-25\css\site.css
   Palette is black, white and greys only. No accent color.
   v3 2026-10-03 (branch v2-cinematic): pinned 3D hero story on the home page, scroll reveals,
   hairlines that draw in. Tokens unchanged. Motion only runs under .motion (set by /js/site.js),
   never with prefers-reduced-motion. */

/* ---------- fonts (self-hosted, SIL OFL 1.1, see /fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --night:#000000;          /* canvas */
  --night-soft:#0a0a0a;     /* alternate band */
  --night-lift:#141417;     /* panels, alerts */
  --white:#ffffff;          /* headings, primary text */
  --cool:#f0f0fa;           /* body copy on dark */
  --mute:#a0a0ab;           /* hints, legal, eyebrows (8:1 on black) */
  --hairline:#3a3a3f;       /* 1px rules on dark */
  --field-line:#6e6e78;     /* input borders (>=3:1 on black) */
  --light:#ffffff;          /* light canvas, sparingly */
  --ink:#000000;            /* text on light */
  --ink-mute:#5a5a5f;

  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Arial Narrow",Arial,sans-serif;

  --max:1200px;
  --pad:clamp(1.25rem,5vw,3rem);
  --band:clamp(5rem,12vw,9rem);
  --r-xs:4px;
  --r-pill:32px;
  --head-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night);scroll-padding-top:calc(var(--head-h) + 1rem)}
body{
  margin:0;background:var(--night);color:var(--cool);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--white);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--white);outline-offset:4px}
[id]{scroll-margin-top:calc(var(--head-h) + 1rem)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.narrow>*{max-width:52rem}  /* reading column, left-aligned with the hero type */
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--ink);padding:.7rem 1.1rem;z-index:100;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.875rem}
.skip:focus{left:1rem;top:1rem}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--white);margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.2vw,5.25rem);line-height:.95;letter-spacing:.02em}
h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;letter-spacing:.018em}
h3,.h3{font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.15;letter-spacing:.05em}  /* .h3: an h2 that keeps the h3 look (heading order) */
p{margin:0 0 1.1em;max-width:62ch}
strong,b{color:var(--white);font-weight:600}
.lede{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.6;color:var(--cool);max-width:52ch}
.eyebrow{
  font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:.1em;line-height:2;
  text-transform:uppercase;color:var(--mute);margin:0 0 1.1rem;
}
.small{font-size:.9rem;color:var(--mute)}

/* ---------- header: fixed, transparent over the hero ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0));
  transition:background-color .25s ease}
.site-head.scrolled{background-color:var(--night);border-bottom:1px solid var(--hairline)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;
  max-width:var(--max);margin:0 auto;padding:1.1rem var(--pad);min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--white)}
/* adopted lockup 2026-09-27 (Round 3 Integrated): white version with the flat white drop on black.
   Horizontal on wide screens, stacked at 640px and under. Masters: Logos\Black Water Environmental\svg */
.brand picture{display:block;line-height:0}
.brand-logo{display:block;width:clamp(248px,22.2vw,320px);height:auto}   /* shares the row with the full nav down to 1101px */
.nav{display:flex;align-items:center;gap:.4rem clamp(.75rem,1.4vw,1.6rem);flex-wrap:wrap}
.nav a{color:var(--white);text-decoration:none;font-size:.875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding-block:.4rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--white)}
.nav a.nav-cta{border:1px solid var(--white);border-radius:var(--r-pill);padding:.6rem 1rem}
.nav a.nav-cta:hover{background:var(--white);color:var(--ink)}
.nav-toggle{display:none}

/* ---------- buttons: one ghost pill per band ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:.875rem;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase;
  padding:1.125rem 1.75rem;min-height:3.25rem;border-radius:var(--r-pill);
  border:1px solid var(--white);background:transparent;color:var(--white);text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease}
.btn:hover{background:var(--white);color:var(--ink)}
.on-light .btn{border-color:var(--ink);color:var(--ink)}
.on-light .btn:hover{background:var(--ink);color:var(--white)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2.2rem}
.text-link{display:inline-block;padding-block:.75rem;font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}

/* ---------- hero bands ----------
   No site photography yet. A photo drops in with style="--hero-photo:url(/img/x.jpg)" on the section
   plus class "has-photo"; the gradient overlay keeps type legible. Until then the bands use a graded
   black field with a large ghosted derrick mark. */
.hero{position:relative;overflow:hidden;color:var(--white);display:flex;align-items:flex-end;
  min-height:78svh;padding-top:var(--head-h);
  background:
    linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.6) 100%),
    var(--hero-photo,none) center/cover no-repeat,
    radial-gradient(120% 70% at 75% 100%,#1b1c20 0%,#070708 55%,#000 100%);}
/* Old-fashioned wooden derrick field along the bottom of every hero (2026-09-26: workover-rig version archived to bweus.com/archive/site-img-2026-09-26/).
   Replaced the ghosted derrick mark 2026-09-26 at the owner's request. */
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:min(62%,560px);
  background:url(/img/derrick-silhouette.svg) right bottom/auto 100% no-repeat;opacity:.13;pointer-events:none;
  transform:translateY(var(--ghost-y,0))}
.page-hero::before{height:min(55%,380px);opacity:.1}
.hero.has-photo::before{display:none}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(3rem,8vw,6rem)}
.hero h1{max-width:16ch}
.hero-full{min-height:100svh}
.hero-full h1{font-size:clamp(2.75rem,8vw,5.75rem)}
.page-hero h1{max-width:20ch}

/* ---------- home: pinned 3D story ----------
   Without .is-story (no JS, no GSAP, reduced motion) this is an ordinary full-height hero with the
   SVG derrick field. With it, the section is tall and the picture stays pinned while you scroll.
   The canvas fades in over the drawing once the first 3D frame is drawn (html.has-3d). */
.scene{display:block;min-height:0;padding-top:0;overflow:visible;background:var(--night)}
.scene::before{display:none}
.scene.is-story{height:480svh}
.scene-pin{position:sticky;top:0;height:100svh;min-height:34rem;overflow:hidden;display:flex;align-items:flex-end;
  padding-top:var(--head-h);
  background:radial-gradient(120% 70% at 75% 100%,#1b1c20 0%,#070708 55%,#000 100%)}
.scene-ghost{position:absolute;inset:auto 0 0 0;height:min(62%,560px);pointer-events:none;
  background:url(/img/derrick-silhouette.svg) right bottom/auto 100% no-repeat;opacity:.13}
.scene3d{position:absolute;inset:0}
.scene3d canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.4s ease}
.has-3d .scene3d canvas{opacity:1}
.has-3d .scene-ghost{visibility:hidden}
.scene-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,0) 72%,rgba(0,0,0,.45) 100%)}
.scene-copy{position:relative;z-index:1;width:100%;display:grid;align-items:end;padding-block:clamp(3rem,8vw,6rem)}
.scene-copy>*{grid-area:1/1}
.hero-copy h1{max-width:16ch}
.story{list-style:none;margin:0;padding:0;display:none;pointer-events:none}
.is-story .story{display:grid;align-items:end}
.story-step{grid-area:1/1;visibility:hidden;opacity:0;max-width:34rem}
.story-step .eyebrow{margin-bottom:.8rem}
.story-title{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--white);
  font-size:clamp(2rem,5vw,3.6rem);line-height:.95;letter-spacing:.02em;margin:0 0 .5em;text-wrap:balance;max-width:16ch}
.story-step p:last-of-type{color:var(--cool);max-width:44ch;margin:0}
.story-step .btn{pointer-events:auto;margin-top:1.8rem}
.story-ticks{display:none}
.is-story .story-ticks{position:absolute;z-index:1;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.7rem}
.story-ticks span{display:block;width:18px;height:1px;background:var(--hairline);transition:width .3s ease,background-color .3s ease}
.story-ticks span.on{width:34px;background:var(--white)}

/* ---------- sections ---------- */
.section{padding-block:var(--band);background:var(--night)}
.section-alt{background:var(--night-soft);border-block:1px solid #16161a}
/* full-bleed statement band (the "photo band" slot: --band-photo) */
.section-dark{position:relative;overflow:hidden;display:flex;align-items:center;
  background:
    linear-gradient(to right,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 100%),
    var(--band-photo,none) center/cover no-repeat,
    radial-gradient(90% 80% at 85% 50%,#17181b 0%,#000 70%)}
.section-dark.has-photo{min-height:80svh}
.section-dark .wrap{width:100%}
.section-dark p{color:var(--cool)}
.section-dark .btn{margin-top:1.2rem}

/* feature columns: no card chrome, hairline on top */
.grid{display:grid;gap:3rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid:has(>.card:nth-child(4):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))} /* 4 items: one row, no orphan */
.card{border-top:1px solid var(--hairline);padding-top:1.6rem}
/* scroll reveals: hidden only while html.motion is on (site.js adds it, and removes it again if
   the reveal setup never finishes, so nothing can stay hidden) */
.motion .reveal{opacity:0;visibility:hidden;transform:translateY(22px)}
.motion .draw>.reveal{--line:0}
/* hairlines that draw in (site.js tweens --line 0 -> 1 on items below the fold) */
.draw>.card,.draw>li{position:relative}
.draw>.card{border-top-color:transparent}
.draw>.card::before,.draw>li::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--hairline);
  transform:scaleX(var(--line,1));transform-origin:left center}
.draw>.card::before{top:-1px}
.steps.draw>li{border-bottom-color:transparent}
.steps.draw>li::after{bottom:-1px}
.card p:last-child{margin-bottom:0}
.card h3,.card .h3{margin-bottom:.6rem}
.split .card{border:1px solid var(--hairline);border-radius:var(--r-xs);padding:2rem;background:var(--night-soft)}

.split{display:grid;gap:3rem 4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}

/* numbered steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0;border-top:1px solid var(--hairline)}
.steps li{counter-increment:s;display:grid;grid-template-columns:5rem 1fr;gap:1.5rem;align-items:start;
  padding:2.2rem 0;border-bottom:1px solid var(--hairline)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;
  font-size:3rem;line-height:.9;color:var(--white);letter-spacing:.02em}
.steps h3,.steps .h3{margin:0 0 .45rem}
.steps p{margin:0}

.checks{list-style:none;padding:0;margin:0 0 1.2rem;border-top:1px solid var(--hairline)}
.checks li{padding:1rem 0 1rem 2rem;position:relative;border-bottom:1px solid var(--hairline)}
.checks li::before{content:"";position:absolute;left:0;top:1.95em;width:1rem;height:1px;background:var(--white)}
.split .card .checks{border-top:0}
.split .card .checks li:last-child{border-bottom:0}

/* closing band */
.cta-band{background:var(--night);border-top:1px solid var(--hairline)}
.cta-band .wrap{padding-block:clamp(5rem,12vw,8rem);display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.cta-band h2{margin:0;max-width:20ch}

/* ---------- forms ---------- */
.form{background:var(--night-soft);border:1px solid var(--hairline);border-radius:var(--r-xs);padding:clamp(1.25rem,4vw,2.75rem)}
fieldset{border:0;padding:0;margin:0 0 2.2rem;min-width:0}
legend{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.35rem;color:var(--white);margin-bottom:1rem;padding:0}
.field{margin-bottom:1.15rem}
.field label,.label{display:block;font-weight:600;font-size:.95rem;color:var(--white);margin-bottom:.4rem}
.hint{display:block;font-weight:400;color:var(--mute);font-size:.95rem}
.req{color:var(--white)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:.8rem 1rem;min-height:2.9rem;
  border:1px solid var(--field-line);border-radius:var(--r-xs);background:var(--night);color:var(--white)}
select option{background:var(--night);color:var(--white)}
input[type=file]{width:100%;font:inherit;font-size:.95rem;color:var(--cool)}
input[type=file]::file-selector-button{font:inherit;font-size:.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-right:1rem;padding:.7rem 1.1rem;border-radius:var(--r-pill);border:1px solid var(--white);background:transparent;color:var(--white);cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--white);outline:2px solid var(--white);outline-offset:2px}
textarea{min-height:8rem;resize:vertical}
.two{display:grid;align-items:end;gap:0 1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.choice-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.choice{display:flex;gap:.85rem;align-items:flex-start;border:1px solid var(--field-line);border-radius:var(--r-xs);
  padding:1.1rem;cursor:pointer;background:var(--night)}
.choice input{margin-top:.3rem;accent-color:var(--white);width:1.15rem;height:1.15rem;flex:none}
.choice b{display:block}
.choice span{color:var(--mute);font-size:.92rem}
.choice b,.choice:has(input:checked) span{color:var(--white)}
.choice:has(input:checked){border-color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.choice:has(input:focus-visible){outline:2px solid var(--white);outline-offset:3px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.check input{margin-top:.35rem;accent-color:var(--white);width:1.05rem;height:1.05rem;flex:none}
.contact-note{color:var(--white);font-size:1.0625rem;margin:-.4rem 0 1.15rem}
.field-error{display:block;margin-top:.45rem;color:var(--white);font-weight:600;font-size:.95rem;padding-left:.75rem;border-left:3px solid var(--white)}
[aria-invalid="true"]{border-color:var(--white);border-width:2px}
.btn[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.alert{border:1px solid var(--white);border-left-width:4px;background:var(--night-lift);color:var(--white);
  padding:1rem 1.2rem;border-radius:var(--r-xs);margin-bottom:1.6rem}
[hidden]{display:none!important}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:var(--mute);font-size:.85rem;border-top:1px solid var(--hairline)}
.foot-in{max-width:var(--max);margin:0 auto;padding:3rem var(--pad);display:flex;flex-wrap:wrap;gap:1.5rem 3rem;
  justify-content:space-between;align-items:flex-start}
.site-foot strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;color:var(--white)}
.foot-logo{display:block;width:264px;max-width:100%;height:auto;margin-bottom:.8rem}
.site-foot a{display:inline-block;padding-block:.75rem;color:var(--white);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.875rem;font-weight:600}
.site-foot a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.8rem}
.foot-legal{width:100%;border-top:1px solid var(--hairline);padding-top:1.4rem;font-size:.78rem;letter-spacing:.04em}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .js .nav-toggle{display:inline-flex;align-items:center;gap:.7rem;background:transparent;border:0;color:var(--white);
    font:inherit;font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
    padding:.6rem .2rem;min-height:44px}
  .nav-toggle-bars{position:relative;width:22px;height:1px;background:currentColor}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform .2s ease}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .open .nav-toggle-bars{background:transparent}
  .open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

  .js .nav{display:none}
  .js .open .nav{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:fixed;inset:var(--head-h) 0 0 0;background:var(--night);padding:1rem var(--pad) 3rem;overflow-y:auto;
    border-top:1px solid var(--hairline)}
  .js .open .nav a{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:.06em;
    width:100%;padding:1rem 0;border-bottom:1px solid var(--hairline)}
  .js .open .nav a[aria-current="page"]{border-bottom-color:var(--hairline);text-decoration:underline;text-underline-offset:.25em}
  .js .open .nav a.nav-cta{border:1px solid var(--white);border-radius:var(--r-pill);width:auto;margin-top:2rem;
    padding:1rem 1.6rem;font-family:var(--body);font-size:.875rem;font-weight:700;letter-spacing:.1em}
  .site-head.open{background:var(--night)}
  .brand-logo{width:320px}
  /* no-JS fallback: links wrap under the brand */
  html:not(.js) .nav{width:100%}
}
@media (max-width:640px){
  :root{--head-h:68px}
  .steps li{grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.6rem 0}
  .steps li::before{font-size:2.2rem}
  .hero-full h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero::before{height:38%;background-position:78% bottom;opacity:.1}
  .head-in{padding-block:.75rem;gap:1rem}
  .brand-logo{width:170px;height:44px}   /* stacked; 44 + 2 x 12px = the 68px header */
  .scene-ghost{height:38%;background-position:78% bottom;opacity:.1}
  .scene-copy{padding-block:2.5rem 2.75rem}
  .scene-shade{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 66%,rgba(0,0,0,.4) 100%)}
  .scene.is-story{height:260svh}
  .is-story .story-ticks{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .scene.is-story{height:auto}
  .story,.story-ticks{display:none!important}
}