/* The pill standard for loomwest.com (Andre 2026-10-10, approved 10/8 to 10/10): every button-shaped link and button
   on the site is the header's "Start my website" / "Call or text" pair, nothing else. One file, linked LAST in every
   page's head so it wins ties, and every pill carries class="pill" (plus "ghost" for the outline twin).
   Shape: 8px radius. Size: 9px 18px padding with a 24px line, so the solid pill is exactly 42px tall; the ghost
   drops to 7px 16px because its 2px border makes up the difference, so both are 42px side by side. Type: Space
   Grotesk 700 at .9rem. On touch screens both grow to 44px, the smallest target a thumb hits reliably.
   Colours per variant: solid = the --btn orange with white text and the 2px drop shadow; ghost = transparent with
   ink text and a 2px ink border on light sections. A dark section sets only the ghost's colour (e.g. the content
   page's hero), never its border width, padding or shape.
   Selectors are a.pill / button.pill (0,1,1) so they tie with the satellite pages' ".nav a" and win on order, so a
   page rule that HIDES a pill must outrank them (e.g. "header a.cta{display:none}", not "header .cta"). */
a.pill, button.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;
  min-height:42px; padding:9px 18px; border:0; border-radius:8px;
  font:700 .9rem/24px 'Space Grotesk','Segoe UI',system-ui,sans-serif; letter-spacing:normal; text-transform:none;
  text-align:center; text-decoration:none; text-shadow:none; vertical-align:middle;
  background:var(--btn,#b25f2a); color:#fff; box-shadow:0 2px 0 var(--btn-shadow,#8e4c22);
  cursor:pointer; transition:transform .08s, box-shadow .08s, background-color .15s;
}
a.pill:hover, button.pill:hover{transform:translateY(-1px); box-shadow:0 3px 0 var(--btn-shadow,#8e4c22); color:#fff;}
a.pill.ghost, button.pill.ghost{background:transparent; color:var(--ink,#1e222a); border:2px solid currentColor;
  padding:7px 16px; box-shadow:none;}
a.pill.ghost:hover, button.pill.ghost:hover{background:rgba(191,106,51,.12); box-shadow:none; transform:none;}
button.pill[disabled]{opacity:.7; cursor:wait; transform:none;}
/* Header pills never wrap; everywhere else a long label may wrap on a narrow phone rather than push the page sideways. */
header a.pill{white-space:nowrap;}
@media (pointer:coarse){ a.pill, button.pill{min-height:44px;} }
@media (prefers-reduced-motion:reduce){ a.pill:hover, button.pill:hover{transform:none;} }