/* ==========================================================================
   Falling Leaf Tree Care, LLC — demonstration rebuild
   Archetype C, split rail. Fixed identity/phone rail on desktop; on a phone
   the rail collapses to a STICKY TOP call bar (not a bottom bar — the two
   other tree demos in this market already end in a bottom bar).

   Palette is deliberately NOT sage-green-and-rust: both neighbouring demos
   in this trade are. High-desert slate blue, bone paper, copper accent, and
   a serif display face for Scott's bonsai/craft angle.
   ========================================================================== */

:root{
  --ink:#151a21;
  --slate:#25333f;
  --slate-d:#18232c;
  --slate-l:#3d5364;
  --bone:#f6f3ec;
  --bone-d:#ece7dc;
  --copper:#b46a38;
  --copper-l:#d08a56;
  --sky:#8fa8bb;
  --line:#d5cec1;
  --rail-w:288px;

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

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

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

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:99;
}
.skip:focus{left:0;}

/* ---------- the rail (desktop) ---------------------------------------- */

.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);
  background:var(--slate);color:#e8eef3;
  display:none;
  border-right:1px solid rgba(0,0,0,.35);
}
.rail-in{
  height:100%;overflow-y:auto;
  padding:34px 26px 30px;
  display:flex;flex-direction:column;
}

.mark{display:flex;align-items:flex-start;gap:11px;margin-bottom:26px;}
.mark-leaf{
  flex:0 0 auto;width:20px;height:26px;margin-top:5px;
  background:var(--copper-l);
  border-radius:0 100% 0 100%;
  transform:rotate(-14deg);
}
.mark-name{
  font-family:var(--serif);font-size:1.36rem;line-height:1.15;color:#fff;
  display:block;letter-spacing:.01em;
}
.mark-name em{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--sky);margin-top:7px;
}

.rail-where{
  margin:0 0 22px;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sky);
}

/* The whole block is the tap target. On the live site the word "Call"
   is an anchor to /contact — here "Call Scott" places the call. */
.rail-call{
  display:block;text-decoration:none;
  background:var(--copper);color:#fff;
  padding:15px 16px 16px;border-radius:3px;
  margin-bottom:12px;
  transition:background .15s ease;
}
.rail-call:hover{background:var(--copper-l);}
.rail-call-k{
  display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:3px;
}
.rail-call-n{
  display:block;font-family:var(--mono);font-size:1.14rem;letter-spacing:-.01em;
}

.rail-mail{
  display:block;font-size:.79rem;color:#cfe0ec;text-decoration:none;
  word-break:break-all;line-height:1.4;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:22px;margin-bottom:22px;
}
.rail-mail:hover{color:#fff;text-decoration:underline;}

.rail-nav{display:flex;flex-direction:column;gap:1px;}
.rail-nav a{
  color:#c9d7e1;text-decoration:none;font-size:.88rem;
  padding:7px 10px;margin-left:-10px;border-radius:3px;
}
.rail-nav a:hover{background:rgba(255,255,255,.07);color:#fff;}

.rail-ccb{
  margin:auto 0 0;padding-top:26px;
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:#9fb4c4;line-height:1.7;
}
.rail-ccb span{color:var(--sky);font-family:var(--mono);letter-spacing:.04em;}

/* ---------- the mobile sticky call bar -------------------------------- */

.topcall{
  position:sticky;top:0;z-index:40;
  background:var(--slate);
  padding:9px 14px 11px;
  display:flex;flex-direction:column;gap:8px;
  border-bottom:2px solid var(--copper);
}
.topcall-name{
  font-family:var(--serif);color:#fff;font-size:1.02rem;line-height:1;
}
.topcall-btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--copper);color:#fff;font-weight:600;
  padding:12px;border-radius:3px;font-size:1rem;
}

/* ---------- the content column ---------------------------------------- */

.page{
  padding:0 20px 0;
  max-width:760px;
  margin:0 auto;
}

section{padding:46px 0;border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:0;}

.eyebrow{
  margin:0 0 16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);
}

h1{
  font-family:var(--serif);font-weight:400;
  font-size:2.05rem;line-height:1.15;letter-spacing:-.015em;
  margin:0 0 20px;color:var(--slate-d);
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:1.62rem;line-height:1.2;margin:0 0 18px;color:var(--slate-d);
}
h3{
  font-size:1rem;font-weight:700;letter-spacing:-.005em;
  margin:0 0 10px;color:var(--slate-d);
}

p{margin:0 0 15px;}

.lede{font-size:1.06rem;line-height:1.66;}
.hand{
  font-family:var(--serif);font-style:italic;font-size:1.04rem;
  color:var(--slate-l);border-left:3px solid var(--copper);
  padding-left:16px;margin:22px 0 24px;
}

.open-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;
  background:var(--copper);color:#fff;padding:13px 20px;border-radius:3px;
}
.btn:hover{background:var(--copper-l);}
.btn.ghost{background:transparent;color:var(--slate);border:1px solid var(--line);}
.btn.ghost:hover{background:var(--bone-d);}

.num{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  color:var(--copper);margin:0 0 8px;
}

/* ---------- evidence frames (no grid, one per chapter) ---------------- */

.frame{margin:0 0 24px;}
.ph{
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  aspect-ratio:3/2;padding:20px;
  background:var(--slate-d);
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 12px,transparent 12px 24px);
  border:1px solid var(--slate-l);
  color:#cddae4;
}
.frame-slim .ph{aspect-ratio:16/7;}
.ph-k{
  font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--copper-l);
}
.ph-t{font-size:.87rem;line-height:1.5;max-width:52ch;}
figcaption{
  font-size:.79rem;color:var(--slate-l);padding-top:9px;
  border-top:1px solid var(--line);margin-top:9px;
}

.inline-call{
  font-size:.95rem;background:var(--bone-d);
  padding:13px 16px;border-radius:3px;margin-top:20px;
}
.inline-call a{font-family:var(--mono);font-weight:600;}

/* ---------- the bonsai pull-out --------------------------------------- */

.pull{
  background:var(--slate);color:#dde7ee;
  padding:26px 22px 22px;border-radius:3px;margin-top:26px;
}
.pull h3{color:#fff;font-family:var(--serif);font-weight:400;font-size:1.24rem;margin-bottom:12px;}
.pull p{font-size:.95rem;}
.pull p:last-child{margin-bottom:0;}
.pull-note{
  color:var(--sky);font-size:.85rem;border-top:1px solid rgba(255,255,255,.14);
  padding-top:14px;margin-top:16px;
}

/* ---------- the price table ------------------------------------------- */

.price-h{margin-top:28px;}
.prices{
  width:100%;border-collapse:collapse;margin:0 0 14px;
  font-size:.92rem;
}
.prices caption{
  text-align:left;font-size:.75rem;color:var(--slate-l);
  padding-bottom:10px;
}
.prices th,.prices td{
  text-align:left;vertical-align:top;padding:13px 10px;
  border-top:1px solid var(--line);
}
.prices tr:last-child th,.prices tr:last-child td{border-bottom:1px solid var(--line);}
.prices th{font-weight:700;color:var(--slate-d);white-space:nowrap;padding-left:0;}
.prices .fig{
  font-family:var(--mono);font-size:1.06rem;color:var(--copper);
  font-weight:600;white-space:nowrap;
}
.price-note{font-size:.9rem;color:var(--slate-l);}

/* ---------- reach ------------------------------------------------------ */

.reach-lede{font-size:1.02rem;}
.reach-ways{display:flex;flex-direction:column;gap:10px;margin:22px 0 28px;}
.way{
  display:block;text-decoration:none;
  border:1px solid var(--line);border-radius:3px;
  padding:14px 16px;background:#fff;color:var(--slate-d);
}
.way:hover{border-color:var(--copper);}
.way-call{background:var(--slate);border-color:var(--slate);color:#fff;}
.way-k{
  display:block;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--copper);margin-bottom:4px;
}
.way-call .way-k{color:var(--copper-l);}
.way-v{display:block;font-family:var(--mono);font-size:1.02rem;word-break:break-all;}

.form{border-top:1px solid var(--line);padding-top:24px;}
.form-k{font-weight:600;color:var(--slate-d);}
.form label{display:block;font-size:.85rem;font-weight:600;color:var(--slate-d);margin-bottom:14px;}
.form input,.form textarea{
  display:block;width:100%;margin-top:6px;
  font:inherit;font-size:16px;font-weight:400;
  padding:11px 12px;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:var(--ink);
}
.form textarea{resize:vertical;}
.form button{
  font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  background:var(--copper);color:#fff;border:0;border-radius:3px;
  padding:13px 24px;
}
.form button:hover{background:var(--copper-l);}
.form-alt{font-size:.9rem;margin-top:14px;color:var(--slate-l);}

/* ---------- foot ------------------------------------------------------- */

.foot{
  border-top:1px solid var(--line);
  padding:34px 0 44px;font-size:.87rem;color:var(--slate-l);
}
.foot-name{font-family:var(--serif);font-size:1.16rem;color:var(--slate-d);margin-bottom:10px;}
.foot-lic{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;}
.foot-contact a{font-weight:600;}
.foot-demo{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.74rem;line-height:1.6;color:#8d8677;
}

/* ---------- desktop: rail appears, top bar disappears ------------------ */

@media (min-width:900px){
  .rail{display:block;}
  .topcall{display:none;}
  .page{
    margin-left:var(--rail-w);
    max-width:none;
    padding:0 clamp(38px,5vw,76px);
  }
  .page > *{max-width:660px;}
  section{padding:64px 0;}
  h1{font-size:2.7rem;}
  h2{font-size:1.95rem;}
  .lede{font-size:1.14rem;}
  .reach-ways{flex-direction:row;}
  .reach-ways .way{flex:1;}
  .prices th{padding-right:22px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}