/* ==========================================================================
   A-T Excavation LLC — demonstration rebuild, Trueline Web.

   ARCHETYPE G — single screen, anchored panels. Five panels swap in place
   with :target. No JavaScript anywhere.

   Nothing on this page is sticky or fixed EXCEPT the call bar, because the
   phone number is the only thing that must never leave the screen. Their
   live site has that backwards: a sticky red "Call Now!" button that dials
   the Wix placeholder 123-456-7890, and the real number as untappable text.

   Palette: olive drab ground (a nod to the owner's Michigan Army National
   Guard service, without novelty camouflage), oat paper for type, safety
   amber reserved exclusively for calling. Deliberately NOT the black /
   white / bright red of their current Wix theme, and deliberately not the
   pale limestone-green + pine + copper of the other Traverse City
   excavation demo in this pipeline.
   ========================================================================== */

:root{
  --ground:  #21241b;   /* olive drab */
  --ground-2:#191c14;   /* deeper, for masthead + footer */
  --panel:   #2a2e21;   /* raised panel face */
  --panel-2: #323726;
  --oat:     #f0ece1;   /* body type */
  --oat-dim: #b9bda9;   /* muted type — 8.2:1 on --ground */
  --amber:   #e8801c;   /* calls only — 5.6:1 on --ground */
  --amber-d: #c96a10;
  --on-amber:#16180f;
  --line:    #454a37;
  --line-2:  #5a6046;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bar: 74px;          /* height of the fixed call bar */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--oat);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  padding-bottom:calc(var(--bar) + 8px);
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.18; margin:0 0 .5em; }
p{ margin:0 0 1em; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--amber); color:var(--on-amber);
  padding:.7rem 1.1rem; font-weight:700;
}
.skip:focus{ left:0; }

.wrap{ max-width:1020px; margin:0 auto; padding:0 18px; }

/* ---------------------------------------------------------------- masthead */

.mast{
  margin:0 -18px;
  padding:22px 18px 24px;
  background:var(--ground-2);
  border-bottom:1px solid var(--line);
}

.brand{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.mark{ width:48px; height:33px; color:var(--amber); flex:none; }
.wordmark{
  margin:0; font-family:var(--mono); font-size:.86rem; line-height:1.35;
  letter-spacing:.12em; text-transform:uppercase; color:var(--oat-dim);
}
.wordmark span{ display:block; font-size:1.28rem; letter-spacing:.16em; color:var(--oat); }
.wordmark em{ font-style:normal; color:var(--oat-dim); }

h1{
  font-size:clamp(1.62rem, 6.4vw, 2.4rem);
  max-width:22ch;
  margin-bottom:.55em;
}

.lede{
  color:var(--oat-dim);
  max-width:56ch;
  margin-bottom:1.4em;
}

/* the call block — the largest single object in the masthead */
.callbox{ margin:0 0 22px; }

.call-big{
  display:block;
  background:var(--amber);
  color:var(--on-amber);
  text-decoration:none;
  padding:14px 18px 16px;
  border-radius:3px;
}
.call-big:hover{ background:var(--amber-d); color:var(--on-amber); }
.call-verb{
  display:block; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:.85;
}
.call-num{
  display:block; font-family:var(--mono); font-weight:700;
  font-size:clamp(1.5rem, 7.2vw, 2.05rem); letter-spacing:.01em; line-height:1.15;
}

.call-alt{
  margin:.7rem 0 0; font-size:.92rem; color:var(--oat-dim);
  word-break:break-word;
}
.call-alt a{ color:var(--oat); }
.dot{ color:var(--oat-dim); padding:0 .35em; }

/* ------------------------------------------------------------------- index */

.index{
  display:flex; flex-wrap:wrap; gap:7px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.index a{
  display:inline-flex; align-items:baseline; gap:.45em;
  text-decoration:none;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oat);
  border:1px solid var(--line-2);
  padding:.5rem .7rem;
  border-radius:2px;
}
.index a b{ color:var(--amber); font-weight:700; }
.index a:hover{ border-color:var(--amber); color:var(--oat); }

/* current panel marker — colour is never the only signal, the open panel
   also prints its own "01 — Services" tag as the first thing inside it */
body:has(#p1:target) .index a[href="#p1"],
body:not(:has(.panel:target)) .index a[href="#p1"],
body:has(#p2:target) .index a[href="#p2"],
body:has(#p3:target) .index a[href="#p3"],
body:has(#p4:target) .index a[href="#p4"],
body:has(#p5:target) .index a[href="#p5"]{
  background:var(--amber); border-color:var(--amber); color:var(--on-amber);
  font-weight:700;
}
body:has(#p1:target) .index a[href="#p1"] b,
body:not(:has(.panel:target)) .index a[href="#p1"] b,
body:has(#p2:target) .index a[href="#p2"] b,
body:has(#p3:target) .index a[href="#p3"] b,
body:has(#p4:target) .index a[href="#p4"] b,
body:has(#p5:target) .index a[href="#p5"] b{ color:var(--on-amber); }

/* ------------------------------------------------------------------ panels */

.panel{ display:none; padding:26px 0 8px; }
.panel:target{ display:block; }
#p1{ display:block; }                        /* the panel you land on */
body:has(.panel:target) #p1{ display:none; } /* …unless another is open */
#p1:target{ display:block; }

.tag{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:0 0 .6em;
}
.panel h2{ font-size:clamp(1.3rem, 5.4vw, 1.82rem); max-width:26ch; }
.note{ color:var(--oat-dim); max-width:60ch; font-size:.97rem; }

.inline-call{
  margin-top:26px; padding:14px 16px;
  border:1px solid var(--line-2); border-left:5px solid var(--amber);
  background:var(--panel);
  font-size:.98rem;
}
.inline-call a{ color:var(--amber); font-family:var(--mono); font-weight:700; }

/* --- 01 services --- */
.svc{ list-style:none; margin:22px 0 0; padding:0; counter-reset:s; }
.svc li{
  counter-increment:s;
  border-top:1px solid var(--line);
  padding:16px 0 4px;
}
.svc li:first-child{ border-top:none; padding-top:0; }
.svc h3{
  font-family:var(--sans); font-size:1.06rem; letter-spacing:.005em;
  margin:0 0 .35em;
}
.svc h3::before{
  content:"0" counter(s);
  font-family:var(--mono); font-size:.78rem; color:var(--amber);
  margin-right:.7em; letter-spacing:.1em;
}
.svc p{ color:var(--oat-dim); margin:0; max-width:62ch; }

/* --- 02 the work --- */
.jobs{ list-style:none; margin:24px 0 0; padding:0; }
.jobs li{ margin:0 0 30px; }
.jobs figure{ margin:0; }

.frame{
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  min-height:190px;
  padding:16px;
  background:
    repeating-linear-gradient(135deg,
      var(--panel) 0 14px, var(--panel-2) 14px 28px);
  border:2px dashed var(--line-2);
}
.chip{
  align-self:flex-start;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--amber); color:var(--on-amber);
  padding:.3rem .55rem;
}
.brief{
  font-size:.86rem; line-height:1.55; color:var(--oat-dim);
  max-width:52ch;
}
.jobs figcaption{
  padding:12px 2px 0; font-size:.98rem; color:var(--oat-dim); max-width:60ch;
}
.jobs figcaption b{ color:var(--oat); }

/* --- 03 who runs it --- */
.two{ margin-top:22px; }
.big{ font-size:1.12rem; max-width:56ch; }
.two p{ color:var(--oat-dim); max-width:60ch; }
.two .big{ color:var(--oat); }
.two b{ color:var(--oat); }

.facts{ margin:26px 0 0; padding:0; border-top:1px solid var(--line); }
.facts div{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oat-dim);
}
.facts dd{ margin:0; }
.facts dd a{ font-family:var(--mono); color:var(--amber); font-weight:700; }

/* --- 04 where we work --- */
.towns{
  list-style:none; margin:22px 0 18px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.towns li{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  border:1px solid var(--line-2); padding:.42rem .65rem;
  background:var(--panel);
}
.maplink a{ color:var(--amber); }

/* --- 05 get a price --- */
.quote{ margin:22px 0 0; max-width:460px; }
.field{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
.field label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oat-dim);
}
.field input, .field textarea{
  font:inherit; font-size:1rem;
  background:#12140e; color:var(--oat);
  border:1px solid var(--line-2); border-radius:2px;
  padding:.62rem .7rem;
  width:100%;
}
.field textarea{ resize:vertical; }
.quote button{
  font:inherit; font-weight:700; font-size:1rem;
  background:var(--amber); color:var(--on-amber);
  border:none; border-radius:3px;
  padding:.8rem 1.4rem;
  cursor:pointer;
}
.quote button:hover{ background:var(--amber-d); }

/* ------------------------------------------------------------------ footer */

.foot{
  margin:34px -18px 0;
  padding:26px 18px 30px;
  background:var(--ground-2);
  border-top:1px solid var(--line);
  font-size:.92rem;
  color:var(--oat-dim);
}
.foot-brand{ font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--oat); margin-bottom:.7em; }
.foot-lines{ margin:0 0 .7em; }
.foot-lines a{ color:var(--oat); }
.copy{ margin:1.2em 0 .8em; }
.disclaim{
  margin:0; padding-top:14px; border-top:1px solid var(--line);
  font-size:.8rem; line-height:1.6; color:var(--oat-dim);
}

/* -------------------------------------------------------- fixed call bar */

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:1px;
  background:var(--line);
  border-top:1px solid var(--line-2);
}
.callbar-main{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--amber); color:var(--on-amber);
  text-decoration:none;
  padding:11px 16px;
  min-height:var(--bar);
}
.callbar-main span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase;
}
.callbar-main b{
  font-family:var(--mono); font-size:1.34rem; line-height:1.2; letter-spacing:.01em;
}
.callbar-main:hover{ background:var(--amber-d); color:var(--on-amber); }
.callbar-sms{
  flex:0 0 auto;
  display:flex; align-items:center;
  background:var(--ground-2); color:var(--oat);
  text-decoration:none;
  padding:0 20px;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.callbar-sms:hover{ color:var(--amber); }

/* ------------------------------------------------------------ wider screens */

@media (min-width:720px){
  body{ font-size:1.09rem; }
  .wrap{ padding:0 34px; }
  .mast{ margin:0 -34px; padding:30px 34px 28px; }
  .foot{ margin:44px -34px 0; padding:32px 34px 36px; }

  .callbox{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
  .call-big{ padding:16px 26px 18px; }
  .call-alt{ margin:0 0 6px; }

  .frame{ min-height:250px; padding:20px; }
  .panel{ padding:34px 0 12px; }
}

@media (min-width:920px){
  .svc{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:38px;
  }
  .svc li{ padding-top:18px; }
  .svc li:first-child{ border-top:1px solid var(--line); padding-top:18px; }

  .two{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px; }
  .facts{ margin-top:0; }

  .jobs li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:0; }
  .jobs figure{ display:contents; }
  .jobs figcaption{ padding:4px 0 0 28px; align-self:center; }
}

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