/* recoveredpipe.com
   Same industrial palette as the Onsite Energy / Echo Testing site:
   deep steel blue, rust orange, warm neutrals. One house, two properties. */

:root{
  --ink:#14212f; --ink-2:#22364a; --steel:#3c5570;
  --rust:#c8461e; --rust-dk:#a3380f; --amber:#e8a33d;
  --paper:#ffffff; --sand:#f5f2ed; --line:#dfd9d0; --muted:#6b7785;
  --ok:#1f7a4d; --warn:#b8560f; --bad:#b3261e;
  --shadow:0 1px 3px rgba(20,33,47,.08), 0 8px 24px rgba(20,33,47,.06);
  --radius:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em; letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.5vw,3.15rem); font-weight:800}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:750}
h3{font-size:1.18rem; font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--rust); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.narrow{max-width:820px}

/* ---------- header ---------- */
.topbar{background:var(--ink); color:#c3cedb; font-size:.82rem; padding:7px 0}
.topbar .wrap{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap}
.topbar a{color:#fff}
.whoami .role{display:inline-block; font-size:.68rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:2px 8px;
  border-radius:100px; border:1px solid rgba(255,255,255,.28);
  color:var(--amber); margin:0 4px 0 6px}
header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(8px);
}
header.site .wrap{display:flex; align-items:center; gap:28px; height:70px}
.brand{display:flex; flex-direction:column; line-height:1.15; text-decoration:none}
.brand b{font-size:1.13rem; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.brand span{font-size:.7rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--rust); font-weight:700}
nav.main{margin-left:auto; display:flex; gap:26px; align-items:center; flex-wrap:wrap}
nav.main a{color:var(--ink-2); font-size:.92rem; font-weight:600}
nav.main a:hover{color:var(--rust); text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--rust); color:#fff; font-weight:700;
  font-size:.95rem; padding:13px 26px; border-radius:var(--radius);
  border:1px solid var(--rust); cursor:pointer; text-align:center; transition:.15s;
}
.btn:hover{background:var(--rust-dk); border-color:var(--rust-dk);
  text-decoration:none; color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--steel)}
.btn.ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.light{background:#fff; color:var(--ink); border-color:#fff}
.btn.light:hover{background:var(--sand); color:var(--ink)}
.btn.grey{background:var(--muted); border-color:var(--muted)}
.btn.grey:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn.sm{padding:8px 15px; font-size:.85rem}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 55%,var(--steel) 100%);
  color:#fff; padding:84px 0 76px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent 0 38px,
    rgba(255,255,255,.5) 38px 39px);
}
.hero .wrap{position:relative; z-index:1}
.hero .eyebrow{
  display:inline-block; font-size:.73rem; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(232,163,61,.45); padding:5px 13px; border-radius:2px;
  margin-bottom:20px;
}
.hero h1{max-width:18ch; color:#fff}
.hero .lede{font-size:1.16rem; max-width:62ch; color:#d3dde7; margin-bottom:28px}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.hero-note{font-size:.85rem; color:#9fb0c2; margin-top:20px}

/* ---------- sections ---------- */
section{padding:68px 0}
section.tight{padding:46px 0}
section.sand{background:var(--sand)}
section.ink{background:var(--ink); color:#dbe3ec}
section.ink h2{color:#fff}
.section-head{max-width:680px; margin-bottom:38px}
.section-head p{color:var(--muted); font-size:1.05rem; margin:0}
section.ink .section-head p{color:#9fb0c2}
.kicker{font-size:.73rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust); margin-bottom:9px}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted); font-size:.95rem; margin-bottom:0}
.card .figure{font-size:1.42rem; font-weight:800; color:var(--ink);
  margin-top:14px; display:block}
.card .figure small{font-size:.72rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; display:block; margin-top:2px}

.step{display:flex; gap:16px; align-items:flex-start}
.step .num{
  flex:0 0 38px; height:38px; border-radius:50%; background:var(--rust); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.02rem;
}
.step h3{margin-bottom:.25em; font-size:1.03rem}
.step p{font-size:.92rem; color:var(--muted); margin:0}

.stat{text-align:center; padding:18px 10px}
.stat b{display:block; font-size:2.1rem; font-weight:800; color:var(--amber);
  line-height:1.1}
.stat span{font-size:.83rem; color:#9fb0c2}

ul.checks{list-style:none; padding:0; margin:0}
ul.checks li{position:relative; padding:0 0 11px 27px; font-size:.96rem}
ul.checks li::before{
  content:""; position:absolute; left:2px; top:.52em; width:11px; height:6px;
  border-left:2.5px solid var(--rust); border-bottom:2.5px solid var(--rust);
  transform:rotate(-45deg);
}
section.ink ul.checks li::before{border-color:var(--amber)}

/* ---------- the availability table ---------- */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow)}
table.lots{border-collapse:collapse; width:100%; font-size:.93rem; min-width:760px}
table.lots th{
  background:var(--ink); color:#c3cedb; font-size:.7rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; text-align:left;
  padding:12px 14px; white-space:nowrap;
}
table.lots td{padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:middle}
table.lots tbody tr:last-child td{border-bottom:0}
table.lots tbody tr:hover{background:#fffaf8}
table.lots .num{text-align:right; font-variant-numeric:tabular-nums}
table.lots .well{font-weight:700; color:var(--ink); white-space:nowrap}
table.lots .size{font-weight:700; white-space:nowrap}
.pill{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:100px;
  background:var(--sand); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap}
.pill.inwell{background:#eef4fa; border-color:#c9d9e8; color:var(--steel)}
.pill.available{background:#eaf6f0; border-color:#bfe0cf; color:var(--ok)}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow); max-width:640px}
fieldset{border:0; padding:0; margin:0 0 30px}
legend{
  font-size:.73rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--rust); padding:0 0 10px; width:100%;
  border-bottom:1px solid var(--line); margin-bottom:18px;
}
.field{margin-bottom:17px}
.field label{display:block; font-size:.83rem; font-weight:700; color:var(--ink-2);
  margin-bottom:5px}
.field .hint{font-size:.78rem; color:var(--muted); font-weight:400; margin-top:4px;
  display:block}
.req{color:var(--rust)}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius); font:inherit; font-size:.95rem; background:#fff;
  color:var(--ink); transition:.12s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--rust); box-shadow:0 0 0 3px rgba(200,70,30,.12);
}
.row{display:grid; gap:16px}
.row.c2{grid-template-columns:1fr 1fr}
.checkline{display:flex; align-items:flex-start; gap:10px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px;
  cursor:pointer; transition:.12s; background:#fff}
.checkline:hover{border-color:var(--rust); background:#fffaf8}
.checkline input{margin-top:3px; flex:0 0 auto; accent-color:var(--rust); width:auto}
.err{color:var(--bad); font-size:.83rem; margin-top:5px; font-weight:600}

.notice{padding:13px 16px; border-radius:var(--radius); font-size:.9rem;
  margin-bottom:16px; border-left:3px solid}
.notice.info{background:#eef4fa; border-color:var(--steel); color:var(--ink-2)}
.notice.warn{background:#fdf4e8; border-color:var(--warn); color:#7a3c07}
.notice.error{background:#fdeeed; border-color:var(--bad); color:#8a1e18}
.notice.ok{background:#eaf6f0; border-color:var(--ok); color:#125c39}

/* The disclaimer is required on every buyer-facing page. It gets its own look
   so it reads as a standing term of sale, not as a warning. */
.disclaimer{background:var(--sand); border-left:3px solid var(--amber);
  padding:13px 16px; border-radius:var(--radius); font-size:.88rem;
  color:var(--ink-2); margin:0 0 22px}

.terms{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow)}
.terms h3{font-size:.75rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--rust); margin-bottom:14px}

/* ---------- footer & cta ---------- */
.cta-band{background:var(--rust); color:#fff; padding:46px 0; text-align:center}
.cta-band h2{color:#fff; margin-bottom:.3em}
.cta-band p{color:#ffe0d5; max-width:56ch; margin:0 auto 22px}

footer.site{background:var(--ink); color:#93a4b6; padding:52px 0 26px;
  font-size:.9rem}
footer.site h4{color:#fff; font-size:.74rem; letter-spacing:.15em;
  text-transform:uppercase; margin-bottom:14px}
footer.site a{color:#c3cedb; display:block; margin-bottom:7px; font-size:.88rem}
footer.site a:hover{color:var(--amber); text-decoration:none}
footer.site p{color:#93a4b6; font-size:.86rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px;
  margin-bottom:34px}
.foot-bot{border-top:1px solid rgba(255,255,255,.1); padding-top:20px;
  font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:12px}

/* ---------- utility ---------- */
.mt0{margin-top:0}
.muted{color:var(--muted)}
.right{text-align:right}
.spread{display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap}

@media(max-width:860px){
  nav.main{gap:16px}
  nav.main a{font-size:.85rem}
  header.site .wrap{height:auto; padding-top:12px; padding-bottom:12px;
    flex-wrap:wrap}
  .row.c2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  section{padding:52px 0}
  .hero{padding:58px 0 52px}
}
@media print{
  header.site,footer.site,.topbar,.cta-band,.btn{display:none !important}
}


/* ================= THE SALES SIDE =================
   Prospected wells, agreements, and the AFE. Same palette as the buyer side --
   it is one company -- but the tables here are worked IN rather than read, so
   the cells hold inputs and the rows are tighter. */

.grid2{display:grid; gap:0 20px; grid-template-columns:repeat(2,minmax(0,1fr))}
.grid2 .field.wide{grid-column:1 / -1}
@media (max-width:640px){ .grid2{grid-template-columns:1fr} }
/* The sales forms carry a lot more fields than a buyer ever sees. */
.form-card:has(.grid2){max-width:920px}

/* An editable table. Every cell is a box you type in, so the borders come off
   the inputs and go on the cells -- otherwise it reads as a wall of buttons. */
table.entry td{padding:3px 4px}
table.entry input, table.entry select{
  width:100%; border:1px solid transparent; background:transparent;
  padding:7px 8px; font:inherit; font-size:.9rem; color:var(--ink);
  border-radius:3px;
}
table.entry input:hover, table.entry select:hover{border-color:var(--line)}
table.entry input:focus, table.entry select:focus{
  outline:none; border-color:var(--steel); background:#fff;
  box-shadow:0 0 0 3px rgba(60,85,112,.12);
}
table.entry td.num input{text-align:right}
table.entry tr.revenue td:first-child{box-shadow:inset 3px 0 0 var(--ok, #2f7d4f)}
table.entry tr.cost td:first-child{box-shadow:inset 3px 0 0 var(--line)}
table.entry tr.blank input::placeholder{color:#a9b1ba}
table.afe{min-width:940px}

table.totals td{padding:9px 12px}
table.totals tr.rule td{border-top:2px solid var(--ink)}
.num.bad{color:var(--rust-dk, #a3380f)}
.num.good{color:var(--ok, #2f7d4f)}

/* The fee, stated once, at the top of a well. */
.feebox{
  display:flex; flex-wrap:wrap; gap:34px; background:var(--sand);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin:0 0 26px;
}
.feebox .lbl{display:block; font-size:.7rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.feebox b{display:block; font-size:1.5rem; font-weight:800; line-height:1.25}
.feebox b.good{color:var(--ok, #2f7d4f)}
.feebox b.muted{color:var(--muted)}
.feebox .muted{font-size:.84rem}

/* The fee conditions. Deliberately NOT ul.checks -- that one ticks every row
   whether or not the thing is true, which is the last impression this list
   should give. */
ul.gate{list-style:none; padding:0; margin:0 0 26px}
ul.gate li{padding:0 0 9px 0; font-size:.95rem; display:flex; gap:10px}
ul.gate li .mark{width:1.1rem; font-weight:800; flex:none}
ul.gate li.on .mark{color:var(--ok, #2f7d4f)}
ul.gate li.off{color:var(--muted)}
ul.gate li.off .mark{color:var(--line)}

.wellhead{
  border-left:3px solid var(--rust); background:var(--sand);
  padding:12px 16px; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:16px;
  align-items:baseline;
}
.wellhead b{font-size:1.05rem}
.wellhead span{font-size:.88rem; color:var(--muted)}

.quote{
  white-space:pre-wrap; border-left:3px solid var(--line);
  padding:8px 0 8px 16px; margin:0 0 20px; color:var(--ink-2);
  font-size:.95rem;
}

form.inline{margin:0 0 18px}
form.inline .btn{margin-right:6px}
.field .err{display:block; font-size:.82rem; color:var(--rust-dk, #a3380f);
  margin-top:5px}


/* The size filter on the well list. With 100+ wells a buyer needs to cut the
   list down to his size before he reads anything. */
.filter{display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 22px}
.filter .lbl{font-size:.7rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-right:4px}
.filter .chip{
  display:inline-block; padding:6px 13px; border-radius:100px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:.88rem; font-weight:650; text-decoration:none;
}
.filter .chip:hover{border-color:var(--steel); text-decoration:none}
.filter .chip.on{background:var(--ink); border-color:var(--ink); color:#fff}


/* ---------- the permission checkboxes ----------
   Read top to bottom on a phone in a truck. Big tap targets, the reason for
   withholding each one sitting right under its name, and the ones he holds
   picked out so the shape of a man's access is visible at a glance. */
.permblock{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 20px 14px; margin:0 0 16px; box-shadow:var(--shadow);
  max-width:820px;
}
.permblock h4{
  font-size:.72rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--rust); margin:16px 0 10px;
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
.permline{
  display:flex; gap:13px; align-items:flex-start; padding:10px 10px;
  margin:0 -10px; border-radius:3px; cursor:pointer;
}
.permline:hover{background:var(--sand)}
.permline input{margin:2px 0 0; width:18px; height:18px; flex:none;
  accent-color:var(--rust)}
.permline .body{display:block}
.permline b{display:block; font-weight:650; font-size:.95rem; color:var(--muted)}
.permline.on b{color:var(--ink); font-weight:700}
.permline .why{display:block; font-size:.83rem; color:var(--muted);
  margin-top:2px; max-width:64ch}
.permline .chip{margin-left:7px; vertical-align:2px}


/* The build stamp. Present but quiet -- Jason should be able to glance at any
   page and know which build he's looking at, without it shouting. */
.buildstamp{font-variant-numeric:tabular-nums; opacity:.75}
.buildstamp a{color:inherit; text-decoration:none; border-bottom:1px dotted}
.buildstamp a:hover{opacity:1; text-decoration:none}
.buildstamp em{
  font-style:normal; font-size:.68rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; background:var(--amber); color:var(--ink);
  padding:1px 6px; border-radius:100px; margin-left:5px;
}