/* JMA Wastewater Services — demo rebuild
   Archetype C: fixed identity/call rail beside a scrolling content column.
   The rail exists because the fault being fixed is a phone fault: their live
   site shows three numbers as plain text and none of them dial. */

:root{
  --ink:#171c21;
  --paper:#f5f2ec;
  --paper-2:#ebe6dc;
  --rail:#1b2229;
  --rail-2:#263039;
  --rail-txt:#e9ecef;
  --rail-mut:#a9b4bd;
  --mut:#4a5560;
  --rule:#d6cfc1;
  --act:#b03407;
  --act-lit:#ff8a4c;
  --rail-w:330px;
  --pad:20px;
  font-synthesis-weight:none;
}

*,*::before,*::after{box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
  padding-bottom:74px;               /* room for the fixed mobile call bar */
}

img,svg{max-width:100%;}
img{height:auto;display:block;}

a{color:var(--act);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--act-lit);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--act);color:#fff;padding:10px 16px;text-decoration:none;
}
.skip:focus{left:0;}

.ph{
  font:600 .92em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--paper-2);
  border-bottom:2px solid var(--act);
  padding:1px 5px;
  white-space:nowrap;
}

/* ============================ THE RAIL ============================ */

.rail{ background:var(--rail); color:var(--rail-txt); }
.rail-in{ padding:18px var(--pad) 22px; }

.brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--rail-txt);
}
.brand img{ flex:0 0 auto; }
.brand-t{ display:flex;flex-direction:column;line-height:1.15; }
.brand-t strong{
  font:700 1.32rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
}
.brand-t em{
  font-style:normal;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rail-mut);margin-top:4px;
}

.rail-line{
  margin:14px 0 18px;
  font-size:.86rem;line-height:1.5;color:var(--rail-mut);
  max-width:34em;
}

.desk-h{
  margin:0 0 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--act-lit);
}

.line{
  display:block;
  background:var(--rail-2);
  color:var(--rail-txt);
  text-decoration:none;
  padding:11px 13px 12px;
  margin-bottom:8px;
  border-left:4px solid var(--act-lit);
  border-radius:2px;
}
.line-2{ border-left-color:var(--rail-mut); }
.line:hover{ background:#2f3b46; }
.line-k{
  display:flex;align-items:center;gap:6px;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rail-mut);
}
.ic{width:13px;height:13px;flex:0 0 auto;}
.line-n{
  display:block;margin:3px 0 2px;
  font:700 1.28rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:-.01em;
}
.line-d{ display:block;font-size:.78rem;line-height:1.35;color:var(--rail-mut); }

.rail-nav{ display:none; }
.rail-mail{ display:none; }

/* ============================ CONTENT ============================ */

.col{ padding:0; }

.open{
  padding:32px var(--pad) 30px;
  border-bottom:1px solid var(--rule);
}
.eyebrow{
  margin:0 0 12px;
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);
}
h1{
  margin:0 0 14px;
  font-size:1.62rem;line-height:1.24;font-weight:700;letter-spacing:-.015em;
  max-width:18ch;
}
.open-sub{
  margin:0 0 22px;font-size:1rem;color:var(--mut);max-width:46ch;
}

.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--act);color:#fff;text-decoration:none;
  padding:15px 20px;border-radius:3px;
  font-weight:700;font-size:1.02rem;
  box-shadow:0 2px 0 #7d2505;
}
.cta:hover{ background:#982d06; }
.ic-ph{width:19px;height:19px;flex:0 0 auto;}
.cta-note{ margin:12px 0 0;font-size:.86rem;color:var(--mut); }

.block{ padding:34px var(--pad) 34px;border-bottom:1px solid var(--rule); }
.band{ background:var(--paper-2); }

.h-sec{
  margin:0 0 22px;
  font-size:1.18rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:10px;
}
.h-num{
  font:700 .8rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--act);flex:0 0 auto;
}

/* the numbered job list — a list, deliberately not a card grid */
.jobs{ list-style:none;margin:0;padding:0;counter-reset:j; }
.job{
  padding:0 0 22px 0;margin:0 0 22px;
  border-bottom:1px dashed var(--rule);
  counter-increment:j;
}
.job:last-child{ border-bottom:0;margin-bottom:0;padding-bottom:0; }
.job h3{
  margin:0 0 8px;font-size:1.04rem;font-weight:700;line-height:1.3;
}
.job h3::before{
  content:counter(j,decimal-leading-zero) " / ";
  font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--mut);letter-spacing:.04em;
}
.job p{ margin:0 0 10px;font-size:.95rem;color:var(--mut);max-width:62ch; }
.job-cta{ margin:0 !important; }
.job-cta a{
  font-weight:700;color:var(--act);text-decoration:none;
  border-bottom:2px solid rgba(176,52,7,.35);
  font-size:.93rem;
}
.job-cta a:hover{ border-bottom-color:var(--act); }

.split{ display:block; }
.split-fig{ margin:0 0 20px; }
.split-fig img{
  width:100%;max-width:400px;border:1px solid var(--rule);background:#fff;
}
.fig-cap{
  margin:7px 0 0;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);
}
.split-txt p{ margin:0 0 12px;font-size:.95rem;color:var(--mut);max-width:62ch; }
.sub{
  margin:20px 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);
}
.split-txt .sub:first-child{ margin-top:0; }
.txtlink{ font-weight:600;font-size:.93rem; }

.facts{ margin:0;padding:0; }
.facts > div{
  padding:12px 0;border-top:1px solid var(--rule);
}
.facts > div:last-child{ border-bottom:1px solid var(--rule); }
.facts dt{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-bottom:4px;
}
.facts dd{ margin:0;font-size:.96rem; }
.small{ margin:16px 0 0;font-size:.82rem;color:var(--mut); }

.lines-min{ margin:0 0 12px;padding:0;list-style:none; }
.lines-min li{
  padding:8px 0;border-bottom:1px solid var(--rule);font-size:.92rem;color:var(--mut);
}
.lines-min a{
  font:700 1rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-decoration:none;border-bottom:2px solid rgba(176,52,7,.35);
}

/* form */
.ask-sub{ margin:-10px 0 20px;font-size:.95rem;color:var(--mut);max-width:52ch; }
.form{ max-width:440px; }
.f-row{ margin:0 0 15px; }
.f-row label{
  display:block;margin-bottom:5px;
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);
}
.f-row input,.f-row textarea{
  width:100%;padding:11px 12px;
  border:1px solid #b8ae9c;border-radius:2px;background:#fff;color:var(--ink);
  font:inherit;font-size:1rem;
}
.f-row textarea{ resize:vertical; }
.f-row input::placeholder,.f-row textarea::placeholder{ color:#6b6154; }
.submit{
  background:var(--ink);color:#fff;border:0;border-radius:3px;
  padding:14px 26px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
}
.submit:hover{ background:#000; }
.f-note{ margin:12px 0 0;font-size:.8rem;color:var(--mut); }

/* ============================ FOOTER ============================ */

.foot{ background:var(--rail);color:var(--rail-txt); }
.foot-in{ padding:28px var(--pad) 34px; }
.foot-name{
  margin:0 0 6px;font-weight:700;font-size:1.02rem;letter-spacing:.01em;
}
.foot-addr,.foot-tel{ margin:0 0 6px;font-size:.9rem;color:var(--rail-mut); }
.foot .ph{ background:#2f3b46;color:var(--rail-txt);border-bottom-color:var(--act-lit); }
.foot a{ color:var(--rail-txt); }
.foot-cr{ margin:18px 0 0;font-size:.8rem;color:var(--rail-mut); }
.foot-demo{
  margin:12px 0 0;padding-top:12px;border-top:1px solid #39454f;
  font-size:.78rem;line-height:1.5;color:var(--rail-mut);max-width:60ch;
}

/* ==================== FIXED MOBILE CALL BAR ==================== */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--act);
  border-top:2px solid #7d2505;
}
.callbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:11px 4px;min-height:62px;
  color:#fff;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.28);
}
.callbar a:last-child{ border-right:0; }
.cb-k{ font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:#ffe3d3; }
.cb-n{ font-size:1rem;font-weight:700;letter-spacing:.02em; }

/* ============================ 720px+ ============================ */

@media (min-width:720px){
  :root{ --pad:34px; }
  h1{ font-size:2.02rem;max-width:20ch; }
  .h-sec{ font-size:1.34rem; }
  .split{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start; }
  .split-fig{ margin:0; }
}

/* ============================ 980px+ : the rail ============================ */

@media (min-width:980px){
  body{ padding-bottom:0; }
  .callbar{ display:none; }

  .shell{
    display:grid;
    grid-template-columns:var(--rail-w) minmax(0,1fr);
    align-items:start;
  }
  .rail{
    position:sticky;top:0;
    height:100vh;
    overflow-y:auto;
  }
  .rail-in{
    min-height:100%;
    display:flex;flex-direction:column;
    padding:30px 24px 26px;
  }
  .rail-line{ font-size:.83rem;margin:16px 0 22px; }
  .desk{ margin-bottom:22px; }

  .rail-nav{
    display:block;
    margin-top:auto;
    border-top:1px solid #39454f;
    padding-top:14px;
  }
  .rail-nav a{
    display:block;padding:5px 0;
    color:var(--rail-mut);text-decoration:none;
    font-size:.83rem;letter-spacing:.02em;
  }
  .rail-nav a:hover{ color:var(--rail-txt); }
  .rail-mail{
    display:block;margin:14px 0 0;font-size:.8rem;
  }
  .rail-mail a{ color:var(--rail-mut); }

  .col{ max-width:1000px; }
  .open{ padding:56px 46px 44px; }
  .block{ padding:46px 46px; }
  .eyebrow{ font-size:.7rem; }
  h1{ font-size:2.42rem;max-width:19ch; }
  .open-sub{ font-size:1.06rem; }

  .foot-in{ padding:36px 46px 44px;max-width:1170px;margin:0 auto; }
}

@media (min-width:1280px){
  :root{ --rail-w:370px; }
  .col{ padding-right:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}