/* ============================================================
   AXIS, the landscaping page. Loaded after site.css, scoped to
   body.landscaping. The AXIS surface does not change: same
   ground, same volt, same curves, same type.

   Two things change. The sample business inside the devices moves
   to limestone and terracotta, because the plumber on the main
   page already owns cream and forest and a landscaper rendered in
   green would be the fourth green trades site this week.

   And the page carries one structure the other two do not: the
   quote rail. A clinic books appointments. A landscaper sends
   quotes, and the quote is the unit of the business, so the page
   is ordered as the life of a single quote rather than as a grid
   of features. Remove .qline and the sections lose their order,
   the review band becomes an unrelated upsell, and the price
   ladder stops being the cost of fixing a named leak.
   ============================================================ */

.landscaping{
  --hl-bg:#F2EFE8;
  --hl-ink:#1C1A15;
  --hl-dim:rgba(28,26,21,.66);
  --hl-line:rgba(28,26,21,.12);
  --hl-brand:#A8412A;
  --hl-brand-ink:#F7F4EE;
}
.landscaping .hl-call:hover,.landscaping .hld-call:hover{background:#2e2a22}
.landscaping .hl-book:hover,.landscaping .hld-book:hover{background:#8d3522}

/* the sample's rating line carries a review count, which is the
   whole argument of this page, so it never collapses */
.landscaping .hl-rating{display:block}

/* ------------------------------------------------------------
   THE QUOTE RAIL. The organising idea, made structural.
   Five stations, left to right on a wide screen and top to
   bottom on a phone. The elapsed time is the carrying figure at
   roughly four times the weight of the station title, because
   speed is the entire argument and the titles are only labels
   for it.
   ------------------------------------------------------------ */
.qline{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:2.6rem;
  counter-reset:q;
}
.q{
  counter-increment:q;
  position:relative;
  display:flex;flex-direction:column;gap:.5rem;
  padding:3.2rem 1.5rem 1.6rem 0;
}
/* the hairline the stations hang from, and the node on it */
.q::before{
  content:"";
  position:absolute;left:0;right:0;top:1.05rem;
  height:1px;background:var(--hair);
}
.q:first-child::before{left:.5rem}
/* the rail terminates on the last node rather than running off the grid */
.q:last-child::before{right:auto;width:.55rem}
.q::after{
  content:"";
  position:absolute;left:0;top:.55rem;
  width:1.1rem;height:1.1rem;border-radius:999px;
  background:var(--bg);
  border:1px solid var(--hair2);
  box-shadow:inset 0 0 0 3px var(--bg);
}
.q.is-hot::after{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 3px var(--bg),0 0 0 5px var(--accent-dim);
}
.q-when{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,3.4vw,3.1rem);
  letter-spacing:-.03em;line-height:.95;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.q.is-hot .q-when{color:var(--accent)}
.q-unit{
  display:block;
  font-family:var(--body);font-weight:600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
  margin-top:.5rem;
}
.q h3{
  font-size:1.02rem;letter-spacing:0;line-height:1.25;
  margin-top:.35rem;
}
.q p{font-size:.88rem;line-height:1.55;color:var(--quiet);max-width:26ch}
.q-tag{
  margin-top:auto;padding-top:.9rem;
  font-size:.78rem;line-height:1.4;color:var(--dim);
}
.q-tag span{
  display:inline-block;
  background:var(--accent-dim);
  border:1px solid rgba(232,255,71,.22);
  border-radius:var(--r-md) var(--r-md) var(--r-md) .25rem;
  padding:.5rem .7rem;
}
.qline-foot{margin-top:1.9rem}

@media (max-width:1000px){
  .qline{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
  .q{padding:3rem 0 2rem 0}
  .q::before{left:0;right:0}
  .q:first-child::before,.q:last-child::before{left:0;right:0}
}
@media (max-width:620px){
  .qline{grid-template-columns:1fr;gap:0}
  .q{
    padding:0 0 2rem 2.4rem;
  }
  /* the rail turns vertical and runs down the left */
  .q::before{
    left:.5rem;right:auto;top:.5rem;bottom:-.5rem;
    width:1px;height:auto;
  }
  .q:last-child::before{bottom:auto;height:1.2rem}
  .q::after{left:0;top:.15rem}
  .q p{max-width:40ch}
  .q-tag{margin-top:.9rem}
}

/* ------------------------------------------------------------
   THE MISSED CALL, as the phone shows it. Same component as the
   clinic page, because a landscaper on a mower and a nurse mid
   treatment miss a call for the same reason: both hands are busy.
   ------------------------------------------------------------ */
.calllog{
  display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;align-items:baseline;
  max-width:44rem;margin-bottom:1.5rem;
  padding:1.1rem 1.35rem 1.2rem;
  border:1px solid var(--hair2);border-radius:var(--r-md);
  background:rgba(0,0,0,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
}
.calllog > div{grid-column:1;grid-row:1}
.calllog-tag{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#f87171}
.calllog-num{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.calllog-time{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--faint);font-variant-numeric:tabular-nums}
.calllog-note{grid-column:1 / -1;font-size:.88rem;color:var(--faint);margin-top:.35rem;max-width:44ch}

/* ------------------------------------------------------------
   THE REVIEW BAND. Two figures and the text that moves one to
   the other. The gap between them is the point, so they sit on
   one baseline with the arrow between, and the small print sits
   under both rather than beside either.
   ------------------------------------------------------------ */
.rev{
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  align-items:center;
  gap:1.4rem 2rem;
  padding:2rem 2.2rem 2.2rem;
  border:1px solid var(--hair);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06);
}
.rev-fig{display:flex;flex-direction:column;gap:.4rem}
.rev-n{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:-.035em;line-height:.9;
  font-variant-numeric:tabular-nums;
}
.rev-fig.is-now .rev-n{color:var(--faint)}
.rev-fig.is-after .rev-n{color:var(--accent)}
.rev-lab{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--faint);
}
.rev-arrow{
  display:flex;align-items:center;justify-self:center;
  color:var(--hair2);
}
.rev-arrow svg{display:block;width:34px;height:34px;fill:currentColor}
.rev-say{
  font-size:.82rem;line-height:1.5;color:var(--dim);
  max-width:34ch;
}
.rev-say span{
  display:inline-block;
  background:var(--accent-dim);
  border:1px solid rgba(232,255,71,.22);
  border-radius:var(--r-md) var(--r-md) var(--r-md) .25rem;
  padding:.6rem .8rem;
}
.rev-note{
  grid-column:1 / -1;
  font-size:.86rem;line-height:1.55;color:var(--faint);
  /* spans the whole band: at 74ch it left the right third of the block empty */
  max-width:none;
  columns:2;column-gap:2.4rem;
  padding-top:1rem;
  border-top:1px solid var(--hair);
  margin-top:.4rem;
}
@media (max-width:860px){
  .rev-note{columns:1}
}
@media (max-width:860px){
  .rev{grid-template-columns:auto auto auto;padding:1.6rem 1.5rem 1.8rem;gap:1.1rem 1.4rem}
  .rev-say{grid-column:1 / -1;max-width:46ch}
}
@media (max-width:480px){
  .rev{grid-template-columns:1fr auto 1fr;gap:1rem}
  .rev-arrow svg{width:26px;height:26px}
}

/* ------------------------------------------------------------
   EIGHT JOBS, each with the text it sends. Same grid as the
   clinic page; the wording inside it is the only difference.
   ------------------------------------------------------------ */
.ex-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);overflow:clip;
}
.ex{display:flex;flex-direction:column;gap:.55rem;background:var(--bg);padding:1.4rem 1.4rem 1.5rem}
.ex h3{font-size:1.02rem;letter-spacing:0}
.ex p{font-size:.88rem;line-height:1.5;color:var(--quiet)}
.ex-sms{
  margin-top:auto;padding-top:.85rem;
  font-size:.8rem;line-height:1.45;color:var(--dim);
}
.ex-sms span{
  display:inline-block;background:var(--accent-dim);border:1px solid rgba(232,255,71,.22);
  border-radius:var(--r-md) var(--r-md) var(--r-md) .25rem;padding:.55rem .75rem;
}
.ex-sums{margin-top:1.5rem}

@media (max-width:1100px){
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ex-grid{grid-template-columns:1fr}
  .calllog-time{font-size:1.5rem}
}

/* ------------------------------------------------------------
   THE QUOTE CAPTURE, inside the sample phone. What separates a
   quote request you can price from one that costs you a drive is
   four fields, so they are shown as filled chips rather than as
   an empty form nobody will read.
   ------------------------------------------------------------ */
.hl-cap{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin:.7rem 0 .1rem;
}
.hl-cap li{
  font-size:.68rem;line-height:1;font-weight:600;
  letter-spacing:.02em;
  color:var(--hl-ink);
  background:rgba(168,65,42,.10);
  border:1px solid rgba(168,65,42,.26);
  border-radius:999px;
  padding:.42rem .6rem;
}
.hl-shots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;
  margin:.6rem 0 .2rem;
}
.hl-shot{
  aspect-ratio:1 / 1;border-radius:.5rem;
  background:rgba(28,26,21,.07);
  border:1px dashed rgba(28,26,21,.24);
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hl-dim);
}
.hl-shot.is-filled{
  border-style:solid;
  border-color:rgba(168,65,42,.4);
  background:rgba(168,65,42,.14);
  color:var(--hl-brand);
}