/* Matterhorn Landscaping — demonstration rebuild, Trueline Web.
   ARCHETYPE G: single screen, anchored :target panels, no JS.
   Chosen because the live site's four service buttons all 404 off-domain;
   here the four services live inside this one document and cannot break. */

:root{
  --ink:#17211c;
  --ink-2:#48584f;
  --pine:#2F4A3C;
  --pine-d:#1E3227;
  --snow:#F4F2ED;
  --paper:#FBFAF7;
  --line:#D8D3C8;
  --alp:#B9563A;
  --rule:1px solid var(--line);
  --sans:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--snow);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:6px}

/* ---- the frame: one screen, fixed chrome, scrolling stage ---- */
.frame{
  max-width:1080px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  border-left:var(--rule);
  border-right:var(--rule);
  display:flex;
  flex-direction:column;
}

/* ---- identity bar ---- */
.ident{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;
  background:var(--pine-d);
  color:#EFEDE6;
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo svg{flex:none;color:#9DBE9B}
.logo-t{display:flex;flex-direction:column;line-height:1.15}
.logo-t b{font-family:var(--serif);font-size:1.32rem;letter-spacing:.01em;font-weight:600}
.logo-t i{font-style:normal;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#9DBE9B}

.callbtn{
  text-decoration:none;
  background:var(--alp);color:#fff;
  padding:9px 16px;border-radius:3px;
  font-size:1rem;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.callbtn span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.85}
.callbtn:hover{background:#a04a31}

/* ---- tab strip ---- */
.tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--pine);
  border-bottom:3px solid var(--pine-d);
}
.tabs a{
  flex:1 1 auto;text-align:center;
  padding:13px 10px;
  text-decoration:none;color:#DCE7DA;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-right:1px solid rgba(255,255,255,.12);
}
.tabs a:last-child{border-right:0}
.tabs a:hover,.tabs a:focus{background:var(--pine-d);color:#fff}
.tabs .tab-cta{background:#9DBE9B;color:var(--pine-d)}
.tabs .tab-cta:hover{background:#b4d1b2;color:var(--pine-d)}

/* ---- the stage: panels swap via :target, no JS ---- */
.stage{flex:1;position:relative;padding:0}

.panel{
  display:none;
  padding:38px 34px 46px;
  animation:fade .22s ease-out;
}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel:target{display:block}

/* default view: home shows until a service is chosen */
.panel-home{display:block}
.stage:has(.panel:target) .panel-home{display:none}

/* Fallback for engines without :has() — home stays, targeted panel appears
   below it. Content is never hidden or unreachable either way. */

.kicker{
  margin:0 0 8px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--alp);font-weight:800;
}
.panel h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,5.4vw,3.1rem);line-height:1.08;
  margin:0 0 16px;letter-spacing:-.015em;
}
.panel h1 em{font-style:normal;color:var(--pine);border-bottom:4px solid #9DBE9B}
.panel h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.75rem,4.4vw,2.5rem);line-height:1.12;
  margin:0 0 14px;letter-spacing:-.012em;
}
.lede{margin:0 0 22px;font-size:1.06rem;color:var(--ink-2);max-width:60ch}

.inline-call{
  display:inline-block;margin:6px 0 10px;
  background:var(--pine);color:#fff;text-decoration:none;
  padding:15px 26px;border-radius:4px;
  font-size:1.12rem;font-weight:700;
}
.inline-call:hover{background:var(--pine-d)}
.micro{margin:8px 0 0;font-size:.85rem;color:#7b8880}

.points{list-style:none;padding:0;margin:0 0 26px;max-width:62ch}
.points li{
  padding:13px 0 13px 18px;
  border-top:var(--rule);
  border-left:3px solid transparent;
  font-size:.98rem;color:var(--ink-2);
}
.points li:last-child{border-bottom:var(--rule)}
.points li b{color:var(--ink);font-weight:700}

/* honest, marked placeholder — never a stock photo pretending to be theirs */
.frame-note{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;
  min-height:200px;margin:0 0 24px;
  background:
    repeating-linear-gradient(135deg,#EDEAE1 0 12px,#E6E2D7 12px 24px);
  border:2px dashed #C3BCAC;border-radius:5px;
  color:#8a8272;
}
.frame-note span{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.frame-note small{font-size:.82rem;max-width:36ch;line-height:1.45}

.panel-cta{
  display:inline-block;text-decoration:none;
  color:var(--pine);font-weight:700;font-size:1rem;
  border-bottom:2px solid #9DBE9B;padding-bottom:2px;
}
.panel-cta:hover{color:var(--alp);border-color:var(--alp)}

/* ---- quote panel ---- */
.panel-quote{background:#F1EFE8}
.q{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:640px;margin:0 0 18px}
.q label{display:flex;flex-direction:column;gap:5px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.q .wide{grid-column:1/-1}
.q input,.q select,.q textarea{
  font:inherit;font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--ink);
  padding:11px 12px;border:1px solid #C6BFB0;border-radius:3px;background:#fff;
}
.q textarea{resize:vertical}
.q input:focus,.q select:focus,.q textarea:focus{outline:2px solid var(--pine);outline-offset:1px;border-color:var(--pine)}
.q button{
  grid-column:1/-1;justify-self:start;
  font:inherit;font-size:1.05rem;font-weight:700;
  background:var(--alp);color:#fff;border:0;border-radius:3px;
  padding:14px 32px;cursor:pointer;
}
.q button:hover{background:#a04a31}
.or{font-size:.95rem;color:var(--ink-2)}
.or a{color:var(--pine);font-weight:600}

/* ---- footer ---- */
.foot{
  background:var(--pine-d);color:#C8D5C6;
  padding:26px 34px 30px;
  font-size:.9rem;
}
.foot p{margin:0 0 6px}
.foot a{color:#fff}
.foot-brand{font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:8px !important}
.demo-mark{margin-top:14px !important;font-size:.74rem;color:#7f9a7d;letter-spacing:.02em}

/* ---- phone ---- */
@media (max-width:640px){
  body{font-size:16px}
  .frame{border:0}
  .ident{padding:12px 16px;flex-wrap:wrap}
  .logo-t b{font-size:1.15rem}
  .callbtn{flex:1 1 100%;text-align:center;margin-top:10px;padding:13px 16px;font-size:1.15rem}
  .tabs a{flex:1 1 50%;border-bottom:1px solid rgba(255,255,255,.12);padding:12px 6px;font-size:.72rem}
  .tabs .tab-cta{flex:1 1 100%}
  .panel{padding:26px 18px 36px}
  .q{grid-template-columns:1fr}
  .q button{width:100%;justify-self:stretch}
  .foot{padding:22px 18px 28px}
  .frame-note{min-height:160px}
}

@media (prefers-reduced-motion:reduce){
  .panel{animation:none}
}