/* ==========================================================================
   Molon Excavating — demonstration rebuild, Trueline Web.
   Archetype C: split rail. Right-hand sticky contact rail on desktop; on a
   phone the rail is simply the first block of the document and a fixed bottom
   bar carries both contact routes.

   Palette: pale limestone-green paper, pine rail, copper for calls.
   Deliberately not Molon's black / white / school-bus yellow, and deliberately
   not the warm cream of the other excavation demos in this pipeline.
   ========================================================================== */

:root{
  --paper:#eceee9;
  --surface:#f8faf7;
  --ink:#151a17;
  --ink-2:#39433c;
  --pine:#1d4034;
  --pine-2:#132a23;
  --copper:#8a3a10;
  --line:#c8cfc7;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  padding-bottom:78px;           /* room for the fixed bar */
}

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

.skip{
  position:absolute; left:-9999px; top:0; background:var(--pine); color:#fff;
  padding:.6rem 1rem; z-index:99;
}
.skip:focus{ left:0; }

/* ---------- shell ---------- */
.shell{ max-width:1360px; margin:0 auto; padding:0 18px; }

/* ---------- rail ---------- */
.rail{ margin:0 -18px 26px; background:var(--pine); color:#e9f0eb; }
.rail-in{ padding:22px 18px 26px; }
.rail a{ color:#cfe3d6; }
.mark{ display:block; width:180px; height:auto; }
.rail-line{
  margin:.7rem 0 1.1rem; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:#b9d0c1; line-height:1.7;
}

.btn{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  text-decoration:none; padding:.72rem .85rem; margin-bottom:.55rem;
  border-radius:3px; font-weight:700;
}
.btn-k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:400;
}
.btn-v{ font-size:1.02rem; word-break:break-word; }
.rail .btn-call{ background:#f0a92b; color:#241503; }
.rail .btn-call .btn-k{ color:#3d2a06; }
.rail .btn-mail{ background:#e9f0eb; color:#12261f; }
.rail .btn-mail .btn-k{ color:#2e453b; }
.btn-mail .btn-v{ font-family:var(--mono); font-size:.86rem; }

.rail-facts{ margin:1.4rem 0 0; }
.rail-facts dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#a9c4b2; margin-top:.9rem;
}
.rail-facts dd{ margin:.15rem 0 0; font-size:.95rem; color:#eaf2ec; }

.rail-nav{ margin-top:1.5rem; border-top:1px solid #3b6151; padding-top:1rem; }
.rail-nav ol{ list-style:none; margin:0; padding:0; }
.rail-nav li{ margin:.3rem 0; }
.rail-nav a{
  font-family:var(--mono); font-size:.82rem; text-decoration:none;
  color:#cfe3d6; border-bottom:1px solid transparent;
}
.rail-nav a:hover{ border-bottom-color:#cfe3d6; }

/* ---------- head ---------- */
.head{ padding:.5rem 0 0; }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .8rem;
}
h1{
  margin:0 0 .8rem;
  font-size:clamp(1.62rem, 5.6vw, 2.45rem);
  line-height:1.18; letter-spacing:-.012em; max-width:20ch;
}
.lede{ margin:0 0 1.2rem; font-size:1.09rem; max-width:56ch; color:var(--ink-2); }

.inline-call{
  margin:0 0 1.8rem; font-family:var(--mono); font-size:.92rem; line-height:1.5;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.inline-call a{
  color:#fff; background:var(--copper); text-decoration:none;
  padding:.5rem .75rem; border-radius:3px; white-space:nowrap;
  display:inline-block;
}
.inline-call .or{ color:var(--ink-2); }

/* ---------- facts strip ---------- */
.facts{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin:0 0 2.6rem;
}
.facts div{ background:var(--surface); padding:.75rem .85rem; }
.facts .k{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.facts .v{ display:block; font-weight:700; font-size:.98rem; }

/* ---------- divisions ---------- */
.division, .quote{ border-top:2px solid var(--ink); padding:1.5rem 0 2.4rem; }
.idx{
  margin:0 0 .35rem; font-family:var(--mono); font-size:.95rem;
  letter-spacing:.1em; color:var(--copper); font-weight:700;
}
h2{
  margin:0 0 .7rem; font-size:clamp(1.28rem, 4.4vw, 1.68rem);
  line-height:1.22; letter-spacing:-.008em;
}
.division p, .quote p{ max-width:62ch; }

.svc{ list-style:none; margin:1.1rem 0 1.4rem; padding:0; }
.svc li{
  padding:.5rem 0 .5rem 1.5rem; border-bottom:1px solid var(--line);
  position:relative;
}
.svc li::before{
  content:"—"; position:absolute; left:0; color:var(--copper); font-weight:700;
}
.svc em{ color:var(--ink-2); font-style:normal; font-size:.92em; }

/* ---------- plates ---------- */
.plate{ margin:1.3rem 0; }
.plate svg{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.plate figcaption{
  margin-top:.55rem; font-size:.9rem; color:var(--ink-2);
  border-left:3px solid var(--copper); padding-left:.7rem; max-width:56ch;
}
.plate strong{ color:var(--ink); }

/* ---------- inline CTAs ---------- */
.cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; }
.ghost{
  display:inline-block; text-decoration:none; font-family:var(--mono);
  font-size:.84rem; padding:.55rem .75rem; border:2px solid var(--pine);
  color:var(--pine); background:var(--surface); border-radius:3px;
}
.ghost:hover{ background:var(--pine); color:#fff; }

/* ---------- form ---------- */
form{ max-width:34rem; margin:1.4rem 0 1.2rem; }
.field{ margin:0 0 1rem; }
label{
  display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:.3rem;
}
input, textarea{
  width:100%; font:inherit; padding:.6rem .65rem; background:#fff;
  border:2px solid var(--ink-2); border-radius:3px; color:var(--ink);
}
button{
  font:inherit; font-weight:700; background:var(--copper); color:#fff;
  border:0; border-radius:3px; padding:.75rem 1.3rem; cursor:pointer;
}
.alt-contact{ font-size:.95rem; color:var(--ink-2); }
.alt-contact a{ font-family:var(--mono); font-size:.92em; }

/* ---------- footer ---------- */
.foot{
  border-top:2px solid var(--ink); margin-top:1rem; padding:1.5rem 0 2rem;
  font-size:.95rem; color:var(--ink-2);
}
.foot p{ margin:.45rem 0; }
.foot-name{ font-weight:700; color:var(--ink); font-size:1.05rem; }
.copy{ font-family:var(--mono); font-size:.8rem; }
.demo{
  margin-top:1.1rem; padding:.8rem .9rem; background:var(--surface);
  border:1px solid var(--line); font-size:.84rem; max-width:60ch;
}

/* ---------- fixed mobile bar ---------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--pine-2); border-top:2px solid var(--pine-2);
}
.bar a{
  display:block; text-align:center; text-decoration:none; padding:.6rem .3rem;
  font-family:var(--mono); font-size:.76rem; line-height:1.35; overflow-wrap:anywhere;
}
.bar a:first-child{ background:#f0a92b; color:#231402; font-weight:700; font-size:.86rem; }
.bar a:last-child{ background:#e9f0eb; color:#12261f; }
.bar span{
  display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:#3a2b0c;
}
.bar a:last-child span{ color:#2c4239; }

/* ==========================================================================
   Wide layout: the rail becomes a sticky right-hand column.
   ========================================================================== */
@media (min-width:1040px){
  body{ padding-bottom:0; }
  .bar{ display:none; }

  .shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:0 54px;
    align-items:start;
    padding:0 32px;
  }
  .col{ order:1; min-width:0; padding-top:2.6rem; }
  .rail{
    order:2; margin:0; position:sticky; top:0;
    min-height:100vh; align-self:start;
  }
  .rail-in{ padding:2.6rem 24px 2rem; }

  h1{ font-size:2.45rem; }
  .facts{ grid-template-columns:repeat(4,1fr); }
  .division, .quote{ padding:2rem 0 3rem; }
}

@media (min-width:1440px){
  .shell{ grid-template-columns:minmax(0,1fr) 380px; }
}