/* sticksandstoneshealing.com
   ⭐ Warm, natural light, earthy tones — the visual direction the marketing
   strategy §6 asks for ("authenticity outperforms polish in this niche").
   ⛔ DELIBERATELY NOT the Institute site's dark ground and gold: that palette
   belongs to a different project and a different voice. PLAN §12.
   Light ground by default, and it respects a reader who prefers dark. */
:root{
  --paper:#fdfaf5; --paper-2:#f6efe4; --line:#e3d8cb;
  --ink:#2b2420; --muted:#7a6a5c;
  --clay:#8c6f4a; --clay-deep:#6d5436; --sage:#6f7f6a;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:720px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* The draft banner. Shown only while the staging lock is on and placeholder text
   remains, so nobody ever mistakes filler for her copy. */
.draft{background:#fdf3d8;border-bottom:1px solid #e8d9a8;color:#5c4a1e;
  font-family:var(--sans);font-size:14px;line-height:1.5;padding:12px 20px;text-align:center}

header{border-bottom:1px solid var(--line);padding:22px 0}
/* ⭐ Logo on the left, and ONE stacked block beside it holding the name, her name
   and the nav. flex-start, not space-between: the links belong to the lockup, not
   flung to the far edge of the page. The block is centred against the logo. */
header .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  justify-content:flex-start}
.brand-logo{display:block;flex:none;line-height:0}
/* ⭐ 140px. The 2x asset needs 280px and the source artwork gives 294px of content,
   so this is the largest size that is still real resolution and not an upscale.
   Below ~72px the arc text "STICKS & STONES HEALING" stops being readable at all. */
.brand-logo img{display:block;width:140px;height:140px}
.brand-block{display:flex;flex-direction:column;justify-content:center;
  gap:12px;min-width:0}
/* The name stays as TEXT and is not baked into an image — sharp at any size,
   selectable, readable by a screen reader, and it survives the logo not loading. */
.brand{font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;
  display:block}
.brand small{display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-top:3px}
nav{font-family:var(--sans);font-size:14.5px;display:flex;gap:18px;flex-wrap:wrap}
/* On a phone the header would otherwise be almost all logo. */
@media (max-width:560px){
  ul.rows{padding-left:20px}
  ul.rows li:before{left:-20px}
  header .wrap{gap:10px 16px}
  .brand-logo img{width:104px;height:104px}
  .brand{font-size:18px}
  nav{gap:14px;font-size:14px}
}
nav a{color:var(--muted);text-decoration:none}
nav a:hover,nav a.on{color:var(--clay-deep)}

main{padding:44px 0 64px}
h1{font-size:34px;line-height:1.22;margin:0 0 20px;font-weight:700;letter-spacing:-.01em}
h2{font-size:23px;line-height:1.3;margin:40px 0 14px}
h3{font-size:16px;margin:26px 0 8px;font-family:var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
p{margin:0 0 16px}
a{color:var(--clay-deep)}
.lede{font-size:20.5px;color:#4a3f37}
.muted{color:var(--muted);font-size:16px}
.eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin:0 0 14px}

/* The hero. One promise, three outcome lines, two buttons. Nothing else: the
   strategy is explicit that a confused prospect does not book. */
.hero{margin:0 0 40px}
.hero h1{font-size:38px}
ul.outcomes{list-style:none;padding:0;margin:24px 0}
ul.outcomes li{font-size:19px;color:#4a3f37;padding:8px 0 8px 26px;position:relative}
ul.outcomes li:before{content:"";position:absolute;left:0;top:19px;width:12px;height:1px;
  background:var(--clay)}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:26px;margin:30px 0}
.card h2{margin-top:0}

/* The time-zone box. PLAN §10: this is a conversion issue, not a detail —
   Israel is 7-8 hours ahead of US Central and a reader who cannot tell what
   time a slot is in her own day does not book. */
.tzbox{border-left:3px solid var(--sage);background:#f2f5f0;padding:18px 22px;
  border-radius:0 8px 8px 0;margin:28px 0}
.tz{font-family:var(--sans);font-size:15.5px;line-height:1.6;margin:0 0 8px;color:#3d4a39}
.tzbox p:last-child{margin-bottom:0}

.btn{display:inline-block;background:var(--clay);color:#fffaf3;font-family:var(--sans);
  font-weight:700;font-size:16px;padding:14px 24px;border:0;border-radius:8px;
  text-decoration:none;cursor:pointer}
.btn:hover{background:var(--clay-deep)}
.btn-2{background:transparent;color:var(--clay-deep);border:2px solid var(--clay);
  padding:12px 22px}
.btn-2:hover{background:var(--clay);color:#fffaf3}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}

label{display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:.03em;
  color:var(--muted);margin:16px 0 6px}
label.inline{margin:0;font-size:15px;color:#4a3f37;letter-spacing:0;line-height:1.55}
input[type=text],input[type=email],textarea{width:100%;padding:12px 14px;font-size:17px;
  font-family:var(--serif);background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:8px}
textarea{font-size:16px;line-height:1.6}
input:focus,textarea:focus{outline:2px solid var(--clay);outline-offset:1px}
.consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0;font-family:var(--sans)}
.consent input{margin-top:3px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--clay)}
.err{background:#fdecec;border:1px solid #e7bcbc;color:#7a2d2d;padding:12px 16px;
  border-radius:8px;font-family:var(--sans);font-size:15px;margin:0 0 18px}

/* A quiet note, visually de-emphasised on purpose. The Zelle block for existing
   clients renders in here: PLAN §9, it must never read as the checkout. */
.quiet-note{border:1px dashed var(--line);border-radius:10px;padding:18px 22px;
  margin:30px 0;font-size:16.5px;color:#4a3f37}
.quiet-note h2{font-size:17px;font-family:var(--sans);text-transform:none;margin:0 0 10px}

/* ⭐ The list is INDENTED and bulleted so it sits under "The work" as its
   contents, not beside it as a peer. The heading and the item titles share a serif
   weight, so on a shared left edge the heading read as just another row. The indent
   plus a dot per service settles it: one is the header, the rest are the list.
   The gap above the list is also larger than the gap under the heading, which keeps
   the heading grouped with its own intro line. */
ul.rows{list-style:none;padding:0 0 0 28px;margin:34px 0 18px}
ul.rows li{border-top:1px solid var(--line);padding:16px 0;display:flex;
  gap:14px;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  position:relative}
/* The dot. Absolutely positioned so it stays out of the row's flex layout, and
   sat on the first line of the title rather than centred on the whole row, which
   would drift as the description below wraps. */
ul.rows li:before{content:"";position:absolute;left:-28px;top:25px;
  width:7px;height:7px;border-radius:50%;background:var(--clay)}
ul.rows li:last-child{border-bottom:1px solid var(--line)}
.tag{font-family:var(--sans);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--clay-deep);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  white-space:nowrap;text-decoration:none}

/* The booking embed, when BOOKING_EMBED is on. Fluid height, because a booking
   widget that is cut off mid-calendar costs the booking. */
.embed{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:26px 0;
  background:#fff}
.embed iframe{display:block;width:100%;height:760px;border:0}

footer{border-top:1px solid var(--line);padding:28px 0 52px;font-family:var(--sans);
  font-size:13.5px;color:var(--muted);margin-top:40px}
footer a{color:var(--muted)}
footer p{margin:0 0 6px}
.disclaimer{margin-top:14px;font-size:12.5px;line-height:1.6;color:#8c7e71}
footer .links{margin-top:12px}

table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;margin:14px 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase}
code{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--clay-deep)}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is display:none and fill in everything else. aria-hidden keeps it
   out of a screen reader, so no real person ever meets it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:560px){
  body{font-size:17px}
  h1{font-size:28px}
  .hero h1{font-size:30px}
  .lede{font-size:19px}
  main{padding:32px 0 48px}
  .cta .btn{flex:1 1 100%;text-align:center}
  .embed iframe{height:620px}
}

/* A reader who prefers dark gets dark, in the same warm family rather than the
   usual cold grey. The palette is swapped; nothing is restyled. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1a1613; --paper-2:#231e19; --line:#3a322a;
    --ink:#ece4da; --muted:#a2958a;
    --clay:#c49a67; --clay-deep:#d8b184; --sage:#8da186;
  }
  input[type=text],input[type=email],textarea{background:#15110e;color:var(--ink)}
  .tzbox{background:#1e241c}
  .draft{background:#3a2f12;border-bottom-color:#574a1c;color:#f0dfae}
  .err{background:#3a1f1f;border-color:#6b3b3b;color:#f2c9c9}
  .embed{background:#15110e}
}

/* ───── Her photograph ─────────────────────────────────────────────────────
   ⭐ Treated as CONTENT, not decoration. A real face is the strongest trust
   signal a stranger arriving from a Facebook ad can be given, and /about is
   where she goes to decide whether this person is real. Self-hosted, so no
   third-party host has to be added to img-src.
   ⛔ width and height are set on the <img> itself as well: without them the
   text reflows when the picture lands, which is exactly the cheap-looking
   jump this whole site is trying not to make. */
.portrait{float:right;width:238px;max-width:42%;margin:4px 0 16px 26px}
.portrait img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line)}
.portrait figcaption{font-family:var(--sans);font-size:12.5px;
  color:var(--muted);margin-top:8px;text-align:center}

/* The small round one that sits under the promise on the front page. */
.byline{display:flex;align-items:center;gap:14px;margin:22px 0 0}
.byline img{width:58px;height:58px;border-radius:50%;flex:none;
  border:1px solid var(--line)}
.byline .who{font-family:var(--sans);font-size:14px;line-height:1.4}
.byline .who strong{display:block;color:var(--ink)}
.byline .who span{color:var(--muted);font-size:13px}

@media (max-width:560px){
  .portrait{float:none;width:auto;max-width:320px;margin:0 auto 26px}
}

/* ───── The floating WhatsApp button ───────────────────────────────────────
   ⭐ Pinned top-right on every page. A reachable human is itself a trust signal
   (the footer link says the same thing), but a stranger off a Facebook ad should
   not have to scroll to the bottom to find it.
   ⛔ #25d366 is WhatsApp's own brand green and is NOT themed: a recoloured
   WhatsApp mark stops being recognisable, which is the entire point of using it. */
.wa-float{
  position:fixed;top:150px;right:18px;z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#25d366;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  transition:transform .15s ease,box-shadow .15s ease;
}
.wa-float svg{display:block;width:30px;height:30px;fill:#fff}
.wa-float:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(0,0,0,.30)}
/* ⚠ A visible focus ring. It is a link, and a keyboard user has to be able to see it. */
.wa-float:focus-visible{outline:3px solid var(--clay-deep);outline-offset:3px}
/* ⚠ A reader who asks for less motion gets no grow-on-hover. */
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}
@media (max-width:560px){
  .wa-float{width:48px;height:48px;top:152px;right:12px}
  .wa-float svg{width:27px;height:27px}
}
/* ⛔ It is a control, not content — it has no business on a printed page. */
@media print{.wa-float{display:none}}